@charset "utf-8";


.main_area{
	width: 100%;
	height: 70vw;
	max-height: 840px;
	display: flex;
	align-items: center;
	position: relative;
}


.main_area .img_area{
	width: 130vw;
	margin-inline: calc((100% - 130vw) / 2);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	margin: auto;
	z-index: 0;overflow-x: hidden;
}


.main_area .txt_area{
	width: 90%;
	max-width: 1100px;
	margin: auto;
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	margin: auto;
	z-index: 1;
}


.main_area h1{
	font-size: clamp(1.875rem, 1.284rem + 2.95vw, 3.5rem);
	margin-bottom: .5em;
	text-align: left;
	letter-spacing: .15em;
	line-height: 1.4;
}

.main_area h1 .txt_top,
.main_area h1 .txt_btm{
	display: inline-block;
	background: var(--c_blue);
	border-radius: var(--br10);
	color: var(--c_yel);
	padding: .125em .5em .2em;
}
.main_area h1 .txt_top{
	margin-bottom: .25em;
}

.main_area .list{
	width: 70%;
	max-width: 580px;
}
.main_area .list li{
	width: calc(100% / 2 - .75em);
	position: relative;
	background: #fff;
	border-radius: 50%;
	padding: 2em 1em 1em;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	text-align: center;
	font-size: var(--f20);
	border: 3px solid var(--c_blue);
	box-shadow: .35em .35em 0px 0px var(--c_blue);
}

.main_area .list li::before{
	content: "";
	mask-image: url(../images/front/tit_deco.svg);
	mask-size: cover;
	width: 50px;
	height: 19px;
	background-color: var(--c_red);
	position: absolute;
	top: 1.25em;
	left: 50%;
	transform: translateX(-50%);
	margin: auto;
}

.main_area .list li .big{
	font-weight: 900;
	line-height: 1.2;
	font-size: clamp(1.625rem, 1.352rem + 1.36vw, 2.375rem);
	color: var(--c_red);
}



section{
	position: relative;
	padding-top: 9em;
}
section>div{
	position: relative;
	z-index: 1;
}



section::before{
	font-size: clamp(3.75rem, 0.341rem + 17.05vw, 13.125rem);
	color: #F2F2F2;
	font-family: "Overpass", sans-serif;
	font-weight: 700;
	position: absolute;
	top: 0;
	left: -.05em;
}

section.bg_yel::before{opacity: .5}
section.bg_blue::before{opacity: .2}

.front_point::before{content: "POINT";}
.front_thought::before{content: "THOUGHT";}
.front_about::before{content: "ABOUT";}
.front_structure::before{content: "STRUCTURE";}
.front_schooling::before{content: "SCHOOLING";}
.front_subject::before{content: "SUBJECT";}
.front_tuition::before{content: "TUITION";}
.front_wellness_tuition::before{content: "TUITION";}
.front_faq::before{content: "Q&A";}
.front_contact::before{content: "CONTACT";}

section h2{
	font-size: clamp(1.625rem, 1.125rem + 2.5vw, 3rem);
	margin-bottom: 1.25em;
}

section h3{font-size: clamp(1.375rem, 1.011rem + 1.82vw, 2.375rem);margin-bottom: 1em;}
section h4{font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);margin-bottom: 1em;}

section h2 + .txt{
	font-size: clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);
	margin-bottom: 2.25em;
	text-align: center;
}


.tit_circle{
	position: relative;
	font-size: 120%;
	color: var(--c_blue);
}
.tit_circle::before{
  content: "";
  background: var(--c_blue);
  width: .2em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: absolute;
  top: -.125em;
  left: 50%;
  transform: translateX(-50%);
  margin: auto;
}


.front_point h2{
	margin-bottom: 2em;
}


.front_point ol.list h3,
.front_tuition h3{
	font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
}

.front_point .box h3{
	font-size: clamp(1.5rem, 1.045rem + 2.27vw, 2.75rem);
}




.front_intro .txt{
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
	line-height: 3;
}


.front_about .txt_area{
	width: 50%;
	max-width: 600px;
	margin: auto;
}

.front_about .img_list li{
	position: absolute;
	width: 23%;
	max-width: 260px;
}

