/*------------------
This style sheet for sustainability page
---------------------------------------*/

.sustainability-outer-wrapper{
    background: #EFEFEF;
}
.sustainability-original-content{
    padding-top:100px;
}
  
/*------
Section: Sustainability First View
-----------*/
.sustainability-fv{
    margin-bottom:150px;/* space between the sections*/
}

.sustainability-fv-content{
    width: 576px;
    height: fit-content;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    transform: translateY(calc(-87%)) translateX(0px);
    padding: 5rem 4rem;
    box-sizing: border-box;
}
.sustainability-fv-content img{
    height:30px;
    margin-bottom:12px;
}

.sustainability-fv-content-p1{
    font-size:14px;
    margin-bottom: 3.5rem;
    font-weight:normal;
}

.sustainability-fv-content-p2{
    font-size:14px;
    /*margin-bottom:50px;*/
}

@media (min-width: 1600px) {/* 1600px以上 */
    .sustainability-fv-content{
        width:545px;
        height:fit-content;
        background-color:rgba(255, 255, 255, 0.5);
        position:absolute;
        transform: translateY(calc(-88%)) translateX(0px);
        padding:4rem 5rem;
        box-sizing: border-box;
    }

}

@media screen and (max-width: 1200px){/* 1200px以下 */
    .sustainability-fv-content{
        width:580px;
        line-height: 1.8;
    }
}

