@charset "UTF-8";


/* 霊園詳細FV用Swiper */
#page-title-block--primary .swiper-cemetery {
	z-index: 0 !important;
    margin-right: calc(50% - 50vw) !important;
    width: calc(72% + calc(50vw - 50%));
    height: auto;
}

#page-title-block--primary .swiper-cemetery figure {
	width: auto;
	height: 100%;
}

/*******************************/
/* 霊園詳細 */
/*******************************/
/* ポイント */
#point-block.wrapper {
	background-color: var(--color_primary03);
	margin: 0;
	padding: 160px 0;
}

#point-block .container {
	position: relative;
	z-index: 1;
}

#point-block .list {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--horizontal_offset6) 2%;
}

#point-block .list li {
	width: 23.5%;
	min-width: 232px;
	padding: var(--vertical_offset7) var(--vertical_offset6) var(--vertical_offset6);
	background-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);
	box-shadow: 10px 10px 30px rgba(89, 94, 85, 0.1);
}

#point-block .point-block-head {
	display: flex;
	align-items: center;
	gap: 0.4em;
	border-bottom: 1px solid var(--color_gray02);
	padding-bottom: var(--vertical_offset7);
}

#point-block .list-number {
	font-weight: var(--fw_en_bold);
	line-height: 1;
	color: var(--color_primary01);
}

#point-block .list-number .number {
}

#point-block .ttl {
    line-height: 1;
	font-weight: var(--fw_jp_bold);
    color: var(--color_black01);
}

#point-block .text {
	line-height: 2;
	color: var(--color_black01);
	padding-top: 10px;
}


/* メイン画像 */
#main-images-block.wrapper {
	margin: 0;
	/* margin-bottom: calc(-1 * var(--vertical_offset3)); */
	position: relative;
	z-index: -1;
}

#main-images-block figure {
	height: 600px;
}


/* 霊園詳細情報 */
#detail-block {
	margin-top: calc(-1 * var(--vertical_offset3));
	margin-bottom: var(--vertical_offset4);
	position: relative;
	z-index: 1;
}

#detail-block::before {
	content: "";
	position: absolute;
	top: var(--vertical_offset3);
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color_gray03);
	z-index: -1;
}

#detail-block .content {
	/* max-width: 960px; */
	margin-inline: auto;
	margin-top: calc( -1 *var(--vertical_offset4));
	padding: var(--vertical_offset4) 6%;
	background-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);
	position: relative;
	z-index: 1;
	box-shadow: 10px 10px 30px rgba(89, 94, 85, 0.1);
}

#detail-block .feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: var(--vertical_offset7) 1.3%;
}

#detail-block .feature li {
	background-color: var(--color_white);
	line-height: 1.3;
	text-align: center;
	color: var(--color01);
	padding: 0.3em 0.5em 0.4em;
	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: var(--color_primary02);
}

#detail-block .price {
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background-color: var(--color_white);
}

#detail-block .price .price-inner {
	display: flex;
	flex-direction: column;
	gap: var(--vertical_offset5) var(--vertical_offset7);
	width: 100%;
	padding: 0;
}

#detail-block .price .item {
	display: flex;
	align-items: stretch;
	gap: 0 2.6%;
	background-color: var(--color_gray03);
	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;
}

#detail-block .price .item:last-of-type {
	border-bottom: none;
}

#detail-block .price .ttl {
	width: 15%;
	min-width: 7.7em;
	background-color: var(--color01);
	display: flex;
	align-items: center;
	padding: 30px 20px;
	background-color: var(--color_gray01);
}

#detail-block .price .ttl h2 {
	font-weight: var(--fw_jp_normal);
	color: var(--color_white);
}

#detail-block .price dl,
#detail-block .price .notes {
	margin-block: var(--vertical_offset6);
}


#detail-block .price dl {
	min-width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#detail-block .price dl dt {
	color: var(--color_black01);
}

#detail-block .price dl dt span {
	padding: 0.2em 0.1em;
	background: linear-gradient(180deg, transparent 65%, var(--color_accent04) 65%);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

#detail-block .price dl dd {
	font-size: clamp(15px, 2.5vw, 20px);
	line-height: 1.5;
	color: var(--color_black01);
}

#detail-block .price dl dd span {
	font-weight: 400;
}

#detail-block .price .notes {
	flex: 1;
	display: flex;
    flex-direction: column;
    justify-content: center;
	border-left: 1px solid var(--color_gray02);
	padding-inline:  2.6% 0;
}

#detail-block .price .notes li {
	font-size: 14px;
	padding-left: 1.1em;
	position: relative;
	color: var(--color_black01);
}

#detail-block .price .notes li::before {
	content: "●";
	position: absolute;
	top: 1em;
	left: 0;
	color: var(--color_primary01);
	font-size: 0.5em;
}

