/***************************
デザイン・プラグイン系
***************************/

/****************
背景色
****************/
.bg_1 {
	background: #f8faff;
}
.bg_2 {
	background:#f3f5f9;
}
.bg_3 {
	background:#ffffff;
}
/******************
a
******************/
.a_1 {
	font-size:1.2rem;
	margin:0 0 0 1rem;
	padding:0.2rem 0.5rem 0 0.5rem;
	background:#ffffff;
}
	/*****************
	text装飾
	*****************/
	.text_clamp1 li a:after{
		display:inline-block;
		padding:0.2rem 0.3rem 0 0.3rem;
		content: "...　詳細　";
		font-size:1.2rem;
	}
	
/****************
インフォーメーションBOX（index.htmlの目次など）
*****************/
.inBox1{
	margin:1.5rem 0.5rem;
	padding:1.5rem 0.5rem;
	border:1px solid #eefcff;
	/*角丸*/
	-moz-border-radius: 5px;    /* 古いFirefox */
	-webkit-border-radius: 5px; /* 古いSafari,Chrome */
	border-radius: 5px;         /* CSS3 */
	background-color:#FFFFFF;
	}
	.inBox1_Midashi{
		text-align:center;
		font-weight:bold;
		font-size:1.3rem;
	}

/****************
（緊急案内など）
*****************/
.inBox2{
	margin:1.5rem 1rem;
	padding:1.5rem 1.5rem;
	border:1px solid #eefcff;
	/*角丸*/
	-moz-border-radius: 5px;    /* 古いFirefox */
	-webkit-border-radius: 5px; /* 古いSafari,Chrome */
	border-radius: 5px;         /* CSS3 */
	background-color:#FFFFFF;
	}
	.inBox2 .inBox1_Midashi{
		color:#E84B00;
		padding:2.0rem 0;
		text-align:center;
		font-weight:bold;
		font-size:1.4rem;
	}
	.inBox2 p{
		line-height:1.7rem;
	}


/****************
アコーディオン
*****************/
/*******:accordion    */

div.accordion {
	width: 100%;
}
div.accordion > ul > li > a > h2{
	font-weight:normal;
}
div.accordion > ul > li > a {
	display: block;
	color: #fff;
	text-decoration: none;
	background-color: #0051af;
	border-bottom: 1px solid #fff;
	cursor: pointer;
	font-size:1.0rem;
	padding: 1rem 1.2rem;
	position: relative;
}
div.accordion > ul > li > a:hover{
	background-color: #3a6eab;
}
div.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{
	position: absolute;
	right: 12px;
	top: 16px;
	color: #2f7f99;
}
div.accordion > ul > li > a:after{
	content: "▼";
}
div.accordion > ul > li > a.active:after{
	content: "▲";
}
div.accordion > ul > li > ul {
	display: none;
}
div.accordion > ul > li > ul > li > a{
	display: block;
	color: #000000;
	background-color: #79c9b8;
	border-bottom: 1px solid #fff;
	padding: 1.5rem 1.2rem;
	position: relative;
}
div.accordion > ul > li > ul > li > a:hover{
	background-color: #67ab9c;
}

/*******:accordion2   */
div.accordion2 {
	width: 100%;
}
div.accordion2 > ul > li > a {
	display: block;
	color: #fff;
	font-size:1.6rem;
	text-decoration: none;
	background-color: #418201;
	border-bottom: 1px solid #fff;
	cursor: pointer;
	padding: 1rem 1.2rem;
	position: relative;
}
div.accordion2 > ul > li > a:hover{
	background-color: #8aa300;
}
div.accordion2 > ul > li > a:after, div.accordion2 > ul > li > a.active:after{
	position: absolute;
	right: 12px;
	top: 16px;
	color: #2f7f99;

}
div.accordion2 > ul > li > a:after{
	font-size:1.0rem;
	content: "▼";
	color:#FFFFFF;
}
div.accordion2 > ul > li > a.active:after{
	content: "▲";
}
div.accordion2 > ul > li > ul, div.accordion2 > ul > li > ul > li > ul {
	display: none;
}
div.accordion2 > ul > li > ul > li > a{
	display: block;
	color: #fff;
	background-color: #457099;
	border-bottom: 1px solid #fff;
	padding: 0.6rem 1.2rem;
	position: relative;
}
div.accordion2 > ul > li > ul > li > a:hover{
	background-color: #67ab9c;
}

	div.accordion2 > ul > li > ul > li > ul {
		padding: 0.6rem 1.2rem;
	}
		div.accordion2 > ul > li > ul > li > ul > li{
			line-height:1.4;
		}
