@charset "UTF-8";

/* 上書き用CSS */

/* ========================================
   1. ヘッダー上部（ダイナミックアイランド周辺）紺色ベタ塗り
   → header.php に theme-color メタタグで対応
======================================== */

/* ========================================
   3. SP表示時 マトリックス図 横スクロール矢印
======================================== */
@media screen and (max-width: 766px) {
  .top_style_figure--wrap {
    position: relative;
  }

  .top_style_figure--wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
    pointer-events: none;
    animation: scrollHint 1.5s ease-in-out infinite;
    z-index: 10;
  }

  @keyframes scrollHint {
    0%, 100% {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    50% {
      opacity: 0.5;
      transform: translateY(-50%) translateX(0.5rem);
    }
  }
}

/* ========================================
   4. インタビューリンク 自動スライド（カルーセル）化
======================================== */
.top_style_list .swiper {
  /* 自動再生用の設定はJSで行う */
}

/* カルーセルのトランジション */
.top_style_list .swiper-wrapper {
  transition-timing-function: linear;
}

/* ========================================
   5. ファーストビュー キービジュアルのぼかし時間を短縮
   → 2秒でピントが合う
======================================== */
.top_mv--img img {
  animation: blurscaleFast 2s ease-out forwards !important;
}

@keyframes blurscaleFast {
  0% {
    filter: blur(0.625rem);
    transform: scale(1.1);
  }
  30% {
    filter: blur(0);
  }
  100% {
    filter: blur(0);
    transform: scale(1);
  }
}

/* ========================================
   6. マトリックス図 ホバー時のツールチップを最前面に表示
   → 親要素の順番を飛び越えて表示
======================================== */
.top_style_figure--list > div {
  z-index: 1;
}

.top_style_figure--list > div:hover,
.top_style_figure--list > div:focus-within {
  z-index: 100;
}

.top_style_figure--list--txt {
  z-index: 100;
}

.u-dl {
  margin-bottom: 24px;
}

/* ========================================
   7. メインビジュアル スライダー
======================================== */
.top_mv--img .swiper {
  width: 100%;
  height: 100%;
}

.top_mv--img .swiper-slide {
  overflow: hidden;
}

.top_mv--img .swiper-slide picture,
.top_mv--img .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* プログレスバー */
.mv-progress {
  position: absolute;
  bottom: 20px;
  left: 7%;
  width: 50%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  z-index: 10;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .mv-progress {
    left: auto;
    right: 8%;
    width: 32%;
  }
}

.mv-progress__bar {
  width: 0;
  height: 100%;
  background: #fff;
  border-radius: 2px;
}

.mv-progress__bar.is-active {
  animation: mvProgress 5s linear forwards;
}

@keyframes mvProgress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* スライダー用のぼかしアニメーション上書き */
.top_mv--img .swiper-slide-active img {
  animation: blurscaleFast 2s ease-out forwards !important;
}

.top_mv--img .swiper-slide:not(.swiper-slide-active) img {
  animation: none !important;
  filter: blur(0);
  transform: scale(1);
}

/* ========================================
   8. インタビュー記事 強調テキスト（下線マーカー）
======================================== */
.emphasis {
  background: linear-gradient(transparent 60%, #FFF59D 60%);
  font-weight: bold;
}