/* ==========================================================
   Main Visual timed overlay
   ========================================================== */
.main-visual-timed-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.main-visual-timed-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(7.4vw, 123px);
    max-height: min(36%, 343px);
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease;
}

.main-visual-timed-image[src$="logo_w.svg"] {
    width: min(30vw, 540px);
    max-height: 100%;
}

.main-visual-timed-image.is-active {
    opacity: 1;
}

@media (max-width: 768px) {
    .main-visual {
        aspect-ratio: auto;
        height: 84.375vw;
        overflow: hidden;
    }

    .main-visual video {
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        object-fit: cover;
        display: block;
    }

    .main-visual-timed-image {
        width: min(18.93vw, 123px);
        max-height: 38%;
    }

    .main-visual-timed-image[src$="logo_w.svg"] {
        width: min(36vw, 240px);
        max-height: 45%;
    }

    .scroll-indicator {
        gap: 8px;
        padding-bottom: 12px;
    }

    .scroll-indicator .text {
        font-size: 10px;
    }

    .scroll-indicator .line {
        height: 48px;
    }
}

/* ==========================================================
   Concept セクション
   ========================================================== */
.u-nowrap {
    white-space: nowrap;
}

.p-top-concept {
    padding-top: 150px;
    padding-bottom: 180px;
}

.c-concept-text {
    writing-mode: vertical-rl;
    margin: 0 auto;
    height: 600px;
}

.c-concept-text__title {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-top: 0;
    margin-left: 76px;
    text-align: start; /* 縦書き: 上揃い（h2のtext-align:centerを上書き） */
}

.c-concept-text__body {
    font-size: var(--v-text-fs);
    line-height: 50px;
    letter-spacing: var(--v-text-ls);
}

/* PC縦書き時の段落間：段落内列間と同じ50pxに揃えるためmarginは0 */
.c-concept-text__body p {
    margin-left: 0;
}

.c-concept-text__body p:last-child {
    margin-left: 0;
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .p-top-concept {
        padding-top: var(--sp-space-l);
        padding-bottom: 7.69vw;
    }

    .c-concept-text {
        writing-mode: horizontal-tb;
        height: auto;
        text-align: center;
        width: 100%;
    }

    .c-concept-text__title {
        font-size: 6.15vw;
        font-weight: 600;
        text-align: center;
        margin-left: 0;
        margin-bottom: var(--sp-h2-mb);
        writing-mode: horizontal-tb;
    }

    .c-concept-text__body {
        font-size: var(--sp-v-text-fs);
        line-height: var(--sp-v-text-lh);
        writing-mode: horizontal-tb;
    }

    /* SP横書き時の段落間（下側）の余白と、新しい改行・はみ出し対策 */
    .c-concept-text__body p {
        margin-left: 0;
        margin-bottom: 0;

        /* 削除： white-space: nowrap; はオーバーフローの原因になるので消しました */

        /* ★新しい魔法1：句読点「、」「。」の前後の余白を詰めて、文字を1行に収めやすくする */
        font-feature-settings: "palt";

        /* ★新しい魔法2：行の最後で「す。」のように1文字だけが落ちるのを防ぐ */
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .c-concept-text__body p:last-child {
        margin-bottom: 0;
    }
}

/* ← 既存の max-width: 768px の閉じカッコ */

/* ==========================================================
   超小型スマホ（375px以下）用の救済措置
   ========================================================== */
@media (max-width: 375px) {
    .c-concept-text__body p {
        /* 画面が狭すぎる場合のみ、文字の隙間をなくして物理的に1行に収める */
        letter-spacing: 0;
    }
}

/* ==========================================================
   News セクション（お便り）
   ========================================================== */
.p-top-news {
    padding-bottom: var(--space-xl, 120px);
}

@media (max-width: 768px) {
    .p-top-news {
        padding-bottom: 21.54vw;
    }

    .p-top-news .l-news-container {
        max-width: 83.08vw;
        padding-right: 0;
        padding-left: 0;
    }
}

/* --- このセクション専用のコンテナ（法律：w1000px） --- */
.l-news-container {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-s, 20px);
    padding-left: var(--space-s, 20px);
}

/* --- 専用の見出し（既存CSSの干渉を防ぎ、中央寄せを強制） --- */
/* --- 専用の見出し --- */
.c-news-title {
    font-size: var(--h2-fs, 40px);
    letter-spacing: var(--h2-ls, 0.1em);
    margin-top: 0;

    /* ここを修正：見出しの下の余白を50pxに固定 */
    margin-bottom: 50px;

    text-align: center;
    font-family: var(--font-serif);
}

/* --- リストの大枠 --- */
.c-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(73, 61, 55, 0.2);
}

/* --- 各リストの線 --- */
.c-news-list__item {
    border-bottom: 1px solid rgba(73, 61, 55, 0.2);
}

/* --- リンク全体（横並び） --- */
.c-news-list__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    padding: 30px 0;
    transition: opacity 0.3s;
}

.c-news-list__link:hover {
    opacity: 0.7;
}

/* 日付とカテゴリのグループ */
.c-news-list__meta {
    display: flex;
    gap: 30px;
}

/* --- 日付 --- */
.c-news-list__date {
    margin-left: 80px;
    width: 130px;
    font-size: 16px;
    letter-spacing: var(--base-ls);
    white-space: nowrap;
}

/* --- カテゴリ --- */
.c-news-list__category {
    margin-right: 60px;
    width: 100px;
    font-size: 16px;
    letter-spacing: var(--base-ls);
    color: #8c6846;
    white-space: nowrap;
}

