.content_outer{
  background-color: #ffc91f;
}
@media screen and (min-width:640px) {
  .content_outer{
    background-color: #ffc91f;
    background-image: url(../images/list_bg_obj_left.png), url(../images/list_bg_obj_right.png),
                      url(../images/list_bg_left.jpg), url(../images/list_bg_right.jpg);
    background-size: calc((616 * (100vw - var(--content_width)) / 2) / 1024) calc((243 * (100vw - var(--content_width)) / 2) / 1024),
                     calc((616 * (100vw - var(--content_width)) / 2) / 1024) calc((252 * (100vw - var(--content_width)) / 2) / 1024),
                     calc((100% - var(--content_width)) / 2) auto, calc((100% - var(--content_width)) / 2) auto;
    background-position: left top, right top, left center, right center;
  }
}


.section_wrapper.section1{
  position: relative;
  padding: calc((10 * var(--content_width)) / 375) 0 calc((290 * var(--content_width)) / 750);
  background-color: #a4d6c1;
  background-image: url(../images/list_bg1.jpg);
  background-position: top center;
  background-size: 100% auto;
}
.section_wrapper.section1 h1{
  position: relative;
  line-height: 0;
  margin-bottom: calc((20 * var(--content_width)) / 375);
  z-index: 5;
}
.section_wrapper.section1 .status_wrapper{
  display: flex;
  position: relateive;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
}
.section_wrapper.section1 .status_wrapper .status_block{
  position: relative;
  width: calc((716 * var(--content_width)) / 750);
  height: calc((376 * var(--content_width)) / 750);
  padding: calc((57 * var(--content_width)) / 350) 0 0 calc((72 * var(--content_width)) / 350);
  margin-bottom: calc((10 * var(--content_width)) / 375);
  background-image: url(../images/img_count_frame.png);
  background-size: 100% 100%;
}
.section_wrapper.section1 .status_wrapper .status_block.complete{
  background-image: none;
}
.section_wrapper.section1 .status_wrapper .status_block.complete::before{
  content: "";
  position: absolute;
  top: calc((-213 * var(--content_width)) / 750);
  left: calc((-17 * var(--content_width)) / 750);
  width: var(--content_width);
  height: calc((775 * var(--content_width)) / 750);
  background-image: url(../images/img_count_frame_complete.png);
  background-size: 100% 100%;
  pointer-events: none;
}
.section_wrapper.section1 .status_wrapper .status_block .status_count_img{
  position: relative;
  width: calc((190 * var(--content_width)) / 750);
  line-height: 0;
}

.section_wrapper.section4 {
  margin-top: calc((-240 * var(--content_width)) / 750);
  padding-top: calc((240 * var(--content_width)) / 750);
}
.section_wrapper.section4 .section_inner{
  position: relative;
  padding-top: calc((75 * var(--content_width)) / 750);
  padding-bottom: calc((180 * var(--content_width)) / 750);
  background-image: url(../images/img_list_precent_bg.jpg);
  background-size: 100% auto;
  background-position: top;
  background-repeat: repeat;
}
.section_wrapper.section4 .section_inner h2{
  position: absolute;
  top: calc((-240 * var(--content_width)) / 750);
  left: 0;
  width: 100%;
  line-height: 0;
}

.section_wrapper.section4 .status_text{
  position: relative;
  text-align: center;
  margin-bottom: calc((25 * var(--content_width)) / 375);
  font-size: calc((18 * var(--content_width)) / 375);
  line-height: 1.5em;
  z-index: 5;
}
.section_wrapper.section4 .period_block{
  width: calc((669 * var(--content_width)) / 750);
  line-height: 0;
  margin: 0 auto calc((25 * var(--content_width)) / 375);
}
.section_wrapper.section4 .present_notice{
  width: calc((600 * var(--content_width)) / 750);
  font-size: calc((28 * var(--content_width)) / 750);
  line-height: 1.2em;
  margin: calc((40 * var(--content_width)) / 750) auto 0;
  list-style: none;
  padding-left: 1em;
  color: #58250b;
  -webkit-text-stroke: calc((3 * var(--content_width)) / 375) #ffffff;
  text-stroke: calc((3 * var(--content_width)) / 375) #ffffff;
  paint-order: stroke;
}
.section_wrapper.section4 .present_notice li::before{
  content: "※";
  margin-left: -1em;
}
.section_wrapper.section4 .btn_present{
  display: block;
  width: calc((556 * var(--content_width)) / 750);
  height: calc((127 * var(--content_width)) / 750);
  line-height: 0;
  margin: calc((50 * var(--content_width)) / 750) auto 0;
  background-size: 100% 100%;
}
.section_wrapper.section4 .btn_present.disabled{
  background-image: url(../images/btn_present_disable.png);
  pointer-events: none;
}
.section_wrapper.section4 .btn_present.done{
  background-image: url(../images/btn_present_done.png);
  pointer-events: none;
}
.section_wrapper.section4 .btn_present.disabled img,
.section_wrapper.section4 .btn_present.done img{
  display: none;
}