@media screen and (max-width: 1000px){/* 1000px以下 */
    .sustainability-fv-content{
        width:580px;
        line-height: 1.8;
        
    }
    .sustainability-fv-content-p2 {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 950x){/* 950px以下 */
    .sustainability-fv-content{
        width:580px;
        line-height: 1.8;
        transform: translateY(calc(-31vw)) translateX(0px);
    }
    .sustainability-fv-content-p2 {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-fv{
        margin-bottom:-20px;/* space between the sections*/
    }
    
    .sustainability-fv-content{
        width:80vw;
        margin:auto;
        background-color:rgba(255, 255, 255, 0.5);
        position: static;
        transform: translateY(-110px) translateX(0px);
        padding:2rem 5%;
        box-sizing: border-box;
        text-align:center;
        border-radius: 8px;
        line-height: 2.2;
    }
    .sustainability-fv-content img{
        height:1.25rem;
        margin-bottom:0.8rem;
        padding:0 1rem;
    }
    .sustainability-fv-content-p1{
        font-size:12px;
        margin-bottom:40px;
    }
    .sustainability-fv-content-p2{
        font-size:14px;
        margin-bottom:0px;
        text-align: left;
    }
}


/*------
Section: Action 01
-----------*/

/*--- Title Area --*/
.sustainability-action-01-title{
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:400px;
    display:grid;
    grid-template-columns: 1fr 1px 1fr;
    padding:5rem;
    box-sizing: border-box;
    place-content: center;;
}

/* WebPをサポートしているブラウザの場合 */
@supports (background-image: url('image.webp')) {
    .sustainability-action-01-title {
        background-image: url('../images/sustainability/action-01-title-bg.webp');
    }
  }

  /* WebPをサポートしていないブラウザの場合 */
@supports not (background-image: url('image.webp')) {
    .sustainability-action-01-title {
        background-image: url('../images/sustainability/action-01-title-bg.png');
    }
  }

.divider {
    background-color: rgb(254, 254, 254); /* 線の色 */
  }

.sustainability-action-01-title-inner,
.sustainability-action-01-description{
    padding:0 3rem;
    place-self: center;
}

.sustainability-action-01-title-inner img{
    height:30px;
    /*margin-bottom:2rem;*/

}
.sustainability-action-01-title-inner p{
    color:#fff;
    font-size:13px;
}

.sustainability-action-01-description{
    color:#fff;
    font-size:14px;
    max-width:650px;
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-01-title-inner,
    .sustainability-action-01-description{
        padding:0 1rem;
        place-self: center;
    }

    .sustainability-action-01-title{
        padding:2rem;
    }

    .sustainability-action-01-content-01, .sustainability-action-01-content-02 {
        padding: 50px 3rem;
    }

}


@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-01-title{
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:510px;
        display:grid;
        grid-template-columns: 1fr;
        padding:3rem;
        box-sizing: border-box;
        place-content: center;;
    }

    /* WebPをサポートしているブラウザの場合 */
    @supports (background-image: url('image.webp')) {
        .sustainability-action-01-title {
            background-image: url('../images/sustainability/action-01-title-bg-mobile.webp');
        }
    }

  /* WebPをサポートしていないブラウザの場合 */
    @supports not (background-image: url('image.webp')) {
        .sustainability-action-01-title {
            background-image: url('../images/sustainability/action-01-title-bg-mobile.png');
        }
    }


    
    
    .sustainability-action-01-title-inner,
    .sustainability-action-01-description{
        padding:0 0rem;
        place-self: center;
    }
    
    .sustainability-action-01-title-inner img{
        width:45vw;
        margin-bottom:2rem;
        margin-top:-3rem;
    }
    .sustainability-action-01-title-inner p{
        color:#fff;
        font-size:13px;
        text-align:center;
        margin-top:-1.2rem;
        margin-bottom:3em;
        padding:0;
    }
    
    .sustainability-action-01-description{
        color:#fff;
        font-size:14px;
        width:fit-content;
    }
}

/*-- Content Area --*/
.sustainability-action-01-content-01,
.sustainability-action-01-content-02{
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 7rem;
    
}

.sustainability-action-01-content-01-left{
    margin-top:10%;
}

.sustainability-action-01-content-01-right,
.sustainability-action-01-content-02-left{
    max-width:500px;
    margin:auto;
    text-align: center;
    align-items: end; /* --------------------------------------------グリッド内のすべての要素を下揃え　これ効いていないですね */

}

.sustainability-action-01-content-01-right img,
.sustainability-action-01-content-02-left img{
    height:60px;
    padding-top:2rem;
    margin-bottom:5rem;
}

.sustainability-action-01-content-01-right img{
    margin-left: 2.5rem;
}
.sustainability-action-01-content-02-left img{
    margin-right: 3rem;
}



.sustainability-action-01-content-01-right p,
.sustainability-action-01-content-02-left p{
    text-align: left;
    font-size:14px;
}

.sustainability-action-01-content-01-right p{
    margin-left: 5rem;
}
.sustainability-action-01-content-02-left p{
    margin-right: 4rem;
}

/*
.sustainability-action-02-title{
    background-image: url('../images/sustainability/action-02-title-bg.png') !important;
}
*/



@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-01-content-01, .sustainability-action-01-content-02 {
        padding: 50px 10%;
        gap:2rem;
    }

    .sustainability-action-01-content-01-left{
        margin-top:calc(0vw);
    }

    .sustainability-action-01-content-01-right img,
    .sustainability-action-01-content-02-left img {
        height: 25px;
        padding-top: 0rem;
        margin-bottom: 2rem;
    }
}


@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-01-content-01,
    .sustainability-action-01-content-02{
        display:grid;
        grid-template-columns: 1fr;
        padding: 50px 10%;     
    }

    .sustainability-action-01-content-02{
        display:flex;
        flex-direction: column-reverse;
        padding-bottom:80px;
    }
   

    .sustainability-action-01-content-01-left{
        margin-top: calc(-26%);
    }

    .sustainability-action-01-content-01-right,
    .sustainability-action-01-content-02-left{
        max-width:380px;
        margin:auto;
        text-align: center;
        align-items: end; 
    }

    .sustainability-action-01-content-01-right img,
    .sustainability-action-01-content-02-left img{
        height:45px;
        margin-top:2rem;
        margin-bottom:2rem;
        padding-top:1.4rem;
        margin-right:0;
        margin-left:0;
    }

    .sustainability-action-01-content-01-right p,
    .sustainability-action-01-content-02-left p{
        text-align: left;
        font-size:14px;

    }

    .sustainability-action-01-content-01-right p{
        margin-left: 0;

    }

    .sustainability-action-01-content-02-left p{
        margin-right: 0;
    }
}

@media screen and (max-width: 500px){
    .sustainability-action-01-content-01-left{
        margin-top: calc(-38%);
    }

}

/*------
Section: Action 02
-----------*/


