@charset "UTF-8";
/* CSS Document */
body
{
  overflow-x: hidden;
}

#logo_anime_area{
position: fixed;
width: 100%;
height: 100%;
z-index: 200;
background-color: #4ac0c4;
animation: logo_anime 0.6s ease 2s forwards;
pointer-events: none;
}
@keyframes logo_anime {
0% {
opacity: 1;
filter:alpha(opacity=100);
display: block;
}
100% {
opacity: 0;
filter:alpha(opacity=0);
display: none;
}
}

#logo_anime_area #logo_anime{
width: 300px;
height: 300px;
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
}
#movie_bg{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    left: 0;
    top:0;
}
#movie_bg video{
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 0;
    left: 0;
    top:0;
}
.scroll
{
  position: fixed;
  bottom: 0;
  left: 0;
}
.bg1.scroll{
width:5000px;
height: 100%;
background:url("../img/top/bg1.png")  repeat-x;
}
.bg2.scroll{
width:8000px;
height: 100%;
background:url("../img/top/bg2.png")  repeat-x;
}
.works.scroll{
width:6600px;
height: 100%;
text-align: left;
z-index: 10;
}
#works_ttl{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#works_ttl h2{
color: rgba(0,0,0,0.05);
font-family: 'Montserrat', sans-serif;
font-size: 180px;
font-weight: 800;
line-height: 0.45;
margin-left: -20px;
user-select: none;
}
#works_ttl h3{
color: #fff;
font-size: 20px;
line-height: 1.8;
margin-top: -10px;
margin-left: 80px;
letter-spacing: 2px;
}
#works_ttl h3 span{
background: #000;
}
#works_ttl p{
font-size: 14px;
line-height: 2;
margin-left: 80px;
margin-top: 10px;
}
.works_box{
position: relative;
width:700px;
height: 100%;
float: left;
margin-right: 20px;
}
.works_box#cat{
margin-left: 680px;
}
.works_box a{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
transition: .25s linear;
}
.works_box a:before {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    margin: auto 0;
    background-color: #666;
    transition: .2s ease-in;
}
.works_box a:hover:before {
    height: 100%;
    background-color: #000;
}

/*  ----------  各worksの色設定 ----------  */

#camp.works_box a:before {background-color: #FFFE00;}
#camp.works_box a:hover:before {background-color: #25d51a;}
#camp.works_box h2{color:#25d51a; }

#monster.works_box a:before {background-color: #9C03C8;}
#monster.works_box a:hover:before {background-color: #dd0009;}
#monster.works_box h2{color:#dd0009; }


#cat.works_box a:before {background-color: #000;}
#cat.works_box a:hover:before {background-color: #af0100;}
#cat.works_box h2{color:#af0100; }

#recruit01.works_box a:before {background-color: #FFFE00;}
#recruit01.works_box a:hover:before {background-color: #4172ed;}
#recruit01.works_box h2{color:#4172ed; }

#rpg.works_box a:before {background-color: #af0100;}
#rpg.works_box a:hover:before {background-color: #000;}
#rpg.works_box h2{color:#000; }

#architect.works_box a:before {background-color: #FFFE00;}
#architect.works_box a:hover:before {background-color: #000;}
#architect.works_box h2{color:#000; }

#farm.works_box a:before {background-color: #25d51a;}
#farm.works_box a:hover:before {background-color: #dd0009;}
#farm.works_box h2{color:#dd0009; }

#stage.works_box a:before {background-color: #af0100;}
#stage.works_box a:hover:before {background-color: #f6ae44;}
#stage.works_box h2{color:#f6ae44; }


.works_box h2{
position: absolute;
top: 30%;
left: 100px;
z-index: 50;
font-size:22px;
line-height: 2.0;
border-left: white 1px solid;
transition: .3s ease-in-out .1s;
padding-left: 20px;
opacity: 0;
filter:alpha(opacity=0);
}
.works_box:hover h2{
opacity: 1;
filter:alpha(opacity=100);
}
.works_box h2 span{
background: white;
margin-left: 0px;
padding: 4px;
transition: .3s ease-in-out .1s;
opacity: 0;
filter:alpha(opacity=0);
}
.works_box:hover h2 span{
opacity: 1;
filter:alpha(opacity=100);
margin-left: 20px;
}
.works_box h3{
position: absolute;
top: 30%;
left: 0;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
font-weight: 200;
writing-mode: vertical-rl;
color: black;
letter-spacing: 3px;
transition: .3s ease-in-out;
z-index: 50;
}
.works_box:hover h3{
left:50px;
color: white;
}
.works_box h3 span{
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.works_box .works_icon{
padding-left: 100px;
padding-right: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: .3s ease-in-out;
opacity: 1;
filter:alpha(opacity=100);
}
.works_box:hover .works_icon{
opacity: 0;
filter:alpha(opacity=0);
}
.works_box .works_icon img{
width: 450px;
height: 450px;
transition: .5s ease-in-out;
}
.works_box:hover .works_icon img{
transform: scale(1.1);
}
.works_box .works_page{
width: 700px;
position: absolute;
}
.works_box .works_page img{
opacity: 0;
filter:alpha(opacity=0);
width: 100%;
transition: .3s ease-in-out;
}
.works_box:hover .works_page img{
opacity: 0.10;
filter:alpha(opacity=10);
}
.works_box .morebtn{
position:absolute;
bottom: 0;
right: 0;
z-index: 50;
transition: .3s ease-in-out;
opacity: 0;
filter:alpha(opacity=0);
}
.works_box:hover .morebtn{
opacity: 1;
filter:alpha(opacity=100);
}