/** Shopify CDN: Minification failed

Line 5287:0 Unexpected "="

**/
/* ============================================
   整体茶 — Color Palette B (桜白×墨×緋色＋若葉)
   老舗の権威 × 鍼灸師の医療性 × 女性のやさしさ × 保護動物の温かみ
   ============================================ */
:root {
  /* 主役カラー：暖色低彩度の3段階ベージュ */
  --st-paper: #fbf6ee;       /* 紙白：FV/カード背景 */
  --st-cream: #f5ece4;       /* 桜白：商品サムネ・主背景 */
  --st-cream-2: #ede2d3;     /* 白茶：副背景・セクション切替 */
  /* 文字 */
  --st-text-strong: #2a2620; /* 墨：見出し・強い文字 */
  --st-text: #776e62;        /* 薄墨：本文・キャプション */
  /* アクセント1 — 緋色は権威/CTAに極小で */
  --st-red: #469b31;         /* 主アクセント：ロゴ緑と同色相・白文字が乗る明度 */
  --st-logo-green: #66be50;  /* ロゴそのままの緑：アイコン・図版用 */
  --st-red-deep: #367726;    /* グリーン濃（hover/影） */
  --st-red-soft: #eaf6e5;    /* グリーン霞（淡背景・罫線） */
  /* アクセント2 — 若葉はボタニカル/寄付/有機JASに */
  --st-green: #86bd76;       /* 若葉 */
  --st-green-soft: #d9ecd3;  /* 若葉霞 */
  /* 補助 */
  --st-line: #d8cbb8;        /* 生成茶：罫線 */
  --st-yellow: #c69a3d;      /* 蜜柑（控えめ） */
  --st-font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Yu Gothic Medium",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --st-font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --st-container: 1200px;
  --st-radius: 0;
  --st-radius-lg: 0;
}

.st-section {
  font-family: var(--st-font-jp);
  color: var(--st-text);
}
.st-container {
  max-width: var(--st-container);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---- announcement bar ---- */
.st-announce {
  background: var(--st-red);
  color: #fff;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
}
.st-announce a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- campaign sub-banners ---- */
.st-cbn {
  background: var(--st-cream);
  padding: 32px 0 24px;
}
.st-cbn__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .st-cbn__grid {
    grid-template-columns: 1fr;
  }
}
.st-cbn__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--st-paper);
  border-radius: var(--st-radius);
  padding: 18px 22px;
  text-decoration: none;
  color: var(--st-text-strong);
  border: 1px solid var(--st-line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.st-cbn__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.st-cbn__badge {
  background: var(--st-red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.st-cbn__copy {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
}
.st-cbn__copy small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--st-text);
  margin-top: 2px;
}
.st-cbn__media {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--st-cream-2);
}
.st-cbn__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- hero characters ---- */
.st-hero {
  background: linear-gradient(180deg, var(--st-cream) 0%, #fff 100%);
  padding: 56px 0 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.st-hero::before,
.st-hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(220, 74, 38, 0.08),
    transparent 70%
  );
  z-index: 0;
}
.st-hero::before { top: -80px; left: -80px; }
.st-hero::after { bottom: -120px; right: -100px; }
.st-hero .st-container { position: relative; z-index: 1; }
.st-hero__chars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  min-height: 1px;
}
.st-hero__chars:empty { display: none; }
.st-hero__chars img {
  height: 110px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08));
}
@media (max-width: 768px) {
  .st-hero__chars img {
    height: 70px;
  }
}
.st-hero__deco {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.st-hero__deco-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--st-red);
  opacity: 0.6;
}
.st-hero__deco-dot:nth-child(2) { opacity: 1; transform: scale(1.4); }
.st-hero__deco-dot:nth-child(3) { opacity: 0.6; }
.st-hero__hashtag {
  font-size: 38px;
  font-weight: 700;
  color: var(--st-red);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.st-hero__hashtag::before {
  content: "#";
  color: var(--st-red);
  margin-right: 2px;
}
.st-hero__lead {
  font-size: 14px;
  color: var(--st-text);
  margin-top: 12px;
  letter-spacing: 0.06em;
}
@media (max-width: 768px) {
  .st-hero__hashtag {
    font-size: 24px;
  }
}

/* ---- trial plan 3 cards ---- */
.st-trial {
  background: var(--st-paper);
  padding: 56px 0 80px;
  position: relative;
}
.st-trial::before {
  content: "";
  display: block;
  height: 38px;
  background: var(--st-red);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.st-trial__ribbon {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 16px 12px;
  margin-bottom: 32px;
}
.st-trial__ribbon a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.st-trial__head {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.st-trial__head h2 {
  font-size: 44px;
  font-weight: 800;
  color: var(--st-red);
  margin: 0;
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: pre-line;
}
.st-trial__head p {
  margin: 16px auto 0;
  font-size: 14px;
  color: var(--st-text);
  letter-spacing: 0.06em;
  max-width: 540px;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .st-trial__head h2 {
    font-size: 26px;
  }
}
.st-trial__list {
  display: grid;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.st-trial__card {
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: stretch;
  background: var(--st-paper);
  color: var(--st-text-strong);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  border: 2px solid var(--st-red);
  box-shadow: 0 4px 0 0 var(--st-red);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.st-trial__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--st-red-deep);
}
.st-trial__card-body {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.st-trial__tag {
  display: inline-block;
  background: var(--st-red);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  align-self: flex-start;
  letter-spacing: 0.08em;
}
.st-trial__name {
  font-size: 21px;
  font-weight: 800;
  margin: 4px 0 0;
  color: var(--st-red);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.st-trial__desc {
  font-size: 13px;
  margin: 0;
  color: var(--st-text);
  line-height: 1.7;
}
.st-trial__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  font-weight: 700;
  color: var(--st-red);
}
.st-trial__price-strike {
  text-decoration: line-through;
  color: var(--st-text);
  font-size: 13px;
  font-weight: 500;
  opacity: 0.7;
}
.st-trial__price-now {
  font-size: 30px;
  letter-spacing: 0.02em;
}
.st-trial__price-now small {
  font-size: 14px;
  font-weight: 600;
  margin-left: 2px;
}
.st-trial__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--st-red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 10px;
  transition: background 0.2s ease;
}
.st-trial__card:hover .st-trial__cta {
  background: var(--st-red-deep);
}
.st-trial__media {
  background: var(--st-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-left: 2px solid var(--st-red);
}
.st-trial__media img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}
@media (max-width: 768px) {
  .st-trial__card {
    grid-template-columns: 1fr;
  }
  .st-trial__media {
    order: -1;
    padding: 18px;
    border-left: none;
    border-bottom: 2px solid var(--st-red);
  }
  .st-trial__media img {
    max-height: 150px;
  }
}

/* ---- product gallery 3-col ---- */
.st-gallery {
  background: var(--st-paper);
  padding: 64px 0;
}
.st-gallery__head {
  text-align: center;
  margin-bottom: 32px;
}
.st-gallery__head h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--st-text-strong);
  margin: 0;
  letter-spacing: 0.06em;
}
.st-gallery__head p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--st-text);
  letter-spacing: 0.06em;
}
.st-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .st-gallery__grid {
    grid-template-columns: 1fr;
  }
  .st-gallery__head h2 {
    font-size: 26px;
  }
}
.st-gallery__item {
  text-decoration: none;
  color: var(--st-text-strong);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.st-gallery__media {
  aspect-ratio: 1 / 1;
  background: var(--st-cream);
  border-radius: var(--st-radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease;
}
.st-gallery__item:hover .st-gallery__media {
  transform: translateY(-3px);
}
.st-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-gallery__name {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}
.st-gallery__caption {
  font-size: 12px;
  color: var(--st-text);
  margin: 0;
  letter-spacing: 0.04em;
}

/* ---- product grid 4-col with tabs ---- */
.st-pgrid {
  background: var(--st-cream);
  padding: 64px 0;
}
.st-pgrid__head {
  text-align: center;
  margin-bottom: 24px;
}
.st-pgrid__head h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--st-text-strong);
  margin: 0;
  letter-spacing: 0.06em;
}
.st-pgrid__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.st-pgrid__tab {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--st-paper);
  color: var(--st-text);
  border: 1px solid var(--st-line);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.st-pgrid__tab.is-active,
.st-pgrid__tab:hover {
  background: var(--st-red);
  color: #fff;
  border-color: var(--st-red);
}
.st-pgrid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 16px;
}
@media (max-width: 1024px) {
  .st-pgrid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .st-pgrid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .st-pgrid__head h2 {
    font-size: 24px;
  }
}
.st-pgrid__card {
  background: var(--st-paper);
  border-radius: var(--st-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--st-text-strong);
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.st-pgrid__card:hover {
  border-color: var(--st-red);
  transform: translateY(-2px);
}
.st-pgrid__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--st-cream-2);
  position: relative;
}
.st-pgrid__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-pgrid__sold {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(28, 28, 28, 0.85);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.st-pgrid__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.st-pgrid__name {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.st-pgrid__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--st-red);
  margin: 0;
}

/* ---- about mosaic ---- */
.st-about {
  background: var(--st-paper);
  padding: 64px 0;
}
.st-about__head {
  text-align: center;
  margin-bottom: 32px;
}
.st-about__head h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--st-text-strong);
  margin: 0 0 12px;
  letter-spacing: 0.06em;
}
.st-about__head p {
  font-size: 14px;
  color: var(--st-text);
  margin: 0 auto;
  max-width: 600px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.st-about__mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 200px 200px;
  gap: 12px;
}
.st-about__mosaic > a:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.st-about__mosaic > a:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.st-about__mosaic > a:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.st-about__mosaic > a:nth-child(4) { grid-column: span 1; grid-row: span 1; }
@media (max-width: 768px) {
  .st-about__mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 160px);
  }
  .st-about__mosaic > a:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .st-about__mosaic > a:nth-child(1) {
    grid-column: span 2;
  }
  .st-about__head h2 {
    font-size: 24px;
  }
}
.st-about__cell {
  position: relative;
  border-radius: var(--st-radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: block;
  background: linear-gradient(135deg, var(--st-red) 0%, var(--st-red-deep) 100%);
}
.st-about__cell:nth-child(2) {
  background: linear-gradient(135deg, #5a8b3a 0%, #3f6328 100%);
}
.st-about__cell:nth-child(3) {
  background: linear-gradient(135deg, #c79a3a 0%, #8d6e1f 100%);
}
.st-about__cell:nth-child(4) {
  background: linear-gradient(135deg, #4f7a8d 0%, #2f4d5c 100%);
}
.st-about__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  position: absolute;
  inset: 0;
}
.st-about__cell:hover img {
  transform: scale(1.05);
}
.st-about__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255, 255, 255, 0.18),
    transparent 60%
  );
  z-index: 1;
}
.st-about__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 1;
}
.st-about__cell img + ::after { z-index: 2; }
.st-about__caption {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 3;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.st-about__caption small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 4px;
  letter-spacing: 0.18em;
}

/* ---- keyword tags ---- */
.st-tags {
  background: var(--st-cream);
  padding: 56px 0;
}
.st-tags__head {
  text-align: center;
  margin-bottom: 24px;
}
.st-tags__head h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--st-text-strong);
  margin: 0;
  letter-spacing: 0.08em;
}
.st-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.st-tags__chip {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--st-paper);
  color: var(--st-text-strong);
  border: 1px solid var(--st-line);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.st-tags__chip::before {
  content: "#";
  color: var(--st-red);
  margin-right: 4px;
  font-weight: 700;
}
.st-tags__chip:hover {
  background: var(--st-red);
  color: #fff;
  border-color: var(--st-red);
}
.st-tags__chip:hover::before {
  color: #fff;
}

/* ---- news + LINE banner ---- */
.st-news {
  background: var(--st-paper);
  padding: 56px 0;
}
.st-news__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 768px) {
  .st-news__wrap {
    grid-template-columns: 1fr;
  }
}
.st-news__col h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--st-text-strong);
  margin: 0 0 16px;
  border-bottom: 2px solid var(--st-red);
  padding-bottom: 8px;
  letter-spacing: 0.08em;
}
.st-news__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-news__item a {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  text-decoration: none;
  color: var(--st-text-strong);
  padding: 8px 0;
  border-bottom: 1px solid var(--st-line);
  align-items: center;
}
.st-news__date {
  font-size: 12px;
  color: var(--st-text);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.st-news__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}
.st-line {
  display: block;
  background: linear-gradient(135deg, #6cd957 0%, #2ec4a3 100%);
  color: #fff;
  border-radius: var(--st-radius-lg);
  padding: 28px 28px 28px 32px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
.st-line__copy h3 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: 0.06em;
}
.st-line__copy p {
  font-size: 13px;
  margin: 0;
  opacity: 0.95;
}
.st-line__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--st-paper);
  color: #06c755;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  margin-top: 12px;
}
.st-line__icon {
  width: 80px;
  height: 80px;
  background: var(--st-paper);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;
  color: #06c755;
  letter-spacing: 0.04em;
}

/* ---- brand statement ---- */
.st-statement {
  background: var(--st-cream);
  padding: 64px 0;
  text-align: center;
}
.st-statement h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--st-text-strong);
  margin: 0 0 16px;
  letter-spacing: 0.1em;
}
.st-statement__body {
  max-width: 640px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 2;
  color: var(--st-text);
  letter-spacing: 0.04em;
  white-space: pre-line;
}

/* ---- contribution ---- */
.st-contrib {
  background: var(--st-paper);
  padding: 48px 0;
  text-align: center;
}
.st-contrib__inner {
  max-width: 600px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 2;
  color: var(--st-text);
  white-space: pre-line;
  letter-spacing: 0.04em;
  border: 1px dashed var(--st-line);
  border-radius: var(--st-radius);
  padding: 24px;
}
.st-contrib__inner a {
  color: var(--st-red);
  font-weight: 700;
  text-decoration: underline;
}

/* ============================================
   PDP — Product detail page (Figma 11:5697 / 11:3654 準拠)
   ============================================ */

.st-pdp { background: var(--st-paper); padding: 32px 0 48px; }
.st-pdp .st-container { max-width: 1180px; }

.st-pdp__crumbs {
  font-size: 12px; color: var(--st-text);
  margin-bottom: 24px; letter-spacing: 0.04em;
}
.st-pdp__crumbs a { color: var(--st-text); text-decoration: none; }
.st-pdp__crumbs a:hover { color: var(--st-red); text-decoration: underline; }
.st-pdp__crumbs span { margin: 0 6px; color: var(--st-line); }

.st-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .st-pdp__grid { grid-template-columns: 1fr; gap: 28px; }
}

.st-pdp__gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 600px) {
  .st-pdp__gallery { grid-template-columns: 1fr; }
}
.st-pdp__main-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--st-cream);
  border: 2px solid var(--st-red);
  border-radius: 18px;
  box-shadow: 0 4px 0 0 var(--st-red);
  overflow: hidden;
  order: 2;
}
@media (max-width: 600px) {
  .st-pdp__main-frame { order: 1; }
}
.st-pdp__main {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.st-pdp__badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--st-red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  padding: 6px 14px; border-radius: 999px;
}
.st-pdp__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.92);
  border: 2px solid var(--st-red);
  border-radius: 50%;
  color: var(--st-red);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.st-pdp__nav:hover { background: var(--st-red); color: #fff; }
.st-pdp__nav--prev { left: 12px; }
.st-pdp__nav--next { right: 12px; }

/* ★PCでのサムネイル（2026-07-31 「PCのデザインを最適化して」）★
   以前は左に縦一列。商品画像が16枚あるため、細長い列が主画像の高さいっぱいに
   伸びてしまい、1枚ずつが小さすぎて何の写真か判別できなかった。
   → PCでも主画像の下に横一列で置き、入り切らない分は横スクロールに逃がす。
     ECの標準的な形で、1枚あたりも大きく取れる。 */
.st-pdp__thumbs {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
  order: 2;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  padding-bottom: 6px;
  /* ★min-width:0 が要る（2026-07-31に踏んだ）★
     flexの子は既定で min-width:auto = 中身の幅まで縮まない。
     サムネ16枚（約1018px）がそのまま親を押し広げ、
     スマホ390pxで644pxはみ出して横スクロールが発生していた。
     0を指定して初めて overflow-x:auto が効き、列の中だけでスクロールする。 */
  min-width: 0;
  width: 100%;
}
.st-pdp__gallery {
  display: flex; flex-direction: column; gap: 12px;
  /* 親側も縮めるようにしておく。ここが auto だと子の min-width を無視できない */
  min-width: 0;
}
.st-pdp__thumb { flex: 0 0 auto; }
@media (max-width: 600px) {
  .st-pdp__thumbs {
    flex-direction: row; flex-wrap: nowrap; order: 2;
    max-height: none; overflow-y: visible;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .st-pdp__thumb { flex: 0 0 auto; }
}
.st-pdp__thumb {
  background: var(--st-cream);
  border: 1.5px solid var(--st-red-soft);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  width: 72px; height: 72px;
  padding: 0;
}
.st-pdp__thumb.is-active {
  border-color: var(--st-red);
  box-shadow: 0 0 0 1px var(--st-red);
}
.st-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.st-pdp__info { padding-top: 8px; }
.st-pdp__vendor {
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--st-red); font-weight: 700; margin: 0 0 8px;
  text-transform: uppercase;
}
.st-pdp__title {
  font-size: 28px; font-weight: 800; color: var(--st-text-strong);
  margin: 0 0 14px; letter-spacing: 0.04em; line-height: 1.4;
}

.st-pdp__rating {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.st-pdp__stars {
  color: var(--st-yellow);
  font-size: 16px;
  letter-spacing: 0.06em;
}
.st-pdp__rating-num {
  font-weight: 800; color: var(--st-text-strong); font-size: 14px;
}
.st-pdp__rating-link {
  font-size: 13px; color: var(--st-text);
  text-decoration: underline;
}

.st-pdp__price {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 18px;
  background: var(--st-cream);
  border-left: 4px solid var(--st-red);
  border-radius: 4px;
  margin-bottom: 22px;
}
.st-pdp__price-strike {
  text-decoration: line-through;
  color: var(--st-text); font-size: 14px; opacity: 0.7;
}
.st-pdp__price-now {
  font-size: 28px; font-weight: 800; color: var(--st-red);
  letter-spacing: 0.02em;
}
.st-pdp__price-tax {
  font-size: 12px; color: var(--st-text); margin-left: 4px;
}

.st-pdp__form {
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 24px;
}
.st-pdp__option-label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--st-text-strong); letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.st-pdp__option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.st-pdp__opt-chip { cursor: pointer; }
.st-pdp__opt-chip input { display: none; }
.st-pdp__opt-chip span {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid var(--st-red-soft);
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  color: var(--st-text);
}
.st-pdp__opt-chip input:checked + span,
.st-pdp__opt-chip:hover span {
  background: var(--st-red); color: #fff; border-color: var(--st-red);
}

.st-pdp__qty { display: flex; align-items: center; gap: 16px; }
.st-pdp__qty label {
  font-size: 13px; font-weight: 700; color: var(--st-text-strong); letter-spacing: 0.06em;
}
.st-pdp__qty-ctrl {
  display: inline-flex; align-items: center;
  border: 2px solid var(--st-red);
  border-radius: 999px;
  overflow: hidden;
}
.st-pdp__qty-ctrl button {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--st-red);
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.st-pdp__qty-ctrl button:hover { background: var(--st-red); color: #fff; }
.st-pdp__qty-ctrl input {
  width: 44px; height: 36px;
  border: none; outline: none;
  text-align: center; font-weight: 700; font-size: 14px;
  color: var(--st-text-strong);
  background: transparent;
}
.st-pdp__qty-ctrl input::-webkit-outer-spin-button,
.st-pdp__qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; }

.st-pdp__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--st-red); color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--st-red-deep);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.st-pdp__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--st-red-deep);
}
.st-pdp__cta-icon { font-size: 18px; }

