@charset "UTF-8";
/* =========================================================
   実績/ブログ（work / blog）共通スタイル
   … archive-work.php / single-work.php / archive-blog.php / single-blog.php 共用
   - 対象ページのときに読み込む（functions.php）。各個別CSSより先に読み込む。
   - .work-archive__* / .work-single__* / .blog-archive__* / .blog-single__* の
     各系統にグループセレクタで適用。
   - コンテナ規約：max-width 1200px / padding-inline 20px(SP)・25px(PC) / BP 768px
   - style.css（親SCSSのコンパイル成果物）は無改変。ここで上乗せ。
   - 流用アトム：.heading / .tag / .button(.c-grad,.c-arrow) / .cta
   ========================================================= */

.work-archive,
.work-single,
.blog-archive,
.blog-single {
  /* ヘッダー（position:sticky）の高さ。サイドバー追従の top に使用。
     ※仮値。実測で微調整（PCのヘッダー実高はおよそ 84px）。 */
  --header-h: 80px;
  background-color: #fff;
}

/* ========================================
   ヒーロー（グレー帯）：共通 .heading を中に配置
   ======================================== */
.work-archive__hero,
.work-single__hero,
.blog-archive__hero,
.blog-single__hero {
  overflow: hidden;
  padding-block: 3.5rem;
  background-color: #e6eaeb;
}
@media screen and (min-width: 768px) {
  .work-archive__hero,
  .work-single__hero,
  .blog-archive__hero,
  .blog-single__hero {
    padding-block: 8rem 3.5rem;
  }
}

.work-archive__hero-inner,
.work-single__hero-inner,
.blog-archive__hero-inner,
.blog-single__hero-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media screen and (min-width: 768px) {
  .work-archive__hero-inner,
  .work-single__hero-inner,
  .blog-archive__hero-inner,
  .blog-single__hero-inner {
    padding-inline: 25px;
  }
}

/* ヒーロー内の EN 見出し（.heading__en の流用。サイズは共通定義のまま）
   ※ archive 系はページ見出し=h1、single では装飾なので p で使う（実H1は会社名/記事タイトル）。 */
.work-archive__hero .heading__en,
.work-single__hero .heading__en,
.blog-archive__hero .heading__en,
.blog-single__hero .heading__en {
  margin-top: 0.5625rem;
}

/* ========================================
   コンテナ / パンくず
   ======================================== */
.work-archive__inner,
.work-single__inner,
.blog-archive__inner,
.blog-single__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media screen and (min-width: 768px) {
  .work-archive__inner,
  .work-single__inner,
  .blog-archive__inner,
  .blog-single__inner {
    padding-inline: 25px;
  }
}

.work-archive__breadcrumb,
.work-single__breadcrumb,
.blog-archive__breadcrumb,
.blog-single__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  padding-block: 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: #6b7378;
}
.work-archive__breadcrumb a,
.work-single__breadcrumb a,
.blog-archive__breadcrumb a,
.blog-single__breadcrumb a {
  color: #6b7378;
}
@media (any-hover: hover) {
  .work-archive__breadcrumb a:hover,
  .work-single__breadcrumb a:hover,
  .blog-archive__breadcrumb a:hover,
  .blog-single__breadcrumb a:hover {
    color: #1178a8;
    opacity: 1;
  }
}
.work-archive__breadcrumb-sep,
.work-single__breadcrumb-sep,
.blog-archive__breadcrumb-sep,
.blog-single__breadcrumb-sep {
  color: #aab2b6;
}

/* ========================================
   2カラムレイアウト（PC：本文＋サイドバー / SP：縦積み）
   ======================================== */
.work-archive__layout,
.work-single__layout,
.blog-archive__layout,
.blog-single__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3.75rem;
}
@media screen and (min-width: 768px) {
  .work-archive__layout,
  .work-single__layout,
  .blog-archive__layout,
  .blog-single__layout {
    grid-template-columns: minmax(0, 1fr) 17.5rem; /* 本文 / サイドバー280px */
    gap: 2.5rem;
    padding-bottom: 6rem;
  }
}
@media screen and (min-width: 1024px) {
  .work-archive__layout,
  .work-single__layout,
  .blog-archive__layout,
  .blog-single__layout {
    gap: 3.25rem;
  }
}

/* サイドバー無し（中身が空 等）：本文を全幅に */
.work-archive__layout--no-sidebar,
.work-single__layout--no-sidebar,
.blog-archive__layout--no-sidebar,
.blog-single__layout--no-sidebar {
  grid-template-columns: 1fr;
}

.work-archive__main,
.work-single__main,
.blog-archive__main,
.blog-single__main {
  min-width: 0; /* グリッド内で子のはみ出しを防ぐ */
}

