@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Squada+One&display=swap");
/*
Theme Name:   Entame Print
Theme URI:    https://entame-print.jp/
Author:       株式会社イード
Author URI:   https://iid.co.jp/
Description:  エンタメプリント用オリジナルテーマ。Cocoon子テーマから段階移行中。
Version:      0.2.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  entame-print
*/
/************************************
** デザイントークン（CSS変数）
************************************/
:root {
  /* 和文: Noto Sans JP（500/700）。未ロード時は YakuHanJP_Noto → OS 和文へフォールバック。 */
  --font-family-primary: "Noto Sans JP", YakuHanJP_Noto, -apple-system, system-ui, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 英字見出し（__en）専用。Squada One は 400 のみ提供のため適用先で font-weight: 400 固定。 */
  --font-family-display: "Squada One", "Impact", "Oswald", "Arial Narrow", sans-serif;
  --color-text-primary: #333;
  --color-text-primary-hover: #5a5d64;
  --color-text-muted: #7a7d84;
  --color-surface-muted: #ffffff;
  --color-surface-raised: #f0f0f0;
  --color-surface-soft: #fafafa;
  /* サイト全体のベース背景（ブルーグレー）。白系セクションを浮かせる「地」として機能。 */
  --color-background: #E8ECEF;
  --color-border-muted: #d0d0d0;
  --color-border-strong: #111;
  /* アクセント = ロゴのシアンブロック #00a0e0 由来。 */
  --color-accent: #00a0e0;
  --color-accent-hover: #007fb3;
  --color-accent-soft: #e0f3fb;
  /* アクション = ロゴのマゼンタ。 */
  --color-action: #e3007e;
  --color-action-hover: #b50064;
  /* CTA = ロゴのイエローブロック #ffec00。文字色は border-strong。GENRE 背景にも流用。 */
  --color-cta: #ffec00;
  --color-cta-hover: #e6d000;
  /* LINE 共有リンクの hover 用ブランドカラー */
  --color-brand-line: #06c755;
  --space-1: 7.5px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 30px;
  --space-5: 60px;
  --space-6: 80px;
  --radius-xs: 7.5px;
  --radius-sm: var(--space-2);
  --radius-md: 14px;
  --motion-duration-instant: 300ms;
  --container-max: 1440px;
}

/************************************
** ベーススタイル
************************************/
*, *::before, *::after {
  /* width:100% に padding/border を加算した結果のはみ出しを防ぐ */
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
  background-color: var(--color-surface-muted);
  margin: 0;
}

/* TOP（front-page）とアーカイブ系（/products、カテゴリー、タグ、検索結果）にブルーグレーの「地」を敷く。
   個別商品ページ / 固定ページは白（基底ルールのまま）。 */
body.home,
body.archive {
  background-color: var(--color-background);
}

a {
  color: inherit;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/************************************
** サイトヘッダー
** 構成: ロゴ → 検索窓 → 購入・印刷方法リンク → SNSアイコン → 検索トグル（SPのみ表示）
** 仕様: position:sticky でスクロールに追随。総高さは 70px 以内（content 44px + padding 10px×2 = 64px）。
**       .__inner は flex 単一行固定（wrap せず）、SP では検索フォームが虫眼鏡トグルに切り替わる。
************************************/
.entame-site-header {
  background-color: var(--color-surface-muted);
  padding: var(--space-2) 0; /* 上下10px = 計20px → 中身44pxと合わせて64px（70px以内）*/
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.entame-site-header__inner {
  display: flex;
  align-items: center;
  /* SP は検索フォームをトグル化するため折り返し不要。nowrap 固定で高さブレを防ぐ。 */
  flex-wrap: nowrap;
  gap: var(--space-3);
  width: 100%;
  padding: 0 var(--space-3);
  justify-content: space-between;
}

.entame-site-header__logo {
  flex-shrink: 0;
  line-height: 0; /* インライン要素由来の余白を消す */
}

.entame-site-header__logo .custom-logo-link {
  display: inline-block;
}

.entame-site-header__logo img {
  display: block;
  /* chip / search 入力欄と揃えた 44px 高（ヘッダー総高 70px 以内）。 */
  height: 44px;
  width: auto;
}

.entame-site-header__logo-text {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-text-primary);
}

/* 検索窓と「購入・印刷方法」リンクの共通の角丸ボーダー枠 */
.entame-site-header__chip, .entame-search-form__field {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  height: 44px;
  background-color: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-duration-instant) ease;
}

.entame-site-header__chip:hover, .entame-search-form__field:hover {
  background-color: var(--color-surface-raised);
}

/* 「購入・印刷方法」chip は CTA 黄塗りに上書き。shared rule（chip + field）の
      border / background / color を後勝ちで差し替える。field 側の枠線は変えない。 */
.entame-site-header__chip {
  border: none;
  background-color: var(--color-cta);
  color: var(--color-border-strong);
}

.entame-site-header__chip:hover {
  background-color: var(--color-cta-hover);
}

/* 検索フォーム — TOP の `entame-keyword-search` と見た目を統一（コードは別物）。 */
.entame-search-form {
  /* 検索窓・chip・SNS を右寄せにするため、auto-margin で左余白を吸収（flex 親前提）。
          SP では @media (max-width: 768px) 側で margin: 0 に戻す。 */
  margin: 0 0 0 auto;
}

.entame-search-form__field {
  gap: var(--space-2);
  min-width: 240px;
  /* TOP の検索枠と揃える大きめ角丸 */
  border-radius: var(--radius-md);
  cursor: text;
  /* 枠線は黒固定。focus 視認はブラウザ既定の outline に委ねる。 */
}

.entame-search-form__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
}

/* HTML 属性（18px）を上書きし font-size に追従。
      他のアイコン（__more-link__icon / __contact-box__icon / __share svg）と同じ em ベース。 */
.entame-search-form__icon svg {
  width: 1.4em;
  height: 1.4em;
}

.entame-search-form__input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--color-text-primary);
  padding: 0;
  min-width: 0;
  /* TOP と太さを揃える */
  font-weight: 400;
}

