/* 子供くつNavi — TOKO + MILI / renewal 2026.09
   Runtime stylesheet: this is the only CSS file used by the website. */
:root {
  --paper: #fffdf7;
  --canvas: #f3f0e8;
  --ink: #18191b;
  --muted: #575853;
  --line: #ccc9be;
  --yellow: #ffe34a;
  --blue: #244edd;
  --blue-soft: #e8edff;
  --coral: #ff886b;
  --pink: #f1c9df;
  --ok: #f6edb1;
  --caution: #ffe0ba;
  --error: #a82c20;
  --error-soft: #fff0eb;
  --font-body: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  --font-display: var(--font-body);
  --font-number: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-body: 1rem;
  --text-lg: 1.25rem;
  --text-title: clamp(2.25rem, 4.5vw, 4.25rem);
  --text-section: clamp(1.5rem, 2.7vw, 2.25rem);
  --text-number: clamp(2.5rem, 4.5vw, 3.75rem);
  --weight-body: 500;
  --weight-bold: 800;
  --leading-body: 1.9;
  --leading-heading: 1.35;
  --stroke: 2px solid var(--ink);
  --stroke-heavy: 3px solid var(--ink);
  --radius: 3px;
  --radius-tag: 999px;
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: clamp(20px, 4vw, 48px);
  --content-width: 1120px;
  --touch: 48px;
  --motion: 160ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--weight-body) var(--text-body)/var(--leading-body) var(--font-body); -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; vertical-align: middle; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
