/*
 * BULLET LINER リニューアルの見た目（案A スポットライト・第5版）
 *
 * 色はtheme.jsonの役割名（--wp--preset--color--*）だけを使い、hexを書かない。
 * 寸法の出どころはデザイン案の第5版（1440幅）とページヘッダーの仕様（2026-10-16）。
 * 金はDADSのキーカラーの役割で、状態にだけ使う（主アクションの塗り・現在地と選択中・オン）。hover・押下の応答には使わない
 * （文字色の線・一段明るい面・下線の太さで示す。塗りボタンだけ金を沈める）。飾りは見出しの印の1種類まで（本人が決定 2026-10-17）。
 * 影は写真の上の文字にだけ使う。
 */

:root {
	--bl-ground: var(--wp--preset--color--ground);
	--bl-surface: var(--wp--preset--color--surface);
	--bl-surface-2: var(--wp--preset--color--surface-2);
	--bl-line: var(--wp--preset--color--line);
	--bl-line-strong: var(--wp--preset--color--line-strong);
	--bl-text: var(--wp--preset--color--text);
	--bl-text-2: var(--wp--preset--color--text-2);
	--bl-gold: var(--wp--preset--color--gold);
	--bl-gold-deep: var(--wp--preset--color--gold-deep);
	--bl-gold-deeper: var(--wp--preset--color--gold-deeper);
	--bl-display: var(--wp--preset--font-family--oswald);
	--bl-body: var(--wp--preset--font-family--noto-sans-jp);
	/* 画面の端からの余白。ヘッダー・ページヘッダー・本文・フッターの左右の端をこの1つでそろえる
	   （狭い画面でヘッダーより本文が広かった。本人の指摘、2026-10-17）。スマホは16px */
	--bl-edge: 40px;
	/* 本文の幅1120に合わせた左右の余白。1440で160、狭い画面ではヘッダーと同じ--bl-edge */
	--bl-gutter: max(var(--bl-edge), calc((100vw - 1120px) / 2));
	--bl-header-h: 72px;
	/* 共通の型（base.css）が読む役割名 */
	--cpl-text: var(--bl-text);
	--cpl-text-2: var(--bl-text-2);
	--cpl-bg: var(--bl-ground);
	--cpl-surface: var(--bl-surface);
	--cpl-line: var(--bl-line);
	--cpl-line-strong: var(--bl-line-strong);
	--cpl-accent: var(--bl-gold);
	--cpl-on-accent: var(--bl-ground);
	/* 塗りボタンのhover・押下は金を一段ずつ沈める（DADS：hoverで地を沈める。明るくしない。本人が決定 2026-10-17）。紺の文字と7.18：1・5.66：1 */
	--cpl-accent-hover: var(--bl-gold-deep);
	--cpl-accent-active: var(--bl-gold-deeper);
	--cpl-header-h: var(--bl-header-h);
	/*
	 * 誤りと成功の色。theme.jsonの色にまだ無いので、ここで決める（DADSのプリミティブから選んだ。theme.jsonへ移すときはこの2つを消す）。
	 * 誤り＝DADSのred-500。DADSのerror-1（#ec0000）は紺の地で3.63：1しか無いので、2段明るい赤にした。
	 * 地で5.28：1、面で4.56：1（文字4.5：1以上）。金とは色相が違い、「！」の記号も添えるので色だけに頼らない。
	 * 成功＝DADSのsuccess-1（green-600）。地で4.83：1
	 */
	--cpl-error: var(--wp--custom--color--error);
	--cpl-success: var(--wp--custom--color--success);
}

body {
	background: var(--bl-ground);
	color: var(--bl-text);
	font-family: var(--bl-body);
	font-size: 17px;
	line-height: 1.7;
}

/* リンクの下線の状態は共通の型（dads/base.css）。ここは色だけ。ホバーは色を変えず、下線を3pxに太くするだけにする
   （DADSのユーティリティリンクと同じ。白から灰へ変えると文字が薄くなって見える。本人の指摘 2026-10-17）。押下も色を変えず、下線を1pxに戻すだけ（金は応答に使わない） */
a { color: var(--bl-text); }

