body {
	background: var(--color-bg-gray-light);
}

.section-heading {
	position: relative;
	margin: 0;
	padding-bottom: 26px;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--color-green-dark);
	text-align: center;
	line-height: 1.4;
}

.section-heading--sm {
	padding-bottom: 16px;
	font-size: 22px;
	text-align: left;
}

#realization .section-heading,
#supporter .section-heading,
#promises .section-heading {
	color: var(--color-white);
}

#promises .promises__eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- Hero ---------- */
/* Mobile: a single pre-composed visual (photo + copy baked into one image)
   rather than the layered background + overlay used from 640px up — there
   isn't a clean way to lay the desktop figures out at that width anyway. */
.hero__mobile {
	width: 100%;
}

.hero__mobile-image {
	display: block;
	width: 100%;
	height: auto;
}

.hero__media {
	display: none;
	position: relative;
	width: 100%;
	aspect-ratio: 390 / 433;
	overflow: hidden;
	background: var(--color-white);
}

.hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: auto;
}

/* Mobile: there isn't enough width to fit a full-height photo and a large
   text graphic side by side without one squeezing the other to nothing, so
   the text graphic overlays the photo instead — both stay a guaranteed,
   independent size. Widescreen (see the min-width query below) switches to
   a flex row with a fixed gap once there's room for both side by side. */
.hero__figures {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hero__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	width: auto;
	height: 88%;
	object-fit: contain;
}

.hero__fv-txt {
	position: absolute;
	left: 12px;
	top: 50%;
	z-index: 3;
	width: clamp(150px, 48vw, 280px);
	height: auto;
	transform: translateY(-50%);
	animation: taisei-fade-in 0.8s var(--ease-brand) both;
}

/* Animating opacity only (not transform) means this same animation works
   unchanged whether .hero__fv-txt is centered via transform:translateY(-50%)
   (mobile overlay) or laid out statically in the flex row (widescreen). */
@keyframes taisei-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__fv-txt {
		animation: none;
	}
}

/* PC hero from 1024px (same breakpoint as the header menu); below that
   the single SP image (mv2.jpg) is shown. */
@media (min-width: 1024px) {
	.hero__mobile {
		display: none;
	}

	.hero__media {
		display: block;
	}

	.hero__figures {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		gap: 16px;
		padding-left: 16px;
		padding-right: 24px;
	}

	.hero__photo {
		position: static;
		flex-shrink: 0;
		width: auto;
		height: 100%;
		object-position: bottom;
	}

	.hero__fv-txt {
		position: static;
		flex-shrink: 1;
		min-width: 0;
		align-self: center;
		width: 660px;
		height: auto;
		transform: none;
	}
}

/* ---------- Message intro ---------- */
.message-intro__banner {
	margin-bottom: 28px;
}

.message-intro__banner img {
	width: 100%;
	border-radius: 14px;
}

.message-intro__body {
	padding-block: 40px 48px;
}

.message-intro__heading {
	margin: 0 0 28px;
	font-family: var(--font-display);
	/* Below 1024px the heading is always the two lines split by the <br>:
	   the font shrinks with the screen so the longer first line
	   (令和８年度 松山市長選挙への, ~14 characters) never wraps; 30px max. */
	font-size: min(30px, calc((100vw - var(--container-padding) * 2) / 14));
	font-weight: 800;
	line-height: 1.6;
	color: var(--color-green-dark);
	text-align: center;
	white-space: nowrap;
}

.message-intro__text p {
	margin: 0 0 16px;
	font-size: 18px;
	line-height: 1.9;
	color: var(--color-text);
}

.message-intro__signature {
	margin-top: 8px;
	text-align: right;
}

.message-intro__signature img {
	display: inline-block;
	width: 178px;
	height: auto;
}

.message-intro__video-block {
	margin-top: 32px;
	padding: 20px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 18px;
}

.message-intro__video-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-green-dark);
}

.message-intro__video-heading::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 16px;
	background: var(--color-green);
	border-radius: 2px;
}

