@charset "UTF-8";
/* リセット */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, a, b {
    margin: 0;
    padding: 0;
    font-size: 100%;
    line-height: 100%;
    list-style-type: none;
    vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
}

@font-face {
    font-family: 'logob';
    src: url("../fonts/logotypejp_mp_b_1.1.ttf") format("OpenType");
}

@font-face {
    font-family: 'logo';
    src: url("../fonts/logotypejp_mp_m_1.1.ttf") format("OpenType");
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
}

/* Elements */
html {
    font-size: 62.5%;
    font-family: 'Noto Sans JP', sans-serif;
}

body {
    font-size: 1.4rem;
}

img {
    max-width: 100%;
    max-height: 100%;
}

a {
    color: #333C4F;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"], input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}

    input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
        display: none;
    }

    input[type="submit"]::focus, input[type="button"]::focus {
        outline-offset: -2px;
    }

input[type="text"],
input[type="button"],
input[type="submit"] {
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
}

header {
    z-index: 10;
    position: relative;
    background: #fff;
}

@media screen and (min-width: 768px) {
    header {
        border-bottom: 1px solid #eee;
        position: fixed;
        width: 100%;
        top: 0;
    }
}

@media screen and (max-width: 767px) {
    header {
        padding-top: 50px;
    }
}

@media screen and (max-width: 767px) {
    header #nav-content {
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        background-color: #333C4F;
    }
}

@media print {
    header {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    #nav-open {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .sp-logo {
        background: #fff;
        padding: 0;
        box-sizing: border-box;
    }

        .sp-logo .sp-logo__link {
            max-width: 64vw;
            display: block;
            height: 50px;
            padding: 10px 20px;
        }

    #nav-drawer {
        position: fixed;
        top: 0;
        width: 100%;
    }
}

@media screen and (max-width: 767px) and (max-width: 767px) {
    #nav-drawer {
        height: 51px;
        border-bottom: 1px solid #000;
    }
}

@media screen and (max-width: 767px) {
    /*チェックボックス等は非表示に */
    .nav-unshown {
        display: none;
    }
    /*アイコンのスペース */
    #nav-open {
        position: fixed;
        right: 0;
        top: 0;
        width: 5rem;
        height: 5rem;
        z-index: 10000;
        background: #333C4F;
        color: #fff;
        font-size: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        #nav-open span {
            position: relative;
            height: 3px;
            /*線の太さ */
            width: 2.3rem;
            /*長さ */
            border-radius: 3px;
            background: #fff;
            text-indent: -2px;
            display: block;
            content: '';
            cursor: pointer;
            transition: .2s;
            top: 1rem;
            margin-bottom: 2rem;
            border-radius: 2px;
        }

            #nav-open span:before, #nav-open span:after {
                opacity: 1;
                transition: .2s;
                position: absolute;
                height: 3px;
                /*線の太さ */
                width: 100%;
                /*長さ */
                border-radius: 3px;
                background: #fff;
                display: block;
                content: '';
                cursor: pointer;
                bottom: -7px;
            }

            #nav-open span:after {
                bottom: -14px;
            }
    /*ハンバーガーアイコンをCSSだけで表現 */
    /*閉じる用の薄黒カバー */
    #nav-close {
        display: none;
        /*はじめは隠しておく */
        position: fixed;
        z-index: 99;
        top: 0;
        /*全体に広がるように */
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }
    /*中身 */
    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        /*最前面に */
        /*右側に隙間を作る（閉じるカバーを表示） */
        max-width: 330px;
        /*最大幅（調整してください） */
        height: 100%;
        background: #fff;
        /*背景色 */
        transition: .3s ease-in-out;
        /*滑らかに表示 */
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
        /*左に隠しておく */
    }
}

@media screen and (max-width: 767px) and (max-width: 767px) {
    #nav-content {
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {
    /*チェックが入ったらもろもろ表示 */
    #nav-input:checked + #nav-open span {
        transform: rotate(-45deg);
        top: 1.7rem;
        right: 0rem;
    }

        #nav-input:checked + #nav-open span::before {
            opacity: 0;
        }

        #nav-input:checked + #nav-open span::after {
            transform: rotate(-90deg);
            top: 0;
        }

    #nav-input:checked ~ #nav-close {
        display: block;
        /*カバーを表示 */
        opacity: .5;
    }

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        /*中身を表示（右へスライド） */
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
    }
}

@media screen and (min-width: 768px) {
    .sp-logo,
    #nav-input {
        display: none;
    }
}

.gnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 104rem;
    margin: auto;
}

@media screen and (max-width: 767px) {
    .gnav {
        width: 100%;
    }
}

.gnav-logo {
    height: 5rem;
    width: 30%;
}

    .gnav-logo a {
        display: flex;
        align-items: center;
        height: 100%;
        max-width: 25rem;
    }

@media screen and (max-width: 767px) {
    .gnav-logo {
        background-color: #fff;
    }
}

@media screen and (min-width: 768px) and (max-width: 1070px) {
    .gnav {
        padding: 0 3rem;
    }

        .gnav .subnav-list__item.name {
            width: 32%;
        }
}

.gnav .subnav-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 70%;
    height: 6rem;
    flex-wrap: wrap;
}

.gnav .subnav-list__item {
    font-weight: bold;
    margin-left: 2rem;
}

    .gnav .subnav-list__item.login {
        display: block;
        background: #333C4F;
        padding: .3rem 1.0rem;
        border-radius: 2.0rem;
        color: #F3F4F7;
        font-size: 1.2rem;
        line-height: 1.8rem;
        margin-left: 1rem;
        white-space: nowrap;
    }

    .gnav .subnav-list__item.name {
        max-width: 32rem;
        color: #333C4F;
        padding-right: 2rem;
        font-size: 1.6rem;
        line-height: 2.0rem;
        text-align: justify;
        margin-right: 2rem;
        position: relative;
    }

