@charset "utf-8";
/*///////////////////////////////////

reset

///////////////////////////////////*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}

/*///////////////////////////////////

reset

///////////////////////////////////*/

body {
	margin: 0px;
	width: 100%;
	padding: 0px;
	background: #FFFDF5;
}
#bg {
	list-style : none;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	-webkit-text-size-adjust: 100%;
	overflow-wrap: break-word;
	width: 100%;
	background: url(../img/bg.webp) top center repeat-x;
	background-attachment: fixed;
}
#bg02 {
	background: url(../img/bg02.webp) top center repeat-x;
	background-attachment: fixed;
	position: relative;
}
/* CSS
【Media Query1400px】------------------------------------------------------ */
@media screen and (max-width: 1600px) {
#bg {
	width: 100%;
	background: url(../img/bg.webp) top center repeat;
	background-size: 190%;
	background-attachment: fixed;
}
#bg02 {
	background: url(../img/bg02.webp) top center repeat-x;
	background-size: 170%;
	background-attachment: fixed;
}
#wrapper .indexH1 img {
	max-width: 900px;
	width: 80%;
	height: auto;
}
}
/* CSS
【Media Query1400px】------------------------------------------------------ */
@media screen and (max-width: 1400px) {
#bg {
	width: 100%;
	background: url(../img/bg.webp) top center repeat;
	background-size: 180%;
	background-attachment: fixed;
}
#bg02 {
	background: url(../img/bg02.webp) top center repeat-x;
	background-size: 160%;
	background-attachment: fixed;
}
#wrapper .indexH1 img {
	max-width: 900px;
	width: 80%;
	height: auto;
}
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#bg {
	width: 100%;
	background: url(../img/bg.webp) top center repeat;
	background-size: 180%;
	background-attachment: fixed;
}
#bg02 {
	background: url(../img/bg02Sp.webp) top center repeat-x;
	background-size: 120%;
	background-attachment: fixed;
	position: relative;
	}
}
#bg ul {
	list-style : none;
}
#bg a {
	list-style : none;text-decoration: none;
}
div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table {
	padding: 0;
	margin: 0;
}
#wrapper {
	font: 16px/1.8em 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック','メイリオ',Meiryo,sans-serif;
	height: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 0px;
	overflow: hidden;
	color: #606060;
	position: relative;
	z-index: 9999;
}
#wrapper .contentBackground {
	font-family: "Kiwi Maru", serif;
}
#wrapper img {
	max-width: 100%;
	height: auto;
	-webkit-transition: 0.6s ease;
	-webkit-transition-property: opacity,border,color,background;
	-moz-transition: 0.6s ease;
	-moz-transition-property: opacity,border,color,background;
	-o-transition: 0.6s ease;
	-o-transition-property: opacity,border,color,background;
	transition: 0.6s ease;
	transition-property: opacity,border,color,background;
}
#wrapper a img:hover , #wrapper a:hover {
	opacity: 0.5 ;
}
#wrapper a img {
	transition : all 0.5s ease 0s;
}
#wrapper a {
	transition : all 0.5s ease 0s;
}
#wrapper ul {
	list-style: none;
}
#bg .pc {
	display: block;
}
#bg .sp {
	display: none;
	font-size: 0px;
}
#bg .br400 {
	display: none;
}
/* CSS
【Media Query400px】------------------------------------------------------ */
@media screen and (max-width: 400px) {
#bg .br400 {
	display: block;
}
}
#bg a {
	color: #000000;
}
#bg a:hover {
	color: #5C7EA9;
	text-decoration: none;
}
#bg img{
	border-style: none;
	vertical-align: top;
}
#bg ::selection {
	color: #1D1D1D;
  background-color: #d8eeff;
}
#wrapper .width800 {
	max-width: 800px;
	width: 96%;
	margin: auto;
}
#wrapper .width900 {
	max-width: 900px;
	width: 96%;
	margin: auto;
}
#wrapper .width1000 {
	max-width: 1000px;
	width: 96%;
	margin: auto;
}
#wrapper .width1200 {
	max-width: 1200px;
	width: 96%;
	margin: auto;
}
#wrapper .width1400 {
	max-width: 1400px;
	width: 96%;
	margin: auto;
}
#wrapper .widthTypeA {
	width: 80%;
	margin: auto;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .widthTypeA {
	width: auto;
}
}

/*///////////////////////////////////

index

///////////////////////////////////*/

#wrapper #indexMainVisual , #wrapper #commonMainVisua {
	background:linear-gradient(10deg, #F0F0EB,#F4EEDC,#F4F2E4,#FFFCF0);
	background-size: 250% 280%;
	animation: MainVisual_areabg 20s ease infinite;
	max-width: 1200px;
	margin: auto;
	padding: 30px;
	text-align: center;
	border-radius: 40px;
	box-shadow: #E4DDD3 5px 25px 25px;
	position: relative;
	z-index: 50;
}
@keyframes MainVisual_areabg{
	0% {
		background-position: 0% 70%;
	}
	50% {
		background-position: 100% 20%;
	}
	100% {
		background-position: 0% 70%;
	}
}
#wrapper .indexMainVisualBroadcast {
	max-width: 600px;
	margin: auto;
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#wrapper .nextArea {
	margin: 40px auto auto auto;
	max-width: 1000px;
	width: 94%;
	border-radius: 20px;
}
#wrapper .aboutArea {
	padding: 0 0 50px 0;
}
#wrapper #aboutAreaTitle {
	margin: -40px auto 20px auto;
	font-size: 4em;
	position: relative;
	text-align: center;
 	font-family: "Comfortaa", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	letter-spacing: 1px;
	padding: 30px 0 80px 0;
	color: #1B1B1B;
	background: url("../img/titlebg.webp") bottom center no-repeat;
	background-size: 500px;
	z-index: 50;
}
#wrapper #infoAreaTitle {
	margin: -40px auto 20px auto;
	font-size: 4em;
	position: relative;
	text-align: center;
 	font-family: "Comfortaa", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	letter-spacing: 3px;
	padding: 30px 0 80px 0;
	color: #1B1B1B;
	background: url("../img/titlebg.webp") bottom center no-repeat;
	background-size: 500px;
	z-index: 50;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper #aboutAreaTitle , #wrapper #infoAreaTitle {
	font-size: 2.5em;
	padding: 30px 0 40px 0;
	background: url("../img/titlebg.webp") bottom center no-repeat;
	background-size: 340px;
}
#wrapper .nextArea {
	margin: 20px auto auto auto;
}
}
#wrapper .textShadow01 {
	font-family: "Comfortaa", sans-serif;
}
#wrapper .placeContent {
	width: auto;
	margin: auto;
	padding: 40px;
}
#wrapper .placeContentAreaList {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	max-width: 1400px; 
	margin: auto;
	font-size: 4em;
	line-height: 1.5em;
	padding-top: 50px;
}
#wrapper .placeContentAreaList ul {
	width: 30%;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .placeContentAreaList ul {
	width: 80%;
	margin: auto;
	text-align: center;
}
#wrapper #indexMainVisual , #wrapper #commonMainVisua {
	padding: 10px 0;
}
}
#wrapper .mainContent p {
	margin: auto;
	width: auto;
	padding-right: 10%;
	padding-left: 10%;
	line-height: 1.7em;
}
/* CSS
【Media Query1100px】------------------------------------------------------ */
@media screen and (max-width: 1100px) {
#wrapper .messageContent h1 {
	padding-bottom: 50px;
}
}
#wrapper .mainVisualArea {
	text-align: center;
}
#wrapper .mainVisualArea ul li {
	width: auto;
	margin: auto;
}
#wrapper #contentSnsBt {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	width: auto;
	max-width: 300px;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
