@charset "UTF-8";
/*!
 * BIKODO — 制作実績ページ専用スタイル（一覧 + 詳細）
 *
 * トークン・リセット・共通パーツ（コンテナ、見出し、タグ、ボタン、
 * ページ見出し .bkd-page-hero、実績カード .bkd-wgrid / .bkd-wcard など）は
 * assets/css/bkd-common.css を参照してください
 * （functions.php 側で bkd-common.css の後に読み込まれる前提です）。
 *
 * 対象テンプレート:
 *   - page-templates/template-works.php（一覧）
 *   - single-works.php（詳細）
 */

/* ==========================================================================
   0. 色とフォント（現行サイトに合わせる）
   ==========================================================================
   新デザインの標準トークン（bkd-common.css）はモノトーン寄りですが、
   このページはサイトの他ページと並んだときに浮かないよう、
   現行サイト（legacy.css）と同じ色・同じフォントに上書きしています。

     背景        #f5f5f5（現行サイトの薄グレー）
     文字        #333
     罫線        #bdbebe / #e4e4e4
     アクセント  #0091FF（現行サイトのボタン・CTA帯と同じ青）
     英字        proxima-nova（見出し）
     和字        source-han-sans-japanese

   フォントは Adobe Fonts（Typekit）で全ページ読み込み済みのものです。
   読み込みに失敗した場合は Poppins / Noto Sans JP にフォールバックします。
   ========================================================================== */

.bkd-root {
	--bkd-bg: #f5f5f5;
	--bkd-bg-soft: #fff;
	--bkd-white: #fff;

	--bkd-ink: #333;
	--bkd-ink-2: #555;
	--bkd-ink-3: #8b8b8b;
	--bkd-ink-4: #bdbebe;

	--bkd-line: #e4e4e4;
	--bkd-line-2: #efefef;

	--bkd-accent: #0091FF;
	--bkd-accent-ink: #0091FF;

	--bkd-font-en: "proxima-nova", "Poppins", "Helvetica Neue", Arial, sans-serif;
	--bkd-font-jp: "source-han-sans-japanese", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--bkd-font: var(--bkd-font-en), var(--bkd-font-jp);
}

/* 見出しの英字は、現行サイトと同じ太さ（proxima-nova 800）に */
.bkd-root .bkd-shead__en,
.bkd-root .bkd-page-hero__title {
	font-weight: 800;
}

.bkd-root .bkd-page-hero {
	background: linear-gradient(180deg, #fff 0%, #fafafa 55%, var(--bkd-bg) 100%);
}

/* ボタンは現行サイトと同じく「白地＋黒枠 → hoverで青」 */
.bkd-root .bkd-btn--dark {
	background: transparent;
	border: 1px solid var(--bkd-ink);
	color: var(--bkd-ink);
}

.bkd-root .bkd-btn--dark:hover {
	background: var(--bkd-accent);
	border-color: var(--bkd-accent);
	color: #fff;
	box-shadow: none;
}

/* ==========================================================================
   1. ページ見出し
   ==========================================================================
   【この見出しの考え方】
   実績写真を敷き詰めた壁を地にして、その上に見出しを置いています。
   美工堂の強みは1点の傑作ではなく「領域の広さと量」なので、
   何十点もの制作物が視界を埋めていること自体がメッセージになります。

   ・ぼかしは2px
     強くかけると「何の会社の実績ページなのか」が伝わらない、ただの模様になります。
     何が写っているか判別できる程度に留めています。
   ・色面は薄いグレーの霞（#f2f3f5）
     濃いグレーで覆うと重くなるので、薄く霞ませています。
     ページ全体は
       薄グレー（ここ）→ 白（対応領域）→ 薄グレー（一覧）→ 青（お問い合わせ）
     と、トップページと同じ明るい面だけで進みます。
     写真の色みもそのまま透けるので、サイト全体の明るいトーンとも揃います。
   ========================================================================== */

.bkd-works-hero.has-wall {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(360px, 40vw, 540px);
	padding-block: clamp(48px, 5.5vw, 88px);
	overflow: hidden;
	background: #f2f3f5;
	color: var(--bkd-ink);
}

/* --- 実績写真の壁 --- */

.bkd-works-wall {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bkd-works-wall__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-auto-rows: minmax(120px, 1fr);
	height: 100%;
	/* ぼかしで縁が透けないよう、少し大きく描いて外側を切り落とします */
	transform: scale(1.03);
	/*
	 * ぼかしは2pxだけ。
	 * 強くかけると「何の会社の実績ページなのか」が伝わらない、ただの模様になります。
	 * 何が写っているか判別できる程度に留め、文字の可読性は上の霞で確保します。
	 * 霞をかけると色が沈むので、彩度は少し上げておきます。
	 */
	filter: blur(2px) saturate(1.12);
}

.bkd-works-wall__grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 写真の上に重ねる霞。
 * 純白ではなく、わずかに寒色へ振った薄いグレー（#f2f3f5）です。
 * 下の実績一覧の地（#f5f5f5）と同系なので、ページとして一続きに見えます。
 *
 * 全体に均一な霞をかけると、文字は読めても写真が何なのか分からなくなります。
 * そこで文字が乗る左側だけ濃く（93%）残し、
 * 右へいくほど一気に薄くして（右端28%）、そちら側では作品が見えるようにしています。
 * 60%あたりから急に薄くなる配分なので、文字の背後は最後まで安全です。
 */
.bkd-works-wall__tint {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			rgba(242, 243, 245, .95) 0%,
			rgba(242, 243, 245, .93) 38%,
			rgba(242, 243, 245, .74) 58%,
			rgba(242, 243, 245, .42) 78%,
			rgba(242, 243, 245, .28) 100%),
		linear-gradient(180deg, rgba(242, 243, 245, .2) 0%, rgba(242, 243, 245, 0) 34%, rgba(245, 245, 245, .42) 100%);
}

/* --- 見出し ---------------------------------------------------------------
   英字を主役にして、日本語は読み仮名のように小さく添えています。
   英字は proxima-nova 800 の字面が強いので、これくらいの大きさで
   はじめて写真の壁に負けません。
   ------------------------------------------------------------------------- */

