/* =========================================================
 * top.css : 「01 トップページ」固有スタイル
 * ========================================================= */

/* ----- 共通：ゴールドのピルボタン ----- */
/* 「無料相談はこちら」「詳しくはこちら」「○○をもっと見る」等で多用 */
.btn-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 12px 40px;
  border-radius: 50px;
  background: var(--color-accent);
  color: var(--color-bg-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

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

.btn-pill__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* SVGを白に */
}

/* アウトライン版（白背景・線）— 「もっと見る」系で使用想定 */
.btn-pill--outline {
  background: transparent;
  color: var(--color-text-black);
  border: 1px solid var(--color-accent);
}

.btn-pill--outline .btn-pill__arrow {
  filter: none;
}

/* =========================================================
 * ヒーロー
 * 黒背景 + 写真(opacity 70%) / コンテンツ幅1024・左寄せ
 * ========================================================= */
.top-hero {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  color: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.top-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/top/hero-bg.jpg");
  /* SP: 縦を埋める（cover）。横基準(幅auto)だと縦長コンテナで上下に余白が出るため */
  background-size: cover;
  /* SP: Figma SPヒーローのクロップは画像の右寄り(x 0.41–0.87・中心0.64)＝女性が主役の側。
     従来 left 30% は画像左のテック・グラフィック側を映して暗く女性が見えなかった。
     imageTransformから算出＝横位置76%（縦はcoverで全高表示）。2026-07-20是正。PCは@mediaで従来クロップ維持。 */
  background-position: 76% center;
  background-repeat: no-repeat;
}

@media (min-width: 1025px) {
  .top-hero__bg {
    background-size: 110% auto;
    /* PCは従来クロップ(左寄り30%)を維持＝Figma PCヒーロー(x0–0.91のほぼ全幅表示)に一致・PC監査済 */
    background-position: left 30%;
  }
}

.top-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.top-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

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

.top-hero__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .top-hero__title {
    font-size: 43px;
    line-height: 60px;
    letter-spacing: 2.15px;
  }
}

.top-hero__title-line {
  display: block;
}

.top-hero__lead {
  max-width: 628px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14px;
  line-height: 22px; /* Figma SP: lh22 (PCは@media で32px) */
  color: var(--color-bg-white);
}

@media (min-width: 1025px) {
  .top-hero__lead {
    font-size: 18px;
    line-height: 32px;
  }
}

.top-hero .btn-pill {
  margin-top: 8px;
}

@media (min-width: 1025px) {
  .top-hero .btn-pill {
    margin-left: 103px;
  }
}

/* =========================================================
 * パルボークとは（About）
 * ========================================================= */
.top-about {
  background: var(--color-bg-white);
  padding-top: 60px;
  padding-bottom: 40px;
  /* 中間幅(1025〜1439px)での横スクロールを防ぐため、はみ出し分だけクリップする */
  overflow-x: clip;
}

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

.top-about__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

@media (min-width: 1025px) {
  .top-about__inner {
    padding-inline: 0;
    gap: 40px;
  }
}

/* about見出し「パルボークとは」だけ line-height を 1.2 に（トップ限定） */
.top-about .par-subtitle__jp { line-height: 1.2; }

.top-about__lead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px; /* Figma SP: 20px (PCは@media で28px) */
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .top-about__lead {
    font-size: 28px;
    letter-spacing: 1.4px;
  }
}

.top-about__lead-line {
  display: block;
}

.top-about__text {
  max-width: 950px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-black);
  text-align: left; /* 親 .top-about__inner の center を打ち消す（本文左揃え） */
  /* typography = token .t-text-sm lg:t-text-md（要素側で付与） */
}

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

.top-about__text p {
  margin: 0;
}

