@charset "UTF-8";

/* ============================================
   紙らくパック ブランドLP 独自スタイル
   scope: .kami-lp
   base: SP 375px → vw変換（PC 768px以上で切替）
   ============================================ */

/* --------------------------------------------
   0. ローカル/staging 保険リセット
      本番は /common/css/style.css が body margin=0 を設定するが、
      ローカル配信時は /common/ が404 → body margin 8px が露出。
      両環境で安全な無害リセットを先頭に置く。
   -------------------------------------------- */
html, body { margin: 0; padding: 0; }

/* --------------------------------------------
   1. Design Tokens
   -------------------------------------------- */
.kami-lp {
  /* Color: brand green（0812デザインより仮設定・P1でSVG厳密確認後調整） */
  --c-green-primary: #007c58;
  --c-green-dark: #0f4b34;
  --c-green-mid: #2d8659;
  --c-green-light: #e6f1ec;
  --c-green-shop: #3aa050;

  /* Color: neutrals & accents */
  --c-cream: #f7f2e0;
  --c-cream-soft: #faf8f2;
  --c-orange: #f2a13c;
  --c-yellow: #f5d84f;
  --c-pink-cp: #f5c8d0;
  --c-text: #2b2b2b;
  --c-text-mute: #6b6b6b;
  --c-white: #ffffff;
  --c-line: #e5e0d0;
  --c-black: #000000;

  /* Color: 追加抽出 (複数箇所使用の hex を変数化) */
  --c-green-fresh: #005e3e;      /* fresh-block bg */
  --c-green-eco: #e7f4ed;        /* eco-block bg */
  --c-green-heading: #008323;    /* headings/titles */
  --c-green-accent: #009c37;     /* accents/eyebrows */
  --c-green-border: #007028;     /* subtle borders (dashed など) */
  --c-brown-fv: #9d784c;         /* FV drop-shadow */
  --c-grey: #666666;             /* secondary text */
  --c-yellow-bright: #ffe100;    /* accent yellow */
  --c-yellow-marker: #fff100;    /* h3 白マーカーの黄 */
  --c-magenta-cp: #a83a5c;       /* cp-block title/text */

  /* Typography */
  --ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --ff-jp-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", var(--ff-jp);
  --ff-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "Serif", serif;
  --ff-en: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* SP基準: 375px幅→100vw. 375基準pxをvw化する乗数 */
  --sp-unit: calc(100vw / 375);

  /* PC基準: 1440pxアートボードのpxをvw化する乗数（1440以下は縮小追従・1440以上は固定=キャップB） */
  --pc-unit: min(1px, calc(100vw / 1440));
  /* PC基準・キャップなし: 1440以上でもウィンドウ幅に追従して拡大（FV等の全域スケール要素用） */
  --pc-unit-fluid: calc(100vw / 1440);

  /* Layout */
  --content-max: 750px; /* SP版最大想定幅（超えたらPCブレークまでセンター寄せ） */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fade: 0.8s;
}

/* --------------------------------------------
   2. Reset & Base (scoped)
   -------------------------------------------- */
.kami-lp,
.kami-lp * {
  box-sizing: border-box;
}

.kami-lp {
  font-family: var(--ff-jp);
  color: var(--c-text);
  line-height: 1.7;
  font-size: calc(15 * var(--sp-unit));
  font-weight: var(--fw-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.kami-lp img,
.kami-lp video,
.kami-lp svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.kami-lp p,
.kami-lp h1,
.kami-lp h2,
.kami-lp h3,
.kami-lp h4,
.kami-lp ul,
.kami-lp ol,
.kami-lp figure {
  margin: 0;
  padding: 0;
}

.kami-lp ul,
.kami-lp ol {
  list-style: none;
}

.kami-lp a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------
   3. Utilities
   -------------------------------------------- */
.kami-lp .u-container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 calc(17.5 * var(--sp-unit));
}

/* ブランドキーワード「らく」が独立行にならないよう改行制御 */
.kami-lp .u-nobr {
  display: inline-block;
  white-space: nowrap;
}

/* SP のみ表示（PC で非表示）／主に <br class="u-sp"> の SP 限定改行に使用 */
.kami-lp .u-sp { display: inline; }
@media (min-width: 768px) {
  .kami-lp .u-sp { display: none; }
}

/* PC のみ表示（SP で非表示）／主に <br class="u-pc"> の PC 限定改行に使用 */
.kami-lp .u-pc { display: none; }
@media (min-width: 768px) {
  .kami-lp .u-pc { display: inline; }
}

/* IntersectionObserver 用の共通フェードイン */
.kami-lp .js-fade-in {
  opacity: 0;
  transform: translateY(calc(24 * var(--sp-unit)));
  transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out);
  will-change: opacity, transform;
}

