@charset "UTF-8";
/* ==========================================================================
   works.css — 支援実績一覧（06 works.html / p-works-list）・詳細（07 works_detail.html / p-works-detail）共用
   参照カンプ：comps/pc/06_works-lixt_pc_01〜03（一覧）／07_works-1〜7（詳細）。PCのみ・SP無し。
   共通トークン＝base.css／共通c-・l-＝common.css。ヒーロー大見出し＝common .c-heading--page／末尾CONTACT＝common .c-contact。
   ※WP：CPT `works`（ACF Pro）。一覧カード＝case_no/client_name/catch_copy/アイキャッチ。詳細＝Before/Action/After。wp_design.md 参照。
   ========================================================================== */

/* ページスコープ変数（他ページ確定で base.css へ昇格）
   CASE識別色＝TOP/features 踏襲（青は base の --c-blue）。case_no を3で巡回 */
.p-works-list,
.p-works-detail {
  --wk-green: #8AC54B;   /* CASE 02,05… */
  --wk-teal:  #1DA3A2;   /* CASE 03,06… */
  --wk-accent: var(--c-blue); /* case_no巡回のアクセント（バッジ／お客様の声見出し）。既定＝CASE01,04…＝青 */
}

/* case_no を3巡回：詳細は1件＝ルート修飾で色を切替（WP：class="p-works-detail p-works-detail--c{(case_no-1)%3+1}"）
   ・c1＝青(既定)／c2＝緑／c3＝青緑。●見出し・キャッチは常に青(--c-blue)、巡回するのはバッジと【お客様の声】見出しのみ。 */
.p-works-detail--c2 { --wk-accent: var(--wk-green); }
.p-works-detail--c3 { --wk-accent: var(--wk-teal); }

/* --------------------------------------------------------------------------
   ページヒーロー（大見出し＋パンくず＋写真2枚）
   -------------------------------------------------------------------------- */
.p-works-hero { padding-block: var(--sp-6) var(--sp-12); }

/* 一覧のみ：冒頭の余白をサービスページと同値に（33 §6-3・FN 8/27 PDF）。
   service＝hero下0＋次セクション上sp-12＝ギャップ96px（従来の一覧は96+96=192px）。
   .p-works-hero は詳細ページと共用のため .p-works-list スコープで上書き（詳細は従来のまま） */
.p-works-list .p-works-hero { padding-block: var(--sp-6) 0; }

/* 大見出しマストヘッド（英字 PROVEN RESULTS の固定・背面フェード）は共通コンポーネント .c-masthead へ集約（common.css）。
   ここでは一覧固有のレイアウトのみ定義する。

   英字下の「支援実績」＝ページ見出し(h1)。固定せず通常フローでスクロールに従い上部へ流れる。
   見た目は従来の .c-heading--page .c-heading__ja（16px Bold・赤バーなし）を踏襲 */
.p-works-hero__title {
  margin-top: var(--sp-3); /* 固定英字の下罫線からの空き */
  font-size: var(--fs-base); /* 16px */
  font-weight: 700;
  line-height: 1.4;
}
.p-works-list .p-works-hero__lower { margin-top: var(--sp-3); }

/* 大見出し直下の行：左＝パンくず／右＝写真2枚（カンプ準拠） */
.p-works-hero__lower {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-3);
}

.p-works-hero .c-breadcrumb { padding-block: var(--sp-2) 0; }

.p-works-hero__photos {
  display: flex;
  flex-shrink: 0;
  gap: var(--sp-4);
}

