/* Preset: minimal — "Quiet Luxury Editorial"
   Restrained, high-margin design: thin rules, small section numbers, a
   precise grid, and a serif/sans pairing kept deliberately quiet.
   Generated from automation/New-StoreSite.ps1 theme preset.
   Source: Get-ThemePresetConfig("minimal")
*/

:root {
    --color-bg: #ffffff;
    --color-bg-warm: #f6f7f8;
    --color-beige: #e8ecef;
    --color-text: #20252a;
    --color-text-light: #5e6872;
    --color-border: #d9dee3;
    --color-primary: #3d5966;
    --color-primary-dark: #324954;
    --color-accent: #74818c;
    --font-serif: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
    --line-height-base: 1.7;
    --spacing-xs: 7px;
    --spacing-sm: 14px;
    --spacing-md: 20px;
    --spacing-lg: 27px;
    --spacing-xl: 41px;
    --spacing-2xl: 54px;
    /* v5.1: shared --max-width (1160px) left content looking hemmed-in at
       1440px+; widened modestly (theme-scoped override, not the shared
       file) -- kept narrower than Natural/Modern's widening since Minimal's
       brief is restraint, not maximal width use. */
    --max-width: 1220px;
}

/* ========================================================================
   Minimal Theme - Scoped Selectors (body[data-theme="minimal"])
   ======================================================================== */

body[data-theme="minimal"] {
    background-color: var(--color-bg);
    --motion-duration: 0.45s;
    --motion-ease: ease-out;
    --motion-distance: 12px;
    --motion-stagger-step: 55ms;
}

