/* CSSでレイアウトを定義 */
body {
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    margin: 0;
    background: #fff;
}
.contain{
    margin: auto;
    background: #fff;
    padding-bottom: 10px;
    margin-bottom: 50px;
}

.setionContent{
    text-align: center;
}
.header_content{
    background: #FFFFE2;
    padding-top: 100px; 
    margin-top: -72px;

}
.top_banner{
    width: 90%;
}
.header-buttons {
/*    display: flex;*/
    gap: 10px;
    align-items: center;
    float: right;
  /*  top: 15px;*/
    position: relative;
  /*  right: 15px;*/
}

.toplog_sp{
    width: 50%;
    background: #ff0;
}
.contact-button {
    padding: 5px 15px;
    margin: 0;
    font-size: 0.85rem;
    border-radius: 4px;
    box-shadow: none;
    white-space: nowrap;
    width: 120px;
    height: 40px;
    color: #fff;
    text-decoration: none;
    line-height: 43px;
    background: linear-gradient(90deg, #00ABE9 0%, #62D080 100%);
}

.contact-button:hover {
    filter: brightness(0.5);
    transition: background 0.3s ease;
}

.top_soudan_btns_img{
    width: 80%;
}
.linkBtn{
    margin-top: 20px;
    margin-bottom: 20px;
}
.simu-button_blue {
    background: linear-gradient(270deg, #25B3E5 0%, #005295 100%);
}

.top_banner2{
    margin-top: 20px;
    margin-bottom: 20px;
}
.top_banner3{
    margin-bottom: 20px;
}

.simu{
    background:#F6F9FC;
    text-align: center;
    padding-bottom: 30px;
}

.kakuninText{
    padding-top: 50px;
}
.jyukuTitle{
    font-size: 14px;
    color: #37CAFF;
}
/*
.jyukyuKakunin{
    font-family: "Noto Sans";
    margin-top: 18px;
    font-size: 23px;
    text-align: center;
    display: inline-block;
    border-bottom: solid .3em rgba(55, 202, 255, 1);
    font-weight: 700;
    color: #585858;
}
*/
.jyukyuKakunin {
    margin-top: 18px;
    font-size: 23px;
    text-align: center;
    display: inline-block; 
    font-weight: 700;
    color: #585858;
    position: relative; 
    z-index: 1; 
}

.jyukyuKakunin::before {
    content: '';
    position: absolute;
    bottom: -5px; /* テキストからの隙間を調整 */
    left: 0;
    right: 0;
    
    background-color: rgba(55, 202, 255, 1);
    height: 0.2em; /* 元の下線と同じ太さ */
    border-radius: 0.15em; /* heightの半分 (0.3em / 2 = 0.15em) */
}



.simulatorBox{
    width: 85%;
    margin: auto;
    margin-top: 20px;
}


/* ============== シュミレーター ============== */

.jyukyuKingaku{
    color: #005295;
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    line-height: 43px; /* 215% */
    letter-spacing: -1px;
}
/* ============== 合計金額の固定ヘッダー化 ============== */
#total-container {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* スタイル調整 */
    border-top: none; 
    background-color: #E0F4FD;
    text-align: center;
    height: 112px;
    /* Flexboxを有効にする */
    display: flex; 
    align-items: center; 
    width: 100%; 
    justify-content: center;
    
}
#total-display-area {
    font-size: 28px;
    font-weight: bold;
    display: flex; 
    justify-content: center; 
    align-items: center;
    padding-bottom: 5px;
}
#total-amount-wrapper {
        margin-left: 0; 
}
.hyouji_notice{
    margin: 0;
    color: #65B2C9;
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 166.667% */
}
/* ============================================================= */

/* 警告メッセージのスタイル */
#warning-message {
    color: #d9534f; 
    background-color: #fdf7f7;
    border: 1px solid #ebccd1;
    padding: 8px 10px;
    font-size: 0.9em;
    text-align: left;
    margin: 0 0 25px 0;
    border-radius: 4px;
    display: none;
}

/* 中央寄せコンテナ */
.centered-button-container {
    text-align: center;
    margin: 30px auto; 
    max-width: 400px;
}

