html, body {width: 100%;margin: 0;padding: 0;}

body {
  font-size:15px;
  font-family: 
    "Noto Sans JP",         /* Googleフォント - 読みやすく上品 */
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3",
    "Yu Gothic Medium",
    "メイリオ",
    sans-serif;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #84745E;
  background: #f8f3ea;}

ul,li,dl,dd,dt {padding: 0;margin: 0;list-style: none;}
h1,h2,h3,h4,h5 {padding: 0;margin: 0;list-style: none;}
TD {vertical-align: top;}
a:link , a:visited , a:active {color:#84745E;text-decoration: none;}
a:hover {color:#b5a58d;text-decoration: none;}

img {border: none;}
a:hover img {opacity: 0.7;filter: alpha(opacity=80);}

/* カテゴリー説明 */
.image{width:680px;padding-bottom:24px;display: block;margin-left: auto;margin-right: auto;}
.inner{width:960px;margin:0px auto;}

/* フロート解除用 */
.clear {clear: both;}

/* header */
header {background-color: #543019;}

#site-title {
  display: block;
  text-align: center;
  padding:50px 0;
}

#site-title img {
  width: 200px;
  height: auto;
}

.header-nav {
  background-color: #af9a77;
  text-align: right;
  padding:6px 20px 6px 0;
}

.header-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.header-nav a {
  color: #fff;
  font-weight: bold;
  font-size:14px;
  margin:0 15px;
}

/* 左右カラムの親は1000pxで中央寄せ */
#container{width:1000px;margin:0 auto;padding-top:80px;}


/* 左カラムは左に浮かせる */
#side{width:200px;float:left;}

#menu {
  width: 200px;
  background: #c8b18b;
  margin: 20px 0;
  padding: 10px 0;
}

.menu-title {
  font-size:16px;
  padding: 2px 0 2px 15px;
  color: #a3834f;
  font-weight:bold;
}

.menu-title a {
  font-size:16px;
  color: #a3834f;
  font-weight:bold;
}

#menu li a{
  padding-left:13px;
  font-size:15px;
  color: #fff;
  line-height:2.0;
  font-weight:bold;
}

#menu li a:hover {
  padding-left:13px;
  font-size:15px;
  color: #a3834f;
  line-height:2.0;
  font-weight:bold;
}

.side_nav img{width:200px;height:auto;margin-bottom:8px;}

#search{margin:10px 0;}


/* 右カラムは右に浮かせる */
#main{width:760px;float:right;}

.title{
    width:720px;
    font-size:14px;
    background: #e8dece;
    color: #a3834f;
    border-left: 5px solid #c8b18b;
    margin:40px 0 ;
    font-weight:bold;
    padding: 5px 0 5px 20px;
}

/* フッターも1000pxで中央寄せ */
#footer{width:1000px;padding:30px 0;margin: 0 auto;text-align: center;}

#footer-nav ul {
    display: flex;               /* 子要素を横並びに */
    justify-content: center;   /* 中央寄せ */
    margin: 0;                   /* ul の余白をリセット */
    padding: 0;                  /* ul のパディングをリセット */
}

#footer-nav li a {
    font-weight: bold;
    margin: 0 10px;           /* リンク間のスペース */
}

#footer-nav li:not(:last-child)::after {
    content: "|";          /* | を追加 */
    margin:0 6px;     /* | の右側に間隔 */
}

#copyright {
  text-align: center;
  font-size:14px;
  padding:30px 0;
}


/* パンくずリスト */
#pankuzu{font-size:13px;margin-bottom:24px;}
#pankuzu a{font-size:13px;}
#pankuzu ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap:10px;
  padding: 0;
  margin: 0;
}
#pankuzu li {
  display: flex;
  align-items: center;
}

/* ************************************************ 
 *  商品リスト
 * ************************************************ */
.item-list li {width:160px;margin:8px;vertical-align: top;display: inline-block;*display: inline;*zoom: 1;text-align:center;}
.list_name{font-size:10px;line-height:15px;padding-bottom:5px;}
.list_price {font-weight:bold;color:#996518;}
.item-list_description {color:#b29b8e;}
.item-list img {width: 100%;margin-bottom: 8px;}

.item-list: {clear: both;}

/* ************************************************ 
 *  メインページ
 * ************************************************ */
.list li {width:108px;margin:16px;vertical-align: top;display: inline-block;*display: inline;*zoom: 1;text-align:center;}
.list p{font-size:13px;}
.list_price {font-weight:bold;color:#996518;}
.list_description {color:#b29b8e;}
.list img {width: 100%;margin-bottom: 10px;}

.news3 li {width:220px;display: -moz-inline-box;display: inline-block;/display: inline;/zoom: 1;vertical-align: top;margin: 16px 8px;}

.news2 img , .news3 img , .news4 img{width: 100%;margin-bottom: 8px;}

.news2 p , .news3 p , .news4 p{font-size: 15px;}
.news2 span , .news3 span , .news4 span{font-size: 13px;}

.news3 {clear: both;}

/* フリーページ */
#free li {list-style-type: decimal;margin-left: 50px;}

/* ストックリスト */
.stock {width: 100%;margin: 32px 0;border: 1px #543019 solid;border-collapse: collapse;}
.stock TH {width: 24%;font-size: 14px;font-weight: bold;border: 1px #543019 solid;padding: 8px;background-color: #C8B18B;}
.stock TD {width: 38%;font-size: 14px;border: 1px #543019 solid;background-color: #FFF;padding: 8px;}

/* ************************************************
*  product_option_window
* ************************************************ */
.option_table {margin: 24px 0;border: 1px solid #AFAFB0;}
.option_table th {padding: 10px;border: 1px solid #AFAFB0;background: #D1D1D1;}
.option_table td {padding: 10px;border: 1px solid #AFAFB0;background: #fff;}


/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
  
/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}