@charset "utf-8";

/* ========================================
	【山田発! 食のこだわりマップ】
	2013-11｜レスポンシブwebデザイン
	ページ共通：ヘッダ、フッタ、基本レイアウトボックス
	PCファースト（IE8対応、印刷を考慮して）
	トップページ
======================================== */
body#home {
}

/* トップバナー（スライド） */
#sec-topbnr {
	width:100%;
	position:relative;
}
#sec-topbnr div#top-img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:100%;
	padding:6px;
	background:#fff;
	border:1px solid #ccc;
	-webkit-box-shadow:1px 1px 8px #ccc;
	-moz-box-shadow:1px 1px 8px #ccc;
	box-shadow:1px 1px 8px #ccc;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
#sec-topbnr div#top-txt {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:100%;
	padding:7px;
	position:absolute;
	top:0;
	left:0;
	z-index:10;
}

/* イントロ文 */
#sec-intro {
}
#sec-intro h2 {
	display:none;
}
#sec-intro p {
	font-size:16px;
	font-size:1.6rem;
	margin:0 1em 10px;
	line-height:1.6;
}

/* 食のインデックス */
section#sec-pageindex {
	width:100%;
	margin:0 0 -10px;
}
#sec-pageindex h2 {
	display:none;
}
#sec-pageindex article {
	position:relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:23.40425%; /* 220px÷940px */
	float:left;
	margin-bottom:20px;
	padding-bottom:30px;
	border:3px solid #FFE599;
	background:#fff url(../images/home/bg_food_box.jpg);
	-webkit-box-shadow:3px 3px 6px #ccc;
	-moz-box-shadow:3px 3px 6px #ccc;
	box-shadow:3px 3px 6px #ccc;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
article.food1,
article.food2,
article.food3,
article.food5,
article.food6,
article.food7,
article.food9,
article.food10,
article.food11 {
	margin-right:2.127659%; /*20px÷940px */
}
#sec-pageindex h3 {
	text-align:center;
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	text-shadow:2px 2px 2px #333;
	background:transparent url(../images/home/bg_food_title.jpg);
	margin:5px 0 8px;
	padding:2px 0;
}
#sec-pageindex h4 {
	text-align:center;
	font-size:16px;
	font-size:1.6rem;
	margin:0 0 10px;
	padding:0 6px 3px;
	border-bottom:1px dotted #ccc;
}
#sec-pageindex figure {
	width:100%;
}
#sec-pageindex figure img {
	width:100%;
	height:auto;
}
#sec-pageindex p {
	font-size:14px;
	font-size:1.4rem;
	margin:0 5px 5px 10px;
	line-height:1.4;
}
#sec-pageindex div {
	position:absolute;
	right:10px;
	bottom:10px;
	text-align:right;
	font-size:16px;
	font-size:1.6rem;
	margin:0 0 0;
	line-height:1;
}
#sec-pageindex div i {
}
#sec-pageindex a {
}
#sec-pageindex a:hover {
}

/* Google map */
section#sec-map {
	padding-top:20px;
}
div.box-gmap {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width: 100%;
	height: 650px;
	margin: 0 0 16px;
	background:#ccc;
	padding:2px;
	background:#fff;
	border:10px solid #CEE4A5;
	overflow:hidden;
}
div.box-gmap iframe {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width: 100%;
	height: 626px; /* 100%だとiOSで下はみ出すため */
}
p.link-gmap {
	text-align:center;
	font-size:17px;
	font-size:1.7rem;
	margin:12px 6px;
}
p.link-gmap i {
	font-size:18px;
	font-size:1.8rem;
	padding-right:6px;
	vertical-align:middle;
}

ul#link-maps {
	list-style:none;
	margin:20px 0;
	padding:0;
}
ul#link-maps li {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:48.93617%; /* 460px÷940px */
	text-align:center;
	float:left;
	margin:0;
	padding:10px;
	background:#eee;
	border:3px solid #ccc;
	border-radius:5px;
}
ul#link-maps li.link-pdf {
	margin-right:2.127659%; /*20px÷940px */
}
ul#link-maps li.link-webview {
}
/* パンフレット版の予告 */
div#yokoku {
	margin:20px 0 30px;
	padding:10px 15px;
	border:2px dashed #CEE4A5;
	background:#fff url(../images/home/bg_food_box.jpg);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
