@charset "UTF-8";
:root {
  --spc-s: 1vw;
  --spc-m: 4vw;
  --spc-l: 6vw;
  --main-bg: repeating-linear-gradient(135deg, #f6ed03 50%, #fdfabd 50%, #fdfabd 56%, #f6ed03 56%, #f6ed03);
  --accent-color: #0021ff;
}

@media screen and (min-width: 641px) {
  :root {
    --spc-s: 0.4rem;
    --spc-m: 1rem;
    --spc-l: 2rem;
  }
}

/* ---------- 共通スタイル ---------- */
@media screen and (max-width: 640px) {
  section h2 {
    font-size: 5.5vw !important;
    font-weight: 500 !important;
  }
}
.slash-fukidashi {
  position: relative;
  display: block;
  width: fit-content;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
  margin: 2rem auto 1rem;
}
.slash-fukidashi:before {
  content: "";
  position: absolute;
  left: -4vw;
  bottom: 0;
  background-color: #333;
  height: 100%;
  width: 2px;
  transform: rotate(-29deg);
}
.slash-fukidashi:after {
  content: "";
  position: absolute;
  right: -4vw;
  bottom: 0;
  background-color: #333;
  height: 100%;
  width: 2px;
  transform: rotate(29deg);
}
.mb_0 {
  margin-bottom: 0 !important;
}
.mb_s {
  margin-bottom: var(--spc-s) !important;
}
.mb_m {
  margin-bottom: var(--spc-m) !important;
}
.mb_l {
  margin-bottom: var(--spc-l) !important;
}
@media screen and (min-width: 641px) {
  .slash-fukidashi {
    font-size: 20px;
  }
  .slash-fukidashi:before {
    left: -20px;
  }
  .slash-fukidashi:after {
    right: -20px;
  }
}

#limited, #price, #step_area, #receive {
  padding: 4rem 0;
}

#limited, #receive {
  background: var(--main-bg);
  background-size: 14px 14px;
}

/* ---------- include調整 ---------- */
.mainArea #benefits {
  padding-bottom: 4rem;
}
.mainArea #price h2 {
  margin-top: 0;
}
.spec-imh-banner a {
  pointer-events: none;
}
.mainArea #device_check_r2 .device_check_r2-title {
  width: 100%;
}
.mainArea #device_check_r2 {
  width: 90%;
  margin: 0 auto;
}
.mainArea .form {
  padding: 12px 0;
}
.mainArea #otoku_gaiyo:not(.tab-none).inc_gaiyo .gaiyo-tab-body {
  margin-top: var(--spc-l);
}
@media screen and (min-width: 641px) {
  .mainArea .form {
    padding: 20px 0 0;
  }
  .mainArea .campaign-anno {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 640px) {
  #headerSmall .logo img {
    margin: 1rem;
  }
}

/* ---------- コラボエリア ---------- */
#limited {
  padding-top: 140px;
}
#limited h2, #receive h2 {
  margin: 0 0 1.6rem;
  text-align: center;
  font-size: 5.4vw;
  font-weight: bold;
  line-height: 1.4em;
  letter-spacing: 0.1em;
}
.white_box {
  position: relative;
  padding: 5vw 10vw 0;
  border-radius: 16px;
  background: #fff;
}
.white_box p {
  font-size: 4.5vw;
}
.limited_title {
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.limited_title span {
  display: block;
  font-size: 0.8em;
  font-weight: bold;
  margin: 1em 0 0;
}
.receive_mail_title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1rem;
  margin-top: 0;
  margin-bottom: var(--spc-l);
  font-size: 5.4vw;
  font-weight: bold;
}
.receive_mail_icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 14vw;
  height: 14vw;
  border-radius: 50%;
  background: var(--accent-color);
}
.limited_item {
  margin-top: 3rem;
  text-align: center;
}
.limited_item > li {
  margin-bottom: 3rem;
}
.limited_item > li:last-child {
  margin-bottom: 0;
  border: 0;
}
.limited_item p {
  font-size: 5vw;
  font-weight: bold;
  margin-bottom: 0;
}
.limited_number {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 10px;
}
.limited_number * {
  font-weight: 500;
  color: #333 !important;
}
.receive_mail_icon img {
  width: 80%;
}
@media screen and (min-width: 641px) {
  #limited h2, #receive h2 {
    font-size: 30px;
  }
  #limited .white_box {
    padding: 3rem;
  }
  .white_box {
    padding: 3rem 80px;
  }
  .white_box p, .limited_item p {
    font-size: 18px;
  }
  .limited_item {
    display: flex;
    align-items: flex-start;
  }
  .limited_item > li {
    width: 100%;
    border-right: 1px solid #ddd;
  }
  .limited_item > li:not(:first-of-type) > img {
    padding: 1.5rem 0;
  }
  .limited_number img {
    width: 80px;
  }
  .receive_mail_title {
    font-size: 24px;
  }
  .receive_mail_icon {
    width: 70px;
    height: 70px;
  }
  #receive .limited_item > li:first-of-type > img {
    padding: 1.15rem 0;
  }
}
@media screen and (max-width: 640px) {
  #limited {
    padding-top: 100px;
  }
  .limited_title {
    width: 90%;
    top: -90px;
  }
  .limited_item {
    text-align: center;
  }
  .limited_item > li {
    border-bottom: 1px solid #ddd;
    padding-bottom: 3rem;
  }
  .limited_number img {
    width: 16vw;
  }
}

/* ---------- benefits ---------- */
#benefits h2 {
  margin: 0 0 3rem;
}
#benefits h2 span {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 500;
  margin-top: 0.8em;
}
#benefits .ikkatu {
  font-size: 1em;
}

#benefits .campaign_bnr a {
  pointer-events: none
}
#benefits .campaign_bnr a:hover {
  opacity: 1;
}
#benefits .device-wrap {
  display: none;
}

/* ---------- ラインアップ ---------- */
.inf-ctl-target.dvitem-cover .af-none,
.inf-ctl-target.dvitem-cover .green_btn {
  display: none;
}
.inf-ctl-target.dvitem-cover .af-all {
  display: block;
}

/* ---------- 料金表 ---------- */
#price {
  background: #faf5ef;
}

@media screen and (max-width: 640px) {
  #price .container {
    width: 95% !important;
  }
  #price .app-btn_container {
    width: 90% !important;
  }
}