/* ============================================================
   NIGHT CAST — 公開画面スタイル（大理石／白基調）
   ============================================================ */
:root{
  /* 下地（白大理石。黄みを抑えたニュートラル寄り） */
  --marble:#f7f7f8;          /* 大理石のベース */
  --marble-deep:#ececee;     /* 陰になる部分 */
  --surface:#ffffff;         /* カード・パネル */
  --surface-soft:#fbfbfc;

  /* 線と影 */
  --line:#e2e1e0;
  --line-soft:#eeeeef;
  --shadow-sm:0 1px 2px rgba(35,28,18,.05), 0 2px 8px rgba(35,28,18,.04);
  --shadow-md:0 2px 6px rgba(35,28,18,.06), 0 12px 28px rgba(35,28,18,.08);
  --shadow-lg:0 4px 10px rgba(35,28,18,.07), 0 24px 56px rgba(35,28,18,.10);

  /* 文字 */
  --ink:#1f1b16;             /* 本文（コントラスト比 14:1 以上）*/
  --ink-soft:#57504a;
  --ink-faint:#8b8279;

  /* アクセント */
  --gold:#9a7b35;            /* 白地でも読める濃いゴールド */
  --gold-bright:#c9a961;     /* 罫・装飾用 */
  --gold-wash:#f5efe2;
  --wine:#8c2f4a;            /* 料金・CTA */
  --wine-soft:#b04a66;
  --line-green:#06C755;
  --platinum:#6b7383;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  color:var(--ink);
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
  background-color:var(--marble);
  /* ------------------------------------------------------------------
     白大理石のテクスチャ（画像ファイル不要・すべて CSS と SVG で生成）

     脈は feComponentTransfer の table で「ある濃度の等高線だけ」を抜き出して作っています。
     しきい値（feColorMatrix）で切ると面になってしまい、雲のような模様になります。
     feTurbulence には stitchTiles='stitch' が必須で、無いとタイルの継ぎ目が出ます。

       1層目  光　　（左上からの柔らかい光）
       2層目  影　　（右上のわずかな冷たい影）
       3層目  暖かみ（ごく薄く。入れないと冷たく見える）
       4層目  主脈　（細い灰色の脈・大きなタイルでまばらに）
       5層目  副脈　（別のシードでさらに薄く重ね、単調さを消す）
       6層目  石目　（ごく細かい粒子）
     ------------------------------------------------------------------ */
  background-image:
    radial-gradient(1400px 820px at 8% -14%,  rgba(255,255,255,.95), transparent 58%),
    radial-gradient(1000px 660px at 95% -2%,  rgba(226,229,236,.55), transparent 62%),
    radial-gradient(900px 620px at 72% 92%,   rgba(201,169,97,.05),  transparent 60%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='1500'>\
<filter id='v1' x='0' y='0' width='100%25' height='100%25'>\
<feTurbulence type='fractalNoise' baseFrequency='0.004 0.011' numOctaves='4' seed='19' stitchTiles='stitch'/>\
<feColorMatrix type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.43  0 0 0 0 0.47  0 0 0 1 0'/>\
<feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0'/></feComponentTransfer>\
<feComponentTransfer><feFuncA type='linear' slope='0.20'/></feComponentTransfer>\
</filter>\
<rect width='1500' height='1500' filter='url(%23v1)'/></svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000'>\
<filter id='v2' x='0' y='0' width='100%25' height='100%25'>\
<feTurbulence type='fractalNoise' baseFrequency='0.0028 0.009' numOctaves='4' seed='47' stitchTiles='stitch'/>\
<feColorMatrix type='matrix' values='0 0 0 0 0.45  0 0 0 0 0.45  0 0 0 0 0.48  0 0 0 1 0'/>\
<feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0 1 0 0 0 0 0'/></feComponentTransfer>\
<feComponentTransfer><feFuncA type='linear' slope='0.10'/></feComponentTransfer>\
</filter>\
<rect width='2000' height='2000' filter='url(%23v2)'/></svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='grain' x='0' y='0' width='100%25' height='100%25'>\
<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5' stitchTiles='stitch'/>\
<feColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.40  0 0 0 0 0.43  0 0 0 -0.07 0.04'/>\
</filter>\
<rect width='200' height='200' filter='url(%23grain)'/></svg>");
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  background-size:auto, auto, auto, 1500px 1500px, 2000px 2000px, 200px 200px;
}
.page-body{ flex:1; }
.serif{ font-family:'Shippori Mincho','Yu Mincho',serif; }
.eyebrow{
  font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.24em;
  color:var(--gold); font-size:13px; text-transform:uppercase;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- ヘッダー ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(18px,4vw,56px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.2);
}
.brand{ display:flex; flex-direction:column; gap:3px; }
.brand .mark{
  font-family:'Shippori Mincho','Yu Mincho',serif; font-weight:800; font-size:23px;
  letter-spacing:.12em; color:var(--ink);
}
.brand .mark::after{
  content:""; display:block; width:38px; height:2px; margin-top:5px;
  background:linear-gradient(90deg,var(--gold-bright),transparent);
}
.brand .sub{ font-size:9.5px; letter-spacing:.34em; color:var(--ink-faint); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.btn-ghost{
  display:inline-block; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  padding:9px 18px; border-radius:999px; font-size:13px; letter-spacing:.03em; transition:.2s;
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{ border-color:var(--gold-bright); color:var(--gold); box-shadow:var(--shadow-md); }

/* ------------------------------------------------------------
   ハンバーガーメニュー（2026-10-19）

   ボタンを横に並べると画面幅によって文字が切れて読めなかったため、
   すべての画面幅でハンバーガーに統一した。

   ★ 畳むのは <html class="js"> のときだけ。
     JavaScript が動かない環境では、従来どおりリンクが横に並ぶ
     （開けないメニューだけが残る、という状態を作らないため）。
   ------------------------------------------------------------ */
.nav-toggle{ display:none; }

html.js .nav-toggle{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  padding:9px 15px; border-radius:999px; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:.2s;
  font-family:inherit; font-size:11px; letter-spacing:.16em;
}
html.js .nav-toggle:hover{ border-color:var(--gold-bright); color:var(--gold); box-shadow:var(--shadow-md); }
html.js .nav-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.nav-toggle-bars{ display:block; width:16px; }
.nav-toggle-bars span{
  display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .22s, opacity .18s;
}
.nav-toggle-bars span + span{ margin-top:4px; }
.nav-toggle-text{ line-height:1; }

/* 開いているときは×印にする */
body.nav-open .nav-toggle-bars span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
body.nav-open .nav-toggle-bars span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle-bars span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

html.js .nav-actions{
  position:absolute; top:100%; right:clamp(18px,4vw,56px); z-index:2;
  flex-direction:column; align-items:stretch; gap:0;
  min-width:212px; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
html.js body.nav-open .nav-actions,
body.nav-open .nav-actions{ opacity:1; visibility:visible; transform:translateY(0); }

/* メニューの中では、丸いボタンではなく行として並べる */
html.js .nav-actions .btn-ghost{
  display:block; background:transparent; border:0; box-shadow:none;
  border-radius:4px; padding:12px 14px; font-size:14px; color:var(--ink);
  text-align:left; white-space:nowrap;
}
html.js .nav-actions .btn-ghost:hover{ background:var(--gold-wash); color:var(--gold); }
html.js .nav-actions .btn-ghost + .btn-ghost{ border-top:1px solid var(--line-soft); }
html.js .nav-actions .admin-link{ color:var(--ink-faint); font-size:12.5px; }

/* メニューの外をタップしたときに閉じるための透明な層。
   ★ DOM 上はメニューより後ろにあるので、z-index を付けないと
     メニューの上に乗ってリンクが押せなくなる。必ずメニューより下に置く。 */
.nav-backdrop{ position:fixed; inset:0; z-index:1; }
.nav-backdrop[hidden]{ display:none; }

@media (max-width:620px){
  .topbar{ padding:14px 16px; }
  .brand .mark{ font-size:19px; letter-spacing:.09em; white-space:nowrap; }
  .brand .mark::after{ width:30px; margin-top:4px; }
  .brand .sub{ font-size:8px; letter-spacing:.2em; white-space:nowrap; }
  html.js .nav-toggle{ padding:9px 13px; }
  html.js .nav-actions{ right:16px; min-width:200px; }
  /* 畳めない環境（JS無効）だけ、従来どおり詰めて並べる */
  html:not(.js) .nav-actions .btn-ghost{ padding:8px 14px; font-size:12px; white-space:nowrap; }
  html:not(.js) .nav-actions .admin-link{ display:none; }
}

/* ---------- ヒーロー・検索 ---------- */
.hero{ padding:60px clamp(18px,4vw,56px) 20px; text-align:center; }
.hero h1{
  font-family:'Shippori Mincho','Yu Mincho',serif; font-weight:800;
  font-size:clamp(27px,4.4vw,45px); line-height:1.42; margin:16px 0 10px; letter-spacing:.02em;
  line-break:strict;
}
@media (max-width:620px){
  .hero{ padding-top:40px; }
  .hero h1{ font-size:24px; line-height:1.5; }
  .hero p.lead{ font-size:13.5px; line-height:1.9; }
}
.hero h1 .accent{ color:var(--wine); }
.hero p.lead{ color:var(--ink-soft); font-size:14.5px; max-width:560px; margin:0 auto; line-height:2; }

.search-panel{
  max-width:1060px; margin:36px auto 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:24px clamp(16px,3vw,30px);
  box-shadow:var(--shadow-lg);
  position:relative;
  text-align:left;
}
/* 上辺の金の細線 */
.search-panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold-bright),#e6d5ac 40%,var(--gold-bright));
  border-radius:4px 4px 0 0;
}
.search-grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr auto;
  gap:14px;
}
@media (max-width:1000px){ .search-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .search-grid{ grid-template-columns:1fr; } }
.field label{
  display:block; font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint);
  margin-bottom:7px; font-weight:700;
}
.field input,.field select{
  width:100%; background:var(--surface-soft); border:1px solid var(--line);
  color:var(--ink); padding:12px 13px; border-radius:3px; font-size:14px; outline:none; transition:.15s;
}
.field input::placeholder{ color:#b4aca2; }
.field input:focus,.field select:focus{ border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(154,123,53,.12); }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; }
.field-submit{ display:flex; align-items:flex-end; }
.btn-search{
  width:100%; background:var(--ink); border:none; color:#fff;
  padding:0 30px; height:45px; border-radius:3px; font-weight:700; font-size:14px;
  letter-spacing:.08em; transition:.2s; white-space:nowrap; box-shadow:var(--shadow-sm);
}
.btn-search:hover{ background:var(--wine); box-shadow:var(--shadow-md); }
.panel-note{ margin:14px 0 0; font-size:12px; color:var(--ink-faint); }

