/**
 * Home / Archive — Stories
 * ストーリーズ（モバイルファースト）
 * SP: 最新4件・縦リスト（スライドなし）
 * PC: 最新10件・横スライダー（4枚見え）
 * 背景画像は後で差し替え予定
 */

/* --------------------------------------------------------------------------
 * Card
 * -------------------------------------------------------------------------- */
.c-stories-card {
	margin: 0;
	overflow: hidden;
	background-color: transparent;
	box-shadow: none;
}

.c-stories-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.c-stories-card__link:hover,
.c-stories-card__link:focus-visible {
	opacity: 0.88;
	text-decoration: none;
}

.c-stories-card__thumb {
	overflow: hidden;
	aspect-ratio: 7 / 5;
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-muted);
}

.c-stories-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-stories-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(
		135deg,
		var(--color-navy) 0%,
		var(--color-blue) 100%
	);
	opacity: 0.85;
}

.c-stories-card__body {
	padding: 0.5em 0 0;
}

.c-stories-card__date {
	display: block;
	margin-bottom: 0.35em;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.c-stories-card__title {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.45;
}

/* SPホーム：サムネ左＋タイトル右 */
.c-stories-card--row .c-stories-card__link {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr);
	gap: var(--space-2);
}

.c-stories-card--row .c-stories-card__thumb {
	aspect-ratio: 7 / 5;
}

.c-stories-card--row .c-stories-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-white);
}

/* --------------------------------------------------------------------------
 * Home Stories
 * -------------------------------------------------------------------------- */
.p-home-stories {
	position: relative;
	padding-top: var(--section-pad-y);
	padding-bottom: var(--section-pad-y);
	overflow: hidden;
	color: var(--color-white);
}

.p-home-stories__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: url(../img/bg-stories-sp.jpg) no-repeat center center / cover;
	pointer-events: none;
}

.p-home-stories__bg::before {
	content: "Stories";
	position: absolute;
	z-index: 0;
	top: -1rem;
	left: -2.5rem;
	font-size: 11.75rem;
	font-weight: 900;
	font-family: var(--font-source-sans-3);
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	writing-mode: vertical-rl;
	background-image: linear-gradient(
		180deg,
		var(--color-blue) 0%,
		var(--color-green) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	opacity: 0.8;
}

.p-home-stories__inner {
	position: relative;
	z-index: 1;
	padding-inline: var(--space-4);
}

.p-home-stories__head {
	margin-bottom: var(--space-4);
	text-align: left;
}

.p-home-stories__title {
	margin: 0;
	font-size: clamp(1.625rem, 1.5rem + 0.625vw, 1.875rem);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--color-white);
}

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

.p-home-stories__slider {
	display: block;
}

.p-home-stories__navBtn {
	display: none;
}

.p-home-stories__track {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* SPは最新4件のみ表示 */
.p-home-stories__slide:nth-child(n + 5) {
	display: none;
}

.p-home-stories__empty {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background-color: rgb(255 255 255 / 10%);
	color: rgb(255 255 255 / 85%);
}

.p-home-stories__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--space-4);
}

.p-home-stories__more {
	display: inline-flex;
	position: relative;
	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);
	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-stories__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-stories__more:hover,
.p-home-stories__more:focus-visible {
	background-position: 0 0, 100% 0%;
	text-decoration: none;
}

/* SP: 見出し横のボタンは非表示、フッターボタンのみ表示 */
.p-home-stories__more--head {
	display: none;
}

.p-archive-stories {
	padding-top: var(--section-pad-y);
	padding-bottom: var(--section-pad-y);
}

.p-archive-stories__head {
	margin-bottom: var(--space-4);
}

.p-archive-stories__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.p-archive-stories .c-stories-card {
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-card);
	color: var(--color-text);
}

.p-archive-stories .c-stories-card__body {
	padding: var(--space-2);
}

.p-archive-stories .c-stories-card__title {
	color: var(--color-navy);
}

@media (min-width: 768px) {
	.c-stories-card--row .c-stories-card__link {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: var(--space-3);
	}

	.c-stories-card--row .c-stories-card__title {
		font-size: var(--fs-md);
		-webkit-line-clamp: 3;
	}
}

