@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Play:700');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display+SC:700');
@import url('https://fonts.googleapis.com/earlyaccess/sawarabigothic.css?family=Play:700');

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header, hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


@media screen and (max-width: 650px){
	.pc{display:none!important;}
}

@media screen and (min-width: 651px){
	.sp{display:none!important;}
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}


img{display:block;}

img.hover{
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
	}
	
img.hover:hover{
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
	}
	
#pageTOP{
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:10000;
	}
	
@media screen and (max-width: 650px){
	#pageTOP{
	bottom:30px;
	right:10px;
	z-index:10000;
	}
	
	#pageTOP img{
		width:40px;
		height:40px;
		}
	
}



body{
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; 
	font-weight: 500; font-size:13px; background:#fff; overflow-x: hidden;
	}
	

/*center*/

.content{
	max-width:1240px;
	margin:0 auto;
	}
	
@media screen and (max-width: 650px){
		
	.content{
		max-width:100%;
		overflow:hidden;
		}
}	

/*width*/
.w50{width:50%;}
.w100{width:100%;}


/*float*/
.fL{float:left;}
.fR{float:right;}
@media screen and (max-width: 650px){
	.fL_PC,.fR_PC{float:none !important;}
	.fL_SP{float:left!important;}
	.fR_SP{float:right!important;}
}
@media screen and (min-width: 651px){
	.fL_PC{	float:left!important;}
	.fR_PC{	float:right!important;}
}

/*link*/



/*fade-in*/
.fade-in {
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
}

.op0{
	opacity:0;
	}

/*font*/
.f16{font-size:123.1%;}
.f18{font-size:138.5%;}
.f20{font-size:153.9%;}
.f22{font-size:167%;}
.f24{font-size:182%;}

.fBIG{font-size:250%;}
.fSMALL{font-size:14px; vertical-align:middle; font-weight:normal; letter-spacing:0;}
.lhSMALL{line-height:0; margin:-3em 0 3em;}

.bold{font-weight:bold;}

.s-1{text-indent:-1em; padding-left:1em;}


.textL{text-align:left !important;}
.textC{text-align:center !important;}
.textR{text-align:right !important;}

@media screen and (max-width: 650px){
	.fBIG{font-size:200%; line-height:150%;}
	.fSMALL{font-size:12px;}
	.lhSMALL{line-height:100%; margin:-0.5em 0 0.5em;}
	.op0{
	opacity:1;
	}

}

.red{
	color:#F00;
	}

/*margin・padding*/
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt50{margin-top:50px !important;}

.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}
.mr50{margin-right:50px !important;}

.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}

.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.ml50{margin-left:50px !important;}

.ml1em{margin-left:1em !important;}
.ml2em{margin-left:2em !important;}
.ml3em{margin-left:3em !important;}

.m_auto{margin:0 auto; width:96%;}

.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr30{padding-right:30px !important;}
.pr50{padding-right:50px !important;}

.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl30{padding-left:30px !important;}
.pl50{padding-left:50px !important;}



/*h2*/
h2{
	font-family: 'Playfair Display SC', serif;
	font-size:300%;
	font-weight:bold;
	color:#000;
	text-align:center;
	width:100%;
	line-height:150px;
	letter-spacing:0.1em;
	margin:0 -200%;
    padding:0 200%;
	}
	
@media screen and (max-width: 650px){
	h2{
		font-size:200%;
		height:70px;
		line-height:50px;
		}
}	

/*	
.c{background:#0085CE;}
.m{background:#C9007F;}
.y{background:#FFD600; color:#000 !important;}	
.g{background:#808080;}
*/

