@charset "utf-8";
html{
    font-size: 16px;
    scroll-behavior: smooth;
}
*,*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --base:rgb(1, 1, 1);
    --gray:rgb(88, 88, 88);
    --white:rgba(250, 250, 250, 1);
    --black: rgba(51, 51, 51, 1);
    --bg-opacity: 0;
}
body{
    width: 100%;
    height: auto;
    padding: 0;
    background: var(--base);
    color: var(--white);
    line-height: 2;
    letter-spacing: 0.05em;
    text-align: center;
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
}
a{
    color: var(--white);
    text-decoration: none;
    transition: .3s;
}
a:hover{
    cursor: pointer;
    text-decoration: none;
    color: var(--white);
}
.header-inner a:hover{
    background: rgba(255,255,255,.5);
}
.hamburger:hover,
.text a img:hover,
.link-btn:hover,
.footer-menu ul li a:hover,
.rooms-reserve:hover,
.to-corai:hover{
    cursor: pointer;
    background: rgba(255,255,255,.5);
}
/* ブラウザが勝手に足す効果を無効 */
a,a:link,a:visited{
    color: inherit;
    text-decoration: none;
}
.text a img{
    transition: .3s;
}
img{
    max-width: 100%;
    height: auto;
}
h2{
    font-size: 1.5rem;
}
h3{
    font-size: 1.25rem;
    font-weight:  400;
}
/* ヘッダー右上メニューのクリック時に出る白い枠を消す */
header a:focus:not(:focus-visible),
header button:focus:not(:focus-visible),
.sl01-toggle:focus:not(:focus-visible){
    outline: none;
    box-shadow: none;
}
/* Android特有の「タップ時の青枠」も消す */
.sl01-toggle {
    -webkit-tap-highlight-color: transparent;
}
/* ==================================================
    ローディング
================================================== */
.loading{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255,255,255,1); /* ローディング中は白 */
    overflow: hidden;
}
/* 霧レイヤー共通 */
.fog-top,
.fog-left,
.fog-right{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* Three.js canvas */
.fog-top canvas,
.fog-left canvas,
.fog-right canvas{
    width: 100%;
    height: 100%;
    display: block;
}
/* 重なり順 */
.fog-top{  z-index: 3; }
.fog-left{ z-index: 2; }
.fog-right{z-index: 1; }

/* 終了時（JSで付与） */
/* ローディングが終わったらクリックを通す */
.loading.is-finished{
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}
/* 念のため：霧レイヤーもクリックを吸わない */
.fog-top,
.fog-left,
.fog-right{
    pointer-events: none;
}

/* =========================
    背景の霧
========================= */
#smoke-canvas{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}


header{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: url(./img/common/header.webp) center/cover no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    pointer-events: none;
}
header a,
header button,
header .hamburger{
    pointer-events: auto;
}
header select,
header .lang-switcher{
    pointer-events: auto;
}
h1{
    width: 119px;
    height: 136px;
    margin: .1rem 0 0 .5rem;
    position: relative;
}
/* SPでは追従させない（上に流す） */
@media screen and (max-width:767px){
    h1{
        position: absolute;
        top: .1rem;
        left: .5rem;
        margin: 0;
        
    }
    /* バーガー展開中だけ：画面内に固定で出す */
    body.nav-open h1{
        position: fixed;
        top: 1px;
        left: 8px;
        z-index: 99;        /* navの上 */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    @keyframes navFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes navFadeOut {
        from { opacity: 1; }
        to   { opacity: 0; }
    }

    /* 開くとき（既にOKだったやつ） */
    body.nav-open h1.was-out,
    body.nav-open .lang-switcher.was-out{
        animation: navFadeIn .35s ease both;
        animation-delay: .2s;
    }

    /* 閉じるとき（同じ数値） */
    body.nav-closing h1.was-out,
    body.nav-closing .lang-switcher.was-out{
        animation: navFadeOut .35s ease both;
    }
    .hamburger{
        position: fixed;
        top: 28px;
        right: 16px;
        z-index: 100;   /* navより上 */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: block;
    }
    body:not(.nav-open) .hamburger{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
}
/* バーガーメニュー展開時は表示 */
body.nav-open h1{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}h1 a{
    width: 100px;
    height: 100px;
    cursor: pointer;
}
h1 img{
    width: 100%;
}
.visually-hidden{
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    overflow: hidden;
    position: absolute;
}
.header-inner{
    width: 318px;
    height: 69px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 29px 2.5rem 0 0;
}

/* -- 言語切り替え -- */
.lang-switcher{
    position: relative;
    width: 108px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--white);
    pointer-events: auto;
    /* 通常は表示 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* SPでは追従させない（上に流す） */
@media screen and (max-width:767px){
    /* SPは通常：追従しない（上に流れる） */
    .lang-switcher{
        position: absolute;
        top: 28px;
        right: 167px;
        z-index: 99;
    }
    /* バーガー展開中だけ：画面内に固定で出す */
    body.nav-open .lang-switcher{
        position: fixed;
        top: 28px;
        right: 167px;
        z-index: 99;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
/* バーガーメニュー展開時は表示 */
body.nav-open .lang-switcher{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* ボタン */
.lang-btn{
    width: 100%;
    height: 100%;
    line-height: 38px;
    font-size: 16px;
    font-family: "Zen Old Mincho", serif;
    color: var(--white);
    background: transparent;
    text-align: center;
    border: none;
    padding: 0 16px 0 8px;
    cursor: pointer;
    position: relative;
    top: 0;
    transition: background .25s ease;
}
.lang-btn:hover{
    background: rgba(255,255,255,0.5);
}
/* ▼ */
.lang-btn::after{
    content: "▼";
    position: absolute;
    top: 52%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 10px;
    pointer-events: none;
}
/* 展開中は▼を回転 */
.lang-switcher.is-open .lang-btn::after{
    transform: translateY(-50%) rotate(180deg);
}
/* ===== プルダウン ===== */
.lang-menu{
    width: 108px;
    font-size: 16px;
    list-style: none;
    box-sizing: border-box;
    border: 1px solid var(--white);
    background: transparent;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    right: -1px;
    /* アニメ用 */
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        opacity .2s ease,
        transform .2s ease;
}
.lang-switcher.is-open .lang-menu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* 各項目 */
.lang-menu li{
    height: 40px;
    line-height: 40px;
    color: var(--white);
    cursor: pointer;
    background: transparent;   /* ★完全透明 */
}
/* hover */
.lang-menu li:hover{
    background: rgba(255,255,255,0.5);
}

.reserve{
    width: 108px;
    height:  40px;
    line-height: 40px;
    background: rgba(0,0,0,0);
    box-sizing: border-box;
    border: 1px solid var(--white);
}
.hamburger{
    width: 54px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    transition: .3s;
}
nav ul{
    display: flex;
    justify-content: space-between;
}
nav ul li{
    list-style: none;
    padding-left: 0px;
}
nav ul li a{
    height: 60px;
    line-height: 60px;
    display: inline-block; 
}

/* ===== ナビ全画面 ===== */
nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: var(--gray);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .4s ease,
        visibility 0s linear .4s;
}
/* 開いた状態 */
nav.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity .4s ease,
        visibility 0s linear 0s;
}
/* ナビリスト（フェードのみ） */
nav ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: fit-content;
    text-align: left;
    margin: 0 auto;
    padding: 0;
    opacity: 0;
    transition: opacity .35s ease;
}
nav ul li{
    width: 100%;
    list-style: none;
    padding-left: 0;
}
nav.is-open ul{
    opacity: 1;
    transition-delay: .2s;
}
/* リンク */
nav ul li a{
    font-size: 1.2rem;
    font-family: "Yu Gothic", "YuGothic", sans-serif;
    letter-spacing: .1rem;
    display: inline-block;
    height: auto;
    cursor: pointer;
}
/* ハンバーガーボタン初期化（再掲・重要） */
.hamburger{
    width: 54px;
    height: 38px;
    padding: 0;
    background: none;
    border: none;
}
@media screen and (max-width:767px){
    header{
        position: absolute; /* fixed を解除 */
        top: 0;
        left: 0;
    }
    h1{
        width: 95.2px;
        height: 108.8px;
        margin: .1rem 0 0 .5rem;
        position: relative;
    }
    .header-inner{
        width: 228px;
        margin: 29px 1.5rem 0 0;
    }
    /* -- 言語切り替えボタン -- */
    .lang-switcher{
        /* width: 86.39px; */
        width: 80px;
        height: 32px;
    }
    /* ボタン */
    .lang-btn{
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        padding: 0 18px 0 6px;
        top: -1px;
    }
    /* ▼ */
    .lang-btn::after{
        top: 57%;
        right: 3px;
        font-size: 8px;
    }
    /* ===== プルダウン ===== */
    .lang-menu{
        width: 80px;
        /* width: 86.39px; */
        font-size: 14px;
        list-style: none;
        box-sizing: border-box;
        border: 1px solid var(--white);
        background: transparent;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        right: -1px;
        /* アニメ用 */
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition:
            opacity .2s ease,
            transform .2s ease;
    }
    .lang-switcher.is-open .lang-menu{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* 各項目 */
    .lang-menu li{
        height: 32px;
        line-height: 32px;
    }
    /* hover */
    .lang-menu li:hover{
        background: rgba(255,255,255,0.15); /* 任意。不要なら削除 */
    }
    .hamburger{
        width: 43.2px;
        height: 30.4px;
        position: fixed;
        top: 28px;
        right: 16px;
        z-index: 99;
    }
    .reserve{
        /* width: 86.4px; */
        width: 80px;
        height:  32px;
        line-height: 32px;
        font-size: 14px;
        position: fixed;
        top: 28px;
        right: 72px; 
        z-index: 99;
    }
    .mainvisual img{
        width: 26.66% !important;
    }
}
@media screen and (max-width:441px){
    body{
        line-height: 1.8;
    }
    h1{
        margin: 0;
    }
    .header-inner{
        margin: 28px 1rem 0 0;
    }
}



/* ---------------- */
/* --- footer --- */
/* ---------------- */
footer{
    width: 100%;
    aspect-ratio: 1000/360;
    background: url(./img/common/fotter-pc.webp) center/cover no-repeat;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer .address{
    width: 275.89px;
}
footer .address a{
    display: block;
    width: 100%;
    aspect-ratio: 611/211;
}
footer address{
    width: fit-content;
    font-size: 16px;
    font-style: normal;
    text-align: center;
    white-space: nowrap;
    margin: 1rem 0 0;
}
footer img{
    width: 100%
}
.footer-menu{
    width: 270px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}
.footer-menu ul{
    display: block;
    width: 160px;
    text-align: left;
}
.footer-menu ul li{
    list-style: none;
    padding: 0 0 0;
}
.footer-menu ul li a{
    height: 40px;
    line-height: 40px;
    display: inline-block; 
    white-space: nowrap;
}
@media screen and (max-width:767px){
    footer{
        width: 100%;
        aspect-ratio: auto;
        height: 506px;
        background: url(./img/common/fotter-sp.webp) center/cover no-repeat;
        flex-direction: column-reverse;
        padding: 80px 0;
    }
    footer>a{
        width: max(128px,29.6%);
        aspect-ratio: 146/50;
    }
    .footer-menu{
        margin-bottom: 3rem;
    }
}
@media screen and (max-width:580px){
}
@media screen and (max-width:441px){
}


/* ---------------- */
/* --TOPページ-- */
/* ---------------- */
#top .mainvisual{
    width: 100%;
    height: 100dvh;
    background: url(./img/top/top-main.webp) center/cover no-repeat;
    margin: 0 auto 198px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainvisual img{
    width: min(221px,33.33%);
}

#top #concept{
    margin-bottom: 206px;  
}
.vertical{
    text-align: left;
    writing-mode: vertical-rl;
    margin: 0 auto 110px;
}
.space{
    margin: 0 0 1rem;
}
#concept img{
    width: min(229px,50%);
}

#grid01-pc,
#grid02-pc,
#grid03-pc{
    width: 95%;
    aspect-ratio: 833/525;
    margin: 0 auto 102px;
    display: flex;
    justify-content: space-between;
}
#grid04-pc{
    width: 95%;
    aspect-ratio: 1000/525;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#grid01-pc .img01,
#grid01-pc .img02,
#grid01-pc .img03,
#grid01-pc .img04{
    width: 100%;
    height: 100%;
}
.img-clip{overflow: hidden;}
#grid01-pc .grid-l{
    width: calc(50% - 55px);
    height: 100%;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#grid01-pc .grid-l .top{
    height: calc(53.39% - 4px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow: hidden;
}
#grid01-pc .grid-l .top .img01{
    background: url(./img/top/top-grid01-01.webp) center/cover no-repeat;
}
#grid01-pc .grid-l .top .img02{
    background: url(./img/top/top-grid01-02.webp) center/cover no-repeat;
}
#grid01-pc .grid-l .bottom{
    height: calc(46.61% - 4px);
}
#grid01-pc .grid-l .bottom .img03{
    background: url(./img/top/top-grid01-04.webp) center/cover no-repeat;
}
#grid01-pc .grid-r{
    width: calc(52.7% - 55px);
    height: 100%;
}
#grid01-pc .grid-r .top{
    height: 62.52%;
    margin-bottom: 8px;
    overflow: hidden;
}
#grid01-pc .grid-r .top .img04{
    background: url(./img/top/top-grid01-03.webp) center/cover no-repeat;
}
#grid01-pc .grid-r .bottom{
    height: calc(37.48% - 8px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
#grid01-pc .grid-r .bottom .img05{
    width: 100%;
    height: 100%;
    background: url(./img/top/top-grid01-05.webp) center/cover no-repeat;
    transform: scale(1.5);
}
#grid01-pc .grid-r .bottom .img06{
    background: url(./img/top/top-grid01-06.webp) center/cover no-repeat;
}
#top .text{
    width: 102px;
    height: 100%;
    padding-left: 8px;
    flex-shrink: 0;
    position: relative;
}
#top .text .vertical{
    line-height: 1.5;
    margin: 0;
}
#top .text h3{
    margin: 0 0 0 1rem;
}
#grid01-pc .text a,
#grid02-pc .text a,
#grid03-pc .text a,
#grid04-pc .text a{
    width: min(1.25rem,24px);
    aspect-ratio: 29/190;
    position: absolute;
    bottom: 0;
    left: 1rem;
}
#grid02-pc .grid-box,
#grid03-pc .grid-box,
#grid04-pc .grid-box{
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#grid02-pc .grid-box .top,
#grid02-pc .grid-box .bottom,
#grid03-pc .grid-box .top,
#grid03-pc .grid-box .bottom,
#grid04-pc .grid-box .top,
#grid04-pc .grid-box .bottom{
    width: 100%;
}
#grid02-pc .grid-box .top{
    height: calc(59.42% - 4px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
#grid02-pc .grid-box .top .img01{
    background: url(./img/top/top-grid02-01.webp) center/cover no-repeat;
}
#grid02-pc .grid-box .top .img02{
    background: url(./img/top/top-grid02-02.webp) center/cover no-repeat;
}
#grid02-pc .grid-box .bottom{
    height: calc(40.58% - 8px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
#grid02-pc .grid-box .bottom .img03{
    background: url(./img/top/top-grid02-03.webp) center/cover no-repeat;
}
#grid02-pc .grid-box .bottom .img04{
    background: url(./img/top/top-grid02-04.webp) center/cover no-repeat;
}
#grid02-pc .grid-box .bottom .img05{
    background: url(./img/top/top-grid02-05.webp) center/cover no-repeat;
}
#grid03-pc .grid-box .top{
    height: calc(59.42% - 4px);
    display: grid;
    grid-template-columns: 68% 32%;
    gap: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