/* ------------------------------------------------------------
   トップページ 特集バナー（v1.5.0 / 2026-10-08）

   ・縦横比を 3:1 で固定する。
     指定しないと縦長の画像を入れたときにファーストビューが
     埋まってしまう。はみ出しは中央でトリミングする。
   ・スマホでは 16:9 にする（3:1 だと細すぎて何も見えない）。
   ・複数枚あるときは手動の横スクロール。自動では動かさない。
   ------------------------------------------------------------ */
.banner-strip{
  max-width:1180px; margin:26px auto 0; padding:0 clamp(18px,4vw,56px);
}
.banner-track{ display:flex; gap:14px; }
.banner-strip.is-multi .banner-track{
  overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; padding-bottom:10px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.banner-strip.is-multi .banner-track::-webkit-scrollbar{ height:6px; }
.banner-strip.is-multi .banner-track::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:999px;
}
.banner-item{
  position:relative; display:block; flex:1 1 100%; min-width:0;
  border-radius:3px; overflow:hidden; background:var(--marble-deep);
  box-shadow:var(--shadow-md); scroll-snap-align:start;
}
.banner-strip.is-multi .banner-item{ flex:0 0 100%; }
.banner-item img{
  display:block; width:100%; height:auto;
  aspect-ratio:3 / 1; object-fit:cover; object-position:center 30%;
}
a.banner-item{ transition:.2s; }
a.banner-item:hover{ box-shadow:var(--shadow-lg); transform:translateY(-1px); }
a.banner-item:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.banner-caption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
  padding:34px 22px 16px;
  background:linear-gradient(transparent, rgba(20,16,12,.72));
  color:#fff;
}
.banner-title{
  font-family:'Shippori Mincho','Yu Mincho',serif;
  font-size:19px; font-weight:800; letter-spacing:.04em;
}
.banner-copy{ font-size:13px; color:rgba(255,255,255,.88); letter-spacing:.04em; }
.banner-caption .ad-badge{ background:rgba(255,255,255,.92); color:var(--ink); }
@media (max-width:620px){
  .banner-strip{ margin-top:16px; }
  .banner-item img{ aspect-ratio:16 / 9; }
  .banner-caption{ padding:26px 14px 12px; }
  .banner-title{ font-size:15.5px; }
  .banner-copy{ font-size:12px; }
}

