@charset "utf-8";
/* CSS Document */
html{scroll-padding-top: 150px;font-size: 16px;/*scroll-behavior: smooth;*/}
section {padding: 8rem 0;}
#event, #attention{padding: 10rem 0;}
.content {max-width: 1200px;margin: 0 auto; padding: 5rem 6rem;width: 95%;}
h2 {max-width: 350px; margin: 0 auto; margin-bottom: 5rem;position: relative;}
h3 {max-width: 380px;margin-top: 3rem;margin: 0 auto; margin-bottom: 3rem;position: relative;}
.f1 {font-size: 0.8rem;}
.f2 {font-size: 1.5rem;line-height:2.3rem;font-weight: 600;}
.online small, #tokuten small {font-size: 0.875rem;}
.muracho {font-family: "Murecho";}
.br790, .br700, .br650, .salenbsp2 {display: none;}
.center {text-align: center;}

.bg-grade {background-image:url("../img/bg-light.webp"), url("../img/light.webp"), linear-gradient(180deg, rgba(252, 188, 221, 1), rgba(194, 184, 238, 1) 33%, rgba(103, 197, 205, 1)); background-repeat: repeat-y, no-repeat, no-repeat;position: relative; line-height: 1.7rem;font-family: "Murecho", sans-serif; letter-spacing: 0.5px;}
.bg-grade2 {background-image:url("../img/bg-light.webp"), url("../img/light.webp"), linear-gradient(180deg, rgba(103, 197, 205, 1), rgba(194, 184, 238, 1) 33%, rgba(252, 188, 221, 1)); background-repeat: repeat-y, no-repeat, no-repeat;position: relative; line-height: 1.7rem;font-family: "Murecho", sans-serif; letter-spacing: 0.5px;}
/*gaiyo*/
#gaiyo{padding: 8rem 0 0;}
#gaiyo .content {background: rgba(255,255,255,0.7);text-align: center; position: relative;font-size: 1.5rem;}

/*schedule*/
#schedule {position: relative;}
#schedule .content {background: rgba(255,255,255,0.7);position: relative;z-index: 1;}
#schedule dl {max-width: 600px;display: flex;width:80%; margin: 0 auto;font-weight: 500;font-size: 1.125rem;}
#schedule dt {width: 28%;}
#schedule dd {width: 72%;}
/*#schedule .fb {text-align: center; padding: 2rem 0;font-size: 1.2rem;  line-height: 1.9rem;}*/
#schedule p{font-weight: 500;max-width: 824px; margin: 3rem auto 0;}
#schedule a {color: #551A8B;text-decoration: underline;}