.entame-search-form__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* 検索ボタン: ヘッダー 44px 枠に内接する 32px。見た目は TOP の `__submit` と同じ。 */
.entame-search-form__submit {
  height: 32px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-cta);
  color: var(--color-border-strong);
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-duration-instant) ease;
}

.entame-search-form__submit:hover, .entame-search-form__submit:focus-visible {
  background-color: var(--color-cta-hover);
}

/* チップ＋SNSをまとめるラッパー（SP時に1行にまとめるための単位） */
.entame-site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* SNSアイコン */
.entame-site-header__socials {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 濃色の角丸スクエア（44px）。内部に SVG とラベルを縦積みし、文字は白。 */
.entame-site-header__social-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-border-strong);
  color: var(--color-surface-muted);
  text-decoration: none;
  transition: opacity var(--motion-duration-instant) ease;
}

.entame-site-header__social-icon:hover {
  opacity: 0.8;
}

.entame-site-header__social-icon svg {
  width: 22px;
  height: 22px;
}

.entame-site-header__social-icon[aria-label^="X"] svg {
  width: 18px;
  height: 20px;
  padding-top: 2px;
}

.entame-site-header__social-label {
  font-size: 0.5rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 検索トグル（SP のみ表示）。PC は display:none、SP @media で inline-flex 化。 */
.entame-site-header__search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-cta);
  color: var(--color-border-strong);
  cursor: pointer;
  transition: opacity var(--motion-duration-instant) ease;
}

/* 内部 SVG の HTML 属性（18px）をボタン拡大に合わせて上書き */
.entame-site-header__search-toggle svg {
  width: 22px;
  height: 22px;
}

.entame-site-header__search-toggle:hover, .entame-site-header__search-toggle:focus-visible {
  opacity: 0.8;
}

/* レスポンシブ: SP は基底の flex 単一行を継承。検索は虫眼鏡トグル→ドロップダウン化、
      ロゴ・chip・SNS のサイズも縮小して 1 行に収める。 */
@media (max-width: 768px) {
  .entame-site-header__inner {
  gap: var(--space-1);
  padding: 0 var(--space-2);
  }
  /* SP では検索フォームを position:absolute のドロップダウンレイヤーに。初期は非表示。 */
  .entame-search-form {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-muted);
  border-top: 1px solid var(--color-border-muted);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  z-index: 99;
  }
  /* 検索トグル押下時に header に付与する is-search-open でフォーム展開 */
  .entame-site-header.is-search-open .entame-search-form {
  display: block;
  }
  .entame-search-form__field {
  width: 100%;
  min-width: 0;
  }
  /* SP では虫眼鏡トグルを表示 */
  .entame-site-header__search-toggle {
  display: inline-flex;
  }
  /* ロゴ・chip・SNS を 1 行に収まるサイズに縮小 */
  .entame-site-header__logo img {
  height: 32px;
  }
  .entame-site-header__logo-text {
  font-size: 1rem;
  /* 320px 極狭端末でのテキスト折り返し */
  display: block;
  line-height: 1.15;
  }
  .entame-site-header__chip {
  padding: 0 var(--space-1);
  font-size: 0.8125rem;
  height: 32px;
  }
  .entame-site-header__social-icon {
  width: 32px;
  height: 32px;
  gap: 3px;
  }
  .entame-site-header__social-icon svg {
  width: 16px;
  height: 16px;
  }
  .entame-site-header__social-icon[aria-label^="X"] svg {
  width: 13px;
  height: 14px;
  }
  .entame-site-header__social-label {
  font-size: 0.4rem;
  }
  .entame-site-header__actions {
  gap: var(--space-1);
  }
  .entame-site-header__socials {
  gap: 4px;
  }
}

/************************************
** サブナビ（ヘッダー直下・追従しない）
** フッターメニューを流用（TOP は除外）。各項目に GENRE と同じ黄スクエアマーカー。
************************************/
.entame-subnav {
  position: relative;
  background-color: #fffbcc;
  color: var(--color-text-primary);
}

/* 1行固定。横幅を超えたら横スクロール（バーは隠して矢印ナビで操作）。 */
.entame-subnav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  list-style: none;
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9rem);
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.entame-subnav__list::-webkit-scrollbar {
  display: none;
}

/* 各項目は縮小・改行させない（マーカー＋テキストの flex 化は genre-column 共有ルール）。 */
.entame-subnav__list li {
  flex-shrink: 0;
  white-space: nowrap;
}

.entame-subnav__list a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--motion-duration-instant) ease;
}

.entame-subnav__list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* スクロール可能な方向にだけ表示する矢印ナビ（JS が is-scroll-left / is-scroll-right を付与）。 */
.entame-subnav__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  z-index: 2;
  color: var(--color-text-primary);
  background-color: #fff9b2;
}

.entame-subnav__arrow svg {
  width: 18px;
  height: 18px;
}

.entame-subnav__arrow--prev {
  left: 0;
  box-shadow: 8px 0 8px -4px rgba(0, 0, 0, 0.15);
}

.entame-subnav__arrow--next {
  right: 0;
  box-shadow: -8px 0 8px -4px rgba(0, 0, 0, 0.15);
}

.entame-subnav.is-scroll-left .entame-subnav__arrow--prev,
.entame-subnav.is-scroll-right .entame-subnav__arrow--next {
  display: inline-flex;
}

/************************************
** ヒーロースライダー（TOPページ）
** Splide.js を使った二段スライダー（メイン + サムネイル）+ 再生/停止トグル
************************************/
.hero-slider-wrapper {
  /* viewport全幅に広げる（親に max-width 制約があっても fullbleed） */
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--color-border-strong);
  padding: var(--space-3) 0;
  overflow: hidden;
}

.hero-slider {
  position: relative;
}

.hero-slider__title.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---- メインスライダー ---- */
.hero-slider__main {
  margin: 0 auto var(--space-3);
}

.hero-slider__main .splide__slide {
  /* Splide の .splide__list は display:flex（既定 align-items:stretch）。
     Safari は stretch を優先して aspect-ratio を無視し高さが破綻するため、
     align-self:flex-start で縦伸長を止め aspect-ratio から高さを解決させる。 */
  align-self: flex-start;
  aspect-ratio: 32 / 17;
  overflow: hidden;
  transition: opacity var(--motion-duration-instant) ease;
  opacity: 0.6;
  padding: 0 8px;
}

