/* =========================================================
   renove — 住宅リノベーション（横浜）
   配色A「経年の温度」: 温グレージュ × 墨 × 真鍮古色
   Base: CRAFT 翻案（写真主役 × 感情コピー × モノクロ温かみ）
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* color — 案A 経年の温度 */
  --bg:            #ECE6DB;   /* 温グレージュ base */
  --bg-warm:       #E4DCCD;   /* 一段温かいパネル */
  --bg-card:       #F5F1E8;   /* near-white カード */
  --ink:           #23201C;   /* 墨 */
  --ink-soft:      #524C42;   /* 二次テキスト */
  --ink-faint:     #8B8171;   /* 補助・キャプション */
  --line:          #D6CBB8;   /* ヘアライン */
  --line-soft:     #E1D9C9;
  --brass:         #9A7B4F;   /* 真鍮古色 accent */
  --brass-deep:    #7E6238;   /* hover */
  --brass-soft:    #B79A६E;   /* 使わない予備 */
  --dark:          #24211C;   /* ダーク面（フッター等） */
  --dark-2:        #2E2A24;
  --on-dark:       #EDE7DB;
  --on-dark-soft:  #B7AE9C;

  /* typography */
  --f-mincho: "Zen Old Mincho","Shippori Mincho B1",-apple-system,"Hiragino Mincho ProN",serif;
  --f-gothic: "Zen Kaku Gothic New","Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --f-mono:   "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-latin:  "Cormorant Garamond",serif;

  /* fluid scale */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(0.94rem, 0.90rem + 0.2vw, 1.02rem);
  --step-1:  clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5:  clamp(2.6rem, 1.8rem + 3.9vw, 5.2rem);

  /* space */
  --sp-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --maxw: 1280px;
  --maxw-narrow: 940px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur: .7s;

  --radius: 2px;
  --header-h: 78px;
}

/* fix a stray glitch char safety (brass-soft overwritten) */
:root{ --brass-soft:#B79A6E; }

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--f-gothic);
  font-size:var(--step-0);
  line-height:1.9;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-break:strict;                 /* 行頭禁則 */
  overflow-wrap:break-word;
  font-feature-settings:"palt";
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-weight:600; line-height:1.32; letter-spacing:.02em; line-break:strict; }
::selection{ background:var(--brass); color:#fff; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--sp-section); }
.section--tight{ padding-block:clamp(3rem,2rem+4vw,6rem); }
.bg-warm{ background:var(--bg-warm); }
.bg-card{ background:var(--bg-card); }
.bg-dark{ background:var(--dark); color:var(--on-dark); }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--step--1);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
  display:inline-flex; align-items:center; gap:.9em;
}
.eyebrow::before{
  content:""; width:2.4em; height:1px; background:var(--brass); opacity:.7;
}
.eyebrow.is-plain::before{ display:none; }
.sec-num{
  font-family:var(--f-latin);
  font-size:var(--step-2);
  font-style:italic;
  color:var(--brass);
  line-height:1;
}
.display{
  font-family:var(--f-mincho);
  font-weight:600;
  line-height:1.28;
  letter-spacing:.04em;
}
.h-xl{ font-family:var(--f-mincho); font-size:var(--step-5); font-weight:600; line-height:1.2; letter-spacing:.05em; }
.h-lg{ font-family:var(--f-mincho); font-size:var(--step-4); font-weight:600; line-height:1.26; letter-spacing:.045em; }
.h-md{ font-family:var(--f-mincho); font-size:var(--step-3); font-weight:600; line-height:1.34; letter-spacing:.04em; }
.h-sm{ font-family:var(--f-mincho); font-size:var(--step-2); font-weight:600; line-height:1.4; letter-spacing:.03em; }
.lead{ font-size:var(--step-1); line-height:2.05; color:var(--ink-soft); font-weight:400; }
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.latin{ font-family:var(--f-latin); font-style:italic; }
.mono{ font-family:var(--f-mono); letter-spacing:.05em; }

