@charset "utf-8";

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

　目次

-------------------------------------------------------------------------------

　00. base
　01. 
　02. 
　03. 

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



/* ==

　00. base

=============================================================================== */
#main div:after{ content:''; display:block; clear:both; }

#main h2{ margin-bottom:10px; }
#main h3{ margin-bottom:10px; }

p em{ font-weight:bold; }
#main p.leadTxt{ padding:45px 0 50px; text-align:center; }
#main p.leadTxt.mobile{ padding:15px 0 30px; font-weight:bold; }


#main p.hdTxt{ margin-bottom:10px; }

#main div.note{ padding-top:15px; border-top:1px dotted #ccc; clear:both; }


#main div.bnrs li{ width:49%; margin-bottom:25px; float:left; }
#main div.bnrs li:nth-child(even){ margin-left:2%; }
#main div.bnrs li a{ opacity:1.0; }
#main div.bnrs li a:hover{ opacity:0.7; }



/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
}
@media only screen and (max-width: 600px) {
	#main p.leadTxt.mobile{ padding:20px 0 40px; text-align:left; }
	#main .lead p,
	#main div p{ font-size:16px !important; }
}
@media only screen and (max-width: 567px) {
	#main div.bnrs li{ width:auto; margin-bottom:20px; text-align:center; float:none; }
	#main div.bnrs li:nth-child(even){ margin-left:0; }
}




/* ==

　01. 

=============================================================================== */
#main .ftr_docs{ padding-bottom:20px; zoom:1; clear:both; }
#main .ftr_docs h2{
	margin-bottom:0;
	font-size:200%;
	color:#333;
}
#main .ftr_docs h2 span{ font-size:64%; font-weight:normal; }
#main .ftr_docs p{ font-size:130%; }
#main .ftr_docs p.note{ font-size:117%; }



/* ロイヤルホームセンター */
#main .royal-hc{
	padding:30px;
	background-color:#f4f2f8;
	zoom:1;
	clear:both;
}

.royal-hc .logo{ width:24%; margin-right:3%; float:left; }
.royal-hc .txt{ width:73%; float:left; }
.royal-hc .txt p em{ font-size:110%; }
.royal-hc .txt p.note{
	margin-left:1em;
	text-indent:-1em;
}






/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
}
@media only screen and (max-width: 1020px) {
}
@media only screen and (max-width: 800px) {
}
@media only screen and (max-width: 600px) {
	#main .ftr_docs h2{ font-size:20px; }

	.royal-hc .logo{ width:auto; margin-bottom:15px; margin-right:0; text-align:center; float:none; }
	.royal-hc .txt{ width:auto; float:none; }
}
@media only screen and (max-width: 567px) {
}







/* ==

　02. 

=============================================================================== */
.ftr_tools{
	margin:0 0 40px;
	padding:0;
	zoom:1;
	clear:both;
}

.ftr_tools .col1{ width:55%; float:left; }
.ftr_tools .col2{ width:44%; float:left; }

#main .ftr_tools h2{
	padding-left:45px;
	background: url(../images/comfortableLife/ico_img01.png) left center no-repeat;
	font-size:185%;
	color:#805a99;
}

#main .ftr_tools div p{ font-size:14px; }
.ftr_tools div p em{ font-size:117%; }

.ftr_tools .tools01{ min-height:263px; padding:25px 30px 30px 0; position:relative; zoom:1; clear:both; }
.ftr_tools .tools01 .icon{ float:right; }

.ftr_tools .tools01_1{ width:46%; float:left; }
.ftr_tools .tools01_1 p em{ padding-right:20px; background: url(../images/comfortableLife/ico_img02.png) right 0.25em no-repeat; }
.ftr_tools .tools01_1 .img{ position:absolute; top:0; left:0; }

.ftr_tools .tools01_2{ padding-top:20px; clear:both; }
.ftr_tools .tools01_2 p{ width:40%; float:left; }
.ftr_tools .tools01_2 p em{ padding-right:20px; background: url(../images/comfortableLife/ico_img03.png) right 0.25em no-repeat; }
.ftr_tools .tools01_2 .img{ width:56%; float:right; }