#grid03-pc .grid-box .top .img01{
    background: url(./img/top/top-grid03-01.webp) center 78%/cover no-repeat;
}
#grid03-pc .grid-box .top .img02{
    background: url(./img/top/top-grid03-02.webp) center/cover no-repeat;
}
#grid03-pc .grid-box .bottom{
    height: calc(40.58% - 8px);
    display: grid;
    grid-template-columns: 39% 60%;
    gap: 8px;
}
#grid03-pc .grid-box .bottom .img03{
    background: url(./img/top/top-grid03-03.webp) bottom/cover no-repeat;
}
#grid03-pc .grid-box .bottom .img04{
    background: url(./img/top/top-grid03-04.webp) center/cover no-repeat;
}
#grid04-pc .grid-box .top{
    height: calc(59.42% - 4px);
    display: grid;
    grid-template-columns: 52.6% 47.4%;
    gap: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
#grid04-pc .grid-box .top .img01{
    background: url(./img/top/top-grid04-01.webp) center 78%/cover no-repeat;
}
#grid04-pc .grid-box .top .img02{
    background: url(./img/top/top-grid04-02.webp) center/cover no-repeat;
}
#grid04-pc .grid-box .bottom{
    height: calc(40.58% - 8px);
    display: grid;
    grid-template-columns: 39% 60%;
    gap: 8px;
}
#grid04-pc .grid-box .bottom .img03{
    background: url(./img/top/top-grid04-03.webp) bottom/cover no-repeat;
}
#grid04-pc .grid-box .bottom .img04{
    background: url(./img/top/top-grid04-04.webp) center/cover no-repeat;
}