.p-works-hero__photo {
  display: block;
  width: min(28vw, 345px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   CASE（導入事例一覧）
   -------------------------------------------------------------------------- */
.p-works-case { padding-block: var(--sp-12) var(--sp-16); }

.p-works-case__lead {
  margin-top: calc(var(--sp-2) * -1);
  margin-bottom: var(--sp-8);
  font-size: var(--fs-base); /* 16px */
  font-weight: 500; /* Medium */
}

.p-works-case__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* カード：奇数＝淡背景／偶数＝白（カンプ準拠の交互）。角はシャープ */
.p-works-case__item { padding: 50px; }
.p-works-case__item:nth-child(odd) { background: var(--c-bg-tint); }

/* 内側：写真（左）＋本文（右）。本文はflex縦で「詳しく見る」を右下へ */
.p-works-case__inner {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: stretch;
}

/* 写真（WP＝アイキャッチ。HTMLはグレープレースホルダ）。390×260・角丸20px */
.p-works-case__photo {
  align-self: start; /* stretchで縦に伸びないよう固定（260を維持） */
  width: 100%;
  aspect-ratio: 3 / 2; /* 390幅→高260 */
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-gray-light); /* 画像読込前のプレースホルダ */
}
.p-works-case__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.p-works-case__body {
  display: flex;
  flex-direction: column;
}

/* CASE番号バッジ（case_no を3巡回で青/緑/青緑）。幅155px・Gill Sans SemiBold 20px */
.p-works-case__num {
  align-self: flex-start;
  width: 155px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--font-en); /* Gill Sans（代替Cabin）SemiBold */
  font-size: 1.25rem; /* 20px */
  font-weight: 600; /* SemiBold */
  line-height: 1; /* 行間の余白を無くし天地paddingを10pxちょうどに見せる */
  letter-spacing: 0;
  text-align: center;
}

/* 色の巡回は case_no 基準（(case_no - 1) % 3 ＝詳細ページ p-works-detail--cN と同式）。
   静的HTMLは nth-child 巡回だったが、一覧が case_no 降順になり「位置＝番号」が崩れたため
   テンプレート出力のモディファイアで色を固定（09d。並び替えでもCASEごとの色が変わらない） */
.p-works-case__item--c2 .p-works-case__num { background: var(--wk-green); }
.p-works-case__item--c3 .p-works-case__num { background: var(--wk-teal); }

.p-works-case__company {
  margin-top: 30px; /* バッジとの空き */
  font-size: var(--fs-lg); /* 18px */
  font-weight: 500; /* Medium */
}

.p-works-case__title {
  margin-top: 30px; /* 会社名との空き */
  font-size: 1.25rem; /* 20px */
  font-weight: 700; /* Bold */
  line-height: 1.6;
  color: var(--c-blue); /* キャッチコピー＝ブルー（詳細ページと統一） */
}

/* 「詳しく見る」：本文の右下へ */
.p-works-case__more {
  margin-top: auto;
  padding-top: var(--sp-5);
  text-align: right;
}

/* ==========================================================================
   支援実績 詳細（07 works_detail.html / p-works-detail）
   参照カンプ：comps/pc/07_works-1〜7。ヒーローは一覧と共通（.p-works-hero）。
   WP：single-works.php。バッジ＝case_no巡回（--wk-accent）／●見出し・キャッチ＝常に青。
   ========================================================================== */

/* 記事カード（淡背景の大ブロック・content幅） */
.p-works-detail__article {
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 80px);
  background: var(--c-bg-tint);
  border-radius: 20px;
}

/* CASE番号バッジ（一覧 .p-works-case__num と同仕様。色は --wk-accent 巡回） */
.p-works-detail__num {
  width: 155px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--wk-accent);
  color: var(--c-white);
  font-family: var(--font-en); /* Gill Sans（代替Cabin）SemiBold */
  font-size: 1.25rem; /* 20px */
  font-weight: 600; /* SemiBold */
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

/* キャッチコピー＝ページの h1（青・Bold・大きめ。常に --c-blue） */
.p-works-detail__catch {
  margin-top: var(--sp-4);
  font-size: clamp(1.5rem, 1rem + 1.2vw, 1.875rem); /* 24→30px */
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-blue);
}

/* メイン写真（＝アイキャッチ／featured image）。中央寄せ・角丸。HTMLはグレープレースホルダ */
.p-works-detail__eyecatch {
  width: min(100%, 620px);
  margin: var(--sp-6) auto 0;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-gray-light);
}
.p-works-detail__eyecatch img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* クライアント名（「〇〇 様」） */
.p-works-detail__client {
  margin-top: var(--sp-5);
  font-size: var(--fs-lg); /* 18px */
  font-weight: 500; /* Medium */
}

