@charset "utf-8";
/* CSS Document */

body {
	width: 100%;
	background-color: #FFF;
	color: #000;
	font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	line-height: 2;
}

img { vertical-align: bottom; }

a:hover { opacity: 0.7; }

/*-----------------------------
text_style, box_style
-----------------------------*/

/*スマホ向けレイアウトの指定*/

.fs_12_sp { font-size: 12px; }
.fs_14_sp { font-size: 14px; }
.fs_16_sp { font-size: 16px; }
.fs_18_sp { font-size: 18px; }
.fs_20_sp { font-size: 20px; }
.fs_24_sp { font-size: 24px; }
.fs_30_sp { font-size: 30px; }
.fs_40_sp { font-size: 40px; }
.fs_50_sp { font-size: 50px; }
.fs_80_sp { font-size: 80px; }

.fs_150_sp {font-size: 150%; }
.fs_200_sp { font-size: 200%; }
.fs_250_sp { font-size: 250%; }
.fs_120_sp { font-size: 120%; }

.ta_center_sp { text-align: center; }
.ta_left_sp { text-align: left; }
.ta_right_sp { text-align: right; }

.fw_bold { font-weight: bold; }

.fc_white { color: #fff; }
.fc_black { color: #000; }
.fc_rd { color: #990000; }
.fc_bl { color: #4472C4; }

.space2 { letter-spacing: 2px; }
.space5 { letter-spacing: 5px; }

.only_sp { display: block; }
.only_tb { display: none; }
.only_pc { display: none; }

.lh_10 { line-height: 1; }
.lh_12 { line-height: 1.2; }
.lh_15 { line-height: 1.5; }
.lh_17 { line-height: 1.7; }

/*.bg_rd { background-color: #990000; }*/

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb60 { margin-bottom: 60px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt60 { margin-top: 60px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml60 { margin-left: 60px; }

.img_responsive {
	max-width: 100%;
	height: auto;
}

.link_01 {
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
}

.list_01 {
	list-style: none;
	text-indent: -1em;
	padding-left: 1em;
}


.list_02 {
	list-style: none;
}


.word_wrap {
	word-wrap: break-word;
}

.color_filter_base {
    background-color: #000; /* カラーフィルタ効果の色を指定 */
    /*display: inline-block;*/
}
.color_filter_image {
    opacity: 0.7;    /* カラーフィルタ効果の度合いを指定(※) */
    display: block;
}

	/*タブレットレイアウトの指定*/
	@media only screen and (min-width:768px){
	.fs_12_tb { font-size: 12px; }
	.fs_16_tb { font-size: 16px; }
	.fs_18_tb { font-size: 18px; }
	.fs_20_tb { font-size: 20px; }
	.fs_24_tb { font-size: 24px; }
	.fs_30_tb { font-size: 30px; }
	.fs_40_tb { font-size: 40px; }
	.fs_50_tb { font-size: 50px; }
	.fs_80_tb { font-size: 80px; }

	.fs_150_tb {font-size: 150%; }
	.fs_200_tb { font-size: 200%; }
	.fs_250_tb { font-size: 250%; }
	.fs_120_tb { font-size: 120%; }

	.ta_center_tb { text-align: center; }
	.ta_left_tb { text-align: left; }
	.ta_right_tb { text-align: right; }

	.only_sp { display: block; }
	.only_tb { display: block; }
	.only_pc { display: none; }
	}

		/*PC向けおよび大型PCの指定*/
		@media only screen and (min-width:1080px){
		body { min-width: 1080px; }

		.fs_12_pc { font-size: 12px; }
		.fs_14_pc { font-size: 14px; }
		.fs_16_pc { font-size: 16px; }
		.fs_18_pc { font-size: 18px; }
		.fs_20_pc { font-size: 20px; }
		.fs_24_pc { font-size: 24px; }
		.fs_30_pc { font-size: 30px; }
		.fs_40_pc { font-size: 40px; }
		.fs_50_pc { font-size: 50px; }
		.fs_80_pc { font-size: 80px; }
		.fs_150_pc {font-size: 150%; }
		.fs_200_pc { font-size: 200%; }
		.fs_250_pc { font-size: 250%; }
		.fs_120_pc { font-size: 120%; }

		.ta_center_pc { text-align: center; }
		.ta_left_pc { text-align: left; }
		.ta_right_pc { text-align: right; }

		.only_sp { display: none; }
		.only_tb { display: block; }
		.only_pc { display: block; }
		}

/*-----------------------------
responsive_grid
-----------------------------*/

/*スマホ向けレイアウトの指定*/
.inner01 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.inner02 {
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.inner03 {
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.flex_box_sp {
	display: flex;
}

	/*タブレットレイアウトの指定*/
	@media only screen and (min-width:768px){
	.flex_box_tb {
		display: flex;
	}

		
		/*事例紹介個別ページ写真*/
	.flex_box_02_tb {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}

		/*事例紹介個別ページ写真二枚の場合左寄せ*/
	.flex_box_02_tb:after {
		content:"";
    	display:block;
    	width: 31%;
    	height:0;
	}
		
	.col_01_tb {
		width: 64%;
	}

	.col_02_tb {
		width: 32%;
	}

	.col_03_tb {
		width: 49.9%;
	}

	.col_04_tb {
		width: 24%;
	}
	}

		/*PC向けおよび大型PCレイアウトの指定*/
		@media only screen and (min-width:1080px){
		.inner01 {
			width: 1080px;
		}

		.inner02 {
			width: 1080px;
		}

		.inner03 {
			width: 940px;
		}

		.flex_box_pc {
			display: flex;
		}

		.col_01_pc {
			width: 64%;
		}

		.col_02_pc {
			width: 32%;
		}

		.col_03_pc {
			width: 49.9%;
		}	

		.col_04_pc {
			width: 24%;
		}
		}

/*-----------------------------
header
-----------------------------*/
header {
	padding: 20px 0 20px 0;
	background: url(../images/bg_header.jpg) repeat-x bottom;
	position: relative;
}

.header_contact_wrap {
	position: fixed;
	bottom:0;
	width: 100%; /**fixedにした時に左右中央にするため**/
	text-align: center; /**fixedにした時に左右中央にするため**/
	z-index: 999;
}
	
.header_contact{
	display: inline-block; /**fixedにした時に左右中央にするため**/
}

.header_contact p{
	float: left;
	padding: 0 5px;
	width: 45%;
}

h1 {
	padding-left: 5px;
	width: 80%;
	/*margin-top: -20px;*/
	font-size: 100%;
}

h1 a:hover {
	opacity: 1;
}
	
nav{
	display: none;
	position: absolute;
	top: 50px;
	width: 100%;
	background: #4472C4;
	left: 0;
	z-index: 100;
}

header nav ul{
	display: block;
	margin: 0 auto;
}

header nav ul li{
	margin: 0 auto;
	text-align: center;
	border-bottom: 1px solid #fff;
	list-style: none;
	letter-spacing: 2px;
}
	
header nav ul li:last-child{
	border: none;
}

header nav ul li a{
	display: block; 
	text-decoration: none;
	color: #fff;
	padding: 5px 0;
}

header nav ul li a:hover {
	color: #63BEBD;
}

.active {
	color: #C0C0C0;
	font-weight: bold;
}

 
/*開閉ボタン*/
#nav_toggle{
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 10px;
	left: 90%;
	z-index: 100;
}

#nav_toggle div {
	position: relative;
}

#nav_toggle span{
	display: block;
	height: 3px;
	background: #4472C4;
	position:absolute;
	width: 100%;
	left: 0;
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;	
}

#nav_toggle span:nth-child(1){
	top:0px;
}

#nav_toggle span:nth-child(2){
	top:12px;
}

#nav_toggle span:nth-child(3){
	top:24px;
}
	
/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
	top: 12px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}

.open #nav_toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}

.open #nav_toggle span:nth-child(3) {
	top: 12px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

		@media screen and (min-width:1080px){
		/*PCのスタイル*/
		header {
			height: 80px;
		}
		
		.header_contact_wrap{
			width: auto;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 0;
			text-align: right;
		}

		.header_contact p{
			width: auto;
			margin-left: 10px;
		}
		
		h1 {
			float: left;
			margin-top: 15px;
			width: 50%;
		}
	
		nav {
			width: auto;
			display: block;
			top: 50px;
			left: 540px;
			text-align: right;
			background: none;
		}

		header nav ul li {
			float: left;
			border-bottom: none;
			padding: 0 0 0 80px;
		}

		header nav ul li a{
			display: block;
			width: 100%;
			color: #000;
			font-size: 16px;
		}
		
		header nav ul li a:hover {
			color: #4472C4;
		}

		.active {
			color: #4472C4;
			font-weight: bold;
		}
		
		#nav_toggle{
			display: none;
		}
		}