.hero-slider__main .splide__slide.is-active {
  opacity: 1;
}

.hero-slider__slide-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.hero-slider__slide-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-surface-muted);
  border-radius: 20px;
}

/* PC（>=769px）: メインスライドに角丸 + 左右余白。SP は基底のまま全幅・直角。
      スライド幅（60vw）は Splide 初期化（`breakpoints.769.fixedWidth`）で一元管理 → ここで width は触らない。
      余白は Splide の `splide__slide { margin: 0 !important }` のため slide 内に padding-inline、
      内側 link に背景を当てて視覚的に作る。 */
@media (min-width: 769px) {
  .hero-slider__main .splide__slide {
  padding: 0 10px;
  background: transparent;
  }
}

/* ---- サムネイル ---- */
.hero-slider__thumb-wrap {
  position: relative;
  width: 100%;
  padding: 0;
  overflow-x: clip;
  overflow-y: visible;
}

.hero-slider__thumbs .splide__track {
  overflow-x: clip;
  overflow-y: visible;
}

/* 矢印・トグル領域の背景マスク（gashapon方式） */
.hero-slider__thumb-wrap::before, .hero-slider__thumb-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--color-border-strong);
  z-index: 2;
  pointer-events: none;
}

.hero-slider__thumb-wrap::before {
  left: 0;
  width: 38px;
}

.hero-slider__thumb-wrap::after {
  right: 0;
  width: 91px;
}

.hero-slider__thumbs .splide__slide {
  position: relative;
  background: var(--color-surface-muted);
  /* メインスライダーと同様、Safari の flex stretch が aspect-ratio を
     無視する問題を align-self:flex-start で回避する。 */
  align-self: flex-start;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Splide標準の isNavigation 黒ボーダーを無効化 */
.hero-slider__thumbs .splide__slide, .hero-slider__thumbs .splide__slide.is-active, .hero-slider__thumbs .splide__slide.is-active.is-visible {
  border: none !important;
}

.hero-slider__thumbs .splide__slide:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hero-slider__thumbs .splide__slide.is-active {
  /* is-active は box-shadow のみ。進行表示は ::after の下線バーに集約。 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* アクティブサムネのプログレスバー。
      注意: ::after の transition 時間は Splide 初期化の interval と揃える必要あり。
      スピード調整時は両方を合わせて変更すること。 */
.hero-slider__thumbs .splide__slide::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 8px;
  border-radius: 4px;
  width: 0;
  background: var(--color-cta);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: width 200ms linear, opacity 150ms ease;
}

.hero-slider__thumbs .splide__slide.is-active::after {
  opacity: 1;
  width: 100%;
  /* バー伸長時間は Splide interval (3000ms) より 300ms 短くして、
          スライド切替（speed: 600ms）と視覚同期させる。 */
  transition: width 2700ms linear, opacity 100ms ease;
}

/* Splide標準の dashed outline を無効化、focus-visible でホバー相当の演出 */
.hero-slider__thumb-wrap *:focus, .hero-slider__thumb-wrap *:focus-visible, .hero-slider__thumb-wrap *:focus-within, .hero-slider__thumbs .splide__slide.is-active.is-visible:focus, .hero-slider__thumbs .splide__slide.is-active.is-visible:focus-visible {
  outline: none !important;
}

.hero-slider__thumbs .splide__slide:focus-visible, .hero-slider__thumbs .splide__slide:has(a:focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hero-slider__thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.hero-slider__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-surface-muted);
}

/* 矢印を縦長バーに */
.hero-slider__thumbs .splide__arrow {
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  background: var(--color-cta);
  border: none;
  border-radius: 0;
  opacity: 1;
  transform: none;
  box-shadow: none;
  z-index: 3;
  transition: background var(--motion-duration-instant) ease;
}

.hero-slider__thumbs .splide__arrow:hover:not(:disabled) {
  background: var(--color-cta-hover);
}

.hero-slider__thumbs .splide__arrow svg {
  /* 黄背景上で見えるよう、矢印アイコンの fill は dark に */
  fill: var(--color-border-strong);
  width: 14px;
  height: 14px;
}

.hero-slider__thumbs .splide__arrow--prev {
  left: 0;
  border-radius: 0 8px 8px 0;
}

.hero-slider__thumbs .splide__arrow--next {
  right: 53px; /* トグルバー(45px) + ギャップ(8px) ぶん右配置 */
  border-radius: 8px;
}

/* ---- 再生/停止トグル ---- */
.hero-slider__toggle-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 45px;
  background: var(--color-cta);
  border-radius: 8px 0 0 8px;
  z-index: 3;
}

.hero-slider__toggle {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--motion-duration-instant) ease;
}

.hero-slider__toggle:hover {
  background: rgba(0, 0, 0, 0.15);
}

.hero-slider__toggle:focus-visible {
  /* 黄背景上で見える dark outline に */
  outline: 2px solid var(--color-border-strong);
  outline-offset: -4px;
}

/* 一時停止アイコン（‖） — 再生中の表示。黄背景上で見えるよう dark に */
.hero-slider__toggle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 14px;
  background: transparent;
  border-left: 3px solid var(--color-border-strong);
  border-right: 3px solid var(--color-border-strong);
  transform: translate(-50%, -50%);
}

/* 再生アイコン（▶） — 一時停止中の表示。同じく dark に */
.hero-slider__toggle.is-paused .hero-slider__toggle-icon {
  width: 0;
  height: 0;
  background: transparent;
  border: none;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--color-border-strong);
  transform: translate(-40%, -50%);
}

/* ---- Splide未ロード時のフォールバック ---- */
.no-splide .hero-slider__main .splide__slide {
  opacity: 1;
}

.no-splide .hero-slider__main .splide__slide:not(:first-child) {
  display: none;
}

.no-splide .hero-slider__thumb-wrap {
  display: none;
}

