/* =============================================================
   BARBER & GROOMING OAK（大阪・南船場／男性専門バーバー）デモサイト
   エムサイト工房ポートフォリオ用・旗艦作（“見せ球”）。
   住所/電話/料金/スタッフ/口コミ・評価はすべてデモ用ダミー。実案件時に差し替え。
   配色は本案件専用：カーボン＋ボーン＋ブラス（差し色は真鍮1色）。ハウスカラー不使用。
   世界観：暗くて温かい・テクスチャ・極太コンデンス体の巨大タイポが主役。骨太で重厚。
   直前作「凪」（明るい紙白・明朝・繊細）とは真逆に振る。モバイルファースト。
   ============================================================= */

:root{
  --carbon:   #16130F; /* 温かみのある黒・基調 */
  --carbon-2: #211C16; /* パネル・一段明るい黒 */
  --bone:     #E9E3D6; /* 暗背景上の文字・オフホワイト */
  --bone-dim: #A9A296; /* 本文・補足のくすませた色 */
  --brass:    #C48E3C; /* 差し色：真鍮/琥珀。CTA・エンブレム・看板の灯り */
  --brass-hi: #E0B45F; /* ブラスのハイライト（発光・ホバー） */
  --rust:     #8A3B26; /* ごく稀に深み/ホバー用（多用禁止） */
  --line:     #3A332A; /* 細い罫線 */

  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --display: 'Anton', 'Arial Narrow', sans-serif;        /* 極太コンデンス・ラテン */
  /* ラベルはラテンが主役だが、ボタン文言など和文が混じるため Zen Kaku を必ずフォールバックに置く
     （Archivo は和文グリフを持たず、無いと「予約する」等が豆腐□になる） */
  --label:   'Archivo', 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --jp:      'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}

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

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

body{
  margin:0;
  background:var(--carbon);
  color:var(--bone);
  font-family:var(--jp);
  font-size:16px;
  line-height:1.8;
  font-weight:400;
  letter-spacing:.01em;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{ font-size:17px; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--brass); color:var(--carbon); }

/* 和文の自然な改行（BudouX未達時の保険） */
.jp{ word-break:keep-all; overflow-wrap:anywhere; line-break:strict; }

:focus-visible{ outline:2px solid var(--brass-hi); outline-offset:3px; }

/* ===================== テクスチャ（ヴィンテージの魂） ===================== */
/* フィルムグレイン：ページ全面に固定オーバーレイ。SVGノイズを低不透明度で。 */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* パネル等に重ねるコンクリート/紙風の微テクスチャ */
.tex{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size:320px 320px;
}

/* ===================== レイアウト ===================== */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
@media (min-width:768px){ .container{ padding-inline:48px; } }

.section{ padding:96px 0; position:relative; }
@media (min-width:768px){ .section{ padding:150px 0; } }

/* 太いルール（区切り）＋細いブラス罫線 */
.rule{ height:2px; background:var(--bone); opacity:.85; border:0; margin:0; }
.rule--brass{ height:1px; background:var(--brass); opacity:.7; }
.rule--thin{ height:1px; background:var(--line); }

/* インダストリアルなラベル（eyebrow） */
.label{
  font-family:var(--label);
  font-size:13px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin:0;
  display:inline-flex; align-items:center; gap:14px;
}
.label::before{ content:""; width:30px; height:1px; background:var(--brass); display:inline-block; }
.label--bare::before{ display:none; }

/* セクション見出し（編集的・巨大・コンデンス） */
.s-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.8rem, 11vw, 8rem);
  line-height:.92; letter-spacing:-.01em; margin:0;
  text-transform:uppercase; color:var(--bone);
}
.s-title .em{ color:var(--brass); }
.s-titlejp{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(1.5rem, 5vw, 2.6rem); line-height:1.3; margin:.4em 0 0;
  letter-spacing:.02em;
}

