@charset "UTF-8";
:root {
  --color-accent: #0b4568;
  --color-light-bg: #e6f7ff;
  --base-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
  --base-fontsize: clamp(1px, 1.6vw, 18px);
  --fontsize-md: clamp(1px, 2vw, 20px);
  --fontsize-lg: clamp(1px, 2.8vw, 28px);
  --fontsize-xlg: clamp(1px, 4vw, 32px);
  --border: solid 1px #0b4568;
  --space-sm: clamp(10px, 1vw, 20px);
  --space-md: clamp(30px, 2.5vw, 60px);
  --space-lg: clamp(60px, 5vw, 100px);
  --space-xlg: clamp(100px, 9vw, 150px);
}

body { color: var(--color-accent); background: var(--color-light-bg); font-family: var(--base-family); font-size:var(--base-fontsize); }
img, video, iframe { inline-size:100%; max-inline-size: 100%; block-size: auto; vertical-align: bottom; }
a, a:hover { text-decoration: none; color: var(--color-accent); }
i { font-size: 0.8em; padding-right: 5px; }
p,li,dd { word-break: break-all; }
h2 { background:var(--color-accent); margin-bottom: var(--space-md);
	> span { display:table; background:var(--color-light-bg); padding-block:4px; padding-right:var(--space-sm); font-size:var(--fontsize-lg); font-weight: 900;
		span { font-size:var(--fontsize-md); padding-left:var(--space-sm); }
	}
}

.inner { inline-size: 90%; max-inline-size: 1280px; margin-inline: auto; }
.ma { margin-inline: auto; }

#header { position: fixed; inline-size: 100%; background: #fff; z-index: 40; box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 20%); border-bottom: solid 1px #fef9e8;
	a.header__logo {	position: absolute; top: 50%; display:block; }
}

#hero { position: relative;
	> img { position:absolute; z-index:2; display:block; inline-size:90%; max-inline-size:1280px; top:50%; left:50%; transform:translate(-50%,-50%); }
	ul { position:relative; z-index:1; }
}

#main > section, #main > div { padding-bottom: var(--space-xlg); }
#main > section, #instructor, #price { padding-top: var(--space-md); }

#news {
	ul { display: table;
		li { padding-bottom: var(--space-md);
			a { cursor: pointer;
				time { padding-right:10px; font-size:0.9em; }
			}
		}
		li:last-child { padding-bottom:0; }
	}
}
.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; inline-size: 100%; block-size: 100%; overflow: auto; background:#00000099;
	.modal-content { background: #fefefe; margin: 50px auto; padding: 20px; border: 1px solid #888; inline-size: 90%; max-inline-size: 800px; box-sizing: border-box;
		h4 { font-size:var(--fontsize-md); padding-bottom:8px; }
		time { display: block; padding-bottom:var(--space-md); }
		div p { padding-bottom:var(--space-sm); line-height:180%; }
		div p:last-child { padding-bottom: 0; }
		.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
		.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }
	}
}

#greeting {
	article {
		h3 { display:table; margin-inline:auto; padding-bottom:var(--space-md); font-size:var(--fontsize-lg); }
		img { padding-bottom:10px; }
		figcaption { text-align:center; }
		p, ul { padding-bottom:var(--space-sm); }
		ul li { padding-bottom:10px; }
		p:last-child { padding-bottom:0; }
	}
}
#greeting1 { padding-bottom:var(--space-lg); }

article.flex { padding-bottom: var(--space-lg);
	img { display:block; block-size:100%; }
	div {
		h3 { font-size:var(--fontsize-lg); font-weight:700; padding-bottom:var(--space-sm); }
		p { line-height:200%; }
	}
}
article.flex:last-child { padding-bottom:0; }

#schedule {
	h3 { text-align:center; font-size:var(--fontsize-lg); }
	> img { display:block; max-inline-size:1024px; margin-inline:auto; padding-bottom:var(--space-lg); }
}

