/**
 * Home — Fujita is
 * About ＋ Fujita's WHY（モバイルファースト／モック準拠）
 */

.p-home-fujita {
	position: relative;
	overflow: hidden;
	padding-top: var(--section-pad-y);
	padding-bottom: var(--section-pad-y);
	background-color: transparent;
}

.p-home-fujita__inner {
	position: relative;
	z-index: 1;
	width: 90vw;
}

/* --------------------------------------------------------------------------
 * Intro（About + brand）
 * -------------------------------------------------------------------------- */
.p-home-fujita__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.p-home-fujita__brand {
	display: inline-block;
	order: -1;
	margin: 0;
	background-image: linear-gradient(90deg, #00a6ea 50%, #b5d219 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: min(24.375vw, 96px);
	font-weight: 600;
	font-family: var(--font-source-sans-3);
	line-height: 1.1;
	white-space: nowrap;
}

.p-home-fujita__eyebrow {
	margin: 0 0 0.4em;
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--color-blue-sky);
}

.p-home-fujita__catch {
	margin: 0;
	font-size: clamp(1.875rem, 1.4659rem + 2.0455vw, 3rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--color-navy);
}

.p-home-fujita__aboutBody {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.p-home-fujita__more {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	min-width: 300px;
	min-height: 64px;
	margin-top: var(--space-3);
	margin-inline: auto;
	padding: 0.75em 2.75em 0.75em 1.5em;
	border: 3px solid transparent;
	border-radius: var(--radius-pill);
	font-size: clamp(1.125rem, 0.5536rem + 2.8571vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	color: #4b4b4b;
	text-decoration: none;
	white-space: nowrap;
	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%);
	transition: background-position 0.4s ease;
}

.p-home-fujita__more::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%);
}

.p-home-fujita__more:hover,
.p-home-fujita__more:focus-visible {
	background-position: 0 0, 100% 0%;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * WHY
 * -------------------------------------------------------------------------- */
.p-home-fujita__whyHead {
	margin-bottom: var(--space-3);
}

.p-home-fujita__whyTitle {
	margin: 0;
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--color-blue-sky);
}

.p-home-fujita__whyLead {
	margin: 0.5em 0 0;
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.p-home-fujita__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	max-width: 360px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.p-home-fujita__card {
	display: block;
	color: var(--color-white);
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.p-home-fujita__card:hover,
.p-home-fujita__card:focus-visible {
	opacity: 0.95;
	text-decoration: none;
	transform: translateY(-2px);
}

.p-home-fujita__card--static {
	cursor: default;
}

.p-home-fujita__cardMedia {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
	box-shadow: 0 3px 20px rgb(0 0 0 / 16%);
}

.p-home-fujita__cardBtnImg {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.p-home-fujita__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-3);
		max-width: 973px;
	}
}

@media (min-width: 960px) {
	.p-home-fujita__intro {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-areas: "about brand";
		align-items: end;
		column-gap: var(--space-4);
		margin-bottom: var(--space-6);
	}

	.p-home-fujita__about {
		grid-area: about;
	}

	.p-home-fujita__brand {
		grid-area: brand;
		order: 0;
		align-self: start;
		justify-self: end;
		margin-right: -4.16666vw;
		font-size: clamp(3rem, 1.2rem + 9vw, 12rem);
		text-align: right;
	}

	.p-home-fujita__catch {
		font-size: clamp(2rem, 3vw, 2.75rem);
	}

	.p-home-fujita__aboutBody {
		font-size: var(--fs-md);
	}

	.p-home-fujita__more {
		width: auto;
		max-width: 380px;
		min-width: 300px;
		margin-left: 0;
	}

	.p-home-fujita__whyHead {
		margin-bottom: var(--space-4);
	}

	.p-home-fujita__whyLead {
		font-size: var(--fs-md);
	}

	.p-home-fujita__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 38px;
		width: 100%;
		margin: 0;
	}

	.p-home-fujita__cardMedia {
		border-radius: var(--radius-md);
		box-shadow: 0 4px 20px rgb(0 0 0 / 18%);
	}
}