.top-about__images {
  width: 100%;
  max-width: var(--container-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (min-width: 1025px) {
  .top-about__images {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin-top: -7px;
  }
}

.top-about__img {
  width: 100%;
  max-width: 480px;
}

.top-about__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 打ち合わせ写真は【PC限定】。SPでは出さない。
   モバイルファーストなのでベースで隠し、PC幅でだけ出す。 */
.top-about__img--people {
  display: none;
}

@media (min-width: 1025px) {
  .top-about__img--web {
    width: 586px;
    max-width: 586px;
    flex-shrink: 0; /* 合計幅1079>1024でも縮めない（コンテナ右へ55pxはみ出す） */
    margin-top: 16px;
  }

  .top-about__img--web img {
    height: 304px;
    object-fit: contain;
  }

  .top-about__img--people {
    display: block; /* ベースの display:none を解除（PCのみ表示） */
    width: 502px;
    max-width: 502px;
    flex-shrink: 0;
    margin-left: -9px; /* 図解と9px重ねる */
  }

  .top-about__img--people img {
    height: 298px;
  }
}

/* =========================================================
 * 共通：par/サブタイトル（英語ラベル + 紺見出し・中央）
 * ========================================================= */
.par-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.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 {
  color: var(--color-navy);
}

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

/* =========================================================
 * 共通：par/見出しh2（ロゴマーク + 紺見出し）
 * ========================================================= */
.par-h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.par-h2__mark {
  display: block;
  width: 24px;
  height: 24px;
}

.par-h2__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.par-h2__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

/* SPでは「Webマーケティングの全体像」セクションだけ見出しを左揃えにする。
   ロゴマーク(.par-h2__mark)は中央のままにしたいので、親の align-items:center は変えず、
   見出しだけ stretch して text-align で制御する。 */
@media (max-width: 1024px) {
  .top-overview .par-h2__title {
    align-self: stretch;
    /* .top-overview .par-h2 は左右パディングを持たず 0..375 に広がるため、
       左揃えにすると文字が画面端(0)に付く。SPの標準余白を入れて合わせる。 */
    padding-inline: var(--container-pad-sp);
    text-align: left;
    /* 左揃え＋余白16pxで箱が343pxになるため、28pxだと2行に折り返す。1行に収めるため24px。 */
    font-size: 24px;
  }
}

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

.par-h2__title-main {
  display: block;
}

.par-h2__title-sub {
  display: block;
  font-size: 20px;
  line-height: 1.5;
}

@media (min-width: 1025px) {
  .par-h2__title-sub {
    font-size: 32px;
    line-height: 60px;
    letter-spacing: 1.6px;
  }
}

/* =========================================================
 * パルボークが選ばれる理由（番号01-03を薄ベージュで背面装飾・左右交互）
 * ========================================================= */
.top-reasons {
  background: var(--color-bg-white);
  padding-top: 60px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.top-reasons__list {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 1025px) {
  /* 3カードとも画像サイズ・座標がフリーフォームなので、リスト(高1070px)を基準に絶対配置で再現 */
  .top-reasons {
    overflow: clip; /* エコーのblur滲みで横スクロールが出ないように */
  }

  .top-reasons__list {
    position: relative;
    isolation: isolate; /* エコー(z:-1)がセクション背景の下に潜らないように */
    display: block;
    max-width: 1440px;
    padding: 0;
    height: 1070px;
    margin-top: -7px;
  }

  .top-reason__body,
  .top-reason__image {
    position: absolute;
  }

  /* position は後続の基底ルール(.top-reason__body{position:relative})に負けないよう個別指定 */
  .top-reason:nth-child(1) .top-reason__body,
  .top-reason:nth-child(2) .top-reason__body,
  .top-reason:nth-child(3) .top-reason__body {
    position: absolute;
  }

  .top-reason:nth-child(1) .top-reason__body  { left: 210px; top: 56px;  width: 548px; }
  .top-reason:nth-child(1) .top-reason__image { left: 814px; top: 0;     width: 533px; height: 298px; }
  .top-reason:nth-child(1) .top-reason__echo  { left: 68px;  top: 52px;  width: 558px; height: 272px; }
  .top-reason:nth-child(1) .top-reason__num   { top: 8px; }
  .top-reason:nth-child(1) .top-reason__text  { width: 466px; margin-top: 12px; }

  .top-reason:nth-child(2) .top-reason__body  { left: 785px; top: 386px; width: 540px; }
  .top-reason:nth-child(2) .top-reason__image { left: 207px; top: 365px; width: 490px; height: 282px; }
  .top-reason:nth-child(2) .top-reason__echo  { left: -210px; top: -115px; width: 655px; height: 491px; }
  .top-reason:nth-child(2) .top-reason__num   { top: 13px; }
  .top-reason:nth-child(2) .top-reason__text  { width: 446px; margin-top: 17px; }

  .top-reason:nth-child(3) .top-reason__body  { left: 210px; top: 800px; width: 545px; }
  .top-reason:nth-child(3) .top-reason__image { left: 825px; top: 717px; width: 459px; height: 281px; }
  .top-reason:nth-child(3) .top-reason__echo  { left: 55px;  top: -171px; width: 785px; height: 524px; }
  .top-reason:nth-child(3) .top-reason__num   { top: -28px; }
  .top-reason:nth-child(3) .top-reason__text  { width: 483px; margin-top: 24px; }
}

.top-reason {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-reason__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1025px) {
  .top-reason__body {
    gap: 0; /* 本文上マージンはカード別指定 */
  }
}

.top-reason__num {
  position: absolute;
  top: -18px;
  right: 0;
  z-index: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 172.77px; /* Figma SP/PC とも 172.77px（装飾巨大数字。box高≠fontSize なので lh で調整） */
  line-height: 1;
  color: var(--color-bg-beige);
  pointer-events: none;
  user-select: none;
}

@media (min-width: 1025px) {
  .top-reason__num {
    font-size: 172.77px;
    line-height: 1.2;
  }
}

.top-reason__title,
.top-reason__text {
  position: relative;
  z-index: 1;
}

.top-reason__title {
  color: var(--color-navy);
}

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

.top-reason__text {
  color: var(--color-text-black);
  /* typography = token .t-text-sm lg:t-text-md */
}

.top-reason__image {
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 459 / 282;
  background: var(--color-bg-beige);
}

.top-reason__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1025px) {
  .top-reasons__more {
    margin-top: -23px;
  }
}

/* 背面エコー画像（同写真の拡大ぼかし）: SPでは非表示
 * （.top-reason__image img より高い詳細度にするため親クラスを付ける） */
.top-reason__image .top-reason__echo {
  display: none;
}

@media (min-width: 1025px) {
  .top-reason__image {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
  }

  .top-reason__photo {
    position: relative;
    border-radius: 5px;
  }

  .top-reason__image .top-reason__echo {
    display: block;
    position: absolute;
    z-index: -1;
    max-width: none; /* baseのimg{max-width:100%}で本体幅にクランプされないように */
    object-fit: cover;
    filter: blur(30px);
    opacity: 0.1; /* 不透明度はカード別（下で上書き） */
  }

  .top-reason:nth-child(1) .top-reason__echo { opacity: 0.25; }
}

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

/* =========================================================
 * Webマーケティングの全体像（背景 中間ベージュ #F6F3EB）
 * ========================================================= */
.top-overview {
  background: var(--color-bg-beige-mid);
}

.top-overview .par-h2 {
  padding-top: 60px;
  padding-bottom: 32px;
}

@media (min-width: 1025px) {
  .top-overview .par-h2 {
    padding-top: 80px;
    padding-bottom: 30px;
  }
}

.top-overview__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

@media (min-width: 1025px) {
  .top-overview__inner {
    padding-inline: 20px;
    padding-bottom: 127px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 50px;
  }
}

.top-overview__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 1025px) {
  .top-overview__body {
    flex: 0 0 561px;
    width: 561px;
    gap: 12px;
  }
}

.top-overview__heading {
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .top-overview__heading {
    max-width: 560px; /* 折返し（「…統合し / エリアNo.1…」）に合わせる */
  }
}

.top-overview__text {
  color: var(--color-text-black);
  /* typography = token .t-text-sm lg:t-text-md */
}

.top-overview__image {
  width: 100%;
  max-width: 413px;
  aspect-ratio: 413 / 223;
  overflow: hidden;
  border-radius: 5px;
}

@media (min-width: 1025px) {
  .top-overview__image {
    flex: 0 0 413px;
  }
}

.top-overview__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

/* =========================================================
 * 3つの支援スタイル（白背景 / カード drop-shadow）
 * ========================================================= */
.top-support {
  /* 3帯とも連続したベージュ #F9F7F2 */
  background: var(--color-bg-beige);
}

.support-band {
  width: 100%;
  padding-block: 56px;
}

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

  .support-band:nth-of-type(1) {
    padding-bottom: 40px;
  }

  .support-band:nth-of-type(2) {
    padding-bottom: 40px;
  }

  /* 03コンサル帯: 次セクション（代表挨拶）に合わせて下余白+20 */
  .support-band:nth-of-type(3) {
    padding-bottom: 100px;
  }
}