/* ---- レスポンシブ ---- */
@media screen and (max-width: 768px) {
  .hero-slider-wrapper {
  padding: var(--space-2) 0;
  }
  .hero-slider__main {
  margin-bottom: var(--space-2);
  }
  .hero-slider__main .splide__slide {
  opacity: 1;
  border-radius: 0;
  }
  .hero-slider__thumb-wrap {
  padding-left: 8px;
  }
  .hero-slider__thumb-wrap::before {
  display: none;
  }
  .hero-slider__thumb-wrap::after {
  width: 42px;
  }
  .hero-slider__toggle-wrap {
  width: 36px;
  }
  .splide__list {
  padding-left: 10px;
  }
}

/************************************
** TOPページ共通セクションコンテナ
** スライダー以降のセクション全てに適用される横幅制約・余白
************************************/
.entame-section {
  padding: var(--space-5) 0;
}

.entame-section--soft {
  background-color: var(--color-surface-soft);
}

/* セクション間に「グレーの波線」境界を入れる。
      対象: .entame-product-grid を持つセクションが連続する場合のみ（NEW ARRIVALS → ENDING SOON）。
      実装: ::before で固定高 8px の帯を作り SVG を repeat-x。stroke は border-muted 相当のグレー。
      ネスト :has() 互換: 内側 :has() を子孫セレクタに置き換え（Chrome 105+ / Safari 15.4+ 対応）。 */
.entame-section:has(.entame-product-grid):has(+ .entame-section .entame-product-grid) {
  padding-bottom: 120px;
}

.entame-section:has(.entame-product-grid) + .entame-section:has(.entame-product-grid) {
  position: relative;
  padding-top: 120px;
}

.entame-section:has(.entame-product-grid) + .entame-section:has(.entame-product-grid)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8' preserveAspectRatio='none'><path d='M0 4 Q 5 0 10 4 T 20 4' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 60px 24px;
  pointer-events: none;
}

.entame-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* 大セクション見出し（gashapon を参考にした英大字 + 日本語サブ） */
.entame-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  text-align: center;
  position: relative;
}

.entame-section-title__en {
  /* Squada One は 400 のみ提供 → 必ず 400 固定（フェイクボールド回避）。 */
  font-family: var(--font-family-display);
  font-size: clamp(3.2rem, 5vw, 60rem);
  font-weight: 400;
  color: var(--color-border-strong);
  line-height: 1;
}

.entame-section-title__ja {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/************************************
** ジャンル・作品名セクション
** 親 product_category を3列に並べ、各列に子タームを表示。
** 子が無ければ親アーカイブへの「全て見る」リンクのみ表示。
************************************/
.entame-genre-grid {
  /* グリッドは純粋なレイアウト容器に。背景・余白・角丸は列カードに移譲したため不要。 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* GENRE 専用: 子 .entame-genre-grid を :has() でスコープし、CTA 黄背景を当てる。 */
.entame-section:has(.entame-genre-grid) {
  background-color: #fff9b2;
}

.entame-section:has(.entame-genre-grid) .entame-section-title__ja {
  color: var(--color-border-strong);
}

.entame-genre-column {
  min-width: 0; /* grid 子要素のテキスト溢れ防止 */
  background-color: var(--color-surface-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  /* flex column で内部 see-all を margin-top:auto により下辺揃えに。
          grid 親の align-items: stretch でカラム高さが揃うため有効。 */
  text-align: center;
  display: flex;
  flex-direction: column;
}

.entame-genre-column__title {
  margin: 0 0 var(--space-2);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.entame-genre-column__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* カラム残り高さを占有 → see-all を margin-top:auto で下辺固定 */
  flex: 1;
  width: 100%;
  max-width: 300px;
  margin: auto;
}

.entame-genre-column__list li {
  line-height: 1.5;
}

/* see-all 以外の li に CTA 黄の角丸スクエアマーカーを付ける（see-all はボタン化のため除外）。
   サブナビ(.entame-subnav__list li)も同じマーカーを共有するためセレクタをまとめる。 */
.entame-genre-column__list li:not(.entame-genre-column__see-all),
.entame-subnav__list li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.entame-genre-column__list li:not(.entame-genre-column__see-all)::before,
.entame-subnav__list li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: var(--color-cta);
  border-radius: 3px;
  flex-shrink: 0;
}

/* see-all 以外のテキストリンクの基底 + hover */
.entame-genre-column__list li:not(.entame-genre-column__see-all) a {
  display: inline-block;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: 2px 0;
  transition: color var(--motion-duration-instant) ease;
}

.entame-genre-column__list li:not(.entame-genre-column__see-all) a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.entame-genre-column__see-all {
  /* margin-top:auto で行を跨いでボタンを下辺揃え。上余白の最小値も確保。 */
  margin-top: auto;
  padding-top: var(--space-3);
}

/* 「○○を全て見る」ボタン: 濃色背景 + 白文字。日本語表記のため本文 Noto Sans JP を使用。 */
.entame-genre-column__see-all a {
  display: inline-block;
  background-color: var(--color-border-strong);
  color: var(--color-surface-muted);
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color var(--motion-duration-instant) ease;
  width: 100%;
  max-width: 300px;
}

.entame-genre-column__see-all a:hover {
  background-color: var(--color-text-primary-hover);
}

/* 子要素なし状態のフォールバックテキスト */
.entame-genre-column__empty {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
  color: var(--color-text-muted);
}

/************************************
** TOPキーワード検索（商品検索）
** ヘッダー検索とは別に、TOPで目立つ位置に配置する商品向け検索フォーム。
************************************/
.entame-keyword-search {
  display: flex;
  justify-content: center;
}

.entame-keyword-search__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: min(560px, 100%);
  height: 56px;
  padding: 0 var(--space-3);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  cursor: text;
  transition: border-color var(--motion-duration-instant) ease;
}

.entame-keyword-search__field:focus-within {
  border-color: var(--color-accent);
}

.entame-keyword-search__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
}

.entame-keyword-search__input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--color-text-primary);
  min-width: 0;
}

.entame-keyword-search__input::placeholder {
  color: var(--color-text-muted);
}

.entame-keyword-search__submit {
  height: 40px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--color-cta);
  color: var(--color-border-strong);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--motion-duration-instant) ease;
}

.entame-keyword-search__submit:hover {
  background-color: var(--color-cta-hover);
}

