@charset "utf-8";

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

　目次

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

　00. file import　　！！！インポートファイルは一番初めに記述のこと！！！
　01. 基本
　02. 日々のお楽しみメモ


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


/* ==

　00. file import

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


/* ==

　01. 基本

=============================================================================== */
.container{ width:auto; }


#main h3{ margin-bottom:10px; background:url(/common/images/renew2009/bk_h2.gif) right top no-repeat; }
#main h4{ margin-bottom:10px; }

.main div{
	width:730px;
	min-height:1%;
	margin:0 0 20px;
	padding:0;
	font-size:115%;
	clear:both;
}
.main div:after{ content:''; display:block; clear:both; }
.main div div{ width:auto; margin:0; font-size:100%; clear:none; }

.main p.txt_link a{ padding-left:7px; background:url(/common/images/renew2009/arrow_02.gif) left 4px no-repeat; }
.main p.txt_link a.blank{ padding-left:17px; background:url(/common/images/renew2009/arrow_blank.gif) left 1px no-repeat; }
@media print{
	* html .main p.txt_link a{ height:1%; display:block; }
}

.main span.co2{ font-size:10px; }

.main div.bnr{ margin:0; }
.main div.bnr p{ padding-bottom:10px; }

div.li_backnumber p a{ font-size:85%; }




/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 790px) {

	#main{ width:auto; }
	.main div{ width:auto; }


}
@media only screen and (max-width: 600px) {
	#main p{ font-size:100%; }
}










/* ==

　02. 日々のお楽しみメモ

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

.main div.anchor_memo{
	width:720px;
	margin:10px 0 20px;
	padding:10px 0 10px 10px;
	background-color:#f9eae8;
	clear:both;
}
.main div.anchor_memo li{
	width:193px;
	margin-right:8px;
	padding-left:9px;
	/*background:url(../images/memo/anchor_vline.gif) left center no-repeat;*/
	border-left:1px dotted #ca5245;
	font-size:75%;
	line-height:1.2;
	float:left;
}

.main div.anchor_memo li.anchor_cooking{ width:143px; padding-left:0; border-left:none; }
.main div.anchor_memo li.anchor_bookcinema{ width:158px; }
.main div.anchor_memo li.anchor_health{ width:158px; }


.main div.anchor_memo li img{ width:30px; margin-right:5px; display:block; float:left; }
.main div.anchor_memo li span{ width:155px; display:block; float:left; }

.main div.anchor_memo li.anchor_cooking span{ width:105px; }
.main div.anchor_memo li.anchor_bookcinema span{ width:120px; }
.main div.anchor_memo li.anchor_health span{ width:120px; }


.main div.anchor_memo li a span, .main div.anchor_memo li a strong{ color:#404f6f; cursor:pointer; }

.main div.anchor_memo li a:link span, .main div.anchor_memo li a:visited span{ text-decoration:underline; }
.main div.anchor_memo li a:hover span, .main div.anchor_memo li a:active span{ text-decoration:none; }






/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 790px) {

	.main div.anchor_memo{ width:auto; }

	.main div.anchor_memo li{
		width:21%;
		margin-right:2%;
		padding-left:2%;
	}
	.main div.anchor_memo li.anchor_cooking,
	.main div.anchor_memo li.anchor_bookcinema,
	.main div.anchor_memo li.anchor_health{ width:21%; }

	.main div.anchor_memo li img{ width:20%; margin-right:5%; }
	.main div.anchor_memo li span{ width:75%; }

	.main div.anchor_memo li.anchor_cooking span{ width:75%; }
	.main div.anchor_memo li.anchor_bookcinema span{ width:75%; }
	.main div.anchor_memo li.anchor_health span{ width:75%; }
}


