@charset "utf-8";

/*----------------------------------------------------
 共通バナー
----------------------------------------------------*/
/* バナー */
.banner {
	padding: var(--30px) 0 var(--15px) ;
	margin: 0 auto;
	width: 96%;
	max-width: 1200px;
}
	.banner ul {
		display: flex;
		flex-wrap: wrap;
		gap: 2%;
	}
	.banner ul li {
		width: 32%;
	}
	.banner ul li:nth-child(3) {
		display: none;
	}

/* 1024px以下 */
@media screen and (max-width:1024px) {
	.banner {
		width: 94%;
		max-width: 800px;
	}
	.banner ul li {
		width: 49%;
	}
	.banner ul li:nth-child(3) {
		display: block;
	}
}

/* 矢印 */
.commonBnrArrow::before {
	content: '';
	width: 26px;
	height: 26px;
	background-color: #A48D30;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -13px;
}
.commonBnrArrow::after {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 3px #FFF;
	border-right: solid 3px #FFF;
	position: absolute;
	top: 50%;
	right: 22px;
	margin-top: -5px;
	transform: rotate(45deg);
}

/* 供花・供物の注文バナー */
.offeringBnr {
	display: flex;
	align-items: center;
	border-radius: 20px;
	background-color: var(--bg-color-yellow);
	box-shadow: 0px 3px 0px 0px #A48D30;
	color: var(--text-color);
	position: relative;
	height: 126px;
}
		.offeringBnr .images {
			width: 28%;
			padding: var(--10px) var(--15px) 0 var(--15px);
		}
		.offeringBnr .text {
		}
			.offeringBnr .text .greenBox {
				background-color: var(--color-red);
				color: #FFF;
				font-size: var(--14px);
				font-weight: 700;
				border-radius: 20px;
				padding: 1px 15px;
				text-align: center;
				margin-bottom: var(--10px);
			}
			.offeringBnr .text .main {
				font-size: var(--26px);
				line-height: 1.2;
			}

/* 契約企業･団体 割引のご案内バナー */
.contractBnr {
	display: block;
	border-radius: 20px;
	background-color: var(--bg-color-yellow);
	box-shadow: 0px 3px 0px 0px #A48D30;
	color: var(--text-color);
	position: relative;
	padding: var(--10px) 0 var(--05px) 0;
}
	.contractBnr .main {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: var(--03px);
	}
		.contractBnr .main .circle {
			color: #FFF;
			font-size: var(--15px);
			font-weight: 700;
			text-align: center;
			line-height: 0.95;
			background-color: var(--color-green);
			border-radius: 100px;
			width: 80px;
			height: 80px;
			padding-top: var(--08px);
			margin-right: var(--15px);
		}
			.contractBnr .main .circle .num {
				font-size: var(--35px);
			}
		.contractBnr .main .text{
			width: 66%;
			padding-right: var(--40px);
		}
			.contractBnr .main .text .greenBox {
				background-color: var(--color-red);
				background-image: url("../img/common/icon_exclamation.svg");
				background-size: 16px auto;
				background-position: 8px center;
				background-repeat: no-repeat;
				color: #FFF;
				font-size: var(--14px);
				font-weight: 700;
				text-align: center;
				border-radius: 20px;
				padding: 2px 8px 2px 22px;
				margin-bottom: var(--05px);
			}
			.contractBnr .main .text .title {
				font-size: var(--26px);
				line-height: 1.1;
			}
	.contractBnr .sub {
		text-align: center;
		font-size: var(--12px);
		letter-spacing: 0;

	}

/* お客様との物語バナー */
.episodeBnr {
	display: flex;
	align-items: center;
	border-radius: 20px;
	background-color: var(--bg-color-yellow);
	box-shadow: 0px 3px 0px 0px #A48D30;
	color: var(--text-color);
	position: relative;
}
		.episodeBnr .images {
			width: 30%;
			padding: var(--10px) var(--15px) 0 var(--15px);
		}
		.episodeBnr .text {
			width: calc(70% - 45px);
			padding: var(--10px) 0;
		}
			.episodeBnr .text .main {
				font-size: var(--24px);
			}
			.episodeBnr .text .sub {
				font-weight: 700;
				font-size: var(--12px);
				line-height: 1.2;
			}

/* セミナー・イベントバナー */
.seminarBnr {
	display: block;
	border-radius: 20px;
	background-color: var(--bg-color-yellow);
	box-shadow: 0px 3px 0px 0px #A48D30;
	color: var(--text-color);
	position: relative;
	padding: var(--10px) 0 var(--05px) 0;
}
	.seminarBnr .main {
		display: flex;
		align-items: center;
		justify-content: center;
	}
		.seminarBnr .main .photo {
			width: 40%;
			padding: 0 var(--08px);
		}
		.seminarBnr .main .text{
			padding-right: var(--45px);
		}
			.seminarBnr .main .text .greenBox {
				background-color: var(--color-red);
				color: #FFF;
				font-size: var(--14px);
				font-weight: 700;
				border-radius: 20px;
				padding: 1px;
				text-align: center;
				margin-bottom: var(--08px);
			}
			.seminarBnr .main .text .title {
				font-size: var(--22px);
				line-height: 1.1;
			}
	.seminarBnr .sub {
		text-align: center;
		font-size: var(--12px);
		letter-spacing: 0;
	}

/* 不動産部バナー */
.soufudosanBnr {
	display: block;
	border-radius: 20px;
	background-color: #0086CD;
	box-shadow: 0px 3px 0px 0px #002234;
	color: #FFF;
	position: relative;
	padding: var(--20px) var(--30px);
	width: 80%;
	margin: 0 auto var(--30px);
}
	.soufudosanBnr .whiteBox {
		border-radius: 30px;
		background-color: #FFF;
		color: #0086CD;
		font-size: var(--24px);
		font-weight: 700;
		text-align: center;
		padding: var(--05px) 0;
		margin-bottom: var(--20px);
	}
	.soufudosanBnr .main {
		display: flex;
		align-items: center;
		margin-bottom: var(--08px);
	}
		.soufudosanBnr .main .icon {
			width: 150px;
			margin-right: var(--30px);
		}
		.soufudosanBnr .main .sub {
			font-size: var(--16px);
			line-height: 1.5;
			margin-bottom: var(--10px);
		}
		.soufudosanBnr .main .tel {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #002234;
			padding: var(--03px) var(--05px);
			border-radius: 10px;
		}
			.soufudosanBnr .main .tel .box {
				font-size: var(--14px);
				line-height: 1.1;
				padding: var(--03px) var(--05px);
			}
			.soufudosanBnr .main .tel .num {
				font-size: var(--30px);
				font-weight: 700;
			}
	.soufudosanBnr .att {
		font-size: var(--14px);
		text-align: center;
	}

/*----------------------------------------------------
 共通ボタンリスト
----------------------------------------------------*/
.btnList {
	display: flex;
	flex-wrap: wrap;
	gap: var(--30px);
	margin: 0 auto;
	width: 94%;
	max-width: 1100px;
}
.btnList .item {
	width: calc(50% - 15px);
}
	.btnList .item:last-child {
		margin-bottom: 0;
	}
	.btnList .item a {
		display: flex;
		align-items: center;
		padding: var(--10px);
		color: var(--text-color);
		position: relative;
	}
		.btnList .item a::before {
			content: '';
			width: 18px;
			height: 18px;
			background-color: var(--main-color);
			border-radius: 50%;
			position: absolute;
			top: 50%;
			right: 10px;
			margin-top: -9px;
		}
		.btnList .item a::after {
			content: '';
			width: 6px;
			height: 6px;
			border: 0;
			border-top: solid 2px #fff;
			border-right: solid 2px #fff;
			position: absolute;
			top: 50%;
			right: 16.5px;
			margin-top: -3px;
			transform: rotate(45deg);
		}
		.btnList .item a img {
			border-radius: 10px;
			width: 100px;
			height: 100px;
			margin-right: var(--20px);
		}
		.btnList .item a .txt {
			line-height: 1.3;
			padding-right: var(--26px);
		}
			.btnList .item a .txt h3 {
				font-size: var(--22px);
				margin-bottom: var(--05px);
			}

/*----------------------------------------------------
 共通よくある質問
----------------------------------------------------*/
/* よくある質問 */
.faqTitle {
	font-size: var(--26px);
	text-align: center;
	padding: var(--14px) 0;
	background-color: var(--bg-color-yellow);
}
	.faqList dt,
	.faqList dd {
		background-position: left top;
		background-repeat: no-repeat;
		background-size: var(--30px);
	}
		.faqList dt {
			font-weight: 700;
			padding-left: var(--40px);
			padding-bottom: var(--15px);
			background-image: url("../img/common/icon_faq_q.svg");
		}
		.faqList dd {
			padding-left: var(--40px);
			margin-bottom: var(--20px);
			background-image: url("../img/common/icon_faq_a.svg");
		}

/*----------------------------------------------------
 共通ステップタイトル
----------------------------------------------------*/
.stepTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
	.stepTitle .balloon {
		border-radius: 50%;
		background-color: var(--main-color);
		color: #FFF;
		text-align: center;
		width:60px;
		height: 60px;
		font-size: var(--14px);
		line-height: 1;
		padding-top: var(--10px);
	}
		.stepTitle .balloon span {
			font-size: var(--26px);
		}
		.stepTitle .balloon h2 {
			font-size: var(--12px);
			font-weight: 300;
			padding-top: 3px;
		}
			.stepTitle .balloon h2 span {
				font-size: var(--28px);
			}
	.stepTitle dd {
		width: calc(100% - 70px);
		line-height: 1.3;
		font-size: var(--20px);
	}

/*----------------------------------------------------
 共通ホールリスト
----------------------------------------------------*/
.hallList {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--color-glay);
	border-radius: 5px;
	background-color: #FFF;
}
	.hallList li {
		width: 50%;
		border-bottom: 1px solid var(--color-glay);
	}
		.hallList li:nth-child(odd) {
			border-right: 1px solid var(--color-glay);
		}
		.hallList li.noBorder {
			border-bottom: none;
		}
		.hallList li a {
			display: block;
			position: relative;
			padding: var(--10px) var(--20px) var(--10px) var(--10px);
			color: var(--text-color);
			font-weight: 700;
		}
			.hallList li a::after {
				content: '';
				width: 8px;
				height: 8px;
				border: 0;
				border-top: solid 2px var(--main-color);
				border-right: solid 2px var(--main-color);
				position: absolute;
				top: 50%;
				right: 10px;
				margin-top: -3px;
				transform: rotate(45deg);
			}

/*----------------------------------------------------
 共通お客様の声
----------------------------------------------------*/
.personList {
	display: flex;
	flex-wrap: wrap;
}
	.personList dt {
		width: 15%;
		border-top: 1px solid var(--color-glay);
		padding: var(--15px) 0;
	}
	.personList dd {
		width: 85%;
		padding-left: var(--30px);
		padding-top: var(--15px);
		border-top: 1px solid var(--color-glay);
		margin-bottom: var(--15px);
	}
	.personList .noBorder {
		border-top: none;
		padding-top: 0;
	}

/*----------------------------------------------------
 会社案内
----------------------------------------------------*/
/* 会社概要 */
.companyLogoInfo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--30px);
}
	.companyLogoInfo dt {
		width: 220px;
		margin-right: var(--20px);
	}
	.companyLogoInfo dd {
		font-weight: 700;
		font-size: var(--20px);
		line-height: 1.4;
	}

/* 沿革 */
.historyTable {
	width: 100%;
}
	.historyTable,.historyTable td,.historyTable th {
		border-collapse: collapse;
		border: 1px solid var(--color-glay);
		background-color: var(--bg-color-white);
	}
	.historyTable td,.historyTable th {
		padding: var(--10px) var(--15px);
	}
	.historyTable th {
		background-color: var(--bg-color-glay);
		vertical-align: top;
		text-align: left;
	}
	.historyTable .year {
		min-width: 90px;
	}
	.historyTable .months {
		min-width: 70px;
	}

/*----------------------------------------------------
 葬儀場を探す
----------------------------------------------------*/
.searchBox {
	display: flex;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
	.searchBox .searchInput {
		width: 100%;
		height: var(--45px);
		border: 1px solid var(--color-glay);
		padding: 0 var(--10px);
		border-radius: 5px 0 0 5px;
		font-size: var(--18px);
	}
		.searchBox .searchInput::placeholder {
			color: var(--color-glay);
		}
	.searchBox .searchBtn {
		height: var(--45px);
		padding: var(--08px) var(--15px);
		background-color: var(--main-color);
		border-radius: 0 5px 5px 0;
		border: none;
		cursor: pointer;
		outline: none;
	}
		.searchBox .searchBtn img {
			width: auto;
			height: 100%;
		}

.cityList .list {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--color-glay);
	border-radius: 5px;
	background-color: #FFF;
}
	.cityList .list li {
		width: 25%;
		border-bottom: 1px solid var(--color-glay);
		border-right: 1px solid var(--color-glay);
	}
		.cityList .list li:nth-child(4n) {
			border-right: none;
		}
		.cityList .list li:last-child {
			border-bottom: none;
		}
		.cityList .list li a {
			display: block;
			position: relative;
			padding: var(--10px) var(--20px);
			color: var(--text-color);
			font-weight: 700;
		}
			.cityList .list li a::after {
				content: '';
				width: 8px;
				height: 8px;
				border: 0;
				border-top: solid 2px var(--main-color);
				border-right: solid 2px var(--main-color);
				position: absolute;
				top: 50%;
				right: 10%;
				margin-top: -3px;
				transform: rotate(45deg);
			}

