/* =========================================================
 * svc-consulting.css : 「03-3 コンサルティング（サービス詳細）」ページ固有
 * 正: design-reference/03-3-consulting-pc.png (1440×10039)
 * 共通コンポーネント（breadcrumbs / par-subtitle / btn-pill / faq-item）は
 * 他CSSを読み込まないため、このファイル内で自己完結して定義する。
 * 中央コンテンツ 1024 / 左右余白 208（PC）
 * ========================================================= */

/* ----- 共通コンテナ ----- */
.con-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 1025px) {
  .con-container {
    padding-inline: 0;
  }
}

/* ----- 共通：セクション見出し（h2 紺・中央） ----- */
.con-heading {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px; /* Figma SP 20（PCは@mediaで40） */
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  text-align: center;
}

@media (min-width: 1025px) {
  .con-heading {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

.con-heading--sub {
  font-size: 24px; /* Figma SP 24 */
  letter-spacing: 0.05em;
}

@media (min-width: 1025px) {
  .con-heading--sub {
    font-size: 40px; /* Figma PC 40 */
    text-align: left;
  }
}

/* ----- 共通：par サブタイトル（英語サブ + 紺h2） ----- */
.par-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.par-subtitle__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--color-accent);
}

@media (min-width: 1025px) {
  .par-subtitle__en {
    font-size: 16px;
    line-height: 28px;
  }
}

.par-subtitle__jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px; /* Figma SP 24（PCは@mediaで40） */
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  text-align: center;
}

@media (min-width: 1025px) {
  .par-subtitle__jp {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

/* ----- 共通：ピルボタン ----- */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 40px;
  border-radius: 50px;
  background: var(--color-accent);
  color: #f9f7f2; /* Figma: 無料で相談する は #f9f7f2 */
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px; /* Figma SP flowCTA=16。heroは下で20に上書き */
  line-height: 24px;
  letter-spacing: 0;
  white-space: nowrap;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

@media (min-width: 1025px) {
  .btn-pill {
    min-width: 300px;
    font-size: 20px; /* Figma PC 20 */
    letter-spacing: 1px; /* Figma PC ls1 */
  }
}

/* ヒーローのアクセントピルは Figma SP でも fs20 / ls1（flowCTAは16/0） */
.con-hero__action .btn-pill {
  font-size: 20px;
  letter-spacing: 1px;
}

/* もっと見る（navy）は Figma fs14 / ls0 / #fff（アクセントピルと別設定） */
.btn-pill.btn-pill--navy {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-bg-white);
}

.btn-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-pill__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.btn-pill--navy { background: var(--color-navy); }

/* =========================================================
 * ヒーロー
 * ========================================================= */
.con-hero {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .con-hero {
    height: 481px;
  }
}

.con-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/services-consulting/hero.jpg");
  background-size: cover;
  background-position: center;
}

.con-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.12) 100%);
}

.con-hero__content {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

@media (min-width: 1025px) {
  .con-hero__content {
    padding-inline: 0;
    gap: 24px;
  }
}

.con-hero__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 32px; /* Figma SP 32 */
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .con-hero__title {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

.con-hero__lead {
  max-width: 560px;
  font-family: var(--font-jp);
  font-weight: 700; /* Figma 700 */
  font-size: 14px;
  line-height: 22px; /* Figma SP lh22 */
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .con-hero__lead {
    max-width: 710px; /* Figma PC 箱710 */
    font-size: 20px; /* Figma PC 20 */
    line-height: 28px;
    letter-spacing: 1px; /* Figma PC ls1 */
  }
}

.con-hero__action {
  display: flex;
  flex-direction: column;
  /* SPはボタン・注記とも画面中央に置く。
     flex-start だと注記の箱が縮んで左に寄り、text-align:center が効かなかった。 */
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

@media (min-width: 1025px) {
  /* PC: ボタン＋注記は本文左端(208)ではなく x=276 から幅402の中央寄せスタック。 */
  .con-hero__action {
    width: 402px;
    margin-left: 68px; /* 208 + 68 = 276 */
  }
}

.con-hero__note {
  font-family: var(--font-jp);
  font-weight: 700; /* Figma 700 */
  font-size: 12px;
  line-height: 22px; /* Figma lh22 */
  color: var(--color-bg-white);
  text-align: center;
}

/* =========================================================
 * 導入
 * ========================================================= */
.con-intro {
  background: var(--color-bg-white);
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .con-intro {
    padding-block: 80px;
  }
}

.con-intro .con-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.con-intro__title {
  color: var(--color-navy);
  text-align: center;
}

@media (min-width: 1025px) {
}

.con-intro__photo {
  width: 100%;
  max-width: 450px;
  border-radius: 5px; /* Figma実測 */
  overflow: hidden;
}

/* 導入リード（太字・一点物: Figma SP 16/700/lh24 → PC 20/700/ls1・色#121212） */
.con-intro__text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-text-black);
  text-align: left;
}

@media (min-width: 1025px) {
  .con-intro__text {
    font-size: 20px;
    line-height: 32px; /* Figma lh AUTO（未照合）: 可読性で1.6 */
    letter-spacing: 1px;
    text-align: center;
  }
}

/* =========================================================
 * こんな経営課題を解決できます
 * ========================================================= */
.con-problems {
  background: var(--color-bg-blue-gray); /* #F0F2F5 */
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .con-problems {
    padding-block: 80px;
  }
}

.con-problems .con-heading {
  margin-bottom: 56px;
}

@media (min-width: 1025px) {
  .con-problems .con-heading {
    margin-bottom: 80px;
  }
}

.con-prob-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px 24px;
}