/* ===================== グレインの初期非表示（演出フラグ） ===================== */
/* has-motion の間は演出対象を隠す。JS失敗/未読込でも 2.6s で必ず解除（保険）。 */
.has-motion [data-reveal]{ opacity:0; }

/* ===================== ヘッダー ===================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 22px;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
@media (min-width:768px){ .header{ padding:20px 48px; } }
.header.is-scrolled{
  background:rgba(18,15,12,.82); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom-color:var(--line); padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__emblem{ width:42px; height:42px; flex:none; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--label); font-weight:800; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone); }
.brand__sub{ font-family:var(--label); font-weight:600; font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--bone-dim); margin-top:4px; }
@media (max-width:520px){ .brand__sub{ display:none; } }

.header__cta{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:44px; height:44px; display:none; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--bone);
  transition:border-color .3s, color .3s;
}
.icon-btn:hover{ border-color:var(--brass); color:var(--brass); }
.icon-btn svg{ width:20px; height:20px; }
@media (max-width:600px){ .icon-btn{ display:inline-flex; } .header__cta .btn--desk{ display:none; } }

/* ===================== ボタン（磨いた真鍮プレート） =====================
   フラット塗りをやめ、金属の縦グラデ＋上下ベベル（照り／陰）＋柔らかな落ち影で
   “看板の真鍮プレート”の質感に。ホバーで斜めの光沢が一閃し、ブラスが発光する。
   角はブランドに合わせてシャープのまま。 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  position:relative; overflow:hidden; isolation:isolate;
  font-family:var(--label); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 30px; min-height:50px; border:1px solid rgba(0,0,0,.30);
  color:var(--carbon);
  background:linear-gradient(178deg, var(--brass-hi) 0%, var(--brass) 48%, #A9762D 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,246,230,.45),   /* 上端の照り */
    inset 0 -1px 0 rgba(0,0,0,.28),         /* 下端の陰 */
    0 2px 10px rgba(0,0,0,.35);             /* 柔らかい落ち影 */
  transition:transform .22s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
/* 斜めの光沢（磨いた金属の一閃）。背景の上・文字の下に置く */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 22%, rgba(255,248,235,.55) 46%, transparent 62%);
  transform:translateX(-125%); transition:transform .6s var(--ease);
}
.btn:hover{
  transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,246,230,.5),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 8px 24px rgba(0,0,0,.42),
    0 0 30px rgba(196,142,60,.42);          /* 真鍮の発光 */
}
.btn:hover::before{ transform:translateX(125%); }
.btn:active{ transform:translateY(0); filter:brightness(.97);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,246,230,.25), 0 2px 8px rgba(0,0,0,.3); }
.btn:focus-visible{ outline:2px solid var(--brass-hi); outline-offset:3px; }
.btn--lg{ font-size:15px; padding:21px 46px; min-height:64px; letter-spacing:.18em; }

