@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   KINGDOM様 ワイヤーフレーム v1｜実寸レイアウト（2026-09-01）
   流用元＝niau様 platform_2026-08/_v3_flow/wf/wire.css（385行）。ゼロから書いていない。

   ★ワイヤーの規律（frontend-design-lim §3.5 ／ memory feedback_wireframe_real_typeface_mono_color）
     ・配色は墨のみ。ブランド色 #980b12 は使わない（設計仕様の欄に記載するだけ）
     ・書体は本番で実際に使うものを、ウェイトまで実測して設定する
     ・実線の箱＝人が作って入れるもの／破線の箱＝KINGDOM AI が外から取って自動で描くもの

   ★数値は 2026-09-01 の実測（PC1440・Chromium）から起こしている
     現行 www.kingdom-hair.com … 本文15px／行送り27px／ヘッダー79px／コンテンツ 1260px・900px
     GARDEN www.garden-hair.jp … コンテンツ1296px／ヘッダー70px／見出しは英字40px
     ZACC www.zacc.co.jp        … コンテンツ1110px／ヘッダー157px
     OCEAN TOKYO oceantokyo.com … コンテンツ1400px／ヘッダー57px

   🔴 現行サイトの書体は端末依存になっている（実測）
     指定＝"ヒラギノ明朝 Pro W3", Hiragino Mincho Pro, YuMincho, 游明朝体, "Yu Mincho", "ＭＳ Ｐ明朝"
     ＝ Mac はヒラギノ明朝／Windows は游明朝 or MS P明朝 で、別の書体で表示されている。
     リニューアルでは Web フォント（Shippori Mincho）を配って端末差をなくす。
     明朝であること自体は KINGDOM様の資産（競合3社はいずれも角ゴシック）なので変えない。
   ══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#222222;        /* ワイヤーの墨。本番の本文は #666666（現行実測） */
  --mut:#5f5f5f;
  --line:#c9c9c9;
  --line2:#9a9a9a;
  --paper:#ffffff;
  --band:#f2f2f2;
  --wm:#ebebeb;         /* 透かし文字 */

  /* ★余白：現行の実測 1260px を軸にする（GARDEN 1296 / ZACC 1110 の中間でもある） */
  --maxw:1260px;
  --pad:clamp(20px,6.25vw,90px);
  --sec:clamp(64px,8vw,120px);
  --band-inset:clamp(0px,6vw,90px);

  /* ★見出しは小さく、英字が主役・和文が従（GARDEN の h2 40px 英字を軸に、明朝で受ける） */
  --fs-wm:clamp(52px,12vw,170px);      /* 巨大な英字透かし */
  --fs-en:clamp(24px,2.6vw,38px);      /* 欧文見出し・ラベル */
  --fs-ja:clamp(19px,2.1vw,30px);      /* 和文ステートメント */
  --fs-ja-sub:12px;
  --fs-body:15px;                      /* 現行実測 15px */
  --fs-cap:13px;
  --fs-small:12px;

  /* 書体：和文＝明朝（KINGDOM様の資産）／欧文＝Baskervville（明朝と相性の良いセリフ） */
  --ff-ja:"Shippori Mincho","Noto Serif JP","ヒラギノ明朝 Pro W3","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-en:"Baskervville","Times New Roman",serif;
  --ff-gothic:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
html{overflow-x:hidden}
body{background:var(--paper);color:var(--ink);
  font-family:var(--ff-ja);
  font-size:var(--fs-body);line-height:1.8;
  word-break:auto-phrase;line-break:strict;-webkit-font-smoothing:antialiased}
/* 実測：コンテンツ1066px ＋ 左右マージン180px ＝ 外形1426px。
   border-box では max-width に padding が含まれるため、外形で指定する */
.inner{max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:var(--sec)}

/* 帯：全幅にせず左右を内側に寄せる（＝動きを作る装置） */
.band{background:var(--band);margin-inline:var(--band-inset)}

/* ── 書体（本番実測）───────────────── */
/* ★2026-08-21 岩田さん指示：見出しの字間を詰める。
   参考サイトは 欧文.20em/和文.16em だが、本番 chorule-hair.com の実測は −0.02em（詰め）。
   「現行本番を軸にする」決裁に合わせ、本番側へ戻す */