@media (min-width: 1025px) {
  .con-prob-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 96px 33px;
  }
}

.con-prob-card {
  position: relative;
  background: var(--color-bg-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(18, 18, 18, 0.05);
  padding: 96px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

/* イラストはカード上辺をまたいで配置（クロップ背景＝セクション帯色で継目なし） */
.con-prob-card__img {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 182px;
}

.con-prob-card__img img {
  width: 100%;
  height: auto;
}

.con-prob-card__label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px; /* Figma SP lh28 */
  letter-spacing: 0;
  color: var(--color-bg-deep-beige); /* Figma #d3bf7c */
}

@media (min-width: 1025px) {
  .con-prob-card__label {
    font-size: 24px; /* Figma PC 24 */
    line-height: 40px;
    letter-spacing: 0.72px;
  }
}

.con-prob-card__text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px; /* Figma SP 16 */
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .con-prob-card__text {
    font-size: 20px; /* Figma PC 20 */
    line-height: 32px; /* Figma lh AUTO（未照合） */
    letter-spacing: 1px;
  }
}

/* =========================================================
 * Web集客と経営をつなぐコンサルティング
 * ========================================================= */
.con-connect {
  background: var(--color-bg-white);
  padding-top: 56px;
  padding-bottom: 0; /* 下部帯（con-support）を全幅ベージュにするため、下パディングはcon-support側へ移設 */
}

@media (min-width: 1025px) {
  .con-connect {
    padding-top: 80px;
  }
}

.con-connect .con-heading {
  font-size: 24px; /* Figma SP 24（他セクション見出しは20） */
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .con-connect .con-heading {
    font-size: 40px; /* Figma PC 40 */
    margin-bottom: 56px;
  }
}

/* 2カラム（本文左 + 図右） */
.con-twocol {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .con-twocol {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 56px;
  }
}

.con-twocol__body {
  flex: 1 1 0;
  min-width: 0;
}

/* h3.t-h2 の見出しだが Figma は SP20/PC32（t-h2の28/40と別）。実値で上書き。 */
.con-twocol .con-twocol__title {
  color: var(--color-text-black);
  font-size: 20px;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

@media (min-width: 1025px) {
  .con-twocol .con-twocol__title {
    font-size: 32px;
    letter-spacing: 1.6px;
  }
}

.con-twocol__text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: var(--color-text-black); /* Figma #121212 */
}

@media (min-width: 1025px) {
  .con-twocol__text {
    font-size: 16px; /* Figma PC 16 */
    line-height: 28px;
  }
}

.con-twocol__figure {
  flex: 0 0 auto;
  width: 100%;
  max-width: 340px;
  align-self: center;
}

@media (min-width: 1025px) {
  .con-twocol__figure {
    width: 340px;
  }
}

/* ズレ ボックス（薄青の外枠 + 白の内カード） */
.con-zure {
  background: #E3F0FC; /* 薄青ボックス（トークン未定義） */
  border-radius: 20px;
  padding: 24px 16px;
  margin-bottom: 56px;
}