/*--- Title Area --*/
.sustainability-action-02-title{
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:400px;
    display:grid;
    grid-template-columns: 1fr 1px 1fr;
    padding:5rem;
    box-sizing: border-box;
    place-content: center;;
}
    /* WebPをサポートしているブラウザの場合 */
    @supports (background-image: url('image.webp')) {
        .sustainability-action-02-title {
            background-image: url('../images/sustainability/action-02-title-bg.webp');
        }
    }

    /* WebPをサポートしていないブラウザの場合 */
    @supports not (background-image: url('image.webp')) {
        .sustainability-action-02-title {
            background-image: url('../images/sustainability/action-02-title-bg.png');
        }
    }

.divider {
    background-color: rgb(254, 254, 254); /* 線の色 */
  }

.sustainability-action-02-title-inner,
.sustainability-action-02-description{
    padding:0 3rem;
    place-self: center;
}

.sustainability-action-02-description{
    font-weight:normal;
    font-size:14px;
}

.sustainability-action-02-title-inner img{
    height:30px;
    /*margin-bottom:2rem;*/

}
.sustainability-action-02-title-inner p{
    color:#fff;
    font-size:13px;
}

.sustainability-action-02-description{
    color:#fff;
    font-size:14px;
    width:400px;
   
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-02-title-inner,
    .sustainability-action-02-description{
        padding:0 1rem;
        place-self: center;
    }

    .sustainability-action-02-title{
        padding:2rem;
    }

    .sustainability-action-02-content-01, .sustainability-action-02-content-02 {
        padding: 50px 3rem;
    }

}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-02-title{
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:90vw;
        display:grid;
        grid-template-columns: 1fr;
        padding:3rem;
        box-sizing: border-box;
        place-content: center;;
    }

        /* WebPをサポートしているブラウザの場合 */
        @supports (background-image: url('image.webp')) {
            .sustainability-action-02-title {
                background-image: url('../images/sustainability/action-02-title-bg-mobile.webp');
            }
        }

        /* WebPをサポートしていないブラウザの場合 */
        @supports not (background-image: url('image.webp')) {
            .sustainability-action-02-title {
                background-image: url('../images/sustainability/action-02-title-bg-mobile.png');
            }
        }
    
    .sustainability-action-02-title-inner,
    .sustainability-action-02-description{
        padding:0 0rem;
        place-self: center;
    }
    
    .sustainability-action-02-title-inner img{
        width:45vw;
        margin-bottom:2rem;
        margin-top:-11rem;
    
    }
    .sustainability-action-02-title-inner p{
        color:#fff;
        font-size:13px;
        text-align:center;
        margin-bottom:3em;
        padding:0;
    }
    
    .sustainability-action-02-description{
        color:#fff;
        font-size:12px;
        width:fit-content;
        margin-top:-7rem   
    }
    
}

/*-- Content Area --*/
.sustainability-action-02-content{
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 7rem;
    gap:2rem;
    
}

.sustainability-action-02-content-left{
    max-width: 450px;
    margin: auto;
    font-size: 14px;
    /* padding-left: 50px; */
    margin-top: 80px;
}

.sustainability-action-02-content-right{
    max-width:500px;
    margin:auto;
    text-align: center;
    align-items: end;
    margin-top: 47px;
}

.sustainability-action-02-content-right img{
    width:100%;
    margin-bottom:5rem;
}

.sustainability-action-02-content-right p{
    text-align: left;
    font-size:14px;
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-02-content {
        padding: 50px 10%;
        gap:2rem;
    }

    .sustainability-action-02-content-left{
        margin-top:calc(0vw);
    }

    .sustainability-action-02-content-right img {
        width: 100%;
        /*padding-top: 5rem;*/
        margin-bottom: 5rem;
        margin-top: -45px;
    }
    .sustainability-action-02-content-left{
        max-width: fit-content;
        margin: auto;
        margin-top: 35px;
        font-size: 14px;
        padding: 0rem;
    }

   
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-02-content{
        display: flex;
        flex-direction: column-reverse;
        padding: 50px 10%;
        margin-top:-200px; 
        margin-bottom:60px;
        gap:0; 
    }
    
    .sustainability-action-02-content-left{
        max-width:450px;
        margin:auto;
        margin-top:-20px;
        font-size:14px;
        padding-left:0px;
    }
    
    .sustainability-action-02-content-right{
        max-width:500px;
        margin:auto;
        text-align: center;
        align-items: end; 
        margin-top:calc(-12vw);
    
    }
    
    .sustainability-action-02-content-right img{
        width:100%;
        padding-top:2rem;
        margin-bottom:5rem;
        margin-top: 0px;
    }
    
    .sustainability-action-02-content-right p{
        text-align: left;
        font-size:14px;
    }
}


