/**
 * 実績リスト — cabf/works-list
 *
 *   Webサイト制作 … トップの WORKS と同じ（SWELL の投稿リスト p-postList -type-card）。叩き台（design-v2）から写したルール
 *   動画編集・アプリ開発 … 同じ形のカード（.cabf-wcard。ファイルの最後。オーナーの見本の画像に合わせた。v1.4.6〜）
 *     叩き台の service-video.html・service-tools.html の形（v1.4.5 まで）は使わなくなったので、そのルールは消した
 *
 * ■ 作り方
 * 叩き台のページをブラウザで開き、実績の部分に効いている CSS ルールを1つずつ調べて写した（2026-10-15）。
 * マークアップ（クラス名）も叩き台と同じなので、サイトに同じ CSS があればそれも同じように効く。
 *
 * ■ 範囲と強さ
 * 元のルールの、ブロックの外にある祖先（#cabf-top・.post_content・.-sidebar-off・.swell-block-fullWide__inner）を、
 * 同じ強さで「このブロックの中」だけに当たる形に置き換えている。
 *   #cabf-top          → :is(.cabf-works-scope, #cabf-works-scope)      （ID 1つ分の強さ）
 *   .post_content など → :is(.cabf-works-scope, .cabf-works-scope-x)    （クラス1つ分の強さ）
 *   祖先の無いルール   → :where(.cabf-works-scope) を前に付ける          （強さは変えない）
 * #cabf-works-scope・.cabf-works-scope-x は使っていない名前（強さをそろえるためだけのもの）。
 * これで、ルール同士の強さの関係と順番は叩き台と同じになり、ほかのセクションには触らない。
 *
 * 叩き台の CSS を変えたときは、ここも合わせて直すこと。
 */

/* いちばん外側の div。公開画面では箱を作らない（置いた場所のレイアウトをそのまま使う） */
.cabf-works-scope:not(.block-editor-block-list__block) {
	display: contents;
}

