/* Meliseus — shared styles. Colours taken from the 2025 PDF catalogues. */
:root{
  color-scheme:light dark;
  --on-orange:#231f20;
  --tab:#231f20;
  --line:#eeeeee;
  --hover:#c37a12;
  --ink:#231f20;
  --choco:#211411;
  --orange:#f9a72d;
  --cream:#fde9ca;
  --plum:#901350;
  --plum-light:#e3c4d3;
  --muted:#5b5557;
  --page:#ffffff;
  --max:900px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Source Sans 3","Myriad Pro","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px;line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[lang="ja"]{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- site bar (sub-pages) ---------- */
.topbar{display:flex;gap:8px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.topbar .brand img{height:30px;width:auto}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.topbar nav a{text-decoration:none;font-weight:600}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--hover)}

/* ---------- section heading with the black tab (as in the PDF) ---------- */
.sec-title{position:relative;margin:34px 0 10px;padding-left:0}
.sec-title h2{margin:0;font-size:22px;line-height:1.2;font-weight:700}
.sec-title h2 .ja{display:block;font-weight:400;font-size:20px}
.tab-mark{display:flex;align-items:stretch;gap:12px;margin:30px 0 8px}
.tab-mark::before{content:"";flex:0 0 52px;background:var(--tab);margin-left:-16px}
.tab-mark h2{margin:0;font-size:22px;line-height:1.15}
.tab-mark h2 .ja{font-weight:400;font-size:22px;margin-right:.35em}

.lead{color:var(--muted);margin:6px 0 0}
.wave{margin:28px auto;width:150px}

/* ---------- product tables ---------- */
.table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
table.plist{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;font-size:14px}
.plist caption{text-align:left;padding:0;margin:0}
.plist thead th{background:var(--orange);color:var(--on-orange);font-weight:600;text-align:center;vertical-align:bottom;
  padding:6px 6px 5px;border-left:2px solid var(--page);line-height:1.2}
.plist thead tr:last-child th:first-child,.plist thead .t-title{border-left:0;text-align:left;position:sticky;left:0;z-index:2}
@media (max-width:640px){.plist tbody th{max-width:150px}}
.plist thead tr.group th{font-weight:700;border-bottom:2px solid var(--page)}
.plist thead .ja{display:block;font-weight:400;font-size:12px}
.plist tbody th{position:sticky;left:0;z-index:1;background:var(--page);text-align:left;font-weight:400;padding:3px 8px;line-height:1.15}
.plist tbody th .ja{display:block;font-size:13px}
.plist tbody th .en{display:block;font-size:12px;color:var(--muted)}
.plist td{text-align:center;padding:3px 4px}
.plist tbody tr:nth-child(even) th,.plist tbody tr:nth-child(even) td{background:var(--cream)}
.plist td img{width:32px;height:auto;margin:0 auto;display:inline-block}
.plist td .no{color:transparent;font-size:0}
.plist.plum thead th{background:var(--plum);color:#fff}
.plist.plum tbody tr:nth-child(even) th,.plist.plum tbody tr:nth-child(even) td{background:var(--plum-light)}

/* chocolate table: cream bars with white gaps, bold caps names */
table.choco{border-spacing:0 7px;min-width:600px}
.choco tbody th,.choco tbody td{background:var(--cream)}
.choco tbody th{white-space:nowrap;padding:3px 10px}
.choco tbody th .ja{display:inline;font-size:16px;margin-right:.5em}
.choco tbody th .en{display:inline;font-size:15px;font-weight:700;color:var(--ink);text-transform:uppercase}
.choco td img{width:12px}
.choco thead th{text-align:left;font-size:13px;vertical-align:top;padding:8px}
.choco thead .pct{display:block;font-size:12px}

.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:6px}
.legend img{width:22px}

/* ---------- contract manufacturing block ---------- */
.contract{display:grid;gap:14px;justify-items:center;text-align:center;margin:40px 0 10px}
.contract h2{font-size:15px;font-weight:600;margin:0;letter-spacing:.01em}
.contract h2 .ja{display:block;font-weight:400}
.contract p{margin:0;font-size:14px}
.contract p .ja{display:block}
.contract .boxes{display:flex;gap:10px;justify-content:center}
.contract .boxes img{width:120px}
.contract .pack{width:min(360px,100%)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:36px;padding:24px 0 30px}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.foot-grid .logo{width:150px;margin-bottom:8px}
.contact{font-style:normal;display:grid;grid-template-columns:auto auto;gap:0 28px;font-size:14px;line-height:1.45;justify-content:start}
.contact a{text-decoration:none}
.contact a:hover{text-decoration:underline}
.contact strong{font-weight:700}
.badges{width:140px}
.foot-deco{width:150px;margin:18px auto 0}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-top:16px}
.dl{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px;font-size:14px;font-weight:600;text-decoration:none}
.dl:hover{background:var(--ink);color:var(--page)}