/* ゴースト（骨のアウトライン→ホバーで真鍮に満ちる） */
.btn--ghost{
  color:var(--bone);
  background:linear-gradient(178deg, rgba(233,227,214,.05), rgba(233,227,214,0));
  border:1px solid rgba(233,227,214,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn--ghost::before{ background:linear-gradient(115deg, transparent 22%, rgba(196,142,60,.20) 46%, transparent 62%); }
.btn--ghost:hover{
  transform:translateY(-2px); filter:none; color:var(--brass-hi); border-color:var(--brass);
  background:linear-gradient(178deg, rgba(196,142,60,.16), rgba(196,142,60,.05));
  box-shadow:inset 0 0 0 1px rgba(196,142,60,.28), 0 8px 22px rgba(0,0,0,.36), 0 0 24px rgba(196,142,60,.20);
}
.btn--ghost:active{ transform:translateY(0); box-shadow:inset 0 2px 5px rgba(0,0,0,.32); }

/* ===================== ヒーロー ===================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px 0 56px; overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% 18%, rgba(196,142,60,.20), transparent 55%),
    var(--carbon);
}
/* 動画/静止画レイヤー（パララックス対象）。cover でヒーロー全面を覆う */
.hero__media{
  position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--carbon);
}
.hero__media video,
.hero__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
}
/* 動画レイヤーは重ねて opacity でクロスフェード（白い点滅を出さない） */
.hero__media video{
  opacity:0; transition:opacity .7s ease; will-change:opacity;
  background:var(--carbon);
}
.hero__media video.is-current{ opacity:1; }
/* 自動再生拒否・JS未読込時も黒画面にしない静止画フォールバック */
.hero__poster{
  display:block;
  background:var(--carbon) url("../assets/images/hero/oak-hero-mobile.png") center 34% / cover no-repeat;
}
/* 可読性スクリム：左を濃く＋下をカーボンへ。暖色照明を残すため真っ黒にしない */
.hero__bg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(8,7,6,.72), rgba(8,7,6,.34) 46%, rgba(8,7,6,.12) 100%),
    linear-gradient(180deg, rgba(18,15,12,.40) 0%, transparent 26%, rgba(18,15,12,.52) 76%, var(--carbon) 100%);
}
/* 再生/停止ボタン（PC・タブレットのみ／JSが動画を生成した時だけ表示） */
.hero__controls{ position:absolute; right:60px; bottom:26px; z-index:3; display:none; }
.hero.has-video .hero__controls{ display:block; }
@media (max-width:767px){ .hero.has-video .hero__controls{ display:none; } }
.hero__pause{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:rgba(22,19,15,.55); color:var(--bone);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:border-color .2s, color .2s, background .2s;
}
.hero__pause:hover{ border-color:var(--brass); color:var(--brass); background:rgba(22,19,15,.72); }
.hero__pause svg{ width:16px; height:16px; }
/* 既定は一時停止アイコンのみ表示。再生/停止の切替はJSがinline styleで行う（最優先で確実に反映） */
.hero__pause .hero__ic-play{ display:none; }
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__tag{
  font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--brass); margin:0 0 18px;
}
@media (min-width:768px){ .hero__tag{ font-size:13px; letter-spacing:.4em; } }

/* 巨大ロックアップ：画面を覆うほどのコンデンス極太。端で断ち切れてOK。 */
.hero__lockup{ margin:0; }
.hero__oak{
  font-family:var(--display); font-weight:400;
  font-size:clamp(5.5rem, 30vw, 22rem); line-height:.82; letter-spacing:-.03em;
  margin:0; text-transform:uppercase; color:var(--bone);
  display:block; margin-left:-.04em;
}
.hero__jp{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(2.2rem, 9vw, 5.5rem); line-height:1.05; letter-spacing:.02em;
  margin:.12em 0 0; color:var(--brass);
}
.hero__sub{
  max-width:42ch; margin:26px 0 0; color:var(--bone-dim); font-size:15px; line-height:1.85;
}
@media (min-width:768px){ .hero__sub{ font-size:17px; } }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
/* スマホは下部固定CTAバー（.dock）が常時出るため、ヒーロー内のCTAは重複。しきい値は .dock と揃える。
   ヒーローは下揃え（justify-content:flex-end）なので、CTAを消した分だけ本文が下がり
   固定バー（58px）の裏に潜り込む。その高さぶん下余白を足して逃がす。 */
@media (max-width:600px){
  .hero__actions{ display:none; }
  .hero{ padding-bottom:calc(56px + 58px); }
}

/* クリップワイプ用：語のラッパ。塗りで現れるよう overflow:hidden の中で動かす */
.wipe{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.wipe > span{ display:inline-block; }

.scroll-hint{
  position:absolute; right:22px; bottom:34px; z-index:2;
  display:flex; align-items:center; gap:12px;
  writing-mode:vertical-rl; font-family:var(--label); font-weight:700;
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--bone-dim);
}
.scroll-hint::after{ content:""; writing-mode:initial; width:1px; height:46px; background:linear-gradient(var(--brass), transparent); }
@media (max-width:600px){ .scroll-hint{ display:none; } }

