@charset "UTF-8";

#mv-area h2 {
	max-width: 60%;
}

.iziModal{z-index: 99999 !important; overflow: scroll;}
#contents{background: #f4f1ed;}
#contents picture{position: relative;}
#contents .inner{max-width: calc(1300px + 16%); width: 100%; margin: 0 auto; padding: 0 8%;}
#contents figure,
#contents img{vertical-align: bottom;}

.lead_wrap{text-align: center;}
.lead_wrap h2{font-size: 28px; letter-spacing: 4px;}
.lead_wrap h2::after{content: ""; width: 50px; height: 1px; display: block; background: #a78c5c; margin: 40px auto;}
.lead_wrap p{font-size: 20px; line-height: 2.2;}

@media screen and (max-width:1200px){
    .lead_wrap h2{letter-spacing: 2px;}
    .lead_wrap p{font-size: 18px;}
}
@media screen and (max-width: 900px) {
    .imgcap.white, figure figcaption.white {bottom: 0;}
}
@media screen and (max-width:640px){
    .lead_wrap h2{font-size: 20px; line-height: 1.5;}
    .lead_wrap h2::after{margin: 25px auto;}
    .lead_wrap p{font-size: 15px; margin-left: -10px; margin-right: -10px;}
}

/*mainVisual
-------------------------------------------*/
#mainVisual{position: relative;}
#mainVisual picture img{width: 100%;}
#mainVisual .mv_text{position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; text-align: center;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
}
#mainVisual .mv_text img{display: inline-block; max-width: 50vw; width: 100%;}

.effectFU.is-visible {margin-bottom: -4px;}

@media screen and (max-width:640px){
    #mainVisual .imgcap{transform: translateY(100%); bottom: 0; color: #000;}
}


