/* ============================================================
   KABUKI front.css（TOP ページ専用）
   Figma: node 443:2031（PC）/ 129:325（SP）
   色・フォント値は必ず tokens.css の var() を参照する。
   淡いセクション背景は --color-bg-section（2026-07-29 追加）を使用する。
   ============================================================ */

/* ================================================
   p-front__hero（AI-Driven / トレカ事業 2分割ヒーロー）
   Figma: node 443:2031 内 Hero（443:2110）/ SP: 129:325 内 167:723
   ================================================ */
.p-front__hero {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .p-front__hero {
    flex-direction: row;
  }
}

.p-front__hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--space-container-sp) 32px;
  overflow: hidden;
  min-height: 360px;
}

@media (min-width: 768px) {
  .p-front__hero-panel {
    flex: 1 0 0;
    padding: 60px 66px 40px;
    min-height: 480px;
  }
}

.p-front__hero-panel--ai {
  background-color: var(--color-bg-section);
}

.p-front__hero-panel--tcg {
  background-color: var(--color-black);
  color: var(--color-white);
}

.p-front__hero-panel-inner {
  position: relative;
  z-index: 1;
  max-width: 360px;
}

@media (min-width: 768px) {
  /* 出典: get_design_context 640:3384/3372（テキスト枠幅588px = パネル720px - 左右66pxパディング） */
  .p-front__hero-panel-inner {
    max-width: 588px;
  }
}

.p-front__hero-heading {
  /* 2026-07-30修正: get_design_context確認済み 167:604（SP）は24px/leading-1.5
     （従来32px/1.4はPC値の流用で、「デジタルマーケティングを」がSP幅で
     折り返され、明示<br>の前に不要な改行が入っていた）。SP QA指摘。 */
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: inherit;
}

@media (min-width: 768px) {
  .p-front__hero-heading {
    font-size: var(--fs-48);
  }
}

.p-front__hero-eyebrow {
  /* 2026-07-30修正: get_design_context確認済み 167:603（SP）は14px/gap20px
     （640:3387 のPC値18px/gap30pxをSPにも流用していた）。SP QA指摘。 */
  margin-top: 20px;
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: inherit;
}

@media (min-width: 768px) {
  .p-front__hero-eyebrow {
    margin-top: 30px;
    font-size: var(--fs-18);
  }
}

.p-front__hero-sub {
  /* 2026-07-30修正: get_design_context確認済み 167:614（SP）は14px/gap20px
     （640:3375 のPC値18px/gap30pxをSPにも流用していた）。SP QA指摘。 */
  margin-top: 20px;
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  color: inherit;
}

@media (min-width: 768px) {
  .p-front__hero-sub {
    margin-top: 30px;
    font-size: var(--fs-18);
  }
}

.p-front__hero-image {
  /* 2026-07-31修正: 田中SP指摘。SPでスマホ画像が右寄りに見えていたため中央寄せに変更
     （旧 align-self:flex-end; margin-inline-start:auto; は右詰めだった）。
     PC は下記 min-width:768px で position:absolute; right指定に上書きされるため非破壊。 */
  position: relative;
  z-index: 0;
  align-self: center;
  width: 200px;
  margin-top: 24px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-front__hero-image {
    position: absolute;
    right: var(--space-container-pc);
    bottom: 0;
    /* 2026-08-06修正: SOTA 指摘。280px だと見出し「デジタルマーケティングを / AIで加速する。」
       （PC 48px・2行）の右端と近接しすぎていた。right 固定の絶対配置なので、幅を縮めた分
       （40px）だけ画像の左端が右へ寄り、コピーとの間隔が広がる。SP（200px）は変更しない。 */
    width: 240px;
    margin: 0;
  }
}

.p-front__hero-cta {
  /* 確定版（node 640:3274）はボタン文言「サービス詳細」の1行シンプルピル。SOTA指摘 2026-07-29 */
  /* 2026-07-30修正: get_design_context確認済み SP（693:3290）はボタン上gap30px
     （PC640:3384は40px）。SP QA指摘。 */
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 15px 40px;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .p-front__hero-cta {
    margin-top: 40px;
  }
}

