/* ════════════════════════════════════════════════════════════════
   LaLaLa Casting Studio ― HOME v1.2
   Luxury / Warm / Minimal / Timeless / Emotional / Interior Art / Editorial
   仕様：docs/home-v1-design-spec.md
   Mobile first。主なブレークポイントは 600 / 960 の2つ。
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Color ― 生成り／ベージュ／こげ茶 ＋ ゴールド。純白・純黒・ロゴのオレンジはUIに使わない */
  --ground:#FCFBF9;
  --panel:#F5F2EC;
  --panel-deep:#EBE7DF;
  --line:#DCD6CE;
  --ink:#26201A;
  --ink-soft:#3E362D;
  --ink-deep:#211A14;
  --ink-footer:#1A1511;
  --muted:#645E56;
  --muted-soft:#716A61;    /* 未選択の項目名（muted より一段弱く。地・hover の面でもコントラスト 4.5:1 以上） */
  --select:#EEE7DA;        /* 選択中の項目の面（ごく淡いシャンパン） */
  --select-hover:#F1ECE2;  /* マウスを乗せたとき（選択中より淡く） */
  --gold-on-select:#7E6129; /* 選択中の面の上の小さな英字（コントラスト 4.5:1 以上） */
  /* Primary CTA：明るい地では深いチャコール＋アイボリーの文字、暗い地では反転（Gold は塗りに使わない） */
  --cta-ink:#26201A;
  --cta-ink-hover:#352D25;
  --cta-ink-active:#1D1813;
  --cta-ivory:#F7F4EE;
  --cta-light:#ECE8E1;
  --cta-light-hover:#F3F0EA;
  --cta-light-active:#E2DDD5;
  --gold:#9C7A38;          /* 線・大きな文字 */
  --gold-text:#8A6B30;     /* 小さな文字（コントラスト確保） */
  --gold-light:#B89753;    /* 暗い地の上 */
  --terracotta:#AF5E41;    /* 番号だけ */
  --on-dark:#F7F4EE;
  --on-dark-soft:rgba(247,244,238,.76);
  --on-dark-line:rgba(247,244,238,.22);
  --veil:33,26,20;

  /* Type */
  --serif-jp:"Shippori Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  --serif:"Cormorant Garamond","Shippori Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --label:"Jost","Zen Kaku Gothic New",sans-serif;
  --script:"Great Vibes",cursive;

  --fs-display:clamp(2.05rem,1.35rem + 3vw,3.9rem);
  --fs-h2:clamp(1.55rem,1.2rem + 1.4vw,2.4rem);
  --fs-h3:clamp(1.12rem,1.05rem + .35vw,1.38rem);
  --fs-body:clamp(.9375rem,.92rem + .1vw,1rem);   /* 15–16px */
  --fs-small:.875rem;                              /* 14px：本文の最小 */
  --fs-note:.8125rem;                              /* 13px：注記・キャプション */
  --fs-label:.75rem;                               /* 12px：英字ラベル */

  /* Space */
  --wrap:1120px;
  --gut:clamp(1.25rem,5vw,2.5rem);
  --sec:clamp(4.25rem,2.4rem + 7.4vw,10rem);       /* Mobile 68–88 / Tablet 96–120 / PC 120–160 */
  --head-gap:clamp(2.5rem,2rem + 2.5vw,4.25rem);
  --header-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:960px){ :root{ --header-h:84px; } }

/* ─── Base ─── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
/* PC：画面が広く、読む距離も離れるため、文字の基準を少し大きくする（rem で指定した文字・余白がそろって大きくなる）。
   スマホ・タブレット（959px以下）は変更しない */
@media (min-width:960px){ html{font-size:106.25%} }  /* 17px */
@media (min-width:1280px){ html{font-size:112.5%} }   /* 18px */
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:2;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  word-break:auto-phrase;   /* 日本語を文節で改行（対応ブラウザ） */
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
p,h1,h2,h3,h4,figure,dl,dd,blockquote{margin:0}
h1,h2,h3,h4{font-weight:400}
/* 改行バランス：見出しは行の長さをそろえ、本文は最後の1行が極端に短くならないようにする（対応ブラウザ）。
   文節での改行（word-break:auto-phrase）と組み合わせ、<br> は意図して見せたい見出しだけに使う */
h1,h2,h3,h4{text-wrap:balance}
p,dd,dt,li,figcaption{text-wrap:pretty}
/* 意味のまとまりを途中で折り返さない（例：対面（出張）型どり（全国対応）） */
.phrase{display:inline-block}
em{font-style:normal;color:var(--gold)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--ground);padding:.75rem 1.25rem}
.skip:focus{left:1rem;top:1rem}
.br-sp{display:inline} .br-pc{display:none}
@media (min-width:768px){ .br-sp{display:none} .br-pc{display:inline} }
[hidden]{display:none !important}
/* 画面には出さず、読み上げ・検索エンジン向けに残す（見出しが画像の中にもある場合など） */
.vh{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}

/* ─── Section system ─── */
.sec{padding-block:var(--sec)}
.sec--panel{background:var(--panel)}
.sec--ink{background:var(--ink-deep);color:var(--on-dark)}

.eyebrow{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.24em;color:var(--gold-text);line-height:1.6}
/* 数字は、順序に意味がある場所（制作の流れ・制作工程）だけで使う。セクション見出しには番号を付けない */
.sec--ink .eyebrow{color:var(--gold-light)}

.h2{font-family:var(--serif-jp);font-size:var(--fs-h2);line-height:1.7;letter-spacing:.1em}
.h2--latin{font-family:var(--serif);letter-spacing:.03em;line-height:1.25;font-size:clamp(2rem,1.45rem + 2.4vw,3.6rem);text-wrap:balance}
.h3{font-family:var(--serif-jp);font-size:var(--fs-h3);line-height:1.7;letter-spacing:.1em}
.script{font-family:var(--script);letter-spacing:0;line-height:1.3}

.sec-head{display:grid;gap:1.1rem;justify-items:start;margin-bottom:var(--head-gap)}
.sec-head--center{justify-items:center;text-align:center}
.sec-head__lead{color:var(--muted);font-size:var(--fs-small);line-height:2.1;max-width:38em}

/* 定義リスト（About / About Us で共通） */
.points{display:grid;width:100%;border-top:1px solid var(--line)}
.points div{display:grid;grid-template-columns:9.5em 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.points dt{font-family:var(--serif-jp);font-size:.95rem;letter-spacing:.1em;color:var(--gold-text)}
.points dd{font-size:var(--fs-small);color:var(--ink-soft);line-height:1.95}
.points--info dt{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.2em;padding-top:.2rem}
.points a{border-bottom:1px solid var(--gold);word-break:break-all}
@media (max-width:440px){ .points div{grid-template-columns:1fr;gap:.15rem} }

/* ─── Buttons & links ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 2.2em;border:1px solid transparent;border-radius:6px;
  font-family:var(--sans);font-size:var(--fs-small);font-weight:400;letter-spacing:.16em;line-height:1.4;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  cursor:pointer;text-align:center;
}
@media (min-width:960px){ .btn{min-height:60px} }
.btn--sm{min-height:44px;padding:0 1.4em;font-size:var(--fs-note);border-radius:4px}

/* Primary：Design Studio へ進むボタン。深いチャコールの面＋アイボリーの文字（黒ではなく、インテリアの家具のような墨色）。
   二重線・Gold の枠・グラデーション・光沢・影・浮き上がる動きは使わない。角丸は控えめな 6px（ピル型にしない） */
.btn--primary{
  background:var(--cta-ink);color:var(--cta-ivory);border-color:var(--cta-ink);
  font-size:.9375rem;font-weight:500;letter-spacing:.18em;
}
.btn--primary.btn--sm{font-size:var(--fs-note);letter-spacing:.16em}
.btn--primary:hover{background:var(--cta-ink-hover);border-color:var(--cta-ink-hover)}
.btn--primary:active{background:var(--cta-ink-active);border-color:var(--cta-ink-active);transform:translateY(1px)}
.btn--primary:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* 暗い地（Final CTA など）では反転：明るいウォームグレーの面＋墨色の文字＋ごく細いアイボリーの線 */
.sec--ink .btn--primary{background:var(--cta-light);color:var(--ink-deep);border-color:rgba(247,244,238,.65)}
.sec--ink .btn--primary:hover{background:var(--cta-light-hover);border-color:var(--on-dark)}
.sec--ink .btn--primary:active{background:var(--cta-light-active);border-color:var(--cta-light-active)}
.sec--ink .btn--primary:focus-visible{outline-color:var(--gold-light)}

/* Secondary：背景なし・墨色の細い線。Primary より弱く */
.btn--secondary{background:transparent;color:var(--ink);border-color:rgba(38,32,26,.55)}
.btn--secondary:hover{border-color:var(--ink);background:rgba(38,32,26,.035)}
.btn--secondary:active{background:rgba(38,32,26,.07)}
.btn--outline-light{background:transparent;color:var(--on-dark);border-color:rgba(247,244,238,.5)}
.btn--outline-light:hover{border-color:var(--on-dark);background:rgba(247,244,238,.06)}
.btn--outline-light:active{background:rgba(247,244,238,.1)}
.btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 1rem}
@media (max-width:599px){ .btn-row{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-inline:auto} }

.tlink{
  display:inline-flex;align-items:center;gap:.9em;min-height:44px;padding:.7em 0;
  border-bottom:1px solid var(--gold);color:var(--muted);
  font-size:var(--fs-note);letter-spacing:.18em;line-height:1.4;transition:color .4s var(--ease);
}
.tlink::after{content:"";width:22px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.tlink:hover{color:var(--ink)}
.tlink:hover::after{width:34px}
.tlink--light{color:var(--on-dark-soft);border-bottom-color:var(--gold-light)}
.tlink--light:hover{color:var(--on-dark)}
.is-pending{cursor:default}   /* URL未確定：見た目は変えず、押しても移動しない */

/* ─── Reveal（JS有効時のみ） ─── */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="late"]{transition-duration:1.6s;transition-delay:.1s}
.hero [data-reveal]:nth-child(2){--d:.12s} .hero [data-reveal]:nth-child(3){--d:.22s}
.hero [data-reveal]:nth-child(4){--d:.3s} .hero [data-reveal]:nth-child(n+5){--d:.4s}

