/* ==========================================================================
   pamphlet-2026.css
   折りパンフレット印刷 LP / stepwise 専用スタイル
   - 折り方5種カード (data-fold)
   - 仕上がりサイズ8種カード (data-colors-val)
   - 用紙6種カード (data-paper-val)
   - 色数バー (両面フルカラー固定 + 他色数導線)
   - ヒーローギャラリーの折り方/サイズ画像連動
   - placeholder 枠 (画像が未用意のセル用)
   tokens-2026.css の var を全面採用。border 1px ライン原則禁止に従う。
   ========================================================================== */

/* ヒーローのレイアウト微調整 ----------------------------------------------- */
.product-lp[data-product="pamphlet"] .pd-gallery__main {
  background: #faf6f1;
  position: relative;
}

.product-lp[data-product="pamphlet"] .pd-gallery__main img {
  transition: opacity .25s ease;
}

/* メイン画像のキャプション (現在何を表示中か) */
.pd-gallery__main-caption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.92);
  color: var(--c-text);
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  pointer-events: none;
  z-index: 2;
}
.pd-gallery__main-caption .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

/* ギャラリーのサムネを写真+サイズ+折り方の3ブロック構造に */
.pd-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.pd-gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #faf6f1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* 仕上がりサイズサムネは「縦横比を維持して全体表示」する (object-fit: contain) */
#pdGallerySizes .pd-gallery__thumb img {
  object-fit: contain !important;
  padding: 8px;
  background: #fff;
}

/* メイン画像も仕上がりサイズ表示時には contain (横長/正方形が崩れないように) */
#pdMainImage {
  background: #faf6f1;
}
#pdMainImage img.is-fit-contain {
  object-fit: contain !important;
  padding: 16px;
  background: #fff;
}

.pd-gallery__thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

.pd-gallery__thumb.is-active {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
}

/* サムネのカテゴリ別ヘッダ */
.pd-gallery__thumbs-block {
  margin-top: 14px;
}

.pd-gallery__thumbs-block:first-child { margin-top: 12px; }

.pd-gallery__thumbs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 6px;
}

.pd-gallery__thumbs-head::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--c-primary);
}

.pd-gallery__thumb-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(38,28,28,.78), rgba(38,28,28,0));
  color: #fff;
  font-size: .62rem;
  font-weight: 600;
  text-align: center;
  padding: 14px 4px 4px;
  line-height: 1.1;
}

/* ----------------------------------------------------------------
   セレクタ全体: pd-options-2 (3軸+補助)
   ---------------------------------------------------------------- */
.pd-options-2026 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.pd-axis {
  background: #fff;
  border-radius: 8px;
  padding: 14px 14px 12px;
  box-shadow: 0 1px 0 rgba(140, 90, 90, .04), 0 0 0 1px rgba(180, 140, 140, .07);
}

.pd-axis--primary {
  background: linear-gradient(180deg, #fbf6f1 0%, #fff 100%);
  box-shadow: 0 1px 0 rgba(140, 90, 90, .06), 0 0 0 1px rgba(199, 139, 139, .14);
}

.pd-axis__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
}

.pd-axis__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px; height: 22px;
  padding: 0 8px;
  background: var(--c-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
}

.pd-axis__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
}

.pd-axis__hint {
  margin-left: auto;
  font-size: .76rem;
  color: var(--c-text-muted);
}

.pd-axis__current {
  font-size: .82rem;
  color: var(--c-primary-ink);
  font-weight: 600;
}

/* ----------------------------------------------------------------
   折り方カード (5種)
   data-fold-cards 親 / data-fold + data-fold-group 子
   ---------------------------------------------------------------- */
.pd-fold-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.pd-fold-card {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 6px 8px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 0 0 1px rgba(180, 140, 140, .12);
}

.pd-fold-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.06), 0 0 0 1px rgba(180, 140, 140, .16);
}

