@charset "UTF-8";
/* =========================================================
   実績詳細（single-work.php）固有スタイル
   - 共通（ヒーロー / パンくず / 2カラム / サイドバー枠 / アイキャッチ /
     青バー見出し / 関連枠 / 縦リンクリスト）は work-common.css に集約。
     こちらは common を依存に持ち、後から読み込む（functions.php）。
   - single-work 固有：記事ヘッダー（会社名H1）と、本文の WYSIWYG タイポグラフィ。
   ========================================================= */

/* ========================================
   記事ヘッダー（H1=会社名 / 説明文 / タグ）
   ======================================== */
.work-single__header {
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .work-single__header {
    margin-bottom: 2rem;
  }
}

.work-single__company {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .work-single__company {
    font-size: 1.875rem;
  }
}

.work-single__desc {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .work-single__desc {
    font-size: 0.9375rem;
  }
}

.work-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem 0.375rem;
  margin-top: 1rem;
}
/* タグは濃青（archive のカードタグと同じトーン） */
.work-single__tag {
  padding: 0.5625rem 0.875rem;
  border-color: #1178a8;
  font-size: 0.8125rem;
  color: #1178a8;
}
@media screen and (min-width: 768px) {
  .work-single__tag {
    font-size: 0.875rem;
  }
}

/* ========================================
   本文（the_content() をそのまま）＋ WYSIWYG タイポグラフィ
   ※ 青バー h2 見出しは work-common.css に集約（single-blog と共用）。
   ======================================== */
.work-single__content {
  margin-top: 2.25rem;
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .work-single__content {
    margin-top: 2.75rem;
    font-size: 1rem;
  }
}
/* 段落などの縦リズム（見出しは個別に上書き） */
.work-single__content > * + * {
  margin-top: 1.25rem;
}

.work-single__content h3 {
  margin-top: 2rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .work-single__content h3 {
    font-size: 1.125rem;
  }
}

.work-single__content a {
  color: #1178a8;
  text-decoration: underline;
}
@media (any-hover: hover) {
  .work-single__content a:hover {
    opacity: 0.75;
  }
}

.work-single__content strong {
  font-weight: 700;
}

/* リスト（base リセットで list-style/padding が消えているので復帰） */
.work-single__content ul,
.work-single__content ol {
  padding-left: 1.5em;
}
.work-single__content ul {
  list-style: disc;
}
.work-single__content ol {
  list-style: decimal;
}
.work-single__content li + li {
  margin-top: 0.5em;
}

.work-single__content img {
  border-radius: 0.5rem;
}

.work-single__content blockquote {
  padding: 0.75rem 1.25rem;
  border-left: 0.25rem solid #cdd5d8;
  background-color: #f4f6f7;
  color: #555;
}

/* ========================================
   〔追加〕関連記事＝新着の実績カード（work一覧と同じ .work-archive-card を流用）。
   PC（≥768px）は7・8件目を非表示で6件、SP（<768px）は8件表示。
   グリッド列は work-common.css の .work-grid（<600:1 / 600-1023:2 / ≥1024:3）。
   ======================================== */
@media screen and (min-width: 768px) {
  .work-single__related .work-grid > *:nth-child(n + 7) {
    display: none;
  }
}

/* =========================================================
   2026-07-06 追加：WORK詳細PC を Figma(node 2549-7304) に一致
   - すべて .work-single* にスコープ（work-common.css/blog-single/他ページ無改変）。
   - 共有の青バーh2は blog-single に影響しないよう .work-single__ で上書き。
   ========================================================= */

/* ---- コンテナ：内容1200px(x120起点)。ヒーローも揃える ---- */
.work-single__inner,
.work-single__hero-inner {
  max-width: 1250px;
}

/* ---- 2カラム（PC）：本文917 + サイドバー244 / gap40 ---- */
@media screen and (min-width: 768px) {
  .work-single__layout {
    grid-template-columns: minmax(0, 1fr) 244px;
    gap: 40px;
  }
}