.support-band--beige {
  background: var(--color-bg-beige);
}

.support-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

@media (min-width: 1025px) {
  .support-inner {
    padding-inline: 0;
    gap: 40px;
  }
}

.support-block__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.support-block__num {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

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

.support-block__catch {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .support-block__catch {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}

.support-block__intro {
  max-width: 800px;
  color: var(--color-text-sub);
  text-align: center;
  /* typography = token .t-text-sm lg:t-text-md-bold（SP=Regular / PC=Bold） */
}

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

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

.service-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-accent); /* サービスカード枠 #c0af72 */
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

@media (min-width: 1025px) {
  .service-card {
    padding: 40px;
    gap: 10px;
  }

  /* 1段目(2枚)はアイコン→タイトル20px、2段目(3枚)は10px */
  .support-inner > .service-cards:first-of-type .service-card__title {
    margin-top: 10px;
  }

  .support-inner > .service-cards:first-of-type {
    margin-top: 5px;
  }

  /* タイトルは1行 */
  .service-card__title {
    white-space: nowrap;
  }
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.service-card__icon img {
  /* サイズはHTMLのwidth/height属性 */
  object-fit: contain;
}

.service-card__title {
  color: var(--color-text-black);
}

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

.service-card__text {
  color: var(--color-text-sub);
  /* typography = token .t-text-sm-bold lg:t-text-md-bold */
}

@media (min-width: 1025px) {
  .service-card__text {
    text-align: left; /* PC=左（親.service-cardのcenterを打ち消す） */
  }
}

.support-block__more {
  display: flex;
  justify-content: center;
}

/* 02：横長カード（画像 + 本文 + ボタン） */
.support-wide {
  width: 100%;
  background: var(--color-bg-white);
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

@media (min-width: 1025px) {
  .support-wide {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding: 40px 66px 56px;
  }

  .support-wide__image {
    margin-top: 8px;
  }
}

.support-wide__image {
  width: 100%;
  max-width: 280px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 221 / 190;
}

@media (min-width: 1025px) {
  .support-wide__image {
    width: 221px;
  }
}

.support-wide__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.support-wide__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1025px) {
  .support-wide__body {
    flex: 0 0 583px;
  }
}

.support-wide__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
  text-align: center;
}

@media (min-width: 1025px) {
  .support-wide__title {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}

.support-wide__text {
  color: var(--color-text-sub);
}

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

.support-wide__btn {
  align-self: center;
  margin-top: 4px;
}

@media (min-width: 1025px) {
  .support-wide__btn {
    align-self: center; /* ボタンは本文カラム中央（右端寄せではない） */
  }
}

/* 03：コンサル 2カード */
.consult-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.consult-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-bg-white);
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  text-align: center;
}