@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .tab-mark::before{flex-basis:28px}
  .tab-mark h2,.tab-mark h2 .ja{font-size:19px}
}

/* PDF-style table titles and group headers */
.plist .t-title{text-align:left;vertical-align:top;border-left:0}
.plist .t-title h3{margin:0;font-size:14px;font-weight:700;line-height:1.25}
.plist .t-title h3 .ja{display:block;font-weight:400;font-size:13px}
.plist .t-title small{font-size:11px;font-weight:600}
.plist thead tr.group th:not(.t-title){font-weight:700;font-size:13px}
.ptable{margin-top:22px}
h1 .h1-sub{display:block;color:var(--ink);font-size:20px;margin-top:2px}

/* picture wrappers (light/dark image pairs) should not change layout */
picture{display:contents}

/* ---------- dark theme: follows the visitor's system setting ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#ece5df;
    --muted:#b3aaa5;
    --page:#231f20;
    --cream:#3a3027;
    --plum-light:#4b2839;
    --line:#3d3638;
    --tab:var(--orange);
    --hover:var(--orange);
  }
  .badges{background:#fff;padding:6px;border-radius:8px}
  .contract .boxes img{background:#fff;padding:6px;border-radius:10px}
}

/* ---------- single-language pages (English at /, Japanese at /ja/) ---------- */
html[lang="ja"] body{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
html[lang="ja"] .lead{line-height:1.8}
.plist tbody th .pname{display:block;font-size:14px}
.choco tbody th .pname{display:inline;font-size:15px;font-weight:700;text-transform:uppercase}
html[lang="ja"] .choco tbody th .pname{font-size:16px;font-weight:400}
.fi-h1{color:var(--orange);font-weight:700;font-size:26px;margin:22px 0 4px}
html[lang="ja"] .fi-h1{font-weight:400}
.fi-h1 .h1-sub{font-weight:700}
.lang-switch{border:1.5px solid currentColor;border-radius:999px;padding:0 10px;line-height:1.6;font-weight:600;text-decoration:none}
.topbar nav{align-items:center}
/* Japanese column labels have no spaces: keep each on one line instead of breaking mid-word */
html[lang="ja"] .plist:not(.choco) thead tr:last-child th{white-space:nowrap;font-size:13px}
html[lang="ja"] .choco thead th{word-break:keep-all;overflow-wrap:anywhere}
html[lang="ja"] .plist:not(.choco) tbody th{min-width:8.5em}
@media (max-width:640px){
  .topbar nav{gap:4px 14px;font-size:14px}
}
/* flags in the language switch */
.lang-switch{display:inline-flex;align-items:center;gap:6px}
.lang-switch .flag{display:inline-block;height:12px;width:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
@media (prefers-color-scheme: dark){.lang-switch .flag{box-shadow:0 0 0 1px rgba(255,255,255,.25)}}

/* light/dark image pairs: switched together with the page theme */
@media not (prefers-color-scheme: dark){ img.dk{display:none !important} }
@media (prefers-color-scheme: dark){ img.lt{display:none !important} }

/* Japanese flag: black frame in light mode so the white flag is easy to recognise */
.lang-switch .flag-jp{box-shadow:0 0 0 1px #000}
@media (prefers-color-scheme: dark){ .lang-switch .flag-jp{box-shadow:0 0 0 1px rgba(255,255,255,.25)} }

/* frozen first column: cover the page margin to its left, so columns scrolled underneath it never show there */
.plist tbody th,
.plist thead tr:last-child th:first-child,
.plist thead .t-title{box-shadow:-16px 0 0 var(--page)}

/* ---------- chocolate table (2026 list): coloured drops, sections, cocoa column ---------- */
.drop{display:inline-block;vertical-align:middle;width:14px;height:20px}
.drop path{stroke-width:2.5}
.drop-bitter path{fill:#2b1710;stroke:#2b1710}
.drop-dark path{fill:#5b3320;stroke:#5b3320}
.drop-milk path{fill:#a86b3c;stroke:#a86b3c}
.drop-white path{fill:#f6ecd8;stroke:#8a7350}
.drop-mix path{fill:url(#choc-mix);stroke:#5b3320}
@media (prefers-color-scheme: dark){ .drop path{stroke:#e8d6b8} }
.choco td .drop,.choco td img{width:14px}
.choco thead th{text-align:center;vertical-align:bottom}
.choco thead th:first-child,.choco thead th.cocoa-h{text-align:left}
.choco thead .col-drop{display:block;margin:0 auto 4px}
.choco thead .col-drop .drop{width:16px;height:23px}
table.choco{border-spacing:0 5px;min-width:820px}
.choco tbody th{white-space:normal;min-width:230px}
.choco tbody th .pname{text-transform:none;font-weight:600;font-size:15px}
.choco td.cocoa{text-align:left;font-size:14px;color:var(--muted);white-space:nowrap;padding:3px 10px}
.choco tr.sec-row th{position:static;box-shadow:none;background:var(--choco);color:var(--orange);
  font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;max-width:none}
html[lang="ja"] .choco tr.sec-row th{letter-spacing:0}
.choco tr.sec-row .sec-label{position:sticky;left:16px}
.choco tbody tr.sec-row + tr th,.choco tbody tr.sec-row + tr td{border-top:4px solid var(--page)}
@media (prefers-color-scheme: dark){ .choco tr.sec-row th{background:#140c0a} }
.choco thead th:not(:first-child):not(.cocoa-h){min-width:96px}
.choco th.cocoa-h,.choco td.cocoa{width:1%}
.choco td.cocoa{white-space:normal;width:150px;min-width:150px;line-height:1.3}
.choco th.cocoa-h{width:150px}
@media (prefers-color-scheme: dark){
  .drop{background:#f3e7d3;border-radius:5px;padding:3px 5px;box-sizing:content-box}
  .drop path{stroke:none}
  .drop-white path{stroke:#8a7350}
}

/* dark mode drops: no tile behind them; lighter chocolate shades + thin light outline */
@media (prefers-color-scheme: dark){
  .drop{background:none;padding:0;border-radius:0}
  .drop path{stroke:#eadcc4;stroke-width:1.6}
  .drop-bitter path{fill:#5e3524}
  .drop-dark path{fill:#9a6240}
  .drop-milk path{fill:#cf9867}
  .drop-white path{fill:#f6ecd8;stroke:#f6ecd8}
  .drop-mix path{fill:url(#choc-mix)}
  #choc-mix stop:first-child{stop-color:#9a6240}
  #choc-mix stop:last-child{stop-color:#cf9867}
}

/* header row: all chocolate drops on one level (type columns aligned to the top) */
.choco thead th:not(:first-child):not(.cocoa-h){vertical-align:top;padding-top:10px}
.choco thead .col-drop{height:23px;margin:0 auto 6px}
html[lang="ja"] .choco thead .pct{font-size:10.5px;letter-spacing:-.02em}