@charset "utf-8";
/* CSS Document */

/*******************

 LP style

********************/
html , body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  background: #0a005a;
}
blockquote:empty {
  display: none;
}

/* content
--------------------------------------------------*/
.lpbox , #lpfooter {
  font-size: clamp(14px,calc(28 / 750 * 100vw),28px);
  font-family: "Noto Sans JP", 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:#000000;
  line-height: calc(46 / 28 * 1em);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  --animation-delay: 0;
  background: #fff;
}
@media screen and (min-width:750px){
.lpbox , #lpfooter {
    max-width: 450px;
    font-size: 18px;
    margin: 0 auto;
  }
}
.lpbox a , #lpfooter a{
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}
.lpbox a:hover, #lpfooter a:hover{
  text-decoration: underline;
}
.lpbox span, #lpfooter span {
  font-size: inherit;
  font-weight: inherit;
}
.lpbox img ,
#lpfooter img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
.lpbox img.img-t ,
#lpfooter img.img-t {
  vertical-align: top;
}
/* cart css reset */

.lpbox header ,
.lpbox h1 ,
.lpbox h2 ,
.lpbox h3 ,
.lpbox p ,
.lpbox dl ,
.lpbox dt ,
.lpbox dd ,
.lpbox div ,
.lpbox section ,
.lpbox span {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter footer ,
#lpfooter div,
#lpfooter p {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter ul,
#lpfooter li {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
/*----------------------------------------*/
.lpbox section {
  position: relative;
  overflow: hidden;
}
.lpbox .box {
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.lpbox .cta__text {
  position: absolute;
  bottom: 1em;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 83%;
  font-size: .6em;
  text-align: justify;
  line-height: 1.8em;
  letter-spacing: .1em;
}

@media screen and (min-width:750px){
  .lpbox .cta__text {
    line-height: 1.7em;
  }
}
.lpbox .cta__text a {
  color: #1b00f1;
}
.lpbox .approach__text--01 {
  position: absolute;
  display: block;
  width: calc(396 / 750 * 100%);
  top: calc(286 / 588 * 100%);
  left: calc(173 / 750 * 100%);
  z-index: 2;
}

.lpbox .approach__text--02 {
  position: absolute;
  display: block;
  width: calc(570 / 750 * 100%);
  top: calc(391 / 588 * 100%);
  left: calc(86 / 750 * 100%);
  z-index: 2;
  --animation-delay: 1;
}

.lpbox .approach__mov {
  position: relative;
  display: block;
  margin: clamp(30px,calc(60 / 750 * 100%), 60px) auto 0;
  width: calc(606/ 750 * 100%);
  height: 0;
  padding-bottom: calc(360 / 750 * 100%);
  overflow: hidden;
}
.lpbox .approach__mov video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lpbox .cta__btn {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.lpbox .cta__btn a {
  display: block;
  margin: 0 auto;
  width: calc(716 / 750 * 100%);
  padding: 0;
}

.lpbox .pro__text {
  position: absolute;
  display: block;
  width: calc(348 / 750 * 100%);
  top: calc(154 / 920 * 100%);
  right: calc(40 / 750 * 100%);
  z-index: 2;
}

.lpbox .salon__text {
  position: absolute;
  display: block;
  width: calc(464 / 750 * 100%);
  top: calc(74 / 240 * 100%);
  left: calc(118 / 750 * 100%);
  z-index: 2;
}

.lpbox .award__text {
  position: absolute;
  display: block;
  width: calc(502 / 750 * 100%);
  top: calc(146 / 350 * 100%);
  left: calc(123 / 750 * 100%);
  z-index: 2;
}

.lpbox .award__medal--01 {
  position: absolute;
  display: block;
  width: calc(285 / 750 * 100%);
  top: calc(83 / 820 * 100%);
  right: calc(48 / 750 * 100%);
  z-index: 2;
  --animation-delay: 0.5;
}

.lpbox .award__medal--02 {
  position: absolute;
  display: block;
  width: calc(285 / 750 * 100%);
  top: calc(374 / 820 * 100%);
  right: calc(48 / 750 * 100%);
  z-index: 2;
  --animation-delay: 1.5;
}

.lpbox .volt__text {
  position: absolute;
  display: block;
  width: calc(629 / 750 * 100%);
  bottom: calc(26 / 458 * 100%);
  left: calc(70 / 750 * 100%);
  z-index: 2;
}

.lpbox .answer__sttl--01 {
  position: absolute;
  display: block;
  width: calc(461 / 750 * 100%);
  top: calc(125 / 300 * 100%);
  left: calc(146 / 750 * 100%);
  z-index: 2;
}

.lpbox .answer__sttl--02 {
  position: absolute;
  display: block;
  width: calc(527 / 750 * 100%);
  top: calc(130 / 300 * 100%);
  left: calc(118 / 750 * 100%);
  z-index: 2;
}
.lpbox .answer__mov {
  position: absolute;
  z-index: 3;
  width: 100%;
  display: block;
  top: 0;
  left: 0;
}
.lpbox .answer__size {
  position: relative;
  display: block;
  margin: 0 auto 0;
  width: calc(606/ 750 * 100%);
  height: 0;
  padding-bottom: calc(360 / 750 * 100%);
  overflow: hidden;
}
.lpbox .answer__size video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lpbox .answer__sttl--03 {
  position: absolute;
  display: block;
  width: calc(560 / 750 * 100%);
  top: calc(129 / 300 * 100%);
  left: calc(95 / 750 * 100%);
  z-index: 2;
}

.lpbox .answer__sttl--04 {
  position: absolute;
  display: block;
  width: calc(393 / 750 * 100%);
  top: calc(129 / 290 * 100%);
  left: calc(185 / 750 * 100%);
  z-index: 2;
}


.lpbox .faq {
  box-sizing: border-box;
  display: block;
  background: #0a005a;
  padding: calc(40 / 750 * 100%) calc(30 / 750 * 100%);
}
.lpbox .faq__content {
  background: #fff;
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: calc(40 / 690 * 100%) calc(30 / 690 * 100%) calc(30 / 690 * 100%);
}
.lpbox .faq__ttl {
  display: block;
  width: calc(350 / 630 * 100%);
  margin: calc(10 / 630 * 100%) auto;
}
.lpbox .faq__item {
  display: block;
  position: relative;
  margin: calc(50 / 630 * 100%) auto;
}
.lpbox .faq__item + .faq__item {
  background: url(../img/webp/faq_bar.webp) no-repeat top center;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  box-sizing: border-box;
  padding-top: calc(50 / 630 * 100%);
}
.lpbox .faq__q {
  cursor: pointer;
  display: block;
  background: url(../img/faq_q.png) no-repeat top left;
  background-position: 0 .2em;
  -webkit-background-size: calc(60 / 630 * 100%) auto;
  background-size: calc(60 / 630 * 100%) auto;
  box-sizing: border-box;
  min-height: clamp(30px,calc(60 / 630 * 100vw),60px);
  padding: calc(0 / 630 * 100%) calc(85 / 630 * 100%);
  font-weight: 700;
  font-size: calc(32 / 28 * 1em);
  line-height: calc(50 / 32 * 1em);
  letter-spacing: 0.025em;
  margin: 0 auto calc(30 / 630 * 100%);
  position: relative;
}
.lpbox .faq__q:before {
  content: "";
  display: block;
  width: 1.4em;
  height: 1px;
  background: #0a005a;
  position: absolute;
  top: 50%;
  right: 0.6em;
  transition: all .5s ease;
  transform: rotate(0deg);
  opacity: 1;
}
.lpbox .faq__q:after{
  content: "";
  display: block;
  width: 1.4em;
  height: 1px;
  background: #0a005a;
  position: absolute;
  top: 50%;
  right: 0.6em;
  transition: all .5s ease;
  transform: rotate(90deg);
  opacity: 1;
}
.lpbox .faq__q.faq--open:before {
  content: "";
  transform: rotate(180deg);
  opacity: 0;
}
.lpbox .faq__q.faq--open:after{
  content: "";
  transform: rotate(180deg);
  opacity: 1;
}



.lpbox .faq__a > div{
  display: block;
  background: url(../img/faq_a.png) no-repeat top left;
  background-position: 0 .2em;
  -webkit-background-size: calc(60 / 630 * 100%) auto;
  background-size: calc(60 / 630 * 100%) auto;
  box-sizing: border-box;
  min-height: clamp(30px,calc(60 / 630 * 100vw),60px);
  padding: calc(0 / 630 * 100%) calc(0 / 630 * 100%) calc(0 / 630 * 100%)  calc(85 / 630 * 100%) ;
  letter-spacing: 0.025em;
}

.lpbox .btn__tel {
  position: absolute;
  display: block;
  width: calc(670 / 750 * 100%);
  top: 0;
  left: calc(40 / 750 * 100%);
  z-index: 2;
}

.lpbox .btn__series {
  position: absolute;
  display: block;
  width: calc(596 / 750 * 100%);
  top: 0;
  left: calc(77 / 750 * 100%);
  z-index: 2;
}
/*---------------------------*/
.lpbox #fixbtn {
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 999;
  width: 100%;
  overflow: hidden;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
}
.lpbox #fixbtn.fixbtn--visible {
  bottom: 0;
}
.lpbox #fixbtn .fixbtn__box {
  position: relative;
  bottom: 0;
  display: block;
  margin: 0 auto;
  position: relative;
  max-width: 750px;
}

