@charset "euc-jp";

/* ========== 基本レイアウト/共通 ========== */
#page-wrapper{position:relative;}
#wrapper{padding-top:1em;}
#container,
.container_02{
  max-width:1300px; margin:0 auto; display:block;
}
#container{padding:1.25rem .625rem;}
.container_02{padding:1.25rem .625rem 0;}
h1,h2{margin:0; padding:0;}
figure{margin:0; padding:0;}
body{color:#464e54; background-color:#fff;}
a{color:#464e54;} a:hover{color:#5e5e5e;}

/* ========== ヒーロー（#WhatsNew） ========== */
#WhatsNew{display:flex; gap:1rem;}
#WhatsNew h1{
  font-size:4.6875rem; line-height:1.1; color:#cc0000; font-weight:700;
  text-shadow:0 1px 2px #330000; text-align:center; margin-top:1.25rem;
}
#WhatsNew h2{font-size:1.875rem; color:#f0f0f0; text-align:center; margin:.625rem 0 1.25rem;}
#WhatsNew h3{
  color:#f0f0f0; font-size:25px; background:#cc0000; width:fit-content; line-height:1.5;
  font-weight:bold; margin:1.25rem auto 0; text-align:center;
}
.online_logo img{width:250px; height:auto;}

/* ========== ヘッダー関連（既存デザイン維持） ========== */
.header_nav li p{margin:0; padding:0;}
.header_nav .p1{display:none;}
#headerlogo img{max-width:none !important;}
.header-link a {
  color: #f0f0f0;
}

/* ========== ボタン/色（カラーミー変数のまま） ========== */
.btn-01{border:1px solid #4d4d4d; background:#4d4d4d; color:#fff;}
.btn-01:hover,.btn-01:focus,.btn-01:active,.btn-01.active,.btn-01.disabled,.btn-01[disabled]{
  border:1px solid #5e5e5e; background:#5e5e5e; color:#fff;
}
.btn-02{border:1px solid #d8d8d8; background:#d8d8d8; color:#4d4d4d;}
.btn-02:hover,.btn-02:focus,.btn-02:active,.btn-02.active,.btn-02.disabled,.btn-02[disabled]{
  border:1px solid #d8d8d8; background:#d8d8d8; color:#4d4d4d;
}
.product-order-num input{border-color:#d8d8d8;}
.google-font{text-transform:uppercase; letter-spacing:2px; font-weight:400; font-family:'Karla',sans-serif;}
.google-font.fwb{font-weight:700;}
.ttl-h2{color:#f0f0f0; font-size:30px; background:#cc0000; width:fit-content; line-height:1.5; font-weight:bold; margin:1.25rem 0 1.25rem .9375rem;}

/* ========== アイコン（FontAwesome/テーマアイコンの復旧） ========== */
#container i[class^="icon-"],
#container i[class*=" icon-"],
#container [class^="icon-"]::before,
#container [class*=" icon-"]::before,
#container .fa,#container .fas,#container .far,#container .fab,
#container .fa-solid,#container .fa-regular,#container .fa-brands{
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands","FontAwesome","colormeicon","colormeshop-icons","icomoon" !important;
  font-style:normal; text-rendering:auto; -webkit-font-smoothing:antialiased;
}
.header_nav li > a i,
#container i[class^="icon-"],#container i[class*=" icon-"]{font-weight:normal !important; letter-spacing:0 !important;}

/* ========== 商品一覧（3カラム） ========== */
.row:before{content:none !important; display:none !important; line-height:initial !important;}
.col{clear:both;}
.prd-lst{display:grid; grid-template-columns:repeat(3,1fr);}
.prd-lst-unit{margin-bottom:60px; text-align:center; float:none !important; width:auto !important;}
.prd_lst_link{display:grid; place-items:center; width:100%;}
.prd-lst-img{display:block; margin:0 auto 1em; width:300px;}
.prd-lst-span{display:block; margin:.3em 0; font-size:12px;}
.prd-lst-name{font-size:16px;}
.prd-lst-name a{color:#f0f0f0;}
.prd-lst-price{color:#f0f0f0; font-size:16px;}
.prd-lst-regular{text-decoration:line-through;}
.prd-lst-discount{color:#b81717;}

/* ========== 商品ページ：2カラム化（画像左/情報右） ========== */
#product form{
  display:grid !important;
  grid-template-areas:
    "gallery title"
    "gallery desc"
    "gallery order"
    "gallery misc";
  column-gap:50px !important;
}
#product .row,#product .col{width:auto !important; float:none !important;}
/* 左：画像 */
#product .product-image{grid-area:gallery; display:grid !important; grid-template-rows:auto auto;}
#product .product-image-main{width:100%; text-align:center;}
#product .product-image-main .mainImage{display:block; height:auto;}
#product .product-image-thumb{width:100% !important;}
#product .product-image-thumb ul{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0; margin:1.875rem 0 0; list-style:none;
}
#product .product-image-thumb li{margin:0;}
#product .product-image-thumb img.thumb{
  width:100%; height:auto; display:block; cursor:pointer; aspect-ratio:1/1; object-fit:contain;
}
#product .product-image-thumb .thumb-active img{outline:2px solid #f00;}
/* 右：タイトル/説明/価格・オプション/諸リンク */
#product h2{grid-area:title; margin:0 0 .5rem; font-size:1.875rem; color:#f0f0f0;}
#product .product-order-exp{
  grid-area:desc; border:none; font-size:16px; color:#f0f0f0;
  padding:1.25rem 2.5rem 0; position:relative; margin-top:10px;
}
#product .product-order-exp::before{
  content:"DETAIL"; display:block; font-weight:700; letter-spacing:.25em; color:#cc0000; margin:0 0 1.25rem;
}
#product .product-order{grid-area:order; margin:0;}
#product .product-info-lst,#product .product-order-spec{grid-area:misc;}
/* 価格 */
#product .product-order-price{gap:12px; display:flex; align-items:baseline; margin:0;}
#product .product-order-price li{margin-left:50px; color:#f0f0f0; letter-spacing:.2rem;}
#product .product-order-spec{width:100%;}
/* オプション（カラー/サイズ）縦並び */
#product .product-option-select .product-option-wrapper{display:flex !important; flex-direction:column !important; gap:12px;}
#product .product-option-select .product-option-unit{float:none !important; position:static !important; left:auto !important;}
#product .product-option-select .product-option-unit > div{display:block !important;}
#product .product-option-select .option-select-name{display:block !important; margin:0 0 6px !important; font-weight:600; color:#f0f0f0;}
#product .product-option-select select{width:100% !important; max-width:100% !important;}
.product-option-select{margin:1.25rem 0 0 50px;}
/* 数量＋カート */
#product .product-order-num{display:flex !important; align-items:center !important; gap:12px; margin:0 !important;}
#product .product-order-num .btn-02{display:none !important;}
#product .product-init-num{font-size:22px !important; text-align:center;}
#product .btn-addcart{
  background:#cc0000 !important; border:none !important; padding:16px 28px !important; height:52px !important;
  display:flex !important; align-items:center; gap:10px; font-size:18px !important; font-weight:700; letter-spacing:.08em; color:#fff !important;
}
#product .btn-addcart .btn-wrap{display:flex; align-items:center; gap:10px;}
#product .btn-addcart i{font-size:20px;}