#personal { position: relative;
	div.inner { padding-bottom:calc(var(--space-xlg) - var(--space-md)); }
	h3 { font-size:var(--fontsize-md); margin-bottom:var(--space-sm); }
	h3:before { display: inline-block; content: ""; background: var(--color-accent); margin-right: 5px; inline-size:15px; block-size:15px; }
	div.inner > p { max-inline-size: 1024px; padding-bottom: var(--space-lg);
		span { display:block; font-size:0.9em; padding-top:10px; }
	}
	#reserve { background:#fff; padding:var(--space-md); margin-bottom:var(--space-lg); border-radius:10px;
		div.flex { padding-bottom:var(--space-md); }
		img { height:100%; }
		p { padding-bottom:var(--space-md); }
		ol { list-style-type: decimal; margin-left:40px;
			li { padding-bottom: var(--space-sm);
				span { display:block; text-decoration:underline; font-size:0.9em; }
				span:before { content:"▷" }
			}
		}
		a { display:block; text-align: center; background: var(--color-accent); color: #fff; max-inline-size: 400px; padding-block: 10px; border-radius: 8px;
			span { display:block; font-size:0.9em; padding-top:8px; }
		}
	}
	#cancel {
		p { padding-bottom:var(--space-sm); }
		ul { display:table; }
	}
}
#personal::after { position: absolute; bottom: 0; content: ""; display: block; background: #FDF2F0; inline-size:100%; block-size:calc(var(--space-xlg) - var(--space-md)); }

#main > section#cpc { background: #FDF2F0; margin-bottom:calc(var(--space-xlg) - var(--space-md)); padding-top: var(--space-md);
	h2 > span { background:#FDF2F0; }
	h3 { font-size:var(--fontsize-md); margin-bottom:var(--space-sm); }
	h3:before { display: inline-block; content: ""; background: var(--color-accent); margin-right: 5px; inline-size:15px; block-size:15px; }
	article { padding-bottom:var(--space-lg);
		p { padding-bottom:var(--space-md); line-height:180%; }
		p:last-child { padding-bottom:0; }
	}
	#aboutCpc {
		p { font-size:1.05em; }
	}
	ul.result__list { margin-bottom:var(--space-md); display:flex; flex-wrap:wrap; justify-content: space-between;
		li { background:var(--color-light-bg); border-radius:8px; padding:16px 10px; box-sizing:border-box; display: grid; place-items: center; margin-bottom:10px;
			span { display:table; }
		}
	}
	ul.result__who { background:#fff; border-radius:8px; list-style-type:square; padding:20px 20px 20px 40px;
		li { padding-bottom:var(--space-sm); }
		li:last-child { padding-bottom:0; }
	}
	#flow {
		ol { padding-top: var(--space-md);
			li { margin-bottom:var(--space-md); background:#fff; border-radius:8px; padding:var(--space-sm); position:relative;
				span { display:block; position:absolute; top:0; left:0; transform:translate(-50%,-50%); background:var(--color-accent); color: #fff; border-radius:50%; inline-size:30px; block-size:30px; text-align:center; line-height:28px; }
				h4 { font-weight:700; }
				p { padding-top:var(--space-sm); }
			}
			li:last-child { margin-bottom:0; }
		}
		.flow__material {
			h4 { text-align:center; font-weight:900; font-size:1.1em; padding-bottom:var(--space-md);}
			dl { padding-bottom:var(--space-md);
				dt { margin-bottom:var(--space-sm); padding-left:6px; border-left:4px solid var(--color-accent); }
				dd { padding-bottom:var(--space-sm); margin-bottom:var(--space-sm); border-bottom:var(--border); font-size:0.9em }
				dd:last-child { padding-bottom:0; margin-bottom:0; border-bottom:none; }
			}
		}
	}
	a { display:block; text-align: center; background: var(--color-accent); color: #fff; max-inline-size: 400px; padding-block: 10px; border-radius: 8px;
		span { display:block; font-size:0.9em; padding-top:8px; }
	}
}

#instructor {
	ul {
		li { padding-bottom: var(--space-lg);
			figure { inline-size:60%; max-inline-size:300px; margin-inline:auto; text-align:center; padding-bottom:var(--space-md);
				img { padding-bottom:5px; }
			}
			dl {
				dt { margin-bottom: 5px; }
				dt:before { display: inline-block; content: ""; inline-size: 5px; block-size: 18px; background: #333; margin-right: 5px; }
				dd { padding-bottom:var(--space-md); font-size:0.9em; }
			}
		}
		li:last-child { padding-bottom:0; }
	}
}