.st-pdp__fav {
  background: var(--st-paper);
  border: 2px solid var(--st-red);
  color: var(--st-red);
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer;
}
.st-pdp__fav:hover { background: var(--st-red-soft); }

.st-pdp__meta {
  list-style: none; padding: 16px 18px; margin: 0;
  border: 1px solid var(--st-red-soft);
  border-radius: 10px;
  background: var(--st-cream);
}
.st-pdp__meta li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 6px 0;
  font-size: 13px; line-height: 1.6;
  color: var(--st-text);
}
.st-pdp__meta li + li { border-top: 1px dashed var(--st-red-soft); margin-top: 6px; padding-top: 12px; }
.st-pdp__meta strong {
  color: var(--st-red); font-weight: 700; letter-spacing: 0.08em; font-size: 12px;
}

.st-pdp__quicklinks {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--st-line);
  font-size: 13px;
}
.st-pdp__quicklinks a {
  color: var(--st-red); text-decoration: underline; font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---- Tabs ---- */
.st-pdp-tabs { background: var(--st-paper); padding: 24px 0 32px; }
.st-pdp-tabs .st-container { max-width: 1180px; }
.st-pdp-tabs__bar {
  display: flex; flex-wrap: wrap;
  border-bottom: 2px solid var(--st-red);
}
.st-pdp-tabs__tab {
  background: var(--st-cream);
  border: 2px solid var(--st-red);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 12px 20px;
  font-size: 13px; font-weight: 700;
  color: var(--st-text);
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-right: 4px;
  margin-bottom: -2px;
  position: relative;
}
.st-pdp-tabs__tab.is-active {
  background: var(--st-red); color: #fff;
}
/* 本文が1行1150pxまで伸びて読みづらかったため、読みやすい行長に収める。
   囲みの枠ごと中央に寄せる（中身だけ狭めると右側が空いて不格好） */
.st-pdp-tabs__bar,
.st-pdp-tabs__panels { max-width: 900px; margin-inline: auto; }
.st-pdp-tabs__panels {
  padding: 28px 24px;
  border: 2px solid var(--st-red);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--st-paper);
}
.st-pdp-tabs__panel { display: none; }
.st-pdp-tabs__panel.is-active { display: block; }
.st-pdp-tabs__h {
  font-size: 18px; font-weight: 800; color: var(--st-red);
  margin: 0 0 14px;
  letter-spacing: 0.08em;
  padding-left: 12px;
  border-left: 4px solid var(--st-red);
  line-height: 1.4;
}
.st-pdp-tabs__panel p {
  margin: 0 0 12px; line-height: 1.9;
  font-size: 14px; color: var(--st-text); letter-spacing: 0.04em;
}

/* ---- Gift banner ---- */
.st-pdp-gift { background: var(--st-cream); padding: 36px 0; }
.st-pdp-gift .st-container { max-width: 1180px; }
.st-pdp-gift__card {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  background: var(--st-paper);
  border: 2px solid var(--st-red);
  border-radius: 18px;
  box-shadow: 0 4px 0 0 var(--st-red);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  align-items: stretch;
}
@media (max-width: 768px) {
  .st-pdp-gift__card { grid-template-columns: 1fr; }
}
.st-pdp-gift__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--st-red-deep);
}
.st-pdp-gift__copy {
  padding: 28px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.st-pdp-gift__tag {
  display: inline-block; align-self: flex-start;
  background: var(--st-red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em;
  padding: 4px 12px; border-radius: 999px;
}
.st-pdp-gift__h {
  font-size: 22px; font-weight: 800; color: var(--st-red);
  margin: 4px 0; letter-spacing: 0.08em;
}
.st-pdp-gift__lead {
  font-size: 13px; line-height: 1.8; color: var(--st-text); margin: 0;
}
.st-pdp-gift__cta {
  align-self: flex-start; margin-top: 6px;
  font-size: 13px; font-weight: 800; color: var(--st-red);
  letter-spacing: 0.08em;
}
.st-pdp-gift__media {
  background: var(--st-cream);
  border-left: 2px solid var(--st-red);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
  .st-pdp-gift__media { border-left: none; border-top: 2px solid var(--st-red); aspect-ratio: 16/9; }
}
.st-pdp-gift__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Categories grid ---- */
.st-pdp-cat { background: var(--st-paper); padding: 56px 0; }
.st-pdp-cat .st-container { max-width: 1180px; }
.st-pdp-cat__h {
  text-align: center; font-size: 22px; font-weight: 800;
  color: var(--st-red); letter-spacing: 0.12em; margin: 0 0 24px;
}
.st-pdp-cat__h::before, .st-pdp-cat__h::after {
  content: ""; display: inline-block;
  width: 24px; height: 2px; background: var(--st-red);
  vertical-align: middle; margin: 0 12px;
  transform: translateY(-5px);
}
.st-pdp-cat__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
@media (max-width: 768px) {
  .st-pdp-cat__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .st-pdp-cat__grid { grid-template-columns: repeat(3, 1fr); }
}
.st-pdp-cat__tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px;
  background: var(--st-cream);
  border: 1.5px solid var(--st-red-soft);
  border-radius: 10px;
  text-decoration: none;
  color: var(--st-text-strong);
  transition: all 0.15s ease;
  text-align: center;
}
.st-pdp-cat__tile:hover {
  background: var(--st-red);
  color: #fff;
  border-color: var(--st-red);
  transform: translateY(-2px);
}
.st-pdp-cat__icon {
  font-size: 24px; line-height: 1;
  display: grid; place-items: center;
  color: var(--st-red);
}
.st-pdp-cat__svg {
  width: 26px; height: 26px; display: block;
}
.st-pdp-cat__tile:hover .st-pdp-cat__svg { color: var(--st-red-deep); }
.st-pdp-cat__label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  text-align: center;
}

/* ---- Recommend products ---- */
.st-pdp-rec { background: var(--st-cream); padding: 48px 0; }
.st-pdp-rec .st-container { max-width: 1180px; }
.st-pdp-rec__h {
  font-size: 20px; font-weight: 800; color: var(--st-red);
  letter-spacing: 0.1em;
  padding-left: 12px;
  border-left: 4px solid var(--st-red);
  margin: 0 0 18px;
}
.st-pdp-rec__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 768px) {
  .st-pdp-rec__grid { grid-template-columns: repeat(2, 1fr); }
}
.st-pdp-rec__card {
  background: var(--st-paper);
  border: 2px solid var(--st-red);
  border-radius: 14px;
  box-shadow: 0 3px 0 0 var(--st-red);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.st-pdp-rec__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 0 var(--st-red-deep);
}
.st-pdp-rec__media {
  aspect-ratio: 1/1;
  background: var(--st-cream);
  overflow: hidden;
}
.st-pdp-rec__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-pdp-rec__body { padding: 12px 14px; }
.st-pdp-rec__name {
  font-size: 13px; font-weight: 800; color: var(--st-text-strong);
  line-height: 1.4; margin: 0 0 6px; letter-spacing: 0.02em;
}
.st-pdp-rec__price {
  font-size: 14px; font-weight: 800; color: var(--st-red); margin: 0;
}

/* ---- Features tiles ---- */
.st-pdp-feat { background: var(--st-paper); padding: 48px 0; }
.st-pdp-feat .st-container { max-width: 1180px; }
.st-pdp-feat__h {
  font-size: 20px; font-weight: 800; color: var(--st-red);
  letter-spacing: 0.1em;
  padding-left: 12px;
  border-left: 4px solid var(--st-red);
  margin: 0 0 18px;
}
.st-pdp-feat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .st-pdp-feat__grid { grid-template-columns: repeat(2, 1fr); } }
.st-pdp-feat__card {
  text-decoration: none;
  color: var(--st-text-strong);
}
.st-pdp-feat__media {
  aspect-ratio: 4/3;
  background: var(--st-cream);
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--st-red-soft);
}
.st-pdp-feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.st-pdp-feat__card:hover .st-pdp-feat__media img { transform: scale(1.05); }
.st-pdp-feat__title {
  margin: 10px 0 0;
  font-size: 15px; font-weight: 800;
  color: var(--st-text-strong);
  letter-spacing: 0.04em; line-height: 1.5;
}

/* ---- Articles ---- */
.st-pdp-art { background: var(--st-cream); padding: 48px 0 64px; }
.st-pdp-art .st-container { max-width: 1180px; }
.st-pdp-art__h {
  font-size: 20px; font-weight: 800; color: var(--st-red);
  letter-spacing: 0.1em;
  padding-left: 12px;
  border-left: 4px solid var(--st-red);
  margin: 0 0 18px;
}
.st-pdp-art__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .st-pdp-art__grid { grid-template-columns: 1fr; } }
.st-pdp-art__card {
  text-decoration: none; color: var(--st-text-strong);
  background: var(--st-paper);
  border: 1.5px solid var(--st-red-soft);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.st-pdp-art__card:hover {
  transform: translateY(-2px);
  border-color: var(--st-red);
  box-shadow: 0 4px 0 0 var(--st-red);
}
.st-pdp-art__media {
  aspect-ratio: 16/10;
  background: var(--st-cream);
  overflow: hidden;
}
.st-pdp-art__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-pdp-art__title {
  margin: 14px 16px 8px;
  font-size: 15.5px; font-weight: 800;
  color: var(--st-text-strong);
  letter-spacing: 0.03em; line-height: 1.5;
}
.st-pdp-art__excerpt {
  margin: 0 16px 16px;
  font-size: 13.5px; line-height: 1.7;
  color: var(--st-text);
}

/* ============================================
   FV HERO — Glossier-style fullbleed (Figma 13:24301/26621)
   ============================================ */
.st-fv {
  position: relative;
  height: 88vh;
  min-height: 620px;
  max-height: 860px;
  overflow: hidden;
  background: var(--st-cream);
}
.st-fv__bg { position: absolute; inset: 0; }
.st-fv__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) saturate(0.95);
}
.st-fv__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.st-fv__brand {
  position: absolute;
  left: -4vw;
  bottom: -3vw;
  font-family: Inter, "Yu Gothic", sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 22vw, 380px);
  line-height: 0.82;
  letter-spacing: -0.035em;
  color: rgba(255,255,255,0.96);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: overlay;
}
.st-fv__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 6vw 9vw;
  max-width: 1280px;
  margin: 0 auto;
}
.st-fv__card {
  background: transparent;
  padding: 0;
  max-width: 480px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.st-fv__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #fff;
  margin-bottom: 18px;
  font-family: Inter, sans-serif;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.st-fv__h {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: #fff;
  margin: 0 0 18px;
  white-space: pre-line;
  text-shadow: 0 2px 16px rgba(0,0,0,0.22);
}
.st-fv__sub {
  font-size: 14px;
  line-height: 2.0;
  color: rgba(255,255,255,0.94);
  margin: 0 0 28px;
  white-space: pre-line;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
  max-width: 420px;
}
.st-fv__cta {
  display: inline-block;
  background: transparent;
  color: #fff;
  padding: 14px 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 0;
  text-decoration: none;
  box-shadow: none;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.st-fv__cta:hover {
  background: var(--st-paper);
  color: var(--st-text-strong);
  border-color: #fff;
}
@media (max-width: 768px) {
  .st-fv { height: 90vh; min-height: 540px; }
  .st-fv__inner { padding: 0 24px 80px; align-items: flex-end; }
  .st-fv__card { max-width: none; }
  .st-fv__h { font-size: clamp(26px, 7vw, 36px); }
  .st-fv__brand { font-size: clamp(90px, 28vw, 220px); bottom: -2vw; left: -6vw; }
}

/* ============================================
   SALE RAIL — best sellers strip
   ============================================ */
.st-srail {
  background: var(--st-paper);
  padding: clamp(72px, 10vw, 120px) 0;
}
.st-srail .st-container { max-width: 1320px; padding: 0 clamp(24px, 5vw, 60px); }
.st-srail__head {
  margin-bottom: clamp(36px, 5vw, 64px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.st-srail__tag {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.32em;
  color: var(--st-text);
  font-family: Inter, sans-serif;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.st-srail__h {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  color: var(--st-text-strong); margin: 0;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.st-srail__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px) clamp(16px, 1.6vw, 24px);
}
@media (max-width: 1024px) { .st-srail__rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .st-srail__rail { grid-template-columns: 1fr; } }
.st-srail__card {
  position: relative;
  background: transparent;
  border-radius: 0;
  text-decoration: none;
  color: var(--st-text-strong);
  padding: 0;
  border: none;
  transition: opacity 0.25s ease;
}
.st-srail__card:hover { opacity: 0.78; }
.st-srail__card:hover .st-srail__media img { transform: scale(1.04); }
.st-srail__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.95);
  color: var(--st-text-strong);
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  padding: 5px 12px;
  border-radius: 0;
  z-index: 2;
  text-transform: uppercase;
}
.st-srail__media {
  aspect-ratio: 4 / 5;
  background: var(--st-cream);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 14px;
}
.st-srail__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.st-srail__name {
  font-size: 13px; font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--st-text-strong);
}
.st-srail__swatches {
  display: flex; gap: 5px; margin-bottom: 8px;
}
.st-srail__swatches span {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
}
.st-srail__price {
  font-size: 13px; font-weight: 500;
  color: var(--st-text); margin: 0;
  letter-spacing: 0.04em;
}

/* ============================================
   SPLIT FEATURE — 2-image fullbleed (Figma 13:24301)
   ============================================ */
.st-split {
  position: relative;
  height: 80vh;
  min-height: 560px;
  max-height: 760px;
  overflow: hidden;
}
.st-split__bg {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.st-split__col { overflow: hidden; }
.st-split__col img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.st-split:hover .st-split__col img { transform: scale(1.03); }
.st-split__col--left { background: var(--st-cream); }
.st-split__col--right { background: var(--st-red-soft); }
.st-split__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-split__card {
  background: rgba(255,255,255,0.96);
  border: none;
  border-radius: 0;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.18);
  padding: clamp(36px, 5vw, 64px) clamp(40px, 6vw, 72px);
  max-width: 540px;
  text-align: center;
  backdrop-filter: blur(2px);
}
.st-split__caption {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.32em;
  color: var(--st-text);
  font-family: Inter, sans-serif;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.st-split__h {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  color: var(--st-text-strong);
  letter-spacing: 0.06em; line-height: 1.65;
  white-space: pre-line;
  margin: 0 0 22px;
}
.st-split__body {
  font-size: 13px; line-height: 2.0;
  color: var(--st-text); margin: 0 0 28px;
  letter-spacing: 0.06em;
}
.st-split__cta {
  display: inline-block;
  background: transparent; color: var(--st-text-strong);
  padding: 13px 30px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em;
  border: 1px solid var(--st-text-strong);
  border-radius: 0; text-decoration: none;
  box-shadow: none;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
.st-split__cta:hover {
  color: #fff;
  background: var(--st-text-strong);
  transform: none;
  box-shadow: none;
}
@media (max-width: 768px) {
  .st-split { height: auto; min-height: 0; }
  .st-split__bg { position: relative; height: 50vh; grid-template-columns: 1fr 1fr; }
  .st-split__overlay { padding: 24px 16px; }
  .st-split__card { padding: 22px 24px; }
  .st-split__h { font-size: 18px; }
}

/* ============================================
   PHOTO TRIO — 3-grid lifestyle photos
   ============================================ */
.st-trio { background: var(--st-paper); padding: clamp(80px, 10vw, 140px) 0; }
.st-trio .st-container { max-width: 1320px; padding: 0 clamp(24px, 5vw, 60px); }
.st-trio__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.st-trio__cap {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.32em;
  color: var(--st-text); font-family: Inter, sans-serif;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.st-trio__h {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  color: var(--st-text-strong);
  letter-spacing: 0.06em; margin: 0;
  line-height: 1.4;
}
.st-trio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
}
@media (max-width: 768px) { .st-trio__grid { grid-template-columns: 1fr; } }
.st-trio__item {
  position: relative;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
  display: block;
}
.st-trio__media {
  aspect-ratio: 4 / 5;
  background: var(--st-cream);
  overflow: hidden;
}
.st-trio__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.st-trio__item:hover .st-trio__media img { transform: scale(1.04); }
.st-trio__label {
  position: absolute;
  left: 0; bottom: 18px;
  padding: 0 18px;
  background: transparent;
  color: #fff;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.28em;
  border-radius: 0;
  font-family: Inter, sans-serif;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

/* ============================================
   FOOTER RICH — link grid + brand watermark
   ============================================ */
.st-foot {
  background: var(--st-text-strong);
  color: #fff;
  padding: 56px 0 28px;
  position: relative;
  overflow: hidden;
}
.st-foot .st-container { max-width: 1280px; position: relative; z-index: 2; }
.st-foot__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
@media (max-width: 768px) { .st-foot__grid { grid-template-columns: repeat(2, 1fr); } }
.st-foot__col h4 {
  font-size: 12px; font-weight: 800;
  color: var(--st-red);
  letter-spacing: 0.2em;
  margin: 0 0 14px;
  font-family: Inter, sans-serif;
}
.st-foot__col ul {
  list-style: none; margin: 0; padding: 0;
}
.st-foot__col li { margin-bottom: 8px; }
.st-foot__col a, .st-foot__col span {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.st-foot__col a:hover { color: var(--st-red); text-decoration: underline; }
.st-foot__brand {
  position: absolute;
  left: -2vw; right: -2vw;
  bottom: -3vw;
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(80px, 14vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.st-foot__bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 18px;
  position: relative; z-index: 2;
}
.st-foot__copy {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
}
.st-foot__icons { display: flex; gap: 8px; font-size: 18px; }

/* ============================================
   STORY VIDEO — 想い動画セクション
   ============================================ */
.st-story {
  background: linear-gradient(180deg, var(--st-cream) 0%, #fff 100%);
  padding: 64px 0 72px;
  position: relative;
}
.st-story::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--st-red);
  opacity: 0.6;
}
.st-story .st-container { max-width: 1180px; }
.st-story__head {
  text-align: center;
  margin-bottom: 40px;
}
.st-story__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: var(--st-red);
  font-family: Inter, sans-serif;
  margin-bottom: 14px;
  padding: 4px 14px;
  border: 1px solid var(--st-red);
  border-radius: 999px;
}
.st-story__h {
  font-size: 32px;
  font-weight: 800;
  color: var(--st-text-strong);
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0;
}
.st-story__h::before, .st-story__h::after {
  content: "";
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin: 0 14px;
  transform: translateY(-6px);
}
.st-story__lead {
  margin: 14px auto 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--st-text);
  max-width: 620px;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .st-story__h { font-size: 22px; letter-spacing: 0.06em; }
  .st-story__h::before, .st-story__h::after { width: 18px; margin: 0 8px; }
}

.st-story__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .st-story__grid { grid-template-columns: 1fr; gap: 24px; }
}

.st-story__video { width: 100%; }
.st-story__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 2px solid var(--st-red);
  box-shadow: 0 4px 0 0 var(--st-red);
}
.st-story__player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.st-story__copy {
  display: flex; flex-direction: column; gap: 18px;
}
.st-story__body p {
  font-size: 14px;
  line-height: 2;
  color: var(--st-text);
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  font-family: var(--st-font-jp);
}
.st-story__body p:last-child { margin-bottom: 0; }
.st-story__body strong {
  color: var(--st-red);
  font-weight: 800;
}
.st-story__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--st-red);
  color: #fff;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  box-shadow: 0 4px 0 0 var(--st-red-deep);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.st-story__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--st-red-deep);
  color: #fff;
}