/* ===== ボタン：型と状態（hover・押下で金を沈める＋下線）は共通の型（dads/base.css）の塗りボタン =====
   ここは第5版の寸法と文字だけ（内側32・17px・字間.04em・行高1.3） */
.wp-block-button__link,
.wp-element-button,
.wpcf7-form input.wpcf7-submit {
	padding: 12px 32px;
	font-family: var(--bl-body);
	font-size: 17px;
	letter-spacing: .04em;
	line-height: 1.3;
}

/* ===== ヘッダー ===== */
.bl-site-header {
	position: relative;
	z-index: 10;
	margin: 0 !important;
	background: var(--bl-ground);
	border-bottom: 1px solid var(--bl-line);
}
/* トップだけ、ヘッダーを写真に重ねる */
.bl-site-header.is-over {
	position: absolute;
	/* ログイン中は管理バーの下から置く（画面の上端に置くと、管理バーにロゴとメニューが隠れる。本人の指摘、2026-10-19）。
	   変数はWordPressが管理バーを出すときだけ持つ */
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
	background: transparent;
	border-bottom: 0;
}
.bl-header {
	min-height: var(--bl-header-h);
	padding: 0 var(--bl-edge);
	gap: 24px;
}
.bl-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: none;
}
/* ロゴはエンブレムと社名の2枚（お客さまのlogo_bulletliner_g-w.png、500×90を、透明の列で切り分けた）。
   エンブレムを社名より大きく見せる（第5版の比。本人の指摘6）。エンブレムの元は高さ78pxなので、
   48pxでは2倍の画面で少しぼやける。元データ（AI／SVG）を受け取ったら差し替える。ヘッダーとフッターの両方に効く */
.bl-logo__mark { height: 48px; width: auto; }
.bl-logo__name { height: 26px; width: auto; }

/* 英語の項目だけOswald。navそのものには掛けない（ハンバーガーと閉じるの「メニュー」「閉じる」は本文の書体で、2つを同じ見た目にする） */
.wp-block-navigation__container.bl-nav,
.cpl-navoverlay__nav {
	font-family: var(--bl-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1;
}
/*
 * 項目はDADSの水平メニューの型。第5版の項目の間32pxは、左右12pxの内側＋8pxの間で保つ（ホバーの面を出す幅のため）。
 * ホバー＝一段明るい面＋下に2pxの線（文字色）、現在地＝下に4pxの金の帯＋太字、現在地のホバー＝下線1px。
 * 押せる高さは44px（ヘッダー72pxの中）
 */
/* スマホの面（cpl-navoverlay__nav）も同じnavの中にあるので、横並びの規則はPCの一覧（ul.bl-nav）の直下の項目にだけ当てる */
.wp-block-navigation__container.bl-nav { gap: 8px; margin-right: -12px; }
.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 0;
	color: var(--bl-text);
	text-decoration: none;
}
.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0;
	background: currentColor;
}
@media (hover: hover) {
	.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { background: var(--bl-surface); color: var(--bl-text); }
	.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after { height: 2px; }
}
.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] { font-weight: 700; }
.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after { height: 4px; background: var(--bl-gold); }
@media (hover: hover) {
	.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
	}
}
/* フォーカスは黄の面に黒の輪郭（DADS）。黄の上の文字は紺。帯は黄の上でも見えるよう残す */
.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	border-radius: 4px;
	background: #ffd43d;
	color: var(--bl-ground);
}
.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:focus-visible::after { background: var(--bl-ground); }
/* ハンバーガー（開く）はヘッダーの文字色。大きさと形は共通の型（base.css） */
.bl-nav .wp-block-navigation__responsive-container-open { color: var(--bl-text); }
/* 開いた面：地の色で塗り、左右の余白はヘッダーと同じ16px（閉じるボタンがハンバーガーと同じ位置に来る） */
.bl-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 16px 24px;
	background: var(--bl-ground);
	color: var(--bl-text);
}
.bl-nav .wp-block-navigation__responsive-container.is-menu-open .cpl-navoverlay__nav {
	margin-top: 8px;
	font-size: 24px;
}
/* 親テーマ（X-T9）が開いた面の項目に内側1em／左のインデントを6段の強さで当てるので、同じ強さで共通の型（base.css）の値に戻す */
.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .cpl-navoverlay__nav > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 12px 8px;
}

