@charset "utf-8";
/* ===== お問い合わせ（page-contact.php 専用） ===== */

/* 上の大きな背景写真 */
.s-ttit .ct-hero {
  background: url(/wp-content/uploads/2026/10/kv-water.jpg) center / cover no-repeat;
}

/* ページ全体 */
.ct-page { background: #f1f8f6; padding-bottom: 90px; }
.ct-page #contact01,
.ct-page #contact02 { padding-top: 70px; padding-bottom: 0; }

/* 冒頭の文章 */
.ct-page .con {
  max-width: 780px; margin: 0 auto; padding: 70px 20px 0; box-sizing: border-box;
  font-size: 18px; line-height: 2; text-align: center;
}
.ct-page #contact01 { padding-top: 50px; }

/* 見出し */
.ct-page .f-tit {
  position: relative; text-align: center; letter-spacing: .1em;
  padding-bottom: 22px; margin-bottom: 40px;
}
.ct-page .f-tit::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 70px; height: 4px; border-radius: 2px; background: #50ad92;
  transform: translateX(-50%);
}
.ct-page .f-tit .info {
  display: block; margin-top: 10px; letter-spacing: .05em;
  font-size: 18px; font-weight: 700; color: #23735d;
}

/* 電話のカード */
.ct-page #contact01 .recu-box {
  position: relative; overflow: hidden; box-sizing: border-box;
  width: auto; max-width: 760px; margin: 0 20px; margin-left: auto; margin-right: auto;
  padding: 56px 40px 44px; text-align: center;
  background: linear-gradient(135deg, #fff 55%, #e8f5f1);
  border-top: 6px solid #50ad92; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(4, 53, 128, .15);
}
.ct-page #contact01 .recu-box::before {
  content: "TEL"; position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: 110px; font-weight: 700; line-height: 1; letter-spacing: .1em;
  color: rgba(80, 173, 146, .13);
}
.ct-page #contact01 .recu-box > * { position: relative; }
.ct-page .c-tel { margin: 0 0 18px; padding: 0; }
.ct-page .c-tel a {
  display: inline-block; font-size: 52px; font-weight: 700; letter-spacing: .06em;
  color: #002651; text-decoration: none; border-bottom: 4px solid #50ad92; line-height: 1.3;
}
.ct-page #contact01 .recu-box p:last-child { font-size: 17px; line-height: 1.9; margin: 0; }

