@charset "utf-8";
/* MV */
.mv{padding: min(2.5vw,40px) 0; position: relative; width: 100%;}
.mv-wrap{max-width: 1500px; margin: 0 auto; width: 82%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; z-index: 5;}
.mv-inner{width: 39.83%;}

.mv-txt{font-size: min(2vw,4rem); line-height: 1; display: flex; align-items: center; font-weight: bold; font-family: "Zen Kaku Gothic New", serif;
opacity: 0; transform: translateY(20px); transition: .5s ease 2.1s;}
.mv-txt span{font-size: min(1.3vw,2.6rem); width: min(7.21vw,140px); height: min(6.18vw,120px); background: url("../img/common/img-leaf.png") no-repeat top left/100% 100%; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; padding: min(1vw,15px) 0 0 min(1vw,20px); margin-right: min(1vw,20px); position: relative; top: -10px;}
.mv.is-view .mv-txt{opacity: 1; transform: translateY(0);}

.mv-tit{font-size: min(4.5vw,9.7rem); line-height: 1.12; font-weight: bold; font-family: "Zen Kaku Gothic New", serif; color: #009869; margin: 0 0 0.5em;
opacity: 0; transform: translateY(20px); transition: .5s ease 2.3s;}
.mv.is-view .mv-tit{opacity: 1; transform: translateY(0);}

.mv-desc{font-size: min(1.5vw,1.8rem); line-height: 2;
opacity: 0; transform: translateY(20px); transition: .5s ease 2.5s;}
.mv.is-view .mv-desc{opacity: 1; transform: translateY(0);}

@media screen and (max-width: 767px){
    .mv{padding: 25px 0 50px;}
    
    .mv-wrap{justify-content: center; width: calc(100% - 40px);}
	.mv-inner{width: auto;}
    .mv-txt{font-size: min(5vw,2.2rem);}
    .mv-txt span{font-size: min(4vw,1.4rem); width: min(19vw,74px); height: min(16.5vw,64px); padding: min(2.6vw,10px) 0 0 min(2.6vw,10px); margin-right: 12px; top: -5px;}
    .mv-tit{font-size: min(12vw,5rem); margin: 0 0 20px;}
    .mv-desc{font-size: min(4vw,1.6rem);}
}

/* Anime */
.anime{width: 53.47%; max-width: 802px; line-height: 0; position: relative;}
.anime:after{content: ''; display: block; padding-bottom: 102.62%;}
.anime div{position: absolute; line-height: 0;}

.anime [class*="illus"]{will-change: transform, opacity; opacity: 0;}
.mv.is-view [class*="illus"]{animation-name: animeIllus; animation-duration: .4s; animation-fill-mode: forwards;}

@keyframes animeIllus{
    0% {opacity:0; transform: scale(.5);}
    50% {opacity:1; transform: scale(1.2);}
    100% {opacity:1; transform: scale(1);}
}

.anime .illus01{top: 0%; left: 36.65%; width: 34.54%; animation-delay: 1.5s;}
.anime .illus02{top: 20.17%; left: 32.91%; width: 38.28%; animation-delay: .75s;}
.anime .illus03{top: 8.99%; left: 69.57%; width: 28.56%; animation-delay: 1.05s;}
.anime .illus04{top: 32.19%; right: 0%; width: 34.67%; animation-delay: .45s;}
.anime .illus05{top: 53.58%; right: 0.24%; width: 29.81%; animation-delay: 1.65s;}
.anime .illus06{top: 69.62%; left: 70.69%; width: 25.07%; animation-delay: .9s;}
.anime .illus07{top: 83.59%; left: 66.21%; width: 19.46%; animation-delay: 1.35s;}
.anime .illus08{top: 57.35%; left: 33.16%; width: 35.29%; animation-delay: 1.95s;}
.anime .illus09{bottom: 0%; left: 31.42%; width: 38.53%; animation-delay: .15s;}
.anime .illus10{top: 67.07%; left: 3.36%; width: 31.42%; animation-delay: 1.2s;}
.anime .illus11{top: 45.76%; left: 0%; width: 33.05%; animation-delay: .6s;}
.anime .illus12{top: 23.44%; left: 1.74%; width: 30.43%; animation-delay: 1.8s;}
.anime .illus13{top: 4.13%; left: 13.09%; width: 24.32%; animation-delay: .3s;}

