@charset "utf-8";

/* reset style
----------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

h1,h2,h3,h4,h5,h6,p {
	font-weight:normal;
	font-size: 100%;
	text-align:left;
}

ol,ul,li,nav ul {
	list-style:none;
}

ul,li,img{
	margin:0;
	padding:0;
	list-style:none;
	vertical-align:bottom;
	line-height:1.6;
	text-align:left;
}

caption,th {
	text-align:left;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	text-decoration:none;
	outline:0;
	line-height:1.6;
/* Hides from IE-mac \*/
	overflow:hidden;
/* End hide from IE-mac */
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

img,td,th {
	border:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

td,th{
	text-align: left;
	vertical-align: top;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}


/* CLEAR FIX*/
.clearfix:after,
p.text:after{
	content: ".";  
	display: block;  
	visibility: hidden;  
	height: 0.1px;  
	font-size: 0.1em;  
	line-height: 0;  
	clear: both;  
}
.clearfix,
p.text{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
* html p.text { height: 1%;}
.clearfix,
p.text{display: block;}
/* End hide from IE-mac */


/* common
----------------------------------------------------------------------------------*/
* {
    -moz-box-sizing: border-box;
}
body {
	margin:0;
	padding:0;
	font-size:87.5%;
	/*font-family:Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;*/
	font-family: "UD新ゴ L","UD Shin Go Light";
	/*font-family: "UD新ゴ R","UD Shin Go Regular";*/
	line-height:1.8;
	color:#646464;
	vertical-align:top;
	background:#f0f0f0;
	-webkit-text-size-adjust: 100%;
}

a:link   {color:#3d6b9f;text-decoration:underline;}
a:visited{color:#3d6b9f;text-decoration:underline;}
a:hover  {color:#3d6b9f;text-decoration:none;}
a:active {color:#3d6b9f;text-decoration:underline;}

a:hover img{
    opacity:0.50;
    filter: alpha(opacity=50);
}
img{max-width:100%;height:auto;}

/* margin */
.mt0  {margin-top:0px!important;}
.mt5  {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!important;}
.mt20 {margin-top:20px!important;}
.mt25 {margin-top:25px!important;}
.mt30 {margin-top:30px!important;}
.mt40 {margin-top:40px!important;}
.mt50 {margin-top:50px!important;}

.mb0  {margin-bottom:0px!important;}
.mb5  {margin-bottom:5px!important;}
.mb10 {margin-bottom:10px!important;}
.mb15 {margin-bottom:15px!important;}
.mb20 {margin-bottom:20px!important;}
.mb25 {margin-bottom:25px!important;}
.mb30 {margin-bottom:30px!important;}
.mb40 {margin-bottom:40px!important;}
.mb50 {margin-bottom:50px!important;}

.mr0  {margin-right:0px!important;}
.mr5  {margin-right:5px!important;}
.mr10 {margin-right:10px!important;}
.mr15 {margin-right:15px!important;}
.mr20 {margin-right:20px!important;}
.mr25 {margin-right:25px!important;}
.mr30 {margin-right:30px!important;}

.ml0  {margin-left:0px!important;}
.ml5  {margin-left:5px!important;}
.ml10 {margin-left:10px!important;}
.ml15 {margin-left:15px!important;}
.ml20 {margin-left:20px!important;}
.ml25 {margin-left:25px!important;}
.ml30 {margin-left:30px!important;}

/* padding */
.pt0  {padding-top:0px!important;}
.pt5  {padding-top:5px!important;}
.pt10 {padding-top:10px!important;}
.pt15 {padding-top:15px!important;}
.pt20 {padding-top:20px!important;}
.pt25 {padding-top:25px!important;}
.pt30 {padding-top:30px!important;}

.pb0  {padding-bottom:0px!important;}
.pb5  {padding-bottom:5px!important;}
.pb10 {padding-bottom:10px!important;}
.pb15 {padding-bottom:15px!important;}
.pb20 {padding-bottom:20px!important;}
.pb25 {padding-bottom:25px!important;}
.pb30 {padding-bottom:30px!important;}

.pr0  {padding-right:0px!important;}
.pr5  {padding-right:5px!important;}
.pr10 {padding-right:10px!important;}
.pr15 {padding-right:15px!important;}
.pr20 {padding-right:20px!important;}
.pr25 {padding-right:25px!important;}
.pr30 {padding-right:30px!important;}

.pl0  {padding-left:0px!important;}
.pl5  {padding-left:5px!important;}
.pl10 {padding-left:10px!important;}
.pl15 {padding-left:15px!important;}
.pl20 {padding-left:20px!important;}
.pl25 {padding-left:25px!important;}
.pl30 {padding-left:30px!important;}

.align-l{text-align:left!important;}
.align-r{text-align:right!important;}
.align-c{text-align:center!important;}

.fs12{font-size:85.714%;}
.fs14{font-size:100%;}
.fs16{font-size:114.285%;}
.fs18{font-size:128.571%;}

.fR{float:right!important;}
.fL{float:left!important;}

.clear{clear:both!important;}
.wrap{overflow:hidden;zoom:1;}

.sp{
	display: none;
}
@media screen and ( max-width: 480px ) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}

/* structure
----------------------------------------------------------------------------------*/
#container{
	width:1020px;
	margin:45px auto;
	background:#ffffff;
}
@media screen and ( max-width: 480px ) {
	#container{
		width:auto;
		margin:10px;
	}
	#home #container{
		margin: 0;
	}
}
.contents{
	width:1020px;
	margin:0 0 80px;
	background:#ffffff;
}
@media screen and ( max-width: 480px ) {
	.contents{
		width:auto;
		margin:0 0 40px;
	}
}

#message{
	padding:220px 0 0;
	background:url(../../message/img/bg-message.gif) no-repeat 0 66px;
}
#staff{
	padding:200px 80px 0;
	background:url(../../staff/img/bg-staff.gif) no-repeat 0 60px;
}
#staff-intro{
	padding:220px 0 0;
	background:url(../../staff/img/bg-staff.gif) no-repeat 0 60px;
}
#company{
	padding:250px 80px 0;
	background:url(../../company/img/bg-company.gif) no-repeat 0 60px;
}
#recruit{
	padding:275px 80px 0;
	background:url(../../recruit/img/bg-recruit.jpg) no-repeat 0 60px;
}
@media screen and ( max-width: 480px ) {
	#message{
		padding:100px 0 0;
		background:url(../../message/img/bg-message.gif) no-repeat 0 30px;
		-webkit-background-size: 480px auto;
		background-size: 480px auto;
	}
	#staff{
		padding:100px 10px 0;
		background:url(../../staff/img/bg-staff.gif) no-repeat 0 30px;
		-webkit-background-size: 480px auto;
		background-size: 480px auto;
	}
	#staff-intro{
		padding:100px 10px 0;
		background:url(../../staff/img/bg-staff.gif) no-repeat 0 30px;
		-webkit-background-size: 480px auto;
		background-size: 480px auto;
	}
	#company{
		padding:100px 0 0;
		background:url(../../company/img/bg-company.gif) no-repeat 0 30px;
		-webkit-background-size: 480px auto;
		background-size: 480px auto;
	}
	#recruit{
		padding:20vw 0 0;
		background:url(../../recruit/img/bg-recruit.jpg) no-repeat -20px 30px;
		-webkit-background-size: 110% auto;
		background-size: 110% auto;
	}
}