@media (min-width: 1025px) {
  .consult-card {
    padding: 50px 40px 64px;
  }
}

.consult-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
}

.consult-card__icon img {
  /* サイズはHTMLのwidth/height属性 */
  display: block;
  object-fit: contain;
}

.consult-card__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .consult-card__title {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}

.consult-card__text {
  color: var(--color-text-sub);
  text-align: left;
}

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

.btn-pill--deep {
  background: var(--color-bg-deep-beige);
}

/* =========================================================
 * 共通：左寄せ見出し（英語サブ + 紺h2 + リード）CEO / News / Blog 等
 * ========================================================= */
.par-head-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.par-head-left__en {
  color: var(--color-accent);
}

.par-head-left__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px; /* Figma SP: 24px（代表挨拶/中小企業診断士としての信頼と実績。PCは@media で40px） */
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

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

.par-head-left__lead {
  margin-top: 14px;
  color: var(--color-text-black);
}

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

/* =========================================================
 * 代表挨拶（背景 暖ベージュ / 白カード横並び）
 * ========================================================= */
.top-greeting {
  background: var(--color-bg-beige-warm);
  padding-block: 60px;
}

@media (min-width: 1025px) {
  .top-greeting {
    padding-block: 80px;
    padding-bottom: 93px;
  }
}

