@charset "utf-8";

body{  position: relative;   font-family: "Noto Sans JP", Arial,
"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;  font-optical-sizing: auto; font-weight: 400; font-style: normal; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: clamp(16px,2.5vw,18px); line-height: 1.8; color: #231815; word-break: break-all; letter-spacing: 0.06em;   font-feature-settings: "palt"; position: relative;}

.en{ font-family: "Barlow", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal;}

h1, h2, h3, h4, h5, h6{ font-weight: bold; line-height: 1.5;}
h1{ position: absolute; width: 190px; height: 90px; top: 0; left: 0; z-index: 2;}
.c-tit{ font-size:  clamp(25px,4vw,48px); text-align: center; color: #a81d34;}
.en-subtit{ font-size: clamp(18px,1.6vw,20px); display: block; margin-top: 0.3em; color: rgb(169 29 52 / .5); font-weight: 500;}
.c-lead{ text-align: center; font-size: clamp(16px,1.5vw,18px); margin-top: 2em;}
.c-lead-largeTxt{ font-size: clamp(28px,2.8vw,34px); font-weight: bold; line-height: 1.5;}

a{  text-decoration: none; color: inherit; transition: all 0.3s;}
a:hover{ opacity: 0.8; letter-spacing: 0.3em;}
.caption{ font-size: 12px;}

img{ vertical-align: bottom; max-width: 100%; height: auto; text-align: center;}
figure{ position: relative;}
figcaption{ position: absolute; bottom: 0; right: 0; text-align: right; width: 100%;  color: #fff; padding: 11px; font-size: 12px; text-shadow: 0px 3px 8px rgb(0 0 0 / 1);}
figcaption > .bgcap{ display: inline-block; width: auto; background: rgb(0 0 0 / .6); padding: .5em 1em;} 

.container{ max-width: 1200px; width: calc(100% - 40px); padding: clamp(80px, 5.2vw, 100px) 0 clamp( 100px , 12.5vw , 150px); margin: 0 auto ; }
.l-flex{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.l-grid{ display: grid; }

.sp_only{ display: none;}
.pc_only{ display: block;}

.bg_gray{ background: #e4e4e4;}
.bg_red{ background: #a81d34; color: #fff;
    .c-tit{ color: #fff;}
    .en-subtit{ color: rgb(255 255 255 / .5); }
}
.bg_white{ background: #fff; color: #222;}
.bg_blue{ background: #009fb9;}
.bg_green{ background: #f7ffe4; }
.bg_pink{ background: #f6e8ea;}
.border_box{ border: 1px solid #009fb9; border-radius: 6px; padding: 4.16%;}
.border_box.border_red{ border: 1px solid #a21b32;}
.c-blue{ color: #009fb9;}
.c-red{ color: #a21b32;}
.c-white{ color: #fff;}
.c-center{ text-align: center;}
.c-left{ text-align: left;}
.c-txtLink{ color: #a81d34;  text-decoration: underline; text-underline-offset: 6px;}
.c-txtLink:hover{ text-decoration: none; letter-spacing: 0.06em;}

.c-notice{ margin-bottom: 20px;}


@media (max-width: 768px){
    img{ text-align: center; display: block; margin: 0 auto;}
    .container{ width: calc(100% - 30px);}
    .sp_only{ display: block;}
    .pc_only{ display: none;}
}


/* footer */
.footer{ background: #a81d34; padding: 30px 0 30px; }
.footer__copyright{ display: block; font-size: 12px; text-align: center; color: #fff; font-weight: 500;}

  /* float btn */
.float__btnBox{

bottom: 0; z-index: 100; width: 100%; background: rgb(168 29 52 / 100%);

    &.btn_sticky{ position: fixed; box-shadow: 0px -5px 5px 1px rgb(0 0 0 / 0.3);}
    & .float__btnList{ position: relative; color: #a81d34; margin: 0 auto; padding: 25px 0; font-weight: bold;}
    & .float__btnItem{ position: relative; flex-basis: calc(( 100% - 30px ) / 3);}
    & .float__btnItem::after{ position: absolute; right: 30px; top: 50%; transform: translateY(-50%); content: "";  display: inline-block; background: #a81d34;  height: 13px; clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%); aspect-ratio: 1;}
    & .float__btnLink{ display: block; border-radius: 40px; background: #fff; padding: 0.75em; text-align: center;}
    & .float__btnIcon{ position: relative; display: inline-block; padding-left: 2em; line-height: 1;}
    & .float__btnIcon::before{ position: absolute;  display: inline-block; left: 0; top: 50%; transform: translateY(-50%); content: ""; z-index: 200; color: #86172a;}
    & .dl_btn .float__btnIcon::before{ content: url(../img/icon_dl.svg); width: 23px; height: 17px;}
    & .contact_btn .float__btnIcon::before{ content: url(../img/icon_mail.svg); width: 20px; height: 16px; }
    & .reserve_btn .float__btnIcon::before{ content: url(../img/icon_calendar.svg); width: 18px; height: 20px; margin-top: 2px;}
}


/* 詳細を見るボタン */
.more_contents{ display: none;}
.js-more{ position: relative; display: block; max-width: 390px; width: 100%; text-align: center; background: #222; color: #fff; border: 2px solid #222; border-radius: 40px; padding: 1em 1em 1em 3em; margin: 0 auto; margin-top: 2em; font-size: clamp( 18px , 1.67vw , 20px); font-weight: bold; letter-spacing: 0.08em; cursor: pointer; transition: .2s cubic-bezier(0.45, 0, 0.55, 1);}
.js-more:hover{ opacity: 0.7;}

@media (max-width: 768px){
.js-more{ transform: scale(0.9);}
}

/* トグルボタンの＋ー */
.btn__toggleIcon { position: absolute; top: 50%; left: calc(50% - 4em); width: 30px; height: 30px; transform: translateY(-50%); }
.btn__toggleIcon::before,
.btn__toggleIcon::after { content: ''; position: absolute; top: 50%; left: 50%; background-color: #fff; transition: transform 0.3s ease;}

.btn__toggleIcon::before { width: 16px; height: 2px; transform: translate(-50%, -50%);}
.btn__toggleIcon::after { width: 2.4px; height: 16px; transform: translate(-50%, -50%);}

/* 開いた状態（is-openクラスが付いた時）の縦棒のスタイル*/
.btn__toggleIcon.faq-open .btn__toggleIcon::after {
transform: translate(-50%, -50%) rotate(90deg);
}

.more-open .btn__toggleIcon::after {
transform: translate(-50%, -50%) rotate(90deg);
}

/* page_top */
#page_top { position: absolute; z-index: 300; right: 0px; bottom: -50px; z-index: 5500; display: block; width: 60px; height:60px; margin: 0 30px 0 auto; cursor: pointer; background: #8c8c8c;
border-radius: 100%; opacity: 1; transition: .5s; }

#page_top.mgb{ bottom: 150px;}
#page_top:hover{ opacity: 0.7;}

#page_top span { position: absolute; top: 28px; right: 25px; display: block; width:10px; height:10px; content:""; border-top:3px solid #ffffff; border-right:3px solid #ffffff; -webkit-transform: rotate(315deg);
  transform: rotate(315deg);}




@media (max-width: 768px){
.float__btnBox{
    & .float__btnList{ padding: 15px 0;}
    & .float__btnItem{ font-size: 3vw; flex-basis: calc(( 100% - 20px ) / 3);}
    & .float__btnItem::after{ display: none;}
    & .float__btnLink{ border-radius: 10px; padding: 20px 5px 0px; min-height: 60px;}
    & .float__btnIcon{ padding-left: 0; }
    & .float__btnIcon::before{ position: static; display: block; margin: 0 auto;}
    & .dl_btn .float__btnIcon::before{ height: 15px; margin-top: 0;}
    & .contact_btn .float__btnIcon::before{ width: 20px; height: 14px; margin-top: 0;}
    & .reserve_btn .float__btnIcon::before{ height: 14px; margin-top: 0; }
    }

    #page_top{ width: 40px; height: 40px;}
    #page_top span{ top: 18px; right: 15px;}
    #page_top,#page_top.mgb { bottom: 110px; right: -10px;}
}


/* ふわっと表示用 */
.inView{ will-change: opacity, transform;}
.inView.is-view{ will-change: auto;}

/* Animate */
.fade-in {
    opacity: 0;
    transition: opacity 2s ease;
}

.fade-in.is-view {
    opacity: 1;
}

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transition: opacity 2s ease, transform 2s ease
}

.fade-up.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-down {
    opacity: 0;
    transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    transition: opacity 2s ease, transform 2s ease;
}

.fade-down.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-left {
    opacity: 0;
    transform: translateX(-40px);
    -webkit-transform: translateX(-40px);
    transition: opacity 2s ease, transform 2s ease;
}

.fade-left.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

.fade-right {
    opacity: 0;
    transform: translateX(40px);
    -webkit-transform: translateX(40px);
    transition: opacity 2s ease, transform 2s ease;
}

.fade-right.is-view {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}