.kami-lp .js-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* reduced-motion 尊重 */
@media (prefers-reduced-motion: reduce) {
  .kami-lp .js-fade-in,
  .kami-lp .js-fade-in.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------
   4. PC切替（768px以上）
     PC版はJOYL支給テンプレ準拠でセンター固定寄せ
   -------------------------------------------- */
@media (min-width: 768px) {
  .kami-lp {
    font-size: 16px;
    /* PC時は絶対px基準にリセット（SPの vw から解放） */
    --sp-unit: 1px;
  }

  .kami-lp .u-container {
    max-width: 1200px;
    padding: 0;
  }
}

/* --------------------------------------------
   5. Sections
   -------------------------------------------- */

/* ============================================
   LP独自ヘッダー
   wrapper 直下(.kami-lp scope外) に配置し sticky を根本有効化
   SP=ハンバーガー展開でdrawer overlay ／ PC=ナビ横並び常時表示
   ============================================ */
/* SP ハンバーガードロワー(.kami-header__nav)が閉じた状態で fixed+translateX(100%) で
   ビューポート右外へ幾何学的に張り出し、水平スクロール発生 → html/body で切る
   ⚠ overflow-x:hidden(+overflow-y:visible)はブラウザが overflow-y を auto にupgradeして
     scroll container化 → sticky header の scroll ancestor が body になり挙動破壊
     → overflow-x:clip(scroll container化しない)で html/body 両方切る */
html,
body {
  overflow-x: clip;
}

/* common CSS で .wrapper に overflow:hidden が付いている可能性があり sticky header を壊す
   → overflow: clip で上書き（scroll container化せず横はみ出しだけ切る） */
.wrapper {
  overflow: clip;
}

/* ハッシュリンククリック時のスムーズスクロール(scroll-margin-top と併用でヘッダー分ズレて着地)
   prefers-reduced-motion 尊重: motion 抑制時は瞬時ジャンプにフォールバック */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.kami-header {
  display: block;
  position: relative;
  z-index: 1;
  height: 17.0667vw; /* SP=64sp基準 可変 (64/3.75vw) */
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(15, 75, 52, 0.08);
}

.kami-header__inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kami-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* SVGロゴ SP=104sp基準 27.7333vw 可変／PC=172px 固定・高さauto(viewBox 172×50.38 比率) */
.kami-header__logo img {
  display: block;
  width: 27.7333vw;
  height: auto;
}

/* SP: ハンバーガーtoggle（緑3本線・20×15sp 可変・両端pill） */
.kami-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 5.3333vw;  /* 20sp (20/3.75) */
  height: 4vw;      /* 15sp (15/3.75) */
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.kami-header__toggle-bar {
  display: block;
  width: 100%;
  height: 0.5333vw; /* 2sp */
  background: var(--c-green-heading, #008323);
  border-radius: 999px; /* 両端pill */
  transition: transform 0.25s ease-out, opacity 0.2s ease-out;
}
/* 展開時: ハンバーガー→×アニメ (bar中心間距離=gap+barH=4.5+2=6.5sp=1.7333vw) */
.kami-header__toggle[aria-expanded="true"] .kami-header__toggle-bar:nth-child(1) {
  transform: translateY(1.7333vw) rotate(45deg);
}
.kami-header__toggle[aria-expanded="true"] .kami-header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.kami-header__toggle[aria-expanded="true"] .kami-header__toggle-bar:nth-child(3) {
  transform: translateY(-1.7333vw) rotate(-45deg);
}

/* SP nav: header下のdrawer overlay（右→左 slide-in・headerは常時可視） */
.kami-header__nav {
  position: fixed;
  top: 17.0667vw; /* SP header高さ相当(64sp可変) */
  right: 0;
  width: min(88vw, 360px);
  height: calc(100vh - 17.0667vw);
  height: calc(100dvh - 17.0667vw);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
  z-index: 1;
}
.kami-header__toggle[aria-expanded="true"] + .kami-header__nav {
  transform: translateX(0);
}
.kami-header__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kami-header__list a {
  display: block;
  padding: 14px 8px;
  font-size: 4.2667vw; /* 16sp 可変 */
  font-weight: 500;
  color: var(--c-green-heading, #008323);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 131, 35, 0.12);
  transition: color 0.2s ease-out, background 0.2s ease-out;
}
.kami-header__list a:hover,
.kami-header__list a:focus-visible {
  color: var(--c-green-primary, #007c58);
  background: rgba(0, 131, 35, 0.04);
}

/* reduced-motion 尊重: transition無効化 */
@media (prefers-reduced-motion: reduce) {
  .kami-header__nav,
  .kami-header__toggle-bar { transition: none; }
}

/* body スクロールロック（展開時 JS で付与） */
body.kami-nav-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .kami-header {
    height: 92px;
    box-sizing: border-box;
  }
  .kami-header__inner {
    max-width: none;
    height: 100%;
    padding: 0 50px;
    gap: 24px;
  }
  .kami-header__logo img {
    width: 172px;
    height: auto;
  }
  /* PC: ハンバーガー非表示 */
  .kami-header__toggle { display: none; }

  /* PC nav: overlay 解除→通常flex横並び */
  .kami-header__nav {
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    transform: none;
    box-shadow: none;
    overflow: visible;
    flex-shrink: 0;
  }
  .kami-header__list {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
  .kami-header__list a {
    display: inline-block;
    padding: 8px 2px;
    font-family: var(--ff-jp);
    font-size: 13px;
    font-weight: 500;
    line-height: 22.75px;
    color: var(--c-green-heading, #008323);
    border-bottom: 2px solid transparent;
  }
  .kami-header__list a:hover,
  .kami-header__list a:focus-visible {
    color: var(--c-green-primary, #007c58);
    background: transparent;
    border-bottom-color: var(--c-green-primary, #007c58);
  }
}

/* ============================================
   S1 FV
   ============================================ */
.kami-lp .fv {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ecece0;
  color: var(--c-text);
}

/* FV背景画像を <picture> で本文表示：画像自然アスペクトで高さ自動追従・全表示保証 */
.kami-lp .fv__bg {
  display: block;
  width: 100%;
}
.kami-lp .fv__bg img {
  display: block;
  width: 100%;
  height: auto;
}

.kami-lp .fv__inner {
  position: absolute;
  inset: 0;
  padding: calc(24 * var(--sp-unit)) calc(20 * var(--sp-unit));
}

.kami-lp .fv__catch {
  position: absolute;
  /* 画面最上部109 - SPヘッダー64 = FV基準top 45 */
  top: calc(45 * var(--sp-unit));
  left: calc(25 * var(--sp-unit));
  font-family: var(--ff-jp);
  font-weight: var(--fw-bold);
  /* line2 (もっとらくに。) base 29 / line1 は first-child で 28 上書き */
  font-size: calc(29 * var(--sp-unit));
  line-height: 1.35;
  /* トラッキング Illustrator 50 = 0.05em (h1全体) */
  letter-spacing: 0.05em;
  color: var(--c-white);
  /* Illustrator ドロップシャドウ準拠: 乗算100%/X2/Y2/ぼかし3/var(--c-brown-fv) */
  text-shadow: 2px 2px 3px var(--c-brown-fv);
  display: inline-block;
}

.kami-lp .fv__catch > span {
  display: block;
  background: none;
  padding: 0;
  margin-bottom: 0;
}

.kami-lp .fv__catch-small {
  font-size: calc(22 * var(--sp-unit));
}

/* line1 (料理の時間を、) base 28 / 「の」「を、」は catch-small で 22 */
.kami-lp .fv__catch-line:first-child {
  font-size: calc(28 * var(--sp-unit));
}

.kami-lp .fv__catch-emphasis {
  font-size: calc(42 * var(--sp-unit));
  color: var(--c-yellow-bright);
}

.kami-lp .fv__logo {
  position: absolute;
  /* 画面最上部215 - SPヘッダー64 = FV基準top 151 */
  top: calc(151 * var(--sp-unit));
  left: calc(25 * var(--sp-unit));
  width: calc(310 * var(--sp-unit));
  opacity: 0;
}

.kami-lp .fv__logo picture,
.kami-lp .fv__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.kami-lp .fv__logo.is-visible {
  animation:
    kv-logo-in 0.9s var(--ease-out) forwards,
    kv-logo-sway 4.8s ease-in-out 0.95s infinite;
}

@keyframes kv-logo-in {
  0%   { opacity: 0; transform: translate(-40%, 0) rotate(-6deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

@keyframes kv-logo-sway {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50%      { transform: translate(0, -2px) rotate(2deg); }
}

.kami-lp .fv__sub {
  position: absolute;
  /* 画面最上部325 - SPヘッダー64 = FV基準top 261 */
  top: calc(261 * var(--sp-unit));
  left: calc(159 * var(--sp-unit));
  font-family: var(--ff-jp);
  font-size: calc(14 * var(--sp-unit));
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  letter-spacing: 0.06em;
  /* Illustrator ドロップシャドウ準拠: 乗算80%/X1/Y1/ぼかし1/var(--c-brown-fv) */
  text-shadow: 1px 1px 1px rgba(157, 120, 76, 0.8);
}

.kami-lp .fv__illust {
  position: absolute;
  left: calc(12 * var(--sp-unit));
  bottom: calc(70 * var(--sp-unit));
  width: calc(72 * var(--sp-unit));
  height: calc(72 * var(--sp-unit));
  /* TODO: 人物イラスト差替 */
}

/* 上半円ドームCTA: FVセクション下端に貼付・矢印↓上+テキスト下+右上に✦装飾 */
.kami-lp .fv__cta {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--sp-unit));
  width: calc(160 * var(--sp-unit));
  height: calc(80 * var(--sp-unit));
  padding: calc(6 * var(--sp-unit)) 0 0;
  background: #008f20;
  color: var(--c-white);
  /* 上半円ドーム: 上左右2隅を大きな楕円で丸め・下は直線 */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  font-family: var(--ff-jp);
  font-size: calc(12 * var(--sp-unit));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 -2px 12px rgba(0, 143, 32, 0.28);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.kami-lp .fv__cta:hover,
.kami-lp .fv__cta:focus-visible {
  /* 半円本体は動かさず影のみ強調 */
  box-shadow: 0 -4px 18px rgba(0, 143, 32, 0.4);
}

/* hover時はテキストとsparkleのみ上に持ち上げる（arrowは常時bounceアニメ中のため除外） */
.kami-lp .fv__cta-text,
.kami-lp .fv__cta-sparkle {
  transition: transform 0.25s var(--ease-out);
}
.kami-lp .fv__cta:hover .fv__cta-text,
.kami-lp .fv__cta:hover .fv__cta-sparkle,
.kami-lp .fv__cta:focus-visible .fv__cta-text,
.kami-lp .fv__cta:focus-visible .fv__cta-sparkle {
  transform: translateY(-3px);
}

.kami-lp .fv__cta-arrow {
  display: inline-block;
  font-size: calc(18 * var(--sp-unit));
  line-height: 1;
  animation: fv-arrow-bounce 1.6s ease-in-out infinite;
}

.kami-lp .fv__cta-sparkle {
  position: absolute;
  top: calc(27 * var(--sp-unit));
  right: calc(27 * var(--sp-unit));
  color: var(--c-yellow-bright);
  font-size: calc(12 * var(--sp-unit));
  line-height: 1;
  pointer-events: none;
}

@keyframes fv-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@media (min-width: 768px) {
  /* PC: FV高さは <picture> の画像自然アスペクトで自動追従（background指定不要） */
  .kami-lp .fv__inner {
    padding: calc(48 * var(--pc-unit)) calc(60 * var(--pc-unit));
  }
  /* PC のみ: catchコピー を白+ゴールド強調で再構築（SP の黄色下線は打ち消し）
     ⚠ FV内h1/ロゴは 1440以上でもウィンドウ幅に追従（pc-unit-fluid使用） */
  .kami-lp .fv__catch {
    /* 画面最上部190 - PCヘッダー92 = FV基準top 98 */
    top: calc(98 * var(--pc-unit-fluid));
    left: calc(90 * var(--pc-unit-fluid));
    display: block;
    font-size: calc(60 * var(--pc-unit-fluid));
    line-height: 1.25;
    /* トラッキング Illustrator 40 = 0.04em (h1全体) */
    letter-spacing: 0.04em;
    color: var(--c-white);
    /* Illustrator ドロップシャドウ準拠: 乗算100%/X2/Y2/ぼかし3/var(--c-brown-fv) */
    text-shadow: 2px 2px 3px var(--c-brown-fv);
  }
  .kami-lp .fv__catch span {
    display: inline;
    background: none;
    padding: 0;
    margin: 0;
  }
  .kami-lp .fv__catch .fv__catch-line { display: block; }
  /* line1 (料理の時間を、) base 58 / 「の」「を、」は catch-small で 44 */
  .kami-lp .fv__catch-line:first-child { font-size: calc(58 * var(--pc-unit-fluid)); }
  .kami-lp .fv__catch-small { font-size: calc(44 * var(--pc-unit-fluid)); }
  .kami-lp .fv__catch-emphasis {
    font-size: calc(86 * var(--pc-unit-fluid));
    color: var(--c-yellow-bright);
  }
  /* PC: KVロゴ 左寄せ・catch下配置（画面最上部388 - PCヘッダー92 = FV基準top 296）
     アニメは SP と共通（keyframes は translate(0, …) 基準に統一済） */
  .kami-lp .fv__logo {
    top: calc(296 * var(--pc-unit-fluid));
    left: calc(90 * var(--pc-unit-fluid));
    width: calc(510 * var(--pc-unit-fluid));
  }
  /* PC: サブコピー 左寄せ・logo下配置 / h1/ロゴ同様 pc-unit-fluid で1440以上追従
     画面最上部568 - PCヘッダー92 = FV基準top 476 */
  .kami-lp .fv__sub {
    top: calc(476 * var(--pc-unit-fluid));
    left: calc(90 * var(--pc-unit-fluid));
    font-size: calc(22 * var(--pc-unit-fluid));
    color: var(--c-white);
    /* Illustrator ドロップシャドウ準拠: 乗算80%/X1/Y1/ぼかし1/var(--c-brown-fv) */
    text-shadow: 1px 1px 1px rgba(157, 120, 76, 0.8);
  }
  .kami-lp .fv__illust {
    left: 40px; bottom: 100px;
    width: 120px; height: 120px;
  }
  .kami-lp .fv__cta {
    bottom: 0;
    width: 200px;
    height: 100px;
    padding: 0 0 0 0;
    font-size: 14px;
    gap: 12px;
  }
  .kami-lp .fv__cta-arrow { font-size: 26px; }
  .kami-lp .fv__cta-sparkle {
    top: 40px;
    right: 35px;
    font-size: 18px;
  }
}

/* ============================================
   S2 全ラインナップ横スクロール帯
   ============================================ */
.kami-lp .lineup-band {
  /* scroller側 padding:8px 0 を差し引いて総高さ維持 */
  padding: calc(28 * var(--sp-unit) - 8px) 0 calc(20 * var(--sp-unit) - 8px);
  background: var(--c-white);
}

.kami-lp .lineup-band__label {
  text-align: center;
  font-family: var(--ff-jp);
  font-size: calc(14 * var(--sp-unit)); /* SP=14sp可変 */
  font-weight: var(--fw-medium);
  color: var(--c-green-accent);
  letter-spacing: 0.05em; /* Illustrator tracking 50 = 50/1000em */
  margin-bottom: calc(14 * var(--sp-unit));
}

/* Marquee 化: 13商品×2セット複製で右→左に無限流し
   scroll-snap/横スクロール廃止・overflow: hidden・-50% translateで完全ループ
   上下 padding 8px は hover translateY(-3px) の余白確保（section側で相殺済） */
.kami-lp .lineup-band__scroller {
  width: 100%;
  overflow: hidden;
  padding: 8px 0;
}

.kami-lp .lineup-band__list {
  display: flex;
  align-items: flex-end; /* bottleを底辺揃え(棚に並べた状態・サイズ差を可視化) */
  gap: calc(36 * var(--sp-unit)); /* SP=36sp可変・商品間隔3倍化(12→36) */
  padding: 0 calc(20 * var(--sp-unit));
  width: max-content;
  animation: kami-marquee 40s linear infinite;
  will-change: transform;
}

@keyframes kami-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* hoverで停止（読みたい商品を止められる） */
.kami-lp .lineup-band__scroller:hover .lineup-band__list,
.kami-lp .lineup-band__scroller:focus-within .lineup-band__list {
  animation-play-state: paused;
}

/* reduced-motion 尊重: 静止表示 */
@media (prefers-reduced-motion: reduce) {
  .kami-lp .lineup-band__list { animation: none; }
}

.kami-lp .lineup-band__item {
  flex-shrink: 0;
  width: calc(70 * var(--sp-unit)); /* SP=70sp可変(画像1x実寸相当) */
}

.kami-lp .lineup-band__link {
  display: block;
  transition: transform 0.25s var(--ease-out);
}
.kami-lp .lineup-band__link:hover,
.kami-lp .lineup-band__link:focus-visible {
  transform: translateY(-3px);
}

.kami-lp .lineup-band__item img {
  display: block;
  width: 100%;
  height: auto; /* 幅指定のみ・高さは画像アスペクト比で自然決定(300g/500g/700gのサイズ差可視化) */
}

@media (min-width: 768px) {
  /* scroller側 padding:8px 0 を差し引いて総高さ維持 */
  .kami-lp .lineup-band { padding: 32px 0 20px; }
  .kami-lp .lineup-band__label { font-size: 16px; margin-bottom: 20px; }
  .kami-lp .lineup-band__list { gap: 60px; padding: 0 40px; } /* SP同様3倍化(20→60) */
  .kami-lp .lineup-band__item { width: 70px; } /* 画像1x実寸 140/2 */
}

/* ============================================
   S3 6 REASONS 導入
   ============================================ */
.kami-lp .reasons-intro {
  padding: calc(56 * var(--sp-unit)) 0 calc(48 * var(--sp-unit));
  background: var(--c-cream-soft);
  position: relative;
}

.kami-lp .reasons-intro__inner {
  text-align: left;
  padding-bottom: calc(24 * var(--sp-unit));
  border-bottom: 1px dashed var(--c-green-border);
}

/* 白カード: 左テキスト+右イラストの2カラム構造 / SP=画面左端に密着（親.u-containerの左padding 24を負マージンで打ち消し） */
.kami-lp .reasons-intro__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
  width: calc(100% + 24 * var(--sp-unit));
  margin-left: calc(-24 * var(--sp-unit));
  background: var(--c-white);
  padding: calc(25 * var(--sp-unit));
  margin-bottom: calc(32 * var(--sp-unit));
}

/* 右下角に本のページを折り返した表現：2レイヤで再現
   ::before = 折り返しで下から覗く黄色（bottom-right三角・裏面色）
   ::after  = 折られたページのフラップ（top-left三角・紙表色+drop-shadowで浮かせる） */
.kami-lp .reasons-intro__card::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(30 * var(--sp-unit));
  height: calc(30 * var(--sp-unit));
  background: linear-gradient(-135deg, transparent 50%, #ffce00 50%);
  transform: rotate(90deg);
}
.kami-lp .reasons-intro__card::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(30 * var(--sp-unit));
  height: calc(30 * var(--sp-unit));
  /* フラップ側はセクション背景色(cream-soft var(--c-cream-soft))で「同じ紙の裏面が背景色と揃う」表現 */
  background: linear-gradient(-135deg, var(--c-cream-soft) 50%, transparent 50%);
  transform: rotate(90deg);
}

.kami-lp .reasons-intro__card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

/* 女性イラスト: SP=画面右端に密着（card右端の24sp外側=viewport右端）+ card上端から40sp上に飛び出し
   画像は2x書き出し運用のため表示サイズ=自然サイズ÷2 (SP 308→154 / PC 867→433 は別途)  */
.kami-lp .reasons-intro__card-illust {
  position: absolute;
  top: calc(-40 * var(--sp-unit));
  right: calc(-24 * var(--sp-unit));
  width: calc(154 * var(--sp-unit));
}

.kami-lp .reasons-intro__card-illust picture,
.kami-lp .reasons-intro__card-illust img {
  width: 100%;
  height: auto;
  display: block;
}

.kami-lp .reasons-intro__eyebrow,
.kami-lp .eco-block__eyebrow {
  font-family: var(--ff-jp);
  font-size: calc(11 * var(--sp-unit));
  font-weight: var(--fw-medium);
  /* トラッキング Illustrator 320 = 0.32em */
  letter-spacing: 0.32em;
  color: var(--c-green-accent);
  margin-bottom: calc(10 * var(--sp-unit));
}

.kami-lp .reasons-intro__title {
  font-family: var(--ff-jp);
  font-size: calc(32 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 39px @ font-size 32px = 1.21875（比率保持でPC継承時も自動追従） */
  line-height: 1.21875;
  color: var(--c-green-heading);
  letter-spacing: 0.02em;
  margin-bottom: calc(12 * var(--sp-unit));
}

.kami-lp .reasons-intro__lead {
  font-family: var(--ff-jp);
  font-size: calc(14 * var(--sp-unit));
  font-weight: var(--fw-medium);
  color: var(--c-grey);
  margin-bottom: 0;
}

.kami-lp .reasons-intro__body {
  margin-bottom: calc(28 * var(--sp-unit));
}

.kami-lp .reasons-intro__accent {
  font-family: var(--ff-jp);
  color: var(--c-green-accent);
  font-weight: var(--fw-bold);
  font-size: calc(14 * var(--sp-unit));
  /* line-height 24 @ font-size 14 = 1.7143 */
  line-height: 1.7143;
  margin-bottom: calc(8 * var(--sp-unit));
}

.kami-lp .reasons-intro__desc {
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);
  font-size: calc(14 * var(--sp-unit));
  /* line-height 24 @ font-size 14 = 1.7143 */
  line-height: 1.7143;
  color: var(--c-black);
}

.kami-lp .reasons-icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(8 * var(--sp-unit));
  margin-top: calc(16 * var(--sp-unit));
}

.kami-lp .reasons-icons__item a {
  display: block;
  color: inherit;
  transition: transform 0.25s var(--ease-out);
}

.kami-lp .reasons-icons__item a:hover,
.kami-lp .reasons-icons__item a:focus-visible {
  transform: translateY(-3px);
}

.kami-lp .reasons-icons__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* 特許・意匠権表記 SP=100%幅・右揃え / PC=1100px・右揃え */
.kami-lp .reasons-intro__patent {
  width: 100%;
  text-align: right;
  margin-top: calc(12 * var(--sp-unit));
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);
  font-size: calc(9 * var(--sp-unit));
  /* line-height 12 @ font-size 9 = 1.3333 */
  line-height: 1.3333;
  color: var(--c-grey);
}

@media (min-width: 768px) {
  .kami-lp .reasons-intro { padding: 96px 0 80px; }
  .kami-lp .reasons-intro__card {
    /* PC=620幅・固定px（ここから下は可変しない）／SPの左viewport密着hackをリセット */
    width: 620px;
    margin-left: 0;
    gap: 32px;
    padding: 30px 50px;
    margin-bottom: 48px;
  }
  /* PCでも折り返し装飾を SP と同様に表示（黄色三角+フラップ） */
  .kami-lp .reasons-intro__card::before,
  .kami-lp .reasons-intro__card::after {
    width: 30px;
    height: 30px;
  }
  .kami-lp .reasons-intro__card-illust {
    top: 10px;
    right: -240px;
    width: 493.5px;
  }
  .kami-lp .reasons-intro__eyebrow,
  .kami-lp .eco-block__eyebrow { font-size: 12px; margin-bottom: 16px; }
  /* PC line-height 52px @ font-size 42px = 1.2381（比率保持） */
  .kami-lp .reasons-intro__title { font-size: 42px; line-height: 1.2381; margin-bottom: 20px; }
  .kami-lp .reasons-intro__lead { font-size: 18px; }
  /* PC line-height 32 @ font-size 16 = 2.0 */
  .kami-lp .reasons-intro__accent { font-size: 16px; line-height: 2.0; margin-bottom: 12px; }
  .kami-lp .reasons-intro__desc { font-size: 16px; line-height: 2.0; }
  /* PC=bodyブロック幅1100px（センター寄せ） */
  .kami-lp .reasons-intro__body { max-width: 1100px; margin-left: auto; margin-right: auto; }
  /* PC=6アイコン1行 / ul幅900px / li間15px / 画像自然サイズ 270×〜350 の 2x書き出し→表示135px */
  .kami-lp .reasons-icons {
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    max-width: 900px;
    margin: 32px auto 0;
  }
  .kami-lp .reasons-icons__item img {
    width: 135px;
    margin: 0 auto;
  }
  /* PC 特許・意匠権表記: 幅1100px・センター寄せ・右揃え */
  .kami-lp .reasons-intro__patent {
    max-width: 1100px;
    margin: 16px auto 0;
    font-size: 9px;
  }
}

/* ============================================
   S4-1〜S4-6 らくカード×6
   共通構造: 番号+タイトル+チェック行+メインビジュアル(動画loop)+説明
   S4-1のみスペック枠(細口/広口)を追加表示
   ============================================ */
.kami-lp .raku-block {
  padding: 0 0 calc(32 * var(--sp-unit));
  background: var(--c-cream-soft);
  /* 日本語約物（「」、。等）の余白詰め */
  font-feature-settings: "palt" 1;
}
/* raku-block 内container 最下に破線（reasons-intro と同じパターン） */
.kami-lp .raku-block > .u-container {
  padding-bottom: calc(24 * var(--sp-unit));
  border-bottom: 1px dashed var(--c-green-border);
}

.kami-lp .raku-card {
  position: relative;
  padding: calc(32 * var(--sp-unit)) 0 calc(40 * var(--sp-unit));
  /* sticky header 分オフセット(SP=64sp+20 余白 / PC=92px+20 は media で上書き) */
  scroll-margin-top: calc(17.0667vw + 20px);
}

.kami-lp .raku-card:first-child {
  padding-top: calc(8 * var(--sp-unit));
}

.kami-lp .raku-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10 * var(--sp-unit));
  margin-bottom: calc(12 * var(--sp-unit));
}

/* 番号は title{N}.png 画像に置換（>>アイコン+数字を1枚で描画） */
.kami-lp .raku-card__num {
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}
.kami-lp .raku-card__num picture,
.kami-lp .raku-card__num img {
  display: block;
  height: auto;
}
/* 幅 = 自然px÷3 (SP・可変vw) / ÷2 (PC・固定px) を card ごとに個別指定
   自然サイズ: 1=167 2=197 3=196 4=198 5=196 6=197 */
/* 3番目カードh3のみ letter-spacing微調整 */
#raku-03 .raku-card__title { letter-spacing: -0.0001em; }

#raku-01 .raku-card__num img { width: calc(167 / 3 * var(--sp-unit)); }
#raku-02 .raku-card__num img { width: calc(197 / 3 * var(--sp-unit)); }
#raku-03 .raku-card__num img { width: calc(196 / 3 * var(--sp-unit)); }
#raku-04 .raku-card__num img { width: calc(198 / 3 * var(--sp-unit)); }
#raku-05 .raku-card__num img { width: calc(196 / 3 * var(--sp-unit)); }
#raku-06 .raku-card__num img { width: calc(197 / 3 * var(--sp-unit)); }

.kami-lp .raku-card__title {
  font-family: var(--ff-jp);
  font-size: calc(22 * var(--sp-unit));
  font-weight: var(--fw-bold);
  color: var(--c-green-heading);
  /* line-height 34 @ font-size 22 = 1.5455 */
  line-height: 1.5455;
  letter-spacing: 0.02em;
  /* 白のマーカー（下から40%のみ白）・box-decoration-cloneで改行時に各行にマーカー */
  display: inline;
  background: linear-gradient(transparent 60%, var(--c-white) 60%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 2px;
}

.kami-lp .raku-card__check {
  font-family: var(--ff-jp);
  font-size: calc(14 * var(--sp-unit));
  font-weight: var(--fw-regular);
  color: var(--c-green-heading);
  margin-bottom: calc(16 * var(--sp-unit));
  /* アイコン14sp + 右余白1em(=1文字) */
  padding-left: calc(14 * var(--sp-unit) + 1em);
  position: relative;
  /* line-height 20 @ font-size 14 = 1.4286 */
  line-height: 1.4286;
}

/* check.png (自然45×40の2x書き出し) SP=14px幅・PCは media で22px上書き */
.kami-lp .raku-card__check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(14 * var(--sp-unit));
  /* 高さは自然アスペクト 40/45 = 0.889 */
  height: calc(14 * var(--sp-unit) * 40 / 45);
  background: url("/sp/kami/img/reasons/check.png") no-repeat center / contain;
}

.kami-lp .raku-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #dcdcdc;
  margin-bottom: calc(16 * var(--sp-unit));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.kami-lp .raku-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kami-lp .raku-card__spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: calc(16 * var(--sp-unit));
}

.kami-lp .raku-card__spec-col {
  background: var(--c-white);
  border-radius: 8px;
  padding: calc(12 * var(--sp-unit)) calc(10 * var(--sp-unit));
  text-align: center;
}

.kami-lp .raku-card__spec-label {
  font-family: var(--ff-jp);
  font-weight: var(--fw-semibold);
  font-size: calc(14 * var(--sp-unit));
  /* line-height 19 @ font-size 14 = 1.3571 */
  line-height: 1.3571;
  color: var(--c-green-accent);
  margin-bottom: calc(6 * var(--sp-unit));
  padding: calc(4 * var(--sp-unit)) calc(6 * var(--sp-unit));
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

/* spec-label 変種色は親 spec-col の背景色として適用（:has()で内部の label 変種を検出）
   gap:0で隣接するため、接する辺のborder-radiusを0に（外側だけ丸め） */
.kami-lp .raku-card__spec-col:has(.raku-card__spec-label._thin) {
  background: #f1f8f4;
  border-radius: 8px 0 0 8px;
}
.kami-lp .raku-card__spec-col:has(.raku-card__spec-label._wide) {
  background: #e2f2ea;
  border-radius: 0 8px 8px 0;
}


.kami-lp .raku-card__spec-use {
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);
  font-size: calc(12 * var(--sp-unit));
  /* line-height 14 @ font-size 12 = 1.1667 */
  line-height: 1.1667;
  color: var(--c-text);
}

.kami-lp .raku-card__desc {
  font-size: calc(14 * var(--sp-unit));
  line-height: 1.85;
  color: var(--c-text);
}

/* SP body: 白背景・角丸なし（PCは media query で角丸+padding上書き） */
.kami-lp .raku-card__body {
  background: var(--c-white);
  border-radius: 0;
  padding: calc(20 * var(--sp-unit));
}

/* body内illust: SPは非表示・PCで絶対配置 */
.kami-lp .raku-card__body-illust {
  display: none;
}
.kami-lp .raku-card__body-illust picture,
.kami-lp .raku-card__body-illust img {
  display: block;
  width: 100%;
  height: auto;
}

/* card 6 追加情報ブロック（左テキスト+右画像・SPは縦積み） */
.kami-lp .raku-card__extra {
  margin-top: calc(24 * var(--sp-unit));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(16 * var(--sp-unit));
}
.kami-lp .raku-card__extra-text {
  flex: 1 1 auto;
  min-width: 0;
}
.kami-lp .raku-card__extra-image {
  flex: 0 0 auto;
  width: calc(139 * var(--sp-unit));
}
.kami-lp .raku-card__extra-title {
  font-family: var(--ff-jp);
  font-weight: var(--fw-bold);
  font-size: calc(18 * var(--sp-unit));
  /* line-height 32 @ font-size 18 = 1.7778 */
  line-height: 1.7778;
  color: var(--c-green-heading);
  text-align: center;
  background: #e5f3e9;
  border-radius: 1em;
  margin: 0 0 calc(8 * var(--sp-unit));
}
.kami-lp .raku-card__extra-desc {
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(14 * var(--sp-unit));
  /* line-height 22 @ font-size 14 = 1.5714 */
  line-height: 1.5714;
  color: var(--c-green-border);
  margin: 0;
  text-align: center;
}
/* 1行目「ライト...をあてると」= 12sp / 内側「（スマートフォン等）」= 10sp */
.kami-lp .raku-card__extra-desc-lead {
  font-size: calc(12 * var(--sp-unit));
}
.kami-lp .raku-card__extra-desc-note {
  font-size: calc(10 * var(--sp-unit));
}
/* 「簡単に残量がわかります。」に黄マーカー（下から40%をvar(--c-yellow-marker)で塗り・改行時は行毎） */
.kami-lp .raku-card__extra-desc-mark {
  background: linear-gradient(transparent 60%, var(--c-yellow-marker) 60%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 2px;
}
.kami-lp .raku-card__extra-image picture,
.kami-lp .raku-card__extra-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 注釈テキスト（現状 #raku-03 のみ）: ※を左にハングインデント */
.kami-lp .raku-card__note {
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);
  font-size: calc(9 * var(--sp-unit));
  /* line-height 12 @ font-size 9 = 1.3333 */
  line-height: 1.3333;
  color: var(--c-grey);
  margin: 1em 0 0 0;
  /* ※ハングインデント: 1文字目(※)を左に出し、折返し行は1em内側に揃える */
  padding-left: 1em;
  text-indent: -1em;
}

@media (min-width: 768px) {
  .kami-lp .raku-block { padding: 0 0 56px; }
  .kami-lp .raku-card {
    padding: 56px 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading heading"
      "body    media";
    column-gap: 0;
    align-items: start;
    /* sticky header 92px + 20 余白 */
    scroll-margin-top: 112px;
  }
  .kami-lp .raku-card:first-child { padding-top: 16px; }
  /* PC=1,3,5番目は video を左に反転配置（テキスト右）／heading は常に上フル幅 */
  #raku-01, #raku-05 {
    grid-template-areas:
      "heading heading"
      "media   body";
  }
  /* PC=2/4/6は heading を左列(body列)に限定・media を2行spanで右列フル高 */
  #raku-02, #raku-04, #raku-06 {
    grid-template-areas:
      "heading media"
      "body    media";
  }
  /* #raku-02, #raku-04, #raku-06: 動画を95px下げる／heading margin-bottom -95px で body を引き上げ */
  #raku-02 .raku-card__media,
  #raku-04 .raku-card__media,
  #raku-06 .raku-card__media {
    margin-top: 95px;
  }
  #raku-02 .raku-card__heading,
  #raku-04 .raku-card__heading,
  #raku-06 .raku-card__heading {
    margin-bottom: -95px;
  }
  /* #raku-03: body を50px下げる */
  #raku-03 .raku-card__body {
    margin-top: 50px;
  }
  /* #raku-03 のみ: body の下に注釈テキストを追加・注釈の底辺が media 底辺に揃うよう media は2行span */
  #raku-03 {
    grid-template-areas:
      "heading heading"
      "media   body"
      "media   note";
  }
  /* #raku-06 のみ: 下段にextra（左テキスト+右画像）フル幅で追加
     heading は 2/4 と同じく左列（body列）に限定・media は 2行 span で右列 */
  #raku-06 {
    grid-template-areas:
      "heading media"
      "body    media"
      "extra   extra";
  }
  #raku-06 .raku-card__extra {
    grid-area: extra;
    width: 570px;
    justify-self: start;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
  }
  #raku-06 .raku-card__extra-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  #raku-06 .raku-card__extra-image {
    flex: 0 0 auto;
    /* 画像2x書き出し 440×280 → 表示220px */
    width: 220px;
  }
  /* PC line-height 48 @ font-size 26 = 1.8462 */
  #raku-06 .raku-card__extra-title { font-size: 26px; line-height: 1.8462; margin-bottom: 12px; }
  /* PC line-height 33 @ font-size 17 = 1.9412 */
  #raku-06 .raku-card__extra-desc { font-size: 17px; line-height: 1.9412; }
  #raku-06 .raku-card__extra-desc-lead { font-size: 16px; }
  #raku-06 .raku-card__extra-desc-note { font-size: 14px; }
  #raku-03 .raku-card__note {
    grid-area: note;
    align-self: end;
    font-size: 9px;
    margin: 0 0 0 36px;
  }
  /* head + check を1グループにくくった heading ラッパー */
  .kami-lp .raku-card__heading { grid-area: heading; margin-bottom: 20px; }
  /* spec+desc をラップした body（白背景・1/3/5はmedia左でbody右→右側だけ角丸）
     反対側の動画の高さ中央に body を垂直センター配置 */
  .kami-lp .raku-card__body {
    grid-area: body;
    background: var(--c-white);
    padding: 32px 36px;
    align-self: center;
    min-height: 180px;
    /* 中のテキストも垂直センター */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  /* PC=body内illust表示: 絶対配置 */
  .kami-lp .raku-card__body-illust {
    display: block;
    position: absolute;
  }
  /* 2x書き出しのため表示は自然px÷2 */
  #raku-03 .raku-card__body-illust {
    top: 30px;
    right: 70px;
  }
  #raku-03 .raku-card__body-illust img { width: calc(389px / 2); }
  #raku-05 .raku-card__body-illust {
    top: -130px;
    left: 70px;
  }
  #raku-05 .raku-card__body-illust img { width: calc(368px / 2); }
  .kami-lp .raku-card__head { gap: 16px; margin-bottom: 16px; }
  /* PC 番号画像: 幅 = 自然px÷2（固定） */
  #raku-01 .raku-card__num img { width: calc(167px / 2); }
  #raku-02 .raku-card__num img { width: calc(197px / 2); }
  #raku-03 .raku-card__num img { width: calc(196px / 2); }
  #raku-04 .raku-card__num img { width: calc(198px / 2); }
  #raku-05 .raku-card__num img { width: calc(196px / 2); }
  #raku-06 .raku-card__num img { width: calc(197px / 2); }
  /* PC line-height 45 @ font-size 38 = 1.1842 */
  .kami-lp .raku-card__title { font-size: 38px; line-height: 1.1842; }
  .kami-lp .raku-card__check {
    font-size: 18px; margin-bottom: 0;
    /* line-height 20 @ font-size 18 = 1.1111 */
    line-height: 1.1111;
    /* アイコン22px + 右余白1em(=1文字) */
    padding-left: calc(22px + 1em);
  }
  .kami-lp .raku-card__check::before {
    width: 22px;
    /* 高さは自然アスペクト 40/45 */
    height: calc(22px * 40 / 45);
  }
  .kami-lp .raku-card__media {
    grid-area: media; margin-bottom: 0;
    align-self: start;
    border-radius: 14px;
  }
  .kami-lp .raku-card__spec { grid-area: spec; gap: 0; margin-bottom: 20px; }
  .kami-lp .raku-card__spec-col { padding: 16px 14px; }
  /* PC line-height 26 @ font-size 17 = 1.5294 */
  .kami-lp .raku-card__spec-label { font-size: 17px; line-height: 1.5294; }
  /* PC line-height 20 @ font-size 14 = 1.4286 */
  .kami-lp .raku-card__spec-use { font-size: 14px; line-height: 1.4286; }
  .kami-lp .raku-card__desc { grid-area: desc; font-size: 16px; }
}

