/* =========================================================
   EightBuy — main.css
   T001 First Pass. Not a full design system — just enough
   shared foundation (tokens, container, section, button,
   heading, card, responsive) plus per-section styles.
   ========================================================= */

/* ---------- 1. Reset (minimal) ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input, textarea { font: inherit; }

/* ---------- 2. Custom Properties (Design Tokens) ---------- */
:root {
	/* Colors */
	--color-bg: #ffffff;
	--color-bg-alt: #f7f5f1;
	--color-text: #111111;
	--color-text-muted: #6b6b6b;
	--color-black: #111111;
	--color-white: #ffffff;
	--color-gold: #c8a35e;
	--color-gold-dark: #a8823f;
	--color-line: #06c755;
	--color-navy: #101f3c;
	--color-navy-dark: #0a1526;
	--color-border: #e6e2da;
	/* Section accent. Warm khaki used as a full-bleed section ground; dark
	   body text on it measures ~9.2:1, white only ~2.1:1, so anything set
	   on this colour keeps the normal dark text rather than on-dark text. */
	--color-accent-beige: #bfb58e;

	/* Layout */
	--container-width: 1320px;
	--container-padding: 5vw;

	/* Radius / Shadow */
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 20px;
	--shadow-card: 0 8px 24px rgba(17, 17, 17, 0.08);

	/* Type */
	--font-base: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	--font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;

	/* Motion */
	--transition-base: 0.3s ease;
	--transition-fast: 0.15s ease;

	/* Fixed CTA height, exposed so footer padding can react to it */
	--fixed-cta-height: 64px;
	--header-height: 76px;
}

body {
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.75;
	font-size: 16px;
}

/* ---------- 3. Common Container / Section ---------- */
.container {
	width: 90%;
	max-width: var(--container-width);
	margin-inline: auto;
}

.section {
	padding-block: clamp(40px, 6vw, 72px);
}

/* ---------- 3b. Static page content (page.php) ---------- */
.page-content__header { margin-bottom: 28px; }
.page-content__thumb { margin-bottom: 28px; border-radius: var(--radius-md); overflow: hidden; }
.page-content__body {
	max-width: 760px;
	font-size: 15px;
	line-height: 1.9;
}
.page-content__body > * + * { margin-top: 1.4em; }
.page-content__body h2 { font-size: 22px; font-family: var(--font-serif); font-weight: 700; }
.page-content__body h3 { font-size: 18px; font-weight: 700; }
.page-content__body ul,
.page-content__body ol { padding-left: 1.4em; }
.page-content__body a { text-decoration: underline; text-underline-offset: 2px; }
.page-content__placeholder { color: var(--color-text-muted); }

/* ---------- 3c. Sitemap page ---------- */
.sitemap__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 32px;
	max-width: 760px;
}
.sitemap__list > li { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.sitemap__list > li > a { font-weight: 700; font-size: 15px; }
.sitemap__sublist { margin-top: 10px; padding-left: 1.2em; }
.sitemap__sublist li { padding: 6px 0; }
.sitemap__sublist a { font-size: 13px; color: var(--color-text-muted); }

.section--cta {
	background: var(--color-bg-alt);
}

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.section-lead {
	color: var(--color-text-muted);
	margin-top: 12px;
	margin-bottom: 32px;
}

.section-lead--on-dark { color: rgba(255, 255, 255, 0.75); }

/* ---------- 4. Common Heading ---------- */
.heading {
	font-family: var(--font-serif);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
}

.heading--h1 { font-size: clamp(28px, 4vw, 44px); }
.heading--h2 {
	font-size: clamp(24px, 3.2vw, 36px);
	text-align: center;
	margin-bottom: 40px;
	position: relative;
}
.heading--h2::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--color-gold);
	margin: 16px auto 0;
}
.section__head .heading--h2 { margin-bottom: 0; text-align: left; }
.section__head .heading--h2::after { margin-left: 0; }

.heading--on-dark { color: var(--color-white); }

/* ---------- 5. Common Button ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	border: 1px solid transparent;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

.btn--lg { padding: 16px 32px; font-size: 16px; }

.btn--gold {
	background: var(--color-gold);
	color: var(--color-white);
}
.btn--gold:hover { background: var(--color-gold-dark); }

.btn--line {
	background: var(--color-line);
	color: var(--color-white);
}
.btn--line:hover { background: #05a848; }

.btn--outline {
	background: transparent;
	color: var(--color-black);
	border-color: var(--color-black);
}
.btn--outline:hover { background: var(--color-black); color: var(--color-white); }

.btn--outline-white {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.6);
}
.btn--outline-white:hover { background: var(--color-white); color: var(--color-black); }

.btn--navy {
	background: var(--color-navy);
	color: var(--color-white);
}
.btn--navy:hover { background: var(--color-navy-dark); }

/* ---------- 6b. Image CTA (supplied composite PNG wrapped in <a>) ---------- */
.eb-img-link {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	line-height: 0;
}
.eb-img-link img { width: 100%; height: auto; display: block; }
.eb-img-link:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-card); }
.eb-img-link:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

.eb-img-link--pill { border-radius: 999px; }
.eb-img-link--compact { max-width: 320px; }

/* ---------- purchase method banners ---------- */
/* T009: the three cards are the supplied artboards, which already carry
   their heading, copy and 詳しく見る button. The card is therefore the
   image itself — no padding around it, or the artwork's own frame would
   sit inside a second one. All three share a ratio, so a fixed box keeps
   the row even while the images decode.
   The artwork's rounded corners and shadow lived in a PNG alpha channel;
   they are re-created here instead, which let the photographs ship as
   JPEG at a fifth of the weight. */
.methods__card {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	line-height: 0;
	background: var(--color-white);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.methods__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.methods__card:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.methods__img { display: block; width: 100%; height: auto; aspect-ratio: 824 / 502; object-fit: cover; }
/* The LINE card sits under the three banners, on its own row. */

/* ---------- 6. Common Card ---------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.card-grid--3col { grid-template-columns: repeat(3, 1fr); }
.card-grid--blog { grid-template-columns: repeat(3, 1fr); }

.eb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Cards whose own photograph has not been supplied. The artwork carries no
   product, so a 買取実績 card never implies the shop handled a piece it did
   not — but it reads as designed rather than as an image that failed. */
.eb-img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: url('../images/common/item-fallback.svg') center / cover no-repeat, #f7f5f1;
}

.result-card,
.blog-card,
.voice-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
	height: 100%;
}
.result-card:hover,
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(17, 17, 17, 0.12);
	border-color: var(--color-gold);
}
.result-card:hover .eb-img,
.blog-card:hover .eb-img { transform: scale(1.04); }

.result-card__media,
.blog-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.eb-img { transition: transform var(--transition-base); }

.result-card__body,
.blog-card__body { padding: 16px 18px 20px; }

.result-card__brand { font-size: 11px; letter-spacing: 0.1em; color: var(--color-gold-dark); font-weight: 700; margin: 0 0 4px; }
.result-card__title,
.blog-card__title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.result-card__price {
	font-size: 24px;
	font-weight: 700;
	font-family: var(--font-serif);
	color: var(--color-black);
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--color-border);
}

.blog-card__meta { display: flex; gap: 12px; font-size: 12px; color: var(--color-text-muted); margin: 0 0 8px; }
.blog-card__excerpt { font-size: 14px; color: var(--color-text-muted); margin: 0; }

.voice-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
	height: 100%;
}
.voice-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.voice-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.voice-card__name { font-weight: 700; margin: 0 0 4px; font-size: 14px; }
.voice-card__excerpt { color: var(--color-text-muted); font-size: 14px; margin: 0; }

.eb-rating { display: inline-flex; gap: 2px; align-items: center; }
.eb-rating__star { display: inline-block; width: 14px; height: 14px; opacity: 0.25; filter: grayscale(1); }
.eb-rating__star--on { opacity: 1; filter: none; }

.eb-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition-base), gap var(--transition-base);
}
.eb-link-arrow::after { content: '→'; transition: transform var(--transition-base); }
.eb-link-arrow:hover { border-color: currentColor; }
.eb-link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 7. Responsive Breakpoints ---------- */
/* Desktop-first. Tablet: <=1024px / Smartphone: <=640px */

/* ---------- FV: one supplied image, full width (T013 ①) ----------
   Every page's first view is now a finished composite with its own
   headline, copy and figures, so there is nothing to position over it and
   no breakpoint swap: width:100% / height:auto at every size, which is
   what keeps the baked-in text from ever being cropped. */
.page-fv { line-height: 0; }
.page-fv__img { display: block; width: 100%; height: auto; }

/* ---------- 8. Skip link / a11y ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto;
	background: var(--color-black);
	color: var(--color-white);
	padding: 10px 16px;
	z-index: 10000;
	border-radius: var(--radius-sm);
}

/* ---------- 9. Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--header-height);
}
.site-header__logo-link { display: inline-block; }
/* 40px read small against a 76px header and six nav items. 46px is a
   step up without touching anything else: the header keeps its
   --header-height of 76px, so the bar does not grow and the nav does not
   move. width:auto holds the aspect ratio — the image file is untouched. */
.site-header__logo-link .site-logo-img,
.site-header__logo-link .custom-logo { height: 46px; width: auto; display: block; }
.site-header__logo-link .site-logo-text { font-family: var(--font-serif); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; }
.site-header__nav { margin-left: auto; }
.nav-menu { display: flex; gap: 18px; }
.nav-menu > li { position: relative; }
.nav-menu a { font-weight: 600; font-size: 13px; padding: 6px 2px; position: relative; white-space: nowrap; }
.nav-menu a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--color-gold);
	transform: scaleX(0);
	transition: transform var(--transition-base);
}
.nav-menu a:hover::after { transform: scaleX(1); }

