@charset "UTF-8";



/* ===== SP（<768px）: name → photo → price ===== */
.ItemFirstContainer{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "photo"
    "price";
  gap: 15px;
  width: 100%;
  max-width: 1400px;
  padding: 10px 0 0 0;
  margin: 0 auto;
  box-sizing: border-box;
}

/* SPでは子要素を親グリッドに直接参加させる */
.ItemInfoContainer{ display: contents; }

.ItemNameContainer  { grid-area: name;  padding: 0 10px; }
.ItemPhotoContainer { grid-area: photo; padding-top: 10px; }
.ItemNameContainer {
  grid-area: name;


}

.ItemPriceContainer {
  grid-area: price;
  padding: 10px;
  margin: 0 10px;
  background-color: #fff;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

/* 画像が小さくならないように */
.ItemPhotoContainer img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ===== PC/Tablet（>=768px）: photo ｜ (name+price) ===== */
@media (min-width: 768px){
  .ItemFirstContainer{
    grid-template-columns: 6fr 4fr;   /* 5:5 */
    grid-template-areas: "photo info";
    align-items: start;
  }

  /* 右カラムを“復活”させ、縦積みで間隔調整 */
  .ItemInfoContainer{
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-area: info;
    min-width: 0; /* はみ出し防止 */
  }

  /* PCでは name/price の grid-area を無効化して重なり回避 */
  .ItemNameContainer,
  .ItemPriceContainer{ grid-area: auto; }

  /* 左カラム（写真）を sticky に */
  .ItemPhotoContainer{
    grid-area: photo;
    align-self: start;
    min-width: 0;
    position: sticky;
    top: var(--stickyTop, 16px); /* 固定ヘッダーぶん調整 */
    z-index: 1;
  }
  /*
  .ItemNameContainer{
      background-color: #fff;
       padding: 10px;
  margin: 10px 10px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  }
  */
}























/* =========================================================
   画像ギャラリー
========================================================= */
.ProductGallery {
  display: flex;
  gap: 12px;
  min-width: 0;
}

/* サムネ固定列 */
.ProductGallery__thumbs {
  order: 1;
  flex: 0 0 90px;
  width: 90px;
  min-width: 90px;
  box-sizing: border-box;
  max-height: 70vh;
  overflow-y: auto;
  padding-left: 10px;
}
.ProductGallery__thumbs * {
  min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
}

/* メイン側 */
.ProductGallery__main {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

/* メイン画像 */
.MainPhoto {
  max-width: 600px;
  width: 100%;
  height: auto;
}

/* サムネリスト */
.Thumbnail { list-style:none; margin:0; padding:0; }
.Thumbnail li { margin: 0 0 8px; }
.ThumbBtn {
  display:block; padding:3px; border-radius:5px; box-sizing:border-box;
  border:3px solid #CCC; background:transparent; cursor:pointer;
}
.ThumbBtn.is-active { border:3px solid #FB5A24; padding:3px; }
.ThumbBtn:focus-visible { outline:2px solid #2489ce; outline-offset:-2px; }
.ThumbBtn img { width:55px; height:55px; object-fit:cover; display:block; }

/* ≤1024px：メイン→サムネ縦積み、サムネ横スクロール */
@media (max-width: 1400px) {
  .ProductGallery { flex-direction: column; }
  .ProductGallery__main { order: 1; }
  .ProductGallery__thumbs {
    order: 2;
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    max-height: none;
    overflow-y: visible;
  }
  .Thumbnail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .Thumbnail li { flex: 0 0 auto; margin: 0; }
}













/* =========================
   モーダル内ギャラリー（Remodal版）
   ※ .ProductGallery の設計思想に準拠
   - PC：左＝固定幅（サムネ）／右＝100%
   - SP：メイン→サムネ（横スクロール）
   ========================= */
.RemodalGallery__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 10px;
}

/* 左カラム（サムネ列）：固定幅＋左余白15px（= 100px + 15px） */
.RemodalGallery__thumbs {
  order: 1;
  flex: 0 0 115px;
  width: 115px;
  min-width: 115px;
  padding-left: 15px;
  box-sizing: border-box;
  max-height: 70vh;
  overflow-y: auto;
  white-space: normal !important;
}

/* “縮まない犯人”対策 */
.RemodalGallery__thumbs * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 右カラム（メイン） */
.RemodalGallery__main {
  order: 2;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* メイン画像 */
#ZoomImg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* モーダル内サムネリスト（.Thumbnail と同様の見た目・寸法） */
.ModalThumbnail { list-style: none; margin: 0; padding: 0; }
.ModalThumbnail li { margin: 0 0 8px; }

.ModalThumbBtn {
  display: block;
  padding: 3px;
  border-radius: 5px;
  box-sizing: border-box;
  border: 3px solid #CCC;
  background: transparent;
  cursor: pointer;
}

/* 選択状態はオレンジ枠（= .ThumbBtn.is-active と同一） */
.ModalThumbBtn.is-active {
  border: 3px solid #FB5A24;
  padding: 3px;
}

/* 画像の既存“枠”は無効化 */
.ModalThumbBtn.is-active img {
  outline: none;
  outline-offset: 0;
}

/* キーボードフォーカス可視化 */
.ModalThumbBtn:focus-visible {
  outline: 2px solid #2489ce;
  outline-offset: -2px;
}

/* サムネ画像：55px指定（本体ギャラリーと揃える） */
.ModalThumbBtn img {
  display: block;
  width: 55px;
  height: 55px;
  object-fit: cover;
}

/* 赤文字メッセージ */
#ZoomText { color: #c00; }

/* Prev/Nextボタンの並び */
.RemodalGallery__nav { display: flex; gap: 10px; justify-content: center; }

/* 768px以下：メイン→サムネの縦積み（サムネは横スクロール） */
@media (max-width: 768px) {
  .RemodalGallery__body { flex-direction: column; }

  .RemodalGallery__main { order: 1; }

  .RemodalGallery__thumbs {
    order: 2;
    flex: 1 1 100%;
    width: auto !important;
    max-width: none !important;
    min-width: auto;
    max-height: none;
    overflow-y: visible;
    padding-left: 0;
  }

  .ModalThumbnail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .ModalThumbnail li { flex: 0 0 auto; margin: 0; }
}




/*===================
送料テーブル(From レスポンシブ)
====================*/
  .ShipTblParent {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .ShipTblParent>.ShipTbl {
    list-style: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 85%;
    border-bottom: solid 1px #ccc;
  }

  .ShipTblParent>.ShipTbl>p {
    background: #ededed;
    padding: 5px 0;
  }

  .ShipTblParent>.ShipTbl>div {
    padding: 5px 0;
  }

  .ShipTblParent>.ShipTbl {
    width: 8.3%;
    background: #fff;
    margin: 0%;
  }


  @media screen and (max-width: 800px) {
    .ShipTblParent>.ShipTbl {
      width: 12.5%;
      background: #fff;
      margin: 0%;
    }
  }

  @media screen and (max-width: 700px) {
    .ShipTblParent>.ShipTbl {
      width: 16.6%;
      background: #fff;
      margin: 0%;
    }
  }

  @media screen and (max-width: 400px) {
    .ShipTblParent>.ShipTbl {
      width: 16.6%;
      background: #fff;
      margin: 0%;
    }
  }


  @media only screen and (min-width: 641px) {
    .remodal90 {
      max-width: 90% !important;
    }
  }


/*===================
*同一カテゴリ商品一覧
====================*/
  .cateItemParent {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .cateItemParent>li {
    list-style: none;
    box-sizing: border-box;
    padding: 0;
    padding-bottom: 2px;
    margin: 0;
  }

  .cateItemParent>li {
    width: 22%;
    background: #fff;
    margin: 0 1.5% 20px 1.5%;
  }

  @media screen and (max-width: 600px) {
    .cateItemParent>li {
      width: 47%;
      background: #fff;
      margin: 0 1.5% 20px 1.5%;
    }
  }




/*===================
マルチバリエーション
====================*/

.VarSelector {
  display: flex;
  flex-wrap: wrap;
  /* 横幅いっぱいになったら li 単位で折り返し */
  gap: 16px;
  /* ボタン同士のすき間 */
  margin: 0;
  padding: 0 0 0 0;
}

.VarSelector>li {
  list-style: none;

}

/*ボタンタイプ*/
.SelectBtn-Default {
  border: dashed 1px #ccc;
  padding: 10px 10px;
  text-align: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #000;
  display: inline-block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  max-width: 200px;
  min-width: 0;
  line-height: 1.15;
  font-size: 110%;
}

.SelectBtn-Default:hover {
  border-color: #3794fb;
}

.SelectBtn-Active {
  border: 2px solid #3794fb;
  padding: 10px 10px;
  text-align: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #006dcc;
  display: inline-block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  max-width: 200px;
  min-width: 0;
  line-height: 1.15;
  font-size: 110%;
  position: relative;
  /* ← 基準をここにする */
}

/* 内側 span は基準にしない */
.SelectBtn-Active>span {
  position: static;
}

.SelectBtn-Active::after,
.SelectBtn-Active::before {
  display: block;
  content: '';
  position: absolute;
}

/* 枠付き丸＋チェック */
.SelectBtn-Active::after {
  bottom: -0.4em;
  right: -0.5em;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid #006dcc;
  border-radius: 100%;
}

.SelectBtn-Active::before {
  z-index: 2;
  bottom: -.0em;
  right: -.0em;
  width: 4px;
  height: 9px;
  border: 3px solid #006dcc;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.SelectBtn-Noset {
  position: relative;
  border: solid 1px #eee;
  padding: 10px 10px;
  text-align: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #666;
  background: #eee;
  display: inline-block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  max-width: 200px;
  min-width: 0;
  line-height: 1.15;
  font-size: 110%;
}

.SelectBtn-Noset:hover .variNosetTooltip {
  display: block;
}

.variNosetTooltip {
  position: absolute;
  z-index: 100;
  bottom: 2.5rem;
  left: 0px;
  padding: 6px 3px 6px 10px;
  background: #616161;
  color: #fff;
  font-size: 0.9rem;
  border-radius: 10px;
  transition: 0.5s;
  display: none;
  width: 140px;
}

.variNosetTooltip.ForImage {
  bottom: 6.6rem;
}

.variNosetTooltip:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 16px;
  border: 5px solid transparent;
  border-top: 8px solid #616161;
}

.variNosetTooltip:after {
  border-top-color: #616161;
}



/*写真タイプ*/
.SelectPhotoParent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 15px;
}

.SelectPhotoParent>li {
  list-style: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.SelectPhotoParent>li {
  width: 16.6%;
  background: #fff;
  margin: 0;
}

@media (max-width: 1224px) {
  .SelectPhotoParent>li {
    width: 20%;
    background: #fff;
    margin: 0;
  }
}

@media (max-width: 1024px) {
  .SelectPhotoParent>li {
    width: 25%;
    background: #fff;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .SelectPhotoParent>li {
    width: 24%;
    background: #fff;
    margin: 0.5%;
  }
}

@media (max-width: 500px) {
  .SelectPhotoParent>li {
    width: 33.3%;
    background: #fff;
    margin: 0;
  }
}

.SelectPhoto-Default {
  display: block;
  border: 3px solid #CCC;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #333;
  padding: 3px;
  margin: 5px 0;
}

.SelectPhoto-Default:hover {
  border-color: #3794fb;
}

.SelectPhoto-Active {
  display: block;
  border: 3px solid #3794fb;
  background-color: #3794fb;
  color: #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 3px;
  margin: 5px 0;
}

.SelectPhoto-Active {
  position: relative;
}

.SelectPhoto-Active>span {
  position: relative;
}

.SelectPhoto-Active>span::after,
.SelectPhoto-Active>span::before {
  display: block;
  content: '';
  position: absolute;
}

.SelectPhoto-Active>span::after {
  bottom: -.6em;
  right: -1.1em;
  width: 13px;
  height: 13px;
  background-color: #fff;
  border: 2px solid #3794fb;
  border-radius: 100%;
}

.SelectPhoto-Active>span::before {
  z-index: 2;
  bottom: -.240em;
  right: -.70em;
  width: 3px;
  height: 6px;
  border: 2px solid #1275e3;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.SelectPhoto-Active>span::after {
  bottom: -.6em;
  right: -0.6em;
}

.SelectPhoto-Active>span::before {
  z-index: 2;
  bottom: -.240em;
  right: -.20em;
}

.SelectPhoto-Noset {
  display: block;
  position: relative;
  text-align: center;
  border: 3px solid #eee;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #eee;
  color: #666;
  padding: 3px;
  margin: 5px 0;
}

.SelectPhoto-Noset:hover .variNosetTooltip {
  display: block;
}






/*===================
バリエーションテーブルAJAX用
====================*/
.VariListScrollTbl table {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  border-spacing: 0;
  border-top: solid 1px #CCC;

}
.VariListScrollTbl table thead {
  width: 100%;
  display:table;
}
.VariListScrollTbl table tbody {
  width: 100%;
  display:table;
}
.VariListScrollTbl table thead th{
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    vertical-align: middle;
    text-align:center;
    background-color:#eee;
    font-weight: normal;
    border-bottom: solid 1px #CCC;
    border-left:solid 1px #CCC;

    padding:5px;
}
.VariListScrollTbl table tbody td {
    vertical-align: middle;
    border-bottom: solid 1px #CCC;
    border-left:solid 1px #CCC;
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}
.VariListScrollTbl table thead th.Img,
.VariListScrollTbl table tbody td.Img {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}
.VariListScrollTbl table thead th.Price {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}
.VariListScrollTbl table tbody td.Price {
    text-align: right;
    padding:5px;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}
.VariListScrollTbl table thead th.ItemName,
.VariListScrollTbl table tbody td.ItemName {
  width: 100%;
  min-width: 250px;
}

.VariListScrollTbl table thead th.Variation,
.VariListScrollTbl table tbody td.Variation {
  width: 160px;
  min-width: 130px;
}


.VariListScrollTbl table::-webkit-scrollbar{
  height: 0.8em;
}
.VariListScrollTbl table::-webkit-scrollbar-track{
background: #F1F1F1;
}
.VariListScrollTbl table::-webkit-scrollbar-thumb {
  background-color: #008ffd;
  border-radius: 12px;
  border-radius: 1.2rem;
}
.VariListScrollTbl table::-webkit-scrollbar-thumb:hover{
  background-color: #37a8ff;
}

/*ソート用セクレトメニュー*/
.SelectedTitle{
	position: relative;
	white-space:nowrap;
	overflow:hidden;
}
.SelectBox{position: relative;}
.SelectBox select{
	position: absolute;
	zoom:1.1;
	z-index: 2;
  opacity: 0;
  top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}



/*===================
*その他
====================*/
/*ディスカウント表示 */
.DiscountBox{background: #e7e7e7;border: 1px solid #e7e7e7;padding:5px 0;}/*fbd3b1*/
.DiscountBox .Price{color:#e30505;}
.DiscountBox .FCGray{color:#666;}
/*ディスカウント表示 */
.SaleDiscountBox{
  background:url(/assets/images/item/specialweek_headerbg.png?20170301) repeat-x bottom;
  color:#FFF;
  padding:5px 0;
}
.SaleDiscountBox .Price{color:#FF0;}
.SaleDiscountBox .FCGray{color:#eee;}
.ItemBullet img{max-width:100%;height:auto;object-fit:contain;}