/************************************
** 新着商品グリッド（4列×n段）
************************************/
.entame-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.entame-product-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--motion-duration-instant) ease;
  border-radius: clamp(12px, 2vw, 20px);
  padding: clamp(12px, 2vw, 20px);
  background: var(--color-surface-muted);
}

.entame-product-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.entame-product-card__image {
  width: 100%;
  height: 100%;
  /* contain で全体表示。余白は wrap の背景がレターボックスとして見える。 */
  object-fit: contain;
  display: block;
  transition: transform var(--motion-duration-instant) ease;
}

.entame-product-card:hover .entame-product-card__image {
  transform: scale(1.03);
}

.entame-product-card__title {
  /* PC=1.05rem / SP=0.875rem を 1.5vw で流動補間 */
  font-size: clamp(0.875rem, 1.5vw, 1.05rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0 0 6px;
  /* 2行 truncate */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entame-product-card__category {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}

.entame-product-card__price {
  /* title と同じ流動補間で揃える */
  font-size: clamp(0.875rem, 1.5vw, 1.05rem);
  font-weight: 800;
  font-feature-settings: "palt"1;
  color: var(--color-accent);
  margin: 0;
}

.entame-product-card__price-tax {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 2px;
}

/* ---- 販売終了ラベル（商品カード） ---- */
/* 画像にはオーバーレイせず、画像下のテキスト領域に黒系チップで明示する。 */
.entame-product-card__status {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-border-strong);
  color: var(--color-surface-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.entame-product-card--ended .entame-product-card__price {
  color: var(--color-text-muted);
}

/************************************
** バナーグリッド（キャンペーン情報）
** 2列でアイキャッチ画像のみのバナー表示。
************************************/
.entame-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.entame-banner-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-raised);
  transition: transform var(--motion-duration-instant) ease, box-shadow var(--motion-duration-instant) ease;
}

.entame-banner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.entame-banner-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/************************************
** ニュースカードグリッド（NEWS / お知らせ）
** 2列、アイキャッチ画像 + タイトルのシンプルカード。
************************************/
.entame-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.entame-news-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--motion-duration-instant) ease;
}

.entame-news-card:hover {
  transform: translateY(-2px);
}

.entame-news-card__image-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-raised);
  margin-bottom: var(--space-2);
}

.entame-news-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--motion-duration-instant) ease;
}

.entame-news-card:hover .entame-news-card__image {
  transform: scale(1.03);
}

.entame-news-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/************************************
** 「もっと見る」リンク（セクション末尾の汎用CTA）
************************************/
.entame-section__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.entame-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80%;
  max-width: 360px;
  height: 60px;
  padding: 0 var(--space-4);
  /* CTA 黄のフィルドボタン（pill 形状） */
  border: 0;
  border-radius: 999px;
  background-color: var(--color-cta);
  color: var(--color-border-strong);
  font-size: 1.125rem; /* 18px 相当 */
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--motion-duration-instant) ease;
}

.entame-more-link:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-border-strong);
}

.entame-more-link__icon {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  /* HTML 属性（16px）を上書き、font-size に追従させる（viewBox 24×24 → 1.2em で釣り合い）。 */
  width: 1.2em;
  height: 1.2em;
  transform: translate(0, -50%);
  transition: transform var(--motion-duration-instant) ease;
}

.entame-more-link:hover .entame-more-link__icon {
  transform: translate(3px, -50%);
}

/************************************
** 商品アーカイブ（/products/ ・ product_category ・ product_tag 共通）
** カード本体は TOPと共通の .entame-product-card / .entame-product-grid を再利用。
************************************/
.entame-archive {
  padding: var(--space-4) 0 var(--space-5);
}

.entame-archive__inner {
  max-width: var(--container-max);
  margin: var(--space-3) auto 0;
  padding: 0 var(--space-4);
}

/* ---- ページヘッダー ---- */
.entame-archive-header {
  text-align: center;
  margin: 0 0 var(--space-4);
}

.entame-archive-header__title {
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0;
  /* 日本語タイトル中の長尺ターム名で折り返しが汚くならないように */
  word-break: break-word;
}

.entame-archive-header__description {
  margin: var(--space-3) auto 0;
  max-width: 640px;
  color: var(--color-action);
  font-size: 0.95rem;
  line-height: 1.7;
}

.entame-archive-header__description p {
  margin: 0;
}

.entame-archive-header__count {
  color: var(--color-text-muted);
  margin: 0;
}

.entame-archive-header__count strong {
  color: var(--color-text-primary);
  font-size: 1.6rem;
}

/* ---- フィルタチップ（?filter=ending-soon が有効な場合のみ表示） ---- */
.entame-archive-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  background-color: var(--color-surface-muted);
  border-radius: clamp(12px, 2vw, 20px);
  padding: clamp(12px, 2vw, 16px);
}

.entame-archive-filters__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.entame-archive-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  color: var(--color-action);
  font-size: 1.1rem;
  font-weight: 700;
}

.entame-archive-filters__clear {
  margin-left: auto;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  transition: color var(--motion-duration-instant) ease;
}

.entame-archive-filters__clear:hover {
  color: var(--color-accent-hover);
}

/* ---- ページネーション ---- */
.entame-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.entame-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-weight: 700;
  text-decoration: none;
  transition:
  border-color var(--motion-duration-instant) ease, background-color var(--motion-duration-instant) ease, color var(--motion-duration-instant) ease;
}

.entame-pagination a.page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.entame-pagination .page-numbers.current {
  background-color: var(--color-cta);
  border-color: var(--color-cta);
  color: var(--color-border-strong);
}

.entame-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  min-width: 24px;
  padding: 0;
}

/* ---- 空状態 ---- */
.entame-archive__empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  min-height: 47vh;
}

.entame-archive__empty p {
  margin: 0 0 var(--space-3);
}

.entame-archive__empty p:last-child {
  margin-bottom: 0;
}

