@charset "UTF-8";

/* =========================================
   変数(カスタムプロパティ)
========================================= */
:root {
    --font-color: #333;
    --accent-color: #FA7D23;
    --cont-color: #E3F9FF;
    --cont-b-color: #0075B9;
    --bold-color: #06295C;
    --bad-color: #979797;
    --form-color: #F6FDFF;
}

/* =========================================
    CTA フォームデザイン
========================================= */
#FreeConsultation_form {
    max-width: 830px; /* 横並び用に少し広めの設定 */
    margin: 0 auto;
}

#FreeConsultation_form .cta_card p,
#FreeConsultation_form .cta_card .cta_title {
    color: var(--cont-b-color);
}

.contact-form {
    margin: 40px auto 0;
}

/* --- レイアウト設定（ここが重要） --- */
.contact-form form {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4%;
    justify-content: flex-start;
}

/* 基本は2列（48%） */
.contact-form dl {
    width: 48%; 
    margin-bottom: 24px;
    box-sizing: border-box;
}

/* 1番目の「法人名」だけを1行（100%）にする */
.contact-form dl:nth-of-type(1) {
    width: 100%;
}

/* 同意ボックスとボタンエリアは1行（100%） */
.contact-form .accept_box,
.contact-form .form_btns {
    width: 100%;
}
/* --- レイアウト設定ここまで --- */

/* dt（ラベル） */
.contact-form dt {
    text-align: left;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

/* 必須ラベル */
.contact-form .required {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    color: #df2a2a;
    border: 1px solid #df2a2a;
    background: #fff;
    border-radius: 4px;
}

/* dd（入力欄の親） */
.contact-form dd {
    margin: 0;
}

/* 入力系共通スタイル */
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    height: 60px;
    padding: 0 15px;
    border: 1px solid var(--cont-b-color);
    background: var(--form-color);
    font-size: 16px;
    border-radius: 6px;
    box-sizing: border-box;
}

/* selectの矢印カスタマイズ */
.contact-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* 同意チェックボックスの調整 */
.contact-form .accept_box {
    text-align: center;
    margin: 20px 0;
}

.contact-form .check_btn input {
    height: auto;
    width: auto;
    vertical-align: middle;
}

/* ボタン本体 */
.contact-form .contact_btn {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; 
    padding: 15px 25px; /* ダウンロードボタンに合わせました */
    font-size: 2.4rem;  /* 3remから少し調整（お好みで） */
    font-weight: bold;
    color: #fff;
    background-color: var(--accent-color);
    border: none;
    border-radius: 100px; /* 丸みをダウンロードボタンと統一 */
    /* 最初は少し浮いている状態の影 */
    box-shadow: 0 5px 0 #b32d2d; /* ボタンの「厚み」に見える濃い色を下に配置 */
    cursor: pointer;
    transition: all 0.1s ease; /* 押し込みは少し速めの方が気持ちいいです */
    position: relative;
    top: 0;
}

.contact-form .contact_btn:hover {
    /* ホバーで少しだけ沈ませる */
    transform: translateY(2px);
    box-shadow: 0 3px 0 #b32d2d; /* 影を薄くして沈んだように見せる */
}

.contact-form .contact_btn:active {
    /* 実際にクリックした瞬間に完全に沈み込む */
    transform: translateY(5px);
    box-shadow: none; /* 影を消す */
}
.request a{
  color: var(--cont-color);
  border-bottom: solid 1px;
}

/* レスポンシブ：スマホでは全て1列 */
@media (max-width: 650px) {
    .contact-form dl {
        width: 100%;
    }
}


/* =========================================
    送信後に現れるダウンロードエリア
========================================= */

/* 初期状態は非表示 */
#hidden-download-area {
    display: none; 
    margin: 40px auto;
    padding: 30px;
    border: 2px solid var(--cont-b-color); 
    border-radius: 12px;
    background-color: #fff;
    text-align: left;
    box-sizing: border-box;
    animation: fadeIn 0.5s ease forwards;
}

/* 完了メッセージのテキスト */
#hidden-download-area .thanks-msg {
    font-weight: bold;
    font-size: 2rem;
    color: var(--cont-b-color);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ダウンロードボタン専用*/
#hidden-download-area .download-btn {
    display: flex;
    justify-content: center;
    text-decoration: none;
    margin: 0 auto;
    width: 100%;
    max-width: 450px;
    height: 70px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--accent-color);
    border-radius: 50px;
    box-shadow: 0 6px 15px rgba(250, 125, 35, 0.3);
    line-height: 1;
    transition: all 0.3s ease;
}

#hidden-download-area .download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(250, 125, 35, 0.4);
    background-color: #ff8c3a; /* 少しだけ明るく */
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* スマホ対応 */
@media (max-width: 650px) {
    #hidden-download-area .download-btn {
        font-size: 1.4rem;
        height: 60px;
    }
    .contact-form .contact_btn{
        font-size: 1.4rem;
    }
}

/* 「入力内容に問題があります〜」のメッセージを非表示 */
.wpcf7-response-output {
    display: none !important;
}

/* 各入力項目の下に出る「必須項目です」などの赤文字エラーだけは残したい場合 */
.wpcf7-not-valid-tip {
    display: block !important;
}

.grecaptcha-badge { 
    visibility: hidden; 
}

.recaptcha-policy {
    margin: 0 auto;
    text-align: center; 
    font-size: 12px;         
    color: #999; 
    margin-top: 15px;       
    line-height: 1.5;        
}

/* リンクの色も馴染ませたい場合 */
.recaptcha-policy a {
    color: #999;
}