.bkd-works-hero.has-wall .bkd-works-hero__text {
	position: relative;
	z-index: 1;
}

.bkd-works-hero__h1 {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bkd-works-hero__en {
	display: flex;
	font-family: var(--bkd-font-en);
	font-size: clamp(38px, 4.4vw, 68px);
	font-weight: 800;
	letter-spacing: .015em;
	line-height: .95;
	color: var(--bkd-ink);
}

/*
 * 読み込み時、文字が1文字ずつ下からせり上がります。
 * 外側の span が覗き窓で、内側の span が下に隠れた状態から上がってきます。
 * 印刷物の版がめくれるような動きで、繰り返しはしません（1回出たら止まります）。
 */
.bkd-works-hero__char {
	display: inline-block;
	overflow: hidden;
	/* 覗き窓の下端に少し余裕を持たせ、文字の下が切れないようにします */
	padding-bottom: .08em;
}

.bkd-works-hero__char > span {
	display: inline-block;
	transform: translateY(110%);
	animation: bkd-char-rise .85s cubic-bezier(.16, 1, .3, 1) forwards;
	animation-delay: calc(var(--i, 0) * .06s);
}

@keyframes bkd-char-rise {
	to {
		transform: translateY(0);
	}
}

.bkd-works-hero__ja {
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	color: var(--bkd-ink-3);
}

.bkd-works-hero .bkd-page-hero__lead {
	max-width: 62ch;
	margin-top: clamp(18px, 2vw, 26px);
}

/*
 * 見出しに続いて、添え字・リード文・件数がわずかに遅れて浮かび上がります。
 * ばらばらに動かすと落ち着かないので、上から順に一続きの流れにしています。
 */
.bkd-works-hero__ja,
.bkd-works-hero .bkd-page-hero__lead,
.bkd-works-hero__count {
	opacity: 0;
	animation: bkd-hero-fade .7s ease forwards;
}

.bkd-works-hero__ja {
	animation-delay: .34s;
}

.bkd-works-hero .bkd-page-hero__lead {
	animation-delay: .44s;
}

.bkd-works-hero__count {
	animation-delay: .54s;
}

@keyframes bkd-hero-fade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* 動きを減らす設定の方には、最初から表示された状態で見せます */
@media (prefers-reduced-motion: reduce) {
	.bkd-works-hero__char > span,
	.bkd-works-hero__ja,
	.bkd-works-hero .bkd-page-hero__lead,
	.bkd-works-hero__count {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* --- 件数 --- */

.bkd-works-hero__count {
	display: flex;
	align-items: baseline;
	gap: .5em;
	margin-top: clamp(20px, 2.4vw, 32px);
}

.bkd-works-hero__num {
	font-family: var(--bkd-font-en);
	font-size: clamp(34px, 3.6vw, 52px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--bkd-accent);
	font-variant-numeric: tabular-nums;
}

.bkd-works-hero__unit {
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--bkd-ink-3);
}

/* ==========================================================================
   2. 対応領域
   ========================================================================== */

/*
 * 地は白です。
 *
 * 以前はこの節だけ #333 の暗い面にしてページに区切りを作っていましたが、
 * トップページには黒い面がフッター以外に無く、
 * 「白 → 薄グレー → 青」の明るい面だけで進んでいきます。
 * そちらの雰囲気に合わせて、ここも明るい面に戻しました。
 *
 * 区切りは色の濃さではなく、
 *
 *   ヒーロー（薄グレー #f2f3f5）→ 対応領域（白）→ 実績一覧（薄グレー #f5f5f5）→ お問い合わせ（青）
 *
 * の交互と、境目のうねり（18. のwave）で付けています。
 * トップページも section ごとに白と薄グレーが交互になり、
 * 境目が波の形になっているので、並べたときに同じリズムに見えます。
 */
.bkd-fields {
	position: relative;
	padding-block: clamp(56px, 7vw, 110px);
	background: var(--bkd-white);
	--bkd-wave: var(--bkd-white);
}

/* カラム数は画面幅ごとに指定します（自動計算に任せると、
   環境によっては1カラムに畳まれてしまうことがあるため）。 */
.bkd-fields__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(16px, 1.8vw, 28px);
	margin-top: clamp(24px, 3vw, 44px);
}

@media (min-width: 620px) {
	.bkd-fields__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bkd-fields__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1400px) {
	.bkd-fields__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --- カード本体 ------------------------------------------------------------
   領域ごとに色を持たせ（--field-color）、マウスを乗せるとその色に染まります。
   色はテンプレート側から style 属性で渡しています。

   ※ 以前は、染まると同時にその領域の作品写真（--field-img）が背景に
     薄く浮かび上がる作りでしたが、写真が透ける見え方はやめました。
     指定は残してあるので、テンプレート側で写真を渡せばまた出ます
     （template-works.php の $bkd_field_img）。
   ------------------------------------------------------------------------- */

.bkd-field__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 300px;
	padding: clamp(24px, 2.4vw, 34px);
	border-radius: var(--bkd-radius-lg);
	background: var(--bkd-white);
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s ease, box-shadow .35s ease, color .35s ease;
}

/* 上端の色帯。ホバーでカード全体に広がります */
.bkd-field__link::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--field-color, var(--bkd-accent));
	transition: height .4s cubic-bezier(.22, .61, .36, 1);
	z-index: -2;
}

.bkd-field__link:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
	color: #fff;
}

.bkd-field__link:hover::before {
	height: 100%;
}

/* 代表画像。通常は隠れていて、ホバーで薄く出ます */
.bkd-field__media {
	position: absolute;
	inset: 0;
	background-image: var(--field-img, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .45s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
	z-index: -1;
	mix-blend-mode: multiply;
}

.bkd-field__link.has-image:hover .bkd-field__media {
	opacity: .35;
	transform: scale(1);
}

/* 通し番号 */
.bkd-field__no {
	position: absolute;
	top: clamp(16px, 1.6vw, 22px);
	right: clamp(18px, 1.8vw, 26px);
	font-family: var(--bkd-font-en);
	font-size: clamp(34px, 3.4vw, 52px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--field-color, var(--bkd-accent));
	opacity: .18;
	transition: opacity .35s ease, color .35s ease;
}

.bkd-field__link:hover .bkd-field__no {
	color: #fff;
	opacity: .5;
}

.bkd-field__body {
	display: block;
}

.bkd-field__en {
	display: block;
	font-family: var(--bkd-font-en);
	font-size: clamp(22px, 1.9vw, 30px);
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.1;
	color: inherit;
}

/* 見出しの下の色線 */
.bkd-field__en::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-top: 12px;
	border-radius: 2px;
	background: var(--field-color, var(--bkd-accent));
	transition: background-color .35s ease, width .35s ease;
}