/* 英語の5項目が1行に収まるのは1024幅から。コアの切り替え（600px）より上でハンバーガーにする */
@media (max-width: 1023px) {
	.bl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.bl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ===== トップのヒーロー（1画面） =====
   トップの固定ページの本文のカバーのブロック（お客さまが編集画面で文言・写真・ボタンを直す。本人の指示、2026-10-19）。
   中は中身だけ直せる（contentOnly）。コアのカバーの既定（余白1em・中央寄せ・最小430px）をここで上書きする */
.bl-front { min-height: 100svh; }
.bl-front .wp-block-post-content { margin: 0; }
.bl-hero.wp-block-cover {
	min-height: 100svh;
	padding: 0;
	overflow: hidden;
	align-items: flex-end;
}
/* 写真は明るいまま、下44％と上端だけを沈めて文字とヘッダーを読ませる。写真の上・文字の下に重ねる */
.bl-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(to top, rgb(6 20 36 / .9) 0%, rgb(6 20 36 / .55) 22%, rgb(6 20 36 / 0) 44%),
		linear-gradient(to bottom, rgb(6 20 36 / .5) 0%, rgb(6 20 36 / 0) 14%);
}
.bl-hero.wp-block-cover .wp-block-cover__inner-container {
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 120px var(--bl-gutter) clamp(40px, 8.33vw, 120px);
	color: var(--bl-text);
	/* 写真の上の文字だけ影を許す（コントラストの確保が目的） */
	text-shadow: 0 2px 24px rgb(6 20 36 / .9), 0 0 2px rgb(6 20 36 / .9);
}
.bl-hero .wp-block-cover__inner-container > * { margin-top: 0; margin-bottom: 0; }
.bl-hero .bl-hero__title {
	margin: 0;
	color: var(--bl-text);
	font-family: var(--bl-display);
	font-size: clamp(68px, 7.78vw, 112px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	overflow-wrap: anywhere;
}
.bl-hero .bl-hero__sub {
	margin: 28px 0 0;
	font-family: var(--bl-display);
	font-size: clamp(24px, 2.5vw, 36px);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: .08em;
}
.bl-hero .bl-hero__lead {
	margin: 36px 0 44px;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.7;
	letter-spacing: .02em;
}
/* ボタンはヒーローだけ英語の大きい型（第5版：Oswald 18px・高さ64px・左右40px） */
.bl-hero .wp-block-button__link {
	min-height: 64px;
	padding: 0 40px;
	font-family: var(--bl-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .12em;
	text-shadow: none;
}

/* ===== ページヘッダー：見出しは左、写真は右の列（重ねない） ===== */
.bl-ph-wrap { container-type: inline-size; }
.bl-ph {
	--ph-gutter: max(var(--bl-edge), calc((100cqw - 1120px) / 2));
	--ph-h: clamp(320px, 27.78cqw, 400px);
	--ph-photo-w: min(41%, 820px);
	--ph-fade: clamp(112px, 11.11cqw, 160px);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ph-photo-w);
	grid-template-rows: auto 1fr auto;
	min-height: var(--ph-h);
	overflow: hidden;
	background: var(--bl-ground);
	color: var(--bl-text);
}
/* 特殊効果の個別ページは高く（専用のテンプレートのbl-ph--tall）、写真（アイキャッチ）の無いページは帯だけ */
.bl-ph--tall { --ph-h: clamp(380px, 31.94cqw, 460px); }
.bl-ph:not(:has(.bl-ph__figure)) { --ph-h: clamp(240px, 20cqw, 288px); grid-template-columns: minmax(0, 1fr); }

/* パンくず（コアのcore/breadcrumbs）：DADSのbreadcrumb.cssの寸法を写し、色だけ紺の地に置き換える。
   DADSのリンク色（blue-1000）は紺の地で読めないので、リンクは文字色＋下線、現在地と区切りは文字（弱）。
   家の絵と区切りの矢印は、DADSのHTML版（breadcrumb/with-home-icon.html）のSVGをマスクにして文字の色で塗る */
.bl-ph__crumb {
	grid-area: 1 / 1;
	padding: 24px 24px 0 var(--ph-gutter);
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: .02em;
	color: var(--bl-text-2);
}
.bl-ph__crumb ol { display: block; margin: 0; padding: 0; list-style: none; }
.bl-ph__crumb li { display: inline; overflow-wrap: break-word; }
.bl-ph__crumb li:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	/* 右はDADSの余白に、項目のあいだの空白1つぶんを足す（前のマークアップの改行が空白になっていた見た目にそろえる） */
	margin: 0 calc(1px + .25em + .3em) 0 calc(1px + .25em);
	vertical-align: middle;
	background: var(--bl-text-2);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 11L4 10.5L8 6.5L4 2.5L4.5 2L9 6.5L4.5 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 11L4 10.5L8 6.5L4 2.5L4.5 2L9 6.5L4.5 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bl-ph__crumb li:first-child a::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13L3 6L8 2L13 6V13H9V9H7V13H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13L3 6L8 2L13 6V13H9V9H7V13H3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) {
	.bl-ph__crumb li:not(:last-child)::after,
	.bl-ph__crumb li:first-child a::before { background: CanvasText; }
}
.bl-ph__crumb a {
	color: var(--bl-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
@media (hover: hover) {
	.bl-ph__crumb a:hover { color: var(--bl-text); text-decoration-thickness: 3px; }
}
.bl-ph__crumb a:active { text-decoration-thickness: 1px; }
/* フォーカスはDADSどおり黄の面に黒の輪郭。文字は黄の上で読める紺にする */
.bl-ph__crumb a:focus-visible {
	outline: 4px solid #000;
	outline-offset: 2px;
	border-radius: 4px;
	background-color: #ffd43d;
	box-shadow: 0 0 0 2px #ffd43d;
	color: var(--bl-ground);
}

.bl-ph__text {
	grid-area: 3 / 1;
	min-width: 0;
	padding: 32px 24px 48px var(--ph-gutter);
}
/* 英語の見出し（ページの欄）が大きく、日本語の見出し（タイトル・h1）を金の線で添える（第5版） */
.bl-ph .bl-ph__en {
	display: block;
	margin: 0;
	color: var(--bl-text);
	font-family: var(--bl-display);
	font-size: clamp(44px, 6.667cqw, 96px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .02em;
	overflow-wrap: anywhere;
}
.bl-ph .bl-ph__jp {
	display: flex;
	margin-bottom: 0;
	padding: 0;
	border: 0;
	color: var(--bl-text);
	align-items: center;
	gap: 16px;
	margin-top: clamp(14px, 1.667cqw, 24px);
	font-family: var(--bl-body);
	font-size: clamp(16px, 1.389cqw, 20px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .16em;
}
.bl-ph .bl-ph__jp::before {
	content: "";
	flex: none;
	width: 40px;
	height: 2px;
	background: var(--bl-gold);
}
/* 写真は絶対配置（元の高さで帯が伸びないように）。左端だけ地の紺へ溶かす。
   編集画面のブロックの枠（.block-editor-block-list__layout .block-editor-block-list__block）がrelativeにするので、同じ強さで書く */
.bl-ph .bl-ph__figure {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--ph-photo-w);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ph-fade));
	mask-image: linear-gradient(to right, transparent 0, #000 var(--ph-fade));
}
.bl-ph__figure picture,
.bl-ph__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 会社案内は写真でなく切り抜きの図版（templates/page-about.htmlのbl-ph--art）。フェードせず右寄せで収める */
.bl-ph--art .bl-ph__figure {
	-webkit-mask-image: none;
	mask-image: none;
	display: grid;
	place-items: center end;
	padding: 24px var(--ph-gutter) 24px 0;
}
.bl-ph--art .bl-ph__figure img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* スマホ：写真を上に160pxの帯で置き、その下にパンくずと見出し */
@container (max-width: 47.99em) {
	.bl-ph {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		min-height: 0;
	}
	.bl-ph .bl-ph__figure {
		position: static;
		grid-area: 1 / 1;
		width: auto;
		height: 160px;
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
	}
	.bl-ph--art .bl-ph__figure { -webkit-mask-image: none; mask-image: none; padding: 16px var(--bl-edge); place-items: center; overflow: hidden; }
	/* 高さ％は自動の行では効かず、図版が箱（160px）からはみ出してパンくずに重なったので、箱の内側の高さで留める */
	.bl-ph--art .bl-ph__figure img { max-height: 128px; }
	/* 写真→パンくず16→見出し16→下32。8pxの段（本人の指摘22：8＋12では窮屈） */
	.bl-ph__crumb { grid-area: 2 / 1; padding: 16px var(--bl-edge) 0; }
	.bl-ph__text { grid-area: 3 / 1; padding: 16px var(--bl-edge) 32px; }
	.bl-ph:not(:has(.bl-ph__figure)) .bl-ph__crumb { grid-area: 1 / 1; padding-top: 24px; }
	.bl-ph:not(:has(.bl-ph__figure)) .bl-ph__text { grid-area: 2 / 1; }
	.bl-ph .bl-ph__jp { align-items: flex-start; letter-spacing: .12em; }
	.bl-ph .bl-ph__jp::before { margin-top: 10px; }
}

/* ===== 本文の枠：1120px・上72／下96 ===== */
.bl-main { margin: 0; }
.bl-wrap {
	padding: 72px var(--bl-edge) 96px;
}
.bl-wrap > * { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
.bl-content > * + * { margin-top: 24px; }
/* 編集画面だけ、X-T9のeditor.cssがカラムなどの上の余白を0にする（クラス2つの強さ）。同じブロックに絞って、表示と同じ24pxに戻す */
.editor-styles-wrapper .bl-content > * + :is(.wp-block-spacer, .wp-block-separator, .wp-block-columns, .wp-block-navigation, .wp-block-query, .wp-block-archives) { margin-top: 24px; }
.bl-content :is(h2, h3) { padding: 0; border: 0; background: none; }
.bl-content :is(h2, h3)::before,
.bl-content :is(h2, h3)::after { content: none; }
/* 見出しの上の余白。X-T9の「* + 見出し」（1.5em）より強い指定にしないと負けるので、クラスを重ねる（本文の箱はページでpost-content、404でgroup） */
.bl-content.bl-content h2 { margin-top: 72px; font-size: 28px; line-height: 1.4; }
.bl-content.bl-content h2:first-child { margin-top: 0; }
.bl-content.bl-content h3 { margin-top: 40px; font-size: 22px; line-height: 1.5; }
.bl-content .is-style-en,
.bl-content h2.is-style-en {
	font-family: var(--bl-display);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .02em;
}
.bl-intro,
.bl-content > p:first-child {
	font-size: 18px;
	line-height: 1.7;
	color: var(--bl-text-2);
}

/* 名前と値の表（会社概要・募集要項・機材の仕様）。コアの表ブロックに「仕様」のスタイル */
.bl-content .wp-block-table table,
.bl-content table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-top: 1px solid var(--bl-line);
	font-size: 17px;
}
.bl-content .wp-block-table th,
.bl-content .wp-block-table td,
.bl-content table th,
.bl-content table td {
	padding: 20px 24px 20px 0;
	border: 0;
	border-bottom: 1px solid var(--bl-line);
	background: transparent;
	color: var(--bl-text);
	text-align: left;
	vertical-align: top;
	line-height: 1.7;
}
.bl-content .wp-block-table td:first-child,
.bl-content table th[scope="row"] {
	width: 220px;
	font-size: 16px;
	font-weight: 700;
	color: var(--bl-text-2);
}
.bl-content .wp-block-table.is-style-spec { font-size: 16px; }
.bl-content .wp-block-table.is-style-spec table { border-top: 0; font-size: 16px; }
.bl-content .wp-block-table.is-style-spec td { padding: 4px 24px 4px 0; border-bottom: 0; line-height: 1.6; }
.bl-content .wp-block-table.is-style-spec td:first-child { width: auto; white-space: nowrap; font-weight: 400; }

/* 機材：写真・名前と説明・仕様の3列。コアのカラムに bl-machine を付ける */
.bl-machine {
	display: grid !important;
	grid-template-columns: 320px minmax(0, 1fr) 360px;
	gap: 40px !important;
	padding: 40px 0;
	border-top: 1px solid var(--bl-line);
	margin: 0 !important;
}
.bl-machine + .bl-machine { margin-top: 0 !important; }
/* 見出しの直後の機材は区切り線を引かない（見出しが区切りを兼ねる）。見出しと中身の間は第5版の24px */
:is(h2, h3) + .bl-machine { border-top: 0; padding-top: 0; margin-top: 24px !important; }
.bl-machine > .wp-block-column { flex-basis: auto !important; }
.bl-machine figure { margin: 0; }
.bl-machine img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 12px; background: var(--bl-surface); }
.bl-machine h3 {
	margin: 0;
	font-family: var(--bl-display);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .02em;
}
.bl-machine p { margin: 12px 0 20px; font-size: 16px; line-height: 1.7; }
.bl-machine .bl-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 16px; font-weight: 700; }