/* Dropdown (desktop): CSS-only, hover + keyboard focus. WP core
   already adds `menu-item-has-children` to parent <li> — no custom
   Walker needed. Parent link stays a normal, clickable link. */
.site-header__nav .menu-item-has-children > a { padding-right: 16px; }
.site-header__nav .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 0; top: 50%;
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.site-header__nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	padding: 8px 0;
	margin: 0;
	z-index: 50;
}
.site-header__nav .menu-item-has-children:hover > .sub-menu,
.site-header__nav .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}
.site-header__nav .sub-menu a {
	display: block;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}
.site-header__nav .sub-menu a::after { display: none; }
.site-header__nav .sub-menu a:hover { background: var(--color-bg-alt); }

.site-header__actions { display: flex; align-items: center; gap: 12px; }
.header-action { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.header-action--tel { font-size: 15px; }
.header-action--img { width: auto; height: 34px; flex-shrink: 0; }
.header-action--img img { width: auto; height: 100%; }

.menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px;
	min-width: 44px;
	min-height: 44px;
	/* .site-header__nav (margin-left: auto) is what pushes everything
	   right on desktop; it's display:none on mobile, so without this
	   the logo and hamburger just sit side-by-side at the left edge. */
	margin-left: auto;
	flex-shrink: 0;
}
.menu-toggle__bar { width: 24px; height: 2px; background: var(--color-black); transition: transform var(--transition-base), opacity var(--transition-base); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fullscreen overlay (T002-F4) — replaces the old "panel below header"
   mobile menu. All children shown inline, no accordion: the spec's
   explicit goal is seeing the whole hierarchy at a glance. */
.mobile-nav {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 1000; /* above .site-header (500) and .fixed-cta (600) */
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 280ms ease, transform 280ms ease;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
	.mobile-nav { transition: none; }
}

.mobile-nav__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: var(--container-padding);
	min-height: var(--header-height);
	border-bottom: 1px solid var(--color-border);
}
.mobile-nav__logo-link { display: inline-block; }
.mobile-nav__logo-link .site-logo-img,
.mobile-nav__logo-link .custom-logo { height: 34px; width: auto; display: block; }
.mobile-nav__logo-link .site-logo-text { font-family: var(--font-serif); font-weight: 700; font-size: 18px; }
.mobile-nav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: 30px;
	line-height: 1;
	color: var(--color-black);
}

.mobile-nav__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px var(--container-padding) 40px;
}

.nav-menu--mobile { flex-direction: column; gap: 0; }
.nav-menu--mobile > li { border-bottom: 1px solid var(--color-border); padding-block: 2px; }
.nav-menu--mobile > li:last-child { border-bottom: 0; }
.nav-menu--mobile > li > a {
	display: block;
	padding: 14px 4px 10px;
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--color-black);
}

/* Children: always visible, visually subordinate to the parent —
   smaller/muted text + a gold rule marking the group, not a full
   border-box (spec: "過度なBorder Box化は不要"). */
.nav-menu--mobile .sub-menu {
	padding: 0 0 12px 16px;
	margin-left: 4px;
	border-left: 2px solid var(--color-gold);
}
.nav-menu--mobile .sub-menu li { border-bottom: 0; }
.nav-menu--mobile .sub-menu a {
	display: block;
	padding: 9px 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-muted);
}
.nav-menu--mobile .sub-menu a:hover,
.nav-menu--mobile .sub-menu a:focus-visible { color: var(--color-gold-dark); }

.mobile-nav__actions { margin-top: 20px; }
.mobile-nav__actions .btn { width: 100%; }

/* Menu-open state (T002-F4): lock background scroll, hide the fixed
   CTA bar so it never overlaps the overlay. Unconditional (not media-
   scoped) — harmless on desktop since .fixed-cta is already
   display:none there regardless, and higher specificity than the
   ≤640px .fixed-cta{display:grid} rule guarantees it wins on mobile. */
body.is-mobile-nav-open { overflow: hidden; }
body.is-mobile-nav-open .fixed-cta { display: none; }

/* ---------- 10. Hero ---------- */
.hero { position: relative; }

/* Desktop: supplied composite visual (shown >640px, hidden by default
   on mobile — see breakpoint below). Full-bleed background per the
   "背景=100vw" rule; CTA row sits in a plain band under the image
   rather than overlaid, since the photo's contrast varies edge to edge. */
.hero__visual { display: block; background: var(--color-black); }
.hero__visual img { width: 100%; height: auto; display: block; }
/* Container so the rating panel below can be placed in units of the
   artwork's own width rather than the viewport's — the two stay aligned
   whatever the scrollbar does. */
.hero__visual-media { position: relative; container-type: inline-size; line-height: 0; }

/* Covers the "4.78 ／ ※2025年4月時点" badge painted into the supplied
   hero and restates the confirmed rating as real text. Geometry is
   measured from the 2400x1203 artwork: the badge disc spans x 1948-2282
   and y 705-1038, with the caption line ending at y 1128. This panel
   covers both, so no stale figure or date can show at any width. */
.hero__rating {
	position: absolute;
	left: 81.17%;                 /* 1948 / 2400 */
	top: 58.6%;                   /* 705 / 1203  */
	width: 13.92%;                /* 334 / 2400  */
	height: 35.2%;                /* 423 / 1203  */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4cqw;
	box-sizing: border-box;
	padding: 1cqw 0.6cqw;
	border-radius: 1.6cqw;
	/* Matches the gold of the badge it replaces (sampled #E0BB62 → #DFAA5A). */
	background: linear-gradient(180deg, #e3c069 0%, #dcaa57 100%);
	box-shadow: 0 0.3cqw 0.9cqw rgba(17, 17, 17, 0.28);
	color: #1b2a4a;
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
}
.hero__rating-label { font-size: 1.55cqw; font-weight: 700; letter-spacing: 0.01em; }
.hero__rating-score { font-family: var(--font-serif); font-size: 4.4cqw; font-weight: 700; font-style: italic; }
.hero__rating-suffix { font-size: 1.9cqw; font-weight: 700; }
/* Full-width background band; the .container child inside handles
   centering/max-width so the background never gets clipped to 90%
   and shows the parent's black background as side bands (former bug). */
.hero__visual-cta { background: var(--color-bg-alt); }
.hero__visual-cta-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	padding-block: 28px;
}