/* 叩き台で親（#cabf-top・SWELL の本文）から受け継いでいた文字の設定と、使っている変数 */
.cabf-works-scope {
	--color_link: #1176d4;
	--swl-list-padding--left: 1.5em;
	--color_htag: #006cd8;
	--_harmonic-sequence-base: 8;
	--_font-size-level: 0;
	--_line-height-slope: -0.16666;
	--_half-leading: 0.3;
	--_min-harmonic-sequence-base: 9;
	--_max-harmonic-sequence-base: 8;
	--ink: #11141c;
	--cyan: #77d8ff;
	--detail-blue: #326fce;
	--card_posts_thumb_ratio: 56.25%;
	--color_gradient1: #d8ffff;
	--color_gradient2: #87e7ff;
	--color_main: #006cd8;
	color: rgb(17, 20, 28);
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: normal;
	text-align: start;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* ───── ここから、叩き台の CSS から写したルール（順番もそのまま） ───── */

:where(.cabf-works-scope:where(.is-design-web, .is-design-video)) :where(figure) {
	margin: 0px 0px 1em;
}

:where(.cabf-works-scope:where(.is-design-web)) [class*=" icon-"]::before {
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	font-family: icomoon !important;
}

:where(.cabf-works-scope:where(.is-design-web)) .icon-posted::before {
	content: "\e931";
}

:where(.cabf-works-scope) * {
	margin: 0px;
	padding: 0px;
}

:where(.cabf-works-scope) * {
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

:where(.cabf-works-scope) ::after,
:where(.cabf-works-scope) ::before {
	box-sizing: inherit;
	text-decoration: inherit;
	vertical-align: inherit;
}

:where(.cabf-works-scope) :where(ul:not([type])) {
	list-style: none;
}

:where(.cabf-works-scope) img {
	border-style: none;
	height: auto;
	max-width: 100%;
}

:where(.cabf-works-scope:where(.is-design-video)) video {
	outline: none;
}

:where(.cabf-works-scope:where(.is-design-video)) svg:not([fill]) {
	fill: currentcolor;
}

:where(.cabf-works-scope:where(.is-design-video)) [hidden] {
	display: none;
}

:where(.cabf-works-scope:where(.is-design-video)) button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

:where(.cabf-works-scope:where(.is-design-video)) button {
	overflow: visible;
}

:where(.cabf-works-scope:where(.is-design-video)) button {
	text-transform: none;
}

:where(.cabf-works-scope:where(.is-design-video)) [type="button"],
:where(.cabf-works-scope:where(.is-design-video)) button {
	appearance: button;
	cursor: pointer;
	display: inline-block;
}

:where(.cabf-works-scope:where(.is-design-video)) button {
	background-color: rgb(247, 247, 247);
	border: 1px solid rgba(199, 199, 199, 0.5);
	border-radius: 0px;
	color: rgb(51, 51, 51);
	padding: 0.25em 0.5em;
}

:where(.cabf-works-scope:where(.is-design-video)) [aria-controls] {
	cursor: pointer;
}

:where(.cabf-works-scope) a {
	color: var(--color_link);
}

:where(.cabf-works-scope:where(.is-design-web)) .c-postThumb {
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}

:where(.cabf-works-scope:where(.is-design-web)) .c-postThumb__figure {
	margin: 0px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 0;
}

:where(.cabf-works-scope:where(.is-design-web)) .c-postThumb__figure::before {
	content: "";
	display: block;
	height: 0px;
	padding-top: var(--card_posts_thumb_ratio);
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__link:hover .c-postThumb::before {
	opacity: 0.2;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__link:hover .c-postThumb__img {
	transform: scale(1.06);
}

:where(.cabf-works-scope:where(.is-design-web)) .c-postThumb__img {
	left: 0px;
	position: absolute;
	top: 0px;
	transition: transform 0.25s, -webkit-transform 0.25s;
}

:where(.cabf-works-scope:where(.is-design-web)) .c-postTimes {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

:where(.cabf-works-scope:where(.is-design-web)) .c-postTimes__posted::before {
	margin-right: 0.325em;
	position: relative;
	top: 1px;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postListWrap {
	position: relative;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList.p-postList {
	list-style: none;
	margin-bottom: 0px;
	padding-left: 0px;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList.-type-card {
	display: flex;
	flex-wrap: wrap;
	margin-left: -0.5em;
	margin-right: -0.5em;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__item.p-postList__item::before {
	content: none;
}

:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__item {
	margin-bottom: 2.5em;
	margin-top: 0px;
	padding: 0px 0.5em;
	width: 50%;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__link {
	color: inherit;
	display: block;
	position: relative;
	text-decoration: none;
	z-index: 0;
}

:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__link {
	height: 100%;
}

:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__thumb {
	width: 100%;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__thumb::before {
	background: linear-gradient(45deg,var(--color_gradient1),var(--color_gradient2));
	content: "";
	display: block;
	height: 100%;
	left: 0px;
	opacity: 0;
	position: absolute;
	top: 0px;
	transition: opacity 0.25s;
	width: 100%;
	z-index: 1;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__body {
	position: relative;
	transition: opacity 0.25s;
}

:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__body {
	padding-top: 1em;
}

:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__item:hover .p-postList__body {
	opacity: 0.75;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__link:hover .p-postList__body::after {
	background: var(--color_main);
	box-shadow: none;
	color: rgb(255, 255, 255);
	opacity: 1;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList .p-postList__title {
	background: none;
	border: none;
	color: inherit;
	display: block;
	font-weight: 700;
	line-height: 1.5;
	margin: 0px;
	padding: 0px;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList .p-postList__title::after,
:where(.cabf-works-scope:where(.is-design-web)) .p-postList .p-postList__title::before {
	content: none;
}

:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__title {
	font-size: 3.6vw;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__excerpt {
	line-height: 1.5;
}

:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__excerpt {
	font-size: 3.2vw;
	margin-top: 0.5em;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 10px;
	line-height: 1.25;
	margin-top: 0.75em;
	position: relative;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__meta ::before {
	margin-right: 0.25em;
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__times {
	margin-right: 0.5em;
	padding: 4px 0px;
}

:where(.cabf-works-scope:where(.is-design-web)) .u-thin {
	opacity: 0.8;
}

:where(.cabf-works-scope:where(.is-design-web)) .u-obf-cover {
	display: block;
	object-fit: cover;
	height: 100% !important;
	width: 100% !important;
}

:is(.cabf-works-scope, .cabf-works-scope-x) div > :first-child,
div:is(.cabf-works-scope, .cabf-works-scope-x) > :first-child {
	margin-top: 0px !important;
}

:is(.cabf-works-scope, .cabf-works-scope-x) div > :last-child,
div:is(.cabf-works-scope, .cabf-works-scope-x) > :last-child {
	margin-bottom: 0px !important;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), .cabf-works-scope-x) h3 {
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.4;
	margin: 3em 0px 2em;
	position: relative;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), .cabf-works-scope-x) h3::before {
	bottom: 0px;
	display: block;
	left: 0px;
	position: absolute;
	z-index: 0;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), .cabf-works-scope-x) h3 {
	font-weight: 700;
}

:is(.cabf-works-scope:where(.is-design-video), .cabf-works-scope-x) small {
	font-size: 0.8em;
	opacity: 0.8;
}

:is(.cabf-works-scope, .cabf-works-scope-x) :where(ul:not([type])) {
	list-style: disc;
}

:is(.cabf-works-scope, .cabf-works-scope-x) ul {
	padding-left: var(--swl-list-padding--left);
}

:is(.cabf-works-scope, .cabf-works-scope-x) li {
	line-height: 1.5;
	margin: 0.25em 0px;
	position: relative;
}

:is(.cabf-works-scope:where(.is-design-web), .cabf-works-scope-x) > * {
	margin-bottom: 2em;
}

:where(.cabf-works-scope) li::before {
	letter-spacing: normal;
}

@media (min-width: 600px) {
	:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__title {
		font-size: 16px;
	}
}

@media (min-width: 600px) {
	:where(.cabf-works-scope:where(.is-design-web)) .-type-card .p-postList__excerpt {
		font-size: 13px;
	}
}

@media (min-width: 600px) {
	:where(.cabf-works-scope:where(.is-design-web)) .p-postList__meta {
		font-size: 11px;
	}
}

@media (min-width: 600px) {
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), .cabf-works-scope-x) h3 {
		font-size: 1.3em;
	}
}

@media not all and (min-width: 600px) {
	:where(.cabf-works-scope:where(.is-design-web)) .-type-card.-sp-col1 .p-postList__item {
		width: 100%;
	}
}

@media not all and (min-width: 600px) {
	:where(.cabf-works-scope:where(.is-design-web)) .-type-card.-sp-col1 .p-postList__title {
		font-size: 3.8vw;
	}
}

@media (min-width: 960px) and (max-width: 1019px) {
	:is(.cabf-works-scope:where(.is-design-web), .cabf-works-scope-x) .-type-card.-pc-col3 .p-postList__item {
		padding: 0px 0.75em;
	}
}

@media (min-width: 1020px) {
	:is(.cabf-works-scope:where(.is-design-web), .cabf-works-scope-x) .-type-card.-pc-col3 .p-postList__item {
		width: 33.3333%;
	}
}

:where(.cabf-works-scope:where(.is-design-web)) .p-postList__thumb {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px, rgba(0, 0, 0, 0.1) 0px 4px 4px -4px;
}

:where(.cabf-works-scope) * {
	--_font-size: calc(var(--_harmonic-sequence-base)/(var(--_harmonic-sequence-base) - var(--_font-size-level))*1rem);
	--_line-height: clamp(1.1, var(--_line-height-slope) * calc(var(--_harmonic-sequence-base)/(var(--_harmonic-sequence-base) - var(--_font-size-level))) + 1 + 2 * var(--_half-leading) + -1 * var(--_line-height-slope), 2 * var(--_half-leading) + 1);
	--_fluid-font-size: clamp(1rem * calc(var(--_min-harmonic-sequence-base)/(var(--_min-harmonic-sequence-base) - var(--_font-size-level))), calc((var(--_max-harmonic-sequence-base)/(var(--_max-harmonic-sequence-base) - var(--_font-size-level))/57.5*-22.5 - var(--_min-harmonic-sequence-base)/(var(--_min-harmonic-sequence-base) - var(--_font-size-level))/57.5*-22.5 + var(--_min-harmonic-sequence-base)/(var(--_min-harmonic-sequence-base) - var(--_font-size-level)))*1rem + (var(--_max-harmonic-sequence-base)/(var(--_max-harmonic-sequence-base) - var(--_font-size-level))/57.5 - var(--_min-harmonic-sequence-base)/(var(--_min-harmonic-sequence-base) - var(--_font-size-level))/57.5)*100vw), 1rem * calc(var(--_max-harmonic-sequence-base)/(var(--_max-harmonic-sequence-base) - var(--_font-size-level))));
	box-sizing: border-box;
}

:where(.cabf-works-scope) ::after,
:where(.cabf-works-scope) ::before {
	box-sizing: inherit;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, thead, tbody, tr, th, td, caption, blockquote, figure, figcaption, img, a, strong, em, b, small, time, details, summary, hr, button):where(.cabf-d, .cabf-d *) {
	margin: revert;
	padding: revert;
	border: revert;
	border-radius: revert;
	background: revert;
	color: revert;
	font-size: revert;
	font-weight: revert;
	line-height: revert;
	letter-spacing: revert;
	text-align: revert;
	position: revert;
	z-index: revert;
	list-style: revert;
	width: revert;
	max-width: revert;
	height: revert;
	clear: revert;
	box-shadow: revert;
	text-decoration: revert;
	vertical-align: revert;
	display: revert;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :is(h1, h2, h3, h4, h5, h6, li, blockquote):where(.cabf-d, .cabf-d *)::before,
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :is(h1, h2, h3, h4, h5, h6, li, blockquote):where(.cabf-d, .cabf-d *)::after {
	content: revert;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :where(.cabf-d, .cabf-d *),
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :where(.cabf-d, .cabf-d *)::before,
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :where(.cabf-d, .cabf-d *)::after {
	box-sizing: border-box;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) img:where(.cabf-d, .cabf-d *) {
	display: block;
	max-width: 100%;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) a:where(.cabf-d, .cabf-d *) {
	color: inherit;
	text-decoration: none;
}

:is(.cabf-works-scope:where(.is-design-video), #cabf-works-scope) button:where(.cabf-d, .cabf-d *) {
	font: inherit;
}

:is(.cabf-works-scope:where(.is-design-video), #cabf-works-scope) button:where(.cabf-d, .cabf-d *) {
	cursor: pointer;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :where(.cabf-d, .cabf-d *)::selection {
	background: rgb(180, 221, 255);
	color: var(--ink);
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :focus-visible:where(.cabf-d, .cabf-d *) {
	outline: 3px solid var(--cyan);
	outline-offset: 4px;
}

:is(.cabf-works-scope:where(.is-design-video), #cabf-works-scope) [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :where(.cabf-d, .cabf-d *),
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :where(.cabf-d, .cabf-d *)::before,
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :where(.cabf-d, .cabf-d *)::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .web-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0px;
	margin: -1px !important;
}

/* ───────── 追加（叩き台に無いもの） ─────────
 * Webサイト制作のカードは、カード全体を1つのリンクにせず、サムネイル・タイトル（実績のリンク先）と
 * タグ（タグの一覧ページ）を別々のリンクにしている。叩き台と同じ見た目になるよう、リンクの色・下線を消す。
 * テーマの本文のリンク・ul の飾り（SWELL の .post_content a・.post_content ul など）より強くするため、ID 1つ分の強さにしている */
/* サムネイルの拡大（ホバー）。SWELL と同じく 0.25 秒で 1.06 倍。
 * ホバーを外して縮み終わった瞬間に、画像の描き方が切り替わって（動いている間だけ別の層で描かれ、終わると
 * ページに描き直される。そのとき位置が 1px 未満ずれる）「ガタッ」と見えるので、
 * - ずっと同じ層で描く（will-change）
 * - ふだんも 1.001 倍（幅 400px で 0.4px。目では分からない）にしておき、拡大なしには戻さない
 * の2つで防ぐ（どちらか片方だけでは残った。v1.4.9〜） */
:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .c-postThumb__img {
	transform: scale(1.001);
	will-change: transform;
}

:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .p-postList__link:hover .c-postThumb__img {
	transform: scale(1.06);
}

:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .cabf-works-title-link {
	display: block; /* タイトルの行全体を押せるように（カード全体がリンクだったころと近い押しやすさ） */
	color: inherit;
	text-decoration: none;
}

:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .web-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	margin: -1px !important;
}

/* タグにマウスを乗せたときは、カードの動き（サムネイルの拡大・色・文字の薄まり）を出さない（押すと実績ではなくタグの一覧へ行くため） */
:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .p-postList__link:has(.cabf-works-terms a:hover) .c-postThumb__img {
	transform: scale(1.001);
}

:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .p-postList__link:has(.cabf-works-terms a:hover) .c-postThumb::before {
	opacity: 0;
}

:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .p-postList__item:has(.cabf-works-terms a:hover) .p-postList__body {
	opacity: 1;
}

/* ───────── 動画編集・アプリ開発のカード（v1.4.6〜） ─────────
 * 上にサムネイル（押すと実績の詳細ページ）、その下にカテゴリー（押すとカテゴリーの一覧）・
 * タイトル・説明文（抜粋）・リンクの枠（外部リンクがあるときだけ）。オーナーの見本の画像（PC の2列で幅 584px）に合わせた。
 * PC は2列、スマホ（760px 以下）は1列。同じ行のカードは高さをそろえ、リンクの枠はカードの下にそろえる */
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	margin: 0;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard {
	position: relative; /* カード全体のリンク（.cabf-works-stretch::after）の範囲 */
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	border: 1px solid rgb(225, 232, 243);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	box-shadow: rgba(34, 64, 110, 0.04) 0 8px 28px;
}

/* サムネイル（16:9。はみ出す部分は切る） */
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgb(237, 242, 249);
	color: inherit;
	text-decoration: none;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-media img {
	display: block;
	width: 100% !important;
	max-width: none;
	height: 100% !important;
	margin: 0;
	object-fit: cover;
	transform: scale(1.001); /* Webサイト制作と同じく、ホバーを外したときの「ガタッ」を防ぐ（2行とも） */
	will-change: transform;
	transition: transform 0.25s;
}

/* ホバーしたときの色（Webサイト制作のサムネイルと同じ、サイトのグラデーションを薄く重ねる） */
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(45deg, var(--color_gradient1), var(--color_gradient2));
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard:hover .cabf-wcard-media::before {
	opacity: 0.2;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-media.is-contain {
	background: linear-gradient(140deg, rgb(243, 247, 254), rgb(228, 237, 250));
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-media.is-contain img {
	object-fit: contain;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard:hover .cabf-wcard-media img {
	transform: scale(1.06);
}

/* カテゴリー・リンクの枠にマウスを乗せたときは、カードの動きを出さない（押すと実績ではなく別の所へ行くため） */
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard:has(.cabf-works-chip:hover, .cabf-wcard-link:hover) .cabf-wcard-media img {
	transform: scale(1.001);
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard:has(.cabf-works-chip:hover, .cabf-wcard-link:hover) .cabf-wcard-media::before {
	opacity: 0;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, rgb(243, 247, 254), rgb(228, 237, 250));
	color: rgb(124, 152, 190);
	font: 11px / 1 Arial, sans-serif;
	letter-spacing: 0.2em;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 28px 29px 25px;
}

/* タイトル（見出しのタグではなく div。念のため、テーマの飾りが付いても消す） */
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-title {
	position: static;
	margin: 20px 0 10px !important;
	padding: 0;
	border: 0;
	background: none;
	color: rgb(36, 52, 76);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-title:first-child {
	margin-top: 0 !important;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-title::before,
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-title::after {
	content: none;
}

/* 説明文（抜粋） */
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-text {
	margin: 0 !important;
	color: rgb(122, 136, 156);
	font-size: 13px;
	line-height: 2;
}

/* リンクの枠（外部リンク。カードの下にそろえる） */
:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-foot {
	margin-top: auto;
	padding-top: 32px;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-link {
	position: relative;
	z-index: 3; /* カード全体のリンクの上に重ねて、別に押せるように */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 17px 12px 19px;
	border: 1px solid rgb(217, 228, 243);
	border-radius: 12px;
	background: rgb(242, 246, 252);
	color: rgb(80, 114, 163);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.8;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-link:hover {
	border-color: rgb(186, 207, 238);
	background: rgb(233, 241, 252);
	color: rgb(36, 89, 189);
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgb(231, 238, 248);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .web-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	margin: -1px !important;
}

@media (max-width: 760px) {
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcards {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-body {
		padding: 24px 22px 22px;
	}
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-title {
		font-size: 19px;
	}
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-wcard-foot {
		padding-top: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) :is(.cabf-wcard-media img, .cabf-wcard-media::before, .cabf-wcard-link) {
		transition: none;
	}
}

/* chips:start ─────── タグ・カテゴリー（Webサイト制作のタグ・動画編集とアプリ開発のカテゴリー。同じ見た目。v1.4.10〜） ───────
 * 案C「白い枠＋点」: 白地に細い水色の枠の丸い札。先頭にサイトの水色→青のグラデーションの点。文字は太字。
 * 点と文字は、枠の上下の中央（v1.4.11〜。.cabf-works-chip__label の text-box）。
 * 押せるもの（タグ・カテゴリーの一覧ページへ）は、ホバーで枠と文字が青くなる。
 * テーマの箇条書きの飾り（SWELL の .post_content ul・li::before の点など）より強くするため、ID 1つ分の強さにしている */
:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0 !important;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chips li {
	display: flex;
	position: static;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chips li::marker {
	content: none;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chips li::before {
	content: none;
	position: static;
	display: inline;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chip {
	position: relative;
	z-index: 3; /* カード全体のリンク（.cabf-works-stretch）の上に重ねて、札だけ別に押せるように */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 11px 8px 9px;
	line-height: 1;
	border: 1px solid rgb(214, 226, 244);
	border-radius: 100px;
	background: #fff;
	color: rgb(60, 98, 160);
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chip::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: linear-gradient(135deg, #77d8ff, var(--detail-blue));
}

:is(.cabf-works-scope, #cabf-works-scope) a.cabf-works-chip:hover {
	border-color: var(--detail-blue);
	background: rgb(244, 248, 255);
	color: var(--detail-blue);
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chip__label {
	display: block;
	line-height: 1;
	/* 文字の箱を「大文字の上〜文字の並ぶ線」に切りそろえて、枠の上下の中央に置く（フォントの上下の余白の差に左右されない）。
	 * 和文も、ほぼ同じ高さの中央に来る */
	text-box: trim-both cap alphabetic;
}

/* text-box を使えないブラウザ（2026 年秋の Firefox など）: 行の高さで中央に寄せる（フォントによって 1px 未満ずれることがある） */
@supports not (text-box: trim-both cap alphabetic) {
	:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chip {
		padding: 4px 11px 4px 9px;
	}
	:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chip__label {
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-chip {
		transition: none;
	}
}
/* chips:end */

/* タグ・カテゴリーの置き場所（見た目は上の chips） */
:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .cabf-works-terms {
	margin-top: 8px !important;
}

/* ───────── カード全体をリンクに（v1.4.11〜） ─────────
 * リンクの中にリンクは入れられないので、タイトルのリンク（.cabf-works-stretch）の当たり判定（::after）をカード全体に広げる。
 * タグ・カテゴリー（.cabf-works-chip）・リンクの枠（.cabf-wcard-link）は z-index: 3 で、その上に重ねて別に押せる。
 * 読み上げ・キーボードでは、タイトルのリンク1つ（同じ先のリンクが2回並ばない） */
:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-stretch {
	color: inherit;
	text-decoration: none;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-stretch:focus-visible {
	outline: none;
}

:is(.cabf-works-scope, #cabf-works-scope) .cabf-works-stretch:focus-visible::after {
	outline: 2px solid var(--detail-blue);
	outline-offset: 3px;
}

:is(.cabf-works-scope:where(.is-design-video, .is-design-app), #cabf-works-scope) .cabf-works-stretch:focus-visible::after {
	border-radius: 20px;
	outline-offset: -2px;
}

/* Webサイト制作: カード（.p-postList__link。SWELL で position: relative）全体に広げるため、途中の本文の箱は基準にしない */
:is(.cabf-works-scope:where(.is-design-web), #cabf-works-scope) .p-postList__body {
	position: static;
}

/* サムネイルはリンクの下になるので、マウスの当たり判定を素通りさせる
 *（ホバー中に本文が薄くなる（opacity）と重なりの順が変わり、サムネイルの色の重ねが上に来てしまうため） */
:is(.cabf-works-scope, #cabf-works-scope) :is(.p-postList__thumb, .cabf-wcard-media) {
	pointer-events: none;
}

/* 編集画面のプレビューでは、押してもページを移らない（ブロックを選べるように） */
.editor-styles-wrapper .cabf-works-scope a,
.block-editor-block-list__block .cabf-works-scope a {
	pointer-events: none;
}