/* ==========================================================================
   Wa-Kusuri 和薬 — main.css
   藍 indigo · 朱 vermilion · 和紙 washi · 墨 sumi
   System Japanese fonts only (no web-font download). Mobile-first.
   ========================================================================== */

:root {
	--ai: #1c3553;
	--ai-2: #2b4c73;
	--ai-50: #eef2f7;
	--shu: #c3402a;
	--shu-d: #a33420;
	--shu-50: #fbefeb;
	--kin: #a67c2e;
	--kin-50: #f7f0e0;
	--matcha: #4f6f3f;
	--matcha-50: #eef3e9;
	--washi: #faf7f0;
	--kinari: #f3eee2;
	--paper: #fff;
	--sumi: #1f1d1a;
	--sumi-2: #45413b;
	--mute: #6f6a62;
	--line: #e4dccb;
	--line-2: #efe9dc;

	/* Standard Japanese web font stack (Noto Sans JP, then the OS's own Japanese gothic). */
	--font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	--font-serif: var(--font);
	--font-en: var(--font);

	--r: 12px;
	--r-s: 8px;
	--r-xs: 4px;
	--shadow: 0 1px 2px rgb(31 29 26 / 6%), 0 4px 16px rgb(31 29 26 / 6%);
	--shadow-lg: 0 12px 40px rgb(28 53 83 / 14%);
	--gutter: 16px;
	--max: 1200px;
	--header-h: 64px;
	--ease: cubic-bezier(.2, .7, .2, 1);

	/* 青海波 seigaiha pattern (inline SVG, 0 requests) */
	--seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cdefs%3E%3Cg id='w'%3E%3Ccircle r='24' fill='%23f3eee2'/%3E%3Cg fill='none' stroke='%23d8cba9' stroke-width='1.1'%3E%3Ccircle r='23'/%3E%3Ccircle r='18'/%3E%3Ccircle r='13'/%3E%3Ccircle r='8'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23w' x='24' y='0'/%3E%3Cuse href='%23w' x='0' y='12'/%3E%3Cuse href='%23w' x='48' y='12'/%3E%3Cuse href='%23w' x='24' y='24'/%3E%3C/svg%3E");
	--seigaiha-ai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cdefs%3E%3Cg id='w'%3E%3Ccircle r='24' fill='%231c3553'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.1'%3E%3Ccircle r='23'/%3E%3Ccircle r='18'/%3E%3Ccircle r='13'/%3E%3Ccircle r='8'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23w' x='24' y='0'/%3E%3Cuse href='%23w' x='0' y='12'/%3E%3Cuse href='%23w' x='48' y='12'/%3E%3Cuse href='%23w' x='24' y='24'/%3E%3C/svg%3E");
	--asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.28' viewBox='0 0 40 69.28'%3E%3Cg fill='none' stroke='%23a67c2e' stroke-opacity='.14' stroke-width='.8'%3E%3Cpath d='M0 0l20 34.64L40 0M0 69.28l20-34.64 20 34.64M20 0v69.28M0 34.64h40M0 0l40 69.28M40 0L0 69.28M0 23.09l20 11.55 20-11.55M0 46.19l20-11.55 20 11.55'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.8;
	color: var(--sumi);
	background: var(--washi);
	font-feature-settings: "palt" 1;
	letter-spacing: .04em;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: anywhere;
	line-break: strict;
}
@media (min-width: 768px) { body { font-size: 16px; } }
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
img { border-style: none; }
a { color: var(--ai-2); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--shu); }
h1, h2, h3, h4 { line-height: 1.45; margin: 0 0 .6em; font-weight: 700; letter-spacing: .04em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
[hidden] { display: none !important; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 8px; top: -60px; z-index: 1000;
	background: var(--ai); color: #fff; padding: .6em 1em; border-radius: var(--r-s); text-decoration: none;
}
.skip-link:focus { top: 8px; color: #fff; }
:focus-visible { outline: 3px solid var(--kin); outline-offset: 2px; border-radius: 3px; }
main:focus { outline: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.container--shop { max-width: 1120px; }
@media (min-width: 768px) { :root { --gutter: 24px; } }
.section { padding-block: 48px; }
@media (min-width: 768px) { .section { padding-block: 72px; } }
.section--washi { background: var(--paper); border-block: 1px solid var(--line-2); }
.section--ai { background: var(--ai) var(--seigaiha-ai); background-size: 48px 24px; color: #fff; }
.center { text-align: center; margin-top: 2rem; }

.layout { display: grid; gap: 40px; padding-block: 16px 64px; }
@media (min-width: 1000px) { .layout--blog { grid-template-columns: minmax(0, 1fr) 300px; } }

/* ---------- Buttons ---------- */
.btn, .button, button.button, input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 44px; padding: .6em 1.4em; border-radius: 999px;
	border: 1.5px solid var(--ai); background: var(--ai); color: #fff;
	font-weight: 700; line-height: 1.3; text-decoration: none; letter-spacing: .06em;
	transition: background .2s var(--ease), color .2s, border-color .2s, transform .1s;
}
.btn:hover, .button:hover { background: var(--ai-2); border-color: var(--ai-2); color: #fff; }
.btn:active, .button:active { transform: translateY(1px); }
.btn--primary { background: var(--shu); border-color: var(--shu); }
.btn--primary:hover { background: var(--shu-d); border-color: var(--shu-d); }
.btn--ghost { background: transparent; color: var(--ai); }
.btn--ghost:hover { background: var(--ai); color: #fff; }
.btn--outline { background: var(--paper); color: var(--ai); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ai); color: var(--ai); background: var(--ai-50); }
.btn--light { background: #fff; border-color: #fff; color: var(--ai); }
.btn--light:hover { background: var(--kinari); border-color: var(--kinari); color: var(--ai); }
.btn--lg { min-height: 52px; padding-inline: 1.8em; font-size: 1.02rem; }

/* ---------- Top bar ---------- */
.topbar { background: var(--ai); color: #fff; font-size: 12px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.topbar__trust { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.topbar__trust::-webkit-scrollbar { display: none; }
.topbar__trust li { display: inline-flex; align-items: center; gap: 4px; }
.topbar__trust .icon { color: #e9c77b; width: 14px; height: 14px; }
.topbar__ship { margin: 0; white-space: nowrap; display: none; }
.topbar__ship strong { color: #e9c77b; }
@media (min-width: 900px) { .topbar__ship { display: block; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.site-header__inner {
	display: grid; align-items: center; gap: 8px 12px;
	/* Phones: logo + 注文履歴/マイページ/カート on the first row (same as desktop), menu + search below. */
	grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand brand actions" "menu search search";
	padding-block: 8px 10px;
}
@media (min-width: 900px) {
	.site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search actions"; gap: 28px; padding-block: 14px; }
	.site-header .menu-toggle { display: none; }
}
.site-header__inner .menu-toggle { grid-area: menu; }
.brand { grid-area: brand; min-width: 0; }
.header-search { grid-area: search; }
.header-actions { grid-area: actions; display: flex; align-items: center; gap: 2px; justify-self: end; }

.brand__text { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sumi); }
.brand__mark {
	display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
	background: var(--shu); color: #fff; border-radius: 50%;
	font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1;
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 35%);
}
.brand__name { font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.brand__tagline { display: none; margin: 0; font-size: 11px; color: var(--mute); font-weight: 400; letter-spacing: .04em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-logo-link { display: inline-block; line-height: 0; }
.custom-logo { max-height: 56px; width: auto; max-width: 100%; }
@media (min-width: 900px) { .brand__tagline { display: block; } .custom-logo { max-height: 48px; } .brand__mark { width: 40px; height: 40px; font-size: 20px; } .brand__name { font-size: 22px; } }
@media (max-width: 899px) { .brand { text-align: left; } .brand__name { font-size: 21px; letter-spacing: .08em; } .brand__mark { width: 40px; height: 40px; font-size: 21px; } .brand__text { gap: 8px; } }
@media (max-width: 380px) { .custom-logo { max-height: 48px; } .brand__name { font-size: 18px; } .brand__mark { width: 34px; height: 34px; font-size: 18px; } }

.icon-btn {
	position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	min-width: 48px; min-height: 48px; padding: 4px 6px; border: 0; border-radius: var(--r-s);
	background: transparent; color: var(--sumi-2); text-decoration: none; font-size: 10px; line-height: 1.2;
}
.icon-btn:hover { background: var(--ai-50); color: var(--ai); }
.icon-btn .icon { width: 24px; height: 24px; }
.icon-btn__label { white-space: nowrap; }
.kw-cart-count {
	position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: var(--shu); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.kw-cart-count[data-count="0"] { background: var(--mute); }
.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 30% { transform: scale(1.35); } }
@media (max-width: 899px) {
	.hide-sm { display: none; }
	/* Desktop-style icon row on phones: icon + short label, compact. */
	.header-actions .icon-btn { min-width: 44px; min-height: 48px; padding: 4px 2px; font-size: 10px; letter-spacing: 0; }
	.header-actions .icon-btn .icon { width: 22px; height: 22px; }
	.header-actions .kw-cart-count { right: 0; }
	.site-header .menu-toggle { min-width: 44px; min-height: 44px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
	.site-header .menu-toggle .icon-btn__label { display: none; }
}
@media (max-width: 359px) { .header-actions .icon-btn { min-width: 38px; } .header-actions .icon-btn__label { font-size: 9px; } }

/* Search */
.search-form { position: relative; display: flex; }
.search-form__input {
	width: 100%; height: 44px; padding: 0 52px 0 18px;
	border: 1.5px solid var(--line); border-radius: 999px; background: var(--washi);
	font-size: 16px; /* prevents iOS zoom */
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.search-form__input::placeholder { color: #9a948a; font-size: 13px; }
.search-form__input:focus { outline: none; border-color: var(--ai); background: #fff; box-shadow: 0 0 0 4px var(--ai-50); }
.search-form__btn {
	position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%;
	display: grid; place-items: center; background: var(--ai); color: #fff;
}
.search-form__btn .icon { width: 18px; height: 18px; }
@media (min-width: 900px) { .header-search { max-width: 560px; width: 100%; justify-self: center; } }

/* ---------- Global nav + mega menu ---------- */
.gnav { display: none; border-top: 1px solid var(--line-2); }
@media (min-width: 900px) { .gnav { display: block; } }
.gnav__inner { display: flex; align-items: stretch; gap: 8px; min-height: 46px; }
.gnav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.gnav__list a { display: flex; align-items: center; height: 100%; padding: 0 16px; color: var(--sumi-2); text-decoration: none; font-size: 14px; font-weight: 600; position: relative; }
.gnav__list a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--shu); transform: scaleX(0); transition: transform .25s var(--ease); }
.gnav__list a:hover, .gnav__list .current-menu-item > a { color: var(--ai); }
.gnav__list a:hover::after, .gnav__list .current-menu-item > a::after { transform: scaleX(1); }

.mega { position: static; }
.mega__toggle {
	display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 18px;
	border: 0; background: var(--ai); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .06em;
}
.mega__toggle .icon { width: 18px; height: 18px; }
.mega__caret { transition: transform .2s; }
.mega__toggle[aria-expanded="true"] .mega__caret { transform: rotate(180deg); }
.gnav .mega__panel {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
	background: #fff; border-top: 3px solid var(--shu); box-shadow: var(--shadow-lg);
	padding: 28px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
	max-height: calc(100vh - 160px); overflow: auto;
}
/* Masonry columns: categories with and without sub-categories pack without empty gaps. */
.gnav .mega__list { columns: 4 230px; column-gap: 16px; list-style: none; margin: 0; padding: 0; }
.gnav .mega__list > li {
	break-inside: avoid; margin: 0 0 14px; padding: 6px;
	background: var(--washi); border: 1px solid var(--line-2); border-radius: var(--r);
	transition: border-color .2s, box-shadow .2s;
}
.gnav .mega__list > li:hover { border-color: var(--line); box-shadow: var(--shadow); background: #fff; }
.mega__list > li > a, .mega__link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); color: var(--sumi); font-weight: 700; line-height: 1.45; text-decoration: none; }
.mega__list > li > a:hover, .mega__link:hover { background: var(--kinari); color: var(--ai); }
.mega__link .cat-card__img { width: 40px; height: 40px; flex: none; }
.mega__name { flex: 1; min-width: 0; font-size: 14.5px; }
.mega__sub, .mega__list .sub-menu { list-style: none; margin: 2px 10px 6px; padding: 8px 0 0; border-top: 1px dashed var(--line); font-size: 13px; }
.gnav .mega__sub, .gnav .mega__list .sub-menu { display: grid; grid-template-columns: 1fr; gap: 1px; }
.mega__sub a, .mega__list .sub-menu a {
	display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--r-xs);
	color: var(--sumi-2); text-decoration: none; line-height: 1.45;
}
.mega__sub a::before, .mega__list .sub-menu a::before { content: ""; flex: none; width: 5px; height: 5px; border-top: 1.5px solid var(--shu); border-right: 1.5px solid var(--shu); transform: rotate(45deg); }
.mega__sub a small { margin-left: auto; color: var(--mute); font-size: 11px; }
.mega__sub a:hover, .mega__list .sub-menu a:hover { background: var(--shu-50); color: var(--shu); }
.mega__all a { color: var(--ai); font-weight: 700; }
.mega__all a::before { display: none; }
.drawer__cats .mega__sub { border-top: 0; padding-top: 0; }

/* ---------- Drawer (mobile) ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer__backdrop { position: absolute; inset: 0; background: rgb(20 24 32 / 50%); animation: fade .2s; }
.drawer__panel {
	position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px); overflow-y: auto; overscroll-behavior: contain;
	background: var(--washi); padding: 0 0 100px; animation: slide .25s var(--ease);
}
@keyframes slide { from { transform: translateX(-100%); } }
@keyframes fade { from { opacity: 0; } }
.drawer__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 20px; background: var(--ai); color: #fff; }
.drawer__head .icon-btn { color: #fff; }
.drawer__title { margin: 0; font-weight: 700; letter-spacing: .1em; }
.drawer__login { display: flex; align-items: center; gap: 10px; margin: 16px; padding: 14px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); color: var(--ai); font-weight: 700; text-decoration: none; }
.drawer__label { margin: 20px 20px 6px; font-size: 12px; font-weight: 700; color: var(--kin); letter-spacing: .12em; }
.drawer__cats .mega__list, .drawer__links { list-style: none; margin: 0; padding: 0; background: #fff; border-block: 1px solid var(--line); }
.drawer__cats .mega__list > li, .drawer__links li { border-bottom: 1px solid var(--line-2); }
.drawer__cats .mega__list > li:last-child, .drawer__links li:last-child { border-bottom: 0; }
.drawer__cats .mega__link, .drawer__cats .mega__list > li > a, .drawer__links a { padding: 12px 20px; border-radius: 0; display: flex; gap: 12px; align-items: center; color: var(--sumi); text-decoration: none; font-weight: 600; }
.drawer__cats .mega__sub, .drawer__cats .sub-menu { margin: -4px 0 10px 68px; }
.drawer .social { padding: 0 20px; }
body.has-drawer { overflow: hidden; }

/* ---------- Bottom nav (mobile, Japanese app style) ---------- */
.bottom-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: rgb(255 255 255 / 97%); border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -4px 16px rgb(0 0 0 / 5%);
}
.bottom-nav a, .bottom-nav button {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: 56px; border: 0; background: none; color: var(--sumi-2); font-size: 10px; text-decoration: none;
}
.bottom-nav .icon { width: 22px; height: 22px; }
.bottom-nav [aria-current="page"] { color: var(--shu); }
.bottom-nav .kw-cart-count { top: 4px; right: calc(50% - 22px); }
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .bottom-nav { display: none; } body { padding-bottom: 0; } }

.to-top {
	position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 80;
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--ai); color: #fff; box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--ease);
}
.to-top:hover { color: #fff; background: var(--shu); }
.is-scrolled .to-top { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 900px) { .to-top { bottom: 24px; right: 24px; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; list-style: none; margin: 0; padding: 14px 0; font-size: 12px; color: var(--mute); scrollbar-width: none; white-space: nowrap; }
.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li + li::before { content: "›"; margin: 0 .6em; color: #b9b1a2; }
.breadcrumbs a { color: var(--mute); text-decoration: none; }
.breadcrumbs a:hover { color: var(--shu); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--sumi-2); }

/* ---------- Section heading (English kicker + Japanese title) ---------- */
.section-head { position: relative; text-align: center; margin-bottom: 28px; }
.section-head__en { margin: 0 0 2px; font-family: var(--font-en);  font-size: 15px; color: var(--kin); letter-spacing: .12em; }
.section-head__title { margin: 0; font-family: var(--font-serif); font-size: clamp(22px, 3.6vw, 30px); letter-spacing: .12em; }
.section-head__title::after { content: ""; display: block; width: 28px; height: 3px; margin: 12px auto 0; background: var(--shu); border-radius: 2px; }
.section-head__more { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px; font-size: 13px; font-weight: 700; text-decoration: none; }
.section-head__more .icon { width: 16px; height: 16px; }
@media (min-width: 768px) { .section-head__more { position: absolute; right: 0; bottom: 4px; margin: 0; } }
.section-head--left { text-align: left; }
.section-head--left .section-head__title::after { margin-left: 0; }
.section-head--light .section-head__en { color: #e9c77b; }
.section-head--light .section-head__title { color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--kinari) var(--seigaiha); background-size: 48px 24px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--washi) 30%, rgb(250 247 240 / 70%) 55%, rgb(250 247 240 / 0%) 85%); }
.hero__inner { position: relative; display: grid; gap: 28px; align-items: center; padding-block: 36px 40px; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr 1fr; padding-block: 64px; gap: 48px; } }
.hero__kicker { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.hero__kicker span { padding: 3px 12px; border: 1px solid var(--ai); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ai); background: #fff; }
.hero__kicker span:first-child { background: var(--ai); color: #fff; }
.hero__title { font-family: var(--font-serif); font-size: clamp(24px, 6.2vw, 40px); line-height: 1.45; letter-spacing: .08em; margin: 0 0 16px; color: var(--sumi); }
.hero__text { max-width: 34em; color: var(--sumi-2); font-size: 15px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 20px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: 700; color: var(--ai); }
.hero__chips li { display: inline-flex; align-items: center; gap: 6px; }
.hero__chips .icon { color: var(--shu); width: 18px; height: 18px; }
.hero__visual { position: relative; }
.hero__img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-lg); aspect-ratio: 8 / 3; object-fit: cover; }
.hero-card {
	position: relative; display: grid; justify-items: center; gap: 4px; max-width: 360px; margin-inline: auto;
	padding: 28px 24px 24px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg);
	text-decoration: none; color: var(--sumi); text-align: center;
	border: 1px solid var(--line);
}
.hero-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--kin-50); border-radius: 14px; pointer-events: none; }
.hero-card__rank { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; background: var(--kin); color: #fff; font-size: 12px; white-space: nowrap; }
.hero-card__img { width: 220px; height: 220px; object-fit: contain; }
.hero-card__name { font-weight: 700; font-size: 18px; }
.hero-card__ing { font-size: 12px; color: var(--mute); }
.hero-card__price { font-size: 22px; font-weight: 700; color: var(--shu); }
.hero-card:hover { transform: translateY(-2px); color: var(--sumi); transition: transform .2s; }

/* ---------- Category grid ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.cat-card {
	display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%;
	padding: 18px 8px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
	color: var(--sumi); text-decoration: none; text-align: center; transition: .2s var(--ease);
}
.cat-card:hover { border-color: var(--ai); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ai); }
.cat-card__img { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: var(--kinari); padding: 8px; }
.cat-card__img--icon { display: grid; place-items: center; color: var(--ai); }
.cat-card__img--icon .icon { width: 28px; height: 28px; }
.cat-card__name { font-weight: 700; font-size: 13px; line-height: 1.45; }
.cat-card__count { font-size: 11px; color: var(--mute); }

/* ---------- Tabs ---------- */
.tabs__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter) 2px; border-bottom: 2px solid var(--ai); }
.tabs__list::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .tabs__list { justify-content: center; margin-inline: 0; } }
.tabs__tab {
	flex: none; padding: 10px 20px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-s) var(--r-s) 0 0;
	background: #fff; color: var(--sumi-2); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.tabs__tab[aria-selected="true"] { background: var(--ai); border-color: var(--ai); color: #fff; }
.tabs__tab:hover:not([aria-selected="true"]) { background: var(--ai-50); color: var(--ai); }
.tabs__more { text-align: center; margin-top: 24px; }

/* ---------- 購入の流れ (flow) ---------- */
.flow { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: flow; }
@media (min-width: 768px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow li { position: relative; padding: 24px 20px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--kin); border-right: 2px solid var(--kin); transform: translateY(-50%) rotate(45deg); display: none; }
@media (min-width: 768px) { .flow li:not(:last-child)::after { display: block; } }
.flow__num { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--shu); color: #fff; font-family: var(--font-serif); font-size: 20px; font-weight: 700; }
.flow h3 { font-size: 16px; margin-bottom: 4px; }
.flow p { margin: 0; font-size: 13px; color: var(--mute); }

/* ---------- Reviews ---------- */
.reviews-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px; scrollbar-width: thin; }
.review-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.review-card blockquote { margin: 0; flex: 1; font-size: 14px; color: var(--sumi-2); }
.review-card blockquote p { margin: 0; }
.review-card__who { margin: 0; font-size: 12px; color: var(--mute); }
.review-card__product { font-size: 13px; font-weight: 700; text-decoration: none; }
.stars { margin: 0; color: var(--kin); letter-spacing: .1em; }
.verified { display: inline-flex; align-items: center; gap: 2px; color: var(--matcha); font-weight: 700; }
.verified .icon { width: 14px; height: 14px; }

