/* =========================================================================
   Soroeru — Material Design 3
   Tokens taken from material-components/material-web (v0.192) and the
   M3 color scheme generated from source color #2F55D4 with
   @material/material-color-utilities.
   ========================================================================= */

/* ---------- Roboto (Apache-2.0), self-hosted: no third-party requests ---------- */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ========================= Design tokens ========================= */

:root {
  /* --- md.sys.color (light) --- */
  --md-sys-color-primary: #2c52d1;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dde1ff;
  --md-sys-color-on-primary-container: #001452;
  --md-sys-color-secondary: #5a5d72;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dee1f9;
  --md-sys-color-on-secondary-container: #171b2c;
  --md-sys-color-tertiary: #75546f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffd7f4;
  --md-sys-color-on-tertiary-container: #2c1229;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #fefbff;
  --md-sys-color-on-background: #1b1b1f;
  --md-sys-color-surface: #fefbff;
  --md-sys-color-on-surface: #1b1b1f;
  --md-sys-color-surface-variant: #e2e1ec;
  --md-sys-color-on-surface-variant: #45464f;
  --md-sys-color-outline: #767680;
  --md-sys-color-outline-variant: #c6c5d0;
  --md-sys-color-inverse-surface: #303034;
  --md-sys-color-inverse-on-surface: #f2f0f4;
  --md-sys-color-inverse-primary: #b7c4ff;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-dim: #dbd9de;
  --md-sys-color-surface-bright: #fbf8fd;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f3f7;
  --md-sys-color-surface-container: #f0edf1;
  --md-sys-color-surface-container-high: #eae7ec;
  --md-sys-color-surface-container-highest: #e4e1e6;

  /* --- md.ref.typeface --- */
  --md-ref-typeface-plain: 'Roboto', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'Noto Sans JP', system-ui, sans-serif;
  --md-ref-typeface-weight-regular: 400;
  --md-ref-typeface-weight-medium: 500;

  /* --- md.sys.shape --- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* --- md.sys.state --- */
  --md-sys-state-hover-state-layer-opacity: 0.08;
  --md-sys-state-focus-state-layer-opacity: 0.12;
  --md-sys-state-pressed-state-layer-opacity: 0.12;

  /* --- md.sys.motion --- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-long2: 500ms;

  /* --- md.sys.elevation (key shadow @30%, ambient @15%) --- */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1:
    0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level2:
    0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level3:
    0 1px 3px 0 rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);

  /* layout */
  --layout-max: 1128px;
  --layout-gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #b7c4ff;
    --md-sys-color-on-primary: #002583;
    --md-sys-color-primary-container: #0038b7;
    --md-sys-color-on-primary-container: #dde1ff;
    --md-sys-color-secondary: #c2c5dd;
    --md-sys-color-on-secondary: #2c2f42;
    --md-sys-color-secondary-container: #424659;
    --md-sys-color-on-secondary-container: #dee1f9;
    --md-sys-color-tertiary: #e4bad9;
    --md-sys-color-on-tertiary: #43273f;
    --md-sys-color-tertiary-container: #5c3d56;
    --md-sys-color-on-tertiary-container: #ffd7f4;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffb4ab;
    --md-sys-color-background: #1b1b1f;
    --md-sys-color-on-background: #e4e1e6;
    --md-sys-color-surface: #1b1b1f;
    --md-sys-color-on-surface: #e4e1e6;
    --md-sys-color-surface-variant: #45464f;
    --md-sys-color-on-surface-variant: #c6c5d0;
    --md-sys-color-outline: #90909a;
    --md-sys-color-outline-variant: #45464f;
    --md-sys-color-inverse-surface: #e4e1e6;
    --md-sys-color-inverse-on-surface: #303034;
    --md-sys-color-inverse-primary: #2c52d1;
    --md-sys-color-surface-dim: #131316;
    --md-sys-color-surface-bright: #39393c;
    --md-sys-color-surface-container-lowest: #0e0e11;
    --md-sys-color-surface-container-low: #1b1b1f;
    --md-sys-color-surface-container: #1f1f23;
    --md-sys-color-surface-container-high: #2a2a2d;
    --md-sys-color-surface-container-highest: #343438;
  }
}

