@charset "utf-8";

/* --------------------------------------------------------- */
/* index.css */
/* --------------------------------------------------------- */

#wrap{background:#6cc27e url(/cp/sustainable2026/img/page-bg.png) no-repeat top center;background-size:3000px auto;background-attachment:fixed;}
#wrap:before,
#wrap:after{content:'';display:block;width:3000px;height:100%;position:fixed;top:0;background-repeat:repeat-x;background-size:750px auto;}
#wrap:before{background-image:url(/cp/sustainable2026/img/page-bg-left.png);left:50%;transform:translateX(-50%);margin-left:-3000px;}
#wrap:after{background-image:url(/cp/sustainable2026/img/page-bg-right.png);right:50%;transform:translateX(50%);margin-right:-3000px;}


/* メインビジュアル
----------------------- */
#mv{}
#mv h2{width:717px;margin:19px 0 0 18px;}
#mv .image{width:476px;margin:60px 0 75px 19px;}


/* メイン
----------------------- */
#main{}
#main .layer:before{content:'';display:block;width:100%;padding-top:100px;background:url(/cp/sustainable2026/img/about-bg.png) no-repeat top center;background-size:100% auto;margin-top:-60px;}
#main .inner{background-color:#feefcd;position:relative;}
.inner h3,
.inner p{margin:0 auto;}

/* about ////////// */
#about{padding-bottom:140px;background:#f9e6da!important;}
#about h3{width:485px;transform:translateY(-30px);}
#about .image{width:728px;margin:-20px 0 0 14px;}
#about .period{width:670px;margin-top:20px;}
#about .step{width:671px;margin-top:70px;}
#about .shead{width:315px;margin:90px 0 0 222px;}
#about .banner{width:678px;margin:5px 0 0 40px;position:relative;}
#about .banner:before{content:'';display:block;width:195px;padding-top:231px;background:url(/cp/sustainable2026/img/about-deco.png) no-repeat top center;background-size:100% auto;position:absolute;bottom:0;left:0;margin:0 0 -90px -24px;z-index:2;}

/* anniv ////////// */
#anniv{padding:68px 0 90px;background:#feefcd url(/cp/sustainable2026/img/anniv-bg.png) no-repeat top center;background-size:100% auto;}
#anniv h3{width:725px;margin-left:16px;}
#anniv .image{width:641px;margin:100px 0 0 66px;}
#anniv .what{width:603px;margin:88px 0 0 104px;}
#anniv .exp{width:676px;margin:105px 0 0 40px;}

/* thema ////////// */
#thema{padding:90px 0 43px;}
#thema h3{width:675px;margin-left:40px;}
#thema .txt{width:628px;margin:63px 0 76px 64px;}
#thema .thema{width:672px;margin:0 0 100px 39px;}
#thema .thema4{width:685px;margin-bottom:106px;}
#thema .shead{width:567px;margin:0 0 20px 89px;}
#thema .movie{width:600px;}

/* more ////////// */
#more{padding:43px 0;}
#more .shead{width:401px;margin-left:171px;}
#more .banner{width:633px;margin:10px 0 0 66px;}
#more .txt{width:480px;margin:100px 0 0 135px;}


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

#wrap{background-image:url(/cp/sustainable2026/img/page-bg-sp.png);background-size:100% auto;background-attachment:scroll;background-position:top -13.334vw center;}

/* メインビジュアル
----------------------- */
#mv h2{width:98.134%;margin:6.4% 0 0 0.934%;}
#mv .image{width:73.467%;margin:9.6% 0 1.334% 24.267%;}
#wrap:before,
#wrap:after{content:none;}


/* メイン
----------------------- */
#main .layer:before{padding-top:13.334%;background-image:url(/cp/sustainable2026/img/about-bg-sp.png);margin-top:0;}

/* about ////////// */
#about{padding-bottom:15.734%;}
#about h3{width:71.734%;transform:translateY(-1.334vw);}
#about .image{width:98.667%;margin:5.6% 0 0 2%;}
#about .period{width:89.334%;margin-top:5.334%;}
#about .step{width:89.334%;margin-top:12%;}
#about .shead{width:45.867%;margin:7.6% 0 0 27.334%;}
#about .banner{width:90.4%;margin:0.8% 0 0 5.334%;}
#about .banner:before{width:25.369%;padding-top:29.942%;background-image:url(/cp/sustainable2026/img/about-deco-sp.png);margin:0 0 -10.62% -2.688%;}

/* anniv ////////// */
#anniv{padding:13.334% 0 10.667%;background-image:url(/cp/sustainable2026/img/anniv-bg-sp.png);}
#anniv h3{width:98.8%;margin-left:1.067%;}
#anniv .image{width:86.4%;margin:8.534% 0 0 7.467%;}
#anniv .what{width:82.134%;margin:14.667% 0 0 10.667%;}
#anniv .exp{width:90.267%;margin:10% 0 0 5.334%;}

/* thema ////////// */
#thema{padding:10.667% 0 10.4%;}
#thema h3{width:90%;margin-left:5.334%;}
#thema .txt{width:55.067%;margin:6.667% 0 9.067% 22.267%;}
#thema .thema{width:89.6%;margin:0 0 13.334% 5.334%;}
#thema .thema4{width:91.2%;margin-bottom:14.667%;}
#thema .shead{width:77.2%;margin:0 0 4% 10.934%;}
#thema .movie{width:100%;}

/* more ////////// */
#more{padding:10.4% 0 6.134%;}
#more .shead{width:73.334%;margin-left:12.934%;}
#more .banner{width:84.4%;margin:1.2% 0 0 8.8%;}
#more .txt{width:83.2%;margin:12.667% 0 0 8.134%;}

}