/*------
Section: Action 03
-----------*/

/*--- Title Area --*/
.sustainability-action-03-title{
    background-image: url('../images/sustainability/action-03-title-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:400px;
    display:grid;
    grid-template-columns: 1fr 1px 1fr;
    padding:5rem;
    box-sizing: border-box;
    place-content: center;;
}

/* WebPをサポートしているブラウザの場合 */
@supports (background-image: url('image.webp')) {
    .sustainability-action-03-title {
        background-image: url('../images/sustainability/action-03-title-bg.webp');
    }
}

/* WebPをサポートしていないブラウザの場合 */
@supports not (background-image: url('image.webp')) {
    .sustainability-action-03-title {
        background-image: url('../images/sustainability/action-03-title-bg.png');
    }
}

.divider-black {
    background-color: rgb(0, 0, 0); /* 線の色 */
  }

.sustainability-action-03-title-inner,
.sustainability-action-03-description{
    padding:0 3rem;
    place-self: center;
}

.sustainability-action-03-title-inner img{
    height:30px;
    /*margin-bottom:2rem;*/
}

.sustainability-action-03-title-inner p{
    color:#000000;
    font-size:13px;
}

.sustainability-action-03-description{
    color:#000;
    font-size:14px;
    width:400px;
    padding: 5rem 3rem;
    font-weight:normal;
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-03-title-inner,
    .sustainability-action-03-description{
        padding:0 1rem;
        place-self: center;
    }

    .sustainability-action-03-title{
        padding:2rem;
    }

    .sustainability-action-03-content-01, .sustainability-action-03-content-02 {
        padding: 50px 3rem;
    }

}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-03-title{
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:95vw;
        display:grid;
        grid-template-columns: 1fr;
        padding:3rem;
        box-sizing: border-box;
        place-content: center;;
    }

    /* WebPをサポートしているブラウザの場合 */
    @supports (background-image: url('image.webp')) {
        .sustainability-action-03-title {
            background-image: url('../images/sustainability/action-03-title-bg-mobile.webp');
        }
    }

    /* WebPをサポートしていないブラウザの場合 */
    @supports not (background-image: url('image.webp')) {
        .sustainability-action-03-title {
            background-image: url('../images/sustainability/action-03-title-bg-mobile.png');
        }
    }
    
    .sustainability-action-03-title-inner,
    .sustainability-action-03-description{
        padding:0 0rem;
        place-self: center;
    }
    
    .sustainability-action-03-title-inner img{
        width:45vw;
        margin-bottom:2rem;
        margin-top:-12rem;
    }
    
    .sustainability-action-03-title-inner p{
        color:#000000;
        font-size:13px;
        text-align:center;
        
        margin-bottom:3em;
        padding:0;
    }
    
    .sustainability-action-03-description{
        color:#000;
        font-size:12px;
        width:fit-content;
        padding: 0;
        margin-top:-10rem;  
    }
}

/*-- Content Area --*/
.sustainability-action-03-content{
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 7rem;  
}

.sustainability-action-03-content-right{
    max-width: 450px; 
    margin: auto;
    margin-top: 80px;
    font-size: 14px;
    padding: 2rem;
    padding-right: 0;
}

.sustainability-action-03-content-left{
    max-width:500px;
    margin:auto;
    text-align: center;
    align-items: end; 
    margin-top:12%;
}

.sustainability-action-03-content-left img{
    width:100%;
    padding-top:2rem;
    margin-bottom:5rem;
}