#grid01-sp,#grid02-sp,#grid03-sp,#grid04-sp{
    display: none;
}

#news{
    margin-bottom: 156px;
}
#news h3{
    margin: 102px 0;
}
#news dl{
    width: 71%;
    margin: 0 auto 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    text-align: left;
}
#news dt{
    width: 76px;
    white-space: nowrap;
}
#news dd{
    width: calc(100% - 76px);
    padding-left: 1rem;
}
.link-btn{
    width: min(310px,40%);
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.5);
    background: var(--bg-opacity);
    text-align: center;
    margin: 0 auto 2rem;
    display: block;
    line-height: 48px;
}
.bottom-img{
    width: 100%;
    aspect-ratio: 1000/417;
    background: url(./img/top/bottom-img.webp) center/cover no-repeat;
    margin-top: 156px;
}
@media screen and (max-width:767px){
    #top .mainvisual{
        height: auto;
        aspect-ratio: 880/1131;
        background: url(./img/top/top-main-sp.webp) top/cover no-repeat;
        margin: 0 auto 120px;
    }
    #top #concept{
        margin-bottom: 160px;
    }
    #grid01-pc,#grid02-pc,#grid03-pc,#grid04-pc{
        display: none;
    }
    #grid01-sp,#grid02-sp,#grid03-sp,#grid04-sp{
        display: block;
        margin-bottom: 120px;
    }
    #grid01-sp .text,
    #grid02-sp .text,
    #grid03-sp .text,
    #grid04-sp .text{
        width: 100%;
        text-align: left;
        position: relative;
    }
    #grid01-sp .text hgroup,
    #grid02-sp .text hgroup,
    #grid03-sp .text hgroup,
    #grid04-sp .text hgroup{
        width: 90%;
        margin: 0 auto 4rem;
        text-align: left;
    }
    #top .text h3{
        margin: 0;
    }
    #grid01-sp .text a,
    #grid02-sp .text a,
    #grid03-sp .text a,
    #grid04-sp .text a{
        width: 160px;
        aspect-ratio: 153/23;
        position: absolute;
        top: 7rem;
        left: clamp(179px, calc(95.1vw - 163.3px), 566px);
    }
    #top .text a img{
        width: 100%;
    }
    #grid01-sp .grid-box,
    #grid02-sp .grid-box,
    #grid03-sp .grid-box,
    #grid04-sp .grid-box{
        width: 90%;
        aspect-ratio: 4/3;
        box-sizing: border-box;
        margin: 0 auto;
    }
    #grid01-sp .grid-box .top{
        width: 100%;
        height: calc(65% - 8px);
        display: grid;
        grid-template-columns:
            calc((100% - 16px) / 3)
            calc((100% - 16px) / 3)
            calc((100% - 16px) / 3);
        gap: 8px;
        margin-bottom: 8px;
    }
    #grid01-sp .grid-box .top .img01{
        background: url(./img/top/top-grid01-01-sp.webp) center/cover no-repeat;
    }
    #grid01-sp .grid-box .top .img02{
        background: url(./img/top/top-grid01-02-sp.webp) center/cover no-repeat;
    }
    #grid01-sp .grid-box .top .img03{
        background: url(./img/top/top-grid01-03-sp.webp) center/cover no-repeat;
    }
    #grid01-sp .grid-box .bottom{
        width: 100%;
        height: 35%;
        display: grid;
        grid-template-columns:
            calc((100% - 8px) / 2)
            calc((100% - 8px) / 2);
        gap: 8px;
    }
    #grid01-sp .grid-box .bottom .img05{
        background: url(./img/top/top-grid01-05-sp.webp) center/cover no-repeat;
    }
    #grid01-sp .grid-box .bottom .img06{
        background: url(./img/top/top-grid01-06-sp.webp) center/cover no-repeat;
    }

    #grid02-sp .grid-box .top{
        width: 100%;
        height: calc(60% - 8px);
        display: grid;
        grid-template-columns:
            calc((100% - 8px) / 2)
            calc((100% - 8px) / 2);
        gap: 8px;
        margin-bottom: 8px;
    }
    #grid02-sp .grid-box .top .img01{
        background: url(./img/top/top-grid02-01-sp.webp) center/cover no-repeat;
    }
    #grid02-sp .grid-box .top .img02{
        background: url(./img/top/top-grid02-02-sp.webp) center/cover no-repeat;
    }
    #grid02-sp .grid-box .bottom{
        width: 100%;
        height: 40%;
        display: grid;
        grid-template-columns:
        calc((100% - 16px) / 3)
        calc((100% - 16px) / 3)
        calc((100% - 16px) / 3);
        gap: 8px;
    }
    #grid02-sp .grid-box .bottom .img03{
        background: url(./img/top/top-grid02-03-sp.webp) center/cover no-repeat;
    }
    #grid02-sp .grid-box .bottom .img04{
        background: url(./img/top/top-grid02-04-sp.webp) center/cover no-repeat;
    }
    #grid02-sp .grid-box .bottom .img05{
        background: url(./img/top/top-grid02-05-sp.webp) center/cover no-repeat;
    }

    #grid03-sp .grid-box .top{
        width: 100%;
        height: calc(52.9% - 8px);
        display: grid;
        grid-template-columns: calc(67.5% - 8px) 32.5%;
        gap: 8px;
        margin-bottom: 8px;
    }
    #grid03-sp .grid-box .top .img01{
        background: url(./img/top/top-grid03-01-sp.webp) bottom/cover no-repeat;
    }
    #grid03-sp .grid-box .top .img02{
        background: url(./img/top/top-grid03-02-sp.webp) center/cover no-repeat;
    }
    #grid03-sp .grid-box .bottom{
        width: 100%;
        height: 47.1%;
        display: grid;
        grid-template-columns:
            32.5% calc(67.5% - 8px);
        gap: 8px;
    }
    #grid03-sp .grid-box .bottom .img03{
        background: url(./img/top/top-grid03-03-sp.webp) center/cover no-repeat;
    }
    #grid03-sp .grid-box .bottom .img04{
        background: url(./img/top/top-grid03-04-sp.webp) center/cover no-repeat;
    }

    #grid04-sp .grid-box .top{
        width: 100%;
        height: calc(52.9% - 8px);
        display: grid;
        grid-template-columns:
            calc((100% - 8px) / 2)
            calc((100% - 8px) / 2);
        gap: 8px;
        margin-bottom: 8px;
    }
    #grid04-sp .grid-box .top .img01{
        background: url(./img/top/top-grid04-01-sp.webp) center/cover no-repeat;
    }
    #grid04-sp .grid-box .top .img02{
        background: url(./img/top/top-grid04-02-sp.webp) center/cover no-repeat;
    }
    #grid04-sp .grid-box .bottom{
        width: 100%;
        height: 47.1%;
        display: grid;
        grid-template-columns:
            32.5% calc(67.5% - 8px);
        gap: 8px;
    }
    #grid04-sp .grid-box .bottom .img03{
        background: url(./img/top/top-grid04-03-sp.webp) center/cover no-repeat;
    }
    #grid04-sp .grid-box .bottom .img04{
        background: url(./img/top/top-grid04-04-sp.webp) center/cover no-repeat;
    }

    #news{
        margin-bottom: 100px;
    }
    #news h3{
        margin: 120px 0 32px;
    }
    #news dl{
        width: 80%;
        margin: 0 auto 2.5rem;
        flex-direction: column;
        text-align: left;
    }
    #news dt{
        width: 100%;
        white-space: nowrap;
    }
    #news dd{
        width: 100%;
        padding-left: 0;
    }
    .bottom-img{
        aspect-ratio: 4/3;
    }
}
@media screen and (max-width:580px){
    .mainvisual{
        height: auto;
        aspect-ratio: 880/1131;
    }
}
@media screen and (max-width:441px){
    .bottom-img{
        background: url(./img/top/bottom-img-sp.webp) top/cover no-repeat;
        margin-top: 120px;
    }
}


