@charset "UTF-8";
/*
- 共通
- 事前登録ボタン
- 事前登録詳細(必読)ボタン
- デバイスアイコン
- fv
- lp_sec
- reward
- game
- character / bottom CTA
*/

#nukeru {
  font-family: "M PLUS 2", メイリオ, sans-serif;
  font-size: 14px;
  font-optical-sizing: auto;
  font-style: normal;
  color: #000;
  box-sizing: border-box;
}

/*==================================================
　共通
==================================================*/
#lp_header_area,
#lp_footer_area {
  position: relative;
  z-index: 5;
}

#container {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/*==========================================================
　事前登録ボタン
===========================================================*/
/* SP: 横長ボタン (btn_sprite_02 480×360 / 3state) */
#nukeru .btn a {
  display: block;
  width: min(80vw, 480px);
  aspect-ratio: 4 / 1;
  margin: 0 auto;
  font-size: 0;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/btn_sprite_02.png) no-repeat top center / 100% 300%;
  filter: drop-shadow(0 4px 4px rgba(78, 35, 94, 0.35));
  animation: btn-glow 2.8s ease-in-out infinite;
  transition: filter 0.35s ease;
}

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

#nukeru .btn a:hover {
  background-position: 0 50%;
  animation: none;
  filter: drop-shadow(0 5px 5px rgba(78, 35, 94, 0.48));
}

#nukeru .btn a.reserved,
#nukeru .btn.reserved a {
  background-position: 0 100%;
  animation: none;
  filter: drop-shadow(0 4px 4px rgba(78, 35, 94, 0.35));
  pointer-events: none;
}

#nukeru .btn a.reserved:hover,
#nukeru .btn.reserved a:hover {
  background-position: 0 100%;
  filter: drop-shadow(0 4px 4px rgba(78, 35, 94, 0.35));
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #nukeru .btn a {
    width: min(64vw, 480px);
  }

  /* FV円形ボタン (btn_sprite_01 223×659 / 3state) */
  #nukeru .btn.pc-circle a {
    width: min(15vw, 218px);
    aspect-ratio: 1 / 1;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/btn_sprite_01.png);
    animation-name: btn-glow-circle;
  }

  .webp #nukeru .btn.pc-circle a {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/btn_sprite_01.webp);
  }

  #nukeru .btn.pc-circle a:hover {
    background-position: 0 50%;
    animation: none;
    filter: drop-shadow(0 6px 6px rgba(78, 35, 94, 0.52));
  }

  #nukeru .btn.pc-circle a.reserved,
  #nukeru .btn.pc-circle.reserved a,
  #nukeru .btn.pc-circle a.reserved:hover,
  #nukeru .btn.pc-circle.reserved a:hover {
    background-position: 0 100%;
    animation: none;
    filter: drop-shadow(0 4px 4px rgba(78, 35, 94, 0.35));
    pointer-events: none;
  }
}

@keyframes btn-glow {
  0%,
  100% {
    filter: brightness(1.04)
            saturate(1.08)
            sepia(0.04)
            drop-shadow(0 4px 4px rgba(78, 35, 94, 0.4))
            drop-shadow(0 0 4px rgba(255, 235, 92, 0.28));
  }

  50% {
    filter: brightness(1.24)
            saturate(1.34)
            sepia(0.2)
            drop-shadow(0 6px 6px rgba(78, 35, 94, 0.52))
            drop-shadow(0 0 10px rgba(255, 218, 26, 0.68));
  }
}

@keyframes btn-glow-circle {
  0%,
  100% {
    filter: brightness(1.04)
            saturate(1.08)
            sepia(0.04)
            drop-shadow(0 5px 5px rgba(78, 35, 94, 0.44))
            drop-shadow(0 0 5px rgba(255, 235, 92, 0.3));
  }

  50% {
    filter: brightness(1.24)
            saturate(1.34)
            sepia(0.2)
            drop-shadow(0 7px 7px rgba(78, 35, 94, 0.56))
            drop-shadow(0 0 11px rgba(255, 218, 26, 0.7));
  }
}

/*==========================================================
　事前登録詳細(必読)ボタン
　btn_detail.png 122×142 / 2state → 1state: 122×71
===========================================================*/
#nukeru .detail a {
  display: inline-block;
  margin: 0 auto;
  width: 61px;
  aspect-ratio: 122 / 71;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-decoration: none;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/btn_detail.png) no-repeat top center / 100% 200%;
}

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

#nukeru .detail a:hover {
  background-position: center calc(100% + 1px);
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #nukeru .detail a {
    width: 7vw;
    max-width: 122px;
    height: 4vw;
    max-height: 71px;
    background-position: center 1px;
  }

  #nukeru .detail a:hover {
    background-position: center calc(100% + 2px);
  }
}

