@charset "UTF-8";
/*----------------------------------------------------
  reset
----------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Mohave:wght@500&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
small,
button,
time,
figure {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

li,
dd {
  list-style-type: none;
}

header,
footer,
nav,
section,
article,
aside,
figure,
figcaption {
  display: block;
}

img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  --clipPath: inset(0 100% 0 0);
  --opacity: 0;
}

a::before {
  content: "";
  display: block;
  position: absolute;
  width: 110%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-clip-path: var(--clipPath);
  clip-path: var(--clipPath);
  opacity: var(--opacity);
}

/*----------------------------------------------------
共通
----------------------------------------------------*/
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #333333;
  font-weight: 500;
  font-size: 1rem;
}

.inner {
  margin: 0 auto;
  padding: 0 30px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

@media screen and (max-width: 767px) {
  .inner {
    padding: 0 15px;
  }
}

.wrap {
  max-width: 600px;
  margin: 0 auto;
  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
  background-color: #fffcf7;
}

/* ===============================================
# faq
=============================================== */

.faq {
  padding-bottom: 12.8vw;
}

@media screen and (min-width: 600px) {
  .faq {
    padding-bottom: 76.8px;
  }
}

.faq__list {
  position: relative;
}

.faq-list__item {
  background-color: #f7ebe9;
  border-radius: 8px;
}

.faq-list__item + .faq-list__item {
  margin-top: 3.2vw;
}

@media screen and (min-width: 600px) {
  .faq-list__item + .faq-list__item {
    margin-top: 19.2px;
  }
}

.faq-list__item-content {
  display: flex;
}

@media screen and (max-width: 374px) {
  .faq-list__item-content {
    font-size: 4.26666vw;
    gap: 4.26666vw;
    padding: 4.26666vw;
  }
}

.faq-list__item-label {
  font-size: 5.86vw;
  line-height: 1;
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 400;
  color: #ca8273;
}

@media screen and (min-width: 600px) {
  .faq-list__item-label {
    font-size: 35.2px;
  }
}

.faq-list__item-question {
  line-height: 1.4;
  font-weight: bold;
  padding-left: 3.73vw;
  font-size: 4.8vw;
  color: #ca8273;
}

@media screen and (min-width: 600px) {
  .faq-list__item-question {
    font-size: 28.8px;
    padding-left: 22.4px;
  }
}

.faq-list__item-content--question {
  position: relative;
  align-items: center;
  cursor: pointer;
  padding: 6.4vw 17.06vw 5.33vw 6.4vw;
}

@media screen and (min-width: 600px) {
  .faq-list__item-content--question {
    padding: 38.4px 102.4px 32px 38.4px;
  }
}

.faq-list__item-content--question img {
  max-width: 18px;
  max-height: 41px;
}

@media screen and (max-width: 374px) {
  .faq-list__item-content--question img {
    max-width: 4.5vw;
  }
}

@media screen and (min-width: 375px) {
  .faq-list__item-content--question img {
    max-width: 6vw;
    max-height: clamp(41px, 8.4vw, 65px);
  }
}

.faq-list__item-content--question::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 2.5px;
  top: 50%;
  right: 16px;
  background-color: #ca8273;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (min-width: 375px) {
  .faq-list__item-content--question::before {
    width: clamp(18px, 3.5vw, 25px);
    right: clamp(16px, 3.5vw, 25px);
    height: clamp(3px, 0.625vw, 4px);
  }
}

.faq-list__item-content--question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 2.5px;
  background-color: #ca8273;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}

@media screen and (min-width: 375px) {
  .faq-list__item-content--question::after {
    width: clamp(18px, 3.5vw, 25px);
    right: clamp(16px, 3.5vw, 25px);
    height: clamp(3px, 0.625vw, 4px);
  }
}

.faq-list__item-content--question.is-open::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

.faq-list__item-answer {
  line-height: calc(25.6 / 16);
}

.faq-list__item-content--answer {
  padding: 4.26vw 6.4vw 6.4vw 6.4vw;
  position: relative;
  font-size: 4vw;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

@media screen and (min-width: 600px) {
  .faq-list__item-content--answer {
    padding: 25.6px 38.4px 38.4px 38.4px;
    font-size: 24px;
  }
}

.faq-list__item-content--answer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 79.2vw;
  height: 1px;
  background-color: #f2dbd6;
}

@media screen and (min-width: 600px) {
  .faq-list__item-content--answer:before {
    width: 475.2px;
  }
}

.faq-list__item-hidden {
  display: none;
}

/* ===============================================
# access
=============================================== */
.access {
  margin-bottom: 3.46vw;
}

@media only screen and (min-width: 600px) {
  .access {
    margin-bottom: 20.8px;
  }
}

/* ===============================================
# footer
=============================================== */
.footer {
  background-color: #ca8273;
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 3.2vw;
  padding: 4.26vw 0;
  margin-bottom: 32vw;
  font-family: "Zen Kaku Gothic New", sans-serif;
  position: relative;
}

@media only screen and (min-width: 600px) {
  .footer {
    font-size: 19.2px;
    padding: 25.6px 0;
    margin-bottom: 192px;
  }
}

