@charset "utf-8";

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

/* ===============記事本体ここから=============== */
article h2 {
	color:#fff;
	font-size:24px;
	font-size:2.4rem;
	font-weight:bold;
	/*text-shadow: 2px 2px 3px #333;*/
	margin:0 0 10px;
	padding:5px 16px;
	line-height:1.3;
	letter-spacing:1px;
	background:#fff url(../images/food/bg_food_title.jpg) repeat;
	overflow:hidden;
}
article h2 span {
}
.foot-name {
	float:left;
	padding-right:1em;
}
.shop-name {
	float:right;
	font-size:20px;
	font-size:2.0rem;
	padding-top:4px;
}

/* SNSアイコン */
div.sns-icons {
	border-top:none;
}

/* 記事ブロック */
article > section {
	position:relative;
}
article > section h3 {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	overflow:hidden;
}
article > section figure {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
}
article > section figure img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
}
section#sec-food {
	margin:0 0 0;
	padding:6px 0 16px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}
section#sec-person {
	padding:6px 0 0;
}

/* 見出しとアイコン、横並び */
h3.midasi-set {
	display: table;
	/*display: table-row;*/
	font-size:24px;
	font-size:2.4rem;
	margin:0 0 10px;
	padding:0;
	line-height:1.3;
}
h3.midasi-set .headicn {
	display: table-cell;
	width:75px;
	vertical-align: middle;
	padding-right:10px;
}
h3.midasi-set .midasi {
	display: table-cell;
	vertical-align: middle;
}

/* 食と人の写真 */
#sec-food figure,
#sec-person figure {
	width:40%;
	margin-top:-5px;
	padding:5px;
	background:#fff;
	border:1px solid #ddd;
	-webkit-box-shadow:3px 3px 6px #666;
	-moz-box-shadow:3px 3px 6px #666;
	box-shadow:3px 3px 6px #666;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
#sec-food figure.tate,
#sec-person figure.tate {
	width:35%;
}
figure.left {
	float:left;
	margin:0 20px 10px 0;
}
figure.right {
	float:right;
	margin:0 0 10px 20px;
}
#sec-food figure.twin1,
#sec-person figure.twin1 {
	width:44%;
	float:left;
	margin:0 3% 20px 4%;
}
#sec-food figure.twin2,
#sec-person figure.twin2 {
	width:44%;
	float:left;
	margin:0 0 20px;
}
#sec-food p.note {
	font-size:13px;
	font-size:1.3rem;
	text-align:right;
	margin:5px 2px 0;
}

/* 食の匠 */
aside#takumi {
	clear:both;
	margin:0px 0 20px;
	padding:15px 15px 10px;
	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);
}
aside#takumi h4 {
	font-size:20px;
	font-size:2.0rem;
	margin:0 -8px 14px;
	padding:8px 16px;
	line-height:1;
	background:#CEE4A5;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}
aside#takumi h4 strong {
	color:#f40;
}
aside#takumi h4 i {
	font-size:24px;
	font-size:2.4rem;
	vertical-align:baseline;
}
aside#takumi p {
	margin:0 5px 8px;
}
aside#takumi div.link-site {
	text-align:right;
	margin:0 5px;
}
aside#takumi div.link-site i {
}

/* ムービー、最大サイズW640×H360 */
#sec-movie {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	padding:15px 0 0;
	background:#fff;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
#sec-movie h3.midasi-set {
	text-align:center;
	margin:0 auto 10px;
}
#sec-movie h3.midasi-set .headicn {
	width:50px;
}
/* ムービーはPC、タブレットでは固定、W640×H360 */
div.wrap-movie {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	position: relative;
	width: 644px;
	padding-top:364px;
	margin:0 auto 20px;
	background:transparent;
	border:2px solid #fff;
	overflow:hidden;
}
div.wrap-movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow:hidden;
}