.acd_toggle {
}


/************************
/*メニューボタン
************************/
  #menu{
	display: none;
	padding:0px;
	margin:0px auto;
  }
  #menu li{
	width: 100%;
	padding:0px;
	margin:0px;
	/*はみ出し文字を隠す　＋　...表示*/
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
  }
	#menu li a{
		font-size:14px;
		display: block;
		padding: 14px 0 13px 0px;
		background: #001022;
		color: #fff;
		text-align: center;
		text-decoration: none;
		border-bottom:1px solid #0d294a;
	}
	#menu li a:hover{
		background: #00346e;
	}

#menu_botan{
	display: block;
	position: relative;
	width: 100%;
	background: #0d294a;
	}
  #menu_botan a{
	font-size:15px;
	display: block;
	padding: 12px 0 10px;
	background: #002651;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
  }
  #menu_botan:before{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #fff;
  }
  #menu_botan a:before, #menu_botan a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 20px;
	height: 4px;
	background: #002651;
  }
  #menu_botan a:before{
	margin-top: -6px;
  }
  #menu_botan a:after{
	margin-top: 2px;
  }
    
/************************
リスト　よくある質問など
************************/
.list_1 li {
	list-style-type: none;
	position: relative;
	padding:1.1rem 1.1rem 0rem 2.3rem;
	font-size:1.3rem;/*.ul_Part1によるliの隙間対策の為　再指定*/
}
.list_1 li:after {
	display: block;
	content: '';
	position: absolute;
	top: 1rem;
	left: .2rem;
	width: 10px;
	height:10px;
	background-color: #ffffff;
	border: 2px solid #0066FF;
	border-radius: 100%;
}
	/*左よせのリスト ※実績一覧など*/
	.list_leftarrow {margin-right:0.5rem; width:80px; margin-left:auto;}

/************************
リスト　アイコン（font-awesonme）
************************/
.fo_awesonme_List li:before
{
	padding:0 0.5rem 0rem 0;
}
.fo_awesonme_List li
{
	margin: 0 0 1.2rem 0;
}
.fo_awesonme 
{
	margin:2.0rem 0 0 0;
}
.fo_awesonme span:before
{
	font-family: 'FontAwesome' ;
	padding:0 0.5rem 0rem 0;
}
	/*ユニコードを指定*/
.f27a span:before
{
	content: '\f27a' ;
	color: #FF3300;
}
.f007 span:before
{
	content: '\f007' ;
	color: #66CC00;
}

.f0c6 span:before
{
	content: '\f0c6' ;
	color: #525252;
}
	/*ユニコードサイズ*/
.uni_1_8 span:before
{
	font-size:1.8rem;
}
.uni_big span:before
{
	font-size:2.8rem;
}