#wrapper #contentSnsBt li img {
	width: 80px;
	height: auto;
}
#wrapper #header {
	font-family: "Kiwi Maru", serif;
	margin: auto;
	padding-top: 5px;
	padding-bottom: 3px;
	background: rgba(255,255,255,0.95);
	width: 100%;
	z-index: 100;
}
#wrapper .navi_area {
	max-width: 98%;
	margin: auto;
}

#wrapper .pcContent850 a {
padding-bottom: 3px;
background-image: linear-gradient(#F6ECFA, #C7B1FF);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 0 3px;
transition: background-size 0.3s;
}
#wrapper .pcContent850 a:hover {
background-position: bottom left;
background-size: 100% 3px;
}
#animatedModal {
	display: none;
}
#wrapper #header #navi_list .navi_area ul {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 5px;
	color: #A2A2A2;
}
#wrapper #header #navi_list .navi_area ul .header_logo {
	width: 18%;
}
#wrapper #header #navi_list .navi_area ul .header_logo img {
	width: 150px;
	height: auto;
}
#wrapper #header #navi_list .navi_area ul li:nth-of-type(n+2) {
	width: 14%;
	margin-right: 0px;
}
#wrapper .index_main_nav ul {
	justify-content: space-evenly;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	padding-top: 30px;
	padding-bottom: 10px;
}
#wrapper .index_main_nav ul li {
	width: 18%;
	margin: auto;
}
#wrapper #header .main_visual img {
	width: 100%;
	height: auto;
}
#wrapper #content_area {
	margin: auto;
	line-height: 1.7em; 
}
#wrapper .indexTopBg{
	padding-top: 30px;
}
/* CSS
【Media Query830px】------------------------------------------------------ */
@media screen and (max-width: 830px) {
#wrapper #header #navi_list .pcContent850 {
	display: none;
}
#wrapper .indexTopBg{
	padding-top: 30px;
}
#wrapper #header #navi_list .navi_area ul .header_logo {
	width: 180px;
}
}
#wrapper .indexH1 {
	padding: 100px 2% 1% 2%;
}
#wrapper .logoOpacityImg {
  opacity: 0;
  filter: blur(50px);
  animation: logoOpacityImgFadeUp 1.5s ease-out forwards;
}
@keyframes logoOpacityImgFadeUp {
  0% {
    opacity: 0;
    filter: blur(50px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
#wrapper .opacityImg {
  opacity: 0;
  transform: translateY(50px); 
  filter: blur(20px);
  animation: logoFadeUp 2s ease-out forwards;
}
@keyframes logoFadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
#wrapper .opacityImg02 {
  opacity: 0;
  transform: translateY(30px); 
  filter: blur(20px);
  animation: logoFadeUp02 3s ease-out forwards;
}
@keyframes logoFadeUp02 {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
#wrapper .itemList {
	max-width: 900px;
	width: 80%;
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	position: absolute;
  right: 0;
  left: 0;
}
#wrapper .itemList img {
	max-width: 150px;
	width: 100%;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .itemList img {
	max-width: 120px;
	width: 100%;
}
}
#wrapper .fuwari01 {
  animation: floating-y 2.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-7%);
  }
  100% {
    transform: translateY(7%);
  }
}
#wrapper .itemList02 {
	max-width: 1100px;
	width: 90%;
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	margin: -100px auto auto auto;
	padding: 0 0 0 0;
	position: absolute;
	right: 0;
	left: 0;
}
#wrapper .fuwari02 {
  animation: floating02-y 2.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating02-y {
  0% {
    transform: translateY(4%);
  }
  100% {
    transform: translateY(-3%);
  }
}
#wrapper .itemList02 .item03 {
	margin: -100px auto auto 120px;
}
#wrapper .itemList02 .item04 {
	margin: -50px 5px auto auto;
}
/* CSS
【Media Query1300px】------------------------------------------------------ */
@media screen and (max-width: 1300px) {
#wrapper .itemList02 {
	max-width: 1000px;
	margin: -20px auto auto auto;
}
#wrapper .itemList02 .item04 {
	margin: -10px 5px auto auto;
}
#wrapper .itemList02 img {
	width: 140px;
}
}
/* CSS
【Media Query1000px】------------------------------------------------------ */
@media screen and (max-width: 1000px) {
#wrapper .itemList02 {
	display: none;
}
}
#wrapper .dramaAttention {
	margin: 1% 1% 30px 1%;
	text-align: center;
	font-size: 3rem;
	color: rgba(136,152,240,1.00);
	line-height: 3rem;
}
#wrapper .dramaAttentionCast {
	margin: 1% 1% 3% 1%;
	text-align: center;
	font-size: 3rem;
	color: rgba(136,152,240,1.00);
}
#wrapper .mainCharacter {
	font-size: 4rem;
	color: #a284e0;
}
#wrapper .dramaAttentionInner {
	display: flex;
	justify-content: center;
	align-items: center;
}
#wrapper .dramaAttentionInner::before,
#wrapper .dramaAttentionInner::after {
	content: '';
	width: 4px;
	height: 40px;
	background-color: #8898F0;
}
#wrapper .dramaAttentionInner::before {
	margin-right: 20px;
	transform: rotate(-35deg)
}
#wrapper .dramaAttentionInner::after {
	margin-left: 20px;
	transform: rotate(35deg)
}
#wrapper .dramaAttention span {
  display: inline-block;
  animation: nextAreaTitleAnimation 7s infinite;
}
@keyframes nextAreaTitleAnimation {
0% {
    transform: translateY(0) rotateY(0);
  }
90% {
    transform: translateY(0) rotateY(0);
  }
  95% {
    transform: translateY(-10px) rotateY(180deg);
  }
  100% {
    transform: translateY(0) rotateY(360deg);
  }
}
#wrapper .oaDate {
	max-width: 800px;
	width: 86%;
	margin: auto;
	text-align: center;
	background:linear-gradient(-100deg, rgba(222,236,248,1.00) 0%, rgba(239,216,245,1.00) 100%);
	background-size: 100% 100%;
	padding: 20px;
	font-size: 2rem;
	border-radius: 20px;
	color: #201514;
}
#wrapper .oaDateL {
	font-size: 2.8rem;
	color: #9871e6;
}
#wrapper .oaDateS {
	display: block;
	padding-top: 10px;
	font-size: 1.5rem;
}
#wrapper .youtubeArea {
    max-width: 1000px;
    margin: 20px auto 20px auto;
	position: relative;
	z-index: 30;
	background:linear-gradient(-100deg, rgba(222,236,248,1.00) 0%, rgba(239,216,245,1.00) 100%);
	background-size: 100% 100%;
	padding: 30px;
	border-radius: 30px;
}
#wrapper .youtubeArea .size {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0px;
    position: relative;
    margin: 0px auto;
}
#wrapper .youtubeArea .size iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .indexTopBg{
	padding-top: 30px;
}
#wrapper .indexH1 {
	max-width: 250px;
	width: 80%;
	text-align: center;
	margin: -60px auto auto auto;
}
#wrapper .dramaAttention {
	margin: 1% 1% 2% 1%;
	text-align: center;
	font-size: 2rem;
}
#wrapper .dramaAttentionCast {
	margin: 1% 1% 5% 0%;
	text-align: center;
	font-size: 2rem;
	color: rgba(136,152,240,1.00);
}
#wrapper .mainCharacter {
	font-size: 2.7rem;
}
#wrapper .oaDate {
	font-size: 1.5rem;
}
#wrapper .oaDateL {
	font-size: 2.5rem;
}
#wrapper .oaDateS {
	display: block;
	padding-top: 10px;
	font-size: 1.1rem;
}
#wrapper .youtubeArea {
	padding: 20px;
	border-radius: 20px;
}
}
/* CSS
【Media Query900px】------------------------------------------------------ */
@media screen and (max-width: 900px) {
#wrapper .dramaAttention {
	margin: 1% 1% 2% 1%;
	text-align: center;
	font-size: 2rem;
}
#wrapper .dramaAttentionCast {
	margin: 1% 1% 5% 0%;
	text-align: center;
	font-size: 2rem;
	color: rgba(136,152,240,1.00);
}
#wrapper .mainCharacter {
	font-size: 2.8rem;
}
}
/* CSS
【Media Query420px】------------------------------------------------------ */
@media screen and (max-width: 420px) {
#wrapper .dramaAttention {
	margin: 1% 1% 1% 1%;
	text-align: center;
	font-size: 1.5rem;
}
#wrapper .dramaAttentionCast {
	margin: 1% 1% 5% 1%;
	text-align: center;
	font-size: 1.5rem;
}
#wrapper .mainCharacter {
	font-size: 2rem;
}
#wrapper .dramaAttentionInner::before,
#wrapper .dramaAttentionInner::after {
	content: '';
	width: 3px;
	height: 30px;
	background-color: #8898F0;
}
#wrapper .dramaAttentionInner::before {
	margin-right: 15px;
	transform: rotate(-35deg)
}
#wrapper .dramaAttentionInner::after {
	margin-left: 15px;
	transform: rotate(35deg)
}
}
#wrapper .infoArea {
	padding-bottom: 40px;
}
#wrapper .photoList {
	padding: 50px 0 30px 0;
}
#wrapper .photoList li div {
	margin: auto 5px auto 5px;
}
#wrapper .read {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 2.5rem;
	padding-bottom: 20px;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .read {
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 2rem;
	padding-bottom: 20px;
}
}
#wrapper .readImg {
	padding: 20px 0;
}
#wrapper #mainContentAreaBgInner {
	background: url(../img/Border.webp) top repeat-x;
	background-size: 800px;
	animation: cloudmove 30s linear infinite;
	-webkit-animation: cloudmove 30s linear infinite;
	-moz-animation: cloudmove 30s linear infinite;
	padding: 10px 10px 140px 10px;
}
	@keyframes cloudmove {
	    0% {background-position: 0 top , 0 top; }
	    100% {background-position: 800px top , 800px top;}
	}
	@-webkit-keyframes cloudmove {
	    0% {background-position: 0 top , 0 top;}
	    100% {background-position: 800px top, 800px top;}
	}
	@-moz-keyframes cloudmove {
	    0% {background-position: 0 top , 0 top;}
	    100% {background-position: 800px top , 800px top;}
	}
