@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

#ft-Contact{ background-color:#fff;}

.com-fv{
    height: calc(100vh - 90px);
}

/*------------------------------------------------------------ 
    LEAD
------------------------------------------------------------*/  

.p-sus-btn{
    display:flex;
    align-items: center;
    justify-content:space-between;
    width:100%;
    height:46px;
    padding:0 20px 1px;
    color:#333;
    font-size: 16px;
    font-weight: bold;
    line-height:1.2;
    letter-spacing: 0.04em;
    overflow: hidden;
    background-color: var(--accent);
    box-sizing: border-box;
    border-radius:5px;
}

.p-sus-btn.is-comingsoon{
    justify-content: center;
    text-align: center;
}

.p-sus-btn.is-comingsoon::after{
    display: none;
}

.p-sus-btn.is-en{
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-family: var(--din);
}

.p-sus-btn::after{
    display: block;
    content:"";
    width:16.25px;
    aspect-ratio: 1;
    margin-left: auto;
    background:url(../../assets/img/icon-arrow.svg) no-repeat;
    background-size:cover;
    transition:filter 0.3s cubic-bezier(0.78, 0.07, 0, 1);
}

.p-sus-btn:hover::after{ filter:invert(1);}

.p-sus-btn.is-pdf::after{
    width:18px;
    background-image:url(../../assets/img/icon-external-link.svg);
}

.p-sus-ttl{
    font-size: 19px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: .04em;
    margin-bottom: 16px;
}

.p-sus-swiper__navi{
    display: flex;
    gap:20px;
}

.p-sus-swiper__navi li{
    display: flex;
    align-items: center;
    justify-content: center;
    width:70px;
    cursor: pointer;
    aspect-ratio: 1;
    box-sizing: border-box;
    border-radius:50%;
    background-color: #F0F0F0;
    transition: background 0.6s cubic-bezier(0, 0, 0, 1);
}

.p-sus-swiper__navi li:hover{
    background-color: var(--accent);
}

.p-sus-swiper__navi li img{
    width:16px;
    height: auto;
}

/*------------------------------------------------------------ 
    SECTION
------------------------------------------------------------*/  

.p-sus-boxWrapper{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.p-sus-box{
    width:calc(714/1480*100%);
}

.p-sus-swiper1{
    margin-top: 60px;
}

.p-sus-sec__item{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    height: auto;
    width:calc(460/1480*100%);
    margin-right: calc(50/1480*100%);
    position: relative;
    z-index: 1;
}

.p-sus-sec__item::before{
    content:"";
    width:100%;
    height: calc(100% - 35px);
    background-color: #F0F0F0;
    border-radius:0 30px 30px 30px;
    position: absolute;
    left: 0;
    bottom:0;
    z-index: -1;
}

.p-sus-sec__head{
    display: inline-flex;
    align-items: center;
    gap:16px;
    height: 70px;
    padding-inline:36px;
    background-color: #fff;
    border-radius: 35px;
    box-sizing: border-box;
    border:1.5px solid #282828;
}

.p-sus-sec__head-num{
    font-family: var(--din);
    font-weight: 500;
    font-size: 36px;
    line-height: .8;
    letter-spacing: -.01em;
    padding-bottom: .05em;
}

.p-sus-sec__head-ttl{
    font-size: 19px;
	line-height: 1;
    font-weight: bold;
    letter-spacing: .04em;
}

.p-sus-sec__txtfield{
    display: flex;
    flex-direction: column;
    flex:1;
    width:100%;
    gap:14px;
    padding:51px 50px;
    box-sizing: border-box;
}

.p-sus-sec__img{
    margin: auto auto 0;
    padding-top: 31px;
}

.p-sus-sec__img.--01{
    width:calc(321/360*100%);
    padding-bottom: 10px;
}

.p-sus-sec__img.--02{
    width:calc(341/360*100%);
    padding-bottom: 20px;
}

.p-sus-sec__img.--03{
    width:calc(295/360*100%);
}

.p-sus-sec__img.--04{
    width:calc(178/360*100%);
    padding-bottom: 40px;
}

.p-sus-sec__img.--05{
    width:calc(327/360*100%);
}

.p-sus-sec__img.--06{
    width:calc(316/360*100%);
}

.p-sus-sec__btnGroup-btn{
    width:100%;
    max-width: 262px;
    margin-top: 50px;
}

.p-sus-num{
    font-family: var(--din);
    font-weight: 500;
    font-size: 46px;
    line-height: .8;
    margin-bottom: 24px;
    letter-spacing: .02em;
}

.p-sus-sec__lead{
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .02em;
    margin-bottom: 8px;
}

.p-sus-sec__txt{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.78;
    letter-spacing: .04em;
}

.p-sus-secWrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 60px;
    position: relative;
}



/*------------------------------------------------------------ 
    POLICY
------------------------------------------------------------*/  