#detail-block .price .cemetery-img {
    width: min(140px, 40%);
    /* 高さをnotesに合わせて100%にする */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#detail-block .price .cemetery-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* サブ画像 */
#sub-images-block {
	margin: var(--vertical_offset4) auto;
	position: relative;
	z-index: 1;
	background-color: var(--color_gray03);
}

#sub-images-block ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px 2.1%;
	padding-bottom: var(--vertical_offset3);
}

#sub-images-block ul li {
	flex: 1;
	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);
}

#sub-images-block ul li:first-of-type {
	margin-top: calc(2 * var(--vertical_offset5));
}
#sub-images-block ul li:nth-of-type(2) {
	margin-top: calc(var(--vertical_offset5));
}

#sub-images-block figure {
	height: 300px;
}

#sub-images-block figure img {
	box-shadow: 10px 10px 30px rgba(89, 94, 85, 0.1);
	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);
}

/* 寺院情報（ご住職の情報) */
#greeting-block .content {
	color: var(--color_black01);
}

#greeting-block .catchphrase {
	font-size: clamp(24px, 6vw, 40px);
	line-height: 1.5;
	font-weight: var(--fw_jp_normal);
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--color_black01);
	margin: 0 auto var(--vertical_offset3);
	position: relative;
	z-index: 1;
}

#greeting-block .catchphrase span {
	padding: 0 0.3em;
	background: linear-gradient(180deg, transparent 65%, var(--color02) 65%);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	width: 100%;
	display: inline-block;
}

#greeting-block .catchphrase span::after {
	width: fit-content;
	content: "GREETING";
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	z-index: -1;
	font-family: var(--ff_en);
	font-size: clamp(36px, 10.1vw, 152px);
	line-height: 0.77;
	letter-spacing: 0.05em;
	font-weight: var(--fw_en_bold);
	color: var(--color_primary03);
	text-align: center;
	width: 100%;
}

#greeting-block .content {
	display: flex;
	justify-content: space-between;
	gap: 30px 5%;
	padding: 0 6%;
}

#greeting-block .content figure {
	width: 56%;
	aspect-ratio: 4 / 5;
}

#greeting-block .content figure img {
	object-position: center;
	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;
	box-shadow: 10px 10px 30px rgba(89, 94, 85, 0.1);
}

#greeting-block .content .inner {
	width: 44%;
}

#greeting-block .content .text {
	line-height: 2.4;
}

/* アクセス */
#access-block .access-info {
	width: 90%;
	max-width: 480px;
	padding: 30px 2.3%;
	display: flex;
	flex-direction: column;
	gap: 20px 0;
	background-color: var(--color_gray03);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	margin-bottom: -160px;
	position: relative;
	z-index: 10;
}

#access-block .access-info dl {
	padding-bottom: 20px;
	border-bottom: 1px solid currentColor;
	display: flex;
	gap: 0.5em 1em;
}

#access-block .access-info dl dt {
	width: 1.2em;
}

#access-block .access-info dl dt figure {
	width: 100%;
	aspect-ratio: 1/1;
	margin-top: 0.5em;
}

#access-block .access-info dl dd {
	width: calc(100% - 1.2em - 1em);
	flex-grow: 1;
}

#access-block .access-info dl.tel-block dt,
#access-block .access-info dl.tel-block dd {
	display: flex;
	align-items: center;
}

#access-block .tel-block dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1em;
}

#access-block .tel-block .tel-number-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 1em;
}

#access-block .access-info dl dd .tel-number {
	color: var(--color_accent06);
	margin-top: -0.1em;
	margin-left: 0.2em;
}

#access-block .map {
	margin-right: calc(50% - 50vw);
	margin-left: 13%;
}

#access-block .map iframe {
	width: 100%;
	height: 600px;
}


/* 最後の一文 */
#last-message-block .content {
	max-width: 520px;
	margin: 0 auto;
}

#last-message-block .link-btn__unit .link-btn--primary {
	margin: 0 auto;
}

/* ご契約までの流れ */
/* お墓じまいの流れ */
#deal-flow-block {
	margin: 240px auto 220px;
}

#deal-flow-block.decoForest-left--secondary::before {
	bottom: -60px;
}

#deal-flow-block .content {
	background-color: var(--color_primary03);
	display: flex;
	justify-content: space-between;
	gap: 30px 5%;
	margin-right: calc(50% - 50vw);
	padding: 60px calc(50vw - 50%) 60px 5%;
	border-radius: var(--border_radius_normal) 0 0 var(--border_radius_normal);
	-webkit-border-radius: var(--border_radius_normal) 0 0 var(--border_radius_normal);
	-moz-border-radius: var(--border_radius_normal) 0 0 var(--border_radius_normal);
	-ms-border-radius: var(--border_radius_normal) 0 0 var(--border_radius_normal);
	-o-border-radius: var(--border_radius_normal) 0 0 var(--border_radius_normal);
	position: relative;
}

