/* =========================================================
   三楽 サイト共通CSS
   共通部品自立化：2026-08-16-v1
   ベース：FAQページ修正版 2026-08-02-v4
   和の食品カタログ風 × 現代的なECデザイン

   設計原則：
   ・.sr- 共通部品は固定ページ・投稿を問わず単独で成立させる
   ・サイト共通デザイントークンは :root で一元管理する
   ・固定ページ固有のCocoon調整だけ .sanraku-page に限定する
   ・ページ専用class/CSSを安易に増やさない
   ・固定ページ本文HTMLには class="sanraku-page" を付与する
   ========================================================= */


/* ------------------------------
   全ページ共通：三楽デザイントークン
   ※固定ページ・投稿・商品・案内の共通部品で共有
------------------------------ */

:root {
  --sr-red: #9d1714;
  --sr-red-deep: #7d110f;
  --sr-ink: #2c2a27;
  --sr-text: #403b35;
  --sr-muted: #756d65;
  --sr-gold: #9d773d;
  --sr-shadow: 0 12px 30px rgba(50, 38, 24, 0.035);
}


/* ------------------------------
   固定ページ共通：背景・基本
------------------------------ */

body:has(.sanraku-page) {
  background:
    radial-gradient(circle at 18% 12%, rgba(180, 150, 95, 0.018) 0, rgba(180, 150, 95, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 82% 28%, rgba(120, 90, 55, 0.012) 0, rgba(120, 90, 55, 0.012) 1px, transparent 1px),
    linear-gradient(180deg, #fffefa 0%, #fbfaf7 48%, #fffefa 100%) !important;
  background-size: 42px 42px, 56px 56px, auto !important;
  color: #222222;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
}

body:has(.sanraku-page) :where(img):not(.sr-pd-colorme-cart img) {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

body:has(.sanraku-page) a {
  color: inherit;
  text-decoration: none;
}

body:has(.sanraku-page) :where(a):not(.sr-pd-colorme-cart a):hover {
  opacity: 0.82;
}


/* ------------------------------
   固定ページ共通：Cocoon記事装飾整理
   ※固定ページタイトルは残す
------------------------------ */

body:has(.sanraku-page) .date-tags,
body:has(.sanraku-page) .sns-share,
body:has(.sanraku-page) .sns-follow,
body:has(.sanraku-page) .author-info,
body:has(.sanraku-page) .under-entry-content {
  display: none !important;
}

body:has(.sanraku-page) .main,
body:has(.sanraku-page) .content,
body:has(.sanraku-page) .entry-content,
body:has(.sanraku-page) .article {
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.sanraku-page) .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}


/* ------------------------------
   固定ページ共通：ページタイトル H1
   ※ページ専用CSSでは触らない
------------------------------ */

body:has(.sanraku-page) .article h1.entry-title,
body:has(.sanraku-page) .entry-title {
  width: min(1080px, calc(100% - 48px));
  margin: 42px auto 8px !important;
  padding: 0 !important;
  color: #2c2a27 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif !important;
  font-size: clamp(25px, 2.5vw, 36px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em;
  line-height: 1.68 !important;
  text-align: left;
  text-wrap: balance;
}

@supports (word-break: auto-phrase) {
  body:has(.sanraku-page) .article h1.entry-title,
  body:has(.sanraku-page) .entry-title {
    word-break: auto-phrase;
  }
}

body:has(.sanraku-page) .entry-title::before,
body:has(.sanraku-page) .entry-title::after,
.sanraku-page h2::before,
.sanraku-page h2::after,
.sanraku-page h3::before,
.sanraku-page h3::after,
.sanraku-page h4::before,
.sanraku-page h4::after,
.sanraku-page h5::before,
.sanraku-page h5::after,
.sanraku-page h6::before,
.sanraku-page h6::after,
.sanraku-page .sr-hero-image::before {
  content: none !important;
  display: none !important;
}


/* ------------------------------
   固定ページ共通：Cocoon見出し装飾解除
------------------------------ */

.sanraku-page h2,
.sanraku-page h3,
.sanraku-page h4,
.sanraku-page h5,
.sanraku-page h6 {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  text-shadow: none !important;
}

/* ------------------------------
   固定ページ共通：背景・本文基本
   ※共通色・影は :root のデザイントークンを使用
------------------------------ */

.sanraku-page {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 253, 248, 0.9)),
    radial-gradient(circle at 10% 20%, rgba(170, 130, 65, 0.016), transparent 28%),
    radial-gradient(circle at 90% 50%, rgba(190, 80, 60, 0.01), transparent 30%);
  color: var(--sr-text);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

.sanraku-page p {
  color: var(--sr-text);
  letter-spacing: 0.04em;
}

.sanraku-page figure {
  margin: 0;
}


/* ------------------------------
   固定ページ共通：日本語の自然な折り返し
   ※見出しの1文字残り・不自然な語中改行を抑える
------------------------------ */

.sanraku-page .sr-hero-title,
.sanraku-page .sr-title,
.sanraku-page .sr-brand-name,
.sanraku-page .sr-page-mini-card h3 {
  text-wrap: balance;
}

.sanraku-page .sr-hero-text,
.sanraku-page .sr-lead,
.sanraku-page .sr-page-text p,
.sanraku-page .sr-page-mini-card p {
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  .sanraku-page .sr-hero-title,
  .sanraku-page .sr-title,
  .sanraku-page .sr-brand-name,
  .sanraku-page .sr-page-mini-card h3,
  .sanraku-page .sr-hero-text,
  .sanraku-page .sr-lead,
  .sanraku-page .sr-page-text p,
  .sanraku-page .sr-page-mini-card p {
    word-break: auto-phrase;
  }
}

.sanraku-page :where(img):not(.sr-pd-colorme-cart img) {
  display: block;
}


/* ------------------------------
   固定ページ共通：ヒーロー基本レイアウト
------------------------------ */

.sanraku-page .sr-hero {
  padding: 86px 0 74px;
}

.sanraku-page .sr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 66px;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}

.sanraku-page .sr-hero-copy {
  max-width: 500px;
}

.sanraku-page .sr-hero-kicker {
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.sanraku-page .sr-hero-title {
  margin: 0 !important;
  color: var(--sr-ink) !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em;
  line-height: 1.5 !important;
}

.sanraku-page .sr-hero-title-line,
.sanraku-page .sr-hero-title-main {
  display: block;
}

.sanraku-page .sr-hero-title-main {
  font-size: clamp(30px, 3.4vw, 44px);
}

.sanraku-page .sr-hero-title-brand {
  display: block;
  margin-top: 4px;
  color: #1f1b17;
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.sanraku-page .sr-hero-sub {
  margin: 28px 0 0;
  color: var(--sr-red);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.85;
}

.sanraku-page .sr-hero-text {
  margin: 24px 0 0;
  color: #5e5750;
  font-size: 16px;
  line-height: 2.04;
  letter-spacing: 0.045em;
}

.sanraku-page .sr-hero-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(45, 35, 22, 0.04);
}

.sanraku-page .sr-hero-image img {
  width: 100%;
  aspect-ratio: 1.26 / 1;
  object-fit: cover;
}


/* ------------------------------
   全ページ共通：基本レイアウト・見出し・ボタン
------------------------------ */

.sr-inner {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}

.sr-section {
  padding: 102px 0;
}

.sr-section-soft {
  padding: 102px 0;
  background:
    linear-gradient(180deg, rgba(248, 246, 241, 0.46), rgba(255, 254, 250, 0.92));
  border-top: 1px solid rgba(86, 68, 42, 0.035);
  border-bottom: 1px solid rgba(86, 68, 42, 0.035);
}

.sr-section-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.sr-label {
  display: block;
  margin: 0 0 15px;
  color: var(--sr-gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: none;
}

.sr-title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sr-ink) !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif !important;
  font-size: clamp(25px, 2.5vw, 36px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em;
  line-height: 1.68 !important;
}

.sr-title::before,
.sr-title::after {
  content: none !important;
  display: none !important;
}

.sr-lead {
  margin: 22px auto 0;
  color: var(--sr-muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 2.04;
  letter-spacing: 0.04em;
}

.sr-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}


.sr-button-primary,
.sr-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 22px;
  border-radius: 999px;
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  box-sizing: border-box;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.sr-button-primary {
  background: var(--sr-red, #9d1714);
  color: #ffffff !important;
  border: 1px solid var(--sr-red, #9d1714);
}

.sr-button-outline {
  background: rgba(255, 255, 255, 0.76);
  color: var(--sr-red, #9d1714) !important;
  border: 1px solid rgba(157, 23, 20, 0.26);
}

.sr-button-primary:hover,
.sr-button-outline:hover {
  text-decoration: none !important;
  transform: translateY(-1px);
}

.sr-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--sr-red) !important;
  border-bottom: 1px solid rgba(157, 23, 20, 0.38);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.4;
}

.sr-text-link::after {
  content: "→";
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1;
}


/* ------------------------------
   固定ページ共通：英字ラベル
------------------------------ */

.sanraku-page .sr-label,
.sanraku-page .sr-hero-kicker {
  color: var(--sr-gold) !important;
}


/* ------------------------------
   固定ページ共通：固定ページでは写真内側ラインを出さない
------------------------------ */

/* ------------------------------
   固定ページ共通：余白
------------------------------ */

.sanraku-page .sr-section,
.sanraku-page .sr-section-soft {
  padding: 74px 0;
}

.sanraku-page .sr-section-head {
  margin-bottom: 38px;
}

.sanraku-page .sr-split-copy .sr-section-head {
  margin: 0;
  text-align: left;
}

.sanraku-page .sr-title {
  line-height: 1.62 !important;
}

.sanraku-page .sr-lead {
  line-height: 2.02;
}


/* ------------------------------
   固定ページ共通：画像付き2カラム
------------------------------ */

.sanraku-page .sr-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.sanraku-page .sr-split-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sanraku-page .sr-split-image img {
  width: 100%;
  aspect-ratio: 1.16 / 1;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(45, 35, 22, 0.035);
}

.sanraku-page .sr-split-single img {
  width: 100%;
  aspect-ratio: 1.24 / 1;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(45, 35, 22, 0.04);
}

.sanraku-page .sr-split-copy .sr-lead {
  margin-left: 0;
  font-size: 16px;
  line-height: 2.04;
}


/* ------------------------------
   固定ページ共通：ブランドカードとバッジ
------------------------------ */

.sanraku-page .sr-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.sanraku-page .sr-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--sr-red);
  border: 1px solid rgba(157, 23, 20, 0.24);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
}

.sanraku-page .sr-badge-light {
  background: rgba(255, 255, 255, 0.78);
  color: #876632;
  border: 1px solid rgba(167, 130, 69, 0.28);
}

.sanraku-page .sr-badge-brand {
  background: rgba(255, 255, 255, 0.84);
  color: var(--sr-red);
  border: 1px solid rgba(157, 23, 20, 0.24);
}

.sanraku-page .sr-badge-muted {
  background: rgba(255, 255, 255, 0.78);
  color: #806f5e;
  border: 1px solid rgba(128, 111, 94, 0.22);
}

.sanraku-page .sr-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.sanraku-page .sr-brand-card {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(86, 68, 42, 0.06);
  border-radius: 2px;
  box-shadow: var(--sr-shadow);
}

.sanraku-page .sr-brand-card img {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
}

.sanraku-page .sr-brand-body {
  padding: 42px 42px 44px;
}

.sanraku-page .sr-brand-name {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sr-ink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em;
  line-height: 1.4 !important;
}

.sanraku-page .sr-brand-catch {
  margin: 18px 0 0;
}

.sanraku-page .sr-brand-text {
  margin: 24px 0 0;
  color: #554e47;
  font-size: 15px;
  line-height: 2.02;
}


/* ------------------------------
   固定ページ共通：文章カード
------------------------------ */

.sr-page-card {
  padding: 44px 50px 46px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(86, 68, 42, 0.055);
  border-radius: 2px;
  box-shadow: var(--sr-shadow);
}

.sr-page-card .sr-section-head {
  margin-bottom: 26px;
}

.sr-page-text p {
  margin: 0;
  color: #4f4942;
  font-size: 16px;
  line-height: 2.04;
  letter-spacing: 0.04em;
}

.sr-page-text p + p {
  margin-top: 20px;
}

.sr-page-text ul,
.sr-page-text ol {
  margin: 18px 0 0;
  padding-left: 1.35em;
  color: #4f4942;
}

.sr-page-text li {
  color: #4f4942;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.sr-page-text li + li {
  margin-top: 6px;
}

.sr-page-card hr {
  height: 0;
  margin: 22px 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(86, 68, 42, 0.12);
}


/* ------------------------------
   全ページ共通：YouTube埋め込み
   ※共通カード内ではCocoon標準の640px上限を解除
------------------------------ */

.sr-page-card .wp-block-embed-youtube .video-container {
  max-width: none;
}


/* ------------------------------
   全ページ共通：引用・感想カード
   ※お客様の声、メディア引用、レビュー等で共通利用
------------------------------ */

.sr-quote-list {
  columns: 2 360px;
  column-gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

.sr-quote-item {
  position: relative;
  break-inside: avoid;
  margin: 0 0 20px;
  padding: 28px 30px 28px 38px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(86, 68, 42, 0.075);
  border-left: 3px solid rgba(157, 119, 61, 0.58);
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(50, 38, 24, 0.035);
  box-sizing: border-box;
}

.sr-quote-item::before {
  content: "“";
  position: absolute;
  top: 9px;
  left: 14px;
  color: rgba(157, 119, 61, 0.24);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.sr-quote-item p {
  margin: 0;
  color: #514a43;
  font-size: 15.5px;
  line-height: 1.95;
  letter-spacing: 0.035em;
}

.sr-quote-item p + p {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .sr-quote-list {
    columns: 1;
  }

  .sr-quote-item {
    margin-bottom: 16px;
    padding: 24px 22px 24px 32px;
  }

  .sr-quote-item::before {
    left: 11px;
    font-size: 34px;
  }

  .sr-quote-item p {
    font-size: 14.8px;
    line-height: 1.95;
  }
}


/* ------------------------------
   固定ページ共通：カードグリッド
------------------------------ */

.sr-page-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.sr-page-mini-card {
  padding: 28px 24px 30px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(86, 68, 42, 0.055);
  border-radius: 2px;
  box-shadow: var(--sr-shadow);
}

.sr-page-mini-card h3 {
  margin: 0 0 13px !important;
  padding: 0 !important;
  color: var(--sr-red) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em;
  line-height: 1.65 !important;
}

.sr-page-mini-card h3::before,
.sr-page-mini-card h3::after {
  content: none !important;
  display: none !important;
}

.sr-page-mini-card p {
  margin: 0;
  color: #5b544d;
  font-size: 15px;
  line-height: 2;
}


/* ------------------------------
   固定ページ共通：横長写真
------------------------------ */

.sr-page-wide-photo {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(45, 35, 22, 0.04);
}

.sr-page-wide-photo img {
  width: 100%;
  aspect-ratio: 1.72 / 1;
  object-fit: cover;
  object-position: center center;
}


/* ------------------------------
   固定ページ共通：FAQ
   ※今後FAQは .sr-faq-list / .sr-faq-item に統一
------------------------------ */

.sr-faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}

.sr-faq-item {
  padding: 34px 42px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(86, 68, 42, 0.075);
  border-radius: 2px;
  box-shadow: none;
}

.sr-faq-item h3 {
  position: relative;
  margin: 0 0 18px !important;
  padding: 0 0 0 38px !important;
  color: var(--sr-ink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  line-height: 1.75 !important;
}

.sr-faq-item h3::after {
  content: none !important;
  display: none !important;
}

.sr-faq-item h3::before {
  content: "Q" !important;
  position: absolute;
  left: 0;
  top: 0.02em;
  display: block !important;
  color: var(--sr-red);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.sr-faq-item p {
  position: relative;
  margin: 0;
  padding-left: 38px;
  color: #554e47;
  font-size: 16px;
  line-height: 2.02;
  letter-spacing: 0.04em;
}

.sr-faq-item p::before,
.sanraku-faq-page .sr-faq-answer::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0.02em;
  color: var(--sr-gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}


/* ------------------------------
   よくある質問ページ専用
   対象：class="sanraku-faq-page"
------------------------------ */

.sanraku-faq-page .sr-faq-section:first-child {
  padding-top: 12px;
}

.sanraku-faq-page p.sr-faq-intro {
  max-width: 720px;
  margin: 0 auto 44px;
  color: #625b54;
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 15.5px;
  line-height: 2;
  text-align: center;
}

.sanraku-faq-page .sr-faq-answer {
  position: relative;
  padding-left: 38px;
}

.sanraku-faq-page .sr-faq-item p {
  padding-left: 0;
}

.sanraku-faq-page .sr-faq-item p::before {
  content: none;
  display: none;
}

.sanraku-faq-page .sr-faq-answer p + p,
.sanraku-faq-page .sr-faq-answer p + ul,
.sanraku-faq-page .sr-faq-answer ul + p {
  margin-top: 12px;
}

.sanraku-faq-page .sr-faq-answer ul {
  margin: 12px 0 0;
  padding-left: 1.4em;
  color: #554e47;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.sanraku-faq-page .sr-faq-answer li + li {
  margin-top: 4px;
}

.sanraku-faq-page .sr-faq-answer a {
  color: var(--sr-red);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* ------------------------------
   固定ページ共通：CTA
------------------------------ */

.sr-page-cta {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.sr-page-cta .sr-lead {
  max-width: 720px;
}

.sanraku-page .sr-page-cta .sr-title {
  color: var(--sr-red) !important;
}

.sr-page-cta .sr-button-row {
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}

/* ------------------------------
   固定ページ共通：スマホ用見出し改行補助
------------------------------ */

.sr-title-sp-break span {
  display: inline;
}


/* ------------------------------
   固定ページ共通：フッター下余白調整
------------------------------ */

body:has(.sanraku-page) #footer,
body:has(.sanraku-page) footer,
body:has(.sanraku-page) .footer,
body:has(.sanraku-page) .site-footer,
body:has(.sanraku-page) .sr-footer {
  min-height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body:has(.sanraku-page) #footer-in,
body:has(.sanraku-page) .footer-in,
body:has(.sanraku-page) .footer-bottom,
body:has(.sanraku-page) .site-footer-inner,
body:has(.sanraku-page) .sr-footer-inner {
  min-height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 26px !important;
}

body:has(.sanraku-page) .content,
body:has(.sanraku-page) .main,
body:has(.sanraku-page) .article {
  margin-bottom: 0 !important;
}


/* ------------------------------
   固定ページ共通：ヒーローのレスポンシブ基準
   ※狭いタブレットまでは2カラムを維持し、
     760px以下で初めて1カラムへ切り替える
------------------------------ */

@media (max-width: 760px) {
  .sanraku-page .sr-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .sanraku-page .sr-hero-copy {
    width: 100%;
    max-width: none;
  }

  .sanraku-page .sr-hero-title-line,
  .sanraku-page .sr-hero-title-brand {
    display: inline;
    margin-top: 0;
  }

  .sanraku-page .sr-hero-image {
    width: 100%;
  }

  /* PC用の整形改行は1カラム時に解除し、自然な折り返しへ */
  .sanraku-page .sr-lead br {
    display: none;
  }
}


/* ------------------------------
   固定ページ共通：タブレット
------------------------------ */

@media (max-width: 1024px) {
  body:has(.sanraku-page) .entry-title {
    width: min(900px, calc(100% - 44px));
  }

  .sanraku-page .sr-section,
  .sanraku-page .sr-section-soft {
    padding: 66px 0;
  }

  .sr-page-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sanraku-page .sr-split {
    grid-template-columns: 1fr;
  }

  .sanraku-page .sr-brand-grid {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------
   固定ページ共通：スマホ
------------------------------ */

@media (max-width: 560px) {
  body:has(.sanraku-page) .entry-title {
    width: calc(100% - 30px);
    margin: 28px auto 4px !important;
    font-size: 24px !important;
    line-height: 1.68 !important;
    letter-spacing: 0.06em;
    text-align: left;
  }

  .sanraku-page .sr-section,
  .sanraku-page .sr-section-soft {
    padding: 52px 0;
  }

  .sanraku-page .sr-section-head {
    margin-bottom: 30px;
  }

  .sanraku-page .sr-split {
    gap: 34px;
  }

  .sanraku-page .sr-split-copy .sr-section-head {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 18px;
    text-align: center;
  }

  .sanraku-page .sr-split-copy .sr-lead {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .sanraku-page .sr-split-image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sanraku-page .sr-split-image img {
    aspect-ratio: 1 / 1;
  }

  .sanraku-page .sr-brand-body {
    padding: 34px 30px 36px;
  }

  .sanraku-page .sr-brand-name {
    font-size: 24px !important;
  }

  .sr-page-card {
    padding: 32px 26px 34px;
  }

  .sr-page-text p {
    font-size: 15px;
    line-height: 2;
  }

  .sr-page-text p + p {
    margin-top: 18px;
  }

  .sr-page-text li {
    font-size: 15px;
    line-height: 1.95;
  }

  .sr-page-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sr-page-mini-card {
    padding: 26px 24px 28px;
  }

  .sr-page-wide-photo {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .sr-page-wide-photo img {
    aspect-ratio: 1.05 / 1;
  }

  .sr-faq-list {
    gap: 16px;
  }

  .sr-faq-item {
    padding: 26px 22px;
  }

  .sr-faq-item h3 {
    margin-bottom: 16px !important;
    padding-left: 32px !important;
    font-size: 15.5px !important;
    line-height: 1.75 !important;
  }

  .sr-faq-item h3::before {
    font-size: 22px;
  }

  .sr-faq-item p {
    padding-left: 32px;
    font-size: 14.8px;
    line-height: 2;
  }

  .sr-faq-item p::before {
    font-size: 22px;
  }

  .sanraku-faq-page .sr-faq-section:first-child {
    padding-top: 8px;
  }

  .sanraku-faq-page p.sr-faq-intro {
    margin-bottom: 38px;
    font-size: 14.8px;
  }

  .sanraku-faq-page .sr-faq-answer {
    padding-left: 32px;
  }

  .sanraku-faq-page .sr-faq-answer::before {
    font-size: 22px;
  }

  .sanraku-faq-page .sr-faq-answer ul {
    font-size: 14.8px;
    line-height: 2;
  }

  .sr-page-cta .sr-button-row {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .sr-page-cta .sr-button-primary,
  .sr-page-cta .sr-button-outline {
    width: min(100%, 280px);
  }

  .sanraku-page .sr-page-cta.sr-page-cta-stack-wide .sr-button-row,
  .sanraku-page .sr-page-cta.sr-page-cta-stack-wide .sr-button-row.sr-button-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .sanraku-page .sr-page-cta.sr-page-cta-stack-wide .sr-button-primary,
  .sanraku-page .sr-page-cta.sr-page-cta-stack-wide .sr-button-outline {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
  }

  .sr-title-sp-break span {
    display: block;
  }

  .sr-title-sp-break {
    line-height: 1.65 !important;
  }
}

/* =========================================================
   固定ページ「ご利用案内」専用
   URL：/shopping-guide/
   対象：class="sanraku-guide"
   ========================================================= */

.sanraku-guide {
  --guide-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --guide-sans: "Noto Sans JP", "Yu Gothic", "YuGothic",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --guide-text: #4f4942;
  --guide-border: rgba(86, 68, 42, 0.095);
}

.sanraku-guide > .sr-section,
.sanraku-guide > .sr-section-soft {
  padding: 38px 0;
}

.sanraku-guide > .sr-section:first-child {
  padding-top: 32px;
  padding-bottom: 28px;
}

.sanraku-guide .guide-lead-card,
.sanraku-guide .guide-info-card {
  max-width: 1000px;
  margin: 0 auto;
  padding: 34px 40px 36px;
}

.sanraku-guide .guide-lead-card {
  max-width: 960px;
}

.sanraku-guide .guide-lead-card .sr-section-head {
  margin-bottom: 0;
  text-align: center;
}

.sanraku-guide .guide-info-card .sr-section-head {
  max-width: none;
  margin-bottom: 22px;
  text-align: center;
}

.sanraku-guide .guide-lead-card .sr-lead {
  max-width: 720px;
  font-family: var(--guide-sans);
  line-height: 1.92;
  text-align: left;
}

.sanraku-guide .guide-lead-card .sr-button-row {
  justify-content: center;
  margin-top: 22px;
}

/* ページ内メニュー */
.sanraku-guide .guide-page-nav {
  max-width: 960px;
  margin: 18px auto 0;
  padding: 26px 30px 28px;
  background: #f4eee3;
  border-top: 1px solid rgba(86, 68, 42, 0.18);
  border-bottom: 1px solid rgba(86, 68, 42, 0.18);
}

.sanraku-guide .guide-page-nav-title {
  margin: 0 0 18px;
  color: #5c5045;
  font-family: var(--guide-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
}

.sanraku-guide .guide-page-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.sanraku-guide .guide-page-nav-grid a {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(86, 68, 42, 0.15);
  border-bottom: 3px solid rgba(157, 23, 20, 0.72);
  border-radius: 3px;
  box-shadow: 0 7px 18px rgba(50, 38, 24, 0.06);
  color: var(--sr-ink);
  font-family: var(--guide-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.5;
  text-align: center;
  box-sizing: border-box;
}

.sanraku-guide .guide-anchor-section {
  scroll-margin-top: 92px;
}

/* 本文 */
.sanraku-guide .guide-content-list {
  border-top: 1px solid var(--guide-border);
}

.sanraku-guide .guide-content-block {
  padding: 22px 0;
  border-bottom: 1px solid var(--guide-border);
}

.sanraku-guide .guide-content-block:first-child {
  padding-top: 18px;
}

.sanraku-guide .guide-content-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sanraku-guide .guide-content-block h3 {
  margin: 0 0 12px;
  color: var(--sr-red);
  font-family: var(--guide-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.68;
}

.sanraku-guide .guide-content-body {
  width: 100%;
}

.sanraku-guide .guide-content-body > p,
.sanraku-guide .guide-content-body > ul,
.sanraku-guide .guide-content-body > .guide-time-grid,
.sanraku-guide .guide-content-body > .guide-fee-grid,
.sanraku-guide .guide-content-body > .guide-note,
.sanraku-guide .guide-content-body > .sr-button-row {
  margin-top: 0;
  margin-bottom: 0;
}

.sanraku-guide .guide-content-body > * + * {
  margin-top: 12px;
}

.sanraku-guide .guide-content-body > .sr-button-row {
  margin-top: 18px;
}

.sanraku-guide .guide-content-body p,
.sanraku-guide .guide-content-body li {
  color: var(--guide-text);
  font-family: var(--guide-sans);
  font-size: 16px;
  line-height: 1.78;
  letter-spacing: 0.035em;
}

.sanraku-guide .guide-content-body p {
  max-width: 880px;
}

.sanraku-guide .guide-content-body ul {
  padding-left: 1.3em;
}

.sanraku-guide .guide-content-body li + li {
  margin-top: 3px;
}

/* 支払い方法 */
.sanraku-guide .guide-payment-methods {
  margin-top: 24px;
}

.sanraku-guide .guide-payment-method {
  margin: 0;
  padding: 0;
  border: 0;
}

.sanraku-guide .guide-payment-method + .guide-payment-method {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--guide-border);
}

.sanraku-guide .guide-payment-method h4 {
  margin: 0 0 8px;
  color: var(--sr-red);
  font-family: var(--guide-serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.sanraku-guide .guide-payment-method p {
  margin: 0;
}

.sanraku-guide .guide-payment-method p + p {
  margin-top: 10px;
}

.sanraku-guide .guide-bank-box {
  max-width: 880px;
  margin-top: 14px;
  padding: 14px 16px;
  background: #fffdf8;
  border: 1px solid rgba(157, 119, 61, 0.18);
  border-left: 4px solid rgba(157, 119, 61, 0.62);
  border-radius: 2px;
}

.sanraku-guide .guide-bank-list {
  margin: 0;
}

.sanraku-guide .guide-bank-list > div {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 14px;
  padding: 4px 0;
}

.sanraku-guide .guide-bank-list dt,
.sanraku-guide .guide-bank-list dd {
  margin: 0;
  color: var(--guide-text);
  font-family: var(--guide-sans);
  font-size: 14.5px;
  line-height: 1.65;
  letter-spacing: 0.025em;
}

.sanraku-guide .guide-bank-list dt {
  color: #7b5d2e;
  font-weight: 700;
}

.sanraku-guide .guide-payment-method .guide-note {
  max-width: 880px;
  margin-top: 8px;
  padding: 11px 14px;
  background: rgba(250, 247, 240, 0.68);
  border: 1px solid rgba(86, 68, 42, 0.08);
  border-radius: 2px;
}

.sanraku-guide .guide-note p {
  margin: 0;
  color: var(--sr-muted);
  font-family: var(--guide-sans);
  font-size: 14px;
  line-height: 1.72;
}

.sanraku-guide .guide-note strong {
  color: var(--sr-red);
  font-family: var(--guide-serif);
  font-weight: 700;
}


/* 配送・送料セクション内の文章間隔 */
#guide-delivery .guide-content-body p,
#guide-delivery .guide-content-body li {
  line-height: 1.62;
}

#guide-delivery .guide-content-body > * + * {
  margin-top: 8px;
}

#guide-delivery .guide-note {
  padding: 10px 12px;
}

#guide-delivery .guide-note p {
  line-height: 1.6;
}

#guide-delivery .guide-fee-item:last-child .guide-fee-price {
  font-size: 13.5px;
}

/* 時間指定 */
.sanraku-guide .guide-time-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 880px;
}

.sanraku-guide .guide-time-item {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(86, 68, 42, 0.10);
  color: var(--sr-ink);
  font-family: var(--guide-sans);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
}

/* 送料 */
.sanraku-guide .guide-fee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.25fr;
  gap: 8px;
  max-width: 880px;
}

.sanraku-guide .guide-fee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 9px 10px;
  background: #ffffff;
  border: 1px solid rgba(86, 68, 42, 0.10);
}

.sanraku-guide .guide-fee-area {
  color: var(--sr-red);
  font-family: var(--guide-serif);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.sanraku-guide .guide-fee-price {
  margin: 0;
  color: var(--guide-text);
  font-family: var(--guide-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}

/* 支払い方法以外の注意枠 */
.sanraku-guide .guide-content-body > .guide-note {
  max-width: 880px;
  padding: 12px 14px;
  background: rgba(250, 247, 240, 0.68);
  border: 1px solid rgba(86, 68, 42, 0.08);
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .sanraku-guide .guide-time-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sanraku-guide .guide-fee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .sanraku-guide > .sr-section,
  .sanraku-guide > .sr-section-soft {
    padding: 28px 0;
  }

  .sanraku-guide > .sr-section:first-child {
    padding-top: 26px;
    padding-bottom: 22px;
  }

  .sanraku-guide .guide-lead-card,
  .sanraku-guide .guide-info-card {
    padding: 28px 22px 30px;
  }

  .sanraku-guide .guide-page-nav {
    margin-top: 16px;
    padding: 20px 14px 22px;
  }

  .sanraku-guide .guide-page-nav-title {
    font-size: 15px;
    margin-bottom: 14px;
  }

  .sanraku-guide .guide-page-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sanraku-guide .guide-page-nav-grid a {
    min-height: 64px;
    padding: 10px 8px;
    font-size: 13.5px;
  }

  .sanraku-guide .guide-time-item {
    min-height: 40px;
    padding: 7px 8px;
  }

  .sanraku-guide .guide-content-block {
    padding: 18px 0;
  }

  .sanraku-guide .guide-content-block h3 {
    font-size: 16px;
  }

  .sanraku-guide .guide-content-body p,
  .sanraku-guide .guide-content-body li {
    font-size: 15px;
    line-height: 1.75;
  }

  .sanraku-guide .guide-content-body .sr-button-primary,
  .sanraku-guide .guide-content-body .sr-button-outline {
    width: 100%;
  }

  .sanraku-guide .guide-payment-method + .guide-payment-method {
    margin-top: 22px;
    padding-top: 20px;
  }

  .sanraku-guide .guide-bank-list > div {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .sanraku-guide .guide-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sanraku-guide .guide-fee-grid {
    grid-template-columns: 1fr;
  }

  .sanraku-guide .guide-fee-item {
    min-height: 44px;
  }
}


/* =========================================================
   三楽 商品ページ共通CSS
   使用箇所：商品紹介固定ページ
   対象：class="sanraku-product-page"
   目的：商品画像・購入欄・商品情報・FAQを商品ページとして整える
   ========================================================= */


/* ------------------------------
   商品ページ基本
------------------------------ */

.sanraku-product-page {
  --pd-red: var(--sr-red, #9d1714);
  --pd-red-deep: var(--sr-red-deep, #7d110f);
  --pd-ink: var(--sr-ink, #2c2a27);
  --pd-text: var(--sr-text, #403b35);
  --pd-muted: var(--sr-muted, #756d65);
  --pd-gold: var(--sr-gold, #9d773d);
  --pd-border: rgba(86, 68, 42, 0.08);
  --pd-soft: rgba(255, 253, 247, 0.9);
  --pd-shadow: 0 14px 34px rgba(50, 38, 24, 0.04);

  color: var(--pd-text);
}

.sanraku-product-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sanraku-product-page p,
.sanraku-product-page li,
.sanraku-product-page dt,
.sanraku-product-page dd {
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
}


/* ------------------------------
   Cocoon本文幅の整理
------------------------------ */

body:has(.sanraku-product-page) .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

body:has(.sanraku-product-page) .article,
body:has(.sanraku-product-page) .main,
body:has(.sanraku-product-page) .content {
  background: transparent !important;
  box-shadow: none !important;
}


/* ------------------------------
   商品ページタイトル
------------------------------ */

body:has(.sanraku-product-page) .article h1.entry-title,
body:has(.sanraku-product-page) h1.entry-title,
body:has(.sanraku-product-page) .entry-title {
  width: min(998px, calc(100% - 48px)) !important;
  margin: 42px auto 24px !important;
  padding: 0 !important;
  font-size: clamp(24px, 1.78vw, 30px) !important;
  line-height: 1.72 !important;
  letter-spacing: 0.04em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict;
}


/* ------------------------------
   商品ページ内の文字読みやすさ調整
------------------------------ */

.sanraku-product-page .sr-page-text p {
  font-size: 16px;
  line-height: 2.02;
  letter-spacing: 0.045em;
}

.sanraku-product-page .sr-lead {
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.045em;
}

.sanraku-product-page .sr-section-head .sr-title {
  line-height: 1.68 !important;
}

.sanraku-product-page .sr-section-head .sr-label {
  font-size: 12px;
  letter-spacing: 0.18em;
}


/* ------------------------------
   ファーストビュー
------------------------------ */

.sr-pd-hero {
  padding: 22px 0 68px;
  overflow: visible;
}

.sr-pd-hero-grid {
  width: min(1040px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(360px, 420px);
  gap: 38px;
  align-items: start;
  overflow: visible;
}

.sr-pd-gallery {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  min-width: 0;
  margin: 0 auto;
  overflow: visible;
}

.sr-pd-main-photo,
.sr-pd-image-card {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--pd-border);
  border-radius: 4px;
  box-shadow: var(--pd-shadow);
}

.sr-pd-main-photo {
  max-width: 540px;
  aspect-ratio: 1 / 1;
}

.sr-pd-main-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  padding: 0;
  transform: none;
  box-sizing: border-box;
}

.sr-pd-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  position: relative;
  z-index: 5;
  overflow: visible;
}

.sr-pd-sub-photo {
  margin: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
  cursor: zoom-in;
  background: transparent !important;
  border: none !important;
  border-radius: 4px;
  box-shadow: none !important;
}

.sr-pd-sub-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 4px;
  box-shadow: none !important;
  transition:
    opacity 0.2s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  transform-origin: center top;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
  .sr-pd-sub-grid:hover .sr-pd-sub-photo:not(:hover) img {
    opacity: 0.45;
  }

  .sr-pd-sub-photo:hover {
    z-index: 100;
  }

  .sr-pd-sub-photo:hover img {
    transform: scale(1.85);
    border-color: rgba(157, 119, 61, 0.28) !important;
    box-shadow: 0 18px 42px rgba(50, 38, 24, 0.22) !important;
  }

  .sr-pd-sub-photo:first-child:hover img {
    transform-origin: left top;
  }

  .sr-pd-sub-photo:nth-child(2):hover img {
    transform-origin: center top;
  }

  .sr-pd-sub-photo:last-child:hover img {
    transform-origin: right top;
  }
}


/* ------------------------------
   購入カード
------------------------------ */

.sr-pd-buy-card {
  position: sticky;
  top: 24px;
  z-index: 1;
  padding: 30px 30px 30px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--pd-border);
  border-radius: 6px;
  box-shadow: var(--pd-shadow);
}


/* ------------------------------
   商品判別タグ
------------------------------ */

.sr-pd-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}

.sr-pd-badge {
  --tag-bg: #ffffff;
  --tag-border: rgba(86, 68, 42, 0.12);
  --tag-text: var(--pd-text);
  --tag-label-bg: #806f5e;
  --tag-label-text: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 12px 0 7px;
  border-radius: 999px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--tag-text);
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(50, 38, 24, 0.035);
}

.sr-pd-badge::before {
  content: attr(data-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tag-label-bg);
  color: var(--tag-label-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.sr-pd-tag-shipping {
  --tag-bg: #fff5dc;
  --tag-border: rgba(184, 137, 32, 0.52);
  --tag-text: #8a5d0c;
  --tag-label-bg: #b88920;
  box-shadow: 0 5px 14px rgba(184, 137, 32, 0.13);
}

.sr-pd-tag-quality {
  --tag-bg: #fff7f6;
  --tag-border: rgba(157, 23, 20, 0.34);
  --tag-text: #9d1714;
  --tag-label-bg: #9d1714;
}

.sr-pd-tag-use {
  --tag-bg: #f3faf5;
  --tag-border: rgba(76, 137, 100, 0.34);
  --tag-text: #356b4f;
  --tag-label-bg: #4f8a68;
}

.sr-pd-tag-taste {
  --tag-bg: #fff6ec;
  --tag-border: rgba(183, 111, 36, 0.38);
  --tag-text: #9a5a16;
  --tag-label-bg: #b26a18;
}

.sr-pd-tag-volume {
  --tag-bg: #f5f8fc;
  --tag-border: rgba(93, 116, 145, 0.34);
  --tag-text: #4d6380;
  --tag-label-bg: #627894;
}

.sr-pd-tag-gift {
  --tag-bg: #fbf5fb;
  --tag-border: rgba(139, 91, 139, 0.34);
  --tag-text: #7b4b7b;
  --tag-label-bg: #8b5b8b;
}

.sr-pd-tag-delivery {
  --tag-bg: #f2f8fa;
  --tag-border: rgba(72, 132, 150, 0.34);
  --tag-text: #3d7486;
  --tag-label-bg: #4b8fa3;
}


/* ------------------------------
   購入カード内 商品名
------------------------------ */

.sr-pd-name {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pd-ink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif !important;
  font-size: clamp(23px, 2vw, 31px) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.07em;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

.sr-pd-name span {
  display: block;
  margin-top: 4px;
  font-size: 0.86em;
}

.sr-pd-catch {
  margin: 18px 0 0;
  color: var(--pd-muted);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.045em;
}


/* ------------------------------
   価格表示
------------------------------ */

.sr-pd-price-box {
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin-top: 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.sr-pd-price-label {
  display: block;
  margin: 0 0 5px;
  color: var(--pd-gold);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.sr-pd-price {
  margin: 0;
  color: var(--pd-red-deep);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.03em;
}

.sr-pd-price small {
  margin-left: 7px;
  color: var(--pd-red-deep);
  font-size: 13.5px;
  font-weight: 700;
}


/* ------------------------------
   購入カード内ポイント
------------------------------ */

.sr-pd-point-list {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(86, 68, 42, 0.08);
  list-style: none;
  display: grid;
  gap: 8px;
}

.sr-pd-point-list li {
  position: relative;
  margin: 0;
  padding-left: 22px;
  color: #514a43;
  font-size: 15.3px;
  line-height: 1.82;
  letter-spacing: 0.045em;
}

.sr-pd-point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pd-red);
}


/* ------------------------------
   どこでもカラーミー
------------------------------ */

.sr-pd-cart-panel {
  margin-top: 10px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.sr-pd-cart-heading {
  margin: 0 0 0 !important;
  padding: 0 !important;
  color: var(--pd-ink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  line-height: 1.5 !important;
}

.sr-pd-colorme-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: -2px 0 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart table,
body:has(.sanraku-product-page) .sr-pd-colorme-cart tbody,
body:has(.sanraku-product-page) .sr-pd-colorme-cart thead,
body:has(.sanraku-product-page) .sr-pd-colorme-cart tfoot,
body:has(.sanraku-product-page) .sr-pd-colorme-cart tr,
body:has(.sanraku-product-page) .sr-pd-colorme-cart th,
body:has(.sanraku-product-page) .sr-pd-colorme-cart td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart table {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  margin: 0 auto 4px !important;
  padding: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart th,
body:has(.sanraku-product-page) .sr-pd-colorme-cart td {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 0 5px 0 !important;
  border-bottom: 1px solid #d9bd8b !important;
  color: #222222 !important;
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em !important;
  vertical-align: middle !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart th {
  width: 92px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart td {
  width: 128px !important;
  text-align: right !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]),
body:has(.sanraku-product-page) .sr-pd-colorme-cart input[type="text"],
body:has(.sanraku-product-page) .sr-pd-colorme-cart input[type="number"] {
  display: inline-block !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  margin: 0 0 0 auto !important;
  padding: 2px 6px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #777777 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: #222222 !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transform: none !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart input[type="submit"],
body:has(.sanraku-product-page) .sr-pd-colorme-cart input[type="button"],
body:has(.sanraku-product-page) .sr-pd-colorme-cart button,
body:has(.sanraku-product-page) .sr-pd-colorme-cart a[class*="cart"],
body:has(.sanraku-product-page) .sr-pd-colorme-cart .cartjs_cart_in {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: inherit !important;
  font: inherit !important;
  line-height: normal !important;
  text-align: center !important;
  transform: none !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart input[type="image"],
body:has(.sanraku-product-page) .sr-pd-colorme-cart img {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: top !important;
  transform: scale(1.2) !important;
  transform-origin: center top !important;
}

body:has(.sanraku-product-page) .sr-pd-colorme-cart a:hover {
  opacity: 1 !important;
}

.sr-pd-cart-note {
  display: none;
}


/* ------------------------------
   スマホ専用：商品情報下カート
------------------------------ */

.sr-pd-mobile-cart-section {
  display: none;
}

.sr-pd-mobile-cart-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.sr-pd-mobile-cart-card .sr-section-head {
  margin-bottom: 18px;
}

.sr-pd-mobile-cart-card .sr-lead {
  max-width: 430px;
}

.sr-pd-mobile-cart-card .sr-pd-price-box {
  display: block;
  margin: 0 auto 14px;
  text-align: center;
}

.sr-pd-mobile-cart-card .sr-pd-cart-heading {
  text-align: center;
}

.sr-pd-mobile-cart-card .sr-pd-cart-panel {
  margin-top: 8px;
}


/* ------------------------------
   スマホ・小型端末：商品情報下カートを表示
   ※商品ページ本体のスマホレイアウトは560px基準のまま維持
------------------------------ */

@media (max-width: 700px) {
  body:has(.sanraku-product-page) .sr-pd-mobile-cart-section {
    display: block !important;
    padding: 44px 0 50px !important;
  }
}


/* ------------------------------
   本文セクション
------------------------------ */

.sr-pd-lead-card {
  max-width: 840px;
  margin: 0 auto;
}

.sr-pd-feature-head {
  max-width: 960px;
}

.sr-pd-feature-lead {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  line-height: 2.02;
  letter-spacing: 0.035em;
}

.sr-pd-feature-lead-part {
  display: inline;
}

.sr-pd-feature-lead-main {
  display: block;
  margin-top: 4px;
}

.sr-pd-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.sr-pd-feature-card h3,
.sr-pd-recommend-card h3 {
  color: var(--pd-red) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.sr-pd-feature-card p,
.sr-pd-recommend-card p {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}


/* ------------------------------
   味違い導線
------------------------------ */

.sr-pd-flavor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.sr-pd-flavor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 28px 30px 30px;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(86, 68, 42, 0.075);
  border-radius: 4px;
  box-shadow: var(--pd-shadow);
  box-sizing: border-box;
}

/* 現在見ている商品だけ、控えめな生成り背景にする */
.sr-pd-flavor-card.is-current {
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(255, 255, 255, 0.92)) !important;
  background-color: #fffdf7 !important;
  border-color: rgba(157, 119, 61, 0.22);
}

/* 比較先の商品は必ず白背景にする */
.sr-pd-flavor-card:not(.is-current) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

.sr-pd-flavor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 25px;
}

.sr-pd-flavor-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(157, 23, 20, 0.08);
  color: var(--pd-red);
  border: 1px solid rgba(157, 23, 20, 0.16);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.sr-pd-flavor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--pd-red);
  border: 1px solid var(--pd-red);
  color: #ffffff !important;
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(157, 23, 20, 0.12);
}

.sr-pd-flavor-button::after {
  content: "→";
  margin-left: 7px;
  font-size: 12.5px;
  line-height: 1;
}

.sr-pd-flavor-button:hover {
  background: var(--pd-red-deep);
  border-color: var(--pd-red-deep);
  color: #ffffff !important;
  opacity: 1;
}

.sr-pd-flavor-card h3 {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  color: var(--pd-ink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.06em;
}

.sr-pd-flavor-card p {
  flex: 1 1 auto;
  margin: 14px 0 0;
  color: var(--pd-muted);
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.sr-pd-flavor-meta {
  display: grid;
  gap: 6px;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(86, 68, 42, 0.075);
}

.sr-pd-flavor-meta div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.sr-pd-flavor-meta dt,
.sr-pd-flavor-meta dd {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.sr-pd-flavor-meta dt {
  color: var(--pd-gold);
  font-weight: 800;
}

.sr-pd-flavor-meta dd {
  color: var(--pd-text);
}

.sr-pd-flavor-meta div:last-child dt {
  font-size: 14.5px;
}

.sr-pd-flavor-meta div:last-child dd {
  color: var(--pd-red-deep);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.035em;
}


/* ------------------------------
   写真＋文章 2カラム
------------------------------ */

.sr-pd-photo-text {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
}

.sr-pd-photo-text.is-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sr-pd-photo-text .sr-page-card,
.sr-pd-photo-text .sr-pd-image-card {
  height: 100%;
  box-sizing: border-box;
}

.sr-pd-photo-text .sr-page-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 46px;
}

.sr-pd-photo-text .sr-section-head {
  margin-bottom: 22px;
}

.sr-pd-photo-text .sr-title {
  font-size: clamp(25px, 2.05vw, 31px) !important;
  letter-spacing: 0.07em;
}

.sr-pd-photo-text .sr-button-row {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 28px;
}

.sr-pd-photo-text .sr-button-row a {
  margin-left: auto;
  margin-right: auto;
}

.sr-pd-photo-text .sr-pd-image-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background: #ffffff;
}

.sr-pd-image-card img {
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
}

.sr-pd-image-card.is-contain img {
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 0;
  box-sizing: border-box;
  margin: 0 auto;
}

.sr-pd-mini-note {
  display: none;
}


/* ------------------------------
   商品情報
------------------------------ */

.sr-pd-info {
  max-width: 940px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--pd-border);
  border-radius: 4px;
  box-shadow: var(--pd-shadow);
  overflow: hidden;
}

.sr-pd-info-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  margin: 0;
  border-bottom: 1px solid rgba(86, 68, 42, 0.08);
}

.sr-pd-info-row:last-child {
  border-bottom: none;
}

.sr-pd-info dt,
.sr-pd-info dd {
  margin: 0;
  padding: 17px 20px;
  font-size: 15.8px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.sr-pd-info dt {
  color: var(--pd-gold);
  font-weight: 800;
  background: rgba(255, 253, 247, 0.78);
}

.sr-pd-info dd {
  color: var(--pd-text);
}

.sr-pd-info-note {
  display: block;
  margin-top: 4px;
  color: var(--pd-muted);
  font-size: 14px;
  line-height: 1.8;
}


/* ------------------------------
   FAQ
------------------------------ */

.sanraku-product-page .sr-faq-item h3 {
  font-size: 16px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.045em;
}

.sanraku-product-page .sr-faq-item p {
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}


/* ------------------------------
   関連リンク
------------------------------ */

.sr-pd-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.sr-pd-related-card {
  display: block;
  padding: 30px 28px 32px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--pd-border);
  border-radius: 4px;
  box-shadow: var(--pd-shadow);
}

.sr-pd-related-card h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pd-ink) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  letter-spacing: 0.06em;
}

.sr-pd-related-card p {
  margin: 14px 0 0;
  color: var(--pd-muted);
  font-size: 15px;
  line-height: 1.95;
}

.sr-pd-related-card .sr-text-link {
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 800;
}


/* ------------------------------
   下部CTA
------------------------------ */

.sanraku-product-page .sr-page-cta .sr-lead {
  font-size: 16px;
  line-height: 1.95;
}

.sanraku-product-page .sr-page-cta .sr-button-row a {
  font-size: 14.5px;
}


/* ------------------------------
   タブレット
------------------------------ */

@media (max-width: 1024px) {
  .sr-pd-hero {
    padding-top: 14px;
    padding-bottom: 66px;
  }

  .sr-pd-hero-grid {
    width: min(760px, calc(100% - 44px));
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    min-width: 0;
  }

  .sr-pd-gallery {
    max-width: 540px;
  }

  .sr-pd-photo-text,
  .sr-pd-photo-text.is-reverse {
    width: min(820px, calc(100% - 44px));
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  .sr-pd-photo-text .sr-page-card,
  .sr-pd-photo-text .sr-pd-image-card {
    height: auto;
  }

  .sr-pd-photo-text .sr-pd-image-card {
    padding: 24px;
  }

  .sr-pd-image-card img,
  .sr-pd-image-card.is-contain img {
    height: auto;
    max-height: none;
  }

  .sr-pd-buy-card {
    position: static;
  }

  .sr-pd-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sr-pd-flavor-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    max-width: 680px;
  }

  .sr-pd-flavor-card {
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .sr-pd-flavor-card p {
    flex: 0 1 auto;
  }

  .sr-pd-flavor-meta {
    margin: 17px 0 0;
  }

  .sr-pd-related-grid {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------
   スマホ
------------------------------ */

@media (max-width: 560px) {
  body:has(.sanraku-product-page) .article h1.entry-title,
  body:has(.sanraku-product-page) h1.entry-title,
  body:has(.sanraku-product-page) .entry-title {
    width: calc(100% - 30px) !important;
    margin: 28px auto 16px !important;
    font-size: 21px !important;
    line-height: 1.62 !important;
    letter-spacing: 0.02em !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict;
  }

  .sr-pd-hero {
    padding: 0 0 52px;
  }

  .sr-pd-hero-grid {
    width: calc(100% - 30px);
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    min-width: 0;
  }

  .sr-pd-gallery {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .sr-pd-main-photo {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .sr-pd-main-photo img {
    transform: none;
    padding: 0;
  }

  .sr-pd-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
    min-width: 0;
  }

  .sr-pd-sub-photo {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    cursor: default;
    overflow: hidden;
  }

  .sr-pd-sub-photo img {
    opacity: 1 !important;
    transition: none;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .sr-pd-badge-row {
    gap: 8px;
    margin-bottom: 17px;
  }

  .sr-pd-badge {
    min-height: 30px;
    padding: 0 10px 0 6px;
    gap: 6px;
    font-size: 12.2px;
    letter-spacing: 0.035em;
  }

  .sr-pd-badge::before {
    min-width: 30px;
    height: 19px;
    padding: 0 6px;
    font-size: 10px;
  }

  .sr-pd-buy-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 28px 24px 28px;
    box-sizing: border-box;
  }

  .sr-pd-name {
    font-size: 23px !important;
    line-height: 1.58 !important;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .sr-pd-catch {
    font-size: 15.5px;
    line-height: 1.95;
  }

  .sr-pd-price {
    font-size: 25px;
  }

  .sr-pd-price small {
    display: block;
    margin: 4px 0 0;
  }

  .sr-pd-point-list li {
    font-size: 15px;
  }

  .sr-pd-feature-head {
    max-width: 340px;
  }

  .sr-pd-feature-lead {
    max-width: 320px;
    font-size: 15.5px;
    line-height: 1.95;
    letter-spacing: 0.025em;
  }

  .sr-pd-feature-lead-part,
  .sr-pd-feature-lead-main {
    display: block;
  }

  .sr-pd-feature-lead-main {
    margin-top: 4px;
  }

  .sr-pd-feature-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
  }

  .sr-pd-feature-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .sanraku-product-page .sr-page-card-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .sanraku-product-page .sr-page-mini-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .sr-pd-feature-card h3,
  .sr-pd-recommend-card h3 {
    font-size: 15.3px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.025em;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: strict;
  }

  .sr-pd-feature-grid .sr-pd-feature-card:first-child h3 {
    font-size: 14.8px !important;
    letter-spacing: 0.01em;
  }

  .sr-pd-flavor-grid {
    gap: 18px;
  }

  .sr-pd-flavor-card {
    padding: 28px 23px 30px;
  }

  .sr-pd-flavor-top {
    align-items: flex-start;
    gap: 9px;
    min-height: 30px;
    min-width: 0;
    flex-wrap: wrap;
  }

  .sr-pd-flavor-status,
  .sr-pd-flavor-button {
    max-width: 100%;
  }

  .sr-pd-flavor-button {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
    margin-left: auto;
  }

  .sr-pd-flavor-card h3 {
    margin-top: 15px !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
  }

  .sr-pd-flavor-card p {
    flex: 0 1 auto;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.9;
  }

  .sr-pd-flavor-meta {
    margin: 15px 0 0;
    padding-top: 13px;
  }

  .sr-pd-flavor-meta div {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .sr-pd-flavor-meta div:last-child dd {
    font-size: 16.5px;
  }

  .sr-pd-photo-text,
  .sr-pd-photo-text.is-reverse {
    width: calc(100% - 30px);
    gap: 24px;
  }

  .sr-pd-photo-text .sr-page-card {
    padding: 32px 26px 34px;
  }

  .sr-pd-photo-text .sr-title {
    font-size: 24px !important;
    line-height: 1.62 !important;
  }

  .sr-pd-photo-text .sr-button-row {
    justify-content: center;
    margin-top: 24px;
  }

  .sr-pd-photo-text .sr-pd-image-card {
    padding: 18px;
  }

  .sr-pd-image-card img,
  .sr-pd-image-card.is-contain img {
    height: auto;
    max-height: none;
  }

  .sr-pd-mobile-cart-card {
    padding: 32px 24px 34px;
  }

  .sr-pd-mobile-cart-card .sr-section-head {
    margin-bottom: 16px;
  }

  .sr-pd-mobile-cart-card .sr-title {
    font-size: 24px !important;
  }

  .sr-pd-mobile-cart-card .sr-lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .sr-pd-mobile-cart-card .sr-pd-cart-panel {
    margin-top: 10px;
  }

  .sr-pd-mobile-cart-card .sr-pd-colorme-cart {
    margin-top: -2px;
  }

  body:has(.sanraku-product-page) .sr-pd-colorme-cart input[type="image"],
  body:has(.sanraku-product-page) .sr-pd-colorme-cart img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .sr-pd-info-row {
    grid-template-columns: 1fr;
  }

  .sr-pd-info dt {
    padding: 14px 18px 4px;
    background: transparent;
  }

  .sr-pd-info dd {
    padding: 0 18px 14px;
  }

  .sr-pd-info dt,
  .sr-pd-info dd {
    font-size: 15.5px;
  }

  .sanraku-product-page .sr-page-text p,
  .sanraku-product-page .sr-lead {
    font-size: 15.5px;
    line-height: 1.95;
  }

  .sanraku-product-page .sr-faq-item h3 {
    font-size: 15.5px !important;
  }

  .sanraku-product-page .sr-faq-item p {
    font-size: 15px;
  }

  .sr-pd-related-card {
    padding: 28px 24px 30px;
  }
}
/* =========================================================
   三楽 6案内ページ共通CSS
   基準ページ：食品添加物無添加辛子明太子「きわめんたい」
   対象：class="sanraku-guide-page"
   目的：選び方・商品一覧・関連導線を案内ページとして整える
   ※固定ページ本文HTMLには style 属性・style タグを入れない
   ========================================================= */


/* ------------------------------
   案内ページ共通：基本
------------------------------ */

.sanraku-guide-page {
  --sg-border: rgba(86, 68, 42, 0.15);
  --sg-border-strong: rgba(86, 68, 42, 0.24);
  --sg-paper: #ffffff;
  --sg-paper-soft: #fbf7ef;
  --sg-red-soft: #f8eeee;
  --sg-gold-soft: #f7f0df;
  --sg-shadow: 0 16px 38px rgba(50, 38, 24, 0.09);
  --sg-shadow-hover: 0 20px 46px rgba(50, 38, 24, 0.14);
}

.sanraku-guide-page *,
.sanraku-guide-page *::before,
.sanraku-guide-page *::after {
  box-sizing: border-box;
}

.sanraku-guide-page .sr-guide-anchor-section {
  scroll-margin-top: 96px;
}


/* ------------------------------
   案内ページ共通：ヒーロー
------------------------------ */

.sanraku-guide-page .sr-guide-hero {
  padding: 48px 0 72px;
}

.sanraku-guide-page .sr-guide-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 64px;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 46px 48px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 233, 0.94));
  border: 1px solid var(--sg-border);
  border-top: 4px solid var(--sr-red);
  border-radius: 4px;
  box-shadow: var(--sg-shadow);
}

.sanraku-guide-page .sr-guide-hero-copy {
  max-width: 510px;
}

.sanraku-guide-page .sr-guide-kicker {
  margin: 0 0 18px;
  color: var(--sr-gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.23em;
  line-height: 1.4;
}

.sanraku-guide-page .sr-guide-hero-title {
  margin: 0 !important;
  color: var(--sr-ink) !important;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif !important;
  font-size: clamp(29px, 3.1vw, 41px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em;
  line-height: 1.65 !important;
}

.sanraku-guide-page .sr-guide-hero-brand {
  margin: 13px 0 0;
  color: var(--sr-red);
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
}

.sanraku-guide-page .sr-guide-hero-text {
  margin: 24px 0 0;
  color: #575048;
  font-size: 15.5px;
  line-height: 2.04;
  letter-spacing: 0.045em;
}

.sanraku-guide-page .sr-guide-hero-image {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(86, 68, 42, 0.12);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(50, 38, 24, 0.12);
}

.sanraku-guide-page .sr-guide-hero-image::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  pointer-events: none;
}

.sanraku-guide-page .sr-guide-hero-image img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
  object-position: center;
}


/* ------------------------------
   案内ページ共通：ページ内案内
------------------------------ */

.sanraku-guide-page .sr-guide-jump {
  padding: 32px 0 34px;
  background: #f4eee3;
  border-top: 1px solid var(--sg-border-strong);
  border-bottom: 1px solid var(--sg-border-strong);
}

.sanraku-guide-page .sr-guide-jump-title {
  margin: 0 0 15px;
  color: var(--sr-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}

.sanraku-guide-page .sr-guide-jump-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sanraku-guide-page .sr-guide-jump-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--sg-border);
  border-bottom: 3px solid rgba(157, 23, 20, 0.72);
  border-radius: 3px;
  box-shadow: 0 7px 18px rgba(50, 38, 24, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sanraku-guide-page .sr-guide-jump-grid a:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(157, 23, 20, 0.42);
  box-shadow: 0 12px 24px rgba(50, 38, 24, 0.1);
  opacity: 1;
}

.sanraku-guide-page .sr-guide-jump-grid span {
  color: #7b7269;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  line-height: 1.4;
}

.sanraku-guide-page .sr-guide-jump-grid strong {
  margin-top: 4px;
  color: var(--sr-ink);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
}


/* ------------------------------
   案内ページ共通：特徴
------------------------------ */

.sanraku-guide-page .sr-guide-point-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sanraku-guide-page .sr-guide-point-card {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  padding: 34px 25px 32px;
  background: var(--sg-paper);
  border: 1px solid var(--sg-border);
  border-radius: 3px;
  box-shadow: var(--sg-shadow);
}

.sanraku-guide-page .sr-guide-point-card::before,
.sanraku-guide-page .sr-guide-taste-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--sr-red);
}

.sanraku-guide-page .sr-guide-point-number {
  display: block;
  margin-bottom: 14px;
  color: var(--sr-red);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.sanraku-guide-page .sr-guide-point-card h3 {
  margin: 0 0 13px !important;
  color: var(--sr-ink) !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  line-height: 1.7 !important;
}

.sanraku-guide-page .sr-guide-point-card p {
  margin: 0;
  color: #5c554e;
  font-size: 14px;
  line-height: 1.95;
}

.sanraku-guide-page .sr-guide-story-link,
.sanraku-guide-page .sr-guide-section-link {
  max-width: 820px;
  margin: 38px auto 0;
  padding: 24px 28px;
  background: var(--sg-paper-soft);
  border: 1px solid var(--sg-border);
  border-left: 4px solid var(--sr-gold);
  border-radius: 3px;
  text-align: center;
}

.sanraku-guide-page .sr-guide-story-link p,
.sanraku-guide-page .sr-guide-section-link p {
  margin: 0 0 14px;
  color: #675f57;
  font-size: 14px;
  line-height: 1.9;
}


/* ------------------------------
   案内ページ共通：味の比較
------------------------------ */

.sanraku-guide-page .sr-guide-taste-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  max-width: 980px;
  margin: 0 auto;
}

.sanraku-guide-page .sr-guide-taste-card {
  position: relative;
  overflow: hidden;
  padding: 40px 42px 42px;
  background: var(--sg-paper);
  border: 1px solid var(--sg-border-strong);
  border-radius: 4px;
  box-shadow: var(--sg-shadow);
}

.sanraku-guide-page .sr-guide-taste-medium {
  background:
    linear-gradient(145deg, #ffffff 0%, var(--sg-red-soft) 100%);
}

.sanraku-guide-page .sr-guide-taste-yuzu {
  background:
    linear-gradient(145deg, #ffffff 0%, var(--sg-gold-soft) 100%);
}

.sanraku-guide-page .sr-guide-taste-yuzu::before {
  background: #b98a28;
}

.sanraku-guide-page .sr-guide-taste-label {
  margin: 0 0 6px;
  color: var(--sr-gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.sanraku-guide-page .sr-guide-taste-card h3 {
  margin: 0 !important;
  color: var(--sr-ink) !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  line-height: 1.5 !important;
}

.sanraku-guide-page .sr-guide-taste-catch {
  margin: 14px 0 0;
  color: var(--sr-red);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.8;
}

.sanraku-guide-page .sr-guide-taste-yuzu .sr-guide-taste-catch {
  color: #8b681f;
}

.sanraku-guide-page .sr-guide-taste-text {
  margin: 18px 0 0;
  color: #5a534c;
  font-size: 15px;
  line-height: 2;
}

.sanraku-guide-page .sr-guide-taste-use {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.sanraku-guide-page .sr-guide-taste-use li {
  margin: 0;
  padding: 6px 11px;
  background: #ffffff;
  border: 1px solid var(--sg-border-strong);
  border-radius: 999px;
  color: #6b6259;
  font-size: 12px;
  line-height: 1.3;
}


/* ------------------------------
   案内ページ共通：商品カード
------------------------------ */

.sanraku-guide-page .sr-guide-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.sanraku-guide-page .sr-guide-product-grid-gift {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sanraku-guide-page .sr-guide-product-grid-shipping {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 840px;
  margin: 0 auto;
}

.sanraku-guide-page .sr-guide-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--sg-paper);
  border: 1px solid var(--sg-border-strong);
  border-radius: 4px;
  box-shadow: var(--sg-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.sanraku-guide-page .sr-guide-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(157, 23, 20, 0.34);
  box-shadow: var(--sg-shadow-hover);
}

.sanraku-guide-page .sr-guide-product-card-wide {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  grid-column: 1 / -1;
}

.sanraku-guide-page .sr-guide-product-image {
  display: block;
  overflow: hidden;
  background: #f7f2e9;
  border-bottom: 1px solid var(--sg-border);
}

.sanraku-guide-page .sr-guide-product-image:hover {
  opacity: 1;
}

.sanraku-guide-page .sr-guide-product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.28s ease;
}

.sanraku-guide-page .sr-guide-product-image:hover img {
  transform: scale(1.025);
}

.sanraku-guide-page .sr-guide-product-card-wide .sr-guide-product-image,
.sanraku-guide-page .sr-guide-product-card-wide .sr-guide-product-image img {
  height: 100%;
}

.sanraku-guide-page .sr-guide-product-card-wide .sr-guide-product-image img {
  aspect-ratio: auto;
}

.sanraku-guide-page .sr-guide-product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px 32px;
}

.sanraku-guide-page .sr-guide-product-body .sr-badge-row {
  margin-bottom: 14px;
}

.sanraku-guide-page .sr-guide-product-body h3 {
  margin: 0 !important;
  color: var(--sr-ink) !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.055em;
  line-height: 1.65 !important;
}

.sanraku-guide-page .sr-guide-product-sub {
  margin: 8px 0 0;
  color: var(--sr-red);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.sanraku-guide-page .sr-guide-product-text {
  margin: 17px 0 0;
  color: #615950;
  font-size: 13.8px;
  line-height: 1.9;
}

.sanraku-guide-page .sr-guide-product-price {
  margin: auto 0 18px;
  padding-top: 24px;
  color: var(--sr-red);
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.5;
}

.sanraku-guide-page .sr-guide-product-price small {
  display: inline-block;
  margin-left: 4px;
  color: #756d65;
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.sanraku-guide-page .sr-guide-product-body .sr-button-primary {
  width: 100%;
  min-height: 46px;
  border-radius: 3px;
  box-shadow: 0 7px 16px rgba(125, 17, 15, 0.18);
}

.sanraku-guide-page .sr-guide-badge-shipping {
  color: #ffffff;
  background: var(--sr-red);
  border-color: var(--sr-red);
}


/* ------------------------------
   案内ページ共通：選び方カード
------------------------------ */

.sanraku-guide-page .sr-guide-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sanraku-guide-page .sr-guide-choice-card {
  position: relative;
  overflow: hidden;
  padding: 34px 30px 36px;
  background: var(--sg-paper);
  border: 1px solid var(--sg-border-strong);
  border-radius: 4px;
  box-shadow: var(--sg-shadow);
}

.sanraku-guide-page .sr-guide-choice-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--sr-gold);
}

.sanraku-guide-page .sr-guide-choice-label {
  margin: 0 0 8px;
  color: var(--sr-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sanraku-guide-page .sr-guide-choice-card h3 {
  margin: 0 !important;
  color: var(--sr-ink) !important;
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.065em;
  line-height: 1.65 !important;
}

.sanraku-guide-page .sr-guide-choice-card > p:not(.sr-guide-choice-label) {
  margin: 18px 0 22px;
  color: #5d554e;
  font-size: 14px;
  line-height: 1.95;
}


/* ------------------------------
   案内ページ共通：タブレット
------------------------------ */

@media (max-width: 1024px) {
  .sanraku-guide-page .sr-guide-hero-grid {
    gap: 42px;
    padding: 38px 36px;
  }

  .sanraku-guide-page .sr-guide-point-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sanraku-guide-page .sr-guide-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sanraku-guide-page .sr-guide-choice-grid {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------
   案内ページ共通：スマホ
------------------------------ */

@media (max-width: 700px) {
  .sanraku-guide-page .sr-guide-hero {
    padding: 38px 0 48px;
  }

  .sanraku-guide-page .sr-guide-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    width: calc(100% - 30px);
    padding: 30px 24px;
  }

  .sanraku-guide-page .sr-guide-hero-copy {
    max-width: none;
  }

  .sanraku-guide-page .sr-guide-hero-title {
    font-size: 27px !important;
    line-height: 1.68 !important;
  }

  .sanraku-guide-page .sr-guide-hero-brand {
    font-size: 29px;
  }

  .sanraku-guide-page .sr-guide-hero-text {
    font-size: 15px;
    line-height: 2;
  }

  .sanraku-guide-page .sr-guide-hero-copy .sr-button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sanraku-guide-page .sr-guide-hero-copy .sr-button-primary,
  .sanraku-guide-page .sr-guide-hero-copy .sr-button-outline {
    width: 100%;
    min-height: 46px;
  }

  .sanraku-guide-page .sr-guide-hero-image::after {
    inset: 10px;
  }

  .sanraku-guide-page .sr-guide-jump {
    padding: 24px 0;
  }

  .sanraku-guide-page .sr-guide-jump .sr-inner {
    width: calc(100% - 30px);
  }

  .sanraku-guide-page .sr-guide-jump-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .sanraku-guide-page .sr-guide-jump-grid a {
    min-height: 70px;
  }

  .sanraku-guide-page .sr-guide-point-grid,
  .sanraku-guide-page .sr-guide-taste-grid,
  .sanraku-guide-page .sr-guide-product-grid,
  .sanraku-guide-page .sr-guide-product-grid-gift,
  .sanraku-guide-page .sr-guide-product-grid-shipping {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sanraku-guide-page .sr-guide-point-card {
    padding: 27px 24px 29px;
  }

  .sanraku-guide-page .sr-guide-story-link,
  .sanraku-guide-page .sr-guide-section-link {
    padding: 22px 20px;
    text-align: left;
  }

  .sanraku-guide-page .sr-guide-taste-card {
    padding: 32px 26px 34px;
  }

  .sanraku-guide-page .sr-guide-taste-card h3 {
    font-size: 27px !important;
  }

  .sanraku-guide-page .sr-guide-product-card-wide {
    display: flex;
    grid-column: auto;
  }

  .sanraku-guide-page .sr-guide-product-card-wide .sr-guide-product-image,
  .sanraku-guide-page .sr-guide-product-card-wide .sr-guide-product-image img {
    height: auto;
  }

  .sanraku-guide-page .sr-guide-product-card-wide .sr-guide-product-image img {
    aspect-ratio: 1 / 1;
  }

  .sanraku-guide-page .sr-guide-product-body {
    padding: 25px 23px 27px;
  }

  .sanraku-guide-page .sr-guide-product-body h3 {
    font-size: 17px !important;
  }

  .sanraku-guide-page .sr-guide-product-price {
    font-size: 21px;
  }

  .sanraku-guide-page .sr-guide-choice-card {
    padding: 29px 25px 31px;
  }
}


/* ------------------------------
   案内ページ共通：小さいスマホ
------------------------------ */

@media (max-width: 380px) {
  .sanraku-guide-page .sr-guide-hero-title {
    font-size: 25px !important;
  }

  .sanraku-guide-page .sr-guide-jump-grid strong {
    font-size: 15px;
  }

  .sanraku-guide-page .sr-guide-product-price small {
    display: block;
    margin: 2px 0 0;
  }
}


/* =========================================================
   【共通CSS】重要なお知らせ・緊急情報「詳細記事」用デザイン
   ---------------------------------------------------------
   使用場所：
   WordPress「お知らせ・イベント」投稿のうち、
   災害・配送障害・荷受け停止・大幅な配送遅延・臨時休業・
   システム障害など、通常のお知らせより重要度が高い記事に使用。

   設計方針：
   ・このブロックは重要告知のレイアウトだけを担当する
   ・ボタンは全ページ共通 .sr-button-primary / .sr-button-outline を使用する
   ・重要告知専用のボタンclassやボタン見た目の局所上書きは作らない
   ・3枚の状況カードは同じ高さに揃えるが、固定height/min-heightは持たない
   ・その時点で最も内容量の多いカードにGridが自動で高さを揃える
   ・カード内はdiv要素を使用し、wpautop等による空p生成を避ける
   ・表示調整目的のbrタグを使用しない
   ・SNS、関連記事、コメントはCSSで隠さずCocoon設定側で停止する
   ========================================================= */


/* ---------- 記事全体 ---------- */

.sr-emergency-notice {
  max-width: 920px;
  margin: 0 auto 56px;
  color: #333;
}


/* ---------- 冒頭のお見舞い・概要 ---------- */

.sr-emergency-notice__intro {
  margin: 0 0 30px;
  padding: 26px 28px;
  background: #fffaf6;
  border: 1px solid #eaded6;
  border-radius: 14px;
}

.sr-emergency-notice__label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  background: #b41414;
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.sr-emergency-notice__updated {
  margin: 0 0 18px;
  color: #776b65;
  font-size: 13px;
  line-height: 1.7;
}

.sr-emergency-notice__intro p:not(.sr-emergency-notice__label):not(.sr-emergency-notice__updated) {
  margin: 0 0 12px;
  line-height: 1.9;
}

.sr-emergency-notice__intro p:last-child {
  margin-bottom: 0;
}


/* ---------- 対象地域・配送状況・集荷配達 ---------- */

.sr-emergency-notice__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  margin: 0 0 34px;
}

.sr-emergency-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 18px 16px;
  background: #fff;
  border: 1px solid #e7ddd6;
  border-radius: 12px;
  text-align: center;
}

.sr-emergency-card--alert {
  background: #fff4f1;
  border-color: #dfbbb2;
}

.sr-emergency-card__label {
  margin: 0 0 7px;
  color: #796a62;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.sr-emergency-card__main {
  margin: 0;
  color: #2f2f2f;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.65;
}


/* ---------- 詳細説明セクション ---------- */

.sr-emergency-notice__section {
  margin: 0 0 24px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid #ebe4df;
  border-radius: 14px;
}

.sr-emergency-notice__section--soft {
  background: #fcfaf8;
}

.sr-emergency-notice__section h2 {
  margin: 0 0 20px;
  padding: 0 0 0 14px;
  background: none;
  border: 0;
  border-left: 4px solid #b41414;
  color: #302c2a;
  font-size: 21px;
  line-height: 1.55;
}

.sr-emergency-notice__section p {
  margin: 0 0 14px;
  line-height: 1.95;
}

.sr-emergency-notice__section p:last-child {
  margin-bottom: 0;
}


/* ---------- 受付時間・配送時間 ---------- */

.sr-emergency-notice__info {
  overflow: hidden;
  border: 1px solid #e7ddd6;
  border-radius: 10px;
}

.sr-emergency-notice__info dl {
  margin: 0;
}

.sr-emergency-notice__info dl > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
  border-bottom: 1px solid #eee7e2;
}

.sr-emergency-notice__info dl > div:last-child {
  border-bottom: 0;
}

.sr-emergency-notice__info dt,
.sr-emergency-notice__info dd {
  margin: 0;
  padding: 15px 18px;
  line-height: 1.7;
}

.sr-emergency-notice__info dt {
  background: #faf6f3;
  font-weight: 700;
}

.sr-emergency-notice__info dd {
  background: #fff;
}


/* ---------- 配送会社など公式最新情報への誘導 ---------- */

.sr-emergency-notice__external {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: 28px 0 18px;
  padding: 15px 18px;
  background: #faf8f6;
  border: 1px solid #eee6e0;
  border-radius: 10px;
  text-align: center;
}

.sr-emergency-notice__external p {
  margin: 0;
  color: #4d4742;
  font-size: 14px;
  letter-spacing: 0.015em;
  line-height: 1.7;
}


/* ---------- 注記・署名 ---------- */

.sr-emergency-notice__source {
  margin: 18px 0 0;
  color: #776b65;
  font-size: 13px;
  line-height: 1.8;
}

.sr-emergency-notice__signature {
  margin: 26px 0 0;
  text-align: right;
  font-weight: 700;
}


/* ---------- 重要なお知らせ：スマートフォン ---------- */

@media screen and (max-width: 767px) {

  .sr-emergency-notice {
    margin-bottom: 40px;
  }

  .sr-emergency-notice__intro {
    padding: 20px 16px;
    border-radius: 10px;
  }

  .sr-emergency-notice__summary {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 26px;
  }

  .sr-emergency-card {
    padding: 13px 16px 15px;
    border-radius: 10px;
  }

  .sr-emergency-card__main {
    font-size: 16px;
  }

  .sr-emergency-notice__section {
    padding: 22px 17px;
    border-radius: 10px;
  }

  .sr-emergency-notice__section h2 {
    font-size: 19px;
  }

  .sr-emergency-notice__info dl > div {
    grid-template-columns: 1fr;
  }

  .sr-emergency-notice__info dt {
    padding-bottom: 8px;
  }

  .sr-emergency-notice__info dd {
    padding-top: 8px;
  }

  .sr-emergency-notice__external {
    flex-direction: column;
    gap: 12px;
    padding: 15px 16px;
  }
}


/* =========================================================
   【共通CSS】トップページ「重要なお知らせ」告知・詳細記事誘導用
   ---------------------------------------------------------
   使用場所：
   トップページ上部。

   使用条件：
   災害・配送障害・荷受け停止・大幅な配送遅延・臨時休業など、
   現在発生中でお客様に早く確認してほしい重要情報がある場合のみ使用。

   設計方針：
   ・トップページでは要点のみ表示し、詳細記事へ誘導する
   ・ボタンは全ページ共通 .sr-button-outline を使用する
   ・トップ重要告知専用のボタンclassは作らない
   ・問題解消後はトップページから告知HTMLを削除する
   ・詳細記事は「お知らせ・イベント」の過去記事として残す
   ========================================================= */

.sr-top-alert {
  width: min(1100px, calc(100% - clamp(30px, 6vw, 48px)));
  margin: 24px auto 34px;
  padding: 20px 24px;
  box-sizing: border-box;
  background: #fff8f5;
  border: 1px solid #e6cbc2;
  border-left: 5px solid #b41414;
  border-radius: 10px;
}

.sr-top-alert__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sr-top-alert__content {
  flex: 1;
  min-width: 0;
}

.sr-top-alert__label {
  margin: 0 0 5px;
  color: #b41414;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sr-top-alert__title {
  margin: 0 0 6px;
  color: #302c2a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

.sr-top-alert__text {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.75;
}

@media screen and (max-width: 767px) {

  .sr-top-alert {
    margin: 18px auto 26px;
    padding: 17px 16px;
  }

  .sr-top-alert__inner {
    display: block;
  }

  .sr-top-alert__title {
    font-size: 17px;
  }

  .sr-top-alert .sr-button-outline {
    margin-top: 14px;
  }
}