@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   松戸激安どっと娘む — 店舗専用スタイル

   読み込み順は front.css → front-default.css → このファイル。
   後から当てて上書きする作りなので、ここでは打ち消しと追加だけを書く。

   方針：現行サイト（www.ma-gekiyasu.com）の見た目をそのまま残し、
         作りだけ可変（レスポンシブ）にする。

   現行から引き継いだ値（画像からピクセル実測）
     赤 #F83232 ／ 黄 #FFF800 ／ 青 #2CACDD ／ 紫 #D432F9
     背景ピンク #FED3FF ／ 背景水色 #E5FFFF
     出勤カード staffbg.png 224×437 の帯位置
     カバーガール 542×565 の配置
   ══════════════════════════════════════════════════════════════ */

:root{
  --red:      #F83232;
  --red-dark: #D51F1F;
  --yellow:   #FFF800;
  --blue:     #2CACDD;
  --purple:   #D432F9;
  --pink:     #FED3FF;
  --cyan:     #E5FFFF;
  --ink:      #333333;
  --ink-2:    #777777;
  --line:     #E7D9E9;

  --mg-wrap: 1200px;
  --mg-gap:  14px;

  /* 和文 M PLUS 1p ／ 欧文 Barlow Condensed。
     和文は 900 だと小さい字で画が潰れるので 700〜800 まで。
     欧文は縦長なので、同じ幅を出すには文字サイズを大きめに取る。 */
  --jp: "M PLUS 1p","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --en: "Barlow Condensed","M PLUS 1p",sans-serif;
}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--jp);
  font-size:14px;line-height:1.7;color:var(--ink);
  background:linear-gradient(180deg,var(--cyan) 0%,var(--pink) 45%,var(--pink) 100%) fixed;
  padding-bottom:56px;
}
@media(min-width:900px){ body{padding-bottom:0} }
body img{max-width:100%;height:auto}

.mg-wrap{max-width:var(--mg-wrap);margin:0 auto;padding:0 10px}

/* 共通テンプレートのヘッダーは使わないので、残っていても出さない */
.f-header,.f-nav{display:none!important}

/* ── ページ見出し ───────────────────────────── */
.mg-h1{
  max-width:var(--mg-wrap);margin:10px auto 0;padding:0 10px;
  font-size:12px;font-weight:400;color:var(--ink-2);text-align:center;
}