/*online*/
.online {color: #231815;}
#X {text-align: center; position:relative;z-index:1; margin: 3rem auto 0;}
.online-img {margin: 1.5rem auto;}
#X .bold {font-size: 1.25rem;font-weight: bold;}
#X span {font-size:2rem; }

/*event*/
#event{background: #E9569A;position: relative;}
.line-top{position: absolute;top: 10px;}
.line-bottom{position: absolute;bottom: 10px;}
#event .content{background: rgba(255,255,255,0.7);position: relative;z-index: 1;}
/*tokuten*/
#tokuten {position: relative;padding-bottom: 0;}
#tokuten .content {background: rgba(255,255,255,0.7);position: relative;}
#tokuten ul {margin-left: 1em; text-indent: -1em;}
#tokuten p {font-weight: bold; text-align: center; line-height: 2.5rem; font-size: 1.5rem;}
#tokuten p span{font-size: 1.25rem;}
.toku-img {margin: 1.5rem 0;}

/*menu*/
#menu h2{padding-top: 5rem;}
.menu-wrap{max-width: 1200px;margin: 0 auto;background: #17B6BF;position: relative;width: 95%;}
.menu-line-top{podition: absolute; top: 0;}
.menu-line-bottom{podition: absolute; bottom: 0;}
#menu .content {padding-top: 0;}
#menu .content img{filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.3));}

/*attention*/
#attention{background: #17B6BF;line-height: 1.8rem; position: relative;}
#attention .content {background: rgba(255,255,255,0.7);position: relative;}
#attention ul {/*margin-left: 1em; text-indent: -1em;*/margin: 0 auto;max-width: 750px;font-size: 1rem;font-weight: 500;}
footer { font-size: 0.8rem;}
.copyright{max-width: 702px;margin: 0 auto;width: 94%;}

.top1 {position: fixed; bottom: 7%; max-width: 90px; /*right: 3%;*/ z-index:6;right: calc(50.5% - 900px);}
.top2 {/*width: 100%;max-width: 1800px;*/margin-right: auto;margin-left: 0px;display: block;text-shadow: none;}
.top2 a {float: right;color: #178FCC;
border: #00A1E9 solid 3px; border-radius: 50%;background: rgba(255,255,255,0.85); padding: 10px;}
.top2 span {display: block;}
.top2 i {font-size: 1.6rem;}
@media screen and (max-width:1799px) {
	.top1 {position: fixed; bottom: 7%; max-width: 90px; right: 3%;z-index:6;}
}
@media screen and (max-width:1600px) {
	.bg-grade{background-size: contain;}
}
@media screen and (max-width:1050px) {
	#tokuten p {font-size: 1.25rem;line-height: 2rem;}
	#tokuten p span{font-size: 1rem;}

}

@media screen and (max-width:1000px) {
	.f2{font-size: 1.125rem;}

	h2 {max-width: 250px;margin-bottom: 2.5rem;}
	#menu h2{padding-top: 4rem;}
	#gaiyo{padding: 4rem 0 0;}
	section, #event, #attention{padding: 6rem 0;}

}
@media screen and (max-width:960px){
	#schedule dl{display: block;margin-bottom: 0.7rem;width: 100%;}
	#schedule dl dt{font-weight: bold;}
	#schedule dl dt, #schedule dl dd{width: 100%;text-align: center;}
	#schedule dl dd {font-size: 1rem;}

}
@media screen and (max-width:890px){
	.content {padding: 3rem;}
	
}
@media screen and (max-width:790px){
	.br790{display: block;}
	html {font-size: 15px;}
	#attention ul {font-size: 0.875rem;}
	#X {max-width: 320px;}
}

@media screen and (max-width:700px){
	.br700{display: block;}
	.f2{line-height: 1.8rem;}
	html{scroll-padding-top: 50px;}

}
@media screen and (max-width:650px){
	.br650 {display: block;}
	#X .bold {font-size: 1.125rem;font-weight: 600;}
	}

@media screen and (max-width:600px){
	h3 {max-width: 250px;}

}
@media screen and (max-width:550px){
	.content {padding: 4rem 2rem;}
	#tokuten p{font-size: 1.125rem;line-height: 1.7rem;}
	#tokuten p span{font-size: 0.75rem;line-height:1.4rem;}
}
@media screen and (max-width:500px){
	html{scroll-padding-top: 40px;}
	body {font-size: 13px;}
	#tokuten ul,#attention ul {line-height: 1.5rem;}
	h2{max-width: 180px;margin-bottom: 1.5rem;}
	#menu h2{padding-top: 3rem;}
	#gaiyo{padding: 3rem 0 0;}
	section, #event, #attention{padding: 4rem 0;}
	.online small, #tokuten small{font-size: 0.8rem;}
}
@media screen and (max-width:460px){
	html{scroll-padding-top: 80px;}
	footer {font-size: 0.7rem;}
	h3 {margin-bottom: 2rem;}
	.f2{font-size: 1rem;line-height: 1.6rem;}
	#gaiyo .content {padding: 3rem 1rem;}
	.content {padding: 3rem 2rem;}
	#menu h2{padding-top: 2.5rem;}
	#menu .content{padding:0 2rem 2.5rem;}
}
@media screen and (max-width:400px){
	.f2{font-size: 0.9rem;}
	#tokuten p {font-size:1rem;}
	.content {padding: 3rem 1.5rem;}
	#menu .content{padding:0 1.5rem 2.5rem;}

}