@charset "euc-jp";

/* ========== 基本 ========== */
.prd_opt_src{display:none!important;}
.product_image{margin-bottom:0;}

/* ========== 既存の左右カラム（説明/表など）は維持 ========== */
.product_exp{clear:both;padding-top:2em;line-height:1.6;}
.product_info_block{padding-top:2em;}
.product_spec_block{float:left;width:65%;margin-bottom:3em;}
.product_spec_block table{width:100%;}
.product_spec_table{border-top:1px solid #888;}
.product_spec_table th{padding:1em .5em 1em 1em;border-right:1px solid #888;border-bottom:1px solid #888;width:33.333%;}
.product_spec_table td{overflow:hidden;padding:1em 0 1em 1em;border-bottom:1px solid #888;width:66.666%;}
.product_spec_table select{width:90%;}
.product_order_form input{float:left;margin-right:.3em;padding:.3em;width:3em;text-align:right;}
.product_unit{padding:.3em;float:left;}
.product_init{display:none;}
.product_option_table td div{margin-bottom:.5em;}
.product_info_lst{float:right;width:30%;margin-bottom:2em;}
.product_info_lst .icon{margin-bottom:.7em;}
.product_info_lst a{color:#444;text-decoration:none;}
.product_info_lst a:hover{text-decoration:underline;}
.product_review{margin-bottom:1.5em;}
.product_review a{font-weight:bold;}
.social_share{margin-top:1.5em;}
.social_share li{margin-bottom:.5em;}

.product_cart_btn{display:block;margin-top:1em;color:#fff;text-align:center;font-weight:bold;font-size:123.076%;}
.product_addcart_btn{float:left;width:55%;padding:1.2em 0;border:none;border-radius:0;background:#df7676;cursor:pointer;-webkit-appearance:none;}
.product_quick_order_btn{float:right;width:40%;padding:.8em 0;background:#c67f7f;text-decoration:none;}
.product_member_sale_msg{color:#df7676;}
.stock_error{margin:.5em 0;color:#f00;font-weight:bold;font-size:123.076%;line-height:3;}
.trackback_block{clear:both;}
.trackback_url{padding:.5em;width:60%;}
.together_block{clear:both;}

/* ========== ギャラリー（メイン画像＋サムネ） ========== */
/* ここだけで完結するように、旧floatレイアウトを打ち消して新ルールに統一 */
:root{
  --pd-main-pc-max: 640px;   /* PCでのメイン画像の最大幅（好みに合わせて 560–720px などに変更可） */
  --pd-thumb:       72px;    /* モバイルのサムネ一辺 */
  --pd-thumb-pc:    84px;    /* PCのサムネ一辺 */
  --pd-thumb-gap:    8px;    /* サムネ間隔 */
}

/* 旧ルールの打ち消し（メイン/サムネのfloatと固定幅を無効化） */
.product_image_main,
.product_image_thumb{float:none!important;width:auto!important;}
.product_image_thumb li{float:none!important;margin:0!important;width:auto!important;}
.product_image_thumb img{width:auto;height:auto;max-width:100%;}

/* ラッパーは中央寄せ・PCで最大幅制御 */
.pd-gallery{max-width:var(--pd-main-pc-max);margin:0 auto;}
/* メイン画像は常に比率維持で枠にフィット */
.pd-gallery__main,
.product_image_main{display:block;margin:0 auto;width:100%;}
.pd-gallery__main img,
.product_image_main img{display:block;width:100%!important;height:auto!important;max-width:100%!important;}

/* サムネ行：常に横一列。多い時だけ横スク可、少ない時は中央寄せ */
.pd-gallery__thumbs{margin-top:12px;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch;text-align:initial!important;}
.pd-gallery__thumbs ul{
  display:flex!important;flex-wrap:nowrap;gap:var(--pd-thumb-gap);
  width:max-content;margin:0 auto!important;padding:0!important;list-style:none;
  float:none!important;position:static!important;left:auto!important;right:auto!important;
}
.pd-gallery__thumbs li{
  flex:0 0 auto;cursor:pointer;
  width:var(--pd-thumb);height:var(--pd-thumb);
  scroll-snap-align:center;
}
@media (min-width:1024px){
  .pd-gallery__thumbs li{width:var(--pd-thumb-pc);height:var(--pd-thumb-pc);}
}
.pd-gallery__thumbs img{
  display:block;width:100%;height:100%;
  object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-sizing:border-box;
  float:none!important;
}
/* 選択中の強調 */
.pd-gallery__thumbs .current img,
.pd-gallery__thumbs li.is-active img{border-color:#111;box-shadow:0 0 0 1px #111 inset;}

/* =========================
   PC：左右並び（既存の float を維持）
   SP：カラム落ちで2段
   ========================= */

/* コンテナが float を内包できるように（PC時の崩れ防止） */
@media (min-width: 1024px){
  .product_info_block{ display: flow-root; }
}

/* スマホのみ：左右カラムを縦並びに */
@media (max-width: 767.98px){
  .product_spec_block,
  .product_info_lst{
    float: none !important;
    width: 100% !important;
  }
  .product_info_lst{ margin-top: 16px; } /* 2段目に少し間隔 */
}

/* ============================
   オプション表：文字幅に合わせて縮める
   （$option_table 内のテーブルを対象）
   ============================ */

/* テーブル自体を内容幅に。PCでは中央寄せでインライン表示 */
.product_option_table{
  display: inline-block;
  max-width: 100%;
}

/* デフォルトの100%幅を解除して、内容に合わせる */
.product_option_table table{
  width: auto !important;
  table-layout: auto !important;
  border-collapse: collapse;
}

/* 各セルは折り返さず、必要最小幅に */
.product_option_table th,
.product_option_table td{
  white-space: nowrap;
  width: auto !important;
  text-align: left; /* 見やすさ重視で左寄せ */
}

/* セレクトや入力は“自動幅”。既存の幅指定(90%)を上書き */
.product_option_table select,
.product_option_table input,
.product_option_table button{
  width: auto !important;
  max-width: 100%;
}

/* スマホは横スク可能に（潰れ防止） */
@media (max-width: 767.98px){
  .product_option_table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 中身の合計幅を保持して、横にスクロールさせる */
  .product_option_table table{
    width: max-content !important;
    min-width: 100%; /* 少ないときは親幅に合う */
  }
}

/* ============================
   “行ごと指定”版のオプション（product_order_form）
   も文字幅に合わせて縮める
   ============================ */

.product_spec_table tr.product_order_form th,
.product_spec_table tr.product_order_form td{
  white-space: nowrap;
  width: auto !important;
}

/* セレクトのデフォルト90%を無効化し、狭すぎ回避の下限 */
.product_spec_table tr.product_order_form select{
  width: auto !important;
  max-width: 100%;
  min-width: 8em; /* お好みで 6–10em に調整 */
}

/* スマホは必要に応じて横スク（表全体が詰まりすぎないように） */
@media (max-width: 767.98px){
  .product_spec_block{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .product_spec_table{
    width: max-content; 
    min-width: 100%;
  }
}

/* オプション表：位置は「上に・ブロックで」表示、幅は中身に合わせて縮む */
.product_option_table{
  display:block !important;      /* ← 横並びを防止（常に段落扱い） */
  clear:both;                    /* ← 左右カラムの影響を受けない */
  margin:0 0 12px;
  max-width:100%;
}
.product_option_table table{
  width:max-content !important;  /* ← 内容幅に縮む */
  max-width:100%;
  table-layout:auto !important;
}
.product_option_table th,
.product_option_table td{
  white-space:nowrap;
  width:auto !important;
}
.product_option_table select,
.product_option_table input,
.product_option_table button{
  width:auto !important;
  max-width:100%;
}
@media (max-width:767.98px){
  .product_option_table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .product_option_table table{ min-width:100%; } /* 少ないときは親幅に合う */
}

/* === 商品詳細：メイン画像の最大幅を 300px に統一 === */
/* 旧テーマの float/幅指定を無効化し、中央寄せ＋枠は300pxまで */
.product_image_main{
  float: none !important;
  width: 100% !important;
  max-width: 300px !important;
  margin: 0 auto !important;
}

/* ギャラリーを使っている場合も同様にラッパを300pxに */
.pd-gallery,
.pd-gallery__main{
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
}

/* 画像自体は枠内でフィット */
.product_image_main img,
.pd-gallery__main img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ===== 商品詳細：サムネを横並び＋自動折返し（スクロールバー無し） ===== */
:root{
  --pd-thumb-min: 84px;   /* サムネの最小幅（列数の基準） */
  --pd-thumb-gap: 8px;    /* サムネ間のすき間 */
}
@media (max-width: 480px){
  :root{ --pd-thumb-min: 68px; }   /* スマホは少し小さめにして列数を確保 */
}
@media (min-width: 1024px){
  :root{ --pd-thumb-min: 96px; }   /* PCで少し大きく */
}

/* ラッパ：横スクやセンタリングの旧指定を無効化して可視領域に収める */
.pd-gallery__thumbs{
  margin-top: 12px;
  overflow: visible !important;
  text-align: initial !important;
}

/* ULをGrid化：横一列で並べ、幅に応じて自動で折り返す */
.pd-gallery__thumbs ul{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--pd-thumb-min), 1fr));
  gap: var(--pd-thumb-gap);
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;          /* max-content等の旧指定を打ち消し */
  float: none !important;          /* 旧float殺し（保険） */
  position: static !important;     /* 旧positionの影響を排除（保険） */
  left: auto !important;
  right: auto !important;
}

/* 各サムネは正方形の枠におさめる（比率維持で欠けない） */
.pd-gallery__thumbs li{
  aspect-ratio: 1 / 1;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto;                   /* 旧flex指定が残っても形が崩れないよう保険 */
  scroll-snap-align: initial;       /* 旧スナップ指定を無効化（保険） */
}

/* 画像は枠いっぱい・トリミング無し */
.pd-gallery__thumbs img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;               /* 切り抜かない（coverならトリミング） */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-sizing: border-box;
  float: none !important;            /* 旧floatを無効化（保険） */
}

/* 選択中の強調（既存クラスを踏襲） */
.pd-gallery__thumbs .is-active img{
  border-color: #111;
  box-shadow: 0 0 0 1px #111 inset;
}