@charset "UTF-8";

html {
  font-size: 100%;
}
body {
    background-color: #eef5fa;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.7;
    margin: 0; /* 追加 */
}


img {
  max-width: 100%;
  display:block; 
}
li {
  list-style: none;
}
a {
  color:#333;
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
}
.fv {
  max-width: 375px;
  margin: 0 auto;
  padding: 0px 0px 0px;
  text-align: center;
  background-image: url(../img/fv-bg-decoration.png); 
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}

/* 親要素（スマホ画像を囲むdivなど）に必須 */
.phone-wrap {
  position: relative;
}
.fv-phone {
  width: 100%;
  text-align: center;
}

.fv-phone img {
  width: 100%;
  margin-top: -20px;
}



.fv-copy-area {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0px;
}

.fv-lp-copy {
  width: 170px;
  position: relative;
  top: -30px;
  margin-right: -10px;
}

.fv-handwriting {
  width:170px;
  margin-top: 5px;
  margin-left: 10px;
 }

.fv-sub-copy {
  width: 210px;
  margin-top: 0px;
  margin-left: -10px; 
}

.fv-right-copy {
  display: flex;
  flex-direction: column;
  margin-top: 0; /* リセット */
  margin-left: 0; /* リセット */
}


.fv-cta {
  margin: 0 auto;
  margin-top: -143px;
  position: relative;
  z-index: 2;
}

.fv-head-copy {
  margin:0 auto 8px;
}

.fv-point-area {
  display: flex;
  justify-content: center;
  gap: 0px;
  margin-top: -48px;
  margin-bottom: 24px
}

.fv-point {
  width: 140px;
  margin-right: -10px;
}

.fv-main-copy {
  margin: 0 auto 8px;
}

.fv-lp-copy {
  width: 170px;
}

.fv-flower-area {
  position: relative;
}

.flower-left {
  position: absolute;
  left: 0;
  bottom: 68px;
  width: 90px;
}

.flower-right {
  position: absolute;
  right: 0;
  bottom: 115px;
  width: 80px;
}

.trouble {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  margin-top: 25px;
  overflow: hidden;
  background-color: #eef5fa;
  position: relative;
  z-index: 1;
}

.trouble-woman,
.trouble-list img {
  display: block;
  width: 100%;
}

.trouble-mark {
  position: absolute;
  right: 16px;
  top: 40%;
  width: 60px;
}

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

.trouble-head {
  position: relative;
  z-index: 2; /* 手前に */
}

.trouble-body {
  position: relative;
  margin-top: -135px; /* trouble-headの下に潜り込む量を調整 */
  z-index: 1; /* 後ろに */
}

.trouble-list {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
  background-color: rgba(50, 50, 50, 0.75);
  padding: 20px;
}

.trouble-dot {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
}

.solution-works {
  width: 100%;
  max-width: 375px;
  margin: 0 auto -5px;
}

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

.works-bg {
  background-image: url('img/bottom-bg.png');
  background-size: cover;
  background-position: center;
  padding: 0 0 40px;
  margin-top:  -2px;
}

.works {
  max-width: 375px;
  margin: 0 auto;
}

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

.features {
  max-width: 375px;
  margin: 0 auto;
  margin-top: -4px;
}

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


/* 価格エリア */
.price {
  max-width: 375px;
  margin: 0 auto;
  margin-top: -150px;
}

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

.price-cta {
  position: relative;
  z-index: 2;
  padding: 10px 0px 40px;
  margin-top: -165px;
}

.cta-btn-img {
  width: 100%;
  max-width: 375px;
  display: block;
  margin: 0 auto;
}

.flow {
  max-width: 375px;
  margin: 0 auto;
  margin-top: -10px;
}

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

.profile {
  max-width: 375px;
  margin: 0 auto;
}

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

.faq {
  max-width: 375px;
  margin: 0 auto;
}

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

.footer {
  background-color: #5bb8c8;
  color: #fff;
  text-align: center;
  padding: 20px;
  max-width: 375px;
  margin: 0 auto;
}

.footer a {
  color: #fff;
  text-decoration: underline;
  font-size: 0.75rem; /* 12px */
}

.footer p {
  font-size: 0.75rem;
  margin-top: 8px;
}