/* ==========================================================
   NOYA COLUMN(コラム)

   投稿(post)機能をそのまま「コラム」として使う。新しい
   テンプレートファイルは作らず、SWELLが標準で出力する
   テンプレート・クラス名(.p-postList / .p-articleHead 等)に
   対してCSSで見た目だけを合わせている。

   色・フォントのトークンは noya-design-system.css の
   --ds-* をそのまま再利用する(全ページ共通で読み込まれる
   ため、ここでは再定義しない)。
========================================================== */


/* ==========================================================
   1. 一覧ページ(投稿ページ = is_home())
   「左に画像・右にタイトル」を縦に並べる。

   .blog は「投稿ページ(is_home)」にだけ自動で付くクラスで、
   トップページ(is_front_page)には付かないため、4.の
   トップページ内コラムセクション(同じ.p-postListを使う)
   とは干渉しない。
========================================================== */

/*
 * SWELL標準は「カード型・PC3列」のグリッド。display:blockで
 * 列数指定を無効化し、各記事(li)を縦一列で積む。
 */
.blog .p-postList.-type-card {
  display: block !important;
}

.blog .p-postList__item {
  width: 100% !important;
  border-top: 1px solid var(--ds-line);
  padding: 28px 0;
}

.blog .p-postList__item:last-child {
  border-bottom: 1px solid var(--ds-line);
}

.blog .p-postList__link {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 24px;
}

.blog .p-postList__thumb {
  flex: 0 0 200px;
  width: 200px !important;
  height: 130px !important;
  margin: 0 !important;
  /* 画像未設定の記事でも枠が残るよう、薄いグレーで塗っておく */
  background: var(--ds-line);
}

.blog .p-postList__thumb .c-postThumb__figure {
  height: 100% !important;
}

.blog .p-postList__body {
  flex: 1 1 auto;
  width: auto !important;
  padding-top: 2px;
}

.blog .p-postList__title {
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ds-black) !important;
  line-height: 1.6 !important;
}

.blog .p-postList__excerpt {
  display: none !important;
}

.blog .p-postList__meta {
  margin-top: 10px !important;
}

/*
 * Barlow Condensedは和文グリフを持たない英数字専用書体。本文の
 * 日本語部分はブラウザが別の日本語フォントへ自動的に置き換えて
 * 表示する一方、この日付(数字のみ)はBarlow Condensedがそのまま
 * 適用されるため、本文より細く見える。本文の日本語が実際に
 * 描画されている書体(IBM Plex Sans JP)を明示指定して揃える。
 */
.blog .p-postList .c-postTimes__posted {
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 14px !important;
  color: var(--ds-black) !important;
}

/* SWELL標準の時計アイコン(icomoonの::before)を非表示。日付の文字は残す */
.blog .c-postTimes__posted.icon-posted::before {
  content: none !important;
  display: none !important;
}

/* サムネイル左上のカテゴリーバッジ(装飾アイコン)はサイト全体の方針に合わないため非表示 */
.blog .c-postThumb__cat {
  display: none !important;
}

/* ページネーション:ライムの塗りつぶしではなく、細い黒枠のフラットな見た目に統一 */
.blog .c-pagination {
  display: flex !important;
  gap: 8px;
}
.blog .c-pagination .page-numbers {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1.5px solid var(--ds-black) !important;
  background: transparent !important;
  color: var(--ds-black) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 15px !important;
}
.blog .c-pagination .page-numbers.current {
  background: var(--ds-black) !important;
  color: var(--ds-white) !important;
}

@media (max-width: 599px) {
  .blog .p-postList__thumb {
    flex-basis: 96px;
    width: 96px !important;
    height: 96px !important;
  }
  .blog .p-postList__title {
    font-size: 16px !important;
  }
}