.bkd-field__link:hover .bkd-field__en::after {
	width: 64px;
	background: #fff;
}

.bkd-field__lead {
	display: block;
	margin-top: 14px;
	font-family: var(--bkd-font-jp);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.6;
	color: var(--field-color, var(--bkd-accent));
	transition: color .35s ease;
}

.bkd-field__link:hover .bkd-field__lead {
	color: #fff;
}

.bkd-field__desc {
	display: block;
	margin-top: clamp(12px, 1.2vw, 16px);
	font-family: var(--bkd-font-jp);
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--bkd-ink-2);
	transition: color .35s ease;
}

.bkd-field__link:hover .bkd-field__desc {
	color: rgba(255, 255, 255, .92);
}

/* --- 下段のリンク行 --- */

.bkd-field__more {
	display: flex;
	align-items: center;
	gap: .7em;
	margin-top: auto;
	padding-top: clamp(18px, 1.8vw, 26px);
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	font-weight: 700;
	color: inherit;
}

.bkd-field__more-txt {
	white-space: nowrap;
}

.bkd-field__count {
	display: grid;
	place-items: center;
	min-width: 32px;
	height: 22px;
	padding-inline: 8px;
	border-radius: var(--bkd-radius-pill);
	background: var(--bkd-bg);
	font-family: var(--bkd-font-en);
	font-size: 11px;
	font-weight: 800;
	color: var(--bkd-ink-2);
	transition: background-color .35s ease, color .35s ease;
}

.bkd-field__link:hover .bkd-field__count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

.bkd-field__arrow {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-left: auto;
	border-radius: 50%;
	border: 1px solid var(--bkd-line);
	color: var(--field-color, var(--bkd-accent));
	transition: border-color .35s ease, background-color .35s ease, color .35s ease, transform .35s ease;
}

.bkd-field__arrow svg {
	width: 16px;
	height: 16px;
}

.bkd-field__link:hover .bkd-field__arrow {
	border-color: #fff;
	background: #fff;
	color: var(--field-color, var(--bkd-accent));
	transform: translateX(3px);
}

/* タッチ操作の端末ではホバーが無いので、色帯を少し太めに出しておきます */
@media (hover: none) {
	.bkd-field__link::before {
		height: 8px;
	}
}

/* ==========================================================================
   3. 絞り込みタブ
   ========================================================================== */

.bkd-works-archive {
	position: relative;
	padding-block: clamp(48px, 6vw, 96px) var(--bkd-section-y);
	scroll-margin-top: 24px;
	/* 地はページの地（#f5f5f5）そのままなので、うねりも同じ色です */
	background: var(--bkd-bg);
	--bkd-wave: var(--bkd-bg);
}

.bkd-filter {
	margin-top: clamp(20px, 2.4vw, 32px);
}

.bkd-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bkd-filter__item {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: 9px 20px;
	border: 1px solid var(--bkd-line);
	border-radius: var(--bkd-radius-pill);
	background: var(--bkd-white);
	font-family: var(--bkd-font-en);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1.4;
	color: var(--bkd-ink-2);
	white-space: nowrap;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.bkd-filter__item:hover {
	border-color: var(--bkd-ink-4);
	color: var(--bkd-ink);
}

/*
 * 選択中は青（#0091FF）で塗ります。
 * トップページのボタンが「白地＋黒枠 → 触ると青」なので、
 * 「いま選ばれているもの＝青」という見え方をページ間でそろえています。
 */
.bkd-filter__item.is-current {
	background: var(--bkd-accent);
	border-color: var(--bkd-accent);
	color: #fff;
}

.bkd-filter__count {
	font-size: 11px;
	font-weight: 600;
	color: var(--bkd-ink-3);
	transition: color .25s ease;
}

.bkd-filter__item.is-current .bkd-filter__count {
	color: rgba(255, 255, 255, .7);
}

.bkd-filter__result {
	margin-top: clamp(18px, 2vw, 28px);
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--bkd-ink-3);
}

/* ==========================================================================
   4. 実績の並べ方
   ==========================================================================
   カードの大きさは全部そろえます。
   写真の比率がばらばら（縦長のポスター、横長の空間写真、WEBサイトの
   スクリーンショットなど）なので、そのまま並べると列の高さが不揃いになり、
   一覧としてとても見づらくなります。

   ただし、そろえるために切り抜くことはしません。
   デザイン物は構図が切れると価値が伝わらないためです。
   枠の大きさだけ固定し、中の画像は「切らずに収める」（object-fit: contain）
   ことで、大きさの統一と作品の保護を両立させています。

   余った部分は薄いグレーの台紙になります。白地の作品でも輪郭が分かるよう、
   台紙は白ではなく少しだけ濃くしています。
   ========================================================================== */

.bkd-works-archive .bkd-wgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 26px);
	margin-top: clamp(20px, 2.4vw, 36px);
}

