@import url("looks/look-uz.css"); /* ← デザインの切り替えはこの1行（look-a／b／c、磨き案 look-d／e／f／g） */
/* DEMO-HP-2〜HP-8：HP の共通の見た目（どの店でも同じ。色・書体は1行目の look で選ぶ）— スマホ幅優先（390px 基準）。
 * HP-8：配色は「アイボリー × シャンパンベージュ × ディープグリーン」＋セリフ体見出しの“高級ホテルスパ”系（つばさ判断用の1案）。
 * 色はすべてこの :root のトークンに集めてある。ここを差し替えれば全ページの色が変わる
 * （例外：写真の仮画像の色味 .tone-* は人ごとの「写真」の代わりなので、トークンの外に置いている）。
 * 文字色（--accent・--ink・--muted）と主ボタンの地（--btn）は、地の色に対して 4.5:1 以上になる濃さにしてある。
 * HP-DESIGN：デザインの案は assets/looks/ にある（a＝この :root のまま／b＝黒×金／c＝白×ネイビー×シルバー）。
 * 切り替えは、1行目の @import の look-a を look-b か look-c に変えるだけ。見比べるだけなら、アドレスに ?look=b などを付ける。 */
:root {
  color-scheme: light;
  /* ---- 配色トークン（ここだけ差し替えれば全ページの色が変わる） ---- */
  --bg: #FFFDF8;              /* 地（アイボリー） */
  --surface: #FFFFFF;         /* カード・箱の地 */
  --ivory: #F7F2E8;           /* 交互の帯 */
  --pearl: #EFE8DA;           /* 写真枠の下地 */
  --ink: #1F2B25;             /* 本文 */
  --muted: #5D665E;           /* 補足の文字 */
  --accent: #2E4A3D;          /* ディープグリーン：見出し・ラベル・リンク */
  --accent-soft: #E9EFE9;     /* 淡い緑：選択中・強調の地 */
  --on-accent: #FFFDF8;       /* 緑・色地の上の文字 */
  --btn: linear-gradient(135deg, #3B5C4C 0%, #243E31 100%);        /* 主ボタン */
  --btn-hover: linear-gradient(135deg, #32503F 0%, #1C3327 100%);
  --btn-shadow: 0 8px 22px rgba(36, 62, 49, .20);
  --ornament: #C2AA7E;        /* シャンパンベージュ：飾り線・点（文字には使わない） */
  --champagne-soft: #F4EDE0;  /* 淡いシャンパン：強調の地 */
  --line: #E8E0D1;            /* 罫線 */
  --line-accent: #D8C8A6;     /* シャンパンの罫線 */
  --panel: rgba(255, 253, 248, .88);  /* 写真の上に重ねる箱 */
  --tint-1: #FBF7EE;          /* 帯・箱のグラデーション（明） */
  --tint-2: #F1E8D8;          /* 帯・箱のグラデーション（暗） */
  --sat: #2F5E8E; --sun: #A3423A;     /* 土曜・日曜の文字 */
  --footer-bg: #213529; --footer-ink: #F2ECDF; --footer-muted: #BFC9BF; --footer-line: rgba(242, 236, 223, .18);
  --note-bg: #2E4A3D; --note-ink: #EFE9DC;   /* いちばん上のデモの断り書き */
  --toast-bg: rgba(31, 43, 37, .94);
  --photo-frame: rgba(194, 170, 126, .55);   /* 仮画像の額の細線 */
  --photo-shade: rgba(31, 43, 37, .10);
  --form-bg: #F5F1EB;         /* 埋め込みフォーム（予約台帳OS）の地の色に合わせる */
  --line-btn: #04803E; --line-btn-hover: #036B34;   /* LINE ボタンの緑（白文字で 4.5:1 以上） */
  --ok: #1F7A50; --ok-soft: #E6F4EC; --ok-glow: rgba(31, 122, 80, .14); --ok-glow-2: rgba(31, 122, 80, .06);  /* ご案内できます・受付中 */
  --few: #8A5A00; --few-soft: #FFF1D6;    /* 残りわずか */
  --ng: #9A3A30; --ng-soft: #F8ECE9; --ng-glow: rgba(154, 58, 48, .14);  /* 満員・ご予約満了 */
  --new: #9A4A58;                         /* NEW マーク */
  --shadow: 0 14px 36px rgba(36, 62, 49, .08);
  --shadow-hover: 0 22px 46px rgba(36, 62, 49, .16);
  /* 絵（メインビジュアル・地図・お知らせの仮画像）の色 */
  --il-wall: #F3EDE2; --il-floor: #E6DDCC; --il-white: #FFFDF8; --il-soft: #EDE4D2; --il-glow: #FBF4E6;
  --il-line: #D8C8A6; --il-wood: #D2C2A2; --il-rail: #CFC8B8; --il-plant: #9FB3A2;
  --il-accent: #2E4A3D; --il-accent-2: #6F8C7C; --il-ink: #1F2B25; --il-muted: #5D665E;
  /* ---- 書体・余白 ---- */
  --display: "Cormorant Garamond", "UZ Display", "Times New Roman", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.9 var(--sans); letter-spacing: .03em; padding-bottom: 76px; overflow-x: hidden; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; margin: 28px 0 0; }

/* デモの断り書き */
.demo-note { margin: 0; background: var(--ivory); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; padding: 6px var(--gutter); letter-spacing: .04em; }

/* ヘッダー（HP-5改）：ロゴ／電話＋営業時間／ナビ（TOP→THERAPIST→SYSTEM→SCHEDULE→RECRUIT→ACCESS→WEB予約）。スマホはロゴ＋MENU */
header.site { position: relative; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none; }
.logo-en { font: 500 26px/1 var(--display); letter-spacing: .08em; color: var(--ink); }
.logo-ja { margin-top: 6px; font-size: 10px; letter-spacing: .32em; color: var(--accent); }
.head-contact { display: none; }
.head-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--accent); font: 500 26px/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: .04em; }
.head-tel svg { width: 20px; height: 20px; }
.head-hours { margin: 4px 0 0; font-size: 11px; color: var(--muted); letter-spacing: .06em; text-align: right; }
.head-hours span { margin-left: 8px; }
/* スマホの MENU（details 要素） */
.menu summary { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 6px 4px; color: var(--accent); }
.menu summary::-webkit-details-marker { display: none; }
.menu-bars { display: grid; gap: 5px; width: 26px; }
.menu-bars i { display: block; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; }
.menu[open] .menu-bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu[open] .menu-bars i:nth-child(2) { opacity: 0; }
.menu[open] .menu-bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-label { font: 500 11px/1 var(--display); letter-spacing: .16em; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gutter) 20px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.menu-panel ul { list-style: none; margin: 0 0 14px; padding: 0; }
.menu-panel li a { display: flex; align-items: baseline; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); text-decoration: none; font: 500 17px/1.2 var(--display); letter-spacing: .14em; color: var(--ink); }
.menu-panel li a small { font: 400 11px/1 var(--sans); letter-spacing: .1em; color: var(--muted); }
.menu-panel li a[aria-current="page"] { color: var(--accent); }
.menu-panel .btn + .btn { margin-top: 8px; }
.menu-hours { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.gnav { display: none; border-top: 1px solid var(--line); }
.gnav .wrap { display: flex; align-items: stretch; justify-content: center; }
.gnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 12px 18px 11px; text-decoration: none; font: 500 15px/1 var(--display); letter-spacing: .14em; color: var(--ink); }
.gnav a small { font: 400 10px/1 var(--sans); letter-spacing: .12em; color: var(--muted); }
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--accent); }
.gnav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 2px; background: var(--ornament); transform: translateX(-50%); }
.gnav a.gnav-cta { margin: 6px 0 6px 12px; padding: 0 22px; border-radius: 8px; color: var(--on-accent); background: var(--btn); font: 600 14px/1 var(--sans); letter-spacing: .1em; }
.gnav a.gnav-cta small { color: var(--on-accent); opacity: .85; }
.gnav a.gnav-cta:hover { background: var(--btn-hover); }
.gnav a.gnav-cta::after { display: none; }

/* ボタン・リンク */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 28px; border-radius: 999px; text-decoration: none; font: 600 15px/1.4 var(--sans); letter-spacing: .1em; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.btn-primary { color: var(--on-accent); background: var(--btn); box-shadow: var(--btn-shadow); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-line { color: var(--accent); background: var(--surface); border-color: var(--ornament); }
.btn-line:hover { background: var(--champagne-soft); }
.btn-block { display: flex; width: 100%; }
.btns { display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: 0 auto; }
.link-more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line-accent); padding-bottom: 1px; letter-spacing: .06em; }
.link-more:hover { border-bottom-color: var(--accent); }

/* 飾り線（線・ひし形・線） */
.orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px auto; }
.orn::before, .orn::after { content: ""; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--ornament)); }
.orn::after { transform: scaleX(-1); }
.orn i { width: 6px; height: 6px; background: var(--ornament); transform: rotate(45deg); }

/* メインビジュアル（HP-5改）：大きな画像枠（仮画像）＋店名・キャッチ → サブナビ → 予約ボタン */
.mv { padding: 0 0 8px; }
.mv-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 5; max-height: 78vh; min-height: 420px; margin: 0 auto; background: var(--il-wall); }
.mv-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-frame .ph-label { z-index: 2; }
.mv-copy { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 560px); padding: 30px 18px 26px; text-align: center; background: var(--panel); border: 1px solid var(--line-accent); outline: 1px solid var(--line-accent); outline-offset: -7px; }
.mv-copy .hero-lead { margin: 0; }
.mv-copy .orn { margin: 16px auto; }
.subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px auto 0; }
.subnav a { font-size: 12px; line-height: 1.6; text-decoration: none; padding: 5px 12px; border: 1px solid var(--line-accent); border-radius: 999px; color: var(--accent); background: var(--surface); }
.subnav a:hover { background: var(--champagne-soft); }
.mv-btns { margin-top: 16px; }
.hero-kicker { margin: 0; font: italic 400 15px/1.4 var(--display); color: var(--accent); letter-spacing: .16em; }
.hero-title { margin: 14px 0 0; font-weight: 500; line-height: 1; }
.hero-title .t1 { display: block; font: italic 400 24px/1.2 var(--display); color: var(--accent); letter-spacing: .1em; }
.hero-title .t2 { display: block; font: 500 clamp(52px, 15vw, 92px)/1.05 var(--display); letter-spacing: .04em; color: var(--ink); }
.hero-ja { margin: 10px 0 0; font-size: 11px; letter-spacing: .36em; color: var(--muted); }
.hero-lead { margin: 0 0 28px; font: 400 16px/2.1 var(--mincho); }

/* セクション共通 */
.sec { padding: 64px 0; }
.sec-ivory { background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-ivory + .sec, .sec + .sec-ivory { border-top: 0; }
.sec-head { text-align: center; margin: 0 0 32px; }
.sec-head .en { margin: 0; font: italic 400 36px/1.1 var(--display); color: var(--accent); letter-spacing: .04em; }
.sec-head h2 { margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .28em; }
.sec-head h2::after { content: ""; display: block; width: 28px; height: 1px; background: var(--ornament); margin: 14px auto 0; }
.sec-lead { text-align: center; color: var(--muted); font-size: 14px; margin: -12px auto 28px; max-width: 34em; }

/* 下層ページの見出し */
.page-head { text-align: center; padding: 44px var(--gutter) 36px; background: linear-gradient(180deg, var(--tint-1), var(--bg)); border-bottom: 1px solid var(--line); }
.page-head .en { margin: 0; font: italic 400 42px/1.1 var(--display); color: var(--accent); letter-spacing: .04em; }
.page-head h1 { margin: 10px 0 0; font-size: 14px; font-weight: 600; letter-spacing: .28em; }
.crumb { font-size: 12px; color: var(--muted); padding-top: 12px; }
.crumb a { color: var(--muted); }
.page-head + .wrap + .sec, .crumb-wrap + .sec { padding-top: 40px; }

.ph-label { position: absolute; z-index: 1; right: 10px; bottom: 10px; font-size: 10px; line-height: 1.6; color: var(--muted); background: var(--panel); padding: 0 6px; letter-spacing: .06em; }

/* 料金 */
.yen { font: 500 24px/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: .03em; white-space: nowrap; }
.pop { display: inline-block; font-style: normal; font-size: 11px; line-height: 1.7; color: var(--on-accent); background: var(--btn); border-radius: 999px; padding: 0 9px; margin-left: 8px; letter-spacing: .08em; vertical-align: 2px; }
.course { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: grid; gap: 12px; }
.course li { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); padding: 16px 16px; }
.course li.is-pop { border-color: var(--ornament); box-shadow: var(--shadow); }
.course-min { font: 500 32px/1 var(--display); font-variant-numeric: lining-nums; text-align: center; color: var(--accent); }
.course-min small { display: block; font: italic 400 13px/1.4 var(--display); color: var(--muted); letter-spacing: .1em; }
.course-txt b { display: block; font-size: 15px; letter-spacing: .08em; }
.course-txt span { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; }
.course-sm li { grid-template-columns: 1fr auto; }
.notes { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.notes li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--muted); }
.notes li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 5px; height: 5px; background: var(--ornament); transform: rotate(45deg); }

/* ご予約の流れ */
.flow { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; counter-reset: f; }
.flow li { position: relative; padding: 0 0 26px 54px; counter-increment: f; }
.flow li::before { content: counter(f); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ornament); color: var(--accent); background: var(--surface); font: 500 19px/34px var(--display); font-variant-numeric: lining-nums; text-align: center; }
.flow li::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: 6px; width: 1px; background: var(--line-accent); }
.flow li:last-child { padding-bottom: 0; }
.flow li:last-child::after { display: none; }
.flow b { display: block; font-size: 15px; letter-spacing: .08em; padding-top: 4px; }
.flow p { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.8; }

/* 情報の表（アクセス・プロフィール） */
.info { margin: 0 auto; max-width: 640px; background: var(--surface); border: 1px solid var(--line); padding: 4px 20px; }
.info div { display: grid; grid-template-columns: 6em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info div:last-child { border-bottom: 0; }
.info dt { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .1em; }
.info dd { margin: 0; font-size: 14px; }
.info dd small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 2px; }

.tags { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 12px; line-height: 1.8; border: 1px solid var(--line-accent); color: var(--accent); border-radius: 999px; padding: 1px 12px; }

/* アクセスの地図（イメージ） */
.map { max-width: 640px; margin: 0 auto 24px; background: var(--ivory); border: 1px solid var(--line); }
.map figcaption { font-size: 12px; color: var(--muted); text-align: center; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.safe { max-width: 640px; margin: 24px auto 0; background: var(--champagne-soft); border: 1px solid var(--line-accent); padding: 16px 18px; font-size: 13px; line-height: 1.8; }
.safe b { color: var(--accent); letter-spacing: .06em; }
.safe p { margin: 4px 0 0; }

/* 予約フォームの枠（iframe・読み込み中／準備中） */
.form-frame { position: relative; max-width: 482px; margin: 0 auto; border: 1px solid var(--line-accent); background: var(--form-bg); }
.form-box iframe { display: block; border: 0; width: 100%; height: 1560px; background: var(--form-bg); opacity: 0; transition: opacity .3s; } /* 高さは DEMO-HP-1 と同じ（390px 幅でも収まる・実測） */
.form-frame[data-state="ready"] .form-box iframe { opacity: 1; }
.form-loading { position: absolute; z-index: 1; top: 0; left: 0; right: 0; padding: 56px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.form-frame:not([data-state="loading"]) .form-loading { display: none; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-accent); border-top-color: var(--accent); margin: 0 auto 14px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-slow { display: none; margin-top: 18px; }
.form-slow p { margin: 0 0 12px; font-size: 13px; }
.form-frame[data-slow] .form-slow { display: block; }
/* HP-RESERVE-1（案A）：フォームの場所が無い・つながらない時の箱＝選んだ内容を入れた SMS・電話・LINE（「準備中」の箱のかわり） */
.form-off { display: none; padding: 38px 20px 32px; text-align: center; background: var(--surface); }
.form-frame[data-state="off"] .form-off { display: block; }
.form-frame[data-state="off"] .form-box { display: none; }
.form-frame[data-state="off"] + .form-note { display: none; } /* 「フォームには日付が入りません」の注意は、フォームが無い時は出さない */
.form-off .en { margin: 0; font: italic 400 26px/1.2 var(--display); color: var(--accent); letter-spacing: .04em; }
.form-off h2 { margin: 8px 0 12px; font-size: 18px; line-height: 1.6; letter-spacing: .1em; }
.form-off-lead { margin: 0 auto 20px; max-width: 30em; font-size: 13px; line-height: 1.9; color: var(--muted); }
.form-off-sms { max-width: 360px; margin: 0 auto; text-align: left; }
.form-off-to { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.form-off-h { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.sms-body { margin: 0; padding: 12px 14px; border: 1px dashed var(--line-accent); background: var(--ivory); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.form-off-copy { margin-top: 10px; min-height: 44px; font-size: 13px; }
.form-off-copied { margin: 6px 0 0; min-height: 1em; font-size: 12px; color: var(--ok); text-align: center; }
.form-off-more { margin-top: 22px; }
.form-off-retry { margin: 18px 0 0; }
.form-off-retry .link-more { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; }
.form-off-note { margin: 18px auto 0; max-width: 30em; font-size: 12px; color: var(--muted); }
.form-off .sub-links { margin: 16px 0 0; font-size: 13px; }
.form-off .sub-links a { color: var(--accent); margin: 0 8px; }
.form-noscript { margin: 0; padding: 32px 20px; text-align: center; font-size: 14px; background: var(--surface); }
.form-note { max-width: 480px; margin: 16px auto 0; font-size: 12px; color: var(--muted); line-height: 1.8; }

/* フッター（HP-5改）：ロゴ・電話・営業時間・最終受付・フッターナビ・コピーライト */
footer.site { background: var(--ivory); border-top: 1px solid var(--line); padding: 40px 0 32px; text-align: center; }
.f-logo { align-items: center; margin-bottom: 14px; }
.f-tel { margin: 0; }
.f-tel a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--accent); font: 500 24px/1.2 var(--display); font-variant-numeric: lining-nums; letter-spacing: .06em; }
.f-tel svg { width: 18px; height: 18px; }
.f-hours { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.fnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px 0; font: 500 13px/1.6 var(--display); letter-spacing: .12em; }
.fnav a { color: var(--muted); text-decoration: none; }
.fnav a:hover { color: var(--ink); }
.fine { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.8; }
.copy { margin: 14px 0 0; font: 400 12px/1 var(--display); letter-spacing: .1em; color: var(--muted); }

/* スマホの下に出る予約ボタン（電話・LINE・24時間WEB予約） */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); }
.dock a { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.dock a svg { width: 18px; height: 18px; flex: none; }
.dock a.dock-tel { border: 1px solid var(--ornament); color: var(--accent); background: var(--surface); }
.dock a.dock-line { color: var(--on-accent); background: var(--line-btn); }
.dock a.dock-cta { color: var(--on-accent); background: var(--btn); }
body.p-reserve { padding-bottom: 0; }
body.p-reserve .dock { display: none; }

/* ===== HP-3：手本サイト相当の機能（出勤表・ご案内状況・お知らせ・予約手段・割引・求人・写メ日記） ===== */

/* ご案内状況の札 */
.guide { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-accent); }
.guide-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-glow); }
.guide[data-mode="open"] .guide-dot { animation: pulse 2.4s ease-in-out infinite; }
.guide[data-mode="full"] .guide-dot { background: var(--ng); box-shadow: 0 0 0 4px var(--ng-glow); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px var(--ok-glow-2); } }
.guide-body { flex: 1; min-width: 0; }
.guide-body b { display: block; font-size: 15px; letter-spacing: .08em; line-height: 1.5; color: var(--ok); }
.guide[data-mode="full"] .guide-body b { color: var(--ng); }
.guide-body small { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; }
.guide-time { flex: none; align-self: flex-start; font-size: 11px; color: var(--muted); }
.safe + .center, .methods + .safe { margin-top: 24px; }

