@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');

html {
	scroll-behavior: smooth;
}
body {
	width: 100%;
	max-width: 960px;
	margin: auto;
	color: #666;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	background: #FFCCD8;
}
*, *:before, *:after {
	box-sizing: border-box;
}
#pagetop {
	position: fixed;
	bottom: 20px;
	right: 0;
	padding: 10px 15px;
	color: #fff;
	background: linear-gradient(145deg, #9ACCD3, #C8FFFF);
	border-radius: 6%;
	box-shadow: inset 4.8px 4.8px 12px #7DA5AB, inset -4.8px -4.8px 12px #E5FFFF;
	text-decoration: none;
}
header {
	height:40px;
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
  display: flex;
	background: transparent;
	z-index:999999;
}
#g-nav{
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0%;
  z-index: 99;
  background: #FF658C;
	color: #009826;
  transition: .5s;
  text-align: center;
  padding-top: 20px;
	overflow:auto;
}
#g-nav.panelactive{
  bottom: 0;
}
#g-nav li{
	list-style: none;
  text-align: left;
	line-height: 14px;
}
#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:5px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.openbtn{
	position:fixed;
  z-index: 9999;
	top:10px;
	right: 10px;
	cursor: pointer;
  width: 45px;
  height:45px;
	background:#FF658C;
	border-radius: 15%;
	box-shadow: 4.8px 4.8px 12px #7EA6AC, -4.8px -4.8px 12px #E4FFFF;
}
.openbtn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #666;
	width: 45%;
}
.openbtn span:nth-of-type(1) {
	top:15px;	
}
.openbtn span:nth-of-type(2) {
	top:23px;
}
.openbtn span:nth-of-type(3) {
	top:31px;
}
.openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}
#container {
	background-color: #6ec7ff;
	position:relative;
	top:40px;
	padding: 5px 5px 10px 5px;
	margin: 10px 2px 10px 2px;
	background: #FFCCD8;
	box-shadow: inset 20px 20px 60px #FFCCD8,
            inset -20px -20px 60px #ffffff;
}
.news {
	padding: 2px;
	margin: 12px 10px 10px 12px;
	background-image: url(sakura.gif);
	background-size:  auto;
	border-radius: 2%;
	box-shadow: 2px 2px 4px #D5D773, -2px -2px 4px #FFFF89;
}

