@charset "utf-8";
/* =========================================================
   ローディング（VOICE ON THE LINE ― 一本の回線を、声が通る）
   使用箇所: common/inc/top/loader.html + common/js/top-loader.js

   一本の線（回線）に声紋のパルスが2度通り、通るたびにコピーが
   1行ずつ左から現れる。0.2秒の静止を挟んで、すべてが左から消え、
   幕が右へスライドして FV へ渡す。演出は全て CSS で完結させ、
   JS が動かなくても必ず明けるようにしてある。
   ========================================================= */

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/* 同一セッションの2回目以降は初回ペイント前に消す（loader.html 冒頭の判定） */
.ldr-skip .ldr {
  display: none;
}

.ldr {
  --tsc: 1;
  --ldr-rulew: min(84vw, 17.5em);
  --ease-draw: cubic-bezier(.9, 0, .12, 1);
  --ease-travel: cubic-bezier(.37, 0, .63, 1);
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);
  --ease-exit: cubic-bezier(.64, 0, .78, 0);
  --ease-curtain: cubic-bezier(.7, 0, .3, 1);

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* サイトの地色と完全に同じ。幕が開いても照度が跳ねない */
  background: #eff3f9;
  /* 退場でスライドしたときだけ見える、幕の厚み */
  box-shadow: -16px 0 40px rgba(13, 21, 38, .14);
  will-change: transform;
  animation: ldrCurtain calc(.42s * var(--tsc)) var(--ease-curtain) calc(2.62s * var(--tsc)) forwards;
}

@keyframes ldrCurtain {
  from {
    transform: translateX(0);
  }
  99% {
    visibility: visible;
  }
  to {
    transform: translateX(100%);
    visibility: hidden;
  }
}

/* 子が継承する基準サイズ。--ldr-rulew の em もこれに追随する */
.ldr__inner {
  font-size: clamp(19px, 3.1vw, 42px);
  text-align: center;
  transform: translateY(-2vh);
}

.ldr__copy {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  font-feature-settings: "palt";
  color: #30395e;
}

/* inline のままだと clip-path が効かない */
.ldr__txt {
  display: inline-block;
  clip-path: inset(-10% 100% -10% 0);
}

/* in(both) → out(forwards) の2連。out に backwards を付けると
   in の期間まで上書きして最初から全表示になってしまう */
.ldr__copy--1 .ldr__txt {
  animation:
    ldrTxtIn calc(.54s * var(--tsc)) var(--ease-reveal) calc(.78s * var(--tsc)) both,
    ldrTxtOut calc(.22s * var(--tsc)) var(--ease-exit) calc(2.30s * var(--tsc)) forwards;
}

.ldr__copy--2 .ldr__txt {
  animation:
    ldrTxtIn calc(.54s * var(--tsc)) var(--ease-reveal) calc(1.38s * var(--tsc)) both,
    ldrTxtOut calc(.22s * var(--tsc)) var(--ease-exit) calc(2.36s * var(--tsc)) forwards;
}

@keyframes ldrTxtIn {
  from { clip-path: inset(-10% 100% -10% 0); }
  to { clip-path: inset(-10% 0 -10% 0); }
}

@keyframes ldrTxtOut {
  to { clip-path: inset(-10% 0 -10% 100%); }
}

/* --- 回線 --- */
.ldr__stage {
  position: relative;
  width: var(--ldr-rulew);
  height: 76px;
  margin: 0 auto;
  overflow: hidden;
}

.ldr__rule {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: #30395e;
  transform: scaleX(0);
  transform-origin: left center;
  animation:
    ldrRuleIn calc(.45s * var(--tsc)) var(--ease-draw) calc(.10s * var(--tsc)) both,
    ldrRuleOut calc(.24s * var(--tsc)) var(--ease-exit) calc(2.40s * var(--tsc)) forwards;
}

@keyframes ldrRuleIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 引くときは左から、抜けるときは右へ。origin は keyframe の中で切り替える */
@keyframes ldrRuleOut {
  from {
    transform-origin: right center;
    transform: scaleX(1);
  }
  to {
    transform-origin: right center;
    transform: scaleX(0);
  }
}

/* --- 線の上を通る声 --- */
.ldr__pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 180px;
  height: 76px;
  transform: translate(-190px, -50%);
  will-change: transform;
}

.ldr__pulse--1 {
  animation: ldrTravel calc(.72s * var(--tsc)) var(--ease-travel) calc(.52s * var(--tsc)) both;
}

.ldr__pulse--2 {
  animation: ldrTravel calc(.62s * var(--tsc)) var(--ease-travel) calc(1.14s * var(--tsc)) both;
}

@keyframes ldrTravel {
  from { transform: translate(-190px, -50%); }
  to { transform: translate(calc(var(--ldr-rulew) + 10px), -50%); }
}

.ldr__vibe {
  display: block;
}

.ldr__pulse--1 .ldr__vibe {
  animation: ldrVibe .24s linear calc(.52s * var(--tsc)) 3;
}

.ldr__pulse--2 .ldr__vibe {
  animation: ldrVibe .2s linear calc(1.14s * var(--tsc)) 3;
}

@keyframes ldrVibe {
  0%, 100% { transform: scaleY(1); }
  18% { transform: scaleY(.8); }
  38% { transform: scaleY(1.08); }
  58% { transform: scaleY(.86); }
  78% { transform: scaleY(1.04); }
}

/* 2声目は少し小さい。会話のリズムをつくる */
.ldr__pulse--1 svg { transform: scaleY(var(--sy1, 1)); }
.ldr__pulse--2 svg { transform: scaleY(var(--sy2, .68)); }

.ldr__caption {
  margin: 34px 0 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  color: rgba(48, 57, 94, .5);
  opacity: 0;
  animation:
    ldrCapIn calc(.18s * var(--tsc)) var(--ease-reveal) calc(1.92s * var(--tsc)) both,
    ldrCapOut calc(.16s * var(--tsc)) linear calc(2.32s * var(--tsc)) forwards;
}

@keyframes ldrCapIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ldrCapOut {
  to { opacity: 0; }
}

/* 止めずに遅くする。止めると「動かない」状態になってしまう */
@media (prefers-reduced-motion: reduce) {
  .ldr {
    --tsc: 1.15;
  }
  .ldr__vibe {
    animation: none;
  }
}

@media print, screen and (max-width: 767px) {
  .ldr {
    --sy1: .8;
    --sy2: .55;
  }
  .ldr__stage {
    height: 60px;
  }
  .ldr__caption {
    margin-top: 24px;
  }
}

@media screen and (max-width: 360px) {
  .ldr__inner {
    font-size: 17px;
  }
  .ldr__copy {
    letter-spacing: .03em;
  }
}