@charset "UTF-8";

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

content

********************/
#content #products img,
#content #work img {
	display: block;
}





/************************************************************
for smartphone
************************************************************/
@media screen and (max-width:736px){

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

header

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



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

content

********************/
.catchcopy {
	padding: 40px 5%;
}

.catchcopy2 {
	padding: 0px 5%;
}

.catchcopy2 h3 {
	font-size: 1.1rem;
	padding-bottom: 10px;
}

.catchcopy2 span {
	color: #009944;
	font-weight: bold;
}

#content .company {
	margin-top: 60px;
}

#content #wrap01 a {
	position: relative;
	display: block;
}

#content #wrap01 a::before {
	content: '内容を確認する';
	width: 100%;
	padding: 10px 0 12px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	color: #FFFFFF;
	font-weight: 600;
	transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	z-index: 100;
}

#content #work div.contentArea div {
	overflow: hidden;
	margin-bottom: 20px;
	background-color: #EEEEEE;
}

#content #work div.contentArea div img {
	float: left;
	width: 40% !important;
}

#content #work div.contentArea div p {
	float: left;
	width: 60%;
	padding: 0px 20px;
	line-height: 1.4rem;
}

#content #work div.contentArea div p:first-of-type {
	padding-top: 4%;
}

#content #work p a.curtain {
	color: #FFFFFF;
	background-color: #0a3369;
	border: solid 1px #0a3369;
}

#content #work p a.curtain:hover {
	color: #0a3369 !important;
}

#content #work p a.curtain:hover::after {
	background-color: #FFFFFF;
}

#content #map .honsha,
#content #map .ryousha {
}

#content #map .honsha iframe,
#content #map .ryousha iframe {
	width: 100%;
}

#content #map .ryousha p {
	padding-top: 40px;
}

#content #map .honsha dl,
#content #map .ryousha dl {
	display: table;
	width: 100%;
	border-bottom: solid 1px #FFFFFF;
}

#content #map .honsha dt,
#content #map .ryousha dt,
#content #map .honsha dd,
#content #map .ryousha dd {
	display: table-cell;
	vertical-align: middle;
	padding: 10px;
}

#content #map .honsha dt,
#content #map .ryousha dt {
	width: 30%;
	text-align: center;
	background-color: #0a3369;
	color: #FFFFFF;
}

#content #map .honsha dd,
#content #map .ryousha dd {
	width: 70%;
}



}









/************************************************************
for pc  width 737px 以上はpc表示
************************************************************/
@media print, screen and (min-width:737px){

.main {
	width: 100%;
	height: auto;
}
/********************

header

********************/
#header section {
	display: block;
	position: relative;
}

/**
hNav
*****/
#header #hnav {
	width: 100%;
	background-color: #FFF;
	box-shadow: 0px -15px 10px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #BBB; 
}

#header #hnav ul {
	width: 100%;
	display: table;
}

#header #hnav ul li {
	float: left;
	width: 25%;
}

#header #hnav ul li a {
	display: table-cell;
	width: inherit;
	text-align: center;
	vertical-align: middle;
	padding: 0px 15px;
	line-height: 6rem;
	background-color: transparent;
	transition: all 0.3s ease-out;
	border: none;
}

#header #global_menu {display: none !important;}


@media screen and (max-width:1400px){
}





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

content

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

#content {
	padding-top: 50px;
}

/**
キャッチコピー **/
.catchcopy {
	display: block;
	margin: 0 auto;
	padding: 150px 0px;
	width: auto;
	max-width: 800px;
}

.catchcopy2 {
	margin: 0 auto;
	width: 1000px;
	padding-bottom: 50px;
}

.catchcopy2 h3 {
	font-size: 1.3rem;
	padding-bottom: 10px;
}

.catchcopy2 span {
	color: #009944;
	font-weight: bold;
}

/**
事業内容・会社概要 **/
#content #wrap01 .contentArea {
	margin: 0 auto;
}

#content #wrap01 .construction {
	float: left;
}

#content #wrap01 .company {
	float: right;
}

#content #wrap01 a img {
	opacity: 1;
	transition: .3s ease-in-out;
	-webkit-transition: .3s ease-in-out;
}

#content #wrap01 a:hover img {
	opacity: .75;
}

#content #wrap01 a {
	position: relative;
	display: block;
}

#content #wrap01 a::before {
	content: '内容を確認する';
	width: 100%;
	padding: 10px 0 12px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	color: #FFFFFF;
	font-weight: 600;
	opacity: 0;
	transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	z-index: 100;
}

#content #wrap01 a:hover::before {
	opacity: 1;
}

/**
施工実績 **/
#content #work {
}

#content #work .contentArea div {
	float: left;
	width: 24%;
}

#content #work .contentArea div:nth-of-type(1) {
	padding-right: 10px;
}

#content #work .contentArea div:nth-of-type(2),
#content #work .contentArea div:nth-of-type(3) {
	padding-right: 5px;
	padding-left: 5px;
	margin-right: 5px;
	margin-left: 5px;
}

#content #work .contentArea div:nth-of-type(4) {
	padding-left: 10px;
}

#content #work .contentArea div p {
	text-align: left;
	font-size: 14px;
}

#content #work p.list {
	float: right;
}

#content #work p.list a.curtain {
	display: block;
	padding: 0px 60px;
	margin-top: 20px;
	color: #FFFFFF;
	background-color: #0a3369;
	border: solid 1px #0a3369;
}

#content #work p.list a.curtain:hover {
	color: #0a3369 !important;
}

#content #work p.list a.curtain:hover::after {
	background-color: #FFFFFF;
}

/**
マップ **/
#map div.honsha {
	width: 50%;
	padding-right: 20px;
}

#map div.ryousha {
	width: 50%;
	padding-left: 20px;
}

#map .map {
	width: 100%;
	min-height: 300px;
	border: solid 1px #999999;
}

#map dl {
	display: block;
	overflow: hidden;
}

#map dl dt,
#map dl dd {
	float: left;
}

#map dl dt {
	width: 13%;
}

#map dl dd {
	width: 87%;
}


}