@charset "UTF-8";

/* お墓じまいとは */
#ohakajimai-block {
	margin: 240px auto 220px;
}

#ohakajimai-block .content {
	background-color: var(--color_gray03);
	display: flex;
	justify-content: space-between;
	gap: 30px 5%;
	margin-right: 5%;
	padding: 60px 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);
	position: relative;
}

#ohakajimai-block .decoButterfly-left--secondary::before {
	left: auto;
	right: calc(100% - 5%);
}

#ohakajimai-block .inner {
	width: 42%;
	margin-top: -88px;
}

#ohakajimai-block .list {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px 0;
}

#ohakajimai-block .list li {
	padding-left: 1.2em;
	position: relative;
}
#ohakajimai-block .list li::before {
	content: "●";
	position: absolute;
	top: 0.3em;
	left: 0;
	font-size: 0.8em;
	color: var(--color_primary01);
}

#ohakajimai-block figure {
	width: 53%;
	height: 360px;
	box-shadow: var(--shadow01);
	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;
	margin-bottom: -120px;
}

#ohakajimai-block .txtDeco--left {
	color: var(--color_gray03);
}


/* 改葬とは */
#kaisou-block {
	margin: 240px auto 220px;
}

#kaisou-block .content {
	background-color: var(--color_gray03);
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 30px 5%;
	margin-left: 5%;
	padding: 60px 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);
	position: relative;
}

#kaisou-block .decoBird-right--secondary::after {
	right: auto;
	left: calc(100% - 5%);
}

#kaisou-block .inner {
	width: 42%;
	margin-top: -88px;
	position: relative;
	z-index: 3;
}

#kaisou-block .list {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px 0;
}

#kaisou-block .list li {
	padding-left: 1.2em;
	position: relative;
}
#kaisou-block .list li::before {
	content: "●";
	position: absolute;
	top: 0.3em;
	left: 0;
	font-size: 0.8em;
	color: var(--color_primary01);
}

#kaisou-block figure {
	width: 53%;
	height: 360px;
	box-shadow: var(--shadow01);
	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;
	margin-bottom: -120px;
}

#kaisou-block .txtDeco--right {
	color: var(--color_gray03);
}


/* お墓じまい・改葬とは */
#description-block {
	margin: 240px auto 0;
	background-color: var(--color_primary02);
	padding: 80px 0;
	position: relative;
}
#description-block.decoForest-left--secondary::before,
#description-block.decoForest-right--primary::after {
	bottom: 0;
	width: clamp(160px, 28vw, 480px);
}

#description-block .content {
	max-width: 880px;
	margin: 0 auto;
}

#description-block .inner {
	margin: -104px auto 0;
	max-width: 500px;
}
#description-block .inner.decoBird-left--primary::before {
	top: auto;
	bottom: calc(100% - 64px);
	left: auto;
	right: calc(100% - 64px);
}

#description-block .list {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 30px 6%;
	position: relative;
	z-index: 3;
}

#description-block .list li {
	width: 47%;
	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);
	border: 1px solid var(--color_primary01);
	background-color: var(--color_white);
	padding: 32px;
}

#description-block .list .number {
	text-align: center;
	color: var(--color_primary01);
	margin-top: calc( (32px + 1.0em) * -1 );
}

#description-block .list .list-ttl {
	font-family: var(--ff_jp_sans-serif);
	font-weight: var(--fw_jp_normal);
	text-align: center;
	border-bottom: 1px solid var(--color_gray02);
	padding-bottom: 0.8em;
	margin-bottom: 24px;
}

#description-block .notes {
	margin-top: 40px;
	position: relative;
	z-index: 3;
	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);
	border: 1px solid var(--color_primary01);
	background-color: var(--color_white);
	padding: 32px;
}

#description-block .notes .notes-ttl {
	font-family: var(--ff_jp_sans-serif);
	font-weight: var(--fw_jp_normal);
	text-align: center;
	margin-bottom: 24px;
}

