@charset "utf-8";
/* ==========================================================
   ③ 学生寮・下宿 記事（omu-ryo-02）── パオの制作中ページ（LP案 01）と同じ部品で組む記事
   common.css / senior-lp.css / _brand.css の上に、記事用の部品だけ足す。
   節は .section と .bg-tint の交互、見出しは .section-title、カードは .card、FAQ は .faq-item。
   ========================================================== */

:root{ --a-ink:#1f2a2b; --a-body:#3e4c4b; --a-muted:#6b7877; --a-rule:#dbe5e5; --a-tint:#EDF4F5; --a-teal:#008486; --a-deep:#006a6c; --a-warn-bg:#fff7ec; --a-warn:#9a5a10; }

/* 記事の幅と本文 */
body.lp .a-wrap{ max-width:820px; margin:0 auto; padding:0 20px; }
body.lp .a-wrap p{ font-size:16px; line-height:1.95; color:var(--a-body); margin:0 0 16px; }
body.lp .a-wrap p.a-small{ font-size:13px; color:var(--a-muted); line-height:1.7; }
body.lp .a-wrap h3{ font-size:18px; line-height:1.5; margin:52px 0 12px; padding-left:12px; border-left:4px solid var(--a-teal); color:var(--a-ink); font-weight:700; }
body.lp .a-wrap a{ color:var(--a-deep); }

/* 導入：写真1枚＋リード */
/* 左右は .a-wrap の 20px をそのまま使う。ここで padding をまとめて書くと左右が 0 になり、
   狭い画面で冒頭の写真と文だけが画面の端に張り付いていた（2026-10-10 依頼主が発見） */
body.lp .a-hero{ padding-top:36px; padding-bottom:8px; }
body.lp .a-hero figure{ margin:0 0 18px; border-radius:16px; overflow:hidden; aspect-ratio:16/8; background:#e9f1f1; }
body.lp .a-hero figure img{ width:100%; height:100%; object-fit:cover; display:block; }
body.lp .a-hero .a-meta{ font-size:13px; color:var(--a-muted); display:flex; gap:14px; flex-wrap:wrap; margin:0 0 12px; }
body.lp .a-hero .a-lead{ font-size:16.5px; line-height:1.95; }

/* 結論ボックス */
body.lp .a-answer{ background:var(--a-tint); border-radius:14px; padding:20px 22px; margin:18px 0 0; }
body.lp .a-answer h2{ font-size:15px; margin:0 0 10px; color:var(--a-deep); letter-spacing:.04em; }
body.lp .a-answer ol{ margin:0; padding-left:1.4em; }
body.lp .a-answer li{ margin:6px 0; font-size:15.5px; line-height:1.85; color:var(--a-body); }
body.lp .a-answer b{ color:var(--a-ink); }

/* 目次 */
body.lp .a-toc{ border:1px solid var(--a-rule); border-radius:14px; padding:16px 20px; margin:22px 0 8px; font-size:15px; }
body.lp .a-toc p{ margin:0 0 8px; font-size:13px; color:var(--a-muted); font-weight:700; }
body.lp .a-toc ol{ margin:0; padding-left:1.5em; line-height:1.9; }
body.lp .a-toc a{ color:var(--a-ink); text-decoration:none; }
body.lp .a-toc a:hover{ color:var(--a-deep); text-decoration:underline; }
@media (min-width:640px){ body.lp .a-toc ol{ columns:2; column-gap:28px; } }

/* 節の頭：eyebrow は senior-lp の部品。記事では左寄せにする */
body.lp .a-wrap .eyebrow{ text-align:left; }
body.lp .a-wrap .section-title{ text-align:left; font-size:24px; margin-bottom:16px; }
body.lp .a-wrap .section-lead{ margin-bottom:20px; text-align:left; }

/* 強調ボックス */
body.lp .a-point{ background:#fff; border:1px solid var(--a-rule); border-left:5px solid var(--a-teal); border-radius:0 12px 12px 0; padding:14px 18px; margin:14px 0 20px; font-size:16px; line-height:1.8; }
body.lp .a-point b{ color:var(--a-deep); }
body.lp .section.bg-tint .a-point{ background:#fff; }

/* 選択肢カード（common の .card を使い、番号を足す） */
body.lp .a-cards{ display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0 20px; }
body.lp .a-cards .card{ padding:18px 20px; }
body.lp .a-cards .card h4{ margin:0 0 6px; font-size:17px; display:flex; align-items:center; gap:8px; color:var(--a-ink); }
body.lp .a-cards .card h4 .n{ display:inline-flex; width:30px; height:30px; border-radius:50%; background:var(--a-teal); color:#fff; font-weight:700; align-items:center; justify-content:center; font-size:15px; flex:none; }
body.lp .a-cards .card p{ margin:0; font-size:14.5px; line-height:1.8; }
@media (min-width:640px){ body.lp .a-cards{ grid-template-columns:1fr 1fr; } }

/* 表 */
body.lp .a-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0 8px; border:1px solid var(--a-rule); border-radius:12px; background:#fff; }
body.lp .a-table table{ border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px; line-height:1.6; }
body.lp .a-table th, body.lp .a-table td{ padding:10px 12px; border-bottom:1px solid var(--a-rule); vertical-align:top; text-align:left; }
body.lp .a-table thead th{ background:var(--a-teal); color:#fff; font-weight:700; white-space:nowrap; }
body.lp .a-table thead th + th{ border-left:1px solid rgba(255,255,255,.4); }
body.lp .a-table tbody th{ background:#fff; position:sticky; left:0; box-shadow:1px 0 0 var(--a-rule); font-weight:700; }
/* スマホでは、店名の列を左に貼り付けない（2026-09-28）
   店名が長いと列が227pxまで広がり、画面305pxのうち残りが78pxしかなくなって
   「徒歩」「営業時間」が読めなかった。全部の列を同じように流す。
   表は min-width:640px なので、横スクロールが起きるのは画面700px未満のとき。 */
@media (max-width:700px){
    body.lp .a-table tbody th{ position:static; }
}
body.lp .a-table tr:last-child td, body.lp .a-table tr:last-child th{ border-bottom:0; }
body.lp .a-table td.ok{ color:var(--a-deep); font-weight:700; }
body.lp .a-table td b{ font-size:16px; color:var(--a-ink); }

/* タイプ別の結論 */
body.lp .a-verdict{ display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0 8px; }
body.lp .a-verdict div{ border-left:5px solid var(--a-teal); background:#fff; border:1px solid var(--a-rule); border-left-width:5px; border-left-color:var(--a-teal); border-radius:0 12px 12px 0; padding:12px 16px; font-size:15.5px; line-height:1.8; }
body.lp .a-verdict b{ display:block; color:var(--a-deep); margin-bottom:2px; }
@media (min-width:700px){ body.lp .a-verdict{ grid-template-columns:1fr 1fr 1fr; } }

/* 3物件カード（写真つき） */
body.lp .a-props{ display:grid; grid-template-columns:1fr; gap:14px; margin:16px 0 8px; }
body.lp .a-prop{ background:#fff; border:1px solid var(--a-rule); border-radius:14px; overflow:hidden; }
body.lp .a-prop img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
body.lp .a-prop .bd{ padding:14px 18px 16px; }
body.lp .a-prop h4{ margin:0 0 4px; font-size:18px; color:var(--a-ink); }
body.lp .a-prop .price{ font-size:14.5px; color:var(--a-body); margin:0 0 8px; }
body.lp .a-prop .price b{ font-size:22px; color:var(--a-ink); }
body.lp .a-prop ul{ margin:0 0 12px; padding-left:1.2em; font-size:14px; line-height:1.7; color:var(--a-body); }
body.lp .a-prop li{ margin:2px 0; }
@media (min-width:700px){ body.lp .a-props{ grid-template-columns:1fr 1fr 1fr; } }

/* 読者の声（囲み） */
body.lp .a-voice{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; background:#fff; border:1px solid var(--a-rule); border-radius:14px; padding:16px 18px; margin:14px 0 20px; }
body.lp .a-voice .q{ width:34px; height:34px; border-radius:50%; background:var(--a-tint); color:var(--a-deep); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px; }
body.lp .a-wrap .a-voice p{ margin:0; font-size:15px; line-height:1.85; }
body.lp .a-wrap .a-voice small{ display:block; color:var(--a-muted); font-size:12.5px; line-height:1.5; margin-top:5px; }

/* 次に読む */
body.lp .a-next{ display:grid; grid-template-columns:1fr; gap:12px; margin:16px 0 8px; }
body.lp .a-next a{ display:block; text-decoration:none; border:1px solid var(--a-rule); border-radius:14px; padding:14px 18px; color:var(--a-ink); background:#fff; line-height:1.6; }
body.lp .a-next a small{ display:block; color:var(--a-muted); font-size:12.5px; margin-bottom:2px; }
body.lp .a-next a b{ color:var(--a-deep); font-size:16px; }
@media (min-width:700px){ body.lp .a-next{ grid-template-columns:1fr 1fr 1fr; } }

/* 確認待ちの印（公開前に消す） */
body.lp .a-pending{ background:var(--a-warn-bg); color:var(--a-warn); border-radius:4px; padding:0 6px; font-size:12.5px; }

/* 出どころ */
body.lp .a-wrap p.a-src{ font-size:13px; color:var(--a-muted); line-height:1.75; padding:0; margin:2em 0 16px; }
/* 記事の署名行（執筆・公開日・最終更新）2026-10-06。最終更新は編集ツールの保存で自動更新 */
body.lp .a-wrap p.a-byline{ font-size:12.5px; color:var(--a-muted); line-height:1.8; padding:0; margin:12px 0 16px;
  border-top:1px solid #e3ebeb; padding-top:10px; }
body.lp .a-wrap p.a-byline time{ white-space:nowrap; }

/* ページ帯：LP案 01 と同じ形（senior-lp の上書きを戻す） */
body.lp .page-header{ margin-top:72px; padding:44px 24px 40px; text-align:center; background:var(--bg-tint, #EDF4F5); border-bottom:none; }
body.lp .page-header h1{ font-size:26px; font-weight:700; letter-spacing:normal; color:var(--corporate-color, #006a6c); margin:0 auto 8px; line-height:1.45; max-width:30em; text-wrap:balance; }
body.lp .page-header p{ font-size:14px; color:var(--text-light, #6b7877); margin:0; }
@media (max-width:700px){ body.lp .page-header{ padding:26px 20px 22px; } body.lp .page-header h1{ font-size:21px; } }
/* 導入写真は少し低く */
body.lp .a-hero figure{ aspect-ratio:16/7; }
@media (max-width:700px){ body.lp .a-hero figure{ aspect-ratio:4/3; border-radius:12px; } }
/* 管理人室の写真と本文を横並び（PC） */
@media (min-width:700px){ body.lp .media-row{ grid-template-columns:2fr 3fr !important; } }

/* 導入の「読者の問い」（参考：webmarks の記事冒頭の型） */
body.lp .a-hero .a-ask{ font-size:17px; line-height:2.05; color:var(--a-ink); font-weight:700; margin:0 0 18px; }
body.lp .a-hero .a-lead{ margin-bottom:12px; }
body.lp .a-hero .a-lead b{ color:var(--a-deep); }
@media (max-width:700px){ body.lp .a-hero .a-ask{ font-size:15.5px; line-height:1.9; } }

/* 導入：画像の上下は1行分の余白に */
body.lp .section.section--tight-top{ padding-top:0; }
/* 左右は .a-wrap の 20px をそのまま使う（上の18行目と同じ理由。2026-10-10） */
body.lp .a-hero{ padding-top:28px; padding-bottom:8px; }
body.lp .a-hero figure{ margin:0 0 28px; }

/* ==========================================================
   読みやすさ（参考：webmarks の記事ページの見出し・枠）
   ========================================================== */
/* h2：薄い地色＋左の太い線 */
body.lp .a-wrap .section-title{
  background:var(--a-tint); border-left:6px solid var(--a-teal); border-bottom:0;
  padding:15px 14px 15px 20px; margin:0 0 26px; border-radius:0 6px 6px 0;
  font-size:23px; line-height:1.5; text-align:left; }
body.lp .section.bg-tint .a-wrap .section-title{ background:#fff; }
/* h3：下線の左3割だけ濃い */
body.lp .a-wrap h3{
  border-left:0; padding:0 0 9px; margin:56px 0 16px; font-size:19px; line-height:1.5;
  border-bottom:4px solid #dbe5e5;
  border-image:linear-gradient(90deg, var(--a-teal) 33%, #dbe5e5 0) 1/0 0 4px 0; }

/* 枠（ワンポイント・注意など）── 左上に札、中は薄い地色 */
body.lp .a-tip{ border:1px solid #a9d2d5; border-radius:7px; overflow:hidden;
  padding:0 0 16px; margin:22px 0 20px; background:#dceded; }
body.lp .a-tip > .ttl{ display:inline-block; margin:0 0 12px;
  background:var(--a-deep); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  padding:6px 18px; border-radius:6px 0 7px 0; }
body.lp .a-tip > *:not(.ttl){ margin-left:18px; margin-right:18px; }
body.lp .a-tip p{ margin:0 0 10px; font-size:15.5px; line-height:1.95; }
body.lp .a-tip p:last-child{ margin-bottom:0; }
body.lp .a-tip ul, body.lp .a-tip ol{ margin:0 0 10px; padding-left:1.25em; }
body.lp .a-tip.warn{ border-color:#e8cfa8; background:var(--a-warn-bg); }
body.lp .a-tip.warn > .ttl{ background:var(--a-warn); }
/* 「杉本キャンパスでは」と「月額の目安」が続くときは、あいだを詰める */
body.lp .a-tip + .a-tip{ margin-top:-8px; }

/* 図（グラフィックレコーディング風） */
body.lp .a-fig{ margin:22px 0 24px; background:#fff; border:1px solid var(--a-rule); border-radius:12px; padding:16px 14px 12px; }
body.lp .a-fig svg{ width:100%; height:auto; display:block; }
body.lp .a-fig figcaption{ font-size:12.5px; color:var(--a-muted); margin-top:8px; line-height:1.6; }

/* 本文の途中に入れる写真 */
body.lp .a-photo{ margin:22px 0 24px; }
body.lp .a-photo img{ width:100%; border-radius:12px; display:block; aspect-ratio:16/9; object-fit:cover; }
body.lp .a-photo figcaption{ font-size:12.5px; color:var(--a-muted); margin-top:7px; line-height:1.6; }
body.lp .a-photo2{ display:grid; grid-template-columns:1fr; gap:12px; margin:22px 0 24px; }
body.lp .a-photo2 img{ width:100%; border-radius:12px; display:block; aspect-ratio:4/3; object-fit:cover; }
@media (min-width:640px){ body.lp .a-photo2{ grid-template-columns:1fr 1fr; } }

/* ── 編集画面から付ける装飾（本番でもそのまま効きます） ── */
body.lp .a-mk{ background:linear-gradient(transparent 62%, #ffe27a 0); }
body.lp .a-mk-g{ background:linear-gradient(transparent 62%, #bde7c8 0); }
body.lp .a-c1{ color:var(--a-teal); font-weight:700; }
body.lp .a-c2{ color:var(--a-warn); font-weight:700; }
body.lp .a-c3{ color:#c0392b; font-weight:700; }
/* 削除予定：本番では出ない。編集中だけグレーで表示される */
.pao-willdelete{ display:none !important; }

/* ── 5つの住まい：メリット／デメリットの見出し ── */
body.lp .a-wrap h4.mrt, body.lp .a-wrap h4.dmr{ display:inline-block; font-size:14.5px; font-weight:700;
  margin:20px 0 9px; padding:5px 14px; border-radius:6px; line-height:1.5; }
body.lp .a-wrap h4.mrt{ background:#e3f0f0; color:#006a6c; }
body.lp .a-wrap h4.dmr{ background:#fbeee3; color:#a8501a; }
body.lp .a-wrap h4.mrt + ul, body.lp .a-wrap h4.dmr + ul{ margin:0 0 4px; padding-left:1.35em; }
body.lp .a-wrap h4.mrt + ul li, body.lp .a-wrap h4.dmr + ul li{ margin:0 0 7px; line-height:1.9; }
body.lp .a-wrap h4.mrt + ul li::marker{ color:var(--a-teal); }
body.lp .a-wrap h4.dmr + ul li::marker{ color:var(--a-warn); }

/* ── 杉本キャンパスでは／月額のめやす の注記 ── */
body.lp .a-note{ background:#f4f8f8; border-left:3px solid #b9cdcd; border-radius:0 8px 8px 0;
  padding:11px 15px; margin:14px 0 4px; font-size:14px; line-height:1.95; color:var(--a-body); }
body.lp .a-note b{ color:var(--a-ink); }

/* ── 横に長い図（スマホでは横スクロール） ── */
body.lp .a-fig.wide{ overflow-x:auto; }
body.lp .a-fig.wide svg{ min-width:620px; }

/* ── 含まれるもの早見（チップ表） ── */
body.lp .a-chips{ margin:22px 0 10px; overflow-x:auto; }
body.lp .a-chips table{ width:100%; min-width:620px; border-collapse:separate; border-spacing:4px; }
body.lp .a-chips thead th{ background:none; border:0; font-size:12px; color:var(--a-muted);
  font-weight:700; padding:2px 4px 4px; text-align:center; }
body.lp .a-chips tbody th{ background:none; border:0; text-align:left; white-space:nowrap;
  font-size:14px; font-weight:700; color:var(--a-ink); padding:0 10px 0 2px; }
body.lp .a-chips td{ padding:0; border:0; height:1px; }   /* height:1px は、中のチップを行の高さいっぱいに伸ばすための決まり手 */
body.lp .a-chips .c{ display:flex; align-items:center; justify-content:center;
  height:100%; min-height:46px; box-sizing:border-box;
  border-radius:7px; padding:10px 6px; text-align:center;
  font-size:11.5px; line-height:1.45; font-weight:700; }
body.lp .a-chips .c.y{ background:var(--a-teal); color:#fff; }
body.lp .a-chips .c.m{ background:#cfe4e4; color:#2c5658; }
body.lp .a-chips .c.n{ background:#f0f2f2; color:#98a5a5; }
body.lp .a-chips .lg{ display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  font-size:12px; color:var(--a-muted); margin:9px 0 0; }
body.lp .a-chips .lg i{ display:inline-block; width:14px; height:14px; border-radius:4px;
  vertical-align:-2px; margin-right:6px; }

/* ── 周辺案内：地図の埋め込み ── */
body.lp .a-map{ margin:20px 0 10px; border-radius:12px; overflow:hidden; border:1px solid var(--a-rule); }
body.lp .a-map iframe{ display:block; width:100%; height:420px; border:0; }
@media (max-width:600px){ body.lp .a-map iframe{ height:300px; } }

/* ── 周辺案内：徒歩◯分の帯 ── */
body.lp .a-walk{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; margin:22px 0 12px; }
body.lp .a-walk .band{ border:1px solid var(--a-rule); border-radius:12px; padding:0 0 10px; background:#fff; overflow:hidden; }
body.lp .a-walk .band .t{ margin:0 0 8px; padding:9px 14px; font-size:14px; font-weight:700; color:#fff; background:var(--a-teal); }
  /* 2026-09-17 修正：段ごとに背景を薄くしていたが、4段目（.b4 #9dbcbc）は
     白文字とのコントラストが 2.03 しかなく、読みにくかった。
     依頼主の判断で、4段とも1段目と同じ濃さにそろえる */
  body.lp .a-walk .band.b2 .t,
  body.lp .a-walk .band.b3 .t,
  body.lp .a-walk .band.b4 .t{ background:var(--a-teal); }
body.lp .a-walk ul{ margin:0; padding:0 14px; list-style:none; }
body.lp .a-walk li{ font-size:13.5px; line-height:1.7; padding:7px 0; border-bottom:1px dashed #e4ecec; }
body.lp .a-walk li:last-child{ border-bottom:0; }
body.lp .a-walk li span{ display:block; font-size:11.5px; color:var(--a-muted); }

/* 導入と次の節のあいだを1行分に */
body.lp .section.section--tight-bottom{ padding-bottom:10px; }
body.lp .section.section--tight-gap{ padding-top:30px; }
/* 早見表の「月額のめやす」列 */
body.lp .a-chips table{ min-width:730px; }
body.lp .a-chips .c.p{ background:#fff; border:1px solid var(--a-teal); color:var(--a-ink); font-size:12px; }

/* 早見表：列を詰めて折り返しを減らす */
body.lp .a-chips thead th{ white-space:nowrap; }
body.lp .a-chips .c{ font-size:11.5px; padding:9px 5px; }
body.lp .a-chips .c.p{ font-size:11.5px; }

/* ── H4（メリット・デメリット）の装飾。クラスが消えても崩れないよう土台を持たせる ── */
body.lp .a-wrap > h4{ display:inline-block; font-size:14.5px; font-weight:700; color:#006a6c;
  background:#e3f0f0; margin:20px 0 9px; padding:5px 14px; border-radius:6px; line-height:1.5; }
body.lp .a-wrap > h4.dmr{ background:#fbeee3; color:#a8501a; }
/* リストの点を戻す（assets/common.css の ul{list-style:none} を打ち消す） ── */
body.lp .a-wrap > h4 + ul{ list-style:disc; margin:0 0 4px; padding-left:1.5em; }
body.lp .a-wrap > h4 + ul li{ margin:0 0 7px; line-height:1.9; }
body.lp .a-wrap > h4 + ul li::marker{ color:var(--a-teal); }
body.lp .a-wrap > h4.dmr + ul li::marker{ color:var(--a-warn); }

/* ── 「杉本キャンパスでは」の注記を、枠で囲う ── */
body.lp .a-note{ background:#fff; border:1px solid #d3dedd; border-radius:3px;
  padding:14px 16px; margin:14px 0 6px; font-size:14px; line-height:1.95; color:var(--a-body); }
body.lp .a-note b{ color:var(--a-ink); }
body.lp .a-note a{ color:var(--a-deep); }

/* ── 「もう少し詳しく」のアコーディオン ── */
body.lp .a-wrap details.a-more{ border:1px solid var(--a-rule); border-radius:8px; background:#fff; margin:12px 0 6px; }
body.lp .a-wrap details.a-more > summary{ cursor:pointer; padding:10px 15px; font-size:13.5px;
  font-weight:700; color:var(--a-teal); list-style:none; }
body.lp .a-wrap details.a-more > summary::-webkit-details-marker{ display:none; }
body.lp .a-wrap details.a-more > summary::before{ content:"＋ "; }
body.lp .a-wrap details.a-more[open] > summary::before{ content:"− "; }
body.lp .a-wrap details.a-more > summary:hover{ background:#f4f8f8; border-radius:8px; }
body.lp .a-wrap details.a-more > p{ margin:0; padding:0 15px 13px; font-size:14.5px; line-height:1.95; }

/* ── 本文リンクの色が、ボタンに当たらないようにする ── */
body.lp a.btn{ text-decoration:none; }
body.lp .a-wrap a.btn-accent, body.lp .a-wrap a.btn-primary{ color:#fff; }
/* 暗い節の白いボタンだけ、文字を濃いティールにする（白背景の節では枠線を残す） */
body.lp .section.lp-dark a.btn{ text-decoration:none; }
body.lp .section.lp-dark a.btn-accent, body.lp .section.lp-dark a.btn-primary{ color:#fff; }
body.lp .section.lp-dark a.btn-outline{ background:#fff; color:var(--a-deep); border-color:#fff; font-weight:700; }
body.lp .section.lp-dark a.btn-outline:hover{ background:#e6f2f2; color:#00595b; }

/* ── 一覧のGoogleマップへのリンク ── */
body.lp .a-table a.a-route{ display:inline-block; white-space:nowrap; font-size:12.5px; font-weight:700;
  color:#fff; background:var(--a-teal); border-radius:6px; padding:5px 11px; text-decoration:none; }
body.lp .a-table a.a-route:hover{ background:var(--a-warn); }
body.lp .a-table a.a-route::before{ content:"▸ "; }

/* ── 物件ごとのタブ（JSなし・ラジオボタン） ── */
body.lp .a-tabs{ margin:20px 0 10px; }
body.lp .a-tabs > input{ position:absolute; opacity:0; pointer-events:none; }
body.lp .a-tabs .bar{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 -1px; }
body.lp .a-tabs .bar label{ flex:1 1 120px; cursor:pointer; text-align:center; border:1px solid var(--a-rule);
  border-bottom-color:transparent; border-radius:10px 10px 0 0; background:#f2f7f7; color:var(--a-body);
  padding:11px 10px 10px; font-size:14.5px; font-weight:700; line-height:1.4; }
body.lp .a-tabs .bar label span{ display:block; font-size:11.5px; font-weight:400; color:var(--a-muted); margin-top:2px; }
body.lp .a-tabs .bar label:hover{ background:#e6f2f2; }
body.lp .a-tabs .panels{ border:1px solid var(--a-rule); border-radius:0 10px 10px 10px; padding:16px 18px 18px; background:#fff; }
body.lp .a-tabs .panels .p{ display:none; }
body.lp .a-tabs .panels .p .sum{ margin:0 0 4px; font-size:15px; line-height:1.95; }
body.lp .a-tabs .panels .p .a-map{ margin:14px 0 6px; }
body.lp .a-tabs .panels .p .a-map iframe{ height:340px; }
body.lp #tabA:checked ~ .bar label[for="tabA"],
body.lp #tabB:checked ~ .bar label[for="tabB"],
body.lp #tabC:checked ~ .bar label[for="tabC"]{ background:#fff; color:#006a6c; border-color:var(--a-rule); border-bottom-color:#fff; }
body.lp #tabA:checked ~ .panels .pA,
body.lp #tabB:checked ~ .panels .pB,
body.lp #tabC:checked ~ .panels .pC{ display:block; }
body.lp .a-tabs > input:focus-visible ~ .bar label{ outline:2px solid var(--a-teal); outline-offset:2px; }
@media (max-width:600px){
  body.lp .a-tabs .bar label{ flex:1 1 0; min-width:0; padding-left:4px; padding-right:4px; font-size:12px; letter-spacing:0; }
  /* タブが縦積みだった頃の名残で、下の枠を6px離して角を全部丸めていた。
     横並びにしたので、パソコンと同じ「つながる」形に戻す（2026-09-28） */
  body.lp .a-tabs .panels{ border-radius:0 10px 10px 10px; margin-top:0; padding:14px 14px 16px; }
}

/* ── 地図は開いたときだけ読み込む ── */
body.lp .a-mapbox{ border:1px solid var(--a-rule); border-radius:10px; background:#fff; margin:14px 0 10px; }
body.lp .a-mapbox > summary{ cursor:pointer; padding:11px 15px; font-size:13.5px; font-weight:700;
  color:var(--a-teal); list-style:none; }
body.lp .a-mapbox > summary::-webkit-details-marker{ display:none; }
body.lp .a-mapbox > summary::before{ content:"🗺 "; }
body.lp .a-mapbox > summary:hover{ background:#f4f8f8; border-radius:10px; }
body.lp .a-mapbox[open] > summary{ border-bottom:1px solid var(--a-rule); border-radius:10px 10px 0 0; }
body.lp .a-mapbox .a-map{ margin:0; border:0; border-radius:0 0 10px 10px; }
body.lp .a-mapbox .a-map iframe{ height:360px; }

/* 徒歩の帯：タブレットまでは2列 */
body.lp .a-walk{ grid-template-columns:repeat(2,1fr); }
@media (max-width:600px){
  body.lp .a-walk{ gap:8px; }
  body.lp .a-walk .band .t{ font-size:13px; padding:8px 10px; }
  body.lp .a-walk ul{ padding:0 10px; }
  body.lp .a-walk li{ font-size:12.5px; padding:6px 0; }
}
/* スマホは1列。2列だと名前に使える幅が約100px（4〜5文字）しかなく、
   「ローソンストア100 住吉山之内三丁目店」のような店名が4行に割れる（2026-09-28） */
@media (max-width:599px){
  body.lp .a-walk{ grid-template-columns:1fr; gap:12px; }
  body.lp .a-walk .band .t{ font-size:13.5px; padding:9px 12px; }
  body.lp .a-walk ul{ padding:0 12px; }
  body.lp .a-walk li{ font-size:13.5px; padding:7px 0; }
}

/* 帯：アイコン＋店舗名＋距離を1行で */
body.lp .a-walk li{ display:flex; align-items:baseline; gap:7px; }
body.lp .a-walk li .ic{ flex:none; font-size:14px; line-height:1; }
body.lp .a-walk li .nm{ flex:1 1 auto; min-width:0; }
body.lp .a-walk li .d{ flex:none; font-size:11.5px; color:var(--a-muted); font-variant-numeric:tabular-nums; }
/* 表：施設名の前のアイコン */
body.lp .a-table th .ic{ margin-right:6px; }
body.lp .a-table .ad{ font-size:12px; color:var(--a-muted); }
/* タブの中の地図 */
body.lp .a-tabs .panels .p > h3:first-of-type{ margin-top:18px; }

/* 暗い節のCTA（インラインstyleが消えても崩れないように） */
body.lp .section.lp-dark .a-wrap h2, body.lp .section.lp-dark .container-narrow h2{ color:#fff; font-size:24px; margin:0 0 10px; }
body.lp .section.lp-dark .a-wrap p, body.lp .section.lp-dark .container-narrow p{ color:rgba(255,255,255,.9); }

/* 段落のあいだ（広すぎず狭すぎず） */
body.lp .a-hero .a-lead{ margin-bottom:20px; }
body.lp .a-wrap p{ margin-bottom:18px; }

/* 節の導入で使う番号つきリスト（1. 費用／2. 通学のしやすさ …） */
body.lp .a-wrap > ol{
  list-style:none; counter-reset:pt;
  margin:22px 0 20px; padding:0 0 0 12px;
}
body.lp .a-wrap > ol > li{
  counter-increment:pt; position:relative;
  padding-left:44px; margin:0 0 13px;
  font-size:16.5px; font-weight:700; line-height:1.6; color:var(--a-ink);
}
body.lp .a-wrap > ol > li:last-child{ margin-bottom:0; }
body.lp .a-wrap > ol > li::before{
  content:counter(pt); position:absolute; left:0; top:-1px;
  width:30px; height:30px; border-radius:50%;
  background:var(--a-teal); color:#fff;
  font:700 15px/30px "Helvetica Neue",Arial,sans-serif; text-align:center;
}
body.lp .a-wrap > ol + p{ margin-top:18px; }

/* ダウンロードのボタン */
body.lp .a-wrap p.a-dl{ margin:16px 0 8px; }
body.lp .a-wrap p.a-dl a.btn{ display:inline-block; }
body.lp .a-wrap p.a-dl a.btn::before{ content:"⬇ "; }
/* チェック表の空欄 */
body.lp .a-table td:empty{ background:#fcfdfd; }

/* 表の中の小さな内訳 */
body.lp .a-table .a-note-s{ display:block; margin-top:3px; font-size:11.5px; font-weight:400;
  color:var(--a-muted); line-height:1.6; }

/* 見学で聞くことなど、小さい番号つきリスト */
body.lp .a-wrap > ol.a-check{ margin:14px 0 22px; }
body.lp .a-wrap > ol.a-check > li{ font-size:15.5px; font-weight:400; padding-left:32px; margin:0 0 8px; }
body.lp .a-wrap > ol.a-check > li::before{ width:22px; height:22px; font:700 12px/22px "Helvetica Neue",Arial,sans-serif; top:2px; }

/* 冒頭で、選べる5つを縦に並べる */
body.lp .a-hero ul.a-five{ list-style:none; margin:14px 0 18px; padding:0; }
body.lp .a-hero ul.a-five > li{ position:relative; padding-left:24px; margin:0 0 7px;
  font-size:16px; font-weight:700; line-height:1.6; color:var(--a-ink); }
body.lp .a-hero ul.a-five > li:last-child{ margin-bottom:0; }
body.lp .a-hero ul.a-five > li::before{ content:""; position:absolute; left:4px; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--a-teal); }

/* 5つのリストに添える、小さい補足（学生寮の「2027年4月〜」など） */
body.lp .a-hero ul.a-five > li .sub{ margin-left:9px; font-size:13px; font-weight:400; color:var(--a-sub,#6b7877); }

/* 記事の途中に置く、見学のご案内 */
body.lp .a-cta-mid{ margin:26px 0 8px; padding:20px 22px; border-radius:12px;
  background:var(--a-tint,#eef5f5); border:1px solid #cfe0e0; }
body.lp .a-cta-mid p{ margin:0 0 14px; }
body.lp .a-cta-mid p.btns{ margin:0; display:flex; gap:10px; flex-wrap:wrap; }
body.lp .a-cta-mid .btn{ display:inline-block; }
body.lp .a-cta-mid .btn-line{ background:#fff; border:1.5px solid var(--a-teal); color:var(--a-teal); }

/* 表の上に置く見出し（比較表など） */
body.lp .a-table > p.cap{ margin:0; padding:16px 16px 13px; text-align:center; }
body.lp .a-table > p.cap::after{ content:""; display:block; width:min(100%,520px); height:2px; margin:9px auto 0;
  background:var(--a-teal); }
body.lp .a-table > p.cap{ font-size:16px; font-weight:700; color:var(--a-deep); line-height:1.7; }

/* 2つを見くらべる表：どちらが答えかが、色で分かるようにする */
body.lp .a-table.a-vs{ background:#fbfdfd; }
body.lp .a-table.a-vs thead th{ white-space:normal; text-align:center; }
/* 縦の線：どの列の数字か目で追えるようにする */
body.lp .a-table.a-vs tbody th + td,
body.lp .a-table.a-vs tbody td + td{ border-left:1px solid #c8dcdc; }
body.lp .a-table.a-vs tbody tr:last-child th,
body.lp .a-table.a-vs tbody tr:last-child td{ background:#dcecec; border-top:4px double #a9d2d5; }
body.lp .a-table.a-vs tbody tr:last-child td b{ font-size:17px; }

/* 番号つきの小さいリスト（枠の中でも同じ見た目にする） */
body.lp ol.a-check{ list-style:none; counter-reset:pt; margin:14px 0 4px; padding:0 0 0 2px; }
body.lp ol.a-check > li{ counter-increment:pt; position:relative; padding-left:32px; margin:0 0 8px;
  font-size:15.5px; font-weight:400; line-height:1.8; color:var(--a-ink); }
body.lp ol.a-check > li:last-child{ margin-bottom:0; }
body.lp ol.a-check > li::before{ content:counter(pt); position:absolute; left:0; top:3px;
  width:22px; height:22px; border-radius:50%; background:var(--a-teal); color:#fff;
  font:700 12px/22px "Helvetica Neue",Arial,sans-serif; text-align:center; }
body.lp .a-tip > ol.a-check{ margin-bottom:0; }

/* 表の見出し：スマホでは3行にして中央にそろえる */
body.lp .a-table > p.cap .vs{ margin:0 .45em; }
@media (max-width:600px){
  body.lp .a-table > p.cap{ font-size:15px; }
  body.lp .a-table > p.cap span{ display:block; }
  body.lp .a-table > p.cap .vs{ margin:3px 0; font-size:13px; color:var(--a-muted); }
}

/* 出どころ・計算のしかたの折りたたみ（本文の流れをさえぎらない見た目にする） */
body.lp .a-wrap details.a-more.a-src{ border-color:#e6eded; margin:10px 0 4px; }
body.lp .a-wrap details.a-more.a-src > summary{ font-size:12.5px; font-weight:400; color:var(--a-muted); padding:8px 14px; }
body.lp .a-wrap details.a-more.a-src > p.a-small{ font-size:13px; color:var(--a-muted); line-height:1.85; padding:0 14px 12px; }

/* 出どころの折りたたみは、図の注記のすぐ下に置くことがある。
   白い枠が付くと注記から浮いて見えるので、枠と背景を外して静かに出す
   （2026-09-18 依頼主の指摘） */
body.lp .a-wrap details.a-more.a-src{ border:0; border-radius:0; background:none; margin:4px 0 6px; }
body.lp .a-wrap details.a-more.a-src > summary{ padding:2px 0; }
body.lp .a-wrap details.a-more.a-src > summary:hover{ background:none; }
body.lp .a-wrap details.a-more.a-src > p{ padding:0 0 10px 14px; font-size:13.5px; line-height:1.9; }
body.lp .a-wrap details.a-more.a-src > p.a-small{ padding:0 0 4px 14px; }

/* 導入の節は目次で終わるので、下の余白を詰める
   （senior-lp.css の :has ルールのほうが強いため、同じ形にして上書きする） */
body.lp .section.section--tight-bottom:not(.bg-tint):not(.lp-dark):has(+ .section:not(.bg-tint):not(.lp-dark)){ padding-bottom:12px; }
body.lp .section:not(.bg-tint):not(.lp-dark) + .section.section--tight-gap:not(.bg-tint):not(.lp-dark){ padding-top:34px; }

/* 写真を入れる場所の目印（下書き用・本番では消す） */
body.lp .a-photo-todo{ margin:22px 0 24px; border:2px dashed #d9483c; border-radius:12px; padding:12px; background:#fff8f7; }
body.lp .a-photo-todo .ph{ aspect-ratio:var(--r,16/9); border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:#b9483c; font-size:15px; font-weight:700; letter-spacing:.04em;
  background:repeating-linear-gradient(45deg,#f3e4e2,#f3e4e2 12px,#faeeec 12px,#faeeec 24px); }
body.lp .a-photo-todo figcaption{ margin-top:11px; font-size:13.5px; line-height:1.85; color:#c0392b; }
body.lp .a-photo-todo figcaption b{ display:inline-block; margin-bottom:2px; font-size:14px; color:#9e2b1e; }
body.lp .a-photo-todo .how{ display:inline-block; margin-top:5px; font-size:12.5px; color:#8a5b55; }

/* 目次は、上の本文から1行分あける */
body.lp .a-toc{ margin-top:52px; }

/* 写真メモ：左右2枚・横3等分の並べ方 */
body.lp .a-photo-todo .ph.two, body.lp .a-photo-todo .ph.three, body.lp .a-photo-todo .ph.row{ background:none; gap:10px; }
body.lp .a-photo-todo .ph.two > span, body.lp .a-photo-todo .ph.three > span, body.lp .a-photo-todo .ph.row > span{
  flex:1; align-self:stretch; display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:repeating-linear-gradient(45deg,#f3e4e2,#f3e4e2 12px,#faeeec 12px,#faeeec 24px); }

/* パオさんへの確認事項（打ち合わせ用・公開時は消す） */
body.lp .a-todo-list{ margin:34px 0 6px; border:3px solid #d9483c; border-radius:12px; padding:18px 22px 16px; background:#fff8f7; }
body.lp .a-todo-list .ttl{ margin:0 0 12px; font-size:18px; font-weight:700; color:#c0261a; }
body.lp .a-todo-list ol{ margin:0; padding-left:1.4em; }
body.lp .a-todo-list li{ margin:0 0 14px; font-size:15px; line-height:1.85; color:#a8291c; }
body.lp .a-todo-list li b{ font-size:15.5px; color:#8c1f13; }
body.lp .a-todo-list li .pos{ font-size:13px; color:#8a5b55; }
body.lp .a-todo-list .note{ margin:6px 0 0; font-size:12.5px; color:#8a5b55; }


/* 表の見出しの中に入れる補足（順位・割合など）。
   <th> が太字なので、そのままだと補足まで太く大きく見える。
   調査の順位は読ませたい中身ではないので、小さく・細く・灰色に
   （2026-09-18 依頼主の指摘） */
body.lp .a-table th .a-small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.6;
    color: #7b8a8a;
}
/* 表の見出し行（濃い緑）の中の小さい文字は、白寄りにしないと読めない（2026-09-23 omu-doko の初期費用の表） */
body.lp .a-table thead th .a-small { color: rgba(255,255,255,.82); white-space: normal; }
@media (max-width: 600px) {
    body.lp .a-table th .a-small { font-size: 11px; }
}


/* 注記への目印（*1）。数字と混ざって読みにくいので、色で見分けられるようにする
   （2026-09-18 依頼主の指示） */
body.lp .a-ref {
    color: #2c7b7d;
    font-weight: 700;
    margin-left: 1px;
}


/* ============================================================
   3物件を並べるカード（lp-compare）。
   v01.css にしかなく、記事用の v03.css を読む omu-ryo・omu-doko で
   カードが素のまま縦に並んでいたので、こちらにも入れた
   （2026-09-18 依頼主の指摘）
   ============================================================ */
/* ---------- 型8：2案の比較 ---------- */
body.lp .lp-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 30px 0 20px;
}
@media (min-width: 720px) { body.lp .lp-compare { grid-template-columns: 1fr 1fr; } }
body.lp .lp-compare article {
    background: #fff;
    border: 1px solid var(--lp-rule);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 62, 63, .08);
    display: flex;
    flex-direction: column;
}
body.lp .lp-compare img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
body.lp .lp-compare .tx { padding: 20px 22px 22px; text-align: left; }
body.lp .lp-compare h4 {
    font-size: 17px; font-weight: 700; color: var(--lp-ink);
    margin: 0 0 6px; line-height: 1.4;
}
body.lp .lp-compare .price {
    margin: 0 0 16px !important;
    color: var(--lp-teal-deep) !important;
    font-weight: 700;
    line-height: 1.1;
}
body.lp .lp-compare .price b {
    font-size: 34px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
body.lp .lp-compare .price span { font-size: 15px; margin-left: 3px; }
body.lp .lp-compare dl { margin: 0; border-top: 1px solid var(--lp-rule); }
body.lp .lp-compare dl > div {
    display: grid;
    grid-template-columns: 8.5em 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lp-rule);
    font-size: 14px;
    line-height: 1.7;
}
body.lp .lp-compare dt { color: var(--lp-body); }
body.lp .lp-compare dd { margin: 0; color: var(--lp-ink); font-weight: 700; }
/* ==========================================================
   00v ── 構成見直し案（13節 → 10節）
   00 のCSSに、新しく作った3つの部品のぶんだけ足す。
     .lp-fit           ③ こんな方に向いています（節の中の小さな区画）
     .lp-feature-grid  ⑤ 設備6つの写真グリッド（濃い面の中）
     .lp-compare-3     ⑥ 3物件の比較カード
   ========================================================== */

/* ③ こんな方に向いています */
body.lp .lp-fit {
    margin-top: 40px;
    padding: 28px 28px 22px;
    background: #EDF4F5;
    border-radius: 14px;
}
body.lp .lp-compare-3 { gap: 20px; }
@media (min-width: 900px) { body.lp .lp-compare.lp-compare-3 { grid-template-columns: repeat(3, 1fr); } }
body.lp .lp-compare-3 .tx { display: flex; flex-direction: column; flex: 1; }
body.lp .lp-compare-3 dl > div { grid-template-columns: 7.5em 1fr; font-size: 13.5px; }
body.lp .lp-compare-btn {
    margin-top: auto;
    align-self: flex-start;
    margin-top: 18px;
    padding: 9px 16px;
    font-size: 13.5px;
}
/* ---------- 01 追加分 ---------- */
body.lp .lp-card-tag {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--lp-teal-deep);
    font-weight: 700;
}
/* 価格の左に置くラベル（賃料など）。数字だけだと賃料か総額か分からないため */
body.lp .lp-compare .price .lb{ font-size:14px; font-weight:700; color:var(--lp-body); margin-right:9px; letter-spacing:.02em; }


/* 3物件のカードだけ、記事の幅（.a-wrap = 820px）より広げる。
   本文は1行が長いと読みにくいので820pxのままにし、
   横に3つ並べるカードだけ広げて見比べやすくする
   （2026-09-18 依頼主の指摘） */
body.lp .a-wrap .lp-compare {
    width: 100vw;
    max-width: 1100px;
    margin-left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 1140px) {
    body.lp .a-wrap .lp-compare {
        width: calc(100vw - 40px);
    }
}
@media (max-width: 719px) {
    /* スマホは1列に戻るので、記事の幅に合わせる */
    body.lp .a-wrap .lp-compare {
        width: 100%;
        max-width: none;
        margin-left: 0;
        transform: none;
    }
}

/* ---------- 最下部の「見学を予約する／電話」ボタン（2026-09-28） ----------
   電話ボタンに margin-left:8px が直接書かれていて、
   スマホ（縦並び）で右に8pxずれ、上下の間隔も0になっていた。
   横並びのときだけ左に間隔をあけ、縦並びのときは上に間隔をあける。 */
body.lp .a-tel{ margin-left:8px; }
@media (max-width:600px){
  body.lp .a-tel{ margin-left:0; margin-top:12px; }
}
/* 物件の「詳細を見る」ボタン（university の3ページ）：マウスを乗せたら文字を白に。
   上の .a-wrap a の文字色が common.css の .btn-outline:hover より強く、緑の地に緑の文字になっていた（2026-10-16） */
body.lp .a-wrap a.btn-outline.lp-compare-btn:hover{ color:#fff; }