/* 予約手段（24時間WEB予約・電話・LINE） */
.methods { display: grid; gap: 10px; max-width: 640px; margin: 14px auto 0; }
.mbtn { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 18px; border-radius: 12px; text-decoration: none; border: 1px solid transparent; transition: background .2s, box-shadow .2s; }
.mbtn svg { flex: none; width: 26px; height: 26px; }
.mbtn b { display: block; font-size: 15px; letter-spacing: .08em; line-height: 1.4; }
.mbtn small { display: block; font-size: 12px; line-height: 1.5; }
.mbtn-web { color: var(--on-accent); background: var(--btn); box-shadow: var(--btn-shadow); }
.mbtn-web:hover { background: var(--btn-hover); }
.mbtn-tel { color: var(--ink); background: var(--surface); border-color: var(--ornament); }
.mbtn-tel:hover { background: var(--champagne-soft); }
.mbtn-tel svg, .mbtn-tel small { color: var(--accent); }
.mbtn-line { color: var(--on-accent); background: var(--line-btn); }
.mbtn-line:hover { background: var(--line-btn-hover); }

/* 札・マーク */
.badge { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.7; padding: 0 8px; border-radius: 4px; letter-spacing: .06em; white-space: nowrap; }
.badge-open { color: var(--ok); background: var(--ok-soft); }
.badge-few { color: var(--few); background: var(--few-soft); }
.badge-full { color: var(--on-accent); background: var(--ng); }
.new { display: inline-block; font: 700 10px/1.7 var(--sans); font-style: normal; letter-spacing: .12em; color: var(--on-accent); background: var(--new); border-radius: 3px; padding: 0 6px; margin-left: 8px; vertical-align: 2px; }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 14px; margin: 0; padding: 24px 0; }

/* 新人割引 */
.campaign { max-width: 640px; margin: 0 auto; padding: 26px 22px 22px; text-align: center; background: linear-gradient(180deg, var(--tint-1), var(--tint-2)); border: 1px solid var(--ornament); outline: 1px solid var(--line-accent); outline-offset: -7px; }
.campaign .en { margin: 0; font: italic 400 22px/1.2 var(--display); color: var(--accent); letter-spacing: .06em; }
.campaign h3 { margin: 4px 0 10px; font-size: 17px; letter-spacing: .16em; }
.campaign-main { margin: 0; font: 400 15px/1.9 var(--mincho); }
.campaign-main b { display: block; font: 700 20px/1.6 var(--sans); color: var(--accent); letter-spacing: .04em; }
.campaign-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.8; }

/* お知らせ */
.news-date time { font: 500 15px/1.6 var(--display); font-variant-numeric: lining-nums; color: var(--accent); letter-spacing: .06em; }
.news-title { font-size: 14px; line-height: 1.7; }
.news-full { max-width: 720px; margin: 0 auto; display: grid; gap: 20px; }

.nodata { max-width: 640px; margin: 0 auto; padding: 28px 20px; text-align: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* 写メ日記（準備中の枠だけ） */

/* 求人 */
.qa { max-width: 640px; margin: 0 auto; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); padding: 14px 4px; }
.qa summary { cursor: pointer; font-weight: 600; font-size: 15px; line-height: 1.6; list-style: none; position: relative; padding: 0 24px 0 30px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "Q"; position: absolute; left: 2px; top: -3px; font: italic 500 21px/1.3 var(--display); color: var(--accent); }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 0; color: var(--accent); }
.qa details[open] summary::after { content: "−"; }
.qa p { margin: 8px 0 0 30px; color: var(--muted); font-size: 14px; }

.toast { position: fixed; left: 50%; bottom: 92px; z-index: 40; max-width: calc(100% - 32px); transform: translate(-50%, 12px); background: var(--toast-bg); color: var(--on-accent); font-size: 13px; line-height: 1.6; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ===== HP-4：写真が主役のセラピストカード（トップの本日の出勤とセラピスト一覧で共通）・写真ありのお知らせ ===== */
.tcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tcard { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 16px; }
.tcard-photo { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--pearl); }
.tph, .tph-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tph-img { object-fit: cover; }
/* 仮画像：子ごとの色味（tone）＋シルエット。写真が入れば写真に置き換わる */
.sil > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sil .s { fill: #fff; opacity: .74; }
.sil .h { fill: var(--hair); opacity: .28; }
.sil::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .7), transparent 55%); }
.sil::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .45), inset 0 0 0 7px var(--photo-frame); background: linear-gradient(180deg, transparent 72%, var(--photo-shade)); }
.sil .ph-label { z-index: 2; }
.nph.sil::before { opacity: .45; } /* 横長の記事写真は光を弱めて、色味を見せる */
.tone-rose { background: linear-gradient(165deg, #FBF1EC 0%, #EDD3C8 50%, #D2A595 100%); --hair: #6E3B32; }
.tone-sage { background: linear-gradient(165deg, #F6F4EA 0%, #E2DDC4 50%, #B5AE84 100%); --hair: #4F4A2A; }
.tone-lavender { background: linear-gradient(165deg, #F7F3F9 0%, #E4DAEC 50%, #B6A4C8 100%); --hair: #4A3962; }
.tone-champagne { background: linear-gradient(165deg, #FBF6EC 0%, #EBDDBF 50%, #CDB07C 100%); --hair: #5A4420; }
.tone-sky { background: linear-gradient(165deg, #F3F6F9 0%, #D9E2EB 50%, #A6B6C8 100%); --hair: #2F3E52; }
.tone-peach { background: linear-gradient(165deg, #FCF4EF 0%, #F2D7C7 50%, #DCA78B 100%); --hair: #6A3A22; }
.tone-mint { background: linear-gradient(165deg, #F2F7F3 0%, #D7E7DB 50%, #A4C2AC 100%); --hair: #2E4A37; }
.tone-mocha { background: linear-gradient(165deg, #F7F1EB 0%, #E2D1C0 50%, #B6977C 100%); --hair: #4A3426; }
.tone-blush { background: linear-gradient(165deg, #FCF1F4 0%, #F0D4DD 50%, #CD9DAE 100%); --hair: #5C2F40; }
.tone-pearl { background: linear-gradient(165deg, #F8F7F4 0%, #E4E1D9 50%, #BCB5A6 100%); --hair: #3E3A33; }
/* 写真の上の札 */
.tcard-badges { position: absolute; z-index: 3; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tcard-status { position: absolute; z-index: 3; top: 10px; right: 10px; }
.ov { display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.9; letter-spacing: .1em; padding: 0 8px; border-radius: 3px; color: var(--on-accent); white-space: nowrap; box-shadow: 0 2px 8px var(--photo-shade); }
.ov-on { background: var(--btn); }
.ov-new { background: var(--new); }
.ov-few { background: var(--few); }
.ov-full { background: var(--ng); }
/* 写真の下 */
.tcard-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 12px 14px; }
.tcard-name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; }
.tcard-name span { font: italic 400 15px/1 var(--display); color: var(--accent); margin-left: 6px; letter-spacing: .04em; }
.tcard-spec { margin: 0; font: 500 14px/1.3 var(--display); font-variant-numeric: lining-nums; letter-spacing: .06em; color: var(--muted); }
.tcard-catch { margin: 0; font: 400 14px/1.7 var(--mincho); }
.tcard-comment { margin: 0; font-size: 12px; line-height: 1.75; }
.tcard .tags { margin: 0; gap: 4px; }
.tcard .tags li { font-size: 11px; padding: 0 9px; }
.tcard-staff { margin: 0; padding: 8px 10px; font-size: 12px; line-height: 1.75; color: var(--muted); background: var(--ivory); }
.tcard-staff b { display: block; font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.tsns { display: flex; gap: 6px; margin: 0; }
.tsns a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-accent); color: var(--accent); background: var(--surface); }
.tsns a:hover { background: var(--champagne-soft); }
.tsns svg { width: 16px; height: 16px; }
.tcard-next { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; margin: 0; padding: 7px 10px; border-radius: 6px; font-size: 12px; line-height: 1.6; }
.tcard-next > span { font-weight: 700; white-space: nowrap; } /* 「最短 19:30」と「にご案内できます」の間でだけ折り返す */
.tcard-next small { flex-basis: 100%; }
.tcard-next b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tcard-next small { font-size: 11px; color: var(--muted); }
.tcard-next.is-open { color: var(--ok); background: var(--ok-soft); }
.tcard-next.is-full { color: var(--ng); background: var(--ng-soft); }
.tcard-next.is-off { color: var(--muted); background: var(--ivory); }
.tcard-btn { margin-top: auto; min-height: 44px; padding: 0 10px; font-size: 13px; letter-spacing: .06em; box-shadow: none; }

/* お知らせ（写真あり） */
.ncards { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: grid; gap: 12px; }
.ncard a { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; height: 100%; padding: 10px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.ncard a:hover .news-title { color: var(--accent); }
.nph { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pearl); }
.nph > img, .nph > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ncard .ph-label { right: 4px; bottom: 4px; font-size: 9px; padding: 0 4px; }
.nph .k { font-family: var(--display); font-style: italic; font-size: 17px; fill: var(--accent); letter-spacing: .5px; }
.nph .nm { font-family: var(--display); font-size: 38px; font-weight: 500; fill: var(--ink); letter-spacing: 1px; }
.nph .ln { stroke: var(--ornament); stroke-width: 1; }
.ntext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.news-item { background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 16px; }
.news-item:target { outline: 2px solid var(--ornament); outline-offset: 3px; }
.news-item .nph { aspect-ratio: 16 / 9; }
.news-text { padding: 16px 18px 20px; }
.news-item .news-date { margin: 0; }
.news-item h2 { margin: 4px 0 8px; font-size: 16px; letter-spacing: .06em; line-height: 1.7; }
.news-item .news-body { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 339px) { .tcards { grid-template-columns: 1fr; } }
.tcard-name a { color: inherit; text-decoration: none; }
.tcard-more { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: .04em; }
.tcard-more:hover { text-decoration: underline; }
.news-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.7; color: var(--muted); }
.btn-off { color: var(--muted); background: var(--ivory); border-color: var(--line); cursor: default; }

/* 仮画像の撮り方の違い（個別ページの2枚目・3枚目）：光の向き・玉ボケ */
.sil.v1::before { background: radial-gradient(110% 70% at 88% 0%, rgba(255, 255, 255, .75), transparent 58%); }
.sil.v2::before { background: radial-gradient(circle at 18% 26%, rgba(255, 255, 255, .6) 0 7%, transparent 8%), radial-gradient(circle at 30% 58%, rgba(255, 255, 255, .45) 0 5%, transparent 6%), radial-gradient(circle at 10% 74%, rgba(255, 255, 255, .4) 0 6%, transparent 7%), radial-gradient(120% 70% at 0% 100%, rgba(255, 255, 255, .5), transparent 60%); }

/* ===== HP-5改：トップの GUIDE・SNS・SYSTEM・ACCESS（ルーム）・LINK ===== */
.sec-tight { padding: 48px 0; }
.gcard { max-width: 720px; margin: 0 auto; padding: 34px 22px 30px; text-align: center; background: var(--surface); border: 1px solid var(--ornament); outline: 1px solid var(--line-accent); outline-offset: -8px; box-shadow: var(--shadow); }
.gcard-ymd { margin: 0; font: 500 14px/1 var(--display); font-variant-numeric: lining-nums; letter-spacing: .16em; color: var(--muted); }
.gcard-title { margin: 14px 0 0; font: 500 clamp(20px, 5.6vw, 26px)/1.55 var(--mincho); letter-spacing: .08em; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; } /* 「満員御礼 ありがとうございます」を空白で折る */
.gcard .orn { margin: 16px auto; }
.gcard-day { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.gcard-day b { color: var(--accent); }
.gcard-body { margin: 0 auto; max-width: 34em; font-size: 14px; line-height: 2; color: var(--ink); text-align: left; }
.gcard .guide { margin: 18px auto 0; padding: 8px 12px; border: 0; background: var(--ivory); text-align: left; }
.gcard .guide-body b { font-size: 13px; }
.gcard-full { max-width: 420px; margin: 20px auto 0; padding-top: 16px; border-top: 1px dashed var(--line-accent); }
.gcard-full-h { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--ng); }
.gfull { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; padding: 0; }
.gfull li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--ivory); border: 1px solid var(--line); text-align: left; }
.gfull a { color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: .1em; }
.gfull a:hover { color: var(--accent); }
.man { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: var(--on-accent); background: var(--ng); font-size: 12px; font-weight: 700; }
.gcard > .btn { margin-top: 22px; min-width: 240px; }
.osns { display: grid; gap: 10px; max-width: 640px; margin: 0 auto; }
.osns a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line-accent); text-decoration: none; color: var(--ink); }
.osns a:hover { background: var(--champagne-soft); }
.osns svg { flex: none; width: 26px; height: 26px; color: var(--accent); }
.osns span { font: 500 18px/1.2 var(--display); letter-spacing: .08em; }
.osns small { display: block; margin-top: 2px; font: 400 12px/1.5 var(--sans); letter-spacing: .04em; color: var(--muted); }
.fine-note { margin: 12px 0 0; text-align: center; font-size: 11px; color: var(--muted); }
.sub-h { max-width: 640px; margin: 28px auto 12px; font-size: 14px; letter-spacing: .2em; color: var(--accent); }
.sub-h::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--ornament); transform: rotate(45deg); vertical-align: 2px; }
.pay { max-width: 640px; margin: 24px auto 0; padding: 18px 18px 16px; text-align: center; background: linear-gradient(180deg, var(--tint-1), var(--tint-2)); border: 1px solid var(--ornament); }
.pay-h { margin: 0 0 10px; font-weight: 700; font-size: 14px; letter-spacing: .14em; }
.pay-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.pay-list li { font-size: 12px; padding: 4px 12px; background: var(--surface); border: 1px solid var(--line-accent); border-radius: 4px; }
.pay-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); }
.rooms { display: grid; gap: 12px; max-width: 920px; margin: 0 auto; }
.room { background: var(--surface); border: 1px solid var(--line); padding: 18px 18px 16px; }
.room-en { margin: 0; font: italic 400 20px/1 var(--display); color: var(--accent); }
.room h3 { margin: 4px 0 8px; font-size: 15px; letter-spacing: .14em; }
.room-near, .room-mark { margin: 0; font-size: 13px; line-height: 1.8; }
.room-mark { color: var(--muted); }
.room-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; }
.room-acts .link-more { margin: 0; }
.room-acts .btn { min-height: 40px; padding: 0 20px; font-size: 13px; }
.banners { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 880px; margin: 0 auto; padding: 0; }
.banners a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 5 / 1; min-height: 44px; text-decoration: none; background: repeating-linear-gradient(135deg, var(--tint-1) 0 10px, var(--champagne-soft) 10px 20px); border: 1px dashed var(--line-accent); color: var(--accent); }
.banners span { font: italic 500 15px/1 var(--display); letter-spacing: .08em; }
.banners small { font-size: 10px; color: var(--muted); }

/* ===== HP-7：セラピスト個別ページ（手本と同じ構成の大きな1枚カード。色・書体はサイトのまま） ===== */
.pc-sec { padding: 24px 0 56px; }
.pcard { max-width: 960px; margin: 0 auto; padding: 16px; background: var(--surface); border: 1px solid var(--line-accent); border-radius: 16px; box-shadow: var(--shadow); }
.pc-top { display: grid; gap: 18px; }
.pc-photos { display: grid; gap: 8px; align-content: start; }
.pc-main { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; border: 1px solid var(--line-accent); background: var(--pearl); }
.pc-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pc-thumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--pearl); cursor: pointer; }
.pc-thumb[aria-pressed="true"] { border-color: var(--ornament); box-shadow: 0 0 0 1px var(--ornament); } /* 選んでいるサムネは金枠 */
.pc-thumb .ph-label { display: none; }
.pc-info { display: grid; gap: 12px; align-content: start; min-width: 0; }
.pc-name { margin: 2px 0 0; font: 700 26px/1.3 var(--sans); letter-spacing: .12em; color: var(--accent); }
.pc-age { margin-left: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.pc-box { padding: 12px 16px; border: 1px solid var(--line-accent); border-radius: 10px; background: var(--surface); }
.pc-label { margin: 0 0 6px; font: 700 11px/1.4 var(--sans); letter-spacing: .2em; color: var(--accent); }
.pc-size { margin: 0; font: 500 17px/1.4 var(--display); font-variant-numeric: lining-nums; letter-spacing: .06em; word-spacing: .4em; }
.pc-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: center; }
.pc-row .pc-label { margin: 0; letter-spacing: .06em; line-height: 1.5; }
.pc-row p { margin: 0; font-size: 14px; }
.pc-msg { margin: 0; font: 400 14px/2 var(--mincho); color: var(--ink); }
.pc-msg p { margin: 0 0 12px; }
.pc-msg p:last-child { margin-bottom: 0; }
.pc-sns ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.pc-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line-accent); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--surface); }
.pc-link:hover { background: var(--champagne-soft); }
.pc-link-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-accent); color: var(--accent); }
.pc-link-icon svg { width: 15px; height: 15px; }
.pc-link-name { flex: 1; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.pc-link-arrow { color: var(--accent); font-size: 13px; }
.pc-sched { margin-top: 22px; scroll-margin-top: 16px; }
.pc-sched-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pc-sched-head h2 { margin: 0; font-size: 13px; letter-spacing: .1em; }
.pc-sched-head .pc-label { display: inline; margin: 0 10px 0 0; }
.pc-sched-head a { font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.pc-next { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--ok); } /* 最短案内（手本には無い・うちの強み）は1行だけ */
.pc-next.is-full { color: var(--ng); }
.pc-days { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.pc-day { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 14px; border-radius: 10px; }
.pc-day.is-on { border: 1px solid var(--line-accent); border-left: 4px solid var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--surface) 75%); } /* 出勤日は枠で強調（色はトークン） */
.pc-day.is-off { background: var(--ivory); } /* お休みは枠なし */
.pc-date { display: inline-flex; align-items: baseline; gap: 4px; min-width: 62px; }
.pc-date b { font: 600 17px/1 var(--display); font-variant-numeric: lining-nums; }
.pc-date small { font-size: 11px; }
.pc-date.is-sat { color: var(--sat); }
.pc-date.is-sun { color: var(--sun); }
.pc-today { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; color: var(--on-accent); background: var(--btn); }
.pc-time { flex: 1; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.pc-off { flex: 1; font-size: 13px; color: var(--muted); }
.pc-book { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 34px; padding: 0 14px; border-radius: 999px; color: var(--on-accent); background: var(--btn); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.pc-book:hover { background: var(--btn-hover); }
.pc-cta { margin-top: 20px; min-height: 56px; border-radius: 10px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
  .form-box iframe { transition: none; }
  .guide[data-mode="open"] .guide-dot { animation: none; }
  .toast { transition: none; }
}

@media (min-width: 760px) {
  body { padding-bottom: 0; font-size: 16px; }
  .dock { display: none; }
  .btns { flex-direction: row; justify-content: center; max-width: none; }
  .sec { padding: 88px 0; }
  .sec-head .en { font-size: 44px; }
  .methods { grid-template-columns: repeat(3, 1fr); max-width: 920px; }
  .toast { bottom: 32px; }
  .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .tcard-body { gap: 8px; padding: 16px 18px 20px; }
  .tcard-comment { font-size: 13px; }
  .ncards { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1008px; gap: 20px; }
  .ncard a { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-items: stretch; padding: 0; } /* 高さをそろえた余りは文字の段へ（写真の段を伸ばすと 16:10 のまま横にはみ出す） */
  .ntext { padding: 14px 16px 18px; }
  .news-item { display: grid; grid-template-columns: 300px 1fr; }
  .news-item .nph { aspect-ratio: auto; min-height: 200px; }
  .menu { display: none; }
  .gnav { display: block; }
  .head { min-height: 84px; padding-top: 16px; padding-bottom: 16px; }
  .logo-en { font-size: 32px; }
  .head-contact { display: block; text-align: right; }
  .mv-frame { aspect-ratio: 16 / 8; min-height: 460px; max-width: 1280px; }
  .hero-lead { font-size: 18px; }
  .osns { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 920px; }
  .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .banners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-sec { padding: 48px 0 88px; }
  .pcard { padding: 28px; }
  .pc-top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; } /* 左：写真／右：名前〜SNS */
  .pc-name { font-size: 30px; }
  .pc-sched { margin-top: 32px; }
  .pc-day { padding: 10px 14px 10px 18px; }
  .pc-date { min-width: 80px; }
}
@media (min-width: 760px) and (max-width: 979px) {
  .gnav a { padding: 12px 10px 11px; font-size: 13px; letter-spacing: .08em; } /* ナビ7つが1行に入るように詰める */
  .gnav a.gnav-cta { padding: 0 14px; }
}

/* ===== HP-9：出勤表（手本と同じ構成：日付タブ → 見出し＋計◯名出勤 → カード）。色は :root のトークンだけ ===== */
.sboard { max-width: 1040px; margin: 0 auto; }
.stabs, .rtabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rtabs { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 18px 0 20px; }
.dtab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px 8px; border: 1px solid var(--line-accent); border-radius: 2px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.dtab small { font-size: 11px; line-height: 1.3; color: var(--muted); }
.dtab b { font: 500 16px/1.2 var(--display); font-variant-numeric: lining-nums; }
.dtab.is-sat small, .dtab.is-sat b { color: var(--sat); }
.dtab.is-sun small, .dtab.is-sun b { color: var(--sun); }
.dtab:hover { background: var(--champagne-soft); }
.dtab[aria-selected="true"] { background: var(--btn); border-color: transparent; }
.dtab[aria-selected="true"] small, .dtab[aria-selected="true"] b { color: var(--on-accent); }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-accent); }
.sc-day { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 15px/1.4 var(--mincho); letter-spacing: .08em; color: var(--ink); }
.sc-bullet { width: 7px; height: 7px; border-radius: 50%; background: var(--ornament); }
.sc-count { flex: none; margin: 0; padding: 3px 12px; border: 1px solid var(--line-accent); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--surface); }
.scards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scard { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); }
.sc-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.sc-photo-link { position: absolute; inset: 0; display: block; }
.sc-photo .ph-label { right: 4px; bottom: 4px; font-size: 9px; padding: 0 4px; }
.sc-sns { position: absolute; z-index: 3; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sc-sns a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); color: var(--accent); box-shadow: 0 2px 8px var(--photo-shade); }
.sc-sns svg { width: 14px; height: 14px; }
.sc-new { position: absolute; z-index: 3; left: 8px; bottom: 8px; padding: 0 8px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 1.9; letter-spacing: .1em; color: var(--on-accent); background: var(--new); }
.sc-body { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; padding: 12px 10px 12px; text-align: center; }
.sc-name { margin: 0; font: 600 16px/1.4 var(--sans); letter-spacing: .12em; }
.sc-name a { color: var(--ink); text-decoration: none; }
.sc-age { margin: 0; font: 500 12px/1.4 var(--display); letter-spacing: .1em; color: var(--muted); }
.sc-size { margin: 0; font: 500 12px/1.4 var(--display); font-variant-numeric: lining-nums; letter-spacing: .03em; color: var(--muted); }
.sc-time { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 0; color: var(--accent); }
.sc-time svg { width: 14px; height: 14px; }
.sc-time b { font-size: 14px; font-variant-numeric: tabular-nums; }
.sc-pill { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 0; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sc-pill.is-next { color: var(--ok); background: var(--ok-soft); }
.sc-pill.is-full { color: var(--muted); background: var(--ivory); }
.sc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.sc-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; font-size: 11px; line-height: 1.7; color: var(--muted); text-align: left; }
.sc-btn { margin-top: auto; min-height: 40px; padding: 0 8px; font-size: 13px; }
.sc-body .sc-btn { margin-top: 10px; }

