@charset "utf-8";
body {
	width: 100%;
	height: 100%;
	min-width: 300px;
	overflow-x: hidden;
	position: relative;
	margin: 0;
	font-family:"NotoSerif","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",serif;
}

@font-face {
	font-family: "NotoSerif";
	src: url('../font/NotoSerifCJKjp-Light_min.woff') format('woff'), /* モダンブラウザ用 */ url('../font/NotoSerifCJKjp-Light_min.otf') format('opentype'); /* iOS, Android用 */
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "NotoSerif";
	src: url('../font/NotoSerifCJKjp-SemiBold_min.woff') format('woff'), /* モダンブラウザ用 */ url('../font/NotoSerifCJKjp-SemiBold_min.otf') format('opentype'); /* iOS, Android用 */
	font-weight: bold;
	font-style: normal;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
ol {
	margin: 0;
	padding-left: 20px;
}
a {
	color: #000;
	text-decoration: none;
}

.ib{
	display: inline-block;
	vertical-align: middle;
}

.w1000 {
	max-width: 1040px;
	width: 95%;
	margin: auto;
}

.w950 {
	max-width: 950px;
	width: 100%;
	margin: auto;
}

.w800 {
	max-width: 800px;
	width: 95%;
	margin: auto;
}
.flex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}

.flex_wrap{
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flex_between {
	-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack: justify;/*--- IE10 ---*/
	-webkit-justify-content: space-between;/*--- safari（PC）用 ---*/
	justify-content: space-between;
}

.flex_front {
  -webkit-justify-content: center;       /* Safari etc. */
  -ms-justify-content    : center;       /* IE10        */
  justify-content        : center;
}

.flex_around {
	-webkit-box-pack: justify;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack: distribute;/*--- IE10 ---*/
	-webkit-justify-content: space-around;/*--- safari（PC）用 ---*/
	justify-content: space-around;
}

.flex_center{
    -webkit-box-align:center;/*--- Androidブラウザ用 ---*/
    -ms-flex-align:center;/*--- IE10 ---*/
    -webkit-align-items:center;/*--- safari（PC）用 ---*/
    align-items:center;
}

.flex_bottom{
    -webkit-box-align:flex-end;/*--- Androidブラウザ用 ---*/
  -webkit-align-items: flex-end;    /* Safari etc. */
  -ms-align-items    : flex-end;    /* IE10        */
    align-items:flex-end;
}

.flex_top{
    -webkit-box-align:flex-start;/*--- Androidブラウザ用 ---*/
  -webkit-align-items: flex-start;    /* Safari etc. */
  -ms-align-items    : flex-start;    /* IE10        */
    align-items:flex-start;
}

.flex_strech{
	align-content: stretch;
}

h1,h2,h3,h4,h5,p{
	margin: 0;
}

.table_style{
	border-collapse: collapse;
	width: 100%;
}

.table_style th,
.table_style td{
	padding: 10px;
	text-align: left;
	font-weight: normal;
	background-color: #FFFFFF;
	vertical-align: top;
}

.table_style tr{
	border-bottom: 1px solid #aaa;
}

.table_style tr:last-of-type{
	border: none;
}

.table_style th{
	width:90px;
	border-right: 1px solid #aaa;
}


/*ヘッダー*/
#header{
	position: absolute;
	top:0;
	left: 0;
	background-color: rgba(255,255,255,0.75);
	color: #725A28;
	border-bottom: 1px solid #725A28;
	height: 80px;
	width: 100%;
	font-size: 0;
	z-index: 10;
}

#header:after{
	position: absolute;
	width: 100%;
	content: "";
	bottom: 7px;
	left: 0;
	height: 1px;
	background-color: #725A28;
}

#header_inner{
	height: 80px;
	position: relative;
}

#header_inner h1 img{
	width:150px;
}


#nav ul li{
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	width: 130px;
}

#nav ul li a{
	display: inline-block;
	width: 130px;
	font-size: 18px;
	font-weight: bold;
	color: #725A28;
	line-height: 1;
}

.hover #nav ul li a:hover{
	width:80%;
}

/*コンテンツ*/
#index_main{
	position: relative;
	width: 100%;
}

#index_main h2{
	text-align: center;
	color: #725A28;
	letter-spacing:20px;
	line-height: 1.75;
	position: relative;
}

