:root {
	--global-space: 10vw;				/*サイト内の余白の一括管理用。画面幅100%＝100vwです。*/
}


.product-page-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 20px;
      padding: 20px;
      font-family: Arial, sans-serif;
      color:rgb(9, 1, 1);
      background-color: #f5f5f5;
          padding-left: 25px;
    }
    .product-image-section {
      width: 50%;
    }
    .product-main-image {
      width: 100%;
      height: 500px;
      object-fit: cover;
      border-radius: 8px;
    }
    .product-thumbnails {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    .product-thumbnail {
      width: 100px;
      height: 100px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 4px;
      transition: border 0.3s;
    }
    .product-thumbnail:hover, .product-thumbnail.active {
      border: 2px solid #007bff;
    }
    .product-info-section {
      width: 100%;
      padding-left: 1vw;
      padding-right: 1vw;
     overflow-wrap: break-word;
     word-wrap: break-word;
      box-sizing: border-box;
     } 

    .product-info-section h1 {
      font-size: 24px;
      margin-bottom: 20px;
    }
.product-info-section h2 {
  line-height: 1.3;
  padding: 0.5em 1em; /* 上下にも余白をつける */
  position: relative;
  color: #ffffff;
  display: block;
  width: 100%;
  background: #840d00;
  border-radius: 25px 0 0 25px;
  box-sizing: border-box;
  margin: 5px;
  margin-left: -5px;
}

.product-info-section h2:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

.product-info-section p {
      font-size: 16px;
      line-height: 1.5;
    }
    
.product-price {
      font-size: 20px;
      font-weight: bold;
      color: #e44d26;
      margin: 20px 0;
    }
.product-buy-button {
      background-color: #ff6565;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
 }
.product-buy-button:hover {
      background-color: #f7b8b8;
    }
.itemgrid-container {
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    display: none; 
    grid-template-columns: repeat(auto-fit, minmax(60px, max-content));
    gap: 5px;
    padding: 10px;
    justify-content: center;
 }

.itemcolor-box {
  width: auto;
  max-width: 100%;
  position: relative;
  font-size: 10px;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px;
  transition: opacity 0.2s ease;
  color: #000;
}

.itemcolor-box .overlay-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7); /* 半透明 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #333;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.itemcolor-box.selecting .overlay-select {
  opacity: 1;
  pointer-events: auto;
  outline: 5px solid #4c81eb;
border-radius: 4px;
}

.itemcolor-box.selected {
  opacity: 0.5;
  border: 2px solid #4c81eb;
  outline: 3px solid #4c81eb;
  border-radius: 4px;
}



.select-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.85);
  color: #000;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  z-index: 10;
  cursor: pointer;
}

  .itemcolor-box img {
   display: block;       /* ← インライン要素をブロックに */
   margin: 0 auto;       /* ← 左右中央寄せ */
    height: auto;
  }
    @media (max-width: 768px) {
      .product-page-container {
        flex-direction: column;
      }
      .product-image-section, .product-info-section {
        width: 100%;
      }
      .product-main-image {
        height: 300px;
      }
    }

.product-buy-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

h2 {
  font-size: 16px;
}
 @media (max-width: 450px) {
        :root {
        --global-space: 0vw;
        }
    .product-page-container {
      padding: 10px;
    }
    .product-info-section {
      width: 100%;
      padding-left: 0vw;
      padding-right: 0vw;
     overflow-wrap: break-word;
     word-wrap: break-word;
      box-sizing: border-box;
     }     }


 .toggle-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-start; /* 左寄せにしたい場合 */
  margin-bottom: 5px;
  color:#000;
}

.toggle-buttons button {
  flex: none; /* 必要ならボタン幅調整 */
}


.toggle-btn, .close-btn {
    display: inline;
    padding: 5px 10px;
    margin: 5px;
    background-color: #c2e9db;
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.toggle-btn.active {
  outline: 3px solid rgb(76 70 126);
  border-radius: 4px;
}


.option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
  justify-content: flex-start;
}

.option-image {
  position: relative;
  width: 140px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition: border 0.2s ease;
}

@media (max-width: 450px) {
  #fabric-type-selection .option-image {
  width: 85px;
  }
}

.option-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 0;
  padding: 0;
}

.option-image span {
  display: block;
  font-weight: bold;
  font-size: 12px;
  color:#000;
}

/* 選択中（枠） */
.option-image.selected {
  outline: 5px solid #4c81eb;
  border-radius: 4px;
}

/* 選択前に一度クリックされた（青枠＋選択文字） */
.option-image.selecting {
  opacity: 1;
  pointer-events: auto;
  outline: 5px solid #4c81eb;
border-radius: 4px;
}

.option-image .overlay-select {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 255, 0.7);
  color: white;
  font-weight: bold;
  padding: 4px 0;
  font-size: 13px;
}

