@charset "utf-8";

/*================================================
　安山建設　スタイルシート
==================================================*/

body {
	font-size: 18px;
	line-height: 1.5em; 
	color: #333;
	-webkit-text-size-adjust: 100%;
	font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	text-align: center;
}
media@(max-width:640px) {
	body {line-height: 1.4em;}
}
img { 
	max-width: 100%; 
	height:auto;
	vertical-align:bottom;
}
a img {
	border: none;
}
.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width: 768px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}
@media screen and (min-width: 480px){   
  .br_pc { display:block; }
  .br_sp { display:none; }
}

.iframe-content {
  position: relative;
width: 100%;
   padding: 75% 0 0 0;
}
.iframe-content iframe {
   position: absolute;
top: 0;
left: 0;
   width: 100%;
   height: 100%;
}
iframe.if-border-none { border: none; }

/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    width:100%;
    height: 100vh; /*高さを全画面にあわせる*/
    overflow: hidden;
} 

.video_wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.video_wrapper > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}

/*見出し設定*/
#top_img{
	z-index: 1;
	/*要素の配置*/
	position:absolute;
	/*要素を天地中央寄せ*/
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	 /*見た目の調整*/
	color:#fff;
	text-shadow: 0 0 15px #666;
	font-size:32px;
}

/*========= レイアウトのためのCSS ===============*/
/* ----------- ヘッダー部・グローバルメニュー部 ------------ */
#header-fixed {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 90px;
	background-color: none;
	z-index:99;
	color:#333;
}
#header-fixed.change-color {
	position: fixed;
    	background-color: #fff;
	color:#333;
	border-bottom:2px solid #ccc;
animation: SlideIn 0.7s;
}
@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(-90px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.head {
	margin: 0px auto;
	padding: 0;
	max-width:1300px;
	text-align: left;
	display:flex;
	height: 90px;
}
.head_1 {
	margin: 0px; padding: 10px;
	width:30%;
}
.head_2 {
	margin: 0px; padding: 10px;
	width:50%;
}
.head_3 {
	margin: 0px 0px 1px; padding: 0;
	width:20%;
	text-align:right;
}
.head_3 ul {
	list-style:none;
}
.head_3 ul li {
	height:50%;
	text-align:center;
}

@media screen and (max-width: 899px) {
	#header-fixed,
	.head {
		height: 80px; /*スマホ　ハンバーガー表示時*/
	}

	.head_1 {width:80%;}
	.head_3 {display:none;}
}

/* ----------- 要素のスタイル ------------ */

#container{
	background:#fff;
	margin-bottom:0;
	padding:60px 0 0;
    overflow: hidden;
}

.block01 {
	margin:60px auto;
	/*background-color:#eaeff2;*/
}
.block01_1 {
	margin: -90px auto 0;/*margin: 0 auto;*/
	padding: 120px 10px 0px;
	max-width:1220px;
}

.block02 {
	margin:90px auto 0;
}
.block02_1 {
	margin-top: -90px;
	padding-top:90px;*
}

/* ----------- フッター部 ------------ */
.foot {
	clear: both;
	margin: 50px auto 0;
	padding-top: 50px;
	max-width: 100%;
	overflow: hidden;
	font-weight: bold;
	background: #d5d5d5;
}

.foot_box {
	max-width: 300px;
	margin:20px auto;
}
.sp_foot_toi { /* -----------　スマホ用最下部固定表示　-------------- */
	display: none;
}
.copyright {
	margin:30px auto;
}
@media screen and (max-width: 899px) {
	.sp_foot_toi { /* -----------　スマホ用最下部固定表示　-------------- */
		display: block;
		width: 100%;
		background: #292929;
		text-align: center;
		position: fixed;
		bottom: 0;
		left:0;
		z-index: 10;
		overflow: hidden;
	}
	.foot {	padding-top: 20px;}
	.copyright {margin-top:20px;margin-bottom:70px;}
}

