@charset "UTF-8";
/* =============================================================
   niau group 全サイト共通 ｜ components.css ｜ 再利用する部品（ヘッダー・ボタン・表・行組み等）
   ★ここはサイト横断の正本。ページ固有の並びは各サイトの pages.css に置く
   ============================================================= */

/* ── レイアウトの器 ───────────────────
   実測：コンテンツ1066px ＋ 左右マージン180px ＝ 外形1426px。
   border-box では max-width に padding が含まれるため外形で指定する。 */
.inner{max-width:calc(var(--maxw) + var(--pad) * 2);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}

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

/* ── ヘッダー ───────────────────── */
.hdr{
  position:fixed;inset:0 0 auto 0;height:var(--hdr-pc);z-index:50;
  display:flex;align-items:center;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(6px);
}
.hdr__bar{width:100%;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
/* ★ロゴもリンク。タップ領域 48×48px 以上（2026-08-21 実測で 29px だった） */
.hdr__logo{font-family:var(--ff-en);font-size:16px;letter-spacing:.02em;
  display:inline-flex;align-items:center;min-height:48px}
.hdr__nav ul{display:flex;gap:clamp(14px,2vw,32px);font-size:13px;letter-spacing:.02em}
.hdr__nav li{white-space:nowrap}
.hdr__nav a{padding-block:14px;display:inline-block;min-height:var(--tap);
  display:inline-flex;align-items:center}
.hdr__nav a:hover{border-bottom:1px solid currentColor}
.hdr__burger{display:none;align-items:center;gap:6px;font-size:13px;min-height:var(--tap)}
body{padding-top:var(--hdr-pc)}

@media (max-width:899px){
  .hdr{height:var(--hdr-sp)}
  body{padding-top:var(--hdr-sp)}
  .hdr__nav{display:none}
  .hdr__burger{display:inline-flex}
  /* ★375px で「niau group RECRUIT」「PHOTO STUDIO」が2行に折れ、
     中身86px がヘッダー枠64px から11px はみ出していた（2026-08-21 実測）。
     ロゴは折り返さず、入らなければ字を詰める。 */
  .hdr__bar{gap:10px;min-width:0}
  .hdr__logo{white-space:nowrap;font-size:14px;letter-spacing:0;
    overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
  .hdr__bar > .btn{flex:0 0 auto;padding-inline:16px;font-size:12px}
}
@media (max-width:400px){
  .hdr__logo{font-size:12.5px}
  .hdr__bar > .btn{padding-inline:12px}
}

/* ── ボタン ─────────────────────
   ★アクセント面に白文字は #F25E5E だと 3.21:1 で AA 不合格。
     白文字を載せる面は --accent-cta（#C64D4D・4.60:1）を使う。tokens.css 参照。 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--tap);padding:13px 26px;white-space:nowrap;
  border:1px solid var(--ink);border-radius:var(--radius-pill);
  background:var(--paper);color:var(--ink);
  font-size:13px;letter-spacing:.04em;
  max-width:100%;   /* ★長いラベルが親を超えないように（2026-08-21 実測で16px超過） */
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{background:var(--ink);color:#fff}
.btn--fill{background:var(--ink);color:#fff}
.btn--fill:hover{background:var(--paper);color:var(--ink)}
.btn--cta{background:var(--accent-cta);border-color:var(--accent-cta);color:#fff}
/* 狭幅では長いラベルを折り返す。nowrap のままだと親を超える */
@media (max-width:520px){
  .btn{white-space:normal;text-align:center;line-height:1.6;padding-block:12px}
}
.btn--cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.arrow{
  width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--mut);flex:0 0 auto;
}

/* SPの追従CTA。1つだけに絞る（増やすと押されない） */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--accent-cta);color:#fff;
  min-height:56px;align-items:center;justify-content:center;
  font-size:15px;letter-spacing:.04em;
}
@media (max-width:899px){
  .sticky-cta{display:flex}
  body{padding-bottom:56px}
}

/* ── 章のラベル（縦組み・右端）──────────
   実測 global-sports：左1187px＝右端に置く。欧文35px＋和文12px。 */
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);align-items:start}
.sec-grid>*{min-width:0}
.vlabel{writing-mode:vertical-rl;display:flex;gap:14px;align-items:flex-start;
  white-space:nowrap;letter-spacing:.06em}
