/* contact ページ固有スタイル */

/* ========== ページヒーロー ========== */
    .page-hero {      background: #1e3a5f;
      padding: 1.7rem 0 1.3rem;
      color: #fff;
    }
    .page-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700;
      margin: 0 0 0.05rem;
    }
    .page-hero-sub {
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      opacity: 0.75;
      font-weight: 300;
    }

    /* ========== 共通セクションヘッダー ========== */
    .contact-section-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }
    .contact-section-eyebrow {
      font-size: 0.68rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: #8B6000;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      margin-bottom: 0.7rem;
    }
    .contact-section-eyebrow::before,
    .contact-section-eyebrow::after {
      content: '';
      display: block;
      width: 2rem;
      height: 1px;
      background: currentColor;
      opacity: 0.4;
    }
    .contact-section-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
      font-weight: 700;
      color: var(--color-text);
      margin: 0;
    }

    /* ========== Contact フォームセクション ========== */
    #contact-form {
      background: var(--color-warm-white);
      padding: 5rem 0;
    }
    .contact-form-inner {
      max-width: 640px;
      margin: 0 auto;
    }
    .contact-form-lead {
      text-align: center;
      font-size: 0.92rem;
      color: var(--color-text-sub);
      line-height: 1.9;
      margin-bottom: 2.5rem;
    }

    /* フォームカード */
    .contact-form {
      background: #fff;
      border-radius: 8px;
      padding: 2.5rem;
      box-shadow: 0 4px 24px rgba(30,30,60,0.08);
    }
    .form-group {
      margin-bottom: 1.6rem;
    }
    .form-label {
      display: block;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 0.5rem;
      letter-spacing: 0.04em;
    }
    .form-label .required {
      display: inline-block;
      font-size: 0.68rem;
      background: var(--color-cta);
      color: #fff;
      padding: 0.1rem 0.45rem;
      border-radius: 2px;
      margin-left: 0.4rem;
      vertical-align: middle;
      letter-spacing: 0;
    }
    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1.5px solid var(--color-border);
      border-radius: 4px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--color-text);
      background: var(--color-warm-white);
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
      appearance: none;
    }
    .form-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555577' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
      cursor: pointer;
    }
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(46,109,164,0.15);
      background: #fff;
    }
    .form-textarea {
      height: 150px;
      resize: vertical;
      line-height: 1.8;
    }

    /* 見学希望日フィールド（条件表示） */
    .form-visit-dates {
      display: none;
      background: var(--color-bg-section);
      border-radius: 6px;
      padding: 1.4rem 1.6rem;
      margin-bottom: 1.6rem;
      border: 1.5px solid var(--color-border);
    }
    .form-visit-dates.is-visible {
      display: block;
    }
    .form-visit-dates-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 1rem;
      letter-spacing: 0.04em;
    }
    .form-date-group {
      display: grid;
      grid-template-columns: 5em 1fr;
      align-items: center;
      gap: 0.8rem;
      margin-bottom: 0.8rem;
    }
    .form-date-group:last-child {
      margin-bottom: 0;
    }
    .form-date-label {
      font-size: 0.8rem;
      color: var(--color-text-sub);
      font-weight: 600;
    }
    .form-input-date {
      padding: 0.65rem 0.9rem;
      border: 1.5px solid var(--color-border);
      border-radius: 4px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--color-text);
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
      width: 100%;
      cursor: pointer;
    }
    .form-input-date:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(46,109,164,0.15);
    }

    .form-submit {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: var(--color-cta);
      color: #fff;
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 700;
      padding: 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      letter-spacing: 0.06em;
      transition: background 0.2s;
      margin-top: 0.5rem;
    }
    .form-submit:hover { background: var(--color-cta-dk); }
    .form-submit:focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 2px;
    }
    .form-reply-note {
      font-size: 0.82rem;
      color: var(--color-text);
      text-align: center;
      margin-top: 1.4rem;
      line-height: 1.9;
      background: var(--color-bg-section);
      border-radius: 4px;
      padding: 0.8rem 1rem;
    }
    .form-privacy-note {
      font-size: 0.76rem;
      color: var(--color-text-sub);
      text-align: center;
      margin-top: 0.8rem;
      line-height: 1.8;
    }
    .form-privacy-note a { color: var(--color-primary); }

    /* ========== CF7送信フィードバック（WordPress連携） ========== */
    .form-feedback {
      margin-top: 1rem;
      padding: 0.9rem 1.1rem;
      border-radius: 4px;
      font-size: 0.88rem;
      line-height: 1.8;
      white-space: pre-line;
      display: none;
    }
    .form-feedback:empty { display: none; }
    .form-feedback--success {
      display: block;
      background: rgba(46,109,164,0.1);
      color: var(--color-primary-dk);
      border: 1px solid var(--color-primary);
    }
    .form-feedback--error {
      display: block;
      background: rgba(232,69,69,0.08);
      color: var(--color-cta-dk);
      border: 1px solid var(--color-cta);
    }
    .form-field-error {
      color: var(--color-cta-dk);
      font-size: 0.78rem;
      margin: 0.35rem 0 0;
      line-height: 1.6;
    }
    [aria-invalid="true"] {
      border-color: var(--color-cta) !important;
    }
    .form-submit[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .contact-form-noscript {
      font-size: 0.8rem;
      color: var(--color-cta-dk);
      background: rgba(232,69,69,0.08);
      border: 1px solid var(--color-cta);
      border-radius: 4px;
      padding: 0.8rem 1rem;
      margin-bottom: 1rem;
    }

    /* ========== 送信内容確認モーダル（WordPress連携: お問い合わせページのみ） ========== */
    body.confirm-modal-open {
      overflow: hidden;
    }
    .confirm-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(20, 24, 40, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      z-index: 1000;
    }
    .confirm-modal {
      background: #fff;
      border-radius: 8px;
      max-width: 520px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding: 2rem 2rem 1.8rem;
      box-shadow: 0 12px 40px rgba(30,30,60,0.28);
    }
    .confirm-modal-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--color-text);
      margin: 0 0 1.4rem;
      text-align: center;
    }
    .confirm-modal-body {
      margin: 0 0 1.8rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .confirm-modal-row {
      border-bottom: 1px solid var(--color-border);
      padding-bottom: 0.9rem;
    }
    .confirm-modal-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--color-text-sub);
      letter-spacing: 0.04em;
      margin: 0 0 0.35rem;
    }
    .confirm-modal-value {
      font-size: 0.95rem;
      color: var(--color-text);
      line-height: 1.8;
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .confirm-modal-actions {
      display: flex;
      gap: 0.8rem;
    }
    .confirm-modal-actions button {
      flex: 1;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 700;
      padding: 0.85rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: background 0.2s, border-color 0.2s;
    }
    .confirm-modal-cancel {
      background: #fff;
      color: var(--color-text-sub);
      border: 1.5px solid var(--color-border);
    }
    .confirm-modal-cancel:hover {
      border-color: var(--color-text-sub);
    }
    .confirm-modal-submit {
      background: var(--color-cta);
      color: #fff;
      border: none;
    }
    .confirm-modal-submit:hover {
      background: var(--color-cta-dk);
    }
    .confirm-modal-actions button:focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 2px;
    }
    @media (max-width: 480px) {
      .confirm-modal { padding: 1.6rem 1.4rem 1.4rem; }
      .confirm-modal-actions { flex-direction: column-reverse; }
    }

    /* ========== FAQ セクション ========== */
    #faq {
      background: var(--color-bg-section);
      padding: 5rem 0;
    }
    .faq-inner {
      max-width: 720px;
      margin: 0 auto;
    }
    .faq-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .faq-item {
      background: #fff;
      border-radius: 8px;
      padding: 1.6rem 2rem;
      box-shadow: 0 2px 12px rgba(30,30,60,0.06);
    }
    .faq-question {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--color-primary);
      margin: 0 0 0.75rem;
      line-height: 1.6;
    }
    .faq-question::before {
      content: 'Q.';
      font-family: var(--font-display);
      font-weight: 700;
      margin-right: 0.5rem;
    }
    .faq-answer {
      font-size: 0.95rem;
      color: var(--color-text);
      line-height: 1.9;
      margin: 0;
      padding-left: 1.5rem;
    }
    .faq-answer::before {
      content: 'A.';
      font-family: var(--font-display);
      font-weight: 600;
      color: var(--color-text-sub);
      margin-right: 0.4rem;
      margin-left: -1.5rem;
    }


    /* ========== FAQ アコーディオン ========== */
    .faq-details {
      border-bottom: 1px solid var(--color-border);
    }
    .faq-details summary.faq-question {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .faq-details summary.faq-question::after {
      content: '';
      display: inline-block;
      width: 0.6rem; height: 0.6rem;
      border-right: 2px solid var(--color-primary);
      border-bottom: 2px solid var(--color-primary);
      transform: rotate(45deg);
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }
    .faq-details[open] summary.faq-question::after {
      transform: rotate(-135deg);
    }
    .faq-details summary::-webkit-details-marker { display: none; }
    .faq-details .faq-answer {
      padding-bottom: 1rem;
    }
    /* ========== レスポンシブ ========== */
    @media (max-width: 767px) {
      #contact-form { padding: 3.5rem 0; }
      .contact-form  { padding: 1.8rem 1.4rem; }
      .form-date-group { grid-template-columns: 4.5em 1fr; gap: 0.6rem; }
      .form-visit-dates { padding: 1.2rem 1.2rem; }
      #faq { padding: 3.5rem 0; }
      .faq-item { padding: 1.2rem 1.2rem; }
      /* 本文フォントサイズをお知らせ詳細に統一（0.95rem） */
      .contact-form-lead,
      .faq-question,
      .faq-answer,
      .form-reply-note,
      .form-privacy-note { font-size: 0.95rem; line-height: 1.95; }
    }

    /* ===== スマートフォン横向き：本文フォントサイズ統一 ===== */
    @media (max-width: 1024px) and (orientation: landscape) {
      .contact-form-lead,
      .faq-question,
      .faq-answer,
      .form-reply-note,
      .form-privacy-note { font-size: 0.95rem; line-height: 1.95; }
    }