.en{font-family:var(--ff-en);font-weight:400;letter-spacing:.04em;line-height:1.1}
.ja{font-family:var(--ff-ja);font-weight:400;letter-spacing:-.01em}
h1,h2,h3{font-weight:400;line-height:1.2}
h1 .en,h2 .en{display:block;font-size:var(--fs-en)}
h1 .ja,h2 .ja{display:block;font-size:var(--fs-ja);line-height:1.85;margin-top:.5em}
.sub{font-size:var(--fs-ja-sub);letter-spacing:.04em;color:var(--mut)}
p{max-width:32em}
.cap{font-size:var(--fs-cap);line-height:1.85;color:var(--mut);text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.9;color:var(--mut);text-wrap:pretty}

/* ── ヘッダー（実測 130px）───────────── */
.hdr{position:fixed;top:0;left:0;right:0;height:96px;z-index:50;
  display:flex;align-items:center;background:rgba(255,255,255,.94)}
.hdr .bar{width:100%;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.hdr .logo{font-size:16px;letter-spacing:.02em}
.hdr nav ul{display:flex;gap:clamp(14px,2vw,32px);list-style:none;font-size:13px;letter-spacing:.02em}
.hdr nav li{white-space:nowrap}   /* ナビ項目は折らない */
.hdr .util{background:var(--ink);color:#fff;padding:14px 24px;font-size:12px;letter-spacing:.04em;
  min-height:48px;display:flex;align-items:center;border-radius:35px}
.hdr .burger{display:none;align-items:center;gap:6px;font-size:13px;min-height:48px}
body{padding-top:96px}
/* ══════════════════════════════════════════════════════════
   スマホ：左右の余白を仕様どおり 20px にし、写真を大きく使う
   ★12.5vw のままだと 375px で 46.9px になり、設計仕様表の「SP 20px」と食い違う。
     帯の内側寄せ（9vw＝33.75px）も重なって、写真が 131px まで縮んでいた。
   ★この案件は写真の質で見せる設計。スマホでは写真の枠を画面いっぱいに使う。
   ══════════════════════════════════════════════════════════ */
@media(max-width:899px){
  :root{
    --pad:20px;
    --band-inset:0px;      /* 帯は全幅に。内側へ寄せる余裕はスマホには無い */
  }
  /* 写真を並べる枠は左右の余白を食って画面いっぱいに（断ち切り） */
  .ktiles{margin-inline:calc(var(--pad) * -1);gap:2px}
  /* ★ヒーローとページ頭の写真は、親（grid）が padding を持たないので元から全幅。
     負マージンを足すと 20px はみ出す（実測 395>375）。足さないのが正しい。 */
}

@media(max-width:899px){
  .hdr{height:60px}body{padding-top:60px}
  .hdr nav,.hdr .util{display:none}.hdr .burger{display:flex}
}

/* ── 画像枠＝対角線 ───────────────── */
figure.ph{margin:0}
.ph{border:1px solid var(--line2);background:
  linear-gradient(to top right,transparent 49.6%,var(--line2) 49.8%,var(--line2) 50.2%,transparent 50.4%),
  linear-gradient(to top left, transparent 49.6%,var(--line2) 49.8%,var(--line2) 50.2%,transparent 50.4%),#f6f6f6;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#3c3c3c;font-size:12px;padding:10px;line-height:1.7}

/* ── ヒーロー：左に小さい文字・右の写真は画面右端まで ── */
.hero{padding-block:0;position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,624fr) minmax(0,801fr);align-items:center}
.hero__grid>*{min-width:0}
.hero__copy{padding-left:var(--pad);padding-right:clamp(20px,4vw,64px)}
.hero__ph{height:520px}
/* 巨大な英字透かし：写真の下端に重ね、画面幅を超えて流す（実測 195px・幅3120px） */
/* 巨大な英字透かし：ヒーローの下端をまたいで流す。写真が上に重なる＝画像と背景の組み合わせ */
.wmband{position:relative;overflow:hidden;height:calc(var(--fs-wm) * .62);margin-top:calc(var(--fs-wm) * -.42)}
/* 透かしは DOM のテキストではなく CSS の装飾にする（読ませる文字ではないため） */
.wmband::before{content:"KINGDOM　hair salon　KINGDOM　hair salon";
  position:absolute;left:0;top:calc(var(--fs-wm) * -.26);
  font-family:var(--ff-en);font-size:var(--fs-wm);line-height:1;letter-spacing:.04em;
  color:var(--wm);white-space:nowrap;pointer-events:none;user-select:none}
.hero__grid{position:relative;z-index:2}
@media(max-width:899px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:32px}
  .hero__copy{padding-inline:var(--pad)}
  /* ★スマホでも「右端まで断ち切り」を守る（左20pxのインデントを外した）。
     この案件は写真の質で見せる設計なので、写真を余白で削らない */
  .hero__ph{height:auto;aspect-ratio:4/5;margin-left:0}
  .wmband{height:calc(var(--fs-wm) * .5);margin-top:calc(var(--fs-wm) * -.3)}
}


