/* ============================================================
   v8 index — salon-shibuya.html / salon-list.html のトークン・
   コンポーネントをそのまま流用(2026-08-06)
   body 14px / lh 1.5 / ls 0.1em / weight 400
   ボタン: 白抜き 1px 実線 角丸0 高さ52px → hover #333333 反転
   ============================================================ */
:root {
  /* v3トークン(design.md v3.0)。既存の --fs-body/--fs-small/--ls はエイリアスとして維持 */
  /* 基本 */
  --ink: #333333;
  --ink-soft: #949494;
  --ink-note: rgba(51, 51, 51, .8);
  --hairline: rgba(51, 51, 51, .08);
  --hairline-hover: rgba(51, 51, 51, .32);
  --paper: #FFFFFF;
  --beige: #EAE5E0;
  /* タイプスケール(9段+ヒーロー+筆記体3段。P5: --fz-10 追加=ナビ英字対組専用) */
  --fz-10: 10px;
  --fz-12: 12px;
  --fz-13: 13px;
  --fz-14: 14px;
  --fz-15: 15px; /* 2026-09-05: デザインを維持した本文のサイズ調整 */
  --fz-16: 16px;
  --fz-18: clamp(16px, 1.3vw, 18px);
  --fz-21: clamp(17px, 1.5vw, 21px);
  --fz-30: clamp(24px, 2.2vw, 30px);
  --fz-38: clamp(30px, 2.9vw, 38px);
  --fz-47: clamp(38px, 3.4vw, 47px);
  --fz-hero: clamp(42px, 4.6vw, 72px);
  --fz-heading: clamp(26px, 2.4vw, 32px);
  --fz-script-s: clamp(20px, 2.4vw, 40px);
  --fz-script-m: clamp(34px, 4vw, 64px);
  --fz-script-l: clamp(80px, 9vw, 150px);
  /* 旧エイリアス(既存参照維持) */
  --fs-body: var(--fz-15);
  --fs-small: 12px;
  /* 字間(4段+0) */
  --ls-tight: .04em;
  --ls-body: .1em;
  --ls-label: .18em;
  --ls-script: .24em;
  --ls: .1em; /* 旧エイリアス */
  /* 面色 */
  --wash-1: #FEF7F9;
  --wash-2: #FBEAEE;
  --wash-3: #F9E3E8;
  --band-gray: #F5F3F1;
  --tint-pink: #FBEDF0;
  --skeleton: #EDEDED;
  --map-gray: #CFCCC9;
  /* レイアウト */
  --w-main: 1200px;
  --w-wide: 1440px;
  --w-narrow: 880px;
  --header-h: 84px;
  --pad-x: clamp(20px, 3.5vw, 48px);
  --sp-section: clamp(56px, 8vh, 96px);
  --sp-heading-content: clamp(40px, 4vw, 56px);
  --sp-photo-title: 20px;
  --sp-title-body: 12px;
  /* 角丸 */
  --radius-media: 10px;
  --radius-bubble: 18px;
  --radius-phone: 28px; /* スマホフレーム擬態(.movie-lift 外周のみ・design.md §5) */
  --btn-corner-size: 12px;
  --btn-corner-inset: 8px;
  /* モーション(4段+書き) */
  --dur-ui: .25s;
  --dur-hover: .3s;
  --dur-fx: .45s;
  --dur-reveal: .6s;
  --dur-write: 1.2s;
  --dur-decor: 2s; /* 装飾ループ(SPスワイプヒント矢印など) */
  --dur-marquee: 150s; /* 初期値。トラック半幅÷移動速度で実表示の所要時間を算出 */
  --showcase-px-per-second: 35; /* mayu-labo PC: (写真520px + 間隔5px) / 15秒 */
  --dur-drift: 42s; /* 白セクションの雲装飾(strengths/voice/news の ::after)の超低速ドリフト */
  --ease-out: cubic-bezier(.25, .46, .45, .94);
  /* アクセント(ピンク×赤グラデ) */
  --accent: #E04A5E;
  --accent-soft: #F5A0B5;
  --accent-grad: linear-gradient(135deg, #F5A0B5 0%, #E04A5E 100%);
  --accent-grad-hover: linear-gradient(135deg, #F7B0C4 0%, #E85E71 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(245, 160, 181, .28) 0%, rgba(224, 74, 94, .22) 100%);
  --gold: #E9C46A;
  --gold-soft: #F1D591;
  /* 2026-08-27 FB4: 実績エンブレムを透過PNG化したため、旧 --gold/--gold-soft/--gold-deep
     はCSSから未参照となり削除。PNG生成側の tmp/emblem-gen.html には同値を保持 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls);
  color: var(--ink);
  background: var(--paper);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 52px; min-width: 280px;
  padding: 0 48px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-tight);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.btn:hover { background: #333333; color: #FFFFFF; }

/* ------------------------------------------------------------
   Primary CTA — design.md v3.0 §7
   ピンクグラデソリッド・高さ56px・角丸0・白文字 --fz-14/--ls-tight・padding 0 48px
   hover: --accent-grad-hover + 浮き影(rgba(224,74,94,.22))
   予約・店舗誘導など「行動導線」はすべてこれ。Secondary(.btn)より前面に置く
   ------------------------------------------------------------ */
.btn-primary {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-height: 56px; min-width: 280px;
  padding: 0 48px;
  border: 0;
  border-radius: 0;
  background: var(--accent-grad);
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fz-14);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.btn-primary:hover {
  background: var(--accent-grad-hover);
  box-shadow: 0 12px 28px rgba(224, 74, 94, .22);
}
/* Primary 小型変種(ヘッダー予約ボタン専用・mayu-labo/LUMICIA準拠)
   高さ40px・padding 0 24px・--fz-12。ナビリンクと差別化 */
.btn-primary.is-sm {
  min-height: 40px;
  min-width: 0;
  padding: 0 24px;
  font-size: var(--fz-12);
}

/* 2026-09-05: 参考ボタンと同じ右下の小さな角印。文字色を継承。 */
.btn,
.btn-primary,
.mobile-cta a { position: relative; }
.btn::after,
.btn-primary::after,
.mobile-cta a::after {
  content: "";
  position: absolute;
  right: var(--btn-corner-inset);
  bottom: var(--btn-corner-inset);
  width: var(--btn-corner-size);
  height: var(--btn-corner-size);
  background: currentColor;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  pointer-events: none;
}
.btn-primary.is-sm { --btn-corner-size: 8px; --btn-corner-inset: 4px; }

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--pad-x);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.header-logo img { height: 48px; width: auto; } /* 文字入り縦積みロゴに合わせて拡大 */
.gnav ul {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.3vw, 48px);
  list-style: none;
}
.gnav a {
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  transition: opacity var(--dur-hover) ease;
}
.gnav a:hover { opacity: .5; }
/* P5: ナビ対組(和文 --fz-16 + 英字 --fz-10 Montserrat 500 uppercase --ls-label)
   mayu-labo 実測に準拠。.btn-primary(ご予約)は対組不要のため .nav-pair をあてない。
   hover は親 <a> の opacity .5 が両 span へ伝播(色/透明度が連動) */
.gnav a.nav-pair {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  font-size: var(--fz-16); /* .nav-jp のフォールバック */
}
.gnav a.nav-pair .nav-jp {
  font-size: var(--fz-16);
  letter-spacing: var(--ls-body);
  color: var(--ink);
}
.gnav a.nav-pair .nav-en {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: var(--fz-10);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* ナビ内の Primary(ご予約): .gnav a のサイズ・hover をキャンセルして Primary 挙動を優先 */
.gnav a.btn-primary {
  font-size: var(--fz-12);
  letter-spacing: var(--ls-tight);
  transition: background var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.gnav a.btn-primary:hover { opacity: 1; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent;
  color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle .bar {
  display: block; width: 22px; height: 1px;
  background: currentColor; position: relative;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 1px; background: currentColor;
  transition: transform var(--dur-ui) ease, top var(--dur-ui) ease;
}
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after  { top:  7px; }
.nav-toggle[aria-expanded="true"] .bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after  { top: 0; transform: rotate(-45deg); }

/* ------------------------------------------------------------
   Hero — 1画面構成(左: 見出し+実績 / 右: 全高モデル)
   白からピンクへつながるウォッシュと大きな人物でインパクトを作る
   ------------------------------------------------------------ */
.hero {
  position: relative;
  /* P4(2026-08-27): mayu-labo 実測80vh に準拠して 82svh 系へ縮小。
     ヘッダー分を差し引かず svh 直値にすることで「ファーストビュー1画面のうち
     ヒーローが 82% を占め、下端に次セクション(strengths)がわずかに覗く」構成にする。
     内部の縦センター配置(1fr:auto:auto:1fr)は据置で、視覚バランスは維持 */
  min-height: 82svh;
  padding-inline: var(--pad-x);
  padding-block: clamp(24px, 4vh, 48px) clamp(20px, 3vh, 32px);
  /* 「薄いぼやっとした雲」ピンク背景 —— 複数の大きな radial-gradient を非対称に
     重ね、左中央に濃いローズの塊/右上は白抜け/下部は白に溶ける、を1レイヤで表現。
     最終レイヤは下端 88→100% を必ず白に落として次セクション(strengths=白)へ連続させる */
  background:
    /* 下端の白フェード(次セクション連続性・最重要・最前面) */
    linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .55) 84%, #FFFFFF 100%),
    /* 左のテキストゾーンを白く抜く(h1・実績サークルの可読性が最優先) */
    radial-gradient(58% 72% at 12% 42%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%),
    /* 右上の白抜きパッチ */
    radial-gradient(50% 44% at 88% 8%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 62%),
    /* 中央の濃ローズ雲(主役)。2026-08-27: 全体的に「もう一段薄い雲」へ調整
       (ユーザーFB)。ピーク .66→.46、中間 .36→.22 と2段下げ */
    radial-gradient(44% 52% at 56% 48%, rgba(232, 138, 162, .46) 0%, rgba(246, 189, 202, .22) 45%, rgba(246, 189, 202, 0) 78%),
    /* 右下の中間ピンク(雲のリズム)。.56 → .36(2段下) */
    radial-gradient(40% 40% at 82% 72%, rgba(240, 156, 176, .36) 0%, rgba(240, 156, 176, 0) 74%),
    /* 右上寄りのもうひと塊 .56 → .36(2段下) */
    radial-gradient(30% 26% at 70% 18%, rgba(246, 189, 202, .36) 0%, rgba(246, 189, 202, 0) 72%),
    /* ベースの淡いピンク面(左が読める明るさまで白寄りに) */
    linear-gradient(180deg, var(--wash-1) 0%, var(--wash-2) 55%, var(--wash-3) 100%);
  overflow: hidden; /* .hero-photo のブラーグローと大文字 Beauty が横スクロールを起こさないよう封じる */
}
/* さらに「もやっと感」を補強する追加雲層 —— 大きな半透明ローズの塊を blur で溶かす。
   inset を負にして端まで到達させ、pointer-events:none で操作を妨げない。z-index:0 で
   .hero-inner(z-index:2)の背後、CSS背景の上に浮かぶ */
.hero::before {
  content: "";
  position: absolute;
  inset: -6% -6% -6% -6%;
  background:
    /* 2026-08-27: 「全体的に雲が薄い方がいい」FBに合わせ、追加雲層も1段薄く.36→.22 */
    radial-gradient(38% 34% at 58% 42%, rgba(232, 138, 162, .22) 0%, rgba(232, 138, 162, 0) 72%),
    radial-gradient(30% 26% at 74% 76%, rgba(240, 156, 176, .22) 0%, rgba(240, 156, 176, 0) 74%),
    radial-gradient(24% 22% at 86% 30%, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 76%);
  filter: blur(72px);
  z-index: 0;
  pointer-events: none;
}
.hero-inner {
  width: 100%;
  /* .hero::before の雲ぼかしと .hero-script(Beauty)より前面に置くため z-index を確保。
     モデル img と h1・実績サークルはこのスタッキング内でさらに個別 z-index を積む */
  position: relative;
  z-index: 2;
  /* 広幅での余白過多FB対応: ヒーローだけコンテナを1400pxへ拡張し、
     写真カラム比率も上げてモデルの実表示サイズを確保(画像は幅制約で決まるため) */
  max-width: var(--w-wide);
  /* padding-block (clamp 24/4vh/48 + 20/3vh/32 ≒ 44〜80px) 分を差し引き、
     ヒーロー全体が 82svh に収まるように内側の min-height を設定
     (P4: 82svh 化に追随。header 分は .hero 側の svh に含まれない) */
  min-height: calc(82svh - clamp(44px, 7vh, 80px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  /* 「両カラムとも縦センターの帯」構成:
     rows を 1fr : auto(head) : auto(stats) : 1fr にして上下スペーサーを等分割し、
     左ブロック(h1+stats)を自然に縦センターへ寄せる。右のモデルは align-self:center で
     4行を占めるセル内で中央配置。これで解像度差による「高さのズレ」概念自体を消す */
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".     photo"
    "head  photo"
    "stats photo"
    ".     photo";
  column-gap: clamp(32px, 4vw, 64px);
}
/* .hero-photo が position:relative を持つため、見出しと実績を z-index で上に置き
   ブロブの左オーバーハングがコピーを覆わないようにする */
.hero-head  { grid-area: head;  align-self: start; position: relative; z-index: 2; }
/* align-self:center で 4行セル内に img 高さぶんだけ縮まって縦センター配置
   (stretch のままだと擬似要素の inset% がセル全高基準になり、下端グローが伸びすぎる) */
.hero-photo { grid-area: photo; align-self: center; }

.hero-head h1 {
  margin-top: 0;
  font-weight: 400;
  /* 拡大に伴い字間を .1em→.08em に詰め、行の折返しは <br> のみに固定
     (列幅を超えた分は空の column-gap へ視覚的にはみ出させて許容) */
  font-size: var(--fz-hero);
  line-height: 1.35;
  letter-spacing: var(--ls-body);
  white-space: nowrap;
  color: var(--ink);
}
/* ヒーローの Primary CTA(h1 直下)。左カラム縦センターの塊を大きく崩さない位置に置く */
.hero-cta {
  margin-top: 32px;
}
/* SP専用CTA(実績サークル下)。PCでは非表示、SPメディアクエリで表示に切替 */
.hero-cta-sp {
  display: none;
}

/* .hero-photo — 大きなピンクブロブ+透過カットアウト+薄影の3層構成
   透過WebP(縦型ポートレート 1174×1295)を主役として max-height 基準で高さ制御。
   縦センターに浮遊させ、右側にも呼吸の余白を残す(旧: 右端フルブリード+下端接地) */
.hero-photo {
  position: relative;
  isolation: isolate;
  overflow: visible;
  /* 完全ブリードをやめて右余白を確保。狭幅ビューポートでは pad-x が小さくなる分を
     追加パディングで補い、モデル右端とビューポート右端の間に最低 48px 級の余白を確保
     (1024で 36+16=52px、1440+ で 48+8=56px 以上) */
  margin-right: 0;
  padding-right: max(0px, calc(52px - var(--pad-x)));
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* モデル背後のグロー: 親.hero側で雲状ピンクを既に敷いているため、ここは
   モデル周辺の微かな「体温オーラ」に減衰(元濃度の約4割)。うるさくならないよう1層+1層に簡略化 */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: -4% -12% -10% -18%;
  background:
    radial-gradient(52% 46% at 44% 48%, rgba(246, 189, 202, .36) 0%, rgba(246, 189, 202, 0) 70%),
    radial-gradient(30% 26% at 72% 34%, rgba(255, 226, 204, .22) 0%, rgba(255, 226, 204, 0) 76%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}
/* 右上のアクセント光(差し色。こちらも輪郭が出ないラジアル減衰・微弱に) */
.hero-photo::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -2%;
  width: 46%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(232, 138, 162, .22) 0%, rgba(232, 138, 162, 0) 70%);
  filter: blur(22px);
  z-index: -2;
  pointer-events: none;
}
.hero-photo img {
  position: relative;
  z-index: 1;
  display: block;
  /* 縦センター配置に変えたため下端接地をやめ、少し縮小(顔の主役感は維持)。
     旧 72/88vh → 60/74vh 級。P4(82svh 化)に追随してモデル最大高を
     clamp(60vh, 74vh, calc(82svh - 48px)) に引き下げ、下端の白フェードに接地しないよう余白を残す */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(60vh, 74vh, calc(82svh - 48px));
  margin-left: auto;
  vertical-align: bottom;
  /* 透過カットアウトの薄影(recruit 準拠・rgba(51,51,51,.14 近傍)) */
  filter: drop-shadow(0 10px 22px rgba(51, 51, 51, .13));
  /* 空中フロートに合わせて下端マスクを上寄り+より長い減衰に(切断線を空中で自然に消す) */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}

/* ヒーローの装飾スクリプト「Beauty」 —— 白の細身筆記体を斜めに大きく配置し、
   モデルの背後で一部が隠れるレイヤリングにする(参考: ORESS採用サイトの "Salary")。
   .hero-inner(z-index:2)より背面(z-index:1)、.hero::before(z-index:0)の雲より前面。
   overflow は .hero 側で切っているので rotate による端はみ出しは横スクロールを起こさない */
/* Beauty筆記体: 大中小3つを非対称にちりばめる(共通スタイル+サイズ/位置の個別指定)。
   テキストゾーン(左上〜中央)の可読性を守るため、配置はモデル上/右下/左下端に散らす */
.hero-script {
  position: absolute;
  z-index: 1;
  font-family: "Sacramento", cursive;
  font-weight: 400;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: #FFFFFF;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: left center;
  /* うっすら光る質感(強いシャドウにはしない・上品な透け感を優先) */
  text-shadow: 0 4px 24px rgba(255, 255, 255, .15);
  user-select: none;
}
/* 各インスタンス: 字間を大きく取り(参考ORESSの「S a l a r y」的な離し方)、
   scaleX の引き延ばしと傾きを1つずつ変えてリズムを散らす */
.hero-script--lg {
  left: 34%;
  top: 4%;
  font-size: var(--fz-script-l);
  letter-spacing: var(--ls-script);
  opacity: .58;
  transform: rotate(-14deg) scaleX(1.35);
}
.hero-script--md {
  right: 0%;
  bottom: 12%;
  font-size: var(--fz-script-m);
  letter-spacing: var(--ls-script);
  opacity: .5;
  transform: rotate(8deg) scaleX(1.45);
  transform-origin: right center;
}
.hero-script--sm {
  left: 3%;
  bottom: 5%;
  font-size: var(--fz-script-s);
  letter-spacing: var(--ls-label);
  opacity: .55;
  transform: rotate(-24deg) scaleX(1.3);
}
/* 4つ目: テキスト列とモデルの間、中央のローズ雲の上(白が映える)。最も引き延ばす */
.hero-script--x4 {
  left: 38%;
  top: 54%;
  font-size: var(--fz-script-s);
  letter-spacing: var(--ls-script);
  opacity: .5;
  transform: rotate(4deg) scaleX(1.5);
}
/* 5つ目: 右端のピンク帯に小さく、端へ抜ける配置 */
.hero-script--x5 {
  right: -2%;
  top: 30%;
  font-size: var(--fz-script-s);
  letter-spacing: var(--ls-label);
  opacity: .5;
  transform: rotate(-19deg) scaleX(1.25);
  transform-origin: right center;
}
/* Eyebrow 3つ: Beauty の合間の空きに、同じ流儀でサイズ・傾き・字間を変えて散らす */
.hero-script--eb1 {
  left: 5%;
  top: 9%;
  font-size: var(--fz-script-m);
  letter-spacing: var(--ls-script);
  opacity: .48;
  transform: rotate(6deg) scaleX(1.4);
}
.hero-script--eb2 {
  right: 20%;
  top: 5%;
  font-size: var(--fz-script-s);
  letter-spacing: var(--ls-script);
  opacity: .5;
  transform: rotate(-9deg) scaleX(1.3);
  transform-origin: right center;
}
.hero-script--eb3 {
  left: 46%;
  top: 71%;
  font-size: var(--fz-script-s);
  letter-spacing: var(--ls-script);
  opacity: .5;
  transform: rotate(11deg) scaleX(1.35);
}
/* 9・10個目: 上部の空き帯に小さめで(合計10個・ユーザーFB) */
.hero-script--b6 {
  left: 20%;
  top: 7%;
  font-size: var(--fz-script-s);
  letter-spacing: var(--ls-label);
  opacity: .45;
  transform: rotate(-7deg) scaleX(1.3);
}
.hero-script--eb4 {
  right: 4%;
  top: 14%;
  font-size: var(--fz-script-s);
  letter-spacing: var(--ls-script);
  opacity: .45;
  transform: rotate(13deg) scaleX(1.35);
  transform-origin: right center;
}

/* ------------------------------------------------------------
   Stats — 細線楕円+色付きスパークルのエンブレム3種(手描きニュアンス)
   ------------------------------------------------------------ */
.stats {
  grid-area: stats;
  /* 1fr/1fr 縦センター化により、旧「0.57×svh−定数」式で人工的にサークルを下寄せする
     必要が消えた(左ブロック全体が上下等スペーサーで自然センター)。
     ここでは h1 との自然な息継ぎとして固定寄りの可変ギャップに置換 */
  align-self: start;
  margin-top: clamp(48px, 6vh, 88px);
  position: relative;
  z-index: 5;
  padding: 0;
}
.stats-grid {
  max-width: var(--w-main);
  margin-inline: auto;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* LUMICIA準拠: サークル間ギャップは約20px */
  gap: clamp(16px, 1.4vw, 24px);
  list-style: none;
  flex-wrap: nowrap;
}
/* 2026-08-28 refine: 「デザインプロっぽく」へ質を上げる4要素構成
   (1) すりガラス内面: ::before で淡い白円+backdrop-filter blur → 背後の雲・筆記体と分離
   (2) 宝飾リング: 手描き2重楕円は残しつつ、ピンク×赤のグラデ弧(85〜90°)を1本重ねる
       (SVG stroke-linearGradient・3つで弧の位置を変えて非対称リズム)
   (3) タイポ整理: label --fz-13/--ls-label・sub --fz-12/--ink-soft・数字+単位ベースライン揃え
   (4) 4点スター: ラフな十字線をシャープなQベジェ4放射スターパスへ差し替え(fill:var(--gold)) */
.stat-emblem {
  position: relative;
  /* 直径190px級。3つ横並びが左カラム幅を超えた分は h1同様、空のcolumn-gapへはみ出して許容。
     flex-shrink:0 で hero 左カラム幅より優先し、ほぼ正方形の縦横比を維持 */
  flex: 0 0 auto;
  width: clamp(150px, 12.5vw, 190px);
  height: clamp(142px, 11.9vw, 181px);
  display: grid;
  place-items: center;
  list-style: none;
}
/* すりガラス内面: 背後の雲・Beauty筆記体から分離し、面の質感で数字を持ち上げる。
   inset:8% で外枠の細線楕円より内側に収め、リング自体は覆わない */
.stat-emblem::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
  /* うっすらしたinner-glow(内側の光)。α .13段のink・白.32段のみ使用 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(51, 51, 51, .08);
  z-index: 0;
  pointer-events: none;
}
.stat-emblem > * { position: relative; z-index: 1; }
.emblem-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.emblem-line .ellipse-a {
  fill: none;
  stroke: rgba(51, 51, 51, .32);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.emblem-line .ellipse-b {
  fill: none;
  stroke: var(--accent-soft);
  stroke-opacity: .75;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* 宝飾リング: ピンク→赤グラデの太めアーク。stroke-linecap:round で「宝石留め」的な柔らかい端。
   stroke-width 2(design.md §9: stat-emblem SVG座標系は自由)。位置は3つで非対称に散らす */
.emblem-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .92;
}
/* 4点スター: Qベジェで origin を通る4放射(古典的な"sparkle"字形)。
   fill だけの1色塗り。2つ目の右上アクセントだけピンクにして手描きの微差 */
.emblem-star {
  fill: var(--gold);
  fill-opacity: .95;
}
.stat-emblem:nth-child(2) .emblem-star.is-accent {
  fill: var(--accent);
  fill-opacity: .85;
}
.stat-body {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 4px;
}
.stat-label {
  font-size: var(--fz-13);
  letter-spacing: var(--ls-label);
  color: var(--ink);
  line-height: 1.4;
}
.stat-sub {
  margin-top: 4px;
  font-size: var(--fz-12);
  letter-spacing: var(--ls-body);
  color: var(--ink-soft);
  line-height: 1.4;
}
.stat-num {
  margin-top: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1;
  /* 「150万人超」が円内で折り返す事故を防ぐ。
     inline-flex(nowrap既定)+ white-space:nowrap 二重防御で1行固定 */
  white-space: nowrap;
}
.stat-value {
  font-size: var(--fz-47);
  letter-spacing: var(--ls-tight);
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* カウントアップ中に幅が動くのを防ぐ:等幅数字にして左右のガタつきをゼロ化 */
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  /* 「150万人超」を円内に収めるため --fz-21 → --fz-18 の一段縮小
     (74店舗・150万人超の両方が対象。数値の主役感が強まりつつ収まりが良くなる) */
  font-size: var(--fz-18);
  letter-spacing: var(--ls-tight);
}

/* ------------------------------------------------------------
   Showcase — ヒーロー直下のフルブリード無限マーキー(店舗/施術写真の横流し)
   mayu-labo.com の「店内写真が横に流れ続ける装飾帯」を翻案。
   - CSSのみのマーキー: トラック内で画像リストを2セット並べ、translateX を 0→-50% で
     linear infinite ループ。同じ配列を2回並べることで境目が視覚的に消える。
   - 移動はCSS、所要時間だけJSで幅から算出。hover停止・スワイプ介入なし。
   - フルブリード(--pad-x を無視して画面端から端まで)。overflow:hidden で横スクロールを封じる。
   - 章というより装飾帯なので見出しなし。前後(hero=ピンク→白フェード/strengths=白)に
     溶け込むよう背景は白。
   ------------------------------------------------------------ */
.showcase {
  padding: clamp(24px, 3vh, 40px) 0;
  background: var(--paper);
  overflow: hidden;
  position: relative;
}
.showcase-track {
  display: flex;
  align-items: center;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: showcase-scroll var(--dur-marquee) linear infinite;
  will-change: transform;
}
.showcase-slide {
  flex: 0 0 auto;
  height: clamp(240px, 26vw, 300px);
  aspect-ratio: 3 / 2;
  margin-right: clamp(16px, 1.6vw, 24px);
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--beige);
  list-style: none;
}
.showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 2セット並べたトラックを -50% までスライドすると、1セット分ちょうど左に抜けて
   2セット目の先頭が原位置に来る=境目が視覚的に消えるシームレスループ */
@keyframes showcase-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (width <= 1022px) {
  :root {
    --showcase-px-per-second: 33.125; /* mayu-labo SP: (260px + 5px) / 8秒 */
    --dur-marquee: 80s;
  }
}

/* ------------------------------------------------------------
   共通: セクション見出し
   ------------------------------------------------------------ */
main section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.sec-head { text-align: center; }
/* ---- Accent系: 全セクションの英字ラベル .sec-en をピンク×赤グラデにテキスト着彩。
     ページ全体の統一アクセントハブ。単色フォールバックは color: var(--accent) ---- */
.sec-head .sec-en {
  /* 求人バナーの筆記体「Recruit」が好評だったため、セクション英字ラベルも
     同じ Caveat スクリプト体+グラデ文字に統一(uppercase をやめ Capitalized 表記) */
  font-family: "Caveat", cursive;
  font-size: var(--fz-30);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  text-transform: none;
  color: var(--accent);
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* 筆記体ラベルの手書き風アニメーション(最終形・CSSのみ):
   セクションが視界に入るたび、左からペンで書くように clip-path をワイプ。
   キーフレームの刻みを不均等にして「字画の緩急」を出す。ペン先ドットは
   ユーザーFBにより廃止。上下は script 体のはみ出しを切らない負インセット */
html.js .sec-head .sec-en {
  clip-path: inset(-45% 101% -45% -2%);
}
html.js .sec-head.is-inview .sec-en {
  animation: sec-en-write var(--dur-write) linear 0s forwards;
}
@keyframes sec-en-write {
  0%   { clip-path: inset(-45% 101% -45% -2%); }
  12%  { clip-path: inset(-45% 85% -45% -2%); }
  20%  { clip-path: inset(-45% 80% -45% -2%); }
  36%  { clip-path: inset(-45% 57% -45% -2%); }
  46%  { clip-path: inset(-45% 51% -45% -2%); }
  62%  { clip-path: inset(-45% 29% -45% -2%); }
  72%  { clip-path: inset(-45% 23% -45% -2%); }
  86%  { clip-path: inset(-45% 8% -45% -2%); }
  100% { clip-path: inset(-45% -4% -45% -2%); }
}

/* 表示順の制御(ユーザーFB: 下のタイトルが先に出ると変):
   .sec-head コンテナは隠さず、筆記体ラベルが視界に入った瞬間から書き始め、
   h2 タイトルは 0.25s 遅れてフェードイン(=手書きが必ず先行する)
   ※2026-08-28: 「表示タイミングが遅い」FB対応で .45s→.25s へ高速化 */
html.js .sec-head.reveal { opacity: 1 !important; transform: none !important; }
html.js .sec-head h2 {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) ease var(--dur-ui), transform var(--dur-reveal) ease var(--dur-ui);
}
html.js .sec-head.is-inview h2 {
  opacity: 1;
  transform: none;
}


.sec-head h2 {
  margin-top: 12px;
  font-size: var(--fz-30);
  font-weight: 400;
  letter-spacing: var(--ls);
}
/* セクション見出し直下のリード文(中央揃え・本文トークン) */
.sec-lead {
  margin-top: 16px;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: var(--ls);
  color: var(--ink);
}

/* ------------------------------------------------------------
   Strengths — アイドットの強み(3カラム: 画像+文章)
   ------------------------------------------------------------ */
.strengths { padding: clamp(56px, 8vh, 88px) var(--pad-x); }
.strengths-inner { max-width: var(--w-main); margin-inline: auto; }
.strengths-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.strength-photo {
  aspect-ratio: 4 / 3;
  background: var(--beige);
  overflow: hidden;
  border-radius: var(--radius-media);
}
.strength-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.strength-card h3 {
  margin-top: 24px;
  font-size: var(--fz-16); font-weight: 500;
  line-height: 1.5; letter-spacing: var(--ls);
}
.strength-card p {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: var(--ls);
}

/* ------------------------------------------------------------
   Cases — Before/After 仕上がり例(2カラム)
   ★ P1 背景リズム(2026-08-27): 薄ピンク帯(--tint-pink)。前後(strengths=白 / movies=白)と
     カラーで章を切って読ませる。帯の可読性を担保するため、当初あったピンク雲(::after)は
     ゴチャつきを避けて撤去。帯自体をクリーンに保つ(mayu-labo式)
   ------------------------------------------------------------ */
.cases { padding: clamp(56px, 8vh, 88px) var(--pad-x); background: var(--tint-pink); }
.cases-inner { max-width: var(--w-main); margin-inline: auto; }
.cases-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
}
.case-photo {
  aspect-ratio: 4 / 3;
  background: var(--beige);
  overflow: hidden;
  border-radius: var(--radius-media);
}
.case-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.case-card h3 {
  margin-top: 24px;
  font-size: var(--fz-16); font-weight: 500;
  line-height: 1.5; letter-spacing: var(--ls);
}
.case-card p {
  margin-top: 12px;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: var(--ls);
}
.cases-cta {
  margin-top: 48px;
  text-align: center;
}

/* Voice(お客様の声)末尾のPrimary CTA — 「証言→行動」を回収する定位置 */
.voice-cta {
  margin-top: 48px;
  text-align: center;
  position: relative; /* voice::after(雲)より前面に */
  z-index: 2;
}

/* ------------------------------------------------------------
   Movies — 施術動画(Instagramリール風・縦型9:16カード横並び)
   PCは中央寄せflexで4枚まで想定、SPは2カラムgrid
   ------------------------------------------------------------ */
.movies { padding: clamp(56px, 8vh, 88px) var(--pad-x); }
.movies-inner { max-width: var(--w-main); margin-inline: auto; }
.movies-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  padding: 0;
}
.movie-card {
  list-style: none;
  width: clamp(200px, 21vw, 280px);
}
/* hover の浮き上がりは li(reveal の transform + スタガー遅延を持つ)ではなく
   内側ラッパーに掛けて、フェードイン用トランジションと干渉しないようにする。
   ★ 2026-08-27 FB: .movie-lift を「スマートフォンのモックフレーム」風に翻案。
      - 外周: 太めの --ink ベゼル(padding 8/8/12)+ 角丸 --radius-phone(28px 実機感)
        + 薄影(ink .13)で「浮いてる端末」の印象
      - スクリーン: 内側の video 要素は --radius-bubble(18px)で角丸クリップ
      - 上部: ::before で Dynamic Island 風の黒い切り欠き(現代iPhone感)
      - 下部: 既存の ::after(hover ピンクライン)は home indicator の位置と重なるので継承
      - 動画の hover 浮き(translateY(-8px))は据置。ベゼル分の幅増は無し(padding は既存
        カード幅の内側で吸収)なのでSPカルーセルの scroll-snap には影響しない */
