/* ===================================================
   CLAY — Home Page Styles  (css/main.css)
   =================================================== */

/* ── 日本語の折り返し ───────────────────────────────
   対応ブラウザでは文節単位で改行する。「美容室の/セット面を」のように
   意味の切れ目で折り返るので、行頭に助詞だけが残る不格好な改行が消える。
   text-wrap: pretty は最終行に1〜2文字だけ落ちるのを防ぐ。

   【重要】土台は normal にすること。keep-all を土台にすると、
   auto-phrase 非対応のブラウザ（Safari）で日本語が一切折り返せなくなり、
   段組みからはみ出して隣の要素の下に潜り込む。normal は
   日本語の標準の折り返し（禁則つきで文字単位）で、これが正しい退避先。 */
h1, h2, h3, h4, h5,
p, li, dt, dd, figcaption, blockquote,
label, button, summary {
    line-break: strict;
    word-break: normal;
    word-break: auto-phrase;
    overflow-wrap: break-word;
}

p, li, dd, figcaption, blockquote {
    text-wrap: pretty;
}

h1, h2, h3 {
    text-wrap: balance;
}

/* ── Skip Navigation (Accessibility) ── */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--white);
    color: var(--dark);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.1s;
}

.skip-nav:focus {
    top: 16px;
}

/* ── Finder empty state ── */
.finder-empty {
    grid-column: 1 / -1;
    padding: 60px 0;
    text-align: center;
}

.finder-empty-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 300;
    color: var(--silver);
    margin-bottom: 8px;
}

.finder-empty-sub {
    font-size: 13px;
    color: var(--silver);
    letter-spacing: 0.05em;
}

/* ── Text selection (brand color) ── */
::selection {
    background: rgba(184, 151, 63, 0.22);
    color: #241f19;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Touch UX ── */
a,
button,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --black: #000000;
    --obsidian: #151109;
    /* warm charcoal depth */
    --dark-panel: #2b2116;
    /* lighter dark-section panel, one step up from obsidian */
    --dark: #241f19;
    /* warm ink */
    --bg-gray: #ece0d0;
    /* tinted panel */
    --ivory: #f3e9dc;
    /* pale beige paper surface */
    --card-bg: #fdf9f3;
    --border: #ddccb2;
    --border-dark: rgba(255, 255, 255, 0.1);
    --silver: #7a6f5f;
    --silver-light: #a89a84;
    --white: #ffffff;
    --accent: #b08a4e;
    /* matte bronze — used sparingly as emphasis, not a base color */
    --accent-deep: #8a6a38;
    --accent-gold: #b08a4e;
    --accent-on-dark: #d9bd8a;
    /* overridden inside dark sections to the light-beige/bronze pairing below */
    --font-serif: 'Fraunces', 'Shippori Mincho', Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
    --font-sans: 'Inter', 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", Roboto, sans-serif;

    /* 画面幅に追従する左右余白。セクションごとに 80px を直書きしていると
       タブレット幅（768〜1200px）で本文だけが極端に狭くなるため、全幅で
       なめらかに縮む1つのトークンに集約する。 */
    --gutter: clamp(20px, 5.5vw, 80px);

    /* Spacing tokens */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 60px;
    --space-3xl: 80px;

    /* Radius tokens — editorial / sharp */
    --radius-sm: 2px;
    --radius-md: 10px;
    --radius-lg: 22px;
    --radius-full: 999px;

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Dark sections: light-beige text with a bronze accent touch */
.brand-story.dark,
.theme-obsidian {
    --dark: var(--ivory);
    --silver: #c9bda8;
    --accent: var(--accent-on-dark);
    --accent-gold: var(--accent-on-dark);
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

/* ヘッダーはposition:fixedで高さ56px分を常に画面上に重ねているため、
   #lineup等へのハッシュ遷移/scrollIntoViewだとセクション先頭がヘッダーの
   裏に隠れてしまう（見出しの文字下半分だけが覗く見た目になる）。
   アンカー着地位置をヘッダー高さぶんだけ下にずらして回避する。 */
section[id] {
    scroll-margin-top: calc(56px + env(safe-area-inset-top));
}

body {
    background: var(--bg-gray);
    color: var(--dark);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ── Responsive content swap (compact copy on phones) ── */
.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .pc-only {
        display: none !important;
    }

    .sp-only {
        display: inline;
    }

    .sp-only.block {
        display: block;
    }
}

/* ─── HEADER ─────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-top));
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top) calc(clamp(20px, 3.4vw, 48px) + env(safe-area-inset-right)) 0 calc(clamp(20px, 3.4vw, 48px) + env(safe-area-inset-left));
    transition: background 0.4s, border-color 0.4s;
    background: transparent;
    border-bottom: none;
}

.site-header.scrolled {
    background: rgba(21, 17, 9, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-decoration: none;
    line-height: 1;
}

.logo-img {
    display: block;
    height: 22px;
    width: auto;
    transition: filter 0.3s ease;
}

.logo-sub {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--silver);
    margin-bottom: 2px;
}

.logo-text {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
    color: var(--dark);
    text-transform: lowercase;
}

.logo-dot {
    color: var(--accent-deep);
}

.site-header.scrolled .logo-img {
    filter: brightness(0) invert(1);
}

.site-header.scrolled .logo-sub {
    color: rgba(243, 233, 220, 0.7);
}

.site-header.scrolled .logo-text {
    color: var(--ivory);
}

.site-header.scrolled .logo-dot {
    color: var(--accent-on-dark);
}

.header-nav {
    display: flex;
    gap: 40px;
    align-items: center;
}

.header-nav a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--dark);
    text-decoration: none;
    text-transform: uppercase;
    /* タップ領域を 44px 確保する。下線演出で ::after を使っているため
       擬似要素では広げられず、padding で稼ぐ（12px×2 + 行高20px ≈ 44px）。
       下線は bottom:0 に付くので、padding を増やすと文字から離れてしまう。
       それを避けるため下線側は bottom を padding 分だけ内側へ戻している。 */
    padding: 12px 0;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
}

.site-header.scrolled .header-nav a:not(.nav-cta) {
    color: var(--white);
}

/* Elegant underline reveal (skips the CTA button) */
.header-nav a:not(.nav-cta) {
    position: relative;
}

.header-nav a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    /* 上の padding:12px 分だけ内側へ戻し、下線を文字のすぐ下に保つ */
    bottom: 8px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.header-nav a:not(.nav-cta):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-nav .nav-cta {
    background: var(--white);
    color: var(--black);
    /* 39px しかなくタップ領域が足りていなかった */
    padding: 13px 26px;
    min-height: var(--tap-min);
    border-radius: 2px;
    letter-spacing: 0.2em;
    transition: background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.header-nav .nav-cta:hover {
    background: rgba(255, 255, 255, 0.88);
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.header-nav .nav-cta:active {
    background: rgba(255, 255, 255, 0.75);
    opacity: 1;
    transform: translateY(0);
}

/* ── Cart Icon (Header) ── */
.header-cart,
.header-cart:visited,
.header-cart:link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark) !important;
    text-decoration: none;
    width: var(--tap-min);
    height: var(--tap-min);
    margin-left: 10px;
    border-radius: 50%;
    background: rgba(36, 31, 25, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(36, 31, 25, 0.12);
    transition: background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

.header-cart svg {
    stroke: var(--dark);
}

.header-cart:hover {
    background: rgba(36, 31, 25, 0.12);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(36, 31, 25, 0.08);
}

.site-header.scrolled .header-cart,
.site-header.scrolled .header-cart:visited,
.site-header.scrolled .header-cart:link {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}

.site-header.scrolled .header-cart svg {
    stroke: var(--white);
}

.site-header.scrolled .header-cart:hover {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

.header-cart:active {
    transform: scale(0.95);
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--dark);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
    animation: cartPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cartPop {
    0% { transform: scale(0); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ─── HERO ───────────────────────────────────────── */

/* Full-bleed cinematic hero: the film is the stage, the copy sits on it. */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    background: var(--ivory);
    color: var(--dark);
    scroll-snap-align: start;
}

/* ── Hero media layer ── */
.hero-media {
    position: absolute;
    /* Overscanned top/bottom so the scroll parallax never exposes a bare edge */
    inset: -10% 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
    display: block;
    transform-origin: 62% 50%;
    /* Very slow breath — reads as "alive", never as "moving" */
    animation: heroBreath 32s ease-in-out infinite alternate;
    pointer-events: none;
}

/* iOS Safari は自動再生できなかったとき（省電力モードなど）ポスター画像の上に
   大きな再生ボタンを重ねてくる。背景映像なので操作させる意図はなく、出ると
   デザインが崩れるだけなので隠す。再生自体は下の JS が復帰を試みる。 */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

@keyframes heroBreath {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.11);
    }
}

/* Ivory veil: opaque where the copy sits, clear over the product,
   plus a soft foot so the hero dissolves into the next section. */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            rgba(243, 233, 220, 0.97) 0%,
            rgba(243, 233, 220, 0.93) 26%,
            rgba(243, 233, 220, 0.62) 46%,
            rgba(243, 233, 220, 0.12) 64%,
            rgba(243, 233, 220, 0) 78%),
        linear-gradient(to bottom,
            rgba(243, 233, 220, 0.5) 0%,
            rgba(243, 233, 220, 0) 22%,
            rgba(243, 233, 220, 0) 70%,
            rgba(243, 233, 220, 0.72) 92%,
            var(--ivory) 100%);
}

/* ── Hero content layer ── */
.hero-inner {
    position: relative;
    z-index: 2;
    /* .hero は flex コンテナ。media/scrim が絶対配置に化けなかった場合でも
       ここが潰れて縦書きのように見えないよう、伸長と min-width を明示する */
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 136px var(--gutter) 56px;
}

.hero-content {
    max-width: 780px;
}

/* タブレット縦・正方形に近いウィンドウでは、横方向グラデーションのベールが
   コピーの位置まで届かず本文が映像に溶けて読めなくなる。
   縦方向のベールに切り替えて、コピーを下寄せの濃い側に置く。 */
@media (max-width: 1100px), (max-aspect-ratio: 5/4) {
    .hero-scrim {
        background: linear-gradient(to bottom,
                rgba(243, 233, 220, 0.9) 0%,
                rgba(243, 233, 220, 0.5) 12%,
                rgba(243, 233, 220, 0.18) 26%,
                rgba(243, 233, 220, 0.3) 44%,
                rgba(243, 233, 220, 0.82) 62%,
                rgba(243, 233, 220, 0.96) 78%,
                var(--ivory) 100%);
    }

    .hero-inner {
        justify-content: flex-end;
        padding-bottom: clamp(72px, 12vh, 140px);
    }

    .hero-content {
        max-width: min(640px, 100%);
    }
}

.hero-eyebrow {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 28px;
}

.hero-eyebrow-line {
    width: 28px;
    height: 1px;
    background: var(--accent);
}

/* 何屋なのかを最初に読ませるラベル。装飾ではなく見出しの一部として立たせる：
   太く、インク色で、字間は広げすぎない（広すぎる字間は逆に読まれない） */
.hero-eyebrow span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: 0.18em;
}

