@charset "UTF-8";
/* CSS Document */

/*-----------------------------------topMv*/

#topMv {
height: 100vh;
position: relative;
}

.slider {
height: 100%;
}

.slick-list {
height: 100%!important;
}

.slick-slide {
background-size:cover!important;
height: 100vh!important;
}
.topMvTxt {
position: absolute;
width: 90%;
max-width: 1500px;
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform:translateX(-50%);
  z-index: 800;
  bottom: 20%;
}
.topMvTxt h1 {
font-size: 28px;
font-size: 2.8rem;
color: #fff;
  letter-spacing: 0;
}
.topMvTxt h1 .en {
font-family: 'Roboto', sans-serif;
font-weight: 400;
display: block;
font-size: 84px;
font-size: 8.4rem;
margin-bottom: 20px;
}

.topMvTxt h1 .ja {
font-weight: 400;
line-height: 1.3;
}

.topMvTxt h1 .ja span {
display: block;
position: relative;
}

.topMvTxt h1 .ja span:after {
content: "";
width: 100px;
height: 2px;
background: #fff;
position: absolute;
left: 150px;
top: 12px;
}
.slick-dots {
    bottom: 10px!important;
}

.slick-dots li {
    width: 90px!important;
    height: 6px!important;
}

.slick-dots li button::before {
    width: 90px!important;
    height: 6px!important;
    content: ''!important;
    background: #fff;
    opacity: .6!important;
    color: inherit;
}

.slick-dots li.slick-active button::before{
opacity: 1!important;
}


/*-----------------------------------topics*/

#topicsSec {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 80px;
}

#topicsSec .tsTop {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid #cccccc;
padding-bottom: 15px;
}

#topicsSec .tsTop h2 {
font-size: 32px;
font-size: 3.2rem;
letter-spacing: -0.1em;
}
#topicsSec .tsTop .topicsBtn a {
font-size: 15px;
font-size: 1.5rem;
position: relative;
padding-left: 20px;
}


#topicsSec .tsTop .topicsBtn a:hover {
text-decoration: none;
color: #259944;
}

#topicsSec .tsTop .topicsBtn a:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 1px #b4b4b4;
  border-right: solid 1px #b4b4b4;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -5px;
  	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.tsList {
padding-top: 15px;
}

.tsList ul li {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 0;
}

.tsList ul li .data {
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin-right: 10px;
letter-spacing: 0;
}

.tsList ul li .category {
background: #cccccc;
padding: 10px 0;
width: 120px;
text-align: center;
color: #fff;
display: block;
border-radius: 50px;
margin-right: 10px;
font-size: 15px;
font-size: 1.5rem;
}

.tsList ul li .title {
font-size: 15px;
font-size: 1.5rem;
}
.tsList ul li a.title:hover {
text-decoration: none;
color: #259944;
}




/*-----------------------------------business*/
#businessSec{
background: #f5f5f2;
}
.busMain {
position: relative;
z-index: 0;
}
.bgLayer {
  background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.8), transparent);
  background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.8), transparent);
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}


.busInfo {
position: absolute;
z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 90%;
  max-width: 1500px;
  display: flex;
  flex-direction: row-reverse;
}

.busInfo .biInr {
width: 60%;
max-width: 680px;
color: #fff;
}

.busInfo .biInr h2 {
font-size: 22px;
font-size: 2.2rem;
position: relative;
padding-left: 30px;
}

.busInfo .biInr h2:before {
content: "";
width: 22px;
height: 5px;
background: #259944;
position: absolute;
left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit- transform:translateY(-50%);
}

.busInfo .biInr h3 {
padding: 40px 0;
font-size: 38px;
font-size: 3.8rem;
font-weight: 400;
}

.busInfo .biInr h3 span {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-size: 1.8rem;
font-weight: 400;
letter-spacing: 0;
display: block;
padding-top: 10px;
}

.busInfo .biInr .txt {
padding-bottom: 30px;
}