.message-intro__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: var(--color-bg-gray);
}

.message-intro__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- News / Updates ----------
   The one section on the page that isn't a card grid: an oversized label
   on the left, a plain dated link list on the right, separated by hairline
   rules. The deliberate contrast with every other "everything is a card"
   section is what makes it read as a considered choice rather than the
   default template. */
.news-updates {
	padding-block: 64px;
	background: var(--color-white);
}

.news-updates__grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.news-updates__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--color-orange);
}

.news-updates__eyebrow::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--color-orange);
}

.news-updates__heading {
	margin: 0;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-green-dark);
}

.news-updates__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--color-green);
}

.news-updates__item {
	border-bottom: 1px solid var(--color-border);
}

.news-updates__item a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 18px 2px;
	transition: gap 0.2s var(--ease-brand);
}

.news-updates__item a:hover {
	gap: 22px;
}

.news-updates__date {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-green);
	white-space: nowrap;
}

.news-updates__arrow {
	font-size: 18px;
	line-height: 1;
	color: var(--color-text);
	transition: transform 0.2s var(--ease-brand), color 0.2s ease;
}

.news-updates__item a:hover .news-updates__arrow {
	transform: translateX(4px);
	color: var(--color-green);
}

.news-updates__archive,
.news-updates__archive:visited {
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-top: 20px;
	margin-left: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-green-dark);
	transition: color 0.2s ease;
}

.news-updates__archive:hover {
	color: var(--color-green);
}

.news-updates__title {
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-text);
}

/* ---------- 活動報告 (activity report) ---------- */
.activity-report {
	padding-block: 56px;
}

.activity-report__heading {
	margin-bottom: 28px;
}

.activity-report__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--color-orange);
}

.activity-report__eyebrow::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--color-orange);
}

.activity-report__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-green-dark);
}

.activity-report__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.activity-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* When a card is stretched to the tallest card in the row, the extra
	   height goes to the text area — not the image row, which would grow
	   taller and (via aspect-ratio) wider than the card. */
	grid-template-rows: auto 1fr;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 0 0 20px 20px;
	overflow: hidden;
	/* never let long titles / URLs in the excerpt widen the card */
	min-width: 0;
	overflow-wrap: anywhere;
}

.activity-card__image {
	width: 100%;
	aspect-ratio: 1200 / 628;
	background: var(--color-bg-gray);
}

.activity-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Posts without a featured image: brand-green panel with the white logo */
.activity-card__image--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-green);
}

.activity-card__image--empty img {
	width: 52%;
	height: auto;
	object-fit: contain;
}

.activity-report__empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	color: var(--color-text-light);
}

.activity-card__body {
	padding: 16px;
}

.activity-card__meta {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.activity-card__meta time {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-green-dark);
}

.activity-card__heading {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
}

.activity-card__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
}

.activity-card__link {
	margin-top: 12px;
}

/* Stretch the 続きを見る link over the whole card so any part is clickable */
.activity-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.activity-card:hover .link-arrow__arrow {
	background: var(--color-green-dark);
	color: var(--color-white);
	transform: translateX(2px);
}

.activity-report__footer {
	margin-top: 28px;
}

/* ---------- 中野たいせいと語る会 (talk session) ----------
   Figma design for this section uses its own gold/amber palette. */
.talk-session {
	padding-block: 56px;
	background: var(--color-cream);
	border: 10px solid var(--color-green);
}

.talk-session__intro {
	text-align: center;
}

.talk-session__heading-image {
	position: relative;
	width: 100%;
	max-width: 1407px;
	aspect-ratio: 1407 / 477;
	margin: 0 auto 20px;
}

.talk-session__heading-banner {
	display: block;
	width: 100%;
	height: auto;
}

.talk-session__heading-person {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
	animation: taisei-kataru-float 3.2s ease-in-out infinite;
}

@keyframes taisei-kataru-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.talk-session__heading-person {
		animation: none;
	}
}

