/********************************
株式会社APEXIAのHP
 制作：Namishi@HystericEnd.co,ltd.
 製作開始 2021.4.4

********************************/

/********************************
注意事項
①bootstrap3系使用。
②styleは別書にすること。
③wrapを導入max-width:1024pxでセンタリングで枠組みを組めます。
④メディアクエリブレイクポイント
@media screen and (max-width: 1024px) { }
@media screen and (max-width: 896px) { }
@media screen and (max-width: 480px) { }
PC first 対応。

********************************/






/********** 全体共通 **********/
@media screen and (min-width: 1024px) {

a {color:#000!important;}

.fz8{font-size:8pt;}
.fz9{font-size:9pt;}
.fz10{font-size:10pt;}
.fz11{font-size:11pt;}
.fz12{font-size:12pt;}
.fz13{font-size:13pt;}
.fz14{font-size:14pt;}
.fz15{font-size:15pt;}
.fz16{font-size:16pt;}
.fz17{font-size:17pt;}
.fz18{font-size:18pt;}
.fz19{font-size:19pt;}
.fz20{font-size:20pt;}
.fz22{font-size:22pt;}
.fz24{font-size:24pt;}
.fw800{font-weight:800;}

	*{
	font-weight: 750;
	}
	b{color:#f00;
	font-weight: 800;
	}

.mag15{margin:-15px!important;}

.centerxy{
	display:flex;
	flex-flow: wrap;
    justify-content:center;
	align-items: center;
    }

.centery{
	display:flex;
	flex-flow: wrap;
	align-items: center;
    }


.wid100{
	width:100%;
}

.hed100{
	height:100%;
}

.pcnone{display:none;}

.red{background-color: #f00;
height:200px;}


/********** フレーミング TOP **********/

body{
	background-color: #BFD3F7;
}

.box_0_1{
	height:calc(100vh - 100px);
	background-color:#6495ED;
	overflow:hidden;
	position:relative;
	}
.box_0_2{background-color:#fff;
height:auto;
text-align:center;
}
.box_0_3{margin-top:10px;}
.box_0_4{
height:400px;
}
.box_0_5{background-color:#ffe4e1;}
.box_0_6{background-color:#6495ED;
height:300px;}

.box_0_7{
width:850px;
height:300px;
z-index:10;
color:#fff;
}

.box_0_7_l{
width:300px;
height:300px;
float: left;
background-color: rgba(255,255,255,0.8);
}

.box_0_7_r{
width:550px;
height:300px;
float: left;
}
.title01{
background-color: rgba(0,0,0,0.3);
padding:10px;
}
	
	
video{
	width:100%;	
	position:relative;
	bottom:200px;
}

.box_outer1{
	width:100%;
	height:100%;
	z-index:10;
	position:absolute;
top:0;
left:0;
}
	
.btn-default{
	background-color: #CBED64;
}


/********** フレーミング 深層 **********/


.box_1_1,.box_1_2,.box_1_3,.box_1_4,.box_1_5,.box_1_6
{
	margin:0;
	padding:0;
	min-height:100px;
	border:0px;
}



.box_1_1{
	height:calc(100vh - 220px);
	background-color:#008b8b;
	}
.box_1_2{
height:auto!important;
min-height:auto!important;
}
.box_1_3{
height:auto;
	text-align:left;
}

.box_1_6{background-color:#fa8072;}
.box_1_7{
width:200px;
height:200px;
border:1px solid #000;
background-color: rgba(0,0,0,0.3);
}

/* 会社概要detail*/
table th{background-color: #eee;}

/*事業内容 detail*/
.box_2_1{width:50%;
float: left;
overflow:hidden;
 display:flex;
 margin-bottom:20px;
}

.box_2_2{
	width:100%;
	margin-bottom:30px;
}

.box_2_3{
	width:40%;
	float: left;
	overflow:hidden;
	float: left;
	display:flex;
	align-items:center;
}

.box_2_4{
	width:60%;
	float: left;
	background-color:#6495ED;
	padding:10px;
}

/*社員紹介 detail*/

.box_3_1{width:100%;
height:auto;
border-top:2px solid #000;
float: left;
	margin-bottom:60px;
}

.box_3_2{
	width:calc(100% - 300px);
height:400px;
	float: left;
	background-color:#f6ab00;
	padding:10px;
}

.box_3_3{
	width:300px;
height:400px;
	float: left;
	background-color:rgba(0,0,255,0.3);
}
/*アクセス detail*/
.box_4_1{width:100%;
height:400px;
border-top:2px solid #000;
float: left;
	margin-bottom:60px;
}

.box_4_2{
	width:50%;
	height:100%;
	float: left;
	background-color:#6495ED;
	padding:10px;
}

.box_4_3{
	width:50%;
	height:100%;
	float: left;
	background-color:rgba(0,0,255,0.3);
}

.map{width:100%;
height:100%;
}
/* お問い合わせ detail*/

.box_5_3{
	text-align:left;
	padding-left:20px;
}
/*求人情報 detail*/
table.recruit{
  width: 100%;
  height:600px;
  border-collapse: collapse;
clear : both;
margin-bottom:20px;
}

table.recruit tr{
  border-bottom: solid 2px #ccc;
}

table.recruit tr:last-child{
  border-bottom: none;
}

table.recruit th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #6495ED;
  color: #000;
  text-align: center;
  padding: 10px 0;
}

table.recruit th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #6495ED;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table.recruit td{
  text-align: left;
  width: 70%;
  background-color: #fff;
  padding: 10px 0;
  padding-left:20px;
}

.box_6_1{
	width:100%;
	display: block;
	float: left;
}

.logo{width:100%;}

.navbar-brand{
	padding:0;
}

.header{
	width:100%;
	height:100px;
	float: left;
/*	background-color: #fff; */
}
.headbox_01{
	height:100px;
}

.headbox_02{
	line-height:100px;
	height:100px;
	text-align:right;
}

ul.navigation_01{
	width:800px;
	height:100px;
}


ul.navigation_01 li{
	display: block;
	width:100px;
	height:100px;
	float: left;
}

.box_mem1{
	width:100%;
	min-height:200px;
	float: left;
	border:1px solid #000;
	margin-bottom:10px;
}

.box_mem1_l{
	width:30%;
	min-height:200px;
	float: left;
}
	.box_mem1_r{
	width:70%;
	min-height:200px;
	float: left;
}

.box_mem2_l{
	width:10%;
	float: left;
	background-color: #fff;
}
	.box_mem2_r{
	width:30%;
	float: left;
		padding-bottom:20px;
		padding-left:20px;
}
	.box_mem3_r{
	width:60%;
	height:300px;
	float: left;
		padding-bottom:20px;
		padding-left:20px;
}

ul.navigation_02{
	width:100%;
	height:300px!important;
}


ul.navigation_02 li{
	display: block;
	width:100px;
	height:100px;
	float: left;
}



.box_0_1_10{
	height:calc(100vh - 100px);
	background:url("../img/fig2.jpg");
	background-size: cover;
	background-position: center;
	overflow:hidden;
	position:relative;
	}


.box_0_1_11{
	height:calc(100vh - 100px);
	background:url("../img/fig5.jpg");
	background-size: cover;
	background-position: center;
	overflow:hidden;
	position:relative;
	}


.box_0_1_12{
	height:calc(100vh - 100px);
	background:url("../img/fig9.jpg");
	background-size: cover;
	background-position: center;
	overflow:hidden;
	position:relative;
	}


.box_0_1_13{
	height:calc(100vh - 100px);
	background:url("../img/fig1.jpg");
	background-size: cover;
	background-position: center;
	overflow:hidden;
	position:relative;
	}



.box_0_1_14{
	height:calc(100vh - 100px);
	background:url("../img/fig4.jpg");
	background-size: cover;
	background-position: center;
	overflow:hidden;
	position:relative;
	}

.breadcrumb{
	margin-top:10px;
}

.box5_1{
	text-align:center;
}

.box5_2{
	background-color: #000;
	height:100px;
	color:#fff;
	border:1px solid #fff;
position:relative;
}

.box5_2::after {
	 content: ">";
	 font-size: 20px;
	 top:center;
	 right:10px;
position:absolute;
}

.box_5_100{
	width:33%;
	height:auto;
	float:left;
	padding:10px;
	margin-bottom:10px;
}

.box_5_101{
	width:100%;
	height:auto;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	float:left;
	margin-bottom:10px;
}

.box_5_102{
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	float:left;
	border-radius:calc(100% - 20px);
	overflow:hidden;
	background-color: #ccc;
}

.box_5_103
{
	width:100%;
	height:auto;
	float:left;
	padding:20px;
	font-weight:normal;
}

.box_5_104{
	font-size:16pt;
	color:#ccc;
	margin-left:20px;
}

.box_5_105{
	font-size:12pt;
}

.box_5_200 {
	width:100%;
	height:auto;
	float:left;
}



.box_0_100{
	overflow:hidden;
	display:flex;
	align-items:center;
}

.mod_1{
	width:100%;
	height:500px;
}

.mod_1 p{
  line-height: 200%;
}

.title{
	  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #fff;/*背景色*/
  border-left: solid 5px #6495ED;/*左線*/
}

.title2{
background-color: rgba(0,0,0,0.3);
color:#fff;
}

.breadcrumb{
	background-color: #6495ED!important;
}

.mod_1 th{
	background-color: #6495ED!important;
}

.mod_1 td{
	background-color: #fff!important;
}

.mobbox_2{
	background-color: #6495ED!important;
	padding:10px;
}

}/*クエリ末端*/