@charset "UTF-8";

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

#aimelo {
  scroll-behavior: smooth;
  background: #000 url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/bg_sp.jpg) center top / cover no-repeat;
  overflow-x: hidden;
  min-width: 320px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
}

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

/* ===== Common Layout ===== */
#aimelo #container {
  overflow: hidden;
}

#aimelo #lp_wrapper {
  background: transparent;
  box-shadow: none;
}

#aimelo #lp_header_area,
#aimelo #lp_footer_area {
  position: relative;
  z-index: 5;
}

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

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

/* ===== Section Common ===== */
#aimelo section {
  position: relative;
}

/* ===== FV Section (MV) ===== */
#aimelo .section-fv {
  width: 100%;
  /* aspect-ratio: 325 / 680; */
  position: relative;
}

#aimelo .fv-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 150vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#aimelo .fv-title-area {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 8vw;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

#aimelo .fv-logo {
  position: absolute;
    z-index: 2;
    left: 40%;
    top: 41vw;
    width: 21vw;
}

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

#aimelo .fv_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 3.08vw;
  margin-top: 3.08vw;
}

#aimelo .fv_btn a {
  text-align: center;
}

/* ===== Register Button (事前登録 - btn01 3段スプライト) ===== */
#aimelo .btn a {
  display: block;
  width: 92%;
  height: 24vw;
  max-width: 710px;
  aspect-ratio: 710 / 173;
  margin: 0 auto;
  font-size: 0;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/sp_btn01.png) no-repeat top center / 100% 300%;
}

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

#aimelo .btn a:hover,
#aimelo .btn a:active {
  background-position: 0 53.5%;
}

#aimelo .btn a.reserved,
#aimelo .btn a.reserved:hover,
#aimelo .btn a.reserved:active {
  background-position: 0 100%;
  pointer-events: none;
  pointer-events: none;
  pointer-events: none;
}

/* ===== Game Start Button (ゲームスタート - btn02 2段スプライト) ===== */
#aimelo .btn .end {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/sp_btn02.png);
  background-size: 100% 200%;
}

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

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

/* ===== Detail Button (詳細 - btn03 2段スプライト) ===== */
#aimelo .fv_btn .detail {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  align-self: flex-end;
  gap: 2.46vw;
}

#aimelo .btn-detail-link {
  display: inline-block;
  width: 23vw;
  aspect-ratio: 191 / 108;
  font-size: 0;
  color: transparent;
  text-decoration: none;
  border: none;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/sp_btn03.png) no-repeat top center / 100% 244.44%;
}

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

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

/* ===== Device Badge ===== */
#aimelo .detail .device {
  width: 18.46vw;
  flex-shrink: 0;
}

#aimelo .detail .device img {
  width: 100%;
}

/* ===== 事前登録報酬 ===== */
#aimelo .section-reward {
  padding: 10px 0;
  margin-top: -7vw;
}

#aimelo .reward-window {
  position: relative;
  z-index: 1;
  width: auto;
  margin: 0;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#aimelo .reward-content {
  width: 100%;
}

#aimelo .reward-content img {
  width: 100%;
  height: auto;
  max-width: 1220px;
  margin: auto;
}

/* ===== system ===== */
#aimelo .section-system {
  padding: 10px 0;
}

#aimelo .system-window {
  position: relative;
  z-index: 1;
  width: auto;
  margin: 0;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#aimelo .system-content {
  width: 100%;
}

#aimelo .system-content img {
  width: 100%;
  height: auto;
  max-width: 1220px;
  margin: auto;
}

/* ===== Section Buttons (共通) ===== */
#aimelo .section-btn {
  display: flex;
  justify-content: center;
  width: 100%;
}

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

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

  /* Background PC */
  #aimelo {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/bg_pc.jpg);
  }

  #aimelo .fv-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 75vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #aimelo .btn a {
    display: block;
    width: 92%;
    height: 12vw;
    max-width: 710px;
    aspect-ratio: 710 / 173;
    margin: 0 auto;
    font-size: 0;
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/sp_btn01.png) no-repeat top center / 100% 300%;
  }

  /* FV (MV) */
  #aimelo .section-fv {
    aspect-ratio: 1920 / 1080;
  }

  #aimelo .fv-title-area {
    top: 17vw;
    left: 78vw;
    margin: 0;
    width: auto;
    height: auto;
    align-items: flex-end;
  }

  #aimelo .fv-logo {
    left: 21vw;
    top: 35vw;
    width: 14vw;
  }

  #aimelo .fv_btn {
    flex-direction: column;
    align-items: flex-end;
    width: auto;
    gap: 0.52vw;
    margin-top: 0.52vw;
  }

  /* Register Button PC - FV only (btn01 円形縦スプライト) */
  #aimelo .fv_btn .btn a {
    width: 14vw;
    height: auto;
    max-width: none;
    aspect-ratio: 1 / 1;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/pc_btn01.png);
  }

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

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

  /* Game Start Button PC - FV only (btn02) */
  #aimelo .fv_btn .btn a.end {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/pc_btn02.png);
  }

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

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

  /* Section buttons (2個目以降) - SP style on PC */
  #aimelo .section-btn .btn a {
    width: 100%;
    max-width: 710px;
    height: 8vw;
  }

  /* Detail Button PC (btn03) */
  #aimelo .btn-detail-link {
    width: 8vw;
    aspect-ratio: 142 / 83;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/aimelo/pc_btn03.png);
    background-size: 100% 278.31%;
  }

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

  #aimelo .detail .device {
    width: 6.17vw;
  }

  #aimelo .fv_btn .detail {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.52vw;
  }

  /* 事前登録報酬 */
  #aimelo .section-reward {
    padding: 40px 0;
    margin-top: -26.5vw;
  }

  #aimelo .reward-window {
    width: calc(100% - 80px);
    max-width: 1620px;
    margin: 0 auto;
    padding: 40px;
    gap: 40px;
  }

  #aimelo .reward-content {
  }


  /* system */
  #aimelo .section-system {
    padding: 40px 0;
  }

  #aimelo .system-window {
    width: calc(100% - 80px);
    max-width: 1620px;
    margin: 0 auto;
    padding: 40px;
    gap: 40px;
  }

  #aimelo .system-content {
  }
}

/* ============================================================
   Tablet adjustments - 769px ~ 1200px
   ============================================================ */
@media (min-width: 769px) and (max-width: 1200px) {

  #aimelo .reward-window,
  #aimelo .system-window {
    padding: 40px 30px;
  }
}