/* =====================================================
   Pineston AI Boost v3 — トップページ専用スタイル
   ※ vw単位を完全排除（px/rem/%のみ使用）
   ※ iframe比較ビューア内でも正常描画されるよう設計
===================================================== */

/* ============================================
   HERO / FV
============================================ */
.hero-sec {
  min-height: 500px; /* 比較ビューア内iframe対応: svh→固定値 */
  background: linear-gradient(160deg, #E8F5EA 0%, #F7F9F7 55%, #EEF4FB 100%);
  display: flex;
  align-items: flex-start; /* スマホ: 上詰めで全要素を表示 */
  padding: 20px 0 32px;    /* 上余白を削減 */
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}

/* FV縦積みロゴ — 無加工・余白のみ */
.hero-logo img {
  width: 240px; /* vw廃止: clamp(200px, 30vw, 260px) → 固定240px */
  max-width: 100%;
  margin: 0 auto;
}

/* キャッチコピー */
.hero-headline {
  font-family: 'Noto Serif JP', serif;
  font-size: 2.2rem; /* vw廃止: clamp(1.6rem, 4.5vw, 2.6rem) → 固定2.2rem */
  color: var(--sumi);
  line-height: 1.5;
  font-weight: 700;
}
.hero-sub1 {
  font-size: 1.05rem; /* vw廃止: clamp(.95rem, 2vw, 1.1rem) → 固定1.05rem */
  color: var(--mute);
  line-height: 1.85;
}
.hero-sub2 {
  font-size: .9rem;
  color: var(--mute);
  background: rgba(255,255,255,.7);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 14px 20px;
  max-width: 540px;
  line-height: 1.8;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: .82rem;
  color: var(--mute);
}
.hero-note span { display: flex; align-items: center; gap: 5px; }
.hero-note .tok { color: var(--tok); }

/* ============================================
   お悩み
============================================ */
.troubles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.t-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 24px 22px;
}
/* I26/I27: アイコンをh3文頭にインライン表示 */
.t-icon { display: none; } /* 旧構造の残骸を非表示 */
.t-icon-inline {
  display: inline-flex;
  align-items: center;
  color: var(--tok);
  font-size: 1.1rem;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}
.t-card h3 {
  display: flex;
  align-items: center;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.t-card p  { font-size: .85rem; color: var(--mute); line-height: 1.7; }
.troubles-answer {
  background: var(--tok);
  color: var(--white);
  border-radius: var(--radius);
  padding: 24px 28px;
  text-align: center;
  font-size: .95rem;
  line-height: 1.9;
}
.troubles-answer strong { font-size: 1.05rem; }

/* ============================================
   選ばれる理由
============================================ */
.reason-item {
  display: flex;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--bdr);
}
.reason-item:last-child { border-bottom: none; }
.reason-num {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--mat);      /* 松葉色 */
  line-height: 1;
  flex-shrink: 0;
  font-family: 'Noto Serif JP', serif;
  min-width: 44px;
}
/* S4b: 項目名h3はシンプルな1行タイトル。アイコンは本文pの文頭に移動 */
.reason-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 10px;
  line-height: 1.5;
}
/* 本文p: アイコンを文頭に横並び */
.reason-body-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .9rem;
  color: var(--mute);
  line-height: 1.85;
}
.reason-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.reason-body p { font-size: .9rem; color: var(--mute); line-height: 1.85; }
/* bm-lead内のアイコン */
.bm-lead .reason-icon { display: inline; margin-top: 0; vertical-align: middle; margin-right: 4px; }

/* B+Mフォーミュラ */
.bm-box {
  background: #EEF6EE;
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 16px 0;
}
.bm-lead { font-size: .92rem; color: var(--sumi); line-height: 1.7; margin-bottom: 18px; }
.bm-formula {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bm-num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--tok);
  line-height: 1;
  font-family: 'Noto Serif JP', serif;
}
.bm-num small { font-size: 1rem; }
.bm-label { font-size: .75rem; font-weight: 700; color: var(--mute); letter-spacing: .04em; }
.bm-plus, .bm-eq { font-size: 1.6rem; color: var(--kin); font-weight: 700; }
.bm-eq-result { display: flex; align-items: center; gap: 14px; }
.bm-result .bm-num { color: var(--kin); }
.bm-note { font-size: .75rem; color: var(--mute); }

