@charset "Shift_JIS";

/* 5つの理由用スタイル */
/*============目次==============
　1. インデックス
　2. 下層共通
　3. 誰でも使える簡単設計
　4. 受注に導く提案力
　5. 多彩なモデリング機能
　6. リフォーム後のイメージ共有
  7. スマホやタブレットで確認＆提案
==============================*/

/*===========================
■1. インデックス
============================*/

#indexHead{
	background:url(img/index_head.jpg) no-repeat left top;
	height:449px;
	position:relative;
}

	#indexHead h1,
	#indexHead #headTxt01,
	#indexHead #headTxt02{
		position:absolute;
	}

	#indexHead h1{
		right:106px;
		top:36px;
	}

	#indexHead #headTxt01{
		right:77px;
		top:177px;
	}

	#indexHead #headTxt02{
		right:26px;
		top:328px;
	}

.indexBox{
	position:relative;
}
.indexBoxImg{
	position:absolute;
}

/* 01 */

#indexSc01{
	background:url(img/no01.gif) no-repeat 339px 161px;
	min-height:352px;
	height:auto !important;
	height:352px;
	padding-left:54px;
	padding-top:58px;
}

	#indexSc01 .indexBoxImg{
		position:absolute;
		right:0;
		top:26px;
	}
	#indexSc01 .indexBoxBtn{
		position:absolute;
		left:218px;
		top:155px;
	}

/* 02 */

#indexSc02{
	background:url(img/no02.gif) no-repeat 712px 205px;
	min-height:234px;
	height:auto !important;
	height:234px;
	margin-top:-33px;
	padding-left:463px;
	padding-top:96px;
}

	#indexSc02 .indexBoxImg{
		position:absolute;
		left:0;
		top:0;
	}
	#indexSc02 .indexBoxBtn{
		position:absolute;
		right:82px;
		top:142px;
	}

/* 03 */

#indexSc03{
	background:url(img/no03.gif) no-repeat 94px 315px;
	margin-top:42px;
	padding-top:300px;
	padding-left:288px;
	zoom:1;
}

	#indexSc03 .indexBoxImg{
		position:absolute;
		left:121px;
		top:0;
	}
	#indexSc03 .indexBoxBtn{
		position:absolute;
		left:667px;
		top:348px;
	}

/* 04 */

#indexSc04{
	background:url(img/no04.gif) no-repeat 752px 0;
	min-height:342px;
	height:auto !important;
	height:342px;
	margin-top:61px;
	padding-top:32px;
	padding-left:494px;
}

	#indexSc04 .indexBoxImg{
		position:absolute;
		left:0;
		top:0;
	}
	#indexSc04 .indexBoxBtn{
		position:absolute;
		right:133px;
		top:127px;
	}

/* 05 */

#indexSc05{
	background:url(img/no05.gif) no-repeat 344px 0;
	min-height:314px;
	height:auto !important;
	height:314px;
	margin-top:61px;
	padding:20px 0 36px 50px;
}

	#indexSc05 .indexBoxImg{
		position:absolute;
		right:48px;
		top:59px;
	}
	#indexSc05 .indexBoxBtn{
		position:absolute;
		left:253px;
		top:113px;
	}

/*===========================
■2. 下層共通
============================*/

#indexSecond{
	height:299px;
	position:relative;
}

	#indexSecond h1,
	#indexSecond #headTxt01,
	#indexSecond #headTxt02{
		position:absolute;
	}

/* メイン下部のボックス */

#reformMain .notesBox{
	background-color:#FFF;
	padding:41px 30px 60px;
	@include css3(box-shadow, 0 1px 3px rgba(11,3,6,.15));
	box-shadow: 0 1px 3px rgba(11,3,6,.15);
	border: solid 1px #f5f5f5;
}

/* フォントスタイル */

#reformMain .txt14{
	color:#613200;
	font-size:87.5%;
}
#reformMain .txt16b{
	color:#613200;
	font-weight:bold;
	font-size:112.5%;
}
#reformMain .lh25{
	line-height:2.5;
}

/*===========================
■3. 誰でも使える簡単設計
============================*/

.headApproach{
	background:url(img/approach_head.jpg) no-repeat left top;
}

	.headApproach h1{
		right:115px;
		top:59px;
	}

	.headApproach #headTxt01{
		right:103px;
		top:194px;
	}

/* プラン作りの3STEP */

#appStepTtl{
	text-align:center;
	margin-bottom:24px;
	margin-top:31px;
}

.appBox{
	margin:0 auto !important;
	position:relative;
	width:906px;
}

	.appBox .appScIn p{
		color:#613200;
		font-size:87.5%;
		line-height:1.7;
		margin-top:15px;
	}

	.appBox .appBoxImg{
		position:absolute;
	}

.appBoxIcon{
	left:0;
	position:absolute;
	top:0;
}