.busList {
width: 90%;
max-width: 1500px;
background: #fff;
margin-top: -10%;
padding: 80px;
margin: -3% auto 0;
position: relative;
z-index: 3;
}

.busList ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.busList ul li {
width: 49%;
position: relative;
margin-bottom: 30px;
}

.busList ul li.col3 {
width: 32%;
margin-bottom: 0;
}

/* Common style */
.grid figure {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
    width: 100%;
}

.grid figure figcaption {
	padding: 1em;
	color: #fff;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


figure.effect figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

figure.effect h3 {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
    padding: 0 20px;
	color: #fff;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
    font-weight: 400;
}

figure.effect h3 .ja {
font-size: 26px;
font-size: 2.6rem;
font-weight: 400;
display: block;
}

figure.effect h3 .ja span {
position: relative;
}

figure.effect h3 .ja span:after {
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -5px;
}

figure.effect h3 .en {
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-size: 1.3rem;
font-weight: 300;
}

figure.effect figcaption::before,
figure.effect p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect p {
	position: absolute;
	bottom: 30px;
	left: 0;
    padding: 0 20px;
    font-size: 14px;
    font-size: 1.4rem;
	width: 100%;
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect p span {
display: inline-block;
}

figure.effect:hover h3 {
	color: #fff;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-50px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-50px,0);
}

figure.effect:hover figcaption::before ,
figure.effect:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*-----------------------------------biomass*/

#biomassSec {
padding: 100px 0;
}

#biomassSec .bsInr {
width: 90%;
max-width: 1500px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

#biomassSec .bsInr .bioImg {
width: 50%;
}
.bioInfo {
width: 46%;
}

.bioInfo h2 {
font-size: 22px;
font-size: 2.2rem;
position: relative;
padding-left: 30px;
}

.bioInfo h2:before {
content: "";
width: 22px;
height: 5px;
background: #259944;
position: absolute;
left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit- transform:translateY(-50%);
}

.bioInfo h3 {
padding: 20px 0;
font-size: 38px;
font-size: 3.8rem;
font-weight: 400;
line-height: 1.5;
}

.bioInfo .txt {
padding-bottom: 30px;
}

/*-----------------------------------other/work-facility*/
#otherSec{
padding-bottom: 100px;
}

#otherSec .col2List ul {
display: flex;
justify-content: space-between;
}

#otherSec .col2List ul li {
width: 50%;
}

.col2Img {
position: relative;
z-index: 0;
overflow: hidden;
width: 100%;
background: #fff;
}

.col2Img img {
position: relative;
z-index: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: #fff;
display: block;
transition-duration: 0.5s;
}



#otherSec .col2List ul li a:hover .col2Img img {
transform: scale(1.3);
transition-duration: 0.5s;
opacity: 0.8;
}

.col2Img .col2Title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  text-align: center;
  color: #fff;
  z-index: 1;
  width: 100%;
}

.col2Img .col2Title h2 {
font-size: 42px;
font-size: 4.2rem;
font-weight: 500;
}

.col2Img .col2Title h2 span {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
display: block;
padding: 5px 0 20px;
}

.col2Img .col2Title h3 {
font-size: 22px;
font-size: 2.2rem;
font-weight: 400;
}

.co2Info {
padding: 10px 20px;
box-sizing: border-box;
font-size: 15px;
font-size: 1.5rem;
}
.co2Info .col2Btn {
padding-top: 10px;
}

.co2Info .col2Btn a {
position: relative;
padding-right: 15px;
color: #818181;
}


.co2Info .col2Btn a:hover {
text-decoration: none;
color: #259944;
}


.co2Info .col2Btn a:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 1px #b4b4b4;
  border-right: solid 1px #b4b4b4;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -5px;
}

/*-----------------------------------company*/
#companySec {
background: url("../images/bg_01.jpg") center top no-repeat;
padding: 100px 0;
background-size: cover;
}


