/* カラー　サブ青：#2370C0　ポイントオレンジ：#7b6b53*/

/*--------------------------

　基本

---------------------------*/
img#maps {
  width: 100%;
  height: 0;
  padding-top: calc(300 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(bg.jpg) center center / cover no-repeat;}
* {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "IPA 明朝", sans-serif;
}

::selection {
	background: #c3522f;
	color: #fff;
}


body {
	font-size: 14px;
	color: #8e8e8e;
	line-height: 1.6;
}

a {
	color: #3366ff;
}

h1, h2, h3, h4 {
	font-weight: normal;
}

	h2 {
		font-size: 28px;
		padding-bottom: 60px;
	}
	b {
		font-size: 16px;
		font-weight: 500;
		color: #e44e1b;
	}

/*--------------------------

　レイアウト

---------------------------*/

/* ヘッダー
---------------------------*/

/*#logo {
	position: absolute;
	left: 50px;
	top: 30px;
	z-index: 2;
	
} 
*/ #logo {
	position: absolute;
	left: 50%;
	top: 90px;
	z-index: 2;
	margin-left: -80px; 
}

#language {
	position: absolute;
	right:20px;
	top:0;
	z-index: 2;
}

.banner {
	position: relative;
	width: 100%;
	overflow: auto;
	
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	
	color: rgba(255,255,255,.6);
	text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
	
	background: #5b4d3d;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
	.banner ul {
		list-style: none;
		width: 300%;
	}
	.banner ul li {
		display: block;
		float: left;
		width: 33%;
		padding: 160px 0 110px;
		
		min-height: 350px;
		
/*		-webkit-background-size: 100% 100%;*/
		-moz-background-size: 100% 100%;
		-o-background-size: 100% 100%;
		-ms-background-size: 100% 100%;
/*		background-size: 100% 100%;*/
		
		box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
	}

 .btn-sm {
 	font-size: 10px;
 	font-weight: bold;
 	text-decoration: none;
 	text-transform: uppercase;
 	color: #2370c0;
 	background-color: #ffffff;
 	margin: 1em 0 0;
 	padding: 9px 22px 7px;
 	clear: both;
 	display: inline-block;
 	border: 2px solid rgba(35,112,192,.3);
 	border-radius: 5px;
 }
 .btn-sm:hover {
 	color: #ffffff;
			background-color:#e44e1b;
		}
 .btn-sm:active {
			-webkit-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			-moz-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			-ms-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			-o-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
		}

	
 .btn {
		display: inline-block;
		margin: 1em 0 0;
		padding: 9px 22px 7px;
		clear: both;
		
		color: #2370C0;
		font-size: 12px;
		font-weight: bold;
		text-transform: uppercase;
		text-decoration: none;
		
		border: 2px solid rgba(35,112,192,.3);
		border-radius: 5px;
	}
 .btn:hover {
			background: rgba(35,112,192,.05);
		}
 .btn:active {
			-webkit-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			-moz-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			-ms-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			-o-filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
			filter: drop-shadow(0 -1px 2px rgba(35,112,192,.5));
		}
		
	.banner .btn, .banner .dot {
		-webkit-filter: drop-shadow(0 1px 2px rgba(35,112,192,.3));
		-moz-filter: drop-shadow(0 1px 2px rgba(35,112,192,.3));
		-ms-filter: drop-shadow(0 1px 2px rgba(35,112,192,.3));
		-o-filter: drop-shadow(0 1px 2px rgba(35,112,192,.3));
		filter: drop-shadow(0 1px 2px rgba(35,112,192,.3));
	}
	
	.banner .dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20px;
	}
		.banner .dots li {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 4px;
			
			text-indent: -999em;
			
			border: 2px solid #fff;
			border-radius: 6px;
			
			cursor: pointer;
			opacity: .4;
			
			-webkit-transition: background .5s, opacity .5s;
			-moz-transition: background .5s, opacity .5s;
			transition: background .5s, opacity .5s;
		}
			.banner .dots li.active {
				background: #fff;
				opacity: 1;
			}

