@charset "UTF-8";

:root {
	--navy: #113488;
	--smokeblue: #D1E9EC;
	--orange: #F8B62D;
	--brand: #d80c18;
	--palegreen: #f2fbf3;
	--paleblue: #effeff;
	--paleyellow: #feffe3;
	--softgreen: #8cdc90;
	--softblue: #aae9ee;
	--softorange: #ffe2a6;
	--black: #333;
	--smoke: #f3f3f3;
}

html { height: 100%}
body {-webkit-text-size-adjust: none;font-size: 100%;line-height: 1.6;height:100%;}
#container { font-family: "BIZ UDPGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;}
* { box-sizing:border-box; }
a { text-decoration: none; color: #333;}
img{border:0;vertical-align: bottom;max-width: 100%;width:auto;height: auto;}
span { font-weight: inherit;}
.c_mrk { background: linear-gradient(transparent 60%, var(--yellow) 40%);}
.dib { display: inline-block;}
.indent {text-indent: 1em;}
.inner{max-width: 1000px;margin: 0 auto;}
.clear { clear:both; display:block; }
.cf::after { content:""; clear:both; display:block; }
h1, h2, h3, h4, h5 {color: #333; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;}
#wrapper { overflow: auto; overflow-x: hidden; padding: 0;}
.campaign_bnr { text-align: center; width: 96vw; margin: 50px auto;}
.flex { display: flex; flex-wrap: wrap;}
.flex_between { display: flex; flex-wrap: wrap; justify-content: space-between;}
.flex_center { display: flex; flex-wrap: wrap; justify-content: center;}
.bg_white { background: white;}
.bg_navy { background: var(--navy);}
.noPC { display: none!important;}

@media all and (max-width: 1099px){
	body {font-size: 14px;}
	.inner{padding: 0 3%;}
}

@media all and (max-width: 599px){
	.noSP{ display: none !important;}
	.noPC { display: block !important;}
}

@font-face { font-family:"FontAwesome"; src:url("./fa-solid-900.woff2") format("woff"); }





#header { position: sticky; top: 0; width: 100%; z-index: 101; background: rgba(255, 255, 255, 1);}
.headPC { width: 100%; min-width: 320px; border-top: 5px solid var(--brand);}
.headPC .inner { max-width: inherit; padding: 0 2.5%;}
.headPC .hdrTop { display: flex; justify-content: space-between; position: relative; padding-top: 5px;}
.headPC .tagline { font-size: clamp( 10.5px, 0.95vw, 14px ); max-width: calc(100% - 35em); margin-top: 5px; color: #828282;}
.hdrTop .hdrBtn { position: absolute; right: 0; top: 10px;}
.hdrTop .hdrBtn a { background: #6d7578; color: #fff; padding: 0.2em 0.8em; font-size: clamp( 10.5px, 0.95vw, 14px ); border-radius: 30px; margin-left: 0.5em;}
.hdrTop .hdrBtn a:after { font-family: FontAwesome; content: "\f105"; font-weight: 900; margin-left: 5px;}
.headPC .top { display: flex; justify-content: space-between; padding: 15px 0 10px; align-items: center;}
.headPC .hdrLogo { margin-top: 0; max-width: 250px;}
.gnav { width: calc(100% - 260px); display: flex; justify-content: flex-end; align-items: center;}
.headPC ul.dropdown { margin: 0 10px 0 0; position: relative; display: flex; justify-content: center; align-items: start;}
.headPC ul.dropdown li.pli { width: inherit; height: auto; border-left: 1px solid #e2e2e2; background: none; flex-grow: 1;}
.headPC ul.dropdown li.pli > a { padding: 5px 15px; text-align: center; width: 100%; height: auto; font-size: 13px; font-weight: bold; line-height: 1.5; text-decoration: none; color: #6e6e6e; display: block; overflow: visible;}
.headPC ul.dropdown li.pli > a span { color: #565656; display: block; font-size: 70%; font-weight: normal;}
.headpcIn { padding: 0; display: flex; justify-content: space-between;}
#header-menu_pc { position: static; display: flex;}
#header-menu_pc li { background: #32b16c; width: 115px; line-height: 1.3; padding: 3px 0 5px; font-size: 16px; font-weight: 600; margin-right: 10px;}
#header-menu_pc li:hover { background: #2da15f; box-shadow: 2px 2px 0px 0 rgb(0, 78, 0);}
#header-menu_pc li a { color: #fff; display: block; text-align: center;}
#header-menu_pc li a span { font-size: 70%;}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-appearance:textfield;}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
body.menu-is-open { /*overflow: hidden; height: 100%;*/ }
.nvBTN { position: absolute; top: 8px; right: 10px; width: 35px; padding: 12px 5px 21px 5px; box-sizing:content-box; border: 0; outline: 0;background-color: var(--brand); cursor: pointer; transition:.6s; }
.nvBTN span {position: relative;display: block;margin-top: 10px;}
.nvBTN span,.nvBTN span:before,.nvBTN span:after { width: 100%;height: 3px;transition:.6s; background-color: #fff; }
.nvBTN span:before,.nvBTN span:after {position: absolute;top: -10px;left: 0;content: ' ';}
.nvBTN span:after {top: 10px;}
.headpc .nvBTN { position: static;}
.menu-is-open .nvBTN span {background-color: transparent;}
.menu-is-open .nvBTN span:before,.menu-is-open .nvBTN span:after {top: 0;}
.menu-is-open .nvBTN span:before { transform: rotate(45deg); }
.menu-is-open .nvBTN span:after { transform: rotate(-45deg); }
.rNavi{ position:fixed; top:59px; right:0; height:calc(100vh - 105px); overflow:hidden; z-index:104; width:280px; pointer-events:none; }
.rNavi nav { display:block; overflow-y:auto; height:100%; width:100%; background: #f2ecd9; transform:translateX(100%); transition:transform 400ms ease; }
.menu-is-open .rNavi { pointer-events:auto; }
.menu-is-open .rNavi nav {transform:translateX(0);}
.subNavi{display: flex;position: relative; position:sticky; top: 60px; padding-top:3px; background:#fff; width: 100%; z-index:101; }
.subNavi li{width: 33%;}
.subNavi li a{padding: 15px 1%;text-align: center;display: block;}
.subNavi.noSP li{background: #fff;border: 1px #ccc solid;border-left:none;border-bottom: 3px #CB064B solid}
.subNavi.noSP li:last-of-type{border-right:none;}
.headSPIn { padding: 0;}
#header-menu li { display: inline-block; margin-right: 5px; width: 90px;}
.headSP { display: none!important;}



.gnav{width:calc(100% - 260px);display: flex;justify-content:flex-end;align-items: center; padding-top: 1em;}
.headPC{background:none;min-width: 320px;}
.headPC .inner{max-width: inherit;padding:0 2.5%;}
.headPC .top{display: flex;justify-content: space-between;padding: 15px 0 10px;align-items: center;}
.headPC ul.dropdown li.pli{width: inherit;}
.headPC ul.dropdown li.pli > a{padding: 5px 15px;}
#header-menu_pc{position: static;display: flex;}
.headpc .nvBTN{position: static;}
.headpcIn{padding: 0;display: flex;justify-content: space-between;}
.headPC ul.dropdown{margin: 0 10px 0 0;}
.drawer-menu li.free-dial a{padding: 8px 0 8px 13px;background: #fff799;}
.drawer-menu li.free-dial{line-height: 1;}
.rNavi{top: 104px;display:inherit !important;}
.headSPIn{padding: 0;}
.headPC ul.dropdown li.pli > a span{color: #565656;}
.headPC .hdrTop{display: flex;justify-content: space-between;position: relative;padding-top: 5px;}
.hdrTop .hdrBtn{position: absolute;right: 0;top: 10px;}
.hdrTop .hdrBtn a{background: #6d7578;color: #fff;padding: 3px 15px;font-size: 14.5px;border-radius: 30px;}
.hdrTop .hdrBtn a:after{ font-family: FontAwesome; content: "\f105";font-weight: 900;margin-left: 5px;}



/* LEVEL ONE */
.headPC ul.dropdown { position: relative; display: flex;
	justify-content: center; align-items: start; margin:4px 0 8px; }
.headPC ul.dropdown li { float: left; }
.headPC ul.dropdown li a{  display: block; }
.headPC ul.dropdown > li > a{ display: block; overflow: visible; height: 49px; }
.headPC ul.dropdown li span{ display: none; }
.headPC ul.dropdown li.home { width: 62px; height: 49px;
	background: url("/resource/images/pc_common/gnav_01.jpg") 0 0 no-repeat; }
.headPC ul.dropdown li.course { height: 49px; width: 184px;
	background: url("/resource/images/pc_common/gnav_02.jpg") 0 0 no-repeat; }
.headPC ul.dropdown li.school { height: 49px; width: 183px;
	background: url("/resource/images/pc_common/gnav_03.jpg") 0 0 no-repeat; }
.headPC ul.dropdown li.lessonstyle { height: 49px; width: 184px;
	background: url("/resource/images/pc_common/gnav_04.jpg") 0 0 no-repeat; }
.headPC ul.dropdown li.campaign { height: 49px; width: 183px;
	background: url("/resource/images/pc_common/gnav_05.jpg") 0 0 no-repeat; }
.headPC ul.dropdown li.faq { height: 49px; width: 184px;
	background: url("/resource/images/pc_common/gnav_06.jpg") 0 0 no-repeat; }
.headPC ul.dropdown > li.hover, .headPC ul.dropdown > li:hover{ 
	position: relative; background-position: 0 -49px; }
.headPC ul.dropdown li.pli { width:auto; height:auto; border-left:1px solid #e2e2e2; background:none; flex-grow:1; }
.headPC ul.dropdown li.home { background:url(/resource/images/pc_common/gnav_01i.jpg) no-repeat center -3px; width:62px; flex-grow:0; }
.headPC ul.dropdown li.pli:last-of-type { border-right:1px solid #e2e2e2; }
.headPC ul.dropdown li.pli > a { text-align:center; width:100%; height:auto; padding-bottom:3px; font-size:13px; font-weight:bold; line-height:1.5; text-decoration:none; color:#6e6e6e; }
.headPC ul.dropdown li.pli > a span { display:block; font-size:70%; color:#c9c9c9; font-weight:normal; }
.headPC ul.dropdown li.home > a span { padding-top:21px; }
.headPC ul.dropdown li.pli:hover > a { color:#ce442b; }
.headPC ul.dropdown li.pli:hover > a span { color:#ce442b; }
.headPC ul.dropdown li.home:hover { background-position:center -52px; }

/* LEVEL TWO */
.headPC ul.dropdown ul { position: absolute;  top: 100%; left:-30%; z-index: 999; font-size:13px;
	padding-top: 9px; margin-top: -10px; width: 160px; visibility: hidden; border-radius:3px;
	background: url("../images/pc_common/gnav_pop_bg.png") 0 0 no-repeat; }
.headPC ul.dropdown .course ul { width: 200px; left: -110%; 
	background: url("../images/pc_common/gnav_pop_bg_02.png") 0 0 no-repeat; }
.headPC ul.dropdown .course ul li span, .headPC ul.dropdown .school ul li span { color: #333; text-decoration: none;
	background: url("../images/pc_common/arrow_beige_s.png") 180px center no-repeat; }
.headPC ul.dropdown ul li { position: relative; display: block; float: none; 
	font-weight: normal; text-align: center; background-color: #fff; cursor: pointer;
	border-right: 2px solid #ca0348; border-left: 2px solid #ca0348; }
.headPC ul.dropdown ul li:hover { background: #ebebeb; }
.headPC ul.dropdown ul li:last-child { border-bottom: 2px solid #ca0348;
	border-radius:0 0 3px 3px; }
.headPC ul.dropdown ul li span { display: block; padding: 7px 0;
	border-bottom: 1px solid #e3e3e3;  }
.headPC ul.dropdown ul li.last span { border-bottom:none; }
.headPC ul.dropdown ul li a { color: #333; text-decoration: none;
	/*background: url("/resource/images/pc_common/arrow_beige_s.png") 144px center no-repeat;*/ }
.headPC ul.dropdown ul li.hokkaido a { background: none; }
.headPC ul.dropdown ul li a{ width: 100%; display: inline-block;
	overflow: visible; border-right: none; } 

/* LEVEL THREE */
.headPC ul.dropdown ul ul{ left: 98%; top: 0; width: 110px; background-image: none;
	padding-top: 0; margin-top: -2px; border: 2px solid #ca0348;
	box-shadow:  0px 2px 3px 2px rgba(00, 00, 00, 0.3); }
/* .headPC ul.dropdown ul li.chugoku ul, .headPC ul.dropdown ul li.kyushu ul { transform:translateY(-50%); } */
.headPC ul.dropdown .course ul ul { width: 220px; left: 98%; }
.headPC ul.dropdown .course ul ul li span { color: #333; text-decoration: none;
	background: url("/resource/images/pc_common/arrow_beige_s.png") 180px center no-repeat; }
.headPC ul.dropdown .course ul ul li span { display: block;
	padding: 0 0; border-bottom: none; }
.headPC ul.dropdown li:hover > ul{ visibility: visible; }
.headPC ul.dropdown ul ul li{ padding: 7px 0;
	border-left: none ; border-right: none ; border-bottom: 1px solid #e3e3e3; }
.headPC ul.dropdown ul ul li:last-child{ border-bottom: none ; }
.headPC ul.dropdown ul ul li a{ color: #06f; text-decoration: underline;
	background: none; }

:target::before { padding-top: 65px; margin-top:-65px; content:""; display:block; }

.menu-icon {background-image: url(/resource/images/common/icon_menu.png);background-repeat: no-repeat;-webkit-background-size: 138px 138px;background-size: 138px 138px;display: block;/* float: left; *//* clear: left; */position: absolute;left: 0;top: 0;}
.menu-icon01 {width: 42px;height: 42px;background-position: -2px -2px;}
.menu-icon02 {width: 42px;height: 42px;background-position: -48px -2px;}
.menu-icon03 {width: 42px;height: 42px;background-position: -94px -2px;}
.menu-icon04 {width: 42px;height: 42px;background-position: -2px -48px;}
.menu-icon05 {width: 42px;height: 42px;background-position: -48px -48px;}
.menu-icon06 {width: 42px;height: 42px;background-position: -94px -48px;}
.menu-icon07 {width: 42px;height: 42px;background-position: -2px -94px;}
.menu-icon08 {width: 42px;height: 42px;background-position: -48px -94px;}
.menu-icon09 {width: 42px;height: 42px;background-position: -94px -94px;}

.drawer-menu{ position: relative; z-index: 100; }
.drawer-menu li{ font-weight: bold; line-height: 3.25;
	overflow: hidden; background: #fff; border-bottom: 1px solid #e5d9b4; }
.drawer-menu li a{ display: block; position: relative; padding-left: 56px; }
.drawer-menu li a:after { font-family: FontAwesome; content: "\f138";
	font-weight: 900; font-size: 150%; color: #ce442b; background: transparent;
	position: absolute; right: .5em; top: 50%; transform:translateY(-50%); }
.drawer-menu li i{ margin: .25em .5em; }
.drawer-menu li.doc-request{ background: #99cc33; }
.drawer-menu li.free-trial{  background: #2ec5c5; }
.drawer-menu li.back-top{    background: #ce442b; }
.drawer-menu li.free-trial a, .drawer-menu li.doc-request a,
.drawer-menu li.free-trial a:after, .drawer-menu li.doc-request a:after,
.drawer-menu li.back-top a,.drawer-menu li.back-top a:after
{ color: #fff; }

.box-beige{ margin: 1em 0; padding: .5em; background: #E5D9B4; border-radius: 10px 10px 0 0; }
.box-beige h2{ font-size: 130%; font-weight: bold; color: #ce442b; text-align: center;
	line-height: 1.8; border-bottom: 1px solid #ce442b; margin-bottom: 1px; }
ul.button-area-two{ margin: 1em 2%; text-align: center; }
ul.button-area-two li{ display: inline-block; width: 46%; margin: 0 .5%; }
ul.list-beige{ background: #E5D9B4; margin: 0; }
ul.list-beige li{ border-bottom: 1px solid #fff; }
ul.list-beige li a{ font-weight: bold; display: block; padding: .5em 1em; }





.hdrTop .hdrBtn a { margin-left: 0.5em; padding: 0.2em 0.8em; font-size: clamp( 12px, 0.95vw, 14px );}
.drawer-menu li.aviva_link a, .drawer-menu li.rslc_link a { padding: 0 0 0 13px;}
.drawer-menu li.aviva_link a { background: #ca0349;}
.drawer-menu li.rslc_link a { background: #ffe100;}
.drawer-menu li.aviva_link a::after { color: #fff;}
.drawer-menu li.rslc_link a::after { color: #333;}
.drawer-menu li.aviva_link a img, .drawer-menu li.rslc_link a img { width: 192px; height: auto;}



@media(max-width: 1250px) {
	.headPC .hdrLogo { max-width: 230px;}
	.gnav { width: calc(100% - 240px);}
	.headPC ul.dropdown li.pli > a { padding: 5px 7px; font-size: 12px;}
	.headPC ul.dropdown li.pli > a{padding: 5px 7px;font-size: 12px;}
	#header-menu_pc li{width: 95px;padding: 5px 0;font-size: 14px;}
}

@media(max-width: 1099px) {
	.headPC .hdrTop, .gnav nav { display: none;}
	.gnav { padding-top: 0;}
	.gnav nav{display: none;}
	.rNavi { top: 76px;}
	.rNavi nav { padding-top: 1px;}
}

@media(max-width: 960px) {
	.headPC .hdrLogo { max-width: 100px;}
}
@media(max-width: 959px) {
	.headPC { display: none !important; padding: 10px 0;}
	.headPC .inner { padding: 0 10px;}
	.headPC .top { padding: 0;}
	#header-menu { position: absolute; right: 60px; top: 12px;}
	.nvBTN { right: 10px; top: 12px;}
	.headpc { display: none!important;}
	.headSP, .footSP { display: block !important;}
	.headPC{display: inherit !important;padding: 10px 0;}
	.headpc{display: none !important}
	.rNavi{top: 70px;}
	.headPC .top{padding: 0;}
	.headPC .inner{padding: 0 10px;}
}

@media (max-width: 699px){
	.headPC .inner{padding: 0 5px;}
	.headPC .top{padding:5px 0;}
	.gnav{width: calc(100% - 90px);}
	#header-menu, .nvBTN{top: 10px;}
	.headPC{padding: 0;}
	.rNavi{top: 60px;}
}

@media all and (max-width: 599px){
	.subNavi.noPC { display: flex!important;}
	.subNavi li{background: #f0f0f0; font-size: 3vw;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;line-height: 1.3;}
	.subNavi li:not(:last-of-type){border-right: 1px #fff solid;}
	.subNavi li a{padding: 5px 0;}
}

@media all and (max-width: 370px) {
	#header-menu{width: inherit;}
	#header-menu li { width: 65px;}
	#header-menu li img{ height: 35px;min-width: inherit; }
	.headPC .hdrLogo{max-width: 76px;}
	.rNavi{top: 50px;}
	.headSPIn{ padding:6px 10px; }
	#logo img{height: 35px;}
	.nvBTN{height: 2px;width: 25px;top:6px;}
	.nvBTN span{margin-top: 4px;}
	.subNavi{ top: 46px; }
	.rNavi{ top:44px; height:calc(100vh - 45px); }
	:target::before { padding-top: 45px; margin-top:-45px; }
}





#mainvisual { background: #f7f7f7; color: var(--black); z-index: 0;}
#mainvisual > .inner { display: flex; flex-wrap: wrap; width: 96vw; max-width: 1920px; padding-block: 4vw; margin: auto; background: url(../images/main_mh.png) no-repeat center right; background-size: contain;}
#mainvisual .txt_area { padding: 1vw 3vw; font-size: clamp( 14px, 2vw, 36px );}
#mainvisual .txt_area .eyecatch { display: inline-block; background: var(--softgreen); color: white; padding: 0.1em 0.6em; border-radius: 1em; margin: 0 auto 0.6em -0.6em; box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,.2);}
#mainvisual .txt_area .eyecatch .bold { font-weight: bold;}
#mainvisual .txt_area h1 { font-size: 220%; font-weight: bold; color: inherit; letter-spacing: 0; margin-bottom: .15em; line-height: 1.2; 0 0 0.2em #efefef, 0 0 0.2em #efefef, 0 0 0.2em #efefef;}
#mainvisual .txt_area .charm { line-height: 1.4;}
#mainvisual .txt_area .charm > li { margin-top: 0.5em; padding-left: 1.3em; position: relative;}
#mainvisual .txt_area .charm > li::before { content: "\f14a"; font-family: FontAwesome; font-weight: bold; position: absolute; left: 0; top: 0; color: var(--softgreen);}

@media (max-width: 799px) {
	#mainvisual > .inner { width: 100%; height: 70vw; background-position: center bottom; background-size: cover; position: relative;}
	#mainvisual .txt_area { width: 100%; height: auto; padding: 0; font-size: clamp( 12px, 3vw, 48px ); margin-bottom: auto;}
	#mainvisual .txt_area h1 { font-size: 7vw;}
	#mainvisual .txt_area .charm { max-width: unset; padding: 0.8em; background: rgba(255,255,255,0.8); position: absolute; left: 2vw; right: 2vw; bottom: 2vw;}
	#mainvisual .txt_area .charm > li { padding-block: 0.1em; margin: 0;}
}


@media (max-width: 599px) {
	/* #mainvisual > .inner { height: 100vw;} */
	#mainvisual > .inner { width: 100%; height: 70vw; background-position: center bottom; background-size: cover; position: relative;}
	#mainvisual .txt_area { font-size: clamp( 10px, 4.0vw, 20px );}
	#mainvisual .txt_area h1 { font-size: 7.5vw;}
	#mainvisual .txt_area .eyecatch { margin-left: 0;}
}








section { padding: 50px 0;}
#pickupArea, #revueArea, #trainingArea { background: var(--smoke);}
.inner { max-width: 1000px; margin: 0 auto;}
.secttl { text-align: center; font-size: clamp( 21px, 3.5vw, 2.5rem ); line-height: 1.5; margin-bottom: 50px; font-weight: bold; position: relative;}
.secttl:after { content: ""; background: var(--brand); height: 5px; width: 80px; position: absolute; bottom: -15px; left: 0; right: 0; margin: 0 auto;}
.pd_cmn, #mainContent .pd_cmn { padding: clamp(1em, 3vw, 2em);}
h3.bg_navy { background: #7cd280; color: #fff !important; padding: .25em; font-weight: bold; text-align: center; margin-bottom: 1.5em; font-size: 1.35rem;}
.sh2 { font-size: 1.6rem; font-weight: bold; line-height: 1.4; margin-bottom: 0.5em;}
p.lead { font-weight: bold; font-size: 130%; text-align: center; margin: 0 auto 1em;}
.bg_smoke { background: var(--smoke);}
.bg_yellow { background: var(--paleyellow);}
.bg_green { background: var(--palegreen);}








.mainList, .reasonList { grid-gap: 1em 2em; padding-inline: 2vw;}
.mainList > li, .reasonList > li { width: clamp( 300px, 50% - 2em, 500px );}
.mainList .imgArea, .reasonList .imgArea { width: 80%; margin: 0 auto 1em;}

@media(max-width:799px) {
	.mainList > li, .reasonList > li { width: 100%;}
}







#mainContent .desc { grid-gap: 1.5em clamp( 1.5em, 4vw, 4em ); align-items: center; font-size: clamp( 14px, 125%, 21px );}
#mainContent .desc .txt_area { width: calc( 50% - clamp( 1.5em, 4vw, 4em ) );}
#mainContent .desc .img_area { width: 50%; position: relative;}
#mainContent .desc .img_area p .icon { position: absolute; width: 30%; left: 10%; top: 5%; transform: rotate( -20deg );}
#mainContent .desc .img_area p .txt { position: absolute; background: white; display: inline-block; padding: 0.2em 0.5em; right: 0; bottom: 0.5em; font-size: 150%;}

@media(max-width:799px) {
	#mainContent .desc .txt_area { width: 100%; order: 2;}
	#mainContent .desc .img_area { width: 80%; max-width: 500px; margin: 0 auto; order: 1;}
	#mainContent .desc .img_area p .txt { font-size: clamp( 14px, 5vw, 26px );}
}




.necessity { width: 800px; max-width: 96vw; background: white; text-align: center; margin-top: 2em;}
.necessity .sh2 > span { display: inline-block; font-size: 75%; color: #c00; position: relative; padding-inline: 1.3em; margin-bottom: 0.3em;}
.necessity .sh2 > span::before, .necessity .sh2 > span::after { content: ""; positon: absolute; bottom: 0;}
.necessity .sh2 > span::before { content: "＼"; left: 0;}
.necessity .sh2 > span::after { content: "／"; right: 0;}
.necessity .check_list { font-size: 112.5%; display: inline-block; text-align: left;}
.necessity .check_list > li { line-height: 1.4; margin: 0.8em 0; padding-left: 1.3em; position: relative;}
.necessity .check_list > li::before { content: "□"; position: absolute; left: 0; top: 0;}



.personality { column-gap: 4em; align-items: center;}
.personality .txt_area, .personality .img_area { width: calc( 50% - 2em );}

@media(max-width:799px) {
	.personality .txt_area { width: 100%; margin-block: 1em;}
	.personality .img_area { width: 80%; max-width: 500px; margin-inline: auto;}
}





.reason_list { grid-gap: 1em 6em;}
.reason_list > li { width: clamp( 300px, 33% - 3em, 400px );}
.reason_ttl_wrap { text-align: center; aspect-ratio: 1 / 1; background: var(--softorange); border-radius: 50%; font-size: 150%; font-weight: bold; max-width: 100%; width: 10em; margin: 0 auto 1em; position: relative; display: flex; flex-wrap: wrap; justify-content center; align-content: center;}
.reason_ttl_wrap .icon_area { width: 75%; margin: auto;}
.reason_ttl_wrap h4 { position: absolute; bottom: 0; white-space: nowrap; font-weight: bold;width: 100vw;left: 50%; transform: translateX(-50%);  -webkit- transform:translateX(-50%);}



/*
#howto .flow_chart { font-size: clamp( 14px, 2vw, 24px ); grid-gap: 3em 2em; text-align: center; width: clamp( 300px, 96vw, 1000px ); margin: auto;}
#howto .flow_chart > li { border: solid 5px white; padding: 0.8em 1.5em; border-radius: 1.5em; position: relative; z-index: 0;}
#howto .flow_chart #q1 { width: 100%; background: #fffbcc;}
#howto .flow_chart #q2 { max-width: calc( 50% - 1em ); background: #fffbcc;}
#howto .flow_chart #q3 { max-width: calc( 50% - 1em ); background: #fffbcc;}
#howto .flow_chart #r1 { max-width: calc( 50% - 1em ); background: rgba(255,233,233,.8);}
#howto .flow_chart #r2 { max-width: calc( 50% - 1em ); background: rgba(255,233,233,.8);}
#howto .flow_chart #r3 { width: 80%; border-color: var(--brand); font-weight: bold; font-size: 150%; padding-block: 0.5em; background: white;}
#howto .flow_chart #q2 br, #howto .flow_chart #q3 br { display: none;}
.ans_yes, .ans_no { margin: 0.3em 2em;}
.ans_yes a, .ans_no a { display: block; width: 4em; line-height: 1; padding: 0.5em; color: white; position: relative; z-index: 1;}
.ans_yes a { background: var(--pink);}
.ans_no a { background: var(--sage);}
.ans_yes a::before, .ans_no a::before { content: ""; display: block; width: 0.4em; height: 3.5em; position: absolute; top: calc( 100% - 1px ); left: calc( 50% - 0.2em ); pointer-events: none;}
.ans_yes a::before { background: var(--pink);}
.ans_no a::before { background: var(--sage);}
#howto .flow_chart #q2 .ans_no a::before, #howto .flow_chart #q3 .ans_no a::before { height: 11.5em;}
.ans_yes a::after, .ans_no a::after { content: ""; display: block; width: 0; height: 0; position: absolute; top: calc( 100% + 3em ); left: calc( 50% - 0.8em ); border: solid 0.8em transparent; z-index: 3; pointer-events: none;}
.ans_yes a::after { border-top: solid 1em var(--pink);}
.ans_no a::after { border-top: solid 1em var(--sage);}
#howto .flow_chart #q2 .ans_no a::after, #howto .flow_chart #q3 .ans_no a::after { top: calc( 100% + 11em );}
@media(max-width:1099px) {
	#howto .flow_chart #q2 br, #howto .flow_chart #q3 br { display: inline;}
}
@media(max-width:799px) {
	#howto .flow_chart #q2 .ans_yes, #howto .flow_chart #q2 .ans_no, #howto .flow_chart #q3 .ans_yes, #howto .flow_chart #q3 .ans_no { margin-inline: 1em;}
}
@media(max-width:599px) {
	#howto .flow_chart #q2, #howto .flow_chart #q3, #howto .flow_chart #r1, #howto .flow_chart #r2, #howto .flow_chart #r3 { width: 100%; max-width: unset;}
	#howto .flow_chart #q1 { order: 1;}
	#howto .flow_chart #q2 { order: 2;}
	#howto .flow_chart #q3 { order: 4;}
	#howto .flow_chart #r1 { order: 3;}
	#howto .flow_chart #r2 { order: 5;}
	#howto .flow_chart #r3 { order: 6;}
	#howto .flow_chart #q2 .ans_yes, #howto .flow_chart #q2 .ans_no, #howto .flow_chart #q3 .ans_yes, #howto .flow_chart #q3 .ans_no { margin-inline: 2em;}
	.ans_no a::before, .ans_no a::after { display: none;}
}
*/




#schoolArea .secImgArea{display: flex; margin-bottom: 30px;}
.pref-school{ margin: 0 0 .5em; }
.pref-school input[type=checkbox] { display:none; }
.pref-school .acToggle { cursor:pointer;font-weight: bold;}
.pref-school>li{ position: relative; padding:25px 2%; border-bottom: 1px solid #CB064B; }
.pref-school>li:after{ font-family: FontAwesome; content: "\f067"; font-weight: 900;position: absolute; right: .5em;top: 20px;width: 30px; height: 30px;font-size: 18px; color: #CB064B;/* background: #F2ECD9;*/ border-radius: 50%;line-height: 31px; text-align: center; pointer-events:none; }
.pref-school>li.on:after{ content: "\f068"; }
.pref-school .accordion-list-child{ max-height:0; overflow:hidden; transition:max-height .3s; }
.pref-school>li.on .accordion-list-child{ max-height:3000px; margin: 20px 0 0;border-top: 1px dotted #CB064B; }
.pref-school .accordion-list-child li{position: relative;background: #FAE6ED; border-bottom: 1px dotted #CB064B; }
.pref-school .accordion-list-child li::after { content:"＋";position:absolute; top:.75em; right:.75em; width:1.6em; text-align:center;/*background:#fff;*/ border-radius:50%; color:#cb064b; pointer-events:none; }
.pref-school .accordion-list-child input:checked + li::after { content:"－"; }
.pref-school label { display:block; position:relative; padding:15px 1em; cursor:pointer; }
.pref-school .pref_detail { transition:max-height .5s; max-height:0; overflow:hidden; margin:0 10px; }
.pref-school input:checked + li .pref_detail { max-height:400px; margin:0 10px 15px; }
.pref-school .pref_detail a { font-size:12px; display:inline-block;margin:5px; padding:.5em 0.75em; color:#fff; background:#CB064B; border-radius:10px; }
.pref-school .pref_detail a.toMap { background:#fff; color:#333; }
.pref-school .pref_detail a.teikei::after { content: "提携"; display: inline-block;
	font-size: 70%; line-height: 1; padding: 2px; color: #666; background: #fff;
	margin-left: 2px; vertical-align: middle; }

.detailList01 li, .detailList02 li, .taikenList li{display: flex;justify-content: space-between;margin-bottom: 20px;align-items: center;}
.detailList01 li .imgArea, .detailList02 li .imgArea, .taikenList li .imgArea{width:300px; height: 180px;overflow: hidden;}
.detailList01 li .txtArea, .detailList01 li p, .detailList02 li p, .taikenList li .txtArea{width:calc(100% - 350px);font-size: 1.5rem;line-height: 1.7;}
.detailList01 li .txtArea dt { font-weight: bold; color: #d0121b; margin-bottom: 0.3em;}
.detailList01 li .txtArea dd { margin: 0;}


.online_bnr.flex{justify-content: center;display: flex;margin: 15px auto 30px;flex-wrap: wrap;}
.online_bnr.flex li{margin: 10px;}
.online_ttl{text-align: center;font-size: 1.7em;font-weight: bold;}
.online_sec{margin-top:40px;}
@media (max-width: 499px){
	.online_ttl{font-size: 1.4em;}
}

.banner-link { display: block; width: 100%; max-width: 430px; padding: 20px; aspect-ratio: 43/19;}
.banner-link__title { width: 70%; margin: auto; background-color: #E0261B; color: #FFFFFF; font-size: 30px; font-weight: bold; text-align: center; line-height: 1.7; position: relative;}
.banner-link__title::after { content: ""; display: block; width: 0; height: 0; position: absolute; top: calc( 100% - 1px ); left: calc( 50% - 0.3em ); border: solid 0.3em transparent; border-top: solid 0.5em #E0261B;}
.banner-link__title .yellow { color: #FFDF88;}
.banner-link__text { color: #E0261B; text-align: center; font-size: 26px; font-weight: bold; margin-top: 20px; line-height: 1.2;}
.banner-link.online01 { background: url(../images/top/bnr_online01.jpg) no-repeat center center; background-size: contain;}
.banner-link.online02 { background: url(../images/top/bnr_online02.jpg) no-repeat center center; background-size: contain;}
.banner-link__bc-text { width: 90%; border-radius: 1000px; background-color: #E0261B; margin: 12px auto 0; padding: 2px 0 1px; color: #FFF; text-align: center; font-size: 20px; font-weight: bold; line-height: 1.6; position: relative;}
.banner-link__bc-text::after { content: "\025b6"; font-weight: inherit; font-size: 80%; display: block; line-height: 1; width: 1.4em; padding: 0.2em 0.1em 0.2em 0.3em; background: #fff; color: #E0261B; border-radius: 50%; position: absolute; right: 0.5em; top: 50%; transform: translateY( -50% );}
.fix .banner-link__title{width: 80%;font-size: 26px;}
@media (max-width: 499px) {
	.banner-link { padding: 3.7vw;}
	.banner-link__title { width: 80%; font-size: 8vw; padding-top: 4px; line-height: 1.4;}
	.banner-link__text { font-size: 5vw; margin-top: 4vw;}
	.banner-link__bc-text { font-size: 4.2vw; margin-top: 1vw;}
	.fix .banner-link__title{width: 85%;font-size:5.5vw;}
	.fix .banner-link{padding: 8vw 3.7vw;}
}









.instructorList { overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;}
.instructorList li { width: 80%;max-width: 300px;display: inline-block;margin-right:20px;vertical-align: top;}
.instructorList li .imgArea { margin-bottom: 10px;}
.career { font-size: 75%;}
.instructorList dt {margin-bottom: 10px;border-bottom: 1px #aaa dotted;padding-bottom: 3px;}
.instructorList dd { white-space:normal;margin: 0;line-height: 2;}
.detailBox h3, #taikenArea h3, #instructorArea h3 { text-align: center; font-size: clamp( 16px, 2vw, 30px ); margin-bottom: 15px; font-weight: bold; color: #565656; line-height: 1.7; padding: 30px 0;}



#mainvisual .txt_area h1 .small{
    font-size: 40%;
    vertical-align: top;
}
#mainvisual .txt_area p{
    font-size: 14px;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.4;
}
.r-mark{
    font-size: 60%;
    vertical-align: top;
}
#mainvisual .txt_area .charm{
    margin-bottom: 5%;
}
@media (max-width: 999px) {
	#mainvisual .txt_area p{max-width: 300px;}
}
@media (max-width: 799px) {
	#mainvisual .txt_area p{font-size: 13px;position: absolute;bottom: -7%;max-width:inherit;}
	.campaign_bnr{margin: 10% auto 0;}
}
@media (max-width: 599px) {
	#mainvisual .txt_area p{font-size: 12px;bottom: -7%;padding-left: 1em;text-indent: -1em;line-height: 1.4;}
	.campaign_bnr{margin: 15% auto 0;}
	#mainvisual .txt_area h1 .small{font-size: 70%;}
}
@media (max-width: 499px) {
	.campaign_bnr{margin:20% auto 0;}
}
@media (max-width: 399px) {
	#mainvisual .txt_area p{bottom: -16%;}
	.campaign_bnr{margin:20% auto 0;}
}
@media (max-width: 320px) {
}