@media (min-width: 1025px) {
  .con-zure {
    padding: 40px;
    margin-bottom: 80px;
  }
}

.con-zure__inner {
  background: var(--color-bg-white);
  border-radius: 16px;
  padding: 32px 20px;
}

@media (min-width: 1025px) {
  .con-zure__inner {
    padding: 56px 64px;
  }
}

.con-zure__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px; /* Figma SP 20 */
  line-height: 1.5;
  letter-spacing: 1px; /* Figma SP ls1 */
  color: var(--color-text-black);
  text-align: left;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  .con-zure__title {
    font-size: 32px; /* Figma PC 32 */
    letter-spacing: 1.6px;
    margin-bottom: 32px;
  }
}

.con-zure__text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: var(--color-text-black); /* Figma #121212 */
}

@media (min-width: 1025px) {
  .con-zure__text {
    font-size: 16px;
    line-height: 28px;
  }
}

.con-zure__lead {
  color: var(--color-text-sub);
  margin-top: 20px;
}

@media (min-width: 1025px) {
  .con-zure__lead {
    margin-top: 24px;
  }
}

.con-zure__list {
  list-style: disc;
  padding-left: 1.4em;
  margin: 6px 0 20px;
}

@media (min-width: 1025px) {
  .con-zure__list {
    margin: 8px 0 24px;
  }
}

.con-zure__list li {
  list-style: disc;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

@media (min-width: 1025px) {
  .con-zure__list li {
    font-size: 16px;
    line-height: 30px;
  }
}

/* 伴走 + できること */
.con-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* この帯は全幅ベージュ #F9F7F2。
     フルブリードで背景のみ全幅化し、コンテンツ位置は据え置き。 */
  background: var(--color-bg-beige); /* #F9F7F2 */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: 40px 56px;
}

@media (min-width: 1025px) {
  .con-support {
    padding-block: 56px 80px;
  }
}

.con-support__text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: #212529; /* Figma #212529 */
  text-align: left;
  margin-top: 20px;
}

@media (min-width: 1025px) {
  .con-support__text {
    font-size: 16px;
    line-height: 25.6px; /* Figma PC lh25.6 */
    margin-top: 24px;
  }
}

.con-support__label {
  /* SPは中央。PCは左（後述のPCブロックで戻す）。
     align-self:flex-start だと箱が縮んで左に寄るため stretch + text-align で制御する。 */
  align-self: stretch;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px; /* Figma SP 24 */
  line-height: 1.4;
  letter-spacing: 1.2px; /* Figma SP ls1.2 */
  color: var(--color-navy); /* Figma SP #00103e（PCは#212529） */
  margin-top: 40px;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  /* PCは左揃え。SPの中央をここで打ち消す。 */
  .con-support__label {
    font-size: 30px; /* Figma PC 30 */
    letter-spacing: 1.5px;
    color: #212529; /* Figma PC #212529 */
    margin-top: 56px;
    margin-bottom: 28px;
    text-align: left;
  }
}

.con-can-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .con-can-cards {
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
  }
}

