@charset "UTF-8";
/* ==========================================================================
   シンビサプリ組み込み用（デリバー追記）
   サイト共通CSS（EC-CUBE・旧サイト移植CSS）の h1〜h3・ul・dl・figure などの
   要素指定を打ち消し、ブラウザ初期状態と同じ前提でLPのCSSが効くようにする。
   ※ .cs-lp :where(...) は詳細度(0,1,0)。LP本体の指定（.cs-lp .xxx）より弱く、要素指定より強い。
   ========================================================================== */
.cs-lp :where(h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure) { margin: 0; padding: 0; }
.cs-lp :where(h1) { font-size: 2em; font-weight: bold; }
.cs-lp :where(h2) { font-size: 1.5em; font-weight: bold; }
.cs-lp :where(h3) { font-size: 1.17em; font-weight: bold; }
.cs-lp :where(dt) { font-weight: normal; }
.cs-lp :where(a) { color: inherit; }

/* ==========================================================================
   シンビサプリ 商品LP 共通CSS（4商品共通）
   - 既存サイトのCSSと干渉しないよう、すべて .cs-lp 配下にスコープしています
   - 商品ごとの色は .cs-lp--{商品名} の変数だけ差し替えてください
   - LP全体の最大幅：710px（PC表示はデザインの710px幅に合わせた数値）
   - ブレイクポイント：709px以下をSP表示（710px以上はPC表示＝デザイン幅）
   ========================================================================== */

/* ---------- 商品別カラー ---------- */
.cs-lp--umeniku {
  --cs-primary: #bc5437;       /* メインカラー（帯・見出し・ラベル） */
  --cs-primary-soft: #cf8872;  /* おすすめ帯 */
  --cs-label: #c98c70;         /* 商品情報ラベル */
  --cs-bg: #f8eeec;            /* 価格・ここが違う・Q&A・併せ使いエリア背景 */
  --cs-card-alt: #f3e7db;      /* 注目素材カード背景 */
}

/* ---------- ベース ---------- */
.cs-lp {
  max-width: 710px; /* LP全体の横幅（デザインの幅） */
  margin: 0 auto;
  --cs-red: #b10d01;
  --cs-buy: #3c7843;
  --cs-text: #231815;
  --cs-line: #d9cfcc;
  --cs-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --cs-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --cs-num: "fot-tsukumin-pr6n", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --cs-inner: 615px; /* 本文幅 */

  color: var(--cs-text);
  font-family: var(--cs-sans);
  font-size: 10.9px;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  font-feature-settings: "palt";
}
.cs-lp *,
.cs-lp *::before,
.cs-lp *::after { box-sizing: border-box; }
/* リセットは :where() で詳細度0にし、各パーツのスタイルを優先させる */
:where(.cs-lp) :where(h1, h2, h3, p, ul, dl, dd, figure) { margin: 0; padding: 0; }
:where(.cs-lp) :where(ul) { list-style: none; }
:where(.cs-lp) :where(img) { display: block; max-width: 100%; height: auto; border: 0; }
:where(.cs-lp) :where(a) { text-decoration: none; }
.cs-lp sup { font-size: .4em; vertical-align: top; line-height: 1; position: relative; top: .3em; }

.cs-lp .cs-inner {
  width: 100%;
  max-width: calc(var(--cs-inner) + 25.6px);
  margin: 0 auto;
  padding: 0 12.8px;
}
.cs-lp .cs-sp { display: none; }

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.cs-hero__catch {
  padding: 17.9px 12.8px;
  font-family: var(--cs-serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .07em;
  line-height: 1.4;
  text-align: center;
}
.cs-hero__band {
  padding: 28.2px 12.8px 36.2px;
  background: var(--cs-primary);
  color: #fff;
  text-align: center;
}
.cs-hero__title {
  font-family: var(--cs-serif);
  font-weight: 500;
  font-size: 48px;
  letter-spacing: .06em;
  line-height: 1.2;
}
.cs-hero__en {
  margin-top: 0;
  font-family: var(--cs-serif);
  font-size: 27.5px;
  letter-spacing: .02em;
  line-height: 1.2;
}
.cs-hero__en small {
  display: block;
  margin-top: 5px;
  font-size: 11.8px;
  letter-spacing: .1em;
  line-height: 1;
}
.cs-hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7.7px;
  margin-top: 24.8px;
}
.cs-hero__tags li {
  min-width: 150px;
  padding: 1px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--cs-primary);
  font-family: var(--cs-serif);
  font-size: 17px;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.cs-hero__visual img { width: 100%; }