/************************************
** TOPページ各セクションのレスポンシブ
************************************/
@media (max-width: 960px) {
  .entame-genre-grid {
  grid-template-columns: repeat(2, 1fr);
  }
  .entame-product-grid {
  grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .entame-section {
  padding: var(--space-4) 0;
  }
  /* SP では波線上下余白を 80px に縮小（PC は 120px） */
  .entame-section:has(.entame-product-grid):has(+ .entame-section .entame-product-grid) {
  padding-bottom: 80px;
  }
  .entame-section:has(.entame-product-grid) + .entame-section:has(.entame-product-grid) {
  padding-top: 80px;
  }
  .entame-section__inner, .entame-archive__inner {
  padding: 0 var(--space-3);
  }
  .entame-genre-grid {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  }
  .entame-product-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  }
  .entame-banner-grid, .entame-news-grid {
  grid-template-columns: 1fr;
  }
  .entame-keyword-search__submit {
  padding: 0 var(--space-2);
  }
  .entame-archive {
  padding: var(--space-3) 0 var(--space-4);
  }
  .entame-pagination .page-numbers {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  }
}

/************************************
** サイトフッター
** 濃色（border-strong = #111）反転デザイン。配下の border は半透明白で柔らかい仕切り線、
** link / copyright も白系に揃える。
************************************/
.entame-site-footer {
  background-color: var(--color-border-strong);
  color: var(--color-surface-muted);
  margin-top: var(--space-5);
}

.entame-site-footer__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

.entame-site-footer__menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: var(--space-2) var(--space-2);
  color: inherit;
  font-weight: 700;
  font-size: clamp(0.875rem, 1.5vw, 1.1rem);
  text-decoration: none;
  line-height: 1.4;
}

.entame-site-footer__menu > li > a:hover {
  color: var(--color-cta);
}

.entame-site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-3);
  text-align: right;
}

.entame-site-footer__copyright {
  margin: 0;
  font-size: 0.8rem;
  /* 黒地に対する控えめテキスト。装飾的 copyright は WCAG AA 3:1 程度で許容。 */
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

@media (min-width: 769px) {
  .entame-site-footer {
  padding-top: var(--space-3);
  }
  .entame-site-footer__menu {
  justify-content: center;
  gap: 3rem;
  }
}

@media (max-width: 768px) {
  .entame-site-footer__menu {
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .entame-site-footer__menu > li {
  flex: 1 1 50%; /* 2列折り返し */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  .entame-site-footer__menu > li {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  .entame-site-footer__menu > li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  }
  .entame-site-footer__menu > li > a {
  min-height: 48px;
  }
  .entame-site-footer__inner {
  text-align: center;
  }
 .entame-archive-header {
  margin-bottom: var(--space-3);
  }
}

/************************************
** 商品単体ページ（single-product.php）
** PC: パンくず / タイトル / ヒーロー / 販売情報 / 本文 / ラインナップグリッド / 共有ツール。
** SP: 段組みを縦に潰してレスポンシブ化。
************************************/
.entame-product-detail__inner {
  max-width: 940px;
  width: 88%;
  margin: var(--space-3) auto;
  padding-top: clamp(12px, 3vw, 40px);
  background: var(--color-surface-muted);
}

.entame-product-detail .entame-product-detail__inner {
  padding-top: clamp(12px, 3vw, 20px);
}

/* ---- パンくず ---- */
.entame-breadcrumb {
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.entame-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px 8px;
}

.entame-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.entame-breadcrumb__item + .entame-breadcrumb__item::before {
  content: "›";
  color: var(--color-text-muted);
  font-weight: 700;
}

.entame-breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--motion-duration-instant) ease;
}

.entame-breadcrumb__item a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.entame-breadcrumb__item[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* ---- タイトル ---- */
.entame-product-detail__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-text-primary);
  word-break: break-word;
}

/* ---- ヒーロー画像 ---- */
.entame-product-hero {
  margin: 0 0 var(--space-5);
}

.entame-product-hero__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 販売情報（CTA 黄背景・黒文字、共有ボタンと横並び） ---- */
.entame-product-detail__sale-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-background);
  position: relative;
}

.entame-product-detail__sale {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  color: var(--color-border-strong);
  font-weight: 800;
  line-height: 1.5;
}

/* 販売終了ステータス（黒系チップ。あと◯日のマゼンタとは別系統で「終了」を明示） */
.entame-product-detail__sale-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 2px;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--color-border-strong);
  color: var(--color-surface-muted);
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.entame-product-detail__share {
  /* ヘッダー SNS アイコンと同じ視覚言語（黒背景＋白アイコン）。
          高さは親の align-items:stretch により隣接 sale に追従。 */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-border-strong);
  color: var(--color-surface-muted);
  cursor: pointer;
  transition: opacity var(--motion-duration-instant) ease;
  margin: auto;
}

.entame-product-detail__share:hover, .entame-product-detail__share:focus-visible {
  opacity: 0.8;
}

.entame-product-detail__sale-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
}

.entame-product-detail__sale-key {
  font-size: 0.9rem;
}

.entame-product-detail__sale-value {
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  letter-spacing: 0.02em;
}

.entame-product-detail__sale-remaining {
  display: inline-flex;
  align-items: center;
  margin: auto 4px;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--color-action);
  color: var(--color-surface-muted);
  font-size: clamp(.9rem, 1.2vw, 1.2rem);
  font-weight: 700;
}

.entame-product-detail__sale-remaining.is-urgent {
  animation: entame-pulse 1.4s ease-in-out infinite;
}

@keyframes entame-pulse {
  0%, 100% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.06);
  }
}

.entame-product-detail__sale-tax {
  margin-left: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.85;
  font-feature-settings: "palt"1;
}

/* ---- 本文（the_content） ---- */
.entame-product-detail__body {
  margin: 0 0 var(--space-4);
  font-size: clamp(0.98rem, 2vw, 1.1rem);
  line-height: 2.2;
  color: var(--color-text-primary);
}

.entame-product-detail__body > * + * {
  margin-top: var(--space-3);
}

.entame-product-detail__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entame-product-detail__body a:hover {
  color: var(--color-accent-hover);
}

/* ---- ラインナップ見出し ---- */
.entame-product-designs {
  margin: 0 0 var(--space-4);
}

.entame-product-designs__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 2px solid var(--color-border-strong);
  border-top: 2px solid var(--color-border-strong);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 800;
  color: var(--color-text-primary);
}

.entame-product-designs__heading-main {
  letter-spacing: 0.02em;
}

