@charset "UTF-8";

/* =====================================================
WordPress 化にあたって追加したスタイル
（支給 CSS に無いページ・状態の補完と、表示パフォーマンス最適化）
※ 支給分は assets/css/style.css。このファイルはその後に読み込まれます。
===================================================== */

/* -----------------------------------------------------
common
----------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: var(--z-modal);
	width: auto;
	height: auto;
	margin: 0;
	padding: 1rem 1.6rem;
	clip: auto;
	clip-path: none;
	background: #fff;
	border: 1px solid var(--color-text);
}

/* -----------------------------------------------------
絞り込みフォーム（category-filter / event-filter）

支給 CSS の見た目をそのまま使いますが、選択状態はチェックボックスで持つため
:has() で装飾しています（JavaScript が無効でも選択状態が分かるようにするため）。
----------------------------------------------------- */

.event-filter__checkbox:has(input:focus-visible) {
	outline: 2px solid var(--color-main);
	outline-offset: 2px;
}

/* -----------------------------------------------------
article-head（詳細ページの見出し）
----------------------------------------------------- */

/* 分割ページ（<!--nextpage-->）のリンク。 */
.article-body__pages {
	margin-top: 3.2rem;
	font-weight: 700;
}

/* -----------------------------------------------------
article-body（本文）

見出し・リスト・表には inc/content.php がクラスを付与します。
ここでは、それ以外にエディターが出力しうる要素を補完します。
----------------------------------------------------- */

/* 本文中のリンク。
   ボタン（.button）と関連記事バナー（.banner-link__body）は、
   それぞれの見た目を持っているため対象から外します
   （外さないと、ボタンの文字が青くなり下線が付いてしまいます）。
   OST Smart Builder のブロック（ボタン・投稿カード・重要なお知らせ・バナー）と
   コアのボタンブロックも同じ理由で外します（見た目は下の「ブロックエディターのブロック」）。 */
.article-body__content a:not(.button, .banner-link__body, .btn, .wp-block-button__link, .list-item, .post-card, .info-alert-item, .banner-link) {
	color: var(--color-main);
	text-decoration: underline;
	text-underline-offset: .3rem;
}

.article-body__content img {
	max-width: 100%;
	height: auto;
	border-radius: .8rem;
}

.article-body__content figure img {
	width: 100%;
}

.article-body__content iframe,
.article-body__content video {
	max-width: 100%;
}

/* -----------------------------------------------------
article-side（右カラム）

フォーム枠（イベント／お役立ち資料）は支給デザインに無いため、
ウィジェット枠と同じ見た目に合わせています。
----------------------------------------------------- */

/* コンテンツ種別：アイコン画像を含む行全体をリンクにします。
   （アイコンには支給 CSS で pointer-events: none が指定されています） */
.article-side__nav-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* カスタム HTML 枠（「{種別}：カスタムHTML枠」ウィジェット）。
   ウィジェットを置いた場合は、プレースホルダーの灰色地と比率を解除します。 */
.article-side__banner:has(*) {
	display: block;
	aspect-ratio: auto;
	background: none;
}

/* イベント・お役立ち資料は、フォームの下にカスタム HTML 枠が並びます（仕様書 No.57・No.76）。 */
.article-layout__aside--event > * + .article-side__banner,
.article-layout__aside--whitepaper > * + .article-side__banner {
	margin-top: 2.4rem;
}

.article-side__banner + .article-side__banner {
	margin-top: 2.4rem;
}

.article-side__banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: .6rem;
}

.article-side__banner a {
	display: block;
	transition: opacity var(--transition);
}

@media (hover: hover) {
	.article-side__banner a:hover {
		opacity: .7;
	}
}

/* バナー画像1枚だけでなく、見出し・説明文・ボタン・リンク一覧を組み合わせても崩れないよう、
   よく使う要素の余白と大きさを決めています（README「カスタムHTML枠に貼り付ける HTML の例」）。 */
.article-side__banner > * + *,
.article-side__banner .article-side__box > * + * {
	margin-top: 1.2rem;
}

/* 白い枠（サイドメニューの .article-side__widgets と同じ見た目で、余白だけ詰めたもの）。 */
.article-side__banner .article-side__box {
	padding: 2.4rem;
	border-radius: 1rem;
	backdrop-filter: blur(10px) brightness(100%);
	background: rgba(255, 255, 255, .65);
	border: 1px solid #F7F7F7;
}

.article-side__banner p {
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	line-height: 1.9;
}

/* ボタンは枠幅いっぱいに伸ばします（.button の矢印の位置はそのまま）。 */
.article-side__banner .button {
	width: 100%;
	min-height: 5rem;
}

/* クラスを付けないリンク一覧は、区切り線つきで表示します。 */
.article-side__banner ul:not([class]) li {
	padding-block: .8rem;
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	border-bottom: 1px solid #EFEFEF;
}

.article-side__banner ul:not([class]) a {
	display: inline;
}

/* -----------------------------------------------------
埋め込みフォーム（Marketo / EventHub）

  - イベント・お役立ち資料の右カラム：各投稿の「フォームの埋め込みコード」
  - お問い合わせページなどの固定ページ：「フォームの埋め込みコード」欄（本文の <!-- form --> の位置）

Marketo はフォームの幅・ラベル幅・入力欄の幅を「インラインスタイル」で
書き込んでくるため（例：style="width: 1600px"）、そのままでは枠からはみ出します。
置いた場所の幅に収まるよう、ここで上書きします
（右カラム・本文のどちらにも効くよう .article-layout を起点にしています）。
----------------------------------------------------- */

/* 埋め込みが iframe の場合（EventHub など）。 */
.article-layout__aside iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* 埋め込みが script で生成される場合（Marketo）。 */
.article-layout .mktoForm {
	width: 100% !important;
	max-width: 100%;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.article-layout .mktoForm * {
	box-sizing: border-box;
}

/* 行・列は縦積みにします（ラベルを左に置くと幅が足りません）。 */
.article-layout .mktoForm .mktoFormRow,
.article-layout .mktoForm .mktoFormCol,
.article-layout .mktoForm .mktoFieldWrap,
.article-layout .mktoForm .mktoButtonRow,
.article-layout .mktoForm .mktoButtonWrap {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 桁合わせ用の空き（Marketo が入れる余白）は使いません。 */
.article-layout .mktoForm .mktoOffset,
.article-layout .mktoForm .mktoGutter,
.article-layout .mktoForm .mktoClear {
	display: none !important;
}

.article-layout .mktoForm .mktoLabel {
	display: block;
	width: 100% !important;
	float: none !important;
	margin-bottom: .6rem;
	font-weight: 700;
}

.article-layout .mktoForm .mktoField,
.article-layout .mktoForm input[type="text"],
.article-layout .mktoForm input[type="email"],
.article-layout .mktoForm input[type="tel"],
.article-layout .mktoForm input[type="url"],
.article-layout .mktoForm input[type="number"],
.article-layout .mktoForm textarea,
.article-layout .mktoForm select {
	width: 100% !important;
	max-width: 100% !important;
}

/* チェックボックス・ラジオは、入力欄の幅指定から外します。 */
.article-layout .mktoForm input[type="checkbox"],
.article-layout .mktoForm input[type="radio"] {
	width: auto !important;
}

.article-layout .mktoForm .mktoCheckboxList,
.article-layout .mktoForm .mktoRadioList {
	width: 100% !important;
	float: none !important;
}

.article-layout .mktoForm .mktoFormRow + .mktoFormRow {
	margin-top: 1.6rem;
}

.article-layout .mktoForm .mktoButtonRow {
	margin-top: 2.4rem;
	text-align: center;
}

/* 念のため、右カラムの中身は枠幅を超えないようにします。 */
.article-layout__aside > * {
	max-width: 100%;
}

/* ウィジェット（外観 > ウィジェット）の既定リスト。 */
.article-side__widget ul:not([class]) li {
	padding-block: .8rem;
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	border-bottom: 1px solid #EFEFEF;
}

/* -----------------------------------------------------
archive / entry（支給デザインに無いページ：検索・404・固定ページ）
----------------------------------------------------- */

.archive__inner,
.entry__inner {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 2rem;
}

.archive,
.entry {
	padding-block: 0 10rem;
}

@media (max-width: 768px) {
	.archive,
	.entry {
		padding-block: 0 6rem;
	}

	.archive__inner,
	.entry__inner {
		padding-inline: 1.6rem;
	}
}

.archive__result {
	margin-bottom: 2.4rem;
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	font-weight: 700;
}

.archive__list {
	margin-top: 1rem;
}

/* -----------------------------------------------------
filter（横断検索の絞り込みフォーム）
----------------------------------------------------- */

.filter {
	margin-bottom: 5rem;
	padding: 3rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.08);
}

.filter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	align-items: stretch;
}

