/* =============================================================
   TANAKA SANGYO — Rebirth / 脱皮
   Brand-renewal diagnosis site. Editorial minimal × foil reflection.
   無彩色ベース + 差し色1色(箔ブロンズ)。余白・静謐・上質。
   ============================================================= */

:root {
  /* --- monochrome base (paper × ink) --- */
  --paper:        #F4F1EA;   /* warm off-white */
  --paper-2:      #EBE6DC;   /* slightly deeper panel */
  --ink:          #14130F;   /* near-black, warm */
  --ink-2:        #3A372F;   /* secondary text */
  --ink-3:        #837C6B;   /* muted */
  --line:         rgba(20,19,15,0.14);
  --line-soft:    rgba(20,19,15,0.08);

  /* --- the single accent: 箔 / foil bronze --- */
  --foil:         #B5894F;
  --foil-deep:    #8A6634;
  --foil-light:   #E4C896;
  --foil-grad:    linear-gradient(115deg,#8A6634 0%,#E4C896 38%,#B5894F 60%,#F4E2BE 78%,#8A6634 100%);

  /* --- typography --- */
  --serif: "Shippori Mincho B1","Shippori Mincho",
           "Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:  "Inter","Helvetica Neue","Hiragino Kaku Gothic ProN",
           "Yu Gothic",system-ui,sans-serif;
  --num:   "Inter",system-ui,sans-serif;

  /* --- rhythm --- */
  --gutter: clamp(20px, 5vw, 88px);
  --maxw:   1280px;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.7,0,.3,1);
}

/* dark stage — 真っ黒を避け、温かいエスプレッソで高級感を出す */
.stage-dark {
  --paper:   #1A140C;
  --paper-2: #251D11;
  --ink:     #F4EFE3;
  --ink-2:   #CFC7B5;
  --ink-3:   #978F7B;
  --line:    rgba(244,239,227,0.16);
  --line-soft: rgba(244,239,227,0.08);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .01em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .8s var(--ease), color .8s var(--ease);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--foil); color: #0F0E0C; }

/* ---------- type scale ---------- */
.display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: .005em;
  font-size: clamp(2.6rem, 8.2vw, 7.2rem);
}
.h1 { font-family: var(--serif); font-weight:600; line-height:1.12;
      font-size: clamp(2rem, 5vw, 3.6rem); }
.h2 { font-family: var(--serif); font-weight:600; line-height:1.2;
      font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.h3 { font-family: var(--serif); font-weight:600; line-height:1.3;
      font-size: clamp(1.15rem, 2vw, 1.5rem); }
.lead { font-size: clamp(1.02rem,1.5vw,1.25rem); color: var(--ink-2); line-height:1.9; }
.small { font-size: .82rem; color: var(--ink-3); letter-spacing:.02em; }
.num { font-family: var(--num); font-feature-settings:"tnum" 1; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .9em;
}
.eyebrow::before {
  content:""; width: 38px; height:1px; background: var(--foil);
  display:inline-block;
}

.foil-text {
  background: var(--foil-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: foilshift 7s linear infinite;
}
@keyframes foilshift { to { background-position: 200% 0; } }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 12vh, 168px) 0; position: relative; }
.divider { height:1px; background: var(--line); margin: 0 var(--gutter); }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--gutter);
  mix-blend-mode: difference; color:#fff;
  pointer-events: none;
}
.site-head a, .site-head button { pointer-events: auto; }
.brand-mark { font-family: var(--serif); font-weight:600; font-size:1.05rem;
  letter-spacing:.04em; }
.brand-mark small { display:block; font-family:var(--sans); font-size:.58rem;
  letter-spacing:.34em; opacity:.7; font-weight:600; }
