/*
 * OkumaTech 装飾補助CSS（最小限）
 * theme.json / block supports で表現できない斜め装飾・透かし配置のみを扱う。
 * 色・余白は必ず theme.json のトークン（CSSカスタムプロパティ）を参照する。
 */

/* =========================================================
   ページ見出し帯（全幅・斜めブルー装飾）
   使い方: 対象の group ブロックに className "okuma-page-header" を付与
   ========================================================= */
.okuma-page-header {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	padding-left:7%;
	padding-right:7%;
}

.okuma-page-header::before,
.okuma-page-header::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: var(--wp--preset--color--primary);
	z-index: 0;
	pointer-events: none;
}

/* 左上の三角アクセント
   斜辺の水平量はコンテナ基準で右と同じ約7.7%になるよう、幅×頂点%を合わせる */
.okuma-page-header::before {
	left: 0;
	width: 14%;
	clip-path: polygon(0 0, 55% 0, 0 100%);
}

/* 右側の斜めブロック — 斜辺オフセット 18% を維持（高さ変更時もこの値は変えない） */
.okuma-page-header::after {
	right: 0;
	width: 42%;
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

/* PC: 帯高さを約1.5倍。左右ブルーの 18% 斜め clip はそのまま */
@media (min-width: 782px) {
	.okuma-page-header:not(.okuma-page-header--curve) {
		padding-top: calc(var(--wp--preset--spacing--xl) * 1.5) !important;
		padding-bottom: calc(var(--wp--preset--spacing--xl) * 1.5) !important;
	}
}

/* SP: タイトル/パンくずを左の三角装飾から離す＋右のブルーを細くして長いタイトルと重ならないようにする
   （--curve は正円デザインで左右の斜め装飾自体が無いため対象外） */
@media (max-width: 781px) {
	.okuma-page-header:not(.okuma-page-header--curve) {
		padding-left: calc(var(--wp--preset--spacing--md) + 2rem) !important;
	}

	.okuma-page-header:not(.okuma-page-header--curve)::after {
		width: 13%;
	}
}

/* 中身（見出し等）は装飾より前面に */
.okuma-page-header > * {
	position: relative;
	z-index: 1;
}

/* Achievement専用: 全面プライマリ＋下端の正円半円カーブ
   使い方: okuma-page-header に加えて okuma-page-header--curve を付与
   通常の斜めアクセント（::after）は無効化し、::before だけを円弧装飾に転用する。
   背景・clip-path を section 自体ではなく ::before に持たせることで、
   円の外側（左右下の角）にロゴ等の子要素を配置してもクリップされないようにする。
   半径は vw 基準の1値のみ（circle()）にすることで、横長・縦長にならず常に正円を維持する。
   PC など横幅が広い環境では上限で頭打ちにして半径を小さいまま保ち、
   スマホなど狭い環境では下限に張り付いて画面幅いっぱい（左右余白ほぼ0）まで広がる。 */
.okuma-page-header.okuma-page-header--curve {
	--okuma-curve-radius: clamp(240px, 32vw, 320px);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	/* 円の頂点（top: radius の位置）が必ずボックス内に収まるよう min-height で確保する。
	   padding-bottom を radius と同値にすると「上端からの余白＋本文の高さ」の分だけ
	   頂点より下に無駄な空白ができるため、min-height 方式に変更した。 */
	min-height: calc(var(--okuma-curve-radius) + 2.5rem);
	padding-bottom: var(--wp--preset--spacing--lg);
}

.okuma-page-header.okuma-page-header--curve::before {
	left: 0;
	right: 0;
	width: auto;
	background-color: var(--wp--preset--color--primary);
	/* center を上端 (cy 0%) に置くことで、常にちょうど正円の下半分だけが見える */
	clip-path: circle(var(--okuma-curve-radius) at 50% 0%);
}

.okuma-page-header.okuma-page-header--curve::after {
	content: none;
	display: none;
}

/* 円の中心から半径の50%分だけ左右にずれた位置(弧の上)に配置するロゴ。
   円の式 y=sqrt(r^2-x^2) より、x=0.5r の高さは y=0.866r になるため、
   top を radius の86.6%にすることで、ちょうど弧の上に乗る形になる。
   translate(-50%,-100%) で自身の中心を弧の位置に、下端を弧のラインに合わせる。 */
.okuma-achievement-partner-logo {
	position: absolute;
	top: calc(var(--okuma-curve-radius) * 0.866);
	z-index: 2;
	height: clamp(36px, 5.5vw, 60px);
}

.okuma-achievement-partner-logo img {
	height: auto;
	width: 220px;
	display: block;
}

.okuma-achievement-partner-logo--left {
	left: calc(50% - var(--okuma-curve-radius) * 1.2);
	transform: translate(-50%, -100%);
	top: calc(var(--okuma-curve-radius) * 0.966);
}
.okuma-achievement-partner-logo--left img{
	width: 240px;
}

.okuma-achievement-partner-logo--right {
	left: calc(50% + var(--okuma-curve-radius) * 1.2);
	transform: translate(-50%, -100%);
}

/* SP: 画面幅に対して円の直径が大きく、「弧の上」の位置だと円の外（画面外）に出てしまうため、
   円の頂点の少し下（白背景に戻った位置）に、左右対称に並べ直す */
@media (max-width: 781px) {
	.okuma-achievement-partner-logo {
		top: calc(var(--okuma-curve-radius) * 0.86);
	}
	.okuma-achievement-partner-logo img {
	width: 30px;
}

	.okuma-achievement-partner-logo--left {
		left: 8%;
		transform: none;
		top: calc(var(--okuma-curve-radius) * 0.94);
	}

	.okuma-achievement-partner-logo--left img{
		width: 70px;
	}
	.okuma-achievement-partner-logo--right {
		left: auto;
		right: 8%;
		transform: none;
	}
}

/* PC/SPでロゴ画像を出し分け（左: logo.svg⇄logomark_blue.svg、右: fukushima_logo.svg⇄fukushima_logo_sp.svg）
   .okuma-achievement-partner-logo img の display:block 指定より優先させるため、親クラスと合わせて詳細度を上げる */
.okuma-achievement-partner-logo .okuma-achievement-partner-logo__img--mobile {
	display: none;
}

@media (max-width: 781px) {
	.okuma-achievement-partner-logo .okuma-achievement-partner-logo__img--desktop {
		display: none;
	}

	.okuma-achievement-partner-logo .okuma-achievement-partner-logo__img--mobile {
		display: block;
	}
}

/* 透かしが大きく縦に伸びる語（Local Hydrogen Network 等） */
.okuma-titleblock.okuma-titleblock--tall {
	--okuma-watermark-offset: 5.5rem;
}

/* 箇条書きマーカーなしリスト（参加メンバー一覧など） */
.okuma-plainlist {
	list-style: none;
	padding-inline-start: 0;
}

/* =========================================================
   サイトヘッダー
   - 上余白は広め、下は詰めて全体高を少し抑える
   - sticky でスクロール時に固定（テンプレートパーツの header に掛ける）
   ========================================================= */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 200;
}

