/** Shopify CDN: Minification failed

Line 309:2 All "@import" rules must come first
Line 312:2 All "@import" rules must come first

**/
html { scroll-behavior: smooth; }
  .floating-button-container { position: fixed; top: 20%; right: -72px; z-index: 1000; width: 180px; height: 44px; }
  /* Gemini指摘#2: FVではメインCTAに視線を集中させるため初期は非表示。ヒーローCTAが画面外に出てからフェードイン */
  .floating-button { display: inline-block; width: 180px; height: 44px; line-height: 44px; background-color: rgb(253, 229, 32); color: rgb(0, 0, 0); text-align: center; text-decoration: none; border-radius: 0 0 8px 8px; transform: rotate(90deg); transform-origin: center center; font-weight: 500; font-size: 14px; font-family: var(--cc-font); letter-spacing: 1.2px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out; }
  .floating-button:hover { background-color: rgb(253, 229, 32); color: rgb(0, 0, 0); }

/* 購入エリア=クリーンな白（ヒーローの流れを受け継ぐ・特徴グレー帯と役割を分離） */
  .cc-quickplan { background: var(--cc-bg); padding: 28px 0 32px; }
  .cc-quickplan__inner { max-width: 560px; margin: 0 auto; padding: 0 20px; }
  /* 商品画像＋プラン情報を1つの塊にまとめる */
  .cc-quickplan__group { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
  .cc-quickplan__text { flex: 1 1 auto; min-width: 0; }
  .cc-quickplan__label {
    font-family: var(--cc-font-brand);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: #2E59A6; margin: 0 0 6px;
  }
  .cc-quickplan__name { font-family: var(--cc-font-brand); font-size: 15px; font-weight: 600; color: #1A1A1A; letter-spacing: 0.04em; margin: 0 0 8px; }
  .cc-quickplan__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
  .cc-quickplan__price { font-family: var(--cc-font-brand); font-size: 27px; font-weight: 700; color: #1A1A1A; letter-spacing: 0; line-height: 1; }
  .cc-quickplan__price-yen { font-size: 0.6em; font-weight: 600; margin-right: 1px; }
  .cc-quickplan__price-unit { font-size: 0.5em; font-weight: 500; color: #555; margin-left: 3px; }
  .cc-quickplan__percup { font-size: 12px; color: #777; white-space: nowrap; }
  .cc-quickplan__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .cc-quickplan__perks li { font-size: 12px; line-height: 1.6; color: #333; padding-left: 18px; position: relative; }
  .cc-quickplan__perks li::before { content: "✓"; position: absolute; left: 0; color: #2E59A6; font-weight: 700; }
  .cc-quickplan__media { flex: 0 0 128px; width: 128px; }
  .cc-quickplan__media img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
  .cc-quickplan__cta {
    display: block; text-align: center; text-decoration: none; white-space: nowrap;
    background: var(--cc-primary, #2E59A6); color: #fff;
    font-family: var(--cc-font); font-size: 15px; font-weight: 500; letter-spacing: 0.06em;
    border-radius: 300px; padding: 15px 24px;
    transition: background 0.3s var(--cc-ease-apple, ease), transform 0.4s var(--cc-ease-apple, ease), box-shadow 0.4s var(--cc-ease-apple, ease);
  }
  .cc-quickplan__cta:hover { background: #1E4080; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(46,89,166,0.22); }
  .cc-quickplan__cta:active { transform: scale(0.97); transition-duration: 0.12s; }
  @media (min-width: 769px) {
    .cc-quickplan { padding: 56px 0; }
    /* コンテナは最大幅を制限して中央寄せ。左=商品情報の塊 / 右=アクション */
    .cc-quickplan__inner {
      max-width: 1000px; padding: 0 20px;
      display: flex; align-items: center; justify-content: space-between; gap: 48px;
    }
    .cc-quickplan__group { flex: 0 1 auto; margin-bottom: 0; gap: 24px; }
    .cc-quickplan__media { flex-basis: 168px; width: 168px; }
    .cc-quickplan__cta { flex-shrink: 0; padding: 18px 56px; font-size: 16px; }
    .cc-quickplan__name { font-size: 17px; }
    .cc-quickplan__price { font-size: 32px; }
  }

.cc-ps { font-family: var(--cc-font); background: var(--cc-bg-warm); padding: 48px 0 24px; }
  .cc-ps__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  /* PRODUCT ラベルは左揃え・下余白ちょい広め（cc-section-label 共通スタイルの上書き） */
  .cc-ps__label { text-align: left; margin: 0 0 24px; }
  .cc-ps__row { display: flex; flex-direction: row; justify-content: space-between; gap: 40px; width: 100%; min-width: 0; }
  .cc-ps-left { width: 50%; min-width: 0; }
  .cc-ps-right { width: 50%; padding-left: 60px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .cc-ps-gallery { display: flex; flex-direction: column; gap: 16px; }
  .cc-ps-main { position: relative; aspect-ratio: 1/1; background: #F0F0F0; border-radius: 8px; overflow: hidden; }
  .cc-ps-slide-inner { aspect-ratio: 1; background: #F0F0F0; display: flex; align-items: center; justify-content: center; border: none !important; outline: none !important; box-shadow: none !important; }
  .cc-ps-slide-inner img { width: 100%; height: 100%; object-fit: contain; display: block; border: none !important; outline: none !important; box-shadow: none !important; }
  .cc-ps-main .splide__slide,
  .cc-ps-main .splide__slide.is-active,
  .cc-ps-main .splide__list li { border: none !important; outline: none !important; box-shadow: none !important; }
  .cc-ps-thumb-inner img { border: none !important; outline: none !important; box-shadow: none !important; }
  .cc-ps-main .splide__arrows .splide__arrow { width: 32px; height: 32px; border-radius: 50%; background: #CCCCCC; opacity: 0.7; border: none; }
  .cc-ps-main .splide__arrow--prev { left: 12px; } .cc-ps-main .splide__arrow--next { right: 12px; }
  .cc-ps-thumbs { height: 120px; }
  .cc-ps-thumbs .splide__list { gap: 16px; }
  .cc-ps-thumbs .splide__slide,
  .cc-ps-thumbs .splide__slide.is-active { border: none !important; outline: none !important; box-shadow: none !important; }
  .cc-ps-thumb-inner { width: 120px; height: 120px; border-radius: 6px; overflow: hidden; background: #F0F0F0; border: none !important; opacity: 0.5; transition: opacity 0.2s; }
  .cc-ps-thumbs .splide__slide.is-active .cc-ps-thumb-inner { opacity: 1; }
  .cc-ps-thumb-inner img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .cc-ps-brand { font-family: var(--cc-font-brand); font-size: 28px; font-weight: 600; color: #1A1A1A; margin: 0 0 16px; letter-spacing: 0.05em; }
  .cc-ps-tab-container { display: flex; border: 2px solid #2E59A6; border-radius: 50px; height: 52px; overflow: hidden; margin-bottom: 16px; }
  .cc-ps-tab { flex: 1; border: none; cursor: pointer; font-family: var(--cc-font); font-size: 16px; font-weight: 500; color: #2E59A6; background: transparent; transition: background-color 0.2s, color 0.2s; }
  .cc-ps-tab.active { background: #2E59A6; color: #FFFFFF; font-weight: 700; border-radius: 50px; }
  .cc-ps-category { font-family: var(--cc-font-brand); font-size: 13px; font-weight: 400; color: #666; margin: -12px 0 16px; letter-spacing: 0.04em; }
  .cc-ps-tagline { font-family: var(--cc-font); font-size: 14px; font-weight: 500; color: #333; margin: 0 0 20px; }
  .cc-ps-headings { margin-bottom: 8px; }
  .cc-ps-heading-title { font-family: var(--cc-font); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; color: #1A1A1A; margin: 0 0 8px; }
  .cc-ps-heading-subtitle { font-size: 18px; font-weight: 400; color: #333333; margin: 0 0 12px; }
  .cc-ps-heading-description { font-size: 15px; font-weight: 400; line-height: 1.8; color: #333333; }
  .cc-ps-heading-description p { margin: 0 0 8px; }
  .cc-ps-section-heading { font-size: 24px; font-weight: 500; color: #333333; margin: 16px 0; }
  .cc-ps-section-heading--hidden { display: none; }
  /* プロダクトセレクター: COFFEECLUB・やさしい冴えを考えたコーヒー・飲むたび冴え・(SUBSCRIPTION)は表示しない */
  .cc-ps-brand,
  .cc-ps-category,
  .cc-ps-tagline,
  .cc-ps-headings { display: none !important; }
  .cc-ps-variant-group--hidden { display: none !important; }
  .cc-ps-variant-card { border-radius: 8px; margin-bottom: 16px; transition: border-color 0.2s; overflow: hidden; border: 1px solid #CCCCCC; }
  .cc-ps-variant-card.selected { border: 2px solid #2E59A6; }
  .cc-ps-variant-label { display: flex; align-items: center; padding: 14px 20px; min-height: 64px; cursor: pointer; background: #FFFFFF; }
  .cc-ps-radio { appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2E59A6; background: #FFF; margin: 0 12px 0 0; flex-shrink: 0; position: relative; cursor: pointer; }
  .cc-ps-radio:checked::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #2E59A6; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .cc-ps-variant-name-wrap { display: flex; flex-direction: column; gap: 0; min-width: 0; }
  /* 名前とおすすめバッジを1行に（横スペース節約） */
  .cc-ps-variant-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cc-ps-variant-name { font-size: 16px; font-weight: 700; color: #1A1A1A; display: block; }
  .cc-ps-variant-recommend { font-size: 12px; font-weight: 400; color: #555; display: block; margin-top: 2px; }
  .cc-ps-variant-sublabel { font-size: 12px; font-weight: 400; color: #999; display: block; margin-top: 2px; }
  .cc-ps-popular-badge { display: inline-block; background: #2E59A6; color: #FFF; border-radius: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; vertical-align: middle; white-space: nowrap; flex-shrink: 0; }
  /* 「単品より毎月○円お得」はカード下部に独立行で右寄せに（横並び時の折返しを解消） */
  .cc-ps-variant-discount-row {
    display: flex;
    justify-content: flex-end;
    margin: 0 20px 12px;
  }
  .cc-ps-variant-discount {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cc-primary);
    background: rgba(46, 89, 166, 0.08);
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .cc-ps-variant-discount strong { font-weight: 700; }
  .cc-ps-variant-spacer { flex: 1; min-width: 12px; }
  /* FV検証: 価格ブロックは常に縦積み右寄せ・折返し禁止（モバイルの改行乱れ対策） */
  .cc-ps-variant-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex-shrink: 0; }
  .cc-ps-variant-prices > span { white-space: nowrap; }
  .cc-ps-variant-prices .cc-ps-price-ongoing { margin-top: 2px; }
  .cc-ps-variant-prices .cc-ps-per-cup { margin-top: 2px; }
  .cc-ps-price-initial { font-size: 18px; font-weight: 700; color: #1A1A1A; }
  .cc-ps-price-initial-prefix { font-size: 13px; font-weight: 400; color: #666; }
  .cc-ps-price-ongoing { font-size: 13px; font-weight: 400; color: #666; display: block; }
  .cc-ps-old-price { font-size: 14px; color: #999999; text-decoration: line-through; }
  .cc-ps-price { font-size: 16px; font-weight: 700; color: #1A1A1A; }
  .cc-ps-per-cup { font-size: 12px; color: #999; }
  .cc-ps-discount-badge { background: #2E59A6; color: #FFFFFF; border-radius: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; }
  .cc-ps-price-note { font-size: 12px; color: #999; margin-top: 8px; padding-top: 8px; border-top: 1px solid #D8E4F8; }
  .cc-ps-expanded-inner > p:last-child { font-size: 12px; color: #999; margin-top: 8px; padding-top: 8px; border-top: 1px solid #D8E4F8; }
  .cc-ps-cycle-wrap { padding: 12px 20px; background: #f9f9f9; border-top: 1px solid #eee; display: none; }
  .cc-ps-variant-card.selected .cc-ps-cycle-wrap { display: block; }
  .cc-ps-cycle-label { font-size: 13px; color: #333; margin: 0 0 6px; font-weight: 500; }
  .cc-ps-plan-select { width: 100%; max-width: 280px; padding: 8px 12px; font-size: 14px; border: 1px solid #ccc; border-radius: 6px; font-family: var(--cc-font); background: #fff; }
  .cc-ps-expanded { background: #EEF4FF; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; }
  .cc-ps-variant-card.selected .cc-ps-expanded { max-height: 500px; padding: 20px; }
  .cc-ps-expanded-inner p { font-size: 14px; color: #333333; line-height: 1.8; margin: 0 0 8px; }
  /* アイコン付きリスト: 箇条書きインデントを撤去しflex化。アイコンを左端に寄せ、テキスト幅を最大化して不自然な改行を防止 */
  .cc-ps-expanded-inner ul { list-style: none; padding-left: 0; margin: 0 0 8px; }
  .cc-ps-expanded-inner li { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: #333333; line-height: 1.8; }
  .cc-ps-expanded-inner strong { font-weight: 700; display: block; margin-top: 12px; }
  .cc-ps-cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; background: #FDE520; color: #1A1A1A; font-size: 18px; font-weight: 500; letter-spacing: 1.2px; border-radius: 50px; border: none; cursor: pointer; margin-top: 20px; text-decoration: none; transition: background-color 0.2s; font-family: var(--cc-font); box-sizing: border-box; }
  .cc-ps-cta:hover { background: #e6cf1c; }
  /* CTA直下の補足（定期便=解約OK / 単品=予約販売の発送時期） */
  .cc-ps-cta-sub {
    font-family: var(--cc-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--cc-text-light, #666);
    text-align: center;
    margin: 10px 0 0;
  }
  /* CTA遷移ローディング演出: 画像が左90度→元に戻るを各0.7秒でループ */
  .cc-cta-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .cc-cta-loading.is-active { display: flex; }
  .cc-cta-loading__img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    transform-origin: 50% 50%;
    animation: cc-cta-loading-rotate 1.4s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes cc-cta-loading-rotate {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(-90deg); } /* 左に90度 */
    100% { transform: rotate(0deg); }   /* 元に戻る */
  }
  @media (prefers-reduced-motion: reduce) {
    .cc-cta-loading__img { animation-duration: 2.8s; }
  }
  .cc-ps-benefits { margin-top: 20px; }
  .cc-ps-benefits--hidden { display: none !important; }
  .cc-ps-benefits-list { list-style: none; margin: 0; padding: 0; font-family: var(--cc-font); font-size: 13px; color: var(--cc-text-light, #666); line-height: 1.7; }
  .cc-ps-benefits-list li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .cc-ps-benefits-list li:last-child { margin-bottom: 0; }
  .cc-ps-benefits-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--cc-primary); margin-top: 4px; }
  .cc-ps-benefits-icon svg { display: block; }
  .cc-ps-cta-sub { font-size: 13px; color: #666666; text-align: center; margin-top: 8px; }
  .payment-icons-container { margin-top: 25px; text-align: center; border-top: 1px solid var(--color-border-light, var(--cc-border, #E8E8E6)); padding-top: 20px; }
  .payment-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #666; letter-spacing: 0.05em; }
  .payment-icons-list { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; flex-direction: row; }
  .payment-icons-list img { height: 22px; max-height: 22px; max-width: 40px; width: auto; object-fit: contain; opacity: 0.8; transition: opacity 0.2s; flex-shrink: 0; display: block; }
  .cc-ps-no-blocks { font-size: 14px; color: #666; padding: 20px; margin: 0; background: #f5f5f5; border-radius: 8px; }
  @media (min-width: 769px) { .cc-ps { padding: 72px 0 40px; } }
  @media (max-width: 768px) { .cc-ps__inner { gap: 24px; } .cc-ps__row { flex-direction: column; gap: 24px; } .cc-ps-left, .cc-ps-right { width: 100%; padding-left: 0; } .cc-ps-heading-title { font-size: 28px; } }

  /* #11/#1: 装飾の縦長画像を撤去し白基調に統一（PC全画面での見切れも解消） */
  .cc-value-band {
    background-color: var(--cc-bg);
  }
  @media (max-width: 768px) {
    /* SP: 見出し → 表 → 本文(パンチライン) → 注釈 の縦並び、全体中央揃え（DOM順そのまま） */
    .cc-cost__intro { text-align: center; }
    /* 見出しサイズは全セクション SP22/PC28 で統一。COSTのみ本文が26字と長く
       375px幅に1行目(15字)が収まらないため、SPだけ19pxの例外 */
    .cc-cost .cc-cost__heading {
      color: var(--cc-text);
      text-align: center;
      word-break: keep-all;
      overflow-wrap: break-word;
      font-size: 19px;
      max-width: none;
      margin: 0 auto 20px;
    }
    .cc-cost__block { margin: 0 auto 20px; }
    .cc-cost__text { text-align: center; }
    .cc-cost .cc-cost__punchline {
      color: var(--cc-text);
      text-align: center;
      max-width: 30ch;
      margin: 0 auto;
    }
    .cc-cost .cc-cost__note { color: var(--cc-text-muted); text-align: center; margin: 14px auto 0; }
  }
  .cc-reviews {
    padding: 56px 0;
    background: transparent;
  }
  .cc-reviews .cc-section-label { color: var(--cc-primary); text-align: left; }
  /* SP: VOICE・FAQ・JOURNALのタイトル（ラベル＋見出し）は中央揃え */
  @media (max-width: 768px) {
    .cc-reviews .cc-section-label,
    .cc-reviews__heading,
    .cc-faq .cc-section-label,
    .cc-faq__heading,
    .cc-journal .cc-section-label,
    .cc-journal__heading {
      text-align: center !important;
    }
    .cc-reviews__head { justify-content: center; }
  }
  .cc-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px; margin: 8px 0 24px; }
  .cc-reviews__heading { font-family: var(--cc-font-brand); font-weight: 500; font-size: 22px; letter-spacing: 0.06em; color: var(--cc-text); margin: 0; }
  .cc-reviews__agg { display: inline-flex; align-items: baseline; gap: 6px; }
  .cc-reviews__stars { color: #E8A400; font-size: 16px; letter-spacing: 1px; }
  .cc-reviews__star-half { position: relative; color: #C7B9A0; }
  .cc-reviews__score { font-family: var(--cc-font-brand); font-weight: 700; font-size: 20px; color: var(--cc-text); }
  .cc-reviews__count { font-size: 12px; color: #6B6459; }
  /* 矢印ナビ（PCで表示） */
  .cc-reviews__nav { display: none; gap: 8px; margin-left: auto; align-self: center; }
  .cc-reviews__arrow {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cc-border);
    background: #fff; color: var(--cc-primary); font-size: 20px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  }
  .cc-reviews__arrow:hover { background: var(--cc-secondary); border-color: var(--cc-primary); }
  .cc-reviews__arrow:disabled { opacity: 0.35; cursor: default; }
  /* カルーセル（横スクロール＋スナップ） */
  .cc-reviews__grid {
    display: flex; gap: 14px; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cc-reviews__grid::-webkit-scrollbar { display: none; }
  .cc-review {
    /* SP: 次カードが約2割見切れる幅。gap分を差し引いても常に隣がのぞく */
    flex: 0 0 78%; max-width: 300px; scroll-snap-align: start;
    margin: 0; background: #fff; border: 1px solid var(--cc-border); border-radius: 14px;
    padding: 20px 22px; display: flex; flex-direction: column; gap: 10px;
  }
  .cc-review__stars { color: #E8A400; font-size: 14px; letter-spacing: 1px; }
  .cc-review__star-off { color: #D8CCB8; }
  .cc-review__text { font-family: var(--cc-font); font-size: 14px; line-height: 1.9; color: #1A1A1A; margin: 0; }
  .cc-review__meta { font-size: 12px; color: #6B6459; font-weight: 500; }
  @media (min-width: 769px) {
    .cc-reviews { padding: 88px 0; }
    .cc-reviews__heading { font-size: 28px; }
    .cc-reviews__nav { display: flex; }
    .cc-reviews__grid { gap: 20px; }
    .cc-review { flex-basis: 320px; max-width: 320px; }
  }

/* ==========================================================================
     COFFEE CLUB Top Page —  Rebuild v3.0
     Mobile-first. Breakpoint: 768px.
     Design:  structure × Recess restraint × Nothing/Snow Peak visual tone
     v3: serif headings, pill buttons, scroll animations, refined spacing
     ========================================================================== */

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

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

  /* ----- CSS Variables ----- */
  :root {
    --cc-primary: #2E59A6;
    --cc-accent: #FDE520;
    /* #11: 白基調に統一（生成り/サンドの暖色を廃し、白＋ごく淡いクール系ニュートラルで「すっきり」）。アクセント黄・プライマリ青は維持 */
    --cc-bg: #FFFFFF;        /* ベースは白 */
    --cc-bg-warm: #F5F6F8;   /* 帯：ごく淡いクールグレーで区切り */
    --cc-bg-alt: #F5F6F8;
    --cc-neutral: #EEF0F3;
    --cc-secondary: #EEF4FF;
    --cc-text: #1A1A1A;
    --cc-text-light: #777777;
    --cc-text-muted: #8C939C;
    --cc-border: #E7E9ED;
    --cc-border-card: #E8EDF5;
    --cc-border-facts: #D8E4F8;
    --cc-bg-card: #F8FAFD;
    --cc-bg-facts: #F8FAFD;
    /* ==================== FONT SYSTEM ====================
       2フォント運用：
         --cc-font       : 本文（Noto Sans JP）
         --cc-font-brand : 見出し・ブランド要素すべて（秀英角ゴシック銀 Std / Typekit kitId=jks3tmm）
       weight ルール（Adobe Fonts配信は 400 / 500 / 600 の3段）：
         600 = Bold : メインコピー「冴えたまま、いこう。」など、最重要ヒーローコピー限定
         500 = M    : 通常のセクション見出し（全て統一）
         400 = L    : 補助的ラベル・キャプション・小見出しの装飾
       ※ 個別セクションだけ weight を上げないこと（見出しの重みは全ページで統一） */
    --cc-font:       "Noto Sans JP", sans-serif;
    --cc-font-brand: "dnp-shuei-gothic-gin-std", "Noto Sans JP", sans-serif;
    --cc-radius-pill: 300px;
    --cc-radius-card: 12px;
    --cc-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    /* Apple-design skill: スプリング的な"効いてから素早く落ち着く"カーブ */
    --cc-ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
    --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ----- 白/薄い背景セクション：テーマの白文字を上書きし本文を読めるように ----- */
  .cc-concept,
  .cc-support,
  .cc-why,
  .cc-taste,
  .cc-ingredients,
  .cc-one-stick,
  .cc-cost {
    color: var(--cc-text);
  }
  /* 本文系の黒字統一。!important は使わない（上書きしたい場合はより具体的なセレクタで） */
  .cc-concept p,
  .cc-concept .cc-concept__body,
  .cc-why .cc-why__text,
  .cc-taste .cc-taste__body,
  .cc-taste .cc-taste__heading,
  .cc-ingredients .cc-ingredients__heading,
  .cc-ingredients .cc-ingredients__group-items,
  .cc-cost .cc-cost__versus-label,
  .cc-cost .cc-cost__versus-price,
  .cc-cost .cc-cost__versus-desc {
    color: var(--cc-text);
  }
  .cc-cost .cc-cost__versus-price--highlight {
    color: var(--cc-primary);
  }
  /* COSTの左テキストはクリーム地の上にあるため黒字（COSTラベルのみブランド青） */
  .cc-cost .cc-cost__heading,
  .cc-cost .cc-cost__punchline {
    color: var(--cc-text);
  }
  .cc-cost .cc-cost__note { color: var(--cc-text-muted); }
  .cc-proof .cc-proof__badge {
    color: var(--cc-primary);
  }
  .cc-proof .cc-proof__reviewer {
    color: var(--cc-text-muted);
  }
  .cc-ingredients .cc-ingredients__group-name {
    color: var(--cc-primary);
  }

  /* ----- Width helper (from V35 — do NOT modify contents__wrap) ----- */
  .top__constrained__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ----- Section Label（eyebrow: 見出し直前の青色英字ラベル） -----
     全セクション共通: CONCEPT / BENEFITS / PRODUCT / INGREDIENTS / VOICE / COST / FAQ / JOURNAL
     色は必ずブランド青。text-align はセクション側の設計に従って上書き可 */
  .cc-section-label {
    font-family: var(--cc-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cc-primary);
    text-align: center;
    margin: 0 0 20px;
  }

  /* ----- Shared CTA Button (pill shape like ) ----- */
  .cc-btn {
    display: inline-block;
    background: var(--cc-primary);
    color: #fff;
    font-family: var(--cc-font-brand);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    padding: 16px 56px;
    border-radius: var(--cc-radius-pill);
    border: none;
    cursor: pointer;
    transition: background 0.3s var(--cc-ease), transform 0.2s var(--cc-ease);
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .cc-btn:hover { background: #1E4080; transform: translateY(-1px); }
  .cc-btn--on-blue { background: var(--cc-accent); color: var(--cc-text); }
  .cc-btn--on-blue:hover { background: #E8CE00; }
  .cc-btn--outline {
    background: transparent;
    color: var(--cc-primary);
    border: 1.5px solid var(--cc-primary);
  }
  .cc-btn--outline:hover { background: var(--cc-primary); color: #fff; }

  /* ----- Image reset（ヒーロー背景imgは除外） ----- */
  [class^="cc-"] img:not(.cc-hero__bg-sp-strut):not(.cc-hero__bg-sp-img):not(.cc-hero__product-gif) { max-width: 100%; height: auto; display: block; }

  /* ----- Scroll Fade-in Animation ----- */
  .cc-fade {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--cc-ease), transform 0.7s var(--cc-ease);
  }
  .cc-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ==========================================================================
     Section 1: Hero
     ========================================================================== */
  .cc-hero {
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .cc-hero {
      position: relative;
      display: flex;
      flex-direction: column;
      height: auto;
      min-height: 0;
      background: #fff !important;
      overflow: hidden;
    }
  }
  @media (min-width: 769px) {
    .cc-hero { background: #ffffff; }
  }
  .cc-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .cc-hero__bg-sp {
    display: none;
  }
  .cc-hero__bg-pc {
    display: none;
  }
  @media (max-width: 768px) {
    /* SP: 縦Ver.背景を絶対配置でheroの上部に敷き、h1「冴えたまま、いこう。」下端付近まで延ばす。
       コンテンツはz-indexで重ねてsky bgの上にテキスト。 */
    /* 新グラデ縦Ver.をhero全体に敷く（tube＋テキスト全部が同じ背景の上）。top:68(ヘッダー下)〜bottom:0(hero下端) */
    .cc-hero__bg-sp {
      display: block;
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      overflow: hidden;
      flex-shrink: 0;
      pointer-events: none;
      background: none !important;
    }
    .cc-hero__bg-sp-strut,
    .cc-hero__bg-sp img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: cover;
      object-position: center;
      visibility: visible;
      pointer-events: none;
    }
    /* コンテンツはsky背景に重なる。上部にGIF領域(55vh)分のパディング */
    .cc-hero__content {
      position: relative;
      z-index: 3;
      padding-top: 55vh;
    }
  }
  @media (min-width: 769px) {
    .cc-hero__bg-pc {
      display: block;
      background-size: cover;
      background-position: center bottom;
    }
  }

  /* 紙管アニメ（透過WebP）オーバーレイ。振り子は廃止し、WebP内蔵の回転モーションのみ。
     drop-shadowでアルファ形状に沿った疑似影（右下10px・半透明）——黒複製レイヤ方式と同じ見た目を追加転送ゼロで実現 */
  .cc-hero__product-gif {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    height: auto;
    background: transparent;
    filter: drop-shadow(10px 10px 6px rgba(20, 40, 80, 0.28));
  }
  @media (max-width: 768px) {
    /* SP: 常にbg中央（bg=min(74vh,640px)）。紙管サイズ70%（従来比） */
    .cc-hero__product-gif {
      top: calc(min(37vh, 320px) + 68px);
      left: 50%;
      transform: translate(-50%, -50%);
      width: 86.8vw;
      max-width: 434px;
      max-height: min(50.4vh, 420px);
    }
  }
  @media (min-width: 769px) {
    /* PC: 中央やや下。紙管サイズ70%（従来比）。hero(overflow:hidden)で下端が切れないようmax-heightを抑える */
    .cc-hero__product-gif {
      top: 52%;
      right: max(4%, calc(50% - 660px));
      left: auto;
      transform: translateY(-50%);
      width: 26.6vw;
      max-width: 434px;
      min-width: 266px;
      max-height: 50.4vh;
    }
  }
  .cc-hero__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
    pointer-events: none;
  }
  @media (max-width: 768px) {
    .cc-hero__overlay {
      display: none !important;
    }
  }
  .cc-hero__content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    color: #1A1A1A;
    padding: 0 24px 32px;
    padding-top: 8%;
    box-sizing: border-box;
    pointer-events: none;
  }
  @media (max-width: 768px) {
    /* sky bg(min(74vh, 640px), absolute, top:68pxから)の直後からテキスト開始（重複なし）。
       padding-topは bg高さと同値。大モニタでvhが巨大化してもpx上限で制限。 */
    .cc-hero__content {
      position: relative;
      inset: auto;
      z-index: 3;
      flex-shrink: 0;
      justify-content: flex-start;
      align-items: center;
      margin: 0;
      padding: min(74vh, 640px) 24px 32px; /* 下=チェック→背景終わりの余白 */
      background: transparent;
    }
    .cc-hero__main {
      color: #2E59A6;
      margin: 0 0 16px;
    }
    .cc-hero__category {
      color: #555;
      margin: 0 0 16px; /* h1の下余白(SP:16px)と揃えて上下対称に */
    }
    .cc-hero .cc-btn--outline {
      background: #fff;
      color: #2E59A6;
      border-color: #2E59A6;
    }
  }
  .cc-hero__content .cc-hero__ctas { pointer-events: auto; }
  .cc-hero__content .cc-btn { pointer-events: auto; }
  .cc-hero__main {
    font-family: var(--cc-font-brand); /* 秀英ゴシック銀 Std Bold（weight:600） */
    font-weight: 600;
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 0.14em;
    margin: 0 0 32px;
    color: #2E59A6;
  }
  .cc-hero__category {
    font-family: var(--cc-font-brand);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: #555;
    margin: 0 0 20px; /* h1の下余白(PC:20px)と揃えて上下対称に */
    order: -1;
  }
  .cc-hero__sub {
    display: none;
  }
  /* FV検証: 味の安心コピー（モバイル=白背景で濃色、PC=画像上で白） */
  .cc-hero__reassure {
    font-family: var(--cc-font);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.85;
    color: #333333;
    margin: 0 0 14px;
    max-width: none;
  }
  /* #10: SPは強制改行(<br>)を無効化し、幅に応じて自然に折り返す */
  @media (max-width: 768px) {
    .cc-hero__reassure br { display: none; }
  }
  /* FV検証: オファー/解約安心のピル群 */
  .cc-hero__offers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 0;
    margin: 0 0 18px;
  }
  /* チェック付きのプレーン訴求（黄色強調は廃止）。ブランド青で表示 */
  .cc-hero__offers li {
    font-family: var(--cc-font);
    font-weight: 600;
    font-size: 13px;
    color: var(--cc-primary);
    background: transparent;
    border: none;
    padding: 0;
    white-space: nowrap;
  }
  .cc-hero__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    margin-top: 0;
  }
  .cc-hero__content .cc-btn {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    white-space: nowrap;
    padding: 12px 20px;
    font-size: 13px;
  }
  .cc-hero .cc-btn--outline {
    color: #2E59A6;
    border: 1.5px solid #2E59A6;
    background: #fff;
  }
  .cc-hero .cc-btn--outline:hover {
    background: #2E59A6;
    color: #fff;
  }
  /* FV内メインCTA。黄色ピル型でブランドの購入CTA(cc-ps-cta)と同じトーン。SP=幅いっぱいに近い、PC=中央固定幅。
     background のみ !important（外部CSS由来の透明化と競合した実績があるため）。他プロパティは通常詳細度で十分 */
  .cc-hero .cc-hero__cta-primary,
  a.cc-hero__cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    height: 52px;
    padding: 0 24px;
    margin: 20px auto 16px;
    background-color: #FDE520 !important;
    background-image: none !important;
    color: #1A1A1A;
    font-family: var(--cc-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.06em;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .cc-hero .cc-hero__cta-primary:hover,
  a.cc-hero__cta-primary:hover {
    background-color: #e6cf1c !important;
    color: #1A1A1A;
    transform: translateY(-1px);
  }

  @media (min-width: 769px) {
    /* 大画面でも sky bg は横幅いっぱいに広げる。max-width で制限しない */
    .cc-hero {
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      /* aspect-ratio は使わず高さを直接指定（極端に広い画面でheroが縦に伸びるのを防止） */
      aspect-ratio: auto;
      height: clamp(480px, 78vh, 900px);
      min-height: 480px;
    }
    /* CONCEPT等と同じ1280グリッドの左ラインにテキストを揃える */
    .cc-hero__content {
      align-items: flex-start;
      text-align: left;
      justify-content: center;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 36px;
      padding-top: 6%;
    }
    .cc-hero__content .cc-btn { padding: 14px 28px; font-size: 14px; }
    .cc-hero__ctas { justify-content: flex-start; gap: 16px; margin-top: 0; }
    /* PC文字組: 8pxリズムで縦間隔を統一（category 24 → h1 24 → reassure 32 → CTA → 16 → バッジ） */
    .cc-hero__main { font-size: 50px; letter-spacing: 0.14em; margin-bottom: 24px; color: #ffffff; }
    .cc-hero__category { color: #ffffff; font-size: 14px; line-height: 2; margin-bottom: 24px; }
    /* FV検証: PCは画像上なので白文字＋チップは左寄せ */
    .cc-hero__reassure { color: #ffffff; line-height: 2.1; margin-bottom: 32px; }
    /* CTAの上余白はreassure側に一元化（二重余白を排除）。左揃えなのでauto中央も解除 */
    .cc-hero .cc-hero__cta-primary { margin: 0 0 16px; }
    .cc-hero__offers { justify-content: flex-start; }
    .cc-hero__offers li { color: var(--cc-primary); }
  }

  /* ==========================================================================
     Section 1.5: 機能便益（アイコン4つ）
     ========================================================================== */
  /* ヒーロー直下に配置。PC=4列横並び、SP=2×2グリッド。既存の信頼バッジ(HACCP等)より一つ上に来る */
  .cc-benefits {
    background: #fff;
    padding: 28px 0 32px;
  }
  .cc-benefits__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
  }
  /* BENEFITS 見出しラベルは他セクションよりアイコン間隔を広めに（PCで拡大） */
  .cc-benefits .cc-section-label { margin-bottom: 24px; }
  .cc-benefits__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 32px;
    justify-items: center;
    text-align: center;
  }
  .cc-benefits__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 240px;
  }
  .cc-benefits__icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }
  .cc-benefits__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .cc-benefits__title {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--cc-primary);
    margin: 0 0 8px;
    text-align: center;
  }
  .cc-benefits__desc {
    font-family: var(--cc-font);
    font-size: 12.5px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    color: var(--cc-text);
    margin: 0;
    text-align: center;
    word-break: keep-all;
  }
  /* SP用の改行（意味の区切りで折り返し）。PCでは無効化 */
  .cc-benefits__desc-br { display: inline; }
  @media (min-width: 769px) {
    .cc-benefits { padding: 72px 0 56px; }
    .cc-benefits .cc-section-label { margin-bottom: 48px; }
    .cc-benefits__grid { grid-template-columns: repeat(4, 1fr); column-gap: 32px; row-gap: 40px; }
    .cc-benefits__icon { width: 88px; height: 88px; margin-bottom: 28px; }
    .cc-benefits__title { font-size: 20px; margin-bottom: 20px; }
    .cc-benefits__desc { font-size: 14px; letter-spacing: 0; }
    /* PC説明文は左右少し狭く（左右2文字分ほど内側） */
    .cc-benefits__item { max-width: 220px; }
    .cc-benefits__desc-br { display: none; }
  }

/* ==========================================================================
     Section 2: 信頼バッジ
     ========================================================================== */
  /* 特徴エリア=薄グレーの帯（購入エリアの白と役割を分離）。最大幅を制限して中央寄せ */
  .cc-badges {
    background: var(--cc-bg-warm);
    padding: 36px 0;
  }
  .cc-badges__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .cc-badges__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cc-badges__item {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .cc-badges__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EEF4FF;
    color: #2E59A6;
  }
  .cc-badges__label {
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    letter-spacing: 0.04em;
    line-height: 1.5;
  }
  .cc-badges__ast {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    margin-left: 2px;
    vertical-align: top;
  }
  .cc-badges__note {
    font-family: var(--cc-font);
    font-size: 11px;
    font-weight: 400;
    color: #888;
    margin: 20px 0 0;
    text-align: center;
  }

  @media (min-width: 769px) {
    .cc-badges { padding: 48px 0; }
    .cc-badges__list {
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    .cc-badges__item { justify-content: center; }
    .cc-badges__icon { width: 48px; height: 48px; }
    .cc-badges__label { font-size: 15px; }
  }

  /* ==========================================================================
     Section 3: Concept
     ========================================================================== */
  .cc-concept {
    padding: 48px 0 24px;
    background: var(--cc-bg);
  }
  .cc-concept__grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  /* CONCEPT ラベル: 下余白広め・左揃え。".cc-concept p"(黒字)より高い詳細度で青を維持 */
  .cc-concept .cc-concept__label { margin: 0 0 24px; text-align: left; color: var(--cc-primary); }
  .cc-concept__heading {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: var(--cc-text);
    margin: 0 0 16px;
  }
  .cc-concept__body {
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0.04em;
    color: var(--cc-text-light);
  }
  .cc-concept__body p { margin: 0; }
  .cc-concept__text { text-align: left; }
  .cc-concept__image img { width: 100%; height: auto; border-radius: 8px; }
  .cc-concept__image { overflow: hidden; border-radius: 8px; }
  .cc-concept__visual { display: flex; flex-direction: column; gap: 20px; }
  .cc-concept__cta {
    display: inline-block;
    width: auto;
    margin-top: 20px;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  @media (min-width: 769px) {
    .cc-concept { padding: 72px 0 48px; }
    .cc-concept__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: stretch;
    }
    /* PC: HTML順 visual→text だが、既存レイアウトを維持するため text=左 / visual=右 に戻す */
    .cc-concept__text { order: 1; }
    .cc-concept__visual { order: 2; }
    .cc-concept__text {
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .cc-concept__content {
      margin-top: auto;
      margin-bottom: auto;
      transform: translateY(10px);
    }
    .cc-concept__text .cc-concept__cta { align-self: flex-start; }
    .cc-concept__visual {
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cc-concept__image {
      aspect-ratio: 1080 / 620;
      overflow: hidden;
      border-radius: 8px;
      width: 100%;
      max-width: 560px;
      transform: translateY(26px);
    }
    .cc-concept__image img { width: 100%; height: 100%; object-fit: cover; }
    .cc-concept__heading { font-size: 28px; margin-bottom: 20px; }
    .cc-concept__body { font-size: 15px; }
    .cc-concept__label { margin-bottom: 28px; }
  }

  /* ==========================================================================
     Section 4: CC Product Selector（本ファイル内に HTML/CSS/JS で実装済み）
     ========================================================================== */

  /* ==========================================================================
     Section 4b: やさしい冴えが、一日を変える。（体験イメージ4カード）
     ========================================================================== */
  .cc-support {
    padding: 12px 0 20px;
    background: var(--cc-bg);
  }
  .cc-support__heading {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #1A1A1A;
    text-align: center;
    margin: 0 0 24px;
    line-height: 1.3;
  }
  /* SP用の「、」直後の改行。PC(769+)では下のメディアクエリで無効化 */
  .cc-support__heading { font-size: 22px; line-height: 1.8; }
  .cc-support__heading-br-sp { display: inline; }
  /* SPはHTML順のまま 画像→見出し→本文→CTA（orderで入れ替えない） */
  .cc-support__alternate { display: flex; flex-direction: column; gap: 32px; margin-bottom: 40px; }
  .cc-support__alternate-text { text-align: left; }
  .cc-support__alternate-text .cc-support__heading { text-align: left; margin-bottom: 16px; }
  .cc-support__alternate-text .cc-support__description { margin: 0 auto 0 0; max-width: 100%; }
  .cc-support__alternate-image { overflow: hidden; border-radius: 8px; }
  .cc-support__alternate-image img { width: 100%; height: auto; border-radius: 8px; display: block; }
  .cc-support__alternate-cta {
    margin-top: 20px;
    display: inline-block;
    padding: 8px 14px;
    font-size: 10px;
  }
  .cc-support__intro { text-align: center; margin-bottom: 40px; }
  .cc-support__description {
    font-family: var(--cc-font);
    font-weight: 400; /* 明示指定（未指定だと端末フォント環境によりboldで描画される報告あり） */
    font-size: 14px;
    line-height: 1.9;
    color: #333333;
    max-width: 640px;
    margin: 0 auto 24px;
  }
  .cc-support-cta {
    display: inline-block;
    padding: 14px 24px;
    background: #FFFFFF;
    color: #2E59A6;
    border: 1.5px solid #2E59A6;
    border-radius: 50px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.15px;
    text-decoration: none;
    font-family: var(--cc-font);
    transition: 0.3s;
  }
  .cc-support-cta:hover { background: #2E59A6; color: #FFFFFF; }
  /* Concept/Support のCTAサイズ調整（.cc-support-cta 単体クラスより詳細度が高いので !important 不要） */
  .cc-concept__text .cc-concept__cta,
  .cc-support__alternate-text .cc-support__alternate-cta {
    padding: 12px 22px;
    font-size: 14px;
    line-height: 1.2;
  }
  .cc-support__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .cc-support__card {
    background: #F8FAFD;
    border-radius: 12px;
    overflow: hidden;
  }
  .cc-support__card-image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--cc-neutral);
  }
  .cc-support__card-image img { width: 100%; height: 100%; object-fit: cover; }
  .cc-support__card-image--placeholder { background: #E8EDF5; }
  .cc-support__card-title {
    font-family: var(--cc-font-brand);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #1A1A1A;
    margin: 0;
    padding: 20px 20px 8px;
  }
  .cc-support__card-desc {
    font-family: var(--cc-font);
    font-size: 13px;
    line-height: 21px;
    color: #666666;
    margin: 0;
    padding: 0 20px 20px;
  }
  @media (min-width: 769px) {
    .cc-support { padding: 24px 0 20px; }
    .cc-support__alternate {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-bottom: 48px;
    }
    .cc-support__alternate-visual { order: 1; display: flex; justify-content: center; }
    .cc-support__alternate-text { order: 2; text-align: right; }
    .cc-support__alternate-text .cc-support__heading { text-align: right; }
    .cc-support__alternate-text .cc-support__description { margin: 0 0 0 auto; max-width: 100%; text-align: right; }
    .cc-support__alternate-image { aspect-ratio: 4 / 3; width: 100%; max-width: 560px; }
    .cc-support__alternate-image img { width: 100%; height: 100%; object-fit: cover; }
    .cc-support__alternate-cta { margin-top: 24px; }
    .cc-support__heading { font-size: 28px; line-height: 1.8; }
    .cc-support__heading-br-sp { display: none; }
    .cc-support__description { font-size: 16px; margin-bottom: 28px; }
    .cc-support__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .cc-support__card-title { font-size: 28px; line-height: 36px; padding: 28px 28px 12px; }
    .cc-support__card-desc { font-size: 16px; line-height: 26px; padding: 0 28px 28px; }
  }
  @media (min-width: 1200px) {
    .cc-support__heading { font-size: 28px; line-height: 1.8; }
    .cc-support__alternate-text .cc-support__description { max-width: 100%; }
    .cc-support__intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-bottom: 48px; }
    .cc-support__description { margin-bottom: 0; max-width: 520px; text-align: left; }
  }

  /* ==========================================================================
     Section 5: Why COFFEE CLUB（削除済み・CSS残置）
     ========================================================================== */
  .cc-why {
    padding: 48px 0;
    background: var(--cc-bg);
  }
  .cc-why__heading {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: var(--cc-text);
    text-align: center;
    margin: 0 0 48px;
  }
  .cc-why__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cc-why__item {
    text-align: center;
    padding: 36px 20px;
    border: 1px solid var(--cc-border);
    background: var(--cc-bg);
    transition: box-shadow 0.3s var(--cc-ease);
  }
  .cc-why__item:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  }
  .cc-why__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0 auto 20px;
    opacity: 0.6;
  }
  .cc-why__text {
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.04em;
    color: var(--cc-text);
    margin: 0;
  }

  @media (min-width: 769px) {
    .cc-why { padding: 72px 0; }
    .cc-why__heading { font-size: 28px; margin-bottom: 64px; }
    .cc-why__grid { flex-direction: row; gap: 24px; }
    .cc-why__item { flex: 1; padding: 48px 28px; }
    .cc-why__icon { width: 56px; height: 56px; }
    .cc-why__text { font-size: 15px; }
  }

  /* ==========================================================================
     Section 6: 味と体感
     ========================================================================== */
  .cc-taste {
    padding: 48px 0;
    background: var(--cc-bg-alt);
  }
  .cc-taste__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cc-taste__col { padding: 36px 0; }
  .cc-taste__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 24px;
  }
  .cc-taste__image img { width: 100%; height: 100%; object-fit: cover; }
  .cc-taste__label {
    display: block;
    font-family: var(--cc-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cc-primary);
    margin: 0 0 16px;
  }
  .cc-taste__divider {
    width: 100%;
    height: 1px;
    background: var(--cc-border);
  }
  .cc-taste__heading {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--cc-text);
    margin: 0 0 16px;
  }
  .cc-taste__body {
    font-family: var(--cc-font);
    font-size: 13px;
    line-height: 2.1;
    letter-spacing: 0.04em;
    color: var(--cc-text-light);
    margin: 0;
  }

  @media (min-width: 769px) {
    .cc-taste { padding: 72px 0; }
    .cc-taste__grid { flex-direction: row; align-items: stretch; }
    .cc-taste__col { flex: 1; padding: 0 56px; }
    .cc-taste__col:first-child { padding-left: 0; }
    .cc-taste__col:last-child { padding-right: 0; }
    .cc-taste__divider { width: 1px; height: auto; align-self: stretch; }
    .cc-taste__heading { font-size: 28px; }
    .cc-taste__body { font-size: 14px; }
  }

  /* ==========================================================================
     Section 7: INGREDIENTS（94種類の自然のちからを、3つの役割で。）
     ========================================================================== */
  .cc-ingredients {
    padding: 48px 0;
    background-color: var(--cc-bg);
    background-image:
      linear-gradient(to bottom, var(--cc-bg) 0%, transparent 12%, transparent 88%, var(--cc-bg) 100%),
      linear-gradient(rgba(90, 74, 46, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(90, 74, 46, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 24px 24px, 24px 24px;
    background-position: 0 0, 0 0, 0 0;
  }
  /* INGREDIENTS ラベル: font-weight を700に強調（cc-section-label は600） */
  .cc-ingredients__label { font-weight: 700; }
  .cc-ingredients__heading {
    font-family: var(--cc-font-brand);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: #1A1A1A;
    text-align: center;
    margin: 0 0 40px;
  }
  .cc-ingredients__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cc-ingredients__card {
    background: #F8FAFD;
    border: 1px solid #E8EDF5;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .cc-ingredients__card:hover {
    border-color: #2E59A6;
  }
  .cc-ingredients__card-image {
    /* ingre.png (971x864) に合わせて3枚の表示比率を統一 */
    aspect-ratio: 971 / 864;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;
    padding: 0;
  }
  .cc-ingredients__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 01カード（ヤマブシタケ）の元画像は上部に白余白が多いため、下寄せクロップで余白を削減 */
  .cc-ingredients__card:first-of-type .cc-ingredients__card-image img {
    object-position: center bottom;
  }
  .cc-ingredients__card-body {
    padding: 24px 20px;
    text-align: left;
  }
  .cc-ingredients__number {
    font-family: var(--cc-font-brand);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #2E59A6;
    margin-bottom: 12px;
    display: block;
  }
  .cc-ingredients__role-name {
    font-family: var(--cc-font-brand);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #1A1A1A;
    margin: 0 0 8px;
  }
  .cc-ingredients__ingredient-name {
    font-family: var(--cc-font-brand);
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;
    margin: 0 0 12px;
    white-space: nowrap; /* 「アダプトゲンなど、18種類の注目素材」を1行で（改行させない） */
  }
  .cc-ingredients__badge {
    display: inline-block;
    background: #2E59A6;
    color: #FFFFFF;
    font-family: var(--cc-font);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .cc-ingredients__short-desc {
    font-family: var(--cc-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #666666;
    margin: 0 0 16px;
  }
  .cc-ingredients__link {
    font-family: var(--cc-font);
    font-size: 13px;
    font-weight: 500;
    color: #2E59A6;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .cc-ingredients__link:hover {
    opacity: 0.7;
  }
  .cc-ingredients__quality-note {
    font-family: var(--cc-font);
    font-size: 12px;
    color: var(--cc-text-light);
    text-align: center;
    margin-top: 32px;
    letter-spacing: 0.02em;
  }
  .cc-ingredients__footer {
    font-family: var(--cc-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #999999;
    text-align: center;
    margin: 32px 0 0;
  }
  .cc-ingredients__footer p { margin: 0; }

  .cc-ingredients__cta-wrap {
    text-align: center;
    margin-top: 32px;
  }
  button.cc-ingredients__link {
    display: inline-block;
    background: #FFFFFF;
    color: #2E59A6;
    border: 2px solid #2E59A6;
    border-radius: 50px;
    padding: 14px 28px;
    cursor: pointer;
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  button.cc-ingredients__link:hover {
    background: #2E59A6;
    color: #FFFFFF;
    border-color: #2E59A6;
  }

  /* ===== 全素材リスト モーダル ===== */
  .cc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    padding: 20px;
  }
  .cc-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .cc-modal {
    background: #FFFFFF;
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.3s var(--cc-ease);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }
  .cc-modal-overlay.is-open .cc-modal {
    transform: translateY(0);
  }

  .cc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 20px;
    border-bottom: 1px solid #E8E8E6;
    flex-shrink: 0;
  }
  .cc-modal__title {
    font-family: var(--cc-font-brand);
    font-size: 20px;
    font-weight: 600;
    color: #1A1A1A;
    margin: 0;
    letter-spacing: 0.04em;
  }
  .cc-modal__close {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
  }
  .cc-modal__close:hover {
    background: #F0F0F0;
    color: #333;
  }

  .cc-modal__body {
    padding: 24px 28px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cc-modal__intro {
    font-family: var(--cc-font);
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin: 0 0 24px;
  }

  .cc-modal__section {
    margin-bottom: 8px;
  }
  .cc-modal__section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
  }
  .cc-modal__section-number {
    font-family: var(--cc-font-brand);
    font-size: 12px;
    font-weight: 600;
    color: #2E59A6;
    letter-spacing: 2px;
  }
  .cc-modal__section-title {
    font-family: var(--cc-font-brand);
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
    margin: 0;
  }

  .cc-modal__divider {
    height: 1px;
    background: #E8EDF5;
    margin: 20px 0;
  }

  .cc-modal__group {
    margin-bottom: 16px;
  }
  .cc-modal__group-label {
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
    margin: 0 0 4px;
  }
  .cc-modal__group-detail,
  .cc-modal__group-percent {
    font-family: var(--cc-font);
    font-size: 13px;
    color: #2E59A6;
    font-weight: 500;
    margin: 0 0 8px;
  }
  .cc-modal__group-desc {
    font-family: var(--cc-font);
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin: 0 0 16px;
  }
  .cc-modal__group-desc:last-child { margin-bottom: 0; }
  .cc-modal__group-note {
    font-family: var(--cc-font);
    font-size: 11px;
    color: #888;
    margin: 8px 0 0;
  }
  .cc-modal__group-lead {
    font-family: var(--cc-font);
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin: 0 0 12px;
  }
  .cc-modal__ferment-meta {
    font-family: var(--cc-font);
    font-size: 12px;
    color: #666;
    line-height: 1.8;
    margin: 0 0 16px;
  }
  .cc-modal__ferment-meta p { margin: 0 0 4px; }
  .cc-modal__group-sub {
    font-family: var(--cc-font);
    font-size: 12px;
    color: #999;
    margin: 4px 0 0;
  }
  .cc-modal__group-sublabel {
    font-family: var(--cc-font);
    font-size: 12px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
  }
  .cc-modal__group-items {
    font-family: var(--cc-font);
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin: 0;
  }

  .cc-modal__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .cc-modal__list li {
    font-family: var(--cc-font);
    font-size: 13px;
    color: #666;
    line-height: 1.8;
  }
  .cc-modal__list li::after {
    content: '、';
  }
  .cc-modal__list li:last-child::after {
    content: '';
  }
  .cc-modal__list--other,
  .cc-modal__list--vertical {
    flex-direction: column;
  }
  .cc-modal__list--other li::after,
  .cc-modal__list--vertical li::after {
    content: '';
  }

  .cc-modal__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--cc-font);
    font-size: 13px;
    margin: 0 0 20px;
  }
  .cc-modal__table th,
  .cc-modal__table td {
    padding: 8px 12px 8px 0;
    text-align: left;
    border-bottom: 1px solid #E8E8E6;
    color: #1A1A1A;
  }
  .cc-modal__table th {
    font-weight: 500;
    color: #666;
    width: 40%;
  }
  .cc-modal__raw {
    font-family: var(--cc-font);
    font-size: 12px;
    line-height: 1.8;
    color: #666;
    margin: 0 0 12px;
  }
  .cc-modal__meta {
    font-family: var(--cc-font);
    font-size: 12px;
    color: #666;
    margin: 0 0 4px;
  }
  .cc-popover__certifications {
    margin: 32px 0 24px;
    padding: 24px 0;
    border-top: 1px solid var(--cc-border, #E5E5E5);
  }
  .cc-popover__cert-text {
    font-family: var(--cc-font);
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 12px;
    text-align: center;
  }
  .cc-popover__cert-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .cc-popover__cert-logo {
    height: 18px;
    width: auto;
    max-width: 36px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
  }
  .cc-popover__cert-logo:hover {
    opacity: 1;
  }
  .cc-popover__cert-flag {
    height: 18px;
    width: 18px;
    min-width: 18px;
    object-fit: contain;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .cc-modal__notes {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #E8E8E6;
  }
  .cc-modal__note {
    font-family: var(--cc-font);
    font-size: 11px;
    color: #ABABAB;
    line-height: 1.6;
    margin: 0 0 6px;
  }
  .cc-modal__notes .cc-modal__note:last-child {
    margin-bottom: 0;
  }

  .cc-modal__cta {
    text-align: center;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #E8E8E6;
  }
  .cc-modal__cta-btn {
    display: inline-block;
    background: #FFFFFF;
    color: #2E59A6;
    border: 2px solid #2E59A6;
    border-radius: 50px;
    padding: 14px 28px;
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .cc-modal__cta-btn:hover {
    background: #2E59A6;
    color: #FFFFFF;
    border-color: #2E59A6;
  }

  .cc-modal__body::-webkit-scrollbar { width: 4px; }
  .cc-modal__body::-webkit-scrollbar-track { background: transparent; }
  .cc-modal__body::-webkit-scrollbar-thumb { background: #DDD; border-radius: 2px; }

  body.cc-modal-open {
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .cc-modal-overlay { padding: 12px; align-items: flex-end; }
    .cc-modal {
      max-height: 90vh;
      border-radius: 12px 12px 0 0;
      max-width: 100%;
    }
    .cc-modal__header { padding: 20px 20px 16px; }
    .cc-modal__body { padding: 20px 20px 28px; }
    .cc-modal__title { font-size: 18px; }
  }

  @media (min-width: 769px) {
    .cc-ingredients { padding: 80px 0; }
    .cc-ingredients__label { font-size: 13px; }
    .cc-ingredients__heading { font-size: 28px; margin-bottom: 56px; }
    .cc-ingredients__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .cc-ingredients__card-body { padding: 32px 28px; }
    .cc-ingredients__role-name { font-size: 20px; }
    .cc-ingredients__ingredient-name { font-size: 18px; }
    .cc-ingredients__short-desc { font-size: 14px; }
  }

  /* 旧: ingredient_group（後方互換） */
  .cc-ingredients__details,
  .cc-ingredients__summary { display: none; }
  .cc-ingredients__expanded { display: none; }
  .cc-ingredients__group-name { font-family: var(--cc-font-brand); font-size: 18px; font-weight: 600; color: #1A1A1A; margin: 0 0 12px; }
  .cc-ingredients__group-items { font-family: var(--cc-font); font-size: 14px; color: #666666; line-height: 1.8; }
  .cc-ingredients-note { font-size: 0.9em; color: #999999; }

  /* ==========================================================================
     Section 7: ONE STICK（たった10秒で完成。）
     ========================================================================== */
  .cc-one-stick {
    padding: 24px 0 48px;
    background: transparent;
    color: var(--cc-text);
  }
  .cc-one-stick__label {
    font-family: var(--cc-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cc-primary);
    text-align: center;
    margin: 0 0 20px;
  }
  .cc-one-stick__heading {
    font-family: var(--cc-font-brand);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #1A1A1A;
    margin: 0 0 12px;
    text-align: center;
  }
  /* 旧「mincho」クラスは秀英ゴシックに変更済み。名前だけ残っている（HTML側も差し替え時に-textにリネーム推奨） */
  .cc-one-stick__heading-mincho {
    font-family: var(--cc-font-brand);
    font-weight: 500;
  }
  .cc-one-stick__sub {
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #666666;
    margin: 0 0 32px;
    text-align: center;
  }
  .cc-one-stick__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
  }
  .cc-one-stick__visual {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #F0F0EE;
    margin: 0 auto;
  }
  .cc-one-stick__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .cc-one-stick__img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: #E8E8E6;
  }
  .cc-one-stick__content { }
  .cc-one-stick__facts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
  }
  .cc-one-stick__fact { }
  .cc-one-stick__fact-num {
    display: block;
    font-family: var(--cc-font-brand);
    font-size: 28px;
    font-weight: 600;
    color: var(--cc-primary);
    margin-bottom: 4px;
  }
  .cc-one-stick__fact-desc {
    font-family: var(--cc-font);
    font-size: 13px;
    font-weight: 400;
    color: #666666;
    line-height: 1.5;
  }
  .cc-one-stick__body {
    font-family: var(--cc-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    color: #666666;
    margin: 0;
  }
  .cc-one-stick__body p { margin: 0; }
  .cc-one-stick__scenes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .cc-one-stick__scene {
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .cc-one-stick__scene-icon {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
  }
  .cc-one-stick__scene-name {
    font-family: var(--cc-font-brand);
    font-size: 14px;
    font-weight: 500;
    color: #1A1A1A;
    margin: 0 0 4px;
  }
  .cc-one-stick__scene-desc {
    font-family: var(--cc-font);
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 1.5;
    margin: 0;
  }

  @media (min-width: 769px) {
    .cc-one-stick { padding: 0 0 72px; }
    .cc-one-stick__label { font-size: 13px; margin-bottom: 24px; }
    .cc-one-stick__heading { font-size: 28px; margin-bottom: 16px; }
    .cc-one-stick__sub { font-size: 16px; margin-bottom: 48px; }
    .cc-one-stick__main {
      flex-direction: row;
      align-items: flex-start;
      gap: 48px;
      margin-bottom: 56px;
    }
    .cc-one-stick__visual {
      flex: 0 0 350px;
      max-width: 350px;
      aspect-ratio: 1 / 1;
    }
    .cc-one-stick__content { flex: 1; min-width: 0; }
    .cc-one-stick__fact-num { font-size: 36px; }
    .cc-one-stick__fact-desc { font-size: 14px; }
    .cc-one-stick__body { font-size: 14px; }
    .cc-one-stick__scenes {
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .cc-one-stick__scene {
      padding: 20px 0 0;
      border-top: none;
      border-left: 1px solid rgba(0, 0, 0, 0.08);
      padding-left: 20px;
    }
    .cc-one-stick__scene:first-child { border-left: none; padding-left: 0; }
    .cc-one-stick__scene-name { font-size: 15px; }
    .cc-one-stick__scene-desc { font-size: 13px; }
  }

  /* ==========================================================================
     Section 8: 社会的証明（COFFEE CLUBを飲んでいる人。）
     ========================================================================== */
  .cc-athletes {
    background: var(--cc-bg);
    padding: 32px 0 56px;
    width: 100%;
  }
  /* CONCEPT / Product と同じ左ライン（1280px・padding 20px）に合わせる */
  .cc-athletes__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .cc-athletes__subtitle {
    font-family: var(--cc-font);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cc-primary);
    margin: 0 0 12px;
  }
  .cc-athletes__heading {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--cc-text);
    max-width: 580px;
    margin: 0 0 32px;
  }
  .cc-athletes__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    width: 100%;
    margin-bottom: 32px;
  }
  .cc-athletes__tab {
    font-family: var(--cc-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
    padding: 4px 0 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    text-align: left;
    color: var(--cc-text-muted);
    white-space: nowrap;
  }
  .cc-athletes__tab.is-active {
    color: var(--cc-text);
    border-bottom-color: var(--cc-primary);
  }
  .cc-athletes__tab-en {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
  }
  .cc-athletes__tab-ja {
    display: block;
    font-size: 11px;
    color: var(--cc-text-muted);
    line-height: 1.4;
    margin-top: 2px;
  }
  .cc-athletes__tab.is-active .cc-athletes__tab-ja { color: var(--cc-text); }
  .cc-athletes__content-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-bottom: 24px;
  }
  .cc-athletes__left {
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }
  .cc-athletes__right {
    flex: 0 1 auto;
    width: 100%;
    max-width: 640px;
  }
  .cc-athletes__right img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
  .cc-athletes__right--placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F4F9;
    border: 1px dashed #C9D4E5;
  }
  .cc-athletes__right--placeholder span {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: #9AA9C0;
    font-weight: 500;
  }
  .cc-athletes__quote {
    font-family: var(--cc-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: 0.04em;
    color: var(--cc-text);
    margin: 0 0 20px;
  }
  .cc-athletes__role {
    font-family: var(--cc-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.04em;
    color: var(--cc-text-muted);
    margin: 0;
  }
  .cc-athletes__disclaimer {
    font-family: var(--cc-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cc-text-muted);
    margin: 0;
  }
  .cc-athletes__panel {
    display: none;
  }
  .cc-athletes__panel.is-active {
    display: block;
  }

  @media (min-width: 769px) {
    .cc-athletes { padding: 24px 0 64px; }
    .cc-athletes__tabs {
      gap: 16px 32px;
      margin-bottom: 40px;
    }
    .cc-athletes__tab {
      font-size: 14px;
      line-height: 1.8;
    }
    .cc-athletes__tab-ja { font-size: 11px; }
    .cc-athletes__tab-en { font-size: 18px; }
    /* PSと同じく画像を左50%（右端＝中央線）、コメントを右50%・上揃え */
    .cc-athletes__content-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: 40px;
      margin-bottom: 0;
    }
    .cc-athletes__right {
      order: 1;
      width: 50%;
      max-width: none;
      flex: 0 0 auto;
    }
    .cc-athletes__left {
      order: 2;
      width: 50%;
      max-width: none;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .cc-athletes__heading {
      font-size: 28px;
      margin-bottom: 36px;
    }
    .cc-athletes__quote {
      font-size: 18px;
      line-height: 1.95;
    }
  }

  @media (min-width: 1040px) {
    .cc-athletes__left { padding-left: 40px; }
    .cc-athletes__quote { font-size: 19px; }
  }

  /* ===== コスト比較（ONE STICK → COST → FAQ の順） ===== */
  /* バリューの場面は生成り→ブランド青のグラデ（添付画像イメージ）。文字は濃色、白カードが映える */
  .cc-cost {
    padding: 48px 0;
    background: transparent;
  }
  /* 見出しの読点改行はSP/PC共通で表示（「コンビニコーヒー以下の価格で、/コーヒー以上の一杯を。」の2行組） */
  .cc-cost__heading-br-pc { display: block; }
  .cc-cost__heading {
    font-family: var(--cc-font-brand); /* 秀英ゴシック銀 Std L（weight:400） */
    font-weight: 500;
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--cc-text);
    text-align: center;
    margin: 0 0 14px;
  }

  /* SP: 見出し→パンチライン→カードの縦積み間隔 */
  .cc-cost__intro { margin-bottom: 28px; }

  .cc-cost__block {
    max-width: 520px;
    margin: 0 auto;
  }
  .cc-cost__block:last-of-type {
    margin-bottom: 0;
  }

  .cc-cost__card {
    background: #FFFFFF;
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    padding: 28px 32px;
    text-align: center;
  }

  .cc-cost__versus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
  }
  .cc-cost__versus-item {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 18px 16px;
    background: var(--cc-bg-alt);
    border-radius: 12px;
  }
  .cc-cost__versus-item--right {
    background: var(--cc-secondary);
    border: 1.5px solid var(--cc-primary);
  }
  .cc-cost__versus-label {
    font-family: var(--cc-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--cc-text-muted);
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.4;
  }
  .cc-cost__versus-price {
    font-family: var(--cc-font-brand);
    font-size: 28px;
    font-weight: 600;
    color: var(--cc-text);
    margin: 0 0 2px;
    white-space: nowrap;
  }
  .cc-cost__versus-price--highlight {
    color: var(--cc-primary);
  }
  .cc-cost__versus-desc {
    font-family: var(--cc-font);
    font-size: 12px;
    color: var(--cc-text-light);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cc-cost__versus-plus {
    font-family: var(--cc-font-brand);
    font-size: 16px;
    font-weight: 600;
    color: var(--cc-primary);
    flex-shrink: 0;
    white-space: nowrap;
  }

  .cc-cost__punchline {
    font-family: var(--cc-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--cc-text);
    line-height: 1.8;
    margin: 0;
  }

  .cc-cost__note {
    font-family: var(--cc-font);
    font-size: 12px;
    color: var(--cc-text-muted);
    text-align: center;
    margin: 20px 0 0;
  }

  /* SP: 1段で表示（改行させない） */
  @media (max-width: 768px) {
    .cc-cost__versus { gap: 8px; margin-bottom: 14px; }
    .cc-cost__versus-item { padding: 12px 8px; }
    .cc-cost__versus-label { font-size: 10px; }
    .cc-cost__versus-price { font-size: 20px; }
    .cc-cost__versus-desc { font-size: 10px; }
    .cc-cost__versus-plus { font-size: 14px; }
    .cc-cost__card { padding: 18px 16px; }
    .cc-cost__punchline { font-size: 13px; }
  }

  /* PC: 非対称エディトリアル2カラム（左=コピー / 右=比較カード）。
     中央の小さいカードが余白に浮く問題を、横幅を使った"間"のある構図で解消 */
  @media (min-width: 769px) {
    .cc-cost { padding: 88px 0; }
    /* 左カラム=見出し(上)＋本文(下) / 右カラム=表(2行スパン)。
       左を広め(1.15fr)にして見出しが読点のbrで綺麗に2行に収まるようにする */
    .cc-cost__inner {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "intro block"
        "text  block";
      align-items: start;
      column-gap: 64px;
      row-gap: 24px;
      max-width: var(--page-width, 1280px);
      margin: 0 auto;
    }
    .cc-cost__intro { grid-area: intro; text-align: left; margin: 0; }
    .cc-cost__block { grid-area: block; align-self: center; }
    .cc-cost__text  { grid-area: text; }
    .cc-cost__intro .cc-section-label { text-align: left; margin-bottom: 18px; }
    .cc-cost__heading-br-pc { display: block; }
    .cc-cost__heading {
      text-align: left;
      font-size: 28px;
      line-height: 1.55;
      letter-spacing: 0.01em;
      white-space: nowrap; /* 読点のbr以外では折り返さない（変な改行防止） */
      margin: 0;
    }
    .cc-cost__punchline {
      text-align: left;
      font-size: 18px;
      line-height: 1.9;
      margin: 0;
    }
    .cc-cost__note { text-align: left; margin: 16px 0 0; }

    .cc-cost__block { max-width: none; margin: 0; }
    .cc-cost__card { padding: 40px 44px; border-radius: 20px; box-shadow: 0 18px 48px rgba(30,64,128,0.08); }
    .cc-cost__versus { gap: 24px; margin-bottom: 0; }
    .cc-cost__versus-item { padding: 28px 20px; border-radius: 16px; }
    .cc-cost__versus-label { font-size: 14px; margin-bottom: 10px; }
    .cc-cost__versus-price { font-size: 46px; line-height: 1.05; margin-bottom: 8px; }
    .cc-cost__versus-desc { font-size: 13px; }
    .cc-cost__versus-plus { font-size: 17px; padding: 6px 12px; background: var(--cc-secondary, #EEF4FF); border-radius: 300px; }
  }

  

  /* ===== FAQ ===== */
  .cc-faq {
    padding: 56px 0;
    background: var(--cc-bg-warm);
  }
  .cc-faq .cc-section-label { color: var(--cc-primary); }
  .cc-faq__inner {
    max-width: none;
    margin: 0;
  }
  .cc-faq__head { margin-bottom: 28px; }
  .cc-faq__heading {
    font-family: var(--cc-font-brand);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--cc-text);
    text-align: left;
    margin: 8px 0 0;
  }
  .cc-faq__body { width: 100%; }
  /* PC: 左=見出し / 右=質問リスト（左ライン統一・幅を活かす） */
  @media (min-width: 769px) {
    .cc-faq { padding: 88px 0; }
    .cc-faq__inner {
      display: grid;
      grid-template-columns: 300px 1fr;
      column-gap: 72px;
      align-items: start;
    }
    .cc-faq__head { margin-bottom: 0; position: sticky; top: 40px; }
    .cc-faq__heading { font-size: 28px; }
    /* PC: ラベル「FAQ」を見出しと同じ左ラインに揃える（中央揃えは他セクション同様SPのみ） */
    .cc-faq .cc-section-label { text-align: left; }
    /* CTAは質問リストの右端に寄せる（"すべて見る→"は末尾アクションとして右揃えが自然）。
       base(.cc-faq__more)が後方定義のため .cc-faq を付けて特異度で勝つ */
    .cc-faq .cc-faq__more { text-align: right; margin-top: 32px; }
  }
  .cc-faq__item {
    border-top: 1px solid var(--cc-border);
  }
  .cc-faq__item:last-child {
    border-bottom: 1px solid var(--cc-border);
  }
  .cc-faq__question {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 14px 36px 14px 0;
    font-family: var(--cc-font-brand);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--cc-text);
  }
  .cc-faq__question::-webkit-details-marker { display: none; }
  .cc-faq__icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--cc-primary);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  }
  .cc-faq__icon--plus {
    opacity: 1;
    visibility: visible;
  }
  .cc-faq__icon--minus {
    opacity: 0;
    visibility: hidden;
  }
  .cc-faq__item[open] .cc-faq__icon--plus {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) rotate(90deg);
  }
  .cc-faq__item[open] .cc-faq__icon--minus {
    opacity: 1;
    visibility: visible;
  }
  .cc-faq__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  .cc-faq__item[open] .cc-faq__answer {
    max-height: 500px;
  }
  .cc-faq__answer-inner {
    padding: 0 0 14px;
  }
  .cc-faq__answer-inner p {
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
    color: #666666;
    margin: 0 0 8px;
  }
  .cc-faq__answer-inner p:last-child {
    margin-bottom: 0;
  }
  @media (min-width: 769px) {
    .cc-faq__question { font-size: 16px; padding: 16px 40px 16px 0; }
  }
  .cc-faq__more {
    text-align: center;
    margin-top: 28px;
  }
  .cc-faq__more-link {
    display: inline-block;
    background: #FFFFFF;
    color: #2E59A6;
    border: 2px solid #2E59A6;
    border-radius: 50px;
    padding: 14px 28px;
    font-family: var(--cc-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .cc-faq__more-link:hover {
    background: #2E59A6;
    color: #FFFFFF;
    border-color: #2E59A6;
  }

.cc-finalcta { background: var(--cc-primary, #2E59A6); padding: 64px 0; }
  .cc-finalcta__inner { max-width: 640px; margin: 0 auto; text-align: center; color: #fff; }
  .cc-finalcta__lead { font-family: var(--cc-font-brand); font-weight: 400; font-size: 24px; letter-spacing: 0.06em; margin: 0 0 16px; }
  /* SPはリードを「やさしい冴えを、/毎日の一杯に。」で改行。PCは1行 */
  .cc-finalcta__lead-br { display: inline; }
  /* 価格行: 1行目=プラン+金額 / 2行目=1杯単価 の縦積み */
  .cc-finalcta__price {
    font-family: var(--cc-font);
    font-size: 15px;
    margin: 0 0 24px;
    color: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 4px;
  }
  .cc-finalcta__price-main { display: inline-flex; align-items: baseline; column-gap: 12px; white-space: nowrap; }
  .cc-finalcta__price-percup { white-space: nowrap; }
  .cc-finalcta__price strong { font-family: var(--cc-font-brand); font-size: 24px; font-weight: 700; }
  .cc-finalcta__price span { font-size: 13px; color: rgba(255,255,255,0.75); }
  .cc-finalcta__price-plan { font-size: 15px; color: rgba(255,255,255,0.9); }
  .cc-finalcta__btn {
    display: inline-block; text-decoration: none; background: #fff; color: var(--cc-primary);
    font-family: var(--cc-font); font-size: 16px; font-weight: 500; letter-spacing: 0.06em;
    border-radius: 300px; padding: 17px 56px; min-height: 56px; box-sizing: border-box;
    transition: transform 0.4s var(--cc-ease-apple, ease), box-shadow 0.4s var(--cc-ease-apple, ease);
  }
  .cc-finalcta__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
  .cc-finalcta__btn:active { transform: scale(0.97); transition-duration: 0.12s; }
  .cc-finalcta__trust { font-size: 12px; color: rgba(255,255,255,0.8); margin: 18px 0 0; }
  /* #5: iPhoneで「〜｜送料無料｜いつでも解約OK」が折り返すのを防ぐ。字間を詰め少し縮小して1行に収める（狭幅320pxでも1行、極端なズーム時のみ折り返す） */
  @media (max-width: 768px) {
    .cc-finalcta__trust { font-size: 11px; letter-spacing: 0.1px; }
  }
  @media (min-width: 769px) {
    .cc-finalcta { padding: 88px 0; }
    .cc-finalcta__lead { font-size: 30px; }
    .cc-finalcta__lead-br { display: none; }
  }

  /* JOURNAL: フッター上の締め帯。他セクションと同じ秀英ゴシック銀L */
  .cc-journal { background: var(--cc-bg-warm); padding: 72px 0; }
  .cc-journal__heading {
    font-family: var(--cc-font-brand); /* 秀英ゴシック銀 Std L（weight:400） */
    font-size: 22px; font-weight: 500; color: var(--cc-text);
    letter-spacing: 0.06em; line-height: 1.5; margin: 8px 0 32px;
    text-align: center; /* 中央揃え */
  }
  /* JOURNALラベルも他セクション同様に青字＋中央 */
  .cc-journal .cc-section-label { color: var(--cc-primary); text-align: center; }
  .cc-journal__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .cc-journal__card {
    display: block; text-decoration: none; background: #fff;
    border: 1px solid #E3E9F2; border-radius: 14px; overflow: hidden;
    transition: transform 0.4s var(--cc-ease-apple), box-shadow 0.4s var(--cc-ease-apple);
  }
  .cc-journal__card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(30,64,128,0.12); }
  .cc-journal__card:active { transform: scale(0.985); transition-duration: 0.12s; }
  .cc-journal__media { aspect-ratio: 16/10; overflow: hidden; background: #F1F4F9; }
  .cc-journal__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--cc-ease-apple); }
  .cc-journal__card:hover .cc-journal__media img { transform: scale(1.04); }
  .cc-journal__media-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-family: var(--cc-font-brand); font-size: 13px; letter-spacing: 0.2em; color: #B9C6DB;
  }
  .cc-journal__body { padding: 16px 18px 18px; }
  .cc-journal__tag {
    display: inline-block; font-family: var(--cc-font-brand);
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    color: #2E59A6; background: #EEF4FF; border-radius: 300px;
    padding: 3px 10px; margin-bottom: 8px;
  }
  .cc-journal__title {
    font-family: var(--cc-font);
    font-size: 15px; font-weight: 500; line-height: 1.6; color: #1A1A1A;
    margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cc-journal__date { font-size: 12px; color: #999; }
  .cc-journal__more-wrap { text-align: center; margin-top: 28px; }
  .cc-journal__more {
    font-family: var(--cc-font-brand); font-size: 14px; font-weight: 500;
    color: #2E59A6; text-decoration: none; letter-spacing: 0.04em;
  }
  .cc-journal__more:hover { opacity: 0.7; }
  @media (min-width: 769px) {
    .cc-journal { padding: 96px 0; }
    .cc-journal__heading { font-size: 28px; margin-bottom: 40px; }
    .cc-journal__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  }

/* ⑤ タイポグラフィ: 文字の輪郭を締める（Apple的な精緻さ） */
  .cc-hero__main, .cc-hero__reassure, .cc-ps__label, .cc-ps-variant-name,
  .cc-athletes__heading, .cc-faq__question, .cc-btn {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* ①応答＋②スプリング: 主要CTAは押した瞬間に沈む。離すと素早く戻る */
  .cc-btn {
    transition: background 0.3s var(--cc-ease-apple),
                transform 0.4s var(--cc-ease-apple),
                box-shadow 0.4s var(--cc-ease-apple);
    will-change: transform;
  }
  .cc-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(46,89,166,0.22); }
  .cc-btn:active { transform: scale(0.97); transition-duration: 0.12s; }


  /* ①応答: プラン選択カードは押下で軽く沈み、選択遷移を滑らかに */
  .cc-ps-variant-card {
    transition: border-color 0.35s var(--cc-ease-apple),
                box-shadow 0.35s var(--cc-ease-apple),
                transform 0.35s var(--cc-ease-apple);
    will-change: transform;
  }
  .cc-ps-variant-card:active { transform: scale(0.992); transition-duration: 0.12s; }
  .cc-ps-variant-card.selected { box-shadow: 0 4px 18px rgba(46,89,166,0.14); }
  /* 展開部（選択で開く）を max-height 直変化から滑らかなスプリング風に */
  .cc-ps-variant-card .cc-ps-expanded {
    transition: max-height 0.45s var(--cc-ease-apple), padding 0.45s var(--cc-ease-apple);
  }

  /* ③素材: フローティングCTAに半透明＋ブラーの奥行き（vibrancy） */
  .floating-button {
    background-color: rgba(253, 229, 32, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    transition: opacity 0.5s var(--cc-ease-apple), transform 0.5s var(--cc-ease-apple);
  }

  /* ② FAQ: 開閉のイージングをスプリング風に、アイコン回転も同期 */
  .cc-faq__answer { transition: max-height 0.4s var(--cc-ease-apple); }
  .cc-faq__icon { transition: transform 0.4s var(--cc-ease-apple), opacity 0.3s var(--cc-ease-apple); }

  /* ⑥ アクセシビリティ: モーション削減設定を尊重 */
  @media (prefers-reduced-motion: reduce) {
    .cc-btn, .cc-btn:hover, .cc-btn:active,
    .cc-ps-variant-card, .cc-ps-variant-card:active,
    .cc-hero__offers li, .floating-button {
      transition-duration: 0.01ms !important;
      transform: none !important;
    }
  }