#index_main h2:after{
	position: absolute;
	content: "";
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 5px;
	background: -webkit-linear-gradient(left, #8e652e 0%, #c69747 63%, #dfae53 100%);
	background: -ms-linear-gradient(left, #8e652e 0%, #c69747 63%, #dfae53 100%);
	background: linear-gradient(to right, #8e652e 0%, #c69747 63%, #dfae53 100%);
}

#top_img{
	position: absolute;
	top:0px;
	left:0px;
	width:100vw;
	height: 900px;
	overflow: hidden;
	z-index:-1;
	background-image: url(../img/top.jpg);
	background-size: cover;
	background-position: center;
}

#top_copy{
	padding: 300px 0 280px 0;
	text-align: center;
	background: -webkit-linear-gradient(top, rgba(244,239,228,0.3) 0%,rgba(244,239,228,0.4) 100%);
	background: -ms-linear-gradient(top, rgba(244,239,228,0.3) 0%,rgba(244,239,228,0.4) 100%);
	background: linear-gradient(to bottom, rgba(244,239,228,0.3) 0%,rgba(244,239,228,0.4) 100%);
}

#top_copy h1{
	text-align: left;
	font-size:40px;
	padding-left: 10px;
	box-sizing: border-box;
	color: #fff;
	text-shadow: 0px 2px 4px rgba(0,0,0,0.7);
}

/*#top_copy h1:last-of-type{
	text-align: right;
}*/

.beige{
	background: -webkit-linear-gradient(top, rgba(244,239,228,0.4) 0%, rgba(244,239,228,1) 8%,rgba(244,239,228,1) 100%);
	background: -ms-linear-gradient(top, rgba(244,239,228,0.4) 0%, rgba(244,239,228,1) 8%,rgba(244,239,228,1) 100%);
	background: linear-gradient(to bottom, rgba(244,239,228,0.4) 0%, rgba(244,239,228,1) 8%,rgba(244,239,228,1) 100%);
	min-height: 1000px;
	padding-bottom: 60px;
}

/*事業内容*/
#works h3{
	font-size: 22px;
	margin-bottom: 20px;
}

#works_auto{
	margin: 50px 0;
}

.works_auto_txt{
	margin-right: 25px;
	width: 100%;
}

.works_auto_txt h3{
	position: relative;
	padding:15px;
	margin-left: 20px;
	border:5px solid #BFAE86;
}

.works_auto_txt h3:after{
	position: absolute;
	content: "";
	left: -20px;
	top:-25px;
	width: 60px;
	height: 60px;
	z-index: -1;
	border:5px solid #BFB6A2;
}

.works_auto_txt p{
	width:90%;
	margin: auto;
}

#works_merit{
	margin-bottom: 60px;
}

.merit_child{
	width: 32%;
	background-color: #A89875;
	color:#fff;
	box-sizing: border-box;
	padding: 15px 15px 30px 15px;
}

.merit_child:nth-of-type(1){
	background-color: #A89875;
}

.merit_child:nth-of-type(2){
	background-color: #899198;
}

.merit_child:nth-of-type(3){
	background-color: #A29B8A;
}

.merit_child h4{
	font-size:18px;
	margin-bottom: 10px;
	vertical-align: middle;
	text-shadow: 0px 2px 4px #222;
}

.merit_child h4 b {
	font-size:40px;
	font-weight: normal;
	margin-right: 5px;
	vertical-align: middle;
}

.merit_child h4 span{
	vertical-align: middle;
}

.merit_child p{
	line-height: 1.4;
	text-shadow: 0px 2px 4px #222;
}

.merit_img{
	background-color: #fff;
	width: 100%;
	margin: 20px 0;
	padding: 30px 0;
	text-align: center;
}

.merit_img img{
	max-width: 750px;
	width: 95%;
}

#works_flow{
	margin-bottom: 60px;
}

#works_flow h3{
	text-align: center;
	font-size: 26px;
}

#works_flow h3 span{
	font-size: 24px;
}

#works_flow h4{
	font-size: 20px;
	margin-bottom: 5px;
}

.flow_child{
	position: relative;
	padding: 15px 0;
	border-top:1px solid #A89875;
	border-bottom:1px solid #A89875;
	margin-bottom: 35px
}

.flow_child:after{
	position: absolute;
	bottom:-20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 30px 0 30px;
	border-color: #A89875 transparent transparent transparent;
}

.flow_child:last-of-type:after{
	display: none;
}

.flow_child img{
	width:90px;
	margin:0 30px 0 15px;
	opacity: 0.8;
}

.flow_txt{
	flex: 1;
}