/* Below 1024px the heading keeps a margin inside the green frame; the
   banner / person are only spread outward on PC, where there's room. */
@media (max-width: 1023px) {
	.talk-session__heading-image {
		display: flex;
		align-items: center;
		width: 92%;
	}

	/* Pull the two apart so the person doesn't cover the lettering; the
	   lettering is also a little smaller, centered in the heading's height. */
	.talk-session__heading-banner {
		width: 90%;
		transform: translateX(calc(-4% - 2px));
	}

	.talk-session__heading-person {
		right: -14%;
	}
}

@media (min-width: 1024px) {
	.talk-session__heading-banner {
		transform: translateX(-11%);
	}

	.talk-session__heading-person {
		right: -14%;
	}
}

.talk-session__lead {
	max-width: 560px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.9;
	text-align: left;
	color: var(--color-text);
}

.talk-session__schedule {
	margin-top: 44px;
}

.talk-session__schedule-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
	color: #e8720c;
}

.talk-session__schedule-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e8720c;
	opacity: 0.4;
}

.schedule-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.schedule-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	background: var(--color-white);
	border: 1px solid rgba(227, 168, 54, 0.3);
	border-radius: 16px;
	overflow: hidden;
}

.schedule-item__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 8px;
	text-align: center;
	color: var(--color-white);
	background: linear-gradient(160deg, var(--color-gold), var(--color-gold-dark));
}

.schedule-item__day {
	margin: 2px 0;
	font-family: "Anton", var(--font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
}

.schedule-item__weekday {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	vertical-align: bottom;
	border-radius: 50%;
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	color: var(--color-gold-dark);
}

/* Phones: the time gets its own line above the venue, so it never has to
   compete with the venue name and map button for width. From 600px it
   moves back to the right-hand side of the row. */
.schedule-item__time {
	order: -1;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-gold-dark);
	white-space: nowrap;
}

.schedule-item__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 14px;
}

.schedule-slot + .schedule-slot {
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.schedule-slot__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.schedule-slot__venue-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.schedule-item__venue {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text);
}

.schedule-item__map {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--color-gold);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-gold-dark);
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.schedule-item__map:visited {
	color: var(--color-gold-dark);
}

.schedule-item__map svg {
	width: 13px;
	height: 13px;
}

.schedule-item__map:hover {
	background: var(--color-gold);
	color: var(--color-white);
}

/* 【未確定】 prefix for sessions whose details aren't fixed yet */
.schedule-item__tentative {
	color: var(--color-orange);
}

/* Ended sessions: a grey 終了しました pill next to the time, the slot
   faded back, and — once every slot of the day is over — the date column
   switches from gold to grey. */
.schedule-slot__ended {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--color-text-light);
	color: var(--color-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 1px;
}

.schedule-slot--ended .schedule-item__time,
.schedule-slot--ended .schedule-item__venue,
.schedule-slot--ended .schedule-item__map {
	opacity: 0.5;
}

.schedule-slot--ended .schedule-item__time {
	opacity: 1;
	color: var(--color-text-light);
}

.schedule-item--ended {
	border-color: var(--color-border);
}

.schedule-item--ended .schedule-item__date {
	background: #b5b5b5;
}

.schedule-item--ended .schedule-item__weekday {
	color: #8a8a8a;
}

/* Very narrow phones (≤359px): not enough width for a date column beside
   the map button, so the date becomes a band across the top of the card. */
@media (max-width: 359px) {
	.schedule-item {
		grid-template-columns: minmax(0, 1fr);
	}

	.schedule-item__date {
		padding: 8px;
	}
}

/* CSS-only accordion: the checkbox (hidden via the HTML `hidden` attribute)
   toggles the extra schedule items and swaps the label's show/hide text via
   the general sibling combinator. */
.schedule-item--extra {
	display: none;
}

.schedule-toggle-input:checked ~ .schedule-list .schedule-item--extra {
	display: grid;
}