/************************
リスト 実績紹介アイコン
************************/
.result {padding:0 1rem 0 1rem;}
.result li{
	margin-bottom:0.3rem;/*floatBox0 での継承を解除*/
	margin-left:5rem;
}
	.result li span{
		padding-left:0.5rem;
	}
		.result li.genba:before,.sekou:before,.hiyou:before,.come:before,.souba:before,.my:before,.mycome:before {
			display:inline-block;
			margin-left:-5rem;
			padding:0.2rem 0.3rem 0rem 0.3rem;
			background-color:#85adff;
			border-radius:3px;
			color:#111111;
			font-size:1.2rem;
				}
		.result li.sekou:before {content:'施工名';}
		.result li.genba:before {content:'現場先';}
		.result li.hiyou:before {content:'見積費用';background-color:#ff0042;color:#ffffff;}
		.result li.come:before {content:'コメント';}
		.result li.souba:before {content:'他社相場';}
		.result li.my:before {content:'職人倶楽部';background-color:#ff0042;color:#ffffff;}
		.result li.mycome:before {content:'コメント';background-color:#ff0042;color:#ffffff;}


/************************
リスト サイトマップ/業務内容
************************/
.map {
margin:2.5rem .5rem 2.5rem .5rem;
}
	.map li {
		padding:.1rem 0rem 1.8rem 2.3rem;
		background:url(../img/img15.png) left top no-repeat;
	}
	.map-stack1 {/*下層リンク*/
		margin:1.5rem 0 1.5rem 0rem;
	}
		.map-stack1 li{
			margin-left:1rem;
			padding:0 0 1.6rem 2rem;
			background:url(../img/img16.png) left top no-repeat;
		}


/**************
吹き出し
***************/
.balloonBox{
text-align: center;
margin-top:-10px;
}
.balloon-2-top {
	position:relative;
	display: inline-block;
	width: 75%;
	height: 50px;
	/*↓縦中央　改行には非対応*/
	line-height:50px;
	color: #ffffff;
	background: #0d294a;
	z-index: 0;
	border-radius:1.0rem 1.0rem  0 0 ;

}
.balloon-2-top:after {
	content: "";
	position: absolute;
	top: -8px; left: 50%;
	margin-left: -8px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #0d294a transparent;
}

.balloon-1-bootm {
	position:relative;
	display: inline-block;
	width: 100%;
	height: 40px;
	line-height:40px;
	color: #ffffff;
	background: #0024a6;
	z-index: 0;

}

.balloon-1-bootm:after {
	content: "";
	position: absolute;
	bottom: -8px; left: 50%;
	margin-left: -30px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 8px 30px 0px 30px;
	border-color: #0024a6 transparent transparent transparent;
}

/*****************
表3 未使用
******************/
table.table3{
border-collapse: collapse;
width: 100%;
font-size:1.2rem;
}
table.table3 th,
table.table3 td {
  padding: 10px;
  border: 1px solid #999;
}
table.table3 th {
  background-color: #eee;
  text-align: center;
  width: 30%;
}
		/* スマホのみ　※当CSSはモバイルファーストで記述しているため　下記は強制的にここでスマホのみ対応*/
		@media screen and (max-width: 751px) {
		  table.table3 {
			border-top: 1px solid #999;
		  }
		  table.table3 td {
			display: block;
			text-align: center;
		  }
		  table.table3 th {
			display: block;
			border-top: none;
			border-bottom: none;
			width: 100%;
		  }
		/* スマホ */ }
		
		
/*****************
実績ページ
******************/
.linkMark1 {/*←　リンク戻るマーク*/
	position:relative;
	height:30px;
	}
	.linkMark1 a{
		position:absolute;
		right:0;
		display:block;
		padding-top:2px;
		height:25px;
		width:130px;
		background:url(../img/img047.gif) right top no-repeat;
		}
.arrow01 {/*一覧　矢印*/
	position:relative;
	height:30px;
	}
	.arrow01 a{
		position:absolute;
		right:0;
		background:url(../img/img048.gif) right top no-repeat;
		padding-top:6px;
		height:25px;
		width:130px;
		display:block;
		}
.arrow01_left {
	position:relative;
	height:30px;
	}
	.arrow01_left a{
		position:absolute;
		left:0;
		background:url(../img/img049.gif) left top no-repeat;
		padding-top:6px;
		padding-left:50px;
		width:130px;
		height:25px;
		display:block;
		}
/*****************
メールフォーム
******************/
.mail_thanks{
margin-top:50px;
padding:0 0.5rem ;
}
	.mail_thanks h1{
		margin-bottom:2.0rem
		}
		
/*****************
テキストフィールド装飾
******************/
.textFiled1{
	margin:1rem 0;
}
.textFiled1 b{
    line-height:2.0;//*行の高さ*/
	color:#000000;
}
.textFiled1 em{
	color: #ff3c00;
	background-color:#FFFFFF;
}


@media screen and (min-width: 751px) {
.color_222 { color:#222;}

/********************
accordion2   
********************/

.acd_toggle {
	font-weight:bold;
}

/******************
a
******************/
.a_1 {
	font-size:1.4rem;
	background-color:transparent;
	color:#0033CC;
}

/****************
（緊急案内など）
*****************/
.inBox2{
	margin:2rem 1.5rem;
	padding:2.5rem 2.8rem;
	}
	.inBox2 .inBox1_Midashi{
		color:#E84B00;
		padding:2.0rem 0;
		text-align:center;
		font-weight:bold;
		font-size:2.0rem;
	}
	.inBox2 p{
		line-height:1.9rem;
	}

/****************
アコーディオン
*****************/
/*******:accordion    */
/*accordion2 調整*/
/*2020.5<3plan.htmlのよくある質問でPC版の開閉を第二文脈以降を初めから閉じておく*/
div.accordion2PC > ul > li > ul > li > ul {
	display: none;
}

/****************
ボタンデザイン
****************/
.bottn1 {/*その他の実績*/
    width:12%;
	margin:0 0 1.5rem auto;
    font-size:1.3rem;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:1.2rem 0 1rem;
    border-radius:3px;
	background-color:#0d294a;
}
.bottn1 a{
    color:#fff;
}

/************************
メニューボタン
************************/
#menu{
  display: block;
  width: 100%;
  max-width: 100%;
}
#menu li{
	float: left;
	width: 25%;/*ボタン数4つ並び*/
	/*ボックスサイジング*/
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;	

	border-left:1px solid #2a517e;
	}
	#menu li:first-child{
		border-left: none;
		}
	#menu li a{
		font-size:13px;
		background: #0d294a;	
		text-shadow:0 -1px 0px #333,0 1px 0px #555;
		padding: 12px 0 10px 0px;
		/*背景グラデ
		background-image: -moz-linear-gradient(top, #888 0%, #777 50%, #666 50%, #777 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888), color-stop(0.50, #777), color-stop(0.50, #666), color-stop(1, #777));		
		*/
	}
	#menu li a:hover {
		background: #001022;	
		/*
		background-image: -moz-linear-gradient(top, #555 0%, #444 50%, #444 50%, #444 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444));
		*/
	}
	/*角丸*/
	#menu li:first-child a{
		border-radius:0px 0 0 5px;
	}
	#menu li:last-child a{
		border-radius:0 0px 5px 0;
	}  	
	
	