/*----------------------------------------------------
 葬儀場ページで繰り返し使うスタイル
----------------------------------------------------*/
/* 詳細ページの幅 */
.hallSingle .wrapper {
	width: 94%;
	max-width: 800px;
	padding: var(--30px) 0;
	margin: 0 auto;
}

/* ホールの種類アイコン */
.hallType {
	border-radius: 5px;
	color: #FFF;
	font-size: var(--12px);
	font-weight: 700;
	white-space: nowrap;
	padding: var(--03px) var(--05px);
	margin-right: var(--10px);
}
	.hallType.item01 {
		background-color: var(--color-green);
	}
	.hallType.item02 {
		background-color: var(--color-red);
	}
	.hallType.item03 {
		background-color: #7E7B76;
	}
	.hallType.item04 {
		background-color: #353431;
	}

/* ホールの概要 */
.summary {
	padding: var(--15px);
}
	.summary .streetView a {
		width: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: var(--05px) 0;
		margin: 0 auto var(--30px);
		font-size: var(--22px);
		font-weight: 700;
		color: var(--text-color);
		border: 1px solid var(--color-glay);
		border-radius: 10px;
		background-color: var(--bg-color-white);
		box-shadow: 0px 3px 0px 0px #BBB;
	}
		.summary .streetView a img {
			height: var(--40px);
			margin-right: var(--10px);
		}
	.summary .add,
	.summary .access,
	.summary .telText {
		padding-left: var(--26px);
		background-position: left 0 top 2px;
		background-repeat: no-repeat;
		background-size: var(--20px);
	}
		.summary .add {
			background-image: url("../img/common/icon_map_glay.svg");
		}
		.summary .access {
			background-image: url("../img/common/icon_train.svg");
		}
		.summary .telText {
			background-image: url("../img/common/icon_tel_glay.svg");
		}
	.summary .feature {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: var(--05px);
	}
		.summary .feature li {
			width: 49%;
			font-size: var(--12px);
			letter-spacing: 0;
			border: 1px solid var(--color-glay);
			border-radius: 3px;
			padding: var(--05px) 0 var(--05px) var(--26px);
			margin-bottom: var(--05px);
			background-color: #FFF;
			background-position: left 4px center;
			background-repeat: no-repeat;
			background-size: 18px;
		}
			.summary .feature li.item01 {
				background-image: url("../img/common/icon_feature01.gif");
			}
			.summary .feature li.item02 {
				background-image: url("../img/common/icon_feature02.gif");
			}
			.summary .feature li.item03 {
				background-image: url("../img/common/icon_feature03.gif");
			}
			.summary .feature li.item04 {
				background-image: url("../img/common/icon_feature04.gif");
			}
			.summary .feature li.item05 {
				background-image: url("../img/common/icon_feature05.gif");
			}
			.summary .feature li.item06 {
				background-image: url("../img/common/icon_feature06.gif");
			}
			.summary .feature li.item07 {
				background-image: url("../img/common/icon_feature07.gif");
			}
			.summary .feature li.item08 {
				background-image: url("../img/common/icon_feature08.gif");
			}
			.summary .feature li.item09 {
				background-image: url("../img/common/icon_feature09.gif");
			}

/* ホールの特徴 */
.hallContent h3 {
	color: var(--main-color);
	font-size: var(--22px);
	margin-bottom: var(--05px);
}
.hallContent p {
	margin-bottom: var(--20px);
}


/*----------------------------------------------------
 周辺の葬儀場
----------------------------------------------------*/
.otherHallTitle {
	border-top: 2px solid var(--main-color);
	border-bottom: 2px solid var(--main-color);
	padding: var(--20px);
	color: var(--color-purple);
	background-color: #FFF;
	text-align: center;
	margin-top: var(--50px);
}
.areaPage .areaMap .map {
	width: 100%;
	height: 380px;
	background-color: var(--color-glay);
}
.areaPage .areaMap .list {
	width: 500px;
	margin: 0 auto;
	display: flex;
	justify-content:space-between;
	padding: 0 var(--10px);
}
	.areaPage .areaMap .list li {
		font-size: var(--14px);
		padding: var(--10px) 0 var(--10px) var(--22px);
		background-position: left 0 center;
		background-repeat: no-repeat;
		background-size: var(--22px);
	}
		.areaPage .areaMap .list li.item01 {
			background-image: url("../img/common/icon_map_green.svg");
		}
		.areaPage .areaMap .list li.item02 {
			background-image: url("../img/common/icon_map_red.svg");
		}
		.areaPage .areaMap .list li.item03 {
			background-image: url("../img/common/icon_map_glay.svg");
		}
		.areaPage .areaMap .list li.item04 {
			background-image: url("../img/common/icon_map_black.svg");
		}

/* 葬儀場リスト */
.areaPage .hallInfoList {
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--40px);
}
.areaPage .hallInfoList .infoBox {
	width: 31%;
}
	.areaPage .hallInfoList .infoBox .title {
		display: flex;
		align-items: center;
		padding: var(--18px) var(--10px);
	}
		.areaPage .hallInfoList .infoBox .title .name {
			font-size: var(--24px);
			line-height: 1.1;
		}
	.areaPage .hallInfoList .infoBox .photo a {
		display: flex;
	}
		.areaPage .hallInfoList .infoBox .photo a li {
			width: 50%;
		}
		.areaPage .hallInfoList .infoBox .photo a li:only-child {
			width: 100%;
			height: 150px;
			overflow: hidden;
			display: flex;
			align-items: center;
		}
			.areaPage .hallInfoList .infoBox .photo a li:only-child img {
				width: 100%;
				height: auto;
			}
	.areaPage .hallInfoList .infoBox .btn {
		display: flex;
		justify-content: space-between;
	}
		.areaPage .hallInfoList .infoBox .btn a {
			border-radius: 10px;
			font-weight: 700;
			height: 56px;
		}
		.areaPage .hallInfoList .infoBox .btn .telBtn {
			width: 68%;
			color: #FFF;
			background-color: var(--color-red);
			padding: var(--08px) var(--08px);
			border-radius: 10px;
			font-weight: 700;
			height: 59px;
		}
				.areaPage .hallInfoList .infoBox .btn .telBtn dl {
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 1.1;
				}
					.areaPage .hallInfoList .infoBox .btn .telBtn dt {
						width: var(--35px);
						margin-right: var(--05px);
					}
					.areaPage .hallInfoList .infoBox .btn .telBtn dd .main {
						font-size: var(--24px);
					}
						.areaPage .hallInfoList .infoBox .btn .telBtn dd .main a {
							color: #FFF;
						}
					.areaPage .hallInfoList .infoBox .btn .telBtn dd .sub {
						font-size: var(--12px);
					}
		.areaPage .hallInfoList .infoBox .btn .linkBtn {
			width: 30%;
		}
			.areaPage .hallInfoList .infoBox .btn .linkBtn a {
				display: block;
				border: 2px solid var(--color-glay);
				color: var(--text-color);
				font-size: var(--18px);
				line-height: 52px;
				box-shadow: 0px 3px 0px 0px #BBBBBB;
				padding-left: var(--15px);
				position: relative;
				text-align: center;
			}
				.areaPage .hallInfoList .infoBox .btn .linkBtn a::before {
					content: '';
					width: 18px;
					height: 18px;
					background-color: var(--main-color);
					border-radius: 50%;
					position: absolute;
					top: 50%;
					left: 6px;
					margin-top: -9px;
				}
				.areaPage .hallInfoList .infoBox .btn .linkBtn a::after {
					content: '';
					width: 6px;
					height: 6px;
					border: 0;
					border-top: solid 2px #fff;
					border-right: solid 2px #fff;
					position: absolute;
					top: 50%;
					left: 11px;
					margin-top: -3px;
					transform: rotate(45deg);
				}

/* 1024px以下 */
@media screen and (max-width:1024px) {
	.areaPage .hallInfoList {
		width: 98%;
		gap: var(--20px);
	}
	.areaPage .hallInfoList .infoBox {
		width: calc(50% - 10px);
	}
	.areaPage .hallInfoList .infoBox .btn .telBtn dd .main {
		font-size: 3vw;
	}
}

/*----------------------------------------------------
 周辺の葬儀場
----------------------------------------------------*/
.hallInfoTitle {
	display: flex;
	align-items: center;
	justify-content: center;
}
	.hallInfoTitle small {
		font-size: var(--16px);
	}

/* 写真 */
.gallery {
	background-color: var(--bg-color-glay);
}
.gallery .swiper-main {
	width: 100%;
	max-width: 820px;
	margin: 0 auto var(--05px);
}
	.gallery .swiper-main img {
		width: 100%;
	}
	.gallery .swiper-main .swiper-button-prev,
	.gallery .swiper-main .swiper-button-next {
		background-color: #000;
		opacity: 0.3;
		height: 60px;
	}
		.gallery .swiper-main .swiper-button-prev {
			left: 0;
			border-radius: 0 10px 10px 0;
		}
		.gallery .swiper-main .swiper-button-next {
			right: 0;
			border-radius: 10px 0 0 10px;
		}
		.gallery .swiper-main .swiper-button-prev::after,
		.gallery .swiper-main .swiper-button-next::after {
			content: '';
			width: 14px;
			height: 14px;
			border: 0;
			border-top: solid 3px #FFF;
			border-right: solid 3px #FFF;
			position: absolute;
			top: 50%;
			margin-top: -7px;
		}
		.gallery .swiper-main .swiper-button-prev::after {
			left: 32%;
			transform: rotate(225deg);
		}
		.gallery .swiper-main .swiper-button-next::after {
			right: 32%;
			transform: rotate(45deg);
		}

.gallery .swiper-thumb {
	padding-bottom: var(--03px);
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
}
	.gallery .swiper-thumb.slide {
		padding-bottom: var(--15px);
	}