/* ===================== マーキー帯 ===================== */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--carbon-2); overflow:hidden; padding:0;
}
.marquee__row{ display:flex; white-space:nowrap; will-change:transform; }
.marquee__row + .marquee__row{ border-top:1px solid var(--line); }
.marquee__row span{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2rem, 6vw, 4rem); line-height:1.35; letter-spacing:.02em;
  padding:8px 0; color:transparent;
  -webkit-text-stroke:1px var(--brass);
}
.marquee__row--fill span{ color:var(--brass); -webkit-text-stroke:0; }
.marquee__sep{ color:var(--brass) !important; -webkit-text-stroke:0 !important; padding:0 .5em !important; }

/* ===================== STORY ===================== */
.story{ background:var(--carbon); position:relative; }
.story__grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
@media (min-width:900px){ .story__grid{ grid-template-columns:1.1fr .9fr; gap:80px; } }
.story__copy p{ color:var(--bone-dim); font-size:16px; line-height:2; margin:0 0 1.2em; }
.story__copy p:first-of-type{ color:var(--bone); font-size:18px; }
.story__emblem{ display:flex; justify-content:center; }
.story__emblem svg{ width:min(320px, 80%); height:auto; }

/* エンブレム外周のゆっくり回転（時計回り・一定速度）。
   共用シンボルのため既定は無効（animation-name:none）。STORYインスタンスだけ
   継承カスタムプロパティで有効化＝ヘッダー/ファイナルCTAは回転しない。
   中央の葉と OAK は .emblem-ring の外にあるため固定。 */
.emblem-ring{
  transform-box: view-box;         /* viewBox(0 0 200 200)を基準に */
  transform-origin: 50% 50%;       /* = 中心(100,100)まわりで回転 */
  animation-name: var(--emblem-spin-name, none);
  animation-duration: 36s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.story__emblem{ --emblem-spin-name: emblem-spin; }
@keyframes emblem-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* ===================== MENU（特大の通し番号リスト） ===================== */
.menu__list{ border-top:2px solid var(--bone); }
.menu__item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  padding:22px 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .3s var(--ease);
}
@media (min-width:768px){ .menu__item{ gap:32px; padding:30px 0; } }
.menu__item:hover{ padding-left:14px; }
.menu__item:hover .menu__no{ color:var(--brass); }
.menu__no{
  font-family:var(--display); font-weight:400; color:var(--line);
  font-size:clamp(2.4rem, 7vw, 4.6rem); line-height:.8; transition:color .3s;
  min-width:1.6ch;
}
.menu__name{ display:flex; flex-direction:column; gap:4px; }
.menu__name b{ font-family:var(--jp); font-weight:700; font-size:clamp(1.05rem,3.4vw,1.5rem); color:var(--bone); letter-spacing:.01em; }
.menu__name small{ font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); }
.menu__price{ font-family:var(--display); font-weight:400; color:var(--bone); font-size:clamp(1.5rem,4.5vw,2.4rem); letter-spacing:.01em; }
.menu__note{ margin:26px 0 0; color:var(--bone-dim); font-family:var(--label); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; }

/* ===================== THE WORK（ピン留め横スクロール） ===================== */
.work{ background:var(--carbon-2); padding:0; overflow:hidden; }
.work__head{ padding:96px 0 0; }
@media (min-width:768px){ .work__head{ padding:140px 0 0; } }
.work__pin{ position:relative; height:100svh; display:flex; align-items:center; }
.work__track{ display:flex; gap:24px; padding:0 22px; will-change:transform; }
@media (min-width:768px){ .work__track{ gap:36px; padding:0 48px; } }
.work__tile{
  flex:none; width:78vw; max-width:520px; height:62svh; position:relative;
  background:var(--carbon); border:1px solid var(--line); overflow:hidden;
}
@media (min-width:768px){ .work__tile{ width:38vw; } }
/* 実写（各タイル全面を cover。object-position は画像ごとにインラインで指定） */
.work__tile .work__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--carbon);
}
/* PCのみ：ホバーで控えめに拡大。GSAPは .work__track を動かすため画像側と競合しない */
@media (hover:hover){
  .work__tile .work__img{ transition:transform .6s var(--ease); }
  .work__tile:hover .work__img{ transform:scale(1.035); }
}
/* CLAUDE.md §7 の「明示指示がある場合のみ停止してよい」例外。ユーザーの明示指示により、
   この WORK タイルのホバー拡大だけは低減設定で停止する（意図的に残している。消さないこと）。
   他の演出（ヒーロー動画・スクロール演出・スムーススクロール等）は低減設定でも通常動作。 */