#companySec h2 {
font-size: 38px;
font-size: 3.8rem;
font-weight: 400;
text-align: center;
margin-bottom: 60px;
}

.comList {
width: 90%;
max-width: 1500px;
margin: 0 auto;
}
.comList ul {
display: flex;
justify-content: space-between;
}

.comList ul li {
width: 23%;
}

.comList ul li .comImg {
overflow: hidden;
width: 100%;
background: #fff;
}


.comList ul li .comImg img {
display: block;
transition-duration: 0.5s;
}
.comList ul li a:hover .comImg img {
transform: scale(1.1);
transition-duration: 0.5s;
opacity: 0.6;
}
.comList ul li h3 {
position: relative;
font-size: 18px;
font-size: 1.8rem;
font-weight: normal;
display: inline-block;
padding-right: 15px;
padding-top: 10px;
}


.comList ul li h3:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 0;
}

/* for pc resize
-------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1550px) {
figure.effect:hover h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-80px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-80px,0);
}
.busList ul li.col3 figure.effect:hover h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-50px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-50px,0);
}
}

@media only screen and (max-width: 1370px) {
.bioInfo h3 {
    font-size: 32px;
    font-size: 3.2rem;
}

.col2Img .col2Title h2 {
    font-size: 38px;
    font-size: 3.8rem;
}

.busInfo .biInr h3 {
    font-size: 32px;
    font-size: 3.2rem;
    padding: 20px 0;
}

}

@media only screen and (max-width: 1200px) {
.busMain img {
width: 120%!important;
}

.col2Img .col2Title h2 {
    font-size: 32px;
    font-size: 3.2rem;
}
.col2Img .col2Title h3 {
    font-size: 20px;
    font-size: 2.0rem;
}
#companySec h2 {
    font-size: 32px;
    font-size: 3.2rem;
}
.comList ul li h3 {
    font-size: 16px;
    font-size: 1.6rem;
}

.busList {
    padding: 40px;
}
}

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

figure.effect p {
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.3!important;
}
figure.effect:hover h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-60px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-60px,0);
}

.busList ul li.col3 figure.effect:hover h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
.bioInfo h3 {
    font-size: 29px;
    font-size: 2.9rem;
}
}

@media only screen and (max-width: 1080px) {
.topMvTxt h1 .en {
    font-size: 74px;
    font-size: 7.4rem;
}
figure.effect p {
display: none;
}
figure.effect:hover h3 {
	-webkit-transform:none;
	transform:none;
}
.busList ul li.col3 figure.effect:hover h3 {
	-webkit-transform: none;
	transform:none;
}
figure.effect h3 {
    bottom: 20px;
    color: #fff;
    -webkit-transition:none;
    transition:none;
    -webkit-transform:none;
    transform:none;
}

.col2Img .col2Title h3 {
    font-size: 18px;
    font-size: 1.8rem;
}
.col2Img .col2Title h2 span {
    font-size: 13px;
    font-size: 1.3rem;
}
.comList ul li {
    width: 24%;
}
.bioInfo h3 {
    font-size: 26px;
    font-size: 2.6rem;
}
.busInfo .biInr h2 {
    font-size: 20px;
    font-size: 2.0rem;
}
.bioInfo h2 {
    font-size: 20px;
    font-size: 2.0rem;
}
}

@media only screen and (max-width: 1024px) {
.busMain img {
    width: 150% !important;
}
}

@media only screen and (max-width: 900px) {
.busInfo {
    display: block;
}
.busInfo .biInr {
    width: 100%;
    max-width: 100%;
}
.bgLayer {
    background: rgba(0, 0, 0, 0.5);
}
.busList {
    padding: 0;
    background: none;
}
.busList ul li {
    width: 49%;
    margin-bottom: 18px;
}
figure.effect h3 .ja {
    font-size: 20px;
    font-size: 2.0rem;
}
#businessSec {
padding-bottom: 40px;
}

#biomassSec .bsInr {
    display: block;
}
#biomassSec .bsInr .bioImg {
    width: 100%;
    margin-bottom: 30px;
}
.bioInfo {
    width: 100%;
}
#biomassSec {
    padding: 60px 0;
}
.col2Img .col2Title h2 {
    font-size: 28px;
    font-size: 2.8rem;
}
.col2Img .col2Title h3 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.3;
}
#otherSec {
    padding-bottom: 60px;
}
.comList ul {
flex-wrap: wrap;
}
.comList ul li {
    width: 49%;
    margin-bottom: 30px;
}
}

/* for sp
-------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
#topMv {
    height: 85vh;
}
.topMvTxt h1 .en {
    font-size: 32px;
    font-size: 3.2rem;
}
.topMvTxt h1 {
    font-size: 18px;
    font-size: 1.8rem;
}
.topMvTxt h1 .ja span:after {
    width: 80px;
    height: 1px;
    left: 95px;
    top: 10px;
}
#topicsSec .tsTop h2 {
    font-size: 24px;
    font-size: 2.4rem;
}
.tsList ul li .title {
display: block;
width: 100%;
padding: 10px 0;
}
.tsList ul li {
flex-wrap: wrap;
}
.tsList ul li .category {
font-size: 12px;
font-size: 1.2rem;
width: 100px;
}
.busMain img {
    width: 100% !important;
}

.busInfo .biInr h2 {
    font-size: 16px;
    font-size: 1.6rem;
}
.busInfo .biInr h3 {
    font-size: 24px;
    font-size: 2.4rem;
    padding: 40px 0;
    line-height: 1.3;
}

.busInfo .biInr h3 span {
    font-size: 14px;
    font-size: 1.4rem;
}

.bgLayer {
display: none;
}
.busInfo {
    position: inherit;
    z-index: 2;
    top: 0;
    left: 0;
    transform: none;
    -webkit- transform:none;
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
    color: #000;
}

.busInfo .biInr {
    color: #000;
}
#topicsSec {
    padding-bottom: 40px;
}

.busList ul {
display: block;
}
.busList ul li {
    width: 100%;
}

.busList ul li.col3 {
    width: 100%;
    margin-bottom: 18px;
}
.bioInfo h2 {
    font-size: 16px;
    font-size: 1.6rem;
}
.bioInfo h3 {
    font-size: 20px;
    font-size: 2.0rem;
}
#otherSec .col2List ul {
display: block;
}
#otherSec .col2List ul li {
    width: 100%;
}
.co2Info {
    padding: 10px 0 30px;
    font-size: 14px;
    font-size: 1.4rem;
    width: 90%;
    margin: 0 auto;
}
#otherSec {
    padding-bottom: 30px;
}

#companySec {
    padding: 40px 0 30px;
}

#companySec h2 {
margin-bottom: 30px;
}
#companySec h2 {
    font-size: 24px;
    font-size: 2.4rem;
}
.comList ul li h3 {
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 0;
}


}


.busList ul li.fadein:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.busList ul li.fadein:nth-of-type(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
.busList ul li.fadein:nth-of-type(4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}
.busList ul li.fadein:nth-of-type(5) {
	-moz-transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-o-transition-delay:800ms;
	-ms-transition-delay:800ms;
	}

#otherSec .col2List ul li:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.comList ul li.fadein:nth-of-type(2) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
.comList ul li.fadein:nth-of-type(3) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
.comList ul li.fadein:nth-of-type(4) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}

    
/* animation
-------------------*/
.mvfadein {
	opacity : 0;
	transition : all 1000ms;
	}

.mvfadein.scrollin {
	opacity : 1;
}
    
/* android
-------------------*/
.android .comList ul li h3 {
    font-size: 11px;
    font-size: 1.1rem;
}


/*-----------------------------------comingsoon*/

.cs section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding-top: 200px;
text-align: center;
}