/* ══════════════════════════════════════════════════════════
   front-default.css — default テンプレート用の上書きCSS

   もとは front/templates/default/_base.html の中に <style> で
   直接書いていたもの。19,945バイトのうち8,441バイトがCSSで、
   ページのソースを開くと丸ごと見えていたため外に出した。

   読み込み順に意味がある:
     1. front.css          … 共通の土台（ピンク基調）
     2. front-default.css  … これ。白地に黒文字へ寄せる上書き
     3. custom.css         … 店舗ごとの調整。ここが最後に勝つ

   front.css は触っていないので、この1行を外せば元の見た目に戻る。
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   default テンプレートの「素」化。
   front.css の色は 125箇所が var(--color-*) 参照なので、
   ここで変数を白黒に置き換えるだけで全ページが素になる。
   front.css 自体は触っていないので、この <style> を消せば元に戻る。
   新しい店舗はこのテンプレートを複製して、ここに色を入れるところから始める。
   ══════════════════════════════════════════════════════════ */
:root{
  --color-primary:       #111111;
  --color-primary-dark:  #000000;
  --color-primary-light: #EAEAEA;
  --color-primary-pale:  #F7F7F7;
  --color-accent:        #666666;
  --color-beige:         #F7F7F7;
  --color-beige-dark:    #DDDDDD;
  --color-bg:            #FFFFFF;
  --color-bg-card:       #FFFFFF;
  --color-text:          #111111;
  /* 補助文字は白地でも読める濃さにする。
     #999999 だとコントラスト比 2.85 で、11〜12px の日付・カナ・空状態の文言が
     かすんで読めなかった。#555/#767676 なら 7.46 / 4.54 で階層も保てる。 */
  --color-text-2:        #555555;
  --color-text-3:        #767676;
  --color-border:        #DDDDDD;
  --color-border-light:  #EAEAEA;
  --radius:              0px;
  --radius-sm:           0px;
  --radius-lg:           0px;
  --shadow:              none;
  --shadow-hover:        none;

  /* バッジ。
     以前はここで .f-staff-badge{background:#111} のように最終色を
     直接上書きしていた。front.css との上書き合戦になり、
     店舗の custom.css はさらに強い指定を書かないと勝てなかった。
     front.css 側を変数化したので、ここは値を差し替えるだけでよい。
     出てくる色は以前とまったく同じ。 */
  --badge-bg:       #111111;
  --badge-fg:       #FFFFFF;
  --badge-new-bg:   #111111;
  --badge-new-fg:   #FFFFFF;
  --badge-pick-bg:  #FFFFFF;
  --badge-pick-fg:  #111111;
  --badge-pick-bd:  #111111;
  --badge-work-bg:  #666666;
  --badge-work-fg:  #FFFFFF;
  --badge-radius:   0px;

  /* タイプ・ランクのタグ（--tag-bg / --tag-fg）はここでは触らない。
     front.css の既定が var(--color-primary-light) / var(--color-primary-dark) で、
     その2つは上で白黒に差し替えてあるので自動的に付いてくる。 */
}
/* front.css で var() を使わず直接色を書いている数少ない箇所。
   変数の置き換えだけでは残ってしまうので個別に潰す。 */
.f-staff-badge.pickup  { background:var(--badge-pick-bg); color:var(--badge-pick-fg);
                         border:1px solid var(--badge-pick-bd); }