@media (prefers-reduced-motion:reduce){
  .work__tile .work__img{ transition:none; }
  .work__tile:hover .work__img{ transform:none; }
}
.work__tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:18px 20px; background:linear-gradient(transparent, rgba(18,15,12,.9));
}
.work__tile .wt-no{ font-family:var(--display); font-size:2.4rem; line-height:.8; color:var(--brass); }
.work__tile .wt-name{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); text-align:right; }
.work__hint{ padding:22px 0 96px; }
@media (min-width:768px){ .work__hint{ padding:30px 0 140px; } }
/* 横スクロール無効環境（reduced-motion/JS無し）の縦並びフォールバック */
.no-pin .work__pin{ height:auto; display:block; }
.no-pin .work__track{ flex-wrap:wrap; transform:none !important; justify-content:center; }
.no-pin .work__tile{ width:100%; max-width:560px; height:54vw; max-height:380px; }

/* ===================== PROCESS（特大番号の体験ステップ） ===================== */
.process__grid{ display:grid; grid-template-columns:1fr; gap:0; border-top:2px solid var(--bone); }
@media (min-width:768px){ .process__grid{ grid-template-columns:repeat(5,1fr); } }
.process__step{ padding:26px 0; border-bottom:1px solid var(--line); }
@media (min-width:768px){ .process__step{ padding:34px 22px 34px 0; border-bottom:0; border-right:1px solid var(--line); }
  .process__step:last-child{ border-right:0; } }
.process__no{ font-family:var(--display); font-weight:400; color:var(--brass); font-size:clamp(3rem,9vw,5rem); line-height:.8; display:block; }
.process__label{ font-family:var(--jp); font-weight:700; font-size:1.05rem; margin-top:12px; color:var(--bone); }

/* ===================== BARBER（オーナー紹介） ===================== */
.barber__grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media (min-width:900px){ .barber__grid{ grid-template-columns:.85fr 1.15fr; gap:72px; } }
.barber__photo{
  position:relative; aspect-ratio:4/5; background:var(--carbon-2); border:1px solid var(--line); overflow:hidden;
}
/* 店長ポートレート実写（4:5枠に cover で自然に収める。object-position はインライン指定） */
.barber__photo .barber__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--carbon-2);
}
.barber__name{ font-family:var(--display); font-size:clamp(3rem,9vw,5.5rem); line-height:.85; color:var(--bone); margin:0; }
.barber__role{ font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin:14px 0 0; }
.barber__quote{ font-family:var(--jp); font-weight:500; font-size:clamp(1.1rem,3.4vw,1.5rem); line-height:1.7; color:var(--bone); margin:24px 0 0; }

/* ===================== VOICE ===================== */
.voice__grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:768px){ .voice__grid{ grid-template-columns:1fr 1fr; gap:36px; } }
.voice__card{ background:var(--carbon-2); border:1px solid var(--line); padding:36px 30px; position:relative; }
.voice__card::before{ content:"\201C"; font-family:var(--display); color:var(--brass); font-size:5rem; line-height:.6; display:block; margin-bottom:8px; }
.voice__card p{ margin:0; font-size:17px; line-height:1.8; color:var(--bone); }
.voice__card cite{ display:block; margin-top:18px; font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); font-style:normal; }