.incart-delivery ul li {
 color: #f0f0f0;  
}

/* ========== レスポンシブ ========== */
@media (max-width:980px){
  #base_gmoWrapp,#gmo_CMSPbar{overflow:hidden; min-width:100% !important; width:100% !important;}
  .container{max-width:900px; width:90%;}
  #WhatsNew{gap:0;}
}
@media (max-width:768px){
  #wrapper{padding-top:3em;}
  .container{width:auto;}

  /* ヒーロー：縦積み＆ロゴ中央 */
  #WhatsNew{display:block;}
  #WhatsNew .online_logo figure{margin:0; display:flex; justify-content:center; align-items:center;}
  .online_logo img{width:200px;}

  /* 商品一覧は縦並び */
  .prd-lst{display:block;}
  .prd-lst-sort{font-size:14px;}

  /* 商品ページ：1カラム化＋画像中央ズレ対策 */
  #product form{
    grid-template-columns:1fr;
    grid-template-areas:"gallery" "title" "desc" "order" "misc";
    gap:20px;
  }
  #product .product-image{margin:0;}
  #product .product-image-main{display:flex; justify-content:center;}
  #product .product-image-main .mainImage{display:block; margin:0 auto; max-width:100%; height:auto;}
  #product .product-image-thumb img.thumb{width:80px !important;}
  #product .product-image-thumb ul{gap:6px;}

  /* オプション幅 */
  .product-option-select .product-option-unit{width:300px;}

  /* 数量/ボタンを縦積み、ボタンを中央・幅広く */
  #product .product-order-input{flex-direction:column; align-items:flex-start; gap:10px;}
  #product .btn-addcart{justify-content:center; margin-top:1.875rem;}
}

@media (max-width:480px){
  .ttl-h2 span{padding:0 10px; font-size:20px;}
  #product h2{font-size:1.25rem;}
  .prd-lst-unit{margin-bottom:30px; height:auto !important;}
  #product .product-image-thumb img.thumb{width:64px !important;}
  #product .product-order-exp{padding:0;}
  .product-option-select{margin:0;}
  .product-order-input{margin-left:0;}
  #headerlogo {
   padding-left: 8px; 
  }
  .snsicon ul {
   margin-left: 0;
  }
}

