/* ==========================================================
   Contact Page Styling
   ========================================================== */
.l-main-contact,
.l-main-thanks {
    background-color: #212121;
    overflow-x: hidden;
}

/* Hero Section */
.p-contact-hero {
    width: 100%;
    height: 482px;
}

.p-contact-hero__inner {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.p-contact-hero__left {
    width: 35%;
    flex-shrink: 0;
}

.p-contact-hero__title {
    color: #FFF;
    text-align: center;
    font-family: Roboto;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 3.2px;
    margin: 0;
}

.p-contact-hero__right {
    width: 65%;
    height: 482px;
    flex-shrink: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), 
                url('../images/contact-hero.jpg') lightgray -324.086px -103.433px / 142.563% 182.811% no-repeat;
}

/* Intro Section */
.p-contact-intro {
    padding: 100px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-contact-intro__text {
    width: 100%;
    max-width: 1064px;
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

/* Form Section Wrapper */
.p-contact-form {
    width: 1200px;
    margin: 0 auto 80px;
}

.p-contact-form__inner {
    width: 100%;
    background-color: #f2f2f2;
}

.p-contact-form__content-inner {
    /* 入力幅を最大化するため左右は 100px 上下のゆとり 90px は維持 */
    padding: 90px 150px; 
    background: #f2f2f2;
}

.p-contact-form__container {
    width: 100%;
    margin: 0 auto;
    min-height: 1232px;
}

/* Thanks Page Styling (Base: 404.php) */
.p-thanks-container {
    width: 100%;
}

.p-thanks-content {
    text-align: center;
    padding: 150px 80px;
}

.p-thanks-content__title {
    margin-top: 0;
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--color-white);
}

.p-thanks-content__text {
    margin-bottom: 40px;
    line-height: 1.6;
    color: var(--color-white);
}

.p-thanks-btn-back__link {
    display: inline-block;
    padding: 15px 40px;
    background: var(--color-blue);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    transition: 0.3s;
}

.p-thanks-btn-back__link:hover {
    background: var(--color-white) !important; 
    color: var(--color-accent-blue) !important;
    transform: translateY(-2px);              
    opacity: 1;                            
}

/* ==========================================================
   Contact Form 7 Snippet Detail Styling
   ========================================================== */

/* フォームタイトル (contactform7-title.css) */
.c-form__title {
    display: flex;
    width: 100%;
    height: 58px;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto 60px;
    color: var(--color-blue);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 35px;
}

/* 行レイアウト */
.c-form__row {
    display: flex;
    align-items: center; 
    gap: 40px; 
}

.c-form__row--textarea {
    align-items: flex-start;
}

/* 項目名 (contactform7-項目名.css) */
.c-form__label {
    display: inline-block; 
    width: 220px; /* 幅を固定し、入力欄の開始位置を一直線に揃える */
    flex-shrink: 0; 
    color: #333;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.c-form__label span {
    color: #f00;
    font-size: 12px;
    margin-left: 5px;
}

/* 入力欄コンテナ */
.c-form__input {
    flex: 1; 
    width: 100%;
}
.c-form__input p,
.c-form__row p {
    margin: 10px 0;
}

/* CF7特有のラッパー対策 */
.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* contactform7-お名前・フリガナ・郵便番号・メールアドレス.css */
.c-form__input input[type="text"],
.c-form__input input[type="email"] {
    width: 100% !important; 
    max-width: none !important;
    height: 40px;
    border: 0.5px solid #435243;
    padding: 0 10px;
    background: #FFF;
    font-size: 16px;
    box-sizing: border-box;
}

/* 添付ファイル */
.c-form__input input[type="file"] {
    width: 100% !important;
    border: none !important; /* input自体の枠線を消すことで、ボタンが枠にぶつかるのを防ぐ */
    background: transparent !important;
    font-size: 14px;
    color: #333; /* 「選択されていません」等の文字色 */
    cursor: pointer;
}

/* ブラウザの「ファイルを選択」ボタンだけを個別にデザイン */
.c-form__input input[type="file"]::file-selector-button {
    width: 140px;
    height: 36px;
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    color: #333;
    font-size: 14px;
    margin-right: 20px; /* ボタンとテキストの間の余白 */
    cursor: pointer;
    transition: background 0.3s;
}

.c-form__input input[type="file"]::file-selector-button:hover {
    background: #EEE;
}

/* contactform7-お問い合わせ内容.css */
.c-form__input textarea {
    width: 100% !important; 
    max-width: none !important;
    height: 155px;
    border: 0.5px solid #435243;
    padding: 10px;
    background: #FFF;
    font-size: 16px;
    box-sizing: border-box;
}

/* 区切り線 */
.c-form__sep {
    width: 100%;
    height: 0.5px;
    background: #aaa;
    margin: 10px 0;
}

/* 個人情報保護セクション */
.c-form__policy {
    margin-top: 60px;
}

/* 同意タイトル飾り */
.c-form__policy-title {
    display: flex;
    padding: 5px 30px;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid #333;
    border-left: 10px solid #333;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.c-form__policy-box {
    border: 1px solid #D9D9D9;
    padding: 20px;
    height: 300px;
    overflow-y: scroll;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background-color: #fcfcfc;
}

/* 同意チェック (contactform7-同意チェック.css)  */
.c-form__acceptance {
    text-align: center;
    margin: 40px 0;
    color: #333;
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* 送信ボタン (contactform7-送信ボタン.css)  */
.c-form__submit {
    text-align: center;
    margin-bottom: 0;
    position: relative; /* ローディングマークの基準点にするために追加 */
}

.c-form__submit input[type="submit"] {
    display: inline-flex;
    width: 203px;
    height: 46px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--color-blue);;
    border: 2px solid transparent;
    cursor: pointer;
    transition: opacity 0.3s ease;;
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
}

/* ターゲットを .wpcf7-spinner に変更し、絶対配置にする */
.wpcf7 .wpcf7-spinner,
.wpcf7 .ajax-loader {
    position: absolute !important; /* 物理的な幅をゼロにし、配置から除外する */
    left: 50% !important;
    margin-left: 110px !important; /* ボタンの半分の幅(約101px) + 余白分、右へ飛ばす */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.c-form__submit input[type="submit"]:hover {
    background: var(--color-white) !important; 
    color: var(--color-accent-blue) !important; 
    border-color: var(--color-accent-blue);   
    transform: translateY(-2px);        
    opacity: 1;
}

/* ==========================================================
   Contact Form 7 レスポンスメッセージ（送信完了・エラー）
   ========================================================== */

/* メッセージ全体の箱（共通設定） */
.wpcf7-response-output {
    margin: 30px 0 0 !important; /* 送信ボタンとの間隔 */
    padding: 15px 20px !important;
    font-family: "Noto Sans JP", sans-serif; /* フォント指定 */
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    background-color: #fff; /* 背景を白にして文字を浮き立たせる */
    border: 2px solid transparent !important;
}

/* 1. 送信成功時（サンキューメッセージ） */
.wpcf7.status-sent .wpcf7-response-output {
    display: none !important;     /* 送信成功時はメッセージ非表示 */
}

/* 2. 入力エラーがある時（バリデーションエラー） */
.wpcf7.status-validation-errors .wpcf7-response-output {
    border-color: #f00 !important;    /* 警告を表す赤色の枠線 */
    color: #f00 !important;           /* 文字色：赤 */
}

/* 3. 送信失敗時（システムエラー等） */
.wpcf7.status-aborted .wpcf7-response-output {
    border-color: #ffb900 !important; /* 注意を表すオレンジ色の枠線 */
    color: #ffb900 !important;        /* 文字色：オレンジ */
}

/* 入力項目のすぐ下にでる赤いエラー文字の調整 */
.wpcf7-not-valid-tip {
    display: block;
    color: #f00 !important;
    font-weight: 500;
    font-size: 14px;
    margin-top: 5px;
}

/* 送信成功時のフェードアウト演出 */
.l-main-contact {
    transition: opacity 0.6s ease; /* 0.6秒かけて変化 */
    opacity: 1;
}

/* JSでこのクラスが付与された瞬間に透明になる */
.l-main-contact.is-fadeout {
    opacity: 0 !important;
}

/* ---   Responsive (1250px基準) --- */
@media (max-width: 1250px) {
    .p-contact-form,
    .c-cta__inner {
        width: 90%;
    }

    /* フォーム内の左右余白（150px）が広すぎるため少し縮小 */
    .p-contact-form__content-inner {
        padding: 60px 80px; /* */
    }
}

/* --- Responsive (834px基準) --- */
@media (max-width: 834px) {
    /* Hero Section Responsive */
    .p-contact-hero { position: relative; height: 482px; }
    .p-contact-hero__inner {
        position: relative; z-index: 10; height: 100%;
        display: flex; justify-content: center; align-items: center; padding: 0 20px;
    }
    .p-contact-hero__left { width: 100%; position: relative; z-index: 20; }
    .p-contact-hero__title { text-align: center; color: #FFF; font-size: 45px; letter-spacing: 2px; }
    .p-contact-hero__right { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; margin: 0; background-position: center; background-size: cover; }

    /* Layout Reset */
    .p-contact-intro { padding: 30px 20px 0; }
    /* 1. 画面端と「白い箱」の間の余白を広げる */
    .p-contact-form { padding: 40px 20px; }  /* 画面端からの距離 */
    /* 2. 「白い箱」と「中身の灰色エリア」の間の余白を広げる */
    .p-contact-form__inner { margin-bottom: 60px; padding: 40px 20px; }  /* 全方向に20pxの「白い縁（ふち）」を作ります */
    /* 3. 灰色エリア内の余白（文字が端に寄らないようにする） */
    .p-contact-form__content-inner { padding: 40px 10px; }  /* これで文字が灰色エリアの端にかからない */

    /* フォームモバイル対応 */
    .c-form__row { flex-direction: column; align-items: flex-start; gap: 0; padding: 0; }
    .c-form__label { width: 100%; line-height: 1.5; }
    .c-form__input input[type="text"], .c-form__input input[type="email"], .c-form__input input[type="file"], .c-form__input textarea { width: 100%; max-width: 100%; }
    
    .p-thanks-content {
        padding: 100px 20px; /* PC版の 80px から 20px へ縮小 */
    }
}



/* Responsive */

@media (max-width: 834px) {
    .p-contact-hero__left {
    width: 100%;
    }
    .c-form__sep {
        margin: 20px 0;
    }
}

@media (max-width: 480px) {
    .p-contact-form {
        padding: 0;
    }
    .c-form__row p {
        margin: 0;
    }
    .p-contact-form__content-inner {
        padding: 0;
    }
    .c-form__title {
        font-size: 28px;
    }
    .wpcf7-list-item {
        margin: 0;
    }
}