/* --------------------------------------------------------------------------
 * 共通ヒーロー（About Fujita / Fujita's WHY）
 * -------------------------------------------------------------------------- */
 .p-fujita-hero {
	position: relative;
	background-color: var(--color-bg);
}

.p-fujita-hero__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}

.p-fujita-hero__title {
	margin: 0;
	font-family: var(--font-source-sans-3);
	font-size: clamp(1.625rem, 1.3rem + 1.625vw, 3.25rem);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--color-navy);
}

.p-fujita-hero__navList {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	max-width: 624px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-fujita-hero__navItem {
	width: calc(50% - var(--space-1));
}

.p-fujita-page .c-page-nav {
	margin-top: var(--space-5);
}

.p-fujita-page .c-page-nav p {
	font-size: clamp(0.9375rem, 0.9125rem + 0.125vw, 1.0625rem);
	line-height: 2;
}

.p-fujita-page .c-page-nav .swell-block-button {
	margin-top: var(--space-3);
}

/*
 * ページ切り替えボタン. 本文末尾の回遊ボタン（グループ .c-page-nav 内の SWELL ボタンブロック）も同じ見た目にする.
 */
.p-fujita-hero__navLink,
.p-fujita-page .c-page-nav .swell-block-button__link {
	display: inline-flex;
	position: relative;
	align-items: center;
	width: 100%;
	padding: 1em 2em;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-family: var(--font-source-sans-3);
	line-height: 1.3;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

@media (max-width: 349px) {
	.p-fujita-hero__navLink,
	.p-fujita-page .c-page-nav .swell-block-button__link {
		padding-left: 1.5em;
	}
}

a.p-fujita-hero__navLink,
.p-fujita-page .c-page-nav .swell-block-button__link {
	padding-right: 2.75em;
	background-image:
		linear-gradient(rgb(255 255 255 / 84%), rgb(255 255 255 / 84%)),
		linear-gradient(90deg, var(--color-blue-sky) 0%, var(--color-green) 100%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	color: var(--color-navy);
}

a.p-fujita-hero__navLink::after,
.p-fujita-page .c-page-nav .swell-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 14px;
	background: url(../img/icon-arrow.svg) no-repeat center center / contain;
	filter: brightness(0) saturate(100%) invert(35%) sepia(24%) saturate(1966%) hue-rotate(185deg) brightness(90%) contrast(92%);
	transform: translateY(-50%);
}

a.p-fujita-hero__navLink:hover,
a.p-fujita-hero__navLink:focus-visible,
.p-fujita-page .c-page-nav .swell-block-button__link:hover,
.p-fujita-page .c-page-nav .swell-block-button__link:focus-visible {
	text-decoration: none;
	opacity: 0.8;
}

.p-fujita-hero__navLink.is-current {
	padding-right: 1.4em;
	border-color: var(--color-border);
	background-color: var(--color-bg);
	background-image:
		linear-gradient(rgb(255 255 255 / 84%), rgb(255 255 255 / 84%)),
		linear-gradient(var(--color-border), var(--color-border));
	background-origin: border-box;
	background-clip: padding-box, border-box;
	color: #a8a8a8;
}

a.p-fujita-hero__navLink.is-current::after {
	content: none;
}

a.p-fujita-hero__navLink.is-current:hover,
a.p-fujita-hero__navLink.is-current:focus-visible {
	opacity: 1;
}

/*
 * 回遊ボタンは1つだけで置くため、幅はヒーローのボタン1つ分（2列の片方）に合わせる.
 * SWELL のボタン（[class*=is-style-btn_] a）の最小幅・字間・影を打ち消す.
 */
.p-fujita-page .c-page-nav .swell-block-button__link {
	width: auto;
	min-width: min(300px, 100%);
	letter-spacing: normal;
	box-shadow: none;
}

.p-fujita-hero__visual {
	position: relative;
}

.p-fujita-hero__img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.p-fujita-hero__visualInner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.p-fujita-hero__brand {
	margin: 0 0 -0.25em;
	font-size: clamp(5rem, 3.6364rem + 6.8182vw, 8.75rem);
	font-weight: 600;
	font-family: var(--font-source-sans-3);
	line-height: 1.1;
	background-image: linear-gradient(90deg, #00a6ea 50%, #b5d219 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (min-width: 768px) {
	/*
	 * 画面の高さが低いディスプレイでは、ヘッダー・見出しと画像だけでファーストビューが埋まらないよう、
	 * 画像の高さを「画面の高さ − ヘッダー・見出しの分」までに抑える（十分高い画面では従来の高さ）.
	 */
	.p-fujita-hero__img {
		height: clamp(160px, calc(100vh - 440px), 220px);
	}

	/* タイトル（左）とページ切り替えボタン（右下）を横並びにする. */
	.p-fujita-hero__head {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--space-3);
	}

	/* 768〜959px は画面幅に合わせてボタンの幅を縮める（960px以上は 624px 固定）. */
	.p-fujita-hero__nav {
		flex: 0 1 524px;
		min-width: 0;
		margin-top: auto;
	}

	.p-fujita-page .c-page-nav {
		text-align: center;
	}

	.p-fujita-page .c-page-nav .swell-block-button {
		margin-top: var(--space-4);
	}
}

@media (min-width: 960px) {
	.p-fujita-hero__head {
		padding-top: var(--space-4);
		padding-bottom: var(--space-3);
	}

	.p-fujita-hero__nav {
		flex: 0 1 624px;
	}

	.p-fujita-hero__navList {
		width: 624px;
	}

	.p-fujita-hero__navLink,
	.p-fujita-page .c-page-nav .swell-block-button__link {
		max-height: 64px;
		padding: 1em 3em;
		border-width: 3px;
		font-size: 1.125rem;
	}
}

@media (min-width: 1200px) {
	.p-fujita-hero__head {
		padding-top: var(--space-5);
		padding-bottom: var(--space-4);
	}

	.p-fujita-hero__img {
		height: clamp(160px, calc(100vh - 480px), 320px);
	}
}

.p-fujita-page {
	padding-top: var(--section-pad-y);
}

.p-fujita-page__article {
	padding-bottom: var(--section-pad-y);
}

.p-fujita-page .post_content h2 {
	font-size: clamp(1.25rem, 1.0682rem + 0.9091vw, 1.75rem);
}

.p-fujita-page .post_content h3 {
	margin-bottom: 1em;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.p-fujita-page .post_content p {
	margin-bottom: 0;
}

.p-fujita-page:has(.p-about-lead) .post_content .wp-block-image img {
	max-width: 780px;
	margin-inline: auto;
	box-shadow: 0 12px 24px rgb(0 0 0 / 8%);
}

/* --------------------------------------------------------------------------
 * About Fujita — リード
 * -------------------------------------------------------------------------- */
 .p-about-lead,
 .p-why-lead {
	width: 100% !important;
	max-width: 1280px;
	margin-inline: auto;
	left: inherit;
 }

 .p-about-lead h1,
 .p-why-lead h1 {
	margin-bottom: 0;
	font-size: clamp(2.75rem, 2.375rem + 1.875vw, 4.625rem);
	font-weight: 600;
}

.p-fujita-page .post_content .p-about-lead h2,
.p-fujita-page .post_content .p-why-lead h2 {
	margin-top: 0;
	margin-bottom: 1em;
	font-size: clamp(1.625rem, 1.5rem + 0.625vw, 2.25rem);
}

.p-fujita-page__article .post_content > .wp-block-group:not(.p-about-lead):not(.p-why-lead) {
	left: inherit !important;
	width: 100% !important;
	max-width: 970px !important;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * About Fujita — コンセプト（[fujita_concept] ショートコード）
 * -------------------------------------------------------------------------- */
.p-about-concept {
	padding: var(--space-5) 0;
}

.p-about-concept__heading {
	margin: 0 0 var(--space-4);
	font-size: clamp(1.25rem, 1.0682rem + 0.9091vw, 1.75rem);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--color-navy);
	text-align: center;
}

.p-about-concept__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.p-about-concept__logo {
	display: block;
	width: clamp(96px, 14vw, 160px);
	height: auto;
}

.p-about-concept__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3) var(--space-4);
	max-width: 480px;
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

.p-about-concept__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.p-about-concept__icon {
	flex: none;
	width: clamp(40px, 8vw, 80px);
	height: clamp(40px, 8vw, 80px);
}

.p-about-concept__icon--navy {
	background-color: var(--color-blue-navy);
}

.p-about-concept__icon--sky {
	background-color: var(--color-blue-sky);
}

.p-about-concept__icon--blue {
	background-color: var(--color-blue);
}

.p-about-concept__icon--green {
	background-color: var(--color-green);
}

.p-about-concept__itemText {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.p-about-concept__itemJa {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--color-text-muted);
}

.p-about-concept__itemEn {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-text-muted);
}

@media (min-width: 768px) {
	.p-about-concept__body {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-5);
	}

	.p-about-concept__list {
		max-width: 640px;
		gap: var(--space-4) var(--space-5);
	}
}