/* header
----------------------------------------------------------------------------------*/
#header{
	border-bottom:7px solid #f0f0f0;
	overflow:hidden;
	zoom:1;
}
#header .logo{
	float:left;
	margin:20px 0 0 30px;
}
#header .btn-entry{
	float:right;
}
#header #gnavi{
	margin:40px 0 20px;
}
@media screen and ( max-width: 480px ) {
	#header{
		padding-bottom: 10px;
	}
	#header .logo{
		margin:10px 0 0 10px;
		text-align: center;
	}
	#header .logo img{
		width: 120px;
		height: auto;
	}
	#header .btn-entry{
	}
	#header .btn-entry img{
		width: 120px;
		height: auto;
	}
	#header #gnavi{
		margin: 10px 0 0;
	}	
}

/* gnavi
----------------------------------------------------------------------------------*/
#gnavi{
	clear:both;
	text-align:center;	
}
#gnavi li{
	display:inline-block;
	width:88px;
	margin:0 30px;
	text-indent:-999999px;
}
#gnavi li a{
	display:block;
	height:25px;
	background:url(../img/gnavi.gif) no-repeat;
}
#gnavi li.nav01 a{background-position:0 0;}
#gnavi li.nav02 a{background-position:-88px 0;}
#gnavi li.nav03 a{background-position:-176px 0;}
#gnavi li.nav04 a{background-position:right 0;}

