/* --- index ヒーロー直下の1〜4セクションの背景を透明に（PC・スマホ共通） --- */
.p-top .c-hero + .c-detail-section,
.p-top .c-hero + .c-detail-section + .c-detail-section,
.p-top .c-hero + .c-detail-section + .c-detail-section + .c-detail-section,
.p-top .c-hero + .c-detail-section + .c-detail-section + .c-detail-section + .c-detail-section {
    background-color: transparent;
}

/* --- Hero Section --- */
.food-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.food-hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ken Burns効果：20sでscale(1)からscale(1.1)へ、alternateで往復 */
    will-change: transform; /* GPUレンダリングを強制 */
    animation: food-hero-ken-burns 20s ease-in-out infinite alternate;
    transform-origin: center center;
}

/* Ken Burns効果のキーフレーム */
@keyframes food-hero-ken-burns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.food-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    z-index: 2;
}

.food-hero-text-area {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--f-space-l);
}
.food-main-copy {
    display: flex;
    gap: var(--f-space-m);
    margin-bottom: var(--f-space-xl);
}

.food-vertical-text {
    writing-mode: vertical-rl;
    font-size: var(--f-font-size-xxxl);
    letter-spacing: var(--f-letter-spacing-extreme);
    font-weight: 300;
}

.food-product-name {
    font-size: clamp(1.8rem, 6vw, 3rem); /* 最大サイズと変動率を抑えて上品に */
    font-weight: 200;
    letter-spacing: 0.05em;
    border-top: 1px solid var(--food-color-border);
    padding-top: var(--f-space-l);
    /* ページロード完了から0.8s遅延、下から上に15px浮き上がりながらフェードイン */
    opacity: 0;
    transform: translateY(var(--f-space-m));
    animation: food-hero-text-fade-in var(--f-duration-epic) ease-out var(--f-duration-slowest) forwards;
}