/* Smartphone: HTML fallback hero (hidden by default, shown <=640px) */
.hero__mobile {
	display: none;
	position: relative;
	color: var(--color-white);
	min-height: 100vh;
	overflow: hidden;
	align-items: flex-end;
}
.hero__mobile-bg, .hero__overlay { position: absolute; inset: 0; }
.hero__mobile-bg { background: linear-gradient(135deg, #1c1c1c 0%, #101f3c 55%, #3a2f14 100%); }
.hero__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 85%); }
.hero__content { position: relative; z-index: 2; padding-block: 64px 56px; }
.hero__eyebrow { letter-spacing: 0.15em; font-size: 12px; color: var(--color-gold); font-weight: 700; margin: 0 0 16px; }
.hero__catch { font-family: var(--font-serif); font-size: clamp(28px, 6vw, 40px); line-height: 1.4; margin: 0 0 20px; }
.hero__sub { max-width: 560px; font-size: 15px; color: rgba(255,255,255,0.85); margin: 0 0 24px; }
.hero__strengths { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.hero__strengths li { font-size: 13px; font-weight: 700; padding-left: 20px; position: relative; }
.hero__strengths li::before { content: '✓'; position: absolute; left: 0; color: var(--color-gold); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 11. Assessment CTA ---------- */
/* Cards are supplied composite images (.eb-img-link handles the
   hover/focus treatment) — this just controls the grid. */
.assessment-cta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: center; }

/* ---------- 12. Reasons ---------- */
.reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.reasons__item {
	text-align: center;
	padding: 32px 20px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.reasons__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.reasons__icon { width: 56px; height: 56px; margin: 0 auto 16px; }
.reasons__title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.reasons__desc { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ---------- 13. Brands ---------- */
.brands__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.brand-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 22px 12px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	font-family: var(--font-serif);
	font-weight: 700;
	letter-spacing: 0.05em;
	transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.brand-item:hover { border-color: var(--color-gold); background: var(--color-bg-alt); transform: translateY(-2px); }
/* Thumbnail slot. Holds a real logo when one is supplied as term meta;
   until then a monogram tile, so the grid reads as cards rather than a
   list of words. No imitation trademark artwork is drawn. */
.brand-item__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-sm, 6px);
	background: linear-gradient(150deg, rgba(200, 163, 94, 0.16) 0%, rgba(17, 17, 17, 0.05) 100%);
	overflow: hidden;
}
/* A real picture gets a plain ground: the gold wash suits a monogram but
   tints a photograph. contain, not cover, since the image may be a logo
   with its own margins — cropping one would clip the mark. */
.brand-item__thumb--image { background: var(--color-bg-alt, #faf8f4); padding: 8px; }
.brand-item__logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.brand-item__initial {
	font-family: var(--font-serif);
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 700;
	line-height: 1;
	color: var(--color-gold-dark);
}
.brand-item__name { font-size: 14px; line-height: 1.5; text-align: center; color: var(--color-black); }
.brands__more { text-align: center; color: var(--color-text-muted); font-size: 13px; margin-top: 24px; }
.brands__cta { display: flex; justify-content: center; margin-top: 20px; }

/* ---------- 14. Slider (vanilla) ---------- */
.eb-slider { position: relative; }
.eb-slider__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.eb-slider__track::-webkit-scrollbar { display: none; }
.eb-slider__slide {
	flex: 0 0 calc((100% - 24px * 3) / 4);
	scroll-snap-align: start;
}

/* ---------- 15. Metal Rate ---------- */
.metal-rate { background: var(--color-bg-alt); }
.metal-rate__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metal-rate__item {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 24px 16px;
	text-align: center;
	box-shadow: var(--shadow-card);
}
.metal-rate__label { font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin: 0 0 8px; }
.metal-rate__price { font-size: 22px; font-weight: 700; color: var(--color-gold-dark); margin: 0; font-family: var(--font-serif); }
.metal-rate__unit { font-size: 11px; color: var(--color-text-muted); margin: 4px 0 0; }

/* ---------- 16. First Time Guide ---------- */
.first-time-guide__banner { display: block; margin-bottom: 32px; }
.first-time-guide__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.first-time-guide__step {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 28px 20px;
	text-align: center;
}
.first-time-guide__num { display: block; font-family: var(--font-serif); font-size: 28px; color: var(--color-gold); font-weight: 700; margin-bottom: 8px; }
.first-time-guide__title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.first-time-guide__desc { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ---------- 17. FAQ ---------- */
.faq__list { max-width: 800px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__question-wrap { margin: 0; }
.faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 4px;
	text-align: left;
	font-weight: 700;
	font-size: 15px;
}
.faq__icon { font-size: 20px; color: var(--color-gold); transition: transform var(--transition-base); flex-shrink: 0; }
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding: 0 4px 20px; color: var(--color-text-muted); font-size: 14px; }
.faq__answer[hidden] { display: none; }

/* ---------- 18. Store / Access ---------- */
.store-access__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.store-access__list { margin: 20px 0 28px; }
.store-access__row { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.store-access__row dt { flex: 0 0 90px; font-weight: 700; font-size: 13px; color: var(--color-text-muted); }
.store-access__row dd { margin: 0; font-size: 14px; }
.store-access__phone { margin-bottom: 20px; }

/* Assessment phone CTA — text + inline SVG, replacing the old
   number-baked-into-a-PNG artwork. Sized with clamp() so the number
   never overflows a narrow phone screen without needing a breakpoint. */
.phone-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	min-height: 44px;
	text-decoration: none;
	color: var(--color-black);
	transition: opacity var(--transition-fast, 150ms ease);
}
.phone-cta:hover,
.phone-cta:focus-visible { opacity: 0.75; }
.phone-cta__icon {
	flex: 0 0 auto;
	width: clamp(34px, 7vw, 46px);
	height: clamp(34px, 7vw, 46px);
	color: var(--color-gold-dark);
}
.phone-cta__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.phone-cta__body { display: flex; flex-direction: column; min-width: 0; }
.phone-cta__number {
	font-size: clamp(27px, 6vw, 44px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--color-black);
}
.phone-cta__hours {
	margin-top: 6px;
	font-size: clamp(12px, 2.6vw, 15px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-black);
}

/* Phone CTA cards that replaced composite PNGs. They sit beside sibling
   cards that are still images, so they keep the artwork's aspect ratio
   and size their type in cqw — that way they scale exactly like an image
   at every column width instead of drifting out of step at breakpoints. */
.phone-card,
.phone-btn {
	container-type: inline-size;
	text-decoration: none;
	overflow: hidden;
	border-radius: var(--radius-md);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	/* Both sit inside a grid/flex parent, where the default min-width:auto
	   would floor the item at the min-content width of its nowrap phone
	   number. Measured widths fit without this, but it keeps the column —
	   not the text — deciding the width, which is what the cqw type sizing
	   is measured against. */
	min-width: 0;
}
.phone-card:hover,
.phone-btn:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-card); }
.phone-card:focus-visible,
.phone-btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

/* TOP assessment CTA — white card, gold rule, gold action bar. */
.phone-card {
	display: flex;
	flex-direction: column;
	aspect-ratio: 1605 / 684;
	background: var(--color-white);
	border: 2px solid var(--color-gold-dark);
	color: var(--color-gold-dark);
}
.phone-card__top {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4cqw;
	padding-inline: 4cqw;
	min-width: 0;
}
.phone-card__icon { flex: 0 0 auto; width: 13cqw; color: var(--color-gold-dark); }
.phone-card__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.phone-card__text { display: flex; flex-direction: column; min-width: 0; }
.phone-card__title { font-size: 6.2cqw; font-weight: 700; line-height: 1.15; }
.phone-card__hours { font-size: 3.2cqw; font-weight: 700; line-height: 1.4; }
.phone-card__number { font-size: 8.2cqw; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.phone-card__bar {
	flex: 0 0 42%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gold-dark);
	color: var(--color-white);
	font-size: 4cqw;
	font-weight: 700;
}

/* Watch LP final CTA — solid gold button beside the LINE image button. */
.phone-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Tight gap/padding/icon: at the 260px desktop width the reception-hours
	   line is the longest string, and roomier values pushed it onto a second
	   line, splitting 年中無休 mid-word. */
	gap: 4cqw;
	aspect-ratio: 1412 / 458; /* matches the sibling cta-line.png button */
	padding-inline: 4cqw;
	background: var(--color-gold-dark);
	color: var(--color-white);
}
.phone-btn__icon { flex: 0 0 auto; width: 13cqw; color: var(--color-white); }
.phone-btn__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.phone-btn__text { display: flex; flex-direction: column; min-width: 0; }
.phone-btn__title { font-size: 7cqw; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.phone-btn__hours { font-size: 3.9cqw; font-weight: 700; line-height: 1.4; white-space: nowrap; }
/* 10cqw, not 11 — at 11 the 12-character number left only ~3% slack
   against the available text column, which font-metric variation could
   eat. 10 keeps it comfortably on one line at every button width. */
.phone-btn__number { font-size: 10cqw; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.store-access__buttons { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.store-access__store-list { max-width: 220px; }
.store-access__map {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	padding: 32px;
}
.store-access__map .eb-img { width: 100%; height: auto; object-fit: contain; max-width: 420px; }

/* ---------- 19. Final CTA ---------- */
.final-cta { background: var(--color-black); }
.final-cta__inner { text-align: center; }
.final-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
.final-cta__img-btn { width: 220px; }

/* ---------- 20. Footer ---------- */
.site-footer { background: #161513; color: rgba(255,255,255,0.8); padding-block: 56px 24px; }
.site-footer__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.12); }
/* The supplied logo art is dark maroon/gold, designed for a light
   background — a plain white card keeps it fully legible on the dark
   footer without needing a separate "dark mode" logo asset. */
.site-footer__logo {
	display: inline-block;
	background: var(--color-white);
	padding: 10px 18px;
	border-radius: var(--radius-sm);
}
.site-footer__logo .site-logo-img,
.site-footer__logo .custom-logo { height: 44px; width: auto; display: block; }
.site-footer__logo .site-logo-text { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--color-black); }
.site-footer__tel-label {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-gold);
	background: rgba(200, 163, 94, 0.15);
	border-radius: 3px;
	padding: 2px 6px;
	margin-right: 8px;
	vertical-align: middle;
}
.site-footer__tel a { color: var(--color-white); font-weight: 700; font-size: 18px; }
.site-footer__tel, .site-footer__hours { margin: 8px 0 0; font-size: 13px; }
.nav-menu--footer { display: flex; flex-wrap: wrap; gap: 16px; }
.nav-menu--footer a { font-size: 13px; }
.site-footer__sns { display: flex; align-items: center; gap: 16px; align-self: flex-start; }
.site-footer__sns-pending { font-size: 13px; color: rgba(255,255,255,0.5); }
.site-footer__bottom { padding-top: 20px; font-size: 12px; }
.site-footer__copyright { margin: 0; }

/* ---------- 21. Fixed CTA (Smartphone) ---------- */
.fixed-cta {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 600;
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
	/* Notched-device home-indicator clearance. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 22. Fade-up animation ---------- */
.eb-fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.eb-fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* First Time Guide banner (T002-F1) — same .eb-fade-up/IntersectionObserver
   mechanism (main.js doesn't need to know about this), just a slightly
   richer entrance for this one element: fade + rise + a subtle scale-in. */
.first-time-guide__banner.eb-fade-up {
	transform: translateY(24px) scale(0.98);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.first-time-guide__banner.eb-fade-up.is-visible { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
	.eb-fade-up { opacity: 1; transform: none; transition: none; }
	.first-time-guide__banner.eb-fade-up { opacity: 1; transform: none; transition: none; }
}

/* Logo intro (applied via JS class on load) */
.site-header__logo-link { opacity: 0; transform: scale(0.96); animation: eb-logo-in 0.7s ease forwards 0.1s; }
@keyframes eb-logo-in {
	to { opacity: 1; transform: scale(1); }
}

/* ---------- 23. Purchase Item LP (T002) ----------
   Hero/Purchase Methods/Brands/Customer Voices/FAQ reuse the TOP
   sections' own CSS (.hero*, .purchase-methods*, .brands*, .faq*)
   unchanged — only LP-specific classes are defined here. */
.lp-container { max-width: 1160px; }

.lp-intro__text { max-width: 760px; margin-inline: auto; text-align: center; font-size: 16px; color: var(--color-text-muted); }

/* Ground and heading colour now come from .section--accent-beige; the dark
   gradient and white heading this block used to set are gone rather than
   left here to be overridden. */
.lp-reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-reasons__item {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-base);
}
.lp-reasons__item:hover { transform: translateY(-3px); }
.lp-reasons__item img { max-width: 100%; height: auto; display: block; }

.lp-final-cta { padding-block: 0; background: var(--color-black); }
.lp-final-cta__banner { line-height: 0; }
.lp-final-cta__banner img { width: 100%; height: auto; display: block; }
.lp-final-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding-block: 32px;
}
.lp-final-cta__btn { width: 260px; }
.lp-final-cta__web-btn { flex-shrink: 0; }

/* Closing banner (LP, last block). The artwork is a wide 3.5:1 strip with
   its copy painted in, so .eb-img-link supplies the frame and hover state
   and only the spacing is set here. Below 640px it runs edge to edge: the
   container's 5vw gutters cost enough width at that size to make the
   baked-in wording noticeably smaller, and a full-bleed strip is also the
   cleaner way to end the page above the footer. */
.lp-closing-banner { padding-block: 0 clamp(40px, 6vw, 72px); }
.lp-closing-banner__img { width: 100%; height: auto; display: block; }

/* ---------- 買取品目 index (T012) ----------
   Eight text cards, two up on desktop and tablet, one up on phones. No
   imagery: the job here is to let someone scan the eight categories and
   get to the right LP, so each card is heading, one line of summary and
   its own button. The button sits on its own row at the foot of the card
   so all eight line up regardless of how long the summary runs. */
.item-index__lead { max-width: 720px; margin-inline: auto; text-align: center; }
.item-index__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.item-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px 32px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.item-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.item-card__title {
	margin: 0 0 14px;
	padding-bottom: 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	border-bottom: 1px solid var(--color-border);
}
/* Gold tick before the category name — the same marker the shop list uses. */
.item-card__title::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 1em;
	margin-right: 10px;
	vertical-align: -0.12em;
	background: var(--color-gold);
	border-radius: 2px;
}
.item-card__desc { margin: 0 0 22px; font-size: 14px; line-height: 1.9; color: var(--color-text-muted); }
/* margin-top:auto pins the button to the bottom of the taller card. */
.item-card__btn { align-self: flex-start; margin-top: auto; }