/* ─── 開発用：実物写真が必要な枠（SHOW_PLACEHOLDERS:false で非表示） ─── */
.ph{
  position:absolute;inset:0;display:grid;place-content:center;gap:.45rem;padding:1.5rem;text-align:center;
  border:1px dashed #B9B1A6;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(38,32,26,.03) 14px 15px),var(--panel-deep);
}
.ph__tag{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.75rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.ph__label{font-family:var(--serif-jp);font-size:1.05rem;letter-spacing:.1em;color:var(--ink)}
.ph__note{font-size:var(--fs-note);color:var(--muted);line-height:1.8}
.ph--dark{border-color:rgba(247,244,238,.28);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(247,244,238,.035) 14px 15px),#2A231C}
.ph--dark .ph__tag,.ph--dark .ph__note{color:var(--on-dark-soft)}
.ph--dark .ph__label{color:var(--on-dark)}
.ph--small{padding:.3rem;gap:0}
.ph--small .ph__tag{font-size:.5625rem;letter-spacing:.06em;line-height:1.5}

/* ════════════ HEADER ════════════ */
.header{
  position:sticky;top:0;z-index:50;height:var(--header-h);
  background:rgba(252,251,249,.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--line)}
.header__inner{height:100%;display:flex;align-items:center;gap:2rem;max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.header__logo img{height:38px;width:auto}
.nav{display:none;margin-inline:auto;gap:clamp(1.5rem,3vw,3rem)}
.nav a{font-family:var(--label);font-size:.875rem;letter-spacing:.12em;color:var(--ink-soft);padding:.5rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .45s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.header__cta{display:none}
/* PC ヘッダーの右端：マイページ（補助の文字リンク）＋ CTA。スマホではメニューの中に置く */
.header__end{display:none;align-items:center;gap:1.6rem}
.header__mypage{font-family:var(--label);font-size:.8125rem;letter-spacing:.12em;color:var(--muted);padding:.5rem 0;transition:color .3s var(--ease)}
.header__mypage:hover{color:var(--ink)}
.burger{margin-left:auto;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-content:center;gap:8px}
.burger span{display:block;width:26px;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (min-width:960px){
  .header__logo img{height:48px}
  .nav{display:flex}
  .header__cta{display:inline-flex}
  .header__end{display:flex}
  .burger{display:none}
}
.drawer{position:fixed;inset:var(--header-h) 0 0;z-index:49;background:var(--ground);overflow-y:auto;padding:1.5rem var(--gut) 3rem;display:flex;flex-direction:column;gap:2.25rem}
.drawer__nav{display:grid}
.drawer__nav a{display:grid;gap:.1rem;padding:1rem 0;border-bottom:1px solid var(--line);font-family:var(--serif-jp);font-size:1.0625rem;letter-spacing:.1em}
.drawer__cta{display:grid;gap:.9rem}
.drawer__cta .tlink{justify-self:center}
.drawer__mypage{justify-self:center;display:inline-flex;align-items:center;min-height:44px;font-family:var(--label);font-size:var(--fs-note);letter-spacing:.12em;color:var(--muted)}

/* ════════════ HERO ════════════ */
.hero{position:relative;background:var(--ground)}
.hero__inner{
  min-height:calc(100svh - var(--header-h));max-height:960px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding-block:clamp(3rem,7vh,5.5rem) clamp(4.5rem,11vh,6.5rem);
}
.hero__eyebrow{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.24em;color:var(--muted);display:flex;align-items:center;gap:1rem}
.hero__eyebrow::before,.hero__eyebrow::after{content:"";width:18px;height:1px;background:var(--gold)}
.hero__title{margin-top:clamp(1.6rem,3vh,2.4rem);font-family:var(--serif-jp);font-size:var(--fs-display);line-height:1.55;letter-spacing:.08em}
.hero__lead{margin-top:clamp(1.4rem,3vh,2.1rem);font-family:var(--serif-jp);font-size:clamp(1.05rem,.98rem + .3vw,1.22rem);letter-spacing:.2em}
.hero__body{margin-top:1.2rem;color:var(--muted);font-size:var(--fs-small);line-height:2.2;max-width:34em}
.hero .btn-row{margin-top:clamp(2.1rem,4.5vh,3rem)}
/* スマホ：Hero の2つのボタンは横幅を約13%抑え、同じ幅で中央に置く（左右に余白を作る）。高さ・文字サイズはそのまま */
@media (max-width:599px){ .hero .btn-row{width:87%;max-width:314px} }
.hero__works{margin-top:clamp(1.4rem,3vh,2.1rem)}
.hero__cue{position:absolute;left:50%;bottom:0;width:1px;height:52px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* Hero の背景映像：実作品（掲載許可済み）。立体ネームプレートは上半分程度が枠の外になる位置で表示。
   最初は同じ場面の静止画を出し、動画が再生できたときだけ重ねる（低電力モード・アプリ内ブラウザ・動きを減らす設定では静止画のまま）。
   採用：B3案（実作品の写真をゆっくり横に移動する映像。素材は content.js の HERO_MEDIA で差し替え）。スマホ＝構図③（右側）、PC＝構図②（右側約42%） */
.hero{overflow:hidden;isolation:isolate}
.hero__inner{position:relative;z-index:1}
.hero__media{
  position:absolute;z-index:-2;right:0;bottom:2%;height:66%;aspect-ratio:var(--hero-ar,540/794);pointer-events:none;
  --fl:32%;--fr:0%;--ft:14%;--fb:12%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);
  mask-composite:intersect;
}
.hero__media img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(1.1)}
.hero__video{opacity:0;transition:opacity 1s var(--ease)}
.hero__video.is-playing{opacity:1}
.hero__video::-webkit-media-controls,.hero__video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* 文字のまわりだけ白くする（作品の立体感は残す） */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 85% 55% at 45% 40%,rgba(252,251,249,.9) 0%,rgba(252,251,249,.7) 50%,rgba(252,251,249,0) 100%)}
/* 比較用：文字まわりの白いぼかしを弱めた版（?veil=soft）。作品の色味そのものは変えない */
.hero-veil-soft .hero::after{background:radial-gradient(ellipse 80% 48% at 45% 38%,rgba(252,251,249,.82) 0%,rgba(252,251,249,.55) 50%,rgba(252,251,249,0) 100%)}
.hero__lead,.hero__body{text-shadow:0 0 14px rgba(252,251,249,.95),0 0 6px rgba(252,251,249,.95),0 0 2px rgba(252,251,249,.9)}
.hero .btn--secondary{background:rgba(252,251,249,.85)}
.hero .btn--secondary:hover{background:rgba(252,251,249,.95)}
/* 動画の停止・再生（自動で動く表示は止められるようにする）。再生が始まったときだけ表示 */
.hero__toggle{
  position:absolute;z-index:2;right:12px;bottom:12px;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(38,32,26,.18);border-radius:50%;background:rgba(252,251,249,.7);color:var(--muted);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hero__toggle[hidden]{display:none}
.hero__toggle:hover{color:var(--ink);border-color:rgba(38,32,26,.4)}
.hero__toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hero__toggle svg{width:14px;height:14px;display:block}
.hero__toggle .i-play{display:none}
.hero__toggle[aria-pressed="true"] .i-pause{display:none}
.hero__toggle[aria-pressed="true"] .i-play{display:block}
@media (max-width:374px){ .hero__media{height:58%;bottom:0} }
@media (min-width:414px) and (max-width:959px){ .hero__media{height:68%} }
@media (min-width:960px){
  .hero__inner{align-items:flex-start;text-align:left;padding-inline:clamp(2rem,8vw,9rem) 0}
  .hero__eyebrow::after{display:none}
  .hero__media{right:3%;top:-2%;bottom:-2%;height:auto;width:42%;aspect-ratio:auto;--fl:30%;--fr:14%;--ft:8%;--fb:8%}
  .hero::after{background:linear-gradient(90deg,rgba(252,251,249,.96) 0%,rgba(252,251,249,.85) 40%,rgba(252,251,249,0) 62%)}
  .hero__lead,.hero__body{text-shadow:none}
  .hero-veil-soft .hero::after{background:linear-gradient(90deg,rgba(252,251,249,.96) 0%,rgba(252,251,249,.8) 38%,rgba(252,251,249,0) 56%)}
  .hero__toggle{right:24px;bottom:24px}
}

/* ════════════ SHORT BRAND MESSAGE ════════════ */
.brand{background:var(--panel);padding-block:clamp(3.75rem,2.6rem + 5vw,7rem)}
.brand__inner{display:grid;justify-items:center;gap:1.5rem;text-align:center}
.brand__inner::before{content:"";width:1px;height:44px;background:var(--gold)}
.brand__message{font-family:var(--serif-jp);font-size:clamp(1.2rem,1rem + 1vw,1.9rem);line-height:2;letter-spacing:.12em;max-width:26em}
/* ルビ（例：瞬《と》間《き》＝1字ごと）：本文の約42%の大きさで、各字の真上に。色・書体は本文のまま */
.brand__message ruby{ruby-position:over;ruby-align:center}
.brand__message rt{font-size:.42em;letter-spacing:0;line-height:1;font-weight:inherit;color:inherit;text-align:center;position:relative;left:-.143em} /* 本文の字間（.12em）の半分だけ左へ戻し、字の中心にそろえる */
.brand__sign{font-family:var(--serif);font-style:italic;font-size:1rem;letter-spacing:.06em;color:var(--muted)}

/* ════════════ SCROLL STORY ════════════
   新しい写真を上に重ねてフェードイン→下の写真を外す（にごった二重写しを避ける）。モバイルはフェードを短く。 */
.sstory{
  --step-h:85svh;--last-h:115svh;--fade:.75s;
  position:relative;background:var(--ink-deep);color:var(--on-dark);
}
@media (min-width:900px){ .sstory{--step-h:92vh;--last-h:105vh;--fade:1.1s} }
.sstory__bg{position:sticky;top:var(--header-h);z-index:0;height:calc(100svh - var(--header-h));overflow:hidden}
.sbg{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity var(--fade) var(--ease)}
.sbg.is-prev{opacity:1;z-index:1;transition:none}
.sbg.is-on{opacity:1;z-index:2}
.sbg picture{display:block;position:absolute;inset:0}
.sbg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.sstory__veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--veil),.1) 0%,rgba(var(--veil),.14) 45%,rgba(var(--veil),.3) 100%); /* 写真自体がやや暗めに仕上がっているため、重ねる影は薄め */
}
.sstory__fg{position:relative;z-index:1;margin-top:calc(-1 * (100svh - var(--header-h)))}
.sstep{
  min-height:var(--step-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center;
  padding:14vh max(var(--gut),env(safe-area-inset-right)) 10vh max(var(--gut),env(safe-area-inset-left));
}
.sstep--low{justify-content:flex-end;padding-bottom:max(14vh,4.5rem)}
.sstep--last{min-height:var(--last-h)}
.sline{font-family:var(--serif-jp);font-size:clamp(1.45rem,1.05rem + 2vw,2.6rem);line-height:1.9;letter-spacing:.1em;text-shadow:0 1px 26px rgba(var(--veil),.55);width:100%}
.sline__sub{color:var(--on-dark-soft);font-size:var(--fs-small);letter-spacing:.14em;text-shadow:0 1px 20px rgba(var(--veil),.6)}
.sline__script{color:var(--gold-light);font-size:clamp(1.8rem,1.5rem + 1vw,2.4rem);text-shadow:0 1px 20px rgba(var(--veil),.6)}

/* ── Scroll Story 04〜05：完成額装作品（切らずに全体表示）とライトアップ ──
   04（暗め）と 05（明るい）は同じ作品・同じ位置の写真（同じ範囲で切り抜き）。05 を上に重ね、スクロール量（--art5：0〜1）で不透明度だけを変える。
   写真の地の色 rgb(37,31,27) と同じ色の壁に置き、境目を出さない。作品の色・形・大きさ・位置は変えない。
   --art-size：作品の一辺（画面の高さの58%か、画面幅から左右の余白を引いた幅の小さい方）
   --copy-top：作品の下にコピーを置く位置（ヘッダー＋作品の上の余白＋作品＋間隔） */
.sstory{
  --art-top:.07;
  --art-size:min((100svh - var(--header-h)) * .58, 100vw - 2 * var(--gut));
  --copy-top:calc(var(--header-h) + (100svh - var(--header-h)) * var(--art-top) + var(--art-size) + clamp(1.1rem,3vh,2rem));
  --art5:0;
}
.sbg--art{background:rgb(37,31,27)}
.sart{position:absolute;z-index:1;left:50%;top:calc(var(--art-top) * 100%);width:var(--art-size);height:var(--art-size);transform:translateX(-50%)}
.sbg .sart__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.sart__img--lit{opacity:var(--art5)}
/* スマホの 02・03 は縦長の専用写真。手足が切れない位置に合わせる（03 は手が写真の左端近くにあるため左寄せ） */
@media (max-width:899px){
  .sbg[data-bg="02"] img{object-position:50% 50%}
  .sbg[data-bg="03"] img{object-position:8% 50%}
}
.sstory__veil{transition:opacity var(--fade) var(--ease)}
.sstory.is-art .sstory__veil{opacity:0}
/* 作品の場面に入ったら、01〜03 の白い文字は作品に重ならないよう消す */
.sstep{transition:opacity .45s var(--ease)}
.sstory.is-art .sstep{opacity:0}
/* 04・05 のコピー：暗い地の上なので明るい文字色。作品の下の位置で止まる（sticky） */
.sfinale{--slot-fade:0px;position:relative;--lead:70svh;--slot-h:calc(100svh - var(--copy-top) + var(--slot-fade));--hold:150svh;height:calc(var(--lead) + var(--slot-h) + var(--hold))}
.sfinale__lead{height:var(--lead);padding:25svh var(--gut) 0;text-align:center} /* 04 のコピーは通常の文章と同じく、下から流れてきて上へ流れていく */
.sfinale__slot{position:sticky;top:calc(var(--copy-top) - var(--slot-fade));height:var(--slot-h);text-align:center;padding-inline:var(--gut);color:var(--on-dark)}
.sfinale .sline{width:auto;color:var(--on-dark);text-shadow:none;font-size:clamp(1.3rem,1rem + 1.6vw,2.1rem);line-height:1.8}
.sfinale__l4{margin:0}
.sfinale .sfinale__l4{text-shadow:0 1px 26px rgba(var(--veil),.55)} /* 作品の上を通るときも読めるよう、他の場面の文字と同じ影 */
.sfinale__l5{position:absolute;left:var(--gut);right:var(--gut);top:var(--slot-fade);display:grid;gap:.5rem;justify-items:center;
  transform:translateY(var(--l5y,0px));opacity:var(--l5o,1)}
.sfinale__l5 .sline{margin:0}
.sfinale .sline__script{color:var(--gold-light);text-shadow:none;font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem);margin:0}
/* JS が動かない環境：04 と 05 のコピーを縦に並べて読めるようにする */
.sstory:not(.has-finale) .sfinale{height:auto}
.sstory:not(.has-finale) .sfinale__slot{position:static;height:auto;padding-block:2rem}
.sstory:not(.has-finale) .sfinale__l4,.sstory:not(.has-finale) .sfinale__l5{position:static;transform:none;opacity:1;margin-bottom:1.5rem}
@media (min-width:900px){
  .sstory{--art-size:min((100svh - var(--header-h)) * .6, 46vw)}
  .sfinale{--lead:66svh;--hold:130svh}
}