#deal-flow-block .decoBird-right--secondary::after {
	top: auto;
	right: auto;
	bottom: calc(100% - 18px);
	left: min(59vw, 460px);
}

#deal-flow-block .inner {
	width: 42%;
}

#deal-flow-block .inner .link-btn--primary {
	margin-left: auto;
}

#deal-flow-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;
}

#cemetery-block .link-btn__unit .link-btn--secondary {
	margin-left: auto;
}

#last-message-block .link-btn__unit .link-btn--secondary {
	margin-inline: auto;
}


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

	/* FV用Swiper */
	#page-title-block--primary .swiper-cemetery {
		width: 100%;
		height: auto;
		margin-inline: calc(50% - 50vw) !important;
		width: calc(100% + calc(100vw - 100%)) !important;
		max-height: 320px;
	}

	/*******************************/
	/* 霊園詳細 */
	/*******************************/
	/* ポイント */
	#point-block.wrapper {
		padding: 80px 0;
	}

	#point-block .list {
		flex-direction: column;
		gap: 16px 2%;
		max-width: 480px;
		margin-inline: auto;
	}

	#point-block .list li {
		width: 100%;
	}


	/* メイン画像 */
	#main-images-block {
		margin-bottom: -40px;
	}

	#main-images-block figure {
		height: 320px;
	}


	/* 霊園詳細情報 */
	#detail-block {
		margin-bottom: 10px;
	}

	#detail-block .content {
		padding: 20px;
		max-width: 480px;
        margin-inline: auto;
	}

	#detail-block .feature {
		gap: 6px;
	}

	#detail-block .price {
		flex-direction: column;
	}

	#detail-block .price dl,
	#detail-block .price .notes {
		margin: 8px 16px;
		padding: 0;
	}

	#detail-block .price dl dd {
		line-height: 1;
	}

	#detail-block .price dl, #detail-block .price .notes {
		margin-block: 0;
	}

	#detail-block .price .ttl {
		width: auto;
		padding: 8px 16px;
	}

	#detail-block .price .price-inner {
		width: auto;
		padding: 0;
	}

	#detail-block .price .item {
		flex-direction: column;
		gap: var(--vertical_offset7);
	}

	#detail-block .price dl {
		width: auto;
		min-width: 100%;
	}

	#detail-block .price .notes {
		width: auto;
		border-top: 1px solid var(--color_gray02);
		border-left: none;
		padding: var(--vertical_offset7) 0;
	}

	#detail-block .price .cemetery-img {
		width: 100%;
		aspect-ratio: 4/5;
	}

	#sub-images-block ul {
		flex-direction: column;
		gap: 20px;
		max-width: 480px;
        margin-inline: auto;
	}

	#sub-images-block ul li:first-of-type,
	#sub-images-block ul li:nth-of-type(2) {
		margin-top: 0;
		aspect-ratio: 16/9;
		overflow: hidden;
	}

	/* サブ画像 */
	#sub-images-block {
		margin: 40px auto;
	}

	#sub-images-block figure {
		height: 100%;
	}

	/* 寺院情報（ご住職の情報) */
	#greeting-block::after {
		letter-spacing: 0.1em;
	}

	#greeting-block .catchphrase {
		letter-spacing: 0;
		margin: 0 auto 20px;
	}

	#greeting-block .catchphrase span {
		display: inline;
	}


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

	#greeting-block .content figure {
		width: 100%;
		/* height: 240px; */
		max-width: 480px;
        margin-inline: auto;
	}

	#greeting-block .content .inner {
		width: 100%;
	}


	/* アクセス */
	#access-block .access-info {
		width: 100%;
		padding: 20px;
		gap: 10px 0;
		margin-bottom: calc(-1 * var(--vertical_offset3));
	}

	#access-block .access-info dl {
		padding-bottom: 10px;
	}

	#access-block .map iframe {
		width: 100%;
		height: 400px;
	}

	/* ご契約までの流れ */
	#deal-flow-block {
		padding: 40px 0;
	}

	#deal-flow-block .content {
		padding: 30px 20px;
	}

	#deal-flow-block .requirement-ttl {
		margin-bottom: 20px;
	}

	#deal-flow-block .link-btn__unit {
		margin-top: 20px;
	}

	/* ご契約までの流れ */
	#deal-flow-block {
		margin: 160px auto 120px;
	}

	#deal-flow-block.decoForest-left--secondary::before {
		bottom: -40px;
	}

	#deal-flow-block .content {
		flex-direction: column;
		padding: 30px calc(50vw - 50%) 30px 30px;
	}

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

	#deal-flow-block .inner .link-btn--primary {
		margin: 0 auto;
	}

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

}