/* ===== 実績紹介：年のタブ（型はbase.css）の中の一覧。1行＝題と会場、行はけい線で区切る ===== */
.wp-block-tab-panel .wp-block-list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bl-line);
	list-style: none;
}
.wp-block-tab-panel .wp-block-list li {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--bl-line);
	font-size: 17px;
	line-height: 1.7;
}

/* 個別ページの節へ飛ぶチップ（本文の段落。中のリンクを丸いチップにする） */
.bl-content .bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.bl-content .bl-chips a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--bl-line-strong);
	border-radius: 999px;
	color: var(--bl-text-2);
	font-family: var(--bl-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1;
	text-decoration: none;
}
.bl-content .bl-chips a:hover { border-color: var(--bl-text); color: var(--bl-text); }
/* 節の見出しへ飛んだとき、ヘッダーに隠れないように */
.bl-content :is(h2, h3)[id] { scroll-margin-top: 24px; }
/* 機材の写真の代わりの動画（PYROなど） */
.bl-machine .wp-block-embed { margin: 0; }
.bl-machine .wp-block-embed__wrapper { border-radius: 12px; overflow: hidden; background: var(--bl-surface); }

/* ===== 押せる部品①：タイル（効果カード・効果メニュー） ===== */
.bl-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}
/* カードは特殊効果一覧の本文のブロック（お客さまが編集画面で直す）。見出しのリンクをカード全体へ広げて、
   どこを押しても行き先へ進むようにする（中にリンクを1本だけ置く。DADSのカードの「全体を押せる」型） */