.ftr_tools .tools02{ position:relative; }
.ftr_tools .tools02 .icon{ position:absolute; top:50px; left:0; }
.ftr_tools .tools02 .img{ width:50%; text-align:right; float:left; }
.ftr_tools .tools02 p{ width:35%; margin-right:8%; padding-left:4%; background: url(../images/comfortableLife/ico_img04.png) left 0.5em no-repeat; float:right; }
#main .ftr_tools .tools02 p.note{ width:35%; padding-left:0; background:none; font-size:100%; position:absolute; top:140px; left:0; float:none; clear:both; }

.ftr_tools .tools03{ position:relative; }
.ftr_tools .tools03 .icon{ position:absolute; top:2%; right:0; }
.ftr_tools .tools03 .tools03_1{ margin-left:-5%; margin-bottom:20px; zoom:1; clear:both; }
.ftr_tools .tools03 .tools03_1 .img{ width:65%; margin-top:-10%; margin-bottom:15%; float:left; }
.ftr_tools .tools03 .tools03_1 .img02{ width:53%; position:absolute; top:43%; left:12%; }
.ftr_tools .tools03 .tools03_1 p{ width:45%; margin-top:17%; margin-left:-15%; padding-left:4%; background: url(../images/comfortableLife/ico_img04.png) left 0.5em no-repeat; float:left; }

.ftr_tools .tools03 .tools03_2{ margin-bottom:30px; zoom:1; clear:both; }
.ftr_tools .tools03 .tools03_2 .img{ width:42%; float:right; }
.ftr_tools .tools03 .tools03_2 p{ width:55%; padding-top:20px; float:left; }
.ftr_tools .tools03 .tools03_2 p em{ padding-right:20px; background: url(../images/comfortableLife/ico_img03.png) right 0.25em no-repeat; }

.ftr_tools .tools04{ width:42%; margin-right:5%; float:left; }
.ftr_tools .tools05{ width:25%; margin-right:5%; float:left; }
.ftr_tools .tools_illust{ width:23%; float:left; }

.ftr_tools .tools04 .icon{ width:64%; text-align:right; }
.ftr_tools .tools04 .img{ width:35%; margin-top:-30%; float:right; }
.ftr_tools .tools04 p{ width:60%; margin-bottom:15px; float:left; }
.ftr_tools .tools04 p em{ padding-right:20px; background: url(../images/comfortableLife/ico_img03.png) right 0.25em no-repeat; }
.ftr_tools .tools04 .img02{ width:60%; }

.ftr_tools .tools05 .icon{ width:32%; margin-top:25%; float:left; }
.ftr_tools .tools05 .img{ width:67%; float:left; }
.ftr_tools .tools05 p em{ padding-right:20px; background: url(../images/comfortableLife/ico_img02.png) right 0.25em no-repeat; }