/* テキストフェードインアニメーション（色気復元） */
@keyframes food-hero-text-fade-in {
    0% {
        opacity: 0;
        transform: translateY(var(--f-space-m));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 横書きキャッチコピー（新規追加・色気復元） */
.food-hero-copy-text {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: var(--f-font-size-xxxl);
    color: var(--f-color-text);
    letter-spacing: var(--f-letter-spacing-normal);
    margin-bottom: var(--f-space-xl);
    text-align: center;
    font-weight: 500;
    text-shadow: var(--f-text-shadow-subtle), 0 5px 15px rgba(0,0,0,0.7);
    /* ページロード完了から0.8s遅延、下から上に15px浮き上がりながらフェードイン */
    opacity: 0;
    transform: translateY(var(--f-space-m));
    animation: food-hero-text-fade-in var(--f-duration-epic) ease-out var(--f-duration-slowest) forwards;
}
/* スマホ用改行（PCでは非表示） */
.food-hero-br { display: none; }

/* テンプレート明示メッセージ（新規追加） */
.food-hero-template-msg {
    display: block;
    font-size: var(--f-font-size-base);
    color: rgba(255, 255, 255, 0.9);
    margin-top: 35px;
    font-family: "Yu Mincho", "YuMincho", serif;
    letter-spacing: var(--f-letter-spacing-tight);
    text-shadow: var(--f-text-shadow-medium);
}

/* Scroll Down Indicator */
.food-scroll-down {
    position: absolute;
    bottom: var(--f-space-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: var(--f-color-text);
    font-family: var(--food-font-accent);
    font-size: var(--f-font-size-base);
    letter-spacing: var(--f-letter-spacing-wider);
    text-align: center;
    opacity: 0.8;
}
.food-scroll-down::after {
    content: "";
    display: block;
    width: 1px;
    height: var(--f-space-huge);
    background: var(--f-color-text);
    margin: var(--f-space-s) auto 0;
    animation: scrollDown var(--f-duration-epic-slow) cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes scrollDown {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    50.1% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- Detail Sections (Common) --- */
.food-detail-section {
    width: 100%;
    min-height: auto; /* 100vh強制をやめて、コンテンツ量に合わせる */
    background-color: var(--food-color-bg);
    display: flex;
    align-items: center;
    padding: var(--food-section-padding);
}

.food-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--f-space-huge-xl);
    align-items: center;
}

/* --- Left layout adjustment --- */
.food-detail-section--left .food-detail-container {
    grid-template-columns: 1.2fr 1fr;
}

.food-detail-text .food-detail-headline {
    font-size: var(--f-font-size-huge); /* 2.2remから縮小して主張を控えめに */
    font-weight: 300;
    margin-bottom: var(--f-space-xl);
    letter-spacing: var(--f-letter-spacing-wider);
    color: var(--food-color-accent);
}

.food-detail-text .food-detail-description {
    font-size: var(--food-desc-size);
    line-height: var(--food-desc-line-height);
    font-weight: 300;
    color: var(--food-color-sub);
    letter-spacing: var(--f-letter-spacing-normal);
    word-break: break-all;
    overflow-wrap: break-word;
}

.food-sub-title {
    display: block;
    font-family: var(--food-font-accent);
    font-size: var(--f-font-size-m);
    letter-spacing: var(--f-letter-spacing-widest);
    color: var(--f-color-sub-darker);
    margin-bottom: var(--f-space-m);
    text-transform: uppercase;
}

/* 後方互換性のため既存クラスを維持 */
.food-detail-image {
    /* overflow: hidden; */ /* 枠線を外側に見せるため、はみ出し防止を解除 */
    position: relative;     /* 枠線の配置基準にする */
    z-index: 1;             /* 重なり順の制御 */
}

/* 【廃止】ずらした枠線（オフセットボーダー）を作成 */
/* 完全独立型コンポーネント（top.css内のcomp-detail-figure）に移行済み */
/* .food-detail-image::before は使用禁止 */

.food-detail-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: brightness(0.9);
    transition: transform 1.2s ease;
}

/* 画像にマウスが乗った時、ゆっくり拡大してシズル感を強調 */
.food-detail-image:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* ========================================
   CMS完全対応：完全独立型コンポーネント
   ======================================== */
/* コンポーネントスコープ内のCSS変数（完全独立・前面オフセット） */
.comp-detail-figure {
    /* overflow: hidden; */ /* 枠線を外側に見せるため、はみ出し防止を解除 */
    position: relative;     /* 装飾の配置基準にする */
    
    /* 座標の絶対固定（1pxの狂いもなく転記・右上・右への均等オフセット） */
    --comp-deco-top-offset: -20px;  /* PC版：上方向へズラす負の値 */
    --comp-deco-left-offset: 20px;  /* PC版：右方向へズラす正の値 */
    --comp-deco-width: 100%;        /* 装飾枠の幅（画像と同じサイズ） */
    --comp-deco-height: 100%;       /* 装飾枠の高さ（画像と同じサイズ） */
    --comp-deco-opacity: 0.6;       /* 装飾枠の透明度 */
    --comp-deco-opacity-hover: 0;    /* ホバー時の透明度 */
}

/* 装飾要素（画像と物理的に分離・前面に配置） */
.comp-detail-figure__decoration {
    content: "";
    position: absolute;
    top: var(--comp-deco-top-offset);  /* CSS変数で絶対固定（上方向へズラす） */
    left: var(--comp-deco-left-offset); /* CSS変数で絶対固定（右方向へズラす） */
    width: var(--comp-deco-width);      /* 画像と同じサイズ（100%） */
    height: var(--comp-deco-height);    /* 画像と同じサイズ（100%） */
    border: 1px solid var(--food-color-accent); /* テーマカラー（ゴールド）の枠線 */
    z-index: 2; /* 画像の前面（手前）に配置（絶対指定） */
    opacity: var(--comp-deco-opacity); /* 少し透けさせて上品に */
    pointer-events: none; /* 枠線がマウス操作を邪魔しないようにする */
    transition: opacity var(--f-duration-slow) ease; /* 装飾側のtransitionを独立 */
}

/* 画像にマウスが乗った時、枠線をふわっと消す */
.comp-detail-figure:hover .comp-detail-figure__decoration {
    opacity: var(--comp-deco-opacity-hover);
}

/* 画像要素（完全独立・背面に配置） */
.comp-detail-figure__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: brightness(0.9);
    transition: transform var(--f-duration-epic) ease; /* 画像側のtransitionを独立 */
    display: block; /* 画像の表示を確実に */
    position: relative; /* z-indexの基準点 */
    z-index: 1; /* 装飾の背面に配置（装飾が前面） */
}

/* 画像にマウスが乗った時、ゆっくり拡大してシズル感を強調 */
.comp-detail-figure:hover .comp-detail-figure__image {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* --- News Section --- */
.food-news-section {
    width: 100%;
    padding: var(--food-section-padding);
    background-color: var(--food-color-bg);
}

.food-news-container {
    max-width: 800px;
    margin: 0 auto;
}

.food-news-title {
    font-size: var(--f-font-size-huge); /* セクションタイトルを一律でサイズダウン */
    font-weight: 200;
    letter-spacing: var(--f-letter-spacing-wider);
    color: var(--food-color-accent);
    text-align: center;
    margin-bottom: var(--f-space-xl);
}

.food-news-list {
    list-style: none;
    margin-bottom: var(--f-space-huge);
}

.food-news-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.food-news-list li a {
    display: flex;
    align-items: center;
    padding: 25px var(--f-space-s);
    text-decoration: none;
    color: var(--f-color-text);
    transition: all var(--f-duration-fast) ease;
}

.food-news-list li a:hover {
    background-color: rgba(255, 255, 255, 0.02);
    padding-left: var(--f-space-l);
}

.news-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--f-space-xl);
    margin-right: var(--f-space-l);
    color: var(--food-color-accent);
}

.news-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.news-date {
    font-family: "Helvetica Neue", sans-serif;
    font-size: var(--f-font-size-base);
    letter-spacing: var(--f-letter-spacing-normal);
    color: var(--food-color-accent);
    margin-right: var(--f-space-xl);
    white-space: nowrap;
}

.news-text {
    font-size: var(--f-font-size-base);
    font-weight: 300;
    line-height: 1.6;
    flex: 1;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* Archive Button & Dropdown */
.food-news-archive {
    text-align: center;
    position: relative;
    z-index: 10;
}

.news-archive-wrapper {
    display: inline-block;
    position: relative;
}

.news-archive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--f-space-s);
    padding: var(--f-space-m) var(--f-space-xxl);
    background: transparent;
    border: 1px solid var(--food-color-accent);
    color: var(--food-color-accent);
    font-size: var(--f-font-size-base);
    letter-spacing: var(--f-letter-spacing-wider);
    cursor: pointer;
    transition: all var(--f-duration-fast) ease;
}

.news-archive-btn:hover {
    background-color: var(--food-color-accent);
    color: #1a0505;
}

.archive-caret {
    transition: transform var(--f-duration-fast) ease;
}

.news-archive-wrapper.is-active .archive-caret,
.news-archive-wrapper.active .archive-caret {
    transform: rotate(180deg);
}

