/* ========================================================================== Global layout & shared site structure Base typography + layout utilities + header / mobile nav drawer / footer. Reusable small widgets (buttons, labels, section titles) live in components.css instead. ========================================================================== */ /* -- Base typography -------------------------------------------------- */ body { font-family: var(--font-jp-serif); font-weight: var(--fw-medium); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); background: var(--color-white); } :lang(en) body { /* PDF note on the EN design: "本文はNoto Serif JP / Regularでお願いします （日本語より少し軽くしたいです）" — English body copy uses the same Japanese serif family at a lighter weight, not a different typeface. */ font-weight: var(--fw-regular); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-en-serif); font-weight: var(--fw-regular); line-height: 1.3; } a { transition: opacity 0.2s ease; } a:hover { opacity: 0.7; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent-red); outline-offset: 2px; } /* -- Layout utilities --------------------------------------------------- */ .container { width: min(100% - (var(--content-padding-inline) * 2), var(--content-width)); margin-inline: auto; } /* Break a section out of .container to span the full viewport width, e.g. hero photos and the black / beige background sections. */ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .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; top: -100%; left: var(--space-3); z-index: 999; padding: var(--space-2) var(--space-4); background: var(--color-black); color: var(--color-white); border-radius: var(--radius-sm); } .skip-link:focus { top: var(--space-2); } /* A
that only breaks the line on SP — some supplied body copy wraps at different points between the PC and SP designs (more line breaks on SP, not different ones), so the extra SP-only breaks are just dropped above the 768px breakpoint instead of duplicating the whole paragraph. */ @media (min-width: 768px) { .break-sp { display: none; } } /* Applied to while the mobile nav drawer is open, to stop the page behind it from scrolling. */ html.nav-open { overflow: hidden; } /* -- Scroll reveal ------------------------------------------------------- docs/coding-spec.md §5: "スクロールに合わせて下からヒョイっと表示". assets/js/common.js adds .is-visible via IntersectionObserver the first time an element enters the viewport. */ .reveal { opacity: 0.1; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) var(--reveal-easing), transform var(--reveal-duration) var(--reveal-easing); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* -- Site header -------------------------------------------------------- PC: white bar, logo left, text nav + language pill right (measured height 75px from the supplied PC design canvas). SP: logo left, hamburger toggle right; nav moves into #nav-drawer. */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-white); border-bottom: var(--border-hairline-dark); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-height-sp); padding-inline: var(--content-padding-inline); } .site-header__logo img { height: 32px; width: auto; } .site-nav { display: none; } .nav-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); } .nav-toggle__icon { position: relative; display: block; width: 22px; height: 14px; } .nav-toggle__icon::before, .nav-toggle__icon::after, .nav-toggle__bar { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease; } .nav-toggle__icon::before { top: 0; } .nav-toggle__bar { top: 6px; } .nav-toggle__icon::after { top: 12px; } .nav-toggle__label { font-family: var(--font-en-serif); font-size: 0.7rem; letter-spacing: 0.08em; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 6px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 6px; transform: rotate(-45deg); } /* -- Mobile nav drawer --------------------------------------------------- Full-screen black overlay opened by .nav-toggle. Hidden by default; assets/js/common.js toggles [data-open] and aria-hidden. */ .nav-drawer { position: fixed; top: var(--header-height-sp); left: 0; right: 0; bottom: 0; z-index: var(--z-nav-drawer); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: var(--color-black); color: var(--color-white); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; overflow-y: auto; padding: var(--space-7) var(--space-4); } .nav-drawer[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); } .nav-drawer__list { width: 100%; max-width: 320px; } .nav-drawer__list li { border-top: var(--border-hairline); } .nav-drawer__list li:last-child { border-bottom: var(--border-hairline); } .nav-drawer__list a { display: block; padding: var(--space-4) var(--space-2); text-align: center; font-family: var(--font-jp-serif); font-size: 1.05rem; } .nav-drawer__lang { display: block; margin-top: var(--space-6); padding: var(--space-3) var(--space-6); border: 1px solid var(--color-white); border-radius: var(--radius-sm); font-family: var(--font-en-serif); letter-spacing: 0.08em; text-align: center; } @media (min-width: 768px) { .site-header__inner { height: var(--header-height-pc); padding-inline: var(--content-padding-inline); } .site-header__logo img { height: 40px; } .site-nav { display: flex; align-items: center; gap: var(--space-6); } .site-nav__list { display: flex; align-items: center; gap: var(--space-5); font-family: var(--font-jp-sans); font-size: 0.9rem; } .site-nav__lang { padding: var(--space-1) var(--space-4); background: var(--color-black); color: var(--color-white); border-radius: var(--radius-pill); font-family: var(--font-jp-sans); font-size: 0.75rem; letter-spacing: 0.05em; } .nav-toggle { display: none; } .nav-drawer { display: none; } } /* -- Site footer --------------------------------------------------------- Centered logo + copyright, page-top control pinned to the right. */ .site-footer { position: relative; padding: var(--space-6) var(--content-padding-inline); background: var(--color-white); border-top: var(--border-hairline-dark); text-align: center; } .site-footer__logo img { height: 32px; width: auto; margin-inline: auto; } .site-footer__copyright { margin-top: var(--space-2); font-family: var(--font-en-serif); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--color-black); } .page-top { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: var(--space-4); margin-inline: auto; background: var(--color-black); color: var(--color-white); } @media (min-width: 768px) { .site-footer__inner { display: flex; justify-content: center; } .page-top { position: absolute; right: var(--content-padding-inline); top: 50%; transform: translateY(-50%); margin: 0; } }