/* ========== フッター（既存調整） ========== */
#footer-wrapper{padding-top:3em;}
.footer-primary{border-right:1px solid #e7e7e7; padding:.3em 0;}
.footer-secondary{padding:.3em 0; font-size:12px;}
.footer-nav{list-style:none; margin:0;}
.footer-nav li{margin:.8em 0;}
.powered{display:block; margin:.5em auto 0; width:180px; height:auto;}
#pagetop{position:fixed; right:0; bottom:100px; display:none;}
.btn-pagetop{display:block; padding:.8em .4em .8em .5em; border-radius:3px 0 0 3px;}

/* ── スマホでメイン画像が微妙に左にズレる対策 ───────────────── */
@media (max-width: 768px){

  /* 商品詳細ページのメイン画像の親ごと中央寄せに */
  #product .product-image-main{
    display:block !important;
    width:100% !important;
    padding:0 !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  /* メイン画像そのものの幅は固定しない（以前の 400px を無効化） */
  #product .product-image-main .mainImage{
    width:auto !important;                     /* ←固定幅を外す */
    max-width:min(560px, 100%) !important;     /* 端末幅に合わせて伸縮 */
    height:auto !important;
    margin-inline:auto !important;             /* 完全中央 */
    display:block !important;
  }

  /* トップの「おすすめ商品」カード側も念のため中央固定 */
  .prd_lst_link{ display:flex !important; justify-content:center !important; }
  .prd-lst-img{ display:block !important; margin-inline:auto !important;
                 width:auto !important; max-width:min(560px,100%) !important; }
}

/* PCではそのまま。スマホだけ下固定バーを出す */
@media (max-width: 768px){

  /* まず hidden を解除して使えるように */
  .hidden-phone.header-line-nav { 
    display:block !important;
  }

  /* 既存のリストを下部固定バー化 */
  .header-line-nav {
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:9999;
    background:#111;
    border-top:1px solid #333;
    padding:.35rem .5rem;
  }
  .header-line-nav .inline.pull-right.google-font{
    display:flex; 
    justify-content:space-around; 
    align-items:center; 
    gap:.5rem;
    padding:0;
  }
  .header-line-nav li{ list-style:none; margin:0; flex:1; }
  .header-line-nav a{
    display:flex; 
    flex-direction:column;
    align-items:center; 
    justify-content:center;
    gap:.25rem;
    color:#f0f0f0;
    text-decoration:none;
    font-size:.8rem;
    padding:.2rem 0;
  }
  .header-line-nav a i{
    font-size:1.1rem; 
    font-weight:normal !important; 
    letter-spacing:0 !important;
  }
  
  .menu li a h3,
  .menu li a p {
  	margin:0;
    padding:0;
  }

  /* 下バーが被らないように、ページ下に余白を足す */
  body{ padding-bottom:64px; }
}

/* ===== SP 修正：ハンバーガー＆アカウント列のはみ出し対策 ===== */

/* ハンバーガーを必ず表示して右上に固定 */
@media (max-width: 768px){
  header{ position: relative; }

  /* よくあるクラス名をまとめて上書き（環境差対策） */
  .hamburger,
  nav .hamburger,
  .menu .hamburger,
  .btn-menu,
  .menu-btn{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:fixed !important;
    top:12px; right:12px;
    width:36px; height:36px;
    z-index:2000 !important;
    pointer-events:auto;
  }
  /* 線が透明になって見えない対策（必要なら） */
  .hamburger span,
  .btn-menu span{
    display:block; height:2px; margin:7px 4px;
    background:#f0f0f0 !important;
  }


  /* 既存のアカウント列（ヘッダー右上）はモバイルでは非表示にして、
     下部固定バーに一本化する */
  .hidden-phone.header-line-nav,
  .header-line-nav{ display:none !important; }

  /* SNSアイコンがはみ出さないようにラップ（右上アイコン群の親に .header-right を付ける想定。
     クラス名が無ければ親要素にこのクラスを足してください） */
  .header-right{
    position:absolute;
    right:56px;   /* ハンバーガーの左に退避 */
    top:12px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;                 /* 収まりきらない時は折り返す */
    justify-content:flex-end;
    max-width:65vw;                 /* はみ出し防止 */
  }
  .header-right a{ width:28px; height:28px; display:inline-flex; }

  /* 画面下の固定バー本体 */
  .shop-bottom-bar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:1100;
    display:flex;
    background:#111;
    border-top:1px solid #333;
    -webkit-backdrop-filter:saturate(180%) blur(6px);
            backdrop-filter:saturate(180%) blur(6px);
  }
  .shop-bottom-bar a{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 4px;
    color:#f0f0f0; text-decoration:none;
    font-size:11px; line-height:1;
  }
  .shop-bottom-bar a i{
    width:24px; height:24px;
    display:inline-block;
  }
  .shop-bottom-bar a.cart{
    background:#cc0000; color:#fff; font-weight:700;
  }
  .shop-bottom-bar .bb-count{
    padding:2px 6px; border-radius:999px;
    background:rgba(0,0,0,.35); margin-left:6px;
    font-weight:700;
  }

  /* コンテンツがバーの下に隠れないよう余白を足す */
  body{ padding-bottom:64px; }


 }

