:root{
  --paper:#ffffff;        /* 地 */
  --ink:#1f2328;            /* 文字 */
  --accent:#0b6b63;      /* アクセント（1色だけ） */
  --ink-soft:#4f5862;  /* 文字色を薄めた段階 */
  --rule:#d7dbdf;          /* 罫（細く・薄く・1本） */
  --tint:#f4f6f6;          /* 薄い地 */
  --warn:#eef4f3;     /* 注意の帯 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",
    "Noto Sans JP",sans-serif;
  font-size:17px;line-height:1.85;letter-spacing:.01em;
  font-feature-settings:"palt";
}
.wrap{max-width:744px;margin:0 auto;padding:0 var(--s3);}

/* 帯（サイト名） */
.site{border-bottom:1px solid var(--rule);}
.site .wrap{display:flex;align-items:baseline;gap:var(--s2);
  padding-top:var(--s2);padding-bottom:var(--s2);}
.site a{color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.04em;}
.site a:hover{color:var(--accent);}
.site .tag{font-size:12.5px;color:var(--ink-soft);letter-spacing:.06em;}

/* 広告表記・試作の断り */
.strip{background:var(--tint);border-bottom:1px solid var(--rule);
  font-size:13px;color:var(--ink-soft);}
.strip .wrap{padding-top:var(--s1);padding-bottom:var(--s1);}

/* パンくず */
.crumb{font-size:12.5px;color:var(--ink-soft);padding-top:var(--s3);}
.crumb ol{list-style:none;margin:0;padding:0;}
.crumb li{display:inline;}
.crumb li+li::before{content:"／";margin:0 .5em;color:var(--rule);}
.crumb a{color:var(--ink-soft);}

main{padding-bottom:var(--s6);}
h1{
  font-size:28px;line-height:1.45;letter-spacing:.01em;font-weight:700;
  margin:var(--s4) 0 var(--s2);
}
.lead{font-size:16px;color:var(--ink);margin:0 0 var(--s5);}
h2{
  font-size:21px;line-height:1.5;font-weight:700;letter-spacing:.01em;
  margin:var(--s6) 0 var(--s2);padding-top:var(--s2);
  border-top:1px solid var(--rule);
}
h3{font-size:17px;font-weight:700;margin:var(--s4) 0 var(--s1);}
p{margin:0 0 var(--s3);}
ul,ol{margin:0 0 var(--s3);padding-left:1.4em;}
li{margin-bottom:var(--s1);}
dl{margin:0 0 var(--s3);}
dt{font-weight:700;margin-top:var(--s2);}
dd{margin:0 0 var(--s1) 0;padding-left:1.1em;border-left:2px solid var(--rule);}
/* 出典の dd には URL をそのまま出す。375px で器（324px）を超えるので
   ここも折り返せるようにする（実測で見つけた。mz_layout.py）。 */
dd a{word-break:break-all;}
a{color:var(--accent);text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}

/* 表。375px でも横に溢れさせない（器ごと横に送る） */
.tablewrap{overflow-x:auto;margin:0 0 var(--s3);
  border:1px solid var(--rule);}
table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.7;}
caption{
  text-align:left;font-size:12.5px;color:var(--ink-soft);
  padding:var(--s1) var(--s2);background:var(--tint);
  border-bottom:1px solid var(--rule);
}
th,td{padding:var(--s1) var(--s2);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);}
th{background:var(--tint);font-weight:700;white-space:nowrap;}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}

/* 引用 */
blockquote{
  margin:0 0 var(--s3);padding:var(--s2) var(--s3);
  background:var(--tint);border-left:3px solid var(--accent);
  font-size:16px;
}
blockquote p:last-child{margin-bottom:0;}

/* 注意・注記 */
.warn{margin:0 0 var(--s3);padding:var(--s2) var(--s3);
  background:var(--warn);border:1px solid var(--accent);}
.warn p:last-child{margin-bottom:0;}
.note{margin:0 0 var(--s3);font-size:14.5px;color:var(--ink-soft);}

/* 商品枠（今回は枠だけ。中身は入れない） */
.adslot{
  margin:0 0 var(--s3);padding:var(--s3);
  border:1px dashed var(--rule);background:var(--tint);
}
.adslot .adslot-label{
  font-size:11.5px;letter-spacing:.18em;color:var(--ink-soft);
  margin:0 0 var(--s1);
}
.adslot p{font-size:14.5px;color:var(--ink-soft);margin:0;}

/* ページへの導線 */
.links{list-style:none;margin:0 0 var(--s3);padding:0;}
.links li{margin:0;border-top:1px solid var(--rule);}
.links li:last-child{border-bottom:1px solid var(--rule);}
.links a{display:block;padding:var(--s2) 0;text-decoration:none;font-weight:700;}
.links a:hover{color:var(--accent);}
.links .d{display:block;font-size:13.5px;font-weight:400;color:var(--ink-soft);
  margin-top:2px;}

/* 出典 */
sup.src{font-size:11px;line-height:1;}
sup.src a{text-decoration:none;}
.srclist{font-size:13.5px;color:var(--ink-soft);padding-left:1.6em;}
.srclist li{margin-bottom:var(--s1);}
.srclist a{word-break:break-all;}

footer{border-top:1px solid var(--rule);background:var(--tint);
  font-size:13.5px;color:var(--ink-soft);}
footer .wrap{padding-top:var(--s4);padding-bottom:var(--s5);}
footer p{margin:0 0 var(--s2);}
footer ul{list-style:none;margin:0 0 var(--s2);padding:0;}
footer li{display:inline-block;margin:0 var(--s2) var(--s1) 0;}
footer a{color:var(--accent);}