/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
}
@media only screen and (max-width: 1060px) {
	.ftr_tools .tools03 .tools03_1 .img02{ top:45%; left:8%; }
}
@media only screen and (max-width: 1020px) {
}
@media only screen and (max-width: 850px) {
	.ftr_tools .tools03 .tools03_1 .img02{ left:7%; }
}
@media only screen and (max-width: 800px) {

	.ftr_tools .wrap{ max-width:520px; margin:0 auto; }
	.ftr_tools .tools02{ min-height:300px; }

	.ftr_tools .col1{ width:auto; float:none; }
	.ftr_tools .col2{ width:auto; float:none; }

	#main .ftr_tools .tools02 p.note{ font-size:14px !important; }

	.ftr_tools .tools03 .tools03_1{ margin-left:0; }
	.ftr_tools .tools03 .tools03_1 .img{ margin-top:0; margin-bottom:5%; }
	.ftr_tools .tools03 .tools03_1 .img02{ top:40%; left:17%; }

	.ftr_tools .tools04{ width:57%; margin-right:5%; float:left; }
	.ftr_tools .tools05{ width:38%; margin-right:0; float:left; }
	.ftr_tools .tools_illust{ width:auto; padding-top:20px; text-align:center; float:none; clear:both; }

	.ftr_tools .tools04 .img02{ width:60%; }

}
@media only screen and (max-width: 600px) {
	#main .ftr_tools h2{ font-size:20px; }
}
@media only screen and (max-width: 567px) {

	.ftr_tools .tools01_1{ width:65%; }

	.ftr_tools .tools01_2 p{ width:auto; float:none; }
	.ftr_tools .tools01_2 p em{ background-image: url(../images/comfortableLife/ico_img02.png); }
	.ftr_tools .tools01_2 .img{ width:auto; margin-right:-30px; margin-bottom:10px; text-align:center; float:none; }

	.ftr_tools .tools02{ margin-bottom:30px; }
	.ftr_tools .tools02 .img{ width:auto; margin-bottom:10px; text-align:center; float:none; }
	.ftr_tools .tools02 p{ width:auto; margin-right:0; padding-left:0; background:none; float:none; }
	.ftr_tools .tools02 p em{ padding-right:20px; background: url(../images/comfortableLife/ico_img02.png) right 0.25em no-repeat; }
	#main .ftr_tools .tools02 p.note{ width:auto; position:static; }

	.ftr_tools .tools03 .tools03_1{ margin-left:0; }
	.ftr_tools .tools03 .icon{ left:0; }
	.ftr_tools .tools03 .tools03_1 .img{ width:auto; margin-top:0; text-align:center; float:none; }
	.ftr_tools .tools03 .tools03_1 .img02{ top:28%; left:45%; }
	.ftr_tools .tools03 .tools03_1 p{ width:auto; margin-top:0; margin-left:0; padding-left:0; background:none; }
	.ftr_tools .tools03 .tools03_1 p em{ padding-right:20px; background: url(../images/comfortableLife/ico_img02.png) right 0.25em no-repeat; }

	.ftr_tools .tools03 .tools03_2 .img{ width:auto; text-align:center; float:none; }
	.ftr_tools .tools03 .tools03_2 p{ width:auto; padding-top:10px; float:none; }
	.ftr_tools .tools03 .tools03_2 p em{ background-image: url(../images/comfortableLife/ico_img02.png); }

	.ftr_tools .tools04{ width:auto; margin-right:0; margin-bottom:30px; float:none; }
	.ftr_tools .tools05{ width:auto; margin-right:0; float:none; }

}










/* ==

　03. 

=============================================================================== */
.ftr_ladderrack{
	margin:0 0 50px;
	padding-top:30px;
	border-top:1px dotted #ccc;
	zoom:1;
	clear:both;
}
#main .ftr_ladderrack h2{
	margin:0 0 10px;
	font-size:190%;
	line-height:1.3;
	color:#ec6d7e;
}

.ftr_ladderrack .lead{ zoom:1; clear:both; }
.ftr_ladderrack .lead .img{ width:33%; float:right; }
.ftr_ladderrack .lead .docs{ width:64%; float:left; }
#main .ftr_ladderrack .lead p{ font-size:130%; }

.ftr_ladderrack .material{
	padding:25px 20px 5px;
	border:1px solid #ee8c93;
	border-radius:10px;
	zoom:1;
	clear:both;
	position:relative;
}
#main .ftr_ladderrack .material h3{
	width:104px;
	height:26px;
	margin-top:-50px;
	padding:8px 20px;
	background: url(../images/comfortableLife/bg_ribbon01.png) left top no-repeat;
	font-size:16px;
	color:#fff;
	text-align:center;
}
#main .ftr_ladderrack .material p.note{
	font-size:100%;
	position:absolute;
	top:-30px;
	left:180px;
}
.ftr_ladderrack .material dl{ font-size:117%; }
.ftr_ladderrack .material dt{
	font-size:117%;
	color:#e95370;
	font-weight:bold;
}
.ftr_ladderrack .material dd{
	margin-top:-1.85em;
	margin-bottom:15px;
	padding-left:4em;
}