/* ===== Mobile Quick Bar ===== */
.mobile-quickbar{
  display:none;                /* デフォルト非表示（PC） */
  position:fixed; left:0; right:0; bottom:0;
  z-index:2000;
  background:#111; border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:max(env(safe-area-inset-bottom),8px);
  display:none;
}
.mobile-quickbar a{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  height:56px;                 /* バーの高さ */
  color:#f0f0f0; text-decoration:none;
  font-weight:700; letter-spacing:.06em; font-size:14px; line-height:1;
}
.mobile-quickbar .cart{ background:#cc0000; color:#fff; }
.mobile-quickbar .qty{
  margin-left:6px; font-weight:800;
  background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:999px;
}

/* カラーミーの白アイコンスプライトを使う */
.mobile-quickbar .icon-w{ width:24px; height:24px; display:inline-block; }

/* スマホでだけ表示 / 上部ナビは非表示の保険 */
@media (max-width: 768px){
  .mobile-quickbar{ display:flex; }
  .header-line-nav{ display:none !important; } /* 既に hidden-phone があるけど保険 */
  /* 本文がバーに隠れないよう下余白を確保したい場合は body に .has-quickbar を付ける */
  body.has-quickbar{ padding-bottom: calc(56px + env(safe-area-inset-bottom) + 8px); }
}

@media (max-width: 768px){
  #headerlogo, .sns-wrap{ flex:0 1 auto; min-width:0; }
  .sns-wrap{ display:flex; gap:6px; flex-wrap:wrap; }
  .sns-wrap img, .sns-wrap a{ max-height:28px; }
}
/* ===== Mobile Quick Bar – 安定版 (収まり&アイコン強制表示) ===== */

/* 基本 */
.mobile-quickbar{
  display:none;               /* PCでは非表示 */
  position:fixed; left:0; right:0; bottom:0;
  z-index:2000;
  background:#111; border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:max(env(safe-area-inset-bottom),8px);
  overflow:hidden;            /* 横スクロール抑止 */
}
.mobile-quickbar a{
  flex:1 1 0;                 /* 4分割固定 */
  min-width:0;                /* ラベルが長くてもはみ出さない */
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  height:56px;
  color:#f0f0f0; text-decoration:none;
  font-weight:700; letter-spacing:.04em; font-size:14px; line-height:1;
}
.mobile-quickbar .cart{ background:#cc0000; color:#fff; }
.mobile-quickbar .qty{
  margin-left:6px; font-weight:800;
  background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:999px;
}

/* ── アイコンが出ない環境向けに、スプライトを quickbar 内で強制 ── */
.mobile-quickbar .icon-w{
  display:inline-block !important;
  width:22px; height:22px;
  background-image:url(https://img.shop-pro.jp/tmpl_img/69/icon16_w.png) !important;
  background-size:368px 320px !important;
  background-repeat:no-repeat;
}
@media only screen and (min-resolution: 2dppx){
  .mobile-quickbar .icon-w{
    background-image:url(https://img.shop-pro.jp/tmpl_img/69/icon16_2x_w.png) !important;
  }
}
/* 位置（ユーザー/新規/ログイン/ログアウト/カート） */
.mobile-quickbar .icon-user   { background-position:-208px   0   !important; }
.mobile-quickbar .icon-adduser{ background-position:-240px   0   !important; }
.mobile-quickbar .icon-login  { background-position:-48px   -80px !important; }
.mobile-quickbar .icon-logout { background-position:-32px   -80px !important; }
.mobile-quickbar .icon-cart   { background-position:-176px  -64px !important; }

/* スマホで表示 */
@media (max-width: 768px){
  .mobile-quickbar{ display:flex; }
  .header-line-nav{ display:none !important; } /* 上部のPC用は隠す（保険） */
  body.has-quickbar{ padding-bottom: calc(56px + env(safe-area-inset-bottom) + 8px); }
}

/* さらに狭い端末は “アイコン上 / テキスト下” 縦積みで確実に収める */
@media (max-width: 480px){
  .mobile-quickbar a{
    flex-direction:column; gap:4px; height:64px;
    font-size:12px; letter-spacing:.02em; text-align:center;
  }
  .mobile-quickbar .cart{ height:64px; }
}
/* === Quickbarアイコンのにじみ/重なり対策 === */

/* スプライトは16px前提。枠を16pxに戻して bleed を防ぐ */
.mobile-quickbar .icon-w,
.mobile-quickbar i[class^="icon-"],
.mobile-quickbar i[class*=" icon-"]{
  display:inline-block !important;
  width:16px !important;
  height:16px !important;
  vertical-align:middle;
  background-repeat:no-repeat !important;
  background-size:368px 320px !important; /* 1xサイズに縮小表示（2xでも同じ） */
}

/* Retinaでも1xサイズとして描画（画像だけ2xに差し替え） */
@media (min-resolution: 2dppx){
  .mobile-quickbar .icon-w,
  .mobile-quickbar i[class^="icon-"],
  .mobile-quickbar i[class*=" icon-"]{
    background-image:url(https://img.shop-pro.jp/tmpl_img/69/icon16_2x_w.png) !important;
    background-size:368px 320px !important;
  }
}

/* テーマのアイコンフォント由来の疑似要素を完全OFF（重なり防止） */
.mobile-quickbar i[class^="icon-"]::before,
.mobile-quickbar i[class*=" icon-"]::before{
  content:none !important;
}

/* スプライト座標（再掲） */
.mobile-quickbar .icon-user   { background-position:-208px   0   !important; }
.mobile-quickbar .icon-adduser{ background-position:-240px   0   !important; }
.mobile-quickbar .icon-login  { background-position:-48px   -80px !important; }
.mobile-quickbar .icon-logout { background-position:-32px   -80px !important; }
.mobile-quickbar .icon-cart   { background-position:-176px  -64px !important; }

/* ===== PCヘッダー：アイコンのにじみ/重なり防止（デスクトップ用） ===== */
@media (min-width: 769px){
  /* 置き場所：ヘッダー右上のアカウント系（既存のクラスに合わせて広めに指定） */
  .header-line-nav .icon-w,
  .header-line-nav i[class^="icon-"],
  .header-line-nav i[class*=" icon-"],
  .header-link .icon-w,
  .view-cart .icon-w{
    display:inline-block !important;
    width:16px !important;
    height:16px !important;
    vertical-align:middle;
    background-repeat:no-repeat !important;
    background-size:368px 320px !important;   /* 1x想定のスプライトサイズに固定 */
  }

  /* フォントアイコン由来の重なりを完全カット */
  .header-line-nav i[class^="icon-"]::before,
  .header-line-nav i[class*=" icon-"]::before,
  .header-link i[class^="icon-"]::before,
  .header-link i[class*=" icon-"]::before,
  .view-cart i[class^="icon-"]::before,
  .view-cart i[class*=" icon-"]::before{
    content:none !important;
  }

  /* Retina でもスプライト画像だけ2xに、表示サイズは16pxキープ */
  @media (min-resolution: 2dppx){
    .header-line-nav .icon-w,
    .header-line-nav i[class^="icon-"],
    .header-line-nav i[class*=" icon-"],
    .header-link .icon-w,
    .view-cart .icon-w{
      background-image:url(https://img.shop-pro.jp/tmpl_img/69/icon16_2x_w.png) !important;
      background-size:368px 320px !important;
    }
  }

  /* ---- スプライト座標（必要なのだけ） ---- */
  .header-line-nav .icon-user,   .header-link .icon-user   { background-position:-208px   0   !important; }
  .header-line-nav .icon-adduser,.header-link .icon-adduser{ background-position:-240px   0   !important; }
  .header-line-nav .icon-login,  .header-link .icon-login  { background-position:-48px   -80px !important; }
  .header-line-nav .icon-logout, .header-link .icon-logout { background-position:-32px   -80px !important; }
  .header-line-nav .icon-cart,   .view-cart  .icon-cart    { background-position:-176px  -64px !important; }
}




@charset "euc-jp";

/* =========================================================
   Base layout / 共通
========================================================= */
#page-wrapper { position: relative; }
#wrapper      { padding-top: 1em; }

#container,
.container_02 {
  max-width: 1300px;
  margin: 0 auto;
  display: block;
}
#container  { padding: 1.25rem .625rem; }
.container_02{ padding: 1.25rem .625rem 0; }

h1, h2 { margin: 0; padding: 0; }
figure { margin: 0; padding: 0; }

body { color: #464e54; background-color: #fff; }
a { color: #464e54; }
a:hover { color: #5e5e5e; }

/* =========================================================
   Hero (#WhatsNew)
========================================================= */
#WhatsNew { display: flex; gap: 1rem; }

#WhatsNew h1{
  font-size: 4.6875rem; line-height: 1.1;
  color: #cc0000; font-weight: 700;
  text-shadow: 0 1px 2px #330000;
  text-align: center; margin-top: 1.25rem;
}
#WhatsNew h2{
  font-size: 1.875rem; color: #f0f0f0;
  text-align: center; margin: .625rem 0 1.25rem;
}
#WhatsNew h3{
  color:#f0f0f0; font-size: 25px; background:#cc0000;
  width: fit-content; line-height: 1.5; font-weight: bold;
  margin: 1.25rem auto 0; text-align: center;
}
.online_logo img{ width: 250px; height: auto; }

/* =========================================================
   Header（既存デザイン維持）
========================================================= */
.header_nav li p { margin:0; padding:0; }
.header_nav .p1  { display:none; }
#headerlogo img  { max-width: none !important; }
.header-link a   { color: #f0f0f0; }



/* =========================================================
   Icon（FontAwesome/テーマアイコン 復旧）
========================================================= */
#container i[class^="icon-"],
#container i[class*=" icon-"],
#container [class^="icon-"]::before,
#container [class*=" icon-"]::before,
#container .fa, #container .fas, #container .far, #container .fab,
#container .fa-solid, #container .fa-regular, #container .fa-brands{
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands",
               "FontAwesome","colormeicon","colormeshop-icons","icomoon" !important;
  font-style: normal; text-rendering: auto; -webkit-font-smoothing: antialiased;
}
.header_nav li > a i,
#container i[class^="icon-"],
#container i[class*=" icon-"]{
  font-weight: normal !important;
  letter-spacing: 0 !important;
}

/* =========================================================
   Buttons / Colors
========================================================= */
.btn-01{
  border:1px solid #4d4d4d;
  background:#4d4d4d;
  color:#fff;
}
.btn-01:hover, .btn-01:focus, .btn-01:active,
.btn-01.active, .btn-01.disabled, .btn-01[disabled]{
  border:1px solid #5e5e5e;
  background:#5e5e5e;
  color:#fff;
}
.btn-02{
  border:1px solid #d8d8d8;
  background:#d8d8d8;
  color:#4d4d4d;
}
.btn-02:hover, .btn-02:focus, .btn-02:active,
.btn-02.active, .btn-02.disabled, .btn-02[disabled]{
  border:1px solid #d8d8d8;
  background:#d8d8d8;
  color:#4d4d4d;
}
.product-order-num input{ border-color: #d8d8d8; }

.google-font{ text-transform:uppercase; letter-spacing:2px; font-weight:400; font-family:'Karla',sans-serif; }
.google-font.fwb{ font-weight:700; }

.ttl-h2{
  color:#f0f0f0; font-size:30px; background:#cc0000; width:fit-content;
  line-height:1.5; font-weight:bold; margin:1.25rem 0 1.25rem .9375rem;
}

/* =========================================================
   商品一覧（3カラム）
========================================================= */
.row:before{ content:none !important; display:none !important; line-height:initial !important; }
.col { clear: both; }

.prd-lst{ display:grid; grid-template-columns:repeat(3,1fr); }
.prd-lst-unit{
  margin-bottom:60px; text-align:center;
  float:none !important; width:auto !important;
}
.prd_lst_link{ display:grid; place-items:center; width:100%; }
.prd-lst-img{ display:block; margin:0 auto 1em; width:300px; }

.prd-lst-span{ display:block; margin:.3em 0; font-size:12px; }
.prd-lst-name{ font-size:16px; }
.prd-lst-name a{ color:#f0f0f0; }
.prd-lst-price{ color:#f0f0f0; font-size:16px; }
.prd-lst-regular{ text-decoration: line-through; }
.prd-lst-discount{ color:#b81717; }

/* =========================================================
   商品ページ：2カラム（画像左 / 情報右）
========================================================= */
#product form{
  display:grid !important;
  grid-template-areas:
    "gallery title"
    "gallery desc"
    "gallery order"
    "gallery misc";
  column-gap:50px !important;
}
#product .row, #product .col{ width:auto !important; float:none !important; }

/* 左：画像 */
#product .product-image{
  grid-area: gallery;
  display:grid !important;
  grid-template-rows: auto auto;
}
#product .product-image-main{ width:100%; text-align:center; }
#product .product-image-main .mainImage{ display:block; height:auto; }

#product .product-image-thumb{ width:100% !important; }
#product .product-image-thumb ul{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:12px; padding:0; margin:1.875rem 0 0; list-style:none;
}
#product .product-image-thumb li{ margin:0; }
#product .product-image-thumb img.thumb{
  width:100%; height:auto; display:block; cursor:pointer;
  aspect-ratio:1/1; object-fit:contain;
}
#product .product-image-thumb .thumb-active img{ outline:2px solid #f00; }

/* 右：タイトル/説明/価格・オプション/諸リンク */
#product h2{
  grid-area:title; margin:0 0 .5rem;
  font-size:1.875rem; color:#f0f0f0;
}
#product .product-order-exp{
  grid-area:desc; border:none; font-size:16px; color:#f0f0f0;
  padding:1.25rem 2.5rem 0; position:relative; margin-top:10px;
}
#product .product-order-exp::before{
  content:"DETAIL";
  display:block; font-weight:700; letter-spacing:.25em;
  color:#cc0000; margin:0 0 1.25rem;
}
#product .product-order{ grid-area:order; margin:0; }
#product .product-info-lst, #product .product-order-spec{ grid-area:misc; }

/* 価格表示 */
#product .product-order-price{
  gap:12px; display:flex; align-items:baseline; margin:0;
}
#product .product-order-price li{
  margin-left:50px; color:#f0f0f0; letter-spacing:.2rem;
}
#product .product-order-spec{ width:100%; }

