@charset "UTF-8";

* {
	box-sizing: border-box;
}

body {
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  font-size: 16px;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}
a {
	text-decoration: none;
}
a:hover img {
	opacity: 0.8;
}


.slider { /* スライダー・高さは使う画像に合わせて設定 */
	height: 600px;
	width: 100%;
}

/*--------------------------------
ヘッダー部分・ロゴ・サイトタイトル
---------------------------------*/
.header {
	width: 1070px;
	height: 100px;
	margin: 0 auto;
}
.header_logo {
	width: 300px;
	height: 77px;
	float: left;
}
.header_logo img {
	width: 300px;
	height: 80px;
}


/*--------------------------------
メインナビゲーション
---------------------------------*/
.navigation ul {
	list-style: none; /*リストのスタイルを削除*/
	display: flex;
	justify-content: space-around;
	background-color: #ffffff;
  }
  .navigation li {
	width: 25%;
	text-align: center;
  }
  .navigation a {
	padding: 15px 0;
	display: block; /*1つのli全体にリンクを有効にする*/
	text-decoration: none; /*ブラウザ標準のリンク装飾をオフに*/
	color: rgb(204, 170, 108); /*文字色の変更*/
	font-size: 22px; /*フォントサイズの指定*/
	letter-spacing: 5px; /*文字と文字の間隔をあける*/
	font-weight: bold; /*文字の太さを調整*/
  }
.navigation li a:hover {
	color: #818d4e;
}

/*--------------------------------
テキストエリア
---------------------------------*/
.text_wrapper {
	width: 800px;
	margin: 80px auto 80px;
	text-align:　center;
}

.text_wrapper p {
	font-size: 18px;
	line-height: 2.2;
	color: #333;
	text-align:　left;
}


/*--------------------------------
menu
---------------------------------*/
.menu  {
	width: 800px;
	margin: 16px auto 16px;
	text-align:　center;
}
.title {
	margin: 0 auto 24px auto;
	text-align: center;
	font-size: 20px;
	letter-spacing: 10px;
	font-weight: bold;
}
dl.menu{
	width:50%;
	font-size: 1rem;
	}
/* divにflexをかけdtとddを左右に配置しつつ
   position:relativeで点線配置の準備をする */
dl.menu div{
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 5px 0;
	padding: 5px 0;
	}
/* 疑似要素でオブジェクトを生成、positionでdivの上下中央に配置し
   borderで点線を表現する */
dl.menu div::after{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 100%;
	border-bottom: dotted 1px #000;
	}
/* dtとddはz-indexで点線よりも手前にし、なおかつ背景色を付けて点線を隠す */
dl.menu dt{
	margin:0;
	padding: 0 5px 0 0;
	background-color: #ffffff;
	z-index: 4;
	text-align: left;
	}
dl.menu dd{
	margin:0;
	padding: 0 0 0 5px;
	background-color: #ffffff;
	z-index: 4;
	text-align: right;
	}



.cart_btn:hover {
	opacity: .8;
}

table {
	border-collapse: collapse;
	width: 100%;
  }
   
  table,
  td,
  th {
	border: 1px solid #AAAAAA;
	font-size: 16px;
  }
  td,
  th {
	padding: 10px;
  }
  th {
	background-color: rgba(0,0,0,0.1);
  }