@charset "UTF-8";

/* ========================================
   導入セクション
======================================== */
.about {
	padding-block: 80px 100px;
	background: #fff;
}

.about__inner {
	max-width: 960px;
}

.about__title {
	margin: 0;
	text-align: center;
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 400;
	letter-spacing: .05em;
	line-height: 1.6;
}

/* ========================================
   見出し下の葉っぱ
======================================== */
.about__heading-decoration {
	position: relative;
	width: 66px;
	height: 20px;
	margin: 8px auto 32px;
}

.about__heading-decoration::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #53c5b1;
}

.about__heading-decoration span {
	position: absolute;
	top: 3px;
	width: 15px;
	height: 9px;
	border-radius: 100% 0 100% 0;
	background: #6aab45;
	transform: rotate(-15deg);
}

.about__heading-decoration span:first-child {
	left: 22px;
	top: 8px;
}

.about__heading-decoration span:last-child {
	left: 34px;
}

/* ========================================
   写真と本文
======================================== */
.about__body {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	align-items: center;
	gap: 56px;
}

/* ========================================
   写真の装飾
======================================== */
.about__visual {
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: 380px;
	padding: 30px;
}

/* 青い柔らかな形 */
.about__visual::before {
	content: "";
	position: absolute;
	inset: 14px 34px 42px 0;
	z-index: -2;
	border-radius: 42% 58% 62% 38% / 35% 42% 58% 65%;
	background: linear-gradient(135deg,
			rgb(139 213 239 / 40%),
			rgb(139 213 239 / 8%));
	transform: rotate(-18deg);
}

/* 緑の柔らかな形 */
.about__visual::after {
	content: "";
	position: absolute;
	inset: 50px 0 15px 35px;
	z-index: -1;
	border: 1px dashed #8cbd67;
	border-radius: 54% 46% 40% 60% / 55% 38% 62% 45%;
	background: linear-gradient(135deg,
			rgb(199 224 172 / 8%),
			rgb(199 224 172 / 55%));
	transform: rotate(15deg);
}

.about__image {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

/* 写真左下の葉っぱ */
.about__sprig {
	position: absolute;
	left: 0;
	bottom: 12px;
	z-index: 2;
	display: block;
	width: 125px;
	height: auto;
	overflow: visible;
	pointer-events: none;
}

@media (max-width: 767px) {
	.about__sprig {
		left: -3px;
		bottom: 10px;
		width: 105px;
	}
}

/* ========================================
   本文とリンク
======================================== */
.about__content {
	font-size: 14px;
	line-height: 2.3;
	overflow-wrap: anywhere;
}

.about__content p {
	margin: 0;
}

.about__content p+p {
	margin-top: 8px;
}

.about__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 178px;
	min-height: 46px;
	margin-top: 18px;
	padding: 8px 24px;

	border: 1px solid var(--color-blue);
	border-radius: 999px;
	background: #fff;
	color: var(--color-blue);

	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	text-decoration: none;

	transition: background-color .2s, color .2s;
}

.about__button:hover {
	background: var(--color-blue);
	color: #fff;
}

.about__button:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 4px;
}

/* ========================================
   タブレット
======================================== */
@media (max-width: 1023px) {
	.about__body {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: 32px;
	}

	.about__visual {
		padding: 25px;
	}
}

