/* base.css：共通土台（色/文字/共通部品） — 自動分割。詳細は SPLIT_RULES を参照。 */
/* RunDojo Web 共通スタイル（レスポンシブ・オリーブ基調） */
:root {
  --ink:#12211b; --sub:#5b6b63; --line:#e6ece1; --olive:#4c6b3f; --olive2:#6b8e56;
  --bg:#f6f8f4; --card:#ffffff; --chip:#eef3ea; --chipBorder:#d5e5c8;
  --danger:#c0392b; --warn:#b8860b; --ok:#2e7d32; --radius:14px;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
a { color:var(--olive); }
.container { max-width:1080px; margin:0 auto; padding:0 16px; }

/* ヘッダ */
header.site { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); }
.site .bar { display:flex; align-items:center; gap:14px; min-height:78px; padding:10px 0; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brandicon { width:42px; height:42px; flex:none; display:inline-flex; }
/* ★ヘッダー左のロゴは円形で表示する（角丸の四角だとアプリのタイルに見えるため） */
.brandicon img, .brandicon svg { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.brandcol { display:flex; flex-direction:column; gap:2px; }
.brandtext { font-weight:900; font-size:28px; letter-spacing:-.02em; line-height:1; }
.brandtext span { color:var(--olive); }
.brandsub { font-size:12.5px; color:var(--sub); line-height:1; }

.grow { flex:1; }
.mainnav { display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-end; }
.navlink { text-decoration:none; color:var(--sub); font-size:14px; font-weight:600; padding:6px 9px; border-radius:8px; }
.navlink:hover { color:var(--olive); }
.navlink.on { color:var(--olive); background:var(--chip); }
.navbtn { margin-left:6px; }
/* ★未読メッセージの印。上のナビでは文字の右に数字を付ける（9件を超えたら 9+）。
   色は赤。ここだけはオリーブだと「選択中」と見分けがつかないため。 */
.navlink .ndot { display:inline-block; min-width:16px; height:16px; line-height:16px; margin-left:5px;
  padding:0 4px; border-radius:999px; background:var(--danger); color:#fff; font-size:10.5px;
  font-weight:800; text-align:center; letter-spacing:0; }

.btn { display:inline-block; text-decoration:none; border:none; cursor:pointer; font-weight:700;
  font-size:14px; padding:9px 16px; border-radius:11px; font-family:inherit; }
.btn-primary { background:var(--olive); color:#fff; }
.btn-ghost { background:var(--chip); color:var(--olive); border:1px solid var(--chipBorder); }
.btn-danger { background:#fdecea; color:var(--danger); border:1px solid #f5c6c0; }
.btn-ok { background:#e8f5e9; color:var(--ok); border:1px solid #c3e6c4; }
.btn:disabled { opacity:.5; cursor:default; }

/* 検索/フィルタ */
.hero { padding:22px 0 8px; }
.hero h1 { font-size:26px; margin:0 0 4px; }
.hero p { color:var(--sub); margin:0 0 16px; font-size:14px; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:12px; color:var(--sub); }
select, input[type=text], input[type=email], input[type=password], textarea {
  font-family:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--line);
  border-radius:11px; background:#fff; color:var(--ink); }
input[type=text].search { min-width:220px; }
.tabs { display:inline-flex; background:var(--chip); border:1px solid var(--chipBorder);
  border-radius:11px; padding:3px; gap:3px; }
.tabs button { border:none; background:transparent; font-family:inherit; font-weight:700; font-size:14px;
  padding:7px 16px; border-radius:9px; cursor:pointer; color:var(--sub); }
.tabs button.active { background:var(--olive); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip { border:1px solid var(--chipBorder); background:#fff; color:var(--sub); border-radius:999px;
  padding:6px 13px; font-size:13px; cursor:pointer; user-select:none; }
.chip.on { background:var(--olive); color:#fff; border-color:var(--olive); }

/* カードグリッド（レスポンシブ：スマホ1列→PC複数列） */
.grid { display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0 40px; }


.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px;
  transition:transform .08s ease, box-shadow .12s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,50,30,.08); }
.card .top { display:flex; align-items:center; gap:10px; }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-weight:800; flex:none; overflow:hidden; }
.avatar img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
.card h3 { margin:0; font-size:16px; }
.card .area { font-size:12px; color:var(--sub); }
/* ★★2026-08-06u：さがすのカードの紹介文は1行だけ。あふれたら「…」（Kazuma さん指示）。
   ★min-width:0 が無いと、親が flex/grid のときに縮まず「…」にならないことがある。 */
.card .tagline { font-size:13px; color:var(--ink);
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.meta { display:flex; flex-wrap:wrap; gap:6px; }
.pill { font-size:11px; background:var(--chip); border:1px solid var(--chipBorder); color:var(--olive);
  border-radius:999px; padding:3px 9px; }
.pill.recruit { background:#fff3d6; border-color:#f0dca0; color:#8a6d00; }
.rating { font-weight:800; color:var(--warn); }

/* 汎用 */
.muted { color:var(--sub); }
.center { text-align:center; }
.empty { text-align:center; color:var(--sub); padding:50px 0; }
.notice { background:#eef3ea; border:1px solid var(--chipBorder); border-radius:12px; padding:12px 14px;
  font-size:13px; color:var(--olive); margin:12px 0; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  max-width:520px; margin:30px auto; }
.panel h2 { margin:0 0 14px; font-size:20px; }
.stack { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
label.fl { font-size:13px; color:var(--sub); display:block; margin-bottom:4px; }
.full { width:100%; }
.err { color:var(--danger); font-size:13px; }
.ok { color:var(--ok); font-size:13px; }
.spinner { width:26px; height:26px; border:3px solid var(--chipBorder); border-top-color:var(--olive);
  border-radius:50%; animation:spin .8s linear infinite; margin:40px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ★処理中のボタン：文字を消してボタンの中でスピナーを回す。
   「ログイン中…」のような状態テキストを画面に出さないための共通クラス。
   幅が縮まないよう文字は透明にして残し、押せない状態にする。 */
.btn.is-busy { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-busy::after {
  content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:spin .8s linear infinite;
}
/* 明るい地のボタン（btn-ghost など）は白だと見えないのでオリーブで回す */
.btn.btn-ghost.is-busy::after, .btn.btn-danger.is-busy::after, .btn.btn-ok.is-busy::after {
  border-color:rgba(76,107,63,.25); border-top-color:var(--olive);
}
.badgehead { display:flex; align-items:center; justify-content:space-between; margin:22px 0 10px; }
.badgehead h2 { margin:0; font-size:18px; }
footer.site { border-top:1px solid var(--line); color:#8a998f; font-size:12px; padding:22px 0; margin-top:30px; }
footer.sitefoot { background:#f0f3ec; }
.footwrap { display:flex; flex-direction:column; gap:12px; padding:22px 0; }
.footlinks { display:flex; flex-wrap:wrap; gap:8px 22px; }
.footlinks a { font-size:13.5px; color:var(--ink); text-decoration:none; }
.footlinks a:hover { color:var(--olive); text-decoration:underline; }
.footcopy { font-size:12px; color:#8a998f; }
/* ★電話番号はスマホからそのまま掛けられるよう tel: リンクにしてある。
   ただしフッターで青い下線リンクになると目立ちすぎるので、周りと同じ色にする。 */
.footcopy a { color:inherit; text-decoration:none; }
.footcopy a:hover { text-decoration:underline; }
.appcta { background:linear-gradient(180deg,#f0f5eb,#e7f0df); border:1px solid var(--chipBorder);
  border-radius:var(--radius); padding:18px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin:18px 0; }
.appcta .t { font-weight:700; }

/* 言語切替 */
.langtoggle { border:1px solid var(--chipBorder); background:#fff; color:var(--olive); font-family:inherit;
  font-weight:700; font-size:13px; padding:7px 11px; border-radius:10px; cursor:pointer; }

/* 探索：地図＋リスト（PC=2カラム／スマホ=地図上・リスト下） */
.explore { display:grid; grid-template-columns:1fr; gap:0; }
#map {
  width:100%; height:44vh; border-radius:var(--radius); overflow:hidden; background:#e7efe0;
  border:1px solid var(--line);
}
.listpane { padding-top:14px; }

.mapPop { font-family:inherit; }
.mapPop a { font-weight:700; }
.card.sel { outline:2px solid var(--olive); }

/* ===== 詳細ページ：ギャラリー ===== */
.gallery { position:relative; border-radius:var(--radius); overflow:hidden; background:#e7efe0; }
.gallery .slides { display:flex; transition:transform .3s ease; }
.gallery .slide { min-width:100%; aspect-ratio:16/9; }
.gallery .slide img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery .gnav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85);
  border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:18px; }
.gallery .gprev { left:10px; } .gallery .gnext { right:10px; }
.gallery .dots { position:absolute; bottom:8px; left:0; right:0; display:flex; gap:6px; justify-content:center; }
.gallery .dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); }
.gallery .dot.on { background:#fff; }
.thumbs { display:flex; gap:6px; overflow:auto; margin-top:8px; }
.thumbs img { width:64px; height:44px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.thumbs img.on { border-color:var(--olive); }

/* ===== スケジュール（カレンダー上・地図/説明を下に） ===== */
.calbox { border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:14px; }
.calbar { display:flex; align-items:stretch; gap:8px; }
.calbar .calnav { border:1px solid var(--chipBorder); background:#fff; border-radius:10px; width:34px; cursor:pointer; font-size:16px; flex:none; }
.calbar .calnav:disabled { opacity:.3; cursor:default; }
.caldays { display:flex; gap:8px; flex:1; overflow:hidden; }
.calday { flex:1; min-width:0; border:1px solid var(--chipBorder); background:#fff; border-radius:10px; padding:8px 4px;
  text-align:center; cursor:pointer; }
.calday.on { background:var(--olive); color:#fff; border-color:var(--olive); }
.calday .cd { font-size:12px; } .calday .cn { font-weight:800; font-size:16px; } .calday .cc { font-size:11px; }
.dayslots { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.slot { border:1px solid var(--chipBorder); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; font-size:13px; text-align:left; }
.slot .st { font-weight:700; } .slot .sp { color:var(--sub); font-size:12px; }
.slot.on { border-color:var(--olive); background:var(--chip); }
.slot.full { opacity:.5; cursor:not-allowed; }
.sched2 { display:grid; grid-template-columns:1fr; gap:14px; }

#rmap { width:100%; min-height:360px; height:100%; border-radius:12px; overflow:hidden; background:#e7efe0; border:1px solid var(--line); }
.rdesc { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; }
.rmeta { font-size:14px; color:var(--ink); display:flex; flex-direction:column; gap:5px; }
.rmeta b { color:var(--sub); font-weight:600; margin-right:6px; }
.rimgs { display:flex; gap:6px; overflow:auto; margin:10px 0; }
.rimgs img { width:120px; height:80px; object-fit:cover; border-radius:8px; }
.applybar { margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); }
.applybar .price { font-weight:800; font-size:18px; color:var(--ink); }

/* ===== コミュニティ詳細（テーブル風） ===== */
.dtable { width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; }
.dtable th { text-align:left; width:130px; color:var(--sub); font-weight:600; vertical-align:top; padding:8px 10px;
  border-bottom:1px solid var(--line); }
.dtable td { padding:8px 10px; border-bottom:1px solid var(--line); }
/* 長いURL等がセルからはみ出さないよう折り返す（モバイルの拡大崩れ防止） */
.dtable td, .dtable th { overflow-wrap:anywhere; word-break:break-word; }
.dtable a { overflow-wrap:anywhere; word-break:break-all; }

/* ★詳細ページ：グリッド子が min-width:auto で縮まず横はみ出しする問題を解消
   （これでタグ列・タグライン・画像・テーブルが画面幅内に収まる。スマホの崩れ根本対策） */
.ldetail > *, .sdetail > *, .sched2 > * { min-width:0; }
.lmain img, .lmain .gallery, .lmain .slides, .lmain .slide { max-width:100%; }
.actlog .ai { padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.actlog .ai .ad { color:var(--sub); font-size:12px; }

/* ===== マイページ ===== */
.mypage { max-width:620px; margin:0 auto; padding-top:6px; }
/* プロフィール（SNS風：円＋名前＋@ID、編集ボタンで切替） */
.profedit { display:flex; align-items:center; gap:18px; padding:24px 4px 18px; }
.avwrap { position:relative; cursor:pointer; flex:none; }
.profcircle { width:88px; height:88px; border-radius:50%; background:var(--olive); color:#fff; display:grid;
  place-items:center; font-size:38px; font-weight:800; overflow:hidden; }
.profcircle img { width:88px; height:88px; object-fit:cover; }
.avwrap .cam { position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%;
  background:#fff; border:1px solid var(--line); display:grid; place-items:center; font-size:14px; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.profbody { flex:1; min-width:0; }
.pname { font-size:22px; font-weight:800; line-height:1.2; }
.phandle { font-size:14px; color:var(--sub); }
.editbtn { margin-top:8px; border:1px solid var(--chipBorder); background:#fff; color:var(--olive);
  font-family:inherit; font-weight:700; font-size:13px; padding:6px 16px; border-radius:999px; cursor:pointer; }
.editfields { display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.idrow { display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:11px; padding:0 10px; }
.idrow .at { color:var(--sub); font-weight:700; }
.idrow input { border:none; padding:10px 2px; flex:1; }
.idrow input:focus, .editfields input:focus { outline:none; }
/* 3ボックス */
.mpboxes { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:14px 0 20px; }

.mpbox { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 14px; text-decoration:none;
  color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; position:relative;
  transition:transform .08s ease, box-shadow .12s ease; }
.mpbox:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,50,30,.08); }
.mpbox .ic { font-size:28px; }
.mpbox .lb { font-weight:800; font-size:15px; }
.mpbox .ds { font-size:11px; color:var(--sub); line-height:1.4; }
.mpbox .badge { position:absolute; top:10px; right:10px; }
.badge { background:var(--danger); color:#fff; font-size:11px; font-weight:800; border-radius:999px; padding:2px 8px; }
.miscrow { display:flex; gap:18px; justify-content:center; margin:8px 0 40px; }
.misclink { background:none; border:none; font-family:inherit; font-size:12px; color:var(--sub); cursor:pointer; text-decoration:underline; padding:4px; }
.misclink.danger { color:#c0392b; }

/* ===== 全面地図（Green Biz 型） ===== */
.maproot { position:relative; height:calc(100vh - 80px); width:100%; overflow:hidden; }
.mapzone { position:absolute; inset:0; }
#fullmap { position:absolute; inset:0; }
/* 上部フローティング操作バー */
.mapbar { position:absolute; top:12px; left:12px; right:12px; z-index:5; display:flex; gap:8px;
  flex-wrap:wrap; align-items:center; pointer-events:none; }
.mapbar > * { pointer-events:auto; }
.mapbar .tabs, .mapbar select, .mapbar .search, .mapbar .reculabel {
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.mapbar .search { min-width:180px; }
.reculabel { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--sub);
  border:1px solid var(--line); border-radius:11px; padding:9px 12px; }
/* リストパネル（PC=左／スマホ=下） */
.maplist { position:absolute; z-index:5; background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  box-shadow:0 4px 24px rgba(0,0,0,.14); border:1px solid var(--line); }


.maplist .grid { grid-template-columns:1fr; margin:6px 0; gap:10px; }
.maplist .count { font-weight:800; font-size:14px; margin:2px 2px 8px; }
.recenter { position:absolute; z-index:5; right:12px; bottom:24px; background:#fff; border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.15); border-radius:50%; width:44px; height:44px; cursor:pointer; font-size:18px; }


/* メンバー構成（男女比・年齢層バー） */
.demo { margin-top:12px; }
.demo h4 { margin:0 0 6px; font-size:12.5px; color:var(--sub); font-weight:700; }
.genderbar { display:flex; height:24px; border-radius:12px; overflow:hidden; font-size:11px; color:#fff; font-weight:800; }
.genderbar .m { background:#4f83cc; display:flex; align-items:center; justify-content:flex-start; padding-left:10px; min-width:0; white-space:nowrap; }
.genderbar .f { background:#e07a9c; display:flex; align-items:center; justify-content:flex-end; padding-right:10px; min-width:0; white-space:nowrap; }
.agerow { display:flex; align-items:center; gap:8px; margin:5px 0; font-size:12px; }
.agerow .lb { width:56px; color:var(--sub); flex:none; }
.agerow .track { flex:1; height:12px; background:var(--chip); border-radius:6px; overflow:hidden; }
.agerow .fill { height:100%; background:var(--olive); border-radius:6px; }
.agerow .pct { width:40px; text-align:right; color:var(--sub); flex:none; }

/* 地図：ロゴ入りピン */
.mappin { position:absolute; padding-bottom:9px; will-change:transform; }
.mappin-body { width:46px; height:46px; border-radius:50%; background:#fff; border:3px solid var(--pin,#4c6b3f);
  box-shadow:0 2px 7px rgba(0,0,0,.35); overflow:hidden; display:grid; place-items:center; }
.mappin-body img { width:100%; height:100%; object-fit:cover; display:block; }
.mappin-body span { font-weight:800; color:var(--pin,#4c6b3f); font-size:18px; }
/* ★★2026-08-06y：ステーションは塗りつぶし（iOS solidPinView / Android と同じ）。
   ★色は --pin（呼び出し側が accent から入れている）。★ここに hex を書かない。 */
.mappin.pinsolid .mappin-body { background:var(--pin,#4c6b3f); border-color:#fff; border-width:2px; }
.mappin::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:10px solid var(--pin,#4c6b3f); }
/* ★重ね表示のランステーション＝小型ピン（RunDojo_03_コネクト.md §6.2）。
   ランイベントのプロフ円マーカー（46px）より一回り小さい 24px。副次表示なので写真は載せない。 */
.mappin.pinsmall { padding-bottom:6px; z-index:0; }
.mappin.pinsmall .mappin-body { width:24px; height:24px; border-width:2px; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.mappin.pinsmall .mappin-body span { font-size:11px; }
.mappin.pinsmall::after { border-left-width:4px; border-right-width:4px; border-top-width:6px; }

/* ★読み込み中の骨組み（カードの形だけ先に出す）。「遅い」と「壊れた」を見分けられるようにする */
@keyframes rd-sk { 0%{opacity:.55} 50%{opacity:1} 100%{opacity:.55} }
.skeleton { display:grid; gap:10px; margin:6px 0; }
.skeleton .skcard { height:112px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg,#f3f5f1,#eceee9); animation:rd-sk 1.1s ease-in-out infinite; }

/* ★チェックトグルの段（☑募集中のみ／☑ランステーションも同時表示）＝ RunDojo_03_コネクト.md §6.2 */
.mltoggles { display:flex; gap:8px; align-items:stretch; margin:0 0 10px; }
.mltoggles > * { flex:1 1 0; min-width:0; height:38px; box-sizing:border-box; margin:0; }
.mltoggles .reculabel { display:flex; align-items:center; justify-content:center; gap:6px;
  padding:0 10px; font-size:12.5px; border-radius:10px; white-space:nowrap; background:#fff;
  overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.mltoggles input[type="checkbox"] { accent-color:var(--olive,#4c6b3f); flex:none; }

/* 入力ルールのリアルタイム表示（満たす＝緑／満たさない＝赤） */
.rulelist { list-style:none; padding:0; margin:7px 2px 0; display:flex; flex-direction:column; gap:3px; }
.rulelist li { font-size:12px; display:flex; align-items:center; gap:6px; color:var(--danger); transition:color .12s; }
.rulelist li.ok { color:var(--ok); }
.rulelist li .rk { width:14px; text-align:center; font-weight:800; }
.idrow.valid { border-color:var(--ok); }
.idrow.invalid { border-color:var(--danger); }

/* ===== アプリ誘導ボトムシート（スマホ・トップで下からにゅっと） ===== */
.appsheet-back { display:none; position:fixed; inset:0; z-index:399; background:rgba(0,0,0,.38);
  opacity:0; transition:opacity .3s ease; }
.appsheet-back.show { opacity:1; }
.appsheet { display:none; position:fixed; left:0; right:0; bottom:0; z-index:400; background:#fff;
  border-radius:22px 22px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.22);
  transform:translateY(112%); transition:transform .38s cubic-bezier(.2,.85,.25,1);
  padding:10px 18px calc(20px + env(safe-area-inset-bottom)); }
.appsheet.show { transform:translateY(0); }
/* ★グリップ線はスワイプ処理が無いのに「引っ張れそう」に見えるためやめた（2026-08-13）。
   閉じるのは×と背景タップの2つ。スワイプ閉じは実装しない。
   ★.appsheet は position:fixed（上）なので、この absolute の基準になる。relative は足さない。
   ★★.appbar-x（下の「アプリを入手しよう」バー用）とは別物。★転用しない・名前を寄せない。 */
.appsheet-x { position:absolute; top:10px; right:10px; z-index:1;
  width:32px; height:32px; border-radius:16px; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--sub); font-size:18px; line-height:1;
  display:grid; place-items:center; box-shadow:0 1px 4px rgba(0,0,0,.15); }
/* ★見た目は32pxのまま、当たり判定だけ44px相当に広げる（タップしやすさ） */
.appsheet-x::before { content:""; position:absolute; top:-6px; right:-6px; bottom:-6px; left:-6px; }
.appsheet-map { width:100%; aspect-ratio:320/124; border-radius:14px; overflow:hidden; display:block; }
.appsheet-map svg { width:100%; height:100%; display:block; }
.appsheet h3 { font-size:18px; margin:12px 0 5px; }
.appsheet p { font-size:13px; color:var(--sub); line-height:1.55; margin:0 0 14px; }
.appsheet .as-dl { display:block; width:100%; text-align:center; font-size:16px; padding:13px; }

/* 未ログイン用ゲート（メリット＋ログインボタン） */
.logingate { position:fixed; inset:0; z-index:150; background:var(--bg); overflow:auto;
  padding:40px 20px calc(72px + env(safe-area-inset-bottom)); display:flex; justify-content:center; }
.logingate .lg-inner { width:100%; max-width:460px; margin:auto 0; }
.logingate .lg-brand { font-weight:800; font-size:20px; color:var(--olive); margin-bottom:14px; }
.logingate .lg-title { font-size:24px; line-height:1.35; margin:0 0 18px; }
.logingate .lg-btn { display:block; width:100%; text-align:center; margin-top:18px; font-size:16px; padding:13px; }

/* ログイン誘導＋メリット紹介 */
.loginwrap { max-width:520px; margin:0 auto; }
.loginland { padding:24px 2px 8px; }
.loginland h1 { font-size:24px; line-height:1.35; margin:0 0 8px; }
.loginland .llsub { color:var(--sub); font-size:13.5px; line-height:1.6; margin:0 0 16px; }
.benefits { list-style:none; padding:0; margin:0; display:grid; grid-auto-rows:1fr; gap:10px; }
.benefits li { display:flex; gap:12px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:13px 15px; }   /* grid-auto-rows:1fr で全カード同じ高さ */
.benefits .bic { font-size:22px; line-height:1.1; flex:none; }
.benefits b { display:block; font-size:14.5px; margin-bottom:3px; color:var(--ink); }
.benefits span { font-size:12.5px; color:var(--sub); line-height:1.55; }
.benefits .lg-fine { display:block; font-size:9.5px; color:var(--sub); opacity:.7; margin-top:3px; }
.loginwrap .panel { margin-top:16px; }

/* 新規登録CTA（ログイン画面で目立たせる赤ボックス） */
.signupcta { display:inline-block; background:#fdecea; color:var(--danger);
  border:1.5px solid #f3b7ae; border-radius:12px; padding:12px 22px; font-weight:800;
  font-size:15px; text-decoration:none; box-shadow:0 2px 8px rgba(214,69,53,.12); }
.signupcta:hover { background:#fbdcd6; border-color:#ea9c90; }

/* ===== 認証ガードの全面ローディング ===== */
.authveil { position:fixed; inset:0; z-index:3000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; }

/* ===== モーダル（警告など） ===== */
.modal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(20,28,22,.45);
  display:flex; align-items:center; justify-content:center; padding:20px; animation:mfade .12s ease-out; }
@keyframes mfade { from{opacity:0} to{opacity:1} }
.modal-card { background:#fff; border-radius:18px; max-width:400px; width:100%; padding:26px 24px 20px;
  text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.28); animation:mpop .14s ease-out; }
@keyframes mpop { from{transform:translateY(8px) scale(.98);opacity:0} to{transform:none;opacity:1} }
.modal-ic { font-size:34px; line-height:1; margin-bottom:8px; }
.modal-title { margin:0 0 8px; font-size:18px; }
.modal-msg { margin:0 0 18px; font-size:14px; color:var(--sub); line-height:1.7; }
.modal-actions { display:flex; gap:10px; justify-content:center; }
.modal-actions .btn { min-width:110px; }

/* ===== モバイル用トップの部品（既定は非表示。表示は mobile.css で） ===== */
.appbar { display:none; align-items:center; gap:10px; padding:10px 12px; background:#fff; border-bottom:1px solid var(--line); }
.appbar-x { border:none; background:none; font-size:20px; line-height:1; color:var(--sub); cursor:pointer; padding:0 2px; }
.appbar-ic { width:40px; height:40px; border-radius:11px; background:var(--olive); color:#fff; display:grid; place-items:center; font-size:20px; flex:none; }
.appbar-tx { flex:1; min-width:0; }
.appbar-t { font-weight:800; font-size:14px; line-height:1.2; }
.appbar-s { font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appbar-btn { flex:none; background:var(--olive); color:#fff; border-radius:20px; padding:9px 15px; font-size:13px; font-weight:700; text-decoration:none; }

.btabs { display:none; position:fixed; left:0; right:0; bottom:0; z-index:200; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -2px 12px rgba(0,0,0,.07); padding-bottom:env(safe-area-inset-bottom); }
.btab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 9px;
  text-decoration:none; color:var(--sub); font-size:11px; font-weight:600; position:relative; }
.btab.on { color:var(--olive); }
.btab svg { width:23px; height:23px; }
/* ★未読メッセージの印（スマホの下タブ）。アイコンの右上に重ねる。
   白い縁を付けて、アイコンと重なっても数字が読めるようにしている。 */
.btab .tdot { position:absolute; top:3px; left:50%; margin-left:3px; min-width:16px; height:16px;
  line-height:16px; padding:0 4px; border-radius:999px; background:var(--danger); color:#fff;
  font-size:10px; font-weight:800; text-align:center; box-shadow:0 0 0 2px #fff; }

/* スマホ専用：検索＋ハッシュタグ（既定は非表示。表示は mobile.css で） */
.mtop { display:none; padding:14px 12px 2px; }
.msearch { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:8px 15px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.msearch svg { width:17px; height:17px; color:var(--sub); flex:none; }
.msearch input { border:none; outline:none; flex:1; font-size:14px; background:transparent; color:var(--ink); }
.mchipsrow { display:flex; gap:8px; overflow-x:auto; padding:11px 0 1px; scrollbar-width:none; }
.mchipsrow::-webkit-scrollbar { display:none; }
/* 種別チップ行＋右端のヘルプ（?）ボタン */
/* 検索欄＋右の?ボタン */
.msearchrow { display:flex; align-items:center; gap:8px; }
.msearchrow .msearch { flex:1; min-width:0; }
.mhelp { flex:none; width:34px; height:34px; border-radius:50%; background:#e4e6e2; color:#7b8377;
  display:grid; place-items:center; font-weight:800; font-size:16px; text-decoration:none; }
.mhelp:active { background:#d7dad3; }
/* 種別タブ（ランイベント/ステーション）を全幅セグメントに */
.mtabs { display:flex; margin:11px 0 1px; }
.mtabs button { flex:1; }
.chiptag { flex:none; border:1px solid var(--chipBorder); background:var(--chip); color:var(--olive);
  border-radius:20px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
  font-family:inherit; transition:background .12s, color .12s; }
.chiptag.on { background:var(--olive); color:#fff; border-color:var(--olive); }
.maphint { display:flex; align-items:center; gap:10px; margin:14px 0 2px; padding:12px 14px;
  background:linear-gradient(120deg, #eef3ea, #fbf7ec); border:1px solid var(--chipBorder); border-radius:14px; }
.maphint .mh-ic { font-size:20px; flex:none; }
.maphint .mh-tx { flex:1; font-size:12.5px; color:var(--ink); line-height:1.5; }
.maphint a { font-size:12.5px; font-weight:800; color:var(--olive); text-decoration:none; white-space:nowrap; }