@charset "utf-8";

/* ========================================
   TOPページ専用コンポーネント
   ======================================== */
@layer components {
  /* JavaScript関連クラス */

  /* 共通見出しスタイルは common.css で定義済み */

  /* メインビジュアル */
  .p-home-mv {
    position: relative;
    padding: 0;
    margin-inline: auto;
    max-width: 100%;
    width: auto;
    margin-bottom: 0;
    margin-top: var(
      --header-height
    ); /* ヘッダーの高さ分のマージントップを追加 */
  }

  .img-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .main-visual__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top right;
  }

  .main-visual__text-box {
    position: absolute;
    z-index: 0;
    color: var(--color-white);
    font-family: var(--font-display);
  }

  .main-visual__text-box h1 {
    font-size: var(--font-6xl);
    font-weight: 600;
  }

  .main-visual__text-box p {
    font-size: var(--font-2xl);
    font-weight: 300;
  }

  .main-visual__text-box p.sub-title {
    font-size: var(--font-4xl);
  }

  /* ニュースセクション */
  .p-home-news {
    position: relative;
    z-index: 2;
    padding: calc(var(--space-8) + 40px) var(--space-8);
    background-color: var(--color-bg-section);
    border-radius: 1rem;
    margin-top: 0;
    margin-bottom: var(--space-8); /* デフォルトのmargin-blockを上書き */
  }

  .p-home-news__header {
    display: flex;
    align-items: flex-end;
    justify-content: center; /* PC表示でも中央揃えに変更 */
    margin-bottom: 0;
  }

  .p-home-news__header .c-button-view-more {
    transform: translate(1.6rem, 0);
  }

  .p-home-news__list {
    display: grid;
    grid-template-columns: inherit;
    gap: var(--space-4);
    margin-left: var(--space-8);
  }

  .p-home-news__item {
    background-color: transparent;
    border-bottom: 1px solid var(--color-border-light);
    padding: 1.5rem 0;
  }

  /* スマホ版：シンプルな罫線区切り表示 */
  @media (max-width: 768px) {
    .p-home-news__item {
      background-color: transparent;
      border-bottom: 1px solid var(--color-border-light);
      padding-bottom: var(--space-4);
      margin-bottom: var(--space-4);
    }

    .p-home-news__item:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    /* お知らせセクション内のo-containerのpaddingを0に */
    .p-home-news .o-container {
      padding-inline: 0;
    }

    /* 見出し部分のみ適切なpaddingを確保して中央揃えを維持 */
    .p-home-news__header {
      padding-inline: var(--space-4);
      justify-content: center; /* 中央揃えに変更 */
    }
  }

  /* 追加定義スタイル */
  .p-home-news__list .c-card {
    flex-direction: inherit;
    gap: 1.8rem;
    align-items: center;
  }

  /* PC表示でのメタ情報レイアウト */
  .p-home-news__list .c-card__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    min-width: 0;
    width: 20rem; /* 日付とカテゴリの幅を固定 */
  }

  .p-home-news__list .c-card__time {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 8rem; /* 日付の最小幅を設定 */
  }

  .p-home-news__list .c-card__category {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* タイトルの幅を増やす */
  .p-home-news__list .c-card__post-title {
    flex: 1;
    min-width: 0;
  }

  .p-home-news__footer {
    text-align: center;
    margin-top: var(--space-8);
  }

  .p-home-news__link {
    color: var(--color-text-primary);
    text-decoration: underline;
    font-size: var(--font-base);
    transition: color var(--duration-base) var(--easing-standard);
  }

  .p-home-news__link:hover {
    color: var(--color-primary);
  }

  /* What's Small B2B セクション */
  .p-home-whats-small-btob {
    color: var(--color-text-primary);
    background-color: var(--color-white);
    padding-bottom: 4rem;
    position: relative;
    transition: color 1.5s ease-out, background-color 1.5s ease-out;
  }

  .p-home-whats-small-btob::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    z-index: -1;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: background-color 1.5s ease-out;
  }

  .p-home-whats-small-btob.is-animated {
    color: var(--color-white);
    background-color: #0f172a;
  }

  .p-home-whats-small-btob.is-animated::before {
    background-color: #0f172a;
  }

  /* 反転セクション内の要素 */
  .p-home-whats-small-btob p,
  .p-home-whats-small-btob li,
  .p-home-whats-small-btob h3,
  .p-home-whats-small-btob h4,
  .p-home-whats-small-btob h5,
  .p-home-whats-small-btob h6,
  .p-home-whats-small-btob ul,
  .p-home-whats-small-btob ol,
  .p-home-whats-small-btob div,
  .p-home-whats-small-btob span {
    transition: color 1.5s ease-out;
  }

  /* 反転時のテキスト色 */
  .p-home-whats-small-btob.is-animated p,
  .p-home-whats-small-btob.is-animated li,
  .p-home-whats-small-btob.is-animated h3,
  .p-home-whats-small-btob.is-animated h4,
  .p-home-whats-small-btob.is-animated h5,
  .p-home-whats-small-btob.is-animated h6,
  .p-home-whats-small-btob.is-animated div,
  .p-home-whats-small-btob.is-animated span {
    color: var(--color-white);
  }

  /* 反転時の見出しサブタイトルを黄色に */
  .p-home-whats-small-btob.is-animated .c-section-heading__sub {
    color: var(--color-accent-yellow);
  }

  /* 反転時の見出しメインを白に */
  .p-home-whats-small-btob.is-animated .c-section-heading__main {
    color: var(--color-white);
  }

  .p-home-whats-small-btob__bg-logo {
    position: absolute;
    max-width: 100vw;
    width: 100%;
    height: 29.8rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
  }

  .p-home-whats-small-btob__bg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .p-home-whats-small-btob__inner {
    margin-top: 2.3rem;
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .p-home-whats-small-btob__header {
    position: relative;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .p-home-whats-small-btob__header-inner {
    position: relative;
    width: 100%;
  }

  .p-home-whats-small-btob__desc {
    font-size: var(--font-base);
    line-height: 1.8;
    margin-bottom: 2rem;
    margin-top: 2rem;
    text-align: center;
  }

  .p-home-whats-small-btob__goal-image {
    pointer-events: none;
    margin-top: 0;
    display: block;
    max-width: 80.5rem;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 2rem;
  }

  .p-home-whats-small-btob__goal-image img {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
  }

  .p-home-service__header {
    text-align: center;
    margin-bottom: 4rem;
    color: var(--color-text-primary);
  }

  .p-home-service-list__heading-wrap {
    text-align: center;
    margin-bottom: 4rem;
  }

  /* 共通見出しコンポーネントを使用しているため、個別スタイルは不要 */

  .p-home-service-list__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin-bottom: 0;
    color: var(--color-text-primary); /* サービス紹介セクションの文字色を黒に */
  }

  .p-home-service-list__grid .c-card {
    gap: var(--space-4);
  }

  .p-home-service-list__grid .c-card__thumbnail-wrap {
    aspect-ratio: 42/19;
  }

  .p-home-service-list__grid .c-card__link {
    margin-top: var(--space-4);
  }

  /* SERVICEセクションの背景ロゴ */
  .p-home-service {
    position: relative;
    overflow: visible; /* 背景ロゴの全幅表示を許可 */
  }

  .p-home-service .o-container {
    position: relative;
    z-index: 1; /* コンテンツを前面に */
  }

  .p-home-service__bg-logo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw; /* 全幅表示 */
    max-width: 100vw;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.03;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .p-home-service__bg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .p-home-service__bg-logo rect,
  .p-home-service__bg-logo path {
    fill: var(--color-black);
  }

  /* アカデミーについてセクション */
  .p-home-whats-csc {
    position: relative;
    color: var(--color-black); /* セクション全体の色を黒に設定 */
    overflow: visible; /* このセクションのみはみ出しを許可 */
  }

  /* 2カラムグリッドレイアウト */
  .p-home-whats-csc__grid {
    display: grid;
    grid-template-columns: 3fr 2fr; /* 左60%、右40% */
    gap: var(--space-12);
    align-items: center;
    position: relative;
    z-index: 2;
    overflow: visible;
  }

  /* -----------------------------------------------
     左カラム：テキストコンテンツ
  ----------------------------------------------- */
  .p-home-whats-csc__content {
    /* カスタムプロパティで拡大・位置調整を管理 */
    --decoration-w: 150%; /* 画像の拡大率 */
    --decoration-shift: 20%; /* 右へ移動する比率 */
    position: relative;
    isolation: isolate; /* スタッキングコンテキストを独立 */
    padding: var(--space-20) 0;
    min-height: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    z-index: 0;
    width: 100%;
    max-width: none;
  }

  /* -----------------------------------------------
     装飾画像（右端基準で左方向に拡大配置）
  ----------------------------------------------- */
  .p-home-whats-csc__decoration {
    position: absolute;
    top: 50%; /* 縦中央 */
    right: 0; /* 右端基準 */
    width: var(--decoration-w);
    max-width: none; /* 拡大抑止解除 */
    height: auto;
    transform: translate(var(--decoration-shift), -50%);
    z-index: 0; /* 背面配置 */
    pointer-events: none; /* 背景扱い */
    display: block;
    opacity: 0.6; /* 適度に薄く表示 */
  }

  /* -----------------------------------------------
     テキストコンテンツ（前面配置）
  ----------------------------------------------- */
  .p-home-whats-csc__heading,
  .p-home-whats-csc__catch-copy,
  .p-home-whats-csc__desc {
    position: relative;
    z-index: 1;
  }

  /* -----------------------------------------------
     レスポンシブ調整
  ----------------------------------------------- */
  @media (max-width: 1024px) {
    .p-home-whats-csc__content {
      --decoration-w: 125%;
      --decoration-shift: -14%;
      min-height: 42rem;
    }
  }

  @media (max-width: 768px) {
    .p-home-whats-csc__content {
      --decoration-w: 100%;
      --decoration-shift: -8%;
      min-height: 35rem;
      padding: 0;
    }
  }

  @media (max-width: 640px) {
    .p-home-whats-csc__content {
      --decoration-w: 95%;
      --decoration-shift: -5%;
      min-height: 30rem;
      padding: 0;
    }
  }

  /* 右カラム：画像エリア */
  .p-home-whats-csc__visual {
    position: relative;
    z-index: 2;
    overflow: visible;
  }

  .p-home-whats-csc__heading {
    margin-bottom: 2rem;
  }

  .p-home-whats-csc__catch-copy {
    font-size: var(--font-2xl);
    margin-bottom: 1.2rem;
  }

  .p-home-whats-csc__desc {
    font-size: 1rem; /* 16px */
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 35rem;
  }

  .p-home-whats-csc__button {
    margin-top: var(--space-8);
  }

  .p-home-whats-csc__bg-img {
    text-align: center;
    position: relative;
    z-index: 2;
  }

  .p-home-whats-csc__bg-img img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* アバウトセクション */
  .p-home-about {
    position: relative;
    padding-bottom: 5px;
    overflow: visible;
    color: var(--color-black);
  }

  /* 2カラムグリッドレイアウト */
  .p-home-about__grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* ロゴ40%、テキスト60% */
    gap: var(--space-16);
    align-items: center;
    position: relative;
    z-index: 1;
  }

  .p-home-about__logo-wrap {
    max-width: 26rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-home-about__logo-wrap img {
    max-width: 100%;
    height: auto;
  }

  .p-home-about__desc-wrap {
    flex: 1;
    position: relative;
    z-index: 1;
  }

  .p-home-about__heading-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-grow: 1;
    margin-bottom: 3rem;
  }

  .p-home-about__catch-copy {
    font-size: var(--font-2xl);
    margin-bottom: 1rem;
    font-weight: 300;
  }

  .p-home-about__desc {
    font-size: 1rem; /* 16px */
    line-height: 1.8;
  }

  .p-home-about__bg-logo {
    position: absolute;
    width: 300%; /* 右を基点に拡大 */
    height: 29.8rem;
    bottom: 0;
    right: 0; /* 右を基点に配置 */
    transform: none; /* transformを削除 */
    opacity: 0.03;
    overflow: visible; /* 左にはみ出しを許可 */
    z-index: 0;
  }

  .p-home-about__bg-logo rect,
  .p-home-about__bg-logo path {
    fill: var(--color-black);
  }

  .official-website {
    margin-top: 1rem;
  }

  /* 角丸ボタン */
  .c-button-view-more--rounded {
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6);
  }
}

