* {
	border: none;
	font-family:"M PLUS 1p", "メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
	font-weight:400,700,800;
	line-height: 1.6;
}
body {
	animation: fadeIn 1.0s ease 0s 1 normal;
	-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
	margin: 0 auto;
  width: 100%;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@font-face{
	font-family:'HuiFontP109';
	src: url(font/HuiFontP.eot) format("eot"), url(font/HuiFontP.woff) format("woff");
}
@font-face{
	font-family:'JKG-L';
	src: url(font/JKG-L.eot) format("eot"), url(font/JKG-L.woff) format("woff");
}
:root{
  --ink:#26506a; --teal:#2f95a6; --teal-d:#217183; --coral:#ef8262; --coral-d:#e5674a;
  --amber:#f6b942; --mint:#8fd0c6; --cream:#fff7ec; --sky:#dff1f5; --sky2:#eafaf7;
  --sun:#ffd24d;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Zen Maru Gothic',sans-serif;color:var(--ink);
  background: linear-gradient(to bottom, #ffffff 0%,#eafaf7 40%);
img{max-width:100%;display:block}
.pop{font-family:'Mochiy Pop One',sans-serif;font-weight:400}
a{color:var(--teal-d)}

/* ---- HERO ---- */
.hero{
	position:relative;
	overflow:hidden;
}
.hero .bg{
	width:100%;
	object-fit:cover;
}
.header_wrap{
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	margin: 1rem 2rem;
}
.hero .badge-free{
	position:relative;


	background:var(--coral);
	color:#fff;
  border-radius:50%;
  width:74px;
  height:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 0 var(--coral-d);
  transform:rotate(6deg);
  text-align:center;
}
.hero .badge-free small{
	font-size:1rem;
	line-height:1;
}
.hero .badge-free b{
	font-family:'Mochiy Pop One';
	font-size:1.6rem;
	line-height:1.1;
}
.datewrap{
	position:relative;
	color:var(--coral-d);

}
.datewrap .yr{
	font-size:1.6rem;
	font-weight:700;
}

.datewrap .day{
	font-family:'Mochiy Pop One';
	font-size:4rem;
	line-height:.9
}
.datewrap .day span{
	font-size:1.4rem;
}
.datewrap .time{
	font-size:1.2rem;
	color:var(--ink);
	font-weight:700;
	margin-top:2px;
}
.titlecard{text-align:center;padding:6px 0 22px}
.titlecard h2{font-family:'Mochiy Pop One';
	margin:2rem auto;
	color:var(--ink);
  font-size:clamp(30px,7vw,54px);letter-spacing:.02em;text-shadow:2px 2px 0 #fff}
.titlecard .sub{display:inline-block;background:var(--teal);color:#fff;font-weight:700;
  padding:5px 20px;border-radius:999px;font-size:clamp(14px,2.4vw,18px)
}

section{
	padding: 3rem 0;
}
.lead{
	text-align:center;
}
.lead h2{font-family:'Mochiy Pop One';color:var(--coral-d);font-size:clamp(22px,4.4vw,32px);margin:.2em 0 .4em}
.lead p{max-width:640px;margin:.4em auto;font-size:15px}
.tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.tag{background:var(--sun);color:#7a5a00;font-weight:700;border-radius:999px;padding:6px 16px;font-size:14px}

/* ---- PROGRAM CARDS ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 22px rgba(47,149,166,.15);
  border:3px solid #fff;display:flex;flex-direction:column}
.card .num{position:absolute;top:10px;left:10px;background:var(--coral);color:#fff;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Mochiy Pop One';font-size:18px;box-shadow:0 3px 0 var(--coral-d)}
.card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sky)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .body{padding:14px 14px 18px;text-align:center;flex:1;display:flex;flex-direction:column}
.card h3{margin:.1em 0;font-size:18px;color:var(--teal-d)}
.card .t{display:inline-block;background:var(--sky);color:var(--teal-d);font-weight:700;
  border-radius:999px;padding:2px 12px;font-size:13px;margin:6px auto}
.card p{font-size:13px;margin:.3em 0 0;color:#4a6b78}
.plus{text-align:center;margin:22px auto 0;background:var(--mint);color:#155;
  display:inline-block;padding:8px 24px;border-radius:999px;font-weight:700}
.plus-wrap{text-align:center}

/* ---- INFO ---- */
.info{background:var(--cream)}
.infogrid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:start}
.rows .row{display:flex;gap:14px;padding:12px 0;border-bottom:2px dotted #e5d3b4}
.rows .row:last-child{border-bottom:none}
.rows .k{flex:0 0 58px;background:var(--teal);color:#fff;height:fit-content;border-radius:8px;
  text-align:center;font-weight:700;padding:4px 0;font-size:14px}
.rows .v{font-size:14px}
.rows .v b{font-size:16px;color:var(--teal-d)}
.apply{background:#fff;border:3px solid var(--coral);border-radius:20px;padding:18px;text-align:center}
.apply h3{margin:.1em 0;color:var(--coral-d);font-family:'Mochiy Pop One';font-size:20px}
.apply .period{background:var(--sun);color:#7a5a00;font-weight:700;border-radius:999px;
  display:inline-block;padding:3px 14px;font-size:13px;margin:6px 0}
.apply img{width:150px;height:150px;margin:8px auto}
.apply p{font-size:12px;color:#5a6b72;margin:.3em 0}
.apply .btn{display:inline-block;background:var(--coral);color:#fff;font-weight:700;
  padding:10px 20px;border-radius:999px;text-decoration:none;margin-top:6px;font-size:14px;
  box-shadow:0 4px 0 var(--coral-d);word-break:break-all}

/* ---- STRIP ---- */
.strip{background:var(--teal);color:#fff;text-align:center;padding:16px}
.strip b{font-size:15px}

/* ---- YUME footer ---- */
.yume{
	background:#eef4e9;
	color:#5a6b60;
	font-size:1rem;
	padding:20px 0;
	margin: 2rem 0;
	width: 100%;
}
.yume .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}

/* ---- BACK / details ---- */
.detail{background:linear-gradient(180deg,#eafaf7,#dff1f5)}
.detail-head{text-align:center;padding-top:8px}
.detail-head h2{font-family:'Mochiy Pop One';font-size:clamp(24px,5vw,36px);color:var(--ink);margin:.2em 0}
.detail-head .sub{color:var(--teal-d);font-weight:700}
.box{background:#fff;border-radius:20px;padding:22px;box-shadow:0 8px 22px rgba(47,149,166,.12);margin-top:20px}
.box h3{color:var(--coral-d);border-left:6px solid var(--coral);padding-left:10px;margin:.1em 0 .6em;font-size:19px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wlist{list-style:none;padding:0;margin:0}
.wlist li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed #d7e7ea}
.wlist li:last-child{border-bottom:none}
.wlist .n{flex:0 0 30px;height:30px;background:var(--teal);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Mochiy Pop One'}
.wlist .n.p{background:var(--mint);color:#155}
.wlist h4{margin:0;font-size:15px}
.wlist .tt{color:var(--coral-d);font-weight:700;font-size:13px}
.wlist p{margin:.2em 0 0;font-size:13px;color:#4a6b78}
table.sched{width:100%;border-collapse:collapse;font-size:14px}
table.sched th{background:var(--teal);color:#fff;padding:6px;font-size:13px}
table.sched td{padding:7px 8px;border-bottom:1px solid #e6eff1}
table.sched td.tm{color:var(--teal-d);font-weight:700;white-space:nowrap;width:64px}
.notes{
	font-size:1rem;
	color:#3f5a64
}
.notes h4{color:var(--teal-d);margin:.6em 0 .3em;font-size:14px}
.notes ol{margin:.2em 0 .8em;padding-left:1.3em}
.notes p{margin:.2em 0 .8em}
.echo{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.echo img{width:110px;height:110px}
.echo .txt{
	flex:1;
	min-width:220px;
	font-size:1rem;
}
.echo .txt b{color:var(--teal-d)}
footer.f{background:var(--ink);color:#dbeef2;text-align:center;padding:22px 16px;font-size:13px}
footer.f a{color:#bfe9f0}


a{
	text-decoration: none;
}
a:hover{
  cursor: pointer;
}

main{
	width: 100%;
}
header{
	background: url(../img/header.png) no-repeat center;
	background-size:cover; 100%;
	width: 100%;
	margin: 0 auto;
	padding-bottom:1rem;
}
.header_block{
	width: 100%;
	max-width: 1060px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	margin: 0 auto;
}
section{
	width: 100%;
	margin: 0 auto;
	padding: 3rem 0;
}
h1{
	text-align: center;
	margin: 2rem auto;
}
h1 p.subtitle01,p.subtitle02{
	font-size: 1.8rem;
  line-height: 2rem;
  font-weight: 300;
  display: inline-block;
  margin: 0 auto;
}
h1 p.subtitle01{
	color: #0b318f;
}
h1 p.subtitle02{
	color:#e83820 ;
	border-bottom: 2px dashed #e83820;
	padding-bottom: 0.5rem;
}
h1 p.maintitle{
	font-size: 4rem;
	margin: 0 auto;
	line-height: 4rem;
}
h2{
	color: var(--teal);
	line-height: 1;
	font-size: 1.8rem;
}
h2::before{
	content: '';
	padding-left: 1rem;
}
.ttl_lead{
	text-indent: 2rem;
}
.wrap{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	display:flex;
	flex-flow: column;
	justify-content: space-around;
}
.infogrid{
	display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 22px;
   align-items: start;
}
section img{
	width: 100%;
}
section p, section ol, section ul, section h3{
	width: 100%;
	margin: 0 auto;
}
#first,#detail,#workshop,#time_table,#concept,#warning{
	display: flex;
	flex-flow: column;
	justify-content: center;
	background-color: #FBF8F1;
}
#first{
	background: url(../img/bg01.png) no-repeat top left;
	background-size: auto 100%;
	background-color: #FBF8F1;
}
#first img{
	max-width: 530px;
	margin: 0 auto;
}
#first .wrap,#concept{
	background: url(../img/bg_frag.png)no-repeat  top center ;
	background-size: 100% auto;
}
#detail{
	background: url(../img/bg02.png) no-repeat top right;
	background-size: auto 100%;
	background-color: #FBF8F1;
}
#workshop{
	background: url(../img/bg03.png) no-repeat 50 right;
	background-size: auto 100%;
	background-color: #FBF8F1;
}
#warning{
	background: url(../img/bg04.png) no-repeat bottom left;
	background-size:auto 100%;
	background-color: #FBF8F1;
}

dl{
	display: flex;
	flex-flow: wrap;
}
dt,dd{
	margin-bottom: 1rem;
}
dt::after{
	content: '|';
	margin-left: 2rem;
}
#detail dl{
	max-width: 600px;
	margin: 0 auto;
	font-size: 1.4rem;
}
.btn{
	transition: .2s;
}
.btn:hover{
	transform: translateY(10px);
	cursor: pointer;
}
nav{
	display: flex;
	justify-content: space-around;
}
.reserve{
	max-width: 530px;
	background-color: var(--coral);
	text-align: center;
	border-radius:100px;
	padding: 0.5rem 2rem;
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
}
.reserve img,.reserve_mini img{
	width: 70%;
	text-align: center;
}
.reserve p{
	color: #fff;
	font-size: 2rem;
	line-height: 0;
}
.reserve span{
	display: block;
	color: #fff;
}
.reserve_mini{
	width: 100%;
	max-width: 180px;
	background-color: var(--coral);
	text-align: center;
	border-radius:100px;
	padding: 0.5rem 2rem;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	display: none;
	height: fit-content;
}
.reserve_mini img{
	width: 100%;
}
.reserve_mini p{
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	margin-bottom: 0;
}

.reserve_mini span{
	color: #fff;
	font-size: 0.9rem;
}

.gotop{
	position: fixed;
	bottom: 1rem;
	right: 2rem;
	z-index:999;
	color: var(--teal);
	background: #fff;
	border-radius: 50px;
	padding: 0.5rem 0.8rem;
	border: 2px solid var(--teal);
}
footer{
	width: 100%;
	background-color: #fff;
	color: #000;
}
.footer_block{
	padding: 3rem 0;
	display: flex;
	flex-flow: wrap;
	background: var(--ink);
  color: #dbeef2;
  padding: 22px 16px;
  font-size: 1rem;
}
.fc_kc{
	color: var(--teal);
	font-weight: bold;
}
.center-txt{
	text-align: center;
}
.fs30{
	font-size: 3rem;
}
.fs28{
	font-size: 2.8rem;
}
.fs20{
	font-size: 2rem;
}
.fs18{
	font-size: 1.8rem;
}
.mt10{
	margin-top: 10rem;
}
.mt01{
	margin-top: 1rem;
}
#workshop .ws_box{
	display: flex;
	flex-flow: wrap;
	margin: 2rem 0;
	align-items: flex-start;
}
.ws_wrap{
	max-width: 500px;
	width: 100%;
	display: flex;
	flex-flow: wrap;
	align-items: flex-start;
}
.fukidashi01{
	width: 50%;
	padding: 1rem;
	border-radius:1rem; 
	background-color: #fff;
	position: relative;
  display: inline-block;
  box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
  margin-top: 1rem;
}
.fukidashi01::after{
	content: "";
  position: absolute;
  top: 75%;
  right: 0;
  border-style: solid;
  border-width: 7.5px 0 7.5px 20px;
  border-color: transparent transparent transparent #fff;
  translate: 100% -50%;
}
.ws_wrap .fukidashi01 p{
	margin: 0 auto;
}
.teacher{
	width: 42%;
}
.ws_wrap h3{
	width: 100%;
	color: #fff;
	background-color: var(--teal);
	padding: 0.3rem 0 0.3rem 3rem;
	border-radius: 50px;
	font-size: 1.4rem;
	position: relative;
}
.ws_wrap h3 span{
	color: #fff;
	border-radius: 50px;
	background-color: var(--teal);
	font-size: 1.8rem;
	position: absolute;
	padding: 0.5rem 1.3rem;
	top: -0.5rem;
  left: -1rem;
}
.ws_wrap p{
	width: 90%;
	margin:1rem 0 1rem 2rem;
}
.time_table{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}
.time_table p{
	text-align: right;
	margin:1rem auto;
}

span.light{
	font-weight: 400;
	font-size: 0.9rem;
}
table{
	width: 100%;
}
tr,th,td{
	border-bottom: 3px solid #000;
	text-align: center;
}
th.time{
	text-align: left;
}
.time span{
	background-color: #000;
	color: #fff;
	padding: 0.5rem 1rem;
	margin-right: 2rem;
}
.parents{
	background-color: #EDEA4B;
}
.table_txt{
	background-color: var(--coral);
	padding: 0.5rem 1rem;
}
.number{
	border-radius: 50px;
	background-color: var(--teal);
	padding: 0.3rem 0.6rem;
	color:#fff;
}
.table_txt span{
	color: #fff;
}
#concept .wrap{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	align-items:center;
}

#concept h2{
	color:#000;
	border-left: 0;
	width: 100%;
}
#concept h2::before{
	content: none;
}
.concept_wrap{
	width: 45%;
}
.chieko{
	width: 50%;
	display: flex;
	flex-flow: wrap;
	align-items: center;
	justify-content: space-around;
}

.fukidashi02{
	width: 40%;
	padding: 1rem;
	border-radius:1rem; 
	background:url(../img/bg_comment.png);
	position: relative;
  display: inline-block;
}
.fukidashi02::after{
	content: "";
  position: absolute;
  top: 75%;
  right: 0;
  border-style: solid;
  border-width: 7.5px 0 7.5px 20px;
  border-color: transparent transparent transparent #83cee9;
  translate: 100% -50%;
}
.name_tag{
	background-color: #fff;
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
	padding: 1rem 2rem;
	margin-top: 1rem;
	border-radius: 50px;
}
.name_tag p {
	font-size: 1.4rem;
	font-weight: bold;
}
.name_tag p span{
	font-size: 1rem;
	font-weight: normal;
}

#warning h3{
	font-size:1.3rem;
}

#warning h3::before{
	content: '●';
	margin-right: 1rem;
}
#warning ol{
	padding-left: 4rem;
}
#warning ol li{
	margin-bottom: 1rem;
}
#warning p{
	padding-left: 2.6rem;
}
#warning a{
	text-decoration: underline;

}
.footer_block .wrap{
	flex-flow: wrap;
}

.sponsor{
	width: 50%;
}
.sponsor dl{
	margin-top: 0;
	width: 100%;
}
.sponsor dt{
	margin-bottom: 0;
}
.sponsor dd{
	width: 65%;
	margin-bottom: 0;
}
.banner{
	width: 45%;
}
.contact .wrap{
	display: flex;
	flex-flow: wrap;
	align-items: baseline;
	justify-content: flex-start;
	padding-top: 2rem;
	position: relative;
	padding-bottom: 2rem;
}
.contact h2{
	font-size: 1.4rem;
	color: #000;
	border-left: 0;
	margin-right: 1rem;
	line-height: 0;

}
.contact h2::before{
	content: none;
}
.contact p{
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 0;

}
.contact ul{
	width: 60%;
	display: flex;
	flex-flow: wrap;

	padding-left: 0;
}

.contact ul li{
	list-style: none;
	line-height: 2;
	padding-right: 2rem;
}
.contact ul li::before{
	content: ' ';
	width: 1.6rem;
	height: 1rem;
	background: url(../img/icon_mail.png) no-repeat center;
	background-size: 1.6rem;
	padding-left: 2rem;
}
.contact ul li.tel::before{
	background: url(../img/icon_tel.png) no-repeat center;
	background-size: 1.6rem;
}
.contact ul li.tel span{
	color: #B15D21;
	padding-left: 2rem;
}

address{
	text-align: right;
	width: 40%;
	position: relative;
	bottom: -2rem;
}
.sp{
	display: none;
}
.pc{
	display: block;
}
@media all and (max-width: 1000px) {
	body{
		font-size: 1rem;
	}
	#wrapper{
		width: 100%;
	}
	.wrap{
		margin: 0 auto;
		width: 90%;
	}
	.fs20{
		font-size: 1.4rem;
	}
	dt::after{
		margin-left: 1rem;
	}
	#detail dl{
		font-size: 1.2rem;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;

	}
	#detail dl dt{
		border-bottom: 2px solid #000;
	}
	#detail dl dt::after {
    content: none;
    margin-left: 0;
  }
  .ws_box{
  	justify-content: center;
  }
  .ws_wrap{
  	align-items: flex-end;
  	margin-bottom: 2rem;
  }
  .ws_wrap h3{
  	font-size:1.3rem;
  }
  .teacher{
  width: 40%;
  }
  .mt10{
  	margin-top: 0;
  }
  #concept .wrap {
    flex-flow: column;
}
.concept_wrap,.chieko{
	width: 100%;
}
.chieko{
	margin: 1rem auto;
}
.chieko .teacher{
	width: 40%;
}
.fukidashi02{
	width: 50%;
}
#warning p,#warning ol{
	padding-left: 0;
}
#warning ol {
	padding-left: 1rem;
}
.footer_block,.footer_block .wrap,.contact .wrap{
    flex-flow: column;
}
.banner,.sponsor,.contact ul,address{
	width: 100%;
}
.contact ul,address,.sponsor{
	font-size: 0.8rem;
}
.reserve p{
	font-size: 1.7rem;
}
.reserve_mini {
	max-width: 100vw;
	background-color: #fff;
	border-bottom: 5px solid var(--coral);
	border-radius: 0;
	padding: 0 0;
}
.reserve_mini p{
	color: #000;
}
.reserve_mini img{
	width: 80%;
}
.reserve_mini:hover{
	background-color: var(--coral);
}
.gotop img{
	width: 90px;
}
.time span{
	padding: 0.3rem 0.5rem;
  margin-right: 0;
  line-height: 2;
}
.time_table p{
	text-align: left;
	margin: 1rem 1rem;
	display: inline-block;
	width: 90%;

}
#first,#detail,#workshop,#time_table,#concept,#warning{
	background-blend-mode:lighten;
	background-color: rgba(251, 248, 241, 0.6);
}
.contact ul li.tel::before {
    background-size: 1.4rem;

}

@media(max-width:720px){
	.sp{
		display: block;
	}
	.pc{
		display: none;
	}
  .cards{grid-template-columns:1fr}
  .infogrid,.two{grid-template-columns:1fr}
  .datewrap .day{font-size:38px}
  .hero .badge-free{width:62px;height:62px}
  h1{
  	margin: 0 1rem;
  }
  h1 p.maintitle{
  	font-size: 2rem;
  	line-height: 2rem;
  }
  h1 p.subtitle01, p.subtitle02{
  	font-size: 1.4rem;
  }
  section{
  	padding:1.5rem auto ;
  }
  header {
        background: url(../img/header.png) no-repeat right;
      }
   .header_block{
   	background: rgba(255, 255, 255, 0.5);
   	padding: 1rem 0;
   }
   .reserve_mini span{
   	color: var(--coral);
   }
}