/* 共通テンプレート CSS（全ページで有効） */
@charset "UTF-8";
/* レイアウト基本設定 */
#page-wrapper {
  position: relative;
}
.container {
  max-width: 1050px;
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .container {
    max-width: 900px;
    width: auto;
  }
}
body {
  color: #464e54;
  background-color: #fff;
  background-image: url(https://img.shop-pro.jp/tmpl_img/77/bg.png);
}
/* リンク色 */
a { color: #555555; }
a:hover { color: #888888; }
/* 見出しフォント（明朝体） */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
.font-mincho {
  font-family: 'ヒラギノ明朝 ProN W3','HiraMinProN-W3','ＭＳ Ｐ明朝','MS PMincho',serif;
}
/* ヘッダー周り */
#header-wrapper { 
  margin-bottom: 4em;
}
.header-line-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
}
.header-line-nav .header-link {
  float: right;
}
.header-line-nav a {
  display: inline-block;
  font-size: 12px;
  padding: .6em 1em;
  color: #464e54;
  text-decoration: none;
}
.header-line-nav a:hover { opacity: 0.7; }
.btn-viewcart {
  padding: 1px 15px 0 13px;
}
.shop-name {
  margin: 2em 0 0.3em;
  text-align: center;
  font-size: 24px;
}
.shop-description {
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  color: #464e54;
  margin-bottom: 1.5em;
}
/* グローバルナビ（PC） */
#header-global-nav {
  margin-bottom: 2em;
  text-align: center;
  font-size: 18px;
}
#header-global-nav li {
  display: inline-block;
  margin: 0;
  padding: 0 1.5em;
  border-right: 1px solid #b2a487;
}
#header-global-nav li:first-child {
  border-left: 1px solid #b2a487;
}
/* ナビのドロップダウン（スマホ） */
.header-dropdown {
  display: none;  /* 初期は非表示 */
}
@media (max-width: 768px) {
  .header-dropdown {
    position: absolute;
    top: 0;
    z-index: 200;
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
    background-color: #fff;
    display: block;  /* スマホ時に有効化（※JSで制御予定） */
  }
  .header-dropdown.affix {
    position: fixed;
  }
  .header-dropdown .dropdown-nav li {
    border-bottom: 1px solid #dbdbdb;
    text-align: center;
    list-style: none;
  }
  .header-dropdown .dropdown-nav a {
    display: block;
    padding: 10px;
    color: #464e54;
    text-decoration: none;
  }
  .header-dropdown .btn-dropdown {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6em 1em 0.6em 2.2em;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    background-color: #b2a487;
    border: none;
    cursor: pointer;
  }
  .header-dropdown .btn-dropdown:focus { outline: none; }
  .header-dropdown .btn-dropdown-close {
    text-align: center;
    opacity: 0.7;
  }
  .header-dropdown .btn-dropdown i,
  .header-dropdown .btn-dropdown-close i {
    position: relative;
    top: 0;
    margin-right: .3em;
  }
}
/* カート内案内（送料無料など） */
.incart-delivery {
  float: right;
}
.incart-delivery ul {
  margin: 0;
  padding: 10px 12px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #d9edf7;
  color: #31708f;
  list-style: none;
  font-size: 12px;
}
@media (max-width: 768px) {
  .incart-delivery {
    float: none;
    padding-top: 20px;
  }
}
/* 商品一覧リスト */
.prd-lst-unit {
  float: left;
  width: 33.33%;
  margin-bottom: 60px;
  padding: 0 10px;
  text-align: center;
  box-sizing: border-box;
}
.unit-box {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #b2a487;
  -webkit-box-shadow: 0 1px 4px rgba(25,25,25,0.2);
  box-shadow: 0 1px 4px rgba(25,25,25,0.2);
}
.prd-lst-img {
  display: block;
  margin: 0 auto 1em;
}
.prd-lst-img img {
  max-width: 100%;
  height: auto;
}
.prd-lst-name {
  display: block;
  margin: .3em 0;
  font-size: 14px;
}
.prd-lst-price {
  color: #abaaaa;
}
.prd-lst-regular {
  text-decoration: line-through;
}
.prd-lst-discount {
  color: #b81717;
}
/* スマホ時の商品一覧配置を1カラムに変更 */
@media (max-width: 768px) {
  .prd-lst-unit {
    width: 100%;
    margin-bottom: 30px;
    float: none;
  }
}
/* フッター全体 */
#footer-wrapper {
  padding-top: 3em;
  background: #333;
  color: #fff;
  overflow: hidden;
}
/* フッターナビ（PC） */
.footer-primary {
  float: left;
  width: 50%;
  padding: .3em 0;
  border-right: 1px solid #fff;
}
.footer-secondary {
  float: left;
  width: 50%;
  padding: .3em 0;
  font-size: 12px;
}
.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-primary .footer-nav.freepage-nav {
  margin-right: 10%;
  margin-bottom: 1.5em;
  padding-bottom: .8em;
  border-bottom: 1px solid #fff;
}
.footer-primary .footer-nav.freepage-nav li {
  margin: .8em 0;
}
.footer-primary .footer-nav:last-child li {
  margin: .8em 0;
}
.footer-primary a {
  color: #fff;
  text-decoration: none;
}
.footer-primary a:hover {
  opacity: 0.8;
}
/* フッターセカンダリナビ（PC横並び、ハイフン区切り） */
.footer-secondary ul {
  text-align: center;
}
.footer-secondary li {
  display: inline;
  margin: 0 0 0 10%;
}
.footer-secondary li:before {
  content: "-";
  margin-right: 4px;
  color: #fff;
}
.footer-secondary li:first-child:before {
  content: "";
  margin: 0;
}
.footer-secondary a {
  color: #fff;
  text-decoration: none;
}
.footer-secondary a:hover {
  text-decoration: underline;
}
/* フッターSNSアイコン */
.social-nav {
  text-align: center;
  margin: 2em 0;
}
.social-nav a {
  display: inline-block;
  margin: 0 10px;
  opacity: 0.8;
}
.social-nav a:hover {
  opacity: 1;
}
/* コピーライト */
.copyright {
  padding: 3em 0 2em;
  margin: 0;
  text-align: center;
  font-size: 12px;
}
.powered {
  display: block;
  width: 180px;
  height: auto;
  margin: .5em auto 0;
}
/* アイコン（16pxと24pxの2サイズ、Retina対応） */
.icon-b, .icon-w {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  *display: inline;
  *zoom: 1;
}
.icon-b {
  background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon16_b.png);
}
.icon-w {
  background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon16_w.png);
}
.icon-cart     { background-position: -176px -64px; }
.icon-user     { background-position: -208px -0px; }
.icon-adduser  { background-position: -240px -0px; }
.icon-logout   { background-position: -32px -80px; }
.icon-login    { background-position: -48px -80px; }
.icon-twitter  { background-position: -144px -264px; }
.icon-facebook { background-position: -192px -264px; }
.icon-instagram{ background-position: -168px -288px; }
.icon-mail     { background-position: -96px -0px; }
.icon-youtube  { background-position: -192px -240px; }
/* 24pxアイコン */
.icon-lg-b, .icon-lg-w {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  *display: inline;
  *zoom: 1;
}
.icon-lg-b {
  background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon24_b.png);
}
.icon-lg-w {
  background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon24_w.png);
}
/* 16pxアイコンを2倍解像度画像に対応 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) {
  .icon-b, .icon-w {
    -webkit-background-size: 368px 320px;
    background-size: 368px 320px;
  }
  .icon-lg-b, .icon-lg-w {
    -webkit-background-size: 552px 480px;
    background-size: 552px 480px;
  }
  .icon-b {
    background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon16_2x_b.png);
  }
  .icon-w {
    background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon16_2x_w.png);
  }
  .icon-lg-b {
    background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon24_2x_b.png);
  }
  .icon-lg-w {
    background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon24_2x_w.png);
  }
}
/* 24pxアイコンの種類別ポジション */
.icon-lg-w.icon-cart         { background-position: -264px -96px; }
.icon-lg-w.icon-chevron_up   { background-position: -0px -216px; }
.icon-lg-w.icon-chevron_thin_up { background-position: -192px -216px; }
.icon-lg-w.icon-plus         { background-position: -312px -120px; }
.icon-lg-w.icon-minus        { background-position: -288px -120px; }
@media (max-width: 768px) {
  /* フッター レイアウト（スマホ時縦並び） */
  .footer-primary, .footer-secondary {
    float: none;
    width: 100%;
    padding: 0;
    border: none;
  }
  .footer-nav {
    border-bottom: 3px double #fff;
  }
  .footer-primary .footer-nav:first-child {
    border-top: 3px double #fff;
  }
  .footer-nav li {
    display: block;
    margin: 0;
    font-size: 14px;
    border-top: 1px solid #fff;
  }
  .footer-nav li:first-child {
    border-top: none;
  }
  .footer-nav li:before {
    display: none;
  }
  .footer-nav a {
    display: block;
    padding: 1em;
    color: #fff;
    text-decoration: none;
  }
  .footer-nav a:hover {
    text-decoration: none;
  }
  /* モバイル時アイコンサイズアップ */
  .icon-b, .icon-w {
    width: 24px;
    height: 24px;
    background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon24_b.png);
  }
  .icon-w {
    background-image: url(https://img.shop-pro.jp/tmpl_img/77/icon24_w.png);
  }
  .icon-cart { background-position: -264px -96px; }
  .icon-list { background-position: -288px -144px; }
  .icon-chevron_thin_up { background-position: -192px -216px; }
}

/* --- Fix: スマホのメニュー位置を常に上部固定にする --- */
@media (max-width: 768px) {
  /* メニューのバーを常に最上部に固定 */
  .header-dropdown {
    position: fixed !important; /* affixの有無に関わらず固定 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    border-bottom: 1px solid #dbdbdb;
    background-color: #fff;
  }
  /* メニューは初期状態で閉じる（下に押し出さない） */
  .header-dropdown .dropdown-nav {
    display: none;
    margin: 0;
  }
  /* メニューバーの高さ（だいたいの目安） */
  .header-dropdown .btn-dropdown {
    display: block;
    width: 100%;
    padding: 14px 16px 14px 34px; /* タップしやすい高さ */
    font-size: 16px;
    line-height: 1.4;
  }
  /* バーが固定される分、本文上に余白を作る（JSで実寸に調整） */
  #wrapper {
    padding-top: 56px; /* 初期値、JSで上書きされます */
  }
}