#works_rent{
	padding:50px 0 50px 30px;
	position: relative;
	box-sizing: border-box;
	z-index: 1;
}

#works_rent:after{
	position: absolute;
	content: "";
	box-sizing: border-box;
	top:0;
	left: 0;
	height: 100%;
	width: 180px;
	border: 7px solid #C0B59C;
	z-index: -2;
}

/*会社情報*/
#company{
	padding: 80px 0;
	min-height: 1000px;
	background-image: url(../img/company.jpg);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

#company h3{
	display: inline-block;
	margin: 60px 0 40px 0;
	padding: 8px 15px;
	background-color: #45545E;
	color:#fff;
}

#company table{
	width: 100%;
	border-collapse: collapse;
}

#company table tr{
	border-bottom: 1px solid #8B6D31;
	text-align: left;
}

#company table tr:last-of-type{
	border:none;
}

#company th{
	padding-left: 30px;
}

#company td{
	padding: 10px 0;
	font-weight: bold;
}

#company .img-map{
	width:100%;
	margin-bottom: 30px;
}

.mobile_tbl{
	display: none;
}

/*トップへ戻る*/
#go_top{
	position: fixed;
	display: none;
	right: 50px;
	font-size: 14px;
	padding: 5px;
	text-align: center;
}

#go_top svg{
	width: 60px;
}

/*フッター*/
#footer{
	background-color: #6B5528;
	padding-top: 20px;
	color:#fff;
}

#footer_inner{
	padding-bottom: 20px;
}

#footer img{
	width:150px;
}

#footer ul{
	text-align: right;
}

#footer li{
	display: inline-block;
}

#footer li:first-of-type{
	margin-right: 40px;
}

#footer li a{
	color:#fff;
	padding: 5px 0;
}

#copyright{
	padding: 20px 0;
}


@media screen and (max-width:980px) {
	body{
	}
	
	#works_auto{
		display: block;
	}
	
	.works_auto_txt h3{
		max-width: 300px;
		margin-top: 70px;
	}
	
	.works_auto_img{
		margin-top: 20px;
		text-align: center;
		max-height: 370px;
		overflow: hidden;
		
	}
	
	.works_auto_img img{
		width: 100%;
		transform: scale(1.1);
		max-width: 580px;
	}
	
	.merit_child{
		width: 100%;
		margin-bottom: 15px;
	}
	
	.merit_child:last-of-type{
		margin-bottom: 0;
	}
	
	#go_top{
		right: 30px;
	}
}

@media screen and (max-width:599px) {
	#header{
		height: auto;
		padding-bottom: 10px;
	}
	
	p{
		font-size: 15px;
	}
	
	#header_inner{
		display: block;
		text-align: center;
		height: auto;
	}
	.works_auto_txt p{
		width: 100%;
	}
	
	#header_inner h1{
		margin: 15px 0;
	}
	
	#nav ul li{
		width: 50%;
	}
	
	#top_img{
		background-position: bottom;
		height: 700px;
	}
	
	#top_copy{
		padding: 230px 0 130px 0;
	}
	
	#top_copy h1{
		font-size:5.8vw;
	}
	
	
	#index_main h2{
		letter-spacing: 5px;
	}
	
	#works h3{
		font-size: 20px;
	}
	
	#works_flow h4{
		font-size:18px;
	}
	
	.flow_child img{
		width:65px;
		margin: 0 10px 0 10px;
	}
	
	#works_rent{
		padding: 40px 0 40px 15px;
	}
	
	#works_rent:after{
		border-width: 5px;
		width: 250px;
	}
	
	#company{
		padding: 40px 0;
		min-height: 800px;
		background-size: 200%;
	}
	
	#company h3{
		margin: 30px 0 20px 0;
		padding:5px 10px;
		font-size: 16px;
	}
	
	#company th{
		padding: 10px 0 0 10px;
		display: block;
	}
	
	#company td{
		text-align: right;
		padding: 5px 0px 5px 10px;
		display: block;
	}
	
	.pc_tbl{
		display: none;
	}
	
	.mobile_tbl{
		display: block;
		text-align: center;
	}
	
	.mobile_tbl img{
		max-width: 400px;
	}
	
	#go_top{
		right: 10px;
		z-index: 10;
		background-color: rgba(255,255,255,0.6);
	}
	#go_top svg{
		width: 40px;
	}
	
	#footer li:first-of-type{
		margin-right: 10px;
	}

}