@charset "UTF-8";

/* =====================================================
   恋華煌姫 事前登録ページ専用CSS
   - 画像で見た目を制御する方針
   - PC: min-width 769px / SP: max-width 768px
===================================================== */

/* ===== Reset & Base (scoped to #renkakouki) ===== */
#renkakouki *,
#renkakouki *::before,
#renkakouki *::after {
  box-sizing: border-box;
}

#renkakouki {
  scroll-behavior: smooth;
  background: #000;
  overflow-x: hidden;
  min-width: 320px;
  font-family: 'Noto Sans JP', 'YuMincho', sans-serif;
  color: #fff;
}

#renkakouki img {
  max-width: 100%;
  height: auto;
  display: block;
}

#renkakouki .reserved {
  pointer-events: none;
}

/* ===== Responsive Visibility ===== */
#renkakouki .pc-only { display: none; }
#renkakouki .sp-only { display: block; }

/* ===== Section Common ===== */
#renkakouki section {
  position: relative;
  overflow: hidden;
}

#renkakouki .section-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

#renkakouki .section-bg-img img {
  max-width: none;
  width: auto;
  height: 100%;
  object-fit: cover;
}

#renkakouki .section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

#renkakouki .section-title h2 {
  line-height: 0;
  text-align: center;
}

#renkakouki .title-img img {
  max-width: 90%;
  height: auto;
  margin: 0 auto;
}

/* ===== FV (メインビジュアル) ===== */
#renkakouki .section-fv {
  width: 100%;
  position: relative;
}

#renkakouki .section-fv .fv-bg {
  position: relative;
  width: 100%;
}

#renkakouki .section-fv .fv-bg img {
  width: 100%;
  height: auto;
}

#renkakouki .fv-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: none;
}

#renkakouki .fv-logo {
  width: 40%;
  margin: 2% 0 0 3%;
  pointer-events: auto;
}


#renkakouki .fv_btn {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vw;
  pointer-events: auto;
  width: 90%;
  max-width: 400px;
}

#renkakouki .fv_btn .detail {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2vw;
}

/* ===== 共通：事前登録ボタン（スプライト画像ボタン）===== */
#renkakouki a.btn_reserve {
  display: block;
  font-size: 0;
  color: transparent;
  text-decoration: none;
  text-indent: -9999px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 0 0;
  transition: opacity 0.15s ease;
}

#renkakouki a.btn_reserve.reserved {
  pointer-events: none;
}

/* ===== FV内：今すぐ事前登録ボタン（メインボタン / 3状態スプライト） ===== */
#renkakouki .fv_btn .btn {
  width: 70%;
  max-width: 520px;
}

#renkakouki .fv_btn .btn a {
  width: 100%;
  aspect-ratio: 507 / 131;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_reserve_sp.png);
  background-size: 100% 300%;
  background-position: 0 0;
}

.webp #renkakouki .fv_btn .btn a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_reserve_sp.webp);
}

#renkakouki .fv_btn .btn a:hover,
#renkakouki .fv_btn .btn a:active {
  background-position: 0 51.5%;
}

#renkakouki .fv_btn .btn a.reserved,
#renkakouki .fv_btn .btn a.reserved:hover,
#renkakouki .fv_btn .btn a.reserved:active {
  background-position: 0 100%;
}

/* ===== FV内：ゲームを始めるボタン（2状態スプライト） ===== */
#renkakouki .fv_btn .btn a.end {
  aspect-ratio: 507 / 128;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_start_sp.png);
  background-size: 100% 200%;
  background-position: 0 0;
}

.webp #renkakouki .fv_btn .btn a.end {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_start_sp.webp);
}

#renkakouki .fv_btn .btn a.end:hover,
#renkakouki .fv_btn .btn a.end:active {
  background-position: 0 100%;
}

/* ===== FV内：事前登録 詳細ボタン（2状態スプライト / PC・SP共用画像） ===== */
#renkakouki .fv_btn .detail {
  align-self: center;
}

#renkakouki .btn-detail-link {
  display: inline-block;
  width: 22vw;
  max-width: 180px;
  aspect-ratio: 181 / 109;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_detail.png);
  background-size: 100% 200%;
  background-position: 0 0;
}

.webp #renkakouki .btn-detail-link {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_detail.webp);
}

#renkakouki .btn-detail-link:hover,
#renkakouki .btn-detail-link:active {
  background-position: 0 109%;
}

/* ===== FV内：PC専用バッジ（単発画像） ===== */
#renkakouki .fv_btn .detail .device {
  width: 13vw;
  max-width: 90px;
  flex-shrink: 0;
}

#renkakouki .fv_btn .detail .device img {
  width: 100%;
  height: auto;
}

#renkakouki .section-btn {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* ===== 事前登録特典 ===== */
#renkakouki .section-registlist {
  padding: 0;
}

#renkakouki .section-registlist .section-bg-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

#renkakouki .registlist-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1620px;
  margin: 0 auto;
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#renkakouki .section-registlist .section-title {
  margin-bottom: 6px;
}

