/* =============================================================
   COCOPiTA — Figma デザイン反映スタイル
   v1.0 / 2026-05-09
   ベース: lp-css/style.css 後に読み込み、既存スタイルを上書き
   ============================================================= */

/* ===== 1. デザイントークン（Figma カラー） ===== */
:root {
  --fg-pink:        #ef8fa3;     /* メインピンク（タイトル装飾・バッジ） */
  --fg-pink-soft:   #fde4ec;     /* 薄ピンク（背景・枠線） */
  --fg-pink-pale:   #fff5f8;     /* もっと薄いピンク（背景） */
  --fg-pink-deep:   #d96a82;     /* 濃ピンク（強調・ボタンホバー） */
  --fg-green:       #6abf4b;     /* メイングリーン */
  --fg-green-deep:  #4ea732;     /* グリーン濃 */
  --fg-green-soft:  #e7f4dd;     /* 薄グリーン */
  --fg-orange:      #ff8a4f;     /* オレンジ（CTA・特典） */
  --fg-orange-soft: #fff5e6;     /* 薄オレンジ（背景） */
  --fg-cream:       #fefaee;     /* ヒーロー・ニュース系の背景 */
  --fg-cream-soft:  #fffbf0;     /* もっと薄いクリーム */
  --fg-gold:        #d4a72a;
  --fg-silver:      #9aa0a8;
  --fg-bronze:      #c47c5d;
  --fg-radius-card: 18px;
  --fg-radius-pill: 999px;
}

/* ===== 2. ヒーロータイトル（カラフル文字 / Figma 厳密仕様） =====
   Figma: Noto Sans JP / 700 Bold / 40px / line-height 100% / letter-spacing 0% */
.hero__title {
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  margin: 18px 0 16px !important;
}
.hero__title em {
  font-style: normal !important;
  color: var(--fg-green) !important;            /* 緑「支援」 */
  font-weight: 700 !important;
}
.hero__title b {
  color: var(--fg-pink) !important;             /* ピンク「集客」「信頼」 */
  font-weight: 700 !important;
}
/* Figma サブタイトル: Noto Sans JP / 700 Bold / 24px / line-height 100% / color #6D4A39 */
.hero__title-sub {
  display: inline-block !important;
  margin-top: 14px !important;
  color: #6D4A39 !important;          /* Figma 茶色 */
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
/* Figma 説明文: Noto Sans JP / 400 Regular / 20px / line-height 30px */
.hero__lead {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  color: #6D4A39 !important;
  margin: 0 0 26px !important;
}

/* ===== 3. KPI スタッツ（月桂樹装飾） ===== */
.kpis {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 32px !important;
  position: relative;
}
.kpi {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
  padding: 12px 36px !important;     /* 左右に月桂樹分の余白を確保 */
  position: relative;
  min-height: 96px;
}
.kpi::before,
.kpi::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 100px;
  background-image: url("../lp-images/figma/icons/laurel-wreath.png");
  background-repeat: no-repeat;
  background-size: 176px 106px;       /* Figma 実画像サイズ */
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 1;
}
.kpi::before {
  left: 0;
  background-position: 0 center;        /* 左半分だけ表示 */
}
.kpi::after {
  right: 0;
  background-position: right center;    /* 右半分だけ表示 */
}
.kpi__label {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: 4px;
}
.kpi__num {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}
.kpi__num small {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--ink-soft);
  margin-left: 2px;
}