/* ============================================
   S5 使いやすさで、選ばれています。 82%満足＋7つの理由
   ============================================ */
.kami-lp .voice-block {
  padding: calc(30 * var(--sp-unit)) 0 calc(48 * var(--sp-unit));
  background: var(--c-cream-soft);
}

.kami-lp .voice-block__title {
  font-family: var(--ff-jp);
  font-size: calc(28 * var(--sp-unit));
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--c-text);
  text-align: center;
  margin-bottom: calc(32 * var(--sp-unit));
  position: relative;
}

.kami-lp .voice-block__title::after {
  content: "";
  position: absolute;
  top: calc(-4 * var(--sp-unit));
  right: calc(4 * var(--sp-unit));
  width: 0; height: 0;
  border-style: solid;
  border-width: calc(16 * var(--sp-unit)) calc(16 * var(--sp-unit)) 0 0;
  border-color: var(--c-yellow) transparent transparent transparent;
}

/* 82% 円 */
.kami-lp .voice-circle {
  position: relative;
  width: calc(218 * var(--sp-unit));
  /* voice.png 自然777×713 の縦横比を維持 */
  aspect-ratio: 777 / 713;
  margin: 0 auto calc(16 * var(--sp-unit));
}

/* 円と罫線・キラキラ装飾は voice.png に置換（picture要素として配置） */
.kami-lp .voice-circle__ring {
  position: absolute;
  inset: 0;
  display: block;
}
.kami-lp .voice-circle__ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kami-lp .voice-circle__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kami-lp .voice-circle__num {
  font-family: var(--ff-jp-serif);
  font-weight: var(--fw-bold);
  font-size: calc(82.81 * var(--sp-unit));
  /* line-height 36.7 @ font-size 82.81 = 0.4432 */
  line-height: 0.4432;
  color: var(--c-green-heading);
}