.nav-cta {
  font-size:.78rem; letter-spacing:.14em; font-weight:600;
  border:1px solid rgba(255,255,255,.5); border-radius:100px;
  padding:.6em 1.4em; transition: .4s var(--ease);
}
.nav-cta:hover { background:#fff; color:#000; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:.92rem;
  letter-spacing:.04em;
  background:var(--bg); color:var(--fg);
  border:none; border-radius:100px; cursor:pointer;
  padding:1.05em 2.1em;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;
  position:relative; overflow:hidden;
}
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,19,15,.22); }
.btn:hover .arrow { transform: translateX(5px); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-foil { --bg: transparent; --fg: var(--ink); border:1px solid var(--foil); }
.btn-foil::before {
  content:""; position:absolute; inset:0; background:var(--foil-grad);
  background-size:200% 100%; opacity:0; transition:opacity .5s; z-index:-0;
}
.btn-foil span { position:relative; z-index:1; }
.btn-foil:hover { color:#0F0E0C; }
.btn-foil:hover::before { opacity:1; animation:foilshift 4s linear infinite; }
.btn-ghost { --bg:transparent; --fg:var(--ink); border:1px solid var(--line); }
.btn-lg { padding:1.25em 2.6em; font-size:1rem; }

/* ---------- reveal-on-scroll ---------- */
.rv { opacity:0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity:1; transform:none; }
.rv.d1 { transition-delay:.08s; } .rv.d2 { transition-delay:.16s; }
.rv.d3 { transition-delay:.24s; } .rv.d4 { transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important; scroll-behavior:auto!important}
}

/* =============================================================
   HERO — rebirth signature
   ============================================================= */
.hero {
  min-height: 100svh; position: relative; display:flex; align-items:flex-end;
  padding-bottom: clamp(48px,9vh,120px);
  /* 明るめ×高級感：シャンパン〜サンドの暖色グラデ。真っ黒を脱し、上質な光。 */
  background:
    radial-gradient(120% 82% at 74% 10%, #FCFAF5 0%, #F2ECDF 46%, #E9E1CF 100%);
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 3; width:100%; }
#rebirth-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; display:block;
}
.hero-veil { position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(120% 90% at 50% 18%, transparent 40%, rgba(244,241,234,.0) 60%, rgba(244,241,234,.55) 100%); }
.hero-copy { max-width: min(680px, 92vw); }
.hero .display { max-width: 12ch; }
.hero .display .line { display:block; overflow:hidden; }
.hero .display .line > span { display:block; transform: translateY(110%);
  animation: rise 1.1s var(--ease) forwards; }
.hero .display .line:nth-child(2) > span { animation-delay:.12s; }
.hero .display .line:nth-child(3) > span { animation-delay:.24s; }
@keyframes rise { to { transform: translateY(0); } }
.hero-sub { margin-top: 1.8rem; max-width: 38ch; opacity:0; animation: fadein 1s ease .6s forwards; }
.hero-actions { margin-top: 2.4rem; display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; animation: fadein 1s ease .8s forwards; }
@keyframes fadein { to { opacity:1; } }
.scroll-hint { position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:4; font-size:.62rem; letter-spacing:.3em; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-hint .bar { width:1px; height:46px; background:linear-gradient(var(--foil),transparent);
  animation: drop 2.2s var(--ease-io) infinite; transform-origin:top; }
@keyframes drop { 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* =============================================================
   shared content blocks
   ============================================================= */
.kicker-row { display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap; margin-bottom: clamp(36px,6vh,72px); }
.kicker-row .h2 { max-width: 20ch; }

/* promise / manifesto */
.manifesto .h1 { max-width: 22ch; }
.manifesto .h1 em { font-style: normal; }

/* 3 industries grid */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--line); border:1px solid var(--line); }
.card {
  background: var(--paper); padding: clamp(28px,4vw,52px);
  min-height: 380px; display:flex; flex-direction:column;
  justify-content:space-between; position:relative; overflow:hidden;
  transition: background .6s var(--ease);
}
.card:hover { background: var(--paper-2); }
.card .idx { font-family:var(--num); font-size:.8rem; color:var(--foil); letter-spacing:.1em; }
.card .h3 { margin: 1.2rem 0 .6rem; }
.card .tag { font-size:.75rem; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase; }
.card .figure { position:absolute; right:-10%; bottom:-10%; width:55%; opacity:.16;
  transition: transform .8s var(--ease), opacity .6s; pointer-events:none; }
.card:hover .figure { transform: scale(1.08) rotate(-3deg); opacity:.26; }

/* before/after strip */
.ba { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,40px); align-items:center; }
.ba figure { position:relative; border:1px solid var(--line); background:var(--paper-2);
  aspect-ratio: 4/5; overflow:hidden; }
.ba figure figcaption { position:absolute; top:14px; left:14px; font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
  background:var(--paper); padding:.35em .8em; border:1px solid var(--line); }
.ba .after figcaption { color:#0F0E0C; background:var(--foil-light); border-color:transparent; }
.ba canvas, .ba img { width:100%; height:100%; object-fit:cover; }

/* process steps */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,48px); }
.step .n { font-family:var(--num); font-size:.8rem; color:var(--foil); letter-spacing:.2em; }
.step .h3 { margin:.8rem 0 .5rem; }
.step .rule { height:1px; background:var(--line); margin-bottom:1.4rem; position:relative; }
.step .rule::after { content:""; position:absolute; left:0; top:0; height:1px; width:30%;
  background:var(--foil); }

