@charset "UTF-8"; /* エンコードの種類はUTF-8 */

body {
   font-family: "メイリオ", "Hiragino Kaku Gothic Pro", sans-serif; /* ページのフォントはメイリオ(Windows環境)、ヒラギノ角ゴ(macOS環境)、ゴシック系のフォント(それ以外の環境) */
   color: #08090b; /* ページの文字色は黒色(#08090b) */
}

header {
   border-top: 10px solid #c00029; /* 上ボーダーに10px、実線、スカーレット(#c00029)を指定 */
}

footer {
   background-color: #c00029; /* 背景色はスカーレット(#c00029) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   padding: 30px 0; /* 上下30px、左右0pxのパディング */
   text-align: center; /* 内容を中央揃えに */
}

/* サイト名 */
.site-name h1 a {
   color: #c00029; /* 文字色はスカーレット(#c00029) */
   text-decoration: none; /* 下線を削除 */
}

.site-name h1 {
   margin: 50px 0 30px 0; /* 上50px 右0px 下30px 左0pxのマージン */
   text-align: center; /* 内容を中央揃えに */
   font-size: 80px; /* 文字サイズは80px */
   font-family: "Nico Moji"; /* フォントはニコモジ(GoogleFonts) */
   font-weight: normal; /* 太字で表示しない */
}

.site-name p {
   margin-bottom: 30px; /* 下マージンを30px */
   text-align: center; /* 内容を中央揃えに */
   font-size: 28px; /* 文字サイズは28px */
   font-family: "Sawarabi Gothic"; /* フォントはさわらびゴシック(GoogleFonts) */
   font-weight: bold; /* 太字で表示 */
   font-style: oblique; /* 斜体で表示 */
   color: #c00029; /* 文字色はスカーレット(#c00029) */
}

.site-name h1 a span {
   color: #406c49; /* 文字色はグリーン(#406c49) */
}

.site-name p span {
   color: #406c49; /* 文字色はグリーン(#406c49) */
}

/* ナビゲーション */
.menu ul {
   width: 1090px; /* 幅を1090px */
   padding-left: 0; /* 左辺のパディングを0 */
   margin: 0 auto 30px auto; /* 上0px 右auto 下30px 左auto */
   list-style-type: none; /* リストマーカーを消す */
}

.menu ul::after {
   content: ""; /* 空の内容を挿入 */
   display: block; /* ブロックレベル要素にする */
   clear: both; /* フロート解除 */
}

.menu li {
   width: 180px; /* 幅を180px */
   margin-right: 2px; /* 右マージンを2px */
   float: left; /* 左フロート */
   text-align: center; /* 内容を中央揃えに */
}

.menu li:last-child { /* 最後のリスト項目 */
   margin-right: 0; /* 右マージン0 */
}

.menu li a {
   text-decoration: none; /* 下線を削除 */
   background-color: #c00029; /* 背景色はスカーレット(#c00029) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   padding: 10px 0; /* 上下10px、左右0のパディング */
   display: block; /* ブロックレベル要素にする */
}

.menu li a:hover, /* カーソルを乗せた時 */
.menu li a:active { /* クリックした時 */
   background-color: #406c49; /* 背景色はグリーン(#406c49) */
}

/* 商品画像GIFアニメ */
.img-item p {
   text-align: center; /* 内容を中央揃えに */
}

/* ---------- サイドメニュー ---------- */
/* 商品検索 */
.item-search {
   margin-bottom: 30px; /* 下マージンを30px */
}

.item-search h1 {
   margin-top: 0; /* 上マージン0 */
   margin-bottom: 10px; /* 下マージンを10px */
   padding: 10px; /* 4辺に10pxのパディング */
   border-bottom: dotted 2px #f8f1fc; /* 下ボーダーに点線、2px、白色(#f8f1fc)を指定 */
   background-color: #003c88; /* 背景色は青(#003c88) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   font-size: 18px; /* 文字サイズは18px */
}

.item-search p img {
   margin-left: 40px; /* 左マージンを40px */
}

input[type="text"] {
   margin-left: 30px; /* 左マージンを30px */
}

input[type="submit"] {
   width: 90px; /* 幅を90px */
   margin: 5px auto 5px 90px; /* 上5px 右auto 下5px 左90pxのマージン */
   background-color: #003c88; /* 背景色は青(#003c88) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
}

input[type="submit"]:hover, /* カーソルを乗せた時 */
input[type="submit"]:active { /* クリックした時 */
   background-color: #c00029; /* 背景色はスカーレット(#c00029) */
   cursor: pointer; /* カーソルの形をリンクに */
}

/* 商品カテゴリー */
.item-category {
   margin-bottom: 30px; /* 下マージンを30px */
}

.item-category h1 {
   margin-top: 0; /* 上マージン0 */
   margin-bottom: 10px; /* 下マージンを10px */
   padding: 10px; /* 4辺に10pxのパディング */
   border-bottom: dotted 2px #f8f1fc; /* 下ボーダーに点線、2px、白色(#f8f1fc)を指定 */
   background-color: #003c88; /* 背景色は青(#003c88) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   font-size: 18px; /* 文字サイズは18px */
}