/* ════════════ ABOUT CASTING ART ════════════ */
.about{display:grid;gap:3.25rem;align-items:center}
.about__text{display:grid;gap:1.4rem;justify-items:start}
.about .h2{font-size:clamp(1.5rem,1.15rem + 1.1vw,2.15rem)}
.about__lead{color:var(--ink-soft);line-height:2.1;max-width:32em}
.about .points{max-width:32em}
.about__closing{font-family:var(--serif-jp);font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:2.1;letter-spacing:.1em}
.about__visual{position:relative;padding-bottom:18%}
.about__main{width:78%;margin-left:auto}
.about__main img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 40%}
.about__sub{position:absolute;left:0;bottom:0;width:44%;outline:10px solid var(--ground)}
.about__sub img{width:100%;aspect-ratio:3/4;object-fit:cover}
.about__caption{position:absolute;right:0;bottom:0;width:48%;font-family:var(--serif);font-style:italic;font-size:.95rem;letter-spacing:.04em;color:var(--muted);line-height:1.6;text-align:right}
@media (min-width:960px){ .about{grid-template-columns:5fr 6fr;gap:clamp(3rem,6vw,6.5rem)} }

/* ════════════ SERVICE STYLE ════════════ */
.style{display:grid;gap:2rem;align-items:center}
.style + .style{margin-top:clamp(4rem,3rem + 5vw,7.5rem)}
.style__frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel-deep)}
.style__frame img{width:100%;height:100%;object-fit:cover}
.style__cap{margin-top:.8rem;font-family:var(--label);font-size:var(--fs-label);letter-spacing:.16em;color:var(--muted)}
.style__body{display:grid;gap:.9rem;justify-items:start}
.style__body .h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem)}
.style__catch{width:100%;max-width:26rem;padding-block:1.05rem;margin-block:.3rem;border-block:1px solid var(--gold);font-family:var(--serif-jp);color:var(--gold-text);font-size:1rem;line-height:2;letter-spacing:.12em}
.style__text{color:var(--muted);font-size:var(--fs-small);line-height:2.1;max-width:30em}
.style__text p{margin:0}
.style__text p + p{margin-top:.85em} /* 説明文は段落ごとに少し間をあける（詰め込まない） */
.service__lead .service__para{display:block}
.service__lead .service__para + .service__para{margin-top:.9em} /* 冒頭の3つのまとまりの間に小さな間 */
/* スマホ：文章は削らず、行間・段落の間・タグの並びだけを少し整えて縦の長さを抑える（PCは従来どおり） */
@media (max-width:599px){
  #service .style__text{line-height:1.95}
  #service .style__text p + p{margin-top:.65em}
  #service .service__lead{line-height:1.95}
  #service .service__lead .service__para + .service__para{margin-top:.7em}
  #service .style__catch{padding-block:.85rem}
  #service .tags{gap:.4rem}
  #service .tags li{padding:.32em .7em;letter-spacing:.06em}
}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.tags li{border:1px solid var(--line);padding:.35em 1em;font-size:var(--fs-label);letter-spacing:.12em;color:var(--muted);background:var(--ground)}
@media (min-width:768px){
  .style{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem)}
  .style--rev .style__img{order:2}
  .style__img{max-width:460px;width:100%}
  .style:not(.style--rev) .style__img{justify-self:end}
  /* 写真なし（本番で写真未登録）：01 の本文と同じ右カラムにそろえる */
  .style.is-nomedia .style__body{grid-column:2}
}

/* ════════════ GALLERY ════════════
   作品が主役。Mobile：1件目と4件目は大きく、2・3件目は2列で段差。PC：12カラムの非対称配置。 */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.75rem 1rem}
.work{display:grid;gap:.85rem;align-content:start}
.work--wide{grid-column:1/-1}
.work:nth-child(4n+3){margin-top:2.75rem}
.work__img{overflow:hidden;background:var(--panel)}
.work__img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.work--wide .work__img img{aspect-ratio:4/5}
.work__cap{display:grid;gap:.15rem}
.work__lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1rem + .3vw,1.3rem);letter-spacing:.03em;line-height:1.45;color:var(--ink)}
.work__detail{font-family:var(--label);font-size:var(--fs-note);letter-spacing:.08em;color:var(--muted);line-height:1.7}
.work__img.is-contain,.gwork__img.is-contain{background:transparent}
/* HOME に3点：スマホは1点目を大きく、2・3点目を横並び。PC は3点を横に並べる */
.works--3 .work:nth-child(1) .work__img img{aspect-ratio:4/5}
@media (min-width:600px){ .works--3 .work:nth-child(1){grid-column:1/-1;width:72%;margin-inline:auto} }
@media (min-width:960px){
  .works.works--3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,3rem);row-gap:0}
  .works.works--3 .work:nth-child(n){grid-column:auto;width:auto;margin:0;align-self:start}
  .works--3 .work:nth-child(n) .work__img img{aspect-ratio:3/4}
}
.works__more{text-align:center;margin-top:clamp(3rem,2rem + 3vw,4.75rem)}
@media (min-width:600px){
  .works{gap:3.5rem 1.75rem}
  .work--wide{grid-column:auto}
  .work:nth-child(4n+1){grid-column:1/-1;width:72%}
  .work:nth-child(4n+4){grid-column:1/-1;width:72%;margin-left:auto}
}
@media (min-width:960px){
  .works{grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(1rem,2vw,2rem);row-gap:5rem}
  .work:nth-child(4n+1){grid-column:1/8;width:auto}
  .work:nth-child(4n+2){grid-column:9/13;align-self:end}
  .work:nth-child(4n+3){grid-column:2/6;margin-top:0}
  .work:nth-child(4n+4){grid-column:7/13;width:auto;margin-left:0;margin-top:7rem}
}

/* ════════════ CUSTOMIZE / DESIGN STUDIO ════════════
   「読む」ではなく「選んでみる」。実物写真の舞台＋項目タブ＋選択肢。 */