.con-can-card {
  flex: 0 0 auto;
  min-width: 0;
  background: var(--color-bg-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(18, 18, 18, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* PC(row)でのみ等幅伸縮。SPベースでこれを付けると縦flex(高さauto)＋overflow:hidden で
   flex-basis:0が高さ0に潰れ、カードが丸ごと不可視になる（2026-07-20 是正）。
   ⚠️ ベース宣言より**後**に置くこと（メディアクエリは詳細度を上げないため。
      前に置くと後勝ちで潰れ、PCでカードが縮まずはみ出す。2026-08-18 本番で発生）。 */
@media (min-width: 1025px) {
  .con-can-card {
    flex: 1 1 0;
  }
}

.con-can-card__img {
  width: 100%;
  aspect-ratio: 320 / 160;
  overflow: hidden;
}

.con-can-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con-can-card__body {
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.con-can-card__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px; /* Figma 16 */
  line-height: 24px; /* Figma SP lh24 */
  letter-spacing: 0;
  color: #212529; /* Figma #212529 */
}

@media (min-width: 1025px) {
  .con-can-card__title {
    font-size: 16px;
    line-height: 19.2px; /* Figma PC lh19.2 */
  }
}

.con-can-card__text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: #212529; /* Figma #212529 */
}

@media (min-width: 1025px) {
  .con-can-card__text {
    font-size: 16px; /* Figma PC 16 */
    line-height: 26px;
  }
}

/* =========================================================
 * ①Web集客 / ②経営 コンサルティング
 * ========================================================= */
.con-plan {
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .con-plan {
    padding-block: 80px;
  }
}

.con-plan--web {
  background: var(--color-bg-beige-mid); /* #F6F3EB */
}

.con-plan--mgmt {
  background: var(--color-bg-blue-gray); /* #F0F2F5 */
}

.con-plan .con-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.con-plan--web .par-subtitle {
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .con-plan--web .par-subtitle {
    margin-bottom: 56px;
  }
}

.con-plan__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px; /* Figma SP 20 */
  line-height: 1.4;
  letter-spacing: 0.05em; /* SP ls1 / PC ls2 (=0.05em) */
  color: var(--color-navy);
  text-align: center;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  .con-plan__title {
    font-size: 40px; /* Figma PC 40 */
    margin-bottom: 32px;
  }
}

.con-plan__figure {
  width: 100%;
  max-width: 350px;
  border-radius: 5px; /* Figma実測 */
  overflow: hidden;
  margin-bottom: 24px;
}

.con-plan__sub {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px; /* Figma SP 20 */
  line-height: 1.6;
  letter-spacing: 1px; /* Figma SP ls1 */
  color: #212529; /* Figma #212529 */
  text-align: center;
  margin-bottom: 16px;
}

@media (min-width: 1025px) {
  .con-plan__sub {
    font-size: 22px; /* Figma PC 22 */
    letter-spacing: 1.1px;
    margin-bottom: 20px;
  }
}

.con-plan__text {
  max-width: 900px;
  font-family: var(--font-jp);
  font-weight: 400; /* Figma SP 400 */
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: #333333;
  text-align: left;
  margin-bottom: 40px;
  letter-spacing: 0.48px;
}

@media (min-width: 1025px) {
  .con-plan__text {
    font-weight: 500; /* Figma PC 500 */
    font-size: 16px;
    line-height: 27.2px; /* Figma PC lh27.2 */
    margin-bottom: 48px;
  }
}

/* 3項目カード（アイコン左上・左寄せ） */
.con-feature-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .con-feature-cards {
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
  }
}

/* SP は Figma 通り アイコン左 + テキスト右（icon x16 / text x128・幅約210）。
   PC は 3カラムでアイコン上・テキスト下（下の @media で flex-column に戻す）。 */
.con-feature-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-bg-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(18, 18, 18, 0.06);
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
}

@media (min-width: 1025px) {
  .con-feature-card {
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.con-feature-card__icon {
  display: block;
  width: 48px;
  height: 48px;
  grid-column: 1;
  grid-row: 1 / 3;
}

.con-feature-card__title,
.con-feature-card__text {
  grid-column: 2;
}

@media (min-width: 1025px) {
  .con-feature-card__icon {
    width: 56px;
    height: 56px;
  }
}

.con-feature-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.con-feature-card__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px; /* Figma SP lh24 */
  letter-spacing: 0;
  color: #212529; /* Figma #212529 */
}

@media (min-width: 1025px) {
  .con-feature-card__title {
    font-size: 16px; /* Figma PC 16 */
    line-height: 19.2px; /* Figma PC lh19.2 */
  }
}

.con-feature-card__text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: #212529; /* Figma #212529 */
}

@media (min-width: 1025px) {
  .con-feature-card__text {
    font-size: 16px; /* Figma PC 16 */
    line-height: 26px;
  }
}

/* =========================================================
 * 料金プラン
 * ========================================================= */
.con-price {
  background: var(--color-bg-white);
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .con-price {
    padding-block: 80px;
  }
}

.con-price .par-subtitle {
  margin-bottom: 48px;
}

@media (min-width: 1025px) {
  .con-price .par-subtitle {
    margin-bottom: 64px;
  }
}

.con-price-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 1025px) {
  .con-price-cards {
    flex-direction: row;
    gap: 40px;
  }
}