/* --- タイトル --- */
.c-news-list__title {
    flex: 1;
    font-size: var(--base-fs);
    /* タイトルは18pxのまま維持 */
    letter-spacing: var(--base-ls);
    line-height: var(--base-lh);
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    /* 前半の省略（.c-news-title などはそのまま残してください） */

    .c-news-list__link {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
        gap: 8px;
    }

    .c-news-list__meta {
        gap: 15px;
    }

    .c-news-list__date,
    .c-news-list__category {
        width: auto;
        margin-left: 0;
        /* スマホ表示ではPCの90px余白をリセット */
        margin-right: 0;
        /* スマホ表示ではPCの65px余白をリセット */
        font-size: var(--sp-base-fs);
        /* スマホ用のサイズに戻す */
    }

    .c-news-list__title {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
    }
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .c-news-title {
        font-size: 6.15vw;
        font-weight: 600;
        margin-top: var(--sp-h2-mt);
        margin-bottom: var(--sp-h2-mb);
    }

    .c-news-list__link {
        flex-direction: column;
        align-items: flex-start;
        /* 上下の余白をタイトに（35px→30px / 28px→20px 相当へ補正） */
        padding: 4.62vw 0 3.08vw 0;
        /* 日付行とタイトルの隙間を大幅に詰める（28px→10px 相当へ補正） */
        gap: 1.54vw;
    }

    .c-news-list__meta {
        display: flex;
        align-items: center;
        gap: 2.31vw;
    }

    .c-news-list__date,
    .c-news-list__category {
        width: auto;
        margin: 0;
        font-size: 2.77vw;
        /* 18px相当 */
        /* 行間による余白を消すために 1 に設定 */
        line-height: 1;
        white-space: nowrap;
    }

    .c-news-list__title {
        font-size: 3.08vw;
        /* 20px相当 */
        /* タイトルの行間も少し詰め気味に（1.4倍） */
        line-height: 1.4;
        margin: 0;
    }
}

/* ==========================================================
   Rooms セクション（客室）
   ========================================================== */
.p-top-rooms {
    padding: var(--space-xl) 0;
}

/* --- 画像エリア：100%表示 --- */
.c-rooms-visual {
    width: 100%;
    /* スクロールバーによる横揺れ防止 */
    overflow: hidden;
    margin-bottom: var(--h2-mt);
}

.c-rooms-visual img {
    /* 指示通り vw を使用 */
    width: 100vw;
    /* 親要素に対して中央に配置 */
    margin-left: calc(50% - 50vw);
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- テキストエリア --- */
.c-rooms-content {
    text-align: center;
}

.c-rooms-title {
    font-size: var(--h2-fs);
    letter-spacing: var(--h2-ls);
    margin-bottom: var(--h2-mb);
    font-family: var(--font-serif);
    font-weight: 600;
}

.c-rooms-text {
    font-size: var(--base-fs);
    line-height: var(--base-lh);
    letter-spacing: var(--base-ls);
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {

    .p-top-rooms {
        padding-top: 0;
    }

    /* 画像はスマホでも 100vw のまま維持されるため、余白の調整のみ */
    .c-rooms-visual {
        margin-bottom: var(--sp-h2-mt);
        height: 38.46vw;
    }

    .c-rooms-visual img {
        height: 100%;
    }

    /* テキストは foundation.css の法律（vw換算）に従う */
    .c-rooms-title {
        font-size: 6.15vw;
        font-weight: 600;
        margin-bottom: var(--sp-h2-mb);
    }

    .c-rooms-text {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
        padding: 0 4vw;
    }

    .c-rooms-list {
        margin-top: 7.69vw;
    }
}

/* ==========================================================
   Rooms セクション
   ========================================================== */
.p-top-rooms {
    padding-bottom: var(--space-xl);
    /* 120px */
}

/* --- 100%画像（繰り返しルール） --- */
.c-rooms-visual {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--h2-mt);
}

.c-rooms-visual img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- 客室グリッド --- */
.c-rooms-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    list-style: none;
    padding: 0;
    margin-top: 60px;
}

.c-rooms-list__item {
    position: relative;
}

.c-rooms-list__link {
    display: block;
    text-decoration: none;
    color: var(--white);
    transition: opacity 0.3s;
}

.c-rooms-list__link:hover {
    opacity: 0.8;
}

.c-rooms-list__img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================
   Rooms セクション（客室紹介）
   ========================================================== */
.p-top-rooms {
    padding-bottom: var(--space-xl);
    /* 120px */
}

/* --- 100%画像（メインビジュアル） --- */
.c-rooms-visual {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--h2-mt);
    /* 60px */
}

.c-rooms-visual img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- 客室グリッド（PC: 2カラム / SP: 縦積み） --- */
.c-rooms-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin-top: 80px;
}

.c-rooms-list__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 488 / 244;
}

.c-rooms-list__link {
    display: block;
    text-decoration: none;
    color: var(--white);
    transition: opacity 0.3s;
}

.c-rooms-list__link:hover {
    opacity: 0.8;
}

