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


#tab_list {
    padding-top: 70px;
    margin-top: -70px;
}

.tabs {
    max-width: 1440px;
    width: 98%;
    margin: 0 auto;
    position: relative;
    display:-webkit-box;
  	display:-ms-flexbox;
    display: flex;
}

.tabs li {
    margin: 0 10px;
}


@media screen and (max-width: 768px) {
	.tabs li {
	    margin: 0 1px;
	    padding:0 5px;
	}
}

.tabs li.col17 {
    margin: 0 5px;
}

.tabs li label {
    padding: 25px 0;
    font-size: 1.6vw;
    border-radius: 5px 5px 0 0;
    line-height:1.3;
}

.tabs li.label2 label {
    padding: 12px 0;
}

.tab_item1,
.tab_item2,
.tab_item3,
.tab_item4 {
    width: 100%;
    display: block;
    padding: 20px 0;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    background-color: #9f9f9f;
    color: #fff;
}

input[name="tab_item"] {
    display: none;
}

input[name="tab_item2"] {
    display: none;
}

.tab_content {
    display: none;
    padding: 10px 50px;
    border-radius: 8px;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
	.tab_content {
	    padding: 5px 10px;
	}
}
.tabs input:checked + .tab_item1 {
    background-color: #7dc058;
}

.tabs input:checked + .tab_item2 {
    background-color: #2bb7b3;
}

.tabs input:checked + .tab_item3 {
    background-color: #009e3b;
}

.tabs input:checked + .tab_item4 {
    background-color: #56b879;
}

#tab01_content {
    border: 5px solid #7dc058;
    display: block;
}

#tab02_content {
    border: 5px solid #2bb7b3;
}

#tab03_content {
    border: 5px solid #009e3b;
}

#tab04_content {
    border: 5px solid #56b879;
}

.inline_cnts2 {
    padding: 20px 50px;
    border-radius: 8px;
    margin: 50px auto;
    background-color: #fff;
}

#tab05_content .inline_cnts2 {
    border: 5px solid #ed8599;
    position: relative;
}

#tab06_content .inline_cnts2 {
    border: 5px solid #254a9a;
    position: relative;
}

#tab07_content .inline_cnts2 {
    border: 5px solid #56b879;
    position: relative;
}

#tab08_content .inline_cnts2 {
    border: 5px solid #e94829;
    position: relative;
}

#tab09_content .inline_cnts2 {
    border: 5px solid #51a5d9;
    position: relative;
}


.inline_cnts2::before {
    content: "";
    position: absolute;
    top: -36px;
    border: 15px solid transparent;
    border-bottom: 30px solid #FFF;
    z-index: 2;
    left: 8%;
}

.inline_cnts2::after {
    content: "";
    position: absolute;
    top: -45px;
    border: 15px solid transparent;
    border-bottom: 30px solid #ed8599;
    z-index: 1;
    left: 8%;
}

#tab06_content .inline_cnts2::before {
    left: 28.5%;
}

#tab06_content .inline_cnts2::after {
    border-bottom: 30px solid #254a9a;
    left: 28.5%;
}

#tab07_content .inline_cnts2::before {
    left: 49%;
}

#tab07_content .inline_cnts2::after {
    border-bottom: 30px solid #56b879;
    left: 49%;
}

#tab08_content .inline_cnts2::before {
    left: 69.5%;
}

#tab08_content .inline_cnts2::after {
    border-bottom: 30px solid #e94829;
    left: 69.5%;
}

#tab09_content .inline_cnts2::before {
    left: 90%;
}

#tab09_content .inline_cnts2::after {
    border-bottom: 30px solid #51a5d9;
    left: 90%;
}


.color01 {
    color: #7dc058;
}

.color02 {
    color: #2bb7b3;
}

.color03 {
    color: #009e3b;
}

.color04 {
    color: #56b879;
}

.color05 {
    color: #ed8599;
}

.color06 {
    color: #254a9a;
}

.color07 {
    color: #56b879;
}