.gallery .thumb-media {
    padding-top: var(--10px);
    padding-bottom: var(--20px);
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .gallery .thumb-media img {
    height: calc(100% + 8px);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  .gallery .swiper-slide-thumb-active {
    -webkit-transition: var(--transition);
    transition: var(--transition);
    opacity: 0.3;
  }
  .gallery .swiper-slide-thumb-active .thumb-media {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  .gallery .swiper-slide-thumb-active .thumb-media img {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

/*----------------------------------------------------
 葬儀のかたちを決める
----------------------------------------------------*/
/* 絆 */
.kizunaBox {
	background: #FFF url(../img/top/kizuna_bg_pc.jpg);
	background-position: top center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding-top: 300px;
	position: relative;
	margin-bottom: var(--50px);
}
	.kizunaBox .titleBox {
		background-color: #FFF;
		border-radius: 20px 20px 0 0;
		width: 94%;
		max-width: 1200px;
		display: flex;
		align-items: center;
		margin: 0 auto;
		padding: var(--40px) 100px;
	}
		.kizunaBox .titleBox .new {
			width: 120px;
			padding-right: 2%;
		}
		.kizunaBox .titleBox .txt {
			font-weight: 700;
			line-height: 1;
			font-size: var(--26px);
		}
			.kizunaBox .titleBox .title {
				font-size: 52px;
			}
				.kizunaBox .titleBox .title strong {
					font-size: 68px;
				}
	.kizunaBox .list {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto var(--50px);
		padding: 0 50px;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
	}
		.kizunaBox .list .item {
			width: 31%;
			border-radius: 10px;
			overflow: hidden;
			background-color: var(--bg-color-white);
		}
			.kizunaBox .list .item a {
				color: var(--text-color);
			}
			.kizunaBox .list .item.item01 {
				border: 2px solid #6C3A07;
			}
			.kizunaBox .list .item.item02 {
				border: 2px solid #036DB7;
			}
			.kizunaBox .list .item.item03 {
				border: 2px solid #FF9100;
			}
			.kizunaBox .list .item .bg {
				color: #FFF;
				font-size: 2em;
				font-weight: 700;
				line-height: 1.2;
				padding: 3% 0;
				text-align: center;
			}
				.kizunaBox .list .item.item01 .bg {
					background-color: #6C3A07;
				}
				.kizunaBox .list .item.item02 .bg {
					background-color: #036DB7;
				}
				.kizunaBox .list .item.item03 .bg {
					background-color: #FF9100;
				}
				.kizunaBox .list .item .bg .name {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 150%;
				}
					.kizunaBox .list .item .bg .name .box {
						font-size: 0.3em;
						line-height: 1;
						border: 1px solid #FFF;
						border-radius: 3px;
						padding: var(--08px) var(--05px) var(--05px);
						margin-left: var(--10px);
					}
			.kizunaBox .list .item .inner {
				padding: var(--20px) var(--20px) var(--10px);
			}
				.kizunaBox .list .item .inner .flow {
					display: flex;
					justify-content: space-between;
					margin-bottom: var(--10px);
				}
					.kizunaBox .list .item .inner .flow li {
						width: 30%;
						font-size: 1.1em;
						border-radius: 3px;
						padding: 4px 0;
						font-weight: 700;
						text-align: center;
					}
						.kizunaBox .list .item .inner .flow li.on {
							background-color: #FFD866;
						}
						.kizunaBox .list .item .inner .flow li.off {
							background-color: #CCC;
							color: #FFF;
						}
				.kizunaBox .list .item .inner .kakaku {
					font-size: var(--40px);
					font-weight: 700;
					line-height: 1;
					letter-spacing: 0;
					text-align: center;
				}
					.kizunaBox .list .item .inner .kakaku strong {
						font-size: 180%;
					}
					.kizunaBox .list .item .inner .kakaku ruby {
						font-size: 80%;
					}
	.kizunaBox .bordering {
		font-size: var(--20px);
		font-weight: 700;
		position: absolute;
		top: 360px;
		right: calc(50% - 500px);
	}

/* 1024px以下 */
@media screen and (max-width:1024px) {
	.kizunaBox {
		padding-top: 190px;
	}
		.kizunaBox .titleBox {
			padding: var(--30px) 50px;
		}
			.kizunaBox .titleBox .new {
				width: 90px;
			}
			.kizunaBox .titleBox .txt {
				font-weight: 700;
				line-height: 1;
				font-size: 2.2vw;
			}
				.kizunaBox .titleBox .title {
					font-size: 3.8vw;
				}
					.kizunaBox .titleBox .title strong {
						font-size: 5vw;
					}
		.kizunaBox .list {
			padding: 0 var(--10px);
		}
		.kizunaBox .list .item .bg {
			font-size: 1.5em;
		}
			.kizunaBox .list .item .bg .name {
				font-size: 130%;
			}
			.kizunaBox .list .item .inner .flow li {
				font-size: 1.5vw;
			}
			.kizunaBox .list .item .inner .kakaku {
				font-size: 2.9vw;
			}
	.kizunaBox .bordering {
		font-size: 0.9em;
		top: 230px;
		right: calc(50% - 350px);
	}
}


/*----------------------------------------------------
 プラン共通
----------------------------------------------------*/
/* おすすめ */
.planCommon .recommend {
	background-color: var(--bg-color-yellow);
	border-radius: 15px;
	padding: var(--15px);
}
	.planCommon .recommend .title {
		text-align: center;
		font-size: var(--24px);
	}
	.planCommon .recommend dl {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2%;
	}
		.planCommon .recommend dt {
			width: 12%;
			margin-top: var(--15px);
		}
		.planCommon .recommend dd {
			width: 34%;
			margin-top: var(--15px);
		}

/* 流れ */
.planCommon .sogiFlow .list {
	display: flex;
	justify-content: space-between;
}
	.planCommon .sogiFlow .list li {
		writing-mode: vertical-rl;
		counter-increment: cnt;
		background-color: var(--bg-color-glay);
		font-size: var(--20px);
		font-weight: 700;
		padding: 0 var(--10px) var(--30px);
	}
	.planCommon .sogiFlow .list li::before {
		top: calc(-1 * var(--30px));
		margin: 0 auto;
		color: #FFF;
		background-color: #6B6359;
		padding: var(--15px);
	}
		.planCommon .sogiFlow .list li:nth-child(1)::before {content:"１"}
		.planCommon .sogiFlow .list li:nth-child(2)::before {content:"２"}
		.planCommon .sogiFlow .list li:nth-child(3)::before {content:"３"}
		.planCommon .sogiFlow .list li:nth-child(4)::before {content:"４"}
		.planCommon .sogiFlow .list li:nth-child(5)::before {content:"５"}
		.planCommon .sogiFlow .list li:nth-child(6)::before {content:"６"}
		.planCommon .sogiFlow .list li:nth-child(7)::before {content:"７"}
		.planCommon .sogiFlow .list li:nth-child(8)::before {content:"８"}
		.planCommon .sogiFlow .list li:nth-child(9)::before {content:"９"}

/* ホール写真 */
.planCommon .hallPhoto {
	position: relative;
}
	.planCommon .hallPhoto figcaption {
		position: absolute;
		top: 0;
		display: block;
		width: 100%;
		color: #FFF;
		font-size: var(--24px);
		text-align: center;
		padding: var(--10px);
		background-color:rgba(0, 0, 0, 0.5);
	}

.planCommon .hallPhotoTitle {
	color: #FFF;
	padding: var(--05px) var(--10px);
	background-color: var(--main-color);
}

/* 事例 */
.planCommon .example .btn {
	margin-bottom: var(--15px);
}
	.planCommon .example .btn a {
		display: block;
		position: relative;
		padding: var(--10px) var(--40px) var(--10px) var(--15px);
		color: var(--text-color);
		border-radius: 15px;
	}
		.planCommon .example .btn a::before {
			content: '';
			width: 18px;
			height: 18px;
			background-color: var(--main-color);
			border-radius: 50%;
			position: absolute;
			top: 50%;
			right: 10px;
			margin-top: -9px;
		}
		.planCommon .example .btn a::after {
			content: '';
			width: 6px;
			height: 6px;
			border: 0;
			border-top: solid 2px #fff;
			border-right: solid 2px #fff;
			position: absolute;
			top: 50%;
			right: 16.5px;
			margin-top: -3px;
			transform: rotate(45deg);
		}
		.planCommon .example .btn a .title {
			font-size: var(--22px);
			margin-bottom: var(--08px);
		}
		.planCommon .example .btn a .box {
			display: flex;
		}
			.planCommon .example .btn a .box .photo {
				width: 18%;
				margin-right: var(--20px);
			}
			.planCommon .example .btn a .box .txt {
				width: 80%;
				font-size: var(--14px);
			}
				.planCommon .example .btn a .box .txt .data {
					display: flex;
					flex-wrap: wrap;
					background-color: var(--bg-color-glay);
					padding: var(--20px);
					border-radius: 15px;
				}
					.planCommon .example .btn a .box .txt .data dt {
						width: 90px;
					}
					.planCommon .example .btn a .box .txt .data dd {
						width: calc(100% - 90px);
						line-height: 1.2;
					}

/* メリット・デメリット */
.planCommon .meritTitle,
.planCommon .demeritTitle {
	color: #FFF;
	font-size: var(--22px);
	text-align: center;
	padding: var(--10px) 0;
}
	.planCommon .meritTitle {
		background-color: var(--color-red);
	}
	.planCommon .demeritTitle {
		background-color: var(--link-color);
	}
.planCommon .meritList li,
.planCommon .demeritList li {
	padding-left: var(--50px);
	padding-bottom: var(--15px);
	margin-bottom: var(--15px);
	border-bottom: 1px solid var(--color-glay);
	background-position: left top 5px;
	background-repeat: no-repeat;
	background-size: var(--30px);
}
	.planCommon .meritList li:last-child,
	.planCommon .demeritList li:last-child {
		margin-bottom: 0;
		border-bottom: none;
	}
	.planCommon .meritList li {
		background-image: url("../img/common/icon_merit.svg");
	}
	.planCommon .demeritList li {
		background-image: url("../img/common/icon_demerit.svg");
	}


/*----------------------------------------------------
 福祉の葬儀
----------------------------------------------------*/
.fujoList {
	display: flex;
	flex-wrap: wrap;
	gap: 1.333%;
}
	.fujoList .item {
		width: 24%;
		margin-bottom: var(--15px);
		background-color: var(--bg-color-white);
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid var(--color-glay);
	}
		.fujoList .item figure {
		}
			.fujoList .item figure img {
				border-radius: 0;
				width: 100%;
			}
			.fujoList .item figure figcaption {
				color: var(--text-color);
				padding: var(--10px) var(--28px) var(--10px) var(--10px);
				line-height: 1.2;
			}

/*----------------------------------------------------
 家族葬プラン｢絆｣
----------------------------------------------------*/
/* タイトル */
.kizunaBox.border {
	border-bottom: 2px solid var(--main-color);
	margin-bottom: 0 !important;
}

/* デメリット */
.kizunaPage .demerit .titleBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0 0 var(--10px);
}
	.kizunaPage .demerit .titleBox h2 {
		font-size: var(--28px);
		line-height: 1.3;
	}
	.kizunaPage .demerit .titleBox img {
		width: 25%;
	}
.kizunaPage .demerit .list li {
	margin-bottom: var(--12px);
}
	.kizunaPage .demerit .list h4 {
		font-size: 105%;
		margin-bottom: var(--05px);
	}
.kizunaPage .demerit .staffBg {
	text-align: center;
	font-weight: 700;
	line-height: 1.3;
	padding-top: var(--10px);
	margin-bottom: var(--20px);
	background-image: url("../img/kizuna/demerit_bg.png");
	background-repeat: no-repeat;
	background-position: bottom 20px center;
	background-size: 100% auto;
}
	.kizunaPage .demerit .staffBg .balloon {
		color: var(--color-dark-glay);
		font-size: var(--20px);
		font-weight: 700;
		border: 2px solid var(--color-glay);
		display: inline-block;
		border-radius: 10px;
		padding: var(--05px) var(--15px);
		margin-bottom: var(--10px);
	}
	.kizunaPage .demerit .staffBg .main {
		font-size: var(--30px);
		margin-bottom: var(--20px);
	}
	.kizunaPage .demerit .staffBg .triangle {
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 100px solid transparent;
		border-left: 100px solid transparent;
		border-top: 30px solid #e45633;
		border-bottom: 0;
		margin: 0 auto;
	  }

/* お得な理由 */
.kizunaPage .goodDeal .title {
	font-size: var(--40px);
	color: var(--color-purple);
	text-align: center;
	margin-bottom: var(--15px);
}
.kizunaPage .goodDeal .list {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}
	.kizunaPage .goodDeal .list li {
		background-color: var(--bg-color-white);
		width: calc(94% / 4);
		padding: var(--15px);
		margin-bottom: var(--15px);
		border: 1px solid var(--color-glay);
	}
		.kizunaPage .goodDeal .list li img {
			margin-bottom: var(--10px);
		}
		.kizunaPage .goodDeal .list li h3 {
			font-size: var(--18px);
			margin-bottom: var(--05px);
		}
		.kizunaPage .goodDeal .list li p {
			font-size: var(--14px);
		}

/* プランアコーディオン */
.kizunaPage .kizunaPlan {
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--bg-color-white);
	margin-bottom: var(--15px);
}
	.kizunaPage .kizunaPlan.plan01 {
		border: 2px solid #6C3A07;
	}
	.kizunaPage .kizunaPlan.plan02 {
		border: 2px solid #036DB7;
	}
	.kizunaPage .kizunaPlan.plan03 {
		border: 2px solid #FF9100;
	}

	/* アコーディオンボタン */
	.kizunaPage .kizunaPlan .titleBox {
		display: flex;
		justify-content: space-between;
		padding: var(--05px) var(--10px) var(--20px) var(--10px);
	}
		/* アコーディオン展開時のアイコン */
		.kizunaPage .kizunaPlan .accordion__title::after {
			right: 50%;
			top:80%;
			border-top: solid 3px #FFF;
			border-right: solid 3px #FFF;
		}

		.kizunaPage .kizunaPlan.plan01 .titleBox {
			background-color: #6C3A07;
		}
		.kizunaPage .kizunaPlan.plan02 .titleBox {
			background-color: #036DB7;
		}
		.kizunaPage .kizunaPlan.plan03 .titleBox {
			background-color: #FF9100;
		}
			.kizunaPage .kizunaPlan .titleBox .title {
				display: flex;
				align-items: center;
				color: #FFF;
			}
				.kizunaPage .kizunaPlan .titleBox .title dt {
					font-size: var(--40px);
				}
				.kizunaPage .kizunaPlan .titleBox .title dd {
					font-size: var(--16px);
					line-height: 1.2;
				}
			.kizunaPage .kizunaPlan .titleBox .rightBox {
			}
				.kizunaPage .kizunaPlan .titleBox .rightBox .flow {
					display: flex;
					justify-content: right;
					gap: var(--10px);
				}
					.kizunaPage .kizunaPlan .titleBox .rightBox .flow li {
						font-size: var(--16px);
						border-radius: 3px;
						padding: 2px 4px;
						font-weight: 700;
					}
						.kizunaPage .kizunaPlan .titleBox .rightBox .flow li.on {
							background-color: #FFD866;
						}
						.kizunaPage .kizunaPlan .titleBox .rightBox .flow li.off {
							background-color: #CCC;
							color: #FFF;
						}
				.kizunaPage .kizunaPlan .titleBox .rightBox .kakaku {
					font-size: var(--30px);
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0;
					text-align: center;
					color: #FFF;
				}
					.kizunaPage .kizunaPlan .titleBox .rightBox .kakaku strong {
						font-size: var(--40px);
					}
					.kizunaPage .kizunaPlan .titleBox .rightBox .kakaku ruby {
						font-size: var(--24px);
					}

	/* プラン説明 */
	.kizunaPage .kizunaPlan .outline {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--20px);
	}
		.kizunaPage .kizunaPlan .outline dt {
			width: 60%;
			padding-right: var(--15px);
		}
		.kizunaPage .kizunaPlan .outline dd {
			width: 40%;
		}

	/* 流れ */
	.kizunaPage .kizunaPlan .flow .flowTitle {
		color: var(--color-purple);
		text-align: center;
		font-size: var(--24px);
		margin-bottom: var(--15px);
	}
	.kizunaPage .kizunaPlan .flow .list .item {
		border: 1px solid var(--color-glay);
	}
		.kizunaPage .kizunaPlan .flow .list .item .title {
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--color-glay);
			background-color: var(--bg-color-green);
		}
			.kizunaPage .kizunaPlan .flow .list .item .title dt {
				width: 25%;
			}
			.kizunaPage .kizunaPlan .flow .list .item .title dd {
				padding-left: var(--24px);
				display: flex;
				gap: var(--20px);
				align-items: center;
			}
				.kizunaPage .kizunaPlan .flow .list .item .title dd .step {
					color: var(--main-color);
					font-size: var(--14px);
					line-height: 1;
					border-bottom: 2px solid var(--main-color);
					display: inline-block;
				}
					.kizunaPage .kizunaPlan .flow .list .item .title dd .step .num {
						font-size: 150%;
					}
				.kizunaPage .kizunaPlan .flow .list .item .title dd h4 {
					font-size: var(--24px);
				}
		.kizunaPage .kizunaPlan .flow .list .item .sogiItem {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: var(--15px);
			padding-bottom: 0;
		}
			.kizunaPage .kizunaPlan .flow .list .item .sogiItem li {
				width: 48%;
				margin-bottom: var(--10px);
			}
				.kizunaPage .kizunaPlan .flow .list .item .sogiItem li figure {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
					.kizunaPage .kizunaPlan .flow .list .item .sogiItem li figure span {
						background-color: #F3F3F3;
						border-radius: 50%;
						width: 50px;
						height: 50px;
						padding: var(--05px);
					}
					.kizunaPage .kizunaPlan .flow .list .item .sogiItem li figure figcaption {
						line-height: 1.1;
						width: calc(94% - 50px);
					}

/* プラン料金以外に費用がかかる場合 */
.kizunaPage .uncontained .accordion__content li {
	margin-bottom: var(--15px);
}
	.kizunaPage .uncontained .accordion__content li h5 {
		font-size: var(--14px);
		margin-bottom: var(--05px);
	}
	.kizunaPage .uncontained .accordion__content li p {
		font-size: var(--14px);
	}

/*----------------------------------------------------
 オプション共通
----------------------------------------------------*/

/* ご相談ください */
.optionCommon .consultationTitle {
	font-size: var(--22px);
	color: var(--color-purple);
	padding: var(--12px) var(--24px) var(--12px) 70px;
	border-bottom: 1px solid var(--color-glay);
	background-image: url("../img/common/icon_2fukidashi.svg");
	background-repeat: no-repeat;
	background-position: left 20px center;
	background-size: 40px 40px;
}

/* 料理スタイル写真 */
.optionCommon .cuisinePhoto {
	position: relative;
}
	.optionCommon .cuisinePhoto figcaption {
		position: absolute;
		top: 0;
		display: block;
		width: 100%;
		color: #FFF;
		font-size: 5vw;
		text-align: center;
		padding: var(--10px);
		background-color:rgba(0, 0, 0, 0.5);
	}

.optionCommon .cuisinePhotoTitle {
	color: #FFF;
	padding: var(--05px) 0;
	background-color: var(--main-color);
	text-align: center;
	font-size: var(--18px);
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* お身体のケア */
.optionCommon .careSubTitle {
	display: flex;
	align-items: center;
	margin-bottom: var(--05px);
}
	.optionCommon .careSubTitle dt {
		font-size: var(--20px);
		width: 40%;
	}
/*----------------------------------------------------
 アスカが選ばれる理由＆社葬
----------------------------------------------------*/
.qualityTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--15px);
}
	.qualityTitle.pb0 {
		padding-bottom: 0;
	}
	.qualityTitle .balloon {
		border-radius: 50%;
		background-color: #D3AA00;
		color: #FFF;
		text-align: center;
		width: 80px;
		height: 80px;
		font-size: var(--12px);
		line-height: 1.1;
		padding-top: var(--15px);
	}
		.qualityTitle .balloon .num {
			font-family: Century, sans-serif;
			font-size: var(--30px);
			line-height: 1;
		}
	.qualityTitle dd {
		width: calc(100% - 90px);
		font-size: var(--14px);
		line-height: 1.3;
		color: var(--color-purple);
	}