.c-rooms-list__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 画像の上の縦書き情報 --- */
.c-rooms-list__info {
    position: absolute;
    top: 27px;
    right: 25px;
    writing-mode: vertical-rl;
    display: block;
    text-align: start;
    color: var(--white);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.c-rooms-list__name {
    font-family: var(--font-serif);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-left: 25px;
}

.c-rooms-list__desc {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 28px;
    letter-spacing: 0.1em;
    font-weight: 400;
}

/* --- モバイル（スマホ）用：縦積み & vw換算 --- */
@media (max-width: 768px) {
    .c-rooms-list {
        /* 法律：スマホでは縦1列（1カラム）に積む */
        grid-template-columns: 1fr;
        gap: 2.31vw;
        /* 15px相当(15/650*100) */
        margin-top: 7.69vw;
        /* 50px相当(50/650*100) */
    }

    .c-rooms-list__info {
        /* 法律：スマホでも上揃えを維持（30px相当） */
        top: 4.62vw;
        right: 3.08vw;
        /* 20px相当 */
    }

    .c-rooms-list__name {
        font-size: 4.31vw;
        /* 28px相当 */
        margin-left: 3.08vw;
    }

    .c-rooms-list__desc {
        font-size: 2.62vw;
        /* 17px相当 */
        line-height: 4.31vw;
        /* 28px相当 */
    }
}

/* ==========================================================
   Cuisine セクション（会席料理）
   ========================================================== */
.p-top-cuisine {
    padding-bottom: var(--space-xl);
    /* 120px */
}

@media (max-width: 768px) {
    .p-top-cuisine .l-news-container {
        max-width: 83.08vw;
        padding-right: 0;
        padding-left: 0;
    }
}

/* --- 100%画像（繰り返しルール） --- */
.c-cuisine-visual {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--h2-mt);
    /* 60px */
}

.c-cuisine-visual img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- テキストエリア --- */
.c-cuisine-content {
    text-align: center;
}

.c-cuisine-title {
    font-size: var(--h2-fs);
    /* 40px */
    letter-spacing: var(--h2-ls);
    /* 0.1em */
    margin-bottom: var(--h2-mb);
    /* 30px */
    font-family: var(--font-serif);
}

.c-cuisine-text {
    font-size: var(--base-fs);
    /* 18px */
    line-height: var(--base-lh);
    /* 35px */
    letter-spacing: var(--base-ls);
    /* 0.05em */
}

/* --- モバイル（スマホ）用：vw換算 --- */
@media (max-width: 768px) {
    .p-top-cuisine {
        padding-bottom: var(--sp-space-l);
        /* 120px相当 */
    }

    .c-cuisine-visual {
        margin-bottom: var(--sp-h2-mt);
        /* 80px相当 */
    }

    .c-cuisine-title {
        font-size: var(--sp-h2-fs);
        /* 40px相当 */
        margin-bottom: var(--sp-h2-mb);
        /* 40px相当 */
    }

    .c-cuisine-text {
        font-size: var(--sp-base-fs);
        /* 22px相当 */
        line-height: var(--sp-base-lh);
        /* 45px相当 */
        padding: 0 4vw;
        /* スマホ時の可読性確保のための左右余白 */
    }
}

/* ==========================================================
   Cuisine セクション
   ========================================================== */
.p-top-cuisine {
    padding-bottom: var(--space-xl);
    /* 120px */
}

/* --- メインビジュアル：ここだけ 100vw --- */
.c-cuisine-visual {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--h2-mt);
}

.c-cuisine-visual img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- 四季の画像（実測値: W267×H430 / gap10px） --- */
.c-cuisine-seasons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-top: 60px;
    /* ラベル最大突き出し50px + 次ボタンまで40px */
    margin-bottom: 90px;
    width: 100%;
}

.c-cuisine-season-item {
    position: relative;
    flex: 0 0 calc(25% - 7.5px);
    aspect-ratio: 267 / 430;
}

.c-cuisine-season-img {
    width: 100%;
    height: 100%;
}

.c-cuisine-season-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 各画像の上端ずれ（春を基準=0） --- */
.is-spring  { margin-top: 0; }
.is-summer  { margin-top: 40px; }
.is-autumn  { margin-top: 10px; }
.is-winter  { margin-top: 75px; }

/* --- 季節ラベル共通 --- */
.c-cuisine-season-label {
    position: absolute;
    font-family: var(--font-serif);
    font-size: 70px;
    color: var(--white);
    line-height: 1;
    white-space: nowrap;
}

/* 春: 画像内側20px + 70px文字 → 50px外にはみ出す */
.is-spring .c-cuisine-season-label {
    bottom: -50px;
    left: -6px;
}

/* 夏: 同上 */
.is-summer .c-cuisine-season-label {
    bottom: -50px;
    left: 20px;
}

/* 秋: 同上 */
.is-autumn .c-cuisine-season-label {
    bottom: -50px;
    left: 30px;
}

/* 冬: 画像内側40px + 70px文字 → 30px外にはみ出す */
.is-winter .c-cuisine-season-label {
    bottom: -30px;
    left: 15px;
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {

    /* 四季の画像を2列のグリッドにする */
    .c-cuisine-seasons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2カラム */
        column-gap: 1.54vw;
        /* 左右の隙間（10px相当） */
        row-gap: 12.31vw;
        /* 上下の隙間（約80px） */
        margin-top: 10vw;
        margin-bottom: 25vw;
        /* 文字がはみ出す分、下の余白を広めに */
    }

    .c-cuisine-season-item {
        width: 100%;
        /* 一旦PCのズレ指定をすべてリセット */
        margin-top: 0;
    }

    /* --- スマホ版のずらし設定（右列を下げる） --- */
    .is-spring {
        margin-top: 0;
    }

    .is-autumn {
        margin-top: 0;
    }

    /* 右列の夏と冬だけ下にずらす（約50px相当） */
    .is-summer {
        margin-top: 7.69vw;
    }

    .is-winter {
        margin-top: 7.69vw;
    }

    /* --- スマホ版の季節ラベル（季節ごとに位置調整） --- */
    .c-cuisine-season-label {
        font-size: 10.77vw;
    }

    .is-spring .c-cuisine-season-label {
        bottom: -6.77vw;
        left: -0.46vw;
    }

    .is-summer .c-cuisine-season-label {
        bottom: -7.23vw;
        left: 3.08vw;
    }

    .is-autumn .c-cuisine-season-label {
        bottom: -6.92vw;
        left: 4.62vw;
    }

    .is-winter .c-cuisine-season-label {
        bottom: -8vw;
        left: 7.23vw;
    }
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    /* (中略：これまでの指定) */

    /* ボタン間の隙間を10px相当に調整 */
    .c-cuisine-buttons {
        gap: 1.54vw;
    }
}