div#yokoku p {
	font-size:15px;
	font-size:1.5rem;
	margin:0;
	padding:8px 0 0;
	padding-left:1em;
	text-indent:-1em;
}
div#yokoku figure {
	width:80px;
	float:left;
	margin:0px 30px 0px 0px;
}
/* パンフレット版公開 */
div#leaflet {
	margin:20px 0 30px;
	padding:10px 15px;
	border:2px dashed #CEE4A5;
	background:#fff url(../images/home/bg_food_box.jpg);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	/*border-radius: 8px;*/
	position: relative;
	behavior: url(/pie/PIE.htc);
}
div#leaflet p {
	font-size:15px;
	font-size:1.5rem;
	margin:0;
	padding:8px 0 0;
	padding-left:1em;
	text-indent:-1em;
}
div#leaflet p strong {
	font-size:16px;
	font-size:1.6rem;
}
div#leaflet figure {
	width:160px;
	float:left;
	margin:8px 30px 8px 0px;
}
div#leaflet figure img {
	border:1px solid #ccc;
}
div#leaflet ul {
	list-style:none;
	margin:10px 0 0;
	padding:0;
	overflow:hidden;
}
div#leaflet li {
	text-align:center;
	width:11em;
	font-size:18px;
	font-size:1.8rem;
	margin:10px 16px 10px 0;
	padding:0 10px 0 0;
	float:left;
}
div#leaflet li a {
	width:100%;
	display:block;
	padding:6px 0px;
	background:#CEE4A5;
	text-decoration:none;
	border:3px solid #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow:1px 1px 8px #ccc;
	-moz-box-shadow:1px 1px 8px #ccc;
	box-shadow:1px 1px 8px #ccc;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
div#leaflet li a:hover {
	text-decoration:underline;
}
div#leaflet li i {

}

/* メイキングノート */
aside#making {
	background:#fff url(../images/home/bg_makingnote_bnr.jpg) no-repeat center top;
}
aside#making p {
	font-size:14px;
	font-size:1.4rem;
	margin:0 30px 10px;
}
aside#making strong {
}
aside#making em {
	font-style:normal;
	font-weight:bold;
}
div#bnr-making {
	margin:20px 0 20px;
}
div#bnr-making h3 {
	color:#fff;
	font-size:20px;
	font-size:2.0rem;
	text-align:center;
	text-shadow:1px 1px 2px #333;
	margin:0 0 20px;
	padding:6px 12px 4px;
	line-height:1.4;
	letter-spacing:0.1em;
	background:#6E93D7;
	border-bottom:6px solid #fff;
}
div#bnr-making figure {
	display:block;
}
div#bnr-making ul {
	list-style:none;
	color:#fff;
	margin:16px 30px 0;
	padding:0;
	background:transparent url(../images/common/bg_blue60_alpha.png) repeat;
	border:1px dotted #fff;
	overflow:hidden;
}
div#bnr-making li {
	float:left;
	font-size:18px;
	font-size:1.8rem;
	font-weight:bold;
	text-shadow:1px 1px 3px #555;
	margin:0;
	padding:8px 16px;
	line-height:1.5;
}
div#bnr-making li:last-child {
	border-left:1px dotted #fff;
}
.ie8 div#bnr-making li + li + li {
	border-left:1px dotted #fff;
}

div#bnr-making li.link-making {
	float:left;
	text-align:right;
	color:#f60;
	text-align:left;
	text-shadow:none;
	/*background:transparent url(../images/common/bg_white80_alpha.png);*/
	background:#fff;
}
div#bnr-making li.link-note a {
	color:#fff;
	text-decoration:none;
}
div#bnr-making li.link-making a {
	text-decoration:none;
}
div#bnr-making li.link-note a:hover {
	color:#fc0;
	text-decoration:underline;
}
div#bnr-making li.link-making a:hover {
	text-decoration:underline;
}
div#bnr-making li i {
	font-size:20px;
	font-size:2.0rem;
	font-weight:normal;
	vertical-align:baseline;
	text-decoration:none;
}
div#bnr-making li i.icon-youtube-sign {
	font-size:30px;
	font-size:3.0rem;
	font-weight:normal;
	vertical-align:middle;
	text-decoration:none;
}

/* ▼▼以下、モバイルデバイス用指定▼▼ */
/* ===============Mサイズ1／小PC、大ダブレット（W801〜W960）===================== */
@media only screen and (max-width: 960px) {


} /* W801〜W960ここまで */