.filter__keyword {
	flex: 1 1 28rem;
	display: flex;
}

.filter__keyword input {
	width: 100%;
	min-height: 5.6rem;
	padding: 0 1.6rem;
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	color: var(--color-text);
	background: #fff;
	border: 1px solid #cfd0d1;
	border-radius: .6rem;
}

.filter__keyword input:focus-visible {
	outline: 2px solid var(--color-main);
	outline-offset: 1px;
}

.filter__submit {
	flex: 0 0 auto;
	min-height: 5.6rem;
	min-width: 16rem;
	padding-inline: 2.4rem 4.4rem;
	border-radius: 999px;
	cursor: pointer;
}

.filter__group {
	margin-top: 2.4rem;
	padding-top: 2.4rem;
	border-top: 1px solid #e3e3e3;
}

.filter__label {
	display: block;
	margin-bottom: 1.2rem;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	font-weight: 700;
	color: var(--color-main);
}

.filter__items {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.6rem;
}

.filter__checkbox {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem 1.4rem;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	background: #fff;
	border: 1px solid #cfd0d1;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color var(--transition), color var(--transition);
}

.filter__checkbox:has(input:checked) {
	color: var(--color-main);
	border-color: var(--color-main);
	font-weight: 700;
}

.filter__checkbox input {
	accent-color: var(--color-main);
}

@media (max-width: 768px) {
	.filter {
		padding: 2rem;
		margin-bottom: 3.2rem;
	}

	.filter__submit {
		width: 100%;
	}
}

/* -----------------------------------------------------
entry（固定ページ・フォールバックの詳細）
----------------------------------------------------- */

.entry__layout {
	display: flex;
	align-items: flex-start;
	gap: 6rem;
}

.entry__layout--single {
	display: block;
}

.entry__main {
	flex: 1;
	min-width: 0;
	padding: 4rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.08);
}

.entry__layout--single .entry__main,
.entry__main--page {
	max-width: 96rem;
	margin-inline: auto;
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
}

.entry__date {
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	color: #777;
}

.entry__title {
	margin-top: 1.6rem;
	font-size: clamp(2.4rem, 1.9rem + 1.5vw, 4rem);
	font-weight: 700;
	line-height: 1.5;
}

.entry__thumb {
	margin-top: 3.2rem;
}

.entry__image {
	width: 100%;
	height: auto;
	border-radius: 1rem;
}

.entry__content {
	font-size: clamp(1.5rem, 1.44rem + 0.1875vw, 1.7rem);
	line-height: 2;
}

.entry__content > * + * {
	margin-top: 2.4rem;
}

.entry__content h2 {
	margin-top: 6rem;
	padding: 1.2rem 0 1.2rem 1.6rem;
	font-size: clamp(2rem, 1.8rem + 0.625vw, 2.8rem);
	line-height: 1.5;
	border-left: 6px solid var(--color-main);
}

.entry__content h3 {
	margin-top: 4.8rem;
	padding-bottom: .8rem;
	font-size: clamp(1.8rem, 1.7rem + 0.3125vw, 2.2rem);
	line-height: 1.6;
	border-bottom: 1px solid #cfd0d1;
}

.entry__content h4 {
	margin-top: 3.2rem;
	font-size: clamp(1.6rem, 1.56rem + 0.25vw, 2rem);
}

.entry__content a:not(.button, .banner-link__body, .btn, .wp-block-button__link, .list-item, .post-card, .info-alert-item, .banner-link) {
	color: var(--color-main);
	text-decoration: underline;
	text-underline-offset: .3rem;
}

.entry__content ul,
.entry__content ol {
	padding-left: 2.4rem;
}

.entry__content ul li {
	list-style: disc;
}

.entry__content ol li {
	list-style: decimal;
}

.entry__content img {
	max-width: 100%;
	height: auto;
	border-radius: .8rem;
}

.entry__content table {
	width: 100%;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
}

.entry__content th,
.entry__content td {
	padding: 1.2rem 1.6rem;
	border: 1px solid #cfd0d1;
	text-align: left;
}

.entry__content th {
	background: #f5f5f5;
}

.entry__pages {
	margin-top: 3.2rem;
	font-weight: 700;
}

@media (max-width: 1120px) {
	.entry__layout {
		flex-direction: column;
		gap: 4rem;
	}
}

@media (max-width: 768px) {
	.entry__main {
		padding: 2rem;
	}
}

/* -----------------------------------------------------
shortcode（本文中のリンク・バナー）
----------------------------------------------------- */

.shortcode-link {
	color: var(--color-main);
	text-decoration: underline;
	text-underline-offset: .3rem;
}

/* ショートコードは <aside class="banner-link"> を出力します。
   OST Smart Builder のバナーブロックも画像のリンクに a.banner-link を使うため、
   要素名まで指定して、バナー画像に枠・余白が付かないようにしています。 */
aside.banner-link {
	margin-block: 3.2rem;
	padding: 2rem;
	border: 1px solid #cfd0d1;
	border-radius: 1rem;
	background: #fff;
}

.banner-link__label {
	display: inline-block;
	margin-bottom: 1.2rem;
	padding: .2rem 1.6rem;
	font-size: clamp(1.1rem, 1.06rem + 0.125vw, 1.3rem);
	font-weight: 700;
	color: #fff;
	background: var(--smm-accent, var(--color-main));
	border-radius: 6px;
}

.banner-link__body {
	display: flex;
	align-items: center;
	gap: 2rem;
	transition: opacity var(--transition);
}

.banner-link__thumb {
	flex: 0 0 16rem;
	max-width: 16rem;
}

.banner-link__image {
	width: 100%;
	aspect-ratio: 37 / 24;
	object-fit: cover;
	border-radius: .6rem;
}

.banner-link__text {
	flex: 1;
	min-width: 0;
}

.banner-link__date {
	display: block;
	font-size: clamp(1.1rem, 1.06rem + 0.125vw, 1.3rem);
	color: #777;
}

.banner-link__title {
	display: block;
	margin-top: .4rem;
	font-size: clamp(1.5rem, 1.44rem + 0.1875vw, 1.8rem);
	font-weight: 700;
	line-height: 1.6;
}

@media (hover: hover) {
	.banner-link__body:hover {
		opacity: .7;
	}
}

@media (max-width: 768px) {
	.banner-link__thumb {
		flex-basis: 10rem;
		max-width: 10rem;
	}
}

/* -----------------------------------------------------
event status（カード上のラベル）
----------------------------------------------------- */

.card__thumb-badge.is-closed {
	background: #8a8a8a;
}

.card__thumb-badge.is-open {
	background: var(--color-main);
}

.card__thumb-badge.is-archive {
	background: var(--color-event);
}

/* -----------------------------------------------------
no results / 404
----------------------------------------------------- */

.no-results {
	padding: 6rem 2rem;
	text-align: center;
	background: rgba(255, 255, 255, .65);
	border-radius: 1rem;
}

.no-results__text {
	font-size: clamp(1.6rem, 1.52rem + 0.25vw, 2rem);
	font-weight: 700;
}

.no-results__note {
	margin-top: 1.2rem;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	color: var(--color-text3);
}

.no-results__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem 2.4rem;
	margin-top: 3.2rem;
	font-weight: 700;
}

.no-results__links a {
	text-decoration: underline;
	text-underline-offset: .3rem;
}

.no-results .filter {
	max-width: 60rem;
	margin: 3.2rem auto 0;
	text-align: left;
}

.no-results__link {
	margin-top: 3.2rem;
}

.no-results__link .button {
	border-radius: 999px;
}

/* =====================================================
表示パフォーマンス最適化
（スクロール時のカクつき対策。見た目はほぼ変わりません）
===================================================== */

/* -----------------------------------------------------
1. backdrop-filter の無効化

   backdrop-filter は「背後の描画結果をぼかす」処理のため、
   スクロールのたびに要素の数だけ再計算が走ります。
   一覧ページではカードが最大12枚並ぶため、これがカクつきの主因になります。
   背景の不透明度を上げることで、見た目を保ったまま処理を止めます。
   （1ページに1つしか無い絞り込み枠・右カラムは、支給デザインどおり blur のままです）
----------------------------------------------------- */