.lpbox #fixbtn .fixbtn__item {
  display: block;
  width: calc(716 / 750 * 100%);
  max-width: 716px;
  margin: 0 auto;
}


@media screen and (min-width:750px){
  .lpbox #fixbtn .fixbtn__box {
    max-width: 450px;
  }
  
}

/*---------------------------*/


/*-------------------------------------------
 footer
-----------------------------------------------*/
#lpfooter .footer__link {
  text-align: center;
  padding-top: 3em;
  margin-bottom: 1em;
}
#lpfooter .footer__link li{
  font-size: calc(22 / 28 * 1em);
  margin-bottom: 0;
}
#lpfooter .footer__link a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
#lpfooter #copy {
  text-align: center;
  font-size: calc(22 / 28 * 1em);
  color: #fff;
  background-color: #0a005a;
  box-sizing: border-box;
  padding: .2em;
}

/*-------------------------------------------
 animation
-----------------------------------------------*/
.lpbox .fadein {
  display: block;
  opacity: 1;
  -webkit-transform:translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-filter: blur(0);
  -o-filter: blur(0);
  filter: blur(0);
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  transition-delay: calc(var(--animation-delay) * 0.2s);
}
.lpbox .animhide .fadein {
  display: block;
  opacity: 0;
  -webkit-transform:translate3d(0,3em,0);
  -ms-transform: translate3d(0,3em,0);
  -o-transform: translate3d(0,3em,0);
  transform: translate3d(0,3em,0);
  -webkit-filter: blur(0.3em);
  -o-filter: blur(0.3em);
  filter: blur(0.3em);
}

.lpbox .slideleft {
  display: block;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  opacity: 1;
}
.lpbox .animhide .slideleft {
  display: block;
  -webkit-transform: translate3d(-50%,0,0);
  -ms-transform: translate3d(-50%,0,0);
  -o-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
  opacity: 0;
}

.lpbox .slideright {
  display: block;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  opacity: 1;
  transition-delay: calc(var(--animation-delay) * 0.2s);
}
.lpbox .animhide .slideright {
  display: block;
  -webkit-transform: translate3d(3em,0,0);
  -ms-transform: translate3d(3em,0,0);
  -o-transform: translate3d(3em,0,0);
  transform: translate3d(3em,0,0);
  opacity: 0;
}

.lpbox .marker {
  display: block;
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;  
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition-delay: calc(var(--animation-delay) * 0.2s);
}
.lpbox .animhide .marker {
  display: block;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}