/* いつもの通販で買えるミードデータベース(database.meadery.jp)の色・書体・土台。第3段 M3。
   変数の名前と値は MEAD-SPEC §6.2(値を変えるときは SPEC の表も直す)。部品(ヘッダー・棚・表・フォーム)は site.css(M1)が変数を使って組む。
   layout が theme.css → site.css の順に <link> で読む(@import しない)。Web フォントは読み込まない。
   コントラスト(WCAG 2.1 の相対輝度で計算): --ink/--paper 13.9:1、--amber/--paper 4.88:1、--amber/--paper-2 4.34:1(本文の文字には使わない。
   --paper-2 の上の文字リンクは --amber-2 = 6.94:1 以上)、--band-ink/--band 8.78:1、札「広告」--ink-2/--paper-2 7.56:1、--own の地に --paper の文字 5.40:1。
   フォーカスの輪 --focus は --paper の上で 7.38:1、暗い帯の上では 1.88:1 しかないので、帯・ヒーローの中は --band-ink の輪にする。 */
:root{
  --paper:#f4ecdd;        /* 地(古紙の生成り) */
  --paper-2:#ebdfc6;      /* 少し濃い地(カード・表の帯) */
  --ink:#2b1d12;          /* 文字(焦げ茶〜墨) */
  --ink-2:#543f1c;        /* 補助の文字(ロゴの副色) */
  --amber:#8d5c00;        /* アクセント(リンク・ボタン) */
  --amber-2:#6f4700;      /* リンクの hover / 押し下げ・--paper-2 の上のリンク */
  --band:#2b1d12;         /* ヘッダー・フッターの帯 */
  --band-ink:#e3b777;     /* 帯の文字(暗い地のロゴ副色) */
  --band-amber:#d9a24a;   /* 帯のリンク・強調 */
  --line:#d8c7a6;         /* 罫線 */
  --own:#a2411f;          /* 当社製品の札・ボタン(赤褐色。琥珀と区別がつく) */
  --focus:#1f4e79;        /* フォーカスリング(青。地・琥珀と区別) */
  --font-head:"Hiragino Mincho ProN","Yu Mincho","BIZ UDPMincho","Noto Serif JP",serif;
  --font-body:system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI","Meiryo","Noto Sans JP",sans-serif;
  --gutter:16px;
}