.schedule-toggle-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 20px;
	padding: 14px;
	background: var(--color-white);
	border: 1px solid var(--color-gold);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-gold-dark);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.schedule-toggle-label:hover {
	background: var(--color-gold);
	color: var(--color-white);
}

.schedule-toggle-label svg {
	transition: transform 0.2s var(--ease-brand);
}

.schedule-toggle-label__hide {
	display: none;
}

.schedule-toggle-input:checked ~ .schedule-toggle-label .schedule-toggle-label__show {
	display: none;
}

.schedule-toggle-input:checked ~ .schedule-toggle-label .schedule-toggle-label__hide {
	display: inline;
}

.schedule-toggle-input:checked ~ .schedule-toggle-label svg {
	transform: rotate(90deg);
}

/* ---------- ５つの約束 (promises) ---------- */
.promises {
	padding-block: 64px;
	background: var(--color-green);
}

.promises__heading {
	text-align: center;
	margin-bottom: 40px;
}

.promises__eyebrow {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-text-light);
}

.promises__rule {
	display: none;
}

.promises__video-lead {
	margin: 0 0 16px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.92);
}

.promises__video {
	max-width: 800px;
	margin: 0 auto 40px;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
}

.promises__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.policy-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.policy-block {
	background: var(--color-white);
	border-radius: 0 0 16px 16px;
	overflow: hidden;
}

.policy-block__title {
	margin: 0;
	padding: 28px 24px;
	background: var(--color-orange);
	font-weight: 800;
	line-height: 1.4;
	color: var(--color-white);
}

.policy-block__num {
	display: inline-block;
	margin-right: 14px;
	padding-right: 14px;
	border-right: 2px solid rgba(255, 255, 255, 0.6);
	font-family: "Anton", var(--font-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	vertical-align: middle;
}

.policy-block__title-text {
	font-family: var(--font-display);
	font-size: 22px;
	vertical-align: middle;
}

.policy-block__body {
	padding: 24px;
}

.policy-block__body p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.9;
	color: var(--color-text);
}

.policy-block__body p:last-child {
	margin-bottom: 0;
}

.policy-block__image {
	display: block;
	width: 100%;
	height: auto;
}

.policy-themes {
	margin-top: 48px;
	text-align: center;
}

.policy-themes__lead {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.92);
}

.policy-themes__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.policy-themes__footer {
	margin-top: 28px;
}

/* ---------- 実現する力 (realization) — forest-dark anchor section ----------
   Read as a letter: left-aligned story, one large climax line, and the
   word 「実現する」 itself as the section's single signature — vertical and
   sticky beside the text on desktop, closing the text on mobile. */
.realization {
	background: var(--color-green-dark);
	color: var(--color-white);
}

.realization__inner {
	padding-block: 64px 72px;
}

/* White rule with an upward notch that points back at the policies above */
.realization__divider {
	display: flex;
	align-items: flex-end;
	color: var(--color-white);
}

.realization__divider-line {
	flex: 1 1 0;
	height: 3px;
	background: currentColor;
}

.realization__divider-notch {
	flex: none;
	width: 64px;
	height: 46px;
	margin-inline: -1px;
	overflow: visible;
}

@media (min-width: 1024px) {
	.realization__divider-notch {
		width: 80px;
		height: 58px;
	}
}

.realization .realization__heading {
	padding-bottom: 0;
	text-align: left;
}

.realization__grid {
	margin-top: 32px;
}

.realization__banner {
	margin: 0 0 36px;
}

.realization__banner img {
	width: 100%;
	border-radius: 14px;
}

.realization__text {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 2;
	color: rgba(255, 255, 255, 0.9);
}

.realization__text--lead {
	font-size: 17px;
	font-weight: 500;
	color: var(--color-white);
}

/* The worries heard from citizens, set as voices rather than narration */
.realization__voices {
	margin: 0 0 28px;
	padding-left: 18px;
	border-left: 2px solid rgba(255, 255, 255, 0.35);
}

.realization__voice {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.72);
}