@media (min-width: 960px) {
	.p-home-stories__bg {
		background-image: url(../img/bg-stories-pc.jpg);
	}

	.p-home-stories__main {
		min-width: 0;
	}

	.p-home-stories__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-4);
		margin-bottom: var(--space-4);
	}

	.p-home-stories__copy {
		flex: 1 1 auto;
		min-width: 0;
	}

	.p-home-stories__title {
		font-size: clamp(1.5rem, -0.5rem + 3.3333vw, 2rem);
	}

	.p-home-stories__lead {
		max-width: 36em;
		font-size: var(--fs-md);
	}

	.p-home-stories__more--head {
		display: inline-flex;
		flex-shrink: 0;
		align-self: flex-start;
	}

	/* PC: フッターボタンは非表示、見出し横のみ表示 */
	.p-home-stories__more--foot {
		display: none;
	}

	.p-home-stories__footer {
		display: none;
	}

	/* PCカード：画像上＋タイトル下 */
	.c-stories-card--row .c-stories-card__link {
		display: block;
	}

	.c-stories-card--row .c-stories-card__thumb {
		aspect-ratio: 16 / 10;
		margin-bottom: var(--space-2);
	}

	.c-stories-card--row .c-stories-card__title {
		font-size: 14px;
		-webkit-line-clamp: 2;
	}

	.p-home-stories__slider {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		align-items: center;
		gap: 8px;
	}

	.p-home-stories__navBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		background: none;
		cursor: pointer;
		appearance: none;
	}

	.p-home-stories__navIcon {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		pointer-events: none;
	}

	.p-home-stories__navBtn:hover,
	.p-home-stories__navBtn:focus-visible {
		opacity: 0.85;
	}

	.p-home-stories__track {
		display: flex;
		flex-direction: row;
		gap: 16px;
		overflow-x: auto;
		padding: 4px 2px 8px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.p-home-stories__track::-webkit-scrollbar {
		display: none;
	}

	.p-home-stories__slide {
		flex: 0 0 calc((100% - 48px) / 4);
		max-width: none;
		scroll-snap-align: start;
	}

	.p-home-stories__slide:nth-child(n + 5) {
		display: block;
	}

	.p-home-stories__bg::after {
		content: none;
	}
}

/* --------------------------------------------------------------------------
 * Stories 共通ヒーロー（カテゴリアーカイブ・記事詳細）
 * -------------------------------------------------------------------------- */
.p-stories-hero {
	position: relative;
	overflow: hidden;
	color: var(--color-white);
}

.p-stories-hero__bg {
	position: absolute;
	inset: 0;
	background: url(../img/img-hero-stories.jpg) no-repeat center center / cover;
}

.p-stories-hero__bg::before {
	position: absolute;
	inset: 0;
	width: 50%;
	background-image: var(--grad-mv-overlay);
	content: "";
}

.p-stories-hero__inner {
	position: relative;
	z-index: 1;
	padding-top: var(--space-6);
}

.p-stories-hero__lead {
	margin: 0;
	font-size: clamp(1.0625rem, 0.95rem + 0.5625vw, 1.625rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.p-stories-hero__title {
	margin-bottom: -0.2em;
	font-size: clamp(5rem, 4.2rem + 4vw, 9rem);
	font-weight: 600;
	font-family: var(--font-source-sans-3);
	line-height: 1;
	letter-spacing: 0.02em;
}

@media (min-width: 960px) {
	.p-stories-hero__bg::before {
		width: 45vw;
	}

	.p-stories-hero__inner {
		padding-top: var(--space-6);
	}
}

/* --------------------------------------------------------------------------
 * カテゴリタイトルバー（アーカイブ / 記事詳細 共通）
 * -------------------------------------------------------------------------- */
.c-stories-catBar {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.9em var(--section-pad-x);
	background-color: var(--cat-color, var(--color-blue));
	color: var(--color-white);
	font-size: var(--fs-md);
	font-weight: 700;
	line-height: 1.3;
}

.c-stories-catBar a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Stories アーカイブ
 * -------------------------------------------------------------------------- */
.p-stories-archive__inner {
	padding-left: 0;
	padding-right: 0;
}

.p-stories-archive__catBar {
	margin-bottom: var(--space-4);
}

/* タグ一覧・日付アーカイブ（年別など）・検索結果は、カテゴリ色ではなく薄いグレー背景＋通常テキスト色にする. */
#body_wrap.tag .p-stories-archive__catBar,
#body_wrap.date .p-stories-archive__catBar,
#body_wrap.search .p-stories-archive__catBar {
	background-color: #f0f0f0;
	color: var(--color-text);
}

/* 960px以降は背景が ::before（画面左端まで伸びる要素）側にあるため、そちらも上書きする. */
#body_wrap.tag .p-stories-archive__catBar::before,
#body_wrap.date .p-stories-archive__catBar::before,
#body_wrap.search .p-stories-archive__catBar::before {
	background-color: #f0f0f0;
}

