/* assets/css/contact.css
   ------------------------------------------------------------
   - 既存クラス名は変更しない（追加はOK）
   - 既存トンマナ（白基調 + うっすらグラデ/テクスチャ + 太め見出し/丸み/上品な影）に寄せる
   - Contact Form 7 の汎用クラス .wpcf7-form-control を「全部ボタン化」しないように整理
   ------------------------------------------------------------ */

/* =========================================
   Fallback Tokens（サイト側で既に定義があればそれを優先）
========================================= */
:root {
    --base-color: var(--base-color, #ffffff);
    --text-color: var(--text-color, #0b1f2a);
    --muted-color: var(--muted-color, rgba(11, 31, 42, .74));
    --border-color: var(--border-color, rgba(11, 31, 42, .12));

    --main-color: var(--main-color, #0b6f86);
    --sub-color: var(--sub-color, #0a5670);
    --accent-solor: var(--accent-solor, #0b6f86);

    --container: var(--container, 1120px);
    --gutter: var(--gutter, 16px);

    --radius-sm: var(--radius-sm, 12px);
    --radius-md: var(--radius-md, 3rem);
    --radius-lg: var(--radius-lg, 22px);
    --radius-xl: var(--radius-xl, 28px);
    --radius-xxl: var(--radius-xxl, 34px);

    --shadow-1: var(--shadow-1, 0 10px 28px rgba(11, 31, 42, .10));
    --shadow-2: var(--shadow-2, 0 18px 55px rgba(11, 31, 42, .12));
}

/* =========================================
   Container / Layout
========================================= */
.contact-form-container {
    /* 二重定義を整理：中央寄せ + 読みやすい幅 */
    width: 100%;
    max-width: 860px;
    margin: clamp(1.75rem, 4.5vw, 3.25rem) auto;
    padding: 0 var(--gutter);
    text-align: left;
    color: var(--text-color);
}

/* もし周辺のセクションが存在する場合の余白調整（クラス名はそのまま） */
.page-header,
.contact-form-section {
    width: 100%;
    margin: 0 auto;
}

.page-title {
    text-align: center;
}

/* =========================================
   Form Group
========================================= */
.form-group {
    margin-bottom: clamp(1.4rem, 3.2vw, 2.25rem);
}

/* ラベル */
.form-group label {
    display: block;
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

/* 必須マーク */
.form-group .required {
    color: var(--accent-solor);
    font-size: 0.92em;
    margin-left: 6px;
    font-weight: 900;
}

/* =========================================
   Inputs
   - .wpcf7-form-control は入力にも付くので、ボタンのような装飾はしない
========================================= */
/* 共通入力スタイル（input / textarea） */
.form-group .form-control {
    box-sizing: border-box;
    width: 100%;
    height: 3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, .92);
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.7;

    box-shadow: 0 10px 28px rgba(11, 31, 42, .06);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    padding-left: 1rem;
}


/* textarea 固有 */
.form-group .form-control--textarea {
    min-height: 15rem;
    resize: vertical;
}


/* placeholder */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(11, 31, 42, .45);
}

/* focus */
.form-group .form-control:focus {
    outline: none;
    border-color: rgba(11, 111, 134, .55);
    box-shadow: 0 0 0 4px rgba(11, 111, 134, .14), 0 18px 55px rgba(11, 31, 42, .10);
    background: #fff;
}


/* =========================================
   Contact Form 7: 汎用クラスの整理
========================================= */
/* 既存CSSの .wpcf7-form-control を「全部ボタン化」しないためのガード */
.wpcf7-form-control {
    max-width: 100%;
}

/* =========================================
   Submit Button（pill）
========================================= */
.wpcf7-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 50vw;
    max-width: 18rem;
    height: 54px;

    margin: 26px auto 0;
    padding: 0 18px;

    border-radius: 999px;
    border: 1px solid rgba(11, 111, 134, .38);

    background: var(--accent-solor);
    color: #ffffff;

    font-size: 16px;
    font-weight: 950;
    letter-spacing: .02em;

    cursor: pointer;

    box-shadow: 0 18px 36px rgba(11, 111, 134, .18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}

/* hover */
.wpcf7-submit:hover {
    transform: translateY(-2px);
    filter: brightness(.98);
    box-shadow: var(--shadow-2);
}

/* focus */
.wpcf7-submit:focus-visible {
    outline: 3px solid rgba(11, 111, 134, .22);
    outline-offset: 3px;
}

/* disabled */
.wpcf7-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================================
   既存にあった .form-submit button 系（HTMLに存在する場合に備えて統一）
========================================= */
.form-submit button {
    /* .wpcf7-submit と同じトーンに寄せる */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;

    margin: 26px auto 0;
    padding: 0 18px;

    border-radius: 999px;
    border: 1px solid rgba(11, 111, 134, .38);

    background: var(--accent-solor);
    color: #ffffff;

    font-size: 16px;
    font-weight: 950;
    letter-spacing: .02em;

    cursor: pointer;
    box-shadow: 0 18px 36px rgba(11, 111, 134, .18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.form-submit button:hover {
    transform: translateY(-2px);
    filter: brightness(.98);
    box-shadow: var(--shadow-2);
}

.form-submit button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.form-submit button span {
    position: relative;
    z-index: 2;
}

/* =========================================
   CF7: validation / response
========================================= */
.wpcf7-not-valid-tip {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 850;
    color: rgba(200, 20, 20, .92);
}

.wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 14px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .92);
    color: var(--text-color);
    box-shadow: 0 10px 28px rgba(11, 31, 42, .06);
}

/* 成功/失敗の色（CF7がクラスを付けない場合もあるため控えめに） */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(11, 111, 134, .28);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: rgba(200, 20, 20, .22);
}

/* スピナー */
.wpcf7-spinner {
    margin: 12px auto 0;
    display: block;
}

/* =========================================
   （既存）ヘッダー画像周り：必要最低限だけ残す
========================================= */
@media (max-width: 768px) {
    .page-title-overlay h1 {
        font-size: 1rem !important;
    }

    .header-image-wrapper {
        height: 3rem;
        margin: 0;
        padding: 0;
    }

    .form-group .form-control {
        width: 90vw;
        ;
    }
}

/* =========================================
   Responsive（既存トンマナに合わせて段階を少なめに）
========================================= */
@media (max-width: 1080px) {
    .contact-form-container {
        max-width: 760px;
        padding: 0 calc(var(--gutter) - 2px);
    }
}

@media (max-width: 720px) {
    :root {
        --gutter: 14px;
    }

    .contact-form-container {
        max-width: 90vw;
        margin: 1.75rem auto;
    }

    .wpcf7-submit,
    .form-submit button {
        max-width: none;
        justify-content: center;
    }

    .form-group textarea {
        min-height: 12rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wpcf7-submit,
    .wpcf7-submit:hover,
    .form-submit button,
    .form-submit button:hover {
        transition: none !important;
        transform: none !important;
    }
}