.news-archive-dropdown {
    position: absolute;
    top: 100%; /* ボタンの下に表示 */
    left: 50%;
    transform: translateX(-50%) translateY(var(--f-space-s));
    width: 100%;
    min-width: 200px;
    background: rgba(26, 5, 5, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--f-border-subtle);
    list-style: none;
    padding: var(--f-space-s) 0;
    margin-top: var(--f-space-s);
    opacity: 0;
    visibility: hidden;
    transition: all var(--f-duration-slowest) var(--f-ease-smooth); /* ニュースアーカイブも同様に調整 */
    box-shadow: var(--f-shadow-rich);
}

.news-archive-wrapper.is-active .news-archive-dropdown,
.news-archive-wrapper.active .news-archive-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.news-archive-dropdown li a {
    display: block;
    padding: 12px var(--f-space-l);
    color: var(--f-color-text);
    text-decoration: none;
    font-size: var(--f-font-size-base);
    letter-spacing: var(--f-letter-spacing-normal);
    transition: background var(--f-duration-fast);
}

.news-archive-dropdown li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--food-color-accent);
}

/* --- Grid Section --- */
.food-grid-section {
    width: 100%;
    padding: var(--food-section-padding);
    background-color: var(--food-color-bg);
}

.food-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--f-space-xxl);
}

.food-grid-item {
    overflow: hidden; /* 拡大時のはみ出し防止 */
    text-align: center;
}

.food-grid-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 25px;
    filter: brightness(0.85);
    transition: filter var(--f-duration-slow) ease, transform var(--f-duration-slowest) ease; /* 拡大アニメーションを追加 */
}

.food-grid-item:hover .food-grid-thumb {
    filter: brightness(1.0);
    transform: scale(1.05); /* ふわりと拡大 */
}

.food-grid-title {
    font-size: var(--f-font-size-xl);
    font-weight: 400;
    letter-spacing: var(--f-letter-spacing-wider);
    color: var(--food-color-accent);
    margin-bottom: var(--f-space-m);
}

.food-grid-desc {
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--f-color-sub-dark);
    font-weight: 300;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* --- Menu Section --- */
.food-menu-section {
    width: 100%;
    padding: var(--food-section-padding);
    background-color: var(--food-color-bg);
}

.food-menu-header {
    text-align: center;
    margin-bottom: var(--f-space-xxxl);
}

.food-menu-logo-deco {
    display: block;
    font-family: "Helvetica Neue", sans-serif;
    font-size: var(--f-font-size-base);
    letter-spacing: var(--f-letter-spacing-widest);
    color: var(--food-color-sub);
    margin-bottom: var(--f-space-m);
    text-transform: uppercase;
}

.food-menu-title {
    font-size: var(--f-font-size-huge);
    font-weight: 200;
    letter-spacing: var(--f-letter-spacing-wider);
    color: var(--food-color-accent);
    display: inline-block;
    border-bottom: 1px solid var(--food-color-border);
    padding-bottom: var(--f-space-s);
}

.food-menu-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--f-space-huge-xl);
    align-items: stretch;
}

/* 左列：サマリー＋ボタンを下寄せし、右列の下端と揃える */
.food-menu-container > .food-menu-column:first-child {
    display: flex;
    flex-direction: column;
}

.food-menu-container > .food-menu-column:first-child .food-menu-column__closed-view {
    margin-top: auto;
}

.food-menu-category {
    font-size: var(--f-font-size-xxl);
    font-weight: 300;
    letter-spacing: var(--f-letter-spacing-tight);
    color: var(--food-color-accent);
    border-bottom: 1px solid var(--food-color-border);
    padding-bottom: var(--f-space-m);
    margin-bottom: var(--f-space-xl);
}

/* 「Webサイト テンプレート構成 / 10ページ」直下の要素を20px上へ（30px→10px下で調整） */
.food-menu-container > .food-menu-column:first-child .food-menu-category + * {
    margin-top: -20px;
}

/* 左列のみ：「詳細を見る」ボタンをさらに5px下へ */
.food-menu-container > .food-menu-column:first-child .food-menu-column__toggle {
    margin-top: 5px;
}

/* 右列：「テンプレート設置＆スタートパック」のブロックを5px上へ */
.food-menu-container > .food-menu-column:last-child .food-menu-list > .food-menu-item:first-child {
    margin-top: -5px;
}

/* PLAN & PRICE 2カラム内のみ：余白・背景・枠線（撮影セクションには適用しない） */
.food-menu-column .food-menu-item {
    margin-bottom: calc(var(--f-space-xl) - 40px);
    padding: 25px; /* 背景色の中に文字を収めるための余白 */
    border-radius: var(--f-radius-m);
}
.food-menu-column .food-menu-item--highlighted {
    background-color: rgba(255, 255, 255, 0.03); /* 極薄い白背景 */
    border: 1px solid rgba(255, 255, 255, 0.05); /* 輪郭をほのかに強調 */
    backdrop-filter: blur(5px); /* すりガラス効果 */
}
.food-menu-column .food-menu-item:not(.food-menu-item--highlighted) {
    border: 1px solid transparent; /* 高さを合わせるため透明ボーダー */
}

/* 撮影プラン（.food-menu-list-left）専用：余白と文字間をPLAN & PRICEと分離 */
.food-menu-list-left .food-menu-item {
    margin-bottom: var(--f-space-m);
    border: none;
    padding: 0;
    border-radius: 0;
}
.food-menu-list-left .food-menu-item:last-child {
    margin-bottom: 0;
}
.food-menu-list-left .food-menu-name,
.food-menu-list-left .food-menu-price {
    letter-spacing: var(--f-letter-spacing-normal);
}
.food-menu-list-left .food-menu-item-header {
    margin-bottom: var(--f-space-xs);
}

