@charset "utf-8";
/* =========================================================
   PAO GROUP 共通スタイル
   すべてのページから <link rel="stylesheet" href="assets/common.css"> で読み込む
   ========================================================= */

:root {
    --corporate-color: #008486;   /* メインカラー（ティール） */
    --corporate-dark:  #006668;
    --accent-color:    #e4541b;   /* アクセント（オレンジ） */
    --text-main:       #333333;
    --text-light:      #555555;
    --bg-light:        #F4F8F9;
    --bg-tint:         #F0F8FA;
    --bg-white:        #FFFFFF;
    --border-color:    #EAEAEA;
    --radius:          12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                 "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    color: var(--text-main);
    line-height: 1.8;
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

/* スクリーンリーダー専用 */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- レイアウト ---------- */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* concept.html 冒頭の写真：本文と同じ横幅（.container）いっぱいに。
   高さは画面幅に応じて 240〜460px に収め、横長のまま切り抜く（縦に伸びすぎない） */
.concept-hero { margin: 34px 0 0; }
/* 中身を空にしたキャプションが、写真と下の文のあいだに隙間を作らないように */
.concept-hero figcaption:has(> br:only-child) { display: none; }
.concept-hero img { display: block; width: 100%; height: clamp(240px, 38vw, 460px); object-fit: cover; border-radius: var(--radius); }
.concept-hero figcaption { margin-top: 8px; font-size: 13px; color: var(--text-light); }
/* 会社案内の冒頭に置く3棟の写真。節の上余白が広すぎるので詰め、
   下はリード文とくっつかないよう空ける */
.company-hero { margin: 0 0 26px; }
.section:has(> .container-narrow > .company-hero) { padding-top: 40px; }

/* 冒頭の写真の下に置く、ひと目で分かる事実（駅からの近さ）。
   1行に詰めると読みにくいので、意味のまとまりごとに行を分けて中央寄せにする */
/* 白い帯の中で、文のかたまりの上下の余白をそろえる。
   line-height のぶん、指定値より実際の見た目の余白は広がる（上は約+7px、下は約+8px）。
   文字の高さで測って、上下とも約42pxに見えるよう指定している */
.hero-facts {
    max-width: 820px; margin: 36px auto 0; padding-bottom: 34px; text-align: center;
    font-size: 15.5px; line-height: 2.05; color: var(--text-light);
}
.hero-facts b { display: block; color: var(--corporate-color); font-size: 22px; line-height: 1.6; }
.hero-facts span { display: block; }
@media (max-width: 600px) {
    .hero-facts { font-size: 14px; line-height: 1.9; }
    .hero-facts b { font-size: 18px; }
}

/* 冒頭の事実のすぐ下が「色のついていない節」のときは、
   .hero-facts の下余白と節の上余白（80px）が足し算になり、122px も空いてしまう。
   下余白を0にして、節の上余白を詰める。
   色のある節（bg-light / bg-tint）は境目が見えるので、そのままにする */
.container:has(> .hero-facts) + .section:not(.bg-light):not(.bg-tint) { padding-top: 48px; }
.container:has(> .hero-facts):has(+ .section:not(.bg-light):not(.bg-tint)) .hero-facts { padding-bottom: 0; }

/* 「パオの／3つの物件」のように、見出しの前に小さく置く語 */
.reason-head .pre {
    display: block; font-size: 15px; font-weight: bold;
    color: var(--text-light); margin-bottom: 4px;
}
.section { padding: 80px 0; }
.bg-light { background-color: var(--bg-light); }
.bg-tint  { background-color: var(--bg-tint); }

/* ---------- ヘッダー ---------- */
header.site-header {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid var(--border-color);
    z-index: 100; backdrop-filter: blur(6px);
}
.header-inner {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; max-width: 1100px; margin: 0 auto;
    padding: 0 24px; height: 72px;
}
.logo { font-size: 21px; font-weight: 900; color: var(--corporate-color); letter-spacing: .04em; white-space: nowrap; }
.logo small { display: block; font-size: 10px; font-weight: 700; color: var(--text-light); letter-spacing: .08em; }
/* 旧サイトのマーク（pao.png 60×41）を文字ロゴの左に置く。試し（2026-09-29）
   元が60×41しかないので、引き伸ばさず縮めて使う（にじませない） */
/* 横並びは「マークのあるヘッダー」だけ。マークのないページで
   PAO GROUP と 株式会社Suzuka が横に並んでしまったため限定した（2026-09-29） */
.logo.has-mark { display: inline-flex; align-items: center; gap: 9px; }
/* 高さは元画像の41pxそのまま（拡大も縮小もしない）。
   文字ブロックの計算上の中央に置くと、見た目は「PAO GROUP」に寄って
   下が空いて見えるため、4px下げて「文字の見た目の中心」に合わせる（2026-09-29） */
.logo-mark { height: 41px; width: auto; flex: none; position: relative; top: 4px; }
.logo-text { display: block; }
@media (max-width: 600px) {
    .logo-mark { height: 36px; top: 3px; }
}

.nav-list { display: flex; gap: 22px; align-items: center; }
.nav-list li a { font-size: 13.5px; font-weight: bold; color: var(--text-main); white-space: nowrap; }
.nav-list li a:hover { color: var(--corporate-color); }
.nav-list li a[aria-current="page"] { color: var(--corporate-color); }

/* 見学のご予約 … サイトで一番押してほしいボタンなので、他のメニューと差をつけて塗りつぶす。
   .nav-list li a より優先度を高くしないと、文字色が負けて黒文字になる（以前はそうなっていた） */
.nav-list li a.nav-tel, .nav-tel {
    font-size: 13px; font-weight: bold; color: #fff;
    background: var(--corporate-color); border: 2px solid var(--corporate-color);
    border-radius: 50px; padding: 6px 16px;
}
.nav-list li a.nav-tel:hover, .nav-tel:hover { background: var(--corporate-dark); border-color: var(--corporate-dark); color: #fff; }

/* スマホ・タブレットのメニューにだけ出す項目（2026-09-28）
   パソコンは横に並べるため幅に限りがあり、8項目が上限。
   スマホは縦に並ぶので、対象者別のページを続けて並べられる。
   メニューを2つ持つと管理が倍になるので、1つのリストをCSSで出し分ける。 */
.nav-sp-only { display: none; }

/* ハンバーガー（JSなし・チェックボックス方式） */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; padding: 10px; }
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block; background: var(--text-main); height: 2px; width: 24px; border-radius: 2px;
    position: relative; transition: .3s;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after { content: ""; position: absolute; }
.nav-toggle-label span::before { top: -8px; }
.nav-toggle-label span::after  { top: 8px; }

/* ---------- ページヘッダー ---------- */
.page-header {
    margin-top: 72px; background-color: var(--bg-tint);
    padding: 56px 24px; text-align: center;
}
.page-header h1 { font-size: 30px; color: var(--corporate-color); margin-bottom: 8px; line-height: 1.4; }
.page-header p  { font-size: 14px; color: var(--text-light); }

/* パンくず */
.breadcrumb { background: var(--bg-white); border-bottom: 1px solid var(--border-color); }
.breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    list-style: none; margin: 0; font-size: 13px; color: var(--text-light); padding: 14px 0;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li::after { content: "›"; color: #bbb; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--corporate-color); text-decoration: underline; }
.breadcrumb-home-icon { width: 14px; height: 14px; flex: none; }

/* ---------- 目次（TOC） ---------- */
.toc {
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 24px 28px; margin: 28px 0 40px;
}
/* 目次のすぐ下に本文が続くページ用：通常の section 上余白(80px)を詰める */
.section--tight-top { padding-top: 24px; }
.toc-title {
    font-size: 13px; font-weight: bold; color: var(--corporate-color);
    letter-spacing: .08em; margin-bottom: 14px;
}
.toc ol {
    counter-reset: toc; list-style: none; margin: 0; padding: 0;
}
.toc li {
    counter-increment: toc; position: relative; padding-left: 32px;
    margin-bottom: 12px; font-size: 14px; line-height: 1.55; display: flex; align-items: center;
}
.toc li:last-child { margin-bottom: 0; }
.toc li::before {
    content: counter(toc); position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%; background: var(--corporate-color); color: #fff;
    font-weight: 900; font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex: none;
}
.toc a { color: var(--text-main); }
.toc a:hover { color: var(--corporate-color); text-decoration: underline; }

/* 見出しにIDを付与しているため、固定ヘッダー分のスクロールオフセットを確保 */
h2.block-title[id], h2.section-title[id] { scroll-margin-top: 88px; }

/* ---------- 見出し ---------- */
.eyebrow {
    display: block; font-size: 12px; font-weight: bold; letter-spacing: .18em;
    color: var(--corporate-color); text-align: center; margin-bottom: 10px;
}
.section-title {
    font-size: 28px; text-align: center; margin-bottom: 12px; line-height: 1.5;
}
/* 節の見出しの下に短い線を引く。reason-head と同じ形にして、
   物件ページとLPで見出しの見え方をそろえる。
   入れるページを1枚ずつ選べるよう、body に .hr-title を付けたページだけに効かせる
   （いま入れているのは single / senior / short / forcompany の4ページ。
     ほかのページは、それぞれの見直しのときに判断する） */
body.hr-title .section-title::after {
    content: ""; display: block; width: 44px; height: 3px; margin: 16px auto 0;
    background: var(--corporate-color); border-radius: 3px;
}
.section-lead { text-align: center; color: var(--text-light); font-size: 15px; margin-bottom: 48px; }

/* 見出しの前置き（「大阪市住吉区の」など）。
   地域名は主題ではなく前置きなので、小さくして1行分けると関係が伝わる。
   h1 と h2 のどちらでも使えるよう、要素を限定していない */
.h-pre {
    display: block;
    font-size: .58em;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .04em;
    margin-bottom: 2px;
    color: inherit;
    opacity: .78;
}
@media (max-width: 600px) {
    .h-pre { font-size: .62em; }
}

/* 見出しの後置き。.h-pre と逆で、主題を先に大きく出し、
   その説明を小さく下につける。「短期利用の方へ／7日からのウィークリー・マンスリーマンション」のように、
   呼びかけを見出しに、検索で使われる言葉を説明に回したいときに使う */
.h-post {
    display: block;
    font-size: .56em;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .02em;
    margin-top: 6px;
    color: inherit;
    opacity: .8;
}
@media (max-width: 600px) {
    .h-post { font-size: .6em; margin-top: 5px; }
}

h2.block-title {
    font-size: 22px; color: var(--corporate-color);
    margin: 76px 0 18px; padding-left: 14px;   /* 上の余白を広げて、節の切れ目を分かりやすく */
    border-left: 5px solid var(--corporate-color); line-height: 1.5;
}
h3.sub-title { margin-top: 40px; }
h3.sub-title:first-child { margin-top: 0; }
/* 節の中の区切りになる小見出し（.bar）。
   h2.block-title と同じ「左に緑の縦線」にして、写真や表の直後でも切れ目が分かるようにする。
   上の余白は、直前が写真の並びでも詰まって見えないよう広めにとる */
h3.sub-title.bar {
    font-size: 19px; color: var(--corporate-color);
    margin: 72px 0 14px; padding-left: 13px;
    border-left: 5px solid var(--corporate-color); line-height: 1.5;
}
@media (max-width: 600px) {
    h3.sub-title.bar { font-size: 17px; margin-top: 56px; }
}
/* 小見出しの左に緑のチェックマークを出す（.check クラスを付けたものだけ） */
h3.sub-title.check { display: flex; align-items: baseline; gap: 9px; }
h3.sub-title.check::before {
    content: "✔"; flex: none;
    color: var(--corporate-color); font-size: .92em; font-weight: bold;
}
h2.block-title:first-child { margin-top: 0; }
/* 帯タイプの見出し（背景色＋白文字＋中央寄せ） */
h2.block-title--band {
    background: var(--corporate-color); color: #fff;
    text-align: center; padding: 14px 20px;
    padding-left: 20px; border-left: none; border-radius: 0;
    /* ここより上とは内容が変わるため、上の余白を広めに取る */
    margin: 96px 0 16px; font-size: 20px;
}
h3.sub-title { font-size: 17px; margin: 28px 0 10px; color: var(--text-main); }

/* アクセスのページなどで、物件名を見出しとして立てるとき。
   住所を見出しに入れると名前が埋もれるので、名前だけを大きく出し、
   住所はすぐ下に小さく置く（.prop-addr）。 */
h3.sub-title.prop-name {
    /* 直前の .map-caption の下余白（28px）とは足し算にならず、大きいほうだけが残る。
       物件と物件の切れ目をはっきりさせたいので、2行分ぶん取って 104px にしている */
    font-size: 22px; margin: 104px 0 4px; color: var(--corporate-color);
    padding-left: 12px; border-left: 4px solid var(--corporate-color); line-height: 1.5;
}
h3.sub-title.prop-name:first-child { margin-top: 0; }
.prop-addr { margin: 0 0 14px 16px; font-size: 13px; color: var(--text-light); }
/* 住所の頭に置く小さな見出し。何の情報かが一目で分かるようにする */
.prop-addr .lb {
    display: inline-block; margin-right: 9px; padding: 1px 8px; border-radius: 4px;
    background: var(--bg-light, #eef5f5); color: var(--corporate-color);
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px;
}
@media (max-width: 600px) {
    h3.sub-title.prop-name { font-size: 19px; }
}

.container-narrow p, .container p.body-text { margin-bottom: 18px; color: var(--text-light); }

/* ---------- ボタン ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 38px; border-radius: 50px; line-height: 1.2; min-height: 1em;
    font-size: 15px; font-weight: bold; text-align: center; transition: .25s; border: none; cursor: pointer;
}
.btn-primary { background: var(--corporate-color); color: #fff; box-shadow: 0 4px 15px rgba(0,132,134,.28); }
.btn-primary:hover { background: var(--corporate-dark); }
.btn-accent { background: var(--accent-color); color: #fff; box-shadow: 0 4px 15px rgba(228,84,27,.28); }
.btn-accent:hover { filter: brightness(.92); }
.btn-outline { background: #fff; color: var(--corporate-color); border: 2px solid var(--corporate-color); }
.btn-outline:hover { background: var(--corporate-color); color: #fff; }

/* 公式LINEボタン（LINEのブランドカラーで表示） */
.btn-line {
    background: #06C755; color: #fff; border: none; padding: 12px 28px; font-size: 14px;
}
.btn-line:hover { background: #05a648; }

/* ---------- カード ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.card {
    background: #fff; border: 1px solid var(--border-color); border-top: 3px solid var(--corporate-color);
    border-radius: var(--radius); padding: 32px 26px; transition: .25s;
}
.card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.07); transform: translateY(-3px); }
.card h3 { font-size: 18px; color: var(--corporate-color); margin-bottom: 12px; line-height: 1.5; }
.card p  { font-size: 14px; color: var(--text-light); }
.card-link { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: bold; color: var(--corporate-color); }
.card-link::after { content: "  →"; }
.card-link:hover { text-decoration: underline; }
.reason-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; background: var(--corporate-color); color: #fff;
    font-weight: 900; font-size: 14px; margin-bottom: 16px;
}

/* 物件カード */
.property-card {
    display: flex; gap: 32px; background: #fff; border: 1px solid var(--border-color);
    border-radius: var(--radius); overflow: hidden; margin-bottom: 36px;
    box-shadow: 0 5px 20px rgba(0,0,0,.03);
}
.property-card .thumb { flex: 0 0 42%; min-height: 280px; background: var(--bg-light); }
.property-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.property-card .body { flex: 1; padding: 30px; }
.property-card h2 { font-size: 23px; color: var(--corporate-color); margin-bottom: 6px; }
.property-card .catch { font-size: 14px; color: var(--accent-color); font-weight: bold; margin-bottom: 4px; }
.price-lead { font-size: 20px; font-weight: 900; color: var(--corporate-color); margin-bottom: 14px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tag {
    font-size: 12px; font-weight: bold; color: var(--corporate-color);
    background: var(--bg-tint); border: 1px solid #cfe6e7; border-radius: 50px;
    /* 上下の余白を均一にするため、行の高さではなくフレックスの中央揃えで配置する */
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; padding: 10px 12px;
}
.tag-accent { color: #fff; background: var(--accent-color); border-color: var(--accent-color); }

/* ---------- テーブル ---------- */
.table-basic { width: 100%; border-collapse: collapse; margin: 20px 0 28px; }
.table-basic th, .table-basic td {
    padding: 14px 16px; border: 1px solid var(--border-color); text-align: left;
    font-size: 14px; vertical-align: top;
}
.table-basic th { background: var(--bg-light); color: var(--corporate-color); width: 30%; white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* フッターの「Googleマップで見る」。埋め込み地図の中のリンクは
   148px四方の中の小さな文字で、スマホでは押しにくいため、下に置いた（2026-09-28） */
.footer-map-gmap {
    display: inline-block;
    margin-bottom: 4px;
    font-weight: bold;
}
.footer-map-gmap::before { content: "⇒"; margin-right: 4px; }

/* ---------- 駅からの道順（アコーディオン）2026-09-28 ----------
   もとは3棟ぶんの道順写真を1か所にまとめていたが、どの画面幅でも
   「2枚＋1枚」で収まりが悪かった。物件ごとに分けて、地図の下に置いた。
   道順は「これから行く人」だけの情報なので、ふだんは閉じておく。 */
.route {
    margin: 10px 0 30px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-white);
    overflow: hidden;
}
.route > summary {
    cursor: pointer; list-style: none;
    padding: 15px 18px 15px 44px;
    position: relative;
    font-size: 15px; font-weight: bold; color: var(--corporate-color);
    background: var(--bg-tint);
    transition: background .2s;
}
.route > summary::-webkit-details-marker { display: none; }
.route > summary::before {
    content: ""; position: absolute; left: 18px; top: 50%;
    width: 9px; height: 9px; margin-top: -6px;
    border-right: 2px solid var(--corporate-color);
    border-bottom: 2px solid var(--corporate-color);
    transform: rotate(45deg);
    transition: transform .25s;
}
.route[open] > summary::before { transform: rotate(-135deg); margin-top: -2px; }
.route > summary:hover { background: #e4f0f1; }
.route-body { padding: 18px 18px 22px; }

/* 道順のステップ。①→②→③ と上から順にたどる形 */
.route-lead { font-size: 13.5px; color: var(--text-light); margin: 0 0 18px; line-height: 1.8; }
.route-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.route-step { position: relative; padding-left: 46px; padding-bottom: 26px; }
.route-step:last-child { padding-bottom: 0; }
/* 番号の丸 */
.route-step::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; line-height: 30px;
    text-align: center; border-radius: 50%;
    background: var(--corporate-color); color: #fff;
    font-size: 14px; font-weight: bold;
}
/* つなぎの縦線（最後だけ出さない） */
.route-step::after {
    content: ""; position: absolute; left: 14px; top: 34px; bottom: 6px;
    width: 2px; background: #cfe0e1;
}
.route-step:last-child::after { display: none; }
.route-step-name {
    font-weight: bold; font-size: 15.5px; color: var(--text-main);
    margin: 4px 0 8px; line-height: 1.5;
}
.route-step-note { font-size: 13.5px; line-height: 1.85; color: var(--text-light); margin: 8px 0 0; }
/* 写真の枠。1枚を大きく見せる */
.route-step-photo { border-radius: 8px; overflow: hidden; }
.route-step-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 600px) {
    .route > summary { font-size: 14px; padding: 13px 14px 13px 38px; }
    .route > summary::before { left: 15px; }
    .route-body { padding: 16px 14px 18px; }
    .route-step { padding-left: 40px; padding-bottom: 22px; }
    .route-step::before { width: 26px; height: 26px; line-height: 26px; font-size: 13px; }
    .route-step::after { left: 12px; top: 30px; }
    .route-step-name { font-size: 14.5px; }
    .route-step-note { font-size: 13px; }
}

/* ---------- 横スクロールする表の案内（2026-09-28） ----------
   スマホでは表の右端が切れるだけで、動かせると気づかない。
   「→ 横にスクロールできます」と右端の影で知らせ、
   スクロールしたら消す（site.js が .is-scrolled / .at-end を付ける）。
   PC では表が全部見えるので出さない。 */
.table-scroll-wrap { position: relative; }
/* 案内文は <p> なので、.container-narrow p { color: var(--text-light) }（307行）に
   負けてグレーになるページがあった。セレクタを強くして緑に固定（2026-09-28） */
.table-scroll-wrap .table-scroll-hint,
.container-narrow .table-scroll-wrap .table-scroll-hint,
.container .table-scroll-wrap .table-scroll-hint,
body.lp .table-scroll-wrap .table-scroll-hint,
body.lp .a-wrap .table-scroll-wrap .table-scroll-hint {
    display: none;
    font-size: 12.5px; color: var(--corporate-color); font-weight: bold;
    margin: 0 0 6px; padding-left: 2px;
    transition: opacity .3s;
}
.table-scroll-wrap::after {
    content: ""; display: none;
    position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
    transition: opacity .3s;
}
/* .a-table は上に14pxの余白を持っている。そのままだと
   「案内文 → 14px → 表」になって、案内文が上の見出しに寄って見える。
   余白を囲いのほうへ移す（2026-09-28） */
.table-scroll-wrap > .a-table,
body.lp .table-scroll-wrap > .a-table { margin-top: 0; }
.table-scroll-wrap:has(> .a-table) { margin-top: 14px; }
/* 図（.a-fig.wide）も同じ。上の余白22pxを囲いへ移して、案内文を図に近づける */
.table-scroll-wrap > .a-fig,
body.lp .table-scroll-wrap > .a-fig { margin-top: 0; }
.table-scroll-wrap:has(> .a-fig) { margin-top: 22px; }
/* 一覧の表（.a-chips）も同じ。上の余白22pxを囲いへ移す */
.table-scroll-wrap > .a-chips,
body.lp .table-scroll-wrap > .a-chips { margin-top: 0; }
.table-scroll-wrap:has(> .a-chips) { margin-top: 22px; }

/* .a-table は角が丸く枠線があるので、影を表の形に合わせる */
.table-scroll-wrap:has(> .a-table)::after,
.table-scroll-wrap:has(> .a-fig)::after { top: auto; height: 100%; border-radius: 0 12px 12px 0; }
.table-scroll-wrap:has(> .a-chips)::after { top: auto; height: 100%; }

@media (max-width: 900px) {
    .table-scroll-wrap.can-scroll .table-scroll-hint,
    .container-narrow .table-scroll-wrap.can-scroll .table-scroll-hint,
    .container .table-scroll-wrap.can-scroll .table-scroll-hint,
    body.lp .table-scroll-wrap.can-scroll .table-scroll-hint,
    body.lp .a-wrap .table-scroll-wrap.can-scroll .table-scroll-hint { display: block; }
    .table-scroll-wrap.can-scroll::after { display: block; }
    .table-scroll-wrap.is-scrolled .table-scroll-hint { opacity: 0; }
    .table-scroll-wrap.at-end::after { opacity: 0; }
}

/* 3物件を横並びで比較する表（物件名・間取り賃料は狭く、特徴の列を広く） */
.table-compare { table-layout: fixed; }
.table-compare th:nth-child(1), .table-compare td:nth-child(1) { width: 15%; white-space: normal; }
.table-compare th:nth-child(2), .table-compare td:nth-child(2) { width: 20%; white-space: normal; }

/* 物件写真付きの一覧表（物件列は写真＋名称のみで狭く、設備列を広く） */
.table-property { table-layout: fixed; }
.table-property th:nth-child(1), .table-property td:nth-child(1) {
    width: 26%; white-space: normal; text-align: center; vertical-align: top;
}
.table-property th:nth-child(2), .table-property td:nth-child(2) { width: 74%; }
.table-property td:nth-child(1) img {
    width: 100%; max-width: 150px; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 8px; display: block; margin: 0 auto 10px; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.table-property td:nth-child(1) strong { display: block; font-size: 14.5px; }
@media (max-width: 700px) {
    .table-property th:nth-child(1), .table-property td:nth-child(1) { width: 34%; }
    .table-property th:nth-child(2), .table-property td:nth-child(2) { width: 66%; }
    .table-property td:nth-child(1) img { max-width: 100px; }
}
.table-compare th:nth-child(3), .table-compare td:nth-child(3) { width: 65%; white-space: normal; }
.table-menu { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.table-menu th, .table-menu td { border: 1px solid var(--border-color); padding: 10px; text-align: center; }
.table-menu thead th { background: var(--corporate-color); color: #fff; }
.table-menu thead th a { color: #fff; text-decoration: none; font-weight: bold; }
.table-menu thead th a:hover { text-decoration: underline; }
/* 見出しの行に物件の写真を小さく入れる（concept.html の「3物件のちがい」） */
.table-menu thead th img { display: block; width: 100%; max-width: 132px; height: 62px; object-fit: cover; border-radius: 6px; margin: 0 auto 7px; }
/* 費用の行は、数字がそろって見えるように */
.table-menu td.fee { white-space: nowrap; }

/* 比較表の下に置く、各物件の詳細ページへのボタン（build.html） */
.prop-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 32px; }
.prop-links .btn { width: 100%; text-align: center; }
@media (max-width: 700px) {
    .prop-links { grid-template-columns: 1fr; gap: 10px; }
}
.table-menu tbody th { background: var(--bg-light); color: var(--corporate-color); white-space: nowrap; }
.table-menu .yes { color: var(--corporate-color); font-weight: 900; font-size: 16px; }
.table-menu .no  { color: #bbb; font-weight: 900; font-size: 16px; }

/* ---------- リスト ---------- */
.check-list li {
    position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 15px; color: var(--text-light);
}
.check-list li::before {
    content: ""; position: absolute; left: 4px; top: .55em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--corporate-color);
}
.check-list li strong { color: var(--text-main); }

.check-list--mark li { padding-left: 0; }
.check-list--mark li::before { content: none; }
.check-mark { color: var(--corporate-color); font-weight: bold; margin-right: 4px; }

.check-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.checklist-group { margin-bottom: 28px; }
.checklist-group:last-child { margin-bottom: 0; }
.checklist-group .sub-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.checklist-group .sub-title::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); flex: none;
}

.note-box {
    background: var(--bg-light); border-left: 4px solid var(--corporate-color);
    padding: 18px 22px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 14px; color: var(--text-light);
}
.note-box strong { color: var(--text-main); }

/* ---------- 未確定・仮情報の強調表示 ---------- */
.text-required { color: #d92b2b; font-weight: bold; }
.badge-draft {
    background: #888; color: #fff; font-size: 11px; font-weight: bold;
    padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle;
}

/* ---------- Googleマップ埋め込み ---------- */
.map-embed {
    position: relative; width: 100%; padding-top: 52%;
    margin: 16px 0 8px; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border-color); background: var(--bg-light);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-caption { font-size: 12px; color: var(--text-light); margin: 0 0 28px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 22px 44px 22px 40px; position: relative;
    font-weight: bold; font-size: 15.5px; line-height: 1.6;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "Q"; position: absolute; left: 0; top: 20px;
    color: var(--corporate-color); font-weight: 900; font-size: 17px;
}
.faq-item summary::after {
    content: "＋"; position: absolute; right: 8px; top: 22px; color: var(--corporate-color); transition: .25s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .answer {
    padding: 0 8px 24px 40px; font-size: 14.5px; color: var(--text-light); position: relative;
}
.faq-item .answer::before {
    content: "A"; position: absolute; left: 0; top: 0; color: var(--accent-color); font-weight: 900; font-size: 17px;
}

/* ---------- 選ばれる理由のグループ見出し ---------- */
.reason-group {
    font-size: 16px; color: var(--corporate-color); font-weight: bold;
    margin: 40px 0 20px; padding-left: 14px; border-left: 4px solid var(--corporate-color);
}
.reason-group:first-of-type { margin-top: 0; }
.reason-num { font-size: 12px; font-weight: 900; color: var(--accent-color); letter-spacing: .1em; display: block; margin-bottom: 8px; }

/* ---- 「選ばれる理由」のカードと対になる、番号つきの節見出し（concept.html） ----
   上のカード（REASON 01〜06）と同じ番号を出して、どのカードの詳しい説明かを示す。
   左の縦線（.block-title）はやめ、中央寄せにして節の切れ目をはっきりさせる */
/* 上の余白を広くとって、節の切れ目をはっきりさせる（上＝下の約3倍） */
.reason-head { text-align: center; margin: 92px 0 30px; }
.reason-head:first-child { margin-top: 0; }
.reason-head .no {
    display: block; font-size: 12px; font-weight: 900; letter-spacing: .14em;
    color: var(--accent-color); margin-bottom: 9px;
}
.reason-head h2 {
    font-size: 25px; line-height: 1.5; color: var(--corporate-color);
    border: 0; padding: 0; margin: 0;
}
/* 見出しの「（アネックス パオ・カサ デ パオ）」のような対象物件の補足は、
   改行して小さく出す。本題の見出しが主役のまま読める */
.reason-head h2 .target {
    display: block; margin-top: 7px;
    font-size: 15px; font-weight: normal; color: var(--text-light);
}
.reason-head::after {
    content: ""; display: block; width: 44px; height: 3px; margin: 14px auto 0;
    background: var(--corporate-color); border-radius: 3px;
}
/* リンクで飛んできたとき、固定ヘッダーと番号のぶんだけ上に余白をとる */
.reason-head h2[id] { scroll-margin-top: 130px; }
/* 上に緑の線を出さないカード（「その他の特徴」など、理由のカードと区別する） */
.card-grid.no-topline .card { border-top: 1px solid var(--border-color); }
@media (max-width: 600px) {
    .reason-head { margin: 64px 0 22px; }
    .reason-head h2 { font-size: 20px; }
}

/* ---- 簡易CTA（本文の途中に置く小さめの誘導）----
   ページ末尾の本CTA（.cta-band）とは別物。左にひと言と電話番号、右にボタン。
   sugimoto.html などの LP で使っている .lp-inline-cta と同じ形にそろえている */
.cta-mini {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 18px 28px; margin: 56px auto; max-width: 860px;   /* 上下とも56px */
    background: #fff; border: 1px solid var(--border-color);
    border-left: 5px solid var(--accent-color); border-radius: var(--radius);
    padding: 24px 26px;
}
/* 文は縮んでよい（ボタンと同じ行に収める）。ボタンは縮めない */
.cta-mini p { flex: 1 1 340px; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.8; color: var(--text-main); }
.cta-mini p small {
    display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--text-light);
}
.cta-mini p small a { font-weight: 700; font-size: 16px; }
.cta-mini .btn { flex: none; }
@media (max-width: 700px) {
    .cta-mini { padding: 22px; margin: 44px auto; }
    .cta-mini .btn { width: 100%; text-align: center; }
}

/* ---- 緑の帯（index.html「大学・学校からお部屋を探す」／concept.html「対象別のご案内」）----
   ページの他の部分と地色を変えて、「別のページへの入口」だと一目で分かるようにする ---- */
.uni-band { background: var(--corporate-color); color: #fff; padding: 56px 0; text-align: center; }
.uni-band h2 { font-size: 25px; margin-bottom: 12px; line-height: 1.5; }
.uni-band p { opacity: .92; margin-bottom: 26px; font-size: 15px; }
.uni-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 880px; margin: 0 auto; }
/* 入口が4つのとき（concept.html）は2×2で、幅も広げる */
.uni-cols-4 { max-width: 1000px; gap: 22px; }
.uni-col { display: flex; flex-direction: column; }
.uni-col .btn { margin-top: auto; align-self: center; }
.uni-col { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); padding: 28px 24px; }
.uni-col h3 { font-size: 17px; margin-bottom: 10px; line-height: 1.5; }
.uni-col p { font-size: 14px; opacity: .92; margin-bottom: 22px; }
.uni-band .btn-outline { background: #fff; border-color: #fff; }
.uni-band .btn-outline:hover { background: rgba(255,255,255,.85); color: var(--corporate-dark); }
@media (max-width: 700px) {
    .uni-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* 金額のボックス（.price-row / .price-box）の基本の指定は、
   このファイルの下のほう「料金ボックス（お食事ページ・トップページ共通）」にあります。
   ここでは「0円」を強調する使い方だけを足しています。 */
/* 「0円」を強調する使い方（concept.html の費用面）。
   カード（白地＋上に緑の線）とは別物に見せるため、
   うすい色で塗り、見出しは丸い帯にして、数字を大きく置く */
.price-box.zero {
    background: var(--bg-tint); border: 1px solid #cfe3e3; padding: 26px 22px 24px;
}
.price-box.zero .label {
    display: inline-block; background: var(--corporate-color); color: #fff;
    border-radius: 50px; padding: 5px 18px; font-size: 12.5px; letter-spacing: .04em;
}
.price-box.zero .value {
    font-size: 54px; color: var(--corporate-color); line-height: 1.05; margin: 12px 0 6px;
}
.price-box.zero .value span { font-size: 18px; font-weight: 900; color: var(--corporate-color); }
.price-box.zero .desc { font-size: 12.5px; }
/* 「0円」の2枚は、スマホでも横に並べる（0円が2つ並ぶことに意味があるため） */
.price-row:has(> .price-box.zero) { flex-wrap: nowrap; gap: 14px; }
.price-row > .price-box.zero { flex: 1 1 0; min-width: 0; }
@media (max-width: 600px) {
    .price-box.zero { padding: 20px 12px 18px; }
    .price-box.zero .value { font-size: 38px; }
    .price-box.zero .label { padding: 4px 12px; font-size: 11.5px; }
    .price-box.zero .desc { font-size: 11.5px; }
}

/* ---- 「選ばれる6つの理由」：カード内の写真（index.html・concept.html 共通） ---- */
/* 見出しと本文の間に小さめの写真を入れる */
.reason-photo {
    width: 100%; height: 130px; object-fit: cover; display: block;
    border-radius: 8px; margin: 0 0 14px;
}
@media (max-width: 600px) {
    .reason-photo { height: 88px; border-radius: 6px; margin-bottom: 10px; }
}
/* スマホは1列なので、88pxだと幅289pxに対して 3.3:1 の帯になり、
   写真の上下が切れて何が写っているか分からない。
   他のLPページと同じ150px（約2:1）にそろえる。
   依頼主の指示により concept.html だけに適用する（2026-09-28）。
   index.html も同じ状態だが、現状のままとする。 */
@media (max-width: 599px) {
    body.page-concept .reason-photo { height: 150px; border-radius: 8px; margin-bottom: 12px; }
}
/* 見出しの行数が違っても、同じ行のカード内で写真の位置を揃える
   （カードの中身を親グリッドの行に揃える subgrid を使用。
     非対応ブラウザでは従来どおり縦に積まれるだけで、表示は崩れません）
   index はカードの中身が4つ（番号・見出し・写真・本文）、concept は5つ（＋リンク）なので .rows5 で切り替える */
@supports (grid-template-rows: subgrid) {
    .reason-grid .card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .reason-grid.rows5 .card { grid-row: span 5; }
    .reason-grid.rows3 .card { grid-row: span 3; }   /* 見出し・写真・本文だけのカード */
}

/* ---------- お知らせ ---------- */
.news-list { border-top: 1px solid var(--border-color); }
.news-list li {
    display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
    padding: 18px 4px; border-bottom: 1px solid var(--border-color);
}
.news-list li time { flex-shrink: 0; color: var(--text-light); font-size: 14px; width: 96px; }
.news-list li a { color: var(--text-main); font-weight: bold; }
.news-list li a:hover { color: var(--corporate-color); }
.news-empty { color: var(--text-light); font-size: 14.5px; padding: 24px 4px; }

.news-post { padding: 32px 4px; border-bottom: 1px solid var(--border-color); }
.news-post time { display: block; color: var(--text-light); font-size: 13px; margin-bottom: 6px; }
.news-post h2 { font-size: 18px; color: var(--corporate-color); margin-bottom: 12px; line-height: 1.6; }
.news-post p { color: var(--text-light); font-size: 14.5px; margin-bottom: 8px; }

/* ---------- CTA ---------- */
.cta-band { background: var(--bg-tint); padding: 72px 0; text-align: center; }
.cta-band h2 { font-size: 26px; margin-bottom: 14px; line-height: 1.5; }
.cta-band p { color: var(--text-light); margin-bottom: 32px; font-size: 15px; }
/* 電話番号の下の注記が2行になってもボタンが縦に伸びないよう、高さは中央そろえにする */
.cta-buttons { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cta-tel { font-size: 26px; font-weight: 900; color: var(--corporate-color); letter-spacing: .02em; }
.cta-tel small { display: block; font-size: 12px; color: var(--text-light); font-weight: normal; letter-spacing: 0; }

/* ---------- フォーム ---------- */
.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 8px; font-size: 14px; }
.badge-required {
    background: var(--accent-color); color: #fff; font-size: 11px;
    padding: 2px 7px; border-radius: 4px; margin-left: 8px; vertical-align: middle;
}
.badge-optional {
    background: #999; color: #fff; font-size: 11px;
    padding: 2px 7px; border-radius: 4px; margin-left: 8px; vertical-align: middle;
}
.form-control {
    width: 100%; padding: 13px 15px; border: 1px solid #ccc; border-radius: 6px;
    font-size: 16px; font-family: inherit; background: #fafafa;
}
textarea.form-control { height: 160px; resize: vertical; }
.form-submit { text-align: center; margin-top: 36px; }

/* ---------- フッター ---------- */
footer.site-footer {
    background: var(--bg-light); border-top: 1px solid var(--border-color);
    padding: 56px 0 24px; font-size: 13px; color: var(--text-light);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-grid h3 { font-size: 13px; color: var(--corporate-color); margin-bottom: 14px; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid li a:hover { color: var(--corporate-color); text-decoration: underline; }
/* フッターの「PAO GROUP」の左にもマークを置く。ヘッダーと同じ画像・同じ高さ（2026-09-29）

   余白が大きく見えた原因は2つ。
     ① <p> に body の line-height: 1.8 が効き、20px の文字に 36px の「行の箱」ができる
        → ロゴ画像(34px)より背が高く、文字の箱が全体の高さを決めていた
        → line-height: 1 で支柱（strut）を消す
     ② <a> が inline-flex だと、その下に「文字の足の分」の隙間ができる
        → display: flex（ブロック）にすると行の箱そのものが無くなり、高さ＝ロゴ画像の34pxになる
        → ブロックにするとクリック範囲が列いっぱいに広がるので width: fit-content で抑える
   ※ 画像 pao-mark.png 自体にも余白がある（60x41 のうち絵は 54x31／上4px・下6px）。
     34px 表示で上3.3px・下5.0px。必要なら画像を切り直す */
.footer-logo { font-size: 20px; font-weight: 900; color: var(--corporate-color); margin-bottom: 12px; line-height: 1; }
.footer-logo a { display: flex; width: fit-content; align-items: center; gap: 9px; }
.footer-logo .logo-mark { height: 34px; width: auto; flex: none; }
/* 文字をロゴの見た目の中心に合わせる。
   margin-top だと高さが押し広がり、px固定だとスマホ（ロゴ26px・文字17px）で下がりすぎる。
   position/top は高さを変えず、em なら文字サイズに合わせて縮む（20px→5px／17px→4.25px） */
.footer-logo span { white-space: nowrap; line-height: 1; position: relative; top: 0.25em; }
/* スマホはフッターが2列（1列156px）。マーク50px＋文字120pxでは入らず
   「PAO／GROUP」と折り返した。マークを26px、文字を17pxに（2026-09-29） */
@media (max-width: 600px) {
    .footer-logo { font-size: 17px; }
    .footer-logo a { gap: 7px; }
    .footer-logo .logo-mark { height: 26px; }
    /* 0.25em のままだと 4.25px 下がり、26px のロゴに対して下がりすぎる。
       Chrome のモバイル表示は「画面の大きさ」だけを真似ており、文字はパソコンのフォントのまま。
       実機とは大文字の位置が 1〜2px ずれる。そこで比較用ページ（test/logo-test.html）を
       pao5 に置き、実機で見比べて 1px に決定（A-3案・2026-09-29）。
       17px で割って 0.06em */
    .footer-logo span { top: 0.06em; }
}
.footer-copy { text-align: center; font-size: 12px; color: #888; border-top: 1px solid var(--border-color); padding-top: 20px; }

/* サイトマップ：ページ名の下に置く1行の説明 */
.sm-note { display: block; font-size: 13px; color: #5c6b6b; margin-top: 2px; }

/* フッターの地図（会社所在地＝パオ本館）。ページ下部なので読み込みは後回し（loading="lazy"） */
.footer-map { margin-top: 14px; }
.footer-map iframe { display: block; width: 100%; height: 190px; border: 0; border-radius: 8px; }
.footer-map a { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--corporate-color); text-decoration: underline; }
@media (max-width: 768px) { .footer-map iframe { height: 160px; } }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
    .card-grid { grid-template-columns: 1fr; }
    .check-list--grid { grid-template-columns: 1fr; }
    /* 2枚組のカード（短期利用／法人様へ など）は、
       タブレットでは横に並べる。1列だと横に間延びして読みにくいため（2026-09-28） */
    .card-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* 選ばれる理由は、タブレットでは2列を維持する */
    .card-grid.mobile-2col { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .card-grid.mobile-2col .card { padding: 20px 16px; }
    .card-grid.mobile-2col .card h3 { font-size: 15px; margin-bottom: 8px; }
    .card-grid.mobile-2col .card p { font-size: 13px; line-height: 1.7; }
    .card-grid.mobile-2col .reason-num { font-size: 11px; }
    .card-grid.mobile-2col .reason-badge { width: 28px; height: 28px; font-size: 12px; margin-bottom: 10px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .property-card { flex-direction: column; }
    .property-card .thumb { flex: none; min-height: 220px; }
}

/* ---------- スマホ（599px以下） ---------- */
@media (max-width: 599px) {
    /* 3棟の写真を1行に。2列だと「2枚＋1枚」になって収まりが悪い。
       build.html / company.html と同じ見せ方（2026-09-28） */
    .gallery.three-up { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .gallery.three-up figure { border: 0; }
    /* 物件名に半角空白が入る（「アネックス パオ」）。
       文字を詰めると空白まで潰れて別の名前に見えるので、詰めない（2026-09-28） */
    .gallery.three-up figcaption {
        font-size: 10.5px; padding: 5px 2px; text-align: center; line-height: 1.5;
    }
    /* 2列だとカードの幅が115pxしかなく、本文が1行8文字になって読みにくい。
       スマホでは1列にして、1行21文字にする（2026-09-28） */
    .card-grid.mobile-2col { grid-template-columns: 1fr; gap: 16px; }
    .card-grid.mobile-2col .card { padding: 22px 18px; }
    .card-grid.mobile-2col .card h3 { font-size: 16.5px; }
    .card-grid.mobile-2col .card p { font-size: 14px; line-height: 1.85; }
    .card-grid.mobile-2col .reason-num { font-size: 12px; }
    .card-grid.mobile-2col .reason-badge { width: 32px; height: 32px; font-size: 14px; }
    /* 2枚組も、スマホでは縦に */
    .card-grid-2 { grid-template-columns: 1fr; gap: 16px; }

    /* ほかの物件へのリンクで、スマホでは補足を省く。
       カサ デ パオ だけ53字あり、アネックス（24字）の2倍以上で
       同じ高さの箱に押し込まれて窮屈だった。
       階数と路線は、その物件のページで読めば足りる（2026-09-28） */
    .prop-nav-overlay .sp-hide { display: none; }
}

/* 941〜1080px はナビの間隔を詰めて窮屈にならないようにする。

   2026-10-12：941〜959px で、メニューの文字がロゴ（PAO GROUP）に重なっていた。
   実測で、ロゴ 172px ＋ メニュー 725px ＝ 897px 必要なのに、
   幅941px で使えるのは 893px しかなかった（4px 足りない）。
   間隔を 16px → 12px にすると 28px 空くので、
   **文字の大きさは 13.5px のまま**で収まる。 */
@media (min-width: 961px) and (max-width: 1080px) {
    .nav-list { gap: 12px; }
    .nav-tel { padding: 6px 12px; }
}
/* 941〜1000px だけ、もう少し詰める。
   間隔 12px では、幅941px でロゴとメニューがちょうど接してしまい窮屈だったため。
   文字はできるだけ小さくしない方針で、13.5px → 13px（0.5px）にとどめる。
   1001px から上は 13.5px のまま（2026-10-12 依頼主の指示） */
@media (min-width: 961px) and (max-width: 1000px) {
    .nav-list { gap: 10px; }
    .nav-list li a { font-size: 13px; }
    .nav-tel { padding: 6px 11px; }
}

/* 横並びのナビは 961px 以上でのみ表示する。

   2026-10-12 実測：周辺案内を含めた必要幅は、ロゴ 214px ＋ メニュー 664px ＝ 878px。
   幅941px で実際に使えるのは 878px（941 − スクロールバー15 − 左右の余白48）で、
   ちょうど0px。重なりはしないが、ロゴとメニューが接して窮屈だった。
   以前のコメントの「必要幅 約887px」は、**スクロールバー分を見落とした見積もり**。
   間隔と文字だけで詰めると読みにくくなるため、境目を20px上げてぶんを補う。 */
@media (max-width: 960px) {
    .nav-toggle-label { display: block; }
    .nav-list {
        position: fixed; top: 72px; left: 0; width: 100%;
        background: #fff; border-bottom: 1px solid var(--border-color);
        flex-direction: column; align-items: stretch; gap: 0;
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .nav-sp-only { display: block; }
    /* 11項目になったので、1項目あたりの余白を 16px → 13px に詰める。
       これで iPhone の画面に「見学のご予約」まで収まる */
    .nav-list li a, .nav-list li .nav-tel {
        display: block; padding: 11px 24px; border-top: 1px solid var(--border-color);
        border-radius: 0; border-left: none; border-right: none; font-size: 15px;
    }
    .nav-toggle:checked ~ .nav-list { max-height: 88vh; overflow-y: auto; }

    /* 「見学のご予約」は他の項目と役割が違うので、一覧の帯ではなく
       ボタンのまま中央に置く。上下が詰まって見えるので余白も足す（2026-09-28） */
    .nav-list li:last-child {
        text-align: center;
        border-top: 1px solid var(--border-color);
        padding: 12px 24px 14px;
    }
    .nav-list li:last-child a.nav-tel {
        display: inline-block; width: auto;
        padding: 11px 30px;
        border-radius: 50px;
        border: 2px solid var(--corporate-color);
        border-top: 2px solid var(--corporate-color);
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .section { padding: 56px 0; }
    .page-header { padding: 40px 20px; }
    .page-header h1 { font-size: 24px; }
    .section-title { font-size: 22px; }
    h2.block-title { font-size: 19px; }
    .cta-band h2 { font-size: 21px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
    .table-basic th { width: 34%; white-space: normal; }
    /* 横いっぱいなので、左右38pxの余白は文字の置き場を削るだけだった。
       「アネックス パオの詳細を見る」が10pxはみ出して折り返していた（2026-09-28） */
    .btn { width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* =========================================================
   ユーティリティ（HTML側のインライン記述を置き換えるためのクラス）
   ========================================================= */
.link-teal { color: var(--corporate-color); text-decoration: underline; }
.link-teal:hover { color: var(--corporate-dark); }
.link-underline { color: var(--corporate-color); text-decoration: underline; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.text-left   { text-align: left; }
.text-small  { font-size: 13px; color: var(--text-light); }
/* 制作中の申し送りメモ用。公開前に本文ごと削除してください。 */
.editor-memo { font-size: 20px; font-weight: 900; color: #e60000; margin-top: 12px; }
.mt-8  { margin-top: 8px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }
.mb-32 { margin-bottom: 32px; }
.p-0   { padding: 0; }

/* セクション内に添える1枚写真（物件ページの各見出し用） */
.section-photo { max-width: 420px; margin: 4px 0 28px; border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.section-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.section-photo figcaption { font-size: 12px; color: var(--text-light); padding: 8px 2px 0; }
/* 中央寄せ見出しのセクション用：写真も中央に置く */
.section-photo--center { margin-left: auto; margin-right: auto; }
.section-photo .placeholder {
    width: 100%; aspect-ratio: 3 / 2; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e8e8e8 10px, #e8e8e8 20px);
    border: 2px dashed #cfcfcf; color: #999; font-size: 13px; line-height: 1.6; text-align: center; padding: 16px;
}

/* 料金ボックス（お食事ページ・トップページ・concept.html 共通） */
.price-row  { display: flex; gap: 20px; flex-wrap: wrap; margin: 30px 0 30px; }
.price-box  { flex: 1 1 220px; background: #fff; border: 1px solid var(--border-color);
              border-radius: var(--radius); padding: 22px; text-align: center; }
.price-box .label { font-size: 14px; font-weight: bold; color: var(--corporate-color); }
.price-box .value { font-size: 30px; font-weight: 900; margin: 4px 0; }
.price-box .value span { font-size: 14px; font-weight: normal; color: var(--text-light); }
.price-box .desc  { font-size: 13px; color: var(--text-light); }

/* スマホでは省く文字。タブレット・パソコンでは出す（2026-09-28）
   例：<p>当日9:30まで保管<span class="sp-omit">します</span></p>
   幅が狭いときだけ文言を詰めたいときに使う。文を消すのではなく、
   語尾や補足だけを省くので、意味は変わらない。 */
@media (max-width: 600px) {
    .sp-omit { display: none; }
}

/* お食事の料金（paomeal.html）は、朝食と夕食を見比べるものなので、
   スマホでも横に並べる。縦に離れていると目を往復させることになる。
   concept.html の .price-row には効かせない（2026-09-28） */
@media (max-width: 600px) {
    .price-row.meal-price { flex-wrap: nowrap; gap: 12px; }
    .price-row.meal-price > .price-box { flex: 1 1 0; min-width: 0; padding: 18px 10px 16px; }
    .price-row.meal-price .label { font-size: 12.5px; }
    .price-row.meal-price .value { font-size: 30px; }
    .price-row.meal-price .value span { font-size: 12px; }
    .price-row.meal-price .desc { font-size: 11px; line-height: 1.6; }
}

/* 物件カード内の所在地テキスト */
.property-card .address { font-size: 14px; color: var(--text-light); }

/* =========================================================
   物件ギャラリー
   ========================================================= */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 8px; }
.gallery figure { margin: 0; border-radius: 8px; overflow: hidden; background: var(--bg-light); border: 1px solid var(--border-color); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery figcaption { font-size: 12px; padding: 7px 10px; color: var(--text-light); background: #fff; }
.gallery-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-4 { grid-template-columns: repeat(4, 1fr); }

/* 写真そのままの形で並べるギャラリー（2026-10-02）。
   aspect-ratio 4/3 だと縦写真が上下25%切られるため、
   横は 3:2、縦は 7:10 と、向きごとに高さをそろえる。
   横と縦を同じ grid に混ぜると行の高さが合わないので、.gallery を2つに分けて使う。 */
.gallery.gal-free { align-items: start; }
.gallery.gal-free img { aspect-ratio: 3 / 2;  height: auto; object-fit: cover; }
.gallery.gal-tate img { aspect-ratio: 7 / 10; height: auto; object-fit: cover; }
/* .first-wide の1枚目は「読ませる画像」なので、4:3に切り抜かず全体を見せる。
   切り抜くと献立表の左右が欠ける（2026-09-28） */
.gallery.first-wide > *:first-child img { aspect-ratio: auto; height: auto; }

/* 撮影待ちの写真枠（プレースホルダー）。実写真が用意でき次第、<img>に差し替えてください */
.gallery .placeholder {
    width: 100%; aspect-ratio: 4 / 3; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e8e8e8 10px, #e8e8e8 20px);
    border: 2px dashed #cfcfcf; border-radius: 4px;
    color: #999; font-size: 12.5px; line-height: 1.6; text-align: center; padding: 10px;
}
.gallery figcaption.placeholder-caption { color: var(--accent-color); font-weight: bold; }

/* =========================================================
   画像＋テキストの並列ブロック（本文セクション用）
   ========================================================= */
.media-block { display: flex; gap: 40px; align-items: center; margin: 32px 0; }
.media-block.reverse { flex-direction: row-reverse; }
.media-block .media-text { flex: 1.1; }
.media-block .media-text :last-child { margin-bottom: 0; }
.media-block .media-img {
    flex: .9; align-self: stretch; border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.05); aspect-ratio: 4 / 3;
}
.media-block .media-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-block .media-img .placeholder {
    width: 100%; height: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e8e8e8 10px, #e8e8e8 20px);
    border: 2px dashed #cfcfcf; color: #999; font-size: 13px; line-height: 1.6; text-align: center; padding: 20px;
}
@media (max-width: 700px) {
    /* スマホでは「見出し→写真→文章」の順で見せる（写真が先にあると中身が予測できる）。
       PC表示（左右2カラム）には影響しない。
       .sp-text-first を付けたブロックだけ、文章が先のままになる */
    .media-block, .media-block.reverse { flex-direction: column-reverse; }
    .media-block.sp-text-first, .media-block.sp-text-first.reverse { flex-direction: column; }
    .media-block .media-img { width: 100%; }
}

/* 物件一覧（build.html） */
.prop-block { border: 1px solid var(--border-color); border-radius: var(--radius); padding: 28px; margin-bottom: 36px; background: #fff; }
.prop-block > h2 { font-size: 24px; color: var(--corporate-color); margin-bottom: 4px; }
.prop-block .catch { font-size: 14.5px; color: var(--accent-color); font-weight: bold; margin-bottom: 14px; }
.prop-photos { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.prop-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.prop-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.prop-meta div { background: var(--bg-light); border-radius: 8px; padding: 12px 14px; }
.prop-meta dt { font-size: 11.5px; color: var(--corporate-color); font-weight: bold; margin-bottom: 3px; }
.prop-meta dd { font-size: 13.5px; margin: 0; }
/* 賃料の枠の中に置く「共益費」の小見出し（賃料だけ文字が少なく、枠が空いて見えるため） */
.prop-meta dd .sub {
    display: inline-block; margin-top: 8px;
    font-size: 11.5px; font-weight: bold; color: var(--corporate-color);
}

/* 物件詳細ページのキービジュアル */
.prop-key { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 10px; }
.prop-key img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.prop-key .sub { display: grid; gap: 12px; }
.prop-key .sub img { aspect-ratio: 16 / 10; }

/* 物件間の回遊リンク（写真の上に色をのせ、物件名・説明文を重ねて表示） */
.prop-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 0; }
.prop-nav a {
    position: relative; display: block; aspect-ratio: 16 / 9;
    border-radius: var(--radius); overflow: hidden; background: #fff; transition: .25s;
}
.prop-nav a:hover { box-shadow: 0 10px 28px rgba(0,0,0,.18); transform: translateY(-2px); }
.prop-nav img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.prop-nav a:hover img { transform: scale(1.05); }
.prop-nav a .prop-nav-overlay {
    /* 写真の全面に色をのせ、文字を中央に配置する（.prop-nav span より詳細度を高くしている） */
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 16px;
    background: rgba(0,108,110,.66); transition: background .25s;
    font-weight: 900; color: #fff; line-height: 1.35;
    font-size: clamp(17px, 2.9vw, 32px);
    text-shadow: 0 2px 6px rgba(0,0,0,.32);
}
.prop-nav a:hover .prop-nav-overlay { background: rgba(0,94,96,.72); }
.prop-nav .prop-nav-overlay small {
    display: block; font-weight: bold; color: #fff;
    font-size: clamp(10.5px, 1.2vw, 15px); line-height: 1.6; margin-top: 10px;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

@media (max-width: 900px) {
    .prop-photos { grid-template-columns: 1fr 1fr; }
    /* 2列になると枚数が半端になる列で、1枚だけ隠して行をそろえる（2026-10-02） */
    .gallery .hide-sp { display: none; }
    .prop-photos img:first-child { grid-column: 1 / -1; }
    .prop-meta { grid-template-columns: 1fr; }
    .prop-key { grid-template-columns: 1fr; }
    .prop-key .sub { grid-template-columns: 1fr 1fr; }
    .gallery, .gallery-4 { grid-template-columns: repeat(2, 1fr); }
    /* 写真3枚のうち、1枚目だけ横幅いっぱいにする並び。
       献立表のスキャンのように「縮むと読めない」1枚があるときに使う。
       タブレットでも同じ形にする（2026-09-28）
         ■■■■
         ■■ ■■  */
    .gallery.first-wide > *:first-child { grid-column: 1 / -1; }
    /* 3枚のときは2列だと「2枚＋1枚」になるので、タブレットでも3列のままにする */
    .gallery.three-up { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    /* 冒頭の3棟の写真だけは、スマホ・タブレットでも3列のまま。
       2列だと「2枚＋1枚」になって収まりが悪く、3棟が並んでいることも伝わらない。
       ここは建物の外観を示すだけなので、1枚が小さくても差し支えない（2026-09-28） */
    .gallery.company-hero {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        /* 画面の左右いっぱいまで広げる。写真が主役の場所で、
           24pxの余白×2＋間隔で画面の18%を使っていたため（2026-09-28）。
           container の padding を打ち消す形。1枚 99px → 113px */
        margin-left: -16px; margin-right: -16px;
    }
    /* 枠線を外して写真を大きく見せる。建物の写真は背景が空や道路なので、
       線がなくても輪郭が分かる。ただし すき間は3px 残す。
       ゼロにすると3枚が1枚の横長写真に見えて、「3棟ある」ことが伝わらない */
    .gallery.company-hero figure { border: 0; border-radius: 6px; }
    .gallery.company-hero figcaption {
        font-size: 10.5px; padding: 5px 3px; text-align: center; letter-spacing: -.02em;
    }
}
@media (max-width: 560px) {
    .prop-block { padding: 20px 16px; }
}

/* 「ほかの物件も見る」：狭い画面ではオーバーレイの文字・余白を詰める */
@media (max-width: 600px) {
    .prop-nav { gap: 10px; }
    .prop-nav a { aspect-ratio: 3 / 2; }
    .prop-nav a .prop-nav-overlay { padding: 10px; font-size: 15px; }
    .prop-nav .prop-nav-overlay small { font-size: 10px; margin-top: 6px; line-height: 1.5; }
    h2.block-title--band { font-size: 17px; padding: 12px 16px; margin-top: 64px; }
}

/* ---------- ハザードマップ ---------- */
.hazard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 24px 0 8px; }
.hazard-item { margin: 0; }
.hazard-item .sub-title { margin-top: 0; }
.hazard-item a { display: block; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; background: #fff; transition: .25s; }
.hazard-item a:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.hazard-item img { width: 100%; height: auto; display: block; }
.hazard-item figcaption { font-size: 12px; color: var(--text-light); line-height: 1.7; padding-top: 10px; }

@media (max-width: 768px) {
    .hazard-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- ご入居までの流れ（4ステップ） ----------
   index.html / senior.html の .flow-grid で使用。
   マークアップ: <div class="flow-grid"><div class="flow-step">
                   <span class="no">1</span><h3>…</h3><p>…</p>
                 </div>…</div>                                   */
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; }
.flow-step {
    background: #fff; border: 1px solid var(--border-color);
    border-top: 3px solid var(--corporate-color);
    border-radius: var(--radius); padding: 30px 22px 26px; text-align: center;
}
.flow-step .no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 14px;
    background: var(--corporate-color); color: #fff;
    border-radius: 50%; font-size: 16px; font-weight: bold; line-height: 1;
}
.flow-step h3 { font-size: 16px; color: var(--corporate-color); margin-bottom: 10px; line-height: 1.5; }
.flow-step p  { font-size: 13.5px; color: var(--text-light); line-height: 1.8; }

@media (max-width: 900px) {
    .flow-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
    .flow-grid { grid-template-columns: 1fr; gap: 16px; }
    .flow-step { padding: 24px 18px 20px; }
}

/* ==========================================================
   パオさんに確認したい箇所の目印（打ち合わせ用・本番では消します）
     写真メモ（.a-photo-todo）と同じ赤い破線で、文章や数字の確認待ちを示す
   ========================================================== */
/* 「この写真は後で差し替える」印（打ち合わせ用・本番では消します）
   写真メモ（.a-photo-todo）は写真を消して枠に置き換えるもの。
   こちらは写真を残したまま印だけ付ける。打ち合わせでいまの写真を見ながら話せるようにするため */
.a-img-swap{ position:relative; display:inline-block; line-height:0; max-width:100%;
    outline:3px solid #e8641b; outline-offset:-1px; border-radius:6px; }
.a-img-swap > img{ display:block; max-width:100%; height:auto; opacity:.9; }
/* 札は写真の内側の上に重ねる。写真の外に出すと、まわりの見出しまで囲まれたように見える */
.a-img-swap::after{ content:"差し替え " attr(data-swap); position:absolute; left:0; right:0; top:0; z-index:3;
    background:rgba(232,100,27,.94); color:#fff; font-size:12px; font-weight:700; line-height:1.6;
    padding:5px 9px; border-radius:5px 5px 0 0; text-align:left;
    white-space:normal; pointer-events:none; }

/* 2026-09-17 修正：全面に斜線を敷いていたため、文字の後ろで明暗が細かく入れ替わり、
   文が長い枠ほど読みにくかった。斜線は「公開しない枠」の目印なので上の帯だけに残し、
   本文は無地にする。文字も 12.5px → 14px、色を濃くした（比 4.93 → 8.4） */
.a-ask{ margin:24px 0 26px; border:2px dashed #d9483c; border-radius:12px;
    padding:20px 20px 18px; background:#fefaf9; position:relative; overflow:hidden; }
.a-ask::before{ content:""; position:absolute; left:0; right:0; top:0; height:9px;
    background: repeating-linear-gradient(45deg,#fbeceb,#fbeceb 9px,#f6dcd9 9px,#f6dcd9 18px); }
.a-ask .ttl{ margin:6px 0 0; font-size:15.5px; font-weight:700; line-height:1.7; color:#9e2b1e; }
.a-ask .how{ margin:9px 0 0; font-size:14px; line-height:1.9; color:#6e3b33; }
.a-ask ul{ margin:10px 0 0; padding-left:20px; list-style:disc; }
.a-ask li{ font-size:14px; line-height:1.95; color:#6e3b33; margin-bottom:6px; }
.a-ask li b{ color:#9e2b1e; }
/* 打ち合わせ用の「ご提案」の枠。
   赤い .a-ask は「教えてください（確認）」、こちらは「やりませんか（提案）」。
   同じページに両方が並ぶので、色を変えて別のものだと分かるようにしている */
.a-plan{ margin:24px 0 26px; border:2px dashed #2e6fb7; border-radius:12px;
    padding:20px 20px 18px; background:#f8fbff; position:relative; overflow:hidden; }
.a-plan::before{ content:""; position:absolute; left:0; right:0; top:0; height:9px;
    background: repeating-linear-gradient(45deg,#e8f1fb,#e8f1fb 9px,#d7e7f8 9px,#d7e7f8 18px); }
.a-plan .ttl{ margin:6px 0 0; font-size:15.5px; font-weight:700; line-height:1.7; color:#1d4e86; }
.a-plan .how{ margin:9px 0 0; font-size:14px; line-height:1.9; color:#3a516b; }
.a-plan ul{ margin:10px 0 0; padding-left:20px; list-style:disc; }
.a-plan li{ font-size:14px; line-height:1.95; color:#3a516b; margin-bottom:6px; }
.a-plan li b{ color:#1d4e86; }

/* 表の中などで「ここが未確定」を短く示す印 */
.a-tbd{ display:inline-block; background:#fbeceb; border:1px dashed #d9483c; border-radius:6px;
    padding:1px 9px; font-size:12.5px; font-weight:700; color:#9e2b1e; }
/* 仮に入れている数字・文章（打ち合わせで差し替える）。うすい赤のマーカー */
.a-temp{ background:linear-gradient(transparent 62%, #fbd9d3 62%); }

/* ==========================================================
   写真を入れる場所の目印（打ち合わせ用・本番では消します）
     グレーの仮置きの箱を、赤い破線の「写真メモ」に統一しました。
     body.lp が付かないページでも効くよう、ここに置いています。
   ========================================================== */
.a-photo-todo{
    margin: 20px 0 22px;
    border: 2px dashed #d9483c;
    border-radius: 12px;
    padding: 14px 16px;
    background: repeating-linear-gradient(45deg, #fdf4f3, #fdf4f3 12px, #fbeceb 12px, #fbeceb 24px);
}
.a-photo-todo .ttl{
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    color: #9e2b1e;
}
.a-photo-todo .how{
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: #8a5b55;
}
/* 写真4枚並びなどの中に入ったときも、高さをそろえる */
.gallery .a-photo-todo,
.gallery-4 .a-photo-todo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
}

/* ==========================================================
   打ち合わせ用：キーワード調査の結果を置く枠（本番では消します）
     ページの本文とはっきり分けたいので、灰色の地に落とし、
     上に「打ち合わせ用」の帯を出しています。
   ========================================================== */
.a-kwplan{ margin-top:56px; padding:34px 0 44px; background:#eef2f3;
    border-top:4px solid #9e2b1e; }
.a-kwplan .wrap{ max-width:980px; margin:0 auto; padding:0 20px; }
.a-kwplan-head{ margin:0 0 18px; font-size:16px; font-weight:700; color:#9e2b1e;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.a-kwplan-head span{ font-size:12px; font-weight:700; color:#fff; background:#9e2b1e;
    border-radius:999px; padding:3px 11px; }
.a-kwplan .a-plan, .a-kwplan .a-ask{ background:#fff; }

.a-kwtbl{ width:100%; border-collapse:collapse; margin-top:12px; background:#fff; }
.a-kwtbl th, .a-kwtbl td{ border:1px solid #cfdcdc; padding:9px 11px;
    font-size:13.5px; line-height:1.8; text-align:left; vertical-align:top; color:#3a516b; }
.a-kwtbl th{ background:#eef4fa; color:#1d4e86; font-weight:700; white-space:nowrap; }
.a-kwtbl td b{ color:#1d4e86; }

.a-kwwords{ margin:10px 0 0; padding:12px 14px; background:#f4f8fd;
    border:1px solid #d7e7f8; border-radius:8px;
    font-size:13.5px; line-height:2.1; color:#3a516b; }
.a-kwwords b{ color:#1d4e86; font-size:14.5px; }

@media (max-width:700px){
  .a-kwtbl, .a-kwtbl thead, .a-kwtbl tbody, .a-kwtbl tr, .a-kwtbl th, .a-kwtbl td{ display:block; }
  .a-kwtbl thead{ display:none; }
  .a-kwtbl tr{ margin-bottom:12px; border:1px solid #cfdcdc; }
  .a-kwtbl td{ border:0; border-bottom:1px solid #eef2f2; }
}

/* ==========================================================
   未確認の印（本番では消します）
     「この数字はまだ裏づけが取れていない」を本文中で示す札。
     U-16 のような番号を添え、ページ下の枠に詳細を書く。

     色は .a-tbd（表の中の「ここが未確定」）と同じ赤系にそろえた。
     このサイトでは「確認が必要＝赤」「提案＝青」「差し替え＝オレンジ」で
     色の役割を分けているため（2026-09-17 依頼主の指摘）。

     これまで学生ページ用の CSS にしか無く、ほかのページでは
     ただの文字になっていた。どのページでも効くよう、共通のここに置く。
   ========================================================== */
.a-pending{
    display:inline-block;
    background:#fbeceb;
    border:1px dashed #d9483c;
    border-radius:6px;
    padding:1px 9px;
    margin:0 4px;
    font-size:12.5px;
    font-weight:700;
    line-height:1.8;
    color:#9e2b1e;
    vertical-align:baseline;
}
/* 離れて見ても未確認だと分かるように */
.a-pending::before{ content:"要確認 "; font-size:11px; opacity:.85; }

/* 表の中の文章は左寄せにする（2026-09-18 依頼主の指摘）。
   見出し（th）は中央のまま。中身が2行3行になると、中央寄せでは行頭が
   そろわず読みにくいため。1列目のような短いラベルだけ、中央に戻せるよう
   .is-label を用意している */
.table-menu td { text-align: left; }
.table-menu td.is-label,
.table-menu tbody th { text-align: center; }

/* ==========================================================
   編集モードで付ける文字色とマーカー（本番にも残る装飾）
     これまで学生ページ用の CSS にしか無く、法人・短期などでは
     「色」ボタンを押しても何も起きなかった（2026-09-18 依頼主の指摘）。

     ページ側の指定（例：body.lp .lp-photo-grid figcaption .ds）は
     クラスを4つ重ねており、body.lp .a-c1 では優先度で負ける。
     編集で付けた色は必ず勝つべきなので !important を付けている。
   ========================================================== */
.a-c1 { color: #008486 !important; font-weight: 700; }   /* ティール */
.a-c2 { color: #9a5a10 !important; font-weight: 700; }   /* オレンジ */
.a-c3 { color: #c0392b !important; font-weight: 700; }   /* 赤 */
.a-mk   { background: linear-gradient(transparent 62%, #ffe9a8 62%) !important; }
.a-mk-g { background: linear-gradient(transparent 62%, #cdeccd 62%) !important; }

/* 太字（<b>）の中に色やマーカーを入れたとき、
   ページ側の「body.lp .lp-checks b { color: … }」のような指定に負けないよう、
   b の内側でも必ず勝つようにしておく（2026-09-18 依頼主の指摘） */
b .a-c1, strong .a-c1 { color: #008486 !important; }
b .a-c2, strong .a-c2 { color: #9a5a10 !important; }
b .a-c3, strong .a-c3 { color: #c0392b !important; }
b .a-mk, strong .a-mk     { background: linear-gradient(transparent 62%, #ffe9a8 62%) !important; }
b .a-mk-g, strong .a-mk-g { background: linear-gradient(transparent 62%, #cdeccd 62%) !important; }


/* ============================================================
   編集モードで付ける飾りは、その場の文字の大きさ・並びを変えない
   ------------------------------------------------------------
   .lp-checks b { display:block; font-size:17px } のように、
   <b> や <span> を「飾り」ではなく「1行目・2行目」という
   意味で使っている場所がサイト内に123か所ある。
   飾りのつもりで太字や色を付けると、そこに当たって
   文字が大きくなったり改行されたりしていた
   （2026-09-18 依頼主の指摘）。
   ツールが付けたものには a-b / a-c1 などの目印があるので、
   その分だけ打ち消す。ページ側の <b> は今までどおり
   ============================================================ */
b.a-b, strong.a-b,
span.a-c1, span.a-c2, span.a-c3,
span.a-mk, span.a-mk-g {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: inherit !important;
}
b.a-b, strong.a-b { font-weight: 700 !important; }


/* 出どころの注記。他社の調査を借りた数字には、調査名と年を添える。
   数字だけだと「本当か」と思われるが、出どころがあると事実として読まれる
   （2026-09-18 sugimoto.html の保護者400人調査から） */
.note-ref {
    font-size: .72em;
    vertical-align: super;
    line-height: 0;
    text-decoration: none;
    color: var(--corporate-color, #008486);
    margin-left: 1px;
}
.note-src {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #dfe7e7;
    color: #5a6a6b;
    /* 本文より小さく。出どころは読ませるより、あることが大事。
       body.lp .container-narrow p（16px）の方が強いので打ち消す */
    font-size: 11.5px !important;
    line-height: 1.75 !important;
}
@media (max-width: 600px) {
    .note-src { font-size: 11px !important; }
}
.note-src .link-teal { margin-left: 4px; }


/* スマホのときだけ改行する。
   見出しが2行に割れる位置を、なりゆきに任せず、こちらで決めたいときに使う。
   例：<h3>「大学・駅まで」と<br class="br-sp">「大阪の中心部（天王寺・梅田）」への時間</h3>
   （2026-09-18 依頼主の提案） */
.br-sp { display: none; }
@media (max-width: 600px) {
    .br-sp { display: inline; }
}


/* 読者の問いかけ（記事の書き出し）。
   「大阪公立大学に、学生寮はあるの？」のように、検索して来た人の疑問を並べる場所。
   打ち合わせ用の .a-ask（赤い破線＝教えてください）とは別物なので、
   公開時に消してはいけない。枠は付けず、静かに置く。
   ※ 記事用CSS(v03)に別物の .a-voice（引用の枠）があるため、名前を分けた（2026-09-18） */
.a-lead-q {
    margin: 22px 0 24px;
    font-size: 17px;
    font-weight: 700;
    line-height: 2.1;
    color: var(--corporate-color, #008486);
}
@media (max-width: 600px) {
    .a-lead-q { font-size: 15.5px; line-height: 2; }
}


/* サイトマップの「作成途中」の印（打ち合わせ用。公開前に、印とこのCSSを削除する）
   2026-09-18 */
.wip{
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid #d9483c;
    border-radius: 4px;
    background: #fff5f4;
    color: #c0392b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    vertical-align: middle;
}


/* 打ち合わせ用：トップページにまとめた共通の確認事項を、各ページで再掲する枠
   公開前に、この枠と .a-kwplan ごと削除する（2026-09-18） */
.a-common{
    background: #f4f6f7;
    border: 1px solid #c6d2d4;
    border-left: 6px solid #6f9b9b;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 16px 0;
}
.a-common > .ttl{
    margin: 0 0 4px;
    font-weight: 700;
    color: #2c6f6f;
    font-size: 15px;
}
.a-common > .lead{
    margin: 0 0 10px;
    font-size: 13px;
    color: #5c6b6b;
    line-height: 1.8;
}
.a-common ul{ margin: 0; padding-left: 1.3em; }
.a-common li{ margin-bottom: 8px; line-height: 1.85; font-size: 14.5px; }
.a-common .no{ font-weight: 700; color: #2c6f6f; }


/* 打ち合わせ用：本文の札とページ下のメモを相互に行き来する（公開前に削除）2026-09-18 */
a.a-pending{ text-decoration: none; cursor: pointer; }
a.a-pending:hover{ filter: brightness(1.08); }
.a-kwplan b.no > a{ color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.a-kwplan b.no > a:hover{ border-bottom-style: solid; }

/* 飛んだ先を光らせる（どこに来たかが分かるように） */
a.a-pending:target{ outline: 3px solid #ffd54a; outline-offset: 2px; }
.a-kwplan li:target,
.a-kwplan b.no:target{ background: #fff3c4; border-radius: 4px; }

/* 打ち合わせでの回答を書き込む欄（公開前に削除） */
.a-kwplan .ans{
    display: block;
    margin: 8px 0 0;
    padding: 7px 10px;
    background: #fffdf5;
    border: 1px dashed #c9a227;
    border-radius: 5px;
    font-size: 13.5px;
    color: #8a6d1f;
    line-height: 1.8;
}
.a-kwplan .ans b{ color: #6b5416; }


/* 打ち合わせ用：対応が済んだ変更箇所の印（Sumi-●）。
   オレンジの .a-pending は「これから確認したいこと」、こちらは「もう直したところ」。
   公開前に、この印とCSSを削除する（2026-09-20） */
.a-done{
    display: inline-block;
    margin: 0 3px;
    padding: 1px 8px;
    border: 1px solid #2f8f5b;
    border-radius: 4px;
    background: #eefaf2;
    color: #1f6b43;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
}
.a-done::before{ content: "対応済 "; font-size: 11px; opacity: .85; }
.a-done:hover{ filter: brightness(1.05); }
.a-done:target{ outline: 3px solid #ffd54a; outline-offset: 2px; }
.a-kwplan .a-done-box{
    background: #f2fbf6;
    border: 1px solid #a8d9bf;
    border-left: 6px solid #2f8f5b;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 16px 0;
}
.a-kwplan .a-done-box > .ttl{ margin: 0 0 8px; font-weight: 700; color: #1f6b43; font-size: 15px; }
.a-kwplan .a-done-box li{ margin-bottom: 8px; line-height: 1.85; font-size: 14.5px; }
.a-kwplan .a-done-box .no{ font-weight: 700; color: #1f6b43; }

/* 3物件の比較表（concept.html）の一番下：各物件ページへのボタン（2026-09-30）
   表のセルに置くので、通常の .btn より小さく。スマホは表ごと横スクロールする */
.table-menu .row-links td { vertical-align: middle; }
.table-menu .row-links .btn { padding: 9px 12px; font-size: 13px; white-space: nowrap; width: auto; }

/* concept.html：設備更新ブロックの下で、節の下余白(80px)と簡易CTAの上余白(56px)が重なり
   白い空きが約150pxになっていた。このページだけCTAの上余白を詰める（2026-09-30） */
body.page-concept .section + .container > .cta-mini { margin-top: 4px; }


/* 周辺案内：情報の確認日（2026-10-03）。
   店舗・医療機関の営業時間は変わるため、いつ時点の情報かを示す。
   冒頭に1回（.a-asof）＋ 各表の下に短く（.a-asof-s）。 */
.a-asof {
    font-size: 13px;
    color: var(--text-light);
    background: var(--bg-light);
    border-left: 3px solid var(--border-color);
    padding: 10px 14px;
    margin: 14px 0 0;
    border-radius: 0 6px 6px 0;
}
.a-asof b { color: var(--text-color); }
.a-asof-s { font-size: 12px; color: var(--text-light); margin: 6px 0 0; text-align: right; }

/* ==========================================================
   編集ツールから入れるもののため（2026-10-12 依頼主の指示）
   ・.gallery-1 … 写真を1枚だけ並べるとき。
     .gallery は3列、.gallery-2 は2列、.gallery-4 は4列が既にあり、
     1列だけが無かった
   ・.a-c0 … 文字の色を黒にする。色を付けた中の一部だけを
     ふつうの黒に戻したいときに使う
   ========================================================== */
.gallery-1 { grid-template-columns: 1fr; }

.a-c0 { color: #333333 !important; }
b .a-c0, strong .a-c0 { color: #333333 !important; }

/* 写真1枚を、横幅いっぱいにしないで置くとき（2026-10-12 依頼主の指示）。
   「1枚・横幅いっぱい」は .gallery-1 のまま。こちらはそれより小さく、左に寄せる。
   画面が狭いときは、いっぱいに広がってよい */
.gallery.gal-small { max-width: 460px; }
@media (max-width: 560px) {
    .gallery.gal-small { max-width: 100%; }
}

/* ==========================================================
   編集ツールの「＋」から入れるもののため（2026-10-12 依頼主の指示）

   ・ワンポイント／注意の枠（.a-tip）
     もともと css/gakusei/v03.css に `body.lp .a-tip` としてあり、
     **学生向けの4ページ（body.lp）でしか効かなかった**。
     「＋」からはどのページにも入れられるので、共通CSSにも置く。
     ★ `body:not(.lp)` に限定してあるので、
        いまある4ページ（around.html と university/ の3ページ）の
        見た目は1ピクセルも変わらない。

   ・目次から飛んだときに、見出しがヘッダーの下に隠れないようにする
     :where() は強さ0なので、すでにある
     `h2.section-title[id]`（88px）や `.reason-head h2[id]`（130px）には負ける。
     つまり既存ページの飛び位置は変わらない。
   ========================================================== */
body:not(.lp) .a-tip {
    border: 1px solid #a9d2d5; border-radius: 7px; overflow: hidden;
    background: #f3fafa; margin: 22px 0 26px;
}
body:not(.lp) .a-tip > .ttl {
    display: inline-block; margin: 0 0 12px;
    background: var(--corporate-color); color: #fff;
    font-size: 13px; font-weight: bold; letter-spacing: .04em;
    padding: 6px 16px; border-radius: 0 0 7px 0;
}
body:not(.lp) .a-tip > *:not(.ttl) { margin-left: 18px; margin-right: 18px; }
body:not(.lp) .a-tip p { margin: 0 0 10px; font-size: 15px; line-height: 1.95; }
body:not(.lp) .a-tip p:last-child { margin-bottom: 18px; }
body:not(.lp) .a-tip.warn { border-color: #e8cfa8; background: #fdf7ee; }
body:not(.lp) .a-tip.warn > .ttl { background: #c87d1c; }

:where(h2, h3, h4)[id] { scroll-margin-top: 88px; }

/* ---- 番号つきリスト（編集ツールの「＋」で入れるもの）（2026-10-12） ----
   上の `* { padding: 0 }` で、素の <ol> は番号が左に飛び出る。
   同じ「＋」で入れる箇条書き（.check-list）と、文字の始まり・大きさ・色・行の間をそろえる。
   新しいクラスにだけ効くので、いまあるページの見た目は変わらない */
.num-list { padding-left: 28px; }
.num-list li { margin-bottom: 12px; font-size: 15px; color: var(--text-light); }