/* ===================================================
 * KV スライド02 - 宇宙水道局
 * 親クラス .p-top-kv__slide--suido で詳細度を上げて既存スタイルを上書き
 * ブレークポイント: PC(≥851px) | TB(768-850px) | SP(≤767px)
 * =================================================== */

/* ---------- 背景・共通 ---------- */

.p-top-kv__slide--suido .bg {
  background-image: url(/images/top-slider/slide02-bg.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.p-top-kv__slide--suido .window {
  display: none;
}

/* ===================================================
 * PC（min-width: 851px）
 * 左42%：ロゴ・キャッチ・CTA / 右58%：モック
 * inner を height:100% にしてスライド全体で縦中央揃え
 * =================================================== */

.p-top-kv__slide--suido .kv-suido-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1247px;
  margin: 0 auto;
  height: 100%;
  padding: 0 4% 0 6%;
}

.p-top-kv__slide--suido .kv-suido-content {
  width: 42%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  flex-shrink: 0;
}

.p-top-kv__slide--suido .kv-suido-logo img {
  height: 64px;
  width: auto;
  display: block;
}

.p-top-kv__slide--suido .kv-suido-catch {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.65;
  letter-spacing: 0.02em;
  margin: 32px 0 0;
  white-space: normal;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

/* #topSlider h3（詳細度1,0,1）が .kv-suido-catch（詳細度0,2,0）を上書きするため
 * #topSlider を付与して詳細度(1,2,0)に引き上げ、意図したfont-sizeを確実に適用 */
#topSlider .p-top-kv__slide--suido .kv-suido-catch {
  font-size: 32px;
}

.p-top-kv__slide--suido .kv-suido-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #ffffff;
  font-family: ryo-gothic-plusn;
  font-size: 21px;
  font-weight: 500;
  line-height: 167%;
  letter-spacing: 1.05px;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 12px 24px;
  margin-top: 70px;
  cursor: pointer;
  transition: all 0.5s;
}

.p-top-kv__slide--suido .kv-suido-cta span,
.p-top-kv__slide--suido .kv-suido-cta svg {
  transition: all 0.5s;
}

.p-top-kv__slide--suido .kv-suido-cta.pc:hover .txt,
.p-top-kv__slide--suido .kv-suido-cta.sp:active .txt {
  text-shadow: 0px 0px 5px #fff;
}

.p-top-kv__slide--suido .kv-suido-cta.pc:hover .arrow svg,
.p-top-kv__slide--suido .kv-suido-cta.sp:active .arrow svg {
  filter: drop-shadow(0px 0px 5px #859bbb);
}

.p-top-kv__slide--suido .kv-suido-cta.pc:active .txt {
  text-shadow: none;
}

.p-top-kv__slide--suido .kv-suido-cta.pc:active .arrow svg {
  filter: none;
}

.p-top-kv__slide--suido .kv-suido-cta .arrow {
  display: inline-block;
  margin-left: 20px;
  transform: translateY(-5px);
}

/* padding-top でモックを下げ、PC縦中央に対して微調整 */
.p-top-kv__slide--suido .kv-suido-mock {
  width: 58%;
  height: 100%;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.p-top-kv__slide--suido .kv-suido-mock-pc {
  display: block;
  width: 100%;
  height: auto;
}

.p-top-kv__slide--suido .kv-suido-cta-sp {
  display: none;
}

/* ==========================================================
 * EN locale のみ（#mainImg.en スコープ）
 * 日本語版（/）には一切影響しない
 * ========================================================== */

/* PC（min-width:851px）のみ：TB/SPのレスポンシブスタイルを上書きしないよう分離 */
@media screen and (min-width: 851px) {
  /* ENロゴ（1560×196px）は height:64px;width:auto だと表示幅509pxになり
   * 42%カラム（約471px）をはみ出すため、カラム幅内に収める */
  #mainImg.en .kv-suido-logo img {
    max-width: 100%;
    height: auto;
  }

  /* カラム間に明示的な gap を追加。content(50%) + mock(44%) = 94% のため
   * 残り 6%（約67px）が gap の実値となり、gap:48px の最小値を満たす */
  #mainImg.en .kv-suido-inner {
    gap: 48px;
  }

  /* 左カラムを広げ、モックを縮小して左カラムテキストとの余白を確保 */
  #mainImg.en .kv-suido-content {
    width: 50%;
  }

  /* ENキャッチコピーはslide03(.kv-eo-catch 32px)と同等のサイズに合わせる
   * 行が長いためclamp()で狭いPC幅でのnowrapオーバーフローを防止 */
  #mainImg.en .kv-suido-catch {
    font-size: clamp(20px, 2.5vw, 32px);
  }

  /* モックコンテナを縮小（justify-content:flex-end で右詰め維持）
   * overflow:hidden でコンテナ外へのはみ出しを抑制 */
  #mainImg.en .kv-suido-mock {
    width: 44%;
    overflow: hidden;
  }
}

