@charset "UTF-8";

/*----------------------------------------
general
----------------------------------------*/


html{
  font-family: "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  font-size: 62.5%;
  line-height: 1.6;
  color: #181d20;
  scroll-behavior: smooth;
}

body {
	background: #fff;
}


#wrapper img {
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	display: block;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}
#wrapper a {
	display: block;
}

#wrapper ul,
#wrapper dl,
#wrapper ol{
  list-style: none;
}
#wrapper ul li,
#wrapper dl dt,
#wrapper dl dd,
#wrapper ol li{
	line-height: 0;
	font-size: 0;
}

#wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
#wrapper *{
  position: relative;
  box-sizing: border-box;
}

/*============================
#wrapper
============================*/
#wrapper .anime-item{
  position: absolute;
  top:0;
  left:0;
  z-index:2;
}

/*============================
#fv
============================*/

#wrapper #fv .fv-anime01 {
  position: absolute;
  width: calc(746/750*100%);
  top: 3%;
  left: calc(2/750*100%);

  z-index:5;

}
#wrapper #fv .fv-anime02 {
  top: -5%;
  left: 0;
}
#wrapper #fv .fv-anime-front01 {
  position: absolute;
  left:0%;
  top:2.8%;
  width: calc(748/750*100%);
  z-index: 4;
}
#wrapper #fv .fv-anime03 {
  position: absolute;
  width: calc(555/750*100%);
  top: 92.5%;
  left: calc(97.5/750*100%);


}

/*============================
#intro
============================*/
#wrapper #intro {
  background-color: #000;
}

#wrapper #intro .intro-anime01 {
  width: calc(411/750*100%);
  left: 40.5%;
  top: 19%;
}
#wrapper #intro .intro-anime02 {
  position: absolute;
  width: calc(650/750*100%);
  top: 0%;
  left: calc(50/750*100%);


}
#wrapper #intro .intro-anime03 {
  width: calc(319/750*100%);
  top: 22%;
  left:calc(215.5/750*100%);

}
#wrapper #intro .intro-anime04 {
  width: calc(325/750*100%);
  top: 22.5%;
  left: 4.5%;
}
#wrapper #intro .intro-anime05 {
  width: calc(333/750*100%);

  top: 22.5%;
  left: 51.5%;
}

/*============================
.offer
============================*/
#wrapper .offer .offer-anime{
  position: absolute;
  width: calc(473/750*100%);
  left: 28%;
  top: 15%;
  z-index: 3;
}
#wrapper .offer .btn-offer {
  position: absolute;
  width: calc(651/750*100%);
  top: 64%;
  left: calc(49.5/750*100%);
  z-index: 2;
  animation: pulse 5s ease-in-out 1s infinite;
}


@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
  100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }
}


/*============================
#onayami
============================*/

#wrapper #onayami .onayami-anime01 {
  width: calc(45/750*100%);
  top: 2.4%;
  left: 37.5%;
}
#wrapper #onayami .onayami-anime02 {
  width: calc(43/750*100%);
  top: 2.4%;
  left: 91.5%;
}
#wrapper #onayami .onayami-anime03 {
  width: calc(362/750*100%);
  top: 2.4%;
  left: 33.5%;
}
#wrapper #onayami .onayami-anime04 {
  width: calc(458/750*100%);
  top: 2.4%;
  left: 3.6%;
}
#wrapper #onayami .onayami-anime05 {
  width: calc(609/750*100%);
  top: 2.4%;
  left: 15.9%;
}
#wrapper #onayami .onayami-anime06 {
  width: calc(45/750*100%);
  top: 13.1%;
  left: 91%;
}
#wrapper #onayami .onayami-anime07 {
  width: calc(52/750*100%);
  top: 13.1%;
  left: 1.8%;
}
#wrapper #onayami .onayami-anime08 {
  width: calc(571/750*100%);
  top: 13.1%;
  left: 1.8%;
}
#wrapper #onayami .onayami-anime09 {
  position: absolute;
  width: calc(537/750*100%);
  top: 10%;
  left: calc(106.5/750*100%);
}

/*============================
#reason
============================*/
#wrapper #reason {
}
#wrapper #reason {
}
#wrapper #reason .reason01-anime01 {
  width: calc(583/750*100%);
  left:calc(83.5/750*100%);
  top:69%;
}
#wrapper #reason .reason02-anime01 {
  width: calc(522/750*100%);
  top: 23%;
  left:calc(114/750*100%);
}
#wrapper #reason .reason02-anime02 {
  width: calc(584/750*100%);
  top: 12%;
  left: 13%;
}
#wrapper #reason .reason02-anime03 {
  width: calc(444 / 750* 100%);
  top: 28%;
  left: 31%;
}
#wrapper #reason .reason02-anime04 {
  width: calc(169 / 750* 100%);
  top: 53%;
  left: 31%;
}
#wrapper #reason .reason03-anime01 {
  position: absolute;
  width: calc(603/750*100%);
  top: 40%;
  left:calc(73.5/750*100%);
}
#wrapper #reason .reason03-anime02-front {
  width: calc(294 / 750* 100%);
  top: 23.5%;
  left: calc(228 / 750* 100%);
  z-index:3;
}
#wrapper #reason .reason03-anime02 {
  width: calc(574 / 750* 100%);
  top: 18.5%;
  left: calc(88 / 750* 100%);
}

