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

.page_ttl_wrap {
	background: url("../images/funeral/page_ttl_bg.jpg");	
}

section {
	padding-block: 0px 8vh;
}

.inner_wrap {
	max-width: 1000px;
	padding-block: 6vh;
}

.flow_intro {
	max-width: 900px;
	margin: 6vh auto 0px;
	display: grid;
	row-gap: 6vh;
	& > p {
		display: flex;
		justify-content: center;
	}
	.flow_rosary {
		max-width: 450px;
		width: 60%;
		margin: 0px auto;
	}
}

section#flow {
	padding-block: 0px 6vh;
}

.flow_wrap {
	background: #FFF;
	border: 1px solid #DBDBDB;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	margin-bottom: 10vh;
	&:last-of-type {
		margin-bottom: 0px;
		&:after {
			display: none;
		}
	}
	&::after {
		content: '';
		background: url("../images/common/arrow_big_bottom.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 43px;
		height: 48px;
		bottom: -8vh;
		position: absolute;
	}
}

.flow_inner {
	padding: 2rem;
	&.half_box {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
		align-items: center;
		gap: 1rem 2rem;
		width: 100%;
	}
}

.flow_tel {
	max-width: 580px;
	width: 100%;
	margin: 4vh auto 3vh;
	font-size: clamp(16px,2vw,20px);
	dt {
		background: #FFF471;
		color: #C73A3A;
		font-weight: 500;
		text-align: center;
		padding: 6px 10px;
	}
	dd {
		padding: 1rem 2rem;
		background: #F4F2F2;
		.flow_tel_list {
			max-width: 350px;
			width: 100%;
			margin: 0px auto;
		}
	}
}

.flow_cta {
	max-width: 900px;
	width: 90%;
	margin: 0px auto;
}

.sougi_flow {
	margin-inline: auto;
	max-width: 820px;
}

.sougi_inner {
	position: relative;
	&::after {
		content: '';
		background: url("../images/urgent/arrow_flow.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 26px;
		height: 23px;
		left: 50%;
		transform: translateX(-50%);
		position: relative;
		margin-block: 1vh;
	}
	&:last-of-type::after {
		display: none;
	}
	.step_num {
		color: var(--primary-dark);
		font-size: clamp(24px,3vw,32px);
		font-weight: 600;
	}
	& > dl {
		display: grid;
		grid-template-columns: 20% 80%;
		align-items: stretch;
		overflow: hidden;
		border-radius: 10px;
		position: relative;
		@media screen and (max-width: 599px) {
			grid-template-columns: 1fr;
		}
		& > * {
			padding: 3vh;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			@media screen and (max-width: 599px) {
				padding: 1rem;
			}

		}
		& > dt {
			background: var(--bg-gradient-purple-moz);
			background: var(--bg-gradient-purple-webkit);
			background: var(--bg-gradient-purple);
			font-size: clamp(20px,2vw,26px);
			font-weight: 600;
			justify-content: center;
			color: #FFF;
		}
		& > dd {
			font-size: clamp(15px,1.8vw,18px);
			font-weight: 500;
			background: #F8F8F8;
			line-height: 160%;
			display: grid;
			grid-template-columns: 70% 30%;
			gap: 2rem;
			@media screen and (max-width: 599px) {
				grid-template-columns: 1fr;
			}
			.plan_list {
				display: flex;
				flex-wrap: wrap;
				gap: 5px;
				margin-top: 1rem;
				& > p {
					color: #FFF;
					padding: 5px 1rem;
					border-radius: 30px;
				}
				.plan_tyokusou {
					background: var(--tyokusou-plan);
				}
				.plan_kasou {
					background: var(--kasou-plan);
				}
				.plan_day {
					background: var(--day-plan);
				}
				.plan_family {
					background: var(--family-plan);
				}
			}
			picture {
				display: flex;
				justify-content: center;
			}
		}
	}
}

.pay {
	max-width: 730px;
	width: 100%;
	margin: 10vh auto 0px;
	display: grid;
	justify-content: center;
	row-gap: 1rem;
}

.pay_ttl {
	color: var(--red);
	font-size: clamp(26px,4vw,40px);
	font-weight: bold;
	text-align: center;
}