@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Lato&display=swap');



.topLineGray {
    border-top: 1px solid gray;
}
.topLineLightgray {
    border-top: 1px solid lightgray;
}
.topLineLightBlack {
    border-top: 1px solid black;
}
.bottomLineGray {
    border-bottom: 1px solid gray;
}
.bottomLineBlack {
    border-bottom: 1px solid black;
}

.enabledFrameC {
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    background-color: aliceblue; /* #fcfffc */
    padding-bottom: 20px;
}

    .enabledFrameC h2 {
        color: black;
    }

        .enabledFrameC h2:before {
            background-color: seagreen; /* 線色 */
            border-radius: 3px; /* 線幅の半分 */
            content: "";
            display: inline-block;
            height: 35px; /* 線の長さ */
            margin-right: 10px; /* 線右の余白 */
            vertical-align: middle;
            width: 6px; /* 線幅 */
        }


.enabledFrameB {
    /*    border-top: 1px solid lightgray;*/
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    background-color: aliceblue; /* snow */
    padding-bottom: 20px;
}

    .enabledFrameB h2 {
        color: black;
    }

        .enabledFrameB h2:before {
            background-color: salmon; /* 線色 */
            border-radius: 3px; /* 線幅の半分 */
            content: "";
            display: inline-block;
            height: 35px; /* 線の長さ */
            margin-right: 10px; /* 線右の余白 */
            vertical-align: middle;
            width: 6px; /* 線幅 */
        }


.enabledFrameA {
/*    border-top: 1px solid black;
    border-bottom: 1px solid black;*/
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    background-color: aliceblue;
    padding-bottom: 20px;
}

    .enabledFrameA h2 {
        display: block;
        color: black;
        margin-top: 15px;
        margin-bottom: 10px;
    }

        .enabledFrameA h2:before {
            background-color: navy; /* 線色 */
            border-radius: 3px; /* 線幅の半分 */
            content: "";
            display: inline-block;
            height: 35px; /* 線の長さ */
            margin-right: 10px; /* 線右の余白 */
            vertical-align: middle;
            width: 6px; /* 線幅 */
        }

    .enabledFrameC h3 {
        display: block;
        color: black;
        margin-top: 15px;
        margin-bottom: 20px;
    }



.disabledFrame {
/*    border-top: 1px solid lightgray;*/
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    background-color: whitesmoke;
    padding-bottom: 20px;
}
    .disabledFrame h2 {
        color: darkgray;
    }
        .disabledFrame h2:before {
            background-color: silver; /* 線色 */
            border-radius: 3px; /* 線幅の半分 */
            content: "";
            display: inline-block;
            height: 35px; /* 線の長さ */
            margin-right: 10px; /* 線右の余白 */
            vertical-align: middle;
            width: 6px; /* 線幅 */
        }





.containerLevel1 {
    background-color: whitesmoke;
    padding: 0px;
}
    .containerLevel1 h2 {
        margin-top: 15px;
        margin-bottom: 15px;
    }











/* 電気の用途選択 */
.contractPattern {
    display: table;
    text-align: center;
    font-size: 14px;
    font-family: 'Kosugi', sans-serif;
    border-spacing: 10px 0px;
}

    .contractPattern .radioContractPattern {
        display: none;
    }

        .contractPattern .radioContractPattern:checked + label {
            display: table-cell;
            vertical-align: middle;
            width: 190px;
            height: 90px;
            color: dimgray;
            background-color: aliceblue;
            border: 2px solid midnightblue;
            border-radius: 10px;
        }
        .contractPattern .radioContractPattern:hover + label {
            border: 2px solid royalblue;
            color: royalblue;
        }

    .contractPattern .lblContractPattern {
        display: table-cell;
        vertical-align: middle;
        width: 190px;
        height: 90px;
        color: silver;
        background-color: white;
        border: 2px solid gainsboro;
        border-radius: 10px;
    }




/* エリア選択 */
.area .areaBox {
    font-size: 12px;
    font-family: 'Kosugi', sans-serif;
    margin: 0;
}
    .area .areaBox .radioArea {
        display: none;
    }
        .area .areaBox .radioArea:checked + label {
            display: inline-block;
/*            min-width: 80px;
            text-align: center;
            padding: 10px 0;*/
            color: dimgray;
            background-color: aliceblue;
            border: 2px solid midnightblue;
/*            border-radius: 4px;
            margin: 2px 0px 5px 0;*/
        }
        .area .areaBox .radioArea:hover + label {
            border: 2px solid royalblue;
            color: royalblue;
        }

        .area .areaBox .radioArea:disabled + label {
            display: inline-block;
/*            min-width: 80px;*/
/*            text-align: center;
            padding: 10px 0;*/
            color: gainsboro;
            background-color: whitesmoke;
            border: 2px solid #ececec;
/*            border-radius: 4px;
            margin: 2px 0px 5px 0;*/
        }

    .area .areaBox .lblArea {
        display: inline-block;
        min-width: 80px;
        text-align: center;
        padding: 12px 2px;
        color: silver;
        background-color: white;
        border: 2px solid gainsboro;
        border-radius: 4px;
        margin: 2px 0px 5px 0;
    }



/* 電力会社選択 */
.secCompany {
}
    .secCompany select {
        display: block;
        max-width: 420px;
        width: 100%;
        height: 30px;
        font-size: 16px;
        font-family: 'Kosugi', sans-serif;
        margin: 5px 0;
    }


/* 契約料金プラン */
.contractPlan {
}
    .contractPlan select {
        display: block;
        max-width: 420px;
        width: 100%;
        height: 30px;
        font-size: 16px;
        font-family: 'Kosugi', sans-serif;
        margin: 5px 0;
    }