/* step01 */

#appSc01{
	min-height:333px;
	height:auto !important;
	height:333px;
}

	#appSc01 .appScIn{
		padding-left:116px;
		padding-top:12px;
		width:255px;
	}

	#appSc01 .appBoxImg{
		right:0;
		top:0;
	}

/* step02 */

#appSc02{
	min-height:468px;
	height:auto !important;
	height:468px;
}

	#appSc02 .appScIn{
		padding-left:511px;
		padding-top:48px;
		width:384px;
	}

	#appSc02 .appBoxImg{
		left:107px;
		top:34px;
	}

/* step03 */

#appSc03{
	margin-bottom:85px !important;
	margin-top:23px !important;
	min-height:386px;
	height:auto !important;
	height:386px;
}

	#appSc03 .appScIn{
		padding-left:136px;
		padding-top:20px;
		width:270px;
	}

	#appSc03 .appBoxImg{
		left:411px;
		top:0;
	}

	#appSc03 .appBoxIcon{
		top:8px;
	}

/* カスタマイズ機能 */

#customizeBox{
	background-color:#FFF;
	padding:41px 30px 60px;
	@include css3(box-shadow, 0 1px 3px rgba(11,3,6,.15));
	box-shadow: 0 1px 3px rgba(11,3,6,.15);
	border: solid 1px #f5f5f5;
}
	#customList{
		float:left;
		margin-top:40px;
		padding-left:70px;
	}
		#customList li{
			color:#613200;
			font-size:87.5%;
			margin-top:15px;
		}
		#customList li:first-child{
			margin-top:0;
		}

	#customThumb{
		float:right;
		margin-top:17px;
		padding-right:31px;
	}
		#customThumb li{
			color:#613200;
			font-size:75%;
			width:250px;
		}
		#customThumb li:last-child{
			margin-left:12px;
			width:280px;
		}
		#customThumb .customCaption{
			display:block;
			margin-top:10px;
		}

/*===========================
■4. 受注に導く提案力
============================*/

.headEasy{
	background:url(img/easy_head.jpg) no-repeat left top;
}

	.headEasy h1{
		left:484px;
		top:60px;
	}

	.headEasy #headTxt01{
		left:486px;
		top:194px;
	}

#easyCopy{
	padding-top:60px;
	padding-left:66px;
}
#easyPoint{
	background:url(img/easy_point.jpg) no-repeat left top;
	height:281px;
	margin:23px auto 35px;
	position:relative;
	width:880px;
}
	#easyPontList li{
		background-color:#FFF;
		position:absolute;
		top:29px;
	}
	#easyPontList #point01{
		left:50px;
	}
	#easyPontList #point02{
		left:220px;
	}
	#easyPontList #point03{
		left:387px;
	}

#reformMain .easyBox{
	margin-bottom:10px;
}

#reformMain .easySide{
	position:absolute;
	padding-top:30px;
	left:23px;
}

#reformMain .easyScIn{
	padding-left:139px;
	position:relative;
}

#reformMain .easyTxt{
	color:#613200;
	font-size:87.5%;
	line-height:1.7;
	margin-top:20px;
}

#reformMain .easyBox{
	background:url(img/easy_sidettl.gif) repeat-y left top;
	position:relative;
}

/* 3Dイメージ */

#easySc01{
	padding-bottom:68px;
}
	#easySc01a.easyScIn{
		padding-top:40px;
	}
		#reformMain #easySc01b{
			margin-top:10px;
			padding-left:590px;
			padding-right:55px;
			zoom:1;
		}
		#easySc01b .easyBoxImg{
			position:absolute;
			left:139px;
			top:35px;
		}
		#easySc01c{
			margin-top:55px;
			min-height:251px;
			height:auto !important;
			height:251px;
		}
			#easySc01c .easyBoxImg{
				position:absolute;
				right:49px;
				top:0;
			}
			#easySc01c .txt16b{
				color:#613200;
				font-weight:bold;
				font-size:112.5%;
			}
			#easySc01c .easyTxt{
				width:320px;
			}

/* 性能チェック */

#reformMain #easySc02{
	padding-bottom:60px;
	padding-top:18px;
}

	#reformMain .easyEco{
		float:left;
		padding-top:12px;
		width:320px;
	}

	#reformMain .easySimulate{
		float:left;
		_display:inline;
		margin-left:60px;
		width:321px;
	}

/* 構造診断 */

#reformMain #easySc03{
	padding-bottom:40px;
}
	#reformMain #easySc03a{
		padding-left:590px;
		min-height:369px;
		height:auto !important;
		height:369px;
	}
	#easySc03a .easyBoxImg{
		position:absolute;
		left:139px;
		top:30px;
	}
	#easySc03a h3{
		padding-top:60px;
	}
	#easySc03a p{
		width:293px;
	}

/* 写真に迫る高画質な3Dパースを高速作成 */