.sustainability-action-03-content-right p{
    text-align: left;
    font-size:14px;
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-03-content {
        padding: 50px 10%;
        gap:2rem;
    }

    .sustainability-action-03-content-left{
        margin-top:calc(0vw);
    }

    .sustainability-action-03-content-right img {
        width: 100%;
        padding-top: 5rem;
        margin-bottom: 5rem;
    }
    .sustainability-action-03-content-right {
        max-width: fit-content;
        margin: auto;
        margin-top: 50px;
        font-size: 14px;
        padding: 0rem;
    }
   
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-03-content{
        display:flex;
        flex-direction: column;
        padding: 50px 10%;
        margin-top:-240px; 
        margin-bottom:20px;
    } 
    
    .sustainability-action-03-content-right{
        max-width:450px;
        margin:auto;
        margin-top:-70px;
        font-size:14px;
        padding:0.5rem;
    }
    
    .sustainability-action-03-content-left{
        max-width:500px;
        margin:auto;
        text-align: center;
        align-items: end; 
        margin-top:calc(-12vw);
    }
    
    .sustainability-action-03-content-left img{
        width:100%;
        padding-top:2rem;
        margin-bottom:5rem;
    }
    
    .sustainability-action-03-content-right p{
        text-align: left;
        font-size:14px;
    }
}



/*------
Section: Action 04
-----------*/

/*--- Title Area --*/
.sustainability-action-04-title{
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:450px;
    display:grid;
    grid-template-columns: 1fr 1px 1fr;
    padding:5rem;
    box-sizing: border-box;
    place-content: center;;
}

/* WebPをサポートしているブラウザの場合 */
@supports (background-image: url('image.webp')) {
    .sustainability-action-04-title {
        background-image: url('../images/sustainability/action-04-title-bg.webp');
    }
}

/* WebPをサポートしていないブラウザの場合 */
@supports not (background-image: url('image.webp')) {
    .sustainability-action-04-title {
        background-image: url('../images/sustainability/action-04-title-bg.png');
    }
}

.divider {
    background-color: rgb(254, 254, 254); /* 線の色 */
  }

.sustainability-action-04-title-inner,
.sustainability-action-04-description{
    padding:0 3rem;
    place-self: center;
}

.sustainability-action-04-description{
    font-weight:normal;
    font-size:14px;

}

.sustainability-action-04-title-inner img{
    height:30px;
    /*margin-bottom:2rem;*/
}

.sustainability-action-04-title-inner p{
    color:#fff;
    font-size:13px;
}

.sustainability-action-04-description{
    color:#fff;
    font-size:14px;
    max-width:650px;
    padding: 5rem 3rem;
   
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-04-title-inner,
    .sustainability-action-04-description{
        padding:0 1rem;
        place-self: center;
    }

    .sustainability-action-04-title{
        padding:2rem;
    }

    .sustainability-action-04-content-01, .sustainability-action-04-content-02 {
        padding: 50px 3rem;
    }

}



@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-04-title{
        background-repeat: no-repeat;
        background-size: cover;
        width:100%;
        height:95vw;
        display:grid;
        grid-template-columns: 1fr;
        padding:3rem;
        box-sizing: border-box;
        place-content: center;;
    }

    /* WebPをサポートしているブラウザの場合 */
    @supports (background-image: url('image.webp')) {
        .sustainability-action-04-title {
            background-image: url('../images/sustainability/action-04-title-bg-mobile.webp');
        }
    }

    /* WebPをサポートしていないブラウザの場合 */
    @supports not (background-image: url('image.webp')) {
        .sustainability-action-04-title {
            background-image: url('../images/sustainability/action-04-title-bg-mobile.png');
        }
    }
    
    .sustainability-action-04-title-inner,
    .sustainability-action-04-description{
        padding:0 0rem;
        place-self: center;
    }
    
    .sustainability-action-04-title-inner img{
        width:45vw;
        margin-bottom:2rem;
        margin-top:-12rem;
    }
    
    .sustainability-action-04-title-inner p{
        color:#fff;
        font-size:13px;
        text-align:center;
        
        margin-bottom:3em;
        padding:0;
    }
    
    .sustainability-action-04-description{
        color:#fff;
        font-size:12px;
        width:fit-content;
        padding: 0;
        margin-top:-10rem;  
    }
}

