/* 商品サンプル画像の横スクロールギャラリー（Worksbook Core 0.4.4） */
.wb-samples-wrap{
  position:relative;
  margin:1.75rem 0;
}
.wb-samples{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  max-width:100%;
}
.wb-samples:focus-visible{
  outline:3px solid currentColor;
  outline-offset:4px;
}
.wb-samples-track{
  display:flex;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:0 0 .5rem;
  min-width:min-content;
}
.wb-samples-item{
  flex:0 0 auto;
  margin:0;
  scroll-snap-align:start;
}
.wb-samples-item a{
  display:block;
  line-height:0;
}
/* 画像は原比率のまま高さを揃える。切り抜き・変形はしない（許諾条件が拡大・縮小のみのため）。 */
.wb-samples-item img{
  display:block;
  height:340px;
  width:auto;
  max-width:none;
  border-radius:2px;
}
.wb-samples-note{
  margin:.5rem 0 0;
  font-size:.8125rem;
  line-height:1.7;
  opacity:.85;
}

/* --- 横スクロールできることを伝えるヒント --- */
.wb-samples-hint{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  display:flex;
  justify-content:center;
  pointer-events:none;
  transform:translateY(-50%);
  transition:opacity .35s ease;
}
.wb-samples-hint-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5rem .9rem;
  border-radius:999px;
  color:#fff;
  background:rgba(17,17,17,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  animation:wb-samples-swipe 2.1s ease-in-out infinite;
}
.wb-samples-hint svg{display:block}
@keyframes wb-samples-swipe{
  0%,100%{transform:translateX(-13px);opacity:.55}
  50%    {transform:translateX(13px); opacity:.95}
}
/* スクロールされた／スクロール不要なギャラリーではヒントを消す */
.wb-samples-wrap.is-scrolled .wb-samples-hint,
.wb-samples-wrap.is-static .wb-samples-hint{
  opacity:0;
}

@media (max-width:767px){
  .wb-samples-item img{height:240px}
  .wb-samples-track{gap:.5rem}
  .wb-samples-note{font-size:.75rem}
  .wb-samples-hint-inner{padding:.4rem .75rem}
  .wb-samples-hint svg{width:60px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .wb-samples{scroll-behavior:auto}
  .wb-samples-hint-inner{animation:none;opacity:.85}
}

/* --- 各サンプルの「公式ページで見る」バッジ（画像の外に置く。画像に文字を重ねない） --- */
.wb-samples-item a{position:relative}
.wb-samples-tap{
  display:block;
  margin-top:.3rem;
  font-size:.75rem;
  line-height:1.5;
  text-align:center;
  opacity:.8;
}

/* --- 主要商品ブロック（FV） --- */
.wb-hero{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:1.25rem;
  align-items:start;
  margin:1.5rem 0 1.75rem;
}
.wb-hero-image{display:block;line-height:0}
.wb-hero-image img{
  display:block;
  width:100%;
  max-width:560px;
  height:auto;
  border-radius:3px;
}
.wb-hero-body{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.wb-hero-title{
  margin:0;
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:700;
  overflow-wrap:anywhere;
}
.wb-hero-note{
  margin:0;
  font-size:.75rem;
  line-height:1.7;
  opacity:.8;
}
@media (max-width:600px){
  .wb-hero{grid-template-columns:minmax(0,1fr);gap:.875rem}
  .wb-hero-title{font-size:1rem}
}

/* --- 作品ページのカバー画像：枠が4:3でないためレターボックス化して実描画が半分以下だった --- */
/* 画像は原比率のまま拡大縮小のみ（許諾条件）。切り抜きはしない。 */
.work-visual.work-cover{
  aspect-ratio:4/3;
  height:auto;
  width:100%;
  max-width:520px;
  margin-inline:auto;
}
.work-visual.work-cover img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* --- 購入ボタンに押せる手触りを出す（配色は変えない。コントラストは現状7.35:1でAAA適合） --- */
.wb-cta{
  box-shadow:0 4px 0 #d15f92, 0 8px 16px rgba(0,0,0,.30);
  transition:transform .12s ease, box-shadow .12s ease;
}
.wb-cta:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #d15f92, 0 3px 8px rgba(0,0,0,.30);
}
.wb-cta--disabled{box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .wb-cta{transition:none}
  .wb-cta:active{transform:none}
}