.front_about .img_list li:nth-of-type(1){
	top: 45%;
	left: 0;
	transform: rotate(-5deg);
}
.front_about .img_list li:nth-of-type(2){
	bottom: 20%;
	right: 0;
	transform: rotate(5deg);
}

.front_about .img_list li img{
	border: 6px solid #fff;
}

.front_thought .list{
	align-items: flex-start;
	gap: 2.5em;
	position: relative;
}
.front_thought .list li{
	width: calc(100% / 3 - 2.5em);
	background: #fff;
	padding: 2em .5em;
	box-shadow: .35em .35em 0px 0px var(--c_dyel);
	border-radius: var(--br20);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--f24);
	text-align: center;
	position: relative;
}
.front_thought .list li:nth-of-type(1),
.front_thought .list li:nth-of-type(3){
	margin-top: 3em;
}
.front_thought .list li:nth-of-type(4),
.front_thought .list li:nth-of-type(5){
	position: absolute;
	top: 150%;
}
.front_thought .list li:nth-of-type(4){
	left: 2em;
}
.front_thought .list li:nth-of-type(5){
	right: 2em;
}

.front_thought .list li::before{
	content: "";
	width: 40px;
	height: 50px;
	background-color: #fff;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	position: absolute;
}

.front_thought .list li:nth-of-type(1)::before{
	bottom: -1em;
	right: -1em;
	transform: rotate(130deg);
}

.front_thought .list li:nth-of-type(2)::before{
	bottom: -1.75em;
	right: 0;
	left: 0;
	margin: auto;
	transform: rotate(180deg);
}
.front_thought .list li:nth-of-type(3)::before{
	bottom: -1em;
	left: -1em;
	transform: rotate(-130deg);
}
.front_thought .list li:nth-of-type(4)::before{
	top: 50%;
	right: -1.5em;
	transform: translateY(-50%) rotate(90deg);
}
.front_thought .list li:nth-of-type(5)::before{
	top: 50%;
	left: -1.5em;
	transform: translateY(-50%) rotate(-90deg);
}


.front_thought .list li::after{
	content: "";
	background-color: #efefef;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	margin: auto;
}

.front_thought .list li:nth-of-type(1)::after{
	mask-image: url(../images/front/front_thought_icon01.svg);
	mask-size: cover;
	width: 129px;
	height: 100px;
}
.front_thought .list li:nth-of-type(2)::after{
	mask-image: url(../images/front/front_thought_icon02.svg);
	mask-size: cover;
	width: 82px;
	height: 100px;
}
.front_thought .list li:nth-of-type(3)::after{
	mask-image: url(../images/front/front_thought_icon03.svg);
	mask-size: cover;
	width: 98px;
	height: 100px;
}
.front_thought .list li:nth-of-type(4)::after{
	mask-image: url(../images/front/front_thought_icon04.svg);
	mask-size: cover;
	width: 115px;
	height: 100px;
}
.front_thought .list li:nth-of-type(5)::after{
	mask-image: url(../images/front/front_thought_icon05.svg);
	mask-size: cover;
	width: 100px;
	height: 100px;
}

.front_thought .list li .wrap{
	position: relative;
	z-index: 1;
}
.front_thought .list li .big{
	font-size: var(--f34);
	font-weight: 900;
}
.front_thought .list li .big.c_red{
	font-size: var(--f30);
	font-weight: 900;
}
.front_thought .img{
	width: 25%;
	max-width: 200px;
	margin: auto;
}



.front_point ol.list{gap: 5em 3em;}
.front_point ol.list li{
	width: calc(100% / 3 - 3em);
	border: 4px solid var(--c_line);
	padding: 4.5em 1.5em 2em;
	border-radius: var(--br20);
	position: relative;
}
.front_point ol.list li .point{
	position: absolute;
	top: -2em;
	left: -1em;
	background: #25b7bf;
	border-radius: 50%;
	width: 5.25em;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	font-size: clamp(0.938rem, 0.824rem + 0.57vw, 1.25rem);
	line-height: 1;
	color: #fff;
	font-family: "Overpass", sans-serif;
	font-weight: 800;
	margin-bottom: 0;
}
.front_point ol.list li .point .num{
	font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
}
.front_point .box h3 .wrap{
	position: relative;
	display: inline-block;
	padding: 0 2em;
}
.front_point .box h3 .wrap::before,
.front_point .box h3 .wrap::after{
	content: "";
	border-left: 6px dotted #111;
	height: 60%;
	position: absolute;
	top: 55%;
}
.front_point .box h3 .wrap::before{
	left: 1em;
	transform: translateY(-50%) rotate(-25deg);
}
.front_point .box h3 .wrap::after{
	right: 1em;
	transform: translateY(-50%) rotate(25deg);
}
.front_point .more{
	margin: 2em auto 1em;
}
.front_point ul.list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
	margin-bottom: 1em;
}