.anime .object{position: absolute;}
.anime .object:after{content: ''; display: block;}
.anime .objectImg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.anime .objectImg:before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@keyframes animeImg{
    100%{background-position: 100% 0;}
}

@-webkit-keyframes animeImg{
    100%{background-position: 100% 0;}
}

.anime .person1{width: 58.845%; max-width: 163px; left: 24.63%; top: 0;}
.anime .person1:after{padding-bottom: 95.568%;}
.anime .person1 .objectImg:before{background: url("../img/top/anime/person-01.png") no-repeat top left/700% 100%;    
animation: animeImg 3s infinite steps(6); -webkit-animation: animeImg 3s infinite steps(6);}

.anime .person2{width: 26.059%; left: 39.5%; top: 14.5%; animation: animePerson1 2.6s linear 1.8s infinite;}
.anime .person3{width: 23.022%; right: 0%; top: 6%; animation: animePerson2 2.6s linear 2s infinite;}
.anime .person4{width: 16.962%; left: 40.28%; bottom: 1%; z-index: -1; animation: animePerson3 1s linear 1.7s infinite;}
.anime .person5{width: 32.787%; left: 19.26%; top: 0%; animation: animePerson2 2.6s linear 1.5s infinite;}

@keyframes animePerson1 {
    0%,
    50% {transform:rotate(-7deg);}
    50.1%,
    100% {transform:rotate(7deg);}
}

@keyframes animePerson2 {
    0%,
    50% {transform:rotate(7deg);}
    50.1%,
    100% {transform:rotate(-7deg);}
}

@keyframes animePerson3 {
    0% {transform: translateY(0%);}
    30% {transform: translateY(-10%);}
    60% {transform: translateY(0%);}
    100% {transform: translateY(0%);}
}

.anime .windmill1,
.anime .windmill2{width: 15.534%; transform-origin: center center; transform-box: fill-box; opacity: 1; transform: scale(1);}

.anime .windmill1{left: 47.8%; top: 40%; animation: animeWind 1s linear 0.3s infinite;}
.anime .windmill2{left: 70.8%; top: 40%; animation: animeWind 1s linear 0s infinite;}

@keyframes animeWind {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}    
}

.anime .fish{width: 30.189%; left: 0%; top: 48%; animation: animeFish 5s linear 0s infinite;}

@keyframes animeFish {
    0% {opacity: 0; transform: translate(-80%,-30%);}
    5% {opacity: 1; transform: translate(-80%,-30%);}
    55% {opacity: 1; transform: translate(0%,0);}    
    90% {opacity: 0; transform: translate(40%,0);}
    100% {opacity: 0;}
}

.anime .starfish{width: 26.154%; left: 45.12%; top: 43%; animation: animeStarfish 3s linear 1s infinite;}

@keyframes animeStarfish {
    0%,
    50% {transform:rotate(-17deg);}
    50.1%,
    100% {transform:rotate(17deg);}
}

.anime .line1{width: 17.911%; left: 26.368%; top: 28.22%; animation: animeLine1 3s linear 0s infinite;}

@keyframes animeLine1 {
    0% {opacity: 0; transform: translate(-100%,0);}
    5% {opacity: 1; transform: translate(-100%,0);}
    80% {transform: translate(150%,0); opacity: 1;}
    100% {transform: translate(100%,0); opacity: 0;}
}

.anime .line2{width: 17.911%; right: 0%; top: 0%; z-index: 2; animation: animeLine2 3s linear 0.5s infinite;}