@media screen and (min-width: 768px) and (max-width: 1070px) {
    .gnav .subnav-list__item.name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.gnav .subnav-list__item.name::after {
    position: absolute;
    right: 0;
    content: "様";
    font-weight: normal;
    font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
    .gnav .subnav-list__item.name {
        margin-left: 3.2vw;
        margin-right: 3.2vw;
        margin-top: 3.2vw;
        margin-bottom: 2.2vw;
        font-size: 3.2vw;
    }
}

.gnav .subnav-list__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1rem;
}

    .gnav .subnav-list__link i::before {
        font-size: 2.4rem;
        margin-bottom: .4rem;
        display: block;
    }

@media screen and (max-width: 767px) {
    .gnav .subnav-list {
        height: 24vh;
        padding: 5vh 10vw;
        margin: 0;
        width: 100%;
        justify-content: center;
        background-color: #fff;
    }

    .gnav .subnav-list__item {
        margin-left: 1rem;
        margin-right: 1rem;
    }

        .gnav .subnav-list__item .subnav-list__link {
            color: #fff;
        }

    .gnav .subnav-list.sp {
        background-color: #333C4F;
        padding: 5vh;
    }
}

.gnav-list {
    position: relative;
    height: 8rem;
    display: flex;
    align-items: center;
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
}

    .gnav-list::after {
        content: "";
        width: 100vw;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        background-color: #333C4F;
        position: absolute;
        z-index: -1;
    }

@media screen and (max-width: 767px) {
    .gnav-list {
        padding: 3vh 7vh;
        flex-direction: column;
        height: auto;
    }
}

