@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900?family=Montserrat:wght@100..900&display=swap');
@import url("https://use.typekit.net/oid8lyh.css");

/* 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: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
font-weight: 500;
text-align:left;
color:#313131;
min-width:900px;
}
@media screen and (max-width:768px){
html,body{ font-size:4.5vw; 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*/
.montserrat{ font-family: "gf_Montserrat variant0", sans-serif;}
.din{ font-family: "din-2014-narrow", sans-serif;}
p{ line-height:1.75em; 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;}

.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}
.bg_y{ background: linear-gradient(to bottom, rgba(255,231,153,0) 0%, rgba(255,231,153,0) 50%, rgba(255,231,153,1) 51%, rgba(255,231,153,1) 100%);}

.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;}
@media screen and (max-width:768px){
.opa:hover{ opacity: 1.0;}
}



/*ヘッダー*/
header #header{ display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #E5E5E5;}
header #header #h_logo img{ height: 30px;}
header #header ul{ display: flex; align-items: center; justify-content: flex-end;}
header #header ul.pc li{ margin-left: 10px;}
header #header ul.pc li.tel{ display: flex; flex-direction: column; align-items: center; justify-content: center; color: #3C8D6F;}
header #header ul.pc li.tel span{ font-size: 0.6rem; line-height: 1em; font-weight: bold; margin-bottom: 0.5em;}
header #header ul.pc li.tel a{ font-size: 1.6rem; line-height: 1em; font-weight: bold; pointer-events: none;}
header #header ul.pc li.tel a:before{ display: inline-block; vertical-align: middle; line-height: 0; margin-right: 4px; content: ""; width: 30px; height: 30px; background: url("../images/ico/h_tel.png"); background-size: 100%; position: relative; top: -2px;}
header #header ul.pc li.mail a{ display: flex; align-items: center; justify-content: center; width: 180px; height: 48px; background: #EF2515; color: #fff; border-radius: 48px; font-size: 0.7rem; line-height: 1em; font-weight: bold;}
header #header ul.pc li.mail a span:before{ display: inline-block; vertical-align: middle; line-height: 0; margin-right: 4px; content: ""; width: 30px; height: 30px; background: url("../images/ico/h_mail_wh.png"); background-size: 100%; position: relative;}
header #header ul.pc li.store a{ display: flex; align-items: center; justify-content: center; width: 160px; height: 48px; background: #EF2515; color: #fff; border-radius: 48px; font-size: 0.85rem; line-height: 1em; font-weight: bold;}
header #header ul.pc li.store a span:before{ display: inline-block; vertical-align: middle; line-height: 0; margin-right: 8px; content: ""; width: 30px; height: 30px; background: url("../images/ico/h_store_wh.png"); background-size: 100%; position: relative;}
@media screen and (max-width:768px){
header #header{ padding: 0;}
header #header #h_logo{ padding: 0; line-height: 0;}
header #header #h_logo img{ height: 10vw; width: auto; padding: 2.5vw;}
header #header ul.sp li{ width: 25vw; margin: 0; border-left: 1px solid #E5E5E5;}
header #header ul.sp li a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 12.5vw; padding-top: 7.5vw; font-size: 0.5rem; font-weight: bold; color: #313131; position: relative;}
header #header ul.sp li.mail a:before{ content: ""; margin: 0 auto; width: 7.5vw; height: 7.5vw; background: url("../images/ico/h_mail.png"); background-size: 100%; position: absolute; left: 0; right: 0; top: 1.25vw;}
header #header ul.sp li.tel a:before{ content: ""; margin: 0 auto; width: 6.25vw; height: 6.25vw; background: url("../images/ico/h_tel.png"); background-size: 100%; position: absolute; left: 0; right: 0; top: 1.25vw;}
header #header ul.sp li.store a:before{ content: ""; margin: 0 auto; width: 7.5vw; height: 7.5vw; background: url("../images/ico/h_store.png"); background-size: 100%; position: absolute; left: 0; right: 0; top: 1.25vw;}
}

header #important{ padding: 20px;}
header #important a{ display: flex; align-items: center; justify-content: center; text-align: center; background: #ffeeb0; color: #834f1c; text-decoration: underline; font-size: 1.1rem; line-height: 1em; padding: 1em; border-radius: 8px;}
header #important a:before{ content: ""; width: 24px; height: 24px; background: url("../images/important/caution_brown.png"); background-size: 100%; line-height: 0; margin-right: 20px;}
header #important a:after{ content: ""; width: 20px; height: 20px; background: url("../images/important/important_arrow.png"); background-size: 100%; line-height: 0; margin-left: 60px;}
@media screen and (max-width:768px){
header #important{ padding: 3.75vw;}
header #important a{ font-size: 0.6rem; padding: 1em; border-radius: 1.25vw; position: relative;}
header #important a:before{ width: 3.75vw; height: 3.75vw; position: absolute; left: 5vw; top: 50%; transform: translateY(-50%);}
header #important a:after{ width: 3.75vw; height: 3.75vw; position: absolute; right: 5vw; top: 50%; transform: translateY(-50%);}
}