body[data-theme="minimal"] h1,
body[data-theme="minimal"] h2 {
    font-family: var(--font-serif);
    color: var(--color-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Header */
body[data-theme="minimal"] .header {
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

body[data-theme="minimal"] .header__title {
    font-family: var(--font-serif);
    color: var(--color-primary);
    font-weight: 600;
}

body[data-theme="minimal"] .header__brand:hover {
    background-color: transparent;
}

body[data-theme="minimal"] .header__menu a {
    color: var(--color-text);
    font-size: 14px;
}

body[data-theme="minimal"] .header__menu a:hover {
    color: var(--color-primary);
}

body[data-theme="minimal"] .menu-toggle__line {
    background-color: var(--color-text);
}

@media (max-width: 768px) {
    body[data-theme="minimal"] .header__menu-backdrop {
        background-color: rgba(32, 37, 42, 0.25);
    }

    body[data-theme="minimal"] .header__menu {
        background-color: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
    }

    body[data-theme="minimal"] .header__menu li {
        border-bottom: 1px solid var(--color-border);
    }

    body[data-theme="minimal"] .header__menu a:hover {
        background-color: var(--color-bg-warm);
    }
}

/* ========================================================================
   Hero — full-bleed photo with a quiet text column, small index/scroll marks
   ======================================================================== */

body[data-theme="minimal"] .hero--minimal {
    position: relative;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
}

body[data-theme="minimal"] .hero__index,
body[data-theme="minimal"] .hero__scroll {
    display: none;
}

body[data-theme="minimal"] .hero__media {
    position: relative;
    order: -1;
}

body[data-theme="minimal"] .hero__image {
    filter: none;
}

body[data-theme="minimal"] .hero__media::before {
    /* v4: extremely subtle botanical shadow across the photo -- kept low
       enough that its presence is felt rather than seen, per the "quiet
       luxury" brief. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/theme-decor/minimal-soft-botanical-shadow-01.webp");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center 30%;
    opacity: 0.12;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* v5.3: 写真の角に置いていたトリミング記号（枠線だけの小さい四角）を外した。
   意図は「写真的な余白の記号」だったが、実測の目視では**未読込の画像か
   チェックボックス**に見える。読み手が壊れていると思うものは、装飾として
   成立していない。置き換えの装飾も足さない。 */

@media (min-width: 769px) {
    body[data-theme="minimal"] .hero--minimal {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) minmax(0, 1.15fr);
        align-items: stretch;
        min-height: 620px;
        gap: 0;
    }

    body[data-theme="minimal"] .hero__media {
        order: 2;
        max-width: none;
        flex: none;
        height: auto;
    }

    body[data-theme="minimal"] .hero__content {
        order: 1;
        max-width: 480px;
        padding: var(--spacing-2xl) var(--spacing-xl);
        justify-content: center;
    }

    body[data-theme="minimal"] .hero__index,
    body[data-theme="minimal"] .hero__scroll {
        display: block;
        position: absolute;
        left: var(--spacing-md);
        font-size: 12px;
        letter-spacing: 0.2em;
        color: var(--color-text-light);
    }

    body[data-theme="minimal"] .hero__index {
        top: var(--spacing-md);
    }

    body[data-theme="minimal"] .hero__scroll {
        bottom: var(--spacing-lg);
        writing-mode: vertical-rl;
    }
}

body[data-theme="minimal"] .hero__eyebrow {
    font-family: var(--font-serif);
    color: var(--color-primary);
    font-size: 12px;
    letter-spacing: 0.06em;
}

body[data-theme="minimal"] .hero__heading {
    font-size: 28px;
    line-height: 1.4;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

body[data-theme="minimal"] .hero__description {
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    max-width: 32em;
}

body[data-theme="minimal"] .hero__actions .btn--secondary {
    background-color: transparent;
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 769px) {
    body[data-theme="minimal"] .hero__heading {
        font-size: 34px;
    }
}

/* ========================================================================
   Concept — numbered eyebrow, asymmetric editorial columns
   ======================================================================== */

body[data-theme="minimal"] .concept__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    position: relative;
}

/* v5.3: 見出しの左上に置いていた枠のしるし（枠線だけの小さい四角）を外した。
   ハローの角のものと同じ理由である — 目視では未読込の画像に見え、見出しの
   直前という位置がなおさら「読み込めていない何か」に見せていた。 */

body[data-theme="minimal"] .concept .section-heading::before {
    content: "01";
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    margin-right: var(--spacing-xs);
}

/* v5.1: the eyebrow label (store.json's concept.heading, e.g. "コンセプ
   ト") was rendered at the same small size as the "01" index number --
   there is no separate large-headline field in store.json, so this label
   is restyled to carry the "大きな見出し" role the brief calls for instead
   of adding a new field. The small "01" stays its own small size via the
   ::before rule above. */
body[data-theme="minimal"] .concept .section-heading {
    align-items: baseline;
    gap: var(--spacing-sm);
}

body[data-theme="minimal"] .concept .section-heading span {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.01em;
}

body[data-theme="minimal"] .concept .section-heading__icon {
    display: none;
}

body[data-theme="minimal"] .concept__text {
    max-width: none;
    min-width: 0;
}

body[data-theme="minimal"] .concept__text p {
    max-width: 34em;
}

body[data-theme="minimal"] .concept__media {
    border-left: 1px solid var(--color-border);
    padding-left: var(--spacing-lg);
}

body[data-theme="minimal"] .concept__image {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

@media (min-width: 1024px) {
    body[data-theme="minimal"] .concept .section-heading span {
        font-size: 30px;
    }
}

@media (min-width: 769px) {
    /* v5.3: 文章と写真が離れて見えたのは、写真の列を 340px で頭打ちにして
       いたためである。容器（--max-width: 1220px）は広いので、余った幅が
       そのまま2つの間の空白になり、写真だけが右端へ寄って見えた。

       同じ中央容器の中で 55% / 45% に分け、余りを列に配らせる。上端は
       align-items: start で見出し・本文と揃える（center だと写真の高さ次第で
       文章が沈み、見出しと合わなくなる）。 */
    body[data-theme="minimal"] .concept__inner {
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
        gap: var(--spacing-xl);
        align-items: start;
    }

    body[data-theme="minimal"] .concept__media {
        order: 2;
        max-width: none;
        width: 100%;
        justify-self: stretch;
    }

    /* 45% の列に 3/4 の縦長を入れると、写真だけが本文の倍近い高さになる。
       素材どおりの 4/3 にして、本文の高さに近づける。 */
    body[data-theme="minimal"] .concept__image {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 1024px) {
    body[data-theme="minimal"] .concept__inner {
        gap: 56px;
    }
}

/* ========================================================================
   Products — quiet two-column editorial list (works with or without price)
   ======================================================================== */

body[data-theme="minimal"] .products {
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

body[data-theme="minimal"] .products .section-title::before {
    content: "02";
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 4px;
}

/* v5.2: 商品カードは3つの子（画像・商品名・説明）を持つ。2列のグリッドへ
   自動配置すると、3つ目の説明が2行目の**画像側の細い列**へ落ちる。375px では
   1行6〜8文字になり、文章として読めなかった。

   直し方は2つ。

     1. grid-template-areas で置き場所を明示し、説明が画像の列へ落ちないようにする。
        自動配置に任せている限り、列幅を変えても同じことが起きる。
     2. 狭い幅では画像を上に置き、文章にカードの幅をそのまま渡す。横並びのまま
        画像ぶんを引くと、375px では文章に200px も残らない。

   上の罫線はカードではなくグリッドへ付ける。列数が変わっても1本で足りるので、
   :first-child / :nth-child(2) の付け替えが要らなくなる。 */
body[data-theme="minimal"] .products__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-border);
}

body[data-theme="minimal"] .product-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "image"
        "title"
        "desc";
    gap: var(--spacing-sm);
    align-items: start;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--spacing-lg) 0;
}

body[data-theme="minimal"] .product-card__image {
    grid-area: image;
    aspect-ratio: 1;
    margin: 0;
    width: 100%;
}

body[data-theme="minimal"] .product-card__title {
    grid-area: title;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0;
    color: var(--color-primary);
}

body[data-theme="minimal"] .product-card__description {
    grid-area: desc;
    padding: 0;
    font-size: 0.95rem;
    margin-top: 0;
}

/* 640px〜: カードを2列以上へ。カードの中は縦積みのままなので、文章は
   カードの幅をそのまま使える。auto-fit の下限に min() を挟むのは、
   容器がその下限より狭いときに横スクロールを出さないため。 */
@media (min-width: 640px) {
    body[data-theme="minimal"] .products__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        column-gap: var(--spacing-2xl);
    }
}

/* 1024px〜: 画像を横へ戻す。画像は2行ぶんにまたがり、商品名と説明は同じ
   1fr の列に並ぶ。下限を 460px にしているのは、これより細いカードで
   横並びにすると文章の列がまた狭くなるからである。 */
@media (min-width: 1024px) {
    body[data-theme="minimal"] .products__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    }

    body[data-theme="minimal"] .product-card {
        grid-template-columns: 150px minmax(0, 1fr);
        grid-template-areas:
            "image title"
            "image desc";
        column-gap: var(--spacing-lg);
        row-gap: 6px;
        padding: var(--spacing-xl) 0;
    }

    body[data-theme="minimal"] .product-card__image {
        width: 150px;
        align-self: center;
    }

    body[data-theme="minimal"] .product-card__title {
        font-size: 1.25rem;
    }

    body[data-theme="minimal"] .product-card__description {
        font-size: 1rem;
    }
}