/* Before / Action / After ブロック（WP：各WYSIWYGフィールドの出力） */
.p-works-detail__block { margin-top: var(--sp-8); }

/* ●見出し（青・Bold＋下罫線）。●はコンテンツ側で付与（WYSIWYG先頭見出し） */
.p-works-detail__lead {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-line);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-blue);
}

/* 本文（WYSIWYG想定：段落＋箇条書き）。読みやすい行間 */
.p-works-detail__body { margin-top: 22px; } /* ●見出しの下罫線と本文の間（指定：22px） */
.p-works-detail__body > * + * { margin-top: 1em; }
.p-works-detail__body p { line-height: 2; }

/* 箇条書き：カンプは「・」プレフィックス。list-style無し＋擬似要素で「・」。
   UA既定の padding-left(40px) を打ち消し、「・」を段落本文の左端に揃える */
.p-works-detail__body ul { list-style: none; padding-left: 0; line-height: 2; }
.p-works-detail__body li { padding-left: 1.2em; text-indent: -1.2em; }
.p-works-detail__body li::before { content: "・"; }

/* お客様の声（任意：有るCASEのみ出力）。丸写真＋証言テキスト・淡背景の大ボックス */
.p-works-detail__voice {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-top: var(--sp-8);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 5vw, 72px);
  background: var(--c-bg-tint);
  border-radius: 20px;
}

/* 丸写真（HTMLはグレープレースホルダ） */
.p-works-detail__voice-photo {
  flex-shrink: 0;
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-gray-light);
}
.p-works-detail__voice-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 【お客様の声】見出し＝case_no巡回色（バッジと同色） */
.p-works-detail__voice-title {
  font-size: var(--fs-lg); /* 18px */
  font-weight: 700;
  color: var(--wk-accent);
}
.p-works-detail__voice-text {
  margin-top: var(--sp-3);
  line-height: 2;
}

/* --------------------------------------------------------------------------
   ページ送り（詳細下部。case_pagenation_01/02 カンプ準拠）
   ・中央「実績一覧に戻る」＝ c-btn--arrow の塗りホバーを流用（矢印なし）
   ・前後リンク＝テキスト＋長線矢印（c-btn--arrow と同形状SVGマスク・前は左右反転）。
     ホバーで矢印が外側へ +14px（共通仕様踏襲）
   -------------------------------------------------------------------------- */
.p-works-detail__pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 120px; /* 指定：お客様の声パネル（淡背景）との間隔120px */
  padding-inline: 36px; /* 例外：本文左右端からの引き（カンプ実測） */
}

.p-works-detail__pager-back {
  grid-column: 2;
  min-width: 380px;  /* 指定：w380px */
  min-height: 80px;  /* 指定：h80px */
  color: var(--c-text); /* 指定：#282728（枠線は currentColor で連動）。ホバー＝青塗り＋白文字は共通仕様のまま */
}

/* 戻るボタンは矢印を持たない（塗りスライドホバーのみ利用） */
.p-works-detail__pager-back::after { content: none; }

.p-works-detail__pager-prev,
.p-works-detail__pager-next {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sp-3);
  font-size: var(--fs-base); /* 指定：16px */
  font-weight: 500;
  color: var(--c-text); /* 指定：#282728 */
}

.p-works-detail__pager-prev { grid-column: 1; justify-self: start; }
.p-works-detail__pager-next { grid-column: 3; justify-self: end; }

/* 矢印（c-btn--arrow と同じ支給SVG形状のマスク。線はテキスト下端に揃う） */
.p-works-detail__pager-arw {
  width: 51px;
  height: 14px;
  flex-shrink: 0;
  margin-bottom: .15em;
  background-color: var(--c-text);
  --icon-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='51.21'%20height='13.66'%20viewBox='0%200%2051.21%2013.66'%3E%3Cpolyline%20points='37.19%20.35%2050%2013.16%200%2013.16'%20fill='none'%20stroke='%23fff'%20stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask: var(--icon-arrow) no-repeat center / contain;
          mask: var(--icon-arrow) no-repeat center / contain;
  transition: transform var(--dur) var(--ease);
}

