/* いつもの通販で買えるミードデータベースの骨と部品(第3段 M1)。色・書体は theme.css(M3)の変数を使うだけ(MEAD-SPEC §6.2)。
   layout が theme.css → site.css の順に読む。Web フォントは読み込まない。375px の骨は theme.css のメディアクエリ。 */

/* ---- 骨 ---- */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter,16px)}
main{display:block;max-width:1080px;margin:0 auto;padding:16px var(--gutter,16px) 48px}
main h1{font-size:28px;margin:16px 0 8px}
main h2{font-size:21px;margin:32px 0 12px}
main h3{font-size:17px;margin:16px 0 8px}
p{margin:0 0 12px}

/* ---- ヘッダー(暗い帯) ---- */
.site-header{background:var(--band);color:var(--band-ink)}
.site-header a{color:var(--band-ink);text-decoration:none}
.site-header a:hover{color:var(--band-amber)}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:6px}
.site-header .logo{display:inline-flex;align-items:center;min-height:44px}
.site-header .logo img{display:block;height:48px;width:auto}
.logo-text{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.3}
.site-header .pr{flex:0 0 auto;font-size:12px;padding:1px 8px;border:1px solid var(--band-amber);border-radius:3px;color:var(--band-ink)}
.header-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-bottom:10px}
.site-nav{display:flex;gap:4px 16px;flex-wrap:wrap}
.site-nav a{display:inline-flex;align-items:center;min-height:40px;font-size:15px}
.sbox--header{flex:1 1 260px;display:flex;max-width:420px;margin-left:auto}
.sbox input{flex:1 1 auto;min-width:0;min-height:40px;padding:6px 10px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px 0 0 6px}
.sbox .sbox-go{flex:0 0 auto;min-height:40px;padding:6px 14px;color:var(--paper);background:var(--amber);border:1px solid var(--amber);border-radius:0 6px 6px 0;cursor:pointer}
.sbox .sbox-go:hover{background:var(--amber-2)}

/* ---- ヒーロー(トップ) ---- */
.hero{margin:0 calc(-1 * var(--gutter,16px)) 24px;padding:28px var(--gutter,16px) 32px;background:var(--band) url("/assets/frames/hero.webp") left center/cover no-repeat;color:var(--band-ink);position:relative}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,29,18,.35),rgba(43,29,18,.85) 45%)}
.hero>*{position:relative;max-width:560px;margin-left:auto}
.hero .hero-logo{display:block;width:100%;max-width:520px;height:auto;margin:0 0 12px auto}
.hero .lead{font-size:17px;line-height:1.8;color:var(--band-ink)}
.sbox--hero{display:flex;width:100%}
.sbox--hero input{min-height:48px}
.sbox--hero .sbox-go{min-height:48px}

/* ---- 当社製品の棚 ---- */
.own-shelf h2{margin-bottom:2px}
.own-shelf-sub{font-size:13px;color:var(--ink-2)}
.own-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.own-tile{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:12px;background:var(--paper-2) url("/assets/frames/buy.webp") center/cover no-repeat;border:1px solid var(--line);border-radius:6px}
.own-tile .rk-card--tile{flex:0 0 auto}
.own-tile-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.own-name{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--amber-2)}
.own-series,.own-facts{font-size:13px;color:var(--ink-2)}
.own-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* ---- ボタン(通販) ---- */
.buy{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:6px 14px;font-weight:700;text-decoration:none;color:var(--paper);background:var(--amber);border:1px solid var(--amber);border-radius:6px}
.buy:hover{color:var(--paper);background:var(--amber-2)}
.buy--own{background:var(--own);border-color:var(--own)}
.buy--own:hover{background:#7f3218}
.buy .ad{margin-left:6px}
section.buy{display:block;min-height:0;padding:0;font-weight:400;color:var(--ink);background:none;border:0}
.buy-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.buy-pending{margin:0 0 8px}
.shop-chip--nolink{font-size:13px}
.affiliate-note{font-size:12px;color:var(--ink-2)}

/* ---- 銘柄ページ ---- */
.h1-en{display:block;font-size:15px;font-weight:400;color:var(--ink-2)}
.h1-sub{margin-top:-4px;color:var(--ink-2)}
main h1+.badge-own{margin:0 0 12px}
.intro{font-size:16px}
table.facts{border-collapse:collapse;margin:8px 0 16px;min-width:min(100%,480px)}
table.facts th,table.facts td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.facts th{width:7em;font-weight:400;color:var(--ink-2);background:var(--paper-2)}
table.facts td a{color:var(--amber-2)}
main>.rk-card{max-width:560px;margin:16px 0}
.sources ul,.related ul.name-list{padding-left:1.2em}
.sources li{font-size:14px;overflow-wrap:anywhere}
.request-link{margin-top:24px;font-size:14px}

/* ---- 入口・札の並び ---- */
.entries .entry{margin:0 0 12px}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags a{display:inline-flex;align-items:center;min-height:40px;padding:4px 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;color:var(--amber-2);text-decoration:none}
.tags a:hover{border-color:var(--amber)}
.name-list{columns:2 14em}

/* ---- パンくず ---- */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:13px;color:var(--ink-2)}
.crumbs li+li::before{content:"›";margin-right:4px}

