/* =========================================================================
   Fuku-Biz Renewal Site / case-detail.css
   ---------------------------------------------------------------------
   下層ページ「サポート事例 詳細」専用スタイル。

   セクション目次:
     01. p-case-hero      ─ ページヒーロー（事例タイトル・メタ）
     02. p-case-summary   ─ 事例サマリー（業種/地域/テーマ）
     03. p-case-before    ─ 相談前の状況
     04. p-case-approach  ─ 相談から取り組み
     05. p-case-result    ─ 結果と次の一手
     06. p-case-related   ─ 関連事例
   ========================================================================= */


/* =========================================================================
   01. Page Hero Article Header
   ========================================================================= */
.p-case-article {
  padding: 48px 0 24px;
}

.p-case-article__label {
  display: inline-block;
  background: var(--rose-400);
  color: #fff;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  margin-bottom: 16px;
}

.p-case-article h1 {
  font-weight: 900;
  font-size: 36px;
  line-height: 1.5;
  text-align: justify;
  margin: 0 0 18px;
}

/* Tags（記事上部・リンク付きチップ） */
.p-case-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.p-case-article__tag {
  display: inline-flex;
  align-items: center;
  background: var(--rose-50);
  color: var(--rose-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--rose-200);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.p-case-article__tag::before {
  content: "#";
  margin-right: 3px;
  opacity: 0.6;
}

.p-case-article__tag:hover {
  background: var(--rose-400);
  color: #fff;
  border-color: var(--rose-400);
  text-decoration: none;
}

.p-case-article__meta {
  font-family: var(--font-num);
  font-size: 13px;
  color: var(--ink-60);
  letter-spacing: 0.05em;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-10);
}

.p-case-article__photo {
  aspect-ratio: 16/9;
  margin: 24px 0 32px;
  border-radius: 6px;
  overflow: hidden;
  background: none; /* ★アイキャッチを敷くため背景プレースホルダーは無し */
  position: relative;
}

.p-case-article__photo::after {
  content: none; /* ★アイキャッチ表示時はシーン装飾を消す */
}

/* ★アイキャッチ実画像：16/9枠いっぱいに表示（小さい画像の左寄りを防止） */
.p-case-article__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-case-article__photo-label {
  position: absolute;
  bottom: 16px;
  left: 18px;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}


/* =========================================================================
   Body Sections (共通セクション)
   ========================================================================= */
.p-case-section {
  margin-bottom: 56px;
}

.p-case-section h2 {
  font-weight: 900;
  font-size: 22px;
  text-align: justify;
  margin: 0 0 32px;
  padding: 12px 18px;
  background: var(--rose-50);
  border-left: 6px solid var(--rose-400);
  border-radius: 0 6px 6px 0;
}

.p-case-section h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: justify;
  color: var(--rose-600);
  margin: 24px 0 12px;
}

.p-case-section p {
  font-size: 16px;
  line-height: 2;
  text-align: justify;
  margin: 0 0 14px;
}

.p-case-section p b {
  font-weight: 700;
}


/* =========================================================================
   Figure (本文中の画像・動画)
   ---------------------------------------------------------------------
   image / image02 / image03 を figure.p-case-article__figure で出力。
   複数枚並んだときだけ間に余白を入れる（1枚のときは余白なし）。
   ========================================================================= */
.p-case-article__figure {
  margin: 0; /* figureのブラウザ既定マージンをリセット */
}

.p-case-article__figure img,
.p-case-article__figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* 直後に figure が続くときだけ上に余白（＝2枚目以降のみ） */
.p-case-article__figure + .p-case-article__figure {
  margin-top: 32px;
}


/* =========================================================================
   Info Card (会社プロフィール)
   ========================================================================= */
.p-case-info {
  background: var(--cream-100);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 24px 0;
}

.p-case-info b {
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
  color: var(--ink-100);
}

.p-case-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 16px;
  font-size: 14px;
}

.p-case-info dt {
  color: var(--ink-60);
  font-weight: 700;
}

.p-case-info dd {
  margin: 0;
}


/* =========================================================================
   Quote (引用・インタビュー)
   ========================================================================= */
.p-case-quote {
  background: var(--rose-50);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 28px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: center;
}

.p-case-quote__ava {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B5BBB5, #50585A);
}

.p-case-quote__text q {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-100);
  quotes: none;
}

.p-case-quote__text q::before,
.p-case-quote__text q::after {
  content: "";
}

.p-case-quote__text cite {
  font-size: 12px;
  color: var(--ink-60);
  font-style: normal;
  display: block;
  margin-top: 8px;
  font-family: var(--font-num);
}


/* =========================================================================
   Prev/Next Navigation
   ========================================================================= */
.p-case-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 40px 0;
  border-top: 1px solid var(--ink-10);
}

.p-case-pn a {
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--ink-20);
  border-radius: 10px;
  transition: all var(--dur-base) var(--ease-out);
}

.p-case-pn a:hover {
  background: var(--rose-50);
  border-color: var(--rose-300);
}