.design{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "tabs" "panel" "studio" "note"}
.design__head{grid-area:head;display:grid;gap:1.1rem;margin-bottom:2.25rem}
.design__lead{color:var(--muted);font-size:var(--fs-small);line-height:2.1}
.design__lead-line{display:block}
.design__lead-line + .design__lead-line{margin-top:.6em}
.design__tabs{
  grid-area:tabs;display:flex;overflow-x:auto;scroll-snap-type:x proximity;
  margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);
  border-bottom:1px solid var(--line);scrollbar-width:none;
}
.design__tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;scroll-snap-align:start;display:grid;justify-items:start;gap:.1rem;min-height:44px;
  padding:.85rem .8rem;margin-right:0;border:0;background:transparent;cursor:pointer;text-align:left;
  position:relative;color:var(--muted);border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .4s var(--ease),background-color .4s var(--ease);
}
.tab__en{order:2;font-family:var(--label);font-size:.625rem;letter-spacing:.16em;line-height:1.5;color:var(--muted-soft);transition:color .4s var(--ease)}
.tab__jp{order:1;font-family:var(--serif-jp);font-size:1rem;letter-spacing:.1em;line-height:1.6;color:var(--muted);white-space:nowrap;transition:color .4s var(--ease)}
/* 選択中：日本語を墨色に、下に2pxのゴールドの線（面・枠・影は付けない） */
.tab[aria-selected="true"]{background:var(--select)}
.tab[aria-selected="true"] .tab__jp{color:var(--ink);font-weight:500}
.tab[aria-selected="true"] .tab__en{color:var(--gold-text)}
.tab:not([aria-selected="true"]) .tab__jp{color:var(--muted-soft)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--gold);transform:scaleX(0);transition:transform .45s var(--ease)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
/* 横スクロールの続きがあるとき、端をやわらかく消して「まだ右にある」ことを示す */
.design__tabs.is-scrollable:not(.is-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent)}
.design__tabs.is-scrollable:not(.is-end):not(.is-start){-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 3.5rem),transparent)}
@media (hover:hover){
  .tab:not([aria-selected="true"]):hover{background:var(--select-hover)}
  .tab:not([aria-selected="true"]):hover .tab__jp{color:var(--ink-soft)}
}
.design__stage{grid-area:stage;margin-top:1.5rem}
.design__stage-box{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel-deep)}
.design__stage-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease)}
.design__stage-box img.is-entering,.design__stage-box img.is-leaving{opacity:0}
.design__stage-box img{transition-duration:.45s}
/* 色見本は切り抜かず全体を見せる。見本の画像は背景を透明にしてあるので、HPの背景色がそのまま見える */
.design__stage-box.is-swatch,.design__stage-box:has(img[src*="frame-"]){background:transparent}
.design__stage-box.is-swatch img{object-fit:contain}
/* 横長の見本（刻印ネームプレートなど）は切り抜かず、余白をとって全体を見せる */
.design__stage-box.is-contain img{object-fit:contain;padding:4%}
.design__stage-cap{margin-top:.85rem;display:flex;align-items:baseline;gap:.75rem;font-family:var(--label);font-size:var(--fs-note);letter-spacing:.14em;color:var(--muted)}
.design__panel{grid-area:panel;margin-top:1.9rem}
.design__part-text{font-family:var(--serif-jp);font-size:1.0625rem;letter-spacing:.1em;line-height:1.9}
.design__part-note{margin-top:1rem;font-family:var(--label);font-size:var(--fs-note);letter-spacing:.12em;color:var(--muted)}
.design__options{display:flex;gap:.35rem;overflow-x:auto;margin:1.3rem calc(-1 * var(--gut)) 0;padding:0 var(--gut) .5rem calc(var(--gut) - .5rem);scroll-snap-type:x proximity;scroll-padding-inline:calc(var(--gut) - .5rem);scrollbar-width:none}
.design__options::-webkit-scrollbar{display:none}
.design__options li{flex:none;scroll-snap-align:start}
.design__opts-text{margin-top:1rem;font-family:var(--label);font-size:var(--fs-small);letter-spacing:.12em;line-height:1.9;color:var(--ink-soft)}
.design__stage-text{transition:opacity .5s var(--ease)}
.design__stage-text.is-entering{opacity:0}
.opt{display:grid;justify-items:center;gap:.5rem;padding:.55rem .5rem .35rem;border:0;background:transparent;cursor:pointer;transition:background-color .4s var(--ease)}
.opt[aria-pressed="true"]{background:var(--select)}
.opt__thumb{position:relative;display:block;width:80px;height:80px;overflow:hidden;background:var(--panel-deep);outline:1px solid transparent;outline-offset:3px;transition:outline-color .4s var(--ease)}
.opt__thumb img{width:100%;height:100%;object-fit:cover}
.opt[aria-pressed="true"] .opt__thumb{outline-color:var(--ink)}
.opt__label{position:relative;padding-bottom:.45rem;font-family:var(--label);font-size:var(--fs-note);letter-spacing:.06em;line-height:1.4;color:var(--muted);text-align:center;transition:color .4s var(--ease)}
.opt__label::after{content:"";position:absolute;left:50%;bottom:0;width:1.1rem;height:1px;margin-left:-.55rem;background:var(--gold);opacity:0;transition:opacity .4s var(--ease)}
.opt[aria-pressed="true"] .opt__label{color:var(--ink)}
.opt[aria-pressed="true"] .opt__label::after{opacity:1}
@media (hover:hover){
  .opt:not([aria-pressed="true"]):hover{background:var(--select-hover)}
  .opt:not([aria-pressed="true"]):hover .opt__label{color:var(--ink-soft)}
}
.opt--empty .opt__label{color:var(--muted)}
.opt-text{align-self:end;padding:.4rem .9rem;border:1px solid var(--line);font-family:var(--label);font-size:var(--fs-note);letter-spacing:.08em;color:var(--muted)}
.design__studio{grid-area:studio;margin-top:2.75rem;padding-top:2.1rem;border-top:1px solid var(--gold);display:grid;gap:1.1rem;justify-items:start}
.design__studio-text{font-family:var(--serif-jp);font-size:clamp(1rem,.96rem + .25vw,1.15rem);line-height:2;letter-spacing:.1em}
.design__studio .btn{width:100%;max-width:380px}
.design__note{grid-area:note;margin-top:2.25rem;font-size:var(--fs-note);line-height:2;color:var(--muted)}
/* Mobile：大きな作品画像 → 項目タブ → 選択中の詳細 の順に並べ、3つを一続きに見せる */
@media (max-width:599.98px){
  .design__head{margin-bottom:1.75rem}
  .design__stage{margin-top:0}
  .design__stage-box{aspect-ratio:1/1}
  .design__stage-cap{margin-top:.7rem}
  .design__tabs{margin-top:1.1rem;border-top:1px solid var(--line)}
  .tab{padding:.7rem .8rem .65rem}
  .design__panel{margin-top:1.25rem;scroll-margin-top:calc(var(--header-h) + 1rem)}
  .design__studio{margin-top:2.25rem;padding-top:1.75rem}
  .design__note{margin-top:1.75rem}
  .design__options{padding-bottom:.25rem}
}
@media (min-width:600px){
  .design__studio .btn{width:auto}
  .design__options{flex-wrap:wrap;overflow:visible;margin-inline:-.5rem 0;padding-inline:0}
}
@media (min-width:600px) and (max-width:959.98px){ .design__stage{max-width:520px} }
/* 横スクロールのとき：最後の項目も画面端に貼り付かないよう、右端に余白を残す */
@media (max-width:959.98px){
  /* 項目の文字の左端を本文にそろえ、選択中の面だけが外へ少し広がるようにする */
  .design__tabs{padding-left:calc(var(--gut) - .8rem);padding-right:0;scroll-padding-inline:calc(var(--gut) - .8rem)}
  .tab:last-child{margin-right:calc(var(--gut) - .8rem)}
}
@media (min-width:960px){
  .design{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto;
    grid-template-areas:"stage head" "stage tabs" "stage panel" "stage studio" "stage note" "stage .";column-gap:clamp(3rem,6vw,6.5rem);
  }
  .design__stage{margin:0;align-self:start;position:sticky;top:calc(var(--header-h) + 2rem)}
  .design__tabs{display:grid;margin:0;padding:0;overflow:visible;border-top:1px solid var(--line);border-bottom:0}
  .tab{grid-template-columns:1fr auto;align-items:baseline;gap:.75rem;width:100%;margin:0;padding:.95rem 1rem;border-bottom:1px solid var(--line)}
  .tab__en{justify-self:end}
  /* PC：目次のように、選択中の行の左に細い Gold の線 */
  .tab[aria-selected="true"]::after,.tab::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto;transform:scaleY(0)}
  .tab[aria-selected="true"]::after{transform:scaleY(1)}
  .design__panel{margin-top:1.75rem}
  .design__studio{margin-top:2.5rem;align-self:end}
}

/* ════════════ PRICE ════════════
   ホテルやレストランのメニューのように：細い罫線と大きなセリフ数字。 */
.price{display:grid;grid-template-areas:"head" "menu" "include" "cta";gap:clamp(2.5rem,2rem + 2vw,3.5rem)}
.price__head{grid-area:head;display:grid;gap:1.1rem;justify-items:start}
.price__lead{color:var(--muted);font-size:var(--fs-small);line-height:2.1;max-width:28em}
.price__menu{grid-area:menu;display:grid;gap:clamp(2.5rem,2rem + 2vw,3.5rem)}
.menu__group{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--ink);font-family:var(--serif-jp);font-size:.95rem;letter-spacing:.12em;color:var(--muted)}
.menu__group span{font-family:var(--serif);font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem);letter-spacing:.04em;color:var(--ink)}
.menu__item{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.5rem 1.5rem;padding:clamp(1.35rem,1.1rem + 1vw,1.9rem) 0;border-bottom:1px solid var(--line)}
.menu__name{font-family:var(--serif-jp);font-size:clamp(1.05rem,1rem + .3vw,1.25rem);letter-spacing:.12em;margin-bottom:.35rem}
.menu__desc{font-size:var(--fs-small);color:var(--muted);line-height:1.95;max-width:26em}
.menu__price{font-family:var(--serif);font-size:clamp(1.75rem,1.45rem + 1.3vw,2.75rem);line-height:1;letter-spacing:.01em;white-space:nowrap;display:flex;align-items:baseline;gap:.45rem}
.menu__price small{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.1em;color:var(--muted)}
@media (max-width:479px){ .menu__item{grid-template-columns:1fr} .menu__price{margin-top:.5rem} }
.include{grid-area:include;display:grid;gap:.75rem;align-content:start;padding-top:1.6rem;border-top:1px solid var(--gold)}
.include__title{font-family:var(--serif-jp);font-size:clamp(1.05rem,1rem + .3vw,1.2rem);font-weight:400;letter-spacing:.12em;line-height:1.7}
.include__lead{font-size:var(--fs-small);color:var(--muted);line-height:2}
/* 5つの項目：ゴールドの小さな菱形と番号、項目名（明朝・やや強調）＋短い補足（控えめ） */
.include__list{display:grid;gap:.7rem;margin-top:.2rem;padding:0;list-style:none}
.include__list li{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:start}
.include__no{display:flex;align-items:center;gap:.5rem;padding-top:.32em;font-family:var(--serif);font-size:.92rem;line-height:1;color:var(--gold-text);letter-spacing:.04em}
.include__no::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}
.include__name{font-family:var(--serif-jp);font-size:1rem;letter-spacing:.1em;line-height:1.5;color:var(--ink)}
.include__text{margin-top:.05rem;font-size:var(--fs-note);color:var(--muted);line-height:1.7}
.include__photo{margin-top:.25rem;font-family:var(--serif-jp);font-size:.95rem;letter-spacing:.08em;color:var(--ink-soft);line-height:1.8}
.include__note{font-size:var(--fs-note);color:var(--muted);line-height:2}
.price__cta{grid-area:cta;display:grid;gap:.85rem;align-content:start;width:100%;max-width:360px}
@media (min-width:960px){
  .price{grid-template-columns:minmax(0,4.2fr) minmax(0,7fr);grid-template-areas:"head menu" "include menu" "cta menu";grid-template-rows:auto auto 1fr;column-gap:clamp(3.5rem,7vw,8rem);row-gap:2.5rem}
  .price__menu{align-self:start}
  .price__cta{max-width:300px}
}