.food-menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px; /* スケール外のため生数値 */
}

/* 開閉式アコーディオン：詳細ボディ（ヘッダー以外をラップ） */
.food-menu-item__body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--f-duration-normal) var(--f-ease-smooth);
}

.food-menu-item.is-open .food-menu-item__body {
    max-height: 3200px;
}

.food-menu-item__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--f-space-xs);
    width: 100%;
    margin-top: var(--f-space-s);
    margin-bottom: 0;
    padding: var(--f-space-s) var(--f-space-m);
    font-size: var(--f-font-size-m);
    font-family: var(--food-font-accent);
    letter-spacing: var(--f-letter-spacing-normal);
    color: var(--food-color-accent);
    background: transparent;
    border: 1px solid rgba(var(--food-color-price-rgb), 0.5);
    border-radius: var(--f-radius-s);
    cursor: pointer;
    transition: color var(--f-duration-fast) var(--f-ease), background-color var(--f-duration-fast) var(--f-ease), border-color var(--f-duration-fast) var(--f-ease);
}

.food-menu-item__toggle:hover {
    color: var(--f-color-bg);
    background-color: var(--food-color-accent);
    border-color: var(--food-color-accent);
}

.food-menu-item__toggle::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--f-space-xs);
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--f-duration-fast) var(--f-ease);
}

.food-menu-item.is-open .food-menu-item__toggle::after {
    transform: rotate(-135deg);
}

/* 左列のみ：サマリー（1〜10を2列・左揃え）＋※小さく＋「詳細を見る」 */
.food-menu-column__closed-view {
    margin-top: var(--f-space-m);
}

.food-menu-column__summary-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--f-space-xs) var(--f-space-xl);
    list-style: decimal;
    padding: var(--f-space-l) var(--f-space-xl) var(--f-space-l) var(--f-space-xxl);
    margin: var(--f-space-l) 0 var(--f-space-s);
    font-size: var(--f-font-size-base);
    line-height: 1.75;
    color: var(--f-color-sub);
    text-align: left;
}

.food-menu-column__summary-item {
    margin-bottom: 0;
    padding-left: var(--f-space-xs);
}

.food-menu-column__summary-asterisk {
    font-size: 0.8em;
    color: var(--f-color-sub);
    opacity: 0.7;
}

.food-menu-column__body {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--f-duration-normal) var(--f-ease-smooth);
}

.food-menu-column.is-open .food-menu-column__body {
    max-height: 5000px;
}

.food-menu-column__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--f-space-xs);
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--f-space-m) var(--f-space-xl);
    font-size: var(--f-font-size-l);
    font-family: var(--food-font-accent);
    letter-spacing: var(--f-letter-spacing-normal);
    color: var(--food-color-accent);
    background: transparent;
    border: 1px solid rgba(var(--food-color-price-rgb), 0.5);
    border-radius: var(--f-radius-s);
    cursor: pointer;
    transition: color var(--f-duration-fast) var(--f-ease), background-color var(--f-duration-fast) var(--f-ease), border-color var(--f-duration-fast) var(--f-ease);
}

.food-menu-column__toggle:hover {
    color: var(--f-color-bg);
    background-color: var(--food-color-accent);
    border-color: var(--food-color-accent);
}

.food-menu-column__toggle::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--f-space-xs);
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--f-duration-fast) var(--f-ease);
}

.food-menu-column.is-open .food-menu-column__toggle::after {
    transform: rotate(-135deg);
}

.food-menu-name {
    font-weight: 600;
    font-size: var(--f-font-size-l);
    letter-spacing: var(--f-letter-spacing-tight);
    color: var(--f-color-text);
}

/* テンプレート構成：各ページ名リンクのスタイル */
a.food-menu-name {
    text-decoration: none;
    color: var(--f-color-text);
    transition: color var(--f-duration-fast) var(--f-ease);
}
a.food-menu-name:hover {
    color: var(--food-color-accent);
}

.food-menu-price {
    font-weight: 300;
    font-size: var(--f-font-size-l);
    letter-spacing: var(--f-letter-spacing-tight);
    color: var(--food-color-price);
    font-family: var(--food-font-accent);
}

.food-menu-desc {
    font-size: var(--f-font-size-m);
    line-height: 1.6;
    color: var(--food-color-sub);
    font-weight: 300;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* --- Plan & Price Section (Sample Only) --- */
.food-menu-price-sub {
    font-size: var(--f-font-size-m);
    color: var(--f-color-sub);
    letter-spacing: var(--f-letter-spacing-normal);
}

/* Price Box (index.php内の価格表示) */
.food-price-box {
    margin-top: var(--f-space-xl);
    border-top: 1px solid var(--f-border-medium);
    border-bottom: 1px solid var(--f-border-medium);
    padding: var(--f-space-l) 0;
    max-width: 300px;
}

.food-price-label {
    font-size: var(--f-font-size-base);
    color: var(--f-color-sub);
    margin-bottom: var(--f-space-xs);
    letter-spacing: var(--f-letter-spacing-normal);
}

.food-price-value {
    font-size: var(--f-font-size-huge-xxl);
    color: var(--food-color-price);
    font-family: var(--food-font-accent);
    margin: 0;
    letter-spacing: var(--f-letter-spacing-tight);
}

.food-price-note {
    font-size: var(--f-font-size-m);
    color: var(--f-color-sub-dark);
    margin-top: var(--f-space-xs);
    text-align: right;
}

.food-menu-desc-mb5 {
    line-height: 1.45;
    margin-top: 5px;
    margin-bottom: 10px;
}

.food-menu-desc-accent {
    margin-top: auto;
    margin-bottom: 0;
    color: var(--food-color-accent);
    font-size: 0.9em;
    text-align: right;
    order: 999;
}

.food-plan-detail-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--f-space-xs) var(--f-space-s);
    list-style: none;
    padding: 0;
    margin: 0;
}

