@charset "Shift_JIS";


body {
  margin: 0;
}

/*
10pt {font-size:77%;}
12pt {font-size:85%;}
16pt {font-size:116%;}
22pt {font-size:161.6%;}
*/
header._simple {
  display: none;
}

.l-container {
  max-width: 767px;
}

.js-step-container {
  max-width: 767px;
}

/* ?????Ö?ß???{?^???A???U???\®? */
.c-pagetop {
  display: none !important;
}

section#stageMain {
  max-width: 767px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  font-size: 0;
  overflow: hidden;
}

section#stageMain img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  display: block;
}

section#stageMain .main_area {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 0;
  font-size: 0;
  position: relative;
}

/* mv */
section#stageMain .mv {
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  opacity: 0;
}

section#stageMain .mv .mv_anim {
  position: relative;
}

section#stageMain .mv .mv_anim .fv_logo {
  width: 21%;
  max-width: 160px;
  position: absolute;
  top: 1.4%;
  left: 0;
  right: 0;
  margin: auto;
  translate: 0px -20px;
  opacity: 0;
}

section#stageMain .mv .mv_anim .fv_main_copy {
  position: absolute;
  margin: auto;
  left: 0;
  max-width: 634px;
  top: 12.5%;
  right: 0;
}

section#stageMain .mv .mv_anim .fv_main_copy .fv_main_copy_inner {
  width: 85%;
  margin: auto;
  max-width: 634px;
  position: relative;
}

section#stageMain .mv .mv_anim .fv_main_copy .fv_main_copy_inner .parts_01 {
  translate: 0px 20px;
}

section#stageMain .mv .mv_anim .fv_main_copy .fv_main_copy_inner .parts_02 {
  position: absolute;
  top: -4%;
  left: 23.9%;
  width: 9.5%;
  max-width: 60px;
  scale: 1.4;
  opacity: 0;
}

section#stageMain .mv .mv_anim .fv_main_copy .fv_main_copy_inner .parts_03 {
  position: absolute;
  top: -3%;
  left: 78.9%;
  width: 17.8%;
  max-width: 112px;
  scale: 1.4;
  opacity: 0;
}

section#stageMain .mv .mv_anim .fv_main_copy .fv_main_copy_inner .parts_04 {
  width: 75%;
  position: absolute;
  top: 43%;
  left: 24%;
  overflow: hidden;

}

section#stageMain .mv .mv_anim .fv_main_copy .fv_main_copy_inner .parts_04 img {
  translate: -400px 0px;
  opacity: 0;
  width: 100%;
}

