@charset "utf-8";
/* CSS Document */

.page_ttl_wrap {
	background: url("../images/support/page_ttl_bg.jpg");
	@media screen and (max-width: 768px) {
		background-position: right 0% center !important;
	}
}

.inner_wrap {
	max-width: 1050px;
}

.support_content {
	max-width: 900px;
	width: 90%;
	margin: 0px auto 10vh;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 1rem;
	li {
		a {
			color: #FFF;
			font-size: clamp(20px,2vw,24px);
			font-weight: 500;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			border: 3px solid #9F79BF;
			padding: 2.6vh 10px;
			&.option {
				background: #765393;
			}
			&.after {
				background: #833B6D;
			}
			&::after {
				content: '';
				background: url("../images/common/arrow_right.svg") #FFF;
				background-repeat: no-repeat;
				background-size: 6px 11px;
				background-position: left 56% center;
				display: inline-block;
				width: 26px;
				height: 26px;
				right: 20px;
				position: absolute;
				border-radius: 50px;
			}
		}
	}
}

.support_inner {
	margin-block: 10vh;	
}

.support_ttl_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}

.support_ttl {
	font-size: clamp(20px,2.6vw,26px);
	font-weight: 600;
	display: flex;
	align-items: center;
	position: relative;
	&::before {
		content: '';
		background: var(--primary-light);
		display: inline-block;
		width: 11px;
		height: 100%;
		position: relative;
		margin-right: 10px;
	}
}

.support_mark {
	background: var(--primary-light);
	color: #FFF;
	font-size: clamp(15px,1.8vw,18px);
	font-weight: 600;
	display: flex;
	align-items: center;
	border-radius: 30px;
	padding: 0px 2em 3px;
}

.support_intro_txt {
	font-size: clamp(15px,1.8vw,18px);
	font-weight: 500;
	margin-block: 3vh;
	& > small {
		font-size: clamp(12px,1.4vw,14px);
	}
}

.support_list {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
	place-items: stretch;
	gap: 1rem;
	li {
		border: 1px solid #DBDBDB;
		background: #FFF;
		padding: 1rem;
		display: grid;
		grid-template-columns: 180px auto;
		gap: 1rem;
		border-radius: 2px;
		@media screen and (max-width: 499px) {
			grid-template-columns: repeat(1,1fr);
		}
		picture {
			display: flex;
			justify-content: center;
			align-items: center;
			max-height: 175px;
			img {
				height: 100%;
				object-fit: contain;
			}
		}
	}
	li.gift {
		grid-template-columns: 3fr 1fr;
		@media screen and (max-width: 768px) {
			grid-template-columns: 1fr;
		}
		picture {
			max-height: 100%;
			@media screen and (max-width: 768px) {
				max-height: 200px;
			}
		}
		.support_price {
			padding-block: 6vh;
			border-bottom: 1px solid #DBDBDB;
			.gift_memo {
				color: #000;
				margin-right: 5vw;
			}
		}
		.about_gift {
			margin-block: 3vh;
			display: grid;
			row-gap: 3vh;
			dt {
				font-size: clamp(15px,1.8vw,18px);
				font-weight: 600;
			}
			dd {
				font-size: 14px;
				text-align: justify;
				margin-top: 5px;
			}
		}
	}
}

.support_list_inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	.support_name {
		font-size: clamp(16px,2vw,20px);
		font-weight: 500;
		flex-grow: 1;
	}
	.support_txt {
		flex-grow: 1;
		font-size: 14px;
		margin-block: 1rem;
		text-align: justify;
		line-height: 160%;
		max-width: 226px;
		width: auto;
	}
	.support_price {
		& > p {
			color: #C73A3A;
			font-size: clamp(16px,2vw,22px);
			font-weight: 600;
			& > small {
				font-size: 12px;
				font-weight: 500;
			}
			.size {
				font-size: 14px;
				color: #000000;
				display: inline-flex;
				text-align: center;
				top: -2px;
				position: relative;
			}
		}
	}
}

.after_list {
	max-width: 880px;
	width: 100%;
	margin: 0px auto;
	display: grid;
	row-gap: 1rem;
	li {
		display: grid;
		grid-template-columns: 175px auto;
		gap: 2rem;
		background: #F8F8F8;
		border: 1px solid #DBDBDB;
		border-radius: 5px;
		padding: 1.5rem;
		@media screen and (max-width: 499px) {
			grid-template-columns: repeat(1,1fr);
		}
		picture {
			display: flex;
			justify-content: center;
			img {
				height: 100%;
				object-fit: contain;
			}
		}
	}
}

.after_list_inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	dt {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
		margin-bottom: 1.5rem;
		gap: 10px;
		.after_name {
			font-size: clamp(16px,2vw,20px);
			font-weight: 600;
		}
		.after_cate {
			display: flex;
			justify-content: flex-end;
			& > span {
				display: flex;
				justify-content: center;
				max-width: 240px;
				width: 100%;
				font-size: clamp(14px,1.6vw,16px);
				font-weight: 500;
				border-radius: 30px;
				padding: 2px 1rem;
				color: #FFF;
				@media screen and (max-width: 768px) {
					min-width: 160px;
					width: auto;
				}
			}
			.orange {
				background: #DB5151;
			}
			.green {
				background: #3B835F;
			}
			.purple {
				background: #833B6D;
			}
		}
	}
	dd {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: 100%;
		.after_txt {
			max-width: 560px;
			width: 100%;
			font-size: 14px;
			line-height: 160%;
			text-align: justify;
			flex-grow: 1;
		}
		.after_price {
			color: #C73A3A;
			font-size: clamp(18px,2.2vw,22px);
			font-weight: 600;
			& > span {
				color: #000;
				font-size: clamp(14px,1.6vw,16px);
				font-weight: 500;
				margin-right: 1em;
			}
			& > span:last-of-type {
				margin-left: 1em;
			}
			& > small {
				font-size: 12px;
			}
		}
	}
}