.con-price-card {
  flex: 0 0 auto;
  min-width: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-text-sub); /* 料金カード枠 #3f3b3a（PC）。SPはFigmaで#85827dなので下で上書き */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(18, 18, 18, 0.06);
  display: flex;
  flex-direction: column;
}

/* PC(row)でのみ等幅伸縮。SPベースだと縦flex+overflow:hiddenでカードが高さ0に潰れる（2026-07-20是正）
   ⚠️ この宣言は必ず `.con-price-card { flex: 0 0 auto }` より**後**に置くこと。
      メディアクエリは詳細度を上げないので、前に置くと後続のベース宣言に後勝ちで潰され、
      カードが縮まずコンテナ(1024px)を453pxはみ出す（2026-08-18 本番で発生）。 */
@media (min-width: 1025px) {
  .con-price-card {
    flex: 1 1 0;
  }
}

/* Figma: 料金カード枠は PC #3f3b3a / SP #85827d（PC/SPで別値）。SPだけ薄グレーに。 */
@media (max-width: 1024px) {
  .con-price-card { border-color: var(--color-text-sub-light); }
}

/* t-text-md-bold(16) だが Figma は SP20/PC24。実値で上書き。 */
.con-price-cards .con-price-card__name {
  background: var(--color-navy); /* #00103E */
  color: var(--color-bg-white);
  text-align: center;
  padding: 26px 16px;
  font-size: 20px; /* Figma SP 20 */
  letter-spacing: 1px; /* Figma SP ls1 */
}

@media (min-width: 1025px) {
  .con-price-cards .con-price-card__name {
    padding: 30px 16px;
    font-size: 24px; /* Figma PC 24 */
    letter-spacing: 1.2px;
  }
}

.con-price-card__body {
  padding: 28px 24px 36px;
}

@media (min-width: 1025px) {
  .con-price-card__body {
    padding: 36px 40px 44px;
  }
}

.con-price-card__lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px; /* Figma 16 */
  line-height: 24px; /* Figma SP lh24 */
  color: var(--color-text-sub); /* Figma #3f3b3a */
}

@media (min-width: 1025px) {
  .con-price-card__lead {
    line-height: 28px; /* Figma PC lh28 */
  }
}

.con-price-card__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 18px;
  color: var(--color-navy);
}

@media (min-width: 1025px) {
  /* PC: 金額は中央。SPは左が正なので PC だけに効かせる。flexなので justify-content。 */
  .con-price-card__amount { justify-content: center; }
}

.con-price-card__num {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 36px; /* Figma SP 36 */
  line-height: 1.2;
  letter-spacing: 1.8px; /* Figma SP ls1.8 */
  color: var(--color-text-black); /* Figma #121212（navyでない） */
}

@media (min-width: 1025px) {
  .con-price-card__num {
    font-size: 44px; /* Figma PC 44 */
    letter-spacing: 2.2px;
  }
}

/* Figma「(税込) /月」は fw700。SP fs12/#121212、PC fs16/#3f3b3a */
.con-price-card__tax,
.con-price-card__unit {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .con-price-card__tax,
  .con-price-card__unit {
    font-size: 16px;
    color: var(--color-text-sub); /* #3f3b3a */
  }
}

.con-price-card__term {
  color: var(--color-text-sub); /* Figma #3f3b3a */
  padding-bottom: 20px;
  border-bottom: 1px solid #EAECEF;
  margin-bottom: 20px;
}

.con-price-card__list {
  list-style: disc;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.con-price-card__list li {
  list-style: disc;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: var(--color-text-sub); /* Figma #3f3b3a */
}

@media (min-width: 1025px) {
  .con-price-card__list li {
    font-size: 16px; /* Figma PC 16 */
    line-height: 28px; /* Figma PC lh28 */
  }
}

.con-price-card__note {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub); /* Figma #3f3b3a */
  margin-top: 24px;
}

/* =========================================================
 * ご相談から開始までの流れ
 * ========================================================= */
.con-flow-section {
  background: var(--color-bg-white);
  padding-block: 24px 56px;
}

@media (min-width: 1025px) {
  .con-flow-section {
    padding-block: 40px 80px;
  }
}

.con-flow {
  background: #E2EAF4; /* 薄青ボックス（トークン未定義） */
  border-radius: 60px; /* Figma実測 */
  padding: 40px 20px 48px;
}

