@charset "utf-8";
/* ===================================================================

 file name  :lifestyle.css
 style info :スタイル提案

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

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

	overwrite

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




/* =================================== */
#main  img{
	width:100%;
	height:auto;
}


#main .lead{
	margin-bottom:3em;
	text-align:center;
	font-size:125%;
	font-weight:bold;
	line-height:1.8;
}
#main h2{
	margin-bottom:1.5em;
	color:#f3980f;
	font-size:167%;
	text-align:center;
}

#main .list{
	margin-left:-20px;
}
#main .list li{
	width:490px;
	float:left;
	position:relative;
	border:1px solid #bdbdbd;
	padding:30px;
	margin:0 0 20px 20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#main .list li h3{
	font-size:217%;
	margin-bottom:0.3em;
}
#main .list li .catch{
	margin-bottom:1.5em;
	font-size:125%;
	font-weight:bold;
	line-height:1.6;
}
#main .list li .detail{
	overflow:hidden;
	height:auto;
}
#main .list li .detail .img{
	width:220px;
	float:left;
}
#main .list li .detail .txt{
	width:195px;
	float:right;
	font-size:109%;
	line-height:1.8;
}
#main .list li .pop{
	background:#f9ba00;
	width:150px;
	height:150px;
	position:absolute;
	top:-16px;
	right:10px;
	display:table;
	border-radius:150px;
}
#main .list li .pop p{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	color:#FFF;
	line-height:1.4;
	font-size:12px;
}


#main .page-caption{
	text-align:right;
}


/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 768px){

	/* =============================
	
		overwrite
	
	=============================== */
	
	
	
	
	/* =================================== */


	#main .lead{
		margin-bottom:0.3em;
		font-size:117%;
		line-height:1.6;
	}

	#main h2{
		margin-bottom:1.7em;
		font-size:134%;
	}

	#main .list{
		margin-left:0;
	}
	#main .list li{
		width:100%;
		float:none;
		padding:25px 16px 16px;
		margin:0 0 36px 0;
	}
	#main .list li h3{
			font-size:134%;
	}
	#main .list li .catch{
		margin-bottom:1em;
		font-size:84%;
		line-height:1.5;
		min-height:2.5em;
	}
	#main .list li .detail .img{
		width:50.56%;
	}
	#main .list li .detail .txt{
		width:44.5%;
		font-size:84%;
		line-height:1.6;
	}
	#main .list li .pop{
		width:112px;
		height:112px;
		top:-26px;
		right:10px;
	}
	#main .list li .pop p{
		font-size:9px;
		line-height:1.3;
	}


	#main .page-caption{
		text-align:left;
	}







}