/* ===== HP-9：WEB予約（手本と同じ流れ：①出勤情報 → ②コース・時間 → ③お客様情報 → ④確認） ===== */
.rsec { padding-top: 28px; }
.rwrap { max-width: 720px; }
.rsteps { list-style: none; display: flex; justify-content: center; align-items: flex-start; gap: 0; margin: 0 auto 28px; padding: 0; }
.rsteps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; }
.rsteps li + li::before { content: ""; position: absolute; z-index: 0; top: 14px; left: calc(-50% + 14px); width: calc(100% - 28px); height: 1px; background: var(--line-accent); } /* 前の丸と今の丸をつなぐ線 */
.rsteps span { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-accent); background: var(--surface); font: 600 13px/1 var(--display); color: var(--muted); }
.rsteps small { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.rsteps li.is-current span { background: var(--btn); border-color: transparent; color: var(--on-accent); }
.rsteps li.is-current small { color: var(--accent); font-weight: 700; }
.rsteps li.is-done span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-size: 0; }
.rsteps li.is-done span::after { content: "✓"; font-size: 13px; }
.rsteps li.is-inform span { border-style: dashed; border-color: var(--accent); color: var(--accent); } /* HP-12：③のあいだの④＝フォームの中で進む */
.rsteps li.is-inform small { color: var(--accent); }
.rsteps-note { max-width: 520px; margin: -14px auto 22px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--accent); }
.rpanel { margin: 0; }
.r-headrow { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.r-back { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line-accent); background: var(--surface); color: var(--accent); font-size: 20px; line-height: 1; cursor: pointer; }
.r-title { margin: 0; font: 500 22px/1.4 var(--mincho); letter-spacing: .1em; color: var(--accent); }
.r-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.rcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rcard { display: flex; flex-direction: column; min-width: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); text-align: left; font: inherit; color: inherit; }
.rcard.is-full { opacity: .55; }
.r-photo { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.r-photo .ph-label { display: none; }
.r-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 4px; }
.r-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--panel); opacity: .7; }
.r-dots i.on { opacity: 1; background: var(--surface); }
.r-new { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.9; color: var(--on-accent); background: var(--new); }
.r-fullmark { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 12px; border-radius: 2px; font-size: 12px; font-weight: 700; color: var(--on-accent); background: var(--ng); white-space: nowrap; }
.r-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 10px 10px 12px; }
.r-name { margin: 0; font: 600 15px/1.4 var(--sans); letter-spacing: .1em; }
.r-info { margin: 0; padding: 6px 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--ivory); font-size: 11px; }
.r-info div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 4px; } /* 狭い画面では時刻だけ次の行（右寄せ）へ */
.r-info dt { color: var(--muted); white-space: nowrap; }
.r-info dd { margin: 0 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0; }
.r-now { font-style: normal; padding: 0 6px; border-radius: 999px; font-size: 10px; color: var(--on-accent); background: var(--new); }
.r-next { color: var(--ok); }
.r-full { color: var(--ng); }
.r-meta { margin: 0; font-size: 11px; color: var(--muted); }
.r-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 11px; line-height: 1.7; color: var(--muted); }
.r-btn { margin-top: auto; min-height: 38px; padding: 0 8px; font-size: 13px; }
.r-btn.is-off { color: var(--muted); background: var(--ivory); border-color: var(--line); cursor: default; box-shadow: none; }
.r-free { cursor: pointer; }
.r-free-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-bottom: 1px dashed var(--line-accent); color: var(--muted); font-size: 12px; background: var(--ivory); }
.r-free-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1px dashed var(--line-accent); color: var(--accent); }
.r-free-icon svg { width: 24px; height: 24px; }
.r-who { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line-accent); border-radius: 4px; background: var(--surface); margin-bottom: 22px; }
.r-thumb { position: relative; flex: none; width: 56px; height: 64px; overflow: hidden; border-radius: 4px; background: var(--pearl); }
.r-thumb .ph-label { display: none; }
.r-who b { display: block; font-size: 15px; letter-spacing: .1em; }
.r-who small { font-size: 12px; color: var(--muted); }
.r-label { margin: 22px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.r-courses { display: grid; gap: 8px; }
.r-course { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.r-course b { display: block; font-size: 14px; letter-spacing: .06em; }
.r-course small { font-size: 11px; color: var(--muted); }
.r-course strong { font: 600 18px/1 var(--display); font-variant-numeric: lining-nums; }
.r-course[aria-pressed="true"], .r-time[aria-pressed="true"], .r-pay[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.r-timebox { padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.r-bar-ends { display: flex; justify-content: space-between; font: 500 11px/1 var(--display); color: var(--muted); }
.r-ticks { position: relative; height: 16px; margin-top: 4px; }
.r-ticks span { position: absolute; top: 0; transform: translateX(-50%); font: 500 10px/1 var(--display); color: var(--muted); }
.r-bar { display: flex; height: 30px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line-accent); }
.r-bar-off { flex: none; background: repeating-linear-gradient(135deg, var(--ivory) 0 5px, var(--line) 5px 7px); }
.r-bar-on { flex: 1; background: linear-gradient(90deg, var(--accent-soft), var(--champagne-soft)); }
.r-legend { display: flex; gap: 14px; margin: 6px 0 12px; font-size: 11px; color: var(--muted); }
.r-legend span::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }
.r-legend .is-on::before { background: var(--accent-soft); border: 1px solid var(--line-accent); }
.r-legend .is-off::before { background: repeating-linear-gradient(135deg, var(--ivory) 0 3px, var(--line) 3px 4px); border: 1px solid var(--line-accent); }
.r-help, .r-none { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.r-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.r-time { min-height: 42px; border: 1px solid var(--line-accent); border-radius: 4px; background: var(--surface); font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); cursor: pointer; }
.r-pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.r-pay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid var(--line-accent); border-radius: 4px; background: var(--surface); font: 600 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
.r-pay svg { width: 18px; height: 18px; color: var(--accent); }
.r-go { margin-top: 24px; min-height: 54px; font-size: 15px; }
.r-go:disabled { opacity: .45; cursor: default; }
.r-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line-accent); border-radius: 4px; background: var(--champagne-soft); font-size: 13px; }
.r-summary b { color: var(--accent); letter-spacing: .08em; }
.rpanel .form-frame { max-width: none; }
.rpanel .form-note { max-width: none; }
@media (min-width: 760px) {
  .stabs { gap: 10px; }
  .dtab { padding: 12px 4px 10px; }
  .dtab b { font-size: 19px; }
  .scards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .sc-body { padding: 14px 14px 16px; }
  .sc-name { font-size: 17px; }
  .rcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .r-times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== HP-10：写メ日記（手本＝「写メ日記一覧」の箱：見出しの帯＋画像のみ → 3列の写真〈左上の札〉→ 日時・名前(年齢) → 前へ／件数／次へ） ===== */
.dbox { max-width: 680px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-accent); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.dbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--accent); color: var(--on-accent); }
.dbox-bar h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.dbox-mode { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.dbox-mode[aria-pressed="false"] { opacity: .65; }
.dbox-mode svg { width: 14px; height: 14px; }
.dgrid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; }
.ditem { min-width: 0; }
.dphoto { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--pearl); }
.drib { position: absolute; z-index: 3; left: -28px; top: 12px; width: 100px; transform: rotate(-45deg); text-align: center; font-size: 9px; font-weight: 700; line-height: 1.8; letter-spacing: .04em; color: var(--on-accent); background: var(--accent); }
.drib.is-wait { background: var(--new); }
.dmeta { margin: 3px 2px 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.ddate { display: block; font-variant-numeric: tabular-nums; }
.dname { color: var(--accent); font-weight: 700; text-underline-offset: 2px; }
.dtitle { display: none; margin: 2px 2px 0; font-size: 12px; line-height: 1.5; color: var(--ink); overflow: hidden; }
.dbox.show-title .dtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ditem { padding-bottom: 6px; }
.dpager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border-top: 1px solid var(--line); }
.dpg { display: flex; align-items: center; justify-content: center; min-height: 42px; border: 0; background: var(--ivory); color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.dpg.is-next { background: var(--accent); color: var(--on-accent); }
.dpg:disabled { opacity: .45; cursor: default; }
.dpg-info { display: flex; align-items: center; padding: 0 14px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* diary.html：1件ずつ */
.dpage-filter { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; max-width: 680px; margin: 0 auto 12px; }
.dpage-filter b { font-size: 16px; color: var(--accent); }
.dpage-filter a, .dpost-back { font-size: 13px; color: var(--accent); }
.dpage-sub { max-width: 680px; margin: 36px auto 12px; font-size: 16px; color: var(--accent); }
.dpost { max-width: 880px; margin: 0 auto; }
.dpost-back { display: inline-block; margin-bottom: 12px; text-decoration: none; }
.dpost-main { display: grid; gap: 18px; background: var(--surface); border: 1px solid var(--line-accent); border-radius: 10px; padding: 14px; box-shadow: var(--shadow); }
.dpost-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--pearl); }
.dpost-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.dpost-title { margin: 0 0 12px; font: 600 20px/1.5 var(--mincho); color: var(--ink); }
.dpost-body { margin: 0 0 12px; line-height: 2; }
.dpost-actions { display: grid; gap: 8px; margin-top: 18px; }
.dpost-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; }
.dpost-nav a { color: var(--accent); }
@media (min-width: 760px) {
  .dgrid { gap: 6px; padding: 6px; }
  .dpost-main { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); padding: 22px; gap: 26px; }
}

/* 求人の WEB応募フォーム（デモ・どこにも送らない） */
.entry { max-width: 640px; margin: 22px auto 0; padding: 18px 16px; background: var(--surface); border: 1px solid var(--line-accent); border-radius: 10px; box-shadow: var(--shadow); }
.entry-title { margin: 0 0 4px; font: 600 18px/1.5 var(--mincho); color: var(--accent); }
.entry-demo { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; font: 700 11px/1.8 var(--sans); letter-spacing: .08em; color: var(--accent); border: 1px solid var(--line-accent); vertical-align: 3px; }
.entry-lead { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.entry-row { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.entry-row > label:not(.chk), .entry-row legend { display: block; margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.entry-row input[type="text"], .entry-row select, .entry-row textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-accent); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.entry-row input:focus, .entry-row select:focus, .entry-row textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chk { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 8px 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.req { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; font-style: normal; font-size: 10px; line-height: 1.8; font-weight: 700; color: var(--on-accent); background: var(--ng); vertical-align: 1px; }
.entry-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; background: var(--ng-soft); color: var(--ng); font-size: 13px; font-weight: 700; }
.entry-fine { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.entry-done { text-align: center; }
.entry-done b { display: block; margin-bottom: 6px; font-size: 18px; color: var(--ok); }
.entry-done p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

/* ===== HP-11：年齢確認の入口（assets/gate.js が出す・文面は仮）。出ている間は、うしろの中身を隠す ===== */
.gate-on, .gate-on body { overflow: hidden; }
.gate-on body > :not(.agegate) { visibility: hidden; }
.agegate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px var(--gutter); overflow: auto; background: var(--bg); }
.agegate-box { width: 100%; max-width: 520px; padding: 34px 22px 26px; text-align: center; background: var(--surface); border: 1px solid var(--line-accent); outline: 1px solid var(--ornament); outline-offset: -7px; box-shadow: var(--shadow); }
.agegate-logo { margin: 0; display: grid; gap: 6px; }
.agegate-logo .logo-en { font: 500 30px/1.1 var(--display); letter-spacing: .06em; color: var(--accent); }
.agegate-logo .logo-ja { font-size: 11px; letter-spacing: .3em; color: var(--muted); }
.agegate .orn { margin: 16px auto; }
.agegate-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.9; color: var(--ink); }
.agegate-q { margin: 0 0 18px; font: 600 18px/1.5 var(--mincho); color: var(--accent); }
.agegate-btns { display: grid; gap: 10px; }
.agegate-btns .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; }
.agegate-btns .btn span { font: 600 18px/1 var(--display); letter-spacing: .2em; }
.agegate-btns .btn small { font-size: 11px; letter-spacing: .08em; opacity: .85; }
.agegate-note { margin: 16px 0 0; font-size: 11px; color: var(--muted); }
@media (min-width: 560px) { .agegate-btns { grid-template-columns: 1fr 1fr; } }