/* メールの説明 */
.ct-page .below {
  width: auto !important;
  max-width: 780px; margin: 0 auto 36px; padding: 0 20px; box-sizing: border-box;
  font-size: 17px; line-height: 2; text-align: center;
}
.ct-page .below a { color: #23735d; font-weight: 700; text-decoration: underline; }

/* フォームのカード */
.ct-page .contact-form {
  width: auto !important;
  box-sizing: border-box; max-width: 860px; margin: 0 20px; margin-left: auto; margin-right: auto;
  padding: 36px 44px 40px; background: #fff;
  border-top: 6px solid #50ad92; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(4, 53, 128, .15); text-align: left;
}

/* 1項目ぶんの行：左に項目名、右に入力欄 */
.ct-page .contact-form .ct-row {
  display: grid; grid-template-columns: 280px 1fr; gap: 6px 20px; align-items: center;
  margin: 0; padding: 9px 4px; border: 0; text-align: left;
}
.ct-page .contact-form .ct-row--top { align-items: start; }
.ct-page .contact-form .ct-row--top .ct-label { padding-top: 8px; }
.ct-page .contact-form .ct-row .error { grid-column: 2; }
.ct-page .contact-form .ct-label {
  display: block; margin: 0; padding: 0; text-align: left;
  font-size: 16px; font-weight: 700; line-height: 1.5; color: #002651;
}

/* 「必須」「任意」バッジ */
.ct-page .contact-form .ct-req,
.ct-page .contact-form .ct-opt {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px;
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; vertical-align: middle;
}
.ct-page .contact-form .ct-req { background: #c0392b; }
.ct-page .contact-form .ct-opt { background: #6b7f79; }

/* 入力欄（コンパクト＋枠をはっきり） */
.ct-page .contact-form input[type="text"],
.ct-page .contact-form input[type="email"],
.ct-page .contact-form input[type="tel"],
.ct-page .contact-form input[type="url"],
.ct-page .contact-form input[type="number"],
.ct-page .contact-form select,
.ct-page .contact-form textarea {
  width: 100%; box-sizing: border-box; margin: 0; padding: 7px 12px;
  font-size: 16px; line-height: 1.5; color: #333; background: #f4faf8;
  border: 2px solid #4f8576; border-radius: 8px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-page .contact-form textarea { line-height: 1.6; height: 160px; min-height: 160px; }
.ct-page .contact-form ::placeholder { color: #9bb3ac; }
.ct-page .contact-form input:hover,
.ct-page .contact-form select:hover,
.ct-page .contact-form textarea:hover { border-color: #23735d; }
.ct-page .contact-form input:focus,
.ct-page .contact-form select:focus,
.ct-page .contact-form textarea:focus {
  outline: none; background: #fff; border-color: #23735d; box-shadow: 0 0 0 3px rgba(80, 173, 146, .3);
}
.ct-page .contact-form input[type="checkbox"],
.ct-page .contact-form input[type="radio"] { width: auto; margin-right: 6px; }

/* エラー文 */
.ct-page .contact-form .error { display: block; margin-top: 2px; font-size: 14px; color: #c0392b; }

/* ボタン */
.ct-page .contact-form .ct-actions { margin: 0; padding: 20px 0 0; text-align: center; }
.ct-page .contact-form input[type="submit"],
.ct-page .contact-form input[type="button"],
.ct-page .contact-form button {
  display: inline-block; min-width: 240px; margin: 8px 8px 0; padding: 16px 40px;
  font-size: 18px; font-weight: 700; letter-spacing: .08em; cursor: pointer;
  color: #fff; background: #23735d; border: 2px solid #23735d; border-radius: 60px;
  box-shadow: 0 8px 20px rgba(35, 115, 93, .3);
  transition: transform .3s, box-shadow .3s; -webkit-appearance: none; appearance: none;
}
.ct-page .contact-form input[type="submit"]:hover,
.ct-page .contact-form input[type="button"]:hover,
.ct-page .contact-form button:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(35, 115, 93, .4); }
.ct-page .contact-form input[name="submitBack"],
.ct-page .contact-form .submit-back {
  color: #23735d; background: #fff; box-shadow: none;
}

/* スマホ・タブレット */
@media screen and (max-width: 600px) {
  .ct-page { padding-bottom: 60px; }
  .ct-page .con { padding-top: 56px; font-size: 16px; }
  .ct-page #contact01 .recu-box { margin: 0 16px; padding: 48px 20px 32px; }
  .ct-page #contact01 .recu-box::before { font-size: 56px; }
  .ct-page .c-tel a { font-size: 32px; }
  .ct-page .below { font-size: 15px; text-align: left; }
  .ct-page .contact-form {
    width: auto !important;
    margin-left: 16px !important; margin-right: 16px !important;
    padding: 22px 16px 28px;
  }
  .ct-page .contact-form .ct-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .ct-page .contact-form .ct-row .error { grid-column: 1; }
  .ct-page .contact-form .ct-row--top .ct-label { padding-top: 0; }
  .ct-page .contact-form input[type="submit"],
  .ct-page .contact-form input[type="button"],
  .ct-page .contact-form button { min-width: 0; width: 100%; margin: 12px 0 0; }
}

/* 確認画面：送信・戻るボタンを中央に均等に並べる */
.ct-page .contact-form {
  display: flow-root !important;
  overflow: visible !important;
}
.ct-page .contact-form :has(> input[type="submit"]),
.ct-page .contact-form :has(> input[type="button"]),
.ct-page .contact-form :has(> button) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100% !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
  text-align: center;
}
.ct-page .contact-form input[type="submit"],
.ct-page .contact-form input[type="button"],
.ct-page .contact-form button {
  float: none !important;
  position: static !important;
  margin: 0 !important;
}