/* ------　スクロール時表示固定　----- */
#scroll_fixed{
	position:fixed;
	bottom:100px;
	right:30px;
	z-index:999;
}
/*@media screen and (max-width: 767px) {
	#scroll_fixed{
		right: 5px;
		max-width: 30px;
	}
}*/

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


.colum_multi {
	display: -webkit-flex;
	display:flex;
	justify-content: center;
	margin:0 auto;
}
.col-w_50 {
	width:50%;
	margin:0 auto;
}
@media screen and (max-width: 900px) {
	.colum_multi {display:block;}
	.col-w_50 {width:auto;max-width:100%;}
}

/* ----------- ヘッダー装飾 ------------ */

.h_style1 {
	position: relative;
	display: inline-block;
	margin: -90px auto 1em;
	padding-top:90px;
	font-size:30px;
	color: #111;
}
.h_style1:before {
	content: '';
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 60px;
	height: 5px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #0c6abd;
	border-radius: 2px;
}

.h_style2 {
	height:300px;
	width:100%;
}
.h_style2 .title {
	margin:0 auto;
	padding-top:100px;
	font-size:30px;
	color:#fff;
text-shadow: 1px 1px 7px #222;
}
.h_style2bk2 {background: url(../img/h_back02.jpg) no-repeat top center;}
@media screen and (max-width: 768px) {
	.h_style2bk2 {background: url(../img/h_back02_sp.jpg) no-repeat top center;}
}

/* -----------  ------------ */
.p_style {
	margin-top:15px;
	text-align:left;
}

/* -----------　業務内容  --------------------------*/
.box {
	margin-top:50px;
	height:400px;
	width:100%;
	color:#fff;
	display: flex;
}
.box_left {
	width: 40%;
	background-color: rgba(12,106,189,0.8);/*--#0c6abd--*/
	margin:0 auto;
	padding:50px;
	text-align:left;
}
.box_right {
	width: 60%;
}
.box_right .kakudai {
	position: relative;
	text-align:right;
	padding-top:10px;
	padding-right:10px;
}

.box_left h3 {
	font-size:24px;
	text-align:center;
	margin-bottom: 50px;
}

.boxbk1 {background: url(../img/work01.jpg) no-repeat top center;}
.boxbk2 {background: url(../img/work02.jpg) no-repeat top center;}
.boxbk3 {background: url(../img/work03.jpg) no-repeat top center;}
.boxbk4 {background: url(../img/work04.jpg) no-repeat top center;}
.boxbk5 {background: url(../img/work05.jpg) no-repeat top center;}

@media screen and (max-width: 900px) {
	.box {display:block; height:500px;}
	.box_left { width: 100%;}
	.box_right { width: 100%;}
	.boxbk1 {background: url(../img/work01_sp.jpg) no-repeat top center;}
	.boxbk2 {background: url(../img/work02_sp.jpg) no-repeat top center;}
	.boxbk3 {background: url(../img/work03_sp.jpg) no-repeat top center;}
	.boxbk4 {background: url(../img/work04_sp.jpg) no-repeat top center;}
	.boxbk5 {background: url(../img/work05_sp.jpg) no-repeat top center;}
}

/* -----------　施工実績  --------------------------*/
.results-table{
	margin:30px auto 0;
	border:#111 1px solid;
	border-collapse: collapse;
	border-spacing: 0;
	font-size:16px;
}
.results-table td{
	padding:10px;
	display:block;
	text-align:left;
	border-bottom:#111 1px solid;
}
/*----- PCでの表示 -----------*/
@media only screen and (min-width: 680px) {
	.results-table{
		margin:5px auto;
		border:#111 1px solid;
	}
	.results-table tr{
		border-bottom:#111 1px solid;
	}
	.results-table tr:last-child{
		border:none
 	}
	.results-table td{
		width:330px;   
		padding:10px;
		display:table-cell;
		border-right:#111 1px solid;
	}
}


