/* ==========================================================================
   お問い合わせページ・フォーム 専用のCSS（pages/contact.css）
   ・2026-10-26 に yrp-global-common.css から分けた。このページを開いたときだけ読み込む
   ・どのページで読み込むかは functions.php の yrp_page_css_manifest() で決めている
   ========================================================================== */


/* =========================================================================
   B-13. お問い合わせページ（/contact/）… .yrp-ct-* ／ .yr-contact-*
   -------------------------------------------------------------------------
   ・冒頭（.yrp-ct-top：相談方法4つ）と安心ポイントの帯（.yrp-ct-safe）は、コードモジュールのHTMLとセット
   ・フォームは Contact Form 7 の設定画面「フォーム」タブの中身を .yrp-cf の短い作りに変更（入力欄の名前は従来どおり）
     （PCは2列、詳しい項目は「もう少し詳しく伝える」に折りたたみ、選択肢はボタン型）
   ・Diviのセクションに付いている背景は :has() で白系に戻す
   ========================================================================= */

/* --- Diviセクションの背景 --- */
#main-content .et_pb_section:has(.yrp-ct-top),
#main-content .et_pb_section:has(.yrp-ct-safe),
#main-content .et_pb_section:has(.yr-contact-form){ background:#ffffff !important; background-image:none !important; }