/* 作り方 */
.ftr_ladderrack .howto{
	background:url(../images/comfortableLife/img_vline01.png) 50% 50px no-repeat;
}
.ftr_ladderrack .howto .col1{ width:47%; float:left; }
.ftr_ladderrack .howto .col2{ width:47%; float:right;}

#main .ftr_ladderrack .howto h3{
	width:58px;
	height:25px;
	padding:8px 20px;
	background: url(../images/comfortableLife/bg_ribbon02.png) left top no-repeat;
	font-size:16px;
	color:#fff;
	text-align:center;
}

.ftr_ladderrack .howto h4{ margin-bottom:10px; font-size:130%; }
.ftr_ladderrack .howto div .img{ text-align:center; }
#main .ftr_ladderrack .howto div p{ margin-bottom:10px; font-size:130%; line-height:1.5; }
#main .ftr_ladderrack .howto div p.note{ margin-left:1em; text-indent:-1em; font-size:117%; }
.ftr_ladderrack .howto div p em{ color:#e00; }
.ftr_ladderrack .howto div p span{
	margin-top:-1.3em;
	padding-left:25px;
	display:block;
}

.ftr_ladderrack .howto .colR{ width:50%; float:right; }
.ftr_ladderrack .howto .colL{ width:45%; float:left; }

.ftr_ladderrack .howto div .imgs{ padding-top:20px; }
#main .ftr_ladderrack .howto div .imgs p{ font-size:117%; }
.ftr_ladderrack .howto div .imgs p span{ margin-top:-1.5em; }
.ftr_ladderrack .howto div .imgs div{ width:49%; float:left; }
.ftr_ladderrack .howto div .imgs div img{ margin-bottom:10px; }
.ftr_ladderrack .howto div .imgs div img.num{ margin-bottom:0; }
.ftr_ladderrack .howto div .imgs .img2_1{ width:auto; margin-bottom:15px; float:none; }

.ftr_ladderrack .howto div .imgs .img1_1{ margin-right:2%; margin-bottom:15px; }
.ftr_ladderrack .howto div .imgs .img1_2, .ftr_ladderrack .howto div .imgs .img1_3{ margin-bottom:15px; }
.ftr_ladderrack .howto div .imgs .img2_2{ margin-right:2%; margin-bottom:15px; }
.ftr_ladderrack .howto div .imgs .img2_3{ margin-bottom:15px; }

.ftr_ladderrack .howto div .imgs .img2_1 img.img2_1_1{ width:49%; margin-right:2%; float:left; }
.ftr_ladderrack .howto div .imgs .img2_1 img.img2_1_2{ width:49%; float:left; }





/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
}
@media only screen and (max-width: 1020px) {
}
@media only screen and (max-width: 820px) {
	.ftr_ladderrack .lead .img{ width:auto; margin-bottom:30px; text-align:center; float:none; }
	.ftr_ladderrack .lead .docs{ width:auto; margin-bottom:40px; float:none; }
	.ftr_ladderrack .lead .docs p.mb45{ margin-bottom:70px !important; }

	.ftr_ladderrack .howto .col2 .colR{ width:auto; margin-bottom:20px; text-align:center; float:none; }
	.ftr_ladderrack .howto .col2 .colR p.note{ text-align:left; }
	.ftr_ladderrack .howto .col2 .colL{ width:auto; float:none; }
}
@media only screen and (max-width: 600px) {

	#main .ftr_ladderrack .material p.note{ margin-bottom:15px; position:static; }

	.ftr_ladderrack .howto{
		background:none;
	}
	.ftr_ladderrack .howto .col1{ width:auto; float:none; }
	.ftr_ladderrack .howto .col2{ width:auto; float:none; }

	.ftr_ladderrack .howto div .imgs img{ width:100%; height:auto; }
	.ftr_ladderrack .howto div .imgs img.num{ width:auto; }


}
@media only screen and (max-width: 567px) {
	.ftr_ladderrack .material dd{
		margin-top:0;
		padding-left:0;
	}
}