.top-greeting__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 1025px) {
  .top-greeting__inner {
    padding-inline: 0;
    gap: 40px;
  }
}

/* Figma: SPは白カード無し（写真＋本文がフル幅343で beige 背景に直置き）。
   PCのみ白カード（par/代表挨拶）。カードの視覚スタイルは下のPC @media にだけ置く。 */
.top-greeting__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

@media (min-width: 1025px) {
  .top-greeting__card {
    flex-direction: row;
    align-items: center;
    gap: 23px;                 /* Figma: 写真→本文の間隔 23px */
    background: var(--color-bg-white);
    border-radius: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Figma: 左padding30・写真263・gap23・本文箱691。本文箱が右paddingに食い込むため右は17。
       30+263+23+691+17=1024。これで本文列＝Figma実値691（折返し一致）。 */
    padding: 40px 17px 40px 30px;
  }
}

.top-greeting__photo {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 343 / 200;     /* Figma SP: 写真 343×200 フル幅 */
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 1025px) {
  .top-greeting__photo {
    width: 263px;
    aspect-ratio: 263 / 226;   /* Figma PC: 写真 263×226 */
  }
}

.top-greeting__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.top-greeting__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-greeting__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px; /* Figma SP: 外山紗織 22px（PCは@media で32px） */
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
}

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

.top-greeting__name-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

@media (min-width: 1025px) {
  .top-greeting__name-en {
    font-size: 24px;
  }
}

.top-greeting__role {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .top-greeting__role {
    font-size: 24px;
    letter-spacing: 1.2px;
  }
}

.top-greeting__text {
  margin-top: 6px;
  color: var(--color-text-black);
}

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

.top-greeting__more {
  display: flex;
  justify-content: center;
}

/* =========================================================
 * 信頼と実績（News）（3カラム + 実績リスト）
 * ========================================================= */
.top-news {
  background: var(--color-bg-white);
  padding-block: 60px;
}

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

.top-news__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

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

.news-pillars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1025px) {
  .news-pillars {
    flex-direction: row;
    gap: 32px;
    justify-content: space-between;
  }
}

.news-pillar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.news-pillar__title {
  background: var(--color-navy);
  color: var(--color-bg-white);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 15px 30px;
}

.news-pillar__image {
  width: 100%;
  aspect-ratio: 320 / 200;
  overflow: hidden;
  background: var(--color-bg-dark);
}

.news-pillar__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-pillar__text {
  color: var(--color-text-black);
}

.news-list {
  width: 100%;
  max-width: 736px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1025px) {
  .news-list {
    margin-top: 8px;
  }
}

.news-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 20px;
  border-bottom: 1px solid #ececec;
}

.news-item:first-child {
  border-top: 1px solid #ececec;
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.news-item__date {
  font-family: var(--font-en);
  font-weight: 400; /* SP=Regular(400)。PCは下の1025でBold */
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-black);
}

@media (min-width: 1025px) {
  .news-item__date {
    font-weight: 700; /* PC=Bold */
  }
}

.news-item__cat {
  background: var(--color-bg-white);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: 4px 24px;
  white-space: nowrap;
}

.news-item__title {
  color: var(--color-text-black);
}