#price dl { display: flex; flex-wrap: wrap;
	dt:before{ display: inline-block; content: ""; background: #333; margin-right: 5px; inline-size:15px; block-size:15px; }
	dt{ font-weight: 700; padding-bottom: var(--space-sm); inline-size: 50%;
		span{ font-weight: 500; display:block; }
	}
	dt.dt100 { inline-size:100%; }
	dd { padding-bottom: var(--space-md); inline-size: 50%;
		table {width: 100%; border: solid 1px #333; background: #fff;
			th, td { text-align: center; border-right: solid 1px #333;border-bottom: solid 1px #333; padding:5px 10px; font-size:0.9em; }
			th { background: #e9e9e9; }
		}
	}
	dd:last-child { padding-bottom:0; }
	dd:has(table) { width: 100%; }
}

#trial { inline-size:90%; max-inline-size:800px; }

#access {
	iframe { height:50vh; }
	address { background:#fff; padding: var(--space-md) var(--space-sm);
		p { line-height:200%;
					a { display: block; margin-bottom: 10px;
						span { display:block; font-size:0.8em; line-height:1.2; }
					}
		}
	}
}


#footer { background: var(--color-accent); padding-block: var(--space-sm);
	ul { display:flex; justify-content: center; padding-bottom:var(--space-md);
		li { inline-size:48%; max-inline-size:300px;
			a { background: var(--color-light-bg); display:block; text-align:center; bottom:1px solid #fff; padding-block:var(--space-sm); font-size:1.1em;
				span { display:block; font-size:0.7em; }
			}
		}
		li:nth-child(2) { margin-left:20px; }
	}
	small{ display: block; font-size: 12px; text-align: center; padding-bottom:var(--space-sm); color:#fff; }
}

@media (max-width: 560px){
body { font-size: 16px; }
h2 {
	> span { font-size:5vw;
		span { font-size:4.4vw; display:table; padding-left: 0; }
	}
}

#header { block-size: 50px;
	a.header__logo { inline-size: 50%; transform: translateY(-50%); }
}
.drawer__button { right: 5%; top: 5px; inline-size: 30px; block-size: 30px;
	span { inline-size:30px; }
	span:first-child { transform: translate(-50%, calc(-50% - 10px)); }
	span:nth-child(2) { transform: translate(-50%, -50%); transition: opacity 0.3s ease; }
	span:last-child { transform: translate(-50%, calc(-50% + 10px)); }
}
.drawer__nav__item {
	a { font-size:3.8vw; }
}

#hero { padding-top:50px; }

#news {
	ul {
		li {
			a {
				time { display:block; padding:0 0 8px; }
			}
		}
	}
}
.modal {
	.modal-content { margin-block: 15%;
		h4 { font-size:4.4vw; }
	}
}

#greeting {
	article {
		h3 { font-size:4.2vw; }
		figure { padding-bottom:30px; }
		img { display:block; inline-size:60%; margin-inline:auto; }
		p { line-height:180%; }
	}
}

#program, #schedule {
	h3 { font-size:4.4vw; text-align:center; }
}

#personal, #main > section#cpc {
	h3 { font-size:4.4vw; }
}

#footer { 
	ul { inline-size: 90%; margin-inline:auto; }
}
}

@media (min-width: 561px){
a[href^="tel:"] { pointer-events: none; }
a.btn{ padding: 7px 20px; }

#header {
	a.header__logo { transform: translateY(-50%); }
}

#greeting {
	article {
		> div { display: flex; justify-content: space-between;
			figure { inline-size:20%; }
			div { inline-size:76%; }
		}
	}
}

#access {
	iframe { height:500px; }
}
}

@media (min-width: 561px) and (max-width: 1024px){
#header { block-size: 70px;
	a.header__logo { inline-size: 300px; }
}
.drawer__button { inline-size: 50px; block-size: 50px;
	span { inline-size: 50px; }
	span:first-child { transform: translate(-50%, calc(-50% - 16px)); }
	span:nth-child(2) { transform: translate(-50%, -50%); transition: opacity 0.3s ease; }
	span:last-child { transform: translate(-50%, calc(-50% + 16px)); }
}
.drawer__nav__item {
	a { font-size:20px; }
}

#hero { padding-block:70px; }

#personal h3, #main > section#cpc h3 { font-size:20px; }
}

@media (max-width: 768px){
body { font-size: 16px; }

.drawer__nav__item { padding-bottom:var(--space-sm); }

#schedule {
	img { padding-top:var(--space-md); }
}

#main > section#cpc {
	#concept div.flex {
		div { display:content; }
		p { padding-bottom:20px; }
	}
	#result {
		ul.result__list {
			li { inline-size:48%; }
		}
		img { padding-bottom:20px; }
	}
	#flow ol { padding-bottom:var(--space-lg); }

}

#reserve {
	img { padding-bottom:var(--space-sm); }
	p { display:table; margin-inline:auto; }
}
#cancel { padding-bottom:var(--space-lg); }

#access {
	div { display:content; }
	address { max-inline-size:400px; margin-inline:auto; margin-bottom:20px; }
}
}

@media (min-width: 769px){
div.flex { display:flex; justify-content: space-between;
	section { inline-size:48%; }
}

#schedule {
	> img { padding-top:30px; }
	ul.flex { display: flex; justify-content: space-between; flex-wrap: wrap;
		li { inline-size:48%; padding-top:30px; }
	}
}