.okuma-site-header {
	/* 上は維持、下を少し広げてsticky時にコンテンツと詰まりすぎないように */
	padding-top: 0.85rem !important;
	padding-bottom: 0.6rem !important;
	position: relative;
	z-index: 200;
	background-color: var(--wp--preset--color--base);
	transition: box-shadow 0.2s ease;
}

.okuma-site-header.is-scrolled {
	box-shadow: 0 2px 14px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.okuma-site-header .okuma-header-cta .wp-block-button__link {
	border-radius: 6px !important;
	line-height: 1.4;
	font-size: var(--wp--preset--font-size--xs); /* sm(1rem) より少し小さく */
	transition: background-color 0.2s ease;
}

.okuma-site-header .okuma-header-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary) !important;
}

/* ロゴ: PC で少し大きく（インライン width を上書き） */
.okuma-site-header .wp-block-image img {
	width: 180px !important;
	height: auto;
}

@media (min-width: 782px) {
	.okuma-site-header .wp-block-image img {
		width: 220px !important;
	}
}

/* SP: ロゴ・ナビ余白・ボタンを詰めて、ハンバーガー行とロゴ行が折り返さず1列に収まるようにする */
@media (max-width: 781px) {
	.okuma-site-header {
		padding-left: calc(var(--wp--preset--spacing--md) / 2) !important;
		padding-right: calc(var(--wp--preset--spacing--md) / 2) !important;
	}

	.okuma-site-header .wp-block-image img {
		width: 170px !important;
	}

	.okuma-site-header .okuma-header-inner {
		gap: var(--wp--preset--spacing--xs) !important;
	}

	.okuma-site-header .okuma-header-actions {
		gap: var(--wp--preset--spacing--xs) !important;
	}

	.okuma-site-header .okuma-header-cta .wp-block-button__link {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
}

/* =========================================================
   フッター直上の余白打ち消し
   .wp-site-blocks の blockGap（margin-block-start）が効いているため
   ========================================================= */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.wp-site-blocks > footer p{
	margin-block-start: 0;
}

/* SP: columnsが縦積みになった際、ロゴ列を中央寄せに */
@media (max-width: 781px) {
	.okuma-footer-info .wp-block-columns > .wp-block-column:first-child {
		display: flex;
		justify-content: center;
	}
}

/* =========================================================
   透かし見出し（背面に大きな英字アウトラインを重ねる）
   使い方:
     - 透かし＋見出しを包む group に className "okuma-titleblock"
     - 透かし画像ブロックに className "okuma-watermark"
   背面文字は語長で幅が変わるため、各ページで画像の width を調整する。
   語が縦に大きい場合は --okuma-watermark-offset を各 titleblock で上書きする。
   ========================================================= */
.okuma-titleblock {
	position: relative;
	padding-top: var(--okuma-watermark-offset, 3.5rem);
}

.okuma-titleblock figure,
.okuma-titleblock .okuma-watermark {
	opacity: 0.7;
}

.okuma-titleblock .okuma-watermark {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}

.okuma-titleblock > :not(.okuma-watermark) {
	position: relative;
	z-index: 1;
}

/* SP: 透かしがはみ出しても崩れないように */
@media (max-width: 600px) {
	.okuma-titleblock .okuma-watermark {
		max-width: 90%;
		height: auto;
	}
}

/* =========================================================
   TOP ヒーロー（top_hero.png 準拠）
   使い方: section group に className "okuma-hero"
     - 左コピー: okuma-hero__copy / lead / title / sub / actions
     - About: okuma-hero-about（斜め枠＋オフセット影）
     - 右ビジュアル: okuma-hero__visual / collage
   ========================================================= */
.okuma-hero {
	position: relative;
	overflow: visible;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	/* Service 左画像の右上と接する程度の控えめな寄せ */
	--okuma-hero-shift: clamp(1.25rem, 2.5vw, 3.5rem);
}

/* Hero → 下帯の blockGap を打ち消し */
.okuma-hero + .okuma-top-flow,
.okuma-top-flow {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.okuma-hero__inner.wp-block-columns {
	min-height: clamp(22rem, 48vw, 32rem);
	align-items: flex-end !important;
	overflow: visible !important;
	column-gap: var(--wp--preset--spacing--md) !important;
}

.okuma-hero__copy {
	padding-right: 0;
	align-self: center !important;
	padding-bottom: var(--wp--preset--spacing--md);
	z-index: 2;
}

.okuma-hero__visual {
	position: relative;
	overflow: visible !important;
	z-index: 1;
	/* レイアウト幅は維持しつつ、見た目だけ左へ大きく寄せる */
	margin-left: 0 !important;
}

.okuma-hero__collage {
	margin: 0;
	line-height: 0;
	position: relative;
	transform: translateX(calc(-1 * var(--okuma-hero-shift)));
	width: calc(100% + var(--okuma-hero-shift));
	max-width: none;
}

.okuma-hero__collage img {
	width: 100%;
	height: auto;
	display: block;
}

/* テキスト塊の幅に合わせて About を中央配置 */
.okuma-hero__copy-stack {
	width: fit-content;
	max-width: 100%;
}

.okuma-hero__copy-stack > * {
	max-width: 100%;
}

/* 「大熊」「世界」を強調、接続詞は小さめ・濃色 */
.okuma-hero__lead {
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
	margin-block-end: 0.35em !important;
	color: var(--wp--preset--color--contrast);
}

.okuma-hero__lead mark.has-inline-color {
	font-size: 1.15em;
	font-weight: 800;
	padding: 0;
}

.okuma-hero__title {
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	margin-block-start: 0 !important;
	margin-block-end: 1rem !important;
}

.okuma-hero__sub {
	line-height: 1.75;
	font-weight: 500;
}

.okuma-hero__actions {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* About: skew で平行四辺形化（clip-path だと枠線が左右で切れる）
   影は同形の疑似要素。ラベルは逆 skew で文字を直立に戻す */
.okuma-hero-about {
	--okuma-hero-about-skew: -16deg;
	position: relative;
	isolation: isolate;
}

.okuma-hero-about .wp-block-button__link {
	position: relative;
	z-index: 1;
	border-radius: 0 !important;
	border-color: var(--wp--preset--color--primary) !important;
	background-color: var(--wp--preset--color--base) !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding-left: 2.75rem !important;
	padding-right: 2.75rem !important;
	min-width: 10.5rem;
	text-align: center;
	transform: skewX(var(--okuma-hero-about-skew));
	transition: transform 0.2s ease;
}

.okuma-hero-about__label {
	display: inline-block;
	transform: skewX(calc(var(--okuma-hero-about-skew) * -1));
}

.okuma-hero-about::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--primary);
	transform: translate(0.45rem, 0.45rem) skewX(var(--okuma-hero-about-skew));
	pointer-events: none;
	transition: transform 0.2s ease;
}

.okuma-hero-about:hover .wp-block-button__link {
	transform: translate(2px, 2px) skewX(var(--okuma-hero-about-skew));
}

.okuma-hero-about:hover::after {
	transform: translate(0.3rem, 0.3rem) skewX(var(--okuma-hero-about-skew));
}

@media (max-width: 781px) {
	.okuma-hero__inner.wp-block-columns {
		min-height: 0;
		align-items: stretch !important;
	}

	.okuma-hero__copy {
		padding-right: 0;
		padding-bottom: var(--wp--preset--spacing--md);
		align-self: stretch !important;
	}

	.okuma-hero__collage {
		transform: none;
		width: 100%;
	}

	.okuma-hero__lead {
		font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
	}
}

/* =========================================================
   TOP mid 帯（top_02.png）— Service / Technology / Factory
   要所:
   - service.png 一番右のライン → .okuma-flow-rail の斜めラインへ接続
   - Technology 左端写真の左辺に密着
   - そのまま Factory コーナーまで高さ追従で伸ばす
   角度実測: dx/dy ≈ -0.1809 → 垂直から約 10.25°
   ========================================================= */
.okuma-top-flow {
	--okuma-flow-skew: -10.25deg;
	--okuma-flow-slope: 0.1809;
	--okuma-flow-line: color-mix(in srgb, var(--wp--preset--color--primary) 75%, transparent);
	/* service.png 原寸 600px。右端ライン延長。わずかに左へ */
	--okuma-svc-w: min(37.5rem, 100%);
	--okuma-guide-ratio: 0.87;
	--okuma-guide-x: calc(var(--okuma-svc-w) * var(--okuma-guide-ratio));
	--okuma-guide-nudge: calc(0.35rem - 9px); /* 見た目で約9px右へ */
	/* Tech / Factory 写真帯をラインに沿わせる共通オフセット */
	--okuma-rail-content-shift: calc(0.6rem + 10px);
	--okuma-rail-inset: calc(
		var(--okuma-guide-x) - var(--okuma-guide-nudge) + var(--okuma-rail-content-shift)
	);
	position: relative;
	/* skew ラインのはみ出しで横スクロールが出ないようにする */
	overflow-x: clip;
	overflow-y: visible;
	background-color: var(--wp--preset--color--base);
}

.okuma-top-flow > * {
	position: relative;
	z-index: 1;
}

.okuma-top-flow .okuma-flow-service,
.okuma-top-flow .okuma-flow-tech,
.okuma-top-flow .okuma-flow-factory,
.okuma-top-flow .okuma-flow-rail {
	margin-block: 0;
}

/* Service → Technology の縦余白をゼロ */
.okuma-flow-service {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.okuma-flow-service + .okuma-flow-rail,
.okuma-flow-rail {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.okuma-flow-service__graphic,
.okuma-flow-factory__graphic {
	margin: 0;
	line-height: 0;
	width: fit-content;
	max-width: 100%;
}

.okuma-flow-service__graphic img,
.okuma-flow-factory__graphic img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}

.okuma-flow-factory__graphic img {
	/* 447px 原寸。ガイド右の帯に収まるよう上限を維持 */
	max-width: min(27.9375rem, 100%);
	max-height: min(36rem, 70vh);
}

.okuma-flow-service {
	overflow: visible;
}

.okuma-flow-service__visual {
	position: relative;
	z-index: 2;
	overflow: visible;
}

.okuma-flow-service__graphic {
	position: relative;
	overflow: visible;
}

.okuma-flow-service__title {
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

.okuma-flow-service__title mark.has-inline-color {
	padding: 0;
	font-weight: 800;
}

/* ---------------------------------------------------------
   Tech + Factory 共通レール
   Technology〜Factory 全体の高さにラインが追従する
   --------------------------------------------------------- */
.okuma-flow-rail {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	isolation: isolate;
}

/*
 * 1本の斜めライン:
 * - left は service.png 右端ラインの延長
 * - top/bottom:0 で Tech+Factory の合計高さに伸びる
 * - ギャラリー左端写真に密着させるため、写真の inset と同じ x を使う
 */
.okuma-flow-rail::before {
	content: "";
	position: absolute;
	/* wide(1320) 左端 + service.png 右端ライン位置（わずかに左へ） */
	left: calc(
		max(
			var(--wp--style--root--padding-left, var(--wp--preset--spacing--md)),
			(100% - 1320px) / 2
		) + var(--okuma-guide-x) - var(--okuma-guide-nudge)
	);
	top: 0;
	bottom: 0;
	width: 1.5px;
	margin-left: -0.75px;
	background-color: var(--okuma-flow-line);
	transform: skewX(var(--okuma-flow-skew));
	transform-origin: top left;
	pointer-events: none;
	z-index: 5;
}

.okuma-flow-tech {
	overflow: visible;
	padding-top: 0 !important;
	/* tech01〜04 = 345×295。斜度×縦横比から、ギャラリー幅に対する重なり％を算出
	   k = slope * (h/w) / (4 - 3 * slope * (h/w)) ≈ 4.37% */
	--okuma-tech-img-aspect: calc(295 / 345);
	--okuma-tech-overlap-k: calc(var(--okuma-flow-slope) * var(--okuma-tech-img-aspect));
	--okuma-tech-overlap-pct: calc(
		var(--okuma-tech-overlap-k) / (4 - 3 * var(--okuma-tech-overlap-k)) * 100%
	);
}

.okuma-flow-tech__bridge {
	position: relative;
	overflow: visible;
	/* Technology コーナー内の上下余白は維持 */
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--lg);
	margin-top: 0;
	box-sizing: border-box;
}

.okuma-flow-tech__heading {
	gap: 0.65rem 1rem;
	justify-content: center !important;
	/* ライン右側（写真帯）で中央寄せ */
	margin-left: var(--okuma-rail-inset);
	width: calc(100% - var(--okuma-rail-inset));
	max-width: calc(100% - var(--okuma-rail-inset));
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.okuma-flow-tech__heading .wp-block-image {
	margin: 0;
}

.okuma-flow-tech__heading .wp-block-image img {
	width: min(23.75rem, 100%) !important;
	height: auto;
}

.okuma-flow-tech__heading .wp-block-heading {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
}

/* 左端写真をラインに密着。斜め画像同士は % 重なりで三角余白を消す */
.okuma-flow-tech__gallery {
	gap: 0 !important;
	--wp--style--gallery-gap-default: 0;
	margin-left: var(--okuma-rail-inset) !important;
	width: calc(100% - var(--okuma-rail-inset)) !important;
	max-width: calc(100% - var(--okuma-rail-inset));
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	container-type: inline-size;
	container-name: okuma-tech-gallery;
}

/* 4枚を必ず1行に。重なり量はギャラリー幅の % でリサイズ追従 */
.okuma-flow-tech__gallery.wp-block-gallery.has-nested-images {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0 !important;
}

.okuma-flow-tech__gallery.wp-block-gallery.has-nested-images > .wp-block-image {
	position: relative;
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	aspect-ratio: 345 / 295;
}

.okuma-flow-tech__gallery.wp-block-gallery.has-nested-images > .wp-block-image:not(:first-child) {
	/* % はギャラリー（包含ブロック）幅基準 → rem固定より崩れにくい */
	margin-left: calc(-1 * var(--okuma-tech-overlap-pct)) !important;
}

.okuma-flow-tech__gallery.wp-block-gallery.has-nested-images > .wp-block-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Technology ボタンは写真列の下で中央（ガイド右の帯に合わせる） */
.okuma-flow-tech__actions {
	margin-left: var(--okuma-rail-inset) !important;
	width: calc(100% - var(--okuma-rail-inset)) !important;
	max-width: calc(100% - var(--okuma-rail-inset));
	box-sizing: border-box;
}

.okuma-flow-factory {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	z-index: 2;
	/*
	 * 写真はラインの左側。右上（PNG右辺斜め）がライン左に密着する。
	 * line-x = ガイド位置 − 斜度×ドロップ ＋ 全体の右寄せ（%）
	 */
	--okuma-factory-drop: clamp(18rem, 42vw, 30rem);
	--okuma-factory-shift: 5%; /* 全体を右へ */
	--okuma-factory-line-x: max(
		0px,
		calc(
			var(--okuma-guide-x) - var(--okuma-guide-nudge)
			- (var(--okuma-factory-drop) * var(--okuma-flow-slope))
			+ var(--okuma-factory-shift)
		)
	);
}

.okuma-flow-factory__row {
	margin-left: 0 !important;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	padding-left: 0;
}

/*
 * 左列の幅＝ライン位置。中で写真を右寄せし、右上をライン左に当てる。
 * （Tech の「ライン右に写真」とは逆）
 */
@media (min-width: 782px) {
	.okuma-flow-factory__visual {
		flex-basis: var(--okuma-factory-line-x) !important;
		width: var(--okuma-factory-line-x) !important;
		max-width: var(--okuma-factory-line-x);
		flex-grow: 0 !important;
		flex-shrink: 0 !important;
		min-width: 0;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
	}

	.okuma-flow-factory__graphic {
		margin-left: auto;
		margin-right: 0;
		max-width: 100%;
	}

	.okuma-flow-factory__graphic img {
		max-width: 100%;
		width: auto;
		height: auto;
		max-height: min(36rem, 70vh);
	}

	.okuma-flow-factory__copy {
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

.okuma-flow-factory__title {
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin-block-end: 0.75rem !important;
}

/* 共有フローボタン（About と同形の skew 平行四辺形＋影） */
.okuma-flow-btn {
	--okuma-flow-btn-skew: -16deg;
	position: relative;
	isolation: isolate;
}

.okuma-flow-btn .wp-block-button__link {
	position: relative;
	z-index: 1;
	border-radius: 0 !important;
	border-color: var(--wp--preset--color--primary) !important;
	background-color: var(--wp--preset--color--base) !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding-left: 2.75rem !important;
	padding-right: 2.75rem !important;
	min-width: 10.5rem;
	text-align: center;
	transform: skewX(var(--okuma-flow-btn-skew));
	transition: transform 0.2s ease;
}

.okuma-flow-btn__label {
	display: inline-block;
	transform: skewX(calc(var(--okuma-flow-btn-skew) * -1));
}

.okuma-flow-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--primary);
	transform: translate(0.45rem, 0.45rem) skewX(var(--okuma-flow-btn-skew));
	pointer-events: none;
	transition: transform 0.2s ease;
}

.okuma-flow-btn:hover .wp-block-button__link {
	transform: translate(2px, 2px) skewX(var(--okuma-flow-btn-skew));
}

.okuma-flow-btn:hover::after {
	transform: translate(0.3rem, 0.3rem) skewX(var(--okuma-flow-btn-skew));
}

@media (max-width: 781px) {
	.okuma-flow-rail::before {
		display: none;
	}

	.okuma-flow-tech__heading,
	.okuma-flow-tech__gallery,
	.okuma-flow-tech__actions {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100%;
	}

	.okuma-flow-factory__row {
		padding-left: 0;
		margin-left: 0 !important;
		max-width: 100%;
	}

	.okuma-flow-factory__visual,
	.okuma-flow-factory__copy {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
		display: block;
	}

	.okuma-flow-factory__graphic {
		margin-left: 0;
		margin-right: auto;
	}

	/* SP でも % 重なり＋nowrap を維持（幅に追従） */
	.okuma-flow-tech__gallery.wp-block-gallery.has-nested-images {
		flex-wrap: nowrap !important;
	}

	.okuma-flow-tech__heading .wp-block-image img {
		width: min(18rem, 85vw) !important;
	}
}

/* =========================================================
   TOP Achievement（top_03.png）
   - 右写真はブラウザ右端に寄せる（自然サイズ・引き延ばしなし）
   - 100vw ブレイクアウト禁止（横スクロールの原因になる）
   - CTA との縦余白は 0
   ========================================================= */
.okuma-achievement {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	margin-bottom: 0;
	box-sizing: border-box;
	/* has-background を外したので、背景はここで指定 */
	background-color: var(--wp--preset--color--base);
	/*
	 * 右余白の主因だった section 側の余白を強制ゼロ
	 * （.has-background の既定 padding / インライン以外の左右余白）
	 */
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	/*
	 * main(constrained) 内の alignfull はルート左右 padding を打ち消さないため、
	 * padding 分だけ負マージンでビューポート端まで伸ばす（100vw は使わない）
	 */
	width: calc(
		100% + var(--wp--style--root--padding-left, var(--wp--preset--spacing--md))
			+ var(--wp--style--root--padding-right, var(--wp--preset--spacing--md))
	);
	max-width: none;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, var(--wp--preset--spacing--md))) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, var(--wp--preset--spacing--md))) !important;
}

