@charset "utf-8";

/*
============================ アニメーション CSS ============================
*/

/* 1.パララックス
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ▽ */

.inVr {
  z-index: 110;
  filter: alpha(opacity=0);
  opacity: 0;
  transition: 0.3s ease-in;
  transform: translate(100px, 0px);
}
.inVl {
  z-index: 110;
  filter: alpha(opacity=0);
  opacity: 0;
  transition: 0.3s ease-in;
  transform: translate(-100px, 0px);
}
.inSc {
  filter: alpha(opacity=0);
  opacity: 0;
  transition: 0.3s ease-in;
  transition-timing-function: cubic-bezier(0.75, 0.01, 0.98, 0.44);
  transform: scale(0.3);
}
@media screen and (max-width: 768px) {
  .inVr {
    transition-delay: 0.3s !important;
  }
  .inVl {
    transition-delay: 0.3s !important;
  }
  .inSc {
    transition-delay: 0.3s !important;
  }
}
.inAnime {
  filter: alpha(opacity=100);
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
}
.inAnime2 {
  filter: alpha(opacity=100);
  opacity: 1;
  transform: scale(1);
}

/* バーがゆっくり横に流れる */
:root {
  --ticker-h: 25px;
  --ticker-speed: 40s; /* 1ループにかける時間 */
  --ticker-shift: 1110px; /* ループ1回で動かす距離(px) */
  --ticker-img: url(../img/obi.png);
}

/* ベース */
.neo-ticker {
  position: fixed;
  z-index: 30;
  width: 100%;
  height: var(--ticker-h);
  background: #f096a7 var(--ticker-img) 0 50% repeat-x;
  background-size: auto var(--ticker-h);
  will-change: background-position;
}

/* 上バー: 左方向に流れる */
.neo-ticker.is-top {
  top: 0;
  left: 0;
  animation: bg-marquee var(--ticker-speed) linear infinite;
}

/* 下バー: 右方向へ */
.neo-ticker.is-bottom {
  bottom: 0;
  left: 0;
  animation: bg-marquee-reverse var(--ticker-speed) linear infinite;
}

/* PCで高さ30pxに */
@media (min-width: 768px) {
  .neo-ticker {
    height: 30px;
    background-size: auto 30px;
  }
}

/* SPでは下バーを消す、上バーはabsoluteに */
@media (max-width: 767px) {
  .neo-ticker.is-top {
    position: absolute;
  }
  .neo-ticker.is-bottom {
    display: none;
  }
}

/* アニメーション本体 */
@keyframes bg-marquee {
  0% {
    background-position: 0px 50%;
  }
  100% {
    background-position: calc(-1 * var(--ticker-shift)) 50%;
  }
}
@keyframes bg-marquee-reverse {
  0% {
    background-position: 0px 50%;
  }
  100% {
    background-position: var(--ticker-shift) 50%;
  }
}

/* アクセシビリティ: 動きを抑制 */
@media (prefers-reduced-motion: reduce) {
  .neo-ticker {
    animation: none;
  }
}

/* 上下にゆっくり */
@keyframes bg-pan {
  from {
    background-position: center 100%;
  }
  to {
    background-position: center 0%;
  }
}

/* ===== 線/帯のスクロール連動アニメーション =====
   概要:
   - JS(inview)で要素が表示領域に入ると .active を付与
   - .active 時に線/帯(span)が「伸びる -> 反転して縮む」を1サイクル実行
   - 横線は left/right、縦線は top/bottom 方向を切り替えて動く
  - モックでは表示中のみ、JSで .active を再付与して繰り返し再生
*/

/* ベース: 絶対配置の装飾線。実体は span(色付きバー) */
.deco-line {
  position: absolute;
  z-index: 10;
  display: inline-block;
}

.deco-line span {
  display: block;
  width: 0.5vw;
  height: 2px;
  background: #000;
  opacity: 0;
}

.deco-line span.wh {
  background: #fff;
}

/* 各見出し装飾線の配置とサイズ(PC基準) */
.deco001 {
  top: -70px;
  left: 8%;
}

.deco001 span {
  width: 2px;
  height: 220px;
  background: #000;
}

.deco002 {
  top: 45px;
  left: 8%;
}

.deco002 span {
  width: 530px;
  height: 40px;
  background: #e5e5e5;
}

.deco003 {
  top: -160px;
  right: 9%;
}

.deco003 span {
  width: 2px;
  height: 200px;
  background: #000;
}

.deco004 {
  top: -55px;
  right: 7%;
  left: auto;
}

.deco004 span {
  width: 50px;
  height: 160px;
  background: #020202;
}