/* ---------------- */
/* --ROOMSページ-- */
/* ---------------- */
#rooms .mainvisual{
    width: 100%;
    height: 100dvh;
    background: url(./img/rooms/rooms-main.webp) center/cover no-repeat;
    margin: 0 auto 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#rooms #concept h2{
    line-height: 2;
}
#rooms #concept{
    margin-bottom: 120px;
}
#rooms #concept p{
    width: min(765px,80%);
    margin: 0 auto;
}
.br-441,.br-378{
    display: none;
    height: 0;
}
.block-945,.block-588{
    display: none;
}
.sl01-toggle{
    all: unset; /* 指定を全部消。だから先頭に記述 */
    width: 100%;
    text-align: center;
    display: none;
    cursor: pointer;
    margin: 2rem 0 0;
    position: relative;
    z-index: 80;
}
.sl01-toggle-img{
    height: 32px;
    display: inline-block;
    pointer-events: none;
}

/* スライダー */
.sl01{
    width: min(765px,80%);
    margin: 0 auto 100px;
    overflow: hidden;
}
.sl01-track{
    width: 100%;
    aspect-ratio: 956/729;
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: transform 600ms ease;
    will-change: transform;
}
/* picture をスライド1枚として扱う */
.sl01-track picture{
    flex: 0 0 100%;
    width: 100%;
    display: block;
}
/* picture 内の画像 */
.sl01-track picture > img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.sl01-slide{
    flex: 0 0 100%;
    margin: 0;
}
.sl01-slide img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.sl01-dots{
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 24px 0 0;
}
.sl01-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: #7F7F7F;
    cursor: pointer;
    padding: 0;
}
.sl01-dot.is-active{
    background: var(--white);
}
.sl01-dot:focus-visible{
    outline: 2px solid rgba(0, 0, 0, 0.6);
    outline-offset: 3px;
}
.sl01 .text{
    width: 100%;
    margin: 72px 0 0;
    text-align: left;
}
.sl01 .text .midashi{
    width: 100%;
    display: flex;
    margin-bottom: 24px;
}
.sl01 .text .midashi img{
    width: auto;
    height: 51px;
    margin-right: 3rem;
}
.rooms-reserve{
    display: block;
    width: 108px;
    height:  40px;
    line-height: 40px;
    background: rgba(0,0,0,0);
    box-sizing: border-box;
    border: 1px solid var(--white);
    color: aliceblue;
    margin: 0 auto 32px;
    text-align: center;
}
.sl01 .text .midashi p{
    line-height: 58px;
    white-space: nowrap;
    font-size: 14px;
}
.sl01 .text .midashi p span{
    font-size: 20px;
    line-height: 57px;
}
.sl01 .text .midashi p .line-height-01{
    font-size: 20px;
    line-height: 65px !important;
}
.sl01 .text .midashi p .line-height-02{
    font-size: 20px;
    line-height: 66px !important;
}
.sl01 .text .midashi p .line-height-03{
    font-size: 20px;
    line-height: 52px !important;
}
.border{
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    margin: 2rem 0;
}
.text-bottom{
    display: flex;
    justify-content: space-between;
}
.inner-box{
    width: 48%;
}
@media screen and (max-width:945px){
    .none-945{
        display: none;
    }
    .block-945{
        display: block;
    }
}
@media (min-width: 768px){
    .sl01-detail {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
}
@media screen and (max-width:767px){
    #rooms .mainvisual{
        height: auto;
        aspect-ratio: 880/1131;
        background: url(./img/rooms/rooms-main-sp.webp) center/cover no-repeat;
        margin: 0 auto 80px;
    }
    #rooms #concept{
        margin-bottom: 80px;
    }
    .sl01{
        width: 90%;
        margin: 0 auto 100px;
        overflow: hidden;
    }
    .rooms-reserve{
        width: 80px;
        height:  32px;
        line-height: 32px;
        background: rgba(0,0,0,0);
        font-size: 14px;
    }
    .sl01-toggle{
        display: block;
    }
    .sl01-detail{
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }
    .sl01-detail.is-open{
        opacity: 1;
    }
    .text-bottom{
        flex-direction: column;
    }
    .inner-box{
        width: 100%;
    }
}
@media screen and (max-width:588px){
    .block-945{
        display: none;
    }
    .block-588{
        display: block;
    }
}
@media screen and (max-width:441px){
    .br-441{
        display: block;
    }
    .sl01 .text .midashi img{
        height: 46px;
        margin-right: 1rem;
    }
    .sl01 .text .midashi p{
        line-height: 50px;
        margin-top: -2px;
    }
    .sl01 .text .midashi p span{
        font-size: 18px;
        line-height: 54px;
    }
    .sl01 .text .midashi p .line-height-01{
        font-size: 18px;
        line-height: 64px !important;
    }
    .sl01 .text .midashi p .line-height-02{
        font-size: 18px;
        line-height: 64px !important;
    }
    .sl01 .text .midashi p .line-height-03{
        font-size: 18px;
        line-height: 51px !important;
    }
}
@media screen and (max-width:378px){
    .br-378{
        display: block;
    }
}



