/* ==========================================================
   contact.css — お問い合わせページ・サンクスページ 固有スタイル
   ※ リセット・共通レイアウト・ヘッダー・モバイルメニュー・
     ページヒーロー・パンくず・フッターは common.css で定義済みのため、
     ここには含めない
   ※ thanks.php（サンクスページ）のスタイルも本ファイルに同梱
   ========================================================== */


/* ----------------------------------------------------------
   メインコンテンツ領域（contact / thanks 共通）
   ---------------------------------------------------------- */
#contact-content,
#thanks-content {
    padding-block: 5rem 7rem;
}

@media (max-width: 768px) {
    #contact-content,
    #thanks-content {
        padding-block: 3rem 5rem;
    }
}


/* ==========================================================
   お問い合わせページ（contact.php）
   ========================================================== */


/* ----------------------------------------------------------
   イントロ文
   ---------------------------------------------------------- */
.contact-intro {
    background-color: var(--color-bg-gray);
    border-left: 4px solid var(--color-accent);
    padding: 1.75rem 2rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 3rem;
    font-size: 1rem;
    line-height: 1.9;
}

@media (max-width: 768px) {
    .contact-intro {
        padding: 1.25rem;
    }
}


/* ----------------------------------------------------------
   電話でのお問い合わせブロック（thanks ページと共通）
   ---------------------------------------------------------- */
.contact-tel-block,
.thanks-tel-block {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

.contact-tel-label,
.thanks-tel-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
}

.contact-tel-number,
.thanks-tel-number {
    display: inline-block;
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 900;
    color: var(--color-accent);
    letter-spacing: 0.05em;
    line-height: 1.2;
    transition: opacity 0.2s ease;
}

.contact-tel-number:hover,
.thanks-tel-number:hover {
    opacity: 0.8;
}

.contact-tel-note,
.thanks-tel-note {
    margin-top: 0.75rem;
    font-size: 0.825rem;
    color: var(--color-text-muted);
}


/* ----------------------------------------------------------
   フォームでのお問い合わせ — セクション
   ---------------------------------------------------------- */
.contact-form-block {
    margin-top: 4rem;
}

.contact-form-title {
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0.6rem 1.25rem;
    background-color: var(--color-bg-gray);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    margin-bottom: 1.5rem;
}

.contact-form-note {
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.contact-required-mark {
    color: var(--color-accent);
    font-weight: 700;
}

.contact-form-wrap {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2rem;
}

@media (max-width: 768px) {
    .contact-form-wrap {
        padding: 1.5rem 1.25rem;
    }
}


/* ----------------------------------------------------------
   Contact Form 7 — フォーム要素スタイル
   ※ CF7 が生成する .wpcf7-form / .wpcf7-submit 等を上書き
   ---------------------------------------------------------- */

/* 段落（CF7 が <p> を残してしまった場合のフォールバック）
   ※ 推奨：wp-config.php で define('WPCF7_AUTOP', false); にして
     <p> 自体を無効化する。ここはあくまで保険のスタイル */
.contact-form-wrap .wpcf7-form p {
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1.85;
}

/* label 自体は装飾なしの透過ラッパー
   （視覚レイアウトは中の .form-row が担当） */
.contact-form-wrap .wpcf7-form label {
    display: block;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

/* ----------------------------------------------------------
   フィールド行（.form-row）— 2カラムレイアウト
   ※ HTMLテンプレート側で
     <label>
       <div class="form-row">
         <div class="form-title">項目名</div>
         <div class="form-field">入力欄</div>
       </div>
     </label>
     という構造で出力する想定
   ※ SP（768px以下）は 1カラムにスタック
   ---------------------------------------------------------- */
.contact-form-wrap .form-row {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* form-title — 左カラム（項目名） */
.contact-form-wrap .form-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text);
}

/* form-field — 右カラム（入力欄ラッパー） */
.contact-form-wrap .form-field {
    min-width: 0; /* grid内で長いplaceholderが溢れるのを防止 */
}

/* 必須マーク */
.contact-form-wrap .required {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.8rem;
}

.contact-form-wrap .form-title .required {
    margin-left: 0;
}

/* 承諾チェックボックス群のラッパー — フォーム最終行の下に余白を取る */
.contact-form-wrap .form-acceptance {
    margin-top: 2rem;
}

/* 承諾チェックボックスが複数並んだ場合の間隔 */
.contact-form-wrap .form-acceptance .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0.25rem;
}

