.pc {
  display: block;
}
.sp {
  display: none;
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.fv {
  position: relative;
  max-width: 100%;
  height: auto;
  padding-left: 0 !important;
}

.fv-cta {
  position: absolute;
  bottom: 100px;
  left: 100px;
  max-width: 400px;
  display: inline-block;
  z-index: 5;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 30px 64px;
  background: #ffe14d;
  color: #1a237e;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.25s;
  line-height: 1; /* これがズレ防止に効きます */
}

.contact-btn span {
  font-size: 22px;
}

.contact-btn-sp span {
  font-size: 18px;
}

.contact-btn:hover {
  background: #ffd633;
}

.label {
  line-height: 1;
} /* 日本語の行間を抑える */

.icon {
  display: inline-grid;
  place-items: center; /* 完全中央寄せ */
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: #4c89d3;
}
.icon svg {
  display: block;
} /* 余白除去 */

.media {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 0 auto;
  justify-content: center;
  margin-top: 50px;
}

.banner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.banner-img {
  max-width: 500px;
  max-height: 140px;
  width: 100%;
  height: auto;
  display: block;
}

.sample-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sample {
  max-width: 400px;
  width: 100%;
  height: auto;
  display: block;
}

.shousai {
  margin: 0 auto;
  display: block;
  margin-top: 20px;
  max-width: 300px;
  height: auto;
}

.service {
  position: relative;
  margin-top: 100px;
}

.service-img {
  display: block;
  max-width: 1000px;
  margin: 0 auto;
}

.cta-area {
  position: relative;
}

.cta-area-img {
  margin-top: 90px;
}

.cta-area-button {
  position: absolute;
  bottom: 15%;
  max-width: 400px;
  height: auto;
  display: block;
  left: 50%;
  transform: translateX(-50%);
}

.service-cta {
  position: absolute;
  bottom: 40px;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  max-width: 400px;
  display: inline-block;
  z-index: 5;
}

.fee {
  display: block;
  max-width: 1000px;
  margin: 0 auto;
}

.fee-cta {
  position: absolute;
  transform: translateX(-50%);
  bottom: 100px;
  left: 50%;
  max-width: 400px;
  display: inline-block;
  z-index: 5;
}

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

.cta {
  position: relative;
}

.footer-cta {
  position: absolute;
  transform: translateX(-50%);
  bottom: 30px;
  left: 50%;
  max-width: 400px;
  display: inline-block;
  z-index: 5;
}

@media (max-width: 1200px) {
  .container {
    max-width: 800px;
  }
  .fv-cta {
    top: 330px;
    left: 60px;
    max-width: 300px;
  }

  .fee-cta {
    bottom: 40px;
    left: 50%;
  }

  .footer-cta {
    bottom: 0px;
  }
}

.fv-sp {
  position: relative;
  max-width: 100%;
  height: auto;
  padding-left: 0 !important;
}

.fv-cta-sp {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 350px; /* SPサイズ */
  text-align: center; /* 中央寄せ */
}

.seb-cta-sp {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 350px; /* SPサイズ */
  text-align: center; /* 中央寄せ */
}

.contact-btn-sp {
  display: inline-flex; /* 中央に寄せる */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 48px;
  background: #ffe14d;
  color: #1a237e;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.25s;
  line-height: 1;
}

.contact-btn-sp:hover {
  background: #ffd633;
}

.contact-btn-sp .label {
  line-height: 1;
}

.contact-btn-sp .icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4c89d3;
  flex-shrink: 0;
}

.contact-btn-sp .icon svg {
  display: block;
}

.fee-cta img {
  display: block;
  width: 350px;
  height: auto;
}

.problem-sp {
  display: block;
  margin: 0 auto;
}

.banner-sp {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sample-sp {
  display: block;
  max-width: 70%;
  margin: 0 auto;
}

.service-sp {
  position: relative;
}

.cta-area-sp {
  position: relative;
}

.service-cta-sp {
  position: absolute;
  transform: translateX(-50%);
  bottom: 30px;
  left: 50%;
  display: inline-block;
  z-index: 5;
  width: 350px;
}

.fee-sp {
  position: relative;
}

.fee-cta-sp {
  position: absolute;
  transform: translateX(-50%);
  bottom: 10px;
  left: 50%;
  display: inline-block;
  z-index: 5;
  width: 350px;
}

.footer-sp {
  position: relative;
}

.footer-cta-sp {
  position: absolute;
  transform: translateX(-50%);
  bottom: 30px;
  left: 50%;
  display: inline-block;
  z-index: 5;
  width: 350px;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  gap: 40px;
  align-items: start; /* 上揃え */
  background: url("<?php echo esc_url(get_stylesheet_directory_uri() . '/img/lp/bg.png'); ?>")
    no-repeat center center;
  background-size: cover; /* 画像を領域いっぱいに拡大縮小 */
  padding-left: 100px;
}

.mt-30 {
  margin-top: 30px;
}

.ml-300 {
  margin-left: 300px;
}

.img-200 {
  max-width: 200px;
  height: auto;
}

.company-block {
  display: inline-block;
  margin: 0;
  text-align: left;
}

.company-block img {
  display: block; /* 画像をブロック要素に */
  margin: 0; /* 画像自体を中央寄せ */
}

.company-text {
  margin-top: 20px;
  line-height: 1.4;
}

.footer-sp-cover {
  padding: 50px 10px;
  display: flex;
  flex-direction: column;
  gap: 40px; /* カラム間の余白 */
  align-items: start; /* 上揃え */
  background: url("<?php echo esc_url(get_stylesheet_directory_uri() . '/img/lp/bg.png'); ?>")
    no-repeat center center;
  background-size: cover;
}

.img-200-sp {
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.fit {
  width: 100%;
}

.my-50 {
  margin-top: 30px !important;
}

.company-text-sp {
  margin-top: 20px;
  line-height: 1.4;
  text-align: center;
}

.fv-img {
  height: auto;
}

.contact-btn-sp {
  display: inline-flex; /* 中央に寄せる */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 48px;
  background: #ffe14d;
  color: #1a237e;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.25s;
  line-height: 1;
}

/* 375px以下では解除（高さ自動） */
@media screen and (max-width: 375px) {
  .fv-img {
    height: auto;
  }

  .contact-btn-sp {
    padding: 16px 40px;
  }
}