@charset "utf-8";

/* =========================================================
    トップページ
    ・文字は rem（カンプ「標準」= 1rem 16px。コメントにカンプの px を併記）
    ・画像・枠・余白はカンプどおりの px 固定
    ・767px 以下が SP（SP は最小 375px。縮む要素は 375px の大きさで止める）
========================================================= */

/* =========================================================
    FV（メインビジュアル）
========================================================= */
/* 重なり順：FV（背景の丸など）は下、main（お知らせ以降）は上
    FV の中の重なり（スライダー・ロゴなど）は FV の中だけで完結させる（isolation）
    ※ブラウザによって重なり方が変わらないよう、FV と main の順番をはっきり決めている */
#mainvisual {
    --fv-slide-w: min(880px, calc(100vw - 280px));
    --fv-gap: min(104px, 7vw);
    position: relative;
    z-index: 0;
    isolation: isolate;
    padding-top: 140px;
    overflow-x: clip;
}

main {
    position: relative;
    z-index: 1;
}

/* 背景の飾り（家紋・紗綾形・網代）：縮小せず固定サイズ、はみ出しは隠す */
.fv-bg img,
.fv-logo img {
    position: absolute;
    top: 30px;
    left: calc(50% - 633px);
    width: 1338px;
    max-width: none;
}

.fv-bg img {
    z-index: 0;
}

/* ロゴだけスライダーの上に重ねる（背景画像のロゴ部分だけを切り抜いて表示） */
.fv-logo img {
    z-index: 2;
    clip-path: inset(0 633px 678px 570px);
    pointer-events: none;
}

.fv-slider {
    position: relative;
    z-index: 1;
}

.fv-slider-track {
    display: flex;
    gap: var(--fv-gap);
    will-change: transform;
}

/* 流れる速さ（main.js の表示時間とあわせて調整） */
.fv-slider-track.is-animating {
    transition: transform 1.4s ease-in-out;
}

.fv-slide {
    flex-shrink: 0;
    width: var(--fv-slide-w);
}

/* 最初の表示：見えている写真が左から順に、少し下からふわっと現れる（main.js が .is-intro と .is-shown を付ける） */
.fv-slider.is-intro .fv-slide {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fv-slider.is-intro .fv-slide.is-shown {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fv-slider.is-intro .fv-slide {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.fv-slide img {
    aspect-ratio: 880 / 580;
    border-radius: 20px;
    box-shadow: 10px 10px 0 var(--shadow);
}

/* スライダーボタン：表示中のバーが時間経過で左から黄色になる。押すとその写真が中央に来る
    ※見た目のバーは 3px。押しやすいように、ボタン自体は上下に広げている */
.fv-slider-dots {
    position: absolute;
    bottom: 17px;
    left: 50%;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}

.fv-slider-dot {
    position: relative;
    width: 30px;
    height: 19px;
}

.fv-slider-dot::before,
.fv-slider-dot::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--white);
}

.fv-slider-dot::after {
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left;
}

.fv-slider-dot.is-active::after {
    animation: fv-dot-progress var(--fv-interval, 5s) linear forwards;
}

@keyframes fv-dot-progress {
    to {
        transform: scaleX(1);
    }
}

.fv-catch {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    padding-inline: 20px;
    font-family: var(--Mincho);
    text-align: center;
}

.fv-catch-main {
    font-size: 2.3rem; /* 36.8px */
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
}

.fv-catch-sub {
    font-size: 1.6rem; /* 25.6px */
    line-height: 1.5;
    letter-spacing: 0.05em;
}

@media (max-width: 767px) {
    #mainvisual {
        --fv-slide-w: 312px;
        --fv-gap: 19px;
        padding-top: 219px;
    }

    .fv-bg img {
        top: 80px;
        left: calc(50% - 259px);
        width: 493px;
    }

    .fv-logo img {
        top: 95px;
        left: calc(50% - 53px);
        width: 107px;
        clip-path: none;
    }

    .fv-slide img {
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        box-shadow: 5px 5px 0 var(--shadow);
    }

    .fv-slider-dots {
        bottom: 10px;
        gap: 15px;
    }

    .fv-slider-dot {
        width: 24px;
    }

    .fv-catch {
        margin-top: 30px;
    }

    .fv-catch-sub {
        margin-top: 10px;
    }
}