/* ========================================
   Responsive Design - Home Page
   ======================================== */

/* About Us Section */
@media (max-width: 768px) {
  .p-home-about {
    padding-bottom: 5px;
  }
  .p-home-about__grid {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 3rem;
  }
  .p-home-about__logo-wrap {
    width: 100%; /* 余白無しで大きく表示 */
    margin-inline: 0; /* 左右の余白を削除 */
    margin-block: 0; /* 上下の余白を削除 */
    padding: var(--space-4); /* 少しだけパディングを設定 */
  }
  .p-home-about__heading-wrap {
    margin-bottom: 2.1rem;
    display: flex;
    justify-content: center;
  }
  .p-home-about__catch-copy {
    font-size: 1.8rem;
    margin-bottom: var(--space-4);
  }
  .p-home-about__bg-logo {
    width: 200%; /* 右を基点に拡大 */
    height: 8.6rem;
    overflow: visible; /* 左にはみ出しを許可 */
    bottom: 0;
    right: 0; /* 右を基点に配置 */
    transform: none; /* transformを削除 */
    z-index: 0;
  }
}

@media (min-width: 769px) {
  .p-home-about__bg-logo {
    width: 300%; /* 右を基点に拡大 */
    height: auto;
    overflow: visible; /* 左にはみ出しを許可 */
    bottom: 0;
    right: 0; /* 右を基点に配置 */
    transform: none; /* transformを削除 */
    z-index: 0;
  }
}