.news-pr {
	padding: 2px;
	margin: 12px 10px 10px 12px;
	border-radius: 2px;
	background: #f0e80a;
	box-shadow:  -4px 4px 4px #d6ce09,
             4px -4px 4px #ffff0b;
}
.newshare {
	padding: 2px;
	margin: 12px 10px 10px 12px;
	color: #fff;
	border-radius: 2px;
	background: #f53246;
	box-shadow:  -4px 4px 4px #da2d3e,
             4px -4px 4px #ff384e;
}
.newshare p {
	color: #fff;
}
.flex-container {
  display: flex;
  flex-wrap:wrap;
	justify-content: left;
	box-sizing: border-box;
  font-size: 14px;
	color: #260098;

}
.flex-item2 {
	width: calc((100% - 20px) / 2);
	margin: 5px;
	box-sizing: border-box;
	border : solid 1px #b3b3b3 ;
	border-top : solid 1px #e0e0e0 ;
	border-bottom : solid 1px #717171 ;
	box-shadow : 0 2px 6px rgba(100, 100, 100, 0.3) ;
  border-radius: 2px;
}
.flex-item3 {
	width: calc((100% - 30px) / 3);
	margin: 5px;
	box-sizing: border-box;
}
.flex-item4 {
	width: calc((100% - 16px) / 4);
	margin: 2px;
	box-sizing: border-box;
}
.flex-container .midasi {
	font-family: 'Baloo Bhaina', cursive;
  font-size: 16px;
  font-weight: bold;
	text-align:center;
	line-height:1.95em;
	color: 	#260098;
	text-shadow: 0 0.05em 0.08em rgba(255,255,255,0.7);
}	
.flex-container img {
	border-radius: 3px;
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
@media screen and (max-width:768px){
	.flex-container {
		padding: 5px;
  }
	.flex-item4 {
		width: calc((100% - 20px) / 2);
		margin: 5px;
  }
	.flex-container .midasi {
		font-size: 14px;
  }
}
.photo {
	display: block;
	font-family: 'Baloo Bhaina', cursive;
  font-size: 16px;
  font-weight: bold;
	text-align:center;
	color: 	#260098;
	text-shadow: 0 0.05em 0.08em rgba(255,255,255,0.7);
}
.photo img {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.book {
  columns: 2;
  column-rule: 2px dashed #ccc;
  column-gap: 2em;
	padding: 0px 10px 10px;
	color: #260098;
  line-height: 2;
  text-align: justify;
  border: 1px solid #ccc;
}
@media screen and (max-width: 600px) {
  .book {
    columns: 1;
  }
}
.bfig {
	width: 100%;
	padding: 4px;
	break-inside: avoid;
}
.bfig img {
	border-radius: 3px;
	width: 100%;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.bfig .midasi {
	font-family: 'Baloo Bhaina', cursive;
  font-size: 16px;
  font-weight: bold;
	text-align:center;
	line-height:1.95em;
	color: 	#260098;
	text-shadow: 0 0.05em 0.08em rgba(255,255,255,0.7);
}	
.book2 {
  columns: 2;
  column-rule: 2px ;
  column-gap: 2em;
	color: #260098;
  line-height: 2;
  text-align: justify;
}
@media screen and (max-width: 600px) {
  .book2 {
    columns: 2;
  }
}
.book4 {
  columns: 4;
  column-gap: 1em;
	padding: 0px 10px 4px;
	color: #260098;
  text-align: justify;
}
@media screen and (max-width: 600px) {
  .book4 {
    columns: 2;
  }
}
.gallery{
	columns: 4;
	padding:0 15px;
	margin:0;
}
.gallery li {
	margin-bottom: 20px;
	list-style:none;
}
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;
}
@media only screen and (max-width: 900px) {
	.gallery{
	columns:3;
	}	
}
@media only screen and (max-width: 768px) {
	.gallery{
	columns: 2;
	}	
}
.score {
	margin: 0 auto;
  padding: 4px;
	display:inline-block;
  width: 100px;
	font-family: 'Baloo Bhaina', cursive;
  font-size: 14px;
  font-weight: bold;
	color: #260098;
	text-align:center;
	background: linear-gradient(145deg, #9EF2A4, #20b2aa);
	border-radius: 1%;
	box-shadow: inset 0.3px 0.3px 4px #4C754F, inset -0.3px -0.3px 4px #C6FFCD;
}
ul, ol {
	border : solid 1px #b3b3b3 ;
	border-top : solid 1px #e0e0e0 ;
	border-bottom : solid 1px #717171 ;
	box-shadow : 0 2px 6px rgba(100, 100, 100, 0.3) ;
  border-radius: 2px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0.5em 0.5em 0.5em 2em;
	color: #260098;
}
ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
	color: #260098;
}
dl {
  border: dashed 2px #668ad8;
  border-radius: 9px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0.5em 0.5em 0.5em 2em;
	color: #260098;
  line-height: 1;
}
dt {
  padding: 0.5em 0;
  font-weight: bold;
  line-height: 1.4;
}
dd {
  padding: 0.5em 0;
}

h2 {
  font-size: 20px;
	text-align: center;
	color: #FF32CC;
	text-shadow:0px -1px 0px #fff,1px 1px 0 #fff, 2px 2px 0 #000;
	margin-left: auto;
	margin-right: auto;
	width: 95%;
	margin-bottom: 15px;
	padding: 7px 15px;	/*上下、左右*/
	background: linear-gradient(145deg, #FFCCF2, #FF99FF);	border-radius: 2%;
	box-shadow: 2px 2px 4px #FF003F, -2px -2px 4px #FF99FF;
}
h3 {
  font-size: 16px;
	text-align:center;
	color: #dadbf1;
	text-shadow:-1px -1px 0px #fff,2px 2px 2px #000;
	margin-left: auto;
	margin-right: auto;
	width: 92%;
	margin-bottom: 5px;
	padding: 2px 15px;
	background:#abaef2 ;
	border-radius: 2%;
	box-shadow: 1.4px 1.4px 3px #0000CB, -1.4px -1.4px 3px #B2B5FC;
}
h4 {
  font-size: 16px;
	color: #0000CB;
	text-shadow:0px -1px 0px #fff,1px 1px 0 #fff;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	padding: 2px 10px;
	width: 96%;
	background: #cdd0f4;
	border-radius: 2%;
	box-shadow: 1px 1px 3px #0000CB, -1px -1px 3px #D5D8FE;
}
h5 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	text-align: center;
	color: #009800;
	text-shadow:0px -1px 0px #fff,1px 1px 0 #fff;
	padding: 0px 15px;
}
h5::before,
h5::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #009800;
}
h5::before {
	margin-right: 20px;
}
h5::after {
	margin-left: 20px;
}
@media screen and (max-width:768px){
	h1 {
	  font-size: 20px;
  }
	h2 {
	  font-size: 18px;
  }
	h3 {
		width:95%;
  font-size: 16px;
  }
	h4 {
		width:95%;
  }
}
.md_kazari {
	clear: both;
	margin-bottom: 15px;
	font-size: 18px;
	color : #ff0000;
  letter-spacing: 4px;
  text-shadow : 
       2px  2px 1px #ffff1a,
      -2px  2px 1px #ffff1a,
       2px -2px 1px #ffff1a,
      -2px -2px 1px #ffff1a,
       2px  0px 1px #ffff1a,
       0px  2px 1px #ffff1a,
      -2px  0px 1px #ffff1a,
       0px -2px 1px #ffff1a;
  text-align: center;
	padding: 7px 15px;
	background: #FFBF00;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	border-radius: 10px;
}
.back_kazari {
	background-image: url(shougatu.jpg);
	background-size:  cover;
}
.md_hidari {
	padding: 2px 10px;
	font-size: 14px;
  font-weight: bold;
	background: ;
	border-radius: 1%;
	box-shadow: inset 2px 2px 2px #9B9C9B, inset -2px -2px 2px #FFFFFF;
}

.kakomiMD {
	font-family: 'Baloo Bhaina', cursive;
  font-size: 18px;
  font-weight: bold;
  color: #364e96;
  border: solid 3px #364e96;
  padding: 0.5em;
  border-radius: 0.5em;
  text-align: center;
}
.midasih2 {
	font-family: 'Baloo Bhaina', cursive;
  font-size: 24px;
  font-weight: bold;
	text-shadow: 0 0.05em 0.08em rgba(229,229,229,0.7);
	clear: both;
	margin-bottom: 5px;
	color: #0000FF;
	padding: 7px 15px;
	background: linear-gradient(145deg, #99CCFF, #D8CCFF);
	border-radius: 2%;
	box-shadow: 3px 3px 4px #B2B2B2, -3px -3px 4px #323232;
}
@media screen and (max-width:768px){
	.midasih2 {
	  font-size: 24px;
  }
}
p {
  font-size: 14px;
	padding: 0px 10px 0px;
	color: #260098;
}
.undline {
	text-decoration:underline;
	text-decoration-color:blue;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  opacity: 0.7;
}
.link_button {
	text-align: center;
	padding: 10px;
}
.link_button p{
	margin:10px;
}
.link_button a {
	background: #00FF3F;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
	max-width: 240px;
	padding: 5px 25px;
	color: #313131;
	transition: 0.3s ease-in-out;
	font-weight: 500;
	border-radius: 2%;
	background: #99e1f0;
	box-shadow:  -4px 4px 4px #8bcdda,
             4px -4px 4px #a7f5ff;
	z-index:0;
}
.link_button a:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	display: block;
	background: #003FFF;
	transition: .3s;
	left:0;
}
.link_button a:hover {
	color: #FFF;
}
.link_button a:hover:before {
	width: 100%;
	z-index: -1;
}
.btnarrow4{
	position: relative;
	display: inline-block;
	padding: 0 20px;
  color: #FF0000;
  text-decoration: none;
  outline: none;
}
.btnarrow4::before{
  content: '';
	position: absolute;
  bottom:-8px;
  left:15%;
  width: 85%;
  height: 1px;
	background:#333;
  transition: all .3s;
}
.btnarrow4::after{
	content: '';
	position: absolute;
  bottom:-3px;
  right:0;
  width: 15px;
  height:1px;
	background:#333;
  transform: rotate(35deg);
  transition: all .3s;
}
.btnarrow4:hover::before{
	left:20%;
}
.btnarrow4:hover::after{
	right:-5%;
}
#footer {
	position:fixed;
	bottom:0;
	background-color: #009826;
	width:100%;
	color: #D8FFCC;
	font-size: 12px;
	text-align: center;
	margin-top: 5px;
	box-shadow: inset 5px 5px 10px #65D8FF, -5px -5px 10px #F7FFFF;
}


.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 40px;
  text-align: center;
}
.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}
.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 90%;
  max-width: 600px;
  padding: 30px 30px 15px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
}
.modal-content p{
	font-weight: lighter;
}
.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}
.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  color: #95979c !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}
.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}