/* ============================================
   FAQ page — editorial / minimal
   ============================================ */
.st-faq {
  background: var(--st-paper);
  padding: 80px 0 96px;
}
.st-faq .st-container {
  max-width: 760px;
}
.st-faq__head {
  text-align: center;
  margin-bottom: 64px;
}
.st-faq__head h1 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--st-text-strong);
  letter-spacing: 0.18em;
  margin: 0;
  line-height: 1.3;
}
.st-faq__head h1::before {
  content: "FAQ";
  display: block;
  font-family: Inter, "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--st-red);
  margin-bottom: 14px;
}
.st-faq__head p {
  margin: 18px auto 0;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.9;
  color: #6b6b6b;
  letter-spacing: 0.08em;
}
.st-faq__cat {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--st-text-strong);
  letter-spacing: 0.16em;
  margin: 56px 0 8px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--st-text-strong);
  line-height: 1.4;
}
.st-faq__cat:first-of-type { margin-top: 0; }
.st-faq__group {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}
.st-faq__item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition: background 0.25s ease;
}
.st-faq__item[open] {
  background: #fbfaf8;
}
.st-faq__q {
  display: grid;
  grid-template-columns: 28px 1fr 20px;
  align-items: start;
  gap: 18px;
  padding: 22px 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  color: var(--st-text-strong);
  list-style: none;
  letter-spacing: 0.06em;
  line-height: 1.7;
  transition: color 0.2s ease;
}
.st-faq__q:hover { color: var(--st-red); }
.st-faq__q::-webkit-details-marker { display: none; }
.st-faq__q-mark {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--st-red);
  line-height: 1.4;
  letter-spacing: 0;
}
.st-faq__q-text {
  line-height: 1.7;
  padding-top: 1px;
}
.st-faq__q-toggle {
  width: 14px;
  height: 14px;
  position: relative;
  justify-self: end;
  align-self: center;
  margin-top: 4px;
}
.st-faq__q-toggle::before,
.st-faq__q-toggle::after {
  content: "";
  position: absolute;
  background: #999;
  border-radius: 0;
  transition: transform 0.25s ease, background 0.2s ease;
}
.st-faq__q-toggle::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 1px;
}
.st-faq__q-toggle::after {
  top: 0;
  left: 6px;
  width: 1px;
  height: 14px;
}
.st-faq__item[open] .st-faq__q-toggle::before { background: var(--st-red); }
.st-faq__item[open] .st-faq__q-toggle::after { transform: scaleY(0); }
.st-faq__a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  padding: 0 6px 28px;
  border: 0;
  margin: 0;
}
.st-faq__a-mark {
  display: block;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 18px;
  font-weight: 500;
  color: #b8a99a;
  line-height: 1.4;
}
.st-faq__a-text {
  font-size: 14px;
  line-height: 2;
  color: var(--st-text);
  letter-spacing: 0.04em;
}
.st-faq__a-text p { margin: 0 0 10px; }
.st-faq__a-text p:last-child { margin-bottom: 0; }
.st-faq__a-text a {
  color: var(--st-red);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--st-red-soft);
  transition: border-color 0.2s ease;
}
.st-faq__a-text a:hover { border-bottom-color: var(--st-red); }
.st-faq__contact {
  margin-top: 72px;
  padding: 40px 32px;
  text-align: center;
  background: var(--st-cream);
  border: 0;
  border-radius: 2px;
  box-shadow: none;
}
.st-faq__contact p {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.9;
  color: #6b6b6b;
  letter-spacing: 0.08em;
}
.st-faq__contact-cta {
  display: inline-block;
  padding: 14px 36px;
  background: transparent;
  color: var(--st-text-strong);
  border: 1px solid var(--st-text-strong);
  border-radius: 0;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.st-faq__contact-cta:hover {
  background: var(--st-text-strong);
  color: #fff;
}
@media (max-width: 640px) {
  .st-faq { padding: 56px 0 72px; }
  .st-faq__head { margin-bottom: 44px; }
  .st-faq__head h1 { font-size: 26px; letter-spacing: 0.14em; }
  .st-faq__head p { font-size: 12px; }
  .st-faq__cat { font-size: 14px; margin-top: 40px; }
  .st-faq__q { font-size: 14px; padding: 18px 4px; gap: 12px; grid-template-columns: 22px 1fr 16px; }
  .st-faq__q-mark, .st-faq__a-mark { font-size: 16px; }
  .st-faq__a { grid-template-columns: 22px 1fr; gap: 12px; padding: 0 4px 22px; }
  .st-faq__a-text { font-size: 13px; }
  .st-faq__contact { padding: 32px 20px; margin-top: 56px; }
}

/* ============================================
   MAIN HEADER — Figma 11:5725 (Nakagawa-shoten style)
   ロゴ｜中央テキストメニュー｜検索｜会員/ログイン/カート
   ============================================ */
.st-hd-main {
  background: var(--st-paper);
  border-bottom: 1px solid #e6e6e6;
}
.st-hd-main__inner {
  max-width: 1437px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 30px;
  padding: 18px 55px 18px 55px;
  font-family: var(--st-font-jp);
}
@media (max-width: 1024px) {
  .st-hd-main__inner { padding: 14px 24px; gap: 18px; }
}
@media (max-width: 760px) {
  .st-hd-main__inner {
    grid-template-columns: auto auto;
    grid-template-areas:
      "logo actions"
      "search search"
      "nav nav";
    gap: 12px;
    padding: 12px 16px;
  }
}

.st-hd-main__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--st-text-strong);
  width: auto;
  min-height: 64px;
}
@media (max-width: 760px) { .st-hd-main__logo { grid-area: logo; min-height: 52px; } }
.st-hd-main__logo img {
  display: block;
  height: 64px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 760px) {
  .st-hd-main__logo img { height: 48px; }
}
.st-hd-main__logo-mark {
  font-size: 26px;
  font-weight: 800;
  color: var(--st-red);
  letter-spacing: 0.16em;
  line-height: 1;
}
.st-hd-main__logo-sub {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--st-text);
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.st-hd-main__nav {
  justify-self: end;
}
@media (max-width: 760px) { .st-hd-main__nav { grid-area: nav; justify-self: stretch; } }
.st-hd-main__nav ul {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
}
@media (max-width: 760px) { .st-hd-main__nav ul { justify-content: space-between; gap: 0; } }
.st-hd-main__nav a {
  display: inline-block;
  padding: 4px 28px 4px 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: #000;
  text-decoration: none;
  font-family: var(--st-font-jp);
}
.st-hd-main__nav a:hover {
  color: var(--st-red);
}
@media (max-width: 760px) { .st-hd-main__nav a { padding: 6px 4px; font-size: 12px; letter-spacing: 0.06em; } }

.st-hd-main__search {
  position: relative;
  width: 284px;
}
@media (max-width: 1024px) { .st-hd-main__search { width: 220px; } }
@media (max-width: 760px) { .st-hd-main__search { grid-area: search; width: auto; } }
.st-hd-main__search input {
  width: 100%;
  height: 40px;
  padding: 0 50px 0 18px;
  border: 1px solid #555;
  border-radius: 36px;
  background: var(--st-paper);
  font-size: 13px;
  color: #333;
  outline: none;
  font-family: var(--st-font-jp);
}
.st-hd-main__search input::placeholder { color: #888; }
.st-hd-main__search input:focus {
  border-color: var(--st-red);
}
.st-hd-main__search button {
  position: absolute;
  top: 50%; right: 1px; transform: translateY(-50%);
  width: 38px; height: 38px;
  border: none;
  background: transparent;
  border-radius: 0 36px 36px 0;
  cursor: pointer;
  color: var(--st-red);
  display: flex; align-items: center; justify-content: center;
}
.st-hd-main__search button:hover { color: var(--st-red-deep); }
.st-hd-main__search button svg { width: 17px; height: 17px; }

.st-hd-main__actions {
  display: flex; align-items: center;
  padding-left: 26px;
  position: relative;
  gap: 11px;
}
@media (max-width: 760px) { .st-hd-main__actions { grid-area: actions; padding-left: 0; gap: 8px; } }
.st-hd-main__actions::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; transform: translateY(-50%);
  width: 1px; height: 24px;
  background: #cbcbcb;
}
@media (max-width: 760px) { .st-hd-main__actions::before { display: none; } }
.st-hd-main__act {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none;
  color: #000;
  min-width: 36px;
}
.st-hd-main__act-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: var(--st-red);
}
.st-hd-main__act-icon svg { width: 100%; height: 100%; display: block; }
.st-hd-main__act-label {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: var(--st-font-jp);
}
.st-hd-main__act:hover .st-hd-main__act-icon { color: var(--st-red-deep); }
.st-hd-main__act:hover .st-hd-main__act-label { color: var(--st-red-deep); }

/* 既存 Horizon ヘッダーは非表示にして st-header-main に集約 */
header-component { display: none !important; }
#header-group .shopify-section--header { display: none !important; }
#header-group .shopify-section--st-header-main { display: block !important; }

/* ============================================
   QUICKNAV — Figma 1:2325 (mobile under-header strip)
   ============================================ */
.st-quicknav {
  background: var(--st-paper);
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.st-quicknav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 480px;
  margin-inline: auto;
}
.st-quicknav__item {
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid #ddd;
}
.st-quicknav__item:last-child {
  border-right: none;
}
.st-quicknav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding-top: 13px;
  padding-bottom: 8px;
  text-decoration: none;
  color: var(--st-text-strong, var(--st-text-strong));
  font-family: var(--st-font-jp);
}
.st-quicknav__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--st-red, #dc4a26);
}
.st-quicknav__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.st-quicknav__label {
  font-size: 10px;
  line-height: 15px;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.st-quicknav__link:hover .st-quicknav__icon {
  color: var(--st-red-deep, #b83b1d);
}
@media (min-width: 1024px) {
  .st-quicknav__list {
    max-width: 720px;
  }
  .st-quicknav__label {
    font-size: 12px;
  }
}

/* ============================================
   1:19 PASS — unified red-on-white treatment
   (overrides + extras)
   ============================================ */

/* shared section heading (赤帯下、ハッシュ風) */
.st-h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--st-red);
  letter-spacing: 0.08em;
  margin: 0 0 6px;
  position: relative;
  display: inline-block;
}
.st-h2::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-4px);
}
.st-h2::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin-left: 12px;
  transform: translateY(-4px);
}
.st-sub {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--st-text);
  margin: 8px auto 0;
  max-width: 620px;
  line-height: 1.9;
}

/* ---- HERO override (white card + red ribbon) ---- */
.st-hero {
  background: var(--st-paper) !important;
  padding: 32px 0 48px !important;
  overflow: visible !important;
}
.st-hero::before, .st-hero::after { display: none !important; }
.st-hero .st-container {
  background: var(--st-cream);
  border: 2px solid var(--st-red);
  border-radius: 18px;
  box-shadow: 0 4px 0 0 var(--st-red);
  padding: 32px 24px 28px;
  max-width: 960px;
  position: relative;
}
.st-hero .st-container::before {
  content: "整体茶";
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--st-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 14px;
  border-radius: 999px;
}
.st-hero__chars {
  margin-bottom: 18px;
}
.st-hero__chars img {
  height: 96px;
  border-radius: 50%;
  background: var(--st-paper);
  border: 2px solid var(--st-red);
  padding: 4px;
  filter: none !important;
}
@media (max-width: 768px) {
  .st-hero__chars img { height: 64px; }
}
.st-hero__deco-dot {
  background: var(--st-red) !important;
  opacity: 1 !important;
}
.st-hero__hashtag {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}
.st-hero__lead {
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  color: var(--st-text) !important;
}
@media (max-width: 768px) {
  .st-hero__hashtag { font-size: 22px !important; }
}

/* ---- CAMPAIGN BANNERS override (white + red border) ---- */
.st-cbn {
  background: var(--st-paper) !important;
  padding: 32px 0 16px !important;
}
.st-cbn__card {
  background: var(--st-paper) !important;
  border: 2px solid var(--st-red) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 0 var(--st-red) !important;
  padding: 16px 18px !important;
  transition: transform 0.2s ease !important;
}
.st-cbn__card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 0 var(--st-red-deep) !important;
}
.st-cbn__badge {
  background: var(--st-red) !important;
  letter-spacing: 0.1em;
}
.st-cbn__copy {
  color: var(--st-red);
  font-weight: 800;
}
.st-cbn__media {
  border: 1px solid var(--st-red-soft);
  border-radius: 10px !important;
}

/* ---- STATEMENT override (red double rule) ---- */
.st-statement {
  background: var(--st-paper) !important;
  padding: 56px 0 !important;
  position: relative;
}
.st-statement::before, .st-statement::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--st-red);
}
.st-statement::before { top: 36px; }
.st-statement::after { bottom: 36px; }
.st-statement h2 {
  color: var(--st-red) !important;
  font-size: 28px !important;
  letter-spacing: 0.16em !important;
}
.st-statement__body {
  letter-spacing: 0.06em;
}

/* ---- GALLERY heading override ---- */
.st-gallery__head h2 {
  color: var(--st-red) !important;
  letter-spacing: 0.1em !important;
}
.st-gallery__head h2::before,
.st-gallery__head h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin: 0 12px;
  transform: translateY(-5px);
}
.st-gallery__media {
  border: 1px solid var(--st-red-soft);
  background: var(--st-paper) !important;
}
.st-gallery__media img {
  background: var(--st-paper);
}
.st-gallery__name {
  color: var(--st-red);
}

/* ---- PRODUCT GRID override ---- */
.st-pgrid {
  background: var(--st-paper) !important;
}
.st-pgrid__head h2 {
  color: var(--st-red) !important;
  letter-spacing: 0.1em !important;
}
.st-pgrid__head h2::before,
.st-pgrid__head h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin: 0 12px;
  transform: translateY(-5px);
}
.st-pgrid__card {
  border: 1px solid var(--st-red-soft) !important;
  background: var(--st-cream) !important;
}
.st-pgrid__card:hover {
  border-color: var(--st-red) !important;
  box-shadow: 0 3px 0 0 var(--st-red);
}
.st-pgrid__media {
  background: var(--st-paper);
}
.st-pgrid__name {
  color: var(--st-text-strong);
}

/* ---- ABOUT mosaic override (white card grid) ---- */
.st-about {
  background: var(--st-cream) !important;
}
.st-about__head h2 {
  color: var(--st-red) !important;
  letter-spacing: 0.1em !important;
}
.st-about__head h2::before,
.st-about__head h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin: 0 12px;
  transform: translateY(-5px);
}
.st-about__cell {
  background: var(--st-paper) !important;
  border: 2px solid var(--st-red) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 0 var(--st-red) !important;
  color: var(--st-red) !important;
  overflow: hidden;
  transition: transform 0.2s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.st-about__cell:hover {
  transform: translateY(-2px);
}
.st-about__cell:nth-child(n) { background: var(--st-paper) !important; }
.st-about__cell img {
  opacity: 0.85;
}
.st-about__cell::before { display: none !important; }
.st-about__cell::after { display: none !important; }
.st-about__caption {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 3;
  color: var(--st-red) !important;
  text-shadow: none !important;
  background: transparent;
  padding: 0;
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.08em;
}
.st-about__cell:has(img) .st-about__caption {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.92);
  padding: 8px 16px;
  border-radius: 8px;
}
.st-about__caption small {
  display: block;
  color: var(--st-text);
  opacity: 1;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

/* ---- TAGS override ---- */
.st-tags {
  background: var(--st-paper) !important;
}
.st-tags__head h2 {
  color: var(--st-red) !important;
  letter-spacing: 0.12em !important;
}
.st-tags__chip {
  border: 2px solid var(--st-red) !important;
  color: var(--st-red) !important;
  font-weight: 700 !important;
}

/* ---- NEWS override ---- */
.st-news {
  background: var(--st-cream) !important;
}
.st-news__col h2 {
  color: var(--st-red);
  letter-spacing: 0.12em;
  border-bottom: 2px solid var(--st-red) !important;
}
.st-news__list {
  background: var(--st-paper);
  padding: 14px 18px !important;
  border-radius: 12px;
  border: 1px solid var(--st-red-soft);
}
.st-news__item a:last-child {
  border-bottom: none !important;
}
.st-line {
  border: 2px solid var(--st-red);
  box-shadow: 0 4px 0 0 var(--st-red);
}

/* ---- CONTRIBUTION override ---- */
.st-contrib {
  background: var(--st-cream) !important;
}
.st-contrib__inner {
  background: var(--st-paper);
  border: 2px solid var(--st-red) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 0 var(--st-red);
}

/* ============================================
   NEW — picks (おすすめ写真+商品)
   ============================================ */
.st-picks {
  background: var(--st-paper);
  padding: 64px 0;
}
.st-picks__head {
  text-align: center;
  margin-bottom: 32px;
}
.st-picks__head h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--st-red);
  margin: 0;
  letter-spacing: 0.1em;
}
.st-picks__head h2::before,
.st-picks__head h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin: 0 12px;
  transform: translateY(-5px);
}
.st-picks__head p {
  margin: 8px 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--st-text);
}
.st-picks__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) {
  .st-picks__grid { grid-template-columns: 1fr; }
  .st-picks__head h2 { font-size: 22px; }
}
.st-picks__photo {
  position: relative;
  border: 2px solid var(--st-red);
  border-radius: 18px;
  box-shadow: 0 4px 0 0 var(--st-red);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--st-cream) 0%, var(--st-red-soft) 100%);
}
.st-picks__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-picks__photo:not(:has(img))::before {
  content: "Tea & Wellness";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--st-red);
  letter-spacing: 0.2em;
  opacity: 0.4;
}
.st-picks__photo-cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--st-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 999px;
}
.st-picks__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-content: start;
}
.st-picks__item {
  background: var(--st-paper);
  border: 2px solid var(--st-red);
  border-radius: 14px;
  box-shadow: 0 3px 0 0 var(--st-red);
  padding: 10px;
  text-decoration: none;
  color: var(--st-text-strong);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-picks__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 0 var(--st-red-deep);
  transition: all 0.2s ease;
}
.st-picks__item-media {
  aspect-ratio: 1 / 1;
  background: var(--st-cream);
  border-radius: 8px;
  overflow: hidden;
}
.st-picks__item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-picks__item-name {
  font-size: 12px;
  font-weight: 700;
  margin: 4px 0 0;
  line-height: 1.4;
  color: var(--st-text-strong);
}
.st-picks__item-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--st-red);
  margin: 0;
}

