:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #555555;
  --color-heading-muted: #bababa;
  --color-primary: #1c2c72;
  --color-primary-hover: #16235c;
  --color-accent: #ed6c00;
  --color-border: #e0e0e0;
  --color-surface: #f4f4f4;
  --color-placeholder: #6c6c6c;
  --font-sans:
    'Noto Sans JP', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
    sans-serif;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --font-en: 'Barlow Condensed', system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.4;
  --ls-base: 0.04em;
  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --header-height: 5rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --transition-base: 0.3s ease;
  --pt-duration: 0.72s;
  --pt-stagger: 0.1s;
  --pt-ease: cubic-bezier(0.62, 0.01, 0.2, 1);
  --pt-color-front: var(--color-primary);
  --pt-color-back: var(--color-accent);
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
  --z-page-transition: 400;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html {
  font-size: var(--fz-base);
  scroll-behavior: smooth;
}
@media (max-width: 640px) {
  html {
    font-size: 3.5cqw;
  }
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  line-height: var(--lh-heading);
  font-weight: 700;
}

a {
  color: inherit;
  transition: color var(--transition-base), opacity var(--transition-base);
}
a:hover {
  opacity: 0.7;
}
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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

html.reveal-enabled [data-reveal=up] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s ease-out var(--reveal-delay, 0s), translate 0.7s ease-out var(--reveal-delay, 0s);
}
html.reveal-enabled [data-reveal=up].is-inview {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-enabled [data-reveal=up] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
:root {
  --pt-shear: 24.1vh;
}
@supports (height: 100dvh) {
  :root {
    --pt-shear: 24.1dvh;
  }
}

.pt-shutter {
  position: fixed;
  inset: 0;
  z-index: var(--z-page-transition);
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.pt-shutter__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(120vw + 2 * var(--pt-shear));
  height: 100%;
  transform: translateX(calc(-120vw - 2 * var(--pt-shear)));
  will-change: transform;
  clip-path: polygon(var(--pt-shear) 0, 100% 0, calc(100% - var(--pt-shear)) 100%, 0 100%);
}

.pt-shutter__panel--back {
  background: var(--pt-color-back);
}

.pt-shutter__panel--front {
  background: var(--pt-color-front);
}

.pt-page {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  html.pt-leave .pt-shutter {
    display: block;
  }
  html.pt-leave .pt-shutter__panel {
    animation: pt-cover var(--pt-duration) var(--pt-ease) both;
  }
  html.pt-leave .pt-shutter__panel--front {
    animation-delay: var(--pt-stagger);
  }
  html.pt-enter .pt-shutter {
    display: block;
  }
  html.pt-enter .pt-shutter__panel {
    animation: pt-reveal var(--pt-duration) var(--pt-ease) both;
  }
  html.pt-enter .pt-shutter__panel--front {
    animation-delay: var(--pt-stagger);
  }
  html.pt-enter .pt-page {
    animation: pt-fade-in var(--pt-duration) ease-out calc(var(--pt-duration) * 0.4) both;
  }
}
@keyframes pt-cover {
  from {
    transform: translateX(calc(-120vw - 2 * var(--pt-shear)));
  }
  to {
    transform: translateX(calc(-10vw - var(--pt-shear)));
  }
}
@keyframes pt-reveal {
  from {
    transform: translateX(calc(-10vw - var(--pt-shear)));
  }
  to {
    transform: translateX(110vw);
  }
}
@keyframes pt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}:root {
  --color-bg: #fff;
  --color-text: #000;
  --color-text-muted: #555;
  --color-heading-muted: #bababa;
  --color-primary: #1c2c72;
  --color-primary-hover: #16235c;
  --color-accent: #ed6c00;
  --color-border: #e0e0e0;
  --color-surface: #f4f4f4;
  --color-placeholder: #6c6c6c;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Barlow Condensed", system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.4;
  --ls-base: .04em;
  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --header-height: 5rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 4px 16px #0000001a;
  --transition-base: .3s ease;
  --pt-duration: .72s;
  --pt-stagger: .1s;
  --pt-ease: cubic-bezier(.62, .01, .2, 1);
  --pt-color-front: var(--color-primary);
  --pt-color-back: var(--color-accent);
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
  --z-page-transition: 400;
}

.logo {
  display: inline-flex;
  line-height: 0;
  width: var(--logo-width, 7.5rem);
}

.logo:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}
:root {
  --color-bg: #fff;
  --color-text: #000;
  --color-text-muted: #555;
  --color-heading-muted: #bababa;
  --color-primary: #1c2c72;
  --color-primary-hover: #16235c;
  --color-accent: #ed6c00;
  --color-border: #e0e0e0;
  --color-surface: #f4f4f4;
  --color-placeholder: #6c6c6c;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Barlow Condensed", system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.4;
  --ls-base: .04em;
  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --header-height: 5rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 4px 16px #0000001a;
  --transition-base: .3s ease;
  --pt-duration: .72s;
  --pt-stagger: .1s;
  --pt-ease: cubic-bezier(.62, .01, .2, 1);
  --pt-color-front: var(--color-primary);
  --pt-color-back: var(--color-accent);
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
  --z-page-transition: 400;
}