/*
 * このページはSWELL標準テンプレート(.l-content→.l-mainContent
 * の2重にそれぞれ独立してmargin:0 auto中央寄せ)を使っており、
 * /service/側の独自グリッド(--nd-page-edge基準)とは別の仕組みで
 * 左右の余白が決まる。2重の中央寄せを解除し、/service/の実測値
 * (1024px→66px、1440px→96px)にほぼ一致するclamp式で左端を
 * 直接指定している。本文の最大幅は他ページのコンテンツ幅の
 * 基準である1120pxに統一。
 */
.blog .l-content.l-container {
  max-width: none !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.blog .l-mainContent.l-article {
  /*
   * [不具合修正] SWELL標準はこの要素にwidth:100%を直接指定して
   * いる。100%は「余白を差し引く前の親の幅」を指すため、下の
   * margin-leftと合わせるとその分だけ右端が画面外にはみ出し、
   * 見出しボックスの右側(英字ラベル)が画面端で切れていた
   * (margin-rightではなくwidth:100%自体が原因)。width:autoに
   * 変更し、margin-left・margin-right(auto)・max-widthの3つから
   * 幅が自動計算されるようにする。
   *
   * padding-topは/service/(.nd-service-page__inner)と同じ
   * clamp式・スマホ用の値を使い、パンくず開始位置を他ページと
   * 揃えている。
   */
  width: auto !important;
  max-width: 1120px !important;
  padding-top: clamp(80px, 6vw, 100px) !important;
  margin-left: clamp(18px, calc(-8px + 7.2vw), 110px) !important;
  margin-right: auto !important;
}
@media (max-width: 767px) {
  .blog .l-mainContent.l-article {
    padding-top: 76px !important;
  }
}

/*
 * パンくず(.nd-ds-breadcrumb、functions.php側でJS挿入)と見出しの
 * 間の余白。/service/等はブロックエディタ側でこの2つの間に
 * 高さ2emのスペーサーブロックを手動で置いているが、一覧ページは
 * 本文(the_content)が出力されないためスペーサーを置けない。
 *
 * [不具合修正] 以前はここを実測px値(32px/スマホ27px)で固定して
 * いたが、SWELL側はhtml要素のfont-size自体が画面幅に応じて連続的
 * に変化する仕様(実測:375px幅で13.5px、1024px以上で16px)のため、
 * 2点だけ計測した固定pxでは間の幅(タブレット等)やビューポート
 * ピクセル比が違う環境(WordPressカスタマイザーのモバイル
 * プレビュー等)でズレが生じ、見出しが本来より上に詰まって見える
 * 不具合になっていた。remは要素自身のfont-sizeに関係なく常に
 * html要素のfont-sizeを基準にするため、2remとすることで
 * /service/側の「2em(=html基準のfont-sizeの2倍)」と画面幅を問わず
 * 常に一致する。
 */
.blog .nd-ds-breadcrumb {
  margin-bottom: 2rem !important;
}

/*
 * [不具合修正] パンくず・見出しの左右位置が/service/と厳密には
 * 一致していなかった問題の修正。
 *
 * 上のmargin-left(clamp(18px, calc(-8px+7.2vw), 110px))は
 * デスクトップ2点(1024px→66px、1440px→96px)だけを基準に
 * 逆算した式で、スマホ・タブレット幅では検証されておらず、
 * 実際には/service/より狭い位置になっていた(例:375px幅で
 * 19pxしかないが、/service/は38px)。
 *
 * /service/の左右余白は「SWELL標準の.l-content余白(4vw)」+
 * 「/service/独自の.nd-service-page__inner余白」の2層構成で、
 * 実機計測でこの2層の合計と一致することを確認済み:
 * - 375px:  4vw(15px)  + clamp(22px,6vw,38px)(22.5px)  = 38px(実測38px)
 * - 768px:  4vw(30.7px)+ clamp(42px,7.5vw,72px)(57.6px) = 88px(実測88px)
 * - 959px:  4vw(38.4px)+ clamp(42px,7.5vw,72px)(71.9px) = 110px(実測110px)
 * 左右対称のため、右余白も同じ式。
 *
 * 一覧ページは.p-postList側の中央揃え計算(下記)が既存の
 * margin-left式に依存しているため、.l-mainContent.l-article
 * 自体は変更せず、パンくず・見出しの2要素だけに「上の式で求めた
 * 絶対位置」から「親(.l-mainContent.l-article)が既に動かしている
 * 分」を差し引いた差分をmargin-leftとして追加で載せている。
 * 見出しの幅も同じ絶対位置基準(100vw−左右余白×2)へ置き換え、
 * 見出し右端が画面外にはみ出さないようにしている。
 * デスクトップ(960px以上)は元のclamp式が実測値と一致していた
 * ため変更していない。
 */
@media (max-width: 767px) {
  .blog .nd-ds-breadcrumb,
  .blog .nd-ds-heading {
    --nd-column-heading-inset: calc(4vw + clamp(22px, 6vw, 38px));
    margin-left: calc(var(--nd-column-heading-inset) - clamp(18px, calc(-8px + 7.2vw), 110px)) !important;
  }
  .blog .nd-ds-heading {
    width: calc(100vw - 2 * var(--nd-column-heading-inset)) !important;
  }
}
@media (min-width: 768px) and (max-width: 959px) {
  .blog .nd-ds-breadcrumb,
  .blog .nd-ds-heading {
    --nd-column-heading-inset: calc(4vw + clamp(42px, 7.5vw, 72px));
    margin-left: calc(var(--nd-column-heading-inset) - clamp(18px, calc(-8px + 7.2vw), 110px)) !important;
  }
  .blog .nd-ds-heading {
    width: calc(100vw - 2 * var(--nd-column-heading-inset)) !important;
  }
}

/*
 * コラム一覧(記事リスト)は画面の中央揃えにする。見出しは上記の
 * 通り左端に固定済みのため、入れ物(.l-mainContent.l-article)に
 * margin:autoを足しても中央には寄らない。そこで一覧
 * (.p-postList)だけを、入れ物の左寄せぶんを打ち消す逆向きの
 * margin-leftと、画面幅基準の中央寄せぶんを合成したcalc式で、
 * 画面全体に対して独立して中央揃えにしている。
 */
.blog .p-postList {
  --nd-column-list-w: min(1040px, calc(100vw - 40px));
  width: var(--nd-column-list-w) !important;
  max-width: var(--nd-column-list-w) !important;
  margin-left: calc(-1 * clamp(18px, calc(-8px + 7.2vw), 110px) + (100vw - var(--nd-column-list-w)) / 2) !important;
  margin-right: 0 !important;
}

/* ページネーションは.p-postListの兄弟要素のため、同じ計算式で中央揃えを揃える */
.blog .c-pagination {
  --nd-column-list-w: min(1040px, calc(100vw - 40px));
  width: var(--nd-column-list-w) !important;
  margin-left: calc(-1 * clamp(18px, calc(-8px + 7.2vw), 110px) + (100vw - var(--nd-column-list-w)) / 2) !important;
}


/* ==========================================================
   2. 個別記事ページ(is_singular('post'))
   全体の左右の余白を広く取り、本文を中央に寄せる。
   .single-postはbodyではなく、その1つ内側のラッパーdivに
   付与されるWordPress標準クラス。
========================================================== */

.single-post .l-mainContent.l-article {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(18px, 3vw, 30px) !important;
  padding-right: clamp(18px, 3vw, 30px) !important;
}

/*
 * 記事本文の先頭で著者自身がH1見出しブロックにタイトルを書く
 * 運用のため、SWELLが自動出力する上部タイトル(.c-postTitle__ttl)
 * は非表示にする(残すとH1が本文と2つ重複してしまう)。公開日時は
 * 下の.nd-column-modified-dateとして本文側のH1直後に出力し直す
 * ため、ここでは非表示でよい。
 */
.single-post .c-postTitle__ttl,
.single-post .c-postTitle__date {
  display: none !important;
}
.single-post .p-articleHead.c-postTitle {
  margin-bottom: 0 !important;
}
/* .c-postTitle__dateとは別に、直後の.p-articleMetas(-top)にも同じ公開日が重複出力されるため非表示 */
.single-post .p-articleMetas.-top {
  display: none !important;
}

.single-post .post_content > h1:first-child {
  font-size: 28px !important;
  margin-bottom: .4em !important;
}
@media (max-width: 767px) {
  .single-post .post_content > h1:first-child {
    font-size: 22px !important;
  }
}

/*
 * H1直後に差し込む更新日時(functions.php側でJS挿入)の見た目。
 * フォントは本文の日本語が実際に描画されている書体
 * (IBM Plex Sans JP)を明示指定し、Barlow Condensedの和文
 * フォールバックによる細字化を避けている。
 */
.nd-column-modified-date {
  margin: 0 0 1.8em !important;
  padding: 0 !important;
  color: var(--ds-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 14px !important;
  letter-spacing: .04em;
}

/*
 * 個別記事ページは本文を読むことに集中できる構成にするため、
 * SWELL標準の以下の要素を非表示にする。DOM削除ではなく非表示
 * のため、復活させたい場合はこのブロックを削除するだけでよい。
 * - .p-articleFoot                        … カテゴリー表示
 * - .p-pnLinks                            … 前後記事リンク
 * - .l-articleBottom__section.-author     … 著者欄
 * - .l-articleBottom__section.-comment    … コメント欄
 * 関連記事(.l-articleBottom__section.-related)だけは表示し、
 * 下で専用のデザインを当てている。
 */
.single-post .p-articleFoot,
.single-post .p-pnLinks,
.single-post .l-articleBottom__section.-author,
.single-post .l-articleBottom__section.-comment {
  display: none !important;
}

/*
 * 関連記事セクション。SWELL標準の見出し(チェックマーク風の
 * 飾り・大きめの文字)をやめ、黒枠のボックスの中に、本文と
 * 同じ書式の「関連記事」ラベルを右上に添えるだけのミニマルな
 * 構成にする。
 */
.single-post .l-articleBottom__section.-related {
  border: 1px solid var(--ds-black);
  padding: 20px;
}
.single-post .l-articleBottom__section.-related .l-articleBottom__title {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: right;
}
.single-post .l-articleBottom__section.-related .l-articleBottom__title::before,
.single-post .l-articleBottom__section.-related .l-articleBottom__title::after {
  content: none !important;
  display: none !important;
}

/*
 * 本文中に自動表示される「ブログカード」(内部リンクの埋め込み
 * カード)。ラベルはSWELL標準ではチェックマークアイコン付きで
 * 枠線の左上に重ねて表示されるが、アイコンを消し、本文と同じ
 * 書式の「関連記事」ラベル(テキストはfunctions.php側でJS書き換え)
 * としてボックス左上に配置し直す。タイトルは画像の右側に並べ、
 * 収まらない場合は折り返す。
 * カード内部はサムネイルとタイトルを横並びにするflexコンテナ
 * (nowrap)で、ラベルはposition:absoluteで元々その外に置かれて
 * いる。ラベル用に.p-blogCard__inner側の上余白を広げてスペースを
 * 確保し、ラベルをその余白内に配置することで、横並びのサムネイル
 * +タイトルの構造を崩さずに済む。
 * .p-blogCard__bodyはSWELL側でwidth:100%が指定されており、
 * flex-basis:autoの計算時にこの値が使われて横幅いっぱいの行を
 * 単独で要求してしまうため、width:autoで打ち消し、本来のflex-grow
 * によるサムネイル横の可変幅に戻している。
 * カードの枠線は.p-blogCard__inner本体のborderではなく、
 * ::before疑似要素(inset:0の黒1px線)で描画されている。
 */
.single-post .p-blogCard__inner {
  flex-wrap: nowrap !important;
  padding-top: 56px !important;
}
.single-post .p-blogCard__body {
  flex-basis: auto !important;
  width: auto !important;
}
.single-post .p-blogCard__caption {
  position: absolute !important;
  top: 20px !important;
  left: 24px !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ds-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
.single-post .p-blogCard__caption::before {
  content: none !important;
  display: none !important;
}

/*
 * 「コラム一覧に戻る」ボタン(functions.php側でCONTACTの直前に
 * JS挿入)。トップページのコラムセクションの「コラム一覧」
 * ボタンと同じ.nd-ds-button-bを使い、本文の右端に揃える。
 */
.single-post .nd-column-back-link {
  margin: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 36px) !important;
  text-align: right;
}
.single-post .nd-column-back-link .nd-ds-button-b {
  font-size: 16px !important;
}

/* 本文中のH2・H3の見た目。H2:下線(黒の細い線)。H3:下線なし、太字のみで区別 */
.single-post .post_content h2 {
  margin: 2.4em 0 1em !important;
  padding: 0 0 .5em !important;
  border: 0 !important;
  border-bottom: 2px solid var(--ds-black) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-black) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.single-post .post_content h3 {
  margin: 2em 0 .8em !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-black) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

/*
 * SWELLの見出し標準デザインは、H2・H3本体のborderとは別に、
 * ::before疑似要素で装飾線を描画している(H2::before: 上下2pxの
 * ライム色border、H3::before: 左側だけライム色のグラデーション
 * 背景)。本体のborderを上書きしただけではこの疑似要素は残って
 * しまうため、content:noneで生成自体を止める。
 */
.single-post .post_content h2::before,
.single-post .post_content h2::after,
.single-post .post_content h3::before,
.single-post .post_content h3::after {
  content: none !important;
  display: none !important;
}

/* リストは細い黒枠のボックスで囲み、点を黒い細いバーに変更する */
.single-post .post_content ul {
  list-style: none !important;
  margin: 1.6em 0 !important;
  padding: 1.2em 1.6em !important;
  border: 1.5px solid var(--ds-black);
}

.single-post .post_content ul li {
  position: relative;
  padding-left: 1.3em;
}
.single-post .post_content ul li + li {
  margin-top: .6em;
}
.single-post .post_content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 10px;
  height: 2px;
  background: var(--ds-black);
}

/* 表は罫線を全廃し、THの下にだけ黒の細い罫線を入れる(見出し行だけを区切る) */
.single-post .post_content table {
  border: 0 !important;
  border-collapse: collapse;
  width: 100%;
}
.single-post .post_content table th,
.single-post .post_content table td {
  border: 0 !important;
  padding: .7em .8em;
  text-align: left;
}
.single-post .post_content table th {
  border-bottom: 1.5px solid var(--ds-black) !important;
  font-weight: 700;
}

/*
 * WordPress/SWELL標準の目次ブロック(.p-toc)。既定の丸ボタン・
 * ドット装飾・アイコン・番号付きリストを、サイト共通のデザイン
 * (黒枠・シャープな角・ライムのアクセント)に合わせて上書きする。
 */

/* 見出し「目次」の横に付くアイコン(icomoon)を削除 */
.single-post .p-toc__ttl::before {
  content: none !important;
  display: none !important;
}

/* 枠線をブラックに */
.single-post .p-toc {
  border: 1px solid var(--ds-black) !important;
}

/* 「目次」の下の点線区切りを削除 */
.single-post .p-toc__ttl {
  border-bottom: 0 !important;
}

/*
 * 各見出しへのリンク。display:inlineのため、hover時の背景は
 * テキストの形にぴったり沿う。paddingはごく狭く、marginで
 * 同じ分だけ打ち消して周囲のレイアウトに影響しないようにする。
 */
.single-post .p-toc__link {
  padding: 1px 3px !important;
  margin: -1px -3px !important;
}
.single-post .p-toc__link:hover,
.single-post .p-toc__link:focus-visible {
  background: var(--ds-lime) !important;
}

/* 各見出しの連番を「-」に変更(実体はcounters()、区切り文字ではなく数字そのものを差し替える)。右の縦線(区切り用のborder-right)も削除 */
.single-post .p-toc__list > li::before {
  content: "-" !important;
  border-right: 0 !important;
}

/*
 * 「もっと見る」/「折りたたむ」ボタンを、丸ボタンから黒枠の
 * 角ばったボックスへ。このボタンの枠線はborderではなく
 * box-shadow(0 0 0 1pxのグレーの輪)で描かれているため、
 * border-colorだけを上書きしてもグレーの輪が別に残ってしまう。
 * box-shadowごと打ち消し、borderだけで枠を描き直す。
 */
.single-post .p-toc__expandBtn {
  border-radius: 0 !important;
  border: 1.5px solid var(--ds-black) !important;
  box-shadow: none !important;
  background: var(--ds-white) !important;
  color: var(--ds-black) !important;
}
.single-post .p-toc__expandBtn:hover,
.single-post .p-toc__expandBtn:focus-visible {
  border-color: var(--ds-lime) !important;
}

/* ボタン両脇の「....」装飾線を削除 */
.single-post .p-toc__expandBtn::before,
.single-post .p-toc__expandBtn::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   3. 右メニュー・ブランドマーク
   .nd-side-nav__item / .nd-site-footer__nav-item は既存の
   スタイルをそのまま継承するため、追加のCSSは不要。
========================================================== */


/* ==========================================================
   4. トップページ内「コラム」セクション
   テキストのみ・縦3つ・シンプルなスタイル。

   ブロックエディタ側で、この区画を囲むグループブロックに
   追加CSSクラス「nd-home-column」を付け、その中に
   (1)見出しブロック(H2、テキストは「コラム」等)
   (2)WordPress core標準の「最新の投稿」ブロック(コラム
      カテゴリー・表示件数3件で設定、wp-block-latest-posts)
   を配置する。SWELLの「投稿リスト」ブロック(.p-postList)とは
   出力されるクラス名が異なるため、このセクションだけ
   .wp-block-latest-posts__*系のセレクタを使っている。
========================================================== */

.wp-block-group.nd-home-column {
  width: 100%;
  max-width: 900px;
  margin: 0;
}

/* このセクションを囲うSWELLの全幅ブロック(.swell-block-fullWide)だけ背景色が個別設定されているため、他セクションと揃える */
.swell-block-fullWide:has(.nd-home-column) {
  background-color: #f7f7f4 !important;
}

/*
 * 見出しは他セクション(SERVICE等)と同じ「枠+JP+右に英字ラベル」の
 * 箱型。数値はすべて.nd-service__heading-frame等と共通(border
 * 3px・min-height 86px・width 680px・padding 18px
 * clamp(22,2.2vw,34)・JP clamp(26,2.6vw,34)/700・EN 17px/グレー)。
 *
 * 対応するHTML構造(ブロックエディタでの組み方):
 *   グループブロック(追加CSSクラス: nd-home-column__heading-frame)
 *     └ 見出しブロックH2(追加CSSクラス: nd-home-column__heading-title、テキスト「コラム」)
 *     └ 段落ブロック(追加CSSクラス: nd-home-column__heading-en、テキスト「COLUMN」)
 */
.nd-home-column__heading-frame,
.nd-home-column__heading-frame.wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;

  width: min(100%, 680px);
  min-height: 86px;

  margin: 0 0 clamp(28px, 3vw, 40px) !important;
  padding: 18px clamp(22px, 2.2vw, 34px);

  border: 3px solid var(--ds-black);
  background: var(--ds-white);
}
.nd-home-column__heading-frame > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100%;
}

