@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&family=Zen+Antique&display=swap');
html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

article,header,footer,aside,figure,figcaption,nav,section {
  display: block;
}

body {
  font-size: 62.5%;
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

ol,
ul {
  list-style: none;
  list-style-type: none;
}

* {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

video {
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
  border: none;
  vertical-align: bottom;
}

/*==================================
レイアウト
==================================*/
.page_wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.contents_wrap {
  width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

.section01,
.section02,
.section03,
.section04,
.section05,
.section06,
.section07,
.section08,
.section09,
.section10,
.section11,
.section12,
.section12b,
.section13,
.section14,
.section15,
.section16,
.section17,
.section18,
.section19,
.section20,
.section21,
.section22,
.section23,
.section24,
.section25,
.section26,
.section27 {
  position: relative;
}

.img_box img {
  width: 100%;
}

/*==================================
ポジション
==================================*/
.efocube-floating-box {
    z-index: 2 !important;
}


#fv_movie {
  position: relative;
  z-index: 3;
}
#fv_movie .ab {
  right: 0;
  margin: auto;
  top: -50px;
  width: 100px;
}
#fv_movie article {
  height: 440px;
  overflow: hidden;
}
#fv_movie video {
  width: 100%;
}

.fv video {
  position: relative;
  width: 100%;
}

.rel {
  position: relative;
}

.ab {
  position: absolute;
  left: 0;
}



/*==================================
area1
==================================*/
section.area1 {
  background: url("../../images/lp/sec1_bk.png") no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 3;
  position: relative;
  padding-top: 170px;
  padding-bottom: 30px;
}
section.area1 img.label {
  top: -7%;
}
section.area1 .cta {
  margin: auto;
  margin-top: -500px;
}

.area1 .cta article {
  position: relative;
  margin: 0 auto;
  width: 1012px;
}

.area1 .cta article a {
  position: absolute;
  width: calc(100% * 750 / 1012);
  top: calc(100% * 315 / 513);
  left: calc(100% * 123 / 1012);
}

.area1bk {
  width: 27%;
}
section.area1 .area1bk1 {
  top: 620px;
}
section.area1 .area1bk2 {
  top: 670px;
  margin: auto;
  left: 0;
  right: -20%;
}

section.area1 .area1bk3 {
  top: 1070px;
  margin: auto;
  left: -20%;
  right: 0;
}

section.area1 .area1bk4 {
  left: auto;
  right: -10px;
  bottom: 0;
}

section.area1 p {
  color: #32180c;
  font-size: 17px;
  line-height: 150%;
  font-weight: bold;
  padding-top: 50px;
  z-index: 10;
}

/* area1_counter */
.area1_counter {
  overflow: hidden;
  position: relative;
}
.area1 .posi_bk {
  position: absolute;
  width: 100%;
  max-width: 1760px;
  top: 33%;
  left: 50%;
  transform: translate(-50%, 0);
}
.area1 .posi_bk img {
  object-fit: cover;
  width: 100%;
  height: 1000px;
}

.area1_counter .posi_01 {
  position: absolute;
  bottom: 20%;
right: 18%;
}

.area1_counter .counterup {
  font-family:"Zen Antique", serif !important;
  font-weight: normal;
  font-size: 104px;
  color: #b50101;
}
.area1_counter .counterup .counterup-formatting-mark {
  font-size: 80px;
  letter-spacing: -0.4rem;
}

/* area1 満足度 */
.area1_percent .posi_01 {
  width: 52%;
  margin-top: 30px;
}

