@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;500;600&display=swap");

:root {
  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; --text-v37-font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; --text-v37-font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif; --text-v37-font-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif; --text-v37-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;
  --motion-ease: cubic-bezier(.16, 1, .3, 1); --text-v37-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-family: var(--font-gothic);
  font-weight: 300;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
.site-header__nav a,
.site-header__contact,
.footer__nav,
button {
  font-family: var(--font-mincho);
}

.site-header .site-header__nav a {
  font-family: var(--font-mincho);
  font-weight: 400;
  letter-spacing: .045em;
}

body.motion-ready .site-header__logo,
body.motion-ready .site-header__nav a,
body.motion-ready .site-header__contact {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
}

body.motion-loaded .site-header__logo,
body.motion-loaded .site-header__nav a,
body.motion-loaded .site-header__contact {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .75s var(--motion-ease), transform .75s var(--motion-ease);
}

body.motion-loaded .site-header__nav a:nth-child(1) { transition-delay: .12s; }
body.motion-loaded .site-header__nav a:nth-child(2) { transition-delay: .18s; }
body.motion-loaded .site-header__nav a:nth-child(3) { transition-delay: .24s; }
body.motion-loaded .site-header__nav a:nth-child(4) { transition-delay: .30s; }
body.motion-loaded .site-header__nav a:nth-child(5) { transition-delay: .36s; }
body.motion-loaded .site-header__contact { transition-delay: .42s; }

body.motion-ready .motion-heading,
body.motion-ready .motion-copy,
body.motion-ready .motion-item {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 42px, 0) rotate(.55deg);
  transform-origin: 0 100%;
  will-change: opacity, filter, transform;
}

body.motion-ready .motion-heading.is-visible,
body.motion-ready .motion-copy.is-visible,
body.motion-ready .motion-item.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0);
  transition-property: opacity, filter, transform;
  transition-duration: 1.45s, 1.2s, 1.45s;
  transition-delay: calc(var(--motion-index, 0) * 120ms);
  transition-timing-function: var(--motion-ease);
}

body.motion-ready .motion-copy.is-visible {
  transition-duration: 1.25s, 1.05s, 1.25s;
}

body.motion-ready .motion-image {
  opacity: 0;
  clip-path: inset(16% 0 22% 0);
  filter: blur(9px);
  transform: translate3d(0, 54px, 0) rotate(.85deg) scale(1.025);
  transform-origin: 50% 100%;
  will-change: opacity, clip-path, filter, transform;
}

body.motion-ready .motion-image.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  transition-property: opacity, clip-path, filter, transform;
  transition-duration: 1.3s, 1.3s, 1.1s, 1.3s;
  transition-delay: calc(var(--motion-index, 0) * 180ms);
  transition-timing-function: var(--motion-ease);
}

/* Illustrations keep their drawn quality: no photo-like clipping or blur. */
body.motion-ready .motion-illustration {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.975);
  transform-origin: 50% 70%;
  will-change: opacity, transform;
}

body.motion-ready .motion-illustration.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 1s var(--motion-ease), transform 1.2s var(--motion-ease);
  transition-delay: calc(var(--motion-index, 0) * 110ms);
}

body.motion-ready .reveal {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 42px, 0) rotate(.45deg);
}

body.motion-ready .reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0);
  transition: opacity 1.35s var(--motion-ease) var(--d, 0s), filter 1.1s var(--motion-ease) var(--d, 0s), transform 1.35s var(--motion-ease) var(--d, 0s);
}

body.motion-ready .wipe {
  opacity: 0;
  clip-path: inset(12% 0 28% 0);
  filter: blur(8px);
  transform: translate3d(0, 48px, 0) rotate(.7deg) scale(1.02);
}

body.motion-ready .wipe.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  transition: opacity 1.3s var(--motion-ease), clip-path 1.3s var(--motion-ease), filter 1.1s var(--motion-ease), transform 1.3s var(--motion-ease);
}

body.motion-ready .tx .tx-inner {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, 115%, 0) rotate(1deg);
}

body.motion-ready .tx.is-visible .tx-inner {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0);
  transition: opacity 1.3s var(--motion-ease), filter 1.1s var(--motion-ease), transform 1.55s var(--motion-ease);
}

.motion-parallax-frame {
  overflow: hidden;
}

.motion-parallax-frame > img,
.motion-parallax-frame > .ph {
  transform: translate3d(0, var(--motion-parallax-y, 0), 0) scale(1.065);
  transform-origin: center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body.motion-ready .site-header__logo,
  body.motion-ready .site-header__nav a,
  body.motion-ready .site-header__contact,
  body.motion-ready .motion-heading,
  body.motion-ready .motion-copy,
  body.motion-ready .motion-item,
  body.motion-ready .motion-image,
  body.motion-ready .motion-illustration,
  body.motion-ready .reveal,
  body.motion-ready .wipe,
  body.motion-ready .tx .tx-inner {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}