a, button, input, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
button, input, select { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure, dl { margin: 0; }
h1, h2, h3, b, strong { font-weight: var(--weight-bold); }
h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-heading); overflow-wrap: anywhere; }
h1 { font-size: var(--text-title); letter-spacing: -.055em; }
h2 { font-size: var(--text-section); letter-spacing: -.035em; margin-bottom: 24px; }
h3 { font-size: 1.25rem; }
h2 small { display: inline-block; font-size: .875rem; letter-spacing: 0; font-weight: 600; vertical-align: middle; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num { font-family: var(--font-number); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.site-head { width: min(100% - var(--gutter) * 2, var(--content-width)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; border-bottom: var(--stroke-heavy); }
.site-name { display: inline-flex; align-items: center; gap: 7px; font-size: 1.65rem; font-weight: 900; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.site-name img { width: 38px; height: 38px; }
.row2 { display: flex; align-items: stretch; gap: 10px; }
.row2 a { display: flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 8px 12px; font-size: .875rem; font-weight: 800; text-decoration: none; border: 2px solid transparent; }
.row2 .num { font-size: .75rem; }
.row2 a:hover { background: var(--canvas); }
.row2 a[aria-current="page"] { border-color: var(--ink); background: var(--yellow); box-shadow: var(--shadow-sm); }
.site-main { width: min(100% - var(--gutter) * 2, var(--content-width)); margin: 0 auto; padding-bottom: 96px; }
.site-main > section, .site-main > .actions { margin-top: 72px; }
.site-main > .intro + section { margin-top: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; line-height: 1.8; margin-top: 24px; }
.crumbs a { padding: 8px 0; }
.crumbs span { align-self: center; }
.crumbs .sep { color: var(--muted); }
.intro { position: relative; padding: 64px 180px 48px 0; min-height: 224px; }
.intro p { max-width: 720px; margin-top: 24px; line-height: 2; }
.intro-mascot { position: absolute; right: 24px; top: 36px; width: 126px; height: 160px; object-fit: contain; transform: rotate(8deg); }
.page-measure .intro::before, .page-size .intro::before { display: block; font-family: var(--font-number); font-size: 1rem; font-weight: 900; line-height: 1; margin-bottom: 18px; width: fit-content; padding: 10px 16px; background: var(--yellow); border: var(--stroke); box-shadow: var(--shadow-sm); }
/* Decorative step numbers duplicate the existing navigation, with no new instruction. */
.page-measure .intro::before { content: '01'; }
.page-size .intro::before { content: '02'; }
.sample-notice, .ad-notice { padding: 12px var(--gutter); text-align: center; font-size: .75rem; font-weight: 600; line-height: 1.7; }
.sample-notice { background: var(--yellow); border-bottom: 1px solid var(--ink); }
.ad-notice { background: var(--canvas); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 56px; padding: 14px 22px; background: var(--yellow); border: var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; font-weight: 800; font-size: 1rem; line-height: 1.65; transition: transform var(--motion), box-shadow var(--motion); }
.button::after { content: '↗\FE0E'; font: 700 1.5rem/1 Arial, sans-serif; flex: none; }
.button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.button:active { transform: translate(3px, 3px); box-shadow: var(--shadow-sm); }
.button.is-secondary { background: var(--paper); }
.actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.text-link { padding-block: 12px; }
/* Home: an editorial cover, followed by a large numerical comparison. */
.site-main > .hero { margin-top: 32px; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--yellow); border: var(--stroke-heavy); box-shadow: var(--shadow-lg); position: relative; }
.hero-copy { grid-area: 1 / 1; padding: 46px 32px 48px; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.25rem, 4vw, 3.1rem); line-height: 1.48; letter-spacing: -.075em; }
.hero h1 span { display: block; }
.hero-copy p { max-width: 27em; margin: 24px 0 30px; }
.hero .button { background: var(--paper); }
.hero-pics { grid-area: 1 / 2; align-self: stretch; min-height: 480px; background: var(--blue); border-left: var(--stroke-heavy); overflow: hidden; position: relative; }
.hero-pics::before { content: ''; position: absolute; width: 380px; height: 380px; background: var(--pink); border: var(--stroke-heavy); border-radius: 50%; left: 10%; top: 10%; }
.hero-pics > img:first-child { position: absolute; width: 94%; left: 3%; top: 20%; transform: rotate(-9deg); border: var(--stroke); box-shadow: var(--shadow); background: var(--paper); }
.hero-pics .hero-toko { position: absolute; width: 48%; bottom: -4%; right: 0; transform: rotate(9deg); }
.hero-pics .hero-mili { position: absolute; width: 23%; top: 2%; left: 1%; transform: rotate(-19deg); }
.hero-pics .hero-star { position: absolute; width: 18%; right: 2%; top: 4%; transform: rotate(12deg); }
.hero-band { grid-column: 1 / -1; height: 28px; border-top: var(--stroke-heavy); overflow: hidden; background: var(--paper); }
.hero-band svg { width: 100%; height: 28px; }
.compare { padding-top: 32px; }
.compare h2 { max-width: 780px; font-size: clamp(1.7rem, 3.3vw, 2.6rem); }
.lead, .after, .bridge { max-width: 780px; }
.compare-fig { margin-top: 36px; }
.compare-ruler { width: 100%; height: 80px; margin: 0 0 24px; }
.compare-cards { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--stroke); box-shadow: var(--shadow); }
.compare-cards li { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; background: var(--paper); }
.compare-cards li + li { border-left: var(--stroke); }
.compare-cards li:nth-child(2) { background: var(--blue-soft); }
.compare-cards li.is-accent { background: var(--yellow); }
.compare-cards b { font-size: clamp(3rem, 5.4vw, 4.5rem); line-height: 1.1; }
.compare-cards b small { font-size: 1.25rem; margin-left: 4px; }
.compare-cards i { font-size: .9375rem; font-weight: 800; font-style: normal; min-height: 3.5em; }
.compare-cards span { font-size: .8125rem; }
.compare-cards em { font-size: .8125rem; font-style: normal; padding-top: 14px; border-top: 1px solid var(--ink); }
figcaption, .compare-fig > figcaption { font-size: .875rem; }
.compare-fig > figcaption { color: var(--muted); margin-top: 20px; }
.after { margin-top: 28px; }
.causes { border-top: var(--stroke-heavy); padding-top: 36px; }
.cause-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.cause { display: grid; grid-template-columns: 64px 1fr; gap: 12px 20px; }
.cause .n { grid-row: 1 / 3; font-size: 4rem; line-height: 1; color: var(--blue); }
.cause b { font-size: 1.25rem; }
.cause p { grid-column: 2; }
.bridge { margin-top: 40px; }
.how { border-top: var(--stroke-heavy); padding-top: 36px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f9f4e8; border: var(--stroke); }
.how-text { display: flex; flex-direction: column; padding-top: 18px; gap: 8px; }
.how-text b { font-size: 1.25rem; }
.how-text span { font-size: .9375rem; }
.now-card { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 32px; background: var(--pink); padding: 32px; margin-top: 64px; border: var(--stroke); text-decoration: none; box-shadow: var(--shadow); }
.now-card img { border: var(--stroke); transform: rotate(-5deg); }
.now-card .text { display: flex; flex-direction: column; gap: 12px; }
.now-card b { font-size: 1.5rem; }
.now-card:hover b { text-decoration: underline; }
/* Two paths, with no new intermediate screen. */
.gate { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.gate-card { position: relative; padding: 36px; background: var(--yellow); border: var(--stroke-heavy); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 20px; text-decoration: none; }
.gate-card .n { font-size: 5rem; font-weight: 900; line-height: 1; margin-bottom: 16px; }
.gate-card b { font-size: 2rem; padding-right: 8px; }
.gate-card > span:last-child { max-width: 36em; font-size: .9375rem; }
.gate-card::after { content: '↗\FE0E'; position: absolute; top: 32px; right: 26px; font: 2.5rem/1 Arial; }
.gate-card.is-accent { background: var(--blue-soft); }
.gate-mascot { position: absolute; right: 60px; top: 18px; width: 105px; height: 132px; object-fit: contain; transform: rotate(10deg); }
.gate-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.ruler-band { height: 28px; overflow: hidden; background: var(--yellow); border-block: var(--stroke); margin-block: 40px; }
.ruler-band svg { width: 100%; height: 26px; }
/* Inputs and data cards share the same reading order at all widths. */
.finder-layout, .model-fit-layout { display: grid; grid-template-columns: 306px minmax(0, 1fr); gap: 38px; align-items: start; }
.finder-input { min-width: 0; position: sticky; top: 24px; }
.finder-results, .model-results { min-width: 0; }
.foot-block { background: var(--yellow); border: var(--stroke-heavy); padding: 24px; box-shadow: var(--shadow); }
.foot-block label { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.125rem; margin-bottom: 12px; }
.req, .opt { font-size: .6875rem; padding: 2px 8px; border: 1px solid var(--ink); font-weight: 700; line-height: 1.6; }
.req { color: var(--paper); background: var(--ink); }
.opt { background: var(--paper); }
.foot-row, .small-row { display: flex; align-items: baseline; gap: 10px; }
.foot-row input, .small-row input { min-width: 0; width: 100%; border: var(--stroke); border-radius: var(--radius); background: var(--paper); padding: 8px 12px; font-family: var(--font-number); font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1.3; height: 78px; font-size: 2.8rem; }
input::placeholder { opacity: 1; color: #6c6c63; font-family: var(--font-body); font-weight: 500; font-size: 1.125rem; }
input[aria-invalid="true"] { border: 3px solid var(--error); background: var(--error-soft); }
.unit { font: 700 .875rem/1 var(--font-number); flex: none; }
.foot-scale { width: 100%; height: 30px; margin: 8px 0 20px; }
.sub-inputs { border-top: 1px solid var(--ink); padding-top: 20px; }
.sub-input label { font-size: 1rem; }
.small-row input { height: 56px; font-size: 1.9rem; }
.hint { font-size: .8125rem; line-height: 1.9; margin-top: 18px; }
.field-error { color: var(--error); font-size: .8125rem; font-weight: 800; margin-top: 10px; }
#width-note { padding-top: 14px; border-top: 1px solid var(--ink); }
.finder-results > section > h2 { font-size: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 24px; }
.finder-results h2 small { padding: 5px 10px; background: var(--ink); color: var(--paper); border-radius: var(--radius-tag); font-size: .75rem; white-space: nowrap; }
.search-block { margin-bottom: 24px; }
.search-block label { display: block; font-weight: 800; }
.search-block input, #search { width: 100%; min-height: 52px; border: var(--stroke); border-radius: 0; padding: 10px 14px; background: var(--paper); }
.shoe-list { display: grid; gap: 20px; }
.group-head { font-weight: 800; font-size: 1rem; margin-top: 12px; padding: 10px 0; border-bottom: var(--stroke); }
.group-head:first-child { margin-top: 0; }
.shoe-card { border: var(--stroke); background: var(--paper); box-shadow: var(--shadow-sm); min-width: 0; }
.who { display: flex; flex-direction: column; padding: 18px 24px; gap: 4px; border-bottom: 1px solid var(--ink); background: var(--canvas); }
.who a { font-weight: 800; font-size: 1.125rem; line-height: 1.55; padding-block: 6px; }
.meta { font-size: .75rem; color: var(--muted); line-height: 1.8; }
.pick { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px; gap: 16px; }
.size { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: var(--text-number); line-height: 1.05; font-weight: 900; letter-spacing: -.06em; }
.size small { font: 800 .8125rem/1.8 var(--font-body); letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--ink); padding: 6px 10px; border-radius: var(--radius-tag); font-weight: 800; font-size: .8125rem; line-height: 1.5; background: var(--paper); }
.chip small { font-weight: 500; font-size: .6875rem; padding-right: 6px; border-right: 1px solid currentColor; }
.chip.is-ok { background: var(--ok); }
.chip.is-low, .chip.is-just { background: var(--blue-soft); }
.chip.is-warn { background: var(--caution); border-width: 2px; }
.shoe-card.is-tight { border-width: 3px; }
.shoe-card.is-tight .who { background: var(--caution); }
.room { color: var(--muted); font-size: .8125rem; line-height: 1.9; }
.range { font: 700 1.75rem/1.3 var(--font-number); }
.none { font-size: 1.125rem; font-weight: 800; line-height: 1.7; }
.shoe-card:has(.none) { box-shadow: none; border-style: dashed; }
.shoe-card:has(.none) .pick { background: var(--canvas); }
.shoe-card:has(.chip.is-warn) .pick { border-left: 5px solid var(--coral); }
details.why { align-self: stretch; width: 100%; border-top: 1px solid var(--line); margin-top: 2px; }
details.why summary { font-size: .8125rem; font-weight: 800; padding: 14px 0 8px; min-height: var(--touch); list-style-position: inside; }
details.why p { font-size: .875rem; padding: 6px 0; line-height: 1.9; }
.caveat { border-top: 1px solid var(--ink); margin-top: 32px; padding-top: 22px; font-size: .8125rem; line-height: 1.9; }
.caveat b { display: block; margin-bottom: 10px; }
.caveat p + p { margin-top: 12px; }
.empty-note { border: 1px dashed var(--ink); padding: 24px; background: var(--canvas); }
section.why { border-top: var(--stroke-heavy); padding-top: 40px; }
section.why > p { max-width: 780px; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border: var(--stroke); background: #faf5e8; }
.thumbs span { display: block; font-size: .8125rem; font-weight: 800; margin-top: 14px; }
/* Model page: size first, explanation second; original generated markup untouched. */
.shoe-head { padding: 42px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.shoe-head h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.spec, .policy { display: grid; grid-template-columns: minmax(5em, max-content) minmax(0, 1fr); column-gap: 18px; font-size: .875rem; }
/* 項目名（「サイズの刻み」など）は途中で折り返さない */
.spec dt, .policy dt { white-space: nowrap; }
.spec dt, .spec dd, .policy dt, .policy dd { padding-block: 10px; border-bottom: 1px solid var(--line); }
dd { margin: 0; overflow-wrap: anywhere; }
dt { color: var(--muted); }
.result { padding: 32px; border: var(--stroke-heavy); box-shadow: var(--shadow); background: var(--ink); color: var(--paper); }
.result a:focus-visible { outline-color: var(--yellow); }
.result.is-empty { background: var(--canvas); color: var(--ink); min-height: 260px; display: flex; align-items: center; position: relative; padding-bottom: 120px; }
.result.is-empty::after { content: ''; background: url('img/toko-intro-trim.webp') center / contain no-repeat; position: absolute; bottom: 12px; right: 24px; width: 78px; height: 96px; transform: rotate(10deg); }
.result.is-invalid { background: var(--canvas); color: var(--ink); box-shadow: none; border-style: dashed; }
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; margin-bottom: 22px; }
.verdict .big { color: var(--yellow); font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; line-height: 1.1; letter-spacing: -.055em; }
.verdict .word { font-size: 1rem; font-weight: 800; line-height: 1.8; }
.verdict.is-quiet { margin-bottom: 0; }
.verdict.is-quiet .word { font-size: 1.3rem; }
.detail { font-size: .9375rem; line-height: 2; }
.detail .num { font-weight: 800; }
.detail.warn { padding: 14px 16px; color: var(--ink); background: var(--caution); border-left: 5px solid var(--coral); }
.result .chip { color: var(--ink); }
.gauge { margin-block: 24px; padding: 18px 16px; border: 1px solid #74766e; }
.gauge svg { display: block; width: 100%; height: auto; }
.gauge p { margin-top: 14px; font-size: .75rem; color: #d9d9cd; line-height: 1.85; }
.result .alt { color: #d9d9cd; font-size: .8125rem; line-height: 1.9; }
.result .reason { padding-top: 20px; margin-top: 22px; border-top: 1px solid #74766e; font-size: .875rem; }
.result .reason a { color: var(--yellow); display: inline-block; padding-block: 8px; }
.result:has(.detail.warn) { border-top: 8px solid var(--coral); }
.buy { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 24px; }
.buy .button { color: var(--ink); box-shadow: 4px 4px 0 var(--paper); }
.buy .disclosure { flex-basis: 100%; font-size: .75rem; color: #d9d9cd; }
.model-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; }
.policy-box { border-top: var(--stroke-heavy); padding-top: 24px; }
.policy-box h2 { font-size: 1.5rem; }
.table-wrap { overflow-x: auto; border: var(--stroke); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .8125rem; background: var(--canvas); font-weight: 800; }
th:first-child, td:first-child { position: sticky; left: 0; background: var(--paper); border-right: 1px solid var(--line); }
th:first-child { background: var(--canvas); }
tr.is-best td { background: var(--yellow); font-weight: 800; }
.unit-note { display: block; }
.is-blank { color: var(--muted); }
.judge { display: block; font: 500 .6875rem/1.8 var(--font-body); }
.table-note { margin-top: 16px; font-size: .8125rem; color: var(--muted); }
/* Long-form explanation: diagrams always remain intact and uncropped. */
.method, .lesson { border-top: var(--stroke-heavy); padding-top: 36px; }
.method h2 small { display: block; margin-top: 12px; font-weight: 500; }
.sheet-box { display: grid; grid-template-columns: 1fr 240px; border: var(--stroke); background: var(--blue-soft); box-shadow: var(--shadow); margin: 32px 0 56px; }
.sheet-text { padding: 32px; }
.sheet-text > b { display: block; font-size: 1.25rem; margin-bottom: 16px; }
.sheet-text .button { margin-top: 24px; }
.sheet-need { padding: 32px 24px; margin: 0; border-left: var(--stroke); background: var(--yellow); }
.sheet-need b { display: block; margin-bottom: 16px; }
.step-block { padding: 32px 0; border-top: 1px solid var(--line); }
.step-head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.step-head .n, .check-head .n { display: inline-flex; justify-content: center; align-items: center; width: 52px; height: 52px; flex: none; background: var(--yellow); border: var(--stroke); font-size: 1.75rem; line-height: 1; font-weight: 900; }
.step-body { display: grid; grid-template-columns: .8fr 1fr; gap: 40px; align-items: start; }
.step-body.is-text { display: block; max-width: 780px; }
.step-fig { border: var(--stroke); background: var(--canvas); }
.step-fig img { display: block; width: 100%; object-fit: contain; }
.method-note { padding: 18px 22px; border-left: 4px solid var(--ink); background: var(--canvas); font-size: .875rem; margin-top: 24px; }
.lesson-lead { max-width: 780px; margin-bottom: 28px; }
.figure-block { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 28px; margin-top: 24px; }
.figure-block > img { width: 100%; border: var(--stroke); background: #faf5e8; }
.legend { display: grid; gap: 20px; font-size: .875rem; }
.legend-item { display: grid; grid-template-columns: 20px 1fr; gap: 6px 12px; }
.legend-item b { line-height: 1.7; }
.legend-item p { grid-column: 2; line-height: 1.95; }
.legend.is-one .legend-item { display: block; border-left: 4px solid var(--yellow); padding-left: 20px; }
.swatch { width: 18px; height: 18px; border: var(--stroke); margin-top: 3px; }
.swatch.is-yellow { background: var(--yellow); }
.swatch.is-blue { background: var(--blue); }
.check { border-top: 1px solid var(--ink); padding-top: 28px; margin-top: 48px; }
.check-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; font-size: 1.5rem; line-height: 1.5; }
.check-head .n { width: 64px; font-size: 1.75rem; }
.check-note { grid-column: 1 / -1; font-size: .875rem; max-width: 780px; padding-top: 8px; }
.step-block > p { max-width: 780px; margin-top: 24px; }
.prose { max-width: 820px; }
.prose h2 { padding-top: 28px; border-top: var(--stroke-heavy); }
.prose h3 { margin-top: 32px; margin-bottom: 16px; }
.prose p, .prose li { line-height: 2; }
.prose ul, .prose ol { padding-left: 1.5em; list-style: revert; }
.prose li + li { margin-top: 14px; }
.notes { font-size: .875rem; max-width: 820px; border-top: 1px solid var(--line); padding-top: 24px; }
.notes h2 { font-size: 1.125rem; }
.notes ul { padding-left: 1.5em; list-style: disc; }
.notes li + li { margin-top: 10px; }
.page-about .intro { background: var(--yellow); border: var(--stroke); margin-top: 32px; padding: 48px 200px 48px 36px; box-shadow: var(--shadow); }
.page-policy .site-main { max-width: 900px; }
.site-foot { background: var(--ink); color: var(--paper); padding: 52px var(--gutter) 32px; }
.footer-inner { max-width: var(--content-width); margin-inline: auto; }
.site-foot .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.site-foot .cols > div { display: flex; flex-direction: column; align-items: flex-start; }
.site-foot .cols b { color: var(--yellow); margin-bottom: 12px; font-size: .75rem; }
.site-foot .cols a { display: block; padding-block: 9px; font-size: .875rem; }
.disclaimer { padding-top: 24px; border-top: 1px solid #696b65; font-size: .8125rem; line-height: 1.95; max-width: 780px; color: #d9d9cd; }
.site-foot .disclaimer + p { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; font-size: .75rem; }
.site-foot a:focus-visible { outline-color: var(--yellow); }
/* Subtle, CSS-only entrance. Content never waits for a script to become visible. */
@media (max-width: 960px) {
  .site-head { flex-wrap: wrap; gap: 0; padding-top: 20px; }
  .row1 { width: 100%; }
  .row2 { width: 100%; margin-block: 12px 16px; justify-content: space-between; }
  .finder-layout, .model-fit-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
  .hero { grid-template-columns: 1.2fr 1fr; }
  .hero-copy { padding: 32px 24px; }
  .hero h1 { font-size: 2.3rem; }
  .hero-pics { min-height: 420px; }
  .step-body { gap: 24px; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --shadow: 5px 5px 0 var(--ink); --shadow-lg: 6px 6px 0 var(--ink); }
  .site-main { padding-bottom: 64px; }
  .site-main > section, .site-main > .actions { margin-top: 48px; }
  .site-head { min-height: 0; padding-top: 16px; }
  .site-name { font-size: 1.5rem; }
  .site-name img { width: 34px; height: 34px; }
  .row2 { display: grid; grid-template-columns: .91fr 1.17fr 1.2fr; gap: 4px; margin: 14px 0; }
  .row2 a { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 7px 2px; min-height: 52px; font-size: .6875rem; line-height: 1.7; text-align: center; }
  .row2 a:last-child { padding-inline: 4px; }
  .row2 .num { line-height: 1.1; font-size: .6875rem; }
  .intro { padding: 38px 72px 32px 0; min-height: 0; }
  .intro h1 { font-size: 2rem; line-height: 1.45; letter-spacing: -.055em; }
  .intro p { margin-right: -72px; margin-top: 20px; font-size: .9375rem; }
  .intro-mascot { width: 64px; height: 88px; top: 32px; right: 0; }
  .page-size .intro, .page-measure .intro { padding-top: 28px; }
  .page-size .intro-mascot, .page-measure .intro-mascot { top: 28px; }
  .page-size .intro::before, .page-measure .intro::before { padding: 6px 12px; font-size: .8125rem; margin-bottom: 16px; }
  .button { padding: 13px 16px; gap: 14px; font-size: .9375rem; }
  .actions .button { width: 100%; }
  .site-main > .hero { margin-top: 24px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { grid-area: 1 / 1; padding: 28px 22px 32px; }
  .hero h1 { font-size: 2.15rem; line-height: 1.48; letter-spacing: -.075em; }
  .hero-copy p { font-size: .9375rem; margin-block: 20px 24px; }
  .hero-copy .button { width: 100%; }
  .hero-pics { grid-area: 2 / 1; border-left: 0; border-top: var(--stroke-heavy); min-height: 305px; }
  .hero-pics::before { width: 255px; height: 255px; top: 20px; }
  .hero-pics > img:first-child { width: 88%; top: 22%; left: 5%; }
  .hero-pics .hero-toko { width: 43%; bottom: -5%; right: 0; }
  .hero-pics .hero-mili { width: 19%; top: 1%; }
  .hero-pics .hero-star { width: 16%; }
  .hero-band { grid-area: 3 / 1; }
  .compare { padding-top: 8px; }
  .compare h2 { font-size: 1.75rem; }
  .compare-ruler { height: 60px; }
  .compare-cards { grid-template-columns: 1fr; }
  .compare-cards li { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; }
  .compare-cards li + li { border-left: 0; border-top: var(--stroke); }
  .compare-cards b { font-size: 3rem; grid-row: 1 / 3; }
  .compare-cards b small { font-size: 1rem; }
  .compare-cards i { font-size: .8125rem; min-height: 0; }
  .compare-cards span { font-size: .75rem; grid-column: 2; }
  .compare-cards em { grid-column: 1 / -1; }
  .cause-grid { grid-template-columns: 1fr; gap: 32px; }
  .cause { grid-template-columns: 44px 1fr; gap: 8px 18px; }
  .cause .n { font-size: 3rem; }
  .cause p { grid-column: 1 / -1; }
  .bridge { margin-top: 28px; }
  .how-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-grid img { aspect-ratio: 16 / 9; }
  .now-card { grid-template-columns: 1fr; padding: 24px; gap: 24px; margin-top: 48px; }
  .now-card img { width: 160px; }
  .now-card b { font-size: 1.3rem; }
  .now-card .text > span { font-size: .875rem; }
  .gate { grid-template-columns: 1fr; gap: 24px; }
  .gate-card { padding: 26px; gap: 16px; }
  .gate-card .n { font-size: 4rem; margin-bottom: 8px; }
  .gate-card b { font-size: 1.65rem; }
  .gate-card > span:last-child { font-size: .875rem; }
  .gate-mascot { width: 90px; height: 100px; right: 52px; top: 14px; }
  .gate-card::after { font-size: 2rem; right: 18px; top: 24px; }
  .ruler-band { margin-block: 32px; height: 22px; }
  .ruler-band svg { height: 20px; }
  .finder-layout, .model-fit-layout { grid-template-columns: 1fr; gap: 40px; }
  .finder-input { position: static; }
  .foot-block { padding: 22px; }
  .foot-row input { font-size: 3rem; height: 78px; }
  .foot-scale { margin-bottom: 16px; }
  .sub-input { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; }
  .sub-input label { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .sub-input .field-error { grid-column: 1 / -1; }
  .small-row input { height: 54px; font-size: 1.6rem; }
  .finder-results > section > h2 { font-size: 1.2rem; gap: 10px; margin-bottom: 20px; }
  .shoe-list { gap: 18px; }
  .who { padding: 14px 18px; }
  .pick { padding: 22px 18px 16px; }
  .size { font-size: 2.6rem; gap: 8px; }
  .size small { font-size: .75rem; }
  .chips { gap: 7px; }
  .chip { font-size: .75rem; padding: 6px 9px; }
  .thumbs { grid-template-columns: 1fr; gap: 20px; }
  .thumbs li { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 18px; }
  .thumbs span { margin: 0; }
  .shoe-head { grid-template-columns: 1fr; gap: 24px; padding: 30px 0; }
  .shoe-head h1 { font-size: 2.1rem; }
  .result { padding: 24px 20px; }
  .result.is-empty { min-height: 240px; padding-bottom: 110px; }
  .verdict { gap: 12px; }
  .verdict .big { font-size: 3.5rem; }
  .verdict .word { font-size: .9375rem; }
  .verdict.is-quiet .word { font-size: 1.125rem; }
  .detail { font-size: .875rem; }
  .gauge { padding: 16px 10px; margin-block: 22px; }
  .gauge p { font-size: .75rem; }
  .model-detail-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  th, td { padding: 12px 10px; }
  .sheet-box { grid-template-columns: 1fr; margin-block: 24px 40px; }
  .sheet-text { padding: 24px 20px; }
  .sheet-text > b { font-size: 1.125rem; }
  .sheet-text p { font-size: .9375rem; }
  .sheet-text .button { width: 100%; font-size: .8125rem; padding-inline: 12px; gap: 8px; }
  .sheet-need { padding: 20px; border-left: 0; border-top: var(--stroke); font-size: .875rem; }
  .sheet-need b { margin-bottom: 8px; }
  .step-block { padding-block: 26px; }
  .step-head { gap: 14px; margin-bottom: 20px; }
  .step-head .n { width: 42px; height: 46px; font-size: 1.5rem; }
  .step-head h3 { font-size: 1.125rem; }
  .step-body { grid-template-columns: 1fr; gap: 22px; }
  .step-body p { font-size: .9375rem; }
  .step-fig { width: 100%; }
  .figure-block { grid-template-columns: 1fr; gap: 24px; }
  .legend { gap: 20px; }
  .check-head { font-size: 1.25rem; gap: 14px; }
  .check-head .n { width: 52px; height: 48px; font-size: 1.4rem; }
  .check { margin-top: 36px; }
  .page-about .intro { padding: 30px 22px; }
  .page-about .intro h1 { padding-right: 40px; font-size: 2rem; }
  .page-about .intro p { margin-right: 0; }
  .page-about .intro-mascot { width: 54px; height: 72px; right: 8px; top: 22px; }
  .site-foot { padding-block: 36px 28px; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 28px; }
  .site-foot .cols > div:first-child { grid-column: 1 / -1; }
  .site-foot .cols a { min-height: 44px; }
  .site-foot .disclaimer + p { line-height: 1.9; gap: 12px; }
  .sample-notice { font-size: .6875rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-head, .site-foot, .hero-pics, .intro-mascot { display: none; }
  .site-main { width: 100%; padding: 0; }
  * { box-shadow: none !important; }
  .finder-input { position: static; }
  .result { color: var(--ink); background: white; }
  .result .alt, .gauge p { color: var(--ink); }
  .verdict .big { color: var(--ink); }
}
/* Width warning uses the existing generated sequence: gauge, tier chip, width text.
   No class or text is added to the renderer. */
.result .gauge ~ p.detail:not(.reason):not(:has(.chip)) { color: var(--ink); background: var(--caution); border-left: 5px solid var(--coral); padding: 14px 16px; }
.prose .steps { padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.steps .n { font-size: 1.75rem; color: var(--blue); font-weight: 900; }
@media (max-width: 720px) {
  .row2 a { font-size: .75rem; }
  .hero h1 { font-size: 2rem; }
}
/* Review-only surfaces. These selectors are absent from production pages. */
.review { background: #e1dfd8; }
.review-bar { padding: 18px 24px; border-bottom: var(--stroke); background: var(--paper); }
.review-bar h1 { font-size: 1.3rem; letter-spacing: -.03em; }
.review-bar p { font-size: .75rem; margin-top: 6px; max-width: 1000px; }
.review-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; margin-top: 14px; }
.review-controls label { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; font-weight: 800; }
.review-controls select { min-height: 44px; max-width: 100%; padding: 8px 30px 8px 12px; border: var(--stroke); background: white; border-radius: 0; font-size: .875rem; }
.review-canvas { max-width: 100vw; overflow: auto; padding: 24px 16px 32px; }
.review-frame { display: block; width: 375px; height: max(640px, calc(100vh - 240px)); margin-inline: auto; border: var(--stroke); box-shadow: 8px 8px 0 #aaa99f; background: var(--paper); max-width: none; }
.review-status { font: 700 .75rem/1.8 var(--font-body); margin-top: 8px; }
.review .state-case { border-top: var(--stroke-heavy); padding-top: 28px; }
.state-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 20px; align-items: start; }
.state-case > p { font-size: .875rem; }
.state-grid h3 { font-size: .875rem; margin-bottom: 16px; }
.state-grid .result { min-height: 0; }
.state-grid .shoe-list { margin-bottom: 20px; }
.state-input { background: var(--yellow); border: var(--stroke); padding: 16px; margin-bottom: 24px; }
.state-input input { max-width: 180px; height: 54px; padding: 8px; font-size: 1.25rem; }
.art-board { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.art-portrait { background: var(--blue-soft); border: var(--stroke); padding: 32px; text-align: center; }
.art-portrait:nth-child(2) { background: var(--pink); }
.art-portrait img { height: 320px; max-width: 100%; }
.art-portrait figcaption { margin-top: 20px; }
.token-swatches { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.token-swatches li { padding: 16px; min-width: 130px; border: var(--stroke); font: 700 .875rem/1.6 var(--font-number); }
@media (max-width:720px) {
  .state-grid, .art-board { grid-template-columns: 1fr; }
  .review-bar { padding: 16px; }
  .review-controls { gap: 10px; }
  .review-controls label { max-width: 100%; }
  .art-portrait img { height: 240px; }
}
.site-head .site-name { min-height: 48px; }
.who a { display: flex; align-items: center; min-height: 48px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-scale text { fill: var(--muted); }
.table-wrap:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

/* Approved reading surfaces: cream, lavender, teal. */
:root { --paper:#fffdf7; --canvas:#f4f1e9; --ink:#18191b; --yellow:#ffe34a; --coral:#e8674f; --teal:#57ae9d; --teal-soft:#dfefe9; --lavender:#ddd8f2; --blue-soft:#eeeaf7; --muted:#54584f; --line:#cecdc4; --shadow:5px 5px 0 var(--ink); }
body { background:var(--paper); }
.site-head { min-height:94px; }
.site-head .site-name { gap:10px; }
.row2 a[aria-current="page"] { background:var(--teal-soft); box-shadow:3px 3px 0 var(--ink); }
.intro { min-height:220px; padding:50px 190px 40px 0; margin:0; }
.intro h1 { font-size:52px; letter-spacing:-.05em; line-height:1.4; }
.page-measure .intro::before,.page-size .intro::before { display:inline-flex; align-items:center; justify-content:center; background:var(--lavender); width:56px; height:40px; font-size:18px; padding:0; margin-bottom:14px; box-shadow:3px 3px 0 var(--ink); }
.intro p { font-size:16px; max-width:750px; margin-top:24px; line-height:2; }
.finder-layout { grid-template-columns:310px minmax(0,1fr); gap:38px; }
.foot-block { position:relative; padding:28px 24px 24px; background:var(--paper); border:2px solid var(--ink); border-top:8px solid var(--teal); box-shadow:5px 5px 0 var(--ink); }
.foot-block label { font-size:18px; }
.req { background:var(--ink); }
.opt { background:var(--teal-soft); }
.foot-row input { height:82px; font-size:48px; padding:8px 14px; background:white; }
.small-row input { background:white; }
.foot-scale { margin-bottom:22px; }
.sub-inputs { border-color:var(--line); }
.foot-block .hint { font-size:13px; line-height:1.95; }
.finder-results > section > h2 { min-height:38px; font-size:24px; margin-bottom:18px; }
.finder-results h2 small { background:var(--ink); padding:5px 12px; }
.shoe-list { gap:22px; }
.shoe-card { border:2px solid var(--ink); border-radius:3px; box-shadow:4px 4px 0 var(--ink); }
.who { padding:12px 24px 15px; background:var(--blue-soft); border-bottom:1px solid var(--ink); }
.who a { font-size:19px; text-decoration-thickness:1px; }
.meta { font-size:12px; }
.pick { padding:24px 24px 16px; gap:14px; }
.size { font-size:54px; }
.size small { font-size:13px; }
.chip { font-size:13px; padding:7px 11px; line-height:1.5; }
.chip.is-ok { background:var(--teal-soft); }
.chip.is-low,.chip.is-just { background:var(--blue-soft); }
.chip.is-warn { background:#ffe2d6; border:2px solid var(--ink); }
.shoe-card.is-tight .who { background:#ffe2d6; }
.shoe-card:has(.chip.is-warn) .pick { border-left:5px solid var(--coral); }
.caveat { margin-top:34px; padding-top:22px; border-color:var(--line); }
.caveat b { font-size:14px; }
section.why { padding-top:40px; }
section.why .thumbs img { background:var(--blue-soft); }
.method { margin-top:40px!important; padding-top:32px; }
.method h2 { font-size:30px; margin-bottom:0; }
.method h2 small { font-size:14px; margin-top:9px; }
.sheet-box { background:var(--paper); grid-template-columns:minmax(0,1fr) 250px; margin-block:26px 48px; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.sheet-text { padding:30px; }
.sheet-text > b { font-size:21px; }
.sheet-text p { font-size:15px; line-height:2; }
.sheet-text .button { margin-top:24px; }
.sheet-need { background:var(--lavender); padding:30px 26px; font-size:17px; line-height:2; border-left:2px solid var(--ink); }
.sheet-need b { font-size:14px; display:block; margin-bottom:20px; }
.step-block { margin-top:0; padding:32px 0 36px; border-top:1px solid var(--line); }
.step-head { gap:18px; margin-bottom:24px; }
.step-head .n { background:var(--teal); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); width:52px; height:52px; font-size:25px; }
.step-head h3 { font-size:23px; line-height:1.55; }
.step-body { grid-template-columns:minmax(0,.88fr) minmax(0,1fr); gap:48px; }
.step-body > p { font-size:16px; line-height:2; }
.step-body.is-text { max-width:800px; padding-left:70px; }
.step-fig { background:var(--blue-soft); border:2px solid var(--ink); padding:8px; box-shadow:4px 4px 0 var(--ink); }
.step-fig img { border:1px solid #d1cec2; }
.method-note { background:var(--blue-soft); border-left-color:var(--teal); }
.swatch.is-blue { background:#244edd; }
.swatch.is-yellow { background:#ffe34a; }
@media (max-width:960px) and (min-width:721px) { .site-head{min-height:120px;} .finder-layout{grid-template-columns:280px minmax(0,1fr);gap:26px;} .size{font-size:44px;} }
@media (max-width:720px) {
 .site-head{min-height:0;}
 .intro{padding:32px 86px 28px 0;min-height:0;}
 .intro h1{font-size:31px;line-height:1.5;}
 .intro p{font-size:15px;line-height:2;margin-right:-86px;margin-top:22px;}
 .page-measure .intro::before,.page-size .intro::before{width:44px;height:32px;font-size:15px;margin-bottom:14px;}
 .finder-layout{grid-template-columns:1fr;gap:36px;}
 .foot-block{padding:24px 20px 20px;}
 .foot-row input{font-size:48px;height:80px;}
 .sub-input label{font-size:16px;}
 .finder-results > section > h2{font-size:20px;gap:8px;margin-bottom:18px;}
 .finder-results h2 small{font-size:11px;}
 .who{padding:12px 18px;}
 .who a{font-size:18px;}
 .pick{padding:23px 18px 14px;}
 .size{font-size:44px;gap:10px;}
 .size small{font-size:12px;}
 .chip{font-size:12px;padding:6px 9px;}
 .caveat{font-size:13px;}
 .method{margin-top:34px!important;padding-top:26px;}
 .method h2{font-size:25px;}
 .sheet-box{grid-template-columns:1fr;margin-block:24px 36px;}
 .sheet-text{padding:24px 20px;}
 .sheet-text>b{font-size:18px;}
 .sheet-text p{font-size:14px;}
 .sheet-text .button{font-size:13px;gap:8px;padding-inline:10px;}
 .sheet-need{padding:20px;border-left:0;border-top:2px solid var(--ink);font-size:15px;}
 .sheet-need b{font-size:13px;margin-bottom:10px;}
 .step-head{gap:14px;}
 .step-head .n{width:42px;height:44px;font-size:22px;}
 .step-head h3{font-size:19px;}
 .step-body{grid-template-columns:1fr;gap:22px;}
 .step-body>p{font-size:15px;}
 .step-body.is-text{padding-left:0;}
 .step-fig{padding:5px;}
}
.sample-notice { background:#fff2e4; border-bottom-color:#d5c7b9; }
/* Keep the size and badges together on wide cards; stack naturally on phones. */
@media (min-width:961px) {
 .pick { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
 .pick .chips { justify-content:flex-end; max-width:295px; }
 .pick .room,.pick details.why,.pick .none,.pick .range { grid-column:1/-1; }
 .pick .size { display:block; }
 .pick .size small { display:inline-block; margin-left:8px; letter-spacing:0; }
}

/* Whole-site renewal. Role colors stay stable across all routes. */
:root {
  --teal: #57ae9d;
  --teal-dark: #216c60;
  --teal-soft: #dfefe9;
  --lavender: #ddd8f2;
  --blue-soft: #eeeaf7;
  --coral: #e8674f;
  --coral-soft: #ffe2d6;
  --ok: var(--teal-soft);
  --caution: var(--coral-soft);
  --focus: #216c60;
}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible, .table-wrap:focus-visible { outline-color: var(--focus); }
.site-head { min-height: 96px; }
.row2 a[aria-current="page"] { background: var(--teal-soft); }
.row2 a:hover { background: var(--blue-soft); }
.site-main > section { margin-top: 72px; }
.intro { padding: 50px 185px 42px 0; }
.intro h1 { font-size: clamp(2rem,4.3vw,3.25rem); }
.intro-mascot { width: 145px; height: 164px; top: 26px; right: 14px; transform: none; }
.page-size .intro-mascot { width: 94px; height: 148px; top: 28px; right: 28px; }
.page-measure .intro-mascot { width: 122px; height: 190px; top: 30px; right: 26px; }
.page-find .intro,.page-policy .intro { padding-right: 0; }
.sample-notice { background: #fff2e4; }
.button { background: var(--yellow); }
.button.is-secondary { background: var(--paper); }

/* Hero: warm copy, lavender collage, coral + teal characters. */
.hero { background: var(--paper); grid-template-columns: 1.08fr 1fr; }
.hero-copy { padding: 46px 34px 48px; }
.hero h1 { font-size: clamp(2.1rem,3.5vw,2.7rem); letter-spacing: -.065em; line-height: 1.55; }
.hero-copy p { line-height: 2; max-width: 26em; }
.hero .button { background: var(--yellow); }
.hero-pics { background: var(--lavender); min-height: 488px; isolation: isolate; }
.hero-pics::before { background: #f1eee4; width: 82%; height: auto; aspect-ratio: 1; top: 9%; left: 9%; }
.hero-pics > img:first-child { width: 90%; left: 5%; top: 23%; transform: rotate(-7deg); z-index: 1; }
.hero-pics .hero-toko { width: 59%; height: auto; right: -1%; bottom: 1%; transform: rotate(3deg); z-index: 3; }
.hero-pics .hero-mili { width: 24%; height: auto; top: 2%; left: 2%; transform: rotate(-12deg); z-index: 2; }
.hero-pics .hero-star { width: 13%; top: 7%; right: 5%; z-index: 2; }

/* Decorative ruler: each tick has a fixed height; labels have normal metrics.
   This band is aria-hidden and is not a measuring instrument. */
.hero-band,.ruler-band { position: relative; height: 62px; overflow: hidden; background: var(--paper); }
.hero-band { border-top: var(--stroke-heavy); }
.ruler-band { border-block: var(--stroke); margin: 4px 0 40px; }
.ruler-track { position: absolute; inset: 8px 62px 0 12px; }
.ruler-label { position: absolute; top: 0; font: 800 14px/18px var(--font-number); }
.ruler-label:nth-child(1) { left: 0; }
.ruler-label:nth-child(2) { left: 50%; transform: translateX(-50%); }
.ruler-label:nth-child(3) { right: 0; }
.ruler-track i { position: absolute; bottom: 0; width: 1px; height: 10px; background: var(--ink); }
.ruler-track i.five { width: 2px; height: 17px; }
.ruler-track i.ten { width: 2px; height: 25px; }
.ruler-unit { position: absolute; top: 8px; right: 14px; font: 700 13px/18px var(--font-number); }

/* Home sections and the two entrances. */
.compare-cards li:first-child { background: var(--paper); }
.compare-cards li:nth-child(2) { background: var(--blue-soft); }
.compare-cards li.is-accent { background: var(--teal-soft); }
.compare-cards em { border-color: #b3b8ae; }
.cause .n { color: var(--teal-dark); }
.cause b { padding-bottom: 10px; border-bottom: 2px solid var(--lavender); }
.how-grid img { background: var(--blue-soft); box-shadow: var(--shadow-sm); }
.how-text b { padding-top: 4px; }
.now-card { background: var(--blue-soft); }
.gate-card { background: var(--teal-soft); min-height: 354px; padding: 32px; gap: 20px; }
.gate-card.is-accent { background: var(--lavender); }
.gate-card .n { font-size: 4.5rem; margin-bottom: 34px; }
.gate-mascot { width: 126px; height: 140px; top: 10px; right: 60px; transform: none; }
.gate-card:first-child .gate-mascot { width: 100px; height: 152px; }
.gate-card b { font-size: 1.9rem; }
.gate-card::after { top: 28px; }

/* Shared inputs/results. The generated markup and reading order are unchanged. */
.finder-layout,.model-fit-layout { grid-template-columns: 310px minmax(0,1fr); gap: 38px; }
.foot-block { background: var(--paper); border: 2px solid var(--ink); border-top: 8px solid var(--teal); }
.range { font-size: 1.5rem; line-height: 1.7; }
.result { background: var(--ink); border-radius: 3px; }
.result .verdict { padding-bottom: 24px; border-bottom: 1px solid #686c68; }
.result .verdict .big { color: #fff4d8; }
.result .detail { color: #f1efe7; }
.result .detail .chip { color: var(--ink); }
.result .alt { color: #d5d9d0; }
.result .reason { border-top-color: #777c75; }
.result .gauge { background: #262b29; border: 1px solid #777c75; padding: 20px 16px; }
.result .gauge p { color: #e4e7de; }
.result .detail.warn { background: var(--coral-soft); color: var(--ink); border-left: 5px solid var(--coral); }
.result.is-empty { min-height: 220px; padding: 32px; background: var(--blue-soft); color: var(--ink); border-style: solid; box-shadow: var(--shadow-sm); }
.result.is-empty::after { content: none; }
.result.is-empty .verdict,.result.is-invalid .verdict { padding: 0; border: 0; }
.result.is-empty .word { max-width: 23em; }
.result.is-invalid { background: var(--canvas); color: var(--ink); border: 2px dashed #6e756e; padding: 28px; }
.result.is-invalid .detail { color: var(--muted); margin-top: 18px; }
.shoe-card:has(.none) .who { background: var(--canvas); }
.shoe-card:has(.none) .pick { border-left: 0; }
.shoe-card.is-tight { border: 2px solid var(--ink); border-left: 6px solid var(--coral); }
.shoe-card.is-tight .pick { border-left: 0; }
.who { background: var(--blue-soft); }
.size,.range,.verdict .big { overflow-wrap: anywhere; }
.chip.is-warn { background: var(--coral-soft); }
.group-head { border-bottom-color: #787d76; }
details.why[open] { padding-bottom: 8px; }
details.why summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.caveat { color: var(--muted); }
.caveat b { color: var(--ink); }
.model-title { position: relative; padding-right: 132px; }
.model-mascot { position: absolute; right: 0; top: 0; width: 118px; height: 112px; object-fit: contain; }
.shoe-head { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 38px; padding: 38px 0 44px; }
.shoe-head h1 { font-size: clamp(2rem,3.2vw,2.65rem); }
.spec { border-top: 5px solid var(--lavender); padding-top: 9px; }
.model-detail-grid { gap: 38px; }
.policy-box { padding: 28px; background: var(--canvas); border: 1px solid var(--line); border-top: 5px solid var(--lavender); }
.policy-box.shape-box { background: var(--teal-soft); border-top-color: var(--teal); }
.policy-box h2 { font-size: 1.4rem; }
.table-wrap { border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }
thead { background: var(--lavender); }
th,th:first-child { background: var(--lavender); }
tr.is-best td { background: var(--teal-soft); }
.table-note { color: var(--muted); }

/* Measurement and shape: preserve the original diagrams and their legend colors. */
.method { margin-top: 40px !important; }
.sheet-need { background: var(--lavender); }
.step-head .n,.check-head .n { background: var(--teal); box-shadow: 3px 3px 0 var(--ink); }
.step-fig,.figure-block > img { background: var(--blue-soft); border: var(--stroke); box-shadow: var(--shadow-sm); }
.step-fig img { display: block; }
.swatch.is-blue { background: #244edd; }
.swatch.is-yellow { background: #ffe34a; }
.legend.is-one .legend-item { border-left-color: var(--teal); }
.lesson > h2 { max-width: 840px; }
.lesson + .lesson { border-top: var(--stroke-heavy); padding-top: 40px; }
.check { border-top-color: var(--line); padding-top: 32px; }
.check-note { background: var(--canvas); max-width: none; padding: 18px 22px; border-left: 4px solid var(--teal); }
.method-note { background: var(--blue-soft); border-left-color: var(--teal); }
.page-about .intro { background: var(--lavender); padding: 42px 200px 42px 32px; }
.page-about .intro-mascot { width: 152px; height: 150px; right: 22px; top: 35px; }
.page-about .lesson { max-width: 820px; }
.prose h2 { border-top: 3px solid var(--ink); padding-top: 26px; }
.steps .n { color: var(--teal-dark); }
.page-policy .intro { min-height: 0; padding-bottom: 12px; }
.page-policy .prose { margin-top: 40px; }
.site-foot { background: #202723; }
.site-foot .cols b { color: #bfe3d8; }
.site-foot .site-name img { width: 36px; height: 36px; }
.site-foot .disclaimer { max-width: 840px; }
.site-foot a:hover { color: #fff4d8; }
.art-portrait { background: var(--lavender); }
.art-portrait:nth-child(2) { background: var(--teal-soft); }
.state-input { background: var(--coral-soft); }

@media (min-width:961px) {
  .pick { grid-template-columns: minmax(0,1fr); }
  .pick .chips { justify-content: flex-start; max-width: none; }
}
@media (max-width:960px) and (min-width:721px) {
  .site-head { min-height: 126px; }
  .finder-layout,.model-fit-layout { grid-template-columns: 275px minmax(0,1fr); gap: 26px; }
  .hero-copy { padding: 30px 24px; }
  .hero h1 { font-size: 2rem; }
  .hero-pics { min-height: 440px; }
  .shoe-head { grid-template-columns: 1fr; gap: 26px; }
  .model-title { min-height: 112px; display: flex; align-items: center; }
}
@media (max-width:720px) {
  .site-head { min-height: 0; }
  .site-main > section { margin-top: 48px; }
  .intro { padding: 32px 84px 30px 0; }
  .intro h1 { font-size: 31px; line-height: 1.5; }
  .intro p { margin-right: -84px; }
  .intro-mascot { width: 76px; height: 90px; right: 0; top: 32px; }
  .page-size .intro-mascot,.page-measure .intro-mascot { width: 68px; height: 104px; top: 31px; right: 0; }
  .page-find .intro p,.page-policy .intro p { margin-right: 0; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 28px 22px 32px; }
  .hero h1 { font-size: 1.9rem; line-height: 1.6; }
  .hero-pics { min-height: 320px; }
  .hero-pics .hero-toko { width: 58%; bottom: 1%; right: -1%; }
  .hero-pics .hero-mili { width: 24%; left: 1%; top: 2%; }
  .hero-pics > img:first-child { width: 90%; top: 25%; }
  .hero-band,.ruler-band { height: 56px; }
  .ruler-band { margin-bottom: 28px; }
  .ruler-track { right: 46px; }
  .ruler-label { font-size: 12px; }
  .ruler-unit { right: 8px; font-size: 12px; }
  .ruler-track i { height: 8px; }
  .ruler-track i.five { height: 13px; }
  .ruler-track i.ten { height: 21px; }
  .gate-card { min-height: 0; padding: 26px; }
  .gate-card .n { font-size: 4rem; margin-bottom: 28px; }
  .gate-card b { font-size: 1.65rem; }
  .gate-mascot { width: 110px; height: 118px; right: 46px; top: 9px; }
  .gate-card:first-child .gate-mascot { width: 76px; height: 119px; }
  .finder-layout,.model-fit-layout { grid-template-columns: 1fr; gap: 36px; }
  .finder-input { position: static; }
  .pick { display: flex; }
  .size { font-size: 44px; }
  .shoe-head { grid-template-columns: 1fr; gap: 28px; padding: 28px 0 34px; }
  .model-title { padding-right: 94px; min-height: 90px; display: flex; align-items: center; }
  .model-mascot { width: 86px; height: 86px; }
  .shoe-head h1 { font-size: 1.8rem; }
  .result { padding: 24px 20px; }
  .result.is-empty,.result.is-invalid { padding: 24px 20px; min-height: 170px; }
  .verdict .big { font-size: 3.5rem; }
  .policy-box { padding: 22px 20px; }
  .model-detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .method { margin-top: 32px !important; }
  .lesson + .lesson { padding-top: 28px; }
  .check-note { padding: 16px; }
  .page-about .intro { padding: 30px 22px; }
  .page-about .intro h1 { padding-right: 65px; font-size: 1.9rem; }
  .page-about .intro p { margin-right: 0; }
  .page-about .intro-mascot { width: 76px; height: 84px; right: 8px; top: 25px; }
  .page-policy .prose { margin-top: 34px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
}
@media print {
  .model-mascot,.hero-band,.ruler-band { display: none; }
  .result,.result .detail,.result .alt,.result .verdict .big,.result .gauge p { background: white; color: black; }
}

/* Keep the end labels readable when the input panel scales down. */
.foot-scale text { font-size: 15px; }

/* キャラクターの吹き出し（docs/design/10-character-voice.md）。大事な情報は吹き出しの外にも書く */
.say-area:empty { display: none; }
.say-area { display: grid; gap: 12px; margin: 0 0 16px; }
.say { display: flex; align-items: flex-end; gap: 12px; }
.say p { margin: 0; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 16px 16px 16px 3px; background: #fff; line-height: 1.8; font-size: .9375rem; }
.say.is-mili p { background: var(--teal-soft); }
.say.is-toko p { background: #fdebe6; }
.say-char { flex: none; width: 76px; height: 86px; object-fit: contain; object-position: bottom; }
.say-char.anim { position: relative; display: block; }
.say-char.anim.mili { width: 64px; height: auto; aspect-ratio: 480 / 640; }
.say-char.anim.toko { width: 92px; height: auto; aspect-ratio: 720 / 640; }
.say-char.anim img { position: absolute; inset: 0; width: 100%; height: 100%; }
.say-char.anim .blink { opacity: 0; }
.say-char.anim.mili .arm { transform-origin: 56.25% 48.4375%; }
.say-char.anim.toko .arm { transform-origin: 29.4444% 46.25%; }
@media (prefers-reduced-motion: no-preference) {
  .say:not(.is-play) .say-char.anim.mili .arm { transform: rotate(65deg); }
  .say:not(.is-play) .say-char.anim.toko .arm { transform: rotate(-45deg); }
  .say.is-play .say-char.anim.mili .arm { animation: say-mili-point .9s .15s cubic-bezier(.3, 1.3, .5, 1) both; }
  .say.is-play .say-char.anim.toko .arm { animation: say-toko-stop .8s .3s cubic-bezier(.3, 1.3, .5, 1) both; }
  .say.is-play .say-char.anim .blink { animation: say-blink 5s 1.4s infinite; }
}
@keyframes say-mili-point { from { transform: rotate(65deg); } to { transform: rotate(0); } }
@keyframes say-toko-stop { from { transform: rotate(-45deg); } to { transform: rotate(0); } }
@keyframes say-blink { 0%, 96%, 100% { opacity: 0; } 97%, 99% { opacity: 1; } }
@media print { .say-area { display: none; } }

/* モデルのページ: 結果の箱の飾りのトコは外す（吹き出しのトコと二体並ばないように） */
.result.is-empty::after { content: none; }
#result-say { margin-bottom: 12px; }

/* 測った靴の写真 */
.shoe-photos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.shoe-photos li { border: var(--stroke); background: #fff; position: relative; overflow: hidden; }
.shoe-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shoe-photos a { display: block; color: var(--ink); text-decoration: none; }
.shoe-photos .go, .shoe-card .thumb .go { position: absolute; right: 8px; bottom: 8px; background: var(--yellow); border: 2px solid var(--ink); padding: 2px 8px; font-size: .75rem; font-weight: 700; }
.photo-note { font-size: .75rem; color: var(--muted); margin: 0 0 24px; }
@media (max-width: 640px) { .shoe-photos { grid-template-columns: 1fr 1fr; } .shoe-photos .photo-side { grid-column: 1 / -1; } }

/* 一覧の写真 */
.shoe-card.has-thumb { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; }
.shoe-card.has-thumb .who, .shoe-card.has-thumb .pick { grid-column: 2; }
.shoe-card .thumb { grid-row: 1 / span 2; position: relative; display: block; align-self: start; border: 2px solid var(--ink); background: #fff; }
.shoe-card .thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.shoe-card .thumb .go { right: 4px; bottom: 4px; font-size: .6875rem; padding: 1px 6px; }
@media (max-width: 640px) { .shoe-card.has-thumb { grid-template-columns: 84px 1fr; } }

/* 購入先 */
.buy-box { margin: 32px 0; padding: 24px; border: var(--stroke-heavy); box-shadow: var(--shadow); background: #fff; }
.buy-box h2 { margin-top: 0; }
.buy-box .offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; font-size: 1.0625rem; }
.buy-box .offer .num { font-size: 1.5rem; font-weight: 800; }
.buy-box .offer small { color: var(--muted); }
.buy-box .offer-note { font-size: .8125rem; color: var(--muted); margin: 0 0 16px; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.buy-box .disclosure { font-size: .75rem; color: var(--muted); margin: 14px 0 0; }

/* ホーム: 体験談のラベル、図、強調、リンクの分かりやすさ（2026-10 のフィードバック） */
.voice-label { margin: 0 0 8px; }
.voice-label span { display: inline-block; padding: 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fdebe6; font-size: .8125rem; font-weight: 800; }
.cause .cause-fig { grid-column: 1 / -1; margin: 8px 0 0; }
.cause .cause-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--stroke); }
.cause .cause-fig figcaption { font-size: .8125rem; color: var(--muted); margin-top: 6px; }
.cause p .em { font-size: inherit; background: linear-gradient(transparent 60%, #ffe34a 60%); }
.bridge strong { font-weight: 800; background: linear-gradient(transparent 62%, #ffe34a 62%); }
.how-grid a { display: block; color: inherit; text-decoration: none; }
.how-grid a:hover b { text-decoration: underline; }
.how-text .go, .now-card .go { display: inline-block; margin-top: 6px; font-weight: 800; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.how-text .go::after, .now-card .go::after { content: ' →'; }
#insole-check { scroll-margin-top: 24px; }

/* 比べた 3 足のカードの靴の絵 */
.compare-cards .card-shoe { display: block; width: auto; height: 110px; max-width: 100%; object-fit: contain; object-position: left bottom; }
@media (max-width: 760px) {
  .compare-cards li { grid-template-columns: 1fr 120px; }
  .compare-cards .card-shoe { grid-column: 2; grid-row: 1 / 4; height: 80px; align-self: center; object-position: center; }
  .compare-cards b { grid-row: 1; }
  .compare-cards i { grid-column: 1; }
  .compare-cards span { grid-column: 1; }
}

/* cm で入れた数字を mm として受け取ったことの知らせ */
.field-note { font-size: .8125rem; font-weight: 700; margin-top: 8px; color: var(--ink); background: var(--teal-soft); padding: 4px 10px; border-left: 4px solid var(--teal); }
.sub-input .field-note { grid-column: 1 / -1; }

/* 結果のすぐ下に置く注意書き（参考値であること） */
.result-note { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted, #5d5e59); }

/* ---------- 指示書 第 2 版: 結果の 2 つのサイズと横棒 ---------- */
.lead-line { margin: 0 0 8px; font-weight: 800; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 10px; }
.pair-box { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); padding: 8px 10px; display: flex; flex-direction: column; }
.pair-box small { font-size: .6875rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pair-box b { font-family: var(--font-number); font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.2; }
.pair-box.is-just { background: var(--yellow); }
.pair-box.is-roomy span { font-size: .8125rem; font-weight: 800; }
.pair-box.is-none span { font-size: .8125rem; font-weight: 700; line-height: 1.6; margin-top: 4px; }
.sizebar { position: relative; height: 48px; margin: 6px 4px 4px; }
.sb-track { position: absolute; left: 0; right: 0; top: 14px; height: 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; }
.sb-range { position: absolute; top: 14px; height: 10px; background: var(--blue); border-radius: 6px; transform-origin: left center; }
.sb-range.is-dot { width: 14px !important; height: 14px; top: 12px; margin-left: -7px; border-radius: 50%; }
.sb-foot { position: absolute; top: 2px; height: 34px; border-left: 2px dashed var(--coral); }
.sb-foot span { position: absolute; top: -2px; left: 4px; font-size: .6875rem; font-weight: 800; color: #b4492f; white-space: nowrap; }
.sb-ticks { position: absolute; left: 0; right: 0; top: 30px; height: 16px; }
.sb-ticks span { position: absolute; transform: translateX(-50%); font-size: .6875rem; color: var(--muted); font-family: var(--font-number); }
/* 結果の箱は黒地なので、目盛りと足の印を明るくする */
.result .sb-ticks span { color: #c9cbc4; }
.result .sb-foot { border-left-color: #ff9d85; }
.result .sb-foot span { color: #ffb3a1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.buy-pair { display: flex; gap: 8px; margin: 8px 0; }
.buy-pair .buy-link { flex: 1; text-align: center; border: 2px solid var(--ink); padding: 8px 6px; font-weight: 800; font-size: .875rem; text-decoration: none; color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.why-line { font-size: .875rem; line-height: 1.8; margin: 6px 0 0; }
.shoe-head .summary { font-size: 1rem; font-weight: 700; line-height: 1.8; margin: 8px 0 0; }
/* 見出しの下に一文を置くので、横並びにしない（キャラクターの絵はもう置いていない） */
.shoe-head .model-title { display: block; min-height: 0; padding-right: 0; }
.table-lead { margin: 0 0 8px; font-size: .875rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .sizebar .sb-range:not(.is-dot) { animation: sb-grow .9s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes sb-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* はいた感想のお願い */
.feedback { border: 2px solid var(--ink); background: var(--canvas); padding: 18px; margin: 32px 0; }
.feedback h2 { font-size: 1.125rem; margin: 0 0 6px; }
.feedback fieldset { border: 0; padding: 0; margin: 12px 0 0; }
.feedback legend { font-weight: 800; font-size: .9375rem; margin-bottom: 6px; }
.feedback .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.feedback .opts label { border: 1px solid var(--ink); background: var(--paper); padding: 6px 10px; font-size: .875rem; cursor: pointer; }
.feedback .opts input { margin-right: 4px; }
.feedback .opts label:has(input:checked) { background: var(--yellow); font-weight: 800; }
.feedback button { margin-top: 14px; }
.feedback .fb-note { font-size: .75rem; color: var(--muted); margin: 10px 0 0; }

/* ヘッダー: ロゴと「サイズを調べる」だけ（指示書 第 2 版） */
.site-head .row1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.head-cta { display: inline-flex; align-items: center; min-height: var(--touch, 44px); padding: 8px 16px; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; font-size: .9375rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
@media (max-width: 720px) { .site-head { flex-wrap: nowrap; padding-block: 12px; min-height: 0; } .head-cta { padding: 6px 12px; font-size: .875rem; } }

/* 新しく買う靴のサイズを調べる: 靴を選ぶ */
.find-search { margin: 8px 0 16px; }
.find-search label { display: block; font-weight: 800; margin-bottom: 6px; }
.find-search input { width: 100%; font-size: 1.0625rem; padding: 12px 14px; border: 2px solid var(--ink); background: var(--paper); }
.model-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.model-pick a { display: block; border: 2px solid var(--ink); background: var(--paper); padding: 12px 14px; text-decoration: none; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.model-pick b { display: block; font-size: 1.0625rem; }
.model-pick span { font-size: .8125rem; color: var(--muted); }
.not-found { border: 2px dashed var(--ink); background: var(--canvas); padding: 18px; margin: 16px 0; }
.not-found h2 { margin: 0 0 6px; font-size: 1.25rem; }

/* トップ（指示書 第 2 版） */
.hero2 { max-width: 560px; margin: 0 auto; padding: 20px 0 40px; }
.hero2-pic img { display: block; width: min(60%, 260px); height: auto; margin: 0 auto 8px; }
.hero2 h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.35; margin: 12px 0 14px; letter-spacing: .02em; }
.hero2 .p, .subhead .p { display: inline-block; }
.hero2 .subhead { font-size: clamp(1.15rem, 4.2vw, 1.35rem); line-height: 1.6; font-weight: 800; margin: 0 0 14px; }
.hero2-body { color: var(--muted); margin: 0; }
.hero2-btn { display: flex; width: 100%; text-align: center; margin-top: 22px; }
.textlink { display: block; text-align: center; margin-top: 12px; font-weight: 700; }
.example, .doors, .measuring { max-width: 560px; margin: 0 auto; padding: 36px 0; border-top: var(--stroke); }
.example h2, .doors h2, .measuring h2 { font-size: clamp(1.25rem, 4.6vw, 1.5rem); line-height: 1.5; margin: 0 0 6px; }
.example .lead { color: var(--muted); margin: 0 0 14px; }
.ex-shoe { border: 2px solid var(--ink); background: var(--paper); padding: 14px; margin-top: 14px; box-shadow: 3px 3px 0 var(--ink); }
.ex-name { font-weight: 800; font-size: 1.0625rem; margin: 0; }
.ex-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.ex-tags span { font-size: .75rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; color: var(--muted); }
.ex-shoe .chips { display: none; }
.door { display: block; border: 2px solid var(--ink); background: var(--paper); padding: 15px 16px; margin-bottom: 12px; color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.door strong { display: block; font-size: 1.0625rem; }
.door span { font-size: .875rem; color: var(--muted); }
.measuring img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); margin: 14px 0; }
.intro .skip { border-left: 4px solid var(--yellow); padding: 4px 10px; background: var(--canvas); font-weight: 700; }
/* 手順の番号（01・02）は、入口を 3 つにしたので出さない */
.page-measure .intro::before, .page-size .intro::before { content: none; display: none; }
/* 一覧のカードでも、2 つのサイズと横棒は横幅いっぱいに置く */
.pick .pair, .pick .sizebar, .pick .chips, .pick .why-line, .pick .buy-pair { grid-column: 1 / -1; align-self: stretch; }
/* スマホでは見出しの右にキャラクターがいるので、すぐ下の案内は絵の下に回り込ませない */
@media (max-width:720px) { .intro .skip { margin-right: 0; } }
@media (max-width:720px) {
  /* 見出しの右のキャラクターの足が本文の 1 行目にかからないよう、見出しの高さを絵に合わせる。
     測り方（案内の枠がある）と、足の長さから見るページ（見出しが 2 行）は、もともと重ならない */
  .intro h1 { min-height: 92px; display: flex; align-items: center; }
  .page-measure .intro h1, .page-size .intro h1 { min-height: 0; display: block; }
  /* 「このサイトについて」が「つい／て」で折れないように、画面の幅に合わせて 1 行に収める
     （画面の幅から、左右の余白 40px、枠の内側 44px と線 4px、キャラクターの分 65px を引き、9 文字と少しで割る） */
  .page-about .intro h1 { font-size: min(1.7rem, calc((100vw - 153px) / 9.4)); }
}

/* 見出しは語の途中で折り返さない。Safari は句読点・空白・<wbr> の位置で、Chrome は文節で折り返す。
   どこでも折れない長い見出しは、はみ出す前に端で折り返す */
h1, h2, h3, .check-head b { word-break: keep-all; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) { h1, h2, h3, .check-head b { word-break: auto-phrase; } }

/* 説明の図（足の長さと足幅、靴の部分の呼び方）。線の絵なので枠を付け、文字は図の中に書いてある */
.explain-fig { margin: 8px 0 40px; max-width: 560px; }
.explain-fig img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.explain-fig figcaption { margin-top: 10px; font-size: .875rem; line-height: 1.8; color: var(--muted); }

/* 足の長さを測る（スマホのカメラで撮る）。中身は templates/measure.html、画面の切り替えは assets/photo/app.js。
   はじめの画面は 1 つの枠（.photo-intro）に入っているので、ほかのページの「main の直下の section」の間隔をここで付け直す */
.photo-intro > .notes { margin-top: 72px; }
/* 画面の見本はスマホの絵そのものなので、図の枠と影を付けない */
.step-fig.is-screen { max-width: 260px; justify-self: center; padding: 0; border: 0; background: none; box-shadow: none; }
.step-fig.is-screen img { border: 0; }
.photo-alert { margin-top: 16px; padding: 12px 16px; border-left: 4px solid var(--error); background: var(--error-soft); font-size: .9375rem; }
.photo-door { max-width: 560px; margin-top: 32px; }
.site-main > .photo-screen { max-width: 720px; margin-top: 40px; }
.photo-title { font-size: var(--text-section); margin: 0 0 20px; }
.photo-busy { display: flex; min-height: 50vh; align-items: center; justify-content: center; font-weight: 800; }
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.number-card { padding: 14px 18px; border: var(--stroke); background: var(--paper); box-shadow: var(--shadow-sm); }
.number-card .label { font-size: .875rem; font-weight: 800; color: var(--muted); }
.number-card .value { font: 900 2.5rem/1.15 var(--font-number); letter-spacing: -.035em; }
.number-card .value small { margin-left: 4px; font: 800 1rem var(--font-body); letter-spacing: 0; }
.number-card .sub { font-size: .8125rem; color: var(--muted); }
.photo-caution, .warnings li { padding: 10px 14px; border-left: 4px solid var(--coral); background: #fdebe6; font-size: .9375rem; }
.warnings { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.warnings:empty { display: none; }
.rect-fig { max-width: 520px; margin: 20px 0; }
.rect-fig canvas, .corner-stage canvas { display: block; width: 100%; height: auto; border: var(--stroke); background: var(--canvas); touch-action: none; }
.rect-fig figcaption { margin-top: 10px; font-size: .875rem; line-height: 1.8; color: var(--muted); }
.corner-stage { max-width: 640px; margin-top: 16px; }
.photo-note { font-size: .875rem; color: var(--muted); }
.photo-actions { align-items: center; }
.text-button { min-height: var(--touch); padding: 8px 4px; background: none; border: 0; color: var(--ink); font: 800 .9375rem var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* カメラは画面いっぱいに重ねる */
.photo-camera { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: #000; color: #fff; }
.cam-stage { position: relative; flex: 1; min-height: 0; }
.cam-stage video, .cam-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cam-status { margin: 0; padding: 12px 16px; min-height: 4.4em; background: rgba(0, 0, 0, .75); font-weight: 800; line-height: 1.7; text-align: center; }
.cam-status.is-warn { background: rgba(168, 44, 32, .92); }
.cam-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: #000; }
.cam-cancel { width: 80px; min-height: var(--touch); background: none; border: 0; color: #fff; font: 800 1rem var(--font-body); text-align: left; cursor: pointer; }
.cam-spacer { width: 80px; }
.shutter { width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: var(--yellow); box-shadow: 0 0 0 3px #000 inset; cursor: pointer; }
.shutter:active { transform: scale(.94); }
@media (max-width: 720px) {
  .photo-intro > .notes { margin-top: 48px; }
  .site-main > .photo-screen { margin-top: 24px; }
  .step-fig.is-screen { max-width: 220px; }
  .photo-actions .text-button { width: 100%; text-align: center; }
}

/* 幅の狭いスマホ（375px 未満）では、ロゴと「サイズを調べる」が重ならないよう、どちらも少し小さくする */
@media (max-width: 374px) {
  .site-head .row1 { gap: 8px; }
  .site-head .site-name { gap: 6px; font-size: 1.25rem; }
  .site-head .site-name img { width: 30px; height: 30px; }
  .head-cta { padding: 6px 10px; font-size: .8125rem; }
}

/* Phase 2: existing palette, typography, border and shadow tokens only. */
.blog-body { max-width:820px; margin-inline:auto; overflow-wrap:anywhere; }
.blog-body h2,.blog-body h3 { margin-top:40px; }
.blog-body h2:first-child { margin-top:0; }
.blog-body p,.blog-body ul,.blog-body ol,.blog-body blockquote,.blog-body pre,.blog-body .table-wrap { margin-block:20px; }
.blog-body ul,.blog-body ol { padding-left:1.6em; list-style:revert; }
.blog-body blockquote { border-left:4px solid var(--teal); padding:16px 24px; background:var(--canvas); }
.blog-body pre { padding:20px; overflow:auto; background:var(--canvas); border:var(--stroke); white-space:pre; }
.blog-body img { display:block; max-width:100%; height:auto; border:var(--stroke); }
.blog-meta { color:var(--muted); font-size:var(--text-sm); display:flex; flex-wrap:wrap; gap:12px 24px; }
.blog-tags,.pagination { display:flex; gap:12px; flex-wrap:wrap; margin-block:24px; }
.blog-tags a,.pagination a,.pagination span { padding:10px 16px; min-height:48px; border:var(--stroke); background:var(--paper); }
.pagination [aria-current] { background:var(--teal-soft); }
.blog-list { display:grid; gap:24px; }
.blog-card { border:var(--stroke); box-shadow:var(--shadow-sm); background:var(--paper); }
.blog-card h2,.blog-card h3 { font-size:var(--text-lg); margin:0; }
.blog-card .who { padding:20px 24px; }
.blog-card .pick { display:block; padding:20px 24px; }
.blog-card time { font-size:var(--text-sm); color:var(--muted); }
.blog-cover { max-width:820px; margin:0 auto 40px; }
.blog-cover img { width:100%; height:auto; border:var(--stroke); }
.request-callout { border-left:5px solid var(--teal); background:var(--canvas); padding:24px; margin-block:32px; }
.request-callout .actions { margin-top:16px; }
.faq-list details { border-top:var(--stroke); padding-block:12px; }
.faq-list summary { font-weight:var(--weight-bold); padding:16px 0; min-height:48px; }
.faq-list details p { padding:8px 0 16px; }
@media(max-width:720px){.blog-card .who,.blog-card .pick{padding:18px}.request-callout{padding:20px}.blog-body blockquote{padding:14px 18px}}