.pd-fold-card.is-active {
  background: linear-gradient(180deg, #fff 0%, #fef4ef 100%);
  box-shadow: 0 0 0 2px var(--c-primary), 0 4px 12px rgba(199, 139, 139, .18);
}

.pd-fold-card__visual {
  aspect-ratio: 1 / 1;
  background: #f9f5f0 center/contain no-repeat;
  border-radius: 4px;
  display: block;
}

.pd-fold-card__name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.25;
}

.pd-fold-card__group {
  font-size: .65rem;
  color: var(--c-text-muted);
  font-weight: 500;
}

.pd-fold-card__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--c-primary);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
  z-index: 2;
}

.pd-fold-card[disabled],
.pd-fold-card[aria-disabled="true"] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.pd-fold-card__visual[data-fold="2tu"]      { background-image: url(/img/product/oripamp/2tuori.webp), url(/img/product/oripamp/2tuori.jpg); }
.pd-fold-card__visual[data-fold="maki3tu"]  { background-image: url(/img/product/oripamp/maki3tu.webp), url(/img/product/oripamp/maki3tu.jpg); }
.pd-fold-card__visual[data-fold="soto3tu"]  { background-image: url(/img/product/oripamp/soto3tu.webp), url(/img/product/oripamp/soto3tu.jpg); }
.pd-fold-card__visual[data-fold="soto4tu"]  { background-image: url(/img/product/oripamp/soto4tu.webp), url(/img/product/oripamp/soto4tu.jpg); }
.pd-fold-card__visual[data-fold="kannon"]   { background-image: url(/img/product/oripamp/kannnon.webp), url(/img/product/oripamp/kannnon.jpg); }

/* ----------------------------------------------------------------
   仕上がりサイズカード (8種)
   data-colors-cards 親 (price-common 互換) / data-colors-val 子
   ---------------------------------------------------------------- */
.pd-size-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pd-size-card {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 6px 8px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 0 0 1px rgba(180, 140, 140, .12);
}

.pd-size-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.06), 0 0 0 1px rgba(180, 140, 140, .16);
}

.pd-size-card.is-active {
  background: linear-gradient(180deg, #fff 0%, #fef4ef 100%);
  box-shadow: 0 0 0 2px var(--c-primary), 0 4px 12px rgba(199, 139, 139, .18);
}

.pd-size-card__visual {
  aspect-ratio: 1 / 1;
  background: #f9f5f0 center/contain no-repeat;
  border-radius: 4px;
  display: block;
}

.pd-size-card__name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
  margin-top: 2px;
}

.pd-size-card__dim {
  font-size: .64rem;
  color: var(--c-text-muted);
  font-weight: 500;
}

.pd-size-card__visual[data-size="hosonaga"] { background-image: url(/img/product/oripamp/s-hosonaga.webp), url(/img/product/oripamp/s-hosonaga.jpg); }
.pd-size-card__visual[data-size="seihokei"] { background-image: url(/img/product/oripamp/s-seihoukei.webp), url(/img/product/oripamp/s-seihoukei.jpg); }
.pd-size-card__visual[data-size="cd"]       { background-image: url(/img/product/oripamp/s-cd.webp), url(/img/product/oripamp/s-cd.jpg); }
.pd-size-card__visual[data-size="a6"]       { background-image: url(/img/product/oripamp/s-a6.webp), url(/img/product/oripamp/s-a6.jpg); }
.pd-size-card__visual[data-size="a5"]       { background-image: url(/img/product/oripamp/s-a5.webp), url(/img/product/oripamp/s-a5.jpg); }
.pd-size-card__visual[data-size="a4"]       { background-image: url(/img/product/oripamp/s-a4.webp), url(/img/product/oripamp/s-a4.jpg); }
.pd-size-card__visual[data-size="b6"]       { background-image: url(/img/product/oripamp/s-b6.webp), url(/img/product/oripamp/s-b6.jpg); }
.pd-size-card__visual[data-size="b5"]       { background-image: url(/img/product/oripamp/s-b5.webp), url(/img/product/oripamp/s-b5.jpg); }

