/* =========================================================================
   トップの動き（2026-10-21）　js/motion.js とセット。トップでだけ読む
   - 隠す指定は、JS が <html> に付ける .bmk-mo の下でだけ効く（JS が無い・失敗したときは全部見えている）
   - 隠す指定・動きは画面表示（screen）のときだけ。印刷では動きの状態に関係なく全部見える
   - 「動きを減らす」設定では何も隠さない・動かさない（帯もパララックスも止める指定を下に明示）
   - 動かすのに transform ではなく translate / scale（個別のプロパティ）を使うのは、カードやボタンの
     ホバー（transform: translateY(-4px) など）と打ち消し合わないようにするため。個別のプロパティは
     transform と合成される。未対応の古いブラウザでは位置の動きだけ無くなり、フェードは効く
   - 動かすのは opacity と translate / scale（transform）と clip-path だけ。レイアウトは動かさない
   - 動き終わると JS が data-mo を外すので、各要素は元の指定だけの状態に戻る
   - 後半は新しく足した部品（写真の帯・全幅の写真・会員の札）の見た目。こちらは JS が無くても効く
   ========================================================================= */
:root {
	--mo-ease: cubic-bezier(.16, .84, .24, 1);
	--mo-ease-io: cubic-bezier(.72, 0, .18, 1);
}

@media screen and (prefers-reduced-motion: no-preference) {
	/* --- 出る前の状態 --------------------------------------------------- */
	html.bmk-mo [data-mo]:not(.is-in) { opacity: 0; }
	html.bmk-mo [data-mo="up"]:not(.is-in),
	html.bmk-mo [data-mo="plate"]:not(.is-in) { translate: 0 30px; }
	html.bmk-mo [data-mo="card"]:not(.is-in) { translate: 0 44px; scale: .97; }
	html.bmk-mo [data-mo="stage"]:not(.is-in) { translate: 0 38px; }
	html.bmk-mo [data-mo="eyebrow"]:not(.is-in) { translate: -34px 0; }
	html.bmk-mo [data-mo="eyebrow"]:not(.is-in)::before { scale: 0 1; }
	html.bmk-mo [data-mo="vline"]:not(.is-in) { opacity: 1; scale: 1 0; }
	html.bmk-mo [data-mo="photo"]:not(.is-in) img { clip-path: inset(0 50% 0 50%); scale: 1.18; }
	html.bmk-mo [data-mo="wide"]:not(.is-in) { opacity: 1; clip-path: inset(22% 0 22% 0); }

	/* --- 出るとき ------------------------------------------------------- */
	html.bmk-mo [data-mo="up"].is-in,
	html.bmk-mo [data-mo="plate"].is-in { animation: bmkMoUp 1s var(--mo-ease) var(--mo-d, 0s) both; }
	html.bmk-mo [data-mo="card"].is-in { animation: bmkMoCard 1.1s var(--mo-ease) var(--mo-d, 0s) both; }
	html.bmk-mo [data-mo="stage"].is-in { animation: bmkMoStage .9s var(--mo-ease) var(--mo-d, 0s) both; }
	html.bmk-mo [data-mo="fade"].is-in { animation: bmkMoFade .9s ease var(--mo-d, 0s) both; }
	html.bmk-mo [data-mo="h2"].is-in.mo-whole { animation: bmkMoUp 1s var(--mo-ease) var(--mo-d, 0s) both; }
	html.bmk-mo [data-mo="eyebrow"].is-in { animation: bmkMoSlide .9s var(--mo-ease) var(--mo-d, 0s) both; }
	html.bmk-mo [data-mo="eyebrow"].is-in::before {
		transform-origin: left center;
		animation: bmkMoGrowX .9s var(--mo-ease) calc(var(--mo-d, 0s) + .28s) both;
	}
	html.bmk-mo [data-mo="vline"].is-in {
		transform-origin: center bottom;
		animation: bmkMoGrowY 1.2s var(--mo-ease-io) var(--mo-d, 0s) both;
	}
	html.bmk-mo [data-mo="photo"].is-in { animation: bmkMoFade .6s ease var(--mo-d, 0s) both; }
	html.bmk-mo [data-mo="photo"].is-in img {
		animation:
			bmkMoCurtain 1.35s var(--mo-ease-io) calc(var(--mo-d, 0s) + .12s) both,
			bmkMoZoom 2.4s cubic-bezier(.2, .7, .2, 1) calc(var(--mo-d, 0s) + .12s) both;
	}
	html.bmk-mo [data-mo="wide"].is-in { animation: bmkMoOpen 1.5s var(--mo-ease-io) var(--mo-d, 0s) both; }

	/* 見出しを行ごとにせり上げる（JS が行ごとに包む。終わると元の文字に戻す） */
	.bmk-top .mo-ln { display: inline-block; vertical-align: top; overflow: hidden; overflow: clip; }
	.bmk-top .mo-ln > .mo-li {
		display: inline-block;
		animation: bmkMoLine 1.05s var(--mo-ease) var(--mo-ld, 0s) both;
	}

	/* 会員の札：現れるときに光が一度だけ走る */
	html.bmk-mo .bmk-member.is-in::after { animation: bmkMoSweep 1.6s cubic-bezier(.4, 0, .2, 1) calc(var(--mo-d, 0s) + .55s) both; }
}