#wrapper #mainContentAreaBg {
	background: url(../img/Border02.webp) bottom repeat-x;
	background-size: 800px;
	animation: movebg02 30s linear infinite;
	-webkit-animation: movebg02 30s linear infinite;
	-moz-animation: movebg02 30s linear infinite;
}
	@keyframes movebg02 {
	    0% {background-position: 800px bottom , 800px bottom;}
	    100% {background-position: 0 bottom , 0 bottom;}
	}
	@-webkit-keyframes movebg02 {
	    0% {background-position: 800px bottom , 800px bottom;}
	    100% {background-position: 0 bottom , 0 bottom;}
	}
	@-moz-keyframes movebg02 {
	    0% {background-position: 800px bottom , 800px bottom;}
	    100% {background-position: 0 bottom , 0 bottom;}
	}
#wrapper #mainContentArea {
    width: 98%;
	max-width: 1400px;
	margin: auto ;
}
#wrapper #mainContentArea h2 {
	font-size: 4em;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 70px;
	width: 98%;
	margin: auto;
	color: #1B1B1B;
	font-family: "Comfortaa", sans-serif;
	letter-spacing: 10px;
}
@media screen and (max-width:750px) {
#wrapper #informationArea h2 {
	font-size: 2em;
	letter-spacing: 0.05em;
}
#wrapper #mainContentAreaBgInner {
	background: url(../img/Border.webp) top repeat-x;
	background-size: 600px;
	animation: cloudmove 30s linear infinite;
	-webkit-animation: cloudmove 30s linear infinite;
	-moz-animation: cloudmove 30s linear infinite;
	padding: 10px 10px 80px 10px;
}
	@keyframes cloudmove {
	    0% {background-position: 0 top , 0 top; }
	    100% {background-position: 600px top , 600px top;}
	}
	@-webkit-keyframes cloudmove {
	    0% {background-position: 0 top , 0 top;}
	    100% {background-position: 600px top, 600px top;}
	}
	@-moz-keyframes cloudmove {
	    0% {background-position: 0 top , 0 top;}
	    100% {background-position: 600px top , 600px top;}
	}