.nd-home-column.nd-home-column .nd-home-column__heading-title,
html body .nd-home-column__heading-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.05em !important;
  text-shadow: none !important;
}
.nd-home-column__heading-title::before,
.nd-home-column__heading-title::after {
  content: none !important;
  display: none !important;
}

.nd-home-column__heading-en {
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ds-gray) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  white-space: nowrap;
}

/*
 * スクロール演出:SERVICE/WORKSの.is-heading-pending /
 * .is-heading-visibleと同じ数値。見出しの文字自体ではなく、
 * 枠(heading-frame)ごとに演出する(対象はnoya-column-home.jsで
 * .nd-home-column__heading-frameを指定)。
 */
.nd-home-column .is-heading-pending {
  opacity: 0 !important;
  transform: translate3d(0, 46px, 0) !important;
  will-change: opacity, transform;
}
.nd-home-column .is-heading-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity 1000ms cubic-bezier(.22,.61,.36,1),
    transform 1200ms cubic-bezier(.22,1,.36,1) !important;
}
/* 編集画面では常に完成状態で表示する(他セクションと同じ対処) */
.editor-styles-wrapper .nd-home-column .is-heading-pending {
  opacity: 1 !important;
  transform: none !important;
}

/* WordPress core「最新の投稿」ブロックの既定スタイルで自動的に入るグレーの罫線(border-top)を消す */
.nd-home-column .wp-block-latest-posts__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
}