/* 初期状態で非表示にする */
.option-section {
  display: none;
}

.option-select {
  background-color: #fefcf8; /* ベージュ系 */
  border: 1px solid #aaa;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: 'Georgia', serif;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' width='20' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
 margin-bottom: 10px;
}


.option-select:hover {
  border-color: #888;
  box-shadow: 0 0 0 2px rgba(180, 140, 88, 0.2);
}

.option-select:focus {
  outline: none;
  border-color: #b48c58;
  box-shadow: 0 0 0 2px rgba(180, 140, 88, 0.4);
}

.color-bar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 6px;
  margin-top: 2px;
}

 /* 三巻カラー */
.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 60px;
  height: auto;
  padding: 4px;
  box-sizing: border-box;
}
.color-swatch::before {
  display:none;
}

.color-swatch.selected {
  opacity: 0.5;
  outline: 5px solid #4c81eb;
  border-radius: 4px;
}
/* ✅ ポップアップ */
#overlay-popup {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 1s ease;
  z-index: 1000;
}

#overlay-popup.show {
  display: block;
}

#overlay-popup.fading-out {
  opacity: 0;
}

#popup-inner {
  position: fixed;
  top: 5%;
  left: 5%;
  right: 5%;
 max-height: 90vh;
  overflow-y: auto;
  background: white;
  padding: 20px;
  box-sizing: border-box;
}
.itemcolor-box {

}

.itemcolor-box {
  max-width: 100%;
  position: relative;
  border-radius: 3px;
  transition: opacity 0.2s ease;
  color: #000;
  width: 60px;
  height: auto;
  font-size: 10px;
  background-color: #f9f9f9;
  display: inline-block;
  cursor: pointer;
}

.itemcolor-box.selected {
  border: 2px solid #4c81eb; /* 赤い選択枠 */
}

#sanmaki-color-grid {
  display: none; 
}

.swatch-label {
  font-size: 11px;
  display: block;
  margin-top: 4px;
  color: #333;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.color-swatch span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #333;
  font-weight: bold;
  text-align: center;
}

.color-swatch.option-image {
  width: auto;  /* ←ここを100%からautoに */
  display: inline-flex;  /* 横並び時の柔軟対応 */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 4px;
}
.color-swatch.option-image::before {
  content: "";
  display: none;
  width: 40px;
  height: 40px;
  background-color: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 4px;
}

.color-swatch.option-image span {
  background-color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
.swatch-box {
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
}
.sortable-ghost {
  opacity: 0 !important;
}

.draggable-option {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 4px 0;
  cursor: grab;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  touch-action: pan-y; 
    width: 60%;
  padding: 8px;
  box-sizing: border-box;
}


.fixed-layer,
.sanmaki-row  {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  touch-action: pan-y;
  width: 100%;
}

.layer-label,
.layer-number {
  width: 50px;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap; 
}

.droppable-slot {
  flex-grow: 1;
  min-height: 60px;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 5px;
}

.select-wrapper {
  flex-grow: 1;
}

.draggable-inner {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.layer-choice {
  display: block !important;
  width: 100%;
  font-size: 14px;
  padding: 6px 10px;
  box-sizing: border-box;
  z-index: 10;
}

.drag-icon {
  margin-left: 2px;
  width: 40px;
  height: 40px;
  opacity: 1;
  flex-shrink: 0;
  cursor: grab;
  background: transparent;
}

.fabric-label {
  margin-top: 5px;
  font-size: 14px;
  color: #333;
}


.itemcolor-box.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(100%);
  position: relative;
}

.itemcolor-box .in-use-tag {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: crimson;
  color: white;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
}

.copy-btn,
.copy-btn-edge {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  display: inline-block;
  padding: calc(0.8rem - 5px) 0.6rem 0.8rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.05em;
  color: #212529;
  background: #b6e0dc;
  border: none;
  border-radius: 0.6rem; /* ← ボタン本体の丸み */
  white-space: nowrap; 
  max-width: 60px;
}

/* 外枠のシャドウ風ボーダー */
.copy-btn::before,
.copy-btn-edge::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  border: 2px solid #000;
  border-radius: 0.6rem; /* ← 外枠の丸み */
  pointer-events: none;
}

/* hover時の変化 */
.copy-btn:hover, 
.copy-btn-edge:hover{
  padding: 0.6rem 0.6rem;
}

.copy-btn:hover::before,
.copy-btn-edge:hover::before {
  top: 0;
  left: 0;
}
.paste-btn,
.paste-btn-edge{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  display: inline-block;
  padding: calc(0.8rem - 5px) 0.3rem 0.8rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.05em;
  color: #212529;
  background: #fbeeba;
  border: none;
  border-radius: 0.6rem; /* ← ボタン本体の丸み */
  white-space: nowrap; 
   max-width: 60px;
}