@media (min-width: 768px) {
	.bkd-works-archive .bkd-wgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1400px) {
	.bkd-works-archive .bkd-wgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bkd-works-archive .bkd-wcard {
	display: flex;
	flex-direction: column;
}

/* --- 画像の枠 --- */

.bkd-works-archive .bkd-wcard__thumb {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	padding: clamp(10px, 1vw, 16px);
	border-radius: var(--bkd-radius);
	background: #f0f1f3;
	box-shadow: none;
	overflow: hidden;
}

/* 切り抜かず、枠の中に収まるように縮小します */
.bkd-works-archive .bkd-wcard__thumb img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.bkd-works-archive .bkd-wcard__link:hover .bkd-wcard__thumb img {
	transform: scale(1.03);
}

/* --- カード下のテキスト --- */

.bkd-works-archive .bkd-wcard__body {
	padding-top: 14px;
}

/* タイトルの長さでカードの高さがずれないよう、2行で打ち切ります */
.bkd-works-archive .bkd-wcard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ==========================================================================
   5. カードの追加要素
   ========================================================================== */

/* 写真が複数あることを示すバッジ */
.bkd-wcard__more {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 4px 10px;
	border-radius: var(--bkd-radius-pill);
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-family: var(--bkd-font-en);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.4;
	backdrop-filter: blur(2px);
}

.bkd-wcard__excerpt {
	margin-top: 8px;
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	line-height: 1.85;
	color: var(--bkd-ink-2);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ==========================================================================
   6. ページ送り
   ========================================================================== */

.bkd-pager {
	margin-top: clamp(40px, 5vw, 72px);
}

.bkd-pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.bkd-pager__list .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--bkd-line);
	border-radius: var(--bkd-radius-xs);
	background: var(--bkd-white);
	font-family: var(--bkd-font-en);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--bkd-ink-2);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.bkd-pager__list a.page-numbers:hover,
.bkd-pager__list .page-numbers.current {
	background: var(--bkd-ink);
	border-color: var(--bkd-ink);
	color: #fff;
}

.bkd-pager__list .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--bkd-ink-4);
}

.bkd-pager__list .prev,
.bkd-pager__list .next {
	font-family: var(--bkd-font-jp);
	font-size: 13px;
}

/* ==========================================================================
   7. 該当なし
   ========================================================================== */

.bkd-empty {
	margin-top: clamp(32px, 4vw, 56px);
	padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 40px);
	border: 1px dashed var(--bkd-line);
	border-radius: var(--bkd-radius);
	background: var(--bkd-bg-soft);
	text-align: center;
	font-family: var(--bkd-font-jp);
	font-size: 14px;
	line-height: 1.9;
	color: var(--bkd-ink-2);
}

.bkd-empty__link {
	display: inline-block;
	margin-left: .5em;
	color: var(--bkd-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   8. 詳細ページ
   ========================================================================== */

.bkd-work__crumb {
	margin-bottom: clamp(16px, 1.8vw, 24px);
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	color: var(--bkd-ink-3);
}

.bkd-work__crumb a {
	position: relative;
	padding-left: 1.2em;
	color: var(--bkd-ink-3);
}

.bkd-work__crumb a::before {
	content: "←";
	position: absolute;
	left: 0;
	transition: transform .25s ease;
}

.bkd-work__crumb a:hover {
	color: var(--bkd-ink);
}

.bkd-work__crumb a:hover::before {
	transform: translateX(-3px);
}

.bkd-work__head .bkd-wcard__cats {
	margin-bottom: 14px;
}

/*
 * 実績名は「株式会社◯◯様 ◯◯制作」のように長くなりがちです。
 * 一覧ページの見出し（制作実績）と同じ大きさだと画面の横幅いっぱいに伸びて
 * 読みづらいので、少し小さくし、24文字前後で折り返すようにしています。
 */
.bkd-work__head .bkd-page-hero__title {
	max-width: 24ch;
	font-size: clamp(22px, 2.4vw, 36px);
	line-height: 1.5;
	text-wrap: balance;
}

.bkd-work__year {
	margin-top: 16px;
	font-family: var(--bkd-font-en);
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--bkd-ink-3);
}

.bkd-work__body {
	padding-block: clamp(40px, 5vw, 72px) var(--bkd-section-y);
}

/*
 * メイン画像。
 *
 * 元は幅いっぱい・高さ無制限で出していたため、大きい画像だと
 * 画面が写真だけで埋まってしまい、何の実績なのか読み取れませんでした。
 * 「画面の中に一目で収まる」ことを優先して、次の2つで抑えています。
 *
 *   ・横幅は本文と同じ 960px までに制限（コンテナ幅いっぱいにしない）
 *   ・高さは画面の68%までに制限し、超える場合は縮小して全体を見せる
 *
 * 切り抜かず縮小するので、縦長の作品も構図を保ったまま収まります。
 * 余白は一覧のカードと同じ台紙の色にして、白地の作品でも輪郭が分かるようにしています。
 */
.bkd-work__hero {
	display: grid;
	place-items: center;
	max-width: 960px;
	margin-inline: auto;
	padding: clamp(12px, 1.4vw, 22px);
	border-radius: var(--bkd-radius-lg);
	overflow: hidden;
	background: #f0f1f3;
	box-shadow: var(--bkd-shadow-sm);
}

.bkd-work__hero img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(68vh, 620px);
	object-fit: contain;
	border-radius: var(--bkd-radius-sm);
}

/* 枠に入れている場合は、枠ごと同じ幅に収めます */
.bkd-work__hero .bkd-mock {
	width: 100%;
	max-width: 820px;
}

.bkd-work__hero .bkd-mock__screen img {
	max-height: min(60vh, 520px);
	border-radius: 0;
}

/* --- 本文（管理画面のエディタで入力された内容） --- */

.bkd-prose {
	max-width: 820px;
	margin-inline: auto;
	margin-top: clamp(32px, 4vw, 64px);
	font-family: var(--bkd-font-jp);
	font-size: clamp(15px, 1vw, 16px);
	line-height: 2;
	color: var(--bkd-ink);
}

.bkd-prose > * + * {
	margin-top: 1.4em;
}

.bkd-prose h2 {
	margin-top: 2em;
	font-size: clamp(19px, 1.5vw, 24px);
	font-weight: 700;
	line-height: 1.6;
}

.bkd-prose h3 {
	margin-top: 1.8em;
	font-size: clamp(16px, 1.2vw, 19px);
	font-weight: 700;
	line-height: 1.6;
}

.bkd-prose ul,
.bkd-prose ol {
	padding-left: 1.4em;
}

.bkd-prose ul li {
	list-style: disc;
}

.bkd-prose ol li {
	list-style: decimal;
}

.bkd-prose a {
	color: var(--bkd-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bkd-prose img {
	border-radius: var(--bkd-radius);
}

.bkd-prose blockquote {
	margin-inline: 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--bkd-line);
	color: var(--bkd-ink-2);
}

/* --- ギャラリー --- */

.bkd-gallery {
	margin-top: clamp(48px, 6vw, 88px);
}

.bkd-gallery__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
	margin-top: clamp(20px, 2.4vw, 32px);
}