/*==========================================================
　デバイスアイコン
===========================================================*/
#nukeru .detail .device {
  width: 15vw;
  max-width: 102px;
}

@media screen and (min-width: 769px) {
  #nukeru .detail .device {
    width: 5vw;
    max-width: 80px;
  }
}

/*=================================
　fv
=================================*/
#nukeru .fv {
  position: relative;
  z-index: 0;
  line-height: 0;
  font-size: 0;
}

#nukeru .fv_img {
  display: block;
  width: 100%;
  height: auto;
}

#nukeru .fv_title {
  position: absolute;
  z-index: 3;
  display: block;
  left: 3vw;
  bottom: 0vw;
  width: min(56vw, 419px);
}

#nukeru .fv_title img {
  display: block;
  width: 100%;
  height: auto;
}

#nukeru .fv_btn {
  position: absolute;
  z-index: 4;
  right: 8vw;
  bottom: 1vw;
  display: block;
  width: 27vw;
}

#nukeru .fv_btn .detail {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 0.8vw;
}

#nukeru .fv_btn .detail a {
  margin: 0;
  width: min(27vw, 122px);
}

#nukeru .fv_btn .device {
  display: block;
  width: 16vw;
  max-width: 136px;
  position: relative;
  right: -4vw;
  top: -2vw;
}

#nukeru .fv_btn .device img {
  display: block;
  width: 100%;
  height: auto;
}

#nukeru .fv_btn .btn {
  display: none;
}

#nukeru .fv_cta_sp {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 768 / 131;
  background:
    url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/bg_ctaarea_01_sp.jpg) no-repeat top center / 100% 100%,
    #e1c6e8;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  font-size: 14px;
}

.webp #nukeru .fv_cta_sp {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/bg_ctaarea_01_sp.webp);
}

#nukeru .fv_cta_sp .btn a {
  width: min(56vw, 320px);
}

/* PC: FV画像上に絶対配置 */
@media screen and (min-width: 769px) {
  #nukeru .fv_cta_sp {
    display: none;
  }

  #nukeru .fv_title {
    left: auto;
    right: 43vw;
    top: 16vw;
    bottom: auto;
    width: min(19.17vw, 368px);
  }

  #nukeru .fv_btn {
    right: 26vw;
    top: 21.5vw;
    bottom: auto;
    width: min(16vw, 326px);
  }

  #nukeru .fv_btn .detail {
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 0.6vw;
    margin-bottom: 0.8vw;
  }

  #nukeru .fv_btn .detail a {
    width: min(6.35vw, 122px);
  }

  #nukeru .fv_btn .device {
    display: block;
    width: min(7.08vw, 136px);
    max-width: none;
    position: relative;
    right: 0vw;
    top: -1vw;
  }

  #nukeru .fv_btn .btn {
    display: block;
  }

  #nukeru .fv_btn .btn.pc-circle a {
    width: min(10.6vw, 223px);
    position: relative;
    left: 1vw;
    top: -1vw;
  }
}

/*=================================
　lp_sec
=================================*/
#nukeru .lp_sec {
  position: relative;
  z-index: 1;
  line-height: 0;
  font-size: 0;
}

#nukeru .lp_sec img {
  display: block;
  width: 100%;
  height: auto;
}

/*=================================
　reward
=================================*/
#nukeru .reward {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/*=================================
　character / bottom CTA
=================================*/
#nukeru .character {
  position: relative;
}

/* SP: bg_ctaarea_02_sp 768×185 → 24.09vw */
#nukeru .character .btns {
  position: relative;
  line-height: normal;
  font-size: 14px;
  background:
    url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/bg_ctaarea_02_sp.jpg) no-repeat top center / 100% 100%,
    #f5c0d4;
  padding: max(0px, calc((24.09vw - min(14vw, 80px)) / 2)) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webp #nukeru .character .btns {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/bg_ctaarea_02_sp.webp);
}

#nukeru .character .btn a {
  width: min(56vw, 320px);
  transform: translateY(-14px);
}

#nukeru .character .btns .detail {
  display: none;
}

/* PC: bg_ctaarea_pc 1920×214 → 11.15vw */
@media screen and (min-width: 769px) {
  #nukeru .character .btns {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/bg_ctaarea_pc.jpg);
    background-color: #f5c0d4;
    padding: max(0px, calc((11.15vw - min(7vw, 84px)) / 2)) 0;
  }

  .webp #nukeru .character .btns {
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/nukeru/bg_ctaarea_pc.webp);
  }

  #nukeru .character .btn a {
    width: min(28vw, 336px);
    transform: none;
  }
}

/*==========================================================
　PC/SP 表示切替 (他のdisplay:blockより後に記述して確実に優先)
===========================================================*/
@media screen and (min-width: 769px) {
  #nukeru .sp {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  #nukeru .pc {
    display: none !important;
  }
}