@charset "utf-8";
/* CSS Document */
body{position:relative;font-family:'Noto Sans Japanese', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;font-weight:700;letter-spacing:0.1em;
background:#000;
color:#fff;
}
@media screen and (min-width:1024px) {body{font-size:1.1rem;} }
@media screen and (min-width:768px) and ( max-width:1024px) {body{font-size:1rem;} }
@media screen and (max-width:768px) { body{font-size:0.9rem;} }
@media screen and (max-width:480px) { body{font-size:0.8rem;} }

.sp{display:none;}.tab{display:none;}.pc{display:inline;}.sp_b{display:none;}
.w_red{color:#d10000;}
.w_red_b{background:#d10000;}

.center{text-align:center}

.menu{position:fixed;top:0;right:0;}
#hm {display:inline-block;position:relative;width:50px;height:50px;vertical-align:middle;}
#hm-icon {display:block;position:absolute;top:40%;left:45%;width:25px;height:1px;margin:3px 0 0;background:#fff;transition:.2s;}
#hm-icon:before, #hm-icon:after {display: block;content: "";position: absolute;top:50%;left:0;width:25px;height:1px;background:#fff;transition: .4s;}
#hm-icon:before{margin-top: -8px;}
#hm-icon:after{margin-top: 7px;}
#hm .close{background: transparent;}
#hm .close:before, #hm .close:after{margin-top: 0;}
#hm .close:before{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
#hm .close:after {transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}

#sp_menu{
position:fixed;top:0;display:none;z-index:11;width:100%;height:100%;
background:url(../img/s0.jpg);
background-size:cover;
background-position:center center;
}
#vision #sp_menu{
position:fixed;top:0;display:none;z-index:11;width:100%;height:100%;
background:url(../img/s28.jpg);
background-size:cover;
background-position:center center;
}
#works #sp_menu{
position:fixed;top:0;display:none;z-index:11;width:100%;height:100%;
background:url(../img/s27.jpg);
background-size:cover;
background-position:center center;
}
#recruit #sp_menu{
position:fixed;top:0;display:none;z-index:11;width:100%;height:100%;
background:url(../img/s61.jpg);
background-size:cover;
background-position:center center;
}
#information #sp_menu{
position:fixed;top:0;display:none;z-index:11;width:100%;height:100%;
background:url(../img/s129.jpg);
background-size:cover;
background-position:center center;
}
.inner{height:100%;display:flex;-webkit-justify-content:center;justify-content: center;-webkit-align-items:center;align-items:center;}
#sp_menu a{text-align:center;display:block;margin:0 auto;padding:0.5rem;font-size:1rem;color:#fff;}
#sp_menu .logo a{margin-bottom:20px;font-size:1.5rem;text-align:center;font-weight:900;}
#sp_menu .logo a span{
display:block;
font-size:70%;
font-weight:500;
line-height:1;
}
.logo small{text-align:center;margin:0 auto;display:block;font-size:0.4rem;font-weight:normal;}
header{position:absolute;top:0;font-weight:500;z-index:1000;width:100%;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;}
header h1{font-family:'Noto Sans Japanese';font-weight:700;font-size:200%;padding:1rem 2rem;}
header h1 a{color:#fff;}
header h1 a small{margin-left:1rem;display:inline-block;font-family: 'Abel', sans-serif;font-size:0.675rem;font-weight:normal;}
header h1 span{
font-size:70%;
display:inline-block;
margin-right:0.5rem;
}
header .menu{z-index:20;cursor:pointer;margin-right:15px;}
#mainimage{background-position:top center;}
header nav ul li a{font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}
#top header nav ul li:nth-of-type(1) a,
#vision header nav ul li:nth-of-type(2) a,
#works header nav ul li:nth-of-type(3) a,
#recruit header nav ul li:nth-of-type(4) a,
#information header nav ul li:nth-of-type(5) a,
#news header nav ul li:nth-of-type(6) a{
font-weight:900;
}
header nav ul li a:hover{color:#ddd;}
header nav li a span:before{
content:'';                
display:inline-block;    
background-color:transparent;
height:1rem; 
width:3px;
margin-right:0.3rem;
vertical-align:middle;
position:relative;
top:-2px;  
}
header nav li:hover a{font-weight:900;}
header nav li:hover a span:before{ background-color:#d10000;}
#top header nav li:nth-of-type(1) a span:before,
#vision header nav li:nth-of-type(2) a span:before,
#works header nav li:nth-of-type(3) a span:before,
#recruit header nav li:nth-of-type(4) a span:before,
#information header nav li:nth-of-type(5) a span:before,
#news header nav li:nth-of-type(6) a span:before{
background-color:#d10000;
}
header nav li:nth-of-type(7) a span:before{
height:0; 
width:0;
margin-right:0;
}
header nav li:nth-of-type(7) a:hover i {color:#d00000;}
#contact header nav li:nth-of-type(7) i {color:#d00000;}

@media screen and (max-width:768px){
header nav li a span:before{
content:'';                
display:none;    
height:0; 
width:0;
margin-right:0;
}
header nav li a{ font-weight:200;}
#top header nav li:nth-of-type(1) a,
#vision header nav li:nth-of-type(2) a,
#works header nav li:nth-of-type(3) a,
#recruit header nav li:nth-of-type(4) a,
#information header nav li:nth-of-type(5) a,
#news header nav li:nth-of-type(6) a,
#contact header nav li:nth-of-type(7) a{
font-weight:900;
background:#d10000;
}
#contact header nav li:nth-of-type(7) a i{
color:#fff;
}
}
#slogan{
padding:0 0 5rem;
color:#fff;
font-size:300%;
font-weight:900;
display:flex;
justify-content:center;
}
#slogan p{
display:flex;
flex-direction:column;
align-items: flex-end;
line-height:1.3;
}
#slogan span:nth-of-type(2){
font-size:30%;
font-weight:300;
}
footer nav{
position:relative;
letter-spacing:0;
}
footer nav ul{
width:100%;
height:3.5rem;
font-size:90%;
font-weight:500;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
}
footer nav ul li a{
font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
color:#999;
font-weight:500;
margin:0 0.75rem;
}
footer nav ul li:nth-of-type(6) a{margin-right:1.5rem;}