/* ── 下層のページヘッダー＝上部に画像を置く（2026-08-21 岩田さん指示）──
   もともと「下層は写真で押す型ではない」としてヒーロー画像を置いていなかったが、
   KINGDOM様はスタイル写真が各店から継続的に供給される（掲載サイト連携で自動取り込み）ため、下層でも写真を主役にできる。
   ただしトップの写真だけは新規撮影が要る（台帳 DECISIONS.csv の素材列＝撮影）。
   ★トップと同じ強さにしない。高さで階層差を出す（トップ568px → 二階層420px → 三階層340px）。
   ★二階層と三階層で構造を変える：
     二階層＝見出し左・写真は画面右端まで断ち切り（回遊のハブなので強く）
     三階層＝全幅の横長1枚（該当145件で最多＝量産テンプレなので構造を単純に保つ） */
.phead{padding-block:0}
.phead__grid{display:grid;grid-template-columns:minmax(0,520fr) minmax(0,905fr);align-items:end}
.phead__grid>*{min-width:0}
.phead__copy{padding-left:var(--pad);padding-right:clamp(20px,3.4vw,56px);
  padding-block:clamp(32px,4.5vw,72px)}
.phead__ph{height:clamp(260px,29vw,420px)}
.phead__crumb{font-size:var(--fs-small);color:var(--mut);margin-bottom:clamp(20px,3vw,40px)}
@media(max-width:899px){
  .phead__grid{grid-template-columns:minmax(0,1fr)}
  .phead__copy{padding-inline:var(--pad);padding-bottom:24px}
  .phead__ph{height:auto;aspect-ratio:16/10;margin-left:var(--pad)}
}
/* 三階層：全幅の横長1枚。帯と同じく左右を内側に寄せて、全幅ベタにしない */
.phead--wide{padding-block:0}
.phead--wide .phead__ph{height:clamp(200px,23vw,340px);margin-inline:var(--band-inset)}
.phead--wide .phead__copy{padding-inline:var(--pad);padding-block:clamp(28px,4vw,60px) clamp(24px,3vw,44px)}
@media(max-width:899px){
  .phead--wide .phead__ph{height:auto;aspect-ratio:16/9;margin-inline:0}
}

/* ── ボタン ─────────────────────── */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:13px 26px;white-space:nowrap;
  border:1px solid var(--ink);font-size:12px;letter-spacing:.04em;background:var(--paper);color:var(--ink);
  text-decoration:none;border-radius:35px}  /* 本番実測：ピル35px が2箇所実在 */