/* Google map */
section#sec-map {
}
section#sec-map h3.midasi-set {
	margin-bottom:5px;
}
div.box-gmap {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width: 100%;
	height: 500px;
	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: 476px; /* 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;
}

/* ===============店舗情報とルートマップ=============== */
section.shop-info {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	padding:15px 15px;
	background:#fff url(../images/home/bg_food_box.jpg);
	border:4px solid #CEE4A5;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position: relative;
	behavior: url(/pie/PIE.htc);
	overflow:hidden;
}
.shop-info h3 {
	font-size:20px;
	font-size:2.0rem;
	margin:0 -15px 15px;
	padding:6px 12px;
	line-height:1.2;
	background:#CEE4A5;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}
.shop-info figure {
	width:320px;
	float:right;
	text-align:right;
}
.shop-info figure img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:300px;
	padding:5px;
	background:#fff;
	border:1px solid #ddd;
}
.shop-info table {
	width:auto;
	margin:0 0 16px;
	word-break:break-all;
	border-top:1px dotted #999;
}
.shop-info th {
	padding:6px 10px;
	line-height:1.5;
	white-space:nowrap;
	border-bottom:1px dotted #999;
}
.shop-info td {
	padding:6px 20px 6px 10px;
	line-height:1.5;
	border-bottom:1px dotted #999;
}
.shop-info .address {
}
.shop-info td.telnum {
}
.shop-info td.url {
}
/* =====ルート検索ブロック===== */
.sec-root {
	clear:both;
}
.sec-root h4 {
	width:40%;
	text-align:center;
	color:#333;
	font-size:16px;
	font-size:1.6rem;
	margin:0;
	padding:7px 10px 5px;
	line-height:1.2;
	letter-spacing:1px;
	background:#CEE4A5;
}
/* GPSのステップ説明 */
div.gps-step {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:100%;
	margin:0 0;
	padding:0px 10px 2px;
	background:transparent url(../images/common/bg_white80_alpha.png) repeat;
	border:2px solid #CEE4A5;
}
div.gps-step dl {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:100%;
	display:table;
	margin:0;
	padding:6px 0;
}
div.gps-step dl.step1 {
	border-bottom:1px dotted #ccc;
}
div.gps-step dt {
	display:table-cell;
	width:6em;
	vertical-align:top;
	padding:4px 0 0 ;
}
div.gps-step dd {
	display:table-cell;
	font-size:14px;
	font-size:1.4rem;
	padding:0px 10px 0px 0;
	line-height:1.5;
	text-align:left;
	vertical-align:middle;
}
div.gps-step dt span {
	display:block;
	width:5em;
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size:15px;
	font-size:1.5rem;
	padding:0px 4px;
	background:#f90;
	border:1px solid #fc0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
div.gps-step dd.txt {
}
div.gps-step dl.step2 dd.txt {
	padding-top:6px;
}
div.gps-step dd.btn {
}

div.gps-btn {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:14em;
	text-align:center;
	color:#fff;
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	margin:0px auto 5px;
	padding:12px 10px;
	text-indent:0;
	line-height:1;
	background:transparent url(../images/food/bg_rootbtn.png) repeat-x;
	border:2px solid #fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow:2px 2px 4px #999;
	-moz-box-shadow:2px 2px 4px #999;
	box-shadow:2px 2px 4px #999;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
div.gps-btn i {
	font-size:110%;
	vertical-align:baseline;
}

/* =====ルート検索ボタンここから！===== */
div.map-btn {
	clear:both;
}
div.map-btn ul {
	list-style:none;
	width:100%;
	margin:16px 0;
	padding:0;
}
/* ulにclearfix指定 */
div.map-btn ul {
	zoom: 1;
}
div.map-btn ul:after {
	content: "";
	display: block;
	clear: both;
}

div.map-btn li {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:32.6666%; /* 300px÷940px */
	float:left;
	text-align:center;
	font-size:20px;
	font-size:2.0rem;
	font-weight:bold;
	margin:0;
	padding:0;
	margin-right:1%;
	background:transparent url(../images/food/bg_rootbtn.png) repeat-x;
	border:2px solid #fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow:1px 1px 5px #999;
	-moz-box-shadow:1px 1px 5px #999;
	box-shadow:1px 1px 5px #999;
	position: relative;
	behavior: url(/pie/PIE.htc);
}
div.map-btn li:hover {
	background:transparent url(../images/food/bg_rootbtn-on.png) repeat-x;
}
div.map-btn li a {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	width:100%;
	height:100%;
	display:block;
	color:#fff;
	text-shadow:3px 3px 4px #555;
	letter-spacing:1px;
	text-decoration:none;
	padding:10px 20px;
	background:transparent;
}

div.map-btn li.walk {
}
div.map-btn li.walk a {
	background:transparent url(../images/food/icon_walk.png) no-repeat 8px center;
}
div.map-btn li.car {
}
div.map-btn li.car a {
	background:transparent url(../images/food/icon_car.png) no-repeat 10px center;
}
div.map-btn li.bus {
	margin-right:0;
}
div.map-btn li.bus a {
	background:transparent url(../images/food/icon_bus.png) no-repeat 6px center;
}
p.note1 {
	clear:both;
	margin:20px 6px 0;
	padding-left:1em;
	text-indent:-1em;
	line-height:1.4;
}

/* GPS注意書き */
#note-caution {
	color:#333;
	padding:10px 14px 14px;
	background:#f9f9f9;
	border:1px dotted #ccc;
}
#note-caution h4 {
	text-align:center;
	font-size:18px;
	font-size:1.8rem;
	margin:0 0 14px;
	padding:0 0 4px;
	letter-spacing:0.1em;
	border-bottom:1px solid #999;
}
#note-caution p {
	font-size:14px;
	font-size:1.4rem;
	margin:0 4px 8px;
}
#note-caution em {
	font-weight:bold;
	font-style:normal;
}
#note-caution > section {
	margin:10px 0 0;
	background:#fff;
	border:1px solid #ddd;
}
#note-caution h5 {
	color:#fff;
	margin:0;
	padding:10px 15px;
	background:#5F8EC2;
	height:1em;
	line-height:1em;
	overflow:hidden;
}
#note-caution h5 strong{
	float:left;
	font-size:18px;
	font-size:1.8rem;
	letter-spacing:2px;
}
#note-caution h5 span {
	font-size:14px;
	font-size:1.4rem;
	float:right;
	text-align:right;
	font-weight:normal;
}
#note-caution ul {
	clear:both;
	font-size:13px;
	font-size:1.3rem;
	list-style:none;
	margin:13px 10px 0;
	padding:0;
}
#note-caution li {
	margin:0 0 8px;
	padding:0 0 0 1em;
	text-indent:-1em;
	line-height:1.5;
}