.faq__view-all { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- 24. Company Page (T002-F2) ---------- */

/* Hero: same overlay/eyebrow/catch language as the mobile TOP hero,
   reused rather than a new visual style. */
.company-hero {
	position: relative;
	color: var(--color-white);
	min-height: 56vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.company-hero__media, .company-hero__overlay { position: absolute; inset: 0; }
.company-hero__media .eb-img { width: 100%; height: 100%; object-fit: cover; }
.company-hero__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 90%); }
.company-hero__content { position: relative; z-index: 2; padding-block: 48px 40px; }
.company-hero__eyebrow { letter-spacing: 0.2em; font-size: 12px; color: var(--color-gold); font-weight: 700; margin: 0 0 12px; }
.company-hero__title { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin: 0 0 12px; }
.company-hero__catch { font-family: var(--font-serif); font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,0.9); margin: 0; }

/* Philosophy: the symbolic, high-whitespace section. */
.philosophy__inner { text-align: center; max-width: 800px; }
.philosophy__label { letter-spacing: 0.2em; font-size: 12px; font-weight: 700; color: var(--color-gold-dark); margin: 0 0 20px; }
.philosophy__statement {
	font-family: var(--font-serif);
	font-size: clamp(28px, 4.5vw, 44px);
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 32px;
}
.philosophy__body { font-size: 15px; color: var(--color-text-muted); line-height: 2; margin: 0; }

/* Greeting reuses .page-content__body (page.php) — just constrain width a bit more. */
.greeting__body { max-width: 720px; margin-inline: auto; }

/* Company Info: table + map side by side on desktop. */
.company-info { background: var(--color-bg-alt); }
.company-info__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.company-info__table { background: var(--color-white); border-radius: var(--radius-md); padding: 8px 28px; box-shadow: var(--shadow-card); }
.company-info__row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.company-info__row:last-child { border-bottom: 0; }
.company-info__row dt { font-weight: 700; font-size: 13px; color: var(--color-text-muted); }
.company-info__row dd { margin: 0; font-size: 14px; line-height: 1.7; }
.company-info__row dd a { text-decoration: underline; text-underline-offset: 2px; }
.company-info__map-wrap { display: flex; flex-direction: column; gap: 16px; }
.company-info__profile-link { align-self: flex-start; }

/* Shared Google Maps embed sizing (Company Info + Store Guide cards) —
   fixed height rather than aspect-ratio, since the supplied embed SRC
   is a wide 4:3-ish view that crops oddly at very tall/narrow ratios. */
.company-map {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.company-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* Mission / Vision: 2 cards side by side on desktop. */
.mission-vision__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.mission-vision__item {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 40px 32px;
	text-align: center;
}
.mission-vision__label { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--color-gold-dark); margin: 0 0 16px; }
.mission-vision__text { font-size: 15px; line-height: 1.9; margin: 0; }

/* Strengths: reuses .reasons__grid/.reasons__item (TOP), just adds a number badge. */
.strengths__item { position: relative; }
.strengths__num {
	position: absolute;
	top: 16px;
	right: 20px;
	font-family: var(--font-serif);
	font-size: 13px;
	font-weight: 700;
	color: var(--color-border);
}

/* Store Guide: 2 cards. */
.stores__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.store-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}
.store-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.store-card__media .eb-img,
.store-card__media .eb-img--placeholder { width: 100%; height: 100%; }
.store-card__map { height: 100%; border-radius: 0; box-shadow: none; }
.store-card__map iframe { height: 100%; }
.store-card__body { padding: 24px; }
.store-card__name { font-size: 16px; font-weight: 700; margin: 0 0 16px; line-height: 1.5; }
.store-card__list { margin: 0 0 20px; }
.store-card__row { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.store-card__row:last-child { border-bottom: 0; }
.store-card__row dt { flex: 0 0 70px; font-weight: 700; font-size: 12px; color: var(--color-text-muted); }
.store-card__row dd { margin: 0; font-size: 13px; }
.store-card__links { display: flex; flex-wrap: wrap; gap: 10px; }
.store-card__links .btn { flex: 1 1 auto; white-space: nowrap; }

/* ---------- 25. SNS Info (T002-F4) ---------- */
/* Eightbuy 公式SNS — one card per configured provider. The grid adapts
   to how many are set, so one account is a single wide card rather than
   a third of a row with two gaps beside it. */
.social-info__grid { display: grid; gap: 24px; }
.social-info__grid--2 { grid-template-columns: repeat(2, 1fr); }
.social-info__grid--3 { grid-template-columns: repeat(3, 1fr); }
.social-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 28px 24px;
	box-shadow: var(--shadow-card);
}
.social-card__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--color-gold-dark);
	text-align: center;
}
.social-card__desc { margin: 0; font-size: 14px; line-height: 1.9; color: var(--color-text-muted); text-align: center; }
.social-card__feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.social-card__feed-item { margin: 0; }
.social-card__feed-item a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-bg-alt); }
/* A post image that fails to load leaves its square, not a collapsed row. */
.social-card__feed-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Height is reserved before the third-party script swaps the placeholder
   markup for the real embed, so nothing below jumps when it arrives. The
   cap keeps a long timeline from stretching the TOP page. If the script
   never runs — blocked, offline, or a profile that cannot be embedded —
   the reserved box is not left blank: the markup inside it is a link to
   the account, centred here so it reads as intentional. */
.social-card__embed {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	max-height: 560px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	/* Deliberately no background: an embed that never arrives should read
	   as empty space above the account button, not as a grey panel that
	   failed to load. */
	text-align: center;
}
.social-card__embed > * { width: 100%; margin: 0; }
.social-card__embed a { color: var(--color-gold-dark); font-weight: 700; text-decoration: none; }
.social-card__embed a:hover { text-decoration: underline; }
.social-card__embed iframe { max-width: 100% !important; }
.social-card__cta { margin-top: auto; align-self: center; }

/* 会社概要 footer SNS links */
.company-social__links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.company-social__btn { min-width: 280px; justify-content: center; text-align: center; }

/* =========================================================
   Responsive
   ========================================================= */

/* ---- Tablet: <=1024px ---- */
@media (max-width: 1024px) {
	/* The nav is still on one row here and the bar is tighter, so the logo
	   takes a smaller step up than on desktop. */
	.site-header__logo-link .site-logo-img,
	.site-header__logo-link .custom-logo { height: 44px; }

	.card-grid,
	.card-grid--blog { grid-template-columns: repeat(2, 1fr); }
	.eb-slider__slide { flex-basis: calc((100% - 24px * 2) / 3); }
	.brands__grid { grid-template-columns: repeat(3, 1fr); }
	.metal-rate__grid { grid-template-columns: repeat(2, 1fr); }
	.reasons__grid { grid-template-columns: repeat(2, 1fr); }
	.assessment-cta__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
	.store-access__inner { grid-template-columns: 1fr; }
	.lp-reasons__grid { grid-template-columns: repeat(2, 1fr); }
	.company-info__grid { grid-template-columns: 1fr; }

	/* Global Nav grew to 6 top-level items in T001-F2 — tighten before
	   the hamburger takes over at 640px so it doesn't wrap awkwardly. */
	.site-header__inner { gap: 12px; }
	.nav-menu { gap: 12px; }
	.nav-menu a { font-size: 12px; }
	.header-action--img { height: 28px; }
	.header-action--tel .header-action__label { display: none; }
}