/* ==========================================================
   料理セクション：ボタン配置エリア
   ========================================================== */
.c-cuisine-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* 料理セクションのボタンはテキスト左20px・矢印右14px（カンプ実測値） */
.c-cuisine-buttons .c-btn {
    padding-left: 20px;
}

.c-cuisine-buttons .c-btn::after {
    right: 14px;
}

/* ==========================================================
   料理の宿泊プラン（730px制限エリア）
   ========================================================== */
.c-cuisine-plans {
    max-width: 730px;
    margin: 100px auto 0;
    padding: 0;
}

.c-cuisine-plans .c-rooms-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 30px;
    letter-spacing: 0.1em;
}

/* --- プラングリッド（4×2） --- */
.c-plans-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-plans-list__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 176 / 300;
}

.c-plans-list__link {
    display: block;
    text-decoration: none;
    color: var(--white);
    transition: opacity 0.3s;
}

.c-plans-list__link:hover {
    opacity: 0.8;
}

.c-plans-list__img {
    width: 100%;
    height: 100%;
}

.c-plans-list__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 縦書きテキスト（上揃え） --- */
.c-plans-list__info {
    position: absolute;
    top: 13px;
    left: 20px;
    display: flex;
    flex-direction: row-reverse; /* DOMの先頭（desc）を右列、name を左列に */
    align-items: flex-start;
    gap: 7px;
    pointer-events: none;
}

.c-plans-list__name,
.c-plans-list__desc {
    writing-mode: vertical-rl;
    text-align: start;
    margin: 0;
}

.c-plans-list__name {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.5);
}

.c-plans-list__desc {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.5);
}

/* 縦中横：2桁数字を横並びに */
.tcy {
    text-combine-upright: all;
}

/* Card1：強い光彩 */
.c-plans-list__info.is-strong-shadow .c-plans-list__name,
.c-plans-list__info.is-strong-shadow .c-plans-list__desc {
    text-shadow:
        0 0 4px  rgba(0, 0, 0, 1),
        0 0 12px rgba(0, 0, 0, 1),
        0 0 24px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 1);
}

/* Card7：松茸/きのこ のペア間に余白（name1の左＝desc2との間） */
.c-plans-list__info.is-pair > p:nth-child(2) {
    margin-left: 8px;
}

/* めぐり：フォントを -2px */
.c-small-text {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

/* 4枚目：信州地酒めぐり（光彩削除 + name 行間1.5） */
.c-plans-list__info.is-spaced .c-plans-list__name,
.c-plans-list__info.is-spaced .c-plans-list__desc {
    text-shadow: none;
}

.c-plans-list__info.is-spaced .c-plans-list__name {
    line-height: 25px;
}

@media (max-width: 768px) {
    .c-plans-list__info.is-spaced .c-plans-list__name {
        line-height: 1 !important;
    }
}

@media (max-width: 768px) {
    .c-plans-list__info.is-pair > .c-plans-list__desc,
    .c-plans-list__info.is-pair > .c-plans-list__name {
        margin-left: 0 !important;
    }
}

/* 5枚目・is-black：光彩を子要素にも適用して削除 */
.c-plans-list__info.is-black .c-plans-list__name,
.c-plans-list__info.is-black .c-plans-list__desc {
    text-shadow: none;
}

/* 8枚目：旬鮮魚会席（白い光彩 強め） */
.c-plans-list__info.is-white-glow .c-plans-list__name,
.c-plans-list__info.is-white-glow .c-plans-list__desc {
    text-shadow:
        0 0 4px  rgba(255, 255, 255, 1),
        0 0 12px rgba(255, 255, 255, 1),
        0 0 24px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(255, 255, 255, 1);
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .c-cuisine-plans {
        margin-top: 15vw;
        max-width: 83.08vw;
        margin-left: auto;
        margin-right: auto;
    }

    .c-cuisine-plans .c-rooms-title {
        font-size: 5.38vw;
        font-weight: 600;
        margin-bottom: 7.69vw;
    }

    .c-plans-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.54vw;
    }

    .c-plans-list__item {
        aspect-ratio: 176 / 300;
    }

    .c-plans-list__item:nth-child(7) {
        grid-column: 1;
    }

    .c-plans-list__item:nth-child(8) {
        grid-column: 2;
    }

    .c-plans-list__info {
        top: 2vw;
        right: 2vw;
    }

    .c-plans-list__name {
        font-size: 4vw;
        margin-left: 1.5vw;
    }

    .c-plans-list__desc {
        font-size: 2.5vw;
        margin-left: 1vw;
    }
}

/* ==========================================================
   料理の宿泊プラン：位置・右寄せ上書き
   ========================================================== */
/* 4番・7番用の右寄せクラス */
.c-plans-list__info.is-right {
    left: auto;
    right: 14px;
}

/* 5番用の黒文字クラス */
.c-plans-list__info.is-black {
    color: #000;
    text-shadow: none;
}