/* 承諾文中のリンク（プライバシーポリシー等）— 下線とアクセントカラーで可読性を上げる */
.contact-form-wrap .form-acceptance a {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s ease;
}

.contact-form-wrap .form-acceptance a:hover,
.contact-form-wrap .form-acceptance a:focus-visible {
    opacity: 0.75;
    text-decoration-thickness: 2px;
}

/* 別タブで開くリンクには小さな外部リンクアイコンを後置 */
.contact-form-wrap .form-acceptance a[target="_blank"]::after {
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.25em;
    vertical-align: 0.05em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center / contain;
}

.contact-form-wrap .wpcf7-submit {
    margin-top: 1.5rem;
}

/* SP：1カラム表示 */
@media (max-width: 768px) {
    .contact-form-wrap .form-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem 0;
    }
}

/* テキスト系入力欄 */
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap input[type="url"],
.contact-form-wrap input[type="number"],
.contact-form-wrap select,
.contact-form-wrap textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-wrap input[type="text"]:focus,
.contact-form-wrap input[type="email"]:focus,
.contact-form-wrap input[type="tel"]:focus,
.contact-form-wrap input[type="url"]:focus,
.contact-form-wrap input[type="number"]:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(234, 51, 65, 0.1);
}

.contact-form-wrap textarea {
    min-height: 10rem;
    resize: vertical;
}

/* ラジオ・チェックボックス */
.contact-form-wrap .wpcf7-list-item {
    display: block;                 /* 横並び → 縦並びに変更 */
    margin: 0 0 0.6rem 0 !important;
}

.contact-form-wrap .wpcf7-list-item:last-child {
    margin-bottom: 0 !important;
}

/* リストアイテム内のラベルは inline-flex で
   ラジオボタンとテキストを縦中央揃えに */
.contact-form-wrap .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
}

.contact-form-wrap .wpcf7-list-item-label {
    line-height: 1.5;
}

.contact-form-wrap input[type="radio"],
.contact-form-wrap input[type="checkbox"] {
    margin: 0;
    accent-color: var(--color-accent);
    flex-shrink: 0;
}

/* 送信ボタン */
.contact-form-wrap .wpcf7-submit {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 2rem auto 0;
    padding: 1rem 2rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: var(--color-accent);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 20px rgba(234, 51, 65, 0.2);
}

.contact-form-wrap .wpcf7-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.contact-form-wrap .wpcf7-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* スピナー（送信中表示） */
.contact-form-wrap .wpcf7-spinner {
    margin-left: 0.75rem;
    vertical-align: middle;
}

/* バリデーションエラー（個別フィールド） */
.contact-form-wrap .wpcf7-not-valid-tip {
    display: block;
    color: var(--color-accent);
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

.contact-form-wrap .wpcf7-not-valid {
    border-color: var(--color-accent) !important;
    background-color: #fdf0f1;
}

/* 全体メッセージ（送信成功・失敗・バリデーション等） */
.contact-form-wrap .wpcf7-response-output {
    margin: 2rem 0 0 !important;
    padding: 1rem 1.25rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.7;
}

.contact-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.failed .wpcf7-response-output {
    border-color: var(--color-accent) !important;
    background-color: #fdf0f1;
    color: var(--color-accent);
}

.contact-form-wrap .wpcf7 form.sent .wpcf7-response-output {
    border-color: #28a745 !important;
    background-color: #f0f9f4;
    color: #1d7a3a;
}


/* ==========================================================
   サンクスページ（thanks.php）
   ========================================================== */


/* ----------------------------------------------------------
   完了メッセージブロック
   ---------------------------------------------------------- */
.thanks-message {
    background-color: var(--color-bg-gray);
    border-left: 4px solid var(--color-accent);
    padding: 2rem 2rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .thanks-message {
        padding: 1.5rem 1.25rem;
    }
}

.thanks-lead {
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.thanks-lead strong {
    color: var(--color-accent);
    font-weight: 700;
}

.thanks-note {
    font-size: 0.825rem;
    line-height: 1.85;
    color: var(--color-text-light);
    padding-top: 1.25rem;
    border-top: 1px dashed var(--color-border);
}


/* ----------------------------------------------------------
   トップページに戻るボタン
   ---------------------------------------------------------- */
.thanks-action {
    text-align: center;
    margin-top: 3.5rem;
}

.btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 3rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: var(--color-accent);
    border-radius: 9999px;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 20px rgba(234, 51, 65, 0.2);
}

.btn-back-home::before {
    content: '←';
    font-size: 1.1rem;
}

.btn-back-home:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}