#personal {
	#reserve {
		div.flex {
			img { inline-size:40%; }
			div { inline-size:56%; }
		}
	}
	#cancel, #caution { inline-size:48%; }
}

#main > section#cpc {
	h2 span br { display:none; }
	#concept div.flex {
		img { inline-size:36%; block-size:100%; }
		div { inline-size:60%; }
	}
	#aboutCpc {
		p { float:left; inline-size:48%; padding-bottom:0; }
		img { float:right; inline-size:48%; }
	}
	#aboutCpc::after { content: ""; display: block; clear: both; }
	ul.result__list {
		li { inline-size:48%; }
		li:nth-last-child(-n+6) { inline-size:32%; }
	}
	#flow {
		div.flex {
			ol, div { inline-size:48%; }
		}
	}
	#result div.flex {
		img { inline-size:36%; block-size:100%; border-radius:10px; }
		ul { inline-size:60%; box-sizing: border-box;}
	}
}

#access {
	div.flex { position: relative;
		iframe { inline-size:70%; }
		address { inline-size:32%; position:absolute; top:50%; right:0; transform: translateY(-50%); }
	}
}
}

@media screen and (max-width: 1024px){
a.header__logo { left:10px; }
.drawer__button { position: fixed; right: 10px; top: 10px; cursor: pointer; z-index: 999;
	span { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); block-size: 2px; background:var(--color-accent); }
	span:first-child { transition: transform 0.3s ease; }
	span:nth-child(2) { transform: translate(-50%, -50%); transition: opacity 0.3s ease; }
	span:last-child { transition: transform 0.3s ease; }
}
.drawer__button.active {
	span:first-child { transform: translate(-50%, -50%) rotate(-45deg); }
	span:nth-child(2) { opacity: 0; }
	span:last-child { transform: translate(-50%, -50%) rotate(45deg); }
}
.drawer__nav { position: fixed; top: 0; left: 0; inline-size: 100%; block-size: 100vh; background: rgba(230,247,255,0.5); transition: opacity 0.3s ease; opacity: 0; visibility: hidden; z-index: 50; }
.drawer__nav.active { opacity: 1; visibility: visible; }
.drawer__nav__inner { position: relative; block-size: 100%; background: #fff; overflow: scroll; transform: translateX(100%); transition: transform 0.3s ease; display: grid; place-items: center; color:var(--color-accent); font-weight: bold;
	> div { inline-size: 90%;
		p { border-bottom: 1px solid var(--color-accent); padding-bottom:var(--space-sm); margin-bottom:var(--space-sm); font-size:20px; font-weight:900; }
	}
}
.drawer__nav.active .drawer__nav__inner { transform: translateX(0); }
.drawer__nav__link { display: block; color:var(--color-accent); }
.drawer__nav__link:hover { color:var(--color-accent); }
body.active { block-size: 100%; overflow: hidden; }

#program {
	article { inline-size:90%; margin-inline:auto;
		img { padding-bottom:var(--space-sm); }
	}
}
}

@media screen and (min-width: 1025px){
#header { block-size: 100px;
	a.header__logo { inline-size: 240px; left:3%; }
}
.drawer__button, .drawer__nav__inner p { display:none; }
.drawer__nav, .drawer__nav__inner, .drawer__nav__inner > div { block-size:100%; }
.drawer__nav__inner > div { display:flex; justify-content: flex-end; align-items: center; }
.drawer__nav__menu { display:flex; justify-content: flex-end; padding-right:3%;
	li { padding-left: 10px;
		a { font-size:0.9em; }
	}
}

#hero { padding-block:100px; }

article.flex { display:flex; justify-content: space-between;
	img { inline-size:40%; }
	div { inline-size:56%; padding:var(--space-sm); box-sizing:border-box; }
}
#program {
	article.flex:nth-child(even) {
		div { padding-right:5%; padding-left:0; }
	}
	article.flex:nth-child(odd) { flex-direction: row-reverse;
		div { padding-left:5%; padding-right:0; }
	}
}
#main > section#cpc {
	ul.result__list {
		li { inline-size:19%; }
		li:nth-last-child(-n+6) { inline-size:19%; }
	}
}
}

@media (min-width: 1025px) and (max-width: 1280px){
.drawer__nav__menu { inline-size:70%; flex-wrap: wrap; }
}

@media screen and (min-width: 1281px){
a.header__logo { inline-size: 300px; left:5%; }
.drawer__nav__menu { padding-right:5%; }
}