.entame-product-designs__heading-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---- 絵柄グリッド ---- */
.entame-product-designs__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3) var(--space-2);
}

.entame-design-card {
  margin: 0;
}

.entame-design-card.is-hidden {
  display: none;
}

.entame-design-card__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: transform var(--motion-duration-instant) ease;
}

.entame-design-card__trigger:hover {
  transform: translateY(-2px);
}

.entame-design-card__trigger:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.entame-design-card__image-wrap {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.entame-design-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.entame-design-card__trigger:hover .entame-design-card__image {
  transform: scale(1.04);
}

.entame-design-card__label {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
  word-break: break-word;
}

.entame-product-designs__more {
  display: flex;
  justify-content: center;
  margin: var(--space-4) auto var(--space-5);
}

.entame-product-designs__more-btn {
  /* .entame-more-link と同じ CTA 黄 pill ボタン */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  width: 80%;
  max-width: 360px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 999px;
  background: var(--color-cta);
  color: var(--color-border-strong);
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color var(--motion-duration-instant) ease;
  font-feature-settings: "palt"1;
}

.entame-product-designs__more-btn:hover, .entame-product-designs__more-btn:focus-visible {
  background-color: var(--color-cta-hover);
  color: var(--color-border-strong);
}

.entame-product-designs__more-icon {
  font-weight: 800;
}

.entame-product-designs__more-count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---- コンテンツ番号 + 共有 + QR ツール ---- */
.entame-product-tool {
  margin: 0 0 var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-background);
}

.entame-product-tool__header {
  margin: 0 0 var(--space-4);
  text-align: center;
}

.entame-product-tool__intro {
  /* TOP の日本語サブ見出しと同じ視覚言語。商品ページの章扉のためサイズだけ大きめに。 */
  margin: 0 0 var(--space-2);
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-border-strong);
}

.entame-product-tool__stores {
  margin: 0;
  font-size: 0.85rem;
  font-size: clamp(0.85rem, 1.2vw, 1.2rem);
  font-weight: 700;
  color: var(--color-accent);
}

/* コード行（ラベル + 番号 + コピー） */
.entame-product-tool__codes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.entame-code-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}

.entame-code-row__label {
  flex-shrink: 0;
  /* __field-label の内側に置かれた際、後続のテキスト「コピー機に入力する番号」との視覚的な間隔を確保 */
  margin-right: 6px;
  padding: 2px 10px;
  background: var(--color-text-primary);
  color: var(--color-surface-muted);
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-block;
  min-width: 50px;
  text-align: center;
}

.entame-code-row__field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.entame-code-row__field-label {
  font-size: 1rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.entame-code-row__code {
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--color-text-primary);
}

/* コード未登録時の代替メッセージ（「※コンテンツ番号は商品概要欄をご確認ください。」など）。
   コード番号の太字大文字ではなく、補足説明として読みやすい階層に。 */
.entame-code-row__notice {
  font-weight: 400;
  color: var(--color-action);
  line-height: 1.5;
}

/* X / LINE 共有リンク */
.entame-product-tool__shares {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  max-width: 400px;
  margin: auto;
}

.entame-product-tool__share {
  /* SNS ブランドカラーの塗りボタン。X=黒、LINE=緑（--color-brand-line）。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 50%;
  height: 56px;
  padding: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-border-strong);
  color: var(--color-surface-muted);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--motion-duration-instant) ease;
}

/* アイコンサイズ: HTML 属性（14px）を上書きし font-size に追従。
      .entame-more-link__icon / .entame-contact-box__icon と同じ em ベース指定。 */
.entame-product-tool__share svg {
  width: 1.6em;
  height: 1.6em;
}

.entame-product-tool__share.entame-product-tool__share--line svg {
  width: 2em;
  height: 2em;
}

.entame-product-tool__share:hover, .entame-product-tool__share:focus-visible {
  opacity: 0.85;
  color: var(--color-surface-muted);
}

.entame-product-tool__share--line {
  background-color: var(--color-brand-line);
}

/* QRコード */
.entame-product-tool__qr {
  margin: var(--space-4) 0;
}

.entame-qr-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}

.entame-qr-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-border-muted);
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
  background-color var(--motion-duration-instant) ease, color var(--motion-duration-instant) ease, border-color var(--motion-duration-instant) ease;
}

.entame-qr-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.entame-qr-tab.is-active {
  border-color: var(--color-cta);
  background: var(--color-cta);
  color: var(--color-border-strong);
}

.entame-qr-pane {
  display: flex;
  justify-content: center;
}

.entame-qr-card {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.entame-qr-card.is-active {
  display: flex;
  min-width: 100%;
}

.entame-qr-card__image {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: var(--space-2);
  background: var(--color-surface-muted);
}

.entame-qr-card__save {
  /* .entame-more-link と同じ CTA 黄 pill ボタン */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 360px;
  height: 60px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: 999px;
  background: var(--color-cta);
  color: var(--color-border-strong);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-duration-instant) ease;
}

.entame-qr-card__save:hover, .entame-qr-card__save:focus-visible {
  background: var(--color-cta-hover);
  color: var(--color-border-strong);
}

/* ---- ライトボックス（絵柄拡大） ---- */
.entame-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  animation: entame-lightbox-fade var(--motion-duration-instant) ease;
}

.entame-lightbox[hidden] {
  display: none;
}

.entame-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  cursor: zoom-out;
}

.entame-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entame-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.entame-lightbox__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--motion-duration-instant) ease;
}

.entame-lightbox__close:hover {
  background: var(--color-surface-raised);
}

body.entame-no-scroll {
  overflow: hidden;
}

@keyframes entame-lightbox-fade {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}