/* スマホフレーム(ベゼル+Dynamic Island)は2026-08-28ユーザーFBで撤去し、
   フレームなしのシンプルな角丸動画カードに戻した */
.movie-lift {
  position: relative; /* play オーバーレイ・進捗ゲージの基準 */
  aspect-ratio: 9 / 16;
  background: var(--beige);
  overflow: hidden;
  border-radius: var(--radius-media);
  transition: transform var(--dur-hover) ease;
}
.movie-card:hover .movie-lift { transform: translateY(-8px); }
.movie-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------
   Influencers — Instagram投稿風カードを白基調・角丸0・ヘアライン罫線に翻案
   PCは中央寄せflexで最大4枚まで、SPは2カラムgrid
   ★ P1 背景リズム(2026-08-27): 薄ピンク帯(--tint-pink)。voice=白 と news=白 の間に挟むことで
     Insta風カード(白地)が浮き上がり、章の変わり目にリズムが立つ
   ------------------------------------------------------------ */
.influencers { padding: clamp(56px, 8vh, 88px) var(--pad-x); background: var(--tint-pink); }
.influencers-inner { max-width: var(--w-main); margin-inline: auto; }
.insta-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  padding: 0;
}
.insta-card {
  list-style: none;
  width: clamp(200px, 21vw, 280px);
  /* P5: 視覚系(border/radius/bg/overflow/display)は .card-lift へ移設。
     外殻をレイアウトスロットに徹底し、hover の translateY(-8px) がクリップされないようにする */
}
.insta-card .card-lift {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px; /* Instagram投稿カードらしい控えめな角丸 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ヘッダー: アバター円 + スケルトン名前バー + ケバブ(3点) */
.insta-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
}
.insta-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--skeleton);
  flex-shrink: 0;
}
.insta-name {
  flex: 0 0 96px; height: 8px;
  background: var(--skeleton);
  border-radius: 2px;
}
.insta-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
}
.insta-more span {
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink);
}

/* 写真: 4:5 縦長、object-position はカード個別にインライン指定 */
.insta-photo {
  aspect-ratio: 4 / 5;
  background: var(--beige);
  overflow: hidden;
}
.insta-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

