@charset "utf-8";

/*共通*/
html,
body{height: 100%;font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, sans-serif;}
img {
  width: 100%;
  height: auto;
}
html {
  scroll-behavior: smooth;
}
body{
  scroll-padding-top: -56px;
}
footer{
  padding-bottom: 43.8vw;
}
@media screen and (min-width: 640px) {
  footer{
    padding-bottom: 280px;
  }
}

/*パンくず*/
#ulp_cmntop {
  background-color: #ffffff;
}

/* .section_period_wrapper */
.section_period_wrapper {
  width: 100%;
  height: auto;
  background: url(../img/period_bg.png) top center / 100% auto;
  color: #ffffff;
}
.period_contents {
  width: 95vw;
  margin: 0 auto;
  padding: 3vw 0;
}
.period_box {
  color: #000000;
  display: flex;
  align-items: flex-start;
  margin-top: 2.5vw;
}
.period_box_ttl {
  color: #cd0f33;
  font-weight: bold;
  background-color: #f9dae2;
  border-radius: 1vw;
  padding: 1.6vw 0;
  font-size: 2.9vw;
  width: 30vw;
  box-sizing: border-box;
  text-align: center;
  flex-shrink: 0;
}
.period_box_txt {
  font-size: 2.9vw;
  padding: 1.3vw 0 0 1.6vw;
  line-height: 3.5vw;
  font-weight: bold;
}
.period_box_txt ul {
  padding-left: 1em;
  text-indent: -1em;
}

@media screen and (min-width: 640px) {
  .period_contents {
    width: 607px;
    padding: 19px 0;
  }
  .period_box {
    margin-top: 16px;
  }
  .period_box_ttl {
    border-radius: 6px;
    padding: 10px 0;
    font-size: 18px;
    width: 192px;
  }
  .period_box_txt {
    font-size: 18px;
    padding: 8px 0 0 10px;
    line-height: 22px;
  }
}