.p-front__hero-cta--light {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* ================================================
   p-front__news
   Figma: node 443:2031 内 News（y≈670）/ SP: 129:325 内 129:386
   Figma は3タブ（ニュース/プレスリリース/メディア）だが、
   SOTA判断（2026-07-21）で2タブに変更（仕様書02参照）。
   ================================================ */
.p-front__news {
  background-color: var(--color-white);
}

.p-front__news-inner {
  padding-block: 32px;
}

@media (min-width: 768px) {
  .p-front__news-inner {
    padding-block: 48px;
  }
}

.p-front__news-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .p-front__news-head {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}

.p-front__news-title {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__news-title {
    font-size: var(--fs-48);
  }
}

.p-front__news-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--color-gray);
}

.p-front__news-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  color: var(--color-gray-text);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.p-front__news-tab.is-active {
  color: var(--color-black);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--color-black);
}

.p-front__news-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-red);
  flex-shrink: 0;
}

.p-front__news-panel {
  display: none;
}

.p-front__news-panel.is-active {
  display: block;
}

.p-front__news-list {
  display: flex;
  flex-direction: column;
}

.p-front__news-item {
  border-bottom: 1px solid var(--color-gray);
}

.p-front__news-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 16px;
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__news-link {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

.p-front__news-date {
  font-family: var(--font-en);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  flex-shrink: 0;
}

/* 2026-07-29追加: Figma実測（640:3316 Vector 5）で日付とタイトルの間に
   縦の区切り線があることを確認、実装に抜けていた。PCの横並びレイアウトのみ表示
   （SPは縦積みのため区切り線なし＝Figma SP側にも該当ノードなし）。
   色は実測 stroke #231815 = --color-logo と同値（Figmaのベタ打ち色で
   Figma変数には紐付いていないが、既存トークンと完全一致するためそれを使用）。 */
.p-front__news-divider {
  display: none;
}

@media (min-width: 768px) {
  .p-front__news-divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    flex-shrink: 0;
    background-color: var(--color-logo);
  }
}

.p-front__news-item-title {
  font-size: var(--fs-16);
}

/* ================================================
   p-front__service（Our Service 見出し + AI-Driven / トレカ事業 共通）
   Figma: node 443:2031 内 bg-section（129:411 相当、y≈1035〜1631）
   淡い背景は --color-bg-section（#F7FBF9）を使用する
   （2026-07-29 確定版 get_design_context 640:3275/640:3379 で実値確認）。

   2026-07-29 修正2: 確定版 Figma（node 640:3275「背景」, y=1060〜1679）は
   「Our Service」見出し（640:3320, y=853〜1017）を覆っていない。淡色背景は
   「AI-Driven デジタルマーケティング」見出し以下のみを覆う。そのため背景は
   section 全体（.p-front__service--ai）ではなく、AI-Driven 見出し以下を
   包む .p-front__service-ai-panel に付与する。
   ================================================ */
.p-front__service {
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-front__service {
    padding-block: 64px;
  }
}

.p-front__service--ai {
  /* 背景は p-front__service-ai-panel 側で付与するため、section 自体の
     下側パディングは打ち消す（上側は Our Service 見出し上の余白として残す）。 */
  padding-bottom: 0;
}

.p-front__service-ai-panel {
  background-color: var(--color-bg-section);
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .p-front__service-ai-panel {
    padding-bottom: 64px;
  }
}

.p-front__service--tcg {
  background-color: var(--color-white);
}

.p-front__service-head {
  text-align: center;
  margin-bottom: 8px;
}

.p-front__service-head-en {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__service-head-en {
    font-size: var(--fs-48);
  }
}