/* 項目同士の区切りは、一覧ページ側(.blogスコープ)と同じ、上のみの薄い罫線に統一 */
.nd-home-column .wp-block-latest-posts__list > li {
  list-style: none !important;
  border: 0 !important;
  border-top: 1px solid var(--ds-line);
  padding: 18px 0;
  margin: 0 !important;
}

.nd-home-column .wp-block-latest-posts__list > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.nd-home-column .wp-block-latest-posts__list > li:last-child {
  padding-bottom: 0;
}

.nd-home-column .wp-block-latest-posts__post-title {
  display: block;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--ds-black) !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
  transition: color 200ms ease;
}

.nd-home-column .wp-block-latest-posts__post-title:hover,
.nd-home-column .wp-block-latest-posts__post-title:focus-visible {
  color: var(--ds-lime) !important;
}

.nd-home-column .wp-block-latest-posts__post-date {
  display: block;
  margin-top: 6px;
  font-size: 13px !important;
  color: var(--ds-black) !important;
}

/*
 * 「コラム一覧」ボタン(デザインB)。SERVICE/WORKSセクション末尾と
 * 同じ .nd-ds-button-b(noya-design-system.css)を使う。基本
 * サイズ14pxを、他セクションのfooterと同じ16pxへ拡大している。
 */