#renkakouki .section-registlist .title-img img {
  max-width: 80%;
}

/* 新並び順 (PC/SP共通):
   1. all-stamp (横長フル幅)
   2-5. 5K / 10K / 30K / 50K (2列2行)
   6. 75K (横長フル幅)
   7. 100K (横長フル幅) */
#renkakouki .milestone-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 8px;
  width: 92vw;
  max-width: 960px;
  margin: 0 auto;
}

#renkakouki .milestone-card {
  position: relative;
  width: 100%;
  max-width: none;
}

#renkakouki .milestone-card.all-stamp,
#renkakouki .milestone-card.milestone-75000,
#renkakouki .milestone-card.milestone-100000 {
  grid-column: 1 / -1;
}

#renkakouki .milestone-card .card-img {
  width: 100%;
}

#renkakouki .milestone-card .card-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===== clear マーク表示・非表示制御 ===== */
#renkakouki .milestone-card .card-img-clear {
  display: none;
  position: absolute;
  top: 50%;
  left: 2%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  width: 22%;
  max-width: 130px;
  z-index: 2;
  pointer-events: none;
}

#renkakouki .milestone-card.milestone-75000 .card-img-clear,
#renkakouki .milestone-card.milestone-100000 .card-img-clear {
  width: 14%;
  left: 3%;
}

#renkakouki .milestone-card .card-img-clear img {
  width: 100%;
  height: auto;
}

#renkakouki .milestone-card.clear .card-img-clear {
  display: block;
}

/* SP版のみ：milestone-cardsエリアに画面幅いっぱいの黒い半透明背景を敷く
   コンテンツは padding で従来位置 (左右4vw) を維持 */
@media (max-width: 768px) {
  #renkakouki .milestone-cards {
    width: 100%;
    max-width: none;
    padding: 16px 4vw 30px;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

/* ===== 事前登録特典の下に配置するサブタイトル画像 ===== */
#renkakouki .title-sub-achievement {
  width: 100%;
  text-align: center;
  padding-top: 32vw;
}

#renkakouki .title-sub-achievement img {
  margin: 0 auto;
  max-width: 90%;
  height: auto;
}

@media (min-width: 769px) {

  #renkakouki .section-registlist .section-bg-img img{
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #renkakouki .title-sub-achievement {
    padding-top: 0;
    padding-bottom: 1vw;
  }
}

/* ===== 世界観 ===== */
#renkakouki .section-world {
  padding: 40px 0;
}

#renkakouki .world-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

#renkakouki .section-world .section-title .title-img img {
  max-width: 60%;
}

#renkakouki .world-text {
  width: 100%;
  max-width: 1100px;
  margin: 100px auto 0;
}

#renkakouki .world-text img {
  width: 100%;
  height: auto;
}

/* ===== アプリ情報 + 注意事項 統合エリア (section-info) =====
   spec / attention を1セクションにまとめ、spec_bg.png を共通背景に。
   下部にFVと同一スプライト (btn_reserve_sp.png) の横長事前登録ボタンを表示 */
#renkakouki .section-info {
  padding: 30px 0 0;
  position: relative;
}

#renkakouki .info-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#renkakouki .info-window .spec-window,
#renkakouki .info-window .attention-window {
  width: 100%;
}

#renkakouki .info-window .spec-window img,
#renkakouki .info-window .attention-window img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ===== info-btns: detail btn + device icon + info-btn の1セット (MV の fv_btn と同様の構造) ===== */
#renkakouki .info-btns {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vw;
  margin-top: 8px;
}

#renkakouki .info-btns .detail {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2vw;
}

#renkakouki .info-btns .detail .device {
  width: 13vw;
  max-width: 90px;
  flex-shrink: 0;
}

#renkakouki .info-btns .detail .device img {
  width: 100%;
  height: auto;
}

/* SP時: attention-window と info-btns の上下順を逆転
   (spec-window → info-btns(セット) → attention-window の順で表示) */
@media (max-width: 768px) {
  #renkakouki .info-window .spec-window {
    order: 1;
    padding: 0 16px;
  }
  #renkakouki .info-window .info-btns { order: 2; }
  #renkakouki .info-window .attention-window { order: 3; }
}

/* 横長事前登録ボタン (PC/SP共通でSP版スプライトを使用) */
#renkakouki .info-btn {
  width: 70%;
  max-width: 520px;
  margin-top: 8px;
}

/* info-btns 内に入った場合の .info-btn 調整 (gap で間隔を取るため margin-top は0) */
#renkakouki .info-btns .info-btn {
  margin-top: 0;
}

#renkakouki .info-btn a {
  display: block;
  width: 100%;
  aspect-ratio: 507 / 131;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_reserve_sp.png);
  background-size: 100% 300%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.webp #renkakouki .info-btn a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_reserve_sp.webp);
}

#renkakouki .info-btn a:hover,
#renkakouki .info-btn a:active {
  background-position: 0 52%;
}

#renkakouki .info-btn a.reserved,
#renkakouki .info-btn a.reserved:hover,
#renkakouki .info-btn a.reserved:active {
  background-position: 0 100%;
}