.gnav-list__item {
    width: calc(100% / 4);
    height: 100%;
    border-bottom: .6rem solid #D3D8E8;
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {
    .gnav-list__item {
        border-bottom: none;
    }
}

.gnav-list__item .gnav-list__link {
    color: #fff;
    font-size: 1.6rem;
}

    .gnav-list__item .gnav-list__link i::before {
        font-size: 2rem;
        margin-right: .5rem;
    }

@media screen and (max-width: 767px) {
    .gnav-list__item .gnav-list__link i {
        width: 35px;
    }
}

@media screen and (max-width: 767px) {
    .gnav-list__item .gnav-list__link {
        justify-content: flex-start;
        padding: 1%;
        height: 7vh;
    }
}

.gnav-list__item.current {
    border-bottom: 0.6rem solid #00AC97;
}

    .gnav-list__item.current .gnav-list__link i::before {
        color: #00AC97;
    }

@media screen and (max-width: 767px) {
    .gnav-list__item.current {
        border-bottom: none;
    }
}

@media screen and (max-width: 767px) {
    .gnav-list__item {
        width: 100%;
    }
}

.gnav-list__link {
    display: flex;
    justify-content: center;
    height: 100%;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .gnav-list__link {
        display: flex;
        border: 1px solid #333C4F;
        color: #333;
        align-items: center;
        font-size: 1.2rem;
        height: 4rem;
    }
}

@media screen and (max-width: 767px) {
    .gnav {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
        margin: 0;
        flex-wrap: wrap;
        padding: 0;
        align-items: inherit;
    }

        .gnav .gnav-logo {
            border-bottom: 1px solid #333C4F;
            width: 100%;
            height: 5rem;
        }

            .gnav .gnav-logo a {
                display: flex;
                align-items: center;
                padding: 1rem 1.5rem;
                width: 50%;
            }
}

main {
    padding-top: 14rem;
    display: block;
}

@media screen and (max-width: 767px) {
    main .content-section {
        padding: 0 2rem;
    }
}

@media print {
    main {
        padding-top: 0rem;
    }
}

main .content-title {
    height: 6rem;
    background-color: #F3F4F7;
    border-bottom: 0.6rem solid #00AC97;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    color: #333C4F;
}

    main .content-title span {
        display: block;
        width: 100%;
        max-width: 104rem;
        margin: auto;
    }

@media print {
    main .content-title span {
        padding: 0 2rem;
    }
}

@media screen and (max-width: 767px) {
    main .content-title {
        height: auto;
        font-size: 1.2rem;
        border-bottom: none;
        font-weight: normal;
        background-color: #fff;
    }

        main .content-title::before {
            content: "ホーム > ";
            width: 6rem;
        }
}

@media screen and (min-width: 768px) and (max-width: 1070px) {
    main .content-title {
        padding: 0 3rem;
    }
}

@media screen and (max-width: 767px) {
    main {
        padding-top: 1rem;
    }
}

main .content-body {
    max-width: 104rem;
    margin: auto;
    padding: 4rem 0;
}

    main .content-body .print-signature,
    main .content-body .print-capacity,
    main .content-body .target-month {
        display: none;
    }

@media screen and (min-width: 768px) and (max-width: 1070px) {
    main .content-body {
        padding: 4rem 3rem;
    }
}

@media print {
    main .content-body {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 0;
    }

        main .content-body .print-capacity {
            display: inline-block;
        }

        main .content-body .print-signature {
            display: block;
            position: absolute;
            width: 25rem;
            top: 4rem;
            right: 1rem;
        }

            main .content-body .print-signature .syain {
                position: absolute;
                width: 9rem;
                right: 0;
                bottom: 0;
                z-index: -1;
            }

            main .content-body .print-signature .issue {
                text-align: right;
                margin-bottom: 2rem;
            }

            main .content-body .print-signature .name,
            main .content-body .print-signature .phone,
            main .content-body .print-signature .address {
                line-height: 170%;
                padding-right: 4rem;
                /*white-space: nowrap;*/
            }

        main .content-body .form-group {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
        }
}

@media print {
    main .content-body .form-group {
        padding: 0 2rem;
    }
}

@media print {
    main .content-body .form-group .select-wrap {
        order: -1;
        margin-bottom: 3rem;
    }

        main .content-body .form-group .select-wrap::after {
            display: none;
        }

    main .content-body .form-group .status-wrap {
        order: -2;
        margin-top: 0;
        margin-bottom: 3rem;
    }

        main .content-body .form-group .status-wrap .select-date li input {
            border-radius: 0;
            border-top: none;
            border-left: none;
            border-right: none;
        }

        main .content-body .form-group .status-wrap .select-date li .target-month {
            display: block;
            color: #333C4F;
            margin: 1rem;
        }

            main .content-body .form-group .status-wrap .select-date li .target-month::before {
                content: "(";
            }

            main .content-body .form-group .status-wrap .select-date li .target-month::after {
                content: ")";
            }

        main .content-body .form-group .status-wrap .select-date li::after {
            content: none;
        }
}

main .content-body .select-wrap {
    position: relative;
    display: inline-block;
    color: #333C4F;
    max-width: 100%;
}

    main .content-body .select-wrap::before {
        z-index: 1;
        position: absolute;
        left: 0;
        bottom: 100%;
        content: "表示対象";
        font-size: 1.2rem;
        font-weight: bold;
    }

@media screen and (max-width: 767px) {
    main .content-body .select-wrap::before {
        font-size: 3.4vw;
    }
}

@media print {
    main .content-body .select-wrap,
    main .content-body .select-wrap::before {
        /*left: 2rem;*/
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    main .content-body .select-wrap {
        max-width: 100%;
    }
}

main .content-body .select-wrap::after {
    z-index: 1;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    content: "\f0d7";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    pointer-events: none;
    font-size: 1.8rem;
}

main .content-body select {
    max-width: 100%;
    outline: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: 1.8rem;
    padding: 1rem 3rem 1rem 1rem;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-weight: bold;
}

@media print {
    main .content-body select {
        padding: 0.5rem 3rem 0.5rem 2rem;
    }
}

@media screen and (max-width: 767px) {
    main .content-body select {
        font-size: 3.2vw;
        padding: 1.5vw 9.4vw 1.3vw 1.7vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
}

main .content-body select option {
    font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
    main .content-body select option {
        font-size: 4.4vw;
    }
}

main .content-body select::-ms-expand {
    display: none;
}

main .content-body select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #828c9a;
}

main .content-body .status-wrap {
    display: flex;
    margin-top: 3.6rem;
    align-items: center;
}

    main .content-body .status-wrap .select-date {
        margin-right: 2rem;
        display: inline-block;
    }

        main .content-body .status-wrap .select-date li {
            position: relative;
        }

            main .content-body .status-wrap .select-date li input {
                border: 1px solid #333C4F;
                border-radius: 10px;
                font-size: 18px;
                font-weight: bold;
                color: #333C4F;
                padding: 0.6rem 0.6rem 0.6rem 4rem;
            }

            main .content-body .status-wrap .select-date li::before {
                z-index: 1;
                position: absolute;
                left: 1.5rem;
                top: 50%;
                transform: translateY(-50%);
                content: "\f073";
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                color: #333C4F;
                pointer-events: none;
                font-size: 1.8rem;
            }

@media print {
    main .content-body .status-wrap .select-date li::before {
        top: 16%;
        transform: translateY(0%);
    }
}

main .content-body .status-wrap .select-date li::after {
    z-index: 1;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    content: "\f0d7";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #333C4F;
    pointer-events: none;
    font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
    main .content-body .status-wrap .select-date {
        margin: auto;
        width: 100%;
    }

        main .content-body .status-wrap .select-date li::before {
            left: 5%;
            font-size: 4.5vw;
        }

        main .content-body .status-wrap .select-date li::after {
            right: 4%;
        }

        main .content-body .status-wrap .select-date li input {
            border-radius: 18px;
            width: 100%;
            box-sizing: border-box;
            font-size: 4.5vw;
            padding: 2.5vw 1.8vw 2.5vw 34%;
        }
}

@media screen and (max-width: 767px) {
    main .content-body .status-wrap {
        flex-wrap: wrap;
        position: relative;
        margin-top: 3.25vw;
        justify-content: center;
        margin-right: 0;
        padding-top: 11vw;
    }
}

main .content-body .status-wrap .select-date.charge-date {
    position: relative;
}

@media screen and (max-width: 767px) {
    main .content-body .status-wrap .select-date.charge-date {
        width: 100%;
        margin-top: 3.12vw;
    }
}

main .content-body .status-wrap .select-date.charge-date::before {
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 110%;
    content: "対象月";
    font-size: 1.2rem;
    font-weight: bold;
    color: #333C4F;
}

@media screen and (max-width: 767px) {
    main .content-body .status-wrap .select-date.charge-date::before {
        font-size: 3.4vw;
    }
}

@media print {
    main .content-body .status-wrap .select-date.charge-date::before {
        left: 2rem;
    }
}

main .content-body .totalvalue a {
    /*text-align: right;*/
    float: right;
    border: 4px double #ff3333;
    background-color: #fcfbf5;
    padding: 1%;
    font-weight: bold;
    font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
    main .content-body .totalvalue {
        /*float: none;*/
        width: 100%;
        text-align: center;
    }
}

main .content-body .status-wrap .inline-radio {
    display: flex;
    border-right: 1px solid #333C4F;
    width: 11rem;
    border-radius: 10px;
    margin-right: 2rem;
}

    main .content-body .status-wrap .inline-radio li {
        position: relative;
        flex: 1;
    }

        main .content-body .status-wrap .inline-radio li input {
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0;
            margin: 0;
        }

        main .content-body .status-wrap .inline-radio li label {
            top: 0;
            left: 0;
            color: #A3A5B9;
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            border-top: 1px solid #333C4F;
            border-bottom: 1px solid #333C4F;
            border-left: 1px solid #333C4F;
            font-size: 1.8rem;
            padding: .8rem;
            font-weight: bold;
        }

        main .content-body .status-wrap .inline-radio li:first-child label {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        main .content-body .status-wrap .inline-radio li:last-child label {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        main .content-body .status-wrap .inline-radio li input:checked + label {
            background: #00AC97;
            color: #333C4F;
        }

@media screen and (max-width: 767px) {
    main .content-body .status-wrap .inline-radio {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 0;
        width: 27.5vw;
    }

        main .content-body .status-wrap .inline-radio li label {
            font-size: 4vw;
            padding: 1.5vw;
        }
}

main .content-body .status-wrap .weather {
    text-align: center;
    font-size: 1rem;
    width: 8rem;
}

    main .content-body .status-wrap .weather img {
        max-width: 4.5rem;
        max-height: 4.5rem;
        flex-shrink: 0;
        display: block;
        margin: 0 auto .2rem;
    }

@media screen and (max-width: 767px) {
    main .content-body .status-wrap .weather img {
        max-width: 12.5vw;
        max-height: 12.5vw;
        margin: 8vw auto 1.6vw;
    }
}

main .content-body .status-wrap .deg {
    font-size: 1.4rem;
    margin: 0 2rem;
    width: 10rem;
}

    main .content-body .status-wrap .deg .max {
        color: #E65A46;
        margin: .5rem;
    }

        main .content-body .status-wrap .deg .max::before {
            content: "最高";
        }

    main .content-body .status-wrap .deg .min {
        color: #46ACE6;
        margin: .5rem;
    }

        main .content-body .status-wrap .deg .min::before {
            content: "最低";
        }

@media screen and (max-width: 767px) {
    main .content-body .status-wrap .deg {
        display: flex;
        width: auto;
        margin: 0;
    }

        main .content-body .status-wrap .deg .max::before, main .content-body .status-wrap .deg .min::before {
            content: none;
        }

        main .content-body .status-wrap .deg .max::after {
            content: "/";
            color: #333C4F;
            padding-left: 1.5vw;
        }
}

main .content-body .status-wrap .download {
    display: flex;
    justify-content: flex-end;
    width: 40%;
}

main .content-body .status-wrap .download-item {
    display: block;
    text-align: center;
    padding: 1rem 2rem;
    border-radius: 2.2rem;
    background-color: #00AC97;
    font-weight: bold;
    font-size: 1.6rem;
}

    main .content-body .status-wrap .download-item::before {
        content: "\f019";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: #333C4F;
        pointer-events: none;
        font-size: 1.8rem;
    }

@media screen and (max-width: 767px) {
    main .content-body .status-wrap .download {
        display: none;
    }
}
/*グラフの日付切り替えボタン*/
main .content-body .daychenge {
    width: calc(100% / 4);
}

main .content-body .daychenge_left, main .content-body .daychenge_right {
    width: calc(100% / 2.5);
    border-radius: 100vh;
    color: white;
    background-color: #00AC97;
    font-weight: bold;
    display: inline-block;
    cursor: pointer
}



@media screen and (max-width: 768px) and (min-width: 768px) {


    main .content-body .daychenge {
        width: 100%;
    }

    main .content-body .daychenge_left {
        /*position:absolute;
    left:30%;*/
        transform: translate(-20,-20);
        width: calc(100% );
        display: inline-block;
    }

    main .content-body .daychenge_right {
        /*position:relative;
    right:-20%;*/
        width: calc(100% );
        display: inline-block;
    }
}

@media screen and (max-width: 767px) {
    main .content-body .daychenge {
        width: calc(100% );
    }

    main .content-body .daychenge_left {
        width: calc(100% / 2);
        position: absolute;
        left: 0%;
        display: inline-block;
    }

    main .content-body .daychenge_right {
        width: calc(100% / 2);
        position: absolute;
        right: 0%;
        display: inline-block;
    }
}
/*************************************************************************/
main .content-body .demand_data {
    position: relative;
}

    main .content-body .demand_data #demand_button {
        display: block;
        text-align: center;
        padding: 1rem 2rem 1rem 4rem;
        border-radius: 2.2rem;
        background-color: #00AC97;
        font-weight: bold;
        font-size: 1.6rem;
        color: #333C4F;
    }

@media screen and (max-width: 767px) {
    main .content-body .demand_data #demand_button {
        font-size: 4vw;
        width: 100%;
    }
}

main .content-body .demand_data::before {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    content: "\f0e7";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #333C4F;
    pointer-events: none;
    font-size: 1.8rem;
}

main .content-body .chart {
    margin: 3rem 0 1rem;
}

@media screen and (max-width: 767px) {
    main .content-body .chart {
        margin: 6.4vw 0 3.2vw;
    }
}

main .content-body .charge {
    text-align: center;
}

main .content-body .charge-title {
    font-size: 2rem;
    color: #333C4F;
}

    main .content-body .charge-title .date {
        display: block;
        text-align: center;
        font-size: 1.6rem;
        font-weight: normal;
        margin-top: 1rem;
    }

main .content-body .charge .total {
    font-size: 4rem;
    color: #333C4F;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding: 1rem;
    margin: 3rem 0;
}

    main .content-body .charge .total::before {
        content: "合計";
        position: absolute;
        left: -4rem;
        bottom: 0;
        font-size: 1.8rem;
    }

    main .content-body .charge .total::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: calc(100% + 4.5rem);
        border-bottom: .3rem solid #D3D8E8;
    }

@media screen and (max-width: 767px) {
    main .content-body .charge .total {
        font-size: 7.5vw;
    }

        main .content-body .charge .total::before {
            left: -7.8vw;
            bottom: 1.8vw;
            font-size: 4.4vw;
        }

        main .content-body .charge .total::after {
            width: calc(100% + 7.5vw);
        }
}

main .content-body .charge .charge-common {
    display: flex;
    text-align: left;
    justify-content: space-between;
    flex-wrap: wrap;
}

    main .content-body .charge .charge-common dl {
        width: 48%;
        display: flex;
        flex-wrap: wrap;
    }

        main .content-body .charge .charge-common dl dt, main .content-body .charge .charge-common dl dd {
            border-bottom: 1px solid #C4C7DC;
            padding: 1.2rem 0;
            color: #333C4F;
        }

        main .content-body .charge .charge-common dl dt {
            width: 40%;
            padding-left: 2rem;
        }

        main .content-body .charge .charge-common dl dd {
            width: 60%;
            padding-left: 1rem;
        }

    main .content-body .charge .charge-common #contact_name::after {
        position: absolute;
        right: 50%;
        content: "様";
        font-weight: normal;
        font-size: 100%;
    }