.realization__voices .realization__text {
	margin: 12px 0 0;
}

.realization__climax {
	margin: 48px 0 20px;
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--color-white);
	/* Break at phrase boundaries (not mid-word like 変化／へ) */
	word-break: auto-phrase;
	text-wrap: balance;
}

/* "その決意を、この言葉に込めました。" — the orange rule leads the eye on to
   the word itself */
.realization__closing {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-white);
}

.realization__closing::after {
	content: "";
	flex: 1;
	min-width: 32px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-orange);
}

.realization__word {
	margin: 28px 0 0;
	font-family: var(--font-display);
	font-size: clamp(64px, 19vw, 120px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--color-white);
	white-space: nowrap;
}

/* Revealed like a brush stroke once the section scrolls into view */
.realization__word span {
	display: inline-block;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.1s var(--ease-brand) 0.35s;
}

.realization.is-visible .realization__word span {
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.realization .realization__word span {
		clip-path: none;
		transition: none;
	}
}

/* ---------- WORKS ---------- */
.works {
	padding-block: 64px;
}

.works__head {
	text-align: center;
	margin-bottom: 44px;
}

.works__eyebrow {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
}

.works__lead {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
}

.works__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.work-card {
	position: relative;
}

.work-card__num {
	position: absolute;
	top: -22px;
	left: -5px;
	z-index: 1;
	font-family: var(--font-display);
	font-size: 54px;
	font-weight: 700;
	color: #faf6ec;
}

.work-card__image {
	position: relative;
	width: 100%;
	border-radius: 14px;
	margin-bottom: 18px;
	overflow: hidden;
	transition: transform 0.4s var(--ease-brand);
}

@media (hover: hover) {
	.work-card:hover .work-card__image {
		transform: scale(1.015);
	}
}

.work-card__title {
	position: relative;
	z-index: 1;
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
}

.work-card__text {
	margin: 0;
	font-size: 16px;
	color: var(--color-text-light);
	line-height: 1.8;
}

.work-card__lead {
	position: relative;
	z-index: 1;
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--color-green-dark);
}

.work-card__detail {
	position: relative;
	z-index: 1;
	padding: 18px;
	background: var(--color-bg-gray);
	border-radius: 14px;
}

.work-card__detail-label {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--color-green-dark);
}

.work-card__detail-text {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text);
}

.work-card__detail-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.work-card__detail-list li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 18px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text);
}

.work-card__detail-list li:last-child {
	margin-bottom: 0;
}

.work-card__detail-list li::before {
	content: "●";
	position: absolute;
	left: 0;
	top: 0.3em;
	font-size: 8px;
	color: var(--color-green);
}

.works__footer {
	margin-top: 52px;
	text-align: center;
}

/* ---------- PROFILE ---------- */
.profile {
	padding-block: 64px;
	background: var(--color-bg-gray);
}

.profile__intro {
	text-align: center;
}

.profile__portrait {
	width: 100%;
	max-width: 320px;
	margin: 0 auto 28px;
	border-radius: 16px;
}

.profile__eyebrow {
	margin: 0;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-green-dark);
}

.profile__eyebrow-jp {
	margin: 4px 0 26px;
	font-size: 16px;
	color: var(--color-text-light);
}

.profile__name {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	margin-bottom: 22px;
}

.profile__name-main {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--color-text);
}

.profile__name-kana {
	font-size: 13px;
	color: var(--color-text-light);
}

.profile__bio {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.95;
	text-align: left;
	color: var(--color-text);
}

.timeline {
	list-style: none;
	margin: 52px 0 0;
	padding: 0;
	border-left: 2px solid var(--color-border);
	margin-left: 6px;
}

.timeline__entry {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 0 0 44px 34px;
}

.timeline__entry:last-child {
	padding-bottom: 0;
}

.timeline__dot {
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-green);
	box-shadow: 0 0 0 4px var(--color-bg-gray);
}

.timeline__image {
	width: 120px;
	height: auto;
	flex-shrink: 0;
	border-radius: 10px;
}