/* ---------- About (indigo section) ---------- */
.about__lead { max-width: 44em; margin: 0 auto 32px; text-align: center; color: rgb(255 255 255 / 88%); }
.about__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .about__grid { grid-template-columns: repeat(3, 1fr); } }
.about__grid section { padding: 24px; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--r); background: rgb(255 255 255 / 5%); }
.about__grid h3 { font-family: var(--font-serif); color: #e9c77b; font-size: 18px; }
.about__grid p { margin: 0; font-size: 14px; color: rgb(255 255 255 / 85%); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq__item summary { display: flex; align-items: center; gap: 12px; padding: 16px 48px 16px 16px; font-weight: 700; cursor: pointer; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ai); border-bottom: 2px solid var(--ai); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item summary:hover { background: var(--washi); }
.faq__q { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ai); color: #fff; font-family: var(--font-en); font-weight: 700; }
.faq__q--a { background: var(--shu); }
.faq__a { display: flex; gap: 12px; padding: 0 16px 18px; }
.faq__a p { margin: 3px 0 0; color: var(--sumi-2); }

/* ---------- News + blog ---------- */
.news-blog { display: grid; gap: 48px; }
.news__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news__list li { display: grid; gap: 2px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .news__list li { grid-template-columns: 110px 1fr; } }
.news__list time { color: var(--mute); font-size: 13px; font-family: var(--font-en); }
.news__list a { color: var(--sumi); text-decoration: none; }
.news__list a:hover { color: var(--shu); text-decoration: underline; }

.post-grid { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid--4 { grid-template-columns: repeat(4, 1fr); } .layout__main .post-grid { grid-template-columns: repeat(2, 1fr); } }
.post-card__link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: var(--sumi); text-decoration: none; transition: .2s var(--ease); }
.post-card__link:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ai); }
.post-card__thumb { margin: 0; aspect-ratio: 16 / 9; background: var(--kinari) var(--asanoha); overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post-card__link:hover img { transform: scale(1.04); }
.post-card__noimg { display: grid; place-items: center; height: 100%; font-family: var(--font-serif); font-size: 40px; color: var(--kin); opacity: .5; }
.post-card__body { padding: 14px 16px 18px; }
.post-card__meta { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: 12px; color: var(--mute); }
.post-card__cat { padding: 1px 8px; border-radius: 999px; background: var(--ai-50); color: var(--ai); font-weight: 700; }
.post-card__title { margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------- Entries (pages / posts) ---------- */
.entry { padding-block: 8px 56px; }
.entry__header { margin-bottom: 24px; }
.page-title, .entry__title { font-family: var(--font-serif); font-size: clamp(22px, 4vw, 32px); letter-spacing: .08em; }
.entry__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--mute); margin-bottom: 8px; }
.entry__cat { padding: 2px 10px; border-radius: 999px; background: var(--ai); color: #fff; text-decoration: none; font-weight: 700; font-size: 12px; }
.entry__thumb { margin: 0 0 28px; }
.entry__thumb img { border-radius: var(--r); width: 100%; }
.entry--post { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px var(--gutter) 32px; }
@media (min-width: 768px) { .entry--post { padding: 40px 48px; } }

.entry__content > * + * { margin-top: 1.2em; }
.entry__content h2 { margin-top: 2.4em; padding: .7em 1em; background: var(--ai); color: #fff; border-radius: var(--r-s); font-size: 1.3em; border-left: 6px solid var(--shu); }
.entry__content h3 { margin-top: 2em; padding: 0 0 .4em .8em; border-left: 4px solid var(--shu); border-bottom: 1px solid var(--line); font-size: 1.15em; }
.entry__content h4 { margin-top: 1.6em; color: var(--ai); }
.entry__content ul li::marker { color: var(--shu); }
.entry__content blockquote { margin-inline: 0; padding: 16px 20px; background: var(--washi); border-left: 4px solid var(--kin); border-radius: 0 var(--r-s) var(--r-s) 0; }
.entry__content table { font-size: 14px; background: #fff; }
.entry__content th, .entry__content td { border: 1px solid var(--line); padding: .6em .8em; text-align: left; }
.entry__content th { background: var(--kinari); }
.entry__content img { border-radius: var(--r-s); }
.entry__content .wp-block-table { overflow-x: auto; }

.toc { margin: 28px 0; padding: 20px 24px; background: var(--washi); border: 1px solid var(--line); border-radius: var(--r); }
.toc__title { font-weight: 700; font-family: var(--font-serif); cursor: pointer; letter-spacing: .2em; }
.toc__list { margin: 12px 0 0; padding-left: 1.4em; font-size: 14px; }
.toc__item--h3 { margin-left: 1.2em; list-style: circle; font-size: 13px; }
.toc a { color: var(--sumi-2); text-decoration: none; }
.toc a:hover { color: var(--shu); text-decoration: underline; }

.supervisor { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; padding: 14px 16px; background: var(--matcha-50); border-radius: var(--r); }
.supervisor__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.supervisor__label { margin: 0; font-size: 12px; color: var(--matcha); font-weight: 700; }
.supervisor__name { margin: 0; font-weight: 700; }
.supervisor__name span { font-weight: 400; font-size: 13px; color: var(--mute); }

.disclaimer { display: flex; gap: 12px; margin-top: 40px; padding: 16px; background: var(--kin-50); border-radius: var(--r-s); font-size: 13px; color: var(--sumi-2); }
.disclaimer p { margin: 0; }
.disclaimer .icon { color: var(--kin); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 32px 0 0; }
.tags a { display: inline-block; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--mute); text-decoration: none; }
.post-nav { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; color: var(--sumi); font-size: 14px; }
.post-nav a span { display: block; font-size: 11px; color: var(--kin); font-weight: 700; }
.post-nav__next { text-align: right; }
.related-posts { margin-top: 48px; }
.related-posts__title, .sub-title { font-family: var(--font-serif); font-size: 20px; border-bottom: 2px solid var(--ai); padding-bottom: 8px; margin: 40px 0 20px; }

/* ---------- Sidebar / widgets ---------- */
.sidebar { display: grid; gap: 24px; align-content: start; }
@media (min-width: 1000px) { .sidebar { position: sticky; top: 140px; } }
.widget { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.widget__title { font-size: 15px; font-family: var(--font-serif); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ai); letter-spacing: .1em; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { border-bottom: 1px dashed var(--line); }
.widget li a { display: block; padding: 8px 0; color: var(--sumi-2); text-decoration: none; font-size: 14px; }
.widget li a:hover { color: var(--shu); }
.mini-rank { list-style: none; margin: 0; padding: 0; }
.mini-rank a { display: grid; grid-template-columns: 24px 56px 1fr; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--sumi); font-size: 13px; font-weight: 700; }
.mini-rank img { width: 56px; height: 56px; object-fit: contain; background: var(--washi); border-radius: var(--r-xs); }
.mini-rank__price { display: block; font-weight: 400; color: var(--shu); }
.mini-rank__no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--sumi-2); font-size: 12px; }
.mini-rank__no.rank-1 { background: #c9a13b; color: #fff; }
.mini-rank__no.rank-2 { background: #9aa3ad; color: #fff; }
.mini-rank__no.rank-3 { background: #b07a4a; color: #fff; }

/* ---------- Archive head / pagination / chips ---------- */
.archive-head { padding: 8px 0 24px; }
.archive-head .section-head__en { text-align: left; }
.archive-head__title { font-family: var(--font-serif); font-size: clamp(22px, 4vw, 30px); letter-spacing: .08em; margin: 0 0 8px; }
.archive-head__desc { color: var(--mute); font-size: 14px; }
.search-again { max-width: 560px; margin-top: 12px; }

.pagination ul, .woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 40px 0 0; padding: 0; }
.pagination a, .pagination span, .woocommerce-pagination a, .woocommerce-pagination span {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
	border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--sumi); text-decoration: none; font-weight: 700;
}
.pagination .current, .woocommerce-pagination .current { background: var(--ai); border-color: var(--ai); color: #fff; }
.pagination a:hover, .woocommerce-pagination a:hover { border-color: var(--ai); color: var(--ai); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--sumi-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.chips a:hover { border-color: var(--ai); color: var(--ai); background: var(--ai-50); }
.chips a span { font-size: 11px; color: var(--mute); }
.empty { padding: 32px; background: #fff; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; color: var(--mute); }

.notfound { text-align: center; padding-block: 40px 80px; }
.notfound__code { font-family: var(--font-en); font-size: 96px; line-height: 1; color: var(--kin); opacity: .35; margin: 0; }
.notfound .search-form { max-width: 480px; margin: 24px auto 0; }

/* ---------- Assurance strip ---------- */
.assurance { background: #fff; border-top: 1px solid var(--line); padding-block: 40px; }
.assurance__title { text-align: center; font-family: var(--font-serif); font-size: 20px; letter-spacing: .1em; margin-bottom: 24px; }
.assurance__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .assurance__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .assurance__list { grid-template-columns: repeat(6, 1fr); } }
.assurance__list li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 10px; background: var(--washi); border-radius: var(--r); }
.assurance__list .icon { width: 32px; height: 32px; color: var(--ai); margin-bottom: 4px; }
.assurance__list strong { font-size: 14px; }
.assurance__list span { font-size: 11px; color: var(--mute); line-height: 1.5; }

/* ---------- Shopping guide ---------- */
.guide { background: var(--kinari) var(--asanoha); padding-block: 48px; }
.guide__title { text-align: center; font-family: var(--font-serif); font-size: 22px; letter-spacing: .12em; margin-bottom: 28px; }
.guide__title span { display: block; font-family: var(--font-en);  font-weight: 400; font-size: 14px; color: var(--kin); }
.guide-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guide .guide-grid { grid-template-columns: repeat(4, 1fr); } }
.guide-grid section { padding: 20px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); }
.guide-grid h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ai); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.guide-grid h3 .icon { color: var(--shu); }
.guide-grid p { font-size: 13px; color: var(--sumi-2); }
.guide-grid a { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; text-decoration: none; }
.guide-grid a .icon { width: 16px; height: 16px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--sumi); color: #d9d4ca; font-size: 13px; }
.site-footer a { color: #d9d4ca; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; gap: 32px; padding-block: 48px 32px; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 20px; color: #fff; font-weight: 700; letter-spacing: .12em; }
.site-footer__heading { font-size: 14px; color: #fff; letter-spacing: .1em; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li a { display: block; padding: 5px 0; }
.operator { margin: 16px 0; padding: 14px; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--r-s); font-size: 12px; }
.operator div { display: grid; grid-template-columns: 8.5em 1fr; gap: 8px; padding: 2px 0; }
.operator dt { color: #a8a196; }
.operator dd { margin: 0; }
.social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.social a { display: inline-block; padding: 6px 14px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; font-size: 12px; }
.drawer .social a { border-color: var(--line); color: var(--ai); background: #fff; }
.site-footer__bottom { border-top: 1px solid rgb(255 255 255 / 10%); padding-block: 20px 24px; text-align: center; }
.legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; list-style: none; margin: 0 0 12px; padding: 0; }
.site-footer__note { max-width: 52em; margin: 0 auto 10px; font-size: 11px; color: #a8a196; }
.copyright { margin: 0; font-size: 11px; color: #8d877d; font-family: var(--font-en); letter-spacing: .1em; }

/* ---------- Comments ---------- */
.comments { margin-top: 48px; }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 16px; border-bottom: 1px solid var(--line); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print ---------- */
@media print {
	.topbar, .site-header, .bottom-nav, .to-top, .assurance, .guide, .site-footer, .sidebar, .buybar { display: none !important; }
	body { background: #fff; padding: 0; }
}

/* Visually hidden page title (cart, checkout, my account, notice) — kept for screen readers & SEO. */
.entry__header--hidden { margin: 0; }