/* Button Responsive */
@media (max-width: 768px) {
  .c-button-view-more {
    width: 240px;
    height: 5rem;
    padding: 16px 24px;
  }
}

/* Mobile First Responsive */
@media (max-width: 768px) {
  .sp-br {
    display: block;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }

  .p-home-mv {
    font-size: 2vw;
  }

  .main-visual__text-box h1 {
    font-size: var(--font-4xl);
  }

  .main-visual__text-box p {
    font-size: var(--font-lg);
  }

  .main-visual__text-box p.sub-title {
    font-size: var(--font-xl);
  }

  .p-home-news__list {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-left: 0;
  }

  /* モバイル版ニュースアイテムの2行レイアウト */
  .p-home-news__list .c-card {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .p-home-news__list .c-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
    width: 7rem; /* 左側の幅を少し狭く */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストも中央揃え */
  }

  .p-home-news__list .c-card__time {
    font-size: var(--font-xs);
    line-height: var(--line-tight);
    text-align: center;
  }

  .p-home-news__list .c-card__category {
    font-size: var(--font-xs);
    padding: 0.2rem 0.6rem;
    width: fit-content;
    text-align: center;
  }

  .p-home-news__list .c-card__post-title {
    flex: 1;
    font-size: var(--font-sm); /* フォントサイズを小さく */
    line-height: var(--line-snug);
    min-width: 0;
    /* 省略表示を解除して全文表示 */
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
  }

  .p-home-about {
    padding-bottom: 5px;
  }

  .p-home-about__inner {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-12);
  }

  .p-home-about__logo-wrap {
    width: 100%; /* 余白無しで大きく表示 */
    margin-inline: 0; /* 左右の余白を削除 */
    margin-block: 0; /* 上下の余白を削除 */
    padding: var(--space-6);
  }

  .p-home-about__heading-wrap {
    margin-bottom: var(--space-8);
  }

  .p-home-about__catch-copy {
    font-size: var(--font-xl);
    margin-bottom: var(--space-4);
  }

  .p-home-about__bg-logo {
    width: 200%; /* 右を基点に拡大 */
    height: 8.6rem;
    overflow: visible; /* 左にはみ出しを許可 */
    bottom: 0;
    right: 0; /* 右を基点に配置 */
    transform: none; /* transformを削除 */
    z-index: 0;
  }
}