.vlabel .en{font-size:var(--fs-en)}
@media (max-width:899px){
  .sec-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .sec-grid>.vlabel{order:-1;writing-mode:horizontal-tb;flex-direction:column;
    gap:4px;white-space:normal}
  .vlabel .en{font-size:20px;letter-spacing:.04em}
}

/* ── 画像 ─────────────────────
   実素材が入ったら .ph（枠）を .ph-img（<img>）に置き換える。
   ★2026-08-21：現行サイトとHPBから元画像を取得して差し替え済み。
     素材が無いもの（図解・リール・未撮影）だけ .ph--dummy＝グレーで残す（岩田さん指示）。 */
.ph-img{display:block;width:100%;background:#EDEDED}

/* ★高さが固定されている枠（ヒーロー・下層のページヘッダー）に入る画像は、
   自前の aspect-ratio ではなく【枠を埋める】。
   2026-08-21 実測の事故：aspect-ratio:3/4 の img を高さ568pxの枠に入れ、
   画像が1079pxになって **511px はみ出し**、次のセクションに重なっていた。
   （design-audit【7】は横方向のはみ出ししか見ないため素通りした） */
.hero__ph,.phead__ph{overflow:hidden}
.hero__ph > img,
.phead__ph > img{
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover;
  display:block;
}

/* 素材が無い箇所のダミー。対角線は引かず、無地のグレーにする */
.ph--dummy{
  border:1px solid var(--line);
  background:#E6E6E6 !important;
  color:#7A7A7A;
}
.ph{
  border:1px solid var(--line-2);
  background:
    linear-gradient(to top right,transparent 49.6%,var(--line-2) 49.8%,var(--line-2) 50.2%,transparent 50.4%),
    linear-gradient(to top left, transparent 49.6%,var(--line-2) 49.8%,var(--line-2) 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;position:relative;z-index:2}
.hero__grid>*{min-width:0}
.hero__copy{padding-left:var(--pad);padding-right:clamp(20px,4vw,64px)}
.hero__ph{height:var(--h-hero)}
@media (max-width:899px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:32px}
  .hero__copy{padding-inline:var(--pad)}
  .hero__ph{height:auto;aspect-ratio:4/5;margin-left:var(--pad)}
}

/* 巨大な英字透かし：読ませる文字ではないので CSS の装飾として持つ */
.wmband{position:relative;overflow:hidden;
  height:calc(var(--fs-wm) * .62);margin-top:calc(var(--fs-wm) * -.42)}
.wmband::before{
  content:"niau group　RECRUIT　niau group";
  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:#EBEBEB;white-space:nowrap;pointer-events:none;user-select:none;
}
@media (max-width:899px){
  .wmband{height:calc(var(--fs-wm) * .5);margin-top:calc(var(--fs-wm) * -.3)}
}

/* ── 下層のページヘッダー ──────────────
   2026-08-21 岩田さん指示で下層にも写真を置く。
   ★トップと同じ強さにしない。高さで階層差を出す。 */
.phead{padding-block:0}
.phead__grid{display:grid;grid-template-columns:minmax(0,620fr) minmax(0,805fr);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:var(--h-phead)}
.phead__crumb{font-size:var(--fs-small);color:var(--mut);margin-bottom:clamp(20px,3vw,40px)}
/* ★パンくずと本文中のリンクもタップ領域 48px 以上にする（BASICS §6）。
   2026-08-21 実測で 16px しかなく不合格だった。行間ではなく当たり判定で確保する。 */
.phead__crumb a{display:inline-flex;align-items:center;min-height:48px;min-width:48px}
/* ★パンくずは節ごとに .nw（nowrap）を当て、区切り「＞」でだけ折る。
   WebKit は word-break:auto-phrase 未対応で語中でも折り、1文字孤立が出る（2026-08-21 実測） */
.lp p a:not(.btn),
.inner p a:not(.btn):not(.hdr__logo){display:inline-flex;align-items:center;min-height:48px;
  text-decoration:underline;text-underline-offset:3px}
@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:var(--h-phead-wide);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}
}

/* ── 数値の行組み ──────────────────
   ★レンジ（¥190,000〜240,000）は「大きな数字1つ」ではない。
     3枚のタイルに押し込むと2行に折れて高さが揃わない（2026-08-21 実測で崩れを確認）。
     行組みなら桁数が変わっても崩れない。 */