/* environment_lead
-------------------------------------------*/
#environment_lead{padding: 120px 0 0; position: relative;}
.environment_lead_wrap{text-align: center; background: rgba(223,214,208,0.7); position: relative; z-index: 2; padding: 60px 20px;}
.environment_lead_wrap::before{content: ""; position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
    border: 1px solid #443b3a;
}
.environment_lead_wrap h2{color: #443b3a; font-size: 35px; letter-spacing: 7px; line-height: 1.8; margin-bottom: 20px;}
.environment_lead_wrap p{color: #443b3a; font-size: 18px; letter-spacing: 2px; line-height: 2.2;}

@media screen and (max-width:640px){
    #environment_lead{padding: 60px 0 40px;}
    .environment_lead_wrap{padding: 40px 30px;}
    .environment_lead_wrap h2{font-size: 20px; letter-spacing: 0;}
    .environment_lead_wrap p{font-size: 14px; letter-spacing: 0;}
}


/*low_carbon
-------------------------------------------*/
#low_carbon{padding: 250px 0 0;
    background: url(../images/environment/back_01.png) no-repeat left top; background-size: 30vw; mix-blend-mode: multiply;
}
.low_carbon_wrap{background: url(../images/environment/back_04.jpg) no-repeat center center; background-size: cover;
    padding: 70px 80px; text-align: center;
}
.low_carbon_wrap h3{color: #fff; font-size: 28px; letter-spacing: 4px; line-height: 2; margin-bottom: 80px;}
.low_carbon_wrap h4{color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;
    font-size: 28px; padding: 15px 0; margin-bottom: 60px;
}
.low_carbon_wrap figure,
.low_carbon_wrap figure img{width: 100%;}
.low_carbon_wrap figure figcaption{position: static; text-align: left; margin-top: 5px;}


@media screen and (max-width:640px){
    #low_carbon{padding: 80px 0 0;}

    .low_carbon_wrap{padding: 40px 20px;}
    .low_carbon_wrap h3{font-size: 18px; letter-spacing: 0; margin-bottom: 30px;}
    .low_carbon_wrap h4{font-size: 17px; margin-bottom: 30px;}
}


/*equipment_area
-------------------------------------------*/
#equipment_area{padding: 320px 0 200px;}

.equipment_content{margin-bottom: 200px;}
.equipment_content h3{text-align: center; font-size: 35px; letter-spacing: 4px; margin-bottom: 90px;}
.equipment_list{display: flex; flex-wrap: wrap; justify-content: center;}
.equipment_box{width: calc(100% / 3); padding: 0 15px; margin-bottom: 40px;}
.equipment_box h4{background: #a78c5c; color: #fff; text-align: center; font-size: 28px; padding: 10px 5px; margin-bottom: 20px;}
.equipment_box p{font-size: 20px; text-align: center;}


.about_area{margin-bottom: 120px;}
.about_area h3{position: relative; text-align: center; margin-bottom: 60px;}
.about_area h3 span{position: relative; z-index: 2; background: #f4f1ed; padding: 0 20px; font-size: 35px; letter-spacing: 4px; line-height: 1.5; display: inline-block;}
.about_area h3::after{content: ""; width: 100%; height: 1px; background: #383839; display: block;
    position: absolute; top: 50%; left: 0;
}
.equipment_about_wrap{display: flex; flex-wrap: wrap;}
.equipment_about_text{width: calc(100% - 700px); padding-right: 50px;}
.equipment_about_text p{font-size: 22px; line-height: 2.2;}
.equipment_about_img{width: 700px;}
.equipment_about_img figure,
.equipment_about_img img{width: 100%;}


.standards_area{}
.standards_area h3{position: relative; text-align: center; margin-bottom: 60px;}
.standards_area h3 span{position: relative; z-index: 2; background: #f4f1ed; padding: 0 20px; font-size: 35px; letter-spacing: 4px; line-height: 1.5; display: inline-block;}
.standards_area h3::after{content: ""; width: 100%; height: 1px; background: #383839; display: block;
    position: absolute; top: 50%; left: 0;
}
.standards_wrap{display: flex; flex-wrap: wrap; margin-left: -30px; margin-right: -30px;}
.standards_box{width: calc(50% - 60px); margin: 0 30px; background: #ddd8d5; padding: 40px;}
.standards_box h4{text-align: center; background: #443b3a; color: #fff; font-size: 28px; letter-spacing: 2px; padding: 10px 5px; margin-bottom: 40px;}
.standards_box h5{text-align: center; font-size: 26px; letter-spacing: 2px; color: #a78c5c; margin-bottom: 20px;}
.standards_box p{text-align: center; font-size: 22px;}
.standards_box div + div{margin-top: 50px;}
.standards_box div .anno{font-size: 18px; text-align: left; margin-top: 20px;}

.standards_box ol{counter-reset: number 0;}
.standards_box ol li{background: #fff; font-size: 20px; margin-top: 10px; position: relative; padding: 5px 0 5px 110px;}
.standards_box ol li::before{content: counter(number) " "; counter-increment: number 1;
    position: absolute; left: 0; top: 5px; width: 60px; text-align: center; border-right: 1px solid #383839;
}

.standards_wrap + .anno{text-align: right; font-size: 13px;margin-top: 10px;}

@media screen and (max-width:640px){
    #equipment_area{padding: 80px 0 60px;}

    .equipment_content{margin-bottom: 80px;}
    .equipment_content h3{font-size: 20px; letter-spacing: 2px; line-height: 1.8; margin-bottom: 40px;}
    .equipment_box{width: 100%; padding: 0; margin-bottom: 20px;}
    .equipment_box h4{font-size: 20px; margin-bottom: 10px;}
    .equipment_box p{font-size: 16px;}

    .about_area{margin-bottom: 60px;}
    .about_area h3{margin-bottom: 30px;}
    .about_area h3 span{font-size:22px; letter-spacing: 0; padding: 0 10px;}
    .equipment_about_text{width: 100%; padding-right: 0;}
    .equipment_about_text p{font-size: 16px; line-height: 1.8; margin-bottom: 20px;}
    .equipment_about_img{width: 100%;}

    
    .standards_area h3{margin-bottom: 30px;}
    .standards_area h3 span{font-size:22px; letter-spacing: 0; padding: 0 10px;}
    .standards_wrap{margin: 0;}
    .standards_box{width: 100%; margin: 0; padding: 30px 15px; margin-bottom: 20px;}
    .standards_box h4{font-size: 20px; letter-spacing: 0; margin-bottom: 20px;}
    .standards_box h5{font-size: 18px; margin-bottom: 10px;}
    .standards_box p{font-size: 16px;}
    .standards_box div + div{margin-top: 30px;}
    .standards_box div .anno{font-size: 14px;}
    .standards_box ol li{font-size: 15px; padding: 5px 0 5px 50px;}
    .standards_box ol li::before{width: 35px;}
    .standards_wrap + .anno{margin: 0; text-align: left;}
}


/*initiatives_area
-------------------------------------------*/
#initiatives_area{padding: 140px 0 100px;
    background: linear-gradient(to bottom,  rgba(164,156,154,1) 0%,rgba(138,124,123,1) 100%);
}
#initiatives_area h3{color: #fff; text-align: center; font-size: 25px; letter-spacing: 4px; line-height: 1.8; margin-bottom: 50px;}
#initiatives_area p{color: #fff; text-align: center; line-height: 2.2; letter-spacing: 4px;}

.initiatives_list{display: flex; flex-wrap: wrap; justify-content: center; margin: 80px 0 0;}
.initiatives_box{width: 46%; padding: 0 40px; text-align: center;}
.initiatives_box figure,
.initiatives_box figure img{display: inline;}
.initiatives_box p{font-size: 20px;}

@media screen and (max-width:640px){
    #initiatives_area{padding: 80px 0 40px;}
    #initiatives_area h3{font-size: 20px; letter-spacing: 0; margin-bottom: 30px;}
    #initiatives_area p{line-height: 2; letter-spacing: 0;}
    
    .initiatives_list{margin: 40px 0 0;}
    .initiatives_box{width: 100%; padding: 0; margin-bottom: 20px;}
}