#wrapper #mainContentAreaBg {
	background: url(../img/Border02.webp) bottom repeat-x;
	background-size: 600px;
	animation: movebg02 30s linear infinite;
	-webkit-animation: movebg02 30s linear infinite;
	-moz-animation: movebg02 30s linear infinite;
}
	@keyframes movebg02 {
	    0% {background-position: 600px bottom , 600px bottom;}
	    100% {background-position: 0 bottom , 0 bottom;}
	}
	@-webkit-keyframes movebg02 {
	    0% {background-position: 600px bottom , 600px bottom;}
	    100% {background-position: 0 bottom , 0 bottom;}
	}
	@-moz-keyframes movebg02 {
	    0% {background-position: 600px bottom , 600px bottom;}
	    100% {background-position: 0 bottom , 0 bottom;}
	}
}
#wrapper .topicsAreaList {
	max-width: 1400px;
	margin: auto auto 40px auto;
	display: flex;
	flex-wrap: wrap;
}
#wrapper .topicsAreaList a {
	text-decoration: none;
}
#wrapper .topicsAreaList .sodaneBigArticleInner {
	background: rgba(255,255,255,0.7);
	padding: 30px;
	margin: 20px;
	border-radius: 30px;
	box-shadow: #E5E9BE 5px 5px 10px;
 	display: flex;
}
#wrapper .sodaneLink {
	padding: 10px 10px 70px 10px;
	margin: auto;
	max-width: 500px;
}
#wrapper .sodaneLink figure {
	text-align: center
}
#wrapper .sodaneLink p {
	font-size: 0.8rem;
}
/* CSS
【Media Query1000px】------------------------------------------------------ */
@media screen and (max-width: 1000px) {
#wrapper .topCornerList li dl dt img {
	max-width: 220px;
}
}
/* CSS
【Media Query800px】------------------------------------------------------ */
@media screen and (max-width: 800px) {
#wrapper .topCornerList {
	display: block;
}
}
#wrapper #mainContentArea .sodaneList , #wrapper .picupList {
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	padding-top: 30px;
	padding-bottom: 30px;
}
#wrapper #mainContentArea .sodaneList li a {
	color: #000000;
	font-size: 1.2em;
}
#wrapper .picupList li {
	width: 28%;
	margin-right: 0px;
	margin-left: 0px;
	padding: 10px;
	margin-bottom: 20px;
	position: relative;
	border: solid 1px #D5D5D5;
	background: #FFFFFF;
}
#wrapper .picupList li img {
	text-align: center;
	display: block;
	margin: auto;
}
#wrapper .picupList li p {
	padding: 10px 0;
}
#wrapper #newsArea {
background-image: linear-gradient(#f0f0f0 1px, transparent 1px), linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
background-size: 24px 24px;
background-color: #ffffff;
}
/* CSS
【Media Query900px】------------------------------------------------------ */
@media screen and (max-width: 900px) {
#wrapper #mainContentArea .sodaneList li {
	width: 42%;
	margin: auto auto 40px auto;
	min-height: 300px;
	}
#wrapper .picupList li {
	width: 84%;
}
}
/* CSS
【Media Query500px】------------------------------------------------------ */
@media screen and (max-width: 500px) {
#wrapper #mainContentArea .sodaneList li {
	width: 90%;
	margin: auto auto 40px auto;
	}
#wrapper #mainContentArea .prefecture_list li {
	width: 70%;
	}
}
#content_area #information p span {
	color: #B95635;
}
#bg #footorArea {
	padding-top: 30px;
	padding-bottom: 30px;
	background: linear-gradient(45deg, rgba(224,251,255,1.00) 0%, rgba(219,216,253,1.00) 100%);
	font-family: "Kiwi Maru", serif;
}
#bg #footerLinkBg {
	position: relative;
	background: url(../img/star.webp) top center no-repeat;
	background-size: 600px;
}
/* CSS
【Media Query600px】------------------------------------------------------ */
@media screen and (max-width: 600px) {
#bg #footerLinkBg {
	background: url(../img/star.webp) top center no-repeat;
	background-size: 400px;
}
}
#bg #footorArea a {
	color: #3F3F3F;
	text-decoration: none;
}
#bg #footorArea a:hover {
	color: #FEF69F;
	text-decoration: underline;
}
#bg #wrapper #footorArea #footer_link_bg #footer_link {
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8em;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
	font-weight: bold;
}
#bg #wrapper .footerNavi {
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	margin: 30px auto 10px auto;
	border-top: #271B1C 2px solid;
	border-bottom: #271B1C 2px solid;
	color: #A2A2A2;
}
/* CSS
【Media Query1000px】------------------------------------------------------ */
@media screen and (max-width: 1000px) {
#bg #wrapper #footorArea #footer_link_bg #footer_link ul {
	width: 100%;
	text-align: center;
}
}
#bg #wrapper #footorArea #footer_link_bg #footer_link_logo {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
}
#wrapper .content_info dt {
	font-size: 2em;
	font-weight: bold;
	font-weight: bolder;
}
#wrapper .content_info dd , #bg #wrapper #content .sns_area {
	padding-top: 30px;
	font-size: 1.7em;
}
#wrapper #content {
	margin: auto;
}
#wrapper .index_news_area_bg {
	padding-bottom: 0px;
}
#wrapper .index_news_area {
    width: 90%;
	margin: auto ;
}
#wrapper .news_area_title {
	font-size: 4em;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 80px;
	width: 98%;
	margin: 20px auto 30px auto;
	letter-spacing: 10px;
	color: #1B1B1B;
	background: url("../img/titlebg.webp") bottom center no-repeat;
	background-size: 500px;
}
#wrapper .indexStoryArea {
    max-width: 1400px;
    margin: 30px auto 20px auto;
	background: url("../img/indexStoryAreaBg.webp") bottom center no-repeat , rgba(255,253,240,0.7);
	background-size: 100%;
	padding: 80px 20px 30px 20px;
	border-radius: 30px;
	box-shadow: #E5E9BE 5px 5px 30px;
	position: relative;
	border: double 8px #1E1716;
}
#wrapper .indexStoryAreaList {
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1000px;
	padding: 0px;
	margin: auto;
	position: relative;
	z-index: 200;
}
#wrapper .indexStoryAreaList dl dt {
	background:linear-gradient(-100deg, rgba(239,216,245,1.00) 0%, rgba(222,236,248,1.00) 100%);
	background-size: 100% 100%;
	padding: 5px;
	margin: 10px auto;
	border-radius: 10px;
	color: #201514;
}
#wrapper .indexStoryAreaList dl dd {
	padding-bottom: 10px;
}
#wrapper .indexStoryAreaList li:first-child {
	width: 33%;
}
#wrapper .indexStoryAreaList li:last-child {
	width: 55%;
}
#wrapper .indexCommentAreaList li {
	border-bottom: dotted 5px #97E2CB;
}
#wrapper .indexCommentAreaList li:last-child {
	border-bottom: none;
}
#wrapper .indexCommentAreaList li dl {
	max-width: 900px;
	padding: 20px;
	margin: auto;
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#wrapper .indexCommentAreaList li dl dt {
	width: 30%;
}
#wrapper .indexCommentAreaList li dl dd {
	width: 65%;
}
#wrapper .indexStoryAreaPic01 {
	position: absolute;
	top: 0;
	margin-top: -40px;
}
#wrapper .pictureList {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 30px;
}
#wrapper .pictureList li {
	width: 25%;
}
#wrapper .pictureList img {
filter: drop-shadow(5px 5px 2px #D7CC8D);
}
#wrapper .Imageanimation {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 3s;
}
#wrapper .keyframe01 {
  animation-name: anim_s;
  transform: rotate(10deg);
  animation-duration: 5s;
}
@keyframes anim_s {
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
/* CSS
【Media Query850px】------------------------------------------------------ */
@media screen and (max-width: 850px) {
#wrapper .indexStoryAreaList {
	display: block;
}
#wrapper .indexStoryAreaList li {
	width: auto;
	margin: 10px;
}
#wrapper .indexStoryAreaList li:first-child {
	max-width: 400px;
	width: 90%;
	margin: auto;
	padding-bottom: 10px;
	}