/* Screen-reader-only: keeps the brand name in the <h1> without printing it
   twice (the header lockup and the film itself already carry it). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The one line that has to land. */
.hero-title {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(30px, 3.35vw, 46px);
    color: var(--dark);
    line-height: 1.42;
    letter-spacing: 0.01em;
}

/* Each line rises out of its own mask — reads as typeset, not faded in. */
.hero-line {
    display: block;
    overflow: hidden;
}

.hero-line>span {
    display: block;
    transform: translateY(105%);
    animation: heroLineRise 1.3s var(--ease-out) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes heroLineRise {
    to {
        transform: translateY(0);
    }
}

.hero-subtitle {
    margin: 30px 0 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--silver);
    max-width: 520px;
    line-height: 2;
}

/* ── Scroll cue ── */
.hero-scrollcue {
    position: absolute;
    left: 80px;
    bottom: 44px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--silver);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.hero-scrollcue-rail {
    position: relative;
    display: block;
    width: 64px;
    height: 1px;
    background: rgba(122, 111, 95, 0.28);
    overflow: hidden;
}

.hero-scrollcue-rail i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 24px;
    background: var(--accent);
    animation: heroCueSlide 2.4s var(--ease-smooth) infinite;
}

@keyframes heroCueSlide {

    0%,
    8% {
        transform: translateX(-100%);
    }

    60%,
    100% {
        transform: translateX(280%);
    }
}

.hero-scroll {
    margin-top: 50px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.hero-scroll .scroll-tick {
    width: 2px;
    height: 36px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.8));
    animation: heroScroll 1.6s linear infinite;
}

@keyframes heroScroll {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translateY(10px);
        opacity: 0;
    }
}

.hero-scroll--lineup {
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.55);
    margin: 30px 80px 0;
}

.hero-scroll--lineup .scroll-tick {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

/* ─── BRAND STORY ─────────────────────────────────── */
.brand-story {
    background: var(--ivory);
    scroll-snap-align: start;
}

/* Image + content split, editorial layout (image left, copy right) */
.bs-layout {
    display: grid;
    grid-template-columns: minmax(320px, 38%) 1fr;
}

.bs-media {
    position: relative;
    overflow: hidden;
    min-height: 640px;
}

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

.bs-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 64px;
    padding: 96px var(--gutter);
}

.bs-headline-block {
    max-width: 480px;
}

.bs-headline {
    font-family: var(--font-serif);
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 300;
    /* 和文の明朝ディスプレイは 1.2 だと2行目が詰まって見える */
    line-height: 1.34;
    letter-spacing: 0.02em;
    color: var(--dark);
    text-wrap: pretty;
}

.bs-headline em {
    color: var(--accent-gold);
}

.bs-lead {
    margin-top: 24px;
    font-size: 15.5px;
    line-height: 2;
    letter-spacing: 0.02em;
    color: var(--silver);
    /* 和文は1行 25〜38字が読みやすい上限。ここを切らないと
       行末に「に、」のような助詞だけが落ちる */
    max-width: 30em;
}

/* Obsidian Bridge Section */
.brand-story.dark,
.theme-obsidian {
    background: var(--dark-panel);
    color: var(--white);
}

.theme-obsidian select,
.theme-obsidian input,
.theme-obsidian th,
.theme-obsidian td,
.theme-obsidian p,
.theme-obsidian h1,
.theme-obsidian h2,
.theme-obsidian h3 {
    color: var(--white);
}

/* 濃茶の面では見出しに色を差さない。金文字は大きな面積で使うと
   コントラストが落ちて装飾的に見えるため、ブロンズは番号・罫線・
   矢印といった小さな要素に限定し、見出しは明度差だけで抑揚をつける。
   1行目＝前置き（沈める）／2行目＝主文（最も明るい）。 */
.brand-story.dark .bs-headline {
    color: var(--ivory);
}

.brand-story.dark .bs-headline em {
    color: var(--ivory);
    font-style: normal;
}

.brand-story.dark .bs-pillar {
    background: none;
    border: none;
}

.brand-story.dark .bs-pillar h3 {
    color: var(--white);
}

/* Readability: lift secondary text off the near-black background */
.brand-story.dark .bs-lead {
    color: rgba(255, 255, 255, 0.74);
}

.brand-story.dark .bs-pillar-body {
    color: rgba(255, 255, 255, 0.66);
}

.brand-story.dark .bs-cta-label {
    color: rgba(255, 255, 255, 0.7);
}


/* CTA Bar */
.bs-cta-bar {
    background: var(--ivory);
    margin: 96px 80px 0;
    padding: 72px 0 88px;
    border-top: 1px solid rgba(217, 189, 138, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
}

.brand-story.dark .bs-cta-bar {
    background: var(--dark-panel);
}

.brand-story.dark .bs-cta-btn {
    color: var(--white);
}

.brand-story.dark .bs-cta-arrow {
    color: var(--accent-on-dark);
}

.bs-cta-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.bs-cta-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--silver);
}