/* ---- パンくず：16px/#2b2b2b/シェブロン ---- */
.work-single__breadcrumb {
  gap: 8px;
  padding-block: 27px 25px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
.work-single__breadcrumb a {
  color: #2b2b2b;
}
.work-single__breadcrumb-sep {
  width: 5px;
  height: 8px;
  color: transparent;
  overflow: hidden;
  background: url("../images/common/breadcrumb_arrow.svg") left center/5px 8px no-repeat;
}

/* ---- 記事ヘッダー：会社名36px / desc16px / タグpill ---- */
.work-single__header {
  margin-bottom: 20px; /* ヘッダー→アイキャッチ 20px */
}
@media screen and (min-width: 768px) {
  .work-single__header {
    margin-bottom: 20px;
  }
}
.work-single__company {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .work-single__company {
    font-size: 36px; /* Figma 36px */
  }
}
.work-single__desc {
  margin-top: 7px; /* 会社名→desc 7px */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: justify;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .work-single__desc {
    font-size: 16px;
  }
}
.work-single__tags {
  gap: 12px; /* Figma 横gap12 */
  margin-top: 12px; /* desc→タグ 12px */
}
.work-single__tag {
  padding: 8px 11px;
  border: 1.67px solid #1178a8;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: #1178a8;
}
@media screen and (min-width: 768px) {
  .work-single__tag {
    font-size: 12px;
  }
}

/* ---- アイキャッチ：角丸なし(直角・Figma)・917×519比 ---- */
.work-single__eyecatch {
  border-radius: 0;
  aspect-ratio: 917 / 519;
}
.work-single__eyecatch img {
  border-radius: 0;
  height: 100%;
  object-fit: cover;
}

/* ---- 本文：Noto Regular 16px lh1.8 / アイキャッチ→本文36px ---- */
.work-single__content {
  margin-top: 36px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8; /* Figma lh29/16 */
  letter-spacing: 0.08em;
  text-align: justify;
  color: #2b2b2b;
}
@media screen and (min-width: 768px) {
  .work-single__content {
    margin-top: 36px;
    font-size: 16px;
  }
}
/* 青バー見出し（概要/対応ポイント）＋関連記事見出し：4px#1178a8バー・gap20・Noto Bold25px */
.work-single__content h2,
.work-single__heading {
  position: relative;
  margin-top: 36px; /* セクション間 */
  padding: 0 0 0 24px; /* バー4 + gap20 */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #2b2b2b;
  background: none;
  border: 0;
}
@media screen and (min-width: 768px) {
  .work-single__content h2,
  .work-single__heading {
    font-size: 25px;
  }
}
.work-single__content h2::before,
.work-single__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 33px;
  background-color: #1178a8;
  border: 0;
  border-radius: 0;
}
/* 見出し→本文 18px（Figma gap-18） */
.work-single__content h2 + * {
  margin-top: 18px;
}
/* 関連記事見出し（.work-single__heading）→カード/空文の間隔 */
.work-single__related {
  margin-top: 36px;
}

/* ---- サイドバー：WORK/BLOGと同じ（青121px+灰線・項目#ececec罫線・縦余白） ---- */
.work-single__side .work-side {
  gap: 51px;
}
.work-single__side .work-side__title {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 6px;
  border-bottom: 2px solid #d9d9d9;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}
.work-single__side .work-side__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 121px;
  height: 2px;
  background-color: #1178a8;
}
.work-single__side .work-linklist {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.work-single__side .work-linklist__item {
  border-bottom: 2px solid #ececec;
}
.work-single__side .work-linklist__link {
  display: block;
  padding: 0 0 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #2b2b2b;
}

/* ---- 関連記事グリッド：本文917幅で3列・gap30（archive-work.css をsingleにも読込みカードを整形）
   列は minmax(0,1fr) で狭い時も溢れない。見出し「関連記事」→カード上端の余白を30pxに。 ---- */
.work-single__related .work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 30px; /* 見出し(関連記事)→カード の余白（Figma：詰まりすぎ解消） */
}
.work-single__related .work-single__empty-related {
  margin-top: 18px; /* 空状態テキストの余白（Figma section rhythm） */
}