@media screen and (max-width: 767px) {
    main .content-body .charge .charge-common {
        flex-wrap: wrap;
    }

        main .content-body .charge .charge-common dl {
            width: 90%;
        }

            main .content-body .charge .charge-common dl dt, main .content-body .charge .charge-common dl dd {
                font-size: 3.2vw;
            }

            main .content-body .charge .charge-common dl dt {
                padding-left: 3.2vw;
                width: 40%;
            }

            main .content-body .charge .charge-common dl dd {
                width: 60%;
            }

        main .content-body .charge .charge-common #contact_name::after {
            position: absolute;
            right: 10%;
            content: "様";
            font-weight: normal;
            font-size: 100%;
        }
}

main .content-body .charge .charge-detail {
    padding: 4rem 0 0;
}

    main .content-body .charge .charge-detail .print {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 2rem;
    }

    main .content-body .charge .charge-detail .print-item {
        display: block;
        text-align: center;
        padding: 1rem 2rem;
        border-radius: 2.2rem;
        background-color: #00AC97;
        font-weight: bold;
        font-size: 1.6rem;
    }
    main .content-body .charge .charge-detail ul li {
        color: #333C4F;
    }
@media screen and (max-width: 767px) {
    main .content-body .charge .charge-detail .print-item {
        font-size: 4.4vw;
    }

        main .content-body .charge .charge-detail .print-item::before {
            font-size: 5.6vw;
        }
}