/*ハンバーガーメニュー用調整*/
header{ padding-top: 78px;}
header #header{ background: #fff; position: fixed; left: 0; right: 0; top: 0; z-index: 99;}
header #header{ padding: 15px 120px 15px 20px;}
header #header ul.pc li.tel span{ margin-bottom: 0.2em;}
@media screen and (max-width:768px){
header{ padding-top: 12.5vw;}
header #header{ padding: 0 27.5vw 0 0;}
header #header ul.sp li.mail{ width: 22vw;}
header #header ul.sp li.tel{ width: 20vw;}
header #header ul.sp li.store{ width: 20vw; border-right: 1px solid #E5E5E5;}
}

#h_btn{ position: fixed; right: 0; top: 0; z-index: 103; width: 78px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #3C8D6F; color: #fff; font-size: 0.65rem; font-weight: bold; padding-top: 1em; cursor: pointer; transition: 0.3s;}
#h_btn strong{ line-height: 1em; margin-top: 1.5em;}
#h_btn strong:after{ content: "メニュー";}
#h_btn span{ display:block; height:1px; width:22px; background:#fff; position:relative; margin: 0 auto; transition:0.3s;}
#h_btn span:before{ content: ""; display:block; height:1px; width:100%; background:#fff; position:absolute; bottom:9px; transition:0.3s;}
#h_btn span:after{ content: ""; display:block; height:1px; width:100%; background:#fff; position:absolute; top:9px; transition:0.3s;}
#h_btn.active span{ background:rgba(255,255,255,0);}
#h_btn.active span:before{ bottom:0; transform: rotate(45deg);}
#h_btn.active span:after{ top:0; transform: rotate(-45deg);}
#h_btn.active strong:after{ content: "閉じる";}
@media screen and (max-width:768px){
#h_btn{ right: 1.25vw; top: 1.875vw; width: 25vw; height: 8.75vw; flex-direction: row; font-size: 0.8rem; padding: 0; border-radius: 1.25vw;}
#h_btn strong{ line-height: 1em; margin-top: 0;}
#h_btn span{ display:block; height:2px; width:3.75vw; margin: 0 1.25vw 0 0;}
#h_btn span:before{ height:2px; bottom:1.5vw;}
#h_btn span:after{ height:2px; top:1.5vw;}
#h_btn.active{ flex-direction: column; background: #fff; color: #7AAE9B; width: 12.5vw; height: 12.5vw; right: 0; top: 0;}
#h_btn.active strong{ line-height: 1em; margin-top: 0.75em;}
#h_btn.active span:before{ background: #7AAE9B;}
#h_btn.active span:after{ background: #7AAE9B;}
}

#h_nav{ display: none; position: fixed; right: 0; top: calc(78px + 1px); z-index: 101; width: 960px; background: #fff; padding: 10px 20px 30px;}
@media print, screen and (min-width:769px){
#h_nav{ height: auto !important;}
}
#h_nav_in{ display: flex; flex-direction: row-reverse;}
#h_nav nav ul{ display: block; width: 470px;}
#h_nav nav ul li{ font-size: 1rem; line-height: 1em; border-bottom: 1px solid #E0E0E0; position: relative;}
#h_nav nav ul li:before{ content: ""; width: 34px; height: 34px; background: url("images/h_nav/ico01.png") center center no-repeat; background-size: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#h_nav nav ul li:nth-child(1):before{ background-image: url("../images/h_nav/ico01.png");}
#h_nav nav ul li:nth-child(2):before{ background-image: url("../images/h_nav/ico02.png");}
#h_nav nav ul li:nth-child(3):before{ background-image: url("../images/h_nav/ico03.png");}
#h_nav nav ul li:nth-child(4):before{ background-image: url("../images/h_nav/ico04.png");}
#h_nav nav ul li:nth-child(5):before{ background-image: url("../images/h_nav/ico05.png");}
#h_nav nav ul li:nth-child(6):before{ background-image: url("../images/h_nav/ico06.png");}
#h_nav nav ul li:nth-child(7):before{ background-image: url("../images/h_nav/ico07.png");}
#h_nav nav ul li span.arrow{ line-height: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#h_nav nav ul li span.arrow img{ width: 14px; transform: rotate(-90deg);}
#h_nav nav ul li a{ display: block; padding: 1em 0.5em 1em 50px; transition: 0.3s;}
#h_nav nav ul li a:hover{ color: #7AAE9B;}
#h_nav #h_nav_info{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 350px; margin: 0 auto;}
#h_nav #h_nav_info h4{ width: auto; text-align: center; font-size: 0.9rem; letter-spacing: 0; margin-bottom: 15px; position: relative;}
#h_nav #h_nav_info h4:before{ content: ""; width: 1px; height: 100%; background: #313131; position: absolute; left: -1em; bottom: 0; transform: rotate(-22.5deg);}
#h_nav #h_nav_info h4:after{ content: ""; width: 1px; height: 100%; background: #313131; position: absolute; right: -1em; bottom: 0; transform: rotate(22.5deg);}

