/* ===================================================
   salomirror — トップページ専用 (css/home.css)
   main.css の後に読み込み、index.html だけに効く。

   組み方の方針（2026-09-28 改装）
   - 見出しは「大きな欧文1語＋日本語の見出し」の2段。欧文は装飾の
     アイブロウではなく組版の主役として大きく置き、情報は日本語側に持たせる
   - 写真は枠の中でゆっくり動かし（パララックス）、出るときは下からマスクで開く
   - 仕上げのセクションに入るとページ全体が暗転し、抜けると明るく戻る
   =================================================== */

/* セクションが縦に長い（仕上げのレールは画面8枚ぶん）ので、
   近接スナップが効くと途中で引き戻される。トップでは切る */
html {
    scroll-snap-type: none;
}

body {
    background: var(--ivory);
}

:root {
    --home-ink: #241f19;
    --home-paper: #f3e9dc;
    --home-night: #16120c;
    --home-mute: #7a6f5f;
    --home-line: rgba(36, 31, 25, 0.16);
    --home-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── 共通: 見出し ─────────────────────────────────── */
.sec-title {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 22px);
    margin: 0;
    font-weight: 400;
}

.sec-title-en {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(56px, 10.5vw, 168px);
    line-height: 0.9;
    letter-spacing: -0.035em;
    color: var(--home-ink);
    /* 文字ごとのマスク（js/home.js が span.ch に分割する） */
    overflow: hidden;
    padding-bottom: 0.06em;
}

.sec-title-en .ch {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 1.1s var(--home-ease);
    transition-delay: calc(var(--i, 0) * 45ms);
}

.sec-title.is-in .sec-title-en .ch,
.no-motion .sec-title-en .ch {
    transform: none;
}

.sec-title-ja {
    display: block;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    font-size: var(--text-xl);
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--home-ink);
}

.sec-title--light .sec-title-en,
/* 見出しの文節。途中で折り返さず、文節の切れ目でだけ改行させる（スマホで「第3の／選択肢」と割れていた） */
.sec-title-ja .ph {
    display: inline-block;
}

.sec-title--light .sec-title-ja {
    color: var(--home-paper);
}

/* ─── 共通: 出現 ───────────────────────────────────── */
[data-rise] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--home-ease), transform 1.2s var(--home-ease);
}

[data-rise].is-in {
    opacity: 1;
    transform: none;
}

/* 写真は下からマスクで開き、中の画像は少し拡大から戻る。
   clip-path を観察対象そのものに掛けると IntersectionObserver が
   「見えていない」と判定し続けるので、子に掛ける */
[data-clip]>* {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.4s var(--home-ease);
}

[data-clip] img {
    transform: scale(1.18);
    transition: transform 1.8s var(--home-ease);
}

[data-clip].is-in>* {
    clip-path: inset(0 0 0 0);
}

[data-clip].is-in img {
    transform: scale(1.06);
}

/* パララックスの箱。中身を上下に余らせておき、js/home.js が translate する */
.par {
    position: absolute;
    inset: -8% 0;
    will-change: transform;
}

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

.no-motion [data-rise],
.no-motion [data-clip]>*,
.no-motion [data-clip] img {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
}

/* ─── 共通: 矢印ボタン（文字が上に抜けて下から同じ文字が上がる） ─── */
.roll-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: var(--tap-min);
    padding: 16px 22px 16px 28px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.4s, color 0.4s, border-color 0.4s;
}

.roll-btn-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 1.4;
}

.roll-btn-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
}

.roll-btn-text,
.roll-btn-text::after {
    transition: transform 0.55s var(--home-ease);
}

.roll-btn-arrow {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid currentColor;
    overflow: hidden;
}

.roll-btn-arrow::before,
.roll-btn-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background: currentColor;
    /* → の形 */
    clip-path: polygon(0 44%, 62% 44%, 62% 12%, 100% 50%, 62% 88%, 62% 56%, 0 56%);
    transition: transform 0.55s var(--home-ease);
}

.roll-btn-arrow::after {
    transform: translateX(-220%);
}

@media (hover: hover) {
    .roll-btn:hover .roll-btn-text {
        transform: translateY(-100%);
    }

    .roll-btn:hover .roll-btn-arrow::before,
    a:hover>.roll-btn-arrow::before {
        transform: translateX(220%);
    }

    .roll-btn:hover .roll-btn-arrow::after,
    a:hover>.roll-btn-arrow::after {
        transform: translateX(0);
    }
}