/* ── ユーティリティ帯 ───────────────────────── */
.mg-util{background:#fff;border-bottom:1px solid var(--line)}
.mg-util .mg-wrap{display:flex;gap:12px;align-items:center;min-height:30px;font-size:11px;color:var(--ink-2)}
.mg-util-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-util a{margin-left:auto;color:var(--blue);font-weight:500;white-space:nowrap;text-decoration:none}

/* ── ヘッダー ──────────────────────────────── */
.mg-head{
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.85) 2px, transparent 2.5px) 0 0/14px 14px,
    linear-gradient(135deg,#FFE3F6 0%,#FFF3FB 40%,#E9FBFF 100%);
  border-bottom:4px solid var(--red);
}
.mg-head .mg-wrap{display:grid;gap:12px;padding-top:12px;padding-bottom:12px}
@media(min-width:900px){
  .mg-head .mg-wrap{grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:20px}
}
.mg-logo{display:block;max-width:620px;margin:0 auto;text-decoration:none}
.mg-logo img{width:100%;height:auto;display:block}
.mg-logo-txt{
  display:block;text-align:center;font-weight:800;color:var(--red);
  font-size:clamp(24px,6vw,40px);line-height:1.2;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.16);
}
.mg-ribbon{
  background:var(--red);color:#fff;text-align:center;
  font-weight:700;font-size:clamp(11px,2.9vw,15px);letter-spacing:.02em;
  padding:6px 10px;border-radius:4px;box-shadow:0 2px 0 var(--red-dark);
  margin:8px auto 0;max-width:620px;
}
.mg-info{
  background:rgba(255,255,255,.72);
  border:2px solid var(--red);border-radius:10px;
  padding:10px 12px;text-align:center;
}
.mg-area{
  display:inline-block;background:var(--red);color:#fff;
  font-weight:700;font-size:12px;letter-spacing:.02em;
  border-radius:4px;padding:2px 10px;margin-bottom:6px;white-space:pre-line;
}
.mg-hours{font-weight:500;font-size:15px;letter-spacing:.02em}
.mg-hours b{color:var(--red);font-weight:700}
.mg-tel{
  display:block;font-family:var(--en);font-weight:700;
  font-size:clamp(36px,11vw,54px);line-height:1.1;letter-spacing:.02em;
  color:var(--red);text-decoration:none;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.14);
  margin:2px 0 0;
}
.mg-tel2{font-size:clamp(28px,8vw,40px)}
.mg-tel-label{display:block;font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.mg-note{margin:4px 0 0;font-size:11px;color:var(--ink-2);line-height:1.55}

/* ── アイコンメニュー ───────────────────────────
   現行は menu01〜08.jpg（150×122の画像8枚）。
   画像をやめてアイコンはSVG、文字は本物の文字にした。
   色は --c ひとつで決まるので、項目が増減しても作り直しが要らない。 */
.mg-gnav{background:#fff;border-bottom:3px solid var(--red)}
.mg-gnav .mg-wrap{padding:0}
/* 項目数は機能ON/OFFで変わる（8〜10個）。列数を固定すると余りが出るので
   auto-fit にして、何個でも1行に均等に並ぶようにしている。
   88px 下限＝スマホ390pxで4列、PCでは全項目が1行。 */
.mg-gnav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.mg-gnav li{border-right:1px solid #F0EAF1;border-bottom:1px solid #F0EAF1}
.mg-gnav a{
  --c:var(--red);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 3px 8px;height:100%;text-decoration:none;
  background:
    radial-gradient(circle at 3px 3px, rgba(214,180,214,.28) 1.1px, transparent 1.3px) 0 0/9px 9px,
    #fff;
  transition:background-color .12s,transform .12s;
}
.mg-gnav a:hover{transform:translateY(-1px);background-color:#FFF7FB}
.mg-gnav a[aria-current="page"]{background-color:#FFEDEF}
.mg-gnav svg{width:clamp(26px,7vw,36px);height:auto;color:var(--c);display:block}
.mg-gnav .jp{
  /* 900 は 12px 前後で画が潰れる。700 でも十分に目立つ */
  font-size:clamp(11px,3.1vw,15px);font-weight:700;line-height:1.2;
  color:var(--c);letter-spacing:.04em;white-space:nowrap;
}
.mg-gnav .en{
  font-family:var(--en);font-weight:600;
  font-size:clamp(8px,2.2vw,11px);line-height:1;
  color:var(--c);opacity:.85;letter-spacing:.12em;white-space:nowrap;
}

/* ハンバーガーとモバイルメニューは出さない。
   アイコンメニューがスマホでも全項目を4列で出すので、二重になる。 */
.f-hamburger,.f-mobile-menu{display:none!important}

/* ── 見出し（英字＋小さい日本語）─────────────────
   現行は newstitle.png のような画像。文字にすると幅で伸縮でき、
   見出しを変えるたびに画像を作り直さなくてよくなる。
   Barlow Condensed は縦長なので、現行と同じ幅になるまで級数を上げている。 */
.mg-head-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.mg-head-row .en{
  font-family:var(--en);font-weight:800;
  font-size:clamp(30px,8vw,56px);line-height:1;letter-spacing:.03em;
  color:var(--red);
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.16);
}
.mg-head-row .en.sm{font-size:clamp(22px,3.8vw,36px)}
.mg-head-row .jp{font-size:clamp(12px,3vw,15px);font-weight:700;color:var(--ink);letter-spacing:.02em}
.mg-head-row.on-color .en{color:#fff;-webkit-text-stroke:0;text-shadow:0 3px 0 rgba(0,0,0,.22)}
.mg-head-row.on-color .jp{color:#fff}
.mg-more{
  margin-left:auto;display:inline-block;background:#fff;color:var(--ink);
  border:2px solid currentColor;border-radius:6px;text-decoration:none;
  padding:4px 12px;font-size:12px;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.mg-more:hover{background:#fffbe6}

.mg-empty{
  background:rgba(255,255,255,.75);border-radius:6px;
  padding:18px;text-align:center;font-size:12px;color:var(--ink-2);
}
.mg-empty.on-color{background:rgba(255,255,255,.9)}

/* ── メインスライダー ───────────────────────── */
.mg-hero{padding:14px 0}
.mg-hero-frame{
  border:5px solid var(--red);border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.12);
  /* スライダー側の変数。赤枠いっぱいに広げ、下の余白も無くす */
  --slider-max-width:100%;
  --slider-radius:0;
  --slider-gap:0px;
}
/* ここで img に display を書かないこと。
   banner_slider.php は .bn-img-pc / .bn-img-sp を display で出し分けているので、
   あとから display:block を当てるとPCでもスマホ用画像まで出てしまう。 */
.mg-hero-frame .bn-slider-wrap{padding:0;position:relative}
/* 点は写真の上に重ねる。下に白い帯を作らないため */
.mg-hero-frame .bn-dots{
  position:absolute;left:0;right:0;bottom:10px;z-index:6;
  background:transparent;padding:0;
}
.mg-hero-frame .bn-dot{
  width:9px;height:9px;background:rgba(255,255,255,.8);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.28);
}
.mg-hero-frame .bn-dot.active{background:var(--red);box-shadow:0 0 0 1.5px #fff}
/* 矢印は写真の上下中央 */
.mg-hero-frame .bn-arrow{top:50%;transform:translateY(-50%)}

/* ── 2カラム（カバーガール ／ 動画・新着）────────── */
.mg-two{display:grid;gap:var(--mg-gap);padding-bottom:14px}
@media(min-width:900px){
  /* 行の高さをカバーの高さ（542:565）で固定する。
     auto のままだと「右列の高さ＝内容」「左列の高さ＝行」で堂々巡りになり、
     新着が増えたぶんだけ行が伸びてしまう。 */
  .mg-two{grid-template-columns:minmax(0,542px) minmax(0,1fr);
          grid-template-rows:565px;align-items:stretch}
  .mg-two .mg-col-r{display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--mg-gap);height:100%}
  .mg-two .mg-news{display:flex;flex-direction:column;min-height:0}
  .mg-two .mg-news-box{flex:1 1 auto;max-height:none;min-height:0}
}
.mg-col-r{display:grid;gap:var(--mg-gap);align-content:start}

/* ── カバーガール（＝PICKUP）─────────────────────
   現行の組み方を寸法ごと写している。実測（PC・542×565）
     写真枠   左0・上0・幅342（写真322＋白フチ10）
     赤パネル 左322・上30・幅220 … 写真に20px重なる
     見出し   左下・335×70
     名前34px #FFF800 ／ (年齢)20px白 ／ サイズ11px白
   文字サイズは cqw（コンテナ幅比）。幅が変わっても同じ比率で縮む。 */
.mg-cover{position:relative;container-type:inline-size;max-width:542px;width:100%;align-self:start}
@media(min-width:760px){ .mg-cover{aspect-ratio:542/565} }
.mg-cover .cv-main{display:block;background:#EBEBEB;padding:1.85cqw;box-shadow:0 2px 6px rgba(0,0,0,.13)}
.mg-cover .cv-main img{width:100%;aspect-ratio:2/3;object-fit:cover;background:#f4f4f4;border:3px solid #fff;display:block}
.mg-cover .cv-noimg{display:block;width:100%;aspect-ratio:2/3;background:#f4f4f4;border:3px solid #fff}
@media(min-width:760px){
  .mg-cover .cv-main{position:absolute;left:0;top:0;width:63.1%;z-index:1}
}
.mg-cover .cv-panel{
  background:var(--red);color:#fff;text-align:center;z-index:3;
  background-image:radial-gradient(circle at 2px 2px, rgba(0,0,0,.07) 1px, transparent 1.2px);
  background-size:8px 8px;
}
@media(min-width:760px){
  .mg-cover .cv-panel{position:absolute;left:59.4%;top:5.31%;bottom:0;width:40.6%;
                      padding:2.6cqw 5.54cqw;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.18)}
}
.mg-cover .cv-name{font-size:26px;font-weight:700;color:var(--yellow);line-height:1.25}
.mg-cover .cv-age {font-size:17px;font-weight:400;line-height:1.3}
.mg-cover .cv-size{font-size:11px;font-weight:400;line-height:1.55}
@media(min-width:760px){
  .mg-cover .cv-name{font-size:6.27cqw}
  .mg-cover .cv-age {font-size:3.69cqw}
  .mg-cover .cv-size{font-size:2.03cqw}
}
.mg-cover .cv-sub{display:block;margin-top:1.8cqw;background:#fff}
.mg-cover .cv-sub img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
/* 紹介文。パネルからはみ出さないよう行数で切って「…」を付ける。
   文章そのものは詳細ページで全部読めます。 */
.mg-cover .cv-cmt{
  margin:1.8cqw 0 0;font-size:2.95cqw;line-height:1.55;text-align:center;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
/* スマホは1枚目だけ・簡潔に。サブ写真と紹介文は出さない */
@media(max-width:759px){
  .mg-cover .cv-sub,.mg-cover .cv-cmt{display:none}
  .mg-cover .cv-panel{padding:8px 12px}
}
.mg-cover .cv-title{display:flex;align-items:baseline;gap:8px;padding:8px 2px 0;z-index:2}
@media(min-width:760px){
  .mg-cover .cv-title{position:absolute;left:0;bottom:0;width:59.4%;height:12.4%;
                      align-items:flex-end;padding:0 0 .6cqw}
}
.mg-cover .cv-title .en{
  /* 折り返すと2行になって帯からはみ出すので縮めさせない */
  white-space:nowrap;flex:0 0 auto;
  font-family:var(--en);font-weight:800;
  font-size:clamp(30px,9.2cqw,52px);line-height:1;letter-spacing:.03em;
  color:var(--red);-webkit-text-stroke:3px #fff;paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.16);
}
.mg-cover .cv-title .jp{white-space:nowrap;font-size:clamp(10px,2.2cqw,13px);font-weight:700;color:var(--red)}
.mg-cover-empty .mg-empty{min-height:200px;display:flex;align-items:center;justify-content:center}

/* ── 動画 ─────────────────────────────────── */
.mg-movie{background:var(--blue);border-radius:8px;padding:12px}
.mg-movie .mg-head-row .en{font-size:clamp(26px,4.6vw,44px)}
.mg-movie-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mg-movie-slot{
  display:flex;align-items:center;justify-content:center;
  background:#000;border:3px solid #fff;border-radius:4px;overflow:hidden;
  aspect-ratio:9/16;max-height:210px;width:100%;margin:0 auto;
  color:#fff9;font-size:11px;font-weight:500;text-align:center;text-decoration:none;
}
.mg-movie-slot img,.mg-movie-slot video{width:100%;height:100%;object-fit:cover;display:block}
.mg-movie-noimg{padding:8px}

/* ── 新着 ─────────────────────────────────── */
.mg-news{background:var(--yellow);border-radius:8px;padding:12px}
/* 現行サイトでも NEWS の見出しは GIRLS MOVIE より小さい。そこに合わせる */
/* 新着は途切れない縦スクロール。中身を2組並べて半分ぶん動かすので、
   最後の記事のあとに空白ができず、そのまま先頭へつながる。
   動かすかどうか（はみ出しているか）は assets/js/mg.js が判断する。 */
.mg-news-box{background:#fff;border-radius:4px;padding:8px 10px;max-height:260px;overflow:hidden;position:relative}
.mg-news-flow{display:block}
.mg-news-flow.run{animation:mgNewsFlow var(--dur,30s) linear infinite}
.mg-news-box:hover .mg-news-flow.run,
.mg-news-box:focus-within .mg-news-flow.run{animation-play-state:paused}
@keyframes mgNewsFlow{ from{transform:translateY(0)} to{transform:translateY(-50%)} }
@media (prefers-reduced-motion: reduce){
  .mg-news-flow.run{animation:none}
  .mg-news-box{overflow-y:auto}
}
/* 1行を細くして、同じ高さでも件数が入るようにする */
.mg-news-item{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;
  padding:6px 0;border-bottom:1px dashed var(--line);text-decoration:none;
}
.mg-news-item:last-child{border-bottom:0}
.mg-news-item .d{font-size:9px;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.25;padding-top:1px}
.mg-news-item .d span{display:block;font-size:15px;line-height:1.1;color:var(--red)}
.mg-news-item .b{min-width:0}
.mg-news-item .t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;font-weight:700;color:var(--red-dark);line-height:1.5;
}
.mg-news-item .x{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:11px;line-height:1.5;color:var(--ink-2);
}

/* ── 新人 ─────────────────────────────────── */
.mg-newface{background:var(--purple);border-radius:8px;padding:12px;margin-bottom:var(--mg-gap)}
/* 1画面に出す人数。JSはこの --per を読んでページ数を数える */
.mg-nf-sld{--per:2;--g:8px}
@media(min-width:560px){ .mg-nf-sld{--per:5;--g:6px} }
.mg-girl{background:#fff;border-radius:6px;overflow:hidden;display:block;position:relative;text-decoration:none}
.mg-girl .ph{position:relative;display:block;background:#f2f2f2}
.mg-girl .ph img,.mg-girl .ph .noimg{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#f2f2f2}
.mg-girl .badge{
  position:absolute;top:6px;left:6px;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.04em;border-radius:3px;padding:1px 7px;
  box-shadow:0 2px 0 var(--red-dark);
}
.mg-girl .nm{display:block;padding:5px 6px 2px;font-size:14px;font-weight:700;color:var(--purple);text-align:center;line-height:1.3}
.mg-girl .sz{display:block;padding:0 6px 6px;font-size:10px;font-weight:400;color:var(--ink-2);text-align:center;line-height:1.45}
/* 5列だと1枚が狭くなるので、名前とサイズを少し詰める */
@media(min-width:560px){
  .mg-girl .nm{font-size:clamp(12px,1.2vw,14px);padding:4px 3px 1px}
  .mg-girl .sz{font-size:9px;padding:0 3px 5px;line-height:1.4}
}

/* ── 出勤 ─────────────────────────────────────
   現行はカード1枚が staffbg.png（224×437）の1枚絵。
   その帯の位置を実測して CSS に置き換えている。
     赤フチ 5px ／ 写真 214×321 ／ 写真の下に赤5px
     → 4px の透け（背景が見える）→ 赤帯（名前・サイズ）
     → 白帯（出勤時間）→ 赤フチ
   現行はカードが背景のピンクに直接並ぶので、白パネルは敷かない。 */
.mg-sche{background:transparent;padding:0;margin-bottom:var(--mg-gap)}
.mg-stf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){ .mg-stf-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:900px){ .mg-stf-grid{grid-template-columns:repeat(5,1fr)} }

/* 文字の大きさはカード幅に対する比。現行（幅224）と同じ見え方で伸縮する。
   名前28px→12.5cqw ／ (年齢)18px→8cqw ／ サイズ10px→4.5cqw ／ 時間16px→7.1cqw */
.mg-stf{
  position:relative;display:block;container-type:inline-size;
  border:4px solid var(--red);background:transparent;text-decoration:none;
}
.mg-stf .stf-ph{display:block;position:relative;background:#fff;border-bottom:5px solid var(--red)}
.mg-stf .stf-ph img,.mg-stf .stf-ph .noimg{display:block;width:100%;aspect-ratio:214/321;object-fit:cover;background:#f4f4f4}
.mg-stf .stf-badge{
  position:absolute;top:6px;left:6px;z-index:2;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.04em;border-radius:3px;padding:1px 8px;
  box-shadow:0 2px 0 var(--red-dark);
}
/* 写真と赤帯のあいだの透け。現行の staffbg.png にある 4px のすき間 */
.mg-stf .stf-band{
  display:block;margin-top:4px;background:var(--red);color:#fff;text-align:center;
  padding:4.9cqw 3cqw 1.3cqw;
}
.mg-stf .stf-nm{display:block;font-size:clamp(16px,12.5cqw,28px);font-weight:700;line-height:1.15}
.mg-stf .stf-nm i{font-style:normal;font-size:clamp(12px,8cqw,18px);font-weight:700}
.mg-stf .stf-sz{display:block;font-size:clamp(9px,4.5cqw,10px);font-weight:400;line-height:1.5;margin-top:2px}
.mg-stf .stf-time{
  display:block;background:#fff;color:var(--red);text-align:center;
  font-size:clamp(11px,7.1cqw,16px);font-weight:500;letter-spacing:.02em;
  line-height:1.5;padding:3px 2px;
}
.mg-stf .stf-time.off{color:#9a9a9a}
.mg-stf .stf-cc{
  display:block;background:#fff;color:var(--red);text-align:center;
  border-top:2px solid var(--red);
  font-size:clamp(11px,5.8cqw,13px);font-weight:500;line-height:1.45;padding:5px 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── 埋め込み・広告枠 ───────────────────────── */
/* 1枠に複数のバナー（ランキングサイトなど）が入る。
   既定テーマは縦に積むだけだが、この店舗ではPCで横に並べ、
   スマホでは縦に戻す。PC用/SP用の出し分け（.f-embed-pc / .f-embed-sp）は
   front-default.css の display:none が効いたままなので、そちらは触らない。 */
.f-embed-slot{
  max-width:var(--mg-wrap);margin:0 auto 14px;padding:0 10px;
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;align-items:flex-start;
}
.f-embed-slot > div{flex:0 0 auto;max-width:100%}
.f-embed-slot img{display:block}
@media(max-width:767px){
  .f-embed-slot{flex-direction:column;align-items:center;gap:8px}
  .f-embed-slot > div{width:100%;display:flex;justify-content:center}
}

/* ── 紹介文（SEO）─────────────────────────── */
.f-seo-text{max-width:var(--mg-wrap);margin:0 auto var(--mg-gap);padding:0 10px}
.f-seo-text-inner{background:#fff;border-radius:8px;padding:14px}
.f-seo-text-title{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--red)}
.f-seo-text-body{margin:0;font-size:12px;line-height:1.85;color:#555}

/* ── フッター（共通テンプレートの markup をそのまま使う）──── */
.f-footer{background:#fff;border-top:4px solid var(--red);padding:16px 0 0;margin-top:10px}
.f-footer-inner{max-width:var(--mg-wrap);margin:0 auto;padding:0 10px}
.f-footer-name{font-weight:700;color:var(--red);font-size:15px;margin-bottom:4px}
.f-footer-info{font-size:12px;color:var(--ink-2);line-height:1.8}
.f-footer-nav{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:14px 0}
.f-footer-nav a{color:var(--blue);font-size:12px;font-weight:500;text-decoration:none}
.f-footer-copy{background:var(--red);color:#fff;text-align:center;font-size:11px;padding:8px 10px;margin:0}

/* ── スマホ下部の固定バー ───────────────────── */
.mg-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  border-top:3px solid #fff;box-shadow:0 -3px 10px rgba(0,0,0,.2);
}
.mg-bar a{
  padding:7px 4px 8px;text-align:center;color:#fff;text-decoration:none;
  font-size:11px;font-weight:500;line-height:1.3;
}
.mg-bar a b{display:block;font-family:var(--en);font-weight:700;font-size:21px;line-height:1.1;letter-spacing:.03em}
.mg-bar .a1{background:var(--red)}
.mg-bar .a2{background:var(--blue)}
.mg-bar .a3{background:var(--purple)}
@media(min-width:900px){ .mg-bar{display:none} }

/* ── カバーガールのスライド ─────────────────────
   PICKUP 指定の全員を順に出す。現行サイトも同じ（innerfade）。
   .cv-slide は静的な箱にしておく。中の cv-main / cv-panel は
   .mg-cover 基準で絶対配置しているので、位置は変わらない。 */
.mg-cover .cv-slide{display:none}
.mg-cover .cv-slide.on{display:block}
.mg-cover .cv-arrow{
  position:absolute;top:38%;z-index:5;
  width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:rgba(248,50,50,.85);color:#fff;
  font-size:22px;line-height:30px;font-family:var(--en);cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.mg-cover .cv-arrow:hover{background:var(--red)}
.mg-cover .cv-arrow.prev{left:4px}
.mg-cover .cv-arrow.next{left:calc(63.1% - 36px)}
@media(max-width:759px){
  .mg-cover .cv-arrow{top:40%}
  .mg-cover .cv-arrow.next{left:auto;right:4px}
}
.mg-cover .cv-dots{
  /* 写真の下端（コンテナ高さの 89% あたり）の少し内側に重ねる。
     以前は写真の外（見出しの帯の位置）に出ていた。 */
  position:absolute;left:0;width:63.1%;bottom:calc(12.4% + 8px);z-index:5;
  display:flex;justify-content:center;gap:6px;
}
@media(max-width:759px){ .mg-cover .cv-dots{position:static;width:auto;padding:8px 0 0} }
.mg-cover .cv-dots i{
  width:9px;height:9px;border-radius:50%;display:block;cursor:pointer;
  background:rgba(255,255,255,.85);border:2px solid var(--red);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.mg-cover .cv-dots i.on{background:var(--red)}

/* ══ スタッフ詳細（PROFILE）══════════════════════
   現行 companion.html の並びに合わせる。
   左に本文、右に写真。スマホは写真が先に来るようにする。 */
.mg-detail{padding:14px 10px 0}
.pf-head{margin-top:6px}
.pf-head + .mg-pf{margin-top:0}
.mg-pf{display:grid;gap:var(--mg-gap);padding-bottom:14px}
@media(min-width:900px){
  .mg-pf{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:start}
  .pf-body{order:1}
  .pf-photos{order:2}
}

/* 写真 */
/* 現行のメイン写真は 400×600、サブは 120幅。
   1カラムのときに枠いっぱいまで伸びると縦に1000px近くなるので上限を置く。 */
.pf-photos{display:grid;gap:8px;max-width:520px;margin:0 auto;width:100%}
@media(min-width:560px){ .pf-photos{grid-template-columns:minmax(0,1fr) 120px} }
.pf-main{border:4px solid var(--red);background:#fff}
.pf-main img,.pf-noimg{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#f4f4f4}
.pf-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:560px){ .pf-thumbs{grid-template-columns:1fr;align-content:start} }
.pf-thumb{padding:0;border:3px solid var(--red);background:#fff;cursor:pointer;display:block;opacity:.75}
.pf-thumb.on,.pf-thumb:hover{opacity:1}
.pf-thumb img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}

/* 名前カード */
.pf-body{display:grid;gap:12px;align-content:start}
.pf-card{position:relative;background:#fff;border:3px solid var(--red);border-radius:4px;padding:12px 14px}
.pf-rank{position:absolute;top:8px;right:10px;display:flex;gap:4px;flex-wrap:wrap}
.pf-rank span{
  background:
    radial-gradient(circle at 3px 3px, rgba(44,172,221,.55) 1.4px, transparent 1.7px) 0 0/9px 9px,
    #fff;
  border:1px solid var(--red);color:var(--red);
  font-size:11px;font-weight:700;letter-spacing:.06em;border-radius:3px;padding:2px 8px;
}
.pf-name{margin:0;font-size:clamp(20px,5vw,26px);font-weight:700;color:var(--ink);line-height:1.3}
.pf-name .age{font-size:.7em;font-weight:700;color:var(--ink-2);margin-left:2px}
.pf-name .size{display:inline-block;font-size:12px;font-weight:400;color:var(--ink-2);margin-left:8px;letter-spacing:.01em}
.pf-kana{font-size:11px;color:var(--ink-2);margin-top:2px}
.pf-catch{margin:4px 0 0;font-size:14px;font-weight:700;color:var(--red);line-height:1.5}
.pf-badges{display:flex;gap:6px;margin-top:8px}
.pf-badges span{font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;border-radius:3px;padding:2px 9px}
.pf-badges .b-new{background:var(--red);box-shadow:0 2px 0 var(--red-dark)}
.pf-badges .b-pick{background:var(--purple)}

/* タグ・オプション */
.pf-tags{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media(min-width:560px){ .pf-tags{grid-template-columns:repeat(4,1fr)} }
.pf-tag{
  background:var(--red);color:#fff;text-align:center;
  font-size:13px;font-weight:700;line-height:1.4;padding:7px 6px;border-radius:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf-tag.has-img{padding:0;background:none}
.pf-tag.has-img img{width:100%;height:auto;display:block}
.pf-tag.off{background:#f2f2f2;color:#bbb;text-decoration:line-through}
.pf-opt-t{font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:5px}

/* Q&A 表 */
.pf-qa{width:100%;border-collapse:collapse;background:#fff;border:3px solid var(--red)}
.pf-qa th,.pf-qa td{border:1px solid var(--red);padding:8px 10px;font-size:13px;line-height:1.5;vertical-align:middle}
.pf-qa th{width:42%;color:var(--red);font-weight:700;text-align:center;background:#fff}
.pf-qa td{color:var(--ink);font-weight:400}

/* 紹介文 */
.pf-comment{background:#fff;border:3px solid var(--red)}
.pf-comment-bar{height:14px;background:var(--red)}
.pf-comment-body{padding:12px 14px;font-size:13px;line-height:1.9;color:var(--ink)}

.pf-sns{display:flex;gap:8px;flex-wrap:wrap}
.pf-sns a{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  background:#fff;border:2px solid var(--red);border-radius:999px;
  padding:5px 14px;font-size:12px;font-weight:700;color:var(--red);
}

/* 出勤（1週間） */
.pf-sch{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:var(--mg-gap)}
@media(min-width:560px){ .pf-sch{grid-template-columns:repeat(7,1fr)} }
.pf-sch-day{background:#fff;border:2px solid var(--red);border-radius:4px;overflow:hidden;text-align:center}
.pf-sch-day .d{background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 2px;line-height:1.3}
.pf-sch-day .d span{margin-left:2px;font-weight:500}
.pf-sch-day.sat .d{background:var(--blue)}
.pf-sch-day.sun .d{background:#9b1c1c}
.pf-sch-day .t{padding:7px 3px;font-size:12px;font-weight:500;color:var(--red);line-height:1.4;min-height:44px}
.pf-sch-day .t.off{color:#bbb}

/* 動画 */
.pf-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:var(--mg-gap)}
.pf-video{background:#fff;border:3px solid var(--red);overflow:hidden}
.pf-video iframe,.pf-video video,.pf-video img{display:block;width:100%;aspect-ratio:16/9;border:0;object-fit:cover;background:#000}
.pf-video-t{padding:6px 10px;font-size:12px;font-weight:700;color:var(--ink)}

.pf-back{text-align:center;margin:6px 0 18px}
.pf-back a{
  display:inline-block;text-decoration:none;
  background:#fff;border:2px solid var(--red);border-radius:999px;
  padding:9px 26px;font-size:13px;font-weight:700;color:var(--red);
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.pf-back a:hover{background:#FFF0F3}
.mg-pf-404{padding:20px 10px}

/* ══ 横スクロールのスライド（新人・新着）══════════
   動かしているのは assets/js/mg.js。
   1画面に何枚出すかは、使う側で --per と --g（すき間）を決める。
     例）.mg-nf-sld{--per:2;--g:8px}  スマホは2枚
         @media(min-width:560px){ .mg-nf-sld{--per:5} }  PCは5枚
   JSは --per を読んでページ数と点の数を決めるので、
   列数を変えたいときは custom.css のこの2つだけ直せば足ります。 */
.mg-sld{position:relative;overflow:hidden}
.mg-sld-track{
  display:flex;gap:var(--g,8px);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.mg-sld-item{
  flex:0 0 calc((100% - (var(--per,1) - 1) * var(--g,0px)) / var(--per,1));
  min-width:0;
}
.mg-sld-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:rgba(248,50,50,.85);color:#fff;cursor:pointer;
  font-family:var(--en);font-size:20px;line-height:28px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .15s,background .15s;
}
.mg-sld.has-pages .mg-sld-arrow{opacity:1;pointer-events:auto}
.mg-sld-arrow:hover{background:var(--red)}
.mg-sld-arrow:disabled{opacity:.25;pointer-events:none}
.mg-sld-arrow.prev{left:2px}
.mg-sld-arrow.next{right:2px}
.mg-sld-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.mg-sld-dots i{
  width:8px;height:8px;border-radius:50%;display:block;cursor:pointer;
  background:rgba(255,255,255,.7);border:1.5px solid rgba(0,0,0,.2);
}
.mg-sld-dots i.on{background:var(--red);border-color:#fff}

/* ══════════════════════════════════════════════════════════════
   下層ページ（料金・在籍・出勤・お知らせ・イベント・ランキング・動画・
   お問い合わせ・入口）

   これらは CMS 共通のテンプレートをそのまま使い、
   見た目だけここで店舗の作りに合わせている。
   templates/ に同じ名前のファイルを置けば、そちらが優先される。

   共通テンプレートのクラスは f- で始まる。
   HTMLを触らずに色と形だけ変えているので、CMS側が更新されても壊れにくい。
   ══════════════════════════════════════════════════════════════ */

/* ── まず、共通テンプレートの色をこの店の色に差し替える ──
   共通CSS（front.css）は、色や角の丸みを全部この変数から取るように
   作られている。だからテンプレートのHTMLに
   style="color:var(--color-text)" と直接書いてあるところも、
   ここを書き換えれば一緒に変わる。
   個別に .f-〇〇 を書き足すより先に、まずここを合わせること。 */
:root{
  --color-primary:      #F83232;   /* 既定のピンク → この店の赤 */
  --color-primary-dark: #D51F1F;
  --color-primary-light:#FED3FF;
  --color-primary-pale: #FFF1F1;
  --color-accent:       #2CACDD;
  --color-bg-card:      #fff;
  --color-text:         #333;
  --color-text-2:       #777;
  --color-text-3:       #7A7A7A;
  --color-border:       #E7D9E9;
  --color-border-light: #F0E6F1;
  --radius:             4px;       /* 角は丸めない作りなので小さく */
  --radius-sm:          3px;
  --radius-lg:          6px;
  --shadow:             none;      /* 影は使わない */
  --shadow-hover:       none;
}

.f-main{max-width:var(--mg-wrap);margin:0 auto;padding:14px 10px 0}

/* 本文の横幅を見出し帯（.f-page-hero）と揃える。
   共通テンプレートは読みやすさのため料金 800px・お問い合わせ 640px・
   記事本文 760px と狭くしているが、この店舗は見出しと同じ幅で使う。
   トップページは元から全幅なので対象外。 */
.f-narrow,
.f-narrow-sm{max-width:var(--mg-wrap)}
.f-article,
.f-ev-article,
.albd-body,
.albd-pn{max-width:none}

/* ── パンくず ─────────────────────────────── */
.f-breadcrumb{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:11px;color:var(--ink-2);margin:0 0 12px;
}
.f-breadcrumb a{color:var(--blue);text-decoration:none;font-weight:500}
.f-breadcrumb span{color:var(--ink-2)}

/* ── ページ見出し（英字＋日本語）──────────────
   トップの見出しと同じ組み方。英字は装飾、日本語が h1。 */
.f-page-hero{
  max-width:var(--mg-wrap);margin:0 auto;padding:14px 10px 0;
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  border-bottom:3px solid var(--red);padding-bottom:6px;
}
.f-page-hero-title{
  margin:0;font-family:var(--en);font-weight:800;
  font-size:clamp(30px,8vw,56px);line-height:1;letter-spacing:.03em;
  color:var(--red);
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.16);
}
.f-page-hero-sub{
  margin:0 0 4px;font-size:clamp(12px,3vw,15px);font-weight:700;
  color:var(--ink);letter-spacing:.02em;
}

/* ── 空のとき ─────────────────────────────── */
.f-empty{
  background:rgba(255,255,255,.8);border-radius:6px;
  padding:24px;text-align:center;font-size:12px;color:var(--ink-2);margin:12px 0;
}
.f-empty p{margin:0}

/* ── ページ送り ───────────────────────────── */
.f-pager{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:20px 0}
.f-page-btn{
  display:inline-block;min-width:34px;text-align:center;text-decoration:none;
  background:#fff;color:var(--red);border:2px solid var(--red);border-radius:4px;
  padding:5px 10px;font-size:13px;font-weight:700;
}
.f-page-btn:hover{background:#FFF0F3}
.f-page-btn.active{background:var(--red);color:#fff}
.f-page-btn.disabled{color:#ccc;border-color:#e3e3e3;pointer-events:none;background:#fafafa}

/* ── 絞り込みバー ─────────────────────────── */
.f-filter-bar{background:#fff;border:2px solid var(--red);border-radius:6px;padding:10px 12px;margin:0 0 14px}
.f-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.f-filter-group:last-child{margin-bottom:0}
.f-filter-label{font-size:11px;font-weight:700;color:var(--ink-2);min-width:64px}
.f-filter-btns{display:flex;flex-wrap:wrap;gap:5px}
.f-filter-btn{
  display:inline-block;text-decoration:none;
  background:#fff;color:var(--red);border:1.5px solid var(--red);border-radius:999px;
  padding:3px 12px;font-size:12px;font-weight:700;
}
.f-filter-btn:hover{background:#FFF0F3}
.f-filter-btn.active{background:var(--red);color:#fff}
.f-filter-clear{font-size:11px;color:var(--ink-2);text-decoration:underline}

/* ── スタッフカード（在籍・出勤・ランキング共通）──
   トップの出勤カードと同じ作り。現行の staffbg.png（224×437）に合わせた
   赤フチ5px／写真214:321／赤帯（名前・サイズ）／白帯 の並び。 */
.f-staff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
@media(min-width:560px){ .f-staff-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:900px){ .f-staff-grid{grid-template-columns:repeat(5,1fr)} }

.f-staff-card{
  position:relative;display:block;container-type:inline-size;
  border:4px solid var(--red);background:transparent;text-decoration:none;overflow:visible;
}
.f-staff-img-wrap{display:block;position:relative;background:#fff;border-bottom:5px solid var(--red)}
.f-staff-img,.f-staff-placeholder{
  display:block;width:100%;aspect-ratio:214/321;object-fit:cover;background:#f4f4f4;
}
.f-staff-badges{position:absolute;top:6px;left:6px;z-index:2;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.f-staff-badge{
  font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;
  border-radius:3px;padding:1px 8px;
}
.f-staff-badge.new{background:var(--red);box-shadow:0 2px 0 var(--red-dark)}
.f-staff-badge.pickup{background:var(--purple)}
.f-staff-badge.working{background:var(--blue)}

.f-staff-info{display:block;background:var(--red);color:#fff;text-align:center;margin-top:4px;padding:4.9cqw 3cqw 1.3cqw}
.f-staff-name-row{display:block}
.f-staff-name{font-size:clamp(16px,12.5cqw,28px);font-weight:700;line-height:1.15}
.f-staff-age{font-size:clamp(12px,8cqw,18px);font-weight:700}
.f-staff-kana{display:block;font-size:10px;font-weight:400;opacity:.85;line-height:1.4}
.f-staff-sizes{display:block;font-size:clamp(9px,4.5cqw,10px);font-weight:400;line-height:1.5;margin-top:2px}

.f-staff-catch{
  display:block;background:#fff;color:var(--red);text-align:center;
  border-top:2px solid var(--red);
  font-size:clamp(11px,5.8cqw,13px);font-weight:500;line-height:1.45;padding:5px 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.f-staff-ics{display:flex;justify-content:center;gap:5px;background:#fff;padding:4px}
.f-staff-ics .ic{width:16px;height:16px;color:var(--red)}
.f-staff-ranks{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;background:#fff;padding:0 4px 4px}
.f-staff-rankbadge,.f-staff-rank{
  font-size:9px;font-weight:700;color:var(--red);
  border:1px solid var(--red);border-radius:3px;padding:0 5px;background:#fff;
}

/* ── 出勤表 ───────────────────────────────── */
.f-schedule-tabs{display:flex;gap:4px;overflow-x:auto;padding:0 0 6px;margin-bottom:12px}
.f-schedule-tabs a,.f-schedule-tabs button{
  flex:0 0 auto;text-decoration:none;text-align:center;cursor:pointer;
  background:#fff;border:2px solid var(--red);border-radius:4px;
  padding:5px 12px;color:var(--red);
}
.f-schedule-tabs .active,.f-schedule-tabs a.active{background:var(--red);color:#fff}
.f-tab-date{display:block;font-family:var(--en);font-weight:700;font-size:17px;line-height:1.1}
.f-tab-dow{display:block;font-size:10px;font-weight:700}

/* 土日の色だけは、共通テンプレートが style="color:#2563eb" のように
   HTMLに直接書いている。直接書かれた色はCSSでは勝てないので、
   ここだけ !important を付けて打ち消す。
   （赤い帯の上に赤い「日」が乗って読めなくなっていた） */
.f-schedule-day-header span[style]{color:#fff!important}
.f-schedule-tabs .f-tab-dow[style*="2563eb"]{color:var(--blue)!important}
.f-schedule-tabs .f-tab-dow[style*="dc2626"]{color:var(--red)!important}
.f-schedule-tabs .active .f-tab-dow[style],
.f-schedule-tabs a.active .f-tab-dow[style]{color:#fff!important}
.f-schedule-day{margin-bottom:18px}
.f-schedule-day-header{
  display:flex;align-items:baseline;gap:8px;
  background:var(--red);color:#fff;border-radius:4px;
  padding:5px 12px;font-size:14px;font-weight:700;margin-bottom:8px;
}
.f-schedule-count{font-size:11px;font-weight:500;opacity:.9;margin-left:auto}

/* ── お知らせ一覧 ─────────────────────────── */
.f-news-list{background:#fff;border-radius:6px;overflow:hidden;border:2px solid var(--red)}
.f-news-item{
  display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:10px 14px;border-bottom:1px dashed var(--line);text-decoration:none;
}
.f-news-item:last-child{border-bottom:0}
.f-news-item:hover{background:#FFF7FB}
.f-news-date{font-family:var(--en);font-weight:600;font-size:14px;color:var(--ink-2)}
.f-news-title{font-size:13px;font-weight:700;color:var(--red-dark);line-height:1.6}
@media(max-width:479px){
  .f-news-item{grid-template-columns:1fr;gap:2px}
}

/* ── イベント ─────────────────────────────── */
.f-event-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
@media(min-width:560px){ .f-event-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .f-event-grid{grid-template-columns:repeat(3,1fr)} }
.f-event-card{
  display:block;background:#fff;border:3px solid var(--red);border-radius:4px;
  overflow:hidden;text-decoration:none;
}
.f-event-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#f4f4f4}
.f-event-body{padding:10px 12px}
.f-event-date{font-family:var(--en);font-weight:600;font-size:13px;color:var(--ink-2)}
.f-event-title{font-size:14px;font-weight:700;color:var(--red-dark);line-height:1.5;margin:2px 0 4px}
.f-event-excerpt{font-size:12px;color:var(--ink-2);line-height:1.6}

.f-badge{display:inline-block;font-size:10px;font-weight:700;border-radius:3px;padding:1px 8px;color:#fff}
.f-badge-pink{background:var(--purple)}
.f-badge-green{background:#7AC326}
.f-badge-new{background:var(--red)}
.f-badge-pick{background:var(--purple)}

/* ── ランキング ───────────────────────────── */
.f-ranking-block{margin-bottom:22px}
.f-rank-badge{
  display:inline-block;font-family:var(--en);font-weight:700;
  background:var(--yellow);color:var(--red);border:2px solid var(--red);
  border-radius:4px;padding:1px 10px;font-size:15px;margin-bottom:6px;
}
.f-ranking-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){ .f-ranking-list{grid-template-columns:repeat(5,1fr)} }
.f-ranking-item{display:block;background:#fff;border:3px solid var(--red);text-decoration:none;position:relative}
.f-ranking-img,.f-ranking-placeholder{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#f4f4f4}
.f-rank-num{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--en);font-weight:700;font-size:20px;line-height:1;
  background:var(--red);color:#fff;padding:4px 10px;
}
.f-ranking-name{display:block;background:var(--red);color:#fff;text-align:center;font-weight:700;font-size:14px;padding:4px}
.f-ranking-kana{display:block;background:var(--red);color:#fff;text-align:center;font-size:10px;padding:0 4px 4px}

/* ── 料金 ─────────────────────────────────── */
.p-block{background:#fff;border:3px solid var(--red);border-radius:4px;margin-bottom:16px;overflow:hidden}
.p-block-head{display:flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:7px 12px}
.p-block-head svg{stroke:#fff!important}
.p-block-title{font-size:14px;font-weight:700}
.ptbl{width:100%;border-collapse:collapse}
.ptbl th,.ptbl td{border-bottom:1px solid var(--line);padding:9px 12px;font-size:13px;text-align:left}
.ptbl thead th{background:#FFF0F3;color:var(--red);font-weight:700;font-size:12px}
.ptbl tr:last-child th,.ptbl tr:last-child td{border-bottom:0}
.ptbl .pv{text-align:right;font-family:var(--en);font-weight:700;font-size:19px;color:var(--red);white-space:nowrap}
.ptbl .pv span{font-family:var(--jp);font-size:11px;font-weight:500;margin-left:2px}
.opt-wrap{padding:10px 12px}
.opt-tags{display:flex;flex-wrap:wrap;gap:6px}
.opt-tag{background:var(--red);color:#fff;font-size:12px;font-weight:700;border-radius:3px;padding:4px 10px}
.opt-price{font-family:var(--en);font-weight:700;margin-left:4px}
.tr-notes{padding:10px 12px;font-size:12px;line-height:1.8;color:var(--ink-2);white-space:pre-line}

/* ── 動画 ─────────────────────────────────── */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(min-width:760px){ .video-grid{grid-template-columns:repeat(4,1fr)} }
.video-card{background:#fff;border:3px solid var(--red);border-radius:4px;overflow:hidden;cursor:pointer}
.vthumb,.vthumb-noimg{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.vplay{position:relative}
.vplay-icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(248,50,50,.9);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.vcard-body{padding:7px 9px}
.vcard-title{font-size:12.5px;font-weight:700;color:var(--red-dark);line-height:1.5}
.vcard-desc{font-size:11px;color:var(--ink-2);line-height:1.5}
.vcard-staff{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.vstaff-chip{background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:3px;padding:1px 7px;text-decoration:none}
.modal-ov{background:rgba(0,0,0,.8)}
.modal-box{background:#fff;border:4px solid var(--red);border-radius:6px}
.modal-title{font-size:15px;font-weight:700;color:var(--red-dark)}
.modal-close{background:var(--red);color:#fff;border:0;border-radius:50%}

/* ── お問い合わせ ─────────────────────────── */
.f-contact-form{background:#fff;border:3px solid var(--red);border-radius:4px;padding:14px}
.f-form-group{margin-bottom:14px}
.f-form-label{display:block;font-size:12px;font-weight:700;color:var(--red);margin-bottom:4px}
.f-form-label .req{background:var(--red);color:#fff;font-size:10px;border-radius:3px;padding:1px 6px;margin-left:6px}
.f-form-input,.f-form-select,.f-form-textarea{
  width:100%;border:2px solid var(--line);border-radius:4px;
  padding:8px 10px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);
}
.f-form-input:focus,.f-form-select:focus,.f-form-textarea:focus{border-color:var(--red);outline:0}
.f-radio-group,.f-check-group{display:flex;flex-wrap:wrap;gap:8px}
.f-radio-item,.f-check-item{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.f-submit-btn{
  display:inline-block;background:var(--red);color:#fff;border:0;border-radius:6px;
  padding:11px 34px;font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 3px 0 var(--red-dark);
}
.f-submit-btn:hover{background:var(--red-dark);box-shadow:0 3px 0 #a81717}
.err-box{background:#FFF0F3;border:2px solid var(--red);border-radius:4px;padding:10px 12px;color:var(--red);font-size:13px;margin-bottom:12px}
.confirm-tbl{width:100%;border-collapse:collapse;background:#fff}
.confirm-tbl th,.confirm-tbl td{border:1px solid var(--red);padding:8px 10px;font-size:13px}
.confirm-tbl th{background:#FFF0F3;color:var(--red);font-weight:700;width:34%;text-align:left}
.contact-step{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:16px}
.c-step{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-2)}
.c-step-num{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#eee;color:#999;font-family:var(--en);font-size:13px;
}
.c-step.active .c-step-num,.c-step.done .c-step-num{background:var(--red);color:#fff}
.c-step.active{color:var(--red)}
.c-arrow{color:var(--line)}

/* ── 入口（年齢確認）───────────────────────
   ヘッダー・フッターを出さないページなので、ここだけで完結させる。 */
.f-entrance{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px 16px;gap:10px;
}
.f-entrance-logo{max-width:min(620px,92vw);height:auto}
.f-entrance-name{
  font-weight:800;color:var(--red);font-size:clamp(22px,6vw,36px);
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.16);
}
.f-entrance-catch{
  background:var(--red);color:#fff;font-weight:700;border-radius:4px;
  padding:6px 14px;font-size:clamp(11px,2.9vw,15px);box-shadow:0 2px 0 var(--red-dark);
}
.f-entrance-age{
  font-family:var(--en);font-weight:800;color:var(--red);
  font-size:clamp(28px,9vw,48px);line-height:1.1;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;
}
.f-entrance-lead{font-size:15px;font-weight:700;color:var(--ink)}
.f-entrance-copy{font-size:12px;color:var(--ink-2);line-height:1.8;max-width:600px}
.f-entrance-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.f-entrance-enter,.f-entrance-exit{
  display:inline-block;text-decoration:none;border-radius:8px;
  padding:14px 34px;font-size:16px;font-weight:700;
}
.f-entrance-enter{background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red-dark)}
.f-entrance-exit{background:#fff;color:var(--ink-2);border:2px solid var(--line)}

/* ══════════════════════════════════════════════════════════════
   求人ページ

   共通の assets/css/front-recruit.css と同じクラス（.f-rc-*）を
   この店の作りに合わせて上書きしている。
   custom.css は後から読まれるので、共通側が入っていなくても
   このページはここだけで成立する。
   ══════════════════════════════════════════════════════════════ */

/* ── 一番上のメイン画像 ─────────────────────
   求人バナーは横長も縦長も来るので、比率は決め打ちしない。
   高さの上限だけ付けて、元の形のまま真ん中に置く。 */
.f-rc-hero{margin:0 auto 14px;text-align:center}
.f-rc-hero img{
  max-width:100%;max-height:380px;width:auto;height:auto;
  display:block;margin:0 auto;
  border:4px solid var(--red);background:#fff;
}
.f-rc-lead{font-size:13px;line-height:1.95;color:var(--ink);margin:0 0 16px}

/* ── タブ（女性求人／男性求人）───────────────
   ただのリンクだと「もう1つある」ことに気づかれない。
   押せる帯だとはっきり分かる形にして、選んでいる方を赤で塗る。 */
.f-rc-tabs{
  display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;
  border-bottom:4px solid var(--red);padding-bottom:0;
}
.f-rc-tab{
  flex:1 1 auto;min-width:130px;max-width:280px;
  text-align:center;text-decoration:none;
  font-family:var(--jp);font-size:14px;font-weight:700;line-height:1.2;
  color:var(--red);background:#fff;
  border:3px solid var(--red);border-bottom:0;
  border-radius:8px 8px 0 0;
  padding:11px 16px 10px;
  position:relative;top:4px;
}
.f-rc-tab:hover{background:var(--pink)}
.f-rc-tab.on{
  background:var(--red);color:#fff;
  /* 選択中は下線を消して、中身と地続きに見せる */
  box-shadow:0 4px 0 var(--red);
}
@media(max-width:560px){
  .f-rc-tab{min-width:0;font-size:13px;padding:9px 8px 8px}
}

/* ── ブロック ────────────────────────────── */
.f-rc-block{margin-bottom:30px}
.f-rc-bimg{margin-bottom:10px;text-align:center}
.f-rc-bimg img{max-width:100%;max-height:300px;width:auto;height:auto;display:block;margin:0 auto}

/* 赤帯の見出し。左に黄色の差し色を入れて、ただの赤帯より目に留まるようにする。 */
.f-rc-title{
  font-family:var(--jp);font-size:16px;font-weight:800;line-height:1.5;
  color:#fff;background:var(--red);
  border-left:7px solid var(--yellow);
  border-radius:3px;padding:10px 14px;margin:0 0 12px;
  text-shadow:0 1px 0 var(--red-dark);
}

/* ── 表 ────────────────────────────────── */
.f-rc-tblwrap{overflow-x:auto}
.f-rc-tbl{
  width:100%;border-collapse:collapse;background:#fff;
  border:2px solid var(--red);
}
.f-rc-tbl th,.f-rc-tbl td{
  border:1px solid var(--red);
  padding:11px 14px;font-size:13px;line-height:1.9;vertical-align:top;
}
.f-rc-tbl th{
  width:170px;white-space:nowrap;text-align:center;
  font-weight:700;color:var(--red);background:#FFF3F5;
}
.f-rc-tbl td{color:var(--ink);word-break:break-word}
/* 狭い画面では見出しを上に積む。横に並べたままだと
   「応募受付時間」の6文字で1行の半分を使ってしまう。 */
@media(max-width:600px){
  .f-rc-tbl,.f-rc-tbl tbody,.f-rc-tbl tr,.f-rc-tbl th,.f-rc-tbl td{display:block;width:auto}
  .f-rc-tbl tr{border-bottom:1px solid var(--red)}
  .f-rc-tbl tr:last-child{border-bottom:0}
  .f-rc-tbl th{border:0;text-align:left;padding:8px 12px 3px;font-size:12px}
  .f-rc-tbl td{border:0;padding:0 12px 10px}
}

/* 表の下の注記。現行サイトと同じく、表と地続きの囲みにする。 */
.f-rc-note{
  font-size:12px;line-height:1.95;color:var(--ink);
  background:#fff;border:2px solid var(--red);border-top:0;
  margin:0;padding:10px 14px;
}

/* ── 応募フォーム ─────────────────────────
   入力欄そのものは共通の .f-contact-form / .f-form-* を使う。
   ここでは見出しの付き方と外枠だけ合わせる。 */
.f-rc-form{margin-top:34px;padding-top:0;border-top:0}
.f-rc-form .f-contact-form{
  border:3px solid var(--red);border-top:0;
  background:#fff;padding:16px 16px 20px;
}
.f-rc-form .f-rc-title{margin-bottom:0;border-radius:3px 3px 0 0}
/* 迷惑送信よけの空欄。テンプレート側にも同じ指定が直接入っているが、
   ここにも書いておく（片方が欠けても見えないように）。 */
.f-rc-form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── バナーセット（系列店など）──────────────
   共通の front.css に基本の形が入っている。ここでは色と枠だけ合わせる。

   どこに出すかはテンプレートとここで決める。既定は「本文の下に横並び」。
   まとまりには管理画面で決めた記号が付くので（例 keiretsu → .f-bs-keiretsu、
   その入れ物は .f-bs-flow-keiretsu）、記号を名指しして位置を変える。 */
.f-bs-flow{max-width:var(--mg-wrap);margin:22px auto 0;padding:0 10px}
.f-bs-h{
  font-family:var(--jp);font-size:13px;font-weight:800;color:#fff;
  background:var(--red);border-left:6px solid var(--yellow);
  border-radius:3px;padding:6px 12px;margin:0 0 10px;text-align:left;
}
.f-bs-list{gap:8px}
.f-bs-item{
  border:3px solid var(--red);background:#fff;border-radius:4px;
  padding:2px;transition:transform .12s;
}
.f-bs-item:hover{transform:translateY(-2px)}
.f-bs-item img{border-radius:0}

/* kokoku はフッターより下に出している。
   スマホは下に固定バー（.mg-bar 約56px）が重なるので、その分だけ下に余白を取る。 */
.f-bs-flow-kokoku{margin:18px auto 20px}
@media(max-width:899px){ .f-bs-flow-kokoku{margin-bottom:76px} }

/* ── 見本：あるまとまりを画面の左に縦で出す ──
   テンプレートの出したい場所に1行置く。

     {% include 'partials/banner_set.html' with {'key':'ad'} %}

   そのうえで、下の ad の部分を実際の記号に変えて使う。
   1500px 未満では当てない。本文が1200px 固定なので、
   狭い画面で左に浮かせると本文にかぶるため。
   そのときは下に横並びのまま出る。

@media(min-width:1500px){
  .f-bs-flow-ad{
    position:fixed;left:12px;top:50%;transform:translateY(-50%);
    z-index:40;width:166px;max-height:92vh;overflow-y:auto;margin:0;
    background:#fff;border:3px solid var(--red);border-radius:6px;padding:8px;
  }
  .f-bs-flow-ad .f-bs-h{font-size:12px;padding:5px 8px}
  .f-bs-flow-ad .f-bs-list{flex-direction:column;flex-wrap:nowrap}
  .f-bs-flow-ad .f-bs-item{border-width:2px}
  .f-bs-flow-ad .f-bs-item img{max-width:150px}
}
*/