/* ---- メーカー ---- */
.maker-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.maker-card{display:flex;flex-direction:column;gap:2px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.maker-name{font-family:var(--font-head);font-weight:700;font-size:17px}
.maker-own,.maker-place{font-size:12px;color:var(--ink-2)}
.maker-products{font-size:13px}

/* ---- 名前から ---- */
.az-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.az-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;color:var(--amber-2);text-decoration:none}
.az-list{padding-left:1.2em}
.az-maker{margin-left:8px;font-size:13px;color:var(--ink-2)}

/* ---- このサイトについて・Q&A ---- */
.faq dt{font-weight:700;margin:12px 0 4px}
.faq dd{margin:0 0 12px}
.toc ol{padding-left:1.4em}

/* ---- フッター(暗い帯) ---- */
.site-footer{margin-top:48px;padding:24px 0 32px;background:var(--band);color:var(--band-ink);font-size:14px}
.site-footer a{color:var(--band-amber)}
.site-footer p{margin:0 0 10px}
.site-footer .age-warning{font-weight:700}
.site-footer .banners{margin:16px 0}
.site-footer .banners-title{font-weight:700}
.banner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.banner{position:relative;display:block;overflow:hidden;border-radius:6px;color:var(--paper);text-decoration:none}
.banner img{display:block;width:100%;height:auto}
.banner-text{position:absolute;left:0;top:0;bottom:0;width:60%;display:flex;flex-direction:column;justify-content:center;padding:8px 12px;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,0))}
.banner-text strong{font-size:14px;line-height:1.4}
.banner-text small{font-size:11px;line-height:1.4}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0}
.footer-links a{display:inline-flex;align-items:center;min-height:40px}
.site-footer .latin{letter-spacing:.2em;font-size:12px;color:var(--band-ink)}

@media (max-width:599px){
  main h1{font-size:23px}
  .site-header .logo img{height:40px}
  .sbox--header{max-width:none;margin-left:0}
  .hero{background-image:url("/assets/frames/hero-375.webp")}
  .hero>*{max-width:none}
  .own-tiles{grid-template-columns:none}
  .name-list{columns:1}
}

/* 掲載の要望フォーム(/request/・/request/done/。M2 のページ。JS なしでも使える) */
form.req{max-width:640px;margin:16px 0 24px}
form.req .field{margin:0 0 16px}
form.req label{display:block;font-weight:700;margin:0 0 4px}
form.req .req-mark{display:inline-block;margin-left:6px;padding:0 6px;font-size:12px;line-height:20px;font-weight:700;color:var(--paper);background:var(--amber);border-radius:4px;vertical-align:middle}
form.req .hint{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
form.req .hint.req-after{margin:-8px 0 12px}
form.req input[type=text],form.req input[type=url]{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:8px 10px;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px}
form.req input:focus-visible,form.req .btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
form.req fieldset.shops{margin:0 0 16px;padding:8px 12px 4px;border:1px solid var(--line);border-radius:6px}
form.req fieldset.shops legend{font-weight:700;padding:0 4px}
form.req .shop{padding:4px 0}
form.req .shop>label{display:inline-flex;align-items:center;min-height:44px;margin:0;padding-right:8px;font-weight:700}
form.req .shop>input[type=checkbox]{width:22px;height:22px;margin:0 8px 0 0;vertical-align:middle;accent-color:var(--amber)}
form.req .url{margin:0 0 8px 30px}
form.req .url label{font-weight:400}
form.req .url[hidden]{display:none}
form.req .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.req .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 24px;font-size:16px;font-weight:700;color:var(--paper);background:var(--amber);border:1px solid var(--amber);border-radius:6px;cursor:pointer}
.done-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:0;list-style:none}
.done-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;background:var(--paper-2);border:1px solid var(--line);border-radius:6px;color:var(--amber-2);text-decoration:none}
@media (max-width:480px){form.req .url{margin-left:0}}