/* CTA band */
.cta-band { text-align:center; }
.cta-band .display { max-width: 16ch; margin: 0 auto 1.6rem; }

/* footer */
.foot { padding: clamp(48px,8vh,96px) 0 36px; border-top:1px solid var(--line); }
.foot-grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap:2rem; align-items:start; }
.foot .brand-mark { color: var(--ink); }
.foot a.link { color:var(--ink-2); display:block; padding:.3em 0; font-size:.9rem;
  transition: color .3s; }
.foot a.link:hover { color: var(--foil-deep); }
.foot-base { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top: clamp(40px,6vh,72px); padding-top:24px; border-top:1px solid var(--line-soft); }

/* =============================================================
   DIAGNOSIS — 1 question / 1 screen
   ============================================================= */
.dx-shell { min-height:100svh; display:flex; flex-direction:column; position:relative; }
.dx-progress { position:fixed; inset:0 0 auto 0; height:3px; z-index:70; background:transparent; }
.dx-progress .fill { height:100%; width:0; background:var(--foil-grad); background-size:200% 100%;
  transition: width .7s var(--ease); }
.dx-top { display:flex; justify-content:space-between; align-items:center;
  padding: 20px var(--gutter); z-index:50; }
.dx-step-label { font-size:.72rem; letter-spacing:.28em; color:var(--ink-3); }
.dx-stage { flex:1; display:grid; place-items:center; padding: 24px var(--gutter) 64px; }
.dx-q { width:100%; max-width: 760px; }
.dx-q .qnum { font-family:var(--num); color:var(--foil); letter-spacing:.2em; font-size:.85rem; }
.dx-q .qtitle { margin:.7rem 0 .4rem; }
.dx-q .qhelp { color:var(--ink-3); margin-bottom: 2.2rem; }
.opts { display:grid; gap: .8rem; }
.opt {
  text-align:left; width:100%; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding: 1.15em 1.4em; font-size:1.02rem; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s;
}
.opt:hover { border-color: var(--foil); transform: translateX(4px); }
.opt.sel { border-color: var(--foil); background: var(--paper-2); }
.opt .mark { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line);
  flex:none; position:relative; transition:.3s; }
.opt.sel .mark { border-color:var(--foil); background:var(--foil); box-shadow: inset 0 0 0 3px var(--paper-2); }
.opt small { display:block; color:var(--ink-3); font-size:.78rem; margin-top:.2em; }
.dx-nav { display:flex; justify-content:space-between; align-items:center; margin-top:2.4rem; gap:1rem; }
.dx-anim { animation: qin .6s var(--ease); }
@keyframes qin { from { opacity:0; transform: translateY(18px); } }

/* upload step */
.upload-zone {
  border:1.5px dashed var(--line); border-radius:18px; padding: clamp(28px,5vw,56px);
  text-align:center; cursor:pointer; transition: border-color .4s, background .4s;
  background: var(--paper);
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--foil); background: var(--paper-2); }
.upload-zone .ic { width:44px; height:44px; margin:0 auto 1rem; color:var(--foil); }
.preview-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-top:1.6rem; align-items:start; }
.preview-grid figure { border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--paper-2); position:relative; aspect-ratio:4/5; }
.preview-grid figcaption { position:absolute; top:10px; left:10px; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; background:var(--paper); color:var(--ink-3);
  padding:.3em .7em; border:1px solid var(--line); border-radius:100px; }