#h_nav #h_nav_info ul{ display: flex; flex-direction: column;}
#h_nav #h_nav_info ul li{ width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; padding: 0; margin-top: 15px; border-radius: 12px;}
#h_nav #h_nav_info ul li:first-child{ margin-top: 0;}
#h_nav #h_nav_info ul li a{ display: flex; justify-content: center; margin: 0; width: 100%; height: 70px; background: #EF3F15; color: #fff; border-bottom: 2px solid #B42706; padding: 12px; border-radius: 12px;}
#h_nav #h_nav_info ul li.store a{ background: #287C4B; border-color: #114827;}
#h_nav #h_nav_info ul li dl{ display: flex; align-items: center; justify-content: center; margin: auto; width: 100%;}
#h_nav #h_nav_info ul li dl dt{ display: flex; align-items: center; justify-content: center; width: 70px; border-right: 1px solid #fff;}
#h_nav #h_nav_info ul li dl dt img{ width: 35px;}
#h_nav #h_nav_info ul li dl dd{ flex: 1; font-size: 1rem; line-height: 1em; font-weight: bold; color: #fff; text-align: center; text-shadow: 0px 1px 2px rgba(0,0,0,0.16);}
@media screen and (max-width:768px){
#h_nav{ top: calc(12.5vw + 1px); width: 100%; padding: 0 0 2.5vw; background: #fff; overflow-x: hidden; overflow-y: auto;}
#h_nav_in{ flex-direction: column; padding-bottom: 7.5vw;}
#h_nav nav ul{ display: block; background: #fff; width: 100%; padding: 0 3.75%; margin: auto;}
#h_nav nav ul li{ font-size: 1.1rem;}
#h_nav nav ul li:before{ width: 7.5vw; height: 7.5vw;}
#h_nav nav ul li span.arrow img{ width: 2.5vw;}
#h_nav nav ul li a{ padding-left: 10vw;}

#h_nav #h_nav_info:before{ content: ""; width: calc(100% + 5vw); height: 100%; position: absolute; left: -2.5vw; top: 0; background: #F2F3EE; z-index: -3;}
#h_nav #h_nav_info:after{ content: ""; width: 100%; height: calc(100% - 5vw); position: absolute; left: 0; top: 2.5vw; background: #fff; z-index: -1; border-radius: 1.25vw;}
#h_nav #h_nav_info{ width: 95%; margin: 2.5% auto; padding: 7.5% 2.5%; position: relative;}
#h_nav #h_nav_info h4{ font-size: 0.9rem; margin-bottom: 3.75%;}

#h_nav #h_nav_info ul{ display: flex; flex-direction: row; justify-content: center; width: 100%;}
#h_nav #h_nav_info ul li{ margin-top: 0; border-radius: 15vw; width: 42.5vw; margin: 0 2.5vw;}
#h_nav #h_nav_info ul li a{ height: 12.5vw; padding: 1.875vw 2.5vw; border-radius: 15vw;}
#h_nav #h_nav_info ul li dl dt{ display: flex; align-items: center; justify-content: center; border: none; width: auto;}
#h_nav #h_nav_info ul li dl dt img{ height: 6.25vw;}
#h_nav #h_nav_info ul li dl dd{ flex: initial; margin-left: 1.875vw; display: flex; align-items: center; justify-content: center; width: auto; font-size: 0.9rem; line-height: 1em; font-weight: bold; padding-bottom: 0.125em; text-shadow: 0px 1px 2px rgba(0,0,0,0.16);}
}



/*ヘッダー固定別パターン用*/
header #header{ background: #fff; position: absolute; left: 0; right: 0; top: 0; z-index: 99;}
#h_nav{ display: none; position: fixed; right: 0; top: 0; z-index: 101; width: 960px; background: #fff; padding: 80px 20px 30px;}
@media screen and (max-width:768px){
#h_nav{ top: 0; width: 100%; padding: 12.5vw 0 2.5vw; background: #fff; overflow-x: hidden; overflow-y: auto;}
}