.bkd-gallery__item a {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--bkd-radius);
	overflow: hidden;
	background: var(--bkd-bg-soft);
	box-shadow: var(--bkd-shadow-sm);
	cursor: zoom-in;
}

.bkd-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.bkd-gallery__item a:hover img {
	transform: scale(1.05);
}

.bkd-work__hero .bkd-zoom {
	display: block;
	cursor: zoom-in;
}

/* --- 前後移動 --- */

.bkd-work__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(16px, 2vw, 32px);
	margin-top: clamp(48px, 6vw, 88px);
	padding-top: clamp(28px, 3vw, 48px);
	border-top: 1px solid var(--bkd-line);
}

.bkd-work__nav-side--right {
	text-align: right;
}

.bkd-work__nav-link {
	display: inline-block;
	max-width: 320px;
}

.bkd-work__nav-label {
	display: block;
	font-family: var(--bkd-font-en);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--bkd-ink-3);
	line-height: 1.4;
}

.bkd-work__nav-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 6px;
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	line-height: 1.7;
	color: var(--bkd-ink-2);
	transition: color .25s ease;
}

.bkd-work__nav-link:hover .bkd-work__nav-title {
	color: var(--bkd-accent-ink);
}

@media (max-width: 640px) {
	.bkd-work__nav {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	.bkd-work__nav-side--right {
		text-align: center;
	}
}

/* --- 関連する実績 --- */

.bkd-related {
	padding-bottom: var(--bkd-section-y);
}

.bkd-related .bkd-wgrid {
	margin-top: clamp(24px, 3vw, 40px);
}

/* ==========================================================================
   9. 相談導線
   ========================================================================== */

.bkd-wcta {
	position: relative;
	padding-block: var(--bkd-section-y);
	/* 現行サイトのお問い合わせ帯（#form-top）と同じ青 */
	background: var(--bkd-accent);
	color: #fff;
	--bkd-wave: var(--bkd-accent);
}

.bkd-wcta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

@media (min-width: 900px) {
	.bkd-wcta__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	}
}

.bkd-wcta .bkd-shead__en {
	color: #fff;
}

.bkd-wcta__title {
	margin-top: clamp(16px, 2vw, 28px);
	font-family: var(--bkd-font-jp);
	font-size: clamp(22px, 2.4vw, 36px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .03em;
}

.bkd-wcta__title span {
	display: block;
}

.bkd-wcta__body {
	margin-top: clamp(16px, 1.8vw, 24px);
	font-family: var(--bkd-font-jp);
	font-size: 14px;
	line-height: 2;
	color: rgba(255, 255, 255, .8);
}

.bkd-wcta__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(24px, 2.6vw, 40px);
	padding: clamp(28px, 3vw, 48px);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--bkd-radius-lg);
}

/*
 * 青い面のボタンは、トップページのお問い合わせ帯にある
 * 「メールフォーム」ボタン（#mail-button）と同じ作りにしています。
 * 白い枠だけの状態から、触ると白く塗りつぶされて文字が青になります。
 */
.bkd-root .bkd-wcta__actions .bkd-btn--dark {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.bkd-root .bkd-wcta__actions .bkd-btn--dark:hover {
	background: #fff;
	border-color: #fff;
	color: var(--bkd-accent);
	box-shadow: none;
}

.bkd-wcta__tel-label {
	font-family: var(--bkd-font-jp);
	font-size: 12px;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .6);
	line-height: 1;
}

.bkd-wcta__tel-num {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--bkd-font-en);
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.1;
	color: #fff;
}

.bkd-wcta__tel-note {
	margin-top: 10px;
	font-family: var(--bkd-font-jp);
	font-size: 12px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .6);
}

/* ==========================================================================
   10. 画像の拡大表示（assets/js/works.js が生成）
   ========================================================================== */

body.bkd-lightbox-open {
	overflow: hidden;
}

.bkd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(8px, 1.5vw, 24px);
	padding: clamp(56px, 6vw, 88px) clamp(12px, 2vw, 32px) clamp(24px, 3vw, 48px);
	background: rgba(20, 20, 20, .94);
	backdrop-filter: blur(4px);
}

.bkd-lightbox[hidden] {
	display: none;
}

.bkd-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	min-width: 0;
	max-height: 100%;
	margin: 0;
}

.bkd-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 200px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--bkd-radius-sm, 10px);
	background: #222;
}

.bkd-lightbox__caption {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: .04em;
	text-align: center;
	color: rgba(255, 255, 255, .82);
}

.bkd-lightbox__close,
.bkd-lightbox__nav {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.bkd-lightbox__close:hover,
.bkd-lightbox__nav:hover {
	background: #fff;
	color: #141414;
}

.bkd-lightbox__close {
	position: absolute;
	top: clamp(12px, 2vw, 24px);
	right: clamp(12px, 2vw, 24px);
}

.bkd-lightbox__close svg,
.bkd-lightbox__nav svg {
	width: 22px;
	height: 22px;
}

.bkd-lightbox__nav[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.bkd-lightbox {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		padding-inline: 12px;
	}

	.bkd-lightbox__figure {
		grid-column: 1;
		grid-row: 1;
	}

	.bkd-lightbox__nav {
		grid-row: 2;
		justify-self: center;
	}

	.bkd-lightbox__nav--prev {
		justify-self: start;
	}

	.bkd-lightbox__nav--next {
		justify-self: end;
		grid-row: 2;
		margin-top: -48px;
	}

	.bkd-lightbox__img {
		max-height: calc(100vh - 260px);
	}
}

/* ==========================================================================
   11. 関連実績・ギャラリーのカラム数
   ==========================================================================
   こちらも自動計算に任せず、画面幅ごとにカラム数を指定しています。
   ========================================================================== */

/*
 * 関連実績のカードは、一覧ページのカードとまったく同じ見え方にします。
 *
 * 以前は一覧側の指定を .bkd-works-archive に限定していたため、
 * ここだけ共通スタイル（正方形・切り抜き）のまま残っていて、
 * カードが大きく、切り抜かれた状態で出ていました。
 *
 * 他のルールに頼らず、必要な指定をこの中で完結させています。
 */
.bkd-related .bkd-wgrid--3 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 26px);
}