.card,
.pickup-card__link,
.header__trigger-wrap,
.no-results {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.card,
.pickup-card__link {
	background: rgba(255, 255, 255, .88);
}

/* guide-card（トップの GUIDE 4枚）は、上の 2 つの指定からあえて除外しています。
   カード内のイラストは z-index: -1 でカード背景の下に敷いているため、
   背景の不透明度を上げるとイラストが白く飛んで薄く見えてしまいます。
   トップに 4 枚だけでスクロール負荷への影響も小さいので、
   支給デザインどおり（半透明 .65 ＋ backdrop-filter: blur）のままにします。 */

.no-results {
	background: rgba(255, 255, 255, .92);
}

/* -----------------------------------------------------
2. 背景パターンを固定レイヤー化

   body の背景画像は background-size: 100% 100% のため、
   ページ全体の高さ（一覧ページでは1万px近く）まで引き伸ばして描画されます。
   bg-border.png は縦方向に変化のない縦線パターンなので、
   ビューポートサイズの固定レイヤーに置き換えても見た目は変わらず、
   描画コストだけが下がります。
----------------------------------------------------- */

body {
	background-image: none;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url(../img/common/bg-border.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

@media (max-width: 768px) {
	body::before {
		background-size: 230% 100%;
	}
}

/* -----------------------------------------------------
3. 画面外カードの描画を省略（取りやめ）

   以前は content-visibility: auto でカードの描画を省いていましたが、
   カードはグリッドの子要素のため、画面外の「仮の高さ」と実際の高さが違うと
   行の高さ・ページ全体の高さがスクロール中に変わり、動きがガクつきます。
   1ページ12枚なら省略する必要はないため、指定していません。

   もし件数を大きく増やす場合は、カードの高さを固定できることを確認したうえで
   contain-intrinsic-size に実寸を指定して有効にしてください。
----------------------------------------------------- */

/* -----------------------------------------------------
4. transition の対象を限定

   transition: all は、関係のないプロパティの変化でも再計算が走ります。
----------------------------------------------------- */

.card__image,
.more-link,
.footer__list a {
	transition-property: opacity, border-color;
}

/* -----------------------------------------------------
5. アニメーションの最適化
----------------------------------------------------- */

.guide-circle {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.guide-circle {
		animation: none;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
	}
}

/* -----------------------------------------------------
guide-card（トップ GUIDE：ボタンの位置を横並びのカードと揃える）

本文の行数が違ってもボタンの上端が揃うよう、カード内を縦フレックスにして
ボタンを下端に寄せます（同じ行のカードは高さが揃うため、位置も揃います）。
本文とボタンの間隔は支給デザインどおり最低 2.4rem（SP は 2rem）を確保します。
----------------------------------------------------- */

.guide-card {
	display: flex;
	flex-direction: column;
}

/* フレックスアイテム化で横幅いっぱいに伸びないようにします。 */
.guide-card__badge,
.guide-card__button {
	align-self: flex-start;
}

.guide-card__text {
	margin-bottom: 2.4rem;
}

.guide-card__button {
	margin-top: auto;
}

@media (max-width: 768px) {
	.guide-card__text {
		margin-bottom: 2rem;
	}
}

/* -----------------------------------------------------
product-card（フッター：カード全体をリンクにする）
----------------------------------------------------- */

a.product-card {
	color: inherit;
	text-decoration: none;
}

.product-card__body,
.product-card__text {
	display: block;
}

/* 矢印は支給 CSS の .product-card__link::after が描画するため、
   中身が空でも高さが潰れないように中央寄せにします。 */
.product-card__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ホバー時は色を変えず、カーソルがポインターになるだけにします。
   （style.css の .product-card__link:hover の不透明度も打ち消します） */
@media (hover: hover) {
	a.product-card:hover,
	a.product-card:hover .product-card__link,
	a.product-card .product-card__link:hover {
		opacity: 1;
	}
}

/* -----------------------------------------------------
searchform（ウィジェット用）
----------------------------------------------------- */

.searchform {
	display: flex;
	gap: .8rem;
}

.searchform__input {
	flex: 1;
	min-width: 0;
	min-height: 4.4rem;
	padding-inline: 1.2rem;
	border: 1px solid #cfd0d1;
	border-radius: .6rem;
}

.searchform__submit {
	padding-inline: 1.6rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	background: var(--color-dark);
	border-radius: .6rem;
}

/* =====================================================
カテゴリの表示カラー

ターム編集画面の「表示カラー」を、詳細ページの見出し下のカテゴリと
一覧ページ上部の注目枠のカテゴリバッジに反映します。
一覧のカードのカテゴリ名には反映しません。
（テンプレート側は、色が指定されているときだけ --smm-term-color を出力します）
===================================================== */

/* カード内のカテゴリ名（表示カラーは反映しません）。 */
.card__tag {
	color: var(--color-text3);
}

.card__tag:not(:last-child) {
	border-right-color: #cfd0d1;
}

/* 詳細ページの見出し下に並ぶカテゴリ。未指定の場合は支給デザインどおり。 */
.article-head__category[style*="--smm-term-color"] {
	color: var(--smm-term-color);
	border-color: var(--smm-term-color);
}

/*
 * 一覧ページ上部（注目のイベント／編集部おすすめの資料／注目のインタビュー）のカテゴリバッジ。
 * 未指定の場合は、白背景に白文字で見えなくならないよう、各投稿タイプのバッジと同じ色にします。
 * 支給 CSS のターム別クラス（--conference / --report / --automobile など）より優先させるため .badge を重ねています。
 */
.event-pickup-card__badge.badge {
	background: var(--smm-term-color, var(--color-event));
}

.whitepaper-pickup-card__badge.badge {
	background: var(--smm-term-color, var(--color-whitepaper));
}

.pickup-card__badge--category.badge {
	background: var(--smm-term-color, var(--color-interview));
}

/* =====================================================
カテゴリ未設定のカード

カテゴリ（コラムのテーマ／インタビューの業界など）が未設定の投稿はカテゴリの行が出ないため、
支給 CSS の .card__title の border-bottom だけが宙に浮いて、カードの中に線が1本残ります。
カテゴリの行が無いカードでは、その区切り線を消します。

カードによってタイトルとカテゴリの入れ子が違う（コラムは .card__body-sp を挟みます）ため、
カード本体にカテゴリの行があるかどうかで判定します。
===================================================== */

.card__body:not(:has(.card__tags)) .card__title {
	padding-bottom: 0;
	border-bottom: none;
}

/* =====================================================
背景の縦線（bg-border.png）とカードのすりガラス

body の背景は、html に背景が無いとルート（canvas）へ引き上げられて描画されます。
Firefox はこの canvas の背景を backdrop-filter のぼかし対象に含めないため、
カード（.card の rgba(255,255,255,.65) + backdrop-filter）越しに
背景の縦線がそのまま透けて、枠線のように見えてしまいます（Chrome は含めるため出ません）。
html 側に背景色を持たせると body が通常の要素として背景を描画するため、
Firefox でもぼかしの対象になります。
===================================================== */

html {
	background-color: #fff;
}

/* =====================================================
右カラム（サイドメニュー／フォーム）の追従

支給 CSS では追従がコメントアウトされているため、仕様書のとおりここで有効にします。
オフセットと指定内容は支給 CSS のコメント（style.css「追従を復活させる場合はコメントを外す」）と同じです。

**追従はすべて既定で OFF** です。投稿ごとに次の項目を ON にしたときだけ追従します。

- コラム　　　　　　　　… 「サイドメニューの追従」（仕様書 No.40・No.41）
- イベント・お役立ち資料… 「フォームの追従」（仕様書 No.55・No.74）
- インタビュー　　　　　… 右カラムそのものが既定で無いため対象外（仕様書 No.87）

右カラムが画面の高さより長い場合は、右カラムの中でスクロールします。
重なりを防ぐための実際の指定は、このファイル末尾「クライアント FB 対応」の No.116 にあります。
===================================================== */

/* サイドメニューを非表示にしたコラムは1カラムにします（仕様書 No.40）。 */
.article-layout--no-aside {
	grid-template-columns: 1fr;
	grid-template-areas:
		"main"
		"related";
}

/* インタビューは既定で1カラムですが、カスタム HTML 枠にウィジェットを置いた場合だけ
   右カラムを表示します（仕様書 No.87・No.90）。 */
.article-layout--interview.article-layout--has-aside {
	grid-template-areas:
		"main"
		"related"
		"aside";
}

@media (min-width: 769px) {
	.article-layout--interview.article-layout--has-aside {
		grid-template-columns: minmax(0, 870fr) minmax(0, 310fr);
		grid-template-areas:
			"main aside"
			"related related";
	}
}

/* =====================================================
旧サイトから移管したコンテンツ

旧サイト（aconnect.stockmark.co.jp / sat.stockmark.co.jp）の本文には、
旧サイトの CSS で見た目を作っていたクラス（person-header / download__desc-area など）と、
エディターが書き込んだインラインスタイルが含まれています。
インラインスタイルは「ツール > 移管ツール」で取り除けるため、
ここで旧サイトと同じ見た目を CSS 側に持たせます。
===================================================== */

/* -----------------------------------------------------
アイキャッチ画像（一覧のカード・詳細のメインビジュアル）

支給デザインは object-fit: cover（切り抜き）ですが、移管したアイキャッチは
文字入りのバナー画像が多く、切り抜くと文字が欠けてしまいます。
旧サイトと同じ object-fit: contain にして、枠の比率は保ったまま
画像全体が見えるようにします（画像サイズ側の切り抜きは inc/setup.php で解除しています）。
----------------------------------------------------- */

.card__image,
.pickup-card__image,
.event-pickup-card__image,
.whitepaper-pickup-card__image,
.interview-card__image,
.related-card__image {
	object-fit: contain;
}

.event-detail__hero img,
.article-body__hero img {
	object-fit: contain;
	background: #fff;
}

/* -----------------------------------------------------
登壇者プロフィール（.wp-block-lig-person / .person-header）

旧サイトの登壇者ブロックです。丸いプロフィール画像＋氏名・会社名・肩書きの並びを
旧サイトと同じ見た目に揃えます。
----------------------------------------------------- */

.article-body__content .person,
.article-body__content .wp-block-lig-person {
	max-width: 80rem;
	line-height: 2;
}

.article-body__content .person-header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0 0 2rem;
}

.article-body__content .person-img,
.article-body__content .icon-img {
	flex-shrink: 0;
	width: 8rem;
	height: 8rem;
	margin: 0 2.4rem 0 0;
}

.article-body__content .person-img.icon-img,
.article-body__content .icon-img {
	overflow: hidden;
	border-radius: 50%;
}

.article-body__content .person-img img,
.article-body__content .icon-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.article-body__content .person-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
	min-width: 0;
}

.article-body__content .person-info p,
.article-body__content .person-name,
.article-body__content .person-company {
	margin: 0;
	font-size: clamp(1.4rem, 1.34rem + 0.19vw, 1.6rem);
	font-weight: 800;
	line-height: 2;
}

/* 肩書き・説明文は .person-header の外へ出し（inc/content.php）、
   説明文として読ませるため太字にしません。 */
.article-body__content p.person-position {
	margin: 0;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	font-weight: 500;
	line-height: 1.9;
}

@media (max-width: 768px) {
	.article-body__content .person-img,
	.article-body__content .icon-img {
		width: 6.4rem;
		height: 6.4rem;
		margin-right: 1.6rem;
	}
}

/* -----------------------------------------------------
Q&A（details / summary）

旧サイトはインラインスタイルで作られていました。インラインを外しても
同じ見た目になるよう、Q（青）・A（赤）の色と回答の下の区切り線を CSS で持たせます。
マークアップは <details><summary><span>Q</span> 質問 <span>（矢印）</span></summary><p><span>A</span> 回答</p></details> です。
----------------------------------------------------- */

.article-body__content details {
	border-bottom: 2px solid #d6dde3;
}

.article-body__content details + details {
	margin-top: .5rem;
}

.article-body__content summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.6rem 3.2rem 1.6rem 4.8rem;
	font-size: clamp(1.5rem, 1.44rem + 0.19vw, 1.7rem);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.article-body__content summary::-webkit-details-marker {
	display: none;
}

.article-body__content details > p {
	position: relative;
	margin: 0;
	padding: .8rem 3.2rem 2.4rem 4.8rem;
}

/* Q・A の目印（旧サイトと同じ色）。 */
.article-body__content summary > span:first-child,
.article-body__content details > p > span:first-child {
	position: absolute;
	left: 1.6rem;
	font-size: 1.3em;
	font-weight: 600;
	line-height: inherit;
}

.article-body__content summary > span:first-child {
	color: #75bbff;
}

.article-body__content details > p > span:first-child {
	color: #ff8d8d;
}

/* 開閉の矢印（summary の2つめ以降の span）。 */
.article-body__content summary > span:first-child ~ span {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-left: 1rem;
	border-right: 3px solid rgba(51, 51, 51, .7);
	border-bottom: 3px solid rgba(51, 51, 51, .7);
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--transition);
}