/* columns 自体の右余白・gap も右端を塞がないように */
.okuma-achievement__inner.wp-block-columns {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	/* テキスト左位置を他セクションの wide(1320) 中央と揃える */
	padding-left: max(var(--wp--preset--spacing--md), calc((100% - 1320px) / 2));
	padding-right: 0 !important;
	align-items: center;
	column-gap: var(--wp--preset--spacing--md);
}

.okuma-achievement__copy {
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	width: min(34rem, 42%) !important;
	max-width: 34rem;
}

.okuma-achievement__visual {
	flex: 1 1 auto !important;
	flex-basis: 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	justify-content: flex-end; /* 写真を右端へ */
	align-items: center;
}

.okuma-achievement__stack {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto 0;
}

.okuma-achievement__title {
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
	margin-block-end: 1rem !important;
	text-align: center;
	color: var(--wp--preset--color--contrast);
}

.okuma-achievement__title mark.has-inline-color {
	padding: 0;
	font-weight: 800;
}

.okuma-achievement__title-rest {
	font-size: 0.72em;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.okuma-achievement__lead {
	line-height: 1.85;
}

.okuma-achievement__graphic {
	margin: 0 !important;
	line-height: 0;
	width: fit-content;
	max-width: 100%;
}

/* 引き延ばし禁止: 幅100%固定や min-height + cover は使わない */
.okuma-achievement__graphic img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(40.999rem, 70vh); /* 大きすぎるときだけ縮小 */
}