.bs-cta-btn {
    font-family: var(--font-serif);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 300;
    color: var(--accent-deep);
    text-decoration: none;
    transition: transform 0.4s var(--ease-out);
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 主要導線なので当たり判定を上下に確保する。中央寄せのCTAバー内にあり、
   padding を足しても他とぶつからない */
.bs-cta-btn {
    padding: 6px 0;
}

.bs-cta-btn:hover {
    transform: translateX(10px);
}

.bs-cta-btn:active {
    transform: translateX(6px);
}

/* 仕様の一覧（2026-09-24、「こだわり3つ」の柱から置き換え）。
   大きな数字や記号は使わず、項目名と内容を並べるだけにする。行の罫は引かない（2026-09-24） */
.bs-spec {
    margin: 0;
    max-width: 560px;
}

.bs-spec-row {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 16px;
    padding: 12px 0;
}

.bs-spec dt {
    font-size: 13px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}

.bs-spec dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 600px) {
    .bs-spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Pillar cards */
.bs-pillars {
    display: flex;
    flex-direction: column;
}

/* 罫で仕切るだけの editorial な行。番号や記号は置かない */
.bs-pillar {
    display: block;
    padding: 32px 0;
    background: none;
    border-top: 1px solid rgba(217, 189, 138, 0.18);
}

.bs-pillar:last-child {
    padding-bottom: 0;
}

.brand-story.dark .bs-pillar {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.bs-pillar h3,
.bs-pillar-title {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.005em;
    margin-bottom: 10px;
}

.bs-pillar-body {
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--silver);
    max-width: 52ch;
}

/* ─── SECTION HEADER ──────────────────────────────── */
.section-header {
    padding: 28px var(--gutter) 20px;
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(38px, 4.5vw, 60px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: 0.005em;
    color: var(--dark);
}

.section-title em {
    color: var(--accent-deep);
}

/* Japanese headings: never break a word mid-token (サロ/ン) */
.section-title,
.bs-headline,
.bs-pillar-title,
.salon-cta-title,
.story-why-title,
.brand-statement-quote,
.hero-title {
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
}

/* Kill the UA default italic on <em> inside JP headings (faux-italic looks broken) */
.section-title em,
.bs-headline em,
.salon-cta-title em,
.story-why-title em,
.brand-statement-quote em,
.hero-title em {
    font-style: normal;
}

.section-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-deep, #8a6a38);
    letter-spacing: 0.12em;
    margin-top: 6px;
    text-transform: uppercase;
}

.section-header-right {
    font-size: 14px;
    color: var(--silver);
    max-width: 400px;
    line-height: 1.6;
}


/* ─── FINDER SECTION ─────────────────────────────────
   Whole section is bounded to one screen (100dvh, minus the fixed
   header) so title + finder UI both fully resolve the moment the
   section scrolls into view — no "half title / cut-off steps" state.
   Sidebar/stage panels fill the remaining height and scroll internally. */
.lineup-section {
    background: var(--ivory);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-top: calc(56px + env(safe-area-inset-top));
    scroll-snap-align: start;
}

.finder-container {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 48px;
    padding: 0 var(--gutter) 32px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.finder-results {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.finder-results::-webkit-scrollbar {
    width: 4px;
}

.finder-results::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Sidebar */
.finder-sidebar {
    position: relative;
    height: 100%;
    min-height: 0;
    max-width: 420px;
    z-index: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.finder-sidebar::-webkit-scrollbar {
    width: 4px;
}

.finder-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Bottom fade — hints that more steps are reachable by scrolling.
   Hidden once scrolled to the bottom via .is-at-bottom (js/main.js). */
.finder-sidebar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 4px;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(243, 233, 220, 0), var(--ivory));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.finder-sidebar.is-at-bottom::after {
    opacity: 0;
}

.finder-flow {
    display: flex;
    flex-direction: column;
}

.finder-step {
    position: relative;
    padding: 40px 0;
    transition: opacity 0.3s;
}

.finder-flow .finder-step:first-child {
    padding-top: 0;
}

.finder-flow .finder-step + .finder-step {
    border-top: 1px solid rgba(58, 44, 21, 0.1);
}

.finder-step.active .finder-step-title {
    color: var(--accent-deep, #8a6a38);
}

.finder-step.locked {
    opacity: 0.4;
    pointer-events: none;
}

.finder-step-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finder-step-num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 0;
    color: rgba(138, 106, 56, 0.4);
}

.finder-step.active .finder-step-num {
    color: var(--accent-deep, #8a6a38);
}

.finder-step-num-label {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(58, 44, 21, 0.45);
}

.finder-step-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--dark);
}

.finder-step-sub {
    font-size: 13px;
    color: rgba(58, 44, 21, 0.55);
}

.finder-step-options {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.finder-option {
    position: relative;
    width: 100%;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 14px 4px 14px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(58, 44, 21, 0.08);
    text-align: left;
    cursor: pointer;
    transition: padding-left 0.25s, color 0.25s;
}

.finder-step-options .finder-option:last-child {
    border-bottom: none;
}

.finder-option::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-top: 8px;
    background: var(--accent-deep, #8a6a38);
    opacity: 0;
    transition: opacity 0.25s;
}

.finder-option-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
}

.finder-option-desc {
    font-size: 12px;
    color: rgba(58, 44, 21, 0.55);
}

.finder-option:hover,
.finder-option:active {
    padding-left: 26px;
}

.finder-option.selected {
    padding-left: 26px;
}

.finder-option.selected::before {
    opacity: 1;
}

.finder-option.selected .finder-option-title {
    color: var(--accent-deep, #8a6a38);
}

.finder-option.selected .finder-option-desc {
    color: rgba(58, 44, 21, 0.68);
}

.finder-summary {
    margin: 32px 0 0;
    border-radius: 24px;
    padding: 40px var(--gutter);
    background: linear-gradient(160deg, rgba(8, 10, 14, 0.95), rgba(1, 2, 4, 0.95));
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

.finder-summary-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.finder-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.finder-summary-grid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
}

.finder-summary-grid dd {
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
}

.finder-config-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: not-allowed;
    transition: background 0.3s, color 0.3s;
}

.finder-config-btn.is-ready {
    background: var(--accent);
    color: var(--white);
    cursor: pointer;
}

.finder-config-btn.is-ready:active {
    opacity: 0.85;
}

.finder-summary-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    text-align: center;
}

/* Guided stage */
.finder-stage {
    --stage-bg: #151109;
    --stage-halo: rgba(217, 189, 138, 0.24);
    --stage-window: rgba(243, 233, 220, 0.7);
    --stage-floor: rgba(217, 189, 138, 0.3);
    --stage-text: rgba(243, 233, 220, 0.65);
    display: grid;
    grid-template-columns: 280px 1fr;
    border-radius: 32px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    background: radial-gradient(circle at 10% 10%, rgba(217, 189, 138, 0.04), transparent 45%), var(--stage-bg);
    color: var(--white);
    position: relative;
    border: 1px solid rgba(217, 189, 138, 0.08);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.finder-stage.mode-mount {
    --stage-bg: #171208;
    --stage-halo: rgba(217, 189, 138, 0.28);
    --stage-window: rgba(243, 233, 220, 0.75);
    --stage-floor: rgba(217, 189, 138, 0.34);
    --stage-text: rgba(243, 233, 220, 0.75);
}

.finder-stage.mode-board {
    --stage-bg: #19130a;
    --stage-halo: rgba(217, 189, 138, 0.32);
    --stage-window: rgba(243, 233, 220, 0.78);
    --stage-floor: rgba(217, 189, 138, 0.36);
    --stage-text: rgba(243, 233, 220, 0.78);
}

.finder-stage.mode-ready {
    --stage-bg: #1c150b;
    --stage-halo: rgba(217, 189, 138, 0.36);
    --stage-window: rgba(243, 233, 220, 0.82);
    --stage-floor: rgba(217, 189, 138, 0.4);
    --stage-text: rgba(243, 233, 220, 0.85);
    border-color: rgba(217, 189, 138, 0.2);
    box-shadow: 0 45px 110px rgba(15, 11, 6, 0.55);
}

.finder-stage-content {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: linear-gradient(180deg, rgba(10, 13, 17, 0.85), rgba(7, 9, 12, 0.95));
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.finder-stage-eyebrow {
    font-size: 12px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.finder-stage-title {
    font-size: 21px;
    font-weight: 400;
    font-family: var(--font-serif);
    line-height: 1.35;
}

.finder-stage-body {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

.finder-stage-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finder-stage-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: transparent;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(243, 233, 220, 0.75);
    border: 1px solid rgba(217, 189, 138, 0.35);
}

.finder-stage-chip.ready {
    background: rgba(217, 189, 138, 0.16);
    border-color: rgba(217, 189, 138, 0.6);
    color: var(--accent-gold);
}

.finder-stage-visual {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #010203, var(--stage-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    transition: background 0.4s ease;
}

.finder-stage-visual::before {
    content: '';
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    filter: blur(1px);
}

.finder-stage-horizon {
    position: absolute;
    top: 6%;
    left: 50%;
    width: 75%;
    height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, var(--stage-window), transparent 72%);
    filter: blur(46px);
    opacity: 0.45;
    animation: stagePulse 5s ease-in-out infinite;
}

.finder-stage-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--stage-halo), transparent 70%);
    opacity: 0.55;
    filter: blur(34px);
}

