/**
 * Layout — Header
 * ヘッダー（ロゴ・gnav・CTA・MENU）モバイルファースト
 * サイト検索は非表示
 */

/* --------------------------------------------------------------------------
 * Top content
 * -------------------------------------------------------------------------- */
.top #content,
.u-fullBleedHero #content {
	max-width: 100%;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.top #main_content,
.u-fullBleedHero #main_content {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
 * Sub page content background
 * トップページ以外の #content に、.p-home-tech と同じグレー×白格子背景を、
 * PC幅でも画面幅いっぱいに敷く（#content 自体の幅・パディングは変えず、
 * 背景だけ ::before で画面幅まではみ出させる）.
 * #content は SWELL側で position:relative; z-index:1 済みのため、
 * ::before はそのスタッキングコンテキスト内に留まる.
 * -------------------------------------------------------------------------- */
body:not(.top):not(.page-museum) #content::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	margin-left: -50vw;
	background-color: transparent;
	background-image:
		linear-gradient(to right, #fff 1px, transparent 1px),
		linear-gradient(to bottom, #fff 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center center;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Site-wide fixed gradient
 * 格子の上にふわっとしたグラデーションを重ね、画面に固定する.
 * 画像は白地＋淡い色味なので multiply で白を消し、色だけを重ねる.
 * iOS でも固定するため background-attachment ではなく実要素の position: fixed を使う.
 * z-index は #content（1）より後ろ。格子の塗りは透明にして、このレイヤーが透けて見えるようにする.
 * -------------------------------------------------------------------------- */
.c-bg-gradient {
	position: fixed;
	inset: 0;
	z-index: 0;
	opacity: 0.6;
	pointer-events: none;
	background-image: url("../img/bg-gradient.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
 * Hide search UI
 * -------------------------------------------------------------------------- */
.c-gnav__s,
.l-header__customBtn,
#search_modal,
.p-searchModal,
.c-iconList__link[data-onclick="toggleSearch"],
.l-fixBottomMenu [data-onclick="toggleSearch"] {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Header shell
 * -------------------------------------------------------------------------- */
.c-header--fujita.l-header {
	position: relative;
	z-index: 20;
	background: linear-gradient(to bottom,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.84) 100%);
	border-bottom: none;
	box-shadow: none;
}

.c-header--fujita .l-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	max-width: calc(100% - 80px);
	min-height: var(--header-height);
	margin-left: 0;
	border-right: 1px solid #ebebeb;
}

.c-header--fujita .l-header__logo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	flex-shrink: 1;
	align-items: flex-start;
	align-self: flex-start;
	justify-content: flex-start;
	gap: 2px;
	position: relative;
	margin-right: 0;
	min-width: 0;
}

.c-header--fujita .c-headLogo__link {
	height: auto;
}

.c-header--fujita .c-catchphrase {
	order: -1;
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--color-text);
}

.c-header--fujita .c-headLogo {
	margin: 0;
	padding-top: 10px;
}

.c-header--fujita .c-headLogo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 44px;
}

.c-header--fujita .l-header__gnav {
	display: none;
}

.c-header--fujita .l-header__cta {
	display: none;
}

/* --------------------------------------------------------------------------
 * MENU button（PC/SP共通・右上 fixed 常駐）
 * -------------------------------------------------------------------------- */
.c-header--fujita .l-header__menuBtn,
.c-header--fujita .c-header-menu {
	display: block !important;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;
	width: 80px;
	height: var(--header-height, 96px);
	margin: 0 !important;
	padding: 0 !important;
	background-color: #fff;
	border-radius: 0 0 0 12px;
}

/* 追従ヘッダー内は本体が fixed のため重複を出さない */
.l-fixHeader.c-header--fujita .l-header__menuBtn,
.l-fixHeader.c-header--fujita .c-header-menu {
	display: none !important;
}

/* ドロワー表示中は CLOSE と位置が重なるため MENU を隠す */
[data-spmenu="opened"] .c-header--fujita .l-header__menuBtn,
[data-spmenu="opened"] .c-header--fujita .c-header-menu {
	visibility: hidden;
	pointer-events: none;
}

/* SP: ロゴ左（〜767px） */
@media not all and (min-width: 768px) {
	.c-header--fujita .l-header__logo,
	.l-fixHeader.c-header--fujita .l-fixHeader__logo {
		order: 1 !important;
		margin-right: 0 !important;
		padding: 0 4vw;
		text-align: left !important;
	}
}

.c-header-menu__btn {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	min-width: 80px;
	min-height: var(--header-height, 96px);
	padding: 8px 10px;
	color: var(--color-blue-navy);
	text-decoration: none;
}

.c-header-menu__btn:hover,
.c-header-menu__btn:focus-visible {
	opacity: 0.8;
	text-decoration: none;
}

.c-header-menu__btn > .c-iconBtn__icon {
	display: none;
}

.c-header-menu__bars {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	width: 35px;
}

.c-header-menu__bar {
	display: block;
	height: 5px;
}

.c-header-menu__bar--1 {
	width: 100%;
	background-color: var(--color-blue-navy);
}

.c-header-menu__bar--2 {
	width: 66.666%;
	background-color: var(--color-blue-sky);
}

.c-header-menu__bar--3 {
	width: 33.333%;
	background-color: var(--color-green);
}

.c-header-menu__label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--color-navy);
	text-transform: uppercase;
}

