:root {
    --color-ink: #102633;
    --color-deep: #071924;
    --color-blue: #2879aa;
    --color-sky: #a9cbdc;
    --color-mist: #eef3f5;
    --color-paper: #fafbfb;
    --color-white: #ffffff;
    --color-line: rgba(16, 38, 51, 0.17);
    --font-sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
    --content-width: 1180px;
    --space-section: clamp(5.5rem, 9vw, 10rem);
    --space-inline: clamp(1.25rem, 4.5vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-sans); line-height: 1.85; }
h1, h2, h3, h4 { word-break: auto-phrase; line-break: strict; text-wrap: balance; }
p, li, dd { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.u-nowrap { display: inline-block; white-space: nowrap; }
.u-line { display: block; white-space: nowrap; }
.u-break-mobile { display: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 4px; }