.roll {
  display: inline-flex;
  line-height: 1;
}

.roll__char {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.roll__layer {
  display: block;
  will-change: transform;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 35ms);
}

.roll__layer--front {
  transform: translateY(calc(var(--roll, 0) * -100%));
}

.roll__layer--back {
  position: absolute;
  inset: 0;
  transform: translateY(calc((1 - var(--roll, 0)) * 100%));
}

.roll__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .roll__layer {
    transition: none;
  }

  .roll__layer--front {
    transform: none;
  }

  .roll__layer--back {
    display: none;
  }
}
:root {
  --color-bg: #fff;
  --color-text: #000;
  --color-text-muted: #555;
  --color-heading-muted: #bababa;
  --color-primary: #1c2c72;
  --color-primary-hover: #16235c;
  --color-accent: #ed6c00;
  --color-border: #e0e0e0;
  --color-surface: #f4f4f4;
  --color-placeholder: #6c6c6c;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Barlow Condensed", system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.4;
  --ls-base: .04em;
  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --header-height: 5rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 4px 16px #0000001a;
  --transition-base: .3s ease;
  --pt-duration: .72s;
  --pt-stagger: .1s;
  --pt-ease: cubic-bezier(.62, .01, .2, 1);
  --pt-color-front: var(--color-primary);
  --pt-color-back: var(--color-accent);
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
  --z-page-transition: 400;
}

.header {
  --logo-width: 7.5rem;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
}

@media (width <= 640px) {
  .header {
    --logo-width: 6.125rem;
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.875rem 2rem;
}

@media (width <= 640px) {
  .header__inner {
    padding: .8125rem;
  }
}

.header__list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header__link {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.3125rem;
  letter-spacing: .04em;
  color: var(--header-link-color, var(--color-bg));
  --nav-underline-color: var(--header-link-color, var(--color-bg));
  position: relative;
  display: inline-flex;
}

.header__link:hover, .header__link:focus-visible {
  --roll: 1;
  opacity: 1;
}

.header__link:after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.375rem;
  height: 2px;
  background-color: var(--nav-underline-color, var(--color-primary));
  transform: scaleX(0);
  transform-origin: 100%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.header__link:hover:after, .header__link:focus-visible:after {
  transform: scaleX(1);
  transform-origin: 0;
}

.header__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.header--on-light {
  --header-link-color: var(--color-primary);
}

.header__burger {
  display: none;
}

@media (width <= 640px) {
  .header__nav {
    display: none;
  }

  .header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4375rem;
    width: 2.5rem;
    height: 1.875rem;
  }

  .header__burger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .header__burger span {
    display: block;
    width: 2.5rem;
    height: .1875rem;
    border-radius: .625rem;
    background-color: var(--header-link-color, var(--color-bg));
  }
}
:root {
  --color-bg: #fff;
  --color-text: #000;
  --color-text-muted: #555;
  --color-heading-muted: #bababa;
  --color-primary: #1c2c72;
  --color-primary-hover: #16235c;
  --color-accent: #ed6c00;
  --color-border: #e0e0e0;
  --color-surface: #f4f4f4;
  --color-placeholder: #6c6c6c;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Barlow Condensed", system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.4;
  --ls-base: .04em;
  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --header-height: 5rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 4px 16px #0000001a;
  --transition-base: .3s ease;
  --pt-duration: .72s;
  --pt-stagger: .1s;
  --pt-ease: cubic-bezier(.62, .01, .2, 1);
  --pt-color-front: var(--color-primary);
  --pt-color-back: var(--color-accent);
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
  --z-page-transition: 400;
}

.footer {
  --logo-width: 8.3125rem;
  --trucks-width: min(46%, 35rem);
  position: relative;
  background-color: var(--color-bg);
  color: var(--color-text);
}

@media (width <= 640px) {
  .footer {
    overflow-x: clip;
  }
}

.footer__inner {
  padding-inline: 3rem;
  padding-block: 2.75rem 1.75rem;
}

@media (width <= 640px) {
  .footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 0 1.8125rem;
  }
}

@media (width <= 640px) {
  .footer__nav {
    display: none;
  }
}

.footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  margin-bottom: 2.5rem;
  padding-right: var(--trucks-width);
}

.footer__link {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: .04em;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
}

.footer__link:hover, .footer__link:focus-visible {
  --roll: 1;
  opacity: 1;
}

.footer__link:after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.375rem;
  height: 2px;
  background-color: var(--nav-underline-color, var(--color-primary));
  transform: scaleX(0);
  transform-origin: 100%;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.footer__link:hover:after, .footer__link:focus-visible:after {
  transform: scaleX(1);
  transform-origin: 0;
}

