/*
 * site.css(ファミリーホールの散骨・案件共通)
 * 1) デザイントークン
 * 2) ヘッダー(二段構成・sticky)
 * 3) フッター + バナー帯 + SP固定バー
 * 4) 脱SWELL受けクラス(ns-band / ns-btn / ns-cols / ns-step / ns-box / ns-list / 各ユーティリティ)
 * 5) CF7フォーム(旧カスタマイザーCSSからの移植: .inquiry / .haveto / .any ほか)
 *
 * 全ページ(LPテンプレート含む)で読み込む。グローバル装飾はこのファイルに集約し、
 * ベーステーマのCSS(reset/typography/layout)には手を入れない。
 */

:root {
	--fhs-navy: #0c2647;
	--fhs-navy-light: #183863;
	--fhs-main: #04384c;
	--fhs-gold: #b89962;
	--fhs-red: #e44141;
	--fhs-blue: #338df4;
	--fhs-green: #63a84d;
	--fhs-orange: #f09f4d;
	--fhs-ink: #333333;
	--fhs-line: #e2ddd3;
	--fhs-paper: #f7f4ee;
	/* 実測値(PC二段ヘッダーの高さ)。追従サイドバナーの top / max-height の基準 */
	--fhs-header-h: 114px;
}

/* =====================================================
 * 2) ヘッダー(二段構成)
 * ===================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 1px 0 var(--fhs-line);
}
.site-header__top-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 16px;
}
.site-branding { margin: 0; line-height: 1; }
.site-branding a { display: inline-flex; align-items: center; }
.site-branding img { max-height: 44px; width: auto; display: block; }
.site-branding a { color: var(--fhs-navy); font-weight: 700; font-size: 1.1rem; text-decoration: none; }

.site-header__util {
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	margin-left: auto;
}
.site-tel { display: block; text-decoration: none; color: var(--fhs-navy); text-align: right; line-height: 1.25; }
.site-tel:hover { opacity: .85; }
.site-tel__label { display: block; font-size: 11px; color: #5b5550; }
.site-tel__num { display: inline-flex; align-items: center; gap: 4px; font-size: 24px; font-weight: 800; letter-spacing: .02em; color: var(--fhs-navy); }
.site-tel__ico { font-size: 18px; }
.site-btn--request {
	display: inline-block;
	background: var(--fhs-gold);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 20px;
	border-radius: 4px;
	text-decoration: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
	white-space: nowrap;
}
.site-btn--request:hover { background: #a5854f; color: #fff; }

.site-nav-toggle { display: none; }

/* 下段ナビ(PC) */
.site-nav { border-top: 1px solid var(--fhs-line); background: #fff; }
.site-nav__inner {
	display: flex;
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 8px;
}
.site-nav__home {
	display: flex;
	align-items: center;
	padding: 0 12px;
	color: var(--fhs-navy);
}
.site-nav__list {
	display: flex;
	/* 中間幅(960〜1150px程度)では2段に折り返して横溢れを防ぐ */
	flex-wrap: wrap;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
	margin-left: auto;
}
.site-nav__list li { margin: 0; }
.site-nav__list a {
	display: block;
	padding: 12px 13px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fhs-navy);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
/* 下線は出さない。トップページではページ内アンカーの全項目が current 扱いになり
 * 全部に線が引かれてしまうため(嶋崎指摘)。ホバーは色変化だけで示す。 */
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--fhs-gold); }

/* 中間幅(960〜1199px)は1行に収まらないので、詰めたうえで中央に寄せて
 * 折り返しが「意図した2段」に見えるようにする(右寄せのままだと1段目に空きが出る) */
@media (min-width: 960px) and (max-width: 1199px) {
	.site-nav__inner { padding: 0 4px; }
	.site-nav__home { padding: 0 8px; }
	.site-nav__list { justify-content: center; }
	.site-nav__list a { padding: 10px 10px; font-size: 13px; }
}
@media (min-width: 960px) and (max-width: 1059px) {
	.site-nav__list a { padding: 10px 7px; font-size: 12px; }
}

/* SPドロワー */
.site-spnav { display: none; }

@media (max-width: 959px) {
	:root { --fhs-header-h: 56px; }
	.site-header__top-inner { padding: 8px 12px; gap: 10px; }
	.site-branding img { max-height: 34px; }
	.site-header__util { display: none; }
	.site-nav-toggle {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		flex: 0 0 auto;
		margin-left: auto;
		background: none;
		border: 0;
		padding: 2px 4px;
		cursor: pointer;
		color: var(--fhs-navy);
	}
	.site-nav-toggle__box {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor;
		margin: 7px 0;
	}
	.site-nav-toggle__txt { font-size: 10px; white-space: nowrap; }
	.site-nav { display: none; }
	.site-spnav {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		border-top: 1px solid var(--fhs-line);
		box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}
	.site-spnav[hidden] { display: none; }
	/* リンク一覧(2列)とCTAエリアの見た目は 14) にまとめてある */
}

/* =====================================================
 * 3) フッター + バナー帯 + SP固定バー
 * ===================================================== */
/* PC追従サイドバナー(旧テーマのfix_sidebar相当)。スクロール後にsite.jsが表示する */
.ns-sidebnr { display: none; }
@media (min-width: 1200px) {
	.ns-sidebnr {
		display: block;
		position: fixed;
		/* 追従ヘッダーの下から始める(以前は top:100px でヘッダーに×が隠れていた)。
		 * ×は枠の外へ9px はみ出させるので、ヘッダーとの間に12px 取る。 */
		top: calc(var(--fhs-header-h) + 12px);
		right: 12px;
		/* 画面の高さが低いPC(1440x900 / 1280x800 / 1366x768 等)でも
		 * 5枚 + ×が縦に収まるよう、使える高さから逆算して幅を決める。
		 * 3.98 = 現在のバナー5枚の「高さ合計 ÷ 幅」の実測値(隙間・端数込み)。
		 * 上限200px(旧テーマは216px)。高さに余裕がある画面ほど大きく出す。
		 * バナーを入れ替えて比率が変わっても max-height + overflow で破綻はしない。 */
		--ns-sidebnr-w: clamp(120px, calc((100vh - 150px) / 3.98), 200px);
		width: var(--ns-sidebnr-w);
		z-index: 80;
		visibility: hidden;
		opacity: 0;
		/* 消えるときは色が抜けきってから visibility を落とす(パッと消えない) */
		transition: opacity .3s ease, visibility 0s linear .3s;
	}
	.ns-sidebnr.is-show {
		visibility: visible;
		opacity: 1;
		transition: opacity .3s ease, visibility 0s linear 0s;
	}
	/* 本文と横に重なる帯を通っている間は引っ込める。
	 * どの帯で重なるかは画面幅とバナー幅(clamp で可変)次第なので、
	 * 閾値を書かず site.js が矩形の重なりを実測して付け外しする。 */
	.ns-sidebnr.is-show.is-collide {
		visibility: hidden;
		opacity: 0;
		transition: opacity .12s ease, visibility 0s linear .12s;
	}
	/* ×は枠の外(右上)に重ねて置き、縦の場所を取らない */
	.ns-sidebnr__close {
		position: absolute;
		top: -9px;
		right: -8px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(12, 38, 71, .86);
		color: #fff;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
	}
	.ns-sidebnr__inner {
		max-height: calc(100vh - var(--fhs-header-h) - 20px);
		overflow-y: auto;
		scrollbar-width: none;
	}
	.ns-sidebnr__inner::-webkit-scrollbar { width: 0; height: 0; }
	.ns-sidebnr__inner img { display: block; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
	.ns-sidebnr__inner > * { margin: 0 0 4px; }
	.ns-sidebnr__inner > :last-child { margin-bottom: 0; }
	.ns-sidebnr__inner .wp-block-columns { display: block; margin: 0; }
	.ns-sidebnr__inner .wp-block-column { width: 100%; margin: 0 0 4px; }
	.ns-sidebnr__inner .wp-block-column:last-child { margin-bottom: 0; }
}

/* トップへ戻るボタン(旧テーマのp-fixBtn相当) */
.ns-totop {
	position: fixed;
	right: 16px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fhs-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--fhs-navy);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	cursor: pointer;
	z-index: 90;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease;
}
.ns-totop.is-show { visibility: visible; opacity: 1; }
/* 追従サイドバナーが出ている間は、その左側へ逃がして重ならないようにする
 * (バナー幅は可変なので、site.js が body へ付けるクラスで切り替える) */
@media (min-width: 1200px) {
	body.ns-sidebnr-on .ns-totop {
		right: calc(24px + clamp(120px, calc((100vh - 150px) / 3.98), 200px));
	}
}
@media (max-width: 959px) {
	/* SP下端の固定バー(テーマ/LP内蔵どちらの場合も)と重ならない位置 */
	.ns-totop { bottom: 84px; }
}