/*-- Content Area --*/
.sustainability-action-04-content{
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 7rem;  
}

.sustainability-action-04-content-left{
    max-width: 450px;
    margin: auto;
    margin-top: 15%;
    font-size: 14px;
    padding: 2rem;
    padding-left: 0;
}

.sustainability-action-04-content-right{
    max-width:500px;
    margin:auto;
    text-align: center;
    align-items: end; 
    margin-top:12%;

}

.sustainability-action-04-content-right img{
    width:100%;
    /*padding-top:2rem;*/
    margin-bottom:5rem;
}

.sustainability-action-04-content-right p{
    text-align: left;
    font-size:14px;
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-action-04-content {
        padding: 50px 10%;
        gap: 2rem;
    }

    .sustainability-action-04-content-left {
        max-width: fit-content;
        margin: auto;
        margin-top: 70px;
        font-size: 14px;
        padding: 0rem;
    }

    .sustainability-action-04-content-right img {
        width: 100%;
       /* padding-top: 5rem;*/
        margin-bottom: 4rem;
    }
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-action-04-content{
        display:flex;
        flex-direction: column-reverse;
        padding: 50px 10%;
        margin-top:-240px; 
        margin-bottom:20px;
    } 
    
    .sustainability-action-04-content-left{
        max-width:450px;
        margin:auto;
        margin-top:-70px;
        font-size:14px;
        padding:0;
        
    }
    
    .sustainability-action-04-content-right{
        max-width:fit-content;
        margin:auto;
        text-align: center;
        align-items: end; 
        margin-top:calc(-12vw);
        
    }
    
    .sustainability-action-04-content-right img{
        width:100%;
        padding-top:2rem;
        margin-bottom:5rem;
    }
    
    .sustainability-action-04-content-left p{
        text-align: left;
        font-size:14px;
        padding:0.5rem;
    }
    
}


/*------
Section: Other Action
-----------*/
.sustainable-other-action{
    padding-bottom:100px;
}
/*--- Title Area --*/
.sustainability-other-action-title{
    background:#ABA99E;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:350px;
    padding:5rem;
    box-sizing: border-box;
    display:grid;
    place-content: center;   
}

.sustainability-other-action-title img{
    height:40px;
    width:auto;
    margin-bottom:2rem;
    margin:auto;
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-other-action-title img{
        height:30px;
    }
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-other-action-title{
         background:#ABA99E;
         background-repeat: no-repeat;
         background-size: cover;
         width:100%;
         height:80vw; 
         padding:5rem;
         box-sizing: border-box;
         display:grid;
         place-content: center;   
     }
     
     .sustainability-other-action-title img{
         height:40px;
         width:auto;
         margin-bottom:2rem;
         margin:auto;
         margin-top:-7rem;
     }
}

/*-- Content Area --*/
.sustainability-other-action-content-01,
.sustainability-other-action-content-02{
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 7rem;
}

.other-action-content-01-left,
.other-action-content-02-right{
    max-width:380px;
    margin:auto;
    text-align: center;
}

.other-action-content-01-right{
    margin-top:10%;
}

.other-action-content-01-left p,
.other-action-content-02-right p{
    text-align: left;
    font-size:14px;
}

.other-action-content-01-left h4,
.other-action-content-02-right h4{
    text-align: center;
    font-size:16px;
    margin-bottom:2rem;
}

.other-action-content-01 img,
.other-action-content-02 img{
    width:80%;
    margin:auto;
    display:block;
}