/* ============================================
   NEW — calendar (営業カレンダー)
   ============================================ */
.st-cal {
  background: var(--st-cream);
  padding: 64px 0;
}
.st-cal__head {
  text-align: center;
  margin-bottom: 24px;
}
.st-cal__head h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--st-red);
  margin: 0;
  letter-spacing: 0.12em;
}
.st-cal__head h2::before,
.st-cal__head h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--st-red);
  vertical-align: middle;
  margin: 0 12px;
  transform: translateY(-5px);
}
.st-cal__legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  margin: 14px 0 24px;
  color: var(--st-text);
}
.st-cal__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-cal__legend i {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--st-red);
}
.st-cal__legend i.is-soft { background: var(--st-red-soft); }
.st-cal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .st-cal__grid { grid-template-columns: 1fr; }
}
.st-cal__month {
  background: var(--st-paper);
  border: 2px solid var(--st-red);
  border-radius: 14px;
  box-shadow: 0 4px 0 0 var(--st-red);
  padding: 18px 16px 14px;
}
.st-cal__title {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--st-red);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.st-cal__week,
.st-cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.st-cal__week {
  font-size: 11px;
  font-weight: 700;
  color: var(--st-text);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.st-cal__week span:first-child { color: var(--st-red); }
.st-cal__week span:last-child { color: #4f7a8d; }
.st-cal__day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--st-text-strong);
  border-radius: 6px;
}
.st-cal__day.is-empty { color: transparent; }
.st-cal__day.is-sun { color: var(--st-red); }
.st-cal__day.is-sat { color: #4f7a8d; }
.st-cal__day.is-off {
  background: var(--st-red);
  color: #fff;
}
.st-cal__day.is-soft {
  background: var(--st-red-soft);
  color: var(--st-red);
}
.st-cal__note {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--st-text);
  letter-spacing: 0.06em;
}

/* ============================================================
   GLOSSIER PURE v2 — final overrides
   全セクションを静謐路線に統一。装飾枠/赤ボタン/scale/translateを全廃。
   ============================================================ */

/* --- 共通: 派手な動きを全廃 --- */
.st-section a,
.st-section button,
.st-section [class*="__card"],
.st-section [class*="__cell"],
.st-section [class*="__item"],
.st-section [class*="__chip"],
.st-section img {
  transition: opacity 0.25s ease, color 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}
.st-section [class*="__card"]:hover,
.st-section [class*="__cell"]:hover,
.st-section [class*="__item"]:hover,
.st-section [class*="__chip"]:hover,
.st-section a:hover img,
.st-section a:hover [class*="__media"] img,
.st-section [class*="__cta"]:hover,
.st-section [class*="__card"]:hover img {
  transform: none !important;
  scale: none !important;
  box-shadow: none !important;
}
.st-section [class*="__card"]:hover img,
.st-section [class*="__media"] img,
.st-section a:hover img {
  transform: none !important;
}
.st-section a:hover { opacity: 0.72; }

/* --- 整体茶 共通トーン --- */
.st-section {
  background: var(--st-paper);
}

/* --- TRIAL CARDS ---------------------------------------------- */
.st-trial { background: var(--st-cream-2); padding: clamp(80px, 10vw, 140px) 0; }
.st-trial::before { display: none !important; }
.st-trial .st-container { max-width: 1320px; padding: 0 clamp(24px, 5vw, 60px); }
.st-trial__ribbon { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 32px !important; text-align: center; }
.st-trial__ribbon a {
  color: var(--st-text-strong) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-decoration: none;
  border-bottom: 1px solid var(--st-text-strong);
  padding-bottom: 4px;
  text-transform: uppercase;
}
.st-trial__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.st-trial__head h2 {
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: clamp(26px, 3.4vw, 42px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--st-text-strong) !important;
  line-height: 1.5 !important;
  white-space: pre-line;
}
.st-trial__head h2::before, .st-trial__head h2::after { display: none !important; }
.st-trial__head p {
  font-size: 13px !important;
  color: var(--st-text) !important;
  letter-spacing: 0.06em !important;
  line-height: 2.0 !important;
  margin-top: 16px !important;
}
.st-trial__list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(24px, 2.8vw, 48px) clamp(20px, 2vw, 32px) !important;
}
@media (max-width: 768px) { .st-trial__list { grid-template-columns: 1fr !important; } }
.st-trial__card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
.st-trial__media {
  aspect-ratio: 4 / 5 !important;
  background: var(--st-cream) !important;
  border-radius: 0 !important;
  margin: 0 0 18px !important;
  overflow: hidden !important;
}
.st-trial__media img { width: 100%; height: 100%; object-fit: cover; }
.st-trial__card-body { padding: 0 !important; text-align: left !important; }
.st-trial__tag {
  background: transparent !important;
  color: var(--st-text) !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  margin-bottom: 10px !important;
}
.st-trial__name {
  font-family: "Noto Serif JP", "Yu Mincho", serif !important;
  font-size: 16px !important; font-weight: 500 !important;
  color: var(--st-text-strong) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}
.st-trial__desc {
  font-size: 12px !important;
  line-height: 1.85 !important;
  color: var(--st-text) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 14px !important;
}
.st-trial__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px !important; }
.st-trial__price-strike {
  font-size: 12px !important; color: #b8b0a4 !important;
  text-decoration: line-through;
}
.st-trial__price-now {
  font-size: 18px !important; font-weight: 500 !important;
  color: var(--st-text-strong) !important;
  font-family: "Noto Serif JP", serif;
}
.st-trial__price-now small { font-size: 11px; font-weight: 400; }
.st-trial__cta {
  display: inline-block !important;
  background: transparent !important;
  color: var(--st-text-strong) !important;
  border: 1px solid var(--st-text-strong) !important;
  border-radius: 0 !important;
  padding: 11px 24px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  box-shadow: none !important;
  text-transform: uppercase;
}
.st-trial__cta:hover {
  background: var(--st-text-strong) !important;
  color: #fff !important;
}

/* --- PRODUCT GRID ----------------------------------------------- */
.st-pgrid { background: var(--st-paper); padding: clamp(80px, 10vw, 140px) 0; }
.st-pgrid .st-container { max-width: 1320px; padding: 0 clamp(24px, 5vw, 60px); }
.st-pgrid__head { text-align: center; margin-bottom: clamp(36px, 4vw, 56px) !important; }
.st-pgrid__head h2 {
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--st-text-strong) !important;
}
.st-pgrid__head h2::before, .st-pgrid__head h2::after { display: none !important; }
.st-pgrid__tabs { gap: 32px !important; justify-content: center !important; margin-top: 24px !important; }
.st-pgrid__tab {
  background: transparent !important;
  color: var(--st-text) !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  box-shadow: none !important;
}
.st-pgrid__tab.is-active, .st-pgrid__tab:hover {
  background: transparent !important;
  color: var(--st-text-strong) !important;
  border-bottom-color: var(--st-text-strong) !important;
  transform: none !important;
}
.st-pgrid__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 32px) !important;
}
@media (max-width: 1024px) { .st-pgrid__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .st-pgrid__grid { grid-template-columns: 1fr !important; } }
.st-pgrid__card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
.st-pgrid__media {
  aspect-ratio: 4 / 5 !important;
  background: var(--st-cream) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}
.st-pgrid__media img { width: 100%; height: 100%; object-fit: cover; }
.st-pgrid__sold {
  background: rgba(255,255,255,0.95) !important;
  color: var(--st-text-strong) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  text-transform: uppercase;
}
.st-pgrid__body { padding: 0 !important; text-align: left !important; }
.st-pgrid__name {
  font-family: "Noto Serif JP", serif !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--st-text-strong) !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 6px !important;
}
.st-pgrid__price {
  font-size: 13px !important; font-weight: 400 !important;
  color: var(--st-text) !important;
  letter-spacing: 0.04em !important;
}

/* --- ABOUT MOSAIC -------------------------------------------- */
.st-about { background: var(--st-cream-2); padding: clamp(80px, 10vw, 140px) 0; }
.st-about .st-container { max-width: 1320px; padding: 0 clamp(24px, 5vw, 60px); }
.st-about__head { text-align: center; margin-bottom: clamp(36px, 4vw, 56px) !important; }
.st-about__head h2 {
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--st-text-strong) !important;
}
.st-about__head h2::before, .st-about__head h2::after { display: none !important; }
.st-about__head p {
  font-size: 13px !important;
  line-height: 2.0 !important;
  color: var(--st-text) !important;
  letter-spacing: 0.06em !important;
  max-width: 640px; margin: 16px auto 0 !important;
}
.st-about__mosaic {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: minmax(200px, auto) !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
}
.st-about__mosaic > a:nth-child(n) {
  grid-column: auto !important; grid-row: auto !important;
}
@media (max-width: 768px) {
  .st-about__mosaic { grid-template-columns: 1fr 1fr !important; }
}
.st-about__cell {
  background: var(--st-paper) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 4/5 !important;
}
.st-about__cell::before, .st-about__cell::after { display: none !important; }
.st-about__cell img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.st-about__caption {
  position: absolute !important;
  left: 18px !important; bottom: 18px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  font-family: "Noto Serif JP", serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}
.st-about__caption small {
  display: block;
  font-family: Inter, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  color: rgba(255,255,255,0.85) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase;
}

/* --- TAGS ---------------------------------------------------- */
.st-tags { background: var(--st-paper); padding: clamp(56px, 7vw, 100px) 0; }
.st-tags .st-container { max-width: 1100px; padding: 0 clamp(24px, 5vw, 60px); text-align: center; }
.st-tags__head h2 {
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--st-text-strong) !important;
  margin-bottom: 28px !important;
}
.st-tags__list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  justify-content: center;
}
.st-tags__chip {
  background: transparent !important;
  color: var(--st-text) !important;
  border: 1px solid #e3dccf !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  box-shadow: none !important;
}
.st-tags__chip::before { display: none !important; }
.st-tags__chip:hover {
  border-color: var(--st-text-strong) !important;
  color: var(--st-text-strong) !important;
  background: transparent !important;
}

/* --- NEWS LINE ---------------------------------------------- */
.st-news { background: var(--st-cream-2); padding: clamp(72px, 9vw, 120px) 0; }
.st-news .st-container { max-width: 1320px; padding: 0 clamp(24px, 5vw, 60px); }
.st-news__wrap {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: clamp(40px, 5vw, 80px) !important;
}
@media (max-width: 768px) { .st-news__wrap { grid-template-columns: 1fr !important; } }
.st-news__col h2 {
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--st-text-strong) !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e3dccf !important;
}
.st-news__list { gap: 0 !important; }
.st-news__item a {
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e3dccf !important;
  text-decoration: none;
  align-items: center;
}
.st-news__item a:last-child { border-bottom: 1px solid #e3dccf !important; }
.st-news__date {
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: var(--st-text) !important;
}
.st-news__title {
  font-size: 13px !important;
  color: var(--st-text-strong) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.7 !important;
}
.st-news__ext {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--st-text);
  font-family: Inter, sans-serif;
  vertical-align: 1px;
}
.st-news__static {
  display: grid !important;
  grid-template-columns: 100px 1fr !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e3dccf !important;
  align-items: center;
  cursor: default;
}
.st-news__static .st-news__date {
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  color: var(--st-text) !important;
}
.st-news__static .st-news__title {
  font-size: 13px !important;
  color: var(--st-text-strong) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.7 !important;
}

/* --- CONTRIBUTION -------------------------------------------- */
.st-contrib {
  background: var(--st-text-strong) !important;
  color: #fff;
  padding: clamp(72px, 9vw, 120px) 0 !important;
  text-align: center;
}
.st-contrib .st-container { max-width: 720px; padding: 0 clamp(24px, 5vw, 60px); }
.st-contrib__inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.st-contrib__inner p, .st-contrib__inner > div {
  color: rgba(255,255,255,0.92) !important;
  font-size: 14px !important;
  line-height: 2.0 !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 24px !important;
}
.st-contrib__inner a {
  display: inline-block;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  border-radius: 0 !important;
  padding: 12px 28px !important;
  background: transparent !important;
  text-transform: uppercase;
  text-decoration: none;
}
.st-contrib__inner a:hover {
  background: var(--st-paper) !important;
  color: var(--st-text-strong) !important;
}

/* --- PICKS ---------------------------------------------------- */
.st-picks { background: var(--st-paper); padding: clamp(80px, 10vw, 140px) 0 !important; }
.st-picks .st-container { max-width: 1320px; padding: 0 clamp(24px, 5vw, 60px); }
.st-picks__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px) !important; }
.st-picks__head h2 {
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--st-text-strong) !important;
}
.st-picks__head h2::before, .st-picks__head h2::after { display: none !important; }
.st-picks__head p {
  font-size: 13px !important;
  line-height: 2.0 !important;
  color: var(--st-text) !important;
  letter-spacing: 0.06em !important;
  max-width: 640px;
  margin: 16px auto 0 !important;
}
.st-picks__grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: start;
}
@media (max-width: 768px) { .st-picks__grid { grid-template-columns: 1fr !important; } }
.st-picks__photo {
  background: var(--st-cream) !important;
  border: none !important;
  border-radius: 0 !important;
  aspect-ratio: 4/5 !important;
  overflow: hidden;
}
.st-picks__photo img { width: 100% !important; height: 100% !important; object-fit: cover; }
.st-picks__photo:not(:has(img))::before { display: none !important; }
.st-picks__photo-cap {
  display: none !important;
}
.st-picks__items {
  display: flex; flex-direction: column;
  gap: 16px !important;
}
.st-picks__item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e3dccf !important;
  border-radius: 0 !important;
  padding: 0 0 16px !important;
  display: grid !important;
  grid-template-columns: 80px 1fr !important;
  gap: 16px !important;
  align-items: center;
}
.st-picks__item-media {
  width: 80px !important; height: 100px !important;
  background: var(--st-cream) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}
.st-picks__item-media img { width: 100%; height: 100%; object-fit: cover; }
.st-picks__item-name {
  font-family: "Noto Serif JP", serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--st-text-strong) !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
}
.st-picks__item-body { min-width: 0; }
.st-picks__item-cap {
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--st-text-sub) !important;
  letter-spacing: 0.03em !important;
  margin: 0 0 6px !important;
}
.st-picks__item-price {
  font-size: 12px !important;
  color: var(--st-text) !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  /* 商品名は明朝14pxだと窮屈なので少し詰める */
  .st-picks__item { gap: 12px !important; }
  .st-picks__item-name { font-size: 13.5px !important; margin-bottom: 4px !important; }
}

/* --- CALENDAR -------------------------------------------------- */
.st-cal { background: var(--st-cream-2); padding: clamp(72px, 9vw, 120px) 0; }
.st-cal .st-container { max-width: 1100px; padding: 0 clamp(24px, 5vw, 60px); }
.st-cal__head { text-align: center; margin-bottom: clamp(28px, 3vw, 40px) !important; }
.st-cal__head h2 {
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--st-text-strong) !important;
}
.st-cal__head h2::before, .st-cal__head h2::after { display: none !important; }
.st-cal__legend {
  display: flex; gap: 20px; justify-content: center;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: var(--st-text) !important;
  margin-top: 12px !important;
}
.st-cal__month {
  background: var(--st-paper) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.st-cal__title {
  font-family: "Noto Serif JP", serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: center;
  letter-spacing: 0.08em !important;
  margin-bottom: 16px !important;
  color: var(--st-text-strong) !important;
}
.st-cal__day.is-off {
  background: var(--st-cream) !important;
  color: var(--st-text-strong) !important;
  border-radius: 0 !important;
}
.st-cal__day.is-soft {
  background: #faf0ed !important;
  color: var(--st-text-strong) !important;
  border-radius: 0 !important;
}

/* --- STORY VIDEO --------------------------------------------- */
.st-story { background: var(--st-paper); padding: clamp(80px, 10vw, 140px) 0 !important; }
.st-story::before { display: none !important; }
.st-story .st-container { max-width: 1180px; padding: 0 clamp(24px, 5vw, 60px); }
.st-story__head { text-align: center; margin-bottom: clamp(40px, 5vw, 56px) !important; }
.st-story__tag {
  background: transparent !important;
  color: var(--st-text) !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  text-transform: uppercase;
}
.st-story__h {
  font-family: "Noto Serif JP", serif !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.5 !important;
  color: var(--st-text-strong) !important;
}
.st-story__h::before, .st-story__h::after { display: none !important; }
.st-story__lead {
  font-size: 14px !important;
  line-height: 2.0 !important;
  color: var(--st-text) !important;
  letter-spacing: 0.06em !important;
  margin-top: 14px !important;
}
.st-story__grid {
  grid-template-columns: 1.2fr 1fr !important;
  gap: clamp(32px, 4vw, 64px) !important;
  align-items: center !important;
}
@media (max-width: 768px) { .st-story__grid { grid-template-columns: 1fr !important; } }
.st-story__player {
  background: var(--st-cream) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  aspect-ratio: 16/9 !important;
}
.st-story__player iframe {
  width: 100% !important; height: 100% !important;
  border: 0 !important; display: block !important;
}
.st-story__body p {
  font-size: 14px !important;
  line-height: 2.0 !important;
  color: var(--st-text) !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 16px !important;
}
.st-story__body strong { color: var(--st-text-strong) !important; font-weight: 600 !important; }
.st-story__cta {
  display: inline-block !important;
  background: transparent !important;
  color: var(--st-text-strong) !important;
  border: 1px solid var(--st-text-strong) !important;
  border-radius: 0 !important;
  padding: 12px 28px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  box-shadow: none !important;
  text-transform: uppercase;
  margin-top: 8px !important;
}
.st-story__cta:hover {
  background: var(--st-text-strong) !important;
  color: #fff !important;
}

/* --- ANNOUNCEMENT（送料無料を大きく・はっきり） ------------------ */
.st-announce {
  background: #469b31 !important; /* 整体茶グリーン（深） */
  color: #fff !important;
  padding: 14px 18px !important;
  text-align: center;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.5 !important;
}
.st-announce a { color: #fff !important; text-decoration: none; }

/* --- FOOTER 余白整理 ---------------------------------------- */
.st-foot { padding-top: clamp(64px, 8vw, 120px) !important; padding-bottom: 32px !important; }
.st-foot__brand { mix-blend-mode: normal !important; }

/* ============================================================
   PRODUCT MEDIA — Glossier-style (Figma 13:21258)
   ベージュ背景に商品パッケージを余白を持たせて中央配置。
   ホバーで第2画像にクロスフェード。トリミング歪み無し。
   ============================================================ */
.st-srail__media,
.st-pgrid__media {
  position: relative !important;
  aspect-ratio: 4 / 5 !important;
  background: var(--st-cream) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
.st-srail__media-img,
.st-pgrid__media-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: clamp(18px, 2.4vw, 36px) !important;
  display: block !important;
  transition: opacity 0.4s ease !important;
}
.st-srail__media-img.is-primary,
.st-pgrid__media-img.is-primary { opacity: 1; z-index: 1; }
.st-srail__media-img.is-hover,
.st-pgrid__media-img.is-hover { opacity: 0; z-index: 2; }
.st-srail__card:hover .st-srail__media-img.is-primary,
.st-pgrid__card:hover .st-pgrid__media-img.is-primary { opacity: 0; }
.st-srail__card:hover .st-srail__media-img.is-hover,
.st-pgrid__card:hover .st-pgrid__media-img.is-hover { opacity: 1; }

/* fallback: src 直書き旧マークアップ向け */
.st-srail__media > img:not([class]),
.st-pgrid__media > img:not([class]) {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(18px, 2.4vw, 36px);
  display: block;
}

/* バッジは中央上の小さなピル */
.st-srail__badge {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--st-paper) !important;
  color: var(--st-text-strong) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  padding: 5px 14px !important;
  border-radius: 0 !important;
  z-index: 3 !important;
  text-transform: uppercase !important;
}
.st-pgrid__sold {
  position: absolute !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(255,255,255,0.95) !important;
  color: var(--st-text-strong) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  padding: 5px 14px !important;
  border-radius: 0 !important;
  z-index: 3 !important;
}

/* テキストブロック整え */
.st-srail__name,
.st-pgrid__name {
  font-family: "Noto Serif JP", serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--st-text-strong) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.5 !important;
  margin: 0 0 6px !important;
  text-align: left !important;
}
.st-srail__price,
.st-pgrid__price {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--st-text) !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  text-align: left !important;
}
.st-srail__swatches {
  display: flex !important;
  gap: 5px !important;
  margin: 8px 0 !important;
}
.st-srail__swatches span {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}