.c{color:#000 !important; background:#FFF;/*color:#fff; background:#00719F;*/}
.m{color:#000 !important; background:none;/*66c972;*//*color:#fff; background:#7cb94c;*/}
.g{background:#CCC;}
.y{color:#000 !important; background:#fff;}	
.jp{font-family:"Sawarabi Gothic";}

/*header*/
header{
	width:100%;
	margin:0 -200%;
    padding:0 200%;
	background:rgba(255,255,255, 0.9);
	position: fixed;
	top:0;
	left:0;
	z-index: 9999;
	transition: .3s;
	}
	
h1{
	display:inline-block;
	}
	
h1 > a{
	text-indent:-9999px;
	background:url(../img/span-logo.png) no-repeat;
	width:314px;
	height:50px;
	display:block;
	margin:15px 0;
	}

header > div{
	font-size:1.5vw;
	width:96%;
	height:80px;
	left:50%;
	margin:0 auto;
	}
	
@media screen and (min-width: 1240px){
	header > div{
	font-size:20px;
	}
}
	
header div > nav{
	float:right;
	}
	


header div > nav a {
	clear:both;
	position: relative;
	display: inline-block;
	line-height:80px;
	margin: 0 25px;
	outline: none;
	color: #4D4D4D;
	text-decoration: none;
	text-transform: uppercase;
	}

@media screen and (min-width: 651px){
header div > nav :after,
header div > nav ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	}

header div > nav a::before,
header div > nav a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
	}

header div > nav a.l01::before,
header div > nav a.l01::after{	
	border: 2px solid rgba(41,198,220,0.3);
	}
	
header div > nav a.l02::before,
header div > nav a.l02::after{	
	border: 2px solid rgba(102,201,114,0.3);
	}
	
header div > nav a.l03::before,
header div > nav a.l03::after{	
	border: 2px solid rgba(255,214,0,0.3);
	}
	
header div > nav a.l04::before,
header div > nav a.l04::after{	
	border: 2px solid rgba(255,173,199,0.3);
	}
	
header div > nav a.l05::before,
header div > nav a.l05::after{	
	border: 2px solid rgba(204,204,204,0.3);
	}

header div > nav a::after {
	width: 60px;
	height: 60px;
	border-width:4px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
	}

header div > nav a:hover::before,
header div > nav a:hover::after,
header div > nav a:focus::before,
header div > nav a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
	}
	
}
	
@media screen and (max-width: 650px){
	
	header{
	width:100%;
	height:60px;
	}

   h1{
	  display:block;
	  }
	  
   h1 > a{
	  text-indent:-9999px;
	  background:url(../img/span-logo.png) no-repeat left center/60% auto;
	  width:60%;
	  height:40px;
	  display:block;
	  margin:10px 0 10px 20px;
	  }
	  
   header > div{
	  font-size:100%;
	  width:100%;
	  height:10px;
	  margin:0 auto;
	  }
	
	nav{ width:25px; height:30px; margin:0 15px 0; position:relative; cursor:pointer; overflow:hidden; z-index:9999; float:right; }
	nav .menu1{ width:25px; height:2px; background-color: #000; top:0px; position:absolute; } 
	nav .menu2{ width:25px; height:2px; background-color: #000; top:8px; position:absolute; } 
	nav .menu3{ width:25px; height:2px; background-color: #000; top:16px; position:absolute; }
	
	nav .menu1,nav .menu2,nav .menu3
					{ transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; /* Opera */ -moz-transition: all 0.5s ease-out; /* Firefox */
					 -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */ -ms-transition: all 0.5s ease-out; /* IE */ }
	
	nav .menuclick1		{ top:8px; -o-transform: rotate(405deg); -moz-transform: rotate(405deg); -webkit-transform: rotate(405deg);
				 	-ms-transform: rotate(405deg); transform: rotate(405deg); }
	
	nav .menuclick2		{ background-color:rgba(255,255,255,0); }
	
	nav .menuclick3		{ top:8px; -o-transform: rotate(-405deg); -moz-transform: rotate(-405deg);
					-webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg); }
	
	#menu{
	  position: fixed;
	  display: none;
	  right: 0;
	  top: 60px;
	  list-style-type: none;
	  background-color:rgba(0, 0, 0, 0.7);
	  z-index: 9999;
	  box-sizing:border-box;
	  border:1px solid #fff;
	  }
	  
	  #menu li{
		  width:100%;
		  border-bottom:1px solid #fff;
		  }
		  
	  #menu li:last-child{
		  border-bottom:none;
		  }
	  
	  #menu li a{
		  font-size:108%;
		  line-height:50px;
		  color:#fff;
		  text-align:center;
		  display:block;
		  text-decoration:none;
		  padding:0 30px;
		  box-sizing:border-box;
		  }
}


/*recruit*/
#recruit{
	width:100%;
	margin:0 -200%;
    padding:180px 200% 0;
	}


/*inquiry*/
#inquiry{
	width:100%;
	margin:0 -200%;
    padding:180px 200% 0;
	}



/*footer*/
footer{
	clear:both;
	background:#fff;
	margin:50px -200% 0;
    padding:10px 200% 0;
	}

#footer{
	clear:both;
	height:50px;
	background:#4D4D4D;
	margin:10px -200% 0;
    padding:0 200%;
	}
	
#footer p{
	color:#FFF;
	font-size:108%;
	line-height:50px;
	}
	
#footer a:link,#footer a:visited{
	color:#fff;
	text-decoration:none;
	}
	
#footer a:hover{
	text-decoration:underline;
	}



@media screen and (max-width: 650px){
	footer{
	margin-top:20px;
	}
	
	#footer{
	width:100%;
	height:100%;
	background:#4D4D4D;
	margin-top:10px;
	}
	
	#footer p:nth-of-type(2){
		color:#FFF;
		font-size:108%;
		line-height:300%;
		margin-top:20px;
		}
		
	
	#footer p:nth-of-type(2) a{
		display:block;
		text-align:center;
		}
		
		
	#footer p:nth-of-type(3){
		text-align:center;
		margin:10px auto 30px;
		}
	
}



@media print{
	.sp,a.sp{display:none;}
}