/* =========================================================
   SCROLL INDICATOR for Elementor HERO
   - 縦文字「scroll」
   - 円は上→下へ一方向（バウンドなし）
   - ラインは進行に合わせて黒化
   - 円も進行に合わせて黒化
   - 円が線より前面（重なり上）
========================================================= */

.hero{
  position: relative;

  /* ---- 調整用 ---- */
  --si-top: 90%;
  --si-height: 102px;
  --si-width: 14px;
  --si-dot: 6px;
  --si-duration: 1.6s;

  --si-text-color: #fff;

  /* 線：白→黒 */
  --si-line-base: rgba(255,255,255,.55);
  --si-line-fill: rgba(0,0,0,.85);

  /* 円：白→黒（好みで黒を濃く） */
  --si-dot-start: rgba(255,255,255,1);
  --si-dot-end: rgba(0,0,0,1);

  /* 円の縁取り（背景によって調整） */
  --si-dot-ring: rgba(255,255,255,.15);
}

/* HTMLウィジェット（absolute固定） */
.hero .scroll-indicator-wrap{
  position: absolute !important;
  left: 50%;
  top: var(--si-top);
  transform: translateX(-50%);
  z-index: 50;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* 本体レイアウト */
.hero .scroll-indicator{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  user-select: none;
}

/* 縦文字 scroll */
.hero .scroll-indicator__text{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  letter-spacing: .18em;
  line-height: 1;
  color: var(--si-text-color);
  opacity: .85;
}

/* ライン入れ物 */
.hero .scroll-indicator__line{
  position: relative;
  width: var(--si-width);
  height: var(--si-height);
  overflow: visible;
}

/* ベースライン（薄い白） */
.hero .scroll-indicator__line::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width:1px;
  height:100%;
  background: var(--si-line-base);
  border-radius: 999px;
  z-index: 1;
}

/* 進行に合わせて黒化するライン */
.hero .scroll-indicator__line::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width:1px;
  height:0%;
  background: var(--si-line-fill);
  border-radius: 999px;
  animation: siLineFill var(--si-duration) linear infinite;
  z-index: 2; /* ベース線より上 */
}

/* 円（前面に出す） */
.hero .scroll-indicator__dot{
  position:absolute;
  left:50%;
  top:0;
  width: var(--si-dot);
  height: var(--si-dot);
  transform: translateX(-50%);
  border-radius:50%;

  /* ここで色をアニメさせる */
  background: var(--si-dot-start);
  animation: siDotDown var(--si-duration) linear infinite,
             siDotColor var(--si-duration) linear infinite;

  /* 縁取り（任意） */
  box-shadow: 0 0 0 2px var(--si-dot-ring);

  z-index: 5; /* ←線より必ず前面 */
}

/* 円：上→下へ（バウンドなし） */
@keyframes siDotDown{
  0%   { transform: translate(-50%, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { transform: translate(-50%, calc(var(--si-height) - var(--si-dot))); opacity: 1; }
  100% { transform: translate(-50%, calc(var(--si-height) - var(--si-dot))); opacity: 0; }
}

/* 線：黒化が上→下へ伸びる */
@keyframes siLineFill{
  0%   { height: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { height: 100%; opacity: 1; }
  100% { height: 100%; opacity: 0; }
}

/* 円：移動に同期して白→黒へ（同じdurationなので自然に同期） */
@keyframes siDotColor{
  0%   { background: var(--si-dot-start); }
  90%  { background: var(--si-dot-end); }
  100% { background: var(--si-dot-end); }
}

/* SP調整 */
@media (max-width: 768px){
  .hero{
    --si-top: 90%;
    --si-height: 44px;
    --si-dot: 5px;
  }
  .hero .scroll-indicator__text{ font-size: 11px; }
}

/*top_catch*/
.top_catch{
	position: absolute;
    top: 220px;
    left: 7vw;
    z-index: 10;
    display: -webkit-flex;
    display: flex;
}

/* 斜めの白いブロック（光の帯） */
.hero::after{
  content:"";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45%;
  height: 140%;
  pointer-events: none;
  z-index: 3;               /* 画像の上に重ねる。必要なら調整 */
  opacity: .35;

  /* ブロックの質感：中央が強く、端が薄い */
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,0) 100%
  );

  transform: skewX(-18deg);
  filter: blur(0.2px);

  animation: heroSheen 3.8s ease-in-out infinite;
}

/* 左→右へ流す */
@keyframes heroSheen{
  0%   { transform: translateX(0) skewX(-18deg); opacity: 0; }
  12%  { opacity: .35; }
  55%  { opacity: 0; }
  70%  { opacity: 0; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

/* SPは少し控えめ */
@media (max-width: 768px){
  .hero::after{
    width: 60%;
    opacity: .28;
    animation-duration: 4.6s;
  }
}