@charset "utf-8";
/* CSS Document */
body{color:#fff;}
#loader{position:relative;margin-top:50vh;-webkit-transform: translateY(-50%) ;transform: translateY(-50%);}
#loader-bg{position:fixed;width:100%;height:100%;top:0%;z-index:9999;background:url(../img/u1.jpg);
background-size:cover;background-position:center center;text-align:center;}
#loader-bg h1{font-size:2rem;}
#loader-bg h1 strong{font-weight:700;}
#loader-bg h1 span{
display:block;
margin:0 auto;
font-family: 'Abel', sans-serif;
font-size:0.5rem;
}
#loader-bg p img{
display:block;
margin:1rem auto;
width:45px;
height:auto;
}
#loader-bg p:nth-of-type(1){font-size:160%;}
#loader-bg p:nth-of-type(2){font-weight:300;}
#mainimage{
width:100%;
height:100vh;
overflow:hidden;
top:0;
z-index:-1;
}
#mes{position:absolute;width:100%;height:100vh;top:0;}
#mes h3{
position:absolute;
top:50%;
right:5%;
transform:translateY(-40%);
z-index:99;
font-weight:900;
font-size:250%;
letter-spacing:0.5rem;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#mes p{
position:absolute;
bottom:1rem;
left:50%;
transform:translateX(-50%);
color:#bbb;
text-align:center;
font-family: 'Abel', sans-serif;
font-size:0.7rem;
z-index:-1;
line-height:1.7;
}
#mes p i{font-size:1rem;display:inline-block;}
main{border-top:1px solid #777;}
a{color:#fff;}
main > section{border-bottom:1px solid #777;}
main > section > div{
height:100vh;
position:relative;
}
#recruit{background:#000;}
#recruit > div{background:url(../img/u7.jpg);background-size:cover;background-position:center center;}
main > section > div div{position:absolute;right:0;bottom:3rem;}
main > section section{
display:flex;
flex-direction:column;
justify-content:center;
align-items: center;
height:100vh;
text-align:center;
}
#recruit h4{
font-weight:900;
font-size:330%;
line-height:1.3;
margin-bottom:0.5rem;
}
#recruit h4 span{
position:relative;
display:inline-block;
margin-right:0.25rem;
}
#recruit h4 span::after{
position:absolute;
top:-1.1rem;
left:1.5rem;
content: '●';
color:#ff5900;
font-size:25%;
}
#recruit section p{font-size:150%;}
#recruit section p span{
display:block;
font-weight:900;
font-size:165%;
line-height:1;
}
.block_link a{
display:block;
background:#ff5900;
padding:0.5rem 3rem 0.5rem 1rem;
margin:0 0 0.5rem;
font-size:90%;
}
.block_link p{font-size:70%;font-weight:400;}
.section_bottom{
font-size:80%;
text-align:center;
background:#000;
padding:1.5rem;
}
.section_bottom strong{font-size:100%;font-weight:700;}
#works{background:#000;}
#works > div{background:url(../img/u9.jpg);background-size:cover;background-position:center center;}
#works h4{
font-weight:900;
font-size:270%;
line-height:1.25;
}
#works h4 span{
display:block;
margin:0 auto ;
font-family: 'Abel', sans-serif;
font-weight:normal;
font-size:30%;
}
#company{background:#000;}
#company > div{background:url(../img/u10.jpg);background-size:cover;background-position:center center;}
#company h4{
font-weight:900;
font-size:170%;
margin-bottom:1rem;
}
#company section p{
font-weight:900;
font-size:270%;
line-height:1.1;
}
#company section p span:nth-of-type(1){
display:block;
margin:0 auto 0.2rem;
font-family: 'Abel', sans-serif;
font-weight:normal;
font-size:30%;
}
@media screen and (max-width:768px) { 
#loader-bg h1{font-size:2rem;}
#mes h3{transform:translateY(0);}
#recruit h4 span::after{top:-0.8rem;left:1.2rem;}
}
/* タブレット縦t */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#loader-bg h1{font-size:2.5rem;}
#loader-bg h1 span{margin:0 auto;font-size:0.75rem;}
#loader-bg p img{margin:1rem auto;width:60px;}
#loader-bg p:nth-of-type(1){font-size:200%;}
#mes h3{right:7%;font-size:380%;}
#mes p{bottom:5rem;}
main > section > div div{bottom:6rem;}
.block_link a{padding:0.75rem 5rem 0.75rem 2rem;margin:0 0 1rem;font-size:100%;}
.block_link p{font-size:80%;}
.section_bottom{font-size:90%;padding:2.5rem 0;}
#recruit h4 span{margin-right:0.25rem;}
#recruit h4 span::after{top:-2rem;left:1.5rem;content: '●';font-size:60%;}
}
@media screen and (max-width:480px) {
#loader-bg{background:url(../img/u1a.jpg);background-size:cover;background-position:center center;}
#loader-bg h1{font-size:1.25rem;}
#loader-bg p:nth-of-type(1){font-size:150%;}
#mes h3{top:55%;letter-spacing:0.2rem;font-size:230%;}
#recruit h4 span{margin-right:0.25rem;}
#recruit h4 span::after{top:-1.5rem;left:1.1rem;content: '●';font-size:60%;}
#recruit > div{background:url(../img/u7a2.jpg);background-size:70% auto;background-position:center center;}
#company > div{background:url(../img/u10a.jpg);background-size:cover;background-position:center center;}
#works > div{background:url(../img/u9a.jpg);background-size:cover;background-position:center center;}
}