/* ----------------------------------------------------------------
   色数バー (両面フルカラー固定 + 他色数はお問い合わせ)
   ---------------------------------------------------------------- */
.pd-colors-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pd-colors-bar__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #ffe2da 0%, #fff 60%);
  border-radius: 999px;
  font-weight: 700;
  color: var(--c-primary-ink);
  font-size: .88rem;
  box-shadow: 0 0 0 1px rgba(199, 139, 139, .22);
}

.pd-colors-bar__pill::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: conic-gradient(#ec5f7a, #f6c660, #5fc9a0, #5db1e8, #b87cd1, #ec5f7a);
  box-shadow: inset 0 0 0 2px #fff;
}

.pd-colors-bar__note {
  font-size: .76rem;
  color: var(--c-text-muted);
}

.pd-colors-bar__alt {
  margin-left: auto;
  font-size: .78rem;
  color: var(--c-primary-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pd-colors-bar__alt:hover {
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
   用紙カード (6種ビジュアル差別化)
   ---------------------------------------------------------------- */
.pd-paper-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pd-paper-card {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 0 0 1px rgba(180, 140, 140, .12);
  position: relative;
}

.pd-paper-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.06), 0 0 0 1px rgba(180, 140, 140, .16);
}

.pd-paper-card.is-active {
  background: linear-gradient(180deg, #fff 0%, #fef4ef 100%);
  box-shadow: 0 0 0 2px var(--c-primary), 0 4px 12px rgba(199, 139, 139, .18);
}

.pd-paper-card__swatch {
  height: 56px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.pd-paper-card__swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
}

.pd-paper-card__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pd-paper-card__name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
}

.pd-paper-card__sub {
  font-size: .68rem;
  color: var(--c-text-muted);
  font-weight: 500;
}

.pd-paper-card__use {
  font-size: .72rem;
  color: var(--c-primary-ink);
  font-weight: 600;
  margin-top: auto;
}

/* 用紙ビジュアル: 数字が大きい=厚みあり、コート=光沢、マットコート=抑えた光沢、上質=サラ */
.pd-paper-card__swatch[data-paper="coat90"] {
  background: linear-gradient(135deg, #fdfcfa 0%, #f5f1eb 100%);
}
.pd-paper-card__swatch[data-paper="coat90"]::before {
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%);
}

.pd-paper-card__swatch[data-paper="coat135"] {
  background: linear-gradient(135deg, #fdfcfa 0%, #ece6dd 100%);
}
.pd-paper-card__swatch[data-paper="coat135"]::before {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70%);
}
.pd-paper-card__swatch[data-paper="coat135"]::after {
  border-top: 5px solid rgba(0, 0, 0, .04);
  border-bottom: 5px solid rgba(0, 0, 0, .06);
  border-radius: 4px;
}

.pd-paper-card__swatch[data-paper="matcoat90"] {
  background: linear-gradient(135deg, #f7f3ec 0%, #ece5d8 100%);
}
.pd-paper-card__swatch[data-paper="matcoat90"]::before {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
}

.pd-paper-card__swatch[data-paper="matcoat135"] {
  background: linear-gradient(135deg, #f5efe5 0%, #e2d9c8 100%);
}
.pd-paper-card__swatch[data-paper="matcoat135"]::before {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
}
.pd-paper-card__swatch[data-paper="matcoat135"]::after {
  border-top: 5px solid rgba(0, 0, 0, .05);
  border-bottom: 5px solid rgba(0, 0, 0, .07);
  border-radius: 4px;
}

.pd-paper-card__swatch[data-paper="mat90"] {
  background:
    repeating-linear-gradient(0deg, rgba(190,170,140,.1) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #fbf8f2 0%, #f0e9da 100%);
}

.pd-paper-card__swatch[data-paper="mat110"] {
  background:
    repeating-linear-gradient(0deg, rgba(170,150,120,.13) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #f9f5ec 0%, #ebe0c9 100%);
}
.pd-paper-card__swatch[data-paper="mat110"]::after {
  border-top: 5px solid rgba(0, 0, 0, .05);
  border-bottom: 5px solid rgba(0, 0, 0, .07);
  border-radius: 4px;
}

/* ----------------------------------------------------------------
   用紙ガイド (paper-guide) の thumb に画像 TODO 提案を重ねる
   ---------------------------------------------------------------- */
.paper-guide__thumb { position: relative; }
.paper-guide__thumb__todo {
  position: absolute;
  inset: 8px;
  z-index: 3;
  padding: 8px 10px;
  background: rgba(255,255,255,.92);
  color: #6e5544;
  font-size: 10px;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-image: repeating-linear-gradient(45deg, rgba(176,136,104,.05) 0 8px, transparent 8px 16px);
}
.paper-guide__thumb__todo .ph-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--c-primary, #c78b8b);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
}
.paper-guide__thumb__todo .ph-desc {
  font-size: 10.5px;
  line-height: 1.45;
  color: #5b4636;
  margin: 0;
}
.paper-guide__thumb__todo .ph-desc strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  color: #b14f6a;
  font-weight: 700;
}

/* ----------------------------------------------------------------
   placeholder 枠 (画像が未用意のセルで表示)
   ---------------------------------------------------------------- */
.img-todo {
  position: relative;
  background:
    repeating-linear-gradient(45deg, #f5e6da 0 8px, #fbf2ea 8px 16px);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  color: #8a6f5d;
  min-height: 60px;
}

.img-todo__icon {
  font-size: 1rem;
  margin-bottom: 2px;
}

.img-todo__label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b08868;
}

.img-todo__spec {
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.2;
  color: #6e5544;
  margin-top: 2px;
}

/* ----------------------------------------------------------------
   タブレット以下のレスポンシブ
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
  .pd-fold-cards { grid-template-columns: repeat(3, 1fr); }
  .pd-fold-cards .pd-fold-card:nth-child(4),
  .pd-fold-cards .pd-fold-card:nth-child(5) { grid-column: span 1; }
  .pd-size-cards { grid-template-columns: repeat(4, 1fr); }
  .pd-paper-cards { grid-template-columns: repeat(2, 1fr); }
  .pd-axis__head { flex-wrap: wrap; }
  .pd-axis__hint { margin-left: 0; flex-basis: 100%; }
  .pd-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
  .pd-fold-cards { grid-template-columns: repeat(2, 1fr); }
  .pd-size-cards { grid-template-columns: repeat(2, 1fr); }
  .pd-paper-cards { grid-template-columns: 1fr 1fr; }
  .pd-fold-card__name { font-size: .76rem; }
  .pd-size-card__name { font-size: .72rem; }
}

/* ----------------------------------------------------------------
   stepwise (price-v2/pamphlet-stepwise.html) 専用
   既存 tsw-* に追記
   ---------------------------------------------------------------- */
.tsw-card--visual.tsw-card--fold {
  padding-top: 8px;
}

.tsw-vis-fold {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #faf6f1 center/contain no-repeat;
  border-radius: 4px;
  margin-bottom: 6px;
}

.tsw-vis-fold[data-fold="2tu"]     { background-image: url(/img/product/ori/ori2tuBig.webp),     url(/img/product/ori/ori2tuBig.png); }
.tsw-vis-fold[data-fold="maki3tu"] { background-image: url(/img/product/ori/orimaki3tuBig.webp), url(/img/product/ori/orimaki3tuBig.png); }
.tsw-vis-fold[data-fold="soto3tu"] { background-image: url(/img/product/ori/orimsoto3tuBig.webp),url(/img/product/ori/orimsoto3tuBig.png); }
.tsw-vis-fold[data-fold="soto4tu"] { background-image: url(/img/product/ori/orimsoto4tuBig.webp),url(/img/product/ori/orimsoto4tuBig.png); }
.tsw-vis-fold[data-fold="kannon"]  { background-image: url(/img/product/ori/orikannonBig.webp), url(/img/product/ori/orikannonBig.png); }

/* stepwise の仕上がりサイズビジュアル (旧 tsw-card--visual の data-colors-val 子用) */
.tsw-vis-size {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #faf6f1 center/contain no-repeat;
  border-radius: 4px;
  margin-bottom: 4px;
}

.tsw-vis-size[data-size="hosonaga"] { background-image: url(/img/product/oripamp/l-hosonaga.webp), url(/img/product/oripamp/l-hosonaga.jpg); }
.tsw-vis-size[data-size="seihokei"] { background-image: url(/img/product/oripamp/l-seihou.webp), url(/img/product/oripamp/l-seihou.jpg); }
.tsw-vis-size[data-size="cd"]       { background-image: url(/img/product/oripamp/l-cd.webp), url(/img/product/oripamp/l-cd.jpg); }
.tsw-vis-size[data-size="a6"]       { background-image: url(/img/product/oripamp/l-a6.webp), url(/img/product/oripamp/l-a6.jpg); }
.tsw-vis-size[data-size="a5"]       { background-image: url(/img/product/oripamp/l-a5.webp), url(/img/product/oripamp/l-a5.jpg); }
.tsw-vis-size[data-size="a4"]       { background-image: url(/img/product/oripamp/l-a4.webp), url(/img/product/oripamp/l-a4.jpg); }
.tsw-vis-size[data-size="b6"]       { background-image: url(/img/product/oripamp/l-b6.webp), url(/img/product/oripamp/l-b6.jpg); }
.tsw-vis-size[data-size="b5"]       { background-image: url(/img/product/oripamp/l-b5.webp), url(/img/product/oripamp/l-b5.jpg); }

/* stepwise 用紙ビジュアルの強化 (元の tsw-vis-paper 上書き) */
.tsw-vis-paper {
  width: 100%;
  height: 64px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.tsw-vis-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tsw-vis-paper[data-paper="coat90"] {
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%),
    linear-gradient(135deg, #fdfcfa, #f5f1eb);
}
.tsw-vis-paper[data-paper="coat135"] {
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%),
    linear-gradient(135deg, #fdfcfa, #ece6dd);
}
.tsw-vis-paper[data-paper="coat135"]::after {
  border-top: 6px solid rgba(0,0,0,.04);
  border-bottom: 6px solid rgba(0,0,0,.06);
  border-radius: 4px;
}
.tsw-vis-paper[data-paper="matcoat90"] {
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%),
    linear-gradient(135deg, #f7f3ec, #ece5d8);
}
.tsw-vis-paper[data-paper="matcoat135"] {
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%),
    linear-gradient(135deg, #f5efe5, #e2d9c8);
}
.tsw-vis-paper[data-paper="matcoat135"]::after {
  border-top: 6px solid rgba(0,0,0,.05);
  border-bottom: 6px solid rgba(0,0,0,.07);
  border-radius: 4px;
}
.tsw-vis-paper[data-paper="mat90"] {
  background:
    repeating-linear-gradient(0deg, rgba(190,170,140,.1) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #fbf8f2, #f0e9da);
}
.tsw-vis-paper[data-paper="mat110"] {
  background:
    repeating-linear-gradient(0deg, rgba(170,150,120,.13) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #f9f5ec, #ebe0c9);
}
.tsw-vis-paper[data-paper="mat110"]::after {
  border-top: 6px solid rgba(0,0,0,.05);
  border-bottom: 6px solid rgba(0,0,0,.07);
  border-radius: 4px;
}

/* stepwise: 4列レイアウトでサイズカード */
.tsw-step[data-step="colors"] .tsw-choice--visual {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 720px) {
  .tsw-step[data-step="colors"] .tsw-choice--visual { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .tsw-step[data-step="colors"] .tsw-choice--visual { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================================================
   stepwise: 左サイドのサイズ画像
   - 元画像は左半分にサイズ比較、右半分に単体仕上がりイラスト
   - object-position: right center でクロップして右側だけを使う
   - エリアは正方形でバランスよく
   ======================================================================== */
.tsw-spec__image {
  margin: 0 0 18px;
  padding: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;
  box-shadow: 0 0 0 1px rgba(180, 140, 140, .12);
}
.tsw-spec__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

/* ========================================================================
   stepwise: ホバー価格パネル - aside 内 sticky で aside 幅・下段配置
   ======================================================================== */
/* aside を flex column 化して change-all ボタンの後に sticky panel を配置 */
.tsw-spec {
  display: flex;
  flex-direction: column;
}
.tsw-spec__list { flex: 0 0 auto; }
.tsw-spec__change-all { flex: 0 0 auto; }

/* fixed で画面下部追従 (aside の left/width に JS で同期) */
.tsw-hover-panel--sticky {
  position: fixed;
  bottom: 16px;
  z-index: 50;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 14px 36px rgba(140, 90, 90, .18),
    0 4px 10px rgba(140, 90, 90, .10),
    0 0 0 1px rgba(199, 139, 139, .16);
  font-size: .88rem;
  /* JS が left/width を埋める。フォールバックで左下固定 */
  left: 24px;
  width: 280px;
  max-width: calc(100vw - 48px);
}

/* 最上段: 細めのアクセントバー (淡いピンク・狭い縦幅) */
.tsw-hover-panel--sticky .tsw-hover-panel__head {
  margin: 0;
  padding: 6px 14px;
  background: linear-gradient(135deg, #f4cfd3 0%, #e9b6bd 100%);
  color: var(--c-primary-ink, #b14f6a);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  line-height: 1.4;
}
.tsw-hover-panel--sticky .tsw-hover-panel__sep {
  margin: 0 6px;
  opacity: .6;
}

.tsw-hover-panel--sticky .tsw-hover-panel__rows {
  padding: 8px 14px 10px;
}
.tsw-hover-panel--sticky .tsw-hover-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 3px 0;
  font-size: .8rem;
}
.tsw-hover-panel--sticky .tsw-hover-panel__label {
  color: var(--c-text-muted);
}
.tsw-hover-panel--sticky .tsw-hover-panel__value {
  color: var(--c-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tsw-hover-panel--sticky .tsw-hover-panel__row--total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(199, 139, 139, .25);
}
.tsw-hover-panel--sticky .tsw-hover-panel__row--total .tsw-hover-panel__label {
  color: var(--c-text);
  font-weight: 600;
}
.tsw-hover-panel--sticky .tsw-hover-panel__row--total .tsw-hover-panel__label small {
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: .68rem;
}
.tsw-hover-panel--sticky .tsw-hover-panel__value--total {
  color: #c9303f !important;
  font-size: 1.06rem !important;
  font-weight: 800 !important;
}
/* foot: 税込・送料無料 を一行 (横並び) で */
.tsw-hover-panel--sticky .tsw-hover-panel__foot {
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: .68rem;
  color: var(--c-text-muted);
  line-height: 1.3;
}
.tsw-hover-panel--sticky .tsw-hover-panel__shipping {
  color: var(--c-primary-ink, #b14f6a);
  font-weight: 600;
  text-align: right;
}
.tsw-hover-panel--sticky .tsw-hover-panel__hint {
  margin: 0;
  font-size: .74rem;
  color: var(--c-text-muted);
  text-align: center;
  padding: 12px 12px;
  line-height: 1.5;
}
/* hint と rows の出し分け */
.tsw-hover-panel[data-state="empty"] .tsw-hover-panel__head,
.tsw-hover-panel[data-state="empty"] .tsw-hover-panel__rows {
  display: none;
}
.tsw-hover-panel:not([data-state="empty"]) .tsw-hover-panel__hint {
  display: none;
}

/* スマホでは hover panel 非表示 */
@media (max-width: 768px) {
  .tsw-hover-panel--sticky { display: none !important; }
}

/* ========================================================================
   stepwise: 左サイド spec aside の余白とトップ揃え
   ======================================================================== */
.tsw-spec {
  padding: 0 18px;
}
.tsw-spec__title {
  padding-left: 4px;
}
@media (max-width: 768px) {
  .tsw-spec { padding: 0 4px; }
}

/* 左サイド画像と右マトリックス見出しの上ラインを完全に揃える */
.tsw-grid {
  align-items: start;
}
.tsw-grid > .tsw-spec,
.tsw-grid > div {
  margin-top: 0;
  padding-top: 0;
}
.tsw-spec__image,
#tswMatrixWrap {
  margin-top: 0 !important;
}
#tswMatrixWrap {
  padding-top: 0;
}
#tswMatrixWrap .tsw-matrix-head {
  margin-top: 0 !important;
  padding-top: 0;
  /* 左の画像枠の上端に視覚的に揃うよう min-height で底上げ */
  min-height: 48px;
}
.tsw-hover-panel[data-state="empty"] .tsw-hover-panel__head,
.tsw-hover-panel[data-state="empty"] .tsw-hover-panel__row,
.tsw-hover-panel[data-state="empty"] .tsw-hover-panel__foot {
  display: none;
}
.tsw-hover-panel:not([data-state="empty"]) .tsw-hover-panel__hint {
  display: none;
}
.tsw-hover-panel__head {
  font-weight: 700;
  color: var(--c-text);
  font-size: .92rem;
  margin-bottom: 8px;
  padding-bottom: 8px;
  background: linear-gradient(180deg, transparent calc(100% - 1px), rgba(199, 139, 139, .25) calc(100% - 1px));
}
.tsw-hover-panel__sep {
  margin: 0 6px;
  color: var(--c-text-muted);
  font-weight: 400;
}
.tsw-hover-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0;
  font-size: .82rem;
}
.tsw-hover-panel__row .tsw-hover-panel__label {
  color: var(--c-text-muted);
}
.tsw-hover-panel__row .tsw-hover-panel__value {
  color: var(--c-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tsw-hover-panel__row--total {
  margin-top: 8px;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(199, 139, 139, .18) 1px, transparent 1px);
}
.tsw-hover-panel__row--total .tsw-hover-panel__label {
  color: var(--c-text);
  font-weight: 600;
}
.tsw-hover-panel__row--total .tsw-hover-panel__label small {
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: .72rem;
}
.tsw-hover-panel__value--total {
  color: #c9303f !important;
  font-size: 1.14rem !important;
  font-weight: 800 !important;
}
.tsw-hover-panel__foot {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .72rem;
  color: var(--c-text-muted);
}
.tsw-hover-panel__shipping {
  color: var(--c-primary-ink);
  font-weight: 600;
}
.tsw-hover-panel__hint {
  margin: 0;
  font-size: .76rem;
  color: var(--c-text-muted);
  text-align: center;
  padding: 8px 4px;
  line-height: 1.5;
}

/* ========================================================================
   stepwise: 価格マトリックスのセル右寄せ + 水色 + ホバー色強化
   ======================================================================== */
.price-matrix-table .matrix-cell {
  text-align: right !important;
  padding-right: 14px !important;
}
.price-matrix-table .matrix-price {
  color: #2b9bd1 !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-matrix-table .matrix-cell.is-hovered-col,
.price-matrix-table .matrix-lt-header.is-hovered-col {
  background: rgba(199, 139, 139, .26) !important;
}
.price-matrix-table .matrix-cell.is-hovered-row,
.price-matrix-table .matrix-qty-header.is-hovered-row {
  background: rgba(199, 139, 139, .26) !important;
}
.price-matrix-table .matrix-cell.is-hovered-col.is-hovered-row {
  background: rgba(199, 139, 139, .42) !important;
}
.price-matrix-table .matrix-cell:hover {
  background: var(--c-primary, #c78b8b) !important;
  cursor: pointer;
}
.price-matrix-table .matrix-cell:hover .matrix-price {
  color: #fff !important;
}

/* ホバー時の「注文へ →」ヒントは右下→左下へ移動 (右寄せ価格との被り回避) */
.price-matrix-table .matrix-cell .tsw-cta-hint {
  right: auto !important;
  left: 8px !important;
  bottom: 3px !important;
  text-align: left;
}

/* ========================================================================
   stepwise: マトリックスの内枠スクロール廃止 (ページ全体で縦スクロール)
   + 周りの border / shadow も廃止
   ======================================================================== */
.tsw-matrix-wrap,
#tswMatrixWrap {
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.tsw-matrix-wrap .matrix-scroll {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: auto;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.tsw-matrix-scroll-hint { display: none !important; }
.tsw-matrix-note { color: var(--c-text-muted); font-size: .8rem; }

/* ========================================================================
   stepwise: 価格表タイトル — 大きく / アクセント縦バー / マージン拡大
   (下線はスクロールバーに見えるため廃止し、左の縦バーで強調する設計に)
   ======================================================================== */
.tsw-matrix-head {
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}
.tsw-matrix-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 !important;
  color: var(--c-text);
  font-family: var(--font-serif, "Noto Serif JP", serif);
  padding-left: 18px;
  position: relative;
}
.tsw-matrix-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-primary, #c78b8b) 0%, var(--c-primary-ink, #b14f6a) 100%);
}
.tsw-matrix-title em {
  font-style: normal;
  color: var(--c-primary-ink, #b14f6a);
}
.tsw-matrix-hint {
  font-size: .78rem;
  color: var(--c-text-muted);
}
/* タイトルとマトリックスの間にしっかり余白 */
#priceMatrixContainer {
  margin-top: 10px;
}

/* 左の画像コンテンツとマトリックス見出しの上ラインを揃える */
.tsw-grid {
  align-items: start;
}
.tsw-spec__image {
  margin-top: 0 !important;
}
#tswMatrixWrap > .tsw-matrix-head {
  margin-top: 0 !important;
}

/* ========================================================================
   stepwise: 選択中の仕様パネル — 各項目に区切り線 + クリック領域拡張
   ======================================================================== */
.tsw-spec__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tsw-spec__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  border: 0;
  background: linear-gradient(180deg, transparent calc(100% - 1px), rgba(199, 139, 139, .18) calc(100% - 1px));
  transition: background-color .12s ease;
}
.tsw-spec__item:first-child {
  background: linear-gradient(180deg, rgba(199, 139, 139, .18) 1px, transparent 1px) ,
              linear-gradient(180deg, transparent calc(100% - 1px), rgba(199, 139, 139, .18) calc(100% - 1px));
}
.tsw-spec__item:hover {
  background: linear-gradient(180deg, transparent calc(100% - 1px), rgba(199, 139, 139, .18) calc(100% - 1px)),
              rgba(199, 139, 139, .06);
}
.tsw-spec__num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-primary, #c78b8b);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tsw-spec__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tsw-spec__label {
  font-size: .7rem;
  color: var(--c-text-muted);
  font-weight: 500;
  letter-spacing: .04em;
}
.tsw-spec__val {
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.tsw-spec__edit {
  flex: 0 0 auto;
  font-size: .72rem;
  color: var(--c-primary-ink, #b14f6a);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(199, 139, 139, .12);
}
.tsw-spec__item:hover .tsw-spec__edit {
  background: var(--c-primary, #c78b8b);
  color: #fff;
}