.timeline__text {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	color: var(--color-text);
}

.timeline__text strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-display);
	color: var(--color-green-dark);
}

/* ---------- SUPPORTER — forest-dark anchor section ---------- */
.supporter {
	padding-block: 64px;
	text-align: center;
	background: var(--color-green-dark);
	color: var(--color-white);
}

.supporter__eyebrow {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.75);
}

.supporter__sub-heading {
	margin: 40px 0 0;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
}

.supporter__sns {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.supporter__sns-link,
.supporter__sns-link:visited {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	/* Icons line up on one left edge in every button; that edge is placed so
	   the widest label (X（旧Twitter）) sits centered, keeping each
	   icon + label group close to the middle. */
	padding: 14px 10px 14px max(12px, calc(50% - 72px));
	background: var(--color-white);
	border-radius: 10px;
	font-size: 13px;
	text-align: left;
	white-space: nowrap;
	font-weight: 700;
	color: var(--color-green-dark);
	transition: background-color 0.2s ease, transform 0.2s var(--ease-brand);
}

.supporter__sns-link:hover {
	background: var(--color-cream);
	transform: translateY(-2px);
}

.supporter__sns-icon {
	display: flex;
	flex-shrink: 0;
}

.supporter__sns-icon .sns-icon {
	width: 28px;
	height: 28px;
}

/* X and note icons are white discs — outline them so they don't vanish
   into the white button */
.supporter__sns-icon .sns-icon--x,
.supporter__sns-icon .sns-icon--note {
	box-shadow: 0 0 0 1px var(--color-border);
}

.supporter__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 36px;
}

.btn--block {
	width: 100%;
}

/* YouTube latest videos, under the SNS buttons */
/* White panel so the thumbnails and titles sit apart from the dark section */
.supporter__youtube {
	margin-top: 56px;
	padding: 32px 20px;
	border-radius: 16px;
	background: var(--color-white);
	color: var(--color-green-dark);
}

.supporter__youtube .supporter__sub-heading {
	margin-top: 0;
}

.supporter__youtube-more {
	margin: 36px 0 0;
}

/* 動画 / ショート: each group has its own small label */
.video-group + .video-group {
	margin-top: 40px;
}

.video-group__label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-orange);
	text-align: left;
}

.video-group__label::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--color-orange);
}

.video-list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 28px;
	text-align: left;
}

.video-card a,
.video-card a:visited {
	display: block;
	color: var(--color-text);
}

.video-card__image {
	position: relative;
	overflow: hidden;
	margin-bottom: 12px;
	border-radius: 12px;
	aspect-ratio: 16 / 9;
	background: rgba(0, 0, 0, 0.2);
}

/* hqdefault thumbnails are 4:3 with black bars; cover crops them to 16:9 */
.video-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease-brand);
}

/* Shorts: vertical 9:16 cards, two per row on phones */
.video-list--shorts {
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 16px;
}

.video-card--short .video-card__image {
	aspect-ratio: 9 / 16;
}

.video-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 40px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.6);
	transition: background-color 0.2s ease;
}

.video-card__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--color-white);
	transform: translateX(2px);
}

.video-card a:hover .video-card__image img {
	transform: scale(1.05);
}

.video-card a:hover .video-card__play {
	background: #ff0000;
}

.video-card__date {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-green);
}

.video-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.65;
	transition: color 0.2s ease;
}

.video-card a:hover .video-card__title {
	color: var(--color-green-dark);
}

/* ---------- NEWS (blog) ---------- */
.news-blog {
	padding-block: 64px;
}

/* Same eyebrow + heading pattern as the NEWS and REPORT sections */
.news-blog__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--color-orange);
}

.news-blog__eyebrow::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--color-orange);
}

.news-blog__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-green-dark);
}

/* 政策集 title with its update-day pill beside it */
.news-blog__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.news-blog__schedule {
	margin: 0;
	padding: 5px 13px;
	border: 1px solid var(--color-orange);
	background: var(--color-white);
	color: var(--color-orange);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	white-space: nowrap;
}