/* Mirror wrap — holds mirror + shelf together */
.finder-stage-mirror-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(10px) scale(1.4);
    transition: transform 0.4s ease;
}

/* ── Mirror body ── */
.finder-stage-mirror {
    position: relative;
    width: 200px;
    height: 290px;
    /* Arch: top half-circle, bottom straight — via large top radius */
    border-radius: 100px 100px 8px 8px;
    /* Brushed metal frame (monochrome) */
    border: 6px solid transparent;
    background:
        /* mirror surface */
        linear-gradient(145deg, rgba(220,230,240,0.92) 0%, rgba(160,180,200,0.55) 60%, rgba(100,130,160,0.25) 100%)
        padding-box,
        /* metal frame gradient */
        linear-gradient(160deg, #cfcbc2, #f0ece4 40%, #aaa49a 70%, #e4ded4) border-box;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.12);
    transition: border-radius 0.4s ease, width 0.4s ease, height 0.4s ease;
    overflow: hidden;
}

/* inner mirror reflection highlight */
.finder-stage-mirror::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 15%;
    width: 30%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.35), transparent 65%);
}

/* room reflection (window light) */
.finder-stage-mirror::after {
    content: '';
    position: absolute;
    top: 18%;
    left: 20%;
    width: 45%;
    height: 35%;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(180,210,220,0.3), transparent 60%);
    transform: skewX(-4deg);
}

/* ── Shelf ── */
.finder-stage-shelf {
    width: 240px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(160,155,148,0.85), rgba(100,95,88,0.6));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-top: -2px;
}

/* ── Shape variants ── */

/* Round: full ellipse, no shelf */
.finder-stage-visual[data-variant="round"] .finder-stage-mirror {
    width: 230px;
    height: 230px;
    border-radius: 50%;
}

.finder-stage-visual[data-variant="round"] .finder-stage-shelf {
    opacity: 0;
    height: 0;
    margin: 0;
}

/* Square: rounded rect */
.finder-stage-visual[data-variant="square"] .finder-stage-mirror {
    width: 210px;
    height: 270px;
    border-radius: 12px;
}

/* Board (天板なし) — hide shelf */
.finder-stage-visual[data-board="without"] .finder-stage-shelf {
    opacity: 0;
    height: 0;
    margin: 0;
}

.finder-stage-visual[data-model3d="on"] .finder-stage-horizon,
.finder-stage-visual[data-model3d="on"] .finder-stage-glow,
.finder-stage-visual[data-model3d="on"] .finder-stage-mirror-wrap,
.finder-stage-visual[data-model3d="on"] .finder-stage-floor,
.finder-stage-visual[data-model3d="on"] .finder-stage-label {
    display: none;
}

.finder-stage-floor {
    position: absolute;
    bottom: -30px;
    width: 160%;
    height: 200px;
    background: radial-gradient(ellipse at center, var(--stage-floor), transparent 70%);
    filter: blur(4px);
    opacity: 0.8;
    transform: translateZ(-1px);
}

.finder-stage-label {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--stage-text);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.25);
}

@keyframes stagePulse {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.08);
    }
}

.finder-results .finder-grid {
    transition: opacity 0.4s ease, max-height 0.4s ease;
}

.finder-results.locked .finder-grid {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}

.finder-results.locked .finder-summary {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}

.finder-results .finder-summary {
    transition: opacity 0.4s ease, max-height 0.4s ease;
}

/* Grid */
.finder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
}

/* Product Card (Porsche Style) */
.p-card {
    background: var(--white);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out), border-color 0.3s;
    border: 1px solid var(--border);
}

.p-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 28px 60px rgba(0, 0, 0, 0.1);
    transform: translateY(-6px);
    border-color: rgba(0, 0, 0, 0.06);
}

.p-card:active {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.p-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.p-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--card-bg);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.p-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-card:hover .p-card-img img {
    transform: scale(1.03);
}

.p-cta {
    transition: transform 0.3s var(--ease-out);
}

.p-card:hover .p-cta:not(.disabled) {
    transform: translateX(4px);
}

.p-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--dark);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
}

.p-badge.soon {
    background: var(--white);
    color: var(--silver);
    border: 1px solid var(--border);
}

.p-card-info,
.p-card-body {
    padding: 28px 30px 30px;
}

.p-series,
.p-card-series {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--accent);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.p-name,
.p-card-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: var(--dark);
}

.p-price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 15px;
}

.p-price-label {
    color: var(--silver);
}

.p-price,
.p-card-price {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    color: var(--dark);
    display: inline-block;
    margin-top: 4px;
}

.p-price.tbd,
.p-card-price.is-soon {
    font-weight: 400;
    font-style: normal;
    color: var(--silver-light);
    letter-spacing: 0.04em;
}

.p-specs {
    font-size: 13px;
    color: var(--silver);
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.p-card-specs {
    list-style: none;
    margin: 0 0 20px;
    padding: 8px 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--silver);
}

.p-card-specs li {
    position: relative;
}

.p-card-specs li + li {
    padding-left: 20px;
}

.p-card-specs li + li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border);
    transform: translateY(-50%);
}

.p-dot {
    font-size: 10px;
    color: var(--border);
}

.p-cta {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    display: inline-block;
}

.p-cta.disabled {
    color: var(--silver-light);
    font-weight: 400;
}

/* ─── SALON PHOTO GALLERY ──────────────────────────── */
/* ─── SALON SERIES CTA ────────────────────────────── */
.salon-cta-section {
    background: var(--bg-gray);
}

.salon-cta-inner {
    display: grid;
    grid-template-columns: 1fr 440px;
    align-items: center;
    gap: 80px;
    padding: 120px var(--gutter);
}

/* Real product photography — replaces the CSS-drawn mock */
.salon-cta-preview {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* 画像を contain で全体表示するため、余白は写真の背景グレーに合わせる */
    background: #D4D4D4;
}

.salon-cta-img {
    width: 100%;
    height: 100%;
    /* ミラー全体（ロゴ・棚板・脚まで）を見せたいので切り取らない */
    object-fit: contain;
    object-position: center;
    display: block;
    transform: scale(1.01);
    transition: transform 1.2s var(--ease-out);
}

.salon-cta-section:hover .salon-cta-img {
    transform: scale(1.05);
}

.salon-cta-title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4.4vw, 60px);
    font-weight: 300;
    margin-bottom: 28px;
    line-height: 1.12;
    letter-spacing: 0.005em;
}

.salon-cta-title em {
    display: block;
    color: var(--accent-deep);
}

.salon-cta-desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--silver);
    max-width: 480px;
    margin-bottom: 40px;
}

.salon-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 40px;
    background: var(--dark);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.5s var(--ease-out), background 0.3s, box-shadow 0.5s var(--ease-out);
    letter-spacing: 0.25em;
}

.salon-cta-btn span {
    display: inline-block;
    transition: transform 0.5s var(--ease-out);
}

.salon-cta-btn:hover {
    transform: translateY(-2px);
    background: var(--black);
    box-shadow: 0 14px 34px rgba(26, 23, 20, 0.22);
}

.salon-cta-btn:hover span {
    transform: translateX(5px);
}

.salon-cta-btn:active {
    transform: translateY(0);
    background: var(--black);
}

.salon-cta-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.salon-cta-btn-alt {
    display: inline-flex;
    align-items: center;
    padding: 17px 32px;
    background: none;
    color: var(--dark);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
    font-family: inherit;
}

.salon-cta-btn-alt:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
}

