/* THE HERBS 取引先向けご案内ページ 共通スタイル
   レイアウト: 1本の読み物カラム（最大720px）。商品は写真＋情報の横並びカード、狭い画面では縦積み */
:root{
  --bg:#f5f6f2; --surface:#ffffff; --fg:#1f2a1f; --muted:#5c665a; --line:#dbe0d5;
  --brand:#223a23; --brand-fg:#ffffff; --accent:#3d6b47; --accent-soft:#e4ece2;
  --notice:#8a4b14; --notice-soft:#f7ecdf;
  --f-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141914; --surface:#1c221b; --fg:#e5eae1; --muted:#9ca79a; --line:#323b30;
  --brand:#2d4a2e; --brand-fg:#eef3ea; --accent:#94c49a; --accent-soft:#243326;
  --notice:#e8b277; --notice-soft:#352a1d; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141914; --surface:#1c221b; --fg:#e5eae1; --muted:#9ca79a; --line:#323b30;
  --brand:#2d4a2e; --brand-fg:#eef3ea; --accent:#94c49a; --accent-soft:#243326;
  --notice:#e8b277; --notice-soft:#352a1d; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.9}
img{max-width:100%;display:block}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.site-bar{background:var(--brand);color:var(--brand-fg);padding-block:12px;padding-inline:20px}
.site-bar .in{max-width:720px;margin:0 auto;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.site-bar .logo{font-family:var(--f-display);font-weight:700;letter-spacing:.12em;font-size:15px}
.site-bar .kind{font-size:12px;letter-spacing:.08em;opacity:.85}

main{max-width:720px;margin:0 auto;padding-inline:20px;padding-block:36px 64px;display:grid;gap:40px}

.head{display:grid;gap:10px}
.head .issued{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px}
.head h1{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,5.4vw,32px);line-height:1.45;margin:0;text-wrap:balance}
.lead{display:grid;gap:12px}
.lead p{margin:0}

.banner{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px 22px;display:grid;gap:4px}
.banner .label{font-size:12px;letter-spacing:.14em;color:var(--accent);font-weight:700}
.banner .main{font-family:var(--f-display);font-size:clamp(20px,4.6vw,26px);font-weight:700;line-height:1.5}
.banner .sub{color:var(--muted);font-size:14px}
.banner.end .label{color:var(--notice)}

section{display:grid;gap:18px}
h2{font-family:var(--f-display);font-weight:700;font-size:21px;margin:0;padding-bottom:8px;border-bottom:1px solid var(--line);text-wrap:balance}
section p{margin:0}

.callout{background:var(--notice-soft);border-radius:8px;padding:14px 18px;display:grid;gap:6px;font-size:14px}
.callout strong{color:var(--notice)}
.callout ul{margin:0;padding-left:1.2em}

.products{display:grid;gap:16px}
.product{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start}
.product .photo{background:#ffffff;border-radius:6px;overflow:hidden;aspect-ratio:1/1;display:grid;place-items:center;max-width:100%}
.product .photo img{width:100%;height:100%;object-fit:contain}
.product .info{display:grid;gap:8px;min-width:0}
.product .en{font-size:12px;letter-spacing:.1em;color:var(--muted)}
.product .name{font-family:var(--f-display);font-size:20px;font-weight:700;line-height:1.4;margin:0}
.product .tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;padding:0 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-weight:500;line-height:1.9}
.tag.limit{background:var(--notice-soft);color:var(--notice)}
.product .desc{margin:0}
.product .ing{font-size:13px;color:var(--muted);margin:0}
.price{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline;padding-top:8px;border-top:1px dashed var(--line);font-variant-numeric:tabular-nums}
.price .salon{font-weight:700;font-size:18px}
.price .salon small,.price .retail small{font-weight:400;font-size:12px;color:var(--muted);margin-right:6px}
.price .retail{font-weight:700;font-size:18px}
.codes{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.notes{margin:0;padding-left:1.2em;font-size:13px;color:var(--muted)}

.spec{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.spec dt,.spec dd{margin:0;padding:12px 18px;border-bottom:1px solid var(--line)}
.spec dt{font-size:13px;color:var(--muted);background:var(--accent-soft)}
.spec dd{font-weight:700}
.spec dt:last-of-type,.spec dd:last-of-type{border-bottom:0}

.successor{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px}
.successor .photo{background:#ffffff;border-radius:6px;overflow:hidden}
.successor .label{font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:700}
.successor .name{font-family:var(--f-display);font-size:22px;font-weight:700;margin:0}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:8px;background:var(--brand);color:var(--brand-fg)}
.btn.sub{background:transparent;color:var(--fg);border:1px solid var(--line);font-weight:500}
.btn:hover{filter:brightness(1.08)}

.closing{margin:0}

.site-foot{border-top:1px solid var(--line);padding-block:24px 40px;padding-inline:20px}
.site-foot .in{max-width:720px;margin:0 auto;font-size:12px;color:var(--muted);display:grid;gap:4px}

@media (max-width:560px){
  .product{grid-template-columns:1fr}
  .product .photo{max-width:260px;justify-self:center;width:100%}
  .spec dl{grid-template-columns:1fr}
  .spec dt{border-bottom:0;padding-bottom:4px}
}
.product .more{margin:0;font-size:14px;font-weight:500}