/* ---- Smartphone: <=640px ---- */
@media (max-width: 640px) {
	/* Mobile was already balanced against the hamburger, so the logo keeps
	   its original 40px rather than following the desktop step up. */
	.site-header__logo-link .site-logo-img,
	.site-header__logo-link .custom-logo { height: 40px; }

	body { font-size: 15px; }

	.container { width: 92%; }

	.site-header__nav,
	.site-header__actions { display: none; }
	.menu-toggle { display: flex; }

	.heading--h1 { font-size: 26px; }
	.heading--h2 { font-size: 22px; }

	.sitemap__list { grid-template-columns: 1fr; }

	/* Composite hero image is Desktop-oriented and unreadable when
	   squeezed to mobile width — swap to the HTML fallback hero instead. */
	.hero__visual { display: none; }
	.hero__mobile { display: flex; }
	/* Bottom padding clears the fixed CTA bar (position:fixed;bottom:0)
	   so it never sits over the hero's own CTA row on initial load —
	   min-height:100vh just grows a little to fit, not a blanket
	   sitewide padding hack. */
	.hero__content { padding-block: 40px calc(var(--fixed-cta-height) + 40px + env(safe-area-inset-bottom, 0px)); }
	.hero__cta { flex-direction: column; }
	.hero__cta .btn { width: 100%; }

	.card-grid,
	.card-grid--blog,
	.card-grid--3col,
	.reasons__grid,
	.first-time-guide__steps { grid-template-columns: 1fr 1fr; gap: 14px; }

	/* The remaining composite images are wide (~2.3:1) — 2-up makes the
	   baked-in text too small to read, so stack them instead. The method
	   cards stack for a different reason: three lines of copy under a
	   half-width card wrap into a column of fragments. */
	.assessment-cta__grid,
	.card-grid--3col.methods__grid,
	.lp-reasons__grid { grid-template-columns: 1fr; gap: 14px; }

	.metal-rate__grid { grid-template-columns: repeat(2, 1fr); }
	.brands__grid { grid-template-columns: repeat(2, 1fr); }

	.lp-final-cta__buttons { flex-direction: column; }
	.lp-final-cta__btn,
	.lp-final-cta__web-btn { width: 100%; }

	.eb-slider__slide { flex-basis: calc((100% - 16px) / 2); }
	.eb-slider__track { gap: 16px; }

	.section__head { flex-direction: column; align-items: flex-start; gap: 8px; }

	.final-cta__buttons { flex-direction: column; }
	.final-cta__buttons .btn,
	.final-cta__img-btn { width: 100%; }

	.site-footer__top { flex-direction: column; }

	.company-hero { min-height: 48vh; }
	.company-info__grid { grid-template-columns: 1fr; }
	.company-info__row { grid-template-columns: 1fr; gap: 4px; }
	.mission-vision__grid { grid-template-columns: 1fr; }
	.stores__grid { grid-template-columns: 1fr; }
	.company-map iframe { height: 320px; }
	.social-info__grid--2,
	.social-info__grid--3 { grid-template-columns: 1fr; }
	.social-card { padding: 24px 20px; }
	.social-card__embed { min-height: 260px; }
	.company-social__btn { min-width: 0; width: 100%; }

	/* Closing banner goes full-bleed here — see the base rule. Cancels the
	   container's own width and the rounded corners that go with a card. */
	.lp-closing-banner .container { width: 100%; max-width: none; padding-inline: 0; }
	.lp-closing-banner__link { border-radius: 0; }

	/* Fixed CTA visible only on smartphone */
	.fixed-cta {
		display: grid;
		grid-template-columns: repeat(var(--fixed-cta-count, 4), 1fr);
	}
	.fixed-cta__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 8px 4px 10px;
		font-size: 11px;
		font-weight: 700;
		min-height: 48px;
		justify-content: center;
	}
	.fixed-cta__icon { font-size: 18px; }
	.fixed-cta__item--tel { color: var(--color-black); }
	.fixed-cta__item--line { color: var(--color-line); }
	.fixed-cta__item--mail { color: var(--color-gold-dark); }
	.fixed-cta__item--map { color: var(--color-text-muted); }

	/* Reserve room so fixed CTA never covers footer content */
	body { padding-bottom: calc(var(--fixed-cta-height) + env(safe-area-inset-bottom, 0px)); }
}

/* Ensure buttons stay comfortably tappable on touch devices */
@media (pointer: coarse) {
	.btn, .faq__question, .menu-toggle, .nav-menu--mobile a { min-height: 44px; }
}

/* ==========================================================================
   S3-T001 — Wireframe pages (breadcrumb, lower-page sections)
   All selectors are component-scoped; no bare element overrides.
   ========================================================================== */

/* ---------- shared modifiers ---------- */
.section--tight { padding-block: 36px; }
.section--dark { background: var(--color-black); color: var(--color-white); }
/* ---------- section accent (T011) ----------
   One ground colour for the sections the client picked out: the
   "理由" blocks, the per-method 特徴・メリット rows, ご来店の流れ and
   手数料はすべて無料. Four of those were previously section--dark, so the
   rules below undo the on-dark treatment rather than leaving white text
   on a light ground: headings and body take the normal dark text, and the
   inner panels — which were translucent white over black — become solid
   white cards, which is what the light sections already use.
   Muted grey (#6b6b6b) only reaches 2.6:1 here, so descriptions inside
   accent panels drop back to the full text colour. */
.section--accent-beige {
	background: var(--color-accent-beige);
	color: var(--color-text);
}
.section--accent-beige .heading,
.section--accent-beige .heading--on-dark,
.section--accent-beige p,
.section--accent-beige li,
.section--accent-beige dt,
.section--accent-beige dd { color: var(--color-text); }

/* Panels sitting on the accent: solid white, hairline border. */
.section--accent-beige .feature-blocks__item,
.section--accent-beige .fees__item {
	background: var(--color-white);
	border-color: var(--color-border);
}
.section--accent-beige .feature-blocks__title,
.section--accent-beige .fees__label { color: var(--color-text); }
.section--accent-beige .feature-blocks__desc,
.section--accent-beige .category-reasons__desc { color: var(--color-text); }
/* The ¥0 figures keep their emphasis but move to the darker gold, which
   holds up on white where the lighter gold was tuned for black. */
.section--accent-beige .fees__amount { color: var(--color-gold-dark); }
/* Icon ring was drawn for a black ground; on white it needs the gold at
   full strength instead of a 10% wash. */
.section--accent-beige .feature-blocks__icon {
	border-color: rgba(168, 130, 63, 0.55);
	background: rgba(200, 163, 94, 0.16);
}

.section--dark p,
.section--dark li { color: rgba(255, 255, 255, 0.86); }

/* ---------- breadcrumb ---------- */
.breadcrumb { border-bottom: 1px solid var(--color-border); background: var(--color-white); }
.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	font-size: 12px;
	color: var(--color-text-muted);
}
.breadcrumb__item + .breadcrumb__item::before { content: '›'; margin-right: 10px; color: var(--color-border); }
.breadcrumb__item a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--color-gold-dark); text-decoration: underline; }
.breadcrumb__item [aria-current] { color: var(--color-black); font-weight: 700; }

/* ---------- placeholder ---------- */
.eb-placeholder {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background:
		linear-gradient(135deg, rgba(200, 163, 94, 0.06) 0%, rgba(17, 17, 17, 0.03) 100%),
		var(--color-white);
	text-align: center;
}
.eb-placeholder__mark {
	width: 34px;
	height: 34px;
	border: 2px solid var(--color-gold);
	border-radius: 50%;
	opacity: 0.6;
}
.eb-placeholder__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}
.eb-placeholder--qr { max-width: 200px; margin-inline: auto; }

/* LINE QR — the code plus a caption, the whole block being the link so a
   phone visitor can tap it instead of trying to scan its own screen. */
.line-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 200px;
	margin-inline: auto;
	padding: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.line-qr:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.line-qr:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.line-qr__img { display: block; width: 100%; height: auto; }
.line-qr__caption { font-size: 11px; line-height: 1.6; text-align: center; color: var(--color-text-muted); }

/* Filled counterpart of .eb-placeholder — same slot, same aspect box, so
   swapping one for the other never moves the surrounding layout. */
.eb-media {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}
.eb-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The storefront photo is close to square; a centred 4:3 crop cuts the
   signage off the top, which is the one thing that shot exists to show. */
.eb-media--top .eb-media__img { object-position: center top; }

/* ---------- lower-page FV ---------- */
/* Lower-page FV. Most of these have no photography yet, so the flat panel
   read thin next to the LP first views. A restrained gold wash plus a soft
   off-centre glow gives it depth without tinting the text or competing
   with the copy — the darkest point stays around 12% opacity. */
.page-hero {
	position: relative;
	padding-block: 56px;
	background:
		radial-gradient(80% 120% at 88% 0%, rgba(200, 163, 94, 0.20) 0%, rgba(200, 163, 94, 0) 62%),
		radial-gradient(70% 100% at 0% 100%, rgba(168, 130, 63, 0.12) 0%, rgba(168, 130, 63, 0) 60%),
		linear-gradient(180deg, rgba(200, 163, 94, 0.10) 0%, rgba(255, 255, 255, 0) 78%),
		var(--color-white);
}
/* Hairline in the brand gold, closing the section off from what follows. */
.page-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(200, 163, 94, 0) 0%, rgba(200, 163, 94, 0.5) 50%, rgba(200, 163, 94, 0) 100%);
}
/* A page whose FV carries a real photograph already has its own weight —
   /related-stores/ uses the shop exterior — so the wash is pulled back and
   only the base tint remains. */
.page-hero--has-image {
	background: linear-gradient(180deg, rgba(200, 163, 94, 0.07) 0%, rgba(255, 255, 255, 0) 70%), var(--color-white);
}
.page-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
/* Text-only FV (page-hero 'media' => false): one column, and the lead is
   held to a comfortable measure rather than running the full 1320px. */
.page-hero--no-media .page-hero__inner { grid-template-columns: 1fr; }
.page-hero--no-media .page-hero__lead { max-width: 720px; }
.page-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	color: var(--color-gold-dark);
}
.page-hero__title { margin: 0 0 16px; }
.page-hero__lead { margin: 0 0 24px; font-size: 15px; line-height: 1.9; color: var(--color-text-muted); }
.page-hero__badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.page-hero__badge {
	flex: 1 1 150px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	text-align: center;
}
.page-hero__badge-title { display: block; font-weight: 700; font-size: 15px; color: var(--color-black); }
.page-hero__badge-desc { display: block; margin-top: 4px; font-size: 12px; color: var(--color-text-muted); }
.page-hero__img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }

/* ---------- CTA row ---------- */
.cta-row__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta-row__buttons .btn { flex: 0 1 260px; justify-content: center; text-align: center; }
.cta-row__lead { margin: 0 0 20px; text-align: center; font-size: 15px; font-weight: 700; }
.cta-row--banner { background: var(--color-black); color: var(--color-white); }
.cta-row--banner .cta-row__lead { color: var(--color-white); }

/* ---------- service intro ---------- */
.method-intro__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
/* Visual left, copy right — 宅配買取 only. The DOM keeps copy first so the
   heading still leads the document; only the painted order swaps. The
   column ratio is mirrored so the text column stays the wider of the two. */
.method-intro__inner--reverse { grid-template-columns: 0.85fr 1.15fr; }
.method-intro__inner--reverse .method-intro__body { order: 2; }
.method-intro__inner--reverse .method-intro__media { order: 1; }
.method-intro__body p { margin: 0 0 16px; font-size: 15px; line-height: 2; }
.method-intro__body p:last-child { margin-bottom: 0; }

/* ---------- checklist ---------- */
.checklist__inner--media { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.checklist__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.checklist__item {
	position: relative;
	padding: 14px 16px 14px 46px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	font-size: 15px;
	font-weight: 500;
}
.checklist__item::before {
	content: '✓';
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	color: var(--color-gold-dark);
}
.checklist__note { margin: 24px 0 0; text-align: center; font-weight: 700; }

/* ---------- feature blocks (dark) ---------- */
.feature-blocks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature-blocks__grid--3 { grid-template-columns: repeat(3, 1fr); }
.feature-blocks__item {
	padding: 28px 20px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
}
/* Icon carries the block on a dark background, so it is set noticeably
   larger and centred, inside a ring that keeps it readable against the
   panel. clamp() stops it dominating the card once it stacks on mobile. */
.feature-blocks__icon {
	display: block;
	width: clamp(56px, 8vw, 76px);
	height: clamp(56px, 8vw, 76px);
	margin: 0 auto 18px;
	padding: 12px;
	border: 1px solid rgba(200, 163, 94, 0.55);
	border-radius: 50%;
	background: rgba(200, 163, 94, 0.10);
	object-fit: contain;
}
.feature-blocks__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--color-white); }
.feature-blocks__desc { margin: 8px 0 0; font-size: 13px; }

/* ---------- purchase flow ---------- */
.purchase-flow__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.purchase-flow__list--4 { grid-template-columns: repeat(4, 1fr); }
.purchase-flow__list--3 { grid-template-columns: repeat(3, 1fr); }
/* Step cards share one rhythm — badge, pictogram, heading, description —
   and stretch to a common height, so a longer description in one step
   cannot drop that card's baseline below its neighbours (T013-F2 ⑦). */
.purchase-flow__list { align-items: stretch; }
.purchase-flow__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 24px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	text-align: center;
}
/* Supplied line drawing above the step heading, in a ring that matches
   the one the 24時間 cards use. Decorative — the badge and heading carry
   the meaning — and a fixed box so all five icons sit on one line. */
.purchase-flow__icon {
	display: block;
	width: 60px;
	height: 60px;
	margin: 4px auto 12px;
	padding: 10px;
	border: 1px solid rgba(191, 181, 142, 0.9);
	border-radius: 50%;
	background: rgba(191, 181, 142, 0.14);
	object-fit: contain;
}
.purchase-flow__num {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--color-gold-dark);
	color: var(--color-white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.purchase-flow__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.purchase-flow__desc { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.purchase-flow__item + .purchase-flow__item::before {
	content: '';
	position: absolute;
	left: -12px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--color-gold);
	border-right: 2px solid var(--color-gold);
	transform: translateY(-50%) rotate(45deg);
}

/* ---------- packing / photo tips (3-4 up media cards) ---------- */
.packing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* 上手な写真の撮り方 (T013 ⑯). The four drawings were recoloured into one
   #bfb58e family in the SVGs themselves; the rules here do the rest of the
   evening-out — one image box for all four, equal card heights, and a
   description a step larger than the 13px it used to be. */
.photo-tips__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.photo-tips__item { display: flex; flex-direction: column; height: 100%; }
/* Fixes the picture area to one size across the four, whatever each
   drawing's own proportions are. */
.photo-tips__item .eb-media,
.photo-tips__item .eb-media img,
.photo-tips__item .eb-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
}
.packing__title,
.photo-tips__title { margin: 14px 0 6px; font-size: 15px; font-weight: 700; }
.photo-tips__title { min-height: 2.4em; }
.packing__num,
.photo-tips__num { margin-right: 6px; color: var(--color-gold-dark); }
.packing__desc,
.photo-tips__desc { margin: 0; font-size: 13px; line-height: 1.8; color: var(--color-text-muted); }
.photo-tips__desc { font-size: 14px; line-height: 1.9; }
.packing__notes { margin: 28px 0 0; padding-left: 1.2em; font-size: 13px; color: var(--color-text-muted); }
.packing__notes li { margin-bottom: 6px; }

/* ---------- other methods (T013 ⑥) ----------
   Two supplied banners and the LINE card share one three-column grid and
   one aspect ratio, so the three finish the same width and the same
   height. Before this the banners sat in a 3-column grid with an empty
   third cell and LINE査定 was alone in a 340px-capped grid underneath. */
.other-methods__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}
/* A method page lists the other two, so the pair is centred on its own
   measure instead of filling two thirds of a three-column row and leaving
   an empty cell on the right (T013-F3 ②). */
.other-methods__grid--2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 960px;
	margin-inline: auto;
}
/* Fixed to the artwork's own ratio, so every card in the row is the same
   shape whether the row holds two or three. */
.other-methods__banner { display: block; aspect-ratio: 824 / 502; }
.other-methods__banner .methods__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- LINE page ---------- */
/* LINE banner (T013 ⑭). The copy block is centred on its own axis and the
   QR sits centred beside it, so the mark, the heading, the lead and the
   button share one centre line instead of the text hugging the left edge
   while the picture floated. Padding is even on both halves. */
.line-add { background: rgba(6, 199, 85, 0.05); }
.line-add__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.line-add__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.line-add__body .heading { margin-bottom: 0; }
.line-add__icon { width: clamp(48px, 6vw, 64px); height: auto; display: block; margin: 0 auto 14px; }
.line-add__lead { margin: 8px 0 20px; color: var(--color-text-muted); }
.line-add__btn { min-width: 260px; }
.line-add__pending { margin: 12px 0 0; font-size: 13px; color: var(--color-text-muted); }
.line-add__qr { display: flex; justify-content: center; }
.line-add__qr img { display: block; border-radius: var(--radius-md); }
/* 24時間・年中無休 cards (T013 ⑮). Equal height by stretch, one icon
   size and one ring for all three, so the row reads as a set. */