/* ════════════ HOW IT WORKS / FLOW ════════════
   ゴールドの番号＋縦線＋項目名＋説明。対面とキットで違う最初の2工程だけを左右に。 */
.flow{display:grid;gap:clamp(2rem,1.6rem + 2vw,3.25rem)}
.flow__head{display:grid;gap:1.1rem;justify-items:start}
.flow__time{display:grid;gap:.3rem;width:100%;max-width:26rem;padding-top:1rem;border-top:1px solid var(--gold)}
.flow__time div{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem}
.flow__time dt{font-family:var(--serif-jp);font-size:var(--fs-small);letter-spacing:.12em;color:var(--gold-text)}
.flow__time dd{font-family:var(--serif-jp);font-size:1.1rem;letter-spacing:.1em}
.flow__note{font-size:var(--fs-note);color:var(--muted);line-height:1.9}
.timeline{border-top:1px solid var(--line)}
.tl{display:grid;grid-template-columns:3.4rem 1fr;gap:1.1rem;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.tl__no{font-family:var(--serif);font-size:1.7rem;line-height:1;color:var(--gold);padding:.2rem 1rem .2rem 0;border-right:1px solid var(--gold);align-self:start}
.tl__title{font-family:var(--serif-jp);font-size:clamp(1.05rem,1rem + .3vw,1.22rem);letter-spacing:.12em;margin-bottom:.5rem}
.tl__text,.tl__split p{font-size:var(--fs-small);color:var(--muted);line-height:1.95}
.tl__split{display:grid;gap:.75rem}
.tl__route{display:block;font-family:var(--label);font-size:var(--fs-label);letter-spacing:.2em;color:var(--gold-text)}
/* 英字の下に日本語の正式名：説明文より強く、工程タイトルより弱く */
.tl__service{display:block;margin:.1rem 0 .3rem;font-family:var(--serif-jp);font-size:.9375rem;letter-spacing:.08em;line-height:1.7;color:var(--ink)}
.tl--merge{display:block;padding:1.1rem 0;text-align:center}
.tl--merge p{font-family:var(--serif);font-style:italic;font-size:1.1rem;letter-spacing:.06em;color:var(--gold-text)}
@media (min-width:600px){ .tl{grid-template-columns:4.5rem 1fr;gap:1.6rem} }
/* PC：3ステップを横に並べる（見出しは上） */
@media (min-width:960px){
  .timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,4rem);border-top:0}
  .tl{grid-template-columns:1fr;gap:.9rem;padding:0;border-bottom:0}
  .tl__no{padding:0 0 .9rem;border-right:0;border-bottom:1px solid var(--gold);font-size:2rem}
}

/* ════════════ CRAFTSMANSHIP（暗い間奏） ════════════ */
.craft{display:grid;gap:3.25rem;align-items:center}
.craft__visual{position:relative;padding-bottom:16%}
.craft__main{width:74%}
.craft__main img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 55%}
.craft__sub{position:absolute;right:0;bottom:0;width:46%;outline:10px solid var(--ink-deep)}
.craft__sub img{width:100%;aspect-ratio:1/1;object-fit:cover}
.craft__text{display:grid;gap:1.3rem;justify-items:start}
.craft__script{color:var(--gold-light);font-size:1.6rem}
.craft .h2{color:var(--on-dark)}
.craft__lead{color:var(--on-dark-soft);font-size:var(--fs-small);letter-spacing:.1em;line-height:2.1}
@media (min-width:960px){ .craft{grid-template-columns:6fr 5fr;gap:clamp(3rem,7vw,7rem)} }
.process{display:grid;gap:1.35rem;width:100%;margin-top:clamp(1.25rem,1rem + 1.5vw,2rem);padding-top:clamp(1.6rem,1.4rem + 1vw,2.2rem);border-top:1px solid var(--on-dark-line)}
.process__step{display:grid;grid-template-columns:40% 1fr;grid-template-areas:"img no" "img name" "img text";column-gap:1.1rem;row-gap:.3rem;align-content:start}
.process__img{grid-area:img;position:relative;aspect-ratio:4/3;overflow:hidden;background:#2A231C;align-self:start}
.process__img img{width:100%;height:100%;object-fit:cover}
.process .ph{padding:.5rem}
.process__no{grid-area:no;font-family:var(--serif);font-size:1.35rem;line-height:1;color:var(--gold-light)}
.process__name{grid-area:name;font-family:var(--serif-jp);font-size:1.1rem;letter-spacing:.12em;color:var(--on-dark)}
.process__text{grid-area:text;font-size:var(--fs-small);color:var(--on-dark-soft);line-height:1.95}
.process__step.is-nomedia{grid-template-columns:auto 1fr;grid-template-areas:"no name" ". text";column-gap:.9rem;row-gap:.2rem;align-items:baseline}
/* 工程写真がないとき：番号と見出しを横並び、説明はその下（見出しの左端にそろえる） */
.process__step.is-nomedia .process__no{font-size:1.25rem}
@media (min-width:768px){
  /* PC：工程は右列（コピー・説明の下）に縦に並べ、番号・見出しの位置をそろえる。工程写真が入ったときは写真を左に小さく置く */
  .process{gap:1.5rem}
  .process__step{grid-template-columns:34% 1fr;grid-template-areas:"img no" "img name" "img text"}
}

/* ════════════ WHY LALALA ════════════
   大きな作品写真＋番号付きの短いコピー。PCでは写真がスクロールに付いてくる。 */
.why{display:grid;gap:clamp(2.25rem,2rem + 2vw,3rem)}
.why__photo{order:2}
.why__body{order:1;display:contents}
.why__head{order:1;display:grid;gap:1.1rem;justify-items:start}
.why__sub{font-family:var(--serif);font-style:italic;font-size:1rem;letter-spacing:.04em;color:var(--muted)}
.why__frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel-deep)}
.why__frame img{width:100%;height:100%;object-fit:cover}
.why__photo figcaption{margin-top:.8rem;font-family:var(--serif);font-style:italic;font-size:.95rem;letter-spacing:.04em;color:var(--muted)}
.why__list{order:3;display:grid;border-top:1px solid var(--line)}
.why__item{padding:1.6rem 0;border-bottom:1px solid var(--line)}
.why__title{font-family:var(--serif-jp);font-size:clamp(1.05rem,1rem + .4vw,1.4rem);letter-spacing:.08em;line-height:1.7;margin-bottom:.45rem}
.why__item p{font-size:var(--fs-small);color:var(--muted);line-height:2}
@media (min-width:600px) and (max-width:959.98px){ .why__photo{width:72%} }
@media (min-width:960px){
  .why{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(3.5rem,7vw,8rem);align-items:start}
  .why__photo{order:0;position:sticky;top:calc(var(--header-h) + 3rem)}
  .why__body{display:grid;gap:2.75rem;align-self:center}
  .why__item{padding:1.9rem 0}
}

/* ════════════ FAMILY VOICE（CMS: CustomerVoice） ════════════
   写真・大きなカード枠は使わず、お客様の言葉が主役のエディトリアルな組み。
   上下の細いゴールドの線のあいだに、小さな引用符・明朝の引用・本文・右寄せの署名（お客様表記／ご利用方法）。
   PC は左に見出し・右に声の2カラム。2件以上は全件を同じ場所に重ね、一番長い声に高さをそろえる（切り替えても上下に動かない） */
.voice__inner{display:block}
.voice .sec-head{margin-bottom:clamp(1.75rem,1.4rem + 1.6vw,2.75rem)}
.voice__list{min-width:0}
.fv{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:600px;height:100%;margin:0 auto;box-sizing:border-box;
  padding-block:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  border-block:1px solid rgba(156,122,56,.4)
}
.fv::before{content:"“";display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;height:.5em;color:var(--gold)}
.fv__body{margin:0;display:grid;gap:.9rem}
.fv__quote{margin:0;word-break:auto-phrase;text-wrap:balance;font-family:var(--serif-jp);font-size:clamp(1.18rem,1.08rem + .55vw,1.5rem);font-weight:500;line-height:1.85;letter-spacing:.08em;color:var(--ink)}
.fv__comment{margin:0;font-size:var(--fs-small);line-height:2;letter-spacing:.06em;color:var(--ink-soft)}
/* 署名：右寄せ。細いゴールドの線＋お客様表記、その下に小さくご利用方法 */
.fv__meta{display:grid;justify-items:end;gap:.15rem;margin-top:auto;padding-top:1.2rem}
.fv__name{display:flex;align-items:center;gap:.7rem;font-family:var(--serif-jp);font-size:var(--fs-small);letter-spacing:.12em;color:var(--ink)}
.fv__name::before{content:"";width:24px;height:1px;background:var(--gold)}
.fv__method{font-size:var(--fs-label);letter-spacing:.12em;color:var(--gold-text)}
.fv--empty .fv__comment{color:var(--muted)}
/* 開発用：切り替えの確認で複製した見本であることを示す */
.layout-tag{position:absolute;right:0;top:.5rem;z-index:3;padding:.2em .6em;border:1px dashed var(--terracotta);background:rgba(252,251,249,.94);font-family:var(--label);font-size:10px;letter-spacing:.06em;line-height:1.5;color:var(--terracotta);pointer-events:none}

