@charset "utf-8";
/* =========================================================
   ローディング（ロゴが組み上がる）
   使用箇所: common/inc/top/loader.html + common/js/top-loader.js

   ロゴを構成する24個の図形が、バラバラの位置と角度から定位置へ
   集まってロゴが完成する。シンボルが先に着地し、文字は左から順。
   完成後に一拍おいて、幕が上下へ割れて FV へ渡す。

   パーツの動きは JS（Web Animations API）だが、幕の開きは CSS の
   アニメーションなので、JS が落ちても画面は必ず明ける。
   ========================================================= */

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

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

.ldr {
  --tsc: 1;
  --ease-open: cubic-bezier(.76, 0, .24, 1);

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  /* 開ききったあと操作を妨げないよう、最後に消える */
  animation: ldrDone .01s linear calc(2.28s * var(--tsc)) forwards;
}

/* to だけだと終端の丸めで visible のまま止まることがある（JS無効時に
   全画面レイヤーが残ってクリックを遮断した）。from/to 両方で隠し、
   遅延後は期間中ずっと非表示にする */
@keyframes ldrDone {
  from,
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

/* --- 上下に割れて開く幕 ---
   地はグラデーション＋ノイズ。ノイズは160pxのタイルを1枚だけ
   ラスタライズして敷き詰めるので描画コストはほぼゼロ。
   グラデーションは画面サイズで敷き、上下のパネルで位置を合わせて
   2枚で1枚の絵に見えるようにしている */
.ldr__panel {
  position: absolute;
  right: 0;
  left: 0;
  height: 50.2%;
  background-color: #eff3f9;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    radial-gradient(1500px 950px at 50% 50%, #fdfeff 0%, #edf1f8 48%, #dde4ef 100%);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, 100vw 100vh;
  /* 白地なので overlay ではなく multiply。粒が暗い側に乗る */
  background-blend-mode: multiply, normal;
  will-change: transform;
}

.ldr__panel--t {
  top: 0;
  background-position: 0 0, center top;
  animation: ldrOpenT calc(.58s * var(--tsc)) var(--ease-open) calc(1.70s * var(--tsc)) forwards;
}

.ldr__panel--b {
  bottom: 0;
  background-position: 0 0, center bottom;
  animation: ldrOpenB calc(.58s * var(--tsc)) var(--ease-open) calc(1.70s * var(--tsc)) forwards;
}

@keyframes ldrOpenT {
  to { transform: translateY(-100%); }
}

@keyframes ldrOpenB {
  to { transform: translateY(100%); }
}

/* --- ロゴ --- */
.ldr__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(190px, 21vw, 296px);
  transform: translate(-50%, -50%);
}

.ldr .ldr__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* パーツを個別に動かすので、各図形を自身の中心で回す */
.ldr__svg path,
.ldr__svg polygon {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

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

@media print, screen and (max-width: 767px) {
  .ldr__logo {
    width: clamp(160px, 46vw, 220px);
  }
}