/* ===== 4. CTA ボタン（Figma 厳密仕様 272×67px ピル） =====
   - 団体として参加する (.btn--org)  = オレンジ
   - 企業として参加する (.btn--corp) = グリーン
*/
.hero__ctas .btn--lg {
  width: 272px;
  min-height: 67px;
  font-size: 18px !important;
  padding: 18px 28px !important;
}
.btn--org,
.btn--org:link {
  background: linear-gradient(135deg, #ff9c5a, var(--fg-orange)) !important;
  color: #fff !important;
  border-radius: var(--fg-radius-pill);
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 14px rgba(255,138,79,0.35);
  border: 0 !important;
}
.btn--org:hover {
  background: var(--fg-orange) !important;
  transform: translateY(-1px);
}
.btn--corp,
.btn--corp:link {
  background: linear-gradient(135deg, #82d165, var(--fg-green)) !important;
  color: #fff !important;
  border-radius: var(--fg-radius-pill);
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 14px rgba(106,191,75,0.35);
  border: 0 !important;
}
.btn--corp:hover {
  background: var(--fg-green-deep) !important;
  transform: translateY(-1px);
}

/* ===== 5. 新着情報 NEWS バッジ（Figma 配色） ===== */
.news-badge,
.news-list .chip,
.news-link .chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--fg-radius-pill);
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}
.news-badge--green,
.chip--green,
.news-tag--support {        /* 既存: 支援実績 */
  background: var(--fg-green-soft) !important;
  color: var(--fg-green-deep) !important;
  border: 1px solid #b9e0a3 !important;
}
.news-badge--pink,
.chip--pink,
.news-tag--join {            /* 既存: 新規参加 → Figma ピンクに */
  background: var(--fg-pink-soft) !important;
  color: var(--fg-pink-deep) !important;
  border: 1px solid #f9c6d4 !important;
}
.news-badge--orange,
.chip--orange,
.news-tag--offer {           /* 既存: 特典 */
  background: var(--fg-orange-soft) !important;
  color: #c66020 !important;
  border: 1px solid #f5c799 !important;
}
.news-tag--rank {             /* 既存: ランキング */
  background: #f1e9f8 !important;
  color: #7a3fa8 !important;
  border: 1px solid #e0cde8 !important;
}

/* ===== 6. ランキング クラウン ===== */
.rank-badge.g1,
.rank-badge.g2,
.rank-badge.g3 {
  width: 56px !important;
  height: 56px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;     /* 数字を非表示にして SVG だけ表示 */
  font-size: 0 !important;
}
.rank-badge.g1 {
  background-image: url("../lp-images/figma/icons/crown-gold.png") !important;
}
.rank-badge.g2 {
  background-image: url("../lp-images/figma/icons/crown-silver.png") !important;
}
.rank-badge.g3 {
  background-image: url("../lp-images/figma/icons/crown-bronze.png") !important;
}

/* ===== 7. 認定パートナー リボン勲章 =====
   既存 .cert-card は黄色「認定」リボンを ::before で持つ
   Figma 風ピンクリボン勲章を ::after で重ねる */
.cert-card {
  position: relative !important;
  border: 2px solid var(--fg-pink-soft) !important;     /* 黄色 → 薄ピンク */
  border-radius: var(--fg-radius-card) !important;
  background: #fff !important;
  padding-top: 50px !important;                          /* リボンの高さ分余白 */
  overflow: visible !important;
}
.cert-card::before {
  /* 既存の黄色「認定」リボンを非表示にする */
  display: none !important;
}
.cert-card::after {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 55px;
  height: 69px;
  background: url("../lp-images/figma/icons/ribbon-medal.png") no-repeat center/contain;
  pointer-events: none;
  z-index: 2;
}