/* ========================= Type scale ========================= */

.md-display-large  { font: 400 57px/64px var(--md-ref-typeface-plain); letter-spacing: -0.25px; }
.md-display-medium { font: 400 45px/52px var(--md-ref-typeface-plain); letter-spacing: 0; }
.md-display-small  { font: 400 36px/44px var(--md-ref-typeface-plain); letter-spacing: 0; }
.md-headline-large  { font: 400 32px/40px var(--md-ref-typeface-plain); letter-spacing: 0; }
.md-headline-medium { font: 400 28px/36px var(--md-ref-typeface-plain); letter-spacing: 0; }
.md-headline-small  { font: 400 24px/32px var(--md-ref-typeface-plain); letter-spacing: 0; }
.md-title-large  { font: 400 22px/28px var(--md-ref-typeface-plain); letter-spacing: 0; }
.md-title-medium { font: 500 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.15px; }
.md-title-small  { font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.1px; }
.md-body-large  { font: 400 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.5px; }
.md-body-medium { font: 400 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.25px; }
.md-body-small  { font: 400 12px/16px var(--md-ref-typeface-plain); letter-spacing: 0.4px; }
.md-label-large  { font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.1px; }
.md-label-medium { font: 500 12px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px; }
.md-label-small  { font: 500 11px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px; }

/* Japanese text needs more leading than the Latin-tuned M3 scale. */
:lang(ja) .md-display-large  { line-height: 1.3; }
:lang(ja) .md-headline-large,
:lang(ja) .md-headline-medium { line-height: 1.5; }
:lang(ja) .md-body-large  { line-height: 1.8; }
:lang(ja) .md-body-medium { line-height: 1.75; }

/* ========================= Base ========================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font: 400 16px/24px var(--md-ref-typeface-plain);
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); }
.layout-narrow { max-width: 720px; }
.center { text-align: center; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  padding: 12px 20px; border-radius: var(--md-sys-shape-corner-small);
}
.skip:focus { left: 16px; top: 16px; }

:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* ========================= State layer ========================= */

.state-layer { position: relative; overflow: hidden; isolation: isolate; }
.state-layer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: currentColor; opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.state-layer:hover::before { opacity: var(--md-sys-state-hover-state-layer-opacity); }
.state-layer:focus-visible::before { opacity: var(--md-sys-state-focus-state-layer-opacity); }
.state-layer:active::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); }

/* ========================= Top app bar ========================= */

.m3-top-app-bar {
  position: sticky; top: 0; z-index: 50;
  height: 64px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  transition: background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
/* On scroll the bar takes surface-container elevation, per M3. */
.m3-top-app-bar.is-scrolled {
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level2);
}
.m3-top-app-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 100%;
}
.m3-top-app-bar-headline {
  display: inline-flex; align-items: center; gap: 12px;
  color: inherit; font: 400 22px/28px var(--md-ref-typeface-plain);
}
.m3-top-app-bar-headline:hover { text-decoration: none; }
.brand-ja {
  color: var(--md-sys-color-on-surface-variant);
  font: 500 11px/16px var(--md-ref-typeface-plain); letter-spacing: 1.5px;
}
.m3-top-app-bar-actions { display: flex; align-items: center; gap: 4px; }

@media (max-width: 860px) {
  .m3-top-app-bar-actions .m3-text-button { display: none; }
}

/* Alignment mark: bars flush to a common edge = 揃える */
.brand-mark {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 3px;
  width: 24px; height: 24px; padding-left: 5px; flex: none;
}
.brand-mark::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
}
.brand-mark i { display: block; height: 3px; border-radius: 2px; background: var(--md-sys-color-primary); }
.brand-mark i:nth-child(1) { width: 100%; }
.brand-mark i:nth-child(2) { width: 58%; }
.brand-mark i:nth-child(3) { width: 82%; }