.f-staff-time          { color:#111111; }
.f-detail-sch-time     { color:#111111; }
.f-badge-gray          { background:#F7F7F7; color:#666666; }
.f-footer              { background:#111111; }
.f-staff-placeholder,
.f-ranking-placeholder { background:#F7F7F7; }
/* ページ見出し帯。front.css は「ピンクのグラデ地に白文字」なので、
   背景だけ白に変えると白地に白文字になって見出しが丸ごと消える。
   （実際にそうなっていた）文字色も必ず一緒に戻す。 */
.f-page-hero, .f-hero        { background:#FFFFFF; border-bottom:1px solid #DDDDDD; color:#111111; }
.f-page-hero::before         { display:none; }
.f-page-hero-title, .f-hero-title { color:#111111; }
.f-page-hero-sub, .f-hero-sub     { color:#555555; opacity:1; }
/* パンくずの区切り「/」と順位番号。どちらも front.css では
   --color-border(#DDDDDD) 相当で、白地だとほぼ見えない。 */
.f-breadcrumb span           { color:#BBBBBB; }
.f-rank-num                  { color:#111111; }
.f-rank-num.top1,
.f-rank-num.top2,
.f-rank-num.top3             { color:#111111; }
.f-form-input:focus,
.f-form-textarea:focus { box-shadow:0 0 0 2px rgba(17,17,17,0.12); }
.f-staff-card:hover    { transform:none; box-shadow:none; border-color:#111111; }
.f-staff-card:hover .f-staff-img { transform:none; }

/* 見出しは英日併記。下に1本だけ黒罫を引く。 */
.f-section-title{
  font-size:12px; font-weight:700; letter-spacing:.14em;
  color:#111111; display:flex; align-items:baseline; gap:9px;
}
.f-section-title .jp{ font-size:10.5px; font-weight:400; letter-spacing:.06em; color:#666666; }
.f-section-head{ border-bottom:1px solid #111111; padding-bottom:7px; margin-bottom:14px; }

/* ── 本文の横幅 ──────────────────────────────
   もとはテンプレートに style="max-width:800px" のように直接書いていた。
   直接書くと店舗ごとの custom.css から変えられない（インラインが必ず勝つ）ので、
   ここに出した。値は今までと同じなので、既定テーマの見え方は変わらない。
   横幅を見出し帯に合わせたい店舗は、その店舗の custom.css で
   .f-narrow / .f-narrow-sm / .f-article を上書きする。 */
.f-narrow{max-width:800px;}
.f-narrow-sm{max-width:640px;}
.f-article{max-width:760px;margin:0 auto;}

/* 埋め込み枠（partials/embed_slot.html）のPC/SP出し分け。
   embed_slot は1ページに複数回 include されるので、CSSはここに1回だけ置く。 */
.f-embed-slot{width:100%;margin:0 auto 16px;text-align:center;}
.f-embed-slot img{max-width:100%;height:auto;}
.f-embed-sp{display:none;}
@media(max-width:767px){
  .f-embed-pc{display:none;}
  .f-embed-sp{display:block;}
}

/* 絞り込みバー。staff_list.html は .f-filter-group / -label / -btns を使っているのに
   front.css には .f-filter-bar と .f-filter-btn しか定義が無く、
   タイプ・コースの絞り込みが素の状態で並んでいた。 */
.f-filter-bar{
  display:flex; flex-wrap:wrap; gap:14px 22px;
  padding:12px 14px; margin-bottom:18px;
  background:#F7F7F7; border:1px solid #DDDDDD; border-radius:0;
}
.f-filter-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.f-filter-label{
  font-size:10.5px; letter-spacing:.08em; color:#666666;
  white-space:nowrap; flex-shrink:0;
}
.f-filter-btns{display:flex; flex-wrap:wrap; gap:5px;}
.f-filter-btn{
  font-size:11.5px; line-height:1;
  padding:5px 11px; border:1px solid #DDDDDD; background:#FFFFFF;
  color:#666666; border-radius:0; white-space:nowrap;
}
.f-filter-btn:hover{border-color:#111111; color:#111111; background:#F7F7F7;}
/* 選択中は黒ベタ＋白文字。
   front.css の .f-filter-btn.active は background:var(--color-primary) を持っている。
   ここで color だけ黒に変えて background を書き忘れると、黒地に黒文字になって
   チップが真っ黒な四角に見える（実際にそうなっていた）。背景も必ず一緒に指定する。 */
.f-filter-btn.active{background:#111111; border-color:#111111; color:#FFFFFF; font-weight:700;}
.f-filter-btn.active:hover{background:#111111; color:#FFFFFF;}
.f-filter-clear{border-style:dashed; color:#777777; background:#FFFFFF;}
.f-filter-clear:hover{border-color:#111111; color:#111111; background:#FFFFFF;}

/* 検索フォーム */
.f-search-form{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.f-search-input{
  font-size:12px; line-height:1; padding:6px 9px;
  border:1px solid #DDDDDD; background:#FFFFFF; color:#111111;
  border-radius:0; width:170px; max-width:100%; font-family:inherit;
}
.f-search-input:focus{outline:none; border-color:#111111;}
.f-search-btn{
  font-size:11.5px; line-height:1; padding:6px 12px;
  border:1px solid #111111; background:#111111; color:#FFFFFF;
  border-radius:0; font-family:inherit; font-weight:700;
}

/* 件数と一括解除 */
.f-list-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.f-list-count{font-size:13px; font-weight:700; color:#111111; font-variant-numeric:tabular-nums;}
.f-list-count-sub{font-size:11px; font-weight:400; color:#666666;}
.f-clear-all{font-size:11.5px; color:#666666; text-decoration:underline; text-underline-offset:2px;}
.f-clear-all:hover{color:#111111;}

/* ── スタッフカードの情報行（partials/staff_card.html） ──
   front/staff_list.php は順位・スリーサイズ・ランク・SNS・出勤予定まで
   全部渡していたのに、カード側に受け口が無く名前とキャッチコピーしか出ていなかった。 */
.f-staff-info{display:flex;flex-direction:column;gap:4px;padding:10px 11px 12px;}
.f-staff-name-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.f-staff-name{margin:0;}
.f-staff-age{font-size:11px;color:#666666;font-variant-numeric:tabular-nums;}
.f-staff-kana{margin:0;}
.f-staff-ranks{display:flex;flex-wrap:wrap;gap:4px;}
.f-staff-rankbadge{
  font-size:9.5px;font-weight:700;letter-spacing:.03em;
  border:1px solid #111111;color:#111111;background:#FFFFFF;
  padding:1px 6px;white-space:nowrap;
}
.f-staff-sizes{
  font-size:11px;color:#111111;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.f-staff-rank{font-size:11px;letter-spacing:.12em;line-height:1;}
.f-staff-rank .on{color:#111111;}
.f-staff-rank .off{color:#C4C4C4;}
.f-staff-catch{
  font-size:11px;color:#666666;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.f-staff-ics{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:#666666;}
.f-staff-ics .ic{display:inline-flex;width:13px;height:13px;}
.f-staff-ics .ic svg{width:100%;height:100%;display:block;}
.f-staff-sched{
  display:flex;align-items:center;gap:4px;
  font-size:11px;color:#666666;
  border-top:1px solid #EAEAEA;padding-top:6px;margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.f-staff-sched.today{color:#111111;font-weight:700;}
.f-staff-sched svg{flex-shrink:0;}
/* 詳細ページのSNSボタン内アイコン */
.f-sns-ic{display:inline-flex;width:13px;height:13px;flex-shrink:0;}
.f-sns-ic svg{width:100%;height:100%;display:block;}
/* バッジを2つ以上出すための並び。front.css の .f-staff-badge は absolute 単体前提だった。
   right と flex-wrap は、文言を店舗が変えられるようにした時に足したもの
   （「入店1ヶ月未満」のように長くなると、カードの外へ突き抜けていた）。
   ⚠ 並びの指定はこのファイルが持つ。front.css 側に同じものを書かないこと。 */
.f-staff-badges{position:absolute;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:4px;z-index:2;}
.f-staff-badges .f-staff-badge{position:static;top:auto;left:auto;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── ヘッドライン（告知バー）のティッカー ── */
.hl-ticker{width:100%;overflow:hidden;}
.hl-ticker-inner{max-width:1200px;margin:0 auto;height:40px;display:flex;align-items:center;justify-content:center;padding:0 16px;white-space:nowrap;position:relative;overflow:hidden;}
.hl-item{font-size:13px;text-decoration:none;white-space:nowrap;display:inline-block;letter-spacing:.02em;}
a.hl-item{text-decoration:none;}
.hl-ticker-inner.hl-marquee{display:block;}
.hl-ticker-inner.hl-marquee .hl-flow{display:inline-block;white-space:nowrap;animation:hlFlow 18s linear infinite;}
.hl-ticker-inner.hl-marquee .hl-item{display:inline-block;margin-right:40px;}
.hl-ticker-inner.hl-marquee .hl-sep{opacity:.4;margin-right:40px;}
@keyframes hlFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hlSlideUp{from{transform:translateY(120%);opacity:0}to{transform:translateY(0);opacity:1}}
.hl-blink .hl-item{animation:hlBlinkA 1.4s ease-in-out infinite;}
@keyframes hlBlinkA{0%,100%{opacity:1}50%{opacity:.35}}

/* ══════════════════════════════════════════════════════════
   カードの変種（2026-09-08）

   partials/staff_card_ribbon.html … 札を写真の角に斜めのリボンで
   partials/staff_card_band.html   … 名前を写真の下端に重ねた帯で

   使っていないサイトには影響しない（.sc-ribbon / .sc-band が出ないため）。
   色はすべて既存のバッジ変数を経由しているので、custom.css の :root を
   差し替えれば基本形と同じ色づかいのまま形だけ変わる。
   ══════════════════════════════════════════════════════════ */

/* ── リボン型 ── */
.sc-ribbon .f-staff-img-wrap{overflow:hidden;}
.sc-rb{position:absolute;top:12px;width:120px;text-align:center;z-index:2;
       font-size:10px;font-weight:700;letter-spacing:.04em;line-height:20px;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
       pointer-events:none;box-shadow:0 1px 5px rgba(0,0,0,.28);}
.sc-rb-l{left:-34px;transform:rotate(-45deg);
         background:var(--badge-new-bg);color:var(--badge-new-fg);}
.sc-rb-r{right:-34px;transform:rotate(45deg);
         background:var(--badge-pick-bg);color:var(--badge-pick-fg);
         box-shadow:inset 0 0 0 1px var(--badge-pick-bd),0 1px 5px rgba(0,0,0,.28);}
/* PICKUP は基本形と同じ「枠線タイプ」にそろえる。
   既定テーマは白黒なので、両方を塗りにすると NEW と見分けが付かない（実測で確認）。 */
.sc-work{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;
         display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
         background:var(--badge-work-bg);color:var(--badge-work-fg);
         font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;
         pointer-events:none;}
.sc-work i{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* ── 帯型 ── */
.sc-bd{position:absolute;left:0;right:0;bottom:0;z-index:2;
       display:flex;align-items:baseline;gap:6px;
       padding:18px 10px 7px;color:#fff;pointer-events:none;
       background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.35) 55%,rgba(0,0,0,0));}
.sc-bd-nm{font-size:14px;font-weight:700;line-height:1.25;min-width:0;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-bd-age{font-size:11px;font-weight:600;opacity:.92;flex-shrink:0;}
.sc-bd-age::after{content:'歳';font-size:9px;margin-left:1px;}
.sc-bd-info{padding-top:8px;}