.footer__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (width <= 640px) {
  .footer__brand {
    flex-direction: column;
    gap: 1rem;
    order: 1;
  }
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  line-height: 1.2;
}

@media (width <= 640px) {
  .footer__info {
    align-items: center;
  }
}

.footer__company {
  font-weight: 500;
  font-size: .875rem;
}

@media (width <= 640px) {
  .footer__company {
    display: none;
  }
}

.footer__address {
  font-size: .875rem;
  color: var(--color-text-muted);
}

@media (width <= 640px) {
  .footer__address {
    font-weight: 500;
    color: var(--color-text);
  }
}

.footer__copyright {
  margin-top: 2.25rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .04em;
}

@media (width <= 640px) {
  .footer__copyright {
    order: 2;
    margin-top: 4.375rem;
    line-height: 1.2;
  }
}

.footer__trucks {
  position: absolute;
  right: clamp(.25rem, 1vw, 1.5rem);
  bottom: 0;
  width: var(--trucks-width);
  pointer-events: none;
  z-index: 1;
}

@media (width <= 640px) {
  .footer__trucks {
    position: relative;
    right: auto;
    bottom: auto;
    order: 0;
    width: 100vw;
    margin-top: -31.3636vw;
    margin-bottom: 3.9375rem;
  }
}

.footer__truck {
  height: auto;
}

.footer__truck--back {
  position: absolute;
  left: -3%;
  bottom: 1.5%;
  width: 88%;
  z-index: 1;
}

@media (width <= 640px) {
  .footer__truck--back {
    left: 0;
    bottom: 0;
    width: 69.3182%;
  }
}

.footer__truck--front {
  position: relative;
  margin-left: 25%;
  width: 100%;
  z-index: 2;
  filter: drop-shadow(-.375rem .375rem .625rem #00000038);
}

@media (width <= 640px) {
  .footer__truck--front {
    margin-left: 27.2727%;
    width: 77.7273%;
  }
}
:root {
  --color-bg: #fff;
  --color-text: #000;
  --color-text-muted: #555;
  --color-heading-muted: #bababa;
  --color-primary: #1c2c72;
  --color-primary-hover: #16235c;
  --color-accent: #ed6c00;
  --color-border: #e0e0e0;
  --color-surface: #f4f4f4;
  --color-placeholder: #6c6c6c;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Barlow Condensed", system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.4;
  --ls-base: .04em;
  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --header-height: 5rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 4px 16px #0000001a;
  --transition-base: .3s ease;
  --pt-duration: .72s;
  --pt-stagger: .1s;
  --pt-ease: cubic-bezier(.62, .01, .2, 1);
  --pt-color-front: var(--color-primary);
  --pt-color-back: var(--color-accent);
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
  --z-page-transition: 400;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  pointer-events: none;
}

@media (width >= 641px) {
  .drawer {
    display: none;
  }
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background-color: #0000;
  cursor: pointer;
}

.drawer__panel {
  --logo-width: 6.125rem;
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 82%;
  max-width: 22.5rem;
  padding: .8125rem 1.5rem 2.5rem;
  background-color: var(--color-bg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__close {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
}

.drawer__close span {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 2.5rem;
  height: .1875rem;
  border-radius: .625rem;
  background-color: var(--color-accent);
}

.drawer__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.drawer__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.drawer__list {
  margin-block-start: 2.5rem;
}

.drawer__item + .drawer__item {
  border-block-start: 1px solid var(--color-border);
}

.drawer__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding-block: 1.375rem;
  text-align: center;
}

.drawer__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.drawer__en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--color-primary);
}

.drawer__ja {
  font-size: .8125rem;
  line-height: 1;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .drawer__panel {
    transition: none;
  }
}
:root {
  --color-bg: #fff;
  --color-text: #000;
  --color-text-muted: #555;
  --color-heading-muted: #bababa;
  --color-primary: #1c2c72;
  --color-primary-hover: #16235c;
  --color-accent: #ed6c00;
  --color-border: #e0e0e0;
  --color-surface: #f4f4f4;
  --color-placeholder: #6c6c6c;
  --font-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-en: "Barlow Condensed", system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.4;
  --ls-base: .04em;
  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --header-height: 5rem;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 7.5rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 4px 16px #0000001a;
  --transition-base: .3s ease;
  --pt-duration: .72s;
  --pt-stagger: .1s;
  --pt-ease: cubic-bezier(.62, .01, .2, 1);
  --pt-color-front: var(--color-primary);
  --pt-color-back: var(--color-accent);
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-modal: 300;
  --z-page-transition: 400;
}

.dot-network {
  position: absolute;
  z-index: 1;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 85vw;
  max-inline-size: none;
  block-size: auto;
  pointer-events: none;
}

@media (width <= 640px) {
  .dot-network {
    inline-size: 130vw;
  }
}