#description-block .notes .notes-txt {
	display: flex;
	justify-content: space-between;
}

#description-block .notes .notes-txt p {
	width: 50%;
}

#description-block .notes .notes-txt p:nth-of-type(1) {
	border-right: 1px solid var(--color_gray02);
	padding-right: 28px;
}
#description-block .notes .notes-txt p:nth-of-type(2) {
	padding-left: 28px;
}

#description-block .txtDeco--center {
	color: var(--color_primary02);
}


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

#visual-block01 figure,
#visual-block02 figure {
	width: 100%;
	height: 360px;
}


/* お墓じまいのメリット */
#merit-block {
	margin: 240px auto 220px;
}

#merit-block .content {
	background-color: var(--color_primary03);
	display: flex;
	justify-content: space-between;
	gap: 30px 5%;
	margin-right: 5%;
	padding: 60px 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);
	position: relative;
}

#merit-block .decoButterfly-left--secondary::before {
	left: auto;
	right: calc(100% - 5%);
}

#merit-block .inner {
	width: 42%;
	margin-top: -88px;
}

#merit-block .list {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px 0;
}

#merit-block .list li {
	padding-left: 1.2em;
	position: relative;
}
#merit-block .list li::before {
	content: "●";
	position: absolute;
	top: 0.3em;
	left: 0;
	font-size: 0.8em;
	color: var(--color_primary01);
}

#merit-block figure {
	width: 53%;
	height: 400px;
	box-shadow: var(--shadow01);
	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;
	margin-bottom: -120px;
}


/* お墓じまいの傾向と時代背景 */
#trends-block {
	margin: 240px auto 220px;
}

#trends-block .content {
	background-color: var(--color_primary03);
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 30px 5%;
	margin-left: 5%;
	padding: 60px 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);
	position: relative;
}

#trends-block .decoBird-right--secondary::after {
	right: auto;
	left: calc(100% - 5%);
}

#trends-block .inner {
	width: 42%;
	margin-top: -88px;
	position: relative;
	z-index: 3;
}

#trends-block .cont-ttl--tertiary {
	margin-left: -2.0em;
}

#trends-block .list {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px 0;
}

#trends-block .list li {
	padding-left: 1.2em;
	position: relative;
}
#trends-block .list li::before {
	content: "●";
	position: absolute;
	top: 0.3em;
	left: 0;
	font-size: 0.8em;
	color: var(--color_primary01);
}

#trends-block figure {
	width: 53%;
	height: 360px;
	box-shadow: var(--shadow01);
	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;
	margin-bottom: -120px;
}


/* お墓じまいをする5つの理由 */
#reason-block .cont-ttl--primary {
	margin-bottom: 48px;
}

#reason-block .cont-ttl--primary .decoBird-right--primary::after {
	top: -30px;
	right: auto;
	left: calc(100% + 1.2em);;
}

#reason-block .inner {
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 80px 0;
}

#reason-block .list {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 30px 8%;
}

#reason-block .list li {
	width: 28%;
	box-shadow: var(--shadow01);
	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);
	border: 1px solid var(--color_primary01);
	background-color: var(--color_white);
	padding: 40px 24px;
}

#reason-block .number {
	background-image: url(../img/common/green_circle_big.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-align: center;
	color: var(--color_white);
	padding: 16px;
}

