/*
 * お急ぎの方へ専用CSS(page-templates/template-urgency.php = /urgency/)
 * 値は旧サイト https://family-hall.com/urgency/ の computed style を PC1440 / SP390 で実測したもの。
 * プランカード・CTA バナー・FAQ・末尾 CTA・末尾 h1 は home.css / site.css を共用する。
 */

.ns-urg {
	overflow-x: clip;
}

/* ------------------------------------------------------------------
 * ファーストビュー(ご危篤・ご逝去でお急ぎの方へ)
 * ------------------------------------------------------------------ */

.ns-urg__fv {
	position: relative;
	background: #f8f7f4;
	overflow: hidden;
}

.ns-urg__fvinner {
	position: relative;
	width: min(1300px, 100%);
	margin-inline: auto;
	padding: 70px 15px 100px;
	background-image: url(../../img/urgency/urgency_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.ns-urg__fvwrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ns-urg__fvttl {
	width: 100%;
	margin-bottom: 20px;
	font-family: var(--fh-sans);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.4;
	color: #333333;
	text-align: center;
}

.ns-urg__fvaccent {
	font-size: 60px;
	color: var(--fh-red);
}

.ns-urg__badge {
	width: fit-content;
	max-width: 640px;
	margin: 30px auto 0;
	padding: 5px 100px;
	background: #f5474f;
	border-radius: 720px;
	color: #ffffff;
	font-size: 50px;
	font-weight: 700;
	line-height: 85px;
	text-align: center;
}

/* 2 エリアの電話(PC。ファーストビューへ 80px 重ねる) */

.ns-urg__telwrap {
	position: relative;
	z-index: 100;
	width: min(1300px, 100% - 40px);
	margin: -80px auto 0;
	padding: 15px 10px 10px;
	border-radius: 5px;
}

.ns-urg .ns-urg__tellist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.ns-urg__tellist > li {
	width: 620px;
	max-width: 100%;
}

.ns-urg__telbox {
	height: 100%;
	background: #ffffff;
	border: 3px solid var(--ns-area);
	border-radius: 20px;
}

.ns-urg__telbox > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px;
	color: #333333;
	text-decoration: none;
}

.ns-urg__telarea {
	font-size: 60px;
	font-weight: 700;
	line-height: 1;
}

.ns-urg__telnum {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 20px;
	padding: 7px 0;
	background: var(--ns-area);
	color: #ffffff;
	font-size: 70px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.ns-urg__telnum .ns-ico-tel2 {
	flex: 0 0 auto;
}

/* SP の 2 エリア電話ボタン */

.ns-urg .ns-urg__sptels {
	margin: 30px 0 15px;
}

.ns-urg__sptels > li {
	margin-bottom: 15px;
}

.ns-urg__sptel {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: var(--ns-area);
	border-radius: 6px;
	box-shadow: 3px 3px 0 var(--ns-area-shadow);
	color: #ffffff;
	text-decoration: none;
}

.ns-urg__sptelico {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #ffffff;
	border-radius: 8px;
	color: var(--ns-area);
}

.ns-urg__sptelbody {
	flex: 1 1 auto;
	text-align: center;
}

.ns-urg__sptelarea {
	display: block;
	font-size: 16px;
	line-height: 1.2;
}

.ns-urg__sptelnum {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

.ns-urg__sptelmini {
	font-size: 20px;
}

.ns-urg__sptelarrow {
	flex: 0 0 auto;
	color: #ffffff;
	line-height: 0;
}

.ns-urg__sptelarrow .ns-ico-circle circle {
	fill: #ffffff;
}

.ns-urg__sptelarrow .ns-ico-circle path {
	stroke: var(--ns-area);
}

.ns-urg .ns-urg__points {
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 30px;
}

.ns-urg__points > li {
	width: calc(50% - 5px);
	padding: 5px 0;
	background: #f5e615;
	box-shadow: 3px 3px 0 #131313;
	color: #da2828;
	font-weight: 700;
	text-align: center;
}

/* ------------------------------------------------------------------
 * ご危篤からご葬儀までの流れ
 * ------------------------------------------------------------------ */

.ns-urg__flow {
	padding: 30px 0 50px;
}

.ns-urg .ns-urg__steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	margin-bottom: 60px;
}

.ns-urg__step {
	position: relative;
	flex: 0 0 auto;
	width: 161px;
	padding: 15px;
	border: 1px solid var(--fh-line);
	border-radius: 10px;
	color: var(--fh-navy);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
}

.ns-urg__steptxt {
	display: block;
	letter-spacing: 0;
}

.ns-urg__stepimg {
	margin-top: 10px;
	background: #f8f8fb;
	border-radius: 10px;
}

.ns-urg__stepimg img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.ns-urg__step .ns-tri--right {
	position: absolute;
	top: 50%;
	right: -26px;
	z-index: 2;
	transform: translateY(-50%);
	color: var(--fh-navy);
}

/* ご相談 3 パターン */

.ns-urg .ns-urg__cases {
	display: flex;
	justify-content: space-between;
	margin: 90px 0 40px;
}

.ns-urg__case {
	display: flex;
	flex-direction: column;
	width: 32.5%;
}

.ns-urg__casebox {
	position: relative;
	flex: 1 1 auto;
	padding: 45px 25px 25px;
	border: 1px solid var(--fh-navy);
	border-radius: 10px;
}

.ns-urg__casettl {
	position: absolute;
	top: -20px;
	right: 0;
	left: 0;
	width: fit-content;
	margin-inline: auto;
	padding: 4px 15px;
	background: var(--fh-navy);
	border-radius: 5px;
	color: #ffffff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	white-space: nowrap;
}

.ns-urg__casebig {
	font-size: 22px;
}

.ns-urg__caselead {
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}

.ns-urg__caseimg {
	margin-bottom: 15px;
}

.ns-urg__caseimg img {
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}

.ns-urg__casetxt {
	line-height: 1.7;
}

.ns-urg__casebox .ns-tri--down {
	position: absolute;
	right: 0;
	bottom: -20px;
	left: 0;
	margin-inline: auto;
	color: var(--fh-navy);
}

.ns-urg .ns-urg__bottoms {
	display: flex;
	justify-content: space-between;
}

.ns-urg__bottoms > li {
	width: 32.5%;
	padding: 15px 10px;
	background: #f4f4df;
	border-radius: 5px;
	line-height: 1.7;
}

.ns-urg__casebottom {
	padding: 15px;
	background: #f4f4df;
	border-radius: 5px;
	line-height: 1.7;
}

/* ------------------------------------------------------------------
 * CTA バナーの上のひとこと(両端に斜線)
 * ------------------------------------------------------------------ */

.ns-urg__banner {
	position: relative;
	padding: 40px 0;
}

.ns-urg__bnrcatch {
	position: relative;
	margin-bottom: 20px;
	font-family: var(--fh-sans);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.ns-urg__bnrwrap {
	position: relative;
}

.ns-urg__bnrslash {
	position: absolute;
	top: -3px;
	left: -39px;
	width: 4px;
	height: 40px;
	background: var(--fh-navy);
	transform: rotate(-40deg);
}

.ns-urg__bnrslash--r {
	right: -39px;
	left: auto;
	transform: rotate(40deg);
}

/* ------------------------------------------------------------------
 * お近くの式場をお探しの方へ
 * ------------------------------------------------------------------ */

.ns-urg__halls {
	position: relative;
	padding: 30px 0 0;
	background: url(../../img/common/bg01.png);
	overflow: hidden;
}

.ns-urg .ns-urg__hallcards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin-bottom: 60px;
}

.ns-urg__hallcard {
	width: 295px;
	padding: 15px;
	background: #ffffff;
	border: 1px solid var(--fh-line);
	border-radius: 10px;
	box-shadow: 0 5px 5px var(--fh-line);
}

.ns-urg__hallcard > a {
	display: block;
	color: #333333;
	text-decoration: none;
}

.ns-urg__hallimg img {
	width: 100%;
	height: 175px;
	object-fit: cover;
	border-radius: 5px;
}

/* 旧 .hall_title は写真の下 10px(PC・SP とも) */
.ns-urg__hallbody {
	position: relative;
	margin-top: 10px;
}

.ns-urg__hallname {
	font-family: var(--fh-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.7;
	color: #333333;
	text-align: left;
}

.ns-urg__halladdr {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.ns-urg__hallarrow {
	position: absolute;
	top: 50%;
	right: 0;
	color: #f80b0b;
	line-height: 0;
	transform: translateY(-50%);
}

/* ------------------------------------------------------------------
 * よくあるご質問
 * ------------------------------------------------------------------ */

.ns-urg__faq {
	padding: 25px 0 0;
}

.ns-urg__faq .ns-faq__a {
	padding: 20px;
}

.ns-urg__faq .ns-faq__mark--a {
	top: 15px;
	left: 150px;
}

.ns-urg__faqbody {
	display: flex;
	gap: 70px;
}

.ns-urg__faqico {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	background: #f8f8fb;
	border-radius: 100px;
}

.ns-urg__faqtxt {
	flex: 1 1 0;
	min-width: 0;
}

.ns-urg__telbnr {
	margin-top: 35px;
	padding-bottom: 30px;
	text-align: center;
}

.ns-urg__telbnr button {
	display: block;
	width: 100%;
	padding: 0;
}

.ns-urg__telbnr img {
	margin-inline: auto;
}

/* ------------------------------------------------------------------
 * 24時間365日のご案内(締め)
 * ------------------------------------------------------------------ */

.ns-urg__closing {
	position: relative;
	overflow: hidden;
}

.ns-urg__closingband {
	background: #fbf6f9;
}

.ns-urg__closingttl {
	padding: 35px 0;
	font-family: var(--fh-sans);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.4;
	color: #333333;
	text-align: center;
}

/* 旧の数字は Oswald で、行の高さは親から継承した 1.4(35px なら 49px) */
.ns-urg__closingnum {
	font-family: var(--fh-num);
	font-size: 35px;
	color: var(--fh-red);
}

/* 旧の「ファミリーホール」は PC 38px/53.2px・SP 20px/28px */
.ns-urg__closingred {
	font-size: 38px;
	color: var(--fh-red);
}

.ns-urg__closing > .ns-tri--down {
	display: block;
	margin: 0 auto 30px;
	color: #fbf6f9;
}

.ns-urg__closinglead {
	position: relative;
	font-family: var(--fh-sans);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.ns-urg .ns-urg__notes {
	max-width: 840px;
	margin: 20px auto 30px;
	padding: 10px 20px 20px;
	background: rgba(247, 247, 240, 0.5);
}

.ns-urg__notes > li {
	position: relative;
	padding: 20px 0 20px 60px;
	border-bottom: 1px dashed #cccccc;
	font-weight: 500;
	line-height: 1.7;
}

.ns-urg__notes .ns-ico-memo {
	position: absolute;
	top: 50%;
	left: 17px;
	color: var(--fh-red);
	transform: translateY(-50%);
}

/* ------------------------------------------------------------------
 * SP(767px 以下)
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.ns-urg .ns-inner {
		width: min(1300px, 100% - 30px);
	}

	/* PC 専用 / SP 専用の出し分け(.ns-pc / .ns-sp より詳細度が高い指定を打ち消す) */

	.ns-urg .ns-urg__points {
		display: flex;
	}

	.ns-urg .ns-urg__bottoms,
	.ns-urg .ns-urg__faqico {
		display: none;
	}

	.ns-urg__fvinner {
		padding: 30px 15px 0;
		background-image: none;
	}

	.ns-urg__fvwrap {
		align-items: stretch;
		gap: 20px;
		padding: 10px 0 30px;
	}

	.ns-urg__fvttl {
		margin-bottom: 20px;
		font-size: 28px;
		line-height: 1.2;
		text-align: left;
	}

	.ns-urg__fvaccent {
		font-size: 46px;
	}

	.ns-urg__flow {
		padding: 25px 0 30px;
	}

	.ns-urg .ns-urg__steps {
		flex-wrap: wrap;
		gap: 5px;
		margin-bottom: 60px;
	}

	.ns-urg__step {
		width: 115px;
		padding: 15px 5px;
		font-size: 13px;
	}

	.ns-urg__step .ns-tri--right {
		right: -11px;
		width: 10px;
		height: 17px;
	}

	.ns-urg .ns-urg__casetabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 5px;
	}

	.ns-urg__casetabs > li {
		width: 32%;
	}

	.ns-urg__casetab {
		display: block;
		width: 100%;
		padding: 5px 2px;
		background: #ffffff;
		border: 1px solid var(--fh-navy);
		border-radius: 7px;
		color: var(--fh-navy);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.7;
		text-align: center;
	}

	.ns-urg__casetab.is-current {
		background: var(--fh-navy);
		color: #ffffff;
	}

	.ns-urg .ns-urg__cases {
		display: block;
		margin: 40px 0 0;
	}

	/* .ns-sp は SP で display:inline になるので、箱として置く部品は block に戻す
	   (旧 .tel_sp と .hurry_flow_details__bottom はどちらも block) */
	.ns-urg .ns-urg__sptels,
	.ns-urg__casebottom {
		display: block;
	}

	.ns-urg__case {
		display: none;
	}

	.ns-urg__case.is-current {
		display: block;
	}

	.ns-urg__case {
		width: 100%;
	}

	.ns-urg__casebox {
		margin-bottom: 40px;
		padding: 35px 15px 15px;
	}

	.ns-urg__casebox .ns-tri--down {
		bottom: -25px;
	}

	.ns-urg__caselead {
		font-size: 17px;
	}

	.ns-urg__banner {
		padding: 20px 0;
	}

	.ns-urg__bnrcatch {
		margin-bottom: 10px;
		font-size: 20px;
	}

	.ns-urg__bnrwrap {
		display: block;
		font-size: 15px;
		line-height: 1.4;
	}

	.ns-urg__bnrslash {
		top: 50%;
		left: 25px;
		height: 34px;
		margin-top: -17px;
	}

	.ns-urg__bnrslash--r {
		right: 25px;
		left: auto;
	}

	.ns-urg .ns-urg__hallcards {
		justify-content: space-between;
		gap: 5px;
	}

	.ns-urg__hallcard {
		width: 100%;
	}

	.ns-urg__hallimg img {
		height: 219px;
	}

	.ns-urg__faq {
		padding: 15px 0;
	}

	.ns-urg__faq .ns-faq__a {
		padding: 20px 20px 20px 80px;
	}

	.ns-urg__faq .ns-faq__mark--a {
		left: 20px;
	}

	.ns-urg__closingttl {
		padding: 20px 0;
		font-size: 16px;
	}

	.ns-urg__closingnum {
		font-size: 25px;
	}

	.ns-urg__closingred {
		font-size: 20px;
	}

	.ns-urg__closing > .ns-tri--down {
		width: 120px;
		height: 35px;
		margin-bottom: 20px;
	}

	.ns-urg__closinglead {
		font-size: 16px;
	}

	.ns-urg .ns-urg__notes {
		margin: 20px 0 30px;
	}

	.ns-urg__notes > li {
		padding: 20px 0 20px 60px;
	}
}

@media (max-width: 767px) {
	/* 旧 .column_hurry_tel は SP では下に 30px の内側余白 */
	.ns-urg__closing {
		padding-bottom: 30px;
	}

	/* SP の旧 .banner_box は画像だけ(91.9)で下余白なし */
	.ns-urg__telbnr {
		padding-bottom: 0;
	}

	/* 旧 .hall_area_wrap は下 30px */
	.ns-urg .ns-urg__hallcards {
		margin-bottom: 30px;
	}
}

@media (max-width: 767px) {
}