/* ============================================================================
 *  SECRET MEDICINE 高齢者紹介 住まい探しガイド 共有スタイル（gold/明朝テーマ）
 *  画像は ../images/ を参照。公開前に canonical/OGP のドメインを実ドメインへ置換。
 * ========================================================================== */
:root{
  --navy:#1B2A4A; --gold:#B0851C; --gold-deep:#8A6712; --gold-soft:#F6EED8; --cream:#FCF8F0;
  --accent:#8A6712; --accent-soft:#F6EED8;
  --ink:#26303F; --mute:#5A6070; --faint:#6F6A58;
  --line:#E7DEC9; --line2:#EFE8D6; --bg:#FFFFFF; --tint:#FBF6EA;
  --line-green:#06C755;
  --shadow:0 18px 50px rgba(43,34,12,.12); --shadow-sm:0 8px 24px rgba(43,34,12,.09);
  --maxw:1080px; --readw:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Mincho ProN","Noto Serif JP","Yu Mincho","Noto Sans JP",serif;
  color:var(--ink);background:var(--bg);line-height:1.95;font-size:16px;-webkit-text-size-adjust:100%;
  font-feature-settings:"palt";letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.read{max-width:var(--readw);margin:0 auto;padding:0 22px}
svg.ic{display:block;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;border:1px solid transparent;border-radius:11px;cursor:pointer;font-family:inherit;font-size:15px;padding:14px 24px;transition:transform .16s,box-shadow .16s}
.btn:hover{transform:translateY(-2px)}
.btn .ic{width:18px;height:18px}
.btn.home{background:#fff;color:var(--navy);border-color:var(--line);padding:10px 16px;font-size:13.5px;white-space:nowrap}
.btn.p{background:var(--navy);color:#fff;box-shadow:0 10px 26px rgba(27,42,74,.28)}
.btn.gold{background:var(--gold);color:#fff;box-shadow:0 12px 30px rgba(176,133,28,.3)}
.btn.line{background:var(--line-green);color:#fff;box-shadow:0 12px 30px rgba(6,199,85,.3)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.big{padding:16px 28px;font-size:16px}
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .row{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.hdr .brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--navy);font-size:15px}
.hdr .brand img{height:50px}
@media(max-width:560px){.hdr .brand img{height:38px}}
.hdr .right{display:flex;align-items:center;gap:12px}
.hdr .tel{display:none;font-size:13px;font-weight:800;color:var(--navy)}
@media(min-width:760px){.hdr .tel{display:flex;align-items:center;gap:6px}}
.hdr .tel .ic{width:15px;height:15px;color:var(--gold-deep)}
.hdr .cta{font-size:13px;padding:9px 15px}
.crumb{font-size:12px;color:var(--faint);padding:16px 0 0}
.crumb a:hover{color:var(--gold-deep)}
.crumb span{margin:0 6px}
.ahead{padding:20px 22px 8px}
.ahead .cat{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--gold);padding:5px 12px;border-radius:7px}
.ahead h1{font-size:25px;font-weight:900;line-height:1.55;color:var(--navy);margin-top:16px}
@media(min-width:760px){.ahead h1{font-size:33px;line-height:1.5}}
.ahead .meta{font-size:12.5px;color:var(--faint);margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 14px}
.ahead .meta span{display:inline-flex;align-items:center;gap:5px}
.ahead .meta svg{width:14px;height:14px;stroke:var(--faint);fill:none;stroke-width:2}
.ahero{max-width:900px;margin:22px auto 0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ahero img{width:100%;display:block}
.body{padding:36px 22px 10px}
.body p{font-size:16px;color:var(--ink);margin:0 0 20px}
.body h2{font-size:22px;font-weight:800;color:var(--navy);margin:40px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--gold-soft);line-height:1.5}
.body h3{font-size:18px;font-weight:800;color:var(--navy);margin:28px 0 12px}
.body ul,.body ol{margin:0 0 20px;padding-left:2px;list-style:none}
.body ul li,.body ol li{position:relative;padding-left:28px;margin-bottom:11px;font-size:15.5px;color:var(--ink)}
.body ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.body ol{counter-reset:n}
.body ol li{counter-increment:n}
.body ol li::before{content:counter(n);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.body strong{color:var(--navy);font-weight:800}
.body .lead{font-size:17px;color:var(--mute);line-height:1.95;margin-bottom:28px}
.field-note{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:20px 22px;margin:28px 0}
.field-note .h{font-size:13px;font-weight:800;color:var(--gold-deep);letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.field-note .h svg{width:16px;height:16px;stroke:var(--gold-deep);fill:none;stroke-width:2}
.field-note p{font-size:14.5px;color:var(--ink);margin:10px 0 0;line-height:1.9}
.tbl{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:14px}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 12px;text-align:left}
.tbl th{background:var(--navy);color:#fff;font-weight:700}
.tbl tr:nth-child(even) td{background:var(--tint)}
.summary{background:#fff;border:1.5px solid var(--gold-soft);border-radius:14px;padding:22px 24px;margin:32px 0}
.summary .h{font-size:15px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px}
.summary .h svg{width:18px;height:18px;stroke:var(--gold-deep);fill:none;stroke-width:2}
.summary ul{margin:14px 0 0}
.cta-box{background:linear-gradient(120deg,#141F38,#1B2A4A 55%,#33507F);color:#fff;border-radius:18px;padding:30px 26px;margin:36px 0 8px;text-align:center}
.cta-box h3{font-size:20px;font-weight:900;color:#fff;line-height:1.5}
.cta-box p{font-size:13.5px;color:#C3C9D6;margin-top:10px}
.cta-box .btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.related{padding:30px 22px 10px}
.related h2{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:18px}
.rel-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .18s,box-shadow .18s;display:block}
.rel:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.rel .th{height:110px;overflow:hidden;background:#f1ece0}
.rel .th img{width:100%;height:100%;object-fit:cover}
.rel .bd{padding:12px 14px 14px}
.rel .bd .c{font-size:11px;font-weight:800;color:var(--gold-deep)}
.rel .bd h4{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.6}
.list-hero{background:linear-gradient(180deg,#FDFBF5,#F7EFDD);border-bottom:1px solid var(--line);padding:40px 0 36px;text-align:center}
.list-hero .kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--gold-deep);background:var(--gold-soft);padding:7px 15px;border-radius:999px}
.list-hero h1{font-size:28px;font-weight:900;color:var(--navy);margin-top:16px}
@media(min-width:760px){.list-hero h1{font-size:36px}}
.list-hero p{font-size:15px;color:var(--mute);margin-top:14px;max-width:640px;margin-left:auto;margin-right:auto}
.tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:26px}
.tab{font-family:inherit;font-size:13px;font-weight:800;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer}
.tab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.arts{display:grid;grid-template-columns:1fr;gap:18px;margin:34px auto 0;max-width:var(--maxw);padding:0 22px}
@media(min-width:640px){.arts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.arts{grid-template-columns:repeat(3,1fr)}}
.art{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s,box-shadow .18s;display:block}
.art:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.art .th{height:160px;position:relative;overflow:hidden}
.art .th img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.art:hover .th img{transform:scale(1.05)}
.art .th.grad{background:linear-gradient(135deg,#1B2A4A,#B0851C)}
.art .th .cat{position:absolute;left:12px;bottom:12px;font-size:11px;font-weight:800;color:#fff;background:rgba(27,42,74,.8);padding:4px 10px;border-radius:7px}
.art .bd{padding:16px 16px 18px}
.art .bd h3{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.6}
.art:hover .bd h3{color:var(--gold-deep)}
.art .bd .kw{display:inline-block;font-size:11px;font-weight:700;color:var(--gold-deep);background:var(--gold-soft);padding:3px 9px;border-radius:6px;margin-top:11px}
.art .bd .meta{font-size:11.5px;color:var(--faint);margin-top:11px}
.ft{background:#131B2E;color:#9AA3B6;font-size:12.5px;padding:34px 0 90px;margin-top:40px}
.ft .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.ft a:hover{color:#fff}
.ft .links{display:flex;flex-wrap:wrap;gap:14px}
.ft .brand img{height:30px;filter:brightness(0) invert(1)}
.ft .cp{max-width:var(--maxw);margin:16px auto 0;padding:0 22px;color:#6E7788;font-size:11.5px}
@media(min-width:900px){.ft{padding-bottom:34px}}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:8px;padding:8px 10px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(43,34,12,.12)}
.mbar a{flex:1;font-size:13.5px;padding:12px 6px;border-radius:10px}
@media(min-width:900px){.mbar{display:none}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* 本文インライン図版（2026-07-20 追加：飽きさせない・見やすい）*/
.body figure.inline{margin:32px auto;max-width:760px}
.body figure.inline img{width:100%;display:block;border-radius:14px;box-shadow:var(--shadow-sm)}
.body figure.inline figcaption{margin-top:9px;font-size:12.5px;color:var(--mute);text-align:center;font-weight:600;line-height:1.6}

/* ===== 画像内キャッチコピー帯（§4-1c CSSオーバーレイ方式） ===== */
.ahero{position:relative}
.ahero .acatch{position:absolute;left:12px;bottom:12px;max-width:88%;background:rgba(10,16,32,.58);color:#fff;font-weight:800;font-size:clamp(16px,3.4vw,25px);line-height:1.4;padding:10px 18px;border-radius:12px;letter-spacing:.05em;backdrop-filter:blur(2px)}
/* ===== HPへの動線バナー ===== */
.hpnav{margin-top:34px}
.hpnav-in{background:linear-gradient(120deg,#141F38,#1B2A4A 60%,#26365C);border-radius:18px;padding:28px 24px;color:#fff}
.hpnav-t{font-size:20px;font-weight:900;line-height:1.5}
.hpnav-p{font-size:13.5px;color:#C9CFDC;margin-top:8px}
.hpnav-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
@media(min-width:760px){.hpnav-btns{flex-direction:row;flex-wrap:wrap}}
.hb{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:800;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:13px 18px;transition:transform .15s,background .15s}
.hb:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
.hb.main{background:#E4C766;color:#14224B;border-color:#E4C766}
.hb.main:hover{background:#F0D48A}
.hb .ar{font-weight:900}

/* v5: スマホ可読性(余白28px+文字サイズ+キャッシュ更新) */
@media(max-width:520px){
  .wrap{padding:0 26px}
  .read{padding:0 28px}
  .ahead{padding:16px 28px 8px}
  .body{padding:28px 28px 10px}
  .related{padding:24px 28px 10px}
  .body p{font-size:15.5px;line-height:1.95}
  .lead{font-size:16px}
  .body h2{font-size:20px}
  .body h3{font-size:17px}
  .hdr .tel{display:none}
}

/* v6: 2026監査対応(リンク視認性/目次/更新日/コントラスト) */
.body p a,.body li a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.body p a:hover,.body li a:hover{opacity:.8}
.toc{background:var(--tint);border:1px solid var(--line2);border-radius:12px;padding:16px 20px;margin:6px 0 26px}
.toc .th2{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:8px}
.toc ol{margin:0;padding-left:20px;list-style:decimal}
.toc li{font-size:13.5px;margin:4px 0;padding-left:2px}
.toc a{color:var(--accent);text-decoration:none}
.toc a:hover{text-decoration:underline}
.meta .upd{color:var(--accent);font-weight:700}

/* v7: 画像比率の恒久保険(width/height属性とCSS片側指定の衝突防止) */
.body img,.ahero img,figure.inline img{height:auto}
figure.inline img{max-height:640px;width:auto;max-width:100%;margin:0 auto}
.hdr .brand img,.ft .brand img{width:auto}
.rel .th img{height:100%}

/* v8: モバイルヘッダー実測修正(375pxで合計328px設計・LINE折返し解消) */
@media(max-width:560px){
  .hdr .row{gap:8px;padding:0 14px}
  .hdr .brand{font-size:0}
  .hdr .brand img{height:32px}
  .hdr .brand img{height:30px}
  .btn.home{padding:8px 10px;font-size:12px}
  .hdr .cta{padding:8px 12px;font-size:12.5px;white-space:nowrap}
}