#wrapper .indexStoryAreaList li:last-child {
	width: auto;
}
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper #familyArea h1 a , #wrapper .indexFamilyArea h2 {
	font-size: 1.7em;
}
#wrapper .indexStoryArea {
    margin: 30px auto 20px auto;
	padding: 80px 10px 30px 10px;
	border-radius: 30px;
	box-shadow: #E5E9BE 5px 5px 30px;
	border: double 5px #1E1716;
}
#wrapper .indexCommentAreaList li dl {
	display: block;
	padding: 0px;
	}
#wrapper .indexCommentAreaList li dl dt {
	width: auto;
	text-align: center;
	padding: 20px 0;
}
#wrapper .indexCommentAreaList li dl dd {
	width: auto;
	padding: 20px 0;
	}
}
/* CSS
【Media Query600px】------------------------------------------------------ */
@media screen and (max-width: 600px) {
#bg #wrapper .footerNavi li {
	width: 33%;
	text-align: center;
}
}
#wrapper .textBt a {
	display: block;
	padding: 15px 10px 15px 10px;
	margin: 50px auto;
	border-radius: 30px;
	max-width: 400px;
	width: 86%;
	text-decoration: none;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	position: relative;
	border: solid 1px #302F2D; 
	background: #FE006E;
	color: #FFFFFF;
}
#wrapper .textBt a:hover {
	background: #FFD6E8;
	color: #0b0b0b;
}
#wrapper .textBt a::after {
    content: '';
	position: absolute;
    top:42%;
    right: 20px;
    width: 7px;
    height: 7px;
    border-top: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
    transform: rotate(45deg);
    transition: all .3s;
}
#wrapper .textBt a:hover::after{
    right: 15px;
}
#wrapper .cornerList {
	padding-bottom: 10px;
	line-height: 120%;
	max-width: 600px;
	width: auto;
	text-align: center;
}
#wrapper .cornerList .cornerContent {
	text-align: center;
	padding: 15px;
	margin: auto;
	padding-bottom: 10px;
	font-size: 140%;
	line-height: 160%;
}
#wrapper .cornerList .cornerContent img {
	padding-bottom: 10px;
}
#wrapper .cornerList a {
	color: #333;
	display: block;
	text-align: center;
	width: 33.1%;
	text-decoration: none;
	font-size: 0.8em;
}
@media screen and (max-width: 750px) {
#wrapper .cornerList a {
	width: 49.7%;
	font-size: 0.8em;
	}
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
#wrapper .index_news_area {
	padding: 10px;
	border-top-right-radius: 220px; 
	width: auto;
	margin: 10px;
	position: relative;
}
#wrapper .topicsNewsAreaList {
	max-width: 1400px;
	margin: auto;
}
#wrapper .topicsNewsAreaList li div {
	background: linear-gradient(45deg, rgba(216,238,255,1.00) 0%, rgba(188,242,222,1.00) 100%);
	padding: 20px;
	border-top-right-radius: 300px;
	border-top-left-radius: 300px;
margin: 20px;
  position: relative;
  width: 80%;
  height: 500px;
  overflow: hidden;
}
#wrapper .topicsNewsAreaList li img {
  width: 80%;
  height: 50%;
  object-fit: cover; 
  object-position: center center;
  display: block;
	text-align: center;
	margin: 60px auto 10px auto;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .index_news_area {
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
}
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .news_area_title {
	font-size: 2.5em;
	padding: 90px 0 40px 0;
	background: url("../img/titlebg.webp") bottom center no-repeat;
	background-size: 340px;
}
#wrapper .topicsNewsAreaList li div {
  width: 81%;
}
}
#wrapper .index_news_area .news_twitter_list {
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
}
#wrapper .index_news_area .news_twitter_list .news_twitter_list_col1 {
    width: 48%;
}
#wrapper .index_news_area .news_twitter_list .news_twitter_list_col2 {
    width: 48%;
}
#wrapper #indrxTwitterArea {
	padding: 8px;
	border: 2px #1D9BF0 solid;
	border-radius: 15px;
	background: #FFFFFF;
	margin-top: 5px;
	font-size: 0.7em;
}
#wrapper #indrxTwitterArea dl dt {
	background: #1D9BF0;
	display: block;
	padding: 3px;
	color: #FFFFFF;
}
#wrapper .content_sns_bt {
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	padding-top: 20px;
	text-align: center;
	max-width: 200px;
}
#wrapper #content_sns_bt li img {
	width: 50px;
	height: auto;
}
#wrapper #content .sns_area {
	text-align: center;
	max-width: 150px;
	margin: auto;
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 30px;
}
#wrapper #footorArea {
	padding-top: 50px;
}
#wrapper #footorArea .footerLinkLogo {
    width: 96%;
    max-width: 800px;
	margin: auto;
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	margin-bottom: 10px;
	align-items: center; 
}
#wrapper #footorArea .footerLinkLogo li {
	width: 47%;
	margin-bottom: 20px;
	padding-right: 5px;
	padding-left: 5px;
}
#wrapper #footorArea .footerLinkLogo p {
	margin-top: 5px;
	font-size: 0.8em;
	border-radius: 5px;
	color: #989898;
	font-weight: bold;
	line-height: 1.5em;
}
#wrapper .common_header h1 {
	padding-bottom: 10px;
}
#wrapper #main #content section .common_news_area {
	border: 10px solid #58b18e;
	padding: 20px;
	background: #FFF;
	margin: 10px auto 20px;
    width: auto;
	height: auto;
}
#wrapper #main #content section .common_news_area h2 {
	background: #E4F3ED;
	border-left: 10px solid #58B18E;
	font-size: 1.2em;
	font-weight: bold;
	padding: 5px 5px 5px 20px;
	margin-bottom: 5px;
}
#wrapper #main #content #common_area .common_news_area dl dd {
	font-size: 0.9em;
	text-align: right;
	padding-bottom: 10px;
	color: #0C8486;
}
#wrapper #main #content #common_area .common_news_area p {
	padding-bottom: 10px;
}
#wrapper .indexNavigation {
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	margin: auto auto auto auto;
	max-width:800px;
}
#wrapper .indexNavigation li {
	width: 30%;
	margin: -10% auto auto auto;
}
#wrapper .indexNavigation li a img{
  transition-duration: 0.5s;
}
#wrapper .indexNavigation li a:hover img{
  transform: rotateY( 360deg );
  transition-duration: 0.5s;
}
/* CSS
【Media Query751px】------------------------------------------------------ */
@media screen and (max-width: 751px) {
body {
	margin: 0px;
	min-width:100%;
}
#bg {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	height: auto;
	width: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#wrapper #header #navi_list .navi_area ul .header_logo h1 img {
	width: 100%;
}
#wrapper #header #navi_list .navi_area ul li:nth-of-type(n+2) {
	width:11%;
}
#wrapper #header #navi_list .navi_area ul li:nth-of-type(n+2) img {
	width:70%;
	height: auto;
}
#wrapper #header #navi_list .navi_area ul .header_logo {
  margin-right: auto;
}
#wrapper #content {
	margin: auto;
}
#content_area {
	padding-bottom: 30px;
}
#bg #content_area #content_area_event h1 {
	padding-top: 0px;
	padding-bottom: 20px;
	text-align: center;
}
#bg .read_area {
	position: static;
	z-index: 5;
	margin-top: 10px;
}
#bg .read_area .read_area_content h2 {
	text-align: center;
	margin: 0px;
	padding: 0px 0px 5px;
}
#bg .read_area .read_area_content p {
	width: 94%;
	margin: auto;
	font-size: 0.9em;
	line-height: 1.7em;
}
#content_area #content_area_event ul {
	display: block;
	margin: auto;
}
#bg #content_area #content_area_event ul li {
	width: 94%;
	position: relative;
	margin: auto;
}
#bg #content_area #content_area_event ul li .event_entrance {
	margin: 20px auto 0px;
}
#bg #content_area #content_area_event ul .event_date_24 {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 5px dotted #151515;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#bg #content_area #content_area_event ul li dl dt {
	padding-bottom: 10px;
	padding-top: 10px;
	font-size: 1.2em;
}
#bg #content_area #content_area_event ul li .event_entrance a {
	position: static;
}
#bg #footor_area #footor_area_content h1 {
	text-align: center;
}
#bg #footor_area #footor_area_content dl {
	display: block;
	width: 100%;
	margin: auto;
	font-size: 0.9em;
}
#bg #footor_area #footor_area_content dl dt {
	width: 98%;
	background: #26528E;
	padding-left: 10px;
}
#bg #footor_area #footor_area_content dl dd {
	padding-bottom: 20px;
}

