/************************************************************/
/* Product Section - Third-Eye Fixed Layout                 */
/************************************************************/

.p-product {
  margin-bottom: 10px;
}

/* 共通パーツ設定 */
.p-product select,
.p-product input[type=text] {
 box-sizing: border-box;
 padding: 5px;
 height: 40px;
 border: 1px solid #bfbfbf;
 font-size: 16px;
}

/* メインレイアウト */
.p-product .p-product-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* --- 商品画像エリア --- */
.p-product-img {
  width: 600px; /* Discover標準に戻す場合は530px, 大きめなら600px */
  margin: 0;
}

@media screen and (max-width: 1030px) {
  .p-product .p-product-main {
    display: block;
    width: 100%;
  }
  .p-product .p-product-img {
    width: 600px;
    margin: 0 auto 30px !important;
  }
}

@media screen and (max-width: 767px) {
  .p-product .p-product-img {
    width: 100%!important; 
  }
}

.p-product-img__main-item {
  position: relative;
  text-align: center;
}

.p-product-img__main-item:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.p-product-img__main-item img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- サムネイルリストの復元 --- */
.p-product .p-product-thumb-list {
  display: flex;
  flex-wrap: wrap; /* デスクトップでは折り返し（5個ずつ並ぶ） */
  margin: 8px -4px 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 1030px) {
  .p-product-thumb-list {
    flex-wrap: nowrap; /* タブレット・スマホでは折り返さない */
    overflow-x: auto;  /* 横スクロール */
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
  }
}

.p-product-thumb-list__item {
  box-sizing: border-box;
  width: 20%; /* 5個並び */
  padding: 0 4px;
  margin-bottom: 8px;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.3s;
}

.p-product-thumb-list__item.is-current,
.p-product-thumb-list__item:hover {
  opacity: 0.7;
}

@media screen and (max-width: 1030px) {
  .p-product-thumb-list__item {
    width: 90px;
    margin-bottom: 0;
    padding: 0;
    margin-right: 8px;
  }
}

@media screen and (max-width: 767px) {
  .p-product-thumb-list__item {
    width: 65px; /* スマホである程度の大きさを維持 */
  }
}

.p-product-thumb-list__img {
  position: relative;
  width: 100%;
}
.p-product-thumb-list__img:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.p-product-thumb-list__img img {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}

/* --- 商品情報エリア --- */
.p-product .p-product-info {
  width: 350px;
}

@media screen and (max-width: 1030px) {
/* 商品詳細ページ(.p-product)の中の .p-product-info だけを指定 */
  .p-product .p-product-info {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: block !important; /* 万が一 inline-block 等になっていても解除 */
  }
  
  /* サムネイルエリアの下に罫線を追加 */
  .p-product .p-product-img__thumb {
    border-bottom: 1px solid #ddd; /* 線の太さと色（#dddは薄いグレー） */
    margin-bottom: 20px;           /* 線と商品名の間の余白 */
    padding-bottom: 15px;          /* サムネイルと線の間の余白 */
  }

  /* もしスクロールバーの残骸が残っていたら完全に消す */
  .u-overflow-slide::-webkit-scrollbar {
    display: none !important;
  }
}

/* 以下、既存の価格・ボタン・タグ等の設定（省略せずに維持してください） */
.p-product-info__ttl { margin: 0; font-size: 24px; font-weight: normal; }
.p-product-tags { margin: 10px 0 30px; }
.tag-container { display: flex; flex-wrap: wrap; gap: 8px; }

/* 商品詳細ページのタグボタン：3D立体デザイン */
.p-product .related-group-tag {
  display: none;
  opacity: 0;
  
  /* --- 【凸の状態】ベースのデザイン --- */
  background: #ffffff;      /* 清潔感のある白 */
  border: 1px solid #eee;   /* 境界線はごく薄く */
  padding: 6px 14px;
  font-size: 12px;
  color: #444;              /* 文字色はしっかり */
  text-decoration: none !important;
  border-radius: 6px;
  margin-right: 5px;
  margin-bottom: 8px;
  display: inline-block;
  
  /* 立体感を出す影（外側へ） */
  box-shadow: 0 3px 0 #ddd, 0 4px 6px rgba(0,0,0,0.1);
  
  /* 動きをパッとさせつつ滑らかに（0.2秒） */
  transition: all 0.2s ease;
  position: relative;
  top: 0;
}

/* --- 【凹の状態】ホバー（マウスを乗せた時） --- */
.p-product .related-group-tag:hover {
  background: #f0f0f0 !important;   /* ほんのりグレーに */
  color: #222 !important;           /* 文字も少しクッキリ */
  border-color: #ccc !important;
  
  /* 影を消して、内側に影（inset）を入れることで「凹み」を表現 */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  
  /* 実際に1〜2px下に下げることで「押し込んだ感」を出す */
  top: 2px;
}

/* 価格・オプション */
.p-product-price {
 margin-top: 15px;
 margin-bottom: 25px;
 border-bottom: 1px dotted #ccc;
 padding-bottom: 15px;
}

.p-product-price__sell {
 font-size: 22px;
 font-weight: bold;
 color: #333;
}

.p-product-option-select__box {
 margin-top: 15px;
}

