@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;}

/* ========== レスポンシブ ========== */
@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:14px;}
  #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;
  }

  /* 下バーが被らないように、ページ下に余白を足す */
  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;
  }
  /* ヘッダー諸要素の重なり順を整理 */
  #header-wrapper, header{ position:relative; z-index:10; }


  /* 既存のアカウント列（ヘッダー右上）はモバイルでは非表示にして、
     下部固定バーに一本化する */
  .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; }
}

/* アイコンフォントが太字で崩れる/別フォントに置き換わるのを抑止（既出ルールを維持） */
#container i[class^="icon-"],
#container i[class*=" icon-"],
#container [class^="icon-"]::before,
#container [class*=" icon-"]::before,
#container .fa, #container .fas, #container .far, #container .fab{
  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;
}
#container i[class^="icon-"],
#container i[class*=" icon-"]{ font-weight:normal !important; letter-spacing:0 !important; }

/* 横スクロール保険 */
html,body{ overflow-x:hidden; }