/* %のspanのみ縮小（.js-count-num は数字本体のためターゲットから除外） */
.kami-lp .voice-circle__num span:not(.js-count-num) {
  font-size: calc(32 * var(--sp-unit));
  margin-left: calc(2 * var(--sp-unit));
}

.kami-lp .voice-circle__label {
  font-size: calc(14 * var(--sp-unit));
  font-weight: var(--fw-bold);
  color: var(--c-green-primary);
  margin-top: calc(15 * var(--sp-unit));
}

/* キラキラ装飾は voice.png に統合されたためCSSは撤去（HTML側の span も削除済） */

.kami-lp .voice-block__source {
  text-align: center;
  font-size: calc(9 * var(--sp-unit));
  color: var(--c-text-mute);
  margin-bottom: calc(32 * var(--sp-unit));
}

/* とても買いたい/まあ買いたい 内訳表示（source の上） */
.kami-lp .voice-block__breakdown {
  text-align: center;
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(12 * var(--sp-unit));
  /* line-height 21 @ font-size 12 = 1.75 */
  line-height: 1.75;
  color: var(--c-grey);
  margin-bottom: calc(5 * var(--sp-unit));
}

/* voice_illust: SP/PC 出し分け（自然598×428 の2x書き出し） */
.kami-lp .voice-block__illust {
  display: none;
}
.kami-lp .voice-block__illust img {
  display: block;
  width: 100%;
  height: auto;
}
/* SP: badge の右側（flex子）に配置 */
.kami-lp .voice-block__illust--sp {
  display: block;
  flex-shrink: 0;
  width: calc(151 * var(--sp-unit));
}

/* 7つの理由 */
.kami-lp .voice-reasons {
}

.kami-lp .voice-reasons__badge {
  margin-bottom: calc(20 * var(--sp-unit));
  /* SP: 左=吹き出し／右=イラスト の横並び */
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
}

/* 吹き出し部分（SVG背景・傾けない） */
.kami-lp .voice-reasons__badge-bubble {
  background: url("/sp/kami/img/reasons/voice_badge.svg") no-repeat center / 100% 100%;
  aspect-ratio: 223.86 / 133.3;
  width: calc(180 * var(--sp-unit));
  flex-shrink: 0;
  box-sizing: border-box;
  padding: calc(20 * var(--sp-unit)) calc(24 * var(--sp-unit)) calc(24 * var(--sp-unit));
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 中の文字だけを一塊にして左15度傾ける */
.kami-lp .voice-reasons__badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: rotate(-5deg);
}

.kami-lp .voice-reasons__badge-top,
.kami-lp .voice-reasons__badge-main {
  display: block;
  font-family: var(--ff-jp);
  font-weight: var(--fw-bold);
  color: var(--c-green-heading);
}
/* ＼使ってわかる／: SP 12.55 / PC 16.53（line-height 共に1.75） */
.kami-lp .voice-reasons__badge-top {
  font-size: calc(12.55 * var(--sp-unit));
  line-height: 1.75;
}
/* 7つの理由: SP 20.09 / PC 26.45（line-height 共に1.75） */
.kami-lp .voice-reasons__badge-main {
  font-size: calc(20.09 * var(--sp-unit));
  line-height: 1.75;
}

