@charset "UTF-8";

@media screen and (min-width: 851px) {
    .opacity:hover {
        opacity: .7;
    }

    .pdf_btn:hover {
        opacity: .7;
    }

    .h_gray:hover {
        background-color: #f6f6f6;
    }

    .page-nav .page-nav-number:hover {
        background-color: #263166;
        color: #fff;
        border: 1px solid #263166;
    }

    .page-nav-next:hover {
        background-color: #263166;
        color: #fff;
        border: 1px solid #263166;
    }

    .mieruka_btn:hover {
        background-color: #037fdd;
    }

    .switching_btn_area .switching:hover {
        background-color: #ff801e;
    }

    .other_login_area:hover,
    .logout_btn:hover {
        background-color: #f6f6f6;
    }
}

/* 851 */
@media screen and (max-width: 1000px) {}

/* 1000px */
@media screen and (max-width: 980px) {
    .button_area ul li {
        /* width: 31.2%; */
        height: 32vw;
    }

    .form-control {
        font-size: 18px;
    }
}

/* 900px */
@media screen and (max-width: 850px) {
    /* html {
        font-size: 57%;
    } */

    body {
        padding-bottom: 100px;
    }

    .header_bottom {
        padding: 10px 0;
    }

    .login_area strong {
        height: 35px;
        width: 35px;
    }

    .login_area strong::before {
        width: 20px;
        height: 18px;
    }

    .login_area small {
        margin-left: 6px;
    }

    .co2 {
        padding-top: 0px;
    }

    .sc_tp {
        padding-top: 60px;
    }

    .sc_tp_bm {
        padding: 20px 0;
    }

    .news_list dt {
        width: 100%;
        padding-bottom: 5px;
    }

    .news_list dd {
        width: 100%;
    }

    .button_area ul li a.gs_btn {
        min-width: 100px;
    }

    /* .button_area ul li {width: 31.3%;} */
    /* .button_area ul li:nth-child(3n) {margin: 0 0 2% 0;} */
    /* .button_area ul li:nth-child(4) {margin: 0 2% 2% 0;} */
    .selectbox-001 select {
        max-width: 240px;
        min-width: 240px;
    }

    .slect_box:nth-child(odd) {
        margin-right: 10px;
    }

    .gas_area p {
        margin-right: 80px;
    }

    #modal01 .modal__content {
        top: 10%;
    }

    .center-link2 {
        margin-bottom: 60px;
    }

    .order .slect_area .slect_box {
        width: 100%;
    }

    .order .slect_area .slect_box h5 {
        width: 110px;
    }
}

/* 850px */