/* PC Display Detailed Responsive */
@media (min-width: 769px) {
  .img-frame {
    height: 35em;
  }
  .main-visual__image {
    height: 35em;
    object-fit: cover;
    object-position: top right;
  }
  .main-visual__text-box {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
  }

  .p-home-about__bg-logo {
    width: 300%; /* 右を基点に拡大 */
    height: auto;
    overflow: visible; /* 左にはみ出しを許可 */
    right: 0; /* 右を基点に配置 */
    transform: none; /* transformを削除 */
  }
}

/* SP Display Detailed Responsive */
@media (max-width: 768px) {
  .p-home-mv {
    margin-top: 48px; /* スマホ版ヘッダーの高さ分のマージントップを追加 */
  }

  .img-frame {
    height: 100%; /* スマホ版の画像高さを100%に変更 */
  }

  /* スマホ用画像の表示制御 */
  .main-visual__image.pc {
    display: none;
  }
  .main-visual__image.sp {
    display: block;
  }

  .main-visual__text-box {
    position: absolute;
    top: 50%;
    left: 28%;
    transform: translate(-50%, -50%);
  }
  .main-visual__text-box h1 {
    line-height: 1.2em;
    padding: 0.2em 0;
    font-size: var(--font-4xl); /* h1のフォントサイズを小さく */
  }
  .main-visual__text-box p {
    font-size: var(--font-base);
  }
  .main-visual__text-box p.sub-title {
    font-size: var(--font-lg); /* サブタイトルのフォントサイズを小さく */
  }
}