.front_point .kobetsu.more a{
	background: var(--c_egren);
}



.front_structure .list li{
	background: var(--c_yel);
	border: 4px solid var(--c_line);
	border-radius: var(--br20);
}

.front_structure .list li:not(:last-child){
	margin-bottom: 8em;
	position: relative;
}

.front_structure .list li:not(:last-child)::after{
	content: "";
	width: 3.5em;
	height: 2em;
	background-color: var(--c_dyel);
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	position: absolute;
	bottom: -5.25em;
	left: 50%;
	transform: translateX(-50%);
	margin: auto;
}
.front_structure .list li .txt_area{
	width: 55%;
	padding: 2.5em 3em 2.75em;
}
.front_structure .list li .img_area{width: 40%;}
.front_structure .list li .img_area img{border-radius: 0 var(--br20) var(--br20) 0;}



.front_structure .list li h3{
	text-align: left;
	line-height: 1.4;
}
.front_structure .list li h3 .flow{
	display: block;
	font-size: clamp(1rem, 0.773rem + 1.14vw, 1.625rem);
}

.front_structure .list li h3 .flow .num{
	font-size: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem);
	margin-left: .125em;
}


.front_schooling .box{
	border: 4px solid var(--c_line);
	padding: 2.5em 3em;
	border-radius: var(--br20);
}


.front_subject .list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75em 1.5em;	
}
.front_subject li{
	border: 3px solid #333;
	padding: 1.5em .5em;
	text-align: center;
	background: #fff;
	box-shadow: .45em .45em 0px 0px var(--c_dyel);
	display: flex;
	align-items: center;
	justify-content: center;
}
.front_subject li .wrap::first-letter{
	font-size: 130%;
	color: var(--c_egren);
	font-weight: 900;
}



.front_tuition .list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
}

.front_tuition .list li{
	background: var(--c_yel);
	border: 4px solid var(--c_line);
	border-radius: var(--br20);
	padding: calc(4em + 150px) 2em 2em;
	position: relative;
}

.front_tuition .list li::before{
	content: "";
	position: absolute;
	top: 2em;
	left: 50%;
	transform: translateX(-50%);
	margin: auto;
}
.front_tuition .list li:nth-of-type(1)::before{
	background: url(../images/front/front_tuition_img01.png);
	background-size: cover;
	width: 9vw;
	height: 15vw;
	max-width: 86px;
	max-height: 150px;
	min-width: 72px;
	min-height: 128px;
}
.front_tuition .list li:nth-of-type(2)::before{
	background: url(../images/front/front_tuition_img02.png);
	background-size: cover;
	width: 26vw;
	height: 15vw;
	max-width: 253px;
	max-height: 150px;
	min-width: 168px;
	min-height: 98px;

}
.front_tuition .list li:nth-of-type(3)::before{
	background: url(../images/front/front_tuition_img03.png);
	background-size: cover;
	width: 21vw;
	height: 15vw;
	max-width: 210px;
	max-height: 150px;
	min-width: 162px;
	min-height: 116px;
}

.front_tuition h3 .txt01{
	display: block;
	background: var(--c_red);
	border-radius: var(--br10);
	color: #fff;
	font-size: 80%;
	width: fit-content;
	margin: 0 auto .125em;
	padding: .125em .5em;
}

.front_tuition a{
	border-bottom: 1px solid var(--c_blue);
	display: inline-block;
	padding-bottom: .1em;
	margin: 0 .25em;
	line-height: 1.4;
	color: var(--c_blue);
	font-weight: bold;
}


.front_wellness_tuition .tuition_common{
	border: 4px solid var(--c_blue);
	border-radius: var(--br20);
}

.front_wellness_tuition .tuition_common h3{
	background: var(--c_blue);
	color: #fff;
	border-radius: var(--br10) var(--br10) 0 0;
	padding: .75em;
	margin-bottom: 0;
	font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
}