/* ---- 商品単体レスポンシブ ---- */
@media (max-width: 1024px) {
  .entame-product-designs__grid {
  grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .entame-product-hero {
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  }
  .entame-product-hero__image {
  max-height: 70vh;
  }
  .entame-product-detail__share {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  bottom: -20px;
  }
  .entame-product-designs__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  }
  .entame-product-designs__heading {
  font-size: 0.95rem;
  }
  .entame-product-designs__heading-note {
  flex-basis: 100%;
  font-size: 0.75rem;
  }
  .entame-product-tool {
  padding: var(--space-4) var(--space-3);
  }
  /* SPでコード行を縦積みに（ラベル / 番号 / コピーボタン） */
  .entame-code-row {
  padding: var(--space-2);
  gap: 6px;
  }
  .entame-code-row__field {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  }
  .entame-product-tool__shares {
  gap: var(--space-2);
  }
  .entame-qr-card__image {
  max-width: 220px;
  }
  .entame-lightbox__close {
  top: -48px;
  }
  .entame-product-detail__sale-wrap {
  flex-flow: column;
  align-items: stretch;
  padding: var(--space-3) var(--space-2);
  }
  .entame-product-detail__sale-key {
  font-size: 0.75rem;
  }
}

@media (max-width: 420px) {
  .entame-product-designs__grid {
  gap: var(--space-1);
  }
}

/************************************
** 固定ページ共通（faq / about / how-to-order）
** .entame-product-detail__inner 配下の WP 標準テンプレ要素にスタイルを当てる。
** products-511 など別構造ページへの波及を防ぐためスコープを限定。
************************************/
.entame-product-detail__inner .entry-header {
  margin: 0 0 var(--space-4);
  padding: 0 0 var(--space-3);
  border-bottom: 2px solid var(--color-border-strong);
  text-align: center;
}

.entame-product-detail__inner .entry-title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

/************************************
** FAQ（Cocoon ブロック互換）
** HTML 構造: .wp-block-cocoon-blocks-faq.faq-wrap > dl.faq > dt.faq-question / dd.faq-answer
** クラス名は維持しつつ、見た目を当て直す（Cocoon ブロック互換）。
************************************/
.faq-wrap {
  margin: 0 0 var(--space-4);
  overflow: hidden;
}

.faq-wrap > .faq {
  margin: 0;
}

/* dt / dd 共通レイアウト */
.faq-wrap .faq-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-3);
  align-items: start;
  margin: 0;
  padding: var(--space-3);
}

.faq-wrap .faq-question {
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
}

/* Q / A ラベル円 */
.faq-wrap .faq-item-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--font-family-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-surface-muted);
}

.faq-wrap .faq-question-label {
  background: var(--color-accent);
}

.faq-wrap .faq-answer-label {
  background: var(--color-action);
}

/* 本文テキスト */
.faq-wrap .faq-item-content {
  padding-top: 6px; /* ラベル円中央線とキャップハイトを揃える視覚補正 */
  line-height: 1.8;
}

.faq-wrap .faq-question-content {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Cocoon ブロックの fz-Npx span を無効化し、質問サイズの暴れを抑える（HTML は触らない） */
.faq-wrap .faq-question-content span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.faq-wrap .faq-answer-content {
  font-size: 1rem;
}

.faq-wrap .faq-answer-content p {
  margin: 0 0 var(--space-2);
}

.faq-wrap .faq-answer-content p:last-child {
  margin-bottom: 0;
}

/* Cocoon エディタが生成する空 p を非表示 */
.faq-wrap .faq-answer-content p:empty {
  display: none;
}

/* 回答内リンク */
.faq-wrap .faq-answer-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  word-break: break-word;
  transition: color 0.2s ease;
}

.faq-wrap .faq-answer-content a:hover, .faq-wrap .faq-answer-content a:focus-visible {
  color: var(--color-accent-hover);
}

@media (max-width: 600px) {
  .entame-product-detail__inner .entry-title {
  font-size: 1.375rem;
  }
  .faq-wrap .faq-item {
  grid-template-columns: 32px 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  }
  .faq-wrap .faq-item-label {
  width: 32px;
  height: 32px;
  font-size: 1.25rem;
  }
  .faq-wrap .faq-question-content {
  font-size: 1rem;
  }
  .faq-wrap .faq-answer-content {
  font-size: 0.9375rem;
  }
}

/************************************
** お問い合わせカード（about.html「カスタムHTML」ブロック用）
** 見出し → サブ → ボタン → リード → 営業時間 の情報階層に整える。
** クラシックエディタが残す is-style-blank-box-yellow / fz-Npx の多重ネストを無効化。
************************************/
.entame-contact-box {
  margin: var(--space-4) auto;
  padding: clamp(var(--space-3), 5vw, var(--space-5));
  background: var(--color-background);
  border-radius: var(--radius-md);
  text-align: center;
}

.entame-contact-box__title {
  /* h2 相当: 20→26px */
  margin: 0 0 var(--space-2);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

.entame-contact-box__subtitle {
  /* 14→16px */
  margin: 0 0 var(--space-4);
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: var(--color-text-muted);
}

.entame-contact-box__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 280px;
  max-width: 100%;
  height: 56px;
  padding: 0 var(--space-4);
  /* CTA 黄＋黒文字の pill 形状（.entame-more-link と統一）。 */
  border-radius: 999px;
  background-color: var(--color-border-strong);
  color: var(--color-surface-muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--motion-duration-instant) ease;
}

.entame-contact-box__button:hover, .entame-contact-box__button:focus-visible {
  background-color: var(--color-cta-hover);
  color: var(--color-border-strong);
}

.entame-contact-box__lead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: clamp(0.875rem, 2vw, 1rem);
  line-height: 1.8;
  color: var(--color-text-primary);
}

.entame-contact-box__hours {
  margin: 0;
  font-size: clamp(0.875rem, 2vw, 1rem);
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .entame-contact-box__button {
  width: 100%;
  min-width: 0;
  height: 52px;
  }
  .entame-contact-box__lead {
  text-align: left;
  }
  .entame-contact-box__lead br {
  display: none;
  }
}

/************************************
** WordPress エディタで指定された #FFE066 をテーマトークン --color-cta に統一
** 対象: セクション見出しブロックスタイル / numbered-list バッジ。
************************************/
html .is-style-entame-section-label {
  background-color: var(--color-cta);
  border-color: var(--color-cta);
  max-width: 100%;
}

html .entame-numbered-list {
  max-width: 100%;
}

html .entame-numbered-list__badge {
  background-color: var(--color-cta) !important;
}

html .wp-block-buttons .wp-block-button__link {
  border-radius: 999px !important;
  background-color: var(--color-border-strong);
}