/* Achievement → CTA の blockGap を打ち消し */
.okuma-achievement + .okuma-cta-contact,
.okuma-cta-contact {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Achivement: About と同型の skew 平行四辺形＋オフセット影 */
.okuma-achievement-btn {
	--okuma-achievement-btn-skew: -16deg;
	position: relative;
	isolation: isolate;
}

.okuma-achievement-btn .wp-block-button__link {
	position: relative;
	z-index: 1;
	border-radius: 0 !important;
	border-color: var(--wp--preset--color--primary) !important;
	background-color: var(--wp--preset--color--base) !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	min-width: 11rem;
	text-align: center;
	transform: skewX(var(--okuma-achievement-btn-skew));
	transition: transform 0.2s ease;
}

.okuma-achievement-btn__label {
	display: inline-block;
	transform: skewX(calc(var(--okuma-achievement-btn-skew) * -1));
}

.okuma-achievement-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--primary);
	transform: translate(0.45rem, 0.45rem) skewX(var(--okuma-achievement-btn-skew));
	pointer-events: none;
	transition: transform 0.2s ease;
}

.okuma-achievement-btn:hover .wp-block-button__link {
	transform: translate(2px, 2px) skewX(var(--okuma-achievement-btn-skew));
}

.okuma-achievement-btn:hover::after {
	transform: translate(0.3rem, 0.3rem) skewX(var(--okuma-achievement-btn-skew));
}

@media (max-width: 781px) {
	.okuma-achievement__inner {
		padding-left: var(--wp--preset--spacing--md);
		padding-right: 0;
	}

	.okuma-achievement__copy {
		width: 100% !important;
		max-width: none;
		flex-basis: 100% !important;
	}

	.okuma-achievement__stack {
		margin-inline: auto;
		margin-bottom: var(--wp--preset--spacing--md);
	}

	.okuma-achievement__title {
		font-size: clamp(1.5rem, 5.5vw, 2.25rem) !important;
	}

	.okuma-achievement__visual {
		flex-basis: 100% !important;
		width: 100% !important;
		justify-content: flex-end;
	}

	.okuma-achievement__graphic img {
		max-height: none;
		max-width: min(100%, 28rem);
	}
}