/* ========================================
   サイドバー（aside）
   - work-archive / work-single は「サイドバー全体」を sticky 追従。
   - blog-archive / blog-single は「バナーのみ」追従（後述）なので全体stickyには含めない。
   ======================================== */
.work-archive__side,
.work-single__side,
.blog-archive__side,
.blog-single__side {
  min-width: 0;
}
/* サイドバーがある全ページで「サイドバー全体」を sticky 固定（PC・2カラム時）。
   ※ 中間幅(≤1100px)ではサイドバーは本文下に回る（stack）ので sticky は効かせない。 */
@media screen and (min-width: 1101px) {
  .work-archive__side,
  .work-single__side,
  .blog-archive__side,
  .blog-single__side {
    position: sticky;
    top: calc(var(--header-h, 80px) + 1.25rem);
    align-self: start; /* 行の高さに引き伸ばされず sticky が効くように */
  }
}

/* サイドバー内の縦スタック（カスタムブロック／ウィジェット共通の器） */
.work-side {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* 各ブロック（カテゴリー / 最近の投稿 / ウィジェット出力 が入る器） */
.work-side__item img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* ブロック見出し（カテゴリー / 最近の投稿 / ウィジェットタイトル 共用）
   下線＋ブルーのアクセントバー（デザイン準拠） */
.work-side__title {
  position: relative;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid #d6dbde;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2b2b2b;
}
.work-side__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.0625rem;
  width: 2.5rem;
  height: 0.125rem;
  background-color: #189ee2;
}

/* ========================================
   縦リンクリスト（タイトル＋リンクの縦並び）
   … single-work の 関連記事/最近の投稿、blog のカテゴリー で共用
   ======================================== */
.work-linklist {
  margin-top: 1rem;
  border-top: 0.0625rem solid #e2e6e8;
}
.work-linklist__item {
  border-bottom: 0.0625rem solid #e2e6e8;
}
.work-linklist__link {
  display: block;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #2b2b2b;
}
@media (any-hover: hover) {
  .work-linklist__link:hover {
    color: #1178a8;
    opacity: 1;
  }
}
/* サイドバー内のリストは見出し直下に詰める（見出しに下余白があるため） */
.work-side__item .work-linklist {
  margin-top: 0;
}

/* ========================================
   詳細ページ 共通（single-work / single-blog）
   ======================================== */
/* アイキャッチ（大） */
.work-single__eyecatch,
.blog-single__eyecatch {
  overflow: hidden;
  border-radius: 0.75rem;
}
.work-single__eyecatch img,
.blog-single__eyecatch img {
  width: 100%;
  height: auto;
}

/* 青い左バー見出し：本文中の h2 と「関連記事」見出しで共用。
   - single-work：自前ラッパ .work-single__content の h2。
   - single-blog：SWELLの .post_content を活かすため、塗りつぶし見出しを上書き。
     SWELLブロック見出し（swell-block-*）は除外し、筆者が書いた本文 h2 のみに適用。
     詳細度 (.blog-single__content.post_content h2 = 0,2,1) > SWELL(.post_content h2 = 0,1,1)。 */
.work-single__content h2,
.work-single__heading,
.blog-single__heading,
.blog-single__content.post_content h2:where(:not([class*="swell-block"])) {
  position: relative;
  margin-top: 2.75rem;
  padding: 0 0 0 0.875rem; /* SWELL h2 の塗りつぶし padding を解除し左パディングのみ */
  font-family: inherit; /* 見出し独自フォントを当てず、本文と同じ字体に揃える */
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4; /* 本番に合わせて行間を詰める（旧 1.5 は空きすぎ） */
  letter-spacing: 0.06em;
  color: #2b2b2b;
  background: none; /* SWELL .post_content h2 の塗りつぶしを打ち消す */
  border: 0;
}
@media screen and (min-width: 768px) {
  .work-single__content h2,
  .work-single__heading,
  .blog-single__heading,
  .blog-single__content.post_content h2:where(:not([class*="swell-block"])) {
    font-size: 1.375rem;
  }
}
.work-single__content h2::before,
.work-single__heading::before,
.blog-single__heading::before,
.blog-single__content.post_content h2:where(:not([class*="swell-block"]))::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 0.3125rem;
  height: 1.25em;
  background-color: #189ee2;
  border: 0; /* SWELL h2::before の上下ボーダーを打ち消す */
  border-radius: 0.0625rem;
}

/* 関連記事の枠（見出し下の余白・0件メッセージ） */
.work-single__related,
.blog-single__related {
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .work-single__related,
  .blog-single__related {
    margin-top: 3.5rem;
  }
}
.work-single__empty-related,
.blog-single__empty-related {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: #6b7378;
}

