:root {
    --bgColor-HeadTitle: #5D6B72;
    --bgColor-Info: rgba(93, 107, 114, 0.05);
    --bgColor-Orange: #FF8800;
    --bgColor-White:#FFFFFF;
    --bgColor-Blue: #0091D7;
    --fntColor-Title: #FFFFFF;
    --fntColor-Main: #465050;
    --fntColor-QuestionNumber: #0091D7;
}



.btn-area {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}


/**ラジオボタン*************************************************************/
/* ラジオボタン1つの大枠, ラジオボタンの大きさを調整 */

    /* 未選択状態のラジオボタンの背景色やボーダーの指定 */
    .radio-btn label {
        display: flex; /* 中の文字の上下中央揃えを行うための設定 */
        border: #BDC3C6 solid 2px;
        border-radius: 4px;
        align-items: center; /* 中の文字の上下中央揃えを行うための設定 */
        position: relative; /* 疑似要素の位置調整のための設定 */
    }

    /* 中の文字列の位置調整 */
    .radio-btn span {
        display: block; /* ラジオボタン内の文字の上下中央揃えを行うための設定 */
        padding-left: 46px; /* 左側のボタン設置スペース確保のための設定 */
        padding-right: 4px; /* 文字列が右側にギリギリにならないようにするための設定 */
        padding-top:20px;
        padding-bottom:20px;
    }

    /* 選択/未選択時の両方に存在する白い丸を作成 */
    .radio-btn label::before {
        margin-left: 12px;
        content: "";
        width: 22px; /* 白い丸の横の長さ */
        height: 22px; /* 白い丸の縦の長さ */
        border-radius: 50%; /* 丸くするための設定 */
        position: absolute; /* 位置調整の起点をlabelの左上の角とするための設定 */
        top: 50%;
        left: 13px;
        transform: translate(-50%, -50%); /* topとleftが丸の中心を基準とするための設定 */
        z-index: 10;
        border-style: solid;
        border-width: 1px;
        border-color: #dcdcdc;
    }
    .radio-btn input:checked + label::before {
        margin-left: 12px;
        content: "";
        width: 22px; /* 白い丸の横の長さ */
        height: 22px; /* 白い丸の縦の長さ */
        border-radius: 50%; /* 丸くするための設定 */
        position: absolute; /* 位置調整の起点をlabelの左上の角とするための設定 */
        top: 50%;
        left: 13px;
        transform: translate(-50%, -50%); /* topとleftが丸の中心を基準とするための設定 */
        z-index: 10;
        border-style: solid;
        border-width: 1px;
        border-color: #0091D7;
    }

    /* 選択時のみに存在する青い丸を作成, 基本は白い丸とすべて同じ */
    .radio-btn input:checked + label::after {
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #0091D7;
        position: absolute;
        top: 50%;
        left: 25px;
        transform: translate(-50%, -50%);
    }

    /* 選択時のみのlabelのデザイン指定 */
    .radio-btn input:checked + label {
        font-weight: bold;
        border-color: #0091D7;
    }


/**チェックボックス*************************************************************/

    /* 未選択状態のラジオボタンの背景色やボーダーの指定 */
    .check-btn label {
        display: flex; /* 中の文字の上下中央揃えを行うための設定 */
        border: #BDC3C6 solid 2px;
        border-radius: 4px;
        align-items: center; /* 中の文字の上下中央揃えを行うための設定 */
        position: relative; /* 疑似要素の位置調整のための設定 */
    }

    /* 中の文字列の位置調整 */
    .check-btn span {
        display: block; /* ラジオボタン内の文字の上下中央揃えを行うための設定 */
        padding-left: 46px; /* 左側のボタン設置スペース確保のための設定 */
        padding-right: 4px; /* 文字列が右側にギリギリにならないようにするための設定 */
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* 選択/未選択時の両方に存在する白い丸を作成 */
    .check-btn label::before {
        margin-left: 12px;
        content: "";
        width: 22px; /* 白い丸の横の長さ */
        height: 22px; /* 白い丸の縦の長さ */
        position: absolute; /* 位置調整の起点をlabelの左上の角とするための設定 */
        top: 50%;
        left: 13px;
        transform: translate(-50%, -50%); /* topとleftが丸の中心を基準とするための設定 */
        z-index: 10;
        border-style: solid;
        border-width: 1px;
        border-color: #dcdcdc;
    }

    .check-btn input:checked + label::before {
        margin-left: 12px;
        content: "";
        width: 22px; /* 白い丸の横の長さ */
        height: 22px; /* 白い丸の縦の長さ */
        position: absolute; /* 位置調整の起点をlabelの左上の角とするための設定 */
        top: 50%;
        left: 13px;
        transform: translate(-50%, -50%); /* topとleftが丸の中心を基準とするための設定 */
        z-index: 10;
        border-style: solid;
        border-width: 1px;
        border-color: #0091D7;
    }

    /* 選択時のみに存在する青い丸を作成, 基本は白い丸とすべて同じ */
    .check-btn input:checked + label::after {
        content: "";
        width: 22px;
        height: 22px;
        background-color: #0091D7;
        position: absolute;
        top: 50%;
        left: 25px;
        transform: translate(-50%, -50%);
        background-image:url("../image/checkbox.svg");
        background-repeat:no-repeat;
        background-size:contain;
    }

    /* 選択時のみのlabelのデザイン指定 */
    .check-btn input:checked + label {
        font-weight: bold;
        border-color: #0091D7;
    }



.backIconArea:hover,
a:hover,
input[type='button']:hover,
input[type='submit']:hover {
    opacity: 0.5; /* 半透明化 */
    cursor: pointer;
}