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

.hero-contact {
  background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&q=70');
}

    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 48px;
      max-width: 1100px;
      margin: 0 auto;
      padding: 64px;
    }

    /* 左：フォーム（非表示 CF7 より手前にあり、クリックを奪わないよう重ね順を確保） */
    .contact-layout .contact-form-wrap {
      position: relative;
      z-index: 2;
    }

    /* 右：サイドインフォ */
    .contact-info-wrap {}
    .info-block {
      background: white;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border);
      padding: 24px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 20px;
    }
    .info-block-title {
      font-family: var(--font-serif);
      font-size: 16px;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--color-border);
    }
    .info-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 14px;
    }
    .info-item:last-child { margin-bottom: 0; }
    .info-item-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      background: var(--color-bg-teal);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
    .info-item-content {}
    .info-item-label { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.08em; margin-bottom: 2px; }
    .info-item-value { font-size: 14px; color: var(--color-text); font-weight: 500; }

    /* フォーム本体 */
    .form-header {
      margin-bottom: 32px;
    }
    .form-header h2 {
      font-family: var(--font-serif);
      font-size: 22px;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 10px;
      letter-spacing: 0.04em;
    }
    .form-header p { font-size: 14px; color: var(--color-text-light); line-height: 1.8; }

    /* 静的 #contact-form（モック入力ステップ）— 表示用。送信は .hinode-cf7-mailer 内の CF7 */
    .contact-layout #contact-form .form-group {
      margin-bottom: 22px;
    }
    .contact-layout #contact-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 20px;
      margin-bottom: 22px;
    }
    .contact-layout #contact-form .form-row .form-group {
      margin-bottom: 0;
    }
    .contact-layout #contact-form .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 8px;
    }
    .contact-layout #contact-form .form-input,
    .contact-layout #contact-form .form-select,
    .contact-layout #contact-form .form-textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 14px;
      font-size: 14px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: white;
      color: var(--color-text);
    }
    .contact-layout #contact-form .form-textarea {
      min-height: 160px;
      resize: vertical;
    }
    .contact-layout #contact-form .form-input:focus,
    .contact-layout #contact-form .form-select:focus,
    .contact-layout #contact-form .form-textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.12);
    }
    .contact-layout #contact-form .form-checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .contact-layout #contact-form .form-checkbox-item {
      font-size: 14px;
      color: var(--color-text-light);
      cursor: pointer;
    }
    .contact-layout #contact-form .form-required {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 700;
      color: white;
      background: var(--color-accent);
      border-radius: 3px;
      vertical-align: middle;
    }
    .contact-layout #contact-form .form-optional {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 600;
      color: var(--color-text-muted);
      background: var(--color-border-light);
      border-radius: 3px;
      vertical-align: middle;
    }
    @media (max-width: 640px) {
      .contact-layout #contact-form .form-row {
        grid-template-columns: 1fr;
      }
    }

    /* 入力・確認・完了は CF7 より手前（CF7 の .wpcf7 が広い矩形でボタンを覆うのを防ぐ） */
    .contact-layout .contact-form-wrap #form-area {
      position: relative;
      z-index: 2;
    }
    .contact-layout .contact-form-wrap #confirm-area,
    .contact-layout .contact-form-wrap #thanks-area {
      position: relative;
      z-index: 4;
    }
    .contact-layout .contact-form-wrap #confirm-area .btn,
    .contact-layout .contact-form-wrap #thanks-area .btn {
      position: relative;
      z-index: 6;
      pointer-events: auto;
    }

    /* メール送信用 CF7（本文に .hinode-cf7-mailer ＋ショートコードを置く想定） */
    .hinode-cf7-mailer {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
      pointer-events: none;
      z-index: 0;
    }
    .hinode-cf7-mailer .wpcf7 {
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      max-width: 100%;
      height: 1px;
      max-height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      pointer-events: none;
    }

    /*
     * モック hionode common.css: .btn--primary の背景は --color-gold（#b8963e）。テーマ style.css は --color-primary のため紺になるので、お問い合わせ内だけ上書き。
     */
    .contact-layout #contact-form .btn.btn--primary,
    .contact-layout #confirm-area .btn.btn--primary,
    .contact-layout #thanks-area .btn.btn--primary {
      background: var(--color-gold, #b8963e);
      color: #fff;
    }
    .contact-layout #contact-form .btn.btn--primary:hover,
    .contact-layout #contact-form .btn.btn--primary:focus,
    .contact-layout #confirm-area .btn.btn--primary:hover,
    .contact-layout #confirm-area .btn.btn--primary:focus,
    .contact-layout #thanks-area .btn.btn--primary:hover,
    .contact-layout #thanks-area .btn.btn--primary:focus {
      background: #a07830;
      color: #fff;
    }

    /* 確認・完了は JS で表示切替（初期は非表示） */
    #confirm-area, #thanks-area { display: none; }

    /*
     * CF7 / MW WP Form
     * .p-page--contact は page-contact.php のみ。デフォルト page.php＋スラッグ contact では body.page-contact のみ付くため、
     * :is(.page-contact, .hinode-contact-page) .c-entry__content と .contact-layout .contact-form-wrap の両方でセレクタを掛ける。
     * html_class は推奨だが未指定でも .wpcf7-form にマッチさせる。
     */
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .mw_wp_form,
    .contact-layout .contact-form-wrap .wpcf7,
    .contact-layout .contact-form-wrap .mw_wp_form,
    .p-page--contact .contact-form-wrap .wpcf7,
    .p-page--contact .contact-form-wrap .mw_wp_form {
      margin-top: 0;
    }

    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-group,
    .contact-layout .contact-form-wrap .wpcf7-form .form-group,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-group {
      margin-bottom: 22px;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-row--cf7,
    .contact-layout .contact-form-wrap .wpcf7-form .form-row--cf7,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-row--cf7 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 20px;
      margin-bottom: 22px;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-row--cf7 .form-group,
    .contact-layout .contact-form-wrap .wpcf7-form .form-row--cf7 .form-group,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-row--cf7 .form-group {
      margin-bottom: 0;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-label,
    .contact-layout .contact-form-wrap .wpcf7-form .form-label,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 8px;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-required,
    .contact-layout .contact-form-wrap .wpcf7-form .form-required,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-required {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 700;
      color: white;
      background: var(--color-accent);
      border-radius: 3px;
      vertical-align: middle;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-optional,
    .contact-layout .contact-form-wrap .wpcf7-form .form-optional,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-optional {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 600;
      color: var(--color-text-muted);
      background: var(--color-border-light);
      border-radius: 3px;
      vertical-align: middle;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-input,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-select,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-textarea,
    .contact-layout .contact-form-wrap .wpcf7-form .form-input,
    .contact-layout .contact-form-wrap .wpcf7-form .form-select,
    .contact-layout .contact-form-wrap .wpcf7-form .form-textarea,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-input,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-select,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 14px;
      font-size: 14px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: white;
      color: var(--color-text);
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-textarea,
    .contact-layout .contact-form-wrap .wpcf7-form .form-textarea,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-textarea {
      min-height: 160px;
      resize: vertical;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-input:focus,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-select:focus,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-textarea:focus,
    .contact-layout .contact-form-wrap .wpcf7-form .form-input:focus,
    .contact-layout .contact-form-wrap .wpcf7-form .form-select:focus,
    .contact-layout .contact-form-wrap .wpcf7-form .form-textarea:focus,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-input:focus,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-select:focus,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.12);
    }
    /* お問い合わせ種別（チェックボックスのみ縦並び。同意欄の .wpcf7-list-item には適用しない） */
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
    .contact-layout .contact-form-wrap .wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
    .p-page--contact .contact-form-wrap .wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
      display: block;
      margin: 0 0 8px;
      font-size: 14px;
      color: var(--color-text-light);
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label,
    .contact-layout .contact-form-wrap .wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label,
    .p-page--contact .contact-form-wrap .wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label {
      cursor: pointer;
    }

    /* 同意（acceptance）：モックの form-checkbox-item 行（チェック＋太字ラベル＋必須バッジ） */
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-group--acceptance,
    .contact-layout .contact-form-wrap .wpcf7-form .form-group--acceptance,
    .p-page--contact .contact-form-wrap .wpcf7-form .form-group--acceptance {
      margin-bottom: 8px;
      margin-top: 4px;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
    .contact-layout .contact-form-wrap .wpcf7-form .wpcf7-acceptance .wpcf7-list-item,
    .p-page--contact .contact-form-wrap .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
      margin: 0;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .wpcf7-acceptance label,
    .contact-layout .contact-form-wrap .wpcf7-form .wpcf7-acceptance label,
    .p-page--contact .contact-form-wrap .wpcf7-form .wpcf7-acceptance label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text);
      cursor: pointer;
      line-height: 1.5;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .wpcf7-acceptance input[type="checkbox"],
    .contact-layout .contact-form-wrap .wpcf7-form .wpcf7-acceptance input[type="checkbox"],
    .p-page--contact .contact-form-wrap .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin: 3px 0 0;
      flex-shrink: 0;
      cursor: pointer;
      accent-color: var(--color-primary);
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label,
    .contact-layout .contact-form-wrap .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label,
    .p-page--contact .contact-form-wrap .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
      cursor: pointer;
      flex: 1;
      font-weight: 600;
      color: var(--color-text);
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .wpcf7-acceptance .form-required,
    .contact-layout .contact-form-wrap .wpcf7-form .wpcf7-acceptance .form-required,
    .p-page--contact .contact-form-wrap .wpcf7-form .wpcf7-acceptance .form-required {
      margin-left: 8px;
      vertical-align: middle;
    }

    /* 送信ボタン：モックの .btn.btn--primary（緑系・全幅・矢印文言は CF7 のラベル） */
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form input.wpcf7-submit,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form input.hinode-cf7-submit,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .hinode-cf7-submit,
    .contact-layout .contact-form-wrap .wpcf7-form input.wpcf7-submit,
    .contact-layout .contact-form-wrap .wpcf7-form input.hinode-cf7-submit,
    .contact-layout .contact-form-wrap .wpcf7-form .hinode-cf7-submit,
    .p-page--contact .contact-form-wrap .wpcf7-form input.wpcf7-submit,
    .p-page--contact .contact-form-wrap .wpcf7-form input.hinode-cf7-submit,
    .p-page--contact .contact-form-wrap .wpcf7-form .hinode-cf7-submit {
      width: 100%;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.06em;
      margin-top: 8px;
      cursor: pointer;
      border: none;
      border-radius: 4px;
      background: var(--color-primary);
      color: #fff;
      text-decoration: none;
    }
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form input.wpcf7-submit:hover,
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form input.hinode-cf7-submit:hover,
    .contact-layout .contact-form-wrap .wpcf7-form input.wpcf7-submit:hover,
    .contact-layout .contact-form-wrap .wpcf7-form input.hinode-cf7-submit:hover,
    .p-page--contact .contact-form-wrap .wpcf7-form input.wpcf7-submit:hover,
    .p-page--contact .contact-form-wrap .wpcf7-form input.hinode-cf7-submit:hover {
      filter: brightness(1.06);
      color: #fff;
    }
    /* CF7 のメッセージ領域は form の外（.wpcf7 直下）にある */
    :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7 .wpcf7-response-output,
    .contact-layout .contact-form-wrap .wpcf7 .wpcf7-response-output,
    .p-page--contact .contact-form-wrap .wpcf7 .wpcf7-response-output {
      margin: 16px 0 0;
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      font-size: 14px;
    }
    @media (max-width: 640px) {
      :is(.page-contact, .hinode-contact-page) .c-entry__content .wpcf7-form .form-row--cf7,
      .contact-layout .contact-form-wrap .wpcf7-form .form-row--cf7,
      .p-page--contact .contact-form-wrap .wpcf7-form .form-row--cf7 {
        grid-template-columns: 1fr;
      }
    }
    .confirm-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
    .confirm-table th {
      background: var(--color-bg-light);
      padding: 12px 16px;
      text-align: left;
      font-weight: 500;
      color: var(--color-text);
      width: 35%;
      border-bottom: 1px solid var(--color-border);
    }
    .confirm-table td {
      padding: 12px 16px;
      border-bottom: 1px solid var(--color-border-light);
      color: var(--color-text-light);
    }
    .thanks-box {
      text-align: center;
      padding: 60px 32px;
      background: var(--color-bg-teal);
      border-radius: var(--radius-md);
      border: 1px solid #b0d4cc;
    }
    .thanks-icon { font-size: 56px; margin-bottom: 20px; }
    .thanks-title { font-family: var(--font-serif); font-size: 24px; color: var(--color-primary); margin-bottom: 12px; font-weight: 600; }
    .thanks-text { font-size: 14px; color: var(--color-text-light); line-height: 1.9; }

    /* プライバシーポリシーボックス */
    .privacy-box {
      background: var(--color-bg-light);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 20px;
      margin: 24px 0;
      max-height: 220px;
      overflow-y: auto;
      font-size: 12px;
      color: var(--color-text-muted);
      line-height: 1.9;
    }
    .privacy-box h4 { font-size: 13px; color: var(--color-text); margin-bottom: 10px; font-weight: 600; }

    /* ステップインジケーター */
    .form-steps {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 32px;
    }
    .form-step {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--color-text-muted);
    }
    .form-step.active { color: var(--color-primary); font-weight: 600; }
    .form-step.done { color: var(--color-teal); }
    .form-step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-border);
      color: var(--color-text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }
    .form-step.active .form-step-num { background: var(--color-primary); color: white; }
    .form-step.done .form-step-num { background: var(--color-teal); color: white; }
    .form-step-sep { color: var(--color-border); font-size: 14px; }

    @media (max-width: 900px) {
      .contact-layout { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
    }

    @media (max-width: 640px) {
      .contact-layout { padding: 28px 16px; gap: 24px; }
    }