section#stageMain .mv .mv_anim .fv_main_img {
  position: absolute;
  top: 25%;

}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner {
  position: relative;
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_main_bg {
  display: flex;
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_main_bg img {
  width: 50%;
  opacity: 0;
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_main_bg img:nth-of-type(1) {
  transform: translate(-30px, 0px);
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_main_bg img:nth-of-type(2) {
  transform: translate(30px, 0px);
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .main_img {
  max-width: 503px;
  width: 65%;
  position: absolute;
  top: 21%;
  left: 26.5%;
  translate: 0px 20px;
  opacity: 0;
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_sub_img {
  position: absolute;
  top: 16%;
  max-width: 197px;
  left: 7%;
  width: 26%;

}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_sub_img .fv_sub_img_inner {
  position: relative;
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_sub_img .fv_sub_img_inner .parts_01 {
  width: 39%;
  max-width: 72px;
  position: absolute;
  left: 0;
  right: 0;
  top: -9%;
  margin: auto;
  translate: 0px -10px;
  opacity: 0;
}

section#stageMain .mv .mv_anim .fv_main_img .fv_main_img_inner .fv_sub_img .fv_sub_img_inner .parts_02 {
  translate: 0px 10px;
  opacity: 0;
}

section#stageMain .mv .mv_anim .fv_sub_copy {
  max-width: 552px;
  position: absolute;
  top: 61.5%;
  width: 80%;
  left: 0;
  margin: auto;
  right: 0;
  opacity: 0;
}

section#stageMain .mv .fv_btn {
  position: absolute;
  top: 87%;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 717px;
  opacity: 0;
  translate: 0px 50px;
}

@media screen and (max-width: 414px) {
  section#stageMain .mv .fv_btn {
    top: 87%;
  }
}

section#stageMain .section_01 {
  margin: 4% auto 0;
}

.main_area .ttl_area {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  overflow: hidden;
}

.section_02 .ttl_area {
  width: 69%;
  max-width: 537px;
  top: 4.3%;
}

.section_02 .ttl_area .ttl_area_text {
  opacity: 0;
}

.section_02 .ttl_area .ttl_area_line {
  margin-top: 5px;
  display: inline-block;
  overflow: hidden;
}

.section_02 .ttl_area .ttl_area_line img {
  translate: -400px 0px;
  width: 100%;
}

.section_02 .section_02_anim {
  position: absolute;
  margin: auto;
  top: 22%;
  left: 0;
  right: 0;
  text-align: center;
}

.section_02 .section_02_anim .img_bin {
  width: 25%;
  margin: 0 auto 30%;
  translate: 0 17%;
  opacity: 0;
}

.section_02 .section_02_anim .point_area {
  position: relative;
}

.section_02 .section_02_anim .point_area>img {
  width: 36%;
  margin: 0 auto;
  opacity: 0;
}

.section_02 .section_02_anim ul {
  position: absolute;
  top: 106%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
}

.section_02 .section_02_anim li {
  opacity: 0;
  translate: 0 10px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.section_02 .section_02_anim li:nth-child(1),
.section_02 .section_02_anim li:nth-child(3) {
  margin-top: -2%;
}

.section_02 .section_02_anim li:nth-child(2) {
  margin: 0 4%;
}

.section_02 .section_02_anim li:nth-child(1) {
  transform: translate3d(0px, 30px, 0px);
}

.section_02 .section_02_anim li:nth-child(2) {
  transform: translate3d(0px, 40px, 0px);
}

.section_02 .section_02_anim li:nth-child(3) {
  transform: translate3d(0px, 30px, 0px);
}

@media screen and (max-width: 414px) {
  .section_02 .section_02_anim ul {
    width: 80%;
  }
}

.section_04 .ttl_area {
  top: 6.3%;
  width: 49%;
}

.section_04 .ttl_area .ttl_area_text {
  opacity: 0;
}

.section_04 .ttl_area .ttl_area_line {
  width: 90%;
  margin: 5px auto 0;
  display: inline-block;
  overflow: hidden;
}

.section_04 .ttl_area .ttl_area_line img {
  translate: -400px 0px;
}

.section_04 .section_04_anim {
  position: absolute;
  margin: auto;
  top: 62%;
  left: 0;
  right: 0;
  text-align: center;
}

.section_04 .section_04_anim_inner {
  position: relative;
}

.section_04 .section_04_anim_inner .parts_01 {
  position: absolute;
  top: 9%;
  left: 11%;
  width: 14%;
  translate: -100px -15px;
  rotate: -22deg;

}

.section_04 .section_04_anim_inner .parts_02 {
  width: 59%;
  margin-left: 11%;
  margin-top: 10%;
  opacity: 0;
  translate: 0 40px;
}

.section_04 .section_04_anim_inner .parts_03 {
  width: 25%;
  top: 27%;
  left: 65%;
  position: absolute;
  opacity: 0;
  translate: 0 40px;
}

.section_04 .section_04_anim_02 {
  position: absolute;
  margin: auto;
  top: 34%;
  left: 0;
  right: 0;
}

.section_04 .section_04_anim_02_inner {
  position: relative;
}

.section_04 .section_04_anim_02_inner .parts_01,
.section_04 .section_04_anim_02_inner .parts_02 {
  width: 50%;
  margin-left: 14%;
  opacity: 0;
}

.section_04 .section_04_anim_02_inner .parts_02 {
  position: absolute;
  top: 0;
  translate: 0 40px;
}

.section_04 .section_04_anim_02_inner .parts_03 {
  position: absolute;
  top: 0%;
  right: 18%;
  width: 15%;
  opacity: 0;
}

.section_04 .section_04_anim_02_inner .parts_04 {
  top: 67%;
  right: 17.5%;
  width: 32%;
  position: absolute;
  translate: 0 40px;
  opacity: 0;
}

.section_05 .section_05_anim {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
}

.section_05 .section_05_anim .section_05_anim_inner {
  position: relative;
}

.section_05 .section_05_anim .section_05_anim_inner .parts_01 {
  width: 32%;
  position: absolute;
  top: 25.5%;
  left: 21%;
  opacity: 1;
  scale: 1;
}

.section_05 .section_05_anim .section_05_anim_inner .section_05_anim_text_list {
  padding: 70% 0 0;
}

.section_05 .section_05_anim .section_05_anim_inner .section_05_anim_text_list img {
  opacity: 1;
  translate: 0;
}

.section_05 .section_05_anim .section_05_anim_inner .parts_02 {
  width: 75%;
  margin: 0 auto 8px;
}

.section_05 .section_05_anim .section_05_anim_inner .parts_03 {
  width: 43%;
  margin: 0 auto 8px;
}

.section_05 .section_05_anim .section_05_anim_inner .parts_04 {
  width: 90%;
  margin: 0 auto 8px;
}

.section_05 .section_05_anim .section_05_anim_inner .parts_05 {
  width: 52%;
  margin: auto;
}

.section_05 .section_05_anim .section_05_anim_inner .parts_06 {
  width: 42%;
  margin: auto;
  padding-top: 13%;
  opacity: 1;
}

.section_06 .ttl_area {
  top: 5.8%;
  width: 76%;
}

.section_06 .ttl_area .ttl_area_text {
  opacity: 0;
}

.section_06 .ttl_area .ttl_area_line {
  margin: 5px auto 0;
  display: inline-block;
  overflow: hidden;
}

.section_06 .ttl_area .ttl_area_line img {
  translate: -400px 0px;
  width: 100%;
}

.section_06 .section_06_anim_01 {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
}

.section_06 .section_06_anim_01_inner {
  position: relative;
}

.section_06 .section_06_anim_01_inner .parts_01 {
  width: 61%;
  margin: 0 auto;
  opacity: 0;
}

.section_06 .section_06_anim_01_inner .parts_02 {
  width: 62%;
  margin-top: 71%;
  margin-left: 13%;
  opacity: 0;
  scale: 1.4;
}

.section_06 .section_06_anim_01_inner .parts_03 {
  width: 66%;
  margin-top: 5px;
  margin-left: -11.5%;
  display: inline-block;
  overflow: hidden;
}

.section_06 .section_06_anim_01_inner .parts_03 img {
  translate: -400px 0px;
}

.section_06 .section_06_anim_02 {
  position: absolute;
  top: 0;
  left: 0;
}

.section_06 .section_06_anim_02_inner {
  position: relative;
}

.section_06 .section_06_anim_02_inner .section_06_anim_02_bg {
  display: flex;
}

.section_06 .section_06_anim_02_inner .section_06_anim_02_bg img {
  width: 50%;
}

.section_06 .section_06_anim_02_inner .parts_05 {
  opacity: 0;
  translate: -200px 0px;
}

.section_06 .section_06_anim_02_inner .parts_06 {
  opacity: 0;
  translate: 200px 0px;
}

.section_06 .section_06_anim_02 ul {
  width: 78%;
  position: absolute;
  top: 153%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
}

.section_06 .section_06_anim_02 li {
  /*opacity: 0;*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
}

.section_06 .section_06_anim_02 li>img {
  translate: 0 70px;
  rotate: 1760deg;
  opacity: 0;
}

.section_06 .section_06_anim_02 li .icon_text {
  position: absolute;
  top: 0;
  margin: auto;
  left: 0;
  right: 0;
  opacity: 0;
  translate: 0 40px;
}

.section_06 .section_06_anim_02 li:nth-child(1),
.section_06 .section_06_anim_02 li:nth-child(3) {
  margin-top: -20%;
}

.section_06 .section_06_anim_02 li:nth-child(2) {
  margin: 0 1.5%;
}

.section_06 .section_06_anim_02 li:nth-child(1) .icon_text {
  width: 59%;
  padding-top: 40%;
}

.section_06 .section_06_anim_02 li:nth-child(2) .icon_text {
  width: 77%;
  padding-top: 33%;
}

.section_06 .section_06_anim_02 li:nth-child(3) .icon_text {
  width: 50%;
  padding-top: 50%;
}

.section_06 .section_06_anim_02 .parts_07 {
  position: absolute;
  top: 30.5%;
  right: 28%;
  width: 34%;
  z-index: 1;
  opacity: 0;
  translate: 0px 50px;
}

@media screen and (max-width: 414px) {}


.section_08 .ttl_area {
  top: 5.8%;
  width: 74%;
}

.section_08 .ttl_area .ttl_area_text {
  opacity: 0;
}

.section_08 .ttl_area .ttl_area_line {
  margin: 5px auto 0;
  width: 68%;
  display: inline-block;
  overflow: hidden;
}

.section_08 .ttl_area .ttl_area_line img {
  translate: -400px 0px;
}

.section_08 .section_08_anim_01 {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
}

.section_08 .section_08_anim_01_inner {
  position: relative;
  padding-top: 26%;
}

.section_08 .section_08_anim_01_inner .parts_01 {
  width: 74%;
  margin: auto;
  opacity: 0;
  translate: 0 30px;
}

.section_08 .section_08_anim_01_inner .parts_02 {
  width: 70.5%;
  margin: auto;
  position: absolute;
  top: 27%;
  left: 14%;
  opacity: 0;
}

.section_08 .section_08_anim_01_inner .parts_03 {
  width: 48.5%;
  margin: auto;
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  opacity: 0;
  scale: 1.4;
}

.section_08 .section_08_anim_01_inner .parts_04 {
  width: 35.5%;
  margin: auto;
  position: absolute;
  top: 28%;
  left: 60%;
  opacity: 0;
  translate: 0 30px;
}

.section_08 .section_08_anim_02 {
  width: 78.4%;
  position: absolute;
  top: 23.5%;
  left: 21.5%;
}

.section_08 .section_08_anim_02_inner {
  position: relative;
  padding-top: 0;
}

.section_08 .section_08_anim_02_inner .graph {
  display: flex;
  align-items: end;
  overflow: hidden;
}

.section_08 .section_08_anim_02_inner img {
  width: 9.9%;
  margin-right: 8.5%;
  translate: 0 40px;
  opacity: 0;
}

.section_08 .section_08_anim_02_inner .parts_08 {
  margin-right: 9.4%;
}

.section_08 .section_08_anim_02_inner .parts_09 {
  margin-right: 0;
}

.section_08 .section_08_anim_02_inner .parts_10 {
  position: absolute;
  top: 0;
  left: 13%;
  width: 66%;
  margin-right: 0;
  translate: 0 40px;
  opacity: 0;
}

.section_10 .cta_bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}

.section_10 .ttl_area {
  position: relative;
  width: 74%;
  padding-top: 10%;
  padding-bottom: 9%;
}

.section_10 .ttl_area .ttl_area_text {
  opacity: 0;
}

.section_10 .ttl_area .ttl_area_line {
  margin: 5px auto 0;
  display: inline-block;
  overflow: hidden;
}

.section_10 .ttl_area .ttl_area_line img {
  translate: -400px 0px;
  width: 100%;
}

.section_10 .text_area {
  position: relative;
  padding-top: 10%;
}

.section_10 .text_area .parts_01 {
  margin: 0 auto 16%;
  width: 50%;
  opacity: 0;
}

.section_10 .text_area .parts_02 {
  position: absolute;
  width: 22%;
  top: 38.8%;
  left: 13%;
  z-index: -1;
  opacity: 0;
  rotate: 470deg;
}

.section_10 .text_area .parts_03 {
  margin: 0 auto;
  width: 84%;
  opacity: 0;
  translate: 0 30px;
}

.section_10 .cta_text_area {
  padding-top: 25%;
}

.section_10 .cta_text_area .parts_01 {
  width: 78%;
  margin: 0 auto 5%;
  opacity: 0;
}

.section_10 .cta_text_area .parts_02 {
  width: 72%;
  margin: 0 auto;
  opacity: 0;
  translate: 0px 40px;
}

.section_10 .cta_text_area .parts_03 {
  width: 87%;
  margin: 2% auto 3%;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.section_10 .cta_text_area .parts_03 li img {
  opacity: 0;
}

.section_10 .cta_text_area .parts_04 {
  width: 83%;
  margin: 0 auto 2.3%;
  opacity: 0;
}

.section_10 .cta_present_area {
  width: 90%;
  margin: 0 auto;
  position: relative;
}

.section_10 .cta_present_area .parts_05 {
  opacity: 0;
  translate: 0px 40px;
}

.section_10 .cta_present_area .parts_06 {
  position: absolute;
  top: -17%;
  left: -3%;
  width: 19%;
  margin: 0 auto;
  opacity: 0;
  scale: 1.4;
}

.section_10 .cta_present_area .parts_07 {
  width: 22%;
  margin: 4% auto;
  opacity: 0;
}

.cta_area {
  position: relative;
  margin-bottom: 6%;
}

.cta_area .cta_area_inner {
  position: relative;
  top: 2%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.cta_area .cta_area_inner .cta_name {
  margin: 0 auto 4%;
}

.cta_area .cta_area_inner .cta_price {
  margin: 0 auto 2%;
}

.cta_area .cta_area_inner .cta_present {
  margin: -6% auto 3%;
}

.cta_area .cta_area_inner .icon_arrow {
  margin: 0 auto 3%;
}

.cta_area .cta_area_inner .cta_btn {
  margin: 0 auto 4%;
  opacity: 0;
  scale: 1;
}

.cta_area .cta_area_inner .cta_btn img {
  margin: 0 auto;
}

.cta_area .cta_area_inner .cta_att img {
  margin: 0 auto;
}

.cta_area .cta_area_inner .cta_anim {
  margin: 0 auto;
}

@media screen and (max-width: 414px) {
  .cta_area .cta_area_inner .cta_name {
    width: 78%;
  }

  .cta_area .cta_area_inner .cta_price {
    width: 88%;
  }

  .cta_area .cta_area_inner .icon_plus {
    width: 6%;
    margin: 0 auto;
  }

  .cta_area .cta_area_inner .cta_present {
    width: 92%;
    margin: -6% 0 3% 2%;
  }

  .cta_area .cta_area_inner .icon_arrow {
    width: 20%;
  }

  .cta_area .cta_area_inner .cta_btn {
    width: 86%;
  }

  .cta_area .cta_area_inner .cta_att {
    width: 80%;
    margin: 0 auto;
  }
}


.check_area {
  position: relative;
  width: 100%;
}

.cd_area_01 {
  position: absolute;
  top: 19.5%;
  left: 14.9%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.cd_area_02 {
  position: absolute;
  top: 33.2%;
  left: 15%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.cd_item {
  position: relative;
  display: block;
  padding-top: 11.22%;
  margin-bottom: 7.5%;
  width: 11.22%;

}

.cd_item::before {

  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
}

.cd_area_01 .cd_item::before {
  background: url("/articles_c/atc_pr_nm_r_01d/img/icon_check_y.png") 0% 100%/62px 31px no-repeat;
  background-size: 65px;
}

.cd_area_02 .cd_item::before {
  background: url("/articles_c/atc_pr_nm_r_01d/img/icon_check_g.png") 0% 100%/62px 31px no-repeat;
  background-size: 65px;
}

@media screen and (max-width: 414px) {
  .cd_area_01 .cd_item::before {
    background: url("/articles_c/atc_pr_nm_r_01d/img/icon_check_y.png") 0% 100%/45px 34px no-repeat;
    background-size: 33px;
  }

  .cd_area_02 .cd_item::before {
    background: url("/articles_c/atc_pr_nm_r_01d/img/icon_check_g.png") 0% 100%/45px 34px no-repeat;
    background-size: 33px;
  }
}

.cd_area_01.is-active .cd_item:nth-child(1):before {
  animation: drawA 0.6s ease-in forwards;
}

.cd_area_01.is-active .cd_item:nth-child(2):before {
  animation: drawA 0.6s ease-in 0.5s forwards;
}

.cd_area_01.is-active .cd_item:nth-child(3):before {
  animation: drawA 0.6s ease-in 1.0s forwards;
}

.cd_area_01.is-active .cd_item:nth-child(4):before {
  animation: drawA 0.6s ease-in 1.5s forwards;
}

.cd_area_02.is-active .cd_item:nth-child(1):before {
  animation: drawA 0.6s ease-in forwards;
}

.cd_area_02.is-active .cd_item:nth-child(2):before {
  animation: drawA 0.6s ease-in 0.5s forwards;
}

.cd_area_02.is-active .cd_item:nth-child(3):before {
  animation: drawA 0.6s ease-in 1.0s forwards;
}

.cd_area_02.is-active .cd_item:nth-child(4):before {
  animation: drawA 0.6s ease-in 1.5s forwards;
}

#fvbtn.is-passive {
  opacity: 0;
  transition: opacity 1s;
}

#fvbtn.is-active {
  opacity: 1;
}

.floating-banner {
  position: fixed;
  bottom: 2%;
  left: 0;
  text-align: center;
  right: 0;
  margin: auto;
  width: 72%;
  z-index: 2;
}

.floating-banner a {
  display: inline-block;
  transition: scale 0.2s;
}

.floating-banner a:hover {
  scale: 1.05;
}

.floating-banner img {
  max-width: 100%;
}

@media screen and (max-width: 414px) {
  .floating-banner {
    bottom: 2%;
    width: 100%;
  }
}

@keyframes drawA {

  from,
  5% {
    width: 0;
    height: 100%;
  }

  90%,
  to {
    width: 100%;
    height: 100%;
  }
}

@keyframes drawB {

  from,
  5% {
    opacity: 0;
  }

  90%,
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes drawC {

  from,
  5% {
    opacity: 0;
  }

  90%,
  to {
    opacity: 1;
  }
}

@keyframes scalAnim01 {

  from,
  5% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  90%,
  to {
    transform: scale(1);
  }
}

@keyframes scalAnim02 {

  from,
  5% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.97);
  }

  90%,
  to {
    transform: scale(1);
  }
}