/* ========================================================================
   Features — numbered columns, rule-based, no icons
   ======================================================================== */

body[data-theme="minimal"] .features {
    background-color: var(--color-bg-warm);
}

body[data-theme="minimal"] .features .section-title::before {
    content: "03";
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 4px;
}

body[data-theme="minimal"] .features__list {
    counter-reset: minimal-feature;
    gap: var(--spacing-xl);
}

body[data-theme="minimal"] .feature-item {
    counter-increment: minimal-feature;
    align-items: flex-start;
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-md);
    gap: var(--spacing-sm);
}

body[data-theme="minimal"] .feature-item__icon {
    display: none;
}

body[data-theme="minimal"] .feature-item::before {
    content: counter(minimal-feature, decimal-leading-zero);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    flex-shrink: 0;
}

body[data-theme="minimal"] .feature-item__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-primary);
}

body[data-theme="minimal"] .feature-item__text p {
    font-size: 0.95rem;
}

@media (min-width: 1024px) {
    body[data-theme="minimal"] .feature-item::before {
        font-size: 1rem;
    }

    body[data-theme="minimal"] .feature-item__title {
        font-size: 1.25rem;
    }

    body[data-theme="minimal"] .feature-item__text p {
        font-size: 1rem;
    }
}

/* ========================================================================
   Gallery — even, portrait-oriented grid
   ======================================================================== */