/*============================
#feeling
============================*/

#wrapper #feeling .feeling-anime01 {
  width: calc(714/750*100%);
  top: 51%;
  left:0;
}
#wrapper #feeling .feeling-anime02 {
  width: calc(748/750*100%);
  top: 63%;
  left:0;
}

/*============================
#voice
============================*/
#wrapper #voice {
}
#wrapper #voice .voice-slideWrap {
  background-color: #000;
  padding: 0 0 calc(70/750*100%); 
  /* box-sizing: border-box; */
}
#wrapper #voice .voice-slideWrap .slider {
  width: calc(690/750*100%);
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  padding: 0;
}

#wrapper .slick-prev,#wrapper .slick-next{
  position: absolute;
  width: calc(38/690*100%);
  padding-top: calc(71/690*100%);
  background-size: contain;
  z-index:4;
  top:30%;
}
#wrapper .slick-prev:before,#wrapper .slick-next:before{
  font-size: 0;
}
#wrapper .slick-prev{
  background-image: url(../img/slide-prev.png);
  left:5%;
}
#wrapper .slick-next{
  background-image: url(../img/slide-next.png);
  right:5%;
}

#wrapper .slick-dots{
  position: absolute;
  bottom:-4%;
  z-index:4;
}
#wrapper .slick-dots li button:before{
  font-size: min(calc(15/750*100vw),15px);
  color: #4d4d4d;
  line-height: 1;
  opacity: 1;
}
#wrapper .slick-dots li.slick-active button:before{
  color: #fee26f;

}


#wrapper #voice .slide-caution {
  background-color: #000;
  padding: 0 min(calc(30/750*100vw),30px) min(calc(33/750*100vw),33px) min(calc(390/750*100vw),390px);

}
#wrapper #voice .slide-caution img{
  width: 100);
}
/*============================
#vitality
============================*/
#wrapper #vitality {
}

/*============================
#control
============================*/
#wrapper #control {
}
#wrapper .offer .offer-cycle {
}
#wrapper .offer .offer-cycle {
}
#wrapper .offer .offer-cycle .offer-cycle-anime01 {
  width: calc(595 / 750* 100%);
  top: 77.5%;
  left: calc(77.5 / 750* 100%);
}

/*============================
#faq
============================*/
#wrapper #faq {
}

/*============================
#close
============================*/
#wrapper #close {
}
#wrapper .bl_floatArea.js_floatArea {
}
#wrapper .bl_floatArea.js_floatArea .bl_floatArea_inner.p-box {
}
#wrapper .bl_floatArea.js_floatArea .bl_floatArea_inner.p-box .bl_floatArea_btn {
}


/* ---------------------------------------------
 追従ボタン
--------------------------------------------- */
#wrapper .bl_floatArea {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;
  box-sizing: border-box;
}
#wrapper .bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
#wrapper .bl_floatArea_inner {
  max-width: 750px;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
  padding: 0 ;
}

/* ボタン */
#wrapper .bl_floatArea_btn {
  display: block;
  width: calc(696/750*100%);
  margin: 0 auto 2%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}


/* footer */
#wrapper {
  background: #606060;
}
.bg-true-black {
  background-color: #000000;
}
.d-f {
  display: flex;
}
.fd-c {
  flex-direction: column;
}
.jc-c {
  justify-content: center;
}
.py-m {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.color-white {
  color: #fff;
}
.py-m {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.jc-c {
  justify-content: center;
}
.fd-c {
  flex-direction: column;
}
.d-f {
  display: flex;
}

.ta-c {
  text-align: center;
}
.px-sm {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-sm a{
    text-decoration:none;
    color:#FFF;
}

.mt-sm {
  margin-top: 2.5rem;
}
.fz-sm {
  font-size: 1.4rem;
}
.fw-n {
  font-weight: normal;
}
.pb-m {
  padding-bottom: 4rem;
}
.d-b {
  display: block;
}

.fw-n {
  font-weight: normal;
}
.fz-m {
  font-size: 1.6rem;
}

@media (max-width: 599px) {
  .sp-fz-s {
      font-size: 1.2rem;
  }
}