.p-sus-policy{
    width:100%;
    margin-top: 78px;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    color:#fff;
    border-radius: 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.p-sus-policy::before{
	content:"";
	width:100%;
	height: 100%;
	background: url(../img/policy.webp?ver=1) no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top:0;
	z-index: -1;
}

.p-sus-policy__inner{
    display: flex;
    flex-direction: column;
    width:calc(690/1480*100%);
    padding:54px 90px 60px 0;
    box-sizing: border-box;
}

.p-sus-policy__btn{
    width:100%;
    max-width: 230px;
    margin-top: 14px;
}

.p-sus-policy .p-sus-ttl{
    margin-bottom: 12px;
}


/*------------------------------------------------------------ 
    GDS-Index
------------------------------------------------------------*/  

.p-sus-gds{
    width:100%;
    margin: 80px 0 77px;
    padding-block:80px;
    background-color: var(--gray);
}

.p-sus-gds__txt{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.78;
    letter-spacing: 0.04em;
}

.p-sus-gds__img.--01{
    width:calc(381/420*100%);
}

.p-sus-gds__img.--02{
    width:calc(308/420*100%);
}

.p-sus-gds__img.--03{
    width:calc(344/420*100%);
}

.p-sus-gds__sec{
    display: flex;
    flex-direction: column;
    height: auto;
    gap:48px;
    width:calc(410/1480*100%);
    position: relative;
}

.p-sus-gds__secWrapper{
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

/*------------------------------------------------------------ 
    ENviromental 
------------------------------------------------------------*/  

.p-sus-swiper3,
.p-sus-swiper4{
    margin-top: 40px;
}

.p-sus-env__sec{
    width:100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.p-sus-env__img{
    width:calc(970/1480*100%);
}

.p-sus-env__img img{
    border-radius:30px;
}

.p-sus-env__info{
    width:calc(460/1480*100%);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap:30px;
    position: relative;
    padding-block:50px;
}

.p-sus-env__info::before,
.p-sus-env__info::after{
    content:"";
    width:100%;
    height: 2px;
    background: url(../../assets/img/border.svg) repeat-x 0% bottom;
    background-size: auto 2px;
    position: absolute;
    left: 0;
}

.p-sus-env__info::before{
    top:0;
}

.p-sus-env__info::after{
    bottom:0;
}

.p-sus-env__infoHead{
    width:100%;
    display: flex;
    flex-direction: column;
    gap:17px;
}

.p-sus-env__infoHead.--row{
    flex-direction: row;
}

.p-sus-env__infoHead-info{
    flex:1;
    display: flex;
    flex-direction: column;
    gap:17px;
}

.p-sus-env__infoHead-num{
    font-family: var(--din);
    font-weight: 500;
    font-size: 18px;
    line-height: .75;
    letter-spacing: .02em;
}

.p-sus-env__infoHead-en{
    font-family: var(--din);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.p-sus-env__infoHead-ttl{
    font-size: 19px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.p-sus-env__infoHead-img{
    width:calc(115/460*100%);
}

.p-sus-env__infoHead-carbon{
    width:calc(142/460*100%);
}

.p-sus-env__btn{
    width:230px;
    margin-top: 24px;
}

.p-sus-env__mobilityBtn{
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    gap:12px;
}

.p-sus-env__mobilityBtn li{
    width:309px;
}

.p-sus-env__cultureBtn{
    display: flex;
    margin-top: 24px;
    gap:26px;
}

.p-sus-env__cultureBtn li:nth-child(1){
    flex:1;
}

.p-sus-env__cultureBtn li:nth-child(2){
    width:174px;
}

/*------------------------------------------------------------ 
    COMMUNITY 
------------------------------------------------------------*/  

.p-sus-community{
    width:100%;
    padding-block:80px;
    margin-top: 85px;
    background-color: #F0F0F0;
}

.p-sus-community .p-sus-swiper__navi li{
    background-color: #fff;
}

.p-sus-community .p-sus-swiper__navi li:hover{
    background-color: var(--accent);
}

.p-sus-community__item{
    flex:1;
    display: flex;
    flex-direction: column;
    padding:50px;
    border-radius: 30px;
    background-color: #fff;
}

.p-sus-community__itemWrapper{
    display: flex;
    margin-top: 50px;
    gap:50px;
}

.p-sus-community__item-subttl{
    font-family: var(--din);
    font-size: 32px;
    font-weight: 500;
    line-height: .8;
    letter-spacing: 0.02em;
}

.p-sus-community__item-ttl{
    font-size: 19px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
    margin: 28px 0 18px;
}

.p-sus-community__item-btn{
    margin-top: auto;
    padding-top: 24px;
    max-width: 276px;
}

.p-sus-community__item-btn.--min{
    max-width: 230px;
}

.p-sus-community__item.--yellow{
    background-color:var(--accent);
}

.p-sus-community__item.--yellow .p-sus-btn{
    background-color: #fff;
}

.p-sus-carbon__btn {
    width: 100%;
    max-width: 230px;
    margin-top: 40px;
}

/*------------------------------------------------------------ 
    PROGRAM 
------------------------------------------------------------*/  

.p-sus-prg{
    margin-top: 74px;
}

.p-sus-prg__list{
    display: flex;
    flex-wrap: wrap;
    gap:calc(50/1480*100%);
    margin-top: 30px;
}

.p-sus-prg__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width:230px;
    height: 46px;
    margin:46px auto 0;
    font-size: 18px;
    letter-spacing: .02em;
    font-weight: 500;
    font-family: var(--din);
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--accent);
    appearance: none;
    border:none;
}

.com-NewsItem:nth-child(n+4){
    display: none;
}

/*------------------------------------------------------------ 
    SUPPLIER 
------------------------------------------------------------*/  

.p-sus-supp{
    width:100%;
    margin-top: 80px;
    padding:80px 0 100px;
    background-color: #F0F0F0;
}

.p-sus-supp__inner{
    display: flex;
    justify-content: space-between;
}

.p-sus-supp__head{
    width:460px;
}

.p-sus-supp .com-SectionHeader__title{
    line-height: 1.5;
    margin-top: -.2em;
    padding-bottom: .6em;
}

.p-sus-supp__head-txt{
    line-height: 1;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .04em;
    margin-top: -1em;
}

.p-sus-supp__menuWrapper{
    flex:1;
    max-width:970px;
    display: flex;
    flex-direction: column;
    gap:30px;
}

.p-sus-supp__menu-trigger{
    display: flex;
    align-items: center;
    width:100%;
    height: 70px;
    font-size: 19px;
    font-weight: bold;
    color:#333;
    font-family: var(--ja);
    letter-spacing: .04em;
    cursor: pointer;
    background:none;
    appearance: none;
    border:none;
    padding:0 0 0 40px;
    gap:36px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius:35px;
}

.p-sus-supp__menu-trigger span{
    margin-left: auto;
    font:inherit;
}

.p-sus-supp__menu-trigger svg{
    width:70px;
    height: auto;
}

.p-sus-supp__item{
    display: none;
    width:100%;
    margin-bottom: -28px;
    padding-inline:40px;
    box-sizing: border-box;
}

.p-sus-supp__item li{
    display: flex;
    align-items: center;
    padding-block:4px;
    min-height: 66px;
    gap:20px;
    box-sizing: border-box;
}

.p-sus-supp__item li:not(:last-child){
    padding-bottom: 6px;
    background: url(../../assets/img/border.svg) repeat-x 0% bottom;
    background-size: auto 2px;
}

.p-sus-supp__item-link{
    width:60%;
    color:#282828;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .04em;
    transition: color 0.3s cubic-bezier(0.78, 0.07, 0, 1);
}

.p-sus-supp__item-link svg{
    display: inline-block;
    content:"";
    width:13px;
    height: auto;
    margin-left: 10px;
}

.p-sus-supp__item-link .line{
    transition: stroke 0.3s cubic-bezier(0.78, 0.07, 0, 1);
}

.p-sus-supp__item-link:hover{
    color:var(--accent);
}

.p-sus-supp__item-link:hover .line{
    stroke:var(--accent);
}

.p-sus-supp__item-txt{
    flex:1;
    color:#282828;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .04em;
}

/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

@media screen and (max-width: 1800px) and (min-width: 1081px){


}


@media screen and (max-width: 1024px) and (min-width: 835px){



}


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

    .p-sus-gds__sec:not(:nth-child(3n))::after{
        content:"";
        width:2px;
        height: 100%;
        position: absolute;
        top:0;
        right:calc(66/435*-100%);
        background: url(../img/border.svg) repeat-y 0% 0;
        background-size: 2px auto;
    }

    .p-sus-gds__img{
        margin:auto;
    }

    .p-sus-carbon::before{
        content:"";
        width:2px;
        height: 100%;
        position: absolute;
        left: 50%;
        top:0;
        translate: -50% 0;
        background: url(../img/border.svg) repeat-y 0% 0;
        background-size: 2px auto;
    }

    .p-sus-carbon__side-txtfield{
        max-width:320px;
        flex:1;
    }
}

/* PC */
@media screen and (max-width: 1024px){

    .p-sus-box{
        width:calc(569/828*100%);
    }

    .p-sus-box.--pc-wide{
        width:100%;
    }

    .p-sus-swiper__navi{
        gap:16px;
    }

    .p-sus-btn{
        height:40px;
        padding:0 17px 1px;
        font-size: 14px;
    }
    
    .p-sus-btn.is-en{
        font-size: 15px;
    }
    
    .p-sus-btn::after{
        width:14px;
    }

    .p-sus-ttl{
        font-size: 16px;
        margin-bottom: 12px;
    }

    .p-sus-sec{
        flex-direction: column;
        gap:26px;
        min-height: auto;
    }

    .p-sus-swiper1{
        margin-top: 50px;
    }

    .p-sus-sec__item {
        width: calc(392 / 828 * 100%);
        margin-right: calc(44 / 828 * 100%);
    }

    .p-sus-sec__item::before{
        height: calc(100% - 33px);
        border-radius: 20px;
    }

    .p-sus-sec__head{
        gap:14px;
        height: 66px;
    }

    .p-sus-sec__head-num{
        font-size: 32px;
    }

    .p-sus-sec__txtfield{
        width:100%;
        gap:12px;
        padding:29px 45px 45px;
    }

    .p-sus-sec__head-ttl{
        font-size: 17px;
    }

    .p-sus-sec__txt{
        font-size: 12px;
        line-height: 1.75;
    }

    .p-sus-sec__img{
        padding-top: 32px;
        margin:auto;
    }

    .p-sus-sec__img.--01{
        width:calc(282/302*100%);
        padding-bottom: 0;
    }

    .p-sus-sec__img.--02{
        width:calc(290/302*100%);
        padding-bottom: 0;
    }

    .p-sus-sec__img.--03{
        width:calc(250/302*100%);
        padding-bottom: 0;
    }

    .p-sus-sec__img.--04{
        width:calc(144/302*100%);
        margin-bottom: 0;
        padding-bottom: 7px;
    }

    .p-sus-sec__img.--05{
        width:calc(278/302*100%);
        padding-bottom: 0;
    }

    .p-sus-sec__img.--06{
        width:calc(269/302*100%);
        padding-bottom: 0;
    }

    .p-sus-sec__btnGroup-btn {
        max-width: 237px;
        margin-top: 40px;
    }

    .p-sus-policy{
        margin-top: 46px;
    }
    
    .p-sus-policy__inner{
        width:50%;
        padding:32px 50px 36px 0;
    }
    
    .p-sus-policy__btn{
        max-width: 200px;
        margin-top: 24px;
    }

    .p-sus-policy .p-sus-ttl {
        margin-bottom: 8px;
        font-size: 16px;
    }
    
    .p-sus-gds{
        margin: 50px 0 46px;
        padding:46px 0 50px;
    }
    
    .p-sus-gds__img.--01{
        width:calc(381/420*100%);
    }
    
    .p-sus-gds__img.--02{
        width:calc(308/420*100%);
    }
    
    .p-sus-gds__img.--03{
        width:calc(344/420*100%);
    }
    
    .p-sus-gds__sec{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width:100%;
        padding:0;
        padding: 34px 0 32px;
        background: url(../../assets/img/border.svg) repeat-x 0% bottom;
        background-size: auto 2px;
    }
    
    .p-sus-gds__secWrapper{
        flex-direction: column;
        margin-top: 50px;
        padding-top: 2px;
        background: url(../../assets/img/border.svg) repeat-x 0% top;
        background-size: auto 2px;
    }
    
    .p-sus-gds__txtfield{
        width:50%;
        display: flex;
        flex-direction: column;
    }

    .p-sus-num{
        font-size: 46px;
        padding-bottom: 40px;
        margin-bottom: auto;
    }

    .p-sus-gds__txtfield .com-SectionHeader__title {
        font-size: 1.7rem;
    }

    .p-sus-gds__txt{
        font-size: 12px;
        line-height: 1.75;
    }

    .p-sus-gds__img{
        align-self: center;
    }

    .p-sus-gds__img.--01{
        width:calc(287/828*100%);
        padding-bottom: 0;
        padding-right: 22px;
    }
    
    .p-sus-gds__img.--02{
        width:calc(275/828*100%);
        padding-right: 58px;
    }
    
    .p-sus-gds__img.--03{
        width:calc(289/828*100%);
        padding-right: 52px;
    }
    .p-sus-gds__txtfield header {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .p-sus-carbon{
        flex-direction: column;
    }

    .p-sus-carbon__main{
        width:100%;
        padding-bottom: 38px;
        margin-bottom: 36px;
        background: url(../../assets/img/border.svg) repeat-x 0% bottom;
        background-size: auto 2px;
    }
    
    .p-sus-carbon__btn{
        max-width: 200px;
        margin-top: 20px;
    }
    
    .p-sus-carbon__side{
        width:100%;
        padding-top: 0;
    }
    
    .p-sus-carbon__side-cate{
        margin-bottom: auto;
    }
    
    .p-sus-carbon__side-txtfield{
        width: 50%;
        display: flex;
        flex-direction: column;
    }
    
    .p-sus-carbon__side-img{
        width:134px;
    }

    .p-sus-acc{
        width: 100%;
        min-height: 273px;
        padding:34px 36px 36px;
        border-radius:20px;
    }
    
    .p-sus-accWrapper{
        flex-direction: column;
        gap:23px;
        margin-top: 58px;
        box-sizing: border-box;
    }
    
    .p-sus-acc__en{
        font-size: 27px;
        margin-bottom: 1.1em;
    }
    
    .p-sus-acc__btn{
        width:200px;
    }
    .p-sus-acc__btn2{
        width:248px;
    }
    
    .p-sus-acc__btnWrapper{
        gap:0 19px;
    }

    .p-sus-swiper3,
    .p-sus-swiper4{
        margin-top: 36px;
    }

    .p-sus-env__img{
        width:calc(392/828*100%);
    }

    .p-sus-env__img img{
        border-radius:20px;
    }

    .p-sus-env__info{
        width:calc(392/828*100%);
        gap:24px;
        padding-block:46px;
    }

    .p-sus-env__infoHead-info,
    .p-sus-env__infoHead{
        gap:15px;
    }

    .p-sus-env__infoHead-en{
        font-size: 27px;
    }

    .p-sus-env__infoHead-ttl{
        font-size: 17px;
    }

    .p-sus-env__infoHead-img{
        width:calc(99/460*100%);
    }

    .p-sus-env__infoHead-carbon{
        width:calc(120/392*100%);
    }

    .p-sus-env__btn{
        width:200px;
        margin-top: 20px;
    }

    .p-sus-env__mobilityBtn{
        margin-top: 20px;
        gap:10px;
    }

    .p-sus-env__mobilityBtn li{
        width:271px;
    }

    .p-sus-env__cultureBtn{
        margin-top: 20px;
        gap:10px;
        flex-direction: column;
    }

    .p-sus-env__cultureBtn li:nth-child(1){
        flex:unset;
        width:237px;
    }

    .p-sus-env__cultureBtn li:nth-child(2){
        width:237px;
    }

    .p-sus-community{
        padding-block:50px;
        margin-top: 55px;
    }

    .p-sus-community__item{
        flex:unset;
        width:calc(392/828*100%);
        padding:44px 46px;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .p-sus-community__itemWrapper{
        flex-wrap: wrap;
        margin-top: 44px;
        gap:44px calc(44/828*100%);
    }

    .p-sus-community__item-subttl{
        font-size: 27px;
    }

    .p-sus-community__item-ttl{
        font-size: 17px;
        margin: 22px 0 10px;
    }

    .p-sus-community__item-btn{
        padding-top: 22px;
    }

    .p-sus-community__item-btn.--min{
        max-width: 200px;
    }

    .com-NewsItem:nth-child(n+3){
        display: none;
    }

    .p-sus-prg{
        margin-top: 46px;
    }

    .p-sus-prg__list{
        gap:calc(44/828*100%);
        margin-top: 24px;
    }

    .p-sus-prg__btn{
        width:200px;
        height: 40px;
        margin-top:30px;
        font-size: 15px;
    }

    .p-sus-supp{
        margin-top: 50px;
        padding:50px 0 90px;
    }

    .p-sus-supp__inner{
        flex-direction: column;
        gap:44px;
    }

    .p-sus-supp__head{
        width:100%;
    }

    .p-sus-supp .com-SectionHeader__title {
        line-height: 1.5;
        margin-top: 0;
        font-size: 19px;
    }
    
    .p-sus-supp__menuWrapper{
        flex: unset;
        max-width:100%;
    }
        
    .p-sus-supp__menu-trigger{
        font-size: 17px;
        gap:45px;
    }

    .p-sus-supp__item-link{
        font-size: 16px;
        width:55%;
    }

    .p-sus-supp__item-txt{
        font-size: 15px;
    }


}

/* TABLET */
@media screen and (min-width: 835px){


}

@media screen and (max-width: 834px) and (min-width: 481px){

    .tb-only-hide{
        display: none;
    }

}

@media screen and (max-width: 834px){
    .com-fv{
        height: calc(100vh - 80px);
    }
    .p-sus-box{
        width: calc(526 / 774 * 100%);
    }

    .p-sus-box.--tb-wide{
        width:100%;
    }

    .p-sus-swiper__navi{
        gap:10px;
    }

    .p-sus-swiper__navi li{
        width:50px;
    }

    .p-sus-swiper1{
        margin-top: 32px;
    }

    .p-sus-sec__item {
        width: calc(372 / 774 * 100%);
        margin-right: calc(30 / 774 * 100%);
    }

    .p-sus-sec__txtfield{
        padding:30px 30px 36px;
    }

    .p-sus-sec__img{
        padding-top: 30px;
    }

    .p-sus-sec__img.--01{
        width:calc(282/302*100%);
    }

    .p-sus-sec__img.--02{
        width:calc(290/312*100%);
    }

    .p-sus-sec__img.--03{
        width:calc(250/312*100%);
    }

    .p-sus-sec__img.--04{
        width:calc(144/312*100%);
        padding-bottom: 24px;
    }

    .p-sus-sec__img.--05{
        width:calc(278/312*100%);
    }

    .p-sus-sec__img.--06{
        width:calc(269/312*100%);
    }

    .p-sus-sec__btnGroup-btn {
        max-width: 200px;
        margin-top: 36px;
    }

    .com-SectionHeader__title{
        font-size: 19px;
    }

    .p-sus-policy{
        margin-top: 36px;
        border-radius:20px;
    }
    
    .p-sus-policy__inner{
        width:100%;
        padding:34px 38px 36px;
    }

    .p-sus-policy__inner .com-enttl{
        margin-bottom: 49px;
    }
    
    .p-sus-policy__btn{
        margin-top: 26px;
    }
    
    .p-sus-gds__secWrapper{
        margin-top: 40px;
    }
    
    .p-sus-gds__sec{
        padding: 28px 0 30px;
    }
    
    .p-sus-gds__txtfield{
        width:calc(372/774*100%);
    }

    .p-sus-gds__img.--01{
        width:calc(287/774*100%);
        padding-right: 50px;
    }
    
    .p-sus-gds__img.--02{
        width:calc(275/774*100%);
        padding-right: 56px;
    }
    
    .p-sus-gds__img.--03{
        width:calc(289/774*100%);
        padding-right: 49px;
    }

    .p-sus-carbon__side-txtfield{
        display: flex;
        flex-direction: column;
    }
    
    .p-sus-carbon__side-cate{
        width:92px;
        font-size: 15px;
        margin-bottom: auto;
    }
    
    .p-sus-accWrapper{
        gap:30px;
    }

    .p-sus-env__info {
        width: calc(372 / 774 * 100%);
        gap: 24px;
        padding-block: 36px 40px;
    }

    .p-sus-env__infoHead-img{
        width:calc(91/372*100%);
    }

    .p-sus-env__infoHead-carbon{
        width:calc(102/372*100%);
    }

    .p-sus-community__item{
        width:calc(372/774*100%);
        padding:38px 33px;
    }

    .p-sus-community__item-ttl{
        margin-top: 32px;
    }

    .p-sus-community__itemWrapper{
        margin-top: 30px;
        gap: 30px calc(30/774*100%);
    }

    .p-sus-supp__inner{
        gap:38px;
    }

    .p-sus-supp__menuWrapper{
        gap:26px;
    }

    .p-sus-supp__menu-trigger{
        height: 64px;
        padding-left:44px;
        gap:47px;
    }

    .p-sus-supp__menu-trigger svg{
        width:64px;
    }

    .p-sus-supp__item{
        margin-bottom: -26px;
        padding-inline:44px;
    }

    .p-sus-supp__item li{
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap:6px;
        padding-top: 22px;
    }

    .p-sus-supp__item-link{
        width:100%;
        font-size: 17px;
    }

    .p-sus-supp__item-link svg{
        display: none;
    }

    .p-sus-supp__item-txt{
        font-size: 14px;
        flex: unset;
        padding-bottom: 18px;
    }

}


/* SP */

@media screen and (min-width: 481px){
    .p-sus-secWrapper::before{
        content:"";
        width:2px;
        height: 100%;
        position: absolute;
        left: 50%;
        top:0;
        translate: -50% 0;
        background: url(../img/border.svg) repeat-y 0% 0;
        background-size: 2px auto;
    }

    .p-sus-carbon__side-txtfield,
    .p-sus-carbon__side-img,
    .p-sus-gds__sec,
    .p-sus-gds__img{
        opacity: 0;
        transform: translate3d(0, 60px, 0);
        transition: transform .8s cubic-bezier(.43,.05,.17,1), opacity .6s ease-out;
    }

    .view .animation.in-view .p-sus-carbon__side-txtfield,
    .view .animation.in-view .p-sus-carbon__side-img,
    .view .animation.in-view .p-sus-gds__sec,
    .view .animation.in-view .p-sus-gds__img{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    .p-sus-carbon__side-txtfield,
    .p-sus-gds__sec:nth-child(1){
        transition-delay: 200ms;
    }

    .p-sus-carbon__side-img,
    .p-sus-gds__sec:nth-child(1) .p-sus-gds__img,
    .p-sus-gds__sec:nth-child(2){
        transition-delay: 400ms;
    }

    .p-sus-gds__sec:nth-child(2) .p-sus-gds__img,
    .p-sus-gds__sec:nth-child(3){
        transition-delay: 600ms;
    }

    .p-sus-gds__sec:nth-child(3) .p-sus-gds__img{
        transition-delay: 800ms;
    }

}

@media screen and (max-width: 480px){
    .com-fv{
        height: auto;
    }
    .p-sus-boxWrapper{
        flex-direction: column;
        gap:16px;
    }

    .p-sus-box{
        width:100%;
    }

    .p-sus-swiper__navi{
        margin-left: auto;
    }

    .p-sus-swiper1 {
        margin-top: -10px;
    }

    .p-sus-sec__item{
        width:100%;
        margin-right: 25px;
    }

    .p-sus-sec__head{
        height: 52px;
        padding-inline:28px;
        gap:12px;
    }

    .p-sus-sec__head-num{
        font-size: 27px;
    }

    .p-sus-sec__head-ttl{
        font-size: 16px;
    }
    
    .p-sus-sec__item::before{
        height: calc(100% - 26px);
    }

    .p-sus-sec__txtfield{
        padding:34px 35px 40px;
    }

    .p-sus-sec__txt {
        font-size: 14px;
        line-height: 1.78;
    }

    .p-sus-sec__img{
        padding-top: 20px;
    }

    .p-sus-sec__img.--01{
        width:calc(282/360*100%);
    }

    .p-sus-sec__img.--02{
        width:calc(290/360*100%);
    }

    .p-sus-sec__img.--03{
        width:calc(250/360*100%);
    }

    .p-sus-sec__img.--04{
        width:calc(144/360*100%);
    }

    .p-sus-sec__img.--05{
        width:calc(278/360*100%);
    }

    .p-sus-sec__img.--06{
        width:calc(268/360*100%);
    }

    .p-sus-sec__btnGroup-btn{
        max-width: 100%;
        margin-top: 32px;
    }

    .p-sus-secWrapper{
        flex-wrap: nowrap;
        margin-top: 0;
    }

    .p-sus-swiper2{
        margin-top: 40px;
    }

    .p-sus-swiper3,
    .p-sus-swiper4{
        margin-top: 36px;
    }

    .p-sus-swiper2,
    .p-sus-swiper3,
    .p-sus-swiper4{
        padding-block:30px;
        position: relative;
    }

    .p-sus-swiper2 .p-sus-swiper__navi{
        position: absolute;
        right:0;
        top:30px;
        z-index: 10;
    }

    .p-sus-swiper2 .p-sus-swiper__navi li{
        background-color: #fff;
    }

    .p-sus-swiper2 .p-sus-swiper__navi li:hover{
        background-color: var(--accent);
    }

    .p-sus-swiper2::before,
    .p-sus-swiper2::after,
    .p-sus-swiper3::before,
    .p-sus-swiper3::after,
    .p-sus-swiper4::before,
    .p-sus-swiper4::after{
        content:"";
        width:100%;
        height: 2px;
        position: absolute;
        left: 0;
        translate: 0;
        background: url(../../assets/img/border.svg) repeat-y 0% top;
        background-size: auto 2px;
    }

    .p-sus-swiper2::before,
    .p-sus-swiper3::before,
    .p-sus-swiper4::before{
        top:0;
    }

    .p-sus-swiper2::after,
    .p-sus-swiper3::after,
    .p-sus-swiper4::after{
        bottom:0;
    }

    .p-sus-num {
        padding-bottom: 20px;
    }

    .p-sus-policy{
        margin-top: 30px;
        border-radius:34px 34px 5px 5px;
        padding-bottom: 60px;
        position: relative;
    }

    .p-sus-policy .p-sus-btn{
        border-radius:0 0 5px 5px;
    }

    .p-sus-policy__inner{
        padding: 34px 35px 24px;
    }

    .p-sus-policy::before{
        height: calc(100% - 60px);
        background-image: url(../img/policy-sp.webp?ver=1);
    }

    .p-sus-policy .p-sus-carbon__btn{
        position: absolute;
        left: 0;
        bottom:0;
        margin-top: 0;
    }
    
    .p-sus-policy__btn{
        margin-top: 0;
        position: absolute;
        left: 0;
        bottom:0;
        width:100%;
        max-width: 100%;
    }

    .p-sus-policy__btn a{
        padding-inline:35px;
        border-radius:0 0 10px 10px;
    }

    .p-sus-btn{
        height:60px;
        padding:0 25px 1px;
        font-size: 16px;
    }
    
    .p-sus-btn.is-en,
    .p-about-btn.is-en{
        font-size: 17px;
    }

    .p-sus-gds{
        margin: 40px 0 36px;
        padding:36px 0 40px;
    }

    .p-sus-gds__sec{
        padding:0;
        gap:30px;
        flex-direction: column;
        background: none;
        justify-content: space-between;
    }
    
    .p-sus-gds__txt{
        font-size: 14px;
        line-height: 1.78;
    }

    .p-sus-gds__txtfield{
        width:100%;
    }
    
    .p-sus-gds__secWrapper{
        margin-top: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        padding-top: 0;
        background: none;
    }
    
    .p-sus-gds__img.--01{
        width:calc(287/430*100%);
        padding-right: 0;
        padding-bottom: 22px;
    }
    
    .p-sus-gds__img.--02{
        width:calc(274/430*100%);
        padding-right: 0;
    }
    
    .p-sus-gds__img.--03{
        width:calc(288/430*100%);
        padding-right: 0;
        padding-bottom: 9px;
    }

    .p-sus-carbon__main{
        padding-bottom: 30px;
        margin-bottom: 28px;
    }

    .p-sus-carbon__btn {
        max-width: 100%;
        margin-top: 20px;
    }

    .p-sus-carbon__side{
        flex-direction: column;
        gap:30px;
    }
    
    .p-sus-carbon__side-cate{
        margin-bottom: 20px;
    }

    .p-sus-carbon__side-img{
        width:calc(134/430*100%);
        margin-inline:auto;
    }

    .p-sus-carbon__side-txtfield{
        width:100%;
    }

    .p-sus-accWrapper{
        gap:34px;
        margin-top: 54px;
    }
    
    .p-sus-acc{
        width: 100%;
        min-height: auto;
        padding:0;
        border-radius: 0;
    }

    .p-sus-acc__inner{
        padding:35px;
        position: relative;
        border-radius:30px 30px 0 0;
        overflow: hidden;
    }

    .p-sus-acc__btn2,
    .p-sus-acc__btn {
        width: 100%;
        padding-top: 0;
    }

    .p-sus-acc__btn2 a,
    .p-sus-acc__btn a{
        padding-inline:35px;
        border-radius:0 0 10px 10px;
    }

    .p-sus-acc__btnWrapper{
        display: flex;
        flex-direction: column;
        gap:2px;
        border-radius:0 0 10px 10px;
        background-color: var(--accent);
        position: relative;
    }

    .p-sus-acc__btnWrapper::before{
        content:"";
        width:calc(100% - 70px);
        height: 2px;
        position: absolute;
        left: 35px;
        top:50%;
        translate: 0 -50%;
        background: url(../../assets/img/border.svg) repeat-x 0% bottom;
        background-size: auto 2px;
    }

    .p-sus-env__sec{
        flex-direction: column-reverse;
        gap:30px;
        height: auto;
    }

    .p-sus-env__img{
        width:100%;
    }

    .p-sus-env__info{
        width:100%;
        justify-content: flex-start;
        height: auto;
        flex:1;
        gap:0;
        padding:0;
        position: relative;
    }

    .p-sus-env__info::before,
    .p-sus-env__info::after{
        display: none;
    }

    .p-sus-env__info > div{
        display: contents;
    }

    .p-sus-env__infoHead-info,
    .p-sus-env__infoHead{
        gap:12px;
    }

    .p-sus-env__infoHead-ttl{
        font-size: 16px;
        margin-bottom: 30px;
    }

    .p-sus-env__infoHead-en{
        font-size: 24px;
    }

    .p-sus-env__infoHead-img{
        width:calc(97/430*100%);
        position: absolute;
        right:0;
        top:calc(30/430*100%);
    }

    .p-sus-env__infoHead{
        margin-bottom: 12px;
    }

    .p-sus-env__infoHead-ttl{
        font-size: 16px;
    }

    .p-sus-env__infoHead-carbon{
        width:calc(96/430*100%);
        position: absolute;
        right:0;
        top:c0
    }

    .p-sus-env__info.--01 .p-sus-env__infoHead,
    .p-sus-env__info.--01 .p-sus-gds__txt,
    .p-sus-env__info.--03 .p-sus-env__infoHead,
    .p-sus-env__info.--03 .p-sus-gds__txt{
        padding-right: calc(120/430*100%);
    }

    .p-sus-env__btn{
        margin-top: auto;
        padding-top: 20px;
        width:100%;
    }

    .p-sus-env__cultureBtn,
    .p-sus-env__mobilityBtn {
        margin-top:auto;
        padding-top: 20px;
        gap: 16px;
    }

    .p-sus-env__mobilityBtn li,
    .p-sus-env__cultureBtn li:nth-child(1),
    .p-sus-env__cultureBtn li:nth-child(2){
        width:100%;
    }

    .p-sus-community {
        padding-block: 40px;
        margin-top: 40px;
    }

    .p-sus-community__itemWrapper{
        margin-top: 40px;
        flex-direction: column;
        gap:30px;
    }

    .p-sus-community__item{
        width:100%;
        padding:34px 35px 90px;
        position: relative;
        overflow: hidden;
        border-radius:34px 34px 5px 5px;
    }

    .p-sus-community__item-subttl{
        font-size: 24px;
    }

    .p-sus-community__item-ttl{
        font-size: 16px;
        margin-top: 30px;
    }

    .p-sus-community__item-btn{
        position: absolute;
        left: 0;
        bottom:0;
        padding-top: 0;
        max-width:100%;
        width:100%;
    }

    .p-sus-community__item-btn .p-sus-btn{
        border-radius:0 0 5px 5px;
    }

    .p-sus-community__item-btn.--min{
        max-width: 100%;
    }

    .p-sus-prg{
        margin-top: 36px;
    }

    .p-sus-prg__list{
        margin-top: 21px;
        gap:30px;
    }

    .p-sus-prg__list .com-NewsItem:nth-child(n+2) {
        margin-top: 0;
    }

    .p-sus-prg__arrow{
        width:44px;
        margin:28px auto 0;
    }

    .p-sus-supp{
        margin-top: 40px;
        padding:36px 0 56px;
    }

    .p-sus-supp .com-SectionHeader__title {
        line-height: 1.66;
        font-size: 18px;
        padding-bottom: .3em;
    }

    .p-sus-supp .com-SectionHeader__title br{
        display: block;
    }

    .p-sus-supp__head-txt{
        margin-top: -1.5em;
    }

    .p-sus-supp__menuWrapper{
        gap:20px;
    }

    .p-sus-supp__menu-trigger{
        height: 58px;
        padding-left:32px;
        gap:24px;
        font-size: 16px;
    }

    .p-sus-supp__menu-trigger svg{
        width:58px;
    }

    .p-sus-supp__item{
        margin-bottom: -20px;
        padding-inline:32px;
    }

    .p-sus-supp__item li{
        padding-top: 18px;
    }

    .p-sus-supp__item-link{
        font-size: 16px;
    }

    .p-sus-supp__item-txt{
        padding-bottom: 12px;
    }

    .p-sus-env__navi .p-sus-swiper__prev,
    .p-sus-env__navi .p-sus-swiper__next{
        width:50px;
        aspect-ratio: 1;
        box-sizing: border-box;
        border:1px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(30.81vw - 10.41px);
        z-index: 10;
    }

    .p-sus-env__navi .p-sus-swiper__prev{
        left: 20px;
    }

    .p-sus-env__navi .p-sus-swiper__next{
        right:20px;
    }
}