#gnavi li.nav01 a:hover,
#gnavi li.nav01 a.on{background-position:0 bottom;}
#gnavi li.nav02 a:hover,
#gnavi li.nav02 a.on{background-position:-88px bottom;}
#gnavi li.nav03 a:hover,
#gnavi li.nav03 a.on{background-position:-176px bottom;}
#gnavi li.nav04 a:hover,
#gnavi li.nav04 a.on{background-position:right bottom;}
@media screen and ( max-width: 480px ) {
	#home #gnavi{
		display: none;
	}
	#gnavi{
		padding: 0 40px;
	}
	#gnavi li{
		display: block;
		float: left;
		width: 50%;
		margin: 10px 0;
		text-align: center;
	}
	#gnavi li a{
		width: 88px;
		margin: 0 auto;
	}
}

/* footer
----------------------------------------------------------------------------------*/
#footer{
	padding:20px 30px 15px;
	overflow:hidden;
	zoom:1;
}
#footer .logo{float:left;}
#footer .copyright{float:right;margin:10px 0 0;font-size:85.714%;}
@media screen and ( max-width: 480px ) {
	#footer .logo{float:none;text-align: center;}
	#footer .logo img{width: 250px;height: auto;}
	#footer .copyright{float:none;font-size:71.428%;text-align: center;}
}




/* top
----------------------------------------------------------------------------------*/
#top{
	overflow:hidden;
	zoom:1;	
}
#top .box{
	float:left;
}
#top #box-left{
	float:left;
	width:510px;
}
#top #box-right{
	float:right;
	width:510px;
}
#top .box-s{width:255px;}
#top .box-m{width:510px;}
#top .box-l{width:765px;height:340px}
@media screen and ( max-width: 480px ) {
	#top{
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#top .box{
		float:none;
	}
	#top #box-left,
	#top #box-right{
		float:none;
		width:inherit;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#top .box-s{width:50%;}
	#top .box-m{width:100%;}
	#top .box-l{width:100%;height:inherit;}
}



/* message
----------------------------------------------------------------------------------*/
#message #message-inner{
	padding:0 165px;
}
#message #message-inner .ttl{
	margin:0 0 60px;
	font-size: 40px;
	letter-spacing: 5px;
}
#message #message-inner .fs18{
	line-height:2.1;
}
#message #message-inner p{
	letter-spacing:0.1em;
	background:#ffffff;
}
@media screen and ( max-width: 480px ) {
	#message #message-inner{
		padding: 0 10px;
	}
	#message #message-inner .ttl{
		margin:0 0 30px;
		font-size: 24px;
	}
	#message #message-inner .fs18{
		font-size: 14px;
	}
	#message #message-inner .mb50{
		margin-bottom: 20px!important;
	}
}



/* staff
----------------------------------------------------------------------------------*/
#staff{
	position:relative;	
	max-width: 860px;
	margin: 0 auto;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-o-box-sizing:content-box;
	-ms-box-sizing:content-box;
	box-sizing:content-box;
}
/*#staff .staff-link{
	position:absolute;
}
#staff #staff01{top:190px;left:380px;}
#staff #staff02{top:540px;left:490px;}
#staff #staff03{top:720px;left:420px;}
#staff #staff04{top:830px;left:830px;}*/