@media screen and (max-width: 900px) {/* 900px以下 */
    .sustainability-other-action-content-01,
    .sustainability-other-action-content-02{
        padding: 50px 10%;
        gap: 2rem;
    }
    .other-action-content-01-right{
        margin-top:calc(0vw);
    }
    .other-action-content-01 img,
    .other-action-content-02 img{
        width:100%;
        margin:auto;
        display:block;
    }
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-other-action-wrapper{
        margin-top:-220px;
    }
    .sustainability-other-action-content-01{       
        display:flex;
        flex-direction: column-reverse;
        padding: 50px 10%;
    }

    .sustainability-other-action-content-02{      
        display:flex;
        flex-direction: column;
        padding: 50px 10%;
        margin-top:-100px;
    }
    
    .other-action-content-01-right{
        margin-top:calc(-10vw);
    }
  
    .other-action-content-01-left,
    .other-action-content-02-right{
        max-width:fit-content;
        margin:auto;
        text-align: center;
        align-items: end;
        margin-top:1.5rem; 
    }

    .other-action-content-01 img,
    .other-action-content-02 img{
        width:100%;
        margin:auto;
        display:block;
        margin-top:2rem;
        
    }

    .other-action-content-01-left h4,
    .other-action-content-02-right h4{
        text-align: center;
        font-size:14px;
        margin-bottom:2rem;
    }

    .other-action-content-01-left p,
    .other-action-content-02-right p{
        text-align: left;
        font-size:14px;
    }
}





/*------
Section: Upcycle
-----------*/
.sustainability-upcycle{
    padding-bottom:100px;
}

.sustainability-upcycle-content-item a:hover{
    opacity:0.7;
}

/* title decoration: PC only */
@media screen and (max-width: 768px){/* 768px以下 */

    /*スマホ時タイトルデコレーション*/
    .sustainability-upcycle-title h2 {
        position: relative;
        font-size: 1.5rem;
        text-align: center;
        margin: 20px 0;
    }

    .sustainability-upcycle-title h2::before,
    .sustainability-upcycle-title h2::after {
        content: "";
        display: block;
        position: absolute;
        height: 1px;
        background-color: #000;
        width: 50px;
        top: 50%;
        /* テキストの高さに合わせる */
        transform: translateY(-50%);
        /* 高さを中央揃え */
    }

    .sustainability-upcycle-title h2::before {
        left: 70px;
    }

    .sustainability-upcycle-title h2::after {
        right: 70px;
    }
}

/* Content */
.sustainability-upcycle-content-wrapper {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr)); */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    max-width: calc(2000px* 0.8);
    margin: auto;
    padding: 0 5%;
    width: 80vw;
    }

.sustainability-upcycle-content-item img{
    width:100%;
    margin-bottom:1rem;
}
.sustainability-upcycle-content-item p{
    text-align:center;
}

.sustainability-upcycle-content-item a{
    color:black;
}

@media screen and (max-width: 900px){/* 900px以下 */
    .sustainability-upcycle-content-wrapper{
        grid-template-columns: 1fr 1fr 1fr;
        padding:0 5%;    
    }
}

@media screen and (max-width: 768px){/* 768px以下 */
    .sustainability-upcycle-content-wrapper{
        padding:0 5%;
        margin-top:-2rem;
        grid-template-columns: 1fr;
    }
}


/*------
Section: Contact
トップページのコンタクトボタンと共通
-----------*/
.sustainability-contact-btn{
    background: #fff;
    padding-top:70px;
    padding-bottom:50px;
    padding:8rem 0 5rem;
}

@media screen and (max-width: 768px) {
    .sustainability-contact-btn{
        padding: 6.5rem 0 3rem;
    }
}


@media (min-width: 520px) {
    .sustainability-upcycle-title h4 img {
        height: 30px;
        width: auto;
    }
}

@media screen and (max-width: 768px) {
    .sustainability-upcycle-title h4 {
        position: relative;
        font-size: 1.5rem;
        text-align: center;
        margin: 20px 0;
    }
    .sustainability-upcycle-title h4 img {
        height: 20px;
        width: auto;
    }
}

@media screen and (max-width: 768px) {
    .sustainability-upcycle-title h4::before {
        left: 70px;
    }
}
@media screen and (max-width: 768px) {
    .sustainability-upcycle-title h4::after {
        right: 70px;
    }
}
@media screen and (max-width: 768px) {
    .sustainability-upcycle-title h4 {
        position: relative;
        font-size: 1.5rem;
        text-align: center;
        margin: 20px 0;
    }
}
@media screen and (max-width: 768px) {
    .sustainability-upcycle-title h4::before, .sustainability-upcycle-title h4::after {
        content: "";
        display: block;
        position: absolute;
        height: 1px;
        background-color: #000;
        width: 50px;
        top: 50%;
        transform: translateY(-50%);
    }
}