.section_wrapper.section2{
  position: relative;
  padding: calc((55 * var(--content_width)) / 375) 0 calc((40 * var(--content_width)) / 375);
  background-color: #fff6c0;
  background-image: url(../images/img_line_effect1.png), url(../images/img_line_effect2.png);
  background-position: left bottom calc((25 * var(--content_width)) / 375), right calc((35 * var(--content_width)) / 375) bottom calc((70 * var(--content_width)) / 375);
  background-size: calc((120 * var(--content_width)) / 750) calc((124 * var(--content_width)) / 750), calc((82 * var(--content_width)) / 750) calc((103 * var(--content_width)) / 750);
}
.section_wrapper.section2 h2{
  position: absolute;
  top: calc((-55 * var(--content_width)) / 375);
  line-height: 0;
  width: 100%;
}
.section_wrapper.section2 .section_inner{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: -1px 0;
  padding: 1px 0;
}
.section_wrapper .list_img_outer{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.section_wrapper.section2 .list_img_outer{
  margin-bottom: calc((40 * var(--content_width)) / 375);
  height: calc((911 * var(--content_width)) / 750);
}
.section_wrapper.section4 .list_img_outer{
  font-size: calc((28 * var(--content_width)) / 750);
  height: calc((1000 * var(--content_width)) / 750 + 4em);
}
.section_wrapper .list_img_outer .list_img_wrapper{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: start;
  transition: left 0.5s;
}
.section_wrapper .list_img_outer.page2 .list_img_wrapper{ left: calc(-1 * var(--content_width)); }
.section_wrapper .list_img_outer.page3 .list_img_wrapper{ left: calc(-2 * var(--content_width)); }

.section_wrapper.section2 .list_img_outer .list_img_wrapper,
.section_wrapper.section4 .list_img_outer .list_img_wrapper{
  width: calc(3 * var(--content_width));
}
.section_wrapper .list_img_outer .list_img_wrapper .list_img_block{
  width: var(--content_width);
}
.section_wrapper .list_img_outer .list_img_wrapper .list_img_block .list_img{
  line-height: 0;
  margin: 0 auto;
}
.section_wrapper.section2 .list_img_outer .list_img_wrapper .list_img_block .list_img{
  width: calc((706 * var(--content_width)) / 750);
}
.section_wrapper.section4 .list_img_outer .list_img_wrapper .list_img_block .list_img{
  width: calc((720 * var(--content_width)) / 750);
}

.section_wrapper .list_img_outer .btn_list_prev,
.section_wrapper .list_img_outer .btn_list_next{
  position: absolute;
  top: calc((165 * var(--content_width)) / 375);
  width: calc((86 * var(--content_width)) / 750);
  height: calc((86 * var(--content_width)) / 750);
}
.section_wrapper .list_img_outer .btn_list_prev.disabled,
.section_wrapper .list_img_outer .btn_list_next.disabled{
  display: none;
}
.section_wrapper .list_img_outer .btn_list_prev{
  left: calc((5 * var(--content_width)) / 375);
}
.section_wrapper .list_img_outer .btn_list_next{
  right: calc((5 * var(--content_width)) / 375);
}

.section_wrapper.section2 .howto_text{
  width: calc((624 * var(--content_width)) / 750);
  line-height: 0;
  margin-bottom: calc((35 * var(--content_width)) / 375);
}
.section_wrapper.section2 .btn_login{
  width: calc((488 * var(--content_width)) / 750);
  line-height: 0;
}

.section_wrapper.section3{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  padding-bottom: calc((80 * var(--content_width)) / 375);
  background-color: #a4d6c1;
  background-image: url(../images/list_bg2.jpg);
  background-size: 100% auto;
  background-position: top calc((25 * var(--content_width)) / 375) center;
}
.section_wrapper.section3 h2{
  line-height: 0;
  margin-top: -1px;
  margin-bottom: calc((10 * var(--content_width)) / 375);
}
.section_wrapper.section3 .list_item_wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc((320 * var(--content_width)) / 375);
  gap: calc((25 * var(--content_width)) / 375);
  margin-bottom: calc((45 * var(--content_width)) / 375);
}
.section_wrapper.section3 .list_item_wrapper .btn_list_item{
  position: relative;
  width: calc((180 * var(--content_width)) / 750);
  height: calc((180 * var(--content_width)) / 750);
  line-height: 0;
}
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active{
  pointer-events: none;
}
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active::after{
  content: "";
  position: absolute;
  top: calc((-17 * var(--content_width)) / 750);
  left: calc((-17 * var(--content_width)) / 750);
  width: calc((214 * var(--content_width)) / 750);
  height: calc((214 * var(--content_width)) / 750);
  background-size: 100% 100%;
}
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active img{
  display: none;
}
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item1::after{ background-image: url(../images/btn_list1_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item2::after{ background-image: url(../images/btn_list2_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item3::after{ background-image: url(../images/btn_list3_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item4::after{ background-image: url(../images/btn_list4_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item5::after{ background-image: url(../images/btn_list5_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item6::after{ background-image: url(../images/btn_list6_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item7::after{ background-image: url(../images/btn_list7_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item8::after{ background-image: url(../images/btn_list8_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item9::after{ background-image: url(../images/btn_list9_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item10::after{ background-image: url(../images/btn_list10_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item11::after{ background-image: url(../images/btn_list11_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item12::after{ background-image: url(../images/btn_list12_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item13::after{ background-image: url(../images/btn_list13_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item14::after{ background-image: url(../images/btn_list14_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item15::after{ background-image: url(../images/btn_list15_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item16::after{ background-image: url(../images/btn_list16_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item17::after{ background-image: url(../images/btn_list17_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item18::after{ background-image: url(../images/btn_list18_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item19::after{ background-image: url(../images/btn_list19_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item20::after{ background-image: url(../images/btn_list20_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item21::after{ background-image: url(../images/btn_list21_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item22::after{ background-image: url(../images/btn_list22_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item23::after{ background-image: url(../images/btn_list23_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item24::after{ background-image: url(../images/btn_list24_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item25::after{ background-image: url(../images/btn_list25_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item.active.btn_list_item26::after{ background-image: url(../images/btn_list26_on.png); }
.section_wrapper.section3 .list_item_wrapper .btn_list_item27{
  position: relative;
  width: calc((222 * var(--content_width)) / 750);
  height: calc((201 * var(--content_width)) / 750);
  margin: calc((-16 * var(--content_width)) / 375) calc((-17 * var(--content_width)) / 375) calc((5 * var(--content_width)) / 375) calc((-4 * var(--content_width)) / 375);
  line-height: 0;
}
.section_wrapper.section3 .btn_top{
  width: calc((490 * var(--content_width)) / 750);
  line-height: 0;
}

.btn_apply{
  display: none;
  position: fixed;
  bottom: calc((20 * var(--content_width)) / 375);
  right: calc(((100% - var(--content_width)) / 2) + ((5 * var(--content_width)) / 375));
  width: calc((141 * var(--content_width)) / 750);
  line-height: 0;
  z-index: 100;
}
.btn_apply.active{
  display: block;
}

.modal_wrapper{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba( 0, 0, 0, 0.6 );
  z-index: 100;
  overflow: auto;
}
.modal_wrapper.active{
  display: block;
}
.modal_wrapper .modal_inner{
  position: relative;
  width: var(--content_width);
  height: 100%;
  margin: 0 auto;
  background-size: 100% auto;
  background-position: bottom center;
}
#modal_terms.modal_wrapper .modal_inner .terms_wrapper{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  padding: calc((35 * var(--content_width)) / 375) calc((20 * var(--content_width)) / 375) calc((15 * var(--content_width)) / 375);
  background-color: #ffffff;
  border-radius: calc((30 * var(--content_width)) / 375) calc((30 * var(--content_width)) / 375) 0 0;
  overflow: auto;
}
#modal_terms.modal_wrapper .modal_inner .terms_wrapper .terms_text{
  margin-bottom: calc((20 * var(--content_width)) / 375);
  font-size: calc((14 * var(--content_width)) / 375);
  line-height: 1.5em;
  color: #642800;
}
#modal_terms.modal_wrapper .modal_inner .terms_wrapper .terms_text p+p{
  margin-top: 0.5em;
}
.modal_wrapper .modal_inner .btn_close{
  display: block;
  width: calc((476 * var(--content_width)) / 750);
  margin: 0 auto;
}