@charset "UTF-8";

html,body,.visual_area {
height:100%;
}

.visual_area{
width: 100%;
overflow: hidden;
position: relative;
}

/* canvas animation */
.bg_area{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100vh;
z-index: -1;
overflow: hidden;
background-color: #000;
}

/*header--------------------------------------*/
.logo {
opacity: 0;
}

/*main visual--------------------------------------*/

.visual_copy{
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%) ;
-webkit-transform: translateY(-50%) ;
-webkit-font-smoothing:antialiased;
}

.maincopy{
font-size: 8rem;
color: white;
font-weight: 600;
margin-bottom: 2px;
opacity: 0;
}

.subcopy{
color: #fff;
line-height: 1.8em;
font-size: 2.0rem;
font-weight: bold;
margin-top: 20px;
opacity: 0;
}

/*scroll--------------------------------------*/
.scroll_btn{
color: white;
width: 100%;
text-align: center;
bottom: 90px;
position: absolute;
font-size: 1.3rem;
opacity: 0;
}

.scroll_btn .icon{
height: 38px;
position: absolute;
top: 30px;
width: 2px;
left: 50%;
margin-left: -1px;
overflow: hidden; 
}

.scroll_btn .icon p{
position: absolute;
width: 1px;
height: 100%;
border-left: 1px solid #fff;
left: 50%;
margin-left: -1px;
-webkit-animation: scrollLine 1.5s linear 0s infinite;
-moz-animation: scrollLine 1.5s linear 0s infinite;
animation: scrollLine 1.5s linear 0s infinite; 
}

@-webkit-keyframes scrollLine {
0% {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0); }
100% {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0); } }

@-moz-keyframes scrollLine {
0% {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0); }
100% {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0); } }

@keyframes scrollLine {
0% {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0); }
100% {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0); } }


/* スマホ用 */
@media screen and (max-width:640px){

.maincopy{
font-size: 12vw;
}

.subcopy{
color: #fff;
line-height: 1.6em;
font-size: 1.4rem;
width: 95%;
}

.scroll_btn{
bottom: 50px;
}

}


/*about--------------------------------------*/

.about_area{
display:flex;
justify-content: center;	
}

.about_area li{
position: relative;	
text-align: center;
width: 33.3%;
}

.about_area li img{
max-width: 100%;
}

.about_area li span{
width: 100px;
position: absolute;
top: -50px;
left: calc(50% - 50px);
z-index: 100;
}

.about_area li h3{
padding: 70px 0 20px;;
position: relative;
font-size: 2.8rem;
font-weight: bold;
}

.about_area li p{
font-size: 1.4rem;
line-height: 1.7em;
width: 90%;
margin: 0 auto;
}

/* スマホ用 */
@media screen and (max-width:640px){
.about_area{
display: block;
}

.about_area li{
margin-bottom: 30px;
width: 100%;
}
	
.about_area li span{
width: 80px;
position: absolute;
top: -40px;
left: calc(50% - 40px);
z-index: 100;
}

.about_area li h3{
padding: 55px 0 10px;;
font-size: 2.4rem;
}

.about_area li p{
font-size: 1.4rem;
line-height: 1.7em;
}

.about_area li:last-child{
margin-bottom: 0;
}

}


/*works--------------------------------------*/

.works_area{
display:flex;
flex-wrap:wrap;	
}

.works_area li{
width: 50%;
margin-bottom: 30px;
}

.works_area li a{
color: black;
text-decoration: none;
display: inline-block;
}

.works_area li a:hover{
box-shadow: 0 0 25px  rgba(0, 0, 0, 0.5);
transition: .3s;
z-index: 100;
position: relative;
background-color: white;
}

.works_area li img{
width: 100%;
}

.works_area li h3{
font-size: 1.6rem;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.6em;
}

.works_area li p{
font-size: 1.2rem;
color: #515151;
}

.works_area li div.text_box{
background: url(../img/arrow.svg) right 20px center no-repeat;
background-size: 7px;
padding: 20px 40px 20px 20px;
}

/* スマホ用 */
@media screen and (max-width:640px){
.works_area{
display: block;
}

.works_area li{
width: 100%;
}

.works_area li h3{
margin-bottom: 5px;
}

.works_area li div.text_box{
background: url(../img/arrow.svg) right center no-repeat;
background-size: 7px;
padding: 10px 20px 0 0;
}	

.works_area li:last-child{
margin-bottom: 0;
}

}