body[data-theme="minimal"] .gallery {
    background-color: var(--color-bg);
}

body[data-theme="minimal"] .gallery .section-title::before {
    content: "04";
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 4px;
}

body[data-theme="minimal"] .gallery-item {
    border: 1px solid var(--color-border);
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 3/4;
}

/* v5.1: base template's mobile gallery is a horizontal-scroll strip, which
   hid most photos off-screen with only a sliver of the next one visible.
   Minimal specifically switches to a precise 2-column grid below 769px
   (brief: "モバイルでは2列と1列のリズム") -- the first photo spans both
   columns as the representative image, the rest sit two-up. */
@media (max-width: 768px) {
    body[data-theme="minimal"] .gallery__scroller {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
        overflow-x: visible;
        margin: 0;
        padding: 0;
    }

    body[data-theme="minimal"] .gallery-item {
        flex: initial;
    }

    body[data-theme="minimal"] .gallery-item:first-child {
        grid-column: span 2;
        aspect-ratio: 16/10;
    }
}

/* v5.3: 比率を1枚ごとに変える（3/4・4/5・1/1）のをやめ、3枚目の
   align-self: end も外した。狙いは「並びに変化を出す」ことだったが、実測では
   **3枚目だけが下へずれ、上端が揃わない**表になる。写真を見比べる面なので、
   高さと上端が揃っていないと比較にならない。

   素材はすべて 4:3 なので、比率も 4:3 に揃える。object-fit: cover は下の
   共通指定のまま。 */
@media (min-width: 769px) {
    body[data-theme="minimal"] .gallery__scroller {
        display: grid;
        gap: var(--spacing-lg);
        align-items: start;
    }

    body[data-theme="minimal"] .gallery-item {
        aspect-ratio: 4 / 3;
        align-self: stretch;
    }

    body[data-theme="minimal"] .gallery-item:first-child {
        box-shadow: 0 10px 24px rgba(32, 37, 42, 0.08);
    }
}

