/*===========================================================
style info : /recruit/内専用
===========================================================*/

#client{
	background:#ffe600;
}

/* reset
===========================================================*/
/* フォント */
body,form{
	font-family:"メイリオ", sans-serif
}

/* bootstrapのリセットスタイルを再リセット */
ul,ol,p,dl{margin:0;}

/* フォーム系リセット */
body, form {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	color:#898989;
}
select, input, textarea, button {
	vertical-align:middle;
	position:relative;
	margin: 0 4px 2px 0;
	*margin-right:3px;
	top:-1px;
}
input {
	height: 16px;
	line-height: 16px;
}
input[type="text"]{
	padding: 4px 6px;
	border-style: solid;
	border-width: 1px;
	border-color: rgb( 182, 182, 182 );
}
input[type="checkbox"],
input[type="radio"]{
	border:none;
	margin-right:2px;
}
label{margin-bottom: 0;}
a{color: #0086cf;}


/* 文字寄せ */
.tr{text-align: right;}
.tc{text-align: center;}

.inline_block{display: inline-block;}
.inline_block + .inline_block{margin-left: 10px;}


/* container
===========================================================*/

@media screen and (min-width: 960px) {
#content{
	width:100%;
	background-size:cover;
    background-position: center 150px;
	background-repeat:no-repeat;
}
}

@media screen and (max-width: 959px) {
#sp_content{
	background:#ffe600;
}

h2.area img,
h2.flow img{
	width:60%;
}
}

#container{
	width:100%;
	min-width: 960px;
	padding:0;
}

.inner{
	display:block;
	text-align:center;
	overflow: hidden;
}

.bg{
	background: url(../img/dg.png) no-repeat;
	background-position: 90% 3250px;
}

	

/* header
===========================================================*/

header{
	width:100%;
	padding:18px 0 22px;
}

.socialIconBox {
  max-width: 949px;
  text-align:right;
  }

#wrapper{
	margin:20px auto;
	padding:0 1%;
	width:98%;
	position:relative;
}

.inner{
	margin:0 auto;
	width:100%;
}

.text-right{
	margin-top:20px;

}

#wrapper,.inner,ul#topnav{
	width:960px;
	padding:0;
}
	
#wrapper{padding-bottom:20px;}
	
#main{
	float:right;
	width:690px;
}
	
#subpage #sub{
	float:left;
	width:235px;
	overflow:hidden;
}	

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

.inner{
	width:auto;
	position:relative;
	overflow:hidden;
	padding: 0 20px;
}	
}

/* navigation
===========================================================*/

.sp{
	display:none;
}

@media screen and (max-width: 959px) {
.sp{
	display:block;
	text-align:center;
	padding: 0 5%;

}

.pc{
	display:none;
}
}

/* navigation
===========================================================*/


.nav li a img:hover{
	opacity:1.0 !important;
}
	
ul.nav li{
float:left;
margin-right:10px;
}

ul.nav li.last{
margin-right:0px;
}

ul.nav li a:hover{
float:left;
background:none;
}


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


/* map 検索ボタン
===========================================================*/

#area h2{
	margin: 4% 0;
}

.inner move{
	margin-top:100px;
	}

.icon-search {
  background-position: -48px 0;
}

