/* =========================================================================
   v2（2026-10-20）：全体の質感を「今のサイト」と「LP バナー」の中間へ
   - 骨格・文言・並び順は変えない。色・角丸・影・光・動きだけを足す
   - トップの HTML はインライン style が多いので、上書きが要るところだけ !important
   - 色：ロゴの明るい緑 #78B830 / 中間 #5A9A2E / 深い #3E7E25、金 #C9A24A → #E6C977
   - 「構造から読む」など見出しの文字色は変えない
   ========================================================================= */
:root {
	--v2-logo: #78B830;
	--v2-leaf: #9BD04F;
	--v2-mid: #5A9A2E;
	--v2-deep: #3E7E25;
	--v2-ink-green: #2C6A1E;
	--v2-gold: #C9A24A;
	--v2-gold-l: #E6C977;
	--v2-gold-d: #8C6A1C;
	--v2-cream: #FBFAF6;
}

/* -------------------------------------------------------------------------
   PC ヘッダーのメニュー：押せることが分かるように
   文字の大きさ・並び・折り返し位置は変えない（横の余白は負のマージンで相殺）
   ------------------------------------------------------------------------- */
.bmk-hd--pc nav a.scp1 {
	position: relative;
	padding: 4px 10px !important;
	margin: 0 -10px;
	border-bottom-color: transparent !important;
	border-radius: 6px;
	cursor: pointer;
	transition: color .2s, background-color .25s;
}
.bmk-hd--pc nav a.scp1::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--v2-deep), var(--v2-logo));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.bmk-hd--pc nav a.scp1:hover {
	color: var(--v2-ink-green) !important;
	background-color: rgba(120, 184, 48, .11);
}
.bmk-hd--pc nav a.scp1:hover::after { transform: scaleX(1); }
/* 現在地：下線を常に出し、太字気味（文字の幅が変わらない text-shadow で太らせる） */
.bmk-hd--pc nav a.scp1[aria-current="page"],
.bmk-hd--pc nav a.scp1[data-bmk-current] {
	color: var(--v2-ink-green) !important;
	text-shadow: .3px 0 0 currentColor, -.1px 0 0 currentColor;
}
.bmk-hd--pc nav a.scp1[aria-current="page"]::after,
.bmk-hd--pc nav a.scp1[data-bmk-current]::after { transform: scaleX(1); }
.bmk-hd--pc nav a.scp1:focus-visible,
.bmk-hd a:focus-visible,
.bmk-hd button:focus-visible {
	outline: 2px solid var(--v2-logo);
	outline-offset: 2px;
	border-radius: 6px;
}
/* トップの「#top」を指す HOME も押せる */
.bmk-hd--pc nav a.scp1[href] { cursor: pointer; }

/* -------------------------------------------------------------------------
   主ボタン（緑〜明るい緑のグラデーション・丸い・→ がホバーで動く）
   対象：ヘッダーの「資料請求・お問い合わせ」、スマホのメニュー内の同ボタン、旧FV、下層の .bmk-btn--fill
   ------------------------------------------------------------------------- */