/* アクション行: 左にハート/コメント/紙飛行機、右にブックマーク */
.insta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 8px;
}
.insta-actions .insta-actions-left {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.insta-actions .insta-bookmark { margin-left: auto; }
.insta-actions svg {
  display: block;
  width: 20px; height: 20px;
  stroke: var(--ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* テキスト部: スケルトンバー2本(幅違い) */
.insta-lines {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insta-lines .insta-line {
  height: 8px;
  background: var(--skeleton);
  border-radius: 2px;
}
.insta-lines .insta-line.is-short { width: 62%; }

/* ボトムナビ: ホーム・虫めがね・プラス・ハート・アバター */
.insta-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}
.insta-nav svg {
  display: block;
  width: 18px; height: 18px;
  stroke: var(--ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.insta-nav .insta-nav-avatar {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--skeleton);
}

/* ------------------------------------------------------------
   Flow — 施術の流れ(6ステップ、PC3列×2行/SP1列)
   ★ P1 背景リズム(2026-08-27): 薄ピンク帯(--tint-pink)。前後(movies=白 / voice=白)と
     切り替わる章立てで「STEP を読ませる」区切りを作る
   ------------------------------------------------------------ */
.flow {
  padding: clamp(56px, 8vh, 88px) var(--pad-x);
  background: var(--tint-pink);
  position: relative;
  isolation: isolate;
}
/* 2026-09-05: 施術の流れだけ、カーテン越しの自然光を背景に試作。 */
.flow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../top/flow-daylight-v1.jpg') center / 100% 100% no-repeat;
  opacity: .8;
  pointer-events: none;
}
.flow-inner { max-width: var(--w-main); margin-inline: auto; }
@media (width <= 767px) {
  .flow::before { background-size: auto 100%; background-position: 18% center; }
}
.flow-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: clamp(40px, 5vw, 56px);
  list-style: none; padding: 0;
}
.flow-step { list-style: none; }
.flow-photo {
  aspect-ratio: 4 / 3;
  background: var(--beige);
  overflow: hidden;
  border-radius: var(--radius-media);
  margin-bottom: 20px;
}
.flow-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.flow-step .flow-num {
  display: block;
  font-size: var(--fz-12);
  letter-spacing: var(--ls-label);
  color: var(--ink-soft);
}
.flow-step h3 {
  margin-top: 12px;
  font-size: var(--fz-16); font-weight: 500;
  line-height: 1.5; letter-spacing: var(--ls);
}
.flow-step p {
  margin-top: 12px;
  font-size: var(--fz-13);
  line-height: 1.7;
  letter-spacing: var(--ls);
  color: var(--ink);
}

/* ------------------------------------------------------------
   Voice — お客様の声(吹き出し+人物アバター、2026-08-26 リデザイン)
   カードは「白吹き出し(voice-bubble)+しっぽ(::before/::after)+
   アバター行(voice-persona)」の縦2ブロック構成。しっぽは外側の淡ピンク
   三角の上に白三角を重ねてボーダーを追従させる古典技法で自然に接続する。
   ------------------------------------------------------------ */
.voice { padding: clamp(56px, 8vh, 88px) var(--pad-x); }
.voice-inner { max-width: var(--w-main); margin-inline: auto; }
.voice-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 32px);
}
.voice-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* 吹き出し本体: 白地+淡ピンクのヘアライン、角丸18px、ごく淡いピンクの影 */
.voice-bubble {
  position: relative;
  background: #fff;
  border: 1px solid rgba(224, 74, 94, .18);
  border-radius: 18px;
  padding: 28px 28px 28px;
  box-shadow: 0 2px 14px rgba(224, 74, 94, .15);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* しっぽ(下辺の左寄り): ::before=外側の淡ピンク三角、::after=内側の白三角で境界線を追従 */
.voice-bubble::before,
.voice-bubble::after {
  content: "";
  position: absolute;
  left: 36px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.voice-bubble::before {
  bottom: -12px;
  border-width: 12px 11px 0 11px;
  border-top-color: rgba(224, 74, 94, .18);
}
.voice-bubble::after {
  bottom: -10px;
  border-width: 11px 10px 0 10px;
  border-top-color: #fff;
}
.voice-stars {
  font-size: var(--fz-12);
  letter-spacing: var(--ls-label);
  color: var(--ink);
  line-height: 1;
}
.voice-body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: var(--ls);
  color: var(--ink);
}
/* アバター行: しっぽの真下に円形アバター、右に Google 口コミへのリンク */
.voice-persona {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 20px;
}
.voice-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tint-pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.voice-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.voice-cite {
  font-style: normal;
  min-width: 0;
}
.voice-source {
  font-size: var(--fz-12);
  letter-spacing: var(--ls-tight);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity var(--dur-hover) ease;
}
.voice-source:hover { opacity: .5; }

/* ------------------------------------------------------------
   News — お知らせ(3件+一覧CTA)
   ------------------------------------------------------------ */
.news { padding: clamp(56px, 8vh, 88px) var(--pad-x); }
.news-inner { max-width: var(--w-narrow); margin-inline: auto; }
.news-list {
  margin-top: clamp(32px, 4vw, 48px);
  list-style: none;
  border-top: 1px solid var(--hairline);
}
.news-item { border-bottom: 1px solid var(--hairline); }
.news-link {
  display: grid;
  grid-template-columns: 96px 108px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 20px 4px;
}
.news-date {
  font-size: var(--fz-12);
  letter-spacing: var(--ls);
  color: var(--ink-soft);
}
.news-cat {
  font-size: var(--fz-12);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.news-title {
  font-size: var(--fz-14);
  line-height: 1.5;
  letter-spacing: var(--ls);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--dur-hover) ease;
}
.news-link:hover .news-title { opacity: .5; }
.news-cta { margin-top: 40px; text-align: center; }

/* ------------------------------------------------------------
   Salons — Agu風のサロン検索セクション(左テキスト+右日本地図)
   全幅の淡いウォームグレー帯・白基調モノトーンで翻案
   ------------------------------------------------------------ */
.salons {
  padding: clamp(56px, 8vh, 96px) var(--pad-x);
  background: var(--band-gray);
}
.salons-inner {
  max-width: var(--w-main);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(48px, 5vw, 88px);
  align-items: start;
}
.salons-left { min-width: 0; }
.salons-right { min-width: 0; }

/* SALON. 見出しは他セクションの .sec-head h2 と同スペック(左揃えのみ差別化) */
.salons-heading {
  font-size: var(--fz-30);
  font-weight: 400;
  letter-spacing: var(--ls);
  line-height: 1.3;
  color: var(--ink);
}
.salons-lead {
  margin-top: clamp(16px, 1.6vw, 20px);
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: var(--ls);
  color: var(--ink);
}

/* エリアボタン 3列(3+3+2) */
.salons-btns {
  margin-top: clamp(24px, 2.5vw, 32px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  list-style: none;
  padding: 0;
}
.salons-btns li { list-style: none; }
.salon-area-btn {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fz-13);
  letter-spacing: var(--ls);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease;
}
.salon-area-btn:hover,
.salon-area-btn:focus-visible {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}

/* 店舗一覧CTA(エリアボタンの下、小さめリンク) */
.salons-list-cta {
  margin-top: 24px;
  display: inline-flex;
  color: var(--ink-soft);
  font-size: var(--fz-12);
  letter-spacing: var(--ls-body);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity var(--dur-hover) ease;
}
.salons-list-cta:hover { opacity: .6; }

/* 日本地図
   viewBox は実描画域(bbox: x46-1015 / y28-1000)に合わせて詰め、
   max-width も左カラム高さ(≒360px)に合わせて縮めることで左右のサイズ感を揃える */
.salons-map {
  display: block;
  width: 100%;
  height: auto;
  max-width: 380px;
  margin-inline: auto;
}
.japan-map .prefecture path,
.japan-map .prefecture polygon {
  fill: var(--map-gray);
  stroke: #FFFFFF;
  stroke-width: 1;
  transition: fill var(--dur-hover) ease;
}
.japan-map .prefecture { cursor: pointer; }
.japan-map .prefecture.is-hover path,
.japan-map .prefecture.is-hover polygon {
  fill: var(--ink);
}
.japan-map .boundary-line line {
  stroke: var(--ink-soft);
  stroke-width: 4;
  opacity: .2;
}

/* ------------------------------------------------------------
   Salon dialog — ネイティブ <dialog> のスタイル
   ------------------------------------------------------------ */
.salon-dialog {
  position: fixed;
  inset: 0;
  margin: auto;   /* Chromiumで UA スタイルに margin: auto が入らないケースがあるため明示 */
  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--dur-ui) ease;
}
.salon-dialog[open] { opacity: 1; }
.salon-dialog::backdrop {
  background: rgba(51, 51, 51, .45);
}
.salon-dialog-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  padding: 0;
  border: 0; background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: opacity var(--dur-hover) ease;
}
.salon-dialog-close:hover { opacity: .5; }
.salon-dialog-close svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 1.5;
  fill: none; stroke-linecap: round;
}
.salon-dialog-band {
  padding: 20px 24px;
  background: var(--beige);
  text-align: center;
  font-size: var(--fz-16);
  letter-spacing: var(--ls-body);
  color: var(--ink);
}
.salon-dialog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.salon-dialog-list li { list-style: none; }
.salon-dialog-pref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fz-14);
  letter-spacing: var(--ls);
  color: var(--ink);
  transition: background-color var(--dur-hover) ease;
}
a.salon-dialog-pref:hover { background: var(--band-gray); }
.salon-dialog-pref .arrow {
  color: var(--ink-soft);
  font-size: var(--fz-12);
}
.salon-dialog-pref.is-empty {
  color: var(--ink-soft);
  cursor: default;
}

/* ------------------------------------------------------------
   Recruit — 全幅の淡いグレー帯
   構成: 見出し → 横長CTAバナー(参考のピンクグラデ翻案・インクグラデ) →
        下段2カラム(左=ブロブ背景+ブラケット付きコピー、右=中央寄り人物カットアウト+薄影・下端接地)
   人物は帯下端に接地して「立っている」構図(footer 黒帯が地面線になる)
   ※2026-08-28: 「色数が多い」FBで--band-beige廃止。グレー帯が#salonsと2連続になり
   境界が消えたため、求人は白に変更(グレー→白→ピンク帯の交互リズムを回復)
   ------------------------------------------------------------ */
.recruit {
  padding: clamp(72px, 10vh, 112px) var(--pad-x) 0; /* 下は0(人物が下端に接地) */
  background: var(--paper);
  overflow: hidden; /* ブロブ・影のはみ出しで横スクロールが出ないよう封じる */
}
/* 白背景の殺風景対策(2026-08-28 FB): スタッフ写真の背後に大きなゴースト筆記体
   「Join us」+右上に淡い雲を敷き、他セクションの装飾言語(筆記体・雲)と揃える */
.recruit::before {
  content: "Join us";
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%) rotate(-6deg);
  font-family: "Sacramento", cursive;
  font-size: var(--fz-script-l);
  letter-spacing: var(--ls-script);
  line-height: 1;
  color: rgba(246, 189, 202, .36);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.recruit::after {
  content: "";
  position: absolute;
  top: -6%;
  right: -10%;
  width: clamp(360px, 40vw, 640px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240, 156, 176, .22) 0%, rgba(240, 156, 176, 0) 70%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}
.recruit { position: relative; }
.recruit-inner { position: relative; z-index: 1; }
.recruit-inner {
  max-width: var(--w-main);
  margin-inline: auto;
}
.recruit-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 56px);
}

/* 上部CTAバナー(参考ピンクグラデ→インクの斜めグラデに翻案、角丸0)
   左上に筆記体アクセント "Recruit" / 中央に「採用情報を見る」+ RECRUIT SITE キャプション /
   右端に "> " シェブロン。hover でシェブロンが4px右へ滑り、背景がわずかに明るくなる */
.recruit-cta-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 740px;
  min-height: 110px;
  margin: 0 auto clamp(56px, 7vw, 88px);
  padding: 24px clamp(56px, 6vw, 96px);
  /* ---- Accent系: ピンク×赤グラデ(--accent-grad)。hoverはやや明度アップ ---- */
  background: var(--accent-grad);
  color: #FFFFFF;
  text-decoration: none;
  overflow: hidden;
  transition: background var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.recruit-cta-banner:hover {
  background: var(--accent-grad-hover);
  box-shadow: 0 12px 28px rgba(224, 74, 94, .22);
}
.recruit-cta-banner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.recruit-cta-banner-main {
  font-size: var(--fz-18);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  color: #FFFFFF;
}
.recruit-cta-banner-en {
  font-size: var(--fz-12);
  letter-spacing: var(--ls-script);
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
}
.recruit-cta-banner-arrow {
  position: absolute;
  right: clamp(24px, 3vw, 36px);
  top: 50%;
  width: 22px;
  height: 22px;
  color: #FFFFFF;
  transform: translateY(-50%);
  transition: transform var(--dur-hover) ease;
}
.recruit-cta-banner:hover .recruit-cta-banner-arrow {
  transform: translate(4px, -50%);
}
/* 左上の筆記体アクセント(採用への手書きニュアンス。透過して控えめに、装飾のみ) */
.recruit-cta-banner-script {
  position: absolute;
  left: clamp(20px, 2.5vw, 32px);
  top: clamp(12px, 1.6vh, 18px);
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: var(--fz-30);
  color: rgba(255, 255, 255, .32);
  line-height: 1;
  pointer-events: none;
}

