@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url("https://use.typekit.net/ouq8ltr.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: "poppins", "Zen Kaku Gothic New","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
letter-spacing: 0.04em;
font-size-adjust: none;
-webkit-text-size-adjust: 100%;
text-align:left;
color:#000;
min-width:1216px;
}
@media screen and (max-width:767px){
html,body{ font-size:3.75vw; min-width:240px; max-width:767px; overflow-x: hidden;}
}

/*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*/
.poppins{ font-family: "poppins", sans-serif;}
p{ line-height:2em; 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:#000;}

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

/*link*/
a{ color:inherit; text-decoration:none;}
a.txt_link{ color: #2B72B8; text-decoration: underline;}
a.txt_link:hover{ text-decoration: none;}
a.tel_link{ pointer-events: none;}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}
@media screen and (max-width:767px){
a.tel_link{ pointer-events: all;}
}



/*ヘッダー*/
body{ padding-top: 90px;}
header{ display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; right: 0; top: 0; z-index: 99; min-width: 1200px; width: 100%; height: 90px; padding: 8px 20px 0; background: rgba(255,255,255,0.2); backdrop-filter: blur(30px);}
header .logo{ display: flex; align-items: center;}
header .logo figure{ margin: 0;}
header .logo figure img{ height: 48px;}
header .logo p{ margin-left: 20px;}
header .logo p span{ display: block; color: #2B72B8; font-size: 0.85rem; line-height: 1em; font-weight: bold;}
header .logo p strong{ display: block; color: #D3A944; font-size: 0.9rem; line-height: 1em; font-weight: bold; margin-top: 0.25em;}
@media print{
header{ position: absolute !important;}
}
@media screen and (max-width:767px){
body{ padding-top: 15vw;}
html.negative{ overflow: hidden;}
body.negative{ overflow: hidden;}
header{ min-width: 100%; width: 100%; height: 15vw; padding: 1.25vw 3.75vw 0; align-items: flex-start; transition: 0.3s;}
header.active{ min-height: 100dvh; height: 100%;}
header .logo{ height: 15vw;}
header .logo figure img{ height: 7.5vw;}
header .logo p{ margin-left: 2.5vw; font-size: 0.9rem;}
}


/*ヘッダーナビ*/
header nav{ display: flex; flex-direction: column-reverse; align-items: flex-end; justify-content: flex-end; margin: 0;}
header nav ul{ display: flex;}
header nav ul li{ font-size: 0.75rem; font-weight: bold; line-height: 1em; margin: 0 0 0 32px;}
header nav ul li a{ display: block; position: relative; transition: 0.3s;}
header nav ul li:hover a{ color: #D3A944;}

header nav .lang{ display: flex; align-items: center; margin-bottom: 10px;}
header nav .lang p{ margin: 0; font-size: 0.65rem; line-height: 1em; font-weight: bold; color: #E94738;}
header nav .lang p i{ margin-left: 0.25em;}
header nav .lang ul{ margin-left: 20px; background: #fff; border: 1px solid #D3A944; color: #D3A944; border-radius: 30px;}
header nav .lang li{ font-size: 0.8rem; line-height: 1em; margin: 0; padding: 0; font-weight: bold; display: flex; align-items: center; justify-content: center; position: relative;}
header nav .lang li a{ display: flex; align-items: center; justify-content: center; padding: 0.5em 1.25em; height: 30px; border-radius: 30px; transition: 0.3s;}
header nav .lang li.jp a{ padding-right: 0.75em;}
header nav .lang li.en a{ padding-left: 0.75em;}
header nav .lang li a.active{ background: #D3A944; color: #fff; padding: 1em 1.25em;}
@media print, screen and (min-width:768px){
#smp_nav_btn{ display: none !important;}
header nav{ display: flex !important; height: auto !important; opacity: 1.0 !important;}
}
@media screen and (max-width:767px){
#smp_nav_btn{ display: flex; align-items: flex-end; justify-content: center; padding: 0; width: 7.5vw; height: 7.5vw; position: fixed; right:3.75vw; top:3.75vw; z-index:9999; border-radius: 2.5vw; transition:0.3s; cursor:pointer;}
#smp_nav_btn span{ display:block; height:1px; width:100%; background:none; 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:3px; width:100%; background:#2B72B8; position:absolute; bottom:0.75vw; transition:0.3s;}
#smp_nav_btn span:after{ content: ""; display:block; height:3px; width:80%; background:#2B72B8; position:absolute; top:0.75vw; transition:0.3s;}
#smp_nav_btn.active span:before{ bottom:0; transform: rotate(22.5deg);}
#smp_nav_btn.active span:after{ width: 100%; top:0; transform: rotate(-22.5deg);}

header nav{ display: none; flex-direction: column; align-items: center; justify-content: flex-start; min-height: calc(100dvh - 15vw); width: 100%; padding: 10vw 0; margin: 0; overflow-x: hidden; overflow-y: auto; position: fixed; left: 0; top: 15vw; z-index: 99;}
header nav ul{ display: flex; flex-direction: column; width: 100%; text-align: center;}
header nav ul li{ font-size: 1.2rem; margin: 5vw auto;}

header nav .lang{ flex-direction: column; margin: 10vw 0 0;}
header nav .lang p{ text-align: center; font-size: 1.1rem; margin-bottom: 7.5vw;}
header nav .lang ul{ flex-direction: row; width: auto; margin: 0; border-radius: 10vw;}
header nav .lang li{ font-size: 1rem;}
header nav .lang li a{ padding: 1em 2em; height: 10vw; border-radius: 10vw;}
header nav .lang li.jp a{ padding-right: 1em;}
header nav .lang li.en a{ padding-left: 1em;}
header nav .lang li a.active{ padding: 1em 2em;}
}



/*フッター*/
footer{ background: #F9F7F5; padding: 60px 0 100px; position: relative; z-index: 1;}
footer:after{ content: ""; width: 100%; height: 40px; background: url("../images/foot_bar.png") center bottom repeat-x; background-size: auto 100%; position: absolute; left: 0; bottom: 0;}

footer nav{ width: 1200px; margin: 0 auto;}
footer nav ul{ display: flex; justify-content: space-between; justify-content: flex-end;}
footer nav ul li{ font-size: 0.8rem; font-weight: bold; margin-left: 4em;}
footer nav ul li a{ transition: 0.3s;}
footer nav ul li a:hover{ color: #D3A944;}

footer #footer{ width: 1200px; margin: 60px auto 0;}
footer #footer dl{ display: flex; align-items: flex-end; justify-content: space-between;}
footer #footer dl dt{ display: flex; align-items: center;}
footer #footer dl dt p{ margin: 0 0 0 40px; line-height: 1em;}
footer #footer dl dt p a{ display: flex; align-items: center; padding: 10px 20px 5px; width: 210px; height: 50px; border: 1px solid #000; font-size: 0.75rem; line-height: 1em; position: relative; transition: 0.3s;}
footer #footer dl dt p a i{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #E94738; transition: 0.3s;}
footer #footer dl dt p a:hover{ background: #000; color: #fff;}
footer #footer dl dt p a:hover i{ color: #fff;}
footer #footer dl dd ul.sns{ display: flex; justify-content: flex-end;}
footer #footer dl dd ul.sns li{ margin-left: 12px; font-size: 1rem; line-height: 1em;}
footer #footer dl dd ul.sns li a{ transition: 0.3s;}
footer #footer dl dd ul.sns li a:hover{ color: #D3A944}
footer #footer figure.logo img{ height: 50px;}
footer #footer p.copyright{ font-size: 0.7rem; font-weight: 500; margin-top: 1em;}
@media screen and (max-width:767px){
footer{ padding: 10% 0 12.5%;}
footer:after{ height: 7.5vw;}

footer nav{ display: none;}

footer #footer{ width: 100%; margin: 0 auto;}
footer #footer dl{ flex-direction: column; align-items: center; justify-content: center;}
footer #footer dl dt{ display: block; margin-bottom: 7.5%;}
footer #footer dl dt p{ margin: 10% auto 0; line-height: 1em;}
footer #footer dl dt p a{ display: flex; align-items: center; margin: 0 auto; padding: 1.25vw 2.5vw 0.625vw; width: 45vw; height: 10vw; font-size: 0.9rem;}
footer #footer dl dt p a i{ right: 1.25vw;}
footer #footer dl dd ul.sns{ display: flex; justify-content: center;}
footer #footer dl dd ul.sns li{ margin: 0 0.5em; font-size: 1rem;}
footer #footer figure.logo img{ height: 12.5vw;}
footer #footer p.copyright{ font-size: 0.7rem;}
}



/*メイン*/
#wrap_bar{ width: 100%; height: 100%; border: 8px solid #D3A944; border-right-color: #E94738; border-bottom-color: #E94738; position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;}
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:1200px;}
@media screen and (max-width:767px){
.maincontent{ padding:0; margin:0 auto; width:84%;}
}



/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0;}
h2.h2_tit{ display: flex; flex-direction: column; margin-bottom: 40px;}
h2.h2_tit strong{ font-size: 2.4rem; line-height: 1em;}
h2.h2_tit span{ font-size: 0.8rem; line-height: 1em; color: #E94738; margin-top: 0.5em;}
@media screen and (max-width:767px){
h2.h2_tit{ margin-bottom: 7.5%;}
h2.h2_tit strong{ font-size: 2.4rem;}
h2.h2_tit span{ font-size: 1rem;}
}



/*txt*/
p.txt{ text-align: justify;}



/*btn*/
figure.btn{ display: flex; margin: 0;}
figure.btn a{ display: flex; align-items: center; justify-content: flex-start; width: 200px; height: 60px; padding: 20px; font-size: 0.8rem; border: 1px solid #000; position: relative; transition: 0.3s; cursor: pointer;}
figure.btn a i{ position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: #E94738; transition: 0.3s;}
figure.btn a:hover{ background: #000; color: #fff;}
figure.btn a:hover i{ color: #fff;}
@media screen and (max-width:767px){
figure.btn a{ width: 33.33vw; height: 10vw; padding: 3.75vw; font-size: 0.8rem;}
figure.btn a i{ right: 2.5vw; font-size: 0.8rem;}
}

figure.btn.message_toggle{ justify-content: center; margin: 60px auto 0;}
figure.btn.message_toggle strong:after{ content: "続きを読む"; font-weight: 400;}
figure.btn.message_toggle span{ display: flex; align-items: center; justify-content: center; width: 8px; height: 8px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); transition: 0.3s;}
figure.btn.message_toggle span:before{ content: ""; width: 8px; height: 2px; background: #E94738; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transition: 0.3s;}
figure.btn.message_toggle span:after{ content: ""; width: 8px; height: 2px; background: #E94738; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(90deg); transition: 0.3s;}
figure.btn.message_toggle a:hover{ background: none; color: inherit;}
figure.btn.message_toggle.active strong:after{ content: "閉じる";}
figure.btn.message_toggle.active span:after{ opacity: 0;}
@media screen and (max-width:767px){
figure.btn.message_toggle{ margin: 10% auto 0;}
figure.btn.message_toggle span{ width: 1.875vw; height: 1.875vw; right: 1.875vw;}
figure.btn.message_toggle span:before{ width: 1.875vw; height: 2px;}
figure.btn.message_toggle span:after{ width: 1.875vw; height: 2px;}
}





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