.food-plan-detail-list li {
    font-size: 0.8rem;
    line-height: 1.6;
}

.food-menu-item .food-plan-item-default,
.food-menu-item .food-plan-item-accent {
    color: var(--f-color-sub);
}

.food-menu-item .food-menu-desc.food-menu-desc-mb5 {
    color: var(--food-color-accent);
}

.food-plan-item-num {
    margin-right: 5px;
}

.food-plan-item-note {
    font-size: 0.85em;
    opacity: 0.7;
}

.food-plan-desc-white {
    margin-top: 15px;
    margin-bottom: 15px;
    color: #fff;
}

.food-plan-detail-box {
    font-size: 0.85rem;
    color: var(--f-color-sub);
    line-height: 1.8;
    padding-left: var(--f-space-s);
    border-left: 1px solid var(--f-border-subtle);
}

.food-plan-section-title {
    color: var(--food-color-accent);
    margin-bottom: 5px;
    font-family: "Yu Mincho", "YuMincho", serif;
}

.food-plan-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 10px;
}

.food-plan-note-title {
    color: #888;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.food-plan-note-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 10px;
    font-size: 0.8rem;
    color: #888;
}

.food-photo-plan-wrapper {
    max-width: 800px;
    margin: var(--f-space-huge-xxxl) auto 0;
    text-align: center;
}

.food-photo-plan-title {
    display: inline-block;
    margin-bottom: 20px;
}

.food-menu-list-left {
    text-align: left;
}

.food-menu-item-mb40 {
    margin-bottom: 40px;
}

.food-photo-plan-header {
    color: var(--food-color-accent);
    margin-bottom: 20px;
    font-family: "Yu Mincho", "YuMincho", serif;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    font-size: 0.9rem;
}

.food-photo-plan-desc-small {
    margin-bottom: 20px;
    font-size: 0.8rem;
}

/* --- Access Section --- */
.food-access-section {
    width: 100%;
    padding: var(--food-section-padding);
    background-color: var(--food-color-bg);
}

.food-access-container {
    max-width: 960px; /* PC: 左右2カラム全体を狭くし、SERVICE AREA とマップを均等で美しく */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--f-space-huge);
}

.food-access-info {
    flex: 1 1 0;
    min-width: 0;
}

.food-access-map {
    flex: 1 1 0;
    min-width: 0;
    height: 400px;
    background-color: var(--f-color-bg); /* 地図読み込み中の背景色（テーマカラーに合わせる） */
}

.food-access-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%); /* 地図をモノクロにして高級感を演出 */
}

.food-access-title {
    font-size: var(--f-font-size-huge);
    font-weight: 200;
    letter-spacing: var(--f-letter-spacing-wider);
    color: var(--food-color-accent);
    border-bottom: 1px solid var(--food-color-border);
    padding-bottom: var(--f-space-s);
    margin-bottom: var(--f-space-xxl);
    display: inline-block;
}

.food-shop-name {
    font-size: var(--f-font-size-xxl);
    color: var(--f-color-text);
    margin-bottom: var(--f-space-l);
    letter-spacing: var(--f-letter-spacing-normal);
}

/* サービスリスト（郵送・出張）のスタイル */
.food-service-item {
    margin-bottom: var(--f-space-xl);
    border-left: 2px solid var(--food-color-accent);
    padding-left: var(--f-space-m);
}
.service-item-title {
    display: block;
    color: var(--food-color-accent);
    font-size: var(--f-font-size-l);
    margin-bottom: var(--f-space-s);
    letter-spacing: var(--f-letter-spacing-normal);
}
.service-item-desc {
    font-size: var(--f-font-size-base);
    line-height: 1.8;
    color: var(--food-color-sub);
}
.food-shop-tel {
    font-size: var(--f-font-size-base);
    line-height: 1.8;
    color: var(--food-color-sub);
    margin-bottom: var(--f-space-l);
}

/* 下段ブロック（販促マネジメント・問い合わせ） */
.food-access-bottom {
    margin-top: var(--f-space-huge-xl);
    text-align: center;
    width: 100%;
}

.food-promotion-text {
    display: inline-block;
    position: relative;
    padding: var(--f-space-xl) var(--f-space-huge);
    margin-bottom: var(--f-space-xxl);
    background: linear-gradient(135deg, rgba(var(--food-color-price-rgb), 0.1) 0%, rgba(26, 5, 5, 0.8) 100%);
    border: 1px solid rgba(var(--food-color-price-rgb), 0.3);
    max-width: 800px;
}
/* 四隅の装飾 */
.food-promotion-text::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: var(--f-space-l); height: var(--f-space-l);
    border-top: 2px solid var(--food-color-accent);
    border-left: 2px solid var(--food-color-accent);
}
.food-promotion-text::after {
    content: "";
    position: absolute;
    bottom: -1px; right: -1px;
    width: var(--f-space-l); height: var(--f-space-l);
    border-bottom: 2px solid var(--food-color-accent);
    border-right: 2px solid var(--food-color-accent);
}
.promotion-title {
    display: block;
    font-size: 1.3rem;
    color: var(--food-color-accent);
    margin-bottom: var(--f-space-s);
    letter-spacing: var(--f-letter-spacing-normal);
}
.promotion-desc {
    font-size: var(--f-font-size-l);
    color: var(--f-color-text);
    line-height: 1.8;
}