.roll-btn--ink {
    background: var(--home-ink);
    color: var(--home-paper);
}

.roll-btn--ink:hover {
    background: #000;
}

.roll-btn--light {
    background: var(--home-paper);
    color: var(--home-ink);
}

.roll-btn--line {
    border: 1px solid var(--home-line);
    color: var(--home-ink);
}

.roll-btn--line:hover {
    border-color: var(--home-ink);
}

/* ─── HERO (KV) ────────────────────────────────────── */
.kv {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(76px + env(safe-area-inset-top)) 0 0 var(--gutter);
    background: var(--home-paper);
    color: var(--home-ink);
    overflow: hidden;
}

.kv-photo {
    grid-column: 2;
    grid-row: 1 / 3;
    position: relative;
    overflow: hidden;
    /* 読み込み時に下から開く */
    clip-path: inset(100% 0 0 0);
    animation: kvOpen 1.6s var(--home-ease) 0.15s forwards;
}

.kv-photo-inner {
    position: absolute;
    inset: -6% 0;
    will-change: transform;
}

.kv-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
    display: block;
    transform: scale(1.2);
    animation: kvSettle 2.4s var(--home-ease) 0.15s forwards;
}

@keyframes kvOpen {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes kvSettle {
    to {
        transform: scale(1.04);
    }
}

.kv-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    position: relative;
    z-index: 2;
    padding: 0 clamp(20px, 3vw, 48px) 0 0;
    margin-top: -6vh;
    /* 見出しの文字サイズをこの列の幅から決める（.kv-title の cqi） */
    container-type: inline-size;
}

.kv-kicker {
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--home-mute);
}

.kv-title {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    /* 1行が折り返さない（nowrap）ので、いちばん長い行「組み合わせ100万通り以上。」（約13.4em）が
       列に収まる大きさで頭打ちにする。以前は列からはみ出した分が切れ、タブレットでは横スクロールも出ていた */
    font-size: min(clamp(26px, 2.75vw, 46px), 7.3cqi);
    line-height: 1.45;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

.kv-line {
    display: block;
    overflow: hidden;
}

.kv-line>span {
    display: block;
    transform: translateY(105%);
    animation: kvRise 1.3s var(--home-ease) var(--d, 0s) forwards;
}

@keyframes kvRise {
    to {
        transform: none;
    }
}

.kv-lead {
    margin: clamp(20px, 2.4vw, 32px) 0 clamp(28px, 3vw, 40px);
    font-size: var(--text-sm);
    line-height: 2;
    color: var(--home-mute);
}

.kv-fade {
    opacity: 0;
    animation: kvFade 1.1s var(--home-ease) var(--d, 0s) forwards;
}

@keyframes kvFade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 画面幅いっぱいのブランド名。下端を写真に重ね、1文字ずつ下から上がる */
.kv-mark {
    grid-column: 1 / 3;
    grid-row: 2;
    position: relative;
    z-index: 1;
    margin: 0 0 0 calc(var(--gutter) * -0.12);
    /* ロゴ（img/logo.png）と同じ幾何学的なサンセリフに近い Lexend。9/29 ご依頼で Fraunces から変更 */
    font-family: 'Lexend', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17.3vw;   /* Lexend は Fraunces より約1割幅広いので、横幅が変わらないよう縮める */
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: var(--home-ink);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    padding: 0.04em 0 0.035em;
}

.kv-mark-inner {
    display: inline-block;
    will-change: transform;
}

.kv-mark .ch {
    display: inline-block;
    transform: translateY(100%);
    animation: kvRise 1.4s var(--home-ease) forwards;
    animation-delay: calc(0.45s + var(--i, 0) * 55ms);
}

.kv-scroll {
    position: absolute;
    right: calc(var(--gutter) * 0.5);
    top: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px;
    color: var(--home-paper);
    text-decoration: none;
    mix-blend-mode: difference;
}

.kv-scroll-text {
    writing-mode: vertical-rl;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.28em;
}

.kv-scroll-rail {
    position: relative;
    width: 1px;
    height: 72px;
    background: rgba(243, 233, 220, 0.3);
    overflow: hidden;
}

.kv-scroll-rail i {
    position: absolute;
    inset: 0;
    background: currentColor;
    animation: kvCue 2.2s var(--home-ease) infinite;
}

@keyframes kvCue {
    0% {
        transform: translateY(-100%);
    }

    60%,
    100% {
        transform: translateY(100%);
    }
}

/* ─── TONE（背景の明暗） ─────────────────────────────── */
.tone {
    background: var(--home-paper);
    color: var(--home-ink);
    transition: background-color 0.9s var(--home-ease), color 0.9s var(--home-ease);
}

.tone.is-dark {
    background: var(--home-night);
}

/* ─── CONCEPT ─────────────────────────────────────── */
.concept {
    padding: clamp(96px, 14vw, 200px) var(--gutter) clamp(80px, 10vw, 160px);
    max-width: 1440px;
    margin: 0 auto;
}

.concept-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: end;
}