/* ─── PRESET ALBUM MODAL ──────────────────────────── */
.preset-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.preset-modal[hidden] {
    display: none;
}

.preset-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 17, 9, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: preset-fade-in 0.3s var(--ease-out);
}

.preset-modal-panel {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 48px 44px;
    box-shadow: 0 30px 80px rgba(21, 17, 9, 0.35);
    animation: preset-pop-in 0.35s var(--ease-out);
}

@keyframes preset-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes preset-pop-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.preset-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: none;
    color: var(--silver);
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}

.preset-modal-close:hover {
    background: var(--bg-gray);
    color: var(--dark);
}

.preset-modal-eyebrow {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.preset-modal-title {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--dark);
    margin-bottom: 10px;
}

.preset-modal-desc {
    font-size: 14px;
    color: var(--silver);
    line-height: 1.7;
    margin-bottom: 28px;
}

.preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.preset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    background: var(--ivory);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.preset-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(21, 17, 9, 0.12);
}

.preset-card-name {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--dark);
}

.preset-card-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--silver);
}

@media (max-width: 640px) {
    .preset-grid {
        grid-template-columns: 1fr;
    }

    .preset-modal-panel {
        padding: 36px 24px;
    }
}

/* ─── BRAND STORY STRIP ───────────────────────────── */
/* ─── BRAND STATEMENT (editorial) ─────────────────── */
.brand-statement {
    background: var(--ivory);
    padding: clamp(88px, 12vw, 168px) 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-statement-quote {
    font-family: var(--font-serif);
    font-size: clamp(27px, 3.6vw, 46px);
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: var(--dark);
    max-width: 940px;
    margin: 0 auto;
}

.brand-statement-quote em {
    display: block;
    margin-top: 0.32em;
    color: var(--accent-deep);
}

.brand-statement-cite {
    margin-top: clamp(34px, 4.5vw, 56px);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--silver);
}

/* ─── FOOTER ──────────────────────────────────────── */
.site-footer {
    background: var(--ivory);
    border-top: 1px solid var(--border);
    padding: 60px calc(var(--gutter) + env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.site-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-links {
    display: flex;
    gap: 100px;
}

.footer-nav-col h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 32px;
    color: var(--dark);
}

.footer-nav-col a {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--silver);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.2s;
}

.footer-nav-col a:hover {
    color: var(--accent-deep);
}

.footer-nav-col a:active {
    color: var(--accent-deep);
    opacity: 0.7;
}

.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}

.footer-copy {
    font-size: 12px;
    color: var(--silver-light);
    font-weight: 400;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE — スマートフォン対応
   =================================================== */

@media (max-width: 768px) {

    html {
        scroll-snap-type: none;
    }

    /* ── Header ── */
    .site-header {
        padding: env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
        height: calc(48px + env(safe-area-inset-top));
    }

    .header-nav {
        gap: 0;
    }

    .header-nav a:not(.nav-cta) {
        display: none;
    }

    /* ── Logo ── */
    .logo-sub {
        font-size: 10px;
    }

    .logo-text {
        font-size: 17px;
    }

    .logo-img {
        height: 18px;
    }

    .logo {
        gap: 8px;
    }

    /* ── Hero（スマホ: 全画面のまま、映像は上・コピーは下に置く） ── */
    .hero {
        padding: 0;
        min-height: 100vh;
        min-height: 100svh;
    }

    /* 縦画面はアーチ単体の縦位置写真（index.html の <picture>）。アーチが写真の
       左寄りにあるので、切れないよう左に寄せる */
    .hero-video {
        object-position: 30% 40%;
        animation-duration: 26s;
    }

    /* 上→下のアイボリー。下半分にコピーが乗る前提で不透明にする */
    .hero-scrim {
        background: linear-gradient(to bottom,
                rgba(243, 233, 220, 0.92) 0%,
                rgba(243, 233, 220, 0.55) 10%,
                rgba(243, 233, 220, 0.22) 20%,
                rgba(243, 233, 220, 0.1) 34%,
                rgba(243, 233, 220, 0.82) 54%,
                rgba(243, 233, 220, 0.97) 68%,
                var(--ivory) 100%);
    }

    .hero-inner {
        justify-content: flex-end;
        padding: 96px 24px calc(96px + env(safe-area-inset-bottom));
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-title {
        font-size: clamp(24px, 7.2vw, 34px);
        line-height: 1.5;
        letter-spacing: 0.01em;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-top: 18px;
        line-height: 1.9;
        max-width: 100%;
    }

    /* PC用テキスト内の改行のみ無効化（スマホ専用文の改行は活かす） */
    .hero-subtitle .pc-only br {
        display: none;
    }

    .hero-eyebrow {
        margin-bottom: 18px;
    }

    .hero-eyebrow span {
        font-size: 12px;
        letter-spacing: 0.14em;
    }

    /* スクロールキューは中央下に小さく。.hero-anim が transform を握るので
       translateX ではなく left/right + justify-content で中央に置く */
    .hero-scrollcue {
        left: 0;
        right: 0;
        justify-content: center;
        bottom: calc(28px + env(safe-area-inset-bottom));
        gap: 10px;
        font-size: 11px;
    }

    .hero-scrollcue-rail {
        width: 44px;
    }

    .hero-scroll--lineup {
        margin: 20px 24px 0;
    }

    /* ── Brand Story ── */
    .bs-layout {
        grid-template-columns: 1fr;
    }

    .bs-media {
        min-height: 280px;
    }

    .bs-content {
        gap: 40px;
        padding: 40px 24px;
    }

    .bs-headline-block {
        max-width: none;
    }

    .bs-headline {
        font-size: clamp(22px, 5.2vw, 30px);
    }

    .bs-lead {
        font-size: 16px;
        line-height: 1.8;
    }

    .bs-pillar {
        padding: 22px 0;
    }

    .bs-pillar h3,
    .bs-pillar-title {
        font-size: 18px;
        margin-bottom: 10px;
        min-height: 0;
    }

    .bs-cta-bar {
        margin: 64px 24px 0;
        padding: 48px 0 56px;
        gap: 18px;
    }

    .bs-cta-btn {
        font-size: 28px;
    }

    /* ── Section Header ── */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 0 24px 40px;
    }

    /* ── Lineup / Finder ──
       Desktop bounds the whole section to one screen (100dvh). On mobile
       that's too cramped for hero + steps + results, so instead only the
       step-picker card gets a bounded, independently-scrollable height —
       an intentional "one screen for the operation you're doing right now"
       card, rather than the section as a whole. */
    .lineup-section {
        height: auto;
        display: block;
        padding: 48px 0 0;
    }

    .finder-container {
        display: block;
        flex: none;
        padding: 0 24px;
    }

    .finder-sidebar {
        position: static;
        height: min(64dvh, 520px);
        max-width: none;
    }

    .finder-results {
        height: auto;
        overflow: visible;
        margin-top: 24px;
    }

    .finder-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .p-card-info {
        padding: 20px;
    }

    .p-name {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .finder-stage {
        display: none !important;
    }

    .finder-step {
        padding: 20px;
    }

    .finder-summary-grid {
        grid-template-columns: 1fr;
    }

    .finder-summary {
        margin: 20px 0 0;
        padding: 32px 24px;
    }

    /* ── Salon Photo Gallery ── */

    /* ── Salon CTA ── */
    .salon-cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 24px;
    }

    /* ── Brand Statement ── */
    .brand-statement-quote {
        font-size: clamp(22px, 6.2vw, 30px);
        line-height: 1.6;
    }

    /* ── Footer ── */
    .site-footer {
        padding: 48px calc(20px + env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
        gap: 40px;
    }

    .site-footer-top {
        flex-direction: column;
        gap: 32px;
    }

    .footer-links {
        gap: 32px;
        flex-wrap: wrap;
    }

    .footer-links a {
        padding: 8px 0;
    }

    .site-footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* ── Company page ── */
    .company-hero {
        padding: 60px 24px;
    }

    .company-content {
        grid-template-columns: 1fr;
    }

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

    .access-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-inner {
        padding: 88px 20px calc(88px + env(safe-area-inset-bottom));
    }

    .hero-title {
        font-size: clamp(22px, 6.6vw, 28px);
    }

    .hero-subtitle {
        font-size: 12.5px;
        margin-top: 14px;
    }

    .hero-eyebrow {
        margin-bottom: 14px;
    }

    .hero-actions {
        margin-top: 26px;
        gap: 10px;
    }

    .finder-grid {
        grid-template-columns: 1fr;
    }

    .finder-step {
        min-width: 0;
        width: 100%;
    }

    .p-card-info {
        padding: 16px;
    }

    .business-grid {
        grid-template-columns: 1fr;
    }

    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 32px;
    }
}

/* ─── HAMBURGER ───────────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 300;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    /* 閉じている間はアイボリー/映像の明るい面の上に乗るのでインク色。
       開いた時だけ暗いドロワーの上に来るので反転させる */
    background: var(--dark);
    transition: transform 0.3s, opacity 0.3s, background 0.3s;
    transform-origin: center;
}