.front_wellness_tuition .tuition_common .inr{
	padding: 1.5em 3em 2em;
}

.front_wellness_tuition .price_list li{
	padding: 0 1em;
	text-align: center;
}
.front_wellness_tuition .price_list li:not(:last-child){
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid var(--c_line);
}

.front_wellness_tuition .price_list li .price{
	margin-bottom: 0;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
}
.front_wellness_tuition .price_list li .price:has(+ p){
	margin-bottom: .5em;
}

.front_wellness_tuition .price_list li .num{
	font-size: clamp(1.875rem, 1.193rem + 3.41vw, 3.75rem);
	font-weight: 900;
	line-height: 1;
	margin-right: .125em;
}

.front_wellness_tuition .price_list li.total_price .num{
	font-size: clamp(1.75rem, 1.341rem + 2.05vw, 2.875rem);
}

.front_wellness_tuition .price_list li .txt01{
	display: block;
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
}

.front_wellness_tuition .price_list li .txt02{
	margin-right: .5em;
}





.front_faq .list details {
	position: relative;
}
.front_faq .list details:not(:last-child) {
	margin-bottom: 1.5em;
}

:root {
	interpolate-size: allow-keywords;
}


.front_faq .list details::details-content {
	transition: height 0.4s, content-visibility 0.4s allow-discrete;
	height: 0;
	overflow: clip;
}

.front_faq .list details[open]::details-content {
	height: auto;
}

.front_faq .list summary {
	background: var(--c_blue);
	border-radius: var(--br10);
	color: #fff;
	font-size: var(--f20);
	padding: 1rem 3rem 1rem 3.5rem;
	list-style: none;
	position: relative;
}
.front_faq .list summary::before {
	content: "Q";
	font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
}
.front_faq .list summary::after {
	font-family: "FAsolid";
	font-weight:900;
	content: "\f078";
	font-size: 140%;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}


.front_faq .list details[open] summary::after {
	content: "\f077";
}
.front_faq .list details div{
	position: relative;
	padding: 1rem 2rem 0 3.5rem;	
}
.front_faq .list details div::before {
	content: "A";
	font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
	color: var(--c_red);
	position: absolute;
	top: .125em;
	left: .75rem;
}

.front_contact .list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
}
.front_contact .more{max-width: 100%;margin: auto}
.front_contact .request.more a{
	background: #fff;
	color: var(--c_blue);
}
.front_contact .request.more a::after{
  color: var(--c_blue);
}

.front_contact .kobetsu.more a{
	background: #fff;
	color: var(--c_egren);
}
.front_contact .kobetsu.more a::after{
  color: var(--c_egren);
}


@media (max-width: 899px){




.front_point ol.list{gap: 4em 3em;}
.front_point ol.list li{width: calc(100% / 2 - 3em);}



.front_tuition .list{gap: 1.25em;}


}




@media (max-width: 799px){



.main_area{
	width: 100%;
	height: 100%;
	max-height: 100%;
	display: block;
	margin-bottom: 1em;
}


.main_area .img_area{
	position: static;
	transform: unset;
	width: 150vw;
	margin-inline: calc((100% - 150vw) / 2);
	margin-bottom: 1.5em;
}

.main_area .txt_area{
	position: static;
	transform: unset;
	width: 94%;
	margin-top: -5em;
}
.main_area .list{
	width: 80%;
}


section{padding-top: 6em;}


.front_thought .list{gap: 1.5em;}
.front_thought .list li{
	width: calc(100% / 3 - 1.5em);
	padding: 1.5em .5em;
	box-shadow: .35em .35em 0px 0px var(--c_dyel);
}
.front_thought .list li:nth-of-type(4){left: 0;}
.front_thought .list li:nth-of-type(5){right: 0;}


.front_about .txt_area{
	width: 100%;
	max-width: 100%;
	margin: auto;
}
.front_about .img_list{
	display: flex;
	justify-content: center;
	gap: 8%;
}
.front_about .img_list li{
	position: static;
	width: 46%;
}


.front_schooling .box{padding: 1.75em 2em;}


.front_point ol.list{gap: 4em 2.5em;}
.front_point ol.list li{
	width: calc(100% / 2 - 2.5em);
	padding: 4.5em 1.5em 1.5em;
}


.front_subject .list{
	grid-template-columns: repeat(3, 1fr);
}

.front_structure .list li{padding: 1.75em 2em;}
.front_structure .list li h3{text-align: center;}
.front_structure .list li .txt_area,
.front_structure .list li .img_area{
	width: 100%;
	padding: 0;
}
.front_structure .list li .img_area img{border-radius: var(--br20);}


.front_tuition .list{
	grid-template-columns: repeat(1, 1fr);
	gap: 2em;
}
.front_tuition .list li{padding: 14em 1.75em 1.75em;}
.front_tuition .list li:nth-of-type(1)::before{
	width: 24vw;
	height: 40vw;
}
.front_tuition .list li:nth-of-type(2)::before{
	width: 68vw;
	height: 40vw;
}
.front_tuition .list li:nth-of-type(3)::before{
	width: 56vw;
	height: 40vw;
}



.front_wellness_tuition .tuition_common .inr{
	padding: 1.25em 2em;
}


.front_point ul.list,
.front_contact .list{
	gap: 1em;
}



}