/* スマホ版の上書き */
@media (max-width: 768px) {
    .c-plans-list__info {
        left: 2vw;
        right: auto;
    }

    .c-plans-list__info.is-right {
        left: auto;
        right: 2vw;
    }
}

/* ==========================================================
   Onsen セクション（温泉）
   ========================================================== */
.p-top-onsen {
    padding-bottom: var(--space-xl);
    /* 120px */
}

/* --- メインビジュアル：画面幅100% --- */
.c-onsen-visual {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--h2-mt);
}

.c-onsen-visual img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- テキストエリア --- */
.c-onsen-content {
    text-align: center;
}

.c-onsen-text {
    font-size: var(--base-fs);
    line-height: var(--base-lh);
    letter-spacing: var(--base-ls);
    margin-bottom: 60px;
}

/* --- 3つの風呂画像（3列グリッド） --- */
.c-onsen-baths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    /* カンプの隙間 */
    margin-bottom: 60px;
}

.c-onsen-bath-img {
    margin-bottom: 20px;
}

.c-onsen-bath-img img {
    width: 100%;
    height: auto;
    display: block;
}

.c-onsen-bath-name {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

/* --- ボタンエリア --- */
.c-onsen-button {
    display: flex;
    justify-content: center;
    /* ボタンを中央に配置 */
}

/* --- スマホ対応（仮：縦1列に積む設定） --- */
@media (max-width: 768px) {
    .c-onsen-baths {
        grid-template-columns: 1fr;
        /* 仮で1カラムにしています */
        gap: 8vw;
    }

    .c-onsen-bath-name {
        font-size: 3.5vw;
    }
}

/* ==========================================================
   【追記・上書き用】温泉セクション スマホ版レイアウト
   ========================================================== */

/* 写真下のテキストはPC・スマホ共に中央揃え */
.c-onsen-bath-item {
    text-align: center;
}

.c-onsen-bath-img {
    margin-bottom: 15px;
    /* 写真と文字の間隔調整 */
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {

    /* 温泉の紹介文が画面端に寄りすぎないよう余白を追加し、カンプの改行位置に近づける */
    .c-onsen-text {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
        padding: 0 5vw;
        margin-bottom: 10vw;
    }

    /* 3つの風呂画像（スマホは2列グリッド） */
    .c-onsen-baths {
        grid-template-columns: repeat(2, 42.46vw);
        justify-content: center;
        column-gap: 3.08vw;
        /* 20px相当 */
        row-gap: 4.62vw;
        /* 30px相当 */
        margin-bottom: 12vw;
    }

    .c-onsen-bath-img {
        width: 42.46vw;
        height: 23.54vw;
        margin-bottom: 3.08vw;
        margin-left: auto;
        margin-right: auto;
    }

    .c-onsen-bath-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 写真下のテキストサイズ */
    .c-onsen-bath-name {
        font-size: 3.38vw;
        /* カンプの文字サイズ感（22px相当） */
        line-height: 1.6;
    }
}

/* ==========================================================
   Facilities セクション（館内）
   ========================================================== */
.p-top-facilities {
    padding-bottom: var(--space-xl);
}

/* --- メインビジュアル --- */
.c-facilities-visual {
    width: 100%;
    overflow: hidden;
    margin-bottom: var(--h2-mt);
}

.c-facilities-visual img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- テキストエリア --- */
.c-facilities-content {
    text-align: center;
}

.c-facilities-text {
    font-size: var(--base-fs);
    line-height: var(--base-lh);
    letter-spacing: var(--base-ls);
    margin-bottom: 60px;
}

/* --- 3つの写真グリッド --- */
.c-facilities-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.c-facilities-item {
    text-align: center;
}

.c-facilities-img {
    margin-bottom: 15px;
}

.c-facilities-img img {
    width: 100%;
    height: auto;
    display: block;
}

.c-facilities-name {
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: 0.1em;
}

/* --- ボタンエリア --- */
.c-facilities-button {
    display: flex;
    justify-content: center;
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .c-facilities-text {
        font-size: var(--sp-base-fs);
        line-height: var(--sp-base-lh);
        padding: 0 5vw;
        margin-bottom: 10vw;
    }

    /* スマホは温泉セクションと同じく2列のグリッドにする */
    .c-facilities-items {
        grid-template-columns: repeat(2, 42.46vw);
        justify-content: center;
        column-gap: 3.08vw;
        row-gap: 4.62vw;
        margin-bottom: 12vw;
    }

    .c-facilities-img {
        width: 42.46vw;
        height: 23.54vw;
        margin-bottom: 3.08vw;
        margin-left: auto;
        margin-right: auto;
    }

    .c-facilities-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .c-facilities-name {
        font-size: 3.38vw;
        line-height: 1.6;
        margin: 0;
    }
}

/* ==========================================================
   Trip セクション（旅の過ごし方）修正版
   ========================================================== */
.p-top-trip {
    background-image: url("../images/top/bg_trip.jpg");
    background-size: cover;
    background-position: center;
    padding: 80px 0 100px;
}

/* （中略：ヘッダー周りはそのまま） */

/* 旅の過ごし方は1100pxコンテナ */
.p-top-trip .l-news-container {
    max-width: 1100px;
}

/* --- モザイクグリッド（1100×547 / 大547×547 / gap6px） --- */
.c-trip-grid {
    display: grid;
    grid-template-columns: 547px 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 6px;
    height: 547px;
    margin-bottom: 30px;
}

.c-trip-item {
    position: relative;
    display: block;
    overflow: hidden;
    /* 画像がグリッドのセルいっぱいに広がるようにする */
    height: 100%;
}

.c-trip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.6s ease;
}

.c-trip-item:hover img {
    transform: scale(1.05);
}

/* 左の大きい画像（547×547 / 1列ぶち抜き） */
.c-trip-item.is-large {
    grid-column: 1;
    grid-row: 1 / 3;
}


/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .p-top-trip {
        padding: 12vw 0 15vw;
    }

    .c-trip-item.is-large,
    .c-trip-item:not(.is-large) {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .c-trip-header {
        margin-bottom: 6.92vw;
    }

    /* （中略：タイトル周りはそのまま） */

    .c-trip-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        /* スマホは高さをなりゆきに */
        gap: 1vw;
        /* ★ スマホでは高さ固定を解除 */
        height: auto;
        margin-bottom: 8vw;
        padding: 0 3vw;
    }

    /* 1: 一番大きな画像（アスペクト比で高さを管理） */
    .c-trip-item.is-large {
        grid-column: 1 / 3;
        grid-row: 1;
        aspect-ratio: 3 / 2;
        height: auto;
        /* height:100%を打ち消す */
    }

    /* 2〜5: 小さい画像（正方形） */
    .c-trip-item:not(.is-large) {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    /* （中略：もっとみるリンク周りはそのまま） */
}

/* ==========================================================
   Sightseeing セクション（観光のご案内）
   ========================================================== */
.p-top-sightseeing {
    /* 前のセクションと同じ背景画像を指定（つながっているように見せる） */
    background-image: url("../images/top/bg_trip.jpg");
    background-size: cover;
    background-position: center;
    padding: 80px 0 100px;
}

/* --- 観光リスト（3列グリッド） --- */
.c-sightseeing-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    /* カンプの横の隙間 */
    row-gap: 50px;
    /* カンプの縦の隙間 */
    list-style: none;
    padding: 0;
    margin: 0 0 60px 0;
}