/* =========================================================
    お知らせ
========================================================= */
/* FV の背景の丸（網代）より前に出す（丸が黄色い枠の後ろに回る） */
.news {
    position: relative;
    z-index: 1;
    margin-top: 63px;
    padding: 60px 20px 104px;
    border-radius: 80px;
    background: var(--yellow);
}

.news-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 340px));
    justify-content: center;
    gap: 40px min(90px, 5vw);
    margin-top: 54px;
}

.news-item img {
    aspect-ratio: 340 / 255;
}

.news-date {
    display: block;
    margin-top: 20px;
    font-size: 1.125rem; /* 18px */
    font-weight: 300;
    line-height: 1.4;
}

.news-title {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    font-size: 1.25rem; /* 20px */
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news .btn-wrap {
    margin-top: 50px;
}

.news-banner {
    display: block;
    width: min(1003px, 100%);
    margin: 92px auto 0;
}

.news-banner img {
    aspect-ratio: 1004 / 401;
}

@media (max-width: 767px) {
    .news {
        margin-top: 70px;
        padding: 60px 25px 63px;
        border-radius: 40px;
    }

    /* 375px の画面のときの幅（325px）より小さくしない */
    .news-list {
        grid-template-columns: minmax(325px, 340px);
        gap: 50px;
        margin-top: 50px;
    }

    .news .btn-wrap {
        margin-top: 50px;
    }

    .news-banner {
        min-width: 325px;
        margin-top: 50px;
    }
}

/* =========================================================
    コンセプト
    PC：写真・雲・山の背景（1920px）を縮小せず中央に置き、はみ出しは隠す
    SP：上の写真（concept01-sp）＋ 背景（concept02-sp）
========================================================= */
.concept {
    margin-top: 97px;
    overflow-x: clip;
}

/* 背景画像（写真・雲・建物・山）は 1 枚のまま、枠の上に固定して表示する（画面幅 456px 以下は上下に分ける。下の @media 参照） */
.concept-stage {
    --bg-top: 0px;      /* 背景画像の位置（枠の上から） */
    position: relative;
    min-height: 1406px;
    padding: 76px 0 395px;
    text-align: center;
}

.concept-bg img {
    position: absolute;
    top: var(--bg-top);
    left: calc(50% - 960.5px);
    width: 1921px;
    max-width: none;
}

/* 背景の下半分と、間を埋める白は、画面幅 456px 以下だけ使う */
.concept-bg-bottom,
.concept-bg-fill {
    display: none;
}

.concept-copy,
.concept-text,
/* ロゴ（マーク＋名前）：位置は固定せず、文章のすぐ下に続けて置く
margin-top を大きくすれば下へずらせる */
.concept-name {
    position: relative;
    z-index: 1;
}

.concept-text .sp-none{
    display: block;
    line-height: 0;
}

/* 縦書きのコピー：列の長さは固定。文字が大きくなったら列が横に増える（下の文章・ロゴは押し下げない） */
.concept-copy {
    width: fit-content;
    /* 列の長さはカンプの 470px で固定（下の文章・ロゴの位置に影響させない）
        文字が大きくて入りきらないときは、列が横に増える */
    height: 470px;
    margin: 0 auto;
    font-family: var(--Mincho);
    font-size: 1.44rem; /* 27.68px 折り返し少ない値 */
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: 0.04em;
    text-align: left;
    writing-mode: vertical-rl;
}

.concept-copy-line {
    display: block;
}

.concept-copy-line + .concept-copy-line {
    padding-inline-start: 2.5em;
}

/* 改行は HTML の <br> の位置だけ（それ以外では折り返さない）
    標準：雄大な阿蘇の外輪山を背景に／旅の寛ぎとやすらぎのひととき（カンプどおり 2 行）
    大　：雄大な阿蘇の外輪山を背景に／旅の寛ぎとやすらぎの／ひととき
    特大：雄大な／阿蘇の外輪山を背景に／旅の寛ぎと／やすらぎのひととき */
.concept-copy-line {
    white-space: nowrap;
}

.concept-copy-line br {
    display: none;
}

html[data-text-size="large"] .concept-copy-line .br-large,
html[data-text-size="xlarge"] .concept-copy-line .br-xlarge {
    display: inline;
}

.concept-text {
    margin-top: 73px;
    padding-inline: 20px;
    font-size: 1.125rem; /* 18px */
    line-height: 2;
    letter-spacing: 0.01em;
}

/* 文章とロゴの間：文字サイズ（標準・大・特大）ごとに指定する（--name-gap の値を変えれば調整できる）
    ※SP の値は @media (max-width: 767px) の中でまとめて指定 */
.concept-stage {
    --name-gap: 61px;   /* 標準 */
}

html[data-text-size="large"] .concept-stage {
    --name-gap: 46px;   /* 大 */
}

html[data-text-size="xlarge"] .concept-stage {
    --name-gap: 31px;   /* 特大 */
}

.concept-name {
    margin-top: var(--name-gap);
}

.concept-name img {
    width: 71.59px;
    margin-inline: auto;
}

/* ヘッダーのロゴと同じ組み方（字間なし・カナを詰める） */
.concept-name p {
    margin-top: 4px;
    font-family: var(--Mincho);
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.2;
    letter-spacing: 0;
}

.concept-name-sub,
.concept-name-main {
    display: block;
}

.concept-name-sub {
    font-size: 1.446rem; /* 23.15px */
}

.concept-name-main {
    font-size: 1.929rem; /* 30.87px */
}

/* ---------------------------------------------------------
    PC（768px 以上）：ロゴの名前（阿蘇内牧温泉／阿蘇 五岳ホテル）を文字サイズ（標準・大・特大）ごとに指定する
    ここの数字を変えれば調整できる（SP の値は @media (max-width: 767px) の一番下）
--------------------------------------------------------- */
@media (min-width: 768px) {
    /* PC・標準：阿蘇内牧温泉 */
    .concept-name-sub {
        font-size: 23.15px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* PC・標準：阿蘇 五岳ホテル */
    .concept-name-main {
        font-size: 30.87px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* PC・大：阿蘇内牧温泉 */
    html[data-text-size="large"] .concept-name-sub {
        font-size: 28.9px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* PC・大：阿蘇 五岳ホテル */
    html[data-text-size="large"] .concept-name-main {
        font-size: 38.6px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* PC・特大：阿蘇内牧温泉 */
    html[data-text-size="xlarge"] .concept-name-sub {
        font-size: 34.7px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* PC・特大：阿蘇 五岳ホテル */
    html[data-text-size="xlarge"] .concept-name-main {
        font-size: 46.3px;
        line-height: 1.45;
        letter-spacing: 0;
    }
}

/* ---------------------------------------------------------
    PC（768px 以上）・特大のとき：文章とロゴを個別に指定する（標準・大は今までの指定のまま）
    ここの数字を変えれば調整できる
--------------------------------------------------------- */
@media (min-width: 768px) {
    /* PC・特大：キャッチコピー */
    html[data-text-size="xlarge"] .concept-copy {
        height: 470px;          /* 列の長さ */
        font-size: 1.73rem;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }

    /* PC・特大：キャッチコピーの 2 列目の字下げ */
    html[data-text-size="xlarge"] .concept-copy-line + .concept-copy-line {
        padding-inline-start: 105px;
    }

    /* PC・特大：文章 */
    html[data-text-size="xlarge"] .concept-text {
        font-size: 27px;
        margin-top: 48px;     /* キャッチコピーとの間 */
        padding-inline: 20px;
        line-height: 2;
    }

    /* PC・特大：ロゴ（文章との間） */
    html[data-text-size="xlarge"] .concept-name {
        margin-top: 24px;
    }

    /* PC・特大：ロゴマーク */
    html[data-text-size="xlarge"] .concept-name img {
        width: 64px;
    }

    /* PC・特大：ロゴマークと名前の間 */
    html[data-text-size="xlarge"] .concept-name p {
        margin-top: 4px;
    }
}

@media (max-width: 767px) {
    .concept {
        margin-top: 57px;
    }

    .concept-photo-sp {
        width: 390px;
        max-width: none;
        margin-inline: auto;
    }

    /* 背景（表示 900 × 1143px）は枠の上から 389px に置く
        下の余白 306px ＝ 黄色い建物の上端から画像の下端まで
        ロゴは、文章の下から建物の上端までの間の上下中央に置く（文字サイズが変わっても上や下に寄らない） */
    .concept-stage {
        --bg-h: 1143px;
        --bg-top: 389px;
        display: flex;
        flex-direction: column;
        min-height: 1532px;
        padding: 36px 0 306px;
    }

    .concept-bg img {
        left: calc(50% - 437.75px);
        width: 900px;
    }

    .concept-copy {
        height: 392px;
        margin-bottom: var(--text-margin-top);  /* 文章との最低限の間（余りは文章の上の auto で足す） */
        font-size: 1.4375rem; /* 23px */
        line-height: 1.85;
    }

    .concept-copy-line + .concept-copy-line {
        padding-inline-start: 2em;
    }

    /* 特大のときだけ：キャッチコピー（ここの数字を変えれば調整できる） */
    html[data-text-size="xlarge"] .concept-copy {
        height: 392px;          /* 列の長さ */
        font-size: 34.5px;
        line-height: 1.85;
        letter-spacing: 0.04em;
    }

    /* 特大のときだけ：キャッチコピーの 2 列目の字下げ */
    html[data-text-size="xlarge"] .concept-copy-line + .concept-copy-line {
        padding-inline-start: 69px;
    }

    /* ---------------------------------------------------------
        文章とロゴの値：文字サイズ（標準・大・特大）ごとに指定する
        ここの数字を変えれば調整できる（0 のときも 0px のように単位を付ける）
    --------------------------------------------------------- */
    /* 標準（1rem = 16px） */
    .concept-stage {
        --text-font-size: 1.125rem;      /* 文章の文字の大きさ（18px） */
        --text-width: 96%;           /* 文章の幅 */
        --text-margin-top: 304px;    /* 文章の上の余白（写真との間） */
        --text-padding-inline: 0px;  /* 文章の左右の余白 */
        --text-line-height: 1.8;     /* 文章の行の高さ */
        --name-gap: 60px;            /* ロゴの上下の余白（文章との間・建物との間） */
        --name-img-width: 71px;      /* ロゴマークの幅 */
        --name-p-margin-top: 4px;    /* ロゴマークと名前の間 */
    }

    /* 大（1rem = 20px） */
    html[data-text-size="large"] .concept-stage {
        --text-font-size: 1.125rem;      /* 22.5px */
        --text-width: 96%;
        --text-margin-top: 320px;
        --text-padding-inline: 0px;
        --text-line-height: 1.8;
        --name-gap: 12px;
        --name-img-width: 64px;
        --name-p-margin-top: 4px;
    }

    /* 特大（1rem = 24px） */
    html[data-text-size="xlarge"] .concept-stage {
        --text-font-size: 23px;          /* 特大は px で直接指定（大きくなりすぎないよう、ここの数字で決める） */
        --text-width: 96%;
        --text-margin-top: 312px;
        --text-padding-inline: 0px;
        --text-line-height: 1.6;
        --name-gap: 8px;
        --name-img-width: 56px;
        --name-p-margin-top: 4px;
    }

    /* 文章 */
    .concept-text {
        font-size: var(--text-font-size);
        width: var(--text-width);
        /* 枠に余りがあるときは、文章の上・ロゴの上・ロゴの下に同じだけ分ける（上下の均等割り） */
        margin: auto auto 0;
        padding-inline: var(--text-padding-inline);
        /* 文節で折り返す（Chrome 系のみ。Safari は通常の折り返し） */
        word-break: auto-phrase;
        line-height: var(--text-line-height);
    }

    /* ロゴ：上下に同じ余白（--name-gap）をとり、枠に余りがあるときは上下に同じだけ分ける */
    .concept-name {
        margin-block: auto;
        padding-block: var(--name-gap);
    }

    .concept-name img {
        width: var(--name-img-width);
    }

    .concept-name p {
        margin-top: var(--name-p-margin-top);
    }

    /* ---------------------------------------------------------
        ロゴの名前（阿蘇内牧温泉／阿蘇 五岳ホテル）：文字サイズ（標準・大・特大）ごとに指定する
        ここの数字を変えれば調整できる
    --------------------------------------------------------- */
    /* 標準：阿蘇内牧温泉 */
    .concept-name-sub {
        font-size: 1.446rem; /* 23.15px */
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* 標準：阿蘇 五岳ホテル */
    .concept-name-main {
        font-size: 1.929rem; /* 30.87px */
        line-height: 1.45;
        letter-spacing: 0;
    }

    /* 大：阿蘇内牧温泉 */
    html[data-text-size="large"] .concept-name-sub {
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: 0;
    }

    /* 大：阿蘇 五岳ホテル */
    html[data-text-size="large"] .concept-name-main {
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: 0;
    }

    /* 特大：阿蘇内牧温泉 */
    html[data-text-size="xlarge"] .concept-name-sub {
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: 0;
    }

    /* 特大：阿蘇 五岳ホテル */
    html[data-text-size="xlarge"] .concept-name-main {
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: 0;
    }
}

@media (max-width: 545px) {
    .concept-text {
        .sp-none{display: none;}
    }
}

/* 画面幅 456px 以下：雲が画面の横いっぱいに広がるので、背景を上下に分けて、文字が増えたぶん雲を縦に伸ばす
    上（写真・雲）：枠の上に固定。画像の上から 570px まで（雲の幅がいちばん広く、画面幅 456px まで横いっぱい白）
    下（雲・建物・山）：枠の下に固定。570px から下 → 建物はいつもロゴの下
    間：枠が伸びたぶんを雲と同じ白で埋める（つなぎ目に線が出ないよう上下 1px ずつ重ねる） */
@media (max-width: 456px) {
    .concept-stage {
        --bg-cut: 570px;
    }

    .concept-bg img {
        clip-path: inset(0 0 calc(var(--bg-h) - var(--bg-cut)) 0);
    }

    .concept-bg-bottom {
        display: block;
    }

    .concept-bg-bottom img {
        top: auto;
        bottom: 0;
        clip-path: inset(var(--bg-cut) 0 0 0);
    }

    .concept-bg-fill {
        display: block;
        position: absolute;
        top: calc(var(--bg-top) + var(--bg-cut) - 1px);
        bottom: calc(var(--bg-h) - var(--bg-cut) - 1px);
        left: 0;
        right: 0;
        background: var(--white);
    }
}

/* =========================================================
    おすすめ情報
========================================================= */
.pickup {
    margin-top: 15px;
    padding-inline: 20px;
}

.pickup-inner {
    width: min(1200px, 100%);
    margin-inline: auto;
    padding: 34px 64px 59px;
    border-radius: 30px;
    background: var(--white);
}

.pickup-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 330px));
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}

.pickup-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
}

.pickup-card img {
    aspect-ratio: 1 / 1;
}

.pickup-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
}

.pickup-card-label {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-family: var(--Mincho);
    font-size: 2.25rem; /* 36px */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
}

.pickup-card .pickup-card-deco {
    position: absolute;
    right: 14px;
    bottom: 16px;
    z-index: 1;
    width: 33.04px;
    aspect-ratio: auto;
}

.pickup-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
    margin-top: 29px;
}

/* プラン一覧・日付から検索
    ・文字（日本語）がボタンの左右中央に来るよう、アイコンは文字の左に absolute で添える
    ・アイコン・飾りは文字サイズに関係なく固定。文字は折り返さない */
.pickup-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 109px;
    padding: 10px 50px;
    border-radius: 10px;
    color: var(--white);
    font-family: var(--Mincho);
    font-size: min(1.875rem,35px); /* 30px～35px */
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.pickup-btn-text {
    position: relative;
}

.pickup-btn .pickup-btn-icon {
    position: absolute;
    top: 50%;
    right: calc(100% + 22px);
    width: 27px;
    transform: translateY(-50%);
}

.pickup-btn-plan {
    background: var(--red);
}

.pickup-btn-search {
    background: var(--dark);
}

.pickup-btn-search .pickup-btn-icon {
    width: 27px;
}

.pickup-btn .pickup-btn-deco {
    position: absolute;
    right: 14px;
    bottom: 16px;
    width: 33.04px;
}

/* タブレット：ボタンが狭くなるので白い枠の余白を詰める */
@media (max-width: 1199px) {
    .pickup-inner {
        padding-inline: 30px;
    }
}

@media (max-width: 767px) {
    .pickup {
        margin-top: 23px;
        padding-inline: 0;
    }

    .pickup-inner {
        padding: 50px 0px 71px;
        border-radius: 20px;
    }

    .pickup-list {
        grid-template-columns: minmax(0, 352px);
        justify-content: center;
        gap: 34px;
    }

    .pickup-btns {
        grid-template-columns: minmax(0, 352px);
        justify-content: center;
        gap: 19px;
        margin-top: 42px;
    }

    .pickup-btn {
        min-height: 80px;
    }
}

/* =========================================================
    客室・温泉・施設・お食事
    PC：写真と柄が 1 枚になった画像（1380px 前後）を固定サイズで置き、文字を重ねる
        1440px より狭い画面では、写真が切れないように画面幅に合わせて縮小する
    SP：柄の背景（-bg-sp）＋ 文字 ＋ 写真（-sp）
========================================================= */
/* 文字（縦書きの見出し〜ボタン）を、画像の中の柄の円の左右中央に合わせる
    --img-left / --img-w：画像の位置と幅
    --circle：画像の幅に対する円の中心の位置（画像から実測した比率）
    --edge：円の中心から写真の端までの距離（画像の幅に対する比率）
    --circle-sp：SP の柄の背景（574px）に対する円の中心の位置
    文字の欄の幅（--body-w）は、写真との間に必ず --photo-gap の余白が残るように計算する
    （画面が狭くなると欄が細くなり、文字は折り返す） */
.feature {
    --photo-gap: 12px;
    /* 標準で 400px（25rem）。文字が大きくなったら広げる（写真との余白は必ず残す） */
    --body-w: min(25rem, (var(--img-w) * var(--edge) - var(--photo-gap)) * 2);
    position: relative;
}

.feature-image img {
    position: absolute;
    top: 0;
    left: var(--img-left);
    width: var(--img-w);
    max-width: none;
}

.feature-body {
    position: relative;
    z-index: 1;
    width: var(--body-w);
    margin-left: calc(var(--img-left) + var(--img-w) * var(--circle) - var(--body-w) / 2);
    padding-bottom: 40px;
    text-align: center;
}

.feature-title img {
    width: 43px;
    margin-inline: auto;
}

.feature-title-ja {
    width: fit-content;
    margin: 12px auto 0;
    font-family: var(--Mincho);
    font-size: 1.875rem; /* 30px */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05em;
    writing-mode: vertical-rl;
}

.feature-title-en {
    margin-top: 16px;
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    letter-spacing: 0.08em;
}

.feature-text {
    margin-top: 40px;
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
}

/* ボタンの幅は固定（300px）。文字の欄がそれより細くなるタブレットのときだけ欄に合わせる */
.feature-body .btn {
    max-width: 100%;
    margin-top: 50px;
}

/* 客室：写真が左、文字が右（円の中心 1038 / 1380px、写真の右端 824px） */
.feature-room {
    --img-left: calc(50% - min(670px, 46.53%));
    --img-w: min(1380px, 95.83%);
    --circle: 0.752;
    --edge: 0.155;
    --circle-sp: 0.531;
    min-height: min(775px, 53.82vw);
    margin-top: 72px;
}

/* 1 文字目の位置：画像（円）の上から画像の幅の 9.71%（カンプ 134 / 1380px）。画像と一緒に縮む */
.feature-room .feature-body {
    padding-top: calc(var(--img-w) * 0.0971);
}

/* 温泉・施設：写真が右、文字が左（円の中心 340 / 1391px、写真の左端 560px） */
.feature-onsen {
    --img-left: calc(50% - min(689px, 47.85%));
    --img-w: min(1391px, 96.6%);
    --circle: 0.244;
    --edge: 0.158;
    --circle-sp: 0.469;
    min-height: min(757px, 52.57vw);
    margin-top: 18px;
}

/* 1 文字目の位置：画像の幅の 6.97%（カンプ 97 / 1391px） */
.feature-onsen .feature-body {
    padding-top: calc(var(--img-w) * 0.0697);
}

/* お食事：写真が左、文字が右（円の中心 1037 / 1380px、写真の右端 799px ＝ 画像から実測） */
.feature-food {
    --img-left: calc(50% - min(670px, 46.53%));
    --img-w: min(1380px, 95.83%);
    --circle: 0.751;
    --edge: 0.172;
    --circle-sp: 0.525;
    min-height: min(754px, 52.36vw);
    margin-top: 17px;
}

/* 1 文字目の位置：画像の幅の 8.55%（カンプ 118 / 1380px） */
.feature-food .feature-body {
    padding-top: calc(var(--img-w) * 0.0855);
}

/* 画面幅 1267px 以下：お食事の文章の幅を、客室の文章と同じにする
    （客室と画像の大きさが同じなので、客室の --edge（0.155）で計算すれば同じ幅になる）
    画像の幅（95.83%）はセクションの幅が基準なので、文章の中でもセクションの幅（cqw）で計算する */
@media (min-width: 768px) and (max-width: 1267px) {
    .feature-food {
        container-type: inline-size;
    }

    .feature-food .feature-text {
        width: min(25rem, (min(1380px, 95.83cqw) * 0.155 - var(--photo-gap)) * 2);
        margin-inline: auto;
    }
}

/* 画面幅 768〜1354px：文章の <br> を使わず、欄の幅で折り返す（SP は <br> のまま）
    class="br-keep" の <br> だけは残す */
@media (min-width: 768px) and (max-width: 1354px) {
    .feature-text br:not(.br-keep) {
        display: none;
    }
}

/* 特大のときだけ：文章の文字の大きさ */
html[data-text-size="xlarge"] .feature-text {
    font-size: 1rem;
}

/* ---------------------------------------------------------
    PC（768px 以上）・縦書きの見出しの上の余白：大・特大のときだけ個別に指定する（標準は上の 3 つ）
    ここの数字を変えれば調整できる（今は標準と同じ値）
--------------------------------------------------------- */
@media (min-width: 768px) {
    /* 大：客室 */
    html[data-text-size="large"] .feature-room .feature-body {
        padding-top: calc(var(--img-w) * 0.08);
    }

    /* 大：温泉・施設 */
    html[data-text-size="large"] .feature-onsen .feature-body {
        padding-top: calc(var(--img-w) * 0.045);
    }

    /* 大：お食事 */
    html[data-text-size="large"] .feature-food .feature-body {
        padding-top: calc(var(--img-w) * 0.06);
    }

    /* 特大：客室 */
    html[data-text-size="xlarge"] .feature-room .feature-body {
        padding-top: calc(var(--img-w) * 0.05);
    }

    /* 特大：温泉・施設 */
    html[data-text-size="xlarge"] .feature-onsen .feature-body {
        padding-top: calc(var(--img-w) * 0.04);
    }

    /* 特大：お食事 */
    html[data-text-size="xlarge"] .feature-food .feature-body {
        padding-top: calc(var(--img-w) * 0.05);
    }
}

@media (max-width: 767px) {
    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        overflow-x: clip;
    }

    /* 柄の背景：円の中心が画面の中央（＝文字の中央）に来るように置く */
    .feature-bg img {
        position: absolute;
        left: calc(50% - 574px * var(--circle-sp));
        width: 574px;
        max-width: none;
    }

    /* 写真：幅 80%。カンプのサイズ（352px）より小さくしない */
    .feature-image {
        position: relative;
        z-index: 1;
        order: 2;
        width: 80%;
        min-width: 352px;
        margin-top: 49px;
    }

    .feature-image img {
        position: static;
        width: 100%;
        border-radius: 10px;
        box-shadow: 5px 5px 0 var(--shadow);
    }

    .feature-body {
        order: 1;
        width: 100%;
        margin-left: 0;
        padding: 0 20px;
    }

    .feature-room,
    .feature-onsen,
    .feature-food {
        margin-top: 0;
    }

    .feature-room {
        margin-top: 20px;
        padding-top: 100px;
    }

    .feature-room .feature-bg img {
        top: 40px;
    }

    .feature-onsen {
        padding-top: 112px;
    }

    .feature-food {
        padding-top: 116px;
    }

    .feature-onsen .feature-bg img,
    .feature-food .feature-bg img {
        top: 66px;
    }

    .feature-room .feature-body,
    .feature-onsen .feature-body,
    .feature-food .feature-body {
        padding-top: 0;
    }

    .feature-body .btn {
        width: 311px;
    }
}