/* スタッフ体験記 */
aside#staff-note {
	width:100%;
	margin:0 0 20px;
	border:4px solid #eee;
	background:#fff url(../images/home/bg_makingnote_bnr.jpg) no-repeat center top;
	overflow:hidden;
}
aside#staff-note figure {
	float:left;
	width:140px;
	padding:0px 13px 5px;
}
aside#staff-note figure img {
	margin-top:-5px;
}
#contents aside#staff-note a:hover img {
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	-moz-opacity: 1;
	opacity:1;
	zoom:1;
}
aside#staff-note h3 {
	color:#fff;
	font-size:24px;
	font-size:2.4rem;
	text-shadow:2px 2px 2px #666;
	margin:20px 16px 10px;
	line-height:1.4
}
aside#staff-note div {
	color:#fff;
	font-size:22px;
	font-size:2.2rem;
	font-weight:bold;
	text-shadow:2px 2px 2px #666;
	margin:0 20px 10px 180px;
	line-height:1.4;
	letter-spacing:1px;
}
aside#staff-note div i {
	padding-left:6px;
}
aside#staff-note a {
	display:block;
	text-decoration:none;
}

/* とっとページの補足記事 */
aside#about-tot {
	clear:both;
	margin:20px 0 24px;
	padding:15px 15px 20px;
	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);
}
aside#about-tot h4 {
	font-size:20px;
	font-size:2.0rem;
	margin:0 -8px 14px;
	padding:8px 16px;
	line-height:1;
	background:#CEE4A5;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}
aside#about-tot h4 strong {
	color:#f40;
}
aside#about-tot h4 i {
	font-size:24px;
	font-size:2.4rem;
	vertical-align:baseline;
}
aside#about-tot p {
	margin:0 5px 8px;
}
aside#about-tot div.txt-box {
}
aside#about-tot div.table-box {
	background:transparent url(../images/food/tot/bg_about-tot.png) no-repeat right bottom;
}

aside#about-tot table {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	font-size:14px;
	font-size:1.4rem;
	margin:16px 0 0;
	border-collapse:collapse;
	background:#fff;
}
aside#about-tot th {
	text-align:center;
	padding:4px 12px;
	line-height:1.4;
	background:#FFEAF0;
	border:1px solid #ccc;
}
aside#about-tot thead th {
	padding:5px 12px;
	background:#efefef;
	border:1px solid #ccc;
}
aside#about-tot td {
	padding:5px 12px;
	line-height:1.4;
	border:1px solid #ccc;
}
aside#about-tot td p {
	font-size:12px;
	font-size:1.2rem;
	margin:6px 0 0;
}
aside#about-tot table caption {
	width:auto;
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	font-weight:bold;
	margin:0 0 8px;
	padding:5px 20px;
	line-height:1.2;
	letter-spacing:0.5em;
	background:#fff url(../images/food/bg_food_title.jpg) repeat;
}

/* ▼▼以下、モバイルデバイス用指定▼▼ */
/* ===============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;
}

aside#about-tot div.table-box {
	background-size:240px auto;
}
.shop-info figure {
	width:300px;
}
.shop-info figure img {
	width:280px;
}

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

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

figure.twin1 {
	float:left;
	margin:0 20px 20px 8%;
}

/* ムービーをフルード可変に変更 */
#sec-movie {
	padding:10px 0px 0px;
}
div.wrap-movie {
	position: relative;
	width:100%;
	padding-top: 56.25%;
	margin:0 auto 16px;
	overflow:hidden;
}

