@charset "utf-8";

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

	グローバル

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

body { min-width: 0px;}

.container { width: 100%;}

.ta_right-s_center { text-align: center;}
.ta_left-s_center { text-align: center;}

/* ボックス */
.box50, .box30 { float: none; width: 100% !important;}

.float_l, .float_r { float: none;}

.hidden_s { display: none !important;}

/* margin */
.mb40-20 { margin-bottom: 20px !important;}
.mb60-30 { margin-bottom: 30px !important;}
.mb80-40 { margin-bottom: 40px !important;}
.mb100-50 { margin-bottom: 50px !important;}
.mb120-60 { margin-bottom: 60px !important;}


/* ------------------------
	ヘッダー
------------------------ */

.header .left, .header .right { float: none;}
.header .left { padding: 20px 15% 0px;}

@media only screen and (max-width: 500px) {
	.header h1 { padding-left: 60px;}
}


/* ------------------------
	グローバルナビ
------------------------ */

/* ハンバーガーメニュー */
.humberger {
	background: #c7151e;
	border-radius: 4px;
	cursor: pointer;
	display: block;
	position: fixed;
	top: 10px;
	left: 10px;
	width: 50px;
	height: 50px;
	z-index: 10000;
}
.humberger span {
	background: #fff;
	border-radius: 15px;
	position: absolute;
	left: 10px;
	width: 30px;
	height: 3px;
	transition: 0.4s;
}
.humberger span:nth-of-type(1) { top: 9px;}
.humberger span:nth-of-type(2) { top: 17px;}
.humberger span:nth-of-type(3) { top: 25px;}
.humberger:after {
	color: #fff;
	content: 'MENU';
	display: block;
	font-size: 10px;
	text-decoration: none;
	text-align: center;
	transition: 0.4s;
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 100%;
}
.is-open .humberger:after { content: 'CLOSE';}
.is-open .humberger span:nth-of-type(1) {
  -webkit-transform: translateY(6px) rotate(-45deg);
	  -ms-transform: translateY(6px) rotate(-45deg);
		  transform: translateY(6px) rotate(-45deg);
}
.is-open .humberger span:nth-of-type(2) { opacity: 0;}
.is-open .humberger span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
	  -ms-transform: translateY(-10px) rotate(45deg);
		  transform: translateY(-10px) rotate(45deg);
}
/* ナビ本体 */
.sp-navi { -webkit-text-size-adjust: 100%;}
.sp-navi.is-open .sp-navi-inner {
	opacity: 1;
	visibility: visible;
	z-index: 9999;
}
.sp-navi .sp-navi-inner {
	background: #f7f7f7;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0px;
	height: 100%;
	width: 100%;
	transition: .5s;
	padding: 80px 0px 80px;
}
.sp_logo { padding: 0px 15%;}
.sp-navi li a {
	display: block;
	padding: 10px;
	border-top: dotted 1px #ccc;
	font-weight: bold;
}
.sp-navi li:last-child a { border-bottom: dotted 1px #ccc;}

@media only screen and (max-width: 500px) {
	.side_logo { padding-left: 50px;}
}


/* ------------------------
	フッター
------------------------ */

.footer { background-position: 80% 50%;}

@media only screen and (max-width: 480px) {
	.footer_nav { display: block; margin: 0px !important;}
}


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

	トップページ

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

.top_sec01 { padding-top: 50px;}
.top_sec01 li { width: 50%;}
.top_sec01 a { max-width: 400px; margin: auto;}
.top_sec01 li:nth-child(odd) a { float: right;}
.top_sec01 li:nth-child(even) a { float: left;}
.top_sec01 .box_inner { padding: 15px;}

.top_sec02 { background-size: contain; padding-bottom: 60px;}

.top_sec03 .box { width: 100%;}

@media only screen and (max-width: 640px) {
	.top_sec01 li { float: none; width: 100%;}
	.top_sec01 a { float: none !important;}
}

@media only screen and (max-width: 500px) {
	.top_sec02 h2 .fo21 { font-size: 7vw !important;}
	
	.top_sec03 dl { display: block; margin-bottom: 10px;}
	.top_sec03 dt, .top_sec03 dd { display: inline-block; width: auto; margin: 0px 5px 5px 0px;}
	.top_sec03 dd:last-child { display: block; margin: 0px;}
}


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

	下層ページ

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

.company_sec04 .left, .company_sec04 .right { float: none !important;}

/* ------------------------
	共通
------------------------ */

.pagettl { padding: 40px 15px 30px;}
.pagettl h2 { font-size: 1.8em; margin-bottom: 10px;}


/* 下層共通 */
.contact_sec01 .list01 li { margin: 0px 3% 40px;}
.contact_sec01 .list01 li:not(:last-child) { width: 43%;}
.contact_sec01 .list01 li:last-child { width: 55%;}

.contact_sec01 .table_bordered, .contact_sec01 .table_bordered tbody, .contact_sec01 .table_bordered tr, .contact_sec01 .table_bordered th, .contact_sec01 .table_bordered td { display: block; width: 100%;}
.contact_sec01 .table_bordered th, .contact_sec01 .table_bordered td { padding: 10px;}

.common.top_sec01 { background-size: cover; padding-bottom: 50px; padding-top: 0px;}


@media only screen and (max-width: 640px) {
	.table_bordered, .table_bordered tbody, .table_bordered tr, .table_bordered th, .table_bordered td { display: block; width: 100%;}
	.table_bordered th, .table_bordered td { padding: 10px;}
	
	.contact_sec01 .fo14 { font-size: 1.2em !important;}
}


/* ------------------------
	投稿
------------------------ */

/* アーカイブ */
@media only screen and (max-width: 640px) {
	.topics_archive dl, .topics_archive dd { display: block; width: 100%;}
	.topics_archive dt, .topics_archive .date { display: inline-block; vertical-align: middle; width: auto; margin: 0px 5px 5px 0px;}
}

/* 施工実績 */
.work_archive li { width: 50%;}
.work_archive li:nth-child(3n+1) { clear: none;}
.work_archive li:nth-child(2n+1) { clear: both;}

@media only screen and (max-width: 550px) {
	.work_archive li { float: none; width: 100%;}
}

/* テーブル */
@media only screen and (max-width: 500px) {
	.blog_content table th, .blog_content table td {
		padding: 5px;
		font-size: 0.85em;
	}
}

/*WP用 投稿表示*/
img.aligncenter, img.alignright, img.alignleft {
	display: block;
	margin: 0px auto 20px;
}
.alignright, .alignleft { float: none;}

/* ページャー(シングル) */
@media only screen and (max-width: 640px) {
	.pager li { margin-bottom: 5px;}
	.pager li a { padding: 5px 10px; font-size: 0.8em;}
	.pager .previous, .pager .next { position: static;}
}