.top-news__more {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* =========================================================
 * ブログ（背景 青系 / 横長カード 2列）
 * ========================================================= */
.top-blog {
  background: var(--color-bg-blue-gray);
  padding-block: 60px;
}

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

.top-blog__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

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

.top-blog__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.top-blog__en {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  color: var(--color-blog-en);
}

.top-blog__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px; /* Figma SP: ブログ 24px（PCは@media で32px） */
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--color-navy);
}

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

.blog-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

@media (min-width: 1025px) {
  .blog-list {
    gap: 0 40px;
    margin-top: -4px;
  }
}

.blog-card {
  flex: 1 1 100%;
  /* カード背景はセクション背景(#F0F2F5)と同色（白カードではない） */
  background: transparent;
  border: 1px solid #f5f5f5; /* ブログカード枠1px #f5f5f5（背景と近色で薄い） */
}

@media (min-width: 1025px) {
  .blog-card {
    flex: 1 1 calc(50% - 20px);
    min-width: 0;
  }
}

.blog-card__link {
  display: flex;
  /* SP(base)= Figma top SP は画像上・フル幅の縦積みカード（Frame 13870 VERTICAL・gap16・
     画像343×200・body padding0/gap10）。PCは@mediaで横並び(2列)に戻す。2026-07-20是正 */
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  height: 100%;
}

@media (min-width: 1025px) {
  .blog-card__link {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
  }
}

.blog-card__image {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  aspect-ratio: 343 / 200; /* SP: フル幅画像(343×200) */
  overflow: hidden;
  display: block;
}

@media (min-width: 1025px) {
  .blog-card__image {
    width: 200px;
    height: 150px;
    aspect-ratio: 200 / 150;
  }
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Figma SP body gap10 */
  padding: 0; /* SP: 画像上・本文フル幅（Figma body padding0）。PCは@mediaで左パディング付与 */
}

@media (min-width: 1025px) {
  .blog-card__body {
    gap: 10px;
    /* 右パディングは0（本文カラム272px）。16pxを入れるとフッター行が入りきらず
       flex-wrap で「続きを読む」が折り返すため。 */
    padding: 0 0 12px 20px;
    min-height: 194px;
  }
}

.blog-card__title {
  color: var(--color-text-blog);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.blog-card__excerpt {
  color: var(--color-text-blog);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.blog-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-card__cat {
  background: var(--color-bg-white);
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 3px 12px;
  color: var(--color-text-blog);
  white-space: nowrap;
}

.blog-card__date {
  font-family: var(--font-en);
  font-size: 10px;
  color: var(--color-text-blog);
}

.blog-card__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-text-sub-light);
  border-radius: 4px;
  padding: 6px 26px 6px 14px;
  font-family: var(--font-jp);
  font-size: 10px;
  line-height: 1.4;
  color: var(--color-text-blog);
  white-space: nowrap;
}

.blog-card__more-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--color-text-blog);
  border-right: 1px solid var(--color-text-blog);
  transform: translateY(-50%) rotate(45deg);
}

.top-blog__more {
  display: flex;
  justify-content: center;
}

@media (min-width: 1025px) {
  .top-blog__more {
    margin-top: -18px;
  }
}

/* =========================================================
 * よくある質問（FAQ アコーディオン）（背景 白 / Listitem 青系角丸）
 * ========================================================= */
.top-faq {
  background: var(--color-bg-white);
  padding-top: 60px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

@media (min-width: 1025px) {
  .top-faq {
    padding-top: 80px;
    /* 共通CTA/フッターの高さ差を吸収してフッターロゴ位置を合わせるため 125 とする */
    padding-bottom: 125px;
    gap: 40px;
  }

  .faq-list {
    margin-top: 40px; /* 見出し→リストは gap40+40=80 */
  }
}

.faq-list {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.faq-item {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg-white);
}

.faq-item__q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-bg-blue-gray);
  padding: 24px 64px 24px 24px;
  color: #212529;
  cursor: pointer;
  list-style: none;
}

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

.faq-toggle {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-navy);
  flex-shrink: 0;
}

.faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 8px;
  height: 8px;
  border-bottom: 1.6px solid var(--color-bg-white);
  border-right: 1.6px solid var(--color-bg-white);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform var(--transition-base);
}

