/* ============================================================================
 *  SECRET MEDICINE ブログ 共有スタイル（2026-09-30 刷新・会社ブログと AI ブログで同じ1本）
 *  本番 blog/blog.css（v=15）と同じ class 名だけを使う＝記事 HTML（45本＋一覧）は1文字も変えない。
 *  差し替えるのはこの CSS 1本だけ（凍結中の title・本文・内部リンクに触れない）。
 *  見た目の型はトップのモックと同じ：白・墨・生成りの地・1px 罫・明朝の見出し・Jost の英数字・角 2px・影なし。
 * ========================================================================== */
/* 書体：外部フォントは読み込まない。和文は端末の明朝・ゴシック、英数字の Jost だけ自前（/fonts/） */
@font-face{font-family:Jost;font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/jost-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{
  --ink:#1B1A18; --sub:#57524B; --mute:#6F6A62;
  --line:#DCD7CE; --paper:#F5F2EC; --bg:#fff;
  --camel:#8C6A43; --camel-l:#C9B59A; --line-green:#06C755;
  --r:2px; --maxw:1120px; --readw:720px;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif;
  --en:Jost,"Noto Sans JP",sans-serif;
  /* 旧変数名（記事内の直書き style が参照している）を新しい色へ寄せる */
  --navy:var(--ink); --accent:var(--camel); --accent-soft:var(--paper); --coral:var(--ink);
  --faint:var(--mute); --line2:var(--line); --tint:var(--paper); --good:var(--camel);
}
*{box-sizing:border-box;margin:0;padding:0}
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
html,body{overflow-x:hidden}
body{font:400 16px/2 var(--sans);color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.read{max-width:var(--readw);margin:0 auto;padding:0 28px}
svg.ic{display:block;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:#fff;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.08em;cursor:pointer;transition:background-color .2s,color .2s}
.btn:hover{background:#000}
.btn .ic{width:16px;height:16px}
.btn.home,.btn.ghost,.btn.p{background:#fff;color:var(--ink)}
.btn.home:hover,.btn.ghost:hover,.btn.p:hover{background:var(--ink);color:#fff}
.btn.home{min-height:44px;padding:0 16px;font-size:12.5px;border-color:var(--line);white-space:nowrap}
.btn.line{background:var(--line-green);border-color:var(--line-green);color:var(--ink)}
.btn.line:hover{background:#05d65b}
.btn.big{min-height:56px;padding:0 32px;font-size:15px}

/* ヘッダ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.hdr .row{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1200px;margin:0 auto;padding:0 32px}
.hdr .brand img{height:46px;width:auto}
.hdr .right{display:flex;align-items:center;gap:16px}
.hdr .tel{display:none;font:400 16px/1 var(--en);letter-spacing:.08em;color:var(--ink)}
@media(min-width:760px){.hdr .tel{display:flex;align-items:center;gap:8px}}
.hdr .tel .ic{width:14px;height:14px;color:var(--mute)}
.hdr .cta{min-height:44px;padding:0 18px;font-size:13px;background:var(--ink);border-color:var(--ink);color:#fff}
.hdr .cta::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-green)}
.hdr .cta:hover{background:#000}

/* パンくず */
.crumb{font-size:12px;color:var(--mute);padding:22px 0 0;letter-spacing:.06em}
.crumb a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px}

/* 記事ヘッダ：カテゴリは塗らず、見出しは明朝で大きく */
.ahead{padding:36px 28px 8px;max-width:var(--readw)}
.wrap:has(>.crumb){max-width:var(--readw)}
.ahead .read{padding-left:0;padding-right:0}
body>.ahero,body>.supervisor{max-width:var(--readw);margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}   /* 古い型の記事は写真と監修が body の直下にある＝同じ柱に入れる */
@media(max-width:560px){body>.ahero,body>.supervisor{padding-left:22px;padding-right:22px}}   /* 記事によって article が .ahead の中に入る型と外に出る型がある＝どちらでも左端が同じになるように */   /* パンくず・見出し・本文・関連記事の左端を同じ柱に（3AI R3 #1） */
.ahead .cat{display:inline-block;font-size:12px;letter-spacing:.16em;color:var(--camel);border-bottom:1px solid var(--camel-l);padding-bottom:6px}
.ahead h1{font:500 28px/1.7 var(--serif);letter-spacing:.06em;margin-top:22px}
@media(min-width:760px){.ahead h1{font-size:34px;line-height:1.65}}
.ahead .meta{font:400 12px/1.8 var(--en);letter-spacing:.1em;color:var(--mute);margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px}
.ahead .meta span{display:inline-flex;align-items:center;gap:6px}
.ahead .meta svg{width:13px;height:13px;stroke:var(--mute);fill:none;stroke-width:1.5}
.meta .upd{color:var(--ink)}
/* 写真の上に文字を載せない：キャッチは写真の下に、明朝で */
.ahero{margin:32px 0 0;position:relative}
.ahero img{width:100%;max-height:70vw;object-fit:cover}
@media(min-width:760px){.ahero img{max-height:405px}}
.ahero .acatch{display:block;font:500 clamp(17px,2.4vw,22px)/1.8 var(--serif);letter-spacing:.1em;color:var(--ink);padding:18px 0 0 22px;position:relative}
.ahero .acatch::before{content:"";position:absolute;left:0;top:32px;width:12px;height:1px;background:var(--ink)}

/* 監修 */
.supervisor{margin:28px 0 4px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--sub);line-height:1.9}
.supervisor b{color:var(--ink);font-weight:500}
.supervisor a{text-decoration:underline;text-underline-offset:4px}
.supervisor .sup-note{display:block;font-size:12.5px;color:var(--mute)}

/* 本文（class="read body" と class="read" の両方に効かせる＝後者は本番で段落の余白が当たっていない） */
article.read{padding-top:44px;padding-bottom:10px}
article.read p{font-size:16px;margin:0 0 26px}
article.read h2{font:500 25px/1.7 var(--serif);letter-spacing:.06em;margin:72px 0 24px;padding-top:26px;border-top:1px solid var(--ink)}
article.read h3{font:500 18px/1.8 var(--sans);letter-spacing:.05em;margin:40px 0 12px;padding-left:16px;border-left:1px solid var(--camel)}
article.read strong{font-weight:500;text-decoration:underline;text-decoration-color:#DDD0BA;text-decoration-thickness:.42em;text-underline-offset:-.12em;text-decoration-skip-ink:none}
article.read p a,article.read li a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--camel)}
article.read p a:hover,article.read li a:hover{text-decoration-color:var(--ink)}
article.read ul,article.read ol{margin:0 0 26px;list-style:none}
article.read ul li,article.read ol li{position:relative;padding-left:26px;margin-bottom:12px;font-size:15.5px}
article.read ul li::before{content:"";position:absolute;left:4px;top:15px;width:10px;height:1px;background:var(--ink)}
article.read ol{counter-reset:n}
article.read ol li{counter-increment:n}
article.read ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:3px;font:400 12px/2 var(--en);color:var(--mute)}
article.read .lead{font-size:17px;color:var(--sub);margin-bottom:32px}
.chk{font-size:13px;color:var(--mute)}

/* 定義（AI 検索が抜き出す単位）：生成りの地に */
.def{margin:0 0 32px!important;background:var(--paper);padding:24px 26px;font-size:15px!important;line-height:2.05}
.def b{font-weight:500}
/* 目次 */
.toc{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:22px 0 18px;margin:8px 0 40px}
.toc .th2{font-size:12px;letter-spacing:.2em;color:var(--sub);margin-bottom:10px}
article.read .toc ol{margin:0;counter-reset:t}
article.read .toc li{counter-increment:t;font-size:14.5px;margin:0;padding:7px 0 7px 38px}
article.read .toc li::before{content:counter(t,decimal-leading-zero);font:400 12px/2.4 var(--en);color:var(--mute);top:7px}
.toc a{text-decoration:none!important}
.toc a:hover{text-decoration:underline!important;text-underline-offset:4px}

/* 現場メモ・一般的傾向 */
.field-note,.hyp{background:var(--paper);padding:22px 26px;margin:32px 0;font-size:14.5px;line-height:1.95}
.field-note .h,.hyp .hyp-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--camel);margin-bottom:8px}
.field-note .h svg{width:14px;height:14px;stroke:var(--camel);fill:none;stroke-width:1.5}
.field-note p{font-size:14.5px!important;margin:0!important}
.hyp .hyp-src{display:block;margin-top:8px;font-size:12px;color:var(--mute)}
.src-box{border-left:1px solid var(--ink)!important;background:var(--paper)!important}
.src-box a{text-decoration:underline;text-underline-offset:4px}

/* 表 */
.tbl,article.read table{width:100%;border-collapse:collapse;margin:12px 0 32px;font-size:14.5px;line-height:1.8;border-top:1px solid var(--ink)}
.tbl th,.tbl td,article.read th,article.read td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left;vertical-align:top}
.tbl th,article.read th{font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--sub);background:none;white-space:nowrap}
@media(max-width:700px){
  article.read table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  article.read th,article.read td{min-width:8.5em;font-size:14px}
}