@media screen and (max-width: 800px) {
    .ch_table.rireki tbody {
        width: 800px;
    }

    .gas_area p {
        margin-right: 40px;
    }

    .button_area ul li a.gs_btn:first-child {
        margin-right: 10px;
    }

    .co2-detail_container {
        padding: 30px 10px;
    }

    .co2-detail_container .flex-box li {
        width: 49%;
        margin-bottom: 30px;
    }

    .co2-detail_container .flex-box li::after {
        right: -4px;
    }

    .co2-detail_container .flex-box li:nth-of-type(2):after {
        content: none;
    }

    .co2-detail_container .flex-box li:nth-of-type(1):before {
        content: "";
        width: 100%;
        height: 1px;
        background: #DFEBBA;
        position: absolute;
        bottom: -18px;
        left: 0;
    }

    .co2-detail_container.meyasu-area .flex-box li:nth-of-type(1):before {
        content: none;
    }

    .co2-detail_container.meyasu-area .flex-box li:nth-of-type(2):before {
        content: none;
    }

    .co2-detail_container .bg-beige {
        padding: 10px;
    }

    .co2-detail_container .flex-box .btn {
        width: 95%;
    }

    .co2-detail_container .flex-box .basic_btn.move_btn::before {
        width: 12px;
        height: 12px;
    }

    .co2-detail_container.meyasu-area .flex-box li {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* 800px */

/* honban smart phone */
@media screen and (max-width: 767px) {
    .confirm_container {
        width: 90%;
        margin: 0 auto;
    }
    .button_area ul li.gas_area .gas_btn_box {
        margin-top: 10px;
        gap: 16px;
        padding-left: 0px;
    }
}

@media screen and (max-width: 700px) {
    .gas_area p {
        justify-content: center;
        margin-bottom: 20px;
        width: 100%;
    }

    .gas_btn_box {
        justify-content: center;
        max-width: 340px;
        margin: 0 auto;
    }

    .day_box span {
        margin: 0 auto;
    }

    .news_bg {
        padding: 0px 0px 40px 0px;
    }

    .button_area ul li a.gs_btn {
        width: 80%;
        padding: 20px 10px;
    }

    .button_area ul li a.gs_btn:first-child {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .button_area ul li {
        width: 48%;
    }

    /* .button_area ul li:nth-child(3n) {margin: 0 2% 2% 0;} */
    /* .button_area ul li:nth-child(2n) {margin: 0 0 2% 0;} */
    .button_area ul li.gas_area {
        align-items: start;
        justify-content: center;
        display: block;
        height: auto;
    }

    .button_area ul li a span {
        height: 75px;
        width: 75px;
    }

    .button_area ul li a span img {
        width: 80%;
    }

    .button_area ul li.icon-scale a span img {
        width: 90%;
    }

    .button_area ul li.gn a span img {
        width: 100%;
    }

    .mieruka_box_bg {
        padding: 60px 15px;
    }

    .mk_table_content {
        margin: auto 5px;
    }

    .white_box {
        padding: 20px 15px 30px;
    }

    /* .list_area ul li {width: 100%;} */
    .slect_box:nth-child(odd) {
        margin-right: 0;
    }

    .reference_table .pricelist tr td {
        /*font-size: 1.0rem;*/
        font-size: 0.95rem; /* 2025.12.08 Edit */
    }

    #contact_button .rm-price br.pc-none {
        display: block;
    }

    #contact_button .rm-price br.sp-none {
        display: none;
    }

    .order .button_box span img {
        max-width: 50px;
    }

    .button_area ul {
        --gap: 9px;
    }

    .button_area ul li {
        width: calc((100% - var(--gap)) / 2);
        height: 43vw;
    }

    .co2-detail_container.all-area .img .sp {
        display: block;
    }

    .co2-detail_container.all-area .img .pc {
        display: none;
    }
}

/* 700px */

@media screen and (max-width: 650px) {
    .order .list_area ul li.pk {
        width: 100%;
        padding: 10px;
    }
}

@media screen and (max-width: 600px) {
    .login_area {
        width: 65%;
    }

    .logo_area {
        width: 30%;
    }

    .co2 .pc_img {
        display: none;
    }

    .co2 .sp_img {
        display: block;
    }

    h2.headline {
        margin-bottom: 5px;
        font-size: 2.5rem;
    }

    .banner_area ul {
        flex-wrap: wrap;
    }

    .banner_area ul li {
        width: 100%;
    }

    .banner_area ul li:first-child {
        margin-bottom: 15px;
    }

    .banner_area ul li a {
        display: block;
    }

    .list_top {
        justify-content: center;
        padding-right: 0px;
    }

    .list_top p {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    .basic_btn_area.btn_tow .basic_btn:first-child {
        margin-bottom: 20px;
    }

    .basic_btn_area.btn_tow .basic_btn {
        max-width: 48%;
    }

    .other_login {
        padding: 15px 15px;
    }

    .last_login {
        padding: 15px 15px;
    }

    .logout_btn {
        padding: 15px 15px;
    }

    .login_btn_grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #SelDate {
        width: 100%;
    }

    .co2-bnr {
        width: 100%;
    }

    .co2-bnr_tree {
        z-index: 0;
    }

    .co2-bnr_txt {
        padding-left: 0;
        text-align: center;
    }

    .co2-bnr_wrap {
        width: 100%;
        min-width: 300px;
    }

    .co2-bnr_tree {
        left: 50%;
        transform: translateX(-50%);
    }

    .co2-bnr_more {
        padding-left: 0;
    }
}

/* 600px */

@media screen and (max-width: 520px) {
    /* html {
        font-size: 53%;
    } */

    .sc_lf_rt {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sc_tp {
        padding-top: 10px;
    }

    .login_area {
        width: 45%;
    }

    .logo_area {
        width: 35%;
    }

    .sc_tp_bm {
        padding: 0px 0;
    }

    .button_area ul li a.gs_btn {
        max-width: 300px;
    }

    .button_area ul li a {
        padding: 30px 0;
    }

    #contact_button .button_area ul li a {
        padding: 15% 0;
    }

    #contact_button .button_area ul li a p {
        padding-top: 3%;
    }

    .mk_table .money {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .mk_table .period {
        display: block;
        width: 100%;
        padding-top: 8px;
    }

    .mieruka_box_bg {
        padding: 30px 10px;
    }

    .mk_table_area {
        padding-top: 10px;
    }

    .mk_table th {
        padding: 8px 0;
    }

    h2.headline {
        font-size: 1.2rem;
        line-height: 1.0;
        /* padding: 10px 20px; */
    }

    .mk_table .money strong {
        font-size: 1.8rem;
    }

    .mk_table_content {
        margin: auto 0;
    }

    .mk_table_content {
        padding: 10px 10px;
    }

    .mieruka_box_btn {
        margin-bottom: 15px;
    }

    .letter_btn_area {
        margin-bottom: 15px;
    }

    .switching_btn_area {
        margin-bottom: 15px;
    }

    .basic_btn_area.btn_tow {
        margin-top: 30px;
    }

    .order .list_top {
        justify-content: center;
        padding-right: 0px;
    }

    .selectbox-001 select {
        padding: 5px 8px;
    }

    #modal02 .modal__content {
        padding: 60px 10px;
    }

    .sending .form_area {
        padding: 20px 0px 20px 0;
    }

    .modal-type2 h2.headline {
        font-size: 1.2rem;
    }

    .withdrawal .text_area {
        margin-bottom: 20px;
    }

    .graph_change_box .col-12 {
        width: 100%;
        margin-bottom: 10px;
    }

    .graph_change_box_contents:first-child .col-12.f_s_b:first-child {
        display: none;
    }

    .graph_change_box_contents {
        margin-bottom: 0;
    }

    .center-link2 {
        margin-bottom: 30px;
    }

    .order .slect_area .slect_box .selectbox-001 {
        width: 100%;
    }

    .order .slect_area .slect_box .selectbox-001 select {
        max-width: 100%;
        min-width: 100%;
    }

    .reference_table .pricelist td.number {
        width: 100%;
        /*padding: 15px 10px 0px 10px;*/
        padding: 10px 0px 0px 20px; /* 2025.12.08 Edit */
    }

    .reference_table .pricelist tr .r_money {
        width: 100%;
    }

}