.p-case-pn small {
  display: block;
  font-family: var(--font-num);
  font-size: 11px;
  color: var(--ink-60);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.p-case-pn b {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.5;
}


/* =========================================================================
   01. p-case-summary
   ========================================================================= */
.p-case-summary {
  padding: 48px 0;
  background: var(--cream-50);
}


/* =========================================================================
   02. p-case-before
   ========================================================================= */
.p-case-before {
  padding: 64px 0;
}


/* =========================================================================
   03. p-case-approach
   ========================================================================= */
.p-case-approach {
  padding: 64px 0;
  background: var(--cream-50);
}


/* =========================================================================
   04. p-case-result
   ========================================================================= */
.p-case-result {
  padding: 64px 0;
}


/* =========================================================================
   05. p-case-related
   ========================================================================= */
.p-case-related {
  padding: 64px 0;
  border-top: 1px solid var(--ink-10);
}


/* =========================================================================
   RESPONSIVE DESIGN / レスポンシブ対応（Tablet & SP）
   ========================================================================= */

/* =========================================================================
   Tablet: 640px ～ 1024px
   ========================================================================= */
@media (max-width: 1024px) {
  /* Hero section */
  .p-case-article h1 {
    font-size: 28px;
    line-height: 1.5;
  }

  .p-case-article__photo {
    aspect-ratio: 16/9;
    margin: 20px 0 24px;
  }

  /* Section headings */
  .p-case-section h2 {
    font-size: 20px;
    padding: 10px 16px;
  }

  .p-case-section h3 {
    font-size: 15px;
  }

  .p-case-section p {
    font-size: 16px;
    line-height: 1.9;
  }

  /* Info card */
  .p-case-info dl {
    grid-template-columns: 80px 1fr;
    gap: 4px 12px;
    font-size: 13px;
  }

  /* Quote section */
  .p-case-quote {
    grid-template-columns: 70px 1fr;
    gap: 16px;
    padding: 24px 28px;
  }

  .p-case-quote__ava {
    width: 70px;
    height: 70px;
  }

  .p-case-quote__text q {
    font-size: 15px;
    line-height: 1.75;
  }

  /* Prev/Next navigation */
  .p-case-pn {
    gap: 12px;
    padding: 32px 0;
  }

  .p-case-pn a {
    padding: 16px;
  }

  .p-case-pn b {
    font-size: 12px;
  }
}

/* =========================================================================
   Smartphone: ～ 640px
   ========================================================================= */
@media (max-width: 640px) {
  /* Hero section */
  .p-case-article {
    padding: 36px 0 18px;
  }

  .p-case-article__label {
    padding: 4px 14px;
    font-size: 12px;
    margin-bottom: 12px;
  }

  .p-case-article h1 {
    font-size: 18px;
    line-height: 1.45;
    margin-bottom: 14px;
  }

  .p-case-article__tags {
    gap: 6px;
    margin-bottom: 14px;
  }

  .p-case-article__tag {
    font-size: 12px;
    padding: 7px 13px;
  }

  .p-case-article__meta {
    font-size: 12px;
    padding-bottom: 14px;
  }

  .p-case-article__photo {
    aspect-ratio: 16/9;
    margin: 16px 0 20px;
    border-radius: 4px;
  }

  .p-case-article__photo-label {
    bottom: 12px;
    left: 14px;
    padding: 4px 10px;
    font-size: 11px;
  }

  /* Body sections */
  .p-case-section {
    margin-bottom: 32px;
  }

  .p-case-section h2 {
    font-size: 18px;
    padding: 12px 14px;
    margin: 0 0 28px;
  }

  .p-case-section h3 {
    font-size: 15px;
    margin: 24px 0 12px;
  }

  .p-case-section p {
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 12px;
  }

  /* Figure（複数枚並び時の間隔） */
  .p-case-article__figure + .p-case-article__figure {
    margin-top: 20px;
  }

  /* Info card */
  .p-case-info {
    padding: 18px 20px;
    margin: 20px 0;
    border-radius: 8px;
  }

  .p-case-info b {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .p-case-info dl {
    grid-template-columns: 60px 1fr;
    gap: 4px 10px;
    font-size: 12px;
  }

  .p-case-info dt {
    font-size: 11px;
  }

  /* Quote section */
  .p-case-quote {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 18px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
  }

  .p-case-quote__ava {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }

  .p-case-quote__text q {
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
  }

  .p-case-quote__text cite {
    font-size: 11px;
  }

  /* Prev/Next navigation */
  .p-case-pn {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }

  .p-case-pn a {
    padding: 14px;
  }

  .p-case-pn small {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .p-case-pn b {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Summary section padding */
  .p-case-summary {
    padding: 32px 0;
  }

  /* Before/Approach/Result sections */
  .p-case-before,
  .p-case-approach,
  .p-case-result {
    padding: 40px 0;
  }

  /* Related section */
  .p-case-related {
    padding: 40px 0;
  }
}