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


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: clamp(40px, 6.3vw, 75px); 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: clamp(21px, 2.1vw, 30px); color: #f0f0f0;
  text-align: center; margin: .625rem 0 1.25rem;
  text-wrap:balance;
}
#WhatsNew h3{
  color:#f0f0f0; font-size: clamp(20px, 2.2vw, 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: 980px){
  .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; }
  
  .menu ul {
    margin: 0;
    padding: 0;
  }
  .menu li a h3 {
   	margin: 0;
    padding: 0;
  }
  .menu li a p {
    margin: 0;
    padding: 0;
  }
  
}

@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: 980px){
  #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: 980px){
  .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: 980px){
  .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; }
}

/* ====== 一覧サムネの高さ統一（比率は保持） ====== */
:root{ --card-img-h:240px; }
.prd-lst-img{
  width:100% !important;
  height:var(--card-img-h) !important;
  object-fit:contain !important;
  display:block; margin:0 auto 1em !important;
  background:transparent;      /* 台紙色を付けたいなら #111 など */
}
@media (min-width:980px){ :root{ --card-img-h:300px; } }

/* アンカーを中央基準に（保険） */
.prd_lst_link{ display:flex !important; justify-content:center !important; }


/* 左：画像カラムの行を“内容サイズ”に固定して伸びないようにする */
#product .product-image{
  display: grid !important;
  grid-template-rows: max-content max-content; /* ←行を内容サイズに */
  align-content: start;   /* ←余白を上に寄せる（行を広げない） */
  align-items: start;     /* 念のため */
  row-gap: 12px;          /* 行間はここで調整 */
}

/* サムネULの上マージンが大きい場合は小さめに（任意） */
#product .product-image-thumb ul{
  margin-top: 8px;  /* 既存の 1.875rem が大きければ上書き */
}



/* --- 商品ページ：画像は左で縦並び、右テキストとの横の空きを詰める --- */

/* 2カラムの骨格：左=画像(最大520px)、右=本文。カラム間は24pxに */
#product form{
  display:grid !important;
  grid-template-columns: minmax(0,520px) 1fr;
  column-gap:24px !important;
  align-items:start;
}

/* 左：画像ブロックを縦積み固定（メイン→サムネ）。余計な float/clear を無効化 */
#product .product-image{
  display:flex !important;
  flex-direction:column !important;
  gap:12px;                 /* メインとサムネの間隔はここで統一 */
}
#product .product-image .col{
  float:none !important;
  clear:none !important;
  width:100% !important;
}

/* メイン画像はそのまま中央 */
#product .product-image-main .mainImage{
  display:block; height:auto; margin:0 auto;
  max-width:100%;
}

/* サムネのUL余白をリセットして詰める（必要なら値を調整） */
#product .product-image-thumb ul{
  margin:0 !important; padding:0 !important;
}

/* 右カラム内の余白が広すぎる場合の保険（必要に応じて外してください） */
#product .product-order-exp{ padding:0 !important; }
#product .product-order-price li{ margin-left:0 !important; }

/* 980px以下は1カラム（既存と同じ挙動） */
@media (max-width:980px){
  #product form{ grid-template-columns:1fr; column-gap:0; }
}



@media (max-width:980px){
  /* サブ画像：左寄せで詰める（Bootstrapの.col癖を殺す） */
#product .product-image-thumb { text-align: left; }

#product .product-image-thumb ul{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;                 /* ここで“間”を決める */
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* li の余白/幅/float をリセット（col-lg-6, col-sm-2などを無効化） */
#product .product-image-thumb ul > li{
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  flex: 0 0 auto;          /* 画像の実寸で並べる */
}

/* 念のため colクラスだけ個別に無効化する保険 */
#product .product-image-thumb ul > li[class^="col"],
#product .product-image-thumb ul > li[class*=" col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  float: none !important;
}

#product .product-image-thumb img.thumb{
  display: block;
  height: auto;
  /* 必要なら固定サイズに： */
  /* width: 96px;  aspect-ratio: 1/1; object-fit: contain; */
}
  
  /* サブ画像（サムネ）を中央揃え */
#product .product-image-thumb ul{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;   /* ← 中央寄せ */
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* col-* の余白/floatを無効化（ズレ防止） */
#product .product-image-thumb ul > li{
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  flex: 0 0 auto;
}
#product .product-image-thumb ul > li[class^="col"],
#product .product-image-thumb ul > li[class*=" col-"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  float: none !important;
}

 .prd-lst{ display:block; }

  /* 画像サイズの固定を解除して拡大 */
  .prd-lst-img{
    width: clamp(360px, 60vw, 720px) !important; /* お好みで上限調整 */
    height: auto !important;                     /* 固定高さを無効化 */
    object-fit: contain !important;
    display: block;
    margin: 0 auto 1em !important;               /* 中央寄せ */
  }

  /* もし --card-img-h を使っていた場合の保険（高さリセット） */
  :root{ --card-img-h: auto; }
}

/* 画像タグ自体の縮小上限の保険（どこでも効く安全策） */
.prd-lst img{
  max-width: 100%;
  height: auto;

}



@media (min-width: 981px){
  /* 左=画像カラムを広げる（値はお好みで） */
  #product form{
    grid-template-columns: minmax(0,500px) 1fr;  /* 640→680/720でも可 */
    column-gap: 24px;
  }
  /* メイン画像をカラムいっぱいに */
  #product .product-image-main .mainImage{
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
  }
}