.kami-lp .voice-reasons__list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--sp-unit));
}

.kami-lp .voice-reasons__item {
  display: grid;
  /* 各span固定幅で統一（後で数値調整可能）: rank 30 / text 120 / bar 140 / pct 40 */
  grid-template-columns: calc(30 * var(--sp-unit)) calc(170 * var(--sp-unit)) calc(100 * var(--sp-unit)) calc(30 * var(--sp-unit));
  align-items: center;
  gap: 0;
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(13 * var(--sp-unit));
  /* line-height 22.75 @ font-size 13 = 1.75 */
  line-height: 1.75;
  color: var(--c-black);
}

.kami-lp .voice-reasons__rank {
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(21 * var(--sp-unit));
  /* line-height 36.75 @ font-size 21 = 1.75 */
  line-height: 1.75;
  color: var(--c-green-accent);
  grid-row: 1 / 2;
}

.kami-lp .voice-reasons__text {
  font-weight: var(--fw-medium);
  color: var(--c-text);
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.kami-lp .voice-reasons__bar {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  height: calc(10 * var(--sp-unit));
  background: var(--c-green-light);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.kami-lp .voice-reasons__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--c-green-primary);
  border-radius: 999px;
  transition: width 1.4s var(--ease-out);
}

.kami-lp .voice-reasons__item.is-visible .voice-reasons__fill {
  width: var(--pct);
}

.kami-lp .voice-reasons__pct {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  font-family: var(--ff-jp);
  font-weight: var(--fw-bold);
  font-size: calc(12 * var(--sp-unit));
  /* line-height 21 @ font-size 12 = 1.75 */
  line-height: 1.75;
  color: var(--c-green-accent);
  text-align: right;
}

@media (min-width: 768px) {
  .kami-lp .voice-block { padding: 50px 0 80px; }
  .kami-lp .voice-block__title { font-size: 40px; margin-bottom: 40px; }
  .kami-lp .voice-block__title::after {
    border-width: 26px 26px 0 0; right: 8px; top: -6px;
  }
  .kami-lp .voice-circle { width: 388.5px; height: auto; }
  /* PC line-height 57 @ font-size 128 = 0.4453 */
  .kami-lp .voice-circle__num { font-size: 128px; line-height: 0.4453; }
  .kami-lp .voice-circle__num span:not(.js-count-num) { font-size: 50px; }
  .kami-lp .voice-circle__label { font-size: 20px; }
  .kami-lp .voice-block__source { font-size: 9px; margin-bottom: 40px; }
  /* PC line-height 24.5 @ font-size 14 = 1.75 */
  .kami-lp .voice-block__breakdown { font-size: 14px; line-height: 1.75; }
  /* PC=breakdown + source を円の中（.voice-block__stat内）に絶対配置・右に20pxずらす */
  .kami-lp .voice-block__stat { position: relative; }
  .kami-lp .voice-block__breakdown,
  .kami-lp .voice-block__source {
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% + 10px));
    width: 300px;
    margin: 0;
  }
  .kami-lp .voice-block__breakdown { top: 245px; }
  .kami-lp .voice-block__source { top: 275px; }
  /* PC=inner を上に20pxずらす（X 20px は SP から継承） */
  .kami-lp .voice-circle__inner { transform: translate(20px, -20px); }
  /* PC: voice_illust を 82% の右上に絶対配置（.voice-block__stat基準）
     自然598×428 の2x書き出し → 表示 299px */
  .kami-lp .voice-block__illust--pc {
    display: block;
    position: absolute;
    top: -140px;
    right: 120px;
    width: 299px;
  }
  /* SP専用は隠す */
  .kami-lp .voice-block__illust--sp { display: none; }
  .kami-lp .voice-reasons { padding: 10px 60px 40px; max-width: 720px; margin: 0 auto; }
  /* PC: badge を absolute で 82% 円の左横に配置（対角: 右上 illust ↔ 左横 badge） */
  .kami-lp .voice-block > .u-container { position: relative; }
  .kami-lp .voice-reasons__badge {
    position: absolute;
    top: 520px;
    left: 190px;
    margin: 0;
  }
  /* PC ＼使ってわかる／: 16.53 / lh 28.93 */
  .kami-lp .voice-reasons__badge-top { font-size: 16.53px; line-height: 1.75; letter-spacing: -0.12em; }
  /* PC 7つの理由: 26.45 / lh 46.29 */
  .kami-lp .voice-reasons__badge-main { font-size: 26.45px; line-height: 1.75; }
  /* PC line-height 28 @ font-size 16 = 1.75 / grid各列を仮値で明示（後で調整） */
  .kami-lp .voice-reasons__item {
    grid-template-columns: 40px 300px 280px 60px;
    font-size: 16px;
    line-height: 1.75;
  }
  /* PC rank 24 / lh 42 */
  .kami-lp .voice-reasons__rank { font-size: 24px; line-height: 1.75; }
  /* PC pct 14 / lh 24.5 */
  .kami-lp .voice-reasons__pct { font-size: 14px; line-height: 1.75; }
}

/* ============================================
   S6 「風味とおいしさをキープ」
   ============================================ */
.kami-lp .fresh-block {
  padding: calc(56 * var(--sp-unit)) 0 calc(48 * var(--sp-unit));
  background: var(--c-green-fresh);
  color: var(--c-white);
  text-align: center;
}

/* body wrapper: sub + shields + ending を1つの背景装飾（斜め緑帯）で囲う
   SP=横100%高さauto / PC=高さ100%横auto、共に中央配置 */
.kami-lp .fresh-block__body {
  background-image: url(/sp/kami/img/decor/fresh_body_bg_sp.png);
  background-image: image-set(
    url(/sp/kami/img/decor/fresh_body_bg_sp.webp) type("image/webp"),
    url(/sp/kami/img/decor/fresh_body_bg_sp.png) type("image/png")
  );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}

/* タイトルカード: SVG フレーム(fresh_card_frame_{pc,sp}.svg) を absolute で敷き、テキストを重ねる
   SP: reasons-intro__card と同じく viewport 左辺に密着（u-container の左 padding を負マージンで打ち消し） */
.kami-lp .fresh-block__card {
  position: relative;
  width: calc(100% + 24 * var(--sp-unit));
  margin-left: calc(-24 * var(--sp-unit));
  aspect-ratio: 365.5 / 149;
  margin-bottom: calc(40 * var(--sp-unit));
}
.kami-lp .fresh-block__card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kami-lp .fresh-block__card-frame img {
  width: 100%;
  height: 100%;
  display: block;
}
.kami-lp .fresh-block__card-copy {
  position: absolute;
  inset: 0;
  padding: calc(25 * var(--sp-unit));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.kami-lp .fresh-block__card-copy > * { margin: 0; }
.kami-lp .fresh-block__card-copy > * + * { margin-top: calc(8 * var(--sp-unit)); }

.kami-lp .fresh-block__title {
  font-family: var(--ff-jp);
  font-size: calc(32 * var(--sp-unit));
  font-weight: var(--fw-bold);
  line-height: 1.4;
  margin: calc(35 * var(--sp-unit)) 0 0;
  color: var(--c-white);
}

.kami-lp .fresh-block__lead {
  font-size: calc(14 * var(--sp-unit));
  margin-bottom: calc(40 * var(--sp-unit));
  color: rgba(255, 255, 255, 0.9);
}

.kami-lp .fresh-block__sub {
  font-family: var(--ff-jp-serif);
  font-size: calc(18 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 35 / font-size 18 = 1.9444 */
  line-height: 1.9444;
  color: #ffdc59;
  margin-bottom: calc(24 * var(--sp-unit));
}

/* 光遮断・酸素遮断 2アイコン統合画像（fresh_shields_{pc,sp}.{png,webp} を picture で出し分け） */
.kami-lp .fresh-block__shields {
  display: block;
  width: calc(340 * var(--sp-unit)); /* SP: 2x=680 の 1/2 表示 */
  max-width: 100%;
  margin: 0 auto calc(28 * var(--sp-unit));
}
.kami-lp .fresh-block__shields img {
  width: 100%;
  height: auto;
  display: block;
}

/* ゴールド強調＋白補足の2段構造（デザイン0812準拠） */
.kami-lp .fresh-block__ending {
  margin-top: calc(20 * var(--sp-unit));
  line-height: 1.6;
}
.kami-lp .fresh-block__ending-gold {
  display: block;
  font-family: var(--ff-jp-serif);
  font-size: calc(18 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 25 / font-size 18 = 1.3889 */
  line-height: 1.3889;
  color: #ffdc59;
  margin-bottom: calc(8 * var(--sp-unit));
}
.kami-lp .fresh-block__ending-sub {
  display: block;
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);
  font-size: calc(14 * var(--sp-unit));
  /* line-height 24.5 / font-size 14 = 1.75 */
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
  .kami-lp .fresh-block { padding: 96px 0 80px; }
  .kami-lp .fresh-block__body {
    background-image: url(/sp/kami/img/decor/fresh_body_bg_pc.png);
    background-image: image-set(
      url(/sp/kami/img/decor/fresh_body_bg_pc.webp) type("image/webp"),
      url(/sp/kami/img/decor/fresh_body_bg_pc.png) type("image/png")
    );
    background-size: auto 100%;
  }
  .kami-lp .fresh-block__card {
    width: 621px;
    margin-left: 0;
    aspect-ratio: 621 / 189;
    margin-bottom: calc(56 * var(--pc-unit));
  }
  .kami-lp .fresh-block__card-copy {
    padding: calc(30 * var(--pc-unit)) calc(50 * var(--pc-unit));
  }
  .kami-lp .fresh-block__card-copy > * + * { margin-top: calc(10 * var(--pc-unit)); }
  .kami-lp .fresh-block__title { font-size: 40px; }
  .kami-lp .fresh-block__lead { font-size: 16px; margin-bottom: 56px; }
  /* PC line-height 36 / font-size 25 = 1.44 */
  .kami-lp .fresh-block__sub { font-size: 25px; line-height: 1.44; margin-bottom: 32px; }
  .kami-lp .fresh-block__shields { width: 848px; margin-bottom: 40px; }
  .kami-lp .fresh-block__ending { margin-top: 40px; }
  /* PC line-height 36 / font-size 25 = 1.44 */
  .kami-lp .fresh-block__ending-gold { font-size: 25px; line-height: 1.44; margin-bottom: 12px; }
  /* PC line-height 28 / font-size 16 = 1.75 */
  .kami-lp .fresh-block__ending-sub { font-size: 16px; line-height: 1.75; }
}

/* ============================================
   S7 環境にも配慮（動き② 芽 順次発生 CSS実装）
   ============================================ */
.kami-lp .eco-block {
  padding: calc(56 * var(--sp-unit)) 0 calc(48 * var(--sp-unit));
  background: var(--c-green-eco);
  position: relative;
  overflow: hidden;
}

/* 見出しカード: reasons-intro__card と同型パターン
   SP=viewport 左辺密着 / PC=620px 固定 / 折り返し装飾（yellow flap + eco-bg flap） */
.kami-lp .eco-block__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
  width: calc(100% + 24 * var(--sp-unit));
  margin-left: calc(-24 * var(--sp-unit));
  background: var(--c-white);
  padding: calc(25 * var(--sp-unit));
  margin-bottom: calc(32 * var(--sp-unit));
}
.kami-lp .eco-block__card::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(30 * var(--sp-unit));
  height: calc(30 * var(--sp-unit));
  background: linear-gradient(-135deg, transparent 50%, #ffce00 50%);
  transform: rotate(90deg);
}
.kami-lp .eco-block__card::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(30 * var(--sp-unit));
  height: calc(30 * var(--sp-unit));
  background: linear-gradient(-135deg, var(--c-green-eco) 50%, transparent 50%);
  transform: rotate(90deg);
}
.kami-lp .eco-block__card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.kami-lp .eco-block__title {
  font-family: var(--ff-jp);
  font-size: calc(28 * var(--sp-unit));
  font-weight: var(--fw-bold);
  color: var(--c-green-dark);
  margin-bottom: calc(12 * var(--sp-unit));
  text-align: left;
}