/* hover時opacityを上書き（外側aがopacity:0.72にならないよう） */
.st-srail__card:hover,
.st-pgrid__card:hover { opacity: 1 !important; }

/* ============================================================
   LP — /pages/commitment （Meta広告ランディング）
   editorial・mincho・asymmetric・no-AI-generic
   ============================================================ */
:root {
  --st-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --st-mono: "JetBrains Mono", "SF Mono", "Inter", monospace;
}

/* ---------- HERO ----------
   2026-07-28 デザイン一新。明朝と黒オーバーレイの雑誌調をやめ、
   商品一覧と同じ丸ゴ・角丸・palette連動の言い回しに。
   文字は写真に直乗せせず白カードに載せて可読性を確保する。 */
.st-lp-hero {
  position: relative;
  min-height: clamp(480px, 66vh, 660px);
  overflow: hidden;
  font-family: var(--st-font-jp);
}
.st-lp-hero__media { position: absolute; inset: 0; }
.st-lp-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.st-lp-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,252,246,0) 30%, rgba(255,252,246,.55) 100%);
}
/* 下端を白い弧で抜いて次のセクションへつなぐ */
.st-lp-hero::after {
  content: "";
  position: absolute; left: -6%; right: -6%; bottom: -1px; height: clamp(36px, 5vw, 64px);
  background: var(--st-paper, #faf7f0);
  border-radius: 100% 100% 0 0;
}
.st-lp-hero__inner {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 56px) clamp(72px, 9vw, 110px);
  display: flex; align-items: flex-end; min-height: clamp(480px, 66vh, 660px);
}
.st-lp-hero__copy {
  max-width: 600px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(214,190,159,.6);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px);
  backdrop-filter: blur(4px);
  box-shadow: 0 14px 40px rgba(92,76,44,.12);
}
.st-lp-hero__eye {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.3em; font-weight: 700;
  color: var(--lp-pink, var(--st-red));
  background: var(--lp-pink-bg, var(--st-red-soft));
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
  border-bottom: none;
  font-family: Inter, sans-serif;
}
.st-lp-hero__h {
  font-family: var(--st-font-jp);
  font-size: clamp(26px, 4.6vw, 44px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: pre-line;
  color: var(--lp-text, #4a3620);
  margin: 0 0 16px;
  text-shadow: none;
}
.st-lp-hero__sub {
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--lp-text-sub, #8a7048);
  white-space: pre-line;
  margin: 0 0 26px;
  max-width: 540px;
}
.st-lp-hero__cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 32px;
  background: var(--lp-pink, var(--st-red));
  color: #fff;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(92,76,44,.2);
  transition: transform .25s ease, filter .25s ease;
}
.st-lp-hero__cta span { transition: transform .25s ease; }
.st-lp-hero__cta:hover { background: var(--lp-pink, var(--st-red)); color: #fff; filter: brightness(1.07); transform: translateY(-2px); }
.st-lp-hero__cta:hover span { transform: translateX(5px); }
.st-lp-hero__meta {
  margin: 18px 0 0;
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--lp-text-sub, #8a7048);
  font-family: var(--st-font-jp);
}
@media (max-width: 640px) {
  .st-lp-hero { min-height: 480px; }
  .st-lp-hero__inner { padding: 88px 16px 64px; align-items: flex-end; }
  .st-lp-hero__copy { padding: 20px 18px 22px; border-radius: 16px; }
  .st-lp-hero__sub { margin-bottom: 20px; }
}

/* ---------- PAIN / EMPATHY ---------- */
.st-lp-pain {
  background: var(--st-paper);
  padding: clamp(64px, 9vw, 120px) 0;
  font-family: var(--st-font-jp);
}
.st-lp-pain__inner { max-width: 760px; }
.st-lp-pain__head { margin-bottom: 40px; text-align: center; }
.st-lp-pain__eye {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 11px; letter-spacing: 0.32em; font-weight: 700;
  color: var(--lp-pink, var(--st-red));
  margin-bottom: 16px;
}
.st-lp-pain__h {
  font-family: var(--st-font-jp);
  font-size: clamp(21px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.7;
  white-space: pre-line;
  color: var(--lp-text, #4a3620);
  margin: 0;
  text-wrap: balance;
}
.st-lp-pain__list {
  list-style: none; padding: 0; margin: 0 0 36px;
  border-top: none;
  display: flex; flex-direction: column; gap: 10px;
}
.st-lp-pain__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 15px 18px;
  align-items: start;
  background: #fff;
  border: 1px solid #d6be9f;
  border-radius: 12px;
}
.st-lp-pain__bullet {
  font-size: 0; line-height: 1;
  width: 17px; height: 17px; margin-top: 5px;
  background: var(--lp-pink, var(--st-red)); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M24.5 3.5S9.5 2 5 10.5c-3.4 6.4 1 13 1 13s7.6.6 12.4-4.4C23.7 13.6 24.5 3.5 24.5 3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M24.5 3.5S9.5 2 5 10.5c-3.4 6.4 1 13 1 13s7.6.6 12.4-4.4C23.7 13.6 24.5 3.5 24.5 3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.st-lp-pain__text {
  font-family: var(--st-font-jp);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--lp-text, #4a3620);
  word-break: auto-phrase;
}
.st-lp-pain__bridge {
  font-family: var(--st-font-jp);
  font-size: clamp(14.5px, 1.5vw, 17px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--lp-text, #4a3620);
  white-space: pre-line;
  text-align: center;
  margin: 0;
  padding: 4px 0 0;
  text-wrap: balance;
}

/* ---------- PILLARS ---------- */
.st-lp-pillars {
  background: var(--st-cream);
  background-image: radial-gradient(rgba(146,120,80,.08) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  padding: clamp(64px, 9vw, 120px) 0;
  font-family: var(--st-font-jp);
}
.st-lp-pillars__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 72px);
}
.st-lp-pillars__eye {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 11px; letter-spacing: 0.34em; font-weight: 700;
  color: var(--lp-pink, var(--st-red));
  margin-bottom: 16px;
}
.st-lp-pillars__h {
  font-family: var(--st-font-jp);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--lp-text, #4a3620);
  margin: 0 0 16px;
}
.st-lp-pillars__lead {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--lp-text-sub, #8a7048);
  margin: 0;
}
.st-lp-pillars__list {
  list-style: none;
  counter-reset: pillar;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}
/* 番号の透かしで流す構成をやめて、1つずつ白カードにする */
.st-lp-pillars__item {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  position: relative;
  background: #fff;
  border: 1px solid #d6be9f;
  border-radius: 18px;
  padding: clamp(20px, 3.5vw, 36px);
}
.st-lp-pillars__item:nth-child(even) { direction: rtl; }
.st-lp-pillars__item:nth-child(even) > * { direction: ltr; }
.st-lp-pillars__num {
  position: absolute;
  top: -14px;
  left: 18px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--st-font-jp);
  font-size: 21px; font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--lp-pink, var(--st-red));
  border-radius: 50%;
  clip-path: polygon(50% 0,63% 8%,79% 4%,86% 19%,98% 28%,93% 44%,100% 58%,88% 68%,87% 85%,71% 88%,58% 98%,44% 89%,28% 93%,20% 78%,5% 70%,9% 54%,2% 40%,14% 30%,13% 13%,29% 11%,38% 2%);
  z-index: 2;
  pointer-events: none;
}
.st-lp-pillars__item:nth-child(even) .st-lp-pillars__num { left: auto; right: 18px; }
.st-lp-pillars__media {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lp-pink-bg, var(--st-cream));
  border-radius: 12px;
}
.st-lp-pillars__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s ease;
}
.st-lp-pillars__item:hover .st-lp-pillars__media img { transform: scale(1.04); }
.st-lp-pillars__copy { position: relative; z-index: 1; }
.st-lp-pillars__label {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 10px; letter-spacing: 0.3em; font-weight: 700;
  color: var(--lp-pink, var(--st-red));
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none;
}
.st-lp-pillars__h3 {
  font-family: var(--st-font-jp);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--lp-text, #4a3620);
  margin: 0 0 12px;
  text-wrap: balance;
}
.st-lp-pillars__body {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--st-text);
  margin: 0;
}
.st-lp-pillars__note {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #d6be9f;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--lp-text-sub, #8a7048);
}
@media (max-width: 768px) {
  .st-lp-pillars__item,
  .st-lp-pillars__item:nth-child(even) { grid-template-columns: 1fr; direction: ltr; gap: 16px; padding: 22px 16px 20px; }
  .st-lp-pillars__num { font-size: 18px; width: 46px; height: 46px; top: -12px; left: 12px; right: auto; bottom: auto; }
  .st-lp-pillars__item:nth-child(even) .st-lp-pillars__num { left: 12px; right: auto; }
  .st-lp-pillars__media { aspect-ratio: 16 / 10; }
  .st-lp-pillars__list { gap: 26px; }
}

/* ---------- SHU STORY ---------- */
.st-lp-shu {
  background: var(--st-paper);
  padding: clamp(64px, 9vw, 120px) 0;
  font-family: var(--st-font-jp);
}
.st-lp-shu__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: 1180px;
}
/* 写真は誕生秘話と同じポラロイド調にして統一感を出す */
.st-lp-shu__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  padding: 10px 10px 34px;
  box-shadow: 0 10px 28px rgba(92,76,44,.16);
  transform: rotate(-1.6deg);
}
.st-lp-shu__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 3px;
}
.st-lp-shu__caption {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  background: none;
  font-family: var(--st-font-jp);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--lp-text-sub, #8a7048);
  padding: 0;
  white-space: nowrap;
}
.st-lp-shu__copy { padding-top: clamp(8px, 3vw, 40px); }
.st-lp-shu__eye {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 11px; letter-spacing: 0.34em; font-weight: 700;
  color: var(--lp-pink, var(--st-red));
  margin-bottom: 16px;
}
.st-lp-shu__h {
  font-family: var(--st-font-jp);
  font-size: clamp(21px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--lp-text, #4a3620);
  margin: 0 0 24px;
}
.st-lp-shu__quote {
  font-family: var(--st-font-jp);
  font-size: clamp(15.5px, 1.7vw, 19px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--lp-pink, var(--st-red));
  margin: 0 0 24px;
  padding: 16px 20px;
  border-left: none;
  background: var(--lp-pink-bg, var(--st-red-soft));
  border-radius: 14px;
}
.st-lp-shu__body p {
  font-size: 14.5px;
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: var(--st-text);
  margin: 0 0 14px;
}
.st-lp-shu__body p:last-child { margin-bottom: 0; }
.st-lp-shu__sign {
  margin: 26px 0 0;
  font-family: var(--st-font-jp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--lp-text, #4a3620);
}
@media (max-width: 768px) {
  .st-lp-shu__grid { grid-template-columns: 1fr; }
  .st-lp-shu__media { aspect-ratio: 4 / 3; max-width: 340px; margin: 0 auto; }
}

/* ---------- FINAL CTA ----------
   黒つぶしの写真バンドをやめ、palette連動の明るい締めに */
.st-lp-cta {
  position: relative;
  padding: 0;
  overflow: hidden;
  color: var(--lp-text, #4a3620);
  font-family: var(--st-font-jp);
}
.st-lp-cta__bg { position: absolute; inset: 0; }
.st-lp-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.st-lp-cta__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,251,244,.86) 0%, rgba(255,248,238,.94) 100%);
}
.st-lp-cta__inner {
  position: relative; z-index: 2;
  padding: clamp(72px, 10vw, 130px) 16px;
  display: flex; justify-content: center;
}
.st-lp-cta__card { text-align: center; max-width: 620px; }
.st-lp-cta__eye {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 11px; letter-spacing: 0.34em; font-weight: 700;
  color: var(--lp-pink, var(--st-red));
  margin-bottom: 18px;
}
.st-lp-cta__h {
  font-family: var(--st-font-jp);
  font-size: clamp(23px, 3.6vw, 38px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.6;
  white-space: pre-line;
  margin: 0 0 18px;
  text-shadow: none;
  color: var(--lp-text, #4a3620);
}
.st-lp-cta__sub {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--lp-text-sub, #6b5a3e);
  white-space: pre-line;
  margin: 0 0 24px;
}
.st-lp-cta__offer {
  display: inline-block;
  background: #fff;
  border: 1px solid #d6be9f;
  border-radius: 14px;
  padding: 14px 26px;
  margin-bottom: 28px;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: var(--lp-text, #4a3620);
  backdrop-filter: none;
}
.st-lp-cta__offer strong { color: var(--lp-pink, var(--st-red)); font-weight: 800; letter-spacing: 0.06em; margin-right: 6px; }
.st-lp-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.st-lp-cta__primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 40px;
  background: var(--lp-pink, var(--st-red));
  color: #fff;
  font-size: 14.5px; font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(92,76,44,.2);
  transition: transform .25s ease, filter .25s ease;
}
.st-lp-cta__primary:hover { background: var(--lp-pink, var(--st-red)); color: #fff; filter: brightness(1.07); transform: translateY(-2px); }
.st-lp-cta__primary span { transition: transform .25s ease; }
.st-lp-cta__primary:hover span { transform: translateX(5px); }
.st-lp-cta__secondary {
  display: inline-flex; align-items: center;
  padding: 17px 22px;
  color: var(--lp-pink, var(--st-red));
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--lp-pink, var(--st-red));
  background: #fff;
  transition: background .2s ease, color .2s ease;
}
.st-lp-cta__secondary:hover { background: var(--lp-pink-bg, var(--st-red-soft)); }
@media (max-width: 640px) {
  .st-lp-cta__btns { flex-direction: column; align-items: stretch; }
  .st-lp-cta__primary { justify-content: center; }
  .st-lp-cta__secondary { justify-content: center; }
}

/* ---------- LP REVIEWS（お客様の声） ---------- */
.st-lp-reviews {
  background: var(--st-paper);
  padding: clamp(80px, 10vw, 140px) 0;
}
.st-lp-reviews__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 80px);
}
.st-lp-reviews__eye {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  font-weight: 500;
  color: var(--st-red);
  margin-bottom: 22px;
}
.st-lp-reviews__h {
  font-family: var(--st-mincho);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--st-text-strong);
  margin: 0 0 22px;
}
.st-lp-reviews__lead {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #6b6b6b;
  margin: 0 0 36px;
  white-space: pre-line;
}
.st-lp-reviews__summary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 40px;
  border-top: 1px solid #e6e1d8;
  border-bottom: 1px solid #e6e1d8;
}
.st-lp-reviews__avg {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--st-mincho);
  color: var(--st-text-strong);
}
.st-lp-reviews__avg-num {
  font-size: clamp(36px, 4.5vw, 52px);
  letter-spacing: 0.04em;
  line-height: 1;
}
.st-lp-reviews__avg-of {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #888;
}
.st-lp-reviews__stars {
  list-style: none;
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #d8d2c4;
}
.st-lp-reviews__stars li.is-on {
  color: #c9a14a;
}
.st-lp-reviews__count {
  font-family: Inter, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #888;
}
.st-lp-reviews__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 32px);
}
@media (max-width: 960px) {
  .st-lp-reviews__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .st-lp-reviews__list { grid-template-columns: 1fr; }
}
.st-lp-reviews__card {
  position: relative;
  background: #fff;
  border: 1px solid #ece7dc;
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.st-lp-reviews__card::before {
  content: "“";
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: var(--st-mincho);
  font-size: 64px;
  line-height: 1;
  color: #e6dfcf;
  pointer-events: none;
}
.st-lp-reviews__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: Inter, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--st-red);
  padding: 5px 10px;
  border: 1px solid var(--st-red);
  border-radius: 999px;
  text-transform: uppercase;
}
.st-lp-reviews__rate {
  list-style: none;
  display: flex;
  gap: 3px;
  padding: 0;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #d8d2c4;
}
.st-lp-reviews__rate li.is-on {
  color: #c9a14a;
}
.st-lp-reviews__title {
  font-family: var(--st-mincho);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--st-text-strong);
  margin: 0;
}
.st-lp-reviews__body {
  font-family: var(--st-mincho);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--st-text);
  margin: 0;
  flex: 1;
}
.st-lp-reviews__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #ece7dc;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #888;
}
.st-lp-reviews__name {
  font-weight: 500;
  color: var(--st-text);
}
.st-lp-reviews__sep {
  color: #ccc;
}
.st-lp-reviews__date {
  font-family: Inter, sans-serif;
  letter-spacing: 0.08em;
}
.st-lp-reviews__note {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 720px;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: #999;
  text-align: center;
}

/* ============================================
   花型矢印ボタン（スカラップ）— カルーセル共通
   Figma Component 10/11 準拠：白地+金枠+右下影+中央チェブロン
   ============================================ */