/* =========================================================
    アクセス・Instagram（白背景）
========================================================= */
.white-area {
    margin-top: 134px;
    padding: 80px 20px 104px;
    border-radius: 80px 80px 0 0;
    background: var(--white);
}

.access-map {
    width: min(1200px, 100%);
    height: 500px;
    margin: 71px auto 0;
    overflow: hidden;
    border-radius: 30px;
}

.access-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.access-address {
    margin-top: 56px;
    font-size: 1.25rem; /* 20px */
    text-align: center;
}

.access .btn-wrap {
    margin-top: 30px;
}

.insta {
    padding-top: 140px;
}

.insta-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0;
}

.insta-title img {
    width: 34px;
}

.insta-title .insta-title-logo {
    width: 154px;
}

/* 写真の枠は 220px 固定（縮小しない）
    ・横 5 つが入る幅（1240px 以上）：5 つを 1 列
    ・それより狭いとき：横 3 つ × 2 段（6 つ目を表示）
    ・SP：横 2 つ × 3 段 */
.insta-list {
    display: grid;
    grid-template-columns: repeat(3, 220px);
    justify-content: center;
    gap: 25px;
    margin-top: 35px;
}

.insta-list a {
    display: block;
}

.insta-list img {
    aspect-ratio: 4 / 5;
}

/* @@ 仮表示：配置確認用に画像の上へ半透明のグレーを重ねる。
    Instagram の投稿に差し替えたら、このブロックを削除 */
.insta-list a {
    position: relative;
}

.insta-list a::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(128, 128, 128, 0.5);
}

@media (min-width: 1240px) {
    .insta-list {
        grid-template-columns: repeat(5, 220px);
    }

    .insta-item-extra {
        display: none;
    }
}

.insta .btn-wrap {
    margin-top: 56px;
}

@media (max-width: 767px) {
    .white-area {
        margin-top: 98px;
        padding: 82px 19px 30px;
        border-radius: 40px 40px 0 0;
    }

    /* 375px の画面のときの幅（337px）より小さくしない */
    .access-map {
        min-width: 337px;
        height: 300px;
        margin-top: 75px;
        border-radius: 15px;
    }

    .access-address {
        margin-top: 40px;
    }


    .insta {
        padding-top: 100px;
    }

    /* 375px の画面のときの幅（159px）より小さくしない */
    .insta-list {
        grid-template-columns: repeat(2, minmax(159px, 166px));
        gap: 20px 19px;
        margin-top: 30px;
    }

    .insta .btn-wrap {
        margin-top: 45px;
    }
}