.recruit-grid {
  /* コピーブロック削除に伴い1カラム化: 写真をセクション中央・下端接地で置くだけの器 */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
/* リード文: 参考LPの「＼＼ 強調テキスト ／／」型。
   1行目=墨色でキーワード(アイブロウリスト)だけ大きく、2行目=ピンクの太めで締め、
   左右をピンクグラデの斜線2本ずつで挟んで視線を集める(吹き出し案から変更) */
.recruit-lead {
  position: relative;
  display: block;
  width: fit-content;
  margin: clamp(24px, 2.6vw, 32px) auto clamp(20px, 2vw, 24px);
  padding: 0 clamp(48px, 5vw, 72px);
  text-align: center;
  color: var(--ink);
}
.recruit-lead-l1 {
  display: block;
  font-size: var(--fz-18);
  line-height: 1.6;
  letter-spacing: var(--ls);
}
.recruit-lead-l1 strong {
  font-weight: 500;
  font-size: 1.4em;
  letter-spacing: var(--ls-tight);
  padding: 0 2px;
}
.recruit-lead-l2 {
  display: block;
  margin-top: 4px;
  font-size: var(--fz-21);
  font-weight: 500;
  letter-spacing: var(--ls-body);
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* 左右の斜線(各2本): 細いグラデバー2本を背景で描き、左=＼＼ 右=／／ に回転 */
.recruit-lead::before,
.recruit-lead::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30px;
  height: 46px;
  background-image:
    linear-gradient(180deg, #F5A0B5 0%, #E04A5E 100%),
    linear-gradient(180deg, #F5A0B5 0%, #E04A5E 100%);
  background-size: 3px 100%, 3px 78%;
  background-position: 0 50%, 14px 50%;
  background-repeat: no-repeat;
  border-radius: 2px;
}
.recruit-lead::before {
  left: 4px;
  transform: translateY(-50%) rotate(-28deg);
}
.recruit-lead::after {
  right: 4px;
  transform: translateY(-50%) rotate(28deg);
}
.recruit-lead::before {
  bottom: -11px;
  border-width: 11px 10px 0 10px;
  border-color: rgba(224, 74, 94, .22) transparent transparent transparent;
}
.recruit-lead::after {
  bottom: -9px;
  border-width: 10px 9px 0 9px;
  border-color: #FFFFFF transparent transparent transparent;
}
/* 右: 人物カットアウト(中央寄り・ブロブ右端に重なる・薄影・下端接地) */
.recruit-photo {
  align-self: flex-end;
  max-width: 560px;
  width: 100%;
  margin-inline: auto; /* センター配置(コピー削除に伴い負マージンの食い込みは廃止) */
}
.recruit-photo img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom; /* 下端の inline gap 対策 */
  /* 参考の輪郭影(subtle)。強すぎないよう offset を小さく・opacity を14%に */
  filter: drop-shadow(0 8px 20px rgba(51, 51, 51, .13));
}

/* ------------------------------------------------------------
   Outro — ダーク帯の締めCTA(P6 / 2026-08-27)
   ページ末尾(recruit ↓ footer の直前)に墨色帯を1本入れ、
   「眉から始まる、新しい自分。」+「店舗を探す」で読了後の行動を回収する。
   高さは --sp-section 準拠のコンパクトな帯。
   footer との連続(どちらも --ink)は上端ヘアラインで区切る。
   ------------------------------------------------------------ */
.outro {
  position: relative;
  overflow: hidden;
  padding: var(--sp-section) var(--pad-x);
  /* 黒(outro)×黒(footer)の2段はくどい、というFBによりピンクグラデの締め帯へ変更。
     「ピンクの帯→黒フッター」のコントラストで終章を作る */
  background: var(--accent-grad);
  color: #FFFFFF;
}
.outro-inner {
  position: relative;
  z-index: 1;
  max-width: var(--w-main);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
/* 締めコピー:ヒーロー h1 の再掲。「新しい自分。」だけ .accent-text でグラデ */
.outro-text {
  margin: 0;
  font-size: var(--fz-30);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  color: #FFFFFF;
}
/* ピンクグラデ帯の上ではアクセントグラデ文字が沈むため、outro内は白で通す */
.outro-text .accent-text {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: #FFFFFF;
          color: #FFFFFF;
}
/* 装飾筆記体「Beauty」を1つだけ、右寄りに白15%で入れる(散らしすぎない) */
.outro-script {
  position: absolute;
  z-index: 0;
  right: 4%;
  top: 24%;
  font-family: "Sacramento", cursive;
  font-weight: 400;
  font-size: var(--fz-script-m);
  letter-spacing: var(--ls-script);
  line-height: 1;
  color: rgba(255, 255, 255, .15);
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------
   .btn-on-dark — 濃色帯(ピンクグラデ/墨)上のボタン。
   2026-08-28 FB「ゴーストは背景同化して押せる認知が弱い」により白ベタソリッドへ変更。
   base .btn の min-height/padding/radius は継承。
   ------------------------------------------------------------ */
.btn-on-dark {
  background: #FFFFFF;
  color: var(--ink);
  border: 0;
  box-shadow: 0 8px 20px rgba(51, 51, 51, .13);
  transition: transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.btn-on-dark:hover {
  background: #FFFFFF;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(51, 51, 51, .13);
}

/* ------------------------------------------------------------
   Footer — 黒背景+白文字(salon-list.html 準拠)
   2026-08-27: 直前に .outro(同 --ink)を挟むため、footer 上端にヘアライン(白15%)を追加し
   締め帯と本体を切り分ける
   ------------------------------------------------------------ */
.footer {
  margin-top: 0;
  padding: clamp(56px, 8vh, 88px) var(--pad-x) 32px;
  background: var(--ink);
  color: #FFFFFF;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.footer-inner { max-width: var(--w-main); margin-inline: auto; }
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px;
}
.footer-mark {
  height: 32px; width: auto;
  filter: brightness(0) invert(1);
}
.footer-addr {
  margin-top: 20px;
  font-size: var(--fs-small);
  letter-spacing: var(--ls);
  color: rgba(255, 255, 255, .55);
}
.footer-nav { display: flex; gap: clamp(40px, 6vw, 96px); }
.footer-nav ul { list-style: none; display: grid; gap: 20px; align-content: start; }
.footer-nav a {
  font-size: var(--fs-small);
  letter-spacing: var(--ls);
  color: #FFFFFF;
  transition: opacity var(--dur-hover) ease;
}
.footer-nav a:hover { opacity: .5; }
/* P5: フッターナビも header と同じ対組化(白反転版・EN は白 32% 透過で控えめに) */
.footer-nav a.nav-pair {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.2;
  font-size: var(--fz-16);
}
.footer-nav a.nav-pair .nav-jp {
  font-size: var(--fz-16);
  letter-spacing: var(--ls-body);
  color: #FFFFFF;
}
.footer-nav a.nav-pair .nav-en {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: var(--fz-10);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.footer-bottom {
  margin-top: clamp(56px, 9vh, 96px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-small);
  letter-spacing: var(--ls);
  color: rgba(255, 255, 255, .55);
}
.footer-bottom .totop {
  color: #FFFFFF;
  transition: opacity var(--dur-hover) ease;
}
.footer-bottom .totop:hover { opacity: .5; }

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */
@media (width <= 1023px) {
  /* タブレット・SP共通: 見出し→リード→地図→ボタン→検索→リンク の縦積み
     .salons-left / .salons-right を display: contents で潰し、grid-template-areas で個別に配置 */
  .salons-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "lead"
      "map"
      "btns"
      "listcta";
    row-gap: 20px;
    column-gap: 0;
  }
  .salons-left { display: contents; }
  .salons-right { display: contents; }
  .salons-heading { grid-area: heading; }
  .salons-lead { grid-area: lead; margin-top: 0; }
  .salons-btns { grid-area: btns; margin-top: 0; }
  .salons-listcta-row { grid-area: listcta; margin-top: 0; }
  .salons-map { grid-area: map; max-width: 520px; margin-inline: auto; }
}

/* ------------------------------------------------------------
   SP
   ------------------------------------------------------------ */
@media (width <= 767px) {
  :root { --header-h: 64px; }

  .header-logo img { height: 40px; }
  .nav-toggle { display: inline-flex; }

  .gnav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--paper);
    padding: 24px var(--pad-x) 40px;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: transform var(--dur-ui) ease, opacity var(--dur-ui) ease, visibility var(--dur-ui) ease;
    z-index: 90;
  }
  .gnav.is-open {
    transform: translateY(0);
    opacity: 1; visibility: visible;
  }
  .gnav ul {
    flex-direction: column; align-items: center;
    gap: 28px; padding-top: 32px;
  }
  .gnav a { font-size: var(--fz-16); letter-spacing: var(--ls); }
  html.nav-open, body.nav-open { overflow: hidden; }

  .hero { min-height: auto; padding-block: 32px 40px; }
  .hero-inner {
    min-height: 0;
    /* minmax(0, 1fr) にしないと子(.stats-grid)のmin-contentで
       グリッドカラムが親を超えて広がり、hero-headやhero-photoまで
       右にはみ出す(360vw で 3個目 stat-emblem が見切れる原因) */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    /* SP: CTAは実績サークルの下(ユーザーFB 2026-08-27) */
    grid-template-areas:
      "head"
      "photo"
      "stats"
      "cta";
    column-gap: 0;
  }
  .hero-cta { display: none; } /* PC用(h1直下)はSPでは出さない */
  .hero-cta-sp {
    display: inline-flex;
    grid-area: cta;
    width: 100%;
    min-width: 0;
    margin-top: 24px;
  }
  .stat-emblem {
    width: clamp(100px, 28vw, 130px);
    height: clamp(94px, 26vw, 122px);
  }
  .stat-label {
    font-size: var(--fz-12);
    letter-spacing: var(--ls-body);
  }
  .stat-sub { display: none; } /* SPは補足を省いて数字を主役に */
  .stat-num { margin-top: 8px; }
  .stat-value { font-size: var(--fz-30); }
  .hero-head, .hero-photo { align-self: auto; }
  .hero-head h1 { font-size: var(--fz-38); line-height: 1.5; white-space: normal; }
  .hero-head h1 br { display: none; }
  /* SP: 右カラム外ブリードは解除(横スクロール封じ)しつつ、ブロブ形状はそのまま維持 */
  .hero-photo { margin: 32px 0 0; display: block; }
  /* SP: 縦型画像は幅100%基準に上書き(PCの max-height 制御を解除) */
  .hero-photo img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
  }
  .hero-photo::before { inset: 6% 12% -4% -8%; }  /* にじみは控えめに(はみ出し防止) */
  .hero-photo::after  { right: 2%; top: 4%; width: 22%; filter: blur(20px); }

  /* SP: 雲状ぼかしはコスト/はみ出しを避けて弱めに(blur量を減らし inset も控えめに) */
  .hero::before {
    inset: -2% -2% -2% -2%;
    filter: blur(48px);
  }
  /* SP: 画面が小さいので Beauty は大1つだけ残し(写真右上・弱め)、中小は非表示 */
  .hero-script--lg {
    left: auto;
    top: auto;
    bottom: 28%;
    right: -6%;
    font-size: var(--fz-script-l);
    opacity: .48;
    transform: rotate(-10deg) scaleX(1.08);
  }
  .hero-script--md, .hero-script--sm, .hero-script--x4, .hero-script--x5,
  .hero-script--eb1, .hero-script--eb2, .hero-script--eb3,
  .hero-script--b6, .hero-script--eb4 { display: none; }

  /* Showcase(SP): カード高さと gap を1段小さく。速度は共通の実測値に追従 */
  .showcase { padding: 32px 0; }
  .showcase-slide {
    height: clamp(160px, 42vw, 200px);
    margin-right: 12px;
  }

  .strengths { padding-block: 56px; }
  .strengths-grid { grid-template-columns: 1fr; gap: 48px; }
  .strength-card h3 { margin-top: 16px; }

  .cases { padding-block: 56px; }
  .cases-grid { grid-template-columns: 1fr; gap: 48px; }
  .case-card h3 { margin-top: 16px; }
  .cases-cta { margin-top: 40px; }
  .cases-cta .btn { width: 100%; min-width: 0; }

  .movies { padding-block: 56px; }
  /* SP: 2カラムgridから横スクロールカルーセルへ切り替え。
     scroll-snap で1枚単位のスナップ、幅68vwで次のカードが端から覗く。
     ページ全体の横スクロールを避けるため overflow は grid 内に収める */
  .movies-grid {
    display: flex;
    justify-content: flex-start; /* PC側の center を打ち消し(overflow時に先頭が左へ隠れる罠を回避) */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;         /* Firefox: スクロールバー非表示 */
    -ms-overflow-style: none;      /* 旧Edge/IE */
    -webkit-overflow-scrolling: touch;
  }
  .movies-grid::-webkit-scrollbar { display: none; } /* WebKit系: スクロールバー非表示 */
  .movie-card {
    flex: 0 0 auto;
    width: 68vw;                   /* 次カードが端から覗く幅(スクロール可能性の視覚ヒント) */
    scroll-snap-align: start;
  }

  .influencers { padding-block: 56px; }
  /* 2026-08-27 FB2: SPは横スクロールカルーセルへ切り替え(movies 準拠)。
     2カラム grid だと 3枚目が下段に折り返り「片側だけ空く」半端さが出るため、
     flex + overflow-x + scroll-snap の一貫パターンに寄せる。カード幅70vwで
     次カードが端から覗く=スクロール可能性の視覚ヒント。scrollbarは非表示、
     ページ全体の横スクロールは overflow が .insta-grid 内に閉じるので発生しない。 */
  .insta-grid {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .insta-grid::-webkit-scrollbar { display: none; }
  .insta-card {
    flex: 0 0 auto;
    width: 70vw;
    scroll-snap-align: start;
  }
  .insta-head { padding: 8px 12px; gap: 8px; }
  .insta-avatar { width: 24px; height: 24px; }
  .insta-name { flex-basis: 72px; height: 7px; }
  .insta-actions { gap: 12px; padding: 8px 12px 4px; }
  .insta-actions svg { width: 18px; height: 18px; }
  .insta-actions .insta-actions-left { gap: 12px; }
  .insta-lines { padding: 4px 12px 12px; gap: 4px; }
  .insta-lines .insta-line { height: 7px; }
  .insta-nav { padding: 8px 12px; }
  .insta-nav svg { width: 16px; height: 16px; }
  .insta-nav .insta-nav-avatar { width: 16px; height: 16px; }

  .flow { padding-block: 56px; }
  .flow-grid { grid-template-columns: 1fr; gap: 32px; }
  .flow-step h3 { margin-top: 12px; }
  .flow-step p { margin-top: 8px; }

  .voice { padding-block: 56px; }
  .voice-grid { grid-template-columns: 1fr; gap: 32px; }
  .voice-card { gap: 20px; }
  .voice-bubble { padding: 24px 24px 24px; }
  .voice-persona { padding-left: 16px; gap: 12px; }
  .voice-avatar { width: 52px; height: 52px; }

  .news { padding-block: 56px; }
  /* 2026-08-27 FB3: SPでは雲装飾(::after)を非表示に。
     ピンクの雲が本文行に掛かって可読性を落としていた(ニュースは読み物なので特に致命的)。
     PCは既存の右下雲を維持し、SPだけ帯装飾を落として文字の視認性を優先。 */
  .news::after { display: none; }
  .news-link {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date cat"
      "title title";
    column-gap: 16px;
    /* 2026-08-27 FB3: 1行目(日付+NEW OPEN)と2行目(タイトル)の間、および
       アイテム間の上下 padding を広げて詰まった見た目を解消。ヘアライン区切りは維持。 */
    row-gap: 12px;
    padding: 24px 4px;
  }
  .news-date  { grid-area: date; }
  .news-cat   { grid-area: cat; justify-self: start; align-self: center; }
  .news-title {
    grid-area: title;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .news-cta { margin-top: 32px; }
  .news-cta .btn { width: 100%; min-width: 0; }

  .salons { padding-block: 56px; }
  .salons-inner { row-gap: 32px; }
  .salons-heading { font-size: var(--fz-38); }
  .salons-btns {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .salon-area-btn { font-size: var(--fz-12); padding: 12px 8px; }
  .salons-map { max-width: 340px; }

  /* モーダル: SPは1列リスト・左右16px余白 */
  .salon-dialog { width: calc(100vw - 32px); max-height: 85vh; }
  .salon-dialog-list { grid-template-columns: 1fr; }
  .salon-dialog-pref { padding: 16px 20px; }
  .salon-dialog-band { padding: 16px 20px; font-size: var(--fz-14); }

  /* Recruit SP: 縦積み(バナー→コピー(ブロブ込み)→人物接地) */
  .recruit { padding: 56px var(--pad-x) 0; }
  .recruit-head { margin-bottom: 24px; }
  /* CTAバナー: SPは全幅・高さ・padding を控えめに */
  .recruit-cta-banner { min-height: 92px; margin-bottom: 40px; padding: 20px 48px; }
  .recruit-cta-banner-main { font-size: var(--fz-16); }
  .recruit-cta-banner-script { font-size: var(--fz-21); top: 10px; left: 16px; }
  .recruit-cta-banner-arrow { right: 16px; width: 20px; height: 20px; }
  .recruit-grid { grid-template-columns: 1fr; row-gap: 24px; column-gap: 0; align-items: stretch; }
  /* SPは人物を中央に戻す(横並びレイアウトでないため食い込み不要) */
  .recruit-photo { max-width: 380px; align-self: end; justify-self: center; margin-left: 0; margin-inline: auto; }

  /* Outro SP: 帯を1段コンパクトに、文字は --fz-21 で読みやすさ優先。装飾スクリプトは弱く小さく */
  .outro { padding-block: 48px; }
  .outro-inner { gap: 24px; }
  .outro-text { font-size: var(--fz-21); text-wrap: balance; }
  .outro-script {
    right: 4%;
    top: 12%;
    font-size: var(--fz-script-s);
    opacity: .8;
  }
  .outro .btn { width: 100%; min-width: 0; }

  .footer { padding-block: 56px 24px; }
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-bottom { margin-top: 48px; padding-top: 20px; }

  /* ----------------------------------------------------------
     SP: 改行位置の総点検(2026-08-27)
     日本語は文字数が多く助詞のあとで意図せず折り返しがちなので、
     長文には text-wrap: pretty(最終行の孤字防止)、短い見出し・リードには
     text-wrap: balance(左右の行長を揃える)を掛ける。
     一体で読ませたい固有語(Google口コミ・アイブロウリスト等)は
     display: inline-block で1トークン化する。
     ---------------------------------------------------------- */
  /* Hero h1 は SP で改行なし1行流し。バランスを取って美しく折る */
  .hero-head h1 { text-wrap: balance; }

  /* セクションのリード短文はバランス折り(1行だけ孤字にならない) */
  .sec-lead { text-wrap: balance; }

  /* Voice 吹き出し本文(長文JP)は pretty で最終行の孤字を防ぐ */
  .voice-body { text-wrap: pretty; }
  /* Voice の署名リンク(Googleの口コミより(店名))は単語途中で折れないよう
     inline-block+word-break: keep-all で「Googleの口コミより」「(店名)」の
     チャンク単位のみ折り返し可能に */
  .voice-source {
    display: inline-block;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 2026-08-27 FB4: 実績エンブレムを透過PNG化したため、旧 .stat-label/.stat-num の
     word-break: keep-all 対応は不要(テキストは画像に焼き込み済み) */

  /* Recruit リード(2026-08-27 SP改行総点検):
     - 現状 SP390px で l1 が 4 行に折れる(左右padding 48+48=96px を差し引くと本文幅は約240px、
       strong が 1.5em=約22.5px×8字≒180px を占めるため)。左右パッドと斜線バーを1段小さくし、
       本文幅を約275px確保。加えて strong を 1.4em に微縮、HTML に <wbr> を仕込んで
       「未経験からアイブロウリスト / を目指せる研修制度あり」の2行に落ち着かせる。
     - l2「一緒に働く仲間を募集しています!」は text-wrap: balance で左右対称に */
  .recruit-lead { padding: 0 32px; }
  .recruit-lead::before,
  .recruit-lead::after {
    width: 22px;
    height: 40px;
    background-size: 3px 100%, 3px 78%;
    background-position: 0 50%, 10px 50%;
  }
  .recruit-lead::before { left: 2px; }
  .recruit-lead::after  { right: 2px; }
  .recruit-lead-l1 { word-break: keep-all; overflow-wrap: anywhere; }
  .recruit-lead-l1 strong { display: inline-block; font-size: 1.4em; }
  .recruit-lead-l2 { text-wrap: balance; }

  /* Salons リード「アイブロウサロン i.(アイドット)は全国に…」等の固有語チャンクを
     単語途中で折らないよう keep-all を追加(<br> による意図改行は残る) */
  .salons-lead { word-break: keep-all; overflow-wrap: anywhere; }

  /* News タイトル(1行超で … 省略)、Nearby カードのタイトルなど短見出しの
     text-wrap: balance は視覚バランスに寄与するが、ellipsis と競合しないよう
     ellipsis が付いていない .strength-card h3 / .case-card h3 / .flow-step h3
     に限定して適用 */
  .strength-card h3,
  .case-card h3,
  .flow-step h3 { text-wrap: balance; }
  .strength-card p,
  .case-card p,
  .flow-step p { text-wrap: pretty; }

  /* Salons エリアボタンラベル「中国・四国」「九州・沖縄」等は中黒で折れやすい */
  .salon-area-btn { word-break: keep-all; }
}

/* SP: 3エンブレムを横並びのまま縮小(縦積みではなく)。
   エンブレム画像化(2026-08-27 FB4)により、テキスト/ラベル/リボンの個別調整は不要 */
@media (width <= 767px) {
  .stats { margin-top: 0; padding: 0; }
  .stats-grid {
    /* SP narrow(360vw)で 3個目が見切れていたFB(2026-08-28)対応:
       gap 上限を 8px にし、下の width 計算(2*4px)と整合させる */
    gap: clamp(4px, 1vw, 8px);
    flex-wrap: nowrap;
    justify-content: center;
    padding-right: 0;
  }
  /* SP: 授賞エンブレム(正方形)で3つ横並び。幅=高で縮小。
     360vw で 3個目が hero.overflow:hidden に食い込む問題を解消するため、
     hero-inner の内寸(=100vw - 40px pad)から gap 分(2*4)を引いて 3等分。
     min() でPC寄り上限140pxを維持しつつ、狭い画面では自動収縮する */
  .stat-emblem {
    width: min(140px, calc((100vw - 40px - 16px) / 3));
    height: min(140px, calc((100vw - 40px - 16px) / 3));
  }
}

/* ------------------------------------------------------------
   Tablet 中間幅 (768〜1023): 3カラムだと吹き出しカードが窮屈で
   端が切れて見える FB(2026-08-27)への対応。voice-grid を2カラム化し
   3枚目を新行へ落として左寄せに(見切れなし・視認性優先)。
   voice 以外の3カラムグリッド(strengths/flow)は幅に余裕があるためそのまま。
   ------------------------------------------------------------ */
@media (min-width: 768px) and (width <= 1023px) {
  .voice-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ------------------------------------------------------------
   Reveal — スクロール連動フェードイン(プログレッシブエンハンスメント)
   html.js スコープで初期非表示化するため、JS無効環境では常に表示される
   opacity と transform のみアニメ(compositor 化、レイアウトシフト回避)
   ------------------------------------------------------------ */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
html.js .reveal.is-inview {
  opacity: 1;
  transform: none;
}
/* ヒーロー: DOMContentLoadedで一括発火するロード時スタガー用 */
html.js .reveal-load {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
html.js .reveal-load.is-inview {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   Influencer 画像フィルター — 白基調に馴染む淡いエディトリアルトーン
   ------------------------------------------------------------ */
.insta-photo img {
  filter: brightness(1.04) contrast(.96) saturate(.88) sepia(.06);
}

/* ------------------------------------------------------------
   Accent系 — 差し色ユーティリティと装飾ブロブ(左右非対称のリズム)
   グラデテキストは 4点セット(background / clip / fill-color / color)。
   装飾ブロブは各セクションの ::before / ::after or 追加要素で配置し、
   親側で position:relative; overflow:hidden を掛けて横スクロールを封じる
   ------------------------------------------------------------ */
.accent-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* voice のスター評価: ピンク×赤グラデで華やかに(左寄せデコ) */
.voice-stars {
  background: var(--accent-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* strengths / cases / voice / news の装飾ピンク雲。
   ★ 2026-08-27 FB(第2版): 「全体的に雲を薄く・セクションごとにランダムな濃淡/サイズ/位置に散らす・
      ゆっくり漂わせる」の3点を反映して再設計。
      - 濃度: strengths=中(peak .56)/ voice=薄(peak .46)/ news=やや濃(peak .66)で明確に差別化。
        いずれも旧 peak .82 から1〜2段下げ、design.md §3-3 の許可α段 {.08 .22 .36 .46 .56 .66 .82} に
        スナップ。
      - サイズ/位置: 3セクションが「同じ雲」に見えないよう、幅・オフセット・blur・中心位置を
        個別に振る(下参照)。
      - ドリフト: 各 ::after に --dur-drift(42s) の translate+scale アニメを alternate infinite。
        3セクションはキーフレームで方向・振幅を変えて同期しないよう分散。transform のみ使用。
      - 上端/下端で「水平に切れて見える」不具合の予防で、gradient 中心を上下逆方向へオフセット
        する(FB4 の対策を維持)。
   横スクロール封じのため親に position:relative; overflow:hidden。
   cases は薄ピンク帯化に伴い雲を撤去(P1)。 */
.strengths, .cases, .voice, .news { position: relative; overflow: hidden; }

/* strengths(中): 右上に中サイズの雲。ドリフトはやや大きめの振幅 */
.strengths::after {
  content: "";
  position: absolute;
  top: -18%; right: -14%;
  width: clamp(520px, 74vw, 880px);
  height: clamp(520px, 74vw, 880px);
  background: radial-gradient(circle at 50% 65%,
    rgba(240, 156, 176, .56) 0%,
    rgba(240, 156, 176, .46) 20%,
    rgba(240, 156, 176, .36) 36%,
    rgba(240, 156, 176, .22) 56%,
    rgba(240, 156, 176, .08) 76%,
    rgba(240, 156, 176, 0) 92%);
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: cloud-drift-strengths var(--dur-drift) linear infinite alternate;
  will-change: transform;
}
.strengths > * { position: relative; z-index: 1; }

/* cases: 雲は撤去(2026-08-27 P1)。薄ピンク帯(--tint-pink)自体を主役にし、帯の面をクリーンに保つ。
   雲があると帯の淡ピンクと雲のロゼが二重塗りとなりゴチャつくため引き算で対応(mayu-labo式) */

/* voice(薄): 左下に大サイズの雲。振幅は控えめで「そこにあるかどうか分からない」漂い */
.voice::after {
  content: "";
  position: absolute;
  bottom: -24%; left: -22%;
  width: clamp(680px, 88vw, 1080px);
  height: clamp(680px, 88vw, 1080px);
  background: radial-gradient(circle at 50% 35%,
    rgba(240, 156, 176, .46) 0%,
    rgba(240, 156, 176, .36) 22%,
    rgba(240, 156, 176, .22) 42%,
    rgba(240, 156, 176, .08) 66%,
    rgba(240, 156, 176, 0) 92%);
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  animation: cloud-drift-voice calc(var(--dur-drift) * 1.31) linear infinite alternate;
  will-change: transform;
}
.voice > * { position: relative; z-index: 1; }

/* news(やや濃): 右下に中サイズの雲(newsは横幅880pxで狭いためコンパクトに濃く) */
.news::after {
  content: "";
  position: absolute;
  bottom: -20%; right: -18%;
  width: clamp(540px, 70vw, 840px);
  height: clamp(540px, 70vw, 840px);
  background: radial-gradient(circle at 50% 35%,
    rgba(240, 156, 176, .66) 0%,
    rgba(240, 156, 176, .56) 20%,
    rgba(240, 156, 176, .36) 36%,
    rgba(240, 156, 176, .22) 56%,
    rgba(240, 156, 176, .08) 76%,
    rgba(240, 156, 176, 0) 92%);
  border-radius: 50%;
  filter: blur(44px);
  z-index: 0;
  pointer-events: none;
  animation: cloud-drift-news calc(var(--dur-drift) * 1.57) linear infinite alternate;
  will-change: transform;
}
.news > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Cloud drift — 白セクションの雲(::after)を「気づくか気づかないか」の速度で漂わせる。
   3セクションで方向・振幅を変え、同じ42sサイクルでも視覚的に非同期に見えるよう分散。
   alternate + linear で終端の折り返しが自然。transform のみで compositor 化。
   ------------------------------------------------------------ */
/* 不規則な経由点(5点・非等間隔)+セクションごとに違う周期(下のcalc倍率)で、
   合成軌道が事実上リピートしない「擬似ランダム」の漂いにする(2026-08-28 FB)。
   振幅は最大4%・scale±6%に抑え、上品さを保つ */
@keyframes cloud-drift-strengths {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  23%  { transform: translate3d(2%, -1.2%, 0) scale(1.03); }
  47%  { transform: translate3d(0.6%, -2.4%, 0) scale(1.06); }
  74%  { transform: translate3d(3.2%, -0.8%, 0) scale(1.02); }
  100% { transform: translate3d(1.4%, -2%, 0) scale(1.05); }
}
@keyframes cloud-drift-voice {
  0%   { transform: translate3d(0, 0, 0) scale(1.02); }
  19%  { transform: translate3d(-1.6%, 1%, 0) scale(1.05); }
  52%  { transform: translate3d(-0.4%, 2.8%, 0) scale(1.01); }
  81%  { transform: translate3d(-2.6%, 1.4%, 0) scale(1.04); }
  100% { transform: translate3d(-1.2%, 3%, 0) scale(1.03); }
}
@keyframes cloud-drift-news {
  0%   { transform: translate3d(0, 0, 0) scale(1.04); }
  28%  { transform: translate3d(-1.8%, -1.6%, 0) scale(1.01); }
  55%  { transform: translate3d(-3%, -0.4%, 0) scale(1.05); }
  78%  { transform: translate3d(-1%, -2.2%, 0) scale(1.02); }
  100% { transform: translate3d(-2.4%, -1.2%, 0) scale(1); }
}

/* 2026-08-27 FB2: SP横スクロールカルーセル(movies / influencers)の
   スクロール可能アフォーダンス。PC(グリッド表示)では display:none。
   構造: <div class="carousel-hint">
             <div class="carousel-progress"><div class="carousel-progress-thumb"></div></div>
             <div class="carousel-swipe">スワイプ <span class="carousel-swipe-arrow" aria-hidden="true">→</span></div>
           </div>
   PC(≥768)では display:none。SP のみ表示。 */
.carousel-hint {
  display: none;
}
@media (width <= 767px) {
  .carousel-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 var(--pad-x);
  }
  .carousel-progress {
    position: relative;
    width: min(200px, 60%);
    height: 2px;
    background: var(--hairline);
    border-radius: 2px;
    overflow: hidden;
  }
  .carousel-progress-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* 初期はクライアント幅比の暫定値。JSで scrollWidth/clientWidth から幅と位置を更新 */
    width: 33%;
    background: var(--accent-grad);
    border-radius: 2px;
    transition: transform var(--dur-ui) ease, width var(--dur-ui) ease;
    will-change: transform, width;
  }
  .carousel-swipe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fz-12);
    letter-spacing: var(--ls-label);
    color: var(--ink-soft);
    transition: opacity var(--dur-hover) ease;
  }
  .carousel-swipe-arrow {
    display: inline-block;
    /* 矢印だけ横方向に往復:装飾ループなので --dur-decor (2s) */
    animation: carousel-swipe-arrow var(--dur-decor) ease-in-out infinite;
    transform-origin: left center;
  }
  /* スクロール末尾到達で「スワイプ →」ヒントをフェードアウト(進捗バーは残す) */
  .carousel-hint.is-end .carousel-swipe { opacity: 0; }
  @keyframes carousel-swipe-arrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(8px); }
  }
}

/* movies: hover 時に .movie-lift 下端が細くグラデで光る(左寄り控えめ1点) */
.movie-lift { position: relative; }
.movie-lift::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fx) var(--ease-out);
  pointer-events: none;
}
.movie-card:hover .movie-lift::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   2026-08-28: 施術動画の再生オーバーレイ(初期レビュー「サムネイル静止画のみ、
   再生アイコン等のオーバーレイがあるとよい」FB対応)
   - 半透明白円(rgba(255,255,255,.8))+ backdrop-blur + 墨▶三角
   - 停止中は表示(opacity 1)、再生中は .is-playing でフェードアウト+pointer-events:none
   - hover は白の不透明化と scale で「押せる」感を出す
   - 動画/オーバーレイどちらのクリックでも .movie-lift レベルで再生⇔停止トグル(JS側)
   ------------------------------------------------------------ */
.movie-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  opacity: 1;
  transition: opacity var(--dur-hover) ease, transform var(--dur-hover) ease, background var(--dur-hover) ease;
}
.movie-play svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  /* ▶ 三角の視覚センター微調整(左辺が直線・右が尖るため右へ2pxオフセット) */
  margin-left: 2px;
}
.movie-play:hover {
  background: var(--paper);
  transform: translate(-50%, -50%) scale(1.08);
}
.movie-play:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* 再生中はオーバーレイを消してクリックスルー(video 要素の pause 用) */
.movie-lift.is-playing .movie-play {
  opacity: 0;
  pointer-events: none;
}
/* 再生進捗ゲージ: カード下端の細いバー。timeupdate で scaleX を更新(リール風) */
.movie-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .32);
  z-index: 2;
  pointer-events: none;
}
.movie-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------------------------------------------------------------
   P5 モーション仕上げ: カードhoverの共通化
   movie-lift と同じ「translateY(-8px) + うっすら影(ink .13)」を
   strength / case / insta / voice(bubble) / nearby へ統一適用。
   reveal の transform/スタガー遅延と干渉しないよう、内側ラッパー
   .card-lift(strength/case/insta/nearby)/ .voice-bubble(voice)に付与する。
   --------------------------------------------------------------- */