.p-front__service-head-sub {
  /* 2026-07-29修正: get_design_context確認済み 640:3322 text-24px-Regular, text-black
     （14px / gray-text ではなかった）。SOTA指摘。 */
  margin-top: 4px;
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

.p-front__service-title {
  /* 2026-07-29修正: get_design_context確認済み 640:3307（AI-Driven）/ 640:3319（トレカ事業）
     はいずれも Montserrat Bold 48px・中央寄せで同一スタイル（テキストボックス中心が
     ページ中心 x=720 と一致）。従来は24px・左寄せで2見出しの位置/サイズが不揃いだった。
     SOTA指摘。 */
  /* 2026-07-30修正: get_design_context確認済み 680:3100（SP）は20px（PC48pxの流用で
     「AI-Driven デジタルマー／ケティング」と単語途中で折り返されていた）。SP QA指摘。 */
  margin-top: 32px;
  margin-bottom: 20px;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-align: center;
}

@media (min-width: 768px) {
  .p-front__service-title {
    font-size: var(--fs-48);
  }
}

.p-front__service-title--tcg {
  margin-top: 0;
}

@media (min-width: 768px) {
  /* SP専用の強制改行（680:3100は「AI-Driven」「デジタルマーケティング」の2行）。
     PCは1行（640:3307）のため768px以上で無効化する。 */
  .p-front__service-title-break {
    display: none;
  }
}

.p-front__service-cards {
  display: grid;
  grid-template-columns: 1fr;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3101）はgap15px
     （PC gap40pxをSPにも流用していた）。SP QA指摘。 */
  gap: 15px;
}

@media (min-width: 768px) {
  .p-front__service-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    /* カード2枚の合計幅はコンテンツ幅(1200px)いっぱい。--content-max=1280 により
       l-container のコンテンツ実幅が 1200px になったため、負マージンの応急処置は撤去。
       各カード = (1200 - 40gap) / 2 = 580px（Figma一致）。 */
  }
}

.p-front__service-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-table-border); /* 2026-07-29追加。Figma実測（640:3279/655:3829）で確認、抜けていた罫線 */
  border-radius: 8px;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3104/680:3115）はpadding約20px
     （PC 640:3279/655:3829の40pxをSPにも流用していたため、カード内余白が広すぎて
     2枚目カードのテキスト列がロゴ列に押されて1文字ずつ縦積みで折り返す致命的な崩れが
     発生していた）。SP QA指摘。 */
  padding: 20px;
  min-height: 164px;
}

@media (min-width: 768px) {
  /* 出典: get_design_context 640:3279/655:3829（カード実寸580x290） */
  .p-front__service-card {
    padding: 40px;
    min-height: 290px;
  }
}

/* picture 要素自体がflexアイテムになるため、中の img へ flex-shrink:0 を指定しても
   効かず、カード1の画像列（picture）がテキスト列に押されて潰れていた。SP QA指摘 2026-07-30。 */
.p-front__service-card > picture {
  flex-shrink: 0;
}

.p-front__service-card-body {
  display: flex;
  flex-direction: column;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3104/680:3116）はgap15px
     （PC 640:3289/651:3823のgap30pxをSPにも流用していた）。SP QA指摘。 */
  gap: 15px;
}

@media (min-width: 768px) {
  .p-front__service-card-body {
    gap: 30px;
  }
}

.p-front__service-card-title {
  /* 2026-07-30修正: get_design_context確認済み SP（680:3117/680:3105）は16px
     （PC 640:3291/651:3825は24px。SPにも24pxを流用していた）。SP QA指摘。 */
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__service-card-title {
    font-size: var(--fs-24);
  }
}

.p-front__service-card-sub {
  /* 2026-07-30修正: get_design_context確認済み SP（680:3106/680:3118）は12px
     （PC 640:3292/651:3826は16px。SPにも16pxを流用していた）。SP QA指摘。 */
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__service-card-sub {
    font-size: var(--fs-16);
  }
}

.p-front__service-card-image {
  flex-shrink: 0;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3107 Mask group）実寸は132px
     （PC 640:3280は216px。SPにもPC値を流用していた）。SP QA指摘。 */
  width: 132px;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .p-front__service-card-image {
    width: 216px;
  }
}

.p-front__service-card-logos {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3119 Group44内訳）はgap約16px
     （PC 640:3299のgap40pxをSPにも流用していた）。SP QA指摘。 */
  gap: 16px;
}

@media (min-width: 768px) {
  .p-front__service-card-logos {
    gap: 40px;
  }
}