/* 外枠のシャドウ風ボーダー */
.paste-btn::before,
.paste-btn-edge::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  border: 2px solid #000;
  border-radius: 0.6rem; /* ← 外枠の丸み */
  pointer-events: none;
}

/* hover時の変化 */
.paste-btn:hover,
.paste-btn-edge:hover {
  padding: 0.8rem 1.2rem;
}

.paste-btn:hover::before,
.paste-btn-edge:hover::before {
  top: 0;
  left: 0;
}

.copy-paste-buttons,
.copy-paste-edge-buttons {
  display: flex;
  gap: 1px;  /* ボタン同士の間隔 */
  margin-top: 2px;
  flex-direction: column;  /* ← これで縦並び */
  align-items: stretch;  /* ← これでボタン幅をそろえる */
  width: 80px;  /* 好きな幅に調整 */  
}

.copy-paste-buttons,.copy-paste-edge-buttons button {
  width: 100%;
}

.select-fabric-btn {
  display: inline-block;
  padding: 8px 16px;
  margin: 6px 4px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Georgia', serif;
  color: #ffffff;
  background: linear-gradient(to right, #de6565, #d66b6b);
  border: 1px solid #ccc;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.option-grid.sanmaki-color-grid {
  max-width: 100%; 
  margin: 0 auto;    /* 中央寄せ */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); 
  gap: 1px;
}

.toggle-btn.selected {
  border: 2px solid red;
  background-color: #fff5f5;
}

.drag-handle {
  width: 40%;
  padding: 10px;
  cursor: grab;
  font-weight: bold;
  background-color: #f5f5f5;
  user-select: none;
}


.lead {
  font-weight: bold;
}
.lead-2 {
  font-weight: bold;
  color: #840d00;
}

.saved-selected {
  outline: 2px dashed orange;
  opacity: 0.8;
}


.itemcolor-box.saved-selected::after {
  content: "選択中";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 165, 0, 0.8);
  color: white;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* ✅ 選択後のボタン */
.toggle-btn.saved-selected {
  border: 2px solid orange;
  opacity: 0.8;
}

/* 初期状態で表示される文言 */
.select-note {
  font-size: 0.9em;
  margin-left: 0.5em;
  color: #999;
}

.missing-option-link {
  color: red;
  font-weight: bold;
  text-decoration: none!important; /* ← 下線を消す */
  cursor: pointer;
}

#toggle-sanmaki-btn {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

#custom-remarks {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box;
}



/* モバイル用：タップで表示（JS不要で簡易対応） */
.info-icon:focus .tooltip-text,
.info-icon:active .tooltip-text {
  display: block;
}
.tooltip-text a {
  color: #007BFF; /* 好きな色でOK */
}

.has-tooltip {
  position: relative;
  display: inline;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  cursor: pointer;
  position: relative; /* 吹き出し位置の基準 */
  top: -2px;
    vertical-align: text-bottom; 
}

.info-icon img {
  width: 0.9em;
  height: 0.9em;
  display: block;
  line-height: 1;
  vertical-align: middle;
}

/* 吹き出し本体 */
.tooltip-text {
  position: absolute;
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.6em 0.8em;
  border-radius: 0.5em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  z-index: 100;
  color: black;
}
/* 商品説明 */
.option-description-outside {
  font-size: 16px;
  font-family: 'Georgia', serif;
  color:#840d00
}

/* 1) 2列 → 3列へ（ラベル / コンテンツ / ボタン） */
.fixed-layer,
.sanmaki-row  {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto; /* ★ 3列目を追加 */
  column-gap: 6px;                                  /* ← 追加：列間の余白 */
  align-items: center;
  margin-bottom: 10px;
  touch-action: pan-y;
  width: 100%;
}

/* 2) “カード(セレクトやラベルの塊)”は中央列へ */
.fixed-layer,
.sanmaki-row,
.draggable-option {
  grid-column: 2;      /* ← 真ん中の列 */
  width: 100%;         /* ← 幅指定の衝突を避ける */
  max-width: none;
}

/* 3) コピペボタンは右列へ（edge/normal両対応） */
.copy-paste-buttons,
.copy-paste-edge-buttons,
.copy-paste-buttons-sanmaki {
  grid-column: 3;       /* ← 右列に固定配置 */
  justify-self: start;  /* 自然に左寄せ（必要なら center/end に） */
  display: flex;
  flex-direction: column; /* 縦積み。横並びにしたいなら row */
  gap: 4px;
  margin: 0;
  width: auto;
}

/* 4) ボタン幅（セレクタ誤記の修正版） */
.copy-paste-buttons button,
.copy-paste-edge-buttons button,
.copy-paste-buttons-sanmaki {
  width: 100%;
}