@media (min-width: 768px) {
	.bkd-related .bkd-wgrid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 画像の枠と中身の扱いも一覧と揃えます（大きさは固定、作品は切り抜かない） */
.bkd-related .bkd-wcard__thumb {
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	padding: clamp(10px, 1vw, 16px);
	border-radius: var(--bkd-radius);
	background: #f0f1f3;
	box-shadow: none;
	overflow: hidden;
}

.bkd-related .bkd-wcard__thumb img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.bkd-related .bkd-wcard__link:hover .bkd-wcard__thumb img {
	transform: scale(1.03);
}

.bkd-related .bkd-wcard__body {
	padding-top: 14px;
}

.bkd-related .bkd-wcard__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.bkd-gallery__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.bkd-gallery__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.bkd-gallery__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   12. 画像の見せ方（モックアップ）
   ==========================================================================
   実績ごとに「パソコン」「スマートフォン」を選ぶと、アイキャッチ画像が
   その枠に入って表示されます。枠はすべてCSSで描いているので、
   画像を差し替えても崩れませんし、素材の追加も要りません。

   設定は 制作実績の編集画面 > 右側「画像の見せ方」 です。
   ========================================================================== */

.bkd-mock {
	display: block;
	width: 100%;
	height: 100%;
}

.bkd-mock__screen {
	display: block;
	overflow: hidden;
	background: #fff;
}

.bkd-mock__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- パソコン --- */

.bkd-mock--pc {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bkd-line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.bkd-mock--pc .bkd-mock__bar {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	height: 22px;
	padding-inline: 10px;
	background: #ececec;
	border-bottom: 1px solid var(--bkd-line);
}

.bkd-mock--pc .bkd-mock__bar i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c9c9c9;
}

.bkd-mock--pc .bkd-mock__screen {
	flex: 1 1 auto;
	min-height: 0;
}

/* --- スマートフォン --- */

.bkd-mock--sp {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: var(--bkd-bg-soft);
}

.bkd-mock--sp .bkd-mock__screen {
	position: relative;
	height: 92%;
	aspect-ratio: 9 / 19;
	border: 6px solid #2b2b2b;
	border-radius: 20px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.bkd-mock--sp .bkd-mock__screen img {
	object-position: top center;
}

/* 上部のノッチ */
.bkd-mock--sp .bkd-mock__notch {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 26%;
	height: 10px;
	border-radius: 0 0 8px 8px;
	background: #2b2b2b;
	z-index: 1;
}

/* --- 一覧カードに入れたとき ---
   一覧のカードは大きさをそろえてあるので、枠はその中いっぱいに広がります。
   枠の中の画像だけは、切らずに収めるのではなく上端を合わせて切り抜きます
   （WEBサイトのスクリーンショットは縦に長いため、ページの上部が見える形が自然です）。 */

.bkd-works-archive .bkd-wcard__thumb.has-mock {
	background: #fff;
}

/* 枠はカードいっぱいに */
.bkd-works-archive .bkd-wcard__thumb .bkd-mock {
	width: 100%;
	height: 100%;
}

.bkd-works-archive .bkd-wcard__thumb .bkd-mock__screen img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: top center;
}

/* --- 詳細ページのメイン画像に入れたとき --- */

.bkd-work__hero .bkd-mock--pc {
	border-radius: 12px;
}

.bkd-work__hero .bkd-mock--pc .bkd-mock__bar {
	height: 34px;
	gap: 8px;
}

.bkd-work__hero .bkd-mock--pc .bkd-mock__bar i {
	width: 11px;
	height: 11px;
}

.bkd-work__hero .bkd-mock--sp {
	padding-block: clamp(24px, 3vw, 48px);
	border-radius: var(--bkd-radius-lg);
}

.bkd-work__hero .bkd-mock--sp .bkd-mock__screen {
	height: auto;
	width: min(300px, 60%);
	border-width: 10px;
	border-radius: 34px;
}

.bkd-work__hero .bkd-mock--sp .bkd-mock__notch {
	top: 10px;
	height: 16px;
	border-radius: 0 0 12px 12px;
}

/* ==========================================================================
   13. 白い面に置いたときのカードの微調整
   ==========================================================================
   「対応領域」の地を白に戻したので、白いカードが地に溶けないよう、
   細い枠とやわらかい影を足しています。中身の作りは変えていません。

   影はトップページのお知らせカード（.fv-news-card）と同じ考え方で、
   輪郭を出すためではなく、紙が1枚浮いているように見せるためのものです。
   ========================================================================== */

.bkd-fields .bkd-field__link {
	border: 1px solid var(--bkd-line-2);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 14px 34px rgba(0, 0, 0, .06);
}

.bkd-fields .bkd-field__link:hover {
	border-color: transparent;
	box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
}

/* 件数バッジの地は白いカードの中なので、薄いグレーのままで問題ありません */

/* ==========================================================================
   14. 動画（YouTube）
   ==========================================================================
   ・実績ごとに設定した動画は、詳細ページのメイン画像の位置に出ます
   ・本文（エディタ）にYouTubeのURLを1行で貼った場合も、同じ見た目になります
   ・一覧のカードには再生マークが付きます
   ========================================================================== */

.bkd-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bkd-radius-sm);
	overflow: hidden;
	background: #000;
}

.bkd-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 詳細ページのメインに置いたとき */
.bkd-work__hero--video {
	max-width: 960px;
	margin-inline: auto;
	padding: clamp(12px, 1.4vw, 22px);
	background: #f0f1f3;
	border-radius: var(--bkd-radius-lg);
	box-shadow: var(--bkd-shadow-sm);
}

/* YouTube以外のURLだったときのリンク */
.bkd-video__link {
	text-align: center;
	font-family: var(--bkd-font-jp);
	font-size: 14px;
}