.btn-danger {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #df4b99;
  *background-color: #cb1d79;
  background-image: -moz-linear-gradient(top, #df4b99, #cb1d79);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#df4b99), to(#cb1d79));
  background-image: -webkit-linear-gradient(top, #df4b99, #cb1d79);
  background-image: -o-linear-gradient(top, #df4b99, #cb1d79);
  background-image: linear-gradient(to bottom, #df4b99, #cb1d79);
  background-repeat: repeat-x;
  border-color: #cb1d79 #cb1d79 #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#df4b99', endColorstr='#cb1d79', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
  color: #ffffff;
  background-color: #cb1d79;
  *background-color: #cb1d79;
}

@media screen and (max-width: 959px) {
#client.recruit .box_map_inner{
	margin-bottom:0;
}
}

/* intro
===========================================================*/

p.intro{
	margin:2% 6%;
	color:#1c1c1c;
	font-size:24px;
	text-align:left;
	line-height:1.3em;
}

.dtb{
	padding:100px 300px 100px 0;
}

@media screen and (max-width: 959px) {
p.intro{
	font-size:16px;
}

.dtb{
	padding:10% 14% 10% 0;
}
}


/* qa
===========================================================*/

.bg02{
	background:#013446;
}

#qa h2{
	padding-top:5%;
}

.white{
	color:#fff !important;
}

.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 90%;
}
section{
	width:90%;
	margin:0 auto 40px auto;
	border:1px solid #fff;
	padding:20px;
	color:#fff;
}
section h2{
	font-size:3em !important;
	line-height:1.3;
	padding:0 0 20px 0;
	text-align:center;
	color:#fff;
}
section h3{
	padding:10px 0 0 0;
	text-align:right;
	color:#fff;
}

/* flow
===========================================================*/

h2{
	margin: 0;
}
h2.flow{
	margin: 5% 0;
}
.flow ol{
	margin-bottom:40px;
	padding: 0;
}
.flow ol li{
	text-align:left;
	list-style: none;
	padding: 20px;
	background: #FFF;
	border-radius: 4px;
	position: relative;
	margin:0 0 10px; 
}
.flow ol li:not(:last-child):after{
	content: '';
	display: block;
	position: absolute;
	background: url(../img/ico_arrow.png) no-repeat;
	width: 38px;
	height: 45px;
	bottom: 0;
	left: 50%;
	z-index: 3;
	margin-left: -19px;
	margin-bottom: -30px;
}
.flow ol li .flow-inner{
	display: table;
	width: 100%;
}
.flow ol li .flow-inner:before,
.flow ol li .flow-inner:after{
	content: '';
	display: block;
	position: absolute;
	width: 86px;
	height: 88px;
	top: 0;
	z-index: 1;
}
.flow ol li .flow-inner .flow-step-wrap,
.flow ol li .flow-inner .flow-text{
	color:#1c1c1c;
	font-size:24px;
	line-height:1.3em;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	z-index: 3;
}
.flow ol li .flow-inner .flow-step-wrap{
	width: 120px;
	padding-right: 20px;
}
.flow ol li .flow-inner .flow-step-wrap .flow-step{
	margin: 0;
	background: #cb1d79;
	width: 100px;
	height: 100px;
	border-radius:50%;
	padding: 10px;
	color: #FFF;
	display: table;
	position: relative;
}
.flow ol li .flow-inner .flow-step-wrap .flow-step .flow-step-inner{
	display: table-cell;
	vertical-align: middle;
}
.flow ol li .flow-inner .flow-step-wrap .flow-step .flow-step-inner dt,
.flow ol li .flow-inner .flow-step-wrap .flow-step .flow-step-inner dd{
	display: block;
	margin: 0; padding: 0;
	text-align: center;
}
.flow ol li .flow-inner .flow-step-wrap .flow-step .flow-step-inner dt{
	color: #fff;
	font-size:26px;
	margin-top:4px;
}
.flow ol li .flow-inner .flow-step-wrap .flow-step .flow-step-inner dd span{
	display: inline-block;
	font-size: 14px;
}

@media (max-width: 980px) {
	.flow ol li .flow-inner,
	.flow ol li .flow-inner .flow-step-wrap,
	.flow ol li .flow-inner .flow-text,
	.flow ol li .flow-inner .flow-photo{ display: block; }
	.flow ol li .flow-inner .flow-step-wrap{
		width: auto;
		padding-right: 0;
	}
	.flow ol li .flow-inner .flow-step-wrap .flow-step{
		width: auto;
		height: auto;
		border-radius: 4px;
		margin:1% 0 4% 0;
		display: block;
	}
	.flow ol li:first-child .flow-inner .flow-step-wrap .flow-step:after{
		background-size: 60px auto;
		width: 60px;
		height: 31px;
		top: -7px;
		left: 10px;
	}
	.flow ol li .flow-inner .flow-step-wrap .flow-step .flow-step-inner{
		display: block;
		vertical-align: auto;
	}

	.flow ol li .flow-inner .flow-step-wrap,
	.flow ol li .flow-inner .flow-text{
		font-size:16px;
	}
	
	.flow ol li .flow-inner .flow-step-wrap .flow-step .flow-step-inner dt{
		font-size:20px;
	}
}

/* btn
===========================================================*/

#btn{
	margin:10% 0;

}