.p-stories-archive__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--section-pad-y) var(--section-pad-x) 0;
}

.p-stories-archive__main {
	position: relative;
	height: 100%;
	padding-bottom: var(--section-pad-y);
}

.p-stories-archive__main::before {
	position: absolute;
	top: calc(var(--section-pad-y) * -1);
	left: 0;
	opacity: 0.9;
	width: 100vw;
	height: calc(100% + var(--section-pad-y));
	margin-inline: calc(50% - 50vw);
	background-color: var(--color-bg);
	content: "";
	z-index: -1;
}

.p-stories-archive__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.p-stories-archive__empty {
	margin: 0;
	padding: var(--space-3);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-muted);
	color: var(--color-text-muted);
	text-align: center;
}

/* リスト型カード（サムネ左＋タイトル/日付右、全幅共通） */
.c-stories-card--list .c-stories-card__link {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--space-2);
}

.c-stories-card--list .c-stories-card__thumb {
	aspect-ratio: 4 / 3;
}

.c-stories-card--list .c-stories-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0;
}

.c-stories-card--list .c-stories-card__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-navy);
}

.c-stories-card--list .c-stories-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0.4em 0 0;
	font-size: var(--fs-xs);
	line-height: 1.6;
}

.c-stories-card--list .c-stories-card__date {
	margin: 0.5em 0 0;
}

@media (min-width: 600px) {
	.c-stories-card--list .c-stories-card__link {
		grid-template-columns: 180px minmax(0, 1fr);
		gap: var(--space-3);
	}

	.c-stories-card--list .c-stories-card__title {
		font-size: var(--fs-md);
	}
}

@media (min-width: 960px) {
	.p-stories-archive__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		align-items: start;
		gap: var(--space-5);
	}

	.p-stories-archive__main::before {
		left: calc(var(--section-pad-x) * -1);
		right: 0;
		width: calc(100% + var(--section-pad-x));
		margin-inline: 0;
		background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	}

	/*
	 * カテゴリタイトルバー：右端はサイドバー手前で止め、左端だけ画面端まで伸ばす.
	 */
	.p-stories-archive__catBar {
		position: relative;
		padding-inline: 0;
		font-size: var(--fs-lg);
	}

	.p-stories-archive__catBar::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		width: 100vw;
		background-color: var(--cat-color, var(--color-blue));
	}

	.p-stories-archive__list {
		margin-right: var(--section-pad-x);
	}
}

/*
 * ページネーションは foundation.css の共通スタイル（.pagination）をそのまま使う
 * （他のアーカイブページと統一するため、ここでの上書きは行わない）.
 */

/* --------------------------------------------------------------------------
 * Stories サイドバー
 * -------------------------------------------------------------------------- */
.p-stories-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 300px;
}

.p-stories-sidebar__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.4375rem);
	font-weight: 700;
	font-family: var(--font-source-sans-3);
	color: var(--color-blue);
}

.p-stories-sidebar__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.p-stories-sidebar__groupTitle {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em;
	margin: 0;
}

.p-stories-sidebar__groupTitleJa,
.p-stories-sidebar__groupTitleEn {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-navy);
}

