@charset "Shift_JIS";

/* フォームの2番目の商品を非表示に */
.l-row>.l-col._m4:nth-of-type(2) {
  display: none;
}
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;
}
/* 上部へ戻るボタン、一旦非表示 */
.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;
}

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

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

.section_02 .section_02_anim {
  position: relative;
}

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

.section_02 .section_02_anim li {
  opacity: 0;
  transform: scale(0);
  -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(110px, -150px, 0px) scale(0);
}

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

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

.section_02 .section_02_anim.is-active li:nth-child(1) {
  animation: drawB 0.5s ease-in forwards;
}

.section_02 .section_02_anim.is-active li:nth-child(2) {
  animation: drawB 0.5s ease-in 0.5s forwards;
}

.section_02 .section_02_anim.is-active li:nth-child(3) {
  animation: drawB 0.5s ease-in 1.0s forwards;
}

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

.section_06 .section_06_anim {
  position: relative;
}

.section_06 .section_06_anim ul {
  position: absolute;
  bottom: 3%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
}

.section_06 .section_06_anim li {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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

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

.section_06 .section_06_anim.is-active li:nth-child(1) {
  animation: drawC 0.5s ease forwards;
}

.section_06 .section_06_anim.is-active li:nth-child(2) {
  animation: drawC 0.5s ease 0.6s forwards;
}

.section_06 .section_06_anim.is-active li:nth-child(3) {
  animation: drawC 0.5s ease 1.2s forwards;
}

.section_06 .section_06_anim .parts_04 {
  position: absolute;
  bottom: 33.5%;
  right: 25%;
}

@media screen and (max-width: 414px) {
  .section_06 .section_06_anim ul {
    width: 78%;
  }

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

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

  .section_06 .section_06_anim .parts_04 {
    width: 9%;
    bottom: 35%;
    right: 24%;
  }
}

.cta_area {
  position: relative;
}

.cta_area .cta_area_inner {
  position: absolute;
  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%;
}

.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;
}

.cta_area .cta_area_inner.is-active .cta_name {
  animation: scalAnim01 0.6s linear forwards;
}

.cta_area .cta_area_inner.is-active .cta_price {
  animation: scalAnim01 0.6s linear 0.5s forwards;
}

.cta_area .cta_area_inner .cta_btn {
  animation: scalAnim02 1.6s ease infinite;
}

@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_01e/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_01e/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_01e/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_01e/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%;
}

.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);
  }
}