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

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

.p-top-kv__slide--eo {
  background-image: url(/assets/img/kv/eo-bg.webp);
  background-size: cover;
  background-position: center;
  background-color: #050e1f;
  position: relative;
  overflow: hidden;
}

.p-top-kv__slide--eo .kv-eo-mock {
  width: 100%;
  display: block;
}

.p-top-kv__slide--eo .kv-eo-logo {
  margin-bottom: 24px;
}

.p-top-kv__slide--eo .kv-eo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #ffffff;
  font-family: ryo-gothic-plusn, sans-serif;
  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;
  cursor: pointer;
  transition: all 0.5s;
}

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

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

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

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

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

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

/* slick-list の縦方向の overflow: hidden のみ解除（コンテンツ切れ防止）。
 * overflow-x まで visible にすると slick-track 全体（スライド枚数分の幅）が
 * 露出し、ページ全体に横スクロールが発生するため overflow-x は hidden を維持する */
#topSlider .slick-list {
  overflow-x: hidden;
  overflow-y: visible;
}

/* ===================================================
 * PC（min-width: 851px）
 * 左52%：モック / 右48%：サブコピー・ロゴ・キャッチ・CTA
 * =================================================== */

.p-top-kv__slide--eo .kv-eo-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1247px;
  margin: 0 auto;
  height: 100%;
  padding: 0 4%;
  position: relative;
  z-index: 1;
}

.p-top-kv__slide--eo .kv-eo-left {
  width: 52%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-top-kv__slide--eo .kv-eo-mock-wrap {
  width: 100%;
}

/* kv-eo-left 内のCTA：PC幅では非表示、TB/SPで表示 */
.p-top-kv__slide--eo .kv-eo-cta {
  display: none;
}

/* kv-eo-right 内のCTA：PC幅のみ表示 */
.p-top-kv__slide--eo .kv-eo-cta-pc {
  margin-top: 56px;
}

.p-top-kv__slide--eo .kv-eo-right {
  width: 48%;
  padding-left: 4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-top-kv__slide--eo .kv-eo-subcopy {
  color: #ffffff;
  font-family: ryo-gothic-plusn, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0 0 24px;
}

.p-top-kv__slide--eo .kv-eo-logo img {
  height: 88px;
  width: auto;
}

.p-top-kv__slide--eo .kv-eo-catch {
  font-family: ryo-gothic-plusn, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
  margin: 0;
  white-space: normal;
}

/* ==========================================================
 * タブレット（〜850px）
 * SPと同じ縦1カラム構成・サブコピーあり / サイズをSPより一回り大きく
 * ========================================================== */

@media (max-width: 850px) {
  #topSlider li.p-top-kv__slide--eo {
    overflow: visible;
  }

  .p-top-kv__slide--eo .kv-eo-inner {
    flex-direction: column;
    height: auto;
    padding: 160px 40px 80px;
    align-items: flex-start;
  }

  .p-top-kv__slide--eo .kv-eo-right {
    width: 100%;
    padding-left: 0;
    order: 1;
  }

  .p-top-kv__slide--eo .kv-eo-left {
    width: 92%;
    height: auto;
    align-self: flex-end;
    order: 2;
    margin-top: 32px;
  }

  .p-top-kv__slide--eo .kv-eo-subcopy {
    margin: 0 0 16px;
  }

  .p-top-kv__slide--eo .kv-eo-logo img {
    height: 76px;
  }

  .p-top-kv__slide--eo .kv-eo-catch {
    font-size: 28px;
    margin-top: 20px;
  }

  .p-top-kv__slide--eo .kv-eo-logo {
    margin-bottom: 0;
  }

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

  .p-top-kv__slide--eo .kv-eo-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    margin-left: 0;
    margin-bottom: 40px;
  }

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

/* ==========================================================
 * SP（〜767px）
 * 縦1カラム：右エリア（サブコピー・ロゴ・キャッチ）→ 左エリア（モック・CTA）
 * ========================================================== */

@media (max-width: 767px) {
  .p-top-kv__slide--eo .kv-eo-inner {
    padding: 112px 20px 24px;
  }

  .p-top-kv__slide--eo .kv-eo-subcopy {
    font-size: 12px;
    margin: 0 0 8px;
  }

  .p-top-kv__slide--eo .kv-eo-logo {
    margin-bottom: 8px;
  }

  .p-top-kv__slide--eo .kv-eo-logo img {
    height: 56px;
  }

  .p-top-kv__slide--eo .kv-eo-catch {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 8px;
  }

  .p-top-kv__slide--eo .kv-eo-left {
    width: 100%;
    margin-top: 0;
  }

  /* 高さが短いビューポートでモックがコンテンツを押し出さないよう上限を設ける
   * 33vh: 700px高さ時に固定コンテンツ434px + mock 231px = 665px（余裕35px）
   * EO は右エリア（サブコピー・ロゴ・キャッチ）のコンテンツが多いため suido より小さい値 */
  .p-top-kv__slide--eo .kv-eo-mock {
    max-height: 33vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .p-top-kv__slide--eo .kv-eo-cta {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 80px;
  }

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

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

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

  .p-top-kv__slide--eo .kv-eo-mock {
    max-height: 25vh;
  }

  .p-top-kv__slide--eo .kv-eo-cta {
    margin-top: 4px;
    margin-bottom: 40px;
  }
}

/* ==========================================================
 * TB幅（768px〜850px）× 低〜中高さ（〜1080px）
 * mock自然高(467px@782px幅)＋固定590px＝1057px のため
 * 低い高さ（〜849px）はこのクエリで padding・mock を縮小する。
 * 850px以上は下の min-height クエリで段階的に元の値へ戻す。
 * 25vh: 780px時 固定439px + mock195px = 634px（余裕146px）
 * ========================================================== */

@media (min-width: 768px) and (max-width: 850px) and (max-height: 1080px) {
  .p-top-kv__slide--eo .kv-eo-inner {
    padding-top: 100px;
    padding-bottom: 20px;
  }

  .p-top-kv__slide--eo .kv-eo-cta {
    margin-bottom: 16px;
  }

  .p-top-kv__slide--eo .kv-eo-mock {
    max-height: 25vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ==========================================================
 * TB幅 × 高さ850px以上 — 元のpadding・CTAマージンに戻す
 * max-height:1080pxクエリの値を上書き（後ろにあるので優先）
 * 固定オーバーヘッド: padding160+right217+left-mt32+cta4+57+40+pb80 = 590px
 * 29vh: h=850px時 固定590px + mock247px = 837px（余裕13px）
 * ========================================================== */

@media (min-width: 768px) and (max-width: 850px) and (min-height: 850px) {
  .p-top-kv__slide--eo .kv-eo-inner {
    padding-top: 160px;
    padding-bottom: 80px;
  }

  .p-top-kv__slide--eo .kv-eo-cta {
    margin-bottom: 40px;
  }

  .p-top-kv__slide--eo .kv-eo-mock {
    max-height: 29vh;
  }
}

/* ==========================================================
 * TB幅 × 高さ1024px以上（iPad mini相当）
 * 40vh: h=1024px時 mock410px → 自然サイズ423pxに近い
 *       h=1024px時 固定590px + mock410px = 1000px（余裕24px）
 * ========================================================== */

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