.features {
	padding: 50px 0;
	overflow: hidden;
	background: #f7f7f6;
	box-shadow: inset 0 -1px 3px rgba(35,112,192,.03);
}
	.features li {
		position: relative;
		padding: 0 25px 0 40px;
		list-style: none;
		
		width: 33%;
		float: left;
	}
		.features li:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			
			display: block;
			width: 24px;
			height: 22px;
			
			background: url('../img/icons.png');
		}
			.features li.contents1:before { background-position: 0 -44px; }
			.features li.contents2:before { background-position: 0 -88px; }
			.features li.contents3:before { background-position: 0 -22px; }
	.features b {
		display: block;
		padding-bottom: 6px;
	}


/* 特徴
---------------------------*/

	.system {
		position: relative;
		margin: 0 0 40px 15px;
		padding-left: 10px;
	}

.system b {
		display: block;
		padding-bottom: 6px;
	}

.system p {
 position: absolute;
left: 650px;
top: 25px; 

width: 280px;
padding: 20px 25px;

background: #F3F4F5;
color: #8a785d;

border-radius: 5px;
box-shadow: inset 0 2px 2px rgba(180,157,125,.15), inset 0 0 1px rgba(35,112,192,.2);
}

/* 経営方針
---------------------------*/
.how {
	padding: 60px 0;
}
	.how h2 {
		color: #2370C0;
	}
	#philosophy h3 {
		padding-bottom: 8px;
	}
	
	.how h3 {
		padding-bottom: 20px;

		color: #000;
		font-size: 150%;
		line-height: 15px;
	}
	.how li {
		position: relative;
		margin: 0 0 40px 15px;
/* 		padding-left: 10px;
 */	}
	
	.how p {
		padding-bottom: 15px;
	}
	
/* 特徴
---------------------------*/



/* 会社情報
---------------------------*/
/* #about{ background-color: #2370C0; } */


/* dd設定 */

dl.aboutmain {
	margin-bottom: 60px;
	padding: 10px;
	clear: both;
}
.aboutmain dt {
	font-weight: bold;
	color: #2370c0;
	text-align: right;
	margin: 0 0 0.8em;
	padding-left: 5px;
	width: 6em;
	float: left;
	clear: left;
}

dl.aboutmain dd {
  margin-bottom: 0.8em;
  margin-left: 8em;
}

dl.aboutsub {
	margin: 0 30px 60px 30px;
	padding: 10px;
	clear: both;
	background: #F3F4F5;
	border-radius: 5px;
	box-shadow: inset 0 2px 2px rgba(0,0,0,.09), inset 0 0 1px rgba(35,112,192,.2);
}

dl.aboutsub dt {
	font-weight: bold;
	color: #000;
	margin: 0 0 0.8em;
	padding-left: 5px;
	width: 8em;
	float: left;
	clear: left;
}

.aboutsub dd  {
  margin-bottom: 0.8em;
  margin-left: 10em;
}

/* history */

dl.list {
	border-bottom: 1px solid #d1d1d1;
}

dl.list dt {
	color: #000;
	float: left;
	width: 10em;
	border-top: 1px solid #d1d1d1;
	padding: 8px 0 0 25px;
}

dl.list dd {
   margin-left:10em;
   padding-top:8px;
   padding-bottom:8px;
   padding-right:8px;
   border-top:1px solid #d1d1d1;
}
/* アクセス
---------------------------*/

#access{
	background-color: #e9e9e9;
}
#access p{
	padding-left: 25px;
}

dl.address {
	padding: 10px;
	clear: both;
}
.address dt {
	font-weight: bold;
	color: #2370c0;
	text-align: right;
	padding-left: 5px;
	width: 6em;
	float: left;
	clear: left;
}

dl.address dd {
  margin-left: 8em;
}

div#maps{ background-image: url(../img/map-jp.png); background-position: 50% 50%; width: 100%; height: 350px; }


/* dl.address {
	padding-left: 25px;
	clear: both;
	border-radius: 5px;
}

dl.address dt {
	padding-left: 5px;
	width: 5em;
	float: left;
	clear: left;
}
dl.address dd {
	color: #000000;
  margin-left: 5em;
}
 */
/* プライバシーポリシー
---------------------------*/
#privacy { padding: 60px 0 100px 0; }

#privacy h2{ padding-bottom: 20px; }
.list li{
	position: relative;
	margin: 2.5em 0 0 15px;
}
.slist { list-style: disc outside none;
padding-left: 30px; }


