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

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

LP style

********************/
html , body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* PC用 */
@media screen and (min-width: 751px) {
  /* content
  --------------------------------------------------*/
  .lpbox , #lpfooter {
    font-size: 14px;
    font-size: 3.7333vw;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    color:#303030;
    line-height:1.5em;
  }
  @media screen and (min-width:750px){
    .lpbox , #lpfooter {
      font-size: 28px;
      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: auto;
    max-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 .fv__box {
    background: #eff9ff;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: block;
  }
  .lpbox .high_technology {
    max-width: 1000px;
    width: 100%;
    margin: 50px auto 120px;
  }
  /*----------------------------------------*/
  .lpbox .btnbox {
    display: block;
    box-sizing: border-box;
    padding: 50px 0 70px;
    overflow: hidden;
  }
  .lpbox .btn__text {
    display: block;
    margin: 0 auto calc(10 / 750 * 100%);
    width: calc(570 / 750 * 100%);
    max-width: 570px;
  }
  .lpbox .btn__item {
    display: block;
    margin: 0 auto;
    width: calc(708 / 750 * 100%);
    max-width: 708px;
  }

  .lpbox .btn__att {
    display: block;
    margin: 0 auto;
    width: calc(583 / 750 * 100%);
    max-width: 583px;
  }

  /*---------------------------*/
  .lpbox .about {
    background: #7dbed7 url(../img/webp/about_bg_pc.webp) no-repeat top center;
    margin: 140px auto;
    min-height: 900px;
  }
  .lpbox .about .sliderarea {
    margin-bottom: 80px;
  }
  .lpbox .sliderarea {
    display: block;
    position: relative;
    margin: 0 auto;
  }
  .lpbox .sliderbox {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
  }
  .lpbox .slider--about p {
    display: block;
    box-sizing: border-box;
    padding: 0 20px;
    max-width: 410px;
  }
  .lpbox .reason .sliderarea {
    display: block;
    box-sizing: border-box;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px clamp(0px,calc(110 / 1100 * 100%),110px);
    background: url(../img/webp/reason_08_pc.webp) repeat-y top center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .lpbox .reason .sliderbox {
    box-sizing: border-box;
    position: relative;
  }
  .lpbox .slider--reason p {
    display: block;
    box-sizing: border-box;
  }
  .lpbox .btnbox--reason {
    position: relative;
    display: block;
  }
  .lpbox .btnbox--reason .btnbox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .lpbox .reason .btnbox {
    padding-bottom: 80px;
  }
  .lpbox .highlyrated {
    margin: 90px auto 0;
    width: 100%;
    max-width: 1100px;
  }
  .lpbox .highlyrated__box {
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .lpbox .highlyrated__yt {
    position: absolute;
    top: calc(12 / 656 * 100%);
    right: clamp(0px,calc(150 / 1100 * 100%),150px);
    width: clamp(0px,calc(540 / 1100 * 100%),540px);
    z-index: 2;
  }
  .lpbox .highlyrated__ytitem {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc( 310 / 540 * 100%);
    overflow: hidden;
    margin: 0 auto;
  }
  .lpbox .highlyrated__ytitem iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lpbox .woman .btnbox {
    padding: calc(10 / 750 * 100%) 0  calc(50 / 750 * 100%);
  }
  .lpbox .whats {
    margin: 60px auto 60px;
    max-width: 1100px;
    display: block;
  }
  .lpbox .whats_09 {
    margin-top: 100px;
  }
  .lpbox .whats__box {
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .lpbox .whats__mov {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .lpbox .whats__movitem {
    position: relative;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    width: calc(620 / 1100 * 100%);
    height: 0;
    padding-bottom: calc(300 / 1100 * 100%);
    overflow: hidden;
  }
  .lpbox .whats__movitem video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lpbox .vip {
    margin: 0 auto 80px;
  }
  .lpbox .turkey {
    background: #7bd1de;
    margin: 50px auto 140px;
  }
  .lpbox .comparison {
    margin: 70px auto 100px;
  }
  .lpbox .message {
    margin: 100px auto;

  }
  .lpbox .voice {
    margin: 100px auto 0;
    width: 100%;
    max-width: 1200px;
  }
  .lpbox .voice .sliderbox {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0  clamp(0px,calc(150 / 1200 * 100%),150px) clamp(0px,calc(130 / 1200 * 100%),130px);
  }
  .lpbox .slider--voice p {
    display: block;
    box-sizing: border-box;
    padding: 0 calc(50 / 750 * 100%);
  }
  .lpbox .slider--voice.owl-carousel .owl-nav button.owl-prev {
    display: block;
    position: absolute;
    top: 50%;
    left: -50px;
    z-index: 10;
    transform: translate3d(0,-50%,0);
  }
  .lpbox .slider--voice.owl-carousel .owl-nav button.owl-prev span {
    background: url(../img/webp/arrow_l.webp) no-repeat top left;
    -webkit-background-size: cover;
    background-size: cover;
    display: block;
    width: 0;
    height: 0;
    padding-left: 30px;
    padding-bottom: 90px;
    text-indent: -999px;
    overflow: hidden;
  }
  .lpbox .slider--voice.owl-carousel .owl-nav button.owl-next {
    display: block;
    position: absolute;
    top: 50%;
    right: -50px;
    z-index: 10;
    transform: translate3d(0,-50%,0);
  }
  .lpbox .slider--voice.owl-carousel .owl-nav button.owl-next span {
    background: url(../img/webp/arrow_r.webp) no-repeat top left;
    -webkit-background-size: cover;
    background-size: cover;
    display: block;
    width: 0;
    height: 0;
    padding-left: 30px;
    padding-bottom: 90px;
    text-indent: -999px;
    overflow: hidden;
  }

  .lpbox .ba {
    background:#cdf1f6 url(../img/webp/ba_bg_pc.webp) no-repeat top center;
    display: block;
    margin: 140px auto 0;
    padding-bottom: 70px;
  }
  .lpbox .ba__box {
    max-width: 1240px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    margin: -30px auto 0;
  }
  .lpbox .ba__box p {
    display: block;
    width: 50%;
    box-sizing: border-box;
    padding: 30px;
  }
  .lpbox .problem {
    display: block;
    margin: 0 auto 120px;
  }
  .lpbox .afterfollow {
    position: relative;
    display: block;
    margin: 90px auto;
    width: 100%;
    max-width: 820px;
  }
  .lpbox .afterfollow__box {
    position: relative;
    display: block;
  }
  .lpbox .afterfollow__btn {
    position: absolute;
    width: clamp(0px,calc(440 / 820 *100%),440px);
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%,0,0);
  }
  .lpbox .afterfollow__btn .acd__btn {
    position: relative;
    cursor: pointer;
  }
  .lpbox .afterfollow__btn .acd__btn:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/webp/afterfollow_ar.webp) no-repeat 50% 50%;
    -webkit-background-size: contain;
    background-size: contain;
    position: absolute;
    top: calc(50% - 8px );
    right: 30px;
    transition: all .5s ease;
    transform: rotate(180deg);
  }
  .lpbox .afterfollow__btn .acd__btn.acd__btn--open:after {
    content: "";
    transform: rotate(0deg);
  }
  .lpbox .release {
    position: relative;
    display: block;
    margin: 0 auto 120px;
  }
  .lpbox .faq {
    position: relative;
    background: #edf8fb;
    margin: 140pxauto;
    box-sizing: border-box;
    display: block;
    padding: clamp(0px,calc(100 / 1100 * 100%),100px) clamp(0px,calc(100 / 1100 * 100%),100px);
    max-width: 1100px;
  }
  .lpbox .faq h2 {
    margin: 0 auto 60px;
  }
  .lpbox .faq__item {
    margin: 0 auto 40px;
  }
  .lpbox .faq--q {
    position: relative;
    cursor: pointer;
  }
  .lpbox .faq--q:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/webp/faq_ar_pc.webp) no-repeat 50% 50%;
    -webkit-background-size: contain;
    background-size: contain;
    position: absolute;
    top: calc(50% - 8px);
    right: 2em;
    transition: all .5s ease;
    transform: rotate(180deg);
  }
  .lpbox .faq--q.acd__btn--open:after {
    content: "";
    transform: rotate(0deg);
  }

  /*---------------------------*/
  .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;
    background-color: transparent;
  }
  .lpbox #fixbtn.fixbtn--visible {
    bottom: 0;
    background-color: #dafbff;
  }
  .lpbox #fixbtn .fixbtn__box {
    position: relative;
    bottom: 0;
    display: block;
    margin: 0 auto;
    position: relative;
    max-width: 1000px;
  }
  .lpbox #fixbtn .fixbtn__item {
    position: relative;
    display: block;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;

  }
  .lpbox #fixbtn .fixbtn__bg {
    display: block;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 25px 20px;

  }
  .lpbox #fixbtn .fixbtn__btn--01 {
    display: block;
    width: calc(480 / 1000 * 100%);
    max-width: 480px;
    margin: 0;
  }
  .lpbox #fixbtn .fixbtn__btn--02 {
    display: block;
    width: calc(480 / 1000 * 100%);
    max-width: 480px;
    margin: 0;
  }
  .lpbox #fixbtn .fixbtn__btn--long {
    display: block;
    width: calc(700 / 1000 * 100%);
    max-width: 700px;
    margin: 0 auto;

  }

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


  /*-------------------------------------------
  form
  -----------------------------------------------*/
  #form__area {
    box-sizing: border-box;
    width: 100%;
    margin: 1em auto;
    padding: 0;
  }


  /*-------------------------------------------
  footer
  -----------------------------------------------*/
  #lpfooter .lpfooter__box {
    display: block;
    position: relative;
    margin: 150px auto 0;
    padding: 0;
  }
  #lpfooter .lpfooter__logo {
    width: 384px;
  }
  #lpfooter .footer__sns {
    text-align: center;
    margin: 50px auto 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
    width: 384px;
  }
  #lpfooter .footer__sns--line {
    width: 40px;
    display: block;
    margin: 0;
  }
  #lpfooter .footer__sns--yt {
    width: 40px;
    display: block;
    margin: 0;
  }
  #lpfooter .footer__sns--x {
    width: 40px;
    display: block;
    margin: 0;
  }
  #lpfooter .footer__link {
    text-align: center;
    background: #edf8fb;
    box-sizing: border-box;
    padding: 60px 10px;
  }
  #lpfooter .footer__link li{
    font-size: 14px;
    display: inline-block;
    word-break: keep-all;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1.3em;
    box-sizing: border-box;
    padding: 0 1em;
  }
  #lpfooter .footer__link li + li {
    border-left: 1px solid;
  }
  #lpfooter .footer__link li a {
    display: block;
    letter-spacing: 0.1em;
    box-sizing: border-box;
    padding: calc(20 / 750 * 100%) calc(30 / 750 * 100%);
    font-weight: 500;
  }
  #lpfooter #copy {
    text-align: center;
    font-size: 13px;
    box-sizing: border-box;
    padding: 0.8em 0;
    font-weight: 500;
  }

  .lpbox .high_technology {
    background: url(../img/high_technology_02_pc.png) repeat center top;
    background-size: 100%;
  }
  .lpbox .before_after_slider {
    position: relative;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
  }

  .lpbox .box_before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    border-right: 5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 10px 0 15px -13px #000;
  }

  .lpbox .box_before img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .lpbox .box_before::before {
    content: "";
    display: block;
    width: .9em;
    height: .9em;
    background: url(../img/high_technology_ar.png) no-repeat 50% 50%;
    -webkit-background-size: contain;
    background-size: 60%;

    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    right: -30px;
    bottom: 0;
    width: 45px;
    height: 45px;
    margin: auto;
    border: 5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 10px 0 15px -13px #000;
  }

  .lpbox .slider_range {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: col-resize;
  }


  .lpbox .nayami {
    position: relative;
  }
  .lpbox .nayami__box {
    width: clamp(50%,calc(670 / 1000 * 100%),670px);
  }
  .lpbox .twentytwenty-overlay:hover {
    background: none!important;
  }
  .twentytwenty-before-label{display:none}
  .twentytwenty-after-label{display:none}

  
   .pc-box {
    display: block;
  }
  .sp-box {
    display: none!important;
  }

}
/* PC用 ここまで */



