@charset "utf-8";

.pageDonate .topBlock{
  display: block;
	padding: min(7.32vw,100px) min(5.86vw,80px) min(4.39vw,60px);
	text-align: center;
	.main{font-size: var(--px40);font-weight: bold;line-height: 1.5;}
	.sub{font-size: calc(var(--px18) * var(--zoom));margin-top: var(--px45);line-height: 1.8;}
	.img{
		margin-top: min(4.39vw,60px);
		text-align: center;
		span{display: inline-block;width: 80%}
	}
}

.pageDonate .itemBox{
  display: flex;
	margin-top: var(--px20);
	.imgSide p{
		width: min(24.89vw,340px);
		height: min(19.77vw,270px);
	}
	.infoSide{
		background: #f4f4f4;
		width: 100%;
		.wrap{padding: 0 var(--px30);}
		.ttl{font-weight: bold;font-size: var(--px20);margin-top: var(--px20);}
		.txt{font-size: calc(var(--px16) * var(--zoom));margin-top: var(--px15);line-height: 1.5}
		.txtList{font-size: calc(var(--px16) * var(--zoom));margin-top: var(--px15);line-height: 1.5}
	}
}

.pageDonate .itemBox .sdgsBox{
	width: auto;
	display: flex;
	justify-content: flex-end;
	gap: var(--px5);
	li{
		width: var(--px40);
	}
}

.pageDonate .itemBox .tagBox{
  display: flex;
  flex-wrap: wrap;
	gap: var(--px10);
	margin-top: var(--px5);
	p{
		font-size: var(--px18);
  	display: inline-flex;
		align-items: center;
		height: var(--px30);
		line-height: 1;
		padding-left: var(--px10);
		padding-right: var(--px10);
		font-weight: bold;
		border: 1px solid #000;
	}
}

.pageDonate .supporterBox{
  display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--px45);
	li{
		display: flex;
		align-items: flex-start;
		padding-top: var(--px30);
		min-height: min(20.5vw,280px);
		background: #f4f4f4;
	}
	div{
		padding-left: var(--px50);
		padding-right: var(--px50);
	}
	.ttlBox{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		width: 100%;
		.ttl{font-size: var(--px24);font-weight: bold;line-height: 1.5}
		.num{font-size: min(5.27vw,72px);  font-family: "Noto Sans JP", sans-serif;font-weight: bold}
	}
	.txt{
		font-size: calc(var(--px18) * var(--zoom));
		line-height: 1.5;
		margin-top: var(--px25);
	}
}

.pageDonate .boshu{
	margin-top: var(--px50);
	font-size: calc(var(--px20) * var(--zoom));
	text-align: center;
	color: #0099cc;
}

.pageDonate .boshuBlock{
	.boshuBox{
		font-size: calc(var(--px18) * var(--zoom));
		line-height: 1.5;
	}
	.ttlSupporter{
		margin-top: min(4.39vw,60px);
	}
	p.txt{
		font-size: calc(var(--px18) * var(--zoom));
		line-height: 1.5;
		margin-top: var(--px30);
	}
}

	@media screen and (max-width:768px){

	.pageDonate .topBlock{
		padding: 10vw 0 7.81vw;
		.main{font-size: 4vw;}
		.sub{font-size: calc(3.20vw * var(--zoom));margin-top: 5.86vw;}
		.img{margin-top: 7.81vw;}
	}

	.pageDonate .itemBox{
	  display: block;
		margin-top: 2.6vw;
		.imgSide{
			text-align: center;
			p{
				width: 70%;
				height: auto;
				display: inline-block;
			}
		}
		.infoSide{
			background: #f4f4f4;
			.wrap{padding: 0 3.91vw 3.91vw;}
			.ttl{font-size: calc(3.50vw * var(--zoom));margin-top: 2.6vw;}
			.txt{font-size: calc(3.20vw * var(--zoom));margin-top: 2.08vw;}
			.txtList{font-size: calc(3.20vw * var(--zoom));margin-top: 2.08vw;}
		}
	}

	.pageDonate .itemBox .sdgsBox{
		gap: 0.65vw;
		li{
			width: 6.51vw;
		}
	}

	.pageDonate .itemBox .tagBox{
		gap: 1.3vw;
		margin-top: 0.65vw;
		p{
			font-size: 3.20vw;
			height: 4.2vw;
			padding-left: 1.3vw;
			padding-right: 1.3vw;
		}
	}

	.pageDonate .supporterBox{
	  display: block;
		li{
			padding-top: 0;
			height: auto;
			margin-top: 1vw;
		}
		div{
			padding: 4vw;
		}
		.ttlBox{
			.ttl{font-size: calc(3.20vw * var(--zoom));}
			.num{font-size: 6vw;}
		}
		.txt{
			font-size: calc(3.20vw * var(--zoom));
			margin-top: 3.26vw;
		}
	}

	.pageDonate .boshu{
		text-align: left;
		margin-top: 6.51vw;
		font-size: calc(3.20vw * var(--zoom));
	}

	.pageDonate .boshuBlock{
		.boshuBox{
			font-size: calc(3.20vw * var(--zoom));
		}
		.ttlSupporter{
			margin-top: 7.81vw;
		}
		p.txt{
			font-size: calc(3.20vw * var(--zoom));
			margin-top: 3.91vw;
		}
	}

	}/* --- max-width:768px */