#menu_botan{ 
 display: none;
}


/************************
リスト　よくある質問など  
************************/
.list_1 > li {
	padding:1.1rem 0 0rem 2.3rem;
	font-size:1.4rem;/*.ul_Part1によるliの隙間対策の為　再指定*/
}
	/*左よせのリスト*/
	.list_leftarrow {margin-right:0;}

.list_2 > li {
	padding:1.1rem 0 0.5rem 1.1rem;
	font-size:1.4rem;/*.ul_Part1によるliの隙間対策の為　再指定*/
	position: relative;
	border-bottom:1px #CCCCCC dashed;
}
.list_2 > li a{
	color:#222;
}
.list_2 > li:after {
	display: block;
	content: '';
	position: absolute;
	top: 1.1em;
	left: -0.5em;
	width: 8px;
	height: 3px;
	border-left: 3px solid #0078ff;
	border-bottom: 3px solid #0078ff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/************************
リスト　住宅リフォーム実績  更新履歴  
************************/
.ul_top {
	padding:0 2.1rem;
	height:14rem;
	overflow:auto;
	}
.ul_top li{
	margin-bottom:0.1rem;
	}
	.kan {
		background:url(../img/img025.gif) left top no-repeat;
		padding-left:73px;
		}
	.mitu {
		background:url(../img/img024.gif) left top no-repeat;
		padding-left:73px;
		}
	.seko {
		background:url(../img/img023.gif) left top no-repeat;
		padding-left:73px;
		}
.ul_top_sub {/*更新履歴で使用*/
	padding:0rem 2.1rem;
	height:14em;
	overflow:auto;
	}
.ul_top_sub li{
	margin-bottom:0.5rem;
	}
.ul_top_sub li span{
	color: #FF3300;
	padding-right:1.0rem;
	}


/************************
リスト 実績紹介アイコン
************************/
.result {padding:0rem;}

/****************
インフォーメーションBOX（index.htmlの目次など）
*****************/
.inBox1{
	margin:2.5rem 1.8rem;
	padding:1.8rem 2.5rem;
	border:2px solid #eefcff;
	/*角丸*/
	-moz-border-radius: 5px;    /* 古いFirefox */
	-webkit-border-radius: 5px; /* 古いSafari,Chrome */
	border-radius: 5px;         /* CSS3 */
	}

	.inBox1_Midashi{
		font-size:1.6rem;
	}

/************************
リスト　アイコン（font-awesonme）
************************/
.fo_awesonme_List li:before
{
	padding:0 0.9rem 0rem 0;
}
.fo_awesonme_List li
{
	margin: 0 0 2rem 0;
}
.fo_awesonme_List li .bigfont1
{
	font-size:2.0rem;
}
.fo_awesonme 
{
	margin:4.5rem 0 0 0;
}
.fo_awesonme span:before
{
	padding:0 0.9rem 0rem 0;
}

	/*ユニコードサイズ*/
.uni_1_8 span:before
{
	font-size:2.3rem;
}
.uni_big span:before
{
	font-size:3.2rem;
}

/*****************
テキストフィールド装飾
******************/
.textFiled1{
	margin:2.5rem 0;
}
.textFiled1 b{
    line-height:2.3;//*行の高さ*/
}

}

