@charset "UTF-8";

/* =====================================================
   私有正史-乱世偽書と依存せし神姫- 事前登録ページ専用CSS
   - 画像で見た目を制御する方針
   - PC: min-width 769px / SP: max-width 768px
===================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#shiyuu .fv-logo {
  width: 60%;
  margin: 50% auto 0;
  pointer-events: auto;
}

#shiyuu .fv-logo img {
  width: 100%;
}

#shiyuu .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;
}

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

/* ===== 共通：事前登録ボタン（スプライト画像ボタン）===== */
#shiyuu 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;
}

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

/* ===== FV内：今すぐ事前登録ボタン（メインボタン / 3状態スプライト） =====
   スプライト構成: [normal][hover][reserved] を縦に積んでいる前提
   - SP: btn_reserve_sp.png (507x393, 各状態 507x131) */
#shiyuu .fv_btn .btn {
  width: 70%;
  max-width: 520px;
}

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

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

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

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

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

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

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

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

#shiyuu .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/shiyuu/btn_detail.png);
  background-size: 100% 200%;
  background-position: 0 0;
}

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

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

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

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

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

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

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

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

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

/* milestone-cards 共通土台
   実際のレイアウト指定は SP用 (max-width: 768px) と
   PC用 (min-width: 769px) のメディアクエリ内に分離している */
#shiyuu .milestone-cards {
  width: 100%;
}

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

/* SP: 2列グリッドで [5K|10K] [30K|50K] を配置し、
   75K / 100K / 全員スタンプはフル幅で1段ずつ並べる
   milestone-column は display: contents で透過させ、
   実カード（.milestone-card）を直接 grid セルとして扱う */
@media (max-width: 768px) {
  #shiyuu .milestone-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 8px;
  }

  #shiyuu .milestone-column {
    display: contents;
  }

  #shiyuu .milestone-card.milestone-5000   { order: 1; }
  #shiyuu .milestone-card.milestone-10000  { order: 2; }
  #shiyuu .milestone-card.milestone-30000  { order: 3; }
  #shiyuu .milestone-card.milestone-50000  { order: 4; }
  #shiyuu .milestone-card.milestone-75000  { order: 5; grid-column: 1 / -1; }
  #shiyuu .milestone-card.milestone-100000 { order: 6; grid-column: 1 / -1; }
  #shiyuu .milestone-card.all-stamp        { order: 7; grid-column: 1 / -1; }
}

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

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

/* ===== clear マーク表示・非表示制御 =====
   SPでは各カード左側のアイコン部分に重なるように配置 */
#shiyuu .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;
}

/* 75K / 100K は左側にキャラアイコンがあるので、その上に重ねる */
#shiyuu .milestone-card.milestone-75000 .card-img-clear,
#shiyuu .milestone-card.milestone-100000 .card-img-clear {
  width: 14%;
  left: 3%;
}

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

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

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

#shiyuu .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;
}

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

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

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

/* ===== アプリ情報 (spec) ===== */
#shiyuu .section-spec {
  padding: 30px 0;
}

#shiyuu .spec-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

#shiyuu .spec-window img {
  width: 100%;
  height: auto;
}

/* ===== 注意事項 ===== */
#shiyuu .section-attention {
  padding: 30px 0 60px;
}

#shiyuu .attention-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

#shiyuu .attention-window img {
  width: 100%;
  height: auto;
}

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

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

  /* PC: ロゴは左上に固定配置 */
  #shiyuu .fv-content {
    align-items: flex-start;
  }

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

  /* PC: 事前登録ボタン群は右下に固定配置 */
  #shiyuu .fv_btn {
    left: auto;
    right: 19%;
    bottom: 8%;
    transform: none;
    max-width: none;
    width: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  /* メインの「今すぐ事前登録」ボタン（円形・3状態スプライト）
     - PC: btn_reserve_pc.png (188x582, 各状態 188x194 想定) */
  #shiyuu .fv_btn .btn {
    width: clamp(140px, 14vw, 220px);
    max-width: none;
  }

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

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

  /* ゲームを始めるボタン（円形・2状態スプライト）
     - PC: btn_start_pc.png (188x388, 各状態 188x194) */
  #shiyuu .fv_btn .btn a.end {
    aspect-ratio: 188 / 194;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/shiyuu/btn_start_pc.png);
    background-size: 100% 200%;
  }

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

  /* 詳細ボタン（PC・SP共用画像をそのまま使用 / サイズのみPC調整） */
  #shiyuu .fv_btn .detail {
    gap: 8px;
    align-self: flex-end;
  }

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

  /* PC専用バッジ */
  #shiyuu .fv_btn .detail .device {
    width: clamp(60px, 5vw, 90px);
    max-width: none;
  }

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

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

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

  /* milestone-cards: 3カラム構成
     - 左: all-stamp（ヘッダー + 5K/10K/30K/50K の縦積み）
     - 中央: 75,000人達成報酬
     - 右:  100,000人達成報酬
     1200pxメインコンテンツ内で 960px幅・左寄せ配置
     各カラムは画像の自然なアスペクト比で表示し、上端を揃える */
  #shiyuu .milestone-cards {
    display: grid;
    grid-template-columns: 1.575fr 1fr 1fr;
    align-items: start;
    gap: 12px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto 0 0;
  }

  /* SP では display: contents にしているため、PC では明示的に flex に戻す。
     高さは画像の自然サイズに任せ、内部要素は上から詰めて配置 */
  #shiyuu .milestone-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
    justify-content: flex-start;
  }

  #shiyuu .milestone-card {
    width: 100%;
    max-width: none;
    flex-shrink: 0;
  }

  /* 中央/右の単独カードは画像の自然なアスペクト比で表示 */
  #shiyuu .milestone-75000-column .milestone-card .card-img,
  #shiyuu .milestone-100000-column .milestone-card .card-img {
    width: 100%;
  }

  #shiyuu .milestone-75000-column .milestone-card .card-img img,
  #shiyuu .milestone-100000-column .milestone-card .card-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  #shiyuu .milestone-card .card-img-clear {
    width: 90px;
    max-width: none;
    top: auto;
    right: auto;
    bottom: 5px;
    left: 25px;
    margin: auto;
    transform: none;
  }

  /* 75K / 100K カードの判子はカードの右上寄りに固定（PC表示中はずっとこの形） */
  #shiyuu .milestone-card.milestone-75000 .card-img-clear,
  #shiyuu .milestone-card.milestone-100000 .card-img-clear {
    width: 110px;
    top: auto;
    right: auto;
    bottom: 55px;
    left: 90px;
    margin: 0;
    transform: none;
  }

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

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

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

  /* 世界観テキスト画像
     - 最大 725 x 731 で表示（拡大はせず、縮小のみ可）
     - 1200px コンテンツ内で右揃え */
  #shiyuu .world-text {
    width: 100%;
    max-width: 725px;
    align-self: flex-end;
    margin: 0;
  }

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

  /* アプリ情報 */
  #shiyuu .section-spec {
    padding: 20px 0 60px;
  }

  #shiyuu .spec-window {
    padding: 20px 24px 40px;
  }

  /* 注意事項 */
  #shiyuu .section-attention {
    padding: 20px 0 100px;
  }

  #shiyuu .attention-window {
    padding: 20px 24px 40px;
  }
}

/* ============================================================
   Tablet adjustments - 769px ~ 1200px
   ※ 達成マーク (card-img-clear) は PC 最大時 (min-width: 769px) の値を
   そのまま継承させるため、ここでは上書きしない
   ============================================================ */