.news-blog__list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.news-blog__footer {
	margin-top: 44px;
	text-align: center;
}

/* =====================================================
   Responsive — tablet / desktop enhancements
   (design source is mobile-only; breakpoints below are
   this implementation's own responsive interpretation)
   ===================================================== */
@media (min-width: 600px) {
	.works__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 32px;
	}

	.news-blog__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.schedule-item {
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.schedule-item__day {
		font-size: 32px;
	}

	.schedule-item__body {
		padding: 16px;
	}

	.schedule-slot__row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.schedule-item__time {
		order: 0;
		font-size: 13px;
	}

	.schedule-item__venue {
		font-size: 18px;
	}

	.timeline {
		max-width: 560px;
		margin-inline: auto;
	}
}

@media (min-width: 768px) {
	.section-heading {
		font-size: 34px;
	}

	.message-intro__body {
		max-width: 640px;
		margin-inline: auto;
	}

	.realization__inner {
		max-width: 720px;
		padding-block: 88px 96px;
	}

	.realization__climax {
		font-size: 28px;
	}

	.profile__intro {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: 32px;
		align-items: start;
		text-align: left;
		max-width: 640px;
		margin-inline: auto;
	}

	.profile__portrait {
		margin: 0;
	}

	.profile__eyebrow,
	.profile__eyebrow-jp,
	.profile__name {
		text-align: left;
		justify-content: flex-start;
	}


	.supporter__youtube {
		padding: 40px;
	}

	.video-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}

	.video-list--shorts {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	.section-heading {
		font-size: 42px;
	}

	.hero__media {
		aspect-ratio: auto;
		height: calc(48vw - 80px);
	}

	/* The shorter hero leaves spare width either side of the photo — center
	   it rather than leaving it all on the left. */
	.hero__figures {
		justify-content: center;
	}

	/* Story left, the word 「実現する」 vertical on the right. It stays in
	   view while the story scrolls past, and its foot meets the closing
	   line's orange rule at the end of the section. */
	.realization__inner {
		max-width: calc(1000px + var(--container-padding) * 2);
		padding-block: 112px 120px;
	}

	.realization__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 0 56px;
		margin-top: 48px;
	}

	.realization__text {
		font-size: 17px;
	}

	.realization__text--lead {
		font-size: 18px;
	}

	.realization__voice {
		font-size: 20px;
	}

	.realization__climax {
		margin-top: 64px;
		font-size: 32px;
	}

	.realization__closing {
		font-size: 17px;
	}

	.realization__word {
		position: sticky;
		bottom: 48px;
		margin: 0;
		font-size: clamp(120px, 11vw, 168px);
		line-height: 1.05;
		writing-mode: vertical-rl;
	}

	.realization__word span {
		clip-path: inset(0 0 100% 0);
	}

	/* Image-left / text-right layout at desktop: the photo spans the full
	   height of the row so the heading sits directly above the lead
	   paragraph in the right column, rather than spanning above both. */
	.message-intro__body {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
		gap: 16px 48px;
		max-width: 1200px;
	}

	.message-intro__heading {
		grid-column: 2;
		grid-row: 1;
		font-size: 34px;
		text-align: left;
		white-space: normal;
		word-break: auto-phrase;
	}

	.message-intro__heading-break {
		display: none;
	}

	.message-intro__banner {
		grid-column: 1;
		grid-row: 1 / 3;
		height: 100%;
		margin: 0;
	}

	.message-intro__banner img {
		height: 100%;
		object-fit: cover;
	}

	.message-intro__text {
		grid-column: 2;
		grid-row: 2;
	}

	.message-intro__video-block {
		grid-column: 1 / -1;
	}

	.news-updates {
		padding-block: 96px;
	}

	.news-updates__grid {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	.news-updates__intro {
		flex: 0 0 300px;
	}

	.news-updates__heading {
		font-size: 48px;
	}

	.news-updates__col {
		flex: 1;
		min-width: 0;
	}

	.news-blog__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.works__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 56px 40px;
	}

	.profile__intro {
		display: grid;
		grid-template-columns: 340px 1fr;
		gap: 56px;
		align-items: start;
		text-align: left;
		max-width: none;
	}

	.profile__portrait {
		margin: 0;
	}

	.profile__eyebrow,
	.profile__eyebrow-jp,
	.profile__name {
		text-align: left;
		justify-content: flex-start;
	}

	.timeline {
		max-width: none;
	}

	.timeline__image {
		width: 200px;
	}

	.supporter__sns {
		max-width: 640px;
		margin-inline: auto;
	}

	.supporter__sns-link,
	.supporter__sns-link:visited {
		gap: 12px;
		font-size: 14px;
	}

	.supporter__actions {
		flex-direction: row;
		max-width: 640px;
		margin-inline: auto;
	}

	.activity-report__title,
	.news-blog__title {
		font-size: 48px;
	}

	.news-blog {
		padding-block: 96px;
	}

	.news-blog__list {
		margin-top: 40px;
	}

	.news-blog__footer {
		max-width: 420px;
		margin-inline: auto;
	}

	.news-blog__footer .btn {
		width: 100%;
	}

	/* Three-up grid at desktop; each card flips to image-on-top so it reads
	   as a considered column rather than a squeezed horizontal row. */
	.activity-report__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}

	.activity-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.activity-card__image {
		width: 100%;
	}

	.activity-card__body {
		padding: 20px 24px;
	}

	.activity-report__footer {
		max-width: 420px;
		margin-inline: auto;
	}

	.talk-session__intro {
		max-width: 720px;
		margin-inline: auto;
	}

	.talk-session__schedule {
		max-width: 800px;
		margin-inline: auto;
	}

	.schedule-item {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	.schedule-item__body {
		padding: 20px 24px;
	}

	.schedule-slot__venue-group {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}
}