/* ===== HP-11：404（ページが見つかりません） ===== */
.notfound { max-width: 560px; margin: 0 auto; text-align: center; }
.notfound p { margin: 0 0 8px; line-height: 1.9; }
.notfound .btns { margin-top: 22px; }
.notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px !important; font-size: 13px; }
.notfound-links a { color: var(--accent); }

/* ===== HP-8：絵の色（SVG の f-＝塗り・s-＝線。値は :root の --il-*） ===== */
.f-wall { fill: var(--il-wall); } .f-floor { fill: var(--il-floor); } .f-white { fill: var(--il-white); } .f-soft { fill: var(--il-soft); }
.f-glow { fill: var(--il-glow); } .f-line { fill: var(--il-line); } .f-wood { fill: var(--il-wood); } .f-rail { fill: var(--il-rail); }
.f-plant { fill: var(--il-plant); } .f-accent { fill: var(--il-accent); } .f-ink { fill: var(--il-ink); } .f-muted { fill: var(--il-muted); }
.s-white { stroke: var(--il-white); } .s-soft { stroke: var(--il-soft); } .s-line { stroke: var(--il-line); } .s-rail { stroke: var(--il-rail); }
.s-accent { stroke: var(--il-accent); } .s-wood { stroke: var(--il-wood); }

/* ===== HP-8：質感（高級ホテルスパ系）。構成はそのまま・色は :root のトークンだけ ===== */
.demo-note { background: var(--note-bg); color: var(--note-ink); border-bottom: 0; letter-spacing: .1em; }
header.site { background: var(--bg); border-bottom: 1px solid var(--line-accent); }
.gnav { border-top-color: var(--line); }
.gnav a { color: var(--accent); }
.gnav a[aria-current="page"]::after { background: var(--ornament); }
.gnav a.gnav-cta, .btn, .dock a, .pc-book, .mbtn { border-radius: 2px; } /* 角を立てた上品なボタン */
.btn-primary, .gnav a.gnav-cta, .dock a.dock-cta, .mbtn-web, .pc-book { box-shadow: var(--btn-shadow), inset 0 0 0 1px rgba(255, 253, 248, .16); }
.btn-line { border-color: var(--accent); color: var(--accent); }
/* 見出し：英字は小さく字間を広く（大文字）、日本語は明朝で大きく、下にシャンパンの線と点 */
.sec { padding: 84px 0; }
.sec-tight { padding: 64px 0; }
.sec-head { margin-bottom: 40px; }
.sec-head .en { font: 500 14px/1.2 var(--display); letter-spacing: .42em; text-transform: uppercase; color: var(--accent); padding-left: .42em; }
.sec-head h2 { margin-top: 12px; font: 500 clamp(22px, 5.6vw, 28px)/1.5 var(--mincho); letter-spacing: .16em; color: var(--ink); }
.sec-head h2::after { width: 72px; height: 7px; margin-top: 18px; background: radial-gradient(circle, var(--ornament) 0 2.5px, transparent 3px) center / 7px 7px no-repeat, linear-gradient(var(--ornament), var(--ornament)) center / 100% 1px no-repeat; }
.page-head { background: linear-gradient(180deg, var(--tint-1), var(--bg)); border-bottom: 1px solid var(--line-accent); padding: 56px var(--gutter) 44px; }
.page-head .en { font: 500 15px/1.2 var(--display); letter-spacing: .42em; text-transform: uppercase; padding-left: .42em; }
.page-head h1 { margin-top: 12px; font: 500 28px/1.5 var(--mincho); letter-spacing: .16em; }
.sec-ivory { background: var(--ivory); border-color: var(--line-accent); }
/* メインビジュアル：写真の上の箱は額縁ふう（シャンパンの二重線） */
.mv-copy { border-color: var(--line-accent); outline-color: var(--ornament); }
.hero-kicker { font-style: normal; text-transform: uppercase; letter-spacing: .36em; font-size: 13px; }
.hero-title .t1 { color: var(--accent); }
.hero-title .t2 { color: var(--accent); }
/* カード・箱：細い罫線と淡い影 */
.tcard, .ncard a, .scard, .rcard, .room, .course li, .osns a, .pc-link, .gcard, .pcard, .campaign, .pay, .news-item { border-color: var(--line); }
.tcard-photo, .sc-photo, .r-photo, .pc-main { background: var(--pearl); }
/* フッター：深い緑の帯 */
footer.site { background: var(--footer-bg); border-top: 0; color: var(--footer-ink); }
footer.site .logo-en, .f-tel a { color: var(--footer-ink); }
footer.site .logo-ja { color: var(--footer-muted); }
.f-hours, .fine, .copy { color: var(--footer-muted); }
.fnav { padding: 14px 0; border-top: 1px solid var(--footer-line); border-bottom: 1px solid var(--footer-line); }
.fnav a { color: var(--footer-muted); }
.fnav a:hover { color: var(--footer-ink); }
@media (min-width: 760px) {
  .sec { padding: 112px 0; }
  .sec-tight { padding: 80px 0; }
  .sec-head .en { font-size: 15px; }
}

/* ===== HP-8：動き（CSS＋素の JS だけ。外部ライブラリなし）
 * ・スクロールで出る：site.js が [data-reveal] を付け、見えたら .is-in。html に .motion-ready が付いた時だけ隠す
 *   → JS が動かない・失敗した時は何も隠れない（白画面・出ないままにならない）
 * ・動きを減らす設定（prefers-reduced-motion）の時は、下の no-preference の中が全部効かない＝動かない ===== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; } /* ページ内リンクはなめらかに */
  .motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rv-delay, 0s); }
  .motion-ready [data-reveal].is-in { opacity: 1; transform: none; }
  /* メインビジュアル：ゆっくり寄っていく＋文字の箱がふわっと出る */
  .mv-img { transform-origin: 62% 55%; animation: mv-zoom 24s ease-out both; }
  .mv-copy { animation: mv-rise 1.6s .3s ease-out both; }
  @keyframes mv-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
  @keyframes mv-rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
  /* 写真：ゆっくり寄る */
  .tcard-photo .tph > svg, .tcard-photo .tph-img, .sc-photo .tph > svg, .sc-photo .tph-img, .r-photo .tph > svg, .nph > svg, .nph > img, .pc-main .tph > svg, .pc-main .tph-img, .pc-thumb .tph > svg, .mv-frame .ph-label { transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
  .tcard:hover .tcard-photo .tph > svg, .tcard:hover .tcard-photo .tph-img, .scard:hover .sc-photo .tph > svg, .scard:hover .sc-photo .tph-img, .rcard:hover .r-photo .tph > svg,
  .ncard a:hover .nph > svg, .ncard a:hover .nph > img, .news-item:hover .nph > svg, .pc-main:hover .tph > svg, .pc-main:hover .tph-img, .pc-thumb:hover .tph > svg { transform: scale(1.06); }
  /* カード・箱：シャンパンの枠と影がすっと出る */
  .tcard, .ncard a, .scard, .rcard, .room, .course li, .osns a, .pc-link, .gcard, .news-item, .dtab, .subnav a, .banners a, .r-course, .r-time, .r-pay { transition: box-shadow .5s ease, border-color .5s ease, transform .5s ease, background-color .4s ease; }
  .tcard:hover, .ncard a:hover, .scard:hover, .rcard:not(.is-full):hover, .room:hover, .news-item:hover { box-shadow: var(--shadow-hover); border-color: var(--line-accent); transform: translateY(-3px); }
  .course li:hover, .osns a:hover, .pc-link:hover, .gcard:hover { box-shadow: var(--shadow); border-color: var(--line-accent); }
  /* 主ボタン：光がすっと横切る */
  .btn-primary, .gnav a.gnav-cta, .dock a.dock-cta, .mbtn-web, .pc-book { position: relative; overflow: hidden; isolation: isolate; }
  .btn-primary::before, .gnav a.gnav-cta::before, .dock a.dock-cta::before, .mbtn-web::before, .pc-book::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 253, 248, .28), transparent); transform: skewX(-18deg); transition: left .9s ease;
  }
  .btn-primary:hover::before, .gnav a.gnav-cta:hover::before, .dock a.dock-cta:hover::before, .mbtn-web:hover::before, .pc-book:hover::before { left: 135%; }
  .btn-line { transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
}
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }
/* ===== 追加自走パック 3本目：ご利用規約・プライバシーポリシー・キャンセルポリシー（文章のページ）と、フッターのリンク ===== */
.legal { max-width: 760px; }
.legal-warn { margin: 0 0 28px; padding: 14px 16px; border: 1px solid var(--ng); border-radius: 8px; background: var(--ng-soft); color: var(--ng); font-size: 13px; line-height: 1.8; font-weight: 700; }
.legal-warn small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--ink); }
.legal h2 { margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-accent); font: 600 17px/1.6 var(--mincho); color: var(--accent); letter-spacing: .04em; }
.legal p, .legal li { font-size: 14px; line-height: 1.95; }
.legal p { margin: 0 0 10px; }
.legal ol, .legal ul { margin: 0 0 12px; padding-left: 1.4em; }
.legal li { margin: 0 0 4px; }
.legal a:not(.link-more):not(.btn) { color: var(--accent); }
.legal table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; line-height: 1.7; }
.legal th, .legal td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal thead th { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.legal tbody th { width: 52%; background: var(--ivory); font-weight: 600; }
.legal .info { margin-top: 6px; }
.legal-note { padding: 10px 12px; border-radius: 6px; background: var(--tint-1); font-size: 13px !important; }
.legal-date { margin: 28px 0 0 !important; text-align: right; font-size: 13px !important; color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 30px 0 0 !important; }
.flegal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0 0 14px; font-size: 12px; line-height: 1.8; }
.flegal a { color: var(--footer-muted, var(--muted)); text-underline-offset: 3px; }
.flegal a:hover, .flegal a[aria-current="page"] { color: var(--footer-ink, var(--ink)); }
/* ===== 夜通しパック（2号店の実験）：仮写真の受け口（ルームの写真・メインビジュアルの写真） ===== */
.room-photo { position: relative; margin: -18px -18px 16px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pearl); }
.room-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-frame img.mv-img { object-fit: cover; }


/* ==== 裏妻版（04）で足した物：雛形の site.css は変えずに、ここから下だけ ==== */
/* 電話・LINE の2つのボタン（WEB予約の代わり。カード・出勤表・個別ページ・写メ日記） */
/* look の磨き（polish.css）は html:root 付きで強いので、こちらも html:root を付けてそろえる */
html:root .call2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
html:root .call2 .btn { min-height: 44px; padding: 0 6px; font-size: 12.5px; letter-spacing: .06em; box-shadow: none; white-space: nowrap; }
html:root .call2.tcard-btn, html:root .call2.sc-btn, html:root .call2.pc-cta { min-height: 0; padding: 0; border-radius: 0; background: none; letter-spacing: normal; }
html:root .call2.sc-btn .btn { min-height: 40px; font-size: 12px; padding: 0 4px; }
html:root .call2.pc-cta .btn { min-height: 56px; border-radius: var(--radius, 10px); font-size: 15px; }
html:root .dpost-actions .call2 { width: 100%; }
@media (max-width: 759px) { /* スマホ：カードは2列で細いので、電話と LINE は縦に2段 */
  html:root .call2.tcard-btn, html:root .call2.sc-btn { grid-template-columns: 1fr; }
  html:root .call2.tcard-btn .btn { min-height: 40px; }
}

.pc-photos { position: relative; }

/* トップのコンセプト・求人の文 */
.concept { max-width: 720px; margin: 0 auto; text-align: center; line-height: 2.1; }
.concept p { margin: 0 0 1em; }
.recruit-catch b { display: inline-block; margin-bottom: 8px; font-size: 1.15em; letter-spacing: .08em; }
.promise { counter-reset: none; }
@media (max-width: 759px) { .concept { text-align: left; line-height: 1.95; } }

/* ==== 裏妻版：つばさ支給のデザイン（2026-10-25）。画像は assets/design/（原本は デザイン支給/原本/）==== */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* メインビジュアル（画像 3）：背景の写真だけが動く。文字とボタンは静止 */
html:root .uzmv { padding: 0; }
.uzmv-stage { position: relative; overflow: hidden; width: 100%; height: clamp(540px, 74vh, 780px); background: #E9D9E2; }
.uzmv-slides, .uzmv-slide { position: absolute; inset: 0; }
.uzmv-slide { opacity: 0; } .uzmv-slide.is-on { opacity: 1; }
.uzmv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform-origin: 50% 55%;
  transform: scale(1.03); animation: uzmvMove 15s ease-in-out infinite alternate; will-change: transform; backface-visibility: hidden; }
@keyframes uzmvMove { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1%, 0, 0); } }
/* 薄いピンク〜白の光：不透明度 0〜4% をゆっくり（点滅・粒子なし） */
.uzmv-light { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 90% at 30% 35%, #FFFFFF 0%, #FBE3EC 55%, #FFFFFF 100%);
  animation: uzmvLight 15s ease-in-out infinite alternate; }
@keyframes uzmvLight { from { opacity: 0; } to { opacity: .04; } }
@media (prefers-reduced-motion: reduce) { .uzmv-img, .uzmv-light { animation: none; } .uzmv-light { opacity: 0; } }
/* 文字：カーテン側（左）の余白に。ロゴは白地の画像なので、同じ白の台の上に置く（ロゴの色は変えない） */
.uzmv-copy { position: absolute; z-index: 2; left: max(5vw, 32px); top: 50%; transform: translateY(-50%); width: min(420px, 40vw); padding: 34px 32px 30px;
  background: var(--uz-logo-bg); border-radius: 4px; box-shadow: 0 18px 50px rgba(59, 43, 68, .16); text-align: center; }