.preview-grid .after figcaption { background:var(--foil-light); color:#0F0E0C; border-color:transparent; }
.preview-grid canvas, .preview-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.tone-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.tone-chip { font-size:.74rem; border:1px solid var(--line); border-radius:100px;
  padding:.4em 1em; cursor:pointer; transition:.3s; color:var(--ink-2); background:var(--paper); }
.tone-chip.on { border-color:var(--foil); background:var(--foil-light); color:#0F0E0C; }
.note { font-size:.78rem; color:var(--ink-3); margin-top:.9rem; line-height:1.7; }
.note b { color:var(--ink-2); }

/* =============================================================
   RESULT
   ============================================================= */
.result-hero { padding-top: clamp(96px,16vh,180px); }
.grade-badge { display:inline-flex; align-items:center; gap:.6em; font-family:var(--num);
  font-weight:700; letter-spacing:.1em; font-size:.78rem; padding:.5em 1.1em;
  border-radius:100px; border:1px solid var(--foil); color:var(--foil-deep); }
.dir-list { display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; margin-top:1.4rem; }
.dir-list .row { background:var(--paper); padding:1.2em 1.4em; display:flex; gap:1rem; }
.dir-list .row .k { color:var(--foil); font-family:var(--num); font-size:.85rem; flex:none; width:2.2rem; }
.insight { border-left:3px solid var(--foil); padding:1rem 1.4rem; background:var(--paper-2);
  border-radius:0 12px 12px 0; margin-top:1.6rem; }

/* lead form (NO <form> element) */
.lead { max-width: 620px; }
.field { margin-bottom: 1.2rem; }
.field label { display:block; font-size:.8rem; letter-spacing:.04em; color:var(--ink-2); margin-bottom:.5rem; }
.field label .req { color:var(--foil-deep); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url] {
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding: .95em 1.1em; transition: border-color .3s; }
.field input:focus { outline:none; border-color:var(--foil); }
.consent { display:flex; gap:.8rem; align-items:flex-start; background:var(--paper-2);
  border:1px solid var(--line); border-radius:14px; padding:1.1em 1.2em; margin:1rem 0 1.4rem; }
.consent input { margin-top:.25em; width:18px; height:18px; accent-color: var(--foil-deep); flex:none; }
.consent .txt { font-size:.84rem; color:var(--ink-2); line-height:1.7; }
.consent .txt a { color:var(--foil-deep); text-decoration:underline; }
.send-state { font-size:.85rem; margin-top:1rem; min-height:1.4em; }
.send-state.ok { color:var(--foil-deep); }
.send-state.err { color:#B23A2E; }

/* thanks */
.thanks { min-height:100svh; display:grid; place-items:center; text-align:center; padding: var(--gutter); }
.qr-card { display:inline-flex; flex-direction:column; align-items:center; gap:1rem;
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding: clamp(24px,4vw,40px); margin-top:2rem; }
.qr-card canvas { image-rendering: pixelated; border-radius:8px; background:#fff; padding:10px; }

/* =============================================================
   responsive
   ============================================================= */
@media (max-width: 880px){
  .cards, .steps { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap:1.4rem; }
  .preview-grid { grid-template-columns: 1fr; }
  .site-head { padding:14px var(--gutter); }
}
@media (max-width: 560px){
  .hero-actions { flex-direction:column; align-items:stretch; }
  .btn { justify-content:center; }
  .dx-nav { flex-direction:column-reverse; }
  .dx-nav .btn { width:100%; justify-content:center; }
}

/* utility */
.mt-s{margin-top:.6rem}.mt-m{margin-top:1.4rem}.mt-l{margin-top:2.4rem}
.center{text-align:center}.hidden{display:none!important}
.maxw-60{max-width:60ch}.maxw-44{max-width:44ch}
.flex{display:flex}.gap-1{gap:1rem}.wrap-w{flex-wrap:wrap}

/* =============================================================
   v2 LUXURY LAYER — JAPAN WRAPPING PROJECT
   金・銀の光物 × 写真 × 独自フォント。黒への変化を廃し全頁を明るい高級トーンへ。
   ============================================================= */
:root{
  /* 独自フォント：高コントラスト・セリフ(Cormorant)＝モード誌の格 */
  --display: "Cormorant Garamond","Shippori Mincho B1",Georgia,serif;
  /* 金 */
  --gold:        #C8A256;
  --gold-deep:   #8A6A2C;
  --gold-grad:   linear-gradient(115deg,#8A6A2C 0%,#E8C97E 28%,#FFF6DA 46%,#CFA94E 64%,#8A6A2C 100%);
  /* 銀／プラチナ */
  --silver:      #AEB3BA;
  --silver-grad: linear-gradient(115deg,#7E848C 0%,#C7CCD3 30%,#FFFFFF 48%,#B7BCC4 66%,#7E848C 100%);
  /* 金×銀デュオ（光物の主役） */
  --duo-grad:    linear-gradient(115deg,#8A6A2C 0%,#E8C97E 24%,#FFF6DA 40%,#C7CCD3 58%,#9AA0A8 74%,#8A6A2C 100%);
}

/* --- タイポ：独自性を出す --- */
body{ letter-spacing:.012em; }
.eyebrow{
  font-family:var(--display);
  font-style:normal; font-weight:600;
  font-size:.92rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow::before{ width:42px; background:var(--gold-grad); height:1.5px; }
.brand-mark{ font-family:var(--display); font-weight:600; letter-spacing:.12em; }
.brand-mark small{ letter-spacing:.26em; }
.nav-cta{ font-family:var(--sans); }
/* 大見出しのラテン語/英字は Cormorant、和文は明朝のまま */
.display, .h1, .h2, .h3{ font-feature-settings:"palt" 1; }

/* --- 光物テキスト --- */
.foil-text{ background:var(--gold-grad); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.silver-text{ background:var(--silver-grad); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foilshift 8s linear infinite; }
.duo-text{ background:var(--duo-grad); background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foilshift 9s linear infinite; }

/* --- 番号・ラベルを金箔に --- */
.card .idx, .step .n, .dx-q .qnum, .grade-badge, .dir-list .row .k{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:700;
}
.eyebrow{ position:relative; }

/* --- ディバイダ：金属ヘアライン --- */
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--silver) 50%,var(--gold) 82%,transparent);
  opacity:.5; }

/* --- カード：金の縁取りとリッチなホバー --- */
.cards{ background:linear-gradient(120deg,var(--gold),var(--silver)); }
.card{ position:relative; }
.card::after{ content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--gold-grad); transition:width .6s var(--ease); }
.card:hover::after{ width:100%; }
.card .tag{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* --- ボタン：金属の格 --- */
.btn-foil{ border-color:transparent; box-shadow:0 0 0 1.5px var(--gold) inset; }
.btn-foil::before{ background:var(--gold-grad); }
.btn-gold{ --bg:transparent; --fg:#2a2008; border:none; box-shadow:0 0 0 1.5px var(--gold) inset; position:relative; overflow:hidden; }
.btn-gold span{ position:relative; z-index:1; }
.btn-gold::before{ content:""; position:absolute; inset:0; background:var(--gold-grad); background-size:200% 100%; opacity:.0; transition:opacity .5s; }
.btn-gold:hover::before{ opacity:1; animation:foilshift 4s linear infinite; }
.btn-gold:hover{ color:#221a06; }
.btn:not(.btn-foil):not(.btn-ghost):not(.btn-gold){ box-shadow:0 0 0 1px rgba(200,162,86,.0); }
.btn:not(.btn-foil):not(.btn-ghost):not(.btn-gold):hover{ box-shadow:0 14px 34px rgba(20,19,15,.22), 0 0 0 1px var(--gold); }

/* --- 黒への変化を廃止：CTAバンドを明るい金属バンドへ --- */
.cta-band{ background:
   radial-gradient(120% 120% at 50% 0%, #FFFDF8 0%, #F3ECDC 55%, #EDE3CE 100%) !important; }
.cta-band::before{ content:""; position:absolute; inset:0; pointer-events:none;
   background:radial-gradient(60% 50% at 50% 40%, rgba(200,162,86,.10), transparent 70%); }
.cta-band .wrap{ position:relative; z-index:1; }
.cta-band .display{ color:var(--ink); }

/* --- 診断ページも明るい高級トーン（黒廃止） --- */
body.dx-light{ background:
   radial-gradient(120% 80% at 80% 0%, #FBF8F1 0%, #F1EBDD 60%, #E9E1CF 100%); }
body.dx-light .opt{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset; }

/* --- セクション間の金ヘアライン装飾 --- */
.section{ position:relative; }

/* =============================================================
   写真スロット（images.css と連携。差し替え式・graceful fallback）
   ============================================================= */
.photo{ position:relative; overflow:hidden; background:#e8e0cd; }
.photo > img, .photo > .ph{ width:100%; height:100%; object-fit:cover; display:block; }
.photo .ph{ background-size:cover; background-position:center; }
.photo .veil{ position:absolute; inset:0; }
.photo .cap{ position:absolute; left:18px; bottom:16px; z-index:2; color:#fff;
  font-family:var(--display); letter-spacing:.16em; text-transform:uppercase; font-size:.8rem;
  text-shadow:0 1px 8px rgba(0,0,0,.4); }
.photo .cap small{ display:block; font-family:var(--sans); letter-spacing:.04em; text-transform:none;
  font-size:.74rem; opacity:.85; margin-top:.2em; }

/* industry カードに写真背景 */
.card.has-photo{ color:#fff; min-height:440px; isolation:isolate; }
.card.has-photo .ph{ position:absolute; inset:0; z-index:-2; transition:transform 1.1s var(--ease); }
.card.has-photo:hover .ph{ transform:scale(1.06); }
.card.has-photo::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,16,10,.15) 0%, rgba(20,16,10,.62) 78%); }
.card.has-photo .small{ color:rgba(255,255,255,.82); }
.card.has-photo .h3{ color:#fff; }
.card.has-photo .idx{ -webkit-text-fill-color:transparent; }

/* 大判エディトリアル写真バンド */
.editorial{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,64px); align-items:center; }
.editorial .photo{ aspect-ratio:4/5; border-radius:4px; }
.editorial .photo .veil{ background:linear-gradient(120deg, rgba(138,106,44,.18), rgba(120,132,140,.10)); }
@media (max-width:880px){ .editorial{ grid-template-columns:1fr; } }

/* CTA に写真の薄敷き（任意） */
.cta-photo .ph{ position:absolute; inset:0; opacity:.16; z-index:0; filter:grayscale(.2); }

/* デザイン例（サンプル）グリッド */
.bag-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px); }
.bag{ position:relative; background:linear-gradient(160deg,#f6f2ea,#efe7d8); border-radius:6px; overflow:hidden;
  box-shadow:0 10px 30px rgba(20,16,10,.07); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  border:1px solid rgba(200,162,86,.18); }
.sample-tag{ position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--sans); font-size:.58rem; font-weight:600; letter-spacing:.16em; color:#fff;
  background:rgba(20,16,10,.5); padding:.4em .8em; border-radius:100px; backdrop-filter:blur(2px); }

/* --- スクロール時のヘッダー：すりガラス背景で“文字被り”を解消 --- */
.site-head{ transition: background .4s var(--ease), box-shadow .4s, color .4s; }
.site-head.scrolled{
  mix-blend-mode:normal; color:var(--ink);
  background:rgba(247,243,235,.88);
  -webkit-backdrop-filter:saturate(1.1) blur(12px); backdrop-filter:saturate(1.1) blur(12px);
  box-shadow:0 1px 0 var(--line), 0 8px 24px rgba(20,16,10,.05);
}
.site-head.scrolled .brand-mark{ color:var(--ink); }
.site-head.scrolled .nav-cta{ border-color:var(--line); color:var(--ink); }
.site-head.scrolled .nav-cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.bag img{ width:100%; aspect-ratio:4/5; object-fit:contain; display:block; padding:7% 7% 5%; }
.bag figcaption{ padding:.6em 1em .9em; font-size:.8rem; letter-spacing:.05em; color:var(--ink-2);
  border-top:1px solid var(--line-soft); display:flex; flex-direction:column; align-items:flex-start; gap:.15em; }
.bag figcaption b{ font-family:var(--display); font-weight:600; color:var(--ink); letter-spacing:.02em; }
.bag figcaption .mk{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bag:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(20,16,10,.15); }
@media (max-width:880px){ .bag-grid{ grid-template-columns:repeat(2,1fr); } }

/* 診断：複数アップロードのサムネイル */
.upload-thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.7rem; margin-top:1.2rem; }
.upload-thumbs.has{ margin-top:1.4rem; }
.u-thumb{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:var(--paper-2); box-shadow:0 4px 14px rgba(20,16,10,.06); }
.u-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.u-del{ position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(20,16,10,.62); color:#fff; font-size:14px; line-height:1; cursor:pointer; }
.u-del:hover{ background:rgba(20,16,10,.85); }

/* 診断Q2：選択に応じた実物デザイン例プレビュー（旧・未使用でも残置） */
.want-preview{ margin-top:1.8rem; opacity:0; transform:translateY(12px); transition:.6s var(--ease); }
.want-preview.show{ opacity:1; transform:none; }
.wp-card{ position:relative; display:inline-block; max-width:300px;
  background:linear-gradient(160deg,#f6f2ea,#efe7d8); border:1px solid rgba(200,162,86,.22);
  border-radius:8px; padding:14px; box-shadow:0 14px 34px rgba(20,16,10,.10); }
.wp-card img{ width:100%; border-radius:4px; display:block; }
.wp-card figcaption{ margin-top:.6em; font-size:.84rem; color:var(--ink-2); }
.wp-card figcaption b{ font-family:var(--display); color:var(--ink); font-weight:600; }

/* 結果：お預かりした現物サムネイル */
.uploaded-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.8rem; margin-top:1rem; }
.uploaded-grid figure{ aspect-ratio:1/1; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:var(--paper-2); box-shadow:0 4px 14px rgba(20,16,10,.06); }
.uploaded-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.uploaded-empty{ border:1.5px dashed var(--line); border-radius:14px; padding:1.4em; color:var(--ink-3);
  font-size:.9rem; margin-top:1rem; }
.uploaded-empty a{ color:var(--foil-deep); text-decoration:underline; }

/* 結果：あなたに向いている実物デザイン例（旧・未使用） */
.rec-bags{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,18px); margin-top:1rem; }
.rbag{ position:relative; background:linear-gradient(160deg,#f6f2ea,#efe7d8); border-radius:6px; overflow:hidden;
  border:1px solid rgba(200,162,86,.18); box-shadow:0 8px 24px rgba(20,16,10,.06); }
.rbag img{ width:100%; aspect-ratio:4/5; object-fit:contain; display:block; padding:7% 7% 5%; }
.rbag figcaption{ padding:.5em .9em .8em; font-size:.76rem; color:var(--ink-2); border-top:1px solid var(--line-soft); }
.rbag.primary{ border-color:var(--gold); box-shadow:0 12px 30px rgba(200,162,86,.18); }
@media (max-width:680px){ .rec-bags{ grid-template-columns:1fr 1fr; } }

@media (prefers-reduced-motion: reduce){
  .silver-text,.duo-text{ animation:none; }
}

/* =============================================================
   HERO v4 — 実物ショッパー写真が切り替わる。右で solid、左半分まで半透過。
   ============================================================= */
.hero{ position:relative; display:flex; align-items:center; padding:0; min-height:100svh; overflow:hidden;
  background:radial-gradient(120% 95% at 14% 32%, #FCFAF5 0%, #F1EBDD 55%, #E7DECB 100%); }
.hero .hero-veil{ display:none; }
/* 写真：右72%に置き、左へ向けて半透過→透明にマスク（コピー側へにじむ） */
.hero-gallery{ position:absolute; top:0; right:0; bottom:0; width:74%; z-index:1;
  background:linear-gradient(160deg,#f4efe5 0%,#ece4d4 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 18%, rgba(0,0,0,.7) 36%, #000 52%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 18%, rgba(0,0,0,.7) 36%, #000 52%); }
/* 引き：ショッパー全体＋持ち手まで必ず見せる（contain） */
.hg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
  padding: clamp(28px,5vh,72px) clamp(10px,3vw,48px) clamp(28px,5vh,72px) clamp(40px,12vw,180px);
  opacity:0; transition:opacity 1.4s var(--ease); will-change:opacity; }
/* 拡大演出は持ち手が切れるため廃止。クロスフェードのみ（全体像を常に保つ） */
.hg.on{ opacity:1; }
/* 左のコピーを読みやすく：シャンパンのスクリム（写真の上・テキストの下） */
.hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, #F6F2EA 0%, #F6F2EA 30%, rgba(246,242,234,.82) 48%, rgba(246,242,234,.30) 62%, rgba(246,242,234,0) 76%); }
.hero .wrap{ position:relative; z-index:3; width:100%; }
.hero-copy{ max-width:min(560px,52vw);
  padding: clamp(104px,13vh,156px) 0 clamp(60px,9vh,104px); }
.hero-copy .display{ font-size:clamp(2.1rem,4.8vw,5rem); max-width:none; }
/* 見出しは語中で折らない（分節は手動 .line で改行） */
.hero .display .line{ white-space:nowrap; }
.hero-copy .hero-sub{ max-width:38ch; }
.hero-cap{ position:absolute; right:20px; bottom:46px; z-index:4; color:#fff;
  font-family:var(--display); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5); display:flex; align-items:center; gap:.7em; }
.hero-cap b{ font-family:var(--sans); font-weight:600; letter-spacing:.04em; text-transform:none; font-size:.78rem; }
.hero-dots{ position:absolute; right:20px; bottom:20px; z-index:4; display:flex; gap:7px; }
.hero-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55); transition:.4s; }
.hero-dots i.on{ background:var(--gold); width:18px; border-radius:4px; }

/* --- 日本語の改行を美しく：禁則＋行バランス＋孤立防止 --- */
.display,.h1,.h2,.h3,.qtitle{ line-break:strict; text-wrap:balance; }
.lead,.small,.qhelp,.note,p{ line-break:strict; text-wrap:pretty; }
/* 分節（文節）を語中で折らないための単位。phrase 単位でのみ改行させる */
.nbp{ display:inline-block; white-space:nowrap; }
/* 編集セクションの見出しは2カラムの狭い側に入るため、文節を分け・サイズを抑える */
.editorial .h2{ font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.35; }

@media (max-width:880px){
  .hero{ display:block; min-height:auto; }
  .hero-gallery{ position:relative; width:100%; height:48svh; min-height:320px;
    -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 62%, transparent 100%); }
  .hg{ object-position:center 42%; }
  .hero-scrim{ display:none; }
  .hero-copy{ max-width:none; padding: clamp(20px,4vh,36px) 0 clamp(40px,7vh,64px); }
  .hero-copy .display{ max-width:none; }
  .hero-cap{ display:none; }            /* ヘッダーロゴとの被りを回避 */
  .hero-dots{ top:calc(48svh - 28px); bottom:auto; right:16px; }
  .scroll-hint{ display:none; }
}

/* =============================================================
   v3 BRAND DEPTH — 単調さを脱し「藍 × 金」の和の格を出す
   ============================================================= */
:root{ --indigo:#23426a; --indigo-deep:#16293f; --indigo-soft:#eef1f6; }

/* 和紙の地紋（極薄グレイン）を全面に重ね、平板さを消す */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 差し色＝藍。アイブロウを藍にして金ラインと対比（和の二色構成） */
.eyebrow{ color:var(--indigo); }
.eyebrow::before{ background:var(--gold-grad); }
.foil-text, .duo-text{ } /* 金/デュオはそのまま */

/* ディバイダを藍×金のヘアラインへ */
.divider{ background:linear-gradient(90deg,transparent,var(--indigo) 26%,var(--gold) 50%,var(--indigo) 74%,transparent); opacity:.45; }

/* セクションに微かな段差（交互の極淡トーン）でリズムを作る */
.section.manifesto{ background:linear-gradient(180deg, var(--indigo-soft) 0%, transparent 60%); }

/* フッターを藍の帯にして“締め”を作る（ページ末＝定番で安全な濃色） */
.foot{ background:linear-gradient(180deg,#22426a 0%,#16293f 100%); color:rgba(238,233,221,.82);
  border-top:none; box-shadow:inset 0 3px 0 0 var(--gold); }
.foot .brand-mark{ color:#fff !important; }
.foot .brand-mark small{ color:rgba(238,233,221,.6) !important; }
.foot .small{ color:rgba(238,233,221,.72) !important; }
.foot a.link{ color:rgba(238,233,221,.82); }
.foot a.link:hover{ color:#E8C97E; }
.foot .foot-base{ border-top-color:rgba(238,233,221,.18); }
.foot [style*="color:var(--ink)"]{ color:#fff !important; }

/* 写真の“白カット”感を解消＝意図的な額装に（額の中の作品として見せる） */
.hero-gallery{ background:linear-gradient(160deg,#f3f0e8 0%,#ebe6da 100%) !important; }
.bag{ background:#fcfaf5; border:1px solid rgba(35,66,106,.14); }
.bag img{ background:#fcfaf5; }
.bag figcaption{ border-top-color:rgba(35,66,106,.10); }
.uploaded-grid figure, .wp-card{ border-color:rgba(35,66,106,.16); }

/* ボタン主役を少し格上げ（艶のある濃色＋金縁のホバー） */
.btn:not(.btn-foil):not(.btn-ghost):not(.btn-gold){ background:linear-gradient(180deg,#23211b,#14130f); }

/* 診断ページ：ショッパーの透かし背景（選択タブ・設問は手前で可読） */
body.dx-light{ background:#f3eee4; }
body.dx-light::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("../img/dx-bg.jpg?v=2") center center / cover no-repeat;
  opacity:.9;
}
/* 中央のコピー帯だけ僅かに白を敷いて可読性を担保（設問・選択肢の背後） */
.dx-stage .dx-q{ position:relative; }
.dx-stage .dx-q::before{
  content:""; position:absolute; inset:-24px -28px; z-index:-1; border-radius:24px;
  background:radial-gradient(120% 100% at 50% 30%, rgba(246,242,234,.92) 0%, rgba(246,242,234,.78) 55%, rgba(246,242,234,0) 100%);
}

/* 複数選択：その他の自由記入＋チェック風マーク */
.other-input{ width:100%; margin-top:.7rem; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.85em 1.1em; }
.other-input:focus{ outline:none; border-color:var(--gold); }
.opt .mark-check{ border-radius:5px; }