.article-body__content details[open] summary > span:first-child ~ span {
	transform: translateY(25%) rotate(-135deg);
}

/* -----------------------------------------------------
お役立ち資料の「この資料でわかること」
（.download-left-container.format-2 / .download__desc-area）
----------------------------------------------------- */

.article-body__content .download__desc-area {
	margin: 0 0 6rem;
	padding: 2.6rem 3rem;
	background-color: #f2f2f2;
}

.article-body__content .download__desc__title {
	margin: 0 0 .6rem;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

/* 旧サイトの見出し色（.download__desc__title.color）。 */
.article-body__content .download__desc__title.color {
	color: #00917f;
}

.article-body__content .download__desc__text {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 2;
	letter-spacing: .08em;
}

@media (max-width: 768px) {
	.article-body__content .download__desc-area {
		margin-bottom: 4rem;
		padding: 0;
		background-color: transparent;
	}

	.article-body__content .download__desc__title {
		font-size: 1.4rem;
		text-align: left;
	}
}

/* -----------------------------------------------------
PC / SP の出し分け（.only-pc / .only-sp）

旧サイトのユーティリティクラスです。テーマの .u-pc / .u-sp と同じ切り替え位置
（768px / 769px）に揃えます。<br class="only-sp"> のように改行に付くことが多いため、
表示に戻すときは display を決め打ちせず revert でその要素本来の値に戻します。
----------------------------------------------------- */

.article-body__content .only-sp,
.smm-lp-body .only-sp {
	display: none;
}

@media (max-width: 768px) {
	.article-body__content .only-sp,
	.smm-lp-body .only-sp {
		display: revert;
	}

	.article-body__content .only-pc,
	.smm-lp-body .only-pc {
		display: none;
	}
}

/* -----------------------------------------------------
旧サイトの表の行（.detail-row）

開催概要などの表です。旧サイトでは行の下に罫線が引かれていました。
クラスが付いている表にはテーマの .article-body__table が当たらない
（inc/content.php はクラスが無い要素にだけ足します）ため、ここで罫線を持たせます。
----------------------------------------------------- */

.article-body__content tr.detail-row > th,
.article-body__content tr.detail-row > td,
.smm-lp-body tr.detail-row > th,
.smm-lp-body tr.detail-row > td {
	border-bottom: 1px solid var(--color-gray);
}

/* 表以外（<div class="detail-row"> など）で使われている場合。 */
.article-body__content .detail-row:not(tr),
.smm-lp-body .detail-row:not(tr) {
	border-bottom: 1px solid var(--color-gray);
}

/* 罫線が行ごとに途切れないよう、セルの間隔を詰めます。 */
.article-body__content table:has(tr.detail-row),
.smm-lp-body table:has(tr.detail-row) {
	border-collapse: collapse;
}

/* -----------------------------------------------------
旧サイトのリスト（.access-list など）

支給 CSS はリセットで ul / ol の list-style を none にしています
（マーカーは .article-body__list の ::before で描くため）。
旧サイトのクラスが付いたリストはその ::before が当たらず、中点が消えてしまうので戻します。
----------------------------------------------------- */

.article-body__content .access-list,
.smm-lp-body .access-list {
	padding-left: 2rem;
	list-style: disc;
}

.article-body__content .access-list > li,
.smm-lp-body .access-list > li {
	display: list-item;
	list-style: inherit;
}

/* -----------------------------------------------------
表の外へ出した補足（.program-note）

旧サイトでは表の中に書かれていた「※内容は変更になる場合があります」などの補足を、
表の直後へ移しています（inc/content.php の smm_move_program_note()）。
----------------------------------------------------- */

.article-body__content .program-note,
.smm-lp-body .program-note {
	margin-top: 1rem;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	line-height: 1.9;
	color: var(--color-text3);
}

/* -----------------------------------------------------
旧サイトの独自レイアウトのページ（.smm-imported-lp / .smm-lp-body）

AI資本経営フォーラム（/event/ai-capital-forum-2026/）のように、旧サイトで
1ページだけ独自に組まれた LP です。記事のフォーマットに収まらないため、
そのページ専用の CSS をそのまま持ち込み、.smm-imported-lp の中だけに効くように
閉じ込めています（構築ツール／importer/scrape.php の smm_import_scope_styles()）。

見た目は LP 側の CSS が持っているので、テーマ側ですることは2つだけです。

  1. 本文用の装飾を当てない
     … 本文を囲むクラスを .article-body__content から .smm-lp-body に変えます
       （inc/content.php の smm_article_content_class()）。
  2. 本文カラム（最大 780px）から出して、画面幅いっぱいで表示する

LP の背景色・文字色は、旧サイトの外枠（.contents-noSide）に当たっていたものを
取り込み時に .smm-imported-lp へ読み替えています。
取り込み済みのページで背景が白いままの場合は、「ツール > 移管ツール」の
「旧サイトのマークアップを整える」を実行してください。
----------------------------------------------------- */

/* 全幅にすると横スクロールバーが出るため、はみ出しは切り取ります。 */
.smm-lp-page {
	overflow-x: clip;
}

/*
 * 右カラム（申込フォーム）の幅を空けず、1カラムにします。
 * .article-layout が中央寄せになることで、下の margin-inline で全幅にできます。
 */
.smm-lp-page .article-layout--event,
.smm-lp-page .article-layout--whitepaper {
	grid-template-columns: 1fr;
	grid-template-areas:
		"main"
		"aside"
		"related";
}

.smm-lp-body {
	margin-top: 4rem;
}

/* width は旧サイトの外枠（.contents-noSide）から引き継ぐことがあるため、打ち消します。 */
.smm-lp-body .smm-imported-lp {
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/* =====================================================
目次（Table of Contents Plus）

プラグインの既定は行間が詰まっているため、本文に合わせて広げます。
プラグインは #toc_container に直接スタイルを当てるため、
クラスを1つ足して（.article-body__content #toc_container）優先度を上げています。
===================================================== */

#toc_container,
.article-body__content #toc_container {
	width: 100%;
	max-width: 100%;
	margin-block: 3.2rem;
	padding: 2.4rem 2.8rem;
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	line-height: 2;
	background: #F7F7F7;
	border: 1px solid #E3E3E3;
	border-radius: .8rem;
}

.article-body__content #toc_container p.toc_title,
#toc_container p.toc_title {
	margin: 0 0 1.6rem;
	font-size: clamp(1.5rem, 1.46rem + 0.125vw, 1.7rem);
	font-weight: 700;
	text-align: center;
}