.card-lift {
  transition: transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
/* voice-bubble は既存構造(voice-card > voice-bubble)を活かして直接付与。
   ベースの淡ピンク影(rgba(224,74,94,.15))を hover で .22 に深めて浮かす */
.voice-bubble {
  transition: transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

/* 2026-08-27 FB1(改): strength / case はフラット構成(写真+テキスト直下)。
   ユーザーFB「画像は浮かせていいが、文字は動かさない」に沿って、
   hover の translateY/影は写真ブロック(.strength-photo/.case-photo)側だけに掛ける。
   .card-lift ラッパーは既存のDOM互換のため残し、strength/case では静止させる。
   insta / nearby は「枠付きボックス+中身が一体」なので従来通り .card-lift ごと浮かす。 */
.strength-photo,
.case-photo {
  transition: transform var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}

/* 画像 hover の微ズーム: strength / case / insta の写真に scale(1.04) を
   var(--dur-fx) で。overflow:hidden は各 .*-photo 既存(はみ出しは切られる)。
   ※動画カード(.movie-card)は浮きのみ(既存)、ここには含めない */
.strength-photo img,
.case-photo img,
.insta-photo img {
  transition: transform var(--dur-fx) ease;
}

/* 2026-08-27 FB1: hover 演出はホバー可能デバイス(PC=マウス/ペン)限定。
   タッチ端末は「スティッキーhover」で box-shadow/translate が固まって
   strength/case カードが「白箱+影+写真食い込み」に見える不具合を招くため、
   media クエリで pointer:fine のみに限定する。SPは完全フラット。 */
@media (hover: hover) and (pointer: fine) {
  /* strength / case: 写真ブロックだけ浮かせる(テキストは静止) */
  .strength-card:hover .strength-photo,
  .case-card:hover .case-photo {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(51, 51, 51, .13);
  }
  /* insta / nearby: 枠付きの箱ごと浮かせる(FB1後も現状維持) */
  .insta-card:hover .card-lift,
  .nearby-card:hover .card-lift {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(51, 51, 51, .13);
  }
  .voice-card:hover .voice-bubble {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(224, 74, 94, .22);
  }
  .strength-card:hover .strength-photo img,
  .case-card:hover .case-photo img,
  .insta-card:hover .insta-photo img {
    transform: scale(1.04);
  }
}

/* influencers: 1枚目のカードのハートSVGだけグラデ塗り(右寄り、さりげなく) */
.insta-card:first-child .insta-actions-left svg:first-child {
  fill: url(#accentGrad);
  stroke: url(#accentGrad);
}

/* salons: エリアボタンの focus-visible 時のみアウトラインをアクセントに(hover は据置) */
.salon-area-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* reduced-motion 対応は意図的に外している(WindowsのOS設定でアニメ効果オフの
   環境が多く、演出が一切見えなくなるため)。WP本実装時に要再検討 */

/* ------------------------------------------------------------
   .mobile-cta — SP専用の下部固定2分割CTA(P2 / 2026-08-27・kegirai式定石)
   左「店舗を探す」(Secondary調・白地+ink枠) / 右「予約する」(Primary調・ピンクグラデ)
   高さ56px・上ヘアライン・z-index 80(dialog=90〜100 より下、コンテンツより上)
   ヒーロー通過後にスライドアップ+フェードで出現(JS: IntersectionObserver で .hero を監視)
   ------------------------------------------------------------ */
.mobile-cta {
  display: none; /* PCでは常時非表示 */
}
@media (width <= 767px) {
  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--dur-ui) ease, transform var(--dur-ui) ease;
    pointer-events: none;
  }
  .mobile-cta.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .mobile-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-size: var(--fz-14);
    font-weight: 500;
    letter-spacing: var(--ls-tight);
    text-align: center;
  }
  .mobile-cta .mobile-cta-secondary {
    background: var(--paper);
    color: var(--ink);
    border-right: 1px solid var(--hairline);
  }
  .mobile-cta .mobile-cta-primary {
    background: var(--accent-grad);
    color: #FFFFFF;
  }
  /* 固定バーぶんだけ本文下端に余白を確保(コンテンツ・フッターが隠れない) */
  body { padding-bottom: 56px; }

  /* SP: 各セクション CTA を Primary/Secondary とも全幅に(タップしやすさ優先) */
  .hero-cta { width: 100%; }
  .hero-cta.btn-primary { min-width: 0; width: 100%; }
  .cases-cta .btn-primary,
  .voice-cta .btn-primary { width: 100%; min-width: 0; }
}
/* 2026-09-05: 全面改修を撤回。元の構成・色・写真・動作はそのまま、寸法のみ調整。 */
.sec-head h2 { font-size: var(--fz-heading); }
.sec-lead,
.strength-card p,
.case-card p { line-height: 1.7; }
.flow-step p { font-size: var(--fz-14); }
.btn { font-size: var(--fz-14); }
.btn-primary { font-size: var(--fz-15); }
.btn-primary.is-sm { min-height: 44px; font-size: var(--fz-13); }
@media (min-width: 768px) {
  .hero-photo img { max-height: clamp(60vh, 70vh, calc(82svh - 48px)); }
}
@media (width <= 767px) {
  .hero-photo { margin-top: 24px; }
  .strengths-grid,
  .cases-grid,
  .movies-grid,
  .flow-grid,
  .voice-grid,
  .insta-grid { margin-top: 32px; }
  .strengths-grid,
  .cases-grid { gap: 40px; }
  .flow-grid { gap: 28px; }
  .flow-photo { width: calc(100% - 32px); margin-inline: auto; }
}
/* 2026-09-05 / 項目2・3・5・6: 既存デザインの細部だけを仕上げる。 */
.strengths-grid,
.cases-grid,
.movies-grid,
.flow-grid,
.voice-grid,
.insta-grid,
.news-list { margin-top: var(--sp-heading-content); }
.strength-card h3,
.case-card h3 { margin-top: var(--sp-photo-title); line-height: 1.6; }
.strength-card p,
.case-card p,
.flow-step p { margin-top: var(--sp-title-body); line-height: 1.75; }
.sec-head h2 { line-height: 1.5; text-wrap: balance; }
.sec-lead { line-height: 1.75; text-wrap: balance; }
.strength-card p,
.case-card p,
.voice-body { text-wrap: pretty; }
.voice-source,
.news-date,
.news-cat,
.flow-step .flow-num { font-size: var(--fz-13); color: var(--ink-note); line-height: 1.7; }
.voice-source { text-decoration: underline; text-underline-offset: 4px; }
.stat-sub { color: var(--ink-note); }
.insta-head .insta-avatar { width: 32px; height: 32px; object-fit: contain; background: var(--paper); }
.insta-head .insta-name { flex: 1; height: auto; background: none; font-size: var(--fz-13); font-weight: 500; line-height: 1.5; }
.insta-name span { display: block; margin-top: 2px; font-size: var(--fz-12); font-weight: 400; color: var(--ink-note); }
.insta-lines { min-height: 104px; padding: 8px 12px 16px; }
.insta-copy { font-size: var(--fz-13); line-height: 1.75; color: var(--ink); text-wrap: pretty; }
.insta-nav { margin-top: auto; }
.insta-profile-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 28px; font-size: var(--fz-13); color: var(--ink-note); text-decoration: underline; text-underline-offset: 4px; }
.insta-profile-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (min-width: 768px) {
  .voice-bubble { flex: 1; }
}
@media (width <= 767px) {
  :root { --sp-heading-content: 32px; --sp-photo-title: 16px; }
  .insta-lines { min-height: 104px; }
}


/* Approved Flow polish; scoped to the top page. */
.flow::before {
  content: none;
  background: none;
}

.flow-step p {
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}

/* Display-only grading: no bitmap, subject, crop, or size changes. */
.flow-photo img {
  filter: contrast(1.04) saturate(.97);
}

@media (width <= 767px) {
  .flow-step > .flow-num,
  .flow-step > h3,
  .flow-step > p {
    width: calc(100% - 32px);
    margin-inline: auto;
  }
}

/* Approved top-page polish, 2026-09-05. */
.hero {
  --hero-screen: calc(100svh - var(--header-h));
  --hero-pad: clamp(20px, 3svh, 40px);
  min-height: var(--hero-screen);
  padding-block: var(--hero-pad);
  display: grid;
  align-items: center;
}
.hero-inner {
  min-height: calc(var(--hero-screen) - var(--hero-pad) * 2);
}
.stat-body {
  width: 90%;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: center;
}
.stat-label { letter-spacing: var(--ls-tight); white-space: nowrap; }
.stat-sub { letter-spacing: 0; white-space: nowrap; }
.stat-num { justify-content: center; width: 100%; }
.stat-unit { font-size: var(--fz-14); letter-spacing: 0; }

.strengths::after,
.voice::after,
.news::after { opacity: .32; }
.strength-card:nth-child(3) .strength-photo img {
  filter: url('#staff-color-adjustment') contrast(1.04) saturate(.96);
}

.influencers .insta-card .card-lift {
  background: none;
  border: 0;
  border-radius: var(--radius-media);
  box-shadow: none;
}
.influencers .insta-card:hover .card-lift,
.influencers .insta-card:hover .insta-photo img {
  transform: none;
  box-shadow: none;
}
.visitor-cta { margin-top: var(--sp-heading-content); text-align: center; }

.voice-bubble {
  border-color: var(--hairline);
  border-radius: var(--radius-media);
  box-shadow: none;
}
.voice-bubble::before,
.voice-bubble::after { content: none; }
.voice-card { gap: 16px; }
.voice-persona { padding-inline: 28px; }
.voice-source { letter-spacing: var(--ls-tight); }
.flow-controls { display: none; }