/* ─── 2件以上：1件ずつ切り替え（自動再生なし） ─── */
.fvs{max-width:600px;margin-inline:auto}
.fvs__stage{display:grid;outline:none}
.fvs__stage:focus-visible{outline:1px solid var(--gold);outline-offset:6px}
.fvs__slide{grid-area:1/1;display:grid;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.fvs__slide.is-current{opacity:1;visibility:visible;transition:opacity .5s var(--ease) .08s,visibility 0s}
/* 〈 01 ───── 03 〉 */
.fvs__nav{display:flex;align-items:center;justify-content:center;margin-top:.6rem}
.fvs__btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;transition:color .3s var(--ease)}
.fvs__btn:hover{color:var(--gold)}
.fvs__btn:focus-visible{outline:1px solid var(--gold);outline-offset:-6px}
.fvs__num{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.fvs__num--now{color:var(--ink)}
.fvs__bar{position:relative;width:clamp(72px,16vw,112px);height:1px;margin-inline:.9rem;background:var(--line);overflow:hidden}
.fvs__fill{position:absolute;inset:0;background:var(--gold);transform-origin:left center;transition:transform .5s var(--ease)}
.fv-more{margin-top:clamp(1.4rem,1.2rem + 1vw,2rem)}
@media (min-width:960px){
  .voice__inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .voice .sec-head{justify-items:start;text-align:left;margin-bottom:0;padding-top:clamp(1.5rem,1.2rem + 1.2vw,2.25rem)}
  .fv,.fvs{margin-inline:0}
  .fvs__nav{justify-content:flex-start;margin-left:-14px}
}
@media (prefers-reduced-motion:reduce){ .fvs__slide,.fvs__slide.is-current,.fvs__fill{transition:none} }

/* ════════════ FAQ ════════════ */
.faq-wrap{max-width:calc(840px + var(--gut) * 2)}
.faq{display:grid;gap:.5rem}
.faq details{background:var(--ground);border:1px solid transparent;transition:border-color .4s var(--ease)}
.faq details[open]{border-color:var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2rem 1fr 1rem;align-items:center;gap:.5rem;padding:1.15rem 1.1rem;min-height:56px;font-family:var(--serif-jp);font-size:.98rem;letter-spacing:.08em;line-height:1.8}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";font-family:var(--serif);font-size:1.15rem;color:var(--gold)}
.faq summary::after{content:"";width:8px;height:8px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg);transition:transform .4s var(--ease);justify-self:end;margin-top:-4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq__a{display:grid;grid-template-columns:2rem 1fr;gap:.5rem;padding:0 1.1rem 1.4rem}
.faq__a::before{content:"A.";font-family:var(--serif);font-size:1.15rem;color:var(--muted);line-height:1.6}
.faq__a p{font-size:var(--fs-small);color:var(--ink-soft);line-height:2.05}
.faq__a p + p{margin-top:.75em}
.js .faq details[open] .faq__a{animation:faq-in .6s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq__cta{margin-top:2.75rem;display:grid;gap:1.1rem;justify-items:center;text-align:center}
.faq__cta p{font-size:var(--fs-small);color:var(--muted);line-height:2}
@media (min-width:600px){ .faq summary{padding:1.2rem 1.4rem;grid-template-columns:2.3rem 1fr 1rem} .faq__a{padding:0 1.4rem 1.5rem;grid-template-columns:2.3rem 1fr} }

/* ════════════ ABOUT US ════════════ */
.aboutus{display:grid;gap:clamp(2.5rem,2rem + 3vw,4rem);align-items:center}
.aboutus__frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel-deep)}
.aboutus__frame img{width:100%;height:100%;object-fit:cover}
.aboutus__text{display:grid;gap:1.4rem;justify-items:start}
.aboutus__lead{font-family:var(--serif-jp);font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:2.1;letter-spacing:.1em;text-wrap:wrap}
.aboutus__body{line-height:2.15;color:var(--ink-soft)}
.aboutus.is-nomedia{max-width:calc(760px + var(--gut) * 2)}
@media (min-width:600px) and (max-width:959.98px){ .aboutus__photo{width:72%} }
@media (min-width:960px){ .aboutus:not(.is-nomedia){grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(3.5rem,7vw,8rem)} }
/* 写真なし（文章だけ）の About Us は、PC・スマホとも中央揃え。本文の幅は読みやすい範囲に制限（2026-10-13 代表指示） */
.aboutus.is-nomedia{max-width:calc(820px + var(--gut) * 2)}
.aboutus.is-nomedia .aboutus__text{justify-items:center;text-align:center;gap:1.25rem}
.aboutus.is-nomedia .aboutus__text .h2{margin-bottom:.35rem}
.aboutus.is-nomedia .aboutus__lead{max-width:34em}
.aboutus.is-nomedia .aboutus__body{max-width:46em}

/* ════════════ FINAL CTA ════════════ */
.final__inner{display:grid;gap:1.4rem;justify-items:center;text-align:center;max-width:calc(820px + var(--gut) * 2)}
.final__eyebrow{display:flex;align-items:center;gap:1rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);letter-spacing:.06em;color:var(--gold-light)}
.final__eyebrow::before,.final__eyebrow::after{content:"";width:28px;height:1px;background:var(--gold-light)}
.final__title{color:var(--on-dark);font-size:clamp(1.75rem,1.3rem + 2vw,3rem);line-height:1.6}
.final__body{color:var(--on-dark-soft);font-size:var(--fs-small);line-height:2.2;margin-bottom:.8rem}
.final__buttons{display:grid;gap:.85rem;width:100%;max-width:360px}
@media (min-width:600px){ .final__buttons{display:flex;justify-content:center;max-width:none} }

/* ════════════ FOOTER（Final CTA の地から続ける） ════════════ */
.footer{background:var(--ink-footer);color:var(--on-dark-soft);padding:clamp(3rem,2rem + 3vw,4.5rem) 0 calc(1.75rem + env(safe-area-inset-bottom))}
.footer__inner{display:grid;gap:2rem}
.footer__brand{display:flex;align-items:center;gap:1.25rem}
.footer__brand img{height:56px;width:auto}
.footer__brand p{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.16em;line-height:1.8}
.footer__info{display:grid;gap:.15rem;font-size:var(--fs-small);letter-spacing:.06em;line-height:1.9}
.footer__info a{display:inline-block;padding-block:.35rem;border-bottom:1px solid var(--on-dark-line)}
.footer__links{display:flex;flex-wrap:wrap;gap:0 1.5rem;font-size:var(--fs-small);letter-spacing:.04em}
.footer__links a{display:inline-flex;align-items:center;min-height:44px;transition:color .4s var(--ease)}
.footer__links a:hover{color:var(--on-dark)}
.footer__copy{margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid var(--on-dark-line);font-family:var(--label);font-size:var(--fs-label);letter-spacing:.18em}
@media (min-width:960px){
  .footer__inner{grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:clamp(2rem,4vw,4rem)}
  .footer__info{white-space:nowrap}
  .footer__links{justify-content:flex-end}
}

/* ════════════ 詳細ページへのリンク（HOME の Why LaLaLa・Service） ════════════
   ボタンにしない。Gold の小さな文字＋細い下線＋細い矢印 */
.tlink--more{color:var(--gold-text)}
.tlink--more::after{
  width:28px;height:7px;background:currentColor;transition:transform .45s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 7'%3E%3Cpath d='M0 6.5h27L21 .5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 7'%3E%3Cpath d='M0 6.5h27L21 .5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.tlink--more:hover{color:var(--ink)}
.tlink--more:hover::after{width:28px;transform:translateX(4px)}
.why__more{margin-top:.6rem}
.service__more{margin-top:clamp(3rem,2.5rem + 2.5vw,4.5rem);text-align:center}
#service.is-textonly .service__more{grid-column:1/-1}

/* ════════════ 詳細ページ共通：導入（パンくず・H1・目次） ════════════ */
.phero{background:var(--ground);padding:clamp(2.5rem,2rem + 3vw,5rem) 0 clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.phero__inner{display:grid;gap:1.1rem;justify-items:start}
.crumbs{margin-bottom:clamp(1.25rem,1rem + 2vw,2.5rem)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--label);font-size:var(--fs-label);letter-spacing:.14em;color:var(--muted)}
.crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--line)}
.crumbs a{color:var(--muted);border-bottom:1px solid var(--line);transition:color .4s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.phero__title{font-family:var(--serif-jp);font-size:var(--fs-display);line-height:1.55;letter-spacing:.08em}
.phero__latin{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1rem + .6vw,1.55rem);letter-spacing:.04em;line-height:1.4;color:var(--ink-soft)}
.sec--tight-top{padding-top:0}
.phero__lead{font-family:var(--serif-jp);font-size:clamp(.98rem,.94rem + .25vw,1.12rem);line-height:2.1;letter-spacing:.1em;color:var(--ink-soft)}
.toc{width:100%;max-width:760px;margin-top:clamp(1.75rem,1.25rem + 2vw,3rem);border-top:1px solid var(--line)}
.toc a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;min-height:44px;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.toc__jp{font-family:var(--serif-jp);font-size:clamp(1rem,.96rem + .25vw,1.15rem);letter-spacing:.1em;color:var(--ink);transition:color .4s var(--ease)}
.toc__en{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.18em;color:var(--gold-text)}
@media (hover:hover){ .toc a:hover .toc__jp{color:var(--gold-text)} }
@media (max-width:599.98px){ .toc a{flex-direction:column-reverse;align-items:flex-start} }

/* ════════════ Why LaLaLa：選べる、2つの型どり方法。 ════════════
   Mobile は1列（写真 → 名前 → こんな方へ → 仕様）。768px 以上で対面／キットを左右に並べて見比べられるように */
.methods{display:grid;gap:3.75rem}
.method{display:grid;gap:1.6rem;align-content:start}
.method__img{position:relative}
.method__frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel-deep)}
.method__frame img{width:100%;height:100%;object-fit:cover}
.method__body{display:grid;gap:.85rem;justify-items:start;padding-top:1.5rem;border-top:1px solid var(--gold)}
.method.is-nomedia .method__body{padding-top:1.75rem}
.method__en{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.22em;color:var(--gold-text)}
.method__name{font-family:var(--serif-jp);font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);line-height:1.6;letter-spacing:.1em}
.method__catch{font-family:var(--serif-jp);color:var(--gold-text);font-size:1rem;line-height:2;letter-spacing:.12em}
.method__facts{width:100%;margin-top:.35rem;border-top:1px solid var(--line)}
.method__facts > div{display:grid;grid-template-columns:5.25rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.method__facts dt{font-family:var(--label);font-size:var(--fs-note);letter-spacing:.14em;color:var(--gold-text);line-height:1.9}
.method__facts dd{font-size:var(--fs-small);line-height:1.9;color:var(--ink-soft)}
.method__list li + li{margin-top:.15rem}
.method__sub{margin-top:.35rem;font-size:var(--fs-note);color:var(--muted)}
@media (min-width:768px){ .methods{grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,6vw,6rem)} }
.methods__merge{display:grid;gap:.45rem;justify-items:center;margin-top:clamp(3rem,2.5rem + 2.5vw,4.5rem);text-align:center;font-family:var(--serif);font-style:italic;font-size:1.1rem;letter-spacing:.06em;color:var(--gold-text)}
.methods__merge span{font-family:var(--sans);font-style:normal;font-size:var(--fs-small);letter-spacing:.08em;color:var(--muted)}

/* ════════════ Why LaLaLa：Craftsmanship（暗い地） ════════════
   写真＝作品の美しさ（実物写真3枚を同じ枠でクロスフェード）、文章＝技術へのこだわり。
   スマホ：見出し → 写真 → 技術へのこだわり。PC：左に写真、右に見出し・本文 */
.craft-head{gap:1.1rem}
.craft-head .h2{color:var(--on-dark)}
.cx{display:grid;grid-template-areas:"head" "main";gap:clamp(1.75rem,1.4rem + 1.5vw,2.5rem) 0}
.cx__head{grid-area:head;display:grid;justify-items:start}
.cx__lead{display:grid;gap:.9rem;margin-top:.3rem}
.cx__lead p{font-size:var(--fs-small);line-height:2.05;letter-spacing:.08em;color:var(--on-dark-soft)}
.cx__main{grid-area:main;margin:0}
/* 枠は写真 A と同じ縦横比（下端の暗い線 6px を除いた 900×1194）。3枚を重ね、不透明度だけを切り替える（高さは変わらない）。
   3枚とも縦横比 3:4 の写真なので、ほぼそのまま表示される。元画像は加工しない */
