@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg-main: #FAFAF9;
    --beige: #EDE6DF;
    --main-rose: #B88AA2;
    --sub-rose: #D8B5C4;
    --silver: #D7D7D7;
    --text-ink: #4B4645;
    --heading: #362E31;
    --rose-deep: #8A5570;
    --white: #FFFFFF;
  }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    background: var(--bg-main);
    color: var(--text-ink);
    overflow-x: hidden;
  }

  /* ==================== ① FV（画像ベース） ==================== */
  .hero {
    --fv-ratio: 1.4722;              /* 2650 / 1800 */
    --fv-top: 0px;                   /* 画像の開始位置（上端ぴったり） */
    --fv-zoom: 1;
    --fv-h: calc(100vw * var(--fv-zoom) / var(--fv-ratio));
    --fv-end: calc(var(--fv-top) + var(--fv-h));
    --fv-gap: clamp(140px, 11vw, 200px);
    position: relative;
    width: 100%;
    min-height: calc(var(--fv-end) + var(--fv-gap));
    background-color: #F7DEDE;
    background-image:
      linear-gradient(180deg,
        rgba(237,207,206,0) calc(var(--fv-end) - 90px),
        rgba(237,207,206,0.85) calc(var(--fv-end) - 18px),
        #EDCFCE calc(var(--fv-end) + 6px),
        #F0E2DC calc(var(--fv-end) + var(--fv-gap) * 0.55),
        #F2EEE9 100%),
      url('../img/FV_cleansing.jpg');
    background-size: 100% 100%, calc(100% * var(--fv-zoom)) auto;
    background-position: top center, center var(--fv-top);
    background-repeat: no-repeat, no-repeat;
    overflow: hidden;
  }

  /* ボトルの上下にテキストを配置 */
  .hero-copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: clamp(16px, 1.7vw, 32px) 6% clamp(22px, 2.4vw, 40px);
    z-index: 2;
  }

  .hero .eyebrow {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: clamp(9px, 0.86vw, 13px);
    letter-spacing: 0.38em;
    color: var(--main-rose);
    margin-bottom: clamp(9px, 1.15vw, 18px);
    font-weight: 500;
  }
  .hero .eyebrow::before, .hero .eyebrow::after {
    content: '';
    display: inline-block;
    width: clamp(14px, 1.7vw, 28px);
    height: 1px;
    background: var(--main-rose);
    vertical-align: middle;
    margin: 0 clamp(6px, 0.8vw, 12px);
    opacity: 0.5;
  }

  .hero h1 {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: clamp(22px, 2.85vw, 44px);
    font-weight: 500;
    line-height: 1.55;
    color: var(--text-ink);
    letter-spacing: 0.02em;
    margin-bottom: clamp(8px, 1.1vw, 18px);
    text-shadow: 0 2px 22px rgba(255,255,255,0.85);
  }
  .hero h1 .accent { color: var(--main-rose); font-weight: 700; }

  .hero .sub {
    font-size: clamp(10px, 0.95vw, 15px);
    color: var(--text-ink);
    opacity: 0.8;
    line-height: 1.88;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 14px rgba(255,255,255,0.9);
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(9px, 1.15vw, 18px);
    width: 100%;
  }

  .hero .cta-group {
    display: flex;
    gap: clamp(8px, 1vw, 16px);
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero .btn-primary,
  .hero .btn-secondary {
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: clamp(9px, 1.05vw, 17px) clamp(24px, 3.1vw, 52px);
    font-size: clamp(10px, 0.92vw, 14px);
    letter-spacing: 0.16em;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.35s ease;
    white-space: nowrap;
  }

  .hero .btn-primary {
    position: relative;
    background: linear-gradient(135deg, #C99CB2 0%, #B0809A 52%, #96697F 100%);
    color: var(--white);
    border: none;
    font-weight: 600;
    letter-spacing: 0.18em;
    padding-block: clamp(13px, 1.35vw, 22px);
    box-shadow:
      0 18px 38px -12px rgba(150,105,127,0.62),
      0 3px 10px -3px rgba(150,105,127,0.4),
      inset 0 1px 0 rgba(255,255,255,0.45);
    overflow: hidden;
    animation: ctaBreath 3.6s ease-in-out infinite;
  }
  .hero .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
    transform: skewX(-18deg);
    animation: ctaShine 4.6s ease-in-out infinite;
  }
  .hero .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
      0 24px 46px -12px rgba(150,105,127,0.7),
      inset 0 1px 0 rgba(255,255,255,0.5);
  }
  @keyframes ctaShine {
    0%, 62% { left: -60%; }
    88%, 100% { left: 118%; }
  }
  @keyframes ctaBreath {
    0%, 100% { box-shadow: 0 18px 38px -12px rgba(150,105,127,0.62), 0 3px 10px -3px rgba(150,105,127,0.4), inset 0 1px 0 rgba(255,255,255,0.45); }
    50% { box-shadow: 0 22px 46px -12px rgba(150,105,127,0.78), 0 3px 12px -3px rgba(150,105,127,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero .btn-primary, .hero .btn-primary::after { animation: none; }
  }

  .hero .btn-secondary {
    background: rgba(255,255,255,0.72);
    color: var(--text-ink);
    border: 1px solid rgba(184,138,162,0.45);
    backdrop-filter: blur(4px);
  }
  .hero .btn-secondary:hover { background: rgba(255,255,255,0.93); }

  .hero .arrow { font-size: 1.1em; transition: transform 0.3s ease; }
  .hero button:hover .arrow { transform: translateX(3px); }

  .hero .feature-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
  }
  .hero .feature-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 clamp(10px, 1.5vw, 26px);
    font-size: clamp(9px, 0.82vw, 12.5px);
    letter-spacing: 0.04em;
    color: var(--text-ink);
    opacity: 0.88;
    white-space: nowrap;
    text-shadow: 0 1px 10px rgba(255,255,255,0.95);
  }
  .hero .feature-item svg {
    width: clamp(12px, 1.15vw, 18px);
    height: clamp(12px, 1.15vw, 18px);
    stroke: var(--main-rose);
    flex-shrink: 0;
  }
  .hero .feature-divider {
    width: 1px;
    height: clamp(14px, 1.5vw, 24px);
    background: var(--sub-rose);
    opacity: 0.6;
  }

  .br-sp { display: none; }

  /* SP */
  @media (max-width: 820px) {
    .br-sp { display: inline; }
    .hero {
      --fv-ratio: 0.75;          /* SP用画像 1500 / 2000 */
      --fv-zoom: 1;
      --fv-gap: clamp(348px, 89vw, 388px);
      background-image:
        linear-gradient(180deg,
          rgba(239,210,212,0) calc(var(--fv-end) - 90px),
          rgba(239,210,212,0.85) calc(var(--fv-end) - 18px),
          #EFD2D4 calc(var(--fv-end) + 6px),
          #F1E2DE calc(var(--fv-end) + var(--fv-gap) * 0.55),
          #F2EEE9 100%),
        url('../img/FV_cleansing_sp.jpg');
      background-color: #F5DDDB;
    }
    /* SPはサブコピーを省いて1画面に収める */
    .hero .sub { display: none; }
    .hero-copy {
      justify-content: flex-end;
      padding: 0 6% clamp(20px, 2.2vw, 34px);
    }
    .hero-text { margin-bottom: 18px; }
    .hero h1 { font-size: clamp(24px, 6.8vw, 33px); margin-bottom: 14px; }
    .hero .sub { font-size: clamp(11px, 3.1vw, 13.5px); line-height: 1.95; }
    .hero .eyebrow { font-size: 9.5px; letter-spacing: 0.26em; margin-bottom: 13px; }
    .hero .cta-group { flex-direction: column; width: 100%; max-width: 310px; gap: 10px; }
    .hero .btn-primary, .hero .btn-secondary { width: 100%; padding: 15px 20px; font-size: 13px; }
    .hero .feature-item { font-size: 9.5px; padding: 0 9px; gap: 5px; }
    .hero .feature-item svg { width: 13px; height: 13px; }
    .hero .feature-divider { height: 16px; }
  }

  /* ==================== セクション②〜⑪ 共通 ==================== */
  .sec {
    position: relative;
    padding: 96px 24px;
    overflow: hidden;
  }

  .inner {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
  }

  .inner-wide { max-width: 1080px; }

  .label-sm {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 11.5px;
    letter-spacing: 0.32em;
    color: var(--rose-deep);
    text-align: center;
    margin-bottom: 22px;
    font-weight: 600;
  }

  .sec h2 {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: clamp(24px, 3.9vw, 38px);
    font-weight: 600;
    line-height: 1.62;
    color: var(--heading);
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: 0.01em;
  }

  .sec h2 em {
    font-style: normal;
    color: var(--rose-deep);
    font-weight: 700;
    position: relative;
  }
  .sec h2 em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.16em;
    height: 0.14em;
    background: linear-gradient(90deg, rgba(216,181,196,0), var(--sub-rose) 22%, var(--sub-rose) 78%, rgba(216,181,196,0));
    border-radius: 2px;
  }

  .lead {
    font-size: 14.5px;
    line-height: 2.15;
    color: var(--text-ink);
    opacity: 0.9;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    letter-spacing: 0.03em;
  }

  .lead + .lead { margin-top: 20px; }

  /* フェードイン共通 */
  .fade {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22,1,0.36,1);
  }
  .sec.is-visible .fade { opacity: 1; transform: translateY(0); }
  .sec.is-visible .lead.fade { opacity: 0.9; }
  .d1 { transition-delay: 0.1s; }
  .d2 { transition-delay: 0.2s; }
  .d3 { transition-delay: 0.3s; }
  .d4 { transition-delay: 0.4s; }
  .d5 { transition-delay: 0.5s; }

  /* セクション背景バリエーション */
  .bg-white { background: var(--white); }
  .bg-off   { background: linear-gradient(180deg, #FAFAF9 0%, #F4EFEA 100%); }
  .bg-beige { background: linear-gradient(180deg, #F3EDE6 0%, var(--beige) 55%, #E7DED5 100%); }
  .bg-soft  {
    background:
      radial-gradient(ellipse 700px 500px at 15% 5%, rgba(216,181,196,0.16) 0%, transparent 60%),
      radial-gradient(ellipse 600px 500px at 88% 90%, rgba(242,238,233,0.9) 0%, transparent 55%),
      var(--bg-main);
  }

  /* セクション見出し上の細い区切り */
  .rule {
    width: 40px;
    height: 1px;
    background: var(--sub-rose);
    margin: 0 auto 26px;
  }

  /* ==================== ② 界面活性剤 ==================== */
  .stat-block {
    position: relative;
    text-align: center;
    margin: 52px auto 0;
    max-width: 540px;
    padding: 52px 32px 44px;
    background: var(--white);
    border-radius: 22px;
    box-shadow: 0 26px 60px -26px rgba(75,70,69,0.26);
    overflow: hidden;
  }
  .stat-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--sub-rose), var(--main-rose) 50%, var(--sub-rose));
  }
  .stat-block::after {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    top: -110px; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(216,181,196,0.30) 0%, transparent 70%);
    pointer-events: none;
  }

  .stat-block .big {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: clamp(62px, 9vw, 104px);
    font-weight: 700;
    color: var(--rose-deep);
    line-height: 0.95;
    letter-spacing: -0.02em;
  }

  .stat-block .big small {
    font-size: 0.34em;
    margin-left: 3px;
    font-weight: 500;
    vertical-align: 0.55em;
  }

  .stat-block .cap {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(184,138,162,0.28);
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--text-ink);
    opacity: 0.75;
  }

  .stat-note {
    margin-top: 18px;
    font-size: 10.5px;
    color: var(--text-ink);
    opacity: 0.45;
    text-align: center;
    line-height: 1.8;
  }

  /* ==================== ③ 自家保湿膜 図解 ==================== */
  .skin-card {
    max-width: 560px;
    margin: 46px auto 0;
    background: var(--white);
    border-radius: 20px;
    padding: 26px 20px 22px;
    box-shadow: 0 20px 50px -26px rgba(75,70,69,0.2);
  }
  .skin-svg { width: 100%; height: auto; display: block; }
  .diagram-note {
    margin-top: 16px;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.8;
    color: var(--text-ink);
    opacity: 0.45;
  }


  /* ==================== ターンオーバー アニメーション ==================== */
  .turnover {
    --cycle: 7s;
    max-width: 560px;
    margin: 26px auto 0;
    background: linear-gradient(170deg, #FFFFFF 0%, #FDF9FA 100%);
    border-radius: 20px;
    padding: 30px 24px 26px;
    box-shadow: 0 20px 50px -26px rgba(75,70,69,0.22);
    text-align: center;
  }

  .turnover-ttl {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--rose-deep);
    font-weight: 600;
    margin-bottom: 20px;
  }

  /* ── 細胞グリッド ── */
  .to-stage {
    --rowh: 15px;
    --gap: 5px;
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 30px 0 34px;
  }

  /* 6行分だけ見せる窓 */
  .to-viewport {
    height: calc(var(--rowh) * 6 + var(--gap) * 5);
    overflow: hidden;
  }

  .to-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }

  .to-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--gap);
    height: var(--rowh);
  }

  .to-cell {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: var(--cc, #E3D8DC);
  }
  /* 上ほど淡く（古い）、下ほど濃く（新しい） */
  .to-row.r0 .to-cell { --cc: linear-gradient(180deg,#EFE7E4,#E7DCD9); }
  .to-row.r1 .to-cell { --cc: linear-gradient(180deg,#EEDFE6,#E4CFDA); }
  .to-row.r2 .to-cell { --cc: linear-gradient(180deg,#E6CAD8,#DBBACB); }
  .to-row.r3 .to-cell { --cc: linear-gradient(180deg,#DAB2C6,#CB9DB5); }
  .to-row.r4 .to-cell { --cc: linear-gradient(180deg,#C994AE,#B87C9B); }
  .to-row.r5 .to-cell { --cc: linear-gradient(180deg,#B07290,#96597A); }
  .to-row.r6 .to-cell { --cc: linear-gradient(180deg,#A0637F,#8A4E6C); }

  /* ① 最上段が1列ずつ剥がれて消える */
  .to-row.r0 .to-cell {
    animation: cellPeel var(--cycle) ease-in-out infinite;
    animation-delay: calc(var(--c) * 0.035 * 1s);
  }
  @keyframes cellPeel {
    0%, 4%    { opacity: 1; transform: translateY(0) scale(1); }
    17%       { opacity: 0; transform: translateY(-13px) scale(0.88); }
    97%       { opacity: 0; transform: translateY(-13px) scale(0.88); }
    100%      { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ② 空いた最上段がつぶれ、全体が一段せり上がる */
  .to-row.r0 {
    animation: rowCollapse var(--cycle) cubic-bezier(0.65,0,0.35,1) infinite;
  }
  @keyframes rowCollapse {
    0%, 20%   { height: var(--rowh); margin-bottom: 0; }
    38%, 97%  { height: 0; margin-bottom: calc(var(--gap) * -1); }
    100%      { height: var(--rowh); margin-bottom: 0; }
  }

  /* ③ 最下段に新しい一段が生まれる */
  .to-row.r6 { height: 0; }
  .to-row.r6 .to-cell {
    animation: cellBorn var(--cycle) ease-out infinite;
    animation-delay: calc(var(--c) * 0.03 * 1s);
    opacity: 0;
  }
  .to-row.r6 {
    animation: rowGrow var(--cycle) cubic-bezier(0.34,1.3,0.5,1) infinite;
  }
  @keyframes rowGrow {
    0%, 52%   { height: 0; }
    70%, 97%  { height: var(--rowh); }
    100%      { height: 0; }
  }
  @keyframes cellBorn {
    0%, 55%   { opacity: 0; transform: scale(0.8); }
    72%, 97%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(0.8); }
  }

  /* 剥がれた角質が舞う */
  .to-flake {
    position: absolute;
    top: 26px;
    width: 26px; height: 12px;
    border-radius: 7px;
    background: linear-gradient(180deg,#F2EAE7,#E4D9D5);
    opacity: 0;
  }
  .to-flake.f1 { left: 24%; animation: flakeUp var(--cycle) ease-out infinite; }
  .to-flake.f2 { left: 66%; animation: flakeUp var(--cycle) ease-out infinite; animation-delay: 0.4s; }
  @keyframes flakeUp {
    0%, 5%   { opacity: 0; transform: translate(0,0) rotate(0deg); }
    13%      { opacity: 0.9; transform: translate(5px,-12px) rotate(8deg); }
    34%      { opacity: 0; transform: translate(18px,-30px) rotate(20deg); }
    100%     { opacity: 0; }
  }

  /* 下へ伝わる合図 */
  .to-signal {
    position: absolute;
    left: 50%; top: 34px;
    width: 9px; height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0%, var(--main-rose) 40%, var(--rose-deep) 100%);
    opacity: 0;
    animation: toSignal var(--cycle) ease-in-out infinite;
  }
  @keyframes toSignal {
    0%, 30%  { opacity: 0; transform: translateY(0); }
    36%      { opacity: 1; transform: translateY(6px); box-shadow: 0 0 0 9px rgba(184,138,162,0.30), 0 0 14px 3px rgba(184,138,162,0.5); }
    56%      { opacity: 1; transform: translateY(98px); box-shadow: 0 0 0 6px rgba(184,138,162,0.22), 0 0 12px 3px rgba(184,138,162,0.45); }
    66%      { opacity: 0; transform: translateY(112px); box-shadow: 0 0 0 20px rgba(184,138,162,0); }
    100%     { opacity: 0; }
  }

  /* 誕生の光 */
  .to-birth {
    position: absolute;
    left: 50%; bottom: 22px;
    width: 250px; height: 50px;
    margin-left: -125px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(184,138,162,0.7) 28%, rgba(216,181,196,0.32) 55%, transparent 76%);
    filter: blur(1px);
    opacity: 0;
    animation: toBirth var(--cycle) ease-out infinite;
    pointer-events: none;
  }
  @keyframes toBirth {
    0%, 56%  { opacity: 0; transform: scaleX(0.7); }
    70%      { opacity: 1; transform: scaleX(1); }
    88%      { opacity: 0.3; transform: scaleX(1.03); }
    100%     { opacity: 0; }
  }

  /* ── キャプション ── */
  .to-caption {
    position: relative;
    height: 26px;
    margin-top: 6px;
  }
  .to-caption .cap {
    position: absolute;
    inset: 0;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--heading);
    font-weight: 500;
    opacity: 0;
  }
  .to-caption .c1 { animation: capIn var(--cycle) ease-in-out infinite; }
  .to-caption .c2 { animation: capIn var(--cycle) ease-in-out infinite; animation-delay: calc(var(--cycle) * 0.3333); }
  .to-caption .c3 { animation: capIn var(--cycle) ease-in-out infinite; animation-delay: calc(var(--cycle) * 0.6666); }
  @keyframes capIn {
    0%        { opacity: 0; transform: translateY(5px); }
    3%, 30%   { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(-4px); }
  }

  /* ── 凡例 ── */
  .to-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(184,138,162,0.26);
  }
  .to-legend .lg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--text-ink);
    opacity: 0.86;
    white-space: nowrap;
  }
  .to-legend .dot {
    width: 20px; height: 10px;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .to-legend .dot.top { background: linear-gradient(180deg,#EFE7E4,#E2D6D2); }
  .to-legend .dot.sig { background: var(--sub-rose); width: 10px; border-radius: 50%; }
  .to-legend .dot.new { background: linear-gradient(180deg,#B07290,#96597A); }
  .to-legend .lg-arw { color: var(--sub-rose); font-size: 13px; }

  .to-disc {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.7;
    color: var(--text-ink);
    opacity: 0.45;
  }

  .to-note {
    margin-top: 16px;
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--rose-deep);
  }

  @media (prefers-reduced-motion: reduce) {
    .to-row, .to-cell, .to-flake, .to-signal, .to-birth,
    .to-caption .cap { animation: none !important; }
    .to-row.r6 { display: none; }
    .to-caption .c1 { opacity: 1; }
    .to-caption .c2, .to-caption .c3 { display: none; }
  }

  @media (max-width: 640px) {
    .turnover { padding: 24px 16px 22px; margin-left: -8px; margin-right: -8px; }
    .to-stage { padding: 22px 0 26px; }
    .to-stage { --rowh: 13px; --gap: 4px; }
    .to-legend { gap: 7px; }
    .to-legend .lg { font-size: 10.5px; }
    .to-caption .cap { font-size: 12px; }
  }

  /* ==================== ④ 悪循環ループ ==================== */
  .loop {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 720px;
    margin: 46px auto 0;
  }

  .loop-item {
    background: var(--white);
    border: 1px solid rgba(184,138,162,0.18);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
  }

  .loop-item .num {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--sub-rose);
    margin-bottom: 9px;
  }
  .loop-item .txt {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-ink);
    opacity: 0.85;
  }

  .loop-caption {
    margin-top: 28px;
    text-align: center;
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 15px;
    color: var(--main-rose);
    letter-spacing: 0.06em;
  }


  /* ④ 悪循環：ページ中盤のアンカー（濃色） */
  .sec-loop {
    background:
      radial-gradient(ellipse 760px 420px at 78% 8%, rgba(240,214,224,0.22) 0%, transparent 62%),
      radial-gradient(ellipse 900px 600px at 16% 4%, rgba(184,138,162,0.34) 0%, transparent 60%),
      radial-gradient(ellipse 700px 380px at 50% 104%, rgba(216,181,196,0.20) 0%, transparent 65%),
      linear-gradient(165deg, #6E5A62 0%, #5A4A52 55%, #4E4046 100%);
  }
  /* 上下を隣接セクションへ馴染ませる */
  .sec-loop::before,
  .sec-loop::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 90px;
    z-index: 1;
    pointer-events: none;
  }
  .sec-loop::before {
    top: 0;
    background: linear-gradient(180deg, rgba(237,230,223,0.55) 0%, rgba(237,230,223,0) 100%);
  }
  .sec-loop::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(250,250,249,0.42) 0%, rgba(250,250,249,0) 100%);
  }
  /* 斜めの光筋 */
  .sec-loop .inner::before {
    content: '';
    position: absolute;
    inset: -10% -20%;
    z-index: -1;
    background: repeating-linear-gradient(102deg,
      rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1.5px,
      transparent 2px, transparent 130px);
    pointer-events: none;
  }
  .sec-loop .label-sm { color: #E3C8D4; }
  .sec-loop .rule { background: rgba(255,255,255,0.45); }
  .sec-loop h2 { color: #FFFFFF; }
  .sec-loop .lead { color: rgba(255,255,255,0.92); }
  .sec.is-visible.sec-loop .lead.fade { opacity: 0.92; }
  .sec-loop .loop-item {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(2px);
  }
  .sec-loop .loop-item .num { color: #E3C8D4; }
  .sec-loop .loop-item .txt { color: rgba(255,255,255,0.9); opacity: 1; }
  .sec-loop .loop-caption { color: #EBD3DE; }

  /* ==================== ⑥ ホホバ 2つの理由 ==================== */
  .reasons {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .reason {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    background: var(--white);
    border-radius: 18px;
    padding: 32px 28px;
    box-shadow: 0 16px 40px -24px rgba(75,70,69,0.18);
  }

  .reason-badge {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sub-rose) 0%, var(--main-rose) 100%);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
  }
  .reason-badge .r { font-size: 8px; letter-spacing: 0.14em; opacity: 0.85; }
  .reason-badge .v {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 20px;
    font-weight: 700;
  }

  .reason-body h3 {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-ink);
    margin-bottom: 11px;
    line-height: 1.6;
  }
  .reason-body p {
    font-size: 13.5px;
    line-height: 2;
    color: var(--text-ink);
    opacity: 0.78;
  }

  .flora-stat {
    margin-top: 44px;
    padding: 30px 0;
    background: rgba(255,255,255,0.55);
    border-radius: 18px;
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
  }
  .flora-stat .cell {
    padding: 0 30px;
    text-align: center;
  }
  .flora-stat .cell + .cell { border-left: 1px solid rgba(184,138,162,0.25); }
  .flora-stat .v {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 700;
    color: var(--rose-deep);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .flora-stat .v small { font-size: 0.38em; font-weight: 500; margin-left: 2px; }
  .flora-stat .k {
    margin-top: 7px;
    font-size: 10.5px;
    color: var(--text-ink);
    opacity: 0.6;
    line-height: 1.7;
  }

  /* ── 主な成分 ── */
  .main-ing {
    margin-top: 38px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(184,138,162,0.22);
    border-radius: 16px;
    padding: 26px 24px 20px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .main-ing .h {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 12.5px;
    letter-spacing: 0.2em;
    color: var(--rose-deep);
    text-align: center;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .ing-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .ing {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
  }
  .ing .n {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 8px;
    line-height: 1.5;
  }
  .ing .d {
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--text-ink);
    opacity: 0.75;
  }
  .ing-note {
    margin-top: 16px;
    font-size: 10.5px;
    text-align: center;
    color: var(--text-ink);
    opacity: 0.5;
  }
  @media (max-width: 640px) {
    .ing-list { grid-template-columns: 1fr; gap: 10px; }
    .main-ing { padding: 22px 16px 18px; }
  }

  /* ==================== ⑦ 実体験 ==================== */
  .exp-card {
    background: var(--white);
    border-radius: 22px;
    padding: 46px 34px;
    box-shadow: 0 24px 56px -26px rgba(75,70,69,0.2);
    margin-top: 12px;
  }
  .exp-card .qm {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 46px;
    color: var(--sub-rose);
    line-height: 0.8;
    margin-bottom: 18px;
  }
  .exp-card p {
    font-size: 14.5px;
    line-height: 2.2;
    color: var(--text-ink);
    opacity: 0.87;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
  }
  .exp-card p:last-of-type { margin-bottom: 0; }

  .exp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(184,138,162,0.18);
  }
  .exp-tags span {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--main-rose);
    border: 1px solid var(--sub-rose);
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(216,181,196,0.07);
  }

  .exp-disc {
    margin-top: 20px;
    font-size: 10.5px;
    text-align: center;
    color: var(--text-ink);
    opacity: 0.45;
    line-height: 1.8;
  }

  /* ==================== ⑧ 使い方 ==================== */
  .steps {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--bg-main);
    border-radius: 16px;
    padding: 26px 24px;
  }

  .step-num {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(140deg, #C79FB3 0%, var(--main-rose) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 16px;
    font-weight: 600;
  }

  .step-body h3 {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-ink);
  }
  .step-body p {
    font-size: 13px;
    line-height: 1.95;
    color: var(--text-ink);
    opacity: 0.78;
  }
  .step-body .tip {
    margin-top: 11px;
    font-size: 11.5px;
    line-height: 1.85;
    color: var(--main-rose);
    background: rgba(216,181,196,0.13);
    border-radius: 8px;
    padding: 9px 13px;
    display: inline-block;
  }

  .usage-notes {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .usage-notes span {
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--text-ink);
    opacity: 0.8;
    border: 1px solid rgba(184,138,162,0.35);
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--white);
  }

  /* ==================== ⑨ 詰め替えパック ==================== */
  .sec-refill {
    background:
      radial-gradient(ellipse 700px 460px at 80% 8%, rgba(216,181,196,0.2) 0%, transparent 60%),
      var(--beige);
  }

  .refill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 46px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .refill-card {
    background: var(--white);
    border-radius: 20px;
    padding: 34px 22px 30px;
    text-align: center;
    box-shadow: 0 18px 46px -24px rgba(75,70,69,0.2);
  }

  /* アルミパックのイラスト（CSSのみ） */
  .pack {
    width: 96px;
    height: 124px;
    margin: 0 auto 22px;
    position: relative;
  }
  .pack-body {
    position: absolute;
    inset: 12px 0 0 0;
    background: linear-gradient(118deg,
      #EDE7E3 0%, #FBF9F8 18%, #E4DBD8 34%,
      #FDFCFB 52%, #E8DFDC 68%, #FAF7F6 84%, #E9E1DE 100%);
    border-radius: 5px 5px 12px 12px;
    box-shadow:
      inset 0 0 0 1px rgba(184,138,162,0.16),
      0 12px 26px -14px rgba(75,70,69,0.28);
    overflow: hidden;
  }
  /* パック中央のラベル帯 */
  .pack-body::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 38%;
    height: 34%;
    background: linear-gradient(180deg, rgba(216,181,196,0.5), rgba(184,138,162,0.42));
  }
  /* 上部シール部 */
  .pack-top {
    position: absolute;
    top: 0; left: 8%;
    width: 84%;
    height: 17px;
    background: linear-gradient(180deg, #F3EEEB 0%, #DED5D1 100%);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(184,138,162,0.18);
  }
  /* 注ぎ口 */
  .pack-spout {
    position: absolute;
    top: 4px; right: 10%;
    width: 15px;
    height: 20px;
    background: linear-gradient(150deg, var(--sub-rose), var(--main-rose));
    border-radius: 3px 3px 1px 1px;
    z-index: 2;
  }

  .refill-card .size {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-ink);
    line-height: 1;
  }
  .refill-card .size small {
    font-size: 14px;
    font-weight: 500;
    margin-left: 3px;
    opacity: 0.7;
  }
  .refill-card .equiv {
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--main-rose);
    letter-spacing: 0.04em;
    border: 1px solid var(--sub-rose);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-block;
    background: rgba(216,181,196,0.09);
  }
  .refill-card .who {
    margin-top: 16px;
    font-size: 11.5px;
    line-height: 1.85;
    color: var(--text-ink);
    opacity: 0.68;
  }

  .refill-merits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 34px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .merit {
    text-align: center;
    padding: 22px 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 14px;
  }
  .merit svg {
    width: 24px; height: 24px;
    stroke: var(--main-rose);
    margin-bottom: 10px;
  }
  .merit .m-t {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-ink);
    margin-bottom: 5px;
  }
  .merit .m-d {
    font-size: 10.5px;
    line-height: 1.75;
    color: var(--text-ink);
    opacity: 0.62;
  }

  .refill-howto {
    margin-top: 34px;
    background: rgba(255,255,255,0.72);
    border-radius: 14px;
    padding: 24px 22px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .refill-howto .h {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    color: var(--main-rose);
    margin-bottom: 13px;
    text-align: center;
  }
  .refill-howto ul { list-style: none; }
  .refill-howto li {
    font-size: 11.5px;
    line-height: 1.95;
    color: var(--text-ink);
    opacity: 0.72;
    padding-left: 15px;
    position: relative;
    margin-bottom: 5px;
  }
  .refill-howto li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: var(--main-rose);
  }

  .coming-soon {
    margin-top: 26px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--main-rose);
    opacity: 0.7;
  }

  /* ==================== ⑩ ラインナップ ==================== */
  .lineup-steps {
    margin-top: 46px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .lu {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--white);
    border-radius: 15px;
    padding: 20px 22px;
  }
  .lu.is-hero {
    box-shadow: 0 16px 40px -24px rgba(184,138,162,0.5);
    border: 1px solid rgba(184,138,162,0.3);
  }

  .lu-step {
    flex-shrink: 0;
    width: 62px;
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--main-rose);
    text-align: center;
    line-height: 1.5;
  }
  .lu-step b {
    display: block;
    font-size: 17px;
    font-weight: 700;
  }

  .lu-dot {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sub-rose), var(--main-rose));
    opacity: 0.9;
  }
  .lu.is-inner .lu-dot { background: linear-gradient(140deg, #E2DAD6, var(--silver)); }

  .lu-body { flex: 1; min-width: 0; }
  .lu-body .n {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-ink);
    margin-bottom: 4px;
  }
  .lu-body .n span {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.55;
    margin-left: 7px;
  }
  .lu-body .d {
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--text-ink);
    opacity: 0.68;
  }

  .lineup-foot {
    margin-top: 26px;
    text-align: center;
    font-size: 11px;
    line-height: 1.9;
    color: var(--text-ink);
    opacity: 0.5;
  }


  /* ==================== 背景画像セクション ==================== */
  .has-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* 白ヴェールで文字の可読性を確保 */
  .has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .has-bg > .inner { position: relative; z-index: 2; }

  .bg-solution {
    background-image: url('../img/bg_solution.jpg');
  }
  .bg-solution::before {
    background: linear-gradient(180deg,
      rgba(250,250,249,0.74) 0%,
      rgba(250,250,249,0.52) 45%,
      rgba(250,250,249,0.78) 100%);
  }

  .bg-jojoba {
    background-image: url('../img/bg_jojoba.jpg');
    background-position: center 40%;
  }
  .bg-jojoba::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.8) 0%,
      rgba(255,255,255,0.6) 40%,
      rgba(255,255,255,0.84) 100%);
  }

  .bg-experience {
    background-image: url('../img/bg_experience.jpg');
  }
  .bg-experience::before {
    background: linear-gradient(180deg,
      rgba(250,250,249,0.55) 0%,
      rgba(250,250,249,0.34) 50%,
      rgba(250,250,249,0.6) 100%);
  }

  @media (max-width: 640px) {
    .has-bg { background-attachment: scroll; }
    .bg-solution::before, .bg-jojoba::before, .bg-experience::before {
      background: rgba(255,255,255,0.85);
    }
  }

  /* ==================== ⑪ CTA ==================== */
  .sec-cta {
    position: relative;
    background:
      radial-gradient(ellipse 820px 520px at 22% 6%, rgba(255,255,255,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 700px 460px at 88% 96%, rgba(255,255,255,0.14) 0%, transparent 62%),
      linear-gradient(158deg, #A87891 0%, #8E6179 46%, #6F4B5F 100%);
    text-align: center;
    color: var(--white);
    padding: clamp(84px, 8vw, 128px) 24px;
    overflow: hidden;
  }
  .sec-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 110px;
    background: linear-gradient(180deg, rgba(250,250,249,0.4) 0%, rgba(250,250,249,0) 100%);
    pointer-events: none;
  }

  .cta-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.75fr) 1.25fr;
    gap: clamp(32px, 4.5vw, 68px);
    align-items: center;
    text-align: left;
  }
  .cta-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow:
      0 34px 70px -26px rgba(60,36,48,0.55),
      0 0 0 1px rgba(255,255,255,0.24);
  }
  .cta-body { text-align: center; }
  .sec-cta .label-sm { color: rgba(255,255,255,0.92); }
  .sec-cta .rule { background: rgba(255,255,255,0.5); }
  .sec-cta h2 { color: var(--white); }
  .sec-cta .lead { color: #FFFFFF; opacity: 1; text-shadow: 0 1px 8px rgba(80,50,64,0.35); }
  .sec-cta.is-visible .lead.fade { opacity: 1; }

  .cta-spec {
    margin: 36px auto 0;
    display: inline-flex;
    gap: 0;
    background: rgba(255,255,255,0.14);
    border-radius: 14px;
    overflow: hidden;
  }
  .cta-spec div {
    padding: 16px 26px;
    text-align: center;
  }
  .cta-spec div + div { border-left: 1px solid rgba(255,255,255,0.22); }
  .cta-spec .k { font-size: 10px; letter-spacing: 0.12em; opacity: 0.75; margin-bottom: 6px; }
  .cta-spec .v {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 15px;
    font-weight: 600;
  }
  .cta-spec .v .tax {
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    font-size: 10px;
    font-weight: 400;
    margin-left: 4px;
    opacity: 0.85;
  }

  .btn-cta {
    position: relative;
    margin-top: 44px;
    background: var(--white);
    color: #8E5F79;
    border: none;
    padding: clamp(22px, 2.1vw, 28px) clamp(56px, 6.5vw, 92px);
    font-size: clamp(15px, 1.25vw, 18px);
    letter-spacing: 0.2em;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    box-shadow:
      0 22px 48px -14px rgba(0,0,0,0.42),
      0 0 0 8px rgba(255,255,255,0.16);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    animation: ctaPulse 3.2s ease-in-out infinite;
  }
  .btn-cta::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 42%;
    background: linear-gradient(100deg, transparent, rgba(184,138,162,0.28), transparent);
    transform: skewX(-18deg);
    animation: ctaShine 4.2s ease-in-out infinite;
  }
  .btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 56px -14px rgba(0,0,0,0.5), 0 0 0 12px rgba(255,255,255,0.22);
  }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 22px 48px -14px rgba(0,0,0,0.42), 0 0 0 8px rgba(255,255,255,0.16); }
    50%      { box-shadow: 0 22px 48px -14px rgba(0,0,0,0.42), 0 0 0 15px rgba(255,255,255,0.09); }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-cta, .btn-cta::after { animation: none; }
  }

  .cta-note {
    margin-top: 22px;
    font-size: 11px;
    line-height: 1.9;
    color: rgba(255,255,255,0.72);
  }


  /* ==================== カートフォーム ==================== */
  .cart-form {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    background: rgba(255,255,255,0.94);
    border-radius: 999px;
    box-shadow: 0 10px 26px -12px rgba(60,36,48,0.5);
  }
  .cart-qty label,
  .cart-qty .unit {
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #6F4B5F;
    font-weight: 600;
  }
  .cart-qty select {
    font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #4B3441;
    background-color: #FFFFFF;
    border: 1px solid rgba(111,75,95,0.4);
    border-radius: 8px;
    padding: 7px 30px 7px 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F4B5F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px;
  }
  .cart-qty select:focus-visible {
    outline: 3px solid #6F4B5F;
    outline-offset: 2px;
  }

  .ship-msg {
    margin: -4px 0 2px;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    background: rgba(74,46,60,0.4);
    border-radius: 999px;
    padding: 9px 20px;
    text-shadow: 0 1px 6px rgba(70,44,56,0.5);
  }
  .ship-msg.is-free {
    background: #FFFFFF;
    color: #8A5570;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 8px 22px -10px rgba(60,36,48,0.5);
  }

  /* フォーム内なのでmargin-topは不要 */
  .cart-form .btn-cta { margin-top: 0; }
  .btn-cta:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 4px;
  }

  /* FVのボタンはaタグ化したので見た目を揃える */
  .hero .btn-primary,
  .hero .btn-secondary { text-decoration: none; }

  /* アンカー移動時に上が詰まらないように */
  #cart, #about { scroll-margin-top: 0; }

  @media (max-width: 640px) {
    .cart-form { gap: 16px; }
    .cart-qty { padding: 10px 18px; }
  }

  /* フッター */
  .footer {
    background: var(--text-ink);
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 40px 24px;
    font-size: 11px;
    line-height: 2;
    letter-spacing: 0.05em;
  }
  .footer .brand {
    font-family: 'Noto Serif JP', 'Noto Serif CJK JP', serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.85);
    margin-bottom: 10px;
  }

  /* ==================== レスポンシブ ==================== */
  @media (max-width: 640px) {
    .sec { padding: 72px 20px; }
    .sec-cta { padding: 80px 20px; }
    .loop { grid-template-columns: 1fr; }
    .refill-grid { grid-template-columns: 1fr; }
    .refill-merits { grid-template-columns: 1fr; gap: 10px; }
    .merit { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; }
    .merit svg { margin-bottom: 0; flex-shrink: 0; }
    .reason { flex-direction: column; gap: 16px; padding: 28px 22px; }
    .exp-card { padding: 34px 22px; }
    .skin-card { margin-left: -14px; margin-right: -14px; padding: 18px 6px 16px; border-radius: 16px; }
    .flora-stat .cell { padding: 0 18px; }
    .lu { flex-wrap: wrap; gap: 12px; }
    .lu-step { width: auto; text-align: left; }
    .cta-layout { grid-template-columns: 1fr; gap: 30px; }
    .cta-visual { max-width: 240px; margin: 0 auto; }
    .cta-spec { flex-direction: column; }
    .cta-spec div + div { border-left: none; border-top: 1px solid rgba(255,255,255,0.22); }
    .turnover .steps-row { flex-direction: column; gap: 6px; }
    .turnover .arw { transform: rotate(90deg); }
  }