/* ---------- Staggered reveal for repeated list items ---------- */
.policy-list li,
.works__list li,
.news-blog__list li,
.activity-report__list li,
.schedule-list li,
.timeline__entry {
	transition: opacity 0.6s var(--ease-brand), transform 0.6s var(--ease-brand);
}

[data-reveal]:not(.is-visible) .policy-list li,
[data-reveal]:not(.is-visible) .works__list li,
[data-reveal]:not(.is-visible) .news-blog__list li,
[data-reveal]:not(.is-visible) .activity-report__list li,
[data-reveal]:not(.is-visible) .schedule-list li,
[data-reveal]:not(.is-visible) .timeline__entry {
	opacity: 0;
	transform: translateY(18px);
}

[data-reveal] .policy-list li:nth-child(2),
[data-reveal] .works__list li:nth-child(2),
[data-reveal] .news-blog__list li:nth-child(2),
[data-reveal] .activity-report__list li:nth-child(2),
[data-reveal] .schedule-list li:nth-child(2),
[data-reveal] .timeline__entry:nth-child(2) {
	transition-delay: 0.08s;
}

[data-reveal] .policy-list li:nth-child(3),
[data-reveal] .works__list li:nth-child(3),
[data-reveal] .news-blog__list li:nth-child(3),
[data-reveal] .activity-report__list li:nth-child(3),
[data-reveal] .schedule-list li:nth-child(3),
[data-reveal] .timeline__entry:nth-child(3) {
	transition-delay: 0.16s;
}

[data-reveal] .policy-list li:nth-child(4),
[data-reveal] .works__list li:nth-child(4),
[data-reveal] .timeline__entry:nth-child(4) {
	transition-delay: 0.24s;
}

[data-reveal] .policy-list li:nth-child(5),
[data-reveal] .works__list li:nth-child(5) {
	transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
	.policy-list li,
	.works__list li,
	.news-blog__list li,
	.activity-report__list li,
	.schedule-list li,
	.timeline__entry {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}