/* 520px */

@media screen and (max-width: 490px) {
    .button_area ul li a.gs_btn {
        max-width: 250px;
    }

    .basic_btn_area.btn_tow .basic_btn {
        max-width: 200px;
    }

    .withdrawal .text_area p {
        text-align: left;
    }

    .meter_check .text_area p {
        text-align: left;
    }

    .order .slect_area .slect_box {
        flex-wrap: wrap;
    }

    .order .slect_area .slect_box h5 {
        width: 100%;
    }

}

/* 490px */
@media screen and (max-width: 430px) {
    .button_area ul li a.gs_btn:first-child {
        margin-bottom: 15px;
    }

    .list_area ul li {
        padding: 0px 10px;
    }

    .list_area .icon_area {
        height: 55px;
        width: 55px;
        top: -8px;
    }

    .list_area .icon_area span {
        /*width: 60%*/
        width: 80%; /* 2025.12.08 Edit */
    }

    .list_area:has(.list_pt) .white_box { /* 2025.12.09 Add */
        padding-top: 50px;
    }

    .white_box .basic_btn { /* 2025.12.09 Add */
        max-width: 250px;
    }

    .form_area {
        padding: 15px 0;
    }

    .new_login .sp_br {
        display: block;
    }
}

/* 430px */

@media screen and (max-width: 400px) {
    .news_bg {
        /* padding: 10px 15px 20px 15px; */
        padding: 0px 0px 2px 0px;
    }

    .port_change .form-control {
        width: 84%;
    }

    .login_area small {
        font-size: 0.9rem;
    }

    .login_area strong::before {
        width: 13px;
        height: 13px;
    }

    .login_area strong {
        height: 25px;
        width: 25px;
    }

    .browser .sp-block {
        display: block;
    }

    /* .reference_table .pricelist tr td{font-size: 1.3rem;}  */
    .button_area ul li a p strong {
        font-size: 1.0rem;
        letter-spacing: 0.0em;
    }

}

