/* =========================================================
   固定ページ「お問い合わせ」専用CSS
   ※この固定ページだけの追加CSSに入れる
   ※共通デザインは大元の .sanraku-page / .sr- 系CSSを使用
   ※Contact Form 7 のフォーム表示をこのページ内だけ整える
   ※不要なHTMLを隠すCSSは使わない
   ※HTML内に style タグは入れない
   ========================================================= */


/* ------------------------------
   このページの基本変数
------------------------------ */

.sanraku-contact {
  --contact-serif: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --contact-sans: "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --contact-ink: var(--sr-ink, #2c2a27);
  --contact-text: var(--sr-text, #403b35);
  --contact-muted: var(--sr-muted, #756d65);
  --contact-gold: var(--sr-gold, #9d773d);
  --contact-red: var(--sr-red, #9d1714);
  --contact-border: rgba(86, 68, 42, 0.095);
  --contact-body-size: 16px;
  --contact-body-line: 2;
}


/* ------------------------------
   このページの英字ラベル統一
------------------------------ */

.sanraku-contact .sr-label {
  color: var(--contact-gold) !important;
  font-family: "Times New Roman", var(--contact-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.17em;
}


/* ------------------------------
   このページの見出し調整
------------------------------ */

.sanraku-contact .sr-title {
  font-family: var(--contact-serif);
  font-size: clamp(23px, 1.9vw, 30px) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.05em;
}

/* ------------------------------
   このページのセクション余白
------------------------------ */

.sanraku-contact .sr-section,
.sanraku-contact .sr-section-soft {
  padding: 64px 0;
}


/* ------------------------------
   リードカード
------------------------------ */

.sanraku-contact .contact-lead-card {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.sanraku-contact .contact-lead-card .sr-section-head {
  margin-bottom: 0;
}

.sanraku-contact .contact-lead-card .sr-lead {
  max-width: 720px;
  color: var(--contact-text);
  font-family: var(--contact-sans);
  font-size: var(--contact-body-size);
  line-height: var(--contact-body-line);
  text-align: left;
}


/* ------------------------------
   お問い合わせ前の案内
------------------------------ */

.sanraku-contact .contact-info-card {
  max-width: 1000px;
  margin: 0 auto;
}

.sanraku-contact .contact-info-card .sr-section-head {
  text-align: center;
}

.sanraku-contact .contact-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}

.sanraku-contact .contact-guide-item {
  padding: 26px 26px 28px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(86, 68, 42, 0.075);
}

.sanraku-contact .contact-guide-item h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--contact-red) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--contact-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.06em;
}

.sanraku-contact .contact-guide-item p {
  margin: 0;
  color: #4f4942;
  font-family: var(--contact-sans);
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.04em;
}


/* ------------------------------
   フォームカード
------------------------------ */

.sanraku-contact .contact-form-card {
  max-width: 900px;
  margin: 0 auto;
}

.sanraku-contact .contact-form-card .sr-section-head {
  margin-bottom: 30px;
  text-align: center;
}

.sanraku-contact .contact-form-card .sr-lead {
  max-width: 700px;
  color: var(--contact-text);
  font-family: var(--contact-sans);
  font-size: var(--contact-body-size);
  line-height: var(--contact-body-line);
  text-align: left;
}

.sanraku-contact .contact-form-area {
  max-width: 720px;
  margin: 0 auto;
}


/* ------------------------------
   Contact Form 7 基本調整
------------------------------ */

.sanraku-contact .wpcf7 {
  color: var(--contact-text);
  font-family: var(--contact-sans);
  font-size: var(--contact-body-size);
  line-height: 1.8;
}

.sanraku-contact .wpcf7 p {
  margin: 0 0 22px;
  color: var(--contact-text);
  font-size: var(--contact-body-size);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.sanraku-contact .wpcf7 label {
  display: block;
  color: var(--contact-ink);
  font-family: var(--contact-sans);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.sanraku-contact .cf7-required {
  display: inline-block;
  margin-left: 4px;
  color: var(--contact-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sanraku-contact .wpcf7 input[type="text"],
.sanraku-contact .wpcf7 input[type="email"],
.sanraku-contact .wpcf7 input[type="tel"],
.sanraku-contact .wpcf7 input[type="url"],
.sanraku-contact .wpcf7 input[type="number"],
.sanraku-contact .wpcf7 select,
.sanraku-contact .wpcf7 textarea {
  width: 100%;
  margin-top: 8px;
  padding: 13px 14px;
  color: var(--contact-ink);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(86, 68, 42, 0.18);
  border-radius: 2px;
  box-sizing: border-box;
  font-family: var(--contact-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}

.sanraku-contact .wpcf7 textarea {
  min-height: 180px;
  resize: vertical;
}

.sanraku-contact .wpcf7 input:focus,
.sanraku-contact .wpcf7 select:focus,
.sanraku-contact .wpcf7 textarea:focus {
  outline: none;
  border-color: rgba(157, 23, 20, 0.42);
  box-shadow: 0 0 0 3px rgba(157, 23, 20, 0.055);
}

.sanraku-contact .cf7-form-note {
  margin: 0 0 18px !important;
  color: var(--contact-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.04em;
}

.sanraku-contact .wpcf7 input[type="submit"],
.sanraku-contact .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 28px;
  color: #ffffff !important;
  background: var(--contact-red);
  border: 1px solid var(--contact-red);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--contact-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sanraku-contact .wpcf7 input[type="submit"]:hover,
.sanraku-contact .wpcf7-submit:hover {
  opacity: 0.86;
  transform: translateY(-1px);
}

.sanraku-contact .wpcf7 .wpcf7-spinner {
  margin-left: 12px;
}

.sanraku-contact .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: var(--contact-red);
  font-size: 13px;
  line-height: 1.6;
}

.sanraku-contact .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(86, 68, 42, 0.14) !important;
  color: var(--contact-text);
  font-size: 14.5px;
  line-height: 1.8;
}


/* ------------------------------
   補足
------------------------------ */

.sanraku-contact .contact-note-card {
  max-width: 900px;
  margin: 0 auto;
}

.sanraku-contact .contact-note-list {
  border-top: 1px solid var(--contact-border);
}

.sanraku-contact .contact-note-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--contact-border);
}

.sanraku-contact .contact-note-item h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--contact-red) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--contact-serif) !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.06em;
}

.sanraku-contact .contact-note-item p {
  margin: 0;
  color: #4f4942;
  font-family: var(--contact-sans);
  font-size: var(--contact-body-size);
  line-height: var(--contact-body-line);
  letter-spacing: 0.04em;
}

.sanraku-contact .contact-tel-link {
  color: var(--contact-red) !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(157, 23, 20, 0.28);
}


/* ------------------------------
   CTA
------------------------------ */

.sanraku-contact .contact-cta-card .sr-lead {
  color: var(--contact-text);
  font-family: var(--contact-sans);
  font-size: var(--contact-body-size);
  line-height: var(--contact-body-line);
}


/* ------------------------------
   スマホ
------------------------------ */

@media (max-width: 560px) {
  .sanraku-contact {
    --contact-body-size: 15.5px;
    --contact-body-line: 1.95;
  }

  .sanraku-contact .sr-section,
  .sanraku-contact .sr-section-soft {
    padding: 52px 0;
  }

  .sanraku-contact .sr-title {
    font-size: 22px !important;
    line-height: 1.65 !important;
  }

  .sanraku-contact .contact-lead-card {
    text-align: left;
  }

  .sanraku-contact .contact-lead-card .sr-section-head {
    text-align: center;
  }

  .sanraku-contact .contact-lead-card .sr-lead {
    max-width: 330px;
  }

  .sanraku-contact .contact-info-card .sr-section-head,
  .sanraku-contact .contact-form-card .sr-section-head,
  .sanraku-contact .contact-note-card .sr-section-head {
    text-align: center;
  }

  .sanraku-contact .contact-guide-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sanraku-contact .contact-guide-item {
    padding: 22px 20px 23px;
  }

  .sanraku-contact .contact-form-card .sr-lead {
    max-width: 330px;
  }

  .sanraku-contact .contact-form-area {
    max-width: 100%;
  }

  .sanraku-contact .wpcf7 p {
    margin-bottom: 20px;
  }

  .sanraku-contact .wpcf7 label {
    font-size: 15px;
  }

  .sanraku-contact .wpcf7 input[type="text"],
  .sanraku-contact .wpcf7 input[type="email"],
  .sanraku-contact .wpcf7 input[type="tel"],
  .sanraku-contact .wpcf7 input[type="url"],
  .sanraku-contact .wpcf7 input[type="number"],
  .sanraku-contact .wpcf7 select,
  .sanraku-contact .wpcf7 textarea {
    padding: 12px 13px;
    font-size: 16px;
  }

  .sanraku-contact .contact-note-item {
    padding: 20px 0;
  }

}