.line-hours__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.line-hours__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 28px 20px 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-align: center;
}
.line-hours__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border: 1px solid rgba(191, 181, 142, 0.9);
	border-radius: 50%;
	background: rgba(191, 181, 142, 0.14);
	color: var(--color-gold-dark);
	flex-shrink: 0;
}
.line-hours__icon svg { width: 28px; height: 28px; display: block; }
.line-hours__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.line-hours__item p { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.line-hours__note { margin: 22px 0 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.line-inline-cta { display: flex; justify-content: center; padding-bottom: 40px; }
.line-items__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.line-items__card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
	padding: 18px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	text-decoration: none;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.line-items__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.line-items__label { font-size: 15px; font-weight: 700; color: var(--color-black); text-align: center; }
.line-items__more { margin-top: 24px; text-align: center; }
.line-notes__list { margin: 0; padding-left: 1.2em; }
.line-notes__list li { margin-bottom: 10px; font-size: 14px; line-height: 1.9; }
.line-final-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.line-final-cta__lead { margin: 0; font-size: 17px; font-weight: 700; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
	.page-hero__inner,
	.method-intro__inner,
	.checklist__inner--media,
	.line-add__inner { grid-template-columns: 1fr; }
	.page-hero__media,
	.method-intro__media,
	.checklist__media { max-width: 520px; margin-inline: auto; }
	.purchase-flow__list,
	.purchase-flow__list--4 { grid-template-columns: repeat(2, 1fr); }
	.purchase-flow__item + .purchase-flow__item::before { display: none; }
	.feature-blocks__grid,
	.photo-tips__grid,
	.line-items__grid { grid-template-columns: repeat(2, 1fr); }
	.packing__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.other-methods__grid { grid-template-columns: 1fr; }
	/* A pair stays side by side on tablet — dropped to one column the two
	   banners became far larger than any other card on the page. It goes
	   single-column with everything else at 640px. */
	.other-methods__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@media (max-width: 640px) {
	.other-methods__grid--2 { grid-template-columns: 1fr; }
}

/* ---------- smartphone ---------- */
@media (max-width: 640px) {
	.page-hero { padding-block: 36px; }
	.page-hero__badge { flex-basis: 100%; }
	.purchase-flow__list,
	.purchase-flow__list--4,
	.feature-blocks__grid,
	.photo-tips__grid,
	.line-items__grid,
	.line-hours__grid { grid-template-columns: 1fr; }
	/* Vertical stack with downward connectors, per the wireframes' SP note. */
	.purchase-flow__item + .purchase-flow__item::before {
		display: block;
		left: 50%;
		top: -14px;
		transform: translateX(-50%) rotate(135deg);
	}
	.cta-row__buttons .btn { flex-basis: 100%; }
	.line-add__btn { width: 100%; min-width: 0; }
}

/* Pre-existing header overflow, found while QA-ing these pages and fixed
   here because it affects every page, not just the new ones.
   .header-action--img is flex-shrink:0 at a fixed height, so between
   641px and ~899px the logo + image CTAs + hamburger are wider than the
   viewport and the whole document scrolls sideways (measured +41px at
   768px on TOP, Watch LP and Company alike). The header already drops
   these image CTAs entirely at <=640px; this extends that same decision
   up to the width where they actually start to fit. The phone number
   stays, and the LINE CTA remains one tap away in the fullscreen menu. */
@media (max-width: 899px) {
	.header-action--img { display: none; }
}

/* ==========================================================================
   S3-T001 part 2 — LP sections + remaining wireframe pages
   ========================================================================== */

/* ---------- comparison table (the one intended sideways scroller) ---------- */
.comparison__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison__scroll:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.comparison__table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.comparison__table th,
.comparison__table td { padding: 14px 16px; border: 1px solid var(--color-border); text-align: left; vertical-align: middle; }
.comparison__table thead th { background: var(--color-black); color: var(--color-white); font-size: 15px; text-align: center; }
.comparison__table tbody th { width: 130px; background: var(--color-bg-alt, #faf8f4); font-weight: 700; font-size: 13px; }
.comparison__row--merged td { text-align: center; font-weight: 700; color: var(--color-gold-dark); }

/* ---------- fees ---------- */
.fees__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fees__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 28px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.04);
}
.fees__label { font-size: 14px; font-weight: 700; color: var(--color-white); }
.fees__amount { font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1; color: var(--color-gold); }

/* ---------- required items ---------- */
.required-items__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.required-items__item {
	padding: 28px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-align: center;
}
/* Centred and enlarged to match the tone set by .feature-blocks__icon,
   pitched a little smaller since these sit on white rather than a dark
   panel and do not need the same weight to register. */
.required-items__icon {
	display: block;
	width: clamp(56px, 7vw, 72px);
	height: clamp(56px, 7vw, 72px);
	margin: 0 auto 20px;
	padding: 12px;
	border: 1px solid rgba(200, 163, 94, 0.55);
	border-radius: 50%;
	background: rgba(200, 163, 94, 0.08);
	object-fit: contain;
}
.required-items__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.required-items__desc { margin: 0; font-size: 13px; line-height: 1.8; color: var(--color-text-muted); }
.required-items__note { margin: 24px 0 0; font-size: 13px; color: var(--color-text-muted); }

/* ---------- LP ⑤ high purchase ---------- */
.high-purchase__lead { margin: 0 0 28px; text-align: center; font-size: 15px; color: var(--color-text-muted); }
.high-purchase__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Card, not a text row: the mark sits in a gold medallion above the copy so
   the three points read as designed blocks rather than a bullet list. */
/* 高価買取り実施中 cards (T013-F2 ⑧). The three carried one short line
   each and 34px of padding, which left a stripe of empty card under the
   text. Padding is tighter, the gap between mark and text is smaller, and
   the cards stretch to a shared height so the marks and the headings line
   up across all eight LPs rather than only when the copy happens to
   match. The icon ring matches the 買取の流れ and 24時間 rings. */
.high-purchase__grid { align-items: stretch; }
.high-purchase__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	height: 100%;
	padding: 26px 22px 24px;
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, rgba(200, 163, 94, 0.10) 0%, rgba(255, 255, 255, 0) 60%), var(--color-white);
	text-align: center;
}
.high-purchase__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-white);
	border: 1px solid var(--color-gold);
	box-shadow: 0 2px 10px rgba(200, 163, 94, 0.18);
	color: var(--color-gold-dark);
}
.high-purchase__visual svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.high-purchase__text { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.8; }

/* ---------- LP ⑥ assessment welcome ---------- */
.assessment-welcome__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.assessment-welcome__body p { margin: 0 0 16px; font-size: 15px; line-height: 2; }
.assessment-welcome__body p:last-child { margin-bottom: 0; }

/* ---------- LP ⑨ category reasons ---------- */
.category-reasons__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Fixed running order — icon, visual, heading, description — with the
   items stretched so all four cards end level regardless of copy length. */
.category-reasons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 30px 20px 26px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	text-align: center;
}
/* Stand-in for photography that has not been supplied. Purely decorative:
   an abstract gold panel, never a caption or a claim. */
/* Was a blank gold gradient sitting under a separate icon: two graphics for
   one job, and the lower one read as an image that had failed to load. Now a
   single line illustration carries the card. */
.category-reasons__visual {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	margin-bottom: 18px;
	border-radius: var(--radius-sm, 6px);
	object-fit: cover;
}
.category-reasons__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.category-reasons__desc { margin: 0; font-size: 13px; line-height: 1.9; color: var(--color-text-muted); }

/* ---------- metal rate (貴金属LP only) ---------- */
.metal-rate__lead { margin: 0 0 28px; text-align: center; color: var(--color-text-muted); }
.metal-rate__groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.metal-rate__group { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.metal-rate__group-title {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-gold);
	font-size: 16px;
	font-weight: 700;
}
.metal-rate__list { margin: 0; }
.metal-rate__row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.metal-rate__row:last-child { border-bottom: 0; }
.metal-rate__name { margin: 0; font-weight: 700; font-size: 15px; }
.metal-rate__value { margin: 0; font-size: 15px; color: var(--color-text-muted); }
.metal-rate__note { margin: 22px 0 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }

/* ---------- contact form (front end only) ---------- */
.contact-form__inner { max-width: 760px; }
.contact-form__lead { margin: 0 0 20px; color: var(--color-text-muted); }
.contact-form__notice {
	margin: 0 0 28px;
	padding: 14px 18px;
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-md);
	background: rgba(200, 163, 94, 0.08);
	font-weight: 700;
	font-size: 14px;
}
.form-field { margin-bottom: 20px; }
.form-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
	width: 100%;
	/* SP note in the wireframe: >=48px tall, >=16px text so iOS does not
	   zoom the page when a field takes focus. */
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm, 6px);
	background: var(--color-white);
	font-size: 16px;
	font-family: inherit;
	color: var(--color-text);
}
.form-field textarea { min-height: 140px; resize: vertical; }
/* Conditional rows and the 宅配キット radio group (T013 ⑪⑫). The rows are
   plain fields until the script hides the ones that do not apply; with no
   script they all stay visible, which is why nothing here depends on JS. */