/*----------------------------------------------------
 アスカの特長
----------------------------------------------------*/
/* スタイルリスト */
.funeralCommon .styleList {
	display: flex;
	margin-bottom: var(--15px);
}
	.funeralCommon .styleList li {
		margin-right: var(--10px);
	}
		.funeralCommon .styleList li:last-child {
			margin-right: 0;
		}
		.funeralCommon .styleList li a {
			display: block;
			padding: var(--05px) var(--10px);
			color: #FFF;
			font-size: var(--14px);
			background-color: var(--main-color);
			border-radius: 5px;
		}

/* モーダル */
.funeralCommon .modalListTitle {
	font-size: var(--24px);
	line-height: 1.2;
	color: var(--color-purple);
	margin-bottom: var(--15px);
}
.funeralCommon .modalList {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}
	.funeralCommon .modalList .item {
		width: 32%;
		margin-bottom: var(--15px);
		background-color: var(--bg-color-white);
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
	}
		.funeralCommon .modalList .item figure {
		}
			.funeralCommon .modalList .item figure img {
				border-radius: 0;
			}
			.funeralCommon .modalList .item figure figcaption {
				color: var(--text-color);
				font-weight: 700;
				padding: var(--10px) var(--28px) var(--10px) var(--10px);
				line-height: 1.2;
				position: relative;
			}
				.funeralCommon .modalList .item figure figcaption::before {
					content: '';
					width: 24px;
					height: 24px;
					background-color: var(--main-color);
					border-radius: 50%;
					position: absolute;
					top: 50%;
					right: 7px;
					margin-top: -13px;
				}
				.funeralCommon .modalList .item figure figcaption::after {
					content: url(../img/common/icon_search.svg);
					width: 14px;
					height: 14px;
					position: absolute;
					top: 50%;
					right: 12px;
					margin-top: -10px;
				}

/* 人づくり */
.funeralCommon .staffNotes {
	display: flex;
	justify-content: space-between;
}
	.funeralCommon .staffNotes dt {
		width: 40%;
	}
	.funeralCommon .staffNotes dd {
		width: calc(60% - 15px);
		font-size: var(--14px);
	}

/* 細やかなサービス */
.funeralCommon .serviceSubTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--15px);
}
	.funeralCommon .serviceSubTitle dt {
		width: calc(60% - 15px);
		color: var(--main-color);
	}
	.funeralCommon .serviceSubTitle dd {
		width: 40%;
	}

/* 葬儀への想い */
.funeralCommon .messageBg {
	padding: 60px calc((100% - 700px) / 2);
	background-image: url(../img/funeral/heart_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top -150px center;
}
	.funeralCommon .messageBg .title {
		text-shadow:
			2px 2px 10px #FFF ,
			-2px 2px 10px #FFF ,
			2px -2px 10px #FFF ,
			-2px -2px 10px #FFF;
	}
.heartBalloon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--15px);
}
.heartBalloon dt {
	width: 12%;
}
.heartBalloon dd {
	width: 85%;
    position:relative;
    background:var(--bg-color-glay);
    padding:var(--15px);
    text-align:left;
		line-height: 1.2;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.heartBalloon dd:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(134, 211, 255, 0);
    border-top-width:8px;
    border-bottom-width:8px;
    border-left-width:11px;
    border-right-width:11px;
    margin-top: -8px;
    border-right-color:var(--bg-color-glay);
    right:100%;
    top:50%;
}


/*----------------------------------------------------
 トータルサポート
----------------------------------------------------*/
.supportCommon .totalFlowTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--15px);
}
	.supportCommon .totalFlowTitle .balloon {
		border-radius: 50%;
		background-color: var(--main-color);
		color: #FFF;
		text-align: center;
		width:60px;
		height: 60px;
		font-size: var(--14px);
		line-height: 60px;
	}
		.supportCommon .totalFlowTitle .balloon.two {
			font-size: var(--12px);
			line-height: 1;
			padding-top: var(--12px);
		}
	.supportCommon .totalFlowTitle dd {
		width: calc(100% - 70px);
	}


/*----------------------------------------------------
 事前相談
----------------------------------------------------*/
.beforehandCV {
	display: none;
}
.reference .referenceTitle {
	background-color: var(--main-color);
	color: #FFF;
	text-align: center;
	font-size: var(--24px);
	padding: var(--12px) 0;
}
.beforehandPage .personBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 70%;
	margin: 0 auto;
}
	.beforehandPage .personBox .person {
		width: 18%;
	}
	.beforehandPage .personBox .balloon {
		width: 80%;
		position:relative;
		background:#FFFFFF;
		padding:10px 15px;
		border:1px solid var(--color-glay);
		border-radius:10px;
		font-size: var(--18px);
		font-weight: 700;
	}
		.beforehandPage .personBox .balloon:after,.beforehandPage .personBox .balloon:before{
			border: solid transparent;
			content:'';
			height:0;
			width:0;
			pointer-events:none;
			position:absolute;
			top:50%;
		}
			.beforehandPage .personBox .left:after,.beforehandPage .personBox .left:before{
				right:100%;
			}
			.beforehandPage .personBox .right:after,.beforehandPage .personBox .right:before{
				left:100%;
			}
		.beforehandPage .personBox .balloon:after{
			border-color: rgba(255, 255, 255, 0);
			border-top-width:7px;
			border-bottom-width:7px;
			border-left-width:15px;
			border-right-width:15px;
			margin-top: -7px;
		}
			.beforehandPage .personBox .left:after{
				border-right-color:#FFFFFF;
			}
			.beforehandPage .personBox .right:after{
				border-left-color:#FFFFFF;
			}
		.beforehandPage .personBox .balloon:before{
			border-color: rgba(204, 204, 204, 0);
			border-top-width:8px;
			border-bottom-width:8px;
			border-left-width:17px;
			border-right-width:17px;
			margin-top: -8px;
		}
			.beforehandPage .personBox .left:before{
				border-right-color:#CCCCCC;
			}
			.beforehandPage .personBox .right:before{
				border-left-color:#CCCCCC;
			}

.reference .subTitle {
	margin: 0 auto var(--15px);
	width: 80%;
	background-color: var(--color-red);
	color: #FFF;
	text-align: center;
	font-size: var(--24px);
	padding: var(--08px) 0;
	border-radius: 10px;
}
.reference .staffTitle {
	font-size: var(--24px);
	padding: var(--50px) 0 var(--10px);
	color: var(--color-purple);
	border-bottom: 1px solid var(--color-glay);
	background-image: url(../img/support/beforehand_img03.png);
	background-repeat: no-repeat;
	background-size: 80px auto;
	background-position: right bottom;
}

.concrete .concreteTitle {
	background-color: var(--color-orange);
	color: #FFF;
	text-align: center;
	font-size: var(--24px);
	padding: var(--12px) 0;
}

.concrete .btn {
	display: none;
}

/*----------------------------------------------------
 アフターサポート
----------------------------------------------------*/
/* 仏壇・仏具 */
.afterCommon .photoTwo {
	display: flex;
	justify-content: center;
	gap: var(--10px);
}
	.afterCommon .photoTwo figure {
	}
		.afterCommon .photoTwo figure img {
			margin: 0 auto;
		}
	.afterCommon .photoTwo figcaption {
		font-size: var(--14px);
		text-align: center;
	}
.afterCommon .salon {
	display: flex;
	justify-content: space-between;
}
	.afterCommon .salon dt {
		width: 100px;
	}
	.afterCommon .salon dd {
		width: calc(100% - 115px);
		font-size: var(--12px);
		border-radius: 10px;
		background-color: var(--bg-color-glay);
		padding: var(--10px);
	}

/* 遺産整理・相続相談サービス */
.afterCommon .flowTitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--15px);
}
	.afterCommon .flowTitle .balloon {
		border-radius: 50%;
		background-color: var(--main-color);
		color: #FFF;
		text-align: center;
		width:60px;
		height: 60px;
		font-size: var(--14px);
		line-height: 1.2;
		padding-top: var(--10px);
	}
	.afterCommon .flowTitle dd {
		width: calc(100% - 70px);
		font-size: var(--20px);
	}

/* 生前整理・遺品整理 */
.withdrawalFlow {
	padding: var(--10px);
}
.withdrawalFlow .accordion__title::after {
	right: 10px;
}
	.withdrawalFlow .stepTitle .balloon {
		width:50px;
		height: 50px;
		padding-top: var(--05px);
	}
	.withdrawalFlow .stepTitle dd {
		width: calc(100% - 60px);
	}

/* ハワイ海洋散骨 */
.bgBlue {
	background-color: #15579E;
	text-align: center;
	border-radius: 10px;
	padding: var(--12px);
	color: #FFF;
}
	.bgBlue .yellow {
		background-color: #EEEA39;
		border-radius: 10px;
		line-height: 1.1;
		color: #15579E;
		padding: var(--08px) 0;
		font-weight: bold;
		font-size: var(--18px);
	}
		.bgBlue .yellow big {
			font-size: var(--30px);
		}
	.bgBlue .num {
		font-weight: bold;
		font-size: var(--30px);
	}
	.bgBlue .num ruby {
		font-size: var(--18px);
	}

