@charset "utf-8";

/* --------------------------------------------------------- */
/* base.css */
/* --------------------------------------------------------- */

#wrap{position:relative;overflow:hidden;}
.section{width:100%;margin:0 auto;}
.content{width:100%;max-width:1400px;margin:0 auto;}
.layer{width:100%;max-width:750px;margin:0 auto;position:relative;}

a{display:block;transition:opacity ease 0.3s;}
a:hover{opacity:0.7;}
img{width:100%;height:auto;}

.sp{display:none;}


/* ヘッダー
----------------------- */
#header{background:#fff;position:fixed;top:0;left:0;z-index:5;}
#header .content{display:flex;align-items:center;}
#header h1{width:254px;margin-left:10px;padding:13px 0;}
#header .pc-menu{display:flex;align-items:center;margin:0 7px 0 auto;}
#header .pc-menu li{margin-left:50px;}
#header .pc-menu li:nth-of-type(1){width:67px;}
#header .pc-menu li:nth-of-type(2){width:223px;}
#header .pc-menu li:nth-of-type(3){width:202px;}
#header .pc-menu li:nth-of-type(4){width:169px;}
#header .pc-menu li:nth-of-type(5){width:97px;}
#header .menubox{display:none;}


/* メイン
----------------------- */
#main{}


/* ページトップへ戻る
----------------------- */
#side{width:auto;position:fixed;right:0;bottom:0;margin:0 0 10px;z-index:4;
animation:slide-in 1s ease 2s forwards;transform:translateX(100%);}
@keyframes slide-in{
0%{transform:translateX(100%);}
100%{transform:translateX(0);}
}

#dx{position:relative;}
#dx .banner{width:375px;}
#dx .close{width:24px;position:absolute;top:0;left:0;cursor:pointer;transition:opacity ease 0.3s;}
#dx .close:hover{opacity:0.7;}
#dx.slide-out{animation:slide-out 1s ease forwards;transform:translateX(0);}
@keyframes slide-out{
0%{transform:translateX(0);}
100%{transform:translateX(150%);}
}

#pagetop{width:188px;margin:0 50px 0 auto;cursor:pointer;transition:opacity ease 0.3s;}
#pagetop:hover{opacity:0.7;}


/* フッター
----------------------- */
#footer{}
#footer .layer{padding:124px 0 74px;background:#fff;}

#footer #sns{display:flex;align-items:center;justify-content:center;}
#footer #sns li{width:40px;margin:0 36px;}

#footer .btnbox{margin-top:124px;}
#footer .btnbox p{width:303px;margin:30px auto 0;}

#copy .layer{background:#006431;}
#copy p{padding:1.8em 0;color:#fff;font-size:16px;line-height:100%;text-align:center;}



@media screen and (max-width: 1280px){

/* ヘッダー
----------------------- */
#header h1{width:19.844%;margin-left:0.782%;padding:1.016% 0;}
#header .pc-menu{width:78.75%;/*1008*/margin:0 0.547% 0 auto;}
#header .pc-menu li{margin-left:4.960%;}
#header .pc-menu li:nth-of-type(1){width:6.647%;}
#header .pc-menu li:nth-of-type(2){width:22.124%;}
#header .pc-menu li:nth-of-type(3){width:20.04%;}
#header .pc-menu li:nth-of-type(4){width:16.766%;}
#header .pc-menu li:nth-of-type(5){width:9.624%;}
	
}



@keyframes slide-inSP{
0%{transform:translate(0,150%);}
100%{transform:translate(0,0);}
}
@keyframes slide-outSP{
0%{transform:translate(0,0);}
100%{transform:translate(0,300%);}
}
@media screen and (max-width: 750px){
	
a:hover{opacity:1;}

.pc{display:none;}
.sp{display:block;}


/* ヘッダー
----------------------- */
#header{}
#header .content{align-items:flex-end;justify-content:space-between;padding:6.153% 0 2.667%;}
#header h1{width:42.134%;margin-left:4.4%;padding:0;}
#header .pc-menu{display:none;}
#header .hum{width:5.867%;margin-right:5.867%;background:url(/cp/sustainable2026/common/img/head-hum-close.png) no-repeat center;background-size:100% auto;cursor:pointer;}
#header .hum.open img{opacity:0;}

#header .menubox{display:none;}
#header .menu-wrap{overflow-y:scroll;}
#header .menu-wrap::-webkit-scrollbar{width:1.6vw;height:0;}
#header .menu-wrap::-webkit-scrollbar-track{background:#eee;border-radius:1.334vw;}
#header .menu-wrap::-webkit-scrollbar-thumb{background:#20360d;border-radius:1.334vw;}
#header .menu-wrap::-webkit-scrollbar-button{display:none;width:0;height:0;}
#header .menu-wrap{scrollbar-width:auto;scrollbar-color:#20360d #fff;}

#header .sp-menu{margin-left:20%;padding-bottom:16.4%;}
#header .sp-menu li{width:73.334%;padding-top:10%;}


/* ページトップへ戻る
----------------------- */
#side{width:100%;margin:0 0 10px;
animation:slide-inSP 1s ease 2s forwards;transform:translate(0,150%);}

#dx .banner{width:97.6%;margin:0 auto;}
#dx .close{width:5.6%;margin:-0.8% 0 0 3.2%;}
#dx .close:hover{opacity:1;}
#dx.slide-out{animation:slide-outSP 2s ease forwards;transform:translate(0,0);}

#pagetop{display:none;}


/* フッター
----------------------- */
#footer .layer{padding-top:16%;}

#footer #sns{margin-top:0;}
#footer #sns li{width:5.334%;margin:0 4.8%;}

#footer .btnbox{margin:14.667% 0 13.334%;}
#footer .btnbox p{width:60.4%;margin-top:6.667%;}

#copy p{padding:1.35em 0;font-size:2.667vw;}

}