/* ---------------- */
/* --STORYページ-- */
/* ---------------- */
#story .mainvisual{
    width: 100%;
    height: 100dvh;
    background: url(./img/story/main.webp) bottom/cover no-repeat;
    margin: 0 auto 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#story #concept{
    margin-bottom: 126px;
}
#story #concept h2{
    margin-bottom: 126px;
    line-height: 2;
}
#story #concept .concept-inner{
    width: max(691.2px,80%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#story #concept .concept-inner .text{
    width: 48%;
    text-align: left;
    padding: 0;
}
.block-1071,.block-378,.block-609,.block-504,
#story-grid01-sp,
#story-grid02-sp,
#story-grid03-sp,
#story-grid04-sp{
    display: none;
}
.concept-inner h3{
    margin: 0;
}
#story #concept .concept-inner .concept-img{
    width: 48%;
    background: url(./img/story/concept.webp) center/cover no-repeat;
}
.access-img{
    width: 100%;
    aspect-ratio: 1000/339;
    background: url(./img/story/concept02.webp) bottom/cover no-repeat;
    margin-bottom: 180px;
}
#story hgroup{
    width: 80%;
    margin: 0 auto 120px;
}
#story hgroup h2{
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 60px;
}
/* マップ */
.map-embed{
    width: 80%;
    aspect-ratio: 762/549;
    overflow: hidden;
    margin: 0 auto 152px;
}
.map-embed iframe{
    width: 100%;
    height: 100%;
    border: 0;
}
/* storyのグリッドセクション */
#story-grid01-pc,
#story-grid02-pc,
#story-grid03-pc{
    width: 95%;
    aspect-ratio: 1000/326;
    margin: 0 auto 64px;
    display: flex;
    justify-content: space-between;
}
#story-grid04-pc{
    width: 95%;
    aspect-ratio: 1000/326;
    margin: 0 auto 128px;
    display: flex;
    justify-content: space-between;
}
#story-grid01-pc .img01,
#story-grid01-pc .img02,
#story-grid01-pc .img03,
#story-grid01-pc .img04,
#story-grid02-pc .img01,
#story-grid02-pc .img02,
#story-grid02-pc .img03,
#story-grid02-pc .img04,
#story-grid03-pc .img01,
#story-grid04-pc .img01,
#story-grid04-pc .img02,
#story-grid04-pc .img03,
#story-grid04-pc .img04,
#story-grid04-pc .img05{
    width: 100%;
    height: 100%;
}
#story-grid01-pc .grid-l{
    width: calc(((100% - 102px) / 3) * 2);
    height: 100%;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#story-grid01-pc .grid-l .top{
    height: calc(50% - 4px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow: hidden;
}
#story-grid01-pc .grid-l .top .img01{
    background: url(./img/story/grid01-01.webp) center/cover no-repeat;
}
#story-grid01-pc .grid-l .top .img02{
    background: url(./img/story/grid01-02.webp) center/cover no-repeat;
}
#story-grid01-pc .grid-l .bottom{
    height: calc(50% - 4px);
}
#story-grid01-pc .grid-l .bottom .img03{
    background: url(./img/story/grid01-03.webp) center left/cover no-repeat;
}
#story-grid01-pc .grid-r{
    width: calc((100% - 102px) / 3);
    height: 100%;
    overflow: hidden;
}
#story-grid01-pc .grid-r .img04{
    background: url(./img/story/grid01-04.webp) bottom/cover no-repeat;
}
#story .text{
    width: 102px;
    height: 100%;
    padding-left: 8px;
    flex-shrink: 0;
    position: relative;
}
#story .text .vertical{
    line-height: 1.5;
    margin: 0;
}
#story .text .vertical h3,
#story .text .vertical p{
    margin-left: .5rem;
}
#story-grid01-sp .text h3,
#story-grid02-sp .text h3,
#story-grid03-sp .text h3,
#story-grid04-sp .text h3{
    margin: 0 0 0 1rem;
    white-space: nowrap;
}
#story-grid01-sp .text p,
#story-grid02-sp .text p,
#story-grid03-sp .text p,
#story-grid04-sp .text p{
    white-space: nowrap;
    margin-left: 1rem;
}
#story-grid01-sp .grid-box,
#story-grid02-sp .grid-box,
#story-grid03-sp .grid-box,
#story-grid04-sp .grid-box{
    width: 90%;
    aspect-ratio: 702/651;
    box-sizing: border-box;
    margin: 0 auto;
}
#story-grid01-sp .grid-box .top{
    width: 100%;
    height: calc(65% - 8px);
    display: grid;
    grid-template-columns:
        calc(50% - 4px)
        calc(50% - 4px);
    gap: 8px;
    margin-bottom: 8px;
}
#story-grid01-sp .grid-box .top .img01{
    background: url(./img/story/grid01-01-sp.webp) bottom/cover no-repeat;
}
#story-grid01-sp .grid-box .top .img02{
    background: url(./img/story/grid01-02-sp.webp ) bottom/cover no-repeat;
}
#story-grid01-sp .grid-box .bottom{
    width: 100%;
    height: 35%;
    display: grid;
    grid-template-columns:    
        calc(30% - 4px)
        calc(70% - 4px);
    gap: 8px;
}
#story-grid01-sp .grid-box .bottom .img03{
    background: url(./img/story/grid01-03-sp.webp) center/cover no-repeat;
}
#story-grid01-sp .grid-box .bottom .img04{
    background: url(./img/story/grid01-04-sp.webp) top/cover no-repeat;
}
#story-grid01-sp .text,
#story-grid02-sp .text,
#story-grid03-sp .text,
#story-grid04-sp .text{
    text-align: left;
}
#story-grid01-sp .text hgroup,
#story-grid02-sp .text hgroup,
#story-grid03-sp .text hgroup,
#story-grid04-sp .text hgroup{
    width: 90%;
    margin: 0 auto 56px;
}