/* SP用 */
@media screen and (max-width: 750px) {
  
  .lpbox .pc-box {
    display: none!important;
  }
  .lpbox .sp-box {
    display: block;
  }
  
  /*******************

  LP style

  ********************/
  html , body {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }

  /* content
  --------------------------------------------------*/
  .lpbox , #lpfooter {
    font-size: 14px;
    font-size: 3.7333vw;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    color:#303030;
    line-height:1.5em;
  }
  @media screen and (min-width:750px){
    .lpbox , #lpfooter {
      font-size: 28px;
      max-width: 750px;
      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 .btnbox {
    display: block;
    box-sizing: border-box;
    padding: calc(40 / 750 * 100%) 0;
    overflow: hidden;
  }
  .lpbox .btn__text {
    display: block;
    margin: 0 auto calc(10 / 750 * 100%);
    width: calc(570 / 750 * 100%);
    max-width: 570px;
  }
  .lpbox .btn__item {
    display: block;
    margin: 0 auto;
    width: calc(708 / 750 * 100%);
    max-width: 708px;
  }

  .lpbox .btn__att {
    display: block;
    margin: 0 auto;
    width: calc(583 / 750 * 100%);
    max-width: 583px;
  }

  /*---------------------------*/
  .lpbox .sliderarea {
    display: block;
    position: relative;
    margin: 0 auto;
  }
  .lpbox .sliderbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
  }
  .lpbox .about .sliderbox {
    position: absolute;
    top: 14em;
    left: 0;
    width: 100%;
    z-index: 3;
  }
  .lpbox .about .owl-carousel .owl-item img {
    display: block;
    width: 80%;
  }
  .lpbox .slider--about p {
    display: block;
    box-sizing: border-box;
    padding: 0 calc(70 / 750 * 100%);
  }
  .lpbox .slider--reason {
    display: block;
    box-sizing: border-box;
    padding-top: calc(15 / 750 * 100%);
  }
  .lpbox .slider--reason p {
    display: block;
    box-sizing: border-box;
  }
  .lpbox .btnbox--reason {
    position: relative;
    display: block;
  }
  .lpbox .btnbox--reason .btnbox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .lpbox .reason .btnbox {
    padding-bottom: calc(20 / 750 * 100%);
  }
  .lpbox .highlyrated__box {
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .lpbox .highlyrated__yt {
    position: absolute;
    top: calc(150 / 890 * 100%);
    left: 0;
    width: 100%;
    z-index: 2;
  }
  .lpbox .highlyrated__ytitem {
    display: block;
    position: relative;
    width: calc( 600 / 750 * 100%);
    height: 0;
    padding-bottom: calc( 338 / 750 * 100%);
    overflow: hidden;
    margin: 0 auto;
  }
  .lpbox .highlyrated__ytitem iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lpbox .woman .btnbox {
    padding: calc(10 / 750 * 100%) 0  calc(50 / 750 * 100%);
  }
  .lpbox .whats {
    margin: calc(40 / 750 * 100%) auto 0;
  }
  .lpbox .whats__box {
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .lpbox .whats__mov {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .lpbox .whats__movitem {
    position: relative;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    width: calc(640 / 750 * 100%);
    height: 0;
    padding-bottom: calc(300 / 750 * 100%);
    overflow: hidden;
  }
  .lpbox .whats__movitem video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lpbox .slider--voice_sp p {
    display: block;
    box-sizing: border-box;
    padding: 0 calc(50 / 750 * 100%);
  }
  .lpbox .slider--voice_sp.owl-carousel .owl-nav button.owl-prev {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    transform: translate3d(0,-50%,0);
  }
  .lpbox .slider--voice_sp.owl-carousel .owl-nav button.owl-prev span {
    background: url(../img/webp/arrow_l.webp) no-repeat top left;
    -webkit-background-size: cover;
    background-size: cover;
    display: block;
    width: 0;
    height: 0;
    padding-left: calc(50 / 28 * 1em);
    padding-bottom: calc(150 / 28 * 1em);
    text-indent: -999px;
    overflow: hidden;
  }
  .lpbox .slider--voice_sp.owl-carousel .owl-nav button.owl-next {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 10;
    transform: translate3d(0,-50%,0);
  }
  .lpbox .slider--voice_sp.owl-carousel .owl-nav button.owl-next span {
    background: url(../img/webp/arrow_r.webp) no-repeat top left;
    -webkit-background-size: cover;
    background-size: cover;
    display: block;
    width: 0;
    height: 0;
    padding-left: calc(50 / 28 * 1em);
    padding-bottom: calc(150 / 28 * 1em);
    text-indent: -999px;
    overflow: hidden;
  }

  .lpbox .afterfollow__box {
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .lpbox .afterfollow__btn {
    position: absolute;
    width: calc(640 / 750 * 100%);
    bottom: 0;
    left: calc(55 / 750 * 100%);
  }
  .lpbox .afterfollow__btn .acd__btn {
    position: relative;
    cursor: pointer;
  }
  .lpbox .afterfollow__btn .acd__btn:after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: url(../img/webp/afterfollow_ar.webp) no-repeat 50% 50%;
    -webkit-background-size: contain;
    background-size: contain;
    position: absolute;
    top: calc(50% - 0.5em );
    right: 1em;
    transition: all .5s ease;
    transform: rotate(180deg);
  }
  .lpbox .afterfollow__btn .acd__btn.acd__btn--open:after {
    content: "";
    transform: rotate(0deg);
  }

  .lpbox .faq {
    position: relative;
    background: #edf8fb;
    margin: clamp(30px,calc(60 / 750 * 100%),60px) auto;
    padding-bottom:  clamp(60px,calc(120 / 750 * 100%),120px);
  }
  .lpbox .faq__item {
    margin: 0 auto clamp(30px,calc(60 / 750 * 100%),60px);
  }
  .lpbox .faq--q {
    position: relative;
    cursor: pointer;
  }
  .lpbox .faq--q:after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: url(../img/webp/faq_ar.webp) no-repeat 50% 50%;
    -webkit-background-size: contain;
    background-size: contain;
    position: absolute;
    top: calc(50% - 0.5em );
    right: 2em;
    transition: all .5s ease;
    transform: rotate(180deg);
  }
  .lpbox .faq--q.acd__btn--open:after {
    content: "";
    transform: rotate(0deg);
  }

  /*---------------------------*/
  .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 {
    position: relative;
    display: block;
    margin: 0 auto;
  }
  .lpbox #fixbtn .fixbtn__btn--01 {
    display: block;
    position: absolute;
    width: calc(360 / 750 * 100%);
    max-width: 360px;
    bottom: 0;
    left: 0;
  }
  .lpbox #fixbtn .fixbtn__btn--02 {
    display: block;
    position: absolute;
    width: calc(360 / 750 * 100%);
    max-width: 360px;
    bottom: 0;
    right: 0;
  }
  .lpbox #fixbtn .fixbtn__btn--long {
    display: block;
    position: absolute;
    width: calc(690 / 750 * 100%);
    max-width: 690px;
    bottom: 0;
    right: calc(30 / 750 * 100%);
  }

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


  /*-------------------------------------------
  form
  -----------------------------------------------*/
  #form__area {
    box-sizing: border-box;
    width: 100%;
    margin: 1em auto;
    padding: 0;
  }


  /*-------------------------------------------
  footer
  -----------------------------------------------*/
  #lpfooter .lpfooter__box {
    display: block;
    position: relative;
    max-width: 750px;
    margin: 4em auto 0;
    padding: 0;
  }
  #lpfooter .lpfooter__logo {
    max-width: 410px;
    width: calc(410 / 750 * 100%);
  }
  #lpfooter .footer__sns {
    text-align: center;
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    gap: clamp(40px,calc(90 / 750 * 100vw),90px);
  }
  #lpfooter .footer__sns--line {
    width: calc(85 / 750 * 100%);
    max-width: 85px;
    display: block;
    margin: 0;
  }
  #lpfooter .footer__sns--yt {
    width: calc(95 / 750 * 100%);
    max-width: 95px;
    display: block;
    margin: 0;
  }
  #lpfooter .footer__sns--x {
    width: calc(90 / 750 * 100%);
    max-width: 90px;
    display: block;
    margin: 0;
  }
  #lpfooter .footer__link {
    margin-top: 2.5em;
    margin-bottom: 0em;
  }
  #lpfooter .footer__link li{
    font-size: 1em;
    background: #edf8fb;
  }
  #lpfooter .footer__link li:nth-child(even) {
    background: #fff;
  }
  #lpfooter .footer__link li a {
    display: block;
    letter-spacing: 0.1em;
    box-sizing: border-box;
    padding: calc(20 / 750 * 100%) calc(30 / 750 * 100%);
    font-weight: 500;
  }
  #lpfooter #copy {
    text-align: center;
    font-size: .75em;
    box-sizing: border-box;
    padding: 1em 0;
    font-weight: 500;
  }


  .lpbox .high_technology {
    background: url(../img/sp_webp/high_technology_02.webp) repeat center top;
    background-size: 100%;
  }
  .lpbox .before_after_slider {
    position: relative;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
  }

  .lpbox .box_before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    border-right: 5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 10px 0 15px -13px #000;
  }

  .lpbox .box_before img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .lpbox .box_before::before {
    content: "";
    display: block;
    width: .9em;
    height: .9em;
    background: url(../img/high_technology_ar.png) no-repeat 50% 50%;
    -webkit-background-size: contain;
    background-size: 60%;

    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    right: -30px;
    bottom: 0;
    width: 45px;
    height: 45px;
    margin: auto;
    border: 5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 10px 0 15px -13px #000;
  }

  .lpbox .slider_range {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: col-resize;
  }

  .lpbox .reason .sliderarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 1% 0 3%;
    background: url(../img/sp_webp/reason_08.webp) repeat-y top center;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  .lpbox .reason .sliderbox {
    box-sizing: border-box;
    position: relative;
  }


  .lpbox .nayami {
    position: relative;
  }
  .lpbox .nayami__box {
    width: 88%;
  }
  .lpbox .twentytwenty-overlay:hover {
    background: none!important;
  }
  .twentytwenty-before-label{display:none}
  .twentytwenty-after-label{display:none}

}
/* SP用 ここまで */
/*-------------------------------------------
animation
-----------------------------------------------*/


