@charset "UTF-8";


body	{margin: 0;
	font-family: Arial, Verdana, Helvetica,'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	color: #000000;
	font-size: 1.0em;
	line-height : 1.70;
	letter-spacing: 1px}
	
	
	/*●リンク文字*/
a{text-decoration: none;}
a:link{ color: #F0333F;}
a:visited{ color: #F96E7F;}
a:hover{ text-decoration: underline;}
a:active{color: #F0333F;}

	



/* lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); 

/* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font:14px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{ padding:0 10px; color: #333; }
#imageData #imageDetails{ width: 80%; float: left; text-align: left; }	
#imageData #caption{ font-weight: ;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }



/* ヘッダーロゴ */
#header{max-width: 100%;
	}


	

/* メイン画像 */

#mainimg	{
	text-align: center;
}

#topimg	{max-width: 100%;
	text-align: center;
	height: auto;
	margin botom:120px;}
	

/* 画像 */

.kahenimg	{max-width: 100%;
	text-align: center;
	height: auto;
	vertical-align: bottom;}
	
	
/* メニュー*/
#menu	{margin-bottom: 40px;
	border-bottom: solid 2px #000000;
	border-top: solid 2px #000000;
	text-align: center;!important
	}
	
/* コピーライト */
#copyright p	{margin: 25px 0px 40px 0px;
	color: #39acad;
	font-size: 0.75em}

/* footer */
#footer	{margin-top: 30px;
	padding: 10px 0px 20px 0px;
	text-align: center;
	}	

/* キャッチコピー */
.catch	{margin: 0;
	padding: 15px;
	font-size: 1.5em}

/* ヘッダー画像にキャッチコピーを重ねる */
.top	{position: relative}

.catch	{position: absolute;
	top: 50%;
	right: 18%}




/* リンクサムネール */
.link a	{display: block;
	text-decoration: none}

.link a:hover	{opacity: 0.8}

.link h2	{margin-top:30px;
	margin-bottom: 4px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 1.5em;
	color: #000000;
	font-weight: 600;
	line-height: 170%;}
	
.link h3	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	font-size: 1.2em;
	color: #39acad;
	font-weight: 600;}
	
.link h4	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	font-size: 1.2em;
	color: #39acad;
	font-weight: 600;}

.link p	{margin-top: 0;
	margin-bottom: 20;
	padding-top: 5px;
	padding-bottom: 15px;
	font-size: 1.2em;
	line-height : 1.6;
	color: #666666}
	
.link img { 
	margin: 0px 0px 10px 0px;
	text-align: center;
	width: 100%;
	height: auto;
	}




/* レシピ */
.recipe ul { list-style-type: decimal; 
	margin-top: 0;
	padding: 7px 20px 7px 30px;
	font-size: 1.2em;
	line-height : 1.6;
	color: #666666
	}
	
.recipe li {
	color: #39acad;
	}
	
.recipe  span {
	color: #666666
	}
	
.recipe img { 
	margin: 10px 0px 10px 0px;
	text-align: center;
	width: 100%;
	height: auto;
	}
	
.recipe h2	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align:center;
	font-size: 2em;
	line-height : 1.2;
	color: #000000;
	font-weight: 600;}
	
.recipe h3	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	font-size: 1.2em;
	color: #39acad;
	font-weight: 600;}
	
.recipe h4	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	font-size: 1.2em;
	color: #000000;
	font-weight: 600;}
	
.recipe p	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 25px;
	padding-right: 10px;
	font-size: 1.0em;
	line-height : 1.6;
	color: #666666}

.recipe a	{display: block;
	text-decoration: none;
	font-size: 0.9em;
	color: #39acad;
	font-weight: 600;}

.recipe a:hover	{opacity: 0.5}


.recipelead
	{width: 70%;
	margin-left: auto;
	margin-right: auto}
	