/* スクロール後のダークヘッダー上／開いたドロワー上では反転 */
.site-header.scrolled .hamburger span,
.hamburger.open span {
    background: var(--ivory);
}

.hamburger.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── MOBILE DRAWER ───────────────────────────────── */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100dvh;
    background: rgba(21, 17, 9, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 250;
    display: flex;
    align-items: center;
    padding: 80px 40px 60px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer.open {
    transform: translateX(0);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 240;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.drawer-link {
    font-size: 17px;
    font-weight: 400;
    font-family: var(--font-serif);
    color: rgba(243, 233, 220, 0.85);
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(217, 189, 138, 0.12);
    transition: color 0.2s, padding-left 0.2s;
    letter-spacing: 0.03em;
}

.drawer-link:hover,
.drawer-link:active {
    color: var(--white);
    padding-left: 8px;
}

.drawer-link[aria-current="page"] {
    color: var(--accent-on-dark);
    opacity: 1;
    padding-left: 8px;
}

.drawer-cta {
    margin-top: 24px;
    border: 1px solid rgba(217, 189, 138, 0.5);
    border-radius: 4px;
    padding: 16px 20px;
    font-size: 14px;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent-gold);
    text-transform: uppercase;
    text-align: center;
}

/* ─── HERO CTA BUTTONS ────────────────────────────── */
.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 40px;
}

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 38px;
    background: var(--dark);
    color: var(--ivory);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.hero-cta-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(36, 31, 25, 0.2);
}

.hero-cta-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
}

.hero-secondary-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 38px;
    background: transparent;
    color: var(--dark);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 2px;
    transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.4s var(--ease-out);
}

.hero-secondary-btn:hover {
    border-color: var(--dark);
    color: var(--dark);
    background: rgba(36, 31, 25, 0.04);
    transform: translateY(-1px);
}

.hero-secondary-btn:active {
    transform: translateY(0);
    background: rgba(36, 31, 25, 0.08);
}

/* ─── MOBILE OVERRIDES ────────────────────────────── */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .header-nav {
        display: none;
    }

    .header-cart {
        margin-left: auto;
        margin-right: 10px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta-btn,
    .hero-secondary-btn {
        width: 100%;
        max-width: 340px;
        min-height: 52px;
        justify-content: center;
        border-radius: 8px;
        font-size: 15px;
        letter-spacing: 0.08em;
    }

    /* Finder steps: stacked full-width cards on mobile (easier to tap than h-scroll) */
    .finder-flow {
        flex-direction: column;
        gap: 12px;
    }

    .finder-step {
        min-width: 0;
        width: 100%;
    }

    /* Show product cards always on mobile */
    .finder-results.locked .finder-grid {
        opacity: 1;
        pointer-events: auto;
        max-height: none;
    }

    .finder-results.locked .finder-summary {
        opacity: 1;
        pointer-events: auto;
        max-height: none;
    }

    /* salon preview: real product photo, shown above the text */
    .salon-cta-preview {
        aspect-ratio: 16 / 11;
        order: -1;
    }

    .salon-cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ─── CINEMATIC OPENING ──────────────────────────── */

/* Curtain overlay — splits open */
/* ─── HERO ENTRANCE ANIMATIONS ────────────────────── */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-anim {
    opacity: 0;
    animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--delay, 0s);
}

/* Hero title lines animate via .hero-line masks (see HERO block) — no
   block-level fade here, or the mask reveal gets flattened into a fade. */

/* ─── SCROLL REVEAL ────────────────────────────────── */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── STICKY MOBILE CTA ────────────────────────────── */
.sticky-mobile-cta {
    display: none;
    /* JS shows it on mobile after scroll */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(21, 17, 9, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(217, 189, 138, 0.14);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
    opacity: 0;
}

.sticky-mobile-cta.visible {
    transform: translateY(0);
    opacity: 1;
}

.sticky-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: var(--accent);
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    border-radius: 6px;
    transition: background 0.2s;
}

.sticky-mobile-btn:active {
    background: var(--accent-deep);
}

.sticky-arrow {
    font-size: 16px;
    transition: transform 0.2s;
}

.sticky-cta-close {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: rgba(243, 233, 220, 0.5);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.sticky-cta-close:active {
    color: rgba(243, 233, 220, 0.9);
}

.sticky-mobile-btn:hover .sticky-arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .sticky-mobile-cta {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sticky-mobile-btn {
        flex: 1;
    }

    .sticky-cta-close {
        display: flex;
    }
}

/* ─── FOOTER LINK UNDERLINE ANIMATION ────────────── */
/* 当たり判定の拡張。::after は下線アニメーションで使っているので ::before を使う。
   リンク間の gap は 32px 以上あるため、広げても隣と重ならない */
.footer-links a::before {
    content: '';
    position: absolute;
    inset: -12px -10px;
}

.footer-links a {
    position: relative;
    text-decoration: none;
    color: var(--silver);
    font-size: 13px;
    letter-spacing: 0.05em;
    transition: color 0.3s;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-gold);
    transition: width 0.3s var(--ease-out);
}

.footer-links a:hover {
    color: var(--dark);
}

.footer-links a:hover::after {
    width: 100%;
}

/* ─── FOCUS VISIBLE ──────────────────────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent-gold);
    border-radius: var(--radius-sm);
}

.finder-option:focus-visible,
.finder-step button:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* ─── GLOBAL SCROLLBAR ───────────────────────────── */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ─── MOBILE IMPROVEMENTS (追加最適化) ──────────────── */

/* finder-results: モバイルでは sticky/固定高さを解除 */
@media (max-width: 768px) {
    .finder-results {
        position: static;
        height: auto;
        overflow: visible;
    }

    /* section-title レスポンシブ化 */
    .section-title {
        font-size: clamp(26px, 6.5vw, 42px);
    }

    /* PC用テキスト内の改行のみ無効化（スマホ専用文の改行は活かす） */
    .salon-cta-desc .pc-only br,
    .bs-lead .pc-only br {
        display: none;
    }

    /* footer-brand: flex で中央揃え */
    .footer-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* footer-links: flex-wrap で折り返し */
    .footer-links {
        flex-wrap: wrap;
        gap: 0;
        column-gap: 32px;
        row-gap: 0;
    }

    /* bs-pillar-body 行間を広げ可読性向上 */
    .bs-pillar-body {
        font-size: 16px;
        line-height: 1.8;
    }

    /* 説明文の可読性: モバイルで級数と行間を確保 */
    .salon-cta-desc {
        font-size: 16px;
        line-height: 1.85;
    }

    .story-why-step-body {
        font-size: 16px;
        line-height: 1.85;
    }

    .section-header-right {
        font-size: 14px;
        line-height: 1.7;
    }

    /* p-card active: 大きな縦移動を抑制 */
    .p-card:active {
        transform: translateY(-2px);
    }
}

/* 480px以下: 極小スマホ追加調整 */
@media (max-width: 480px) {
    /* ヒーローボタン: 最大幅を全幅に */
    .hero-cta-btn,
    .hero-secondary-btn {
        max-width: 100%;
    }

    /* finder-step: full-width stacked */
    .finder-step {
        min-width: 0;
        width: 100%;
    }

    /* section-title さらに小さく */
    .section-title {
        font-size: clamp(22px, 7vw, 30px);
    }

    /* bs-headline さらに小さく */
    .bs-headline {
        font-size: clamp(20px, 5.6vw, 26px);
    }

    /* p-name 縮小 */
    .p-name {
        font-size: 18px;
    }

    /* bs-cta-btn 縮小 */
    .bs-cta-btn {
        font-size: 25px;
    }

    /* salon-cta-title 縮小 */
    .salon-cta-title {
        font-size: clamp(26px, 7vw, 36px);
    }

    /* finder-summary padding 縮小 */
    .finder-summary {
        padding: 24px 16px;
    }
}