.article-body__content #toc_container ul.toc_list,
#toc_container ul.toc_list {
	margin: 0;
	padding-left: 2rem;
	line-height: 2;
	list-style: disc;
}

.article-body__content #toc_container ul.toc_list li,
#toc_container ul.toc_list li {
	margin-bottom: 0;
	padding-block: .6rem;
	list-style: inherit;
}

.article-body__content #toc_container ul.toc_list li ul,
#toc_container ul.toc_list li ul {
	margin: 0;
	padding-left: 2rem;
	list-style: circle;
}

.article-body__content #toc_container a,
#toc_container a {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.article-body__content #toc_container a:hover,
	#toc_container a:hover {
		text-decoration: underline;
		text-underline-offset: .3rem;
	}
}

@media (max-width: 768px) {
	#toc_container,
	.article-body__content #toc_container {
		padding: 2rem;
	}
}

/* =====================================================
Marketo フォームの細部

上の「埋め込みフォーム」で幅を整えたうえで、
必須マーク・プレースホルダー・送信ボタンを旧サイトの見た目に合わせます。
Marketo は自前の CSS を後から読み込むため、打ち消しには !important が必要です。
===================================================== */

/* 固定ページの本文に差し込んだフォーム（「フォームの埋め込みコード」欄）。
   1カラムのページでは横に広がりすぎるため、読みやすい幅に収めて中央に置きます。 */
.smm-form {
	width: 100%;
	max-width: 60rem;
	margin-inline: auto;
}

/* 必須のアスタリスクは、Marketo の既定では項目名から離れて右端に回り込みます。
   項目名の直後（横）に並ぶよう、ラベルを flex にして順番を指定します。 */
.article-layout .mktoForm .mktoLabel {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
	width: 100% !important;
	float: none !important;
	margin-bottom: .6rem;
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	font-weight: 700;
	line-height: 1.6;
}

.article-layout .mktoForm .mktoAsterix {
	order: 2;
	float: none !important;
	padding: 0 !important;
	color: #E0002E;
	font-weight: 700;
}

/* 入力欄。プレースホルダーは日本語が長く、既定の文字サイズでは枠からはみ出します。
   （Marketo はチェックボックス・ラジオにも .mktoField を付けるため、そこは除きます） */
.article-layout .mktoForm .mktoField:not([type="checkbox"]):not([type="radio"]),
.article-layout .mktoForm input[type="text"],
.article-layout .mktoForm input[type="email"],
.article-layout .mktoForm input[type="tel"],
.article-layout .mktoForm input[type="url"],
.article-layout .mktoForm input[type="number"],
.article-layout .mktoForm textarea,
.article-layout .mktoForm select {
	height: auto !important;
	min-height: 4rem;
	padding: .6rem 1.2rem !important;
	font-family: inherit;
	font-size: 1.5rem !important;
	line-height: 1.6;
	color: var(--color-text);
	background: #fff;
	border: 1px solid #C2CFD5 !important;
	border-radius: .4rem;
	text-overflow: ellipsis;
}

.article-layout .mktoForm input::placeholder,
.article-layout .mktoForm textarea::placeholder {
	font-size: 1.3rem;
	color: #B5BEC3;
	opacity: 1;
}

.article-layout .mktoForm select {
	min-height: 4rem;
}

/* チェックボックス（個人情報保護方針への同意など）は
   「項目名 → 必須アスタリスク → チェックボックス」の順に並べます。 */
.article-layout .mktoForm .mktoFieldWrap:has(input[type="checkbox"]) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .8rem;
}

.article-layout .mktoForm .mktoFieldWrap:has(input[type="checkbox"]) .mktoLabel {
	order: 1;
	width: auto !important;
	margin-bottom: 0;
}

.article-layout .mktoForm .mktoFieldWrap:has(input[type="checkbox"]) .mktoLogicalField,
.article-layout .mktoForm .mktoFieldWrap:has(input[type="checkbox"]) .mktoCheckboxList {
	order: 2;
	width: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.article-layout .mktoForm input[type="checkbox"],
.article-layout .mktoForm input[type="radio"] {
	width: 1.8rem !important;
	min-width: 1.8rem;
	height: 1.8rem !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	accent-color: var(--color-main);
}

.article-layout .mktoForm .mktoCheckboxList label,
.article-layout .mktoForm .mktoRadioList label {
	margin-left: .6rem;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	font-weight: 500;
}

/* 送信ボタン（旧サイト：黒地・角丸25px・最小幅200px）。 */
.article-layout .mktoForm .mktoButtonWrap {
	margin: 0 !important;
}

.article-layout .mktoForm .mktoButtonRow .mktoButton,
.article-layout .mktoForm .mktoButton {
	display: inline-block;
	width: auto !important;
	min-width: 20rem;
	max-width: 100%;
	padding: 1.2rem 2.5rem !important;
	font-family: inherit;
	font-size: 1.6rem !important;
	font-weight: 600 !important;
	line-height: 1.5;
	color: #fff !important;
	background: #111 !important;
	background-image: none !important;
	border: none !important;
	border-radius: 2.5rem !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: opacity var(--transition);
}

@media (hover: hover) {
	.article-layout .mktoForm .mktoButton:hover {
		opacity: .8;
	}
}

/* エラー表示。 */
.article-layout .mktoForm .mktoError {
	right: auto !important;
	left: 0;
}

.article-layout .mktoForm .mktoError .mktoErrorMsg {
	font-size: 1.2rem;
}

/* =====================================================
終了したイベントのフォーム

旧サイト（.documentDownload-disabled）と同じく、フォームの上に半透明の膜を重ね、
中央に「このセミナーは終了しました」を表示します。
膜が操作を受け止めるため、フォームは押せなくなります。
===================================================== */

.article-side__form {
	/* 埋め込み側の余白（EventHub の #eh-root など）が枠の外へ抜けないようにします。 */
	display: flow-root;
	position: relative;
}

/*
 * Marketo のフォームは、フォーム側の設定で幅が直接指定されます（.mktoHtmlText の style="width: 700px" など）。
 * 右カラムより広いと枠からはみ出し、ページ全体に横スクロールが出るため、枠の幅に収めます。
 */
.article-side__form .mktoForm,
.article-side__form .mktoForm * {
	max-width: 100%;
}

.article-side__form--closed::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	border-radius: 1rem;
	background: rgba(0, 0, 0, .3);
}

