@charset "UTF-8";

/* 変数 */

:root{
	--mincyo: "游明朝", YuMincho, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* =========================================
   GLOBAL CANDIDATES (移植候補)
   - 見出しタグ変更の影響を吸収するための共通化候補
   - 後で common.css / style.css に移植する
========================================= */


._single .sec_intro > .in > .secTit::before{
	left: calc(50% - 5.45rem);
}

._single .area_new_fv .contTit .title.tl-style01 {
	font-size: 21px;
}

@media screen and (max-width: 640px) {
	.mod_nav .navWrap .navLink {
		height: 100%;
	}
}


/* 共通slickスライダーデザイン */

.js-areaSlickSlider{

	& .slick-dots{
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 10px;

		& li button::before{
			font-size: 14px;
		}
	}

	& .slick-prev,
	& .slick-next
	{
		width: 50px;
		height: 50px;
		right: -20px;
		transform: translate(0, -50%);
		background-image: url(../img/area/area_slick_arrow.svg);
		background-repeat: no-repeat;
		background-position: center;
		z-index: 1;

		&::before{
			content: none;
		}

		&:hover{
			background-image: url(../img/area/area_slick_arrow.svg);
			opacity: 0.8;
		}
	}

	& .slick-prev
	{
		left: -20px;
		transform: translate(0, -50%) rotate(180deg);
		background-image: url(../img/area/area_slick_arrow.svg);

		&:hover{
			background-image: url(../img/area/area_slick_arrow.svg);
			opacity: 0.8;
		}
	}

}

.funeral_types_wrapper.js-areaSlickSlider .slick-prev,
.funeral_types_wrapper.js-areaSlickSlider .slick-next
{
	top: calc(50% - 77px);
}

/* intro */
@media screen and (max-width: 640px) {
	._single .sec_intro > .in {
		padding: 20px;

		& .secTit{

			& .txt{
				margin: 20px 0 0 0;
				padding: 0;
				width: 100%;
			}
		}
	}

	.mod_nav .navWrap{
		max-width: 100%;
	}
}

/* 葬儀場の地図から探す */
@media screen and (max-width: 640px) {
	._single .sec_map > .in{
		padding: 20px 20px 0px 20px;

		& .google_top_content {
			padding: 0;
		}
	}
}

/* 葬儀場一覧 */
@media screen and (max-width: 640px) {

	.customer_review--area{
		background: #f3efec;
		padding: 20px 20px 0px 20px;

		& .customer_review__items{
			border-radius: 0 0 20px 20px;
		}
	}

	.customer_review__box{
		background: #f3efec;
		margin-bottom: 0;
	}

	.customer_review--area .customer_review__heading{
		margin-bottom: 10px;

		& .color_green{
			font-size: 26px;
		}
	}

	.customer_review .customer_review__box .review__total{
		margin-bottom: 10px;

		& .total{
			white-space: nowrap;
		}
	}
}




/* 実施される主な葬儀の種類 */
.funeral_types_sec{
	background: #F4F3F3;
	padding: 120px 0;

	& .funeral_types_wrapper{
		max-width: 900px;
		margin: 0 auto 120px;

		/* ベース（ftbox01想定） */
		& .funeral_types_box{
			--ft-accent: #87171B;
			--ft-bg: #F1E4E5;

			background: #fff;
			background: linear-gradient(90deg,#fff 0%, #fff 95%, var(--ft-bg) 95%, var(--ft-bg) 100%);
			border-radius: 20px;
			padding: 30px;
			margin-bottom: 40px;
			position: relative;

			& h3{
				font-family: var(--mincyo);
				font-size: 22px;
				letter-spacing: 4px;
				margin-bottom: 10px;
				color: var(--ft-accent);
				font-weight: 600;
			}

			& figure{
				margin: 0;
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translateY(-50%);
				width: 240px;
				height: 160px;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				& img{
					width: 120%;
					object-fit: cover;
					object-position: center;
				}
			}

			& p{
				max-width: 70%;
				line-height: 1.8;
				font-size: 16px;
			}
		}

		/* 個別差分：ftbox01〜05 */
		& .funeral_types_box.ftbox01{
			--ft-accent: #87171B;
			--ft-bg: #F1E4E5;
		}
		& .funeral_types_box.ftbox02{
			--ft-accent: #0D8288;
			--ft-bg: #E6F1F3;
		}
		& .funeral_types_box.ftbox03{
			--ft-accent: #C9A958;
			--ft-bg: #FAF5EA;
		}
		& .funeral_types_box.ftbox04{
			--ft-accent: #9A9D5F;
			--ft-bg: #F4F4EB;
		}
		& .funeral_types_box.ftbox05{
			--ft-accent: #B68468;
			--ft-bg: #F7F1ED;
		}
	}

	@media screen and (max-width: 640px) {

		padding: 0px 20px;

		& .funeral_types_wrapper{
			margin: 0 auto 40px;

			& .slick-dots{
				bottom: -10px;
			}

			& .funeral_types_box{
				padding: 0;
				background: #fff;

				& h3{
					font-size: 22px;
					letter-spacing: 4px;
					margin-bottom: 16px;
					color: var(--ft-accent);
					background: var(--ft-bg);
					font-weight: 600;
					padding: 20px;
					text-align: center;
					border-radius: 20px 20px 0 0;
				}

				& figure{
					position: static;
					transform: none;
					width: calc(100% - 40px);
					height: 150px;
					margin: 0 auto;
					border-radius: 10px;
				}

				& p{
					max-width: 100%;
					padding: 20px;
					text-align: justify;
					height: 206px;
				}
			}
		}
	}
}


.sec_flow .flowBox .contact{
	padding-bottom: 0.40em;
}

.sec_flow .deco.deco03
{
	right: calc(50% - 4.58rem);
}


.sec_flow{

	& .in{
		padding: 40px 0;

		& .flowBox {

			& .itemWrap{

				& .dt_ttl {

					& > .flowbox_subtitle {
						position: relative;

						&::before{
							position: absolute;
							content: "";
							top: 0.01rem;
							left: -0.45rem;
							width: 0.35rem;
							height: 0.3rem;
							background-image: url(../img/about/flow_title_deco_bg.svg);
							background-repeat: no-repeat;
							opacity: 0.5;
						}

						&::after{
							position: absolute;
							top: -0.02rem;
							left: -0.34rem;
						}
					}
				}

				&._01 .dt_ttl > .flowbox_subtitle::after{
					content: "1";
				}

				&._02 .dt_ttl > .flowbox_subtitle::after{
					content: "2";
				}

				&._03 .dt_ttl > .flowbox_subtitle::after{
					content: "3";
				}

				&._04 .dt_ttl > .flowbox_subtitle::after{
					content: "4";
				}

				&._05 .dt_ttl > .flowbox_subtitle::after{
					content: "5";
				}

				&._06 .dt_ttl > .flowbox_subtitle::after{
					content: "6";
				}

				&._07 .dt_ttl > .flowbox_subtitle::after{
					content: "7";
				}

				&._08 .dt_ttl > .flowbox_subtitle::after{
					content: "8";
				}

				&._09 .dt_ttl > .flowbox_subtitle::after{
					content: "9";
				}

				&._10 .dt_ttl > .flowbox_subtitle::after{
					content: "10";
					left: -0.4rem;
				}
			}
		}

		@media screen and (max-width: 640px) {

			._single .sec_detail.family_funeral_info_sec > .in{
				padding: 30px 0;

				& .secTit{
					padding-bottom: 20px;
				}
			}
		}
	}
}

/* 注目の家族葬の特徴とメリット */

.family_funeral_info_sec{
	background: #F3EFEC;
	padding: 60px 0;

	@media screen and (max-width: 640px) {
		padding: 30px 20px;
	}

	& .family_funeral_info_wrapper{
		max-width: 900px;
		margin: 0 auto 120px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px 40px;

		@media screen and (max-width: 640px) {
			grid-template-columns: repeat(1, 1fr);
			margin: 0 auto 40px;
		}

		& .family_funeral_info_box{
			position: relative;

			&::before{
				content: "";
				position: absolute;
				display: block;
				width: 60px;
				height:60px;
				border-radius: 100px;
				top: -30px;
				left: 50%;
				transform: translateX(-50%);
				background: #fff;
				border: 1px solid #E7DAD2;
				z-index: 1;
			}

			@media screen and (max-width: 640px) {
				margin: 30px 0;
			}

			& > div{
				flex: 1;
				border-radius:0 0 20px 20px;
				border-top: 1px solid #E7DAD2;
				background: #fff;
				padding: 20px;
				position: relative;
				isolation: isolate;
				z-index: 2;
				height: 220px;

				@media screen and (max-width: 640px) {
					height: 100%;
				}

				& figure{
					position: absolute;
					background: #fff;
					top: -30px;
					left: 50%;
					transform: translateX(calc(-50% - 40px));
					padding: 5px;

					& img{
						width: 30px;
					}
				}

				& h3{
					font-size: 20px;
					margin-bottom: 14px;
					text-align: center;
					position: relative;

					&::before{
						position: absolute;
						content: "";
						display: block;
						width: 100%;
						background: #FFF1D1;
						z-index: -1;
						height: 1em;
						bottom: -2px;
						border-radius: 3px;
					}
				}

				& p{
					font-size: 16px;
					line-height: 1.8;

					@media screen and (max-width: 640px) {
						padding: 0px 20px;
					}
				}

			}
		}
	}
}

/* 葬儀費用の相場 */

.funeral_cost_sec{
	background: #F6FAFB;
	padding: 60px 0;

	@media screen and (max-width: 640px) {
		padding: 0px 20px;
	}

	& .funeral_cost_wrapper{
		max-width: 900px;
		margin: 0 auto 80px;
		background: #fff;
		border-radius: 40px;
		overflow: hidden;

		@media screen and (max-width: 640px) {
			margin: 0 auto;
		}

		& h3{
			margin: 0 -20px 32px;
			padding: 12px 20px;
			background: #fbf1d6;
			color: #555;
			font-size: 28px;
			text-align: center;
			border-radius: 40px 40px 0 0;

			& .kc-color{
				color: #1e8c8c;
			}

			& b{
				font-size: 40px;
				color: #1e8c8c;
				font-weight: 700;
				@media screen and (max-width: 640px) {
					font-size: 30px;
				}
			}

			@media screen and (max-width: 640px) {
				padding: 14px;
				font-size: 24px;
			}
		}

		& p{
			padding: 0 40px 40px;
			font-size: 16px;
			line-height: 1.8;
			color: #444;
			text-align: justify;

			@media screen and (max-width: 640px) {
				padding: 0 20px 40px;
			}
		}
		
	}

}

.link_btn_design01{
	display: table;
	margin: 20px auto 0;
	padding: 16px 80px;
	border: 2px solid #1e8c8c;
	border-radius: 999px;
	color: #1e8c8c;
	font-size: 20px;
	font-weight: 600;
	text-decoration: none;
	background: #F6FAFB;
	position: relative;

	&::after{
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		width: 30px;
		height: 20px;
		background-image: url(../img/area/arrow_r_01.svg);
		background-repeat: no-repeat;
		background-position: center;
	}

	&:hover{
		opacity: 0.7;
	}

	@media screen and (max-width: 640px) {
		padding: 10px 16px;
		width: 100%;
		text-align: center;
		font-size: 16px;
		line-height: 1.4;

		&::after{
			right: 12px;
			width: 24px;
			height: 16px;
		}
	}
}

/* 葬儀プラン・費用 */

.funeral_plan_sec{
	background: #F4F3F3;
	padding: 60px 0;

	& .in{
		max-width: 900px;
		margin: 0 auto;
	}

	@media screen and (max-width: 640px) {
		padding: 0px 20px;

		& .in{
			padding: 30px 0px;
		}
	}

}

._single .sec_detail.funeral_plan_sec > .in .secTit{
	padding-bottom: 40px;
}

.funeral_plan_box{
	--plan-color02: #9B9F5B;
	--plan-color03: #CDA949;
	--plan-color04: #B88465;
	--plan-color05: #9D8CAE;

	--plan-arrow02: url('../img/area/arrow_r_02.svg');
	--plan-arrow03: url('../img/area/arrow_r_03.svg');
	--plan-arrow04: url('../img/area/arrow_r_04.svg');
	--plan-arrow05: url('../img/area/arrow_r_05.svg');

	--planlink-color02: #F5F4EB;
	--planlink-color03: #F5EEDA;
	--planlink-color04: #F0E7DF;
	--planlink-color05: #ECEAEF;

	/* デフォルト（01など） */
	--plan-accent: #218A91;
	--plan-arrow-current: url('../img/area/arrow_r_01.svg');
	--planlink: #EBF6F7;

	--plan-layout: calc(100% - 350px);
	--plan-layout100: 100%;

	--plan-column: row;
	--plan-column_sp: column;

	&.funeral_plan04,&.funeral_plan05{
		--members_price_margin: 0 auto;
		--normal_price_margin: 0 0 0 auto;
	}

	/* プラン別：アクセント色だけ上書き */
	&.funeral_plan02{ --plan-accent: var(--plan-color02); }
	&.funeral_plan03{ --plan-accent: var(--plan-color03); }
	&.funeral_plan04{ --plan-accent: var(--plan-color04); }
	&.funeral_plan05{ --plan-accent: var(--plan-color05); }

	/* 矢印 */
	&.funeral_plan02{ --plan-arrow-current: var(--plan-arrow02); }
	&.funeral_plan03{ --plan-arrow-current: var(--plan-arrow03); }
	&.funeral_plan04{ --plan-arrow-current: var(--plan-arrow04); }
	&.funeral_plan05{ --plan-arrow-current: var(--plan-arrow05); }

	/* 矢印 */
	&.funeral_plan02{ --planlink: var(--planlink-color02); }
	&.funeral_plan03{ --planlink: var(--planlink-color03); }
	&.funeral_plan04{ --planlink: var(--planlink-color04); }
	&.funeral_plan05{ --planlink: var(--planlink-color05); }

	&.funeral_plan04{ --planlink: var(--planlink-color04); }
	&.funeral_plan05{ --planlink: var(--planlink-color05); }

	&.funeral_plan04,&.funeral_plan05{ 
		--plan-layout: var(--plan-layout100);
		--plan-column: var(--plan-column_sp);
	}
	


}

.funeral_plan_layout_wrapper{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;

	& .funeral_plan_box:nth-child(-n+3){
		grid-column: 1 / -1;
	}

	& .funeral_plan_box:nth-child(4), .funeral_plan_box:nth-child(5){

	}

	@media screen and (max-width: 640px) {
		grid-template-columns: 1fr;
	}
}

.funeral_plan_layout_wrapper.js-areaSlickSlider .slick-prev,
.funeral_plan_layout_wrapper.js-areaSlickSlider .slick-next
{
	top: 26%;
}

.funeral_plan_box{
	background: #ffffff;
	border-radius: 40px;
	box-sizing: border-box;
	overflow: hidden;
	margin-bottom: 40px;

	& *{
		box-sizing: border-box;
	}

	& .funeral_plan_box_wrapper{
		padding: 24px;
		display: flex;
		gap: 20px;
		align-items: stretch;

		@media screen and (max-width: 640px) {
			padding: 0;
		}


		& > figure{
			width: 350px;
		}

		& .funeral_plan_info{
			width: var(--plan-layout);

			@media screen and (max-width: 640px) {
				width: 100%;
			}


			& .funeral_plan_head{
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 18px;
				margin-bottom: 10px;
				background: var(--plan-accent);
				color: #fff;
				padding: 14px 18px;
				line-height: 1;
				border-radius: 10px;
				height: 70px;


				& h3{
					font-size: 34px;
					font-weight: 500;
					border-radius: 16px;
					margin: 0;
					white-space: nowrap;
					font-family: var(--mincyo);
				}

				& dl{
					margin: 0;

					& dt{
						font-size: 16px;
						font-weight: 700;
						color: #F9F0D4;
						margin: 0;
						line-height: 1.3;
					}

					& dd{
						font-size: 14px;
						margin: 0;
						line-height: 1.3;
					}
				}

				@media screen and (max-width: 640px) {
					flex-direction: column;
					margin-bottom: 0;
					height: auto;
					padding: 0;
					gap: 0;

					& h3{
						border-radius: 16px 16px 0 0;
						padding: 16px 0;
					}

					& dl{
						width: 100%;
						background: var(--planlink);
						color: #333;
						padding: 16px 0;
						text-align: center;

						& dt{
							color: #333;
						}
					}
				}
			}

			& .funeral_plan_detail{
				padding-bottom: 10px;

				@media screen and (max-width: 640px) {
					padding: 0px 20px 20px 20px;
				}

				& .funeral_plan_price{
					display: flex;
					align-items: baseline;
					justify-content: center;
					flex-wrap: nowrap;
					margin-bottom: 14px;
					font-family: var(--mincyo);
					flex-direction: var(--plan-column);
					text-align: center;

					@media screen and (max-width: 640px) {
						flex-direction: column;
					}

					& .funeral_members_price{
						font-size: 65px;
						font-weight: 500;
						font-family: var(--mincyo);
						margin: var(--members_price_margin);

						@media screen and (max-width: 640px) {
							font-size: 60px;
							width: 100%;
							text-align: center;
							white-space: nowrap;
						}

						@media screen and (max-width: 414px) {
							font-size: 50px;
						}


						& span{
							font-size: 45px;
							font-weight: 400;
							position: relative;

							@media screen and (max-width: 640px) {
								font-size: 40px;
							}

							& i{
								font-style: normal;
								position: absolute;
								top: -20px;
								left: -5px;
								font-size: 14px;
							}
						}
					}

					& .funeral_normal_price{
						font-size: 26px;
						font-weight: normal;
						color: #2b2b2b;
						line-height: 1;
						margin: 0 0 0 10px;
						margin: var(--normal_price_margin);

						@media screen and (max-width: 640px) {
							width: 100%;
							margin: 0;
							text-align: right;
						}

						& span{
							font-size: 14px;
							font-weight: bold;
							color: #5e5e5e;

							& i{
								font-style: normal;
							}
						}
					}
				}

				& .funeral_plan_option{
					font-size: 18px;
					font-weight: bold;
					color: #2b2b2b;
					padding-left: 24px;
					margin-bottom: 18px;
					text-align: center;

					& span{
						position: relative;

						&::before{
							content: "";
							position: absolute;
							left: -24px;
							top: -2px;
							width: 20px;
							height: 20px;
							border-radius: 999px;
							background: var(--plan-accent);
							background-image: url('../img/area/icon_plus.svg');
							background-position: center;
							background-repeat: no-repeat;
							background-size: 10px;
							color: #fff;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
							text-align: center;
						}
					}
				}
			}
		}

		& .funeral_plan_image{
			margin: 0;
			border-radius: 10px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			&.sp-image{
				display: none;

				@media screen and (max-width: 640px) {
					display: block;
				}
			}

			& img{
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
				object-position: center;
			}

			@media screen and (max-width: 640px) {
				display: none;
				padding: 20px 20px 10px 20px;

				&.sp-fiximg{
					display: block;
				}
			}
		}
	}

	& .funeral_plan_text{
		font-size: 16px;
		line-height: 1.9;
		color: #2b2b2b;
		padding: 0px 24px 24px;
	}

	& .funeral_plan_note{
		font-size: 16px;
		line-height: 1.8;
		color: #2b2b2b;
		border: 1px solid #2b2b2b;
		border-radius: 14px;
		padding: 10px 16px;
		margin: 0px 24px 18px 24px;
		background: #fff;
		text-align: center;
	}

	& .funeral_plan_link{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		text-decoration: none;
		color: #2b2b2b;
		font-size: 18px;
		font-weight: 700;
		padding: 8px 0;
		background: var(--planlink);
		margin-top: auto;

		&::after{
			content: "";
			width: 34px;
			height: 34px;
			border-radius: 999px;
			background: #ffffff;
			background-image: url('../img/area/detial_link_arrow_r.svg');
			background-position: 14px center;
			background-repeat: no-repeat;
			background-size: 8px;
			border: 1px solid #d9d9d9;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 22px;
			line-height: 1;
		}
	}
}

.funeral_plan_meta {
	display: flex;
	gap: 14px;
	flex-wrap: nowrap;

	@media screen and (max-width: 640px) {
		flex-direction: column;
	}

	& dl {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 12px 16px;
		background: #f3f4f5;
		border-radius: 10px;
		gap: 8px;

		@media screen and (max-width: 640px) {
			justify-content: center;
		}

		& dt {
			font-size: 14px;
			font-weight: 700;
			color: #2b2b2b;
			margin: 0;
			white-space: nowrap;
		}

		& dd {
			margin: 0;
			font-size: 16px;
			font-weight: 700;
			color: var(--plan-accent);
			white-space: nowrap;
		}
	}

	/* 日数 */
	& .funeral_plan_meta_day {
		background: #f3f4f5;
		border-radius: 4px;
		width: 100%;

		& dl{
			align-items: center;

			& dd {
				background: var(--plan-accent);
				color: #fff;
				padding: 8px 12px;
				border-radius: 4px;
				font-size: 14px;
				font-weight: 700;
				line-height: 1;
				position: relative;

				&::after{
					position: absolute;
					content: "";
					width: 8px;
					height: 2px;
					top: 50%;
					left: -8px;
					transform: translateY(-50%);
					background: var(--plan-accent);
				}

				&:first-of-type::after{
					content: none;
				}

				&:last-of-type::after{
					position: absolute;
					content: "";
					width: 8px;
					height: 16px;
					background: transparent;
					background-image: var(--plan-arrow-current);
					background-position:  -8px center;
					background-repeat: no-repeat;
					background-size: 16px;
					top: 50%;
					left: -8px;
					transform: translateY(-50%);
				}
			}
		}

		& .metaday_caution{
			position: relative;
			text-align: center;
			font-size: 14px;
			top: -7px;
		}
	}
}


.sec_reason{

	& .js-areaSlickSlider {
		& .slick-prev, & .slick-next {
			right: 20px;
			width: 20px;
			height: 20px;
			background-image: url(../img/area/area_reason_arrow.svg);
			background-repeat: no-repeat;
			background-position: center;
		}

		& .slick-prev{
			left: 20px;
		}
	}

	@media screen and (max-width: 640px) {

		& .secTit {
			padding: 0 20px;
			& .txt{
				margin-bottom: 20px;
			}
		}

		& .itemBox{
			padding: 20px;
		}

	}
}


.sec_flow .flowBox.flow02{
	margin-bottom: 100px;

	@media screen and (max-width: 640px) {
		margin-bottom: 60px;
		padding: 0 20px 20px;
	}
}

.sec_flow .flowBox.flow03{
	margin-top: 60px;
	padding: 0.4rem 0.85rem 0.1rem 0.84rem;

	& .headtxt{
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		line-height: 1.8;

		& b{
			color: #03888e;
		}
	}

	& .txt{
		margin-bottom: 30px;
	}

	& .link{
		padding-bottom: 0.3rem;

		& .btn01{
			width: 310px;

			@media screen and (max-width: 640px) {
				width: auto;
				font-size: 14px;
			}
		}
	}

	@media screen and (max-width: 640px) {
		padding: 20px 20px 0px 20px;

		& .headtxt{
			font-size: 18px;
			line-height: 1.4;
		}
	}
}


.splitDeco.beige02.asahikawaHouse{
	padding-bottom: 80px;
}

.post .txtBox .infoBox{
	padding: 0 20px 20px;
}

.splitDeco_btn{
	padding: 0 20px 20px;

	& span{
		padding: 14px;
		display: block;
		text-align: center;
		border-radius: 10px;
		background-color: #78a98c;
		margin: auto;
		font-family: source-han-serif-japanese, serif;
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.11em;
		line-height: 1;
		color: #fff;
		transition: opacity 0.3s;
	}
}

/* よくある質問 */

@media screen and (max-width: 640px) {
	.sec_faq{

		& .in{
			padding: 30px 0 60px;
		}
	}
}

/* 火葬場セクション */
.sec_finfo .sec_finfo__items .sec_finfo__item .sec_finfo__box .sec_finfo__wrap.sec_finfo__wrap--type2 > .sec_finfo__wrapSub{
	width: 100%;
}

.sec_finfo__wrap--type2 > .sec_finfo__wrapSub{
	display: flex;
	gap: 20px;
}

.sec_finfo .sec_finfo__items .sec_finfo__item .sec_finfo__box .sec_finfo__wrap .sec_finfo__heading {
	font-size: 0.15rem;
	padding-bottom: 0px;
	margin-bottom: 0px;
	border-bottom: none;
}


/* 市営墓地・霊園セクション */
.sec_detail_other{
	background: #fff;
	padding: 80px 0 20px;

	& .in{
		max-width: 900px;
		margin: 0 auto;
		padding: 0;

		& .secTit{
			margin-bottom: 40px;
		}

		& article{
			background: #F8F7F5;
			border-radius: 10px;
			overflow: hidden;
			margin-bottom: 30px;

			& > div{
				padding: 40px 30px;

				& .subtitle{
					font-size: 24px;
					font-weight: bold;
					text-align: center;
					margin-bottom: 0px;

					& b{
						color: #03888e;
					}
				}

				& .txt{
					font-size: 16px;
					margin-bottom: 30px;
					text-align: center;
				}
			}
		}

		.btn01{
			line-height: 1.4;
			height: 50px;
		}
	}

	@media screen and (max-width: 640px) {
		background: #F8F7F5;
		padding:60px 20px 30px;

		& .in {

			& .title{
				letter-spacing: 0;
			}
			& article {

				& .subtitle{
					line-height: 1.6;
					& b{
						display: block;
					}
				}

				&.sec_wrapper_design01{
					background: #fff;
				}

				& > div {
					padding: 20px;
				}
			}
		}

		&.sec_detail_other01{
			& .in {
				& article {
					& > div {
						padding:0px;
					}
				}
			}
		}

		&.sec_detail_other02{
			padding:30px 20px;
		}

		&.sec_detail_other03{
			padding:10px 20px 30px;
		}
	}

}

.cemetery_public_table_wrapper{
	display: flex;
	gap: 20px;
	margin-bottom: 40px;

	@media screen and (max-width: 640px) {
		flex-direction: column;
	}
}

/* アコーディオン */
.accbtn{
	pointer-events: none;
	display: none;
}

.cemetery_public_toggle{
	width: 100%;
}

@media (max-width: 640px){
	.accbtn{
		display: block;
		pointer-events: auto;
		cursor: pointer;
		background: #fff;
		border: 1px solid #333;
		padding: 10px;
		font-size: 20px;
		border-radius: 10px;
		position: relative;
		font-weight: bold;

		&::after{
			content: "";
			position: absolute;
			width: 28px;
			height: 28px;
			display: block;
			margin: 0;
			background-repeat: no-repeat;
			background-size: 20px;
			background-position: center;
			background-image: url('../img/area/acc_plus.svg');
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
		}
	}

	.cemetery_public_toggle{
		display: none;
	}
}





.cemetery_public_table{
	width: 100%;
	border-radius: 14px;
	overflow: hidden;

	& tbody{
		width: 100%;

		& tr{
			,margin-bottom: 4px;

			& th,td{
				padding: 10px;
				font-size: 16px;
				text-align: left;
			}

			& th{
				width: 40%;
				background: #BCD4C6;
				font-weight: normal
			}

			& td{
				background: #fff;
			}
		}
	}
}

.sec_wrapper_design01{

	& .subtitle{
		background: #CDDFD4;
		padding: 18px 14px;
		text-align: center;
		font-size: 22px;
		font-weight: 600;

		& span{
			background: #fff;
			border-radius: 6px;
			font-size: 20px;
			padding: 8px;
			margin-left: 5px;
		}

		@media screen and (max-width: 640px) {
			font-size: 16px;
			padding: 18px 10px;
		}
	}

	& p{
		font-size: 16px;
		margin-bottom: 20px;
		line-height: 1.8;

		&.txt_center{
			text-align: center;
		}
	}

	& .detail_2col_wrapper{
		display: flex;
		gap: 20px;
		border-top: 1px solid #ccc;
		padding: 20px 0;
		font-size: 14px;

		@media screen and (max-width: 640px) {
			flex-direction: column;
			gap: 0;

			& > div{
				text-align: center;
				margin-bottom: 16px;
				font-size: 18px;
			}
		}

		& > div, ul{
			flex: 1;
		}

		& > ul{
			& > li{
				list-style: disc;
				margin-left: 1em;
				line-height: 1.8;

				@media screen and (max-width: 640px) {
					font-size: 15px;
				}
			}
		}

		&.is-last{
			border-bottom: 1px solid #ccc;
			margin-bottom: 20px;

			& > div:first-child{
				flex: 0.2;
			}
		}

		&.detail_design01{
			border-bottom: 1px solid #ccc;
			margin-bottom: 20px;

			& > ul:first-child{
				flex: 0.8;
			}
		}

		&.detail_design02{

			& > div:first-child{
				flex: 0.2;
			}
		}

		&.detail_design03{
			border-bottom: 1px solid #ccc;
			margin-bottom: 20px;

			& > div:first-child{
				flex: 0.2;
			}
		}

	}

	& .detail_link_wrapper{
		max-width: 92%;
		margin: 0 auto;
		display: flex;
		gap: 40px;
		align-items: center;
		justify-content: space-between;

		& li{
			width: 100%;
		}

		@media screen and (max-width: 640px) {
			max-width: 100%;
			flex-direction: column;
			gap: 30px;
		}
	}

}


.btn01{
	text-align: center;

	&.btnwide{
		width: auto;
		max-width: 400px;
	}

	@media screen and (max-width: 640px) {
		width: 100%;

		&.btnleft{
			justify-content: flex-start;
			padding: 0 40px 0 10px;
			/* font-size: 12px; */
			letter-spacing: 0;
		}
	}

}

.sec_back > .in .sec_feature__items{
	margin-bottom: 0px;
}

._single .sec_back{
	padding-bottom: 0px;
}

._single .mod_contact{
	background: #f3f3f3;
	padding: 0 0 80px;
}

._single .sec_list{
	margin-top: 0;
}

/* フッター資料請求 */
.sec_content{
	/* background: #F3EFEC; */
	background: #ebe4d9;
	padding: 60px 0 30px;

	@media screen and (max-width: 640px) {
		padding: 60px 20px 30px;
	}

	& .in{
		max-width: 900px;
		margin: 0 auto;
		padding: 0;

		& .secTit{
			margin-bottom: 60px;
		}
	}
}

.sec_wrapper_content{
	border-radius: 20px;
	background: #fff;
	border: 8px solid #F9F7F5;
	overflow: hidden;
	margin-bottom: 40px;

	@media screen and (max-width: 640px) {
		border: none;
	}

	& .sec_wrapper_content__head{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin: 0;
		background: #FFF8E8;
		padding: 14px 0;

		& h3{
			font-size: 32px;
			font-weight: 800;
			margin: 0;
			color: #3f3f3f;
			letter-spacing: 1px;

			& span{
				display: inline-block;
				vertical-align: middle;
				font-size: 20px;
				font-weight: 800;
				color: #0f8d8d;
				background: #ffffff;
				padding: 6px 10px;
				border-radius: 14px;
				white-space: nowrap;
				margin-left: 10px;
				position: relative;
				top: -3px;
			}
		}

		@media screen and (max-width: 640px) {
			padding: 20px 10px;

			& h3{
				font-size: 24px;

				& span{
					display: block;
					margin: 0 auto;
					margin-top: 10px;
				}
			}
		}
	}

	& .sec_wrapper_content__nav{
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		margin: 0;
		margin-bottom: 18px;
		background: #f0f0f0;
		overflow: hidden;

		& li{
			/* flex: 1; */
			font-size: 18px;
			font-weight: 700;
			/* padding: 6px 10px; */
			padding: 6px 20px;
			text-align: center;
			white-space: nowrap;
			color: #555;
		}

		& li + li{
			border-left: 2px solid #2d2d2d;
		}

		@media screen and (max-width: 640px) {
			flex-direction: column;
			background: #fff;
			align-items: flex-start;
			border-bottom: 1px solid #999;
			margin: 0 20px;
			padding: 10px 0;

			&  li{
				list-style: disc;
				margin-left: 1em;
				padding: 2px 0;
				font-weight: normal;
			}

			& li + li{
				border-left: none;
			}
		}
	}

	& .sec_wrapper_content__desc{
		font-size: 16px;
		line-height: 1.9;
		text-align: center;
		margin: 0;
		margin-bottom: 18px;
		color: #666;

		& b{
			font-weight: 800;
			color: #333;
		}

		@media screen and (max-width: 640px) {
			padding: 20px;
			text-align: justify;
		}
	}

	& .sec_wrapper_content__cta{
		display: flex;
		align-items: center;
		gap: 12px;
		background: #0c7f82;
		border-radius: 14px;
		padding: 10px 16px;
		text-decoration: none;
		position: relative;
		margin: 0 40px 30px;

		& *{
			box-sizing: border-box;
		}

		&:hover{
			opacity: .95;
		}

		&::after{
			content: "";
			width: 28px;
			height: 28px;
			display: block;
			margin: 0;
			background-repeat: no-repeat;
			background-size: 12px;
			background-position: center;
			background-image: url('../img/area/freedial_arrow.svg');
		}

		@media screen and (max-width: 640px) {
			padding: 20px;
			text-align: justify;
			flex-direction: column;
			gap: 6px;
			box-shadow: 0 10px 0 #09646A;
			margin: 0 20px 30px;

			&::after{
				content: none;
			}
		}
	}

	& .sec_wrapper_content__ctaLeft{
		color: #fff;
		font-weight: 800;
		line-height: 1.15;
		min-width: 170px;
		position: relative;
		padding-left: 10px;

		& b{
			display: block;
			font-size: 22px;
			margin: 0;
			margin-bottom: 6px;
		}

		& span{
			display: block;
			font-size: 22px;
		}

		@media screen and (max-width: 640px) {
			& b, span{
				display: inline-block;
				font-size: 18px;
			}

			&::before, &::after{
				position: absolute;
				content: "";
				display: block;
				width: 30px;
				height: 2px;
				background: #fff;
				top: 50%;
				transform: translateY(-50%);

			}

			&::before{
				left: -35px;
			}

			&::after{
				right: -35px;
			}
		}
	}

	& .sec_wrapper_content__ctaMain{
		flex: 1;
		min-width: 0;
		align-items: center;

		& img{
			width: 34px;

			@media screen and (max-width: 640px) {
				width: 26px;
			}
		}

		& span{
			font-size: 50px;
			color: #FEF1D2;
			font-family: "Oswald", sans-serif;
			line-height: 1;
			font-weight: 400;
			letter-spacing: 2px;
		}

		& .tel_number{display: inline;}
		& .tel_number_sp{display: none;}

		@media screen and (max-width: 640px) {
			& .tel_number{display: none;}
			& .tel_number_sp{
				display: inline;
				font-weight: bold;
				font-size: 35px;
				letter-spacing: 0;
			}
		}
	}

	& .sec_wrapper_content__ctaRight{
		display: flex;
		align-items: center;
		gap: 12px;

		& div{
			background: #ffffff;
			color: #0c7f82;
			font-size: 16px;
			font-weight: 900;
			line-height: 1.2;
			border-radius: 10px;
			padding: 8px;
			text-align: center;
			min-width: 56px;
			box-shadow: 0 2px 0 rgba(0,0,0,.08);
		}

		& div:nth-child(2){
			min-width: 130px;
		}

		@media screen and (max-width: 640px) {
			justify-content: space-between;
			margin-top: 8px;

			& div {
				padding: 6px;
				font-size: 14px;

				& br {
					display: none;
				}
			}
		}
	}

	& .mod_contact{
		background: #fff;
	}

	&.cnt02{

		& .sec_wrapper_content__head{
			& h3{
				font-size: 28px
			}
			
		}

		& .sec_wrapper_content__desc{
			border-bottom: 3px dotted #F3EFEC;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			padding: 20px 0;
		}

		& .txt{
			padding: 0px 20px;
		}

		& .mod_contact{
			padding: 20px 0;
		}
	}
}

.sec_wrapper_schedule{
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 0 8px #fff;
	border: 1px solid #0c7f82;
	padding: 30px;
	overflow: hidden;
	margin-bottom: 40px;

	& p{
		font-size: 16px;
		text-align: center;
		margin-bottom: 40px;
		line-height: 2;
	}

	@media screen and (max-width: 640px) {
		padding: 16px;

		p{
			text-align: justify;
			margin-bottom: 30px;
		}
	}
}

.sec_wrapper_content__head{
	text-align: center;
	margin-bottom: 20px;

	& h3{
		font-size: 32px;
		font-weight: 800;
		margin: 0;
		color: #3f3f3f;
		letter-spacing: 1px;

		& b{
			color: #0c7f82;
		}
	}

	@media screen and (max-width: 640px) {
		& h3{
			font-size: 22px;

			& b{
				display: block;
			}
		}
	}
}


/* 記事 */

.sec_blog{
	padding: 60px 0;

	& .in{
		max-width: 900px;
		margin: 0 auto;

		@media screen and (max-width: 640px) {
			padding: 0 20px;
		}
	}
}

.sec_blog_wrapper{
	position: relative;

	& a{
		display: flex;
		align-items: center;
		gap: 28px;
		margin: 0;
		padding: 28px 40px 28px 0;
		border-bottom: 1px solid #e6e6e6;
	}

	&:first-of-type a{
		margin-top: 40px;
	}

	&:last-of-type a{
		margin-bottom: 40px;
	}

	& h3{
		margin: 0;
		flex: 1;
		font-size: 16px;
		line-height: 1.7;
		font-weight: normal;
	}

	&::after{
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		color: #9aa63b;
		font-size: 28px;
		line-height: 1;
		background-repeat: no-repeat;
		background-size: 10px;
		background-position: center;
		background-image: url('../img/area/blog_arrow.svg');
	}

}