/* 親X-T9がグループの上の余白を0にする（body :is(...) > * + .wp-block-group）ので、それより強く書く */
.bl-content.bl-content .bl-cards { margin-top: 48px; }
.bl-card { position: relative; border-radius: 12px; }
.bl-card > * { margin: 0; }
.bl-card__ico {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	margin: 0;
	background: var(--bl-surface);
	border: 1px solid var(--bl-line-strong);
	border-radius: 12px;
}
.bl-card__ico img { width: 36%; height: auto; }
/* 本文の見出し（.bl-content.bl-content h3）より強くする。カードは本文の中にあるため */
.bl-content.bl-content .bl-card__name,
.bl-card__name {
	display: inline-block;
	margin: 20px 0 8px;
	border-bottom: 2px solid transparent;
	font-family: var(--bl-display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .02em;
}
.bl-card__name a { color: var(--bl-text); text-decoration: none; }
.bl-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
/* 編集画面では広げない（広げると、カードの中の文字を押して直せなくなる） */
.editor-styles-wrapper .bl-card__name a::after { content: none; }
.bl-card__desc { font-size: 16px; line-height: 1.6; color: var(--bl-text-2); }
.bl-card:hover .bl-card__ico,
.bl-card:focus-within .bl-card__ico { border-color: var(--bl-text); }
.bl-card:hover .bl-card__name,
.bl-card:focus-within .bl-card__name { border-bottom-color: currentColor; }
/* フォーカスの輪はカード全体に出す（リンクは見出しの文字だけの大きさなので） */
.bl-card:has(.bl-card__name a:focus-visible) {
	outline: 4px solid #000;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #ffd43d;
}
.bl-card .bl-card__name a:focus-visible { outline: none !important; box-shadow: none !important; }

.bl-fxnav {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	/* 2行に折れたとき（1024幅以下は3列×2行）も、どのタイルもいちばん高いタイルにそろえる */
	grid-auto-rows: 1fr;
	gap: 12px;
	margin-bottom: 40px !important;
}
.bl-fxnav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px 8px 18px;
	background: var(--bl-surface);
	border: 1px solid var(--bl-line-strong);
	border-radius: 12px;
	font-family: var(--bl-display);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--bl-text-2);
}
/*
 * 現在地は白の面に紺の文字（太字）。印は塗りの1種類だけにする（下の帯は二重線に見えたので外した。本人の指摘7）。
 * 金で塗ると主ボタン（相談フォームへ進む）と、DADSのフォーカスの黄に見えるので、ここでは金を使わない。ホバーは枠を文字色に強める。
 * 白の面と地の面の差は14.41：1あり、色相が分からなくても塗りの有無で分かる（WCAG 1.4.1）
 */