/* 小型スマホ版のメインビジュアルマージン調整 */
@media (max-width: 480px) {
  .p-home-mv {
    margin-top: 44px; /* 小型スマホ版ヘッダーの高さ分のマージントップを追加 */
  }
}

/* デスクトップ用画像の表示制御 */
@media (min-width: 769px) {
  .main-visual__image.pc {
    display: block;
  }
  .main-visual__image.sp {
    display: none;
  }
}

/* Academy About Section Responsive */
@media (max-width: 768px) {
  .p-home-whats-csc__grid {
    display: flex;
    flex-direction: column; /* column-reverse → column に変更 */
    gap: var(--space-3); /* 4.5rem → var(--space-3) (12px) に変更 */
    min-height: auto;
  }
  .p-home-whats-csc__content {
    padding: 2.6rem 0;
  }
  .p-home-whats-csc__heading {
    margin-bottom: var(--space-8);
  }
  .p-home-whats-csc__catch-copy {
    font-size: var(--font-lg); /* モバイル版は少し小さく */
    margin-bottom: var(--space-4);
  }
  .p-home-whats-csc__desc {
    margin-bottom: var(--space-8);
  }
  .p-home-whats-csc.l-section--wide {
    margin-top: 0;
  }
  .p-home-whats-csc__bg-img {
    text-align: center;
  }
  .p-home-whats-csc__bg-img img {
    width: 80%;
  }

  /* スマホ表示でのボタンを中央揃え */
  .p-home-whats-csc__button {
    display: flex;
    justify-content: center;
  }

  .official-website {
    display: flex;
    justify-content: center;
  }
}

@media (min-width: 769px) {
  .p-home-whats-csc__bg-img img {
    max-width: 40rem;
    width: 100%;
  }
  .p-home-whats-csc__desc {
    max-width: 50rem;
  }
}

/* Small BtoB Section Responsive */
@media (max-width: 768px) {
  .p-home-whats-small-btob__bg-logo {
    width: 100%;
    height: 8.6rem;
    max-width: 100vw;
    overflow: visible;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
  }

  .p-home-whats-small-btob__bg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .p-home-whats-small-btob__bg-text {
    display: none;
  }
  .p-home-whats-small-btob__header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .p-home-whats-small-btob__header-inner {
    position: relative;
    width: 100%;
    text-align: center;
  }

  .p-home-whats-small-btob__desc {
    text-align: center;
    font-size: var(--font-base);
  }

  .p-home-whats-small-btob__goal-image {
    width: 100%;
    margin-top: -2rem;
    margin-bottom: 3.5rem;
  }
}

@media (min-width: 769px) {
  .p-home-whats-small-btob {
    padding-bottom: 3rem;
  }
}

/* Service Introduction Section Responsive */
@media (max-width: 768px) {
  .p-home-service-list__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* 受講生インタビューセクション（関連事例セクションのスタイルを使用） */
.related-cases {
  margin-bottom: 2.5rem;
}

.related-cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.related-case-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.related-case-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.related-case-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
}

.related-case-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.related-case-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.related-case-content {
  padding: 1rem 1rem 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  flex: 1;
}