.c-sightseeing-link {
    display: block;
    text-decoration: none;
    color: var(--white);
    /* テキストは基本白 */
    transition: opacity 0.3s;
}

.c-sightseeing-link:hover {
    opacity: 0.8;
}

/* --- 画像エリアとカテゴリラベル --- */
.c-sightseeing-img {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}

.c-sightseeing-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 写真の縦横比を統一 */
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.c-sightseeing-link:hover .c-sightseeing-img img {
    transform: scale(1.05);
    /* ホバーで少し拡大 */
}

/* 右上の白ラベル */
.c-sightseeing-category {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--white);
    color: var(--text-color);
    /* 焦茶色 */
    font-family: var(--font-serif);
    font-size: 13px;
    padding: 6px 15px;
    letter-spacing: 0.1em;
}

/* --- テキストエリア --- */
.c-sightseeing-name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.c-sightseeing-desc {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.05em;
    margin: 0;
    opacity: 0.9;
    /* 少しだけ落ち着かせる */
}

/* --- スマホ対応（仮） --- */
@media (max-width: 768px) {
    .p-top-sightseeing {
        padding: 12vw 0 15vw;
    }

    .c-sightseeing-list {
        /* スマホは情報量が多いので1列にする想定 */
        grid-template-columns: 1fr;
        gap: 8vw;
        padding: 0 5vw;
        margin-bottom: 10vw;
    }

    .c-sightseeing-name {
        font-size: 4.5vw;
        margin-bottom: 3vw;
    }

    .c-sightseeing-desc {
        font-size: 3.5vw;
    }

    .c-sightseeing-category {
        font-size: 3vw;
        padding: 1.5vw 3vw;
    }
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .p-top-sightseeing {
        padding: 12vw 0 15vw;
    }

    /* ★ スマホ版カンプ通り、2列グリッドに変更 */
    .c-sightseeing-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 4vw;
        /* 左右の隙間 */
        row-gap: 8vw;
        /* 上下の隙間 */
        padding: 0 4vw;
        /* 画面両端の余白 */
        margin-bottom: 10vw;
    }

    .c-sightseeing-img {
        margin-bottom: 3vw;
    }

    /* 2列になって写真が小さくなる分、文字サイズも調整 */
    .c-sightseeing-name {
        font-size: 3.5vw;
        margin-bottom: 2vw;
        line-height: 1.4;
    }

    .c-sightseeing-desc {
        font-size: 2.6vw;
        line-height: 1.6;
    }

    /* 右上の白ラベルもスマホサイズに縮小 */
    .c-sightseeing-category {
        font-size: 2.2vw;
        padding: 1vw 2vw;
    }
}

/* ==========================================================
   【追記・上書き用】観光のご案内：画像＆白ラベルの精密調整
   ========================================================== */

/* --- 画像サイズ（W330 x H220 = 3:2の比率） --- */
.c-sightseeing-img img {
    /* 前の 4/3 を上書きして、ご指定の比率（3/2）に変更 */
    aspect-ratio: 330 / 220;
}

/* --- 白ラベル（ボタン）の精密指定 --- */
.c-sightseeing-category {
    min-height: 26px;
    max-width: calc(100% - 12px);
    padding: 0 15px;
    box-sizing: border-box;

    /* テキストを上下左右のど真ん中に配置 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;

    /* フォント設定 */
    font-size: 12.45px;
    color: #8c6846;
    /* ご指定のカラー */
    letter-spacing: 0.05em;
    /* 文字間50 */
    font-weight: 700;
    /* カンプの太字感に合わせる場合（不要なら消してください） */
}


/* --- スマホ版の比率調整 --- */
@media (max-width: 768px) {

    /* スマホでラベルが巨大化・はみ出さないよう、PCと同じ比率のままvwに変換して縮小 */
    .c-sightseeing-category {
        min-height: 4vw;
        max-width: calc(100% - 1.5vw);
        font-size: 2vw;
        padding: 0 2vw;
    }
}

