@charset "utf-8";

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

　目次

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

　00. base
　01. 衣類が片づく収納をつくるには
　02. コーディネートが上手になる、クローゼットをつくりましょう！


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



/* ==

　00. base

=============================================================================== */

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

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



/* アドバイザー
------------------------------------------------------------------------------- */
.adviserBlock{
	padding:20px;
	background-color:#f0f0e3;
	zoom:1;
	clear:both;
}
.adviserBlock .colW{ width:740px; float:left; }
.adviserBlock .colN{ width:160px; float:right; }




/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
	.adviserBlock .colW{ width:75%; }
	.adviserBlock .colN{ width:20%; }
}
@media only screen and (max-width: 600px) {
	p.leadTxt{ padding:20px 0 40px; }

	.adviserBlock .colW{ width:auto; margin-bottom:20px; float:none; }
	.adviserBlock .colN{ width:auto; text-align:center; float:none; }
}








/* ==

　01. 衣類が片づく収納をつくるには

=============================================================================== */
#main .clothingBlock h2{ margin-bottom:15px; margin-left:5%; }
#main .clothingBlock h3{ margin-bottom:10px; }
.clothingBlock{ margin-left:-5%; zoom:1; clear:both; }
.clothingBlock div.col1, .clothingBlock div.col2,
.clothingBlock div.col3, .clothingBlock div.col4{ width:45%; margin:0 0 30px 5%; float:left; display:inline; clear:none; }

.clothingBlock div p em{ font-size:114%; line-height:1.5; color:#8b8522; }


.clothingBlock div.col1 .txt{ width:230px; float:left; }
.clothingBlock div.col1 .img{ width:210px; float:right; }

.clothingBlock div.col2 .txt{ width:275px; float:left; }
.clothingBlock div.col2 .img{ width:160px; float:right; }
#main .clothingBlock div.col2 .txt .img{ width:auto; font-size:100%; line-height:1.5; float:none; }
.clothingBlock div.col2 .txt .img img{ margin-right:15px; float:left; }

.clothingBlock div.col3 .txt{ width:245px; float:left; }
.clothingBlock div.col3 .img{ width:190px; float:right; }

.clothingBlock div.col4 .txt{ width:220px; float:left; }
.clothingBlock div.col4 .img{ width:220px; float:right; }




/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
	.clothingBlock div.col1 .txt{ width:60%; }
	.clothingBlock div.col1 .img{ width:35%; }
	.clothingBlock div.col2 .txt{ width:70%; }
	.clothingBlock div.col2 .img{ width:25%; }
	.clothingBlock div.col3 .txt{ width:65%; }
	.clothingBlock div.col3 .img{ width:30%; }
	.clothingBlock div.col4 .txt{ width:50%; }
	.clothingBlock div.col4 .img{ width:45%; }
}
@media only screen and (max-width: 800px) {
	.clothingBlock div.col1 .txt,
	.clothingBlock div.col2 .txt,
	.clothingBlock div.col3 .txt,
	.clothingBlock div.col4 .txt{ width:auto; margin-bottom:20px; float:none; }
	.clothingBlock div.col1 .img,
	.clothingBlock div.col2 .img,
	.clothingBlock div.col3 .img,
	.clothingBlock div.col4 .img{ width:auto; text-align:center; float:none; }
	#main .clothingBlock div.col2 .txt .img{ text-align:left; }
}
@media only screen and (max-width: 600px) {
	#main .clothingBlock h2{ margin-left:0; }
	.clothingBlock{ margin-left:0; }
	.clothingBlock div.col1, .clothingBlock div.col2,
	.clothingBlock div.col3, .clothingBlock div.col4{ width:auto; margin:0 0 30px; float:none; display:block; clear:both; }
	.clothingBlock div.col1 .txt p em br,
	.clothingBlock div.col2 .txt p em br,
	.clothingBlock div.col3 .txt p em br,
	.clothingBlock div.col4 .txt p em br{ display:none; }
}






/* ==

　02. コーディネートが上手になる、クローゼットをつくりましょう！

=============================================================================== */
.closetBlock{
	padding-top:30px;
	border-top:1px dotted #999;
	zoom:1;
	clear:both;
}
#main .closetBlock h2{ margin-bottom:20px; }
.closetBlock .colN{ width:295px; float:left; }
.closetBlock .colW{ width:620px; float:right; }

.closetBlock .colW p.txt{ width:275px; float:left; }
.closetBlock .colW div.imgs{ width:340px; float:right; }
.closetBlock .colW li{ width:150px; margin:0 0 20px 20px; display:inline; float:left; }




/* アイデア
------------------------------------------------------------------------------- */
.closetBlock .idea{
	margin:0 0 30px;
	zoom:1;
	clear:both;	
}
.closetBlock .idea h3{
	background:url(../images/comfortableLife/bg_subt_idea.gif) left top repeat-x;
}
.closetBlock .idea .col1,
.closetBlock .idea .col2{ width:30%; margin-right:4.9%; float:left; }
.closetBlock .idea .col3{ width:30%; float:left; }
.closetBlock .idea div p.img{ margin-bottom:10px; text-align:center; }







/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
	.closetBlock .colN{ width:auto; margin-bottom:30px; float:none; }
	.closetBlock .colW{ width:auto; float:none; }
	.closetBlock .colN p.img{ margin-right:20px; float:left; }
	
	.closetBlock .colW p.img{ text-align:center; }
	.closetBlock .colW p.txt{ width:65%; }
	.closetBlock .colW div.imgs{ width:35%; }
	.closetBlock .colW li{ width:45%; margin-left:5%; }

}
@media only screen and (max-width: 600px) {
	.closetBlock .colN p.img{ margin-right:0; float:none; }
	
	.closetBlock .colW p.txt{ width:auto; margin-bottom:30px; float:none; }
	.closetBlock .colW div.imgs{ width:auto; margin-bottom:30px; float:none; }
	.closetBlock .colW li{ margin:0 2.5%; }

	.closetBlock .idea .col1,
	.closetBlock .idea .col2{ width:auto; margin-right:0; margin-bottom:20px; float:none; }
	.closetBlock .idea .col3{ width:auto; float:none; }
}