.bl-fxnav svg { width: 40px; height: 40px; stroke: currentColor; }
/* お客さまが差し替えたアイコン（PNG・JPG）は色を変えられないので、白い現在地のタイルの上では黒くして見えるようにする */
.bl-fxnav__img { width: 40px; height: 40px; object-fit: contain; }
.bl-fxnav a[aria-current="page"] .bl-fxnav__img { filter: brightness(0); }
.bl-fxnav a:hover { border-color: var(--bl-text); color: var(--bl-text); }
.bl-fxnav a[aria-current="page"] {
	background: var(--bl-text);
	border-color: var(--bl-text);
	color: var(--bl-ground);
	font-weight: 700;
}
/* DADSと同じく、現在地のホバーは名前に下線 */
.bl-fxnav a[aria-current="page"]:hover {
	border-color: var(--bl-text);
	color: var(--bl-ground);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
@media (forced-colors: active) {
	.bl-fxnav a[aria-current="page"] {
		background: CanvasText;
		color: Canvas;
		forced-color-adjust: none;
	}
}

/* ===== 相談への導線（全ページ同じ型） ===== */
.bl-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	margin-top: 80px !important;
	padding: 44px 48px;
	background: var(--bl-surface);
	border-radius: 12px;
}
.bl-cta p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--bl-text-2); }
.bl-cta b { display: block; margin-bottom: 6px; font-size: 24px; color: var(--bl-text); }
.bl-cta .bl-btn { flex: none; white-space: nowrap; }