.deco005 {
  top: 45px;
  left: 29%;
}

.deco005 span {
  width: 260px;
  height: 40px;
  background: #e5e5e5;
}

.deco006 {
  top: -150px;
  left: 0%;
}

.deco006 span {
  width: 2px;
  height: 200px;
  background: #000;
}

.deco007 {
  top: -55px;
  right: 10%;
  left: auto;
}

.deco007 span {
  width: 50px;
  height: 200px;
  background: #020202;
}
.deco008 {
  top: -70px;
  left: 5%;
}

.deco008 span {
  width: 2px;
  height: 220px;
  background: #000;
}

/* SPでPCと近い見え方に微調整 */
@media screen and (max-width: 767px) {
  .deco001 {
    top: -40px;
  }
  .deco002 {
    top: 38px;
    width: 82%;
  }
  .deco003 {
    top: -75px;
  }
  .deco004 {
    top: -50px;
  }
  .deco005 {
    top: 38px;
    width: 40%;
  }
  .deco006 {
    top: -55px;
  }
  .deco007 {
    top: -42px;
    right: 12%;
  }
  .deco008 {
    top: -40px;
  }

  .deco001 span {
    height: 130px;
  }
  .deco002 span {
    width: 100%;
  }
  .deco003 span {
    height: 110px;
  }
  .deco005 span {
    width: 100%;
  }
  .deco006 span {
    height: 20vw;
  }

  .deco002 span {
    height: 5vw;
  }
  .deco005 span {
    height: 5vw;
  }

  .deco004 span {
    width: 5vw;
    height: 120px;
  }
  .deco007 span {
    width: 5vw;
    height: 100px;
  }
  .deco008 span {
    height: 130px;
  }
}

/* 横線: 左始点 -> 伸長 -> 右始点に切替えて収縮 */
.deco-line-left.active span {
  animation: deco-line-left 3s ease-in 1s;
}

/* 横線: 右始点 -> 伸長 -> 左始点に切替えて収縮 */
.deco-line-right.active span {
  animation: deco-line-right 3s ease-in 1s;
}

/* 縦線: 上始点 -> 伸長 -> 下始点に切替えて収縮 */
.deco-line-top.active span {
  animation: deco-line-top 3s ease 1s;
}

/* 斜線版。回転は固定で、伸縮は縦線キーフレームを再利用 */
.deco-line-30d {
  transform: rotate(-30deg);
}

.deco-line-30d.active span {
  animation: deco-line-top 3s ease-in 1s;
}

.deco-line-45d {
  transform: rotate(45deg);
}

.deco-line-45d.active span {
  animation: deco-line-top 3s ease 2s;
}

.deco-line-135d {
  transform: rotate(135deg);
}

.deco-line-135d.active span {
  animation: deco-line-top 3s ease 2s;
}

@keyframes deco-line-left {
  /* 0-20%: 左基点で出現/伸長 -> 20.1-100%: 右基点で収束 */
  0% {
    opacity: 0;
    transform: scale(0, 1);
    transform-origin: left;
  }

  5% {
    opacity: 1;
  }

  20% {
    transform: scale(1, 1);
    transform-origin: left;
  }

  20.1% {
    transform-origin: right;
  }

  80% {
    transform: scale(0, 1);
    transform-origin: right;
  }

  100% {
    opacity: 1;
    transform: scale(0, 1);
  }
}

@keyframes deco-line-right {
  /* 0-20%: 右基点で出現/伸長 -> 20.1-100%: 左基点で収束 */
  0% {
    opacity: 0;
    transform: scale(0, 1);
    transform-origin: right;
  }

  5% {
    opacity: 1;
  }

  20% {
    transform: scale(1, 1);
    transform-origin: right;
  }

  20.1% {
    transform-origin: left;
  }

  80% {
    transform: scale(0, 1);
    transform-origin: left;
  }

  100% {
    opacity: 1;
    transform: scale(0, 1);
  }
}

@keyframes deco-line-top {
  /* 0-20%: 上基点で出現/伸長 -> 20.1-100%: 下基点で収束 */
  0% {
    opacity: 0;
    transform: scale(1, 0);
    transform-origin: top;
  }

  5% {
    opacity: 1;
  }

  20% {
    transform: scale(1, 1);
    transform-origin: top;
  }

  20.1% {
    transform-origin: bottom;
  }

  80% {
    transform: scale(1, 0);
    transform-origin: bottom;
  }

  100% {
    opacity: 1;
    transform: scale(1, 0);
  }
}