#reason-block .list-ttl {
	font-family: var(--ff_jp_sans-serif);
	font-weight: var(--fw_jp_normal);
	text-align: center;
	margin: 16px auto;
	line-height: 1.8;
}



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

	/* お墓じまいとは */
	#ohakajimai-block {
		margin: 120px auto 100px;
	}

	#ohakajimai-block .content {
		flex-direction: column;
		margin-right: 0;
		padding: 30px;
	}

	#ohakajimai-block .decoButterfly-left--secondary::before {
		right: calc(100% - 30px);
	}

	#ohakajimai-block .inner {
		width: 100%;
		margin-top: -48px;
	}

	#ohakajimai-block .list {
		margin-top: 16px;
		gap: 8px 0;
	}

	#ohakajimai-block figure {
		width: 100%;
		height: 240px;
		margin-bottom: -50px;
	}


	/* 改葬とは */
	#kaisou-block {
		margin: 120px auto 100px;
	}

	#kaisou-block .content {
		flex-direction: column;
		margin-left: 0;
		padding: 30px;
	}

	#kaisou-block .decoBird-right--secondary::after {
		left: auto;
		right: -5vw;
		top: -80px;
	}

	#kaisou-block .inner {
		width: 100%;
		margin-top: -48px;
	}

	#kaisou-block .cont-ttl--tertiary {
		text-align: left;
	}

	#kaisou-block .list {
		margin-top: 16px;
		gap: 8px 0;
	}

	#kaisou-block figure {
		width: 100%;
		height:  240px;
		margin-bottom: -50px;
	}


	/* お墓じまい・改葬とは */
	#description-block {
		margin: 120px auto 0;
		padding: 40px 0;
	}

	#description-block .inner {
		margin: -58px auto 0;
	}
	#description-block .inner.decoBird-left--primary::before {
		bottom: calc(100% - 48px);
	}

	#description-block .list {
		margin-top: 30px;
		flex-direction: column;
	}

	#description-block .list li {
		width: 100%;
		padding: 30px;
	}

	#description-block .list .number {
		margin-top: calc( (30px + 0.9em) * -1 );
	}

	#description-block .list .list-ttl {
		margin-bottom: 16px;
	}

	#description-block .notes {
		margin-top: 30px;
		padding: 30px;
	}

	#description-block .notes .notes-ttl {
		margin-bottom: 16px;
	}

	#description-block .notes .notes-txt {
		display: block;
	}

	#description-block .notes .notes-txt p {
		width: 100%;
	}

	#description-block .notes .notes-txt p:nth-of-type(1) {
		border-right: none;
		padding-right: 0;
	}
	#description-block .notes .notes-txt p:nth-of-type(2) {
		padding-left: 0;
	}


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


	/* お墓じまいのメリット */
	#merit-block {
		margin: 120px auto 100px;
	}

	#merit-block .content {
		flex-direction: column;
		margin-right: 0;
		padding: 30px;
	}

	#merit-block .decoButterfly-left--secondary::before {
		right: calc(100% - 30px);
	}

	#merit-block .inner {
		width: 100%;
		margin-top: -48px;
	}

	#merit-block .list {
		margin-top: 16px;
		gap: 8px 0;
	}

	#merit-block figure {
		width: 100%;
		height: 240px;
		margin-bottom: -50px;
	}


	/* お墓じまいの傾向と時代背景 */
	#trends-block {
		margin: 120px auto 100px;
	}

	#trends-block .content {
		flex-direction: column;
		margin-left: 0;
		padding: 30px;
	}

	#trends-block .decoBird-right--secondary::after {
		left: auto;
		right: -5vw;
		top: -80px;
	}

	#trends-block .inner {
		width: 100%;
		margin-top: -48px;
	}

	#trends-block .cont-ttl--tertiary {
		margin-left: 0;
		text-align: left;
	}

	#trends-block .list {
		margin-top: 16px;
		gap: 8px 0;
	}

	#trends-block figure {
		width: 100%;
		height: 240px;
		margin-bottom: -50px;
	}


	/* お墓じまいをする5つの理由 */
	#reason-block .cont-ttl--primary {
		margin-bottom: 24px;
	}

	#reason-block .inner {
		gap: 30px 0;
	}

	#reason-block .list {
		flex-direction: column;
	}

	#reason-block .list li {
		width: 100%;
		padding: 30px 24px;
	}

}