/* 写真 */
.read img,.body-fig img,figure.inline img{height:auto}
.body-fig,article.read figure.inline{margin:40px 0}
.body-fig img,figure.inline img{width:100%;height:auto}   /* 本文の図・写真は切らない（3AI R1 #12） */
.body-fig figcaption,figure.inline figcaption{margin-top:12px;font-size:12.5px;color:var(--sub);line-height:1.8;padding-left:22px;position:relative}
.body-fig figcaption::before,figure.inline figcaption::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--ink)}

/* まとめ */
.summary{border:1px solid var(--ink);padding:30px 32px;margin:56px 0 0}
.summary .h{font:500 18px/1.6 var(--serif);letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.summary .h svg{width:16px;height:16px;stroke:var(--camel);fill:none;stroke-width:1.5}
article.read .summary ul{margin:16px 0 0}
article.read .summary ul li{font-size:14.5px;margin-bottom:10px}

/* 記事内の相談欄 */
.cta-box{background:var(--ink);color:#fff;padding:48px 32px;margin:40px 0 8px;text-align:center}
article.read .cta-box h3{font:500 22px/1.7 var(--serif);letter-spacing:.08em;color:#fff;margin:0;padding:0;border:0}
article.read .cta-box p{font-size:13.5px;color:#CFCAC2;margin:12px 0 0}
.cta-box .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.cta-box .btn.coral{background:#fff;color:var(--ink);border-color:#fff}
.cta-box .btn.coral:hover{background:var(--paper)}

/* 関連記事 */
.related{padding:72px 28px 10px}
.related h2{font:500 22px/1.6 var(--serif);letter-spacing:.08em;padding-top:24px;border-top:1px solid var(--ink);margin-bottom:28px}
.rel-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:700px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel{display:block}
.rel .th{aspect-ratio:3/2;overflow:hidden;background:var(--paper)}
.rel .th img{width:100%;height:100%;object-fit:cover}
.rel .bd{padding:14px 0 0}
.rel .bd .c{font-size:11px;letter-spacing:.14em;color:var(--camel)}
.rel .bd h4{font-size:14.5px;font-weight:500;margin-top:6px;line-height:1.75}
.rel:hover h4{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* HP への動線 */
.hpnav{margin-top:56px}
.hpnav-in{background:var(--paper);padding:40px 36px}
.hpnav-t{font:500 22px/1.7 var(--serif);letter-spacing:.08em}
.hpnav-p{font-size:13.5px;color:var(--sub);margin-top:8px}
.hpnav-btns{display:flex;flex-direction:column;gap:10px;margin-top:22px}
@media(min-width:760px){.hpnav-btns{flex-direction:row;flex-wrap:wrap}}
.hb{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:0 22px;border:1px solid var(--ink);border-radius:var(--r);font-size:14px;font-weight:500;background:#fff;transition:background-color .2s,color .2s}
.hb:hover{background:var(--ink);color:#fff}
.hb.main{background:var(--ink);color:#fff}.hb.main:hover{background:#000}
.hb .ar{font-family:var(--en);font-weight:300}

/* 一覧ページ */
.list-hero{border-bottom:1px solid var(--line);padding:80px 0 0;text-align:left}
.list-hero .kicker{font:400 11px/1 var(--en);letter-spacing:.32em;color:var(--sub)}
.list-hero h1{font:500 32px/1.6 var(--serif);letter-spacing:.08em;margin-top:22px}
@media(min-width:760px){.list-hero h1{font-size:44px}}
.list-hero p{font-size:15px;color:var(--sub);margin-top:18px;max-width:640px}
.tabs{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:44px}
.tab{font-family:inherit;font-size:13px;color:var(--mute);background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;padding:12px 0;min-height:44px;cursor:pointer;letter-spacing:.06em}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}
.pillband{max-width:var(--maxw);margin:48px auto 0;padding:0 28px}
.pillband .in{background:var(--paper);padding:24px 28px}
.pillband .lb{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;color:var(--camel);margin-bottom:10px}
.pillband .lb svg{width:13px;height:13px;stroke:var(--camel);fill:none;stroke-width:1.5}
.pillband .row{display:flex;flex-wrap:wrap;gap:0 40px}
.pillband a{flex:1 1 300px;display:flex;align-items:center;gap:14px;min-height:56px;border-bottom:1px solid var(--line);font-size:15px;font-weight:500}
.pillband a:hover{border-bottom-color:var(--ink)}
.pillband a .pc{flex-shrink:0;font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--sub);border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:2px 8px;white-space:nowrap}
.pillband a .ar{margin-left:auto;font-family:var(--en);font-weight:300}
.sec-h{max-width:var(--maxw);margin:80px auto 0;padding:0 28px;font:500 24px/1.6 var(--serif);letter-spacing:.08em}
.sec-h::before{content:"";display:block;border-top:1px solid var(--ink);margin-bottom:24px}
.sec-h small{display:block;font:400 13px/1.8 var(--sans);letter-spacing:.04em;color:var(--sub);margin-top:4px}
.sec-h small a{text-decoration:underline;text-underline-offset:4px}
.arts{display:grid;grid-template-columns:1fr;gap:44px 32px;margin:36px auto 0;max-width:var(--maxw);padding:0 28px}
@media(min-width:640px){.arts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.arts{grid-template-columns:repeat(3,1fr)}}
.art{display:flex;flex-direction:column}
/* カテゴリは写真に載せない：.th を縦に並べ替えて、写真の下に出す（HTML はそのまま） */
.art .th{display:flex;flex-direction:column-reverse;height:auto}
.art .th img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;background:var(--paper)}
.art .th.grad{background:var(--ink);aspect-ratio:3/2}
.art .th .cat{position:static;display:block;font-size:12px;letter-spacing:.14em;color:var(--camel);background:none;padding:14px 0 0}
.art .bd{padding:6px 0 0}
.art .bd h3{font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.05em}
.art:hover .bd h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.art .bd .kw{display:block;font-size:11.5px;color:var(--mute);margin-top:10px;letter-spacing:.06em}
.art .bd .meta{font:400 12px/1 var(--en);letter-spacing:.12em;color:var(--mute);margin-top:12px}

/* フッタ */
.ft{background:#121110;color:#A8A299;font-size:12.5px;padding:56px 0 96px;margin-top:96px}
.ft .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;max-width:1200px;margin:0 auto;padding:0 32px}
.ft a:hover{color:#fff}
.ft .links{display:flex;flex-wrap:wrap;gap:8px 22px}
.ft .brand img{height:28px;width:auto;filter:brightness(0) invert(1)}
.ft .cp{max-width:1200px;margin:32px auto 0;padding:20px 32px 0;border-top:1px solid #2E2C29;color:#7C766E;font-size:11.5px}
@media(min-width:1400px){.ft{padding-bottom:40px}}

/* スマホの固定バー */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;background:#fff;border-top:1px solid var(--line)}
.mbar a{flex:1;min-height:56px;padding:0 6px;border-radius:0;border:0;border-right:1px solid var(--line);font-size:13px}
.mbar .btn.coral{background:var(--ink);color:#fff}
.mbar .btn.line{background:#fff;color:var(--ink)}
.mbar{padding-bottom:env(safe-area-inset-bottom)}
.mbar .btn.line::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-green)}
/* PC：左下に小さく追従（検索・AI から記事に着地した人が、読みながらいつでも相談へ進める） */
@media(min-width:1400px){.mbar{left:24px;right:auto;bottom:24px;border:1px solid var(--ink)}.mbar a{flex:none;min-height:48px;padding:0 20px}.mbar a:last-child{border-right:0}}
@media(min-width:900px) and (max-width:1399px){.mbar{justify-content:center}.mbar a{flex:0 0 220px;min-height:52px}.mbar a:first-child{border-left:1px solid var(--line)}}

/* 表示は JS に頼らない（3AI R1 #1）：.reveal は最初から見える */
.reveal{opacity:1;transform:none}

@media(max-width:560px){
  .wrap,.read{padding:0 22px}
  .hdr .row{height:60px;gap:8px;padding:0 16px}
  .hdr .brand img{height:30px}
  .btn.home{padding:0 10px;font-size:12px}
  .hdr .cta{padding:0 12px;font-size:12.5px;white-space:nowrap}
  .hdr .tel{display:none}
  .ahead{padding:24px 22px 8px}
  article.read{padding-top:32px}
  article.read p{font-size:15.5px}
  article.read h2{font-size:21px;margin-top:56px}
  article.read h3{font-size:17px}
  .def{padding:18px 18px}
  .summary{padding:22px 20px}
  .cta-box{padding:36px 22px}.cta-box .btn{flex:1 1 100%}
  .related{padding:56px 22px 10px}
  .hpnav-in{padding:28px 22px}
  .list-hero{padding:48px 0 0}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0 20px}.tab{white-space:nowrap}
  .pillband,.sec-h,.arts{padding:0 22px}
  .sec-h{margin-top:56px;font-size:21px}
}

/* 案内係（concierge.js が実行時に差し込む .myc）：トップと同じ細い墨の線に。JS 側は触らない（安全設計の検査対象）＝見た目だけ CSS で上書き */
.myc{font-family:var(--sans)!important}
.myc .lau{filter:none!important;animation:none!important}
.myc .lau .ring{background:var(--ink)!important;padding:1px!important}
.myc .lau .ring img{border:3px solid #fff}
.myc .lau .dot{background:var(--line-green)!important}
.myc .lau .tag{background:var(--ink)!important;border:0!important;font-weight:400!important}
.myc .hint{border-radius:2px!important;box-shadow:none!important;border:1px solid var(--line)!important;color:var(--ink)!important;font-weight:400!important}
.myc .panel{border-radius:0!important;box-shadow:none!important;border:1px solid var(--ink)!important}
.myc .ph{background:#fff!important;color:var(--ink)!important;border-bottom:1px solid var(--line)}
.myc .ph img{border:0!important}.myc .ph .st,.myc .ph .x{color:var(--sub)!important}
.myc .body{background:var(--paper)!important}
.myc .msg{border-radius:0!important;border-color:var(--line)!important;color:var(--ink)!important}
.myc .msg.user{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;font-weight:400!important}
.myc .qb{border-radius:0!important;border:1px solid var(--line)!important;color:var(--ink)!important;font-weight:500!important}
.myc .qb:hover{border-color:var(--ink)!important;background:#fff!important}
.myc .ca,.myc .foot .ca{border-radius:0!important;font-weight:500!important}
.myc .ca.line,.myc .foot .ca{background:var(--line-green)!important;color:var(--ink)!important}
.myc .ca.tel{background:var(--ink)!important}
.myc .ca.pg{border:1px solid var(--ink)!important;color:var(--ink)!important}
@media(prefers-reduced-motion:no-preference){.myc .lau{animation:none!important}}

/* 3AI 総点検 R1（2026-10-01）：#8 目次・ページ内リンクで見出しが固定ヘッダーの下に隠れない／#9 固定バーの LINE は緑の塗り・暗い帯の中はフォーカス枠を白 */
[id]{scroll-margin-top:84px}
.mbar .btn.line{background:var(--line-green)!important;color:var(--ink)!important}
.mbar .btn.line::before{display:none}
.cta-box :focus-visible,.hpnav-in :focus-visible,.ft :focus-visible{outline-color:#fff}
.hpnav-in :focus-visible{outline-color:var(--ink)}