.area1_percent .heigt {
  height: 400px;
  margin-top: 50px;
}
.area1_percent .posi_02 {
  position: absolute;
  bottom: 10.101652%;
  right: 27px;
  max-width: 48%;
}
.area1_percent .posi_03 {
  position: absolute;
  bottom: 3.1016518424%;
  right: 0;
  max-width: 55%;
}
.area1_percent .posi_02 .svg_wrap,
.area1_percent .posi_03 .svg_wrap {
  position: relative;
  width: 100%;
}
.area1_percent .posi_02 .circlegraf01,
.area1_percent .posi_03 .circlegraf01 {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.area1_percent .posi_02 .circlegraf01 circle {
  stroke: #b50101;
  fill: none;
  stroke-dashoffset: 100.68;
  stroke-width: 25px;
  stroke-dasharray: 1162;
}
.area1_percent .posi_03 .circlegraf01 circle {
  stroke: #b50101;
  fill: none;
  stroke-dashoffset: 100.68;
  stroke-width: 3px;
  stroke-dasharray: 1162;
}
.area1_percent .posi_02 .circlegraf01 .circleTrigger,
.area1_percent .posi_03 .circlegraf01 .circleTrigger {
  opacity: 0;
}
.area1_percent .posi_02 .circlegraf01 .circleTrigger.move,
.area1_percent .posi_03 .circlegraf01 .circleTrigger.move {
  opacity: 1;
  animation: circleAnim 1.5s forwards;
}
@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 1162;
  }
  99.9%,
  to {
    stroke-dasharray: 1162 1162;
  }
}
.area1_percent .posi_08 {
  position: absolute;
  width: 26%;
  bottom:26%;
  right: 110px;
}

.area1_percent .sec07no_Trigger {
  transition: opacity 1s, transform 0.3s;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
}
.area1_percent .sec07no_Trigger.move {
  opacity: 1;
  transform: scale(1);
}

/*==================================
area2
==================================*/
section.area2 {
  position: relative;
  z-index: 3;
}
section.area2 .video_area {
  overflow: hidden;
  height: 600px;
  position: relative;
}
section.area2 .video_area video {
  width: 100%;
}

section.area2 .video_area div {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 90px;
}
section.area2 .video_area div img {
  display: block;
  margin: 0 auto;
}

/*==================================
area3
==================================*/
.area3 {
  background: url("../../images/lp/sec3_bk.png") no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 20px 0px;
  padding-bottom: 200px;
  position: relative;
  z-index: 5;
}

.area3 .package {
  margin-top: -210px;
  position: relative;
}
.area3 .package .pack {
  width: 40%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

section.area3 .hand {
  position: absolute;
  left: 0;
  right: -950px;
  top: 37%;
  margin: auto;
  width: 700px;
  z-index: 0;
}

section.area3 .contents_wrap {
  z-index: 1;
  position: relative;
}

/* 29カウント* */
.section_29count {
  position: relative;
}
.section_29count .area3_title {
  position: absolute;
  width: calc(100% * 617 / 680);
  top: calc(100% * 185 / 767);
  left: calc(100% * 42 / 680);
}
.section_29count .posi_05 {
  position: absolute;
  bottom: 14%;
  left: 13%;
}
#count02 .count-size {
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  font-weight: bold;
  font-size: 250px;
  color: #b50101;
}

/*==================================
area4
==================================*/
section.area4 article {
  padding: 50px 0;
  position: relative;
}
section.area4 article .area4_title {
  position: absolute;
  width: calc(100% * 680 / 1222);
  top: calc(100% * 146 / 1000);
  left: calc(100% * 265 / 1222);
}
section.area4 article img {
  display: block;
  margin: 0 auto;
}

section.area4 {
  position: relative;
  z-index: 4;
}

section.area3 .posi_01 {

  right: 0;
  margin: auto;
  width: 75%;
}

section.area5 .posi_02 {
  top: -150px;
  left: auto;
  right: 0%;
  margin: auto;
  width: 25%;
}

#area4_video-area {
backgeound-color: #FFFACD;
    position: relative;
    z-index: 2;
    top: -30vh;
    height: 100vh;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    filter: hue-rotate(211deg) opacity(60%) saturate(234%);
}

#area4_video {
    min-height: 100%;
    min-width: 100%;
background-color:#FFFACD;
    position: absolute;
    right: 0;
    left: 0;
/*    top: -30vh;*/
    bottom: 0;
    height: 190vh;
    overflow: hidden;
}

#sample_form_area {
 position: relative;