.bkd-video__link a {
	color: var(--bkd-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * 本文にYouTubeのURLを貼ったとき（WordPressの自動埋め込み）。
 * そのままだと固定サイズのiframeになり、狭い画面ではみ出すので、
 * 上と同じ16:9の枠に収めます。
 */
.bkd-prose .wp-block-embed__wrapper,
.bkd-prose iframe {
	max-width: 100%;
}

.bkd-prose iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: var(--bkd-radius-sm);
}

/* --- 一覧カードの再生マーク --- */

.bkd-wcard__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	backdrop-filter: blur(2px);
	transition: background-color .25s ease, transform .25s ease;
	pointer-events: none;
}

.bkd-wcard__play svg {
	width: 30px;
	height: 30px;
	/* 三角形は左に寄って見えるので、少し右へずらして中心を合わせます */
	margin-left: 2px;
}

.bkd-wcard__link:hover .bkd-wcard__play {
	background: var(--bkd-accent);
	transform: translate(-50%, -50%) scale(1.06);
}

/* ==========================================================================
   15. 縦に長い画像（WEBサイト・LPのスクリーンショット）
   ==========================================================================
   ページ全体を撮ったスクリーンショットは極端に縦長になります。
   これを横長のカードに「全体表示」すると細長く縮んでしまい、
   何のサイトなのか判別できません。

   そこで縦横比が 1.4 倍以上の画像は、縮めずに上端を合わせて切り取り、
   ファーストビュー（ページの一番上）がサムネイルに出るようにします。
   判定はアイキャッチの実寸から自動で行うので、管理画面での設定は不要です。
   全体を見たい場合は、詳細ページで拡大表示できます。
   ========================================================================== */

.bkd-works-archive .bkd-wcard__thumb.is-tall img,
.bkd-related .bkd-wcard__thumb.is-tall img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: top center;
}

/* 上端を切り取っていることが分かるよう、下端にごく薄い影を落とします */
.bkd-works-archive .bkd-wcard__thumb.is-tall,
.bkd-related .bkd-wcard__thumb.is-tall {
	position: relative;
}

.bkd-works-archive .bkd-wcard__thumb.is-tall::after,
.bkd-related .bkd-wcard__thumb.is-tall::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 18%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .07));
	pointer-events: none;
}

/* ==========================================================================
   16. 画像を出さずに掲載する実績
   ==========================================================================
   守秘義務などで写真を公開できない案件でも、実績として名前は載せられます。
   空白にすると「画像の読み込みに失敗している」ように見えてしまうため、
   カテゴリの色を敷いて、意図して出していないことが伝わる面にしています。
   ========================================================================== */

.bkd-noimg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 20px;
	text-align: center;
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(255, 255, 255, .5) 0 10px,
			rgba(255, 255, 255, 0) 10px 20px
		),
		var(--field-color, var(--bkd-accent));
}

.bkd-noimg__cat {
	font-family: var(--bkd-font-en);
	font-size: clamp(18px, 1.8vw, 26px);
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.bkd-noimg__note {
	font-family: var(--bkd-font-jp);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* カード側は台紙の余白を消して、色の面をいっぱいに広げます */
.bkd-works-archive .bkd-wcard__thumb:has(.bkd-noimg),
.bkd-related .bkd-wcard__thumb:has(.bkd-noimg) {
	padding: 0;
	background: transparent;
}

/* 詳細ページのメイン画像の位置に置いたとき */
.bkd-work__hero--noimg {
	max-width: 960px;
	margin-inline: auto;
	padding: 0;
	aspect-ratio: 16 / 7;
	border-radius: var(--bkd-radius-lg);
	overflow: hidden;
	background: transparent;
	box-shadow: var(--bkd-shadow-sm);
}

.bkd-work__hero--noimg .bkd-noimg__cat {
	font-size: clamp(26px, 3vw, 44px);
}

.bkd-work__hero--noimg .bkd-noimg__note {
	font-size: 13px;
}

/* ==========================================================================
   17. 実績の本文（記事として書く場合）
   ==========================================================================
   ブロックエディタで見出し・箇条書き・画像・キャプション・動画・表を使って
   記事のように書けます。ここはその表示を整える指定です。
   お知らせ（legacy-add.css）と同じ体裁に揃えています。
   ========================================================================== */

.bkd-prose h4 {
	margin-top: 1.8em;
	font-size: clamp(15px, 1.05vw, 17px);
	font-weight: 700;
	line-height: 1.6;
}

/* 見出しの下に色の線を入れ、記事の区切りを分かりやすくします */
.bkd-prose h2 {
	padding-bottom: .5em;
	border-bottom: 2px solid var(--bkd-accent);
}

.bkd-prose li + li {
	margin-top: .4em;
}

/* --- 画像とキャプション --- */

.bkd-prose img {
	max-height: min(70vh, 620px);
	width: auto;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}

.bkd-prose figure {
	margin: 0;
	text-align: center;
}

.bkd-prose figcaption {
	margin-top: .7em;
	font-size: .82em;
	line-height: 1.7;
	color: var(--bkd-ink-3);
	text-align: center;
}

/* --- 動画ファイル（埋め込みは 14章で対応済み） --- */

.bkd-prose video {
	width: 100%;
	height: auto;
	border-radius: var(--bkd-radius-sm);
}

/* --- 表 --- */

.bkd-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
}

.bkd-prose th,
.bkd-prose td {
	padding: .7em .9em;
	border: 1px solid var(--bkd-line);
	text-align: left;
	line-height: 1.8;
}

.bkd-prose th {
	background: var(--bkd-bg);
	font-weight: 700;
}

.bkd-prose .wp-block-table {
	overflow-x: auto;
}

/* --- 区切り線 --- */

.bkd-prose hr {
	margin-block: 2.4em;
	border: 0;
	border-top: 1px solid var(--bkd-line);
}

/* ==========================================================================
   18. トップページに合わせた見え方（うねり・見出しの線）
   ==========================================================================
   このページだけ雰囲気が違って見えないよう、トップページで使われている
   2つの決まりごとを持ち込んでいます。

     1. 面と面の境目が、まっすぐな線ではなく「うねり」になっている
     2. セクションの見出しの手前に、短い横線が1本入っている（.wide-bar）

   1. うねり（wave）
   --------------------------------------------------------------------------
   トップページの波は1枚絵（イラストのPNG）ですが、このページの面は
   白・薄グレー・青の3色なので、絵ではなく形だけを持ってきています。

   仕組みは「セクションの上に、そのセクションと同じ色の帯を置き、
   帯の上辺を波の形に切り抜く」だけです。切り抜きには mask を使います。
   色はセクションごとに --bkd-wave で渡します（例：青い面なら青）。

   波の高さを変えたいときは --bkd-wave-h の1か所だけ直してください。
   波の形そのものを変えたいときは、下の path の数値を差し替えます
   （0,0〜1440,120 の座標。数値が小さいほど上、大きいほど下です）。

   mask に対応していないとても古いブラウザでは、
   ただの四角い帯が出てしまうので、@supports で囲って波を出しません
   （その場合はまっすぐな境目になるだけで、崩れはしません）。
   ========================================================================== */

.bkd-root {
	--bkd-wave-h: clamp(26px, 3.4vw, 62px);
}

@supports ((-webkit-mask-image: none) or (mask-image: none)) {

	.bkd-fields::before,
	.bkd-works-archive::before,
	.bkd-wcta::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: var(--bkd-wave-h);
		background: var(--bkd-wave, var(--bkd-white));
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,120 480,20 720,44 C960,68 1200,124 1440,64 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,120 480,20 720,44 C960,68 1200,124 1440,64 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
		pointer-events: none;
	}

}