.kami-lp .eco-block__lead {
  font-size: calc(13 * var(--sp-unit));
  color: var(--c-text);
  margin-bottom: calc(24 * var(--sp-unit));
}

.kami-lp .eco-circles {
  position: relative;
  z-index: 2;
  display: flex;
  gap: calc(12 * var(--sp-unit));
  justify-content: center;
  margin-bottom: calc(8 * var(--sp-unit));
}

/* eco-circle: 円リング画像 (eco_circle.{png,webp}) + 内側 num/label をオーバーレイ */
.kami-lp .eco-circle {
  position: relative;
  width: calc(123 * var(--sp-unit));
  /* eco_circle.png 自然247×242 の縦横比を維持 */
  aspect-ratio: 247 / 242;
}

.kami-lp .eco-circle__ring {
  position: absolute;
  inset: 0;
  display: block;
}
.kami-lp .eco-circle__ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kami-lp .eco-circle__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* SP: 文字全体を10px下げる（PC は下部 media で translateY:0 に戻す） */
  transform: translateY(calc(10 * var(--sp-unit)));
}

/* eco-circle 上に単一の芽（eco_sprout.svg）を配置。IO 到達で伸長アニメ */
.kami-lp .eco-circle__sprout {
  position: absolute;
  top: calc(-14 * var(--sp-unit));
  left: 50%;
  width: calc(19.18 * var(--sp-unit));
  height: auto;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.7s var(--ease-out);
}
.kami-lp .eco-circles.is-visible .eco-circle__sprout {
  transform: translateX(-50%) scaleY(1);
  transition-delay: 0.15s;
}

.kami-lp .eco-circle__num {
  font-family: var(--ff-jp-serif);
  font-size: calc(52.9446 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 15 / font-size 52.9446 = 0.2833 */
  line-height: 0.2833;
  color: var(--c-green-heading);
}
.kami-lp .eco-circle__num span {
  font-size: calc(18 * var(--sp-unit));
}
/* 「約」プレフィックス（.eco-circle__num > span:first-child） */
.kami-lp .eco-circle__num span:first-child {
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(13.5274 * var(--sp-unit));
  /* line-height 23 / font-size 13.5274 = 1.7003 */
  line-height: 1.7003;
  color: var(--c-green-heading);
}
/* 「％」ユニット（.eco-circle__num > span:last-child） */
.kami-lp .eco-circle__num span:last-child {
  font-family: var(--ff-jp-serif);
  font-weight: var(--fw-bold);
  font-size: calc(19.8542 * var(--sp-unit));
  /* line-height 15 / font-size 19.8542 = 0.7555 */
  line-height: 0.7555;
  color: var(--c-green-heading);
}

.kami-lp .eco-circle__label {
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(10 * var(--sp-unit));
  /* line-height 13 / font-size 10 = 1.3 */
  line-height: 1.3;
  color: var(--c-green-heading);
  margin-top: calc(4 * var(--sp-unit));
}

/* eco-block > .u-container を positioning ancestor に */
.kami-lp .eco-block > .u-container {
  position: relative;
}

.kami-lp .eco-ground {
  position: absolute;
  /* top:auto なので flow 位置（eco-circles 直後）に配置され、フロー空間は占有しない */
  height: 1px;
  background: var(--c-green-primary);
  opacity: 0.6;
  /* SP: u-container を突き抜けて viewport 左右端まで伸ばす */
  left: calc(50% - 50vw);
  width: 100vw;
  margin: calc(12 * var(--sp-unit)) 0 calc(32 * var(--sp-unit));
  /* 全体を上に40px移動（SP は sp-unit で可変・PC は 40px 固定） */
  transform: translateY(calc(-40 * var(--sp-unit)));
}
@media (min-width: 768px) {
  .kami-lp .eco-ground {
    width: auto;
    left: 0;
    right: 0;
  }
}

/* eco-ground 上の芽（SP=4個 / PC=5個。円の左右に配置。IO 到達で下から scaleY 伸長） */
.kami-lp .eco-ground__sprout {
  position: absolute;
  bottom: 0;
  width: calc(19.18 * var(--sp-unit));
  height: auto;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.7s var(--ease-out);
}
/* .eco-circles.is-visible をトリガーに、兄弟 .eco-ground 内へ伝播させて伸長 */
.kami-lp .eco-circles.is-visible ~ .eco-ground .eco-ground__sprout {
  transform: translateX(-50%) scaleY(1);
}
/* stagger 発火タイミング（円に近い順→外側へ） */
.kami-lp .eco-circles.is-visible ~ .eco-ground .eco-ground__sprout--l3 { transition-delay: 0.20s; }
.kami-lp .eco-circles.is-visible ~ .eco-ground .eco-ground__sprout--r1 { transition-delay: 0.20s; }
.kami-lp .eco-circles.is-visible ~ .eco-ground .eco-ground__sprout--l2 { transition-delay: 0.35s; }
.kami-lp .eco-circles.is-visible ~ .eco-ground .eco-ground__sprout--r2 { transition-delay: 0.35s; }
.kami-lp .eco-circles.is-visible ~ .eco-ground .eco-ground__sprout--l1 { transition-delay: 0.50s; }

/* r2 の芽の上に浮かぶハート（r2 表示後にふわっと出現） */
.kami-lp .eco-ground__heart {
  position: absolute;
  bottom: calc(20 * var(--sp-unit));
  left: 85%; /* r2 と同じ横位置（SP） */
  width: calc(10 * var(--sp-unit));
  height: auto;
  transform: translateX(-50%) scale(0.4);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.kami-lp .eco-circles.is-visible ~ .eco-ground .eco-ground__heart {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  /* r2 の表示完了(0.35s + 0.7s = 1.05s)後にふわっと */
  transition-delay: 1.15s;
}
@media (min-width: 768px) {
  .kami-lp .eco-ground__heart {
    left: 74%; /* r2 と同じ横位置（PC） */
    width: 20px;
    bottom: 50px;
  }
}

/* 罫線の下、4番目のSVG(r1)の下に配置する注釈テキスト */
.kami-lp .eco-ground__note {
  position: absolute;
  top: calc(100% + 10 * var(--sp-unit));
  left: 79%; /* r1 と同じ横位置（SP） */
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);
  font-size: calc(9 * var(--sp-unit));
  /* line-height 12 / font-size 9 = 1.3333 */
  line-height: 1.3333;
  color: var(--c-grey);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .kami-lp .eco-ground__note {
    left: 63%;    /* r1 と同じ横位置（PC） */
    top: calc(100% + 14px);
    font-size: 9px;
  }
}
/* SP 4個: 左2 / 右2（l3 は非表示） */
.kami-lp .eco-ground__sprout--l1 { left: 15%; }
.kami-lp .eco-ground__sprout--l2 { display: none; }
.kami-lp .eco-ground__sprout--l3 { left: 26%; }
.kami-lp .eco-ground__sprout--r1 { left: 74%; }
.kami-lp .eco-ground__sprout--r2 { left: 85%; }

@media (min-width: 768px) {
  .kami-lp .eco-ground__sprout { width: 42px; }
  .kami-lp .eco-ground__sprout--l1 { left: 18%; }
  .kami-lp .eco-ground__sprout--l2 { display: block; }
  /* PC 5個: 左3 / 右2 */
  .kami-lp .eco-ground__sprout--l2 { left: 25%; }
  .kami-lp .eco-ground__sprout--l3 { left: 32%; }
  .kami-lp .eco-ground__sprout--r1 { left: 68%; }
  .kami-lp .eco-ground__sprout--r2 { left: 74%; }
}

/* eco-block__sizes: 3枠(容量別 CO2 削減) 全体ラッパー・上部余白 */
.kami-lp .eco-block__sizes {
  margin-top: calc(20 * var(--sp-unit));
}

.kami-lp .eco-block__sizes-lead {
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(14 * var(--sp-unit));
  /* line-height 20 / font-size 14 = 1.4286 */
  line-height: 1.4286;
  color: var(--c-green-border);
  margin-bottom: calc(6 * var(--sp-unit));
}

.kami-lp .eco-block__sizes-note {
  font-family: var(--ff-jp);
  font-weight: var(--fw-regular);
  font-size: calc(10 * var(--sp-unit));
  /* line-height 20 / font-size 10 = 2.0 */
  line-height: 2.0;
  color: var(--c-green-border);
  margin-bottom: calc(16 * var(--sp-unit));
}

/* eco-sizes: 3 円横並び（eco-circle パターン再利用の小型版） */
.kami-lp .eco-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(8 * var(--sp-unit));
  margin-bottom: calc(20 * var(--sp-unit));
  justify-items: center;
}

.kami-lp .eco-sizes__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
}

/* .eco-circle--sizes: eco-sizes 配下スコープ独自サイズ */
.kami-lp .eco-circle--sizes {
  width: calc(94 * var(--sp-unit));
}
/* eco-sizes 配下の 約 プレフィックス */
.kami-lp .eco-sizes .eco-circle__num span:first-child {
  font-size: calc(10 * var(--sp-unit));
  /* line-height 17 / font-size 10 = 1.7 */
  line-height: 1.7;
}
/* eco-sizes 配下の 数字本体 */
.kami-lp .eco-sizes .eco-circle__num {
  font-size: calc(37 * var(--sp-unit));
  /* line-height 10 / font-size 37 = 0.2703 */
  line-height: 0.2703;
}
/* eco-sizes 配下の ％ */
.kami-lp .eco-sizes .eco-circle__num span:last-child {
  font-size: calc(15 * var(--sp-unit));
  /* line-height 11 / font-size 15 = 0.7333 */
  line-height: 0.7333;
}
/* eco-sizes 配下の CO₂削減 ラベル */
.kami-lp .eco-sizes .eco-circle__label {
  font-size: calc(10 * var(--sp-unit));
  /* line-height 13 / font-size 10 = 1.3 */
  line-height: 1.3;
}

.kami-lp .eco-sizes__cap {
  display: block;
  text-align: center;
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(10 * var(--sp-unit));
  /* line-height 14 / font-size 10 = 1.4 */
  line-height: 1.4;
  color: var(--c-green-heading);
  margin: 0;
}

@media (min-width: 768px) {
  .kami-lp .eco-block { padding: 96px 0 80px; }
  .kami-lp .eco-block__card {
    width: 620px;
    margin-left: 0;
    gap: 32px;
    padding: 30px 50px;
    margin-bottom: 48px;
  }
  .kami-lp .eco-block__card::before,
  .kami-lp .eco-block__card::after {
    width: 30px;
    height: 30px;
  }
  .kami-lp .eco-block__title { font-size: 40px; margin-bottom: 16px; }
  .kami-lp .eco-block__lead { font-size: 16px; margin-bottom: 40px; }
  .kami-lp .eco-circles { gap: 32px; }
  .kami-lp .eco-circle { width: 280px; }
  .kami-lp .eco-circle__inner { transform: translateY(20px); }
  .kami-lp .eco-circle__sprout { top: -32px; width: 42px; }
  /* PC line-height 34 / font-size 120 = 0.2833 */
  .kami-lp .eco-circle__num { font-size: 120px; line-height: 0.2833; }
  .kami-lp .eco-circle__num span { font-size: 24px; }
  /* PC 約: line-height 53 / font-size 31 = 1.7097 */
  .kami-lp .eco-circle__num span:first-child { font-size: 31px; line-height: 1.7097; }
  /* PC ％: line-height 33 / font-size 45 = 0.7333 */
  .kami-lp .eco-circle__num span:last-child { font-size: 45px; line-height: 0.7333; }
  /* PC line-height 24 / font-size 18 = 1.3333 */
  .kami-lp .eco-circle__label { font-size: 18px; line-height: 1.3333; }
  .kami-lp .eco-block__sizes { margin-top: 70px; width: 860px; max-width: 100%; margin-left: auto; margin-right: auto; }
  /* PC line-height 29 / font-size 18 = 1.6111 */
  .kami-lp .eco-block__sizes-lead { font-size: 18px; line-height: 1.6111; }
  /* PC line-height 29 / font-size 14 = 2.0714 */
  .kami-lp .eco-block__sizes-note { font-size: 14px; line-height: 2.0714; margin-bottom: 24px; }
  .kami-lp .eco-sizes { gap: 40px; margin-bottom: 28px; }
  .kami-lp .eco-sizes__item { gap: 16px; }
  .kami-lp .eco-circle--sizes { width: 220px; }
  /* PC 約: line-height 40 / font-size 23 = 1.7391 */
  .kami-lp .eco-sizes .eco-circle__num span:first-child { font-size: 23px; line-height: 1.7391; }
  /* PC 数字本体: line-height 24 / font-size 87 = 0.2759 */
  .kami-lp .eco-sizes .eco-circle__num { font-size: 87px; line-height: 0.2759; }
  /* PC ％: line-height 25 / font-size 34.5 = 0.7246 */
  .kami-lp .eco-sizes .eco-circle__num span:last-child { font-size: 34.5px; line-height: 0.7246; }
  /* PC CO₂削減 ラベル: line-height 24 / font-size 16 = 1.5 */
  .kami-lp .eco-sizes .eco-circle__label { font-size: 16px; line-height: 1.5; }
  /* PC line-height 26 / font-size 18 = 1.4444 */
  .kami-lp .eco-sizes__cap { font-size: 18px; line-height: 1.4444; }
}