.uzmv-logo { margin: 0; line-height: 0; }
.uzmv-logo img { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; }
.uzmv-lead { margin: 18px 0 0; font: 500 15px/2 var(--mincho); letter-spacing: .14em; color: var(--ink); }
.uzmv-btns { display: grid; gap: 10px; margin-top: 22px; }
.uzmv-btns .btn { min-height: 48px; padding: 0 12px; font-size: 14px; letter-spacing: .08em; }
.uzmv-num { margin-left: .6em; }
@media (max-width: 759px) {
  /* スマホ：ソファとサテンが残る切り抜き。文字は上のカーテン・窓の側 */
  .uzmv-stage { height: 680px; }
  .uzmv-num { display: none; }
  .uzmv-img { object-position: 78% 50%; transform-origin: 70% 60%; }
  .uzmv-copy { left: 16px; right: 16px; top: 16px; transform: none; width: auto; padding: 18px 16px 16px; }
  .uzmv-logo img { max-width: 230px; }
  .uzmv-lead { margin-top: 10px; font-size: 13px; line-height: 1.85; letter-spacing: .1em; }
  .uzmv-btns { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .uzmv-btns .btn { min-height: 44px; font-size: 12.5px; padding: 0 6px; letter-spacing: .04em; }
}

/* 店ロゴ（画像 10）：白地の画像なので、ヘッダーとフッターはロゴと同じ白（#FEFDFC）にして、ロゴの色はそのまま */
html:root header.site { background: var(--uz-logo-bg); }
html:root footer.site { background: var(--uz-logo-bg); border-top: 1px solid var(--line); }
.uz-logo { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.uz-logo img { display: block; width: auto; height: 58px; }
html:root footer.site .uz-logo { justify-content: center; }
html:root footer.site .uz-logo img { height: 74px; }
@media (max-width: 759px) { .uz-logo img { height: 46px; } html:root footer.site .uz-logo img { height: 62px; } }

/* 背景（第4バッチ・司令塔の仕様変更＝桜5枚：デザイン支給/原本/15〜19＝つぼみ → 満開）。画面に貼りつけた地（メイン画像より下では、画面の同じ位置に固定）。
   5枚は同じ大きさ・同じ位置に重ね、スクロールに合わせて、隣り合う2枚の濃さだけを滑らかに入れ替える（site.js の uzSakura）。時間では動かさない。
   見せ方：スマホ＝絵の幅を画面の幅に合わせる（左右の枝を切らない）。左上の枝は上に・右下の枝は下に置いて、真ん中の白い所へ溶かす（もう一方の枝が透けない所で止める）／
   PC＝飾りのある2つの角を、画面の2つの角に。JS が動かない時は、満開（⑤）の1枚だけ。セクションの地は透明。枝の位置は5枚とも同じ（重ねて確かめた・ずれ 0px）。
   第11バッチ（司令塔の仕様変更）：動きを減らす設定でも、咲き替わりは同じ（スクロールで自分が動かした分しか変わらない＝自分から動く動きではない）。止めるのは、自分から動く物だけ（花びら・きらめき・メイン画像のズームと光・ロゴの「間」・現れ方） */
html:root body { background-color: #FBF9F9; }   /* 満開（⑤）の真ん中の色＝JS が無い時の1枚と同じ */
body::before, body::after, .uz-sk::before, .uz-sk::after { content: ""; pointer-events: none; background-repeat: no-repeat; width: 100%; height: 100%; background-size: 100% auto; }
body::before, body::after { position: fixed; z-index: -2; }
.uz-sk::before, .uz-sk::after { position: absolute; }
body::before, .uz-sk::before { left: 0; top: 0; background-position: left top;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 37%, transparent 49%); mask-image: linear-gradient(135deg, #000 0%, #000 37%, transparent 49%); }
body::after, .uz-sk::after { right: 0; bottom: 0; background-position: right bottom;
  -webkit-mask-image: linear-gradient(315deg, #000 0%, #000 30%, transparent 41%); mask-image: linear-gradient(315deg, #000 0%, #000 30%, transparent 41%); }
@media (min-width: 760px) {
  body::before, body::after, .uz-sk::before, .uz-sk::after { width: min(58vw, 820px); background-size: auto 120vh; }
  /* 絵の幅（80vh）より箱が広い所・箱の内側のはしで、絵のはしが縦の線に見えないよう、内側へ向けても消す（2つの mask の重なる所だけ見せる） */
  body::before, .uz-sk::before { width: min(80vh, 58vw);
    -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 40%, transparent 60%), linear-gradient(to right, #000 0%, #000 62%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(135deg, #000 0%, #000 40%, transparent 60%), linear-gradient(to right, #000 0%, #000 62%, transparent 100%); mask-composite: intersect; }
  body::after, .uz-sk::after { width: min(80vh, 58vw);
    -webkit-mask-image: linear-gradient(315deg, #000 0%, #000 40%, transparent 60%), linear-gradient(to left, #000 0%, #000 62%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(315deg, #000 0%, #000 40%, transparent 60%), linear-gradient(to left, #000 0%, #000 62%, transparent 100%); mask-composite: intersect; }
}
html:not(.js) body::before, html:not(.js) body::after { background-image: url("design/sakura-5.webp"); }   /* JS が動かない時は満開の1枚 */
html.js body::before, html.js body::after { background-image: url("design/sakura-1.webp"); }   /* JS が層を置くまでの一瞬は ①（層の ① と同じ絵） */
body.has-sak::before, body.has-sak::after { display: none; }
.uz-sak { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.uz-sk { position: absolute; inset: 0; opacity: 0; }
.uz-sk.sk-1 { opacity: 1; }
.uz-sk.sk-1 { background-color: #FDFCFC; } .uz-sk.sk-2 { background-color: #FDFCFB; } .uz-sk.sk-3 { background-color: #FCFBFB; } .uz-sk.sk-4 { background-color: #FCFAFB; } .uz-sk.sk-5 { background-color: #FBF9F9; }   /* それぞれの絵の真ん中の色 */
.uz-sk.is-ready.sk-1::before, .uz-sk.is-ready.sk-1::after { background-image: url("design/sakura-1.webp"); }
.uz-sk.is-ready.sk-2::before, .uz-sk.is-ready.sk-2::after { background-image: url("design/sakura-2.webp"); }
.uz-sk.is-ready.sk-3::before, .uz-sk.is-ready.sk-3::after { background-image: url("design/sakura-3.webp"); }
.uz-sk.is-ready.sk-4::before, .uz-sk.is-ready.sk-4::after { background-image: url("design/sakura-4.webp"); }
.uz-sk.is-ready.sk-5::before, .uz-sk.is-ready.sk-5::after { background-image: url("design/sakura-5.webp"); }
html:root .sec-ivory, html:root .page-head { background: transparent; }
/* 桜の枝の上に文字が来ても読めるように、背景の上にじかに載る文字だけ、白くやわらかく縁どる（箱は置かない） */
html:root :is(.sec-head, .page-head, .sec-lead, .crumb, .concept, .info, .flow, .notes, .safe, .sc-head, .paycard-notes, .pay) { text-shadow: 0 0 3px #fff, 0 0 10px rgba(255, 255, 255, .9); }

/* ---- 背景の動き（10/25 つばさレビュー・第2バッチへの追加）：支給の背景はそのまま。上に重ねた層（site.js の uzSky が置く）だけが動く ----
   花びら：ごくゆっくり舞い落ちる（30〜50秒で画面の上から下へ・左右に揺れる）。色は桜の淡いピンク。
   金のきらめき：桜の枝がある2つの角（左上・右下）で、ときどき静かに光る。スクロール：花びらの層だけ少しずれる（奥行き）。
   本文の後ろは薄く（mask で真ん中を 25〜30% に）。動かすのは transform と opacity だけ（画面の合成だけで動く＝軽い）。動きを減らす設定では出さない */
.uz-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.uz-sky-pts { position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 13%, rgba(0, 0, 0, .28) 28%, rgba(0, 0, 0, .28) 72%, #000 87%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 13%, rgba(0, 0, 0, .28) 28%, rgba(0, 0, 0, .28) 72%, #000 87%, #000 100%); }
.uz-pt { position: absolute; top: 0; left: var(--x); width: calc(var(--s) * var(--sk, 1)); height: calc(var(--s) * var(--sk, 1) * 1.35); opacity: 0; will-change: transform, opacity;
  animation: uzFall calc(var(--d) * var(--dk, 1)) linear calc(var(--w) * var(--dk, 1)) infinite; }
.uz-pt > span { display: block; width: 100%; height: 100%; will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 27'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FBE3E8'/%3E%3Cstop offset='.55' stop-color='%23F2C2CD'/%3E%3Cstop offset='1' stop-color='%23E7A9B8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 .8C16.6 5.4 19.4 12.6 16.2 19.6 14.6 23.2 12.2 25.4 10 26.2 7.8 25.4 5.4 23.2 3.8 19.6.6 12.6 3.4 5.4 10 .8z' fill='url(%23g)'/%3E%3Cpath d='M10 3.6C9.4 10 9.6 17 10.6 23.4' fill='none' stroke='%23FFFFFF' stroke-opacity='.55' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: uzSway calc(var(--d) * var(--dk, 1) / 5) ease-in-out var(--w) infinite alternate; }
@keyframes uzFall {
  0% { transform: translate3d(0, -14vh, 0); opacity: 0; }
  8% { opacity: calc(var(--o) * var(--ok, 1)); }
  88% { opacity: calc(var(--o) * var(--ok, 1)); }
  100% { transform: translate3d(var(--dx), 112vh, 0); opacity: 0; }
}
@keyframes uzSway {
  from { transform: translate3d(calc(var(--sw) * -1), 0, 0) rotate(-28deg) scaleX(1); }
  to { transform: translate3d(var(--sw), 0, 0) rotate(32deg) scaleX(.72); }
}
.uz-gl { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: 0; will-change: transform, opacity;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='r'%3E%3Cstop offset='0' stop-color='%23FFF6DC'/%3E%3Cstop offset='.45' stop-color='%23E9C988' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23C89850' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='5' fill='url(%23r)'/%3E%3Cpath d='M10 0L11 9 20 10 11 11 10 20 9 11 0 10 9 9z' fill='%23E2BE74'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: uzGlint var(--d) ease-in-out var(--w) infinite; }
@keyframes uzGlint {
  0%, 62%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  76% { opacity: .9; transform: scale(1) rotate(45deg); }
  88% { opacity: .35; transform: scale(.7) rotate(70deg); }
}
@supports (animation-timeline: scroll()) {   /* スクロールで、花びらの層だけ少しずれる（奥行き） */
  .uz-sky-pts { animation: uzDepth linear both; animation-timeline: scroll(root block); }
  @keyframes uzDepth { from { transform: translate3d(0, 3vh, 0); } to { transform: translate3d(0, -4vh, 0); } }
}
/* 控えめ版（?motion=soft）＝第3バッチまでの数：花びら 8・きらめき 6。しっかり版（ふだん）＝花びら 14・きらめき 10・1.25倍の大きさ・1.3倍の濃さ・2割速く・きらめきは大きく長く光る */
.motion-soft .uz-pt:nth-child(n+9), .motion-soft .uz-gl:nth-of-type(n+7) { display: none; }
.motion-strong .uz-sky { --sk: 1.25; --ok: 1.3; --dk: .8; }
.motion-strong .uz-gl { width: 20px; height: 20px; margin: -10px 0 0 -10px; animation-name: uzGlint2; }
@keyframes uzGlint2 {   /* 点滅させない：1回に 2秒ほどかけて明るくなって消える（1秒に3回より遅い） */
  0%, 40%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
  62% { opacity: 1; transform: scale(1.15) rotate(45deg); }
  80% { opacity: .45; transform: scale(.8) rotate(80deg); }
}
@media (max-width: 759px) {   /* スマホ：控えめ版は花びら 4・きらめき 4／しっかり版は花びら 7・きらめき 6（電池と読みやすさ） */
  .uz-pt:nth-child(n+5) { display: none; }
  .motion-strong .uz-pt:nth-child(n+5):nth-child(-n+7) { display: block; }
  .uz-gl:nth-of-type(3n+2) { display: none; }
  .motion-strong .uz-gl:nth-of-type(10) { display: none; }
  .uz-sky-pts { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .75) 0, rgba(0, 0, 0, .3) 18%, rgba(0, 0, 0, .3) 82%, rgba(0, 0, 0, .75) 100%);
                        mask-image: linear-gradient(90deg, rgba(0, 0, 0, .75) 0, rgba(0, 0, 0, .3) 18%, rgba(0, 0, 0, .3) 82%, rgba(0, 0, 0, .75) 100%); }
}
@media (prefers-reduced-motion: reduce) { .uz-sky { display: none; } }
/* ---- 第4バッチ：しっかり動く版（ふだん・?motion=strong）。控えめ版（?motion=soft）は第3バッチまでと同じ。どちらも点滅なし・動きを減らす設定では何も動かない ----
   現れ方：大きく（下から 56px＋少し小さい所から）・カードも1枚ずつ／見出しの英字が広がりながら出る／飾り線が真ん中から左右へ伸びる／
   札の登場：カードが出たあと、ランク札・NEW・本日の出勤（完売）がぽんと出る／ランク札のはしで、金がときどき静かに光る */
@media (prefers-reduced-motion: no-preference) {
  html.motion-strong.motion-ready [data-reveal] { transform: translateY(56px) scale(.94); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.16, .84, .3, 1); transition-delay: var(--rv-delay, 0s); }
  html.motion-strong.motion-ready [data-reveal].is-in { transform: none; }
  html.motion-strong.motion-ready .sec-head[data-reveal] { overflow-x: clip; }   /* 長い英字（Requirements など）が広がっている間も、画面の横にはみ出さない */
  html.motion-strong.motion-ready .sec-head[data-reveal] .en { letter-spacing: .2em; transition: letter-spacing 1.8s cubic-bezier(.16, .84, .3, 1) .1s; }
  html.motion-strong.motion-ready .sec-head[data-reveal].is-in .en { letter-spacing: .03em; }
  html.motion-strong.motion-ready .sec-head[data-reveal] h2::after { clip-path: inset(0 50% 0 50%); transition: clip-path 1.5s cubic-bezier(.16, .84, .3, 1) .5s; }
  html.motion-strong.motion-ready .sec-head[data-reveal].is-in h2::after { clip-path: inset(0 0 0 0); }
  html.motion-strong.motion-ready .uzc[data-reveal].is-in .uz-rank-card,
  html.motion-strong.motion-ready .uzc[data-reveal].is-in .uz-new-card,
  html.motion-strong.motion-ready .uzc[data-reveal].is-in .uz-state { animation: uzPop .85s cubic-bezier(.2, 1.45, .4, 1) calc(var(--rv-delay, 0s) + .55s) backwards; }   /* 終わったら札は元のまま（動きを残さない） */
  @keyframes uzPop { from { opacity: 0; transform: scale(.3) rotate(-10deg); } 70% { opacity: 1; transform: scale(1.12) rotate(2deg); } to { opacity: 1; transform: none; } }
  html.motion-strong .uzc-spark { display: block; position: absolute; z-index: 4; left: calc(5.4% + 41%); top: 4.2%; width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw; opacity: 0; pointer-events: none; will-change: transform, opacity;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='r'%3E%3Cstop offset='0' stop-color='%23FFF6DC'/%3E%3Cstop offset='.45' stop-color='%23E9C988' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23C89850' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='5' fill='url(%23r)'/%3E%3Cpath d='M10 0L11 9 20 10 11 11 10 20 9 11 0 10 9 9z' fill='%23E2BE74'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: uzSpark 5.5s ease-in-out 1.6s infinite; }
  @keyframes uzSpark {   /* ランク札のきらめき：ほとんど回さない（45度まで回ると「×」に見えるため） */
    0%, 40%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
    62% { opacity: 1; transform: scale(1.1) rotate(8deg); }
    80% { opacity: .45; transform: scale(.8) rotate(12deg); }
  }
}


html:root .page-head { border-bottom: 0; }

/* ---- 出勤一覧のカード（画像 8＝枠・1/2＝ランク札・13＝NEW・14＝本日の出勤・12＝完売）。カードを押すと個別ページへ（SNS のアイコンだけは、その SNS へ） ----
   カードの大きさは container（cqw＝カードの幅の 1%）で決める。枠の絵：上（写真の窓）＝card-frame-top.webp（720×764）・白い欄＝card-frame-panel.webp（720×319）。
   どちらも支給の枠を同じ倍率で上下に切っただけ（色・形は変えない）。白い欄は、上の飾り（葉）と下のにじみ・角はそのまま、間の無地だけが中身に合わせて伸びる */
html:root .uzc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
@media (max-width: 999px) { html:root .uzc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; } }
@media (max-width: 759px) { html:root .uzc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } /* スマホ：2列・左右の余白 16px（.wrap）・カードの間 12px */
.uzc { position: relative; display: flex; flex-direction: column; container-type: inline-size; margin: 0; color: inherit; }
/* 名前のリンクを、カード全体に広げる（::after がカードを覆う）。SNS のアイコンは、その上に重ねた別のリンク（リンクの入れ子にしない） */
.uzc-link { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.uzc-link::after { content: ""; position: absolute; inset: 0; z-index: 4; }   /* 角まで押せる（角を丸めない） */
.uzc-link:focus-visible { outline: 0; }
.uzc-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.uzc-top { position: relative; aspect-ratio: 720 / 764; }
/* 写真は窓（x 27〜692・y 25〜764）の中だけ。枠は写真の外にだけ重なる（窓は完全に透明＝写真に枠の色やぼかしがかからない） */
.uzc-photo { position: absolute; left: 3.75%; right: 3.89%; top: 3.27%; bottom: 0; overflow: hidden; border-radius: 3.6cqw 3.6cqw 0 0; background: #2C2430; }
.uzc-photo .tph, .uzc-photo .tph-img, .uzc-photo .tph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pc-main .tph-img, .pc-thumb .tph-img { object-position: 50% 30%; }   /* 10/26 実写真：縦に長い・横に長い写真も、カードと同じく上の方を残して切る */
.uzc-photo .ph-label { right: 2cqw; bottom: 10cqw; font-size: max(8px, 4cqw); }
.uzc-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("design/card-frame-top.webp") center top / 100% 100% no-repeat; }
.uz-rank-card { position: absolute; z-index: 3; left: 5.4%; top: 5.2%; width: 45%; height: auto; pointer-events: none; }   /* 写真の左上・カードの幅の約45% */
.uz-new-card { position: absolute; z-index: 3; right: 5.6%; top: 5.2%; width: 31%; height: auto; pointer-events: none; }   /* 写真の右上（ランク札とぶつからない） */
.uzc-info { flex: 1 0 auto; text-align: center; padding: 0 4cqw; border-style: solid; border-color: transparent;
  border-width: 9.72cqw 3.06cqw 9cqw 2.78cqw;
  border-image: url("design/card-frame-panel.webp") 70 22 174 20 fill / 9.72cqw 3.06cqw 24.17cqw 2.78cqw stretch; min-height: 44.3cqw; }
.uzc-name { margin: 0; font: 600 clamp(13px, 8.2cqw, 19px)/1.45 var(--mincho); letter-spacing: .12em; color: var(--uz-name); }
.uzc-time { margin: 1.2cqw 0 0; font: 500 clamp(12px, 6.6cqw, 15.5px)/1.45 var(--sans); letter-spacing: .05em; color: var(--uz-time); font-variant-numeric: tabular-nums; }
.uzc-time.is-next { font-size: clamp(10px, 5.2cqw, 12.5px); color: var(--muted); }
.uzc-st { margin: 2.4cqw 0 0; line-height: 0; }
.uz-state { display: inline-block; height: 12cqw; width: auto; }
.uzc-spec { margin: .6cqw 0 0; font: 500 clamp(10px, 5.4cqw, 13px)/1.5 var(--sans); color: var(--uz-time); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.uzc-spec span { display: inline-block; white-space: nowrap; }   /* 「T168・」「B88(E) W59 H86」のかたまりで折り返す（ふつうは1行に収まる） */
.uzc-age { display: inline-block; margin-left: .55em; font: 500 .7em/1 var(--sans); letter-spacing: .04em; color: var(--uz-time); white-space: nowrap; }   /* 名前の横の年齢「ゆきの 42歳」 */
/* 「本日の出勤」の置き場所の3案（第3バッチ・?card-layout=a|b|c）。完売の札はどの案も出勤時間のすぐ下（今までどおり） */
/* a：写真の下端に重ねる（写真の真ん中・下から少し上。写真に色やぼかしはかけない） */
.uzc-band { position: absolute; z-index: 3; left: 3.75%; right: 3.89%; bottom: 3.2cqw; margin: 0; display: flex; justify-content: center; line-height: 0; pointer-events: none; }
.uzc-band .uz-state { height: 11.5cqw; }
.lay-a .uzc-photo .ph-label { bottom: 18cqw; }   /* 仮写真の札を、本日の出勤の札の上へ */
.uzc-spark { display: none; }   /* ランク札のはしの金のきらめき（しっかり版だけ・下の動きの所） */
/* b：白い欄のいちばん下 */
.lay-b .uzc-info { display: flex; flex-direction: column; }
.uzc-st.is-bottom { margin-top: auto; padding-top: 3cqw; }   /* 同じ段のカードで、札の高さがそろう */
/* c：札をやめて、出勤時間の行に「本日」（色は支給の札 14 から：地 #EAE4F3・線 #A184AF・字 #604070） */
.uzc-time.is-today { display: inline-flex; align-items: center; gap: 1.8cqw; margin-top: 2cqw; padding: .5cqw 3.4cqw .5cqw .9cqw; border: 1px solid #A184AF; border-radius: 99px; background: #EAE4F3; color: #604070; }
.uzc-today { padding: .28em .75em; border-radius: 99px; background: #604070; color: #fff; font: 600 .66em/1.3 var(--sans); letter-spacing: .14em; }
.uzc-spec + .uzc-time.is-today { margin-top: 2.2cqw; }
.uzc-time.is-sold { border-color: #604070; background: #F4F0F8; }   /* 完売（第4バッチ）：支給の札 12 の色（地 #604070・字 白） */
.uzc-time.is-sold .uzc-today { background: #604070; }
.uzc-spec + .uzc-time { margin-top: 1.6cqw; }
/* 登録している SNS（公式アイコン・縮めただけ）。押せる所は 1 つ 28px 以上。アイコンの間はあける（各社の余白） */
.uzc-sns { position: relative; z-index: 5; display: flex; justify-content: center; gap: 1.6cqw; margin: 2.2cqw 0 0; pointer-events: none; }
.uzc-sns-a { display: inline-flex; align-items: center; justify-content: center; width: clamp(28px, 17cqw, 36px); height: clamp(28px, 17cqw, 36px); border-radius: 6px; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.uzc-sns-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.uzc-sns-a .uz-sns-img { display: block; width: auto; height: clamp(16px, 9.5cqw, 20px); }
.uzc-tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; margin: 2.2cqw 0 0; padding: 0; }
.uzc-tags li { font-size: clamp(9px, 4.3cqw, 11px); line-height: 1.6; padding: 0 .65em; border: 1px solid var(--line-accent); border-radius: 99px; color: var(--accent); background: rgba(255, 255, 255, .75); }
@media (hover: hover) { .uzc .uzc-photo img { transition: transform .6s ease; } .uzc:hover .uzc-photo img { transform: scale(1.03); } }
/* 個別ページ：ランク札は写真の左上・NEW は右上（画像のまま）。今日の受付状況も札の画像 */
.uz-rank-photo { position: absolute; z-index: 3; left: 4%; top: 14px; width: 45%; height: auto; pointer-events: none; }
.uz-new-photo { position: absolute; z-index: 3; right: 4%; top: 14px; width: 30%; height: auto; pointer-events: none; }
.uz-pc-state { display: flex; align-items: center; gap: 12px; }
.uz-pc-state .uz-state { height: 30px; }
.uz-pc-state b { font: 500 16px/1 var(--sans); color: var(--uz-time); letter-spacing: .05em; }

/* 見出しの下の飾り線（画像 9）：飾りの部分が横幅 180px（余白は切ってある＝絵の幅＝飾りの幅） */
html:root .sec-head h2::after, html:root .page-head h1::after { content: ""; display: block; width: 180px; height: calc(180px * 49 / 600); margin: 20px auto 0;
  background: url("design/divider.webp") center / 100% 100% no-repeat; border: 0; }

/* SNS の公式アイコン（assets/design/sns/）：縮めるだけ（色・形を変えない・飾りを付けない）。周りに余白をとる（各社の不可侵領域） */
html:root .osns a { gap: 16px; }
html:root .osns .uz-sns-ic { flex: none; width: auto; height: 40px; margin: 4px; }   /* LINE はスマホで高さ 40px 以上（LINE のガイドライン） */
.mbtn .mbtn-ic { flex: none; width: 40px; height: 40px; margin: 2px 8px 2px 0; }
html:root .pc-link-icon { background: transparent; border: 0; }
.pc-link-icon .uz-sns-img { width: 24px; height: 24px; object-fit: contain; }

/* ルームの地図（Google マップの埋め込み・今のサイトと同じピン） */
.room-map { margin: 12px 0 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-accent); background: var(--pearl); }
/* 10/25 つばさレビュー：ルームの上の写真の枠をやめて、同じ位置・同じ幅（カードの端まで）に Google マップ。地図は1ルームに1つ。
   高さは 410px：Google の埋め込みは、地図の高さが約 395px より低いと、大須ルームの赤いピンを出さない（実測。今のサイトは 600×450） */
html:root .room > .room-map:first-child { margin: -28px -24px 22px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
html:root .room > .room-map:first-child iframe { aspect-ratio: auto; height: 410px; }
.room-map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }
.rooms-maps { margin: 0 0 28px; }
.room-onmap h3 { margin: 0; font: 600 16px/1.5 var(--mincho); letter-spacing: .12em; color: var(--uz-name); }
.room-onmap .room-mark { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
/* 求人の LINE：公式アイコンは同じ緑の上に置かない（視認性を下げる背景は禁止＝LINE のガイドライン） */
html:root .mbtn-line { color: var(--ink); background: var(--surface); border-color: var(--line-accent); }
html:root .mbtn-line small { color: var(--muted); }

/* ---- 第4バッチ：スマホ縦（390×844）を最優先。写真とカードが、画面の中にきれいに収まる縦の大きさ ----
   --uz-top（ヘッダーの下の位置）・--uz-dock（下の帯の高さ）は site.js の uzFit が測る（JS が無い時は 120px・67px） */
@media (max-width: 759px) {
  html:root .uzmv-stage { height: max(500px, calc(100svh - var(--uz-top, 120px) - var(--uz-dock, 67px))); }   /* メインビジュアル：ヘッダーの下から下の帯の上まで */
  html:root .uzmv-btns .btn { white-space: nowrap; letter-spacing: .02em; }   /* 「LINEで予約」を1行に */
  html:root .sec { padding: 64px 0; }   /* セクションの上下 104 → 64（見出しとカードを近く） */
  html:root .page-head { padding: 18px var(--gutter) 8px; }   /* ページの頭 88/60 → 18/8（一覧・出勤表の1段目のカードが、最初の画面に入る・第5バッチでヘッダーが 130px になったので、さらに詰めた） */
  html:root .page-head h1 { margin-top: 8px; }
  html:root .demo-note { padding-top: 3px; padding-bottom: 3px; line-height: 1.45; }
  html:root .page-head .en { font-size: 34px; }
  html:root .page-head h1::after { margin-top: 8px; }
  html:root .crumb { padding-top: 4px; }
  html:root .sec-lead { font-size: 13px; line-height: 1.7; }
  html:root .crumb + .sec, html:root .page-head + .sec { padding-top: 16px; }
  html:root .sec-lead:has(+ .uzc-grid) { margin-bottom: 0; }
  html:root .sec-lead + .uzc-grid { margin-top: 16px; }
  html:root .pc-sec { padding-top: 8px; }   /* 個別ページ：写真と小さい写真が、最初の画面（下の帯の上）に入る */
  html:root .sc-day { letter-spacing: .06em; }   /* 出勤表の「10/25(日) の出勤セラピスト」を1行に */
}

/* ---- 第4バッチ：クレジットカード決済の帯（支給の画像 20）。押すと今のサイトと同じ決済ページ（別タブ）。下に決済の案内 ---- */
.paycard { max-width: 720px; margin: 28px auto 0; }
.paycard-link { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 28px -14px rgba(74, 47, 92, .45); }
.paycard-link img { display: block; width: 100%; height: auto; }
.paycard-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.paycard-notes { margin: 14px 0 0; padding: 0 0 0 1.2em; font-size: 13px; line-height: 1.8; color: var(--muted); }
.paycard-notes li + li { margin-top: 2px; }

/* ==== 第5バッチ：ヘッダー・フッター・スマホのメニュー（完成見本 デザイン支給/原本/21〜25 を、文字もボタンも HTML で再現） ====
   大きさは見本の寸法そのまま：--u＝見本の 1px。PC は幅 1440px の時に 1u＝1px（それより狭い時は同じ割合で縮む）／スマホは幅 390px の時に 1u＝1px。
   ロゴの上の金の飾りだけ、見本から切り出した画像（assets/design/ornament-light|dark.webp）。色・位置・大きさは見本から測った値（scratchpad の meas.py で、見本と並べて確かめる） */
.uzh, .uzf { --u: calc(100vw / 390); --uz-w: #57153A; --uz-cu: #C8765C; font-family: "Shippori Mincho", "UZ Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }
@media (min-width: 760px) { .uzh, .uzf { --u: min(1px, calc(100vw / 1440)); } }
html:root header.site.uzh { position: relative; z-index: 30; background: transparent; border: 0; box-shadow: none; }
.uzh a, .uzf a { text-decoration: none; }
.uzh img, .uzf img { max-width: none; }
/* ロゴ（飾り＋店名）：押せる箱の中に、見本の位置で置く */
.uzh-logo, .uzm-logo, .uzf-logo { position: absolute; display: block; }
.uzh-orn, .uzm-orn, .uzf-orn { position: absolute; height: auto; }
.uzh-name, .uzm-name, .uzf-name { position: absolute; font-weight: 700; line-height: 1; white-space: nowrap; }
/* ボタン（電話・LINE）：LINE は公式ルールのため文字だけ（アイコンは補充待ちリスト） */
.uzb { display: flex; align-items: center; justify-content: center; color: #FBF8FA; font-weight: 700; line-height: 1; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.uzb-ic { flex: none; }
.uzb:focus-visible { outline: 2px solid #C8765C; outline-offset: 2px; }
.uzb-tel { background: var(--uz-w); }
.uzb-line { background: #028D32; }

/* ---- ヘッダー（PC＝見本 21：幅 1440・帯の高さ 211） ---- */
.uzh-band { position: relative; height: calc(211 * var(--u)); background: #FEFEFE; overflow: hidden; }
.uzh-band::before, .uzh-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(300 * var(--u)); pointer-events: none; background: url("design/sakura-5.webp") no-repeat; background-size: calc(760 * var(--u)) auto; opacity: .78; }
.uzh-band::before { left: 0; background-position: calc(-178 * var(--u)) calc(-12 * var(--u)); -webkit-mask-image: linear-gradient(to right, #000 0, #000 28%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 28%, transparent 100%); }
.uzh-band::after { right: 0; background-position: right calc(-70 * var(--u)) top calc(-800 * var(--u)); -webkit-mask-image: linear-gradient(to left, #000 0, #000 28%, transparent 100%); mask-image: linear-gradient(to left, #000 0, #000 28%, transparent 100%); }
.uzh-in { position: relative; z-index: 1; height: 100%; max-width: calc(1440 * var(--u)); margin: 0 auto; }
.uzh-band > .uzh-line { display: none; }
.uzh-band { box-shadow: inset 0 calc(-2 * var(--u)) 0 0 #E09B7B; }   /* 帯の下の金の線（2px） */
.uzh-logo { left: calc(130 * var(--u)); top: calc(40 * var(--u)); width: calc(280 * var(--u)); height: calc(135 * var(--u)); color: var(--uz-w); }
.uzh-orn { left: calc(49.5 * var(--u)); top: calc(0 * var(--u)); width: calc(180 * var(--u)); }
.uzh-name { left: calc(13 * var(--u)); top: calc(55.5 * var(--u)); font-size: calc(68 * var(--u)); letter-spacing: -.09em; font-weight: 600; }
.uzh-btns { position: absolute; right: calc(77.4 * var(--u)); top: calc(28.1 * var(--u)); display: flex; gap: calc(12.3 * var(--u)); }
.uzh-btns .uzb { height: max(44px, calc(50.6 * var(--u))); border-radius: calc(4 * var(--u)); }   /* タブレットで縮んでも、押せる高さは 44px 以上 */
.uzh-btns .uzb-tel { width: calc(186.2 * var(--u)); gap: calc(15.8 * var(--u)); padding-right: calc(4 * var(--u)); font-size: calc(25.5 * var(--u)); letter-spacing: -.02em; }
.uzh-btns .uzb-tel .uzb-ic { width: calc(25.3 * var(--u)); height: calc(30.1 * var(--u)); }
.uzh-btns .uzb-line { width: calc(247.2 * var(--u)); font-size: calc(21 * var(--u)); letter-spacing: .01em; }
.uzh-nav { position: absolute; left: calc(452 * var(--u)); right: calc(77.4 * var(--u)); top: calc(118 * var(--u)); display: flex; justify-content: space-between; }   /* 10/26：6項目（字が増えた分、見本の字の高さ・色のまま少し小さく、LINE のボタンの右はしまで等間隔） */
.uzh-nav a { position: relative; padding: 0 0 calc(16 * var(--u)); color: #571237; font-size: calc(26 * var(--u)); font-weight: 700; line-height: 1.3; letter-spacing: -.03em; margin-right: -.03em; white-space: nowrap; }
.uzh-nav a[aria-current="page"]::after { content: ""; position: absolute; left: calc(-8.3 * var(--u)); right: calc(-8.3 * var(--u)); top: calc(46.3 * var(--u)); height: calc(4.1 * var(--u)); background: #E49DA8; }   /* 下線は字の左右に 8.3（見本の「トップ」と同じ出し方） */
.uzh-nav a:hover { color: #8A3460; }
.uzm, .uzh-spnav { display: none; }

/* ---- ヘッダー（スマホ＝見本 22：幅 390・桜の所 85＋ナビの帯 45） ---- */
@media (max-width: 759px) {
  .uzh-band { height: calc(85 * var(--u)); box-shadow: inset 0 calc(-.8 * var(--u)) 0 0 #DC9C7E; }
  .uzh-band::before { width: calc(130 * var(--u)); background-size: calc(330 * var(--u)) auto; background-position: calc(-62 * var(--u)) calc(-4 * var(--u)); opacity: .75; -webkit-mask-image: linear-gradient(to right, #000 0, #000 40%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 40%, transparent 100%); }
  .uzh-band::after { width: calc(90 * var(--u)); background-size: calc(300 * var(--u)) auto; opacity: .45; }
  .uzh-logo { left: calc(120 * var(--u)); top: calc(4 * var(--u)); width: calc(150 * var(--u)); height: calc(74 * var(--u)); }
  .uzh-orn { left: calc(39.4 * var(--u)); top: calc(6.2 * var(--u)); width: calc(70 * var(--u)); }
  .uzh-name { left: calc(13 * var(--u)); top: calc(30.5 * var(--u)); font-size: calc(33.8 * var(--u)); letter-spacing: -.075em; }
  .uzh-btns, .uzh-nav { display: none; }
  .uzm { display: block; }
  /* 10/26：6項目を1列（見本の帯の高さ 45・字の色と太さのまま。字は 11.6 → 11.2、間に細い金の縦線） */
  .uzh-spnav { display: flex; justify-content: space-between; height: calc(45 * var(--u)); padding: 0 calc(6 * var(--u)); background: #FEFEFE; }
  .uzh-spnav a { position: relative; display: flex; justify-content: center; padding: calc(10.8 * var(--u)) calc(5 * var(--u)) 0; color: #55173A; font-size: calc(11.2 * var(--u)); font-weight: 700; line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
  .uzh-spnav a + a::before { content: ""; position: absolute; left: calc(-.5 * var(--u)); top: calc(13 * var(--u)); width: 1px; height: calc(11 * var(--u)); background: #E6BBA8; }
  .uzh-spnav a[aria-current="page"]::after { content: ""; position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(29.6 * var(--u)); height: calc(1.3 * var(--u)); background: #E49DA8; }
}

/* ---- スマホのメニュー（見本 22 の三本線・23 の開いた画面） ---- */
html:root .uzm > summary { list-style: none; position: absolute; left: calc(348.5 * var(--u)); top: calc(40.2 * var(--u)); width: calc(23.9 * var(--u)); height: calc(16 * var(--u)); padding: 0; cursor: pointer; color: var(--uz-w); -webkit-tap-highlight-color: transparent; }
.uzm > summary::-webkit-details-marker { display: none; }
.uzm > summary::before { content: ""; position: absolute; inset: calc(-15 * var(--u)) calc(-12 * var(--u)); }   /* 押せる所を広く（48×46px） */
.uzm-bars { position: relative; display: block; width: 100%; height: 100%; }
.uzm-bars i { position: absolute; left: 0; right: 0; height: calc(3.4 * var(--u)); border-radius: calc(2 * var(--u)); background: currentColor; }
.uzm-bars i:nth-child(1) { top: 0; } .uzm-bars i:nth-child(2) { top: calc(6.3 * var(--u)); } .uzm-bars i:nth-child(3) { bottom: 0; }
html:root .uzm[open] > summary { position: fixed; z-index: 62; left: calc(347.7 * var(--u)); top: calc(31.6 * var(--u)); width: calc(22.1 * var(--u)); height: calc(21.7 * var(--u)); color: #4F0831; }
.uzm[open] .uzm-bars i { top: 50%; bottom: auto; left: 50%; right: auto; width: calc(29.5 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 0; margin: calc(-.9 * var(--u)) 0 0 calc(-14.75 * var(--u)); }
.uzm[open] .uzm-bars i:nth-child(1) { transform: rotate(45deg); } .uzm[open] .uzm-bars i:nth-child(2) { display: none; } .uzm[open] .uzm-bars i:nth-child(3) { transform: rotate(-45deg); }
.uzm-panel { position: fixed; inset: 0; z-index: 61; overflow-y: auto; overscroll-behavior: contain; background: #FEFDFD; }
.uzm-panel::before { content: ""; position: fixed; left: 0; bottom: 0; width: calc(150 * var(--u)); height: calc(200 * var(--u)); pointer-events: none; opacity: .6; background: url("design/sakura-5.webp") right calc(-10 * var(--u)) bottom calc(-30 * var(--u)) / calc(360 * var(--u)) auto no-repeat; transform: scaleX(-1);   /* 右下の枝を左下へ（見せ方だけ・絵は変えない） */
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 40%, transparent 100%), linear-gradient(to left, #000 0, #000 55%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, #000 0, #000 40%, transparent 100%), linear-gradient(to left, #000 0, #000 55%, transparent 100%); mask-composite: intersect; }
html:has(.uzm[open]) { overflow: hidden; }   /* 開いている間は、後ろのページを動かさない */
.uzm-logo { left: calc(95 * var(--u)); top: calc(12 * var(--u)); width: calc(200 * var(--u)); height: calc(102 * var(--u)); color: #550834; }
.uzm-orn { left: calc(43.3 * var(--u)); top: calc(7.6 * var(--u)); width: calc(110.6 * var(--u)); }
.uzm-name { left: calc(12 * var(--u)); top: calc(48 * var(--u)); font-size: calc(46.3 * var(--u)); letter-spacing: -.1em; }
.uzm-list { position: absolute; left: calc(41.5 * var(--u)); width: calc(307 * var(--u)); top: calc(122.2 * var(--u)); }
.uzm-list a { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(55.7 * var(--u)); padding: 0 calc(5.3 * var(--u)) 0 calc(8 * var(--u)); border-bottom: 1px solid var(--uz-cu); color: #520832; font-size: calc(25.6 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
.uzm-chev { width: calc(10.4 * var(--u)); height: calc(19 * var(--u)); margin-top: calc(1.8 * var(--u)); color: var(--uz-cu); flex: none; }
.uzm-bar { position: fixed; z-index: 62; left: calc(13.3 * var(--u)); right: calc(13.7 * var(--u)); bottom: calc(19.8 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(7.2 * var(--u)); }
.uzm-bar .uzb { height: calc(45.7 * var(--u)); border-radius: calc(4 * var(--u)); }
.uzm-bar .uzb-tel { background: #570A36; gap: calc(16 * var(--u)); font-size: calc(17 * var(--u)); }
.uzm-bar .uzb-tel .uzb-ic { width: calc(21.7 * var(--u)); height: calc(22.1 * var(--u)); }
.uzm-bar .uzb-line { background: #02B233; font-size: calc(15 * var(--u)); }

/* ---- フッター（PC＝見本 24：幅 1440・高さ 512／スマホ＝見本 25：幅 390・高さ 488）。ワインの地に桜の透かし ---- */
html:root footer.site.uzf { position: relative; padding: 0; background: #430F2F; border: 0; color: #FCFAFB; text-align: left; }
.uzf-in { position: relative; z-index: 1; height: calc(512.2 * var(--u)); max-width: calc(1440 * var(--u)); margin: 0 auto; }
.uzf-in::after, .uzf-wm { content: ""; }
.uzf::before, .uzf::after { content: ""; position: absolute; top: calc(512.2 * var(--u) - 300 * var(--u)); width: calc(330 * var(--u)); height: calc(300 * var(--u)); pointer-events: none; z-index: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 300'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3CradialGradient id='g' cx='0' cy='-6' r='26' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23B4728C'/%3E%3Cstop offset='.7' stop-color='%23934964'/%3E%3Cstop offset='1' stop-color='%237E3A57'/%3E%3C/radialGradient%3E%3Cpath id='p' d='M0 0C-10-5-14-18-9-27C-6-31-2-30 0-26C2-30 6-31 9-27C14-18 10-5 0 0Z' fill='url(%23g)'/%3E%3Cg id='f'%3E%3Cuse href='%23p'/%3E%3Cuse href='%23p' transform='rotate(72)'/%3E%3Cuse href='%23p' transform='rotate(144)'/%3E%3Cuse href='%23p' transform='rotate(216)'/%3E%3Cuse href='%23p' transform='rotate(288)'/%3E%3Ccircle r='4.4' fill='%236A2645'/%3E%3Cg fill='%23D49AAE'%3E%3Ccircle cx='0' cy='-8' r='1.1'/%3E%3Ccircle cx='7.6' cy='-2.5' r='1.1'/%3E%3Ccircle cx='4.7' cy='6.5' r='1.1'/%3E%3Ccircle cx='-4.7' cy='6.5' r='1.1'/%3E%3Ccircle cx='-7.6' cy='-2.5' r='1.1'/%3E%3C/g%3E%3C/g%3E%3Cellipse id='bud' rx='5' ry='8' fill='%238A3F5C'/%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Cg fill='none' stroke='%235A1D3A' stroke-linecap='round'%3E%3Cpath d='M-10 190C35 178 78 158 128 188S222 258 266 304' stroke-width='4'/%3E%3Cpath d='M58 172C80 146 86 120 104 98' stroke-width='3'/%3E%3Cpath d='M150 202C172 180 192 172 218 168' stroke-width='2.6'/%3E%3Cpath d='M226 246C246 230 262 222 286 220' stroke-width='2.2'/%3E%3Cpath d='M8 150C20 128 26 110 40 92' stroke-width='2.2'/%3E%3C/g%3E%3Cuse href='%23f' transform='translate(66 228) scale(1.8)'/%3E%3Cuse href='%23f' transform='translate(170 264) scale(1.35) rotate(20)'/%3E%3Cuse href='%23f' transform='translate(18 282) scale(1.15) rotate(40)'/%3E%3Cuse href='%23f' transform='translate(110 120) scale(.95) rotate(10)' opacity='.85'/%3E%3Cuse href='%23f' transform='translate(238 190) scale(.75) rotate(30)' opacity='.8'/%3E%3Cuse href='%23f' transform='translate(288 276) scale(.85) rotate(50)'/%3E%3Cuse href='%23f' transform='translate(36 96) scale(.7) rotate(15)' opacity='.75'/%3E%3Cuse href='%23bud' transform='translate(106 94) rotate(20)'/%3E%3Cuse href='%23bud' transform='translate(224 164) rotate(-30) scale(.8)'/%3E%3Cuse href='%23bud' transform='translate(294 218) rotate(40) scale(.7)'/%3E%3Cuse href='%23bud' transform='translate(42 72) rotate(-10) scale(.7)'/%3E%3Cg fill='%23934964' opacity='.5'%3E%3Cpath d='M206 218c8-6 18-4 20 2-6 5-15 5-20-2z'/%3E%3Cpath d='M28 146c6-8 16-8 19-2-5 6-14 7-19 2z'/%3E%3Cpath d='M306 246c6-7 15-6 17 0-5 5-13 5-17 0z'/%3E%3Cpath d='M150 140c6-7 15-6 17 0-5 5-13 5-17 0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left bottom / 100% 100% no-repeat; opacity: .9; }
.uzf::before { left: 0; }
.uzf::after { right: 0; transform: scaleX(-1); }
.uzf-logo { left: calc(75 * var(--u)); top: calc(90 * var(--u)); width: calc(370 * var(--u)); height: calc(215 * var(--u)); color: #FCFAFB; }
.uzf-orn { left: calc(35 * var(--u)); top: calc(1.9 * var(--u)); width: calc(310 * var(--u)); }
.uzf-name { left: calc(5 * var(--u)); top: calc(103.7 * var(--u)); font-size: calc(98.8 * var(--u)); letter-spacing: -.1em; font-weight: 600; }
.uzf-nav { position: absolute; left: calc(473 * var(--u)); width: calc(505 * var(--u)); top: calc(100.7 * var(--u)); height: calc(224.5 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--uz-cu); border-right: 1px solid var(--uz-cu); }
/* 段：区切りの線は y 171.5・249.9（見本）。字は1段目と3段目で、線から少しずれた所（見本のまま） */
.uzf-nav ul { list-style: none; margin: 0; padding: 0 calc(26 * var(--u)) 0 calc(26 * var(--u)); }
.uzf-nav ul + ul { margin: calc(5.4 * var(--u)) 0; padding: 0 calc(31.2 * var(--u)) 0 calc(19.5 * var(--u)); border-left: 1px solid var(--uz-cu); }
.uzf-nav li { display: flex; justify-content: center; align-items: center; height: calc(78.4 * var(--u)); }
.uzf-nav li + li { border-top: 1px solid var(--uz-cu); }
.uzf-nav ul > li:first-child { height: calc(70.8 * var(--u)); padding-bottom: calc(6.6 * var(--u)); }
.uzf-nav ul > li:last-child { height: calc(75.3 * var(--u)); padding-top: calc(2 * var(--u)); }
.uzf-nav ul + ul > li:first-child { height: calc(65.4 * var(--u)); padding-bottom: calc(12 * var(--u)); }
.uzf-nav ul + ul > li:last-child { height: calc(69.9 * var(--u)); padding-top: calc(7.5 * var(--u)); }
.uzf-nav a { color: #FCFAFB; font-size: calc(27 * var(--u)); font-weight: 700; letter-spacing: .04em; margin-right: -.04em; line-height: 1.2; white-space: nowrap; }   /* 10/26：「セラピスト一覧」が列に入るよう 30 → 27 */
.uzf-nav a:hover { color: #F6C9D2; }
.uzf-btns { position: absolute; left: calc(1020.5 * var(--u)); width: calc(348.6 * var(--u)); top: calc(117.8 * var(--u)); display: grid; gap: calc(26 * var(--u)); }
.uzf-btns .uzb { border-radius: calc(10 * var(--u)); border: calc(2 * var(--u)) solid #EDB49E; box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .35); }
.uzf-btns .uzb-tel { height: calc(82.2 * var(--u)); padding-right: calc(15.6 * var(--u)); background: linear-gradient(180deg, #FFFBF6, #FBF3EC); color: #530F39; gap: calc(25 * var(--u)); font-size: calc(32.5 * var(--u)); letter-spacing: 0; }
.uzf-btns .uzb-tel .uzb-ic { width: calc(45.9 * var(--u)); height: calc(49.3 * var(--u)); }
.uzf-btns .uzb-line { height: calc(89.7 * var(--u)); background: linear-gradient(160deg, #20A33B 0%, #1DA73A 55%, #36C058 100%); font-size: calc(28.5 * var(--u)); }
.uzf-copy { position: absolute; left: 0; right: 0; top: calc(379 * var(--u)); margin: 0; padding-top: calc(29.6 * var(--u)); text-align: center; font-size: calc(18.5 * var(--u)); letter-spacing: .14em; word-spacing: .3em; color: #E4D5DF; }
.uzf-copy::before { content: ""; position: absolute; top: 0; left: calc(220.5 * var(--u)); width: calc(1042.2 * var(--u)); height: calc(1.4 * var(--u)); background: linear-gradient(90deg, rgba(226, 151, 114, .55), #E8A98C 20%, #F2C3A8 50%, #E8A98C 80%, rgba(226, 151, 114, .55)); }
.uzf-sub { position: relative; z-index: 1; padding: 0 16px calc(28px + var(--uzd-h)); text-align: center; font-family: var(--sans, sans-serif); }   /* JS が無い時は追従バーが引っ込まないので、その高さだけ下をあける */
html.uz-dock .uzf-sub { padding-bottom: 28px; }   /* JS がある時は、フッターのボタンが見えたら追従バーが引っ込む＝あけなくてよい */
.uzf-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 12px; letter-spacing: .06em; }
.uzf-legal a { color: #E9D6DE; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(233, 214, 222, .45); }
.uzf-hours { margin: 8px 0 0; font-size: 12px; color: #CDB7C2; letter-spacing: .06em; }
.uzf-age { margin: 6px auto 0; max-width: 640px; font-size: 11px; line-height: 1.8; color: #BFA7B4; letter-spacing: .03em; }   /* 第10バッチ：年齢の注意の1行（入口の年齢確認の代わり・文言は data.js の shop.ageNote）。下の断り書きと同じ控えめな字 */
.uzf-sub .fine { margin: 10px auto 0; max-width: 640px; font-size: 11px; line-height: 1.8; color: #BFA7B4; }
@media (max-width: 759px) {
  .uzf-in { height: calc(488 * var(--u)); }
  .uzf::before, .uzf::after { top: calc(488 * var(--u) - 125 * var(--u)); width: calc(138 * var(--u)); height: calc(125 * var(--u)); }
  .uzf-in::before { content: ""; position: absolute; left: 0; right: 0; top: calc(17.7 * var(--u)); height: 1px; background: linear-gradient(90deg, #C98667, #E8B39A 50%, #C98667); }
  .uzf-logo { left: calc(90 * var(--u)); top: calc(35 * var(--u)); width: calc(210 * var(--u)); height: calc(115 * var(--u)); }
  .uzf-orn { left: calc(30 * var(--u)); top: calc(3.2 * var(--u)); width: calc(150 * var(--u)); }
  .uzf-name { left: calc(8 * var(--u)); top: calc(53.5 * var(--u)); font-size: calc(52 * var(--u)); letter-spacing: -.085em; }
  .uzf-nav { left: calc(29.6 * var(--u)); width: calc(331 * var(--u)); top: calc(173.6 * var(--u)); height: calc(118 * var(--u)); border: 0; }
  .uzf-nav ul { margin: 0; padding: 0 calc(6.2 * var(--u)) 0 0; }
  .uzf-nav ul + ul { margin: 0; padding: 0 0 0 calc(14.2 * var(--u)); border-left: 1px solid var(--uz-cu); }
  .uzf-nav li, .uzf-nav ul > li:last-child, .uzf-nav ul + ul > li:last-child { height: calc(45.2 * var(--u)); padding: 0; }
  .uzf-nav ul > li:first-child, .uzf-nav ul + ul > li:first-child { height: calc(32.7 * var(--u)); padding: 0 0 calc(10.1 * var(--u)); }
  .uzf-nav li + li { border-top-width: .7px; }
  .uzf-nav a { font-size: calc(17.6 * var(--u)); }
  .uzf-btns { left: calc(24 * var(--u)); width: calc(342 * var(--u)); top: calc(314.2 * var(--u)); grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)); }
  .uzf-btns .uzb { height: calc(51.1 * var(--u)); border-radius: calc(6 * var(--u)); border-width: 1px; }
  .uzf-btns .uzb-tel { gap: calc(9.4 * var(--u)); padding: 0; font-size: calc(17 * var(--u)); }
  .uzf-btns .uzb-tel .uzb-ic { width: calc(23.7 * var(--u)); height: calc(25 * var(--u)); }
  .uzf-btns .uzb-line { font-size: calc(14.5 * var(--u)); }
  .uzf-copy { top: calc(383.7 * var(--u)); padding-top: calc(17 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: .1em; }
  .uzf-copy::before { left: calc(24 * var(--u)); width: calc(342 * var(--u)); height: 1px; }
  .uzf-sub { padding-bottom: calc(22px + var(--uzd-h)); }
  html.uz-dock .uzf-sub { padding-bottom: 22px; }
}
/* ---- 追従バー（10/26 つばさ指示）：「電話する」「LINEで問い合わせ」だけ。スマホも PC も全ページ、スクロールしても画面の下に付いてくる。
   見た目は見本 23（メニューの下のボタン）と同じ。押せる高さ 48px（PC 50px）。フッターのボタンが見えたら、すっと引っ込む（site.js の uzDock）。
   動きを減らす設定では、すべらせずに消すだけ。メニューを開いている間は出さない（メニューの下に同じボタンがあるため） ---- */
:root { --uzd-h: 65px; }
@media (min-width: 760px) { :root { --uzd-h: 69px; } }
html:root body { padding-bottom: 0; }   /* 本文の最後は、追従バーではなくフッターの下のあきで守る（上の .uzf-sub） */
html:root .dock.uzd { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(254, 252, 252, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #E2B49F; box-shadow: 0 -6px 18px rgba(87, 21, 58, .07); font-family: "Shippori Mincho", "UZ Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; transition: transform .34s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s; }
html:root .dock.uzd.is-away { transform: translateY(calc(100% + 10px)); visibility: hidden; transition: transform .34s cubic-bezier(.4, 0, .6, 1), visibility 0s linear .34s; }
html:has(.uzm[open]) .dock.uzd { visibility: hidden; }
html:root .dock.uzd .uzb { min-height: 48px; padding: 0 8px; border: 0; border-radius: 4px; box-shadow: none; text-decoration: none; letter-spacing: .02em; }
html:root .dock.uzd .uzb-tel { gap: 12px; background: #570A36; color: #FBF8FA; font-size: 17px; }
html:root .dock.uzd .uzb-tel .uzb-ic { width: 20px; height: 21px; }
html:root .dock.uzd .uzb-line { background: #02B233; color: #FBF8FA; font-size: 15px; }
html:root .dock.uzd .uzb-tel:hover { background: #6C1847; }
html:root .dock.uzd .uzb-line:hover { background: #03A02F; }
@media (min-width: 760px) {
  html:root .dock.uzd { display: grid; grid-template-columns: 250px 300px; justify-content: center; gap: 14px; padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px)); }
  html:root .dock.uzd .uzb { min-height: 50px; }
  html:root .dock.uzd .uzb-tel { font-size: 20px; }
  html:root .dock.uzd .uzb-tel .uzb-ic { width: 22px; height: 24px; }
  html:root .dock.uzd .uzb-line { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { html:root .dock.uzd, html:root .dock.uzd.is-away { transition: none; } }

/* 更新ページ（お店の人専用）のロゴ：新しい形（ナビ・ボタンなし） */
.uzh-logo-adm { position: relative; display: inline-block; width: 230px; height: 70px; color: #57153A; font-family: "Shippori Mincho", "UZ Mincho", serif; }
.uzh-logo-adm .uzh-orn { position: absolute; left: 66px; top: 2px; width: 84px; max-width: none; }
.uzh-logo-adm .uzh-name { position: absolute; left: 30px; top: 27px; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.06em; }

/* ==== スマホ磨きパック（2026-10-26・【CC2宛・司令塔より】お客はほぼスマホ）：桜の枝と文字の重なり・字の大きさ・押しやすさ（44px）・改行の座り・桜の切り替えの軽さ ====
   支給の画像（桜・札・枠・ロゴ）は変えない。見た目が変わる直しは、スマホの幅（759px まで）だけ。PC は、押せる範囲の広さ（目に見えない）と桜の切り替えの軽さだけ */
@media (max-width: 759.98px) {
  /* 1. 霞（かすみ）：スマホでは、桜の枝が画面の左上と右下に大きく出るため、背景にじかに載った文字（料金表・規約・プロフィール・注意書きなど）に枝が重なる。
        文字の節の後ろにだけ、白い地を少し透かした霞を敷く（ふちは、ぼかして消す＝箱には見せない）。カード・地図・出勤表の節は今までどおり桜をそのまま見せる */
  html:root { --uz-veil: rgba(254, 251, 252, .8); } /* 10/27 仮採用＝今の濃さ（白 8割）。選び直す時は、この1か所の .8 を変える */
  /* 霞は文字の要素の後ろの疑似要素（z -2＝桜の上・花びらの下。実機レビュー第7バッチ）。花びら（z -1）は霞の上・文字とカードの下を舞う＝文字には重ならない */
  /* 文字の節：節の中身ごと（左右は画面のはしまで・上下はぼかす） */
  html:root .sec:not(.pc-sec) > .wrap:not(:has(> .uzc-grid, > .rooms, > .sboard)) { position: relative; }
  html:root .sec:not(.pc-sec) > .wrap:not(:has(> .uzc-grid, > .rooms, > .sboard))::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-color: var(--uz-veil); box-shadow: 0 0 26px 18px var(--uz-veil); }
  /* カード・地図・出勤表の節の中の文字だけ（説明・案内の表・カードの上の小見出しなど）・パンくず・プロフィールの文字の欄（小見出し .sub-h は ::before を飾りに使っているので ::after） */
  html:root .wrap:has(> .uzc-grid, > .rooms, > .sboard) > :is(.sec-lead, .safe, p.center, .info, .flow, .notes, .sub-h),
  html:root .sec-head:has(+ .uzc-grid) h2,
  html:root .sboard > .sc-head, html:root .pc-sec .pc-info, html:root .pc-sec .pc-sched-head, html:root main > .wrap.crumb { position: relative; }
  html:root .wrap:has(> .uzc-grid, > .rooms, > .sboard) > :is(.sec-lead, .safe, p.center, .info, .flow, .notes)::before,
  html:root .wrap:has(> .uzc-grid, > .rooms, > .sboard) > .sub-h::after,
  html:root .sec-head:has(+ .uzc-grid) h2::before,
  html:root .sboard > .sc-head::before, html:root .pc-sec .pc-info::before, html:root .pc-sec .pc-sched-head::before, html:root main > .wrap.crumb::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-color: var(--uz-veil); box-shadow: 0 0 18px 12px var(--uz-veil); border-radius: 14px; }
  html:root main > .wrap.crumb::before { border-radius: 0; }
  /* 出勤表の日付のタブ：白い札にする（えらんでいる日は今までどおりの紫） */
  html:root .dtab { background: rgba(255, 255, 255, .88); }

  /* 2. 字の大きさ：カードの字は clamp() の下限に張りついていた（札 9px・年齢 9.9px・サイズ 10px・次回 10px）。
        サイズの行・次回の行は 375px でも1行のまま（決まり）。札は字を上げた分、左右のあきを少し詰めて、カードが伸びすぎないように */
  html:root .uzc-tags li { font-size: 10px; padding: 0 .5em; }
  html:root .uzc-age { font-size: max(11px, .7em); }
  html:root .uzc-spec { font-size: clamp(10.5px, 5.4cqw, 13px); }
  html:root .uzc-time.is-next { font-size: clamp(11px, 5.2cqw, 12.5px); letter-spacing: 0; }
  html:root .dtab small { font-size: 11px; }
  html:root .pc-label { font-size: 11.5px; }
  html:root .pc-today { font-size: 11px; }
  html:root .course-min small { font-size: 10.5px; }
  html:root .crumb { font-size: 12px; }
  html:root .info dt { font-size: 12.5px; }
  html:root .uzf-sub .fine { font-size: 11.5px; text-wrap: balance; }   /* 中央ぞろえ：「ん）。」だけが次の行に落ちない */
  html:root .demo-note { font-size: 11.5px; line-height: 1.6; }

  /* 3. 押しやすさ（スマホで間を変える所）：トップの小さなナビ 38px → 46px・カードの SNS はアイコンの間をあけて、押せる範囲 44px 以上が、となりと重ならない */
  html:root .subnav a { padding-top: 14px; padding-bottom: 14px; }
  html:root .uzc-sns { gap: 16px; }

  /* 4. 改行の座り：短いリンク・電話番号を途中で折らない（「キャンセルポリシ／ー」）。見出しは言葉のまとまりで折り、行の長さをそろえる。本文は最後の行が1〜2文字にならないように */
  html:root main :is(p, li, dd) > a:not(.btn) { white-space: nowrap; }
  html:root main :is(h1, h2, h3, .sub-h, .sec-lead, .recruit-catch) { word-break: auto-phrase; text-wrap: balance; }
  html:root main :is(p, li, dd) { text-wrap: pretty; }
}

/* 3. 押しやすさ（どの幅も・目に見えない）：押せる所を高さ 44px 以上に。字・線の位置は動かさず、押せる範囲だけを広げる */
html:root .qa details { padding: 0 4px; }
html:root .qa summary { padding: 14px 24px 14px 30px; }   /* 上下のあきを details から summary へ移す（見た目の間は同じ・押せる高さ 50px 以上） */
html:root .qa summary::before { top: 11px; }
html:root .qa summary::after { top: 14px; }
html:root .qa p { margin-top: -6px; padding-bottom: 14px; }
html:root :is(.link-more, .uzf-legal a, .notfound-links a, .pc-sched-head a) { position: relative; }
html:root :is(.link-more, .uzf-legal a, .notfound-links a, .pc-sched-head a)::after { content: ""; position: absolute; inset: -10px -9px; }   /* 24px → 44px（短い「求人」も幅 44px） */
html:root :is(.legal-links, .notfound-links, .uzf-legal) { row-gap: 20px; }   /* 2行に折れた時、押せる範囲が上下で重ならない（1行の時は変わらない） */
html:root .uzf-nav li { position: relative; }
html:root .uzf-nav a::after { content: ""; position: absolute; inset: 0; }   /* フッターのナビ：段の枠ぜんぶを押せる所に（段の高さは見本 24・25 のまま） */
html:root .uzc-sns-a { position: relative; }
html:root .uzc-sns-a::after { content: ""; position: absolute; inset: -2px; }   /* PC：となりとの間（約4px）と重ならない分だけ */
@media (max-width: 759.98px) { html:root .uzc-sns-a::after { inset: -8px; } }   /* スマホ：間を 16px にあけたので 44px 以上 */
html:root :is(.legal :is(p, li, dd), .info dd, .paycard-notes li, .crumb) > a:not(.link-more, .btn) { padding-block: 16px; }   /* 文の中のリンク：行の高さは変わらない */

/* 5. 桜の切り替えを軽く：見えている2枚（下の1枚＋重なっていく1枚）だけを置き、画面の合成だけで濃さを変える（毎回の描き直しをしない・site.js の uzSakura）。
      スマホのアドレスバーが出入りしても、桜の層の大きさを変えない（大きい方の画面の高さ＝100lvh。右下の枝がずれて跳ねない） */
html:root .uz-sak, html:root .uz-sky { bottom: auto; height: 100vh; height: 100lvh; }
html:root .uz-sak { contain: strict; }
html:root .uz-sk { will-change: opacity; }
html:root .uz-sk.is-off { display: none; }

/* ==== 実機レビュー第7バッチ（2026-10-26・つばさのスマホ実機）：メイン画像を主役に・ランク札を大きく・トップは10人＋一覧へ・花びらが見えるように ==== */
/* ① メイン画像の上の載せ物：電話・LINE のボタンとナビは外した（index.html）。白い台は薄く（画像が透けて見える）、ロゴは今の大きさ、キャッチは一回り小さく。
      ロゴの画像は白地なので、白い所だけを下の地に溶かす（darken＝地がロゴの色より明るければ、ロゴの色はそのまま・画像は加工しない）。
      台はロゴの所を濃さ .78（いちばん暗いカーテンの上でも、地が金 #C89850 より明るい＝金が消えない）、キャッチの所を .55（字の明るさの差 4.5 以上）の2段にする。
      重なりの順：桜（z -2）→ メイン画像（z -2・後ろ）→ 花びら（z -1）→ 白い台・文字。台は重なりの区切りを作らない（z-index・transform なし＝ロゴが下の画像と溶け合える） */
html:root { --uzmv-a: .78; --uzmv-a2: .55; }
.uzmv-stage { background: transparent; }
.uzmv-slides { z-index: -2; background: #E9D9E2; }
html:root .uzmv-copy { z-index: auto; transform: none; top: 0; bottom: 0; height: max-content; margin: auto 0; background: linear-gradient(rgba(254, 253, 252, var(--uzmv-a)) 0 56%, rgba(254, 253, 252, var(--uzmv-a2)) 70%);
  box-shadow: 0 10px 34px rgba(59, 43, 68, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root .uzmv-logo img { mix-blend-mode: darken; }
html:root .uzmv-lead { margin-top: 14px; font-size: 13.5px; line-height: 1.9; letter-spacing: .12em; text-shadow: 0 0 2px #fff, 0 0 6px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .8); }
@media (max-width: 759px) {
  html:root .uzmv-copy { top: 16px; bottom: auto; left: 16px; right: 16px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 14px 18px 12px; }
  html:root .uzmv-lead { margin-top: 8px; font-size: 11.5px; line-height: 1.8; letter-spacing: .1em; }
}
/* ② ランク札（ダイヤ・プラチナ）を大きく：カードの幅の 45% → 58%（画像は縮めるだけ・縦横の比はそのまま）。
      NEW 札（右から 5.6%・幅 31%）と重ならない決まりは同じ＝両方ある子だけ 55% まで（5.4 + 55 + 3 + 31 + 5.6 = 100）。
      比べた3案（45・55・60%）は デザイン見本/実機レビュー第7バッチ.html。変える時は --uz-rank-w の1か所（10/27 つばさ「サイズ感はこれでいい」＝58% で確定） */
html:root { --uz-rank-w: 58%; }
html:root .uz-rank-card { width: var(--uz-rank-w); }
html:root .uzc-top:has(.uz-new-card) .uz-rank-card { width: min(var(--uz-rank-w), 55%); }
html.motion-strong .uzc-spark { left: calc(5.4% + var(--uz-rank-w) * .911); }   /* きらめき：札の右はしの少し手前（45% の時の 41% と同じ割合） */
html.motion-strong .uzc-top:has(.uz-new-card) .uzc-spark { left: calc(5.4% + min(var(--uz-rank-w), 55%) * .911); }
/* ③ トップのセラピストは先頭の10人（site.js の TOP_MAX）。その下に目立つ「セラピスト一覧へ」（塗りのボタン・高さ 54px・全◯名） */
html:root .uz-more { margin-top: 30px; }
html:root .uz-more-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: min(100%, 320px); min-height: 56px; padding: 6px 20px;
  font-size: 15.5px; letter-spacing: .14em; }
html:root .uz-more-btn small { font-size: 11.5px; letter-spacing: .1em; opacity: .9; }
html:root .uz-more-btn small:empty { display: none; }
/* ④ 花びらをスマホで見えるように（Step0：390 で画面の中に平均 5.7 枚あるのに、見えていたのは 1画面 0.57 枚＝霞・カード・メイン画像の後ろに隠れていた）。
      重なりの順を「桜 → 霞・メイン画像 → 花びら → 文字・カード」に（上の霞の疑似要素・メイン画像の z -2）＝文字と写真には重ならない。
      スマホのしっかり版：7 → 10 枚・大きさ 1.25 → 1.5 倍・濃さ 1.3 → 1.8 倍（ほぼ不透明）・真ん中を薄くする mask は .3 → .85。花びらの絵（色・形）は同じ。点滅なし（出る・消えるは落ちる時間の 8% かけて）・動きを減らす設定では出さない（今までどおり） */
@media (max-width: 759px) {
  .motion-strong .uz-pt:nth-child(n+8):nth-child(-n+10) { display: block; }
  html.motion-strong .uz-sky { --sk: 1.5; --ok: 1.8; }
  .uz-sky-pts { -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .85) 18%, rgba(0, 0, 0, .85) 82%, #000 100%);
                        mask-image: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .85) 18%, rgba(0, 0, 0, .85) 82%, #000 100%); }
}

/* ==== 第8バッチ（2026-10-26）：媒体のリンクバナー欄（トップのいちばん下・今のサイトと同じ位置づけ）。いちばん上はバニラ（代理店の指定のコードのまま） ====
   画像は縮めない（幅の指定どおり。画面より広い1本＝400px だけ、横にはみ出さないよう画面の幅に合わせる）。画像が読めない時は alt の字の枠のまま（幅・高さの指定で場所を取る）。
   押せる高さ：バナー 40px の上下に 3px ずつ足して 46px（見た目の間は 10px） */
html:root .uzlink-van { margin: 4px 0 14px; }
html:root .uzlink-van img { display: inline-block; vertical-align: top; max-width: 100%; height: auto; }   /* サイト全体の img { display: block } だと、指定のコードの中央寄せ（text-align: center）が効かないため */
html:root .uzlink { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
html:root .uzlink-a { display: block; max-width: 100%; padding: 3px 0; line-height: 0; -webkit-tap-highlight-color: transparent; }
html:root .uzlink-a img { display: block; max-width: 100%; height: auto; background: #F6F0F4; color: var(--muted); font-size: 11px; line-height: 1.4; overflow: hidden; }
html:root .uzlink-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==== 第8バッチ補修（2026-10-26・司令塔裁定）：スマホ（759px まで）は、バニラの下の 48本を2列に（1列 48段 約 2,470px は長すぎるため）。
   バニラは上に1本・真ん中・200px のまま（代理店のコードは不変）。幅の広い2本（400×85・320×80）は1段まるごと使う（その画像の幅まで）。
   押せる高さ：画像の上下に 5px ずつ足して 44px 以上（375px で 2列の画像は高さ約 33px） ==== */
@media (max-width: 759.98px) {
  html:root .uzlink { gap: 0 12px; }
  html:root .uzlink-a { flex: 0 0 calc(50% - 6px); padding: 5.5px 0; }
  html:root .uzlink-a img { width: 100%; }
  html:root .uzlink-a:has(img[width="400"]), html:root .uzlink-a:has(img[width="320"]) { flex-basis: 100%; }
  html:root .uzlink-a:has(img[width="400"]) img, html:root .uzlink-a:has(img[width="320"]) img { width: auto; margin: 0 auto; }
}

/* ==== 第9バッチ（2026-10-27・つばさ「スマホだと動きがない感じ？」）：スマホでも桜の咲き替わりを感じられるように ====
   測った原因（スマホ縦 390）：①桜の枝は画面の左上と右下の角だけ（画面の幅に合わせて縮めているので小さい）
   ②その上を霞・カード・下の帯が覆い、見えているのは画面の約 5%（絵の濃さの約 2割）③切り替えをページ全体に薄く配っていた（トップは 15 画面で4段）
   ＝1画面送った時に、見えて変わる所は画面の 0.2%。
   直し方（スマホの幅だけ。支給の画像は変えない・描くのは2枚のまま。第11バッチから、動きを減らす設定でも同じ）：
   1. 桜の絵を 150% で見せる（--uz-sak-sp の1か所。左上の枝は左上・右下の枝は右下にそろえたまま）
   2. 節と節のあいだに「窓」（.uz-win・site.js が置く・画面の3割）＝桜が素で見える間。咲き替わりは、窓が画面を通る間に進む
   3. 大きくした枝が後ろに入る文字（カード・地図・出勤表の節の見出し全体、個別ページの電話・LINE のボタン）にも霞を敷く（濃さは今の霞と同じ） */
html:root { --uz-sak-sp: 150%; }
.uz-win { display: none; pointer-events: none; }
@media (max-width: 759.98px) {
  html.js .uz-sk::before, html.js .uz-sk::after { background-size: var(--uz-sak-sp) auto; }
  .uz-win { display: block; height: 30vh; }
  html:root .wrap:has(> .uzc-grid, > .rooms, > .sboard) > .sec-head, html:root .pc-sec .pc-cta { position: relative; }
  html:root .wrap:has(> .uzc-grid, > .rooms, > .sboard) > .sec-head::before, html:root .pc-sec .pc-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-color: var(--uz-veil); box-shadow: 0 0 18px 12px var(--uz-veil); border-radius: 14px; }
}

/* ==== 第10バッチ（2026-10-27・つばさ）：ページを移る時のロゴの「間」（site.js の uzPageTrans・各ページの head の小さな script） ====
   面＝サイトの地の色（ロゴの地と同じ #FEFDFC）・まん中に支給のロゴ（画像は変えない・表示の大きさだけ）。
   出る側（html.uz-pt-go）：押したらすぐ 0.18 秒でふわっと出る（ロゴは少し下から浮く）。そのままふつうに移る＝待たせない。読み込みが遅い時は出たまま。
   来た側（html.uz-pt-in）：最初の表示から全面で、0.2 秒置いて 0.25 秒で消える（CSS だけ＝JS が止まっても必ず消える）。動きを減らす設定では出さない */
html.uz-pt-go::before, html.uz-pt-in::before, html.uz-pt-go::after, html.uz-pt-in::after { content: ""; position: fixed; z-index: 2147483000; pointer-events: none; }
html.uz-pt-go::before, html.uz-pt-in::before { inset: 0; background: #FEFDFC; }
html.uz-pt-go::after, html.uz-pt-in::after { left: 50%; top: 50%; width: min(58vw, 300px); aspect-ratio: 572 / 200; transform: translate(-50%, -50%); background: url("design/logo.webp") center / contain no-repeat;
  mix-blend-mode: darken; }   /* ロゴの画像は白い地ごとの四角＝消えていく途中で下のページが透けた時に、白い四角が浮かないよう、白い所だけ下の色に溶かす（メイン画像のロゴと同じ・画像は加工しない） */
html.uz-pt-go::before { animation: uzPtIn .18s ease-out both; }
html.uz-pt-go::after { animation: uzPtLogo .32s ease-out both; }
html.uz-pt-in::before, html.uz-pt-in::after { animation: uzPtOut .25s ease-in .2s both; }
@keyframes uzPtIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uzPtLogo { from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes uzPtOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.uz-pt-go::before, html.uz-pt-in::before, html.uz-pt-go::after, html.uz-pt-in::after { display: none; } }

/* ==== 第11バッチ（E1・司令塔の裁定 A）：書体が届くまでの「代わりの書体」の寸法を、3書体に合わせる（届いた時のカタつきを小さく） ====
   書体はメイン画像の後に読む（各ページの head の小さな script）ので、遅い回線では最初の数秒、端末の書体で出る。そのまま差しかえると、
   明朝の字が上下に最大 12px 動き、英字の見出しは 1.05〜1.23 倍の幅から縮む（10/28 実測・スマホ 390）。
   そこで、端末の書体（ヒラギノ明朝・游明朝・Times New Roman・Helvetica Neue・Arial）の寸法だけを、3書体と同じに合わせた名前を作り、各書体の並びの2番目に置く
   （UZ Mincho・UZ Display・UZ Label。字の形は端末の書体のまま・画像やファイルは足さない）。
   値＝Chrome で測った3書体の寸法（字の上・字の下、字の大きさに対して）：しっぽり明朝 116%・29%／Cormorant Garamond 92%・29%／Josefin Sans 75%・25%。
   size-adjust（幅を合わせる倍率）を付けた物は、上下の値もその倍率で縮むため、割り戻した値を書く（例：92% ÷ 0.853 ＝ 107.9%）。
   受け持つ字（unicode-range）は、3書体の字の範囲の中だけ（明朝＝空白・かな・漢字・全角／英字＝半角の英数字と記号）。書体が届いた後は3書体がその字を描くので、
   この名前の物は出てこない（届いた後の姿が前と同じ画素なのを、13 ページ × 3つの幅で確かめた・10/28）。
   半角の空白（U+0020）を入れてあるのは、行の高さの基準になる書体（空白を持つ最初の書体）を、届く前から3書体と同じ寸法にするため */
@font-face { font-family: "UZ Mincho"; src: local("HiraMinProN-W3"), local("Hiragino Mincho ProN W3"), local("Hiragino Mincho ProN"), local("YuMincho-Regular"), local("Yu Mincho Regular"), local("NotoSerifCJKjp-Regular"), local("Noto Serif CJK JP");
  font-weight: 100 500; ascent-override: 116%; descent-override: 29%; line-gap-override: 0%; unicode-range: U+0020, U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "UZ Mincho"; src: local("HiraMinProN-W6"), local("Hiragino Mincho ProN W6"), local("YuMincho-Demibold"), local("Yu Mincho Demibold"), local("NotoSerifCJKjp-Bold"), local("Noto Serif CJK JP Bold");
  font-weight: 600 900; ascent-override: 116%; descent-override: 29%; line-gap-override: 0%; unicode-range: U+0020, U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "UZ Display"; src: local("TimesNewRomanPSMT"), local("Times New Roman");
  font-style: normal; font-weight: 100 600; size-adjust: 94.7%; ascent-override: 97.1%; descent-override: 30.6%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF; }
@font-face { font-family: "UZ Display"; src: local("TimesNewRomanPS-ItalicMT"), local("Times New Roman Italic");
  font-style: italic; font-weight: 100 600; size-adjust: 85.3%; ascent-override: 107.9%; descent-override: 34%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF; }
@font-face { font-family: "UZ Label"; src: local("HelveticaNeue"), local("Helvetica Neue"), local("ArialMT"), local("Arial");
  font-weight: 100 600; size-adjust: 106.7%; ascent-override: 70.3%; descent-override: 23.4%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF; }

/* ==== 第12バッチ（E2・司令塔の裁定 A）：中身が描かれるまでフッターと欄の下の行を出さない（描かれた時に下へ押し出されて、ずれ CLS が出ないように） ====
   対象＝セラピスト一覧・スケジュール・個別（JS で描く欄が画面の上の方にあるページ）。各ページの head の小さな script が html.uz-wait を付け、
   site.js が描き終えた時に外す（site.js が読めなかった時は DOMContentLoaded〔読めなくても来る〕、返ってこない時は 10 秒後に、head の script が外す）。
   外れた時は、描かれた中身の下に出るだけ＝ほかの物は動かない。JS が動かない時は印が付かない＝フッターも行も、ふつうに見える。描かれた後の姿は前と同じ。
   10/28 実測（遅めの 4G・前）：スマホ 一覧 0.43・スケジュール 0.62・個別 0.76／PC 個別 0.44・一覧 0.08。
   お知らせ・写メ日記（今はどこからも行けない）は入れていない：ずれは 0.10・0.12 で、フッターがいちばん大きい物のため、入れると LCP が遅れる。戻す時は head の1行を写す */
html.uz-wait footer.site, html.uz-wait main [data-needs] ~ * { display: none; }