/* 390px以下: 最小スマホ (iPhone SE など) */
@media (max-width: 390px) {
    .hero-inner {
        padding: 80px 16px calc(80px + env(safe-area-inset-bottom));
    }

    .hero-title {
        font-size: clamp(20px, 6.2vw, 25px);
        line-height: 1.55;
    }

    .hero-subtitle {
        font-size: 11.5px;
        line-height: 1.85;
    }

    .bs-content {
        padding: 32px 16px;
    }

    .finder-container {
        padding: 0 16px;
    }

    .section-header {
        padding: 0 16px 32px;
    }

    .finder-step {
        min-width: 0;
        width: 100%;
        padding: 16px;
    }
}

/* ─── PREFERS REDUCED MOTION ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .hero-anim,
    .hero-title,
    .hero-line>span,
    .hero-video,
    [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .hero-scrollcue-rail i {
        display: none;
    }
}

/* ─── STORY / WHY ─────────────────────────────────── */
.story-why {
    background: var(--ivory);
}

.story-why-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 144px var(--gutter);
}

.story-why-head {
    max-width: 900px;
    margin-bottom: 96px;
}

.story-why-title {
    font-family: var(--font-serif);
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--dark);
    margin-top: 20px;
    text-wrap: balance;
}

.story-why-title em {
    display: block;
    color: var(--accent-deep);
}

/* 「私たちが提案するのは、第3の選択肢。」はスマホだと1行に収まらない。
   読点で折り返す位置をこちらで決める（自動だと「提案するの/は、」で切れる） */
.sp-only-br {
    display: none;
}

@media (max-width: 768px) {
    .sp-only-br {
        display: block;
    }
}

/* 課題ふたつの右に設置写真を置く。写真は右のガター分はみ出させて紙面の端まで抜く。
   文字だけで組むと右下が大きく空くうえ、鏡屋なのに製品の写らない画面になる。 */
.story-why-flow {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(40px, 5vw, 88px);
}

/* 中央寄せ(max-width:1280)のコンテナから、右の余白ぶんだけ引き出して
   ビューポートの右端まで抜く。body に overflow-x:hidden があるので
   100vw を使っても横スクロールは出ない。 */
.story-why-figure {
    margin: 0 calc(-1 * (var(--gutter) + max(0px, (100vw - 1280px) / 2))) 0 0;
    overflow: hidden;
}

.story-why-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.story-why-problem-pair {
    display: grid;
    gap: 40px;
    background: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 項目の間は罫で仕切らず、余白だけで分ける（2026-09-24）。
   ヘアラインを並べる組み方はテンプレ・AI生成っぽく見えるため */
.story-why-step {
    position: relative;
}

.story-why-problem-pair .story-why-step {
    padding-top: 28px;
}

.story-why-step {
    display: block;
    background: none;
    border: none;
    padding: 0;
}

.story-why-step-content {
    min-width: 0;
}

.story-why-step--problem .story-why-step-title {
    font-size: 19px;
}

/* 解決：全幅の payoff。灯った罫を横いっぱいに通す */
/* 見出し→本文の一段組み。左右に割って右に表を置く構成は、
   それ自体がテンプレの型なのでやめた */
.story-why-solution {
    position: relative;
    margin-top: clamp(64px, 7vw, 112px);
}

.story-why-solution-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 300;
    line-height: 1.45;
    color: var(--dark);
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
}

.story-why-solution-title em {
    font-style: normal;
    display: block;
    color: var(--accent-deep);
}

.story-why-step-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dark);
    margin-bottom: 14px;
    text-wrap: balance;
    /* prevent breaking a Japanese word mid-token (サロ/ン) */
    word-break: keep-all;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
}

.story-why-step-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: var(--silver);
}

/* 本文。数字は文章の中に置き、読ませる幅に留める */
.story-why-solution-body {
    max-width: 62ch;
    margin-top: 22px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.95;
    letter-spacing: 0.02em;
    color: var(--silver);
}

@media (max-width: 860px) {
    .story-why-inner {
        /* 下の .story-why-figure が calc(var(--gutter) * -1) で両端へ抜けるため、
           ここの左右 padding は必ず --gutter と一致させる。24px 固定にしていたら
           834px 幅（--gutter が 45.9px）で差分の 22px が横スクロールになっていた。 */
        padding: 72px var(--gutter);
    }
    .story-why-head {
        margin-bottom: 40px;
    }
    .story-why-flow {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .story-why-problem-pair {
        gap: 28px;
    }
    .story-why-solution {
        padding-top: 28px;
        margin-top: 40px;
    }

    /* 縦積みでは右のガターへ逃がさず、両端いっぱいに抜く */
    .story-why-figure {
        margin: 0 calc(var(--gutter) * -1);
    }

    .story-why-figure img {
        aspect-ratio: 16 / 10;
    }
    .story-why-step--problem .story-why-step-title {
        font-size: 17px;
    }

    .story-why-solution-body {
        font-size: 14px;
        margin-top: 16px;
    }
}

/* ─── STORY-WHY / スマホ ───────────────────────────────
   PCの二段組みをそのまま縮めるとただの縦積みになるので、
   写真を画面幅いっぱいに抜いて主役にし、文章はその前後に静かに置く。
   順番は 見出し → 写真 → 課題 → 解決（スペック表）。 */
@media (max-width: 640px) {
    .story-why-inner {
        padding: 64px 0 72px;
    }

    /* 文字だけ内側に寄せる。写真は下で画面幅いっぱいに抜く */
    .story-why-head,
    .story-why-problem-pair,
    .story-why-solution {
        padding-left: 24px;
        padding-right: 24px;
    }

    .story-why-title {
        font-size: clamp(25px, 7.2vw, 32px);
        line-height: 1.38;
        letter-spacing: 0.005em;
    }

    .story-why-head {
        margin-bottom: 36px;
    }

    /* 写真を主役に。縦長の切り抜きで、画面の端から端まで使う */
    .story-why-flow {
        display: block;
    }

    .story-why-figure {
        margin: 0 0 36px;
    }

    .story-why-figure img {
        aspect-ratio: 4 / 5;
    }

    .story-why-problem-pair {
        gap: 22px;
    }

    .story-why-step-title {
        margin-bottom: 10px;
    }

    .story-why-step-body {
        font-size: 16px;
        line-height: 1.8;
    }

    .story-why-solution {
        margin-top: 36px;
        padding-top: 26px;
    }

    /* 罫はセクションに左右パディングが付いた分だけ内側へ戻す */
    .story-why-solution::before {
        left: 24px;
        right: 24px;
    }
}
/* ─── タブレット（834〜1179px）─────────────────────────
   これまで 768px でモバイルに切り替わったあと、769px 以上は全部
   デスクトップCSSがそのまま当たっていた。つまり iPad のほぼ全域に
   レイアウトの段が存在せず、2カラムがデスクトップ幅前提のまま潰れていた。

   ここは「デスクトップの縮小版」ではなく独立した段として扱う。
   固定px幅の2カラムは、この幅では左右どちらかが必ず破綻するので縦積みにする。
   ブレークポイントの定義は css/tokens.css の冒頭コメントを参照。 */
@media (min-width: 834px) and (max-width: 1179.98px) {

    /* 画像38% + 本文 の分割。834pxでは画像が 320×1004 という極端な柱になり、
       写真としてもテキストとしても読めなくなっていた。縦積みにして
       写真は min-height ではなく比率で高さを決める。 */
    .bs-layout {
        grid-template-columns: 1fr;
    }

    .bs-media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    /* 本文 + 440px固定のCTAカード。834pxでは本文側が240pxしか残らず
       1行2〜3文字で折り返していた。440pxはカードの意匠幅なので削れない。 */
    .salon-cta-inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: 96px var(--gutter);
        justify-items: stretch;
    }

    /* ── ヘッダー ──
       この幅ではリンク6本＋CTA＋ロゴ＋カートが gap:40px で並びきらず、
       ロゴに迫って詰まっていた。ハンバーガーに寄せる。
       ただしモバイル（768px以下）と違い、主要導線である「カスタマイズ」だけは
       出したままにする。タブレットには収まる余地があるのに、サイトで一番
       押してほしいボタンをメニューの中へ隠す理由がない。 */
    .hamburger {
        display: flex;
        order: 3;
    }

    /* CTA・カート・ハンバーガーを右端にひとかたまりで寄せる。
       header は space-between なので、nav に margin-left:auto を置かないと
       CTA だけが中途半端に中央へ流れる。 */
    .header-nav {
        gap: 0;
        margin-left: auto;
    }

    .header-nav a:not(.nav-cta) {
        display: none;
    }
}