@media only screen and (max-width: 640px) {

	.main div.anchor_memo{ width:auto; }

	.main div.anchor_memo li{
		width:45%;
		margin-right:2%;
		padding-left:2%;
	}
	.main div.anchor_memo li.anchor_cooking{ width:45%; }
	.main div.anchor_memo li.anchor_health{ width:45%; margin-top:15px; }
	.main div.anchor_memo li.anchor_bookcinema{ width:45%; margin-top:15px; padding-left:0; border-left:none; }


	.main div.anchor_memo li img{ width:15%; }
	.main div.anchor_memo li span{ width:80%; }

	.main div.anchor_memo li.anchor_cooking span{ width:80%; }
	.main div.anchor_memo li.anchor_bookcinema span{ width:80%; }
	.main div.anchor_memo li.anchor_health span{ width:80%; }

}









/* Cooking
------------------------------------------------------------------------------- */
#cooking{ margin-top:-60px; padding-top:60px; }
#cooking h4{ margin-bottom:5px; }
#cooking .colImg{ width:200px; margin-bottom:20px; float:right; }
#cooking div{ width:510px; float:left; }

#cooking h5{ margin-bottom:5px; }
#cooking h5 img{ margin-right:10px; vertical-align:middle; }
#cooking h5 span{ font-weight:normal; }

#cooking p.txt_ingredients{ padding:0 0 20px; }
#cooking p.notes{ margin-bottom:0; padding:15px 0 0 0; font-size:85%; }


#cooking li{
	margin-bottom:5px;
	padding-left:20px;
	background-repeat:no-repeat;
	background-position:left 2px;
	line-height:1.4;
}
* html #cooking li{ height:1%; }
#cooking li.num01{ background-image:url(../../images/ic_num01.gif); }
#cooking li.num02{ background-image:url(../../images/ic_num02.gif); }
#cooking li.num03{ background-image:url(../../images/ic_num03.gif); }
#cooking li.num04{ background-image:url(../../images/ic_num04.gif); }
#cooking li.num05{ background-image:url(../../images/ic_num05.gif); }



#cooking p.shunsozai{ font-size:90%; line-height:1.3; }
#cooking p.shunsozai img{ margin-right:10px; float:left; }
#cooking p.shunsozai span{ color:#ca5245; }

#cooking .colTxt p.shunsozai{
	padding-top:15px;
	border-top:1px dotted #ccc;
	display:none;
}
#cooking .colTxt p.shunsozai:after{ content:''; display:block; clear:both; }


#cooking div.note{
	width:700px;
	padding:15px;
	background-color:#eee;
	display:block;
	float:none;
	clear:both;
}
#cooking div.note p.img{ width:115px; margin:0; padding-right:15px; text-align:left; float:left; }
#cooking div.note p.notes{ line-height:1.5; }




/* メディアクエリー */
@media only screen and (max-width: 790px) {

	#cooking .colImg{ width:30%; }
	#cooking .colTxt{ width:66%; }

}
@media only screen and (max-width: 640px) {

	#main #cooking{ margin-bottom:0; }

	#cooking .colImg{ width:300px; margin:0 auto 15px; float:none; }
	#cooking .colImg p.img{ text-align:center; }
	#cooking .colTxt{ width:auto; padding-bottom:40px; float:none; clear:both; }

	#cooking ol{ margin-bottom:20px; }
	#cooking .colImg p.shunsozai{ display:none; }
	#cooking .colTxt p.shunsozai{ display:block; }

}















/* Good Things！
------------------------------------------------------------------------------- */
#goodthings{ margin-top:-60px; padding-top:60px; }
#goodthings h4, #goodthings h5{ margin-bottom:5px; }
#goodthings p.img{ width:220px; font-size:80%; line-height:1.2; float:left; }
#goodthings p.img img{ margin-bottom:5px; }
#goodthings div{ width:510px; float:right; }

#goodthings div li{ margin:0 0 5px; font-size:85%; }
#goodthings div li strong{
	margin:0 0 5px;
	padding-left:10px;
	background:url(../images/memo/gtngs_li_disc.gif) left center no-repeat;
}