/* ゲームを始めるボタンも下部ボタン位置で使用される場合に備える */
#renkakouki .info-btn a.end {
  aspect-ratio: 507 / 128;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_start_sp.png);
  background-size: 100% 200%;
}

.webp #renkakouki .info-btn a.end {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_start_sp.webp);
}

#renkakouki .info-btn a.end:hover,
#renkakouki .info-btn a.end:active {
  background-position: 0 100%;
}

/* ============================================================
   PC (Desktop) Responsive - min-width: 769px
   ============================================================ */
@media (min-width: 769px) {

  #renkakouki .pc-only { display: block; }
  #renkakouki .sp-only { display: none; }

  #renkakouki .fv-content {
    align-items: flex-start;
  }

  #renkakouki .fv-logo {
    width: clamp(220px, 20vw, 360px);
    margin: 1.5% 0 0 2%;
  }

  /* MV内：スローガン画像 (PCのみ表示 / fv_btn の左側に absolute 配置)
     画像実寸: 645 x 331 (アスペクト比 645:331) */
  #renkakouki .fv-slogan {
    position: absolute;
    right: 36%;
    bottom: 9%;
    width: 40vw;
    min-width: 280px;
    max-width: 645px;
    aspect-ratio: 645 / 331;
    pointer-events: none;
  }

  #renkakouki .fv-slogan img {
    width: 100%;
    height: auto;
  }

  #renkakouki .fv_btn {
    left: auto;
    right: 19%;
    bottom: 8%;
    transform: none;
    max-width: none;
    width: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  #renkakouki .fv_btn .btn {
    width: clamp(140px, 14vw, 220px);
    max-width: none;
  }

  #renkakouki .fv_btn .btn a {
    aspect-ratio: 188 / 194;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_reserve_pc.png);
    background-size: 100% 300%;
  }

  .webp #renkakouki .fv_btn .btn a {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_reserve_pc.webp);
  }

  #renkakouki .fv_btn .btn a.end {
    aspect-ratio: 188 / 194;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_start_pc.png);
    background-size: 100% 200%;
  }

  .webp #renkakouki .fv_btn .btn a.end {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/renkakouki/btn_start_pc.webp);
  }

  #renkakouki .fv_btn .detail {
    gap: 8px;
    align-self: flex-end;
  }

  #renkakouki .btn-detail-link {
    width: clamp(90px, 8vw, 140px);
    max-width: none;
  }

  #renkakouki .fv_btn .detail .device {
    width: clamp(60px, 5vw, 90px);
    max-width: none;
  }

  /* 事前登録特典 */
  #renkakouki .section-registlist {
    padding: 20px 0 0;
  }

  #renkakouki .registlist-window {
    max-width: 1200px;
    padding: 20px 16px 50px;
    gap: 24px;
  }

  #renkakouki .section-registlist .title-img img {
    max-width: 600px;
  }

  /* PCでもSPと同じ2列gridレイアウト (all-stamp / 75K / 100K は横長フル幅) */
  #renkakouki .milestone-cards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 85vw;
    margin: 0 auto;
  }

  #renkakouki .milestone-card {
    width: 100%;
    max-width: none;
  }

  #renkakouki .milestone-card .card-img-clear {
    width: 110px;
    max-width: none;
    top: 50%;
    left: 4%;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
  }

  #renkakouki .milestone-card.milestone-75000 .card-img-clear,
  #renkakouki .milestone-card.milestone-100000 .card-img-clear {
    width: 110px;
    left: 4%;
  }

  /* 世界観 */
  #renkakouki .section-world {
    padding: 20px 0 0;
  }

  #renkakouki .world-window {
    max-width: 1200px;
    padding: 20px 40px 60px;
    gap: 30px;
  }

  #renkakouki .section-world .section-title .title-img img {
    max-width: 360px;
  }

  /* 世界観テキスト画像はPCコンテンツ幅内で中央寄せ */
  #renkakouki .world-text {
    width: 100%;
    max-width: 725px;
    align-self: center;
    margin: 0 auto;
  }

  #renkakouki .world-text img {
    width: 100%;
    max-width: 725px;
    height: auto;
    margin: 0 auto 0;
  }

  /* アプリ情報 + 注意事項 統合エリア */
  #renkakouki .section-info {
    padding: 20px 0 0;
  }

  #renkakouki .info-window {
    padding: 30px 24px 50px;
    gap: 28px;
  }

  /* 横長事前登録ボタンはPCでも横長サイズを維持 (SP版スプライトを共用) */
  #renkakouki .info-btn {
    width: 60%;
    max-width: 520px;
  }

  /* info-btns (detail btn + device icon + info-btn の1セット) のPC調整 */
  #renkakouki .info-btns {
    gap: 10px;
  }

  #renkakouki .info-btns .detail {
    gap: 8px;
  }

  #renkakouki .info-btns .detail .device {
    width: clamp(60px, 5vw, 90px);
    max-width: none;
  }
}