/* ========================= Buttons ========================= */

.m3-filled-button,
.m3-outlined-button,
.m3-text-button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 24px;
  border: none; border-radius: var(--md-sys-shape-corner-full);
  font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.1px;
  cursor: pointer; white-space: nowrap;
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.m3-filled-button:hover,
.m3-outlined-button:hover,
.m3-text-button:hover { text-decoration: none; }

.m3-filled-button {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.m3-filled-button:hover { box-shadow: var(--md-sys-elevation-level1); }

.m3-outlined-button {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.m3-text-button {
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  padding: 0 12px;
}

.m3-button-group { display: flex; flex-wrap: wrap; gap: 12px; }
.m3-button-group.center { justify-content: center; }

/* ========================= Chip (assist, static) ========================= */

.m3-assist-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.1px;
}
.m3-assist-chip .indicator {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-sys-color-tertiary); flex: none;
}

/* Badge-like label used inside a list item */
.m3-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font: 500 11px/16px var(--md-ref-typeface-plain); letter-spacing: 0.5px;
}

/* ========================= Cards ========================= */

.m3-outlined-card,
.m3-filled-card,
.m3-elevated-card {
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 24px;
  color: var(--md-sys-color-on-surface);
}
.m3-outlined-card {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.m3-filled-card {
  background: var(--md-sys-color-surface-container-highest);
  border: none;
}
.m3-elevated-card {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-level1);
  border: none;
}
.m3-card-headline { margin: 0 0 8px; color: var(--md-sys-color-on-surface); }
.m3-card-body { margin: 0; color: var(--md-sys-color-on-surface-variant); }

/* ========================= Sections ========================= */

.section { padding: 80px 0; }
.section-surface-container-low { background: var(--md-sys-color-surface-container-low); }
.section-surface-container { background: var(--md-sys-color-surface-container); }

.section-overline {
  margin: 0 0 12px;
  color: var(--md-sys-color-primary);
  text-transform: none;
}
.section-headline { margin: 0 0 16px; color: var(--md-sys-color-on-surface); }
.section-supporting { margin: 0 0 40px; max-width: 640px; color: var(--md-sys-color-on-surface-variant); }

@media (min-width: 701px) { .br-sp { display: none; } }

/* ========================= Hero ========================= */

.hero { padding: 88px 0 40px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  /* Cover the whole hero so the falloff never meets a clipped box edge. */
  background: radial-gradient(58% 78% at 16% 32%,
    color-mix(in srgb, var(--md-sys-color-primary-container) 60%, transparent) 0%,
    transparent 68%);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-headline { margin: 0 0 24px; color: var(--md-sys-color-on-background); }
.hero-supporting { margin: 0 0 32px; max-width: 620px; color: var(--md-sys-color-on-surface-variant); }
.hero .m3-button-group { margin-bottom: 28px; }

.align-viz { display: flex; align-items: center; gap: 10px; margin-top: 48px; height: 32px; }
.align-viz span {
  display: block; width: 48px; height: 8px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); opacity: .2;
  animation: settle var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate) infinite alternate;
}
.align-viz span:nth-child(1) { --y: -14px; animation-delay: 0ms; }
.align-viz span:nth-child(2) { --y: 11px;  animation-delay: 70ms; }
.align-viz span:nth-child(3) { --y: -8px;  animation-delay: 140ms; }
.align-viz span:nth-child(4) { --y: 14px;  animation-delay: 210ms; }
.align-viz span:nth-child(5) { --y: -12px; animation-delay: 280ms; }
.align-viz span:nth-child(6) { --y: 7px;   animation-delay: 350ms; }
.align-viz span:nth-child(7) { --y: -5px;  animation-delay: 420ms; }

@keyframes settle {
  from { transform: translateY(var(--y)) scaleX(.72); opacity: .16; }
  to   { transform: translateY(0) scaleX(1); opacity: .5; }
}

