@charset "utf-8";
/* CSS Document */


@media only screen and (min-width: 751px) {

    #sustainable_redwin {
        position: relative;
        padding-bottom: 100px;
        text-align: left;
        letter-spacing: normal;
    }

    #sustainable_redwin .body_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../common/img/bg_stripe.png') left top, url('../img/main_bg.jpg') no-repeat center top;
        background-size: auto, 100% auto;
        background-blend-mode: multiply;
        z-index: -1;
    }

    #sustainable_redwin .kv_body_txt {
        margin-top: 58px;
        text-align: center;
    }

    #sustainable_redwin .kv_body_txt .kv_body_large {
        text-align: center;
    }
    
    #sustainable_redwin .redwin_navi a:hover,
    #sustainable_redwin .redwin_navi .current a {
        color: #fff;
        background-color: #c30e18;
        opacity: 1;
    }

    #sustainable_redwin .redwin_movie {
        margin-top: 80px;
        padding-bottom: 20px;
    }

    /* repair menu */
    #sustainable_redwin .sec_repair_menu {
        padding-bottom: 85px;
    }

    #sustainable_redwin .annotation_txt {
        width: fit-content;
        margin: 40px auto 0;
        padding: 10px 26px;
        color: #c30e18;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-weight: 800;
        font-size: 16px;
        border: 1px solid #c30e18;
    }

    #sustainable_redwin .annotation_note {
        padding: 15px 0 0 1em;
        text-indent: -1em;
        color: #c30e18;
        font-family: "FP-ヒラギノ角ゴ ProN W3", sans-serif;
        font-size: 12px;
        font-weight: 300;
        text-align: center;
    }

    #sustainable_redwin .repair_menu {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 100px 54px;
        max-width: 1100px;
        margin: 60px auto 0;
        padding: 0 30px;
        padding-bottom: 100px;
    }

    #sustainable_redwin .repair_menu li {
        text-align: center;
        color: #173b67;
    }

    #sustainable_redwin .repair_menu .img {
        margin-bottom: 30px;
    }

    #sustainable_redwin .repair_menu .manu_name {
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-weight: 800;
        font-size: clamp(
            calc(28px * 0.75), /* 最小0.75倍 */
            calc(100vw / (1400 / 28)), /* 画面幅1400pxのときに28px */
            calc(28px * 1) /* 最大1倍 */
        );
        letter-spacing: -0.04em;
    }

    #sustainable_redwin .repair_menu .desc {
        padding-top: 3px;
        font-size: 16px;
    }

    #sustainable_redwin .repair_menu .info {
        margin-top: 20px;
        font-family: "FP-ヒラギノ角ゴ ProN W3", sans-serif;
        font-weight: 300;
        font-size: 14px;
    }

    #sustainable_redwin .repair_menu .btn_more {
        display: block;
        width: fit-content;
        min-width: 150px;
        margin: 32px auto 0;
        padding: 13px 35px;
        color: #fff;
        font-family: ArialMTPro-Bold, sans-serif;
        font-size: 14px;
        letter-spacing: 0.15em;
        background-color: #c30e18;
        box-sizing: border-box;
    }

    #sustainable_redwin .bottom_txt {
        max-width: 1100px;
        margin: 0 auto;
        padding: 40px 0 0;
        border-top: 1px solid #e5e5e5;
        color: #173b67;
    }

    #sustainable_redwin .ul_annotation {
        font-size: 12px;
        font-family: "FP-ヒラギノ角ゴ ProN W3", sans-serif;
        font-weight: 300;
    } 

    #sustainable_redwin .ul_annotation li {
        margin-bottom: 2px;
        padding-left: 1em;
        text-indent: -1em;
    }

    /* voice */
    #sustainable_redwin .sec_voice {
        padding-bottom: 100px;
        background-image: url('../../common/img/bg_stripe_02.png');
        background-position: left top;
    }

    #sustainable_redwin .fukidashi_area {
        margin-top: 45px;
        margin-bottom: 54px;
    }

    #sustainable_redwin .fukidashi {
        position: relative;
        max-width: 680px;
        margin: 24px auto 0;
        color: #173b67;
        font-size: 16px;
        line-height: 1.75;
    }

    #sustainable_redwin .fukidashi:first-of-type {
        margin-top: 0;
    }

    #sustainable_redwin .fukidashi.fuki_left {
        padding-left: 35px;
        padding-right: 10%;
    }

    #sustainable_redwin .fukidashi.fuki_right {
        padding-right: 35px;
        padding-left: 10%;
    }

    #sustainable_redwin .fukidashi .arrow {
        position: absolute;
        bottom: 28px;
        display: block;
        height: 18px;
        width: 39px;
    }

    #sustainable_redwin .fukidashi.fuki_left .arrow {
        left: 0;
    }

    #sustainable_redwin .fukidashi.fuki_right .arrow {
        right: 0;
    }

    #sustainable_redwin .fukidashi .arrow::before {
        position: absolute;
        bottom: 0;
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        background-color: #173b67;
    }
    
    #sustainable_redwin .fukidashi.fuki_left .arrow::before {
        right: 0;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi.fuki_right .arrow::before {
        left: 0;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi .arrow::after {
        position: absolute;
        bottom: 4px;
        content: "";
        display: block;
        height: 56%;
        width: 56%;
        background-color: #fff;
    }
    
    #sustainable_redwin .fukidashi.fuki_left .arrow::after {
        right: -1px;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi.fuki_right .arrow::after {
        left: -1px;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi .fukidashi_inner {
        padding: 28px 0;
        margin-top: 23px;
        border: 4px solid #173b67;
        border-radius: 15px;
        background-color: #fff;
    }    

    #sustainable_redwin .fukidashi .fukidashi_inner:first-of-type {
        margin-top: 0;
    }

    #sustainable_redwin .fukidashi .fukidashi_inner p {
        display: block;
        width: fit-content;
        padding: 0 30px;
        margin: 0 auto;
    }

    #sustainable_redwin .btn_red {
        display: block;
        width: fit-content;
        min-width: 230px;
        margin: 0 auto;
        padding: 17px 35px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        background-color: #c30e18;
        box-sizing: border-box;
    }

    /* order flow */
    #sustainable_redwin .sec_order_flow {
        padding-bottom: 80px;
    }

    #sustainable_redwin .order_flow_list {
        padding: 50px 30px 0;
    }

    #sustainable_redwin .order_flow_list li {
        position: relative;
        max-width: 750px;
        margin: 0 auto 20px;
        text-align: center;
        color: #173b67;
        overflow: hidden;
    }
    
    #sustainable_redwin .order_flow_list .li_inner {
        padding-top: 35px;
        padding-bottom: 45px;
        border: 3px solid #173b67;
    }
    
    #sustainable_redwin .order_flow_list li.arrow .li_inner {
        padding-bottom: 15px;
        margin-bottom: 6.93%;
        border-bottom: none;
    }

    #sustainable_redwin .order_flow_list li.arrow::before {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 6.93%;
        clip-path: polygon(0 0, 100% 0, 100% 3px, 50% 100%, 0 3px);
        background-color: #173b67;
    }

    #sustainable_redwin .order_flow_list li.arrow::after {
        position: absolute;
        left: 3px;
        bottom: 3px;
        content: "";
        display: block;
        width: calc(100% - 6px);
        height: 0;
        padding-bottom: calc(7.05% - 3px);
        clip-path: polygon(0 0, 100% 0, 100% 1px, 50% 100%, 0 1px);
        background-color: #fff;
    }

    #sustainable_redwin .order_flow_list .main_txt {
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: 28px;
        font-weight: 800;
    }

    #sustainable_redwin .order_flow_list .sub_txt {
        margin-top: 6px;
        font-size: 16px;
    }

    /* request */
    #sustainable_redwin .sec_request_before {
        padding-bottom: 100px;
    }

    #sustainable_redwin .sec_request_before .txt {
        margin-top: 35px;
        color: #173b67;
        text-align: center;
        line-height: 2;
    }

    #sustainable_redwin .sec_request_before .btn_request {
        margin-top: 52px;
    }
}


