@charset "utf-8";
.t-fv {
  position: relative;
  height: 315vh;
  height: 315svh;
  background: rgb(9 9 9);
}
.t-fv,
.t-fv *,
.t-fv *::before,
.t-fv *::after {
  box-sizing: border-box;
}
.t-fv img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.fv-pagewrap {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  transform: translateZ(0);
}
.fv-pageinner {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100dvh;
  background: rgb(9 9 9);
}
.fv-splash {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  background: rgb(0 0 0);
  pointer-events: none;
}
.fv-splash-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50vw;
  height: 100vh;
  background: rgb(0 0 0);
  clip-path: inset(0 0 0 0);
  transition: clip-path 850ms cubic-bezier(.76, 0, .24, 1);
  will-change: clip-path;
}
.fv-splash-bg:nth-of-type(2) {
  left: 50vw;
}
.fv-splash::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(26rem, 60vw);
  aspect-ratio: 636 / 162;
  background: url(../images/t-logo.png) center / contain no-repeat;
  filter: brightness(0) invert(1);
  transform: translate(-50%, -50%);
  animation: fv-logo-in 900ms cubic-bezier(.19, 1, .22, 1) 80ms backwards;
  transition: opacity 180ms ease-in;
}
.fv-splash.fv-load02::after {
  opacity: 0;
}
@keyframes fv-logo-in {
  from {
    opacity: 0;
    transform: translate(-50%, -38%);
  }
}
.fv-splash.fv-load02 {
  background: transparent;
}
.fv-splash.fv-load02 .fv-splash-bg:nth-of-type(1) {
  clip-path: inset(0 0 100% 0);
}
.fv-splash.fv-load02 .fv-splash-bg:nth-of-type(2) {
  clip-path: inset(100% 0 0 0);
}
.fv-section-fv {
  --fv-type: min(9.4dvh, 22vw);
  --fv-column: calc(var(--fv-type) * 1.13);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}
