/*!
* asbsb-fx.css — ASB Smart Builder「操作・演出（インタラクション）」語彙（共有カタログアセット）
* 相方 = asbsb-fx.js。出現アニメ語彙(asbsb-animations)が「スクロールで1回出す」のに対し、
* こちらは【ホバーの微演出】と【サイト全体の挙動】の武器。className と site.json "fx" 宣言で
* 静的(assemble)とWP(plugin-scaffold)へ対称注入される（単一の正＝fx-vocab.mjs）。
*
* 語彙:
* .fx-underline … リンク下線スライド（ホバーで下線が右端から伸びる。任意のリンク/見出しに）
* .fx-btn-slide … ボタン横スライド（ホバーで塗りが左→右に流れて文字反転。コアボタンにも対応）
* .fx-img-fade … 画像ホバーで少し明るく（不透明度を落として地色に馴染ませる。バナー/カード写真に）
* .asbsb-backtop … TOPへ戻る（JS が駆動）。型＝無印/ring・.asbsb-bt-bar/square/orbit/percent/fill（fx.backToTop で選ぶ）
* .fx-swap … 見出しの言葉の入れ替え（直下の子＝候補・行ごとに下から立ち上がる）
* スムーススクロール … CSSなし（asbsb-fx.js が慣性移動）
*
* 調整用 CSS 変数（既定値＝ハードコードと同一。decorations.css の :root で site 側に共有）:
* --fx-underline-color(currentColor) / --fx-underline-h(2px) / --fx-underline-offset(-2px)
* --fx-underline-duration(.3s) / --fx-underline-ease(cubic-bezier(.58,.3,.005,1))
* --fx-btn-slide-bg(currentColor) / --fx-btn-slide-fg(#fff) / --fx-btn-slide-duration(.45s)
* --fx-btn-slide-ease(cubic-bezier(.77,0,.18,1)) / --fx-btn-slide-arrow(4px)
* --fx-img-fade-opacity(.8) / --fx-img-fade-duration(.3s) / --fx-img-fade-ease(ease)
* --fx-backtop-size(46px) / --fx-backtop-bg(#111) / --fx-backtop-fg(#fff) / --fx-backtop-ring(#fff)
* --fx-backtop-ring-w(4) / --fx-backtop-track-op(.18) / --fx-backtop-right(24px) / --fx-backtop-bottom(24px)
* --fx-backtop-z(9990) / --fx-backtop-show(.2s)
* 型（2026-09-29）で足した変数: --fx-backtop-ink（地を持たない型の線と文字の色・既定は --fx-backtop-bg）/
* --fx-backtop-surface（square・fill の地・#fff）/ --fx-backtop-font（文字の書体・既定は継承）/ --fx-backtop-rail（bar の線の長さ 72px）
* --fx-swap-hold(6.5s) / --fx-swap-delay(.5s) / --fx-swap-dur(1s) / --fx-swap-step(.12s)
*/
/* =========================================================================
リンク下線スライド（.fx-underline）
ホバー/フォーカス/現在地（.is-current）で下線が右端から伸びて出る。scale なので最終レイアウト不変。
========================================================================= */
.fx-underline { position: relative; }
.fx-underline::after {
content: ""; position: absolute; left: 0; right: 0; bottom: var(--fx-underline-offset, -2px);
height: var(--fx-underline-h, 2px); background: var(--fx-underline-color, currentColor);
transform: scaleX(0); transform-origin: right center; opacity: 0; pointer-events: none;
transition: transform var(--fx-underline-duration, .3s) var(--fx-underline-ease, cubic-bezier(.58, .3, .005, 1)),
opacity var(--fx-underline-duration, .3s) var(--fx-underline-ease, cubic-bezier(.58, .3, .005, 1));
}
.fx-underline:hover::after,
.fx-underline:focus-visible::after,
.fx-underline.is-current::after { transform: scaleX(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .fx-underline::after { transition: none; }
}
/* =========================================================================
ボタン横スライド（.fx-btn-slide）
ホバーで塗り(::before)が左→右に scaleX で流れて入り、文字色が反転。
★コア/KB ボタンは className がラッパ .wp-block-button に乗る＝実体 .wp-block-button__link を対象化。
素の要素（a.button 等）に直接付けた場合も効くよう2系統のセレクタで受ける。
========================================================================= */
.fx-btn-slide:not(.wp-block-button),
.wp-block-button.fx-btn-slide .wp-block-button__link { position: relative; overflow: hidden; z-index: 0; }
.fx-btn-slide:not(.wp-block-button)::before,
.wp-block-button.fx-btn-slide .wp-block-button__link::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--fx-btn-slide-bg, currentColor);
transform: scaleX(0); transform-origin: left center;
transition: transform var(--fx-btn-slide-duration, .45s) var(--fx-btn-slide-ease, cubic-bezier(.77, 0, .18, 1));
}
.fx-btn-slide:not(.wp-block-button):hover::before,
.fx-btn-slide:not(.wp-block-button):focus-visible::before,
.wp-block-button.fx-btn-slide .wp-block-button__link:hover::before,
.wp-block-button.fx-btn-slide .wp-block-button__link:focus-visible::before { transform: scaleX(1); }
.fx-btn-slide:not(.wp-block-button):hover,
.fx-btn-slide:not(.wp-block-button):focus-visible,
.wp-block-button.fx-btn-slide .wp-block-button__link:hover,
.wp-block-button.fx-btn-slide .wp-block-button__link:focus-visible { color: var(--fx-btn-slide-fg, #fff); }
/* 矢印（::after で ↗ 等を描く運用のとき）はホバーで少し右へ滑る。transition が無ければ decorations 側で補う */
.wp-block-button.fx-btn-slide .wp-block-button__link:hover::after,
.fx-btn-slide:not(.wp-block-button):hover::after { transform: translateX(var(--fx-btn-slide-arrow, 4px)); }
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .fx-btn-slide:not(.wp-block-button)::before,html:not(.asbsb-force-motion) .wp-block-button.fx-btn-slide .wp-block-button__link::before { transition: none; }
}
/* =========================================================================
画像ホバーで少し明るく（.fx-img-fade）
不透明度を落として下の地色（白/淡色）に馴染ませる＝バナーやカード写真の定番。
★filter:brightness ではなく opacity なのは、暗い地色の上では「沈む」方が自然だから
（地色に寄る＝白地では明るく・濃色地では落ち着く）。図/リンクのどちらに付けても効く。
========================================================================= */
.fx-img-fade img,
img.fx-img-fade {
transition: opacity var(--fx-img-fade-duration, .3s) var(--fx-img-fade-ease, ease);
}
.fx-img-fade:hover img,
.fx-img-fade:focus-visible img,
img.fx-img-fade:hover { opacity: var(--fx-img-fade-opacity, .8); }
/* ★出現アニメ（anim-wipe / anim-clip 等）と同じ要素に付いた時は、上の規則では**必ず負ける**（2026-09-11）。
出現アニメは見せ終わりに
`html.anim-on :is(.anim-wipe,…).is-inview :is(img,.wp-block-cover__image-background){opacity:1}`（0,4,1）
を当てて画像を出すので、`.fx-img-fade:hover img`（0,2,1）が同点どころか 2 段負けする。
＝**ホバーしても何も起きないのに、CSS は書かれているので誰も間違いに気付かない**（実害: asobit のバナー）。
出現し終わった状態（.is-inview）に限って、もう一段強い規則で上書きする（0,5,1）。
★fx-* と anim-* は**同じ要素**に付ける（図に anim・中の a に fx のように分けると、この規則が当たらない）。 */
html.anim-on .fx-img-fade.is-inview:hover :is(img, .wp-block-cover__image-background),
html.anim-on .fx-img-fade.is-inview:focus-visible :is(img, .wp-block-cover__image-background) {
opacity: var(--fx-img-fade-opacity, .8);
}
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .fx-img-fade img,
html:not(.asbsb-force-motion) img.fx-img-fade { transition: none; }
}
/* =========================================================================
TOPへ戻る サークル・スクロールメーター（.asbsb-backtop）
40px前後の丸ボタン＋SVGリング。progress の stroke-dashoffset を JS がスクロール率で駆動。
初期は非表示（opacity/visibility）＝スクロールで .is-visible が付く。
========================================================================= */
.asbsb-backtop {
position: fixed; right: var(--fx-backtop-right, 24px); bottom: var(--fx-backtop-bottom, 24px);
width: var(--fx-backtop-size, 46px); height: var(--fx-backtop-size, 46px);
display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
background: var(--fx-backtop-bg, #111); color: var(--fx-backtop-fg, #fff);
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1); cursor: pointer; z-index: var(--fx-backtop-z, 9990);
-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity var(--fx-backtop-show, .2s) linear, visibility var(--fx-backtop-show, .2s) linear, transform var(--fx-backtop-show, .2s) linear;
}
.asbsb-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.asbsb-backtop:hover { color: var(--fx-backtop-fg, #fff); }
.asbsb-backtop .asbsb-backtop-ring {
position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); /* 天頂から時計回り */
}
.asbsb-backtop .asbsb-backtop-ring circle {
fill: none; stroke-width: var(--fx-backtop-ring-w, 4); stroke: var(--fx-backtop-ring, #fff);
}
.asbsb-backtop .asbsb-backtop-track { opacity: var(--fx-backtop-track-op, .18); }
/* 進捗リングは地のリングと別色にできる（既定は同色）＝「地＝色つき／進むほど白く」が作れる。
★上の `…-ring circle`（0,3,1）に勝つ形で書く（クラスだけだと色が変わらない）。 */
.asbsb-backtop .asbsb-backtop-ring circle.asbsb-backtop-progress {
stroke: var(--fx-backtop-progress, var(--fx-backtop-ring, #fff));
stroke-linecap: round; transition: stroke-dashoffset .1s linear;
}
.asbsb-backtop .asbsb-backtop-arrow { position: relative; display: block; width: 42%; height: 42%; }
.asbsb-backtop .asbsb-backtop-arrow svg {
display: block; width: 100%; height: 100%; fill: none;
stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .asbsb-backtop { transition: opacity var(--fx-backtop-show, .2s) linear, visibility var(--fx-backtop-show, .2s) linear; transform: none; }
html:not(.asbsb-force-motion) .asbsb-backtop.is-visible { transform: none; }
html:not(.asbsb-force-motion) .asbsb-backtop .asbsb-backtop-progress { transition: none; }
}
/* ---- TOPへ戻るの型（2026-09-29・マークアップ＝fx-vocab.mjs の backtopHtml）----
進み具合は JS が --bt-p（0〜1）に配る。表示の出し入れ（.is-visible）と位置（--fx-backtop-right/bottom）は全部の型で共通。
★地を持たない型（bar・orbit の文字）は --fx-backtop-ink で色を決める（既定は --fx-backtop-bg＝リングの地の色＝そのサイトの濃い色）。 */
.asbsb-backtop.is-demo { position: relative; right: auto; bottom: auto; opacity: 1; visibility: visible; transform: none; z-index: auto; }
.asbsb-backtop .asbsb-backtop-arrow { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
/* bar＝縦書きの文字＋細い縦線のメーター（地なし） */
.asbsb-backtop.asbsb-bt-bar {
width: auto; height: auto; padding: 6px 10px; border-radius: 0; background: none; box-shadow: none;
display: flex; flex-direction: column; align-items: center; gap: 12px;
color: var(--fx-backtop-ink, var(--fx-backtop-bg, #111));
font: 500 11px/1 var(--fx-backtop-font, inherit); letter-spacing: .24em;
}
.asbsb-bt-bar .asbsb-backtop-arrow { width: 16px; height: 16px; }
.asbsb-bt-bar .asbsb-bt-label { writing-mode: vertical-rl; }
.asbsb-bt-bar .asbsb-bt-rail { position: relative; display: block; width: 1px; height: var(--fx-backtop-rail, 72px); }
.asbsb-bt-bar .asbsb-bt-rail::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: .2; }
.asbsb-bt-bar .asbsb-bt-rail i { position: absolute; inset: 0; background: currentColor; transform-origin: top; transform: scaleY(var(--bt-p, 0)); transition: transform .1s linear; }
.asbsb-bt-bar:hover .asbsb-backtop-arrow { transform: translateY(-5px); }
/* square＝角丸の四角の枠が、読み進めた分だけ描かれる（ホバーで塗り） */
.asbsb-backtop.asbsb-bt-square {
width: var(--fx-backtop-size, 50px); height: var(--fx-backtop-size, 50px); border-radius: 16%;
background: var(--fx-backtop-surface, #fff); color: var(--fx-backtop-ink, var(--fx-backtop-bg, #111));
box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .35);
transition: opacity var(--fx-backtop-show, .2s) linear, visibility var(--fx-backtop-show, .2s) linear, transform var(--fx-backtop-show, .2s) linear, background .35s, color .35s;
}
.asbsb-bt-square .asbsb-bt-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.asbsb-bt-square .asbsb-bt-frame rect { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.asbsb-bt-square .asbsb-bt-track { opacity: .18; }
.asbsb-bt-square .asbsb-bt-meter { stroke-width: 2.5; transition: stroke-dashoffset .1s linear; }
.asbsb-bt-square:hover { background: var(--fx-backtop-ink, var(--fx-backtop-bg, #111)); color: var(--fx-backtop-surface, #fff); }
.asbsb-bt-square:hover .asbsb-backtop-arrow { transform: translateY(-3px); }
/* orbit＝円周を文字が回る（ゆっくり自転＋スクロールで回転が進む）・真ん中は丸いボタン */
.asbsb-backtop.asbsb-bt-orbit {
width: var(--fx-backtop-size, 88px); height: var(--fx-backtop-size, 88px); background: none; box-shadow: none;
color: var(--fx-backtop-ink, var(--fx-backtop-bg, #111));
}
.asbsb-bt-orbit .asbsb-bt-words { position: absolute; inset: 0; transform: rotate(calc(var(--bt-p, 0) * 540deg)); transition: transform .2s linear; }
.asbsb-bt-orbit .asbsb-bt-words svg { display: block; width: 100%; height: 100%; animation: asbsb-bt-spin 26s linear infinite; }
.asbsb-bt-orbit text { font: 600 9.6px/1 var(--fx-backtop-font, inherit); letter-spacing: .1em; fill: currentColor; }
.asbsb-bt-orbit .asbsb-bt-core { position: absolute; inset: 27%; border-radius: 50%; background: var(--fx-backtop-bg, #111); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.asbsb-bt-orbit .asbsb-backtop-arrow { width: 20%; height: 20%; color: var(--fx-backtop-fg, #fff); }
.asbsb-bt-orbit:hover .asbsb-bt-core { transform: scale(1.14); }
.asbsb-bt-orbit:hover .asbsb-backtop-arrow { transform: translateY(-2px); }
@keyframes asbsb-bt-spin { to { transform: rotate(360deg); } }
/* percent＝「TOP 42%」のピル（読み進めた割合を数字で・下の線も伸びる） */
.asbsb-backtop.asbsb-bt-percent {
width: auto; height: var(--fx-backtop-size, 44px); padding: 0 16px 0 13px; border-radius: 999px; overflow: hidden;
display: flex; align-items: center; gap: 8px;
font: 500 12px/1 var(--fx-backtop-font, ui-monospace, 'SFMono-Regular', Menlo, monospace); letter-spacing: .08em;
}
.asbsb-bt-percent .asbsb-backtop-arrow { width: 16px; height: 16px; }
.asbsb-bt-percent .asbsb-bt-label { opacity: .72; }
.asbsb-bt-percent .asbsb-bt-num { min-width: 2.2em; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.asbsb-bt-percent .asbsb-bt-pct { opacity: .72; margin-left: -5px; }
.asbsb-bt-percent .asbsb-bt-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--fx-backtop-progress, var(--fx-backtop-ring, #fff)); transform-origin: left; transform: scaleX(var(--bt-p, 0)); transition: transform .1s linear; }
.asbsb-bt-percent:hover .asbsb-backtop-arrow { transform: translateY(-3px); }
/* fill＝丸の中が下から満ちていく（水位・上の縁は波）・ホバーで矢印が上へ抜けて下から戻る */
.asbsb-backtop.asbsb-bt-fill {
overflow: hidden; background: var(--fx-backtop-surface, #fff); color: var(--fx-backtop-ink, var(--fx-backtop-bg, #111));
box-shadow: inset 0 0 0 1.5px currentColor, 0 8px 22px -12px rgba(0, 0, 0, .35);
}
.asbsb-bt-fill .asbsb-bt-level { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bt-p, 0) * 100%); background: currentColor; opacity: .16; transition: height .12s linear; }
.asbsb-bt-fill .asbsb-bt-level::before {
content: ''; position: absolute; left: 0; top: -5px; width: 200%; height: 6px;
background: radial-gradient(ellipse 50% 100% at 50% 100%, currentColor 98%, transparent 100%) 0 0 / 18px 6px repeat-x;
animation: asbsb-bt-wave 2.2s linear infinite;
}
.asbsb-bt-fill:hover .asbsb-backtop-arrow { animation: asbsb-bt-fly .7s cubic-bezier(.6, 0, .3, 1); }
@keyframes asbsb-bt-wave { to { transform: translateX(-18px); } }
@keyframes asbsb-bt-fly { 45% { transform: translateY(-150%); opacity: 0; } 46% { transform: translateY(150%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .asbsb-bt-orbit .asbsb-bt-words svg,
html:not(.asbsb-force-motion) .asbsb-bt-fill .asbsb-bt-level::before,
html:not(.asbsb-force-motion) .asbsb-bt-fill:hover .asbsb-backtop-arrow { animation: none; }
html:not(.asbsb-force-motion) .asbsb-bt-orbit .asbsb-bt-words,
html:not(.asbsb-force-motion) .asbsb-backtop .asbsb-backtop-arrow { transition: none; }
}
/* =========================================================================
見出しの言葉の入れ替え（.fx-swap・2026-09-29 kawahara）
JS が直下の子を .fx-swap-item に・
ごとの行を .fx-swap-l に包む（文字は DOM に残る）。
★重ねるのは JS が動いた時だけ（.is-swap-on）＝JS 無効では候補が縦に並ぶだけ（隠れて読めない、にならない）。
========================================================================= */
.fx-swap.is-swap-on { display: grid; }
.fx-swap.is-swap-on > .fx-swap-item { grid-area: 1 / 1; margin: 0; }
.fx-swap-l { display: block; overflow: hidden; padding-bottom: .06em; }
.fx-swap-l > span { display: block; transform: translateY(110%); transition: transform var(--fx-swap-dur, 1s) cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--i, 0) * var(--fx-swap-step, .12s)); }
.fx-swap-item.is-active .fx-swap-l > span { transform: none; }
.fx-swap-item.is-leaving .fx-swap-l > span { transform: translateY(-110%); transition-duration: calc(var(--fx-swap-dur, 1s) * .8); transition-delay: calc(var(--i, 0) * var(--fx-swap-step, .12s) * .7); }
.fx-swap-item:not(.is-active):not(.is-leaving) .fx-swap-l > span { transition: none; }
.fx-swap.is-swap-still > .fx-swap-item:not(:first-child) { display: none; }
.fx-swap.is-swap-still .fx-swap-l > span { transform: none; transition: none; }
/* ===================================================================
サイト内検索（fx.search）＝ナビの虫眼鏡 → 全画面モーダル（暗幕＋中央フォーム＋×）。
JS(asbsb-fx.js initSearch)がトグルを .site-header-main-section-right に、モーダルを body に注入。
調整= :root の --fx-search-* で上書き可（既定は元サイト踏襲＝暗幕#141414/黒送信ボタン）。
=================================================================== */
:root {
--fx-search-overlay: rgba(20, 20, 20, .93);
--fx-search-submit-bg: #1d1d1d;
--fx-search-input-bg: #ffffff;
--fx-search-width: 520px;
}
/* ナビ右端の虫眼鏡トグル（色はヘッダー文字色を継承） */
.asbsb-search-toggle {
display: inline-flex; align-items: center; justify-content: center; align-self: center;
width: 40px; height: 40px; padding: 0; margin: 0;
background: transparent; border: 0; color: inherit; cursor: pointer;
-webkit-appearance: none; appearance: none; line-height: 0;
}
.asbsb-search-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.asbsb-search-toggle:hover { opacity: .6; }
/* モーダル開時に背面スクロールを止める */
html.asbsb-search-lock { overflow: hidden; }
.asbsb-search-modal { position: fixed; inset: 0; z-index: 9999; visibility: hidden; }
.asbsb-search-modal.is-open { visibility: visible; }
.asbsb-search-overlay { position: absolute; inset: 0; background: var(--fx-search-overlay); opacity: 0; transition: opacity .3s ease; }
.asbsb-search-modal.is-open .asbsb-search-overlay { opacity: 1; }
/* ×（右上・白） */
.asbsb-search-close {
position: absolute; top: 26px; right: 32px; width: 46px; height: 46px; padding: 0;
background: transparent; border: 0; cursor: pointer; line-height: 0;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .3s ease .05s, transform .3s ease;
}
.asbsb-search-modal.is-open .asbsb-search-close { opacity: 1; }
.asbsb-search-close svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.asbsb-search-close:hover { transform: rotate(90deg); }
/* 中央フォーム（白入力＋黒送信）＝クリックで拡大しながらフェードイン */
.asbsb-search-form {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9);
display: flex; width: min(var(--fx-search-width), 82vw);
opacity: 0; transition: opacity .35s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.asbsb-search-modal.is-open .asbsb-search-form { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.asbsb-search-input {
flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 22px; margin: 0;
font-family: inherit; font-size: 16px; color: #1d1d1d; background: var(--fx-search-input-bg);
border: 0; outline: none; border-radius: 0;
}
.asbsb-search-submit {
flex: 0 0 auto; width: 66px; height: 56px; padding: 0; margin: 0; cursor: pointer;
background: var(--fx-search-submit-bg); border: 0; line-height: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.asbsb-search-submit svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.asbsb-search-submit:hover { background: #000; }
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .asbsb-search-overlay,html:not(.asbsb-force-motion) .asbsb-search-close,html:not(.asbsb-force-motion) .asbsb-search-form { transition: opacity .2s linear; }
html:not(.asbsb-force-motion) .asbsb-search-form { transform: translate(-50%, -50%); }
html:not(.asbsb-force-motion) .asbsb-search-modal.is-open .asbsb-search-form { transform: translate(-50%, -50%); }
html:not(.asbsb-force-motion) .asbsb-search-close:hover { transform: none; }
}
/* =====================================================================
プリローダー（画面遷移の入口演出。fx.preloader）
プリセット: text（Loading 完コピ）/ spinner / dots / logo-draw。
マークアップは fx-vocab.mjs preloaderHtml が body 先頭に出す（静的=assemble / WP=wp_body_open）。
JS（initPreloader）が読み込み後に .is-done を付けてフェード→除去。
===================================================================== */
html.asbsb-pl-lock, html.asbsb-pl-lock body { overflow: hidden; }
.asbsb-preloader {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
--asbsb-pl-bg: #ffffff; --asbsb-pl-fg: #1c1d20; --asbsb-pl-accent: #f5aa00;
background: var(--asbsb-pl-bg); color: var(--asbsb-pl-fg);
transition: opacity .55s ease, visibility .55s ease;
}
.asbsb-preloader.is-dark { --asbsb-pl-bg: #1c1d20; --asbsb-pl-fg: #ffffff; }
.asbsb-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* -- text（Loading：1文字ずつ躍る fountain。shop.asobit.jp 完コピ）-- */
.asbsb-pl-text { display: flex; font-size: 15px; letter-spacing: .25em; font-weight: 500; }
.asbsb-pl-text span { display: inline-block; animation: asbsb-pl-fountain 1.05s ease-in-out infinite; }
.asbsb-pl-text span:nth-child(1) { animation-delay: 0s; }
.asbsb-pl-text span:nth-child(2) { animation-delay: .09s; }
.asbsb-pl-text span:nth-child(3) { animation-delay: .18s; }
.asbsb-pl-text span:nth-child(4) { animation-delay: .27s; }
.asbsb-pl-text span:nth-child(5) { animation-delay: .36s; }
.asbsb-pl-text span:nth-child(6) { animation-delay: .45s; }
.asbsb-pl-text span:nth-child(7) { animation-delay: .54s; }
.asbsb-pl-text span:nth-child(8) { animation-delay: .63s; }
@keyframes asbsb-pl-fountain {
0%, 80%, 100% { opacity: .25; transform: translateY(0); }
40% { opacity: 1; transform: translateY(-.5em); }
}
/* -- spinner（回転リング）-- */
.asbsb-pl-spinner {
width: 44px; height: 44px; border-radius: 50%;
border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--asbsb-pl-accent);
animation: asbsb-pl-spin .8s linear infinite;
}
.is-dark .asbsb-pl-spinner { border-color: rgba(255, 255, 255, .18); border-top-color: var(--asbsb-pl-accent); }
@keyframes asbsb-pl-spin { to { transform: rotate(360deg); } }
/* -- dots（弾む3点）-- */
.asbsb-pl-dots { display: flex; gap: 11px; }
.asbsb-pl-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--asbsb-pl-fg); animation: asbsb-pl-bounce 1.2s ease-in-out infinite; }
.asbsb-pl-dots span:nth-child(2) { animation-delay: .16s; }
.asbsb-pl-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes asbsb-pl-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: .4; }
40% { transform: translateY(-13px); opacity: 1; }
}
/* -- logo-draw（ロゴを線で描いてから色を出す。JS がインライン化）-- */
.asbsb-pl-logo, .asbsb-pl-logo-svg { width: 210px; max-width: 56vw; height: auto; display: block; }
.asbsb-pl-logo-svg path, .asbsb-pl-logo-svg polygon { vector-effect: non-scaling-stroke; }
/* ★元の ![]()
は「カラーのロゴ画像」＝JS がインライン SVG に差し替えるまで見えると
「一瞬カラー → 消えて線描き」になる（実測 2026-07-22: fx.js は footer 読み込み＋fetch 待ちで1.5秒以上）。
描く時だけ隠し、描けない時（fetch 失敗）は JS が visibility を戻す＝プログレッシブは維持。 */
.asbsb-pl-logo-draw .asbsb-pl-logo { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .asbsb-pl-text span,html:not(.asbsb-force-motion) .asbsb-pl-spinner,html:not(.asbsb-force-motion) .asbsb-pl-dots span { animation: none; }
html:not(.asbsb-force-motion) .asbsb-pl-text span { opacity: 1; }
html:not(.asbsb-force-motion) .asbsb-preloader { transition: opacity .2s linear; }
/* reduce では JS が線描きをしない＝カラーのロゴ画像をそのまま見せる（隠しっぱなしにしない） */
html:not(.asbsb-force-motion) .asbsb-pl-logo-draw .asbsb-pl-logo { visibility: visible; }
}
/* ===========================================================================
navAfterHero（ヒーローの下にナビ → スクロールで上部固定）— site.json fx.navAfterHero
---------------------------------------------------------------------------
Elementor 系サイトでよくある「初期表示ではキービジュアルの下にメニュー、スクロールすると
画面上部に貼り付く」型。Kadence ヘッダービルダーは常に最上部なので、fx が #masthead を
ページ内の任意位置（アンカー要素の位置＝ページ側に置いた高さ確保用の spacer）へ送る。
★境界は 767px（スマホだけ素直に上部固定）。当初 1024px にしていたが、この型を使う元サイトは
タブレットでもヒーローの下にナビを置く（watanabe 実測 2026-07-27）＝タブレットは PC 側が正。
タブレットも上部固定にしたいサイトは decorations.css の :root ではなくメディアクエリで個別に上書きする。
位置の値 --fx-nav-top は JS がアンカーの document 座標から供給する。
=========================================================================== */
@media (min-width: 768px) {
html.fx-nav-after-hero #masthead.site-header {
position: absolute; top: var(--fx-nav-top, 0px); left: 0; right: 0; width: 100%; z-index: 60;
}
html.fx-nav-after-hero.fx-nav-fixed #masthead.site-header { position: fixed; top: 0; }
}
@media (max-width: 767px) {
html.fx-nav-after-hero #masthead.site-header { position: sticky; top: 0; z-index: 60; }
}
/* ===========================================================================
stickyCta（常時表示の CTA。PC=画面右端の縦積み／SP=画面下端の横バー）— site.json fx.stickyCta
---------------------------------------------------------------------------
医院・店舗系の定番（予約・LINE・電話・カレンダー）。1宣言で PC/SP 両方を出す。
各項目の地色は宣言の color を inline の --cta-bg で受ける（項目ごとに違うのが定番のため）。
=========================================================================== */
/* ★重なり順（watanabe 実測 2026-07-26）: CTA は **ヘッダーより上**が正。
navAfterHero のヘッダー（z=60）は「絶対配置 → 固定」へ移る途中で画面を縦に横切るため、
CTA より下だと帯が通過する一瞬だけボタンが隠れる。常時表示CTAはページ最前面の部類なので
backtop(9990) のすぐ下・検索モーダル(9999) より下に置く。 */
.asbsb-sticky-cta {
position: fixed; z-index: var(--fx-cta-z, 9980); display: flex;
right: var(--fx-cta-right, 0px); top: var(--fx-cta-top, 20%);
flex-direction: column; gap: var(--fx-cta-gap, 5px);
}
.asbsb-sticky-cta-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--fx-cta-icon-gap, 3px);
width: var(--fx-cta-w, 60px); min-height: var(--fx-cta-h, 77px);
padding: var(--fx-cta-pad, 10px 0);
background: var(--cta-bg, #333); color: var(--fx-cta-fg, #fff);
border-radius: var(--fx-cta-radius, 6px 0 0 6px);
text-decoration: none; line-height: 1.15; text-align: center;
font-size: var(--fx-cta-font, 10px); font-weight: 700;
transition: filter .25s ease, transform .25s ease;
}
/* ホバー: 少し左へ出て明るくなる（画面右端に貼り付いた帯が「押せる」ことを示す定番。
縦積みの時だけ動かす＝SP の下部バーは横並びなので動かさない） */
.asbsb-sticky-cta-item:hover, .asbsb-sticky-cta-item:focus-visible {
filter: brightness(1.12);
transform: translateX(calc(-1 * var(--fx-cta-hover-shift, 4px)));
/* ★色は据え置き（テーマの a:hover が highlight 色に変えてしまうため明示する） */
color: var(--fx-cta-fg, #fff);
}
.asbsb-sticky-cta-icon { display: block; width: var(--fx-cta-icon, 30px); height: var(--fx-cta-icon, 30px); }
.asbsb-sticky-cta-icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.asbsb-sticky-cta-label { display: block; }
.asbsb-sticky-cta-item.is-mobile-only { display: none; }
/* ★横バーへ切り替える境界は 767px＝スマホだけ（watanabe 実測 2026-07-27）。
タブレットは画面の高さに余裕があり、元サイトも右端の縦積みのまま＝PC 側が正。 */
@media (max-width: 767px) {
.asbsb-sticky-cta {
right: 0; left: 0; top: auto; bottom: 0; flex-direction: row; gap: 0;
}
/* ★下部バーも「アイコンが上・文字が下」の縦積み（2026-07-28 修正）。
横並び（アイコンの隣に文字）はアイコンを大きくできず、指で押す的としても貧弱に見える
＝親指で押すバーはアイコンを主役にして文字を添える方が正しい。 */
.asbsb-sticky-cta-item {
flex: 1 1 0; width: auto; min-height: var(--fx-cta-h-sp, 54px);
border-radius: 0; flex-direction: column; gap: var(--fx-cta-icon-gap-sp, 2px);
padding: var(--fx-cta-pad-sp, 6px 2px);
font-size: var(--fx-cta-font-sp, 11px);
}
.asbsb-sticky-cta-icon { width: var(--fx-cta-icon-sp, 26px); height: var(--fx-cta-icon-sp, 26px); }
.asbsb-sticky-cta-item.is-mobile-only { display: flex; }
.asbsb-sticky-cta-item.is-desktop-only { display: none; }
/* 下部バーは横並び＝左へずらすと隣とぶつかるので、明るくなるだけにする */
.asbsb-sticky-cta-item:hover, .asbsb-sticky-cta-item:focus-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html:not(.asbsb-force-motion) .asbsb-sticky-cta-item { transition: none; }
}
/* ===========================================================================
fx-disclosure（クリックで開閉する見出し＋中身）— className で当てる
---------------------------------------------------------------------------
なぜ core/details ではないか（watanabe 実測 2026-07-26）:
「一覧（JetEngine Listing）の1件ごとに、投稿タイトルを見出し・本文を中身にしたアコーディオン」を
作るとき、core/details の は **rich-text 属性**なので動的フィールドを入れられない。
summary を透明オーバーレイにして見出しを別ブロックで出す手も、閉じている details の中身は
Chrome が ::details-content の content-visibility で隠すため **author CSS で戻せない**。
→ 「素のグループ＋クラス」で開閉する語彙をここに置く（静的とWPで同一DOM・同一CSS/JS）。
使い方: 器のブロックに `fx-disclosure`。**1番目の子＝見出し（クリック領域）／2番目以降＝中身**。
開いた状態のクラスは `.is-open`（JS が付け外し）。
=========================================================================== */
.fx-disclosure > :not(:first-child) { display: none; }
.fx-disclosure.is-open > :not(:first-child) { display: block; }
.fx-disclosure > :first-child { cursor: pointer; }
.fx-disclosure > :first-child:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* ---- カードが立体的に傾く（fx-tilt・M17）: JS が --fx-tilt-x / -y を流す ----
傾きの最大= --fx-tilt-deg（既定8度）／浮き上がり= --fx-tilt-lift（既定 -4px）。
★指の端末と reduced-motion では JS が登録しない＝この transform は当たらない（素のカードのまま）。 */
.fx-tilt {
transform: perspective(var(--fx-tilt-perspective, 900px))
rotateX(var(--fx-tilt-x, 0deg))
rotateY(var(--fx-tilt-y, 0deg))
translateY(0);
transform-style: preserve-3d;
transition: transform var(--fx-tilt-duration, .35s) cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
.fx-tilt.is-tilting {
transform: perspective(var(--fx-tilt-perspective, 900px))
rotateX(var(--fx-tilt-x, 0deg))
rotateY(var(--fx-tilt-y, 0deg))
translateY(var(--fx-tilt-lift, -4px));
transition-duration: var(--fx-tilt-follow, .12s); /* 追従中は短く＝もたつかない。離すと元の速さで戻る */
}
/* ---- ボタンがカーソルに吸い付く（fx-magnetic・M17）: JS が --fx-magnetic-x / -y を流す ---- */
.fx-magnetic {
transform: translate3d(var(--fx-magnetic-x, 0px), var(--fx-magnetic-y, 0px), 0);
transition: transform var(--fx-magnetic-duration, .25s) cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.fx-tilt, .fx-magnetic { transform: none !important; transition: none !important; }
}
/* ---- 埋め込みは押すまで操作させない（fx-embed-guard・2026-09-27 asobit）----
器（iframe を中に持つグループ）に `fx-embed-guard`。JS が器に .is-guarded を付け、押すまで iframe に触れさせない
（地図・3D・動画がホイールや指のスクロールを奪わない）。押すと .is-live、マウスが外へ出ると戻る。
案内の札 = .fx-guard-pill（文言は --fx-guard-label / --fx-guard-label-touch・点の色は --fx-guard-dot）。 */
.fx-embed-guard { position: relative; }
.fx-embed-guard.is-guarded:not(.is-live) { cursor: pointer; }
.fx-embed-guard.is-guarded:not(.is-live) iframe { pointer-events: none; }
.fx-guard-pill {
position: absolute; left: 50%; top: 50%; z-index: 2;
display: inline-flex; align-items: center;
padding: 7px 16px; border-radius: 999px;
background: rgba(12, 12, 13, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .22);
color: #fff; font-size: 12px; line-height: 1.4; letter-spacing: .08em; white-space: nowrap;
opacity: 0; transform: translate(-50%, calc(-50% + 6px)); pointer-events: none;
transition: opacity .35s cubic-bezier(.2, .7, .1, 1), transform .35s cubic-bezier(.2, .7, .1, 1);
}
.fx-guard-pill::before { content: ""; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--fx-guard-dot, var(--global-palette1, #fff)); }
.fx-embed-guard.is-guarded:not(.is-live):hover .fx-guard-pill { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: none) {
.fx-guard-pill { top: auto; bottom: 12px; opacity: .92; transform: translateX(-50%); font-size: 11px; padding: 6px 13px; }
.fx-embed-guard.is-live .fx-guard-pill { opacity: 0; }
}
/* ---- ノートパソコンの枠（fx-laptop・2026-09-27 asobit）----
グループに `fx-laptop` を付けると、そのグループがシルバーの縁の黒いふた（画面）になり、下に本体の板が付く。
画面に入れる物＝**グループの直下の 1 つ**（iframe／画像ブロック／img）。16:10 に収める。
`fx-embed-guard` と一緒に付けると、画面の埋め込みは押すまで操作させない。
調整: --fx-laptop-width（ふたの幅・既定 88%＝本体の板がふたより左右に 6.8% 出る）／--fx-laptop-rim（縁の色）／--fx-laptop-ratio。
★本体の板と影は ::after、カメラは ::before＝中のブロックを増やさない（顧客が画面の中身だけ差し替えられる）。 */
.fx-laptop {
position: relative; box-sizing: border-box;
width: var(--fx-laptop-width, 88%); margin-left: auto; margin-right: auto;
padding: 2.6% 2.6% 3.4%;
border-radius: 16px 16px 5px 5px;
background: #060607;
box-shadow: 0 0 0 1.5px var(--fx-laptop-rim, #b3b5ba), 0 0 0 2.5px #56585e, 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.fx-laptop::before {
content: ""; position: absolute; top: 1.1%; left: 50%; width: 5px; height: 5px;
border-radius: 50%; background: #202125; transform: translateX(-50%);
}
.fx-laptop::after {
content: ""; position: absolute; left: -6.8%; right: -6.8%; top: 100%;
height: clamp(9px, 3.3%, 16px);
border-radius: 2px 2px 16px 16px / 2px 2px 100% 100%;
background:
linear-gradient(180deg, #8f9197, #c3c5ca) 50% 0 / 15% 42% no-repeat,
linear-gradient(180deg, #f4f5f7 0%, #cfd1d5 36%, #9c9ea4 100%);
box-shadow: 0 28px 34px -20px rgba(0, 0, 0, .8);
pointer-events: none;
}
.fx-laptop > iframe,
.fx-laptop > img,
.fx-laptop > figure,
.fx-laptop > .wp-block-image {
display: block; width: 100%; height: auto; margin: 0; border: 0; border-radius: 2px;
aspect-ratio: var(--fx-laptop-ratio, 16 / 10);
background: #111113; overflow: hidden;
}
.fx-laptop > figure img, .fx-laptop > .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .fx-laptop { border-radius: 10px 10px 3px 3px; } }