.btn--fill{background:var(--ink);color:#fff}
.arrow{width:36px;height:36px;border:1px solid var(--line2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--mut);flex:0 0 auto}

/* ── 章：縦組みラベルは【右端】（実測 left1187 / 英35px＋和12px）── */
/* ★auto 列だと縦組みラベルの実幅と噛み合わず、親を4pxはみ出す（1440pxで実測）。
   max-content にすると中身の実幅で確定する */
.sec{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:clamp(24px,4vw,64px);align-items:start}
.sec>*{min-width:0}
/* ★縦組みは、字送りの分だけ実幅が max-content より大きくなる（実測 38.5px の列に 41px）。
   width:max-content を明示して、列幅を中身の実寸で確定させる */
.vlabel{writing-mode:vertical-rl;display:flex;gap:14px;align-items:flex-start;white-space:nowrap;
  letter-spacing:.06em;width:max-content}
/* ★縦組みラベルは WebKit だけ行ボックスが宣言より大きくなる（2026-09-01 実測・20件）。
   .en の line-height:1.1 だと箱が 41.8px で確定するのに、実際のグリフ箱は 46px。
   Chromium は line-height に丸めるので気づけない。行送りを広げて箱を実寸より大きくする。 */
.vlabel .en{font-size:var(--fs-en);line-height:1.35}
.vlabel .sub{font-size:var(--fs-ja-sub)}
@media(max-width:899px){
  .sec{grid-template-columns:minmax(0,1fr);gap:20px}
  .sec>.vlabel{order:-1;writing-mode:horizontal-tb;flex-direction:column;gap:4px;white-space:normal}
  .vlabel .en{font-size:20px;letter-spacing:.04em}
}

/* ── ブランドカード：均一に並べず段差をつける ── */
.brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
.brands .brand:nth-child(even){margin-top:clamp(28px,4vw,64px)}   /* ★偶数列を下げて動きを作る */
@media(max-width:899px){
  .brands{grid-template-columns:minmax(0,1fr)}
  .brands .brand:nth-child(even){margin-top:0}
}
.brand{background:var(--paper);padding:clamp(20px,2.2vw,32px);position:relative;min-width:0}
.brand .ph{aspect-ratio:3/2;margin-bottom:20px}
.brand .en{display:block;font-size:17px;letter-spacing:.02em}
.brand .sub{display:block;margin-top:4px}
.brand .arrow{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px)}

/* ── 「次がある」＝罫線の目盛り（幅と上端を段階的に広げる＝階段）── */
.steps{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.steps>div{border-right:1px solid var(--line);padding:0 clamp(16px,2vw,28px) 40px;min-width:0}
.steps>div:last-child{border-right:none}
.steps>div{padding-top:28px}
.steps .en{display:block;font-size:14px;letter-spacing:.06em;color:var(--mut);margin-bottom:4px}
.steps b{display:block;font-weight:400;font-size:17px;letter-spacing:-.01em;margin-bottom:10px}
@media(max-width:899px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps>div{border-right:none;border-bottom:1px solid var(--line);padding:24px 0!important}
  .steps>div:last-child{border-bottom:none}
}


/* ── 募集要項・会社概要＝「項目→内容」の表（読み上げのため table + th scope）──
   ★table は min-content 未満に縮まないので、狭幅では行組みに落とす（Chromium の
     word-break:auto-phrase は min-content を文節幅まで押し上げ、横溢れの原因になる） */
table.dl{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:24px;border-top:1px solid var(--line)}
table.dl th,table.dl td{text-align:left;font-weight:400;vertical-align:top;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;overflow-wrap:break-word}
table.dl th{width:38%;padding-right:16px;color:var(--mut)}
@media(max-width:640px){
  table.dl,table.dl tbody,table.dl tr,table.dl th,table.dl td{display:block;width:auto}
  table.dl th{border:0;padding:14px 0 2px;color:var(--mut);font-size:12px}
  table.dl td{padding:0 0 14px}
}

/* ── 定義リスト ───────────────────── */
.dl{border-top:1px solid var(--line)}
.dl .row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;
  padding:22px 0;border-bottom:1px solid var(--line)}