.recipelead p	{margin-top: 30;
	margin-bottom: 30px;
	font-size: 1em;
	line-height : 1.6;
	font-weight: normal;
	text-align: left;
	}
	
/* クーポン */
.coupon ul { list-style-type: decimal; 
	margin-top: 0;
	padding: 7px 20px 7px 30px;
	font-size: 1.2em;
	line-height : 1.6;
	color: #666666
	}
	
.coupon li {
	color: #39acad;
	}
	
.coupon span {
	color: #666666
	}
	
.coupon img { 
	margin: 10px 0px 10px 0px;
	text-align: center;
	width: 100%;
	height: auto;
	}
	
.coupon h2	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 20px;
	padding-bottom: 5px;
	font-size: 1.8em;
	line-height : 1.2;
	color: #000000;
	font-weight: 600;}
	
.coupon h3	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	font-size: 1.4em;
	color: #000000;
	font-weight: 600;}
	
.coupon h4	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	font-size: 1.2em;
	color: #000000;
	font-weight: 600;}
	
.coupon p	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 25px;
	padding-right: 10px;
	font-size: 1.0em;
	line-height : 1.6;
	color: #666666}

.coupon a	{
	text-decoration: none;
	color: #39acad;}

.coupon a:hover	{opacity: 0.5}


.couponticket1
	{padding: 7px 7px 7px 7px;
	background-color: #39acad;
	text-align: center;
	font-size: 1.2em;
	line-height : 1.6;
	font-weight: 600;
	color: #ffffff}
	
.couponticket2
	{padding: 7px 7px 7px 7px;
	text-align: center;
	border-style: solid;
	border-width: 1px; 
	border-color: #39acad; }
	
.couponticket3
	{padding: 4px 4px 4px 4px;
	background-color: #39acad;
	text-align: center;
	font-size: 1.1em;
	line-height : 1.6;
	font-weight: 300;
	color: #ffffff}


/* 文字の装飾 */
.blue_b1	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 1.8em;
	color: #39acad;
	letter-spacing: 2px;
	font-weight: 600;}
	
.blue_b3	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 1.3em;
	color: #39acad;
	letter-spacing: 2px;
	font-weight: 600;}
	
.black_b4	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 1em;
	color: #000000;
	font-weight: 600;}
	
.black_4	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 1em;
	color: #000000;}
	
.black_6	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 0.8em;
	color: #000000;}

/* 余白 */
.h20{
width: 20px;
height: 20px;
}

.h30{
width: 30px;
height: 30px;
}

.h40{
width: 40px;
height: 40px;
}

.h50{
width: 50px;
height: 50px;
}


.h100{
width: 100px;
height: 100px;
}

.h200{
width: 200px;
height: 200px;
}

/* コンテンツ他横の空き */
.contents, .w850c, .w1050c, .w650c
{padding-right: 15px;
	padding-left: 15px; }


/* ボックスの左右 */
.box2, .box2a, .box3, .kensaku
	{padding-left: 30px;
	padding-right: 30px}
	
#header, #footer
	{padding-left: 0px;
	padding-right: 0px}
	

/* ボックスの上下 */
.box2, .box2a, .box3	{padding-top: 20px}

.box2-1, .box2-2, .box3-1, .box3-2, .box3-3, .box2-l63, .box2-r33
	{padding-bottom: 10px}
	
	
/* 90%幅で固定*/
.wide90
	{width: 90%;
	margin-left: auto;
	margin-right: auto}
	
.wide80
	{width: 80%;
	margin-left: auto;
	margin-right: auto}
	
.wide80 p	{margin-top: 30;
	margin-bottom: 30px;
	font-size: 0.9em;
	line-height : 1.8;
	font-weight: normal;
	text-align: center;
	}
	
	
/* センタリング*/
.mannaka{
	text-align: center;
}
.center{
 text-align: center;
}

	
	
/* 検索 */
.kensaku{
	width: 100%;
	padding-top: 25px;
 	text-align: left;}
	
.kensaku h2	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;
	font-size: 1.2em;
	color: #39acad;
	font-weight: 600;}
	