.p-works-detail__pager-prev .p-works-detail__pager-arw { transform: scaleX(-1); }

/* ホバー/フォーカス：矢印が進行方向（外側）へ +14px */
.p-works-detail__pager-next:hover .p-works-detail__pager-arw,
.p-works-detail__pager-next:focus-visible .p-works-detail__pager-arw { transform: translateX(14px); }

.p-works-detail__pager-prev:hover .p-works-detail__pager-arw,
.p-works-detail__pager-prev:focus-visible .p-works-detail__pager-arw { transform: scaleX(-1) translateX(14px); }

@media (prefers-reduced-motion: reduce) {
  .p-works-detail__pager-arw { transition: none; }
}

/* ==========================================================================
   SP（〜767px）：カンプ支給無し。TOP/features の縮退ルールで展開
   ・ヒーロー写真は縦積み／カードは1カラム（写真上・本文下）
   ========================================================================== */
@media (max-width: 767px) {

  .p-works-hero { padding-block: var(--sp-4) var(--sp-8); }
  .p-works-list .p-works-hero { padding-block: var(--sp-4) 0; } /* 一覧のみ：SPもサービスと同値（33 §6-3） */
  .p-works-hero__lower { flex-direction: column; gap: var(--sp-5); }
  .p-works-hero__photos { width: 100%; }
  .p-works-hero__photo { flex: 1 1 0; min-width: 0; width: auto; aspect-ratio: 4 / 3; }

  .p-works-case { padding-block: var(--sp-8) var(--sp-10); } /* 上＝sp-8でヒーローとのギャップをサービスSP（64px）に一致（33 §6-3。下は従来のまま） */

  /* 詳細：SPのフォント指定（33 §6-1・§6-2・FN 8/27 PDF） */
  .p-works-detail__catch { font-size: 1.25rem; }   /* 一覧キャッチ（.p-works-case__title＝20px）と同サイズに（従来はclamp下限24px） */
  .p-works-detail__lead  { font-size: var(--fs-lg); } /* ●ブロック見出し 20px→18px */

  .p-works-case__list { gap: var(--sp-6); }
  .p-works-case__item { padding: var(--sp-4); }

  .p-works-case__inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  .p-works-case__photo { aspect-ratio: 3 / 2; }

  /* 「詳しく見る」はSP中央寄せ（矢印はみ出しによる横スクロール回避／TOP踏襲） */
  .p-works-case__more { text-align: center; }

  /* --- 詳細（07）--- */
  .p-works-detail__article { padding: var(--sp-5) var(--sp-4); }
  .p-works-detail__eyecatch { width: 100%; margin-top: var(--sp-5); }
  .p-works-detail__block { margin-top: var(--sp-6); }

  /* お客様の声：縦積み（丸写真＝上・中央、テキスト＝下） */
  .p-works-detail__voice {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
  .p-works-detail__voice-photo { width: 140px; align-self: center; }

  /* ページ送り：上段＝前後リンク（左右振り分け）／下段＝一覧ボタン中央 */
  .p-works-detail__pager {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-5);
    padding-inline: 0;
  }
  .p-works-detail__pager-prev { grid-row: 1; grid-column: 1; justify-self: start; }
  .p-works-detail__pager-next { grid-row: 1; grid-column: 2; justify-self: end; }

  /* SPは1行に収める：矢印を短縮し、テキストの折返しを禁止 */
  .p-works-detail__pager-prev,
  .p-works-detail__pager-next { gap: var(--sp-1); white-space: nowrap; }
  .p-works-detail__pager-arw { width: 36px; }
  .p-works-detail__pager-back {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    min-width: min(380px, 100%);
  }
}