#staff .staff-list{
	overflow: hidden;
}
#staff .staff-list *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#staff .staff-list ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 -15px;
}
#staff .staff-list ul li{
	width: 33.3%;
	padding: 0 40px;
	margin: 0 0 50px;
}
#staff .staff-list ul li a{
	color: #666;
	text-decoration: none;
}
#staff .staff-list ul li figcaption{
	margin: 10px 0 0;
	text-align: center;
}
#staff .staff-list ul li figcaption span{
	display: block;
}
#staff .staff-list ul li figcaption .name{
	color: #333;
	font-size: 18px;
}
#staff .staff-list ul li figure{
  border: 1px solid #fff;
  position: relative;
}
#staff .staff-list ul li figure:after,
#staff .staff-list ul li figure:before,
#staff .staff-list ul li figure span:after,
#staff .staff-list ul li figure span:before {
  background-color: #15b8d7;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
#staff .staff-list ul li figure:after {
    width: 0px;
    height: 2px;
    top: -1px;
    left: -1px;
}
#staff .staff-list ul li figure:before {
    width: 0px;
    height: 2px;
    right: -1px;
    bottom: -1px;
}
#staff .staff-list ul li figure span::after {
    width: 2px;
    height: 0px;
    left: -1px;
    bottom: -1px;
}
#staff .staff-list ul li figure span::before {
    width: 2px;
    height: 0px;
    top: -1px;
    right: -1px;
}

#staff .staff-list ul li a:hover img{
	opacity: 1;
}
#staff .staff-list ul li a:hover figure:after,
#staff .staff-list ul li a:hover figure:before {
  width: 100%;
  width: calc(100% + 1px);
}

#staff .staff-list ul li a:hover figure span:after,
#staff .staff-list ul li a:hover figure span:before {
  height: 100%;
  height: calc(100% + 1px);
}
@media screen and ( max-width: 480px ) {
	#staff .staff-list ul{
		margin: 0 -5px;
	}
	#staff .staff-list ul li{
		width: 50%;
		padding: 0 5px;
	}
	#staff .staff-list ul li figcaption span{
		font-size: 12px;
	}
	#staff .staff-list ul li figcaption .name{
		font-size: 14px;
	}
}


#staff-intro{position:relative;}
#staff-intro .panel{
	display:block;
	min-height:1000px;
}
/*#slider{
	width:1020px;
	overflow:hidden;
}
#slider .panel{
	display:block;
	float:left;
	width:1020px;
	min-height:1400px;
}
.coda-nav-left,
.coda-nav-right{
	position:absolute;
	top:681px;
	width:60px;
}
.coda-nav-left a,
.coda-nav-right a{
	display:block;
	height:38px;
	text-indent:-999999px;
}
.coda-nav-left{left:0;}
.coda-nav-right{right:0;}

.coda-nav-left a{background:url(../../staff/img/btn-prev.gif) no-repeat 0 0;}
.coda-nav-right a{background:url(../../staff/img/btn-next.gif) no-repeat 0 0;}

#staff-intro #staff01{
	background:url(../../staff/img/bg-staff01.jpg) no-repeat 0 0;
}
#staff-intro #staff02{
	background:url(../../staff/img/bg-staff02.jpg) no-repeat 0 0;
}
#staff-intro #staff03{
	background:url(../../staff/img/bg-staff03.jpg) no-repeat 0 0;
}
#staff-intro #staff04{
	background:url(../../staff/img/bg-staff04.jpg) no-repeat 0 0;
}*/