.item-category ul {
   margin: 0; /* マージン0 */
   padding: 0; /* パディング0 */
   list-style: none; /* リストマーカーを消す */
}

.item-category li a {
   display: block; /* ブロックレベル要素にする */
   padding: 5px; /* 4辺に5pxのパディング */
   text-indent: 1em; /* 1文字分字下げをする */
   color: #08090b; /* 文字色は黒色(#08090b) */
   font-size: 14px; /* 文字サイズは14px */
   text-decoration: none; /* 下線を削除 */
}

.item-category li a:hover {
   background-color: #003c88; /* 背景色は青(#003c88) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   font-weight: bold; /* 太字で表示 */
}

.category {
   font-weight: bold; /* 太字で表示 */
}

.now-page li {
   background-color: #c00029;
}

.now-page li a {
   color: #f8f1fc;
}

/* ご利用案内 */
.use-guidance {
   margin-bottom: 30px; /* 下マージンを30px */
}

.use-guidance h1 {
   margin-top: 0; /* 上マージン0 */
   margin-bottom: 10px; /* 下マージンを10px */
   padding: 10px; /* 4辺に10pxのパディング */
   border-bottom: dotted 2px #f8f1fc; /* 下ボーダーに点線、2px、白色(#f8f1fc)を指定 */
   background-color: #003c88; /* 背景色は青(#003c88) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   font-size: 18px; /* 文字サイズは18px */
}

.use-guidance ul {
   margin: 0; /* マージン0 */
   padding: 0; /* パディング0 */
   list-style: none; /* リストマーカーを消す */
}

.use-guidance li a {
   display: block; /* ブロックレベル要素にする */
   padding: 5px; /* 4辺に5pxのパディング */
   color: #08090b; /* 文字色は黒色(#08090b) */
   font-size: 14px; /* 文字サイズは14px */
   text-decoration: none; /* 下線を削除 */
}

.use-guidance li a:hover {
   background-color: #003c88; /* 背景色は青(#003c88) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   font-weight: bold; /* 太字で表示 */
}

/* 店舗紹介 */
.store-introduction h1 {
   margin-top: 0; /* 上マージン0 */
   margin-bottom: 10px; /* 下マージンを10px */
   padding: 10px; /* 4辺に10pxのパディング */
   border-bottom: dotted 2px #f8f1fc; /* 下ボーダーに点線、2px、白色(#f8f1fc)を指定 */
   background-color: #003c88; /* 背景色は青(#003c88) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   font-size: 18px; /* 文字サイズは18px */
}
.store-introduction p {
   margin-top: 0; /* 上マージン0 */
   margin-bottom: 20px; /* 下マージンを10px */
}

.site-logo {
   font-size: 20px; /* 文字サイズは20px */
   font-weight: normal; /* 太字で表示しない */
   font-family: "Nico Moji"; /* フォントはニコモジ(GoogleFonts) */
   text-align: center; /* 内容を中央揃えに */
   color: #c00029; /* 文字色はスカーレット(#c00029) */
}

.site-logo span {
   color: #003c88; /* 文字色は青(#003c88) */
}
/* ---------- /サイドメニュー ---------- */

/* ---------- 商品コンテンツ ---------- */
/* 見出し */
article h1 {
   margin-top: 0; /* 上マージン0 */
   margin-bottom: 10px; /* 下マージンを10px */
   padding: 10px; /* 4辺に10pxのパディング */
   border-bottom: dotted 2px #f8f1fc; /* 下ボーダーに点線、2px、白色(#f8f1fc)を指定 */
   background-color: #00569b; /* 背景色はブルー(#00569b) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
   font-size: 18px; /* 文字サイズは18px */
}

/* ランキング更新日 */
.update-date img {
   margin-right: 5px; /* 右マージン5px */
}

/* ランキング中身 */
.item-list-top {
   list-style-type: none;
   width: 630px;
   margin: 0 0 20px;
   overflow: hidden;
}

.item-list-top li {
   width: 150px;
   height: 330px;
   overflow: hidden;
   float: left;
   padding: 3px;
   margin-bottom: 5px;
   border: solid 1px #eee;
}

.item-list-top img {
   display: block;
   margin-bottom: 1em;
}

.item-list-top p {
   line-height: 1.2em;
   padding: 0 0 10px;
}

.item-list-top a {
   font-size: 20px;
   display: block;
   text-align: center;
}

.item-list-top .ranking1,
.item-list-top .ranking2,
.item-list-top .ranking3,
.item-list-top .ranking4,
.item-list-top .ranking-end {
   width: 100%;
   height: 30px;
   overflow: hidden;
   clear: left;
   padding: 0;
   margin-bottom: 5px;
   border: none;
}

.item-list-top .rank-content {
   width: 470px;
   height: 150px;
   overflow: hidden;
   clear: left;
   padding: 0;
   margin-bottom: 5px;
}

.item-list-top .no1 {
   border: solid 5px #ffd700;
}

.item-list-top .no2 {
   border: solid 5px #c0c0c0;
}

.item-list-top .no3 {
   border: solid 5px #c47222;
}