.color08 {
    color: #e94829;
}

.color09 {
    color: #51a5d9;
}


.tab_link a {
    background: none;
    color: #000;
    display: block;
    margin: 10px 0;
}


.tab_link .flex_sb {
    border-top: 1px solid #999;
    margin: 0 auto 0;
}

.tab_link .flex_sb li br {
    display: none;
}

.tab_link .flex_sb li span {
    padding: 0 5px;
}

.tab_link .flex_sb li:nth-child(1) {
    text-align: left;
    width: 50%;
}

.tab_link .flex_sb li:nth-child(2) {
    text-align: right;
    width: 50%;
}


#action #process .tabs li.label2 label {
    padding: 15px 0;
    font-size: 1.5vw;
}


@media screen and (min-width: 1400px) {
    .tabs li label {
        font-size: 24px;
    }

    #action #process .tabs li.label2 label {
        font-size: 22px;
    }

}

@media screen and (max-width: 768px) {
    .tabs li label {
        font-size: 18px;
		cursor:pointer;
    }

    #recycling_report .tabs li label {
        font-size: 14px;
    }

    #recycling_report .tabs li.label2 label {
        padding: 16px 0;
    }

    #action #process .tabs li.label2 label {
        padding: 16px 0;
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .tabs li.col21 {
        margin: 5px;
        width: 100%;
    }

    .tabs li label {
        padding: 20px 0;
        font-size: 16px;
        border-radius: 5px;
    }

    .tab_content {
        margin: 10px auto;
        padding: 10px 10px;
    }

    #recycling_report .tabs li.label2 label,
    #recycling_report .tabs li.label3 label {
        padding: 16px 0;
    }


    #action #process .tabs li.col21 br {
        display: none;
    }

    #action #process .tabs li.label2 label {
        padding: 20px 0;
    }

    .tab_link .flex_sb {
        font-size: 12px;
    }

    .tab_link .flex_sb li {
        position: relative;
    }

    .tab_link .flex_sb li br {
        display: block;
    }

    .tab_link .flex_sb li span {
        position: absolute;
        top: 10px;
    }

    .tab_link .flex_sb li:nth-child(1) span {
        left: 0;
    }

    .tab_link .flex_sb li:nth-child(2) span {
        right: 0;
    }

    .tab_link .flex_sb li:nth-child(1) {
        text-align: left;
        width: 50%;
        padding-left: 20px;
    }


    .tab_link .flex_sb li:nth-child(1) span {
        left: 0;
    }

    .tab_link .flex_sb li:nth-child(2) {
        text-align: right;
        width: 50%;
        padding-right: 20px;
    }

}




/* popup */

body#popup {
    background-color: #fff;
}

##popup .tab_content2 {
    display: block;
}

#popup .popup_flex {
    text-align: center;
}

#popup .popup_flex img {
    max-width: 578px;
    width: 60%;
}

#popup .inline_cnts2 h5 {
    font-size: 26px;
    font-weight: normal;
}

#popup .inline_cnts2 .bdr {
    border-bottom: 1px solid #999;
    margin-bottom: 20px;
}

#popup .inline_cnts2 p {
    font-size: 18px;
    margin-bottom: 20px;
}

#popup .inline_cnts2::before {
    left: 50%;
}

#popup .inline_cnts2::after {
    left: 50%;
}

@media screen and (max-width: 768px) {
    #popup .inline_cnts2 {
        padding: 20px 30px;
    }

    #popup .inline_cnts2 h5 {
        font-size: 22px;
    }

    #popup .inline_cnts2 p {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    #popup .popup_flex img {
        width: 100%;
    }

    #popup .inline_cnts2 h5 {
        font-size: 20px;
    }

    #popup .inline_cnts2 {
        padding: 20px;
    }
}


/* tooltip */

#iron,
#metal,
#plastic,
#uretan {
    display: none;
}

.p_box {
    width: 140px;
    position: absolute;
    background: #999;
    padding: 10px;
    border-radius: 5px;
}