/* ============================================
   S8 使い方に合わせて選べるサイズ + 選べる油種3種
   動き③ 選べるサイズ = PC hover切替 / SP 常時両方表示（案2）
   ============================================ */
.kami-lp .size-block {
  padding: calc(56 * var(--sp-unit)) 0 calc(48 * var(--sp-unit));
  background: var(--c-white);
}

/* 見出しカード: reasons-intro__card / eco-block__card と同型 */
.kami-lp .size-block__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
  width: calc(100% + 24 * var(--sp-unit));
  margin-left: calc(-24 * var(--sp-unit));
  background: var(--c-white);
  border: 1px solid var(--c-green-heading);
  padding: calc(25 * var(--sp-unit));
  margin-bottom: calc(32 * var(--sp-unit));
}
/* ::before/::after を 1px 外側に張り出して card border を折り返し部分だけ物理的に隠す */
.kami-lp .size-block__card::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: calc(30 * var(--sp-unit) + 2px);
  height: calc(30 * var(--sp-unit) + 2px);
  background: linear-gradient(-135deg, transparent 50%, #ffce00 50%);
  transform: rotate(90deg);
}
.kami-lp .size-block__card::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: calc(30 * var(--sp-unit) + 2px);
  height: calc(30 * var(--sp-unit) + 2px);
  background: linear-gradient(-135deg, var(--c-white) 50%, transparent 50%);
  transform: rotate(90deg);
}
.kami-lp .size-block__card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.kami-lp .size-block__title {
  font-family: var(--ff-jp);
  font-size: calc(28 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 39 / font-size 28 = 1.3929 */
  line-height: 1.3929;
  color: var(--c-green-heading);
}

.kami-lp .size-block__sub {
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(15 * var(--sp-unit));
  /* line-height 26 / font-size 15 = 1.7333 */
  line-height: 1.7333;
  color: var(--c-green-accent);
  margin-bottom: calc(12 * var(--sp-unit));
}

.kami-lp .size-block__sub._mt { margin-top: calc(40 * var(--sp-unit)); }

/* 動き③ 選べるサイズ picker */
.kami-lp .size-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-green-light);
  border-radius: 12px;
  margin-bottom: calc(24 * var(--sp-unit));
}

.kami-lp .size-picker__cell {
  appearance: none;
  border: none;
  background: var(--c-white);
  border-radius: 10px 0 0 10px;
  padding: calc(14 * var(--sp-unit)) calc(10 * var(--sp-unit));
  text-align: center;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
  transition: transform 0.25s var(--ease-out);
}

.kami-lp .size-picker__cell:focus-visible {
  outline: 2px solid var(--c-green-primary);
  outline-offset: 2px;
}

/* 容量別セル背景色 */
.kami-lp .size-picker__cell[data-size="small"] { background: #f1f8f4; }
.kami-lp .size-picker__cell[data-size="medium"] { background: #e2f2ea; border-radius: 0 10px 10px 0; }

.kami-lp .size-picker__label {
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(22 * var(--sp-unit));
  /* line-height 35 / font-size 22 = 1.5909 */
  line-height: 1.5909;
  color: var(--c-green-accent);
}

.kami-lp .size-picker__label span {
  display: block;
  font-family: var(--ff-jp);
  font-weight: var(--fw-medium);
  font-size: calc(12 * var(--sp-unit));
  /* line-height 35 / font-size 12 = 2.9167 */
  line-height: 1.9167;
  color: #808080;
  margin-top: calc(2 * var(--sp-unit));
}

.kami-lp .size-picker__packs {
  /* SP は非表示、PC で display:flex に上書き */
  display: none;
  gap: calc(4 * var(--sp-unit));
  justify-content: center;
  align-items: flex-end;
  min-height: calc(80 * var(--sp-unit));
}

.kami-lp .size-picker__packs img {
  width: calc(28 * var(--sp-unit));
  height: auto;
  object-fit: contain;
}

/* 選べる油種 3種プロダクトカード */
.kami-lp .oil-cards {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--sp-unit));
}

.kami-lp .oil-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.kami-lp .oil-card__media {
  display: flex;
  gap: calc(7 * var(--sp-unit));
  margin: calc(7 * var(--sp-unit)) calc(7 * var(--sp-unit)) calc(14 * var(--sp-unit));
  align-items: stretch;
}

.kami-lp .oil-card__food {
  width: calc(182 * var(--sp-unit));
  flex-shrink: 0;
}

.kami-lp .oil-card__food img {
  width: 100%;
  height: auto;
  display: block;
}

.kami-lp .oil-card__pack {
  width: calc(127 * var(--sp-unit));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
  border-radius: 10px;
}

.kami-lp .oil-card__pack figure {
  margin: 0;
}

.kami-lp .oil-card__pack img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.kami-lp .oil-card:nth-child(1) .oil-card__pack figure { width: calc(95.5 * var(--sp-unit)); }
.kami-lp .oil-card:nth-child(2) .oil-card__pack figure { width: calc(98 * var(--sp-unit)); }
.kami-lp .oil-card:nth-child(3) .oil-card__pack figure { width: calc(50 * var(--sp-unit)); }

.kami-lp .oil-card__body {
  background: #faf8f2;
  border-radius: 0 12px 12px;
  padding: calc(20 * var(--sp-unit));
}

.kami-lp .oil-card__logo {
  width: calc(100 * var(--sp-unit));
  margin-bottom: calc(8 * var(--sp-unit));
}

.kami-lp .oil-card__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.kami-lp .oil-card__name {
  font-family: var(--ff-jp);
  font-size: calc(21 * var(--sp-unit));
  font-weight: var(--fw-bold);
  color: #008323;
  /* line-height 26 / font-size 21 = 1.2381 */
  line-height: 1.2381;
  margin-bottom: calc(8 * var(--sp-unit));
}

.kami-lp .oil-card__catch {
  font-family: var(--ff-jp);
  font-size: calc(14 * var(--sp-unit));
  font-weight: var(--fw-medium);
  color: #009c37;
  /* line-height 16 / font-size 14 = 1.1429 */
  line-height: 1.1429;
  margin-bottom: calc(6 * var(--sp-unit));
}

.kami-lp .oil-card__match {
  font-family: var(--ff-jp);
  font-size: calc(12 * var(--sp-unit));
  font-weight: var(--fw-medium);
  color: #666666;
  /* line-height 15 / font-size 12 = 1.25 */
  line-height: 1.25;
  margin-bottom: calc(10 * var(--sp-unit));
}

.kami-lp .oil-card__body {
  flex: 1;
}