/* ========================================
   スマートフォン
======================================== */
@media (max-width: 767px) {
	.about {
		padding-block: 55px 65px;
	}

	.about__heading-decoration {
		margin-bottom: 24px;
	}

	.about__body {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.about__visual {
		width: min(100%, 320px);
		margin-inline: auto;
	}

	.about__content {
		font-size: 14px;
		line-height: 2.1;
	}

	.about__content p+p {
		margin-top: 14px;
	}

	.about__button {
		display: flex;
		width: 178px;
		margin: 24px auto 0;
	}
}




/* ========================================
   導入：流体シェイプ
======================================== */

/* 青い装飾 */
.about__visual::before {
	animation: about-blob-blue 12s ease-in-out infinite;
}

/* 緑の装飾と点線 */
.about__visual::after {
	animation: about-blob-green 15s ease-in-out infinite;
}

/* 写真の輪郭 */
.about__image {
	animation: about-photo-shape 14s ease-in-out infinite;
}

/* 青：ゆっくり形を変える */
@keyframes about-blob-blue {

	0%,
	100% {
		border-radius: 42% 58% 62% 38% / 35% 42% 58% 65%;
		transform: rotate(-18deg);
	}

	33% {
		border-radius: 58% 42% 38% 62% / 48% 60% 40% 52%;
		transform: rotate(-12deg) translate(3px, -4px);
	}

	66% {
		border-radius: 38% 62% 55% 45% / 60% 38% 62% 40%;
		transform: rotate(-22deg) translate(-3px, 3px);
	}
}

/* 緑：青とは違う周期で動かす */
@keyframes about-blob-green {

	0%,
	100% {
		border-radius: 54% 46% 40% 60% / 55% 38% 62% 45%;
		transform: rotate(15deg);
	}

	33% {
		border-radius: 40% 60% 58% 42% / 42% 58% 42% 58%;
		transform: rotate(21deg) translate(-3px, 4px);
	}

	66% {
		border-radius: 62% 38% 46% 54% / 60% 45% 55% 40%;
		transform: rotate(10deg) translate(4px, -3px);
	}
}

/* 写真は位置を動かさず、輪郭だけ柔らかく変化 */
@keyframes about-photo-shape {

	0%,
	100% {
		border-radius: 50% 50% 48% 52% / 48% 51% 49% 52%;
	}

	33% {
		border-radius: 47% 53% 52% 48% / 53% 47% 53% 47%;
	}

	66% {
		border-radius: 53% 47% 46% 54% / 47% 54% 46% 53%;
	}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {

	.about__visual::before,
	.about__visual::after,
	.about__image {
		animation: none;
	}
}


/* ========================================
   トップページ：ブロック全体がふわっと出現
======================================== */
:is(.about, .activity, .supporter, .proposal).is-reveal-ready>.container {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 1s ease-out,
		transform 1s ease-out;
}

:is(.about, .activity, .supporter, .proposal).is-reveal-visible>.container {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	:is(.about, .activity, .supporter, .proposal).is-reveal-ready>.container {
		opacity: 1;
		transform: none;
		transition: none;
	}
}



/* ========================================
   活動内容
======================================== */
.activity {
	padding-block: 40px 80px;
	background: var(--color-white);
	scroll-margin-top: 100px;
}

.activity__inner {
	max-width: 960px;
}

.activity__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.activity__item {
	min-width: 0;
}

.activity-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px 12px 12px;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	background: linear-gradient(145deg, #fafdff, #fff 45%);
}

/* 番号とイラスト */
.activity-card__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 116px;
	padding-left: 42px;
	margin-bottom: 14px;
}

.activity-card__number {
	position: absolute;
	top: 10px;
	left: 10px;
	isolation: isolate;

	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;

	color: var(--color-blue);
	font-family: var(--font-heading);
	font-size: 34px;
	font-style: italic;
	line-height: 1;
}

.activity-card__number::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 58% 42% 48% 52% / 60% 35% 65% 40%;
	background: #e1f0fc;
	transform: rotate(-12deg);
}

.activity-card__illustration {
	display: block;
	width: 170px;
	max-width: 100%;
	height: 108px;
	object-fit: contain;
}

/* 見出しと本文 */
.activity-card__title {
	margin-bottom: 10px;
	color: var(--color-green);
	font-family: var(--font-heading);
	font-size: clamp(23px, 2.3vw, 28px);
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.6;
	text-align: center;
}

.activity-card__text {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 2;
	text-align: center;
}

/* 写真をカード下端にそろえる */
.activity-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 30 / 19;
	margin-top: auto;
	border-radius: 12px;
	object-fit: cover;
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
	.activity__cards {
		gap: 12px;
	}

	.activity-card {
		padding-inline: 10px;
	}

	.activity-card__visual {
		padding-left: 34px;
	}

	.activity-card__number {
		left: 0;
		width: 48px;
		height: 48px;
		font-size: 30px;
	}

	.activity-card__text {
		font-size: 13px;
	}
}

/* スマートフォン */
@media (max-width: 767px) {
	.activity {
		padding-block: 20px 60px;
	}

	.activity__cards {
		grid-template-columns: 1fr;
		gap: 24px;
		max-width: 380px;
		margin-inline: auto;
	}

	.activity-card {
		padding: 24px 16px 16px;
	}

	.activity-card__visual {
		margin-bottom: 10px;
	}

	.activity-card__number {
		left: 12px;
	}

	.activity-card__title {
		font-size: 27px;
	}

	.activity-card__text {
		font-size: 15px;
	}
}