#calculate-button {
    padding: 15px 40px;
    width: 70%;
    font-size: 0.9em;
    background-color: #E0F4FD; 
    color: #005295;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    box-sizing: border-box;
}
#calculate-button:hover {
    filter: brightness(0.5);
    transition: background 0.3s ease;
}


/* 設問2連動ボタンのスタイル */
#contact-button-q2 {
    display: none;
    margin-top: 15px;
    padding: 12px;
    width: 70%;
    background-color: #007bff; 
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
#contact-button-q2:hover {
    background-color: #0056b3;
}

/* ページ最下部のお問い合わせボタンのスタイル (<a>タグに対応) */
#bottom-contact-button {
    display: block; 
    text-decoration: none; /* リンクの下線を消す */
    padding: 15px 35px;
    width: 70%; 
    font-size: 0.8em;
    background-color: #FFF3D9; 
    color: #F70;
    border: none; /* <a>タグなので不要だが残しておく */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    box-sizing: border-box;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px;
}
#bottom-contact-button:hover {
    filter: brightness(0.5);
    transition: background 0.3s ease;
}


.question-group {
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    color: #585858;
}
.question-group h2 {
    margin-top: 0;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    font-size: 1.2em;
}
.option-item {
    display: block;
    margin: 5px 0;
    font-weight: normal;
}
/* セレクトボックスのスタイル調整 */
#q2-select {
    padding: 10px;
    font-size: 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
}
#current-total {
    color: #F00;
    font-size: 55px;
    font-style: normal;
    font-weight: 400;
    line-height: 43px; /* 122.857% */
    letter-spacing: -1px;
}
.optin_labels {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

/*ラジオボタン*/
/* 1. 標準のラジオボタンを完全に非表示にする */
.option-checkbox {
    /* 必須：標準のラジオボタンを隠す */
    position: absolute;
    opacity: 0;
}

/* 2. カスタムのラジオボタンのスタイルを設定 */
.custom-radio {
    /* ラジオボタンとテキストを横並びにするためにインラインブロック */
    display: inline-block;
    position: relative;
    padding-left: 50px; /* ラジオボタンのスペースを空ける */
    cursor: pointer;
}

/* 3. 擬似要素でカスタムの円形（枠線）を作成 */
.custom-radio::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    
    width: 13px; /* サイズ調整 */
    height: 13px; /* サイズ調整 */
    border-radius: 50%; /* 円形にする */
    
    /* ★ここに枠線の色を設定します★ */
    border: 3px solid #91C1D3; 
    
    /* 内部の塗りつぶしは白（または背景色） */
    background-color: #fff;
}

/* 4. 選択された時（checked）のスタイルを設定 */
/* 非表示の input が checked の時、隣接する .custom-radio をスタイリング */
.option-checkbox:checked + .custom-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px; /* .custom-radio::before の枠線とpaddingを考慮して位置調整 */
    transform: translateY(-50%);
    
    width: 15px; /* 内側の円のサイズ */
    height: 15px;
    border-radius: 50%;
    
    background-color: #91C1D3; /* 内側の塗りつぶしの色 */
}

/* 1. 標準のチェックボックスを非表示にする */
.option-checkbox {
    /* 必須：標準の要素を隠す */
    position: absolute;
    opacity: 0;
}

/* 2. カスタムのチェックボックスのスタイルを設定 */
.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 30px; /* チェックボックスのスペースを空ける */
    cursor: pointer;
    font-size: 14px;
    line-height: 23px; /* 164.286% */
    letter-spacing: -1px;
}

/* 3. 擬似要素でカスタムの四角い枠線を作成 */
.custom-checkbox::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    transform: translateY(-50%);
    
    width: 20px; /* サイズ調整 */
    height: 20px; /* サイズ調整 */
    
    /* ★ここに枠線の色を設定します★ */
    border: 2px solid #91C1D3; 
    
    background-color: #fff;
}

/* 4. チェックマーク（レ点）の非表示状態を設定 */
.custom-checkbox::after {
    content: '';
    position: absolute;
    display: none; /* 初期状態では非表示 */
    
    /* チェックマークの位置と形状を設定（ここでは単純な四角形で代用） */
    left: 7px;
    top: 20%;
    transform: translateY(-50%) rotate(45deg); /* レ点に見えるように回転 */
    
    width: 6px;
    height: 12px;
    
    border: solid #91C1D3; /* チェックマークの色も枠線と同じにする */
    border-width: 0 3px 3px 0; /* 下と右の線だけ残してレ点にする */
}