/*fv*/
#fv{ padding: 0;}
#fv h1{ background: url("../images/fv/fv_bg.jpg") center center no-repeat; background-size: cover; text-align: center; padding: 30px 0 15px;}
#fv h1 img{ width: 724px;}
#fv .fv_img{ display: flex; margin: auto;}
#fv .fv_img figure{ width: 50%;}
#fv .fv_img figure img{ width: 100%;}
#fv p{ background: #7AAE9B; color: #fff; font-size: 1.6rem; line-height: 1em; font-weight: bold; text-align: center; padding: 0.5em 0 0.75em;}
@media screen and (max-width:768px){
#fv h1{ padding: 0;}
#fv h1 img{ width: 100%;}
#fv p{ font-size: 0.75rem;}
}

#fv_bottom{ background: #F8FAE7; padding: 5px 0 30px;}
#fv_bottom ul{ display: flex; align-items: flex-end; width: 900px; margin: auto; gap: 25px;}
#fv_bottom p{ text-align: right; width: 900px; margin: 5px auto 0; font-size: 1rem; font-weight: bold;}
@media screen and (max-width:768px){
#fv_bottom{ padding: 2.5% 0 7.5%;}
#fv_bottom ul{ width: 92.5%; gap: 3.75vw;}
#fv_bottom p{ width: 92.5%; margin: 2.5% auto 0; font-size: 0.6rem;}
}


/*camp_ban*/
#camp_tit{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: 30px;}
#camp_tit img{ height: 39px;}
#camp_tit p{ font-size: 0.9rem; margin-top: 0.75em;}
#camp_ban{ margin: 20px auto 40px; max-width: 750px;}
#camp_ban a{ display: block; position: relative;}
@media screen and (max-width:768px){
#camp_tit{ margin-bottom: 3.75%;}
#camp_tit img{ height: 6.25vw;}
#camp_tit p{ font-size: 0.75rem;}
#camp_ban{ margin: 3.75% auto 7.5%; width: 92.5%;}
}

/*h_info*/
#h_info{ padding: 80px 0;}
#h_info h3{ text-align: center; font-size: 1.6rem; margin-bottom: 30px;}
#h_info h3 strong{ color: #C8982D;}
#h_info ul{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 750px; margin: -5px auto;}
#h_info ul li{ margin: 5px 10px;}
#h_info ul li a{ display: flex; align-items: center; width: 230px; height: 110px; font-size: 1.05rem; font-weight: bold; background: #7AAE9B; color: #fff; padding: 12px 24px; border-radius: 8px; position: relative;}
#h_info ul li a span{ display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 3px solid #7AAE9B; background: #fff; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); z-index: 3; border-radius: 50%;}
#h_info ul li a span img{ height: 16px;}
@media screen and (max-width:768px){
#h_info{ padding: 7.5% 0; width: 100%;}
#h_info h3{ font-size: 1rem; margin-bottom: 3.75%;}
#h_info ul{ width: 100%; margin: -1.25vw 0; padding: 1.875vw;}
#h_info ul li{ width: calc(50% - 3.75vw); margin: 1.25vw 1.875vw;}
#h_info ul li a{ width: 100%; height: 17.5vw; font-size: 0.9rem; padding: 5vw; border-radius: 2.5vw;}
#h_info ul li a span{ width: 7.5vw; height: 7.5vw; right: -1.875vw;}
#h_info ul li a span img{ height: 2.5vw;}
}



/*フッター*/
#jpx{ background: #F7F7F7; padding: 15px 0;}
#jpx dl{ display: flex; align-items: center; justify-content: center;}
#jpx dl dt img{ width: 40px;}
#jpx dl dd{ margin-left: 30px;}
#jpx dl dd p{ font-size: 0.6rem; line-height: 1.5em;}
@media screen and (max-width:768px){
#jpx{ padding: 2.5% 0;}
#jpx dl dt img{ width: 7.5vw;}
#jpx dl dd{ margin-left: 3.75%;}
#jpx dl dd p{ font-size: 0.6rem;}
}

.notice_for_ai{ background: #353535; color: #fff; padding: 1em; font-size: 0.7rem; text-align: center;}
.notice_for_ai p{ line-height: 1.5em;}
footer{ background: #4D4D4D; color: #fff; padding: 40px 0; text-align: center;}
footer ul{ display: flex; align-items: center; justify-content: center; font-size: 0.5rem;}
footer ul li:not(:last-child):after{ content: "／"; margin: 0 1em;}
footer ul li a:hover{ text-decoration: underline;}
footer figure.logo{ margin: 30px auto;}
footer figure.logo img{ width: 100px;}
footer p{ font-size: 0.55rem;}
footer p.copyright{ margin-top: 30px;}
@media screen and (max-width:768px){
.notice_for_ai{ padding: 1em; font-size: 0.6rem;}
footer{ padding: 10% 10% 20%;}
footer ul{ font-size: 0.5rem;}
footer figure.logo{ margin: 7.5% auto 7.5%;}
footer figure.logo img{ width: 30%;}
footer p{ font-size: 0.55rem;}
footer p.copyright{ margin-top: 10%;}
}







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