/* --------------------------------------------------------------------------
   2. 見出しの手前の短い線

   トップページでは、SERVICE / ABOUT / NEWS などの見出しの手前に
   細い横線（.wide-bar）が1本入っています。同じものを足しました。

   線の太さ（0.75px）と色（黒）はトップページと同じです。
   -------------------------------------------------------------------------- */

.bkd-root .bkd-shead::before {
	content: "";
	display: block;
	width: clamp(48px, 5vw, 96px);
	margin-bottom: clamp(14px, 1.4vw, 20px);
	border-top: 0.75px solid currentColor;
	opacity: .85;
}

/* お問い合わせの見出しだけ .bkd-shead の枠を使っていないので、個別に足します */
.bkd-wcta .bkd-shead__en::before {
	content: "";
	display: block;
	width: clamp(48px, 5vw, 96px);
	margin-bottom: clamp(14px, 1.4vw, 20px);
	border-top: 0.75px solid currentColor;
	opacity: .7;
}


/* ==========================================================================
   19. ヒーローをシンプルにしたときの見え方
   ==========================================================================
   写真の壁（1. の .has-wall）を出さないときの見出しまわりです。
   テンプレート側で写真を渡さなければ、自動でこちらの見た目になります。

   地は薄グレー（#f5f5f5）の一色です。
   すぐ下の「対応領域」が白なので、境目の白い波がそのまま活きます。
   トップページも薄グレーと白が交互に来るので、並びは同じです。

   写真の壁に戻すときは、この節は消さなくて構いません。
   .has-wall が付いた時点で 1. の指定が優先されます。
   ========================================================================== */

.bkd-root .bkd-works-hero {
	/*
	 * 下の余白は、上に重なってくる波（--bkd-wave-h、最大62px）より
	 * 必ず大きくしてください。小さいと件数の行に波がかぶります。
	 */
	padding-block: clamp(56px, 7vw, 116px) clamp(72px, 6.4vw, 104px);
	background: var(--bkd-bg);
}

/* 写真が無いぶん、見出しと本文の間を少しだけ広く取ります */
.bkd-root .bkd-works-hero:not(.has-wall) .bkd-page-hero__lead {
	max-width: 62ch;
}

/* ==========================================================================
   20. 実際のサイト（WEBサイト・LPの実績）
   ==========================================================================
   実績に「サイトURL」を入れると、詳細ページにこの枠が出ます。
   枠の中は本物のサイトで、そのままスクロールして見られます。
   スクリーンショットだと1画面分しか伝わらないLPなどのための見せ方です。

   枠の見た目は、アイキャッチに使えるパソコンの枠（12. の .bkd-mock--pc）と
   そろえています。上のバーに相手のドメインを出して、
   「これは実際のサイトです」ということが分かるようにしています。

   高さは画面の高さに合わせて伸び縮みします（最大760px）。
   変えたいときは .bkd-site__screen の height だけ直してください。
   ========================================================================== */

.bkd-site {
	margin-top: clamp(40px, 5vw, 80px);
}

.bkd-site__window {
	display: flex;
	flex-direction: column;
	margin-top: clamp(20px, 2.4vw, 32px);
	border: 1px solid var(--bkd-line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* --- 上のバー（信号のような丸3つ＋ドメイン） --- */

.bkd-site__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	height: 34px;
	padding-inline: 12px;
	background: #ececec;
	border-bottom: 1px solid var(--bkd-line);
}

.bkd-site__bar i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c9c9c9;
}

.bkd-site__url {
	margin-left: 10px;
	overflow: hidden;
	font-family: var(--bkd-font-en);
	font-size: 12px;
	letter-spacing: .02em;
	line-height: 1;
	color: var(--bkd-ink-3);
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- 中身 ---
   iframe（よそのサイト）は、この箱の大きさいっぱいに置きます。
   スクロールは箱の外ではなく、中のサイト側で起きます。 */

.bkd-site__screen {
	flex: 1 1 auto;
	height: clamp(420px, 68vh, 760px);
	background: #fff;
	/* iPhoneで中身が伸びてしまわないように */
	-webkit-overflow-scrolling: touch;
	overflow: auto;
}

.bkd-site__screen iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- 枠の下の一行 --- */

.bkd-site__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em 1.2em;
	margin-top: 14px;
	font-family: var(--bkd-font-jp);
	font-size: 13px;
	line-height: 1.8;
	color: var(--bkd-ink-3);
}

.bkd-site__link {
	font-weight: 700;
	color: var(--bkd-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bkd-site__link span {
	margin-left: .3em;
	font-size: .9em;
}

.bkd-site__link:hover {
	color: var(--bkd-ink);
}

/* 画面が狭いときは、枠を少し低くします */
@media (max-width: 767px) {
	.bkd-site__screen {
		height: clamp(360px, 62vh, 520px);
	}
}

/* 枠に出せないサイトのとき（リンクだけ出す形） */
.bkd-site__note--link {
	margin-top: clamp(18px, 2vw, 26px);
}