/* ==========================================================
   【追記・上書き用】観光のご案内：テキストエリアの精密調整
   ========================================================== */

/* スマホ版（vw指定）を上書きしてしまわないよう、PC版のみに適用します */
@media (min-width: 769px) {

    /* 画像下タイトル */
    .c-sightseeing-name {
        font-size: 17px;
    }

    /* 抜粋部分 */
    .c-sightseeing-desc {
        font-size: 14px;
        line-height: 27px;
        /* 行間27px */
        letter-spacing: 0.05em;
        /* 文字間50 */
    }
}

/* ==========================================================
   Access & Banners セクション
   ========================================================== */
.p-top-access {
    padding: 60px 0 100px;
}

/* --- 上段：マップとボタンエリア --- */
.c-access-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 縦の中央で揃える */
    margin-bottom: 100px;
    /* バナーとの間の余白 */
}

/* 左側：地図画像 */
.c-access-map {
    width: 60%;
    /* PC版での地図の幅目安 */
    text-align: left;
}

.c-access-map img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 右側：ボタンエリア */
.c-access-buttons {
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* ボタンを右寄せ */
    gap: 15px;
    /* ボタン同士の隙間 */
}

/* アクセス専用ボタン（焦茶色） */
.c-btn-access {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 240px;
    /* ボタンの最大幅 */
    height: 40px;
    background-color: #493e36;
    /* カンプに近い焦茶色 */
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s;
}

.c-btn-access:hover {
    opacity: 0.8;
}

/* --- 下段：バナーリンク集 --- */
.c-access-banners {
    display: grid;
    /* 4枚のバナーを4列グリッドで並べる */
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    /* バナー間の隙間 */
}

.c-access-banner img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s;
}

.c-access-banner:hover img {
    opacity: 0.8;
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .p-top-access {
        padding: 10vw 0 15vw;
    }

    /* スマホ版：地図を上、ボタンを下に縦積み */
    .c-access-top {
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 15vw;
    }

    .c-access-map {
        width: 100%;
        margin-bottom: 8vw;
    }

    /* ボタンを中央揃えに変更 */
    .c-access-buttons {
        width: 100%;
        align-items: center;
        gap: 3vw;
    }

    .c-btn-access {
        max-width: 60vw;
        height: 10vw;
        font-size: 3.5vw;
    }

    /* スマホ版：バナーを2列×2行のグリッドに変更 */
    .c-access-banners {
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw;
        /* スマホ版のバナー間の隙間 */
        padding: 0 4vw;
    }
}

/* ==========================================================
   Access & Banners セクション（完全版）
   ========================================================== */
.p-top-access {
    /* ★ 地図画像の背景と同化する色（スポイトで正確な色を取得して調整してください） */
    background-color: #e6e2da;
    padding: 0 0 100px;
}

/* --- 上段：マップとボタンエリア --- */
.c-access-top {
    position: relative;
    /* ボタンを絶対配置するための基準 */
    width: 100%;
    margin-bottom: 80px;
}

/* 地図画像（画面幅100%で表示） */
.c-access-map img {
    width: 100%;
    height: auto;
    display: block;
}

/* ボタンの位置合わせ用コンテナ（1100pxの中央寄せ） */
.c-access-buttons-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 下の地図をクリック可能にするため */
}

/* ボタン群を右側に配置 */
.c-access-buttons {
    position: absolute;
    right: 15px;
    /* PC版の安全マージン（l-news-containerのpaddingに合わせる） */
    top: 50%;
    /* 地図の高さの中央に配置 */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* 右寄せ */
    gap: 15px;
    pointer-events: auto;
    /* ボタンはクリックできるように戻す */
}

/* アクセス専用ボタン */
.c-btn-access {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    /* 固定幅 */
    height: 44px;
    background-color: #493e36;
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s;
}

.c-btn-access:hover {
    opacity: 0.8;
}

/* --- 下段：バナーリンク集（4列） --- */
.c-access-banners {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.c-access-banner img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s;
}

.c-access-banner:hover img {
    opacity: 0.8;
}


/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .p-top-access {
        padding: 0 0 15vw;
    }

    .c-access-top {
        display: flex;
        flex-direction: column;
        margin-bottom: 15vw;
    }

    /* ★ スマホ版では絶対配置（重ねる）を解除し、地図の下に配置する */
    .c-access-buttons-wrap {
        position: relative;
        left: 0;
        transform: none;
        height: auto;
        margin-top: -5vw;
        /* 地図の画像内余白に応じて調整 */
    }

    .c-access-buttons {
        position: relative;
        right: 0;
        top: 0;
        transform: none;
        align-items: center;
        /* スマホでは中央寄せ */
        gap: 4vw;
    }

    .c-btn-access {
        width: 70vw;
        height: 12vw;
        font-size: 3.5vw;
    }

    /* バナーは2列に変更 */
    .c-access-banners {
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw;
    }
}

/* ==========================================================
   【追記・上書き用】アクセス：スマホ版の右余白（横スクロール）修正
   ========================================================== */
@media (max-width: 768px) {

    /* 100%指定とpaddingの衝突による画面はみ出しを「auto」で解消 */
    .c-access-buttons-wrap {
        width: auto;
        left: auto;
    }

    /* PC版の位置指定が残らないよう完全にリセット */
    .c-access-buttons {
        right: auto;
        top: auto;
    }

    /* 念のため、セクション全体の横はみ出しを強制的にカットするバリア */
    .p-top-access {
        overflow-x: hidden;
    }
}