.p-front__service-card-logo {
  font-family: var(--font-en);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.p-front__service-card-logo-image {
  width: 100%;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3119 Group44）実寸は約111px
     （PC 640:3299は187px。SPにもPC値を流用していたため、ロゴ列がテキスト列の
     幅を奪い、テキストが1文字ずつ縦積みで折り返す致命的な崩れの一因になっていた）。
     SP QA指摘。 */
  max-width: 111px;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .p-front__service-card-logo-image {
    max-width: 187px;
  }
}

.p-front__service-buttons {
  /* 2026-07-31修正: 田中指示。SPでもボタンを横並びにする（旧flex-direction:columnの縦積みを廃止）。 */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.p-front__service-button,
.p-front__tcg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 14px 24px;
}

.p-front__service-button {
  /* 2026-07-31修正: 石黒・田中指摘。「サービス詳細」「導入事例を見る」の文字数差で
     ボタン幅が不揃いだったため、隣接する2ボタンの幅をPC/SP共通で170pxに固定する。 */
  width: 170px;
}

.p-front__tcg-button-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.p-front__tcg-button-icon svg {
  width: 100%;
  height: 100%;
}

/* ================================================
   p-front__tcg-*（トレカ事業カード）
   Figma: node 443:2031 内 Service 03 / Service 04
   ================================================ */
.p-front__tcg-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .p-front__tcg-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    /* --content-max=1280 でコンテンツ実幅1200pxになったため負マージン応急処置は撤去。 */
  }
}

.p-front__tcg-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 8px;
  /* 2026-07-30修正: get_design_context確認済み SP（655:3967/680:3129）はpadding
     20px 20px 40px（PC値 30px 40px 40px をSPにも流用していた）。SP QA指摘。 */
  padding: 20px 20px 40px;
}

@media (min-width: 768px) {
  .p-front__tcg-card {
    padding: 30px 40px 40px;
  }
}

.p-front__tcg-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.p-front__tcg-card-head-text {
  display: flex;
  flex-direction: column;
  /* 2026-07-30修正: get_design_context確認済み SP（655:3942/680:3132）はgap15px
     （4pxでは詰まりすぎていた）。PC側は現状維持。SP QA指摘。 */
  gap: 15px;
}

@media (min-width: 768px) {
  .p-front__tcg-card-head-text {
    gap: 4px;
  }
}

.p-front__tcg-card-service {
  font-family: var(--font-en);
  /* 2026-07-30修正: get_design_context確認済み SP（655:3943/680:3133）は14px
     （PC値16pxをSPにも流用していた）。SP QA指摘。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-red);
}

@media (min-width: 768px) {
  .p-front__tcg-card-service {
    font-size: var(--fs-16);
  }
}

.p-front__tcg-card-name {
  /* 2026-07-30修正: get_design_context確認済み SP（655:3944/680:3134）は16px
     （PC値24pxをSPにも流用していたため、"DUEL SPACE ADs"が"DUEL"/"SPACE ADs"の
     2行に不要な折り返しをしていた）。SP QA指摘。 */
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__tcg-card-name {
    font-size: var(--fs-24);
  }
}

.p-front__tcg-card-catch {
  /* 2026-07-30修正: get_design_context確認済み SP（655:3945/680:3135）は14px
     （PC値16pxをSPにも流用していた）。SP QA指摘。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__tcg-card-catch {
    font-size: var(--fs-16);
  }
}

.p-front__tcg-card-head-image {
  flex-shrink: 0;
}

.p-front__tcg-card-head-image--logo {
  width: auto;
  height: 40px;
  object-fit: contain;
}

@media (min-width: 768px) {
  /* 出典: get_design_context 640:3401（ロゴ実寸239x103） */
  .p-front__tcg-card-head-image--logo {
    height: 103px;
  }
}