.food-shop-sns {
    display: flex;
    gap: var(--f-space-l);
    margin-bottom: var(--f-space-xxl);
    justify-content: center; /* 中央揃え */
}

.food-shop-sns a {
    color: var(--food-color-accent);
    text-decoration: none;
    font-size: var(--f-font-size-base);
    letter-spacing: var(--f-letter-spacing-normal);
}

.food-access-btn {
    display: inline-block;
    padding: var(--food-btn-padding);
    border: 1px solid var(--food-color-accent);
    color: var(--food-color-accent);
    text-decoration: none;
    font-family: var(--food-font-accent);
    font-size: var(--f-font-size-xl);
    letter-spacing: var(--f-letter-spacing-normal);
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color var(--f-duration-normal) var(--f-ease-rich);
    background: transparent;
}
.food-access-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--food-color-accent);
    z-index: -1;
    transition: width var(--f-duration-normal) var(--f-ease-rich);
}
.food-access-section .food-access-btn:hover {
    color: var(--food-color-btn-hover-text); /* 背景テーマに依存しない専用の濃い色 */
}

body.p-thanks .food-contact-section .food-access-btn:hover {
    color: var(--food-color-btn-hover-text);
}

.food-access-btn:hover::before {
    width: 100%;
}

/* --- Contact Section --- */
.food-contact-section {
    width: 100%;
    padding: var(--food-section-padding);
    background-color: var(--food-color-bg);
    text-align: center;
}

.food-contact-section--thanks {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.food-contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.food-contact-title {
    font-size: var(--f-font-size-huge);
    font-weight: 200;
    letter-spacing: var(--f-letter-spacing-wider);
    color: var(--food-color-accent);
    margin-bottom: var(--f-space-l);
}

.food-contact-desc {
    font-size: var(--f-font-size-base);
    color: var(--food-color-sub);
    margin-bottom: var(--f-space-huge);
    font-weight: 300;
    line-height: 1.7rem;
}

.thanks-contact-desc {
    margin-bottom: var(--f-space-xxl);
}

.food-contact-form .form-group {
    margin-bottom: var(--f-space-xxl);
}

.food-contact-form .form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--f-border-medium);
    padding: var(--f-space-m) 0;
    color: var(--f-color-text);
    font-size: var(--f-font-size-l);
    font-family: inherit;
    transition: border-color var(--f-duration-fast) ease;
    border-radius: 0; /* スマホでの角丸防止 */
}

.food-contact-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.food-contact-form .form-control:focus {
    outline: none;
    border-bottom-color: var(--food-color-accent);
}

.food-contact-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

.food-contact-submit {
    margin-top: var(--f-space-l);
    padding: var(--food-btn-padding);
    background: transparent;
    border: 1px solid var(--food-color-accent);
    color: var(--food-color-accent);
    font-family: var(--food-font-accent);
    font-size: var(--f-font-size-xl);
    letter-spacing: var(--f-letter-spacing-normal);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color var(--f-duration-normal) var(--f-ease-rich);
}
.food-contact-submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--food-color-accent);
    z-index: -1;
    transition: width var(--f-duration-normal) var(--f-ease-rich);
}
.food-contact-section .food-contact-submit:hover {
    color: var(--food-color-btn-hover-text); /* 背景テーマに依存しない専用の濃い色 */
}
.food-contact-submit:hover::before {
    width: 100%;
}

/* インライン style 禁止用ユーティリティ・修飾クラス */
.u-letter-spacing-tight {
    letter-spacing: var(--f-letter-spacing-tight);
}
.food-sample-message--grid {
    margin-top: var(--f-space-xxxl);
    margin-bottom: var(--f-space-s);
}
.food-sample-message--access {
    margin-bottom: var(--f-space-xxl);
}
.service-item-note {
    font-size: var(--f-font-size-m);
    opacity: 0.8;
}
.food-access-map__iframe {
    border: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
}
.food-shop-tel {
    font-size: 0.85rem;
    margin-bottom: var(--f-space-xl);
}

/* Accessibility Helper */
.food-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Footer Visual Section --- */
.food-footer-visual-section {
    width: 100%;
    background-color: var(--food-color-bg);
}

