@charset "UTF-8";

/* スムーズなお墓じまいを実現する7つのステップ */
#steps-block .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

#steps-block .inner {
	width: 49%;
	background-color: var(--color_primary03);
	padding: 40px 5%;
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	margin-right: -5%;
	position: relative;
	z-index: 2;
}

#steps-block .content figure {
	width: 56%;
	height: 512px;
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	overflow: hidden;
}

#steps-block .txtDeco--center {
	top: calc(100% - 0.5em);
	z-index: 2;
}


/* 流れ */
#flow-block .content {
	max-width: 1120px;
	margin: 0 auto;
}

#flow-block .flow__unit {
	padding: 40px 5%;
	border: 2px solid var(--color_gray02);
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	display: flex;
	justify-content: space-between;
	gap: 16px 5%;
	position: relative;
}

#flow-block .flow__unit .number {
	position: absolute;
	top: -1em;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	line-height: 1.05;
	color: var(--color_primary01);
	padding: 0.35em;
	aspect-ratio: 1/1;
	border: 2px solid var(--color_gray02);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	background-color: var(--color_white);
}

#flow-block .flow__unit .unit-img {
	width: 20%;
}

#flow-block .flow__unit .unit-img .circle{
	width: 100%;
	max-width: 180px;
	aspect-ratio: 1/1;
	background-color: var(--color_gray03);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	padding: min(20%, 48px);
}

#flow-block .flow__unit .unit-img figure {
	width: 100%;
	aspect-ratio: 1/1;
}

#flow-block .flow__unit .unit-inner {
	width: 75%;
}

#flow-block .flow__unit .unit-ttl {
	font-family: var(--ff_jp_sans-serif);
	font-weight: var(--fw_jp_normal);
	border-bottom: 1px solid var(--color_gray02);
	margin-bottom: 24px;
}

#flow-block .flow__unit .unit-desc--primary {
	display: flex;
	justify-content: space-between;
	gap: 16px 5%;
}
#flow-block .flow__unit .unit-desc--secondary {
	display: block;
	width: 100%;
}

#flow-block .flow__unit .unit-desc--primary .text {
	width: 42%;
}

#flow-block .flow__unit .unit-desc--primary .list {
	width: 53%;
	display: flex;
	flex-direction: column;
	gap: 16px 0;
	font-family: var(--ff_jp_sans-serif);
}

#flow-block .flow__unit .unit-desc--primary .list li {
	background-color: var(--color_primary01);
	padding: 0.8em 1.5em;
	color: var(--color_white);
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
}

#flow-block .dot-line {
	width: 100%;
	height: 96px;
	background-image: radial-gradient(circle, var(--color_gray02) 3px, transparent 3px);
	background-position: center;
	background-repeat: repeat-y;
	background-size: 6px 12px;
}


/* お墓じまいの後、ご遺骨はどのように供養するかお決まりですか？ */
#ikotsu-block.decoForest-right--tertiary::after {
	bottom: -160px;
}

#ikotsu-block .content {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

#ikotsu-block .inner {
	width: 52%;
	background-color: var(--color_primary03);
	padding: 40px 5%;
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	margin-left: -5%;
	margin-top: 80px;
	position: relative;
	z-index: 2;
}

#ikotsu-block .content figure {
	width: 53%;
	height: 448px;
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	overflow: hidden;
}


/* フルワイドイメージ */
#visual-block01 {
	margin: 0 auto;
}

#visual-block01 figure {
	width: 100%;
	height: 590px;
}


/* まとめ */
#summary-block {
	margin-top: 0;
	padding: 80px 0;
	background-color: var(--color_gray03);
}

#summary-block .content {
	max-width: 880px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	padding-top: clamp(24px, 96 / 1280 * 100vw, 96px);
}

#summary-block .lead {
	max-width: 500px;
	margin: 0 auto;
}

#summary-block .inner {
	margin-top: 48px;
	padding: 30px 5%;
	border: 1px solid var(--color_gray02);
	border-radius: var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal);
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(15px) brightness(110%);
}

#summary-block .list {
	max-width: 560px;
	margin: 0 auto;
}

#summary-block .list li {
	padding: 6px 0 6px 30px;
	position: relative;
}
#summary-block .list li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 24px;
    aspect-ratio: 1 / 1;
    background-image: url(../img/common/icon_chechmark.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#summary-block .txtDeco--center {
	color: var(--color_white);
	top: 0;
}

#summary-block .txtDeco--center .decoBird-left--primary::before {
	top: 0;
	left: auto;
	right: 100%;
}



/* スマートフォン用 - ブレイクポイント768 */
@media screen and (max-width: 768px) {

	/* スムーズなお墓じまいを実現する7つのステップ */
	#steps-block .content {
		flex-direction: column;
	}

	#steps-block .inner {
		width: 95%;
		padding: 30px;
		margin-right: 5%;
		margin-bottom: -40px;
	}

	#steps-block .content figure {
		width: 95%;
		height: 240px;
		margin-left: 5%;
	}

	#steps-block .txtDeco--center {
		top: calc(100% - 0.5em);
		z-index: 2;
	}


	/* 流れ */
	#flow-block .flow__unit {
		padding: 30px;
		flex-direction: column;
	}

	#flow-block .flow__unit .number {
		padding: 0.5em;
	}

	#flow-block .flow__unit .unit-img {
		width: 100%;
		margin-top: 16px;
	}

	#flow-block .flow__unit .unit-img .circle{
		margin: 0 auto;
	}

	#flow-block .flow__unit .unit-inner {
		width: 100%;
	}

	#flow-block .flow__unit .unit-ttl {
		margin-bottom: 16px;
	}

	#flow-block .flow__unit .unit-desc--primary {
		flex-direction: column;
	}

	#flow-block .flow__unit .unit-desc--primary .text {
		width: 100%;
	}

	#flow-block .flow__unit .unit-desc--primary .list {
		width: 100%;
		gap: 8px 0;
	}

	#flow-block .dot-line {
		height: 56px;
		background-image: radial-gradient(circle, var(--color_gray02) 2px, transparent 2px);
		background-size: 4px 8px;
	}


	/* お墓じまいの後、ご遺骨はどのように供養するかお決まりですか？ */
	#ikotsu-block.decoForest-right--tertiary::after {
		bottom: -80px;
	}

	#ikotsu-block .content {
		flex-direction: column;
	}

	#ikotsu-block .inner {
		width: 95%;
		padding: 30px;
		margin-left: 5%;
		margin-top: 0;
		margin-bottom: -40px;
	}

	#ikotsu-block .content figure {
		width: 95%;
		height: 240px;
		margin-right: 5%;
	}


	/* フルワイドイメージ */
	#visual-block01 figure {
		height: 360px;
	}


	/* まとめ */
	#summary-block {
		padding: 40px 0;
	}

	#summary-block .inner {
		margin-top: 36px;
		padding: 30px;
	}

}