@keyframes animeLine2 {
    0% {opacity: 0; transform: translate(0,130%);}
    5% {opacity: 1; transform: translate(0,130%);}
    80% {transform: translate(0,0); opacity: 1;}
    100% {transform: translate(0,0); opacity: 0;}
}

.anime .earth{width: 47.762%; left: 48.756%; top: 8.87%; z-index: 1; transform-origin: center center; transform-box: fill-box; animation: animeEarth 20s linear 0s infinite;}

@keyframes animeEarth {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@media screen and (max-width: 767px){
    .anime{width: 100%; max-width: 480px; margin: 0 auto 25px;}
}

/* Report */
.report{background-color: #f8f5f2;}
.report:before,
.report:after{content: ''; width: 100%; height: 5.15625vw; display: block;}
.report:before{background: url("../img/top/bg-01.jpg") no-repeat top center/100% 100%;}
.report:after{background: url("../img/top/bg-02.jpg") no-repeat bottom center/100% 100%;}
.report-wrap{padding: 110px 0 0;}

.report-tit{font-size: 3.8rem; line-height: 1.4; margin: 0 0 35px; color: #009869; text-align: center;}
.report-tit:before{content: ''; width: 33px; height: 33px; margin-right: 20px; display: inline-block; background: url("../img/common/ic-pen.svg") no-repeat top left/100% 100%;}
.report-box{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.report-new{width: 43.572%;}
.report-new .tit{font-size: 2rem; line-height: 1.8;}

.report-list{width: 50.715%; display: flex; flex-wrap: wrap; align-items: flex-start;}
.report-list .tit{font-size: 1.8rem; line-height: 1.6;}
.report-list .tit.soon{margin: 15px 0 0 0; font-size: 1.6rem;}
.report-list .txt{line-height: 1.6; font-weight: bold; margin-top: 5px; font-family: "Zen Kaku Gothic New", serif;}
.report .progress{display: flex; overflow: hidden; position: absolute; bottom: 0; left: 0; z-index: 1;}
.report .progress li{min-width: 70px; height: 32px; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; text-align: center; font-size: 1.4rem; font-weight: bold; line-height: 1.3; color: #fff; background: #009869; font-family: "Zen Kaku Gothic New", serif;}
.report .progress .new{background: #ffdb29; color: #343434; font-family: "Lato", serif; font-size: 1.6rem;}

.report .cate{font-family: "Zen Kaku Gothic New", serif; color: #009869; margin: 15px 0 5px; line-height: 1.7;}
.report .cate li:before{content: ''; margin-right: 10px; display: inline-block; position: relative; top: 3px;}
.report .cate01:before{width: 16px; height: 20px; background: url("../img/common/ic-leaf.svg") no-repeat top left/100% auto;}
.report .cate02:before{width: 14px; height: 18px; background: url("../img/common/ic-recycle.svg") no-repeat top left/100% auto;}
.report .cate03:before{width: 16px; height: 18px; background: url("../img/common/ic-tree.svg") no-repeat top left/100% auto;}

.report .hashtag{display: flex; flex-wrap: wrap; margin-top: 13px;}
.report .hashtag li{padding: 3px 10px 4px; border: 1px solid #009869; color: #009869; font-size: 1.4rem; line-height: 1.5; margin: 0 6px 6px 0;}

.report .m-photo{border-radius: 10px 10px 10px 0;}

.report-box a:hover .photo img{opacity: .8;}
.report-box a:hover{color: #009869;}

@media screen and (min-width: 768px){
	.report-item{width: 30.141%; margin: 0 4.7885% 40px 0;}
    .report-item:nth-of-type(3n){margin-right: 0;}
    .report-item:nth-of-type(n+3){margin-bottom: 0;}
}

@media screen and (max-width: 1023px){
	.report-new{width: 100%; max-width: 722px; margin: 0 auto 40px;}
    .report-list{width: 100%;}
    .report .m-photo img{width: 100%;}
}

@media screen and (max-width: 767px){    
    .report-wrap{padding: 50px 0 0;}
    .report:before{background: url("../img/top/bg-01_sp.jpg") no-repeat top center/100% 100%; height: 5.334vw;}
    .report:after{background: url("../img/top/bg-02_sp.jpg") no-repeat bottom center/100% 100%; height: 12vw; margin-top: -30px;}
    
    .report-tit{font-size: 2.6rem; margin: 0 0 25px;}
    .report-tit:before{display: block; margin: 0 auto 10px; width: 28px; height: 28px;}
    
    .report-new{margin: 0 0 30px;}
    .report-new .tit,
    .report-list .tit{font-size: 1.6rem; line-height: 1.6875;}
    .report-list .tit.soon{font-size: 1.4rem;}
    
    .report-item{width: calc(50% - 10px); margin: 0 20px 30px 0;}
    .report-item:nth-of-type(2n){margin-right: 0;}
    
    .report .progress li{width: 61px; height: 30px;}
    .report .progress .new{width: 55px; font-size: 1.4rem;}
    
    .report .hashtag li{font-size: 1.2rem;}
}

/* Project */
.project{padding: 70px 0 60px;}
.project-btn{max-width: 400px; width: 100%; min-height: 60px; padding: 5px 0; margin: 30px auto 0; border-radius: 60px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; color: #fff; background: #009869; font-size: 1.8rem; line-height: 1.5; text-align: center; font-weight: bold; font-family: "Zen Kaku Gothic New", serif; position: relative; border: 1px solid #009869; transition: .5s;}
.project-btn:after{content: ''; position: absolute; top: 50%; right: 7%; background:#fff; width: 16px; height: 16px; margin-top: -8px; line-height: 1; display: block; mask: url("../img/common/ic-open.svg") no-repeat top left/100% 100%; -webkit-mask: url("../img/common/ic-open.svg") no-repeat top left/100% 100%;}
.project-btn:hover{background: #fff; color: #009869;}
.project-btn:hover:after{background: #009869;}

.project01{border: 1px solid #009869; border-radius: 10px; padding: min(4.6vw,50px) min(3.7vw,40px);}
.project01-outer{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.project01-tit{font-size: 3.4rem; line-height: 1.4; color: #009869; margin: 0 0 10px;}

.project02{display: flex; justify-content: space-between; flex-wrap: wrap;}
.project02-item{width: calc(50% - 10px); border: 1px solid #009869; border-radius: 10px; padding: min(3.7vw,40px) min(3.7vw,40px) min(4.6vw,50px); margin: 20px 0 0 0; text-align: center;}

.project02-tit{font-size: 2.8rem; line-height: 1.4; color: #009869; margin: 30px 0 23px;}
.project02-logo{margin: 0 0 20px;}

@media screen and (min-width: 768px){
    .project01-tit span{margin-left: -0.6em;}
    
    .project01-outer{padding: 0 0 10px;}
    .project01-inner{width: 53%;}
    .project01-img{width: 43.8%;}
}

@media screen and (max-width: 767px){
    .project{padding: 40px 0 30px;}
    .project-btn{font-size: 1.6rem; margin: 20px auto 0; min-height: 50px; line-height: 1.3; padding: 8px 0;}
    
    .project01{padding: min(8vw,30px);}
    .project01-inner{width: 100%;}
    .project01-img{width: 100%; order: -1; max-width: 270px; margin: 0 auto 25px;}
    .project01-tit{font-size: 2rem; line-height: 1.5; margin: 0 0 10px; text-align: center;}
    
    .project02-item{width: 100%; padding: min(8vw,30px); margin: 20px 0 0 0;}
    .project02-tit{font-size: 2rem; line-height: 1.5; margin: 20px 0;}
    .project02-desc{text-align: left;}
}