/* 769〜1023px は4列だと1枚が細くなりすぎるので2列。 */
@media (min-width: 769px) and (max-width: 1023px) {
    body[data-theme="minimal"] .gallery__scroller {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* v5.3: 1024px 以上は3列。共通側は4列だが、写真が6枚だと2段目が2枚になり、
   右側に1枚ぶんの空白が残る。3列なら 3 + 3 でちょうど埋まる。
   列数を減らすぶん1枚は大きくなるが、比率は 4:3 のまま・上端も揃ったままである。 */
@media (min-width: 1024px) {
    body[data-theme="minimal"] .gallery__scroller {
        grid-template-columns: repeat(3, 1fr);
    }
}

body[data-theme="minimal"] .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover) {
    body[data-theme="minimal"] .gallery-item:hover img {
        opacity: 0.85;
    }
}

/* ========================================================================
   Info Band — Store Info / Access / Social
   ======================================================================== */

body[data-theme="minimal"] .store-info .section-title::before,
body[data-theme="minimal"] .access .section-title::before {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 4px;
}

body[data-theme="minimal"] .store-info .section-title::before {
    content: "05";
}

body[data-theme="minimal"] .access .section-title::before {
    content: "06";
}

body[data-theme="minimal"] .access {
    position: relative;
}

body[data-theme="minimal"] .access::before {
    /* v4: a very faint color-temperature wash behind the section, not a
       visible "sticker" -- reinforces the quiet palette rather than
       announcing itself as decoration. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/theme-decor/minimal-soft-panel-01.webp");
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

body[data-theme="minimal"] .access__inner {
    position: relative;
    z-index: 1;
}

body[data-theme="minimal"] .access__media {
    position: relative;
    z-index: 1;
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
}

body[data-theme="minimal"] .access__description {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.9;
}

/* v5.1: store-info / access / social sat as three visually separate boxes
   with no shared rhythm. Aligning their heading position and adding
   generous, matched vertical padding makes the row read as one continuous
   editorial grid instead of three unrelated cards. */
@media (min-width: 1024px) {
    body[data-theme="minimal"] .info-band > section {
        /* 上下は節ごとの統一（44px）に合わせる。ここで --spacing-2xl（54px）を
           指定していたため、この帯だけ他の節より広く空いていた。 */
        padding-top: 44px;
        padding-bottom: 44px;
        display: flex;
        flex-direction: column;
    }

    /* v5.3: 情報帯を2列＋1段にしたぶんアクセスの列が広くなった。max-width:100%
       のままだと写真がその幅いっぱいまで引き伸ばされ、1920px では元画像の
       倍近くまで拡大されてぼやける。「どう行くか」を示す写真なので、大きさの
       上限を決める。 */
    body[data-theme="minimal"] .access__media {
        max-width: 440px;
        margin-bottom: var(--spacing-lg);
    }

    body[data-theme="minimal"] .store-info__list {
        flex: 1;
    }
}

body[data-theme="minimal"] .social {
    padding: var(--spacing-lg) var(--spacing-md);
}

body[data-theme="minimal"] .social__grid {
    border: 1px solid var(--color-border);
    overflow: hidden;
}

body[data-theme="minimal"] .social__grid img {
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

body[data-theme="minimal"] .social__grid img:nth-child(3n) {
    border-right: none;
}

body[data-theme="minimal"] .social__description {
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

/* 2つのリンクを離す。容器は共通側では装飾しないので、間隔を決めるのは
   テーマの仕事になる。Instagram と 公式LINE は行き先が違うので、隣に
   詰めると1つのリンクに見える。 */
body[data-theme="minimal"] .social__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-xl);
}

/* v5.3: 3等分（店舗情報・アクセス・Instagram を横一列）をやめた。実測では
   Instagram の写真3枚が1/3幅に押し込まれて小さくなる一方、店舗情報側は
   縦に短いので下が空き、両端が余白だらけになっていた。

   上段に店舗情報とアクセスを2列、下段に Instagram を横幅いっぱい。
   Instagram は写真が主役なので、幅を与えたほうが情報量が上がる。 */
@media (min-width: 1024px) {
    body[data-theme="minimal"] .info-band {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "info access"
            "social social";
        align-items: start;
    }

    body[data-theme="minimal"] .info-band > section {
        border-top: none;
        border-left: none;
    }

    body[data-theme="minimal"] .store-info {
        grid-area: info;
    }

    body[data-theme="minimal"] .access {
        grid-area: access;
        border-left: 1px solid var(--color-border);
    }

    /* 上下は上の 44px 統一に任せ、ここでは左右だけを決める（padding の
       一括指定を書くと、統一のほうと取り合いになる）。 */
    body[data-theme="minimal"] .social {
        grid-area: social;
        border-top: 1px solid var(--color-border);
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    /* 横幅いっぱいになったぶん、3枚を大きく均等に見せる。中央容器の外へは
       広げない（写真だけが画面端まで伸びると、他の節と揃わない）。 */
    body[data-theme="minimal"] .social__inner {
        width: 100%;
        max-width: var(--max-width);
        margin: 0 auto;
    }
}

/* ========================================================================
   Final CTA — quiet, centered, generous whitespace
   ======================================================================== */

body[data-theme="minimal"] .final-cta {
    position: relative;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-2xl) var(--spacing-md);
}

body[data-theme="minimal"] .final-cta::before {
    /* v4: same quiet background-wash treatment as Access, for a subtle
       color-temperature bookend rather than a repeated visible motif. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/theme-decor/minimal-soft-gradient-01.webp");
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

body[data-theme="minimal"] .final-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
    max-width: 520px;
    margin: 0 auto;
}

/* v5.1: full redesign per the "not centered, not small" brief -- an
   asymmetric editorial pairing (photo + heading/description/CTA) instead
   of a small centered stack. Quiet Luxury restraint is kept via the low
   background-wash opacity and thin rules, not via smallness. */
body[data-theme="minimal"] .final-cta__inner--with-media {
    max-width: 100%;
    align-items: stretch;
    text-align: left;
    gap: var(--spacing-xl);
}

body[data-theme="minimal"] .final-cta__media {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

body[data-theme="minimal"] .final-cta__media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

body[data-theme="minimal"] .final-cta__content {
    text-align: center;
}

body[data-theme="minimal"] .final-cta__heading {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

body[data-theme="minimal"] .final-cta__icon {
    display: none;
}

body[data-theme="minimal"] .final-cta__text {
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
}

body[data-theme="minimal"] .final-cta .btn {
    background-color: var(--color-primary);
    color: #ffffff;
    border-radius: 3px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 14px;
    font-weight: 600;
}

body[data-theme="minimal"] .final-cta .btn:hover {
    background-color: var(--color-primary-dark);
}

@media (min-width: 769px) {
    body[data-theme="minimal"] .final-cta__inner {
        flex-direction: column;
        text-align: center;
    }

    body[data-theme="minimal"] .final-cta__text {
        flex: none;
        max-width: 520px;
    }

    body[data-theme="minimal"] .final-cta__inner--with-media {
        flex-direction: row;
        align-items: center;
        max-width: var(--max-width);
        margin: 0 auto;
        gap: var(--spacing-2xl);
    }

    body[data-theme="minimal"] .final-cta__media {
        max-width: 280px;
        flex-shrink: 0;
        margin: 0;
    }

    body[data-theme="minimal"] .final-cta__content {
        flex: 1;
        text-align: left;
    }

    body[data-theme="minimal"] .final-cta__text {
        margin: 0 0 var(--spacing-lg);
        max-width: 40em;
    }

    body[data-theme="minimal"] .final-cta__heading {
        font-size: 30px;
    }
}

/* Button Focus */
body[data-theme="minimal"] .btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Links Focus */
body[data-theme="minimal"] a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Footer */
body[data-theme="minimal"] .footer {
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

body[data-theme="minimal"] .footer__links a {
    color: var(--color-text-light);
    font-size: 13px;
}

body[data-theme="minimal"] .footer__links a:hover {
    color: var(--color-primary);
}

body[data-theme="minimal"] .footer__copyright {
    font-size: 12px;
    color: var(--color-text-light);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    body[data-theme="minimal"] * {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================================================
   セクションの上下余白（このファイルの最後に置く）
   ======================================================================== */

/* v5.3: 節と節の間が広すぎた。共通側の section は上下 --spacing-2xl（minimal
   では 54px）なので、隣り合う節の間は 54 + 54 = 108px になる。実測でも
   「特徴」と「店内のようす」の間がそれだけ空いていた。

   上下を 44px に揃えると、節の境目は 88px になる。

   このブロックをファイルの最後に置いているのは、節ごとに padding の一括指定を
   持つもの（.final-cta など）があるためである。同じ強さの指定は後に書いたほうが
   勝つので、統一はここでまとめて当てる。

   巨大な空白を作る min-height は他に無い（ハローの 620px だけで、これは
   第一画面の高さなので残す）。狭い幅は変えない — 縦に積む画面では間延びしない。 */
@media (min-width: 1024px) {
    /* .final-cta は class 指定で padding を持つ。class は要素名より強いので、
       後ろに書くだけでは勝てない。名指しで並べる。 */
    body[data-theme="minimal"] section,
    body[data-theme="minimal"] .info-band > section,
    body[data-theme="minimal"] .final-cta {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    body[data-theme="minimal"] .hero {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Custom color overrides (from JSON: theme.primaryColor / theme.bgColor) */
:root {
    --color-primary: #111111;
    --color-primary-dark: #0e0e0e;
    --color-bg-warm: #ffffff;
}