@layer page {
	/* ------ Hero ------ */
	.sec-top-hero {
		width: 100%;
		height: clamp(250px, 26.389vw, 250px);
		position: relative;
		overflow: hidden;
		background: var(--c-dark);
	}

	.sec-top-hero__slider,
	.sec-top-hero__slides,
	.sec-top-hero__slide {
		width: 100%;
		height: 100%;
	}

	.sec-top-hero__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition-property: opacity;
		transition-duration: 2s;
		transition-timing-function: ease;
	}

	.sec-top-hero__slide.is-active {
		opacity: 1;
	}
	.sec-top-hero__slide::before {
		content: "";
		width: 100%;
		height: clamp(170px, 17.361vw, 250px);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		display: block;
	}

	.sec-top-hero__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: relative;
		z-index: 0;
	}

	.sec-top-hero__caption {
		position: absolute;
		right: 20px;
		bottom: 20px;
		z-index: 20;
		color: var(--c-wh);
		font-size: var(--fz-14);
		font-weight: 400;
		line-height: 1.5;
	}

	.sec-top-hero__marquee {
		width: 100%;
		height: auto;
		margin-top: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		top: -21px;
		left: 0;
		z-index: 2;
		opacity: 0.3;
		color: var(--c-wh);
		font-size: var(--fz-fluid-100-120);
		line-height: 1;
		letter-spacing: -0.05em;
	}

	.sec-top-hero__marquee-track {
		width: max-content;
		display: flex;
		animation: top-hero-marquee 60s linear infinite;
		will-change: transform;
	}

	.sec-top-hero__marquee-item {
		width: max-content;
		padding-right: 20px;
		flex: 0 0 auto;
	}

	.sec-top-hero__marquee-item img {
		width: 100%;
		max-width: none;
	}

	@keyframes top-hero-marquee {
		from {
			transform: translate3d(0, 0, 0);
		}

		to {
			transform: translate3d(-50%, 0, 0);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.sec-top-hero__marquee-track {
			animation: none;
		}
	}

	/* ------ notice ------ */
	.sec-top-notice {
	}

	/* ------ news ------ */
	.sec-top-news{
  		padding-top: clamp(20px, 3.472vw, 30px);
	}
 
	.sec-top-news__grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(10px, 1.389vw, 20px);
	}

	.c-news-panel {
		width: 100%;
		background: var(--c-wh);
		padding: clamp(20px, 2.778vw, 30px);
	}

	.c-news-panel__head {
		margin-bottom: clamp(20px, 2.083vw, 20px);
	}
 
 .c-news-panel--news .c-btn-box.is-right .btn-more{
  background: var(--c-green);
 }
 
 .c-news-panel__head .c-h2.is-primary{
  color: var(--c-green)!important;
 }
 
 .c-news-panel__head .c-h2.is-primary::before{
  background: var(--c-green)!important;
 }

	@container main-content (max-width: 768px) {
		.sec-top-news__grid {
			grid-template-columns: 1fr;
		}
	}

	/* ------ about ------ */
	.sec-top-about {
		padding-block: clamp(50px, 5.556vw, 80px);
	}

	.sec-top-about__inner {
		width: 100%;
		display: grid;
		gap: 30px;
	}
	.sec-top-about__head {
		width: min(870px, 100%);
		margin-inline: auto;
		display: grid;
		gap: 20px;
		align-items: center;
	}

	.sec-top-about__head h2 {
		color: var(--c-secondary);
		font-size: var(--fz-fluid-24-30);
		line-height: 1.5;
		text-align: center;
		font-weight: 400;
		width: max-content;
		margin-inline: auto;
	}

	.sec-top-about__head p {
		line-height: 2;
	}

	.sec-top-about__diagram {
		width: min(870px, 100%);
		min-height: 400px;
		margin-inline: auto;
		display: grid;
		place-items: center;
		position: relative;
	}

	.c-about-node {
		width: clamp(125px, 10.417vw, 150px);
		height: 200px;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
		position: absolute;
		top: 50%;
		z-index: 2;
		opacity: 0;
		transition: opacity 0.8s ease, transform 0.8s ease;
		transition-delay: 0.45s;
		background: var(--c-wh);
		border-radius: 999px;
	}

	.c-about-node--left {
		left: 0;
		transform: translate(-30px, -50%);
		border: 1px solid var(--c-primary);
	}

	.c-about-node--right {
		right: 0;
		transform: translate(30px, -50%);
		border: 1px solid var(--c-orange);
	}

	.sec-top-about__diagram.is-animated .c-about-node {
		opacity: 1;
		transform: translate(0, -50%);
	}

	.c-about-node::after {
		content: "";
		width: 45px;
		height: auto;
		aspect-ratio: 45 / 70;
		position: absolute;
		top: 50%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.c-about-node--left::after {
		left: calc(100% + clamp(8px, 1.389vw, 20px));
		background-image: url("../images/top/diagram-arrow-left-lg.webp");
	}

	.c-about-node--right::after {
		right: calc(100% + clamp(8px, 1.389vw, 20px));
		background-image: url("../images/top/diagram-arrow-right-lg.webp");
	}

	.c-about-node__icon {
		width: 32px;
		height: auto;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
	}

	.c-about-node > p {
		font-weight: 600;
		text-align: center;
	}
	.c-about-node--left > p {
		color: var(--c-primary);
	}
	.c-about-node--right > p {
		color: var(--c-orange);
	}

	.c-about-node > span {
		color: var(--c-gray);
		font-size: var(--fz-10);
		text-align: center;
		text-wrap: balance;
		max-width: 100px;
	}

	.c-about-center {
		display: grid;
		place-items: center;
		position: relative;
		width: min(400px, 100%);
		aspect-ratio: 1 / 1;
		isolation: isolate;
		z-index: 1;
		opacity: 0;
		transform: scale(0.92);
		transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.sec-top-about__diagram.is-animated .c-about-center {
		opacity: 1;
		transform: scale(1);
	}

	.c-about-center::before {
		content: "";
		display: grid;
		place-items: center;
		position: absolute;
		inset: 0;
		z-index: -1;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		background: linear-gradient(225deg, #f69021 0%, #00a291 100%);
		filter: blur(30px);
		border-radius: 99999px;
	}

	.c-about-center__text {
		display: grid;
		justify-items: center;
		gap: clamp(15px, 2.083vw, 30px);
		color: var(--c-wh);
		text-align: center;
		position: relative;
		z-index: 1;
	}

	.c-about-center__text strong {
		font-size: var(--fz-fluid-20-28);
	}

	.c-about-center__text small {
		font-size: var(--fz-fluid-9-12);
	}

	.c-about-center__tags {
		width: fit-content;
		display: grid;
		grid-template-columns: repeat(6, 50px);
		justify-items: center;
		gap: 10px 5px;
	}

	.c-about-center__tags li {
		grid-column: span 2;
		width: 100px;
		height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding-inline: 10px;
		border: 1px dashed currentColor;
		border-radius: 999px;
		font-size: var(--fz-fluid-11-14);
		font-weight: 500;
		line-height: 1.3;
	}

	.c-about-center__tags li:nth-child(-n + 2) {
		grid-column: span 2;
	}

	.c-about-center__tags li:nth-child(1) {
		grid-column: 2 / span 2;
	}

	.c-about-center__tags li:nth-child(2) {
		grid-column: 4 / span 2;
	}

	@container main-content (max-width: 768px) {
		.sec-top-about {
			padding-inline: 0;
			overflow: hidden;
		}
		.sec-top-about__head {
			padding-inline: clamp(20px, 3.472vw, 50px);
		}
		.sec-top-about__diagram {
			width: min(430px, 100%);
		}
		.c-about-center {
			width: min(380px, 100%);
		}
		.c-about-node::after {
			width: 20px;
			aspect-ratio: 20 / 35;
		}
		.c-about-node--left::after {
			background-image: url("../images/top/diagram-arrow-right-sm.webp");
		}
		.c-about-node--right::after {
			background-image: url("../images/top/diagram-arrow-left-sm.webp");
		}

		.c-about-center__tags {
			width: fit-content;
			grid-template-columns: 1fr;
			gap: 7px;
		}

		.c-about-center__tags li {
			grid-column: auto !important;
			width: 100px;
			height: 40px;
			padding-inline: 10px;
		}
	}
	@container main-content (max-width: 390px) {
		.sec-top-about__diagram.is-animated .c-about-node--left {
			transform: translate(-5%, -40%);
		}
		.sec-top-about__diagram.is-animated .c-about-node--right {
			transform: translate(5%, -40%);
		}
		.c-about-node > p {
			font-size: var(--fz-14);
		}
		.c-about-node::after {
			width: 14px;
		}
		.c-about-node > span {
			font-size: var(--fz-8);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.c-about-center,
		.sec-top-about__diagram.is-animated .c-about-center {
			opacity: 1;
			transition: none;
			transform: scale(1);
		}

		.c-about-node,
		.c-about-node--left,
		.c-about-node--right,
		.sec-top-about__diagram.is-animated .c-about-node {
			opacity: 1;
			transition: none;
			transform: translate(0, -50%);
		}
	}

	@container main-content (max-width: 768px) {
		@media (prefers-reduced-motion: reduce) {
			.c-about-node,
			.c-about-node--left,
			.c-about-node--right,
			.sec-top-about__diagram.is-animated .c-about-node {
				transform: translateY(0);
			}
		}
	}

	/* ------ activity ------ */
	.sec-top-activities__grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
	}

	.sec-top-activities__grid.is-2-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sec-top-activities__grid.is-2-columns .c-activity-card {
		min-height: 300px;
	}

	.sec-top-activities__grid.is-2-columns .c-activity-card__image {
		aspect-ratio: 370 / 210;
	}

	.sec-top-activities__grid.is-1-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.c-activity-card {
		--activity-bg: none;
		min-height: clamp(300px, 41.667vw, 600px);
		display: block;
		position: relative;
		overflow: hidden;
		color: var(--c-wh);
		background-color: var(--c-bg-gray);
		background-image: var(--activity-bg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		padding-inline: clamp(30px, 3.472vw, 50px);
		padding-top: clamp(40px, 3.472vw, 50px);
		padding-bottom: clamp(15px, 4.167vw, 60px);
		gap: clamp(15px, 1.389vw, 20px);
	}
	.c-activity-card--meeting {
		--activity-bg: url("../images/top/activity-bg-meeting-pc.webp");
		--activity-bg-sp: url("../images/top/activity-bg-meeting-sp.webp");
	}

	.c-activity-card--flood-disaster-symposium {
		--activity-bg: url("../images/top/activity-bg-flood-disaster-symposium-pc.webp");
		--activity-bg-sp: url("../images/top/activity-bg-flood-disaster-symposium-sp.webp");
	}

	.c-activity-card--sediment-disaster-symposium {
		--activity-bg: url("../images/top/activity-bg-sediment-disaster-symposium-pc.webp");
		--activity-bg-sp: url("../images/top/activity-bg-sediment-disaster-symposium-sp.webp");
	}

	.c-activity-card__image {
		position: relative;
		z-index: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 300 / 450;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.c-activity-card__image picture,
	.c-activity-card__image img {
		width: 100%;
		height: 100%;
	}

	.c-activity-card__image img {
		object-fit: cover;
		transition: transform 0.55s ease;
	}

	@media (hover: hover) {
		.c-activity-card:hover .c-activity-card__image img {
			transform: scale(1.1);
		}
	}

	.c-activity-card__ttl-en {
		position: absolute;
		top: clamp(20px, 2.083vw, 30px);
		left: clamp(15px, 2.083vw, 30px);
		z-index: 10;
		font-size: var(--fz-34);
		font-weight: 400;
	}
	.c-activity-card__body {
		width: 100%;
		position: relative;
		z-index: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.c-activity-card__ttl {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		color: var(--c-wh);
		font-size: var(--fz-16);
		font-weight: 400;
		line-height: 1.5;
	}

	.c-activity-card--flood-disaster-symposium .c-activity-card__ttl,
	.c-activity-card--sediment-disaster-symposium .c-activity-card__ttl {
		color: var(--c-text);
	}

	.c-activity-card__ttl::after {
		content: "";
		width: 18px;
		height: auto;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
		background: currentColor;
		mask: url("../images/common/icon-arrow-white.svg") center / contain no-repeat;
		-webkit-mask: url("../images/common/icon-arrow-white.svg") center / contain no-repeat;
	}

	@container main-content (max-width: 768px) {
		.sec-top-activities__grid {
			grid-template-columns: 1fr;
		}

		.sec-top-activities__grid.is-2-columns,
		.sec-top-activities__grid.is-1-columns {
			grid-template-columns: 1fr;
		}

		.sec-top-activities__grid.is-2-columns .c-activity-card {
			min-height: 0;
		}

		.c-activity-card {
			background-image: var(--activity-bg-sp, var(--activity-bg));
			height: 300px;
			max-height: 300px;
			min-height: 0;
		}
		.c-activity-card__image {
			aspect-ratio: 370 / 210;
		}
	}

	/* ------ heritage ------ */
	.sec-top-heritage {
		padding-block: clamp(30px, 6.944vw, 30px);
		padding-right: 0;
	}
	.sec-top-heritage > .c-btn-box {
		padding-right: clamp(20px, 3.472vw, 50px);
	}

	.sec-top-heritage__head {
		width: 100%;
		margin-bottom: clamp(20px, 2.083vw, 30px);
	}

	.sec-top-heritage__slider {
		overflow: hidden;
	}

	.c-heritage-card__link {
		display: block;
		position: relative;
		overflow: hidden;
	}

	.c-heritage-card__image {
		aspect-ratio: 340 / 210;
		overflow: hidden;
	}

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

	.c-heritage-card__body {
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding-inline: 20px;
		padding-block: 38px 20px;
		color: var(--c-wh);
		line-height: 1.5;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	}

	.c-heritage-card__body h3 {
		font-size: var(--fz-18);
		font-weight: 600;
	}
	.c-heritage-card__body p {
		font-size: var(--fz-14);
		font-weight: 400;
	}

	@container main-content (max-width: 768px) {
	}
}