/* ==========================================================================
   WordPress 向け追加スタイル（styles.css は現サイトのまま。変更はこちらに書く）
   ========================================================================== */

/* --- Contact Form 7 ------------------------------------------------------
   CF7 が出力する要素に、現サイトのフォーム（mailformpro）と同じ見た目を当てる */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.wpcf7-form .wpcf7-list-item {
  display: block;
  margin: 0;
}

.wpcf7-form .wpcf7-list-item label {
  display: block;
}

/* 同意チェックボックスのラベル（.checkbox-wrap 相当） */
.wpcf7-form .wpcf7-list-item-label {
  display: block;
  position: relative;
  font-size: max(1rem, 16px);
  font-weight: 400;
  line-height: 1.875;
  color: #333333;
  cursor: pointer;
  text-indent: 2.1875rem;
  margin-top: 1.25rem;
}

.wpcf7-form .wpcf7-list-item-label::before {
  content: "";
  border: 0.0625rem solid #333333;
  background-color: #fff;
  display: inline-block;
  width: 1.5625rem;
  height: 1.5625rem;
  position: absolute;
  top: 0.1875rem;
  left: 0;
  vertical-align: middle;
  text-align: center;
  margin-right: 0.625rem;
}

.wpcf7-form input[type=checkbox]:checked ~ .wpcf7-list-item-label::before {
  background-color: #333333;
}

.wpcf7-form input[type=checkbox]:checked ~ .wpcf7-list-item-label::after {
  content: "";
  background: url(../images/icon/icon-check.svg) no-repeat center;
  background-size: contain;
  -webkit-filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
          filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 0.3125rem;
  left: 0.1875rem;
}

.wpcf7-form input[type=checkbox]:focus-visible ~ .wpcf7-list-item-label::before {
  outline: none;
  -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #333333;
          box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #333333;
}

/* 入力エラー */
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5rem;
  font-size: max(0.875rem, 14px);
  color: #d00000;
}

.wpcf7-form .wpcf7-not-valid {
  border-color: #d00000;
}

/* 送信結果メッセージ */
.wpcf7-form .wpcf7-response-output {
  margin: 1.875rem 0 0;
  padding: 1rem 1.25rem;
  border: 0.125rem solid #0d51d9;
  font-size: max(1rem, 16px);
  line-height: 1.875;
  color: #333333;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
  border-color: #d00000;
}

.wpcf7-form .wpcf7-spinner {
  display: block;
  margin: 0.625rem auto 0;
}

.wpcf7-form .form__submit-btn {
  cursor: pointer;
}

.wpcf7-form .form__submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* --- 汎用固定ページ（page.php） ------------------------------------------ */
.page-default__content {
  width: min(100% - 2rem, 62.5rem);
  margin: 3.125rem auto 0;
  font-size: max(1rem, 16px);
  line-height: 1.875;
  color: #333333;
}

.page-default__content > * + * {
  margin-top: 1.25rem;
}

.page-default__content a {
  text-decoration: underline;
}

/* --- 説明ブロックの下のボタン（サービス一覧など）：文言を1行に収める --- */
.sentence-content__icon-btn {
  max-width: 25rem;
}

.sentence-content__icon-btn .icon-btn__text {
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .sentence-content__icon-btn .icon-btn__text {
    font-size: max(1.0625rem, 16px);
  }
}

/* --- 料金ページのバナー（画像は仮。差し替え時は png に変えてファイル名を合わせる） --- */
.banner--price {
  background-image: url(../images/price/price__banner-img--sp.svg);
}

@media screen and (min-width: 768px) {
  .banner--price {
    background-image: url(../images/price/price__banner-img--pc.svg);
  }
}

/* --- 成功事例ページのバナー（一覧・詳細共通。画像は仮。差し替え時は png に変えてファイル名を合わせる） --- */
.banner--case {
  background-image: url(../images/case/case__banner-img--sp.svg);
}

@media screen and (min-width: 768px) {
  .banner--case {
    background-image: url(../images/case/case__banner-img--pc.svg);
  }
}

/* --- 黒帯CTAで終わるページ：フッターの上余白をなくし、線1本でCTAとフッターナビを分ける --- */
body:has(.lp-cta) .footer {
  margin-top: 0;
}

body:has(.lp-cta) .footer__nav {
  border-top: 1px solid #c8c8c8;
}

/* --- ヘッダーのグローバルナビ：項目が増えても1行に収まるよう、PCでは左右の余白を画面幅に合わせて詰める --- */
@media screen and (min-width: 768px) {
  .header__nav .nav__link {
    padding-right: clamp(0.5rem, 1.2vw, 1.25rem);
    padding-left: clamp(0.5rem, 1.2vw, 1.25rem);
  }
}

/* --- 同意チェックボックス：入力欄と同じ列・同じ幅にそろえ、折り返した2行目もチェック枠の右からそろえる --- */
.wpcf7-form .wpcf7-list-item-label {
  padding-left: 2.1875rem;
  text-indent: 0;
}

/* 見出しと入力欄が横並びになる幅（styles.css の .form__item-wrapper と同じ 1024px〜）だけ、
   見出しとの上の間隔をなくし、入力欄と同じ幅にする。
   768〜1023px は縦並びなので、ここで幅を決めると高さが 700px に伸び、間隔もなくなって崩れる */
@media screen and (min-width: 1024px) {
  .wpcf7-form .wpcf7-list-item-label {
    margin-top: 0;
  }

  .wpcf7-form .form__item[role="group"] {
    flex: 0 0 43.75rem;
    width: 43.75rem;
  }
}

/* フッター下部の規約・サイトマップのリンク（小さめの文字で1行に並べる） */
.footer__policy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0 auto 1.25rem;
  padding: 0 1rem;
  list-style: none;
}

.footer__policy-link {
  color: #ffffff;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__policy-link:hover,
.footer__policy-link:focus-visible {
  text-decoration: none;
}

/* スマホのメニュー：開くときは visibility をすぐ visible にして、開いた直後にメニュー内へフォーカスを移せるようにする（閉じるときのフェードはそのまま） */
.toggle.js-is-open {
  -webkit-transition: opacity 0.6s ease, visibility 0s;
  transition: opacity 0.6s ease, visibility 0s;
}