@charset "utf-8";


body{
    width: 100%;
    background-color:#fff;
    margin: 0;
}

a{
    width: 100%;
}

img {
	display: block;
	width: 100%;
    height: auto;
    max-width: 750px;
    margin: 0 auto;
}

video{
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
}


a.cancel_text p{
  color: #DB3762;
  text-decoration:underline;
  padding: 0;
  margin: 0;
	width: 100%;
  font-size:min(4vw,30px);
	text-align: center;
  font-family: 
    "Yu Gothic",
    "YuGothic", 
    "Hiragino Kaku Gothic ProN",
    "Meiryo", 
    "MS PGothic", 
    sans-serif;
    font-weight: 500;
}


.df-tsuyuhareru-lp{
    margin: 0 auto;
    min-width: 0 !important;
    max-width: 750px !important;
}


.tsuyuhareru-fv{
    position: relative;
}
.tsuyuhareru-fv-button{
    position: absolute;
    top: 90%;
}

/*===================================================
ユーザーボイススライダー
===================================================*/

.tsuyuhareru-lp-03{
    position: relative;
}

.tsuyuhareru-uservoice{
    width: 100%;
  position: absolute;
  top: 32.5%;
  right: 0%;
}

.colors-next-arrow, .colors-prev-arrow {
    width: 7%;
    position: absolute;
    z-index: 1; /* Ensure buttons appear above slides */
    cursor: pointer;
    outline: none;
    top: 40%;
  }


  .colors-prev-arrow {
    left: 0%; /* Adjust as needed */
  }
  .colors-next-arrow {
    right: 0; /* Adjust as needed */
  }

    .slider {
  margin: 0 auto;
  max-width: 500px;
  width: 80%;
}
.slider-img img {
  height: auto;
  width: 100%;
}
.slide-dots01 {
  margin: 0;
  padding: 0;
  text-align: center;
}
.slide-dots01 li {
  display: inline-block;
  margin: 0 1%;
}
.slide-dots01 li button {
  position: relative;
  text-indent: -9999px;
}
.slide-dots01 li button::before {
  background-color: #757575;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 100%;
  width: 90%;
  height: 80%;
}
.slide-dots01 li.slick-active button::before {
  background-color: #fff;
  height: 110%;
  width: 120%;
  bottom: -80%;
}
button {
  background: none;
  border: none;
  outline: none;
  padding: 0 0.5em;
}
 @media screen and (max-width:900px){
    .slide-dots01 li button::before {
     width: 60%;
     height: 50%;
     top: 20%;
    }
    .slide-dots01 li.slick-active button::before {
  height: 60%;
  width: 70%;
  bottom: 40%;
}
}



/*===================================================
サポートスライダー
===================================================*/

 .slider {
  margin: 0 auto;
  max-width: 500px;
  width: 80%;
}
.slider-img img {
  height: auto;
  width: 100%;
}

.slide-dots02 {
  margin: 0;
  padding: 0;
  text-align: center;
}
.slide-dots02 li {
  display: inline-block;
  margin: 0 1%;
}
.slide-dots02 li button {
  position: relative;
  text-indent: -9999px;
}
.slide-dots02 li button::before {
  background-color: #757575;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: -50%;
  width: 90%;
  height: 80%;
}
.slide-dots02 li.slick-active button::before {
  background-color: #FFCE55;
  height: 100%;
  width: 110%;
  bottom: 70%;
}
button {
  background: none;
  border: none;
  outline: none;
  padding: 0 0.5em;
}
 @media screen and (max-width:750px){
    .slide-dots02 li button::before {
     width: 60%;
     height: 50%;
     top: -30%;
    }

    .slide-dots02 li.slick-active button::before {
  background-color: #FFCE55;
  height: 60%;
  width: 70%;
  bottom: 80%;

}
}



.tsuyuhareru-lp-08{
    position: relative;
}

.support{
    width: 100%;
  position: absolute;
  top: 35.5%;
  right: 0%;
}

.support-next-arrow, .support-prev-arrow {
    width: 10%;
    position: absolute;
    z-index: 1; /* Ensure buttons appear above slides */
    cursor: pointer;
    outline: none;
    top: 50%;
  }


  .support-prev-arrow {
    left: 0%; /* Adjust as needed */
  }
  .support-next-arrow {
    right: 0; /* Adjust as needed */
  }

/*===================================================
FAQ
===================================================*/

.tsuyuhareru-lp-14{
    position: relative;
}

.tsuyuhareru-lp-faq{
    width: 100%;
  position: absolute;
  top: 12%;
  right: 0%;
}


.slide-dots03 {
  margin: 0;
  padding: 0;
  text-align: center;
}
.slide-dots03 li {
  display: inline-block;
  margin: 0 1%;
}
.slide-dots03 li button {
  position: relative;
  text-indent: -9999px;
}
.slide-dots03 li button::before {
  background-color: #757575;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  cursor: pointer;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 80%;
  height: 90%;
  width: 100%;
}
.slide-dots03 li.slick-active button::before {
  background-color: #FFCE55;
  height: 120%;
  width: 130%;
  bottom: -70%;
}

button {
  background: none;
  border: none;
  outline: none;
  padding: 0 0.5em;
}

 @media screen and (max-width:750px){
    .slide-dots03 li button::before {
     width: 55%;
     height: 45%;
     top: 30%;
    }
    .slide-dots03 li.slick-active button::before {
  background-color: #FFCE55;
  height: 60%;
  width: 75%;
  bottom: 30%;

}
}



.faq-next-arrow, .faq-prev-arrow {
    width: 7%;
    position: absolute;
    z-index: 1; /* Ensure buttons appear above slides */
    cursor: pointer;
    outline: none;
    top: 40%;
  }


  .faq-prev-arrow {
    left: 0%; /* Adjust as needed */
  }
  .faq-next-arrow {
    right: 0; /* Adjust as needed */
  }
  
  .tsuyuhareru-faq-button{
    position: absolute;
    top: 62%;
  }

  .tsuyuhareru-company{
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    display: flex;
  justify-content: center;
  align-items: center;
  }

 
.tsuyuhareru-company li {
  margin-right: 20px;
  list-style: none;
  
}


.tsuyuhareru-company li:last-child {
  margin-right: 0;
}
.tsuyuhareru-company a {
  text-decoration: none;
  color: #fff;
  font-size:min(2.6vw,18px);
  font-family: 
    "Yu Gothic",
    "YuGothic", 
    "Hiragino Kaku Gothic ProN",
    "Meiryo", 
    "MS PGothic", 
    sans-serif;
    font-weight: 500;
}
ul.tsuyuhareru-company{
    padding: 0;
}




/*===================================================
CTA
===================================================*/

.tsuyuhareru-cta{
    position: relative;
}

.tsuyuhareru-cta-button{
    width: 100%;
    position: absolute;
    top:71.1%;
    left: 50%;
    transform: translateX(-50%);
}

.tsuyuhareru-cta-link{
      width: 100%;
    position: absolute;
    top:81.8%;
    left: 50%;
    transform: translateX(-50%);

}

/*===================================================
ユーチューブ
===================================================*/

.tsuyuhareru-lp-09{
    position: relative;
}
.tsuyuhareru-lp-youtube {
    position: absolute;
    top: 87.5%;
    left: 50%;
    transform: translateX(-50%);
    width:87.5%;
    max-width: 750px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.tsuyuhareru-lp-youtube iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}



.tsuyuhareru-cart{
  display: none;
}