/* CSS
【event_common】------------------------------------------------------ */

#content_area .event_common dl {
	margin: auto;
	width: 94%;
}
#content_area #content_area_event .event_common_title {
	color: #C6A840;
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
}
#content_area #content_area_event .event_common_info dt {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.4em;
	padding-top: 15px;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 3px dotted #cdbfb3;
}
#content_area #content_area_event .event_common_info dd {
	line-height: 2em;
}
#content_area #content_area_event .event_common_info dd span {
	font-size: 1.2em;
	font-weight: bold;
	padding-left: 5px;
	border-left: 5px solid #FFF100;
}
#content_area h2 {
	margin-top: 10px;
}
#wrapper .pc {
	display: none;
}
#wrapper .sp {
	display: block;
}
#wrapper .common_venue_dataarea dl {
	display: block;
	border-bottom: none;
}
#wrapper .common_venue_dataarea dl dt {
	width: 100%;
	text-align: center;
	margin: auto auto 8px;
	padding-top: 2px;
	padding-bottom: 2px;
}
#wrapper .common_venue_dataarea dl dd {
	padding-bottom: 10px;
	width: auto;
}
#wrapper header h1 div {
	font-size: 1.2em;
}
#wrapper header h1 div span {
	font-size: 1.5em;
}
#wrapper #header .header_info {
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 15px;
}
#wrapper #header .header_info dd {
	padding-top: 0px;
	font-size: 1.5em;
	line-height: 1.4em;
	border: 10px dotted #F29DA6;
	width: 80%;
	margin: 10px auto auto;
}	
#wrapper .index_news_area .news_area_list {
	height: 170px;
}
#wrapper .index_news_area .news_area_list li dl {
	display: block;
}
#wrapper .index_news_area .news_area_list li dl dt {
	width: 30%;
	margin-bottom: 3px;
}
#wrapper .index_news_area .news_area_list li dl dd {
    width: 100%;
}
#wrapper .index_news_area .news_twitter_list {
	display: block;
}
#wrapper .index_news_area .news_twitter_list .news_twitter_list_col1 {
    width: 100%;
}
#wrapper .index_news_area .news_twitter_list .news_twitter_list_col2 {
	width: 100%;
	text-align: center;
	margin: 20px auto auto;
}
#wrapper #main #content section .message {
	background-size: 800px , 800px , 300px;
}
#wrapper #main #content section .message p {
	font-size: 0.9em;
	line-height: 1.7em;
}
#wrapper #main #content section .message p span {
	padding-bottom: 3px;
}
#wrapper #main #content section .outline {
	display: block;
	padding-bottom: 16px;
	margin: auto;
	font-size: 1em;
	max-width: 1095px;
	width: 100%;
}
#wrapper #main #content section .outline dt {
	width: auto;
	padding: 5px;
	margin-bottom: 0px;
	font-weight: bold;
	text-align: center;
	color: #FFDCAC;
	margin-right: auto;
	margin-left: auto;
}
#wrapper #main #content section .outline dd {
	width: auto;
	padding: 8px;
	margin-bottom: 0px;
}
#wrapper #main #content section .stance {
	width: 98%;
	max-width: 1065px;
	margin: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}
#wrapper #main #content section .stance_info dt {
	width: 11%;
	font-size: 1em;
	font-weight: bold;
	padding-top: 10px;
}
#wrapper #main #content section .stance_info dd {
	width: 77%;
	margin-bottom: 10px;
	border-bottom: 5px double #58bcf1;
	padding: 10px;
}
#wrapper #footer {
	padding-top: 30px;
}
#wrapper #footer ul {
    width: 96%;
}
#wrapper #footer ul li {
	max-width: 400px;
	width: 80%;
	margin-bottom: 10px;
}
#wrapper #footer ul li img {
    width: 100%;
	height: auto
}
}
/*///////////////////////////////////

common page

///////////////////////////////////*/

#wrapper .commonMainArea {
	width: auto;
	background: #FFFFFF;
}
#wrapper .commonMainArea a {
	color: #727272;
}
#wrapper .commonMainArea a:hover {
	color: #FFA0CC;
}
#wrapper .commonTitleBg {
	width: auto;
	padding-top: 3%;
	padding-bottom: 5%;
	background: #a0b1db;
background: -webkit-linear-gradient(#065093 0%, #8299D3 100%);
background: -o-linear-gradient(#065093 0%, #8299D3 100%);
background: linear-gradient(#065093 0%, #8299D3 100%);
	text-align: center;
}
#wrapper .sp_br {
	display: none;
}
#wrapper .commonTitleBg h1 {
	font-size: 4em;
	color: #FFFFFF;
}
#wrapper .commonTitleArea {
	padding-top: 3%;
	font-family: 'Rammetto One', cursive;
	letter-spacing: 0.05em;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .commonTitleBg h1 {
	font-size: 2.8em;
	padding-top: 5%;
	padding-bottom: 5%;
	}