/*-------------　レスポンシブテーブル(2列　th色付き)　-----------------*/
/*----- スマホでの表示 -------*/
.res-table{
	margin:0 auto;
	/*border:#fff 1px solid;*/
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
	font-size:16px;
}
.res-table th{
	padding:10px;
	display:block;
	border-bottom:#111 1px solid;
}
.res-table td{
	padding:10px;
	display:block;
	text-align:left;
	border-bottom:#111 1px solid;
}
/*----- PCでの表示 -----------*/
@media only screen and (min-width: 480px) {
.res-table{
	max-width:900px;
	margin:5px auto;
	font-size:90%;
	/*border:#fff 1px solid;*/
}
.res-table tr{
	border-bottom:#111 1px solid;
}
.res-table tr:last-child{
	border:none
 }
.res-table th{
	width:30%;   
	padding:10px;
	display:table-cell;
	/*border-right:#bcbcbc 1px solid;*/
}

.res-table td{
	width:70%;   
	padding:10px;
	display:table-cell;
}
}

/*------------------　会社案内　---------------------*/
#company h3 {
	padding-top:50px;
	text-align:center;
	font-size:24px;
	color: #111;
}

.company_outside {
	margin-top:30px;
}
.company_right {
	max-width:700px;
	padding:0 20px 20px;
}

@media screen and (max-width: 900px) {
	.company_right {padding-top:20px;}
}

/*------------------　求人情報　---------------------*/
#recruit h3 {
	text-align:center;
	font-size:24px;
	padding-top:50px;
	color: #111;
}

/*----- テーブル ------------------*/
/*----- スマホでの表示 -------*/
.recruit-table{
	margin:0 auto;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
	font-size:16px;
	color: #111;
}
.recruit-table th{
	padding:10px;
	display:block;
	border-bottom:#666 1px solid;
}
.recruit-table td{
	padding:10px;
	display:block;
	text-align:left;
	border-bottom:#666 1px solid;
}
/*----- PCでの表示 -----------*/
@media only screen and (min-width: 480px) {
.recruit-table{
	max-width:1000px;
	margin:5px auto;
}
.recruit-table tr{
	border-bottom:#666 1px solid;
}
.recruit-table tr:last-child{
	border:none
 }
.recruit-table th{
	width:30%;   
	padding:10px;
	display:table-cell;
}

.recruit-table td{
	width:70%;   
	padding:10px;
	display:table-cell;
}
}

/* -----------------------------------------------------------------------------
    送信フォーマット
   ----------------------------------------------------------------------------- */
#formWrap {
	max-width:100%;
	margin:0 auto;
	padding: 10px;
	color:#555;
	line-height:120%;
	font-size:90%;
}
/*----- テーブル ------------------*/
/*----- スマホでの表示 -------*/
.formTable{
	max-width: 100%;
	margin:0 auto;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
	color: #111;
	border:#ccc 1px solid;
}
.formTable th{
	padding:10px;
	display:block;
	border-bottom:#ccc 1px solid;
	background:#efefef;
}
.formTable td{
	padding:10px;
	display:block;
	text-align:left;
	background: #fff;
	border-bottom:#ccc 1px solid;
}
/*----- PCでの表示 -----------*/
@media only screen and (min-width: 600px) {
.formTable{
	max-width:1000px;
	margin:5px auto;
}
.formTable tr{
	border-bottom:#ccc 1px solid;
}
.formTable tr:last-child{
	border:none
 }
.formTable th{
	width:30%;   
	padding:10px;
	display:table-cell;
	border-right:#ccc 1px solid;
}

.formTable td{
	width:70%;   
	padding:10px;
	display:table-cell;
}
}

textarea {
width:100%;
box-sizing:border-box;border:none;
background: #efefef;
padding: 1em;
margin:0;
}