@charset "utf-8";
/* ==========================================================
   funeral_manner.css  2026/11
   お悔やみマナーページ（/sp/makurabana.html ほか）CV改修
   - 案内帯 .hhFnBand / 売れ筋 .hhFnPick / 目次 .hhFnToc
   - FAQ .hhFaq / 下部カード .hhFnKind（SPでも表示）
   カテゴリページ（c/funeral08）のテイストに合わせる：カーキ系アクセント #8f8760・淡い生成り #f7f6f1・CTAはサイト共通ピンク
   ========================================================== */

.mannerSec {
	--fn-ink: #333333;
	--fn-sub: #777777;
	--fn-bg: #f7f6f1;
	--fn-line: #e2dfd3;
	--fn-btn: #ff2456;
	--fn-btn-on: #e0123f;
}

/* ---------- 案内帯（rev.3：罫線＋アイコン3分割） ---------- */
.mannerSec .hhFnBand {
	margin: 28px 0 56px !important;
	padding: 0 !important;
	background: #fff !important;
	border-top: 0 !important;
	text-align: center !important;
	color: var(--fn-ink) !important;
}
.mannerSec .hhFnBand__en {
	margin: 0 0 4px !important;
	font-family: "Lato", "Noto Sans JP", sans-serif !important;
	font-size: 11px !important;
	letter-spacing: .24em !important;
	line-height: 1.6 !important;
	color: #8f8760 !important;
}
.mannerSec .hhFnBand__ttl {
	margin: 0 0 16px !important;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: .06em !important;
}
.mannerSec .hhFnBand__main { display: flex !important; margin: 0 0 16px !important; }
.mannerSec .hhFnBand__col { flex: 1; padding: 2px 8px !important; }
.mannerSec .hhFnBand__col + .hhFnBand__col { border-left: 1px solid #e2dfd3 !important; }
.mannerSec .hhFnBand__cap,
.mannerSec .hhFnBand__sub {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	color: #4f4f4f !important;
}
.mannerSec .hhFnBand__time {
	margin: 0 !important;
	font-family: "Lato", "Roboto", sans-serif !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	color: #6f6845 !important;
}
.mannerSec .hhFnBand__lead {
	margin: 0 !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: .04em;
	color: #6f6845 !important;
}
.mannerSec .hhFnBand__icons {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 1px solid #d9d4bd !important;
	border-radius: 8px !important;
	overflow: hidden;
}
.mannerSec .hhFnBand__icons li {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 12px 4px !important;
	color: #8f8760 !important;
}
.mannerSec .hhFnBand__icons li + li { border-left: 1px solid #e2dfd3 !important; }
.mannerSec .hhFnBand__icons span {
	font-size: 11px !important;
	line-height: 1.5 !important;
	color: var(--fn-ink) !important;
}
.mannerSec .hhFnBand__link { margin: 14px 0 0 !important; }
.mannerSec .hhFnBand__link a {
	display: block !important;
	position: relative;
	padding: 12px 32px !important;
	border: 1px solid #8f8760 !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: #6f6845 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	letter-spacing: .04em;
	transition: background .2s;
}
.mannerSec .hhFnBand__link a::after {
	content: "";
	position: absolute; right: 16px; top: 50%;
	width: 7px; height: 7px;
	border-top: 1.5px solid #8f8760; border-right: 1.5px solid #8f8760;
	transform: translateY(-50%) rotate(45deg);
}
.mannerSec .hhFnBand__link a:hover { background: #f7f6f1 !important; }
@media screen and (min-width: 768px) {
	.mannerSec .hhFnBand__icons span br { display: none; }
}

/* ---------- 商品ブロック（.hhFnShop）----------
   商品の見た目はサイト標準（contents_renew.css / hh_funeral.css）に任せ、余白だけ調整 */
.mannerSec .hhFnShop { margin: 8px 0 40px !important; }
.mannerSec .hhFnShop section + section { margin-top: 40px !important; }
.mannerSec .hhFnShop .examBox .linkTxt { margin-top: 14px !important; text-align: right !important; }

/* ---------- 目次（折りたたみ） ---------- */
.mannerSec .hhFnToc { margin: 0 !important; }
.mannerSec .hhFnToc > summary {
	cursor: pointer;
	list-style: none;
	padding: 12px 36px 12px 14px !important;
	border: 1px solid var(--fn-line) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--fn-ink) !important;
	position: relative;
	background: #fff;
}
.mannerSec .hhFnToc > summary::-webkit-details-marker { display: none; }
.mannerSec .hhFnToc > summary::after {
	content: "";
	position: absolute; right: 16px; top: 50%;
	width: 7px; height: 7px;
	border-right: 1px solid var(--fn-ink); border-bottom: 1px solid var(--fn-ink);
	transform: translateY(-70%) rotate(45deg);
}
.mannerSec .hhFnToc[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.mannerSec .hhFnToc > ul { margin-top: 12px !important; }
.mannerSec .hhFnToc > ul {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: 24px !important;
	padding: 0 !important;
	list-style: none !important;
}
.mannerSec .hhFnToc > ul li {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--fn-line) !important;
}
/* サイト共通の「｜」区切り（underLine）を目次では消す */
.mannerSec .hhFnToc > ul li::before,
.mannerSec .hhFnToc > ul li::after,
.mannerSec .hhFnToc > ul li a::before,
.mannerSec .hhFnToc > ul li a::after { content: none !important; display: none !important; }
@media screen and (max-width: 767px) {
	.mannerSec .hhFnToc > ul { grid-template-columns: 1fr !important; }
}
.mannerSec .hhFnToc > ul li a {
	display: block !important;
	padding: 10px 4px !important;
	color: var(--fn-ink) !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	text-decoration: none !important;
}
.mannerSec .hhFnToc > ul li a:hover { color: var(--fn-btn-on) !important; background: var(--fn-bg) !important; }

/* ---------- メッセージ文例（コピー） ---------- */
.mannerSec .hhFnMsgs__note {
	margin: 0 0 14px !important;
	font-size: 12px !important;
	line-height: 1.7 !important;
	color: var(--fn-sub) !important;
}
.mannerSec .hhFnMsg {
	margin: 0 0 12px !important;
	padding: 14px 16px !important;
	background: var(--fn-bg) !important;
	border-radius: 6px !important;
}
.mannerSec .hhFnMsg__label {
	margin: 0 0 4px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #6f6845 !important;
}
.mannerSec .hhFnMsg__txt {
	margin: 0 0 10px !important;
	font-size: 14px !important;
	line-height: 1.9 !important;
	color: var(--fn-ink) !important;
	-webkit-user-select: text; user-select: text;
}
.mannerSec .hhFnMsg__copy {
	display: inline-block !important;
	padding: 7px 16px !important;
	background: #fff !important;
	border: 1px solid #a69f78 !important;
	border-radius: 4px !important;
	color: #6f6845 !important;
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.mannerSec .hhFnMsg__copy:hover { background: #f3f1e8 !important; }
.mannerSec .hhFnMsg__copy.is-done { background: #8f8760 !important; border-color: #8f8760 !important; color: #fff !important; }

/* ---------- FAQ ---------- */
.mannerSec .hhFaq { margin: 48px 0 !important; scroll-margin-top: 80px; }
.mannerSec .hhFaq h2 { margin-bottom: 16px !important; }
.mannerSec .hhFaq details { border-bottom: 1px solid var(--fn-line) !important; }
.mannerSec .hhFaq details:first-of-type { border-top: 1px solid var(--fn-line) !important; }
.mannerSec .hhFaq summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 14px 32px 14px 28px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	color: var(--fn-ink) !important;
}
.mannerSec .hhFaq summary::-webkit-details-marker { display: none; }
.mannerSec .hhFaq summary::before {
	content: "Q";
	position: absolute; left: 4px; top: 14px;
	font-family: "Lato", "Roboto", "Noto Sans JP", sans-serif; font-weight: 700; color: #a69f78;
}
.mannerSec .hhFaq summary::after {
	content: "＋";
	position: absolute; right: 6px; top: 14px;
	color: #a69f78;
}
.mannerSec .hhFaq details[open] summary::after { content: "－"; }
.mannerSec .hhFaq__a {
	padding: 0 8px 16px 28px !important;
	font-size: 13px !important;
	line-height: 1.9 !important;
	color: var(--fn-ink) !important;
}
.mannerSec .hhFaq__a p { margin: 0 !important; }
.mannerSec .hhFaq__a a { color: var(--fn-ink) !important; text-decoration: underline !important; }

.mannerSec summary:focus-visible,
.mannerSec a:focus-visible { outline: 2px solid #a69f78; outline-offset: 2px; }

/* ---------- SP ---------- */
@media screen and (max-width: 767px) {
	.mannerSec .hhFnBand { margin: 16px 0 28px !important; }

	/* 下部カード（旧 .pc 指定を外してSPでも表示）
	   2026/11/14：2列だとPC用カードの最小幅でページ全体が横にはみ出すため、1列のリスト表示に変更 */
	.hhFnKind { display: block !important; margin-top: 40px !important; min-width: 0 !important; max-width: 100% !important; }
	.hhFnKind .cardList,
	.hhFnKind .figList {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 8px !important;
		width: auto !important;
		margin: 12px 0 0 !important;
		padding: 0 !important;
	}
	.hhFnKind .cardList li,
	.hhFnKind .figList li { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; }
	.hhFnKind .cardList li a,
	.hhFnKind .figList li a {
		display: flex !important;
		align-items: center !important;
		gap: 14px !important;
		width: auto !important;
		min-height: 0 !important;
		height: auto !important;
		padding: 8px 12px !important;
		box-sizing: border-box !important;
	}
	.hhFnKind figure { flex: 0 0 64px !important; width: 64px !important; margin: 0 !important; padding: 0 !important; }
	.hhFnKind img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; }
	.hhFnKind li a > div { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; text-align: left !important; }
	.hhFnKind li a > div p { margin: 0 !important; font-size: 12px !important; line-height: 1.5 !important; }
	.hhFnKind li a > div p br { display: none; }
	.hhFnKind li a > div h4 { margin: 2px 0 0 !important; font-size: 15px !important; line-height: 1.4 !important; text-align: left !important; }
	.hhFnKind li a > div h4 br { display: none; }
	.hhFnKind li a > div h4 span { font-size: 11px !important; margin-left: 4px !important; }
}

/* ==========================================================
   本文の図解化・選ばれる理由・追従ボタン（2026/11 追加）
   ========================================================== */

/* anc01 ポイント */
.mannerSec .hhFnPoints {
	display: grid !important;
	gap: 8px !important;
	margin: 18px 0 22px !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: none;
}
.mannerSec .hhFnPoints li {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 12px 14px !important;
	background: var(--fn-bg) !important;
	border-radius: 6px !important;
}
.mannerSec .hhFnPoints__num {
	flex: 0 0 auto;
	font-family: "Lato", "Roboto", sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #a69f78 !important;
	line-height: 1 !important;
}
.mannerSec .hhFnPoints p { margin: 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--fn-ink) !important; }
.mannerSec .hhFnPoints strong { color: #6f6845 !important; font-weight: 700 !important; }

/* anc03 予算カード（写真付き） */
.mannerSec .hhFnBudget {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px 16px !important;
	margin: 18px 0 28px !important;
	padding: 0 !important;
	list-style: none !important;
}
.mannerSec .hhFnBudget li { margin: 0 !important; }
.mannerSec .hhFnBudget a {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--fn-ink) !important;
	text-decoration: none !important;
}
.mannerSec .hhFnBudget figure { margin: 0 !important; flex: 0 0 auto; }
.mannerSec .hhFnBudget img {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	height: auto !important;
	object-fit: cover;
	border-radius: 6px !important;
}
.mannerSec .hhFnBudget a > div { display: flex !important; flex-direction: column; flex: 1; }
.mannerSec .hhFnBudget__price {
	font-family: "Lato", "Roboto", "Noto Sans JP", sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
.mannerSec .hhFnBudget__price small {
	margin-left: 2px;
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: #4f4f4f !important;
}
.mannerSec .hhFnBudget__txt { margin: 2px 0 6px !important; font-size: 12px !important; line-height: 1.6 !important; flex: 1; }
.mannerSec .hhFnBudget__more { font-size: 12px !important; color: #6f6845 !important; }
.mannerSec .hhFnBudget__more::after { content: " ›"; }
.mannerSec .hhFnBudget a:hover img { opacity: .85; }
.mannerSec .hhFnBudget a:hover .hhFnBudget__more { text-decoration: underline; }

/* anc04 タイムライン */
.mannerSec .hhFnTimeline {
	position: relative;
	margin: 18px 0 22px !important;
	padding: 0 0 0 26px !important;
	list-style: none !important;
}
.mannerSec .hhFnTimeline::before {
	content: "";
	position: absolute; left: 7px; top: 8px; bottom: 8px;
	width: 2px; background: #e6e2d3;
}
.mannerSec .hhFnTimeline li { position: relative; margin: 0 0 14px !important; padding: 0 !important; }
.mannerSec .hhFnTimeline li:last-child { margin-bottom: 0 !important; }
.mannerSec .hhFnTimeline li::before {
	content: "";
	position: absolute; left: -24px; top: 6px;
	width: 12px; height: 12px; border-radius: 50%;
	background: #fff; border: 2px solid #c9c3a3;
	box-sizing: border-box;
}
.mannerSec .hhFnTimeline__when { margin: 0 !important; font-size: 12px !important; line-height: 1.6 !important; color: var(--fn-sub) !important; }
.mannerSec .hhFnTimeline__what { margin: 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--fn-ink) !important; }
.mannerSec .hhFnTimeline__what a { color: #6f6845 !important; text-decoration: underline !important; }
.mannerSec .hhFnTimeline li.is-key {
	padding: 10px 12px !important;
	margin-left: -8px !important;
	background: var(--fn-bg) !important;
	border-radius: 6px !important;
}
.mannerSec .hhFnTimeline li.is-key::before { left: -16px; top: 16px; background: #8f8760; border-color: #8f8760; }
.mannerSec .hhFnTimeline li.is-key .hhFnTimeline__when { color: #6f6845 !important; font-weight: 500 !important; }
.mannerSec .hhFnTimeline strong { color: #6f6845 !important; }

/* anc05 注意点 */
.mannerSec .hhFnCaution {
	position: relative;
	padding: 16px 18px 16px 46px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: #f7f6f1 !important;
}
.mannerSec .hhFnCaution::before {
	content: "!";
	position: absolute; left: 14px; top: 15px;
	width: 20px; height: 20px; border-radius: 50%;
	background: #a69f78; color: #fff;
	font: 700 13px/20px "Lato", "Roboto", sans-serif; text-align: center;
}

/* anc07 使い方 */
.mannerSec .hhFnUses {
	display: grid !important;
	gap: 8px !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.mannerSec .hhFnUses li {
	display: flex !important;
	gap: 12px;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid #e6e2d3 !important;
	border-radius: 6px !important;
}
.mannerSec .hhFnUses span {
	flex: 0 0 auto;
	padding: 2px 8px !important;
	height: fit-content;
	background: #f3f1e8 !important;
	color: #6f6845 !important;
	font-size: 11px !important;
	border-radius: 3px !important;
	line-height: 1.6 !important;
}
.mannerSec .hhFnUses p { margin: 0 !important; font-size: 13px !important; line-height: 1.7 !important; }

/* anc09 花材 */
.mannerSec .hhFnFlowers {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.mannerSec .hhFnFlowers li {
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
	padding: 10px 12px !important;
	background: var(--fn-bg) !important;
	border-radius: 6px !important;
}
.mannerSec .hhFnFlowers__dots { display: flex; gap: 3px; min-height: 10px; margin-bottom: 4px; }
.mannerSec .hhFnFlowers__dots:empty { display: none; }
.mannerSec .hhFnFlowers li { justify-content: center; }
.mannerSec .hhFnFlowers__dots i {
	display: block; width: 10px; height: 10px; border-radius: 50%;
	border: 1px solid rgba(0,0,0,.12); box-sizing: border-box;
}
.mannerSec .hhFnFlowers b { font-size: 14px !important; font-weight: 500 !important; color: var(--fn-ink) !important; line-height: 1.5 !important; }
.mannerSec .hhFnFlowers small { margin-top: 2px; font-size: 11px !important; line-height: 1.6 !important; color: var(--fn-sub) !important; }

/* anc10 枕飾り */
.mannerSec .hhFnKazari {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 8px !important;
	margin: 12px 0 !important;
}
.mannerSec .hhFnKazari > div {
	padding: 12px 14px !important;
	border: 1px solid #e6e2d3 !important;
	border-radius: 6px !important;
}
.mannerSec .hhFnKazari dt { margin: 0 0 4px !important; font-size: 14px !important; font-weight: 500 !important; color: #6f6845 !important; }
.mannerSec .hhFnKazari dd { margin: 0 !important; font-size: 12px !important; line-height: 1.7 !important; }

/* 選ばれる理由 */
.mannerSec .hhFnWhy { margin: 0 0 48px !important; padding: 24px 16px !important; background: var(--fn-bg) !important; border-radius: 8px !important; }
.mannerSec .hhFnWhy h2 { margin: 0 0 16px !important; text-align: center !important; border: 0 !important; padding: 0 !important; font-size: 18px !important; font-weight: 500 !important; }
.mannerSec .hhFnWhy__list {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 10px !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.mannerSec .hhFnWhy__list li {
	margin: 0 !important;
	padding: 16px 12px !important;
	background: #fff !important;
	border-radius: 6px !important;
	text-align: center !important;
}
.mannerSec .hhFnWhy__ico {
	display: flex !important;
	align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: 0 auto 10px;
	border-radius: 50%;
	border: 1px solid #c9c3a3;
	color: #6f6845 !important;
	font-family: "Lato", "Roboto", "Noto Sans JP", sans-serif !important;
	font-size: 13px !important; font-weight: 700 !important;
	letter-spacing: -.02em;
}
.mannerSec .hhFnWhy__list p { margin: 0 !important; font-size: 12px !important; line-height: 1.7 !important; color: var(--fn-sub) !important; }
.mannerSec .hhFnWhy__list b { display: block; margin-bottom: 4px; font-size: 14px !important; font-weight: 500 !important; color: var(--fn-ink) !important; }

/* お届け写真 */
.mannerSec .hhFnDelivered { margin: 0 0 48px !important; }
.mannerSec .hhFnShop .cmsResentSec iframe { width: 100% !important; max-width: 100% !important; border: 0 !important; }

/* 追従ボタン（SPのみ） */
.hhFnSticky { display: none; }
@media screen and (max-width: 767px) {
	.hhFnSticky {
		display: block;
		position: fixed; left: 12px; right: 80px; bottom: 0;
		z-index: 900;
		padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px));
		transform: translateY(120%);
		transition: transform .25s ease;
		pointer-events: none;
	}
	.hhFnSticky.is-show { transform: translateY(0); pointer-events: auto; }
	.hhFnSticky a {
		display: block !important;
		padding: 13px 12px !important;
		background: #ff2456 !important;
		color: #fff !important;
		text-align: center !important;
		font-family: "Noto Sans JP", sans-serif !important;
		font-size: 14px !important;
		letter-spacing: .04em;
		text-decoration: none !important;
		border-radius: 6px !important;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	}

	.mannerSec .hhFnBudget { grid-template-columns: 1fr !important; gap: 10px !important; }
	.mannerSec .hhFnBudget a { flex-direction: row; align-items: center; gap: 12px; }
	.mannerSec .hhFnBudget figure { width: 88px; }
	.mannerSec .hhFnFlowers { grid-template-columns: repeat(2, 1fr) !important; }
	.mannerSec .hhFnKazari { grid-template-columns: 1fr !important; }
	.mannerSec .hhFnWhy__list { grid-template-columns: repeat(2, 1fr) !important; }
}

/* タイムライン「お通夜前〜お通夜」の丸をゆっくり点滅（波紋） */
.mannerSec .hhFnTimeline li.is-key::after {
	content: "";
	position: absolute; left: -16px; top: 16px;
	width: 12px; height: 12px; border-radius: 50%;
	background: #8f8760;
	animation: hhFnPulse 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes hhFnPulse {
	0%   { transform: scale(1);   opacity: .55; }
	100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mannerSec .hhFnTimeline li.is-key::after { animation: none; display: none; }
}

/* 図解パーツの下のテキストリンクとの間隔 */
.mannerSec .mannerBox .linkTxt { margin-top: 18px !important; }

/* 商品ブロック（胡蝶蘭など）の直前のセクション区切り線を消す */
.mannerSec #anc03,
.mannerSec .mannerBox:has(+ .hhFnShop),
.mannerSec .mannerBox:has(+ .hhFaq) {
	border-bottom: 0 !important;
	background-image: none !important;
}
.mannerSec #anc03::after,
.mannerSec .mannerBox:has(+ .hhFnShop)::after { content: none !important; display: none !important; }

/* ==========================================================
   電話導線・ご注文の流れ・関連リンク（2026/11 追加）
   ========================================================== */
.mannerSec .hhFnBand__cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; margin-top: 14px !important; }
.mannerSec .hhFnBand__cta > p { display: flex !important; margin: 0 !important; padding: 0 !important; }
.mannerSec .hhFnBand__cta > p > a { flex: 1 1 auto; box-sizing: border-box !important; min-height: 60px; height: auto !important; margin: 0 !important; }
.mannerSec .hhFnBand__cta .hhFnBand__link { margin: 0 !important; }
.mannerSec .hhFnBand__cta .hhFnBand__link a { display: flex !important; align-items: center; justify-content: center; padding: 8px 32px !important; }
.mannerSec .hhFnBand__tel { margin: 0 !important; }
.mannerSec .hhFnBand__tel a {
	display: flex !important; align-items: center; justify-content: center; gap: 8px;
	padding: 8px 12px !important;
	border: 1px solid #8f8760 !important;
	background: #8f8760 !important;
	border-radius: 4px !important;
	color: #fff !important;
	text-decoration: none !important;
}
.mannerSec .hhFnBand__tel svg { flex: 0 0 auto; }
.mannerSec .hhFnBand__tel span { display: flex; flex-direction: column; text-align: left; line-height: 1.35; }
.mannerSec .hhFnBand__tel b { font-family: "Lato", "Noto Sans JP", sans-serif !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: .03em; }
.mannerSec .hhFnBand__tel small { font-size: 11px !important; opacity: .92; }
.mannerSec .hhFnBand__tel a:hover { background: #7a7350 !important; }

.mannerSec .hhFnFlow { margin: 0 0 48px !important; }
.mannerSec .hhFnFlow h2,
.mannerSec .hhFnRelated h2 {
	margin: 0 0 16px !important; padding: 0 0 8px !important;
	font-size: 18px !important; font-weight: 500 !important;
	border-bottom: 1px solid var(--fn-line) !important;
}
.mannerSec .hhFnFlow__list {
	display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: none;
}
.mannerSec .hhFnFlow__list li {
	position: relative;
	margin: 0 !important; padding: 14px 12px !important;
	background: var(--fn-bg) !important; border-radius: 6px !important;
}
.mannerSec .hhFnFlow__list li:nth-child(3) { background: #f1efe4 !important; }
.mannerSec .hhFnFlow__no { display: block; font-family: "Lato", sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em; color: #8f8760 !important; margin-bottom: 4px; }
.mannerSec .hhFnFlow__list b { display: block; font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; margin-bottom: 4px; color: var(--fn-ink) !important; }
.mannerSec .hhFnFlow__list p { margin: 0 !important; font-size: 12px !important; line-height: 1.7 !important; }
.mannerSec .hhFnFlow__note { margin: 10px 0 0 !important; font-size: 11px !important; line-height: 1.7 !important; color: #4f4f4f !important; }

.mannerSec .hhFnRelated { margin: 0 0 40px !important; }
.mannerSec .hhFnRelated__list {
	display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important;
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.mannerSec .hhFnRelated__list li { margin: 0 !important; border-bottom: 1px solid var(--fn-line) !important; }
.mannerSec .hhFnRelated__list a {
	display: block !important; position: relative;
	padding: 11px 20px 11px 2px !important;
	font-size: 13px !important; line-height: 1.6 !important;
	color: var(--fn-ink) !important; text-decoration: none !important;
}
.mannerSec .hhFnRelated__list a::after {
	content: ""; position: absolute; right: 6px; top: 50%;
	width: 6px; height: 6px; margin-top: -3px;
	border-top: 1.5px solid #8f8760; border-right: 1.5px solid #8f8760; transform: rotate(45deg);
}
.mannerSec .hhFnRelated__list a:hover { background: var(--fn-bg) !important; }

@media screen and (max-width: 767px) {
	.mannerSec .hhFnBand__cta { grid-template-columns: 1fr; }
	.mannerSec .hhFnFlow__list { grid-template-columns: 1fr 1fr !important; }
	.mannerSec .hhFnRelated__list { grid-template-columns: 1fr !important; }
}

/* ---------- 2026/11/14 SP：商品一覧2列・お届け写真3列 ----------
   /sp/ のページはカテゴリページ用のSP専用CSSを読み込まないため、
   withRankNum がトップページ用の横スクロール表示になり画面からはみ出していた。
   カテゴリページ（c/funeral08 のスマホ表示）と同じ2列に固定する。 */
@media screen and (max-width: 767px) {
	.mannerSec .hhFnShop ul.withRankNum {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 28px 12px !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 16px 0 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		transform: none !important;
		white-space: normal !important;
	}
	.mannerSec .hhFnShop ul.withRankNum > li {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		flex: none !important;
	}
	.mannerSec .hhFnShop ul.withRankNum > li figure { margin: 0 !important; }
	.mannerSec .hhFnShop ul.withRankNum > li figure img { width: 100% !important; height: auto !important; display: block; }
	.mannerSec .hhFnShop ul.withRankNum .optList { margin-top: 8px !important; }
	.mannerSec .hhFnShop ul.withRankNum .optList span { font-size: 10px !important; padding: 1px 4px !important; margin: 0 3px 3px 0 !important; }
	.mannerSec .hhFnShop ul.withRankNum h4 { margin-top: 8px !important; font-size: 13.5px !important; line-height: 1.45 !important; }
	.mannerSec .hhFnShop ul.withRankNum .price { font-size: 18px !important; line-height: 1.4 !important; }
	.mannerSec .hhFnShop ul.withRankNum .withTax { font-size: 11px !important; }
	.mannerSec .hhFnShop .btnToList { width: auto !important; max-width: none !important; margin: 28px 0 0 !important; padding: 0 !important; float: none !important; }
	.mannerSec .hhFnShop .btnToList a { display: block !important; width: auto !important; margin: 0 !important; box-sizing: border-box !important; }

	/* お届け写真：4列 → 3列、写真下の空白をなくす */
	.mannerSec .hhFnShop .cmsResentSec ul {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 20px 8px !important;
		width: auto !important;
		margin: 16px 0 0 !important;
		padding: 0 !important;
	}
	.mannerSec .hhFnShop .cmsResentSec ul > li {
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}
	.mannerSec .hhFnShop .cmsResentSec ul > li figure,
	.mannerSec .hhFnShop .cmsResentSec ul > li .img,
	.mannerSec .hhFnShop .cmsResentSec ul > li .photo {
		height: auto !important;
		min-height: 0 !important;
		margin: 0 0 6px !important;
		aspect-ratio: 3 / 4;
		overflow: hidden;
	}
	.mannerSec .hhFnShop .cmsResentSec ul > li img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		display: block;
	}
	.mannerSec .hhFnShop .cmsResentSec ul > li p,
	.mannerSec .hhFnShop .cmsResentSec ul > li span,
	.mannerSec .hhFnShop .cmsResentSec ul > li h3,
	.mannerSec .hhFnShop .cmsResentSec ul > li h4 { margin-top: 4px !important; font-size: 11px !important; line-height: 1.5 !important; }
}

/* 2026/11/14 rev.3 SP
   サイト共通CSSのスマホ用「横スクロール商品一覧」の指定が強く、class指定では上書きできなかったため
   id（#Arrange / #Orchid / #Ranking）付きの強い指定で2列に固定する。 */
@media screen and (max-width: 767px) {
	html body .mannerSec .hhFnShop,
	html body .mannerSec #Arrange,
	html body .mannerSec #Orchid,
	html body .mannerSec #Ranking,
	html body .mannerSec .hhFnShop > section {
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: visible !important;
		transform: none !important;
		box-sizing: border-box !important;
	}
	html body .mannerSec #Arrange .leadNote,
	html body .mannerSec #Orchid .leadNote,
	html body .mannerSec #Ranking .leadNote { white-space: normal !important; width: auto !important; }
	html body .mannerSec #Arrange ul.withRankNum,
	html body .mannerSec #Orchid ul.withRankNum,
	html body .mannerSec #Ranking ul.withRankNum {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 28px 12px !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 16px 0 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		transform: none !important;
		white-space: normal !important;
		left: auto !important;
	}
	html body .mannerSec #Arrange ul.withRankNum > li,
	html body .mannerSec #Orchid ul.withRankNum > li,
	html body .mannerSec #Ranking ul.withRankNum > li {
		display: block !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		flex: none !important;
		position: relative !important;
		left: auto !important;
	}
	html body .mannerSec #Arrange ul.withRankNum > li a,
	html body .mannerSec #Orchid ul.withRankNum > li a,
	html body .mannerSec #Ranking ul.withRankNum > li a { display: block !important; width: auto !important; }
	html body .mannerSec #Arrange ul.withRankNum figure img,
	html body .mannerSec #Orchid ul.withRankNum figure img,
	html body .mannerSec #Ranking ul.withRankNum figure img { width: 100% !important; height: auto !important; }

	/* お届け写真：3件のみ・余白を詰める */
	html body .mannerSec .cmsResentSec ul > li:nth-child(n+4) { display: none !important; }
	html body .mannerSec .cmsResentSec ul > li *:not(figure):not(img) { height: auto !important; min-height: 0 !important; }
	/* タグ・日付・商品名・価格：横幅いっぱいに広がらないよう中身の幅に（価格の「円」「(税抜)」は1行のまま） */
	html body .mannerSec .cmsResentSec ul > li *:not(figure):not(img):not(a):not(:has(figure)):not(span) {
		width: fit-content !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}
	html body .mannerSec .cmsResentSec ul > li span { display: inline !important; width: auto !important; }

	/* 「お届けしたアレンジをもっと見る」ボタン：文字を上下左右中央に */
	html body .mannerSec .cmsResentSec *:has(> a):not(li):not(ul) { height: auto !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
	html body .mannerSec .cmsResentSec a:not(ul a) {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: auto !important;
		min-height: 56px !important;
		margin-top: 24px !important;
		padding: 12px 16px !important;
		line-height: 1.5 !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
}

/* 2026/11/14 rev.4 SP：「一覧から探す」ボタンの文字を上下中央に */
@media screen and (max-width: 767px) {
	html body .mannerSec .hhFnShop p.btnToList {
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		line-height: 1.5 !important;
	}
	html body .mannerSec .hhFnShop p.btnToList a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: auto !important;
		min-height: 56px !important;
		padding: 12px 16px !important;
		line-height: 1.5 !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
}