.p-product-option-select__ttl {
 margin-bottom: 8px;
 font-weight: bold;
 font-size: 14px;
}

.p-product-option-select {
 margin-top: 15px;
 margin-bottom: 15px;
}

.p-product-form-stock__input input {
 width: 60px;
}

.p-product-form-stock {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 margin-top: 15px;
 margin-bottom: 15px;
}

/* SNS */
.p-product-sns-list {
 margin-top: 20px;
 display: flex;
 flex-wrap: wrap;
}

.p-product-sns-list__item {
 margin-right: 20px;
}

.section-divider { border: 0; border-top: 2px solid #59594C; margin: 40px 0; }
.p-product-detail { max-width: 1030px; margin: 0 auto; }
.p-product-explain__body { line-height: 2; font-size: 15px; }
.product_cart_select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

@media screen and (max-width: 1030px) {
  /* スクロールエリアの親要素に余白を作る */
  .u-overflow-slide {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px; /* バーを表示するための隙間 */
  }

  /* 1. スクロールバー全体の幅/高さ（常時表示の設定） */
  .u-overflow-slide::-webkit-scrollbar {
    height: 4px; /* バーの太さ */
    display: block; /* 消えないように強制表示 */
  }

  /* 2. スライダー枠の「白」部分（画像赤枠の部分） */
  .u-overflow-slide::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
  }

  /* 3. 現在位置の「グレー」部分（画像青線の部分を再現） */
  .u-overflow-slide::-webkit-scrollbar-thumb {
    background: #ccc; /* 最近チェックした商品のバーの色に合わせる */
    border-radius: 10px;
  }
}

/************************************************************/
/* カートボタンとお気に入りボタン                 */
/************************************************************/
/* カート全体を縦に並べる */
.cart-and-favorite-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px;
  width: 100%;
  margin-bottom: 30px !important; /* 下のSNSボタンとの距離 */
}

/* カートボタンを横いっぱいに */
.cart-main-box {
  width: 100%;
}

/* お気に入りボタンと文字を横に並べる */
.fav-action-set {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
}

/* お気に入りボタンのサイズ固定 */
.btn-favorite-3d-small {
  flex-shrink: 0;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
  box-shadow: 0 4px 0 #bbb, 0 5px 10px rgba(0,0,0,0.1);
  cursor: pointer;
  position: relative;
  top: 0;
  transition: all 0.1s;
}

.btn-favorite-3d-small:active {
  top: 4px;
  box-shadow: none;
}

/* リストを確認の文字 */
.fav-list-mini-link {
  font-size: 13px;
  color: #666;
  text-decoration: underline;
}

/* 下の要素が被らないようにクリア */
.p-product-sns-list {
  clear: both !important;
  margin-top: 20px !important;
}

/*------------------------------------------------------------
  商品詳細ページのスライダー矢印＆グラデーション（じわ〜っと表示・最終完成版）
------------------------------------------------------------*/
@media screen and (min-width: 1031px) {
  .p-product .js-images-slider {
    position: relative !important;
    overflow: hidden;
  }

  /* 矢印ボタン本体 */
  .p-product .js-images-slider .slick-prev,
  .p-product .js-images-slider .slick-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 150px !important;
    height: 80% !important;
    z-index: 100 !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
  }

  /* --- グラデーション用レイヤー (after) --- */
  .p-product .js-images-slider .slick-prev:after,
  .p-product .js-images-slider .slick-next:after {
    content: "" !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0; /* 最初は透明 */
    /* ここで「じわ〜っと」0.8秒かけて表示させる */
    transition: opacity 0.8s ease-out !important;
    z-index: -1;
  }

  /* 左側のグラデーション */
  .p-product .js-images-slider .slick-prev:after {
    background: radial-gradient(ellipse at 0% 50%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 66%) !important;
  }
  /* 右側のグラデーション */
  .p-product .js-images-slider .slick-next:after {
    background: radial-gradient(ellipse at 100% 50%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 66%) !important;
  }

  /* ホバー時にグラデーションをじわ〜っと表示 */
  .p-product .js-images-slider .slick-prev:hover:after,
  .p-product .js-images-slider .slick-next:hover:after {
    opacity: 1 !important;
  }

  /* --- 矢印文字のデザインと位置 --- */
  .p-product .js-images-slider .slick-prev:before,
  .p-product .js-images-slider .slick-next:before {
    display: inline-block !important;
    font-size: 18px !important;
    color: #000 !important;
    font-family: sans-serif !important;
    opacity: 0.25 !important; /* 通常時の薄さ */
    transition: opacity 0.5s ease !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 101 !important;
  }

  /* 矢印の位置（程よい端からの距離） */
  .p-product .js-images-slider .slick-prev:before {
    content: "＜" !important;
    left: 25px !important;
  }
  .p-product .js-images-slider .slick-next:before {
    content: "＞" !important;
    right: 25px !important;
  }

  /* ホバー時に矢印もくっきりさせる */
  .p-product .js-images-slider .slick-prev:hover:before,
  .p-product .js-images-slider .slick-next:hover:before {
    opacity: 0.7 !important;
  }
}

/* スマホ非表示 */
@media screen and (max-width: 1030px) {
  .p-product .js-images-slider .slick-prev,
  .p-product .js-images-slider .slick-next {
    display: none !important;
  }
}