.figs{border-top:1px solid var(--ink)}
.figs .row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,3vw,48px);align-items:baseline;
  padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line);
}
.figs dt{font-size:14px;color:var(--mut)}
.figs dd{font-family:var(--ff-en);font-size:clamp(20px,2.4vw,30px);
  white-space:nowrap;text-align:right}
.figs dd .unit{font-family:var(--ff-body);font-size:max(12px,.5em);color:var(--mut);margin-left:.3em}
.figs dd .tilde{font-family:var(--ff-body);font-size:.7em;margin-inline:.1em}
.figs dd .note{display:block;font-family:var(--ff-body);font-size:11.5px;
  color:var(--mut);white-space:normal;line-height:1.8;margin-top:6px;text-align:right}

/* ★注記の行（.row--note）は dd を流用しているので nowrap を解除する。
   解除しないと注記1本が637px の1行になり、ページごと横スクロールする
   （2026-08-22 実測：全幅・全ページで 501 件）。数字の nowrap は残す。 */
.figs .row--note{grid-template-columns:minmax(0,1fr);padding-top:0;border-bottom:0}
.figs .row--note dd{white-space:normal;text-align:left;
  font-family:var(--ff-body);font-size:12.5px;color:var(--mut);line-height:1.9}
.figs .row--note + .row{border-top:1px solid var(--line)}
@media (max-width:599px){
  .figs .row{grid-template-columns:minmax(0,1fr)}
  .figs dd{text-align:left}
  .figs dd .note{text-align:left}
  /* ★狭幅では単位だけ折り返せるようにする（数字は nowrap のまま）。
     長い単位（例「拠点／美容室3店・フォトスタジオ2拠点」）が dd を3px超えていた（2026-08-21 実測） */
  .figs dd .unit{white-space:normal}
}

/* ── 定義表（募集要項・会社概要）──────────
   「項目→内容」の表なので table＋th scope。読み上げの意味が正しくなる。
   ★table は min-content 未満に縮まない。Chromium の auto-phrase が
     min-content を文節幅まで押し上げて横溢れするので、狭幅では行組みに落とす。 */
table.dl{width:100%;table-layout:fixed;margin-top:24px;border-top:1px solid var(--line)}
table.dl th,table.dl td{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;font-size:12px}
  table.dl td{padding:0 0 14px}
}

/* ── 賞与の3値（最高・平均・最小をセットで見せる）──────
   ★職安法C項：最高額だけを切り出さない。母数と時点を必ず併記する。 */
.bonus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:28px}
.bonus>div{background:var(--paper);padding:22px 16px 26px;min-width:0;text-align:center}
.bonus .lb{display:block;font-size:12px;color:var(--mut);letter-spacing:.04em}
.bonus .n{display:block;font-family:var(--ff-en);font-size:clamp(22px,3.4vw,34px);
  line-height:1.15;margin-top:8px;white-space:nowrap}
.bonus .mid{background:var(--band)}
@media (max-width:560px){.bonus{grid-template-columns:minmax(0,1fr)}}

/* ── 4職種の入口 ─────────────────── */
.tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tracks>a{background:var(--paper);padding:clamp(22px,2.6vw,36px);min-width:0;
  display:block;position:relative;transition:background var(--dur) var(--ease)}
.tracks>a:hover{background:var(--band)}
.tracks figure{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--band);line-height:0;margin:0 0 16px}
.tracks figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:top center;display:block}
.tracks .en{display:block;font-family:var(--ff-en);font-size:12px;color:var(--mut);margin-bottom:6px}
.tracks b{display:block;font-weight:400;font-size:19px;letter-spacing:-.01em;margin-bottom:10px}
.tracks .arrow{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px)}
@media (max-width:899px){.tracks{grid-template-columns:minmax(0,1fr)}}

/* ── キャリアの段（社員→業務委託→フリーランス→店内独立）──
   ★2026-08-21 岩田さん指示：右肩下がりの段差をつけない。全部同じ高さ・同じ幅。 */