.p-front__tcg-card-head-image--photo img {
  display: block;
  width: 120px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

@media (min-width: 768px) {
  /* 出典: get_design_context 640:3418（写真マスク実寸247x172.15） */
  .p-front__tcg-card-head-image--photo img {
    width: 247px;
    height: 172px;
    border-radius: 5px;
  }
}

.p-front__tcg-card-text {
  /* 2026-07-30修正: get_design_context確認済み SP（655:3949/680:3136）は14px
     （PC値16pxをSPにも流用していた）。SP QA指摘。 */
  font-size: var(--fs-14);
  line-height: var(--lh-jp);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__tcg-card-text {
    font-size: var(--fs-16);
  }
}

.p-front__tcg-card-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.p-front__tcg-button {
  align-self: flex-start;
  /* 2026-07-29修正: Service01/02カードは高さがgridで揃うが、画像アスペクト比の
     違いで中身の実高さが異なり、ボタン下の余白が左右カードで不揃い（最大約122px vs 40px）
     になっていた。ボタンを常にカード下端（padding-bottom分）に固定し、余白を均一化する。
     SOTA指摘（Figma 640:3390/640:3408 はいずれもボタン直下の余白が40px前後で近似）。 */
  margin-top: auto;
}

/* 2026-07-31追加: 石黒指摘対応。ポケカジラカードのみ「サービス詳細」（本体導線）
   と「ポケカジラへ」（外部サイトへの小さめのテキストリンク）を並置する。
   カード下端固定は個々のボタンではなくこのラッパーに持たせ、内側の
   .p-front__tcg-button の margin-top:auto は打ち消す。 */
.p-front__tcg-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: auto;
}

.p-front__tcg-card-actions > .p-front__tcg-button {
  margin-top: 0;
}

.p-front__tcg-external-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.p-front__tcg-external-link .p-front__tcg-button-icon {
  width: 14px;
  height: 14px;
}

/* ================================================
   p-front__member
   Figma: node 443:2031 内 Member（y≈3373）
   ================================================ */
.p-front__member {
  background-color: var(--color-bg-section);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-front__member {
    padding-block: 56px;
  }
}

.p-front__member-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .p-front__member-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* 出典: get_design_context 640:3441（gap-[143px]、content-max 1200 = 583+143+470近似） */
    gap: 143px;
  }
}

.p-front__member-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-front__member-head {
  /* 2026-07-30修正: get_design_context確認済み SP（680:3251）は縦積み・中央寄せ・gap5px
     （PC 640:3444は横並び・baseline・gap20pxで、これをSPにも流用していた）。SP QA指摘。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

@media (min-width: 768px) {
  .p-front__member-head {
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
  }
}

.p-front__member-head-en {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-front__member-head-sub {
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__member-head-en {
    font-size: var(--fs-48);
  }

  .p-front__member-head-sub {
    font-size: var(--fs-22);
  }
}

.p-front__member-text {
  /* 2026-07-30修正: get_design_context確認済み SP（680:3254）は14px
     （PC値16pxをSPにも流用していた）。SP QA指摘。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  max-width: 480px;
}

@media (min-width: 768px) {
  .p-front__member-text {
    font-size: var(--fs-16);
  }
}

.p-front__member-button {
  /* 2026-07-31修正: 石黒・田中指摘。他のTOPボタンと幅を揃え、中央寄せにする
     （旧 align-self:flex-start; は左寄せで他ボタンと幅も不揃いだった）。 */
  align-self: center;
  width: 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 14px 24px;
}

.p-front__member-image {
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 706 / 514;
  border-radius: 12px;
  object-fit: cover;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-front__member-image {
    flex-shrink: 0;
    width: 480px;
    aspect-ratio: 940 / 560;
  }
}

/* ================================================
   p-front__blog
   Figma: node 443:2031 内 Blog セクション

   2026-07-29 修正3: 確定版 Figma（node 640:3330）は「左カラム=見出し+リード文
   +前後ナビ矢印／右カラム=記事カード横並び」の2カラム構成（左カラム幅343px、
   列間ギャップ50px、左カラム内の行間ギャップも50px）。PC のみ2カラム化し、
   SP（〜767px）は見出し→カード→ナビの縦積みを維持する。
   ================================================ */
.p-front__blog {
  background-color: var(--color-white);
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-front__blog {
    padding-block: 56px;
  }
}

.p-front__blog-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "list"
    "nav";
  row-gap: 24px;
}

@media (min-width: 768px) {
  .p-front__blog-body {
    /* 出典: get_design_context 640:3330（左カラム 343px、列間・行間ギャップ 50px） */
    grid-template-columns: 343px 1fr;
    grid-template-areas:
      "head list"
      "nav  list";
    column-gap: 50px;
    row-gap: 50px;
    align-items: start;
  }
}

.p-front__blog-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  /* 2026-07-30修正: get_design_context確認済み SP（132:645）はgap20px（旧10pxは
     PC値との混同）。SP QA指摘。 */
  gap: 20px;
}