.p-stories-sidebar__cats {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-stories-sidebar__catsLink {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 1.75em;
	border-radius: var(--radius-pill);
	background-color: var(--cat-color, var(--color-blue));
	color: var(--color-white);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.p-stories-sidebar__catsLink:hover,
.p-stories-sidebar__catsLink:focus-visible {
	opacity: 0.85;
	text-decoration: none;
}

.p-stories-sidebar__search {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-height: 60px;
	padding: 0 1.1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
}

.p-stories-sidebar__searchInput {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: none;
	font-size: 1.0625rem;
	color: var(--color-text);
}

.p-stories-sidebar__searchInput:focus {
	outline: none;
}

.p-stories-sidebar__searchBtn {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
}

.p-stories-sidebar__searchBtn img {
	filter: brightness(0) opacity(0.45);
}

.p-stories-sidebar__yearly {
	width: 100%;
	min-height: 60px;
	padding: 0 2.5em 0 1.1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-size: 1.0625rem;
	appearance: none;
	background-image: url(../img/icon-arrow.svg);
	background-repeat: no-repeat;
	background-position: right 1.1em center;
	background-size: 10px auto;
}

/* --------------------------------------------------------------------------
 * Stories 記事詳細
 * -------------------------------------------------------------------------- */
.p-stories-single__catBar {
	margin-bottom: var(--space-2);
}

.p-stories-single__inner {
	padding-left: var(--section-pad-x);
	padding-right: var(--section-pad-x);
}

.p-stories-single__head {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: var(--space-4);
}

.p-stories-single__date {
	order: -1;
	align-self: flex-end;
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

.p-stories-single__title {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-navy);
}

.p-stories-single__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	position: relative;
	padding-block: var(--section-pad-y);
}

.p-stories-single__body::before {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.9;
	width: 100vw;
	height: 100%;
	margin-inline: calc(50% - 50vw);
	background-color: var(--color-bg);
	content: "";
	z-index: -1;
}

.p-stories-single__content {
	color: var(--color-text);
	line-height: 1.9;
}

.p-stories-single__content h2 {
	margin: 1.6em 0 0.8em;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-navy);
}

.p-stories-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2em 0 0;
	padding: 0 !important;
	list-style: none;
}

body:not(:has(.p-fujita-page)) .post_content ul li.p-stories-single__tag {
	padding-left: 0;
}

body:not(:has(.p-fujita-page)) .post_content ul li.p-stories-single__tag::before {
	display: none;
}

.p-stories-single__tag a {
	display: inline-block;
	padding: 0.4em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--fs-xs);
	text-decoration: none;
}

.p-stories-single__tag a:hover,
.p-stories-single__tag a:focus-visible {
	border-color: var(--color-blue);
	color: var(--color-blue);
	text-decoration: none;
}

.p-stories-single__related {
	padding-top: var(--section-pad-y);
	padding-bottom: var(--space-5);
}

.p-stories-related__title {
	margin-bottom: var(--space-3);
}

.p-stories-related__cat {
	margin-left: 0.2em;
}

.p-stories-related__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/*
 * 前後の記事リンク（SWELL標準機能を流用）.
 * 前の記事は左端（丸い矢印 → タイトル）、次の記事は右端（タイトル → 丸い矢印）に置く.
 * 600px以上は横並び、それ未満は縦に積む.
 */