.hawaiiCV {
	background-color: #98D3EA;
	border-radius: 10px;
	padding: var(--20px);
	color: #15579E;
}
	.hawaiiCV .title {
		border-bottom: 1px solid #FFF;
		text-align: center;
		font-size: 5.2vw;
		padding-bottom: var(--05px);
		margin-bottom: var(--10px);
	}
	.hawaiiCV a {
		display: block;
		border-radius: 10px;
		color: #FFF;
		font-weight: 700;
		background-color: #15579E;
		box-shadow: 0px 3px 0px 0px #072042;
	}
	.hawaiiCV a {
		border-radius: 10px;
		color: #FFF;
		background-color: #15579E;
	}
		.hawaiiCV .telBtn a {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: var(--05px) 0;
		}
			.hawaiiCV .telBtn a .icon {
				width: 30px;
				margin-right: var(--10px);
			}
			.hawaiiCV .telBtn a .num {
				font-size: var(--28px);
				letter-spacing: 2px;
			}
		.hawaiiCV .foamBtn a {
			display: block;
			padding: var(--10px) 0;
			font-size: var(--18px);
			text-align: center;
			position: relative;
		}
			.hawaiiCV .foamBtn a::before {
				content: '';
				width: 18px;
				height: 18px;
				background-color: #FFF;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				right: 15px;
				margin-top: -9px;
			}
			.hawaiiCV .foamBtn a::after {
				content: '';
				width: 6px;
				height: 6px;
				border: 0;
				border-top: solid 2px #15579E;
				border-right: solid 2px #15579E;
				position: absolute;
				top: 50%;
				right: 21.5px;
				margin-top: -3px;
				transform: rotate(45deg);
			}


/*----------------------------------------------------
 ご葬儀エピソード
----------------------------------------------------*/
.episodeList .item {
	margin-bottom: var(--20px);
}
	.episodeList .item a {
		display: block;
		background-color: #FFF;
		border-radius: 20px;
		padding: var(--20px);
		color: var(--text-color);
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
	}
		.episodeList .item a .title {
			font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
			font-size: var(--22px);
			margin-bottom: var(--10px);
		}
		.episodeList .item a .link {
			color: var(--link-color);
			text-align: right;
			text-decoration: underline;
			text-underline-offset:var(--03px);
		}
.episodePage .mainTitle {
	font-size: var(--26px);
	line-height: 1.4;
}
.episodePage .subTitle {
	font-size: var(--22px);
}