/*-----------------------------
footer
-----------------------------*/
footer {
	border-top: solid 1px #D5D5D5;
	padding: 40px 0 20px 0;
	background: url(../images/bg_footer.jpg) repeat-x bottom;
}

/*-----------
totopボタン
-------------*/

#totop {
	position: fixed;
	bottom: 100px;
	right: 0px;
	height: auto;
	opacity: 0.7;
	z-index: 999;
}


/*-----------------------------
mainimg
-----------------------------*/
.mainimg {
	padding: 30px 0 30px 0;
}

/*-----------------------------
top_contents
-----------------------------*/
.contents_top {
	padding: 60px 0;
	background-color: #ececec;
}

.box_linktop01 {
	padding: 60px 0;
}

#linktop_a {
	background: url(../images/bg_top_maintenance.png) no-repeat center center;
}

#linktop_b {
	background: url(../images/bg_top_company.png) no-repeat center center;
}

.btn_link_01 {
	background-color: #4472C4;
	padding: 7px 20px 5px 20px;
	color: #fff;
	letter-spacing: 2px;
}

	/*タブレットレイアウトの指定*/
	@media only screen and (min-width:768px){
    /*flexboxの子要素を上下センターにし、さらに高さを揃えるため*/
	.box_linktop01 {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0;
	}
	}