/* ---------- アイコン検索 ---------- */
.quick-filters{
  max-width:1180px; margin:44px auto 0; padding:0 clamp(18px,4vw,56px);
  display:flex; flex-direction:column; gap:28px;
}
.quick-block .quick-label{
  font-size:11px; letter-spacing:.18em; color:var(--ink-faint); font-weight:700;
  margin-bottom:16px; display:flex; align-items:center; gap:12px;
}
.quick-block .quick-label::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ------------------------------------------------------------
   業種／都道府県／人気エリアの横スクロール（2026-10-08）

   指やマウスで送る「手動スクロール」。自動では動かさない。
   自動で流れる実装（マーキー）にすると
     ・押したい対象が動くのでタップしづらい
     ・WCAG 2.2.2（動きは停止できること）に反する
     ・JSで要素を複製してループさせると同じ内部リンクが重複する
   ため採用しない。CSS だけで成立させているので、
   JS が無効でもスクロールはできる（矢印ボタンだけが出ない）。
   ------------------------------------------------------------ */
.quick-block{ position:relative; }
.quick-icons{
  display:flex; gap:14px; flex-wrap:nowrap;          /* 折り返さず横一列 */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;                      /* 端で履歴を戻さない */
  -webkit-overflow-scrolling:touch;
  /* 左右に padding を入れると、scroll-snap が1枚目をその分ずらして
     先頭のチップが矢印の下に潜り込む。横の padding は入れない。 */
  padding:2px 0 12px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.quick-icons::-webkit-scrollbar{ height:6px; }
.quick-icons::-webkit-scrollbar-track{ background:transparent; }
.quick-icons::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.quick-icons:hover::-webkit-scrollbar-thumb{ background:var(--gold-soft); }
.quick-chip{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:88px; flex:0 0 88px;                          /* 縮まず横に並ぶ */
  scroll-snap-align:start;
}

/* 端のぼかしは入れない。
   背景が大理石のテクスチャなので、単色のグラデーションを重ねると
   帯状の汚れに見える。続きがあることは
   「チップが途中で切れていること」と矢印ボタンで十分に伝わる。 */

/* 矢印ボタン（JSが有効で、かつ実際にはみ出しているときだけ出す） */
.quick-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-md); cursor:pointer;
  display:none; align-items:center; justify-content:center; padding:0;
  color:var(--ink-soft); font-size:15px; line-height:1;
}
.quick-nav:hover{ border-color:var(--gold-bright); color:var(--gold); }
.quick-nav:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.quick-nav.prev{ left:-4px; }
.quick-nav.next{ right:-4px; }
/* 画面が広いときは左右の余白に逃がし、チップの上に被らないようにする
   （1292px 以上で余白が 51px 以上になり、34px のボタンが収まる） */