/* ================Mサイズ2／タブレット、iPad等（W701〜W800）===================== */
@media only screen and (max-width: 800px) {
div.box-gmap {
	border:10px solid #CEE4A5;
	border-left:20px solid #CEE4A5;
	border-right:20px solid #CEE4A5;
}

/* foodインデックス3カラムに */
#sec-pageindex article {
	position:relative;
	width:31.6%;
	margin-bottom:16px;
}
article.food1,
article.food2,
article.food4,
article.food5,
article.food7,
article.food8,
article.food10,
article.food11 {
	margin-right:2.4%; /* 20px÷780px弱 */
}
article.food3,
article.food6,
article.food9,
article.food12 {
	margin-right:0;
}
div#bnr-making li.link-making {
	clear:both;
	float:none;
	text-align:left;
	line-height:1.6;
}

} /* W701〜W800ここまで */

/* ================Mサイズ3／小タブレット、大スマホ横（W601〜W700）===================== */
@media only screen and (max-width: 700px) {


} /* W601〜W700ここまで */

/* =====================Sサイズ1／スマホ横（W401〜W600）===================== */
@media only screen and (max-width: 600px) {
#sec-topbnr div#top-img {
	padding:4px;
}
#sec-topbnr div#top-txt {
	padding:5px;
}
/* foodインデックス2カラムに */
#sec-pageindex article {
	position:relative;
	width:48%;
	margin-bottom:18px;
}
article.food1,
article.food3,
article.food5,
article.food7,
article.food9, 
article.food11 {
	margin-right:3.4%; /*20px÷580px弱 */
}
article.food2,
article.food4,
article.food6,
article.food8,
article.food10 {
	margin-right:0;
}
div#yokoku figure {
	width:70px;
	margin:0px 30px 0px 0px;
}
div#bnr-making h3 {
	font-size:18px;
	font-size:1.8rem;
	text-align:left;
}
div#bnr-making ul {
	width:94%;
	margin:16px auto 0;
	padding:0;
}
div#bnr-making li {
	float:none;
	display:block;
	font-size:16px;
	font-size:1.6rem;
	padding:8px 12px;
	line-height:1.2;
}
div#bnr-making li:first-child {
	border-right:none;
	border-bottom:1px dotted #fff;
}
aside#making p {
	margin:0 16px 10px;
}
p.link-gmap {
	text-align:left;
}

} /* W401〜W600ここまで */

/* =====================Sサイズ2／スマホ縦（W320〜W400）===================== */
@media only screen and (max-width: 400px) {
#contents {
	padding:10px 0 15px;
}
section#sec-topbnr {
	margin-bottom:10px;
}
#sec-topbnr div#top-img {
	padding:4px;
}
#sec-topbnr div#top-txt {
	display:none;
}
#sec-intro h2 {
	display:block;
	text-align:center;
	color:#85B200;
	font-size:18px;
	font-size:1.8rem;
	margin:0 0 10px;
	padding:0 0 4px;
	line-height:1.4;
	border-bottom:1px dotted #999;
}
#sec-intro h2 strong {
	color:#FF5C26;
	font-size:22px;
	font-size:2.2rem;
}
#sec-intro h2 em {
	font-style:normal;
	font-size:20px;
	font-size:2.0rem;
}
/* Googleマップの高さ調整 */
div.box-gmap {
	height: 400px;
}
div.box-gmap iframe {
	height: 376px; /* 100%だとiOSで下はみ出すため */
}
/* foodインデックス1カラムに */
#sec-pageindex article {
	position:relative;
	width:99%; /* 右シャドウ分視覚差調整 */
	float:none;
	margin-right:0;
	margin-bottom:20px;
	padding-bottom:30px;
}
#sec-pageindex p {
	font-size:15px;
	font-size:1.5rem;
	line-height:1.5;
}
aside#making p {
	margin:0 16px 10px;
}
/* パンフレット版公開 */
div#leaflet {
}
div#leaflet figure {
	width:auto;
	float:none;
	margin:8px 0 10px;
}
div#leaflet figure img {
	border:1px solid #ddd;
}
div#leaflet ul {
	width:auto;
	list-style:none;
	margin:10px 0 0;
	padding:0;
	overflow:hidden;
}
div#leaflet li {
	margin:10px auto;
	padding:0 10px 0 0;
	float:none;
}

} /* W320〜W400ここまで */