/* === GCN Slider — Slider Revolution 置き換え ===
   本番サイト(gcnetwork.co.jp)のSlider Revolution実測値に基づく。
   幅1240px基準でPC固定値を決め、480–1240pxはビューポート幅に比例して
   連続スケール(vw指定)、480px以下はモバイル専用の固定値に切り替わる。
   （本番のSR7モジュールの実挙動を計測して再現） */

.gcn-slider {
  position: relative;
  width: 100%;
  height: 800px;
  max-height: 800px;
  overflow: hidden;
  background: #1a1a1a;
}

/* 背景スライド: 絶対配置でスタック、opacity切り替えでクロスフェード */
.gcn-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}

.gcn-slide.is-active {
  opacity: 1;
}

/* 常時表示オーバーレイ（ロゴマーク + カラーブロック） */
.gcn-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* ロゴマーク（PC基準値: width:827px height:580px top:110px、常に水平中央） */
.gcn-slider__logomark {
  position: absolute;
  width: 827px;
  height: 580px;
  left: 50%;
  top: 110px;
  transform: translateX(-50%);
  background: url('//www.gcnetwork.co.jp/wp-content/uploads/revslider/GCN-TOP-SLIDER/top-slide-logomark-2.png')
    center / contain no-repeat;
}

/* カラーブロック群（PC基準値: 40x30px, gap:10px, top:747px、常に水平中央） */
.gcn-slider__colors {
  position: absolute;
  left: 50%;
  top: 747px;
  display: flex;
  gap: 10px;
  line-height: 0;
  transform: translateX(-50%);
  pointer-events: auto; /* 親.gcn-slider__overlayはpointer-events:noneだが、ここだけクリック可能にする */
}

.gcn-slider__colors span {
  display: block;
  width: 40px;
  height: 30px;
  flex-shrink: 0;
  cursor: pointer;
}

/* プログレスバー（元のCanvas pbarに相当、bottom:5px） */
.gcn-slider__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.19);
  z-index: 20;
  overflow: hidden;
}

.gcn-slider__progress-bar {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.75);
}

/* ========== レスポンシブ ==========
   480–1240px: PC基準値 ÷ 1240 × viewport幅 で連続スケール（vw指定）
   828÷1240=66.69vw / 580÷1240=46.77vw / 110÷1240=8.87vw / 800÷1240=64.52vw
   747÷1240=60.24vw / 40÷1240=3.23vw / 30÷1240=2.42vw / 10÷1240=0.81vw */

@media (max-width: 1240px) {
  .gcn-slider {
    height: 64.52vw;
  }

  .gcn-slider__logomark {
    width: 66.69vw;
    height: 46.77vw;
    top: 8.87vw;
  }

  .gcn-slider__colors {
    top: 60.24vw;
    gap: 0.81vw;
  }

  .gcn-slider__colors span {
    width: 3.23vw;
    height: 2.42vw;
  }
}

/* 480px以下: モバイル専用の固定値（本番実測: width:250px height:175px top:123px、ブロック30x20px gap:10px top:370px） */
@media (max-width: 480px) {
  .gcn-slider {
    height: 400px;
  }

  .gcn-slider__logomark {
    width: 250px;
    height: 175px;
    top: 123px;
  }

  .gcn-slider__colors {
    top: 370px;
    gap: 10px;
  }

  .gcn-slider__colors span {
    width: 30px;
    height: 20px;
  }
}