main .content-body .charge .charge-detail .print-item::before {
    content: "\f02f";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #333C4F;
    pointer-events: none;
    font-size: 1.6rem;
}

@media print {
    /*main .content-body .charge .charge-detail .table-title,
    main .content-body .charge .charge-detail .charge-detail__table-past,*/
    main .content-body .charge .charge-detail .print,
    main .content-body .charge .charge-detail .charge-detail__table-past .max1{
        display: none;
    }
    main .content-body .charge .charge-detail .charge-detail__table-past .max2 {
        display: block;
    }

}

main .content-body .charge .charge-detail__table,
main .content-body .charge .charge-detail__table_measurement {
    margin-bottom: 3rem;
    width: 100%;
    color: #333C4F;
    border-collapse: collapse;
}

    main .content-body .charge .charge-detail__table_measurement span{
        display:inline-block;
    }

    @media print {
        main .content-body .charge .charge-detail__table, main .content-body .charge .charge-detail__table_measurement {
        margin-bottom: 0;
    }
}

main .content-body .charge .charge-detail__table thead tr:nth-child(even),
main .content-body .charge .charge-detail__table tbody tr:nth-child(even),
main .content-body .charge .charge-detail__table_measurement thead tr:nth-child(even),
main .content-body .charge .charge-detail__table_measurement tbody tr:nth-child(even) {
    background-color: #F3F4F7;
}

main .content-body .charge .charge-detail__table thead tr th,
main .content-body .charge .charge-detail__table tbody tr th,
main .content-body .charge .charge-detail__table_measurement thead tr th,
main .content-body .charge .charge-detail__table_measurement tbody tr th {
    color: #F3F4F7;
    background-color: #00AC97;
}

/*main .content-body .charge .charge-detail__table_measurement thead tr th,
main .content-body .charge .charge-detail__table_measurement tbody tr th {
    
    background-color: #00AC97;
}*/

main .content-body .charge .charge-detail__table thead tr td,
main .content-body .charge .charge-detail__table tbody tr td,
main .content-body .charge .charge-detail__table_measurement thead tr td,
main .content-body .charge .charge-detail__table_measurement tbody tr td {
    text-align: left;
}
@media screen and (max-width: 767px) {
    main .content-body .charge .charge-detail__table thead tr td,
    main .content-body .charge .charge-detail__table tbody tr td,
    main .content-body .charge .charge-detail__table_measurement thead tr td,
    main .content-body .charge .charge-detail__table_measurement tbody tr td {
        text-align: right;
    }
}

main .content-body .charge .charge-detail__table thead tr th,
main .content-body .charge .charge-detail__table thead tr td,
main .content-body .charge .charge-detail__table tbody tr th,
main .content-body .charge .charge-detail__table tbody tr td {
    width: 26%;
    padding: 1.6rem;
    font-size: 1.6rem;
    border: 1px solid #A3A5B9;
}


main .content-body .charge .charge-detail__table_measurement thead tr th,
main .content-body .charge .charge-detail__table_measurement thead tr td,
main .content-body .charge .charge-detail__table_measurement tbody tr th,
main .content-body .charge .charge-detail__table_measurement tbody tr td {
    width: 20%;
    padding: 1.6rem;
    font-size: 1.6rem;
    border: 1px solid #A3A5B9;
}

