/* レスポンシブ用CSS */
/* PCサイズ用 */
@media (min-width: 992px) {
    .custom_container {
        max-width: 767.99px;
        /* 中間デスクトップサイズでの最大幅 */
    }

    .div_logo_and_woman {
        left: 60%;
        transform: translateX(-50%);
    }

    .inline_for_pc {
        display: inline;
    }

    .block_for_pc {
        display: block;
    }

}

/* スマホ中〜タブレット用 */
@media (max-width: 991.99px) {

    /* 共通 */
    .custom_container {
        padding: 0;
        margin-right: auto;
        margin-left: auto;
        max-width: 450px;
        /* タブレットサイズでの最大幅 */
    }

    .inline_for_sp {
        display: inline;
    }

    .block_for_sp {
        display: block;
    }

    /* Top */
    .div_logo_and_woman {
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
    }

    .top_text_container {
        height: 1270px;
    }

    .top_text_container::before {
        top: 4%;
        left: -8%;
        width: 1070px;
        height: 500px;
        transform: rotate(0deg);
    }

    .top_text_container::after {
        top: 9%;
        width: 1030px;
        height: 815px;
    }

    .staggered_text,
    .text_container {
        font-size: 1.8rem;
        letter-spacing: 0;
    }

    .staggered_text {
        padding-top: 5rem;
        top: 5%;
        left: 3%;
    }

    .text_container_pc {
        display: none;
    }

    .text_container_sp {
        display: block;
        position: relative;
        font-size: 2.2rem;
        top: 8%;
        left: 12%;
    }

    .text_part {
        position: absolute;
        top: 0;
        left: -8%;
    }

    .shifted_text {
        top: 0;
        left: 5%;
    }

    .heater1_container::before {
        top: -20%;
        right: 0px;
        width: 185px;
        height: 100%;
    }

    .div_heater01 {
        width: 225px;
        height: 300px;
        top: 12%;
        right: 0%;
    }

    .top_text {
        top: 30%;
        left: 1%;
    }

    .top_text_for_pc {
        display: none;
    }

    .top_text_for_sp {
        display: block;
    }

    .top_text h1 {
        font-size: 2.3rem;
    }

    .top_text p {
        line-height: 1;
        margin: 0;
    }

    .big_font {
        font-size: 7rem;
    }

    .bigger_font {
        font-size: 5rem;
        font-weight: bolder;
    }

    /* 「正直屋なら」のテキストを右揃えにする */
    .font_color_yellow:first-child {
        width: 50%;
        text-align: right;
        /* 右揃え */
    }

    .top_text_for_sp .text_line:nth-child(3) {
        left: 20%;
    }

    .top_text_for_sp .text_line:nth-child(4) {
        left: 45%;
    }

    /* heater 2 (top)*/
    .heater2_container {
        height: 506px;
    }

    .heater2_container::before {
        bottom: -75%;
        left: -5%;
        width: 700px;
        height: 506px;
    }

    .div_heater02 {
        bottom: -90%;
        left: 5%;
        width: 100%;
        height: 330px;
    }

    .div_heater02 .heater02_img {
        width: 140px;
    }

    .div_heater02 .fukidashi_text_container {
        position: absolute;
        top: -19%;
        left: -4%;
        font-size: 1.2rem;
        color: #0071BC;
        line-height: 0.5;
        transform: rotate(-13deg);
        text-shadow: none;
    }

    .top_price_container_pc {
        display: none;
    }

    .top_price_container_sp {
        display: block;
        position: absolute;
        top: 0%;
        left: 35%;
        line-height: 1;
        letter-spacing: -2px;
    }

    .top_price_container h2 {
        font-size: 1.5rem;
    }

    .top_price_container .maker_price {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .top_price_container .maker_price span {
        font-size: 1.5rem;
        font-weight: bolder;
    }

    .top_price_container .yellow_marker {
        position: absolute;
        top: 10px;
        left: -120px;
        z-index: -1;
    }

    .yellow_marker img {
        width: 105%;
        filter: brightness(100%);
    }

    .top_price_container .shojikiya_price span.yen {
        font-size: 1.8rem;
    }

    .top_price_container .shojikiya_price span.price {
        font-size: 2.5rem;
    }

    .top_price_container .shojikiya_price span.tax_included {
        letter-spacing: 0;
    }

    .top_price_container .details {
        font-size: 0.64rem;
        text-align: right;
    }

    .div_heater02 .top_price_container .shifted_text_pc {
        display: none;
    }

    .div_heater02 .top_price_container .shifted_text_sp {
        display: block;
        font-size: 1.5rem;
        position: relative;
        margin-top: 40px;
        top: 7%;
        left: -2%;
        transform: rotate(5.5deg);
    }

    /* Costcut section */
    .costcut_pink_text {
        text-align: center;
        padding-left: 0px;
    }

    .fukidashi_secret {
        position: absolute;
        top: -50%;
        right: 5%;
    }

    .fukidashi_secret img {
        width: 100%;
    }

    .costcut_pink_text h2 {
        position: relative;
        font-size: 1.5rem;
        margin-top: 12%;
        z-index: 1;
    }

    .costcut_pink_text h2 span {
        font-size: 2.3rem;
    }

    .div_btoc {
        height: 130px;
        margin-bottom: 0px;
    }

    .div_btoc img {
        width: 80%;
    }

    .costcut_middle_text h3 {
        font-size: 0.9rem;
    }

    .costcut_middle_text p {
        font-size: 1.8rem;
        padding-top: 10px;
        margin-bottom: 0px;
    }

    .fukidashi_if img {
        width: 90%;
    }

    .div_market_price_logos img {
        padding-left: 15px;
    }

    .market_price_text {
        display: flex;
        align-items: center;
        margin: 40px 0;
    }

    .market_price_text .left {
        flex: 0 0 50%;
        max-width: 50%;
        text-align: right;
    }

    .market_price_text .left img {
        width: 70%;
        height: auto;
    }

    .market_price_text .right {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .market_price_text .right img {
        margin-top: 10px;
    }

    .div_for_sp_market_price_text {
        text-align: center;
    }

    .div_for_sp_market_price_text h2 {
        font-size: 2.3rem;
        font-weight: bolder;
    }

    .div_market_flow {
        height: 90px;
        margin-bottom: 20px;
    }

    .div_market_flow img {
        width: 90%;
        margin-bottom: 10px;
    }

    .costcut_bottom_text h3 {
        line-height: 1.5;
        font-size: 0.9rem;
    }

    /* middle section */
    .middle_text_container {
        width: 100%;
        height: 2730px;
    }

    .middle_text_container .div_shifted_text {
        margin-left: 0px;
        top: 0px;
        left: 0px;
        height: 0px;
    }

    .middle_text_container .div_shifted_text .shifted_text {
        top: 10%;
        left: 40%;
        font-size: 1rem;
    }

    .middle_text_container .bg_green {
        position: absolute;
        top: 80px;
        right: 0px;
        width: 1000px;
        height: 1500px;
        transform: rotate(-15deg);
        z-index: 0;
    }

    .middle_text_container .bg_blue {
        position: absolute;
        bottom: 0;
        width: 650px;
        height: 1340px;
        z-index: 0;
    }

    .div_bg_green {
        position: relative;
        width: 100%;
        height: 1350px;
    }

    .div_bg_green::before {
        top: 425px;
        left: -30%;
        width: 200px;
        height: 450px;
        background-size: 130%;
    }

    .div_bg_green::after {
        top: 285px;
        right: -10%;
        width: 200px;
        height: 1600px;
        background-size: 130%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .middle_compare_container {
        padding-top: 0px;
        top: 0px;
    }

    .middle_compare_container .div_compare_top {
        display: flex;
        align-items: center;
    }

    .middle_compare_container .div_compare_top .left {
        flex: 0 0 auto;
        max-width: 50%;
        text-align: right;
    }

    .middle_compare_container .div_compare_top .left img {
        width: 100%;
        height: auto;
    }

    .middle_compare_container .div_compare_top .right {
        flex: 1;
        padding-left: 0px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: left;
    }

    .middle_compare_container .div_compare_top h2 {
        font-size: 1.9rem;
        font-weight: bolder;
    }

    .middle_compare_container .div_top_text h2 span {
        font-size: 1.9rem;
    }

    .div_heater_compare {
        margin: 0 5%;
        height: auto;
        z-index: 2;
    }

    .div_heater_compare>.right {
        flex: 0 0 95%;
        max-width: 95%;
        padding-right: 0px;
    }

    .div_shojikiya_price .div_price {
        text-align: center;
    }

    .div_shojikiya_price .div_price p.details {
        text-align: right;
        padding-right: 10%;
    }

    .div_shojikiya_price img {
        width: 90%;
        top: 0px;
        left: 0;
    }

    /* お得 */
    .middle_otoku_container .div_otoku_text .nanto {
        top: 40px;
        left: 30px;
        font-size: 1.3rem;
    }

    .middle_otoku_container .div_otoku_text h2 {
        font-size: 1.2rem;
    }

    .middle_otoku_container .div_otoku_text h2 span {
        font-size: 2.5rem;
    }

    /* 特典 */
    .middle_otoku_container .div_tokuten_text {
        height: 450px;
    }

    .middle_otoku_container .div_tokuten_text h2 {
        font-size: 1.2rem;
        padding-top: 0px;
    }

    .middle_otoku_container .div_tokuten_text h2 span {
        font-size: 1.3rem;
    }

    .div_tokuten_text .div_groumet_travel {
        width: 90%;
    }

    .div_tokuten_text .div_groumet_travel .cloude_img {
        top: 100%;
        right: 0%;
        width: 20%;
    }

    .div_tokuten_text .div_tokuten_images {
        position: relative;
        width: 100%;
        height: 250px;
        z-index: 3;
    }

    .div_tokuten_text .div_tokuten_images img {
        position: absolute;
    }

    .div_tokuten_text .image1 {
        width: 55%;
        top: -5%;
        left: 5%;
        z-index: 3;
    }

    .div_tokuten_text .image2 {
        width: 50%;
        top: 10%;
        left: 50%;
        transform: translateY(-5%) translateX(-10%);
        -webkit-transform: translateY(-5%) translateX(-10%);
        z-index: 2;
    }

    .div_tokuten_text .image3 {
        width: 55%;
        top: 50%;
        left: 5%;
        transform: translateY(-10%) translateX(12%);
        -webkit-transform: translateY(-10%) translateX(8%);
        z-index: 1;
    }

    .div_tokuten_text .image4 {
        width: 55%;
        top: 50%;
        left: 50%;
        transform: translateY(0%) translateX(-10%);
        -webkit-transform: translateY(0%) translateX(-10%);
        z-index: 3;
    }

    .div_tokuten_text .div_tokuten_images .cloude_img {
        width: 15%;
        top: 50%;
        left: 2%;
        z-index: 0;
    }

    .div_tokuten_text .tokuten_text_bottom {
        margin-top: 2rem;
    }

    /* コミコミ価格 */
    .div_included_service_text h2{
        font-size: 1.9rem;
    }

    .div_included_service_text .komikomi_text span {
        font-size: 1.3rem;
    }

    .div_included_service_text .div_heater_price_images {
        height: 350px;
    }

    .div_included_service_text .heater_image1 {
        width: 150px;
        top: 20%;
        left: 15%;
        z-index: 1;
    }

    .div_included_service_text .heater_image2 {
        width: 125px;
        top: 0%;
        left: 39%;
        z-index: 2;
    }

    .div_included_service_text .heater_image3 {
        width: 125px;
        top: 16%;
        left: 60%;
        z-index: 1;
    }

    .div_included_service_text .heater_image4 {
        width: 50%;
        bottom: 22%;
        left: 50%;
        transform: translateY(0%) translateX(-10%);
        -webkit-transform: translateY(0%) translateX(-10%);
    }

    .div_heater_price_images p {
        font-size: 0.9rem;
        bottom: -5%;
        right: -5%;
    }

    .div_heater_price_images p span {
        font-size: 1rem;
    }

    .div_komikomi_text .komikomi_text {
        margin-bottom: 0px;
    }

    .komikomi_list {
        margin: 20px auto;
        color: white;
        padding: 0px;
        box-sizing: border-box;
    }

    .komikomi_list .title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: bolder;
        text-align: center;
        margin: 0 auto;
        padding-left: 0 20px;
    }

    .komikomi_list .title .line {
        flex: 1;
        border-top: 2px solid white;
        margin: 0 10px;
    }

    .komikomi_list .checklist {
        list-style: none;
        padding-left: 15%;
        margin: 10px auto;
        text-align: start;
    }

    .komikomi_list .checklist li {
        position: relative;
        font-size: 0.8rem;
        font-weight: bolder;
        margin: 15px 0 15px 5px;
        list-style-type: none !important;
    }

    .komikomi_list .checklist li:before {
        width: 15px;
        height: 15px;
    }

    .komikomi_list .checklist li:after {
        font-size: 1.5rem;
        width: 1em;
        left: -7%;
        /*左端からのアイコンまでの距離*/
        top: -10%;
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    /* Footer */
    .contact_text_pc {
        display: none;
    }

    .contact_text_sp {
        background-color: #223881;
        color: white;
        text-align: center;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 200px;
    }

    .contact_text_sp h3 {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .contact_text_sp .font_contact_text {
        font-size: 1.6rem;
    }

    .contact_container {
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .contact_container img {
        width: 90%;
    }

    .logo_container {
        height: auto;
        background: linear-gradient(to bottom, #004c8a 0%, #2c619b 50%, #6682b3 99%);
        ;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .logo_container img {
        width: 80%;
    }

    /* Footer Navbar */
    .div_footer_nav {
        display: block;
        height: 50px;
        width: 100%;
    }

    .footer_nav {
        position: fixed;
        bottom: 0;
        width: 100vw;
        max-width: 450px;
        height: 50px;
        background-color: #333;
        display: flex;
        justify-content: center;
        z-index: 10;
        box-sizing: border-box;
    }

    .footer_nav ul {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
    }

    .footer_nav_item {
        flex: 1;
        text-align: center;
        padding: auto 0;
        text-align: left;
        font-weight: bold;
        width: calc(100% / 3);
    }

    .footer_nav_flex {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }


    .flex_left {
        height: 50%;
        padding: 0 5px;
    }

    .flex_right {
        width: 1.5em;
        height: 3em;
        padding: 5px 0px;
        object-fit: contain;
    }

    .flex_center {
        flex: 1;
        width: 50%;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .footer_nav_item a {
        color: #fff;
        text-decoration: none;
        font-size: 0.65rem;
        display: block;
        text-align: left;
        font-weight: bold;
        line-height: 1.2;
        height: 100%;
    }

    .footer_nav_item span.bigger_font {
        font-size: 1.2rem;
    }

    .footer_nav_item__tel {
        background-color: #FF4500;
        /* 青 */
    }

    .footer_nav_item__contact {
        background-color: #1E90FF;
        /* オレンジ */
    }

    .footer_nav_item__line {
        background-color: #32CD32;
        /* 緑 */
    }
}

/* スマホ小サイズ以下 */
@media (max-width: 374.99px) {
    .staggered_text {
        font-size: 1.5rem;
    }

    .text_container_sp {
        font-size: 1.8rem;
        top: 10%;
        left: 12%;
    }

    .div_heater01 {
        width: 180px;
        height: 230px;
        top: 16%;
        right: 0%;
    }

    .top_text h1 {
        font-size: 2rem;
    }

    .font_color_yellow:first-child {
        width: 45%;
        text-align: right;
    }

    .top_text_container {
        height: 1225px;
    }

    .top_text_container::after {
        top: 9%;
        width: 970px;
        height: 780px;
    }

    .top_price_container_sp {
        left: 40%;
    }

    .top_price_container h2 {
        font-size: 1.2rem;
    }

    .top_price_container .maker_price span {
        font-size: 1.2rem;
    }

    .top_price_container .shojikiya_price span.yen {
        font-size: 1.2rem;
    }

    .top_price_container .shojikiya_price span.price {
        font-size: 1.5rem;
    }

    .div_heater02 .top_price_container .shifted_text_sp {
        font-size: 1.3rem;
        margin-top: 16px;
    }

    .costcut_middle_text p {
        font-size: 1.5rem;
    }

    .div_for_sp_market_price_text h2 {
        font-size: 2rem;
    }

    .middle_text_container {
        height: auto;
    }

    .middle_text_container .bg_blue {
        height: 1150px;
    }

    .middle_text_container .div_shifted_text .shifted_text {
        top: 10%;
        left: 45%;
        font-size: 0.7rem;
    }

    .middle_compare_container .div_compare_top h2 {
        font-size: 1.5rem;
    }

    .middle_compare_container .div_top_text h2 span {
        font-size: 1.5rem;
    }

    .middle_compare_container .div_top_text p {
        font-size: 0.8rem;
    }

    .div_heater_compare h3 {
        font-size: 1.2rem;
    }

    .div_gas_company_price .div_flex span.yen {
        font-size: 1.8rem;
    }

    .div_gas_company_price .div_flex span.price {
        font-size: 2rem;
    }

    .div_shojikiya_price .div_price .shojikiya_price span.yen {
        font-size: 1.8rem;
    }

    .div_shojikiya_price .div_price .shojikiya_price span.price {
        font-size: 2rem;
    }

    .div_shojikiya_price .div_price p.details {
        font-size: 0.7rem;
    }

    .div_shojikiya_price img {
        width: 70%;
        top: 0px;
        left: 10%;
    }

    .middle_otoku_container .div_tokuten_text {
        height: 420px;
    }

    .middle_otoku_container .div_otoku_text h2 {
        font-size: 1rem;
    }

    .middle_otoku_container .div_otoku_text .nanto {
        top: 30px;
        left: 10px;
        font-size: 1rem;
    }

    .middle_otoku_container .div_otoku_text h2 span {
        font-size: 2rem;
    }

    .middle_otoku_container .div_tokuten_text h2 {
        font-size: 1rem;
    }

    .div_tokuten_text .image1 {
        width: 60%;
    }

    .div_tokuten_text .image2 {
        width: 55%;
    }

    .div_tokuten_text .image3 {
        width: 60%;
    }

    .div_tokuten_text .image4 {
        width: 55%;
    }

    .included_service_container {
        padding-top: 0px;
    }

    .div_included_service_text h2,
    .div_service_time_text h2 {
        font-size: 1.5rem;
    }

    .div_included_service_text .heater_image1 {
        left: 5%;
    }

    .div_included_service_text .heater_image2 {
        left: 37%;
    }

    .div_included_service_text .heater_image3 {
        top: 22%;
        left: 63%;
    }

    .div_included_service_text .heater_image4 {
        bottom: 18%;
        left: 50%;
        transform: translateY(0%) translateX(-10%);
        -webkit-transform: translateY(0%) translateX(-10%);
    }

    .div_heater_price_images p {
        font-size: 0.7rem;
        bottom: -5%;
        right: -5%;
    }

    .div_heater_price_images p span {
        font-size: 0.8rem;
    }

    .div_included_service_text .komikomi_text span {
        font-size: 1rem;
    }

    .komikomi_list .title {
        font-size: 0.9rem;
    }

    .komikomi_list .checklist li {
        font-size: 0.7rem;
        margin: 10px 0 10px 5px;
    }

    .komikomi_list .checklist li:before {
        width: 10px;
        height: 10px;
    }

    .komikomi_list .checklist li:after {
        font-size: 1.4rem;
        width: 0.7em;
        left: -8%;
        top: -25%;
        -webkit-transform: translateY(-25%);
        transform: translateY(-25%);
    }

    .flex_center {
        font-size: 3.5vw;
    }

    .footer_nav_item span.bigger_font {
        font-size: 1.5em;
    }

    .footer_nav_item a {
        font-size: 1.5em;
        white-space: nowrap;
        width: 100%;
    }

    .flex_right {
        width: 0.7em;
        height: 1em;
    }

    .mail-line{
        font-size: 4vw;
    }

}