@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* 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;
text-align:left;
color:#392D1F;
background:#FDFAF7;
min-width:1200px;
}
@media screen and (max-width:767px){
html,body{ font-size:4.5vw; min-width:240px; max-width:767px;}
}

/*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*/
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;}

.rubik{ font-family: "Rubik", sans-serif;}
.gothic{ font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;}
.white{ color:#fff;}
.black{ color:#392D1F;}

.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;}



/*ヘッダー*/
body.hidden{ overflow: hidden;}
#wrapper{ padding-top: 104px;}
header{ position: fixed; left: 0; right: 0; top: 0; z-index: 999; width: 100%; min-width: 1200px; margin: auto; display: flex; align-items: flex-end; justify-content: space-between; padding: 20px; transition: 0.3s;}
header.scroll{ background: rgba(255,255,255,0.9);}
header h1 a{ display: flex; align-items: flex-end;}
header h1 img{ height: 64px;}
header h1 span{ font-size: 0.9rem; letter-spacing: 0; font-weight: 700; margin-left: 1em;}
header nav{ display: flex; align-items: flex-end; justify-content: flex-end; font-weight: bold;}
header nav ul{ display: flex; margin: 0 12px 0 -12px;}
header nav ul li{ margin: 0 12px;}
header nav ul li a{ display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.3s;}
header nav ul li a strong{ font-size: 0.8rem; line-height: 1em; margin: 8px 0 4px;}
header nav ul li a svg{ width: 40px; height: 28px;}
header nav ul li a svg *{ fill: #392D1F; transition: 0.3s;}
header nav ul li a:hover,
header nav ul li.active a{ color: #0275C2;}
header nav ul li a:hover svg *,
header nav ul li.active a svg *{ fill: #0275C2;}
header nav ul li.parent{ position: relative;}
header nav ul li.parent:hover{ color: #0275C2;}
header nav ul li.parent:hover svg *{ fill: #0275C2;}
header nav ul li.parent:hover ul.child{ pointer-events: all; opacity: 1.0;}
header nav ul li.parent ul.child{ display: block; width: 16em; font-size: 0.8rem; padding: 0; margin: 0; position: absolute; left: 50%; top: 56px; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: 0.3s;}
header nav ul li.parent ul.child li{ margin: 4px 0 0;}
header nav ul li.parent ul.child li a{ background: #0275C2; color: #fff; padding: 0.5em; transition: 0.3s;}
header nav ul li.parent ul.child li.active a,
header nav ul li.parent ul.child li a:hover{ opacity: 0.7;}
header #h_entry a{ display: flex; align-items: center; justify-content: center; height: 64px; background: #0275C2; color: #fff; padding: 0 1.25em; font-size: 0.9rem; border-radius: 8px;}
@media print, screen and (min-width:768px){
header nav{ display: flex !important; opacity: 1.0 !important; height: auto !important;}
#smp_nav_btn{ display: none !important;}
}
@media screen and (max-width:767px){
#wrapper{ padding-top: 15vw;}
header{ min-width: 100%; padding: 3.75vw;}
header h1 a{ display: flex; align-items: flex-end;}
header h1 img{ height: 7.5vw;}
header h1 span{ font-size: 0.8rem;}
header nav{ display: none; background: #FDFAF7; width: 100%; height: 100%; min-height: 100dvh; /*display: flex;*/ flex-direction: column; align-items: center; justify-content: flex-start; position: absolute; left: 0; top: 0; z-index: -1; padding: 15vw 3.75vw 5vw; overflow-x: hidden; overflow-y: auto; overflow-y: auto;}
header nav ul{ display: block; width: 100%; margin: auto;}
header nav ul li{ display: flex; flex-direction: column; align-items: flex-start; padding: 3.75vw; border-bottom: 1px solid #392D1F; margin: 0;}
header nav ul li a{ flex-direction: row; justify-content: flex-start;}
header nav ul li a strong{ font-size: 1rem; margin: 0 0 0 1em;}
header nav ul li a svg{ width: 8vw; height: 5.6vw;}
header nav ul li.parent{ position: relative;}
header nav ul li.parent:hover{ color: #392D1F;}
header nav ul li.parent:hover svg *{ fill: #392D1F;}
header nav ul li.parent a:hover svg *{ fill: #0275C2;}
header nav ul li.parent span{ width: 5vw; height: 5vw; position: absolute; right: 3.75vw; top: 3.75vw; cursor: pointer;}
header nav ul li.parent span:before{ content: ""; width: 100%; height: 2px; background: #392D1F; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
header nav ul li.parent span:after{ content: ""; width: 100%; height: 2px; background: #392D1F; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(90deg); transition: 0.3s;}
header nav ul li.parent.open{ color: #0275C2;}
header nav ul li.parent.open svg *{ fill: #0275C2;}
header nav ul li.parent.open span:before{ background: #0275c2;}
header nav ul li.parent.open span:after{ opacity: 0; transform: translateX(-50%) translateY(-50%) rotate(0);}
header nav ul li.parent ul.child{ display: none; /*display: block;*/ width: 100% !important; font-size: 0.8rem; position: static; transform: none; pointer-events: all; opacity: 1.0;}
header nav ul li.parent ul.child.open{ display: block;}
header nav ul li.parent ul.child li{ margin-left: 10vw; margin-top: 0; padding: 0.5em 0.75em; border-bottom: 1px dotted #392D1F;}
header nav ul li.parent ul.child li:first-child{ border-top: 1px dotted #392D1F; margin-top: 1em;}
header nav ul li.parent ul.child li a{ background: none; color: #392D1F; padding: 0;}
header nav ul li.parent ul.child li.active a,
header nav ul li.parent ul.child li a:hover{ color: #0275C2; opacity: 1.0;}
header #h_entry{ width: 100%; margin-top: 7.5vw;}
header #h_entry a{ font-size: 1.2rem; height: 12.5vw; border-radius: 1.25vw;}

#smp_nav_btn{ display: flex; align-items: flex-end; justify-content: center; padding: 0; width: 7.5vw; height: 15vw; position: fixed; right:3.75vw; top:0; z-index:9999; transition:0.3s; cursor:pointer;}
#smp_nav_btn span{ display:block; height:1px; width:7.5vw; background:#392D1F; 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:100%; background:#392D1F; position:absolute; bottom:1.875vw; transition:0.3s;}
#smp_nav_btn span:after{ content: ""; display:block; height:1px; width:100%; background:#392D1F; 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{ bottom:0; transform: rotate(45deg);}
#smp_nav_btn.active span:after{ top:0; transform: rotate(-45deg);}
}

/*entry*/
#h_entry a{ cursor: pointer;}
#entry_modal{ display: none; /*display: flex;*/ align-items: center; justify-content: center; width: 100vw; height: 100vh; margin: 0; padding: 0; position: fixed; left: 0; right: 0; top: 0; z-index: 9999;}
#entry_modal_bg{ width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: absolute; left: 0; top: 0; z-index: -1;}
#entry_modal_cont{ background: #fff; width: 920px; padding: 80px; position: relative; border-radius: 8px;}
#entry_modal_cont .close_btn{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 1rem; font-weight: bold; background: #0275C2; color: #fff; position: absolute; right: 8px; top: 8px; border-radius: 4px; cursor: pointer; transition: 0.3s;}
#entry_modal_cont .close_btn:hover{ opacity: 0.7;}
#entry_modal_cont .close_btn span{ width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg);}
#entry_modal_cont .close_btn span:before{ content: ""; width: 100%; height: 3px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
#entry_modal_cont .close_btn span:after{ content: ""; width: 100%; height: 3px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(90deg);}
#entry_modal figure.btn{ margin: 0 auto 40px;}
#entry_modal figure.btn a{ width: 420px; position: relative;}
#entry_modal figure.btn a span.ico{ position: absolute; right: 20px; line-height: 0;}
#entry_modal figure.btn a span.ico svg{ fill: #fff; stroke: #fff; width: 6px; height: 12px;}
#entry_modal figure.btn a span.ico svg *{ fill: #fff; stroke: #fff;}
#entry_modal p{ text-align: center; font-size: 0.9rem; font-weight: bold; margin-bottom: 40px;}
#entry_modal ul{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; margin: -10px 0;}
#entry_modal ul li{ width: calc(50% - 20px); margin: 10px;}
#entry_modal ul li a{ border: 2px solid #009FB9; background: #fff; display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; padding-bottom: 4px; border-radius: 16px; position: relative; transition: 0.3s;}
#entry_modal ul li a span{ font-size: 1.1rem; font-weight: 600;}
#entry_modal ul li a strong{ font-size: 1.2rem; font-weight: 700; color: #009FB9; transition: 0.3s;}
#entry_modal ul li a svg{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 6px; height: 12px;}
#entry_modal ul li a svg *{ fill: #009FB9; stroke: #009FB9; transition: 0.3s;}
#entry_modal ul li a:hover{ background: #009FB9; color: #fff;}
#entry_modal ul li a:hover strong{ color: #fff;}
#entry_modal ul li a:hover svg *{ fill: #fff; stroke: #fff;}
@media screen and (max-width:767px){
#entry_modal_cont{ width: 92.5%; padding: 12.5% 3.75% 7.5%;}
#entry_modal_cont .close_btn{ width: 7.5vw; height: 7.5vw; right: 1.25vw; top: 1.25vw;}
#entry_modal figure.btn{ margin: 0 auto 5%;}
#entry_modal figure.btn a{ width: 92.5%; height: 12.5vw;}
#entry_modal figure.btn a span.ico{ right: 2.5vw;}
#entry_modal figure.btn a span.ico svg{ width: 1.25vw; height: 2.5vw;}
#entry_modal p{ font-size: 0.8rem; margin-bottom: 5%;}
#entry_modal ul{ display: block; width: 92.5%; margin: 0 auto;}
#entry_modal ul li{ width: 100%; margin: 5% auto 0;}
#entry_modal ul li a{ border: 2px solid #009FB9; height: 12.5vw; padding-bottom: 4px; border-radius: 2.5vw;}
#entry_modal ul li a span{ font-size: 1.1rem;}
#entry_modal ul li a strong{ font-size: 1.2rem;}
}

/*フッター*/
#entry_follow{ background: url("../images/entry_bg.png") center center; background-size: cover; margin-top: 120px; padding: 80px 0;  border-radius: 60px 60px 0 0;}
#entry_follow h3{ text-align: center; font-size: 1.9rem; margin-bottom: 15px;}
#entry_follow p{ text-align: center; font-size: 0.9rem; font-weight: bold; margin-bottom: 40px;}
#entry_follow ul{ display: flex; align-items: center; justify-content: center; width: 1040px; margin: auto;}
#entry_follow ul li{ width: calc(33.33% - 20px); margin: 0 10px;}
#entry_follow ul li a{ border: 2px solid #009FB9; background: #fff; display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; padding-bottom: 4px; border-radius: 16px; position: relative; transition: 0.3s;}
#entry_follow ul li a span{ font-size: 1.1rem; font-weight: 600;}
#entry_follow ul li a strong{ font-size: 1.2rem; font-weight: 700; color: #009FB9; transition: 0.3s;}
#entry_follow ul li a svg{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 6px; height: 12px;}
#entry_follow ul li a svg *{ fill: #009FB9; stroke: #009FB9; transition: 0.3s;}
#entry_follow ul li a:hover{ background: #009FB9; color: #fff;}
#entry_follow ul li a:hover strong{ color: #fff;}
#entry_follow ul li a:hover svg *{ fill: #fff; stroke: #fff;}
@media screen and (max-width:767px){
#entry_follow{ margin-top: 20%; padding: 10% 1.875vw;  border-radius: 10vw 10vw 0 0;}
#entry_follow h3{ font-size: 1.4rem; margin-bottom: 2.5%;}
#entry_follow p{ font-size: 0.8rem; margin-bottom: 5%;}
#entry_follow ul{ display: block; width: 80%;}
#entry_follow ul li{ width: 100%; margin: 5% auto 0;}
#entry_follow ul li a{ border: 2px solid #009FB9; height: 15vw; padding-bottom: 4px; border-radius: 2.5vw;}
#entry_follow ul li a span{ font-size: 1.1rem;}
#entry_follow ul li a strong{ font-size: 1.2rem;}
}

footer{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: #66C5D5; color: #fff; padding: 60px 0 60px; font-weight: bold;}
footer .f_logo a{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
footer .f_logo img{ width: 128px;}
footer .f_logo span{ display: block; font-size: 0.8rem; font-weight: bold; line-height: 1em;}
footer p.url{ font-size: 1rem; font-weight: 400; line-height: 1em; text-align: center; margin: 20px auto 0;}
footer p.copyright{ font-size: 1rem; font-weight: 400; line-height: 1em; text-align: center; margin: 15px auto 0;}
@media screen and (max-width:767px){
footer{ padding: 10% 0 10%;}
footer .f_logo img{ width: 40%;}
footer .f_logo span{ font-size: 0.75rem;}
footer p.url{ font-size: 0.9rem; margin-top: 5%;}
footer p.copyright{ font-size: 0.9rem; margin-top: 3.75%;}
}

/*メイン*/
#wrapper{ position: relative; z-index: 1;}
#wrapper:before{ content: ""; width: 100%; height: 100%; background: url("../images/bg.png") center top repeat-y; background-size: 1920px auto; position: absolute; left: 0; right: 0; top: -150px; margin: auto; z-index: -1;}
#wrapper:before{ opacity: 0; top: -120px; transition: opacity 0.6s, top 0.6s;}
#wrapper.load:before{ opacity: 1.0; top: -150px;}
@media screen and (max-width:767px){
#wrapper:before{ background-size: 150% auto; top: 0;}
#wrapper:before{ top: -5vw;}
#wrapper.load:before{ top: -12.5vw;}
}


#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:1020px; position: relative;}
@media screen and (max-width:767px){
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
}

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

/*btn*/
figure.btn{ margin: 80px auto 0;}
figure.btn a{ display: flex; align-items: center; justify-content: center; margin: auto; width: 320px; height: 60px; background: #0275C2; color: #fff; border-radius: 8px; font-size: 1rem;}
@media screen and (max-width:767px){
figure.btn{ margin: 15% auto 0;}
figure.btn a{ width: 50vw; height: 10vw; border-radius: 1.25vw;}
}

figure.btn2{ margin: 80px auto 0;}
figure.btn2 a{ display: flex; align-items: center; justify-content: center; margin: auto; width: 360px; height: 60px; background: #fff; color: #009FB9; border-radius: 30px; font-size: 1rem; font-weight: bold;}
@media screen and (max-width:767px){
figure.btn2{ margin: 15% auto 0;}
figure.btn2 a{ width: 66.66vw; height: 10vw; border-radius: 10vw;}
}



/*special*/
body.special{ background: #E8F8FC;}
body.special header{ background: #fff;}
body.special #wrapper:before{ display: none;}



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