@media (max-width: 980px) {
#btn{
	margin:0 0 10% 0;

}
}

/* footer
===========================================================*/

footer{
	background:#303030;
	padding:40px 0 0 0;
	font-size: 12px;
	color:#fff;
	text-align: left !important;
}
.f_inner{
	width:960px;
	margin:0 auto;
}
@media (max-width: 800px) {
.f_inner{
	width:auto;
	margin:0 auto;
}
}
.f_inner p{
	font-size:180%;
	margin:0 0 20px 0;
}

footer ul{
	float:left;
	margin:0 5em 0 0;
	overflow: hidden;
	margin-bottom: 35px;
}
@media (max-width: 980px) {
	footer ul{
	overflow: hidden;
	margin-bottom: 35px;
}
}

footer li{
	list-style:disc inside;
}
footer li a{
	color:#fff;
	display:block;
	padding:5px 0;
	border-bottom:1px dotted #fff;
}
@media (max-width: 800px) {
footer ul{
	float:none;
	margin:0 0 0 0;
	overflow: hidden;
}
footer li{
	list-style:disc inside;
}
footer li a{
	color:#fff;
	display:block;
	padding:5px 0;
	border-bottom:1px dotted #fff;
}
}

footer a:hover{
	color:#ccc;
}

footer .copyright{
	line-height: 2;
	display:block;
	padding:10px 0;
	background:#000;
	text-align:right;
}
footer .copyright p{
	width:960px;
	margin:0 auto;
}
@media (max-width: 800px) {
footer .copyright p{
	width:auto;
	margin:0 auto;
}
}

/* adoption
===========================================================*/
ul.adoption{
	width:700px;
	margin:20px auto 0 auto;
}
ul.adoption li{
	float:left;
}
ul.adoption li:last-child{
	float:right;
}
@media (max-width: 800px) {
h2.ad{
	width:70%;
	text-align:center;
	margin:20px auto;
}
ul.adoption{
	width:auto;
	margin:20px auto;
}
ul.adoption li{
	float:none;
	margin:0 0 10px 0;
}
ul.adoption li:last-child{
	float:none;
}
}

/* 地図
===========================================================*/
@media screen and (max-width: 768px) {
	.hidden-sp{
		display: none !important;
	}
}
@media screen and (min-width: 769px) {
	.hidden-pc{
		display: none !important;
	}
}
/*PC*/
#mapTrain{
	padding-bottom: 40px;
	margin-bottom: 50px;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 10px;
}
#mapTrain .mapBox{
	text-align: center;
}
#mapTrain .mapBox img{
	width: 920px;
}
#mapTrain .wrap_form_area{
	width: 900px;
	margin: 0 auto;
}
/*SP*/
#mapTrain .mapTrainSP{
	padding: 15px 5%;
}
#mapTrain .mapTrainSP h3{
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 15px;
}
#mapTrain .mapTrainSP dl{
	border-top: 1px solid #CCC;
}
#mapTrain .mapTrainSP dl:last-child{
	border-bottom: 1px solid #CCC;
}
#mapTrain .mapTrainSP dl dt{
	padding: 20px 0;
	cursor: pointer;
	color: #333;
	font-size: 15px;
}
#mapTrain .mapTrainSP dl dd{
	padding: 0 0 20px 0;
	margin: 0;
	display: none;
}
#mapTrain .mapTrainSP dl dd li{
	margin-bottom: 15px;
}
#mapTrain .mapTrainSP dl dd li:last-child{
	margin-bottom: 0;
}
#mapTrain .mapTrainSP dl dd li a{
	color: #555;
	font-size: 15px;
}
@media screen and (max-width: 768px) {
	#mapTrain{
		padding-bottom: 5%;
	}
}