.item-list-top .no4 {
   border: solid 5px #626466;
}

.item-list-top .rank-content .rank-img {
   float: left;
}

.item-list-top .rank-content p {
   color: #08090b;
   font-size: 20px;
   padding-top: 5px;
}

.item-list-top .rank-content .price {
   color: #c00029;
   font-size: 20px;
   padding-top: 10px;
   text-align: center;
}

.item-list-top .rank-content .centering {
   margin-top: 10px;
}

.sub-centering {
   text-align: center;
   margin-bottom: 0;
}

.item-name a {
   text-align: center;
   font-size: 12px;
   color: #08090b;
}

.item-price {
   text-align: center;
   margin-top: 0;
   font-size: 12px;
   color: #c00029;
}

/* ---------- /商品コンテンツ ---------- */

/* 支払・配送・問い合わせ・返品 */
.attention {
   width: 810px; /* 幅を800px */
   margin-left: auto; /* 左マージン auto */
   margin-right: auto; /* 右マージン auto */
   clear: both; /* フロート解除 */
   border-collapse: separate; /* セルごとにボーダーを引く */
   border-spacing: 2px; /* セルのボーダーの間隔を2pxに指定 */
}

.attention td {
   padding: 2px 2px 2px 3px; /* 上2px、右2px、下2px、左3pxのパディング */
}

.tbl-titleA {
   width: 330px; /* 幅を330px */
   height: 30px; /* 高さを30px */
   background-color: #406c49; /* 背景色はグリーン(#406c49) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
}

.tbl-contentA {
   vertical-align: top; /* 内容を上端揃えで表示 */
}

.commission-list {
   width: 200px; /* 幅を200px */
   border-collapse: collapse; /* セルの間隔を無くす */
}

.commission-list td {
   padding: 0; /* パディング0 */
}

.commission-list p {
   text-align: center; /* 内容を中央揃えに */
}

.sub-tbl-titleA {
   width: 80px; /* 幅を80px */
}

.sub-tbl-titleB {
   width: 100px; /* 幅を100px */
}

.sub-tbl-contentA {
   width: 80px; /* 幅を80px */
}

.sub-tbl-contentB {
   width: 70px; /* 幅を70px */
}

.tbl-titleB {
   height: 30px; /* 高さを30px */
   background-color: #406c49; /* 背景色はグリーン(#406c49) */
   color: #f8f1fc; /* 文字色は白色(#f8f1fc) */
}

.tbl-contentB {
   height: 200px; /* 高さを200px */
   vertical-align: top; /* 内容を上端揃えで表示 */
}

/* コピーライト */
.copyright p {
   margin: 0; /* マージン0 */
   font-size: 14px; /* 文字サイズは14px */
}

/* ボックスの上下の間隔 */
#site {
   padding-top: 8px; /* 上辺に8pxのパディング */
   padding-bottom: 8px; /* 下辺に8pxのパディング */
}

#side-bar {
   padding-top: 40px; /* 上辺に40pxのパディング */
   padding-bottom: 30px; /* 下辺に30pxのパディング */
}

#item-contents {
   padding-top: 40px; /* 上辺に40pxのパディング */
   padding-bottom: 30px; /* 下辺に30pxのパディング */
}

#contentsC {
   padding-top: 15px; /* 上辺に15pxのパディング */
   padding-bottom: 15px; /* 下辺に15pxのパディング */
}

/* ------- ウィンドウサイズが599px以下の設定 ------- */
@media (max-width: 599px) {

}
/* ------- /ウィンドウサイズが599px以下の設定 ------- */

/* ------- ウィンドウサイズが600px以上～767px以下の設定 ------- */
@media (min-width: 600px) and (max-width: 767px) {

}
/* ------- /ウィンドウサイズが600px以上～767px以下の設定 ------- */

/* ------- ウィンドウサイズが768px以上の設定 ------- */
@media (min-width: 768px) {
   /* サイドメニューと商品コンテンツを横に並べる設定 */
   #contentsB::after {
      content: ""; /* 空の内容を挿入 */
      display: block; /* ブロックレベル要素にする */
      clear: both; /* フロート解除 */
   }

   #side-bar {
      float: left; /* 左フロート */
      width: 30%; /* 幅を30% */
   }

   #item-contents {
      float: left; /* 左フロート */
      width: 70%; /* 幅を70% */
   }

   /* サイドバーと商品コンテンツの左右の間隔 */
   #side-bar {
      padding-right: 50px; /* 右辺に50pxのパディング */
      box-sizing: border-box; /* 幅の算出にボーダーを含める */
   }
}
/* ------- ウィンドウサイズが768px以上の設定 ------- */

/* ------- ウィンドウサイズが1040px以上の設定 ------- */
@media (min-width: 1040px) {
   #site, #header-nav, #contentsA, #contentsB, #contentsC, #footer-nav {
      width: 1000px; /* 幅を1000px */
      margin-left: auto; /* 左マージン auto */
      margin-right: auto; /* 右マージン auto */
   }
}
/* ------- /ウィンドウサイズが1040px以上の設定 ------- */