.dl dt{color:var(--mut);font-size:13px;letter-spacing:.02em}
@media(max-width:899px){.dl .row{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ── お知らせ ─────────────────────── */
.news{border-top:1px solid var(--line)}
.news .row{display:grid;grid-template-columns:140px minmax(0,1fr) 36px;gap:24px;align-items:center;
  padding:24px 0;border-bottom:1px solid var(--line)}
.news time{font-size:13px;color:var(--mut);letter-spacing:.02em}
@media(max-width:899px){
  .news .row{grid-template-columns:minmax(0,1fr) 36px;gap:8px}
  .news .row time{grid-column:1/-1}
}

/* ── 全面バナー：文字は右下に寄せる（中央に置かない）── */
.banner{position:relative;min-height:460px;display:grid;align-items:end;justify-items:end}
.banner .ph{position:absolute;inset:0}
.banner .on{position:relative;z-index:1;background:rgba(255,255,255,.9);
  padding:clamp(24px,3vw,40px);max-width:440px;margin:0 clamp(20px,6vw,120px) clamp(28px,4vw,64px) 0}
/* ★スマホでは .on（白 90%%）が帯のほぼ全面を覆うため、
   画像枠の中央に置いた注記が白の下に透けて文字と重なる（2026-09-01 実測・20件）。
   注記を上端へ逃がす。本番では写真なので起きないが、ワイヤーは読めないと意味がない。 */
@media(max-width:899px){
  .banner{min-height:340px}
  .banner .ph{align-items:flex-start;padding-top:12px}
}

/* ── フッター ─────────────────────── */
.ftr{padding-block:var(--sec)}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:40px}
.ftr ul{list-style:none;font-size:13px;line-height:2.4}
/* ★keep-all を掛けない。WebKit では分割点が無くなり、2列のフッターで
   項目が列幅を9px超える（375px で実測）。基底の auto-phrase＋line-break:strict に任せる */
.ftr li{text-wrap:pretty}
.ftr h2{font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--mut);margin-bottom:12px;
  font-family:var(--ff-en)}
@media(max-width:899px){.ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* 375px では2列でも入りきらないので1列にする（タップ領域も稼げる） */
@media(max-width:479px){.ftr__grid{grid-template-columns:minmax(0,1fr);gap:26px}}

code{font-family:ui-monospace,Menlo,monospace;font-size:.94em;overflow-wrap:anywhere}
/* .nw の中では code も折らない（break-all が nowrap に勝ってしまうため明示的に戻す） */
.nw code{overflow-wrap:normal;word-break:normal;white-space:nowrap}
/* 短い括弧書きは括弧ごと折らない（WebKit は line-break:strict でも「（」を行末に落とす） */
.nw{white-space:nowrap}
.todo{border:1px dashed var(--line2);background:#f0f0f0;padding:18px 20px;font-size:12px;color:#3c3c3c;line-height:1.9}

/* ── フォーム ─────────────────────── */
.form{max-width:640px}
.form label{display:block;font-size:13px;letter-spacing:.02em;margin-bottom:8px}
.form .field{border:1px solid var(--line);min-height:48px;padding:13px 16px;margin-bottom:24px;
  font-size:14px;color:var(--mut);background:var(--paper)}
.steps-bar{display:flex;gap:12px;font-size:12px;letter-spacing:.04em;color:var(--mut);margin-bottom:36px}
.steps-bar b{color:var(--ink);font-weight:400}

/* ── SP追従CTA ────────────────────── */
.sticky{display:none}
@media(max-width:899px){
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);color:#fff;min-height:56px;align-items:center;justify-content:center;
    font-size:13px;letter-spacing:.04em}
  body{padding-bottom:56px}
}

