/* ============================================
   AI検索太鼓判 サービスサイト style-v2.css
   index_v2.html 専用の追加・上書きCSS（style.cssの後に読み込む）
   方針：rank-quest.jp / propagateinc.com(スマートSEO) / speee AD の
   レイアウト・イラストの使い方（アイコンサークル、丸みのあるカード、
   帯状の実績ストリップ、ステップ番号付き円アイコン、比較テーブルの
   強調列）を参考に、AI検索太鼓判のトーン（誇大表現NG・価格非掲載・
   CTA一本化）を保ったまま視覚的な情報整理を強化する。
   ============================================ */

:root {
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 20px rgba(15, 40, 63, .07);
  --shadow-lift: 0 16px 36px rgba(15, 40, 63, .14);
  --navy-soft: #16588f;
}

/* 全体：カード・ボックス類を少し丸く、影で立体感を出す（既存コンポーネントの上書き） */
.chat-mock,
.scorecard,
.note-box,
.era-card,
.column-card,
.ratio-chart,
table,
.report-preview,
.ph-box,
.photo-box,
.stat-highlight .stat-box {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.trust-strip .trust-item {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: none;
}
.badge {
  border-radius: var(--radius-pill) !important;
}
form.wf-form input[type="text"],
form.wf-form input[type="email"],
form.wf-form textarea,
form.wf-form select {
  border-radius: 12px;
}

/* ============ 下層ページ共通：ヒーロー v2（グラデーション帯＋アイコン） ============ */
.page-hero-v2 {
  position: relative;
  overflow: hidden;
  padding: 48px 0 46px;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 46%, var(--navy-dark) 100%);
  color: #fff;
  border-bottom: none;
}
.page-hero-v2::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -40%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 216, 115, .16), rgba(255, 216, 115, 0) 65%);
  pointer-events: none;
}
.page-hero-v2 .wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.page-hero-v2 .note { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #ffe8b0; }
.page-hero-v2 h1 { margin: 0; color: #fff; font-size: clamp(26px, 3.4vw, 36px); }
.page-hero-v2 p.sub { color: #d7e2ee; margin-top: 8px; }
.page-hero-v2 .icon-circle {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, .14);
  color: #ffe8b0;
}
.page-hero-v2 .icon-circle svg { width: 30px; height: 30px; }

/* ============ 支援内容カード（白背景の丸アイコンカード／service.html等） ============ */
.feature-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 26px;
}
.feature-card-v2 {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--navy);
  padding: 28px 24px;
}
.feature-card-v2 .icon-circle { margin-bottom: 16px; }
.feature-card-v2 h3 { margin: 0 0 8px; font-size: 18px; }
.feature-card-v2 p { margin: 0; font-size: 15px; color: var(--text-sub); line-height: 1.7; }

/* ボタン：角丸ピル型＋影（参考3サイト共通の目立つCTA表現） */
.btn.primary {
  border-radius: var(--radius-pill);
  padding: 16px 38px;
  box-shadow: 0 10px 26px rgba(11, 40, 63, .28);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(11, 40, 63, .32); }

/* ============ アイコン共通部品 ============ */
.icon-circle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy-tint);
  color: var(--navy);
}
.icon-circle svg { width: 26px; height: 26px; }
.icon-circle.lg { width: 64px; height: 64px; }
.icon-circle.lg svg { width: 32px; height: 32px; }
section.bg-navy .icon-circle,
.hero-v2 .icon-circle {
  background: rgba(255, 255, 255, .14);
  color: #ffe8b0;
}

/* ============ ヒーロー v2：斜め帯グラデーション＋装飾 ============ */
.hero-v2 {
  position: relative;
  overflow: hidden;
  padding: 60px 0 68px;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 46%, var(--navy-dark) 100%);
  color: #fff;
  border-bottom: none;
}
.hero-v2::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 216, 115, .16), rgba(255, 216, 115, 0) 65%);
  pointer-events: none;
}
.hero-v2 .wrap { position: relative; z-index: 1; }
.hero-v2 .note { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #ffe8b0; }
.hero-v2 h1 { color: #fff; }
.hero-v2 h1 em { color: #ffd873; font-style: normal; }
.hero-v2 .sub { color: #d7e2ee; }
.hero-v2 .cta-group .btn.primary { background: #ffd873; color: var(--navy-dark); }
.hero-v2 .cta-group .btn.primary:hover { background: #ffcb4d; }
.hero-v2 .hero-note-small { color: #b9c9db; }
.hero-v2 .chat-mock { box-shadow: var(--shadow-lift); }

/* 実績ストリップ v2（アイコン付き・カード化） */
.trust-strip-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: -34px;
  position: relative;
  z-index: 2;
}
.trust-strip-v2 .trust-item {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  padding: 20px 22px;
}
.trust-strip-v2 .trust-item .num { font-size: 25px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.trust-strip-v2 .trust-item .desc { font-size: 13.5px; color: var(--text-sub); line-height: 1.5; }

/* ============ 課題提起 v2：かわいいチェックリスト ============ */
.problem-list-v2 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.problem-list-v2 li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px dashed #e6cf9e;
  padding: 17px 4px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
}
.problem-list-v2 li:first-child { border-top: 1px dashed #e6cf9e; }
.check-cute {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd873, #ff9f6b);
  box-shadow: 0 5px 12px rgba(255, 159, 107, .45);
}
.check-cute svg { width: 15px; height: 15px; color: #fff; }

/* ============ Before/After v2：タグピル ============ */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
}
.tag-pill.before { background: #eceeef; color: #7a828c; }
.tag-pill.after { background: var(--navy-tint); color: var(--navy); }
.before-after-grid .chat-mock .label { display: none; } /* v2ではtag-pillに置き換え */

.pattern-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}
.pattern-heading .step-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex: 0 0 auto;
}
.pattern-heading h3 { margin: 0; }

/* ============ 選ばれる理由 v2：ステップ番号付き円アイコン ============ */
.point-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
  margin-top: 34px;
}
.point-card-v2 { text-align: center; }
.point-circle {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .32);
  display: grid;
  place-items: center;
}
.point-circle svg { width: 34px; height: 34px; color: #ffe8b0; }
.point-circle .step-num {
  position: absolute;
  top: -8px;
  left: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #1c1c1c;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.point-card-v2 h3 { margin: 0 0 8px; font-size: 17.5px; color: #fff; }
.point-card-v2 p { margin: 0; font-size: 14px; color: #dbe5ef; line-height: 1.65; }

/* ============ CTAバンド（クロージング） ============ */
.cta-band {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
  color: #fff;
}
.cta-band .note { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #ffe8b0; }
.cta-band .section-title.center { color: #fff; }
.cta-band .section-title.center::after { background: var(--gold); }
.cta-band .cta-group .btn.primary { background: #ffd873; color: var(--navy-dark); }
.cta-band .cta-group .btn.primary:hover { background: #ffcb4d; }
.cta-band .cta-foot { margin-top: 16px; font-size: 13.5px; color: #b9c9db; }

/* ============ 市場データ：見出し横アイコン ============ */
.section-heading-icon {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.section-heading-icon h2 { margin: 0; padding-bottom: 0; }
.section-heading-icon h2::after { display: none; }

/* ============ レスポンシブ ============ */
@media (max-width: 900px) {
  .trust-strip-v2 { margin-top: 20px; }
}
@media (max-width: 600px) {
  .cta-band { padding: 40px 22px; border-radius: 16px; }
  .pattern-heading { align-items: flex-start; }
}