@charset "utf-8";

@import "base.css";
@import "common.css";
@import "layout.css";
@import "layoutFull.css";

/* index
---------------------------------------------------*/
#index .bgPinkArea{
    padding: 27px 90px;
    margin-bottom: 60px;
}

#index .btnArea{
    display: flex;
    justify-content: space-between;
    gap:0 32px;
}

#index .btnArea .btn{
    width: calc(calc(100% - 64px)/3);
}

#index .btnArea .btn a{
    width: 100%;
    padding: 0;
}

@media only screen and (max-width:767px) {
    #index .bgPinkArea{
        padding: calc(60vw / 7.5) calc(135vw / 7.5);
        margin-bottom: calc(70vw / 7.5);
    }

    #index .btnArea{
        flex-direction: column;
        gap:calc(30vw / 7.5) 0;
    }

    #index .btnArea .btn{
        width: 100%;
    }

    #index .btnArea + p.taC{
        text-align: left;
    }

}

/* environmental-policy
---------------------------------------------------*/
#environmental-policy .bgGrayFull::before {
    top: 220px;
}

#environmental-policy #box01{
    position: relative;
    padding-bottom: 85px;
}

#environmental-policy #box01 .bgPinkArea{
    margin-bottom: 85px !important;
}

#environmental-policy #box01 .square{
    font-size: 1.8rem;
    margin-bottom: 30px;
}

#environmental-policy #box01 .square + p{
    line-height: 1.6;
    margin-bottom: 50px;
}

#environmental-policy #box01 .pdf::after {
  margin-left: 0;
  margin-bottom: 4px;
}

@media only screen and (max-width:767px) {
    #environmental-policy .bgGrayFull::before {
        height: calc(100% - calc(350vw / 7.5));
        top: calc(250vw / 7.5);
    }
    
    #environmental-policy #box01{
        padding-bottom:calc(100vw / 7.5);
    }

    #environmental-policy #box01 .bgPinkArea{
        margin-bottom:calc(100vw / 7.5);
    }
    
    #environmental-policy #box01 .square{
        font-size: calc(26vw / 7.5);
        margin-bottom: calc(40vw / 7.5);
    }

    #environmental-policy #box01 .square + p{
        margin-bottom: calc(60vw / 7.5);
    }
}



/* closed-loop-recycling
---------------------------------------------------*/
#closed-loop-recycling .bgGrayFull::before {
  top: 200px;
}

#closed-loop-recycling #box01 .bgPinkArea p{
    font-size: 2.6rem;
    text-align: center;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

#closed-loop-recycling #box01 .bgPinkArea + p{
    margin-bottom: 50px;
    font-size: 1.8rem;
}

#closed-loop-recycling #box01 .column02{
    background: #fff;
    padding: 30px 55px 30px 45px;
    gap:0 25px;
    align-items: center;
}

#closed-loop-recycling #box01 .column02 .imgBl{
    width: 54.15%;
    max-width: 490px;
}

#closed-loop-recycling #box01 .column02 .txt{
}

#closed-loop-recycling #box01 .column02 + .column02{
    margin: 30px 0 95px 0;
}

#closed-loop-recycling #box01 .column02 .btn{
    margin: 35px auto 0;
    max-width: 380px;
}

#closed-loop-recycling #box01 .column02 .btn a{
    border: 2px solid #dc186e;
    display: block;
    padding: 0 15px;
}

#closed-loop-recycling #box01 .column02 .btn:hover a{
    background: #dc186e;
    color: #fff;
}

#closed-loop-recycling #box01 .bgWhiteArea{
    padding: 75px 75px 0 75px;
}

@media only screen and (max-width:767px) {
    #closed-loop-recycling .bgGrayFull::before {
      top: calc(250vw / 7.5);
    }
    
    #closed-loop-recycling #box01{
        padding-bottom:calc(100vw / 7.5);
    }

    #closed-loop-recycling #box01 .bgPinkArea{
        padding: calc(60vw / 7.5) calc(40vw / 7.5);
        margin-bottom:  calc(80vw / 7.5);
    }

    #closed-loop-recycling #box01 .bgPinkArea p{
        font-size: calc(30vw / 7.5);
    }

    #closed-loop-recycling #box01 .bgPinkArea + p{
        margin-bottom: calc(60vw / 7.5);
        font-size: calc(28vw / 7.5);
    }

    #closed-loop-recycling #box01 .column02{
        padding:calc(60vw / 7.5) calc(40vw / 7.5);
        gap: calc(40vw / 7.5) 0;
    }

    #closed-loop-recycling #box01 .column02 .imgBl{
        width: 100%;
        max-width: 490px;
    }

    #closed-loop-recycling #box01 .column02 + .column02{
        margin: calc(60vw / 7.5) 0 calc(80vw / 7.5);
    }

    #closed-loop-recycling #box01 .column02 .btn{
        width: auto;
        max-width: inherit;
        margin: calc(25vw / 7.5) auto 0;
    }

    #closed-loop-recycling #box01 .column02 .btn a{
        display: block;
        line-height: calc(80vw / 7.5);
    }

    #closed-loop-recycling #box01 .bgWhiteArea{
        padding: calc(60vw / 7.5) calc(40vw / 7.5) 0;
    }    
    
}