@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;
  }
}

/* ===== PC背景 ===== */
.pcBg {
  position: relative;
  min-height: 80vh;
  background: #e8d5cf url("../img/pcbg.png") center 0 repeat-y;
  background-size: 2000px auto;
  animation: bg-pan 150s linear infinite;
  will-change: background-position;
}

/* 上下にゆっくり */
@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);
  }
}