.p-stories-single .p-pnLinks {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.p-stories-single .p-pnLinks__item {
	width: 100%;
	margin: 0;
}

.p-stories-single .p-pnLinks__item::before {
	display: none;
}

.p-stories-single .p-pnLinks__thumb {
	display: none;
}

.p-stories-single .p-pnLinks__link {
	display: flex;
	align-items: center;
	gap: 0.75em;
	color: var(--color-navy);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.p-stories-single .p-pnLinks__link:hover,
.p-stories-single .p-pnLinks__link:focus-visible {
	opacity: 0.7;
	color: var(--color-navy);
	text-decoration: none;
}

/* 次の記事：矢印をタイトルの右に置き、右寄せにする. */
.p-stories-single .p-pnLinks__item.-next .p-pnLinks__link {
	flex-direction: row-reverse;
	justify-content: flex-start;
	text-align: right;
}

/* SWELL標準の -prev/-next border-left/right（色帯）・最小の高さ・ホバー時の影を打ち消す */
.p-stories-single .p-pnLinks .p-pnLinks__item .p-pnLinks__link,
.p-stories-single .p-pnLinks .p-pnLinks__item .p-pnLinks__link:hover {
	min-height: 0;
	height: auto;
	padding: 0;
	border: none;
	box-shadow: none;
}

.p-stories-single .p-pnLinks__link::before {
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--color-blue);
	background-image: url(../img/icon-arrow.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 6px auto;
	content: "";
}

/* SWELL標準の ::after（矢印アイコン）は使わない. */
.p-stories-single .p-pnLinks__link::after {
	display: none;
}

.p-stories-single .p-pnLinks__item.-prev .p-pnLinks__link::before {
	transform: rotate(180deg);
}

@media (min-width: 600px) {
	.p-stories-single .p-pnLinks {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-4);
	}

	.p-stories-single .p-pnLinks__item {
		width: auto;
		max-width: 50%;
	}

	/* 前の記事がないときも、次の記事は右端に置く. */
	.p-stories-single .p-pnLinks__item.-next {
		margin-left: auto;
	}

	.p-stories-single .p-pnLinks__item.-prev .p-pnLinks__link:hover .p-pnLinks__title,
	.p-stories-single .p-pnLinks__item.-next .p-pnLinks__link:hover .p-pnLinks__title {
		transform: none;
	}
}

@media (min-width: 960px) {
	.p-stories-single__head {
		padding-right: var(--section-pad-x);
	}

	.p-stories-single__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
		align-items: start;
		gap: var(--space-4);
	}

	.p-stories-single__body::before {
		display: none;
	}

	.p-stories-single__main {
		position: relative;
		padding-bottom: var(--section-pad-y);
	}

	.p-stories-single__main::before {
		position: absolute;
		top: calc(var(--section-pad-y) * -1);
		right: 0;
		left: calc(var(--section-pad-x) * -1);
		width: calc(100% + var(--section-pad-x));
		height: calc(100% + var(--section-pad-y));
		background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
		content: "";
		z-index: -1;
	}

	/*
	 * カテゴリタイトルバー：右端はサイドバー手前で止め、左端だけ画面端まで伸ばす
	 * （.p-stories-archive__catBar と同じ手法）.
	 */
	.p-stories-single__catBar {
		position: relative;
		padding-inline: 0;
		font-size: var(--fs-lg);
	}

	.p-stories-single__catBar::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		width: 100vw;
		background-color: var(--cat-color, var(--color-blue));
	}

	.p-stories-single__content {
		padding-right: var(--section-pad-x);
	}

	.p-stories-single .p-pnLinks {
		padding-right: var(--section-pad-x);
	}

	/*
	 * 関連記事：本文（.p-stories-single__main）と同じ幅にする.
	 * 右側にサイドバー列（300px）と列の間隔ぶんの余白をとる（.p-stories-single__body の grid と合わせる）.
	 */
	.p-stories-single__related {
		padding-top: 0;
		padding-right: calc(var(--section-pad-x) + 300px + var(--space-4));
	}
}

/* --------------------------------------------------------------------------
 * Stories トップ（/stories/）
 * -------------------------------------------------------------------------- */
.p-stories-home-hero {
	position: relative;
	overflow: hidden;
	color: var(--color-white);
}

.p-stories-home-hero__bg {
	position: absolute;
	inset: 0;
	background: url(../img/bg-stories-header.jpg) no-repeat center center / cover;
}

.p-stories-home-hero__bg::before {
	position: absolute;
	inset: 0;
	width: 10vw;
	background-image: var(--grad-mv-overlay);
	content: "";
}