/* ─── PRINT / PDF ──────────────────────────────────────
   ブラウザの「PDFとして保存」で、PC・スマホ・iPadのどれから出しても
   同じA4の紙面になるようにする。画面用の固定ヘッダー・動画・追従CTAは
   紙には不要なので落とし、余白と改ページだけを整える。 */
@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
        overflow: visible !important;
        width: auto !important;
    }

    /* 紙面では画面幅に依存させない（端末ごとに段組が変わらないように） */
    :root {
        --gutter: 0px;
    }

    .site-header,
    .mobile-drawer,
    .drawer-overlay,
    .sticky-mobile-cta,
    .hero-media,
    .hero-scrim,
    .hero-scrollcue,
    .skip-nav,
    video,
    iframe {
        display: none !important;
    }

    /* 画面用の高さ固定・スクロール演出を解除して、内容の分だけ紙を使う */
    .hero,
    section,
    .company-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 12mm !important;
        padding-bottom: 12mm !important;
        scroll-snap-align: none !important;
    }

    /* スクロール連動アニメーションは印刷時に「未発火＝非表示」で
       白紙になりがちなので、必ず見える状態に戻す */
    [data-reveal],
    .hero-anim,
    .bs-pillar,
    .business-item {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        animation: none !important;
        transition: none !important;
    }

    /* 段組みは紙では1〜2列に落として、狭い端末発でも同じ紙面にする */
    .business-grid,
    .bs-pillars,
    .company-content,
    .access-inner {
        display: block !important;
    }

    /* 分割禁止はカード単位の小さなブロックだけに効かせる。
       1ページ近い高さのコンテナにまで付けると、丸ごと次ページへ送られて
       手前に大きな空白ページができてしまう。 */
    .business-item,
    .bs-pillar,
    .story-why-step,
    .company-table tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .business-item,
    .bs-pillar,
    .story-why-step {
        margin-bottom: 8mm;
    }

    .story-why-problem-pair .story-why-step::before,
    .story-why-solution::before {
        background: #ddccb2;
    }

    /* 写真は紙面では省く（インクを食うだけで情報が増えない） */
    .story-why-figure {
        display: none;
    }

    h1, h2, h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        break-inside: avoid;
    }

    a {
        text-decoration: none !important;
        color: #000 !important;
    }

    .site-footer {
        border-top: 1px solid #ccc;
        padding: 6mm 0 0 !important;
        background: none !important;
    }
}


/* ══════════════════════════════════════════════════════════
   ヒーローを中央寄せに（2026-09-24）
   以前は左寄せのコピー＋左から右へ抜ける横ベールだった。コピーを写真の中央に
   置き、ベールも中央を濃く・外側を薄くする楕円に変えて、写真の四隅を見せる。
   このブロックはファイル末尾に置き、上の各ブレークポイントの指定より優先させる。
   ══════════════════════════════════════════════════════════ */
.hero-inner {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
}

.hero-eyebrow {
    justify-content: center;
}

.hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    /* 写真の上に乗るので、灰色だと椅子や鏡の明暗に負ける */
    color: rgba(38, 31, 24, 0.78);
}

.hero-actions {
    justify-content: center;
}

.hero-scrim {
    background:
        radial-gradient(ellipse 46% 52% at 50% 50%,
            rgba(243, 233, 220, 0.9) 0%,
            rgba(243, 233, 220, 0.78) 45%,
            rgba(243, 233, 220, 0.34) 78%,
            rgba(243, 233, 220, 0.12) 100%),
        linear-gradient(to bottom,
            rgba(243, 233, 220, 0.45) 0%,
            rgba(243, 233, 220, 0) 20%,
            rgba(243, 233, 220, 0) 78%,
            var(--ivory) 100%);
}

.hero-scrollcue {
    left: 0;
    right: 0;
    justify-content: center;
}

/* PC：写真がふわっと現れてから、ゆっくり寄っていく。
   コピーは既存の行ごとのせり上がり（heroLineRise）とフェードに任せる */
@media (min-width: 834px) and (prefers-reduced-motion: no-preference) {
    .hero-media {
        animation: heroPhotoIn 1.8s var(--ease-out) both;
    }

    .hero-title {
        font-size: clamp(34px, 3.6vw, 52px);
    }

    .hero-subtitle {
        font-size: 16px;
    }
}

@keyframes heroPhotoIn {
    from {
        opacity: 0;
        filter: blur(6px);
    }

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

/* スマホ・タブレット縦：写真は上に見せ、コピーは下半分の濃いベールの上に中央揃えで置く */
@media (max-width: 1100px), (max-aspect-ratio: 5/4) {
    .hero-inner {
        justify-content: flex-end;
    }

    .hero-scrim {
        background: linear-gradient(to bottom,
                rgba(243, 233, 220, 0.85) 0%,
                rgba(243, 233, 220, 0.35) 12%,
                rgba(243, 233, 220, 0.08) 30%,
                rgba(243, 233, 220, 0.55) 48%,
                rgba(243, 233, 220, 0.92) 62%,
                var(--ivory) 100%);
    }
}

@media (max-width: 768px) {
    .hero-content {
        max-width: 100%;
    }

    /* 11.5〜12.5px では小さすぎて読めなかった */
    .hero-subtitle {
        font-size: 14px;
        line-height: 1.9;
    }

    .hero-actions {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ══════════════════════════════════════════════════════════
   納品事例（2026-09-24 作り直し）
   以前は「大きな写真＋暗い面に見出しと小さなサムネイル2枚」で、暗い面の大半が
   空いた写真アルバムのような見え方だった。家具ブランドの誌面（Aesop / Vitra など）に
   倣い、明るい地に大きさの違う縦位置写真2枚を上下にずらして置き、写真の下に
   製品名と写真から分かる仕様だけを小さく添える。
   ══════════════════════════════════════════════════════════ */
.works {
    background: var(--ivory);
    padding: clamp(96px, 12vw, 176px) var(--gutter);
}

.works-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2.4vw, 40px);
    align-items: start;
}

.works-head {
    grid-column: 1 / span 4;
    grid-row: 1;
    align-self: start;
    padding-top: 8px;
}

.works-title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--dark);
}

.works-lead {
    margin-top: 20px;
    font-size: 14px;
    line-height: 2;
    color: var(--silver);
    max-width: 22em;
}

.works-item {
    margin: 0;
}

.works-item--a {
    grid-column: 5 / span 5;
    grid-row: 1 / span 2;
}

/* 2枚目は小さく、下にずらす。揃えないことで誌面のリズムを作る */
.works-item--b {
    grid-column: 10 / span 3;
    grid-row: 2;
    margin-top: clamp(80px, 14vw, 220px);
}

.works-photo {
    overflow: hidden;
    background: var(--bg-gray);
}

.works-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}

.works-item:hover .works-photo img {
    transform: scale(1.03);
}

.works-caption {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.works-name {
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--dark);
}

.works-meta {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--silver);
}

.works-link {
    display: inline-block;
    margin-top: 32px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--dark);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
}

.works-link:hover {
    color: var(--accent-deep, #8a6a38);
}

/* スマホ：見出し→大きい写真→小さい写真（右寄せ・少し下げる）の縦並び */
@media (max-width: 833.98px) {
    .works {
        padding: 88px 24px;
    }

    .works-inner {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        row-gap: 40px;
    }

    .works-head {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .works-item--a {
        grid-column: 1 / span 5;
        grid-row: auto;
    }

    .works-item--b {
        grid-column: 3 / -1;
        grid-row: auto;
        margin-top: 0;
    }
}