/* ===== 8. CTA バンド（ピンク背景 + 3 CTA） ===== */
.cta-band {
  background: linear-gradient(180deg, var(--fg-pink-pale) 0%, var(--fg-pink-soft) 100%) !important;
  color: var(--ink) !important;
  padding: 80px 20px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 {
  font-size: clamp(26px, 4vw, 36px) !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
}
.cta-band p {
  color: var(--ink-soft) !important;
  opacity: 1 !important;
  font-size: 15px;
  margin: 0 0 32px;
}

/* CTA セクションに円形写真を追加するためのコンテナ */
.cta-photos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0 auto 36px;
  max-width: 600px;
}
.cta-photos .cta-photo {
  width: clamp(120px, 16vw, 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--fg-cream);
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.cta-photos .cta-photo:nth-child(2) {
  margin-top: 24px;     /* 真ん中の写真を少しずらして装飾 */
}
.cta-photos .cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTA バンド内のボタンを Figma 風に調整 */
.cta-band .btn--org {
  background: linear-gradient(135deg, #f48fa3, var(--fg-pink-deep)) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 900 !important;
}
.cta-band .btn--corp {
  background: linear-gradient(135deg, #82d165, var(--fg-green)) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 900 !important;
}
.cta-band .btn--ghost {
  background: linear-gradient(135deg, #ffc35c, var(--fg-orange)) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 900 !important;
}

/* ===== 9. ヒーロー写真エリア =====
   Figma 反映: 上部バンドは非表示、Kv1.png はヒーロー右側 (.hero__art) に表示
   写真は後でクライアントから受領後、hero-kv.png を上書きで差し替え可能 */
.hero-photos,
.hero-circle-photos {
  display: none !important;     /* 上部の不要バンドを完全非表示 */
}

/* ヒーロー右側 (.hero__art) は Kv1.png のみを表示 */
.hero__art {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative;
  aspect-ratio: 721 / 564;          /* Figma の Kv1 比率 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__art-inner {                  /* 既存の inner も使わない場合は無効化 */
  display: none !important;
}
.hero__art .hero__kv-image {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  object-fit: contain;
}
/* 既存の循環図関連を全部非表示 */
.hero__art-badge,
.hero__art-figure {
  display: none !important;
}
@media (max-width: 900px) {
  .hero__art {
    aspect-ratio: auto;
    min-height: 280px;
  }
  .hero__art .hero__kv-image {
    max-width: 100%;
  }
}

/* ===== 10. セクション見出しの英字サブ ===== */
.block__title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--ink);
  border-left: 4px solid var(--fg-pink);
  padding-left: 14px;
  margin: 0 0 8px;
}
.block__title .chip {
  margin-left: 10px;
  font-size: 0.5em;
  background: transparent !important;
  color: var(--fg-pink) !important;
  letter-spacing: .15em;
  vertical-align: 0.3em;
  border: 0 !important;
  padding: 0 !important;
}
.block__lead {
  color: var(--ink-soft);
  margin: 0 0 24px;
  font-size: 14px;
  padding-left: 14px;
}

/* ===== 11. もっと見るボタン（緑ピル） ===== */
.btn--ghost.btn--pill,
.more-btn {
  background: linear-gradient(135deg, #82d165, var(--fg-green)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--fg-radius-pill);
  font-weight: 900;
  letter-spacing: .04em;
  padding: 14px 30px !important;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(106,191,75,0.3);
  transition: transform .15s, box-shadow .15s;
}
.btn--ghost.btn--pill:hover,
.more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(106,191,75,0.4);
}

/* ===== 11.5 SP 用 KV 画像（PC では非表示） ===== */
.hero__kv-sp-image { display: none; }

/* ===== 12. レスポンシブ調整 (SP / タブレット) =====
   Figma SP-TOP1 を基準に最適化 */
@media (max-width: 960px) {
  /* ヒーロー: 白背景。装飾ドットは hero-sp.png に焼き込み済 */
  .hero {
    background: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }
  .hero > * { position: relative; z-index: 1; }

  /* === SP テキスト中央寄せ === */
  .hero__inner { align-items: center !important; }
  .hero__eyebrow { display: none !important; margin-top: 0 !important; }   /* SP-TOP1 では非表示 */
  .hero__title,
  .hero__lead { text-align: center !important; }

  /* === SP 写真: hero-sp.png を 1 枚そのまま表示 === */
  .hero__art {
    background: transparent !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 12px !important;
    display: block !important;
    width: 100% !important;
    text-align: center;
  }
  .hero__art .hero__kv-image { display: none !important; }
  .hero__art .hero__kv-sp-image {
    display: block !important;
    width: 100%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
  }

  /* === SP CTA: 縦並びピル === */
  .hero__ctas {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 18px;
  }
  .hero__ctas .btn-dropdown { width: 100%; max-width: 320px; }
  .hero__ctas .btn--lg,
  .hero__ctas .btn-dropdown__toggle {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 60px !important;
    font-size: 17px !important;
    padding: 16px 24px !important;
    border-radius: 999px !important;
  }

  /* --- 12-0. ヒーロー要素の並び順を Figma に揃える ---
     Figma 順: テキスト → 写真 → CTA → KPI（or テキスト → 写真 → KPI）
     display: contents で left wrapper を解除し、order でレイアウト指定 */
  .hero__inner {
    display: flex !important;
    flex-direction: column;
    gap: 14px !important;
  }
  .hero__inner > div:first-child {
    display: contents !important;     /* wrapper を解除して全要素を直接子要素に */
  }
  .hero__eyebrow      { order: 1; }
  .hero__title        { order: 2; }
  .hero__lead         { order: 3; }
  .hero__art          { order: 4; }   /* 写真 */
  .kpis               { order: 5; }   /* KPI 統計 (月桂樹付き) */
  .hero__ctas         { order: 6; }   /* CTA は最後 (Figma SP 順) */

  /* --- 12-1. ヒーロー Kv1 写真 --- */
  .hero__art {
    aspect-ratio: 721 / 564 !important;
    width: 100%;
    margin: 0 auto;
    padding: 0 4px;
    min-height: auto !important;
  }
  .hero__art .hero__kv-image {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* --- 12-2. KPI 統計（3 列、月桂樹サイズも縮小） --- */
  .kpis {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    max-width: 100%;
    overflow: hidden;     /* オーバーフロー防止 */
    margin-top: 24px !important;
    padding: 0 4px;
  }
  .kpi {
    padding: 8px 14px !important;       /* ロレル分の左右余白を縮小 */
    min-height: 80px;
  }
  .kpi__num {
    font-size: 16px !important;          /* 16px に縮小 */
    line-height: 1.05;
  }
  .kpi__num small {
    font-size: 0.55em;
    display: inline-block;
    line-height: 1.1;
  }
  .kpi__label {
    font-size: 10px !important;
    letter-spacing: 0;
    margin-bottom: 2px;
  }
  .kpi::before, .kpi::after {
    width: 14px !important;              /* 月桂樹幅を 14px に縮小 */
    height: 80px !important;
    background-size: 110px 66px !important;  /* SVG/PNG を縮小 */
    opacity: 0.85;
  }
  .kpi::before { background-position: 0 center; }
  .kpi::after { background-position: right center; }

  /* --- 12-3. ヒーロータイトル: 1 行に絶対収める --- */
  .hero__title {
    font-size: clamp(18px, 5.4vw, 24px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .hero__title em, .hero__title b { letter-spacing: -0.04em !important; }
  .hero__title-sub {
    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
  .hero__lead {
    font-size: 13px !important;
  }

  /* --- 12-4. CTA ボトム円形写真 --- */
  .cta-photos { gap: 8px !important; }
  .cta-photos .cta-photo {
    width: clamp(80px, 28vw, 120px) !important;
  }
  .cta-photos .cta-photo:nth-child(2) { margin-top: 14px; }

  /* --- 12-5. 認定パートナー リボンサイズ --- */
  .cert-card::after {
    width: 50px !important;
    height: 60px !important;
    top: -22px !important;
  }

  /* --- 12-6. ランキングクラウンサイズ --- */
  .rank-badge.g1,
  .rank-badge.g2,
  .rank-badge.g3 {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ===== 13. 共通カードスタイル統一 ===== */
.panel,
.card {
  border-radius: var(--fg-radius-card);
}