@charset "UTF-8";

.unit-section {
    margin: 0 24px 0;
    padding: 10px 0 10px;
    font-size: 110%;
}

.unit-section .unit-about {
    text-align: center;
    font-size: 105%;
    margin: 8px 0;
}

.unit-section .unit-about .unit-about-sub {
    display: inline-block;
    text-align: left;
    max-width: 100%;
}

.unit-section .unit-caption {
    text-align: center;
    color: #cc3333;
    font-size: 80%;
    margin: 0;
}

.unit-section .unit-caption .unit-caption-sub {
    display: inline-block;
    text-align: left;
    max-width: 100%;
}

.unit-section .select-input-p,
.unit-section .select-input-p2 {
    margin-bottom: 8px;
    max-width: 630px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
    padding-left: clamp(1em, 4%, 2em);
}

.unit-section .item-center {
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    max-width: 630px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    /*gap: 10px;*/
}

.unit-section .item-center .point-marker {
    color: #dd3333;
    font-weight: bold;
}

.unit-section .item-center .keiyaku-input-box {
    flex: 1 1 210px;
    min-width: 210px;
    max-width: 300px;
    box-sizing: border-box;
}

.unit-section .item-center .usage-input-box {
    flex: 1 1 300px;
    box-sizing: border-box;
}

.unit-section .item-center .input-box {
    margin-bottom: 10px;
}

.unit-section .item-center .keiyaku-input-box {
    margin-bottom: 10px;
}

.unit-section .item-center .select-input-box {
    min-width: 330px;
}

.unit-section .item-center .usage-input-box {
    min-width: 330px;
}

.unit-section .item-center .usage-input-box .usage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.unit-section .item-center .usage-input-box .usage .usage-title {
    margin-right: 12px;
    width: 160px;
    text-align: right;
}

.unit-section .item-center .usage-input-box .usage .usage-input {
    
}

.unit-section .item-center #PageMonth {
    width: 135px;
    margin-right: 5px;
}

.unit-section .item-center #PageMonth + span {
    margin-right: 5px;
}

.unit-section .item-center #PageSelectInput,
.unit-section .item-center #PageShinyaSelectInput,
.unit-section .item-center #PageShinyaKeiyaku,
.unit-section .item-center #PageKeiyaku {
    width: auto;
    margin-right: 15px;
}

.unit-section .item-center #PageShiyo {
    width: 100px;
    margin-right: 5px;
}

.unit-section .item-center #PageInputPrice {
    width: 100px;
    margin-right: 5px;
}

.unit-section .item-center .select-input-box .kome-mobile,
.unit-section .item-center .keiyaku-denryoku .kome-mobile {
    display: none;
}

.unit-section .toi-ext {
    font-size: 80%;
    text-align: center;
}

.unit-section .toi-ext .toi-ext-sub {
    display: inline-block;
    text-align: left;
    max-width: 100%;
}

.unit-section .link-right {
    text-align: right;
}

.unit-section .link-right a {
    padding-right: 1em;
}

.unit-section .shinya-radio {
    display: flex;
    list-style: none;
}

.unit-section .shinya-radio li {
    width: 260px;
    padding: 10px 0;
    min-width: 170px;
}

.unit-section .shinya-radio li h4 {
    font-size: 160%;
    color: #43921D;
    letter-spacing: 0.1em;
    font-weight: bold;
    margin-top: -6px;
    text-align: center;
}

.unit-section .shinya-radio .radiolabel {
    padding-left: clamp(36px, 5vw, 54px);
}

.unit-section .shinya-input {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 630px;
}

.unit-section .shinya-input li {
    width: 170px;
    padding: 0;
    margin-bottom: 10px;
}

.unit-section .item-center li.shinya {
    margin-bottom: 10px;
}

.unit-section .item-center li span.select-price,
.unit-section .item-center li .select-usage {
    width: 180px;
    display: block;
}

.unit-section .item-center li.keiyaku-denryoku {
    min-width: 220px;
}

.unit-section .item-center #PageShinyaInputPrice {
    width: 100px;
    margin-right: 5px;
}

.unit-section .item-center #PageShinyaShiyo {
    width: 100px;
    margin-right: 3px;
}

.unit-section .item-center li.keiyaku-denryoku #PageShinyaKeiyaku {
    margin-right: 0px
}

.unit-section .item-center li.keiyaku-denryoku .keiyaku-denryoku-text {
    padding-left: 1em;
}

#shinya-menu {
    display: none;
}

@media screen and (max-width: 768px) {
    .unit-section {
        margin: 0;
    }
    
    .unit-section .item-center {
        /*margin-left: 0;*/
        padding-left: 0;
        /*margin-left: auto;
        margin-right: auto;*/
    }
    
    .unit-section .item-center .shinya {
        /*padding-left: 18px;*/
    }
    
    .unit-section .shinya-input .keiyaku-denryoku {
        min-width: 260px;
    }
    
    
    
}

@media screen and (max-width: 569px) {
    .unit-section .select-input-p2 {
        text-align: center;
    }
    
    .unit-section .item-center .keiyaku-input-box {
        margin-left: auto;
        margin-right: auto;
    }
    
    .unit-section .item-center .keiyaku-input-box div {
        text-align: center;
    }
}

@media screen and (max-width: 583px) {
    .unit-section .select-input-p {
        /*padding-left: 1em;*/
    }
    
    .unit-section .item-center .select-input-box .kome-mobile,
    .unit-section .item-center .keiyaku-denryoku .kome-mobile {
        display: inline;
    }
    
    .unit-section .item-center li.keiyaku-denryoku .keiyaku-denryoku-text {
        padding-left: 0;
    }
}

@media screen and (max-width: 480px) {
    .unit-section .item-center {
        margin-left: 0;
        padding-left: 0;
    }
    
    .unit-section .item-center .form-box {
        margin-left: auto;
        margin-right: auto;
    }
    
    .unit-section .item-center .input-box {
        /*display: block;
        max-width: 245px;*/
        /*margin-left: auto;
        margin-right: auto;*/
    }
    
    .unit-section .item-center .input-box div {
        margin-bottom: 10px;
    }
    
    .unit-section .item-center .input-box #PageSelectInput {
        /*width: 150px;*/
    }
    
    .unit-section .item-center #PageInputPrice,
    .unit-section .item-center #PageShiyo {
        /*min-width: 150px;*/
        min-width: 100px;
    }
    
    .unit-section .item-center .form-box .kome-mobile {
        display: inline;
    }
    
    .unit-section .shinya-radio {
        display: block;
        padding-left: 0;
    }
    
    .unit-section .shinya-radio li {
        width: 100%;
        text-align: center;
    }
    
    .unit-section .shinya-radio li h4 {
        text-align: left;
    }

    .unit-section .shinya-radio .radiolabel {
        display: inline-block;
        padding-left: 54px;
        padding-top: 0;
        padding-bottom: 9px;
        width: 190px;
        text-align: left;
    }
    
    
    
    
    
}