@media (min-width:1292px){
  .quick-nav.prev{ left:-45px; }
  .quick-nav.next{ right:-45px; }
}
.quick-block.can-prev .quick-nav.prev,
.quick-block.can-next .quick-nav.next{ display:flex; }
@media (hover:none){ .quick-nav{ display:none !important; } }   /* 指で送れるので出さない */
.quick-chip .circle{
  width:60px; height:60px; border-radius:50%; background:var(--surface);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:.2s; box-shadow:var(--shadow-sm);
}
.quick-chip .circle svg{ width:23px; height:23px; stroke:var(--ink-soft); fill:none; }
.quick-chip .label{ font-size:11.5px; color:var(--ink-soft); text-align:center; line-height:1.4; transition:.2s; }
.quick-chip:hover .circle{ border-color:var(--gold-bright); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.quick-chip:hover .label{ color:var(--gold); }
.quick-chip.active .circle{ background:var(--gold-wash); border-color:var(--gold); }
.quick-chip.active .circle svg{ stroke:var(--gold); }
.quick-chip.active .label{ color:var(--gold); font-weight:700; }

/* ---------- セクション見出し ---------- */
.section-head{ max-width:1180px; margin:64px auto 22px; padding:0 clamp(18px,4vw,56px); }
.section-head h2{
  font-family:'Shippori Mincho','Yu Mincho',serif; font-size:24px; font-weight:800;
  margin:8px 0 8px; letter-spacing:.04em;
}
.section-head p{ color:var(--ink-soft); font-size:13px; margin:0; }

.result-meta{
  max-width:1180px; margin:38px auto 16px; padding:0 clamp(18px,4vw,56px);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.result-meta h2{ font-family:'Shippori Mincho','Yu Mincho',serif; font-size:20px; font-weight:700; margin:0; }
.result-meta .count{ color:var(--gold); font-size:24px; font-family:'Cormorant Garamond',serif; }
.sort-inline{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; }
.sort-inline select{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:3px; padding:8px 11px; font-size:12.5px; cursor:pointer;
}

/* ---------- カード ---------- */
.grid{
  max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,56px) 44px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:24px;
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  transition:.22s; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow-sm);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold-bright); }
.card.is-platinum::after,.card.is-gold::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
}
.card.is-platinum::after{ background:linear-gradient(90deg,#aab3c2,#dfe4ec,#aab3c2); }
.card.is-gold::after{ background:linear-gradient(90deg,var(--gold-bright),#eddfbc,var(--gold-bright)); }
.card .photo{
  height:158px; position:relative; display:flex; align-items:center; justify-content:center;
  font-family:'Shippori Mincho','Yu Mincho',serif; font-size:42px; font-weight:800;
  color:#d8d1c6; overflow:hidden; background:var(--marble-deep);
}
.card .photo img{ width:100%; height:100%; object-fit:cover; }
.card.has-rank .photo .badge{ left:48px; }
.card .photo .badge{
  position:absolute; top:12px; left:12px; background:rgba(255,255,255,.94);
  border:1px solid var(--line); color:var(--ink-soft); font-size:10.5px;
  padding:4px 10px; border-radius:2px; letter-spacing:.06em; box-shadow:var(--shadow-sm);
}
.card .body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card .name{ font-family:'Shippori Mincho','Yu Mincho',serif; font-weight:700; font-size:17.5px; letter-spacing:.02em; }
.card .loc{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; }
.card .catch{ font-size:12.5px; color:var(--ink-soft); line-height:1.8; flex:1; }
.card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px;
  padding-top:12px; border-top:1px solid var(--line-soft); }
.wage{ color:var(--wine); font-weight:700; font-size:14px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ font-size:10.5px; color:var(--gold); background:var(--gold-wash);
  border:1px solid #e8dcc2; padding:3px 9px; border-radius:2px; }
.empty{ grid-column:1/-1; text-align:center; padding:76px 20px; color:var(--ink-faint);
  background:var(--surface); border:1px solid var(--line); border-radius:4px; }
.empty .serif{ font-size:19px; color:var(--ink); display:block; margin-bottom:10px; }

/* 広告表記バッジ（景表法のステマ規制対応。見出しの直後に必ず出す） */
.ad-badge{
  display:inline-block; vertical-align:middle; margin-left:10px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; line-height:1;
  padding:5px 10px; border-radius:2px;
  background:var(--ink); color:#fff; white-space:nowrap;
}
.ad-badge.subtle{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); }

/* PR・順位（広告であることの明示） */
.pr-flag{ position:absolute; top:12px; right:12px; z-index:2;
  font-size:9.5px; letter-spacing:.14em; padding:3px 8px; border-radius:2px;
  background:rgba(255,255,255,.94); border:1px solid var(--line); color:var(--ink-faint); }
.rank-num{ position:absolute; top:0; left:0; z-index:2; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:700;
  background:var(--ink); color:#f3e7c9; }
.plan-chip{ font-size:10px; letter-spacing:.12em; padding:4px 11px; border-radius:2px; border:1px solid; }
.plan-chip.platinum{ color:var(--platinum); border-color:#c4cad4; background:#f2f4f7; }
.plan-chip.gold{ color:var(--gold); border-color:#e2d3b0; background:var(--gold-wash); }
.plan-chip.normal{ color:var(--ink-faint); border-color:var(--line); }

/* ---------- 詳細 ---------- */
.detail-wrap{ max-width:840px; margin:0 auto; padding:30px clamp(18px,4vw,56px) 90px; }
.back{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:13px; margin-bottom:20px; }
.back:hover{ color:var(--gold); }
.detail-photo{
  width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; position:relative;
  background:var(--marble-deep); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  font-family:'Shippori Mincho','Yu Mincho',serif; font-size:60px; color:#d8d1c6; font-weight:800;
}
.detail-photo img{ width:100%; height:100%; object-fit:cover; }
.detail-head{ margin-top:28px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.detail-head .eyebrow{ display:block; margin-bottom:8px; }
.detail-head h1{ font-family:'Shippori Mincho','Yu Mincho',serif; font-size:clamp(25px,3.4vw,33px);
  margin:0 0 8px; font-weight:800; letter-spacing:.03em; }
.detail-head .loc{ color:var(--ink-soft); font-size:14px; }

/* SNS（ブランドカラー） */
.sns-row{ display:flex; gap:10px; }
.sns-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; background:var(--surface);
  transition:.2s; box-shadow:var(--shadow-sm);
}
.sns-btn svg{ width:21px; height:21px; }
.sns-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.sns-btn.ig:hover{ border-color:#D62976; }
.sns-btn.tt:hover{ border-color:#25F4EE; }
.sns-btn.disabled{ opacity:.3; pointer-events:none; filter:grayscale(1); }
/* 白地では TikTok の白い輪郭が見えないため、本体を黒にする */
.sns-tt g:last-child{ stroke:#0b0b0b; }

.detail-stats{ display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 8px; }
.stat-chip{ background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:12px 18px; box-shadow:var(--shadow-sm); }
.stat-chip .k{ font-size:10px; color:var(--ink-faint); letter-spacing:.12em; font-weight:700; }
.stat-chip .v{ font-size:15.5px; color:var(--ink); font-weight:700; margin-top:4px; }
.detail-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.section-title{
  font-family:'Shippori Mincho','Yu Mincho',serif; font-size:17px; font-weight:700;
  margin:36px 0 14px; padding-bottom:10px; border-bottom:2px solid var(--gold-bright);
  display:inline-block; padding-right:30px;
}
.desc{ color:var(--ink-soft); line-height:2.1; font-size:14.5px; white-space:pre-wrap; }
.info-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.info-table th{ text-align:left; width:32%; color:var(--ink-faint); font-weight:400;
  padding:13px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.info-table td{ color:var(--ink-soft); padding:13px 0; border-bottom:1px solid var(--line); }

/* ---------- 応募・LINE ---------- */
.apply-bar{
  margin-top:40px; padding:26px; border-radius:4px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-md);
  border-top:3px solid var(--gold-bright);
}
.apply-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-apply{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wine); color:#fff; border:none; padding:15px 34px;
  border-radius:999px; font-weight:700; font-size:14.5px; letter-spacing:.04em; transition:.2s;
  box-shadow:0 4px 14px rgba(140,47,74,.22);
}
.btn-apply:hover{ background:#75253c; transform:translateY(-1px); }
.btn-line{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--line-green); color:#fff; border:none; padding:15px 30px; border-radius:999px;
  font-weight:700; font-size:14.5px; transition:.2s; box-shadow:0 4px 14px rgba(6,199,85,.25);
}
.btn-line:hover{ background:#05b34c; transform:translateY(-1px); }
.btn-line svg{ width:20px; height:20px; }
.btn-line.disabled{ background:#cfe9d8; color:#fff; pointer-events:none; box-shadow:none; }
.apply-bar .info{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:16px; }

/* ---------- 固定ページ ---------- */
.doc-wrap{ max-width:800px; margin:0 auto; padding:46px clamp(18px,4vw,56px) 90px; }
.doc-wrap h1{ font-family:'Shippori Mincho','Yu Mincho',serif; font-size:28px; margin:0 0 30px;
  letter-spacing:.04em; }
.doc-body{ color:var(--ink-soft); font-size:14.5px; line-height:2.1;
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  padding:34px clamp(20px,4vw,44px); box-shadow:var(--shadow-sm); }
.doc-body h2{ font-family:'Shippori Mincho','Yu Mincho',serif; color:var(--ink); font-size:19px;
  margin:36px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.doc-body h2:first-child{ margin-top:0; }
.doc-body h3{ color:var(--gold); font-size:15px; margin:28px 0 8px; }
.doc-body table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:13.5px; }
.doc-body th,.doc-body td{ border:1px solid var(--line); padding:11px 13px; text-align:left; }
.doc-body th{ background:var(--gold-wash); color:var(--ink-soft); font-weight:700; white-space:nowrap; }
.doc-body ul{ padding-left:1.3em; }
.doc-body a{ color:var(--gold); text-decoration:underline; }

/* ---------- フッター（控えめに） ---------- */
.site-footer{ border-top:1px solid var(--line); background:rgba(255,255,255,.7); margin-top:50px; }
.footer-inner{ max-width:1180px; margin:0 auto; padding:38px clamp(18px,4vw,56px) 28px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.footer-brand .mark{ font-family:'Shippori Mincho','Yu Mincho',serif; font-size:15px;
  letter-spacing:.14em; color:var(--ink-soft); }
.footer-brand .note{ font-size:11px; color:var(--ink-faint); margin-top:8px; line-height:1.9; max-width:440px; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; transition:.2s; }
.footer-links a:hover{ color:var(--gold); }
.footer-copy{ text-align:center; font-size:10.5px; color:#a89f95; padding:0 20px 26px; letter-spacing:.08em; }

/* ---------- お知らせ ---------- */
.flash{ max-width:1180px; margin:18px auto 0; padding:0 clamp(18px,4vw,56px); }
.flash div{ border-radius:3px; padding:13px 17px; font-size:13.5px; margin-bottom:8px; }
.flash .ok{ background:var(--gold-wash); border:1px solid #e2d3b0; color:#7a6128; }
.flash .ng{ background:#fbeef1; border:1px solid #e9c6cf; color:var(--wine); }

/* ---------- ページャ ---------- */
.pager{ display:flex; gap:8px; justify-content:center; padding:14px 0 70px; }
.pager a,.pager span{ min-width:38px; text-align:center; padding:9px 11px; border-radius:3px;
  border:1px solid var(--line); font-size:13px; color:var(--ink-soft); background:var(--surface); }
.pager a:hover{ border-color:var(--gold-bright); color:var(--gold); }
.pager .cur{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- ステージング（テスト環境）の帯 ---------- */
.staging-bar{
  position:sticky; top:0; z-index:60;
  background:repeating-linear-gradient(135deg,#b3243f,#b3243f 12px,#9c1f37 12px,#9c1f37 24px);
  color:#fff; text-align:center; font-size:12.5px; letter-spacing:.06em;
  padding:9px 14px; line-height:1.6;
}
.staging-bar strong{ letter-spacing:.2em; margin-right:4px; }
/* 帯のぶんヘッダーの吸着位置を下げる */
body.is-staging .topbar{ top:38px; }
@media (max-width:620px){ body.is-staging .topbar{ top:52px; } }

/* ============================================================
   アンバサダー（v1.3）
   カードは店舗と同じ .card を使い、写真だけ縦長にして人物向けにする。
   PR表記（.pr-flag / .ad-badge）は店舗と共通のものをそのまま使う。
   ============================================================ */
.card.cast-card .photo.cast-photo{ height:230px; background:var(--marble-deep); }
.card.cast-card .photo.cast-photo img{ object-position:center 22%; }
.card.cast-card .kana{ font-size:11px; color:var(--ink-faint); letter-spacing:.08em; margin-top:-4px; }

/* 兼任アンバサダーの帯 */
.card.cast-card .photo .badge{ background:var(--gold-wash); border-color:#e2d3b0; color:var(--gold); }

/* 詳細ページ：人物写真は店舗より縦長に */
.cast-detail-photo{
  width:100%; max-width:460px; aspect-ratio:4/3; margin:0 auto 26px;
  background:var(--marble-deep); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-family:'Shippori Mincho','Yu Mincho',serif; font-size:64px; color:#d8d1c6;
  box-shadow:var(--shadow-md);
}
.cast-detail-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }

/* 検索結果に差し込むアンバサダー枠 */
.cast-strip{ max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,56px) 10px; }
.cast-strip .grid{ padding-bottom:18px; }

/* 特別枠（メインアンバサダーが都道府県の 1〜3位の上に立つ枠） */
.card.cast-card.is-special{ border-color:var(--gold-bright); box-shadow:var(--shadow-md); }
.card.cast-card.is-special::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold-bright),#eddfbc,var(--gold-bright));
}
/* アンバサダーのカードの角には番号を出さない。
   2026-10-08：「特別枠」のタグを削除（.rank-num.is-special は未使用）
   2026-10-19：1・2・3 の順位番号も削除（序列に見えるため）
   特別枠であることは、金色の枠線＋上辺のライン＋本文の「メインアンバサダー」で示す。 */
.card.cast-card .photo .badge{ left:12px; }
.card.cast-card.is-special .photo .badge{
  background:var(--ink); border-color:var(--ink); color:#f3e7c9; font-size:10px;
}
/* 特別枠のセクション見出し（1〜3位と視覚的に分ける） */
.slot-label{
  max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,56px) 10px;
  font-size:11.5px; letter-spacing:.12em; color:var(--ink-faint);
}
.slot-label strong{ color:var(--gold); font-weight:700; }
/* アンバサダーをページ先頭に置いたときの余白調整 */
.page-body > .section-head:first-child{ margin-top:34px; }
.card.cast-card .special-note{
  display:inline-block; align-self:flex-start; font-size:10.5px; letter-spacing:.08em;
  color:var(--gold); background:var(--gold-wash); border:1px solid #e8dcc2;
  padding:3px 9px; border-radius:2px; margin-top:-3px;
}

/* ------------------------------------------------------------
   アンバサダーへの導線タグ（検索バーの直上）
   トップには一覧を出さず、このボタンからアンバサダーページへ送る
   ------------------------------------------------------------ */
.amb-tag-row{ display:flex; justify-content:center; margin:26px 0 -2px; padding:0 18px; }
.amb-tag{
  display:inline-flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:center;
  padding:11px 20px; border-radius:999px;
  background:linear-gradient(180deg,#fdfaf3,var(--gold-wash));
  border:1px solid #e4d5b4; box-shadow:var(--shadow-sm);
  transition:.2s; max-width:100%;
}
.amb-tag:hover{ border-color:var(--gold-bright); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.amb-tag .ic{ display:inline-flex; color:var(--gold); }
.amb-tag .t{ font-weight:700; font-size:13.5px; letter-spacing:.06em; color:var(--ink); }
.amb-tag .s{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; }
.amb-tag .ar{ font-size:13px; color:var(--gold); }
.amb-tag .ad-badge{ margin-left:0; font-size:9.5px; padding:3px 7px; }

@media (max-width:520px){
  .amb-tag{ gap:7px; padding:10px 15px; }
  .amb-tag .t{ font-size:12.5px; }
}
/* アンバサダーのセクション見出し（人数と「もっと見る」） */
.cast-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cast-head-row h2{ margin:0; }
.slot-count{ font-family:'Cormorant Garamond',serif; font-size:17px; color:var(--ink-faint);
  letter-spacing:.06em; margin-left:10px; vertical-align:middle; }
.btn-more{ font-size:12px; padding:7px 15px; white-space:nowrap; }

/* ============================================================
   メインアンバサダー — ページ最上部の専用枠（特別感）
   通常のカードとは別扱い。3枠を必ず横に並べる。
   ============================================================ */
.main-amb-band{
  background:linear-gradient(180deg,#fbf7ef 0%, #f6efe2 60%, rgba(246,239,226,0) 100%);
  border-top:1px solid #ece0c8; border-bottom:1px solid #ece0c8;
  padding:34px 0 40px; margin:0 0 10px;
}
.main-amb-head{ max-width:1180px; margin:0 auto 20px; padding:0 clamp(18px,4vw,56px); text-align:center; }
.main-amb-head .eyebrow{ display:block; margin-bottom:8px; }
.main-amb-head h2{
  font-family:'Shippori Mincho','Yu Mincho',serif; font-size:clamp(21px,3vw,27px);
  margin:0 0 8px; letter-spacing:.06em;
}
.main-amb-head p{ color:var(--ink-soft); font-size:12.5px; margin:0; }

/* 3枠は必ず横並び（枠数が変わっても等分） */
.main-amb-grid{
  max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,56px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}

.card.cast-card.is-main{
  border:1px solid var(--gold-bright); border-radius:4px;
  box-shadow:0 10px 30px rgba(120,95,45,.13);
  background:#fff;
}
.card.cast-card.is-main::after{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--gold),#f0e0bb,var(--gold));
}
.card.cast-card.is-main .photo.cast-photo{
  height:auto; aspect-ratio:4/3;              /* 横長。縦に伸びないようにする */
  background:var(--marble-deep);
}
.card.cast-card.is-main .body{ padding:16px 18px 20px; gap:7px; }
.card.cast-card.is-main .main-label{
  font-family:'Cormorant Garamond',serif; font-size:10.5px; letter-spacing:.24em;
  color:var(--gold); text-transform:uppercase;
}
.card.cast-card.is-main .name{ font-size:19px; }
/* .rank-num.is-main は 2026-10-19 の指示で未使用（番号を出さないため）。 */
.card.cast-card.is-main.is-empty{ opacity:.55; box-shadow:none; }
.card.cast-card.is-main.is-empty .photo.cast-photo{ background:#f1ece2; }
.card.cast-card.is-main.is-empty .name{ color:var(--ink-faint); font-size:15px; }

/* ============================================================
   都道府県のカードも横長にして、ページが縦に伸びないようにする
   ============================================================ */
.card.cast-card .photo.cast-photo{ height:auto; aspect-ratio:4/3; }

/* 画面が狭いときは、カード自体を横並び（写真＋本文）にする */
@media (max-width:760px){
  .main-amb-grid{ grid-template-columns:1fr; gap:14px; }
  .card.cast-card{ flex-direction:row; align-items:stretch; }
  .card.cast-card .photo.cast-photo{
    width:40%; min-width:118px; max-width:170px; aspect-ratio:1/1; height:auto; flex:none;
  }
  .card.cast-card .body{ padding:13px 14px; gap:5px; }
  .card.cast-card .name{ font-size:16px; }
  .card.cast-card.is-main .name{ font-size:16.5px; }
  .card.cast-card .catch{ font-size:12px; }
  .card.cast-card .pr-flag{ top:8px; right:8px; }
}

/* 都道府県のカードは1行に多く並べる（特別枠＋1〜3位＝4枚が横一列） */
.grid.cast-grid{ grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:18px; padding-bottom:30px; }
@media (max-width:760px){ .grid.cast-grid{ grid-template-columns:1fr; gap:12px; } }

/* パンくず */
.breadcrumb{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.03em;
  margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; line-height:1.9; }
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb .cur{ color:var(--ink); }
.result-meta + .breadcrumb, .page-body > .breadcrumb{ max-width:1180px; margin-left:auto; margin-right:auto;
  padding:0 clamp(18px,4vw,56px); }
.page-body > .breadcrumb{ margin-top:18px; }

/* ============================================================
   コラム（SEOブログ）
   ============================================================ */
.col-cats{ max-width:1180px; margin:0 auto 6px; padding:0 clamp(18px,4vw,56px);
  display:flex; flex-wrap:wrap; gap:9px; }
.col-cat{ font-size:12px; letter-spacing:.04em; padding:7px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); transition:.18s; }
.col-cat:hover{ border-color:var(--gold-bright); color:var(--gold); }
.col-cat.on{ background:var(--ink); border-color:var(--ink); color:#f3e7c9; }
.col-cat small{ opacity:.65; margin-left:4px; }
.col-cat.sm{ padding:4px 11px; font-size:11px; }

.grid.col-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.card.col-card .photo.col-photo{ height:auto; aspect-ratio:16/9; background:var(--marble-deep); }
.card.col-card .photo.col-photo img{ width:100%; height:100%; object-fit:cover; }
.card.col-card .ph-mark{ font-family:'Cormorant Garamond',serif; font-size:17px;
  letter-spacing:.3em; color:#cfc7b9; }
.col-date{ font-family:'Cormorant Garamond',serif; font-size:13px; letter-spacing:.1em; color:var(--ink-faint); }
.card.col-card .name{ font-size:16.5px; line-height:1.6; }

/* 記事本文 */
.col-article{ max-width:760px; margin:0 auto; }
.col-head{ margin-bottom:22px; }
.col-meta{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.col-head h1{ font-family:'Shippori Mincho','Yu Mincho',serif; font-size:clamp(22px,3.4vw,31px);
  line-height:1.55; margin:0 0 10px; }
.col-author{ font-size:12px; color:var(--ink-faint); }
.col-hero{ margin:0 0 30px; border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.col-hero img{ width:100%; display:block; }

.col-body{ font-size:15px; line-height:2.05; color:var(--ink); }
.col-body p{ margin:0 0 1.6em; }
.col-body h2{ font-family:'Shippori Mincho','Yu Mincho',serif; font-size:20px; margin:2.4em 0 .9em;
  padding-left:14px; border-left:3px solid var(--gold); line-height:1.6; }
.col-body h3{ font-size:16.5px; margin:2em 0 .7em; font-weight:700; }
.col-body ul, .col-body ol{ margin:0 0 1.6em; padding-left:1.5em; }
.col-body li{ margin-bottom:.5em; }
.col-body a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.col-body img{ max-width:100%; height:auto; border-radius:4px; margin:1em 0; }
/* 本文に差し込んだ画像とキャプション（2026-10-19） */
.col-body figure{ margin:2em 0; }
.col-body figure img{ margin:0; display:block; width:100%; }
.col-body figcaption{
  margin-top:9px; font-size:12.5px; line-height:1.8; color:var(--ink-faint); text-align:center;
}
.col-body blockquote{ margin:0 0 1.6em; padding:14px 18px; background:var(--surface);
  border-left:3px solid var(--line); color:var(--ink-soft); font-size:14px; }
.col-body table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:0 0 1.6em; }
.col-body th, .col-body td{ border:1px solid var(--line); padding:9px 11px; text-align:left; }
.col-body th{ background:var(--surface); }
.col-body hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }
.col-body pre{ background:var(--surface); border:1px solid var(--line); padding:14px;
  border-radius:4px; overflow-x:auto; font-size:13px; }