@media (max-width:759px){
  body{font-size:16px;}
  .wrap{padding:0 var(--s2);}
  h1{font-size:24px;}
  h2{font-size:19px;}
  /* 右下のメニューがフッタの最後の行に被らないよう下に場所を作る */
  footer .wrap{padding-bottom:122px;}
}

  /* ▼ メニュー（依頼 20261010_06 の結論を流用）。JavaScript は使っていない。
     開閉は :target だけ。URL が状態そのもの（#menu＝開／それ以外＝閉）。
     閉じているときパネルと幕は display:none。
     だからタブ順にも読み上げにも現れない（画面外に隠すやり方では両方に残る）。 */
  #menu:not(:target) .menu-panel,
  #menu:not(:target) .menu-scrim{display:none;}
  #menu:target .menu-open{display:none;}

  .menu-open{
    position:fixed;z-index:30;top:14px;right:14px;
    display:inline-flex;align-items:center;gap:9px;
    min-height:48px;min-width:48px;padding:0 15px;
    background:var(--paper);color:var(--ink);
    /* 枠は罫の色（薄いグレー）では地に対して3:1に届かない。
       押せる区画の境界は3:1。だから枠も文字と同じ濃さにする。 */
    border:1px solid var(--ink);
    box-shadow:0 2px 10px rgba(31,35,40,.16);
    font-size:13px;line-height:1;text-decoration:none;letter-spacing:.08em;
  }
  .menu-open:hover{color:var(--accent);border-color:var(--accent);}
  .menu-bars{display:inline-block;width:17px;}
  .menu-bars i{display:block;height:2px;background:currentColor;}
  .menu-bars i + i{margin-top:4px;}

  /* 幕。外側を押しても閉じる。読み上げには出さず、タブ順にも入れない。 */
  .menu-scrim{
    position:fixed;z-index:31;left:0;right:0;top:0;bottom:0;
    background:rgba(31,35,40,.5);
  }
  .menu-panel{
    position:fixed;z-index:32;top:14px;right:14px;
    width:330px;max-width:calc(100vw - 28px);
    max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);
    overflow-y:auto;
    background:var(--paper);border:1px solid var(--rule);
    box-shadow:0 6px 30px rgba(31,35,40,.26);
    padding:10px 18px 16px;
    font-size:14.5px;line-height:1.6;
  }
  .menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .menu-label{font-size:10.5px;letter-spacing:.2em;color:var(--ink-soft);margin:0;}
  .menu-close{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-height:44px;min-width:44px;margin-right:-10px;padding:0 10px;
    color:var(--ink);font-size:12.5px;text-decoration:none;
  }
  .menu-close:hover{color:var(--accent);}
  /* ✕ は2本の線で描く。文字にすると書体によって大きさが揃わない。 */
  .menu-x{position:relative;display:inline-block;width:13px;height:13px;}
  .menu-x::before,.menu-x::after{
    content:"";position:absolute;left:0;top:6px;width:13px;height:1.5px;
    background:currentColor;
  }
  .menu-x::before{transform:rotate(45deg);}
  .menu-x::after{transform:rotate(-45deg);}

  .menu-list{list-style:none;margin:4px 0 0;padding:0;}
  .menu-list li + li{border-top:1px solid var(--rule);}
  .menu-list a,.menu-list .is-current{
    display:flex;align-items:center;min-height:44px;padding:9px 2px;
    font-size:14.5px;line-height:1.5;
  }
  .menu-list a{color:var(--ink);text-decoration:none;}
  .menu-list a:hover{color:var(--accent);text-decoration:underline;
    text-underline-offset:3px;}
  .menu-list .is-current{color:var(--ink);font-weight:700;}

  /* 焦点の輪。キーボードで辿る人には、これが唯一の居場所の手がかり。 */
  .menu-open:focus-visible,.menu-close:focus-visible,
  .menu-list a:focus-visible,a:focus-visible{
    outline:3px solid var(--accent);outline-offset:2px;
  }

  @media (max-width:759px){
    /* PCは右上（慣例）、760px未満は右下（片手で親指が届く） */
    .menu-open{top:auto;bottom:14px;right:14px;}
    .menu-panel{top:auto;bottom:14px;right:14px;left:14px;width:auto;max-width:none;}
  }
  /* ▲ メニュー ここまで */

/* 皮膚科を探すページ（依頼 20261010_08 §3）。
   1447ページあるので、この塊もページに埋め込まず外部CSSに置く。 */
.geo{margin:0 0 var(--s3);padding:var(--s3);background:var(--tint);
  border:1px solid var(--rule);}
.geo p{margin:0 0 var(--s2);}
.geo p:last-child{margin-bottom:0;}
.geo button{
  font:inherit;font-size:15px;min-height:48px;padding:0 var(--s3);
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  cursor:pointer;
}
.geo button:hover{color:var(--accent);border-color:var(--accent);}
.geo button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.facs{list-style:none;margin:0 0 var(--s3);padding:0;}
.facs li{border-top:1px solid var(--rule);padding:var(--s2) 0;}
.facs li:last-child{border-bottom:1px solid var(--rule);}
.facs .nm{font-weight:700;}
.facs .kd{font-size:12px;color:var(--ink-soft);margin-left:.6em;}
.facs .ad,.facs .hr,.facs .nv,.facs .dist{display:block;font-size:13.5px;
  color:var(--ink-soft);}
.facs .hr a{word-break:break-all;}
/* 医療情報ネット（ナビイ）への行。押せる高さを 44px 確保する
   （一覧の行が詰まるので、リンクそのものに余白を持たせる）。 */
.facs .nv a{display:inline-block;min-height:44px;line-height:1.5;
  padding:calc((44px - 1.5em) / 2) 0;}
.facs .dist{color:var(--accent);font-weight:700;}