/*----------------------------------------------------
 葬儀に必要な費用
----------------------------------------------------*/
.payment {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	.payment dl {
		width: 45%;
		border-radius: 10px;
		padding: var(--10px);
	}
	.payment dl dt {
		width: 80px;
		margin: 0 auto 10px;
	}
	.payment dl dd {
		text-align: center;
		line-height: 1.2;
	}
	.payment .leftBox {
		background-color: var(--bg-color-yellow);
	}
	.payment .rightBox {
		background-color: #DEF0E4;
	}

.pricePage .bgYellow,
.pricePage .bgGreen {
	border-radius: 20px;
	padding: var(--35px) !important;
	margin-bottom: var(--30px);
}
	.pricePage .bgYellow h2,
	.pricePage .bgGreen h2 {
		font-size: 1.8em;
	}

/*----------------------------------------------------
 よくある質問
----------------------------------------------------*/
.faqLink {
	display: flex;
	flex-wrap: wrap;
}
	.faqLink li {
		width: 25%;
	}

.faqAccordion {
	padding: var(--05px) 0;
}
.faqAccordion dt,
.faqAccordion dd {
	background-repeat: no-repeat;
	background-size: var(--30px);
	padding-left: var(--55px);
}
	.faqAccordion dt {
		padding-top: var(--20px);
		padding-bottom: var(--20px);
		padding-left: var(--55px);
		padding-right: var(--35px);
		font-weight: 700;
		font-size: var(--14px);
		line-height: 1.4;
		background-image: url("../img/common/icon_faq_q.svg");
		background-position: left 15px center;
		border-top: 1px solid var(--color-glay);
	}
		.faqAccordion dt:first-child {
			border-top: none;
		}
	.faqAccordion dd {
		background-image: url("../img/common/icon_faq_a.svg");
		background-position: left 15px top 5px;
	}

/* アコーディオン展開時のアイコン */
.faqAccordion .accordion__title::after {
	right: 15px;
	top: 50%;
}

/* アコーディオンの中身 */
.faqAccordion .accordion__content {
	padding: 0 var(--15px) 0 var(--55px);
}
	.faqAccordion .accordion__content.is-open {
		padding: 0 var(--15px) var(--15px) var(--55px);
	}


/*----------------------------------------------------
 SOUセレモニーメンバーズ（互助会）のメリット
----------------------------------------------------*/
.medalTitle {
	position: relative;
	font-size: var(--18px);
	color: var(--color-purple);
	background-color: #F2FDEC;
	border-radius: 30px;
	padding-left: 80px;
	padding: var(--10px) 0 var(--10px) var(--55px);
	margin-bottom: var(--15px);
}
	.medalTitle::after {
		position: absolute;
		content: '特徴';
		color: #FFF;
		font-size: var(--10px);
		font-weight: 300;
		text-align: center;
		padding-top: var(--10px);
		top: 50%;
		left: 0;
		margin-top: -32px;
		width: 48px;
		height: 64px;
		background-image: url("../img/common/icon_medal_bg.svg");
		background-size: cover;
	}
	.medalTitle::before {
		position: absolute;
		z-index: 1;
		color: #FFF;
		font-weight: 300;
		text-align: center;
		top: 10px;
		left: 19px;
	}
		.medalTitle.no1::before {
			content: '1';
		}
		.medalTitle.no2::before {
			content: '2';
		}
		.medalTitle.no3::before {
			content: '3';
		}

.souService {
	display: flex;
	justify-content: space-between;
}
	.souService li {
		width: calc(50% - 8px);
		padding: var(--10px);
		border: 1px solid var(--color-glay);
		font-weight: 700;
	}
		.souService li .sub {
			line-height: 1.2;
			text-align: center;
		}
		.souService li .main {
			font-size: var(--20px);
			text-align: center;
			color: var(--color-orange);
		}
			.souService li .main .num {
				font-size: var(--26px);
			}

.souItemList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.souItemList .item {
		width: 23%;
		font-size: var(--12px);
		line-height: 1.2;
		text-align: center;
		margin-bottom: var(--10px);
	}
		.souItemList .item img {
			margin-bottom: var(--05px);
			width: 100%;
		}
	.souItemList .item.full {
		width: 49%;
	}

.souMemoList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.souMemoList .item {
		width: calc(25% - 10px);
		font-size: var(--12px);
		line-height: 1.2;
		text-align: center;
		margin-top: var(--10px);
	}
		.souMemoList .item img {
			margin-bottom: var(--05px);
			width: 100%;
		}

.souMerit {
}
	.souMerit .item {
		position: relative;
		padding-left: 30px;
		margin-bottom: var(--20px);
	}
		.souMerit .item:last-child {
			margin-bottom:0 ;
		}
		.souMerit .item::before {
			position: absolute;
			top: 0;
			left: -10px;
			color: #FFF;
			font-weight: 700;
			background-color: var(--main-color);
			border-radius: 50%;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 33px;
		}
			.souMerit .item:nth-child(1)::before {content:"１"}
			.souMerit .item:nth-child(2)::before {content:"２"}
			.souMerit .item:nth-child(3)::before {content:"３"}
			.souMerit .item:nth-child(4)::before {content:"４"}
			.souMerit .item:nth-child(5)::before {content:"５"}
			.souMerit .item:nth-child(6)::before {content:"６"}
			.souMerit .item:nth-child(7)::before {content:"７"}
			.souMerit .item:nth-child(8)::before {content:"８"}
			.souMerit .item:nth-child(9)::before {content:"９"}
	.souMerit .item h4 {
		font-size: var(--20px);
	}

.souSyuha {
	display: flex;
	justify-content: space-between;
}

.souTokuten {
	width: 100%;
}
	.souTokuten th {
		width: 55%;
		font-weight: 700;
	}
	.souTokuten td {
		width: 45%;
		font-weight: 700;
	}

/*----------------------------------------------------
 社葬
----------------------------------------------------*/
/* モーダル */
.modalList.shasoHotel {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}
	.modalList.shasoHotel .item {
		width: 32%;
		margin-top: var(--15px);
		margin-bottom: 0;
		background-color: var(--bg-color-white);
	}
		.modalList.shasoHotel .item figure {
		}
			.modalList.shasoHotel .item figure figcaption {
				color: var(--text-color);
				font-weight: 700;
				padding: var(--10px) var(--28px) var(--10px) var(--10px);
				line-height: 1.2;
				position: relative;
			}
				.modalList.shasoHotel .item figure figcaption::before {
					content: '';
					width: 24px;
					height: 24px;
					background-color: var(--main-color);
					border-radius: 50%;
					position: absolute;
					top: 50%;
					right: 7px;
					margin-top: -13px;
				}
				.modalList.shasoHotel .item figure figcaption::after {
					content: url(../img/common/icon_search.svg);
					width: 14px;
					height: 14px;
					position: absolute;
					top: 50%;
					right: 12px;
					margin-top: -10px;
				}

/* 流れテーブル */
.shasoFlowTable {
	width: 100%;
}
	.shasoFlowTable thead th {
		font-weight: bold;
	}
	.shasoFlowTable tbody th {
		width: 20%;
	}
	.shasoFlowTable tbody td {
		width: 80%;
	}

/* エピソード */
.episodeInfo {
	display: flex;
	flex-wrap: wrap;
	padding: var(--15px);
	background-color: var(--bg-color-green);
	border-radius: 10px;
	font-size: var(--14px);
}
	.episodeInfo dt {
		width: 50px;
	}
	.episodeInfo dd {
		width: calc(100% - 65px);
		font-weight: 700;
	}

/* 事例 */
.placesList {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
}
	.placesList figure {
		width: calc(50% - 20px);
	}
.placesPhotoTxt {
	border-radius: 10px;
	background-color: var(--bg-color-glay);
	font-size: var(--14px);
	line-height: 1.4;
	padding: var(--15px);
}

/*----------------------------------------------------
 採用情報
----------------------------------------------------*/
.recruitMessageBg {
	padding: 60px calc((100% - 700px) / 2);
	background-image: url(../img/recruit/lead_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	line-height: 2;
}
.recruitFlow li {
	background-color: var(--bg-color-green);
	border-radius: 20px;
	text-align: center;
	padding: var(--08px) 0;
	position: relative;
	margin-bottom: var(--20px);
}
	.recruitFlow li:last-child {
		margin-bottom: 0;
	}
	.recruitFlow li::before{
		content: "";
		position: absolute;
		bottom: -19px;
		left: 50%;
		margin-left: -3px;
		border: 6px solid transparent;
		border-top: 7px solid var(--color-purple);
	}
		.recruitFlow li:last-child::before {
			border: none;
		}

/*----------------------------------------------------
 供花・供物ご注文サービス
----------------------------------------------------*/
.kyokaList {
	display: flex;
	flex-wrap: wrap;
	gap: var(--15px);
	margin-bottom: var(--30px);
}
	.kyokaList .item {
		width: calc(33% - 8px);
	}
		.kyokaList .item figure {
			border-radius: 10px;
			border: 1px solid var(--color-glay);
			overflow: hidden;
			background-color: #FFF;
		}
			.kyokaList .item img {
				width: 100%;
			}
			.kyokaList .item h3 {
				line-height: 1.2;
			}
			.kyokaList .item .kakaku {
				display: flex;
				align-items: center;
				border-top: 1px solid var(--color-glay);
				line-height: 1;
				background-color: var(--bg-color-green);
			}
				.kyokaList .item .kakaku dt {
					text-align: center;
					width: 50px;
				}
				.kyokaList .item .kakaku dd {
					width: calc(100% - 50px);
					text-align: center;
					padding: var(--05px) 0;
					background-color: #FFF;
				}
					.kyokaList .item .kakaku dd strong {
						font-size: var(--20px);
					}

.offeringTelBtn {
	display: inline-block;
	color: var(--text-color);
	font-weight: 700;
	border: 2px solid var(--main-color);
	border-radius: 30px;
	background-color: var(--bg-color-white);
	padding: var(--08px) var(--20px) var(--08px) var(--40px);
	position: relative;
	width: 98%;
}
	.offeringTelBtn::before {
		content: url(../img/common/icon_cv_tel.svg);
		width: 28px;
		height: 28px;
		position: absolute;
		top: 50%;
		left: 14px;
		margin-top: -14px;
	}

.offeringFax {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
	.offeringFax dt {
		width: 50px;
	}
	.offeringFax dd {
		width: calc(100% - 60px);
		color: var(--text-color);
		font-weight: 700;
		font-size: var(--50px);
		letter-spacing: 0;
	}
		.offeringFax dd a {
			color: var(--text-color);
		}

/*----------------------------------------------------
 ご葬儀事例
----------------------------------------------------*/
.exColumn {
	display: flex;
	gap: var(--30px);
	margin-bottom: var(--20px);
}
	.exColumn > dt {
		flex: 1;
	}
	.exColumn > dd {
		flex: 1;
	}
.exData {
	background-color: var(--bg-color-green);
	border-radius: 10px;
	overflow: hidden;
}
.exData .title {
	font-size: var(--16px);
	font-weight: 700;
	color: #FFF;
	text-align: center;
	background-color: var(--main-color);
	padding: var(--03px);
}
	.exData dl {
		display: flex;
		flex-wrap: wrap;
		padding: var(--15px);
		font-size: var(--14px);
	}
		.exData dt {
			width: 80px;
		}
		.exData dd {
			width: calc(100% - 90px);
			line-height: 1.2;
			font-weight: 700;
		}

/*----------------------------------------------------
 お急ぎの方へ
----------------------------------------------------*/
.emergencyFlowPhoto {
	width: 70%;
}
.emergencyCheckList {
	margin-left:var(--40px);
}
	.emergencyCheckList > li {
		list-style-type: none;
		font-size: var(--16px);
		font-weight: 700;
		line-height: 1.4;
		margin-bottom: var(--15px);
		position: relative;
	}
		.emergencyCheckList > li:before {
			content: url(../img/common/icon_checkbox.svg);
			width: 28px;
			height: 28px;
			position: absolute;
			top: 50%;
			left: -40px;
			margin-top: -14px;
		}

/* 年末年始 */
.emergencyHoliday .title {
	color: #FFF;
	font-size: var(--26px);
	text-align: center;
	padding: var(--14px) 0;
	background-color: var(--color-red);
}
.emergencyHoliday .subTitle {
	color: var(--color-purple);
	font-size: 120%;
}
.emergencyHoliday .calendar {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ccc;
}
	.emergencyHoliday .calendar th,
	.emergencyHoliday .calendar td {
		border-collapse: collapse;
		border: 1px solid #ccc;
	}
	.emergencyHoliday .calendar th {
		background: #f7f7f7;
		padding: 10px;
		font-size: 110%;
	}
	.emergencyHoliday .calendar td {
		padding: 15px 0;
		text-align: left;
		font-size: 120%;
		width: calc(100% / 8);
	}
		.emergencyHoliday .calendar .days td {
			text-align: center;
		}
		.emergencyHoliday .calendar td .bar {
			display: inline-block;
			vertical-align: middle;
			color: #33AC7F;
			line-height: 1;
			position: relative;
			width: 100%;
			height: 0.4em;
			background: currentColor;
		}
	.emergencyHoliday .calendar td .arrow-right {
		display: inline-block;
		vertical-align: middle;
		color: #33AC7F;
		line-height: 1;
		position: relative;
		width: 50%;
		height: 0.4em;
		background: currentColor;
	}
		.emergencyHoliday .calendar td .arrow-right::before {
			content: '';
			width: 1.65em;
			height: 1.65em;
			border: 0.4em solid currentColor;
			border-left: 0;
			border-bottom: 0;
			transform: rotate(45deg);
			transform-origin: top right;
			position: absolute;
			top: 50%;
			right: -0.5em;
			box-sizing: border-box;
		}

/*----------------------------------------------------
 オンライン相談
----------------------------------------------------*/
.outlineColumn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--20px);
}
.outlineItem {
	border: 5px solid var(--color-glay);
	border-radius: 10px;
	padding: var(--15px);
	width: 300px;
	height: 250px;
	margin-bottom: 0 !important;
}
	.outlineItem img {
		height: 100px;
	}

/*----------------------------------------------------
 トップページ
----------------------------------------------------*/
/* mv */
.topPage .swiper-container {
  position: relative;
	width: 98%;
	max-width: 1260px;
	margin: 0 auto var(--30px);
	padding: var(--20px) 0;
}
.topPage .swiper {
	width: calc(100% - 60px);
}
.topPage .swiper .swiper-slide {
	border-radius: 15px;
	overflow: hidden;
}
.topPage .swiper-container .swiper-pagination {
	bottom: -10px;
}
	.topPage .swiper-container .swiper-pagination-bullet {
		background-color: var(--main-color);
	}
.topPage .swiper-container .swiper-button-prev,
.topPage .swiper-container .swiper-button-next {
	background-color: #000;
	opacity: 0.3;
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
	.topPage .swiper-container .swiper-button-prev {
		left: 0;
	}
	.topPage .swiper-container .swiper-button-next {
		right: 0;
	}
	.topPage .swiper-container .swiper-button-prev::after,
	.topPage .swiper-container .swiper-button-next::after {
		content: '';
		width: 14px;
		height: 14px;
		border: 0;
		border-top: solid 3px #FFF;
		border-right: solid 3px #FFF;
		position: absolute;
		top: 50%;
		margin-top: -7px;
	}
	.topPage .swiper-container .swiper-button-prev::after {
		left: 42%;
		transform: rotate(225deg);
	}
	.topPage .swiper-container .swiper-button-next::after {
		right: 42%;
		transform: rotate(45deg);
	}

/* 年末年始 */
.year-end-new a {
	max-width: 800px;
	width: 90%;
	margin: 0 auto var(--30px);
	border-radius: 10px;
	border: 1px solid var(--color-red);
	background-color: #FDEFF0;
	overflow: hidden;
	display: block;
	padding: var(--20px) 0;
	color: var(--text-color);
	font-size: var(--20px);
	font-weight: 700;
	display: flex;
	justify-content: center;
}
	.year-end-new a .title {
		color: var(--color-red);
		font-size: var(--20px);
		padding-left: var(--30px);
		padding-right: var(--50px);
		position: relative;
	}
		.year-end-new .title:before {
			content: url(../img/common/icon_exclamation_red.svg);
			width: 24px;
			height: 24px;
			position: absolute;
			top: 3px;
			left: 0;
		}
	.year-end-new a p {
		position: relative;
		padding-left: var(--20px);
	}
		.year-end-new a p:after {
			content: '';
			width: 8px;
			height: 8px;
			border: 0;
			border-top: solid 2px var(--text-color);
			border-right: solid 2px var(--text-color);
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -4px;
			transform: rotate(45deg);
		}

/* 供花・供物バナー */
.topPage .bnr_offering {
	width: 94%;
	max-width: 1200px;
	margin: var(--30px) auto;
}

/* イベントバナー */
.topPage .bnr_event {
	width: 94%;
	max-width: 1200px;
	margin: var(--30px) auto var(--50px);
}


/* アスカとは */
.topPage .about {
	padding: var(--50px);
	background: var(--bg-color-glay);
	text-align: center;
}
	.topPage .about .title {
		line-height: 1;
		display: flex;
		justify-content: center;
		align-items: baseline;
		font-size: 200%;
		margin-bottom: var(--50px);
	}
		.topPage .about .title span {
			line-height: 1;
			padding-right: var(--20px);
		}
		.topPage .about .title dl {
			display: flex;
			align-items: flex-end;
			justify-content: center;
		}
		.topPage .about .title .logo {
			width: 220px;
			display: inline;
			vertical-align: bottom;
		}
	.topPage .about .aboutBox {
		max-width: 700px;
		width: 100%;
		margin: 0 auto var(--55px);
		display: flex;
	}
		.topPage .about .aboutBox .medal {
			gap: 1;
			padding-right: var(--20px);
		}
		.topPage .about .aboutBox p {
			gap: 2;
			font-size: var(--16px);
			line-height: 2;
			text-align: left;
		}
	.topPage .about .cmTitle {
		max-width: 800px;
		width: 100%;
		background-color: var(--main-color);
		color: #FFF;
		font-size: var(--30px);
		text-align: center;
		margin: 0 auto;
	}
	.topPage .about iframe {
		max-width: 800px;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		margin-bottom: var(--30px);
	}

/* ご葬儀事例 */
.topPage .casestudy {
	padding: var(--60px) 0;
}
	.topPage .casestudy .casestudyTitle {
		text-align: center;
		font-size: var(--35px);
		color: var(--color-dark-green);
	}
	.topPage .casestudy .pattern {
		margin: var(--20px) auto 0;
		width: 320px;
	}
		.topPage .casestudy .pattern img {
			width: 100%;
			height: auto;
		}
	.topPage .casestudy .casestudySwiper {
		margin: var(--10px) auto 0;
		width: 98%;
		max-width: 1260px;
		position: relative;
	}
	.topPage .casestudy .casestudySwiper li {
		overflow: inherit;
		padding: var(--10px);
	}
		.topPage .casestudy .casestudySwiper li a {
			display: block;
			background-color: #FFF;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
		}
			.topPage .casestudy .casestudySwiper li .photo {
				height: 130px;
				overflow: hidden;
			}
				.topPage .casestudy .casestudySwiper li .photo img {
					object-fit: cover;
				}
			.topPage .casestudy .casestudySwiper li .inner {
				padding: var(--15px) var(--20px);
			}
				.topPage .casestudy .casestudySwiper li .inner .title {
					color: var(--text-color);
					line-height: 1.3;
					margin-bottom: var(--10px);
					height: var(--45px);
				}
				.topPage .casestudy .casestudySwiper li .inner .abr {
					color: var(--text-color);
					margin-bottom: var(--10px);
				}
				.topPage .casestudy .casestudySwiper li .inner dl {
					display: flex;
					align-items: center;
					gap: var(--10px);
				}
					.topPage .casestudy .casestudySwiper li .inner dl .type {
						border-radius: 5px;
						padding: var(--03px) var(--10px);
						color: #FFF;
					}
						.topPage .casestudy .casestudySwiper li .inner dl dt .type.kaso {
							background-color: #f0b22d;
						}
						.topPage .casestudy .casestudySwiper li .inner dl dt .type.kazoku {
							background-color: #ed75ab;
						}
						.topPage .casestudy .casestudySwiper li .inner dl dt .type.ichinichi {
							background-color: #49b0d9;
						}
						.topPage .casestudy .casestudySwiper li .inner dl dt .type.ippan {
							background-color: #756ec3;
						}
						.topPage .casestudy .casestudySwiper li .inner dl dt .type.jitaku {
							background-color: #6f9f43;
						}
					.topPage .casestudy .casestudySwiper li .inner dl dd .hiyo {
						border: 1px solid var(--color-glay);
						border-radius: 5px;
						padding: var(--03px) var(--10px);
						color: var(--text-color);
					}
	.topPage .casestudy .swiper-button-prev {
		left: -26px;
	}
	.topPage .casestudy .swiper-button-next {
		right: -26px;
	}

/* 1024px以下 */
@media screen and (max-width:1024px) {
	.topPage .casestudy .casestudySwiper li .inner dl {
		font-size: var(--12px);
	}
}

/* 葬儀式場を探す */
.topPage .hall {
	background-color: var(--bg-color-glay);
	background-image: url(../img/top/bg01.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: auto 30vw;
	padding-top: 120px;
	padding-bottom: 100px;
	padding-left: calc((100% - 500px)/2 );
}
.topPage .hall .hallBox {
	background: #FFF;
	border-radius: 20px;
	max-width: 800px;
	width: 90%;
	padding: var(--20px);
}
	.topPage .hall .hallBox .bgGlay {
		background: none;
	}
.topPage .hallTitle {
	padding: var(--15px);
	text-align: center;
}
	.topPage .hallTitle .title {
		height: 60px;
		line-height: 60px;
		padding-left: var(--60px);
		display: inline-block;
		font-size: var(--30px);
		text-align: center;
		color: var(--color-purple);
		background-image: url(../img/top/hall_title.png);
		background-repeat: no-repeat;
		background-position: center left;
		background-size: auto 60px;
	}
	.topPage .hallTitle .title {
		height: 60px;
		line-height: 60px;
		padding-left: var(--60px);
		display: inline-block;
		font-size: var(--30px);
		text-align: center;
		color: var(--color-purple);
		background-image: url(../img/top/hall_title.png);
		background-repeat: no-repeat;
		background-position: center left;
		background-size: auto 60px;
	}

/* 1024px以下 */
@media screen and (max-width:1024px) {
	.topPage .hall {
		background-size: 100% auto;
		background-position: top -220px center;
		padding-top: 120px;
		padding-bottom: 80px;
		padding-left: 0;
	}
	.topPage .hall .hallBox {
		margin: 0 auto;
	}
}

/* アスカのおすすめ */
.topPage .recommend {
	background-color: var(--bg-color-glay);
	background-image: url(../img/top/bg02.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: auto 30vw;
	padding-top: 120px;
	padding-bottom: 100px;
	padding-left: calc((100% - 1100px)/2 );
}
.topPage .recommend .recommendBox {
	background: #FFF;
	border-radius: 20px;
	max-width: 800px;
	width: 90%;
	padding: var(--30px) var(--50px);
}
.topPage .recommendList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.topPage .recommendList li {
		width: 30%;
		border-radius: 50%;
		overflow: hidden;
		background-color: var(--bg-color-glay);
		background-repeat: no-repeat;
		background-position: top -5px center;
		background-size: 100% auto;
		margin-top: var(--15px);
	}
		.topPage .recommendList li.item01 {
			background-image: url(../img/top/recommend_img01.jpg);
		}
		.topPage .recommendList li.item02 {
			background-image: url(../img/top/recommend_img02.jpg);
		}
		.topPage .recommendList li.item03 {
			background-image: url(../img/top/recommend_img03.jpg);
		}
		.topPage .recommendList li.item04 {
			background-image: url(../img/top/recommend_img04.png);
		}
		.topPage .recommendList li.item05 {
			background-image: url(../img/top/recommend_img05.png);
		}
		.topPage .recommendList li.item06 {
			background-image: url(../img/top/recommend_img06.jpg);
		}
	.topPage .recommendList li a {
		position: relative;
		padding-top: 100%;
		display: block;
	}
		.topPage .recommendList li a .sub {
			position: absolute;
			text-align: center;
			top: 51%;
			left: 0;
			right: 0;
			color: var(--text-color);
			font-size: var(--16px);
			letter-spacing: 0;
		}
		.topPage .recommendList li a .title {
			position: absolute;
			text-align: center;
			left: 0;
			right: 0;
			line-height: 1.1;
		}
			.topPage .recommendList li.item01 a .title {
				top: 64%;
				font-size: var(--26px);
				color: #522d05;
			}
				.topPage .recommendList li.item01 a .title span {
					font-size: 80%;
				}
			.topPage .recommendList li.item02 a .title {
				top: 64%;
				font-size: var(--22px);
				letter-spacing: 0;
				color: var(--main-color);
			}
			.topPage .recommendList li.item03 a .title {
				top: 64%;
				font-size: var(--20px);
				letter-spacing: 0;
				color: #036bad;
			}
			.topPage .recommendList li.item04 a .title {
				top: 55%;
				font-size: var(--20px);
				line-height: 1.2;
				letter-spacing: 0;
				color: #d6852d;
			}
			.topPage .recommendList li.item05 a .title {
				top: 64%;
				font-size: var(--22px);
				letter-spacing: 0;
				color: #1340a6;
			}
			.topPage .recommendList li.item06 a .title {
				top: 64%;
				font-size: var(--22px);
				letter-spacing: 0;
				color: #25a8ac;
			}

/* 1024px以下 */
@media screen and (max-width:1024px) {
	.topPage .recommend {
		background-size: 100% auto;
		background-position: top -70px center;
		padding-top: 120px;
		padding-bottom: 50px;
		padding-left: 0;
	}
	.topPage .recommend .recommendBox {
		margin: 0 auto;
		padding: var(--30px);
	}
}

/* よくある質問 */
.topPage .topFaqBg {
	padding: 0 !important;
	background: linear-gradient(0deg, rgba(255,255,255,1) 35%, rgba(236,236,236,1) 35%, rgba(236,236,236,1) 100%);
}
	.topPage .faq {
		width: 90%;
		max-width: 1100px;
		margin: 0 auto var(--50px);
	}
	.topPage .faq .sectionInner {
		padding: var(--40px);
	}
	.topPage .faq .faqList {
		margin-bottom: var(--30px);
	}


/* お知らせ＆イベント */
.topPage .topNews  {
	width: 100% !important;
	max-width: 100% !important;
	background: #FFF url(../img/top/bg03.jpg) !important;
	background-position: top center !important;
	background-size: 100% auto !important;
	background-repeat: no-repeat !important;
	padding-top: 150px;
	border-radius: 0 !important;
}
.topPage .topNews .inner  {
	background: #FFF;
	border-radius: 20px;
	max-width: 1200px;
	width: 94%;
	padding: var(--20px) var(--50px);
	margin: 0 auto;
	display: flex;
	gap: 50px;
}

	/* お知らせ */
	.topPage .topNews .newsBox  {
		width: 50%;
	}
	.topPage .topNews .newsBox .sectionTitle  {
		text-align: center;
		font-size: var(--30px);
		padding-bottom: var(--26px);
	}

	/* イベント */
	.topPage .topNews .eventBox  {
		width: 50%;
	}
	.topPage .topNews .eventBox .sectionTitle  {
		text-align: center;
		font-size: var(--30px);
		padding-bottom: var(--26px);
	}
		.topPage .topNews .eventBox .newsList li a .data {
			width: auto !important;
			margin-right: var(--10px);
		}

	/* トップページ用 */
	.topPage .newsList {
		margin-bottom: var(--30px);
	}
		.topPage .newsList dt {
			margin-bottom: var(--10px);
			display: flex;
		}
	/* topicsページ用 */
	.topics .newsList {
		padding: var(--30px) 50px;
	}
		.topics .newsList li:last-child {
			border-bottom: none !important;
		}
			/* 1024px以下 */
			@media screen and (max-width:1024px) {
				.topics .newsList {
					padding: var(--30px) var(--50px);
				}
			}

.newsList li {
	border-bottom: 1px solid var(--color-glay);
}
	.newsList li a {
		display: block;
		padding: var(--26px) 0;
		display: flex;
		color: var(--text-color);
	}
		.newsList li a .data {
			color: var(--main-color);
			width: 150px;
		}
		.newsList li a .new {
			display: inline;
			border: 1px solid var(--color-red);
			color: var(--color-red);
			font-size: var(--12px);
			padding: 2px var(--20px);
			vertical-align: middle;
			margin-left: var(--10px);
		}
		.newsList li a .category {
			display: inline-block;
			padding: var(--03px) var(--12px) 1px var(--12px);
			font-size: var(--12px);
			margin-right: var(--10px);
		}
			.newsList li a .category.news {
				color: var(--link-color);
				border: 1px solid var(--link-color);
			}
			.newsList li a .category.staff-letter {
				color: var(--main-color);
				border: 1px solid var(--main-color);
			}
			.newsList li a .category.chef {
				color: var(--color-red);
				border: 1px solid var(--color-red);
			}
			.newsList li a .category.flower {
				color: #E188A3;
				border: 1px solid #E188A3;
			}
			.newsList li a .category.venue {
				color: var(--main-color);
				border: 1px solid var(--main-color);
			}
			.newsList li a .category.event-report {
				color: var(--color-orange);
				border: 1px solid var(--color-orange);
			}
		.newsList li a .title span {
			text-decoration: none !important;
		}

	/* 1024px以下 */
	@media screen and (max-width:1024px) {
		.topPage .topNews .inner  {
			display: block;
		}
			/* お知らせ */
			.topPage .topNews .newsBox  {
				width: 100%;
				margin-bottom: var(--50px);
			}
			/* イベント */
			.topPage .topNews .eventBox  {
				width: 100%;
			}
	}

/* SOUセレモニーメンバーズ会員の皆様へ */
.topPage .souAttention {
	border-radius: 10px;
	border: 2px solid var(--color-red);
	background-color: #FFF;
	overflow: hidden;
	max-width: 800px;
	width: 90%;
	margin: 0 auto var(--50px);
}
	.topPage .souAttention .title {
		color: var(--color-red);
		text-align: center;
		font-size: var(--20px);
		padding: var(--15px) 0;
	}
		.topPage .souAttention .accordion__title::after {
			border-top: solid 3px #FFF;
			border-right: solid 3px #FFF;
		}
		.topPage .souAttention .accordion__title::before {
			content: '';
			width: 26px;
			height: 26px;
			background-color: var(--color-red);
			border-radius: 50%;
			position: absolute;
			top: 50%;
			right: 17px;
			margin-top: -11px;
		}
		.topPage .souAttention .title span {
			position: relative;
		}
			.topPage .souAttention .title span:before {
				content: url(../img/common/icon_exclamation_red.svg);
				width: 28px;
				height: 28px;
				position: absolute;
				top: calc(50% - 14px);
				left: -40px;
			}
	.topPage .souAttention dl {
	}
		.topPage .souAttention dl dt {
			font-weight: 700;
			margin-bottom: var(--05px);
			padding-left: var(--26px);
			position: relative;
		}
			.topPage .souAttention dl dt:before {
				content: url(../img/common/icon_checkbox.svg);
				width: 22px;
				height: 22px;
				position: absolute;
				top: 0;
				left: 0;
			}
		.topPage .souAttention dl dd {
			margin-bottom: var(--15px);
			padding-left: var(--26px);
		}
			.topPage .souAttention dl dd:last-child {
				margin-bottom: 0;
			}

/*----------------------------------------------------
 サイトマップ
----------------------------------------------------*/
.sitemapColumn {
	width: 94%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
}
	.sitemapColumn > .sectionBox {
		width: 47.5%;
	}

.sitemapList > li {
	margin-bottom: var(--05px);
}
	.sitemapList > li:last-child {
		margin-bottom: 0;
	}
	.sitemapList > li > a {
		display: block;
		position: relative;
		padding-left: var(--24px);
	}
		.sitemapList > li > a::before {
			content: '';
			width: 16px;
			height: 16px;
			background-color: var(--main-color);
			border-radius: 50%;
			position: absolute;
			top: 12px;
			left: 0;
			margin-top: -8px;
		}
		.sitemapList > li > a::after {
			content: '';
			width: 6px;
			height: 6px;
			border: 0;
			border-top: solid 2px #fff;
			border-right: solid 2px #fff;
			position: absolute;
			top: 12px;
			left: 4px;
			margin-top: -3px;
			transform: rotate(45deg);
		}
.sitemapList > li > ul {
	margin: var(--05px) 0 var(--10px) var(--20px);
}
.sitemapList > li > ul > li {
	margin-bottom: var(--05px);
}
	.sitemapList > li > ul > li a {
		display: block;
		position: relative;
		padding-left: var(--14px);
	}
	.sitemapList > li > ul > li a::after {
		content: '';
		width: 6px;
		height: 6px;
		border: 0;
		border-top: solid 2px var(--color-dark-glay);
		border-right: solid 2px var(--color-dark-glay);
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -3px;
		transform: rotate(45deg);
	}

.sitemapList.two {
	display: flex;
	flex-wrap: wrap;
}
	.sitemapList.two > li {
		width: 50%;
	}

/*----------------------------------------------------
 イベント
----------------------------------------------------*/
span.post-event-archive {
	padding-left: 0 !important;
}
span.post-event-archive::after {
	content:none !important;
}

.eventType {
	background-color: #FFF;
	color: var(--main-color);
	font-size: var(--14px);
	border-radius: 5px;
	padding: var(--03px) var(--05px);
	display: inline-block;
	line-height: 1;
	vertical-align: 25%;
}

.eventLocation {
	display: flex;
	align-items: center;
	background-color: var(--bg-color-yellow);
	font-size: var(--16px);
}
	.eventLocation dt {
		width: 50%;
	}
	.eventLocation dd {
		width: 50%;
		padding: var(--15px);
	}
		.eventLocation dd .title {
			font-weight: 700;
		}


.eventTable {
	width: 100%;
}
	.eventTable,.eventTable td,.eventTable th {
		border-collapse: collapse;
		border: 1px solid var(--color-glay);
		background-color: var(--bg-color-white);
		font-size: var(--16px);
	}
	.eventTable td,.eventTable th {
		padding: var(--10px) var(--15px);
	}
	.eventTable th {
		background-color: var(--bg-color-glay);
		vertical-align: top;
		width: 35%;
		text-align: left;
	}
	.eventTable td .icon {
		background-color: var(--main-color);
		color: #FFF;
		font-weight: 700;
		border-radius: 5px;
		padding: var(--03px) var(--10px);
		display: inline-block;
		margin-bottom: var(--05px);
	}
		.eventTable td .icon.off {
			background-color: var(--color-orange);
		}

.eventInfo {
	font-size: var(--16px);
}
	.eventInfo h2,
	.eventInfo h3 {
		border-bottom: 1px solid var(--color-glay);
		padding-bottom: var(--05px);
		margin-bottom: var(--10px);
		color: var(--color-purple);
		font-size: var(--22px);
	}
	.eventInfo h4 {
		margin-top: var(--20px);
		margin-bottom: var(--05px);
		color: var(--main-color);
		font-size: var(--18px);
	}
	.eventInfo ul {
	}
		.eventInfo ul > li {
			list-style: disc;
			margin-left: var(--20px);
		}
	.eventInfo ol {
	}
		.eventInfo ol > li {
			list-style: decimal;
			margin-left: var(--30px);
		}

.eventSubmitBtn {
	width: 100%;
	display: block;
	padding: 10px 0 10px 22px;
	font-size: var(--30px);
	font-weight: 700;
	color: #FFF;
	text-align: center;
	background-color: var(--color-red);
	box-shadow: 0px 3px 0px 0px #720902;
	border-radius: 15px;
	border: 2px solid #aa1308;
	cursor: pointer;
}

/*----------------------------------------------------
 葬儀の基礎知識
----------------------------------------------------*/
.knowledgePage .greenBgTitle a {
	color: #FFF;
}

.knowledgeList > li {
	margin-bottom: var(--05px);
}
	.knowledgeList > li:last-child {
		margin-bottom: 0;
	}
	.knowledgeList > li > a {
		display: block;
		position: relative;
		padding-left: var(--24px);
	}
		.knowledgeList > li > a::before {
			content: '';
			width: 16px;
			height: 16px;
			background-color: var(--main-color);
			border-radius: 50%;
			position: absolute;
			top: 12px;
			left: 0;
			margin-top: -8px;
		}
		.knowledgeList > li > a::after {
			content: '';
			width: 6px;
			height: 6px;
			border: 0;
			border-top: solid 2px #fff;
			border-right: solid 2px #fff;
			position: absolute;
			top: 12px;
			left: 4px;
			margin-top: -3px;
			transform: rotate(45deg);
		}

.knowledgeSingle .sectionInner h3 {
	padding-top: var(--10px);
	margin-bottom: var(--10px);
	font-size: var(--24px);
	color: var(--main-color);
}
.knowledgeSingle .sectionInner h4 {
	padding-top: var(--10px);
	margin-bottom: var(--10px);
	font-size: var(--20px);
	color: var(--color-purple);
	border-bottom: 1px solid var(--color-glay);
}
.knowledgeSingle .sectionInner h5 {
	padding-top: var(--10px);
	margin-bottom: var(--10px);
	font-size: var(--16px);
	color: #000;
}
.knowledgeSingle .sectionInner p {
	margin-bottom: var(--20px);
}
.knowledgeSingle .sectionInner figure {
	margin-bottom: var(--20px);
}
.knowledgeSingle .sectionInner ul {
	margin-bottom: var(--20px);
}
	.knowledgeSingle .sectionInner ul > li {
		list-style: disc;
		margin-left: var(--20px);
		margin-bottom: var(--10px);
	}
.knowledgeSingle .sectionInner ol {
	margin-bottom: var(--20px);
}
	.knowledgeSingle .sectionInner ol > li {
		list-style: decimal;
		margin-left: var(--30px);
		margin-bottom: var(--10px);
	}
.knowledgeSingle .sectionInner .nomalTable {
}
	.knowledgeSingle .sectionInner .nomalTable th {
		text-align: center;
	}
	.knowledgeSingle .sectionInner .nomalTable td {
		vertical-align: top;
	}
	.knowledgeSingle .sectionInner .nomalTable .w10 {
		width: 10% !important;
	}


/*----------------------------------------------------
 ご葬儀事例
----------------------------------------------------*/
.casestudyPage .casestudyList {
	display: flex;
	gap: var(--30px);
	flex-wrap: wrap;
}
	.casestudyPage .casestudyList li {
		width: calc(50% - 15px);
	}
		.casestudyPage .casestudyList li a {
			display: block;
			background-color: #FFF;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
		}
			.casestudyPage .casestudyList li .photo {
				height: 150px;
				overflow: hidden;
			}
				.casestudyPage .casestudyList li .photo img {
					margin-top: -50px;
					object-fit: cover;
				}
			.casestudyPage .casestudyList li .inner {
				padding: var(--15px) var(--20px);
			}
				.casestudyPage .casestudyList li .inner .title {
					color: var(--text-color);
				}
				.casestudyPage .casestudyList li .inner .abr {
					color: var(--text-color);
					margin-bottom: var(--10px);
				}
				.casestudyPage .casestudyList li .inner dl {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.casestudyPage .casestudyList li .inner dl dt {
					display: flex;
					gap: var(--10px);
					font-size: var(--14px);
				}
					.casestudyPage .casestudyList li .inner dl dt .type {
						border-radius: 5px;
						padding: var(--03px) var(--10px);
						color: #FFF;
					}
						.casestudyPage .casestudyList li .inner dl dt .type.kaso {
							background-color: #f0b22d;
						}
						.casestudyPage .casestudyList li .inner dl dt .type.kazoku {
							background-color: #ed75ab;
						}
						.casestudyPage .casestudyList li .inner dl dt .type.ichinichi {
							background-color: #49b0d9;
						}
						.casestudyPage .casestudyList li .inner dl dt .type.ippan {
							background-color: #756ec3;
						}
						.casestudyPage .casestudyList li .inner dl dt .type.jitaku {
							background-color: #6f9f43;
						}
					.casestudyPage .casestudyList li .inner dl dt .hiyo {
						border: 1px solid var(--color-glay);
						border-radius: 5px;
						padding: var(--03px) var(--10px);
						color: var(--text-color);
					}

.casestudyPage .bgBox {
	background-color: #FFF;
	padding: var(--40px);
	box-shadow: 2px 5px 10px 5px rgba(0, 0, 0, 0.15);
}
.casestudyPage .bgBox .decorative {
	text-align: center;
	font-size: var(--16px);
	color: #a08692;
}
.casestudyPage .bgBox .mainTitle {
	text-align: center;
	font-size: var(--35px);
	margin-bottom: var(--15px);
}
.casestudyPage .bgBox .mainPhoto {
	margin: 0 auto var(--40px);
	width: 90%;
	border: 7px solid #FFF;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.casestudyPage .bgBox .info {
	display: flex;
	gap: var(--30px);
	margin-bottom: var(--60px);
}
	.casestudyPage .bgBox .info table,
	.casestudyPage .bgBox .info .option {
		flex: 1;
	}
		.casestudyPage .bgBox .info table th {
			width: 45% !important;
			background-color: var(--bg-color-yellow)
		}
		.casestudyPage .bgBox .info .option ul {
			display: flex;
			gap: var(--10px);
			flex-wrap: wrap;
		}
			.casestudyPage .bgBox .info .option li {
				width: calc(50% - 5px);
				background-color: var(--main-color);
				color: #FFF;
				text-align: center;
				padding: var(--03px) 0;
				border-radius: 50px;
			}
.casestudyPage .bgBox .paragraph {
	margin-bottom: var(--60px);
}
	.casestudyPage .bgBox .paragraph .subTitle {
		font-size: var(--26px);
		margin-bottom: var(--20px);
		padding: 20px 0 5px 80px;
	}
		.casestudyPage .bgBox .paragraph .subTitle.kaso {
			background: url(../img/casestudy/pattern_title_orange.svg) no-repeat bottom left;
			background-size: auto 46px;
		}
		.casestudyPage .bgBox .paragraph .subTitle.kazoku {
			background: url(../img/casestudy/pattern_title_pink.svg) no-repeat bottom left;
			background-size: auto 46px;
		}
		.casestudyPage .bgBox .paragraph .subTitle.ichinichi {
			background: url(../img/casestudy/pattern_title_blue.svg) no-repeat bottom left;
			background-size: auto 46px;
		}
		.casestudyPage .bgBox .paragraph .subTitle.ippan {
			background: url(../img/casestudy/pattern_title_purple.svg) no-repeat bottom left;
			background-size: auto 46px;
		}
		.casestudyPage .bgBox .paragraph .subTitle.jitaku {
			background: url(../img/casestudy/pattern_title_yellow.svg) no-repeat bottom left;
			background-size: auto 42px;
		}
		.casestudyPage .bgBox .paragraph .subPhoto {
			border: 5px solid #FFF;
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
			width: 60%;
			margin: var(--30px) auto 0;
		}
		.casestudyPage .bgBox .paragraph .text {
			font-size: var(--18px);
		}
.casestudyPage .bgBox .att {
	font-size: var(--14px);
	margin-bottom: -60px;
	width: 80%;
}

.casestudyPage .bgBox .patternTop {
	margin: 0 auto var(--30px);
	width: 40%;
}
.casestudyPage .bgBox .patternBottom {
	margin: 0 auto;
	width: 100%;
}
	.casestudyPage .bgBox .patternBottom img {
		width: 100%;
	}


/*----------------------------------------------------
 アーカイブ
----------------------------------------------------*/
.archiveList {
	max-width: 1200px;
	margin: 0 auto var(--40px);
	display: flex;
	flex-wrap: wrap;
	gap: var(--40px);
}
.archiveList li {
	width: calc(50% - 20px);
}
	.archiveList li a {
		color: var(--text-color);
	}
		.archiveList li .title {
			padding: var(--10px) var(--15px);
			background-color: var(--main-color);
			color: #FFF;
			font-size: var(--18px);
		}
		.archiveList li .inner {
			padding: var(--20px);
		}
			.archiveList li .inner dl {
				display: flex;
				column-gap: var(--20px);
			}
				.archiveList li .inner dt {
					flex: 2;
				}
					.archiveList li .inner dt img {
						width: 100%;
						aspect-ratio: 1 / 1;
						object-fit: cover;
					}
					.archiveList li .inner dt.staff img {
						margin-bottom: var(--08px);
						width: 100%;
						aspect-ratio: 1 / 1;
						border-radius: 50%;
						object-fit: cover;
					}
					.archiveList li .inner dt.staff figcaption {
						text-align: center;
						font-size: var(--12px);
						line-height: 1.2;
					}
				.archiveList li .inner dd {
					flex: 5;
				}
				.archiveList li .inner .data {
					color: var(--color-dark-glay);
					font-size: var(--14px);
					margin-bottom: var(--05px);
				}
					.archiveList li .inner .data .new {
						display: inline;
						color: var(--color-red);
						font-size: var(--10px);
						padding: 2px var(--10px);
						vertical-align: middle;
						font-size: var(--10px);
						border: 1px solid var(--color-red);
					}
				.archiveList li .inner .abr {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					margin-bottom: var(--08px);
				}
				.archiveList li .inner .txtLink {
					color: var(--link-color);
				}

/* 1024px以下 */
@media screen and (max-width:1024px) {
	.archiveList {
		width: 98%;
		margin: 0 auto var(--20px);
		gap: var(--20px);
	}
	.archiveList li {
		width: calc(50% - 10px);
	}
}


/*----------------------------------------------------
 single
----------------------------------------------------*/

.singlePage .sectionInner h3 {
	color: var(--main-color);
	margin-bottom: var(--10px);
}
.singlePage .sectionInner h4 {
	margin-bottom: var(--05px);
}
.singlePage .sectionInner p {
	margin-bottom: var(--30px);
}
	.singlePage .sectionInner p:last-child {
		margin-bottom: 0;
	}
.singlePage .sectionInner .data {
	margin-bottom: var(--10px);
	font-size: var(--14px);
	color: var(--color-dark-glay);
	text-align: right;
}
.singlePage .sectionInner figure {
	margin-bottom: var(--50px);
}
	.singlePage .sectionInner figure img {
		width: 100%;
		height: auto;
		border: 5px solid #FFF;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
	}
	.singlePage .sectionInner figure.no-shadow img {
		box-shadow: none !important;
	}
	.singlePage .sectionInner .wp-block-image:nth-of-type(odd) {
		float: left;
		margin-right: var(--50px);
	}
	.singlePage .sectionInner .wp-block-image:nth-of-type(even) {
		float: right;
		margin-left: var(--50px);
	}

/* おすすめ記事 */
.singlePage .sideColumn {
	padding: var(--30px);
}
	.singlePage .sideColumn .singleRecommend {
		border-top: 1px solid var(--color-glay);
	}
	.singlePage .sideColumn .singleRecommend li {
		border-bottom: 1px solid var(--color-glay);
	}
		.singlePage .sideColumn .singleRecommend li a {
			display: block;
			overflow: hidden;
			padding: var(--15px) 0;
			color: var(--text-color);
			font-size: var(--14px);
		}
		.singlePage .sideColumn .singleRecommend li figure {
			width: 100%;
			height: 100px;
			overflow: hidden;
			display: flex;
			align-items: center;
			margin-bottom: var(--10px);
		}
			.singlePage .sideColumn .singleRecommend li figure img {
				width: 100%;
				height: auto;
			}
			.singlePage .sideColumn .singleRecommend li figure.staffPhoto {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				overflow: hidden;
				float: left;
				margin-right: var(--15px);
				margin-top: var(--05px);
			}
				.singlePage .sideColumn .singleRecommend li figure.staffPhoto img {
					width: 100%;
					height: auto;
				}
		.singlePage .sideColumn .singleRecommend li .data {
			color: var(--color-dark-glay);
		}

		/* 1024px以下非表示 */
		@media screen and (max-width:1024px) {
			.sideColumn {
				display: none;
			}
		}

	/* 今月のスタッフだより */
	.staffSinglePhoto {
		margin-right: 0 !important;
		margin-bottom: var(--15px);
		float: none !important;
	}
		.staffSinglePhoto img {
			margin: 0 auto;
			margin-bottom: var(--08px);
			width: 40% !important;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			object-fit: cover;
			border: none !important;
		}
		.staffSinglePhoto figcaption {
			text-align: center;
			font-weight: 700;
		}

/*----------------------------------------------------
 ページナビ
----------------------------------------------------*/
.wp-pagenavi {
	display: flex;
	justify-content: center;
}
	.wp-pagenavi span,
	.wp-pagenavi a {
		display: block;
		height: 40px;
		text-align: center;
		line-height: 40px;
	}
		.wp-pagenavi .current {
			border-radius: 50%;
			width: 40px;
			background-color: var(--main-color);
			border: none;
			color: #FFF;
			padding: 0;
		}
		.wp-pagenavi .page {
			border-radius: 50%;
			width: 40px;
			background-color: #FFF;
			border: 1px solid var(--color-glay);
			color: var(--text-color);
			padding: 0;
		}
		.wp-pagenavi .first,
		.wp-pagenavi .last,
		.wp-pagenavi .previouspostslink,
		.wp-pagenavi .nextpostslink {
			border-radius: 20px;
			background-color: #FFF;
			border: 1px solid var(--color-glay);
			color: var(--text-color);
			padding: 0 var(--10px);
			font-size: var(--14px);
		}

.singlePagenavi {
	clear: both;
	display: flex;
	justify-content: space-between;
}
	.singlePagenavi a {
		display: block;
		border: 1px solid var(--color-glay);
		padding: var(--05px) var(--16px);
		border-radius: 30px;
		position: relative;
	}
		.singlePagenavi .prev a {
			padding-left: var(--30px);
		}
			.singlePagenavi .prev a::after {
				content: '';
				width: 8px;
				height: 8px;
				border: 0;
				border-top: solid 2px var(--main-color);
				border-right: solid 2px var(--main-color);
				position: absolute;
				top: 50%;
				left: 14px;
				margin-top: -4px;
				transform: rotate(225deg);
			}
		.singlePagenavi .next a {
			padding-right: var(--30px);
		}
			.singlePagenavi .next a::after {
				content: '';
				width: 8px;
				height: 8px;
				border: 0;
				border-top: solid 2px var(--main-color);
				border-right: solid 2px var(--main-color);
				position: absolute;
				top: 50%;
				right: 14px;
				margin-top: -4px;
				transform: rotate(45deg);
			}