/* ===== お問い合わせ（Contact Form 7） ===== */
.bl-panel {
	padding: 32px;
	background: var(--bl-surface);
	border-radius: 12px;
}
/* 面の中の行間は8px（コアのblockGapの既定より強く指定する） */
.wp-block-group.bl-panel > * { margin: 0; }
.wp-block-group.bl-panel > * + * { margin-top: 8px; }
.bl-tel { font-family: var(--bl-display); font-size: 44px; font-weight: 500; line-height: 1.1; letter-spacing: .02em; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form label { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; }
.wpcf7-form p { margin: 0 0 24px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	max-width: 480px;
	min-height: 52px;
	margin-top: 8px;
	padding: 12px 16px;
	border: 1px solid var(--bl-line-strong);
	border-radius: 8px;
	background: var(--bl-ground);
	color: var(--bl-text);
	font: inherit;
	font-weight: 400;
}
.wpcf7-form textarea { max-width: none; min-height: 160px; }

.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.wpcf7-form input[type="checkbox"] { width: 24px; height: 24px; margin-top: .2em; flex: none; accent-color: var(--bl-gold); }

/* ===== フッター（全ページ同じ） ===== */
.bl-site-footer { margin: 0 !important; }
/* 案A（2026-10-17）：上の行＝ロゴとメニュー横1列、下の行＝住所と電話。ヘッダーの繰り返しとして静かに置き、金は使わない */
.bl-footer { border-top: 1px solid var(--bl-line); }
.bl-footer__in {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 40px var(--bl-edge) 32px;
	box-sizing: content-box;
	font-size: 16px;
	line-height: 1.7;
	color: var(--bl-text-2);
}
/* 上の行。幅が足りないときはメニューがロゴの下に回る（1024付近） */
.bl-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
}
.bl-footer ul { margin: 0; padding: 0; list-style: none; }
.bl-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 32px; }
.bl-footer li { margin: 0; }
/* メニューの項目はヘッダーのナビと同じ書体と大きさ。1行44px以上を押せる高さにし、下線はDADSのリンクテキスト（1px・3px離す。ホバーで3px） */
.bl-footer li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--bl-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .06em;
	color: var(--bl-text);
}
@media (hover: hover) {
	.bl-footer li a:hover { color: var(--bl-text); }
}
/* 下の行。電話・FAX・受付時間は塊ごとに折り返す（1本の文字列にしない）。電話番号だけリンクなので文字色が一段明るく、押せると分かる */
.bl-footer__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 32px;
	font-style: normal;
}
.bl-footer__tel { display: flex; flex-wrap: wrap; gap: 0 24px; }
/* 中身は組織情報のbindingsの段落（patterns/footer.php）。見出しの「TEL」と値は1つの塊に並べる */
.bl-footer.bl-footer :is(.bl-footer__in, .bl-footer__contact, .bl-footer__tel, .bl-footer__item) > * { margin: 0; }
.bl-footer__item { display: flex; gap: .3em; }
.bl-footer .cpl-copyright { max-width: 1120px; margin: 0 auto; border-top: 1px solid var(--bl-line); color: var(--bl-text-2); font-size: 14px; line-height: calc(16px * 1.7); }