/* 極小幅（〜369px）: MENUボタンを縮小してロゴ側との衝突を避ける */
@media (max-width: 369px) {
	.c-header--fujita .l-header__inner {
		max-width: calc(100% - 64px);
		min-height: 72px;
	}

	.c-headLogo {
		height: 72px;
	}

	.c-header--fujita .c-headLogo__link {
		padding: 0;
	}

	.c-header--fujita .l-header__menuBtn,
	.c-header--fujita .c-header-menu {
		width: 64px;
		height: 72px;
	}

	.c-header-menu__btn {
		gap: 4px;
		min-width: 64px;
		min-height: 72px;
		padding: 6px 8px;
	}

	.c-header-menu__bars {
		gap: 6px;
		width: 28px;
	}

	.c-header-menu__bar {
		height: 4px;
	}
}

/* --------------------------------------------------------------------------
 * Header CTA
 * -------------------------------------------------------------------------- */
.c-header-cta {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-header-cta__link {
	display: inline-flex;
	position: relative;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	max-width: 280px;
	min-height: 34px;
	padding: 0.45em 1.1em;
	border: none;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.c-header-cta__link:hover,
.c-header-cta__link:focus-visible {
	opacity: 0.85;
	text-decoration: none;
}

.c-header-cta__link--stories {
	color: var(--color-white);
	background-color: var(--color-blue-sky);
}

.c-header-cta__link--news {
	color: var(--color-blue-sky);
	background-color: var(--color-bg);
}

.c-header-cta__link--news::after {
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-blue-sky);
	border-radius: inherit;
	pointer-events: none;
	content: "";
}

.c-header-cta__link--contact,
.c-header-cta__link--default {
	color: var(--color-white);
	background-image: var(--grad-cta-slide);
	background-size: 200% 100%;
	background-position: 0% 0%;
	transition: background-position 0.4s ease;
}

.c-header-cta__link--contact:hover,
.c-header-cta__link--contact:focus-visible,
.c-header-cta__link--default:hover,
.c-header-cta__link--default:focus-visible {
	opacity: 1;
	background-position: 100% 0%;
}

/* --------------------------------------------------------------------------
 * Fix header
 * -------------------------------------------------------------------------- */
.l-fixHeader.c-header--fujita {
	z-index: 20;
	background-color: var(--color-bg);
	border-bottom: none;
	box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}

.l-fixHeader.c-header--fujita .l-fixHeader__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	min-height: 56px;
}

.l-fixHeader.c-header--fujita .l-fixHeader__logo {
	flex: 1 1 auto;
	flex-shrink: 1;
	margin-right: 0;
	min-width: 0;
}

.l-fixHeader.c-header--fujita .l-fixHeader__gnav {
	display: none;
}

.l-fixHeader.c-header--fujita .l-fixHeader__cta {
	display: none;
}