.cx__fade{position:relative;aspect-ratio:900/1194;overflow:hidden;background:#DCDAD6}
.cx__fade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;z-index:0}
.cx__fade img.is-active{opacity:1;z-index:2;transition:opacity 1.2s ease-in-out}
.cx__fade img.is-prev{opacity:1;z-index:1}
@media (min-width:768px){
  .cx{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"main head";column-gap:clamp(2.5rem,5vw,5.5rem);align-items:center}
}
@media (prefers-reduced-motion:reduce){ .cx__fade img.is-active{transition:none} }

/* 技術へのこだわり：手順の一覧ではなく、仕上がりを支える3つの技術として見せる */
.tech{margin-top:clamp(3rem,2.4rem + 3vw,5.5rem)}
.tech__title{display:grid;gap:.35rem;margin-bottom:clamp(1.4rem,1.2rem + 1vw,2.2rem);font-family:var(--serif-jp);font-size:var(--fs-h3);letter-spacing:.12em;color:var(--on-dark)}
.tech__en{font-family:var(--label);font-size:var(--fs-label);letter-spacing:.24em;color:var(--gold-light)}
.tech__list{display:grid;border-top:1px solid rgba(184,151,83,.5)}
.tech__item{display:grid;align-content:start;grid-template-columns:2.6rem 1fr;grid-template-areas:"no name" "no text";column-gap:.9rem;row-gap:.45rem;padding:1.35rem 0;border-bottom:1px solid var(--on-dark-line)}
.tech__no{grid-area:no;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.2;color:var(--gold-light)}
.tech__name{grid-area:name;font-family:var(--serif-jp);font-size:1.06rem;line-height:1.75;letter-spacing:.1em;color:var(--on-dark)}
.tech__text{grid-area:text;font-size:var(--fs-small);line-height:1.95;color:var(--on-dark-soft)}
@media (min-width:768px){
  .tech__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.75rem,3.5vw,3.5rem);border-top:0}
  .tech__item{grid-template-columns:1fr;grid-template-areas:"no" "name" "text";row-gap:.7rem;padding:1.6rem 0 0;border-bottom:0;border-top:1px solid rgba(184,151,83,.5)}
  .tech__no{font-size:1.75rem;height:2.2rem;line-height:2.2rem}
}

/* ════════════ Why LaLaLa：世界にひとつだけのデザイン。（Customize） ════════════
   4項目を、情報の性質に合わせて見せ分ける。
   額縁・ネームプレート：実物写真を2枚並べて比較（大きめ）／背面デザイン：素材見本（スマホは横にスワイプ、PC は3列）／
   手足カラー：実物写真の一覧。写真・見本はタップで拡大。写真の無い選択肢は開発用 PHOTO NEEDED（本番では名前だけ） */
.options{display:grid;gap:clamp(2.75rem,2.2rem + 2.2vw,4rem)}
.opts{display:grid;gap:1.1rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.opts__head{display:grid;gap:.3rem;font-family:var(--serif-jp);font-size:clamp(1.15rem,1.08rem + .35vw,1.35rem);letter-spacing:.12em}
.opts__en{display:flex;align-items:baseline;gap:.75rem;font-family:var(--label);font-size:var(--fs-label);letter-spacing:.2em;color:var(--gold-text)}
.opts__no{font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:.04em;color:var(--gold)}
.opts__body{display:grid;gap:1rem;min-width:0}
.opts__lead{font-size:var(--fs-small);line-height:1.9;letter-spacing:.08em;color:var(--ink-soft)}
.opts__note{font-size:var(--fs-note);color:var(--muted);line-height:1.9}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .9rem}
.swatch{display:grid;gap:.55rem;align-content:start}
.swatch__img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--panel-deep)}
.swatch__img img{width:100%;height:100%;object-fit:cover}
/* 背面の色見本・額縁の写真は切り抜かず全体を見せる */
.swatch__img img[src*="panel-"],.swatch__img img[src*="frame-"]{object-fit:contain;background:transparent}
.swatch__img:has(img[src*="panel-"]),.swatch__img:has(img[src*="frame-"]),.opt__thumb:has(img[src*="panel-"]),.opt__thumb:has(img[src*="frame-"]){background:transparent}
.swatch__img .ph{padding:.5rem}
.swatch__img .ph__tag{font-size:.625rem;letter-spacing:.08em}
.swatch__img .consent-tag{top:.4rem;left:.4rem;right:.4rem;font-size:.625rem;letter-spacing:.04em;padding:.2em .5em}
.swatch__name{font-family:var(--label);font-size:var(--fs-note);letter-spacing:.1em;color:var(--ink-soft)}
.swatch__name span{margin-left:.6em;color:var(--muted)}
.swatches--photo .swatch__name{font-family:var(--sans);letter-spacing:.08em}
.swatches--photo .swatch__name,.swatches--color .swatch__name{text-align:center}
/* 本番で写真が出せない選択肢は、名前だけを細い線の上に並べる */
.swatch.is-nomedia{padding-top:.7rem;border-top:1px solid var(--line)}
/* 背面デザイン：スマホは見本を大きめ（幅の約7割）にして横にスワイプ。次の見本が少し見えるようにする */
@media (max-width:599.98px){
  .swatches--panel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .swatches--panel::-webkit-scrollbar{display:none}
  .swatches--panel .swatch{scroll-snap-align:start}
}
@media (min-width:600px){
  .swatches--panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem 1.25rem}
  .swatches--color{grid-template-columns:repeat(5,minmax(0,1fr))}
  .swatches--photo{max-width:720px;gap:1.5rem}
}
/* PC：4項目を 2×2 に並べる（01 額縁｜02 背面デザイン／03 手足カラー｜04 ネームプレート）。縦に長くなりすぎないように */
@media (min-width:960px){
  .options{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(3rem,5vw,5.5rem);row-gap:clamp(3rem,4vw,4.5rem);align-items:start}
  .swatches--photo{max-width:none}
  .swatches--panel,.swatches--color{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem 1rem}
}
/* Customize の各項目：上にメイン写真、下にストック（サムネイル）。タップでメインを切り替える */
.pick{display:grid;gap:.9rem}
.pick__main{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--panel-deep)}
.pick__main img{width:100%;height:100%;object-fit:cover}
.pick--panel .pick__main,.pick__main:has(img[src*="frame-"]){background:transparent}
.pick--panel .pick__main img,.pick__main img[src*="frame-"]{object-fit:contain}
.pick__caption{display:grid;gap:.2rem;min-height:2.6rem}
.pick__name{font-family:var(--serif-jp);font-size:clamp(.98rem,.95rem + .2vw,1.08rem);letter-spacing:.1em;color:var(--ink)}
.pick__spec{font-size:var(--fs-small);letter-spacing:.06em;line-height:1.8;color:var(--ink-soft)}
.pick__note{font-size:var(--fs-note);line-height:1.8;color:var(--muted)}
.pick__stock{display:flex;gap:.55rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.pick__stock::-webkit-scrollbar{display:none}
.pick__thumb{display:grid;gap:.35rem;justify-items:center;width:4.6rem;padding:0;border:0;background:none;cursor:pointer;color:var(--muted)}
.pick__thumb-img{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--panel-deep);outline:1px solid transparent;outline-offset:2px;transition:outline-color .3s var(--ease)}
.pick__thumb-img img{width:100%;height:100%;object-fit:cover}
.pick--panel .pick__thumb-img,.pick__thumb-img:has(img[src*="frame-"]){background:transparent}
.pick--panel .pick__thumb-img img,.pick__thumb-img img[src*="frame-"]{object-fit:contain}
.pick__label{font-family:var(--label);font-size:.6875rem;letter-spacing:.04em;line-height:1.35;text-align:center}
.pick__thumb[aria-pressed="true"]{color:var(--ink)}
.pick__thumb[aria-pressed="true"] .pick__thumb-img{outline-color:var(--gold)}
.pick__thumb:hover .pick__thumb-img{outline-color:var(--line)}
.pick__thumb[aria-pressed="true"]:hover .pick__thumb-img{outline-color:var(--gold)}
.pick__thumb:focus-visible{outline:none}
.pick__thumb:focus-visible .pick__thumb-img{outline:2px solid var(--gold)}
@media (min-width:600px){ .pick__stock{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0} .pick__thumb{width:4.75rem} }
@media (min-width:960px){ .pick__main{max-width:520px} }
.options__note{margin-top:2.25rem;font-size:var(--fs-note);color:var(--muted);line-height:2}
.page-cta{display:grid;justify-items:center;gap:1.1rem;margin-top:clamp(3.5rem,3rem + 3vw,6rem);padding-top:clamp(2.5rem,2rem + 2vw,3.5rem);border-top:1px solid var(--gold);text-align:center}
.page-cta__lead{font-family:var(--serif-jp);font-size:clamp(1rem,.96rem + .25vw,1.15rem);line-height:2;letter-spacing:.1em}
.page-cta > .btn{width:100%;max-width:380px}
.page-cta__sub{display:grid;justify-items:center;gap:.6rem;width:100%;max-width:380px}
.page-cta__sub .btn{width:100%}
@media (min-width:600px){ .page-cta__sub{display:flex;justify-content:center;gap:2rem;max-width:none;align-items:center} .page-cta__sub .btn{width:auto} }

/* ─── 写真の「呼吸」：ごくゆっくりしたズーム（Gallery の作品写真）───
   静止画が、ほんの少し呼吸しているように見える程度。画面に近い写真だけ動かす（JS で is-breathing を付け外し）。
   拡大は transform だけ（レイアウトは動かさない） */
@keyframes breathe{from{transform:scale(1)}to{transform:scale(var(--breathe-scale,1.03))}}
.breathe img{animation:breathe var(--breathe-dur,16s) cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused}
.breathe.is-breathing img{animation-play-state:running}
.work__img.breathe{--breathe-scale:1.02;--breathe-dur:18s}     /* HOME はさらに控えめに */
.gwork__img.breathe{--breathe-scale:1.035;--breathe-dur:16s}
@media (prefers-reduced-motion:reduce){ .breathe img{animation:none} }

/* ════════════ GALLERY ページ（/gallery/） ════════════
   写真集のように。スマホ・PC とも2列で、大小と上下の位置を少しずらした控えめな非対称 */