#reformMain #highspeedList{
	margin-bottom:40px;
}
	#highspeedList li{
		margin-top:10px;
	}

/*===========================
■5. 多彩なモデリング機能
============================*/

.modelingTxt{
	color:#613200;
	font-size:87.5%;
	line-height:1.7;
}

.headModeling{
	background:url(img/modeling_head.jpg) no-repeat left top;
}

	.headModeling h1{
		left:484px;
		top:60px;
	}

	.headModeling #headTxt01{
		left:486px;
		top:194px;
	}

#modelingCopy{
	padding-top:42px;
	line-height:1.7;
	text-align:center;
}

#modelingSc01{
	margin:40px auto 0;
	width:842px;
}

	#modelingSc01 .modelingScIn{
		float:left;
		_display:inline;
		_zoom:1;
		margin-right:29px;
		width:261px;
	}

	#modelingSc01 .modelingScIn:last-child{
		margin-right:0;
	}

	#modelingSc01 .modelingScIn p{
		color:#613200;
		font-size:75%;
		line-height:1.67;
	}

	#modelingSc01 .modelingScIn span{
		display:block;
		margin-bottom:20px;
	}
	#modelingSc01 .modelingScIn h3{
		margin-bottom:20px;
	}

#modelingSc02{
	min-height:385px;
	height:auto !important;
	height:385px;
	margin-top:50px;
	position:relative;
	padding-left:50px;
}

	#modelingSc02 .modelingTxt{
		width:370px;
	}

	#modelingSc02 .modelingBoxImg{
		position:absolute;
		right:0;
		top:0;
	}

#modelingSc03{
	margin:70px auto 0;
	padding-bottom:100px;
	width:718px;
}

/*===========================
■6. リフォーム後のイメージ共有
============================*/

.sharedTxt{
	color:#613200;
	font-size:87.5%;
}

.headShared{
	background:url(img/shared_head.jpg) no-repeat left top;
}

	.headShared h1{
		left:484px;
		top:60px;
	}

	.headShared #headTxt01{
		left:486px;
		top:194px;
	}

#sharedSc01{
	position:relative;
	padding-bottom:19px;
	zoom:1;
}
	#sharedPoint{
		margin-top:23px;
		margin-left:187px;
	}

	#sharedItem{
		bottom:0;
		position:absolute;
		left:0;
	}
#reformMain #sharedCaseBox{
	padding:0px 50px 0px;
}

#reformMain #sharedCaseBox .caseBox{
	border: 5px solid #e5e5e5;
}
#reformMain #sharedCaseBox .caseBox:hover{
	border: 5px solid #be562b;
}
/*	#sharedCaseBox .caseBnr{
		position:relative;
		height:200px;
		width:860px;
	}
	#sharedCaseBox .detailCase{
		bottom:21px;
		right:21px;
		position:absolute;
	}*/

/*===========================
■7. スマホやタブレットで確認＆提案
============================*/

.mobileTxt{
	color:#613200;
	font-size:87.5%;
}

.headMobile{
	background:url(img/mobile_head.jpg) no-repeat left top;
}

	.headMobile h1{
		left:484px;
		top:60px;
	}

	.headMobile #headTxt01{
		left:486px;
		top:194px;
	}

.mobileBox{
	position:relative;
}
	.mobileBox h2{
		margin-bottom:15px;
	}

#mobileSc01{
	margin:40px auto 0;
	min-height:158px;
	height:auto !important;
	height:158px;
	width:780px;
}

	#mobileSc01 .mobileBoxImg{
		position:absolute;
		right:0;
		top:0;
	}
	#mobileSc01 .mobileScIn{
		padding:14px 398px 18px 0;
	}

#mobileSc02{
	margin:67px auto 0;
	width:780px;
}

	#mobileSc01 .mobileBoxImg{
		position:absolute;
		right:0;
		top:0;
	}
	#mobileSc01 .mobileScIn{
		padding:14px 398px 18px 0;
	}
	#sc02List{
		position:relative;
		margin-top:40px;
	}
		#sc02List01{
			margin-right:37px;
		}
		#sc02List02{
		}
		#sc02List03{
			position:absolute;
			right:-69px;
			top:-86px;
		}

#mobileSc03{
	margin:70px auto 0;
	width:780px;
}
	#mobileSc03 .mobileBoxImg{
		margin-top:20px;
	}

#mobileSc04{
	margin:66px auto 0;
	padding-bottom:45px;
	text-align:center;
	width:780px;
}
	#mobileSc03 .mobileBoxImg{
		margin-top:20px;
	}
	.reformBody .sc04Bnr3d{
		background-color:#FFF;
		margin:0 auto;
		position:relative;
		width:600px;
	}
	.sc04Bnr3d .btn3d{
		bottom:16px;
		position:absolute;
		right:51px;
	}