* { 
	margin: 0px; padding: 0px; 
	}
html {
	scroll-behavior: smooth;
	}
body { 
	background-color: #b7e0e0;
	font-family:sans-serif;
	}
		a:link { color: #000; }
		a:visited { color: #333; }
		a:hover { color: #FF8000; }
		a:active { color: #00FFFF; }

h4 { 
		margin: 35px 0 20px 0 ; padding: 5px 10px;
		background: linear-gradient(45deg,#FAAD59 0%, #FFFFFF  100%);
		font-size: 1.2rem;}
header {
	width: 100%; height: 800px;
	margin:0px;
	background-image: url(img/prism.webp);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	}
figure {
	position:sticky; top: 250px;
	text-align: center;
	}
	figcaption {
	   color: #fff; margin: 0.3em 1em; 
	}

.kiji {
	margin: 20px auto;
	padding:10px 20px; 
	max-width: 90%;
	border: 0px; border-radius: 8px; 
	background-color:#fff;
	}
	
/* ハンバーガーメニュー */
	.drawer_hidden {
	  display: none;
	}
.nav_list {
	display: flex;
	justify-content:center; 
	list-style: none;
		}
.nav_item {
	margin:10px;
	padding:10px 20px;
	font-size: 1.2em;
	background-color:#30c4c4;
	border: 0px; border-radius: 8px; 
	}
.nav_item a:link{
	color: #ffffad;
	text-decoration: none;
	}
	.nav_item a:visited{
	color: #fff;
	}
	.nav_item a:hover{
	color: #adff99;
	text-decoration:underline;
	}
/*新着*/
	.iframe-waku {
	  position: relative;
	  width: 80%;
	  height:150px;
	  padding-top: 2px;
	  overflow: scroll; 
	  -webkit-overflow-scrolling:touch;
	  border:2px solid #ccc; 
	 }    
	.iframe-waku iframe {
	    position:absolute;
	    top:0; left:0;
	    width:100%; height:100%;
	    border:none;
	    display:block;
	 }
	.iframe-newpic {
	  position: relative;
	  width: 100%;
	  height:200px;
	  padding-top: 2px;
	  overflow: hidden：
	  border:2px solid #ccc; 
	 }    
	.iframe-newpic iframe {
	    position:absolute;
	    top:0; left:0;
	    width:100%; height:100%;
	    border:none;
	    display:block;
	 }
.inv {
	padding-right:5px;
	}
	.inv:hover {
	filter:invert(100%);
	}

.ga {
	  display: inline-block;
	  width:70%; height:auto;
	  cursor: pointer;
	  margin:25px auto; padding: 5px;
	  background: #FBCC2F;
	  color: #242323;
	  font-size: 1.2rem;
	  font-weight: bold;  
	  border-radius: 20px ;
	  text-align:center;
	}
	.ga:hover {
	  background: #B65F04;
	  color: white;
	}

	.hue {margin-right:10px; }
	.hue:hover {
	filter: hue-rotate(300deg); transition: 0.3s;
	}
	
.pagetop {
	    display: flex;
	    justify-content:right;
	    position: fixed; bottom: 10px; right:20px;  
	    opacity: 0.5;
	    z-index: 2;
	}
dl div{
	border-bottom:dashed 1px #6d9b9b;
	margin:10px 0;
	padding: 0.3em 0.5em;
	max-width: 800px;
	}
dl div img{	
	position:relative;bottom:7px;
}
dt{
	float: left;
	font-weight:bold;
	margin:0;
	}
dt::after{
  content: "："
}
/*拍手ボタン*/	  
	.button {
	position: relative; ; bottom:5px;left:0px; 
	display: inline-block;
	padding: 0.2em 0.5em;
	text-decoration: none;
	border-radius: 1em;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
	font-weight: bold;
	font-size: 0.8em;
	border: solid 2px #ff5b9b;
	}
	.button:hover {
	background: #F78181;
	color: white;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	}
	.button:active {
	background: #F6CECE;
	}
footer { 
	margin:15px; color:#808080; 
	font-size: 0.7em; text-align:center;}
	 

@media screen and (max-width: 768px) {
	header {
		width: 100%; height: 300px;
		}
		figure {
		position:sticky; top: 100px;
		}

	.iframe-waku {
		  position: relative;
		  width: 100%;
		  height:150px;
		  padding-top: 2px;
		 }    

	  img {
	 max-width: 100%;
	 height: auto;
	 }
	 }
@media screen and (max-width: 500px) {
	header {
		width: 100%; height: 200px;
		margin:0px;
		}
		figure {
		position:sticky; 
		top: 50px;
		}
		figure img {
		width: 70%; height: auto;
		}
	figcaption {
		   margin: 0; 
		   font-size: 0.7em;
		}
.ga{
	  width:90%; height:auto;
	  margin:25px auto; padding: 8px;
	  font-size: 1.5rem;
	  font-weight: bold;  
	  }
/* ハンバーガーメニュー */
.drawer_open {
	  display: flex;
	  cursor: pointer;
	}
/* メニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 6px;
  width: 30px;
  border-radius: 3px;
  background: #333;
  transition: 0.2s;
  position:fixed;top:15px; right:15px;  
 z-index: 90;
}

.drawer_open span:before {
  top: 25px;
}

.drawer_open span:after {
  top: 35px;
}
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 25;
  transform: rotate(-45deg);
}
/* 開いた後のメニュー*/
.nav_content {
  width: 70%;  height: 100%;
  position: fixed;
  top:0;
  transform: translateX(140%);
  z-index: 80;
  background: #e5e2f2;
  opacity: .9; 
  transition: .3s;
}

#drawer_input:checked ~ .nav_content {
transform: translateX(40%);
}
.nav_list {
	display: block;
	position:relative; top:50px;
	text-align:center; 
	margin:2px;
  }
  .nav_item { 
  padding: 1.3em auto; }
}
.nav_item a:link{
	color: #ffffad;
	text-decoration: none;
	}
	.nav_item a:visited{
	color: #fff;
	}
	.nav_item a:hover{
	color: #adff99;
	text-decoration:underline;
	}
.iframe-waku {
	  position: relative;
	  width: 95%;
	  height:100px;
	  padding-top: 2px;
	  overflow: scroll; 
	  -webkit-overflow-scrolling:touch;
	  border:2px solid #ccc; 
	 }  
	}