.form-field--conditional[hidden] { display: none; }
.form-field input[type="datetime-local"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	font: inherit;
}
.form-field__legend { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.form-field__radios { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.form-field__radio { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.form-field__radio input { width: 18px; height: 18px; }

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled { background: #f6f5f2; cursor: not-allowed; }
.form-field__required {
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--color-gold-dark);
	color: var(--color-white);
	font-size: 11px;
}
.form-field__hint { margin: 8px 0 0; font-size: 12px; color: var(--color-text-muted); }
/* Validation. The message sits under its own field so it is obvious which
   input it belongs to, and the border shift alone never carries the
   meaning — the text does. */
.form-field__error { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #b3261e; }
.form-field--error input,
.form-field--error select,
.form-field--error textarea { border-color: #b3261e; background: rgba(179, 38, 30, 0.03); }
/* Honeypot: off-screen rather than display:none, since some bots skip
   fields they can tell are hidden. Never focusable or announced. */
.eb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.form-field--check label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.form-field--check input { min-height: 0; width: auto; margin-top: 3px; }
.contact-form__notice--success { border-color: var(--color-gold-dark); background: rgba(200, 163, 94, 0.12); }
.contact-form__notice--error { border-color: #b3261e; background: rgba(179, 38, 30, 0.06); color: #b3261e; }
.contact-form__notice--error p { margin: 0; }
.contact-form__errors { margin: 8px 0 0; padding-left: 1.2em; font-weight: 500; }
.contact-form__errors li { margin-top: 4px; font-size: 14px; }
.contact-form__submit { text-align: center; }
/* Also covers the moment between submit and navigation, when the button
   is disabled by JS to stop a second post. */
.contact-form__submit .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- contact page blocks ---------- */
.contact-methods__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* お問い合わせ方法 cards (T013 ⑰). Framed to match TOP's 無料査定はこちらから
   row: equal heights, one radius, one padding, and the button pinned to
   the foot so the three end level however long the copy runs. Wording is
   untouched — only the framing and the per-method accent, which follows
   the ⑬ scheme: LINE green, 電話 gold, メール navy. The tinted top rule is
   what carries that colour without recolouring the card itself. */
.contact-methods__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 30px 22px 26px;
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	text-align: center;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.contact-methods__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.contact-methods__card:nth-child(1) { border-top-color: var(--color-line); }
.contact-methods__card:nth-child(2) { border-top-color: var(--color-gold); }
.contact-methods__card:nth-child(3) { border-top-color: var(--color-navy); }
.contact-methods__card .btn { width: 100%; }
.contact-methods__card .btn { margin-top: auto; }
.contact-methods__title { margin: 0; font-size: 17px; font-weight: 700; }
.contact-methods__desc { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.contact-methods__meta { margin: 0 0 6px; font-size: 12px; color: var(--color-gold-dark); font-weight: 700; }
.contact-methods__card .btn { margin-top: auto; }
.company-brief__list { max-width: 760px; margin-inline: auto; }
.company-brief__row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.company-brief__row dt { flex: 0 0 150px; font-weight: 700; font-size: 13px; color: var(--color-text-muted); }
.company-brief__row dd { margin: 0; font-size: 14px; }
.company-brief__pending,
.shop-detail__pending,
.shop-summary__pending,
.store-card__pending,
.visit-area__pending { color: var(--color-text-muted); font-style: normal; }
.company-brief__more,
.privacy-note__more { margin-top: 24px; text-align: center; }
.privacy-note__text { max-width: 760px; margin-inline: auto; font-size: 15px; line-height: 2; text-align: center; }

/* ---------- visit area ---------- */
.visit-area__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.visit-area__pending { font-weight: 700; font-size: 17px; margin: 0 0 12px; }
.visit-area__body p { margin: 0 0 12px; line-height: 1.9; }

/* ---------- shop page ---------- */
/* 店舗一覧 (T011). Replaces a 680px-wide four-column table that scrolled
   sideways on every phone. Each shop is one row: name and address on the
   left, 詳細を見る on the right, stacking below 640px. Rows are separated
   by a hairline rather than boxed, so the list stays quieter than the
   store cards further down the page. */
.store-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.store-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 4px;
	border-bottom: 1px solid var(--color-border);
}
.store-list__body { min-width: 0; }
.store-list__name {
	margin: 0 0 8px;
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 700;
	line-height: 1.5;
}
/* Gold tick before the name, matching the accent under section headings. */
.store-list__name::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 1em;
	margin-right: 10px;
	vertical-align: -0.12em;
	background: var(--color-gold);
	border-radius: 2px;
}
.store-list__address { margin: 0; font-size: 15px; line-height: 1.8; }
.store-list__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 0; font-size: 13px; color: var(--color-text-muted); }
.store-list__meta-item { display: inline-flex; align-items: baseline; gap: 8px; }
.store-list__meta-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: var(--color-text);
}
.store-list__btn { flex-shrink: 0; min-width: 160px; }
.shop-detail__media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.shop-detail__media .eb-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
/* height:auto is what makes aspect-ratio bite — .company-map iframe sets a
   fixed 420px for the company page, and inside this three-up row that made
   the map cell taller than the two photos beside it. */
.shop-detail__map iframe { width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-md); display: block; }
.shop-detail__list { max-width: 760px; }
.shop-detail__row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.shop-detail__row dt { flex: 0 0 110px; font-weight: 700; font-size: 13px; color: var(--color-text-muted); }
.shop-detail__row dd { margin: 0; font-size: 14px; }
.shop-detail__intro-pending { margin: 20px 0 0; color: var(--color-text-muted); font-size: 14px; }
.shop-detail__actions,
.store-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.shop-access__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shop-access__title { margin: 14px 0 6px; font-size: 15px; font-weight: 700; }
.shop-access__desc { margin: 0; font-size: 13px; color: var(--color-text-muted); }
/* ご来店の流れ・お持ちいただくもの (T013-F2 ⑪). The section sat on the
   beige ground with the copy small and hard against the left edge, and
   the two columns spread the full 1320px. It now uses the same 1160px
   measure the LP sections use, a larger body size, and one rhythm
   between heading, sub-heading and list. */
/* ご来店の流れ・お持ちいただくもの (T014 ③).
   The five steps were set at 16px inside a 611px column, so their short
   lines left most of the left half empty while the right half carried
   three filled cards. The column is narrowed to an even split, the copy
   is a step larger with more air between the steps, and the numerals are
   sized to match — the two halves now read at a similar density instead
   of the left looking hollow. */
.shop-visit .container { max-width: 1120px; }
.shop-visit__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.shop-visit__subtitle { margin: 0 0 22px; font-size: 21px; font-weight: 700; line-height: 1.5; }
/* The global reset clears list-style, so this <ol> was indenting 1.3em for
   step numbers that never appeared. It is a numbered flow, so the numbers
   come back — decimal markers in the brand gold, matching the ✓ marks in
   the お持ちいただくもの list beside it. */
.shop-visit__steps { margin: 0; padding-left: 1.5em; list-style: decimal; }
.shop-visit__steps li { margin-bottom: 20px; padding-left: 4px; font-size: 17px; line-height: 1.95; }
.shop-visit__steps li:last-child { margin-bottom: 0; }
.shop-visit__steps li::marker { color: var(--color-gold-dark); font-weight: 600; font-size: 17px; }
/* Matches the step list, so the two columns share one text size. */
.shop-visit__bring .checklist__item { font-size: 17px; line-height: 1.9; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
	.fees__grid,
	.category-reasons__grid { grid-template-columns: repeat(2, 1fr); }
	.high-purchase__grid,
	.required-items__grid,
	.contact-methods__grid,
	.shop-access__grid { grid-template-columns: 1fr; }
	.assessment-welcome__inner,
	.visit-area__inner,
	.shop-visit__inner { grid-template-columns: 1fr; }
	.assessment-welcome__media,
	.visit-area__map { max-width: 520px; margin-inline: auto; }
	.metal-rate__groups { grid-template-columns: 1fr; }
	.shop-detail__media { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ---------- smartphone ---------- */
@media (max-width: 640px) {
	.fees__grid,
	.category-reasons__grid { grid-template-columns: 1fr; }
	/* Shop list stacks: details, then a full-width 詳細を見る button. */
	.store-list__item { flex-direction: column; align-items: stretch; gap: 16px; }
	.store-list__btn { width: 100%; }
	/* 買取品目 cards go one up, with a full-width button to tap. */
	.item-index__grid { grid-template-columns: 1fr; }
	.item-card { padding: 26px 22px; }
	.item-card__btn { align-self: stretch; }
	/* Stacked one-up, the decorative panel would dominate the card. */
	.category-reasons__visual { aspect-ratio: 21 / 9; }
	.high-purchase__item { padding: 26px 20px; }
	.brands__grid { gap: 12px; }
	.company-brief__row,
	.shop-detail__row { flex-direction: column; gap: 4px; }
	.company-brief__row dt,
	.shop-detail__row dt { flex-basis: auto; }
	.shop-detail__actions .btn,
	.store-card__actions .btn { width: 100%; }
}

/* ==========================================================================
   S3-T005-03 — precious metal rate tables
   ========================================================================== */

/* Detail page first view.
   Scoped to this page: .page-hero__img is shared with /related-stores/,
   whose exterior photo is portrait-ish and must keep its natural height.
   The source here is a 2400x1023 LP visual, so it is cropped to a card
   shape rather than left as a thin strip. 16:9 keeps the crop light while
   still matching the height of the text column beside it. */
.page-metal-rate .page-hero__media { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.page-metal-rate .page-hero__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}
/* Barely-there navy wash so the photo settles into the palette. Kept light
   on purpose — the image should not read as dimmed. */
.page-metal-rate .page-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(16, 31, 60, 0.14) 0%, rgba(16, 31, 60, 0) 45%, rgba(200, 163, 94, 0.10) 100%);
}

/* "さらに詳しく見る", shared by TOP and the 貴金属 LP. Sized to sit under the
   cards without competing with the page's primary CTAs. */
.metal-rate__more { margin-top: 28px; text-align: center; }
.metal-rate__more-btn { min-width: 240px; }
.metal-rate__updated { display: inline-block; margin-left: 4px; color: var(--color-text-muted); font-size: 13px; }

/* ---------- detail page ---------- */
.metal-detail__updated {
	margin: 0 0 28px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-gold-dark);
}
.metal-detail-tables { background: var(--color-bg-alt); }
/* Gold is the long list, so it takes the wider column and platinum/silver
   stack beside it. */
.metal-detail__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: start; }
.metal-detail__col--side { display: grid; gap: 28px; align-content: start; }
.metal-detail__combo { margin-top: 28px; }
.metal-detail__notes {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.9;
	color: var(--color-text-muted);
}

/* ---------- table ---------- */
.rate-table {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.rate-table__title {
	margin: 0;
	padding: 16px 20px;
	background: var(--color-navy);
	color: var(--color-white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.rate-table__cols--2 { display: grid; grid-template-columns: 1fr 1fr; }
/* Seam between the two halves of a split table. */
.rate-table__cols--2 > .rate-table__table + .rate-table__table { border-left: 1px solid var(--color-border); }
.rate-table__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rate-table__table thead th {
	padding: 10px 20px;
	background: var(--color-navy-dark);
	color: rgba(255, 255, 255, 0.82);
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	letter-spacing: 0.04em;
}
.rate-table__table thead th.rate-table__price-col { text-align: right; }
.rate-table__table tbody th {
	padding: 13px 20px;
	font-weight: 700;
	text-align: left;
	color: var(--color-black);
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}
.rate-table__price {
	padding: 13px 20px;
	text-align: right;
	font-weight: 700;
	font-size: 16px;
	color: var(--color-black);
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.rate-table__table tbody tr:nth-child(even) th,
.rate-table__table tbody tr:nth-child(even) td { background: var(--color-bg-alt); }
.rate-table__table tbody tr:last-child th,
.rate-table__table tbody tr:last-child td { border-bottom: 0; }
/* Combo labels are longer ("Pt900 / K18　9:1") — let them use the room. */
.rate-table--combo .rate-table__table tbody th { white-space: normal; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
	.metal-detail__grid { grid-template-columns: 1fr; }
	.rate-table__table,
	.rate-table__price { font-size: 14px; }
	.rate-table__table thead th,
	.rate-table__table tbody th,
	.rate-table__price { padding-inline: 16px; }
}

/* ---------- smartphone ---------- */
@media (max-width: 640px) {
	/* One column rather than a horizontal scroller: two narrow columns of
	   prices are harder to read than a longer single list. */
	.rate-table__cols--2 { grid-template-columns: 1fr; }
	.rate-table__cols--2 > .rate-table__table + .rate-table__table { border-left: 0; border-top: 1px solid var(--color-border); }
	.rate-table__title { padding: 14px 16px; font-size: 15px; }
	.rate-table__table thead th,
	.rate-table__table tbody th,
	.rate-table__price { padding: 12px 14px; }
	.rate-table__price { font-size: 15px; }
	.metal-rate__more-btn { width: 100%; max-width: 320px; min-width: 0; }
	.metal-detail__updated { margin-bottom: 22px; }
	/* Wider and shorter once stacked, so the image never becomes a tall
	   block pushing the tables below the fold. */
	.page-metal-rate .page-hero__img { aspect-ratio: 2 / 1; }
}