.faq-item[open] .faq-toggle::after {
  transform: translate(-50%, -30%) rotate(-135deg);
}

.faq-item__a {
  background: var(--color-bg-white);
  padding: 16px 24px 24px;
  color: #212529;
}

@media (min-width: 1025px) {
  .faq-item__a {
    padding-right: 85px;
  }
}

.top-faq__more {
  display: flex;
  justify-content: center;
}

/* =========================================================
 * モバイル(≤1024)のテキスト揃え補正
 * PC(≥1025)は正しいため触らない。見出し=中央 / 本文・リード・導入=左。
 * ========================================================= */
@media (max-width: 1024px) {
  .top-reason__title { text-align: center; }   /* SP=中央 */
  .top-about__lead { text-align: left; }        /* SP=左 */
  .support-block__intro { text-align: left; }   /* SP=左 */
  .service-card__text { text-align: left; }     /* SP=左 */
}

/* =========================================================
 * モバイル(≤1024) タイポ是正（Figma SPフレーム実値・丸めなし）
 * PCフレームとSPフレームは別設定のため、PC(≥1025)を壊さないよう SP のみに閉じる。
 * 各値は design-reference/typo-inventory/top-figma-props-sp.json 実測。
 * ========================================================= */
@media (max-width: 1024px) {
  /* 見出しh2：セクションごとに Figma SP 実値が異なる */
  .top-reasons .par-h2__title { font-size: 20px; }  /* パルボークが選ばれる理由 */
  .top-support .par-h2__title { font-size: 24px; }  /* 貴社の成長フェーズに合わせた3つの支援スタイル */
  /* .top-overview は既存 SP override で 24px */

  /* 支援ブロック番号：01=22（base）/ 02・03=24 */
  .support-band--beige .support-block__num { font-size: 24px; }

  /* 支援ブロック キャッチ：01=20（base）/ 02・03=18。02のみ ls=0（03は 0.05em=0.9px でFigma一致） */
  .support-band--beige .support-block__catch { font-size: 18px; }
  .support-band--beige:has(.support-wide) .support-block__catch { letter-spacing: 0; line-height: 28px; } /* 02のみ Figma lh28 */

  /* 「公式LINE運用」カードのみ Figma SP が他カードと別スケール（title 16/24・text 16/24） */
  .top-support .service-cards:last-of-type .service-card:first-child .service-card__title {
    font-size: 16px;
    line-height: 24px;
  }
  .top-support .service-cards:last-of-type .service-card:first-child .service-card__text {
    font-size: 16px;
    line-height: 24px;
  }

  /* 代表挨拶 英字（CEO/News） lh28（トークンは SP lh24） */
  .par-head-left__en.t-en { line-height: 28px; }

  /* TOYAMA SAORI：SPは weight700 / lh28 / ls0（PCは weight400/ls1.2 のため SP限定） */
  .top-greeting__name-en {
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
  }

  /* 代表取締役 / 中小企業診断士：lh28 / ls0 */
  .top-greeting__role {
    line-height: 28px;
    letter-spacing: 0;
  }

  /* Blog（英字ラベル）：SP fs16 / lh24（PCは 18/32） */
  .top-blog__en {
    font-size: 16px;
    line-height: 24px;
  }

  /* FAQ質問：lh24（トークンは SP lh22） */
  .faq-item__q.t-text-sm-bold { line-height: 24px; }

  /* ピルボタン：SPは Figma でボタン毎に別値 */
  .top-hero .btn-pill { line-height: 22px; }                 /* 無料相談はこちら 14/22 */
  .top-reasons__more .btn-pill { font-size: 12px; line-height: 22px; }  /* 選ばれる理由をもっと見る 12/22 */
  .support-band:not(.support-band--beige) .support-block__more .btn-pill { font-size: 12px; line-height: 22px; } /* 運用代行の詳細を見る 12/22 */
  .btn-pill.support-wide__btn { font-size: 12px; line-height: 22px; }   /* 内製化研修の詳細を見る 12/22 */
  /* コンサル/代表挨拶/実績/ブログ/FAQ の詳細ボタンは 14/24（base のまま） */
}