.kensaku p	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 15px;
	padding-right: 30px;
	font-size: 0.8em;
	color: #666666}
	
.link a	{display: block;
	text-decoration: none}

.link a:hover	{opacity: 0.5}
	

/* ページトップへ */
.pagetop{
	width: 100%;
	padding-top: 25px;
 	text-align: center;}
	
	
		

/* ########### 359px以下 ########### */
@media (max-width: 359px) {
/* 文字サイズ */
html{ font-size : 70%}

}



/* ########### 599px以下 ########### */
@media (max-width: 599px) {

/* ナビゲーション */
#menu li a	{padding: 10px 7px;
	font-size: 1.0em}

/* キャッチコピー */
.catch	{padding: 5px 10px;
	font-size: 0.75em}


/* トップページリード文*/
.toplead
	{width: 80%;
	margin-left: auto;
	margin-right: auto}
	

	
.toplead p	{margin-top: 30;
	margin-bottom: 30px;
	font-size: 0.9em;
	line-height : 1.8;
	font-weight: normal;
	text-align: left;
	}
	


}



/* ########### 767px以下 ########### */
@media (max-width: 767px) {

/* 文字サイズ */
html{ font-size : 85%}

/* ヘッダー */

	
/* トグルボタン */
#menubtn	{padding: 6px 12px;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
	background-color: #ffffff;
	position: absolute;
	top: 20px;
	right: 15px;
	cursor: pointer}

#menubtn:hover	{background-color: #dddddd}

#menubtn:focus	{outline: none}

#menubtn i	{color: #888888;
	font-size: 1.2em}

#menubtn span	{display: inline-block;
	text-indent: -9999px}

/* ナビゲーションメニュー（縦並び） */
#menu	{display: none}

#menu ul	{margin: 0;
	padding: 0;
	list-style: none}

#menu li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 0.8em;
	font-weight: 900;
	text-decoration: none}

#menu li a:hover	{background-color: #eeeeee}

/* ロゴ */
#logoimg	{max-width: 85%;
	padding: 0px;
	text-align: left;
}

	
/* フッターのナビゲーション */

#footer a	{
	color: #000000;
	font-size: 0.75em;
	font-weight: 900;
	text-align: center;
	text-decoration: none}

#footer a:hover	{color: #999999}

/* リード */

.lead h1	{color: #000000;
	padding: 5px 20px 5px 20px ;
	font-size: 1.2em;
	font-weight: normal;
	text-align: center;}

.lead img	{border: none}

/* トップページ水色背景の見出し */
.midashi{padding: 3px 7px 3px 7px;
	margin-right: 10px;
	font-size: 0.75em;
	color: #ffffff;
	background-color: #39acad}
	
	.midashi2{padding: 3px 7px 3px 7px;
	margin-right: 10px;
	font-size: 0.75em;
	color: #ffffff;
	background-color: #CC0000}
	
	
.link h2	{margin-top:10px;
	margin-bottom: 4px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 1.3em;
	color: #000000;
	font-weight: 600;
	line-height: 150%;}
	
.link h3	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: center;
	font-size: 1.2em;
	color: #39acad;
	font-weight: 600;}

/* レシピのリード */
.recipelead
	{width: 90%;
	margin-left: auto;
	margin-right: auto}
	
}


/* ########### 768px以上 ########### */
@media (min-width: 768px) {
	
	
/* 文字サイズ */
html{ font-size : 100%}

/* ヘッダー */

	
/* トグルボタン */
#menubtn	{display: none}

/* ナビゲーション */
#menu	{display: block; !important}

#menu ul	{margin: 0;
	padding: 0;
	list-style: none}

#menu li a	{display: block;
	padding: 10px 25px;
	color: #000000;
	font-size: 1em;
	font-weight: 900;
	text-align: center;
	text-decoration: none}

