/* 雪ぐに パソコン用 */

* {
	box-sizing: border-box;
}

/* 背景色を指定 */

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-image: url(img/snow1.png);
}

/* =============================================== */
/* 外枠を左右中央に配置・横幅・色を指定 */
/* =============================================== */
div#container {
	margin: 0 auto 0 auto;
	width:800px;
	background-color: white;
}

/* =============================================== */
/* タイトルの背景画像・文字色・文字の配置を指定 */
/* =============================================== */

header {
	background-image: url(img/bgpic.png);
	width: 800px;
	height: 280px;
}


h1 {
	font-size: 14px;
	margin-top: 0;
	padding: 1em;
}

#title {
	color: maroon;
	text-align: left;
	line-height: 20px;
}

/* =============================================== */
/* ナビゲーションバーの設定 */
/* =============================================== */

header {

}

nav {

}

nav ul {
	display: flex;
	justfy-content: space-around;
	margin: 0;
	padding: 0;
	list-style-type: none;
	
/*	background-color: #FFD700;*/
}

nav ul li{
	flex: 1;
	text-align: center;
	background-image: url(img/button_nav.png);	/* ナビバーのボタン画像*/
	background-size: cover;
	height: 50px;
}

nav ul li.mobile {
	display: none;
}

nav a {
	display: block;	/* ナビバー全体をボタンにする */
	color: maroon;
	font-weight: bold;
	text-decoration: none;
	line-height: 50px;
}

#nav a:visited {
	color: maroon;
}



/* =============================================== */
/* 文字装飾用 */
/* =============================================== */

.futoji {
	font-weight: bold;
}

.akaji {
	font-weight: bold;
	color: red;
}



/* =============================================== */
/* コンテンツブロック（メインブロックとサイドブロック） */
/* =============================================== */

/* 親要素の設定 */
.contents_block {
	display: flex;
}

/* =============================================== */
/* メインブロックの設定 */
/* =============================================== */

.main_block {
	flex-basis: 75%;
	order: 2;
	background: #FAFAD2;
}

.main_block p {
	padding-left: 2em;
	padding-right: 1em;
	font-size: 100%;
}

a {
	text-decoration: none;
	color: blue;
	font-weight: bold;
}

/* =============================================== */
/* サイドブロック（「サイドバー」と「その他の情報」 */
/* =============================================== */

div.side_block {
	flex-basis: 25%;
	order: 1;
	margin-top: 5px;	/* ナビバーとの間隔を空ける */
	margin-right: 0;
	background: #FFFFEE;
}


/* =============================================== */
/* サイドバーの設定 */
/* =============================================== */

div.side_bar {
	padding: 1px 0;
	text-align: center;
}

ul.side_bar {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.side_bar li {
	width: 98%;
	height: 52px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #FF55FF;
	background-image: url(img/button_side.png);
	background-size: cover;
}

/*オンラインショップ*/

ul.side_bar_shop {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.side_bar_shop li {
	width: 98%;
	height: 52px;
	margin: 5px auto 0;
	text-align: center;
	color: #FF55FF;
	background-image: url(img/button_side2.png);
	background-size: contain;
}

.side_bar a {
	display: block;	/* ナビバー全体をボタンにする */
	color: maroon;
	font-weight: bold;
	line-height: 52px;
	text-decoration: none;
}

/* =============================================== */
/* 「その他の情報」の設定 */
/* =============================================== */

div.information {
	width: 98%;
	margin: 12px auto 8px;
}

div.info_title {
	background-color: #EEEEEE;
	text-align: center;
	padding: 5px 0;
	font-weight: bold;
}

.info_contents p {
	padding-left: 6px;
	font-size: 95%;
}

.link_menu {
	text-align: center;
}

.link_menu {
	text-align: center;
}


/* =============================================== */
/* h2タグの設定 */
/* =============================================== */

h2 {
	font-size: 100%;
	color: maroon;
	background-image: url(img/h2-2.png);
	background-size: cover;
/*h2の見出し文字列を1文字内側へ寄せて、高さを指定*/
	padding: 3px 0 3px 1em;
}

/* =============================================== */
/* フッターの設定 */
/* =============================================== */

footer {
	text-align: center;
	color: white;
	font-size: 80%;
	padding: 6px;
	background-image: url(img/footer.png);
}

footer a {
	color: maroon;
	text-decoration: none;
}

/* =============================================== */
/* 各ページごとの設定 */
/* =============================================== */

/* =============================================== */
/* トップページ */
/* =============================================== */


div.hello {
	text-align: center;
}

div.hello img {
	width: 80%;
}

div.twitter {
	text-align: center;
}


/* =============================================== */
/* 当店のこだわり（page1) */
/* =============================================== */

div.kodawari {
	text-align: center;
}

.kodawari img {
	width: 50%;
}

p.aboutmisa {
	font-size: 95%;
	padding-left: 7em;
	text-indent: -1em;
}


/* =============================================== */
/* お品書き（メニュー） */
/* =============================================== */



table.menu {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
/*	border: solid 1px silver;*/
}

td.name {
	background-image: url(img/b-118.gif);
	background-size: cover;
	text-align: center;
	color: yellow;
}

td.photo {
	width: 30%;
	padding-top: auto;
	padding-bottom: auto;
}

td.price {
	text-align: right;
	width: 18%;
	padding-right: 4px;
}

td.explain {
	padding-left: 1em;
	padding-top: 10px;
	vertical-align: middle;
	font-size: 95%;
}

/* =============================================== */
/* お店の紹介 */
/* =============================================== */

table.staff {
	width: 100%;
/*	background: #FFDBC9;*/
}

table.staff th {
	width: 40%;
}

table.staff td {

}

.staff img {
	width: 90%;
}



/* =============================================== */
/* アクセス */
/* =============================================== */

div.access {
	margin: -6px 6px 6px 6px;
	padding: 6px 1em;
	background-image: url(img/snow2.png)
}

.access table {
	border-collapse: collapse;
	margin-top: 5px;
}

.access th {
	text-align: center;
	font-weight: normal;
	border: solid silver;
	border-width: 1px 2px 1px 0;
	padding-right: 10px;
}

.access td {
	padding: 10px;
	border: solid silver;
	border-width: 1px 0 1px 0;
}

div.map {
	text-align: center;
}



/*====================================*/
/*スマホ用設定*/

@media (max-width: 768px) {
	
	#container {
		max-width: 100%; /* max-widthの制限を解除 */
		width: 100%;
		margin: 0;
	}
	
	header {
		max-width: 100%;  max-widthの制限を解除 
		width: 100%;
		height: 180px; /* 最低の高さを指定 */
		margin: 0;
		background-image: url(img/bgpic3.png);
		background-size: cover;
		background-position: top;
		background-repeat: no-repeat;
		display: flex;
		align-items: flex-start; /* 上に寄せる */
	}
	
	div.twitter {
	text-align: center;
	height: 30px;
}

/*.elfsight-app-f49211fa-1666-4b8b-ae3e-7c72b5995f51 {
  min-width: 600px;
}*/


	nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	nav ul li {
		flex-basis: 50%;
	}
	
	nav ul li.mobile {
		display: block;
	}
	
	
	
	.side_block {
		display: none;
	}
	
	.main_block {
		flex-basis: 100%;
	}
	
	
	.twitter {
		width: 100%;
		height: 300px;
		max-width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.twitter2 {
		width: 100%;
		height: 300px;
		max-width: 100%;
		overflow-y: auto;
		box-sizing: border-box;
	}

	
	div.map {
		text-align: center;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	.map iframe {
		width: 100% !important;
		max-width: 100% !important;
	}
	
}