@keyframes bmkMoUp    { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes bmkMoCard  { from { opacity: 0; translate: 0 44px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bmkMoStage { from { opacity: 0; translate: 0 38px; } to { opacity: 1; translate: 0 0; } }
@keyframes bmkMoFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bmkMoSlide { from { opacity: 0; translate: -34px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes bmkMoGrowX { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes bmkMoGrowY { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes bmkMoLine  { from { translate: 0 108%; } to { translate: 0 0; } }
@keyframes bmkMoCurtain { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes bmkMoZoom  { from { scale: 1.18; } to { scale: 1; } }
@keyframes bmkMoOpen  { from { clip-path: inset(22% 0 22% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bmkMoSweep { from { opacity: 1; translate: -160% 0; } to { opacity: 1; translate: 420% 0; } }
@keyframes bmkMoFlowL { from { translate: 0 0; } to { translate: -50% 0; } }
@keyframes bmkMoFlowR { from { translate: -50% 0; } to { translate: 0 0; } }

/* =========================================================================
   施術写真の帯（2 段・上下で逆向きに流れる）
   JS が無い・動きを減らす設定では止まったまま（先頭の写真が並んで見える）
   ========================================================================= */
.bmk-flow {
	--flow-h: clamp(150px, 17vw, 240px);
	--flow-gap: clamp(10px, 1.2vw, 16px);
	--flow-dur: 84s;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 7vw, 108px);
	background:
		radial-gradient(46% 70% at 88% 0%, rgba(120, 184, 48, .28), transparent 70%),
		radial-gradient(40% 70% at 0% 100%, rgba(230, 201, 119, .16), transparent 70%),
		linear-gradient(118deg, #1F4A16 0%, #285C1A 46%, #2F6A1F 100%);
	color: #FBFAF6;
}
.bmk-flow__head {
	max-width: 1200px;
	margin: 0 auto clamp(26px, 3vw, 40px);
	padding: 0 clamp(20px, 3vw, 40px);
}
.bmk-top .bmk-flow .bmk-en {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #F3DFA0;
}
.bmk-top .bmk-flow .bmk-en::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #C9A24A, #E6C977);
}
.bmk-flow__rows {
	display: flex;
	flex-direction: column;
	gap: var(--flow-gap);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.bmk-flow__row { overflow: hidden; }
.bmk-flow__track { display: flex; width: max-content; }
.bmk-top .bmk-flow__set {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bmk-flow__set > li {
	flex: 0 0 auto;
	margin: 0 var(--flow-gap) 0 0;
	border-radius: 12px;
	overflow: hidden;
	background: #1A3A13;
	box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(230, 201, 119, .18);
}
.bmk-top .bmk-flow__set img {
	display: block;
	width: auto;
	max-width: none;
	height: var(--flow-h);
}
@media screen and (prefers-reduced-motion: no-preference) {
	html.bmk-mo .bmk-flow--on .bmk-flow__track { animation: bmkMoFlowL var(--flow-dur) linear infinite; }
	html.bmk-mo .bmk-flow--on .bmk-flow__row--r .bmk-flow__track { animation-name: bmkMoFlowR; animation-duration: calc(var(--flow-dur) * 1.12); }
	html.bmk-mo .bmk-flow.is-paused .bmk-flow__track,
	html.bmk-mo .bmk-flow.is-off .bmk-flow__track { animation-play-state: paused; }
}
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
	html.bmk-mo .bmk-flow__rows:hover .bmk-flow__track { animation-play-state: paused; }
}
/* 「動きを減らす」設定と印刷：帯もパララックスも止める（JS が途中で止めきれなかった場合の保険） */
@media (prefers-reduced-motion: reduce) {
	.bmk-top .bmk-flow__track { animation: none !important; translate: none !important; }
	.bmk-top .bmk-wide img { translate: none !important; scale: none !important; }
	.bmk-flow__toggle { display: none !important; }
}
@media print {
	.bmk-top .bmk-flow__track { animation: none !important; translate: none !important; }
	.bmk-top .bmk-wide img { translate: none !important; scale: none !important; }
	.bmk-top .bmk-wide { clip-path: none !important; }
	.bmk-flow__toggle { display: none !important; }
}
/* 一時停止のボタン（JS が動くときだけ出す）。表示は「一時停止／再開」、読み上げの名前は
   「写真の動きを一時停止／写真の動きを再開」（表示の文字を含む）。押せる大きさは 44px 以上 */
.bmk-flow__toggle {
	position: absolute;
	right: clamp(16px, 3vw, 40px);
	bottom: clamp(8px, 1.6vw, 24px);
	z-index: 2;
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 10px;
	min-height: 44px;
	min-width: 44px;
	padding: 0 18px 0 14px;
	border: 1px solid rgba(243, 223, 160, .6);
	border-radius: 999px;
	background: rgba(16, 40, 12, .45);
	color: #F3DFA0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .12em;
	cursor: pointer;
	transition: background-color .25s, border-color .25s;
}
.bmk-flow__toggle[hidden] { display: none; }
.bmk-flow__toggle:hover { background: rgba(16, 40, 12, .7); border-color: #E6C977; }
.bmk-flow__toggle:focus-visible { outline: 2px solid #E6C977; outline-offset: 3px; }
.bmk-flow__toggle i { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.bmk-flow__toggle i::before,
.bmk-flow__toggle i::after {
	content: "";
	position: absolute;
	top: 0;
	width: 3px;
	height: 12px;
	border-radius: 1px;
	background: currentColor;
}
.bmk-flow__toggle i::before { left: 2px; }
.bmk-flow__toggle i::after { right: 2px; }
.bmk-flow.is-paused .bmk-flow__toggle i::before {
	left: 2px;
	width: 0;
	height: 0;
	border-radius: 0;
	background: none;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}
.bmk-flow.is-paused .bmk-flow__toggle i::after { display: none; }
/* 「一時停止」「再開」を同じ升目に重ね、見えない方は visibility で隠す（押しても幅が変わらない） */
.bmk-flow__toggle i { grid-column: 1; grid-row: 1; }
.bmk-flow__toggle .is-pause,
.bmk-flow__toggle .is-play { grid-column: 2; grid-row: 1; justify-self: center; }
.bmk-flow__toggle .is-play { visibility: hidden; }
.bmk-flow.is-paused .bmk-flow__toggle .is-play { visibility: visible; }
.bmk-flow.is-paused .bmk-flow__toggle .is-pause { visibility: hidden; }

/* =========================================================================
   全幅の写真（スクロールに合わせてゆっくり動く。動きは JS）
   JS は --para-y（上下の振れ幅。img の高さに対する %）と --para-s（入るときの拡大）を読む。
   img は枠より上下に (高さ - 100%) / 2 ずつはみ出させ、振れ幅はそのはみ出しの内側に収める
   ========================================================================= */
.bmk-top .bmk-wide {
	--para-y: 7;
	--para-s: .08;
	position: relative;
	margin: 0;
	height: clamp(320px, 40vw, 660px);
	overflow: hidden;
	background: #1F2A18;
}
.bmk-top .bmk-wide--skull { height: clamp(360px, 52vw, 820px); background: #EFECE4; }
/* 背中の施術：髪の上から指先までが写真の高さの約 7 割あり、横長 2.5:1 の枠では入りきらないので、
   枠を 52vw（骨格模型と同じ）にし、動きを小さくして頭の上に余白を残す（img/top-back.webp は
   頭の上に余白を含めて書き出し直した。_work/bmk_obn/motion/tools/export_top.py） */
.bmk-top .bmk-wide--back { height: clamp(360px, 52vw, 1000px); --para-y: 2.5; --para-s: 0; }
.bmk-top .bmk-wide img {
	position: absolute;
	left: 0;
	top: -10%;
	display: block;
	width: 100%;
	max-width: none;
	height: 120%;
	object-fit: cover;
	object-position: center center;
}
.bmk-top .bmk-wide--back img { top: -3%; height: 106%; }
.bmk-top .bmk-wide::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(16, 30, 12, 0) 55%, rgba(16, 30, 12, .38) 100%);
}
.bmk-top .bmk-wide--skull::after { background: linear-gradient(180deg, rgba(239, 236, 228, 0) 60%, rgba(239, 236, 228, .5) 100%); }
.bmk-top .bmk-wide .bmk-en {
	position: absolute;
	z-index: 1;
	left: clamp(20px, 4vw, 64px);
	bottom: clamp(18px, 3.4vw, 52px);
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 20px);
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: clamp(40px, 8.4vw, 136px);
	line-height: .9;
	letter-spacing: .02em;
	color: rgba(251, 250, 246, .94);
	text-shadow: 0 2px 24px rgba(16, 30, 12, .35);
	pointer-events: none;
}
.bmk-top .bmk-wide .bmk-en::before {
	content: "";
	flex: 0 0 auto;
	width: clamp(28px, 4vw, 64px);
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #C9A24A, #E6C977);
}
.bmk-top .bmk-wide--skull .bmk-en { left: auto; right: clamp(20px, 4vw, 64px); flex-direction: row-reverse; color: #2C6A1E; text-shadow: none; }
/* 背中の写真は左上が壁で空いているので、文字は左上に置く */
.bmk-top .bmk-wide--back .bmk-en { top: clamp(22px, 4vw, 60px); bottom: auto; }
/* PC・タブレット：英字が施術者の頭にかからない大きさに（頭の左端は枠の幅の約 44%） */
@media (min-width: 761px) {
	.bmk-top .bmk-wide--back .bmk-en { font-size: clamp(36px, 6.4vw, 108px); }
}
.bmk-top .bmk-wide--back::after { background: linear-gradient(160deg, rgba(16, 30, 12, .34) 0%, rgba(16, 30, 12, 0) 42%); }
@media (max-width: 760px) {
	.bmk-top .bmk-wide,
	.bmk-top .bmk-wide--skull,
	.bmk-top .bmk-wide--back { height: auto; aspect-ratio: 4 / 5; }
	/* スマホの背中の施術：頭の上の余白が少ないので動きをさらに小さく。文字は頭にかからない左下へ */
	.bmk-top .bmk-wide--back { --para-y: 1.5; }
	.bmk-top .bmk-wide--back img { top: -2%; height: 104%; }
	.bmk-top .bmk-wide--back .bmk-en { top: auto; bottom: clamp(18px, 3.4vw, 52px); }
	.bmk-top .bmk-wide--back::after { background: linear-gradient(0deg, rgba(16, 30, 12, .62) 0%, rgba(16, 30, 12, 0) 34%); }
}

/* =========================================================================
   下の方の節の背景画像を近づいてから読む（最初の画面の写真と回線を取り合わないように）。
   html.bmk-bgdefer は head の小さなスクリプトが付け、近づいたら節に .bmk-bg-on を付ける（functions.php）。
   JS が無いときは付かないので、今までどおり最初から読む
   ========================================================================= */
/* 模様は style 属性ではなくここで付ける（style 属性に書くと、このファイルが届く前に読まれることがあった） */
html:not(.bmk-bgdefer) .bmk-top #badge,
html.bmk-bgdefer .bmk-top #badge.bmk-bg-on { background-image: url("../img/badge-pattern.webp"); }

/* =========================================================================
   オープンバッジ・ネットワークの会員の札（#badge）
   ========================================================================= */
.bmk-top .bmk-member {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 4px 18px;
	align-items: start;
	max-width: 520px;
	margin: 36px 0 0;
	padding: 22px 26px 22px 22px;
	overflow: hidden;
	border: 1px solid #C9A24A;
	border-radius: 6px;
	background: linear-gradient(160deg, #FFFDF7 0%, #FBF6E7 100%);
	box-shadow:
		inset 0 0 0 4px #FFFDF7,
		inset 0 0 0 5px rgba(201, 162, 74, .5),
		0 16px 32px -22px rgba(115, 81, 33, .5);
}
.bmk-top .bmk-member::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 34%;
	opacity: 0;
	translate: -160% 0;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 247, 214, 0) 0%, rgba(255, 247, 214, .95) 50%, rgba(255, 247, 214, 0) 100%);
	rotate: 12deg;
}
.bmk-member__seal { grid-row: 1 / span 4; width: 52px; height: 52px; color: #B08A35; }
.bmk-member__seal svg { display: block; width: 100%; height: 100%; }
.bmk-top .bmk-member .bmk-en {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 6px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #8C6A1C;
}
.bmk-top .bmk-member .bmk-en::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(201, 162, 74, .7), rgba(201, 162, 74, 0));
}
.bmk-top .bmk-member__org {
	margin: 0;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.6;
	letter-spacing: .04em;
	color: #3C5A22;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.bmk-top .bmk-member__date {
	margin: 2px 0 10px;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: .08em;
	color: #735121;
}
.bmk-top a.bmk-member__link {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .06em;
	color: #3C5A22;
	border-bottom: 1px solid #C9A24A;
	padding-bottom: 2px;
}
.bmk-top a.bmk-member__link:hover { color: #2C6A1E; border-bottom-color: #3C5A22; }
@media (max-width: 400px) {
	.bmk-top .bmk-member { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 18px 18px 18px 16px; }
	.bmk-member__seal { width: 40px; height: 40px; }
}