z-index: 2;
}
.end_img {
    position: relative;
    z-index: 1;
    background: white;
}
.end_img img {
    display: block;
    margin: 0 auto;
}

/*==================================
area5
==================================*/
section.area5 {
  padding-bottom: 270px;
  z-index: 4;
  position: relative;
  background: url("../../images/lp/area5bk.png") no-repeat;
  background-position: center top;
  background-size: cover;
  padding: 80px 0 260px 0;
}

/* スライダー */
.area5 .contents_wrap {
  overflow: visible;
}
.area5 .slider {
  position: relative;
  padding-top: 15px;
}
.area5 .slider_img {
  margin: 0 11px;
}
.area5 button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.area5 button.slick-prev {
  background: url("../../images/lp/back.png") no-repeat;
  overflow: hidden;
  text-indent: 999%;
  white-space: nowrap;
  height: 64px;
  width: 64px;
  position: absolute;
  bottom: 30%;
  left: -3%;
  z-index: 3;
}
.area5 button.slick-next {
  background: url("../../images/lp/next.png") no-repeat;
  overflow: hidden;
  text-indent: 999%;
  white-space: nowrap;
  height: 64px;
  width: 64px;
  position: absolute;
  bottom: 30%;
  right: -1%;
  z-index: 3;
}
.area5 p {
  margin-top: 20px;
  font-size: 1.2rem;
  color: #32180c;
}

/*==================================
area6
==================================*/
section.area6 {
  padding: 70px 0;
  background: url("../../images/lp/end_cta_bk.png") no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 4;
}

section.area6 .end_cta {
  position: relative;
  width: 1012px;
  margin: 0 auto;
  margin-top: -300px;
}

section.area6 .end_cta article {
  position: relative;
  margin: 0 auto;
  width: 1012px;
}

section.area6 .end_cta .area6_text {
  position: absolute;
  width: calc(100% * 385 / 1012);
  top: calc(100% * 182 / 657);
  left: calc(100% * 132 / 1012);
}

section.area6 .end_cta .tp {
  position: absolute;
    top: 0;
  left: 0;
}
section.area6 .end_cta a {
  position: absolute;
  width: calc(100% * 770 / 1012);
  left: 0;
  right: 0;
  bottom: 11%;
  margin: auto;
}

/*==================================
CTA動き
==================================*/
a.animation img {
  display: block;
  margin: 0 auto;
  animation: poyo2 2.5s linear 0.5s infinite forwards;
  transform-origin: 50% 50%;
}
@keyframes poyo2 {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
}

/*==================================
フッター追従バナー
==================================*/
/*リンクを右下に固定*/
#to_cv {
  position: fixed;
  right: 0;
  bottom: 10px;
  z-index: 5;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateX(300px);
}

@media screen and (max-width: 640px) {
  #to_cv {
    width: 20%;
  }
}

/*　上に上がる動き　*/

#to_cv.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*　下に下がる動き　*/

#to_cv.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(300px);
  }
}




.fv-area {
max-width: 100%;
    overflow: hidden;
    position: relative;
  background: url(../images/fv_bk.jpg) center top repeat-x;
  height: 1166px;
  background-size: 2000px auto;
    z-index: 3;
}

.fv-area .fv_float {
position: absolute;
    right: 0;
    left: 0;
    top: 0;
    margin: auto;
    background: url(../images/float_shijimi.png) center top repeat-x;
    height: 1166px;
    background-size: 2000px auto;

}


.fv_btn {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom:22%;
width: 482px;
}






/*-fade control-*/

.scroll_fadein{
  opacity: 0;
}
.fadein_animation_start{
  /* キーフレームアニメーションを指定*/
  animation-name: fadein_animation;
  /* アニメーションの開始時間の遅延*/
  animation-delay: 0.3s;
  /* アニメーションの時間を指定*/
  animation-duration: 1s;
  /*アニメーション再生後のスタイルを指定*/
  animation-fill-mode: both;
}
@keyframes fadein_animation{
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}

.slidedown{
  transform: translateY(-50px);
transition-delay: 1.8s;
}