.p-stories-home-hero__bg::after {
	content: "Stories";
	position: absolute;
	z-index: 3;
	right: -2.5rem;
	bottom: -1rem;
	font-size: 11.75rem;
	font-weight: 900;
	font-family: var(--font-source-sans-3);
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	writing-mode: vertical-rl;
	/* 上：ほぼ白 → 下：黄緑、不透明度16%（デザインの画像から色を読み取った値）. */
	background-image: linear-gradient(180deg, #fffff3 0%, #e0f94b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	opacity: 0.16;
}

.p-stories-home-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

.p-stories-home-hero__label {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
}

.p-stories-home-hero__title {
	margin: 0;
	font-family: var(--font-source-sans-3);
	font-size: clamp(5rem, 4.2rem + 4vw, 9rem);
	font-weight: 600;
	line-height: 1;
}

.p-stories-home-hero__lead {
	margin: 0.9em 0 0;
	font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
	font-weight: 700;
	line-height: 1.5;
}

/* 本文は「…フジタのリアルな日常と／挑戦の記録です。」で折り返る幅（31文字）にする. */
.p-stories-home-hero__text {
	max-width: 31.5em;
	margin: 1.6em 0 0;
	font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
	line-height: 1.8;
}

/* Pick Up */
.p-stories-pickup {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	position: relative;
	/*
	 * flexアイテムのデフォルト min-width/min-height: auto は、
	 * 内部（Swiperスライド内のaspect-ratio指定サムネイル）の循環参照で
	 * 巨大化したコンテンツサイズをそのまま最小サイズとして採用してしまい、
	 * 下記 flex-basis(420px) を無視して膨張する原因になるため 0 に固定する.
	 */
	width: 100%;
	min-width: 0;
	max-width: 450px;
	min-height: 0;
}

.p-stories-pickup::before {	
	position: absolute;
	top: calc(var(--space-3) * -1);
	left: calc(50% - 50vw);
	width: 100vw;
	height: calc(100% + var(--space-4) * 2);
	/*
	 * 黄緑（不透明度25%）→ 青（不透明度50%）. 68%から右端までは同じ青（デザインの画像から色を読み取った値）.
	 * CSS は不透明度を掛けた値で色を混ぜ、画像と中間色がずれるため、画像の中間色を途中の点に入れている.
	 */
	background: linear-gradient(
		90deg,
		rgb(179 211 28 / 25%) 0%,
		rgb(134 191 70 / 31%) 17%,
		rgb(90 170 114 / 38%) 34%,
		rgb(46 150 159 / 44%) 51%,
		rgb(0 131 203 / 50%) 68%
	);
	content: "";
	z-index: -1;
}

.p-stories-pickup__label {
	margin: 0;
	font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.p-stories-pickup__swiper {
	overflow: hidden;
	/* 同上：自身もflexアイテムのため、同じ理由でmin-widthを固定する必要がある. */
	min-width: 0;
	min-height: 0;
	/*
	 * swiper.css 側の `.swiper { width: 100% }` 系のルールと読み込み順の関係で
	 * 期待通り解決されず、幅が異常値になる場合があるため明示的に上書きする.
	 */
	width: 100% !important;
}

/* Swiper自体のflex-row(swiper-wrapper)も同じ理由で明示的に固定する. */
.p-stories-pickup__swiper .swiper-wrapper {
	min-width: 0;
	min-height: 0;
}

/*
 * flexアイテムはデフォルトで min-height/min-width: auto となり、
 * 中身（aspect-ratio指定のサムネイル）のサイズがそのまま最小サイズの下限になる。
 * Swiperのwrapper(height:100%)⇄slide(height:100%)⇄thumb(aspect-ratio)の
 * 循環参照と組み合わさり、Chromiumのレイアウトが破綻して巨大サイズ(2^24px)に
 * なってしまうため、min-height/min-widthを0にして連鎖を断つ.
 */
.swiper-slide.p-stories-pickup__slide {
	min-width: 0;
	min-height: 0;
	height: auto;
}

.p-stories-pickup__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.p-stories-pickup__link:hover,
.p-stories-pickup__link:focus-visible {
	opacity: 0.92;
	text-decoration: none;
}

.p-stories-pickup__thumb {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: rgb(255 255 255 / 10%);
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.p-stories-pickup__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-stories-pickup__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(135deg, var(--color-blue) 0%, var(--color-green) 100%);
	opacity: 0.85;
}

.p-stories-pickup__body {
	padding: 0.75em 0.1em 0;
}

.p-stories-pickup__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.5;
}

.p-stories-pickup__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;
	margin-top: 0.75em;
	font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
}