.career{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.career>div{border-right:1px solid var(--line);padding:22px clamp(14px,1.8vw,26px) 36px;min-width:0}
.career>div:last-child{border-right:none}
.career .st{font-family:var(--ff-en);font-size:12px;letter-spacing:.06em;color:var(--mut)}
.career b{display:block;font-weight:400;font-size:16px;letter-spacing:-.01em;margin:6px 0 8px}
@media (max-width:899px){
  .career{grid-template-columns:minmax(0,1fr)}
  .career>div{border-right:none;border-bottom:1px solid var(--line);padding:20px 0}
  .career>div:last-child{border-bottom:none}
}

/* ── 選考フロー ─────────────────
   ★同じ高さ・同じ幅（段差なし）。2026-08-21 岩田さん指示。 */
.flow{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.flow--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.flow--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.flow>div{background:var(--paper);padding:20px 14px 24px;min-width:0}
.flow .st{font-family:var(--ff-en);font-size:13px;color:var(--mut)}
.flow b{display:block;font-weight:400;font-size:15px;margin:8px 0 6px}
@media (max-width:860px){.flow--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.flow--5,.flow--3{grid-template-columns:minmax(0,1fr)}}

/* ── Q&A（★4.7 図解ファースト：ピクトグラム＋カード）── */
.qa{border-top:1px solid var(--line)}
.qa .row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;
  padding:22px 0;border-bottom:1px solid var(--line)}
.qa .ic{width:44px;height:44px;border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--ff-en);font-size:15px;color:var(--mut)}
.qa .q{font-size:15px;margin-bottom:10px}
.qa .a{font-size:14px;color:var(--mut);line-height:1.95}

/* ── 不規則グリッド（1点だけ大きく抜く・サイズを揃えない）── */
.mosaic{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:20px;align-items:start}
.mosaic>*{min-width:0}
@media (max-width:699px){.mosaic{grid-template-columns:minmax(0,1fr)}}

/* ── リール（9:16）───────────────── */
.reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.reels>div{min-width:0}
.reels .ph{aspect-ratio:9/16;margin-bottom:10px}
@media (max-width:899px){.reels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── フッター ───────────────────── */
.ftr{background:var(--ink);color:#fff;padding-block:clamp(48px,6vw,80px)}
.ftr a{color:#fff}
/* ★4枚均等に並べない（テンプレ臭になる）。ブランド列を広く取って非対称にする */
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.9fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px) clamp(24px,4vw,72px)}
.ftr__grid>*{min-width:0}
.ftr h2{font-family:var(--ff-en);font-size:12px;letter-spacing:.1em;
  color:rgba(255,255,255,.66);margin-bottom:14px}
/* ★タップ領域は 48×48px 以上・間隔8px以上（BASICS §6）。
   32px にしていて実測で10件が不合格だった（2026-08-21） */
.ftr li{font-size:13px}
.ftr li a{display:inline-flex;align-items:center;min-height:48px;min-width:48px;padding-block:4px}
@media (max-width:899px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__grid>*:first-child{grid-column:1/-1}}
@media (max-width:520px){.ftr__grid{grid-template-columns:minmax(0,1fr)}}

/* ── スクロールで現れる（控えめに）────────── */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* =============================================================
   画像タイルの規格（★みんなのサイトで確定した仕様を移植）
   出典＝99_CLIENTS/minnano_LIM/site/assets/site-styles.js
   2026-08-21 岩田さん指示「スタイリストやヘアスタイル画像のサイズが均一になっていない。
   これは以前みんなのサイトで散々やって改善した部分」

   決まりは4つ：
     1. 枠（カード）自身を 3:4 に固定する ＝ 全タイルが同寸になる
     2. 画像は inset:0 で四辺に密着させ、width/height とも 100%
        （height:auto だとサブピクセルの隙間が出て不揃いに見える）
     3. object-fit:cover ＝ 白い余白ゼロ。object-position:top center ＝ 削るのは「下」だけ
        （顔は上寄りで保護される）
     4. 隙間は 4px 均一
   ★1点だけ大きく抜く不規則グリッドはこの規格と両立しないので使わない。
   ============================================================= */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  width:100%;
  align-items:start;
}
@media (max-width:900px){.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tile{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;          /* ★枠自身を固定＝全タイル同寸 */
  margin:0;
  overflow:hidden;
  background:var(--band);
  line-height:0;
  min-width:0;
}
.tile > img{
  position:absolute;
  inset:0;                   /* ★四辺に密着＝白帯ゼロ */
  display:block;
  width:100%;
  height:100%;               /* ★height:auto のサブピクセル隙間を解消 */
  aspect-ratio:auto;
  object-fit:cover;          /* ★枠を必ず覆う */
  object-position:top center;/* ★削るのは下だけ・顔を守る */
  margin:0;
  transition:transform .6s ease;
}
.tile:hover > img{transform:scale(1.05)}
@media (prefers-reduced-motion: reduce){.tile:hover > img{transform:none}}

/* 比率の派生（人物は3:4のまま。横位置の写真だけ 4:3） */
.tile--43{aspect-ratio:4/3}
.tile--11{aspect-ratio:1/1}
.tile--169{aspect-ratio:16/9}

/* ── KINO クーポン（みんなと同じ class 名・同じ形）────────── */
.coupon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:24px}
@media (max-width:700px){.coupon-grid{grid-template-columns:minmax(0,1fr)}}
.coupon-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0;
  border:1px solid var(--line);background:var(--paper);min-width:0;
  transition:background var(--dur) var(--ease)}