/* ==========================================================
   Trip セクション（旅の過ごし方）
   ========================================================== */
.p-top-trip {
    /* ★ 背景画像（パスは実際のプロジェクトに合わせてください） */
    background-image: url("../images/top/bg_trip.jpg");
    background-size: cover;
    background-position: center;
    padding: 80px 0 100px;
    /* 上下の余白 */
}

/* --- イレギュラーなH2 --- */
.c-trip-header {
    text-align: center;
    margin-bottom: 50px;
}

.c-trip-icon {
    width: 60px;
    /* アイコンのサイズ目安 */
    height: auto;
    margin-bottom: 15px;
}

.c-trip-title {
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 28px;
    letter-spacing: 0.1em;
    font-weight: 400;
    /* カンプに合わせて細めに */
    margin: 0;
}

/* --- モザイクグリッドレイアウト --- */
.c-trip-grid {
    display: grid;
    grid-template-columns: 547px 270px 270px;
    grid-template-rows: 270px 270px;
    gap: 6px;
    /* カンプの細い隙間 */
    height: 547px;
    margin-bottom: 30px;
}

.c-trip-item {
    position: relative;
    display: block;
    overflow: hidden;
    color: var(--white);
    text-decoration: none;
    height: 100%;
}

/* ホバーで画像を少し拡大するおまけアニメーション */
.c-trip-item:hover img {
    transform: scale(1.05);
}

.c-trip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* ★ 左の大きい画像：2列分・2行分をぶち抜く */
.c-trip-item.is-large {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 547px;
    height: 547px;
}

.c-trip-item:not(.is-large) {
    width: 270px;
    height: 270px;
}

/* --- 画像上の縦書きテキスト共通 --- */
.c-trip-text {
    position: absolute;
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    /* 写真に埋もれないよう強めのドロップシャドウ */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.5);
}

.is-large .c-trip-text {
    font-size: 28px;
    /* 大きな画像は文字も大きく */
}

/* テキストの配置バリエーション（カンプに合わせて微調整） */
.pos-top-left {
    top: 20px;
    left: 20px;
}

.pos-top-right {
    top: 20px;
    right: 20px;
}

.pos-center-left {
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}

/* --- もっとみるリンク --- */
.c-trip-more-wrap {
    text-align: right;
    /* 右端に寄せる */
}

.c-trip-more {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.1em;
    position: relative;
    padding-right: 60px;
    /* 線の分の余白 */
    transition: opacity 0.3s;
}

.c-trip-more:hover {
    opacity: 0.7;
}

/* リンク横の細い線 */
.c-trip-more::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 45px;
    height: 1px;
    background-color: var(--white);
}

/* リンク横の矢印の先端 */
.c-trip-more::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    transform: translateY(-50%) rotate(45deg);
}

/* --- スマホ対応（仮） --- */
@media (max-width: 768px) {
    .p-top-trip {
        padding: 15vw 0;
    }

    .c-trip-grid {
        /* スマホでは一旦2列のグリッドにする */
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .c-trip-item.is-large {
        /* 大きな画像もスマホでは上部2列ぶち抜きにする等 */
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .c-trip-text {
        font-size: 4vw;
    }

    .is-large .c-trip-text {
        font-size: 6vw;
    }
}

/* --- モバイル（スマホ）用の調整 --- */
@media (max-width: 768px) {
    .p-top-trip {
        padding: 12vw 0 15vw;
    }

    .c-trip-item.is-large,
    .c-trip-item:not(.is-large) {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* タイトル周りの調整 */
    .c-trip-icon {
        width: 10vw;
        margin-bottom: 3vw;
    }

    .c-trip-title {
        font-size: 5.5vw;
        margin-bottom: 0;
    }

    /* スマホ版グリッド：2列のレイアウトに変更 */
    .c-trip-grid {
        grid-template-columns: repeat(2, 41.54vw);
        grid-template-rows: auto;
        column-gap: 0.92vw;
        row-gap: 0.92vw;
        justify-content: center;
        /* カンプの6px隙間 */
        margin-bottom: 8vw;
        padding: 0;
    }

    /* 1: 一番大きな画像は1行目で横幅いっぱい（2カラム分）使う */
    .c-trip-item.is-large {
        grid-column: 1 / 3;
        grid-row: 1;
        width: 84.15vw;
        height: 84.15vw;
        aspect-ratio: auto;
        justify-self: center;
    }

    /* 2〜5: 小さい画像は正方形にする */
    .c-trip-item:not(.is-large) {
        width: 41.54vw;
        height: 41.54vw;
        aspect-ratio: auto;
    }

    /* スマホ版の文字サイズ調整 */
    .c-trip-text {
        font-size: 4vw;
    }

    .is-large .c-trip-text {
        font-size: 5.5vw;
    }

    /* 文字の位置をスマホの画面幅に合わせて調整 */
    .pos-top-left {
        top: 3vw;
        left: 3vw;
    }

    .pos-top-right {
        top: 3vw;
        right: 3vw;
    }

    .pos-center-left {
        left: 3vw;
    }

    /* もっとみるリンクの右余白 */
    .c-trip-more-wrap {
        padding-right: 3vw;
    }

    .c-trip-more {
        display: inline-block;
        font-size: 3.2vw;
        line-height: 1.6;
        padding-top: 1.2vw;
        padding-bottom: 1.2vw;
        padding-right: 10.5vw;
    }

    .c-trip-more::after {
        width: 7.5vw;
    }

    .c-trip-more::before {
        width: 1.2vw;
        height: 1.2vw;
    }
}