#goodthings p.f12l15{ font-size:85%; line-height:1.5; }
#goodthings p.f12l13{ font-size:85%; line-height:1.4; }




/* メディアクエリー */
@media only screen and (max-width: 790px) {

	#goodthings p.img{ width:30%; }
	#goodthings div{ width:66%; }
	#goodthings div div{ width:auto; }

}
@media only screen and (max-width: 640px) {

	#goodthings{ padding-bottom:20px; }

	#goodthings p.img{ width:auto; margin-bottom:15px; text-align:center; float:none; }
	#goodthings div{ width:auto; float:none; }

}




/* Book&Cinema
------------------------------------------------------------------------------- */
#bookcinema{ margin-top:-60px; padding-top:60px; }
#bookcinema h4, #bookcinema h5{ margin-bottom:5px; }

#bookcinema div.column2{ width:750px; margin:0 0 0 -20px; clear:both; }
#bookcinema div.column2 div{
	width:355px;
	margin:0 0 0 20px;
	display:inline;
	float:left;
}
#bookcinema div.column2 div div{ width:auto; margin:0; display:block; float:none; }
#bookcinema div.column2 p.img{ margin-left:10px; margin-bottom:10px; float:right; }

#bookcinema div div.txt p{ font-size:85%; line-height:1.8; }
#bookcinema div div.txt p.txt_summary{ padding-top:7px; font-size:90%; }




/* メディアクエリー */
@media only screen and (max-width: 790px) {

	#bookcinema div.column2{ width:auto; margin-left:0; }
	#bookcinema div.column2 div{ width:47%; margin-left:6%; }
	#bookcinema div.column2 div:first-child{ margin-left:0; }

}
@media only screen and (max-width: 640px) {

	#bookcinema{ padding-bottom:20px; }

	#bookcinema div.column2 div{ width:auto; margin-left:0; float:none; display:block; }
	#bookcinema div.column2 div:first-child{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px dotted #ddd; }

	#bookcinema div div.txt p{ font-size:90%; line-height:1.6; }
	#bookcinema div div.txt p.txt_summary{ font-size:80%; }

}






/* Health&Relax
------------------------------------------------------------------------------- */
#health{ margin-top:-60px; padding-top:60px; }
#health h4, #health h5{ margin-bottom:5px; }

#health ul{ padding-bottom:10px; }
#health ul li{
	margin:0 0 10px 2.5em;
	font-size:100%;
	line-height:1.7;
	text-indent:-2.5em;
}

#health p.img{ margin-left:30px; margin-bottom:10px; float:right; }

#health p.f12l15{ font-size:85%; }

#health p.notes{ margin-bottom:30px; font-size:85%; line-height:1.5; }



#health div.nas{
	width:700px;
	padding:15px;
	background-color:#f0f0f0;
	font-size:80%;
	float:none;
	clear:both;
}
#health div.nas div.txt{ width:500px; margin:0; font-size:100%; float:left; }
#health div.nas div.txt p a{ font-weight:bold; }
#health div.nas p.img{ width:190px; margin:0; padding:0; float:right; }
#health div.nas p.img img{ vertical-align:bottom; }


#health div.nas p.txt_link a{ background-position:left 0.4em; }





/* メディアクエリー */
@media only screen and (max-width: 790px) {

	#health div.nas{ width:auto; }
	#health div.nas div.txt{ width:66%; }
	#health div.nas p.img{ width:30%; }

}
@media only screen and (max-width: 640px) {

	#health p.img{ margin-left:0; text-align:center; float:none; }

}
@media only screen and (max-width: 600px) {

	#health ul li{
		font-size:90%;
	}

}
@media only screen and (max-width: 578px) {

	#health div.nas div.txt{ width:auto; margin-bottom:15px; float:none; }
	#health div.nas p.img{ width:auto; float:none; }

}