/* ========================================
   サポーター登録
======================================== */
.supporter {
	position: relative;
	isolation: isolate;
	padding-block: 70px 80px;
	overflow: hidden;
	scroll-margin-top: 100px;
}

.supporter__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
}

.supporter__body {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.supporter__content {
	font-size: 15px;
	line-height: 2;
}

.supporter__fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 540px;
	margin-block: 28px;
}

.supporter__fields li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 1;
	padding: 10px 4px;
	border: 1px solid #e1ebd8;
	border-radius: 50%;
	background: #f5f8f1;
	text-align: center;
}

.supporter__fields svg,
.proposal__step svg {
	display: block;
	width: 56px;
	height: 56px;
	fill: none;
	stroke: #638b42;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.supporter__fields span {
	font-size: 13px;
	line-height: 1.5;
}

.supporter__note {
	margin-top: 20px;
	padding: 14px 18px;
	border: 1px solid #dfead6;
	border-radius: 8px;
	background: #f5f8f1;
	font-size: 14px;
}

/* 風は固定位置。出現時も本体を移動させない */
.supporter__wind {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 240px;
	pointer-events: none;
}

.supporter__wind svg {
	display: block;
	width: 100%;
	height: 100%;
}

.supporter.is-wind-ready .supporter__wind svg {
	clip-path: inset(0 100% 0 0);
}

.supporter.is-wind-visible .supporter__wind svg {
	animation: supporter-wind-reveal 1s ease-out forwards;
}

@keyframes supporter-wind-reveal {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

/* ========================================
   企画・アイデアの提案受付
======================================== */
.proposal {
	padding-block: 60px 90px;
	scroll-margin-top: 100px;
}

.proposal__inner {
	max-width: 1100px;
}

.proposal__lead {
	margin-bottom: 34px;
	font-size: 15px;
	line-height: 2;
	text-align: left;
}

.proposal__steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 40px;
}

.proposal__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 170px;
	padding: 22px 8px 16px;
	border: 1px solid #cfe3f7;
	border-radius: 43% 57% 48% 52% / 50% 44% 56% 50%;
	background: #fff;
	text-align: center;
}

.proposal__step:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: -33px;
	color: #99bd78;
	font-size: 30px;
	line-height: 1;
	transform: translateY(-50%);
}

.proposal__number {
	position: absolute;
	top: -6px;
	left: 6px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #1689db;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1;
}

.proposal__step svg {
	margin-bottom: 12px;
}

.proposal__step h3 {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.7;
}

.proposal__step p {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.7;
}

.proposal__action {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.proposal__action .about__button {
	margin: 0;
}

/* タブレット */
@media (max-width: 1023px) {
	.supporter__body {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		gap: 28px;
	}

	.supporter__fields {
		gap: 8px;
	}

	.supporter__fields svg {
		width: 44px;
		height: 44px;
	}

	.supporter__fields span {
		font-size: 11px;
	}

	.proposal__steps {
		gap: 24px;
	}

	.proposal__step:not(:last-child)::after {
		right: -22px;
		font-size: 22px;
	}


}

/* スマートフォン */
@media (max-width: 767px) {
	.supporter {
		padding-block: 50px 55px;
	}

	.supporter__wind {
		top: 0;
		height: 120px;
	}

	.supporter__body {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.supporter__visual {
		width: min(100%, 320px);
		margin-inline: auto;
	}

	.supporter__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		max-width: 300px;
		margin-inline: auto;
	}

	.supporter__fields svg {
		width: 52px;
		height: 52px;
	}

	.supporter__fields span {
		font-size: 13px;
	}

	.supporter__content>.about__button {
		width: fit-content;
		max-width: 100%;
	}

	.proposal {
		padding-block: 40px 60px;
	}

	.proposal__lead {
		text-align: left;
	}

	.proposal__lead br {
		display: none;
	}

	.proposal__steps {
		grid-template-columns: 1fr;
		gap: 36px;
		max-width: 300px;
		margin-inline: auto;
	}

	.proposal__step {
		min-height: 160px;
	}

	.proposal__step:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -30px;
		left: 50%;
		font-size: 26px;
		transform: translateX(-50%) rotate(90deg);
	}

	.proposal__step h3 {
		font-size: 15px;
	}

	.proposal__step p {
		font-size: 13px;
	}



	.proposal__action .about__button {
		width: fit-content;
		max-width: 100%;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.supporter.is-wind-ready .supporter__wind svg {
		clip-path: none;
		animation: none;
	}
}