@charset "UTF-8";
/* =========================================================
   速度定義
   ---------------------------------------------------------
   例）--tl-speed: 200 なら「200px を 1 秒」で塗る
   必要に応じて個別要素で上書き可能
========================================================= */
/* ---------------- ① 親：.tlWrap ---------------- */
.tlWrap .en {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  /* === 可変スピード設定 === */
  --tl-speed: 200;
  /* duration は JS で動的に計算して --tl-duration に入る */
}
.tlWrap .en::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1D1D1D;
  transform-origin: left center;
  opacity: 0;
  transform: scaleX(0) translateX(-5%);
  z-index: -1;
}
.tlWrap .en.is-animated::before {
  /* duration を CSS 変数で受け取る */
  animation: tlBg var(--tl-duration, 2s) linear forwards;
}
@keyframes tlBg {
  from {
    opacity: 1;
    transform: scaleX(0) translateX(-5%);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}

/* ---------------- ② 親：.subTl ---------------- */
.subTl {
  display: grid;
  justify-content: center;
  gap: 5px;
  margin-top: -15px;
  /* 2行目だけ少し遅らせる */
}
.subTl .tl1,
.subTl .tl2 {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  font-weight: bold;
  margin: 0 auto;
  /* サイズ差吸収のためここにも可変スピード */
  --tl-speed: 400;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.subTl .tl1::before,
.subTl .tl2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #EAFF00;
  transform-origin: left center;
  opacity: 0;
  transform: scaleX(0) translateX(-5%);
  z-index: -1;
}
.subTl .tl1.is-animated::before,
.subTl .tl2.is-animated::before {
  animation: subTlBg var(--tl-duration, 2s) linear forwards;
}
.subTl .tl1 {
  font-size: 14px;
}
.subTl .tl2 {
  font-size: clamp(14px, 5.13vw, 20px);
}
.subTl .tl2.is-animated::before {
  animation-delay: 0.15s;
}
@keyframes subTlBg {
  from {
    opacity: 1;
    transform: scaleX(0) translateX(-5%);
  }
  to {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}

.slide-from-left {
  animation-name: slideInFromLeft;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

.slide-from-right {
  animation-name: slideInFromRight;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}

.slide-wrapper {
  overflow: hidden;
  transform: translateX(-100%);
  display: inline-block;
}

.slide-inner {
  display: inline-block;
  transform: translateX(100%);
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
.fadeUp {
  opacity: 0;
  transform: translateY(30px);
}
.fadeUp.is-fadeUp {
  animation: fadeUpAnime 0.8s forwards;
}

/* キーフレーム */
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade {
  opacity: 0;
  transition: 0.5s;
}
.fade.is-fade {
  opacity: 1;
}

.popup {
  opacity: 0;
}
.popup.is-pop {
  opacity: 1;
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.5);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.mask {
  position: relative;
  overflow: hidden; /* はみ出しを隠す */
  opacity: 0;
}

/* 画像そのもの（動かさない版） */
.mask img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ── マスク（白い板が左→右へスライドして開く） */
.is-mask {
  opacity: 1;
}
.is-mask.mask::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(0);
  animation: reveal 0.5s ease-out forwards; /* 自動スタート */
}

.secAccess .is-mask.mask::before {
  content: "";
  background: #fff; /* 隠す色。背景色に合わせて変更可 */
}

.secFlow .is-mask.mask::before {
  content: "";
  background: #D9376E; /* 隠す色。背景色に合わせて変更可 */
}

/* アニメーション定義 */
@keyframes reveal {
  0% {
    transform: translateX(0%); /* 右に抜けて画像が露出 */
  }
  100% {
    transform: translateX(100%); /* 右に抜けて画像が露出 */
  }
}/*# sourceMappingURL=animate_extend.css.map */