#wrapper .commonTitleArea {
	padding-top: 3%;
	letter-spacing: 0.05em;
}
}
#wrapper .commonSection {
	max-width: 1400px;
	padding: 17px;
	margin: 10px auto auto auto;
}
#wrapper .contentPager {
	font-size: 0.8em;
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
  	width: 100%;
  	max-width: 800px;
	margin: 8px auto 8px auto;
}
#wrapper .contentPager li {
	width: 32%;
	text-align: center;
}
#wrapper .contentPager li a {
	background: #1769b4;
	padding: 3px;
	display: block;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	border-radius: 2px;
}
#wrapper .contentPager li a:hover {
	background: #7f97d2;
	color: #FFFFFF;
}
#wrapper .fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
transform: translateY(100px);
  }

  to {
    opacity: 1;
transform: translateY(0);
  }
}
#wrapper nav li a {
  	text-decoration: none;
  	color: #383838;
}
#wrapper .nav {
	display: block;
	text-align: center;
      overflow-x: hidden;
      overflow-y: auto;
    height: 88%;
	}
#wrapper .nav-wrap {
 padding-top: 200px; 
	position: fixed;
    right: 0;
    top: 0;
    z-index: 15000!important;
background: rgb(164,209,242);
background: linear-gradient(-100deg, rgba(164,209,242,1.00) 0%, rgba(153,214,191,1.00) 100%);
    width: 100%;
    height: 100%;
 	font-weight: bold;
  transform: translateX(100%);
  transition: transform 0.6s ease;
  display: block;
}
#wrapper .nav-wrap.open {
  transform: translateX(0);
}
#wrapper .nav-wrap.close {
  transform: translateX(100%);
}
#wrapper .nav-wrap .spNavList {
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-width: 900px;
}
#wrapper .nav-wrap .spNavList li {
	width: 43%;
background: rgb(164,209,242);
background: linear-gradient(-100deg, rgba(236,255,243,1.00) 0%, rgba(196,234,239,1.00) 100%);
	margin: 20px 10px 10px 10px;
	border-radius: 10px;
	box-shadow: #8BBFC2 0px 5px 15px;
}
#wrapper .nav-wrap .spNavList li a {
	padding: 15px 10px;
	display: block;
}
#wrapper .nav-wrap .spNavList li a:hover {
        color: #3D99B5;
	}
#wrapper .navBt,
#wrapper .navBt span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
      cursor: pointer;
	}
#wrapper .navBt {
    position: relative;
    width: 36px;
    height: 33px;
	margin-top: 8px; 
	margin-left: 6px;	
}
#wrapper .navBt span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #FFFFFF;
    border-radius: 5px;
  }
#wrapper .navBt span:nth-of-type(1) {
    top: 0;
  }
#wrapper .navBt span:nth-of-type(2) {
    top: 15px;
  }
#wrapper .navBt span:nth-of-type(3) {
    bottom: 0;
  }
#wrapper .navBt.active {
    z-index: 15001;
	position: fixed;
	top: 0; 
    left: 2;
    right: 10;
	margin-top: 140px;
}

#wrapper .navBt.active span:nth-of-type(1) {
    -webkit-transform: translateY(14px) rotate(-45deg);
    transform: translateY(14px) rotate(-45deg);
  }
#wrapper .navBt.active span:nth-of-type(2) {
    opacity: 0;
  }
#wrapper .navBt.active span:nth-of-type(3) {
    -webkit-transform: translateY(-14px) rotate(45deg);
    transform: translateY(-14px) rotate(45deg);
  }

#wrapper .naviButtonArea {
	width: 7% !important;
}
#wrapper .naviButtonAreaInner {
	padding: 5px;
	background:
	-webkit-linear-gradient(10deg, rgba(164,209,242,1.00) 0%, rgba(153,214,191,1.00) 100%);background:
	-o-linear-gradient(10deg, rgba(164,209,242,1.00) 0%, rgba(153,214,191,1.00) 100%);background:
	linear-gradient(100deg, rgba(164,209,242,1.00) 0%, rgba(153,214,191,1.00) 100%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	color: #FFFFFF;
}
/* CSS
【Media Query830px】------------------------------------------------------ */
@media screen and (max-width: 830px) {
#wrapper .naviButtonAreaInner {
	padding: 5px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #FFFFFF;
}
	#wrapper .naviButtonArea {
	width: 7% !important;
	margin-right: 30px !important;
}
	#wrapper .navBt {
    position: relative;
    width: 32px;
    height: 30px;
	margin-top: 5px; 
	margin-left: 4px;
}
#wrapper .navBt span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 5px;
  }
#wrapper .navBt span:nth-of-type(1) {
    top: 0;
  }
#wrapper .navBt span:nth-of-type(2) {
    top: 14px;
  }
#wrapper .navBt span:nth-of-type(3) {
    bottom: 0;
  }
#wrapper .navBt.active span:nth-of-type(1) {
    -webkit-transform: translateY(13px) rotate(-45deg);
    transform: translateY(13px) rotate(-45deg);
  }
#wrapper .navBt.active span:nth-of-type(2) {
    opacity: 0;
  }
#wrapper .navBt.active span:nth-of-type(3) {
    -webkit-transform: translateY(-13px) rotate(45deg);
    transform: translateY(-13px) rotate(45deg);
  }
}
#wrapper .commonAreaTitle{
	margin: 30px auto;
	font-size: 4em;
	position: relative;
	text-align: center;
 	font-family: "Comfortaa", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	letter-spacing: 3px;
	padding: 30px 0 80px 0;
	color: #1B1B1B;
	background: url("../img/titlebg.webp") bottom center no-repeat;
	background-size: 500px;
	z-index: 50;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .commonAreaTitle{
	font-size: 2.5em;
	padding: 30px 0 40px 0;
	background: url("../img/titlebg.webp") bottom center no-repeat;
	background-size: 340px;
}
}

/*///////////////////////////////////

Staff page

///////////////////////////////////*/


#wrapper .staffListArea{
	text-align: center;
	padding-bottom: 100px;
	font-weight: bold;
}
#wrapper .staffListArea dl {
	margin-bottom: 50px;
	background:linear-gradient(-100deg, rgba(250,235,255,0.70) 0%, rgba(222,236,248,0.70) 100%);
	border-radius: 20px;
	padding: 20px;
	box-shadow: #F5EFD7 5px 5px 10px;
	border: #FDFDFD 2px solid;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
#wrapper .staffListArea dl dt{
	font-size: 1.5rem;
	padding: 20px;
	color: #a284e0;
	border-bottom: 5px double #B5BEEE;
	margin-bottom: 10px;
}
#wrapper .staffListArea dl dd{
	padding-bottom: 15px;
	font-size: 1.1rem;
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .staffListArea dl {
	margin-bottom: 20px;
	padding: 10px;
}
}

/*///////////////////////////////////

Common page

///////////////////////////////////*/

#wrapper .commonContentArea {
	border: solid 1px #D5D5D5;
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(5px);
	margin: 30px auto 30px auto;
	padding: 30px;
	max-width: 1200px;
	width: 80%;
}
#wrapper .commonContentAreaTitle {
	border: solid 1px #D5D5D5;