@media (width <= 767px) {
  .hero { --hero-pad: 24px; }
  .hero-inner {
    grid-template-rows: auto minmax(180px, 1fr) auto auto;
    row-gap: 16px;
  }
  .hero-photo {
    margin: 0;
    padding: 0;
    align-self: center;
    display: flex;
    justify-content: center;
  }
  .hero-photo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: clamp(180px, calc(100svh - 416px), 420px);
    margin-inline: auto;
  }
  .hero-cta-sp { margin-top: 0; }
  .stats { margin-top: 0; }
  .stats-grid .stat-emblem {
    width: min(140px, calc((100% - 16px) / 3));
    height: auto;
    aspect-ratio: 1;
  }
  .stat-label { letter-spacing: 0; }
  .stat-unit { font-size: var(--fz-12); }

  .flow-ready .flow-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
  }
  .flow-paging { display: inline-flex; align-items: center; gap: 4px; }
  .flow-paging[hidden] { display: none; }
  .flow-arrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--hairline-hover);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .flow-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .flow-arrow[aria-disabled='true'] { opacity: .32; cursor: default; }
  .flow-counter { min-width: 52px; text-align: center; font-size: var(--fz-13); letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }
  .flow-toggle {
    min-height: 44px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--fz-13);
    letter-spacing: var(--ls-tight);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
  }
  .flow-controls :focus-visible,
  .flow-ready .flow-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .flow-ready .flow-grid { margin-top: 16px; }
  .flow-ready:not(.flow-expanded) .flow-grid {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-right: calc(-1 * var(--pad-x));
    padding-right: calc(var(--pad-x) + 32px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .flow-ready:not(.flow-expanded) .flow-grid::-webkit-scrollbar { display: none; }
  .flow-ready:not(.flow-expanded) .flow-step {
    flex: 0 0 var(--flow-card-width);
    scroll-snap-align: start;
  }
  /* The horizontally scrolled content stays visible without reveal timing. */
  html.js .flow-ready .flow-grid,
  html.js .flow-ready .flow-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .flow-ready:not(.flow-expanded) .flow-photo,
  .flow-ready:not(.flow-expanded) .flow-step > .flow-num,
  .flow-ready:not(.flow-expanded) .flow-step > h3,
  .flow-ready:not(.flow-expanded) .flow-step > p { width: 100%; margin-inline: 0; }
  .flow-expanded .flow-controls { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-ready .flow-grid { scroll-behavior: auto; }
}



/* LUMICIA reference: one luminous backdrop, a clear copy column, a larger portrait. */
.hero {
  --hero-pad: 0px;
  background: linear-gradient(180deg, var(--wash-1) 0%, #fff9fa 88%, var(--paper) 100%);
}
.hero::before {
  inset: 8% -8% 6% 32%;
  border-radius: 48% 0 0 48% / 52% 0 0 48%;
  background: var(--tint-pink) url('../top/top-20260925-pearl-light-f4886589c5dc.png') center / cover no-repeat;
  filter: none;
  opacity: .9;
  /* Feather the image edges into the underlying blush; keep the central sheen. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .15) 6%, rgba(0, 0, 0, .65) 15%, #000 25%, #000 72%, rgba(0, 0, 0, .65) 85%, rgba(0, 0, 0, .15) 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .15) 6%, rgba(0, 0, 0, .65) 15%, #000 25%, #000 72%, rgba(0, 0, 0, .65) 85%, rgba(0, 0, 0, .15) 94%, transparent 100%);
}
.hero-script { display: none; }
.hero-photo::before,
.hero-photo::after { content: none; }
.hero-inner {
  min-height: var(--hero-screen);
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: '. .' 'head .' 'stats .' 'cta .' '. .';
  column-gap: clamp(20px, 2vw, 32px);
}
.hero-head h1 {
  font-size: clamp(42px, 4.7vw, 72px);
  line-height: 1.4;
}
.hero-head .accent-text {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}
.hero-photo {
  position: absolute;
  right: calc(-1 * var(--pad-x) - 40px);
  bottom: 0;
  width: min(72vw, calc((var(--hero-screen) - 40px) * 1.198));
  margin: 0;
  padding: 0;
  align-self: end;
}
.hero-photo img {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  filter: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.hero .stats { margin-top: clamp(24px, 3svh, 36px); }
.hero .stats-grid { gap: clamp(12px, 1.25vw, 20px); }
.hero .stat-emblem {
  width: clamp(134px, 11.5vw, 174px);
  height: auto;
  aspect-ratio: 1;
}
.hero-cta {
  grid-area: cta;
  justify-self: start;
  position: relative;
  z-index: 2;
  min-width: 240px;
  margin-top: 28px;
}
.hero-wave {
  opacity: .36;
  -webkit-mask-image: linear-gradient(100deg, transparent 22%, rgba(0, 0, 0, .18) 45%, #000 80%);
  mask-image: linear-gradient(100deg, transparent 22%, rgba(0, 0, 0, .18) 45%, #000 80%);
}
.hero-wave-toggle { bottom: 16px; }
@media (width <= 1023px) {
  .hero { --hero-pad: 24px; }
  .hero::before {
    inset: 21% -18% 23% 8%;
    border-radius: 48% 0 0 48% / 45% 0 0 45%;
  }
  .hero-inner {
    min-height: calc(var(--hero-screen) - var(--hero-pad) * 2);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(180px, 1fr) auto auto;
    grid-template-areas: 'head' 'photo' 'stats' 'cta';
    row-gap: 16px;
    column-gap: 0;
  }
  .hero-head { align-self: start; }
  .hero-head h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.45; white-space: normal; }
  .hero-head h1 br { display: inline; }
  .hero-photo {
    grid-area: photo;
    position: relative;
    inset: auto;
    align-self: center;
    justify-self: center;
    justify-content: center;
    width: calc(100% + var(--pad-x) * 2);
    max-height: clamp(180px, calc(100svh - 420px), 660px);
    margin: 0;
  }
  .hero-photo img {
    width: auto;
    max-width: 100%;
    max-height: clamp(180px, calc(100svh - 420px), 660px);
    margin: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .hero .stats { margin-top: 0; justify-self: center; width: min(100%, 540px); }
  .hero .stats-grid { justify-content: center; gap: 8px; }
  .hero .stats-grid .stat-emblem { width: min(156px, calc((100% - 16px) / 3)); }
  .hero-cta { display: none; }
  .hero-cta-sp {
    display: inline-flex;
    grid-area: cta;
    justify-self: center;
    width: min(100%, 540px);
    min-width: 0;
    margin-top: 0;
  }
  .hero-wave {
    opacity: .3;
    -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000);
    mask-image: linear-gradient(90deg, transparent 10%, #000);
  }
  .hero-wave-toggle { top: 12px; right: 8px; bottom: auto; }
}
@media (width <= 767px) {
  .hero-head { padding-right: 32px; }
  .hero-head h1 { font-size: clamp(30px, 8.2vw, 38px); }
}



/* Use the supplied square artwork without distorting it or changing the layout. */
.hero { background: var(--paper); }
.hero::before {
  inset: 0;
  border-radius: 0;
  background: url('../top/top-20260925-user-wave-34d3430add41.png') 50% 74% / cover no-repeat;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 5%, #000 12%, #000 78%, rgba(0, 0, 0, .6) 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 5%, #000 12%, #000 78%, rgba(0, 0, 0, .6) 90%, transparent);
}
/* The supplied artwork already contains a wave: do not stack another motif. */
.hero-wave,
.hero-wave-toggle { display: none; }
.hero-wave__ribbon { animation: none; }
@media (width <= 1023px) {
  .hero::before { background-position: 57% 50%; }
}
@media (width <= 767px) {
  .hero::before {
    background-position: 58% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5) 7%, #000 18%, #000 78%, rgba(0, 0, 0, .5) 92%, transparent);
    mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5) 7%, #000 18%, #000 78%, rgba(0, 0, 0, .5) 92%, transparent);
  }
}



/* Local model trial: retain the approved copy, badge and CTA layout. */
.hero-photo {
  top: 50%;
  right: calc(-1 * var(--pad-x));
  bottom: auto;
  width: min(64vw, calc(var(--hero-screen) * 1.12));
  height: min(calc(var(--hero-screen) * .96), 75vw);
  translate: 0 -54%;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: right top;
  /* Blend the background composite into the original supplied wave image. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 98%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 98%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (width <= 1023px) {
  .hero-inner {
    height: calc(var(--hero-screen) - var(--hero-pad) * 2);
  }
  .hero-photo {
    inset: auto;
    width: auto;
    max-width: calc(100% + var(--pad-x) * 2);
    height: 100%;
    aspect-ratio: 1.08;
    translate: none;
  }
  .hero-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 98%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 98%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 80%, transparent);
  }
}



/* The supplied wave artwork, recolored without filtering the model or text. */
.hero::before {
  background-image: url('../top/top-20260925-user-wave-pink-c715bfdeaf35.png');
}



/* Keep the user's selected portrait untouched and reveal it with a separate mask. */
.hero-photo {
  width: min(62vw, calc(var(--hero-screen) * .97));
  height: min(62vw, calc(var(--hero-screen) * .97));
  aspect-ratio: 1;
  translate: 0 -53%;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent);
  mask-image: linear-gradient(180deg, #000 86%, transparent);
}
.hero-photo img {
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: url('../top/top-20260925-hero-model-selected-mask-dd8051f68568.png');
  mask-image: url('../top/top-20260925-hero-model-selected-mask-dd8051f68568.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: luminance;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
@media (width <= 1023px) {
  .hero-photo {
    width: min(calc(100% + var(--pad-x) * 2), clamp(180px, calc(100svh - 420px), 660px));
    height: auto;
    max-height: 100%;
    translate: none;
  }
}



/* CSS-only ribbons: varied scale, weight and curvature across the entire FV. */
/* Production body colour, verified in edge-8-i.com's theme CSS on 2026-09-06. */
.hero { background: #fefaf3; }
.hero::before {
  inset: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 90% 30%, #fce9f1 0%, rgba(252, 233, 241, .3) 43%, rgba(252, 233, 241, 0) 78%);
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-css-wave {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.65) 42%, #000 76%), linear-gradient(180deg, transparent, #000 8%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.36), rgba(0,0,0,.65) 42%, #000 76%), linear-gradient(180deg, transparent, #000 8%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-css-wave span {
  position: absolute;
  box-sizing: border-box;
  width: var(--wave-width, 178%);
  height: var(--wave-height, 195%);
  left: var(--wave-left, -56%);
  top: var(--wave-top);
  border-radius: 50%;
  border: 0 solid transparent;
  border-bottom: var(--wave-weight) solid var(--wave-color, rgba(236, 183, 209, .25));
  transform: rotate(var(--wave-tilt, -14deg));
}
/* Eight broad upward sweeps, interspersed with fine accents. */
.hero-css-wave span:nth-child(1) { --wave-top: -132%; --wave-weight: clamp(2px, .3vw, 5px); --wave-color: rgba(232,176,205,.28); }
.hero-css-wave span:nth-child(2) { --wave-top: -127%; --wave-weight: clamp(18px, 3vw, 50px); --wave-color: rgba(248,218,233,.46); --wave-tilt: -13deg; }
.hero-css-wave span:nth-child(3) { --wave-top: -117%; --wave-weight: clamp(7px, 1.1vw, 18px); --wave-tilt: -15deg; }
.hero-css-wave span:nth-child(4) { --wave-top: -109%; --wave-weight: clamp(28px, 5vw, 76px); --wave-color: rgba(244,207,225,.35); --wave-width: 184%; --wave-tilt: -12deg; }
.hero-css-wave span:nth-child(5) { --wave-top: -98%; --wave-weight: clamp(2px, .35vw, 6px); --wave-color: rgba(233,177,207,.32); }
.hero-css-wave span:nth-child(6) { --wave-top: -92%; --wave-weight: clamp(14px, 2.5vw, 38px); --wave-color: rgba(242,199,222,.31); --wave-tilt: -16deg; }
.hero-css-wave span:nth-child(7) { --wave-top: -83%; --wave-weight: clamp(4px, .75vw, 12px); --wave-tilt: -13deg; }
.hero-css-wave span:nth-child(8) { --wave-top: -75%; --wave-weight: clamp(32px, 5.5vw, 84px); --wave-color: rgba(249,220,234,.48); }
/* Six gentler counter-curves reach the upper area without a dense stripe bundle. */
.hero-css-wave span:nth-child(n+9) {
  --wave-width: 162%;
  --wave-height: 148%;
  --wave-left: -20%;
  --wave-tilt: 12deg;
  --wave-color: rgba(242,209,228,.29);
}
.hero-css-wave span:nth-child(9) { --wave-top: -133%; --wave-weight: clamp(16px, 2.6vw, 40px); }
.hero-css-wave span:nth-child(10) { --wave-top: -126%; --wave-weight: clamp(2px, .25vw, 4px); --wave-color: rgba(234,186,216,.27); }
.hero-css-wave span:nth-child(11) { --wave-top: -116%; --wave-weight: clamp(24px, 4.5vw, 68px); --wave-tilt: 10deg; }
.hero-css-wave span:nth-child(12) { --wave-top: -103%; --wave-weight: clamp(5px, .7vw, 11px); --wave-tilt: 14deg; }
.hero-css-wave span:nth-child(13) { --wave-top: -95%; --wave-weight: clamp(12px, 2vw, 30px); --wave-color: rgba(247,218,234,.4); }
.hero-css-wave span:nth-child(14) { --wave-top: -87%; --wave-weight: clamp(2px, .3vw, 5px); --wave-tilt: 11deg; }
.hero-photo {
  clip-path: inset(0 0 18% 0);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 82%);
}
.hero + .showcase { padding-top: 0; }
@media (width <= 1023px) {
  .hero-css-wave span {
    width: 280%;
    height: 175%;
    left: -152%;
    top: calc(var(--wave-top) + 33%);
    transform: rotate(-27deg);
  }
  .hero-css-wave span:nth-child(n+9) {
    width: 245%;
    height: 150%;
    left: -45%;
    top: calc(var(--wave-top) + 12%);
    transform: rotate(18deg);
  }
}



/* Local FV trial: MAYU LABO's width-led height + LUMICIA's portrait hierarchy.
   The header is in normal flow here, so subtract it from the desktop FV total.
   Keep the selected portrait pixels, separate mask, chest crop and 14 CSS waves. */
.hero {
  --hero-screen: clamp(300px, calc(50vw - var(--header-h)), 876px);
  --hero-pad: 0px;
  --portrait-size: min(62vw, calc((var(--hero-screen) - 48px) / .765), 1080px);
  height: var(--hero-screen);
  min-height: 0;
  padding-block: 0;
  align-items: stretch;
}
.hero-inner {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: '. .' 'head .' 'stats .' '. .';
  column-gap: clamp(20px, 2vw, 32px);
  row-gap: 0;
}
.hero-head { align-self: start; padding-right: 0; }
.hero-head h1 {
  font-size: clamp(32px, 4.45vw, 72px);
  line-height: 1.4;
  white-space: nowrap;
}
.hero-head h1 br { display: initial; }
.hero .stats {
  width: auto;
  margin-top: clamp(20px, 2.5vw, 40px);
  justify-self: start;
}
.hero .stats-grid { justify-content: flex-start; gap: clamp(8px, 1.2vw, 20px); }
.hero .stats-grid .stat-emblem {
  width: clamp(90px, 11.5vw, 174px);
  height: auto;
  aspect-ratio: 1;
}
.hero .stat-label { font-size: clamp(9px, .92vw, 13px); }
.hero .stat-sub { font-size: clamp(8px, .8vw, 12px); }
.hero .stat-num { margin-top: clamp(6px, .75vw, 12px); }
.hero .stat-value { font-size: clamp(24px, 3.15vw, 47px); }
.hero .stat-unit { font-size: clamp(9px, .9vw, 14px); }
.hero-photo {
  position: absolute;
  inset: 50% calc(-1 * var(--pad-x)) auto auto;
  width: var(--portrait-size);
  height: var(--portrait-size);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  /* Center the visible 5.5–82% of the square, not its discarded lower edge. */
  translate: 0 -43.75%;
  display: flex;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}

@media (width <= 767px) {
  .hero {
    --portrait-size: min(130vw, 680px);
    height: auto;
    padding-block: 24px 28px;
  }
  .hero-inner {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: 'head' 'photo' 'stats';
    gap: 16px 0;
  }
  .hero-head h1 {
    font-size: clamp(30px, 8.2vw, 42px);
    white-space: normal;
  }
  .hero-photo {
    position: relative;
    inset: auto;
    align-self: start;
    justify-self: center;
    translate: none;
    /* Remove both the transparent crown margin and cropped chest from flow. */
    margin-top: calc(var(--portrait-size) * -.055);
    margin-bottom: calc(var(--portrait-size) * -.18);
    /* Fade the lower hair/arms into the live background, keeping face, silhouette
       mask and layout intact. Desktop retains its original narrow edge fade. */
    --portrait-fade: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.22) 77%, transparent 82%);
    -webkit-mask-image: var(--portrait-fade);
    mask-image: var(--portrait-fade);
  }
  .hero .stats { width: min(100%, 460px); margin: 0; justify-self: center; }
  .hero .stats-grid { justify-content: center; gap: 8px; }
  .hero .stats-grid .stat-emblem { width: min(148px, calc((100% - 16px) / 3)); }
  .hero .stat-label { font-size: clamp(10px, 3vw, 13px); }
  .hero .stat-num { margin-top: 8px; }
  .hero .stat-value { font-size: clamp(24px, 6.6vw, 38px); }
  .hero .stat-unit { font-size: clamp(9px, 2.7vw, 12px); }
}



/* Local trial: a 14% extension on the NE/SW axis, without distorting any text.
   The painted SVG rings retain their original stroke weights and colours. */
.hero .stat-emblem > .emblem-line,
.hero .stat-emblem::before {
  transform: rotate(-45deg) scaleX(1.14) rotate(45deg);
  transform-origin: 50% 50%;
  transform-box: border-box;
}

/* Keep the four-point jewellery motif: one main glint and two smaller accents.
   The fine beige clearance keeps the ring from cutting through the yellow fill. */
.hero .emblem-sparkles .emblem-star {
  fill: #f4d03f;
  fill-opacity: 1;
  stroke: #fefaf3;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
}
.hero .emblem-sparkles .emblem-star.is-small {
  fill: #f9e276;
  stroke-width: 1;
}



/* Whole-page local palette trial. Keep photography, pink accents and dark
   navigation/CTA contrast intact; replace the white and cool light surfaces. */
:root {
  --page-beige: #faf3e8;
  --page-beige-rgb: 250, 243, 232;
  --paper: var(--page-beige);
  --beige: #eee4d6;
  --tint-pink: #f6eddf;
  --band-gray: #f6eddf;
  --skeleton: #eee4d6;
}

html,
.hero { background-color: var(--paper); }

/* Replace opaque whites as well as the small frosted surfaces. */
.voice-bubble,
.btn-on-dark,
.btn-on-dark:hover { background: var(--paper); }
.voice-bubble::after,
.recruit-lead::after { border-top-color: var(--paper); }
.hero .stat-emblem::before {
  background: rgba(var(--page-beige-rgb), .75);
  box-shadow:
    inset 0 1px 0 rgba(var(--page-beige-rgb), .55),
    inset 0 -1px 0 rgba(51, 51, 51, .08);
}
.hero .emblem-sparkles .emblem-star { stroke: var(--paper); }
.movie-play { background: rgba(var(--page-beige-rgb), .9); }
.movie-play:hover { background: var(--paper); }
.movie-progress { background: rgba(var(--page-beige-rgb), .32); }



/* Restrained local trial: change only the original English label's size and
   weight. Inherit Caveat, pink gradient, casing, spacing and handwriting motion.
   Japanese headings and the rest of the page keep their deployed styles. */
.sec-head .sec-en {
  font-size: clamp(32px, 2.933333vw, 40px);
  font-weight: 600;
}



/* One review score, using the same geometry and type scale as the other badges.
   34,806 reviews / 165,726 points = 4.761420..., rounded to two decimals. */
.hero .stat-body--reviews .stat-value { font-variant-numeric: tabular-nums; }
.hero .review-note {
  margin-top: clamp(16px, 1.4vw, 22px);
  color: var(--ink-note);
  font-size: clamp(9px, .7vw, 11px);
  line-height: 1.65;
  text-wrap: pretty;
}
.hero .review-note span { display: block; }
@media (width <= 767px) {
  .hero .review-note { margin-top: 16px; font-size: 9px; text-align: center; }
}



/* Supplied wrap portrait: native alpha, independent of the live CSS background.
   Its face is further left than the previous portrait. Shift the canvas right
   so the face occupies the same visual column and the fabric can bleed out. */
html[data-portrait="wrap"] .hero-photo {
  --wrap-width: min(65vw, calc((var(--hero-screen) - 32px) / .82 * 1.12966), 1180px);
  width: var(--wrap-width);
  height: auto;
  aspect-ratio: 1333 / 1180;
  inset: 50% calc(-1 * var(--pad-x) - 8vw) auto auto;
  translate: 0 -47.5%;
  clip-path: inset(0 0 12% 0);
  --wrap-fade: linear-gradient(180deg, #000 0%, #000 75%, rgba(0,0,0,.92) 79%, rgba(0,0,0,.5) 84%, transparent 88%);
  -webkit-mask-image: var(--wrap-fade);
  mask-image: var(--wrap-fade);
}
html[data-portrait="wrap"] .hero-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1333 / 1180;
  object-fit: contain;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
}
@media (width <= 767px) {
  html[data-portrait="wrap"] .hero-photo {
    --wrap-width: min(124vw, 680px);
    position: relative;
    inset: auto;
    translate: 12% 0;
    margin-top: calc(var(--wrap-width) * -.065 / 1.12966);
    margin-bottom: calc(var(--wrap-width) * -.12 / 1.12966);
    --wrap-fade: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.93) 66%, rgba(0,0,0,.55) 76%, rgba(0,0,0,.14) 84%, transparent 88%);
  }
}



/* One broad translucent sweep behind the portrait, with fine contour lines.
   Keep the copy column calm and let the real photograph carry the colour. */
html .hero {
  --editorial-rose: var(--theme-wave-rgb, 224, 144, 167);
  background: var(--paper);
}
html .hero::before,
html[data-palette] .hero::before {
  inset: -37% -25% -18% 40%;
  border-radius: 50%;
  transform: rotate(-22deg);
  background: linear-gradient(135deg,
    rgba(var(--editorial-rose), .06) 12%,
    rgba(var(--editorial-rose), .2) 50%,
    rgba(var(--editorial-rose), .1) 76%,
    rgba(var(--editorial-rose), 0) 95%);
  filter: none;
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
}
html .hero .hero-css-wave {
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, rgba(0,0,0,.28) 30%, #000 67%), linear-gradient(180deg, transparent, #000 15%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent 3%, rgba(0,0,0,.28) 30%, #000 67%), linear-gradient(180deg, transparent, #000 15%, #000 82%, transparent);
}
html .hero .hero-css-wave span { display: none; }
html .hero .hero-css-wave span:nth-child(-n+3) {
  display: block;
  width: 146%;
  height: 177%;
  left: -35%;
  top: -92%;
  border: 0;
  border-bottom: clamp(34px, 5.5vw, 84px) solid rgba(var(--editorial-rose), .1);
  border-radius: 50%;
  transform: rotate(-21deg);
}
html .hero .hero-css-wave span:nth-child(2) {
  top: -86%;
  border-bottom: 1px solid rgba(var(--editorial-rose), .3);
}
html .hero .hero-css-wave span:nth-child(3) {
  top: -81%;
  border-bottom: 1px solid rgba(var(--editorial-rose), .13);
}
@media (width <= 767px) {
  html .hero::before,
  html[data-palette] .hero::before {
    inset: 22% -64% 10% 11%;
    transform: rotate(-25deg);
    -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  }
  html .hero .hero-css-wave span:nth-child(-n+3) {
    width: 248%;
    height: 96%;
    left: -117%;
    top: -17%;
    transform: rotate(-31deg);
  }
  html .hero .hero-css-wave span:nth-child(2) { top: -12%; }
  html .hero .hero-css-wave span:nth-child(3) { top: -8%; }
}

/* Selected accents below the FV; reading and moving-media sections stay quiet.
   Existing paper/tint bands, photos, text and typography remain unchanged. */
html :is(.strengths, .voice, .recruit) {
  --section-shape-rgb: var(--theme-wave-rgb, 224, 144, 167);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
html .strengths::before { content: none; }
html :is(.cases, .movies, .flow, .influencers, .news, .salons)::after {
  content: none;
  animation: none;
  filter: none;
  will-change: auto;
}
html :is(.strengths, .voice, .recruit)::after {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  inset: auto;
  aspect-ratio: auto;
  border: 0;
  outline: 0;
  background: none;
  filter: none;
  opacity: 1;
  animation: none;
  will-change: auto;
  pointer-events: none;
  z-index: 0;
}
/* A shallow sweep enters from the right, rather than a full-height circle. */
html .strengths::after {
  width: min(112vw, 1600px);
  height: clamp(260px, 30vw, 440px);
  right: -24%;
  bottom: -15%;
  border-top: clamp(24px, 3vw, 42px) solid rgba(var(--section-shape-rgb), .11);
  border-radius: 50%;
  transform: rotate(-10deg);
}
/* One fine, low arc leaves the review text and the card interiors untouched. */
html .voice::after {
  width: clamp(460px, 45vw, 720px);
  height: 180px;
  left: -120px;
  bottom: -25px;
  border-top: 1px solid rgba(var(--section-shape-rgb), .26);
  border-radius: 50%;
  transform: rotate(-14deg);
}
/* Main preview: two broad, asymmetric sweeps replace the isolated thin arc.
   Filled silhouettes vary in width; there is no hairline contour or motion. */
html:not([data-palette]) .voice::after {
  content: "";
  display: block;
  width: 100%;
  height: clamp(260px, 27vw, 380px);
  left: 0;
  bottom: -24px;
  border: 0;
  border-radius: 0;
  transform: none;
  background: rgba(var(--section-shape-rgb), .18);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20380%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-140%20120C190%2010%20420%20350%20835%20230S1230%2090%201590%20185L1590%20265C1210%20143%201120%20222%20850%20288S200%20114-140%20202Z%22%2F%3E%3Cpath%20opacity%3D%22.45%22%20d%3D%22M-140%20224C200%20119%20432%20423%20874%20306S1240%20185%201590%20285L1590%20327C1230%20221%201144%20295%20888%20342S206%20177-140%20263Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20380%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-140%20120C190%2010%20420%20350%20835%20230S1230%2090%201590%20185L1590%20265C1210%20143%201120%20222%20850%20288S200%20114-140%20202Z%22%2F%3E%3Cpath%20opacity%3D%22.45%22%20d%3D%22M-140%20224C200%20119%20432%20423%20874%20306S1240%20185%201590%20285L1590%20327C1230%20221%201144%20295%20888%20342S206%20177-140%20263Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* A single soft-coloured surface behind the staff, with no outline or blur. */
html .recruit::after {
  width: clamp(560px, 68vw, 1050px);
  height: clamp(300px, 44vw, 600px);
  right: -8%;
  bottom: -90px;
  border-radius: 60% 0 0 0 / 90% 0 0 0;
  background: rgba(var(--section-shape-rgb), .10);
  transform: none;
}
@media (width <= 767px) {
  html .strengths::after {
    width: 820px;
    height: 300px;
    right: -560px;
    bottom: 12%;
    border-top-width: 24px;
    transform: rotate(-18deg);
  }
  html .voice::after {
    width: 460px;
    left: -210px;
    bottom: 20px;
  }
  html:not([data-palette]) .voice::after {
    width: 100%;
    height: 360px;
    left: 0;
    bottom: -24px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%20380%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-95%2083C61-22%20128%20266%20276%20207S407%20110%20480%20153L480%20214C382%20166%20365%20239%20283%20262S28%2071-95%20154Z%22%2F%3E%3Cpath%20opacity%3D%22.45%22%20d%3D%22M-95%20177C49%2098%20134%20342%20301%20279S411%20205%20480%20254L480%20297C390%20248%20379%20303%20306%20320S35%20146-95%20222Z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%20380%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-95%2083C61-22%20128%20266%20276%20207S407%20110%20480%20153L480%20214C382%20166%20365%20239%20283%20262S28%2071-95%20154Z%22%2F%3E%3Cpath%20opacity%3D%22.45%22%20d%3D%22M-95%20177C49%2098%20134%20342%20301%20279S411%20205%20480%20254L480%20297C390%20248%20379%20303%20306%20320S35%20146-95%20222Z%22%2F%3E%3C%2Fsvg%3E");
  }
  html .recruit::after {
    width: 118%;
    height: 260px;
    right: -20%;
    bottom: -50px;
  }
}

/* Main preview only: a shallow comparison accent and a broad search surface.
   Each has its own silhouette; neither repeats Voice's layered wave. */
html:not([data-palette]) :is(.cases, .salons) {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
html:not([data-palette]) :is(.cases-inner, .salons-inner) {
  position: relative;
  z-index: 1;
}
html:not([data-palette]) :is(.cases, .salons)::after {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  inset: auto;
  z-index: 0;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
html:not([data-palette]) .cases::after {
  width: 100%;
  height: clamp(170px, 16.67vw, 240px);
  top: 0;
  right: 0;
  background: rgba(224, 144, 167, .16);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20240%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M780-70C920%2092%201240%20238%201510%2048L1510%20120C1170%20301%20893%20104%20714-70Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20240%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M780-70C920%2092%201240%20238%201510%2048L1510%20120C1170%20301%20893%20104%20714-70Z%22%2F%3E%3C%2Fsvg%3E");
}
html:not([data-palette]) .salons::after {
  width: min(60vw, 900px);
  height: 100%;
  right: -2%;
  bottom: 0;
  background: rgba(224, 144, 167, .16);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M880-40C546%2083%20748%20310%20476%20414C330%20465%20252%20502%20154%20640H880Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20640%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M880-40C546%2083%20748%20310%20476%20414C330%20465%20252%20502%20154%20640H880Z%22%2F%3E%3C%2Fsvg%3E");
}
@media (width <= 767px) {
  html:not([data-palette]) .cases::after {
    width: 135%;
    height: 170px;
    right: -35%;
    top: -12px;
  }
  html:not([data-palette]) .salons::after {
    width: 100%;
    height: 300px;
    right: -30%;
    bottom: -60px;
  }
}



/* Approved rhythm study: retain fonts, photos, palette and reveal behaviour.
   Separate reading layouts from photo-led sections instead of repeating a kit. */
html :is(.strengths, .influencers, .news) .sec-head { text-align: left; }
html :is(.strengths, .influencers, .news) .sec-head h2 { text-wrap: balance; }
html .influencers .sec-lead { text-align: left; text-wrap: pretty; }
html .influencers .visitor-cta { text-align: left; }
html .news-inner { max-width: var(--w-main); }
html .news-cta { text-align: left; }
html .salons-heading--compact,
html .salons-lead--compact { display: none; }

@media (width >= 1100px) {
  html :is(.strengths-inner, .influencers-inner, .news-inner) {
    --rhythm-rail: clamp(256px, 21vw, 304px);
    display: grid;
    grid-template-columns: var(--rhythm-rail) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  html :is(.strengths-inner, .influencers-inner, .news-inner) > * { min-width: 0; }
  html .strengths-grid {
    margin-top: 0;
    gap: clamp(20px, 1.8vw, 28px);
  }
  html .strengths .sec-head { padding-top: 4px; }

  html .influencers-inner { grid-template-rows: auto auto auto 1fr; }
  html .influencers .sec-head { grid-column: 1; grid-row: 1; }
  html .influencers .sec-head h2 span { display: block; }
  html .influencers .sec-lead { grid-column: 1; grid-row: 2; margin-top: 24px; }
  html .influencers .visitor-cta { grid-column: 1; grid-row: 3; margin-top: 32px; }
  html .influencers .visitor-cta .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 16px;
  }
  html .influencers .insta-grid {
    grid-column: 2;
    grid-row: 1 / 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 28px);
    margin-top: 0;
  }
  html .influencers .insta-card { width: auto; min-width: 0; }
  html .influencers .carousel-hint { display: none; }

  html .news-inner { grid-template-rows: auto auto; }
  html .news .sec-head { grid-column: 1; grid-row: 1 / 3; }
  html .news-list { grid-column: 2; grid-row: 1; margin-top: 0; }
  html .news-cta { grid-column: 2; grid-row: 2; margin-top: 24px; text-align: right; }
  html .news-link { grid-template-columns: 88px 96px minmax(0, 1fr); gap: 16px; }
}

@media (width <= 767px) {
  /* Three compact editorial rows. Keep the actual copy and all three photos. */
  html .strengths-grid { gap: 28px; }
  html .strength-card .card-lift {
    display: grid;
    grid-template-columns: clamp(88px, 26vw, 112px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    align-items: start;
  }
  html .strength-photo { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 1; }
  html .strength-card h3 { grid-column: 2; grid-row: 1; margin-top: 0; }
  html .strength-card p { grid-column: 2; grid-row: 2; margin-top: 8px; }

  /* Existing Instagram carousel and gesture hints remain intact on mobile. */
  html .influencers .visitor-cta .btn { width: 100%; min-width: 0; }

  /* Mobile uses the regional controls; the interactive map stays on larger screens. */
  html .salons { padding-block: 40px; }
  html .salons-inner {
    grid-template-areas: 'heading' 'lead' 'btns' 'listcta';
    row-gap: 20px;
  }
  html .salons-heading { font-size: var(--fz-heading); line-height: 1.5; text-wrap: balance; }
  html .salons-heading--wide,
  html .salons-lead:not(.salons-lead--compact),
  html .salons-right,
  html .salons-map { display: none; }
  html .salons-heading--compact { display: inline; }
  html .salons-lead--compact { display: block; margin-top: -8px; }
  html .salons-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html .salon-area-btn { min-height: 52px; font-size: 14px; }
  html .salons-list-cta { min-height: 44px; margin-top: 0; align-items: center; }
}

@media (768px <= width <= 1023px) {
  /* Tablet keeps the map, but does not bury the regional controls under it. */
  html .salons-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: 'heading map' 'lead map' 'btns map' 'listcta map';
    column-gap: 28px;
    row-gap: 20px;
  }
  html .salons-map { align-self: center; max-width: 320px; }
  html .salons-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .salons-list-cta { margin-top: 0; }
}



/* Read the experience first, the full quote second, and its source last.
   Reuse the existing typography, palette and restrained card treatment. */
html .voice .voice-card { min-width: 0; }
html .voice .voice-bubble {
  height: 100%;
  gap: 0;
  padding: clamp(24px, 2vw, 28px);
  box-shadow: none;
  transform: none;
  transition: none;
}
html .voice .voice-card:hover .voice-bubble {
  transform: none;
  box-shadow: none;
}
html .voice .voice-headline {
  margin: 12px 0 0;
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: balance;
}
html .voice .voice-copy { margin-top: 20px; margin-bottom: 20px; }
html .voice .voice-body { text-wrap: pretty; }
html .voice .voice-persona {
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--hairline);
}
html .voice .voice-source {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  transition: none;
}
html .voice .voice-source:hover { opacity: 1; }
html .voice .voice-store { font-size: var(--fz-14); font-weight: 500; }
html .voice .voice-platform {
  color: var(--ink-note);
  font-size: var(--fz-12);
  text-decoration: underline;
  text-underline-offset: 4px;
}
html .voice .voice-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fz-13);
  cursor: pointer;
}
html .voice .voice-toggle-label { text-decoration: underline; text-underline-offset: 4px; }
html .voice .voice-toggle-icon { font-size: 20px; line-height: 1; }
html .voice :is(.voice-toggle, .voice-source):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
html .voice .voice-toggle[hidden],
html .voice .voice-remainder[hidden] { display: none; }

@media (width <= 767px) {
  html .voice .voice-grid { gap: 20px; }
  html .voice .voice-copy { margin-top: 12px; margin-bottom: 12px; }
  html .voice .voice-persona { padding-top: 12px; }
  html .voice .voice-source { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
  html .voice .voice-body[data-collapsed="true"]::after { content: "…"; }
}



/* One recruitment campaign: shared background, left-aligned message and
   original staff photography. No portrait card, caption strip or word marker. */
html .recruit.recruit--creative {
  --recruit-surface: color-mix(in srgb, var(--paper) 84%, var(--accent-soft));
  --recruit-fz-title: clamp(28px, 2.6vw, 36px);
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 6vw, 88px) var(--pad-x);
  overflow: clip;
}
html .recruit.recruit--creative::before,
html .recruit.recruit--creative::after { content: none; }

.recruit-creative-backdrop {
  position: absolute;
  z-index: 0;
  inset: 24% -10% 0;
  border-radius: 50% 50% 0 0 / 16% 26% 0 0;
  background: var(--recruit-surface);
  pointer-events: none;
}
.recruit-creative-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  max-width: var(--w-main);
  margin-inline: auto;
}
.recruit-creative-inner > * { min-width: 0; }
.recruit-creative-content { padding-inline-start: clamp(24px, 3vw, 40px); }
html .recruit-creative-head { text-align: left; }
html .recruit-creative-head .recruit-creative-title {
  margin-top: 24px;
  font-size: var(--recruit-fz-title);
  font-weight: 500;
  line-height: 1.5;
  color: var(--accent);
  text-wrap: balance;
}
.recruit-creative-callout {
  position: relative;
  display: block;
  width: fit-content;
  font-size: inherit;
}
.recruit-creative-callout::before,
.recruit-creative-callout::after {
  content: '';
  position: absolute;
  top: .3em;
  width: 10px;
  height: 28px;
  border-inline: 2px solid var(--accent);
  transform: rotate(-28deg);
}
.recruit-creative-callout::before { left: -28px; }
.recruit-creative-callout::after { right: -28px; transform: rotate(28deg); }
.recruit-creative-profession { display: block; margin-top: 4px; font-size: inherit; }
.recruit-creative-description {
  margin-top: 20px;
  color: var(--ink);
  font-size: var(--fz-14);
  font-weight: 400;
  line-height: 1.9;
  text-wrap: pretty;
}
.recruit-creative-description span { display: block; }
.recruit-creative-action { margin-top: 28px; text-align: left; }
.recruit-creative-action .btn-primary {
  width: min(100%, 280px);
  min-width: 0;
  min-height: 56px;
  padding-inline: 24px;
  box-shadow: none;
  transition: none;
}
.recruit-creative-action .btn-primary:hover { box-shadow: none; }
.recruit-creative-action .btn-primary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.recruit-creative-visual {
  align-self: end;
  justify-self: start;
  width: 100%;
  max-width: 520px;
  margin: 0;
  min-width: 0;
}
/* Fade only the existing cutout's hem; keep faces and most of the hands opaque. */
.recruit-creative-visual img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 97%);
}