#menu li a:hover	{color: #999999}

#menu ul:after	{content: "";
	display: block;
	clear: both}

#menu li	{float: left;
	width: auto} 
	
/* フッターのナビゲーション */

#footer a	{
	color: #000000;
	font-size: 0.95em;
	font-weight: 900;
	text-align: center;
	text-decoration: none}

#footer a:hover	{color: #999999}


/* ロゴ */
#logoimg	{max-width: 100%;
	padding: 10px 0px 10px 0px;
	text-align: center;
}


	
/* トップページリード文*/
.toplead
	{width: 60%;
	margin-left: auto;
	margin-right: auto}
	
	
.toplead p	{margin-top: 30;
	margin-bottom: 30px;
	font-size: 1.1em;
	line-height : 1.8;
	font-weight: normal;
	text-align: left;
	}
	
		
	
/* リード */

.lead h1	{color: #000000;
	padding-top: 20px;
	padding-bottom: 10px;
	font-size: 1.9em;
	font-weight: normal;
	text-align: center;}

.lead img	{border: none}


/* トップページ水色背景の見出し */
.midashi{padding: 7px 15px 6px 15px;
	margin-right: 12px;
	font-size: 0.8em;
	color: #ffffff;
	background-color: #39acad}
	
	
.midashi2{padding: 7px 15px 6px 15px;
	margin-right: 12px;
	font-size: 0.8em;
	color: #ffffff;
	background-color: #CC0000}	
	

/* box2-1、box2-2を横に並べる設定 */
.box2:after	{content: "";
	display: block;
	clear: both}

.box2-1	{float: left;
	width: 48%;
	margin-right: 4%}

.box2-2	{float: left;
	width: 48%;
	}

/* box2-l63、box2-r33を横に並べる設定 */
.box2a:after	{content: "";
	display: block;
	clear: both}

.box2-l64	{float: left;
	width: 64%;
	margin-right: 2%;
	}

.box2-r31	{float: left;
	width: 31%;
	padding-left: 2%;
	border-left: solid 1px #000000;
	}
	
/* box2-1、box2-2を横に並べる設定50% */
.box2harf:after	{content: "";
	display: block;
	clear: both}

.box2-3	{float: left;
	width: 48%;
	margin-right: 4%}
	
	
.box2-3- {float: left;
	width: 24%;
	margin-right: 4%}
	
	
.box2-3-- {float: left;
	width: 0%;
	margin-right: 0%}
	
	

.box2-4	{float: left;
	width: 48%;
	}
	
.box2-4- {float: left;
	width: 72%;
	}
	
.box2-4-- {float: left;
	width: 100%;
	}
		
	


/* box3-1、box3-2、box3-3を横に並べる設定 */
.box3:after	{content: "";
	display: block;
	clear: both}

.box3-1	{float: left;
	width: 32%;
	margin-right: 2%}

.box3-2	{float: left;
	width: 32%;
	margin-right: 2%}

.box3-3	{float: left;
	width: 32%}
	
/* 650幅で固定*/
.w650c
	{width: 650px;
	margin-left: auto;
	margin-right: auto}
		
	

}




/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {
	

/* 全体の横幅を固定 */
#header, .mainimg, .lead, .box4, #footer, #footer-inner, .box2, .box3, .mannaka, .kensaku, .contents
	{width: 1140px;
	margin-left: auto;
	margin-right: auto}

/* 1050幅で固定*/
.w1050c
	{width: 1050px;
	margin-left: auto;
	margin-right: auto}
	


}

/* ########### 599px以下 ########### */
@media (max-width: 599px) {
.campBox1{display:inline;}
.campBox2{display:none;}
.img01{display:none;}
.img01s{display:inline;}
}

/* ########### 599px以上 ########### */
@media (min-width: 599px) {
.campBox1{display:none;}
.campBox2{display:inline;}
.img01{display:inline;}
.img01s{display:none;}
}