.footer:before {
  content: "";
  background-color: #fffcf7;
  width: 100%;
  height: 32vw;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%);
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 600px) {
  .footer:before {
    height: 192px;
  }
}

/* ===============================================
# fixed-cta
=============================================== */
.fixed-cta {
  background-color: #f0fbfb;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0 0 0 / 8%);
  width: 93.33vw;
  padding: 3.2vw 2.66vw 3.2vw 0;
  opacity: 0;
}

@media only screen and (min-width: 600px) {
  .fixed-cta {
    width: 560px;
    padding: 19.2px 16px 19.2px 0;
  }
}

.fixed-cta p {
  width: 100%;
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(13px, 3.733vw, 16px);
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 0px;
  text-align: center;
}
.fixed-cta-items {
  display: flex;
}

.fixed-cta-link {
  width: 30.4vw;
}

@media only screen and (min-width: 600px) {
  .fixed-cta-link {
    width: 182.4px;
  }
}

.fixed-cta-link + .fixed-cta-link {
  margin-left: 1.33vw;
}

@media only screen and (min-width: 600px) {
  .fixed-cta-link + .fixed-cta-link {
    margin-left: 8px;
  }
}

.fixed-cta img {
  display: block;
}

.fixed-cta-bg {
  position: absolute;
  left: 17.6vw;
  bottom: 10.93vw;
  width: 20.26vw;
}

@media only screen and (min-width: 600px) {
  .fixed-cta-bg {
    left: 105.6px;
    bottom: 65.6px;
    width: 121.6px;
  }
}

.fixed-cta-bg02 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26.4vw;
}

@media only screen and (min-width: 600px) {
  .fixed-cta-bg02 {
    width: 158.4px;
  }
}

.fixed-cta-bg03 {
  position: absolute;
  left: 16.87vw;
  bottom: 12.43vw;
  width: 5.25vw;
}

@media only screen and (min-width: 600px) {
  .fixed-cta-bg03 {
    left: 101.26px;
    bottom: 74.62px;
    width: 31.53px;
  }
}

/* ===============================================
# mv
=============================================== */
.mv {
  margin-bottom: 8.8vw;
  position: relative;
}

@media only screen and (min-width: 600px) {
  .mv {
    margin-bottom: 52.8px;
  }
}

.mv-banner {
  padding: 12px 15px 0;
}

.mv__cta {
  position: absolute;
  bottom: 3.5%;
  left: 0;
  right: 0;
  padding: 0 7px;
}
.cta {
  display: block;
}

/* ===============================================
# faga-cta
=============================================== */

.faga-cta {
  position: relative;
  padding: 4vw 0 2.66vw;
  background-color: #f0fbfb;
  border-top: 2px solid #d9f4f4;
  border-bottom: 2px solid #d9f4f4;
}

@media only screen and (min-width: 600px) {
  .faga-cta {
    padding: 24px 0 16px;
  }
}

.faga-cta-top {
  width: 83.2vw;
  max-width: 499.2px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faga-cta-flex {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.faga-cta-left {
  display: block;
  width: 41.2vw;
  margin-right: 1.06vw;
  filter: drop-shadow(0 4px 8px rgba(0 0 0 / 8%));
  transition: all 0.5s ease;
}

@media only screen and (min-width: 600px) {
  .faga-cta-left {
    width: 247.2px;
    margin-right: 6.4px;
  }
}

.faga-cta-right {
  display: block;
  width: 41.2vw;
  filter: drop-shadow(0 4px 8px rgba(0 0 0 / 8%));
  transition: all 0.5s ease;
}

@media only screen and (min-width: 600px) {
  .faga-cta-right {
    width: 247.2px;
  }
}

.faga-cta-left:hover,
.faga-cta-right:hover {
  filter: none;
}

.faga-cta-bottom {
  width: 76vw;
  max-width: 456px;
  margin: 2.66vw auto 0;
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 600px) {
  .faga-cta-bottom {
    margin: 16px auto 0;
  }
}

.faga-cta-woman {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 22.13333vw;
  max-width: 132.8px;
}

/* ===============================================
# trouble
=============================================== */

.trouble {
  margin-top: 9.6vw;
}

@media only screen and (min-width: 600px) {
  .trouble {
    margin-top: 57.6px;
  }
}

.trouble img:nth-of-type(2) {
  margin-top: -8vw;
}

@media only screen and (min-width: 600px) {
  .trouble img:nth-of-type(2) {
    margin-top: -48px;
  }
}

/* ===============================================
# injection
=============================================== */
.injection {
  margin-bottom: 3.46vw;
}

@media only screen and (min-width: 600px) {
  .injection {
    margin-bottom: 20.8px;
  }
}



.injection-upper {
  background-color: #f7ebe9;
  padding-top: 16px;
  padding-bottom: 24px;
  /* padding-bottom: clamp(0px, 24.8vw, 150px);  */

  position: relative;
}

.injection-title-img {
  margin: 0 auto;
  width: 89.6%;
  display: flex;
  justify-content: center;
}

.injection-circles {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  width: 98.27%;
  z-index: 2;
}

.injection-circle {
  background-color: rgba(255, 255, 255, 0.8);
  width: 24.8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.injection-circle-down {
  transform: translateY(47.31%); /* 375px以上で変化、600pxで150pxまで */
}

.injection-circle-center + .injection-circle-center {
  margin-left: 2.13%;
}

.injection-circle-inner {
  width: 94.13%;
  height: 94.13%;
  display: flex;
  align-items: center;
  justify-content: center;
}



.injection-movie-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
}

.injection-movie {
  width: 100%;
  aspect-ratio: 375/229;
  object-fit: cover;
  height: auto;
  display: block;
  /* filter: brightness(0.8); */
}

@media only screen and (max-width: 600px) { 
  
  .injection-movie {
    transform: rotate(0deg);
  }
}

.injection-movie-wrapper::before,
.injection-movie-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20%; /* グラデーションの高さ（調整可能） */
  pointer-events: none;
}

.injection-movie-wrapper::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(247, 235, 233, 1), rgba(247, 235, 233, 0));
  z-index: 1;
}