#story-grid02-pc .grid-l{
    width: calc(((100% - 102px) / 3) * 2);
    height: 100%;
    margin-right: 8px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
#story-grid02-pc .grid-l .img01{
    background: url(./img/story/grid02-01.webp) center/cover no-repeat;
}
#story-grid02-pc .grid-l .img02{
    background: url(./img/story/grid02-02.webp) top/cover no-repeat;
}
#story-grid02-pc .grid-r{
    width: calc((100% - 102px) / 3);
    height: 100%;
}
#story-grid02-pc .grid-r .top{
    width: 100%;
    height: calc(50% - 4px);
    display: grid;
    margin-bottom: 8px;
    overflow: hidden;
}
#story-grid02-pc .grid-r .top .img03{
    background: url(./img/story/grid02-03.webp) bottom/cover no-repeat;
}
#story-grid02-pc .grid-r .bottom{
    height: calc(50% - 4px);
}
#story-grid02-pc .grid-r .img04{
    background: url(./img/story/grid02-04.webp) bottom/cover no-repeat;
}
#story-grid02-sp .grid-box .top{
    width: 100%;
    height: calc(55% - 8px);
    display: grid;
    grid-template-columns:
        calc(50% - 4px)
        calc(50% - 4px);
    gap: 8px;
    margin-bottom: 8px;
}
#story-grid02-sp .grid-box .top .img01{
    background: url(./img/story/grid02-01-sp.webp) bottom/cover no-repeat;
}
#story-grid02-sp .grid-box .top .img02{
    background: url(./img/story/grid02-02-sp.webp ) bottom/cover no-repeat;
}
#story-grid02-sp .grid-box .bottom{
    width: 100%;
    height: 45%;
    display: grid;
    grid-template-columns:    
        calc(60% - 4px)
        calc(40% - 4px);
    gap: 8px;
}
#story-grid02-sp .grid-box .bottom .img03{
    background: url(./img/story/grid02-03-sp.webp) center/cover no-repeat;
}
#story-grid02-sp .grid-box .bottom .img04{
    background: url(./img/story/grid02-04-sp.webp) top/cover no-repeat;
}