.concept-text p {
    margin: 0 0 1.4em;
    font-size: var(--text-base);
    line-height: 2.1;
    color: var(--home-ink);
}

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

.concept-media {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-top: clamp(64px, 9vw, 140px);
}

.concept-fig {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.concept-fig--main {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    aspect-ratio: 4 / 5;
}

.concept-fig--sub {
    grid-column: 8 / 12;
    grid-row: 2;
    align-self: end;
    aspect-ratio: 3 / 4;
    margin-bottom: -14%;
}

.concept-note {
    grid-column: 8 / 13;
    grid-row: 1;
    align-self: start;
    margin: 12% 0 3em;
    font-family: 'Shippori Mincho', serif;
    font-size: var(--text-lg);
    line-height: 1.7;
    letter-spacing: 0.06em;
}

/* ─── FINISH ──────────────────────────────────────── */
.finish {
    color: var(--home-paper);
    padding-top: clamp(40px, 6vw, 80px);
    /* 床の光（.unit::after は左右に80%はみ出す）が、タブレット幅で画面の右へ出て
       ページが横にスクロールし、固定ヘッダーのメニューボタンが画面外に押し出されていた。
       clip はスクロール領域を作らないので、中の sticky はそのまま効く */
    overflow-x: clip;
}

/* 1枚あたり画面の 60% ぶんスクロールさせる */
.finish-rail {
    position: relative;
    height: calc(100vh + var(--n, 8) * 60vh);
}

.finish-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 96px);
    padding: calc(60px + env(safe-area-inset-top)) var(--gutter) 24px;
    max-width: 1440px;
    margin: 0 auto;
}

.finish-lead {
    max-width: 30em;
    margin: clamp(20px, 2.4vw, 32px) 0 0;
    font-size: var(--text-sm);
    line-height: 2;
    color: rgba(243, 233, 220, 0.66);
}

.finish-now {
    margin-top: clamp(28px, 4vw, 56px);
    padding-top: 20px;
    border-top: 1px solid rgba(243, 233, 220, 0.18);
    min-height: 7.5em;
}

.finish-now p {
    margin: 0;
    transition: opacity 0.35s, transform 0.5s var(--home-ease);
}

.finish-now.is-swapping p {
    opacity: 0;
    transform: translateY(8px);
}

.finish-group {
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    color: rgba(243, 233, 220, 0.55);
}

.finish-name {
    margin-top: 6px !important;
    font-family: 'Shippori Mincho', serif;
    font-size: var(--text-xl);
    letter-spacing: 0.04em;
}


.finish-dots {
    display: flex;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.finish-dots li {
    width: 18px;
    height: 2px;
    background: rgba(243, 233, 220, 0.2);
    transition: background 0.4s, width 0.5s var(--home-ease);
}

.finish-dots li.is-on {
    width: 36px;
    background: #d9bd8a;
}

.finish-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 0;
}

/* 本体。3Dの描画を仕上げごとに重ね、切り替えはフェード。
   画像の縦横比は 471:1600（8枚とも同じ切り出し範囲） */
.unit {
    position: relative;
    height: min(78vh, 760px);
    aspect-ratio: 471 / 1600;
}

.unit img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.unit img.is-on {
    opacity: 1;
}

/* 床に落ちる影と、LEDの光が床をうっすら照らす分 */
.unit::before {
    content: '';
    position: absolute;
    left: -30%;
    right: -60%;
    bottom: 1%;
    height: 7%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    filter: blur(6px);
}

.unit::after {
    content: '';
    position: absolute;
    left: -80%;
    right: -80%;
    bottom: -4%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 214, 150, 0.12), rgba(255, 214, 150, 0));
    pointer-events: none;
}

/* 全20種の一覧 */
.finish-all {
    padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(96px, 12vw, 180px);
    max-width: 1440px;
    margin: 0 auto;
}