#top footer nav ul li:nth-of-type(1) a,
#vision footer nav ul li:nth-of-type(2) a,
#works footer nav ul li:nth-of-type(3) a,
#recruit footer nav ul li:nth-of-type(4) a,
#information footer nav ul li:nth-of-type(5) a,
#news footer nav ul li:nth-of-type(6) a,
#contact footer nav ul li:nth-of-type(7) a{
color:#000;
font-weight:900;
margin-left:1.5rem;
}

footer nav ul li a:hover{
color:#000;
font-weight:900;
}
footer nav li a span:before{
content:'';                
display:inline-block;    
background-color:transparent;
height:1rem; 
width:4px;
margin-right:0.5rem;
vertical-align:middle;
position:relative;
top:-2px;  
}
footer nav li:hover a span:before{ background-color:#d10000;}

#top footer nav li:nth-of-type(1) a span:before,
#vision footer nav li:nth-of-type(2) a span:before,
#works footer nav li:nth-of-type(3) a span:before,
#recruit footer nav li:nth-of-type(4) a span:before,
#news footer nav li:nth-of-type(6) a span:before,
#information footer nav li:nth-of-type(5) a span:before
{ background-color:#d10000;}

footer nav li:nth-of-type(7) a span:before{
height:0; 
width:0;
margin-right:0;
}
footer nav li:nth-of-type(7) a:hover i{color:#d00000;}
#contact footer nav li:nth-of-type(7) a i{color:#d00000;}

footer nav p{
position:absolute;
top:0;
right:0;
text-align:center;
font-size:80%;
line-heght:1;
vertical-align:middle;
height:3.5rem;
}
footer nav p a{
color:#fff;
background:#d10000;
display:block;
padding:0.3rem 1rem 0.7rem;
height:3.5rem;
}
footer nav p a:hover{background:#333;}
footer nav p a span{
display:block;
margin:-0.25rem auto 0;
}
footer > section{
position:relative;
padding:4rem 0;
color:#fff;
text-align:center;
background:url(../img/s8.jpg);
background-size:cover;
background-position:center center;
}
footer > section dt{font-size:150%;}
footer > section dt img{
display:block;
margin:0 auto 0.5rem;
width:60px;
height:auto;
}
footer > section dd:nth-of-type(1){
margin:0.5rem 0 0.75rem;
font-size:90%;
font-weight:700;
}
footer > section dd:nth-of-type(2){
font-size:90%;
font-weight:500;
line-height:1.7;
}
footer > section p{
position:absolute;
bottom:2rem;
right:2rem;
}
footer > section p img{
width:117px;
height:auto;
}
footer div{
background:#000;
color:#fff;
display:flex;
justify-content:space-between;
align-items: center;
font-size:80%;
}
footer div p{
display:inline-block;
background:#d10000;
padding:1rem 1.5rem;
text-align:center;
letter-spacing:0.05rem;
font-weight:900;
}
footer div a{
color:#fff;
padding:0 1rem;
font-weight:300;
}
footer div small{
display:inline-block;
font-size:50%;
font-weight:100;
margin-right:1rem;
}

/**********************************************************************
* Media Query For PC

760__1000 以上
***********************************************************************/

@media screen and (min-width: 760px) {
.is-fixed{
z-index:100;
width:100%;
-webkit-transition:.2s;
-moz-transition:.2s;
-ms-transition:.2s;
-o-transition:.2s;
transition:.2s;
}
.is-fixed nav ul li a{padding:15px 0;}
.is-fixed nav ul li.ec_shop a{padding:15px 45px;}
header{padding:0;width:100%;}
header .menu{display:none;}
header nav ul{text-align: right;display: flex;-webkit-align-items: center;align-items: center;}
header nav ul li{letter-spacing: 1px;}
header nav ul li a{color:#fff;font-size:0.9rem;margin-right:15px;display: block;-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;}
header nav ul li:nth-of-type(6) a{margin-right:20px;}
header h1 a small{display:block;margin-left:0;}
}
@media screen and (min-width:1000px) {
header nav ul li a{margin-right:30px;}
header nav ul li:nth-of-type(6) a{margin-right:35px;}
}
@media screen and (max-width:830px) and (min-width:768px){
header h1{font-size:175%;}
header nav ul li a{margin-right:8px;font-size:0.8rem;}
}
/**********************************************************************
* Media Query For PC
***********************************************************************/
@media screen and (max-width:768px){
.pc{display:none;}.tab{display:inline;}
footer nav ul{
height:auto;
flex-wrap:wrap;
padding:1rem 0.5rem;
line-height:2.5;
}
footer nav ul li a{margin:0 0.5rem;}
footer nav p{
position:relative;
height:auto;
}
footer nav p a span{
display:inline-block;
margin:0 ;
}
footer nav p i{margin-right:0.5rem;}
footer nav p a{
color:#fff;
background:#d10000;
display:block;
padding:0.75rem 0;
height:auto;
}
footer nav ul li:nth-of-type(6) a{margin-right:20px;}
footer > section{padding:3rem 0;}
footer > section p{
position:relative;
bottom:0;
right:0;
margin-top:1rem;
}
#slogan{padding:0 0 3rem;}
}
@media screen and (max-width:480px){
.sp{display:inline;}.pc2{display:none;}.sp_b{display:block;}.pc_b{display:none;}.tab{display:none;}header h1,header h2{padding:0.5rem 1rem;}
header h1{font-size:150%;}
header h1 a{color:#fff;}
#slogan{
padding:0 0 2rem;
font-size:250%;
}
footer > section p img{width:95px;}
footer div{display:block;}
footer div small{
display:block;
text-align:center;
margin:0;
padding:1rem 0;
}
footer > section{padding:2rem 0;}
footer > section dt img{width:50px;}
footer nav p{font-size:90%;}
footer nav p a{padding:1.25rem 0;}
footer div{font-size:90%;}
footer div small{
font-size:60%;
font-weight:300;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
header h1{font-size:280%;padding:1rem 2rem;}
header h1 a small{font-size:1rem;}
header nav ul li a{font-size:1.25rem;}
footer div small{font-weight:300;}
footer nav p a{padding:0.5rem 1rem 5rem ;}
footer nav ul{padding:2rem 0.5rem;}
footer nav ul li a{font-weight:500;}
}