.coupon-card:hover{background:var(--band)}
.coupon-card.no-photo{grid-template-columns:minmax(0,1fr)}
.coupon-photo{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--band)}
.coupon-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.coupon-body{padding:14px 16px 16px;min-width:0}
.coupon-badge{display:inline-block;font-size:11px;border:1px solid var(--line-2);
  color:var(--mut);padding:2px 8px;margin-bottom:8px}
.coupon-name{font-size:13.5px;line-height:1.75}
.coupon-price{font-family:var(--ff-en);font-size:clamp(18px,2vw,22px);margin-top:8px}
.coupon-cta{font-size:12px;color:var(--mut);margin-top:10px}

/* ★<figure> の直後に文字が来るときの最低余白。
   .ph（枠）を <img> に差し替えた際、.ph に付けていた margin-bottom が
   figure に効かず【0px 密着】になった箇所があった（2026-08-21 実測）。
   個別指定が無くても最低 12px は空ける。 */
figure + b, figure + span, figure + p, figure + h3, figure + .small{
  display:block;
  margin-top:12px;
}

/* -----------------------------------------------------------
   ロゴ（★正式ロゴデータを使う。テキスト代用をやめた 2026-08-21）
   現行サイトの実データ ＝ _assets/logo/
   高さで揃える。幅は原比のまま伸ばす（ロゴは潰さない）
   ----------------------------------------------------------- */
.hdr__logo img{display:block;height:34px;width:auto;max-width:min(46vw,240px);object-fit:contain}
@media (max-width:899px){ .hdr__logo img{height:28px} }
@media (max-width:400px){ .hdr__logo img{height:24px} }

/* -----------------------------------------------------------
   アクセント（★60-30-10 の 10。承認済み ART_DIRECTION を実装へ戻した）
   --accent     … 文字を載せない面・罫・記号のみ
   --accent-cta … 白文字を載せる面（コントラスト実測で AA を確認した色）
   ----------------------------------------------------------- */
.vlabel .en{color:var(--accent)}
.shead .en,h2 .en{color:var(--accent)}
.figs .row dt::before{background:var(--accent)}
.hdr__nav a[aria-current="page"]{border-bottom:2px solid var(--accent)}
.hdr__nav a:hover{border-bottom:1px solid var(--accent)}
.lead-rule{border:0;border-top:2px solid var(--accent);width:56px;margin:0 0 22px}
.num{color:var(--accent)}

/* -----------------------------------------------------------
   KINO 連動枠の場所取り（★CLS 対策・2026-08-21 実測で追加）
   -----------------------------------------------------------
   API から差し込まれるまで空なので、埋まった瞬間に下のタイルが押し下がる。
   実測 CLS 0.149〜0.176（基準 0.1 超）。:empty のあいだだけ箱を確保する。
   4列・タイル3:4 なので R 行ぶんの比は 3 : R。
   ----------------------------------------------------------- */
.kino-inline:empty{display:block;aspect-ratio:3 / var(--kino-rows, 1);
  background:var(--band);width:100%}
@media (max-width:899px){ .kino-inline:empty{aspect-ratio:2 / var(--kino-rows-sp, 2)} }

/* -----------------------------------------------------------
   生成ページの部品（2026-08-22 追加）
   ★スクリーンショットを見て、.cards が素の文字列で並んでいたのに気づいた。
     部品を新しく使うときは、CSS があるかを先に確かめる。
   ----------------------------------------------------------- */