#staff-intro .message{
	padding:30px 105px 0 500px;
}
#staff-intro .message .en{
	margin: 0 0 40px;
	/*font-family: 'Didact Gothic', sans-serif;*/
	font-family: "Prelude Pro Light";
	color: #15b8d7;
	font-size: 56px;
	font-style: italic;
	letter-spacing: 5px;
	line-height: 1;
}
#staff-intro .message .name{
	color: #666;
	font-size: 16px;
	letter-spacing: 2px;
}
#staff-intro .message .name span{
	display: block;
	font-size: 24px;
	letter-spacing: 5px;
}
#staff-intro .message .ttl{
	margin:60px 0 20px;
	font-family: "UD新ゴ R","UD Shin Go Regular";
	color: #666;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
}
@media screen and ( max-width: 480px ) {
	#staff-intro .panel{
		min-height: inherit;
		background: none !important;
	}
	#staff-intro .message{
		padding: 0;
	}
	#staff-intro .message .wrap{
		overflow: hidden;
	}
	#staff-intro .message .wrap .sp{
		float: left;
		width: 120px;
		margin-right: 10px;
	}
	#staff-intro .message .en{
		margin: 0 0 20px;
		font-size: 24px;
		letter-spacing: 3px;
	}
	#staff-intro .message .name{
		font-size: 12px;
	}
	#staff-intro .message .name span{
		font-size: 18px;
	}
	#staff-intro .message .ttl{
		margin: 40px 0 10px;
		font-size: 20px;
	}
}

#staff-intro .photo{
	margin:70px 0 0 400px;
	overflow:hidden;
	zoom:1;
}
#staff-intro .photo li{
	float:left;
	width:235px;
	margin:0 0 0 20px;
}
#staff-intro .photo li p{font-size:85.714%;}
@media screen and ( max-width: 480px ) {
	#staff-intro .photo{
		margin:50px 0 0;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
	}
	#staff-intro .photo li{
		float:none;
		width:50%;
		margin:0;
		padding: 0 5px;
	}
	#staff-intro .photo li p{font-size:85.714%;}
}


#staff-intro .btn{
	margin: 60px 0 0;
	text-align: center;
}
#staff-intro .btn a{
	display: inline-block;
	min-width: 250px;
	padding: 10px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	background: #15b8d7;
	transition: 0.3s;
}
#staff-intro .btn a:hover{
	opacity: 0.7;
}


/* company
----------------------------------------------------------------------------------*/
#company{
	width:860px;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-o-box-sizing:content-box;
	-ms-box-sizing:content-box;
	box-sizing:content-box;
}
#company .wrap{
	margin:90px 0 0;
}
#company #outline{
	float:left;
	width:470px;
}
#company #outline dt{
	float:left;
	width:4em;
}
#company #outline dd{
	padding:0 0 15px 5em;
}
#company #works{
	float:right;
	width:370px;
}
#company #works ul li{
	margin:0 0 10px;
}
@media screen and ( max-width: 480px ) {
	#company{
		width:auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	#company .wrap{
		margin:40px 0 0;
	}
	#company #outline{
		float:none;
		width:auto;
		margin: 0 0 30px;
	}
	#company #outline dt{
		float:left;
		width:4em;
	}
	#company #outline dd{
		padding:0 0 15px 5em;
	}
	#company #works{
		float:none;
		width:auto;
	}
	#company #works ul li{
		margin:0 0 10px;
	}
}



/* recruit
----------------------------------------------------------------------------------*/
#recruit #main{
	margin:0 0 130px;
	padding:0 0 0 45px;
}
#recruit #main .catch{
	margin:0 0 55px;
}
#recruit dl dt{
	float:left;
	width:6em;
}
#recruit dl dd{
	padding:0 0 20px 7em;
}
@media screen and ( max-width: 480px ) {
	#recruit #main{
		margin:0 0 40px;
		padding:0;
	}
	#recruit #main .catch{
		margin:20vw 0 35vw;
		padding: 0 30px;
	}
	#recruit #main p{
		padding: 0 10px;
	}
	#recruit #main p.mb40{
		margin-bottom: 20px!important;
	}
	#recruit #main p.mb40 + p img{
		width: 200px;
		height: auto;
	}
	#recruit .ttl{
		padding: 0 10px;
	}
	#recruit dl{
		padding: 0 10px;
	}
	#recruit dl dd{
		word-break: break-all;
	}
}