@charset "utf-8";

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size:20px;
font-weight:400;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#000;
min-width:1080px;
overflow-x:hidden;
}
@media screen and (max-width:768px){
html,body{ font-size:4vw; min-width:240px; max-width:768px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
.toppan{ font-family: "toppan-bunkyu-midashi-go-std", sans-serif;}
.futura{ font-family: "Jost", sans-serif;}
p{ line-height:1.5em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{ position: fixed; left: 0; right: 0; top: 0; z-index: 999; background: rgba(255,255,255,0); height: 48px; width: 100%; min-width: 1080px; margin: auto; display: flex; align-items: center; justify-content: space-between; transition: 0.3s;}
header figure.logo{ width: 160px; margin: 0 0 0 10px; position: relative; z-index: 3;}

header nav{ margin: 0 15px;}
header nav ul{ display: flex; align-items: center; justify-content: flex-end;}
header nav ul li{ margin: 0 10px; font-size: 0.75rem; font-weight: bold; color: #4F3C34; transition: 0.3s;}
header nav ul li a{ position: relative;}
header nav ul li a:after{ content: ""; width: 0; height: 1px; background: #4F3C34; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.3s;}
header nav ul li a:hover:after{ width: 100%;}

/* ナビCTAボタン（入会する） */
header nav ul li.nav_cta{ margin: 0 0 0 5px;}
header nav ul li.nav_cta a{ display: flex; align-items: center; justify-content: center; background: #3C7571; color: #fff !important; border-radius: 6px; padding: 0.4em 1em; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.05em; transition: 0.3s;}
header nav ul li.nav_cta a:after{ display: none;}
header nav ul li.nav_cta a:hover{ opacity: 0.8;}

body.active header{ background: rgba(255,255,255,1.0);}
body.active header ul li{ color: #3C7571;}
body.active header nav ul li a:after{ background: #3C7571;}
@media print, screen and (min-width:768px){
header nav{ display: block !important; opacity: 1.0 !important; height: auto !important;}
.smp_nav_btn{ display: none !important;}
header figure.logo{ opacity: 1.0 !important; pointer-events: all !important;}
}
@media screen and (max-width:768px){
header{ min-width: 100%; height: 10vw;}
header figure.logo{ width: auto; margin: 0 0 0 1.875vw; transition: 0.3s;}
header figure.logo img{ height: 6.25vw;}

header nav{ position: fixed; left: auto; right: -67vw; top: 0; z-index: 9; display: flex; align-items: flex-start; justify-content: center; width: 66.66vw; background: #3C7571; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 12.5vw 0; transition: 0.3s;}
header nav.active{ right: 0;}
header nav{ min-height: 100dvh !important; align-items: center; justify-content: center;}
header nav ul{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 0;}
header nav ul li{ color: #fff; margin: 1em auto; font-size: 1rem; width: 100%; text-align: left;}
header nav ul li a:after{ display: none;}

/* スマホ: ナビCTAボタン */
header nav ul li.nav_cta{ margin: 1.5em auto 0;}
header nav ul li.nav_cta a{ display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #3C7571 !important; border-radius: 6px; padding: 0.6em 1.5em; font-size: 0.9rem; font-weight: bold;}

body.active header ul li{ color: #fff;}



.smp_nav_btn{ display: flex; align-items: flex-end; justify-content: center; padding: 0; width: 10vw; height: 10vw; position: fixed; right:1.875vw; top:0; z-index:9999; transition:0.3s; cursor:pointer;}
.smp_nav_btn span{ display:block; height:1px; width:7.5vw; background:#3C7571; position:absolute; left:0; right:0; top: 50%; transform: translateY(-50%); margin:auto; transition:0.3s;}
.smp_nav_btn span:before{ content: ""; display:block; height:1px; width:7.5vw; background:#3C7571; position:absolute; bottom:1.875vw; transition:0.3s;}
.smp_nav_btn span:after{ content: ""; display:block; height:1px; width:7.5vw; background:#3C7571; position:absolute; top:calc(1.875vw + 1px); transition:0.3s;}
.smp_nav_btn.active span{ background:rgba(255,255,255,0);}
.smp_nav_btn.active span:before{ background: #fff; bottom:0; transform: rotate(30deg);}
.smp_nav_btn.active span:after{ background: #fff; top:0; transform: rotate(-30deg);}
}



/*フッター*/
footer{ padding: 120px 50px 25px; background: url("../images/footer_bg.png") center top repeat-x; background-size: 1400px; margin-top: -60px; position: relative; z-index: 5;}
footer:after{ content: ""; width: 100%; height: calc(100% - 70px); background: #fff; position: absolute; left: 0; bottom: 0; z-index: -1;}

footer dl{ display: flex; align-items: flex-end; justify-content: space-between;}
footer dl dt figure.logo{ margin: 0 0 20px; text-align: left;}
footer dl dt figure.logo img{ width: 260px;}
footer dl dt p{ font-size: 0.9rem; color: #B8847F;}
footer dl dd nav ul{ display: flex; align-items: center; justify-content: flex-end;}
footer dl dd nav ul li{ margin: 0 15px; font-size: 0.8rem; font-weight: bold; color: #B8847F; transition: 0.3s;}
footer dl dd nav ul li a:hover{ text-decoration: underline;}

footer p.copyright{ text-align: center; font-size: 0.9rem; line-height: 1em; color: #B8847F; border-top: 1px solid #B8847F; padding-top: 20px; margin-top: 30px;}
@media screen and (max-width:768px){
footer{ padding: 10% 3.75% 2.5%; background-size: 100%; margin-top: -5vw;}
footer:after{ height: calc(100% - 7.5vw);}

footer dl{ display: block;}

footer dl dt figure.logo{ margin: 0 0 2.5%; text-align: center;}
footer dl dt figure.logo img{ width: 50%;}
footer dl dt p{ font-size: 0.7rem; text-align: center;}
footer dl dd{ display: none;}
footer p.copyright{ font-size: 0.8rem; padding-top: 2.5%; margin-top: 3.75%;}
}



/*fixed_btn*/
.fixed_btn{ display: none; width: 260px; position: fixed; right: 15px; bottom: 15px; background: #fff; padding: 20px; box-shadow:rgba(0, 0, 0, 0.16) 0 0 6px 3px; border-radius: 16px; z-index: 99;}
.fixed_btn:before{ content: ""; width: 84px; height: 42px; background: url("../images/fixed_ico.png") center center; background-size: 100%; position: absolute; right: 10px; top: -10px;}
.fixed_btn h4{ margin-bottom: 10px; text-align: center; font-size: 1rem; color: #3C7571; position: relative;}
.fixed_btn h4 strong.bold01{ font-size: 1.3rem;}
.fixed_btn h4 strong.bold02{ font-size: 1.6rem;}
.fixed_btn h4:before{ content: ""; width: 2px; height: 90%; background: #3C7571; position: absolute; left: 30px; bottom: 5%; transform-origin: right bottom; transform: rotate(-33.33deg);}
.fixed_btn h4:after{ content: ""; width: 2px; height: 90%; background: #3C7571; position: absolute; right: 30px; bottom: 5%; transform-origin: left bottom; transform: rotate(33.33deg);}
.fixed_btn p{ text-align: center; font-size: 0.8rem; margin-bottom: 0.5em;}
.fixed_btn .tmpl_btn_fixed{ display: flex;}
.fixed_btn .tmpl_btn_fixed a{ display: flex; align-items: center; justify-content: center; margin: auto; background: #3B7571; color: #fff; border-radius: 8px; font-size: 0.9rem; font-weight: bold; padding: 0.66em 1em; transition: 0.3s;}
.fixed_btn .tmpl_btn_fixed a:hover{ opacity: 0.7;}
.fixed_btn .tmpl_btn_fixed a span{ display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #fff; border-radius: 50%; margin-left: 0.66em; position: relative;}
.fixed_btn .tmpl_btn_fixed a span:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 3px 0px 3px 5px; border-color: transparent transparent transparent #3C7571; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
@media screen and (max-width:768px){
.fixed_btn{ width: 40vw; right: 1.875vw; bottom: 1.875vw; padding: 2.5%;}
.fixed_btn:before{ width: 10vw; height: 5vw; right: 1.875vw; top: -1.875vw;}
.fixed_btn h4{ margin-bottom: 2.5%; font-size: 0.8rem;}
.fixed_btn h4 strong.bold01{ font-size: 1rem;}
.fixed_btn h4 strong.bold02{ font-size: 1.2rem;}

.fixed_btn h4:before{ left: 3.75vw;}
.fixed_btn h4:after{ right: 3.75vw;}
.fixed_btn p{ font-size: 0.66rem;}

.fixed_btn .tmpl_btn_fixed a{ font-size: 0.66rem; padding: 0.66em 1em; transition: 0.3s;}
.fixed_btn .tmpl_btn_fixed a span{ width: 3.75vw; height: 3.75vw;}
.fixed_btn .tmpl_btn_fixed a span:after{ border-width: 0.875vw 0px 0.875vw 1.25vw;}
}



/*メイン*/
.tmpl_content{ overflow: hidden;}
section{ width:100%; margin:0 auto; position: relative; z-index: 1;}
.tmpl_inner{ padding:0; margin:0 auto; width:1080px; position: relative; z-index: 1;}
@media screen and (max-width:768px){
.tmpl_inner{ padding:0; margin:0 auto; width:92.5%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.5em;}

/*btn*/
.tmpl_btns .tmpl_btn_primary,
.tmpl_btns .tmpl_btn_secondary{ margin-top: 10px;}
@media screen and (max-width:768px){
.tmpl_btns .tmpl_btn_primary,
.tmpl_btns .tmpl_btn_secondary{ margin-top: 2.5%;}
}

.tmpl_btn_primary{ display: flex; margin-top: 60px;}
.tmpl_btn_primary a{ display: flex; align-items: center; justify-content: center; margin: auto; background: #3B7571; color: #fff; border-radius: 8px; font-size: 1rem; font-weight: bold; padding: 0.75em 1.25em; transition: 0.3s;}
.tmpl_btn_primary a:hover{ opacity: 0.7;}
.tmpl_btn_primary a span{ display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #fff; border-radius: 50%; margin-left: 0.66em; position: relative;}
.tmpl_btn_primary a span:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 3px 0px 3px 5px; border-color: transparent transparent transparent #3C7571; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
@media screen and (max-width:768px){
.tmpl_btn_primary{ margin-top: 10%;}
.tmpl_btn_primary a{ font-size: 0.8rem; padding: 0.75em 1.25em; transition: 0.3s;}
.tmpl_btn_primary a span{ width: 3.75vw; height: 3.75vw;}
.tmpl_btn_primary a span:after{ border-width: 0.875vw 0px 0.875vw 1.25vw;}
}

.tmpl_btn_secondary{ display: flex; margin-top: 60px;}
.tmpl_btn_secondary a{ display: flex; align-items: center; justify-content: center; margin: auto; background: #fff; color: #3B7571; border: 2px solid #3B7571; border-radius: 8px; font-size: 1rem; font-weight: bold; padding: 0.75em 1.25em; transition: 0.3s;}
.tmpl_btn_secondary a:hover{ opacity: 0.7;}
.tmpl_btn_secondary a span{ display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #3B7571; border-radius: 50%; margin-left: 0.66em; position: relative;}
.tmpl_btn_secondary a span:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 3px 0px 3px 5px; border-color: transparent transparent transparent #fff; position: absolute; left: 55%; top: 50%; transform: translateX(-50%) translateY(-50%);}
@media screen and (max-width:768px){
.tmpl_btn_secondary{ margin-top: 10%;}
.tmpl_btn_secondary a{ font-size: 0.8rem; padding: 0.75em 1.25em; transition: 0.3s;}
.tmpl_btn_secondary a span{ width: 3.75vw; height: 3.75vw;}
.tmpl_btn_secondary a span:after{ border-width: 0.875vw 0px 0.875vw 1.25vw;}
}

.tmpl_btn_tertiary{ display: flex; margin-top: 60px;}
.tmpl_btn_tertiary a{ display: flex; align-items: center; justify-content: center; margin: auto; background: #3B7571; color: #fff; border: 2px solid #fff; border-radius: 8px; font-size: 1rem; font-weight: bold; padding: 0.75em 1.25em; transition: 0.3s;}
.tmpl_btn_tertiary a:hover{ opacity: 0.7;}
.tmpl_btn_tertiary a span{ display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #fff; border-radius: 50%; margin-left: 0.66em; position: relative;}
.tmpl_btn_tertiary a span:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 3px 0px 3px 5px; border-color: transparent transparent transparent #3C7571; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
@media screen and (max-width:768px){
.tmpl_btn_tertiary{ margin-top: 10%;}
.tmpl_btn_tertiary a{ font-size: 0.8rem; padding: 0.75em 1.25em; transition: 0.3s;}
.tmpl_btn_tertiary a span{ width: 3.75vw; height: 3.75vw;}
.tmpl_btn_tertiary a span:after{ border-width: 0.875vw 0px 0.875vw 1.25vw;}
}



@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:768px){
.pc{ display:none !important;}
}

/*CTA LINE相談リンク*/
.tmpl_cta_line{ text-align: center; margin-top: 15px;}
.tmpl_cta_line a{ display: inline-flex; align-items: center; font-size: 0.85rem; color: #06C755; font-weight: 500; transition: 0.3s;}
.tmpl_cta_line a:hover{ opacity: 0.7;}
.tmpl_cta_line a svg{ width: 20px; height: 20px; margin-right: 0.4em; flex-shrink: 0;}

/*SNSバー（CTA下・フッター上）*/
.tmpl_sns_bar{ display: flex; align-items: center; justify-content: center; gap: 24px; padding: 30px 0; background: #fff; position: relative; z-index: 10;}
.tmpl_sns_bar a{ display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #F4ECE7; transition: 0.3s;}
.tmpl_sns_bar a:hover{ opacity: 0.7; transform: scale(1.1);}
.tmpl_sns_bar a svg{ width: 24px; height: 24px; fill: currentColor;}

/*固定ボタンLINEリンク*/
.tmpl_fixed_line{ display: flex; align-items: center; justify-content: center; margin-top: 8px; font-size: 0.7rem; color: #06C755; font-weight: 500; transition: 0.3s;}
.tmpl_fixed_line:hover{ opacity: 0.7;}
.tmpl_fixed_line svg{ width: 14px; height: 14px; margin-right: 0.3em; flex-shrink: 0;}

@media screen and (max-width:768px){
.tmpl_cta_line{ margin-top: 5%;}
.tmpl_cta_line a{ font-size: 0.75rem;}
.tmpl_cta_line a svg{ width: 18px; height: 18px;}
.tmpl_sns_bar{ gap: 20px; padding: 20px 0;}
.tmpl_sns_bar a{ width: 42px; height: 42px;}
.tmpl_sns_bar a svg{ width: 20px; height: 20px;}
.tmpl_fixed_line{ font-size: 0.6rem; margin-top: 5px;}
.tmpl_fixed_line svg{ width: 12px; height: 12px;}
}