/* ==========================================================================
   KV Glitch

   同じkv.pngを4枚重ね、上3枚だけをclip-pathで断片表示する。

   調整:
   --kvGlitchDuration : 1ループの時間
   --kvGlitchGapX     : 左右のずれ幅
   --kvGlitchGapY     : 上下のずれ幅
   ========================================================================== */

.kvGlitch {
  --kvGlitchDuration: 4s;
  --kvGlitchGapX: 10px;
  --kvGlitchGapY: 5px;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
}

.kvGlitchLayer {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.kvGlitchLayer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kvGlitchLayer:nth-child(n + 2) {
  top: 0;
  opacity: 0;
  animation-duration: var(--kvGlitchDuration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: clip-path, opacity, transform;
}

.kvGlitchLayer:nth-child(2) {
  animation-name: kvGlitchRight;
}

.kvGlitchLayer:nth-child(3) {
  animation-name: kvGlitchLeft;
}

.kvGlitchLayer:nth-child(4) {
  animation-name: kvGlitchFlip;
}

@keyframes kvGlitchRight {
  0% {
    opacity: 1;
    transform: translate3d(var(--kvGlitchGapX), 0, 0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  4% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  6% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  8% {
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  10% {
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  12% {
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  14% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  16% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  18% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  20% {
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--kvGlitchGapX), 0, 0);
  }
  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes kvGlitchLeft {
  0% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--kvGlitchGapX)), 0, 0);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  5% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  7% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  9% {
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  11% {
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  13% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  15% {
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  17% {
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  19% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  20% {
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--kvGlitchGapX)), 0, 0);
  }
  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes kvGlitchFlip {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--kvGlitchGapY)), 0) scale3d(-1, -1, 1);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  1.5% {
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  2% {
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  2.5% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  3% {
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  5% {
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  5.5% {
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  7% {
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  8% {
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  9% {
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  10.5% {
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  11% {
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  13% {
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  14% {
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  14.5% {
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  15% {
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  16% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  18% {
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  20% {
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--kvGlitchGapY)), 0) scale3d(-1, -1, 1);
  }
  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kvGlitchLayer:nth-child(n + 2) {
    display: none;
    animation: none;
  }
}

/* ==========================================================================
   Title Glitch (tit01 - tit06)

   既存のタイトル画像の上に同一画像を3枚重ね、
   KVと同じキーフレームでグリッジを再生する。
   ========================================================================== */

.kvGlitchTitle {
  --kvGlitchDuration: 4s;
  --kvGlitchGapX: 10px;
  --kvGlitchGapY: 5px;
}

.kvGlitchTitleOverlay {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.kvGlitchTitleLayer {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  animation-duration: var(--kvGlitchDuration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: clip-path, opacity, transform;
}

.kvGlitchTitleLayer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kvGlitchTitleLayer:nth-child(1) {
  animation-name: kvGlitchRight;
}

.kvGlitchTitleLayer:nth-child(2) {
  animation-name: kvGlitchLeft;
}

.kvGlitchTitleLayer:nth-child(3) {
  animation-name: kvGlitchFlip;
}

@media (prefers-reduced-motion: reduce) {
  .kvGlitchTitleLayer {
    display: none;
    animation: none;
  }
}

/* ==========================================================================
   Ribbon Shuttle

   2本のリボンを左右へ往復させる。

   位置・大きさ・角度は、直下の .ribbonShuttle 内にある
   CSS変数だけを変更すれば調整できます。
   ========================================================================== */

.ribbonShuttle {
  /* ---------- アニメーション ---------- */
  /* 1周の時間。小さいほど速くなる(ribon03/ribon09と同じ速さ) */
  --ribbonShuttleDuration: 30s;

  /* ---------- 全体と画像の大きさ ---------- */
  /* リボン2本を表示する領域全体の高さ */
  --ribbonShuttleHeight: 160px;

  /*
   * リボン画像の高さ。
   * .ribon03 と同じ「表示領域の横幅 × 8 / 75」にする。
   * SP側の main 最大幅700pxに合わせ、最大74.6667px。
   */
  --ribbonShuttleImageHeight: min(10.6667vw, 74.6667px);

  /* ---------- 上段リボンの位置・角度 ---------- */
  /* 上下位置。大きくすると下へ移動 */
  --ribbonShuttleLine01Top: -10px;

  /* 左右位置。大きくすると右へ移動 */
  --ribbonShuttleLine01Left: -30px;

  /* 角度。プラスで右下がり、マイナスで右上がり */
  --ribbonShuttleLine01Angle: -5deg;

  /* ---------- 下段リボンの位置・角度 ---------- */
  /* 上下位置。大きくすると下へ移動 */
  --ribbonShuttleLine02Top: 60px;

  /* 右端からの位置。大きくすると左へ移動 */
  --ribbonShuttleLine02Right: -30px;

  /* 角度。プラスで右下がり、マイナスで右上がり */
  --ribbonShuttleLine02Angle: 5deg;

  --ribbonShuttleLine03Top: 30px;
  --ribbonShuttleLine03Left: -30px;
  --ribbonShuttleLine03Angle: 7deg;

  --ribbonShuttleLine04Top: 100px;
  --ribbonShuttleLine04Right: -30px;
  --ribbonShuttleLine04Angle: -6deg;

  position: relative;
  width: 100%;
  height: var(--ribbonShuttleHeight);
}

.ribbonShuttleLine {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 120%;
  padding: 10px 20px;
}

.ribbonShuttleLine01 {
  top: var(--ribbonShuttleLine01Top);
  left: var(--ribbonShuttleLine01Left);
  z-index: 1;
  transform: rotate(var(--ribbonShuttleLine01Angle));
  transform-origin: left top;
}

.ribbonShuttleLine02 {
  top: var(--ribbonShuttleLine02Top);
  right: var(--ribbonShuttleLine02Right);
  z-index: 2;
  transform: rotate(var(--ribbonShuttleLine02Angle));
  transform-origin: right top;
}

.ribbonShuttleLine03 {
  top: var(--ribbonShuttleLine03Top);
  left: var(--ribbonShuttleLine03Left);
  z-index: 1;
  transform: rotate(var(--ribbonShuttleLine03Angle));
  transform-origin: left top;
}

.ribbonShuttleLine04 {
  top: var(--ribbonShuttleLine04Top);
  right: var(--ribbonShuttleLine04Right);
  z-index: 2;
  transform: rotate(var(--ribbonShuttleLine04Angle));
  transform-origin: right top;
}

.ribbonShuttleTrack {
  display: flex;
  width: max-content;
  height: var(--ribbonShuttleImageHeight);
  will-change: transform;
}

.ribbonShuttleItem {
  display: block;
  flex: 0 0 auto;
  height: 100%;
}

.ribbonShuttleImage {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}

/* line01・03：右から左へ無限ループ */
.ribbonShuttleLine01 .ribbonShuttleTrack,
.ribbonShuttleLine03 .ribbonShuttleTrack {
  animation: ribonSlideLeft var(--ribbonShuttleDuration) linear infinite;
}

/* line02・04：左から右へ無限ループ */
.ribbonShuttleLine02 .ribbonShuttleTrack,
.ribbonShuttleLine04 .ribbonShuttleTrack {
  animation: ribonSlideRight var(--ribbonShuttleDuration) linear infinite;
}

/*
 * PCでは中央カラムが420px固定。
 * 420 × 8 / 75 = 44.8px なので .ribon03 と同じ高さになる。
 */
@media screen and (min-width: 769px) {
  .ribbonShuttle {
    --ribbonShuttleImageHeight: 44.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ribbonShuttleTrack {
    animation-play-state: paused !important;
  }
}

@media screen and (max-width: 768px) {
  /* 要件対応: SPでは常時動作させる */
  .ribbonShuttleTrack {
    animation-play-state: running !important;
  }
}

/* ==========================================================================
   Title Curtain（tit01 - tit06）

   inview時にオレンジの幕が左から右へ開く。
   色・速度・イージングは .titleCurtain のCSS変数で調整できます。
   ========================================================================== */

.titleCurtain {
  --titleCurtainColor: #ff4800; /* カーテンの色 */
  --titleCurtainDuration: 0.8s; /* 開く時間 */
  --titleCurtainEasing: cubic-bezier(0.65, 0, 0.35, 1); /* 動き方 */

  isolation: isolate;
}

/* 閉じた状態：タイトル全体をカーテンで覆う */
.titleCurtain::after {
  position: absolute;
  inset: 0;
  z-index: 10;
  content: "";
  pointer-events: none;
  background: var(--titleCurtainColor);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform var(--titleCurtainDuration) var(--titleCurtainEasing);
}

/* 表示領域へ入ると、左端が右へ移動してタイトルを表示する */
.titleCurtain.is-inview::after {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .titleCurtain::after {
    transition: none;
    transform: scaleX(0);
  }
}

/* ==========================================================================
   Title Lottie
   data.jsonの合成サイズ（横228 : 縦26）を維持して表示する。
   ========================================================================== */

.titLottie {
  position: absolute;
  bottom: 2px;
  left: 5px;
  display: block;
  width: 46%;
  aspect-ratio: 228 / 26;
  overflow: hidden;
  line-height: 0;
  background: #000;
  transform: translate3d(0, 0, 0);
}

.titLottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}