@media only screen and (max-width: 750px) {
    
    #sustainable_redwin {
        position: relative;
        padding-bottom: 55px;
        text-align: left;
        letter-spacing: normal;
    }

    #sustainable_redwin .body_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../../common/img/bg_stripe_sp.png') left top, url('../img/main_bg_sp.jpg') no-repeat center top;
        background-size: 15px, 100% auto;
        background-blend-mode: multiply;
        z-index: -1;
    }

    #sustainable_redwin .kv_body_txt {
        margin-top: 33px;
        text-align: center;
    }

    #sustainable_redwin .kv_body_txt .kv_body_large {
        text-align: center;
    }

    #sustainable_redwin .kv_body_txt .initiatives_icon {
        margin-top: 35px;
    }
    
    #sustainable_redwin .redwin_navi .current a {
        color: #fff;
        background-color: #c30e18;
        opacity: 1;
    }

    #sustainable_redwin .redwin_movie {
        margin-top: 40px;
        margin-bottom: -15px;
    }

    /* repair menu */
    #sustainable_redwin .sec_repair_menu {
        padding-bottom: 35px;
    }

    #sustainable_redwin .annotation_txt {
        width: fit-content;
        margin: 24px auto 0;
        padding: 10px 16px;
        color: #c30e18;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-weight: 800;
        font-size: 13px;
        text-align: center;
        border: 1px solid #c30e18;
    }

    #sustainable_redwin .annotation_note {
        padding: 12px 0 0 1em;
        text-indent: -1em;
        color: #c30e18;
        font-family: "FP-ヒラギノ角ゴ ProN W3", sans-serif;
        font-size: 10px;
        font-weight: 300;
        text-align: left;
    }

    #sustainable_redwin .repair_menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
        margin: 40px auto 0;
        padding-bottom: 40px;
    }

    #sustainable_redwin .repair_menu li {
        text-align: center;
        color: #173b67;
    }

    #sustainable_redwin .repair_menu .img {
        margin-bottom: 11px;
    }

    #sustainable_redwin .repair_menu .manu_name {
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-weight: 800;
        font-size: clamp(
            calc(14px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 14)), /* 画面幅375pxのときに14px */
            calc(14px * 1.5) /* 最大1.5倍 */
        );
        letter-spacing: -0.04em;
    }

    #sustainable_redwin .repair_menu .desc {
        padding-top: 2px;
        font-size: 10px;
    }

    #sustainable_redwin .repair_menu .info {
        margin-top: 4px;
        font-family: "FP-ヒラギノ角ゴ ProN W3", sans-serif;
        font-weight: 300;
        font-size: 10px;
    }

    #sustainable_redwin .repair_menu .info .small {
        font-size: 8px;
    }

    #sustainable_redwin .repair_menu .btn_more {
        display: block;
        width: fit-content;
        margin: 13px auto 0;
        padding: 12px 26px;
        color: #fff;
        font-family: ArialMTPro-Bold, sans-serif;
        font-size: 10px;
        letter-spacing: 0.15em;
        background-color: #c30e18;
        box-sizing: border-box;
    }

    #sustainable_redwin .bottom_txt {
        padding: 18px 0 0;
        border-top: 1px solid #e5e5e5;
        color: #173b67;
    }

    #sustainable_redwin .ul_annotation {
        font-size: 10px;
        font-family: "FP-ヒラギノ角ゴ ProN W3", sans-serif;
        font-weight: 300;
    } 

    #sustainable_redwin .ul_annotation li {
        margin-bottom: 8px;
        padding-left: 1em;
        text-indent: -1em;
    }

    /* voice */
    #sustainable_redwin .sec_voice {
        padding-bottom: 60px;
        padding-left: 3%;
        padding-right: 3%;
        background-image: url('../../common/img/bg_stripe_02_sp.png');
        background-size: 15px;
        background-position: left top;
    }

    #sustainable_redwin .fukidashi_area {
        margin-top: 30px;
        margin-bottom: 36px;
    }

    #sustainable_redwin .fukidashi {
        position: relative;
        margin: 23px auto 0;
        color: #173b67;
        font-size: 13px;
        line-height: 1.6;
    }

    #sustainable_redwin .fukidashi:first-of-type {
        margin-top: 0;
    }

    #sustainable_redwin .fukidashi.fuki_left {
        padding-left: 23px;
        padding-right: 12%;
    }

    #sustainable_redwin .fukidashi.fuki_right {
        padding-right: 23px;
        padding-left: 12%;
    }

    #sustainable_redwin .fukidashi .arrow {
        position: absolute;
        bottom: 28px;
        display: block;
        height: 13px;
        width: 26px;
    }

    #sustainable_redwin .fukidashi.fuki_left .arrow {
        left: 0;
    }

    #sustainable_redwin .fukidashi.fuki_right .arrow {
        right: 0;
    }

    #sustainable_redwin .fukidashi .arrow::before {
        position: absolute;
        bottom: 0;
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        background-color: #173b67;
    }
    
    #sustainable_redwin .fukidashi.fuki_left .arrow::before {
        right: 0;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi.fuki_right .arrow::before {
        left: 0;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi .arrow::after {
        position: absolute;
        bottom: 3px;
        content: "";
        display: block;
        height: 56%;
        width: 56%;
        background-color: #fff;
    }
    
    #sustainable_redwin .fukidashi.fuki_left .arrow::after {
        right: -1px;
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi.fuki_right .arrow::after {
        left: -1px;
        clip-path: polygon(0 0, 100% 100%, 0 100%);
    }

    #sustainable_redwin .fukidashi .fukidashi_inner {
        padding: 22px 0;
        margin-top: 23px;
        border: 3px solid #173b67;
        border-radius: 10px;
        background-color: #fff;
    }    

    #sustainable_redwin .fukidashi .fukidashi_inner:first-of-type {
        margin-top: 0;
    }

    #sustainable_redwin .fukidashi .fukidashi_inner p {
        display: block;
        width: fit-content;
        padding: 0 9%;
        margin: 0 auto;
    }

    #sustainable_redwin .btn_red {
        display: block;
        width: fit-content;
        min-width: 185px;
        margin: 0 auto;
        padding: 14px 20px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #c30e18;
        box-sizing: border-box;
    }

    /* order flow */
    #sustainable_redwin .sec_order_flow {
        padding-bottom: 50px;
    }

    #sustainable_redwin .order_flow_list {
        padding: 27px 0px 0;
    }

    #sustainable_redwin .order_flow_list li {
        position: relative;
        margin: 0 auto 10px;
        text-align: center;
        color: #173b67;
        overflow: hidden;
    }
    
    #sustainable_redwin .order_flow_list .li_inner {
        padding: 19px 10px 16px;
        border: 3px solid #173b67;
    }
    
    #sustainable_redwin .order_flow_list li.arrow .li_inner {
        padding-bottom: 5px;
        margin-bottom: 6.93%;
        border-bottom: none;
    }

    #sustainable_redwin .order_flow_list li.arrow::before {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 6.93%;
        clip-path: polygon(0 0, 100% 0, 100% 3px, 50% 100%, 0 3px);
        background-color: #173b67;
    }

    #sustainable_redwin .order_flow_list li.arrow::after {
        position: absolute;
        left: 3px;
        bottom: 3px;
        content: "";
        display: block;
        width: calc(100% - 6px);
        height: 0;
        padding-bottom: calc(7.05% - 3px);
        clip-path: polygon(0 0, 100% 0, 100% 1px, 50% 100%, 0 1px);
        background-color: #fff;
    }

    #sustainable_redwin .order_flow_list .main_txt {
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: clamp(
            calc(16px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 16)), /* 画面幅375pxのときに16px */
            calc(16px * 1.5) /* 最大1.5倍 */
        );
        font-weight: 800;
    }

    #sustainable_redwin .order_flow_list .sub_txt {
        margin-top: 6px;
        font-size: 13px;
    }

    /* request */
    #sustainable_redwin .sec_request_before {
        padding-bottom: 55px;
    }

    #sustainable_redwin .sec_request_before .txt {
        margin-top: 23px;
        color: #173b67;
        font-size: 13px;
        line-height: 2;
    }

    #sustainable_redwin .sec_request_before .btn_request {
        margin-top: 32px;
    }
}