@import (once) "default.less";
@import (once) "font.less";


/* top ///////////////////////*/
.top{
.pr;
border-top:5px @c1 solid;

.area{
.oh;
.pr;
.as(1/.5);
}

.wrap,
.mask{
.pa;
bottom:0;
width:260%;
margin-left:-80%;
}

.mask{
z-index:1;
height:100%;

ul{
.dt;
width:100%;
height:100%;
}
li{
.dtc;
}

.glay{
background:rgba(0,0,0,.5);
}

}

.top_title{
.pa;
left:0;
right:0;
margin:0 auto;
width:100%;
height:100%;
z-index:2;
.oh;
}

h2{
.pa;
.tac;
left:0;
right:0;
margin:0 auto;
top:20%;
font-size:7rem;
line-height:7rem;
.ffgb;
color:#FFF;
letter-spacing:.05em;
transition:.6s;
text-shadow: 0 0 30px #000;
}

.big{
transform:scale(500%);
opacity:0;
}

.prev,
.next{
.pa;
z-index:3;
top:50%;
cursor:pointer;
width:6rem;
height:3rem;
/* background:rgba(0,0,0,.5); */
margin-top:-1rem;
.jc;
}

.next{
right:0;
}

.prev:before,
.next:before{
content:'';
.pa;
.db;
width:2rem;
height:2rem;
border-top:2px #FFF solid;
border-right:2px #FFF solid;
}

.prev:before{
transform:rotate(225deg);
}

.next:before{
transform:rotate(45deg);
}

}


@media (max-width:@w3){
.top{

.area{
.as(1/.6);
}

.prev,
.next{
width:4rem;
}
.prev:before,
.next:before{
width:1.5rem;
height:1.5rem;
}

}
}


@media (max-width:@w2){
.top{

.area{
.as(1/.7);
}

h2{
font-size:5rem;
line-height:5rem;
}

.wrap,
.mask{
.pa;
bottom:0;
width:240%;
margin-left:-70%;
}

.prev,
.next{
width:5rem;
}

}
}


@media (max-width:@w1){
.top{

h2{
font-size:12vw;
line-height:12vw;
}

.prev,
.next{
width:12vw;
height:10vw;
}

.prev:before,
.next:before{
width:1rem;
height:1rem;
}

}
}



/* intro ///////////////////////*/
.intro{
padding:5rem 0;
background: @c1;
color:#FFF;

.dl{
.dt;
width:100%;
}
.dd{
.dtc;
.vam;
}

.copy{
.oh;
}

.mark{
.pr;
pointer-events:none;
img{
.pa;
top:0;
left:0;
}
.space{
.ps;
opacity:0;
}
}

}


@media (max-width:@w3){
.intro{
padding:5rem 0 3rem 0;

.dl{
.db;
}
.dd{
.db;
}

}
}


@media (max-width:@w1){
.intro{


}
}


/* intro copy ///////////////////////*/
.intro .copy{
padding:0 2rem 3rem 0;

.mark{
width:180px;
.center;
}

h3{
.nw;
.ffgm;
font-size:2rem;
line-height:2rem;
padding:2rem 0 1rem 0;
.tac;
}

h4{
.nw;
.ffgm;
font-size:1.3rem;
line-height:1.3rem;
.tac;
}

}

@media (max-width:@w3){
.intro .copy{
padding:0 0 5rem 0;

}
}


@media (max-width:@w1){
.intro .copy{

h3{
font-size:1.75rem;
line-height:1.75rem;
}

h4{
font-size:1.15rem;
line-height:1.15rem;
}

}
}



/* other ///////////////////////*/
.other{
padding:2rem;
background:@c1;

ul{
.dt;
width:100%;
}

li{
.dtc;
margin:.5rem 0;
width:50%;
}

li:nth-child(odd){
padding-right:.5rem;
}
li:nth-child(even){
padding-left:.5rem;
}

h3{
color:#FFF;
.ffgm;
font-size:1.6rem;
line-height:1.6rem;
padding:2rem 0;
.tac;
}

a{
.db;
border:1px #FFF solid;
}

a:hover h3{
background:@hover;
}

}


@media (max-width:@w2){
.other{
padding:2rem 1rem;

ul{
.db;
}

li{
.db;
margin:.5rem 0;
padding:0;
width:100%;
}

li:nth-child(odd){
padding:0;
}
li:nth-child(even){
padding:0;
}

}
}

/* voice ///////////////////////*/
.voice:before{
content:'';
.db;
background:url('../image/other03.jpg') no-repeat 50% 50%;
background-size:cover;
width:100%;
height:200px;
}

/* recruit ///////////////////////*/
.recruit:before{
content:'';
.db;
background:url('../image/other01.jpg') no-repeat 50% 30%;
background-size:cover;
width:100%;
height:200px;
}


/* new whats_new ///////////////////////*/
.new{
padding:5rem 0;
background: @c1;
color:#FFF;
}

.new .whats_new{

h2{
.nw;
.ffgb;
font-size:1.3rem;
line-height:1.3rem;
letter-spacing:.05em;
padding:0 0 1.6rem 0;
}

li{
.pr;
padding:.75rem 0 .75rem 1.5rem;
line-height:1.5rem;
border-bottom:1px rgba(255,255,255,1) solid;
}

li:before{
content:'';
.pa;
.db;
top:1rem;
left:0;
width:1rem;
height:1rem;
background:url('../image/ball.svg') no-repeat 0 0;
}

li p{
.dib;
.bold;
padding:0 1rem 0 0;
}

a{
color:#FFF;
}
a:hover{
color:@hover;
.tdu;
}

}


@media (max-width:@w3){
.intro .whats_new{
.db;
margin:auto;

}
}


@media (max-width:@w1){
.intro .whats_new{

li{
padding:.75rem 0 .75rem 1.5rem;
}

li p{
.db;
}

}
}