/* mobile.css：max-width（スマホ向け）※スマホ担当のみ編集 — 詳細は SPLIT_RULES.md */
@media (max-width:760px){ .brandsub { font-size:11px; } .brandtext { font-size:23px; } }
@media (max-width:760px){ .navlink { font-size:12px; padding:5px 6px; } }
/* マイページの3ボックスはスマホでも横並び（3列）。細かい灰色テキストは隠す */
@media(max-width:719px){
.mpboxes { grid-template-columns:repeat(3,1fr); gap:8px; }
.mpbox { padding:15px 6px; }
.mpbox .ic { font-size:24px; }
.mpbox .lb { font-size:13px; }
.mpbox .ds { display:none; }
}
/* ===== 掲載ページ（create）のスマホ調整 ===== */
@media (max-width:719px){
/* 左右は「ちょっとだけ」余白（端にびっしり付かない） */
body.createpage main.container { padding-left:12px; padding-right:12px; }
/* カテゴリ名の表示（badge）はスマホでは出さない */
.createpage #kindBadge { display:none !important; }
/* 「もどる」と選択エリアの間隔を詰める */
.createpage .kind-rail { margin-bottom:6px; }
.createpage #reuseWrap { margin-top:0; }
/* ジャンル/レベル/タグの大ボタン：横並び3列・縦コンパクト・薄い緑＋黒文字 */
.container .bigcats { grid-template-columns:repeat(3,1fr); gap:8px; }
.container .bigcat { min-height:62px; font-size:15px; border-radius:14px; padding:9px 6px; gap:2px;
background:#dcebc9; color:var(--ink); }
.container .bigcat.on { box-shadow:inset 0 0 0 2px var(--olive); filter:none; }
.container .bigcat .bigcat-sel { font-size:10.5px; }
/* 項目ラベルを短く＝入力エリアを広く */
.container .dtable-edit th { width:82px; white-space:normal; font-size:12.5px; padding:9px 6px 9px 2px; line-height:1.35; }
.container .dtable-edit td { padding-left:6px; padding-right:0; }
/* 種別選択カード：アプリ版と同じ「左に色帯＋アイコン／右にタイトルと説明」 */
.createpage #stepSelect { padding:18px 0 0; }
.createpage .selheading { font-size:20px; margin:6px 0 16px; }
.createpage .selgrid { gap:10px; }
/* 掲載フォーム上部の「①ページ作成／②ランイベント作成」ステッパーはスマホでは非表示 */
.createpage #wizStepper { display:none !important; }
/* ★★2026-08-14：スマホの種別カードは**ここでは1行も上書きしない**（Kazuma さん指示）。
★欲しい形＝「左＝種別色の帯（白アイコンを縦積み）／右＝白地に見出し・説明・✓の箇条書き」は、
iOS の CreateListingView.swift:614-685 と同じで、create.html 側（:353-380）が**すでにその形**。
スマホ幅の詰めも create.html 内の @media(max-width:640px)（:381-386）が持っている。
★★ここに独自レイアウトを書くと詳細度（.createpage .selcard）で勝ってしまい、別物になる。
実際、以前ここに置いていたブロックはグリッド2部屋＋height:126px固定で、あとから足された
.kfeat の置き場が無く、説明とチェックリストが重なって描画されていた。★もう置かない。 */
}
/* =========================================================================
★★掲載する：ランイベント作成カード（スマホ）
2026-08-14。正は iOS の CreateSessionCardView と、Kazuma さん添付のスクショ3枚。
・項目の並び（内容→写真→日付→申込締切→集合場所→スケジュール→距離→ペース→
人数→参加費→備考→申込後メッセージ）は **DOM 側**（create.html）で入れ替えてある。
★ここでは並べ替えない。CSS で order を触ると PC とずれる。
・ここが持つのは**見せ方だけ**：表→縦積み、ピル型ボタン、参加費の2枚カード、
有料スイッチ、写真の破線ボックス、登録するの全幅。
・★保存されるデータ（events[] のキー）には一切関係しない。
========================================================================= */
@media (max-width:719px){
/* カードの枠を外して、アプリと同じ「灰色の紙に白い入力欄が並ぶ」見え方にする */
.createpage .sesscard { border:0; border-radius:0; padding:0; background:transparent; margin-bottom:0; }
.createpage .sesscard .sc-cardclose { top:-6px; right:-6px; }
/* 写真は全幅の縦積み（.sdetail の2カラムはスマホでは元から1カラム）。
★アプリと同じ「大きな破線のボックス」に。 */
.createpage .sesscard .sdetail { gap:0; }
.createpage .sesscard .sessphoto { max-width:300px; margin:6px auto 0; background:transparent; }
.createpage .sesscard .sessphoto.sc-photobtn { border:2px dashed #ccd5cf; }
.createpage .sesscard .sessphoto .sp-empty { color:#8fbf6a; font-size:14px; }
/* ---- 表を縦積みの行に変える（th＝見出し／td＝中身） ---- */
.createpage .sesscard .dtable-edit,
.createpage .sesscard .dtable-edit tbody,
.createpage .sesscard .dtable-edit tr,
.createpage .sesscard .dtable-edit th,
.createpage .sesscard .dtable-edit td { display:block; width:auto; padding:0; border:0; }
/* セクションの区切り線＋ゆとり（アプリと同じ細い線） */
.createpage .sesscard .dtable-edit tr { padding:16px 0; border-top:1px solid var(--line); }
.createpage .sesscard .dtable-edit tr:first-child,
.createpage .sesscard .sc-contentwrap .dtable-edit tr { border-top:0; }
.createpage .sesscard .dtable-edit th { font-size:15px; font-weight:800; color:var(--ink);
text-align:left; margin-bottom:8px; white-space:normal; line-height:1.35; }
.createpage .sesscard .dtable-edit td input,
.createpage .sesscard .dtable-edit td textarea { font-size:14px; border-radius:14px; padding:12px 14px; }
.createpage .sesscard .se-hint { font-size:12px; line-height:1.5; margin-top:6px; }
/* ---- 見出しを左、コントロールを右に置く行 ----
★★セレクタに `tr` / `th` / `td` を必ず入れること。上の「縦積み」側が
`.createpage .sesscard .dtable-edit tr`（要素セレクタ2つぶん重い）なので、
`.createpage .sesscard .sr-date` だけだと**負けて display:block のまま**になる（実測で踏んだ）。 */
.createpage .sesscard .dtable-edit tr.sr-date,
.createpage .sesscard .dtable-edit tr.sr-deadline,
.createpage .sesscard .dtable-edit tr.sr-dist,
.createpage .sesscard .dtable-edit tr.sr-pace,
.createpage .sesscard .dtable-edit tr.sr-cap { display:flex; align-items:flex-start; gap:14px; }
.createpage .sesscard .dtable-edit tr.sr-date > th,
.createpage .sesscard .dtable-edit tr.sr-deadline > th,
.createpage .sesscard .dtable-edit tr.sr-dist > th,
.createpage .sesscard .dtable-edit tr.sr-pace > th,
.createpage .sesscard .dtable-edit tr.sr-cap > th { flex:0 0 84px; margin-bottom:0; padding-top:11px; }
.createpage .sesscard .dtable-edit tr.sr-date > td,
.createpage .sesscard .dtable-edit tr.sr-deadline > td,
.createpage .sesscard .dtable-edit tr.sr-dist > td,
.createpage .sesscard .dtable-edit tr.sr-pace > td,
.createpage .sesscard .dtable-edit tr.sr-cap > td { flex:1; min-width:0; }
/* ---- ピル型ボタン（薄緑地・緑文字・角丸）。日付／締切／ピン ----
★中身は今までどおりの input・button。flatpickr もピン設定モーダルもそのまま開く。
★アイコンは mask で描く（SF Symbols は使わない＝Apple ライセンス）。 */
.createpage .sesscard .se-pill { display:inline-flex; align-items:center; justify-content:center; gap:7px;
max-width:100%; background:var(--chip); border-radius:999px; padding:11px 18px; }
.createpage .sesscard .se-pill::before { content:""; flex:none; width:19px; height:19px;
background:var(--olive); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:contain; mask-size:contain; }
.createpage .sesscard .se-pill-date::before {
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,"); }
.createpage .sesscard .se-pill-dl::before {
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,"); }
.createpage .sesscard .dtable-edit td .se-pill input { width:13em; max-width:100%;
border:0; background:transparent; padding:0; border-radius:0;
font-size:15px; font-weight:800; color:var(--olive); text-align:center; }
/* ピンのボタンもピルに（.gmbtn の薄緑をそのまま使い、形だけそろえる） */
.createpage .sesscard .sc-pinbtn { display:inline-flex; align-items:center; gap:7px;
border-radius:999px; padding:11px 18px; font-size:15px; font-weight:800; margin-top:0; }
.createpage .sesscard .sc-pinbtn::before { content:""; flex:none; width:19px; height:19px;
background:var(--olive); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,"); }
.createpage .sesscard .sc-pinstat { font-size:12px; color:var(--sub); margin-left:8px; }
/* ---- 開始／終了は「日付を選んだあと」に出す（.nodate は JS が付け外し） ---- */
.createpage .sesscard .se-row3 { flex-wrap:wrap; gap:8px; }
.createpage .sesscard .se-row3.nodate .se-tlab,
.createpage .sesscard .se-row3.nodate .se-start,
.createpage .sesscard .se-row3.nodate .se-end { display:none; }
/* ---- 参加費：アプリと同じ2枚のカード ---- */
.createpage .sesscard .se-free-note { display:flex; align-items:center; gap:12px;
background:#eef5ea; border:1px solid #dbe7d3; border-radius:14px; padding:14px 16px;
font-size:16px; font-weight:800; margin-bottom:0; }
.createpage .sesscard .se-free-chk { display:block; flex:none; width:23px; height:23px; border-radius:50%;
background:var(--olive); -webkit-mask:none; mask:none;
background-image:url("data:image/svg+xml;utf8,");
background-size:15px 15px; background-position:center; background-repeat:no-repeat; }
.createpage .sesscard .se-free-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.createpage .sesscard .se-fee-sub { display:block; font-size:12.5px; font-weight:400; color:var(--sub); }
.createpage .sesscard .se-fee-opt { display:inline; }
/* 「有料にする（任意）」は白いカード＋右にスイッチ */
.createpage .sesscard .se-paid-toggle { display:flex; align-items:center; justify-content:space-between;
gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px;
margin-top:10px; white-space:normal; font-size:16px; }
.createpage .sesscard .se-paid-toggle > span { order:1; flex:1; min-width:0; }
/* ★input は既存のまま（class も name も変えない）。見た目だけスイッチにする。
★★2026-08-14：セレクタを `input.se-paid` から `.dtable-edit td … input[type="checkbox"]` に変えた。
①`.se-paid` と `.se-online` の**両方**に効かせるため（同じ指定を2つ書かない）
②★★`.dtable-edit td` を必ず入れること。create.html:230 の
`.dtable-edit td input { width:100% }` は checkbox にも効いており、
`td` を含まないセレクタだと**負けて横に伸びたまま**になる。
★これが無いと「オンライン決済を利用する」のチェックボックスが横369pxに伸び、
隣の （flex:1）が幅0に潰れて文字が画面外へ押し出され、
高さ374px の巨大な空白になっていた（実測で確定）。
★「有料にする」が壊れて見えなかったのは、クラス4つの旧指定が width:100%（クラス1つ）に
たまたま勝っていたから。★.se-online には対応する指定が無く負けていた。 */
.createpage .sesscard .dtable-edit td .se-paid-toggle input[type="checkbox"] {
order:2; flex:none; position:relative; -webkit-appearance:none; appearance:none;
width:52px; height:31px; border-radius:16px; background:#d7dbd9;
padding:0; margin:0; border:0; transition:background .15s; }
.createpage .sesscard .dtable-edit td .se-paid-toggle input[type="checkbox"]::after {
content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
.createpage .sesscard .dtable-edit td .se-paid-toggle input[type="checkbox"]:checked { background:var(--olive); }
.createpage .sesscard .dtable-edit td .se-paid-toggle input[type="checkbox"]:checked::after { transform:translateX(21px); }
/* 支払方法のトグルは枠なし・文字は左、スイッチは右 */
.createpage .sesscard .sr-pay .se-paid-toggle { display:flex; align-items:center;
justify-content:space-between; gap:14px; background:transparent; border:0; border-radius:0;
padding:0; margin-top:0; font-size:15px; font-weight:800; white-space:normal; }
/* ★2026-08-14：ここにあった `.sr-pay .se-paid-toggle input.se-paid { display:none; }` は削除。
.sr-pay の中に .se-paid は存在せず、何にも当たっていない死んだ指定だった。 */
/* ---- 「登録する」はアプリと同じ全幅・オリーブ ---- */
.createpage #bottomBar .row { display:block; }
.createpage #bottomBar #submit { width:100%; padding:15px 16px; font-size:16px; border-radius:14px; }
}
/* ===== 掲載する：未ログインLP（iOS版 HostLandingView と同じ見せ方） ===== */
@media (max-width:719px){
body.lp-tech.createpage main.container { padding-left:20px; padding-right:20px; }
.createpage #hostlp { max-width:560px; margin:0 auto; }
.createpage .lp-hero { padding:26px 0 32px; }
.createpage .lp-hero h1 { font-size:27px; line-height:1.45; margin:0; }
.createpage .lp-hero .lp-cta { display:none; }
.createpage .lp-sec { padding:0 0 32px; }
.createpage .lp-sec.alt { padding:0; margin:0 0 16px; background:transparent; border:0; box-shadow:none; }
.createpage .lp-h2 { text-align:center; font-size:18px; line-height:1.45; margin:0 0 14px; }
.createpage .lp-carousel { display:block; min-height:0; touch-action:pan-y; }
.createpage .lp-carousel > .lp-card,
.createpage .lp-carousel > .lp-payc { display:none; animation:lpCardFade .4s ease both; }
.createpage .lp-carousel > .is-active { display:flex; }
.createpage .lp-cards > .lp-card { flex-direction:column; height:288px; padding:0; background:#fff;
border:1px solid var(--t-line); border-radius:16px; }
.createpage .lp-card .lp-shot { flex:none; height:118px; aspect-ratio:auto; border-radius:12px; }
.createpage .lp-card .lp-cbody { padding:14px; min-height:0; overflow:hidden; }
.createpage .lp-card h3 { font-size:16.5px; margin-bottom:8px; }
.createpage .lp-card p { font-size:13.5px; line-height:1.35; }
.createpage .lp-card ul { font-size:13px; line-height:1.25; margin-top:8px; }
.createpage .lp-card ul li { margin:4px 0; }
.createpage .lp-dots { display:flex; justify-content:center; align-items:center; gap:8px; min-height:17px; margin-top:10px; }
.createpage .lp-dots button { appearance:none; width:7px; height:7px; min-width:0; padding:0;
border:0; border-radius:999px; background:rgba(99,115,92,.35); transition:width .25s ease, background .25s ease; }
.createpage .lp-dots button.is-active { width:18px; background:var(--olive); }
.createpage .lp-pay { min-height:268px; }
.createpage .lp-pay > .lp-payc { box-sizing:border-box; height:268px; padding:16px;
border:1px solid var(--t-line); border-radius:16px; }
.createpage .lp-pay > .lp-payc.reco { border:1.5px solid rgba(76,107,63,.45); }
.createpage .lp-payc h3 { font-size:16.5px; }
.createpage .lp-payc p { font-size:13px; }
.createpage .lp-payc ul { font-size:12.5px; line-height:1.3; }
.createpage .lp-payfee { padding:12px; margin-top:auto; border-radius:10px; background:var(--chip); }
.createpage .lp-payfee b { display:block; width:100%; font-size:14px; }
.createpage .lp-payfee span { font-size:11px; }
.createpage .lp-payfee.on { background:rgba(76,107,63,.10); }
.createpage .lp-payor { display:none !important; }
.createpage .lp-price-title { margin-top:32px; text-align:left; }
.createpage .lp-pricenote { margin:0; padding:14px; border:1px solid var(--t-line);
border-radius:14px; background:#fff; font-size:13px; line-height:1.45; }
.createpage .lp-pricenote li { margin:9px 0; line-height:1.45; }
.createpage .lp-pricenote b { color:var(--ink); font-weight:800; }
.createpage .lp-pricenote .lp-fine { padding-left:25px; font-size:11px; }
.createpage .lp-pricenote .lp-fine::before { display:none; }
.createpage .lp-final { padding:0; margin:0 0 18px; background:none; border:0; box-shadow:none; }
.createpage .lp-final .btn { display:block; box-sizing:border-box; width:100%; padding:16px;
color:#fff; background:linear-gradient(135deg,#4c6b3f,#3c5732); border-radius:14px;
box-shadow:0 6px 20px rgba(76,107,63,.22); }
}
@keyframes lpCardFade { from{ opacity:0; } to{ opacity:1; } }
@media (max-width:719px) and (prefers-reduced-motion:reduce){
.createpage .lp-carousel > .lp-card,
.createpage .lp-carousel > .lp-payc { animation:none; }
.createpage .lp-dots button { transition:none; }
}
/* ===== スマホ全ページ共通 ===== */
@media (max-width:719px){
body { padding-bottom:60px; } /* 下部タブの高さ分（全ページ） */
.btabs { display:flex; } /* 下部タブは全ページで表示 */
.site .mainnav { display:none; } /* 上バーはロゴ＋サブタイトル＋言語だけに簡素化 */
.site .bar { padding-left:16px; padding-right:16px; } /* アイコン/ENが端に付かないよう左右余白 */
/* フッターのリンクは縦並び＋余白広め（利用規約・プライバシー・運営会社・お問い合わせ） */
.footwrap { padding:26px 16px 30px; gap:18px; }
.footlinks { flex-direction:column; align-items:flex-start; gap:18px; }
.footlinks a { font-size:15px; padding:2px 0; }
}
/* ===== 詳細ページ：横はみ出し防止＋枠なし全幅（食べログ風）＋内容フォント縮小 ===== */
@media (max-width:719px){
.detail { overflow-x:hidden; } /* 万一の横はみ出しをクリップ（スマホは追従sticky無しなので安全） */
.lmain .gallery { max-width:100%; } /* ギャラリーが狭い端末で溢れないように */
/* 枠は外して全幅／区切り線は左右16px内側に引く
★★2026-08-26：本文の左右に 16px を入れる（Kazuma さん指示）。
★以前は padding:16px 0 で本文が x=0 から始まり、画面の端に張り付いていた（実測で確認）。
★器（main.container）を全幅にする設計は**そのまま**。中身側で入れる＝周りの部品と同じ作法
（区切り線16px・備考16px・申込バー16px・カレンダー14px・写真14px はどれも自前で持っている）。
★16px にするのは、すぐ下の区切り線（::after）が left/right:16px で引かれているため。
★線と本文の左端が揃う。 */
.detail .section { background:transparent; border:none; border-radius:0;
padding:16px; margin:0; position:relative; }
.detail .section:not(:last-child)::after { content:""; position:absolute; left:16px; right:16px; bottom:0; height:1px; background:var(--line); }
/* ★2026-08-26：.section に 16px が入ったので、見出しの左inset は二重にしない（26px になる） */
.detail .section h3 { font-size:15px; color:var(--ink); padding-left:0; }
.detail .hgroup { margin:12px 0 4px; }
/* 内容フォントを1段階小さく（項目名＝ラベルは維持） */
.detail .section { font-size:13px; } /* 紹介文など section 直下テキスト */
.detail .dtable th { font-size:14px; } /* 日付・集合場所等の項目名は維持 */
.detail .dtable td { font-size:13px; } /* 内容は小さく */
.detail .nb-label { font-size:14px; } /* 備考ラベルは維持 */
.detail .nb-list li { font-size:12.5px; } /* 備考の内容は小さく */
/* ===== スマホ詳細：2週間カレンダー／タブ／写真／下部申込バー ===== */
.mcalhead { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 0; }
.mcalhead span { font-weight:800; font-size:15px; }
.mcalhead .mcal-nav { width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:16px; color:var(--ink); cursor:pointer; }
.mcal2 { display:flex; gap:6px; overflow-x:auto; padding:8px 14px 4px; scrollbar-width:none; }
.mcal2::-webkit-scrollbar { display:none; }
.mc2day { flex:0 0 auto; width:46px; display:flex; flex-direction:column; align-items:center; gap:2px;
padding:8px 0; border:1px solid var(--line); border-radius:12px; background:#fff; font-family:inherit; cursor:pointer; }
.mc2day[disabled] { opacity:.45; }
.mc2day .mc2wd { font-size:10px; color:var(--sub); }
.mc2day.sun .mc2wd { color:#d6336c; } .mc2day.sat .mc2wd { color:#2f6fdb; }
.mc2day .mc2dd { font-size:15px; font-weight:800; }
.mc2day .mc2sym { font-size:12px; font-weight:800; color:var(--chipBorder); }
.mc2day.open .mc2sym { color:#e8863a; } .mc2day.closed .mc2sym { color:var(--sub); }
.mc2day.on { border-color:#e8863a; background:#fff3e6; box-shadow:inset 0 0 0 1.5px #e8863a; }
/* 同じ日に複数の回があるときだけ、カレンダーの下に出す枠選び（#mslots）。
選択中の強調は上の .mc2day.on と同じ配色にそろえてある。 */
.mslots { display:flex; gap:8px; overflow-x:auto; padding:2px 14px 10px; scrollbar-width:none; }
/* ★display を指定すると hidden 属性（UA の [hidden]{display:none}）が効かなくなり、
1回しかない日でも空の帯ぶんの余白が残る。ここで打ち消しておく。 */
.mslots[hidden] { display:none; }
.mslots::-webkit-scrollbar { display:none; }
.mslot { flex:0 0 auto; min-width:112px; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
padding:8px 12px; border:1px solid var(--chipBorder); border-radius:12px; background:var(--card);
font-family:inherit; color:var(--ink); text-align:left; }
.mslot .ms-t { font-size:14px; font-weight:800; }
.mslot .ms-s { font-size:11.5px; font-weight:700; color:#2e7d32; }
.mslot .ms-p { font-size:11.5px; color:var(--sub); }
.mslot.closed .ms-s { color:var(--sub); }
.mslot.over { opacity:.6; }
.mslot.on { border-color:#e8863a; background:#fff3e6; box-shadow:inset 0 0 0 1.5px #e8863a; }
.mtabs2 { display:flex; border-bottom:1px solid var(--line); margin:6px 0 2px; }
.mtabs2 button { flex:1; background:none; border:none; font-family:inherit; font-size:14px; font-weight:700;
color:var(--sub); padding:12px 0; cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.mtabs2 button.on { color:var(--olive); border-bottom-color:var(--olive); }
.mroute { height:70vh; min-height:360px; border-radius:12px; overflow:hidden; background:var(--chip); }
/* 会の写真：中央寄せ＋一回り小さく（約7割） */
.detail #mSessInfo .sessphoto { max-width:260px; margin-left:auto; margin-right:auto; }
/* 人数（表の末尾）と備考の間に区切り線（左右16px内側） */
/* ★2026-08-26：同じ理由で二重インセットにしない（16+16=32px になる） */
.detail #mSessInfo .notesblock { border-top:1px solid var(--line); margin:14px 0 0; padding:14px 0 0; }
/* 備考の下（会情報セクション）とコミュニティ情報の間には線を入れない */
.detail #mSessInfo::after { display:none; }
/* 写真は左右padding付き＋一回り小さく（4列） */
.mphotos { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:8px 14px; }
.mpcell { padding:0; border:none; background:var(--chip); aspect-ratio:1/1; overflow:hidden; cursor:pointer; border-radius:6px; }
.mpcell img { width:100%; height:100%; object-fit:cover; display:block; }
.mlightbox { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.92);
display:flex; align-items:center; justify-content:center; }
.mlightbox[hidden] { display:none; }
.mlightbox img { max-width:100%; max-height:100%; object-fit:contain; }
.mlb-x { position:fixed; top:14px; right:16px; width:40px; height:40px; border-radius:50%; border:none;
background:rgba(255,255,255,.2); color:#fff; font-size:22px; cursor:pointer; }
.mapplybar { position:fixed; left:0; right:0; bottom:0; z-index:210; background:#fff;
box-shadow:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
display:flex; align-items:center; gap:12px; }
.mab-when { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.mab-when .mab-date { font-size:17px; font-weight:800; color:var(--ink); }
.mab-when .mab-time { font-size:20px; font-weight:800; color:var(--ink); letter-spacing:.01em; }
.mapplybar .applybar { flex:none; margin:0; padding-top:0; border-top:none; } /* base.css の上線を消す */
.mapplybar .applybtn { width:auto; min-width:130px; flex-direction:column; gap:1px; padding:8px 18px; }
.mapplybar .applybtn .applyprice { font-size:11.5px; font-weight:700; opacity:.95; }
.mapplybar .applyclosed { font-size:12.5px; color:var(--sub); }
.hasapplybar .btabs { display:none; } /* 詳細では下部タブの代わりに申込バー */
body.hasapplybar { padding-bottom:72px; }
/* 詳細ページは左右paddingを消して全幅（食べログ風） */
body.hasapplybar main.container { padding-left:0; padding-right:0; }
}
/* ===== トップ（index）のスマホ専用レイアウト（地図なし・検索＋ハッシュタグ＋リスト） ===== */
@media (max-width:719px){
/* トップはヘッダ非表示（アプリ入手バーを最上部に） */
body.home header.site { display:none; }
.appbar { display:flex; }
/* 地図は出さない。検索＋ハッシュタグを表示し、その下にリスト */
.maproot { position:static; height:auto; width:auto; overflow:visible; }
.mapzone { display:none; }
.mtop { display:block; }
.maplist { position:static; left:auto; right:auto; bottom:auto; top:auto; width:auto; height:auto;
max-height:none; border:none; border-radius:0; box-shadow:none; background:transparent;
padding:6px 12px 12px; backdrop-filter:none;
display:flex; flex-direction:column; }
/* 順序：件数（大きく）→ フィルタ → 一覧 */
.maplist .count { order:1; font-size:19px; font-weight:800; color:var(--ink); margin:12px 2px 8px; }
/* 件数の数字（例:6）を大きく＋色付け */
.maplist .count .cnum { font-size:26px; color:var(--olive); margin:0 2px; }
/* 件数の右にカレンダー絞り込みボタン（スマホでも表示） */
.maplist .countrow { order:1; }
.maplist .calbtn { display:grid; place-items:center; width:34px; height:34px; flex:none;
border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; color:var(--ink); }
.maplist .calbtn.on { background:var(--olive); border-color:var(--olive); color:#fff; }
.maplist .calclear { display:grid; place-items:center; width:22px; height:22px; flex:none;
border:none; background:var(--chip); border-radius:50%; cursor:pointer; color:var(--sub); font-size:13px; line-height:1; }
/* エリア/種別ハッシュタグを気持ち薄く（縦の厚みを少し減らす） */
.mchipsrow .chiptag { padding-top:5px; padding-bottom:5px; }
.mlfilters { order:2; }
.mltoggles { order:2; } /* ★チェックトグルの段（募集中のみ／ランステ重ね表示） */
#list { order:3; }
/* 一覧内フィルタ（ジャンル／レベル／募集中のみ）をスマホでも表示 */
.mlfilters { gap:8px; align-items:stretch; margin:2px 0 10px; }
.mlfilters > * { flex:1 1 0; min-width:0; height:38px; box-sizing:border-box; margin:0; }
.mlfilters select { font-family:inherit; font-size:12.5px; padding:0 8px;
border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.mlfilters .reculabel { display:flex; align-items:center; justify-content:center; gap:5px;
border:1px solid var(--line); border-radius:10px; font-size:11.5px; color:var(--sub); background:#fff; }
/* ★★2026-08-13：トグル2つの枠を外して左寄せ（Kazuma さん指示）。
★白枠ボックス＋均等割り（base.css:315-320）をやめ、素のチェック＋文字にする。
★HTML（index.html:205-208）は触らず、CSS だけで外す。★PC 側の base.css も触らない。 */
.mltoggles { justify-content:flex-start; gap:18px; margin:0 0 10px; }
.mltoggles > * { flex:0 0 auto; height:auto; }
.mltoggles .reculabel { background:none; border:none; box-shadow:none;
padding:6px 0; /* ★枠は付けず、当たり判定だけ縦に確保する */
justify-content:flex-start; font-size:12.5px; gap:5px; }
/* ★★2026-08-13：検索窓〜ハッシュタグ帯を「ちょっとだけ」縦に詰める（合計 約13px）。
★base.css の元の値は変えない（PC も同じクラスを使うため）。
★★これ以上攻めない。詰めすぎてタップしづらくなったら本末転倒。 */
.mtop { padding:10px 12px 0; }
.mtabs { margin:8px 0 0; }
.mchipsrow { padding:8px 0 1px; }
/* ★★2026-08-13：カードのタグ帯は1行＋横スクロール（折り返して縦に伸びない）。
★★セレクタは `.maplist .card .meta` に限定する。★裸の `.meta` に当てないこと
（掲載詳細パネル・ステーションカードの設備表示と同じクラスを共有しているため）。 */
.maplist .card .meta { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
-webkit-overflow-scrolling:touch; }
.maplist .card .meta::-webkit-scrollbar { display:none; }
.maplist .card .meta .pill { flex:none; white-space:nowrap; }
}
/* ===== ★スマホの入力欄の文字サイズ（2026-08-13 → 2026-08-14 改訂） =====
★★経緯：iOS Safari はフォーカスした入力の font-size が 16px 未満だと**画面全体を自動ズーム**する。
2026-08-13 はそれを止めるために 16px に固定した。
★★2026-08-14：Kazuma さん指示で 14px に下げた（iOS アプリの実測値と同じ。
CreateSessionCardView.swift:1267 の `var fontSize: CGFloat = 14`）。
★これだけだと自動ズームが必ず戻るので、**assets/ui.js の `suppressIOSZoom()` が
iOS のときだけ viewport に maximum-scale=1 を足して**打ち消している。★対で1つの手当て。
片方だけ外さないこと（14px のまま JS を消すとズームが復活する）。
★★Android には maximum-scale を付けていない（Chrome は尊重するのでピンチズームまで殺す）。
★★!important はここでは意図的。create.html のように style 属性直書きの font-size が
動的生成 HTML に存在し、!important でなければ勝てないため。外さないこと。
★対象はキーボードが出る入力要素だけ。ボタン・見出し・注記は元から 16px 未満で、
フォーカスしないのでズームとは無関係。★PC 幅は変えない。 */
@media (max-width:719px){
select, textarea,
input[type=text], input[type=search], input[type=email], input[type=password],
input[type=url], input[type=number], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local],
input:not([type]) {
font-size:14px !important;
}
}
/* ===== ★長文の入力欄だけ、さらに2段階小さく（2026-08-15・Kazuma さん指示） =====
★14px → 12px。備考・申込後メッセージ・内容・スケジュール・紹介文など、
長い文章が入る欄は 14px だと画面を占有しすぎるため。
★★16px を下回れるのは assets/ui.js の suppressIOSZoom() が iOS の自動ズームを
止めているから。★片方だけ外さないこと（JS を消すとズームが復活する）。
★対象は掲載する（createpage）の textarea だけに絞る。
さがすの検索窓・絞り込み・ログイン・チャットの入力は 14px のまま。
★★単行の入力欄は 14px に据え置く。一括で下げると
`.createpage .sesscard .dtable-edit td .se-pill input`（日付・締切ピルの
15px・太字・緑）に !important で勝ってしまい、ピルの見た目が崩れる。
★★上の 14px ブロックを書き換えず、**後ろに足す**こと（同じ詳細度でも後勝ちにする）。 */
@media (max-width:719px){
.createpage textarea { font-size:12px !important; }
}