/* 400px */

@media screen and (max-width: 380px) {
    .button_area ul li a.gs_btn {
        padding: 15px 10px;
    }

    .letter_btn_area {
        flex-wrap: wrap;
    }

    .letter_btn_area.comparison a {
        width: 100%;
    }

    .letter_btn_area.comparison a:first-child {
        margin: 0 0 0 0;
    }

    .letter_btn_area.comparison p {
        width: 100%;
        text-align: center;
    }

    .letter_btn.calendar_bnt {
        padding: 6px 10px;
        max-width: 200px;
    }

}

/* 380px */

@media screen and (max-width: 350px) {
    .button_area ul li a p strong {
        font-size: 1.0rem;
    }

    .button_area ul li a {
        padding: 15px 0;
    }

    #contact_button .button_area ul li a {
        padding: 15% 0;
    }

    .selectbox-001 select {
        max-width: 220px;
        min-width: 220px;
    }

    .new_login p {
        font-size: 1.4rem;
    }

    .button_area ul li a {
        padding: 30px 0;
    }

    /* .reference_table .pricelist tr td{font-size: 1.2rem;} */
}

/* 350px */

@media screen and (max-width: 330px) {
    .button_area ul li {
        width: 98%;
        margin: 0;
        margin-bottom: 2%;
    }

    .button_area ul li:nth-child(3n) {
        margin: 0 0 2% 0;
    }

    .gas_area span {
        height: 80px;
        width: 80px;
    }

    .modal-type2 h2.headline {
        font-size: 1.5rem;
    }
}

/* 330px */

/* Tablet */
@media (max-width: 768px) {
    .title_bar .text-section span {
        font-size: 20px;
        margin-left: 0
    }

    .title_bar .text-section {
        margin-bottom: 0
    }

    .accordion_area.gas_efficiently {
        padding: 20px 10px
    }

    .contents-post__content {
        flex-direction: column;
        align-items: center;
        margin: 0 10px
    }

    .contents-post__text {
        padding: 0;
        text-align: center
    }

    .contents-post__text p {
        text-align: left
    }

    .title_bar {
        flex-direction: column;
        row-gap: 5px
    }

    .title_bar .image-section img {
        margin: 0;
        max-width: 100%
    }

    .contents_main .body2 {
        flex-direction: column;
        row-gap: 10px
    }

    .contents-post__content,
    .contents_main_box {
        background: 0 0 !important
    }

    .contents-post {
        padding: 30px 10px
    }

    .contents-post__title {
        font-size: 18px
    }

    .letter_btn_area.flex.comparison button:nth-child(2) {
        flex: 0 0 auto;
        margin: 5px
    }

    .letter_btn_area.flex.comparison p:nth-child(3) {
        flex: 0 0 auto;
        margin: 5px
    }

    .letter_btn_area.flex.comparison button:nth-child(5) {
        flex: 0 0 auto;
        margin: 5px
    }

    .letter_btn_area.flex.comparison p:nth-child(6) {
        flex: 0 1 100%;
        text-align: center;
        margin: 5px
    }
}

/* Mobile */
@media (max-width: 480px) {
    .contents-post__title {
        font-size: 16px
    }

    .contents-post__header {
        padding: 10px 0
    }

    .contents-post__header .contents-post__header-space {
        margin-left: 8px
    }

    .contents-post {
        padding: 10px
    }

    .title_bar {
        padding: 20px 5px;
        align-items: unset;
        row-gap: 0
    }

    .title_bar .text-section img {
        width: 65px;
        height: 52px
    }

    .title_bar .text-section span {
        font-size: 24px
    }

    .title_bar .subtext {
        text-align: right;
        margin: 10px 0
    }

    .contents_main_box>.contents_main {
        margin: 0 10px 30px 10px
    }

    .content_body--text .left {
        margin: auto
    }

    .bg_img_content {
        background: unset
    }

    .vertical {
        flex-direction: column;
        gap: 4px;
    }
}

/* Desktop */
@media (min-width: 768px) {
    .title_bar .title_bar {
        flex-direction: row
    }

    .title_bar .subtext {
        margin-bottom: 0;
        margin-left: 20px
    }

    .title_bar .image-section {
        margin-left: 20px
    }
}