/* ==========================================================
 * タブレット + SP（〜850px）
 * 縦1カラム：ロゴ・キャッチ → モック → CTA
 * padding-top: 140px でヘッダー（約80px）をかわす
 * ========================================================== */

@media screen and (max-width: 850px) {
  .p-top-kv__slide--suido .kv-suido-inner {
    flex-direction: column;
    height: 100%;
    padding: 0 0 50px;
    align-items: stretch;
    justify-content: space-between;
  }

  .p-top-kv__slide--suido .kv-suido-content {
    width: 100%;
    height: auto;
    padding: 140px 40px 0;
    justify-content: flex-start;
  }

  .p-top-kv__slide--suido .kv-suido-logo img {
    height: 48px;
  }

  .p-top-kv__slide--suido .kv-suido-catch {
    margin-top: 24px;
  }

  /* グローバル #topSlider ルール（詳細度1,2,0）への対抗: TB幅の意図したサイズを適用 */
  #topSlider .p-top-kv__slide--suido .kv-suido-catch {
    font-size: 30px;
  }

  .p-top-kv__slide--suido .kv-suido-cta {
    display: none;
  }

  .p-top-kv__slide--suido .kv-suido-mock {
    width: 100%;
    height: auto;
    padding-top: 0;
    margin: 0;
    display: block;
  }

  .p-top-kv__slide--suido .kv-suido-cta-sp {
    display: block;
    text-align: center;
    margin: 0;
    padding: 0 40px;
  }

  .p-top-kv__slide--suido .kv-suido-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #ffffff;
    font-family: ryo-gothic-plusn;
    font-size: 18px;
    font-weight: 500;
    line-height: 167%;
    letter-spacing: 1.05px;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.5s;
  }

  .p-top-kv__slide--suido .kv-suido-btn span,
  .p-top-kv__slide--suido .kv-suido-btn svg {
    transition: all 0.5s;
  }

  .p-top-kv__slide--suido .kv-suido-btn.pc:hover .txt,
  .p-top-kv__slide--suido .kv-suido-btn.sp:active .txt {
    text-shadow: 0px 0px 5px #fff;
  }

  .p-top-kv__slide--suido .kv-suido-btn.pc:hover .arrow svg,
  .p-top-kv__slide--suido .kv-suido-btn.sp:active .arrow svg {
    filter: drop-shadow(0px 0px 5px #859bbb);
  }

  .p-top-kv__slide--suido .kv-suido-btn.pc:active .txt {
    text-shadow: none;
  }

  .p-top-kv__slide--suido .kv-suido-btn.pc:active .arrow svg {
    filter: none;
  }

  .p-top-kv__slide--suido .kv-suido-btn .arrow {
    display: inline-block;
    margin-left: 20px;
    transform: translateY(-5px);
  }
}

/* ==========================================================
 * タブレット専用（768px 〜 850px）
 * ボタン高さ・テキストサイズをSPと分離
 * ========================================================== */