.finish-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px) clamp(10px, 1.2vw, 18px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.finish-grid li {
    font-size: var(--text-2xs);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: rgba(243, 233, 220, 0.72);
}

.finish-sw {
    display: block;
    aspect-ratio: 1;
    margin-bottom: 8px;
    background: center / cover no-repeat;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.finish-foot {
    max-width: 44em;
    margin: clamp(32px, 4vw, 56px) 0 0;
    font-size: var(--text-sm);
    line-height: 2;
    color: rgba(243, 233, 220, 0.66);
}

/* ─── SPEC ────────────────────────────────────────── */
.spec {
    padding: clamp(96px, 12vw, 180px) var(--gutter);
}

.spec-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 110px);
    max-width: 1440px;
    margin: 0 auto;
}

.spec-side {
    align-self: start;
    position: sticky;
    top: 110px;
}

.spec-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: clamp(36px, 4vw, 56px) 0 0;
}

.spec-price-label {
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    color: var(--home-mute);
}

.spec-price-num {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(40px, 4.6vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.spec-price-num small {
    margin-left: 0.4em;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--home-mute);
}

.spec-size {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: clamp(28px, 3vw, 44px);
    padding: 18px 0;
    border-top: 1px solid var(--home-line);
    border-bottom: 1px solid var(--home-line);
    color: var(--home-ink);
    text-decoration: none;
    max-width: 420px;
}

.spec-size-ico {
    flex: none;
    width: 20px;
    height: 48px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.spec-size-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spec-size-label {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.spec-size-num {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: var(--text-xs);
    color: var(--home-mute);
}

.spec-size-num small {
    margin-left: 2px;
}

.spec-list {
    margin: 0;
    border-top: 1px solid var(--home-ink);
}

.spec-row {
    display: grid;
    grid-template-columns: 8em minmax(0, 1fr);
    gap: 16px;
    padding: clamp(18px, 2vw, 26px) 0;
    border-bottom: 1px solid var(--home-line);
}

.spec-row dt {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
}

.spec-row dd {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.9;
}

/* ─── FAQ ─────────────────────────────────────────── */
/* 回答は <details> の中でも HTML に実在するので、検索エンジン・生成AIにも読める */
.faq {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(96px, 12vw, 160px) var(--gutter);
}

.faq-list {
    margin-top: clamp(36px, 4vw, 56px);
    border-top: 1px solid var(--home-ink);
}

.faq-item {
    border-bottom: 1px solid var(--home-line);
}

.faq-q {
    position: relative;
    padding: clamp(18px, 2vw, 26px) 40px clamp(18px, 2vw, 26px) 0;
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.7;
    cursor: pointer;
    list-style: none;
}

.faq-q::-webkit-details-marker {
    display: none;
}

.faq-q::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: var(--home-mute);
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-q::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-a {
    margin: 0;
    padding: 0 40px clamp(20px, 2.4vw, 30px) 0;
    font-size: var(--text-sm);
    line-height: 2;
    color: var(--home-mute);
}

/* ─── WORKS ───────────────────────────────────────── */
.works2 {
    padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(96px, 12vw, 180px);
    max-width: 1440px;
    margin: 0 auto;
}

.works2-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 96px);
}

.works2-lead {
    margin: 0;
    font-size: var(--text-base);
    line-height: 2;
}

.works2-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 80px) clamp(16px, 2.4vw, 40px);
}

.work {
    display: block;
    color: inherit;
    text-decoration: none;
}

.work--wide {
    grid-column: 1 / -1;
}

.work--offset {
    margin-top: clamp(40px, 8vw, 140px);
}

.work-fig {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.work--wide .work-fig {
    aspect-ratio: 21 / 9;
}

.work-fig img {
    transition: transform 1.8s var(--home-ease), filter 0.6s;
}

@media (hover: hover) {
    .work:hover .work-fig img {
        transform: scale(1.1);
    }
}

.work-cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--home-line);
}

.work-name {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.work-meta {
    font-size: var(--text-xs);
    color: var(--home-mute);
}

.works2-more {
    display: flex;
    justify-content: center;
    margin-top: clamp(56px, 7vw, 100px);
}

/* ─── SIMULATOR ───────────────────────────────────── */
.sim {
    background: var(--home-night);
    color: var(--home-paper);
    padding: clamp(96px, 12vw, 180px) var(--gutter);
}

.sim-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}