/* ルート検索 */
.sec-root h4 {
	width:auto;
}
div.gps-step {
}
div.gps-step dl {
	display:block;
	margin:0;
	padding:4px 0;
}
div.gps-step dt {
	display:block;
	width:6em;
	float:left;
	margin:0;
	padding:2px 0 0 0;
}
div.gps-step dd {
	display:block;
	margin:0;
	padding:6px 6px 6px 0;
	vertical-align:top;
}
div.gps-step dd.btn {
	clear:left;
}
div.gps-step dd.txt {
	padding:4px 6px 0px 7em;
}
div.gps-btn {
	margin:0px auto 5px;
	padding:12px 10px;
}

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

/* =====================Sサイズ1／スマホ横（W401〜W600）===================== */
@media only screen and (max-width: 600px) {
h3.midasi-set {
	font-size:22px;
	font-size:2.2rem;
}
aside#about-tot div.table-box {
	background:none;
}
aside#about-tot table {
	margin:16px auto 0;
}

p.link-gmap {
	text-align:left;
}

/* 店舗情報とルート検索 */
.shop-info figure {
	display:block;
	width:60%;
	float:none;
	text-align:center;
	margin:0 auto;
	padding-bottom:15px;
}
.shop-info figure img {
	width:100%;
}
.shop-info table {
	width:100%;
	margin:0 0 20px;
	border-top:1px dotted #999;
}

div.map-btn li {
	font-size:16px;
	font-size:1.6rem;
}
/* 電車・バスのみ、アイコンと文字のかぶり調整 */
div.map-btn li.bus a {
	padding-left:34px;
	padding-right:0px;
}
/* スタッフ体験記 */
aside#staff-note {
}
aside#staff-note figure {
	float:left;
	width:100px;
	padding:0px 15px;
}
aside#staff-note figure img {
	margin-top:-7px;
}
aside#staff-note h3 {
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	margin:14px 10px 6px;
}
aside#staff-note div {
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	margin:0 10px 10px;
}

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

/* =====================Sサイズ2／スマホ縦（W320〜W400）===================== */
@media only screen and (max-width: 400px) {
.foot-name {
	float:none;
	display:block;
	font-size:20px;
	font-size:2.0rem;
}
.shop-name {
	float:none;
	display:block;
	font-size:18px;
	font-size:1.8rem;
	padding-top:4px;
}
h3.midasi-set {
	font-size:20px;
	font-size:2.0rem;
}
h3.midasi-set .headicn {
	width:70px;
}
#sec-food figure,
#sec-person figure {
	width:98%;
	margin:0 0 20px;
}
#sec-food figure.tate,
#sec-person figure.tate {
	width:80%;
	margin:0 auto 20px;
}
figure.left,
figure.right {
	float:none;
	margin:0 0 20px;
}
#sec-food figure.twin1,
#sec-person figure.twin1,
#sec-food figure.twin2,
#sec-person figure.twin2 {
	float:none;
	width:98%;
	margin:0 0 20px;
}
/* Googleマップの高さ調整 */
div.box-gmap {
	height: 400px;
}
div.box-gmap iframe {
	height: 376px; /* 100%だとiOSで下はみ出すため */
}

/* 店舗情報とルート検索 */
.shop-info figure {
	width:90%;
}
.shop-info figure img {
	width:100%;
}

/* ルート検索方法 */
div.gps-step dd.txt {
	padding:4px 6px 0px;
}

div.gps-btn {
	display:block;
	margin:8px auto;
}

/* 電車・バスのみ、アイコンと文字の位置調整 */
div.map-btn li.bus a {
	padding-left:30px;
	padding-right:20px;
}

/* 店舗情報 */
.shop-info table {
	width:100%;
	display:block;
	margin:0 0 20px;
	border-top:1px solid #999;
}
.shop-info th {
	display:block;
	text-align:left;
	border-bottom:1px dotted #999;
}
.shop-info td {
	display:block;
	padding:6px 20px 6px 10px;
	line-height:1.5;
	border-bottom:1px solid #999;
}
/* ルート検索ボタン */
div.map-btn ul {
	margin-bottom:0;
}
div.map-btn li {
	width:100%;
	float:none;
	text-align:center;
	font-size:20px;
	font-size:2.0rem;
	margin:0 0 10px;
	margin-right:0;
}
div.map-btn ul li:last-child {
	margin-bottom:0;
}
/* スタッフ体験記 */
aside#staff-note figure {
	float:left;
	width:80px;
	margin-top:-5px;
	padding:10px 10px 10px;
}
aside#staff-note h3 {
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	margin:10px 10px 10px;
}
aside#staff-note div {
	clear:both;
	font-size:14px;
	font-size:1.4rem;
	font-weight:bold;
	margin:0 10px 10px;
}

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