/*
 * 必ずお読みくださいページ専用CSS(page-templates/template-reason.php = /reason/)
 * 旧サイト https://family-hall.com/reason/ はこのページの本文をスマートフォンにだけ出しているので、
 * 768px 以上では本文を出さない(パンくずと末尾の h1 だけが残る)。
 * 値は SP390 の computed style を実測したもの。
 */

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

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

/* 旧サイトと同じくスマートフォン専用ページにする */
@media (min-width: 768px) {

	.ns-rea__body {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * 他の葬儀社をご検討中のお客様へ
 * ------------------------------------------------------------------ */

.ns-rea__first {
	padding-bottom: 30px;
}

.ns-rea__blue {
	color: var(--fh-navy);
}

.ns-rea__illust {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
}

.ns-rea__illustimg {
	width: 36%;
	text-align: center;
}

.ns-rea__illustimg img {
	max-width: 90%;
	height: auto;
	margin-inline: auto;
}

.ns-rea__bubble {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	margin-left: 13px;
	padding: 15px 22px;
	background: #e9eaff;
	border-radius: 6px;
	color: var(--fh-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.ns-rea__firsttxt {
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.7;
}

/* ------------------------------------------------------------------
 * 注意すべき 4 つのポイント
 * ------------------------------------------------------------------ */

.ns-rea__point4 {
	padding-bottom: 30px;
}

.ns-rea__ttl1,
.ns-rea__ttl2 {
	position: relative;
	margin-bottom: 30px;
	font-family: var(--fh-sans);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: #333333;
	text-align: center;
}

.ns-rea__ttl1 {
	padding-top: 70px;
	background: url(../../img/reason/h2_icon.png) no-repeat 50% 0 / 60px 60px;
}

.ns-rea__marker {
	background-image: linear-gradient(transparent 50%, #f6f908 50%);
}

.ns-rea__num {
	color: var(--fh-red);
	font-family: var(--fh-num);
	font-size: 36px;
	font-weight: 700;
}

.ns-rea__p4box {
	margin-bottom: 30px;
	padding: 15px;
	background: #e9eaff;
}

.ns-rea__p4item {
	margin-bottom: 10px;
}

.ns-rea__p4item:last-child {
	margin-bottom: 0;
}

.ns-rea__p4q {
	position: relative;
	display: block;
	letter-spacing: 0.8px;
	width: 100%;
	padding: 15px 50px 15px 15px;
	background: var(--fh-navy);
	border: 1px solid var(--fh-navy);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
	text-align: left;
}

.ns-rea__p4label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 0 14px;
	background: #ffffff;
	border-radius: 195px;
	color: var(--fh-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
}

/* 旧サイトは見出しの span だけ 18px/1.2(外側の p は 14px) */
.ns-rea__p4txt {
	display: block;
	font-size: 18px;
	line-height: 1.2;
}

.ns-rea__strong {
	color: #f6f908;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
}

.ns-rea__p4plus {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	line-height: 0;
}

.ns-rea__p4q.is-open .ns-rea__p4plus-v {
	display: none;
}

.ns-rea__p4a {
	padding: 15px;
	background: #ffffff;
	border-right: 1px solid var(--fh-navy);
	border-bottom: 1px solid var(--fh-navy);
	border-left: 1px solid var(--fh-navy);
	border-radius: 0 0 5px 5px;
	font-weight: 500;
	line-height: 1.7;
}

.ns-rea__downarrow {
	margin: 30px 0;
	text-align: center;
}

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

.ns-rea__lastmsg {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.ns-rea__lastmsg span {
	color: var(--fh-red);
}

/* ------------------------------------------------------------------
 * 地域で選ばれる 6 つの安心
 * ------------------------------------------------------------------ */

.ns-rea__point6 {
	padding: 80px 0 30px;
	background: #f3f6f3 url(../../img/reason/bg_arrow.png) no-repeat 50% 0;
}

.ns-rea__ttl2 {
	margin: 20px 0 30px;
	line-height: 1;
}

.ns-rea__p6box {
	margin-bottom: 30px;
	background: #ffffff;
	border: 1px solid #35a89c;
	box-shadow: 0 1px 6px #aaaaaa;
}

/* 旧は 6 枚目だけ下余白が 0(付けるとリストの外へ出てセクションの下端に足される) */
.ns-rea__p6list .ns-rea__p6box:last-child {
	margin-bottom: 0;
}

.ns-rea__p6inner {
	padding: 20px;
	text-align: center;
}

.ns-rea__p6label {
	display: inline-block;
	padding: 2px 20px;
	background: #35a89c;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}

.ns-rea__p6ttl {
	margin: 20px 0;
	color: var(--fh-navy);
	font-family: var(--fh-sans);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.ns-rea__p6inner img {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.ns-rea__p6txt {
	line-height: 1.4;
	text-align: left;
}

/* ------------------------------------------------------------------
 * CTA バナー(ページ内に 2 回出る)
 * ------------------------------------------------------------------ */

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

.ns-rea__ctacatch {
	margin-bottom: 10px;
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.ns-rea__ctacatch--club {
	margin-top: 30px;
	font-size: 20px;
}

.ns-rea__ctacatch--club .ns-rea__marker {
	font-size: 24px;
	line-height: 1.4;
}

.ns-rea .ns-rea__bnrs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.ns-rea__bnrs li {
	width: 100%;
	padding: 5px 0;
	text-align: center;
}

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

.ns-rea__bnrs img {
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------
 * お客様の声・よくある質問
 * ------------------------------------------------------------------ */

.ns-rea__voices {
	padding: 50px 0;
}

.ns-rea__faq {
	padding: 15px 0 30px;
}

.ns-rea__link {
	display: inline-block;
	color: var(--fh-red);
}