.sim-desc {
    max-width: 30em;
    margin: clamp(24px, 3vw, 40px) 0;
    font-size: var(--text-base);
    line-height: 2.1;
    color: rgba(243, 233, 220, 0.72);
}

.sim-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}

.sim-alt {
    min-height: var(--tap-min);
    padding: 0 4px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(243, 233, 220, 0.4);
    color: var(--home-paper);
    font: inherit;
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.3s;
}

.sim-alt:hover {
    border-color: var(--home-paper);
}

.sim-fig {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #efe6d8;
}

.sim-fig img {
    display: block;
    width: 100%;
    height: auto;
}

.sim .sec-title-en {
    font-size: clamp(52px, 7.4vw, 116px);
}

/* ─── CLOSING ─────────────────────────────────────── */
.closing {
    padding: clamp(120px, 16vw, 240px) var(--gutter);
    background: var(--home-paper);
    text-align: center;
}

.closing-quote {
    margin: 0 auto;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    font-size: var(--text-2xl);
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: var(--home-ink);
}

.closing-cite {
    margin: clamp(28px, 3vw, 44px) 0 0;
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    color: var(--home-mute);
}

/* ─── タブレット（834〜1179px） ─────────────────────── */
@media (min-width: 834px) and (max-width: 1179.98px) {
    .kv {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    }

    .finish-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* ─── ラージフォン以下（〜833px） ───────────────────── */
@media (max-width: 833.98px) {
    .kv {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        padding: calc(64px + env(safe-area-inset-top)) 0 0;
        min-height: 0;
    }

    .kv-photo {
        grid-column: 1;
        grid-row: 1;
        height: 62svh;
        margin: 0 var(--gutter);
    }

    .kv-mark {
        grid-column: 1;
        grid-row: 2;
        margin: -0.36em 0 0 calc(var(--gutter) * 0.6);
        font-size: 19.3vw;
    }

    .kv-copy {
        grid-column: 1;
        grid-row: 3;
        margin: 0;
        padding: clamp(28px, 7vw, 48px) var(--gutter) clamp(56px, 12vw, 80px);
    }

    .kv-scroll {
        display: none;
    }

    .concept-head,
    .works2-head,
    .spec-inner,
    .sim-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .spec-side {
        position: static;
    }

    .concept-fig--main {
        grid-column: 1 / 11;
    }

    .concept-fig--sub {
        grid-column: 6 / 13;
        grid-row: 2;
        margin: -18% 0 0;
    }

    .concept-note {
        grid-column: 1 / 6;
        grid-row: 2;
        align-self: end;
        margin: 0;
        font-size: var(--text-md);
    }

    /* 縦に積む：上に文字、下にアーチ */
    .finish-rail {
        height: calc(100svh + var(--n, 8) * 45svh);
    }

    .finish-stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: start;
        gap: 16px;
        padding-top: calc(72px + env(safe-area-inset-top));
    }

    .finish-copy .sec-title-en {
        font-size: clamp(48px, 15vw, 96px);
    }

    .finish-copy .sec-title {
        gap: 8px;
    }

    .finish-lead {
        display: none;
    }

    .finish-now {
        margin-top: 16px;
        padding-top: 14px;
        min-height: 0;
    }

    .finish-name {
        font-size: var(--text-lg);
    }

    .unit {
        height: min(44svh, 440px);
    }

    .finish-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .works2-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work--wide .work-fig {
        aspect-ratio: 4 / 3;
    }

    .work--tall:last-child {
        display: none;
    }
}

/* ─── モバイル（〜599px） ────────────────────────────── */
@media (max-width: 599.98px) {
    .finish-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spec-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .works2-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .work--offset {
        margin-top: 0;
    }

    .work--tall:last-child {
        display: block;
    }

    .closing-quote {
        font-size: var(--text-lg);
    }

    .closing-quote br {
        display: none;
    }
}

/* ─── 動きを減らす設定 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .kv-photo,
    .kv-photo img,
    .kv-line>span,
    .kv-fade,
    .kv-mark .ch {
        animation: none;
        clip-path: none;
        transform: none;
        opacity: 1;
    }

    /* 仕上げは一覧だけ見せ、スクロールで着替える演出は畳む */
    .finish-rail {
        height: auto;
    }

    .finish-dots {
        display: none;
    }

    .finish-stage {
        position: relative;
        height: auto;
        padding-top: clamp(80px, 10vw, 140px);
    }
}