.st-fla {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.st-fla__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(2px 4px 5px rgba(92, 76, 44, 0.22));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}
.st-fla__shape path {
  fill: #fff;
  stroke: #bfa977;
  stroke-width: 1.6;
  transition: stroke 0.3s ease;
}
.st-fla__chev {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32%;
  height: 32%;
  transform: translate(-50%, -50%);
  color: #5c4c2c;
  transition: transform 0.35s ease, color 0.3s ease;
}
/* hover : 花がくるっと回り、影が深く、チェブロンがツンと寄る */
button:hover .st-fla__shape,
.st-fla-host:hover .st-fla__shape {
  transform: rotate(90deg) scale(1.07);
  filter: drop-shadow(3px 6px 9px rgba(92, 76, 44, 0.30));
}
button:hover .st-fla__shape path,
.st-fla-host:hover .st-fla__shape path { stroke: #e8c98e; }
button:hover .st-fla__chev,
.st-fla-host:hover .st-fla__chev { color: #ff909d; }
.st-fla[data-dir="next"] .st-fla__chev { transform: translate(-46%, -50%); }
.st-fla[data-dir="prev"] .st-fla__chev { transform: translate(-54%, -50%); }
button:hover .st-fla[data-dir="next"] .st-fla__chev,
.st-fla-host:hover .st-fla[data-dir="next"] .st-fla__chev { transform: translate(-32%, -50%); }
button:hover .st-fla[data-dir="prev"] .st-fla__chev,
.st-fla-host:hover .st-fla[data-dir="prev"] .st-fla__chev { transform: translate(-68%, -50%); }
button:active .st-fla__shape,
.st-fla-host:active .st-fla__shape { transform: rotate(90deg) scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .st-fla__shape, .st-fla__chev { transition: none; }
  button:hover .st-fla__shape, .st-fla-host:hover .st-fla__shape { transform: none; }
}

/* ============================================
   PDP v2 — 2026-07-17 デザイン仕上げ
   ============================================ */

/* USPチップ（旧・固定レビュー表示の置き換え） */
.st-pdp__chips {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.st-pdp__chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--st-red);
  background: var(--st-red-soft);
  border: 1px solid rgba(74, 107, 79, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
}

/* 特設ページ誘導バナー */
.st-pdp__lp-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--st-red-soft) 0%, var(--st-cream) 100%);
  border: 1.5px solid var(--st-red);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.st-pdp__lp-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 0 var(--st-red);
}
.st-pdp__lp-banner-tag {
  flex-shrink: 0;
  background: var(--st-red); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  padding: 5px 11px; border-radius: 999px;
}
.st-pdp__lp-banner-text {
  font-size: 15px; font-weight: 700; color: var(--st-text-strong);
  letter-spacing: 0.02em; line-height: 1.5;
}
.st-pdp__lp-banner-arrow {
  margin-left: auto; flex-shrink: 0;
  color: var(--st-red); font-weight: 800; font-size: 16px;
}

/* タブバー: SPは横スクロール（折返しの見切れ防止） */
@media (max-width: 600px) {
  .st-pdp-tabs__bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .st-pdp-tabs__bar::-webkit-scrollbar { display: none; }
  .st-pdp-tabs__tab { flex-shrink: 0; white-space: nowrap; }
}

/* タブ内リスト・商品説明（rte） */
.st-pdp-tabs__panel ul {
  margin: 0 0 14px; padding: 0;
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.st-pdp-tabs__panel ul li {
  font-size: 13px; font-weight: 700; color: var(--st-text-strong);
  background: var(--st-cream);
  border: 1px solid var(--st-line);
  border-radius: 999px;
  padding: 6px 14px;
  line-height: 1.5;
}
.st-pdp-tabs__desc p { margin: 0 0 12px; line-height: 1.9; font-size: 14px; }
.st-pdp-tabs__desc h3, .st-pdp-tabs__desc h2 {
  font-size: 15px; font-weight: 800; color: var(--st-red);
  margin: 20px 0 10px; letter-spacing: 0.06em;
}
.st-pdp-tabs__desc li {
  font-size: 14px; line-height: 1.9; color: var(--st-text);
  list-style: none; position: relative; padding-left: 20px; margin-bottom: 4px;
}
.st-pdp-tabs__desc li::before {
  content: "〇"; position: absolute; left: 0; top: 0;
  color: var(--st-red); font-size: 11px; line-height: 2.4; font-weight: 800;
}
.st-pdp-tabs__desc ul { display: block; margin: 0 0 14px; padding: 0; }
.st-pdp-tabs__desc strong { color: var(--st-text-strong); }

/* おすすめ商品カード */
.st-pdp-rec__media { background: #fff; }
.st-pdp-rec__media img { object-fit: contain; padding: 10px; box-sizing: border-box; }
.st-pdp-rec__price small { font-size: 10px; font-weight: 400; color: var(--st-text); }
.st-pdp-rec__more {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 800; color: var(--st-red);
  letter-spacing: 0.06em;
}
@media (max-width: 480px) {
  .st-pdp-rec__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* 読み物カード: ラベル */
.st-pdp-art__label {
  display: inline-block;
  margin: 12px 16px 0;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--st-red);
  background: var(--st-red-soft);
  border-radius: 999px;
  padding: 4px 11px;
}
.st-pdp-art__label + .st-pdp-art__title { margin-top: 8px; }
@media (max-width: 768px) {
  .st-pdp-art__media { aspect-ratio: 16/9; }
}

/* ============================================
   フォント統一 — 2026-07-17 Zen Maru Gothic
   カスタムセクション内の Inter / Noto Serif JP 混在を一本化
   ============================================ */
.st-section, .st-section *{
  font-family: var(--st-font-jp) !important;
}

/* ============================================
   ヒーローカルーセル: バナー下切れ対策（blur背景+contain）
   ============================================ */
.st-hcr__card{position:relative;overflow:hidden;}
/* ヒーローは横長ビジュアルに統一したため cover 表示。
   blur下地は縦横比が合わない画像を入れた場合の保険として残す。 */
.st-hcr__imgbg{
  position:absolute !important; inset:0;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  filter:blur(20px) brightness(.92) saturate(1.05);
  transform:scale(1.2);
}
.st-hcr__card .st-hcr__img{
  position:relative; z-index:1;
  object-fit:cover !important;
  object-position:center center;
}
/* SPは横幅が狭く被写体（右寄り）が切れるため、右寄りにフォーカス */
@media (max-width:760px){
  .st-hcr__card .st-hcr__img{ object-position:72% center; }
}

/* ============================================
   LINE UP: 5商品を flex 中央寄せ（3+2 も左右対称に）
   ============================================ */
@media (min-width: 720px) {
  .st-lineup__grid{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    gap:clamp(28px,5vw,44px) 40px;
  }
  .st-lineup__item{width:210px;}
  .st-lineup__item:last-child:nth-child(odd){grid-column:auto;}
}

/* ==========================================================================
   st-doc — 汎用ドキュメントページ（お買い物ガイド／ブランドストーリー等）
   ========================================================================== */
.st-doc {
  padding: clamp(48px, 8vw, 84px) 0 clamp(64px, 10vw, 110px);
  background: var(--st-paper);
}
.st-doc--cream { background: var(--st-cream); }
.st-doc__wrap { max-width: 860px; }

/* --- head --- */
.st-doc__head {
  text-align: center;
  padding-bottom: clamp(28px, 5vw, 44px);
  margin-bottom: clamp(28px, 5vw, 44px);
  border-bottom: 1px solid var(--st-line);
}
.st-doc__eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--st-green);
  margin: 0 0 12px;
  font-weight: 700;
}
.st-doc__title {
  font-size: clamp(26px, 5.2vw, 38px);
  line-height: 1.4;
  color: var(--st-text-strong);
  margin: 0;
  font-weight: 900;
  text-wrap: balance;
}
.st-doc__lead {
  margin: 18px auto 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 2;
  color: var(--st-text);
}
.st-doc__lead p { margin: 0 0 0.6em; }
.st-doc__lead p:last-child { margin-bottom: 0; }

/* --- 目次 --- */
.st-doc__toc {
  background: #fff;
  border: 1px solid var(--st-line);
  padding: clamp(20px, 3.5vw, 28px) clamp(20px, 4vw, 32px);
  margin-bottom: clamp(36px, 6vw, 56px);
}
.st-doc__toc-label {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--st-text-strong);
}
.st-doc__toc-list {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .st-doc__toc-list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.st-doc__toc-list li { font-size: 14.5px; line-height: 1.6; }
.st-doc__toc-list a {
  color: var(--st-text-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.st-doc__toc-list a:hover {
  color: var(--st-red);
  border-bottom-color: var(--st-red);
}

/* --- 章見出し --- */
.st-doc__h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(19px, 3.4vw, 23px);
  font-weight: 900;
  color: var(--st-text-strong);
  margin: clamp(44px, 7vw, 64px) 0 18px;
  line-height: 1.5;
  scroll-margin-top: 140px;
  text-wrap: balance;
}
.st-doc__body > .st-doc__h2:first-child { margin-top: 0; }
.st-doc__h2-mark {
  flex: 0 0 auto;
  width: 6px;
  height: 1.1em;
  background: var(--st-red);
  border-radius: 3px;
}
.st-doc__chapter-lead {
  margin: -6px 0 20px;
  padding-left: 18px;
  font-size: 14px;
  color: var(--st-green);
  line-height: 1.9;
}

/* --- 本文 --- */
.st-doc__rte {
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--st-text);
}
.st-doc__rte p { margin: 0 0 1.2em; }
.st-doc__rte p:last-child { margin-bottom: 0; }
.st-doc__rte strong { color: var(--st-text-strong); font-weight: 700; }
.st-doc__rte a { color: var(--st-red); text-decoration: underline; text-underline-offset: 3px; }
.st-doc__rte ul,
.st-doc__rte ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.st-doc__rte li { margin-bottom: 0.5em; }

/* --- 定義リスト --- */
.st-doc__table {
  margin: 0 0 clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--st-line);
}
.st-doc__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--st-line);
}
@media (min-width: 600px) {
  .st-doc__row { grid-template-columns: 190px 1fr; gap: 20px; align-items: baseline; }
}
.st-doc__row dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--st-text-strong);
  margin: 0;
}
.st-doc__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--st-text);
}

/* --- ステップ --- */
.st-doc__steps {
  counter-reset: stepnum;
  list-style: none;
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: 0;
  display: grid;
  gap: 14px;
}
.st-doc__steps li {
  counter-increment: stepnum;
  position: relative;
  padding: 16px 18px 16px 58px;
  background: #fff;
  border: 1px solid var(--st-line);
}
.st-doc__steps li::before {
  content: counter(stepnum);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--st-red);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.st-doc__step-title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--st-text-strong);
  line-height: 1.6;
}
.st-doc__step-desc {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--st-text);
}

/* --- 注意書き --- */
.st-doc__notice {
  background: var(--st-red-soft);
  border-left: 4px solid var(--st-red);
  padding: clamp(18px, 3vw, 24px) clamp(18px, 3.5vw, 26px);
  margin: 0 0 clamp(20px, 3vw, 28px);
}
.st-doc__notice-label {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--st-red-deep);
  letter-spacing: 0.04em;
}
.st-doc__notice-body {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--st-text-strong);
}
.st-doc__notice-body p { margin: 0 0 0.8em; }
.st-doc__notice-body p:last-child { margin-bottom: 0; }
.st-doc__notice-body a { color: var(--st-red-deep); }

/* --- 画像・引用 --- */
.st-doc__figure {
  margin: 0 0 clamp(24px, 4vw, 34px);
}
.st-doc__figure img {
  width: 100%;
  height: auto;
  display: block;
}
.st-doc__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--st-green);
  text-align: center;
  line-height: 1.8;
}
.st-doc__quote {
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: clamp(20px, 3.5vw, 28px);
  background: #fff;
  border: 1px solid var(--st-line);
}
.st-doc__quote-body {
  font-size: 15px;
  line-height: 2;
  color: var(--st-text);
}
.st-doc__quote-body p { margin: 0 0 0.8em; }
.st-doc__quote-body p:last-child { margin-bottom: 0; }
.st-doc__quote-name {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-style: normal;
  color: var(--st-green);
  text-align: right;
}

/* --- CTA --- */
.st-doc__cta-wrap {
  margin: clamp(28px, 5vw, 40px) 0;
  text-align: center;
}
.st-doc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 280px;
  max-width: 100%;
  padding: 17px 32px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.25s ease;
}
.st-doc__cta--solid {
  background: var(--st-red);
  color: #fff;
  border: 1px solid var(--st-red);
}
.st-doc__cta--ghost {
  background: #fff;
  color: var(--st-red-deep);
  border: 1px solid var(--st-red);
}
.st-doc__cta:hover { opacity: 0.85; }
.st-doc__cta-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--st-green);
  line-height: 1.8;
}

/* --- 末尾注記 --- */
.st-doc__foot {
  margin: clamp(40px, 7vw, 64px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--st-line);
  font-size: 13px;
  line-height: 1.9;
  color: var(--st-green);
  text-align: center;
}

/* ---- PDP 売り切れ時の案内（在庫が入れば自動でカートUIに戻る） ---- */
.st-pdp__soldout {
  background: var(--st-cream);
  border: 1px solid var(--st-line);
  padding: 22px 22px 24px;
  margin-bottom: 18px;
  text-align: center;
}
.st-pdp__soldout-label {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--st-text-strong);
  letter-spacing: 0.04em;
}
.st-pdp__soldout-text {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--st-text);
  text-align: left;
}
.st-pdp__soldout-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--st-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.st-pdp__soldout-cta:hover { opacity: 0.85; }

/* SPはヒーローが画面を占有しすぎるため高さを抑える */
@media (max-width: 760px) {
  .st-hcr { --hcr-h: 380px !important; }
}

/* ==========================================================================
   SP: タップ領域（44px）と文字サイズの底上げ
   ========================================================================== */
@media (max-width: 760px) {
  /* --- ヘッダー --- */
  .st-ghd__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .st-ghd__act {
    min-width: 44px;
    justify-content: center;
  }
  .st-ghd__act-lb { font-size: 11px !important; }
  .st-ghd__menu-lb { font-size: 12px !important; }

  /* --- ヒーローのドット：見た目は保ったまま当たり判定だけ広げる --- */
  .st-hcr__dots { gap: 0 !important; }
  .st-hcr__dot {
    box-sizing: content-box !important;
    padding: 17px 9px !important;
    background-clip: content-box !important;
  }
  .st-hcr__arrow { width: 46px !important; height: 46px !important; }

  /* --- テキストリンク：高さ21px → 44px --- */
  .st-omoicol__cta,
  .st-omoi__cta,
  .st-nfq__more,
  .st-acr__more,
  .st-nf__more,
  .st-picks__more,
  .st-doc__toc-list a,
  .st-ft__col a,
  .st-ft__mini a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* フッターのリンク列は行間も確保 */
  .st-ft__col li + li { margin-top: 2px; }

  /* --- 小さすぎる文字 --- */
  .st-nf__cat,
  .st-nf__cflag,
  .st-nfq__news-cat,
  .st-ft__logo-tag,
  .st-ft__copy { font-size: 12px !important; }
}

/* SP: 残っていた小さい文字とタップ領域の仕上げ */
@media (max-width: 760px) {
  .st-ghd__act-lb { font-size: 12px !important; }
  .st-lineup__tag { font-size: 12px !important; }
  .st-ft__pagetop-btn span { font-size: 12px !important; }
  .st-ft__pagetop-btn { min-height: 44px; }
  /* アナウンスバーは帯自体をタップ領域に */
  .st-announce a { display: block; padding: 12px 0; }
  .st-ft__line { min-height: 44px; }
}

/* ==========================================================================
   Shopify標準セクションのブランド調整
   （お問い合わせフォーム・カート・ブログはHorizon既定のままで浮いていた）
   ========================================================================== */