/* オプション（カラー/サイズ）縦並び */
#product .product-option-select .product-option-wrapper{
  display:flex !important; flex-direction:column !important; gap:12px;
}
#product .product-option-select .product-option-unit{
  float:none !important; position:static !important; left:auto !important;
}
#product .product-option-select .product-option-unit > div{ display:block !important; }
#product .product-option-select .option-select-name{
  display:block !important; margin:0 0 6px !important; font-weight:600; color:#f0f0f0;
}
#product .product-option-select select{ width:100% !important; max-width:100% !important; }
.product-option-select{ margin:1.25rem 0 0 50px; }

/* 数量 + カート */
#product .product-order-num{
  display:flex !important; align-items:center !important; gap:12px; margin:0 !important;
}
#product .product-order-num .btn-02{ display:none !important; }
#product .product-init-num{ font-size:22px !important; text-align:center; }
#product .btn-addcart{
  background:#cc0000 !important; border:none !important; padding:16px 28px !important; height:52px !important;
  display:flex !important; align-items:center; gap:10px; font-size:18px !important;
  font-weight:700; letter-spacing:.08em; color:#fff !important;
}
#product .btn-addcart .btn-wrap{ display:flex; align-items:center; gap:10px; }
#product .btn-addcart i{ font-size:20px; }