.injection-movie-wrapper::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(247, 235, 233, 1), rgba(247, 235, 233, 0));
}

.injection-under {
  background: linear-gradient(to bottom, #f7ebe9 0%, #f7ebe9 90%, rgba(247, 235, 233, 0) 100%);
  margin-bottom: 13%;
  position: relative;
}

.injection-under-img {
  margin-top: -22px;
}

.injection-arrow{
  background-color: var(---bg-orange100, #F7EBE9);
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.injection-arrow img{
  width: 141px;
}

.injection-movie-wrapper02{
  background-color: var(---bg-orange100, #F7EBE9);
  width: 100%;
  display: flex;
  justify-content: center;
}

.injection-movie-container{
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.10);
  display: flex;
  width: 89%;
  padding: 24px 0 24px 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
}

.injection-movie02{
  width: 61.5%;
}
/* ===============================================
# features
=============================================== */
.features {
  margin-top: -10.66vw;
}

@media only screen and (min-width: 600px) {
  .features {
    margin-top: -64px;
  }
}

/* ===============================================
# features
=============================================== */
.features {
  margin-bottom: 3.46vw;
}

@media only screen and (min-width: 600px) {
  .features {
    margin-bottom: 20.8px;
  }
}

/* ===============================================
# support
=============================================== */
.support {
  margin-top: -8.53vw;
  background-color: #fcf7f7;
}

@media only screen and (min-width: 600px) {
  .support {
    margin-top: -51.2px;
  }
}

.support img:nth-of-type(2),
.support img:nth-of-type(3),
.support img:nth-of-type(4),
.support img:nth-of-type(5) {
  margin: 0 4vw;
  width: 92vw;
}

@media only screen and (min-width: 600px) {
  .support img:nth-of-type(2),
  .support img:nth-of-type(3),
  .support img:nth-of-type(4),
  .support img:nth-of-type(5) {
    margin: 0 24px;
    width: 552px;
  }
}

.support img:nth-of-type(2),
.support img:nth-of-type(3),
.support img:nth-of-type(4) {
  margin-bottom: 10.66vw;
}

@media only screen and (min-width: 600px) {
  .support img:nth-of-type(2),
  .support img:nth-of-type(3),
  .support img:nth-of-type(4) {
    margin-bottom: 64px;
  }
}

.support img:nth-of-type(5) {
  margin-bottom: 13.33vw;
}

@media only screen and (min-width: 600px) {
  .support img:nth-of-type(5) {
    margin-bottom: 80px;
  }
}

/* ===============================================
# line
=============================================== */

.line {
  background-color: #57b688;
  position: relative;
  z-index: 0;
  padding-bottom: 7.46vw;
}

@media only screen and (min-width: 600px) {
  .line {
    padding-bottom: 44.8px;
  }
}

.line-img {
  margin: 2.13vw 4vw 0;
  width: 92vw;
}

@media only screen and (min-width: 600px) {
  .line-img {
    margin: 12.8px 24px 0;
    width: 552px;
  }
}

.line-img02 {
  margin: 0 4vw 4.26vw;
  width: 92vw;
}

@media only screen and (min-width: 600px) {
  .line-img02 {
    margin: 0 24px 25.6px;
    width: 552px;
  }
}

.line-img03 {
  margin: 0 4vw 6.4vw;
  width: 92vw;
}

@media only screen and (min-width: 600px) {
  .line-img03 {
    margin: 0 24px 38.4px;
    width: 552px;
  }
}

.line-flex {
  display: flex;
  justify-content: center;
}

.line-img04,
.line-img05 {
  width: 37.3vw;
}

@media only screen and (min-width: 600px) {
  .line-img04,
  .line-img05 {
    width: 224px;
  }
}

.line-link {
  display: block;
  margin-left: 6.4vw;
}

@media only screen and (min-width: 600px) {
  .line-link {
    margin-left: 38.4px;
  }
}

.line-bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  mix-blend-mode: plus-lighter;
  z-index: -1;
}

.line-bg02 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  mix-blend-mode: plus-lighter;
  z-index: -1;
}