.bmk-hd--pc a.scp0,
.bmk-hd--sp .bmk-drawer > a,
.bmk-top a.scp0,
body.bmk-sub a.bmk-btn--fill {
	gap: 10px;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(120deg, var(--v2-ink-green) 0%, #46862A 100%) !important;
	color: var(--v2-cream) !important;
	box-shadow: 0 6px 18px rgba(62, 126, 37, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
	transition: box-shadow .25s, transform .25s, filter .25s;
}
.bmk-hd--pc a.scp0 { padding: 0 20px 0 24px !important; }
.bmk-hd--pc a.scp0::after,
.bmk-hd--sp .bmk-drawer > a::after,
.bmk-top a.scp0::after,
.bmk-top a.scp2::after,
.bmk-top a.scp5::after,
.bmk-top a.scp6::after,
body.bmk-sub a.bmk-btn:not([target="_blank"])::after {
	content: "→";
	display: inline-block;
	margin-left: 2px;
	line-height: 1;
	transition: transform .25s;
}
.bmk-hd--pc a.scp0:hover,
.bmk-hd--sp .bmk-drawer > a:hover,
.bmk-top a.scp0:hover,
body.bmk-sub a.bmk-btn--fill:hover {
	color: var(--v2-cream) !important;
	filter: brightness(1.08);
	box-shadow: 0 10px 26px rgba(120, 184, 48, .38), inset 0 1px 0 rgba(255, 255, 255, .2);
	transform: translateY(-1px);
}
.bmk-hd a:hover::after,
.bmk-top a.scp0:hover::after,
.bmk-top a.scp2:hover::after,
.bmk-top a.scp5:hover::after,
.bmk-top a.scp6:hover::after,
body.bmk-sub a.bmk-btn:hover::after { transform: translateX(4px); }
.bmk-hd--pc nav a.scp1:hover::after { transform: scaleX(1); } /* 上の矢印の動きをナビの下線に当てない */

/* 枠だけのボタン（旧FV の 2 つ目・下層の .bmk-btn） */
.bmk-top a.scp2,
body.bmk-sub a.bmk-btn {
	gap: 10px;
	border-radius: 999px !important;
	transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.bmk-top a.scp2:hover { background: rgba(120, 184, 48, .1); color: var(--v2-ink-green); border-color: var(--v2-mid) !important; }

/* 最後のお問い合わせの帯のボタン */
.bmk-top a.scp5,
.bmk-top a.scp6,
body.bmk-sub a.bmk-btn--light,
body.bmk-sub a.bmk-btn--line-light {
	gap: 10px;
	border-radius: 999px !important;
	transition: background-color .25s, transform .25s, box-shadow .25s;
}
.bmk-top a.scp5 { box-shadow: 0 8px 24px rgba(16, 40, 12, .25); color: var(--v2-ink-green) !important; }
.bmk-top a.scp5:hover { transform: translateY(-1px); background: #FFFFFF !important; color: var(--v2-ink-green) !important; }
.bmk-top a.scp6:hover { background: rgba(251, 250, 246, .12); color: var(--v2-cream); }

/* 文字リンクの → はホバーで動く */
.bmk-top a > span[aria-hidden="true"],
body.bmk-sub .bmk-link-arrow > span[aria-hidden="true"] { display: inline-block; transition: transform .25s; }
.bmk-top a:hover > span[aria-hidden="true"],
body.bmk-sub .bmk-link-arrow:hover > span[aria-hidden="true"] { transform: translateX(4px); }

/* 代表挨拶の「続きを読む」 */
#message .bmk-msg-more { border-radius: 999px !important; transition: background .25s, color .25s, transform .25s; }

/* 認定の段階図・カードの金枠：新しい金に揃える（rgb(191,153,61) → #C9A24A） */
.bmk-top [style*="border: 1px solid rgb(191, 153, 61)"] { border-color: var(--v2-gold) !important; }

/* -------------------------------------------------------------------------
   節の英字の小見出しに、金の短い線
   ------------------------------------------------------------------------- */
.bmk-top p.bmk-eyebrow,
body.bmk-sub .bmk-en,
body.bmk-sub .bmk-page-en {
	display: flex;
	align-items: center;
	gap: 12px;
}
.bmk-top p.bmk-eyebrow::before,
body.bmk-sub .bmk-en::before,
body.bmk-sub .bmk-page-en::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--v2-gold), var(--v2-gold-l));
}
/* 3つの柱のカードの中は線を短く */
.bmk-top .bmk-pillars p.bmk-eyebrow::before { width: 18px; }

/* -------------------------------------------------------------------------
   旧既定 FV（?fv=old）の見出し：「覚える」は控えめ、「使える」が主役
   クリーム地の上なので、明るい金・緑は使わず深い金 → 深い緑（どの位置でも 3:1 以上）
   ------------------------------------------------------------------------- */
.bmk-top .bmk-em-soft { font-style: normal; color: #6F7F62; font-weight: 600; }
.bmk-top .bmk-em-key {
	font-style: normal;
	color: var(--v2-deep);
	background: linear-gradient(100deg, #8C6A1C 0%, #7A6A1E 30%, #4C8A24 70%, #3E7E25 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* -------------------------------------------------------------------------
   カード：角丸・うっすら影・ホバーで少し浮く
   ------------------------------------------------------------------------- */
.bmk-top #anatomy article,
.bmk-top .bmk-guide article,
body.bmk-sub .bmk-card {
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(31, 42, 24, .04), 0 12px 32px -18px rgba(31, 42, 24, .28);
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.bmk-top #anatomy article:hover,
.bmk-top .bmk-guide article:hover,
body.bmk-sub a.bmk-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(31, 42, 24, .05), 0 22px 40px -18px rgba(62, 126, 37, .38);
}
/* 写真の枠 */
.bmk-top #about figure,
.bmk-top #message figure { border-radius: 14px !important; box-shadow: 0 24px 48px -28px rgba(31, 42, 24, .45); }
body.bmk-sub .bmk-figure { border-radius: 14px; }

/* -------------------------------------------------------------------------
   平板さを減らす：薄い光のにじみと、FV の線と同じ言語の細い曲線（やり過ぎない）
   ------------------------------------------------------------------------- */
.bmk-top #about,
.bmk-top #anatomy,
.bmk-top .bmk-guide { position: relative; isolation: isolate; }
.bmk-top #about::before,
.bmk-top #anatomy::before,
.bmk-top .bmk-guide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.bmk-top #about::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath d='M-20 520 C 320 470 560 360 820 250 S 1250 70 1460 40' fill='none' stroke='%2378B830' stroke-opacity='.22' stroke-width='1.4'/%3E%3Cpath d='M-20 570 C 360 520 620 410 880 300 S 1290 120 1460 92' fill='none' stroke='%23C9A24A' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
		radial-gradient(42% 60% at 88% 22%, rgba(230, 201, 119, .16), transparent 70%),
		radial-gradient(40% 55% at 4% 90%, rgba(120, 184, 48, .09), transparent 70%);
}
.bmk-top #anatomy::before {
	background: radial-gradient(38% 50% at 96% 6%, rgba(120, 184, 48, .10), transparent 70%),
		radial-gradient(30% 40% at 2% 60%, rgba(230, 201, 119, .12), transparent 70%);
}
.bmk-top .bmk-guide::before {
	background: radial-gradient(40% 70% at 50% 0%, rgba(230, 201, 119, .13), transparent 70%);
}

/* -------------------------------------------------------------------------
   「手技を、感覚のままにしない。」（#research）：ほぼ黒 → ロゴの明るい緑系
   文字が載る左側を暗めに、図の側（右上）を明るく。本文の白は 4.5:1 以上を保つ
   ------------------------------------------------------------------------- */
.bmk-top section.bmk-sci {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(48% 62% at 82% 34%, rgba(106, 170, 47, .95) 0%, rgba(106, 170, 47, 0) 70%),
		linear-gradient(118deg, #285C1A 0%, #346F20 38%, #3B7A24 70%, #3E7E25 100%) !important;
}
.bmk-top section.bmk-sci::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-40 780 C 300 720 560 600 820 470 S 1240 220 1480 160' stroke='%23C9F27A' stroke-opacity='.22' stroke-width='1.4'/%3E%3Cpath d='M-40 840 C 340 780 620 660 880 530 S 1280 290 1480 230' stroke='%23E6C977' stroke-opacity='.22' stroke-width='1'/%3E%3Cpath d='M-40 300 C 260 260 480 200 700 120' stroke='%23C9F27A' stroke-opacity='.12' stroke-width='1'/%3E%3C/g%3E%3Cg fill='%23F3E2A6'%3E%3Ccircle cx='820' cy='470' r='3' fill-opacity='.55'/%3E%3Ccircle cx='1120' cy='300' r='2.2' fill-opacity='.45'/%3E%3Ccircle cx='420' cy='690' r='2' fill-opacity='.4'/%3E%3Ccircle cx='1300' cy='220' r='1.6' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
		radial-gradient(1.2px 1.2px at 20% 30%, rgba(243, 226, 166, .5), transparent),
		radial-gradient(1px 1px at 64% 72%, rgba(243, 226, 166, .45), transparent),
		radial-gradient(1.4px 1.4px at 86% 58%, rgba(243, 226, 166, .4), transparent);
}
/* 1 列になる幅では、文字の後ろに明るい面が来ないよう光の玉を外し、上から下へ深い緑の範囲で変える */
@media (max-width: 1023px) {
	.bmk-top section.bmk-sci {
		background: linear-gradient(170deg, #285C1A 0%, #346F20 45%, #3B7A24 80%, #3E7E25 100%) !important;
	}
}
/* 英字・線・リンクの色：緑の地に合わせて金へ */
.bmk-top section.bmk-sci p.bmk-eyebrow,
.bmk-top section.bmk-sci li p:first-child { color: #F3DFA0 !important; }
.bmk-top section.bmk-sci ul { border-top-color: rgba(251, 250, 246, .28) !important; }
.bmk-top section.bmk-sci li { border-left-color: rgba(251, 250, 246, .28) !important; }
.bmk-top section.bmk-sci a.scp3 { border-bottom-color: var(--v2-gold-l) !important; }
.bmk-top section.bmk-sci p[style*="ui-monospace"] { color: #F3DFA0 !important; border-color: rgba(243, 223, 160, .6) !important; background: rgba(16, 40, 12, .35); }
/* 右の人体図：明るい地で浮かないよう、角丸の暗いパネルに入れる */
.bmk-top section.bmk-sci figure {
	border-radius: 16px !important;
	background: #0F2010 !important;
	box-shadow: 0 30px 60px -24px rgba(8, 24, 8, .7), 0 0 0 1px rgba(230, 201, 119, .28), 0 0 60px -10px rgba(155, 208, 79, .35);
}

/* -------------------------------------------------------------------------
   数字の帯：ロゴの緑系。数字は金 → 明るい緑のグラデーション（大きな文字で 3:1 以上）
   ------------------------------------------------------------------------- */
.bmk-top section.bmk-stats {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(40% 120% at 100% 0%, rgba(155, 208, 79, .28), transparent 70%),
		radial-gradient(30% 90% at 0% 100%, rgba(230, 201, 119, .12), transparent 70%),
		linear-gradient(120deg, #255A19 0%, #2E6A1E 50%, #346F20 100%) !important;
}
.bmk-top section.bmk-stats dl > div { border-left-color: rgba(230, 201, 119, .45) !important; }
.bmk-top section.bmk-stats dd.bmk-num {
	background: linear-gradient(100deg, #F6E4A8 0%, #E6C977 40%, #C8E58A 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #E6C977 !important;
}
.bmk-top section.bmk-stats dd.bmk-num span { -webkit-text-fill-color: #FBFAF6; }

/* -------------------------------------------------------------------------
   最後の「まず、話を聞いてみてください。」の帯：ロゴの緑系に光
   本文の白が載る中央は #3E7E25 程度までにとどめる（4.5:1 以上）
   ------------------------------------------------------------------------- */
.bmk-top section#contact,
body.bmk-sub .bmk-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(36% 70% at 0% 0%, rgba(155, 208, 79, .30), transparent 70%),
		radial-gradient(30% 70% at 100% 100%, rgba(230, 201, 119, .22), transparent 70%),
		linear-gradient(135deg, #285E1B 0%, #326C20 50%, #3B7A24 100%) !important;
}
.bmk-top section#contact::before,
body.bmk-sub .bmk-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cg fill='none'%3E%3Cpath d='M-20 420 C 300 380 560 300 800 220 S 1240 60 1460 30' stroke='%23C9F27A' stroke-opacity='.2' stroke-width='1.3'/%3E%3Cpath d='M-20 470 C 340 430 620 350 860 270 S 1280 110 1460 80' stroke='%23E6C977' stroke-opacity='.22' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* -------------------------------------------------------------------------
   見出しを語の途中で折らない（Chrome / Edge は word-break: auto-phrase が文節で折る）。
   既存の nowrap / <wbr> の指定はそのまま効く。auto-phrase が無いブラウザでは従来どおり
   ------------------------------------------------------------------------- */
.bmk-top :is(h1, h2, h3),
.bmk-top .bmk-card__title,
.bmk-top .bmk-page-title {
	word-break: auto-phrase;
}

/* B案（?fv=b）は狭い画面で「「使える解剖学」へ。」の「へ。」だけが次の行に落ちるため、1 行が欄に収まる大きさまで縮める */
@media (max-width: 600px) {
	.bmkfv--b .bmkfv-inner { container-type: inline-size; }
	.bmkfv--b .bmkfv-h1 { font-size: min(32px, calc(100cqi / 10.6)); }
}

/* -------------------------------------------------------------------------
   動きを減らす設定
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bmk-hd--pc nav a.scp1::after { transition: none; }
	.bmk-top #anatomy article,
	.bmk-top .bmk-guide article,
	body.bmk-sub .bmk-card { transition: none; }
}

/* =========================================================================
   r3（2026-10-20）：ユーザー指摘の残り
   ========================================================================= */

/* PC メニュー：止まっている状態でも「押せる」と分かるように
   - 行に全幅の淡い緑の帯（box-shadow で左右に伸ばす。横スクロールを出さない）
   - 項目の間に細い縦の区切り線、文字は深い緑
   文字の大きさ・並び・1100px の境目は変えない */
.bmk-hd--pc nav {
	position: relative;
	background: #EEF5E3;
	box-shadow: 0 0 0 100vmax #EEF5E3;
	clip-path: inset(0 -100vmax);
	border-top-color: rgba(60, 90, 34, .14) !important;
}
.bmk-hd--pc nav li { position: relative; }
.bmk-hd--pc nav li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(clamp(18px, 2.4vw, 34px) / -2);
	width: 1px;
	height: 14px;
	transform: translateY(-50%);
	background: rgba(60, 90, 34, .28);
	pointer-events: none;
}
.bmk-hd--pc nav a.scp1 { color: #2F5A1E !important; }
.bmk-hd--pc nav a.scp1:hover { color: #1F4A14 !important; background-color: rgba(255, 255, 255, .85); box-shadow: 0 2px 10px -4px rgba(44, 106, 30, .35); }

/* 数字の帯：淡い地に、数字は深い緑 → 明るい緑（最も明るい位置で 3:1 以上）、説明は深い緑 */
.bmk-top section.bmk-stats {
	color: #2F5A1E !important;
	background:
		radial-gradient(40% 120% at 100% 0%, rgba(120, 184, 48, .16), transparent 70%),
		radial-gradient(30% 90% at 0% 100%, rgba(230, 201, 119, .14), transparent 70%),
		linear-gradient(120deg, #EEF5E3 0%, #F4F9EC 50%, #EEF5E3 100%) !important;
	border-top: 1px solid rgba(60, 90, 34, .08);
	border-bottom: 1px solid rgba(60, 90, 34, .08);
}
.bmk-top section.bmk-stats dl > div { border-left-color: rgba(120, 184, 48, .55) !important; }
.bmk-top section.bmk-stats dd.bmk-num {
	background: linear-gradient(100deg, #2C6A1E 0%, #3E7E25 45%, #4C8C27 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #3E7E25 !important;
}
.bmk-top section.bmk-stats dd.bmk-num span { -webkit-text-fill-color: #2F5A1E; color: #2F5A1E !important; }
.bmk-top section.bmk-stats dt { color: #2F5A1E !important; }

/* 最後の「まず、話を聞いてみてください。」帯：#research と同じ明るさの系統へ
   白文字が載る中央は #3B7A24 程度（4.5:1 以上）、明るい緑は四隅の光だけに使う */
.bmk-top section#contact,
body.bmk-sub .bmk-cta {
	background:
		radial-gradient(42% 80% at 0% 0%, rgba(120, 184, 48, .55), transparent 70%),
		radial-gradient(38% 80% at 100% 100%, rgba(106, 170, 47, .55), transparent 70%),
		radial-gradient(30% 60% at 92% 8%, rgba(230, 201, 119, .22), transparent 70%),
		linear-gradient(118deg, #2E6A1F 0%, #356F21 45%, #3B7A24 100%) !important;
}

/* テスト用の表示切替（test ホストだけ）：スマホでは畳んだチップ */
.bmk-fvsw summary::-webkit-details-marker { display: none; }
.bmk-fvsw:not([open]) { padding: 2px !important; }

/* スマホは文字が帯の幅いっぱいに載るので、四隅の明るい光を文字の後ろに置かない（白文字 4.5:1 以上） */
@media (max-width: 760px) {
	.bmk-top section#contact,
	body.bmk-sub .bmk-cta {
		background:
			radial-gradient(70% 14% at 100% 100%, rgba(106, 170, 47, .45), transparent 70%),
			linear-gradient(170deg, #2E6A1F 0%, #33701F 55%, #3A7823 100%) !important;
	}
}

/* 代表挨拶：上に集合写真（ともに成長できる「環境」） */
.bmk-top #message .bmk-msg-group {
	max-width: 1200px;
	margin: 0 auto clamp(48px, 6vw, 88px);
	aspect-ratio: 16 / 8;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 60px -32px rgba(31, 42, 24, .5);
}
.bmk-top #message .bmk-msg-group img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
@media (max-width: 760px) {
	.bmk-top #message .bmk-msg-group { aspect-ratio: 4 / 3; border-radius: 12px; }
}