.article-side__form-status {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;
	transform: translate(-50%, -50%);
	font-size: clamp(1.6rem, 1.5rem + 0.25vw, 2rem);
	font-weight: 700;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

/* 申し込みできないため、送信ボタンは隠します。 */
.article-side__form--closed .mktoButtonRow {
	display: none !important;
}

/* 入力できないようにします（inert が効かない古いブラウザ向けの保険）。 */
.article-side__form--closed .article-side__form-body {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* =====================================================
ブロックエディターのブロック

inc/content.php は class 属性の無い見出し・リスト・表にだけデザイン側のクラスを付けます。
ブロックエディターの見出し（class="wp-block-heading"）やリスト（class="wp-block-list"）、
OST Smart Builder のブロック内の見出しは class 付きで出力されるため、クラスが付かず素の表示になります。
ここではタグ・ブロックのクラスを基準に、支給デザインと同じ見た目を当てます。
===================================================== */

/* -----------------------------------------------------
アクセント色（見出しの下線・リストの点・カテゴリバッジなど）

投稿タイプごとの色を .article-layout から受け取ります。
（.article-layout の外＝固定ページでは、各指定の既定値が使われます）
----------------------------------------------------- */

.article-layout {
	--smm-content-accent: var(--color-column);
}

.article-layout--event {
	--smm-content-accent: var(--color-event);
}

.article-layout--interview {
	--smm-content-accent: var(--color-interview);
}

.article-layout--whitepaper {
	--smm-content-accent: var(--color-whitepaper);
}

/* -----------------------------------------------------
本文の見出し（h2〜h6）

見た目は style.css の .detail-heading / .article-body__heading--lv3〜5 と同じです。
ブロック内の見出し（投稿一覧の見出しなど）にも同じ見た目が付きます。
先頭の四角・縦線は、見出しの中に <strong> や <br> があっても崩れないよう
flex ではなく絶対配置で置いています。
----------------------------------------------------- */

.article-body__content h2,
.article-body__content h3,
.article-body__content h4,
.article-body__content h5,
.article-body__content h6 {
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text);
}

.article-body__content h2 {
	position: relative;
	padding-bottom: 1.6rem;
	font-size: clamp(2rem, 1.76rem + 0.65vw, 3rem);
	border-bottom: 4px solid #CFD0D1;
}

.article-body__content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 5.2rem;
	height: 4px;
	background: var(--smm-content-accent, var(--color-column));
}

.article-body__content h3 {
	position: relative;
	padding-left: 2.2rem;
	font-size: clamp(1.8rem, 1.65rem + 0.39vw, 2.4rem);
}

.article-body__content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(.75em - .7rem);
	width: 1.4rem;
	height: 1.4rem;
	background: var(--smm-content-accent, var(--color-column));
}

.article-body__content h4 {
	position: relative;
	padding-left: 1.2rem;
	font-size: clamp(1.7rem, 1.53rem + 0.45vw, 2.4rem);
}

.article-body__content h4::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(.75em - .9rem);
	width: 4px;
	height: 1.8rem;
	background: var(--smm-content-accent, var(--color-column));
}

.article-body__content h5 {
	font-size: clamp(1.6rem, 1.41rem + 0.52vw, 2.4rem);
}

.article-body__content h6 {
	font-size: clamp(1.5rem, 1.46rem + 0.125vw, 1.7rem);
}

/* 見出しの上の余白は、本文の直下に置いた見出しだけに付けます。
   ブロック内の見出しは、ブロック側の余白（見出しと本文を詰める）のままにします。 */
.article-body__content > :is(h2, h3, h4, h5, h6):not(:first-child) {
	margin-top: 8rem;
}

/* 見出しの下の余白（本文の .article-body__content > * + * と同じ 2.4rem）。
   ブロック内の見出し（投稿一覧・テキストなど）は、ブロック側の余白（8〜16px）のままだと詰まって見えます。
   見出しの下に付けて後ろの要素の上余白と相殺させるため、
   一覧・スライダーのように上を 4rem 以上空けている要素は狭くなりません。
   横並びブロックの見出しは、プラグインが強いセレクターで余白を指定しているため個別に書いています。
   既存の記事の見た目を変えないよう、支給デザインが見出しの下の余白を決めている次の 2 つは対象から外します。
     - ポイント枠のタイトル（.article-body__point-title：下 1.5rem）
     - 直後にリスト（.article-body__list：上 1.5rem）が来る見出し */
.article-body__content :is(h2, h3, h4, h5, h6):not(:last-child, .article-body__point-title, :has(+ .article-body__list)),
.article-body__content .ostsb-side-by-side .side-items .side-item-title:not(:last-child) {
	margin-bottom: 2.4rem;
}

@media (max-width: 768px) {
	.article-body__content h2::after {
		width: 3rem;
	}

	.article-body__content > h2:not(:first-child) {
		margin-top: 4.8rem;
	}

	.article-body__content > :is(h3, h4, h6):not(:first-child) {
		margin-top: 4rem;
	}

	.article-body__content > h5:not(:first-child) {
		margin-top: 5rem;
	}
}

/* -----------------------------------------------------
本文のリスト（リストブロック）

見た目は style.css の .article-body__list / --ordered と同じです。
入れ子のリストも同じ見た目で並べます。
----------------------------------------------------- */

.article-body__content .wp-block-list {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
}

.article-body__content .wp-block-list .wp-block-list {
	margin-top: .5rem;
}

.article-body__content .wp-block-list > li {
	position: relative;
	padding-left: 1.8rem;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
}

.article-body__content ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(.85em - .35rem);
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--smm-content-accent, var(--color-column));
}

.article-body__content ol.wp-block-list {
	counter-reset: smm-list;
}

.article-body__content ol.wp-block-list > li {
	padding-left: 2.6rem;
	counter-increment: smm-list;
}

.article-body__content ol.wp-block-list > li::before {
	content: counter(smm-list) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--color-text);
}

@media (max-width: 768px) {
	.article-body__content .wp-block-list > li {
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}
}

/* -----------------------------------------------------
本文の表（表ブロック）

見た目は style.css の .article-body__table と同じです。
（横スクロールのラッパーは inc/content.php が付けます）
----------------------------------------------------- */

.article-body__content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.article-body__content .wp-block-table th,
.article-body__content .wp-block-table td {
	padding: 1.6rem 2rem;
	font-size: clamp(1.6rem, 1.5rem + 0.26vw, 2rem);
	font-weight: 600;
	text-align: left;
	background-color: #fff;
	border: 1px solid var(--color-gray);
}

.article-body__content .wp-block-table th {
	font-weight: 700;
}

.article-body__content .wp-block-table figcaption {
	margin-top: 1.2rem;
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	color: var(--color-gray);
}

@media (max-width: 768px) {
	.article-body__content .wp-block-table th,
	.article-body__content .wp-block-table td {
		padding: .5rem;
		font-size: clamp(1.2rem, 1.3rem + 0.26vw, 2rem);
	}
}

/* -----------------------------------------------------
本文中のボタン（.button--round）

旧サイトから移管したボタン（「TOPへ戻る」など）に付けます。
支給デザインのトップの KV ボタン（.hero__button）と同じ丸型にし、
本文から少し離して置きたいので、上に余白を取ります。

色は .button--white（白地）／ .button--dark（濃いグレーの塗り）／
.button--contact（メインカラーの塗り）で切り替えます。
どのクラスに置き換えるかは smm_import_button_classes フィルターで変更できます。
----------------------------------------------------- */

.article-body__content .button--round {
	min-width: 24rem;
	max-width: 100%;
	min-height: 5.6rem;
	margin-top: 4rem;
	font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.6rem);
	border-radius: 999px;
}

