/* 営業担当が業務中に開く道具。装飾より、探しやすさと押しやすさを優先する。 */

/*
 * 明るい配色に固定する。ダークモードには追随しない。
 *
 * この画面は、面識のない会社へ送ったメールのリンクから開かれる。
 * 相手のOS設定次第で黒い画面が出るかどうかが決まる、という状態にしてはいけない。
 * 実際に「ビジネスっぽくない、開発者っぽい」と言われた。
 * 中身を見る前に印象で閉じられるのが、いちばん損な離脱。
 *
 * 濃い緑がかった黒（#111512）に薄緑の文字、をやめた。
 * 背景は白に近い無彩色、文字は黒に近い無彩色、線は薄いグレー。
 * 色を使うのは「連絡先の状態」と「押せるもの」だけにする。
 */
:root{
  --ground:#F4F5F7;      /* 画面の地。純白にしないのは、白いカードを浮かせるため */
  --card:#FFFFFF;
  --ink:#1B2126;         /* 本文。真っ黒より少し明るくして目の負担を減らす */
  --muted:#5F6B76;       /* 補足。本文とのコントラストは保つ */
  --faint:#98A2AC;
  --line:#DFE3E8;
  --line-soft:#EDF0F3;
  /*
   * 緑を続ける。青に振り替えたが、それは判断を誤っていた。
   * 開発者ツールっぽく見えていたのは緑のせいではなく、黒背景＋色面積の広さのせい。
   * 白背景にすれば同じ緑でも印象は変わる。大事なのは色相ではなく色を使う面積。
   */
  --accent:#0F7A35;      /* 押せるもの。ブランドの色でもある */
  --accent-ink:#FFFFFF;
  --accent-soft:#E9F3EC;
  --ok:#146B39;          /* 連絡先が取れている。押せる緑より濃くして、押せるものと見分ける */
  --ok-soft:#E3F0E8;
  /*
   * 「運営会社のみ」の色。
   *
   * オレンジ（警告色）で塗っていたが、これは誤り。
   * この状態は全77件のうち54件、つまり標準の状態であって、異常ではない。
   * 7割を警告色で染めると、商品が壊れているように見える。
   *
   * かといって青緑にはしない。青緑は「良好な連絡経路がある」と読める。
   * 実際には「運営会社は判明したが、営業に使える窓口は未確認」でしかない。
   * 彩度を落としたサンド色なら、その中間を表せる。
   */
  --warn:#725C24;
  --warn-soft:#F6F2E8;
  --shadow:0 1px 2px rgba(27,33,38,.05), 0 6px 20px rgba(27,33,38,.07);
}

*{box-sizing:border-box}
/* display を指定したクラスが hidden 属性に勝ってしまうので、明示的に止める */
[hidden]{display:none !important}
/*
 * 書体。Webフォントは読み込まない。OSの標準に寄せる。
 *
 * Noto Sans JP を読み込んでいたが、やめた。
 * 「まだAI生成サイトっぽく見える」と差し戻されている。
 * 均質すぎる字面と、500中心の太さが、そう見える一因になっていた。
 *
 * Macはヒラギノ、Windowsはメイリオが出るようにする。
 * 游ゴシック / Yu Gothic UI は優先しない。Windowsで細く見えて、
 * 実際に一度「細すぎて読みにくい」と実機で差し戻されている。
 * メイリオは少し古典的だが、読みやすく、普通で、信用の邪魔をしない。
 *
 * 狙いは「洗練された書体を選ぶ」ことではない。
 * 日本の普通の企業サイトを見慣れた人が、書体を意識しない状態にすること。
 *
 * 太さは2段階だけ。500・600は使わない。
 *   700  見出し・押しどころ
 *   400  本文・表・補足
 * 弱い情報は、太さではなく色で区別する。
 *
 * palt は使わない。字間を人工的に締めるより、標準の字面を優先する。
 */
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "メイリオ", sans-serif;
  font-size:15px; line-height:1.7; font-weight:400;
  -webkit-text-size-adjust:100%;
}

