@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

main {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

img {
  vertical-align: top;
  width:100%
}

/* div {
  text-align: center;
} */

.bg {
  position: relative;
}

.bg > picture {
  margin-top: -1px;
}
.con {
  position: absolute;
  top: 0;
  z-index: 99;
}


.bg1 {
  z-index: 1;
}

.kwcv,
.cv_btn {
  opacity: 1;
}

.kwcv.is-show,
.cv_btn.is-show {
  animation-name: kwcv;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-delay: 0;
}

.cv_btn{
  width: 90%;
  top: 65%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.cv_btn_sq{
  width: 95%;
  top: 63%;
}

.scl {
  opacity: 0;
  transform: scale(1.2);
}

.scl.is-show {
  animation-name: anm;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 0.5s;
}

.scl.is-show.delay02 {
  animation-delay: 1s;
}
.scl.is-show.delay03 {
  animation-delay: 1.5s;
}


@keyframes kwcv {
  0% {
    opacity: 1;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(0.9);
  }
}
@keyframes anm {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes anm_scl1 {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeUpAnime_guigui {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

@keyframes mocchiri {
    0% {
        transform: scale(1, 0.8);
    }
    20% {
        transform: scale(0.8, 1.1);
    }
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.8);
    }
}



.kw1 {
  width: 80%;
  top: 22%;
  left: 10%;
}

.kw2 {
  width: 30%;
  top: 79%;
  left: 4%;
}

.kw3 {
  width: 30%;
  top: 79%;
  left: 35%;
}

.kw4 {
  width: 30%;
  top: 79%;
  left: 66%
}

.kw5 {
  width: 36%;
  top: 40%;
  left: 3%;
}

.kw6 {
  width: 36%;
  top: 62%;
  left: 53%;
}

.kw7 {
  width: 26%;
  top: 74%;
  left: 16%;
}

.kw8
{
  width: 62%;
  top: 5%;
  left: 20%;
}

.kw9 {
  width: 80%;
  top: 33%;
  left: 11%;
}

.kw10 {
  width: 52%;
  top: 32%;
  left: 24%;
}

.kw11 {
  width: 81%;
  top: 67%;
  left: 13%;
}

.kw12 {
  width: 87%;
  top: 18%;
  left: 7%;
}

.kw13 {
  width: 72%;
  top: 16%;
  left: 15%;
}

.kw14 {
  width: 72%;
  top: 21%;
  left: 15%;
}

.kw15 {
  width: 81%;
  top: 41%;
  left: 10%;
}

.kw16 {
  width: 92%;
  top: 22%;
  left: 4%;
}

.kw17 {
  width: 63%;
  top: 10%;
  left: 21%;
}

.kw18 {
  width: 32%;
  top: 45.2%;
  left: 1%;
}

.kw19 {
  width: 32%;
  top: 30.5%;
  left: 13%;
}

.kw20 {
  width: 48%;
  top: 37%;
  left: 28%;
}

.kw21 {
  width: 30%;
  top: 44%;
  left: 41%;
}

.kw22 {
  width: 30%;
  top: 50%;
  left: 64%;
}

.kw23 {
  width: 30%;
  top: 63.5%;
  left: 70.5%;
}

.kw24 {
  width: 30%;
  top: 77%;
  left: 66%;
}

.kw25 {
  width: 30%;
  top: 84%;
  left: 44%;
}

.kw26 {
  width: 30%;
  top: 83%;
  left: 18%;
}

.kw27 {
  width: 30%;
  top: 72%;
  left:1%;
}

.kw28 {
  width: 30%;
  top: 58.5%;
  left: 1%;
}

.kw29 {
  width: 30%;
  top: 47%;
  left: 16%;
}

.kw30 {
  width: 48%;
  top: 52%;
  left: 27%;
}

.movie {
  position: absolute;
  top: 0;
}

.fg-movie {
  position: absolute;
  top: 39%;
  left: 6.5%;
  width: 87%;
  height: 49.8%;
  object-fit: cover;
  z-index: 1;
  pointer-events: auto;
}

.bg--gif-section{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.bg--gif-section__gif{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bg--gif-section__gif img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg--gif-section__overlay{
  position: relative;
  z-index: 2;
  display: block;
}

.bg--gif-section__overlay img{
  width: 100%;
  height: auto;
  display: block;
}

.e1-seq .scl-e1{
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.e1-seq .scl-e1.is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.e2-seq .scl-e2{
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.e2-seq .scl-e2.is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-animate]{
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

[data-animate].is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}


.img-accordion{
  width: 100%;
}

.img-accordion__head{
  position: relative;
}

.img-accordion__head img{
  display: block;
  width: 100%;
  height: auto;
}

.img-accordion__btn{
  position: absolute;
  right: 5%;
  top: 41%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #a00029;

}

.img-accordion__body{
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.img-accordion__body img{
  width: 100%;
  display: block;
}

.img-accordion.is-open .img-accordion__body{
  max-height: 5000px; 
}

.acc-text{
  padding: 16px;
  text-align: left;
}

.gif1 {
  width: 84%;
  top: 18%;
  left: 4%;
  margin: auto;
}

.gif2 {
  width: 84%;
  top: 18%;
  left: 13%;
  margin: auto;
}

.gif3 {
  width: 45%;
  top: 57%;
  left: 4%;
  margin: auto;
}

ul {
  list-style: none;
}


/* 文字のループアニメーション */

article{
  overflow: hidden;
  border-top: 1px solid #e94e2a;
  border-bottom: 2px solid #e94e2a;
  }
.loop_wrap {
    display: flex;
    width: 100%;
    overflow: hidden;
  }

.loop_wrap p {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 40px;
    overflow: hidden;
    font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", sans-serif;
    letter-spacing: 0.05em;
    color: #e94e2a;
    padding: 8px 0;
  }
  @media screen and (max-width: 700px) {
    .loop_wrap p {
      font-size: 6vw;
      padding: 2vw 0;
    }
}

.loop_wrap p:nth-child(odd) {
animation: loop 50s -25s linear infinite;
}

.loop_wrap p:nth-child(even) {
animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }


  /* アコーディオンエリア */
  .accordion-area h3 .qa_q {
  width: 33px;
  margin-left: 30px;
  margin-right: 30px;
  height: 24px;
  background: url("../img/lp_xross/lpx_q_close.png") no-repeat;
  background-size: cover;
  background-position: center;
}

.accordion-area h3.close {
  color: #fff;
}

.accordion-area h3.close .qa_q {
  background: url("../img/lp_xross/lpx_q.png") no-repeat;
}

.qa_a {
  width: 31px;
  margin-left: 30px;
  margin-right: 30px;
  height: 25px;
}

.qa {
  width: 6%;
  top: 0;
  bottom: 0;
  right: 7%;
  left: auto;
  margin: auto;
  transition: 0.3s ease-in-out;
}

.qa.notes {
  top: 18%;
}

.close .qa {
  transform: rotate(180deg);
}

.q_btn {
  width: 100%;
  margin: 0 auto;
}

.close .qa_open_b {
  transform: rotate(0);
}

.qa_open_b {
  transform: rotate(-90deg);
}

.title {
  position: relative;
}

.qa_open {
  position: absolute;
  width: 6%;
  height: 2px;
  left: auto;
  right: 4%;
  top: 48%;
  transition: 0.3s ease-in-out;
}

/* ビフォーアフター */
.twentytwenty-handle {
  background: #fff url("../images/bar.png") no-repeat center / 28px 28px;
  border: none !important;
  border-radius: 50%;
  box-shadow: none !important;
  margin-left: -29px;
  margin-top: -29px;
}

.beforeAfter_box {
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
  display: none;
}


 /*** スライダー ****/
 .slider_relative {
  position: relative;
 }

 .slider_relative > picture img {
  width: 100%;
  display: block;
}

 .problem-slider {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 2;
}

.problem-slider img {
  width: 100%;
  display: block;
}

/* slickのはみ出し防止 */
.problem-slider .slick-list {
  overflow: hidden;
}

/* 矢印共通 */
.problem-slider .slick-arrow {
  position: absolute;
  top: 53%;
  z-index: 5;
  width: 80px;
  height: 140px;
  border: none;
  font-size: 0;
  cursor: pointer;
}

/* デフォルト矢印を消す */
.problem-slider .slick-arrow::before {
  display: none;
}

.problem-slider .slick-prev,
.problem-slider .slick-prev:hover,
.problem-slider .slick-prev:focus {
  left: -45px;
  background: url("../images/arrow-prev.png") no-repeat center / 75% auto !important;
}

.problem-slider .slick-next,
.problem-slider .slick-next:hover,
.problem-slider .slick-next:focus {
  right: -45px;
  background: url("../images/arrow-next.png") no-repeat center / 75% auto !important;
}

.problem-slider .slick-arrow::before {
  content: none !important;
}