/* --------------------------------------------------------------------------
 * Fujita's WHY
 * -------------------------------------------------------------------------- */
 #reason-museum,
 #reason-factory,
 #reason-people {
	position: relative;
	margin-bottom: 0;
	padding-top: 3em !important;
	padding-bottom: 3em !important;
 }

 #reason-museum::before,
 #reason-people::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	z-index: -1;
	width: 100vw;
	height: 100%;
	background-color: var(--color-bg);
 }

.p-fujita-page .post_content  [id^="reason"] h2 {
	position: relative;
	margin-top: 3em !important;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
}

.p-fujita-page .post_content  [id^="reason"] h2::before,
.p-fujita-page .post_content  [id^="reason"] h2::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	width: calc(50vw - 7em);
	height: 16px;
	background-color: var(--color-blue-sky);
}

.p-fujita-page .post_content  [id^="reason"] h2::before {
	left: calc(50% - 50vw);
	background: transparent linear-gradient(270deg, #B5D219 0%, #0083CB 100%) 0% 0% no-repeat padding-box;
	opacity: 0.28;
}

.p-fujita-page .post_content  [id^="reason"] h2::after {
	right: calc(50% - 50vw);
	background: transparent linear-gradient(90deg, #B5D219 0%, #0083CB 100%) 0% 0% no-repeat padding-box;
	opacity: 0.28;
}

.p-fujita-page .post_content  [id^="reason"] h2 .num {
	position: absolute;
	top: -1.25em;
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(3rem, 2.2727rem + 3.6364vw, 5rem);
	font-weight: 700;
	color: var(--color-blue-sky);
}

/* 美術館・工場見学ボタン */
#reason-museum .wp-block-group:has(.wp-block-button__link),
#reason-factory .wp-block-group:has(.wp-block-button__link) {
	margin-top: 2em;
}

#reason-museum .wp-block-group:has(.wp-block-button__link) strong,
#reason-factory .wp-block-group:has(.wp-block-button__link) strong {
	font-weight: 700;
}