/* ── 注記バッジ（ワイヤー用・本番では消す）── */
.mk{display:inline-block;background:var(--ink);color:#fff;font-size:11px;
  padding:3px 10px;margin-bottom:16px;letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════
   KINO 連動枠（2026-08-22 追加）
   実線の箱 ＝ 人が作って入れるもの（作り直さないと変わらない）
   破線の箱 ＝ KINO が外から取ってきて自動で描くもの
              （ホットペッパービューティー／Google ビジネスプロフィール／
                LINE ／ サロンからの投稿）。ページを触らずに中身が入れ替わる。
   ★ワイヤーの規律どおり配色は墨のみ。区別は「線種」だけでつける。
   ══════════════════════════════════════════════════════════════ */
.kino{position:relative;border:1px dashed var(--line2);border-left:3px solid var(--ink);
  background:var(--paper);padding:clamp(20px,2.2vw,30px);margin-top:22px}
.kino::before{content:"AUTO";position:absolute;top:-8px;left:16px;background:var(--paper);
  padding:0 9px;font-size:10px;letter-spacing:.22em;color:var(--ink);line-height:1}
.band .kino{background:var(--band)}
.band .kino::before{background:var(--band)}
.kino__ttl{display:block;font-size:14px;letter-spacing:.02em;line-height:1.6}
.kino__src{display:block;font-size:11.5px;line-height:1.9;color:var(--mut);margin-top:6px;text-wrap:pretty}
.kino__src b{color:var(--ink);font-weight:400}
.kino .ph{margin-top:16px}
.kino .small{margin-top:10px}

/* 自動で並ぶタイル（スタイル・作品・日々の投稿） */
.ktiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:16px}
.ktiles .ph{aspect-ratio:3/4;margin:0;font-size:11px}  /* ★10px は極小文字の閾値を割る。注記でも下限は守る */
@media(max-width:899px){.ktiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ktiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ブログ・お知らせの一覧は記事なので横長。作品タイル（3:4）と役割が違う */
.ktiles--news .ph{aspect-ratio:3/2}
@media(max-width:899px){.ktiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 絞り込みチップ（スタイルを長さ・メニューで絞る） */
.kchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.kchips span{border:1px solid var(--line2);padding:7px 14px;font-size:11.5px;line-height:1.5;
  min-height:34px;display:inline-flex;align-items:center}

/* クーポン（左に金額・右に条件） */
.kcpn{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:16px;
  border-top:1px solid var(--line)}
.kcpn>div{border-bottom:1px solid var(--line);padding:14px 0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline}
.kcpn .nm{font-size:13px;line-height:1.7}
.kcpn .pr{font-size:14px;white-space:nowrap}
/* ★狭い幅では、名前が折れて金額だけ右上に浮く。縦に積んで読ませる（375px で実測） */
@media(max-width:599px){
  .kcpn>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .kcpn .pr{justify-self:start}
}

/* 上部の処理中ティッカー＋最終同期 */
.ktick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:12px;font-size:11.5px;color:var(--mut)}
.ktick .dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.ktick .sync{margin-left:auto}

/* チャットの起動ボタン（全ページ右下・固定） */
.kfab{position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(14px,2.4vw,34px);z-index:40;
  border:1px solid var(--ink);background:var(--paper);padding:13px 20px;font-size:12px;
  letter-spacing:.04em;min-height:48px;display:inline-flex;align-items:center;gap:9px}
.kfab::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
/* ★スマホでは下部にCTAバー（.sticky・高さ56px・z-index:60）が出るため、
   チャットのボタンがその裏に隠れていた（岩田さん指摘 2026-08-22）。
   バーの上へ逃がし、重なり順も前に出す。 */
@media(max-width:899px){
  .kfab{bottom:calc(56px + 12px);z-index:61}
}

/* 口コミ（引用＋出所） */
.kquote{border-left:2px solid var(--ink);padding-left:18px;margin-top:16px}
.kquote p{font-size:15px;line-height:1.95}
.kquote .meta{font-size:11.5px;color:var(--mut);margin-top:8px}

/* 出勤カレンダー（3ヶ月） */
.kcal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:16px}
@media(max-width:899px){.kcal{grid-template-columns:minmax(0,1fr)}}
.kcal .m{border:1px solid var(--line)}
.kcal .mh{font-size:11.5px;text-align:center;padding:7px 0;border-bottom:1px solid var(--line)}
.kcal .g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;padding:8px}
/* 未設定と出勤の差が見えないと、カレンダーに見えない（375px で実測） */
.kcal .g i{aspect-ratio:1/1;background:#ededed;font-style:normal;border:1px solid #e2e2e2}
.kcal .g i.o{background:#9d9d9d;border-color:#9d9d9d}

/* ══════════════════════════════════════════════════════════════
   KINGDOM様 固有の部品（2026-09-01 追加）
   台帳 DIRECTORY_MAP.csv の構造から必要になったものだけを足している。
   ══════════════════════════════════════════════════════════════ */

/* ── 5店舗の選び分け：偶数グリッドに5枚は入らない。
      1枚を大きく（旗艦＝青山本店）＋4枚を小さく並べて、段差で動きを作る ── */
.salons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.salons>.salon{background:var(--paper);padding:clamp(18px,2vw,28px);position:relative;min-width:0}
.salons>.salon .ph{aspect-ratio:3/2;margin-bottom:18px}
.salons>.salon:first-child{grid-column:1/-1}
.salons>.salon:first-child .ph{aspect-ratio:21/9}
.salons>.salon:nth-child(odd):not(:first-child){margin-top:clamp(20px,3vw,44px)}
.salon .en{display:block;font-family:var(--ff-en);font-size:19px;letter-spacing:.02em}
.salon .sub{display:block;margin-top:4px}
/* ★矢印は右下に絶対配置している。住所が長い店（Ley by KINGDOM＝3行）で文字が矢印の下に潜る。
   2026-09-01 の重なり検査で 5店中5店・全幅で検出した。右側に矢印ぶんの余白を空ける。 */
.salon .meta{display:block;font-size:12px;color:var(--mut);margin-top:10px;line-height:1.9;
  padding-right:52px;padding-bottom:6px}
.salon .arrow{position:absolute;right:clamp(14px,1.8vw,24px);bottom:clamp(14px,1.8vw,24px)}
@media(max-width:899px){
  .salons{grid-template-columns:minmax(0,1fr)}
  .salons>.salon:nth-child(odd):not(:first-child){margin-top:0}
}

/* ── 料金表：メニュー名と金額の2列。金額だけ折らない（長文に nowrap を掛けない）── */
.price{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:20px;border-top:1px solid var(--ink)}
.price th,.price td{text-align:left;font-weight:400;vertical-align:top;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:14px;overflow-wrap:break-word}
.price td.y{width:8em;text-align:right;white-space:nowrap}   /* ★nowrap は金額の列だけ */
.price .note{display:block;font-size:11.5px;color:var(--mut);line-height:1.85;margin-top:4px}
@media(max-width:599px){.price td.y{width:6.5em}}

/* ── 記事本文：4,676ページが流れる型。読み物なので幅を絞る ── */
.article{max-width:720px}
.article h2{font-size:20px;margin:44px 0 14px;padding-left:14px;border-left:3px solid var(--ink);line-height:1.6}
.article p{max-width:none;margin-bottom:22px;font-size:15px;line-height:2}
.article .ph{aspect-ratio:16/9;margin:28px 0}
.artmeta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12px;color:var(--mut);
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:32px}
.artmeta .tag{border:1px solid var(--line2);padding:4px 12px;line-height:1.5}

/* ── 働き方の2択（新卒／中途）：大きく2枚。これ以上増やさない ── */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:40px}
.ways>div{border:1px solid var(--ink);padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;
  gap:14px;min-height:260px;background:var(--paper)}