@media screen and (min-width: 768px) and (max-width: 850px) {
  /* slick.css の .slick-list { overflow: hidden } を縦方向のみ解除。
   * overflow-x まで visible にすると slick-track 全体（スライド枚数分の幅）が
   * 露出し、ページ全体に横スクロールが発生するため overflow-x は hidden を維持する */
  #topSlider .slick-list {
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* ENロゴ: JP版TB(48px)よりやや小さく（文字のみロゴの視覚的重さを相殺） */
  #mainImg.en .kv-suido-logo img {
    height: 40px;
    width: auto;
    max-width: 100%;
  }

  .p-top-kv__slide--suido .kv-suido-mock {
    width: 92%;
    margin-left: auto;
    margin-right: 0;
  }

  /* mock自然高(578px@782px幅)が全TB高さでスライドを超えるため常時上限を設ける
   * space-between使用のため max-height でモックが肥大化しないよう制限する */
  .p-top-kv__slide--suido .kv-suido-mock-pc {
    max-height: 31vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .p-top-kv__slide--suido .kv-suido-btn {
    font-size: 20px;
  }

  /* EN: テキスト(padding 40px×2)と揃えてモックに左右余白を付与 */
  #mainImg.en .kv-suido-mock {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================
 * SP（〜767px）
 * padding-top: 112px でヘッダー（約64px）をかわす
 * ========================================================== */

@media screen and (max-width: 767px) {
  .p-top-kv__slide--suido .kv-suido-inner {
    padding-bottom: 80px;
  }

  .p-top-kv__slide--suido .kv-suido-content {
    padding: 112px 20px 0;
  }

  .p-top-kv__slide--suido .kv-suido-logo img {
    height: 36px;
  }

  /* ENロゴ: JP版SP(36px)よりやや小さく（文字のみロゴの視覚的重さを相殺） */
  #mainImg.en .kv-suido-logo img {
    height: 30px;
    width: auto;
    max-width: 100%;
  }

  .p-top-kv__slide--suido .kv-suido-catch {
    margin-top: 8px;
  }

  /* グローバル #topSlider ルール（詳細度1,2,0）への対抗: SP幅の意図したサイズを適用 */
  #topSlider .p-top-kv__slide--suido .kv-suido-catch {
    font-size: 20px;
  }

  .p-top-kv__slide--suido .kv-suido-mock {
    width: 100%;
    margin: 0;
  }

  /* 高さが短いビューポートでモックがコンテンツを押し出さないよう上限を設ける
   * 37vh: 700px高さ時に固定コンテンツ417px + mock 259px = 676px（余裕24px） */
  .p-top-kv__slide--suido .kv-suido-mock-pc {
    max-height: 37vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  /* EN: テキスト(padding 20px×2)と揃えてモックに左右余白を付与 */
  #mainImg.en .kv-suido-mock {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }

  .p-top-kv__slide--suido .kv-suido-cta-sp {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 20px;
  }

  .p-top-kv__slide--suido .kv-suido-btn {
    font-size: 16px;
  }
}

/* ==========================================================
 * 低ビューポート高（〜700px）× SP幅
 * スマホ横持ち・正方形に近いウィンドウでコンテンツが収まらない問題への対処
 * ========================================================== */

@media screen and (max-width: 767px) and (max-height: 700px) {
  .p-top-kv__slide--suido .kv-suido-catch {
    margin-top: 4px;
  }

  .p-top-kv__slide--suido .kv-suido-mock-pc {
    max-height: 28vh;
  }

  /* 低ビューポートでは sliderTabs との余白をさらに確保 */
  .p-top-kv__slide--suido .kv-suido-cta-sp {
    margin-bottom: 40px;
  }
}

/* ==========================================================
 * 低ビューポート高（〜700px）× TB幅（768px〜850px）
 * 基本TBルール（31vh）からさらに厳しい 28vh へ絞り込む第二段
 * ========================================================== */

@media screen and (min-width: 768px) and (max-width: 850px) and (max-height: 700px) {
  .p-top-kv__slide--suido .kv-suido-mock-pc {
    max-height: 28vh;
  }
}

/* ==========================================================
 * 高ビューポート（850px以上）× TB幅 — 段階的に mock を拡大
 * #sliderTabs は position:absolute; bottom:20px; height:14px → タブ上端 = h-34px
 * CTA下端（固定498px + mock）をタブ上端より十分小さく保つ
 * 36vh: h=850px時 CTA下端=780px、タブ上端=816px → 余裕36px
 * ========================================================== */

@media screen and (min-width: 768px) and (max-width: 850px) and (min-height: 850px) {
  .p-top-kv__slide--suido .kv-suido-mock-pc {
    max-height: 36vh;
  }
}

/* ==========================================================
 * TB幅 × 高さ1024px以上（iPad mini相当）
 * 45vh: h=1024px時 CTA下端=935px、タブ上端=990px → 余裕55px
 *       mock460px → 自然サイズ523pxに対し88%（許容範囲）
 * ========================================================== */

@media screen and (min-width: 768px) and (max-width: 850px) and (min-height: 1024px) {
  .p-top-kv__slide--suido .kv-suido-mock-pc {
    max-height: 45vh;
  }
}