background: rgb(253,255,207);
background: linear-gradient(-100deg, rgba(255,209,232,1) 0%, rgba(253,255,207,1) 100%);
	padding: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 1.4em;
}
#wrapper .commonContentArea p {
	padding: 5px 0 5px 0;
}
#wrapper .commonContentArea img {
	margin: 5px 0 5px 0;
}
#wrapper .section-inner {
	padding: 10px;
	max-width: 800px;
	margin: auto;
	}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
#wrapper .commonContentAreaTitle {
	font-size: 1.2em;
}
#wrapper .commonContentArea {
	margin: 5px;
	padding: 10px;
	width: auto;
}
}
#wrapper #zoomImg img {
	cursor: zoom-in;
}
#wrapper .animated-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.4s ease;
}
#wrapper .animated-title .char.visible {
  animation: jumpIn 1.5s ease forwards;
}
@keyframes jumpIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#wrapper .commonBgList {
  position: relative;
  overflow: hidden;
  height: 250px;
  background: linear-gradient(to right, #70E0C3, #8A7EF1);
}
#wrapper .commonBgList::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4000px;
  height: 100%;
  background: url("../img/commonHeaderBg.webp") repeat-x;
  background-size: 2000px;
  animation: bgScroll 80s linear infinite;
  -webkit-animation: bgScroll 80s linear infinite;
  -moz-animation: bgScroll 80s linear infinite;
  -o-animation: bgScroll 80s linear infinite;
	mix-blend-mode: screen;
}
#wrapper .commonTopList li div img {
	display: block;
	margin: auto;
}
/* CSS
【Media Query800px】------------------------------------------------------ */
@media screen and (max-width: 800px) {
#wrapper .commonBgList {
	height: 220px;
}
#wrapper .commonTopList li div img {
	width: 200px;
	height: auto;
}
}
@-webkit-keyframes bgScroll {
  0%   { -webkit-transform: translateX(0); }
  100% { -webkit-transform: translateX(-2000px); }
}
@-moz-keyframes bgScroll {
  0%   { -moz-transform: translateX(0); }
  100% { -moz-transform: translateX(-2000px); }
}
@-o-keyframes bgScroll {
  0%   { -o-transform: translateX(0); }
  100% { -o-transform: translateX(-2000px); }
}
@keyframes bgScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2000px); }
}
@keyframes bgScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2000px); }
}
/* CSS
【Media Query600px】------------------------------------------------------ */
@media screen and (max-width: 600px) {
#wrapper .commonTopList li div img {
	width: 180px;
	height: auto;
	padding-top: 10px;
}
}
#wrapper .commonNewsList {
  	justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
	max-width: 1000px;
	margin: 40px auto;
background: rgba(255,255,255,1.00);
background: linear-gradient(-100deg, rgba(246,251,255,0.8) 30%, rgba(255,252,246,0.8) 100%);
	border-radius: 40px;
	box-shadow: #E4DDD3 5px 25px 25px;
	padding: 20px;
}
#wrapper .newsListTitle {
	border-top: #1B1B1B 3px solid;
	border-bottom: #1B1B1B 3px solid;
	margin: 10px 0px 20px 0px;
	padding: 10px 0;
	font-size: 1.5rem;
	color: #1B1B1B;
}
#wrapper .commonNewsListDate {
	font-size: 0.8rem;
	display: block;
	color: #5786EE;
	text-align: right;
}
#wrapper .commonStoryList{
	max-width: 1000px;
	margin: 50px auto;
background: rgb(253,255,207);
background: linear-gradient(-100deg, rgba(246,251,255,1.00) 30%, rgba(255,252,246,1.00) 100%);
	border-radius: 40px;
	box-shadow: #E4DDD3 5px 25px 25px;
	padding: 20px;
}
#wrapper .commonStoryList h3{
text-align: center;
	font-size: 6rem;
	margin-top: -30px;
	color: #1B1B1B;
}
#wrapper #star-container {
position: static;
  overflow: hidden;
	z-index: 20;
mix-blend-mode: screen;
}
#wrapper .star {
  position: absolute;
  background: #FFED68;
  border-radius: 50%;
  opacity: 0.15;
  filter: blur(30px);
  animation: fall 3s linear forwards;
}
@keyframes fall {
  0% {
    transform: translate(500px, 800px) rotate(45deg);
    opacity: 0.15;
  }
  100% {
    transform: translate(0, 0) rotate(45deg);
    opacity: 0;
  }
}
.color-change {
  background-color: rgba(255,255,255,0.85);
  transition: background 1s ease, transform 1s ease;
  padding: 30px;
  transform: scale(0.9);
}
.color-change.active {
background: linear-gradient(100deg, rgba(209,241,255,0.70) 0%, rgba(255,253,205,0.70) 100%);
  transform: scale(1);
}
/* CSS
【Media Query750px】------------------------------------------------------ */
@media screen and (max-width: 750px) {
.color-change {
  padding: 15px;
}
}
#wrapper .slide {
	margin-inline: auto;
	overflow: hidden;
	border-radius: 30px;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
#wrapper .slide .add-animation {
	animation: zoomUp 10s linear 0s normal both;
}
#wrapper .snail-area {
	position: relative;
	width: 30vw; 
	height: 100px;
	margin: 5px auto;
	overflow: hidden;
}
#wrapper .snail {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 120px;
	animation: snailMove 50s ease-in-out infinite;
	filter: drop-shadow(5px 5px 2px #B4C3E7);
}
#wrapper .yurayura {
	animation: snailWobble 2.5s ease-in-out infinite;
	transform-origin: center bottom; 
}
@keyframes snailMove {
  0% {
    transform: translateX(0) scaleX(1);
  }
  49% {
    transform: translateX(calc(30vw - 120px)) scaleX(1);
  }
  50% {
    transform: translateX(calc(30vw - 120px)) scaleX(-1);
  }
  99% {
    transform: translateX(0) scaleX(-1);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}
@keyframes snailWobble {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(1deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(-2px) rotate(-1deg);
  }
}

@media screen and (max-width:750px) {
#wrapper .snail-area {
	position: relative;
	width: 90vw; 
	height: 100px;
	margin: 5px auto;
	overflow: hidden;
}
#wrapper .snail {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 120px;
	animation: snailMove 30s ease-in-out infinite;
	filter: drop-shadow(5px 5px 2px #B4C3E7);
}
@keyframes snailMove {
  0% {
    transform: translateX(0) scaleX(1);
  }
  49% {
    transform: translateX(calc(90vw - 120px)) scaleX(1);
  }
  50% {
    transform: translateX(calc(90vw - 120px)) scaleX(-1);
  }
  99% {
    transform: translateX(0) scaleX(-1);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}	
}
#wrapper .nav_fixed {
    position: fixed;
    top: 0;
    z-index: 20000;
}
 #wrapper.z10000 {
	z-index: 21000 !important;
 }