/* section heading block */
.sec-head{ display:flex; flex-direction:column; gap:1.1rem; max-width:52ch; }
.sec-head .eyebrow{ margin-bottom:.2rem; }
.sec-head.center{ margin-inline:auto; align-items:center; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  --bx:1.9em; --by:1.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:.8em;
  font-family:var(--f-gothic); font-size:var(--step--1); font-weight:500;
  letter-spacing:.14em; line-height:1;
  padding:var(--by) var(--bx);
  border:1px solid var(--ink); color:var(--ink);
  background:transparent; border-radius:var(--radius);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .4s var(--ease);
  position:relative; overflow:hidden;
}
.btn .ar{ transition:transform .5s var(--ease); }
.btn:hover .ar{ transform:translateX(.35em); }
.btn:hover{ background:var(--ink); color:var(--bg); }
.btn--primary{ background:var(--brass); border-color:var(--brass); color:#fff; }
.btn--primary:hover{ background:var(--brass-deep); border-color:var(--brass-deep); color:#fff; }
.btn--ghost-light{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--block{ width:100%; }
.link-more{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-mono); font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:.35em;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.link-more .ar{ color:var(--brass); transition:transform .5s var(--ease); }
.link-more:hover{ color:var(--brass); border-color:var(--brass); }
.link-more:hover .ar{ transform:translateX(.4em); }

/* ---------- Loader（控えめ・CDN/JS非依存・フェイルセーフ） ---------- */
.loader{
  position:fixed; inset:0; z-index:2000;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  animation:loaderOut .9s var(--ease) 1.7s forwards;   /* JS無しでも必ず消える */
}
.loader__mark{
  font-family:var(--f-mincho); font-size:clamp(2rem,1.4rem+3vw,3.2rem); letter-spacing:.14em;
  color:var(--ink); opacity:0; transform:translateY(8px);
  animation:markIn 1s var(--ease) .1s forwards;
}
.loader__mark span{ color:var(--brass); }
.loader__line{
  font-family:var(--f-mincho); font-size:var(--step-0); letter-spacing:.16em; color:var(--ink-soft);
  opacity:0; animation:markIn 1s var(--ease) .5s forwards;
}
.loader__bar{ width:112px; height:1px; background:var(--line); overflow:hidden; }
.loader__bar::after{ content:""; display:block; height:100%; width:100%; background:var(--brass); transform:translateX(-100%); animation:barLoad 1.5s var(--ease) .2s forwards; }
body.loaded .loader{ animation:loaderOut .7s var(--ease) forwards; }
@keyframes markIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes barLoad{ to{ transform:translateX(0); } }
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.no-js-hide{}

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease);
}
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; }
.brand{
  font-family:var(--f-mincho); font-size:1.55rem; letter-spacing:.14em; color:#fff; line-height:1;
  transition:color .5s var(--ease); display:inline-flex; align-items:baseline; gap:.05em;
}
.brand small{ font-family:var(--f-mono); font-size:.52rem; letter-spacing:.24em; color:var(--brass); margin-left:.5em; text-transform:uppercase; }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav a{
  font-size:.82rem; letter-spacing:.1em; color:#fff; position:relative; padding-block:.4em;
  transition:color .4s var(--ease); white-space:nowrap;
}
.nav a::after{ content:""; position:absolute; left:0; bottom:.1em; width:100%; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.header__cta{ display:inline-flex; }
.header__cta .btn{ --by:.85em; --bx:1.5em; border-color:rgba(255,255,255,.6); color:#fff; }
.header__cta .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.burger{ display:none; }

/* scrolled / solid state */
.header.solid{ background:var(--bg); box-shadow:0 1px 0 var(--line), 0 10px 30px -24px rgba(35,32,28,.5); height:66px; }
.header.solid .brand{ color:var(--ink); }
.header.solid .nav a{ color:var(--ink); }
.header.solid .header__cta .btn{ border-color:var(--brass); color:var(--brass); }
.header.solid .header__cta .btn:hover{ background:var(--brass); color:#fff; }
.header.solid .burger span{ background:var(--ink); }
/* pages without a dark hero start solid */
.header.always-solid{ background:var(--bg); box-shadow:0 1px 0 var(--line); }
.header.always-solid .brand{ color:var(--ink); }
.header.always-solid .nav a{ color:var(--ink); }
.header.always-solid .header__cta .btn{ border-color:var(--brass); color:var(--brass); }
.header.always-solid .burger span{ background:var(--ink); }

/* ---------- Mobile drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:1500; visibility:hidden; pointer-events:none;
}
.drawer__scrim{ position:absolute; inset:0; background:rgba(20,18,15,.5); opacity:0; transition:opacity .5s var(--ease); }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,420px);
  background:var(--bg); transform:translateX(100%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; padding:1.4rem var(--gutter) 2rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.drawer.open{ visibility:visible; pointer-events:auto; }
.drawer.open .drawer__scrim{ opacity:1; }
.drawer.open .drawer__panel{ transform:translateX(0); }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; }
.drawer__top .brand{ color:var(--ink); }
.drawer__close{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); transition:background .3s,color .3s; }
.drawer__close:hover{ background:var(--ink); color:var(--bg); }
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a{ display:flex; align-items:baseline; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line-soft); font-family:var(--f-mincho); font-size:1.2rem; letter-spacing:.06em; }
.drawer__nav a .en{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; color:var(--brass); text-transform:uppercase; }
.drawer__cta{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.8rem; }
.drawer__tel{ text-align:center; font-family:var(--f-mincho); }
.drawer__tel b{ font-size:1.5rem; letter-spacing:.06em; }
.drawer__tel span{ display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; color:var(--ink-faint); text-transform:uppercase; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg figure{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s var(--ease); }
.hero__bg figure.on{ opacity:1; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroPan 16s ease-in-out infinite alternate; }
@keyframes heroPan{ to{ transform:scale(1.12); } }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(24,21,17,.62) 0%, rgba(24,21,17,.30) 42%, rgba(24,21,17,0) 72%),
             linear-gradient(0deg, rgba(24,21,17,.5) 0%, rgba(24,21,17,0) 40%); }
.hero__in{ position:relative; z-index:2; width:100%; padding-bottom:clamp(3.5rem,3rem+4vw,6.5rem); padding-top:calc(var(--header-h) + 2rem); }
.hero__eyebrow{ color:#fff; }
.hero__eyebrow.eyebrow::before{ background:var(--brass); opacity:1; }
.hero h1{ color:#fff; font-family:var(--f-mincho); font-size:var(--step-5); font-weight:600; line-height:1.24; letter-spacing:.06em; margin:1.4rem 0 1.6rem; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.hero__lead{ color:rgba(255,255,255,.92); max-width:40ch; font-size:var(--step-1); line-height:2; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.3rem; }
.hero__dots{ position:absolute; right:var(--gutter); bottom:clamp(3.5rem,3rem+4vw,6.5rem); z-index:2; display:flex; gap:.55rem; }
.hero__dots button{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.7); transition:background .4s,transform .4s; }
.hero__dots button.on{ background:var(--brass); border-color:var(--brass); transform:scale(1.1); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } .hero__bg img{ animation:none; } }

/* ---------- Concern (共感) ---------- */
.concern{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,5rem); align-items:center; }
.concern__list{ display:flex; flex-direction:column; }
.concern__item{ display:flex; gap:1.2rem; padding:1.5rem 0; border-top:1px solid var(--line); }
.concern__item:last-child{ border-bottom:1px solid var(--line); }
.concern__item .q{ font-family:var(--f-latin); font-style:italic; font-size:1.5rem; color:var(--brass); line-height:1.2; flex:none; width:2ch; }
.concern__item p{ font-family:var(--f-mincho); font-size:var(--step-1); color:var(--ink); line-height:1.7; }

/* ---------- Statement / philosophy pull ---------- */
.statement{ text-align:center; }
.statement .big{ font-family:var(--f-mincho); font-size:var(--step-4); line-height:1.6; letter-spacing:.05em; color:var(--ink); }
.statement .big em{ font-style:normal; color:var(--brass); }
.rule{ width:1px; height:clamp(48px,6vw,86px); background:var(--line); margin:2.4rem auto; }
.rule--brass{ background:var(--brass); }

/* ---------- Service cards ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2.2rem); }
.svc{ background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.svc:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -34px rgba(35,32,28,.5); }
.svc__img{ aspect-ratio:4/3; overflow:hidden; }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.svc:hover .svc__img img{ transform:scale(1.06); }
.svc__body{ padding:1.7rem clamp(1.3rem,2vw,1.9rem) 1.9rem; display:flex; flex-direction:column; gap:.9rem; flex:1; }
.svc__num{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; color:var(--brass); }
.svc__body h3{ font-family:var(--f-mincho); font-size:var(--step-2); }
.svc__body p{ color:var(--ink-soft); font-size:var(--step--1); line-height:1.95; }
.svc__price{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--line-soft); display:flex; align-items:baseline; gap:.5em; }
.svc__price .lb{ font-size:.7rem; letter-spacing:.12em; color:var(--ink-faint); }
.svc__price .val{ font-family:var(--f-mono); font-size:var(--step-1); color:var(--ink); letter-spacing:.02em; }
.svc__price .val small{ font-size:.6em; color:var(--ink-faint); }

/* ---------- Quality (split) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,5rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.split__media .tag{ position:absolute; left:1rem; bottom:1rem; background:var(--bg); color:var(--ink); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; padding:.5em 1em; border-radius:2px; text-transform:uppercase; }
.feature-list{ display:flex; flex-direction:column; gap:0; margin-top:1.8rem; }
.feature-list li{ display:flex; gap:1.1rem; padding:1.15rem 0; border-top:1px solid var(--line); }
.feature-list li .n{ font-family:var(--f-mono); font-size:.7rem; color:var(--brass); letter-spacing:.1em; flex:none; padding-top:.35em; }
.feature-list li h4{ font-family:var(--f-mincho); font-size:var(--step-1); margin-bottom:.3rem; }
.feature-list li p{ color:var(--ink-soft); font-size:var(--step--1); line-height:1.9; }

/* ---------- Before / After slider ---------- */
.ba{ position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius); user-select:none; touch-action:pan-y; cursor:ew-resize; background:var(--ink); }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__after{ clip-path:inset(0 0 0 50%); }
.ba__divider{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.ba__handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 6px 20px -6px rgba(0,0,0,.5); color:var(--ink); }
.ba__handle svg{ width:22px; height:22px; }
.ba__lb{ position:absolute; top:1rem; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(20,18,15,.55); padding:.4em .9em; border-radius:2px; z-index:3; }
.ba__lb--b{ left:1rem; } .ba__lb--a{ right:1rem; }

/* Works listing cards */
.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
.work{ display:flex; flex-direction:column; gap:1rem; }
.work__media{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); }
.work__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.work:hover .work__media img{ transform:scale(1.05); }
.work__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-faint); }
.work__meta span b{ color:var(--ink-soft); font-weight:500; }
.work h3{ font-family:var(--f-mincho); font-size:var(--step-1); }
.chip{ position:absolute; top:.8rem; left:.8rem; background:var(--brass); color:#fff; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; padding:.4em .8em; border-radius:2px; text-transform:uppercase; }

/* ---------- Price table ---------- */
.ptable{ width:100%; border-collapse:collapse; font-size:var(--step--1); }
.ptable th,.ptable td{ text-align:left; padding:1.2rem 1.2rem; border-bottom:1px solid var(--line); vertical-align:top; }
.ptable thead th{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; border-bottom:1px solid var(--ink); }
.ptable td.name{ font-family:var(--f-mincho); font-size:var(--step-0); color:var(--ink); }
.ptable td.price{ font-family:var(--f-mono); color:var(--brass); white-space:nowrap; font-size:var(--step-0); }
.ptable td.price small{ color:var(--ink-faint); }

/* Flow steps */
.flow{ counter-reset:step; display:grid; gap:0; }
.flow__step{ counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:1.6rem; padding:1.8rem 0; border-top:1px solid var(--line); position:relative; }
.flow__step:last-child{ border-bottom:1px solid var(--line); }
.flow__step::before{ content:counter(step,decimal-leading-zero); font-family:var(--f-latin); font-style:italic; font-size:var(--step-3); color:var(--brass); line-height:1; }
.flow__step h4{ font-family:var(--f-mincho); font-size:var(--step-1); margin-bottom:.4rem; }
.flow__step p{ color:var(--ink-soft); font-size:var(--step--1); line-height:1.95; }

/* ---------- Voice ---------- */
.voice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
.voice{ background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.voice__img{ aspect-ratio:4/5; overflow:hidden; }
.voice__img img{ width:100%; height:100%; object-fit:cover; }
.voice__body{ padding:1.6rem clamp(1.3rem,2vw,1.8rem) 1.8rem; }
.voice__body .qmark{ font-family:var(--f-latin); font-style:italic; font-size:2.4rem; color:var(--brass); line-height:.6; }
.voice__body p{ font-family:var(--f-mincho); font-size:var(--step-0); line-height:1.9; margin:.6rem 0 1.1rem; color:var(--ink); }
.voice__who{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-faint); }

/* ---------- Message ---------- */
.message{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,4vw,5rem); align-items:center; }
.message__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.message blockquote{ font-family:var(--f-mincho); font-size:var(--step-2); line-height:1.9; letter-spacing:.03em; color:var(--ink); }
.message .sign{ margin-top:1.8rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:var(--ink-faint); }
.message .sign b{ font-family:var(--f-mincho); font-size:var(--step-1); color:var(--ink); letter-spacing:.06em; display:block; margin-top:.3rem; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--dark); color:var(--on-dark); text-align:center; }
.cta-band__in{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.cta-band h2{ font-family:var(--f-mincho); font-size:var(--step-4); color:#fff; letter-spacing:.05em; line-height:1.4; }
.cta-band p{ color:var(--on-dark-soft); max-width:46ch; }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:.6rem; }
.cta-band .tel{ font-family:var(--f-mincho); }
.cta-band .tel b{ font-size:var(--step-2); letter-spacing:.06em; color:#fff; }
.cta-band .tel span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; color:var(--on-dark-soft); text-transform:uppercase; display:block; }

/* ---------- Footer ---------- */
.footer{ background:var(--dark-2); color:var(--on-dark); padding-top:clamp(3.5rem,3rem+3vw,5.5rem); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,4vw,4rem); padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer .brand{ color:#fff; font-size:2rem; }
.footer__about{ color:var(--on-dark-soft); font-size:var(--step--1); line-height:1.95; margin-top:1.2rem; max-width:34ch; }
.footer__col h4{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:1.1rem; font-weight:500; }
.footer__col a{ display:block; color:var(--on-dark-soft); padding:.42rem 0; font-size:var(--step--1); transition:color .3s var(--ease); }
.footer__col a:hover{ color:#fff; }
.footer__info{ color:var(--on-dark-soft); font-size:var(--step--1); line-height:1.9; }
.footer__info b{ color:var(--on-dark); font-weight:500; }
.footer__bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:1.6rem 0; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; color:var(--on-dark-soft); text-transform:uppercase; }

/* ---------- Mobile bottom CTA bar ---------- */
.mbar{ position:fixed; left:0; right:0; bottom:0; z-index:900; display:none; grid-template-columns:1fr 1fr; background:var(--bg); border-top:1px solid var(--line); box-shadow:0 -6px 24px -18px rgba(0,0,0,.5); }
.mbar a{ display:flex; align-items:center; justify-content:center; gap:.5em; padding:1.05rem .5rem; font-size:.82rem; letter-spacing:.08em; font-family:var(--f-gothic); }
.mbar a.tel{ color:var(--ink); }
.mbar a.book{ background:var(--brass); color:#fff; }
.mbar svg{ width:16px; height:16px; }

/* ---------- Page hero (下層) ---------- */
.phero{ padding-top:calc(var(--header-h) + clamp(2.4rem,2rem+3vw,4.5rem)); padding-bottom:clamp(2rem,1.6rem+2vw,3.4rem); background:var(--bg-warm); border-bottom:1px solid var(--line); }
.phero__in{ display:flex; flex-direction:column; gap:1rem; }
.phero h1{ font-family:var(--f-mincho); font-size:var(--step-4); letter-spacing:.05em; }
.phero .en{ font-family:var(--f-latin); font-style:italic; color:var(--brass); font-size:var(--step-1); }
.phero p{ color:var(--ink-soft); max-width:56ch; }
.crumbs{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; display:flex; gap:.6em; }
.crumbs a:hover{ color:var(--brass); }

/* generic prose */
.prose > * + *{ margin-top:1.3rem; }
.prose p{ color:var(--ink-soft); line-height:2.05; }
.prose h2{ font-family:var(--f-mincho); font-size:var(--step-2); margin-top:2.4rem; }
.prose h3{ font-family:var(--f-mincho); font-size:var(--step-1); }

/* dl info */
.dl{ width:100%; border-top:1px solid var(--line); }
.dl__row{ display:grid; grid-template-columns:200px 1fr; gap:1.5rem; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.dl__row dt{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; padding-top:.2em; }
.dl__row dd{ color:var(--ink); }

/* contact form */
.form{ display:grid; gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:.55rem; }
.field label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.field label .req{ color:var(--brass); margin-left:.4em; }
.field input,.field textarea,.field select{
  font:inherit; font-size:var(--step-0); color:var(--ink); background:var(--bg-card);
  border:1px solid var(--line); border-radius:var(--radius); padding:.9em 1em; width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(154,123,79,.14); }
.field textarea{ min-height:150px; resize:vertical; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form__note{ font-size:.78rem; color:var(--ink-faint); }

/* utility */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); }
.mt-s{ margin-top:1rem; } .mt-m{ margin-top:2rem; } .mt-l{ margin-top:3rem; }
.center{ text-align:center; }
.actions-center{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; }

/* ============ Responsive ============ */
@media (max-width:1080px){
  .nav{ display:none; }
  .header__cta{ display:none; }
  .burger{ display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; }
  .burger span{ width:24px; height:1.5px; background:#fff; transition:background .4s; }
}
@media (max-width:900px){
  .svc-grid,.works-grid,.voice-grid{ grid-template-columns:1fr 1fr; }
  .concern,.split,.split--rev .split__media,.message,.grid-2{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .message__img{ max-width:360px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer .brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  :root{ --header-h:64px; }
  .mbar{ display:grid; }
  body{ padding-bottom:0; }
  .footer{ padding-bottom:76px; }   /* room for mbar */
  .svc-grid,.works-grid,.voice-grid{ grid-template-columns:1fr; }
  .hero{ min-height:100svh; align-items:stretch; }
  /* スマホ専用ヒーロー: 画像上・文字下 */
  .hero.hero--mobile .hero__bg figure{ bottom:auto; height:56svh; }
  .hero.hero--mobile{ flex-direction:column; }
  .hero.hero--mobile .hero__scrim{ height:56svh; inset:0 0 auto 0; background:linear-gradient(0deg, rgba(24,21,17,.55) 0%, rgba(24,21,17,0) 55%); }
  .hero.hero--mobile .hero__in{ margin-top:52svh; background:var(--bg); padding:2.2rem var(--gutter) 2.6rem; border-radius:14px 14px 0 0; position:relative; }
  .hero.hero--mobile .hero__eyebrow{ color:var(--brass); }
  .hero.hero--mobile .hero__eyebrow.eyebrow::before{ background:var(--brass); }
  .hero.hero--mobile h1{ color:var(--ink); text-shadow:none; }
  .hero.hero--mobile .hero__lead{ color:var(--ink-soft); }
  .hero.hero--mobile .hero__cta .btn--ghost-light{ border-color:var(--ink); color:var(--ink); }
  .hero.hero--mobile .hero__cta .btn--ghost-light:hover{ background:var(--ink); color:var(--bg); }
  .hero__dots{ bottom:auto; top:calc(56svh - 2rem); }
  .dl__row{ grid-template-columns:1fr; gap:.4rem; }
  .form__row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .cta-band .actions{ flex-direction:column; width:100%; }
  .cta-band .actions .btn{ width:100%; }
  /* price table -> card stack on mobile（料金明朗の可読性） */
  .ptable thead{ display:none; }
  .ptable, .ptable tbody, .ptable tr, .ptable td{ display:block; width:100%; }
  .ptable tr{ padding:1.15rem 0; border-bottom:1px solid var(--line); }
  .ptable td{ border:none; padding:.15rem 0; }
  .ptable td.name{ font-family:var(--f-mincho); font-size:var(--step-1); margin-bottom:.25rem; }
  .ptable td:not(.name):not(.price){ color:var(--ink-soft); }
  .ptable td.price{ margin-top:.45rem; font-size:var(--step-1); }
}
@media (max-width:400px){
  .hero h1{ letter-spacing:.04em; }
}