/* --- お問い合わせフォーム --- */
.shopify-section .contact-form input[type="text"],
.shopify-section .contact-form input[type="email"],
.shopify-section .contact-form input[type="tel"],
.shopify-section .contact-form textarea,
.contact-form .field input,
.contact-form .field textarea {
  border: 1px solid var(--st-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: var(--st-font-jp) !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
}
.contact-form .field input:focus,
.contact-form .field textarea:focus {
  border-color: var(--st-red) !important;
  outline: 2px solid rgba(74, 107, 79, 0.15) !important;
  outline-offset: 1px;
}
.contact-form button[type="submit"],
.contact-form .button {
  background: var(--st-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 50px !important;
  padding: 0 40px !important;
  font-family: var(--st-font-jp) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}
.contact-form button[type="submit"]:hover { opacity: 0.86 !important; }

/* --- カート：Horizon既定の黒ボタンをブランドカラーへ --- */
.cart__empty-text + a,
.cart-drawer a.button,
main .cart a.button,
main .cart button.button {
  background: var(--st-red) !important;
  color: #fff !important;
  border-color: var(--st-red) !important;
  border-radius: 999px !important;
  font-family: var(--st-font-jp) !important;
  font-weight: 700 !important;
}

/* --- ブログ一覧：カードをブランドの見た目に --- */
.blog__post-card,
.blog-post-card,
article.blog__post-card {
  background: #fff !important;
  border: 1px solid var(--st-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
.blog__post-card:hover { border-color: var(--st-red) !important; }
.blog__title,
.blog__post-card h2,
.blog__post-card h3 {
  font-family: var(--st-font-jp) !important;
  color: var(--st-text-strong) !important;
  letter-spacing: 0.03em;
}

/* Horizonのフォームは .contact-form__input なのでクラスを明示して当てる */
.contact-form__input {
  border: 1px solid var(--st-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: var(--st-font-jp) !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  color: var(--st-text-strong) !important;
}
.contact-form__input:focus {
  border-color: var(--st-red) !important;
  outline: 2px solid rgba(74, 107, 79, 0.15) !important;
}
.contact-form__input::placeholder { color: #a99f92 !important; }
.contact-form__form { gap: 12px; }

/* 見出しの改行制御：スマホでだけ改行する（PCでは1行のまま） */
.br-sp { display: none; }
@media (max-width: 760px) { .br-sp { display: inline; } }
/* 逆にPCでだけ改行したい場合 */
.br-pc { display: inline; }
@media (max-width: 760px) { .br-pc { display: none; } }

/* =========================================================
/* =========================================================
   === PDP リファイン（2026-07）— 2026-08-10 重複統合版
   もともと同名ブロックが5回積み重なっていた（履歴スナップショット）。
   カスケード等価（同一セレクタはプロパティ後勝ち）で1ブロックに統合。
   表示は変えていない。直すときは replace_all 不要、ここ1箇所だけ。
   ========================================================= */
=== PDP リファイン（2026-07） 枠線と段差影で押し出す作りをやめ、余白・階調・タイポで質感を出す。 健康食品は「信頼できそうに見えるか」が購入率に直結するため、 装飾を減らして情報の並び（何が・いくらで・いつ届く）を優先した。 既存定義より後に置いて上書きしている。 ========================================================= */ .st-pdp {
  background: #fff;
  padding: 18px 0 46px;
}
/* =========================================================
   === PDP リファイン（2026-07）
   枠線と段差影で押し出す作りをやめ、余白・階調・タイポで質感を出す。
   健康食品は「信頼できそうに見えるか」が購入率に直結するため、
   装飾を減らして情報の並び（何が・いくらで・いつ届く）を優先した。
   既存定義より後に置いて上書きしている。
   ========================================================= */
.st-pdp {
  background: #fff;
  padding: 18px 0 46px;
}
.st-pdp__crumbs {
  font-size: 13px;
  margin-bottom: 16px;
}
/* --- ギャラリー：枠を外し、商品そのものを見せる --- */
.st-pdp__main-frame {
  background: var(--st-cream);
  border: 1px solid #f1eae0;
  border-radius: 16px;
  box-shadow: none;
  /* 商品画像の多くが白背景。フレームをベージュにすると
     「ベージュの額縁の中に白い四角」の二重額縁に見えてしまう */
  background: #fff;
}
/* cover だとパッケージの天地が切れるため contain。余白は背景側で持つ */
.st-pdp__main {
  object-fit: contain;
  padding: 2%;
}
.st-pdp__badge {
  top: 12px;
  left: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 13px;
  box-shadow: 0 2px 6px rgba(42, 38, 32, 0.12);
}
.st-pdp__nav {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  box-shadow: 0 2px 8px rgba(42, 38, 32, 0.14);
  color: var(--st-text-strong);
  font-size: 16px;
}
.st-pdp__nav:hover {
  background: #fff;
  color: var(--st-red);
}
.st-pdp__thumb {
  width: 66px;
  height: 66px;
  background: var(--st-cream);
  border: 1px solid transparent;
  border-radius: 10px;
}
.st-pdp__thumb img {
  object-fit: contain;
  padding: 5px;
}
.st-pdp__thumb.is-active {
  border-color: var(--st-red);
  box-shadow: none;
}
/* --- タイトル周り --- */
.st-pdp__vendor {
  font-size: 13px;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.st-pdp__title {
  font-family: var(--st-font-serif);
  font-size: clamp(23px, 5.8vw, 30px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.45;
  margin: 0 0 14px;
}
.st-pdp__chip {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  background: var(--st-red-soft);
  color: var(--st-red-deep);
  border: 0;
  border-radius: 999px;
}
/* --- 価格：装飾を外し、単価と日数で判断材料を足す --- */
.st-pdp__price {
  display: block;
  background: none;
  border: 0;
  border-left: 0;
  padding: 0;
  margin: 0 0 20px;
}
.st-pdp__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.st-pdp__price-now {
  /* 価格は緑にしない。事実として最も強く読ませたいので墨色＋大サイズ */
  font-size: clamp(33px, 8.6vw, 40px);
  font-weight: 800;
  color: var(--st-text-strong);
  line-height: 1;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.st-pdp__yen {
  font-size: 0.6em;
  font-weight: 700;
  margin-right: 1px;
}
.st-pdp__price-tax {
  font-size: 13.5px;
  color: var(--st-text);
}
.st-pdp__price-strike {
  font-size: 15px;
  color: #a89d8d;
}
.st-pdp__unit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 11px 0 0;
  font-size: 14px;
  color: var(--st-text);
  letter-spacing: 0.02em;
}
.st-pdp__unit b {
  font-size: 16px;
  font-weight: 800;
  color: var(--st-red-deep);
  font-feature-settings: "tnum";
}
.st-pdp__unit-note {
  font-size: 13px;
  color: #8a7f70;
}
.st-pdp__freeship {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 11px;
  background: var(--st-red-soft);
  color: var(--st-red-deep);
  border-radius: 5px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.st-pdp__freeship b {
  font-weight: 800;
}
/* 期間限定キャンペーン（2026-09-01）。送料無料バッジと対になる位置に置く */
.st-pdp__campaign {
  display: inline-block;
  margin: 10px 8px 0 0;
  padding: 5px 11px;
  background: #fdeef2;
  color: #b3305c;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.st-pdp__campaign b {
  font-weight: 800;
}
.st-pdp__campaign {
  white-space: nowrap;
}
@media (max-width: 430px) {
  .st-pdp__campaign { font-size: 11px; letter-spacing: 0; }
}
/* --- 数量・CTA --- */
.st-pdp__qty-ctrl {
  border: 1px solid var(--st-line);
  border-radius: 10px;
}
.st-pdp__qty-ctrl button {
  width: 42px;
  height: 44px;
  color: var(--st-text-strong);
  font-size: 15px;
}
.st-pdp__qty-ctrl button:hover {
  background: var(--st-red-soft);
  color: var(--st-red-deep);
}
.st-pdp__qty-ctrl input {
  height: 44px;
  width: 46px;
  font-size: 15px;
}
.st-pdp__cta {
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  font-size: 16px;
  letter-spacing: 0.06em;
  /* 段差影（0 4px 0）はポップすぎたので、柔らかいドロップシャドウに */
  box-shadow: 0 6px 16px rgba(70, 155, 49, 0.26);
}
.st-pdp__cta:hover {
  background: var(--st-red-deep);
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(70, 155, 49, 0.32);
}
.st-pdp__cta-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}
/* --- 売り切れ：主役になりすぎていたので沈める --- */
.st-pdp__soldout {
  background: var(--st-cream);
  border: 0;
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
}
.st-pdp__soldout-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--st-text-strong);
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.st-pdp__soldout-text {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--st-text);
  margin: 0 0 16px;
}
.st-pdp__soldout-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  background: var(--st-red);
  color: #fff;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 16px rgba(70, 155, 49, 0.24);
}
/* --- 特設ページ導線 --- */
.st-pdp__lp-banner {
  border: 1px solid var(--st-red-soft);
  background: #fff;
  border-radius: 12px;
  box-shadow: none;
}
.st-pdp__lp-banner:hover {
  background: var(--st-red-soft);
  transform: none;
  box-shadow: none;
}
/* --- 送料・お届け：箱をやめて罫線だけに --- */
.st-pdp__meta {
  background: none;
  border: 0;
  border-top: 1px solid var(--st-line);
  border-radius: 0;
  padding: 14px 0 0;
  margin-top: 20px;
}
.st-pdp__meta li {
  grid-template-columns: 68px 1fr;
  gap: 12px;
  font-size: 14px;
  padding: 6px 0;
}
.st-pdp__meta li + li {
  border-top: 0;
  margin-top: 0;
  padding-top: 5px;
}
.st-pdp__meta strong {
  color: var(--st-text-strong);
  font-size: 14px;
}
.st-pdp__quicklinks {
  border-top: 1px solid var(--st-line);
  font-size: 14px;
  gap: 16px;
}
.st-pdp__quicklinks a {
  color: var(--st-text);
  text-decoration: none;
  border-bottom: 1px solid var(--st-line);
  font-weight: 500;
  padding-bottom: 1px;
}
.st-pdp__quicklinks a:hover {
  color: var(--st-red-deep);
  border-bottom-color: var(--st-red);
}
/* --- タブ：2px枠の“付箋”見た目をやめ、下線タブに --- */
.st-pdp-tabs {
  background: #fff;
}
.st-pdp-tabs__bar {
  border-bottom: 1px solid var(--st-line);
  gap: 0;
}
.st-pdp-tabs__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0 0 -1px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--st-text);
}
.st-pdp-tabs__tab.is-active {
  background: transparent;
  color: var(--st-red-deep);
  border-bottom-color: var(--st-red);
}
.st-pdp-tabs__panels {
  border: 0;
  border-radius: 0;
  padding: 26px 2px;
}
.st-pdp-tabs__h {
  font-size: 16px;
  color: var(--st-text-strong);
  border-left: 3px solid var(--st-red);
  padding-left: 11px;
}
@media (min-width: 601px) {
  .st-pdp__gallery {
    grid-template-columns: 58px 1fr;
  }
  .st-pdp__thumb {
    width: 58px;
    height: 58px;
  }
}
@media (max-width: 600px) {
  /* 8枚あると2段に折り返してファーストビューを圧迫するため横スクロール1行 */
  .st-pdp__thumbs {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .st-pdp__thumbs::-webkit-scrollbar {
    display: none;
  }
  .st-pdp__thumb {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
  }
  .st-pdp-tabs__bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .st-pdp-tabs__bar::-webkit-scrollbar {
    display: none;
  }
  .st-pdp-tabs__tab {
    padding: 12px 13px;
    font-size: 12.5px;
    flex: 0 0 auto;
  }
}

/* =========================================================
   === 改行の孤立行対策（2026-07）
   iPhone 13 (390px) / 13 Pro Max (428px) の実測で、見出しやボタンの
   最終行に1〜2文字だけ残る箇所が多数あった。文言を削るのではなく
   組版側で吸収する。
   ========================================================= */

/* 見出し：行長を均等に割り、「。」や数字だけが次行に落ちるのを防ぐ */
h1, h2, h3, h4,
.st-pdp__title, .st-coll__title, .st-coll__name,
.st-seimei-story__title, .st-seimei-toyo__title, .st-seimei-material__title,
.st-seimei-band__title, .st-seimei-band__ribbon, .st-seimei-ingredient__fhead,
.st-seimei-toyo__panel-title, .st-seimei-faq__qtext, .st-seimei-empathy__label,
.st-lp-pain__h, .st-lp-shu__h,
.st-faq__q-text, .st-nf__cname, .st-nfq__q-text,
.st-prow__title, .st-lineup__heading {
  text-wrap: balance;
}

/* 本文：最終行に単語ひとつだけ残る状態を避ける */
p, dd, li, blockquote,
.st-seimei-hint__lead, .st-lp-pain__text, .st-pdp-tabs__panel p {
  text-wrap: pretty;
}

/* 価格は絶対に折らない。
   ¥ と数字が別要素のため、幅が詰まると「¥」「2,980」に割れていた */
.st-pdp__price-now, .st-coll__price, .st-seimei-price__amount {
  white-space: nowrap;
}

/* ボタン・バッジ・ラベルは短い文字列なので折り返させない。
   「商品ページで購入する ›」の › だけが次行に落ちる等を防ぐ */
.st-seimei-price__cta,
.st-seimei-faq__contact-btn,
.st-seimei-material__badge,
.st-seimei-hint__num,
.st-seimei-spec__badge,
.st-seimei-price__main-label,
.st-seimei-intro__type-cal,
.st-seimei-media__caption,
.st-coll__buy, .st-coll__more, .st-coll__sub,
.st-pdp__chip, .st-pdp__badge, .st-pdp__freeship {
  white-space: nowrap;
}

/* nowrap にした要素が幅からあふれないよう、狭い端末では字送りを詰める */
@media (max-width: 430px) {
  .st-seimei-price__cta { font-size: 15.5px; letter-spacing: 0.01em; padding-left: 14px; padding-right: 14px; }
  .st-seimei-faq__contact-btn { font-size: 13.5px; letter-spacing: 0.01em; }
  .st-pdp__freeship { font-size: 11px; letter-spacing: 0; }
}

/* =========================================================
   === 改行の孤立行対策（2026-07）
   iPhone 13 (390px) / 13 Pro Max (428px) の実測で、見出しやボタンの
   最終行に1〜2文字だけ残る箇所が多数あった。文言を削るのではなく
   組版側で吸収する。
   ========================================================= */

/* 見出し：行長を均等に割り、「。」や数字だけが次行に落ちるのを防ぐ */
h1, h2, h3, h4,
.st-pdp__title, .st-coll__title, .st-coll__name,
.st-seimei-story__title, .st-seimei-toyo__title, .st-seimei-material__title,
.st-seimei-band__title, .st-seimei-band__ribbon, .st-seimei-ingredient__fhead,
.st-seimei-toyo__panel-title, .st-seimei-faq__qtext, .st-seimei-empathy__label,
.st-lp-pain__h, .st-lp-shu__h,
.st-faq__q-text, .st-nf__cname, .st-nfq__q-text,
.st-prow__title, .st-lineup__heading {
  text-wrap: balance;
}

/* 本文：最終行に単語ひとつだけ残る状態を避ける */
p, dd, li, blockquote,
.st-seimei-hint__lead, .st-lp-pain__text, .st-pdp-tabs__panel p {
  text-wrap: pretty;
}

/* 価格は絶対に折らない。
   ¥ と数字が別要素のため、幅が詰まると「¥」「2,980」に割れていた */
.st-pdp__price-now, .st-coll__price, .st-seimei-price__amount {
  white-space: nowrap;
}

/* ボタン・バッジ・ラベルは短い文字列なので折り返させない。
   「商品ページで購入する ›」の › だけが次行に落ちる等を防ぐ */
.st-seimei-price__cta,
.st-seimei-faq__contact-btn,
.st-seimei-material__badge,
.st-seimei-hint__num,
.st-seimei-spec__badge,
.st-seimei-price__main-label,
.st-seimei-intro__type-cal,
.st-seimei-media__caption,
.st-coll__buy, .st-coll__more, .st-coll__sub,
.st-pdp__chip, .st-pdp__badge, .st-pdp__freeship {
  white-space: nowrap;
}

/* --- 実測で「最終行に1文字だけ」が残っていた箇所の個別対応 ---
   2文字残りは日本語では自然に起きるので触らない。1文字残りだけを潰す。 */

/* 短い語なので折らせない */
.st-seimei-intro__type-cal,
.st-seimei-media__caption,
.st-seimei-ingredient strong,
.st-seimei-ingredient__card strong,
.st-seimei-ingredient__fbody strong {
  white-space: nowrap;
}

/* 定義リストは短文が多く、balance のほうが素直に割れる */
dd, .st-doc__step-desc, .st-omoicol__text, .st-coll__lead {
  text-wrap: balance;
}

/* 「布団に入っても眠れない」の「い」だけが落ちていた。字送りを詰めて1行に */
.st-seimei-empathy__label { letter-spacing: 0; }

/* nowrap にした要素が幅からあふれないよう、狭い端末では字送りを詰める */
@media (max-width: 430px) {
  .st-seimei-price__cta { font-size: 15.5px; letter-spacing: 0.01em; padding-left: 14px; padding-right: 14px; }
  .st-seimei-faq__contact-btn { font-size: 13.5px; letter-spacing: 0.01em; }
  .st-pdp__freeship { font-size: 11px; letter-spacing: 0; }

  /* 「『整体茶 晴れ』誕生秘話」が30pxだと画面幅に入らず「話」だけ落ちる */
  .st-seimei-story__title { font-size: 24px; }
  /* 「鍼灸師がつくった、心とからだに安らぎを」の「を」だけが落ちていた */
  .lp-ribbon { font-size: 13.5px; letter-spacing: 0; }
  /* noteカードの見出し。カード幅が狭く1文字だけ次行に落ちていた */
  .st-nf__cname { font-size: 12.5px; letter-spacing: 0.01em; }
  .st-seimei-empathy__label { font-size: 12.5px; }
}

/* =========================================================
   === カートページのブランド適用（2026-07）
   購入直前の画面が既定デザインのままだと、そこで別サイトに来たように見える。
   Horizon の main-cart は Web Components のため、CSSで上から寄せている。
   ========================================================= */

/* 1) 書体。既定の Inter のままだと本文（丸ゴシック）と別物に見える */
.cart-items-component,
.cart-items-component *:not(svg):not(path):not(use) {
  font-family: var(--st-font-jp);
}

/* 2) 見出し「カート」 */
.cart-page__title .cart-title {
  font-size: clamp(22px, 5.6vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--st-text-strong);
}
/* 件数バッジ（2026-08-14 指摘: 緑地に黒文字が乗って数字が読めなかった）。
   ベースは .cart-bubble__text-count 自体に文字色を当てているため、
   親(__text)だけ白にしても子で黒に戻る。countまで含めて白太字を明示し、
   地は白が確実に立つ濃緑（--st-red-deep）に統一する（ヘッダー側も同じ見た目になる） */
.cart-bubble .cart-bubble__background { background: var(--st-red-deep); }
.cart-bubble .cart-bubble__text,
.cart-bubble .cart-bubble__text-count { color: #fff; font-weight: 800; }
/* ヘッダーの件数バッジはベース側の指定が強く薄緑(#86BD76)のまま残るため、
   ヘッダーを起点にした指定でカートページと同じ濃緑に揃える（白文字が立つ） */
header-component .cart-bubble .cart-bubble__background,
.header-actions .cart-bubble .cart-bubble__background { background: var(--st-red-deep); }

/* 3) 商品行：区切りをブランドの罫線色に、商品名を読みやすく */
.cart-items--dividers .cart-items__table tr + tr,
.cart-items__table td { border-color: var(--st-line); }
.cart-items__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--st-text-strong);
  letter-spacing: 0.02em;
}

/* 4) 数量セレクタ：角ばった既定から、商品ページと同じ丸みへ */
.cart-items__table quantity-selector,
.cart-items__table .quantity-selector {
  border-radius: 10px;
  border-color: var(--st-line);
}

/* 5) 合計：ここが一番見られる数字なので大きく墨色で */
.cart-totals__container { border-top: 1px solid var(--st-line); }
.cart-totals__price,
.cart-totals__total-value,
.cart-summary .cart-totals span[class*="price"] {
  font-size: 22px;
  font-weight: 800;
  color: var(--st-text-strong);
  font-feature-settings: "tnum";
}

/* 6) チェックアウト：サイト内のCTAと同じピル型・同じ影に揃える */
.cart__checkout-button.button,
.cart__ctas .button {
  min-height: 58px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 16px rgba(70, 155, 49, 0.26);
}
.cart__checkout-button.button:hover { background: var(--st-red-deep); }

/* 7) 空カートの導線も同じ形に */
.cart__empty-state .button,
.cart-drawer__empty-state .button {
  min-height: 54px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* 8) 「こちらもおすすめです」：商品一覧のカードと印象を合わせる。
      既定は価格が小さく、売り切れバッジが強い色で浮いていた */
.cart-page ~ * .product-card__title,
.product-list .product-card__title { font-weight: 700; letter-spacing: 0.02em; }
.product-list .product-card__price,
.product-list [class*="price"] {
  font-weight: 800;
  color: var(--st-text-strong);
}
.product-list .product-badge,
.product-list [class*="badge"] {
  background: rgba(42, 38, 32, 0.62);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* =========================================================
   === カートページのブランド適用（2026-07）
   購入直前の画面が既定デザインのままだと、そこで別サイトに来たように見える。
   Horizon の main-cart は Web Components のため、CSSで上から寄せている。
   ========================================================= */

/* 1) 書体。既定の Inter のままだと本文（丸ゴシック）と別物に見える */
.cart-items-component,
.cart-items-component *:not(svg):not(path):not(use) {
  font-family: var(--st-font-jp);
}

/* 2) 見出し「カート」 */
.cart-page__title .cart-title {
  font-size: clamp(22px, 5.6vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--st-text-strong);
}
/* 件数バッジ（2026-08-14 指摘: 緑地に黒文字が乗って数字が読めなかった）。
   ベースは .cart-bubble__text-count 自体に文字色を当てているため、
   親(__text)だけ白にしても子で黒に戻る。countまで含めて白太字を明示し、
   地は白が確実に立つ濃緑（--st-red-deep）に統一する（ヘッダー側も同じ見た目になる） */
.cart-bubble .cart-bubble__background { background: var(--st-red-deep); }
.cart-bubble .cart-bubble__text,
.cart-bubble .cart-bubble__text-count { color: #fff; font-weight: 800; }

/* 3) 商品行：区切りをブランドの罫線色に、商品名を読みやすく */
.cart-items--dividers .cart-items__table tr + tr,
.cart-items__table td { border-color: var(--st-line); }
.cart-items__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--st-text-strong);
  letter-spacing: 0.02em;
}

/* 4) 数量セレクタ：角ばった既定から、商品ページと同じ丸みへ */
.cart-items__table quantity-selector,
.cart-items__table .quantity-selector {
  border-radius: 10px;
  border-color: var(--st-line);
}

/* 5) 合計：ここが一番見られる数字なので大きく墨色で */
.cart-totals__container { border-top: 1px solid var(--st-line); }
.cart-totals__price,
.cart-totals__total-value,
.cart-summary .cart-totals span[class*="price"] {
  font-size: 22px;
  font-weight: 800;
  color: var(--st-text-strong);
  font-feature-settings: "tnum";
}

/* 6) チェックアウト：サイト内のCTAと同じピル型・同じ影に揃える */
.cart__checkout-button.button,
.cart__ctas .button {
  min-height: 58px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 16px rgba(70, 155, 49, 0.26);
}
.cart__checkout-button.button:hover { background: var(--st-red-deep); }

/* 7) Shop Pay / PayPal / Google Pay が主導線と同じ大きさで3つ並び、
      どれを押すか迷ううえ、紫・黄・黒で配色が散っていた。
      色は各社のブランドなので変えられないが、高さと形は Shopify が
      CSS変数を公開しているので、主導線より一段小さくして序列をつける。 */
shopify-accelerated-checkout-cart,
shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: 46px;
  --shopify-accelerated-checkout-button-border-radius: 999px;
  --shopify-accelerated-checkout-row-gap: 8px;
}
.dynamic-checkout__content::before {
  content: "またはこちらの決済方法で";
  display: block;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--st-text);
  margin: 12px 0 10px;
}

/* 8) 空カートの導線も同じ形に */
.cart__empty-state .button,
.cart-drawer__empty-state .button {
  min-height: 54px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* 9) 「こちらもおすすめです」：商品一覧のカードと印象を合わせる。
      既定は価格が小さく、売り切れバッジが強い色で浮いていた */
.cart-page ~ * .product-card__title,
.product-list .product-card__title { font-weight: 700; letter-spacing: 0.02em; }
.product-list .product-card__price,
.product-list [class*="price"] {
  font-weight: 800;
  color: var(--st-text-strong);
}
.product-list .product-badge,
.product-list [class*="badge"] {
  background: rgba(42, 38, 32, 0.62);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* =========================================================
   === 定期便の選択欄（Shopify Subscriptions）
   「1回のみ購入」と「定期便」を同じ大きさのカードで並べ、
   選択中だけ枠と背景で持ち上げる。価格を右端に揃えて比較しやすくした。
   ========================================================= */
.st-pdp__plans { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; }
.st-pdp__plans-label {
  margin: 0 0 2px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--st-text-strong, #2a2620);
}
.st-pdp__plan {
  display: block;
  padding: 13px 15px;
  border: 1.5px solid var(--st-line, #d8cbb8);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.st-pdp__plan:hover { border-color: var(--st-green, #86bd76); }
.st-pdp__plan.is-active {
  border-color: var(--st-red, #469b31);
  background: var(--st-red-soft, #eaf6e5);
  box-shadow: 0 2px 10px rgba(70, 155, 49, 0.12);
}
.st-pdp__plan input { position: absolute; opacity: 0; pointer-events: none; }

.st-pdp__plan-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.st-pdp__plan-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--st-text-strong, #2a2620);
  letter-spacing: 0.02em;
}
.st-pdp__plan-price {
  font-size: 17px; font-weight: 800; color: var(--st-text-strong, #2a2620);
  white-space: nowrap;
  font-feature-settings: "tnum";
}
.st-pdp__plan.is-active .st-pdp__plan-price { color: var(--st-red-deep, #367726); }
.st-pdp__plan-off {
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; background: var(--st-red, #469b31);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.st-pdp__plan-note {
  display: block; margin-top: 5px;
  font-size: 13.5px; line-height: 1.7; color: var(--st-text, #776e62);
}
.st-pdp__plans-help {
  margin: 2px 0 0;
  font-size: 13.5px; color: var(--st-text, #776e62); letter-spacing: 0.02em;
}

/* ==========================================================================
   st-doc feature — イラスト付き項目（「4つの約束」など）
   絵は左、文字は右。SPは縦積みにして中央寄せ
   ========================================================================== */
.st-doc__feature{
  display:flex; align-items:flex-start; gap:clamp(16px,3vw,28px);
  padding:clamp(20px,3vw,26px) 0;
  border-bottom:1px solid var(--st-line,#e8e0d2);
}
.st-doc__feature + .st-doc__cta-wrap,
.st-doc__feature:last-of-type{ border-bottom:none; }
.st-doc__feature-ill{ flex-shrink:0; width:clamp(96px,18vw,148px); height:auto; }
.st-doc__feature-body{ flex:1; min-width:0; }
.st-doc__feature-no{
  display:inline-block; margin-bottom:4px;
  font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--st-red,#469b31);
}
.st-doc__feature-en{
  margin:0 0 4px; font-size:11.5px; font-weight:700; letter-spacing:.18em;
  color:var(--st-text-sub,#8a7c66);
}
.st-doc__feature-title{
  margin:0 0 8px; font-size:clamp(17px,3.4vw,20px); font-weight:700;
  letter-spacing:.04em; line-height:1.55;
}
.st-doc__feature-text{ margin:0; font-size:clamp(14px,2.8vw,15.5px); line-height:1.95; }
@media (max-width:600px){
  .st-doc__feature{ flex-direction:column; align-items:center; text-align:center; gap:12px; }
}

/* ==================================================================
   商品ページ（PDP）— 2026-07-28
   商品一覧ページと同じ言い回しに揃える。
   もとは緑の2px枠と丸ピルの組み合わせで、商品説明の長文が 999px の
   丸ピルに押し込まれ、しかも行頭の記号が1文字目に重なって読めなかった。
   線は商品一覧と同じ細いベージュ罫線、リスト項目は丸ピルをやめて白カード。

   なお `.st-pdp-tabs__panel ul li`(0,1,2) の方が詳細度が高いため、
   打ち消す側は必ず `.st-pdp-tabs__desc ul li` まで書くこと。
   ================================================================== */
.st-pdp-tabs { --pdp-line: #d6be9f; --pdp-rule: #d4bb98; --pdp-ink: #5c4c2c; }

/* --- タブ。商品一覧のカテゴリーナビと同じ白地＋細枠 --- */
.st-pdp-tabs__bar { border-bottom: 1px solid var(--pdp-line); }
.st-pdp-tabs__tab {
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--pdp-ink);
  margin-right: 5px; margin-bottom: -1px;
  padding: 11px 16px;
  transition: background .2s ease, color .2s ease;
}
.st-pdp-tabs__tab.is-active {
  background: var(--st-red); border-color: var(--st-red); color: #fff;
}
.st-pdp-tabs__panels {
  border: 1px solid var(--pdp-line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #fff;
}

/* --- 見出し。左右に罫線を伸ばす形は長い見出しが折り返すと崩れるので、
       下に1本引く形にする --- */
.st-pdp-tabs__h,
.st-pdp-tabs__desc h2,
.st-pdp-tabs__desc h3 {
  border-left: none; padding: 0 0 9px;
  border-bottom: 1px solid var(--pdp-rule);
  color: var(--pdp-ink);
  font-size: 16px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.5;
  margin: 28px 0 14px;
}
.st-pdp-tabs__h:first-child,
.st-pdp-tabs__desc > :first-child { margin-top: 0; }

/* --- 本文リスト。丸ピル＋行頭記号の重なりを解消してカードにする --- */
.st-pdp-tabs__desc ul { display: flex !important; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; }
.st-pdp-tabs__desc ul li {
  position: relative;
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-radius: 10px;
  padding: 11px 14px 11px 32px;
  margin: 0;
  font-size: 13.5px; line-height: 1.85; color: var(--st-text);
  font-weight: 400;
}
.st-pdp-tabs__desc ul li::before {
  content: "";
  position: absolute; left: 14px; top: 1.35em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--st-red);
}
.st-pdp-tabs__desc strong, .st-pdp-tabs__desc b { color: var(--pdp-ink); }

/* --- 素材のイラストカード --- */
.st-pdp-tabs__panel ul.st-pdp-ing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 0 0 18px; padding: 0; list-style: none;
}
.st-pdp-tabs__panel ul.st-pdp-ing li {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-radius: 12px;
  padding: 12px 6px 14px;
  text-align: center;
}
.st-pdp-tabs__panel ul.st-pdp-ing li::before { content: none; }
.st-pdp-ing__item img { width: 72px; height: 72px; object-fit: contain; }
.st-pdp-ing__mark { display: block; width: 34px; color: var(--st-red); opacity: .75; }
.st-pdp-ing__mark svg { display: block; width: 100%; height: auto; }
.st-pdp-ing__name {
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--pdp-ink); line-height: 1.4;
}

@media (max-width: 600px) {
  .st-pdp-tabs__panels { padding: 20px 14px; }
  /* タブ4つを1行に押し込むと11.5pxまで縮んで読めなかった。
     2×2に並べ替えて、文字を本文と同じ大きさに戻す（2026-08-06） */
  .st-pdp-tabs__bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: 0; margin-bottom: 4px; }
  .st-pdp-tabs__tab {
    padding: 13px 6px; font-size: 15px; margin: 0; letter-spacing: 0.02em;
    border: 1px solid var(--st-line); border-radius: 8px;
  }
  .st-pdp-tabs__tab.is-active { border-color: transparent; }
  .st-pdp-tabs__h, .st-pdp-tabs__desc h2, .st-pdp-tabs__desc h3 { font-size: 16.5px; margin: 24px 0 12px; }
  .st-pdp-tabs__desc ul li { font-size: 14.5px; padding: 11px 12px 11px 29px; }
  .st-pdp-tabs__desc ul li::before { left: 12px; }
  .st-pdp-tabs__desc p, .st-pdp-tabs__panel p { font-size: 15px; line-height: 1.95; }
  .st-pdp-tabs__panel ul.st-pdp-ing { gap: 8px; }
  .st-pdp-tabs__panel ul.st-pdp-ing li { padding: 10px 4px 12px; }
  .st-pdp-ing__item img { width: 60px; height: 60px; }
  .st-pdp-ing__name { font-size: 13px; }
}

/* 商品ページの日本語の折り返し。「厳選6種のブレン／ド（独自配合）」のように
   語の途中で割れていた。auto-phrase は Chromium系のみ有効（Safariは無視） */
.st-pdp-tabs__h,
.st-pdp-tabs__desc h2,
.st-pdp-tabs__desc h3 { text-wrap: balance; }
.st-pdp-tabs__h,
.st-pdp-tabs__desc h2,
.st-pdp-tabs__desc h3,
.st-pdp-tabs__desc p,
.st-pdp-tabs__desc ul li,
.st-pdp-tabs__panel p { word-break: auto-phrase; }

/* ==================================================================
   ドキュメントページ（しゅー先生 / おたより / お買い物ガイド等）
   2026-07-28 — 商品一覧ページと同じ言い回しに寄せる
   ================================================================== */
.st-doc { --doc-line: #d6be9f; --doc-rule: #d4bb98; --doc-ink: #5c4c2c; }

/* --- 波形の見出し帯（商品一覧と同じ作り） --- */
.st-doc--wave { padding-top: 0; }
.st-doc__hero {
  position: relative;
  background: var(--st-cream, #f8efe0);
  background-image: radial-gradient(rgba(146, 120, 80, 0.1) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  padding: clamp(28px, 5vw, 44px) 16px clamp(52px, 7vw, 74px);
  text-align: center;
}
.st-doc__crumbs {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  font-size: 12px; color: #ac916b; margin-bottom: 12px;
}
.st-doc__crumbs a { color: #ac916b; text-decoration: none; }
.st-doc__crumbs a:hover { text-decoration: underline; }
.st-doc__hero .st-doc__eyebrow { color: #ac916b; }
.st-doc__hero .st-doc__title {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 2.4vw, 18px);
  color: var(--doc-ink);
  letter-spacing: 0.1em;
}
.st-doc__leaf { display: block; width: clamp(20px, 4vw, 28px); color: var(--st-red, #469b31); opacity: 0.85; }
.st-doc__leaf svg { display: block; width: 100%; height: auto; }
.st-doc__leaf--r { transform: scaleX(-1); }
.st-doc__hero .st-doc__lead { color: var(--st-text-sub, #8a7c66); }
.st-doc__wave { position: absolute; left: 0; right: 0; bottom: -1px; display: block; width: 100%; height: clamp(34px, 4vw, 56px); }
.st-doc--wave .st-doc__wrap { padding-top: clamp(28px, 5vw, 46px); }

/* --- 茶ばくん --- */
.st-doc__mascot {
  position: absolute; right: clamp(8px, 5vw, 64px); bottom: 0; z-index: 2;
  width: clamp(76px, 12vw, 124px); height: auto; pointer-events: none;
}
.st-doc__head { position: relative; }
.st-doc__mascot--plain {
  position: absolute; right: 0; bottom: -6px;
  width: clamp(64px, 14vw, 104px);
}

/* --- 見出し。緑の縦棒をやめ、商品一覧と同じ茶のインク＋下罫線 --- */
.st-doc__h2 {
  color: var(--doc-ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--doc-rule);
}
.st-doc__h2-mark {
  width: 17px; height: auto; background: none; border-radius: 0;
  color: var(--st-red, #469b31); opacity: 0.8;
}
.st-doc__h2-mark::before {
  content: ""; display: block; width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M24.5 3.5S9.5 2 5 10.5c-3.4 6.4 1 13 1 13s7.6.6 12.4-4.4C23.7 13.6 24.5 3.5 24.5 3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M24.5 3.5S9.5 2 5 10.5c-3.4 6.4 1 13 1 13s7.6.6 12.4-4.4C23.7 13.6 24.5 3.5 24.5 3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- 定義リスト。罫線だけの並びから白カードへ --- */
.st-doc__table { border-top: none; display: flex; flex-direction: column; gap: 8px; }
.st-doc__row {
  border-bottom: none;
  border: 1px solid var(--doc-line);
  border-radius: 10px;
  padding: 13px 16px;
  background: #fff;
}
@media (min-width: 600px) { .st-doc__row { grid-template-columns: 180px 1fr; } }
.st-doc__row dt { color: var(--doc-ink); }

/* --- 締めの茶ばくん（商品一覧と同じ箱） --- */
.st-doc__says {
  display: flex; align-items: center; gap: clamp(12px, 3vw, 22px);
  max-width: 640px; margin: clamp(36px, 6vw, 56px) auto 0;
  padding: clamp(16px, 3vw, 22px) clamp(18px, 4vw, 28px);
  background: var(--st-red-soft, #eaf6e5); border-radius: 18px;
}
.st-doc__says img { width: clamp(58px, 11vw, 84px); height: auto; flex-shrink: 0; }
.st-doc__says p {
  margin: 0; font-size: clamp(13px, 2.8vw, 15px); line-height: 1.9;
  letter-spacing: 0.03em; color: var(--doc-ink); word-break: auto-phrase;
}

@media (max-width: 600px) {
  /* 中央寄せのままだと茶ばくんが見出しに重なるので左に寄せる */
  .st-doc__hero { text-align: left; padding-right: 100px; }
  .st-doc__crumbs { justify-content: flex-start; }
  .st-doc__hero .st-doc__title { justify-content: flex-start; }
  .st-doc__hero .st-doc__lead { margin-left: 0; }
  .st-doc__mascot { right: 10px; width: 84px; }
  .st-doc__head { padding-right: 88px; text-align: left; }
  .st-doc__head .st-doc__lead { margin-left: 0; }
  /* 茶ばくんのぶん幅が狭く、見出しが「鍼灸師 し／ゅー先生」と
     語の途中で割れていた。右の葉飾りを外して1行に収める */
  .st-doc__leaf--r { display: none; }
  .st-doc__hero .st-doc__title { font-size: clamp(22px, 5vw, 28px); word-break: auto-phrase; }
  .st-doc__leaf { width: 19px; }
}


/* ==================================================================
   商品ページの商品別テーマ色 — 2026-07-27 クライアント指定
   晴れ=暖色 / 蒼々=水色 / 目の華=緑 / 整う命=白・薄ピンク / 心のおとも=淡ピンク
   CSS変数は st-lp.css の [data-page] パレットを使う（theme.liquidで常時読込）。
   data-page が無い商品（珈琲・クコの実）は従来のブランド緑のまま。
   ================================================================== */
/* セレクタが .st-pdp__buy になっていたが、HTML側のクラスは .st-pdp__cta。
   そのため本体のカートボタンだけ色が当たらず、下部固定バー（オレンジ）と
   本体（緑）で同じ「カートに入れる」が2色に割れていた。2026-08-06 修正 */
body[data-page] .st-pdp__cta,
body[data-page] .st-stickycta__btn {
  background: var(--lp-pink);
  border-color: var(--lp-pink);
}
body[data-page] .st-pdp__cta:hover,
body[data-page] .st-stickycta__btn:hover { filter: brightness(1.06); }
body[data-page] .st-pdp__badge { background: var(--lp-pink); }
body[data-page] .st-pdp-tabs__tab.is-active {
  background: var(--lp-pink); border-color: var(--lp-pink);
}
body[data-page] .st-pdp__price-num,
body[data-page] .st-pdp__per { color: var(--lp-pink); }
body[data-page] .st-pdp-tabs__desc ul li::before { background: var(--lp-pink); }
body[data-page] .st-pdp-ing__mark { color: var(--lp-pink); }
body[data-page] .st-pdp__plan.is-active { border-color: var(--lp-pink); }
body[data-page] .st-pdp__soldout-cta { background: var(--lp-pink); border-color: var(--lp-pink); }

/* 商品ページの評価表示（旧ストアでの実績）— 2026-07-28
   クライアント要望「ここにもレビュー欲しい」。STORESで★5・391件の
   実績があり、その訴求力を新サイトでも出す。押すと口コミページへ。 */
.st-pdp__rating {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  text-decoration: none;
  color: var(--st-text);
}
.st-pdp__stars { display: inline-flex; gap: 1px; line-height: 1; }
.st-pdp__star { color: #ddd3c2; font-size: 17px; }
.st-pdp__star.is-on { color: #F0A93B; }
.st-pdp__rating-score {
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--lp-text, #4a3620);
}
.st-pdp__rating-count {
  font-size: 14px;
  color: var(--st-text-sub, #8a7c66);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.st-pdp__rating:hover .st-pdp__rating-count { color: var(--lp-pink, var(--st-red)); }
/* 支給値を持たない商品。口コミWorkerから実データが入るまで出さない（2026-09-05） */
.st-pdp__rating.is-pending { display: none; }

/* 「想い」2ページのフォント統一 — 2026-07-29
   ページ全体は丸ゴシックに刷新したが、st-picks の見出しなど
   他所から流用したセクションに明朝が残り混在して見えていた。
   このページ配下は丸ゴシックに揃える。 */
body[data-page="commitment"] #MainContent,
body[data-page="kokoro-omoi"] #MainContent,
body[data-page="commitment"] #MainContent h1,
body[data-page="commitment"] #MainContent h2,
body[data-page="commitment"] #MainContent h3,
body[data-page="kokoro-omoi"] #MainContent h1,
body[data-page="kokoro-omoi"] #MainContent h2,
body[data-page="kokoro-omoi"] #MainContent h3 {
  font-family: var(--st-font-jp) !important;
}


/* 想いページの見出しを1行に — 2026-07-29 クライアント指摘
   「ずっと頑張ってきたから疲れているだけ」「少しだけ自分をいたわる時間に」
   pre-line で改行を保持しているため、SPでは1行に入る大きさまで縮める */
@media (max-width: 768px) {
  .st-lp-pain__h { font-size: clamp(16px, 4.6vw, 21px); }
  .st-lp-cta__h { font-size: clamp(17px, 4.8vw, 23px); }
  .st-lp-pain__h, .st-lp-cta__h { white-space: pre-line; }
  /* pre-line の見出しは改行後の2文目が泣き別れやすい。行長を揃える */
  .st-lp-pain__h, .st-lp-cta__h { text-wrap: balance; }
}

/* 泣き別れの一括低減（text-audit.js の orphan 検出結果より 2026-07-29） */
.st-ft__line,
.st-doc__cta,
.st-pdp__lp-banner-text,
.st-blog__name,
.st-picks__item-cap {
  text-wrap: balance;
}
.st-doc__rte p,
.st-nfq__a,
.st-pdp-tabs__desc p {
  text-wrap: pretty;
}