#reason-museum .wp-block-button__link,
#reason-factory .wp-block-button__link {
	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-color: transparent;
	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;
	text-decoration: none;
	transition: background-position 0.4s ease;
}

#reason-museum .wp-block-button__link::after,
#reason-factory .wp-block-button__link::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%);
}

#reason-museum .wp-block-button__link:hover,
#reason-factory .wp-block-button__link:hover {
	background-position: 0 0, 100% 0%;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Fujita's WHY ページ結びのメッセージ（Coverブロック）
 * -------------------------------------------------------------------------- */
.p-fujita-page .post_content > .wp-block-cover.alignfull {
	position: relative;
	padding-block: var(--section-pad-y);
}

.p-fujita-page .post_content > .wp-block-cover.alignfull::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 32px);
	z-index: 2;
	width: 64px;
	height: 48px;
	background-image: linear-gradient(
		to bottom,
		var(--color-blue-sky) 0,
		var(--color-blue-sky) 66.66%,
		var(--color-blue) 66.66%,
		var(--color-blue) 100%
	);
}

.p-fujita-page .post_content > .wp-block-cover.alignfull .wp-block-heading {
	max-width: 650px;
	margin-inline: auto;
	font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-white);
}

.p-fujita-page .post_content > .wp-block-cover.alignfull p {
	max-width: 650px;
	margin-inline: auto;
	font-size: clamp(0.875rem, 0.8375rem + 0.1875vw, 1.0625rem);
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: #f0f0f0;
}