/* 5. 選択された時（checked）のスタイルを設定 */
.option-checkbox:checked + .custom-checkbox::after {
    /* チェックされたらチェックマークを表示 */
    display: block; 
}

.q_title{
    text-align: left;
    font-weight: 700;
    font-size: 15px;
    /*
    font-family: 'Inter', 'Helvetica Neue', 'Arial', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Yu Gothic', sans-serif;
    */
    }
.q_group_num{
    font-size: 20px;
}
.q_text{
    text-align: left;
    font-size: 14px;
    line-height: 30px; /* 214.286% */
    letter-spacing: -1px;
}
.top_banner_pc,.header_pc{
    display: none;
}

.br_pc{
    display: block;
}
.br_sp{
    display: none;
}
.orange_b{
    color: #F70;
    font-size: 25px;
}
.orange_s{
    color: #F70;
    font-size: 18px;
}

/* -------------------------------------- */
/* フッター */
/* -------------------------------------- */
#company{
    padding-top: 50px;
    background: #fff;
}
.company_adressBox{
    width: 80%;
    margin: auto;
}
.company_info{
    text-align: left;
    width: 80%;
    margin: auto;
    font-size: 12px;
}
.company_info > p{
    font-size: 0.8em;
}
.company_adressBox{
   text-align: left;  
    font-size: 14px;
    line-height: 30px;
}

.companyAdressName{
    padding-top: 30px;
    width: 250px;
    padding-bottom: 20px;
}
.company_zip{
/*    padding-top: 30px;*/
    padding-top: 0px;
    height: auto;
    line-height: 2.5em;
}
.company_tel{
/*    padding-top: 50px;*/
    padding-top: 0px;
    line-height: 2.5em;
}
footer {
    color: #343D48;
    text-align: center;
    margin-top: 20px;
    margin: auto;
    font-size: 0.85em;
    background: #fff;
    padding-bottom: 100px;
    padding-top: 50px;
}

#copyRightDate{
    text-align: center;
}