/* ===================== ACCESS / INFO ===================== */
.access__grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:900px){ .access__grid{ grid-template-columns:1fr 1fr; gap:56px; align-items:start; } }
.info__name{ font-family:var(--display); font-size:clamp(2.4rem,7vw,3.6rem); line-height:.9; color:var(--bone); margin:0 0 22px; }
.info__dl{ margin:0; }
.info__row{ display:grid; grid-template-columns:120px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.info__row dt{ font-family:var(--label); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); padding-top:3px; }
.info__row dd{ margin:0; color:var(--bone-dim); }
.info__row dd a{ color:var(--bone); border-bottom:1px solid var(--line); }
.info__row dd a:hover{ color:var(--brass); border-color:var(--brass); }
.map{ aspect-ratio:4/3; width:100%; border:1px solid var(--line); background:var(--carbon-2); filter:grayscale(1) contrast(1.05) brightness(.85) sepia(.25); }

/* ===================== ファイナルCTA ===================== */
.final{ position:relative; text-align:center; padding:120px 0; background:var(--carbon-2); overflow:hidden; }
@media (min-width:768px){ .final{ padding:170px 0; } }
.final__emblem{ width:96px; height:96px; margin:0 auto 30px; opacity:.9; }
.final__title{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(2rem,8vw,5rem); line-height:1.12; letter-spacing:.01em; color:var(--bone); margin:0 auto;
  max-width:16ch;
}
.final__title .em{ color:var(--brass); }
.final__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:42px; }

/* ===================== フッター ===================== */
.footer{ background:var(--carbon); border-top:1px solid var(--line); padding:60px 0 120px; }
@media (min-width:600px){ .footer{ padding-bottom:64px; } }
.footer__grid{ display:flex; flex-wrap:wrap; gap:28px 56px; justify-content:space-between; align-items:flex-start; }
.footer__name{ font-family:var(--display); font-size:2rem; color:var(--bone); letter-spacing:.02em; }
.footer__col{ font-size:14px; color:var(--bone-dim); line-height:1.9; }
.footer__col a:hover{ color:var(--brass); }
.footer__bottom{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--label); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim); }

/* ===================== スマホ固定CTAバー ===================== */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:none; grid-template-columns:1fr 1fr;
  background:rgba(18,15,12,.94); backdrop-filter:blur(8px); border-top:1px solid var(--line);
}
.dock a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:58px; font-family:var(--label); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.dock__tel{ color:var(--bone); border-right:1px solid var(--line); }
.dock__tel:active{ background:rgba(233,227,214,.06); }
/* 予約バーも真鍮プレートの質感に揃える（バー内なので軽め） */
.dock__book{
  color:var(--carbon);
  background:linear-gradient(178deg, var(--brass-hi) 0%, var(--brass) 52%, #A9762D 100%);
  box-shadow:inset 0 1px 0 rgba(255,246,230,.45), inset 0 -1px 0 rgba(0,0,0,.28);
}
.dock__book:active{ filter:brightness(.96); box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
.dock svg{ width:18px; height:18px; }
@media (max-width:600px){ .dock{ display:grid; } body{ padding-bottom:58px; } }

/* ===================== カスタムカーソル（デスクトップ・控えめ） ===================== */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:8px; height:8px; border-radius:50%; background:var(--brass);
  transform:translate(-50%,-50%); mix-blend-mode:screen;
  transition:width .2s, height .2s, background .2s; opacity:0;
}
.cursor.is-active{ opacity:1; }
.cursor.is-hot{ width:34px; height:34px; background:rgba(196,142,60,.25); }
@media (hover:none){ .cursor{ display:none; } }

/* ===================== reduced-motion =====================
   CLAUDE.md §7 に従い、prefers-reduced-motion でもアニメーション（動画・スクロール演出・
   マーキー・スムーススクロール等）を通常どおり動作させる＝ここで停止・簡略化しない。
   個別に動きを止める指示が来た場合のみ、この節に条件付き上書きを追加する。 */