@media screen and (max-width: 767px) {
    main .content-body .charge .charge-detail__table thead tr th,
    main .content-body .charge .charge-detail__table thead tr td,
    main .content-body .charge .charge-detail__table tbody tr th,
    main .content-body .charge .charge-detail__table tbody tr td,
    main .content-body .charge .charge-detail__table_measurement thead tr th,
    main .content-body .charge .charge-detail__table_measurement thead tr td,
    main .content-body .charge .charge-detail__table_measurement tbody tr th,
    main .content-body .charge .charge-detail__table_measurement tbody tr td {
        font-size: 3.2vw;
        padding: 1.8vw;
    }
}

@media screen and (max-width: 767px) {
    main .content-body .charge .charge-detail__table thead tr td:first-child,
    main .content-body .charge .charge-detail__table tbody tr td:first-child {
        text-align: left;
    }

    main .content-body .charge .charge-detail__table_measurement thead tr td:first-child,
    main .content-body .charge .charge-detail__table_measurement tbody tr td:first-child {
        text-align: right;
    }
}

main .content-body .charge .charge-detail__table tbody {
    border-top: 3px solid #333C4F;
}

main .content-body .charge .charge-detail__table-past,
main .content-body .charge .charge-detail__table-past1 {
    width: 100%;
    color: #333C4F;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

    main .content-body .charge .charge-detail__table-past tbody tr th, main .content-body .charge .charge-detail__table-past tbody tr td, main .content-body .charge .charge-detail__table-past thead tr th, main .content-body .charge .charge-detail__table-past thead tr td {
        width: calc(100% / 12);
        padding: 0;
        text-align: center;
        font-size: 1.6rem;
        border: 1px solid #A3A5B9;
        white-space: nowrap;
        box-sizing: border-box;
    }
    main .content-body .charge .charge-detail__table-past1 tbody tr th,
    main .content-body .charge .charge-detail__table-past1 tbody tr td,
    main .content-body .charge .charge-detail__table-past1 thead tr th,
    main .content-body .charge .charge-detail__table-past1 thead tr td {
        width: 100%;
        padding: 0;
        text-align: center;
        font-size: 2rem;
        border: 1px solid #A3A5B9;
        white-space: nowrap;
        box-sizing: border-box;
    }

        main .content-body .charge .charge-detail__table-past tbody tr th span, main .content-body .charge .charge-detail__table-past tbody tr td span,
        main .content-body .charge .charge-detail__table-past thead tr th span, main .content-body .charge .charge-detail__table-past thead tr td span {
            display: block;
            padding: 1.2rem 0;
            font-weight: normal;
            font-size: 12px;
        }
    main .content-body .charge .charge-detail__table-past1 tbody tr th span,
    main .content-body .charge .charge-detail__table-past1 tbody tr td span,
    main .content-body .charge .charge-detail__table-past1 thead tr th span,
    main .content-body .charge .charge-detail__table-past1 thead tr td span {
        display: block;
        padding: 1.2rem 0;
        font-weight: normal;
        font-size: 18px;
    }

        main .content-body .charge .charge-detail__table-past tbody tr th span:first-child, main .content-body .charge .charge-detail__table-past tbody tr td span:first-child,
        main .content-body .charge .charge-detail__table-past1 tbody tr th span:first-child,
        main .content-body .charge .charge-detail__table-past1 tbody tr td span:first-child {
            background-color: #00AC97;
            border-bottom: 1px solid #A3A5B9;
            font-weight: bold;
        }

    

    main .content-body .charge .charge-detail__table-past .max2 {
        display: none;
    }




    @media screen and (max-width: 767px) {
        main .content-body .charge .charge-detail__table-past tbody tr, main .content-body .charge .charge-detail__table-past thead tr {
        display: flex;
        flex-wrap: wrap;
        border-right: 1px solid #A3A5B9;
        border-bottom: 1px solid #A3A5B9;
    }

        main .content-body .charge .charge-detail__table-past tbody tr th, main .content-body .charge .charge-detail__table-past tbody tr td,
        main .content-body .charge .charge-detail__table-past thead tr th, main .content-body .charge .charge-detail__table-past thead tr td {
            width: calc(100% / 4);
            border-top: 1px solid #A3A5B9;
            border-left: 1px solid #A3A5B9;
            border-right: none;
            border-bottom: none;
            font-size: 4vw;
            font-weight: bold;
        }
}

@media print {
    main .content-body .charge {
        display: flex;
        flex-direction: column;
    }

        main .content-body .charge .charge-common {
            order: 1;
        }

            main .content-body .charge .charge-common dl {
                width: 58%;
            }

                main .content-body .charge .charge-common dl dt, main .content-body .charge .charge-common dl dd {
                    line-height: 90%;
                }

                main .content-body .charge .charge-common dl:last-child dt, main .content-body .charge .charge-common dl:last-child dd {
                    display: none;
                }

            main .content-body .charge .charge-common #contact_name::after {
                position: absolute;
                right: 41%;
                content: "様";
                font-weight: normal;
                font-size: 1.4rem;
            }



        main .content-body .charge .total {
            order: 2;
            text-align: right;
            font-size: 3rem;
        }

            main .content-body .charge .total::before {
                position: initial;
            }

            main .content-body .charge .total::after {
                width: 40%;
            }

        main .content-body .charge .charge-title {
            order: 3;
        }

            main .content-body .charge .charge-title .date {
                display: none;
            }

        main .content-body .charge .charge-detail {
            order: 4;
            padding-top: 1rem;
        }

            main .content-body .charge .charge-detail .charge-detail__table tr:nth-child(even) {
                background-color: #F3F4F7 !important;
            }

            main .content-body .charge .charge-detail .charge-detail__table tr th, main .content-body .charge .charge-detail .charge-detail__table tr td {
                padding: 1rem;
                font-size: 1.4rem;
            }




            main .content-body .charge .charge-detail .charge-detail__table tr th,
            main .content-body .charge .charge-detail .charge-detail__table_measurement tr th {
                text-align: center;
                color: #333C4F !important;
                background-color: #00AC97 !important;
            }

            main .content-body .charge .charge-detail .charge-detail__table tr td {
                text-align: right;
            }

                main .content-body .charge .charge-detail .charge-detail__table tr td:first-child {
                    text-align: left;
                }

        main .content-body .charge .foot_memo{
            display:none;
        }
}