.ways .en{font-family:var(--ff-en);font-size:clamp(20px,2.2vw,30px);letter-spacing:.04em;line-height:1.2}
.ways b{font-weight:400;font-size:17px;letter-spacing:-.01em}
.ways .cap{margin-bottom:auto}
@media(max-width:699px){.ways{grid-template-columns:minmax(0,1fr)}}
/* ★4職種のように .ways を2段に分けて並べるとき用。
   インラインで grid-template-columns を書くと @media より強く、
   375px でカードが114pxまで潰れる（2026-09-01 実測・55件）。クラスで持つ。 */
.ways--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.ways--pair + .ways--pair{margin-top:clamp(16px,2.4vw,32px)}
@media(max-width:699px){.ways--pair{grid-template-columns:minmax(0,1fr)}
  .ways--pair + .ways--pair{margin-top:clamp(16px,2.4vw,32px)}}
/* 職種カードは中身が短い。最低の高さを下げて、縦に間延びさせない */
.ways--pair>div{min-height:190px}
/* URL の見本は長い。折り返しを許す（.cap は既定で text-wrap:pretty のみ） */
.ways .cap{overflow-wrap:anywhere}

/* ── 選考フロー：横並びの番号つき。矢印は CSS で描く（画像にしない）── */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:28px;
  border-top:1px solid var(--ink)}