/* ---- ヘッダ ---- */
.bar{position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--line)}
.bar-in{
  width:min(1120px, calc(100vw - 48px)); margin:0 auto; padding:.7rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.brand{display:flex; align-items:baseline; gap:.75rem; min-width:0}
.mark{font-weight:700; letter-spacing:.02em; color:var(--accent)}
.scope{font-size:.82rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/*
 * 2026-09-16、ヘッダ右上の「無料閲覧 残り3/3」と「営業リスト 0」を外した。
 * .bar-right はもう使っていないので消した。残すと次に見た人が使えると思う。
 */

/* 無料枠。料金の説明のすぐ下。本文と同じ大きさで、文として読ませる */
.freeline{
  margin:.35rem 0 0; font-size:14px; line-height:1.7; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.freeline.out{color:var(--warn)}

/* 営業リスト。一覧の直前。1件も入っていないうちは出さない（JS側で hidden） */
.mlbar{margin:0 0 10px}
.mlbar[hidden]{display:none}

/* ---- ボタン ---- */
.btn{
  font:inherit; font-size:14px; line-height:1.2; font-weight:700; border-radius:6px; padding:8px 14px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; text-decoration:none; display:inline-block; white-space:nowrap;
}
.btn:hover{border-color:var(--muted)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn.solid{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700}
.btn.solid:hover{filter:brightness(1.08)}
.btn.wide{width:100%; text-align:center; padding:.7rem 1rem; font-size:.95rem}
.btn.ghost{background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:400}
.btn[disabled]{opacity:.45; cursor:default}

/* ---- 本体 ---- */
/*
 * 本体の幅。
 *
 * 62rem（約992px）だと、1400px級の画面で左右の余白が広くなりすぎて、
 * 「Webページの中に表が置いてある」ように見える。主役は一覧なので、
 * データの面積をもう少し取る。上限を決めたうえで、狭い画面では余白を24pxに保つ。
 */
.wrap{width:min(1120px, calc(100vw - 48px)); margin:0 auto; padding:1.6rem 0 5rem}
.lede h1{font-size:32px; line-height:1.3; font-weight:700; margin:0 0 .35rem; text-wrap:balance; letter-spacing:.01em}
.lede .sub{margin:0 0 1.4rem; color:var(--muted); font-size:.9rem}

/*
 * 表の前の導入。
 *
 * 「何の説明もなくいきなり表が出る」と言われて戻した部分。
 * ただし文章では戻さない。一文と図と条件1行だけにして、全体で240px以内に収める。
 * ここが伸びると、また「文字だらけ」に戻る。
 */
.lede-one{margin:0 0 .2rem; font-size:15px; font-weight:700; color:var(--ink)}
.lede-sub{margin:0 0 12px; font-size:13px; color:var(--muted); line-height:1.55}

/*
 * 時間軸。示すのは「開店してからではなく、開店前に見つけられる」という時点だけ。
 *
 * 以前は 求人 → 公式発表 → 開店情報 を軸の上に左から順に置いていた。これは誤り。
 * その順番で出てくるという事実を確かめていない。港区で分かっているのは
 * 「媒体によって見つかる時期が違った例がある」までで、3媒体の前後関係ではない。
 * 図にすると、文章より強く断定して見える。
 *
 * なので3つは軸の点に結びつけない。開業前の期間全体にかかる箱に入れる。
 * 前後関係は表さない。
 *
 * 画像ではなく組んでいるのは、狭い画面で画像内の文字が5pxまで縮んで読めなくなるため。
 * この組み方なら幅が変わっても文字の大きさは変わらない。
 */
.tl{
  margin:0 0 1.2rem; max-width:720px;
  display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:center;
}
.tl-pre{grid-column:1; grid-row:1; margin:0 0 6px; font-size:13px; font-weight:700; color:var(--accent)}
.tl-band{grid-column:1; grid-row:2; height:14px; border-radius:7px; background:var(--accent-soft)}
.tl-end{
  grid-column:2; grid-row:2; margin:0;
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;
}
.tl-end i{display:block; width:2px; height:16px; background:var(--ink)}
/*
 * /app では枠を外す。業務画面なので、一覧に早く着けることを優先する。
 * LPと同じ中身だが、こちらは説明のための箱にしない。
 */
.tl-box{grid-column:1; grid-row:3; margin-top:8px}
.tl-box-h{margin:0 0 8px; font-size:13px; color:var(--muted)}
.tl-src{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.tl-src li{
  font-size:13px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:6px; padding:5px 12px;
}
/* 「など」は媒体ではないので、札にしない */
.tl-src li.etc{background:transparent; color:var(--muted); font-weight:400; padding:5px 2px}
.tl-cap{grid-column:1 / -1; grid-row:4; margin:8px 0 0; font-size:13px; font-weight:700; color:var(--accent)}

/* 条件は1行。ここだけ数字を濃くして、拾い読みできるようにする */
.terms{
  margin:0 0 14px; font-size:13px; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:baseline;
}
.terms b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; margin:0 1px}
.terms .sep{color:var(--faint); margin:0 12px}
.loading{width:min(1120px, calc(100vw - 48px)); margin:3rem auto; color:var(--muted)}
.loading.err{color:var(--warn)}

/* ---- 一覧 ---- */
.tablewrap{overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:.6rem}
table.stores{width:100%; border-collapse:collapse; font-size:14px; line-height:1.5}
.stores th{
  text-align:left; font-weight:700; font-size:12px; line-height:1.4; letter-spacing:.04em;
  color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap;
}
/* 行高56px。文字量に対して余白が足りないと、一覧性より情報量が勝ってしまう */
.stores td{padding:14px 16px; height:56px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.stores tr:last-child td{border-bottom:0}
.stores tr.seen td{background:var(--line-soft)}
.stores tr.open td{background:var(--accent-soft)}
.stores tr.open:hover td{background:var(--accent-soft)}
.stores td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.stores td.act{text-align:right; white-space:nowrap}
.stores td.dim{color:var(--muted)}
.ev{
  display:inline-block; min-width:1.4rem; text-align:center; font-variant-numeric:tabular-nums;
  font-size:12px; line-height:1.2; padding:4px 8px; border-radius:4px;
  background:var(--line-soft); color:var(--muted); font-weight:400;
}
.badge{font-size:.72rem; color:var(--faint); font-weight:400; margin-right:.4rem}

/*
 * 買う導線。
 *
 * 面そのものがリンク。一覧の行が行全体で押せるので、
 * その真下の同じ形の面だけボタンしか押せない、という食い違いをなくす。
 * 中の緑の札はボタンではない。押せる場所を示しているだけ。
 */
.buy{
  margin-top:1.4rem; padding:1.1rem 1.2rem; background:var(--card);
  border:1px solid var(--line); border-radius:.6rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  text-decoration:none; color:inherit; cursor:pointer;
}
/* 行に乗ったときの反応も一覧と揃える。線が濃くなり、緑の札が少し明るくなる */
.buy:hover{border-color:var(--muted)}
.buy:hover .btn.solid{filter:brightness(1.08)}
.buy:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.buy-txt{display:block; min-width:0}
.buy-h{display:block; margin:0; font-weight:700}
.buy-s{display:block; margin:.15rem 0 0; color:var(--muted); font-size:.85rem}

/* ---- パネル ---- */
/*
 * 背後を暗くする幕。濃さを2段階に分ける。
 *
 * 詳細は「一覧の1件を横で詳しく見る」もので、一覧の延長。
 * 強く暗くすると別画面に入ったように見え、どの行を見ているのか分からなくなる。
 * ほとんど暗くせず、代わりに開いている行を薄く塗る（.stores tr.open）。
 *
 * 課金の壁は、ここから先は買わないと進めないという状態の切り替わり。
 * こちらは進行を止めるものなので、はっきり暗くする。
 * 同じ濃さにすると、この2つの重さの違いが画面に出ない。
 */
.veil{position:fixed; inset:0; z-index:30; background:rgba(17,24,39,.28)}
.veil.soft{background:rgba(17,24,39,.08)}
.veil.hard{background:rgba(17,24,39,.28)}
.panel{
  position:fixed; z-index:31; background:var(--card); box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  right:0; top:0; bottom:0; width:min(30rem, 100%); border-left:1px solid var(--line);
}
@media (max-width:640px){
  .panel{top:auto; left:0; width:100%; max-height:88vh; border-left:0; border-top:1px solid var(--line); border-radius:.8rem .8rem 0 0}
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.tag{font-size:.76rem; letter-spacing:.06em; color:var(--muted)}
.x{border:0; background:transparent; color:var(--muted); font-size:1rem; cursor:pointer; padding:.2rem .4rem; line-height:1}
.x:hover{color:var(--ink)}
.panel-body{padding:1.1rem 1.1rem 1.4rem; overflow-y:auto; flex:1 1 auto}
.panel-body h2{font-size:1.15rem; margin:0 0 .9rem; line-height:1.45}
.panel-foot{padding:.9rem 1.1rem; border-top:1px solid var(--line); flex:0 0 auto}

.kv{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5rem .9rem; font-size:.9rem}
.kv dt{color:var(--muted); font-size:.82rem; white-space:nowrap}
.kv dd{margin:0}
.kv dd.none{color:var(--muted)}
.src{margin:1.1rem 0 0; font-size:.78rem; color:var(--muted); border-top:1px solid var(--line-soft); padding-top:.7rem}
.wall-p{margin:.4rem 0; font-size:.9rem; color:var(--muted)}

.ml-item{
  padding:.75rem 0; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:flex-start; gap:.8rem;
}
.ml-item:last-child{border-bottom:0}
.ml-txt{flex:1 1 auto; min-width:0}
.ml-name{font-weight:400}
.ml-meta{font-size:.82rem; color:var(--muted)}
/*
 * 外すボタン。
 * 消す操作なので目立たせない。ただし、あることは分かる濃さにする。
 * 赤にはしない。取り消せる操作で、失うものが無い。
 */
.ml-del{
  flex:0 0 auto; font:inherit; font-size:12px; font-weight:400; line-height:1.2;
  padding:5px 10px; border-radius:4px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
}
.ml-del:hover{border-color:var(--muted); color:var(--ink)}
.ml-del:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ml-empty{color:var(--muted); font-size:.9rem}
/* 追加する理由を、相手の得として先に書く。測定のためだけに押させない */
.ml-why{color:var(--muted); font-size:.82rem; margin:0 0 .6rem; line-height:1.6}

@media (prefers-reduced-motion: no-preference){
  .panel{animation:slide .18s ease-out}
  @keyframes slide{from{transform:translateX(1.5rem); opacity:.4} to{transform:none; opacity:1}}
}

/* 決済の確認待ち。URLに来たこと自体は決済の証拠にしないので、ここで待つ */
.paying{
  position:fixed; left:50%; top:1rem; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:.7rem;
  background:var(--card); border:1px solid var(--line); border-radius:.5rem;
  padding:.7rem 1.1rem; box-shadow:var(--shadow); max-width:min(30rem, calc(100% - 2rem));
}
.paying p{margin:0; font-size:.88rem}
.spin{
  width:1rem; height:1rem; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent);
}
@media (prefers-reduced-motion: no-preference){ .spin{animation:sp .8s linear infinite} }
@keyframes sp{to{transform:rotate(360deg)}}

/* 連絡状況。無料枠を使う前に、その店が営業できる状態かを見せる */
/*
 * 連絡状況。4段階を色で見分けられるようにする。
 *
 *   店舗直通 … 店に直接つながる。いちばん強いので、いちばん濃い緑
 *   会社窓口 … 運営会社の窓口。緑だが一段淡く
 *   会社のみ … 会社は分かるが窓口は未確認。琥珀（注意を促す）
 *   未確認   … 地の色を持たせない。塗ると「何かある」に見えてしまう
 */
.cst{
  font-size:12px; line-height:1.2; font-weight:400; white-space:nowrap;
  padding:5px 9px; border-radius:4px; display:inline-block;
}
/* 店舗に直接つながる。いちばん強い状態なので、唯一の緑 */
.cst.ok{background:var(--ok-soft); color:var(--ok)}
/*
 * 運営会社のみ。77件中54件を占める標準の状態。
 * 「情報はある。ただし直接営業できる状態とは限らない」を、彩度の低いサンドで表す。
 */
.cst.mid{background:#F6F2E8; color:#725C24}
/*
 * 未確認も他の3つと同じ「バッジ」の形にする。
 * 無色にすると、4つが同じ種類の情報だと見えなくなる。
 * 意味色は与えないが、視覚の文法は揃える。
 */
.cst.no{background:var(--line-soft); color:var(--muted); border:none}

/* 価値の説明。初見で「何が嬉しい商品か」が分かるように1文だけ */
.pitch{margin:0 0 .5rem; font-size:.95rem; color:var(--ink)}
.lede .sub{margin-top:0}
/* 開業までの日数。早さが一目で分かるように */

/* 収集済みの範囲。商品の対象（23区）と、いま集まっている範囲を混ぜない */
.cov{margin:.1rem 0 .5rem; font-size:.82rem; color:var(--warn); background:var(--warn-soft);
  display:inline-block; padding:.2rem .6rem; border-radius:.3rem}
/* 使い方は、詳細を開く前に見せる。押した後に気づくのでは遅い */
/* 補足文 12px / 1.5 / 400 */
.note-sm{margin:0 0 18px; font-size:13px; line-height:1.7; color:var(--muted); max-width:46rem}
.howto{margin:0 0 14px; font-size:13px; line-height:1.7; color:var(--muted)}
.howto b{color:var(--ink)}

/* 何を記録しているかの説明への入口。控えめだが、探さなくても見つかる位置に置く */
.pagefoot{
  margin:3rem 0 1rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line-soft);
  text-align:center;
  font-size:.88rem;
}
.pagefoot a{ color:var(--muted); text-decoration:none; }
.pagefoot a:hover{ color:var(--accent); text-decoration:underline; }

/* 決済の事実。抽象的な「安全です」ではなく、何を使っているかを書く */
.pay-note{
  margin:.7rem 0 0; font-size:.78rem; color:var(--muted); line-height:1.7; text-align:center;
}
.pay-note b{color:var(--ink); font-weight:400}

/* ---- ページ送り ---- */
.pager{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin:.9rem .2rem 0; font-size:.84rem;
}
.pg-count{color:var(--muted); font-variant-numeric:tabular-nums}
.pg-nav{display:flex; align-items:center; gap:.2rem}
.pg{
  font:inherit; font-size:.84rem; min-width:2rem; padding:.3rem .5rem;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:.35rem; cursor:pointer; font-variant-numeric:tabular-nums;
}
.pg:hover{border-color:var(--muted)}
.pg.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:400}
.pg-gap{color:var(--faint); padding:0 .15rem}

/* 出どころと、予定が変わりうること。隠さないことが信用の中身 */
.listnote{
  margin:.9rem .2rem 0; font-size:.78rem; color:var(--muted); line-height:1.7;
}

/* ══════════════════════════════════════════════════
   詳細ドロワーのセクション

   7項目を1つの表にフラットに並べていた。
   「住所」と「店舗連絡先」と「情報源」が同じ重さで並ぶと、
   どれを見て判断すればいいのか分からない。意味のまとまりで区切る。
   ══════════════════════════════════════════════════ */
.dsec-badge{margin:0 0 1rem}
.dsec-badge .cst{font-size:.86rem; padding:.3rem .7rem; border-radius:.35rem}
/*
 * 内側にカードを重ねない。ドロワー自体がすでにコンテナ。
 * 箱の中に箱を置くと、枠線が二重になって画面が細かく割れる。
 * 区切りは余白と1pxの線だけで足りる。
 */
.dsec{
  border:0; border-radius:0; background:transparent;
  padding:0 0 20px; margin:0 0 20px;
  border-bottom:1px solid var(--line-soft);
}
.dsec:last-of-type{border-bottom:0; margin-bottom:0; padding-bottom:0}
.dsec h3{
  margin:0 0 12px; font-size:13px; line-height:1.4; font-weight:700; letter-spacing:.03em;
  color:var(--ink); padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.dsec .kv{gap:.55rem .9rem}

/* ══════════════════════════════════════════════════
   課金の壁

   ここは値段を見せる場面。文字を並べるだけだと、
   「いくら払うと何が手に入るのか」が一目で入らない。
   鍵 → 何が開くか → いくら → 何が見えるか、の順に、大きさで差をつける。
   ══════════════════════════════════════════════════ */
.wall-body{text-align:center}
.wall-icon{
  width:3.4rem; height:3.4rem; margin:.6rem auto 1rem;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.wall-body h2{font-size:1.1rem; margin:0 0 .35rem}
.wall-price{
  margin:0 0 1rem; font-weight:700; color:var(--accent);
  font-size:2.1rem; line-height:1.2; font-variant-numeric:tabular-nums;
}
.wall-price .yen{font-size:1rem; margin-left:.15rem; font-weight:400}
.wall-body .wall-p{text-align:center; margin:0 0 1.4rem}
/* ══════════════════════════════════════════════════
   一覧の上。説明文を並べず、事実だけをバッジで置く

   以前は見出しの下に説明が4ブロック続き、本題の表に届くまでに
   5つ読まされていた。初対面で数十秒しか見ない相手には長すぎる。
   外せないのは「収集範囲」と「連絡先の状態は店ごとに違う」の2つ。
   ══════════════════════════════════════════════════ */
/*
 * 上部のメタ情報。
 *
 * 前はグレーの箱に入れたバッジだった。だが「区別したい＝箱で囲う」は安易で、
 * 箱の数だけ画面に部品が増える。ここは押せるものでも状態でもなく、ただの説明。
 * ラベルを薄く、値を本文の濃さにするだけで、十分に読み分けられる。
 * 色も枠も使わず、整列と文字の濃さだけで階層を作る。
 */
.facts{display:flex; flex-wrap:wrap; gap:8px 28px; margin:0 0 10px; font-size:13px; line-height:1.5}
.fact{white-space:nowrap; color:var(--ink)}
.fact .k{color:var(--faint); margin-right:8px}
.fact b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}

/* 購入済みの人にだけ出る、URLを控えてもらう案内。
   注意書きなので、一覧より弱く置く。枠も色も付けない */
.keepurl{margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--faint)}

/* ── 詳細ドロワー：カードの中の優先順位 ──
   カードで分けるだけでは足りない。同じ重さで4項目並ぶと、
   結局どれを見て判断するのか分からない。上下で組を分ける。 */
.dsec .kv.lead dd{font-weight:700; font-size:14px}
.dsec .kv.lead dt{font-size:12px}
.dsec .kv.sub{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-soft);
}
.dsec .kv.sub dt,
.dsec .kv.sub dd{font-size:12px; color:var(--muted)}
.dsec .kv.sub dd{color:var(--muted)}

/* 店名とステータスのまとまりを強くする。間を詰めて1かたまりに見せる */
.panel-body h2{font-size:19px; line-height:1.4; font-weight:700; margin:0 0 8px}
.dsec-badge{margin:0 0 18px}

/* ── 行そのものを押せるようにする ──
   同じ枠線ボタンが縦に20個並ぶと、それが縞模様になり、
   表の中身より操作UIのほうが目立つ。主役は並んだ情報のほう。 */
.stores tr.row{cursor:pointer}
.stores tr.row:hover td{background:var(--line-soft)}
.stores tr.row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.stores td.act{text-align:right; white-space:nowrap; color:var(--faint)}
.go{font-size:13px; font-weight:400; color:var(--faint); white-space:nowrap}
.stores tr.row:hover .go{color:var(--accent)}
.go .arw{margin-left:2px; display:inline-block; transition:transform .12s ease}
.stores tr.row:hover .go .arw{transform:translateX(2px)}
.th-act{width:1%}

/* 情報源は件数だけにしない。どの媒体で確認したかを出す。
   「情報源まで示す」がこの商品の信用の中身なので、画面に出す */
.srcs{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.srcs li{font-size:13px; line-height:1.5}
.srcs a{color:var(--accent); text-decoration:none}
.srcs a:hover{text-decoration:underline}
.srcs .ext{font-size:11px; color:var(--faint); margin-left:3px}
.srcs .none{color:var(--muted)}

/*
 * ここから下はスマホ専用。ファイルの最後に置く。
 *
 * CSSは、同じ強さの指定なら後に書いたほうが勝つ。
 * 実際にこれで一度事故った。メディアクエリを .panel の定義より前に置いたせいで、
 * 全画面にする指定が後ろの .panel に上書きされ、スマホで詳細が全画面にならなかった。
 * 上書きしたい指定は、必ず上書きされる側より後に書く。
 */
/*
 * スマホ（768px以下）
 *
 * 表を横スクロールさせない。指を横に動かさないと列が見えない表は、業務では使えない。
 *
 * ただし、店舗ごとに白い角丸カードを積むのもやめた。
 * 77件を上から見ていく道具なので、カードの角丸と隙間だけで1件あたり十数px増え、
 * スクロール量がそのぶん伸びる。速く走査できることのほうが大事。
 *
 * 白い面は1枚。中を1pxの線で区切る。境界を作るのに、影も角丸も要らない。
 *
 * 1件は3行。
 *   1行目  業態                         開業予定
 *   2行目  エリア
 *   3行目  [連絡状況]  情報源 n件           ›
 */
@media (max-width:768px){
  .wrap{width:calc(100vw - 24px); padding:1.1rem 0 5rem}
  .lede h1{margin-bottom:.4rem}
  /* 条件は3つとも1行に収まらないので、縦に積んで区切りを消す */
  /* 狭い画面では横に並べきれないので縦に積む。区切りは消して1項目1行にする */
  .terms{display:block; line-height:1.85}
  .terms .t{display:block}
  .terms .sep{display:none}
  .bar-in{width:calc(100vw - 24px); padding:.7rem 0}
  .lede h1{font-size:26px; line-height:1.35}

  /* 白い面は1枚。ここが「表」の代わりになる */
  .tablewrap{overflow:visible; background:var(--card); border:1px solid var(--line); border-radius:8px}
  .stores thead{position:absolute; left:-9999px}
  .stores, .stores tbody{display:block; width:100%}
  .stores tr.row{
    display:grid; width:100%; height:auto;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "cat  cat  open"
      "area area area"
      "kn   kn   go";
    row-gap:3px; column-gap:10px; align-items:center;
    padding:8px 14px;
    border-bottom:1px solid var(--line-soft);
  }
  .stores tr.row:last-child{border-bottom:0}
  .stores tr.row:hover td{background:transparent}
  .stores tr.seen{background:var(--line-soft)}
  .stores tr.seen td{background:transparent}
  .stores td{display:block; height:auto; padding:0; border:0}
  .stores td::before{content:none}

  .stores td[data-l="業態"]{grid-area:cat; font-size:15px; font-weight:700; line-height:1.35}
  .stores td[data-l="開業予定"]{grid-area:open; font-size:13px; color:var(--muted); justify-self:end}
  .stores td[data-l="エリア"]{grid-area:area; font-size:13px; line-height:1.4; color:var(--muted)}
  /*
   * 狭い画面での置き場所。
   *
   * 以前は「連絡状況」と「情報源」の2列があり、stat と ev に置いていた。
   * どちらも列ごと無くしたのに、この指定だけ残っていた。
   * 残っていると、いまの「確認できている情報」に置き場所が無く、
   * 自動配置まかせになる（実際 grid-area が auto になっていた）。
   * たまたま見た目は崩れていなかったが、決めていない場所に置かれていた。
   */
  .stores td[data-l="確認できている情報"]{grid-area:kn; justify-self:start}
  .stores td.act{grid-area:go; justify-self:end}
  /* 「詳細 →」は幅を食う。1件3行の中では山かっこだけで足りる */
  .stores td.act .badge{display:none}
  .stores td.act .go{font-size:0; color:var(--faint)}
  .stores td.act .go::after{content:"›"; font-size:20px; line-height:1}
  .stores td.act .arw{display:none}

  /* 詳細と課金の壁は全画面。半端に浮かせると、背後の表が透けて読みにくい */
  .panel{
    top:0; left:0; right:0; bottom:0; width:100%; max-height:none;
    border:0; border-radius:0;
  }
  .panel-foot{
    position:sticky; bottom:0; background:var(--card);
    box-shadow:0 -1px 0 var(--line), 0 -8px 16px rgba(27,33,38,.05);
  }
  .pager{gap:.5rem}
  .pg{min-width:2.4rem; padding:.45rem .55rem}
}



/*
 * 「確認できている情報」の札。
 *
 * 確認できたものだけ出す。未確認は並べない。
 * 未確認を全部並べると73行に「未確認」が続き、読む邪魔にしかならない。
 * 札が多い行ほど情報が揃っている、と一目で分かるほうが速い。
 *
 * 以前は店舗電話だけ色を変えていた。76件中3件しかなく営業に直結するため、
 * そこを立てる設計だった。
 * だが実機で「3つとも同じに見えて違いが分からない」と指摘され、やめた。
 * 目的は1つを強調することではなく、3つを見分けられるようにすること。
 */
.kn{
  display:inline-flex; align-items:center; gap:4px;
  margin:0 4px 3px 0; padding:3px 8px; border-radius:4px;
  font-size:12px; font-weight:700; line-height:1.5;
  background:var(--line-soft); color:var(--ink);
}
/* アイコンは文字と同じ色。文字の一部として読ませる */
.kni{width:12px; height:12px; flex:none; fill:currentColor; opacity:.75}

/*
 * 3種類の色分け。低彩度でそろえる。
 *
 * 一覧に76行ぶん並ぶので、彩度を上げると表が信号機になって読めない。
 * 背景はどれも同じ明るさ、文字はどれも同じ濃さ。色相だけずらす。
 * 「同じ部品の3種類」に見えることを、見分けやすさより先に置く。
 *
 * 押せる緑（--accent）とは別の色にする。札は押すものではない。
 */
.kn-addr{background:#EAF0F6; color:#2F5273}   /* 青。地図・場所 */
.kn-corp{background:#EFEDF6; color:#4B4478}   /* 紫。組織 */
.kn-tel {background:#EAF1EC; color:#2C5C40}   /* 緑。連絡が取れる */

.kn.no{background:transparent; color:var(--muted); font-weight:400; padding-left:0}

/* 札の説明。1行まるごと使う */
/*
 * 1行まるごと使う説明。**折り返しを戻すこと。**
 *
 * .fact は「対象 東京23区」のような短い項目用で、途中で切れないように
 * white-space:nowrap を持っている。長い文がそれを受け継ぐと折り返せず、
 * 幅396pxで文が611pxになり、画面ごと横スクロールした。
 * 一覧ではなくページ全体が横に動くので、スマホでは相当に読みにくい。
 */
.fact.wide{display:block; margin-top:6px; color:var(--muted); white-space:normal}

/*
 * 並び順は表の見出しで示す。上に文で書くものではない。
 * 開業まで時間のある店舗から並んでいる（12月 → 10月）。
 */
.sortmark{margin-left:4px; font-size:11px; color:var(--muted)}


/* ───────────────────────────────────────────
   はじめての人に、最初の1回だけ出す使い方紹介。

   説明するだけ。一覧には触らない（2026-09-17 作り直し）。
   前の「実際の画面を指してなぞらせる」形は、店を開かせて無料枠と計測を
   壊していたので却下になった。

   3つを1画面に並べる。広い画面は横並び、狭い画面は縦並び。ボタンは1つ。
   番号の丸は目立たせない。この画面で一番見てほしいのはボタンなので、
   緑はボタンにだけ使う（DESIGN_RULES：強調色は1つの意味にだけ）。

   開いた瞬間には出さない。普通の画面を1秒見せてから暗幕をゆっくり出し、
   「いま案内が始まった」と分かるようにする（2026-09-16）。
   ─────────────────────────────────────────── */
.tut{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
  background:rgba(27,33,38,.62);
  opacity:0; transition:opacity .26s ease;
}
.tut.in{opacity:1}
.tut[hidden]{display:none}

.tut-tip{
  width:min(60rem, 100%); margin:auto;
  background:var(--card); border-radius:14px; box-shadow:var(--shadow);
  padding:26px 28px 24px;
}
.tut-lead{margin:0 0 .35rem; font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.06em}
.tut-h{margin:0 0 .4rem; font-size:22px; font-weight:700; line-height:1.45; color:var(--ink)}
/* 何のサービスかを一文で先に言う。3つの手順だけだと「何のために探すの？」が残る（2026-09-17 ジッピー） */
.tut-intro{margin:0 0 1.1rem; font-size:15px; line-height:1.8; color:var(--muted)}

.tut-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.tut-steps li{
  background:var(--ground); border:1px solid var(--line); border-radius:10px;
  padding:16px 16px 18px;
}
.tut-step-h{
  display:flex; align-items:center; gap:10px;
  margin:0 0 .55rem; font-size:17px; font-weight:700; color:var(--ink);
}
/*
 * 手順ごとの小さなアイコン。説明の主役ではなく、3つの違いを目で拾う補助（2026-09-17 ジッピー）。
 * 色は付けない。この画面の緑はボタンだけに使う（DESIGN_RULES：強調色は1つの意味にだけ）。
 * 番号はやめた。3枚は左から順に並んでいるので、順番は置き場所で分かる。
 */
.tut-ic{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
}
.tut-ic svg{display:block}
.tut-step-b{margin:0; font-size:15px; line-height:1.85; color:var(--ink)}

.tut-act{display:flex; justify-content:center; margin-top:1.3rem}
.tut-act .btn{min-width:14rem}

@media (max-width:760px){
  .tut{align-items:flex-start}
  .tut-tip{padding:20px 18px 18px}
  .tut-h{font-size:19px}
  .tut-intro{font-size:14px; margin-bottom:.9rem}
  .tut-steps{grid-template-columns:1fr; gap:10px}
  .tut-steps li{padding:13px 14px 14px}
  .tut-act .btn{width:100%; min-width:0}
}

@media (prefers-reduced-motion: reduce){
  .tut{transition:none}
}

/* ───────────────────────────────────────────
   上部。ジッピーの理想形（2026-09-16）に合わせた。

   上に象徴の写真を1枚だけ敷く。一覧の各店には写真を付けない。
   載っている店の写真は1枚も持っていないので、それらしい写真を店ごとに並べると
   「この店の写真だ」と誤解される。持っていないものを、持っているように見せない。
   ─────────────────────────────────────────── */

/*
 * 上部の象徴画像。**商品に載っている店の写真ではない。**
 *
 * 昼の明るい写真にした（2026-09-17 ゆうすけさん「営業しに行くなら昼間じゃない？」）。
 * 夕方の写真のときは暗い幕＋白文字だったが、明るい壁（輝度225）の上では白文字が読めない。
 * いまは黒文字にして、壁の影のムラだけを薄い白で均す。昼の明るさは消さない。
 *
 * 文字は右の無地の壁の上（右38%）にだけ置く。車や人に掛けない。
 * 見出しは読点で必ず改行する（語の途中で折れていた：「店か／ら」「営業／先へ」）。
 */
.hero-art{
  position:relative; margin:0 0 1.1rem;
  border-radius:14px; overflow:hidden; background:var(--line);
}
.hero-art img{
  display:block; width:100%; height:clamp(230px, 30vw, 380px);
  object-fit:cover; object-position:30% 55%;
}
.hero-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 50%, rgba(250,251,252,.46) 60%, rgba(250,251,252,.68) 74%, rgba(250,251,252,.74) 100%);
}
.hero-words{
  position:absolute; top:0; right:0; bottom:0; z-index:1;
  width:38%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(18px, 2.6vw, 34px) 0 0;
}
.hero-art .hero-h{
  color:var(--ink); font-size:clamp(24px, 2.4vw, 32px); line-height:1.45; margin-bottom:.7rem;
  word-break:keep-all; text-shadow:0 0 18px rgba(255,255,255,.7);
}
.hero-art .hero-sub{
  /* 白っぽい写真（d2）の上で薄く負けていた（2026-09-17 ジッピー）。本文色にして少し太くする */
  color:var(--ink); font-size:14px; font-weight:500; line-height:1.85;
  /* keep-all は付けない。日本語が折り返さず、幅390px・800pxで右が切れていた[実測] */
  text-shadow:0 0 14px rgba(255,255,255,.8);
}

/*
 * 狭い画面では右の壁ごと切り落とされる。重ねると読めないので、
 * 写真は帯にして文字はその下に置く。主役（支度中の店）が残るように左寄りで切る。
 */
@media (max-width: 720px){
  .hero-art{background:var(--card)}
  /* 写真帯・余白・行間を詰め直した（2026-09-17 ジッピー「崩れてはいないが美しくなりきってない」） */
  .hero-art img{height:clamp(200px, 54vw, 270px); object-position:22% 60%}
  .hero-art::after{display:none}
  .hero-words{position:static; width:auto; padding:18px 18px 20px}
  .hero-art .hero-h{font-size:23px; line-height:1.5; margin-bottom:.55rem; text-shadow:none}
  /*
   * 狭い画面では手で入れた改行を外し、行の長さを揃えて折り返す。
   * 改行を残すと2行目が1〜2文字だけはみ出し、最後の行に「す。」だけが残っていた（幅390px）。
   * text-wrap:pretty では日本語のこの残りは直らなかった[実測]。
   */
  .hero-art .hero-sub{color:var(--muted); font-weight:400; line-height:1.8; text-shadow:none; text-wrap:balance}
  .hero-art .hero-sub br{display:none}
}
.hero{
  margin:0 0 1.4rem; padding:1.6rem 0 1.5rem;
  border-bottom:1px solid var(--line);
}
.hero-eyebrow{margin:0 0 .7rem; font-size:13px; color:var(--accent); letter-spacing:.04em}
.hero-h{
  margin:0 0 .8rem; font-size:34px; font-weight:700; line-height:1.4; color:var(--ink);
  letter-spacing:.01em;
}
.hero-sub{margin:0; font-size:15px; line-height:1.9; color:var(--muted)}

/* 3つの指標 */
.facts3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  list-style:none; margin:0 0 1.4rem; padding:0;
  border:1px solid var(--line); border-radius:10px; background:var(--card);
}
.facts3 li{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 16px; border-right:1px solid var(--line);
}
.facts3 li:last-child{border-right:0}
.f3-k{font-size:12px; color:var(--muted)}
.f3-v{font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.f3-v b{font-size:21px}
.f3-n{font-size:12px; color:var(--faint); line-height:1.5}

/* 料金と購入 */
.buybar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  margin:0 0 1rem; flex-wrap:wrap;
}
.buybar-h{margin:0 0 .4rem; font-size:22px; font-weight:700; color:var(--ink)}
.buybar-btn{flex:none; white-space:nowrap}
.buybar-btn[hidden]{display:none}

/* 業態で絞る */
.filters{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0 0 12px; flex-wrap:wrap;
}
/*
 * 一覧のすぐ上の札。中身を業態からジャンルに入れ替えた（2026-09-29 艦長）。
 *
 * 小さくしない。ここが画面でいちばん目が行く場所で、
 * 前はここが和食・カフェ・居酒屋で埋まっていたせいで、
 * ホテル・医療福祉・商業施設・オフィスに誰も気づかなかった。
 *
 * いちばん目が行く場所を、いちばん測りたいものに使う。
 * 業態の札より一段大きくして、絞り込みではなく「何を探すか」の選択だと分かるようにする。
 */
/* ヒーローの二文目＝いま何が入っているか。一文目（サービスの説明）と役割が違うので、行を分けて少し落とす */
.hero2-now{display:block; margin-top:.6em; opacity:.85}
/* 「掲載していま／す。」のような割れ方をさせない。意味の塊ごとに改行する */
.hero2-now .nb{display:inline-block}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:9px 18px; font-size:15px; font-weight:500;
  cursor:pointer; line-height:1.6;
}
/* まだ中身が無いジャンル。押せないようには見せない。押せること自体が測りたいもの */
.chip i.soon{color:var(--faint); font-size:12px}
.chip.on i.soon{color:var(--accent-ink); opacity:.8}
@media(max-width:480px){
  /* 狭い画面では札を横いっぱいに。前は画面外にはみ出て、商業施設とオフィスが切れていた */
  .filters{flex-direction:column; align-items:stretch; gap:10px}
  .chips{width:100%}
  .chip{padding:8px 14px; font-size:14px}
}
.chip i{font-style:normal; color:var(--faint); margin-left:3px; font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--faint)}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.chip.on i{color:var(--accent-ink); opacity:.8}

.sortbox{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.sortbox select{
  border:1px solid var(--line); border-radius:6px; background:var(--card);
  padding:5px 8px; font-size:13px; color:var(--ink);
}

@media (max-width:640px){
  .hero{padding:1rem 0 .7rem}
  .hero-h{font-size:26px}
  .hero-sub{font-size:14px}
  .facts3{grid-template-columns:1fr; }
  .facts3 li{border-right:0; border-bottom:1px solid var(--line)}
  .facts3 li:last-child{border-bottom:0}
  .buybar{align-items:stretch}
  .buybar-btn{width:100%; text-align:center}
  .filters{align-items:flex-start}
}



/* ═══════════════════════════════════════════
   2026-09-17 モックを正解として組み直した部分。
   ジッピーが作ったモック（艦長が最初から持っていた完成イメージ）に合わせる。
   それまでの上部・表の見た目はここより上に残っているが、対応する要素はもう無い。
   承認が出たら、使っていない古い規則は消す。
   ═══════════════════════════════════════════ */

/* 横いっぱいの写真で、横スクロールを出さない（100vw はスクロールバーの幅を含むため） */
body{overflow-x:clip}

/* 読み上げにだけ残す */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ヘッダーの「使い方」 */
.help{
  border:0; background:transparent; padding:6px 2px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--ink);
}
.help:hover{color:var(--accent); text-decoration:underline}

/* ---------- ヒーロー：写真がページの主役 ---------- */
.hero2{
  position:relative;
  margin:-1.6rem calc(50% - 50vw) 0;
  height:clamp(340px, 34vw, 520px);
  overflow:hidden; background:#2b2f33;
}
.hero2-art, .hero2-art img{position:absolute; inset:0; width:100%; height:100%}
.hero2-art img{object-fit:cover; object-position:50% 55%}
/*
 * 写真は昼の明るい店内（彩の hero_calm_a）。暗く塗ると壁が灰色に濁って昼に見えないので、
 * 文字を黒くして、左の壁にだけ薄く白を重ねる。
 */
.hero2-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(250,248,244,.35) 0%, rgba(250,248,244,.18) 38%, rgba(250,248,244,0) 55%);
}
.hero2-in{
  position:relative; height:100%;
  width:min(1120px, calc(100vw - 48px)); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hero2-words{max-width:780px}
.hero2-h{
  margin:0; color:#1f2427;
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-weight:600; font-size:clamp(36px, 4.4vw, 64px); line-height:1.34; letter-spacing:.04em;
}
.hero2-sub{
  margin:22px 0 0; color:#2b3033;
  font-size:clamp(16px, 1.5vw, 22px); font-weight:500; line-height:1.8;
}
.hero2-en{
  margin:24px 0 0; color:#5f6468;
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size:13px; letter-spacing:.26em;
}
.hero2-en::before{content:""; display:inline-block; width:28px; height:1px; background:currentColor; vertical-align:middle; margin-right:12px}

/* ---------- 指標3つ：写真のすぐ下の白い帯 ---------- */
.facts3{
  margin:0 calc(50% - 50vw) 0; padding:32px max(24px, calc((100vw - 1120px) / 2));
  background:var(--card); border:0; border-bottom:1px solid var(--line); border-radius:0;
  display:flex; list-style:none;
}
.facts3 li{
  flex:1 1 auto; flex-direction:row; justify-content:flex-start; text-align:left;
  display:flex; align-items:center; gap:16px; padding:2px 24px;
  border-right:1px solid var(--line); border-bottom:0;
}
.facts3 li:first-child{padding-left:0}
.facts3 li:last-child{border-right:0}
.f3-ic svg{display:block; width:44px; height:44px; fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.f3-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.f3-l{display:flex; align-items:baseline; gap:8px}
.f3-k{font-size:clamp(16px, 1.4vw, 20px); font-weight:700; color:var(--ink); white-space:nowrap}
.f3-v{font-size:clamp(16px, 1.4vw, 20px); font-weight:700; color:var(--ink); white-space:nowrap}
.f3-v b{font-size:clamp(26px, 2.4vw, 34px); line-height:1.1}
.f3-n{font-size:15px; color:var(--muted)}

/* ---------- 一覧の見出し＋価格 ---------- */
.listhead{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  /* 下はフィルタが続くので詰める（2026-09-29） */
  margin:52px 0 16px;
}
/*
 * 見出しと、保存した店舗への導線（2026-09-30 ジッピー）。
 * PCは横に並べ、狭い画面では見出しの下に回り込む。
 * 導線は見出しに従属する小さなものにする。同じ大きさで並べない。
 */
.lh-title{flex:1 1 auto; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 20px}
.listhead-h{min-width:0; margin:0; font-size:36px; font-weight:700; line-height:1.3; color:var(--ink); letter-spacing:.02em}
.lh-saved{margin:0}
.lh-saved[hidden]{display:none}
.lh-saved-btn{
  background:none; border:0; padding:0; font:inherit; font-size:14px; font-weight:500;
  color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.lh-saved-btn:hover{opacity:.8}
/* リストの上の件数。下のページ送りの件数と同じ見え方にする */
.pgtop{margin:0 0 12px; font-size:14px; color:var(--muted)}
.pgtop[hidden]{display:none}
.lh-buy{text-align:right; flex:none}
.lh-buy-row{display:flex; align-items:center; justify-content:flex-end; gap:16px}
.listhead .terms{margin:0; font-size:15px; color:var(--ink)}
.listhead .terms b{font-size:28px; color:var(--warn); margin:0 2px}
.lh-buy-btn{border-radius:999px; padding:.8rem 1.8rem; font-size:16px; white-space:nowrap}
.lh-buy-btn[hidden]{display:none}
.listhead .freeline{margin:8px 0 0; font-size:14px; color:var(--muted)}

/* ---------- ジャンルの選択と並び替え ---------- */
/*
 * 2026-09-29 艦長。ここは業態の絞り込みだった場所。中身をジャンルに入れ替えた。
 *
 * flex-wrap:nowrap を外した。札が5つに増えたので、狭い画面で
 * 「商業施設」「オフィス」が画面外に切れていた。**いちばん見せたいものが切れていた。**
 * 上に同じ指定があるのに、ここで後から上書きしていて効いていなかった。
 */
/* 見出しの直下に来る。見出しとの間は詰めて、リストとの間を空ける */
.filters{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 20px}
.chip{border-radius:999px; background:var(--card); border:1px solid var(--line); padding:9px 18px; font-size:15px}
.sortbox select{border-radius:999px; padding:8px 34px 8px 16px; font-size:14px}
@media(max-width:560px){
  .filters{flex-direction:column; align-items:stretch; gap:10px}
  .chips{width:100%}
}

/* ---------- 一覧：カードの行 ---------- */
.cards{
  list-style:none; margin:0; padding:0;
  background:var(--card); border-radius:12px; box-shadow:var(--shadow); overflow:hidden;
}
.card{
  display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:20px;
  padding:18px 28px; border-bottom:1px solid var(--line-soft); cursor:pointer;
}
.card:last-child{border-bottom:0}
.card:hover{background:#FAFBFC}
.card:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.card.seen{background:#FAFBFC}
.card.open{background:var(--accent-soft)}
/*
 * 業態の線画。以前は薄いグレーの大きな枠に入れていたが、
 * 「画像が読み込まれていない場所」に見えて、写真が無いことを強調していた（ジッピー）。
 * 枠は付けず、行の頭に小さく置くだけにする。店の写真の代用品は作らない。
 */
.card-thumb{
  width:36px; height:36px;
  display:grid; place-items:center;
}
.card-thumb svg{width:30px; height:30px; fill:none; stroke:#A2AAB2; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.card-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.card-meta{display:flex; flex-direction:column; gap:3px; min-width:0}
.card-title{font-size:21px; font-weight:700; color:var(--ink); line-height:1.4}
.card-area{display:flex; align-items:center; gap:4px; font-size:16px; color:var(--muted)}
.card .kn{font-size:14px}
.card-area .kni{width:12px; height:12px; fill:var(--muted)}
.card-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:2px}
.card-r{display:flex; align-items:center; gap:16px; font-size:16px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.card-r .badge{margin:0}
.card-go{font-size:22px; line-height:1; color:var(--faint)}
.card:hover .card-go{color:var(--accent)}

/* ---------- スマホ：単純に縮めず、別の並びにする（モックどおり） ---------- */
@media (max-width:720px){
  .hero2{height:clamp(250px, 70vw, 320px)}
  /* 狭い画面は壁ばかりになるので、カウンターと窓が入る位置で切る */
  .hero2-art img{object-position:64% 50%}
  /* 白いフェードが強いと写真が途中で消えて見える。薄くして、文字の周りだけ淡く光らせて読ませる */
  .hero2-art::after{background:linear-gradient(0deg, rgba(250,248,244,.62) 0%, rgba(250,248,244,.3) 38%, rgba(250,248,244,0) 62%)}
  .hero2-in{align-items:flex-end; padding-bottom:18px}
  .hero2-h{font-size:clamp(26px, 7.6vw, 32px); text-shadow:0 0 12px rgba(250,248,244,.9), 0 0 3px rgba(250,248,244,.7)}
  .hero2-sub{margin-top:8px; font-size:14px; line-height:1.7; color:#23282b; text-shadow:0 0 10px rgba(250,248,244,.95), 0 0 3px rgba(250,248,244,.8)}
  /* 語の途中で折れないよう、文節のかたまりごとに折り返す */
  .hero2-sub br{display:none}
  .hero2-sub .nb{display:inline-block}
  .hero2-en{display:none}

  .facts3{padding:14px 12px; display:grid; grid-template-columns:repeat(3, 1fr)}
  .facts3 li{flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 6px}
  .facts3 li:first-child{padding-left:6px}
  .f3-ic svg{width:26px; height:26px}
  .f3-l{flex-direction:column; align-items:center; gap:0}
  .f3-k{font-size:12px}
  .f3-v{font-size:13px}
  .f3-v b{font-size:clamp(16px, 4.8vw, 20px); white-space:nowrap}
  /* 「2026年」は小さく上の行に。「10〜12月」を大きく出して、狭い列でも詰まらせない */
  .f3-y{display:block; font-size:11px; line-height:1.3}
  .f3-y b{font-size:inherit}
  .f3-n{font-size:10px; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere}

  .listhead{flex-direction:column-reverse; align-items:stretch; gap:22px; margin:18px 0 12px}
  .listhead-h{font-size:24px}
  .listhead .terms{font-size:14px}
  .listhead .terms b{font-size:26px}
  .lh-buy{background:var(--card); border-radius:12px; box-shadow:var(--shadow); padding:16px; text-align:center}
  .lh-buy-row{flex-direction:column; gap:12px}
  .listhead .terms{justify-content:center}
  .lh-buy-btn{width:100%; text-align:center}
  .listhead .freeline{text-align:center}

  /* 古い .filters の flex-wrap:wrap が残っていると、縦並びの行幅が中身の幅まで広がって横にはみ出す */
  .filters{flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:10px}
  /*
   * 2026-09-29 艦長。横スクロールをやめて折り返しにした。
   *
   * 前は業態の札が7つ並ぶので横スクロールにしていた。
   * いまここはジャンルで、中身は5つ。しかも**いちばん見せたいもの**。
   * 横スクロールだと「商業施設」「オフィス」が画面の外に隠れて、
   * 指で送らないと存在に気づけない。それでは測りたいものが測れない。
   */
  .chips{min-width:0; flex-wrap:wrap; overflow-x:visible; padding-bottom:0}
  .chip{flex:none; padding:8px 16px; font-size:14px}
  .sortbox{align-self:flex-start}

  /*
   * 1件を80px前後に詰める。一画面で何件も見渡せることがこの一覧の価値。
   *   1行目：業態名 ………… 開業予定 ›
   *   2行目：エリア  情報タグ（右端まで使う）
   */
  .card{grid-template-columns:24px 1fr auto; grid-template-rows:auto auto; column-gap:10px; row-gap:4px; padding:13px 14px}
  .card-body{display:contents}
  .card-meta{grid-column:2 / 4; grid-row:2; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 10px}
  .card-tags{margin-top:0}
  .card .kn{margin:0 4px 0 0; padding:1px 6px; font-size:11px}
  .card .kni{width:10px; height:10px}
  .card-thumb{grid-column:1; grid-row:1 / 3; width:24px; height:24px}
  .card-thumb svg{width:22px; height:22px}
  /*
   * 「居酒屋・ダイニングバ／ー」のように語の途中で折れるのを防ぐ。
   * 折り返しは「・」の後だけ（app.js で <wbr> を入れている）。入りきらない語だけは途中で折る
   */
  .card-title{grid-column:2; grid-row:1; font-size:15px; word-break:keep-all; overflow-wrap:anywhere}
  .card-area{font-size:13px}
  .card-date{font-size:12px; white-space:nowrap}
  /* モックどおり、日付と › は横に並べる */
  .card-r{grid-column:3; grid-row:1; flex-direction:row; align-items:center; gap:6px; font-size:12px}
  .card-go{font-size:18px}
  .card-r .badge{display:none}
}

/* ヘッダー：モックどおり、ロゴをはっきり大きく */
.bar .bar-in{padding:12px 0}
.bar .brand{align-items:center; gap:16px}
.bar .mark{font-size:26px; line-height:1.2; letter-spacing:0}
.bar .scope{font-size:15px; color:var(--ink)}
.help{font-size:14px}
@media (max-width:720px){
  .bar .bar-in{padding:10px 0}
  .bar .brand{flex-direction:column; align-items:flex-start; gap:0}
  .bar .mark{font-size:22px}
  .bar .scope{font-size:12px}
}

/* ---------- 詳細：アプローチ情報（2026-09-17） ----------
   一覧のタグと同じ部品を行の見出しに使い、「一覧で見たあのタグの中身」とすぐ繋がるようにする。
   確認できていない項目は行にせず、下に薄く1行（.ap-rest）。 */
.dsec.ap .ap-kv{grid-template-columns:auto 1fr; gap:10px 14px; align-items:start}
.dsec.ap .ap-kv dt{padding-top:1px}
.dsec.ap .ap-kv dt .kn{margin:0}
.dsec.ap .ap-kv dd{font-size:14px; font-weight:700; color:var(--ink); line-height:1.6; min-width:0; overflow-wrap:anywhere}
.dsec.ap .ap-kv dd.none{font-weight:400; color:var(--muted)}
.ap-note{display:block; font-size:12px; font-weight:400; color:var(--muted)}
.ap-rest{margin:12px 0 0; font-size:12px; color:var(--muted)}
.ap-kv + .ap-rest{padding-top:10px; border-top:1px dashed var(--line-soft)}
/* 店名のすぐ下に見出しが詰まらないよう、セクションの前に間をあける（連絡状況の札を外したぶん） */
#dKv{margin-top:18px}
/* アプローチ情報の中のリンク（運営会社の公式サイト・問い合わせフォーム）。情報源のリンクと同じ緑で、↗ は小さく */
.ap-link{color:var(--accent); text-decoration:none}
.ap-link:hover{text-decoration:underline}
.ap-ext{font-size:.8em; margin-left:4px; font-weight:400}

/* 一覧右の日付に「開業予定」と添える。日付だけだと何の日付か分からない（艦長） */
.card-date{display:flex; flex-direction:column; align-items:flex-end; line-height:1.3}
.card-date-k{font-size:12px; color:var(--muted); letter-spacing:.04em}
@media (max-width:720px){ .card-date-k{font-size:11px} }
.wall-note{margin:.6rem 0 0; font-size:.78rem; line-height:1.6; color:var(--muted); text-align:left; word-break:keep-all; overflow-wrap:anywhere}

/* ══════════════════════════════════════════════════
   無料3件の説明：一覧でわかること／詳細でわかること（2026-09-18 ジッピー）

   前は「業態まで → 店名まで」のように1対1の矢印で結んでいたが、
   この2つは変換の関係ではないので、矢印にすると嘘になる。
   さらに詳細側を一覧と同じ色つきタグで出していたため、同じ見た目のタグが
   「一覧では確認できているかどうかの印」「壁では詳細で見られる中身」と、
   1画面で2つの意味を持っていた。

   いまは、それぞれを別のまとまりとして置くだけにする。PCは左右、スマホは上下。
   詳細側には色もアイコンもタグも使わない。使うと一覧のタグと同じものに見える。
   ══════════════════════════════════════════════════ */
.wall-cmp2{text-align:left}
.wall-two{display:grid; grid-template-columns:1fr 1fr; gap:0 22px; align-items:start}
.wc2-h{margin:0 0 .5rem; font-size:.74rem; color:var(--muted); letter-spacing:.04em}
.wc2-list{list-style:none; margin:0; padding:0}
.wc2-list li{
  font-size:.88rem; line-height:1.55; color:var(--muted);
  padding:.34rem 0; border-bottom:1px solid var(--line-soft);
  /* 折り返しは <wbr> を入れた場所で。放っておくと「…かどう／か」で切れる */
  word-break:keep-all; overflow-wrap:anywhere;
}
.wc2-list li:first-child{border-top:1px solid var(--line-soft)}
/* 項目の中身を添える行。項目名と同じ大きさにすると、5つ目の項目に見える */
.wc2-sub{display:block; font-size:.78em; color:var(--faint); margin-top:.05rem}
/* 右は買うと見られるもの。色は足さず、濃さだけで違いを出す */
.wall-col2-d .wc2-list li{color:var(--ink)}
/* 欠けることがある項目の印。文字の一部ではなく、注記記号として小さく上に出す */
.wp-ast{color:var(--faint); font-weight:400; font-size:.7em; vertical-align:super; margin-left:1px}
.wall-note-ast{margin-top:.6rem}

@media (max-width:720px){
  /* 狭い画面では左右に割らず、上下に積む。
     上下に積むと11行になるので、行の間を詰めて、※の断りまで一画面に収める */
  .wall-two{grid-template-columns:1fr; gap:.9rem 0}
  .wc2-list li{font-size:.86rem; padding:.2rem 0}
  .wc2-h{margin-bottom:.35rem}
  .wall-body .wall-p{margin-bottom:1.1rem}
}

/* ───────────────────────────────────────────
   広告から来た人への2問。
   暗幕は使い方紹介（.tut）と同じものを使い回す。
   見た目を分ける理由が無いし、2つ別々に持つと片方だけ直して食い違う。
   色は足さない。この画面の緑はボタンだけ（DESIGN_RULES：強調色は1つの意味にだけ）。
   ─────────────────────────────────────────── */
.sv-tip{width:min(34rem, 100%)}
.sv-opts{display:grid; gap:10px; margin-top:1.1rem}
.sv-opt{
  display:block; width:100%; text-align:left;
  background:var(--ground); border:1px solid var(--line); border-radius:10px;
  padding:15px 16px; font-size:16px; line-height:1.7; font-weight:400; color:var(--ink);
  cursor:pointer;
}
.sv-opt:hover{background:var(--card); border-color:var(--ink)}
.sv-opt:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.sv-act{display:flex; justify-content:center; margin-top:1.2rem}
/*
 * 「答えずに一覧を見る」は、押せるけれど目立たせない。
 * ボタンの形にすると、答えるのと同じ重さに見えて、どちらを押せばいいか迷う。
 */
.sv-skip{
  background:none; border:0; padding:6px 8px;
  font-size:14px; line-height:1.7; color:var(--muted); text-decoration:underline; cursor:pointer;
}
.sv-skip:hover{color:var(--ink)}

@media (max-width:760px){
  .sv-opt{font-size:15px; padding:14px 14px}
}

/* ───────────────────────────────────────────
   買った人に渡す専用URL。
   広告から来た人は、これを控えないとCookieを消した時点で戻れない。
   押すまで出さない。画面に出しっぱなしにすると肩越しや画面共有で漏れる。
   ─────────────────────────────────────────── */
.myurl{margin:0 0 14px}
.myurl[hidden]{display:none}
.myurl-show{
  background:none; border:0; padding:4px 0;
  font-size:13px; line-height:1.6; color:var(--muted); text-decoration:underline; cursor:pointer;
}
.myurl-show:hover{color:var(--ink)}
.myurl-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  background:var(--ground); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
}
.myurl-box[hidden]{display:none}
.myurl-v{
  flex:1 1 20rem; min-width:0; overflow-x:auto; white-space:nowrap;
  font-size:13px; line-height:1.8; color:var(--ink);
}
.myurl-copy{
  flex:none; background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:6px 12px; font-size:13px; color:var(--ink); cursor:pointer;
}
.myurl-copy:hover{border-color:var(--ink)}
.myurl-note{flex:1 1 100%; margin:2px 0 0; font-size:12px; line-height:1.7; color:var(--faint)}

/* アンケートの前置き。質問より小さく、質問の邪魔をしない大きさにする */
.sv-intro{margin:0 0 .7rem; font-size:14px; line-height:1.8; color:var(--muted)}
.sv-intro[hidden]{display:none}

/* アンケートが送れなかったときの一行。赤は使わず、文字で伝える（この画面の色は3つまで） */
.sv-err{margin:.8rem 0 0; font-size:14px; line-height:1.7; color:var(--ink); font-weight:700}
.sv-err[hidden]{display:none}