@media screen and (max-width: 767px) {
    main .content-body .charge {
        margin-top: 3rem;
    }

    main .content-body .charge-title {
        font-size: 4.4vw;
    }

        main .content-body .charge-title .date {
            font-size: 4.4vw;
        }
}

main .content-body .charge .table-title {
    display: flex;
    align-items: center;
    text-align: left;
    color: #333C4F;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 1rem 1rem 1rem 0rem;
}

    main .content-body .charge .table-title::before {
        content: "";
        width: 1.8rem;
        height: 2.5rem;
        display: inline-block;
        background: #333C4F;
        margin-right: 1rem;
    }

@media screen and (max-width: 767px) {
    main .content-body .charge .table-title::before {
        width: 5.6vw;
        height: 7.8vw;
        margin-right: 3.2vw;
    }
}

/*明細画面下部のメモ*/
main .content-body .charge .foot_memo,
main .content-body .charge .foot_memo1 {
    padding-left: 1rem;
    color: #333C4F;
}
    main .content-body .charge .foot_memo li.foot_memo_first,
    main .content-body .charge .foot_memo1 li.foot_memo_first {
        text-align: left;
        font-size: 1.5rem;
        text-indent: -1rem;
    }
    main .content-body .charge .foot_memo li.foot_memo_second,
    main .content-body .charge .foot_memo1 li.foot_memo_second {
        text-align: left;
        font-size: 1.5rem;
    }

    .login-logo {
        width: 28rem;
        margin: 7rem auto 4rem;
    }

@media screen and (max-width: 767px) {
    .login-logo {
        width: 53vw;
        margin: 12vw auto 6vw;
    }
}

.form-wrapper {
    box-shadow: 0 0 4rem rgba(196, 199, 220, 0.2);
    border: 1px solid #F3F4F7;
    padding: 4rem 6rem;
    margin: auto;
    border-radius: 1rem;
    width: 60rem;
}

    .form-wrapper .form-item {
        position: relative;
        margin-bottom: 3rem;
    }

        .form-wrapper .form-item label,
        .form-wrapper .form-item input {
            display: block;
        }

        .form-wrapper .form-item label {
            font-size: 1.6rem;
            font-weight: bold;
            color: #333C4F;
            margin-bottom: 1rem;
        }

@media screen and (max-width: 767px) {
    .form-wrapper .form-item label {
        display: none;
    }
}

.form-wrapper .form-item input {
    border: 1px solid #A3A5B9;
    border-radius: 10px;
    padding: 1.2rem 5.5rem;
    font-size: 1.8rem;
    color: #9B9B9B;
    width: 100%;
    box-sizing: border-box;
}

.form-wrapper .form-item::before {
    position: absolute;
    content: "\f2bd";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #333C4F;
    pointer-events: none;
    font-size: 2.4rem;
    bottom: 1.6rem;
    left: 1.5rem;
}

.form-wrapper .form-item:nth-child(2)::before {
    content: "\f084";
}

@media screen and (max-width: 767px) {
    .form-wrapper {
        width: auto;
        margin: 0 6.4vw;
        padding: 9.6vw 3.2vw;
    }
}

.form-wrapper .button-panel {
    height: 70px;
    width: 480px;
}

    .form-wrapper .button-panel input {
        width: 100%;
        padding: 2rem;
        border-radius: 3.5rem;
        background-color: #333C4F;
        text-align: center;
        font-size: 1.8rem;
        font-weight: bold;
        color: #fff;
    }

@media screen and (max-width: 767px) {
    .form-wrapper .button-panel {
        width: 100%;
        height: auto;
    }

        .form-wrapper .button-panel input {
            font-size: 4.4vw;
            height: auto;
            padding: 4.4vw;
        }
}

.form-wrapper .form-footer {
    text-align: center;
    font-size: 1.4rem;
    color: #333C4F;
    margin: 2rem auto;
}

@media screen and (max-width: 767px) {
    .form-wrapper .form-footer {
        font-size: 4vw;
    }
}

.form-wrapper .notes {
    color: #A3A5B9;
    line-height: 170%;
}

.news-wrapper {
    margin: 4rem auto 7rem;
    max-width: 104rem;
    box-shadow: 0 0 4rem rgba(196, 199, 220, 0.2);
    border: 1px solid #F3F4F7;
    padding: 3rem 4rem;
}

@media screen and (max-width: 767px) {
    .news-wrapper {
        width: auto;
        margin: 6.4vw 6.4vw 19.2vw;
        padding: 9.6vw 3.2vw;
        border-radius: 3.2vw;
    }
}

.news-wrapper .news-title {
    display: flex;
    align-items: center;
    text-align: left;
    color: #E65A46;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 1rem 1rem 1rem 0rem;
}

    .news-wrapper .news-title::before {
        content: "";
        width: 1.8rem;
        height: 2.5rem;
        display: inline-block;
        background: #E65A46;
        margin-right: 1rem;
    }

.news-wrapper .news-list {
    height: 12rem;
    overflow: auto;
}

.news-wrapper .news-list__item {
    display: flex;
    align-items: center;
    margin-bottom: .5rem;
    color: #333C4F;
}

    .news-wrapper .news-list__item span {
        margin: 0 1rem;
        display: block;
    }

    .news-wrapper .news-list__item .category {
        border-radius: 17.5px;
        background-color: #D3D8E8;
        display: block;
        padding: 0.7rem 1.5rem;
        font-weight: bold;
        width: 18%;
        text-align: center;
    }