@media (max-width: 599px){

.main_area .list{
	width: 90%;
}
.main_area .list li{
	width: calc(100% / 2 - .35em);
	padding: 2em .25em 1em;
	box-shadow: .25em .25em 0px 0px var(--c_blue);
}

.main_area .list li::before{
	width: 38px;
	height: 14px;
	top: .85em;
}

section{padding-top: 4em;}
section h2{
	margin-bottom: 1em;
}


.front_schooling .box{padding: 1.5em 1.75em;}

.front_thought .list{
	gap: 2em;
	margin-bottom: 2em;
}
.front_thought .list li{
	width: 80%;
	margin-right: 20%;
	padding: 1em .5em;
}

.front_thought .list li:nth-of-type(even){
	margin-left: 20%;
	margin-right: 0;
}

.front_thought .list li:nth-of-type(1),
.front_thought .list li:nth-of-type(3){
	margin-top: 0;
}
.front_thought .list li:nth-of-type(4),
.front_thought .list li:nth-of-type(5){
	position: relative;
}


.front_thought .list li:nth-of-type(2)::before,
.front_thought .list li:nth-of-type(4)::before{
	bottom: -1em;
	right: unset;
	left: -1em;
	transform: rotate(-130deg);
}

.front_thought .list li:nth-of-type(3)::before,
.front_thought .list li:nth-of-type(5)::before{
	bottom: -1em;
	left: unset;
	right: -1em;
	transform: rotate(130deg);
}
.front_thought .list li:nth-of-type(1)::after{
	width: 64px;
	height: 50px;
}
.front_thought .list li:nth-of-type(2)::after{
	width: 41px;
	height: 50px;
}
.front_thought .list li:nth-of-type(3)::after{
	width: 49px;
	height: 50px;
}
.front_thought .list li:nth-of-type(4)::after{
	width: 57px;
	height: 50px;
}
.front_thought .list li:nth-of-type(5)::after{
	width: 50px;
	height: 50px;
}


.front_structure .list li:not(:last-child){
	margin-bottom: 6em;
}
.front_structure .list li:not(:last-child)::after{
	bottom: -4.25em;
}



.front_point ol.list{gap: 3.5em;}
.front_point ol.list li{
	width: 96%;
	margin: auto;
	padding: 3.5em 1.25em 1.25em;
}



.front_subject .list{
	grid-template-columns: repeat(2, 1fr);
	gap: 1em .75em;	
}
.front_subject li{
	border: 2px solid #333;
	padding: 1em .5em;
}

.front_structure .list li{padding: 1.25em 1.5em;}


.front_tuition .list li{padding: calc(4em + 150px) 1.5em 1.5em;}


.front_wellness_tuition .tuition_common .inr{padding: 1.25em 1.5em;}

.front_faq .list details:not(:last-child) {
	margin-bottom: 1.5em;
}

.front_contact .list{
	grid-template-columns: repeat(1, 1fr);
	gap: 1.5em;
}


}



@media (max-width: 399px){

.main_area .list{
	width: 98%;
}

.main_area .list li .big{
	font-size: clamp(1.375rem, 1.33rem + 0.23vw, 1.5rem);
}


.front_tuition .list li{padding: calc(5em + 115px) 1.5em 1.5em;}


}