#story-grid03-pc .grid-l{
    width: calc(100% - 102px);
    height: 100%;
}
#story-grid03-pc .grid-l .img01{
    background: url(./img/story/matsuri.webp) bottom/cover no-repeat;
}
#story-grid03-sp .grid-box .img01{
    width: 100%;
    height: 100%;
    background: url(./img/story/matsuri-sp.webp) bottom/cover no-repeat;
}

#story-grid04-pc .grid-l{
    width: calc(((100% - 102px) / 3) * 2);
    height: 100%;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#story-grid04-pc .grid-l .top{
    height: calc(50% - 4px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow: hidden;
}
#story-grid04-pc .grid-l .top .img01{
    background: url(./img/story/grid03-01.webp) center/cover no-repeat;
}
#story-grid04-pc .grid-l .top .img02{
    background: url(./img/story/grid03-02.webp) center/cover no-repeat;
}
#story-grid04-pc .grid-l .bottom{
    height: calc(50% - 4px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow: hidden
}
#story-grid04-pc .grid-l .bottom .img03{
    background: url(./img/story/grid03-03.webp) center left/cover no-repeat;
}
#story-grid04-pc .grid-l .bottom .img04{
    background: url(./img/story/grid03-04.webp) center left/cover no-repeat;
}
#story-grid04-pc .grid-r{
    width: calc((100% - 102px) / 3);
    height: 100%;
    overflow: hidden;
}
#story-grid04-pc .grid-r .img05{
    background: url(./img/story/grid03-05.webp) bottom/cover no-repeat;
}
#story-grid01-sp .grid-box,
#story-grid02-sp .grid-box,
#story-grid03-sp .grid-box,
#story-grid04-sp .grid-box{
    width: 90%;
    aspect-ratio: 702/651;
    box-sizing: border-box;
    margin: 0 auto;
}
#story-grid04-sp .grid-box .top{
    width: 100%;
    height: calc(65% - 8px);
    display: grid;
    grid-template-columns:
        calc(50% - 4px)
        calc(50% - 4px);
    gap: 8px;
    margin-bottom: 8px;
}
#story-grid04-sp .grid-box .top .img01{
    width: 100%;
    height: 100%;
    background: url(./img/story/grid03-01-sp.webp) bottom/cover no-repeat;
}
#story-grid04-sp .grid-box .top .top-r{
    width: 100%;
    height: 100%;
}
#story-grid04-sp .grid-box .top .top-r .img02{
    height: calc(65% - 8px);
    margin-bottom: 8px;
    background: url(./img/story/grid03-02-sp.webp ) bottom/cover no-repeat;
}
#story-grid04-sp .grid-box .top .top-r .img03{
    height: 35%;
    background: url(./img/story/grid03-03-sp.webp ) bottom/cover no-repeat;
}
#story-grid04-sp .grid-box .bottom{
    width: 100%;
    height: 35%;
    display: grid;
    grid-template-columns:    
        calc(70% - 4px)
        calc(30% - 4px);
    gap: 8px;
}
#story-grid04-sp .grid-box .bottom .img04{
    width: 100%;
    height: 100%;
    background: url(./img/story/grid03-04-sp.webp) center/cover no-repeat;
}
#story-grid04-sp .grid-box .bottom .img05{
    width: 100%;
    height: 100%;
    background: url(./img/story/grid03-05-sp.webp) top/cover no-repeat;
}