.food-footer-visual-container {
    position: relative;
    width: 100%;
    min-height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.food-footer-visual-container picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.food-footer-visual-container .food-footer-visual-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.food-footer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.food-footer-message {
    position: relative;
    z-index: 3;
    text-align: center;
}

.food-en-message {
    font-size: var(--f-font-size-xl);
    letter-spacing: var(--f-letter-spacing-extreme);
    font-weight: 200;
    margin-bottom: var(--f-space-s);
    color: var(--food-color-accent);
}

body .food-footer-message .food-footer-en-message {
    font-size: var(--f-font-size-xxxl);
    letter-spacing: 0.5em;
    font-weight: 200;
    margin-bottom: var(--f-space-xxxl);
    color: var(--food-color-accent);
}

.food-jp-message {
    font-size: var(--f-font-size-base);
    letter-spacing: var(--f-letter-spacing-wider);
    color: var(--f-color-text);
}

body .food-footer-message .food-footer-message-text {
    display: block;
    margin-top: var(--f-space-l);
    margin-bottom: var(--f-space-xxl);
    margin-left: auto;
    margin-right: auto;
}

/* --- Demo Modal (CMS Preview with Slider) --- */
.food-demo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--f-duration-normal) ease;
    padding: var(--f-space-l);
}
.food-demo-modal.is-open {
    opacity: 1;
    visibility: visible;
}
.food-demo-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: var(--f-color-bg);
    border: 1px solid var(--food-color-accent);
    box-shadow: var(--f-shadow-epic);
    transform: scale(0.95);
    transition: transform var(--f-duration-normal) var(--f-ease-bounce);
    overflow: hidden;
}
.food-demo-modal.is-open .food-demo-content {
    transform: scale(1);
}
.food-demo-close {
    position: absolute;
    top: var(--f-space-l);
    right: var(--f-space-l);
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.food-demo-close:hover {
    background: var(--food-color-accent);
    color: var(--f-color-btn-hover-text);
    border-color: var(--food-color-accent);
    transform: rotate(90deg);
    box-shadow: var(--f-shadow-glow-accent);
}

/* Slider Styles（高さを従来の140%に拡大 = 16/9 → 16/12.6） */
.food-demo-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 12.6; /* 9 * 1.4 = 12.6 */
    background: #000;
    overflow: hidden;
}
.food-demo-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.food-demo-slide {
    position: relative;
    width: 100%;
    min-width: 100%;
    height: 100%;
    overflow: hidden;
}
/* 画像は天地100%表示（縦を必ず埋める） */
.food-demo-slide img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    min-width: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}
.food-demo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    line-height: 0;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.food-demo-nav::before {
    font-family: "Times New Roman", serif;
    font-size: 1.8rem;
    line-height: 1;
    color: inherit;
    transform: translateY(-2px); /* 矢印を2px上に */
}
.food-demo-prev::before { content: "‹"; transform: translate(-0.5px, -2px); } /* 0.5px左へ、0.2px上 */
.food-demo-next::before { content: "›"; transform: translate(0.5px, -2px); }  /* 0.5px右へ、0.2px上 */
.food-demo-nav:hover {
    background: var(--food-color-accent);
    color: #1a0505;
    border-color: var(--food-color-accent);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(var(--food-color-price-rgb), 0.5);
}
.food-demo-prev { left: 20px; }
.food-demo-next { right: 20px; }

/* フッターエリア内のナビ（スライダー外に表示） */
.food-demo-footer {
    padding: 25px;
    text-align: center;
    background-color: #000;
}
.food-demo-footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}
.food-demo-footer .food-demo-nav {
    position: static;
    transform: none;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    flex-shrink: 0;
}
.food-demo-footer .food-demo-prev {
    margin-right: 26px;  /* 24px gapのうち中央方向へ50px = 24+26 で前ボタン右寄せ */
    transform: translateX(50px);
}
.food-demo-footer .food-demo-next {
    margin-left: 26px;
    transform: translateX(-50px);
}
.food-demo-footer .food-demo-nav:hover {
    transform: scale(1.1);
}
.food-demo-footer .food-demo-prev:hover {
    transform: translateX(50px) scale(1.1);
}
.food-demo-footer .food-demo-next:hover {
    transform: translateX(-50px) scale(1.1);
}
.food-demo-footer .food-demo-dots {
    position: static;
    margin: 0;
}
.food-demo-footer-text {
    color: #e0d8c3;
    margin: 0 0 5px 0;
    font-size: 1.15rem;
    line-height: 1.8;
}

.food-demo-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}
.food-demo-dot {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}
.food-demo-dot:hover {
    background: rgba(255,255,255,0.6);
}
.food-demo-dot.is-active,
.food-demo-dot.active {
    background: var(--food-color-accent);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* --- Sample Badge (Moved from head) --- */
.food-sample-badge {
    margin: var(--f-space-xxl) auto 0;
    width: fit-content;
    padding: var(--f-space-l) 25px;
    text-align: center;
    background: rgba(20, 10, 5, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--food-color-price-rgb), 0.5);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}