.site-footer { background: var(--fhs-navy); color: #fff; }
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 20px 28px;
}
.site-footer__brand { max-width: 460px; }
.site-footer__name { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.site-footer__lead { font-size: .85rem; margin: 0 0 14px; color: rgba(255, 255, 255, .8); }
.site-footer__info { margin: 0; font-size: .85rem; }
.site-footer__info div { display: flex; gap: 10px; margin-bottom: 4px; }
.site-footer__info dt { color: rgba(255, 255, 255, .65); min-width: 3.5em; }
.site-footer__info dd { margin: 0; }
.site-footer__info a { color: #fff; font-weight: 700; text-decoration: none; }
.site-footer-nav__list { list-style: none; margin: 0; padding: 0; }
.site-footer-nav__list li { margin: 0 0 8px; }
.site-footer-nav__list a { color: rgba(255, 255, 255, .9); font-size: .85rem; text-decoration: none; }
.site-footer-nav__list a:hover { color: var(--fhs-gold); }
.site-footer__base { border-top: 1px solid rgba(255, 255, 255, .18); padding: 14px 20px; text-align: center; }
.site-footer__copy { margin: 0; color: rgba(255, 255, 255, .7); font-size: .75rem; }

/* SP下端固定バー(電話 + 資料請求)。LPの .tkd-fixed-bar と併存しないよう site.js が制御 */
.ns-spbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	display: none;
	gap: 6px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .16);
}
.ns-spbar__btn {
	flex: 1 1 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 48px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	text-align: center;
}
.ns-spbar__btn small { display: block; font-size: 10px; font-weight: 500; }
.ns-spbar__btn--form { background: var(--fhs-gold); color: #fff; }
.ns-spbar__btn--tel { background: var(--fhs-navy); color: #fff; }
@media (max-width: 959px) {
	.ns-spbar { display: flex; }
	body { padding-bottom: 70px; }
	body.ns-has-own-fixedbar { padding-bottom: 0; }
	body.ns-has-own-fixedbar .ns-spbar { display: none; }
}

/* =====================================================
 * 4) 脱SWELL受けクラス
 * ===================================================== */

/* 帯(旧 loos/full-wide)。全幅ブレイクアウト + 内側コンテナ */
.ns-band {
	margin-inline: calc(50% - 50vw);
	padding-top: 40px;
	padding-bottom: 40px;
}
/* 内側の幅は旧SWELL実測の3モードを再現する。
 * クラスなし=full(全幅) / .l-article=940px / .l-container=1300px+可変余白。
 * (変換器が旧contentSizeを l-article / l-container として温存している) */
.ns-band__inner { max-width: none; margin-inline: auto; padding-inline: 0; }
.ns-band__inner.l-article { max-width: 940px; padding-inline: min(4vw, 16px); }
.ns-band__inner.l-container { max-width: calc(1300px + 2 * min(4vw, 48px)); padding-inline: min(4vw, 48px); }
.ns-band__inner.-full { max-width: none; padding-inline: 0; }
.ns-pcpy-0 { padding-top: 0; padding-bottom: 0; }
.ns-pcpy-20 { padding-top: 20px; padding-bottom: 20px; }
.ns-pcpy-60 { padding-top: 60px; padding-bottom: 60px; }
/* 背景画像帯(旧has-bg-img。画像URLは data-bg → site.js が適用)。
 * 帯自身の背景色(rgba)を ::before で画像の上に重ね、旧テーマの色かぶせを再現 */
.ns-band.has-bg-img {
	position: relative;
	background-size: cover;
	background-position: center;
}
.ns-band.has-bg-img::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: inherit;
}
.ns-band.has-bg-img > .ns-band__inner { position: relative; z-index: 1; }
.ns-band.-fixbg { background-attachment: fixed; }
@media (max-width: 959px) {
	/* モバイルは fixed 背景が誤動作しやすいため通常スクロールに落とす */
	.ns-band.-fixbg { background-attachment: scroll; }
}
@media (max-width: 959px) {
	.ns-sppy-0 { padding-top: 0; padding-bottom: 0; }
	.ns-sppy-20 { padding-top: 20px; padding-bottom: 20px; }
	.ns-sppy-60 { padding-top: 60px; padding-bottom: 60px; }
}
/* LPテンプレートでは main が全幅のため 50vw 計算のままでよい。
 * 記事文脈(.entry-content 720px)でも同式で全幅化される。横スクロール防止。 */
body { overflow-x: clip; }

/* 旧テーマの記事幅(post_content=940px・左右padding16px)をルート直下に再現する。
 * 対象はトップ系ページのみ。帯(.ns-band)とalignfullは全幅のまま。 */
.ns-lp-top > :not(.ns-band):not(.alignfull),
.ns-lp-kudaka-jima > :not(.ns-band):not(.alignfull) {
	max-width: min(908px, calc(100% - 32px));
	margin-inline: auto;
}

/* 縦のリズム。LP白紙テンプレートは reset.css の `* { margin: 0 }` が効いたままで、
 * 記事用CSSも読まないためブロック間の余白が全て0になる(見出しと画像が密着する原因)。
 * 旧テーマの .post_content > * = margin-bottom:32px を再現する。 */
.ns-lp-top > *,
.ns-lp-kudaka-jima > * { margin-block-end: 32px; }
.ns-lp-top > :last-child,
.ns-lp-kudaka-jima > :last-child { margin-block-end: 0; }
@media (max-width: 767px) {
	.ns-lp-top > *,
	.ns-lp-kudaka-jima > * { margin-block-end: 24px; }
}
/* ルート内で入れ子になったalignfull(プラン比較表など)は旧テーマ同様に全幅へ広げる */
.ns-lp-top .alignfull,
.ns-lp-kudaka-jima .alignfull { margin-inline: calc(50% - 50vw); }
/* 旧テーマはグループ内の子を親幅いっぱいで描画していた(コアの720px制約を撤廃) */
.ns-lp-top .wp-block-group.is-layout-constrained > :not(.alignfull),
.ns-lp-kudaka-jima .wp-block-group.is-layout-constrained > :not(.alignfull) { max-width: none; }

/* ボタン(旧 loos/button) */
.ns-btn { text-align: center; margin: 1.2em auto; font-size: var(--the-fz, 1em); }
.ns-btn__link {
	position: relative;
	display: inline-block;
	min-width: 260px;
	max-width: 100%;
	padding: .9em 2.2em;
	border-radius: 40px;
	background: var(--the-btn-color, var(--fhs-navy));
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	line-height: 1.4;
	transition: opacity .2s ease, transform .2s ease;
}
.ns-btn__link:hover { opacity: .88; color: #fff; }
.ns-btnc-blue { --the-btn-color: #338df4; }
.ns-btnc-red { --the-btn-color: #e44141; }
.ns-btnc-green { --the-btn-color: #63a84d; }
.ns-size-s .ns-btn__link, .ns-btn.ns-size-s .ns-btn__link { min-width: 200px; padding: .7em 1.6em; font-size: .95em; }
/* btn_normal=塗り(既定) / btn_solid=立体 / more_btn=アウトライン */
.ns-btn--solid .ns-btn__link { box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.ns-btn--solid .ns-btn__link:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ns-btn--more .ns-btn__link { background: #fff; color: var(--the-btn-color, var(--fhs-navy)); border: 1px solid currentColor; }
.ns-btn--more .ns-btn__link:hover { background: var(--the-btn-color, var(--fhs-navy)); color: #fff; }
/* SWELLのアイコン(data-icon + --the-icon-svg のデータURI)をマスクで再現 */
.ns-btn__link [data-icon]::before,
.ns-btn__link [data-icon]::after { content: none; }
.ns-btn__link [data-icon] {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .35em;
	vertical-align: -.12em;
	background-color: currentColor;
	-webkit-mask: var(--the-icon-svg) no-repeat center / contain;
	mask: var(--the-icon-svg) no-repeat center / contain;
}

/* インラインアイコン(旧 swl-inline-icon。data-icon + --the-icon-svg のデータURIをマスク描画) */
/* アイコンは::beforeで描く(旧マークアップはspan内にテキストを内包する場合があり、
 * span本体をマスクすると内包テキストごと不可視になるため) */
.ns-inline-icon { display: inline; }
.ns-inline-icon::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.12em;
	background-color: currentColor;
	-webkit-mask: var(--the-icon-svg) no-repeat center / contain;
	mask: var(--the-icon-svg) no-repeat center / contain;
}

/* 旧テーマの枠線ユーティリティ(本文に実在する01/02のみ実装) */
.has-border { padding: 24px; }
.has-border.-border01 { border: 1px solid #04384c; }
.has-border.-border02 { border: 4px double #04384c; }

/* チェックリスト: 変換後の旧マークアップは wp-block-list クラスを持たないため受けを緩和
 * (block-styles.css の .wp-block-list.is-style-ns-check と同じ見た目) */
.is-style-ns-check:not(.wp-block-list) { list-style: none; padding-left: 0; }
.is-style-ns-check:not(.wp-block-list) > li { position: relative; padding-left: 1.6em; }
.is-style-ns-check:not(.wp-block-list) > li + li { margin-top: 0.4em; }
.is-style-ns-check:not(.wp-block-list) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1em;
	height: 1em;
	background-color: var(--wp--preset--color--accent, #0c2647);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013l4%204L19%207'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013l4%204L19%207'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* カラム(旧 loos/columns)。--ns-colw-pc/--ns-colw-sp と余白変数で幅制御 */
.ns-cols { margin: 1.2em 0; }
.ns-cols__inner {
	display: flex;
	flex-wrap: wrap;
	margin: calc(-1 * var(--ns-colmg-y, .5rem)) calc(-1 * var(--ns-colmg-x, .5rem));
}
.ns-col {
	flex: 0 0 auto;
	width: calc(var(--ns-colw-pc, 50%) - var(--ns-colmg-x, .5rem) * 2);
	margin: var(--ns-colmg-y, .5rem) var(--ns-colmg-x, .5rem);
	min-width: 0;
}
@media (max-width: 767px) {
	.ns-col { width: calc(var(--ns-colw-sp, 100%) - var(--ns-colmg-x, .5rem) * 2); }
}
.ns-mb--s > * { margin-bottom: .5em; }

/* ステップ(旧 loos/step) */
.ns-step { margin: 1.5em 0; padding: 0; }
.ns-step__item {
	position: relative;
	padding: 0 0 2em 3.4em;
}
.ns-step__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.2em;
	top: 2.4em;
	bottom: 0;
	width: 2px;
	background: var(--fhs-line);
}
.ns-step__number {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	background: var(--fhs-main);
	color: #fff;
	font-weight: 700;
	font-size: .95em;
	line-height: 1;
	counter-increment: ns-step;
}
.ns-step[data-ns-num="circle"] .ns-step__number { border-radius: 50%; }
.ns-step[data-ns-num="square"] .ns-step__number { border-radius: 6px; }
.ns-step__number .__label { display: block; font-size: .5em; letter-spacing: .05em; }
.ns-step__number::after { content: counter(ns-step); font-size: .85em; }
.ns-step { counter-reset: ns-step; }
.ns-step__title { font-weight: 700; color: var(--fhs-navy); margin-bottom: .5em; padding-top: .2em; }
.ns-step__body { font-size: .95em; }
.ns-bg-main { background-color: var(--fhs-main); }

/* ボックス(旧 is-style-big_icon_* / icon_*) */
.ns-box {
	position: relative;
	margin: 1.5em 0;
	padding: 1.4em 1.2em 1.1em;
	border-radius: 8px;
	border: 1px solid var(--fhs-line);
	background: #fff;
}
.ns-box::before {
	position: absolute;
	top: -0.8em;
	left: 1em;
	padding: .1em .7em;
	border-radius: 999px;
	font-size: .8em;
	font-weight: 700;
	color: #fff;
}
.ns-box--point { border-color: #cfe3f5; background: #f4f9fe; }
.ns-box--point::before { content: "POINT"; background: #338df4; }
.ns-box--memo { border-color: #e5decf; background: #fbf8f0; }
.ns-box--memo::before { content: "メモ"; background: var(--fhs-gold); }
.ns-box--caution { border-color: #f3cdb6; background: #fef7f2; }
.ns-box--caution::before { content: "注意"; background: #f09f4d; }
.ns-box--attention { border-color: #f0bcbc; background: #fdf4f4; }
.ns-box--attention::before { content: "注意"; background: #e44141; }
.ns-box--good { border-color: #cfe3cd; background: #f5faf4; }
.ns-box--good::before { content: "GOOD"; background: #63a84d; }
.ns-box--info { border-color: #cddef0; background: #f3f8fd; }
.ns-box--info::before { content: "INFO"; background: #6599b7; }

/* リスト(旧 is-style-check-list / note-list) */
.ns-list { list-style: none; padding-left: 0; }
.ns-list > li { position: relative; padding-left: 1.6em; margin-bottom: .4em; }
.ns-list--check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 1em;
	height: 1em;
	background-color: var(--fhs-green);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat center / contain;
}
.ns-list--note > li { padding-left: 1.3em; font-size: .9em; color: #5b5550; }
.ns-list--note > li::before { content: "※"; position: absolute; left: 0; top: 0; }

/* FAQ(旧 swell-block-faq) */
.ns-faq { margin: 1.5em 0; padding: 0; }
.ns-faq__item { border-bottom: 1px solid var(--fhs-line); }
.ns-faq__q, .ns-faq__a { position: relative; padding: .9em 0 .9em 2.6em; margin: 0; }
.ns-faq__q { font-weight: 700; color: var(--fhs-navy); }
.ns-faq__q::before, .ns-faq__a::before {
	position: absolute;
	left: 0;
	top: .75em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: .95em;
}
.ns-faq__q::before { content: "Q"; background: var(--fhs-navy); }
.ns-faq__a::before { content: "A"; background: var(--fhs-gold); }
.ns-faq__a p { margin: 0; }
.ns-faq__a p + p { margin-top: .6em; }

/* 出典つきの調査ボックス(記事本文)。縦棒 + ベタ塗りをやめた引き算版 */
.ns-source {
	margin: 1.6em 0;
	padding: 18px 20px 16px;
	border: 1px solid var(--fhs-line);
	background: var(--fhs-paper);
}
.ns-source__ttl {
	margin: 0 0 .7em;
	color: var(--fhs-navy);
	font-weight: 700;
	font-size: .98em;
	line-height: 1.7;
}
.ns-source__list,
.entry-content ul.ns-source__list {
	margin: 0;
	padding-left: 1.3em;
	font-size: .93em;
	line-height: 1.85;
}
.ns-source__list > li + li { margin-top: .35em; }
.ns-source__note { margin: .9em 0 0; font-size: .8em; color: #6c6455; line-height: 1.7; }
.entry-content .ns-source__note a { color: inherit; }

/* テーブル・画像・見出し */
.ns-table--stripes tbody tr:nth-child(odd) { background: var(--fhs-paper); }
.ns-shadow img, figure.ns-shadow img { box-shadow: 0 4px 16px rgba(0, 0, 0, .18); border-radius: 4px; }
.ns-section-ttl {
	text-align: center;
	color: var(--fhs-navy);
	font-weight: 700;
	font-size: 1.6em;
	margin: 1.2em 0 1em;
}
.ns-small { font-size: .85em; }

/* インライン色・背景(旧 has-swl-*) */
.ns-inline-color { font-weight: inherit; }
.has-ns-deep01-color { color: #e44141; }
.has-ns-deep02-background-color { background-color: #3d79d5; color: #fff; }
.has-ns-deep03-background-color { background-color: #63a84d; color: #fff; }
.has-ns-main-background-color { background-color: var(--fhs-main); color: #fff; }

/* 価格の税別メイン表記: 本文中の小さな税込併記(全ページ共通) */
.ns-zprice-inc { margin-left: .35em; font-size: .8em; font-weight: 500; white-space: nowrap; }

/* 文字サイズ・余白ユーティリティ(旧 u-fz-* / u-mb-*) */
.ns-fz-xs { font-size: .8em; }
.ns-fz-s { font-size: .9em; }
.ns-fz-m { font-size: 1.1em; }
.ns-fz-l { font-size: 1.25em; }
.ns-fz-xl { font-size: 1.5em; }
.ns-mb-ctrl.ns-mb-0 { margin-bottom: 0 !important; }
.ns-mb-ctrl.ns-mb-10 { margin-bottom: 10px !important; }
.ns-mb-ctrl.ns-mb-20 { margin-bottom: 20px !important; }
.ns-mb-ctrl.ns-mb-40 { margin-bottom: 40px !important; }
.ns-mb-ctrl.ns-mb-50 { margin-bottom: 50px !important; }

/* PC/SP出し分け(旧 pc_only / sp_only。SWELLと同じ960px境界) */
@media (max-width: 959px) {
	.ns-pc-only, .ns-pc-only2 { display: none !important; }
}
@media (min-width: 960px) {
	.ns-sp-only, .ns-sp-only2 { display: none !important; }
}

/* =====================================================
 * 5) CF7フォーム(旧カスタマイザーCSSからの移植)
 * ===================================================== */
.grecaptcha-badge { visibility: hidden; }
.wpcf7-text, .wpcf7-textarea { width: 100%; box-sizing: border-box; }
.inquiry { width: 100%; border-collapse: collapse; }
.inquiry th {
	text-align: left;
	font-size: 14px;
	color: #444;
	padding: 10px;
	width: 30%;
	background: #f7f7f7;
	border: solid 1px #d7d7d7;
}
.inquiry td { font-size: 13px; padding: 10px; border: solid 1px #d7d7d7; }
.inquiry tr, .entry-content .inquiry tr { border: solid 1px #d7d7d7; }
.haveto {
	font-size: 10px;
	padding: 4px 6px;
	background: #ff9393;
	color: #fff;
	border-radius: 2px;
	margin-right: 5px;
	white-space: nowrap;
}
.any {
	font-size: 10px;
	padding: 4px 6px;
	background: #93c9ff;
	color: #fff;
	border-radius: 2px;
	margin-right: 5px;
	white-space: nowrap;
}
.verticallist .wpcf7-list-item { display: block; }
.wpcf7-spinner { display: none !important; }
.wpcf7-submit {
	display: block;
	padding: 1em 0;
	width: 100%;
	margin: 20px auto 5px;
	border-radius: 50px !important;
	background: #1f408a;
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	border: none;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5);
	cursor: pointer;
}
.wpcf7-submit:hover { background: #1b66c9; }
.submit-button { width: 80%; margin: 0 auto; }
.submit-button .cyusyaku { font-size: 13px; padding-left: 1rem; }
@media screen and (max-width: 600px) {
	.inquiry th, .inquiry td {
		display: block !important;
		width: 100% !important;
		border-top: none !important;
	}
	.inquiry tr:first-child th { border-top: 1px solid #d7d7d7 !important; }
}
/* 細かな移植(旧追加CSS) */
.margin1 { margin-bottom: 2px; }
.margin12 { margin: 8px; }
.margin11 { margin: 5px !important; }
.wp-block-image figcaption, .wp-block-table figcaption { margin-top: .15em; margin-bottom: .5em; }

/* =====================================================
 * 6) 記事の目次(inc/toc.php)・関連記事(inc/related-posts.php)
 *    旧テーマの記事表示を引き継ぐ受けCSS
 * ===================================================== */
.ns-toc {
	margin: 2.5em auto;
	padding: 1.4em 1.8em 1.6em;
	background: var(--fhs-paper);
	border: 1px solid var(--fhs-line);
	border-radius: 4px;
}
.ns-toc__title {
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: 1.05em;
	letter-spacing: .2em;
	color: var(--fhs-navy);
	cursor: pointer;
	list-style: none;
}
.ns-toc__title::-webkit-details-marker { display: none; }
.ns-toc__list, .entry-content .ns-toc ol.ns-toc__list {
	list-style: none;
	counter-reset: ns-toc;
	margin: 1.1em 0 0;
	padding: 0 .2em;
}
.ns-toc__list > .ns-toc__item {
	counter-increment: ns-toc;
	margin: .55em 0;
	font-weight: 600;
	line-height: 1.5;
}
.ns-toc__list > .ns-toc__item::before {
	content: counter(ns-toc);
	display: inline-block;
	min-width: 1.1em;
	margin-right: .7em;
	padding-right: .7em;
	border-right: 1px solid #c9c2b4;
	text-align: center;
	color: var(--fhs-navy);
	font-weight: 700;
	font-feature-settings: "tnum";
}
.ns-toc__sub, .entry-content .ns-toc ol.ns-toc__sub {
	list-style: none;
	counter-reset: ns-toc-sub;
	margin: .3em 0 .7em;
	padding-left: 1.9em;
}
.ns-toc__item--sub {
	counter-increment: ns-toc-sub;
	margin: .35em 0;
	font-size: .88em;
	font-weight: 500;
	line-height: 1.5;
}
.ns-toc__item--sub::before {
	content: counter(ns-toc) "-" counter(ns-toc-sub);
	display: inline-block;
	margin-right: .6em;
	padding-right: .6em;
	border-right: 1px solid #d6d0c3;
	color: #6c6455;
	font-weight: 600;
	font-feature-settings: "tnum";
}
.entry-content .ns-toc a, .ns-toc a {
	color: var(--fhs-ink);
	text-decoration: none;
}
.entry-content .ns-toc a:hover, .ns-toc a:hover {
	color: var(--fhs-navy);
	text-decoration: underline;
	text-underline-offset: .15em;
}
@media (max-width: 599px) {
	.ns-toc { padding: 1.2em 1.1em 1.3em; }
	.ns-toc__sub { padding-left: 1.2em; }
}

.ns-related { margin: 3.2em auto 0; }
.ns-related__title {
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	color: var(--fhs-navy);
	padding-bottom: .45em;
	border-bottom: 1px solid var(--fhs-line);
	margin-bottom: 1em;
}
.ns-related__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 22px;
}
@media (max-width: 767px) {
	.ns-related__list { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}
.ns-related__item { margin: 0; }
.entry-content .ns-related__link, .ns-related__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.ns-related__thumb {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 16 / 9;
	background: var(--fhs-paper);
}
.ns-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.ns-related__link:hover .ns-related__thumb img { transform: scale(1.04); }
.ns-related__noimg { display: block; width: 100%; height: 100%; background: var(--fhs-paper); }
.ns-related__cat {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--fhs-navy);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 0 3px 0 0;
}
.ns-related__item-title {
	margin: .65em 0 .25em;
	font-size: .95em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--fhs-ink);
}
.ns-related__link:hover .ns-related__item-title { color: var(--fhs-navy); }
.ns-related__date { display: block; font-size: .8em; color: #8a8375; }

/* =====================================================
 * 7) トップページ(LP白紙テンプレート)のセクション整形
 *    LPテンプレートは content.css を読まないため、ルート直下の
 *    コア見出しに「セクションの境目」を与えるのはここ。
 * ===================================================== */

/* 章の見出し。上に hairline を引いて前セクションとの境目を作る(意味的境界線) */
.ns-lp-top > h2 {
	margin-block-start: 56px;
	margin-block-end: 24px;
	padding-top: 44px;
	border-top: 1px solid var(--fhs-line);
	text-align: center;
	color: var(--fhs-navy);
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .04em;
}
.ns-lp-top > h3 {
	margin-block-start: 44px;
	margin-block-end: 18px;
	color: var(--fhs-navy);
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
}
@media (max-width: 767px) {
	.ns-lp-top > h2 { margin-block-start: 36px; padding-top: 30px; margin-block-end: 18px; }
	.ns-lp-top > h3 { margin-block-start: 30px; }
}

/* 「最新情報」の3バナー(コアの columns + image ブロックで組む)。
 * PCは3列。SPは横スライド(下の 11) 節)。コアの「モバイルで縦積み」を上書きするので詳細度を1段上げる。 */
.ns-news-ttl {
	margin: 0 0 18px;
	color: var(--fhs-navy);
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 700;
	letter-spacing: .06em;
}
.ns-news-cols.wp-block-columns { gap: 8px; }
.ns-news-cols .wp-block-image,
.ns-news-cols figure { margin: 0; }
.ns-news-cols img { display: block; width: 100%; height: auto; }

/* =====================================================
 * 8) 海洋散骨の流れ(トップ)
 *    円の中は番号だけ。ラベルは外に出し、写真は本文幅に揃える。
 * ===================================================== */
.ns-flow { margin-block-start: 56px; padding-top: 44px; border-top: 1px solid var(--fhs-line); }
.ns-lp-top > .ns-flow > h2 { margin: 0 0 12px; padding: 0; border: 0; }
.ns-flow__title {
	text-align: center;
	color: var(--fhs-navy);
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .04em;
	margin: 0 0 12px;
}
.ns-flow__lead {
	text-align: center;
	color: #5b5550;
	font-size: .95em;
	line-height: 1.9;
	margin: 0 0 34px;
}
.ns-flow__cols.wp-block-columns { gap: 40px; margin: 0; }
.ns-flow__track-ttl {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--fhs-line);
	text-align: center;
	color: var(--fhs-navy);
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: .06em;
}
.ns-flow__steps { list-style: none; margin: 0; padding: 0; }
.ns-flow__step {
	position: relative;
	display: grid;
	grid-template-columns: 36px 1fr;
	column-gap: 14px;
	padding-bottom: 24px;
}
.ns-flow__step:last-child { padding-bottom: 0; }
.ns-flow__num {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--fhs-main);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	font-feature-settings: "tnum";
}
.ns-flow__line {
	position: absolute;
	left: 17px;
	top: 42px;
	bottom: 2px;
	width: 2px;
	background: var(--fhs-line);
}
.ns-flow__body { grid-column: 2; grid-row: 1; padding-top: 3px; min-width: 0; }
.ns-flow__step-ttl {
	margin: 0;
	color: var(--fhs-navy);
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.55;
}
.ns-flow__phase {
	display: block;
	margin-bottom: 2px;
	color: #8a7a5c;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .08em;
}
.ns-flow__body p { margin: .5em 0 0; font-size: .93em; line-height: 1.85; }
.ns-flow .ns-flow__body figure {
	float: none;
	margin: .8em 0 0;
	max-width: 100%;
}
.ns-flow .ns-flow__body figure img { width: 100%; height: auto; border-radius: 3px; }
@media (max-width: 767px) {
	.ns-flow { margin-block-start: 36px; padding-top: 30px; }
	.ns-flow__cols.wp-block-columns { gap: 34px; }
	.ns-flow__lead { margin-bottom: 26px; }
}

/* お問い合わせ先ブロック(トップ下部)。中央に寄せて1つのまとまりに見せる */
.ns-contact-lead { text-align: center; line-height: 1.95; }
.ns-contact-lead .ns-inline-icon::before { vertical-align: -.14em; margin-right: .4em; }
.ns-lp-top figure.aligncenter > figcaption { text-align: center; }

/* =====================================================
 * 9) 費用の明朗会計セクション(旧「記事っぽいエリア」の再構築)
 *     白地 + hairline で前セクションと区切る(§7・§8 と同じ作法)。
 *     含まれるもの → お引き取り → お届けするもの、の3段だけで組む。
 * ===================================================== */
.ns-cost {
	--nsc-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 15.3 2.4 10l1.7-1.7 3.5 3.5L15.9 3.5l1.7 1.7z'/%3E%3C/svg%3E");
	margin-block-start: 44px;
	padding-top: 30px;
	border-top: 1px solid var(--fhs-line);
	line-height: 1.7;
}
.ns-cost__title {
	margin: 0 0 10px;
	text-align: center;
	color: var(--fhs-navy);
	font-size: clamp(21px, 2.1vw, 28px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
}
.ns-cost__lead {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	font-size: clamp(14px, 1.05vw, 15px);
	line-height: 1.8;
}
.ns-cost__lead b { color: var(--fhs-navy); font-size: 1.15em; font-weight: 700; white-space: nowrap; }
.ns-cost__lead .ns-cost__lead-inc { margin-left: .35em; color: #6c6455; font-size: .88em; white-space: nowrap; }

/* 含まれるもの + お引き取り。1枚の紙面にまとめて「明朗会計」を1つの塊で見せる */
.ns-cost__panel {
	margin-top: 18px;
	padding: 20px 26px 18px;
	background: var(--fhs-paper);
	border: 1px solid var(--fhs-line);
	border-radius: 4px;
}
.ns-cost__h3 {
	margin: 0 0 12px;
	color: var(--fhs-navy);
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: 700;
	letter-spacing: .04em;
}
.ns-cost__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ns-cost__list > li {
	position: relative;
	margin: 0;
	padding-left: 23px;
	font-size: 14.5px;
	line-height: 1.6;
}
.ns-cost__list > li::before {
	content: "";
	position: absolute;
	top: .28em;
	left: 0;
	width: 15px;
	height: 15px;
	background: #15665e;
	-webkit-mask: var(--nsc-check) no-repeat center / contain;
	mask: var(--nsc-check) no-repeat center / contain;
}
.ns-cost__note {
	margin: 14px 0 0;
	color: #5a5348;
	font-size: 13px;
	line-height: 1.85;
}
.ns-cost__note b { color: var(--fhs-navy); font-weight: 700; }

/* お引き取りのエリア別。色帯やバッジを足さず、hairline と字送りだけで2枠に並べる */
.ns-cost__h3--area {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--fhs-line);
}
.ns-cost__area {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 30px;
	margin: 0;
}
.ns-cost__area > div + div { padding-left: 30px; border-left: 1px solid var(--fhs-line); }
.ns-cost__area dt {
	margin: 0 0 3px;
	color: var(--fhs-navy);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
}
.ns-cost__area dd { margin: 0; font-size: 14px; line-height: 1.6; }
.ns-cost__area dd b {
	color: var(--fhs-navy);
	font-size: 1.35em;
	font-weight: 700;
}
.ns-cost__area .ns-cost__tax { margin-left: 2px; font-size: .8em; font-weight: 600; }
.ns-cost__area .ns-cost__sub { color: #6c6455; font-size: .88em; }
.ns-cost__area .ns-cost__add {
	display: block;
	color: #6c6455;
	font-size: 12.5px;
}

/* お届けするもの。写真は挿絵ではなく「受け取れるもの」の実物として見せる */
.ns-cost__h3--wide { margin-top: 22px; }
.ns-cost__gifts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 14px;
}
.ns-gift {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--fhs-line);
	border-radius: 4px;
	overflow: hidden;
}
.ns-gift__img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
.ns-gift__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 13px 16px 14px;
}
.ns-gift__ttl {
	margin: 0 0 5px;
	color: var(--fhs-navy);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .03em;
}
.ns-gift__txt { margin: 0; font-size: 13.5px; line-height: 1.75; }
.ns-gift__scope {
	display: block;
	margin-top: auto;
	padding-top: 11px;
	color: #6c6455;
	font-size: 12.5px;
	line-height: 1.65;
}

.ns-cost__cta { margin-top: 18px; text-align: center; }
.ns-cost__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: min(340px, 100%);
	padding: 15px 30px;
	background: var(--fhs-navy);
	border-radius: 2px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background .2s ease;
}
.ns-cost__btn:hover,
.ns-cost__btn:focus-visible { background: #8a6608; color: #fff; }
.ns-cost__btn-arrow { width: 15px; height: 15px; flex: none; }

@media (max-width: 900px) {
	.ns-cost__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.ns-cost { margin-block-start: 32px; padding-top: 26px; }
	.ns-cost__lead { text-align: left; }
	.ns-cost__panel { margin-top: 18px; padding: 18px 16px 16px; }
	.ns-cost__list { gap: 8px 10px; }
	.ns-cost__list > li { padding-left: 21px; font-size: 13.5px; }
	.ns-cost__area { grid-template-columns: 1fr; gap: 0; }
	.ns-cost__area > div + div {
		margin-top: 12px;
		padding: 12px 0 0;
		border-left: 0;
		border-top: 1px solid var(--fhs-line);
	}
	.ns-cost__gifts { grid-template-columns: 1fr; gap: 14px; }
	.ns-cost__cta { margin-top: 18px; }
}

/* =====================================================
 * 9-2) 散骨プラン(委託 / 合同 / プライベート)をタブで1セクションに集約
 *     3セクションの反復と縦の間延びをやめ、タブ自体を選択の入口にする。
 *     JS無効時はタブを出さず3プランを続けて表示する(壊れない)。
 * ===================================================== */
.ns-plans {
	--nsp-head: #14375c;
	--nsp-gold: #8a6608;
	--nsp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 15.3 2.4 10l1.7-1.7 3.5 3.5L15.9 3.5l1.7 1.7z'/%3E%3C/svg%3E");
	padding-block: 40px 44px;
	background: var(--fhs-paper);
	color: var(--fhs-ink);
	line-height: 1.7;
	scroll-margin-top: calc(var(--fhs-header-h) + 8px);
}
.ns-lp-top > .ns-plans { margin-block-end: 0; }
.ns-plans__inner {
	max-width: 1060px;
	margin-inline: auto;
	padding-inline: min(4vw, 20px);
}
.ns-plans__title {
	margin: 0;
	text-align: center;
	color: var(--fhs-navy);
	font-size: clamp(23px, 2.4vw, 31px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .06em;
}
.ns-plans__lead {
	max-width: 760px;
	margin: 10px auto 0;
	text-align: center;
	font-size: clamp(14px, 1.05vw, 15px);
	line-height: 1.8;
}

/* タブ。直線矩形で、選択中を濃紺の面で示す(角丸バッジにしない) */
.ns-plans__tabs { display: none; }
.ns-plans.is-js .ns-plans__tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 22px;
}
.ns-plans__tab {
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 10px 17px;
	background: #fff;
	border: 1px solid var(--fhs-line);
	border-radius: 2px;
	color: var(--fhs-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.ns-plans__tab:hover { border-color: #b9ad94; background: #fffdf8; }
.ns-plans__tab-name {
	display: block;
	color: var(--fhs-navy);
	font-size: clamp(16px, 1.55vw, 20px);
	font-weight: 700;
	letter-spacing: .04em;
}
.ns-plans__tab-sub {
	display: block;
	margin-top: 4px;
	color: #6c6455;
	font-size: clamp(12px, 1.02vw, 13.5px);
	letter-spacing: .02em;
}
.ns-plans__tab-price {
	display: block;
	margin-top: 7px;
	color: var(--nsp-gold);
	font-size: clamp(16px, 1.6vw, 21px);
	font-weight: 700;
	font-feature-settings: "tnum";
	letter-spacing: -.01em;
	white-space: nowrap;
}
.ns-plans__tab-price small { margin-left: 2px; font-size: clamp(11px, .95vw, 12.5px); font-weight: 600; letter-spacing: 0; }
/* 税込は税別の直下へ小さく併記（先方要望・2026-08-21） */
.ns-plans__tab-inc {
	display: block;
	margin-top: 3px;
	color: #6c6455;
	font-size: clamp(11.5px, 1vw, 13px);
	font-weight: 500;
	font-feature-settings: "tnum";
	letter-spacing: 0;
	white-space: nowrap;
}
.ns-plans__tab.is-active { background: var(--nsp-head); border-color: var(--nsp-head); }
.ns-plans__tab.is-active .ns-plans__tab-name { color: #fff; }
.ns-plans__tab.is-active .ns-plans__tab-sub { color: rgba(255, 255, 255, .8); }
.ns-plans__tab.is-active .ns-plans__tab-price { color: #f0d9a4; }
.ns-plans__tab.is-active .ns-plans__tab-inc { color: rgba(255, 255, 255, .8); }

.ns-plan-panel {
	margin-top: 24px;
	scroll-margin-top: calc(var(--fhs-header-h) + 8px);
}
.ns-plan-panel[hidden] { display: none; }
.ns-plans:not(.is-js) .ns-plan-panel + .ns-plan-panel {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid var(--fhs-line);
}
.ns-plan-panel__title {
	margin: 0 0 6px;
	text-align: center;
	color: var(--fhs-navy);
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 700;
	letter-spacing: .05em;
}
/* タブが出ている時はタブ側がプラン名を担うので、見出しは支援技術向けにだけ残す */
.ns-plans.is-js .ns-plan-panel__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}
.ns-plan-panel__lead {
	max-width: 800px;
	margin: 0 auto 18px;
	text-align: center;
	font-size: clamp(14px, 1.05vw, 15px);
	line-height: 1.8;
}

/* カード */
.ns-plan__grid { display: grid; align-items: stretch; gap: 16px; }
@media (min-width: 760px) {
	.ns-plan__grid--2 { grid-template-columns: 1fr 1fr; }
	.ns-plan__grid--2 > .ns-plan-card { height: 100%; }
}
.ns-plan-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--fhs-line);
	border-radius: 4px;
	overflow: hidden;
}
.ns-plan-card--wide { max-width: 860px; width: 100%; margin-inline: auto; }
.ns-plan-card__head {
	padding: 11px 16px 12px;
	background: var(--nsp-head);
	color: #fff;
	text-align: center;
}
.ns-plan-card__area {
	margin: 0;
	color: #fff;
	font-size: clamp(17px, 1.6vw, 21px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .05em;
}
.ns-plan-card__sub {
	margin: 3px 0 0;
	color: rgba(255, 255, 255, .88);
	font-size: 12.5px;
	line-height: 1.5;
}
.ns-plan-card__body { flex: 1; padding: 18px; }

/* 価格。「一般 → 会員 → 大数字 → 税込・おトク」の4段に圧縮する */
.ns-plan-price { text-align: center; }
.ns-plan-price__normal { margin: 0 0 8px; color: #6b6357; font-size: 13px; }
.ns-plan-price__normal-inc { margin-left: 5px; font-size: .9em; }
.ns-plan-price__lbl {
	display: inline-block;
	margin: 0 0 2px;
	color: var(--nsp-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
}
.ns-plan-price__fig {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
	margin: 0;
	color: var(--fhs-navy);
	line-height: 1.02;
}
.ns-plan-price__num {
	font-size: clamp(34px, 3.4vw, 44px);
	font-weight: 700;
	letter-spacing: -.015em;
	font-feature-settings: "tnum";
}
.ns-plan-price__unit { font-size: 15px; font-weight: 700; }
.ns-plan-price__tax { margin-left: 1px; font-size: 12px; font-weight: 600; }
.ns-plan-price__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 14px;
	margin: 7px 0 0;
	color: #6c6455;
	font-size: 13px;
}
.ns-plan-price__save { color: var(--nsp-gold); font-weight: 600; }
.ns-plan-price__save b { font-size: 1.2em; font-weight: 700; }

/* 含まれるもの */
.ns-plan-spec {
	display: grid;
	gap: 8px;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--fhs-line);
	list-style: none;
}
.ns-plan-spec > li {
	position: relative;
	margin: 0;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.6;
}
.ns-plan-spec > li::before {
	content: "";
	position: absolute;
	top: .3em;
	left: 0;
	width: 15px;
	height: 15px;
	background: #15665e;
	-webkit-mask: var(--nsp-check) no-repeat center / contain;
	mask: var(--nsp-check) no-repeat center / contain;
}
/* 見落とされると困る制約(乗船なし等)。チェックにせず短い横線で置く */
.ns-plan-spec > li.is-caution { color: #6c6455; font-size: 13.5px; }
.ns-plan-spec > li.is-caution::before {
	top: .58em;
	width: 11px;
	height: 2px;
	background: #b3aa98;
	-webkit-mask: none;
	mask: none;
}

/* 合同(1枚もの)は価格と内容を左右に置いて間延びを防ぐ */
@media (min-width: 900px) {
	.ns-plan-card--wide .ns-plan-card__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 0 36px;
		padding: 24px 30px;
	}
	.ns-plan-card--wide .ns-plan-spec {
		margin: 0;
		padding: 0 0 0 36px;
		border-top: 0;
		border-left: 1px solid var(--fhs-line);
	}
}

/* プライベート: 主役の価格 + 出港地一覧の2段 */
.ns-plan-hero {
	display: grid;
	gap: 0 36px;
	padding: 22px 26px;
	background: #fff;
	border: 1px solid var(--fhs-line);
	border-radius: 4px;
}
@media (min-width: 900px) {
	.ns-plan-hero { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; }
	.ns-plan-hero .ns-plan-spec {
		margin: 0;
		padding: 0 0 0 36px;
		border-top: 0;
		border-left: 1px solid var(--fhs-line);
	}
}
.ns-plan-hero__from { margin: 8px 0 0; color: #6c6455; font-size: 12.5px; }

.ns-plan__h3 {
	max-width: 800px;
	margin: 22px auto 10px;
	color: var(--fhs-navy);
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 700;
	letter-spacing: .04em;
}
.ns-plan-table__scroll {
	max-width: 800px;
	margin-inline: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid var(--fhs-line);
	border-radius: 4px;
}
.ns-plan-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 14px;
}
.ns-plan-table th,
.ns-plan-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--fhs-line);
	text-align: left;
	vertical-align: middle;
}
.ns-plan-table thead th {
	padding-block: 8px;
	background: var(--fhs-paper);
	color: var(--fhs-navy);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
}
.ns-plan-table tbody tr:last-child > * { border-bottom: 0; }
.ns-plan-table .is-port {
	width: 9.5em;
	border-right: 1px solid var(--fhs-line);
	color: var(--fhs-navy);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .03em;
}
.ns-plan-table .is-port small {
	display: block;
	margin-top: 2px;
	color: #8a8375;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
}
.ns-plan-table .is-cap { width: 6em; white-space: nowrap; font-weight: 700; text-align: center; }
.ns-plan-table .is-normal {
	width: 10em;
	color: #6b6357;
	font-size: 13px;
	white-space: nowrap;
	text-align: right;
}
.ns-plan-table .is-member { width: 15em; text-align: right; white-space: nowrap; }
.ns-plan-table .is-member .num {
	color: var(--fhs-navy);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	font-feature-settings: "tnum";
}
.ns-plan-table .is-member .unit { color: var(--fhs-navy); font-size: 12.5px; font-weight: 700; }
/* 税別と税込が混在している(先方確認待ち)。区分は必ず数字の直後・同じ位置に置いて揃える */
.ns-plan-table .is-member .tax { margin-left: 2px; font-size: 11.5px; font-weight: 600; }
.ns-plan-table .is-member .inc { margin-left: 8px; color: #6c6455; font-size: 12px; font-weight: 400; }
.ns-plan-table .sp-normal { display: none; }

/* 資料請求への導線(3プラン共通・タブの外に1つだけ置く) */
.ns-plan-cta {
	max-width: 860px;
	margin: 30px auto 0;
	padding: 22px 24px 24px;
	background: #fff;
	border: 1px solid var(--fhs-line);
	border-radius: 4px;
	text-align: center;
}
.ns-plan-cta__title {
	margin: 0 0 8px;
	color: var(--fhs-navy);
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .03em;
}
.ns-plan-cta__text { margin: 0 0 16px; color: #5a5348; font-size: 13.5px; line-height: 1.8; }
.ns-plan-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: min(320px, 100%);
	padding: 15px 30px;
	background: var(--fhs-navy);
	border-radius: 2px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background .2s ease;
}
.ns-plan-cta__btn:hover,
.ns-plan-cta__btn:focus-visible { background: var(--nsp-gold); color: #fff; }
.ns-plan-cta__arrow { width: 15px; height: 15px; flex: none; }

@media (max-width: 899px) {
	.ns-plan-hero { padding: 18px 16px; }
}
@media (max-width: 767px) {
	.ns-plans { padding-block: 30px 34px; }
	.ns-plans.is-js .ns-plans__tabs { gap: 5px; margin-top: 16px; }
	.ns-plans__tab { padding: 10px 3px 12px; }
	.ns-plans__tab-name { font-size: 14px; letter-spacing: -.02em; }
	.ns-plans__tab-sub { font-size: 11px; letter-spacing: 0; }
	.ns-plans__tab-price { margin-top: 5px; font-size: 14.5px; }
	.ns-plans__tab-price small { margin-left: 0; font-size: 10px; }
	.ns-plans__tab-inc { margin-top: 2px; font-size: 10px; }
	.ns-plan-panel { margin-top: 18px; }
	.ns-plan-panel__lead { margin-bottom: 14px; text-align: left; }
	.ns-plan-card__body { padding: 16px 14px; }
	/* SP は横スクロールを起こさず1画面に収める。一般価格は列を畳んで会員価格の上に併記する */
	.ns-plan-table { min-width: 0; }
	.ns-plan-table th,
	.ns-plan-table td { padding: 10px 8px; }
	.ns-plan-table .is-port { width: 7.6em; font-size: 14px; }
	.ns-plan-table .is-cap { width: 4.6em; font-size: 13.5px; }
	.ns-plan-table .is-normal { display: none; }
	.ns-plan-table .is-member { width: auto; }
	.ns-plan-table .is-member .num { font-size: 18px; }
	.ns-plan-table .is-member .inc { display: block; margin: 1px 0 0; }
	.ns-plan-table .sp-normal {
		display: block;
		margin-bottom: 1px;
		color: #6b6357;
		font-size: 11.5px;
		font-weight: 400;
	}
	.ns-plan-cta { margin-top: 22px; padding: 18px 16px 20px; }
	.ns-plan-cta__text { text-align: left; }
}

/* =====================================================
 * 10) トップのメインビジュアル(KV)
 *     背景は「文字なし写真」。見出し・価格・出港場所・説明文・
 *     5つのバッジ・資料請求カードはすべてHTMLで組む。
 *     PC: 左右2カラムを写真の上に絶対配置し、上端9%/下端5.5%を
 *         左右で一致させる(構図の重心をそろえる)。
 *     SP(959px以下): 写真を敷き詰め、中身は縦一列に流す。高さは中身が決める。
 *     寸法は KV幅に対する cqw / % 指定のため、画面幅が変わっても比率が崩れない。
 *     フォントは Zen Kaku Gothic New / Shippori Mincho B1(front-pageのみ読込)。
 * ===================================================== */
.ns-kv {
	position: relative;
	container-type: inline-size;
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.ns-kv > picture,
.ns-kv > picture > img { display: block; width: 100%; height: auto; }
.ns-kv__body { position: absolute; inset: 0; }

/* ---- 左右2カラム。上端・下端をそろえて全体の重心を合わせる ---- */
.ns-kv__left,
.ns-kv__right {
	position: absolute;
	top: 9%;
	bottom: 5.5%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ns-kv__left { left: 9%; width: 44%; align-items: flex-start; }
.ns-kv__right { right: 9%; width: 31.4%; align-items: center; }

/* ---------- 左：見出し ---------- */
.ns-kv__head {
	margin: 0;
	color: #fff;
	font-size: 3.15cqw;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .02em;
	text-shadow: 0 2px 10px rgba(3, 32, 60, .45);
	white-space: nowrap;
}
.ns-kv__head b {
	display: inline-block;
	margin-left: .12em;
	padding: .04em .18em .08em;
	background: #fff;
	color: #0a7ddd;
	font-size: 1.12em;
	font-weight: 900;
	letter-spacing: 0;
	text-shadow: none;
	box-shadow: 0 2px 8px rgba(3, 32, 60, .22);
}

/* ---------- 左：追加費用なし ---------- */
.ns-kv__free {
	margin: 0;
	font-size: 1.95cqw;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
}
.ns-kv__free span {
	display: inline-block;
	padding: .1em .4em;
	background: #fffb00;
	color: #111820;
	letter-spacing: .02em;
	box-shadow: 0 2px 8px rgba(3, 32, 60, .22);
}
.ns-kv__free u { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: .07em; }

/* ---------- 左：価格 ---------- */
.ns-kv__price {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: .1em;
	margin: 0;
	color: #fff;
	font-size: 1.95cqw;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 2px 10px rgba(3, 32, 60, .45);
	white-space: nowrap;
}
.ns-kv__price mark {
	display: inline-flex;
	align-items: baseline;
	padding: .06em .3em .12em;
	background: #fffb00;
	color: #111820;
	text-shadow: none;
	box-shadow: 0 2px 8px rgba(3, 32, 60, .22);
}
.ns-kv__price .num {
	font-size: 1.72em;
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1;
}
.ns-kv__price .yen { font-size: 1.05em; font-weight: 900; margin-left: .06em; }
.ns-kv__price .tax { font-size: .62em; font-weight: 700; margin-left: .04em; }
/* 税込は税別の直下へ小さく併記（先方要望・2026-08-21）。
   税別マークと税込を1つの縦組み(.ns-kv__price-main)にまとめる。
   こうしないとSPで .ns-kv__price が折り返した際に
   「45,000円税別 / 説明文 / 税込」の順になり、税込が説明文の下に落ちる。
   塊にしておけば PC(横並び)・SP(縦積み)のどちらでも税込は必ず税別の直下に来る。 */
.ns-kv__price-main {
	display: inline-flex;
	flex-direction: column;
	/* 税込は黄色いマークの「下側エリアの右寄せ」。塊の幅＝マークの幅なので
	   flex-end でマークの右端に揃う（嶋崎指示・2026-08-21） */
	align-items: flex-end;
}
.ns-kv__price-inc {
	margin-top: .3em;
	/* マークの右padding(.3em)と同じ絶対量ぶん内側へ寄せ、(税別)の右端に揃える
	   （黄色の外形に揃えると右へはみ出して見えるため・嶋崎指摘 2026-08-21） */
	padding-right: .52em;
	font-size: .58em;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.3;
}
.ns-kv__price-inc small { font-size: .86em; font-weight: 600; letter-spacing: 0; }

/* ---------- 左：安心価格＋出港場所 ----------
   「安心価格は…」は出港場所の行の左右中央の上に載せる（嶋崎指摘・2026-08-21）。
   塊の幅＝出港場所の行の幅になるため、行に対して正確にセンタリングされる。
   （旧＝padding-left:2.2em の中途半端な字下げで、他の左揃えの行から浮いていた） */
.ns-kv__ports-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75cqw;
}
.ns-kv__trust {
	margin: 0;
	color: #fff;
	font-size: 1.5cqw;
	font-weight: 500;
	letter-spacing: .18em;
	line-height: 1.4;
	text-shadow: 0 2px 9px rgba(3, 32, 60, .5);
}

/* ---------- 左：出港場所 ---------- */
.ns-kv__ports {
	display: flex;
	align-items: center;
	gap: .5cqw;
	font-size: 1.42cqw;
	font-weight: 700;
	line-height: 1;
}
.ns-kv__ports span {
	padding: .34em .5em;
	background: #fff;
	color: #111820;
	letter-spacing: .02em;
	box-shadow: 0 2px 8px rgba(3, 32, 60, .22);
}
.ns-kv__ports .lbl { background: var(--fhs-navy); color: #fff; letter-spacing: .06em; }

/* ---------- 左：説明ボックス（下段=お引き取り無料 を生成り帯で強調） ---------- */
.ns-kv__desc {
	max-width: 100%;
	background: rgba(7, 34, 58, .62);
	color: #fff;
	font-size: 1.3cqw;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: .01em;
	text-shadow: 0 1px 4px rgba(3, 32, 60, .5);
}
.ns-kv__desc p { margin: 0; }
.ns-kv__desc-lead { padding: 1.15cqw 1.5cqw 1.2cqw; }
.ns-kv__desc-free {
	padding: 1cqw 1.5cqw 1.1cqw;
	background: #f7f4ee;
	color: var(--fhs-navy);
	font-size: 1.45cqw;
	font-weight: 700;
	line-height: 1.55;
	text-shadow: none;
}
.ns-kv__desc-free b { background: linear-gradient(transparent 62%, #f5e07a 62%); font-weight: 700; }

/* ---------- 右：バッジ（金の月桂冠素材を背景に敷き、文字は円面の位置にHTMLで載せる） ---------- */
.ns-kv__badges { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.ns-kv__badge-row { display: flex; justify-content: center; gap: 1.5cqw; }
.ns-kvb {
	position: relative;
	width: 8.8cqw;
	aspect-ratio: 511 / 490;
	background: url("../../../../uploads/2026/08/badge-laurel01.png") center / 100% 100% no-repeat;
	filter: drop-shadow(0 .25cqw .6cqw rgba(4, 30, 60, .3));
}
/* 素材の円面(上20%・下26%・左右23%)に合わせて文字を絶対配置(%はタイル自身が基準) */
.ns-kvb__txt {
	position: absolute;
	inset: 20% 23% 26% 23%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0a7ddd;
	font-size: max(10px, 1.14cqw);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	text-align: center;
	white-space: nowrap;
}

/* ---------- 右：資料請求カード ---------- */
.ns-kv__cta {
	width: 100%;
	background: linear-gradient(180deg, #fffdf8 0%, #f7f4ee 100%);
	border: 1px solid rgba(138, 102, 8, .38);
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(4, 30, 60, .3);
	overflow: hidden;
	text-align: center;
}
.ns-kv__cta-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	margin: 0;
	padding: max(6px, .55cqw) 1cqw;
	background: var(--fhs-navy);
	color: #fff;
	font-size: max(11px, 1.12cqw);
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.4;
}
.ns-kv__cta-ico { width: 1.15em; height: 1.15em; flex: none; }
.ns-kv__cta-body { padding: max(9px, .95cqw) max(11px, 1.15cqw) max(10px, 1.05cqw); }
.ns-kv__cta-title {
	margin: 0;
	color: var(--fhs-navy);
	font-size: max(13px, 1.4cqw);
	font-weight: 700;
	line-height: 1.5;
}
.ns-kv__cta-title b { background: linear-gradient(transparent 62%, #f5e07a 62%); font-weight: 700; }
.ns-kv__cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	margin-top: max(8px, .85cqw);
	padding: max(9px, .92cqw) max(10px, .8cqw);
	background: linear-gradient(180deg, #a87d10 0%, #8a6608 100%);
	border-radius: 4px;
	box-shadow: 0 3px 0 #664905;
	color: #fff;
	font-size: max(13px, 1.38cqw);
	font-weight: 700;
	letter-spacing: .05em;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.ns-kv__cta-btn:hover,
.ns-kv__cta-btn:focus-visible {
	background: linear-gradient(180deg, #b98c17 0%, #9a730c 100%);
	box-shadow: 0 2px 0 #664905;
	color: #fff;
	transform: translateY(1px);
}
.ns-kv__cta-arrow { width: .95em; height: .95em; flex: none; }
.ns-kv__cta-note {
	margin: max(6px, .7cqw) 0 0;
	color: #57626e;
	font-size: max(10px, .92cqw);
	line-height: 1.5;
}

/* ---------- 見出しと安心コピーは明朝（品位）／中身はゴシック（可読性） ---------- */
.ns-kv__head,
.ns-kv__trust {
	font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-weight: 600;
}
.ns-kv__head { letter-spacing: .045em; }
.ns-kv__head b {
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: 900;
}

/* =====================================================
 * スマートフォン（959px以下）
 * 写真を敷き詰め、中身は縦一列に流す。高さは中身が決める。
 * ===================================================== */
@media (max-width: 959px) {
	.ns-kv > picture { position: absolute; inset: 0; }
	.ns-kv > picture > img { width: 100%; height: 100%; object-fit: cover; }

	.ns-kv__body {
		/* 写真を absolute で敷くため、中身は relative + z-index で必ず上に載せる */
		position: relative;
		z-index: 1;
		inset: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: min(2.6cqw, 13px);
		padding: min(5.6cqw, 30px) min(4.6cqw, 26px) min(4.8cqw, 25px);
	}
	.ns-kv__left,
	.ns-kv__right,
	.ns-kv__badge-row { display: contents; }

	/* 見出しは「海洋散骨実績」「1,000件以上」の2行に分け、大きく主役にする */
	.ns-kv__head { order: 1; font-size: min(9.2cqw, 42px); text-align: center; }
	.ns-kv__head b { display: block; width: fit-content; margin: .14em auto 0; }
	.ns-kv__free { order: 2; font-size: min(5.3cqw, 24px); text-align: center; }
	.ns-kv__price {
		order: 3;
		justify-content: center;
		flex-wrap: wrap;
		row-gap: .2em;
		font-size: min(5cqw, 23px);
		white-space: normal;
		text-align: center;
	}
	/* SPは税込を「税別の右側へ小さく」横並びにする（嶋崎指示・2026-08-21）。
	   小さい税込だけを1行で単体表示すると、かえってそこが目立ってしまうため。
	   説明文だけを次の行へ回す（flex: 1 0 100%）。 */
	.ns-kv__price-main {
		flex-direction: row;
		align-items: baseline;
		gap: .4em;
	}
	.ns-kv__price-lead { flex: 1 0 100%; }
	.ns-kv__price-inc { margin-top: 0; font-size: .55em; letter-spacing: .02em; }
	/* SPは従来どおり全幅・中央寄せ（塊にしても見た目は変えない） */
	.ns-kv__ports-wrap { order: 4; align-items: stretch; gap: min(1.8cqw, 9px); }
	.ns-kv__trust {
		font-size: min(3.9cqw, 18px);
		letter-spacing: .12em;
		text-align: center;
	}
	.ns-kv__ports {
		flex-wrap: wrap;
		justify-content: center;
		gap: min(1.5cqw, 8px);
		font-size: min(3.05cqw, 14px);
	}
	.ns-kv__price-inc { padding-right: 0; }
	.ns-kv__badges {
		order: 6;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: min(1.5cqw, 8px);
		margin-top: min(1.2cqw, 6px);
	}
	.ns-kvb { width: min(22cqw, 100px); }
	.ns-kvb__txt { font-size: min(2.8cqw, 12px); }

	.ns-kv__desc {
		order: 7;
		margin-top: min(1.2cqw, 6px);
		font-size: min(3.6cqw, 16px);
		line-height: 1.65;
		text-align: center;
	}
	.ns-kv__desc-lead { padding: min(3.2cqw, 17px) min(4.2cqw, 22px) min(2.9cqw, 15px); }
	.ns-kv__desc-free {
		padding: min(2.9cqw, 15px) min(4.2cqw, 22px) min(3.2cqw, 17px);
		font-size: min(4.2cqw, 19px);
		line-height: 1.6;
	}
	/* SPの資料請求導線は画面下部の固定バーが常時担うため、KV内のカードは出さない
	   (1画面にメインビジュアルを収めるため) */
	.ns-kv__cta { display: none; }
}

/* =====================================================
 * 11) SP: 「最新情報」バナーの横スライド
 *     2列折り返し(1枚175px)では画像内の文字が読めないため、SPだけ横送りにする。
 *     1枚240pxで次の1枚を覗かせ、続きがあることを黙って伝える。
 *     位置表示のドットは site.js が生成する。
 * ===================================================== */
@media (max-width: 781px) {
	.ns-lp-top .ns-news-cols.wp-block-columns {
		flex-wrap: nowrap !important;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-bottom: 0;
		padding-bottom: 2px;
		/* 右端をわずかに沈める。末端まで送ったら site.js が is-scroll-end を付けて外す */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), rgba(0, 0, 0, .28));
		mask-image: linear-gradient(to right, #000 calc(100% - 40px), rgba(0, 0, 0, .28));
	}
	.ns-lp-top .ns-news-cols.wp-block-columns.is-scroll-end {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.ns-lp-top .ns-news-cols.wp-block-columns::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}
	.ns-lp-top .ns-news-cols.wp-block-columns > .wp-block-column {
		flex: 0 0 240px !important;
		width: 240px;
		min-width: 240px;
		max-width: 240px;
		scroll-snap-align: start;
	}
	/* 初回だけ、ごく浅く左へ送って戻す。指を動かす場所だと分かればそれでよい */
	.ns-lp-top .ns-news-cols.wp-block-columns.is-hint {
		animation: fhs-news-hint 1.15s cubic-bezier(.33, 0, .2, 1) .3s 1;
	}
	.ns-news-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 7px;
		margin-top: 10px;
	}
	.ns-news-dots__dot {
		width: 7px;
		height: 7px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #cdc7bb;
		cursor: pointer;
		transition: width .22s ease, background-color .22s ease;
	}
	.ns-news-dots__dot.is-current {
		width: 20px;
		border-radius: 4px;
		background: var(--fhs-navy);
	}
}
@keyframes fhs-news-hint {
	0% { transform: translateX(0); }
	46% { transform: translateX(-16px); }
	100% { transform: translateX(0); }
}
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	.ns-lp-top .ns-news-cols.wp-block-columns.is-hint { animation: none; }
	.ns-news-dots__dot { transition: none; }
}
/* PCではドットを出さない(3枚とも見えているため) */
@media (min-width: 782px) {
	.ns-news-dots { display: none; }
}

/* =====================================================
 * 12) 出港スケジュール(トップ・部品 shukkou-schedule)
 *     画像1枚だった予定表をHTMLへ。過ぎた回は site.js が「受付終了」に落とす。
 * ===================================================== */
.fh-sched {
	margin-block-start: 44px;
	padding: 34px 0 4px;
	border-top: 1px solid var(--fhs-line);
}
.fh-sched__inner {
	max-width: 1100px;
	width: 94%;
	margin: 0 auto;
}
.fh-sched__head { text-align: center; margin-bottom: 22px; }
.fh-sched__ttl {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: var(--fhs-navy);
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
}
.fh-sched__sub {
	margin: 0 0 6px;
	color: var(--fhs-gold);
	font-size: clamp(13px, 1.1vw, 15px);
	font-weight: 700;
	letter-spacing: .12em;
}
.fh-sched__lead {
	margin: 0;
	color: #5b5550;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.75;
	text-wrap: pretty;
}

.fh-sched__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0 0 20px;
	padding: 0;
}
.fh-sched__item {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 16px 16px 15px;
	background: #fff;
	border: 1px solid var(--fhs-line);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(12, 38, 71, .06);
	transition: box-shadow .25s ease, transform .25s ease;
}
.fh-sched__item[data-state="next"] {
	border-color: var(--fhs-gold);
	box-shadow: 0 6px 18px rgba(184, 153, 98, .22);
}
.fh-sched__item[data-state="closed"] {
	background: #f6f4f0;
	border-color: #e6e2da;
	box-shadow: none;
}
.fh-sched__state {
	align-self: flex-start;
	margin: 0 0 10px;
	padding: 3px 10px;
	border-radius: 3px;
	background: var(--fhs-paper);
	color: #6c665e;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
}
.fh-sched__item[data-state="next"] .fh-sched__state {
	background: var(--fhs-gold);
	color: #fff;
}
.fh-sched__item[data-state="closed"] .fh-sched__state {
	background: #e3ded4;
	color: #857e73;
}
.fh-sched__date {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0 0 10px;
	color: var(--fhs-navy);
	line-height: 1;
}
.fh-sched__num {
	font-size: clamp(30px, 2.9vw, 38px);
	font-weight: 800;
	letter-spacing: -.02em;
}
.fh-sched__unit {
	font-size: .46em;
	font-weight: 700;
	margin: 0 1px 0 2px;
}
.fh-sched__dow {
	font-size: 13px;
	font-weight: 700;
	color: #6c665e;
}
.fh-sched__meta {
	margin: 0;
	padding-top: 11px;
	border-top: 1px solid var(--fhs-line);
}
.fh-sched__port {
	display: block;
	color: var(--fhs-navy);
	font-size: clamp(15px, 1.3vw, 17px);
	font-weight: 700;
	line-height: 1.5;
}
.fh-sched__time {
	display: block;
	margin-top: 3px;
	color: #5b5550;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}
.fh-sched__item[data-state="closed"] .fh-sched__date,
.fh-sched__item[data-state="closed"] .fh-sched__port { color: #8b847a; }
.fh-sched__item[data-state="closed"] .fh-sched__time { color: #948d82; }

.fh-sched__allover {
	margin: 0 0 20px;
	padding: 14px 16px;
	background: var(--fhs-paper);
	border-radius: 8px;
	color: var(--fhs-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
}

.fh-sched__plans {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 18px;
}
.fh-sched__plan {
	padding: 16px 18px;
	background: var(--fhs-paper);
	border-radius: 10px;
}
.fh-sched__plan-name {
	margin: 0 0 6px;
	color: var(--fhs-navy);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .04em;
}
.fh-sched__plan-desc {
	margin: 0 0 11px;
	color: #5b5550;
	font-size: 13px;
	line-height: 1.7;
	text-wrap: pretty;
}
.fh-sched__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	margin: 0;
}
.fh-sched__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
}
.fh-sched__price-label {
	color: #6c665e;
	font-size: 12px;
	font-weight: 700;
}
.fh-sched__price-main {
	color: var(--fhs-red);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.fh-sched__price--normal .fh-sched__price-main {
	color: var(--fhs-ink);
	font-size: 17px;
}
.fh-sched__price-tax { font-size: .58em; font-weight: 700; }
.fh-sched__price-inc {
	color: #6c665e;
	font-size: 11px;
	font-weight: 500;
}
.fh-sched__note {
	margin: 0 0 18px;
	color: #6c665e;
	font-size: 12px;
	line-height: 1.75;
	text-wrap: pretty;
}
.fh-sched__note a { color: var(--fhs-navy); }

.fh-sched__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
}
.fh-sched__btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 268px;
	padding: 13px 24px;
	border-radius: 6px;
	text-decoration: none;
	line-height: 1.35;
	transition: background-color .2s ease, opacity .2s ease;
}
.fh-sched__btn--doc {
	flex-direction: row;
	background: var(--fhs-gold);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
}
.fh-sched__btn--doc:hover { background: #a5854f; color: #fff; }
.fh-sched__btn--tel {
	background: #fff;
	border: 1px solid var(--fhs-navy);
	color: var(--fhs-navy);
}
.fh-sched__btn--tel:hover { background: #f2f5f9; color: var(--fhs-navy); }
.fh-sched__btn-num {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: .02em;
}
.fh-sched__btn-ico { width: 1em; height: 1em; flex: none; }
.fh-sched__btn-note { font-size: 11px; font-weight: 600; color: #5b5550; }
.fh-sched__btn-arrow { width: 1em; height: 1em; margin-left: 6px; }

@media (max-width: 959px) {
	.fh-sched { margin-block-start: 32px; padding: 26px 0 2px; }
	.fh-sched__head { margin-bottom: 16px; }
	/* 導入文の改行位置はPC向け。狭い幅では自然に流して短い行を作らない */
	.fh-sched__lead br { display: none; }
	.fh-sched__list { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
	.fh-sched__item {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 0 14px;
		padding: 11px 14px;
	}
	.fh-sched__state {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		margin: 0 0 3px;
		padding: 2px 8px;
		font-size: 10px;
	}
	.fh-sched__date {
		grid-column: 1;
		grid-row: 1 / span 2;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		margin: 0;
		min-width: 68px;
	}
	.fh-sched__num { font-size: 27px; }
	.fh-sched__dow { font-size: 12px; }
	.fh-sched__meta {
		grid-column: 2;
		grid-row: 2;
		padding-top: 0;
		border-top: 0;
	}
	.fh-sched__port { font-size: 15px; }
	.fh-sched__time { margin-top: 1px; font-size: 12px; }
	.fh-sched__plans { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
	.fh-sched__plan { padding: 13px 14px; }
	.fh-sched__plan-desc { margin-bottom: 8px; }
	.fh-sched__price-main { font-size: 19px; }
	.fh-sched__cta { flex-direction: column; gap: 9px; }
	.fh-sched__btn { min-width: 0; width: 100%; }
}

/* =====================================================
 * 13) SP: 散骨プラン比較表のヘッダー行を追従させる
 *     .fh-table-scroll は overflow-x:auto なので中の sticky はページ縦スクロールに
 *     追従しない。site.js が thead の複製を position:fixed で出し、横位置を同期する。
 * ===================================================== */
.fh-stickyhead {
	position: fixed;
	z-index: 900;
	padding: 0;
	/* 自分ではスクロールしない。横位置は中のテーブルを transform で動かして合わせる
	 * (scrollLeft を書くと合成スレッドのスクロールが主スレッド同期に落ちて、
	 *  指を離したあとの慣性が途切れる) */
	overflow: hidden;
	background: #fff;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 6px 14px rgba(12, 38, 71, .16);
	/* タッチは下の本体へ素通しする。複製は aria-hidden なので操作性は落ちない */
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition: opacity .16s ease;
	will-change: transform;
}
.fh-stickyhead.is-show { visibility: visible; opacity: 1; }
/* 名前空間クラス(.p-fh-compare)を併せ持たせているので、そちらの余白だけ打ち消す */
.fh-stickyhead.p-fh-compare { padding: 0; }
.fh-stickyhead .fh-table {
	/* 本体と同じ罫線の出方にする(本体は separate + border-spacing:0) */
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	margin: 0;
	will-change: transform;
}
.fh-stickyhead .fh-th { white-space: nowrap; }
/* 左端ラベル列は本体と同じく動かさない。複製は自分ではスクロールしないので
 * sticky は効かず、site.js がテーブルと同じ量だけ逆向きに戻す。 */
.fh-stickyhead .fh-th.is-label { will-change: transform; }
@media (min-width: 960px) {
	.fh-stickyhead { display: none; }
}

/* =====================================================
 * 14) SP開閉メニュー: 通常リンク(2列)＋資料請求CTA＋電話CTA
 *     どの端末でも1画面に収めるため、リンクは2列の罫線グリッドまで詰める。
 * ===================================================== */
@media (max-width: 959px) {
	.site-spnav__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.site-spnav__list li {
		margin: 0;
		border-bottom: 1px solid var(--fhs-line);
	}
	.site-spnav__list li:nth-child(odd) { border-right: 1px solid var(--fhs-line); }
	/* 項目数が奇数のときの最後の1つは、空セルを作らず横いっぱいに使う */
	.site-spnav__list li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		border-right: 0;
	}
	.site-spnav__list a {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 8px 12px;
		color: var(--fhs-navy);
		font-size: 12px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: .01em;
		text-decoration: none;
	}

	.site-spcta {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 11px 12px 13px;
		background: var(--fhs-paper);
	}
	.site-spcta__card {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		background: #fff;
		border: 1px solid var(--fhs-line);
		border-radius: 8px;
		text-decoration: none;
		box-shadow: 0 1px 4px rgba(12, 38, 71, .07);
	}
	.site-spcta__thumb {
		flex: none;
		width: 62px;
		border-radius: 2px;
		box-shadow: 0 2px 6px rgba(12, 38, 71, .22);
	}
	.site-spcta__body { flex: 1 1 auto; min-width: 0; }
	.site-spcta__ttl {
		display: block;
		color: var(--fhs-navy);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.45;
		letter-spacing: .01em;
	}
	.site-spcta__note {
		display: block;
		margin-top: 3px;
		color: #6c665e;
		font-size: 11px;
		line-height: 1.55;
	}
	.site-spcta__go {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		margin-top: 7px;
		padding: 7px 12px;
		border-radius: 4px;
		background: var(--fhs-gold);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .02em;
	}
	.site-spcta__go-arrow { width: 1em; height: 1em; }
	.site-spcta--tel { display: block; text-align: center; }
	.site-spcta__tel-lead {
		display: block;
		color: var(--fhs-navy);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .02em;
	}
	.site-spcta__tel-num {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		margin-top: 2px;
		color: var(--fhs-navy);
		font-size: 27px;
		font-weight: 800;
		letter-spacing: .02em;
		line-height: 1.15;
	}
	.site-spcta__tel-ico { width: .8em; height: .8em; flex: none; }
	.site-spcta__tel-note {
		display: block;
		margin-top: 2px;
		color: #6c665e;
		font-size: 11px;
		font-weight: 600;
	}
}
/* 縦の狭い端末(iPhone SE等)は行間をもう一段だけ詰めて1画面を守る */
@media (max-width: 959px) and (max-height: 700px) {
	.site-spnav__list a { padding: 7px 10px; font-size: 11.5px; }
	.site-spcta { gap: 7px; padding: 9px 10px 11px; }
	.site-spcta__card { padding: 8px 10px; gap: 10px; }
	.site-spcta__thumb { width: 56px; }
	.site-spcta__ttl { font-size: 13px; }
	.site-spcta__go { margin-top: 6px; padding: 6px 11px; }
	.site-spcta__tel-num { font-size: 25px; }
}