@charset "UTF-8";/****************************************
contents
*****************************************/
.icon_scroll{position: absolute;width: 100%;text-align: center; bottom: 0px;left: 0;right: 0;margin: auto;animation: vertical 1s ease-in-out infinite alternate;}
@keyframes vertical {
 0% { transform:translateY(-10px); }
100% { transform:translateY(0px); }
}

.box__centered{left: 50%;position: absolute;top: 50%;}
.box__contents{text-align: center;transform: translate(-50%,-50%);}
.box{height: 800px}
.box.stepanime{z-index:1;width: 100%;height: 100%;overflow: hidden;position: relative;background: url(../images/top/mainvisual.jpg) no-repeat center bottom;background-size:cover;}
.box.stepanime:before{
content:"";display:block;position:fixed;top:0;left:0;z-index:-1;width:100%;height:100%;background: url(../images/top/mainvisual.jpg) no-repeat center bottom;background-size:cover;}
#steps,
#steps2,
#steps3{width:100%;height: 420px;margin:50px auto 0; position:relative;}
.box .steplogo{position: absolute;text-align: center;top:-22%; left: 0;right: 0;margin: auto;}
.box .stepcatch{position: absolute;text-align: center;top:-2%; left: 0;right: 0;margin: auto;
font-feature-settings: "pkna";-moz-font-feature-settings: "pkna";-webkit-font-feature-settings: "pkna";letter-spacing: 0.2em;font-size: 2.4rem;
width: 2.4rem;margin: auto;color: #3B6A42;
writing-mode: vertical-rl;-ms-writing-mode: tb-rl;-webkit-writing-mode:vertical-rl;
}



.s1{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: left; top:282px;}
.s2{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: left; top:272px;}
.s3{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: left; top:146px;;padding-left: 136px;}
.s4{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: left; top:136px;;padding-left: 136px;}
.s5{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: left; top:10px;;padding-left: 272px;}
.s6{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: left; top:0px;;padding-left: 272px;}

.sr1{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: right; top:282px;}
.sr2{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: right; top:272px;}
.sr3{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: right; top:146px;padding-right: 136px;}
.sr4{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: right; top:136px;padding-right: 136px;}
.sr5{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: right; top:10px;padding-right: 272px;}
.sr6{position: absolute;width: 1040px;margin: auto;left: 0;right: 0;text-align: right; top:0px;padding-right: 272px;}


.s1 img,.sr1 img,
.s3 img,.sr3 img,
.s5 img,.sr5 img{vertical-align: top;width: 10px;height: 136px}
.s2 img,.sr2 img,
.s4 img,.sr4 img,
.s6 img,.sr6 img{vertical-align: top;width: 136px;height: 10px}



.s1,.sr1{-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.s2,.sr2{-webkit-animation-delay:1s;animation-delay:1s;}
.s3,.sr3{-webkit-animation-delay:1.5s;animation-delay:1.5s;}
.s4,.sr4{-webkit-animation-delay:2s;animation-delay:2s;}
.s5,.sr5{-webkit-animation-delay:2.5s;animation-delay:2.5s;}
.s6,.sr6{-webkit-animation-delay:3s;animation-delay:3s;}
.steplogo{-webkit-animation-delay:4s;animation-delay:4s;top:-22%;}
.stepcatch{-webkit-animation-delay:5s;animation-delay:5s;}
.bt{-webkit-animation-delay:5.5s;animation-delay:5.5s;}



/*-webkit-animation-duration: 1s;  animation-duration: 1s;-webkit-animation-duration: 2s;  animation-delay:2s;*/

.box.project{z-index:1;width: 100%;height: 100%;overflow: hidden;position: relative;}
.box.project:after {
 position: absolute; content: ""; display: block;z-index:-1; width: 100%; height: 100%; top: 0; background: url("../images/top/project_bg.jpg") no-repeat center;background-size: cover;}


.box.recruit{z-index:1;width: 100%;height: 100%;overflow: hidden;position: relative;}
.box.recruit:after {
 position: absolute; content: ""; display: block;z-index:-1; width: 100%; height: 100%; top: 0; background: url("../images/top/recruit_bg.jpg") no-repeat center;background-size: cover;}
 
.box.project .bt,
.box.recruit .bt{position: absolute;text-align: center;bottom:5%; left: 0;right: 0;margin: auto;}
.box.project .stepcatch,
.box.recruit .stepcatch{color: #fff}

/*#steps2 div,
#steps2 h2,
#steps2 h3,
#steps2 .bt,
#steps3 div,
#steps3 h2,
#steps3 h3,
#steps3 .bt{display: none}*/


.example{z-index:1;background: #fff;padding: 80px 0;text-align: center;position: relative;}
.example li{margin-top: 60px;}
.example .button {  position: relative;  display: block;  padding: 0em;  border: 1px solid #3B6A42;  transition: all .3s;  letter-spacing: 0em;text-indent:0em;cursor: pointer}

@media screen and (min-width:768px){ /*PC独自設定*/


.example figure {  position: relative;  overflow: hidden;  width:100%;  height: 150px;  color: #fff;background: #000}
.example figure img{opacity: 1;filter: brightness(120%)}
.example li img {transition: all 0.4s ease-out 0.1s;}
.example li:hover img {transform: scale(1.2);}
.example figcaption {  position: absolute;  top: 0;  left: 0;  z-index: 2;  width: 100%;  height: 100%;  padding: 15px;  background: rgba(0,0,0,.4);  -webkit-transition: .3s;  transition: .3s;  opacity: 0;}
.example figcaption h3{margin-top: 18%}
.example figure:hover figcaption {  opacity: 1;}


}

@media screen and (max-width:768px){
.icon_scroll img{width: 40px}
.box.stepanime .inner--long{height: 80%}

#steps,
#steps2,
#steps3
{width:100vw;margin:0px auto 0; position:relative;}

.s1{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: left; top:230px}
.s2{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: left; top:230px;}
.s3{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: left; top:193px;padding-left:40px; }
.s4{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: left; top:193px;padding-left: 43px;}
.s5{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: left; top:156px;padding-left: 83px}
.s6{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: left; top:156px;padding-left: 83px;}

.sr1{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: right; top:230px;}
.sr2{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: right; top:230px;}
.sr3{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: right; top:193px;padding-right:40px;}
.sr4{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: right; top:193px;padding-right:43px;}
.sr5{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: right;top:156px;padding-right: 83px;}
.sr6{position: absolute;width:300px;left: 0;right: 0;margin: auto;text-align: right; top:156px;padding-right:83px;}



.s1 img,.sr1 img,
.s3 img,.sr3 img,
.s5 img,.sr5 img{vertical-align: top;width: 3px;height:40px}
.s2 img,.sr2 img,
.s4 img,.sr4 img,
.s6 img,.sr6 img{vertical-align: top;width:40px;height: 3px}

.box .steplogo{top:0%;}
.box .stepcatch{top:18%;}
.box .steplogo img{width: 120px}
.box .stepcatch{width: 100%}

.box.project .stepW img,
.box.recruit .stepW img{height: 120px;width: auto;margin: 20% 0 30%}

.box.project .bt,
.box.recruit .bt{bottom: 2%}
.example .col3{width:80%;margin: 40px auto 0;text-align: left}
.example li{margin-top: 40px;}
.example figcaption h3{margin: 12px 0 20px 0;color: #37683E;}
.example figure img{width: 100%}
}