/* ==========================================================
   CONTACT ページ 統合CSS
   役割：
   お問い合わせページ全体（Hero・フォーム）のスタイル

   他ページ（SERVICE / COMPANY / FLOW）と
   同じトーン＆マナーで統一しています。
========================================================== */

/* ==========================================================
   CONTACT Hero
   ページタイトルエリア
   ※背景画像が無いページなので、CTAと同じ赤グラデーションを使用
========================================================== */

.contact-hero{
    width:100%;
    padding:100px 20px 60px;

    background:linear-gradient(
        135deg,
        #a00012  0%,
        #b00014  50%,
        #c00000 100%
    );

    text-align:left;
    box-sizing:border-box;
}

.contact-hero-inner{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-left:260px;                               /* 他Heroと同じPC位置調整 */
    box-sizing:border-box;
}

.contact-hero-en{
    margin:0 0 10px;
    color:#f1efef;
    font-size:18px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

.contact-hero-inner h1{
    width:100%;
    max-width:900px;
    margin:0 0 20px;
    color:#ffffff;
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif;
    font-size:clamp(32px,4vw,44px);
    font-weight:700;
    line-height:1.4;
    word-break:normal;
    overflow-wrap:anywhere;
}

.contact-hero-lead{
    width:100%;
    max-width:800px;
    margin:0;
    color:#f5eeee;
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif;
    font-size:17px;
    line-height:1.9;
    word-break:normal;
    overflow-wrap:anywhere;
}

/* ==========================================================
   CONTACT Section
   フォーム全体
========================================================== */

.contact-section{
    width:100%;
    padding:80px 0 100px;
    background:#ffffff url("assets/images/bg-wood-white.png") repeat;
}

.contact-container{
    width:min(90%,800px);
    margin:0 auto;
}

/* ==========================================
   見出しエリア
========================================== */

.contact-heading{
    margin-bottom:40px;
    text-align:center;
}

.contact-heading-en{
    margin:0 0 10px;
    color:#c00000;
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.contact-heading h2{
    margin:0 0 12px;
    color:#222222;
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif;
    font-size:clamp(24px,3vw,30px);
    font-weight:700;
    line-height:1.5;
}

.contact-heading p{
    margin:0;
    color:#555555;
    font-size:16px;
    line-height:1.8;
}

/* ==========================================
   フォーム全体（カード風の枠）
========================================== */

.contact-form-area{
    width:100%;
    padding:50px 60px;
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    box-sizing:border-box;
}

/* ==========================================================
   Contact Form 7 フォーム本体
========================================================== */

.contact-form-area .wpcf7-form p{
    margin:0 0 24px;
}

.contact-form-area .wpcf7-form label{
    display:block;
    margin-bottom:8px;
    color:#222222;
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif;
    font-size:15px;
    font-weight:700;
}

.contact-form-area .wpcf7-form input[type="text"],
.contact-form-area .wpcf7-form input[type="email"],
.contact-form-area .wpcf7-form input[type="tel"],
.contact-form-area .wpcf7-form input[type="number"],
.contact-form-area .wpcf7-form select,
.contact-form-area .wpcf7-form textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #dddddd;
    border-radius:8px;
    background:#fafafa;
    color:#333333;
    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
    box-sizing:border-box;
    transition:.3s;
}

.contact-form-area .wpcf7-form textarea{
    min-height:180px;
    resize:vertical;
}

.contact-form-area .wpcf7-form input:focus,
.contact-form-area .wpcf7-form select:focus,
.contact-form-area .wpcf7-form textarea:focus{
    outline:none;
    border-color:#c00000;
    background:#ffffff;
}

/* 必須マーク（Contact Form 7標準の span.wpcf7-list-item など） */
.contact-form-area .wpcf7-form label .required,
.contact-form-area .wpcf7-form label .wpcf7-not-valid-tip{
    color:#c00000;
}

/* エラーメッセージ */
.contact-form-area .wpcf7-not-valid-tip{
    display:block;
    margin-top:6px;
    color:#c00000;
    font-size:13px;
}

/* 送信後のメッセージ（成功／失敗） */
.contact-form-area .wpcf7-response-output{
    margin-top:24px;
    padding:14px 18px;
    border-radius:8px;
    font-size:15px;
    line-height:1.7;
}

/* ==========================================
   送信ボタン
========================================== */

.contact-form-area .wpcf7-form .wpcf7-submit{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:280px;
    padding:16px 40px;

    background:#c00000;
    color:#ffffff;

    font-family:"Noto Sans JP","Noto Sans",Arial,sans-serif;
    font-size:17px;
    font-weight:700;

    border:2px solid #c00000;
    border-radius:50px;

    cursor:pointer;
    transition:.3s;
}

.contact-form-area .wpcf7-form .wpcf7-submit:hover{
    background:#ffffff;
    color:#c00000;
}

/* 送信ボタンを中央揃えにするための親要素 */
.contact-form-area .wpcf7-form p:has(.wpcf7-submit){
    text-align:center;
    margin-top:16px;
}

/* ==========================================================
   CONTACT タブレット対応
   1024px以下
========================================================== */

@media screen and (max-width:1024px){

    .contact-hero{
        padding:100px 20px 50px;
    }

    .contact-hero-inner{
        padding-left:0;
    }

    .contact-form-area{
        padding:40px 40px;
    }
}

/* ==========================================================
   CONTACT スマホ対応
   768px以下
   ※PC表示には影響しない
========================================================== */

@media screen and (max-width:768px){

    .contact-hero{
        margin-top:118px;                             /* 固定ヘッダー(118px)の分だけ下へ空ける */
        padding:38px 20px 32px;
        box-sizing:border-box;
    }

    .contact-hero-inner{
        padding-left:0;
    }

    .contact-hero-en{
        font-size:14px;
        letter-spacing:2px;
        margin-bottom:8px;
    }

    .contact-hero-inner h1{
        font-size:clamp(26px,7vw,34px);
        margin-bottom:16px;
    }

    .contact-hero-lead{
        font-size:15px;
        line-height:1.8;
    }

    .contact-section{
        padding:50px 0 70px;
    }

    .contact-container{
        width:92%;
    }

    .contact-heading{
        margin-bottom:28px;
    }

    .contact-heading h2{
        font-size:22px;
    }

    .contact-heading p{
        font-size:14px;
    }

    .contact-form-area{
        padding:30px 22px;
        border-radius:12px;
    }

    .contact-form-area .wpcf7-form label{
        font-size:14px;
    }

    .contact-form-area .wpcf7-form input[type="text"],
    .contact-form-area .wpcf7-form input[type="email"],
    .contact-form-area .wpcf7-form input[type="tel"],
    .contact-form-area .wpcf7-form input[type="number"],
    .contact-form-area .wpcf7-form select,
    .contact-form-area .wpcf7-form textarea{
        font-size:15px;
        padding:12px 14px;
    }

    .contact-form-area .wpcf7-form .wpcf7-submit{
        width:100%;
        min-width:0;
        padding:15px 20px;
        font-size:16px;
    }
}

/* ==========================================================
   CONTACT 小型スマホ対応
   480px以下
========================================================== */

@media screen and (max-width:480px){

    .contact-hero{
        margin-top:106px;                             /* 480px以下のヘッダー高さ(106px)に合わせる */
        padding:28px 15px 24px;
    }

    .contact-hero-en{
        font-size:12px;
    }

    .contact-hero-inner h1{
        font-size:clamp(22px,7vw,28px);
    }

    .contact-hero-lead{
        font-size:14px;
    }

    .contact-form-area{
        padding:24px 16px;
    }

    .contact-heading h2{
        font-size:19px;
    }
}