/* bounce */
.lpbox .bounce {
  display: block;
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  0%   {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  10%  {
    -webkit-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -ms-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -o-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
  }
  30%  {
    -webkit-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -ms-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -o-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
  }
  50%  {
    -webkit-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -ms-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -o-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    transform: scale(1.02,.97) translate3d(0 , 0 , 0);
  }
  57%  {
    -webkit-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -ms-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -o-transform: scale(1,1)      translate3d(0 , -2% , 0);
    transform: scale(1,1)      translate3d(0 , -2% , 0);
  }
  64%  {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  100% {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
}
@keyframes bounce {
  0%   {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  10%  {
    -webkit-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -ms-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    -o-transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
    transform: scale(1.05,.95)   translate3d(0 , 0 , 0);
  }
  30%  {
    -webkit-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -ms-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    -o-transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
    transform: scale(.95,1.05)   translate3d(0 , -8% , 0);
  }
  50%  {
    -webkit-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -ms-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    -o-transform: scale(1.02,.97) translate3d(0 , 0 , 0);
    transform: scale(1.02,.97) translate3d(0 , 0 , 0);
  }
  57%  {
    -webkit-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -ms-transform: scale(1,1)      translate3d(0 , -2% , 0);
    -o-transform: scale(1,1)      translate3d(0 , -2% , 0);
    transform: scale(1,1)      translate3d(0 , -2% , 0);
  }
  64%  {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
  100% {
    -webkit-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -ms-transform: scale(1,1)      translate3d(0 , 0 , 0);
    -o-transform: scale(1,1)      translate3d(0 , 0 , 0);
    transform: scale(1,1)      translate3d(0 , 0 , 0);
  }
}