@media screen and (max-width: 767px) {
    .news-wrapper .news-list__item .category {
        width: auto;
        font-size: 4.4vw;
        padding: .9vw 3.2vw;
    }
}

.news-wrapper .news-list__item .date {
    width: 9%;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .news-wrapper .news-list__item .date {
        width: auto;
    }
}

.news-wrapper .news-list__item .title {
    width: 73%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap;*/
}

@media screen and (max-width: 767px) {
    .news-wrapper .news-list__item .title {
        width: 100%;
        margin: 3.2vw 3.2vw 6.4vw;
    }
}

@media screen and (max-width: 767px) {
    .news-wrapper .news-list__item {
        flex-wrap: wrap;
    }
}

.setting-wrapper {
    margin: auto;
    max-width: 60rem;
    display: flex;
    justify-content: center;
}

    .setting-wrapper .setting label,
    .setting-wrapper .setting input {
        display: block;
    }

    .setting-wrapper .setting label {
        font-size: 1.6rem;
        font-weight: bold;
        color: #333C4F;
        margin-bottom: 1rem;
    }

    .setting-wrapper .setting input {
        border: 1px solid #A3A5B9;
        border-radius: 10px;
        padding: .8rem 1.5rem;
        font-size: 1.8rem;
        color: #9B9B9B;
        box-sizing: border-box;
        margin-bottom: 2rem;
    }

    .setting-wrapper #setting_btn {
        width: 22rem;
        padding: 1rem;
        border-radius: 3.5rem;
        background-color: #333C4F;
        text-align: center;
        font-size: 1.8rem;
        font-weight: bold;
        color: #fff;
    }

/**/
.demadalarm-wrapper {
    margin: auto;
    max-width: 100%;
    /*display: flex;*/
    justify-content: left;
    font-family: 'Font Awesome 5 Free';
}

    .demadalarm-wrapper table {
        width: 100%;
    }
        
            .demadalarm-wrapper table tbody tr td ul {
                font-size: 1.8rem;
                display: inline-block;
                width: 100%;
                border-bottom: 2px solid black;
                padding-top: 20px;
                padding-bottom: 5px;
                color: #333C4F;
            }

    .demadalarm-wrapper ul::before {
        content: "▮";
        font-size: 100%;
        margin-right: 10px;
        color: #00AC97;
    }

    .demadalarm-wrapper table tbody tr td a {
        height: 6rem;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        color: #333C4F;
    }

    /* .demadalarm-wrapper table tbody tr td {
        display: inline-block;
    }*/

    .demadalarm-wrapper table tbody tr td input {
        width: 30%;
        border: 2px solid #000;
        font-size: 1.8rem;
        text-align: left;
        vertical-align: middle;
        color: #333C4F;
    }

    .demadalarm-wrapper table tbody tr td .mail_check {
        width: 5%;
        border: 2px solid #000;
        font-size: 1.8rem;
        text-align: left;
        vertical-align: middle;
        color: #333C4F;
    }

       

        .demadalarm-wrapper table tbody tr td u {
            width: 70%;
            font-size: 1.8rem;
            text-align: right;
            vertical-align: middle;
            color: #333C4F;
        }

    .demadalarm-wrapper table tbody tr .testmail,
    .demadalarm-wrapper table tbody tr .alarmbtn {
        width: calc(100% / 5);
        display: inline-block;
        text-align: center;
        padding: 1rem 2rem;
        border-radius: 2.2rem;
        background-color: #00AC97;
        font-weight: bold;
        font-size: 1.6rem;
        cursor: pointer;
    }

/***/
.contact-wrapper .contact {
    width: 100%;
    max-width: 80rem;
    margin: auto;
}

    .contact-wrapper .contact tbody tr td {
        padding: 1rem;
    }

    .contact-wrapper .contact tbody tr .selectbox {
        position: relative;
    }

        .contact-wrapper .contact tbody tr .selectbox::after {
            z-index: 1;
            position: absolute;
            right: 1rem;
            top: 2.8rem;
            content: "\f0d7";
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: #333C4F;
            pointer-events: none;
            font-size: 1.8rem;
        }

@media screen and (max-width: 767px) {
    .contact-wrapper .contact tbody tr .selectbox::after {
        top: 5.6vw;
    }

    .demadalarm-wrapper table tbody tr td .mail_address {
        width:70%;
    }

    .demadalarm-wrapper table tbody tr .testmail
     {
        width: calc(100% / 1.5);
       
    }
}

.contact-wrapper .contact tbody tr .selectbox select {
    width: 100%;
    margin-bottom: 1rem;
}

.contact-wrapper .contact tbody tr textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    width: 100%;
    border: 1px solid #A3A5B9;
    border-radius: 10px;
    padding: .5rem 1.5rem;
    box-sizing: border-box;
    font-size: 1.4rem;
    font-family: Meiryo;
}

    .contact-wrapper .contact tbody tr textarea#ContentsW {
        min-height: 10rem;
    }

.contact-wrapper .contact tbody tr .select-title {
    font-weight: bold;
    color: #333C4F;
}

.contact-wrapper .contact tbody tr input {
    width: 100%;
    padding: 1rem;
    border-radius: 3.5rem;
    background-color: #333C4F;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
}

.contact-wrapper .contact tbody tr.split td {
    font-weight: bold;
    display: table-cell;
}

footer {
    background-color: #333C4F;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 100%;
    color: #F3F4F7;
}

@media screen and (max-width: 767px) {
    footer {
        font-size: 3.2vw;
    }

    .copyright {
        text-align: center;
        width: 80%;
    }
}

@media print {
    footer {
        display: none;
    }
}