.nd-home-column-cta {
  margin-top: clamp(24px, 3vw, 36px);
  text-align: right;
}
.nd-home-column-cta .nd-ds-button-b {
  font-size: 16px !important;
}


/* ==========================================================
   5. コラム記事内で使う、他ページへの導線ボタン
   (サービス/制作実績/ご依頼方法)

   単体のリンクとして貼るときは、既存の.nd-ds-button-a
   (noya-design-system.css、枠線ボックス+矢印デザイン)を
   そのまま使う。「コラム一覧へ」の.nd-ds-button-b(下線が伸びる
   軽い導線用)とは異なり、記事途中で他ページへ積極的に誘導する
   CTAのため、より主張の強いボタンAを採用している。

   記事本文にはカスタムHTMLブロックで、以下をそのまま貼り付ける
   (文言・リンク先だけが違う3パターン)。
========================================================== */

/*
 * 見出し+本文+ボタンをまとめた枠付きCTA(.nd-ds-cta-box、
 * noya-design-system.css)を記事内で使う場合の調整。/service/
 * 側(ボタンB使用)は左右2カラムのままで問題ないが、コラム記事は
 * 本文幅が820pxしかなく、左テキスト+右ボタンの2カラムでは
 * 窮屈になる。そのためコラム記事内では常に1カラムに固定し、
 * 見出し・本文・ボタンを縦に積む。ボタンだけは左揃えではなく
 * 枠の右下に来るようjustify-self:endにする。枠線もサイトの
 * 黒基調ではなく、CTAらしく目を引くライムに変更している。
 */
.single-post .nd-ds-cta-box > .wp-block-group__inner-container {
  grid-template-columns: minmax(0, 1fr) !important;
  border-color: var(--ds-lime) !important;
}
.single-post .nd-ds-cta-box > .wp-block-group__inner-container > .wp-block-buttons {
  justify-self: end !important;
}