.p-stories-pickup__cat {
	display: inline-block;
	padding: 0.25em 1em;
	border-radius: var(--radius-pill);
	background-color: var(--cat-color, var(--color-blue));
	font-weight: 700;
	line-height: 1.2;
}

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

.p-stories-pickup__dots {
	/*
	 * swiper.css の `.swiper-pagination { position: absolute; width: 100% }` は
	 * このコンテナが `.swiper` の外（コントロールバー内）にあるため、
	 * 意図しない祖先を基準に全幅へ広がってしまう。通常のインライン配置に戻す.
	 */
	position: static !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	gap: 8px;
}

.p-stories-pickup__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 40%);
	cursor: pointer;
	appearance: none;
}

.p-stories-pickup__dot.is-active {
	background-color: var(--color-white);
}

/*
 * #main_visual の一時停止ボタン（.c-home-mv__pause, sections-mv.css）と同じ方式。
 * icon-pause.svg / icon-play.svg は円形バッジ込みの多色アイコンなので、
 * フィルターは掛けずそのままの見た目で使う.
 */
.p-stories-pickup__toggle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	appearance: none;
	transition: opacity 0.2s ease;
}

.p-stories-pickup__toggle:hover,
.p-stories-pickup__toggle:focus-visible {
	opacity: 0.85;
}

.p-stories-pickup__toggleIcon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

@media (min-width: 960px) {
	.p-stories-home-hero::before {
		position: absolute;
		top: 0;
		right: 0;
		width: 50vw;
		height: 100%;
		background: linear-gradient(
			90deg,
			rgb(179 211 28 / 25%) 0%,
			rgb(134 191 70 / 31%) 17%,
			rgb(90 170 114 / 38%) 34%,
			rgb(46 150 159 / 44%) 51%,
			rgb(0 131 203 / 50%) 68%
		);
		content: "";
		z-index: 1;
	}

	/*
	 * 右半分・下半分に重ねるグラデーション（青 → 黄緑、不透明度64%. デザインの画像から色と角度を読み取った値）.
	 * ::before より上に重ね、本文・Pick Up（.p-stories-home-hero__inner）はさらにその上に置く.
	 */
	.p-stories-home-hero::after {
		position: absolute;
		top: 50%;
		right: 0;
		width: 50vw;
		height: 50%;
		background: linear-gradient(114deg, rgb(0 131 203 / 64%) 0%, rgb(181 210 25 / 64%) 80%);
		content: "";
		z-index: 1;
		transform: translateY(-50%);
	}

	.p-stories-home-hero__bg::before {
		width: 3.75vw;
	}

	.p-stories-home-hero__bg::after {
		right: 3vw;
	}

	.p-stories-home-hero__inner {
		z-index: 2;
		flex-direction: row;
		align-items: center;
		gap: var(--space-5);
		padding-top: var(--space-5);
		padding-bottom: var(--space-5);
	}

	.p-stories-home-hero__intro {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* 画面幅1280pxで デザインの大きさ（46px / 140px / 34px / 18px）になるよう、画面幅に合わせて縮める. */
	.p-stories-home-hero__label {
		font-size: clamp(2rem, 3.6vw, 2.875rem);
	}

	.p-stories-home-hero__title {
		font-size: clamp(5.5rem, 10.9vw, 8.75rem);
	}

	.p-stories-home-hero__lead {
		margin-top: 1.4em;
		font-size: clamp(1.5rem, 2.65vw, 2.125rem);
	}

	.p-stories-home-hero__text {
		margin-top: 2.2em;
		font-size: 1.125rem;
	}

	.p-stories-pickup {
		flex: 0 0 420px;
	}

	.p-stories-pickup::before {
		display: none;
	}

	.p-stories-pickup__label {
		position: absolute;
		top: 75px;
		left: -1.5em;
		writing-mode: vertical-rl;
	}

	.p-stories-pickup__toggle {
		width: 54px;
		height: 54px;
	}

	.p-stories-pickup__controls {
		gap: 20px;
	}

	.p-stories-pickup__dots {
		gap: 16px;
	}

	.p-stories-pickup__dot {
		width: 12px;
		height: 12px;
	}
}

/* --------------------------------------------------------------------------
 * セクション共通（動画 / 最新記事 / カテゴリ別）
 * -------------------------------------------------------------------------- */
.p-stories-home-section {
	padding-top: var(--section-pad-y);
}

/* 最後のセクション（カテゴリ別の最後）は下にも余白をとり、フッターとの間を空ける. */
.p-stories-home-section:last-child {
	padding-bottom: var(--section-pad-y);
}

.p-stories-home-section--video {
	padding-bottom: var(--section-pad-y);
	background-color: #5d5d5d;
	color: var(--color-white);
}

.c-stories-sectionTitle {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 var(--space-3);
	font-size: var(--fs-lg);
	font-weight: 700;
}

.c-stories-sectionTitle::before {
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url(../img/icon-section.svg) no-repeat center center / contain;
	content: "";
}

.p-stories-home-section__cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-4);
}