.related-case-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
}

.related-case-title a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-base) var(--easing-standard);
}

.related-case-company {
  font-size: 0.675rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  margin: 0 0 0.75rem 0;
}

.related-case-company strong {
  font-weight: 600;
}

.related-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: auto;
}

/* タグスタイル */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration-fast) var(--easing-standard);
  cursor: pointer;
}

.tag--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-accent-green);
}

.tag--primary:hover {
  border-color: var(--color-primary);
  transform: translateY(0);
}

.tag--secondary {
  background: var(--color-white);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.tag--secondary:hover {
  background: var(--color-accent-green);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* 関連事例のタグを小さく */
.related-case-tags .tag {
  height: 1.5rem;
  padding: 0 0.5rem;
  font-size: 0.625rem;
  border-radius: 1rem;
}

.p-home-voices__slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.p-home-voices__arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-base) var(--easing-standard);
  z-index: 10;
}

.p-home-voices__arrow:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.p-home-voices__arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.p-home-voices__arrow svg {
  width: 24px;
  height: 24px;
}

.p-home-voices__slider-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  touch-action: pan-y pinch-zoom;
}

.p-home-voices__slider-track {
  display: flex;
  transition: transform var(--duration-slow) var(--easing-standard);
  gap: var(--space-6);
  cursor: grab;
  user-select: none;
  will-change: transform;
}

.p-home-voices__slider-track:active {
  cursor: grabbing;
  transition: none;
}

/* スライダー用のグリッドレイアウト調整 */
.p-home-voices__slider-track.related-cases-grid {
  display: flex;
  grid-template-columns: none;
  gap: var(--space-6);
}

.p-home-voices__slider-track .related-case-card {
  flex: 0 0 calc(50% - var(--space-3));
  min-width: calc(50% - var(--space-3));
  max-width: calc(50% - var(--space-3));
  opacity: 1;
  transform: translateY(0);
  margin: 0;
}

/* PC表示で2列 */
@media (min-width: 769px) {
  .p-home-voices__slider-track .related-case-card {
    flex: 0 0 calc(50% - var(--space-3));
    min-width: calc(50% - var(--space-3));
    max-width: calc(50% - var(--space-3));
  }
}

/* スマホでタグをタイトル下に表示 */
@media (max-width: 768px) {
  .related-case-tags {
    margin-top: var(--space-3);
    justify-content: flex-start;
    width: 100%;
    flex-basis: 100%;
  }
}

/* レスポンシブ: PCで2列表示 */
@media (min-width: 768px) {
  .related-cases-grid:not(.p-home-voices__slider-track) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 受講生インタビュー一覧ボタン */
.related-cases-cta {
  text-align: center;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.related-cases-cta .c-button-view-more {
  /* TOPページの他のボタンと同じスタイル */
  background-color: var(--color-white);
  color: var(--color-primary);
  border: solid var(--border-width) var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 16px 32px;
  width: 320px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--easing-standard),
    color var(--duration-base) var(--easing-standard);
  margin: 0 auto;
}

.related-cases-cta .c-button-view-more:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.related-cases-cta .c-button-view-more:hover path {
  stroke: var(--color-white);
}

.related-cases-cta .c-button-view-more__arrow {
  width: var(--icon-small);
  display: flex;
  align-items: center;
}

.related-cases-cta .c-button-view-more__arrow path {
  transition: stroke var(--duration-base) var(--easing-standard);
}

/* 受講生インタビューセクション レスポンシブ */
@media (max-width: 768px) {
  .p-home-voices__slider-wrapper {
    gap: var(--space-2);
  }

  .p-home-voices__arrow {
    width: 40px;
    height: 40px;
  }

  .p-home-voices__arrow svg {
    width: 20px;
    height: 20px;
  }

  .p-home-voices__slider-track {
    gap: var(--space-4);
  }

  .p-home-voices__slider-track .related-case-card {
    flex: 0 0 calc(100% - var(--space-2));
    min-width: calc(100% - var(--space-2));
    max-width: calc(100% - var(--space-2));
  }

  .related-cases-cta .c-button-view-more {
    width: 320px;
    height: 5rem;
    padding: 16px 24px;
  }
}