/* 回遊カード ------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-top:clamp(24px,3vw,40px)}
.card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px) clamp(62px,5vw,72px);
  background:var(--paper);color:inherit;text-decoration:none;
  transition:background .25s ease}
.card:hover{background:var(--band)}
.card .en{font-family:var(--ff-en);font-size:12px;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;line-height:1.4}
.card .ja{font-size:15px;line-height:1.7}
.card .arrow{position:absolute;left:clamp(20px,2.2vw,28px);bottom:clamp(16px,1.8vw,22px);
  width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-en);font-size:13px;color:var(--mut);
  transition:border-color .25s ease,color .25s ease}
.card:hover .arrow{border-color:var(--accent);color:var(--accent)}
@media (max-width:599px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .card{padding-bottom:62px}
}

/* 番号付きの箇条（採用の「重視するポイント」）--------------- */
.pts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-top:clamp(24px,3vw,40px)}
.pt{display:flex;align-items:center;gap:14px;min-width:0;
  padding:clamp(20px,2.2vw,26px);background:var(--paper);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.pt .num{font-family:var(--ff-en);font-size:20px;color:var(--accent);line-height:1.2;
  flex:0 0 auto;align-self:center}
.pt a{font-size:15px;line-height:1.8;min-height:48px;display:inline-flex;align-items:center}
@media (max-width:599px){ .pts{grid-template-columns:minmax(0,1fr)} }

/* Q&A（dl 形式）-------------------------------------------- */
dl.qa{border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,40px)}
dl.qa dt{font-size:15px;line-height:1.8;padding:clamp(20px,2.2vw,26px) 0 10px;
  border-top:1px solid var(--line)}
dl.qa dt:first-of-type{border-top:0}
dl.qa dt::before{content:"Q";font-family:var(--ff-en);color:var(--accent);
  margin-right:.7em;font-size:14px}
dl.qa dd{font-size:14px;color:var(--mut);line-height:1.95;
  margin:0 0 clamp(18px,2vw,24px);padding-left:1.9em;text-indent:-1.9em}
dl.qa dd::before{content:"A";font-family:var(--ff-en);color:var(--ink);
  margin-right:.7em;font-size:14px}

/* リード直前の短い罫（アクセント）--------------------------- */
.lead-rule{border:0;border-top:2px solid var(--accent);width:56px;margin:0 0 22px}

/* 文章を値の列に置く行。★nowrap は金額（.num）だけに限る。
   長文を nowrap にすると dt の列が幅0に潰れ、項目名が縦一列になる（2026-08-22 実測） */
.figs .row--text{grid-template-columns:minmax(140px,220px) minmax(0,1fr);align-items:start}
.figs .row--text dd{white-space:normal;text-align:left;
  font-family:var(--ff-body);font-size:14px;line-height:1.95;color:var(--ink)}
@media (max-width:699px){
  .figs .row--text{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ページヘッダーの和文見出し（★1文字孤立の対策・2026-08-22 実測）
   「ハイライトショート」が「ハイライトショー／ト」に割れていた。
   balance で行を均し、狭い帯だけ級数を落とす。 */
/* ★keep-all を足さない（2026-08-22）。
   keep-all は和文の連なりを1語にするので、入りきらないと overflow-wrap が
   任意の位置で切り、最後の1文字が落ちる（「ハイライトショー／ト」）。
   base.css の word-break:auto-phrase（文節で折る）＋ line-break:strict（禁則）に任せれば、
   「所沢プロぺ通り店の／メニュー。」のように意味の切れ目で折れ、句点も孤立しない。 */
.phead h1 .ja{text-wrap:balance;overflow-wrap:break-word}
/* ★keep-all だと語が1つなので text-wrap:balance は効かない。入りきらないと
   overflow-wrap が最後の1文字を落とす（「ハイライトショー／ト」）。
   だから「入る級数」を実測から決める。内寸 ÷ 最長11文字 が上限。 */
.phead h1 .ja{font-size:clamp(21px,2.4vw,33px)}
@media (max-width:1279px){ .phead h1 .ja{font-size:28px} }
@media (max-width:1099px){ .phead h1 .ja{font-size:23px} }
@media (max-width:899px){  .phead h1 .ja{font-size:clamp(21px,4.6vw,27px)} }