@media (min-width: 768px) {
  .p-front__blog-head {
    gap: 10px;
  }
}

.p-front__blog-head-titles {
  /* 2026-07-30修正: get_design_context確認済み SP（132:644）は縦積み・中央寄せ・gap5px
     （PC 640:3333は横並び・baseline・gap20pxで、これをSPにも流用していた）。SP QA指摘。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

@media (min-width: 768px) {
  .p-front__blog-head-titles {
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
  }
}

.p-front__blog-head-en {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-black);
}

.p-front__blog-head-sub {
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  color: var(--color-black);
}

@media (min-width: 768px) {
  .p-front__blog-head-en {
    font-size: var(--fs-48);
  }

  .p-front__blog-head-sub {
    font-size: var(--fs-22);
  }
}

.p-front__blog-text {
  /* 2026-07-30修正: get_design_context確認済み SP（132:567）は14px
     （PC値16pxをSPにも流用していた）。SP QA指摘。 */
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  max-width: 480px;
}

@media (min-width: 768px) {
  .p-front__blog-text {
    font-size: var(--fs-16);
  }
}

.p-front__blog-carousel {
  grid-area: list;
  position: relative;
  min-width: 0; /* グリッド子要素内で overflow-x スクロールを効かせるため */
}

.p-front__blog-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.p-front__blog-list::-webkit-scrollbar {
  display: none;
}

.p-front__blog-item {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  /* 出典: get_design_context 640:3340（カード幅 320px、ギャップ 40px） */
  .p-front__blog-list {
    gap: 40px;
  }

  .p-front__blog-item {
    flex: 0 0 320px;
  }
}

.p-front__blog-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-black);
}

.p-front__blog-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

.p-front__blog-thumb-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.p-front__blog-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray);
}

.p-front__blog-thumb-placeholder-image {
  width: 40%;
  height: auto;
  opacity: 0.25;
}

.p-front__blog-item-title {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: var(--lh-jp);
}

.p-front__blog-date {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  color: var(--color-gray-text);
}

.p-front__blog-nav {
  grid-area: nav;
  display: flex;
  gap: 8px;
}

.p-front__blog-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-black);
  color: var(--color-white);
}

.p-front__blog-nav-button svg {
  width: 14px;
  height: 10px;
}

.p-front__blog-nav-button--prev svg {
  transform: scaleX(-1);
}

/* ================================================
   p-front__recruit（採用帯）
   Figma: node 443:2051（1440x269）。仕様書01実装時のキャッシュから実測値を再利用。
   ================================================ */
.p-front__recruit {
  background-color: var(--color-black);
  color: var(--color-white);
}

.p-front__recruit-inner {
  display: flex;
  flex-direction: column;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3267/680:3268）は中央寄せ・
     本文グループ〜ボタン間gap50px（旧flex-start/gap24pxはPC値の流用）。SP QA指摘。 */
  align-items: center;
  gap: 50px;
  padding-block: 40px;
}

@media (min-width: 768px) {
  .p-front__recruit-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 56px;
  }
}

.p-front__recruit-body {
  display: flex;
  flex-direction: column;
  /* 2026-07-30修正: get_design_context確認済み SP（680:3269）は中央寄せ・gap20px
     （旧12px/左寄せはPC値の流用）。SP QA指摘。 */
  align-items: center;
  gap: 20px;
  text-align: center;
}

@media (min-width: 768px) {
  .p-front__recruit-body {
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
}

.p-front__recruit-head {
  /* 2026-07-30修正: get_design_context確認済み SP（680:3270）は縦積み・中央寄せ
     （旧横並び・baselineはPC値の流用）。SP QA指摘。 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .p-front__recruit-head {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
}

.p-front__recruit-head-en {
  font-family: var(--font-en);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-front__recruit-head-en {
    font-size: var(--fs-48);
  }
}

.p-front__recruit-head-sub {
  font-size: var(--fs-18);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .p-front__recruit-head-sub {
    font-size: var(--fs-24);
  }
}

.p-front__recruit-text {
  font-size: var(--fs-16);
  color: var(--color-white);
}

.p-front__recruit-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-gray);
  padding: 20px 28px;
}