/* --- 冒頭と相談方法 --- */
.yrp-ct-top{ padding:56px 0 28px; background:linear-gradient(180deg,#fbf8f1 0%,#ffffff 100%); text-align:center; }
.yrp-ct-top__inner{ width:92%; max-width:1040px; margin:0 auto; }
#main-content .yrp-ct-top__en{ margin:0 0 8px !important; color:#b8860b !important; font-size:12px !important; font-weight:700; letter-spacing:.3em; text-transform:uppercase; }
#main-content .yrp-ct-top__title{ margin:0 !important; padding:0 !important; color:#1a2c42 !important; font-size:clamp(30px,3.6vw,44px) !important; line-height:1.3 !important; letter-spacing:.1em; }
#main-content .yrp-ct-top__lead{ margin:14px 0 0 !important; color:#4a5868 !important; font-size:15px !important; line-height:1.8 !important; word-break:keep-all; overflow-wrap:anywhere; }
.yrp-ct-ways{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:34px 0 0; }
.yrp-ct-way{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 14px 22px; border:1px solid #ece4d3; border-radius:20px; background:#ffffff; color:#1a2c42 !important; text-decoration:none !important; box-shadow:0 6px 18px rgba(26,44,66,.05); transition:transform .2s, box-shadow .2s, border-color .2s; }
.yrp-ct-way:hover{ transform:translateY(-3px); border-color:#d6aa35; box-shadow:0 12px 26px rgba(26,44,66,.09); }
.yrp-ct-way__icon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:4px; border-radius:50%; background:#fbf8f1; color:#b8860b; font-size:23px; }
.yrp-ct-way__name{ font-size:16px; font-weight:700; }
.yrp-ct-way__num{ font-size:22px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.yrp-ct-way__sub{ color:#6a7684; font-size:12.5px; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.yrp-ct-way__badge{ position:absolute; top:-11px; left:50%; padding:3px 12px; border-radius:999px; background:#1a2c42; color:#ffffff; font-size:11px; font-weight:700; white-space:nowrap; transform:translateX(-50%); }
.yrp-ct-way--tel{ border-color:#1a2c42; }
.yrp-ct-way--tel .yrp-ct-way__icon{ background:#1a2c42; color:#d6aa35; }
.yrp-ct-way--line .yrp-ct-way__icon{ background:#06c755; color:#ffffff; }
#main-content .yrp-ct-top__note{ margin:20px 0 0 !important; color:#6a7684 !important; font-size:12.5px !important; }
.yrp-ct-top__note a{ color:#1a2c42 !important; font-weight:700; }

/* --- 安心ポイントの帯 --- */
.yrp-ct-safe{ padding:8px 0 0; background:#ffffff; scroll-margin-top:120px; }
#main-content .yrp-ct-safe__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; width:92%; max-width:760px; margin:0 auto !important; padding:16px 20px !important; border-radius:999px; background:#fbf8f1; list-style:none !important; }
#main-content .yrp-ct-safe__list li{ display:inline-flex; align-items:center; gap:8px; color:#1a2c42; font-size:14px; font-weight:700; list-style:none !important; }
.yrp-ct-safe__list i{ color:#b8860b; }

/* --- フォーム（Contact Form 7 のフォームを .yrp-cf の短い作りに変更。設定画面「フォーム」タブとセット） --- */
#main-content .yrp-cf{ width:min(760px,92%); margin:0 auto; padding:36px 0 72px; color:#1a2c42; }
#main-content .yrp-cf p{ margin:0; padding:0; }
#main-content .yrp-cf br{ display:none; }
.yrp-cf__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid #ece4d3; }
#main-content .yrp-cf__title{ margin:0 !important; padding:0 !important; color:#1a2c42 !important; font-size:20px !important; line-height:1.4 !important; }
.yrp-cf__lead{ color:#6a7684; font-size:13px; }
.yrp-cf__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.yrp-cf__field{ margin-bottom:14px; }
.yrp-cf__grid .yrp-cf__field{ margin-bottom:0; }
.yrp-cf__grid + .yrp-cf__field{ margin-top:14px; }
.yrp-cf__label{ display:flex; align-items:center; gap:6px; margin-bottom:6px; color:#1a2c42; font-size:13.5px; font-weight:700; }
.yrp-cf__req, .yrp-cf__opt{ padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; }
.yrp-cf__req{ background:#b8860b; color:#ffffff; }
.yrp-cf__opt{ background:#f1efe9; color:#7a8592; }
#main-content .yrp-cf input[type="text"],
#main-content .yrp-cf input[type="email"],
#main-content .yrp-cf input[type="tel"],
#main-content .yrp-cf textarea{ display:block; width:100%; min-height:46px; padding:11px 14px; border:1px solid #e3dccb; border-radius:12px; background:#fdfcf9; color:#1a2c42; font-size:16px; line-height:1.6; box-shadow:none; }
#main-content .yrp-cf textarea{ min-height:0; height:auto; resize:vertical; }
#main-content .yrp-cf input:focus,
#main-content .yrp-cf textarea:focus{ outline:0; border-color:#d6aa35; background:#ffffff; box-shadow:0 0 0 3px rgba(214,170,53,.18); }
/* 選択肢をボタン型に */
#main-content .yrp-cf__field--choice .wpcf7-form-control{ display:flex; flex-wrap:wrap; gap:6px; }
#main-content .yrp-cf .wpcf7-list-item{ margin:0; }
#main-content .yrp-cf__field--choice .wpcf7-list-item label{ position:relative; display:inline-flex; align-items:center; padding:7px 14px; border:1px solid #e3dccb; border-radius:999px; background:#ffffff; cursor:pointer; transition:background .2s, border-color .2s; }
#main-content .yrp-cf__field--choice .wpcf7-list-item input{ position:absolute; width:1px; height:1px; margin:0; opacity:0; }
#main-content .yrp-cf__field--choice .wpcf7-list-item-label{ color:#1a2c42; font-size:13px; font-weight:700; line-height:1.4; }
#main-content .yrp-cf__field--choice .wpcf7-list-item label:hover{ border-color:#d6aa35; }
#main-content .yrp-cf__field--choice .wpcf7-list-item label:has(input:checked){ background:#1a2c42; border-color:#1a2c42; }
#main-content .yrp-cf__field--choice .wpcf7-list-item label:has(input:checked) .wpcf7-list-item-label{ color:#ffffff; }
#main-content .yrp-cf__field--choice .wpcf7-list-item label:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(214,170,53,.35); }
/* 「もう少し詳しく伝える」 */
.yrp-cf__more{ margin:4px 0 18px; padding:0; border:1px dashed #e3dccb; border-radius:14px; }
.yrp-cf__more summary{ padding:12px 16px; color:#8c6812; font-size:13.5px; font-weight:700; cursor:pointer; list-style:none; }
.yrp-cf__more summary::-webkit-details-marker{ display:none; }
.yrp-cf__more summary::before{ content:"＋"; margin-right:6px; }
.yrp-cf__more[open] summary::before{ content:"－"; }
.yrp-cf__more[open]{ padding:0 16px 4px; }
.yrp-cf__more[open] summary{ padding-left:0; padding-right:0; }
/* 同意と送信 */
.yrp-cf__foot{ margin-top:6px; padding:18px 20px; border-radius:16px; background:#fbf8f1; text-align:center; }
.yrp-cf__privacy{ color:#5a6676; font-size:12.5px; line-height:1.7; }
.yrp-cf__privacy a{ margin-left:6px; white-space:nowrap; color:#8c6812 !important; font-weight:700; text-decoration:underline !important; text-underline-offset:3px; }
.yrp-cf__agree{ margin:10px 0 14px; }
#main-content .yrp-cf__agree label{ display:inline-flex; align-items:center; gap:8px; color:#1a2c42; font-size:14px; font-weight:700; cursor:pointer; }
#main-content .yrp-cf__agree input{ width:18px; height:18px; margin:0; accent-color:#1a2c42; }
#main-content .yrp-cf .wpcf7-submit{ display:block; width:min(100%,420px); min-height:54px; margin:0 auto; padding:12px 28px; border:0 !important; border-radius:999px !important; background:#1a2c42 !important; color:#ffffff !important; box-shadow:0 8px 20px rgba(26,44,66,.16); font-size:16px; font-weight:700; letter-spacing:.12em; cursor:pointer; }
#main-content .yrp-cf .wpcf7-submit:hover{ background:#25426b !important; transform:none; filter:none; }
#main-content .yrp-cf .wpcf7-submit:disabled{ background:#9aa3ad !important; box-shadow:none; }
.yrp-cf__note{ margin-top:10px; color:#6a7684; font-size:12px; }
#main-content .yrp-cf .wpcf7-spinner{ display:block; margin:10px auto 0; }
#main-content .yrp-cf .wpcf7-not-valid-tip{ margin-top:4px; font-size:12px; }
#main-content .yrp-cf .wpcf7-response-output{ margin:16px 0 0 !important; border-radius:12px; font-size:13.5px; }
/* --- タブレット --- */
@media screen and (max-width:980px){
  .yrp-ct-ways{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --- スマホ --- */
@media screen and (max-width:767px){
  .yrp-ct-top{ padding:44px 0 28px; }
  #main-content .yrp-ct-top__lead{ font-size:14px !important; }
  /* スマホでは相談方法を横長の行にして、縦に4つ並べる */
  .yrp-ct-ways{ grid-template-columns:1fr; gap:10px; margin-top:26px; }
  .yrp-ct-way{ display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:14px; row-gap:2px; align-items:center; padding:14px 16px; border-radius:16px; text-align:left; }
  .yrp-ct-way__icon{ grid-row:1 / span 3; width:48px; height:48px; margin:0; font-size:20px; }
  .yrp-ct-way__name{ font-size:15px; }
  .yrp-ct-way__num{ font-size:21px; }
  .yrp-ct-way__sub{ font-size:12px; }
  .yrp-ct-way__badge{ top:-10px; left:auto; right:14px; transform:none; }
  #main-content .yrp-ct-safe__list{ gap:6px 16px; padding:12px 14px !important; border-radius:18px; }
  #main-content .yrp-ct-safe__list li{ font-size:12.5px; }
  .yrp-cf__grid{ grid-template-columns:1fr; gap:12px; }
  #main-content .yrp-cf{ padding:28px 0 56px; }
  .yrp-cf__foot{ padding:16px 14px; }
}


/* B-11より：スマホ表示の文字揃え（お問い合わせの冒頭） */
@media screen and (max-width:767px){
  /* --- お問い合わせ：冒頭 --- */
  .yr-contact-hero__en,
  .yr-contact-hero__title,
  .yr-contact-hero__text{ text-align:center !important; }
}

/* 2026-10-27 入口は電話・LINE・フォームの3つ。日時の予約は下に一行で */
.yrp-ct-ways{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.yrp-ct-book{ margin:18px 0 0 !important; color:#4a5868; font-size:14px; font-weight:700; line-height:1.7; text-align:center; }
.yrp-ct-book i{ margin-right:6px; color:#b8860b; }
.yrp-ct-book a{ color:#1a2c42 !important; border-bottom:1px solid #d6aa35; text-decoration:none !important; }
@media screen and (max-width:767px){
  .yrp-ct-ways{ grid-template-columns:1fr !important; }
  .yrp-ct-book{ font-size:13px; }
}
/* 送信後のメッセージ（完了・入力エラー）を見やすく：2026-10-30 */
#main-content .wpcf7 form.sent .wpcf7-response-output{ margin:20px 0 0 !important; padding:18px 20px !important; border:2px solid #B8860B !important; background:#1A2C42; color:#fff; font-size:16px; font-weight:700; line-height:1.7; text-align:center; }
#main-content .wpcf7 form.sent .wpcf7-response-output::before{ content:"\2713"; display:block; margin:0 auto 6px; font-size:26px; line-height:1; color:#B8860B; }
#main-content .wpcf7 form.invalid .wpcf7-response-output,
#main-content .wpcf7 form.unaccepted .wpcf7-response-output,
#main-content .wpcf7 form.failed .wpcf7-response-output,
#main-content .wpcf7 form.spam .wpcf7-response-output{ margin:20px 0 0 !important; padding:14px 18px !important; border:2px solid #e3a86a !important; background:#fff6ec; color:#8a3e1c; font-size:15px; font-weight:700; line-height:1.7; text-align:center; }
/* 2026-10-31 物件のお問い合わせフォーム：日付と選択の欄も、文字の欄と同じ見た目にする */
#main-content .yrp-cf input[type="date"], #main-content .yrp-cf select{ display:block; width:100%; max-width:none; min-height:46px; padding:10px 14px; border:1px solid #e3dccb; border-radius:12px; background-color:#fdfcf9; color:#1a2c42; font-size:16px; line-height:1.4; box-shadow:none; }
#main-content .yrp-cf input[type="date"]:focus, #main-content .yrp-cf select:focus{ outline:0; border-color:#d6aa35; background-color:#ffffff; box-shadow:0 0 0 3px rgba(214,170,53,.18); }