/*-----------------------------
他ページcommon
-----------------------------*/
.contents {
	min-height: 300px;
}

.ttl_level2 {
	padding: 30px 0 25px 5px;
	border-bottom: solid 1px #4472C4;
	color: #4472C4;
	font-size: 26px;
	font-weight: bold;
	letter-spacing: 5px;
	margin-bottom: 40px;
	text-align: center;
}

.ttl_level3 {
	padding-top: 3px;
	padding-left: 10px;
	background-color: #4472C4;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	line-height: 1.5;
}

.ttl_level4 {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 20px;
	color: #00758E;
	line-height: 1.5;
}

		/*PC向けおよび大型PCレイアウトの指定*/
		@media screen and (min-width:1080px){
			.ttl_level2 {
				text-align: left;
			}
			}

/*-----------------------------
事業内容
-----------------------------*/

.txt_style01 {
	font-size: 24px;
	font-weight: bold;
	color: #4472C4;
}

/*-----------------------------
会社概要
-----------------------------*/

.table_company01 {
	width: 100%;
	border-collapse:collapse;
    border-spacing:0;
	font-size: 16px;
}

.table_company01 tr th {
	background-color: #EAEAEA;
	color: #4472C4;
}

.table_company01 tr th, .table_company01 tr td {
	display: block;
	padding: 10px;
	vertical-align: top;
	text-align: left;
}

.table_company01 tr td {
	text-align: left;
}


	/*タブレットレイアウトの指定*/
	@media only screen and (min-width:769px){
	
	.table_company01 tr th, .table_company01 tr td{
		display: table-cell;
		padding: 10px;
	}

	.table_company01 tr th {
		border: solid 1px #4472C4;
		width: 200px;
	}

	.table_company01 tr td {
		width: auto;
		border: solid 1px #4472C4;
	}
	}

/*-----------------------------
お問い合わせ
-----------------------------*/

input[type="text"], textarea {
    width: 100%;
	height: 24px;
	font-size: 16px;
	overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

textarea {
	height: auto;
}


.form_wrap {
	padding-bottom: 20px;
	border-bottom: solid 1px #999;
	margin-bottom: 20px;
}

/*iOS safariの送信ボタンのデフォルトスタイルリセット**/
input[type="submit"]{
	-webkit-appearance: none;
	}

.form_submit {
	text-align: center;
}

.form_submit input {		
	background-color: #4472C4;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	color: #fff;
}

		/*PC向けおよび大型PCの指定*/
		@media only screen and (min-width:1080px) {
		.form_wrap p {
			float: left;
			width: 200px;
		}
		
		.form_item {
			float: right;
			width: 600px;
		}
		}