/* ========================================
   カードグリッド（work / blog の archive・関連で共用）
   ======================================== */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media screen and (min-width: 600px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .work-grid {
    gap: 1.75rem;
  }
}
@media screen and (min-width: 1024px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 投稿0件（work / blog 共用） */
.work-archive__empty,
.blog-archive__empty {
  padding: 3rem 0;
  text-align: center;
  color: #6b7378;
}

/* ========================================
   ページャー（paginate_links type=list / work・blog 共用）
   ======================================== */
.work-pager {
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .work-pager {
    margin-top: 3.25rem;
  }
}

/* SWELL本体（インライン化された site-solid）が
   [class*="page-numbers"]{background-color:#dedede} と box-shadow を
   ul.page-numbers（コンテナ）にも当てるため、横長グレー帯になる。
   コンテナ／li 側で明示的に打ち消す。
   ※ .work-pager ul.page-numbers の詳細度(0,2,1) > [class*=page-numbers](0,1,0)
     なので !important は不要。 */
.work-pager ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: auto; /* SWELLの height:36px を解除 */
  margin: 0;
  padding: 0;
  border: 0;
  background: none; /* ← グレー帯(#dedede)を打ち消す */
  box-shadow: none; /* ← SWELLの box-shadow を打ち消す */
  list-style: none;
}
.work-pager ul.page-numbers > li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.work-pager a.page-numbers,
.work-pager span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  margin: 0; /* SWELLの margin:6px を解除 */
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9375rem;
  line-height: 1;
  color: #2b2b2b;
  background-color: transparent; /* 通常番号：グレー背景・枠なし。番号テキストのみ */
  box-shadow: none; /* SWELLの [class*=page-numbers] box-shadow を打ち消す */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 現在ページ：太字＋テーマカラーの青（front-page の .c-grad と同じグラデーション） */
.work-pager span.page-numbers.current {
  font-weight: 700;
  color: #fff;
  background-image: linear-gradient(90deg, #2193c8 19%, #1178a8 100%);
}

.work-pager span.page-numbers.dots {
  min-width: auto;
}

/* ホバー：テーマ青の薄い背景＋青文字で、対象の番号を明示 */
@media (any-hover: hover) {
  .work-pager a.page-numbers:hover {
    background-color: rgba(33, 147, 200, 0.12);
    color: #1178a8;
    opacity: 1;
  }
}

/* ========================================
   SWELL目次（main.min.js がクライアント生成）を single-blog で動かすための DOM 契約調整。
   ※ single-work では目次を使わないため契約は付与しない（functions.php で work の自動目次
     フィルタ add_toc を外している）。ここは blog 詳細のみが対象。
   - JS は #body_wrap / #main_content / .l-mainContent__inner > .post_content を必須参照し、
     その配下の h2/h3 を走査して「目次リスト・開閉トグル・見出しID付与・スクロール」を生成する。
   - #body_wrap / #main_content は main.min.js では「目次機能のみ」が参照（他機能は
     #header/#fix_header/#sidebar 等 別要素に依存するため、本テンプレでは不発のまま）。
   - 付随して SWELL が当てる余白をここで打ち消し、既存レイアウトを維持する。
   ======================================== */
/* 構造ラッパは見た目を持たない（グリッド内のはみ出し防止のみ） */
.l-mainContent__inner {
  min-width: 0;
}
/* blog：本文 div 自体が .post_content（SWELL本文タイポ併用）。
   同詳細度(0,2,0)＋後読みで SWELL の .l-mainContent__inner>.post_content{margin:4em 0} を上書きし、
   上余白のみ従来値を維持。 */
.blog-single__content.post_content {
  margin: 2rem 0 0;
}
@media screen and (min-width: 768px) {
  .blog-single__content.post_content {
    margin-top: 2.5rem;
  }
}

/* =========================================================
   2026-07-08 追加：サイドバー最上部のCTAバナー（widget: oneconnect-side / node 2549-8674）
   - 画像リンクをサイドバー幅いっぱいに。下に他項目との間隔。
   ======================================== */
.work-side__banner {
  line-height: 0; /* 画像下の余白（inline descender）を消す */
}
.work-side__banner img {
  width: 100%;
  height: auto;
  display: block;
}
/* バナー→次項目の間隔は .work-side の flex gap が担当（margin は付けない＝二重間隔防止）。 */

/* SP（〜767px）：サイドバーのCTAバナーは非表示（PC専用）。
   SPのCTAは footer.php のフッター追従CTA（.fixed-cta / Figma 2549-8635）が担当する。 */
@media screen and (max-width: 767px) {
  .work-side__banner {
    display: none;
  }
}