.to-corai{
    display: block;
    width: min(380px,70%);
    height: 124px;
    line-height: 20px;
    background: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    border: 1px solid var(--white);
    color: aliceblue;
    margin: 0 auto 92px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.to-corai span{
    font-size: 20px;
    line-height: 1;
}
@media screen and (max-width:1302px){
    #story-grid01-pc,
    #story-grid02-pc,
    #story-grid03-pc,
    #story-grid04-pc{
        height: 403.2px;
    }
}
@media screen and (max-width:1071px){
    .none1071{
        display: none;
    }
    .block-1071{
        display: block;
    }
}
@media screen and (max-width:977px){
    #story-grid01-pc .grid-l .bottom .img03{
        background: url(./img/story/grid01-03.webp) bottom left clamp(-48px, calc((100vw - 977px) * 48 / 209), 0px)/cover no-repeat;
    }
}
@media screen and (max-width:767px){
    #story .mainvisual{
        height: auto;
        aspect-ratio: 880/1131;
        background: url(./img/story/main-sp.webp) bottom/cover no-repeat;
        margin: 0 auto 115px;
    }
    #story #concept h3{
        margin-bottom: 48px;
    }
    #story #concept .concept-inner{
        width: 80%;
    }
    #story #concept .concept-inner .text{
        width: 100%;
        margin: 0 auto;
    }
    .none1071,
    #story-grid01-sp,
    #story-grid02-sp,
    #story-grid03-sp{
        display: block;
        margin-bottom: 160px;
    }
    #story-grid04-sp{
        display: block;
        margin: 0 auto 150px;
    }
    .block-1071,.none-767,
    #story-grid01-pc,
    #story-grid02-pc,
    #story-grid03-pc,
    #story-grid04-pc{
        display: none;
    }
    .concept-inner .concept-img{
        display: none;
    }
    .access-img{
        aspect-ratio: 440/236;
        background: url(./img/story/concept02-sp.webp) bottom/cover no-repeat;
        margin-bottom: 120px;
    }
    #story hgroup{
        width: 90%;
        margin: 0 auto 144px;
    }
    #story hgroup h2{
        margin-bottom: 56px;
    }
    .map-embed{
        width: 90%;
        aspect-ratio: 690/500;
        overflow: hidden;
        margin: 0 auto 160px;
    }
    .to-corai{
        margin: 0 auto 144px;
    }
}
@media screen and (max-width:609px){
    .none-609{
        display: none;
    }
    .block-609{
        display: block;
    }
}
@media screen and (max-width:504px){
    #story #concept{
        margin-bottom: 96px;
    }
    .none1071,.none-504{
        display: none;
    }
    .block-1071,.block-504{
        display: block;
    }
    #story #concept .concept-inner .text{
        width: fit-content;
    }
}
@media screen and (max-width:441px){
    #story .mainvisual{
        margin: 0 auto 64px;
    }
    #story #concept{
        margin-bottom: 72px;
    }
    #story #concept h3{
        margin-bottom: 16px;
    }
    .access-img{
        margin-bottom: 96px;
    }
    #story-grid01-sp .text hgroup{
        margin: 0 auto 2.5rem;
    }
    #story-grid04-pc{
        margin: 0 auto 88px;
    }
    .to-corai{
        margin: 0 auto 80px;
    }
}
@media screen and (max-width:378px){
    .block-1071{
        display: none;
    }
    .block-378{
        display: block;
    }
}



/* ---------------- */
/* --CUISINEページ-- */
/* ---------------- */
.block-630{
    display: none;
}
#cuisine .mainvisual{
    width: 100%;
    height: 100dvh;
    background: url(./img/cuisine/cuisine-main.webp) bottom/cover no-repeat;
    margin: 0 auto 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#cuisine #concept{
    margin-bottom: 126px;
}
#cuisine #concept h2{
    margin-bottom: 52px;
    line-height: 2;
}
#cuisine .sl01{
    width: min(765px, 80%);
    margin: 0 auto 108px;
    overflow: hidden;
}
#cuisine section.sl01:nth-of-type(3){
    margin: 0 auto 208px;
}
#cuisine .sl01 .text{
    width: 100%;
    display: flex;
}
#cuisine .sl01 .text .midashi{
    width: 48px;
    flex-shrink: 0;
}
#cuisine .sl01 .text .midashi h3{
    font-size: 22px;
    writing-mode: vertical-rl;
    line-height: 1;
    margin: 8px 0 0 0;
}
.space2{
    margin: 0 0 2rem;
}
#cuisine article{
    width: min(765px, 80%);
    margin: 0 auto 80px;
}
#cuisine article h2{
    font-size: 22px;
    font-weight: normal;
    margin: 0 auto 96px;
}
#cuisine .article-inner{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#cuisine .article-inner .article-card{
    width: 48%;
    text-align: left;
}
#cuisine .article-inner .article-card .card-img{
    width: 100%;
    aspect-ratio: 316/237;
    margin-bottom: 48px;
}
#cuisine .article-inner .article-card:nth-child(1) .card-img{
    background: url(./img/cuisine/quili.webp) center/cover no-repeat;
}
#cuisine .article-inner .article-card:nth-child(2) .card-img{
    background: url(./img/cuisine/mikado.webp) center/cover no-repeat;
}
#cuisine article .article-card .card-text h3{
    font-size: 16px;
    font-weight: normal;
    margin: 0 auto 20px;
}
#cuisine article .article-card .card-text p{
    font-size: 14px;
}
@media screen and (max-width:767px){
    #cuisine .mainvisual{
        height: auto;
        aspect-ratio: 880/1131;
        background: url(./img/cuisine/cuisine-main-sp.webp) bottom/cover no-repeat;
        margin: 0 auto 80px;
    }
    #cuisine #concept{
        margin-bottom: 80px;
    }
    #cuisine #concept h2{
        margin-bottom: 32px;
    }
    #cuisine .sl01{
        width: 90%;
        margin: 0 auto 60px;
    }
    #cuisine section.sl01:nth-of-type(3){
        margin: 0 auto 120px;
    }
    #cuisine article{
        width: 90%;
        margin: 0 auto 44px;
    }
    #cuisine article h2{
        margin: 0 auto 56px;
    }
    #cuisine .article-inner .article-card .card-img{
        width: 100%;
        aspect-ratio: 1;
        margin-bottom: 26px;
    }
    #cuisine .article-inner .article-card:nth-child(1) .card-img{
        background: url(./img/cuisine/quili-sp.webp) center/cover no-repeat;
    }
    #cuisine .article-inner .article-card:nth-child(2) .card-img{
        background: url(./img/cuisine/mikado-sp.webp) center/cover no-repeat;
    }
    #cuisine article .article-card .card-text h3{
        margin: 0 auto 16px;
    }
}
@media screen and (max-width:630px){
    .none-630{
        display: none;
    }
    .block-630{
        display: block;
    }
}
@media screen and (max-width:441px){
    #cuisine #concept h2{
        margin-bottom: 32px;
    }
    #cuisine .sl01{
        margin: 0 auto 54px;
    }
    #cuisine section.sl01:nth-of-type(3){
        margin: 0 auto 88px;
    }
    #cuisine article{
        width: 90%;
        margin: 0 auto 44px;
    }
    #cuisine .article-inner{
        flex-direction: column;
        justify-content: center;
    }
    #cuisine .article-inner .article-card{
        width: 77.8%;
        margin: 0 auto 54px;
    }
    #cuisine .article-inner .article-card .card-img{
        width: 100%;
        aspect-ratio: 1;
        margin-bottom: 26px;
    }
    #cuisine article .article-card .card-text h3{
        margin: 0 auto 14px;
    }
}