@charset "UTF-8";
/* ==========================================================================
   Noire TOP — ピクセル再現版（Illustrator 00_Noire_WEB_TOP の 1366px アートボード）
   1366px 以上   : 1366px のキャンバスを中央に置く（帯の背景・写真は画面幅いっぱい）
   901〜1365px  : キャンバスごと等倍縮小（assets/js/fit.js が html の zoom を設定）
   900px 以下    : スマートフォン表示。FV は支給のモバイル用アートボード（375×650）、それ以外は縦積み
   ========================================================================== */

/* 明朝: Shippori Mincho の配布元版（fontdasu, OFL）をこのページの文字で切り出したもの（palt 入り）。
   デザインのカーニング「メトリクス」は和文では palt（プロポーショナル）になるが、Google Fonts 版には palt が無いため。
   収録していない字は Google Fonts の Shippori Mincho（同じ字形・palt なし）で表示される。 */
@font-face { font-family: "NoireMincho"; font-weight: 600; font-display: swap; src: url("../fonts/noiremincho-600.woff2") format("woff2"); }
/* ゴシックの約物（、。「」（）・など）だけを半角にした補助フォント（OFL）。デザインの文字組み「行末約物半角」は
   約物を行頭・行中・行末とも半角にするが、Google Fonts の Zen Kaku Gothic New には halt/palt が無く
   font-feature-settings が効かないため、同じ書体の約物グリフだけを送り 0.5em にしたものを unicode-range で先頭に当てる。 */
@font-face { font-family: "NoireYakumonoGothic"; font-weight: 400; font-display: swap; src: url("../fonts/noireyakumonogothic-400.woff2") format("woff2");
  unicode-range: U+3001, U+3002, U+300C-300F, U+3010, U+3011, U+3014, U+3015, U+3008-300B, U+FF08, U+FF09, U+FF0C, U+FF0E, U+FF3B, U+FF3D, U+FF5B, U+FF5D, U+30FB, U+FF1A, U+FF1B; }
@font-face { font-family: "NoireYakumonoGothic"; font-weight: 700; font-display: swap; src: url("../fonts/noireyakumonogothic-700.woff2") format("woff2");
  unicode-range: U+3001, U+3002, U+300C-300F, U+3010, U+3011, U+3014, U+3015, U+3008-300B, U+FF08, U+FF09, U+FF0C, U+FF0E, U+FF3B, U+FF3D, U+FF5B, U+FF5D, U+30FB, U+FF1A, U+FF1B; }

:root {
  --c-ink: #070200;
  --c-gold: #be9c59;
  --c-gold-70: #d2ba8b;   /* ゴールド 70%（ボタンの線・矢印） */
  --c-gold-25: #efe6d6;   /* ゴールド 25%（お知らせの罫線） */
  --c-ink-70: #514e4d;    /* 墨 70%（黒ボタンの線・矢印、店舗写真の仮置き） */
  --c-ivory: #faf7f3;
  --ff-en: "Cormorant Garamond", "Times New Roman", serif;
  --ff-min: "NoireMincho", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ff-goth: "NoireYakumonoGothic", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ease: cubic-bezier(.25, .46, .45, .94);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 78px; }
body { margin: 0; background: #fff; color: var(--c-ink); font-family: var(--ff-goth); font-size: 16px; line-height: 1.75; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
small { font-size: inherit; }   /* <small> の既定（smaller）を打ち消す */
/* 上付き（FACIAL のオプション「CO²」）: Illustrator の既定（大きさ 58.3%・位置 33.3%）。行の高さは変えない */
.facial-option__sup { position: relative; top: -.571em; font-size: .583em; line-height: 0; vertical-align: baseline; }
/* FV のダウンライト（ご指示 2026-10-20）: 写真と同じ切り抜き（cover）の箱に、ライトの位置で淡い光を重ね、ゆっくり明るくしては消す。
   不透明度 0 が止まった状態＝デザインどおり（動きを減らす設定・検品の撮影ではこの状態）。3 つのライトは 2 秒ずつずらす */
.fv__lights { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.fv__light { position: absolute; translate: -50% -50%; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 249, 236, .9), rgba(255, 240, 214, .42) 42%, rgba(255, 234, 204, 0));
  animation: fv-light 6s ease-in-out infinite; }