@media screen and (min-width: 1025px) {

.list_2 > li > ul > li {
	padding:1.5rem 1rem 1rem 1.5rem;
	font-size:1.6rem;/*.ul_Part1によるliの隙間対策の為　再指定*/
	position: relative;
	border-bottom:none;
}


/************************
/*メニューボタン
************************/
#menu li{
	/*width: 12.5%;*/
}
#menu li a{
	font-size:15px;
}
/**************
吹き出し
***************/
.balloonBox2{
	margin-top:-15px;
}
.balloon-2-top {
	font-size:2.6rem;
	height: 80px;
	line-height:80px;
}
.balloon-2-top:after {
	top: -10px; left: 50%;
	margin-left: -10px;
	border-width: 0 10px 10px 10px;
}

/****************
インフォーメーションBOX（index.htmlの目次など）
*****************/
.inBox1{
	margin:2.5rem 2.5rem;
	padding:1.8rem 3rem;
	/*角丸*/
	-moz-border-radius: 5px;    /* 古いFirefox */
	-webkit-border-radius: 5px; /* 古いSafari,Chrome */
	border-radius: 5px;         /* CSS3 */
	}

	.inBox1_Midashi{
		font-size:2.8rem;
	}

/************************
リスト　アイコン（font-awesonme）
************************/
.fo_awesonme_List li:before
{
	padding:0 1rem 0rem 0;
}
.fo_awesonme_List li
{
	margin: 0 0 2.5rem 0;
}
.fo_awesonme_List li .bigfont1
{
	font-size:2.2rem;
}
.fo_awesonme 
{
	margin:8.5rem 0 0 0;
}

	/*ユニコードサイズ*/
.uni_1_8 span:before
{
	font-size:2.8rem;
}
.uni_big span:before
{
	font-size:4rem;
}


/*****************
テキストフィールド装飾
******************/
.textFiled1{
	margin:2.8rem 0;
}
.textFiled1 b{
    line-height:2.5;//*行の高さ*/
}

}