.glist{display:grid;gap:clamp(3.5rem,3rem + 3vw,6rem)}
.gwork__fig{position:relative}
.gwork__img{position:relative;overflow:hidden;background:var(--panel)}
.gwork__img img{width:100%;height:100%;object-fit:cover}
.gwork__link{display:block}
.gwork__cap{display:grid;gap:.15rem;margin-top:1rem}
.gwork__lead{font-family:var(--serif);font-size:clamp(1.1rem,1rem + .4vw,1.35rem);letter-spacing:.03em;line-height:1.45;color:var(--ink)}
.gwork__meta{font-family:var(--label);font-size:var(--fs-note);letter-spacing:.08em;line-height:1.8;color:var(--muted)}
.gallery-badge{justify-self:start;margin:0 0 2.5rem}
.gallery-next{margin-top:clamp(4rem,3rem + 4vw,7rem);text-align:center}
.gallery-next button{border-top:0;border-left:0;border-right:0;background:none;cursor:pointer;font-family:inherit}
.gallery-empty{max-width:34em;font-family:var(--serif-jp);font-size:clamp(1rem,.96rem + .25vw,1.15rem);line-height:2.1;letter-spacing:.1em;color:var(--muted)}
/* スマホ：2列。右の列を少し下げ、大小をつけて PC と同じリズムに */
@media (max-width:599.98px){
  .glist{--g-offset:3.5rem;grid-template-columns:1fr 1fr;column-gap:1rem;row-gap:2.75rem;align-items:start;padding-bottom:var(--g-offset)}
  .gwork:nth-child(even) .gwork__fig{top:var(--g-offset)}
  .gwork:nth-child(4n+2) .gwork__fig{width:86%}
  .gwork:nth-child(4n+3) .gwork__fig{width:86%;margin-left:auto}
  .gwork__cap{margin-top:.6rem}
  .gwork__lead{font-size:1rem}
  .gwork__meta{font-size:.72rem;letter-spacing:.04em;line-height:1.7}
}
@media (min-width:600px){
  .glist{--g-offset:clamp(4rem,9vw,10rem);grid-template-columns:1fr 1fr;column-gap:clamp(2rem,6vw,7rem);row-gap:clamp(4.5rem,3rem + 5vw,9rem);align-items:start;padding-bottom:var(--g-offset)}
  /* 右の列は少し下から始める（relative のずらしなのでレイアウトは崩れない） */
  .gwork:nth-child(even) .gwork__fig{top:var(--g-offset)}
  /* 4件ごとに：大・小（右）／小（左・中央寄せ）・大 */
  .gwork:nth-child(4n+2) .gwork__fig{width:80%}
  .gwork:nth-child(4n+3) .gwork__fig{width:80%;margin-left:auto}
}

/* ─── 開発用：掲載許可確認前の見本であることを示すラベル ─── */
.preview-badge{margin-top:.4rem;padding:.3em .9em;border:1px dashed var(--gold);font-family:var(--label);font-size:var(--fs-label);letter-spacing:.08em;color:var(--gold-text)}

/* ─── 背景のリズム：Gallery が非表示のとき、About と Service の地を入れ替える ─── */
.is-gallery-off #about{background:var(--panel)}
.is-gallery-off #about .about__sub{outline-color:var(--panel)}
.is-gallery-off #service{background:var(--ground)}

/* ─── 背景のリズム：Customer Voice が非表示のとき、FAQ と About Us の地を入れ替える ─── */
.is-voice-off #faq{background:var(--ground)}
.is-voice-off #faq details{background:var(--panel)}
.is-voice-off #about-us{background:var(--panel)}
.is-voice-off #about-us .aboutus__frame{background:var(--panel-deep)}

/* ─── 開発用：掲載許可が未確認の写真に付ける印（プロトタイプ表示のみ。?ph=off では写真ごと出さない） ─── */
.consent-tag{position:absolute;top:.6rem;left:.6rem;z-index:3;padding:.25em .7em;border:1px dashed var(--gold);background:rgba(252,251,249,.92);font-family:var(--label);font-size:var(--fs-label);letter-spacing:.08em;line-height:1.5;color:var(--gold-text);pointer-events:none}
.sstory__bg > .consent-tag{top:1rem;left:var(--gut)}

/* ─── 本番安全モード：公開できる写真が無いときの、写真なしレイアウト ─── */
/* Service：2つのご利用方法を、文字組みだけで並べる */
#service.is-textonly .style{padding-top:1.75rem;border-top:1px solid var(--gold)}
#service.is-textonly .style + .style{margin-top:3.5rem}
@media (min-width:768px){
  #service.is-textonly .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,6vw,6rem)}
  #service.is-textonly .sec-head{grid-column:1/-1}
  #service.is-textonly .style{grid-template-columns:1fr;align-items:start}
  #service.is-textonly .style + .style{margin-top:0}
  #service.is-textonly .style.is-nomedia .style__body{grid-column:auto}
}
/* Why：写真なし。見出しの下に3つの理由を並べる（PCは3列） */
@media (min-width:960px){
  .why.is-nomedia{grid-template-columns:1fr}
  .why.is-nomedia .why__body{gap:3rem;align-self:start}
  .why.is-nomedia .why__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,4rem);border-top:0}
  .why.is-nomedia .why__item{padding:1.75rem 0 0;border-top:1px solid var(--line);border-bottom:0}
  /* PC 3列：説明文の長さが違っても「詳しく見る」の位置を下でそろえる */
  .why.is-nomedia .why__item{display:flex}
  .why.is-nomedia .why__item > div{display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .why.is-nomedia .why__more{margin-top:auto;padding-top:1.4rem}
}
/* Customize：公開できる実物写真が無い項目は、写真の代わりに文字の面を見せる（CG・色見本では代用しない） */
.design__stage-text{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:.6rem;padding:2rem;text-align:center;background:var(--panel);border:1px solid var(--line)}
.design__stage-text-en{font-family:var(--serif);font-style:italic;font-size:clamp(1.9rem,1.5rem + 2vw,3rem);line-height:1.15;color:var(--ink)}
.design__stage-text-jp{font-family:var(--serif-jp);font-size:1rem;letter-spacing:.18em;color:var(--ink-soft)}
.design__stage-text-opts{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gold);max-width:22rem;font-family:var(--label);font-size:var(--fs-note);letter-spacing:.12em;line-height:2;color:var(--muted)}

/* ════════════ 法定表示（特定商取引法に基づく表記・利用規約・プライバシーポリシー） ════════════
   読みやすさ優先：本文は少し大きめ・行間広め。項目名は Shippori Mincho、番号は Cormorant の Gold */
.phero__title--legal{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);line-height:1.6}
.legal__wrap{max-width:calc(880px + var(--gut) * 2)}
.legal p,.legal li{font-size:var(--fs-small);line-height:2.05;color:var(--ink-soft)}
.legal p + p,.legal p + .legal__list,.legal__list + p{margin-top:.6rem}
.legal__sub{margin-top:1.1rem !important;font-family:var(--serif-jp);font-size:.98rem !important;letter-spacing:.1em;color:var(--ink) !important}
.legal__sub:first-child{margin-top:0 !important}
.legal__list{display:grid;gap:.15rem;margin:.45rem 0 0}
.legal__list li{position:relative;padding-left:1.1em}
.legal__list li::before{content:"";position:absolute;left:.15em;top:.95em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.legal-table{border-top:1px solid var(--line)}
.legal-table > div{display:grid;gap:.35rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.legal-table dt{font-family:var(--serif-jp);font-size:.98rem;letter-spacing:.1em;line-height:1.8;color:var(--gold-text)}
@media (min-width:768px){ .legal-table > div{grid-template-columns:15em 1fr;gap:2rem;padding:1.6rem 0} }
.articles{border-top:1px solid var(--line)}
.article{padding:1.6rem 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 1rem)}
.article__title{display:flex;align-items:baseline;gap:1rem;margin-bottom:.7rem;font-family:var(--serif-jp);font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);letter-spacing:.1em;line-height:1.7}
.article__no{flex:none;font-family:var(--serif);font-size:1.3rem;line-height:1;color:var(--gold)}
@media (min-width:768px){ .article{display:grid;grid-template-columns:17em 1fr;gap:2rem;padding:1.9rem 0} .article__title{margin:0} }
.legal__date{margin-top:2.25rem;text-align:right;font-family:var(--label);font-size:var(--fs-note) !important;letter-spacing:.12em;color:var(--muted) !important}

/* ─── 文節での改行に未対応のブラウザ（iPhone の Safari など。js/home.js が .no-auto-phrase を付ける）───
   BudouX で文節の区切りに改行位置を入れている。行の長さをそろえる指定（balance / pretty）は Safari で
   中央ぞろえの文の幅を必要以上に狭くするため使わない */
.no-auto-phrase h1,.no-auto-phrase h2,.no-auto-phrase h3,.no-auto-phrase h4,
.no-auto-phrase p,.no-auto-phrase dd,.no-auto-phrase dt,.no-auto-phrase li,.no-auto-phrase figcaption{text-wrap:wrap}
.sline__sub{width:100%}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .hero__cue{animation:none;opacity:0}
  .sbg,.design__stage-box img{transition:none}
  .btn{transition:none}
  .btn--primary:active{transform:none}
  .work__img img{transition:none}
  .tlink--more::after{transition:none}
  .js .faq details[open] .faq__a{animation:none}
}

/* ── 色見本の拡大表示 ── */
.design__stage-box.is-swatch img,.swatch__img img[src*="panel-"],.gwork__img img,.pick__main img{cursor:zoom-in}
.zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--ground);color:var(--ink)}
.zoom::backdrop{background:rgba(33,26,20,.4)}
.zoom__scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:grid;place-items:center}
.zoom__img{display:block;width:100%;max-width:none;height:auto;cursor:zoom-in}
.zoom:not(.is-zoomed) .zoom__img{width:min(100%,92vh);margin:auto}
.zoom.is-zoomed .zoom__scroll{display:block}
.zoom.is-zoomed .zoom__img{cursor:zoom-out}
.zoom__close{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:rgba(252,251,249,.92);font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
.zoom__close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.zoom__hint{position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));text-align:center;font-size:var(--fs-note);letter-spacing:.08em;color:var(--muted);pointer-events:none}
.is-zoom-open,.is-zoom-open body{overflow:hidden}
.zoom.is-work .zoom__img{cursor:default}
.zoom.is-work .zoom__hint{display:none}

/* ════════════ PC レイアウト（960px 以上）════════════
   広い画面を生かす：コンテンツ幅を広げ、ヘッダー・Hero は画面の左右いっぱいに近い位置で配置する。
   スマホ・タブレット（959px 以下）は変更しない */
@media (min-width:960px){
  :root{
    --pc-side:clamp(2.5rem,5.5vw,7.5rem);           /* 画面の左右の余白（1440px で約 80px、上限 120px） */
    --gut:var(--pc-side);
    --fs-small:.95rem;                               /* 説明文：PC では 16〜17px */
  }
  /* ヘッダー：ロゴは左、メニューは中央、CTA は右 */
  .header__inner{max-width:none;padding-inline:var(--pc-side);display:grid;grid-template-columns:1fr auto 1fr;gap:2rem}
  .header__logo{justify-self:start}
  .nav{margin-inline:0;justify-self:center}
  .header__cta,.header__end{justify-self:end}
  /* Hero：コピーと CTA を左へ（右の作品写真と、左右に分かれた構図にする） */
  .hero__inner{max-width:none;margin-inline:0;padding-inline:var(--pc-side) 0}
  .hero__inner > *{max-width:min(46vw,40rem)}
  /* Customize：左の画像を正方形で大きく、右の項目は読みやすい幅に */
  .design{grid-template-columns:minmax(0,600px) minmax(0,1fr);column-gap:clamp(3rem,6vw,7rem)}
  .design__stage-box{aspect-ratio:1/1}
  .opt__thumb{width:96px;height:96px}
}
@media (min-width:1280px){ :root{--wrap:1280px} }
@media (min-width:1700px){ :root{--wrap:1400px} }