@media (min-width: 1025px) {
  .con-flow {
    padding: 64px 60px 72px;
  }
}

.con-flow .con-heading {
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .con-flow .con-heading {
    margin-bottom: 56px;
  }
}

.con-flow-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 1025px) {
  .con-flow-steps {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.con-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

@media (min-width: 1025px) {
  .con-flow-step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding-inline: 12px;
  }
  /* ステップ間の > シェブロン */
  .con-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 96px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-text-sub-light);
    border-right: 2px solid var(--color-text-sub-light);
    transform: rotate(45deg);
  }
}

.con-flow-step__title {
  color: #222222; /* Figma #222222 */
  order: 1;
}

.con-flow-step__icon {
  display: block;
  width: 84px;
  height: 84px;
  order: 2;
}

.con-flow-step__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.con-flow-step__text {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px; /* Figma SP lh24 */
  color: var(--color-text-black); /* Figma #121212 */
  order: 3;
  text-align: left;
}

@media (min-width: 1025px) {
  .con-flow-step__text {
    font-size: 14px;
    line-height: 24px;
    text-align: left;
  }
}

.con-flow__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}

@media (min-width: 1025px) {
  .con-flow__cta {
    margin-top: 56px;
  }
}

.con-flow__note {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 10px; /* Figma SP 10 */
  line-height: 1.6;
  color: var(--color-text-black); /* Figma #121212 */
  text-align: center;
}

@media (min-width: 1025px) {
  .con-flow__note {
    font-size: 12px; /* Figma PC 12 */
    line-height: 22px; /* Figma PC lh22 */
  }
}

/* =========================================================
 * よくある質問（アコーディオン）
 * ========================================================= */
.con-faq {
  background: var(--color-bg-white);
  padding-block: 56px;
}

@media (min-width: 1025px) {
  .con-faq {
    padding-block: 80px;
  }
}

.con-faq .par-subtitle {
  margin-bottom: 40px;
}

@media (min-width: 1025px) {
  .con-faq .par-subtitle {
    margin-bottom: 56px;
  }
}

.con-faq__cat {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px; /* Figma SP 20 */
  line-height: 1.4;
  letter-spacing: 1px; /* Figma SP ls1 */
  color: #212529; /* Figma #212529 */
  margin-bottom: 24px;
  text-align: center;
}

@media (min-width: 1025px) {
  .con-faq__cat {
    font-size: 22px; /* Figma PC 22 */
    letter-spacing: 1.1px;
    margin-bottom: 28px;
    text-align: left;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1025px) {
  .faq-list {
    gap: 20px;
  }
}

.faq-item {
  background: transparent;
}

.faq-item__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 16px 16px 20px;
  background: var(--color-bg-blue-gray); /* #F0F2F5 */
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-base);
}

@media (min-width: 1025px) {
  .faq-item__q {
    min-height: 72px;
    padding: 16px 16px 16px 28px;
  }
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:hover {
  background: #E7EAEF;
}

.faq-item__q-text {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px; /* Figma 14 */
  line-height: 24px; /* Figma lh24 */
  letter-spacing: 0;
  color: #212529; /* Figma #212529 */
}

@media (min-width: 1025px) {
  .faq-item__q-text {
    font-size: 14px; /* Figma PC 14 */
  }
}

.faq-item__icon {
  flex: 0 0 auto;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-navy); /* #00103E */
}

@media (min-width: 1025px) {
  .faq-item__icon {
    width: 40px;
    height: 40px;
  }
}

.faq-item__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-bg-white);
  border-bottom: 2px solid var(--color-bg-white);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform var(--transition-base);
}

.faq-item[open] .faq-item__icon::before {
  transform: translate(-50%, -30%) rotate(225deg);
}

.faq-item__a {
  padding: 20px 20px 4px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px; /* Figma 14 */
  line-height: 24px; /* Figma lh24 */
  letter-spacing: 0;
  color: #212529; /* Figma #212529 */
}

@media (min-width: 1025px) {
  .faq-item__a {
    padding: 22px 28px 6px;
    font-size: 14px; /* Figma PC 14 */
    line-height: 24px;
  }
}

.faq-item__a p {
  margin: 0;
}

.con-faq__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 1025px) {
  .con-faq__more {
    margin-top: 48px;
  }
}