.fv__light--2 { animation-delay: -2s; }
.fv__light--3 { animation-delay: -4s; }
@keyframes fv-light { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
/* 「QUALITY」: デザインの Q（尾が U の下まで伸びる字形）が Google Fonts 版に無いため、見た目は _ol.ai のアウトライン（SVG）で描く。
   文字は本物の HTML のまま透明にして残す（読み上げ・検索・選択はこの文字）。SVG は文字と同じベースライン・大きさに em で重ねる
   （字形の左 1.176/24em、高さ 21.576/24em、ベースライン 15.694/24em） */
.promise-item__title.promise-item__title--outline { color: transparent; }   /* PC の自動生成ブロックの color より強く */
.promise-item__title--outline::before { content: ""; position: absolute; left: .049em; width: 4.795em; height: .899em;
  background: url(../img/promise-quality.svg) no-repeat 0 0 / 100% 100%; pointer-events: none; }
select { font: inherit; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- ボタン（共通の見た目） ---------- */
.btn { display: block; position: relative; color: #fff; transition: background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.btn--dark { background: var(--c-ink); border: 1px solid var(--c-ink-70); }
.btn--gold { background: var(--c-gold); border: 1px solid var(--c-gold-70); box-shadow: 0 0 18px rgba(190, 156, 89, .5); }
.btn__label { display: block; white-space: nowrap; }
.btn__arrow { position: absolute; fill: none; stroke-width: 1; transition: transform .4s var(--ease); }
.btn--dark .btn__arrow { stroke: var(--c-ink-70); }
.btn--gold .btn__arrow, .menu-card__reserve .btn__arrow, .facial__reserve .btn__arrow { stroke: var(--c-gold-70); }
@media (hover: hover) {
  .btn--dark:hover { background: #2b2624; border-color: #7a7472; }
  .btn--gold:hover { background: #c8a96c; box-shadow: 0 0 24px rgba(190, 156, 89, .7); }
  .btn:hover .btn__arrow, .menu-card__reserve:hover .btn__arrow, .facial__reserve:hover .btn__arrow { transform: translateX(4px); }
}

.sec-label { color: var(--c-gold); }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 店舗の絞り込み: 外れたカードは隠す（.salon-card の display:flex より強く）。絞り込み後に出てくるカードは静かにフェードイン */
.salon-card[hidden], .salon__empty[hidden] { display: none; }
.salon__list.is-filtered .salon-card { animation: salon-in .6s var(--ease); }
@keyframes salon-in { from { opacity: 0; } to { opacity: 1; } }
.salon__empty { font-size: 14px; line-height: 2; letter-spacing: .08em; text-align: center; background: var(--c-ivory); }
/* Cormorant Garamond の欧文: macOS の文字のにじみ（font smoothing）が細い線を太らせ、デザインより約 2 割濃く描かれるため、
   欧文の要素だけ grayscale にする（実測: 平坦な地の上の欧文 9 枠でインク量 1.22 倍 → 0.84 倍。和文は 1.04 倍のまま触らない）。
   macOS 以外の環境には影響しない。 */
.sec-label, .gnav__item, .fnav__item, .header__reserve-en, .fv__scroll-label, .fv__tagline, .promise-item__num, .promise-item__title,
.price__yen, .menu-extra__title, .menu-extra__yen, .salon-card__tag, .news-item__cat,
.facial-course__label, .facial-course__yen, .facial-option__yen { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 濃いテクスチャの帯（NOIRE PROMISE・下部の予約）: 背景写真は遅延読み込みの <img>（スマートフォンは軽い版） */
.promise, .cta { isolation: isolate; background-color: #2a2523; }
.band-bg, .band-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-bg { z-index: -1; }
.band-bg img { object-fit: cover; object-position: 50% 50%; }

/* @gen:text begin (.work/noire/tools/gen.py) */
@media (min-width: 901px) {
  /* --- header (fixed, canvas y=0) --- */
  .gnav__item--top { left: 552.5px; top: 55.38px; width: 68px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .gnav__item--concept { left: 616.81px; top: 55.38px; width: 104px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .gnav__item--menu { left: 717.77px; top: 55.38px; width: 82px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .gnav__item--salon { left: 794.29px; top: 55.38px; width: 86px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .gnav__item--academy { left: 878.74px; top: 55.38px; width: 108px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .gnav__item--owner { left: 985.1px; top: 55.38px; width: 92px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .gnav__item--recruit { left: 1076.71px; top: 55.38px; width: 98px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .header__reserve-en { left: 0; top: 2.32px; width: 120px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #be9c59; }
  .header__reserve-ja { left: 0; top: 19.58px; width: 120px; text-align: center; padding-left: 0.06em; font-family: var(--ff-goth); font-size: 11px; font-weight: 400; line-height: 19.25px; letter-spacing: 0.06em; color: #ffffff; }
  /* --- FV (band y=0) --- */
  .fv__title { left: 108.14px; top: 255.07px; font-family: var(--ff-min); font-size: 77px; font-weight: 600; line-height: 102px; letter-spacing: 0.08em; font-feature-settings: "palt" 1; color: #ffffff; }
  .fv__lead { left: 108px; top: 477.12px; font-family: var(--ff-min); font-size: 20px; font-weight: 600; line-height: 44px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #ffffff; }
  .fv__btn--reserve .btn__label { left: 0; top: 15.65px; width: 168px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fv__btn--salon .btn__label { left: 0; top: 15.65px; width: 168px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fv__scroll-label { left: 0; top: -7.9px; width: 86px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 12px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #ffffff; }
  .fv__tagline { left: 1051.04px; top: 707.99px; font-family: var(--ff-en); font-size: 16px; font-weight: 400; line-height: 44px; letter-spacing: 0.2em; color: #ffffff; }
  /* --- CONCEPT (band y=768) --- */
  .concept__label { left: 183.05px; top: 105.19px; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .concept__title { left: 183px; top: 201.94px; font-family: var(--ff-min); font-size: 40px; font-weight: 600; line-height: 60px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .concept__text { left: 183px; top: 413.18px; width: 488px; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #000000; }
  /* --- PROMISE (band y=1455; items from x_i, y=1722) --- */
  .promise__label { left: 604.02px; top: 105.19px; width: 158px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .promise__title { left: 303px; top: 166.59px; width: 760px; text-align: center; padding-left: 0.1em; font-family: var(--ff-min); font-size: 32px; font-weight: 600; line-height: 64px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #ffffff; }
  .promise-item__num { left: 0; top: 30.5px; font-family: var(--ff-en); font-size: 24px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .promise-item__title { left: 0; top: 66.13px; font-family: var(--ff-en); font-size: 24px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #ffffff; }
  .promise-item__text { left: 0; top: 141.97px; width: 186px; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.06em; color: #faf7f3; }
  /* --- MENU (band y=2104; cards from their own top-left) --- */
  .menu__label { left: 641px; top: 105.19px; width: 84px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .menu__title { left: 253px; top: 168.76px; width: 860px; text-align: center; padding-left: 0.1em; font-family: var(--ff-min); font-size: 52px; font-weight: 600; line-height: 80px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .menu__lead { left: 293px; top: 278.35px; width: 780px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #000000; }
  .menu-card--lash .menu-card__title { left: 262px; top: 16.82px; font-family: var(--ff-min); font-size: 24px; font-weight: 600; line-height: 64px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .menu-card--lash .menu-card__text { left: 262px; top: 72.72px; width: 196px; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.06em; color: #000000; }
  .menu-card--perm .menu-card__title { left: 262px; top: 13.3px; font-family: var(--ff-min); font-size: 24px; font-weight: 600; line-height: 64px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .menu-card--perm .menu-card__text { left: 262px; top: 69.2px; width: 196px; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.06em; color: #000000; }
  .menu-card--brow .menu-card__title { left: 262px; top: 16.82px; font-family: var(--ff-min); font-size: 24px; font-weight: 600; line-height: 64px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .menu-card--brow .menu-card__text { left: 262px; top: 72.72px; width: 196px; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.06em; color: #000000; }
  .menu-card--brow .menu-card__note { left: 262px; top: 165.39px; font-family: var(--ff-goth); font-size: 11px; font-weight: 400; line-height: 18px; letter-spacing: 0.1em; color: #000000; }
  .menu-card__reserve-label { left: 147.81px; top: 8.7px; width: 160px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #070200; }
  .price__name { font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 0em; color: #070200; }
  .price__time { font-family: var(--ff-goth); font-size: 11px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #070200; }
  .price__yen { font-family: var(--ff-en); font-size: 20px; font-weight: 400; line-height: 28px; letter-spacing: 0em; color: #be9c59; }
  .menu-extra__title { left: 4.79px; top: -3.12px; font-family: var(--ff-en); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0em; font-kerning: none; color: #be9c59; }
  .menu-extra__name { font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 0em; color: #070200; }
  .menu-extra__time { font-family: var(--ff-goth); font-size: 11px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #070200; }
  .menu-extra__yen { font-family: var(--ff-en); font-size: 20px; font-weight: 400; line-height: 28px; letter-spacing: 0em; color: #be9c59; }
  /* --- FACIAL ESTHETIC（v2。MENU 帯 y=2104 の中。コースは各列の左上 x=183/531/879, y=3594 から、オプションは箱 x=183, y=3842 から） --- */
  .facial__label { left: 599px; top: 1212.19px; width: 168px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .facial__title { left: 333px; top: 1275.76px; width: 700px; text-align: center; padding-left: 0.1em; font-family: var(--ff-min); font-size: 52px; font-weight: 600; line-height: 80px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .facial__lead { left: 273px; top: 1385.35px; width: 820px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #000000; }
  .facial-course__label { left: 0.03px; top: 5.5px; width: 304px; text-align: center; padding-left: 0.04em; font-family: var(--ff-en); font-size: 26px; font-weight: 400; line-height: 44px; letter-spacing: 0.04em; color: #be9c59; }
  .facial-course__name { left: 0; top: 57.41px; width: 304px; text-align: center; padding-left: 0.1em; font-family: var(--ff-min); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .facial-course__yen { left: 0.05px; top: 112.36px; width: 304px; text-align: center; font-family: var(--ff-en); font-size: 20px; font-weight: 400; line-height: 28px; letter-spacing: 0em; color: #be9c59; }
  .facial-course__time-text { left: -8.77px; top: -0.78px; width: 304px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #070200; }
  .facial-option__title { left: 27.03px; top: 19.12px; font-family: var(--ff-min); font-size: 24px; font-weight: 600; line-height: 64px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .facial-option__list--1 { left: 248.69px; top: 38.92px; }
  .facial-option__list--2 { left: 606.07px; top: 38.92px; }
  .facial-option__name { font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 0em; color: #070200; }
  .facial-option__list--1 .facial-option__time { left: 202.42px; top: -0.32px; }
  .facial-option__list--2 .facial-option__time { left: 218.42px; top: -0.32px; }
  .facial-option__time { font-family: var(--ff-goth); font-size: 11px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #070200; }
  .facial-option__list--1 .facial-option__yen { left: 241.51px; top: -2.67px; }
  .facial-option__list--2 .facial-option__yen { left: 273.51px; top: -2.67px; }
  .facial-option__yen { font-family: var(--ff-en); font-size: 20px; font-weight: 400; line-height: 28px; letter-spacing: 0em; color: #be9c59; }
  .facial__reserve-label { left: 143.11px; top: 12.65px; width: 160px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #070200; }
  /* --- SALON (v1 band y=3211。v2 では中身が帯の上端から 3px 上がったので v1 座標で y=3214 を原点にする) --- */
  .salon__label { left: 638.02px; top: 102.19px; width: 90px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .salon__title { left: 483px; top: 163.59px; width: 400px; text-align: center; padding-left: 0.1em; font-family: var(--ff-min); font-size: 32px; font-weight: 600; line-height: 64px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .salon-filter__field--area .salon-filter__label { left: 419.92px; top: 273.65px; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #070200; }
  .salon-filter__field--type .salon-filter__label { left: 686.92px; top: 273.65px; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #070200; }
  .salon-filter select { font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #070200; }
  .salon-card__tag { font-family: var(--ff-en); font-size: 12px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #ffffff; }
  .salon-card__name { font-family: var(--ff-min); font-size: 20px; font-weight: 600; line-height: 30px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .salon-card__text { font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 0.1em; color: #000000; }
  .salon-card__hours { font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: 0.1em; color: #000000; }
  .salon-card__btn .btn__label { left: 1px; top: 17.65px; width: 150px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #ffffff; }
  /* --- ACADEMY (band y=4788) --- */
  .academy__label { left: 183.05px; top: 505.19px; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .academy__title { left: 183px; top: 597.46px; font-family: var(--ff-min); font-size: 52px; font-weight: 600; line-height: 80px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .academy__text { left: 183px; top: 771.05px; width: 488px; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #000000; }
  .academy__btn .btn__label { left: 12px; top: 17.66px; width: 160px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #ffffff; }
  .academy__step--1 { left: 21.52px; top: 104.56px; width: 140px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 0.1em; color: #ffffff; }
  .academy__step--2 { left: 183.07px; top: 47.29px; width: 140px; text-align: center; padding-left: 0.1em; }
  .academy__step--3 { left: 29.04px; top: 213.72px; width: 140px; text-align: center; padding-left: 0.1em; }
  .academy__step--4 { left: 197.39px; top: 153.84px; width: 140px; text-align: center; padding-left: 0.1em; }
  /* --- OWNER (band y=5859) --- */
  .owner__label { left: 679.05px; top: 105.19px; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .owner__title { left: 679px; top: 197.46px; font-family: var(--ff-min); font-size: 52px; font-weight: 600; line-height: 80px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .owner__text { left: 679px; top: 371.05px; width: 488px; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #000000; }
  .owner__tag { font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: 0.1em; color: #000000; }
  .owner__btn .btn__label { left: 5px; top: 17.65px; width: 190px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #ffffff; }
  /* --- RECRUIT (card at x=83, y=6618) --- */
  .recruit__label { left: 100px; top: 65.19px; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .recruit__title { left: 100px; top: 157.46px; font-family: var(--ff-min); font-size: 52px; font-weight: 600; line-height: 80px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .recruit__text { left: 100px; top: 331.05px; width: 488px; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #000000; }
  .recruit__btn .btn__label { left: 12px; top: 17.63px; width: 160px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #ffffff; }
  /* --- NEWS (band y=7208; rows from their own top) --- */
  .news__label { left: 642px; top: 105.19px; width: 82px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 15px; font-weight: 400; line-height: 44px; letter-spacing: 0.1em; color: #be9c59; }
  .news__title { left: 483px; top: 168.76px; width: 400px; text-align: center; padding-left: 0.1em; font-family: var(--ff-min); font-size: 52px; font-weight: 600; line-height: 80px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #070200; }
  .news-item__cat { left: 0; top: 36.58px; width: 112px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; font-kerning: none; color: #ffffff; }
  .news-item__date { left: 422.53px; top: 12.77px; font-family: var(--ff-goth); font-size: 14px; font-weight: 400; line-height: 70px; letter-spacing: 0.08em; font-kerning: none; color: #808088; }
  .news-item__title { left: 591.86px; top: 30.97px; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 32px; letter-spacing: 0.1em; color: #000010; }
  /* --- CTA (band y=7901) --- */
  .cta__title { left: 273px; top: 110.07px; width: 820px; text-align: center; padding-left: 0.1em; font-family: var(--ff-min); font-size: 52px; font-weight: 600; line-height: 64px; letter-spacing: 0.1em; font-feature-settings: "palt" 1; color: #ffffff; }
  .cta__text { left: 333px; top: 201.96px; width: 700px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #ffffff; }
  .cta__btn .btn__label { left: -0.01px; top: 17.68px; width: 168px; text-align: center; padding-left: 0.1em; font-family: var(--ff-goth); font-size: 12px; font-weight: 400; line-height: 21px; letter-spacing: 0.1em; color: #ffffff; }
  /* --- footer (band y=8349) --- */
  .fnav__item--top { left: 576.01px; top: 99.37px; width: 68px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fnav__item--concept { left: 640.33px; top: 99.37px; width: 104px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fnav__item--menu { left: 741.28px; top: 99.37px; width: 82px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fnav__item--salon { left: 817.81px; top: 99.37px; width: 86px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fnav__item--academy { left: 902.25px; top: 99.37px; width: 108px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fnav__item--owner { left: 1008.62px; top: 99.37px; width: 92px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .fnav__item--recruit { left: 1100.23px; top: 99.37px; width: 98px; text-align: center; padding-left: 0.1em; font-family: var(--ff-en); font-size: 14px; font-weight: 400; line-height: 24.5px; letter-spacing: 0.1em; color: #ffffff; }
  .footer__copy { left: 183px; top: 143.52px; font-family: var(--ff-goth); font-size: 11px; font-weight: 400; line-height: 28px; letter-spacing: 0.1em; color: #838080; }
}
/* @gen:text end */

/* ==========================================================================
   PC（901px 以上）: 帯ごとに実測の高さ、中身は帯の中の実測座標に絶対配置
   ========================================================================== */
@media (min-width: 901px) {
  .band { position: relative; overflow: clip; }
  .band__inner { position: relative; width: 1366px; height: 100%; margin: 0 auto; }
  .band__inner > * { position: absolute; }
  /* デザインの改行位置で 1 行ずつ。inline-block なので段落は 1 つのテキストのまま（照合・読み上げで行が切れない） */
  .l { display: inline-block; width: 100%; vertical-align: top; }
  .fv__title, .fv__lead, .concept__title, .promise__title, .menu__title, .menu__lead, .salon__title, .academy__title,
  .owner__title, .recruit__title, .news__title, .cta__title, .cta__text, .fv__tagline { white-space: nowrap; }

  /* 均等配置の本文: デザインの改行位置で 1 行ずつ両端揃え（最終行は左揃え） */
  .concept__text .l, .academy__text .l, .owner__text .l, .recruit__text .l, .menu-card__text .l {
    text-align: justify; text-align-last: justify; white-space: nowrap; }
  .concept__text p { display: inline-block; width: 100%; vertical-align: top; }   /* 2 段落で 1 つの文字枠（照合用に段落を行内ブロックに） */
  .concept__text .l--last, .academy__text .l--last, .owner__text .l--last, .recruit__text .l--last, .menu-card__text .l--last { text-align-last: left; }

  /* ---------- header ---------- */
  .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 130px; transition: background-color .4s var(--ease), height .4s var(--ease); }
  .header__inner { position: relative; width: 1366px; height: 100%; margin: 0 auto; }
  .header__logo { position: absolute; left: 48px; top: 48px; transform-origin: 0 0; transition: transform .4s var(--ease); }
  .header__logo img { width: 164px; height: 55.887px; }
  .header__logo, .footer__logo { transition: opacity .4s var(--ease), transform .4s var(--ease); }
  @media (hover: hover) { .header__logo:hover, .footer__logo:hover { opacity: .7; } }
  .gnav { transition: transform .4s var(--ease); }
  .gnav__item { position: absolute; }
  .gnav__link { position: relative; display: inline-block; transition: opacity .4s var(--ease); }
  .gnav__link::after { content: ""; position: absolute; left: -2.3px; right: -.9px; top: 31.12px; height: 1px; background: #fff;
    transform: scaleX(0); transform-origin: 50% 50%; transition: transform .45s var(--ease); }
  .gnav__link.is-current::after { transform: scaleX(1); }
  @media (hover: hover) { .gnav__link:hover::after { transform: scaleX(1); } }
  .header__reserve { position: absolute; left: 1198px; top: 46px; width: 120px; height: 42px; background: var(--c-ink); border: 1px solid var(--c-ink-70);
    transition: background-color .4s var(--ease), border-color .4s var(--ease); }
  .header__reserve > span { position: absolute; display: block; margin-left: -1px; margin-top: -1px; }
  @media (hover: hover) { .header__reserve:hover { background: #2b2624; border-color: #7a7472; } }
  .header__toggle { display: none; }
  /* スクロール後: 墨の地に乗せて上へ詰める（デザインは FV 上の状態のみ。README 申し送り 3） */
  .header.is-scrolled { height: 78px; background: rgba(7, 2, 0, .96); }
  .header.is-scrolled .header__logo { transform: translateY(-29px) scale(.75); }
  .header.is-scrolled .gnav { transform: translateY(-28px); }   /* 予約ボタンは .gnav の中なので一緒に上がる（二重に掛けない） */

  /* ---------- FV ---------- */
  .fv { height: 768px; background: #1c1611; }
  .fv__bg, .fv__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .fv__bg img { object-fit: cover; object-position: 50% 50%; }
  .fv__lights { width: max(100%, 1366px); aspect-ratio: 1366 / 768; }   /* 写真（1366×768）の cover と同じ箱 */
  .fv__light--1 { left: 59.87%; top: 40.69%; width: 11.13%; height: 7.08%; }
  .fv__light--2 { left: 52.09%; top: 44.27%; width: 10.31%; height: 5.83%; }
  .fv__light--3 { left: 45.62%; top: 47.59%; width: 9.49%; height: 5.00%; }
  .fv__sign { left: 867.52px; top: 467.91px; width: 165.587px; height: 206.62px; opacity: .9; mix-blend-mode: multiply; }
  .fv__title-l1 { margin-left: -4.14px; }   /* 1 行目だけ左インデント −4.14pt（デザイン指定） */
  .fv__btn { position: absolute; top: 608px; width: 168px; height: 56px; }
  .fv__btn--reserve { left: 108px; }
  .fv__btn--salon { left: 296px; }
  .fv__btns { position: static; }
  .fv__btn .btn__label { position: absolute; margin: -1px 0 0 -1px; }
  .fv__btn .btn__arrow { right: 23px; top: 24.2px; }
  .fv__scroll { left: 640px; top: 640px; width: 86px; height: 110px; }
  .fv__scroll-label { position: absolute; }
  /* SVG の箱は Chrome が整数 px に丸めて描くので、箱は x=679 に置き、線（中心 x=683.0）と矢じりは SVG の中で .315px ずらす（.ai から書き出した形） */
  .fv__scroll-line { position: absolute; left: 39px; top: 30px; width: 9px; height: 80px; }
  .fv__scroll-line svg { width: 9px; height: 80px; overflow: visible; animation: fv-scroll 2.4s cubic-bezier(.45, 0, .25, 1) infinite; }
  /* SCROLL の矢印（ご指示 10-20）: 上から線が伸び → デザインの位置で一拍止まり → 下へ 14px 流れながら消える、を繰り返す。
     伸びは clip-path で見せるので矢じりは潰れない。動きを減らす設定では止まる */
  @keyframes fv-scroll {
    0%   { clip-path: inset(0 0 100% 0); translate: 0 0; opacity: 1; }
    45%  { clip-path: inset(0 0 0 0);    translate: 0 0; opacity: 1; }
    70%  { clip-path: inset(0 0 0 0);    translate: 0 0; opacity: 1; }
    100% { clip-path: inset(0 0 0 0);    translate: 0 14px; opacity: 0; }
  }

  /* ---------- CONCEPT ---------- */
  .concept { height: 687px; background: linear-gradient(120deg, #faf7f3 0%, #f0e7db 100%); }
  .concept__photo { left: 735px; top: 120px; width: 448px; height: 448px; overflow: hidden; }   /* NR の下端 2px は写真のクリップで切れる（デザインどおり） */
  .concept__img { width: 448px; height: 448px; }
  .concept__mark { position: absolute; left: 5.35px; top: 329.54px; width: 105.148px; height: 121.071px; }   /* 下の 2.6px は写真の枠で切れる（デザインどおり） */

  /* ---------- PROMISE ---------- */
  .promise { height: 649px; }
  .promise__art { left: 957.4px; top: 207.1px; width: 488.554px; height: 458.276px; opacity: .3; }
  .promise__list { position: static; }
  .promise-item { position: absolute; top: 267px; width: 186px; height: 262px; }
  .promise-item--1 { left: 215px; } .promise-item--2 { left: 465px; } .promise-item--3 { left: 715px; } .promise-item--4 { left: 965px; }
  .promise-item > * { position: absolute; }
  .promise-item__title--outline::before { top: 13.306px; }   /* 行の上からベースライン 29px − 15.694px（＝_ol.ai の字形の上端 y1801.436） */
  .promise-item + .promise-item::before { content: ""; position: absolute; left: -32.5px; top: 0; width: 1px; height: 262px; background: var(--c-ink); }
  .promise-item__text .l { white-space: nowrap; }
  .promise-item__text .l--just { text-align: justify; text-align-last: justify; }   /* 自動で折り返した行（デザインでは両端揃え） */

  /* ---------- MENU ---------- */
  .menu { height: 2140px; background: linear-gradient(120deg, #faf7f3 0%, #f0e7db 100%); }
  .menu-card { width: 480px; height: 276px; border: 1px solid #fff; border-radius: 8px 8px 0 0; }
  .menu-card--lash { left: 183px; top: 382.3px; }
  .menu-card--perm { left: 703px; top: 382.3px; }
  .menu-card--brow { left: 183px; top: 698.3px; }
  .menu-card > * { position: absolute; margin: -1px 0 0 -1px; }
  .menu-card__img { left: 22px; top: 20px; width: 224px; height: 194px; }
  .menu-card__reserve { left: 0; top: 236px; width: 480px; height: 40px; background: #fff; transition: background-color .4s var(--ease); }
  .menu-card__reserve-label { position: absolute; }
  .menu-card__reserve .btn__arrow { left: 301px; top: 17.3px; }
  @media (hover: hover) { .menu-card__reserve:hover { background: var(--c-ivory); } }
  .price { left: 262px; top: 131.41px; width: 212px; }
  .price__row { position: relative; height: 28px; }
  .price__row > span { position: absolute; top: 0; white-space: nowrap; }
  .price__sub { font-size: 11.9px; line-height: 0; }   /* 「（片目○○本）」は 85% の縦横比率（= 11.9px） */
  .price__time { left: 106.62px; margin-top: 1px; }
  .price__yen { left: 146.04px; margin-top: -2.16px; }
  .menu-card--brow .price { top: 136.67px; }
  .menu-card--brow .price__yen { left: 146.04px; margin-top: -2.16px; }
  .price--stack .price__row { height: 40px; }
  .price--stack .price__time { left: 101.34px; margin-top: 17.42px; }
  .price--stack .price__yen { left: 140.76px; margin-top: 14.26px; }
  .menu-card--perm .price { top: 131.41px; }
  .menu-extra { width: 480px; }
  .menu-extra--option { left: 703px; top: 698.3px; }
  .menu-extra--off { left: 703px; top: 852.9px; }
  .menu-extra__title { position: absolute; width: 480px; padding-left: 4.79px; left: 0; }
  .menu-extra::before { content: ""; position: absolute; left: 0; top: 0; width: 480px; height: 22px; background: linear-gradient(90deg, var(--c-ink) 60%, rgba(7, 2, 0, 0) 100%); }
  .menu-extra__list { position: absolute; left: 0; top: 25.69px; width: 480px; }
  .menu-extra__row { position: relative; height: 28px; }
  .menu-extra__row > span { position: absolute; top: 0; white-space: nowrap; }
  .menu-extra__time { left: 165.81px; margin-top: 1px; }
  .menu-extra__yen { left: 209.49px; margin-top: -2.6px; }
  .menu-extra--off .menu-extra__list { top: 26.49px; }
  .menu-extra--off .menu-extra__yen { margin-top: -0.17px; }
  /* FACIAL ESTHETIC（2026-10-20 追加デザイン。MENU 帯の中、帯の上端からの位置） */
  .facial { left: 0; top: 0; width: 1366px; height: 0; }
  .facial > * { position: absolute; }
  .facial__courses { left: 0; top: 1490px; width: 1366px; height: 208px; }
  .facial-course { position: absolute; top: 0; width: 304px; height: 208px; }
  .facial-course--a { left: 183px; }
  .facial-course--b { left: 531px; }
  .facial-course--c { left: 879px; }
  .facial-course > * { position: absolute; white-space: nowrap; }
  .facial-course__time { left: 0; top: 155.46px; width: 304px; height: 26px; background: #e5d7bd; }   /* 金 40% */
  .facial-course__time-text { position: absolute; }
  /* 括弧の外側の空き: 正本は配布元の palt より左右 2px ずつ広い（内側は一致。colseg で実測） */
  .facial-course__paren { margin: 0 2px; }
  /* 列の区切り: 白 1px の線の両端に三角（.ai の線の矢印を書き出した形） */
  .facial-course--b::before, .facial-course--b::after { content: ""; position: absolute; top: 0; width: 5.983px; height: 208px;
    background: url(../img/facial-divider.svg) no-repeat 0 0 / 100% 100%; }
  .facial-course--b::before { left: -24.975px; }   /* 線の中心 x=509 */
  .facial-course--b::after { left: 323.025px; }    /* 線の中心 x=857 */
  .facial-option { left: 183px; top: 1738px; width: 1000px; height: 186px; background: rgba(255, 255, 255, .5); }
  .facial-option > * { position: absolute; }
  .facial-option__row { position: relative; height: 28px; }
  /* 幅は内容どおり（行の箱は幅 0 なので、指定しないと Chrome は nowrap でも <wbr> で折る） */
  .facial-option__row > span { position: absolute; left: 0; top: 0; width: max-content; white-space: nowrap; }
  .facial__reserve { left: 443px; top: 1972px; width: 480px; height: 48px; background: #fff; transition: background-color .4s var(--ease); }
  .facial__reserve-label { position: absolute; }
  .facial__reserve .btn__arrow { left: 312.29px; top: 21px; }
  @media (hover: hover) { .facial__reserve:hover { background: var(--c-ivory); } }

  /* ---------- SALON（カードは縦に積む。追加・削除で帯の高さが伸び縮みする） ---------- */
  .salon { padding: 394px 0 120px; }
  .salon .band__inner > .salon__list { position: relative; left: 283px; width: 800px; display: flex; flex-direction: column; gap: 40px; }   /* gap なので隠したカードの分の余白は残らない */
  .salon .band__inner > .salon__empty { position: relative; left: 283px; width: 800px; padding: 56px 24px; }
  .salon__head { left: 0; top: -394px; width: 1366px; height: 0; }
  .salon__head > * { position: absolute; }
  .salon-filter { left: 0; top: -394px; width: 1366px; height: 0; }
  .salon-filter__field > * { position: absolute; }
  .salon-filter__label { display: block; }
  .salon-filter__select { width: 168px; height: 56px; top: 258px; }
  .salon-filter__field--area .salon-filter__select { left: 479.1px; }
  .salon-filter__field--type .salon-filter__select { left: 778.1px; }
  .salon-filter select { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 100%; margin: 0; padding: 0 0 0 26.09px;
    background: #f0f0f0; border: 1px solid #cdcccc; border-radius: 4px; cursor: pointer; }
  /* カーニング「オプティカル」の行（Chrome に無い）: 正本のインク幅から字間を逆算（textcmp.py） */
  .salon-filter__field--area .salon-filter__label { letter-spacing: -.079em; }
  .salon-filter__field--type .salon-filter__label { letter-spacing: -.007em; }
  .salon-filter select { letter-spacing: -.025em; }
  .salon-filter__select svg { position: absolute; left: 141.4px; top: 25.8px; fill: none; stroke: var(--c-ink-70); stroke-width: 1; pointer-events: none; }
  .salon-card { display: flex; min-height: 320px; }
  .salon-card__media { flex: 0 0 400px; position: relative; }
  .salon-card__media img { width: 400px; height: 100%; object-fit: cover; }
  .salon-card__media--blank { display: flex; align-items: center; justify-content: center; background: var(--c-ink-70); }
  .salon-card__media--blank .salon-card__mark { width: 82.001px; height: 94.419px; }
  .salon-card__body { flex: 0 0 400px; position: relative; padding-bottom: 73.79px; background: var(--c-ivory); }
  .salon-card__tag { width: 213px; height: 20px; margin-top: 40px; padding-left: 43.51px; line-height: 20px; background: var(--c-gold); }
  .salon-card__name { margin: 34.6px 0 0 43.51px; }
  .salon-card__text { margin: 10.14px 0 0 43.51px; }
  .salon-card__hours { margin: 8.16px 0 0 43.51px; }
  .salon-card__hours::before { content: ""; display: block; width: 295.6px; height: 1px; margin: 0 0 16.31px -3.51px; background: var(--c-gold); }
  .salon-card__btn { position: absolute; right: 0; bottom: 0; width: 168px; height: 56px; }
  .salon-card__btn .btn__label { position: absolute; margin: -1px 0 0 -1px; }
  .salon-card__btn .btn__arrow { right: 23px; top: 24.2px; }

  /* ---------- ACADEMY ---------- */
  .academy { height: 1071px; background: var(--c-ivory); }
  .academy__photos { position: absolute; left: 0; right: 0; top: 0; height: 400px; }
  .academy__photo { position: absolute; top: 0; width: 50%; height: 400px; object-fit: cover; }
  .academy__photo--1 { left: 0; object-position: 100% 50%; }
  .academy__photo--2 { left: 50%; opacity: .85; object-position: 0 50%; }
  .academy__wave { position: absolute; left: 0; top: 337.132px; width: 100%; height: 257.735px; fill: var(--c-ivory); }
  .academy__btn { left: 183px; top: 895px; width: 200px; height: 56px; }
  .academy__btn .btn__label { position: absolute; margin: -1px 0 0 -1px; }
  .academy__btn .btn__arrow { right: 23px; top: 24.2px; }
  .academy__program { left: 819.4px; top: 554px; width: 364.406px; height: 314.465px; }
  .academy__petals { width: 364.406px; height: 314.465px; }
  .academy__steps { position: absolute; inset: 0; }
  .academy__step { position: absolute; }
  .academy__step--2, .academy__step--3, .academy__step--4 { font: inherit; }
  .academy__steps { font-family: var(--ff-goth); font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .1em; color: #fff; }

  /* ---------- OWNER ---------- */
  .owner { height: 759px; }
  .owner__photo { left: min(0px, calc(683px - 50vw)); top: 120px; width: max(631px, calc(50vw - 52px)); height: 520px; object-fit: cover; object-position: 100% 50%; }
  .owner__tags { left: 679px; top: 462.7px; width: 424px; display: grid; grid-template-columns: repeat(3, 136px); gap: 8px; }
  .owner__tag { height: 32px; padding-top: 2.1px; text-align: center; background: #fff; border: 1px solid #b5b3b2; }
  .owner__btn { left: 679px; top: 582.7px; width: 224px; height: 56px; }
  .owner__btn .btn__label { position: absolute; margin: -1px 0 0 -1px; }
  .owner__btn .btn__arrow { right: 23px; top: 24.2px; }

  /* ---------- RECRUIT ---------- */
  .recruit { height: 590px; z-index: 1; overflow: visible; }   /* カードの影は帯の外へ出す */
  .recruit__card { left: 83px; top: 0; width: 1200px; height: 590px; background: var(--c-ivory); box-shadow: 0 0 42px rgba(190, 156, 89, .3); }
  .recruit__card > * { position: absolute; }
  .recruit__btn { left: 100px; top: 451.5px; width: 200px; height: 56px; }
  .recruit__btn .btn__label { position: absolute; margin: -1px 0 0 -1px; }
  .recruit__btn .btn__arrow { right: 23px; top: 24.2px; }
  .recruit__photo { left: 657.3px; top: 80px; width: 440px; height: 429.7px; }

  /* ---------- NEWS ---------- */
  .news { height: 693px; }
  .news__head { left: 0; top: 0; width: 1366px; height: 0; }
  .news__head > * { position: absolute; }
  .news__list { left: 283px; top: 284.8px; width: 800px; border-top: 1px solid var(--c-gold-25); }   /* 罫線は 1px の中心が design の線（7493.3）に来る位置 */
  .news-item { border-bottom: 1px solid var(--c-gold-25); }
  .news-item__link { position: relative; top: -.5px; display: block; height: 95px; transition: background-color .4s var(--ease); }   /* 1 行 = 95＋罫線 1 = 96px（design の行送り）。中身は罫線の中心基準で −0.5px */
  @media (hover: hover) { .news-item__link:hover { background-color: rgba(250, 247, 243, .9); } }
  .news-item__link > * { position: absolute; white-space: nowrap; }
  .news-item__cat { left: 8px; top: 36px; width: 112px; height: 24px; border-radius: 12px; background: var(--c-gold); line-height: 24px; padding-top: 0; }
  .news-item__date { margin-left: -283px; }
  .news-item__title { margin-left: -283px; transition: color .4s var(--ease); }
  .news-item__arrow { left: 758px; top: 45.2px; fill: none; stroke: var(--c-gold-70); stroke-width: 1; transition: transform .4s var(--ease); }
  @media (hover: hover) {
    .news-item__link:hover .news-item__title { color: var(--c-gold); }
    .news-item__link:hover .news-item__arrow { transform: translateX(4px); }
  }

  /* ---------- CTA ---------- */
  .cta { height: 448px; }
  .cta__art { left: 957.4px; top: 17.6px; width: 488.554px; height: 458.276px; opacity: .3; }
  .cta__btn { left: 582.7px; top: 272.2px; width: 168px; height: 56px; }
  .cta__btn .btn__label { position: absolute; margin: -1px 0 0 -1px; }
  .cta__btn .btn__arrow { right: 23px; top: 24.2px; }

  /* ---------- footer ---------- */
  .footer { height: 246px; background: var(--c-ink); }
  .footer__inner { position: relative; width: 1366px; height: 100%; margin: 0 auto; }
  .footer__inner > * { position: absolute; }
  .footer__logo { left: 183px; top: 80px; }
  .footer__logo img { width: 148px; height: 50.435px; }
  .fnav__item { position: absolute; }
  .fnav__item a { display: inline-block; transition: opacity .4s var(--ease); }
  @media (hover: hover) { .fnav__item a:hover { opacity: .6; } }
}

/* ==========================================================================
   スマートフォン（900px 以下）
   FV: 支給のモバイル用アートボード（375×650）の値。--u（デザイン 1px あたりの表示 px）で表示幅に合わせて拡大する。
       タブレットでは画面の高さで頭打ち（1 画面に収める）、最大 1.6 倍。
   それ以外: SP デザインは無いので、同じ中身をスマートフォンの読み方に並べ直す（README「SP の組み方」）。
   ========================================================================== */
@media (max-width: 900px) {
  html { scroll-padding-top: 64px; }
  body { font-size: 14px; line-height: 1.9; letter-spacing: .06em; }
  .l, .u-line { display: inline; }
  .u-line { display: inline-block; }
  .sec-label { font-family: var(--ff-en); font-size: 13px; line-height: 1.6; letter-spacing: .12em; }
  .sp-h2, .concept__title, .promise__title, .menu__title, .facial__title, .salon__title, .academy__title, .owner__title, .recruit__title, .news__title, .cta__title {
    margin-top: 12px; font-family: var(--ff-min); font-size: 25px; font-weight: 600; line-height: 1.6; letter-spacing: .08em; font-feature-settings: "palt" 1; }
  .band { position: relative; padding: 72px 20px; }
  .band__inner { max-width: 600px; margin: 0 auto; }
  .btn { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 335px; height: 56px; font-size: 13px; letter-spacing: .1em; }
  .btn__arrow { right: 20px; top: calc(50% - 3px); }
  /* 行末に 1〜2 字だけ残る改行を避ける（text-wrap-style は折り返し方だけを変え、nowrap を解除しない） */
  .band p:not(.fv__lead), .news-item__title, .menu-card__title { text-wrap-style: pretty; }

  /* ---------- header ---------- */
  .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 88px; transition: background-color .4s var(--ease), height .4s var(--ease); }
  .header__inner { position: relative; height: 100%; }
  .header__logo { position: absolute; left: 24px; top: 24px; z-index: 2; transform-origin: 0 0; transition: transform .4s var(--ease); }
  .header__logo img { width: 116px; height: 39.53px; }
  .header.is-scrolled, .header.is-open { height: 64px; background: rgba(7, 2, 0, .92); }
  .header.is-scrolled .header__logo, .header.is-open .header__logo { transform: translateY(-12px) scale(.9); }
  .header__toggle { position: absolute; right: 16px; top: 11px; z-index: 2; width: 44px; height: 44px; transition: transform .4s var(--ease); }
  .header.is-scrolled .header__toggle, .header.is-open .header__toggle { transform: translateY(-12px); }
  /* 線は 1px だが中心が y=28・38（.5 の位置）なので、整数位置の高さ 2px の箱の中央に 1px の白をグラデーションで描く（箱の .5px 位置は描画で丸められる） */
  .header__toggle span { position: absolute; left: 12px; width: 20px; height: 2px; background: linear-gradient(transparent 25%, #fff 25% 75%, transparent 75%); transition: transform .4s var(--ease), top .4s var(--ease); }
  .header__toggle span:nth-child(1) { top: 16px; }
  .header__toggle span:nth-child(2) { top: 26px; }
  .header.is-open .header__toggle span:nth-child(1) { top: 21px; transform: rotate(30deg); }
  .header.is-open .header__toggle span:nth-child(2) { top: 21px; transform: rotate(-30deg); }
  /* メニュー: 右から出る全画面のパネル */
  .gnav { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
    padding: 88px 20px 48px; background: rgba(7, 2, 0, .96); color: #fff;
    transform: translateX(100%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; }
  .header.is-open .gnav { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
  .gnav__list { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .gnav__link { display: block; padding: 10px 24px; font-family: var(--ff-en); font-size: 20px; line-height: 1.2; letter-spacing: .12em; }
  .gnav__link.is-current { color: var(--c-gold); }
  .header__reserve { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 200px; height: 56px;
    background: var(--c-ink); border: 1px solid var(--c-ink-70); }
  .header__reserve-en { font-family: var(--ff-en); font-size: 15px; line-height: 1.3; letter-spacing: .1em; color: var(--c-gold); }
  .header__reserve-ja { font-size: 11px; line-height: 1.5; letter-spacing: .06em; }
  html.is-menu-open { overflow: hidden; }

  /* ---------- FV（モバイル用アートボード） ---------- */
  /* --u は FV の寸法の単位。画面下に固定するボタンの高さとフッターの余白でも使うので :root に置く */
  :root { --u: calc(100vw / 375); --fixbar-h: max(52px, calc(60 * var(--u))); }
  @supports (height: 100svh) { :root { --u: min(calc(100vw / 375), calc(100svh / 650), 1.6px); } }
  /* ボタンを画面下に固定したので、FV はボタンの上端（y=590）まで。写真とライトはアートボード 650 の箱のまま置き、下の 60 を FV の枠で切る
     （ボタンの下に隠れていた写真の帯が、縦に長い画面で見えないように） */
  .fv { position: relative; height: calc(590 * var(--u)); padding: 0; overflow: hidden; background: #1c1611; color: #fff; }
  .fv .band__inner { position: static; max-width: none; }
  .fv__bg, .fv__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .fv__bg { bottom: auto; height: calc(650 * var(--u)); }
  .fv__bg img { object-fit: cover; object-position: 50% 50%; }
  .fv__lights { top: calc(325 * var(--u)); width: max(100%, calc(375 * var(--u))); aspect-ratio: 375 / 650; }   /* SP 写真（375×650）の cover と同じ箱 */
  .fv__light--1 { left: 55.41%; top: 46.18%; width: 23.47%; height: 4.68%; }
  .fv__light--2 { left: 39.20%; top: 48.58%; width: 21.33%; height: 3.69%; }
  .fv__light--3 { left: 25.65%; top: 50.85%; width: 20.05%; height: 3.45%; }
  .fv__sign { position: absolute; left: calc(234.56 * var(--u)); top: calc(385.37 * var(--u)); width: calc(105.376 * var(--u)); height: auto; opacity: .9; mix-blend-mode: multiply; }
  .fv__title { position: absolute; left: calc(20.74 * var(--u)); top: calc(146.13 * var(--u)); font-family: var(--ff-min); font-size: calc(52 * var(--u)); font-weight: 600;
    line-height: calc(66 * var(--u)); letter-spacing: .08em; font-feature-settings: "palt" 1; white-space: nowrap; }
  .fv__title-seg { display: block; }
  .fv__title-l1 { margin-left: calc(-2.739 * var(--u)); }
  .fv__lead { position: absolute; left: calc(20.13 * var(--u)); top: calc(352.13 * var(--u)); font-family: var(--ff-min); font-size: calc(16 * var(--u)); font-weight: 600;
    line-height: calc(30 * var(--u)); letter-spacing: .1em; font-feature-settings: "palt" 1; white-space: nowrap; }
  .fv__lead-seg { display: block; }
  /* 「WEB予約」「店舗を探す」は画面下に固定（ご指示 2026-10-21）。375×650 の最初の画面ではデザインの位置（FV の下端）と同じ。
     デザインの帯は x=0.229 から置かれているが、固定すると右のはみ出しが横スクロールになるので画面幅ちょうどにする。メニュー（z-index 100）の下 */
  .fv__btns { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; }
  .fv__btn { flex: 1 1 50%; max-width: none; height: var(--fixbar-h); box-shadow: none; }
  /* 文字は帯の中央・ベースライン y=625.931（デザイン）。Chrome は行末の字間も含めて中央に置くので左を .1em 空ける */
  .fv__btn .btn__label { padding: 0 0 calc(3.94 * var(--u)) .1em; font-size: calc(18 * var(--u)); letter-spacing: .1em; }
  .fv__btn .btn__arrow, .fv__scroll, .fv__tagline { display: none; }

  /* ---------- CONCEPT ---------- */
  .concept { background: linear-gradient(120deg, #faf7f3 0%, #f0e7db 100%); }
  .concept__text { margin-top: 28px; }
  .concept__text p + p { margin-top: 0; }
  .concept__text p:first-child .l--last::after { content: ""; display: block; }
  .concept__photo { position: relative; margin-top: 36px; overflow: hidden; }
  .concept__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
  .concept__mark { position: absolute; left: 1.19%; top: 73.56%; width: 23.47%; height: auto; }   /* PC と同じ比率（448px 角の写真に対し x5.35・y329.54・幅105.148） */

  /* ---------- PROMISE ---------- */
  .promise { overflow: hidden; color: #fff; text-align: center; }
  .promise__art { position: absolute; right: -60px; bottom: -40px; width: 260px; height: auto; opacity: .3; }
  .promise__title { font-size: 22px; }
  .promise__list { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 420px; margin: 40px auto 0; text-align: left; }
  .promise-item { position: relative; padding: 2px 0 2px 20px; border-left: 1px solid var(--c-ink); }
  .promise-item__num { display: block; font-family: var(--ff-en); font-size: 20px; line-height: 1.3; letter-spacing: .1em; color: var(--c-gold); }
  .promise-item__title { margin-top: 4px; font-family: var(--ff-en); font-size: 18px; line-height: 1.3; letter-spacing: .1em; }
  /* 字形の高さ 21.576/24em・ベースライン 15.694/24em を、文字の見出しと同じ大きさ・ベースライン（行の上から .968em）に置く */
  .promise-item__title--outline { position: relative; }
  .promise-item__title--outline::before { top: .314em; }   /* 行の上からベースライン .968em − .654em */
  .promise-item__text { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--c-ivory); }
  .promise-item__text .l { display: block; }
  .promise-item__text .l--just, .promise-item__text .l--just + .l { display: inline; }

  /* ---------- MENU ---------- */
  .menu { background: linear-gradient(120deg, #faf7f3 0%, #f0e7db 100%); }
  .menu__label, .menu__title, .menu__lead { text-align: center; }
  .menu__lead { margin-top: 20px; text-align: left; }
  .menu-card { position: relative; margin-top: 32px; padding: 20px 20px 0; border: 1px solid #fff; border-radius: 8px 8px 0 0; }
  .menu-card + .menu-card { margin-top: 24px; }
  .menu-card__img { width: 100%; height: auto; aspect-ratio: 224 / 194; object-fit: cover; }
  .menu-card__title { margin-top: 18px; font-family: var(--ff-min); font-size: 21px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; font-feature-settings: "palt" 1; }
  .menu-card__text { margin-top: 8px; font-size: 13px; line-height: 1.8; }
  .price { margin-top: 14px; }
  .price__row, .menu-extra__row, .facial-option__row { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; line-height: 1.5; }
  .price__name, .menu-extra__name, .facial-option__name { flex: 1 1 auto; font-size: 14px; letter-spacing: .02em; }
  .price__sub { font-size: .85em; }
  .price__time, .menu-extra__time, .facial-option__time { font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
  .price__yen, .menu-extra__yen, .facial-option__yen { min-width: 4.4em; font-family: var(--ff-en); font-size: 19px; line-height: 1; letter-spacing: 0; color: var(--c-gold); text-align: right; white-space: nowrap; }
  .menu-card__note { margin-top: 4px; font-size: 12px; line-height: 1.7; }
  .menu-card__reserve, .facial__reserve { display: flex; align-items: center; justify-content: center; gap: 14px; height: 48px; margin: 20px -20px 0; background: #fff; font-size: 12px; letter-spacing: .1em; }
  .menu-card__reserve .btn__arrow, .facial__reserve .btn__arrow { position: static; }
  .menu-extra { margin-top: 40px; }
  .menu-extra + .menu-extra { margin-top: 28px; }
  .menu-extra__title { height: 24px; padding-left: 6px; font-family: var(--ff-en); font-size: 16px; line-height: 24px; font-kerning: none; color: var(--c-gold);
    background: linear-gradient(90deg, var(--c-ink) 60%, rgba(7, 2, 0, 0) 100%); }
  .menu-extra__list { margin-top: 6px; }
  /* FACIAL ESTHETIC: PC の中身を縦に並べ直す（コース 3 つ → オプション → 予約） */
  .facial { margin-top: 72px; }
  .facial__label, .facial__title { text-align: center; }
  .facial__lead { margin-top: 20px; }
  .facial__courses { margin-top: 28px; }
  .facial-course { padding: 24px 0; text-align: center; }
  .facial-course + .facial-course { border-top: 1px solid #fff; }
  .facial-course__label { font-family: var(--ff-en); font-size: 22px; line-height: 1.3; letter-spacing: .04em; color: var(--c-gold); }
  .facial-course__name { margin-top: 8px; font-family: var(--ff-min); font-size: 18px; font-weight: 600; line-height: 1.55; letter-spacing: .1em; font-feature-settings: "palt" 1; }
  .facial-course__yen { margin-top: 6px; font-family: var(--ff-en); font-size: 19px; line-height: 1.3; color: var(--c-gold); }
  .facial-course__time { margin-top: 12px; padding: 4px 8px; font-size: 13px; line-height: 1.6; letter-spacing: .06em; background: #e5d7bd; }
  .facial-option { margin-top: 12px; padding: 24px 20px 18px; background: rgba(255, 255, 255, .5); }
  .facial-option__title { font-family: var(--ff-min); font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; font-feature-settings: "palt" 1; }
  .facial-option__list { margin-top: 8px; }
  /* 品名は語の切れ目（<wbr>）でだけ折り返す。料金の列は Option／Off Menu の 4.4em では品名が窮屈なので詰める */
  .facial-option__name { word-break: keep-all; overflow-wrap: anywhere; }
  .facial-option__yen { min-width: 3.6em; }
  .facial-option__list + .facial-option__list { margin-top: 0; }
  .facial__reserve { margin: 28px 0 0; }

  /* ---------- SALON ---------- */
  .salon__head { text-align: center; }
  .salon-filter { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
  .salon-filter__field { display: flex; align-items: center; gap: 16px; }
  .salon-filter__label { flex: 0 0 5.5em; font-size: 14px; letter-spacing: .1em; }
  .salon-filter__select { position: relative; flex: 1 1 auto; }
  .salon-filter select { appearance: none; -webkit-appearance: none; width: 100%; height: 52px; margin: 0; padding: 0 40px 0 20px; font-size: 14px; letter-spacing: .1em;
    background: #f0f0f0; border: 1px solid #cdcccc; border-radius: 4px; color: var(--c-ink); }
  .salon-filter__select svg { position: absolute; right: 20px; top: calc(50% - 2.5px); fill: none; stroke: var(--c-ink-70); stroke-width: 1; pointer-events: none; }
  .salon__list { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
  .salon__empty { padding: 40px 20px; font-size: 13px; }
  .salon-card__media { position: relative; aspect-ratio: 5 / 4; }
  .salon-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .salon-card__media--blank { display: flex; align-items: center; justify-content: center; background: var(--c-ink-70); }
  .salon-card__media--blank .salon-card__mark { width: 70px; height: auto; }
  .salon-card__body { padding: 28px 20px 0; background: var(--c-ivory); }
  .salon-card__tag { display: inline-block; margin-left: -20px; padding: 0 20px; font-family: var(--ff-en); font-size: 12px; line-height: 22px; letter-spacing: .1em; color: #fff; background: var(--c-gold); }
  .salon-card__name { margin-top: 16px; font-family: var(--ff-min); font-size: 19px; font-weight: 600; line-height: 1.55; letter-spacing: .1em; }
  .salon-card__text { margin-top: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--c-gold); font-size: 12.5px; line-height: 1.8; }
  .salon-card__hours { margin-top: 14px; font-size: 13px; line-height: 1.7; }
  .salon-card__btn { max-width: none; margin: 24px -20px 0; width: calc(100% + 40px); }

  /* ---------- ACADEMY ---------- */
  .academy { padding-top: 0; background: var(--c-ivory); }
  .academy__photos { position: relative; height: 220px; margin: 0 -20px; overflow: hidden; }
  .academy__photo { position: absolute; top: 0; width: 50%; height: 100%; object-fit: cover; }
  .academy__photo--1 { left: 0; }
  .academy__photo--2 { left: 50%; opacity: .85; }
  .academy__wave { position: absolute; left: 0; top: calc(220px - 100vw * 62.868 / 1366); width: 100%; height: calc(100vw * 257.735 / 1366); fill: var(--c-ivory); }
  .academy .band__inner { padding-top: 40px; }
  .academy__text { margin-top: 20px; }
  .academy__btn { margin-top: 32px; }
  .academy__program { position: relative; width: 364.406px; max-width: 100%; aspect-ratio: 364.406 / 314.465; margin: 44px auto 0; }
  .academy__petals { width: 100%; height: auto; }
  .academy__step { position: absolute; width: 38.4%; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; color: #fff; }
  .academy__step--1 { left: 5.9%; top: 34.5%; }
  .academy__step--2 { left: 50.2%; top: 16.3%; }
  .academy__step--3 { left: 8%; top: 69.3%; }
  .academy__step--4 { left: 54.2%; top: 50.2%; }

  /* ---------- OWNER ---------- */
  .owner .band__inner { display: flex; flex-direction: column; }
  .owner__photo { order: -1; width: calc(100% + 40px); max-width: none; height: auto; aspect-ratio: 631 / 520; margin: -72px -20px 40px; object-fit: cover; }
  .owner__text { margin-top: 20px; }
  .owner__tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
  .owner__tag { padding: 6px 2px; font-size: 13px; line-height: 1.5; letter-spacing: .06em; text-align: center; background: #fff; border: 1px solid #b5b3b2; }
  .owner__btn { margin-top: 32px; }

  /* ---------- RECRUIT ---------- */
  .recruit { padding-top: 24px; }
  .recruit__card { display: flex; flex-direction: column; padding: 40px 24px; background: var(--c-ivory); box-shadow: 0 0 32px rgba(190, 156, 89, .3); }
  .recruit__text { margin-top: 20px; }
  .recruit__photo { order: 4; width: 100%; height: auto; aspect-ratio: 440 / 429.7; margin-top: 28px; object-fit: cover; }
  .recruit__btn { order: 5; margin-top: 28px; }

  /* ---------- NEWS ---------- */
  .news__head { text-align: center; }
  .news__list { margin-top: 32px; border-top: 1px solid var(--c-gold-25); }
  .news-item { border-bottom: 1px solid var(--c-gold-25); }
  .news-item__link { display: grid; grid-template-columns: auto 1fr 26px; grid-template-areas: "cat date arrow" "title title arrow"; align-items: center; gap: 10px 14px; padding: 20px 0; }
  .news-item__cat { grid-area: cat; width: 96px; height: 22px; border-radius: 11px; font-family: var(--ff-en); font-size: 12px; line-height: 22px; letter-spacing: .1em; text-align: center; color: #fff; background: var(--c-gold); }
  .news-item__date { grid-area: date; font-size: 12px; letter-spacing: .08em; color: #808088; }
  .news-item__title { grid-area: title; font-size: 14px; line-height: 1.7; letter-spacing: .08em; color: #000010; }
  .news-item__arrow { grid-area: arrow; fill: none; stroke: var(--c-gold-70); stroke-width: 1; }

  /* ---------- CTA ---------- */
  .cta { overflow: hidden; color: #fff; text-align: center; }
  .cta__art { position: absolute; right: -60px; bottom: -40px; width: 240px; height: auto; opacity: .3; }
  .cta__title { margin-top: 0; }
  .cta__text { margin-top: 16px; text-align: left; }
  .cta__btn { margin: 32px auto 0; }

  /* ---------- footer ---------- */
  .footer { padding: 48px 20px calc(40px + var(--fixbar-h)); color: #fff; background: var(--c-ink); text-align: center; }   /* 固定ボタンの高さぶん下を空け、最後まで読めるように */
  .footer__logo { display: inline-block; }
  .footer__logo img { width: 130px; height: auto; }
  .fnav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 4px; max-width: 360px; margin: 28px auto 0; }
  .fnav__item a { display: block; padding: 12px 10px; font-family: var(--ff-en); font-size: 14px; line-height: 1.4; letter-spacing: .1em; }
  .footer__copy { margin-top: 24px; font-size: 12px; letter-spacing: .1em; color: #838080; }
}
@media (max-width: 374px) {
  .academy__program { zoom: .86; }
  /* 320px でも品名（エレクトロポレーション 等）が語の途中で折れない幅にする */
  .facial-option { padding-inline: 12px; }
  .facial-option__name { font-size: 13px; }
}
/* タブレット縦（640〜900px）: 中身の幅に余裕があるので、メニューと店舗カードは PC と同じ並びに戻す */
@media (min-width: 640px) and (max-width: 900px) {
  .band__inner { max-width: 720px; }
  .menu .band__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px;
    grid-template-areas: "label label" "title title" "lead lead" "lash perm" "brow opt" "brow off" "facial facial"; align-items: start; }
  .menu__label { grid-area: label; } .menu__title { grid-area: title; } .menu__lead { grid-area: lead; text-align: center; }
  .menu-card--lash { grid-area: lash; } .menu-card--perm { grid-area: perm; } .menu-card--brow { grid-area: brow; }
  .menu-extra--option { grid-area: opt; } .menu-extra--off { grid-area: off; }
  .menu-card + .menu-card { margin-top: 32px; }
  .menu-card--brow, .menu-extra--option { margin-top: 24px; }
  .facial { grid-area: facial; }
  .facial__lead { text-align: center; }
  .salon-card { display: flex; }
  .salon-card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 320px; }
  .salon-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
  .salon-card__btn { margin-top: auto; align-self: flex-end; width: 200px; margin-right: -20px; }
  .salon-card__hours { margin-bottom: 24px; }
}
/* 760〜900px: FACIAL のコースを PC と同じ 3 列（列の間に白い線）、オプションを 2 列に（640〜759px は縦並びのまま。3 列では「コー／ス」と折れる） */
@media (min-width: 760px) and (max-width: 900px) {
  .facial__courses { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
  .facial-course { display: flex; flex-direction: column; align-items: center; padding: 4px 12px; }
  .facial-course + .facial-course { border-top: 0; border-left: 1px solid #fff; }
  .facial-course__name { font-size: 16px; }
  .facial-course__time { align-self: stretch; margin-top: auto; padding: 4px 6px; font-size: 12px; }
  .facial-course__yen { margin-bottom: 12px; }
  .facial-option { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 32px; padding: 24px 24px 18px; }
  .facial-option__title { grid-column: 1 / -1; }
  .facial-option__list + .facial-option__list { margin-top: 8px; }
  .facial__reserve { max-width: 480px; margin: 32px auto 0; }
}


/* 901〜1365px: JS が無効なときだけ段階の zoom（JS が有効なら fit.js が連続値を入れる） */
@media (min-width: 1281px) and (max-width: 1365px) { html:not(.js) { zoom: .9375; } }
@media (min-width: 1181px) and (max-width: 1280px) { html:not(.js) { zoom: .8638; } }
@media (min-width: 1081px) and (max-width: 1180px) { html:not(.js) { zoom: .7906; } }
@media (min-width: 981px) and (max-width: 1080px) { html:not(.js) { zoom: .7174; } }
@media (min-width: 901px) and (max-width: 980px) { html:not(.js) { zoom: .6588; } }

/* ---------- スクロールで控えめにフェードイン（JS が有効なときだけ初期非表示） ---------- */
.js .js-fade { opacity: 0; translate: 0 24px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
.js .js-fade.is-in { opacity: 1; translate: none; }
/* フェードを持つボタンは hover の変化も残す（フェードの transition がボタンの transition を上書きしないように） */
.js .btn.js-fade, .js .facial__reserve.js-fade { transition: opacity 1s var(--ease), translate 1s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .js-fade { opacity: 1; translate: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
  .salon__list.is-filtered .salon-card { animation: none; }
  .fv__scroll-line svg { animation: none; }
  .fv__light { animation: none; }
}