.flow>div{border-right:1px solid var(--line);padding:22px clamp(12px,1.5vw,20px) 30px;min-width:0}
.flow>div:last-child{border-right:none}
.flow .n{display:block;font-family:var(--ff-en);font-size:22px;color:var(--mut);line-height:1;margin-bottom:10px}
.flow b{display:block;font-weight:400;font-size:14px;letter-spacing:-.01em;margin-bottom:8px}
@media(max-width:899px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow>div{border-right:none;border-bottom:1px solid var(--line);padding:18px 0}
  .flow>div:last-child{border-bottom:none}
}

/* ── 職安法の明示事項が入る枠（採用ページ専用・空欄を可視化する）── */
.legalbox{border:1px solid var(--ink);padding:clamp(18px,2vw,28px);margin-top:32px}
.legalbox>.ttl{display:block;font-size:13px;letter-spacing:.04em;margin-bottom:6px}
.legalbox>.lead{display:block;font-size:11.5px;color:var(--mut);line-height:1.9;margin-bottom:14px}

/* ── 店舗の切り替えタブ（一覧を5店で絞る）── */
.stabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.stabs span{border:1px solid var(--line2);padding:9px 16px;font-size:12px;line-height:1.5;
  min-height:40px;display:inline-flex;align-items:center}
.stabs span.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── スタイリスト一覧（カード）── */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:24px}
.people>div{min-width:0}
.people .ph{aspect-ratio:3/4;margin-bottom:10px}
.people b{display:block;font-weight:400;font-size:14px;letter-spacing:-.01em}
.people .sub{display:block;margin-top:2px}
@media(max-width:899px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2人だけ並べるとき（記事の執筆者など）。インラインで書かない */
.people--pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}

/* ══════════════════════════════════════════════════════════════
   AI に読ませるための設計（LLMO / AIO / AEO / GEO / SEO）
   2026-09-01 追加。ワイヤーの段階で「このページが何を機械に渡すか」を明示する。
   ★見た目の部品ではなく仕様の注記なので、墨の細い枠で本文と区別する。
   ══════════════════════════════════════════════════════════════ */

/* このページが持つ構造化データ */
.schema{border:1px solid var(--line2);border-top:2px solid var(--ink);
  padding:14px 16px;margin-top:26px;background:var(--paper)}
.band .schema{background:var(--band)}
.schema>.ttl{display:block;font-size:11px;letter-spacing:.18em;color:var(--ink);
  margin-bottom:8px;font-family:var(--ff-en)}
.schema code{font-size:12px;background:#f0f0f0;padding:2px 7px;margin:0 4px 5px 0;
  display:inline-block;line-height:1.6;border:1px solid #e2e2e2}
.schema .note{display:block;font-size:11.5px;line-height:1.9;color:var(--mut);margin-top:8px}

/* よくあるご質問（AEO・AIO の本体。機械には FAQPage として渡す） */
.faq{border-top:1px solid var(--ink);margin-top:22px}
.faq>div{border-bottom:1px solid var(--line);padding:18px 0}
.faq .q{display:block;font-size:15px;line-height:1.7;letter-spacing:-.01em}
.faq .q::before{content:"Q　";font-family:var(--ff-en);color:var(--mut)}
.faq .a{display:block;font-size:13.5px;line-height:1.95;color:var(--mut);margin-top:8px}
.faq .a::before{content:"A　";font-family:var(--ff-en)}

/* 定義文（AI が最初の一段落をそのまま引用する。冒頭に置く） */
.define{border-left:3px solid var(--ink);padding:2px 0 2px 18px;margin-top:22px}
.define p{font-size:15px;line-height:2;max-width:40em}
.define .lbl{display:block;font-size:11px;letter-spacing:.18em;color:var(--mut);
  font-family:var(--ff-en);margin-bottom:8px}

/* 記事の署名（誰が書いたか・いつ直したか＝E-E-A-T） */
.byline{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:12px;
  color:var(--mut);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin:26px 0}
.byline b{color:var(--ink);font-weight:400}