.slist li{ margin: 0; }


/* メールフォーム送信完了（フォームは別ファイル）
---------------------------*/

#thanks{ min-height: 500px; }

/* 採用情報
---------------------------*/
#recruit{
	color: #fff;
	background: #19A7AF url(../img/recruit_bg.png) 75% 70px no-repeat;
}
#recruit h2 {
color: #000;
}
#recruit .aboutmain dt {
color: #000;
}

/* フッター
---------------------------*/
#footer{
	background-color: #222222;
}

.sitemap {
	padding-top: 60px;
	overflow: hidden;
}
	.sitemap h2 {
		font-size: 125%;
		color: #c0c0c0;
	padding-bottom: 20px;
	}

	.sitemap ul {
		clear: both;
	}
	
		.sitemap li {
		position: relative;
		padding: 10px 25px 10px 15px;
		list-style: none;
		
		float: left;
	}

.sitemap a {
border-left:1px solid #b7b7b7;
	text-decoration: none;
	color: #b7b7b7;
	padding-left: 10px;
	margin-left: 10px;
}
.sitemap a:hover {
	color: #8e3111;
}

.footer {
	padding: 30px 0;
	overflow: hidden;
}
.footer p {
	font-size: 85%;
	text-align: center;
	padding-left: 25px;
}
.wrap {
	margin: 0 auto;
	width: 960px;
}



/* ページトップへ戻る */
.pageTop {
	display:none;
	position:relative;
	width:90%;
	max-width:900px;
	height:0;
	margin:0 auto;
}
.pageTop a {
	position: fixed;
	bottom: 0px;
	left:auto;
	display: block;
	width: 66px;
	hegiht:66px;
	margin-left:920px;
	padding:1em 0 1em 2px;
	background:#222222;
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
	border-radius:3px 3px 0 0;
}
.pageTop a:before,
.pageTop a:after {
	position:absolute;
	left:50%;
	content:"";
	width:0px;
	height:0px;
	margin-left:-10px;
	border:10px solid transparent;
}
.pageTop a:before {
	top:50%;
	margin-top:-13px;
	border-bottom:10px solid #222222;
}
.pageTop a:after {
	top:50%;
	margin-top:-15px;
	z-index:-1;
	border-bottom:10px solid #fff; /* 矢印の色 */
}
/* =====================
	タブレット向け
======================= */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {

	.wrap {
		width: 90%;
	}
	#logo {
		top: 50px;
	}
	/* 	#logo {
		left: 50px;
		top: 30px;
	}
 */	
	.banner h1, .banner h2 {
		font-size: 24px;
		line-height: 30px;
	}
	.banner ul li {
		padding-top: 100px;
		padding-bottom: 50px;
		min-height: 250px;
	}
	.banner p {
		font-size: 15px;
		width: 80%;
		margin: 0 auto;
	}
	.features li {
		width: 100%;
		margin-left: 10px;
		margin-bottom: 30px;
	}
	.how li {
		width: 90%;
	}

div#maps{ background-image: url(../img/map-jp.png); background-position: 50% 50%; background-size: auto 426px;}

	.system {
		margin: 0px;
		padding: 0px;
	}
	.system p {
		margin-top: 30px;
		position: static;
		width: 100%;
		overflow: auto;
	}
	.system img {
    max-width: 100%; 
    height:auto;
		}
	.pageTop {
		width:100%;
	}
	.pageTop a {
		left:-68px;
		margin-left:100%;
	}
/* タブレット向けここまで */ }

/* =====================
	スマホ向け
======================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.features li:before {
		background: url('../img/icons@2x.png');
		background-size: 100%;
	}
.how h3 {
line-height: 1.6;}

dl.aboutmain {
padding: 0;
}
dl.aboutsub {
margin: 0;
padding: 10px;
}
.aboutsub dd {
margin-left: 8em;
}
.address dt {
width: 3em;
}
dl.address dd {
margin-left: 4em;
}
.pageTop {
	width:100%;
}
.pageTop a {
	left:-68px;
	margin-left:100%;
}
.footer p {
	text-align: left;
}

/* スマホ向けここまで */ }