/* =========================================================================
麺屋 豊道 — base stylesheet
Concept: 和 × モダン × シンプル。白 / 墨黒 / 生成り / 木目系を基調に、
料理写真を主役にして余白を大きくとる。アクセントカラーは最小限。
========================================================================= */
/* Noto Serif JP / Noto Sans JP are loaded from (see src/components/layout.mjs)
via + instead of @import — @import
inside CSS blocks the stylesheet's own parsing until the imported file round-trips,
which delays every rule below it. The --font-serif / --font-sans fallback stacks here
keep text readable even if that stylesheet fails to load. */
:root {
--color-white: #ffffff;
--color-kinari: #f6f1e7; /* 生成り */
--color-kinari-deep: #ece4d3;
--color-sumi: #201d1a; /* 墨黒 */
--color-sumi-soft: #4a453e;
--color-wood: #8a6a4b; /* 木目系アクセント */
--color-wood-light: #cbb190;
--color-border: #ddd3bf;
--color-badge-new: #8a6a4b;
--color-badge-limited: #6b5a3f;
--color-badge-spicy: #a1432c;
--color-badge-soldout: #8c8577;
--font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
--font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
--container-width: 1120px;
--space-section: clamp(56px, 8vw, 128px);
--space-section-cozy: clamp(48px, 6vw, 88px);
--radius: 2px;
}
* { box-sizing: border-box; }
/* The closed mobile nav drawer (position:fixed + translateX(100%), see .site-nav below)
still contributes to the document's horizontal scrollable area in some engines even
though it's visually off-screen, which let the whole page pan sideways on touch
devices. overflow-x:hidden on the root closes that off — found via an actual mobile
viewport check (フェーズ3D §26), not visible from the CSS alone. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
margin: 0;
background: var(--color-white);
color: var(--color-sumi);
font-family: var(--font-sans);
line-height: 1.85;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* text-wrap: balance redistributes line breaks so multi-line Japanese headings don't
orphan a lone trailing character ("...ひととき / を。") — browsers without support
(older Firefox) just fall back to normal wrapping, still readable (spec フェーズ3D.1 §1). */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.5; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 100;
background: var(--color-sumi); color: var(--color-white); padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--color-wood); outline-offset: 3px;
}
/* ---------- layout helpers ---------- */
.section {
max-width: var(--container-width);
margin: 0 auto;
padding: var(--space-section) 24px;
}
.section + .section { padding-top: 0; }
/* A handful of TOP sections (CHILDREN'S DINING, NEWS) read as quieter, closer-set
moments rather than major chapters — this keeps the page from settling into one
monotonous rhythm of identical gaps (spec フェーズ3D §16). */
.section--cozy { padding-top: var(--space-section-cozy); padding-bottom: var(--space-section-cozy); }
.section-cta { text-align: center; margin-top: 44px; }
.section-title { margin-bottom: 48px; text-align: center; }
.section-eyebrow {
font-family: var(--font-sans);
letter-spacing: 0.18em;
font-size: 13px;
color: var(--color-wood);
margin: 0 0 12px;
}
.section-title h2 { font-size: clamp(22px, 3vw, 32px); }
.section-lead { margin-top: 16px; color: var(--color-sumi-soft); font-size: 15px; }
.empty-state { color: var(--color-sumi-soft); text-align: center; padding: 24px 0; }
.prose p { margin: 0 0 1.4em; }
.prose p:last-child { margin-bottom: 0; }
/* ---------- buttons ---------- */
.button {
display: inline-flex; align-items: center; justify-content: center;
padding: 14px 32px; font-size: 14px; letter-spacing: 0.08em;
border-radius: var(--radius); transition: opacity .2s ease, background .2s ease;
}
.button-primary { background: var(--color-sumi); color: var(--color-white); }
.button-primary:hover { opacity: 0.85; }
.button-outline { border: 1px solid var(--color-sumi); color: var(--color-sumi); }
.button-outline:hover { background: var(--color-sumi); color: var(--color-white); }
.text-link { color: var(--color-wood); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
/* ---------- header / nav ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
border-bottom: 1px solid var(--color-border);
}
.site-header-inner {
max-width: var(--container-width); margin: 0 auto; padding: 18px 24px;
display: flex; align-items: center; justify-content: space-between;
}
/* Mark + store name side by side — the circular brush-mark badge alone read as too small
to recognize in the screenshots, so the name now rides next to it (spec フェーズ3D.1 §3). */
.site-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); letter-spacing: 0.03em; }
.site-logo-image { display: block; width: 36px; height: 36px; object-fit: contain; flex: none; }
.site-logo-text { font-size: 16px; }
.site-nav-primary { display: flex; gap: 32px; }
/* Secondary nav (currently just 子ども食堂 — see header.mjs) is intentionally out of the
confirmed 6-item PC nav, but stays reachable on mobile via the drawer below, plus the
footer, the TOP page's CHILDREN'S DINING section, and a link from ABOUT. */
.site-nav-secondary { display: none; }
.site-nav a { font-size: 14px; letter-spacing: 0.04em; position: relative; }
.site-nav a[aria-current="page"] { color: var(--color-wood); }
.nav-toggle {
display: none; flex-direction: column; gap: 5px; padding: 11px;
}
.nav-toggle-bar { width: 22px; height: 1.5px; background: var(--color-sumi); }
@media (max-width: 860px) {
.nav-toggle { display: flex; }
.site-nav {
position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px); height: 100vh;
overflow-y: auto;
background: var(--color-white); padding: 96px 32px 32px; transform: translateX(100%);
transition: transform .25s ease; box-shadow: -8px 0 24px rgba(0,0,0,0.08);
}
.site-nav.is-open { transform: translateX(0); }
.site-nav-primary { flex-direction: column; gap: 24px; }
.site-nav-secondary {
display: flex; flex-direction: column; gap: 16px;
margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-border);
}
.site-nav-secondary a { font-size: 13px; color: var(--color-sumi-soft); }
body.nav-open { overflow: hidden; }
}
/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1fr; }
.hero-media {
aspect-ratio: 4 / 3; background: var(--color-kinari-deep);
overflow: hidden;
}
.hero-media--placeholder { display: grid; place-items: center; color: var(--color-sumi-soft); font-size: 13px; }
.hero-image { width: 100%; height: 100%; object-fit: cover; }
.hero-copy {
padding: clamp(32px, 6vw, 64px) 24px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.hero-copy h1 { font-size: clamp(26px, 4.5vw, 42px); }
.hero-subcopy { color: var(--color-sumi-soft); max-width: 32em; text-wrap: balance; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (min-width: 860px) {
.hero { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
.hero-media { aspect-ratio: auto; }
.hero-copy { text-align: left; align-items: flex-start; }
.hero-cta { justify-content: flex-start; }
}
/* ---------- about (TOP): text + interior photo — フェーズ3C.1 / 3D ---------- */
.about-grid { display: flex; flex-direction: column; gap: 36px; }
.about-grid .section-title { text-align: left; margin-bottom: 0; }
.about-copy { display: flex; flex-direction: column; gap: 24px; }
.about-copy h2 { font-size: clamp(24px, 3.4vw, 34px); }
.about-copy, .about-photo { min-width: 0; }
/* A quiet offset "mounted photo" detail — kinari-deep card peeking out behind the
interior shot — so the 2-column layout doesn't read as a plain corporate split. */
.about-photo { position: relative; }
.about-photo::before {
content: ''; position: absolute; z-index: 0;
top: 16px; right: -16px; bottom: -16px; left: 16px;
background: var(--color-kinari-deep); border-radius: 4px;
}
.about-photo img {
position: relative; z-index: 1; display: block; width: 100%;
aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px;
}
@media (min-width: 860px) {
.about-grid { flex-direction: row; align-items: center; gap: 64px; }
.about-grid > * { flex: 1; }
}
/* ---------- access: exterior photo — フェーズ3C.1 ---------- */
.access-exterior-image {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: 4px; margin-bottom: 32px;
}
/* PC 2-column layout (spec フェーズ3E.1 §1) — /access/ exists for "can I go right now"
decisions, so hours/closed days must sit in the same first view as the photo on a
1440×1000 screen instead of scrolling below a full-width photo. No rule below 860px,
so mobile keeps its already-approved stacked photo→info flow untouched. */
@media (min-width: 860px) {
.access-layout { display: flex; gap: 48px; align-items: flex-start; }
.access-photo { flex: 1.15; }
.access-photo .access-exterior-image { margin-bottom: 0; }
.access-info { flex: 1; padding-top: 4px; }
/* Slightly roomier than the shared storeInfo default (used as-is by the footer and by
TOP's own ACCESS section, neither touched here) — this is the one page whose whole
job is reading these facts, so they get a bit more size/line breathing room. */
.page-access .store-info-list { gap: 16px; }
.page-access .store-info-row { font-size: 15px; }
}
/* ---------- menu category index (フェーズ3B) ---------- */
.menu-index-wrap {
max-width: var(--container-width); margin: 0 auto var(--space-section-cozy); position: relative;
}
.menu-index {
display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: 0 24px 6px; scrollbar-width: thin;
}
.menu-index-pill {
flex: none; padding: 10px 18px; font-size: 13px; white-space: nowrap;
border: 1px solid var(--color-border); border-radius: 999px;
color: var(--color-sumi-soft); background: var(--color-white);
transition: border-color .15s ease, color .15s ease;
}
.menu-index-pill:hover, .menu-index-pill:focus-visible { border-color: var(--color-wood); color: var(--color-wood); }
/* A soft fade at the right edge hints there's more to scroll without needing a caption
explaining it (spec フェーズ3E §5) — hidden automatically once nothing is cut off,
since a mask simply has nothing to fade when content already fits. */
@media (max-width: 640px) {
.menu-index { mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); }
}
/* ---------- menu cards ---------- */
.menu-group {
max-width: var(--container-width); margin: 0 auto; padding: 0 24px;
/* Keeps the category heading clear of the sticky header when jumped to via the
category index or a #chintan-style URL fragment. */
scroll-margin-top: 100px;
}
/* Categories sit closer together than TOP's section rhythm — this page exists for
someone already reading the details, not being introduced to the brand (spec フェーズ
3E §21) — but still with clear daylight between each category (§6). */
.menu-group + .menu-group { margin-top: var(--space-section-cozy); }
.menu-group-heading { text-align: center; margin-bottom: 40px; font-size: 24px; }
/* auto-fit (not auto-fill) collapses genuinely-empty tracks instead of reserving them as
blank columns, so 3 items split evenly into a natural 3-column row and 4+ items fall
into their usual width instead of leaving a phantom 4th column (spec フェーズ3E.1 §2).
Track sizing itself still uses 1fr (needed so auto-fit's column-count math is based on
the 240px min, not a small fixed max, which is what actually produced 3 even columns
below) — the "don't stretch a lone item huge" requirement is instead handled on the
card itself just below (max-width + centering), decoupled from track sizing. This only
affects the general /menu/ category grid — SIGNATURE MENU below has its own
higher-specificity override and is untouched. */
.menu-card-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px;
}
/* auto-fill leaves a phantom empty 4th column at container widths around 1120px when
there are only 3 items, so the SIGNATURE MENU trio would sit left-aligned instead of
spanning evenly. Force exactly 3 across on PC / 1 per row on mobile instead (spec
フェーズ3D §7). */
.signature-section .menu-card-grid { grid-template-columns: 1fr; }
@media (min-width: 860px) {
.signature-section .menu-card-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
/* The gap to LIMITED MENU below was reading too heavy on PC — trimmed ~28% off just this
section's own bottom space (space-section-cozy scales proportionally, so mobile only
loses a few px, not enough to feel cramped) rather than touching --space-section
site-wide (spec フェーズ3D.1 §5). */
.signature-section { padding-bottom: calc(var(--space-section) * 0.72); }
/* Caps how wide a single card can grow when its 1fr track ends up wider than this (a
category with only 1-2 active items) and centers it in the leftover space, rather than
stretching it edge-to-edge (spec フェーズ3E.1 §2). No-op whenever the track is already
narrower than 360px (3+ items), since width:100% just fills the track as before. Well
under the ~330px SIGNATURE MENU column width on TOP, so that section is unaffected. */
.menu-card { background: var(--color-white); width: 100%; max-width: 360px; justify-self: center; }
.menu-card--photo .menu-card-media {
position: relative; aspect-ratio: 4 / 3; background: var(--color-kinari);
overflow: hidden; margin-bottom: 16px;
}
.menu-card-image { width: 100%; height: 100%; object-fit: cover; }
.menu-card--photo .menu-card-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
/* Text card (no image on this item yet) — deliberately designed as its own complete
"spec card", not a leftover placeholder (spec フェーズ3E.1 §3): a soft kinari
background and generous padding read as intentional, and centering the body fills the
full row height that a taller photo-card sibling creates via grid's default item
stretch, instead of leaving dead space at the bottom. No placeholder image is ever
added — the moment the CMS gets a photo, the next build switches to the photo layout
above automatically (see menuCard.mjs). */
.menu-card--text .menu-card-body {
height: 100%; display: flex; flex-direction: column; justify-content: center;
background: var(--color-kinari); border: 1px solid var(--color-border);
border-radius: 4px; padding: 32px 24px;
}
.menu-card-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.menu-card-toprow .menu-card-category { margin-bottom: 0; }
.menu-card--text .menu-card-badges { position: static; display: flex; gap: 6px; flex: none; }
.badge {
font-size: 11px; letter-spacing: 0.06em; color: var(--color-white);
padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.badge-new { background: var(--color-badge-new); }
.badge-limited { background: var(--color-badge-limited); }
.badge-spicy { background: var(--color-badge-spicy); }
.badge-soldout { background: var(--color-badge-soldout); }
.menu-card.is-soldout { opacity: 0.55; }
.menu-card-category { font-size: 12px; color: var(--color-wood); margin-bottom: 4px; }
.menu-card-name { font-size: 18px; margin-bottom: 6px; }
/* Price sits right under the name (name → price → description) so it reads before the
description on both the photo and text card layouts. */
.menu-card-price { display: block; font-family: var(--font-serif); font-size: 17px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.menu-card-time { color: var(--color-sumi-soft); font-size: 12px; margin-bottom: 6px; }
.menu-card-desc { color: var(--color-sumi-soft); font-size: 14px; margin-bottom: 0; }
/* ---------- compact menu list (topping / drink — フェーズ3B §2) ---------- */
.menu-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.menu-list-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--color-white); }
.menu-list-row.is-soldout { opacity: 0.55; }
.menu-list-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.menu-list-row-name { font-size: 15px; }
.menu-list-row-note { font-size: 12.5px; color: var(--color-sumi-soft); }
.menu-list-row-price { flex: none; font-family: var(--font-serif); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-list-row-soldout { font-size: 10px; letter-spacing: 0.04em; color: var(--color-badge-soldout); }
.menu-list-group + .menu-list-group { margin-top: 28px; }
.menu-list-group-heading {
font-size: 13px; letter-spacing: 0.06em; color: var(--color-wood);
margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border);
}
/* ---------- limited menu: large photo-forward feature — フェーズ3D §8 ---------- */
/* Deliberately not the small generic menu-card grid: a single limited item needs to read
as a moment ("today only"), not just another card among many. */
.limited-feature { display: flex; flex-direction: column; }
.limited-feature + .limited-feature { margin-top: 56px; }
.limited-feature-media {
aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--color-kinari);
}
.limited-feature-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.limited-feature-image--placeholder { width: 100%; height: 100%; }
.limited-feature-body { padding-top: 24px; }
.limited-feature-badges { display: flex; gap: 6px; margin-bottom: 12px; }
.limited-feature-body h3 { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 10px; }
.limited-feature-price {
font-family: var(--font-serif); font-size: 20px; font-variant-numeric: tabular-nums;
margin-bottom: 12px;
}
.limited-feature-desc { color: var(--color-sumi-soft); margin-bottom: 14px; max-width: 46em; }
.limited-feature-period { font-size: 12.5px; letter-spacing: 0.05em; color: var(--color-wood); }
@media (min-width: 860px) {
.limited-feature { flex-direction: row; align-items: stretch; gap: 56px; }
.limited-feature-media { flex: 0 0 50%; aspect-ratio: auto; }
.limited-feature-body {
flex: 1; padding-top: 0; display: flex; flex-direction: column; justify-content: center;
}
}
/* ---------- /limited/ page: "spec sheet" detail block — フェーズ3E §11 ---------- */
/* Not a copy of TOP's .limited-feature — clearly labeled price/period/serving-time rows
read as confirmation for someone about to decide whether to come in, rather than TOP's
punchy flowing intro. Each active limited item (0, 1, or several) gets its own block. */
.limited-detail { display: flex; flex-direction: column; }
.limited-detail + .limited-detail { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--color-border); }
.limited-detail-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--color-kinari); }
.limited-detail-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.limited-detail-image--placeholder { width: 100%; height: 100%; }
.limited-detail-body { padding-top: 24px; }
.limited-detail-badges { display: flex; gap: 6px; margin-bottom: 12px; }
.limited-detail-category { font-size: 12px; color: var(--color-wood); margin-bottom: 6px; }
.limited-detail-body h2 { font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 16px; }
.limited-detail-specs {
display: grid; gap: 8px; margin: 0 0 16px; padding: 16px;
background: var(--color-kinari); border-radius: 4px;
}
.limited-detail-spec-row { display: grid; grid-template-columns: 88px 1fr; gap: 12px; font-size: 14px; }
.limited-detail-spec-row dt { margin: 0; color: var(--color-sumi-soft); }
.limited-detail-spec-row dd { margin: 0; font-family: var(--font-serif); font-variant-numeric: tabular-nums; }
.limited-detail-desc { color: var(--color-sumi-soft); max-width: 52em; }
@media (min-width: 860px) {
.limited-detail { flex-direction: row; align-items: flex-start; gap: 56px; }
.limited-detail-media { flex: 0 0 44%; }
.limited-detail-body { flex: 1; padding-top: 4px; }
}
/* ---------- campaign: kinari section + bordered white feature card — フェーズ3D §9/§10 ---------- */
/* Visually distinct from LIMITED on purpose: a contained card on a warm background,
emphasizing the period/offer as a label above the title, rather than a full-bleed
photo-dominant block — the two sections shouldn't read as the same shape twice. */
.campaign-section { background: var(--color-kinari); }
.campaign-feature {
background: var(--color-white); border: 1px solid var(--color-border); border-radius: 4px;
overflow: hidden;
}
.campaign-feature + .campaign-feature { margin-top: 32px; }
.campaign-feature-media { aspect-ratio: 16 / 9; overflow: hidden; }
.campaign-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campaign-feature-body { padding: 28px 24px 32px; }
.campaign-feature-period { font-size: 12px; letter-spacing: 0.06em; color: var(--color-wood); margin-bottom: 10px; }
.campaign-feature-body h3 { font-size: clamp(18px, 2.2vw, 22px); margin-bottom: 12px; }
.campaign-feature-desc { color: var(--color-sumi-soft); font-size: 14.5px; }
@media (min-width: 860px) {
.campaign-feature { display: flex; }
.campaign-feature-media { flex: 0 0 42%; aspect-ratio: auto; }
.campaign-feature-body { flex: 1; padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
}
/* ---------- commitment ---------- */
.commitment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; text-align: center; }
.commitment-item h3 { font-size: 18px; margin-bottom: 12px; }
.commitment-item p { color: var(--color-sumi-soft); font-size: 14px; }
/* ---------- news list: quiet editorial rows — フェーズ3D §13 / 3E §12 ---------- */
/* Shared base for both TOP's terse rows and /news/'s richer .news-list-row--detailed
variant below. A thumbnail-less story never leaves a blank image box — there's simply
no image slot unless .news-list-thumb-wrap is actually present in the markup. */
.news-list { border-top: 1px solid var(--color-border); }
.news-list-row {
display: flex; flex-direction: column; gap: 6px;
padding: 18px 4px; border-bottom: 1px solid var(--color-border);
}
.news-list-meta { display: flex; align-items: baseline; gap: 12px; }
.news-list-date { font-family: var(--font-serif); font-size: 13px; color: var(--color-sumi-soft); font-variant-numeric: tabular-nums; }
.news-list-category { font-size: 11.5px; letter-spacing: 0.05em; color: var(--color-wood); }
.news-list-title { font-size: 15px; }
.news-list-arrow { display: none; }
@media (min-width: 640px) {
.news-list-row { flex-direction: row; align-items: baseline; gap: 20px; }
.news-list-meta { flex: 0 0 150px; }
.news-list-title { flex: 1; }
.news-list-arrow {
display: inline-block; flex: none; color: var(--color-wood);
opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease;
}
.news-list-row:hover .news-list-arrow, .news-list-row:focus-visible .news-list-arrow {
opacity: 1; transform: translateX(0);
}
}
/* ---------- /news/ list row (adds description + optional small thumbnail) — フェーズ3E §12 ---------- */
/* Always a compact row (not column-stacked on narrow phones like the terse TOP variant
above) — a fixed-size thumbnail + flexible text column reads fine at any width. */
.news-list-row--detailed { flex-direction: row; align-items: center; gap: 14px; }
.news-list-thumb-wrap { flex: none; width: 60px; height: 60px; border-radius: 4px; overflow: hidden; }
.news-list-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-list-row--detailed .news-list-content {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.news-list-row--detailed .news-list-meta { flex: none; }
.news-list-desc {
font-size: 13px; color: var(--color-sumi-soft);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden;
}
.news-list-row--detailed .news-list-arrow { display: inline-block; flex: none; opacity: 0.5; }
.news-list-row--detailed:hover .news-list-arrow, .news-list-row--detailed:focus-visible .news-list-arrow { opacity: 1; }
/* ---------- children's dining (TOP) — フェーズ3D §12 / 3D.1 §6 ---------- */
.kodomo-section { background: var(--color-kinari); }
/* Current TOP treatment: text only. The announcement-style guide poster reads as event
promotion rather than brand story when blown up on TOP, so it's held back here and
shown only on /kodomo-shokudo/ (unchanged) until real activity photos exist. A
constrained max-width keeps this from stretching into an awkwardly wide single column
now that there's no second column to balance it. */
.kodomo-copy-solo { max-width: 620px; margin: 0 auto; text-align: center; }
/* Dormant 2-column (text + photo) layout, kept for when a real activity photo is added
back to TOP — not in use while .kodomo-copy-solo above is what top.mjs renders. */
.kodomo-grid { display: flex; flex-direction: column; gap: 32px; }
.kodomo-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.kodomo-copy .section-title { text-align: left; margin-bottom: 0; }
/* The guide image is a photographed poster with real text on it — never crop it like a
dish photo (spec フェーズ3D §12), so it keeps its natural proportions at a moderate size. */
.kodomo-photo { align-self: center; }
.kodomo-photo img { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 4px; margin: 0 auto; }
@media (min-width: 860px) {
.kodomo-grid { flex-direction: row; align-items: flex-start; gap: 64px; }
.kodomo-copy { flex: 1.3; }
.kodomo-photo { flex: 1; align-self: flex-start; }
}
/* ---------- access (TOP): exterior photo + reordered info — フェーズ3D §15 ---------- */
.access-section { background: var(--color-kinari); }
.access-grid { display: flex; flex-direction: column; gap: 28px; margin-bottom: 32px; }
.access-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.access-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.access-info { min-width: 0; }
@media (min-width: 860px) {
.access-grid { flex-direction: row; align-items: center; gap: 56px; }
.access-photo, .access-info { flex: 1; }
}
/* ---------- follow strip (SNS — フェーズ3B §8: a light line, not a full section) ---------- */
.follow-strip {
max-width: var(--container-width); margin: 0 auto; padding: 28px 24px;
display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.follow-strip-label { font-size: 11.5px; letter-spacing: 0.14em; color: var(--color-wood); }
.follow-strip-links { display: flex; gap: 18px; }
.follow-strip-links a { font-size: 13.5px; border-bottom: 1px solid var(--color-border); padding-bottom: 2px; }
.follow-strip-links a:hover { border-color: currentColor; color: var(--color-wood); }
/* ---------- store info ---------- */
.store-info-list { display: grid; gap: 10px; }
.store-info-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 14px; }
.store-info-row dt { color: var(--color-sumi-soft); }
.store-info-row dd { margin: 0; }
.store-info-map-link { display: inline-block; margin-top: 16px; color: var(--color-wood); border-bottom: 1px solid currentColor; }
.store-info--compact { font-size: 13px; }
/* ---------- footer ---------- */
.site-footer { background: var(--color-sumi); color: var(--color-kinari); margin-top: var(--space-section); }
.site-footer-inner { max-width: var(--container-width); margin: 0 auto; padding: 56px 24px; text-align: center; }
.site-footer-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto 14px; }
.site-footer-name { font-family: var(--font-serif); font-size: 18px; }
.site-footer-name-en { font-size: 12px; letter-spacing: 0.1em; color: var(--color-wood-light); margin-top: 4px; }
.site-footer .store-info { margin: 28px auto; max-width: 360px; }
.site-footer .store-info-row dt { color: var(--color-wood-light); }
.site-footer-nav {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
margin: 0 auto 20px; padding-top: 20px; max-width: 420px;
border-top: 1px solid rgba(203,177,144,0.3);
}
.site-footer-nav a { font-size: 12.5px; color: var(--color-kinari); }
.site-footer-nav a:hover { color: var(--color-wood-light); }
.site-footer-sns { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; }
.site-footer-copyright { font-size: 12px; color: var(--color-wood-light); }
/* ---------- article / detail pages ---------- */
.page-header { text-align: center; }
/* ---------- /about/ page body: photo, then headline + text — フェーズ3E §10 ---------- */
/* Deliberately not a copy of TOP's about-grid (no offset-frame device, photo leads
instead of trailing, and the photo carries slightly more width) so the two pages read
as related but distinct. */
.about-page-grid { display: flex; flex-direction: column; gap: 32px; }
.about-page-photo { border-radius: 4px; overflow: hidden; }
.about-page-photo img { display: block; width: 100%; height: auto; }
.about-page-copy h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 20px; }
.about-page-lead { color: var(--color-sumi-soft); margin-bottom: 20px; }
@media (min-width: 860px) {
.about-page-grid { flex-direction: row; align-items: center; gap: 56px; }
.about-page-photo { flex: 1.15; }
.about-page-copy { flex: 1; }
}
.about-kodomo-link { margin-top: 32px; text-align: center; }
.article { max-width: 760px; }
.article-meta { display: flex; gap: 12px; font-size: 12px; color: var(--color-sumi-soft); margin-bottom: 12px; }
.article h1 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 24px; }
.article-image { width: 100%; margin-bottom: 24px; }
.page-feature-image { width: 100%; margin-bottom: 32px; border-radius: 4px; }
/* The 子ども食堂 guide is a photographed poster, not a wide atmosphere shot — capped so
it reads as a supporting announcement rather than a full-bleed hero-style image. */
.page-feature-image--poster { max-width: 480px; margin-left: auto; margin-right: auto; }
.kodomo-page-body { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.kodomo-page-body h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 16px; }
.kodomo-page-lead { color: var(--color-sumi-soft); margin-bottom: 16px; }
.kodomo-page-body .prose { text-align: left; }
/* ---------- mobile quick-access CTA bar (フェーズ3B §7) ---------- */
/* Two destinations only (MENU / ACCESS) — the phone number is deliberately not here;
it's a tap target inside the ACCESS section/page instead, so this bar never reads as
a hard-sell "call now" strip. Hidden entirely above the 860px nav breakpoint. */
.mobile-cta-bar { display: none; }
@media (max-width: 860px) {
/* Reserves space so the fixed bar never overlaps the last section or the footer,
however far the page is scrolled. */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.mobile-cta-bar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: var(--color-white); border-top: 1px solid var(--color-border);
padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta-link {
flex: 1; display: flex; align-items: center; justify-content: center;
height: 56px; font-size: 13px; letter-spacing: 0.08em; color: var(--color-sumi);
}
.mobile-cta-link + .mobile-cta-link { border-left: 1px solid var(--color-border); }
.mobile-cta-link[aria-current="page"] { color: var(--color-wood); background: var(--color-kinari); }
}
/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 1; transform: none; }
.js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js-ready .reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}