/* ========================= Grids ========================= */

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; }

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* ========================= List (M3 list items) ========================= */

.m3-list {
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}
.m3-list-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 24px;
  min-height: 72px;
}
.m3-list-item + .m3-list-item { border-top: 1px solid var(--md-sys-color-outline-variant); }
.m3-list-item-leading {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font: 500 14px/20px var(--md-ref-typeface-plain); letter-spacing: 0.1px;
}
.m3-list-item.is-current .m3-list-item-leading {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.m3-list-item-headline {
  margin: 0 0 4px; color: var(--md-sys-color-on-surface);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.m3-list-item-supporting { margin: 0; color: var(--md-sys-color-on-surface-variant); }

@media (max-width: 560px) {
  .m3-list-item { flex-direction: column; gap: 10px; padding: 16px; }
}

/* ========================= Feature / icon lists ========================= */

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { padding: 16px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.feature-list li:last-child { border-bottom: none; }
.feature-list strong {
  display: block; margin-bottom: 4px;
  color: var(--md-sys-color-on-surface);
  font: 500 16px/24px var(--md-ref-typeface-plain); letter-spacing: 0.15px;
}
.feature-list span { color: var(--md-sys-color-on-surface-variant); }

.marker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.marker-list li {
  position: relative; padding-left: 28px;
  color: var(--md-sys-color-on-surface-variant);
}
.marker-list li::before {
  position: absolute; left: 0; top: 0; font-weight: 500;
}
.marker-check li::before { content: "✓"; color: var(--md-sys-color-primary); }
.marker-cross li::before { content: "✕"; color: var(--md-sys-color-error); font-size: 0.9em; }

/* ========================= Callout ========================= */

.m3-callout {
  margin: 40px 0 0; padding: 24px 28px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-large);
}
.m3-callout strong { font-weight: 500; }

/* ========================= Footer ========================= */

.site-footer {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  padding: 48px 0 32px;
}
.footer-inner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px;
  padding-bottom: 28px;
}
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--md-sys-color-on-surface); }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-nav a { color: var(--md-sys-color-on-surface-variant); }
.footer-divider { border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: 20px; }

/* ========================= Reduced motion ========================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .align-viz span { animation: none; opacity: .38; transform: none; }
  * { transition-duration: 1ms !important; }
}

/* Dark scheme: primary-container is saturated, so soften the hero wash. */
@media (prefers-color-scheme: dark) {
  .hero::before {
    background: radial-gradient(58% 78% at 16% 32%,
      color-mix(in srgb, var(--md-sys-color-primary-container) 32%, transparent) 0%,
      transparent 68%);
  }
}

/* =========================================================================
   Responsive type scale — M3 window size classes
   compact  <600px   : step the display/headline roles down one step
   medium   600-839px: one step down from expanded
   expanded >=840px  : the scale as authored above
   ========================================================================= */

@media (max-width: 599px) {
  /* display-large -> display-small */
  .md-display-large { font-size: 36px; line-height: 44px; letter-spacing: 0; }
  :lang(ja) .md-display-large { line-height: 1.35; }
  /* display-small -> headline-medium */
  .md-display-small { font-size: 28px; line-height: 36px; }
  /* headline-large -> headline-medium */
  .md-headline-large { font-size: 26px; line-height: 34px; }
  :lang(ja) .md-headline-large { line-height: 1.5; }

  .hero { padding: 48px 0 32px; }
  .section { padding: 56px 0; }
  :root { --layout-gutter: 16px; }
}

@media (min-width: 600px) and (max-width: 839px) {
  /* display-large -> display-medium */
  .md-display-large { font-size: 45px; line-height: 52px; letter-spacing: 0; }
  :lang(ja) .md-display-large { line-height: 1.32; }
  /* headline-large -> headline-medium */
  .md-headline-large { font-size: 28px; line-height: 36px; }
  :lang(ja) .md-headline-large { line-height: 1.5; }

  .hero { padding: 64px 0 40px; }
  .section { padding: 64px 0; }
}