/* ==========================================================================
   価格ボックス
   ========================================================================== */
.cs-price {
  padding: 45.8px 0 45.4px;
  background: var(--cs-bg);
}
.cs-price__box {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 10.1px;
  align-items: start;
}
.cs-price__photo {
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  margin-left: -1.6px;
}
.cs-price__head {
  padding: 0 10.3px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 22px;
}
.cs-price__head--normal { border: 1.5px solid #3e3a39; background: #fff; }
.cs-price__head--teiki { margin-top: 4.5px; background: var(--cs-red); color: #fff; line-height: 25px; }

.cs-price__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 6.4px;
  padding: 9px 0 7px;
}
.cs-price__row + .cs-price__row { border-top: 1px solid var(--cs-line); }
.cs-price__qty {
  min-width: 59px;
  padding: 3.8px 6.4px;
  border: 1.5px solid #3e3a39;
  border-radius: 5.1px;
  background: #fff;
  font-family: var(--cs-serif);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.cs-price__num {
  font-family: var(--cs-num);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.cs-price__num--teiki { color: var(--cs-red); }
.cs-price__yen {
  position: relative;
  display: inline-block;
  font-size: .56em;
}
.cs-price__tax {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 2px;
  font-size: 10.9px;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateX(-50%);
}
.cs-price__save {
  justify-self: end;
  width: 56.4px;
  padding: 3.8px 0;
  border-radius: 3.8px;
  background: var(--cs-red);
  color: #fff;
  font-family: var(--cs-serif);
  font-size: 11.5px;
  line-height: 1.1;
  text-align: center;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 6.6px;
}
.cs-price__save b { display: block; font-weight: 500; font-size: 18.8px; white-space: nowrap; letter-spacing: -.04em; }
.cs-price__save b small { font-size: 11.5px; }
.cs-price__row--normal .cs-price__btn { grid-column: 4; }

/* 購入ボタン */
.cs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  width: 173px;
  min-height: 41px;
  padding: 6.4px 10.3px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 6.4px;
  box-shadow: 0 0 0 2px var(--cs-btn-edge), 0 2.6px 0 var(--cs-btn-shadow);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  transition: transform .15s, box-shadow .15s;
}
.cs-btn:hover { transform: translateY(2px); box-shadow: 0 0 0 2px var(--cs-btn-edge), 0 2px 0 var(--cs-btn-shadow); }
.cs-btn:focus-visible { outline: 3px solid #1d5fd1; outline-offset: 4px; }
.cs-btn svg { flex-shrink: 0; width: 17.9px; height: 17.9px; fill: currentColor; }
.cs-btn--buy svg { transform: scaleX(-1); } /* カートの向きをデザインに合わせて左右反転 */
.cs-btn img { flex-shrink: 0; width: 35px; height: auto; margin: 0 -4.7px 0 -3px; } /* 定期お届け便のカート画像（35×24px）。左右の透明な余白3pxを詰める */
.cs-btn--teiki { white-space: nowrap; }
.cs-btn--buy,
.cs-btn--detail { /* 緑ボタン共通（単品購入／詳しくはこちら） */
  --cs-btn-edge: #3f7a33;
  --cs-btn-shadow: #2f5e26;
  background: linear-gradient(#70b058, var(--cs-buy));
}
.cs-btn--buy { letter-spacing: .46em; }
.cs-btn--detail { letter-spacing: .12em; }
.cs-btn--block { width: 100%; } /* 親要素の幅いっぱいに広げる */
.cs-btn--teiki {
  --cs-btn-edge: #8c0a01;
  --cs-btn-shadow: #6e0801;
  background: linear-gradient(#e60012, #9e1319); /* ボタンのみの色（他の赤は --cs-red のまま） */
  font-size: 13px;
  letter-spacing: .12em;
}

.cs-price__banner {
  display: block;
  max-width: 516px;
  margin: 20.2px auto 0;
  transition: opacity .15s;
}
.cs-price__banner:hover { opacity: .85; }

/* ==========================================================================
   セクション見出し
   ========================================================================== */
.cs-sec-title {
  font-family: var(--cs-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: .04em;
  text-align: center;
}
.cs-sec-title span { display: block; color: var(--cs-primary); }

/* ==========================================================================
   厳選素材
   ========================================================================== */
.cs-material { padding: 49.1px 0 49.9px; }
.cs-material__list {
  display: grid;
  gap: 24px;
  margin-top: 20.1px;
}
.cs-material__item {
  --cs-card-radius: 15.4px;
  position: relative;
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  align-items: center;
  min-height: 299px;
  border-radius: var(--cs-card-radius);
  background: #fff;
  box-shadow: 0 0 10.3px rgba(0, 0, 0, .16); /* デザインのドロップシャドウ（四方均等） */
  overflow: visible;
}
.cs-material__item--reverse { grid-template-columns: minmax(0, 1fr) 44%; }
.cs-material__item--reverse .cs-material__photo {
  order: 2;
  border-radius: 0 var(--cs-card-radius) var(--cs-card-radius) 0;
}
.cs-material__item--alt { background: var(--cs-card-alt); }
.cs-material__photo {
  align-self: stretch;
  border-radius: var(--cs-card-radius) 0 0 var(--cs-card-radius);
  overflow: hidden;
}
.cs-material__photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-material__body { padding: 22.5px 36.4px 18.5px 18px; }
.cs-material__item--reverse .cs-material__body { padding: 22.5px 17px 18.5px 37.4px; position: relative; z-index: 1; margin-right: 0; }
.cs-material__label {
  display: inline-block;
  padding: 2.6px 13.3px;
  border-radius: 6.4px;
  background: var(--cs-primary);
  color: #fff;
  font-family: var(--cs-serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: .05em;
  line-height: 1.5;
  min-width: 169.5px;
  text-align: center;
}
.cs-material__heading {
  margin-top: 11.8px;
  font-family: var(--cs-serif);
  font-weight: 700;
  font-size: 24.5px;
  line-height: 1.32;
  letter-spacing: .03em;
  white-space: nowrap;
}
.cs-material__heading span { display: block; color: var(--cs-primary); }
.cs-material__text { margin-top: 6px; font-size: 16px; line-height: 1.56; letter-spacing: -.03em; text-align: justify; }
.cs-material__badge {
  position: absolute;
  top: -11px;
  right: -24px;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--cs-red);
  color: #fff;
  font-family: var(--cs-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
  letter-spacing: -.04em;
}

/* ==========================================================================
   ここが違う
   ========================================================================== */
/* clip-path を付けた要素自身の影は切り取られてしまうため、
   背景と矢印形状は ::before に持たせ、親に filter: drop-shadow() をかけています */
.cs-point {
  --cs-point-arrow: 63.2px;
  position: relative;
  z-index: 1; /* 影を次のセクションより前面に出す */
  isolation: isolate;
  padding: 50.1px 0 128.7px;
  filter: drop-shadow(0 7px 16.7px rgba(0, 0, 0, .19));
}
.cs-point::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cs-bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cs-point-arrow)), 50% 100%, 0 calc(100% - var(--cs-point-arrow)));
}
.cs-point__title {
  position: relative;
  max-width: 435.7px;
  margin: 0 auto;
  font-family: var(--cs-serif);
  text-align: center;
  line-height: 1.3;
}
/* 左右の斜線（長さ・角度・位置はデザインから実測） */
.cs-point__title::before,
.cs-point__title::after {
  content: "";
  position: absolute;
  top: 50.3px;
  width: 3.2px;
  height: 87.5px;
  border-radius: 1.6px; /* 線の端は丸（デザイン通り） */
  background: var(--cs-primary);
}
.cs-point__title::before { left: -12.65px; transform: rotate(-17.3deg); }
.cs-point__title::after { right: -12.25px; transform: rotate(17.3deg); }
.cs-point__title-main {
  display: block;
  color: var(--cs-primary);
  font-weight: 700;
  font-size: 80px;
  letter-spacing: .02em;
  line-height: 1.23;
}
.cs-point__title-main em { font-style: normal; font-size: .7em; }
.cs-point__title-sub {
  display: block;
  margin-top: .7px;
  font-weight: 700;
  font-size: 29.5px;
  letter-spacing: .04em;
}
.cs-point__item { margin-top: 44px; }
.cs-point__item:first-of-type { margin-top: 40.6px; }
.cs-point__tag {
  position: relative;
  display: table;
  margin: 0 auto;
  padding: 2.15px 11.8px;
  border-radius: 6.4px;
  background: var(--cs-primary);
  color: #fff;
  font-family: var(--cs-serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: .02em;
  line-height: 1.5;
}
.cs-point__tag::after { /* 下向き三角：タグの下端から始める */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-style: solid;
  border-color: var(--cs-primary) transparent transparent;
  border-width: 9.5px 6px 0; /* 幅12px・高さ9.5px（デザイン実測） */
  transform: translateX(-50%);
}
.cs-point__heading {
  margin-top: 18.1px;
  color: var(--cs-primary);
  font-family: var(--cs-serif);
  font-weight: 700;
  font-size: 31px;
  line-height: 1.29;
  letter-spacing: -.02em;
  text-align: center;
}
.cs-point__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 10px;
}
.cs-point__text {
  font-family: var(--cs-serif);
  font-size: 15.5px;
  line-height: 1.6;
  text-align: justify;
  letter-spacing: .01em;
}
/* デザインと同じ位置で改行させるための、ごく小さな字詰め（約0.3px／字） */
.cs-point__text .cs-point__fit { letter-spacing: -.02em; }

/* ==========================================================================
   こんな方へおすすめ
   ========================================================================== */
.cs-recommend { padding: 49.6px 0 49.7px; } /* 矢印の先端から見出しまでの余白 */
.cs-recommend__wrap {
  position: relative;
  max-width: 484px; /* 見出し帯の幅＝ボックス幅 */
  margin: 0 auto;
}
.cs-recommend__title {
  width: 100%;
  padding: 2.8px 12.8px;
  line-height: 1.5;
  border-radius: 999px;
  background: var(--cs-primary-soft);
  color: #fff;
  font-family: var(--cs-serif);
  font-weight: 500;
  font-size: 23.5px;
  letter-spacing: .02em;
  text-align: center;
}
.cs-recommend__list { margin-top: 6.4px; padding-right: 0; }
.cs-recommend__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6.55px 0 6.55px 83.3px;
  border-bottom: 1.5px dashed #e3b4a5;
  color: var(--cs-primary);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.5;
}
.cs-recommend__list li:last-child { border-bottom: 0; }
.cs-recommend__list svg { flex-shrink: 0; width: 17.9px; height: 17.9px; --cs-check-box: #7b7b7b; } /* 四角はグレー、チェックは文字色 */
/* イラストは見出し帯の上に重ねる（頭が帯にかかるデザイン） */
.cs-recommend__person {
  position: absolute;
  z-index: 2;
  top: 27.8px;
  right: -77.2px;
  width: 181.3px;
}

/* ==========================================================================
   共通ユーティリティ（追加）
   ========================================================================== */
.cs-lp .cs-inner--narrow { max-width: calc(538px + 25.6px); } /* Q&A・お客様の声は本文幅538px */

/* ==========================================================================
   よくあるご質問 Q&A（追加）
   ========================================================================== */
.cs-qa {
  padding-bottom: 44.2px;
  background: var(--cs-bg);
}
/* 見出し：セクション上端で切れた円。円は ::before に描き、見出し自体で切り抜く */
.cs-qa__title {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 320px;
  max-width: 100%;
  height: 124.9px;
  margin: 0 auto;
  padding-bottom: 23.3px;
  overflow: hidden;
  color: #fff;
  font-family: var(--cs-serif);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.cs-qa__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cs-primary);
}
.cs-qa__title-ja { font-size: 28px; letter-spacing: -.04em; }
.cs-qa__title-en { margin-top: -2.7px; font-size: 40.2px; letter-spacing: .02em; line-height: 1.1; }
.cs-qa__title-en small { font-size: 27px; }

.cs-qa__list { margin-top: 13.1px; margin-left: -2px; }
.cs-qa__item + .cs-qa__item {
  margin-top: 30.8px;
  padding-top: 26.6px;
  border-top: 1px solid #d0a499;
}
.cs-qa__q,
.cs-qa__a {
  display: grid;
  grid-template-columns: 43.4px 1fr;
  gap: 9.5px;
}
.cs-qa__q {
  align-items: center;
  color: var(--cs-primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.04em;
}
.cs-qa__a {
  align-items: start;
  margin-top: 16.3px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: -.05em;
  text-align: justify;
}
.cs-qa__badge {
  display: grid;
  place-items: center;
  height: 39.7px;
  border-radius: 9px;
  font-family: var(--cs-serif);
  font-size: 21.8px;
  font-weight: 500;
  line-height: 1;
}
.cs-qa__q .cs-qa__badge { background: var(--cs-primary); color: #fff; }
.cs-qa__a .cs-qa__badge { background: #fff; color: var(--cs-primary); }

/* ==========================================================================
   お客様の声（追加）
   ========================================================================== */
.cs-voice {
  padding: 44.9px 0 54.6px;
  background: #fff;
}
.cs-voice__head { position: relative; text-align: center; }
/* 注記：吹き出し線の右下。下の要素の位置を変えないよう重ねて配置 */
.cs-voice__note {
  position: absolute;
  right: 0;
  top: 84.6px;
  font-size: 11.2px;
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: 1.4;
  white-space: nowrap;
}
.cs-voice__en {
  font-family: var(--cs-serif);
  font-size: 16.8px;
  letter-spacing: .24em;
  text-indent: .24em;
  line-height: 1.18;
}
.cs-voice__title {
  margin-top: 2.6px;
  color: var(--cs-primary);
  font-family: var(--cs-serif);
  font-weight: 700;
  font-size: 27.5px;
  letter-spacing: -.02em;
  line-height: 1.4;
}
/* 見出し下の吹き出し線：両端が見出しの高さまで上がるよう、上に重ねる */
.cs-voice__deco {
  display: block;
  width: 430.6px;
  max-width: 100%;
  height: auto;
  margin: -18px auto 0;
  color: var(--cs-primary);
}

.cs-voice__list {
  display: grid;
  gap: 43px;
  margin-top: 31.9px;
}
.cs-voice__item {
  display: grid;
  grid-template-columns: 94.8px 1fr;
  gap: 22.4px;
  align-items: start;
}
.cs-voice__person {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.34;
  text-align: center;
}
.cs-voice__person img {
  width: 100%;
  margin-bottom: 2.7px;
  margin-top: 2.4px;
}
.cs-voice__heading {
  padding-bottom: 6.4px;
  border-bottom: 2px dotted #d7a594;
  color: var(--cs-primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.03em;
}
.cs-voice__text {
  margin-top: 5.1px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.56;
  text-align: justify;
}

/* ==========================================================================
   併せ使いがおすすめ（追加）
   ========================================================================== */
.cs-combo {
  padding: 48.7px 0 23.3px; /* 下は次の価格エリアと背景が同色のため小さめ */
  background: var(--cs-bg);
}
/* 見出し枠：斜めの線が崩れないよう、SVGを縦横比固定で敷く */
.cs-combo__title {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 374.2px;
  max-width: 100%;
  aspect-ratio: 584 / 139;
  margin: 0 auto;
  color: var(--cs-primary);
  font-family: var(--cs-serif);
  font-weight: 500;
  font-size: 27.5px;
  letter-spacing: 0;
  line-height: 1;
  padding-bottom: 3px;
}
.cs-combo__title svg {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cs-combo__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10.3px;
  margin-top: 25.6px;
}
.cs-combo__card {
  display: flex;
  flex-direction: column;
  padding: 19.9px 19.2px 17.9px;
  border-radius: 9px;
  background: #fff;
}
.cs-combo__name {
  padding: 5.2px 12.8px 10.2px;
  border-radius: 9px;
  background: var(--cs-primary);
  color: #fff;
  font-family: var(--cs-serif);
  font-weight: 500;
  font-size: 19.5px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.cs-combo__name small { display: block; font-size: 15.3px; line-height: 1.08; }
.cs-combo__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 110.2px;
  gap: 7.3px;
  align-items: start;
  margin-top: 13.5px;
}
.cs-combo__catch { font-size: 14.5px; font-weight: 500; line-height: 1.45; letter-spacing: -.05em; }
.cs-combo__price-head {
  margin-top: 8.8px;
  border: 1.5px solid #3e3a39;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.38;
  text-align: center;
}
.cs-combo__price-head--teiki {
  margin-top: 3.8px;
  border-color: var(--cs-red);
  background: var(--cs-red);
  color: #fff;
}
.cs-combo__price {
  font-size: 17.8px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.cs-combo__price small { font-size: 14.8px; }
.cs-combo__price .cs-combo__tax { font-size: 12.1px; font-weight: 500; }
.cs-combo__price--teiki { color: var(--cs-red); font-size: 25px; line-height: 1.2; }
.cs-combo__photo img { width: 100%; border-radius: 3.8px; }
.cs-combo__btn { min-height: 29.2px; margin-top: 12.5px; font-size: 13px; letter-spacing: .15em; padding: 5.4px 10.3px; }

/* ==========================================================================
   商品情報
   ========================================================================== */
.cs-price--bottom { padding-bottom: 64.1px; }
.cs-spec {
  margin-top: 38.4px;
  padding: 15.4px 0;
  border-top: 1px solid #9e9e9f;
  border-bottom: 1px solid #9e9e9f;
}
.cs-spec__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 9px;
  align-items: start;
  padding: 2.6px 0;
  font-size: 13.5px;
  line-height: 1.42;
  letter-spacing: .04em;
}
.cs-spec__row dt {
  padding: 2px 9.8px;
  border-radius: 999px;
  background: var(--cs-label);
  color: #fff;
  font-size: 12.7px;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify; /* 3文字・4文字とも帯の幅いっぱいに均等割り（デザイン通り） */
}

/* ==========================================================================
   SP（709px以下）
   ========================================================================== */
.cs-price__detail { padding-top: 8.5px; }
.cs-price__row--normal { padding: 11.5px 0 9.5px; }
.cs-point__item:nth-of-type(3) .cs-point__body figure { margin-top: -5.6px; }
.cs-combo__photo { margin-top: 4.4px; }
.cs-point__item:nth-of-type(3) .cs-point__body img { aspect-ratio: 297 / 200; object-fit: cover; object-position: top; }
.cs-hero__title sup { font-size: 29.4px; }
.cs-sec-title sup { font-size: 23.5px; }
.cs-point__title-sub sup { font-size: 20.3px; }
.cs-combo__price--teiki small { font-size: 14.8px; }
.cs-price__row--normal .cs-price__qty { line-height: 1.2; padding: 2.6px 6.4px; }

@media (max-width: 709px) {
  .cs-point__text .cs-point__fit { letter-spacing: inherit; }
  .cs-voice__note { position: static; margin-top: 6px; font-size: 10px; letter-spacing: .02em; text-align: right; white-space: normal; }
  .cs-hero__title sup, .cs-sec-title sup, .cs-point__title-sub sup { font-size: .4em; }
  .cs-hero__en small { font-size: 11px; }
  .cs-combo__price--teiki small { font-size: .75em; }
  .cs-combo__price small { font-size: .75em; }
  .cs-lp { font-size: 15px; }
  .cs-lp .cs-inner { padding: 0 16px; }
  .cs-lp .cs-sp { display: inline; }

  /* 字間：PC用のデザイン実測値（詰め）はSPの小さい文字では詰まりすぎるため標準に戻す */
  .cs-material__heading, .cs-material__text, .cs-material__badge,
  .cs-point__tag, .cs-point__heading, .cs-point__text,
  .cs-recommend__title, .cs-recommend__list li,
  .cs-qa__title-ja, .cs-qa__q, .cs-qa__a,
  .cs-voice__title, .cs-voice__heading,
  .cs-combo__title, .cs-combo__name, .cs-combo__catch,
  .cs-spec__row, .cs-price__qty { letter-spacing: .02em; }

  /* ヒーロー */
  .cs-hero__catch { padding: 16px 12px; font-size: 17px; letter-spacing: .06em; }
  .cs-hero__band { padding: 28px 16px 30px; }
  .cs-hero__title { font-size: 38px; }
  .cs-hero__en { font-size: 25px; }
  .cs-hero__en small { font-size: 11px; }
  .cs-hero__tags { gap: 8px; margin-top: 16px; }
  .cs-hero__tags li { min-width: 0; flex: 1 1 40%; max-width: 180px; padding: 3px 12px; font-size: 16px; }

  /* 価格 */
  .cs-price { padding: 40px 0 44px; }
  .cs-price__box { grid-template-columns: 1fr; gap: 16px; }
  .cs-price__photo { width: 56%; max-width: 220px; margin: 0 auto; }
  .cs-price__detail { padding-top: 0; }
  .cs-price__photo { margin-left: auto; }
  .cs-price__head { font-size: 16px; }
  .cs-price__row {
    grid-template-columns: auto 1fr auto;
    gap: 10px 8px;
    padding: 14px 0 16px;
  }
  .cs-price__qty { min-width: 70px; padding: 4px 6px; font-size: 14px; }
  .cs-price__num { font-size: 38px; }
  .cs-price__tax { font-size: 9px; }
  .cs-price__save { width: 66px; min-height: 0; margin-right: 0; padding: 4px 2px; font-size: 11px; }
  .cs-price__row--normal { padding: 14px 0 16px; }
  .cs-price__save b { font-size: 16px; }
  .cs-price__save b small { font-size: 11px; }
  .cs-price__row--normal .cs-price__btn,
  .cs-price__btn { grid-column: 1 / -1; }
  .cs-btn { width: 100%; min-height: 58px; font-size: 18px; }
  .cs-btn--teiki { font-size: 17px; }
  .cs-btn svg { width: 24px; height: 24px; }
  .cs-price__banner { margin-top: 28px; }

  /* 見出し */
  .cs-sec-title { font-size: 23px; }

  /* 厳選素材 */
  .cs-material { padding: 48px 0 56px; }
  .cs-material__list { gap: 28px; margin-top: 28px; }
  .cs-material__item,
  .cs-material__item--reverse {
    --cs-card-radius: 16px;
    grid-template-columns: 1fr;
    min-height: 0;
    box-shadow: 0 0 12px rgba(0, 0, 0, .16);
  }
  .cs-material__photo,
  .cs-material__item--reverse .cs-material__photo {
    order: 0;
    height: 190px;
    border-radius: var(--cs-card-radius) var(--cs-card-radius) 0 0;
  }
  .cs-material__photo img { object-position: center 40%; }
  .cs-material__body,
  .cs-material__item--reverse .cs-material__body { padding: 20px 18px 24px; margin-right: 0; }
  .cs-material__label { min-width: 0; padding: 2px 16px; border-radius: 8px; font-size: 18px; letter-spacing: .04em; }
  .cs-material__heading { margin-top: 12px; font-size: 19px; white-space: normal; }
  .cs-material__text { font-size: 14.5px; }
  .cs-material__badge {
    top: -14px;
    right: -8px;
    width: 92px;
    height: 92px;
    font-size: 14px;
  }

  /* ここが違う */
  .cs-point {
    --cs-point-arrow: 44px;
    padding: 40px 0 90px;
    filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .18));
  }
  .cs-point__title::before,
  .cs-point__title::after { top: 14px; width: 2px; height: 72px; }
  .cs-point__title::before { left: 4px; }
  .cs-point__title::after { right: 4px; }
  .cs-point__title-main { font-size: 48px; letter-spacing: .08em; }
  .cs-point__title-sub { font-size: 19px; }
  .cs-point__item { margin-top: 56px; }
  .cs-point__item:first-of-type { margin-top: 44px; }
  .cs-point__tag { padding: 3px 16px; font-size: 18px; }
  .cs-point__tag::after { border-width: 10px 7px 0; }
  .cs-point__heading { margin-top: 22px; font-size: 20px; letter-spacing: .02em; }
  .cs-point__body { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
  .cs-point__item:nth-of-type(3) .cs-point__body figure { margin-top: 0; }
  .cs-point__item:nth-of-type(3) .cs-point__body img { aspect-ratio: auto; }
  .cs-point__text { font-size: 15px; line-height: 1.9; }

  /* おすすめ */
  .cs-recommend { padding: 40px 0 52px; }
  .cs-recommend__title { font-size: 19px; padding: 6px 12px; }
  .cs-recommend__list { padding-right: 96px; }
  .cs-recommend__list li { gap: 8px; padding: 10px 0 10px 4px; font-size: 16px; }
  .cs-recommend__list svg { width: 20px; height: 20px; }
  .cs-recommend__person { top: 22px; right: -10px; width: 128px; }

  /* Q&A（追加） */
  .cs-lp .cs-pc { display: none; }
  .cs-qa { padding-bottom: 44px; }
  .cs-qa__title { width: 300px; height: 124px; padding-bottom: 18px; }
  .cs-qa__title-ja { font-size: 20px; }
  .cs-qa__title-en { margin-top: 2px; font-size: 36px; }
  .cs-qa__list { margin-top: 24px; }
  .cs-qa__item + .cs-qa__item { margin-top: 28px; padding-top: 32px; }
  .cs-qa__q,
  .cs-qa__a { grid-template-columns: 40px 1fr; gap: 12px; }
  .cs-qa__badge { height: 38px; border-radius: 9px; font-size: 22px; }
  .cs-qa__q { font-size: 17px; line-height: 1.5; }
  .cs-qa__a { margin-top: 16px; font-size: 14.5px; line-height: 1.9; }
  .cs-qa__a p { padding-top: 4px; }

  /* お客様の声（追加） */
  .cs-voice { padding: 44px 0 52px; }
  .cs-voice__en { font-size: 14px; }
  .cs-voice__title { font-size: 20px; }
  .cs-voice__deco { margin-top: -14px; }
  .cs-voice__list { gap: 36px; margin-top: 32px; }
  .cs-voice__item { grid-template-columns: 76px 1fr; gap: 14px; }
  .cs-voice__person { font-size: 12px; line-height: 1.5; }
  .cs-voice__person img { margin: 0 0 6px; }
  .cs-voice__person { line-height: 1.5; }
  .cs-qa__list { margin-left: 0; }
  .cs-voice__heading { padding-bottom: 8px; font-size: 16px; line-height: 1.5; }
  .cs-voice__text { margin-top: 10px; font-size: 14px; }

  /* 併せ使い（追加） */
  .cs-combo { padding: 44px 0 4px; }
  .cs-combo__title { font-size: 22px; }
  .cs-combo__list { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .cs-combo__card { padding: 18px 16px 20px; border-radius: 12px; }
  .cs-combo__name { padding: 8px 14px; border-radius: 10px; font-size: 19px; }
  .cs-combo__name small { font-size: 14px; }
  .cs-combo__body { grid-template-columns: 1fr 124px; gap: 12px; margin-top: 16px; }
  .cs-combo__photo { margin-top: 0; }
  .cs-combo__catch { font-size: 15px; }
  .cs-combo__price-head { margin-top: 12px; font-size: 14px; }
  .cs-combo__price { font-size: 22px; }
  .cs-combo__price .cs-combo__tax { font-size: 12px; }
  .cs-combo__price--teiki { font-size: 28px; }
  .cs-combo__btn { min-height: 52px; margin-top: 16px; font-size: 17px; }

  /* 商品情報 */
  .cs-price--bottom { padding-bottom: 56px; }
  .cs-spec { margin-top: 36px; padding: 18px 0; }
  .cs-spec__row { grid-template-columns: 1fr; gap: 4px; padding: 6px 0; font-size: 14px; }
  .cs-spec__row dt { width: 96px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-lp * { transition: none !important; }
}