/* ===== 1024幅以下・スマホ ===== */
@media (max-width: 1024px) {
	.bl-machine { grid-template-columns: 280px minmax(0, 1fr); }
	.bl-machine > :last-child { grid-column: 2; }
	.bl-fxnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	/* ヘッダーの行は60px。閉じるボタンの行（base.cssが--cpl-header-hで読む）も同じ高さになる */
	:root { --bl-header-h: 60px; --bl-edge: 16px; }
	.bl-header { min-height: 60px; }
	/* 390幅でハンバーガー（120px）と並べて残る幅は214px。エンブレム40px＋間12＋社名22pxで幅約173px */
	.bl-logo__mark { height: 40px; }
	.bl-logo__name { height: 22px; }
	.bl-hero__lead br { display: none; }
	.bl-hero .wp-block-button,
	.bl-hero .wp-block-button__link { width: 100%; min-height: 60px; }
	.bl-wrap { padding: 40px var(--bl-edge) 56px; }
	.bl-content.bl-content h2 { margin-top: 48px; font-size: 22px; }
	.bl-content .is-style-en { font-size: 32px; }
	.bl-cards { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
	.bl-content.bl-content .bl-card__name,
	.bl-card__name { font-size: 26px; }
	.bl-content.bl-content .bl-cards { margin-top: 32px; }
	.bl-fxnav { gap: 8px; }
	.bl-fxnav a { padding: 12px 4px; gap: 8px; font-size: 16px; }
	.bl-fxnav svg,
	.bl-fxnav__img { width: 32px; height: 32px; }
	.bl-machine { grid-template-columns: minmax(0, 1fr); gap: 20px !important; padding: 32px 0; }
	.bl-machine > :last-child { grid-column: auto; }
	.bl-machine img { aspect-ratio: 3 / 2; }
	.bl-content .wp-block-table td:first-child { width: 120px; }
	.bl-cta { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 56px !important; padding: 28px 24px; }
	.bl-cta .bl-btn { white-space: normal; }
	/* フッターは縦に積む：ロゴ→メニュー（1項目1行）→住所→電話・FAX・受付時間 */
	.bl-footer__in { padding: 32px var(--bl-edge) 24px; }
	.bl-footer__row { flex-direction: column; align-items: flex-start; }
	.bl-footer__nav ul,
	.bl-footer__contact,
	.bl-footer__tel { flex-direction: column; }
	.bl-footer__nav { align-self: stretch; }
}

/* ===== ExUnitの共有ボタン：各SNSの色の地に白文字ではコントラストが足りない（axe）。紺の地に枠と白文字でそろえる ===== */
.veu_socialSet .sb_icon .sb_icon_inner {
	background: transparent !important;
	border: 1px solid var(--bl-line-strong) !important;
	color: var(--bl-text) !important;
}
.veu_socialSet .sb_icon .sb_icon_inner:hover { border-color: var(--bl-text) !important; }

/* ===== ハイコントラスト表示：金の塗りは消えるので、現在地を太い枠で残す ===== */
@media (forced-colors: active) {
	.bl-nav > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
		border: 3px solid CanvasText !important;
	}
}