/* --------------------------------------------------------------------------
 * Header layout
 * - 768px+: CTA 表示（ロゴ + CTA + MENU）
 * - 960px+: gnav 追加（ロゴ | CTA／gnav 2段 + MENU）
 * - 1680px+: ロゴ・gnav・CTA・MENU を1行横並び
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.c-header--fujita .l-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 72px;
		padding-top: 0;
		padding-right: 36px;
		padding-bottom: 0;
		padding-left: var(--section-pad-x);
	}

	.c-header--fujita .l-header__logo {
		flex: 1 1 auto;
		margin-right: 0;
		max-width: none;
		padding: 0;
	}

	.c-header--fujita .c-catchphrase {
		font-size: 11px;
	}

	.c-header--fujita .c-headLogo img {
		max-height: 48px;
	}

	.c-header--fujita .l-header__gnav {
		display: none;
	}

	.c-header--fujita .l-header__cta {
		display: block;
		flex-shrink: 0;
	}

	.c-header--fujita .c-header-cta {
		gap: 10px;
	}

	.c-header--fujita .c-header-cta__link {
		width: 128px;
		min-height: 34px;
		max-height: 34px;
		padding: 0 1.15em;
		font-size: 0.875rem;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__inner {
		gap: 16px;
		min-height: 64px;
		padding-right: 96px;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__cta {
		display: block;
		flex-shrink: 0;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__gnav {
		display: none;
	}
}

@media (min-width: 960px) {
	.c-header--fujita .l-header__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 28px;
		row-gap: 12px;
		align-items: center;
		width: calc(100% - 96px);
		min-height: 120px;
		padding-top: 14px;
		padding-bottom: 14px;
		padding-left: 3vw;
	}

	.c-header--fujita .l-header__logo {
		grid-row: 1 / -1;
		grid-column: 1;
		flex: none;
		align-self: flex-start;
		max-width: 273px;
		padding: 0;
	}

	.c-header--fujita .c-headLogo img {
		max-height: 58px;
	}

	.c-header--fujita .l-header__cta {
		display: block;
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
	}

	.c-header--fujita .l-header__gnav {
		display: block;
		grid-row: 2;
		grid-column: 2;
		justify-self: end;
		width: auto;
		min-width: 0;
	}

	.c-header--fujita .c-gnav {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0 2em;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.c-header--fujita .c-gnav > .menu-item {
		position: relative;
	}

	.c-header--fujita .c-gnav > .menu-item > a {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 0.75em;
		padding: 0.35em 0;
		font-size: 14px;
		font-weight: 700;
		color: var(--color-text);
		text-decoration: none;
		white-space: nowrap;
	}

	.c-header--fujita .c-gnav > .menu-item > a::after {
		display: none;
	}

	.c-header--fujita .c-gnav > .menu-item > a .ttl {
		font-size: 1.0625rem;
	}

	.c-header--fujita .c-gnav > .menu-item > a:hover,
	.c-header--fujita .c-gnav > .menu-item > a:focus-visible,
	.c-header--fujita .c-gnav > .menu-item.current-menu-item > a,
	.c-header--fujita .c-gnav > .menu-item.current-menu-ancestor > a {
		color: var(--color-blue);
		text-decoration: none;
	}

	/* 子あり：左に icon-arrow.svg */
	.c-header--fujita .c-gnav > .menu-item-has-children > a::before {
		content: "";
		display: inline-block;
		flex-shrink: 0;
		width: 8px;
		height: 14px;
		background: url(../img/icon-arrow.svg) no-repeat center center / contain;
		filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1505%)
			hue-rotate(166deg) brightness(98%) contrast(101%);
	}

	/* ドロップダウン */
	.c-header--fujita .c-gnav .sub-menu {
		display: none;
		position: absolute;
		z-index: 30;
		top: calc(100% + 4px);
		left: 0;
		width: fit-content;
		margin: 0;
		padding: 4px 0;
		border: 2px solid var(--color-blue-sky);
		border-radius: 10px;
		opacity: 1;
		visibility: visible;
		background-color: var(--color-white);
		box-shadow: none;
		list-style: none;
		transform: none;
	}

	.c-header--fujita .c-gnav > .menu-item-has-children:hover > .sub-menu,
	.c-header--fujita .c-gnav > .menu-item-has-children:focus-within > .sub-menu,
	.c-header--fujita .c-gnav > .menu-item-has-children.is-opened > .sub-menu {
		display: block;
	}

	.c-header--fujita .c-gnav .sub-menu .menu-item {
		margin: 0;
	}

	.c-header--fujita .c-gnav .sub-menu a {
		display: block;
		padding: 0.7em 1.4em;
		border: none;
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.4;
		color: var(--color-text);
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		background: transparent;
	}

	.c-header--fujita .c-gnav .sub-menu a::before {
		display: none;
	}

	.c-header--fujita .c-gnav .sub-menu a:hover,
	.c-header--fujita .c-gnav .sub-menu a:focus-visible {
		color: var(--color-blue);
		text-decoration: none;
		background-color: transparent;
	}

	.c-header--fujita .c-header-cta__link {
		min-height: 40px;
		max-height: 40px;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 20px;
		row-gap: 4px;
		align-items: center;
		min-height: 72px;
		padding-right: 96px;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__logo {
		grid-row: 1 / -1;
		grid-column: 1;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__cta {
		display: block;
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__gnav {
		display: block;
		grid-row: 2;
		grid-column: 2;
		justify-self: end;
		min-width: 0;
	}

	.c-header--fujita .l-header__menuBtn, .c-header--fujita .c-header-menu {
		width: 96px;
		height: 120px;
	}

	.c-header-menu__btn {
		gap: 10px;
		width: 96px;
		height: 120px;
	}

	.c-header-menu__label {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.c-header--fujita .c-headLogo img {
		max-height: 65px;
	}
}

@media (min-width: 1560px) {
	.c-header--fujita .l-header__inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 3vw;
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 4vw;
	}

	.c-header--fujita .l-header__logo {
		flex: 0 0 auto;
		grid-row: auto;
		grid-column: auto;
		max-width: 360px;
	}

	.c-header--fujita .l-header__gnav {
		display: block;
		flex: 1 1 auto;
		grid-row: auto;
		grid-column: auto;
		justify-self: auto;
		min-width: 0;
	}

	.c-header--fujita .c-gnav {
		justify-content: flex-start;
		gap: 42px;
	}

	.c-header--fujita .l-header__cta {
		display: block;
		flex-shrink: 0;
		grid-row: auto;
		grid-column: auto;
		justify-self: auto;
	}

	.c-header--fujita .c-header-cta__link {
		min-height: 48px;
		max-height: 48px;
		padding: 0 1.25em;
		font-size: 1rem;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20px;
		min-height: 72px;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__logo {
		flex: 0 0 auto;
		grid-row: auto;
		grid-column: auto;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__gnav {
		display: block;
		flex: 1 1 auto;
		grid-row: auto;
		grid-column: auto;
		justify-self: auto;
		min-width: 0;
	}

	.l-fixHeader.c-header--fujita .l-fixHeader__cta {
		display: block;
		flex-shrink: 0;
		grid-row: auto;
		grid-column: auto;
		justify-self: auto;
	}
}

@media (min-width: 1680px) {
	.c-header--fujita .c-header-cta__link {
		min-width: 152px;
	}
}

/* --------------------------------------------------------------------------
 * SP / Tablet drawer（右から・幅指定）
 * - 〜399px: 幅100%
 * - 400px〜: 右サイド 354px
 * -------------------------------------------------------------------------- */
.p-spMenu.c-spMenu--fujita {
	display: block;
}

[data-loaded="false"] .p-spMenu.c-spMenu--fujita {
	display: none;
}

/* PCでも MENU で開くため SWELL の display:none を解除 */
@media (min-width: 960px) {
	.p-spMenu.c-spMenu--fujita {
		display: block;
	}

	[data-loaded="false"] .p-spMenu.c-spMenu--fujita {
		display: none;
	}
}

.p-spMenu.c-spMenu--fujita .p-spMenu__inner {
	left: auto;
	right: 0;
	width: 100%;
	max-width: 100%;
	padding-top: var(--header-height, 56px);
	background-color: var(--color-bg);
	box-shadow: -4px 0 24px rgb(0 0 0 / 8%);
	transform: translateX(100%);
}

.p-spMenu.c-spMenu--fujita.-left .p-spMenu__inner {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.p-spMenu.c-spMenu--fujita .p-spMenu__inner::before {
	display: none;
}

[data-spmenu="opened"] .p-spMenu.c-spMenu--fujita .p-spMenu__inner,
[data-spmenu="opened"] .p-spMenu.c-spMenu--fujita.-left .p-spMenu__inner {
	transform: translateX(0);
}

.p-spMenu.c-spMenu--fujita .p-spMenu__closeBtn {
	right: 0;
	left: auto;
	display: block;
	width: 80px;
	height: var(--header-height, 96px);
	background-color: #fff;
	border-left: none;
	border-radius: 0 0 0 12px;
}

.p-spMenu.c-spMenu--fujita.-left .p-spMenu__closeBtn {
	right: 0;
	left: auto;
}

.p-spMenu.c-spMenu--fujita .c-spMenu__close {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	min-width: 80px;
	min-height: var(--header-height, 96px);
	padding: 8px 10px;
	color: var(--color-navy);
	text-decoration: none;
}

.p-spMenu.c-spMenu--fujita .c-spMenu__close:hover,
.p-spMenu.c-spMenu--fujita .c-spMenu__close:focus-visible {
	opacity: 0.8;
	text-decoration: none;
}

.p-spMenu.c-spMenu--fujita .c-spMenu__close > .c-iconBtn__icon {
	display: none;
}

.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon {
	display: block;
	position: relative;
	width: 35px;
	height: 29px;
}

.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon::before,
.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 5px;
}

.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon::before {
	background-color: var(--color-blue-sky);
	transform: translate(-50%, -50%) rotate(45deg);
}

.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon::after {
	background-color: var(--color-green);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.p-spMenu.c-spMenu--fujita .c-spMenu__closeLabel {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--color-navy);
	text-transform: uppercase;
}

/* 960px以上: CLOSEボタンをMENUボタン（.c-header-menu__btn）のサイズに合わせる */
@media (min-width: 960px) {
	.p-spMenu.c-spMenu--fujita .p-spMenu__inner {
		padding-top: 120px;
	}

	.p-spMenu.c-spMenu--fujita .p-spMenu__closeBtn {
		width: 96px;
		height: 120px;
	}

	.p-spMenu.c-spMenu--fujita .c-spMenu__close {
		gap: 10px;
		min-width: 96px;
		min-height: 120px;
	}

	.p-spMenu.c-spMenu--fujita .c-spMenu__closeLabel {
		font-size: 1rem;
	}
}

/* 極小幅（〜369px）: CLOSEボタンをMENUボタンと同比率で縮小 */
@media (max-width: 369px) {
	.p-spMenu.c-spMenu--fujita .p-spMenu__inner {
		padding-top: 72px;
	}

	.p-spMenu.c-spMenu--fujita .p-spMenu__closeBtn {
		width: 64px;
		height: 72px;
	}

	.p-spMenu.c-spMenu--fujita .c-spMenu__close {
		gap: 4px;
		min-width: 64px;
		min-height: 72px;
		padding: 6px 8px;
	}

	.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon {
		width: 28px;
		height: 24px;
	}

	.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon::before,
	.p-spMenu.c-spMenu--fujita .c-spMenu__closeIcon::after {
		height: 4px;
	}
}

.p-spMenu.c-spMenu--fujita .p-spMenu__body {
	padding: 8px 0 40px;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__nav {
	margin-top: 0;
	padding-bottom: 0;
}

/* SPナビ：モック寄せ（区切り線・太字・アコーディオン） */
.p-spMenu.c-spMenu--fujita .c-spnav {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #EBEBEB;
}

.p-spMenu.c-spMenu--fujita .c-spnav > .menu-item {
	border-bottom: 1px solid #EBEBEB;
}

.p-spMenu.c-spMenu--fujita .c-spnav > .menu-item > a {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 1.05em 52px 1.05em 20px;
	border-bottom: none;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--color-text);
	text-decoration: none;
	background-color: transparent;
}

.p-spMenu.c-spMenu--fujita .c-spnav > .menu-item > a:hover,
.p-spMenu.c-spMenu--fujita .c-spnav > .menu-item > a:focus-visible {
	color: var(--color-text);
	text-decoration: none;
	background-color: transparent;
	opacity: 0.85;
}

.p-spMenu.c-spMenu--fujita .c-submenuToggleBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	right: 16px;
	width: 28px;
	height: 28px;
	border: none;
	line-height: 1;
	background: transparent;
	color: var(--color-blue-sky);
}

.p-spMenu.c-spMenu--fujita .c-submenuToggleBtn::before {
	display: block;
	width: 8px;
	height: 14px;
	background: url(../img/icon-arrow.svg) no-repeat center center / contain;
	filter: brightness(0) saturate(100%) invert(52%) sepia(98%) saturate(1505%) hue-rotate(166deg) brightness(98%) contrast(101%);
	transform: rotate(90deg);
	transition: transform 0.25s ease;
	content: "";
	font-size: 0;
}

.p-spMenu.c-spMenu--fujita .c-submenuToggleBtn::after {
	display: none;
}

/* 開いたときは上向き */
.p-spMenu.c-spMenu--fujita .c-submenuToggleBtn.is-opened::before {
	transform: rotate(-90deg);
}

.p-spMenu.c-spMenu--fujita .c-spnav .sub-menu {
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	list-style: none;
	background-color: var(--color-bg-muted);
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.p-spMenu.c-spMenu--fujita .c-spnav .sub-menu.is-opened {
	height: auto;
	opacity: 1;
	visibility: visible;
}

.p-spMenu.c-spMenu--fujita .c-spnav .sub-menu a {
	display: block;
	padding: 0.95em 20px 0.95em 36px;
	border-bottom: none;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-decoration: none;
	background-color: transparent;
}

.p-spMenu.c-spMenu--fujita .c-spnav .sub-menu a:hover,
.p-spMenu.c-spMenu--fujita .c-spnav .sub-menu a:focus-visible {
	color: var(--color-text);
	text-decoration: none;
	background-color: transparent;
	opacity: 0.85;
}

/* ドロワー内CTA（フッターSP CTA / モック寄せ） */
.p-spMenu.c-spMenu--fujita .p-spMenu__cta {
	margin-top: var(--space-4);
	padding: 0 20px;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__item {
	margin: 0;
	width: 100%;
	max-width: 280px;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link {
	display: flex;
	position: relative;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 280px;
	min-height: 56px;
	padding: 0.85em 1.5em;
	border: none;
	border-radius: var(--radius-pill);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link:hover,
.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link:focus-visible {
	opacity: 0.9;
	text-decoration: none;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--stories {
	color: var(--color-white);
	background-color: var(--color-blue-sky);
	background-image: none;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--news {
	color: var(--color-blue-sky);
	background-color: var(--color-white);
	background-image: none;
}

/* 実ボーダーは高さ・グラデに影響するため枠は疑似要素で描画 */
.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--news::after {
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-blue-sky);
	border-radius: inherit;
	pointer-events: none;
	content: "";
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--contact,
.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--default {
	color: var(--color-white);
	background-image: var(--grad-cta-slide);
	background-size: 200% 100%;
	background-position: 0% 0%;
	transition: background-position 0.4s ease;
}

.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--contact:hover,
.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--contact:focus-visible,
.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--default:hover,
.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link--default:focus-visible {
	opacity: 1;
	background-position: 100% 0%;
}

@media (min-width: 400px) {
	.p-spMenu.c-spMenu--fujita .p-spMenu__inner {
		width: 354px;
		max-width: 354px;
	}

	.p-spMenu.c-spMenu--fujita .p-spMenu__body {
		padding-right: 24px;
		padding-left: 24px;
	}

	/* body の左右余白に合わせ、CTA の二重 padding を解除 */
	.p-spMenu.c-spMenu--fujita .p-spMenu__cta {
		padding-right: 0;
		padding-left: 0;
	}

	.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__link {
		min-height: 48px;
		max-height: 48px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.p-spMenu.c-spMenu--fujita .p-spMenu__cta .c-header-cta__item {
		max-width: 264px;
	}
}

/* --------------------------------------------------------------------------
 * 投稿本文
 * -------------------------------------------------------------------------- */
/*
 * 投稿の詳細ページ（single.php / single-news.php / single-works.php / single-interviews.php）は
 * それぞれ独自の幅指定（.p-stories-single__content 等）を持つため対象外にする.
 */
.post_content:not(.p-stories-single__content):not(.p-single-news__body):not(.p-single-works__body):not(.p-single-interviews__body) {
	max-width: 970px;
	margin-inline: auto;
}

body:has(.page-company) .post_content {
	padding-bottom: var(--section-pad-y);
}

.post_content p {
	margin-bottom: 1em;
	line-height: 1.625;
}

.post_content p > span {
	display: inline-block;
}

.post_content table th,
.post_content table td {
	padding: 10px 15px;
	vertical-align: top;
}

/*
 * 見出し（h2）: 太字テキスト＋直下に全幅の薄グレー罫線＋左側に短い青のアクセント罫線.
 * 技術情報 詳細ページのデザインを基準に、ブロックエディタ本文全体の基本スタイルとする.
 * ただし Fujita is / Fujita's WHY（.p-fujita-page）は独自の見出し・リストデザインを
 * 持っているため対象外にする（.agc にもこの下線コンポーネントは存在しない）.
 */
body:not(:has(.p-fujita-page)) .post_content h2 {
	position: relative;
	margin: 3em 0 2em;
	padding-bottom: 0.6em;
	font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-navy);
}

body:not(:has(.p-fujita-page)) .post_content h2:first-child {
	margin-top: 3em !important;
}

body:not(:has(.p-fujita-page)) .post_content h2::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: #c7c7c7;
}

body:not(:has(.p-fujita-page)) .post_content h2::before {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 10%;
	min-width: 60px;
	height: 1px;
	background-color: var(--color-blue);
}

body:not(:has(.p-fujita-page)) .post_content h3 {
	margin: 1.75em 0 0.75em;
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-navy);
}

body:not(:has(.p-fujita-page)) .post_content h4 {
	margin: 1.5em 0 0.75em;
}

body:has(.page-company) .post_content #attempt h4 {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/*
 * 箇条書き（ul）: 緑の丸ポチ.
 */
body:not(:has(.p-fujita-page)) .post_content ul {
	margin: 0 0 1.5em;
	padding-left: 0;
	list-style: none;
}

body:not(:has(.p-fujita-page)) .post_content ul li {
	position: relative;
	margin-bottom: 0.5em;
	padding-left: 1.4em;
}

body:not(:has(.p-fujita-page)) .post_content ul li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-green);
}

/*
 * .p-company-hero__nav: 会社情報ページのページ内リンク一覧.
 * 採用情報ヒーローの .p-recruit-hero__nav と同じピル型スタイルにする
 * （ブロックエディタのリストブロックに追加CSSクラスとして付与される想定）.
 */
body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	max-width: 700px;
	margin: 0 0 1.5em;
	padding-left: 0;
	list-style: none;
}

body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav li {
	margin-bottom: 0;
	padding-left: 0;
}

body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav li::before {
	content: none;
}

body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav a {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 1em;
	border: 2px solid var(--color-blue-sky);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
	font-size: clamp(0.75rem, 0.7045rem + 0.2273vw, 0.875rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	text-decoration: none;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav a:hover,
body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav a:focus-visible {
	background-color: var(--color-blue-sky);
	color: var(--color-white);
	text-decoration: none;
}

@media (min-width: 768px) {
	body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav {
		gap: 12px;
	}

	body:not(:has(.p-fujita-page)) .post_content .p-company-hero__nav a {
		padding: 0.5em 1em;
	}
}

/*
 * SWELLタブブロック（.swell-block-tab）のタブ一覧: .p-company-hero__nav と同じピル型にする.
 * 選択中のタブはホバー時と同じ塗りつぶし表示. ブロックのスタイル（デフォルト/吹き出し等）に関わらず上書きする.
 */
.post_content .swell-block-tab > .c-tabList {
	--the-tab-flex: 0 0 auto;
	--the-tab-flex_wrap: wrap;
	--the-tab-item-margin: 0;
	justify-content: flex-start;
	gap: 8px 12px;
	width: auto;
	max-width: 700px;
	margin: 0 0 1.5em !important;
}

.post_content .swell-block-tab > .c-tabList .c-tabList__item {
	margin-bottom: 0;
	padding: 0;
}

.post_content .swell-block-tab > .c-tabList .c-tabList__item::before {
	content: none;
}

.post_content .swell-block-tab > .c-tabList .c-tabList__button {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 1em;
	border: 2px solid var(--color-blue-sky);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
	box-shadow: none;
	font-size: clamp(0.75rem, 0.7045rem + 0.2273vw, 0.875rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	opacity: 1;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.post_content .swell-block-tab > .c-tabList .c-tabList__button::before,
.post_content .swell-block-tab > .c-tabList .c-tabList__button::after {
	content: none;
}

.post_content .swell-block-tab > .c-tabList .c-tabList__button:hover,
.post_content .swell-block-tab > .c-tabList .c-tabList__button:focus-visible,
.post_content .swell-block-tab > .c-tabList .c-tabList__button[aria-selected="true"] {
	background-color: var(--color-blue-sky);
	color: var(--color-white);
}

@media (min-width: 768px) {
	.post_content .swell-block-tab > .c-tabList {
		gap: 12px;
	}

	.post_content .swell-block-tab > .c-tabList .c-tabList__button {
		padding: 0.5em 1em;
	}
}

.post_content .swell-block-tab .c-tabBody {
	padding-inline: 0;
	border: 0;
}

/*
 * 表: 指定なしの場合は幅を抑えた簡易表（実例スペック表など）とし、行ごとの罫線は入れない.
 */
body:not(:has(.p-fujita-page)) .post_content .wp-block-table {
	margin: 0 0 1.5em;
}

body:not(:has(.p-fujita-page, .p-stories-single)) .post_content table {
	border-collapse: collapse;
	border-right: 0;
}

@media (min-width: 768px) {
	/* フォーム（Contact Form 7）の表は幅を制限しない. */
	body:not(:has(.p-fujita-page, .page-equipment, .page-company, .p-stories-single)) .post_content table:not(.wpcf7 table) {
		width: auto;
		min-width: 640px;
	}

	body:not(:has(.p-fujita-page, .page-equipment, .page-company, .p-stories-single)) .post_content .c-table--wide table:not(.wpcf7 table) {
		width: 100%;
		max-width: none;
	}
}

body:has(.page-company) .post_content .wp-block-table {
	--table-border: none;
}

body:has(.page-company) .post_content table tr {
	border-bottom: 1px solid var(--color_border--table,#dcdcdc);
}

body:has(.page-company) .post_content table th,
body:has(.page-company) .post_content table td {
	padding: 12px 15px;
}

body:not(:has(.p-fujita-page, .p-stories-single)) .post_content table th,
body:not(:has(.p-fujita-page, .p-stories-single)) .post_content table td {
	border: none;
	text-align: left;
}

body:not(:has(.p-fujita-page, .p-stories-single)) .post_content table:not(.wpcf7 table) th,
body:not(:has(.p-fujita-page, .p-stories-single)) .post_content table:not(.wpcf7 table) td {
	min-width: 5em !important;
	font-size: var(--fs-xs);
}

body:not(:has(.p-fujita-page)) .post_content table th {
	font-weight: normal;
	background-color: transparent;
	color: var(--color-navy);
}

body:has(.page-company) .post_content table th {
	font-weight: 700;
}

body:not(:has(.p-fujita-page)) .post_content table thead th {
	color: #8e97a5;
}

body:not(:has(.p-fujita-page)) .post_content .wp-block-table thead,
body:not(:has(.p-fujita-page)) .post_content .wp-block-table tbody {
	border-bottom: 1px solid #335daa;
}

@media (min-width: 768px) {
	body:not(:has(.p-fujita-page)) .post_content table:not(.wpcf7 table) th,
	body:not(:has(.p-fujita-page)) .post_content table:not(.wpcf7 table) td {
		font-size: var(--fs-sm);
	}

	body:not(:has(.p-fujita-page)) .post_content .c-table--wide th {
		white-space: nowrap;
	}
}

/*
 * SWELL側の初期スタイル（.post_content thead th 等）がヘッダー行に
 * 塗りつぶし背景（--color_main）を当てるため、本サイトのデザインでは無効化する.
 */
body:not(:has(.p-fujita-page)) .post_content table thead th,
body:not(:has(.p-fujita-page)) .post_content table thead td {
	background-color: transparent;
}

/*
 * .c-table--wide: 表本体いっぱいの幅にし、1行ごとに紺(--color-blue-navy)の罫線を入れる.
 * 対応素材表のような、分類の多い一覧表に付与する（ブロックエディタのテーブルブロックの
 * 「追加CSSクラス」に c-table--wide を指定する。コアのテーブルブロックはこのクラスを
 * <table> ではなく外側の <figure class="wp-block-table"> に付けるため、子孫セレクタで指定する）.
 */
body:not(:has(.p-fujita-page)) .post_content .c-table--wide table {
	width: 100%;
	max-width: none;
}

body:not(:has(.p-fujita-page)) .post_content .c-table--wide tbody th {
	font-weight: 700;
}

body:not(:has(.p-fujita-page)) .post_content .c-table--wide th,
body:not(:has(.p-fujita-page)) .post_content .c-table--wide td {
	border-bottom: 1px solid var(--color-blue-navy);
}

/*
 * ヘッダー行（分類・素材例など）だけ太字をやめて控えめなラベルにする.
 * 行見出し（鉄鋼系・特殊鋼…など tbody 側の th）は既定どおり太字のまま.
 */
body:not(:has(.p-fujita-page)) .post_content .c-table--wide thead th {
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--color-text-muted);
}

body:not(:has(.p-fujita-page)) .post_content .wp-block-table figcaption {
	text-align: left;
}

/*
 * SWELLのFAQブロック（loos/faq）: アイコンを丸型・ブランドカラーに。
 * 「カスタムカラー」スタイルを選んだ場合に反映される（塗り／線どちらも）.
 */
body:not(:has(.p-fujita-page)) .swell-block-faq {
	--swl-faq_icon_radius: 50%;
	--color_faq_q: var(--color-blue);
	--color_faq_a: var(--color-blue-navy);
}

body:not(:has(.p-fujita-page)) .swell-block-faq .faq_q {
	padding-left: 3rem;
	color: var(--color-blue);
	font-size: var(--fs-md);
}

body:not(:has(.p-fujita-page)) .swell-block-faq .faq_q::before {
	background-color: var(--color-blue);
	color: var(--color-white);
}

body:not(:has(.p-fujita-page)) .swell-block-faq .faq_a {
	padding-top: 0;
	padding-left: 3rem;
}

body:not(:has(.p-fujita-page)) .swell-block-faq .faq_a:before {
	display: none;
}

@media (min-width: 768px) {
	body:not(:has(.p-fujita-page)) .swell-block-faq .faq_q {
		font-size: 1.125rem;
	}
}

/*
 * SWELLのボタンブロック（デフォルトスタイル is-style-btn_normal）:
 * 白背景×グラデーション枠線×紺文字＋矢印のデザインに上書きする.
 * お知らせ詳細の「お知らせ一覧へ」（.p-single-news__back）も同じデザインにする.
 */
body:not(:has(.p-fujita-page)) .post_content .is-style-btn_normal .swell-block-button__link,
.p-single-news__back a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 300px;
	min-height: 64px;
	padding: 0.75em 2.75em 0.75em 1.5em;
	border: 3px solid transparent;
	border-radius: var(--radius-pill);
	background-image:
		linear-gradient(var(--color-bg), var(--color-bg)),
		var(--grad-cta-slide);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-size: 100% 100%, 200% 100%;
	background-position: 0 0, 0% 0%;
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
	font-size: clamp(1.125rem, 0.5536rem + 2.8571vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	color: #4b4b4b;
	transition: background-position 0.4s ease;
}

@media (min-width: 768px) {
	body:not(:has(.p-fujita-page)) .post_content .is-style-btn_normal .swell-block-button__link,
	.p-single-news__back a {
		white-space: nowrap;
	}
}

body:not(:has(.p-fujita-page)) .post_content .is-style-btn_normal .swell-block-button__link:hover,
.p-single-news__back a:hover,
.p-single-news__back a:focus-visible {
	background-position: 0 0, 100% 0%;
	text-decoration: none;
}

body:not(:has(.p-fujita-page)) .post_content .is-style-btn_normal .swell-block-button__link::after,
.p-single-news__back a::after {
	content: "";
	position: absolute;
	top: calc(50% - 7px);
	right: 18px;
	width: 8px;
	height: 14px;
	background: url(../img/icon-arrow.svg) no-repeat center center / contain;
	filter: brightness(0) saturate(100%) invert(31%) sepia(74%) saturate(794%) hue-rotate(187deg) brightness(89%) contrast(88%);
}

/*
 * SWELLの吹き出しブロック（.swell-block-balloon）: 左側の三角の吹き出し口をやめ、
 * 左上の角から上に伸びるフラグ（旗）型の切り込みに変更する.
 */
body:not(:has(.p-fujita-page)) .swell-block-balloon .c-balloon__body {
	padding-inline: 1em; 
}

body:not(:has(.p-fujita-page)) .swell-block-balloon .c-balloon__shapes {
	display: none;
}

body:not(:has(.p-fujita-page)) .swell-block-balloon .c-balloon__text {
	position: relative;
	overflow: visible;
	max-width: inherit;
	padding: 0.5em 1.5em;
	border-radius: 0;
	border: 1px solid #93d2f0;
	background: #e2f6ff;
}

body:not(:has(.p-fujita-page)) .swell-block-balloon .c-balloon__text::before,
body:not(:has(.p-fujita-page)) .swell-block-balloon .c-balloon__text::after {
	content: "";
	position: absolute;
	bottom: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
}

body:not(:has(.p-fujita-page)) .swell-block-balloon .c-balloon__text::before {
  left: -1px;
  border-width: 0 16px 12px 0;
  border-bottom-color: #93d2f0;
}

body:not(:has(.p-fujita-page)) .swell-block-balloon .c-balloon__text::after {
  left: 0;
  border-width: 0 13px 10px 0;
  border-bottom-color: #e2f6ff;
}

/* --------------------------------------------------------------------------
 * パンくずリスト
 * -------------------------------------------------------------------------- */
.p-breadcrumb {
	background: rgba(255, 255, 255, 0.5);
}

.p-breadcrumb__list {
	font-size: 12px;
}

.p-breadcrumb__item {
	color: var(--color-text-muted);
}

.p-breadcrumb__item:after {
	-webkit-clip-path: none;
	clip-path: none;
	width: 4px;
	height: 4px;
	background-color: var(--color-blue-sky);
	opacity: 1;
}

.p-breadcrumb__item:first-child {
	color: var(--color-blue-sky);
}

.p-breadcrumb__item:first-child .p-breadcrumb__text {
	text-decoration: underline;
}

.single .p-breadcrumb__item:last-child>span.p-breadcrumb__text {
	display: inline;
}

.p-breadcrumb__item:last-child span {
	opacity: 1;
}

.p-breadcrumb__item .icon-home:before {
	display: none;
}

/* スマホ: 長いパンくず（記事タイトルなど）が切れないよう、横スクロールで全体を見られるようにする. */
@media (max-width: 767.98px) {
	.p-breadcrumb__list {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.p-breadcrumb__list::-webkit-scrollbar {
		display: none;
	}

	.p-breadcrumb__item {
		flex-shrink: 0;
	}
}

/* --------------------------------------------------------------------------
 * .p-related-info: 「関連する技術情報」「関連ページ」など、本文最後に表示する
 * 関連リンク一覧の共通ブロック（製作事例詳細 / 技術情報子ページなどで使用）.
 * -------------------------------------------------------------------------- */
.p-related-info {
	margin-top: var(--space-5);
	padding: var(--space-4) var(--space-3);
	background-color: var(--color-bg-muted);
}

body:not(:has(.p-fujita-page)) .post_content .p-related-info__title,
body:not(:has(.p-fujita-page)) .post_content .p-related-info h2:first-child {
	margin-block: 0 var(--space-3) !important;
	padding-bottom: 0 !important;
	border-bottom: 0;
	color: var(--color-navy);
	font-size: var(--fs-lg);
	font-weight: 700;
}

body:not(:has(.p-fujita-page)) .post_content .p-related-info h2::before,
body:not(:has(.p-fujita-page)) .post_content .p-related-info h2::after {
	display: none;
}

.p-related-info__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

body:not(:has(.p-fujita-page)) .post_content .p-related-info__list li {
	padding-left: 0 !important;
}

body:not(:has(.p-fujita-page)) .post_content .p-related-info__list li::before {
	display: none;
}

.p-related-info__link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-navy);
}

.p-related-info__link:hover,
.p-related-info__link:focus-visible {
	text-decoration: none;
}

.p-related-info__link:hover .p-related-info__text,
.p-related-info__link:focus-visible .p-related-info__text {
	text-decoration: underline;
}

.p-related-info__icon {
	position: relative;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background-color: var(--color-blue);
}

.p-related-info__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 16px;
	background: url(../img/icon-arrow.svg) no-repeat center center / contain;
	transform: translate(-50%, -50%);
}

.p-related-info__text {
	font-size: var(--fs-md);
}

@media (min-width: 960px) {
	.p-related-info {
		padding: var(--space-5);
	}

	body:not(:has(.p-fujita-page)) .post_content .p-related-info__title,
	body:not(:has(.p-fujita-page)) .post_content .p-related-info h2:first-child {
		margin-bottom: var(--space-4) !important;
		font-size: var(--fs-xl);
	}

	.p-related-info__list {
		gap: var(--space-5);
	}
}