@media (width <= 1023px) {
  html .recruit.recruit--creative { --recruit-fz-title: clamp(24px, 4.2vw, 32px); }
  .recruit-creative-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'head' 'description' 'visual' 'action';
    max-width: 440px;
    row-gap: 20px;
  }
  .recruit-creative-content { display: contents; }
  .recruit-creative-head { grid-area: head; }
  .recruit-creative-description { grid-area: description; margin-top: 0; }
  .recruit-creative-visual { grid-area: visual; justify-self: center; }
  .recruit-creative-action { grid-area: action; margin-top: 0; }
  .recruit-creative-backdrop { top: 43%; border-radius: 50% 50% 0 0 / 14% 22% 0 0; }
  .recruit-creative-action .btn-primary { width: 100%; }
}

@media (width <= 767px) {
  html .recruit.recruit--creative {
    --recruit-fz-title: clamp(22px, 6.6vw, 28px);
    padding-block: 56px;
  }
  .recruit-creative-inner { max-width: 420px; row-gap: 16px; }
  html .recruit-creative-head .recruit-creative-title { margin-top: 16px; }
  .recruit-creative-head,
  .recruit-creative-description { padding-inline: 28px 0; }
  .recruit-creative-callout::before,
  .recruit-creative-callout::after { width: 8px; height: 24px; }
  .recruit-creative-callout::before { left: -20px; }
  .recruit-creative-callout::after { right: -24px; }
  .recruit-creative-description { font-size: var(--fz-13); }
  .recruit-creative-visual { margin-top: 8px; }
}