@media (min-width: 768px) {
  .kami-lp .size-block { padding: 96px 0 80px; }
  .kami-lp .size-block__card {
    width: 620px;
    margin-left: 0;
    gap: 32px;
    padding: 30px 50px;
    margin-bottom: 48px;
  }
  .kami-lp .size-block__card::before,
  .kami-lp .size-block__card::after {
    width: 32px;
    height: 32px;
  }
  /* PC line-height 52 / font-size 40 = 1.3 */
  .kami-lp .size-block__title { font-size: 40px; line-height: 1.3; }
  /* PC line-height 32 / font-size 18 = 1.7778 */
  .kami-lp .size-block__sub { font-size: 18px; line-height: 1.7778; margin-bottom: 20px; }
  .kami-lp .size-block__sub._mt { margin-top: 64px; }
  .kami-lp .size-picker {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .kami-lp .size-picker__cell {
    position: relative;
    align-items: flex-start;
    text-align: left;
    padding: 24px 95px 0 28px;
    min-height: 135px;
  }
  /* PC label: line-height 48 / font-size 26 = 1.8462 */
  .kami-lp .size-picker__label { font-size: 26px; line-height: 1.8462; }
  /* PC sub: line-height 48 / font-size 13 = 3.6923 */
  .kami-lp .size-picker__label span { font-size: 13px; line-height: 1.6923; }
  .kami-lp .size-picker__packs {
    display: flex;
    position: absolute;
    top: 23px;
    left: -70px;
    gap: 10px;
    align-items: flex-end;
  }
  .kami-lp .size-picker__cell[data-size="medium"] .size-picker__packs {
    left: auto;
    top: -15px;
    right: -73px;
  }
  .kami-lp .size-picker__cell[data-size="small"] {
    align-items: flex-end;
    text-align: center;
  }
  .kami-lp .size-picker__cell[data-size="medium"] {
    padding: 24px 28px 0 95px;
  }
  .kami-lp .size-picker__packs img { width: 43px; }
  .kami-lp .oil-cards {
    display: grid;
    grid-template-columns: repeat(3, 352px);
    gap: 24px;
    justify-content: center;
  }
  .kami-lp .oil-card {  }
  .kami-lp .oil-card__media { margin: 10px; gap: 10px; }
  .kami-lp .oil-card__food { width: 187px; }
  .kami-lp .oil-card__pack { width: 132px; }
  .kami-lp .oil-card:nth-child(1) .oil-card__pack figure { width: 99px; }
  .kami-lp .oil-card:nth-child(2) .oil-card__pack figure { width: 103px; }
  .kami-lp .oil-card:nth-child(3) .oil-card__pack figure { width: 52px; }
  .kami-lp .oil-card__logo { width: 120px; }
  /* PC line-height 28 / font-size 23 = 1.2174 */
  .kami-lp .oil-card__name { font-size: 23px; line-height: 1.2174; }
  /* PC line-height 18 / font-size 16 = 1.125 */
  .kami-lp .oil-card__catch { font-size: 16px; line-height: 1.125; }
  /* PC line-height 15 / font-size 13 = 1.1538 */
  .kami-lp .oil-card__match { font-size: 13px; line-height: 1.1538; }
}

/* ============================================
   S9 紙らくパック 全ラインナップ（13商品グリッド）
   ============================================ */
.kami-lp .lineup-full {
  padding: calc(56 * var(--sp-unit)) 0 calc(48 * var(--sp-unit));
  background: #faf8f2;
}

/* S9 見出し（eco-block__card を流用） */
.kami-lp .lineup-full .eco-block__eyebrow {
  line-height: 1;
  color: #009c37;
}

.kami-lp .lineup-full .eco-block__title {
  font-family: var(--ff-jp);
  font-size: calc(32 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 39 / font-size 32 = 1.21875 */
  line-height: 1.21875;
  color: #008323;
}

.kami-lp .lineup-full .eco-block__lead {
  font-family: var(--ff-jp);
  font-size: calc(14 * var(--sp-unit));
  font-weight: var(--fw-medium);
  /* line-height 20 / font-size 14 = 1.4286 */
  line-height: 1.4286;
  color: #666666;
}

/* S9 折れ角の非黄色部分を lineup 背景色に合わせる */
.kami-lp .lineup-full .eco-block__card::after {
  background: linear-gradient(-135deg, #faf8f2 50%, transparent 50%);
}

.kami-lp .lineup-full__grid {
  display: grid;
  grid-template-columns: repeat(2, calc(162 * var(--sp-unit)));
  gap: calc(12 * var(--sp-unit));
  justify-content: center;
}

.kami-lp .lineup-full__item {
  background: var(--c-white);
  border: 1px solid #b2b2b2;
  border-radius: 10px;
  padding: calc(10 * var(--sp-unit));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--sp-unit));
  transition: transform 0.25s var(--ease-out);
  /* sticky header 分オフセット(SP=64sp+20 余白 / PC=92px+20 は media で上書き) */
  scroll-margin-top: calc(17.0667vw + 20px);
}
@media (min-width: 768px) {
  .kami-lp .lineup-full__item { scroll-margin-top: 112px; }
}

.kami-lp .lineup-full__item:hover,
.kami-lp .lineup-full__item:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* itemを外部shop遷移する全体リンク化。display:contents で親flexのlayoutを維持しつつ href だけ有効化 */
.kami-lp .lineup-full__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* stretched link: <a>を疑似要素でカード全体に拡張し、余白部分もクリック可能に。display:contents の hit area 限定を回避 */
.kami-lp .lineup-full__item {
  position: relative;
}
.kami-lp .lineup-full__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ECリンク未公開商品（is-nolink）はhover浮き上がり/フォーカス動作/カーソル変化+ stretched link 疑似要素を無効化。9月中旬EC公開時にis-nolink削除 */
.kami-lp .lineup-full__item.is-nolink:hover,
.kami-lp .lineup-full__item.is-nolink:focus-within {
  transform: none;
  box-shadow: none;
}
.kami-lp .lineup-full__item.is-nolink .lineup-full__link {
  cursor: default;
}
.kami-lp .lineup-full__item.is-nolink .lineup-full__link::after {
  content: none;
}

/* カテゴリ別カラー下線（.lineup-full__size の下に3px罫線） */
.kami-lp .lineup-full__item[data-cat="olive"]  .lineup-full__size { border-bottom-color: var(--c-green-primary); }
.kami-lp .lineup-full__item[data-cat="kome"]   .lineup-full__size { border-bottom-color: #e08e2a; }
.kami-lp .lineup-full__item[data-cat="canola"] .lineup-full__size { border-bottom-color: #4b8fd6; }
.kami-lp .lineup-full__item[data-cat="whalf"]  .lineup-full__size { border-bottom-color: #6f6aad; }
.kami-lp .lineup-full__item[data-cat="goma"]   .lineup-full__size { border-bottom-color: #b04a2c; }

.kami-lp .lineup-full__item figure {
  width: calc(37 * var(--sp-unit));
  height: calc(110 * var(--sp-unit));
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.kami-lp .lineup-full__item figure img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.kami-lp .lineup-full__name {
  font-family: var(--ff-jp);
  font-size: calc(13 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 15 / font-size 13 = 1.1538 */
  line-height: 1.1538;
  color: #5a5a5a;
  width: 100%;
  flex: 1;
  text-align: left;
  /* 日本語約物（「」、。等）の余白詰め */
  font-feature-settings: "palt" 1;
}

.kami-lp .lineup-full__logo {
  display: inline-block;
  width: calc(80 * var(--sp-unit));
  height: auto;
  vertical-align: middle;
}

.kami-lp .lineup-full__size {
  font-family: var(--ff-jp);
  font-size: calc(11 * var(--sp-unit));
  font-weight: var(--fw-medium);
  /* line-height 12 / font-size 11 = 1.0909 */
  line-height: 1.0909;
  color: #666666;
  width: 100%;
  text-align: left;
  padding-bottom: calc(8 * var(--sp-unit));
  border-bottom: 3px solid var(--c-green-primary);
}

@media (min-width: 768px) {
  .kami-lp .lineup-full { padding: 96px 0 80px; }
  /* S9 見出し PC */
  .kami-lp .lineup-full .eco-block__eyebrow { font-size: 12px; line-height: 1; }
  /* PC line-height 52 / font-size 42 = 1.2381 */
  .kami-lp .lineup-full .eco-block__title { font-size: 42px; line-height: 1.2381; }
  /* PC line-height 32 / font-size 18 = 1.7778 */
  .kami-lp .lineup-full .eco-block__lead { font-size: 18px; line-height: 1.7778; }
  .kami-lp .lineup-full__grid {
    grid-template-columns: repeat(5, 207px);
    gap: 20px;
    justify-content: center;
  }
  .kami-lp .lineup-full__item { padding: 20px 12px 16px; gap: 10px; border-bottom-width: 4px; }
  .kami-lp .lineup-full__item figure { width: 56px; height: 160px; }
  /* PC line-height 20 / font-size 15 = 1.3333 */
  .kami-lp .lineup-full__name { font-size: 15px; line-height: 1.3333; }
  /* PC line-height 15 / font-size 13 = 1.1538 */
  .kami-lp .lineup-full__size { font-size: 13px; line-height: 1.1538; }
}

/* --------------------------------------------
   Utility: 独立ブロック非表示切替
   -------------------------------------------- */
.kami-lp .is-hidden { display: none !important; }

/* ============================================
   S10 TVCM 放送中（10月末ON独立ブロック）
   size-block__card を黒背景・白罫線・白文字にカスタマイズ
   ============================================ */
.kami-lp .tvcm-block {
  padding: calc(48 * var(--sp-unit)) 0;
  background: var(--c-black);
  color: var(--c-white);
}

/* 見出しカード（size-block__card の黒bg/白border/白文字バージョン） */
.kami-lp .tvcm-block__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
  width: calc(100% + 24 * var(--sp-unit));
  margin-left: calc(-24 * var(--sp-unit));
  background: var(--c-black);
  border: 1px solid var(--c-white);
  padding: calc(25 * var(--sp-unit));
  margin-bottom: calc(32 * var(--sp-unit));
}
.kami-lp .tvcm-block__card::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: calc(30 * var(--sp-unit) + 2px);
  height: calc(30 * var(--sp-unit) + 2px);
  background: linear-gradient(-135deg, transparent 50%, #ffce00 50%);
  transform: rotate(90deg);
}
.kami-lp .tvcm-block__card::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: calc(30 * var(--sp-unit) + 2px);
  height: calc(30 * var(--sp-unit) + 2px);
  background: linear-gradient(-135deg, var(--c-black) 50%, transparent 50%);
  transform: rotate(90deg);
}
.kami-lp .tvcm-block__card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.kami-lp .tvcm-block__title {
  font-family: var(--ff-jp);
  font-size: calc(28 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 39 / font-size 28 = 1.3929 */
  line-height: 1.3929;
  color: var(--c-white);
}

.kami-lp .tvcm-block__lead {
  font-family: var(--ff-jp);
  font-size: calc(13 * var(--sp-unit));
  color: var(--c-white);
  margin-top: calc(8 * var(--sp-unit));
}

.kami-lp .tvcm-block__movie {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}

.kami-lp .tvcm-block__movie iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (min-width: 768px) {
  .kami-lp .tvcm-block { padding: 96px 0 80px; }
  .kami-lp .tvcm-block__card {
    width: 620px;
    margin-left: 0;
    gap: 32px;
    padding: 30px 50px;
    margin-bottom: 48px;
  }
  .kami-lp .tvcm-block__card::before,
  .kami-lp .tvcm-block__card::after {
    width: 32px;
    height: 32px;
  }
  .kami-lp .tvcm-block__title { font-size: 40px; line-height: 1.3; }
  .kami-lp .tvcm-block__lead { font-size: 18px; margin-top: 16px; }
  .kami-lp .tvcm-block__movie { max-width: 800px; margin: 0 auto; border-radius: 10px; }
}

/* ============================================
   S11 期間限定キャンペーン（9/14ON独立ブロック）
   ============================================ */
.kami-lp .cp-block {
  padding: calc(56 * var(--sp-unit)) 0 calc(48 * var(--sp-unit));
  background: var(--c-pink-cp);
  position: relative;
}

.kami-lp .cp-block::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: calc(8 * var(--sp-unit));
  background: var(--c-green-primary);
}

/* 見出しカード（size-block__card の白bg/マゼンタborder/マゼンタ文字バージョン） */
.kami-lp .cp-block__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--sp-unit));
  width: calc(100% + 24 * var(--sp-unit));
  margin-left: calc(-24 * var(--sp-unit));
  background: var(--c-white);
  border: 1px solid var(--c-magenta-cp);
  padding: calc(25 * var(--sp-unit));
  margin-bottom: calc(32 * var(--sp-unit));
}
.kami-lp .cp-block__card::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: calc(30 * var(--sp-unit) + 2px);
  height: calc(30 * var(--sp-unit) + 2px);
  background: linear-gradient(-135deg, transparent 50%, #ffce00 50%);
  transform: rotate(90deg);
}
.kami-lp .cp-block__card::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: calc(30 * var(--sp-unit) + 2px);
  height: calc(30 * var(--sp-unit) + 2px);
  /* cp-block section の右端側背景（グラデ終点 #f5c8d0）に馴染ませる */
  background: linear-gradient(-135deg, var(--c-pink-cp) 50%, transparent 50%);
  transform: rotate(90deg);
}
.kami-lp .cp-block__card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.kami-lp .cp-block__title {
  font-family: var(--ff-jp);
  font-size: calc(28 * var(--sp-unit));
  font-weight: var(--fw-bold);
  /* line-height 39 / font-size 28 = 1.3929 */
  line-height: 1.3929;
  color: var(--c-magenta-cp);
}

.kami-lp .cp-block__lead {
  font-family: var(--ff-jp);
  font-size: calc(13 * var(--sp-unit));
  color: var(--c-magenta-cp);
  margin-top: calc(8 * var(--sp-unit));
}

.kami-lp .cp-block__banner {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  border: 2px dashed rgba(168, 58, 92, 0.4);
  transition: transform 0.25s var(--ease-out);
  position: relative;
}

.kami-lp .cp-block__banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(168, 58, 92, 0.2);
}

.kami-lp .cp-block__banner-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(168, 58, 92, 0.7);
  font-size: calc(14 * var(--sp-unit));
  font-weight: var(--fw-bold);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .kami-lp .cp-block { padding: 96px 0 80px; }
  .kami-lp .cp-block__card {
    width: 620px;
    margin-left: 0;
    gap: 32px;
    padding: 30px 50px;
    margin-bottom: 48px;
  }
  .kami-lp .cp-block__card::before,
  .kami-lp .cp-block__card::after {
    width: 32px;
    height: 32px;
  }
  .kami-lp .cp-block__title { font-size: 40px; line-height: 1.3; }
  .kami-lp .cp-block__lead { font-size: 18px; margin-top: 16px; }
  .kami-lp .cp-block__banner { max-width: 720px; margin: 0 auto; aspect-ratio: 3 / 2; }
  .kami-lp .cp-block__banner-inner { font-size: 18px; }
}

/* ============================================
   S12 お求めはこちら
   ============================================ */
.kami-lp .shop-block {
  padding: calc(56 * var(--sp-unit)) 0;
  background: var(--c-green-shop);
  color: var(--c-white);
  text-align: center;
}

.kami-lp .shop-block__title {
  font-family: var(--ff-jp);
  font-size: calc(28 * var(--sp-unit));
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-bottom: calc(12 * var(--sp-unit));
}

.kami-lp .shop-block__lead {
  font-size: calc(13 * var(--sp-unit));
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: calc(24 * var(--sp-unit));
}

.kami-lp .shop-block__cta {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--sp-unit));
  padding: calc(14 * var(--sp-unit)) calc(36 * var(--sp-unit));
  background: var(--c-white);
  color: var(--c-green-dark);
  border-radius: 999px;
  font-size: calc(15 * var(--sp-unit));
  font-weight: var(--fw-bold);
  min-width: calc(220 * var(--sp-unit));
  justify-content: center;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.kami-lp .shop-block__cta:hover,
.kami-lp .shop-block__cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.kami-lp .shop-block__cta-arrow {
  transition: transform 0.25s var(--ease-out);
}

.kami-lp .shop-block__cta:hover .shop-block__cta-arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .kami-lp .shop-block { padding: 88px 0; }
  .kami-lp .shop-block__title { font-size: 36px; }
  .kami-lp .shop-block__lead { font-size: 15px; margin-bottom: 32px; }
  .kami-lp .shop-block__cta {
    font-size: 17px; padding: 18px 44px; min-width: 280px; gap: 12px;
  }
}