.fv-bg-img-container {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.fv-bg-img-wrap {
  position: relative;
  width: 50%;
  height: 100dvh;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.fv-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.fv-bg-img.fv-bg-img-01,
.fv-bg-img.fv-bg-img-06 {
  z-index: 3;
}
.fv-bg-img.fv-bg-img-02,
.fv-bg-img.fv-bg-img-07 {
  z-index: 2;
}
.fv-bg-img.fv-bg-img-04 {
  z-index: 1;
}
.t-fv .fv-bg-img img {
  width: 100%;
  height: 100dvh;
  object-fit: cover;
}
.fv-bg-img-02::after,
.fv-bg-img-07::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(var(--fv-veil-dir), rgb(0 0 0 / .46) 0, rgb(0 0 0 / .46) calc(var(--fv-column) + 1.5rem), rgb(0 0 0 / 0) calc(var(--fv-column) + 14rem)),
    rgb(204 204 204);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fv-bg-img-02 {
  --fv-veil-dir: to left;
}
.fv-bg-img-07 {
  --fv-veil-dir: to right;
}
.fv-bg-img-01::after,
.fv-bg-img-06::after,
.fv-bg-img-04::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(var(--fv-veil-dir), var(--fv-veil-col) 0, var(--fv-veil-col) calc(var(--fv-column) + 1.5rem), var(--fv-veil-base) calc(var(--fv-column) + 14rem));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fv-section-fv {
  --fv-veil-base: rgb(179 179 179);
  --fv-veil-col: rgb(128 128 128);
}
.fv-bg-img-wrap01 .fv-bg-img {
  --fv-veil-dir: to left;
}
.fv-bg-img-wrap02 .fv-bg-img {
  --fv-veil-dir: to right;
}
.t-fv .fv-bg-img-06 img {
  object-position: 42% center;
}
@media screen and (max-width: 767px) {
  .t-fv .fv-bg-img-06 img {
    object-position: 39% center;
  }
  .t-fv .fv-bg-img-02 img {
    object-position: 53% center;
  }
  .t-fv .fv-bg-img-07 img {
    object-position: 28% center;
  }
  .t-fv .fv-bg-img-wrap02 .fv-bg-img-04 img {
    object-position: 89% center;
  }
}
@media screen and (min-width: 768px) and (max-aspect-ratio: 1 / 1) {
  .t-fv .fv-bg-img-01 img {
    object-position: 32% center;
  }
  .t-fv .fv-bg-img-02 img {
    object-position: 62% center;
  }
  .t-fv .fv-bg-img-07 img {
    object-position: 23% center;
  }
  .t-fv .fv-bg-img-wrap01 .fv-bg-img-04 img {
    object-position: 66% center;
  }
  .t-fv .fv-bg-img-wrap02 .fv-bg-img-04 img {
    object-position: 98% center;
  }
}
.fv-main-copy {
  --fv-cell: var(--fv-type);
  --fv-h: 70dvh;
  display: flex;
  justify-content: center;
  position: absolute;
  top: calc(6.8rem + 3dvh);
  left: 0;
  z-index: 3;
  width: 100%;
  height: var(--fv-h);
  pointer-events: none;
}
.fv-copy-panel {
  display: flex;
  justify-content: center;
  position: absolute;
  inset: 0;
  opacity: 0;
}
.fv-copy-panel[data-copy="0"] {
  opacity: 1;
}
.fv-copy-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--fv-column);
  height: var(--fv-h);
  overflow: hidden;
  clip-path: inset(100% 0 0);
  transition: clip-path 800ms cubic-bezier(1, 0, .4, 1);
}
.fv-copy-right {
  clip-path: inset(0 0 100%);
}
.fv-section-fv.fv-load03 .fv-copy-column {
  clip-path: inset(0);
}
.fv-section-fv.fv-load03.fv-exit .fv-copy-column {
  clip-path: inset(0 0 100%);
  transition: clip-path 420ms cubic-bezier(.55, 0, .45, 1);
}
.fv-section-fv.fv-load03.fv-exit .fv-copy-right {
  clip-path: inset(100% 0 0);
}
.fv-copy-run {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  will-change: clip-path;
}
.fv-copy-char {
  display: grid;
  place-items: center;
  flex: none;
  width: 100%;
  height: var(--fv-cell);
  overflow: hidden;
}
.fv-copy-punct {
  height: calc(var(--fv-type) * .32);
  overflow: visible;
}
.fv-copy-char > span {
  display: block;
  color: rgb(255 255 255);
  font-family: var(--font-jp, 'Noto Sans JP', sans-serif);
  font-size: var(--fv-type);
  font-weight: 700;
  line-height: 1;
  font-feature-settings: "palt" 1, "kern" 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
@media print, screen and (min-width: 768px) {
  .fv-section-fv {
    --fv-type: min(10dvh, 22vw);
  }
  .fv-main-copy {
    --fv-h: 72dvh;
    top: calc(9.6rem + 2dvh);
  }
}
.t-fv-static {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.t-fv-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  left: 0;
  bottom: 3rem;
  z-index: 5;
  width: 100%;
  padding: 0 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6rem);
  transition: opacity 600ms, transform 600ms cubic-bezier(.19, 1, .22, 1), visibility 0s 600ms;
}
.fv-main-copy[data-message="2"] ~ .t-fv-actions {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.t-btn {
  display: block;
  flex: 1;
  max-width: 22rem;
  border-radius: 3em;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 4.6rem;
  letter-spacing: .03em;
  text-align: center;
  transition: 300ms;
}
.t-btn-main {
  color: rgb(255 255 255);
  background: rgb(var(--c-accent-rgb, 83 113 175));
  border: .1rem solid rgb(var(--c-accent-rgb, 83 113 175));
}
.t-btn-main:hover {
  color: rgb(var(--c-accent-rgb, 83 113 175));
  background: rgb(255 255 255);
  border-color: rgb(255 255 255);
  opacity: 1;
}
.t-btn-sub {
  color: rgb(255 255 255);
  background: rgb(0 0 0 / .25);
  border: .1rem solid rgb(255 255 255 / .8);
}
.t-btn-sub:hover {
  color: rgb(var(--c-ink-rgb, 34 34 34));
  background: rgb(255 255 255);
  opacity: 1;
}
.t-btn:focus-visible {
  outline: .2rem solid rgb(255 255 255);
  outline-offset: .3rem;
}
@media print, screen and (min-width: 768px) {
  .t-fv-actions {
    gap: 1.6rem;
    bottom: 4rem;
  }
  .t-btn {
    flex: none;
    width: 22rem;
    font-size: 1.5rem;
    line-height: 5.2rem;
  }
}
@media screen and (max-width: 767px) {
  html.fv-active .t-head-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.fv-kv-trigger {
  position: absolute;
  left: 0;
  width: 1px;
  height: 10svh;
  margin: 0;
  pointer-events: none;
}
.fv-kv-trigger01 {
  top: 100svh;
}
.fv-kv-trigger02 {
  top: 210svh;
}
.fv-kv-trigger03 {
  top: 315svh;
  height: 0;
}
.no-js .t-fv,
.t-fv.fv-static {
  height: auto;
}
.no-js .fv-pagewrap,
.fv-static .fv-pagewrap {
  position: relative;
  height: 100svh;
  min-height: 56rem;
  transform: none;
}
.no-js .fv-pageinner,
.fv-static .fv-pageinner,
.no-js .fv-section-fv,
.fv-static .fv-section-fv,
.no-js .fv-bg-img-container,
.fv-static .fv-bg-img-container,
.no-js .fv-bg-img-wrap,
.fv-static .fv-bg-img-wrap,
.no-js .fv-bg-img,
.fv-static .fv-bg-img,
.no-js .t-fv .fv-bg-img img,
.fv-static .fv-bg-img img {
  height: 100%;
}
.no-js .fv-section-fv,
.fv-static .fv-section-fv {
  position: absolute;
}
.no-js .fv-splash,
.fv-static .fv-splash,
.no-js .fv-main-copy,
.fv-static .fv-main-copy,
.no-js .fv-kv-trigger,
.fv-static .fv-kv-trigger {
  display: none;
}
.no-js .fv-bg-img-container::after,
.fv-static .fv-bg-img-container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgb(0 0 0 / .35);
}
.no-js .t-fv-static,
.fv-static .t-fv-static {
  top: 50%;
  left: 0;
  z-index: 5;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 3rem;
  overflow: visible;
  clip: auto;
  color: rgb(255 255 255);
  white-space: normal;
  text-align: center;
  transform: translateY(-60%);
}
.no-js .fv-section-fv,
.fv-static .fv-section-fv {
  --fv-veil-col: var(--fv-veil-base);
}
.t-fv-static h1 > span {
  display: inline-block;
}
.no-js .t-fv-static h1,
.fv-static .t-fv-static h1 {
  margin-bottom: 2rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}
.no-js .t-fv-static p,
.fv-static .t-fv-static p {
  font-size: 1.6rem;
  line-height: 1.9;
}
.no-js .t-fv-actions,
.fv-static .t-fv-actions {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media print, screen and (min-width: 768px) {
  .no-js .t-fv-static h1,
  .fv-static .t-fv-static h1 {
    font-size: 6rem;
  }
  .no-js .t-fv-static p,
  .fv-static .t-fv-static p {
    font-size: 2rem;
  }
}
.fv-tagline {
  --fv-copy-end: calc(6.8rem + 3dvh + (70dvh + var(--fv-type) * 6.32) / 2);
  position: absolute;
  top: calc((var(--fv-copy-end) + 100dvh) / 2);
  left: 50%;
  z-index: 4;
  margin: 0;
  padding: .5em 1.15em;
  color: rgb(255 255 255);
  background: rgb(9 9 9 / .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 3em;
  font-family: var(--font-jp, 'Noto Sans JP', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.fv-section-fv.fv-load03 .fv-tagline {
  opacity: var(--fv-tag, 1);
  animation: fv-tag-in 700ms cubic-bezier(.19, 1, .22, 1) 350ms backwards;
}
@keyframes fv-tag-in {
  from {
    opacity: 0;
  }
}
.fv-tagline > span {
  display: inline;
}
@media screen and (max-width: 767px) {
  .fv-tagline {
    padding: .55em 1.5em;
    border-radius: 1.6em;
    text-align: center;
  }
  .fv-tagline > span {
    display: block;
  }
}
@media print, screen and (min-width: 768px) {
  .fv-tagline {
    --fv-copy-end: calc(9.6rem + 2dvh + (72dvh + var(--fv-type) * 6.32) / 2);
    font-size: 15px;
  }
}
@media screen and (max-height: 440px) {
  .fv-tagline {
    display: none;
  }
}
.no-js .fv-tagline,
.fv-static .fv-tagline {
  top: calc(6.8rem + 2.4rem);
  opacity: 1;
  transform: translateX(-50%);
  animation: none;
}
@media print, screen and (min-width: 768px) {
  .no-js .fv-tagline,
  .fv-static .fv-tagline {
    top: calc(9.6rem + 3.2rem);
  }
}
html {
  scrollbar-gutter: stable;
}
html.t-fv-lock {
  overflow: hidden;
}
.fv-copy-tight {
  --fv-type: calc(min(9.4dvh, 22vw) * .96);
  --fv-cell: var(--fv-type);
}
@media print, screen and (min-width: 768px) {
  .fv-copy-tight {
    --fv-type: calc(min(10dvh, 22vw) * .96);
  }
}