/* 20点リスト（I10: 角丸長方形・横幅統一・中央揃え） */
.twenty-list {
  margin: 14px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.twenty-tag {
  background: var(--white);
  border: 1px solid var(--tok);
  color: var(--tok);
  font-size: .78rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;     /* 角丸長方形に変更 */
  text-align: center;     /* 中央揃え */
  display: block;
  width: 100%;
}

/* ============================================
   できる支援（5本柱）I11: 横幅フル活用
============================================ */
.services-5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.s5-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 20px 18px;       /* paddingを縮小して縦長を抑制 */
  transition: transform var(--tr), box-shadow var(--tr);
}
.s5-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* I22: s5-numを松葉色角丸長方形バッジに変更（svc-num-badgeと同デザイン） */
.s5-num {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tok);
  background: rgba(192,224,191,.25); /* I28: 薄い松葉色（svc-num-badgeと同濃度） */
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
/* I22: s5-iconの円形背景を削除し、h3文頭インラインアイコンに */
.s5-icon { display: none; }       /* 旧アイコン非表示 */
.s5-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tok);
  font-size: 1rem;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.s5-card h3 {
  display: flex;
  align-items: center;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.s5-card p  { font-size: .83rem; color: var(--mute); line-height: 1.7; }

/* ============================================
   進め方
============================================ */
.flow-wrap { display: flex; flex-direction: column; gap: 0; max-width: 680px; margin: 0 auto; }
.flow-step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 24px 0;
}
.flow-num {
  width: 44px; height: 44px;
  background: var(--tok);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.flow-text strong { display: block; font-weight: 700; margin-bottom: 5px; }
.flow-text p { font-size: .88rem; color: var(--mute); }
.flow-arrow { text-align: left; padding-left: 22px; color: var(--mat); font-size: 1.1rem; }

/* ============================================
   代表者ひと言 I12: 見出し外に出す・幅統一
============================================ */
.about-teaser { max-width: 100%; margin: 0 auto; }  /* 幅をコンテナいっぱいに */
.about-teaser-inner {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 32px 36px;
}
.about-teaser-inner h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.45rem;
  color: var(--sumi);
  line-height: 1.55;
  margin: 0 0 12px;
  text-align: center;   /* 中央揃え */
}
/* ボタン幅をコンテナに合わせる */
.about-teaser-inner .btn {
  display: block;
  text-align: center;
}
.about-teaser-inner p { font-size: .9rem; color: var(--mute); line-height: 1.85; margin-top: 10px; }
.about-sig { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.sig-name  { font-weight: 700; font-size: 1.05rem; color: var(--sumi); }
.sig-title { font-size: .78rem; color: var(--mute); }

/* ============================================
   CTA
============================================ */
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta-tag {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: var(--mat);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}
/* I13: CTA見出し用ラベル — 白枠・金茶色フォント */
/* .sec-dark * { color: var(--white) } に負けないよう !important を使用 */
.sec-dark .cta-tag-heading,
.cta-tag-heading {
  display: inline-block;
  background: transparent;
  color: var(--kincha) !important;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 20px;
  border-radius: 6px;
  border: 2px solid var(--white);
  margin-bottom: 16px;
}
.cta-inner h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.75rem; /* vw廃止: clamp(1.4rem, 3vw, 1.85rem) → 固定1.75rem */
}
.cta-desc { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.9; margin-top: 14px; }
.cta-pts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}
.cta-pts span { display: flex; align-items: center; gap: 5px; }
.kin { color: var(--kin); }

/* ============================================
   レスポンシブ
============================================ */
@media (max-width: 860px) {
  .services-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* I7: お悩みカードを1列・フル幅 */
  .troubles-grid { grid-template-columns: 1fr; }
  .t-card { width: 100%; }
  /* I10: 20点タグも1列に */
  .twenty-list { grid-template-columns: 1fr; }
  .hero-sec { padding: 10px 0 24px; min-height: unset; }
  .hero-headline { font-size: 1.45rem; }
  .hero-logo img { width: 170px; }
  .hero-inner { gap: 12px; }
  .reason-item { flex-direction: column; gap: 12px; }
  .reason-num  { font-size: 2rem; }
  .services-5  { grid-template-columns: 1fr; }
  .about-teaser-inner { padding: 24px 20px; }
  .about-teaser-inner h2 { font-size: 1.25rem; }
  .bm-formula { justify-content: flex-start; }
  .bm-formula { flex-direction: column; align-items: center; }
  .bm-plus { width: 100%; text-align: center; }
  .bm-eq-result { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .bm-result { margin-left: 0; text-align: center; }
  .bm-result .bm-label { text-align: center; width: 100%; }
  .cta-inner h2 { font-size: 1.45rem; }
}