/* ハーブティーの注意書き：昔の薬袋と、薬局の引き出しのラベル */
:root{
  --paper:#f3ecdb; --sheet:#fbf6e9; --ink:#1f2a24; --green:#1f3d2f; --leaf:#4f7a52;
  --shu:#b8402a; --karashi:#b98a1b; --hai:#6f746c; --line:#cdbf9f; --kraft:#d9c7a0;
  --mincho:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --gothic:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-size:17px;line-height:1.95;
  background-image:radial-gradient(rgba(120,96,50,.07) 1px,transparent 1.2px);background-size:7px 7px}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}
a{color:var(--green);text-underline-offset:3px}
a:hover{color:var(--shu)}
img{max-width:100%;height:auto;display:block}

header.site{background:var(--green);color:#fbf6e9;border-bottom:5px double var(--kraft)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;color:#fbf6e9;text-decoration:none;font-family:var(--mincho);font-weight:900;font-size:21px;letter-spacing:.06em}
.logo svg{width:32px;height:36px;flex:none}
nav.top{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:14px}
nav.top a{color:#e9dfc4;text-decoration:none;padding:3px 0;border-bottom:1px solid transparent}
nav.top a:hover{border-bottom-color:#e9dfc4;color:#fff}

main{padding-top:22px;padding-bottom:56px}
.crumb{font-size:13px;color:var(--hai);margin-bottom:14px}
h1{font-family:var(--mincho);font-weight:900;font-size:clamp(25px,5.4vw,36px);line-height:1.5;margin:.2em 0 .5em;letter-spacing:.02em;color:var(--green)}
h2{font-family:var(--mincho);font-weight:900;font-size:clamp(21px,4.4vw,26px);line-height:1.55;margin:2.4em 0 .8em;padding:.3em 0 .3em .8em;border-left:9px solid var(--green);border-bottom:1px solid var(--line);position:relative}
h2::after{content:"";position:absolute;left:-9px;bottom:-1px;width:9px;height:9px;background:var(--shu)}
h3{font-family:var(--mincho);font-weight:700;font-size:19px;line-height:1.6;margin:1.8em 0 .5em}
p{margin:.9em 0}
.lead{font-size:18px}
.meta{font-size:13px;color:var(--hai);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:6px 0;line-height:1.7}
.small{font-size:14px;color:#4c524b;line-height:1.8}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.12em;border:1px solid var(--green);padding:1px 10px;color:var(--green);background:var(--sheet)}
ul.plain{padding-left:1.2em}
ul.plain li{margin:.55em 0}
ol{padding-left:1.5em}
ol li{margin:.5em 0}

/* トップ */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;margin-bottom:10px}
.hero h1{font-size:clamp(30px,7vw,46px);line-height:1.42}
.ph{margin:0}
.ph img{border:1px solid var(--green);padding:6px;background:var(--sheet);box-shadow:6px 7px 0 var(--kraft)}
.ph figcaption{font-size:11.5px;color:var(--hai);margin-top:10px;line-height:1.5}
.hero-ph img{transform:rotate(1.6deg)}

/* 薬袋 */
.envelope{background:var(--kraft);padding:16px 14px 18px;border:1px solid #a8925f;margin:26px 0;position:relative;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,transparent 2px 9px)}
.envelope::before{content:"内用";position:absolute;right:16px;top:-15px;background:var(--shu);color:#fff;font-family:var(--mincho);font-weight:900;padding:1px 14px;letter-spacing:.3em;font-size:15px}
.envelope h2{border:0;margin:.1em 0 .5em;padding:0;font-size:22px;color:var(--green)}
.envelope h2::after{display:none}
.sheet{background:var(--sheet);border:1px solid var(--green);outline:1px solid var(--green);outline-offset:-5px;padding:20px 18px}
.pick{display:flex;flex-wrap:wrap;gap:10px}
.chip{font:inherit;font-weight:700;font-size:16px;padding:11px 18px;background:var(--sheet);color:var(--green);border:2px solid var(--green);cursor:pointer;min-height:48px;box-shadow:3px 3px 0 var(--green);transition:transform .08s,box-shadow .08s}
.chip:hover{background:#eef0df}
.chip[aria-pressed="true"]{background:var(--green);color:#fbf6e9;transform:translate(3px,3px);box-shadow:none}
.chip:focus-visible,a:focus-visible{outline:3px solid var(--shu);outline-offset:2px}
.hint{color:var(--hai);font-size:15px}
#result h3{margin-top:1.2em}

/* ラベル（引き出しの札） */
.labels{display:grid;gap:14px;margin:16px 0}
.label{background:var(--sheet);border:1px solid var(--green);border-left:8px solid var(--hai);padding:13px 16px 12px;position:relative}
.label header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px dotted var(--line);padding-bottom:6px;margin-bottom:6px}
.label h3{margin:0;font-size:19px}
.label h3 small{display:block;font-family:var(--gothic);font-weight:400;font-size:12px;color:var(--hai)}
.label h3 a{text-decoration:none}
.label p{margin:.4em 0}
.l-stop{border-left-color:var(--shu)} .l-ask{border-left-color:var(--karashi)} .l-food{border-left-color:var(--leaf)}
.orig{font-size:12.5px;line-height:1.6;color:#4f564e;background:rgba(31,61,47,.05);padding:7px 10px;border-left:2px solid var(--line);font-family:Georgia,"Times New Roman",serif}
.orig span{font-family:var(--gothic);font-size:11px;background:var(--green);color:#fbf6e9;padding:0 6px;margin-right:8px;letter-spacing:.1em}
blockquote.jp{margin:12px 0;padding:10px 14px;background:var(--sheet);border-left:4px solid var(--green);font-family:var(--mincho);font-weight:700;font-size:16px;line-height:1.85}

/* 判子 */
.stamp{display:inline-block;flex:none;font-family:var(--mincho);font-weight:900;font-size:14px;letter-spacing:.08em;padding:1px 9px;border:2.5px solid currentColor;border-radius:3px;transform:rotate(-4deg);white-space:nowrap;line-height:1.6;background:rgba(255,255,255,.35)}
.s-stop{color:var(--shu)} .s-ask{color:var(--karashi)} .s-unknown{color:var(--hai)} .s-none{color:#8d9189;border-style:dashed} .s-food{color:var(--leaf)}
.legend{list-style:none;padding:0;display:grid;gap:8px;font-size:14.5px;line-height:1.7}
.legend li{display:grid;grid-template-columns:8.6em 1fr;align-items:center;gap:10px}
.legend .stamp{justify-self:start}
.note{background:var(--sheet);border:1px dashed var(--green);padding:12px 16px;font-size:15px;line-height:1.85}
.warn{background:#f7e4dc;border:2px solid var(--shu);padding:12px 16px}

/* 表 */
.tablewrap{overflow-x:auto;margin:18px 0;border:1px solid var(--green);background:var(--sheet)}
table.matrix{border-collapse:collapse;width:100%;min-width:600px;font-size:15px}
.matrix th,.matrix td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:center}
.matrix thead th{background:var(--green);color:#fbf6e9;font-weight:700;font-size:13.5px}
.matrix tbody th{text-align:left;font-family:var(--mincho);font-weight:700;white-space:nowrap;position:sticky;left:0;background:var(--sheet)}
.matrix .stamp{font-size:12.5px}

/* カード */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}
.card{display:block;background:var(--sheet);border:1px solid var(--green);padding:13px 15px;text-decoration:none;color:var(--ink);box-shadow:4px 4px 0 var(--kraft)}
.card b{display:block;font-family:var(--mincho);font-size:18px;color:var(--green);line-height:1.5}
.card span{font-size:13.5px;color:#4c524b;line-height:1.6;display:block;margin-top:4px}
.card:hover{box-shadow:4px 4px 0 var(--shu)}
ul.drug{columns:2;column-gap:28px;padding-left:1.2em;background:var(--sheet);border:1px solid var(--line);padding:14px 16px 14px 2.2em}
ul.drug li{break-inside:avoid;margin:.2em 0}

/* ハーブ別 */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:18px 0}
.hcard{display:block;background:var(--sheet);border:1px solid var(--green);padding:7px 7px 10px;text-decoration:none;color:var(--ink);box-shadow:4px 4px 0 var(--kraft)}
.hcard img{aspect-ratio:3/2;object-fit:cover;width:100%}
.hcard b{display:block;font-family:var(--mincho);font-size:17px;margin:8px 4px 0;color:var(--green)}
.hcard small{display:block;font-size:11.5px;color:var(--hai);margin:0 4px;line-height:1.5}
.hcard:hover{box-shadow:4px 4px 0 var(--shu)}
.mini{display:flex;gap:5px;margin:7px 4px 0}
.d{width:13px;height:13px;border-radius:50%;background:var(--hai);display:block}
.d-stop{background:var(--shu)} .d-ask{background:var(--karashi)} .d-food{background:var(--leaf)} .d-none{background:#b9bcb4}
.herbhead{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start;margin:14px 0}
.latin{font-family:var(--mincho);font-weight:700;margin:0;border-bottom:1px solid var(--green);padding-bottom:4px}
.latin i{display:block;font-family:Georgia,serif;font-weight:400;font-size:14px;color:var(--hai)}
.others{display:flex;flex-wrap:wrap;gap:8px}
.others a{background:var(--sheet);border:1px solid var(--green);padding:3px 12px;text-decoration:none;font-size:15px}

/* 姉妹サイト・広告・出典 */
.sister{margin:30px 0;background:#eef0df;border:1px solid var(--leaf);padding:16px 18px;position:relative}
.sister-h{font-family:var(--mincho);font-weight:900;font-size:19px;margin:0 0 4px;color:var(--green)}
.sister-h span{font-family:var(--gothic);font-size:11.5px;font-weight:700;background:var(--leaf);color:#fff;padding:1px 8px;margin-right:10px;vertical-align:middle;letter-spacing:.08em}
.sister ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.sister li a{display:block;background:var(--sheet);border:1px solid var(--line);padding:9px 13px;text-decoration:none;line-height:1.55}
.sister li b{display:block}
.sister li small{color:#4c524b;font-size:13px}
.sister li a::after{content:"feevera.com で開く →";display:block;font-size:11.5px;color:var(--leaf);margin-top:2px}
.ad{margin:24px 0;border:1px solid var(--line);background:#fff;padding:12px 16px}
.pr{font-size:11px;border:1px solid var(--hai);color:var(--hai);padding:0 6px;margin-right:10px}
.src{margin-top:46px;border-top:3px double var(--green);padding-top:6px;font-size:14px}
.src h2{font-size:17px;border:0;padding:0;margin:.8em 0 .4em}
.src h2::after{display:none}
.src ul{padding-left:1.2em;line-height:1.75}
footer.site{background:var(--green);color:#e9dfc4;font-size:13.5px;line-height:1.8;padding:18px 0 26px;border-top:5px double var(--kraft)}
footer.site a{color:#fbf6e9}
footer.site p{margin:.4em 0}

@media(max-width:680px){
  body{font-size:16px}
  .hero,.herbhead{grid-template-columns:1fr}
  .hero-ph{max-width:420px}
  ul.drug{columns:1}
  .legend li{grid-template-columns:1fr;gap:2px}
  nav.top{font-size:13px;gap:0 12px}
}
@media(prefers-reduced-motion:reduce){.chip{transition:none}}