.incart-delivery ul li { color:#f0f0f0; }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  #base_gmoWrapp, #gmo_CMSPbar{ overflow:hidden; min-width:100% !important; width:100% !important; }
  .container{ max-width:900px; width:90%; }
  #WhatsNew{ gap:0; }
}

@media (max-width: 768px){
  #wrapper{ padding-top:3em; }
  .container{ width:auto; }

  /* Hero：縦積み＆ロゴ中央 */
  #WhatsNew{ display:block; }
  #WhatsNew .online_logo figure{ margin:0; display:flex; justify-content:center; align-items:center; }
  .online_logo img{ width:200px; }

  /* 一覧は縦並び */
  .prd-lst{ display:block; }
  .prd-lst-sort{ font-size:14px; }

  /* 商品ページ：1カラム化＋画像のズレ対策 */
  #product form{
    grid-template-columns: 1fr;
    grid-template-areas:
      "gallery"
      "title"
      "desc"
      "order"
      "misc";
    gap:20px;
  }
  #product .product-image{ margin:0; }
  #product .product-image-main{ display:flex; justify-content:center; }
  #product .product-image-main .mainImage{
    display:block; margin:0 auto; max-width:100%; height:auto;
  }
  #product .product-image-thumb img.thumb{ width:80px !important; }
  #product .product-image-thumb ul{ gap:6px; }

  /* オプション幅 */
  .product-option-select .product-option-unit{ width:300px; }

  /* 数量/ボタン */
  #product .product-order-input{ flex-direction:column; align-items:flex-start; gap:10px; }
  #product .btn-addcart{ justify-content:center; margin-top:1.875rem; }
  
  
}