.sample-badge-en {
    display: block;
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: var(--f-font-size-xxl);
    color: var(--food-color-price);
    letter-spacing: var(--f-letter-spacing-tight);
    margin-bottom: var(--f-space-s);
    text-shadow: var(--f-text-shadow-subtle), 0 4px 10px rgba(0,0,0,0.6);
    border-bottom: 1px solid rgba(var(--food-color-price-rgb), 0.3);
    padding-bottom: 8px;
}
.sample-badge-jp {
    display: block;
    font-size: var(--f-font-size-base);
    line-height: 1.8;
    color: var(--f-color-text);
    letter-spacing: var(--f-letter-spacing-tight);
    font-family: "Yu Mincho", "YuMincho", serif;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

/* ※このLPは… の行のみ 価格色（--food-color-price-rgb） */
.food-sample-badge .sample-badge-jp:last-of-type {
    color: rgb(var(--food-color-price-rgb));
}

/* --- Responsive Layout (FOODPHOTO Specialized Fix) --- */
@media (max-width: 768px) {
    /* 2. ヒーローセクションの再構築 */
    .food-main-copy {
        gap: 15px; /* 物理的な余白を縮小 */
        margin-bottom: 20px;
    }

    .food-vertical-text {
        font-size: 1.1rem;
        letter-spacing: 0.2em;
        /* 縦書きの「高さ」が横幅を圧迫しないよう調整 */
        height: auto;
    }

    .food-product-name {
        font-size: 1.8rem; /* スマホでも固定サイズにして安定させる */
        letter-spacing: 0.1em;
        padding-top: 10px;
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255,255,255,0.3);
    }

    /* 横書きキャッチコピー（スマホ調整・アニメーション維持） */
    .food-hero-copy-text {
        font-size: 1.2rem;
        line-height: 1.8;
        /* スマホでもアニメーションは維持 */
    }
    .food-hero-br {
        display: block;
    }

    /* 3. 詳細セクションの「1カラム化」の徹底 */
    .food-detail-section {
        padding: var(--food-section-padding-sp);
        min-height: auto;   /* スマホで100vhは要素が重なる原因 */
    }

    .food-detail-container,
    .food-detail-section--left .food-detail-container {
        display: flex;      /* Gridの計算を捨て、Flexboxで縦並びを強制 */
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }

    .food-detail-text {
        order: 2;
        width: 100%;
        margin-top: 50px;
    }

    /* Selection 01: スマホ時は左寄せ */
    .food-detail-section--right .food-detail-text {
        text-align: left;
    }

    /* Selection 02: スマホ時も左寄せ */
    .food-detail-section--left .food-detail-text {
        text-align: left;
    }

    .food-detail-image {
        order: 1;
        width: 100%;
    }

    .food-detail-image img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* 完全独立型コンポーネント：スマホ対応（前面オフセット） */
    .comp-detail-figure {
        order: 1;
        width: 100%;
        /* スマホ版の座標を絶対固定（右上・右への均等オフセット） */
        --comp-deco-top-offset: -15px;  /* スマホ版：上方向へズラす負の値（画面外に飛び出さない） */
        --comp-deco-left-offset: 15px;  /* スマホ版：右方向へズラす正の値（画面外に飛び出さない） */
        --comp-deco-width: 100%;        /* 装飾枠の幅（画像と同じサイズ） */
        --comp-deco-height: 100%;       /* 装飾枠の高さ（画像と同じサイズ） */
    }

    .comp-detail-figure__image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 4. グリッドセクションの自動収縮 */
    .food-grid-container {
        display: block; /* Gridを解除 */
        width: 100%;
    }

    .food-grid-item {
        margin-bottom: 40px;
        width: 100%;
    }

    /* 5. フォントサイズの最適化（横揺れ防止） */
    .food-detail-text .food-detail-headline {
        font-size: 1.4rem;
    }

    .food-grid-title {
        font-size: 1rem;
        letter-spacing: 0.1em;
    }

    .food-en-message {
        font-size: 0.9rem;     /* 1remだと長文がはみ出すため縮小 */
        letter-spacing: 0.05em; /* 文字間隔を詰めて画面内に収める */
    }

    /* 【廃止】.food-detail-image::before は使用禁止 */
    /* 完全独立型コンポーネント（comp-detail-figure）に移行済み */
    
    /* 完全独立型コンポーネント：スマホ版装飾の座標はCSS変数で制御（上記で設定済み） */

    /* Menu Section Mobile */
    .food-menu-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .food-plan-detail-list {
        grid-template-columns: 1fr;
    }
    
    .food-menu-title {
        font-size: 1.5rem;
    }

    /* Access Section Mobile */
    .food-access-section {
        padding: var(--food-section-padding);
    }
    .food-access-container {
        flex-direction: column;
        gap: 40px;
    }
    .food-access-info, .food-access-map {
        width: 100%;
    }
    .food-access-info {
        text-align: center; /* スマホ: テキストを中央揃え */
    }
    .food-shop-sns {
        justify-content: center; /* スマホ: SNSアイコンを中央揃え */
    }
    .food-access-map {
        height: 300px;
    }

    /* News Section Mobile */
    .food-news-section .food-sample-message {
        margin-top: 50px; /* NEWS & CAMPAIGN 直下の罫線ブロックの上余白（テンプレでは削除予定） */
    }
    .food-news-list li a {
        flex-wrap: wrap;
        align-items: center;
    }
    .news-icon {
        margin-right: 15px;
    }
    .news-date {
        width: auto;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .news-text {
        margin-left: 0;
        width: 100%;
        margin-top: 8px;
        flex: 0 0 100%;
    }
    .br-span-sp {display: block;}

    /* 特定のプラン名のみ縦並び（スマホ用） */
    .food-menu-header-vertical-sp {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ヒーローセクション：画面いっぱい表示の強制復元（トップページ用・詳細度で制御） */
body.food-body.p-top .food-hero-section {
    width: 100%;
    min-height: 100vh;
    height: 100vh;
}

body.food-body.p-top .food-hero-section .food-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    aspect-ratio: auto; /* 正方形化の設定を解除 */
}

/* --- トップページ デモモーダル（インライン style 禁止・ここに集約） --- */
#demoModal .food-demo-content {
    width: 72%;
    max-width: 970px;
}
#demoModal .food-demo-slider {
    aspect-ratio: 16 / 12.6;
    max-height: 732px;
}
#demoModal .food-demo-slide img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: center center;
}
@keyframes flash-next {
    0% { background-color: rgba(0,0,0,0.3); box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    70% { background-color: rgba(0,0,0,0.8); box-shadow: 0 0 0 15px rgba(255,255,255,0); }
    100% { background-color: rgba(0,0,0,0.3); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
#nextSlide {
    animation: flash-next 2s infinite;
    border-radius: 50%;
}
@media (max-width: 768px) {
    #demoModal .food-demo-content {
        width: 100%;
        max-width: 100%;
    }
}

/* トップページ お問い合わせフォーム メッセージ表示制御（インライン style 禁止） */
.c-form__section .loading,
.c-form__section .error-message,
.c-form__section .sent-message {
    display: none;
}