/* .section_about_wrapper */
.section_about_wrapper {
  background-color: #fec1d1;
  padding: 1.8vw 2.5vw 6vw;
}
.section_about_contents {
  background-color: #ffffff;
  padding: 5vw 0;
}
.about_ttl {
  width: 53vw;
  display: block;
  margin: 0 auto;
}
.about_img01 {
  width: 58vw;
  display: block;
  margin: 0 auto;
}
.about_box {
  background-color: #ffdae7;
  margin: 8vw 2.5vw 0;
  padding: 6vw 0;
  border-radius: 1vw;
  position: relative;
  font-weight: bold;
  color: #000000;
}
.about_ttl01 {
  position: absolute;
  left: 50%;
  width: 24vw;
  top: -3.5vw;
  transform: translateX(-50%);
}
.about_ranking {
  width: 71vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.about_ranking:not(:last-child) {
  margin-bottom: 2vw;
}
.about_ranking img {
  width: 13vw;
}
.about_ranking span {
  font-size: 5vw;
}
.about_ranking p {
  font-size: 4vw;
  padding-left: 2vw;
}
.about_ttl02 {
  position: absolute;
  left: 50%;
  width: 60vw;
  top: -3.5vw;
  transform: translateX(-50%);
}
.about_period {
  font-weight: bold;
  text-align: center;
  font-size: 5vw;
}
.about_chance {
  width: 87vw;
  margin: 1.5vw auto 0;
  display: flex;
  align-items: center;
  font-size: 4vw;
}
.about_chance_part {
  color: #f4517b;
  background-color: #ffffff;
  padding: 1.5vw 2vw;
  border-radius: 1vw;
  width: 15vw;
  text-align: center;
}
.about_chance_date {
  padding-left: 2vw;
}
.about_chance_date span {
  font-size: 5vw;
}
.about_note {
  padding: 0 2.5vw;
  color: #333333;
  font-size: 3vw;
  line-height: 4vw;
}
.about_note_ul {
  padding: 0 2.5vw;
  color: #333333;
  font-size: 3vw;
  line-height: 4vw;
  padding-left: 1em;
  text-indent: -1em;
  margin: 0 2.5vw;
}
.about_note_top {
  padding-top: 4vw;
}
.check_btn {
  width: 84vw;
  display: block;
  margin: 4vw auto 0;
}
.about_ttl03 {
  position: absolute;
  left: 50%;
  width: 24vw;
  top: -3.5vw;
  transform: translateX(-50%);
}
@media screen and (min-width: 640px) {
  .section_about_wrapper {
    padding: 11px 16px 38px;
  }
  .section_about_contents {
    padding: 32px 0;
  }
  .about_ttl {
    width: 338px;
  }
  .about_img01 {
    width: 370px;
  }
  .about_box {
    margin: 51px 16px 0;
    padding: 38px 0;
    border-radius: 6px;
  }
  .about_ttl01 {
    width: 153px;
    top: -22px;
  }
  .about_ranking {
    width: 453px;
  }
  .about_ranking:not(:last-child) {
  margin-bottom: 13px;
  }
  .about_ranking img {
    width: 83px;
  }
  .about_ranking span {
    font-size: 32px;
  }
  .about_ranking p {
    font-size: 25px;
    padding-left: 13px;
  }
  .about_ttl02 {
    width: 383px;
    top: -22px;
  }
  .about_period {
    font-size: 32px;
  }
  .about_chance {
    width: 556px;
    margin: 9px auto 0;
    font-size: 25px;
  }
  .about_chance_part {
    padding: 9px 13px;
    border-radius: 6px;
    width: 96px;
  }
  .about_chance_date {
    padding-left: 13px;
  }
  .about_chance_date span {
    font-size: 32px;
  }
  .about_note {
    padding: 0 16px;
    font-size: 19px;
    line-height: 25px;
  }
  .about_note_ul {
    padding: 0 15px;
    font-size: 19px;
    line-height: 25px;
    margin: 0 16px;
  }
  .about_note_top {
    padding-top: 25px;
  }
  .check_btn {
    width: 536px;
    margin: 25px auto 0;
  }
  .about_ttl03 {
    width: 153px;
    top: -22px;
  }
}

/* .process_contents */
.process_contents {
  background-color: #ffffff;
  margin-top: 5vw;
}
.process_btn {
  width: 100%;
  display: block;
  position: relative;
  background: #fff;
  text-align: center;
  border: none;
  margin: 0 auto;
}
.process_btn img {
  display: block;
}
.process_img {
  width: 85vw;
  display: block;
  margin: 0 auto;
  padding: 5vw 0;
  background-color: #ffffff;
  display: none;
}
@media screen and (min-width: 640px) {
  .process_contents {
    margin-top: 32px;
  }
  .process_img {
    width: 543px;
    padding: 32px 0;
  }
}

/* .coupon_contents */
.coupon_contents {
  background-color: #ffffff;
  margin-top: 5vw;
  padding: 5vw 0;
}
.coupon_ttl {
  width: 80vw;
  display: block;
  margin: 0 auto;
}
.coupon_ttl01 {
  position: absolute;
  left: 50%;
  width: 55vw;
  top: -3.5vw;
  transform: translateX(-50%);
}
.coupon_contents01 {
  margin: 1.5vw auto 0;
  display: flex;
  align-items: center;
  font-size: 4vw;
  color: #333333;
  width: 83vw;
  justify-content: center;
}
.coupon_contents01 img {
  width: 27vw;
}
.coupon_contents01 p {
  font-size: 4vw;
  text-align: center;
  padding-left: 7vw;
  line-height: 6vw;
}
.coupon_ttl02 {
  position: absolute;
  left: 50%;
  width: 65vw;
  top: -3.5vw;
  transform: translateX(-50%);
}
.coupon_contents02 {
  margin: 1.5vw auto 0;
  display: flex;
  align-items: center;
  font-size: 4vw;
  color: #333333;
  width: 83vw;
  justify-content: center;
}
.coupon_contents02 img {
  width: 19vw;
}
.coupon_contents02 p {
  font-size: 4vw;
  text-align: center;
  padding-left: 10vw;
  line-height: 6vw;
}
.coupon_txt {
  text-align: center;
  padding-top: 5vw;
  line-height: 5vw;
  font-size: 3.5vw;
}
@media screen and (min-width: 640px) {
  .coupon_contents {
    margin-top: 32px;
    padding: 32px 0;
  }
  .coupon_ttl {
    width: 511px;
  }
  .coupon_ttl01 {
    width: 351px;
    top: -22px;
  }
  .coupon_contents01 {
    margin: 9px auto 0;
    font-size: 25px;
    width: 530px;
  }
  .coupon_contents01 img {
    width: 172px;
  }
  .coupon_contents01 p {
    font-size: 25px;
    padding-left: 45px;
    line-height: 38px;
  }
  .coupon_ttl02 {
    width: 415px;
    top: -22px;
  }
  .coupon_contents02 {
    margin: 9px auto 0;
    font-size: 25px;
    width: 530px;
  }
  .coupon_contents02 img {
    width: 121px;
  }
  .coupon_contents02 p {
    font-size: 25px;
    padding-left: 64px;
    line-height: 38px;
  }
  .coupon_txt {
    padding-top: 32px;
    line-height: 32px;
    font-size: 22px;
  }
}

/* accordion_area_wrapper */
.accordion_area_wrapper {
  padding: 4vw 0;
  background: url(../img/period_bg.png) top center / 100% auto;
}
.accordion_area {
  position: relative;
  width: 83vw;
  background: #fff;
  text-align: center;
  border: none;
  margin: 0 auto;
  display: block;
}
.accordion_container01 {
  border-left: 2px solid #D00E31;
  border-bottom: 2px solid #D00E31;
  border-right: 2px solid #D00E31;
  display: none;
  line-height: 1.3;
  background-color: #ffffff;
  color: #000000;
  padding: 2.041vw;
  width: 78vw;
  margin: 0 auto;
}
.terms__block,
.terms__description {
  font-size: 10pt;
}
.terms__title {
    margin-top: 1.5em;
  }
.terms__item01 {
    padding-left: 1em;
    text-indent: -1em;
}
.terms__bold {
    font-weight: bold;
}
a.terms__link:hover {
    text-decoration: none;
}
a.terms__link {
    display: inline;
    color: #5a87c8;
    text-decoration: underline;
}
@media screen and (min-width: 640px) {
  .accordion_area_wrapper {
    padding: 25px 0;
  }
  .accordion_area {
    width: 530px;
  }
  .accordion_container01 {
    padding: 13px;
    width: 498px;
  }
  .terms__block,
  .terms__description {
    font-size: 12pt;
  }
}

/* .floating_area */
.floating_area {
  padding: 2vw 0 0;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  margin: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
.float_banner01 {
  max-width: 466px;
  width: 72%;
  margin: auto;
}
.float_banner02 {
  margin: 3vw auto 2vw;
  max-width: 466px;
  width: 72%;
}
@media screen and (min-width: 640px) {
  .floating_area {
    padding: 9px 0 0;
    width: 640px;
  }
  .float_banner02 {
    margin: 19px auto 12px;
  }
}