@media (max-width: 768px) {
	.article-body__content .button--round {
		min-width: 0;
		min-height: 5rem;
		margin-top: 3.2rem;
	}
}

/* -----------------------------------------------------
ボタン（OST Smart Builder の .ostsb-btns .btn ／ コアのボタンブロック）

支給デザインの .button（矢印付き）に合わせ、角丸は検索ボタンなどと同じ丸型にします。
  - 既定・セカンダリ：白地に濃いグレーの線（一覧へ など）
  - プライマリ：メインカラーの塗り
----------------------------------------------------- */

.ostsb-btns .btn,
.article-body__content .wp-block-button__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24rem;
	max-width: 100%;
	min-height: 5.6rem;
	padding: 1rem 5.2rem 1rem 3.2rem;
	font-size: clamp(1.4rem, 1.32rem + 0.25vw, 1.6rem);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: var(--color-dark);
	background-color: #fff;
	border: 1px solid currentColor;
	border-radius: 999px;
	transition: opacity var(--transition);
}

.ostsb-btns .btn::after,
.article-body__content .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	width: 1.6rem;
	height: 1.1rem;
	background-color: currentColor;
	clip-path: polygon(0% 42%, 70% 42%, 70% 0%, 100% 50%, 70% 100%, 70% 58%, 0% 58%);
}

.ostsb-btns .btn--primary,
.article-body__content .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	color: #fff;
	background-color: var(--color-main);
	border-color: var(--color-main);
}

@media (hover: hover) {
	.ostsb-btns .btn:hover,
	.article-body__content .wp-block-button__link:hover {
		opacity: .7;
	}
}

@media (max-width: 767px) {
	.ostsb-btns .btn,
	.article-body__content .wp-block-button__link {
		min-height: 5rem;
		max-width: 32rem;
	}

	.ostsb-btns .btn::after,
	.article-body__content .wp-block-button__link::after {
		right: 1.5rem;
		width: 1.4rem;
		height: 1rem;
	}
}

/* -----------------------------------------------------
投稿一覧・投稿スライダー（OST Smart Builder）

カードは支給デザインの .card（白地・角丸・影）に合わせます。
2 つのブロックはクラス名が違うだけで中身は同じ構成です。
----------------------------------------------------- */

.ostsb-post-index .list {
	gap: 3.2rem 2.4rem;
}

.ostsb-post-index .list-item,
.ostsb-slider-post .post-card {
	overflow: hidden;
	color: var(--color-text5);
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #E3E3E3;
	border-radius: 1rem;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .06);
}

.ostsb-post-index .list-item-img,
.ostsb-slider-post .post-card-img {
	aspect-ratio: 37 / 24;
	margin-bottom: 0;
	background-color: #fff;
	border-bottom: 1px solid #EFEFEF;
	border-radius: 0;
}

.ostsb-post-index .list-item-img img,
.ostsb-slider-post .post-card-img img {
	border-radius: 0;
	transition: opacity var(--transition);
}

.ostsb-post-index .list-item-img--placeholder,
.ostsb-slider-post .post-card-img--placeholder {
	background-color: #F1F1F1;
}

.ostsb-post-index .list-item-img__site-name,
.ostsb-slider-post .post-card-img__site-name {
	font-weight: 700;
	color: var(--color-gray);
}

.ostsb-post-index .list-item-body,
.ostsb-slider-post .post-card-body {
	gap: .8rem;
	padding: 1.6rem 2rem 2rem;
}

.ostsb-post-index .list-item-date,
.ostsb-slider-post .post-card-date {
	font-size: clamp(1.1rem, 1.06rem + 0.125vw, 1.3rem);
	color: #777;
	opacity: 1;
}

.ostsb-post-index .list-item-cate,
.ostsb-post-index .list-item-tag,
.ostsb-slider-post .post-card-cate,
.ostsb-slider-post .post-card-tag {
	font-size: clamp(1.1rem, 1.06rem + 0.125vw, 1.3rem);
	font-weight: 700;
	line-height: 1.6;
	border-radius: 6px;
}

.ostsb-post-index .list-item-cate,
.ostsb-slider-post .post-card-cate {
	padding: .1rem 1.2rem;
	color: #fff;
	background-color: var(--smm-content-accent, var(--color-main));
}

.ostsb-post-index .list-item-tag,
.ostsb-slider-post .post-card-tag {
	padding: 0 1.1rem;
	color: var(--color-text3);
	background-color: #fff;
	border-color: #CFD0D1;
}

/* タイトルは支給デザインの .card__title と同じく 2 行で省略します。 */
.ostsb-post-index .list-item-text,
.ostsb-slider-post .post-card-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: clamp(1.5rem, 1.44rem + 0.1875vw, 1.8rem);
	font-weight: 600;
	line-height: 1.6;
	color: var(--color-text5);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ostsb-post-index .list-item-excerpt,
.ostsb-slider-post .post-card-excerpt {
	font-size: clamp(1.3rem, 1.26rem + 0.125vw, 1.5rem);
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-text3);
	opacity: 1;
}

@media (min-width: 768px) {
	.ostsb-post-index .list-item-text,
	.ostsb-slider-post .post-card-title {
		min-height: calc(1.6em * 2);
	}
}

@media (hover: hover) {
	.ostsb-post-index .list-item:hover .list-item-img img,
	.ostsb-slider-post .post-card:hover .post-card-img img {
		opacity: .7;
	}

	.ostsb-post-index .list-item:hover .list-item-text,
	.ostsb-slider-post .post-card:hover .post-card-title {
		text-decoration: underline;
		text-underline-offset: .3rem;
	}
}

/* SP で medium サイズを読み込むため、画像は <picture> で囲んでいます（inc/setup.php）。
   <picture> 自体は箱を作らず、画像が枠いっぱい（height: 100%）に収まるようにします。 */
.ostsb-post-index .list-item-img picture,
.ostsb-slider-post .post-card-img picture {
	display: contents;
}

/* -----------------------------------------------------
横並び（OST Smart Builder）

プラグインは PC で見出しに「2 行ぶんの最小の高さ」（18px × 行間 1.5 × 2 行 = 54px）を付けています。
横に並ぶカードの見出しの行数が違っても本文の開始位置を揃えるための指定ですが、
見出しの文字サイズはテーマの h タグの指定（最大 2.4rem）になるため、
1 行の見出しでは下が大きく空いてしまいます。ここで解除します。
（見出しの下の余白は、上の「本文の見出し」で 2.4rem にそろえています）
----------------------------------------------------- */

main .ostsb-side-by-side .side-item-title {
	min-height: 0;
}

/* -----------------------------------------------------
スライダーの前後ボタン・ページネーション（投稿スライダー／バナー）

プラグインは Swiper の要素に強めのセレクターを使っているため、
main を頭に付けて確実に上書きします（CSS の読み込み順に左右されないようにするため）。
----------------------------------------------------- */

/* カードの影がスライダーの端で切れないよう、内側に余白を取り、そのぶん外へ広げます。 */
main .ostsb-slider-post .post-slider-swiper {
	--ostsb-slider-pager-space: 5.2rem;
	margin-inline: -1.2rem;
	padding-top: 1.2rem;
	padding-inline: 1.2rem;
}

main .ostsb-slider-post .post-slider-swiper,
main .ostsb-slider-banner .banner-swiper {
	--swiper-pagination-color: var(--color-main);
	--swiper-pagination-bullet-inactive-color: #CFD0D1;
	--swiper-pagination-bullet-inactive-opacity: 1;
}

