/* ========= Contact page ========= */
.contact-page { padding: 32px 16px; }
.contact-page .container { max-width: 1100px; margin: 0 auto; }
.contact-page .container--narrow { max-width: 980px; margin: 0 auto; }

/* ===== page head / breadcrumb ===== */
.page-head { margin-bottom: 16px; text-align:center; }
.breadcrumb { font-size:.95rem; color:#64748b; display:flex; align-items:center; gap:6px; justify-content:center; }
.breadcrumb a { color:#64748b; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* ===== Tabs ===== */
.contact-tabs{
  display:grid; grid-template-columns: repeat(3, 1fr);
  margin: 6px 0 18px; border-bottom: 2px solid #e5e7eb;
}
.contact-tab{
  text-align:center; padding:14px 8px; background:#f5f5f5; color:#334155; text-decoration:none;
  border-top-left-radius:10px; border-top-right-radius:10px;
  border:1px solid #e5e7eb; border-bottom:none; margin-right:8px; position:relative;
}
.contact-tab:last-child{ margin-right:0; }
.contact-tab.is-active{
  background:#fff; color:#111827; border-color:#e5e7eb;
  box-shadow:0 -2px 0 0 #e11d48 inset; /* 赤ライン */
}
.contact-tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#fff;
}

/* ===== LINE CTA（ページ最下部にも流用） ===== */
.line-cta{
  background:#e6f8ec; border:1px solid #b7e3c8; border-radius:16px;
  padding:20px; margin:24px auto 0; box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.line-cta--bottom{ margin-top:40px; }
.line-cta__inner{ display:grid; grid-template-columns: 1fr 260px; gap:20px; align-items:center; }
.line-cta__title{ font-size:1.4rem; margin:0 0 .4rem; }
.line-cta__lead{ color:#14532d; margin:0 0 .8rem; font-weight:600; }
.line-steps{ background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; margin: 12px 0 10px; }
.line-steps__title{ font-size:1rem; margin:0 0 .35rem; color:#065f46; }
.line-steps__list{ margin:0; padding-left:18px; list-style:decimal; }
.line-steps__list li{ margin:.25rem 0; }
.line-cta__actions{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.contact-page .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:999px; font-weight:700; line-height:1; border:1px solid transparent; text-decoration:none; cursor:pointer; }
.contact-page .btn-primary{ background:#e11d48; color:#fff; border-color:#e11d48; }
.contact-page .btn-primary:hover{ opacity:.95; }
.contact-page .btn-line{ background:#06c755; color:#fff; border-color:#06c755; }
.contact-page .btn-line:hover{ opacity:.95; }
.line-cta__note{ font-size:.9rem; color:#475569; }
.line-cta__right{ text-align:center; }
.line-cta__qr img{ width:100%; max-width:160px; height:auto; display:block; margin:0 auto 6px; }
.line-cta__qr figcaption{ font-size:.9rem; color:#475569; }

/* ===== Contact form ===== */
.contact-page .section-contact{ padding:12px 0 24px; background:transparent !important; }
.contact-title{ font-size:1.7rem; margin:0 0 .4rem; }
.contact-lead{ color:#475569; margin:0 0 1.0rem; }

/* カード＆行（見本風の2カラム） */
.frm-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:10px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.06); margin-bottom:18px;
}
.frm-row{
  display:grid; grid-template-columns: 260px 1fr; gap:0; align-items:center;
  border-top:1px solid #eef0f4;
}
.frm-row:first-child{ border-top:none; }
.frm-label{
  padding:16px 18px; font-weight:700; color:#334155;
}
.frm-field{
  padding:16px 18px; border-left:1px solid #eef0f4;
}
.field-grid{ display:flex; flex-wrap:wrap; gap:10px 16px; }

.radio, .check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.radio input, .check input{ accent-color:#7a22a8; }

.with-unit{ position:relative; display:flex; align-items:center; gap:8px; }
.with-unit .unit{ color:#64748b; }

.frm-agree .frm-field{ display:flex; align-items:flex-start; gap:10px; }
.link{ color:#7a22a8; text-decoration:underline; }
.link:hover{ opacity:.9; }

/* 入力系 */
.contact-page input[type="text"],
.contact-page input[type="email"],
.contact-page input[type="url"],
.contact-page input[type="number"],
.contact-page select,
.contact-page textarea{
  width:100%; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:10px;
  padding:10px 12px; font-size:1rem; background:#fff; transition:border-color .2s, box-shadow .2s;
}
.contact-page textarea{ resize:vertical; min-height:120px; }
.contact-page input:focus,
.contact-page select:focus,
.contact-page textarea:focus{
  outline:none; border-color:#7a22a8; box-shadow:0 0 0 4px rgba(122,34,168,.12);
}
.req{ color:#ef4444; margin-left:.2em; }

/* +オプション */
.options{ margin-bottom:18px; }
.options__summary{
  list-style:none; cursor:pointer; user-select:none; font-weight:700;
  padding:12px 16px; border-radius:10px; background:#f8fafc; border:1px solid #e5e7eb;
}
.options[open] .options__summary{ background:#eef2ff; border-color:#c7d2fe; }
.options__body{ margin-top:12px; }
.options__text{ max-width:320px; }
.options__text.is-disabled{ opacity:.5; }

/* 送信 */
.form-actions{ margin-top:10px; text-align:center; }
.form-actions .btn{ min-width:220px; }

/* 成功/エラー */
.contact-success{ background:#f0fdf4; border:1px solid #86efac; color:#166534; border-radius:12px; padding:16px; margin-top:12px; }
.contact-error{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:12px; padding:12px; margin:12px 0; }

/* フッター内ボタンの赤い枠線を無効化（他は維持） */
body.page-template-page-contact footer .btn,
body.page-template-page-contact footer a.btn,
body.page-template-page-contact-php footer .btn,
body.page-template-page-contact-php footer a.btn{ outline:none !important; box-shadow:none !important; }

/* Utilities */
.contact-page .m0{ margin:0; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .contact-tabs{ grid-template-columns:1fr; border-bottom:none; gap:8px; }
  .contact-tab{ margin:0; border-bottom:1px solid #e5e7eb; }
  .contact-tab.is-active{ box-shadow:0 -2px 0 0 #e11d48 inset, 0 0 0 1px #e5e7eb inset; }

  .frm-row{ grid-template-columns:1fr; }
  .frm-field{ border-left:none; border-top:1px solid #eef0f4; }
  .frm-label{ padding-bottom:6px; }
  .with-unit{ gap:6px; }

  .line-cta__inner{ grid-template-columns:1fr; }
  .line-cta__right{ order:-1; }
}