/* 無料相談ボタンの色を強調する例 */
.call-button {
    background: linear-gradient(90deg, #00ABE9 0%, #62D080 100%);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    width: 130px;
    border-radius: 5px;
    margin-right: 20px;
}
.call-button:hover {
    filter: brightness(0.5);
    transition: background 0.3s ease;
}

/* 補助金の無料相談の色 */
.mail-button {
    background: linear-gradient(90deg, #FF6200 0%, #FFAE00 100%);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    width: 130px;
    border-radius: 5px;
}
.mail-button:hover {
    filter: brightness(0.5);
    transition: background 0.3s ease;
}


/* --- タブレットのみ (480pxから1199px) --- */
@media (min-width: 480px) and (max-width: 1199px) {
    #contain{
        width: 480px;
        margin: auto;
    }
    body{
        background: rgb(205, 220, 57,0.62);
        color: #585858;
    }
    .start_pc{
        display: block;
    }
    .start_pc img{
        margin-top: 30px;
    }
    .top_banner_pc{
        display: block;
    }
    
    .header_pc{
        display: none;
    }
    

}

/* --- PC版 (1200px以上) のスタイル --- */
@media (min-width: 1200px) {
    .btn_SP{
        display: none;
    }
    .simu{
        background: #fff;
    }
    .elcom_top_log{
        position: relative;
        left: 55px;
        top: 20px;
    }
    .header_pc{
        display: block;
        width: 100%;
        margin: auto;
        background: #FFFFE2;
    }
    .header_Inner{
        width: 1200px;
        margin: auto;
        height: 650px;
    }
    .header_sp{
        display: none;
    }

    .setionContent_pc{
        display: flex;
        justify-content: center;
    }
    .header_top_pc{
        display: flex;
        height: 300px;
        margin-top: 20px;
    }
    .top_btn_box{
        height: 75px;
        display: flex;
        justify-content: space-between;
    }
    .header_top_pc_left{
        width: 60%;
    }
    .header_top_pc_right{
        width: 40%;
        display: flex;
        flex-direction: column;
        height: 300px;
    }
    .setionContent_pc img{
        display: block;
    }
    .simu{
        width: 1200px;
        margin: auto;
        margin-top: 100px;
    }
    .top_logo{
        position: relative;
        left: 120px;
        display: flex;
        align-items: center;
    }

    .topReadBox{
        position: relative;
        height: 100px;
    }
    .topRead{
        color: #005295;
        font-size: 42px;
        font-style: normal;
        font-weight: 600;
        line-height: 84px; /* 155.556% */
        letter-spacing: -3.76px;
        margin-left: 110px;
    }
    .kakuninText {
        padding-top: 30px;
    }
    .top_people_pic{
        width: 370px;
        position: relative;
        left: 35px;
    }

    .jyukuTitle{
        color: #37CAFF;
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px; /* 140% */
        letter-spacing: 0.2px;
        text-transform: uppercase;

    }
    
    .hyouji_notice {
        font-size: 18px;
        position: relative;
        right: 20px;
        margin-top: 20px;
    }
    .jyukyuKakunin{
        display: none;
    }

    .jyukyuKingaku{
        font-size: 33px;
    }
    .jyukyuKakunin_pc {
        display: block;
        margin-top: 18px;
        font-size: 46px;
        text-align: center;
        display: inline-block;
        font-weight: 700;
        color: #585858;
    }
    .jyukyuKakunin_pc_small{
        font-size: 32px;
    }

    /* カンタン3ステップと受給条件の確認を横並びにするための設定 */
    .jyukyu-step-underline {
        display: flex; 
        justify-content: center; /* 必要に応じて中央揃え */
        align-items: center;
        border-bottom: 5px solid #37CAFF; /* 2pxの黒い実線 */
        padding-bottom: 2px; 
        width: 70%; 
        max-width: 650px; /* 例: 最大幅を設定 */
        margin: 0 auto; /* 中央揃えにする場合 */
        align-items: flex-end;
    }

    /* 2つのspanの間のスペースを調整 */
    .jyukyu-step-underline span {
        margin-right: 10px; /* span同士の間に隙間 */
    }

    /* 最後のspanにはマージンは不要 */
    .jyukyu-step-underline span:last-child {
        margin-right: 0;
    }

    .topText{
        text-align: center;
        width: 385px;
        margin-top: 50px;
        font-size: 18px;
        color: #00B330;
    }
    
    .simulatorBox {
        width: 100%;
        margin-top: 100px;
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 50px;
        padding-bottom: 40px;;
    }

    .q_text{
        color: #585858;
        font-style: normal;
        font-weight: 400;
        line-height: 43px; /* 186.957% */
        letter-spacing: -1px;
        font-size: 22px;
    }

    .optin_labels{
        color: #585858;
        font-style: normal;
        font-weight: 400;
        line-height: 43px; /* 186.957% */
        letter-spacing: -1px;
        font-size: 22px;
    }

    .custom-checkbox {
        color: #585858;
        font-style: normal;
        font-weight: 400;
        line-height: 43px; /* 186.957% */
        letter-spacing: -1px;
        font-size: 22px;
    }

    
    .custom-checkbox::before,.custom-checkbox::after {
        top: 50%;
    }
    .question-group{
        width: 100%;
        margin: auto;
        font-size: 23px;
    }
    /*BTN*/
    .header-buttons_pc {
        display: flex;
        gap: 0px;
        align-items: center;
        float: right;
        position: relative;
        right: 15px;
    }

        /* 問い合わせボタンの色を強調する例 */
    .call-button {
        background: linear-gradient(90deg, #00ABE9 0%, #62D080 100%);
        width: 200px;
        text-align: center;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }
    .call-button:hover {
        filter: brightness(0.5);
        transition: background 0.3s ease;
    }

    /* フォームボタンの色 */
    .mail-button {
        background: linear-gradient(90deg, #FF6200 0%, #FFAE00 100%);
        width: 200px;
        text-align: center;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }
    .mail-button:hover {
        filter: brightness(0.5);
        transition: background 0.3s ease;
    }



    .header-buttons_pc .contact-button_pc {
        padding: 5px 15px;
        margin: 0;
        font-size: 0.85rem;
        border-radius: 50px;
        box-shadow: none;
        white-space: nowrap;
        width: 390px;
        height: 65px;
        color: #FFFF6B;
        text-align: center;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 65px; /* 134.615% */
        letter-spacing: 0.2px;
        text-decoration: none;
        background: linear-gradient(90deg, #00ABE9 0%, #62D080 100%);
    }
    .contact-button_pc:hover {
        filter: brightness(0.5);
        transition: background 0.3s ease;
    }

    .contain {
        margin-bottom: 20px;
    }
    .simu_button_pc_blue {
        display: inline-block;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        background: linear-gradient(270deg, #25B3E5 0%, #005295 100%);
        color: #ffffff;
        border-radius: 50px;
        border: none;
        padding: 10px 30px;
        font-size: 24px;
        font-weight: bold;
        width: 410px;
        height: 70px;
        line-height: 70px;
        margin-bottom: 50px;

    }
    .simu_button_pc_blue:hover {
        filter: brightness(0.5);
        transition: background 0.3s ease;
    }

    .q_group_box{
        display: flex;
    }
    .q_group_left{
        width: 20%;
    }
    .q_group_right{
        width: 80%;
        text-align: left;
        margin-top: 15px;
        font-size: 20px;
    }
    .q_title {
        font-size: 23px;
        float: right;
        position: relative;
        right: 30px;
    }
    .q_group_num{
        font-size: 39px;
    }
    .kekkaBtn{
        margin-top: 80px;
    }
    #calculate-button {
        width: 390px;
        height: 65px;
        padding: 0;
        font-size: 25px;
    }
    #bottom-contact-button{
        width: 390px;
        height: 65px;
        font-size: 25px;
    }
    
        /*Footerについて*/
    .company_adressBox{
        display: flex;
        justify-content: space-between;
        height: 490px;  
        padding-top: 50px;    
        border-top: 1px solid #ccc;
        width: 928px;
        margin: auto;
        text-align: left;
        color: #333;
    }
    .company_info{
        margin-bottom: 50px;
        width: 928px;
        margin: auto;
        text-align: left;
    }
    .company_adress {
        /* 子要素の幅を均等に3等分する */
        flex-basis: 33.33%; 
        
        /* 均等にスペースを埋めるよう成長させる（必須ではないが安全） */
        flex-grow: 1; 
        
        /* パディングやボーダーを含めて幅を計算する（レイアウト崩れ防止） */
        box-sizing: border-box;
        
        /* 必要に応じて、各ブロック内に余白を追加 */
        padding: 0 15px; 
    }
    .companyAdressName{
        padding-top: 50px;
        width: 250px;
        padding-bottom: 20px;
    }
    .company_zip{
    /*    padding-top: 30px;*/
        padding-top: 0px;
        height: auto;
        line-height: 2.5em;
    }
    .company_tel{
    /*    padding-top: 50px;*/
        padding-top: 0px;
        line-height: 2.5em;
    }

    .hr_line{
        display: none;
    }

    footer{
        background: #fff;
        width: 100%;
        padding-bottom: 100px;
    }


}

/*スマホ表示*/
/*@media (max-width: 767px) {*/
@media (max-width: 1199px) {
    .br_pc{
        display: none;
    }
    .br_sp{
        display: block;
    }
    .start_pc{
        display: none;
    }
    .header-buttons_sp{
        display: flex;
        justify-content: space-around;
        padding-top: 10px;
    }
    .btn_SP{
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
       
    
    }
    /* -------------------------------------- */
    /* 2. ロゴ画像の調整 */
    /* -------------------------------------- */
    .btn_SP .logo-sp {
        /* 💥 ロゴ画像の高さをボタンの高さに合わせる 💥 */
        /* ここでは、ボタンのコンテナの高さを参照し、それに合わせてロゴの max-height を設定します。
        もしボタンのパディング込みの高さが40pxだと仮定した場合の例です。
        この値は、後述の .header-buttons の高さと合わせて調整してください。 */
        height: auto;
        max-height: 40px; /* ボタンの縦幅に合わせるための最大の高さ */
        width: auto;
    }
    /* -------------------------------------- */
    /* 3. ボタンコンテナの調整 (必要に応じて) */
    /* -------------------------------------- */
    .header-buttons {
        /* 必要であればボタンコンテナのパディングや高さをここで調整 */
        display: flex; /* 内部のボタンが一つなので不要かもしれませんが、念のため */
        align-items: center;
    }



    .jyukyu-step-underline{
        display: none;
    }
}