main .ostsb-slider-post .post-slider-swiper .swiper-button-prev,
main .ostsb-slider-post .post-slider-swiper .swiper-button-next,
main .ostsb-slider-banner .banner-swiper .swiper-button-prev,
main .ostsb-slider-banner .banner-swiper .swiper-button-next {
	--swiper-navigation-size: 1.4rem;
	width: 4.4rem;
	height: 4.4rem;
	color: var(--color-main);
	background-color: #fff;
	border: 1px solid #CFD0D1;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .12);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

@media (hover: hover) {
	main .ostsb-slider-post .post-slider-swiper .swiper-button-prev:hover,
	main .ostsb-slider-post .post-slider-swiper .swiper-button-next:hover,
	main .ostsb-slider-banner .banner-swiper .swiper-button-prev:hover,
	main .ostsb-slider-banner .banner-swiper .swiper-button-next:hover {
		color: #fff;
		background-color: var(--color-main);
		border-color: var(--color-main);
	}
}

@media (max-width: 767px) {
	main .ostsb-slider-post .post-slider-swiper .swiper-button-prev,
	main .ostsb-slider-post .post-slider-swiper .swiper-button-next,
	main .ostsb-slider-banner .banner-swiper .swiper-button-prev,
	main .ostsb-slider-banner .banner-swiper .swiper-button-next {
		--swiper-navigation-size: 1.2rem;
		width: 3.6rem;
		height: 3.6rem;
	}
}

/* -----------------------------------------------------
バナー（OST Smart Builder）
----------------------------------------------------- */

.ostsb-slider-banner .banner-link {
	transition: opacity var(--transition);
}

@media (hover: hover) {
	.ostsb-slider-banner .banner-link:hover {
		opacity: .7;
	}
}

/* -----------------------------------------------------
重要なお知らせ（OST Smart Builder）

白地の枠に「日付・カテゴリ・タイトル」を並べ、右端に支給デザインの矢印を置きます。
----------------------------------------------------- */

.ostsb-info-alert .info-alert-item {
	position: relative;
	gap: 1.6rem;
	padding: 1.8rem 5.6rem 1.8rem 2.4rem;
	color: var(--color-text);
	text-decoration: none;
	background-color: rgba(255, 255, 255, .92);
	border: 1px solid #CFD0D1;
	border-radius: 1rem;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .06);
	transition: opacity var(--transition);
}

.ostsb-info-alert .info-alert-item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2.4rem;
	transform: translateY(-50%);
	width: 1.4rem;
	height: .93rem;
	background-color: var(--smm-content-accent, var(--color-main));
	clip-path: polygon(0% 42%, 70% 42%, 70% 0%, 100% 50%, 70% 100%, 70% 58%, 0% 58%);
}

.ostsb-info-alert .info-alert-date {
	font-size: clamp(1.2rem, 1.16rem + 0.125vw, 1.4rem);
	font-weight: 700;
	color: #777;
	opacity: 1;
}

.ostsb-info-alert .info-alert-cate {
	padding: .1rem 1.2rem;
	font-size: clamp(1.1rem, 1.06rem + 0.125vw, 1.3rem);
	font-weight: 700;
	color: #fff;
	background-color: var(--smm-content-accent, var(--color-main));
	border-radius: 6px;
}

.ostsb-info-alert .info-alert-title {
	font-size: clamp(1.4rem, 1.36rem + 0.125vw, 1.6rem);
	font-weight: 700;
	line-height: 1.6;
}

@media (hover: hover) {
	.ostsb-info-alert .info-alert-item:hover {
		opacity: .7;
	}
}

@media (max-width: 767px) {
	.ostsb-info-alert .info-alert-item {
		gap: .4rem;
		padding: 1.4rem 4.4rem 1.4rem 1.6rem;
	}

	.ostsb-info-alert .info-alert-item::after {
		right: 1.6rem;
	}
}

/* =====================================================
クライアント FB 対応（仕様書_メディア No.101–130）

支給 CSS（style.css）に無い指定だけをここに置きます。
既存の宣言の値を変えただけのものは style.css 側を直接直しています。
===================================================== */

/* 会社情報など、別タブで開く外部リンクにアイコンを付けます（No.102）。
   「外観 > メニュー」で項目を入れ替えても、別タブ設定があれば自動で付きます。 */
.header__item a[target="_blank"]::after,
.footer__item a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .4em;
	vertical-align: -.1em;
	background-color: currentColor;
	/* 角丸の四角が2つ重なった形（別タブで開くことを示す一般的な記号）。 */
	clip-path: polygon(
		35% 0%, 100% 0%, 100% 65%, 78% 65%, 78% 22%, 35% 22%,
		35% 35%, 65% 35%, 65% 100%, 0% 100%, 0% 35%, 35% 35%
	);
}

/* お役立ち資料のカードだけタイトルが省略されないため、他のカードと同じ2行にします（No.109）。
   支給 HTML（whitepaper.html）はタイトルに span を持たないため、見出しへ直接あてます。 */
.whitepaper-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* インタビューカードの自由入力欄（プロフィール）も2行で省略します（No.127）。 */
.interview-card__company {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* 絞り込みのチェックボックス本体にもクリックカーソルを出します（No.112）。 */
.event-filter__checkbox input[type="checkbox"] {
	cursor: pointer;
}

/* 目次や本文内リンクでの移動先が、固定ヘッダーに隠れないようにします（No.115）。
   Table of Contents Plus の「スムーズスクロール」を有効にしている場合は
   プラグイン側の JavaScript が位置を決めるため、設定をオフにしてください。 */
.article-body__content h2,
.article-body__content h3,
.article-body__content h4,
.article-body__content h5,
.event-detail__section h2,
.event-detail__section h3 {
	scroll-margin-top: calc(var(--header-height) + 2rem);
}

/* 目次を閉じて開き直したとき、プラグインが幅を内容に合わせて縮めるため固定します（No.129）。 */
#toc_container,
.article-body__content #toc_container {
	width: 100% !important;
	max-width: 100% !important;
}

/* 詳細ページはファーストビューの情報量を増やすため、見出し下の余白を詰めます（No.123）。
   一覧ページは style.css 側の 5.5rem（No.111）のままです。 */
.single .inner-page .page-header {
	margin-bottom: 3rem;
}

/* 終了したイベントのフォームは、枠の余白部分までマスクをかけます（No.119）。
   右カラム（.article-layout__aside--event / --whitepaper）の padding 分だけ外へ広げます。 */
.article-side__form--closed::before {
	inset: -2.8rem;
	border-radius: 1rem;
}

@media (max-width: 768px) {
	.article-side__form--closed::before {
		inset: -2.4rem -2rem;
	}
}

/* 追従する右カラムが、下の「関連コンテンツ」に重ならないようにします（No.116）。

   grid のアイテムをそのまま sticky にすると、動ける範囲が「自分の行」ではなく
   grid 全体になるため、下の関連コンテンツの行まで移動して重なります。
   そこで右カラム自体は行の高さいっぱいに広げて動かさず、
   中身（.article-side）を追従させます。 */
@media (min-width: 769px) {
	.article-layout--sticky-aside .article-layout__aside {
		align-self: stretch;
	}

	.article-layout--sticky-aside .article-side {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
		/* 画面より長い右カラムは下端が読めなくなるため、中でスクロールさせます。 */
		max-height: calc(100vh - var(--header-height) - 4rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* 枠の見た目（白背景・枠線・内側の余白）は、行いっぱいに伸びないよう
	   追従する中身の側へ移します（イベント・お役立ち資料）。 */
	.article-layout--sticky-aside .article-layout__aside--event,
	.article-layout--sticky-aside .article-layout__aside--whitepaper {
		padding: 0;
		background: none;
		border: 0;
	}

	.article-layout--sticky-aside .article-layout__aside--event .article-side,
	.article-layout--sticky-aside .article-layout__aside--whitepaper .article-side {
		padding: 2.8rem;
		border-radius: 1rem;
		background: #fff;
		border: 1px solid #CECECE;
	}
}

/* イベント・セミナー詳細のうち「ヘッダー・フッターなし」テンプレートは
   本文だけを表示するため、上下の余白を詰めます（No.125）。 */
.is-plain .article-layout {
	padding-block: 4rem 6rem;
}

/* 関連コンテンツを出さないため、grid の「related」行を作りません（No.125）。
   行が残ると、その分の row-gap がページ下部の余白として残ります。 */
.is-plain .article-layout {
	grid-template-areas:
		"main"
		"aside";
}

@media (min-width: 769px) {
	.is-plain .article-layout {
		grid-template-areas: "main aside";
	}
}

/* 右カラムが無いときは「main」だけにします。
   「main aside」のままだと、空の右カラムと column-gap の分だけ本文が左に寄ります。 */
.is-plain .article-layout.article-layout--no-aside {
	grid-template-columns: 1fr;
	grid-template-areas: "main";
}

/* 旧サイトから移管した LP は、LP 側で余白を持っているため上下の余白を付けません。 */
.is-plain.smm-lp-page .article-layout--no-aside {
	gap: 0;
	padding-block: 0;
}

.is-plain .smm-lp-body {
	margin-top: 0;
}

/* 本文中の画像は中央に置きます（FB No.133）。 */
.article-body__content img {
	margin-inline: auto;
}

/* インライン要素のままでは margin-inline が効かないため、単独行の画像はブロックにします。 */
.article-body__content > p > img:only-child,
.article-body__content > img {
	display: block;
}