/* A beauty-editorial sequence, not six boxed cards.
   Photo placement leads the eye; compact numbers only identify the sequence. */
.flow--direction {
  --flow-label-color: color-mix(in srgb, var(--accent) 88%, var(--ink));
  --flow-column-gap: 40px;
}
/* Static, open-ended ribbons suggest continuity without literal arrows.
   The mask follows the site palette; it never covers or intercepts the content. */
html .flow.flow--direction::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--theme-wave-rgb, 224, 144, 167), .24);
  opacity: 1;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201200%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%3E%3Cpath%20d%3D%22M-180%20265C85%2015%20315%2085%20540%20185S1060%20400%201610%20150%22%20stroke-width%3D%2242%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M-180%20235C85-15%20315%2055%20540%20155S1060%20370%201610%20120%22%20stroke-width%3D%221.3%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M-180%20300C85%2050%20315%20120%20540%20220S1060%20435%201610%20185%22%20stroke-width%3D%221%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-180%20770C150%20530%20390%20910%20795%20750S1220%20570%201620%20870%22%20stroke-width%3D%2254%22%20opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M-180%20731C150%20491%20390%20871%20795%20711S1220%20531%201620%20831%22%20stroke-width%3D%221.4%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M-180%20813C150%20573%20390%20953%20795%20793S1220%20613%201620%20913%22%20stroke-width%3D%221%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%201200%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%3E%3Cpath%20d%3D%22M-180%20265C85%2015%20315%2085%20540%20185S1060%20400%201610%20150%22%20stroke-width%3D%2242%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M-180%20235C85-15%20315%2055%20540%20155S1060%20370%201610%20120%22%20stroke-width%3D%221.3%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M-180%20300C85%2050%20315%20120%20540%20220S1060%20435%201610%20185%22%20stroke-width%3D%221%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M-180%20770C150%20530%20390%20910%20795%20750S1220%20570%201620%20870%22%20stroke-width%3D%2254%22%20opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M-180%20731C150%20491%20390%20871%20795%20711S1220%20531%201620%20831%22%20stroke-width%3D%221.4%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M-180%20813C150%20573%20390%20953%20795%20793S1220%20613%201620%20913%22%20stroke-width%3D%221%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.flow--direction .flow-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 48px var(--flow-column-gap);
  max-width: var(--w-main);
  margin-inline: auto;
}
.flow--direction .flow-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'photo' 'body';
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.flow--direction .flow-stage {
  grid-area: stage;
  display: flex;
  align-items: baseline;
  align-self: baseline;
  gap: 6px;
  color: var(--flow-label-color);
}
.flow--direction .flow-step .flow-num {
  display: block;
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.flow--direction .flow-photo::before,
.flow--direction .flow-photo::after,
.flow--direction .flow-step::after {
  /* Direction comes from the staggered photos and the next-slide peek. */
  content: none;
}
.flow--direction .flow-photo {
  position: relative;
  grid-area: photo;
  align-self: start;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: transparent;
}
.flow--direction .flow-photo img {
  /* Match the same four-corner treatment as other photographs on the page. */
  border-radius: var(--radius-media);
}
.flow--direction .flow-body {
  grid-area: body;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'stage title' 'copy copy';
  align-content: start;
  align-items: baseline;
  gap: 12px 10px;
  padding: 20px 0 0;
  min-width: 0;
}
.flow--direction .flow-body h3 {
  grid-area: title;
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}
.flow--direction .flow-body p {
  grid-area: copy;
  margin: 0;
  font-size: var(--fz-14);
  line-height: 1.8;
  text-wrap: pretty;
}

@media (width >= 768px) {
  .flow--direction .flow-step:nth-child(3n + 2) { margin-top: 24px; }
  .flow--direction .flow-step:nth-child(3n) { margin-top: 48px; }
}

@media (768px <= width <= 1099px) {
  .flow--direction { --flow-column-gap: 28px; }
}

@media (width <= 767px) {
  .flow--direction { --flow-column-gap: 32px; }
  html .flow.flow--direction::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%20760%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%3E%3Cpath%20d%3D%22M-90%20240C15%2070%20315%2095%20410%20275S260%20525%20100%20535S-20%20655%2040%20820%22%20stroke-width%3D%2230%22%20opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M-112%20226C-7%2056%20293%2081%20388%20261S238%20511%2078%20521S-42%20641%2018%20806%22%20stroke-width%3D%221.2%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M-65%20255C40%2085%20340%20110%20435%20290S285%20540%20125%20550S5%20670%2065%20835%22%20stroke-width%3D%221%22%20opacity%3D%22.45%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20390%20760%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22black%22%3E%3Cpath%20d%3D%22M-90%20240C15%2070%20315%2095%20410%20275S260%20525%20100%20535S-20%20655%2040%20820%22%20stroke-width%3D%2230%22%20opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M-112%20226C-7%2056%20293%2081%20388%20261S238%20511%2078%20521S-42%20641%2018%20806%22%20stroke-width%3D%221.2%22%20opacity%3D%22.85%22%2F%3E%3Cpath%20d%3D%22M-65%20255C40%2085%20340%20110%20435%20290S285%20540%20125%20550S5%20670%2065%20835%22%20stroke-width%3D%221%22%20opacity%3D%22.45%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% 760px;
    mask-size: 100% 760px;
  }
  .flow--direction .flow-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    padding-top: 0;
  }

  /* Keep horizontal swipe, keyboard navigation, counter and list toggle. */
  .flow--direction.flow-ready:not(.flow-expanded) .flow-grid { gap: var(--flow-column-gap); }
  /* Only the optional list view uses a vertical sequence. */
  .flow--direction.flow-expanded .flow-grid,
  .flow--direction:not(.flow-ready) .flow-grid { row-gap: 56px; }
}



/* Reading hierarchy refinement, main preview only.
   Keep the existing palette, Noto Sans JP / Caveat, weights and reveal motion.
   Do not scale the hero, Japanese section titles, step numbers or metadata. */
:root {
  --reading-body-size: 16px;
  --reading-subheading-size: 18px;
}

html .sec-head .sec-en {
  font-size: clamp(36px, 3.3vw, 45px);
}

html .sec-lead,
html .strength-card p,
html .case-card p,
html .flow--direction .flow-body p,
html .voice .voice-body,
html .salons-lead,
html .recruit-creative-description {
  font-size: var(--reading-body-size);
}

html .strength-card h3,
html .case-card h3,
html .flow--direction .flow-body h3 {
  font-size: var(--reading-subheading-size);
}

/* Larger news copy should wrap naturally rather than hide more of the title. */
html .news-title {
  font-size: var(--reading-body-size);
  line-height: 1.7;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: pretty;
}

@media (width <= 767px) {
  :root { --reading-body-size: 15px; }
}



/* Main preview: finish existing components, retain the approved layout and type. */
html .salons .salons-heading {
  text-align: left;
  font-size: inherit;
  line-height: inherit;
}
html .salons .salons-heading h2 { margin-bottom: 0; }
html .salons .salon-area-btn {
  position: relative;
  min-height: 56px;
  padding: 14px 24px;
  border-color: color-mix(in srgb, var(--accent) 36%, var(--paper));
  background: color-mix(in srgb, var(--accent-soft) 9%, var(--paper));
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
}
html .salons .salon-area-btn::after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-left: 7px solid transparent;
  border-bottom: 7px solid var(--accent);
}
html .salons .salon-area-btn:hover,
html .salons .salon-area-btn:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--paper));
  border-color: var(--accent);
}
html .salons .salon-area-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
html .salons-list-cta {
  min-height: 44px;
  align-items: center;
  margin-top: 12px;
  color: var(--ink);
  font-size: 14px;
}
@media (width >= 1024px) {
  html .salons-right { align-self: center; }
}

/* Keep the real clips, their 9:16 crops and the current playback interaction. */
.movie-caption { margin-top: 16px; }
.movie-caption h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  text-wrap: balance;
}
.movie-caption p {
  margin-top: 6px;
  font-size: var(--reading-body-size, 16px);
  line-height: 1.75;
  letter-spacing: .04em;
  text-wrap: pretty;
}
/* Keep keyboard focus discoverable even when the playing overlay fades out. */
html .movie-lift.is-playing .movie-play:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
html .movie-lift.is-playing .movie-play svg { display: none; }
html .movie-lift.is-playing .movie-play::before {
  content: '';
  width: 14px;
  height: 18px;
  box-sizing: border-box;
  border-inline: 4px solid currentColor;
}

/* Gentle display-only white balance. Original files and skin texture are intact.
   Before/After and the already-approved hero remain unfiltered. */
html .strengths .strength-card:not(:nth-child(3)) .strength-photo img,
html .flow--direction .flow-photo img {
  filter: url('#photo-tone-treatment') contrast(1.02) saturate(.97);
}
html .strengths .strength-card:nth-child(3) .strength-photo img {
  filter: url('#staff-color-adjustment') brightness(1.015) contrast(1.03) saturate(.94);
}
html .influencers .insta-card .insta-photo img {
  filter: url('#photo-tone-visitor') contrast(.99) saturate(.95);
}
html .influencers .insta-card:nth-child(2) .insta-photo img {
  filter: url('#photo-tone-visitor') contrast(1.01) saturate(.95);
}
html .recruit-creative-visual img { filter: url('#photo-tone-staff'); }

@media (width <= 767px) {
  html .salons { padding-block: 48px; }
  html .salons-list-cta { margin-top: 0; }
  html .salons .salon-area-btn { min-height: 52px; padding-inline: 20px; }
  html .movie-caption { margin-top: 14px; }
  html .mobile-cta {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  html .mobile-cta .mobile-cta-primary {
    position: relative;
    min-height: 56px;
    padding: 12px 32px;
    font-size: 16px;
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--accent) 88%, var(--ink)),
      color-mix(in srgb, var(--accent) 84%, var(--ink)));
  }
  html .mobile-cta .mobile-cta-primary::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 0;
    height: 0;
    background: none;
    clip-path: none;
    border-left: 9px solid transparent;
    border-bottom: 9px solid currentColor;
  }
  html .mobile-cta .mobile-cta-primary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  html body { padding-bottom: calc(73px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  html .salons .salon-area-btn,
  html .mobile-cta { transition: none; }
}



/* Main preview only. Keep desktop, brand type, original copy and imagery intact. */
html .gnav .nav-mobile-only,
html .gnav .nav-booking-mobile { display: none; }

@media (width <= 767px) {
  /* Body scroll-lock makes a sticky header lose its viewport anchor in Chromium.
     Reserve its original space, then pin the close control while the menu is open. */
  html.nav-open .header { position: fixed; inset: 0 0 auto; }
  html.nav-open body { padding-top: var(--header-h); }
  /* A readable directory, with one full-width booking action. */
  html .gnav {
    height: calc(100dvh - var(--header-h));
    bottom: auto;
    padding: 20px max(var(--pad-x), env(safe-area-inset-right, 0px))
      calc(32px + env(safe-area-inset-bottom, 0px))
      max(var(--pad-x), env(safe-area-inset-left, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    transition-duration: 180ms;
    transition-timing-function: ease-out;
  }
  html .gnav ul {
    display: block;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding-top: 0;
  }
  html .gnav li:not(.nav-booking) { border-bottom: 1px solid var(--hairline); }
  html .gnav .nav-mobile-only { display: list-item; }
  html .gnav a.nav-pair {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 76px;
    padding-block: 20px;
    text-align: left;
  }
  html .gnav a.nav-pair .nav-jp {
    font-size: 20px;
    line-height: 1.5;
    text-wrap: balance;
  }
  html .gnav a.nav-pair .nav-en {
    flex-shrink: 0;
    color: var(--ink-note);
    text-align: right;
  }
  html .gnav a.nav-pair:hover { opacity: 1; color: var(--accent); }
  html .gnav .nav-booking { padding-top: 28px; }
  html .gnav .nav-booking a {
    --btn-corner-size: 9px;
    --btn-corner-inset: 10px;
    width: 100%;
    min-height: 56px;
    padding: 14px 28px;
    font-size: 16px;
    line-height: 1.6;
    background: color-mix(in srgb, var(--accent) 86%, var(--ink));
    box-shadow: none;
  }
  html .gnav .nav-booking-desktop { display: none; }
  html .gnav .nav-booking-mobile { display: inline; }
  html .gnav a:focus-visible,
  html .nav-toggle:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }
  html.nav-open .mobile-cta { visibility: hidden; }

  /* The image introduces the benefit; the paragraph gets the full reading width. */
  html .strengths-grid { gap: 32px; }
  html .strength-card .card-lift {
    grid-template-columns: clamp(88px, 27vw, 112px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 14px 18px;
  }
  html .strength-card .strength-photo {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }
  html .strength-card h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-wrap: balance;
  }
  html .strength-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    text-wrap: pretty;
  }

  /* Compact the spacing, not the review text or its controls. */
  html .voice .voice-grid { gap: 16px; }
  html .voice .voice-bubble { padding: 20px; }
  html .voice .voice-headline { margin-top: 8px; }
  html .voice .voice-copy { margin-top: 8px; margin-bottom: 0; }
  html .voice .voice-toggle { margin-top: 0; }
  html .voice .voice-persona { padding-top: 4px; }
  html .voice .voice-source { gap: 2px 10px; }
  html .voice .voice-cta { margin-top: 32px; }
}

@media (width <= 767px) and (height <= 640px) {
  html .gnav { padding-top: 8px; }
  html .gnav a.nav-pair { min-height: 64px; padding-block: 14px; }
  html .gnav .nav-booking { padding-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html .gnav { transition: none; }
}



/* Main preview: reuse the Movie carousel vocabulary, not a second control kit. */
html .flow.flow-ready .flow-controls,
html .flow:not(.flow-ready) .carousel-hint { display: none; }

@media (width <= 767px) {
  html .flow.flow-ready:not(.flow-expanded) .flow-grid {
    gap: 12px;
    margin-top: var(--sp-heading-content);
    margin-right: 0;
    padding-right: 0;
  }
  html .flow.flow-ready:not(.flow-expanded) .flow-step {
    flex: 0 0 68vw;
    width: 68vw;
  }
  /* The indicator markup, colors and sizing are shared with Movie. Width only
     changes on resize; do not animate layout or retain a compositor layer. */
  html .flow .carousel-progress-thumb {
    transition: transform 180ms ease-out;
    will-change: auto;
  }
  html .flow .carousel-swipe-arrow { animation-play-state: paused; }
  html .flow .carousel-hint.is-onscreen:not(.is-end) .carousel-swipe-arrow {
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .flow .carousel-swipe-arrow { animation: none; }
  html .flow .carousel-progress-thumb,
  html .flow .carousel-swipe { transition: none; }
}



/* Main preview only. A shared action color, without changing brand accents. */
:root {
  --booking-fill: #ce4155;
  --booking-fill-hover: #b83b4e;
  --booking-fill-active: #aa3648;
  --booking-ink: #ffffff;
}

html body a:is(.btn-primary, .mobile-cta-primary, .btn-on-dark)[href="#salons"] {
  background: var(--booking-fill);
  color: var(--booking-ink);
  box-shadow: none;
}
html body a:is(.btn-primary, .mobile-cta-primary, .btn-on-dark)[href="#salons"]:hover {
  background: var(--booking-fill-hover);
  color: var(--booking-ink);
  box-shadow: none;
}
html body a:is(.btn-primary, .mobile-cta-primary, .btn-on-dark)[href="#salons"]:active {
  background: var(--booking-fill-active);
}
html body a:is(.btn-primary, .mobile-cta-primary, .btn-on-dark)[href="#salons"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* Preserve existing reveal motion on the outro link. */
html body a:is(.btn-primary, .mobile-cta-primary, .btn-on-dark)[href="#salons"]:not(.reveal) {
  transition: background-color 160ms ease-out;
}
/* A quiet closing surface lets the shared coral action remain the focal point.
   Color only: preserve the existing band geometry, typography and reveal. */
html body .outro {
  background: color-mix(in srgb, var(--paper) 74%, var(--accent-soft));
  color: var(--ink);
}
html body .outro-text,
html body .outro-text .accent-text {
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}
html body .outro-script {
  color: color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html body a:is(.btn-primary, .mobile-cta-primary, .btn-on-dark)[href="#salons"]:not(.reveal) {
    transition: none;
  }
}



/* Shared footer SNS row. Preserve the surrounding footer layout and typography. */
.footer .footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer .footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  transition: none;
}
.footer .footer-social-link img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: none;
}
.footer .footer-social-link--instagram { background: transparent; }
.footer .footer-social-link--instagram img { width: 44px; height: 44px; }
.footer .footer-social-link--tiktok { background: #000; overflow: hidden; }
.footer .footer-social-link--tiktok img { width: 64px; height: auto; max-width: none; flex-shrink: 0; }
.footer .footer-social-link:hover { opacity: 1; outline: 1px solid rgba(255,255,255,.6); outline-offset: 3px; }
.footer .footer-social-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  opacity: 1;
}