/* ==============================
   Contact page / CF7 専用スタイル
   ============================== */

/* 3) Contact Form 7 の見た目（任意） */
.custom-form {
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  color: #333;
}
.custom-form label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
}
.custom-form .required {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  background: #8ccad7;
  border-radius: 3px;
  font-weight: 700;
}
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 30px;
  border: 2px solid #8ccad7;
  border-radius: 5px;
  background: #f8f9fa;
  font-size: 14px;
  transition: border-color .3s ease, background-color .3s ease;
}
.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form textarea:focus {
  border-color: #8ccad7;
  outline: none;
  background: #e6f7fa;
}
.custom-form input[type="submit"] {
  display: block;
  width: 80%;
  margin: 0 auto;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  background: #8ccad7;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .3s ease;
}
.custom-form input[type="submit"]:hover { background: #6faebd; }

/* 4) CONTACT セクション（カバー全幅化＋内側幅） */
.edge-to-edge,
.entry-content .edge-to-edge,
.edge-to-edge.alignfull {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}
.edge-to-edge > .wp-block-cover__inner-container {
  max-width: 1200px;
  margin-inline: auto;
  padding: 48px 24px;
}
/* CONTACT 見出し */
.contact-hero {
  font-size: clamp(36px, 8vw, 88px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.1;
  text-align: center;
  margin: 24px 0 12px;
  color: #fff;
  text-transform: uppercase;
}

/* reCAPTCHA 表示調整 */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-notice{ font-size:11px; color:#999; text-align:center; margin-top:8px; }
.recaptcha-notice a{ color:#999; text-decoration:none; }
.recaptcha-notice a:hover{ text-decoration:underline; }

/* 個人情報同意セクション */
.privacy-block{
  padding:0 0 30px;
  font-size:14px;
  color:#fff;
  text-align:center;
}
.privacy-block__title{
  font-weight:700;
  font-size:14px;
  margin:0 0 2px !important;
}
.privacy-block__lead{ margin: 6px 0 10px; }
.privacy-block__list{
  list-style: disc;
  padding-left: 1.5em;
  display:inline-block;
  text-align:left;
  margin:0 0 16px;
}
.privacy-block__list li{ margin:0 0 6px; }
.privacy-block__accept{ margin-top:12px; }
.consent-check{ font-size:14px; color:#fff; }
.consent-check input[type="checkbox"]{ transform:scale(1.1); margin-right:.4em; }

/* 7) スマホ最適化（Contact 専用） */
@media (max-width: 600px){
  html { -webkit-text-size-adjust: 100%; }

  /* コンテナ自体の余白と block-gap を縮小 */
  .edge-to-edge > .wp-block-cover__inner-container{
    padding: 12px min(5vw,22px) !important;
    --wp--style--block-gap: 4px !important;
  }

  /* 見出しの上下間隔を最小化 */
  h1.contact-hero,
  .wp-block-heading.contact-hero,
  .contact-hero{
    font-size: clamp(26px, 7.2vw, 36px);
    margin: 2px 0 2px !important;
    padding: 0 !important;
  }

  /* 見出し直後の Spacer を圧縮（ある場合のみ） */
  .contact-hero + .wp-block-spacer{
    height: 2px !important;
    margin: 0 !important;
  }

  /* 直後ブロックを“さらに”引き上げる（少しだけ強め） */
  .contact-hero + *{
    margin-top: clamp(-24px, -5vw, -12px) !important; /* ← もう少しだけ詰める */
    padding-top: 0 !important;
  }
  /* 直後が段落なら行間も少しだけ詰める */
  .contact-hero + p,
  .contact-hero + * > p:first-child{
    line-height: 1.32 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 背景帯の段落（青帯）を控えめに詰める */
  .contact-hero + * > p.has-background:first-child{
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .contact-hero + * > p.has-background:first-child::before,
  .contact-hero + * > p.has-background:first-child::after{
    content: none !important;
    display: none !important;
  }

  /* VK Blocks の余白ユーティリティを無効化 */
  .contact-hero + * > p:first-child[class*="vk_block-margin"],
  .contact-hero + * > p:first-child[class*="vk_block-padding"]{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* その他（既存） */
  .privacy-block__lead{
    font-size: clamp(13px, 3.4vw, 15px);
    line-height: 1.9;
    white-space: normal;
  }
  .privacy-block__list{
    font-size: clamp(11.5px, 3.0vw, 13px);
    line-height: 1.8;
  }
  .privacy-block__list li{ white-space: nowrap; }

  /* 同意チェック：スマホで一行＆中央 */
  .privacy-block__accept{ 
    display:flex; 
    justify-content:center; 
    align-items:center;
  }
  .privacy-block__accept .wpcf7-list-item{
    display:inline-flex !important;
    align-items:center;
    gap:.55em;
    white-space:nowrap;
  }
  .privacy-block__accept .wpcf7-list-item-label{
    white-space:nowrap; 
    word-break:keep-all;
  }
  .consent-check{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:.55em;
    white-space:nowrap;
    text-wrap:nowrap;
    word-break:keep-all;
    font-size: clamp(12px, 3.0vw, 13px);
    line-height: 1.6;
    margin-top: 10px;
  }
  .consent-check input[type="checkbox"]{
    flex:0 0 auto;
    margin:0 .5em 0 0;
    transform:scale(1.0);
  }
  .privacy-block__accept,
  .privacy-block__accept *{
    max-width: none !important;
  }

  .custom-form input[type="text"],
  .custom-form input[type="email"],
  .custom-form input[type="tel"],
  .custom-form textarea{ font-size: 16px; line-height: 1.6; }
  .custom-form input[type="submit"]{ font-size: clamp(15px, 4vw, 17px); width: 88%; }
}

/* --- 強制上書き（～820px） --- */
@media (max-width: 820px){
  .contact-lead{
    font-size: 13px !important;
    line-height: 1.9 !important;
    text-align: center !important;
    margin: .35em auto .55em !important;
    position: relative;
    min-height: calc(1em * 1.9 * 2);
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .contact-lead::after{
    content: "お見積りや制作に関するご相談は\A以下フォームより、お気軽にご連絡ください。";
    display: block;
    white-space: pre-line;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font: inherit; line-height: inherit; text-align: inherit;
    pointer-events: none;
  }

  .contact-note{
    font-size: 11.5px !important;
    line-height: 1.85 !important;
    text-align: center !important;
    margin: .4em auto 1.4em !important;
  }

  /* 個人情報リード文：行ボックスを消して差し替え（事例と同じ原理） */
  .privacy-block p.privacy-block__lead,
  p.privacy-block__lead{
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    position: relative;
    text-align: center;
  }
  .privacy-block p.privacy-block__lead::after,
  p.privacy-block__lead::after{
    content: "お預かりした個人情報は、ご依頼に関する\Aやり取りのみに使用いたします。\Aまた、次のいずれかに該当する場合を除き\A第三者に提供しません。";
    display: block;
    white-space: pre-line;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
    line-height: 1.9 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-align: center !important;
    pointer-events: none;
  }
}