/*
 * XDデザイン準拠：.p-home-stories__more と同じ「透明border + 二重background」の
 * グラデーション枠線ボタン（中は塗りつぶし、枠だけグラデーション）。
 * 他セクション（技術情報・製作事例等）と共有している .c-btn--grad の
 * グラデーション塗りつぶし＋白文字の見た目は変えず、Stories内のCTAだけ上書きする.
 */
.p-stories-home-section__cta .c-btn {
	min-width: 300px;
	min-height: 64px;
	padding: 0.75em 2.75em 0.75em 1.5em;
	border: 3px solid transparent;
	background-color: transparent;
	background-image:
		linear-gradient(rgb(255 255 255 / 90%), rgb(255 255 255 / 90%)),
		var(--grad-cta-slide);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
	color: var(--color-navy);
	font-size: clamp(1.125rem, 0.5536rem + 2.8571vw, 1.25rem);
}

@media (min-width: 960px) {
	.p-stories-home-section__cta .c-btn {
		min-width: 500px;
	}
}

.p-stories-home-section__cta .c-btn--arrow::after {
	/*
	 * icon-arrow.svg は白1色（fill="#fff"）の矢印のため、
	 * filterの色変換ではなくmaskで塗り替えて任意の色にする.
	 */
	background: none;
	-webkit-mask: url(../img/icon-arrow.svg) no-repeat center center / contain;
	mask: url(../img/icon-arrow.svg) no-repeat center center / contain;
	background-color: var(--color-blue);
	filter: none;
}

/* 動画グリッド */
.p-stories-videoGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

.p-stories-videoCard {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	color: inherit;
	text-decoration: none;
}

.p-stories-videoCard:hover,
.p-stories-videoCard:focus-visible {
	opacity: 0.9;
	text-decoration: none;
}

.p-stories-videoCard__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	background-color: #2b2b2b;
	background-size: cover;
	background-position: center center;
}

.p-stories-videoCard__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.p-stories-videoCard__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.5;
}

/* 記事カードグリッド（最新記事 / カテゴリ別） */
.p-stories-cardGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

.c-stories-card--grid .c-stories-card__thumb {
	aspect-ratio: 4 / 3;
}

.c-stories-card--grid .c-stories-card__body {
	padding-top: 0.6em;
}

.c-stories-card--grid .c-stories-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-navy);
}

.c-stories-card--grid .c-stories-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-top: 0.6em;
}

.c-stories-card__cat {
	display: inline-block;
	padding: 0.25em 1.5em;
	border-radius: var(--radius-pill);
	background-color: var(--cat-color, var(--color-blue));
	color: var(--color-white);
	font-size: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
	font-weight: 700;
	line-height: 1.2;
}

.c-stories-card--grid .c-stories-card__date {
	display: block;
	margin-top: 0.6em;
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

@media (min-width: 600px) {
	.p-stories-videoGrid,
	.p-stories-cardGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

@media (min-width: 960px) {
	.p-stories-videoGrid,
	.p-stories-cardGrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.p-stories-videoCard__play,
	.p-stories-videoCard__play img {
		width: 54px;
		height: 54px;
	}
}