/* ---- 土台 ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.75;overflow-wrap:anywhere}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.4;color:var(--ink)}
a{color:var(--amber)}
a:hover,a:active{color:var(--amber-2)}
img{max-width:100%;height:auto}
input,select,textarea,button{font:inherit}
input,select,textarea{font-size:16px}            /* iOS の自動ズームを避ける(16px 以上) */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
header :focus-visible,footer :focus-visible,.hero :focus-visible,.band :focus-visible{outline-color:var(--band-ink)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- 広告の札・楽天カード(kit の構造: .rk-card > a > img + .rk-body > .rk-name > a + span.ad + .rk-shop + .rk-credit) ---- */
.ad{display:inline-block;margin-left:4px;padding:0 5px;font-size:11px;line-height:1.6;font-weight:400;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:3px;vertical-align:middle;white-space:nowrap}
.rk-card{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:start;padding:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:6px}
.rk-card>a>img{display:block;width:128px;height:128px;object-fit:contain;background:#fff;border-radius:4px}
.rk-body{min-width:0;font-size:14px;line-height:1.6}
.rk-name a{color:var(--amber-2)}
.rk-shop{font-size:12px;color:var(--ink-2)}
.rk-credit{margin-top:2px;font-size:10px;line-height:1.5;color:var(--ink-2)}
.rk-credit a{color:var(--ink-2)}
/* トップの棚のタイル(左 72px) */
.rk-card--tile{grid-template-columns:72px minmax(0,1fr);gap:8px;padding:0;background:none;border:0}
.rk-card--tile>a>img{width:72px;height:72px}
.rk-card--tile .rk-body{font-size:12px}
/* 一覧のカードの写真(64px)。枠は .product-card--mead の格子に溶かす(写真は左の列・楽天の文とクレジットは右の列の下) */
.rk-card--thumb{grid-template-columns:64px minmax(0,1fr);gap:8px;padding:0;background:none;border:0}
.rk-card--thumb>a>img{width:64px;height:64px}
.rk-card--thumb .rk-body{font-size:12px}

/* ---- 一覧の絞り込み(engine/search/general/facet.js の card:"mead" が作る部品。サーバー側の先頭 48 件も同じ形) ---- */
.facet-bar{margin:0 0 8px}
.filter-input{box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px}
.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.chip-label{flex:0 0 100%;font-size:13px;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:4px 12px;font-size:14px;line-height:1.3;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:20px;cursor:pointer}
.chip:hover{border-color:var(--amber)}
.chip--on{color:var(--paper);background:var(--amber);border-color:var(--amber)}
.chip-n{font-size:12px;opacity:.85}
.chip--reset{margin-left:8px;min-height:32px;font-size:13px}
.facet-list p.lead{margin:12px 0 8px;font-size:14px;color:var(--ink-2)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.more-row{text-align:center;margin:16px 0}
.more-btn{min-height:44px;padding:8px 20px;color:var(--amber-2);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.empty-note{padding:12px;background:var(--paper-2);border-radius:6px}
.pc-rest{columns:2 14em;padding-left:1.2em}

.product-card--mead{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.product-card--mead>.pc-noimg{grid-column:1;grid-row:1 / span 2;width:64px;height:64px;background:var(--paper-2);border-radius:4px}
.product-card--mead>.rk-card--thumb{display:contents}
.product-card--mead>.rk-card--thumb>a{grid-column:1;grid-row:1 / span 2}
.product-card--mead>.rk-card--thumb>.rk-body{grid-column:2;grid-row:2}
.product-card--mead>.pc-body{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pc-name{font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.45}
.pc-maker{font-size:13px;color:var(--ink-2)}
.pc-facts{font-size:13px;color:var(--ink)}
.shop-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.shop-chip{display:inline-block;padding:0 6px;font-size:12px;line-height:1.7;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:3px}
.badge-own{display:inline-block;padding:0 6px;font-size:12px;line-height:1.7;color:var(--paper);background:var(--own);border-radius:3px}

/* ---- 検索窓の候補(engine/search/widget.js の DOM: form.sbox > input + button.sbox-go + ul.sres > li > a > .sr-name + .sr-sub) ---- */
.sbox{position:relative}
.sbox input{box-sizing:border-box;font-size:16px}
.sres{position:absolute;left:0;right:0;z-index:20;margin:4px 0 0;padding:4px 0;list-style:none;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px rgba(43,29,18,.18);max-height:70vh;overflow-y:auto}
.sres[hidden]{display:none}
.sres li>a{display:block;padding:8px 12px;color:var(--ink);text-decoration:none}
.sres li[aria-selected="true"]>a{background:var(--paper-2)}
.sres .sr-name{display:block}
.sres .sr-sub{display:block;font-size:12px;color:var(--ink-2)}
.sres mark{background:none;color:var(--amber-2);font-weight:700}
.sres .hint,.sres .none{padding:8px 12px;font-size:13px;color:var(--ink-2)}

/* ---- 375px(MEAD-SPEC §6.6)。余白 16px・横スクロールは当社の棚だけ ---- */
@media (max-width:599px){
  main{padding-left:var(--gutter);padding-right:var(--gutter)}
  .site-header .logo img,.site-header img.logo{height:40px;width:auto}
  .site-header nav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .site-header nav>*{flex:0 0 auto}
  .site-header nav::-webkit-scrollbar{display:none}
  .hero .sbox,.sbox--hero{width:100%}
  table.facts{width:100%;table-layout:fixed}
  table.facts th{width:7em}
  .product-grid{grid-template-columns:minmax(0,1fr)}
  .own-shelf .own-tiles,.own-shelf>ul,.own-shelf>ol{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;-webkit-overflow-scrolling:touch}
  .own-tile{flex:0 0 85%;scroll-snap-align:start}
  form.req input,form.req select,form.req textarea{width:100%;box-sizing:border-box;font-size:16px}
  form.req .btn,form.req button{min-height:44px}
  .pc-rest{columns:1}
}