@media (max-width: 480px){
  .ttl-h2 span{ padding:0 10px; font-size:20px; }
  #product h2{ font-size:1.25rem; }
  .prd-lst-unit{ margin-bottom:30px; height:auto !important; }
  #product .product-image-thumb img.thumb{ width:64px !important; }
  #product .product-order-exp{ padding:0; }
  .product-option-select{ margin:0; }
  .product-order-input{ margin-left:0; }
  #headerlogo{ padding-left:8px; }
  .snsicon ul{ margin-left:0; }
}

/* ── スマホでメイン画像が微妙に左へズレる対策（保険） ── */
@media (max-width: 768px){
  #product .product-image-main{
    display:block !important; width:100% !important;
    padding:0 !important; margin:0 auto !important; text-align:center !important;
  }
  #product .product-image-main .mainImage{
    width:auto !important; max-width:min(560px, 100%) !important;
    height:auto !important; margin-inline:auto !important; display:block !important;
  }
  .prd_lst_link{ display:flex !important; justify-content:center !important; }
  .prd-lst-img{ display:block !important; margin-inline:auto !important;
                width:auto !important; max-width:min(560px,100%) !important; }
}

/* =========================================================
   Mobile Quick Bar（安定版のみ）
   ※ HTML側で <body class="has-quickbar"> を付けると下余白を自動確保
========================================================= */
.mobile-quickbar{
  display:none;               /* PCでは非表示 */
  position:fixed; left:0; right:0; bottom:0;
  z-index:2000;
  background:#111; border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:max(env(safe-area-inset-bottom),8px);
  overflow:hidden;            /* 横スクロール抑止 */
}
.mobile-quickbar a{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:56px; color:#f0f0f0; text-decoration:none;
  font-weight:700; letter-spacing:.04em; font-size:14px; line-height:1;
}
.mobile-quickbar .cart{ background:#cc0000; color:#fff; }
.mobile-quickbar .qty{
  margin-left:6px; font-weight:800;
  background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:999px;
}

/* スプライト強制（白アイコン） */
.mobile-quickbar .icon-w,
.mobile-quickbar i[class^="icon-"],
.mobile-quickbar i[class*=" icon-"]{
  display:inline-block !important;
  width:16px !important; height:16px !important;
  vertical-align:middle;
  background-repeat:no-repeat !important;
  background-image:url(https://img.shop-pro.jp/tmpl_img/69/icon16_w.png) !important;
  background-size:368px 320px !important;
}
@media (min-resolution: 2dppx){
  .mobile-quickbar .icon-w,
  .mobile-quickbar i[class^="icon-"],
  .mobile-quickbar i[class*=" icon-"]{
    background-image:url(https://img.shop-pro.jp/tmpl_img/69/icon16_2x_w.png) !important;
    background-size:368px 320px !important;
  }
}
/* スプライト座標 */
.mobile-quickbar .icon-user   { background-position:-208px   0; }
.mobile-quickbar .icon-adduser{ background-position:-240px   0; }
.mobile-quickbar .icon-login  { background-position:-48px  -80px; }
.mobile-quickbar .icon-logout { background-position:-32px  -80px; }
.mobile-quickbar .icon-cart   { background-position:-176px -64px; }

/* 表示条件と下余白 */
@media (max-width: 768px){
  .mobile-quickbar { display:flex; }
  body.has-quickbar{ padding-bottom: calc(56px + env(safe-area-inset-bottom) + 8px); }
}
/* 超狭幅は縦積み表示 */
@media (max-width: 480px){
  .mobile-quickbar a{
    flex-direction:column; gap:4px; height:64px;
    font-size:12px; letter-spacing:.02em; text-align:center;
  }
  .mobile-quickbar .cart{ height:64px; }
}

/* =========================================================
   Desktop アイコン（にじみ/重なり防止）
========================================================= */
@media (min-width: 769px){
  .header-line-nav .icon-w,
  .header-line-nav i[class^="icon-"],
  .header-line-nav i[class*=" icon-"],
  .header-link .icon-w,
  .view-cart  .icon-w{
    display:inline-block !important;
    width:16px !important; height:16px !important;
    vertical-align:middle;
    background-repeat:no-repeat !important;
    background-size:368px 320px !important;
  }
  .header-line-nav i[class^="icon-"]::before,
  .header-line-nav i[class*=" icon-"]::before,
  .header-link i[class^="icon-"]::before,
  .header-link i[class*=" icon-"]::before,
  .view-cart i[class^="icon-"]::before,
  .view-cart i[class*=" icon-"]::before{
    content:none !important;
  }
  @media (min-resolution: 2dppx){
    .header-line-nav .icon-w,
    .header-line-nav i[class^="icon-"],
    .header-line-nav i[class*=" icon-"],
    .header-link .icon-w,
    .view-cart  .icon-w{
      background-image:url(https://img.shop-pro.jp/tmpl_img/69/icon16_2x_w.png) !important;
      background-size:368px 320px !important;
    }
  }
  .header-line-nav .icon-user,   .header-link .icon-user   { background-position:-208px   0 !important; }
  .header-line-nav .icon-adduser,.header-link .icon-adduser{ background-position:-240px   0 !important; }
  .header-line-nav .icon-login,  .header-link .icon-login  { background-position:-48px  -80px !important; }
  .header-line-nav .icon-logout, .header-link .icon-logout { background-position:-32px  -80px !important; }
  .header-line-nav .icon-cart,   .view-cart  .icon-cart    { background-position:-176px -64px !important; }
}