/**
 * Front + editor shared style for bcp/section-nav.
 *
 * block.json の `style` と `editorStyle` で同じファイルを指している。
 * このブロックを置かないページには WP コアが自動で配信しない。
 *
 * このブロックは「ページ内アンカーナビ(ピルバー)役」。
 * ピル本体は core/buttons + core/button(WP コア + Ollie variation)で構築されるため、
 * ピルの色 / タイポ / 角丸 / スタイル(Outline/Fill)は CSS で**触らない**。
 * ここでは:
 *  - バーの flex レイアウト / sticky 追従 / 出現アニメ
 *  - ドロップダウンパネル(絶対配置・hover/focus で表示)とサブ施術リスト・サイドカード
 *  - モバイル(横スクロール / ハンバーガー)
 *  - スタッガー登場(.is-visible.is-staggered をトリガーにした純 CSS)
 * だけを書く。トークンは var(--wp--preset--…) にリテラルフォールバックを添える。
 */

.bcp-section-nav {
	--bcp-nav-gap: var( --wp--preset--spacing--20, 8px );
	/* Ollie Menu Panel 1 のトーン: base 背景 / border-light(#E3E3F0) / small-light シャドウ /
	   radius 10px / 補助面 tertiary(#f8f7fc)/ 補助文字 secondary(#545473)。 */
	--bcp-nav-panel-bg: var( --wp--preset--color--base, #ffffff );
	--bcp-nav-panel-fg: var( --wp--preset--color--main, #1e1e26 );
	--bcp-nav-panel-border: var( --wp--preset--color--border-light, #e3e3f0 );
	--bcp-nav-panel-shadow: var( --wp--preset--shadow--small-light, 0 10px 30px rgba( 20, 17, 31, 0.08 ) );
	--bcp-nav-panel-radius: 10px;
	--bcp-nav-panel-surface: var( --wp--preset--color--tertiary, #f8f7fc );
	--bcp-nav-panel-muted: var( --wp--preset--color--secondary, #545473 );
	--bcp-nav-z: 90;

	/* 入場(スタッガー)アニメのイージング。vip2026 の `--spring-easing` を採用し、
	   無い環境でも効くようリテラル fallback を持たせる(sticky-cta と同方針)。 */
	--bcp-stagger-ease: var( --spring-easing, cubic-bezier( 0.22, 1, 0.36, 1 ) );

	/* メガパネルの位置基準。パネルは全幅(left:0/right:0)で横はみ出ししないため、
	   旧来の overflow-x:clip(右はみ出し対策)は不要。clip があると下方向に開くパネルの
	   描画/重なり順に干渉するので付けない。 */
	position: relative;
}

/* sticky: 上部に追従。--bcp-sticky-offset は固定ヘッダー高さぶんのオフセット。 */
.bcp-section-nav.is-sticky {
	position: sticky;
	top: var( --bcp-sticky-offset, 0px );
	z-index: var( --bcp-nav-z );
}

/* ログイン時の WP 管理バー(固定)と sticky バーが被るのを回避。管理バー高さ分だけ
   さらに下げる。WP コアが提供する --wp-admin--admin-bar--height(PC 32px / モバイル
   46px)を使い、無い環境向けに 32px をフォールバック。 */
.admin-bar .bcp-section-nav.is-sticky {
	top: calc( var( --bcp-sticky-offset, 0px ) + var( --wp-admin--admin-bar--height, 32px ) );
}

/* フロストガラス(背景ぼかし)。/price の sticky メニューバー(is-style-background-blur)
   と同じ効果: バー背景を半透明 base + backdrop-filter で、スクロール時に裏の本文が
   ぼやけて透ける。!important + クラス 2 つ分の詳細度で has-base-background-color を上書き。 */
.bcp-section-nav.is-frosted {
	background-color: color-mix( in srgb, var( --wp--preset--color--base, #ffffff ) 72%, transparent ) !important;
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	backdrop-filter: blur( 16px ) saturate( 180% );
}

/* ピルバー本体: デスクトップは折返し可能な flex。既定は中央寄せ(/price の >1180px と
   同じ)。横スクロールモードでは別途 flex-start に上書きする。 */
.bcp-section-nav__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --bcp-nav-gap );
	margin: 0;
}

/* バー直下の core/buttons / core/button の余白をリセットして横並びを綺麗に。 */
.bcp-section-nav__bar .wp-block-button {
	margin: 0;
}

/* === メガパネル(nav 直下の全幅コンテナ)=============================
   パネルはピル内ではなく nav 直下の `.bcp-section-nav__panels` に出力し、
   Interactivity(view.js)が対応ピルの hover/focus で `.is-open` を付ける。
   全幅(left:0/right:0)なのでバーの横スクロール(overflow)に切られず、
   メガメニューとして開ける。位置基準は nav(`.bcp-section-nav { position:relative }`)。
   全パネルはコンテナ先頭に重ねて置き、開いた 1 枚だけ表示する。 */
.bcp-section-nav__panels {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: calc( var( --bcp-nav-z ) + 1 );
}

.bcp-section-nav__panel {
	position: absolute;
	top: 0;
	background: var( --bcp-nav-panel-bg );
	color: var( --bcp-nav-panel-fg );
	border: 1px solid var( --bcp-nav-panel-border );
	border-radius: var( --bcp-nav-panel-radius );
	box-shadow: var( --bcp-nav-panel-shadow );
	overflow: hidden; /* 角丸でフィーチャーカード(tertiary)の角をクリップ。 */

	opacity: 0;
	visibility: hidden;
	/* 上端(transform-origin: top)から scale(0.96)→1 で上から下へ展開しながらフェードイン。 */
	transform: scale( 0.96 );
	transform-origin: top center;
	transition: opacity 0.18s ease, transform 0.18s cubic-bezier( 0.2, 0.7, 0.3, 1 ), visibility 0s linear 0.18s;
	pointer-events: none;
}

/* === メガパネルの幅(Ollie Menu Designer と同型)========================
   sized box を作り、justify で nav 内に左/中央/右配置する。full は全幅 bleed。 */
.bcp-section-nav__panel.is-width-content {
	width: var( --wp--style--global--content-size, 650px );
	max-width: 100%;
}
.bcp-section-nav__panel.is-width-wide {
	width: var( --wp--style--global--wide-size, 1280px );
	max-width: 100%;
}
.bcp-section-nav__panel.is-width-full {
	left: 0;
	right: 0;
	width: auto;
	border-inline: 0;
	border-radius: 0; /* 画面端〜端なので角丸・左右枠は外す。 */
}
.bcp-section-nav__panel.is-width-custom {
	width: var( --bcp-panel-width, 600px );
	max-width: 100%;
}

/* === メガパネルの配置(full 以外で有効。絶対配置 box を左/中央/右へ)======
   左寄せは「設定中ピルの左端」に揃える(--bcp-panel-pill-left を view.js が実測で付与。
   未設定/JS 無効時は nav 左端 = 0)。transform-origin も配置側に寄せて自然に展開。 */
.bcp-section-nav__panel.is-justify-left {
	left: var( --bcp-panel-pill-left, 0px );
	right: auto;
	margin-inline: 0;
	transform-origin: top left;
}
.bcp-section-nav__panel.is-justify-center {
	left: 0;
	right: 0;
	margin-inline: auto;
}
.bcp-section-nav__panel.is-justify-right {
	left: auto;
	right: 0;
	margin-inline: 0;
	transform-origin: top right;
}
.bcp-section-nav__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: scale( 1 );
	transition: opacity 0.18s ease, transform 0.18s cubic-bezier( 0.2, 0.7, 0.3, 1 );
	pointer-events: auto;
}

/* 内側 = 左の Icon and Text リスト + 右のフィーチャーカード(Ollie Menu Panel 1 調)。
   幅は外側 box(width クラス)が持つので指定しない。狭い幅ではカードがリストの下へ回る。 */
.bcp-section-nav__panel-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* 左カラム: 見出し(カテゴリ名)+ 細い区切り + Icon and Text リスト。 */
.bcp-section-nav__list-col {
	flex: 1 1 60%;
	min-width: min( 20rem, 100% );
	padding: var( --wp--preset--spacing--40, 24px ) var( --wp--preset--spacing--30, 16px );
}

/* セクション見出し(カテゴリ名・大文字・secondary)。 */
.bcp-section-nav__eyebrow {
	margin: 0 0 8px;
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --bcp-nav-panel-muted );
}

/* 細い区切り線(Ollie の is-style-separator-thin 相当)。 */
.bcp-section-nav__sep {
	height: 1px;
	margin: 0 0 var( --wp--preset--spacing--20, 10px );
	border: 0;
	background: var( --bcp-nav-panel-border );
}

/* Icon and Text 行を N 列グリッドに(--bcp-dd-cols は render.php が inject)。
   列の最小幅を確保して潰れ・縦折りを防ぐ。 */
.bcp-section-nav__sub-list {
	display: grid;
	grid-template-columns: repeat( var( --bcp-dd-cols, 1 ), minmax( min( 12rem, 100% ), 1fr ) );
	gap: 4px var( --wp--preset--spacing--30, 16px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcp-section-nav__sub {
	margin: 0;
	padding: 0;
}

/* 1 行 = › アイコン箱 + テキスト(施術名 + タグライン)。 */
.bcp-section-nav__sub-link {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--20, 12px );
	padding: 8px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.12s ease, transform 0.1s ease;
}
.bcp-section-nav__sub-link:hover,
.bcp-section-nav__sub-link:focus-visible {
	background: var( --bcp-nav-panel-surface );
}
/* ホバー / フォーカスで「点灯」: アイコン箱 = primary・アイコン文字 = base、リンク名 = primary。
   ホバー / タップが一目で分かるようにする。 */
.bcp-section-nav__sub-link:hover .bcp-section-nav__sub-icon,
.bcp-section-nav__sub-link:focus-visible .bcp-section-nav__sub-icon {
	background: var( --wp--preset--color--primary, #5344f4 );
	color: var( --wp--preset--color--base, #ffffff );
}
.bcp-section-nav__sub-link:hover .bcp-section-nav__sub-name,
.bcp-section-nav__sub-link:focus-visible .bcp-section-nav__sub-name {
	color: var( --wp--preset--color--primary, #5344f4 );
}
/* クリック / タップで軽く縮むタクタイルフィードバック。 */
.bcp-section-nav__sub-link:active {
	transform: scale( 0.97 );
}

/* › アイコン箱: tertiary 面・角丸・固定 44px(Ollie の 50px アイコンを少し詰める)。 */
.bcp-section-nav__sub-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var( --bcp-nav-panel-surface );
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	line-height: 1;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.bcp-section-nav__sub-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bcp-section-nav__sub-name {
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	line-height: var( --wp--custom--line-height--snug, 1.2 );
	transition: color 0.12s ease;
}

.bcp-section-nav__sub-desc {
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	line-height: 1.3;
	color: var( --bcp-nav-panel-muted );
}

/* === 右フィーチャーカード(showSideCard)= Ollie の case study カード調 ====== */
.bcp-section-nav__feature {
	flex: 1 1 30%;
	min-width: min( 14rem, 100% );
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: var( --wp--preset--spacing--40, 24px ) var( --wp--preset--spacing--30, 16px );
	background: var( --bcp-nav-panel-surface );
}

/* キャンペーン画像(任意・per-pill MediaUpload)。角丸カバー。
   aspect-ratio / object-fit は render.php がインラインで付与(Inspector の比率選択。
   'original' は付与せず元の比率で表示)。 */
.bcp-section-nav__feature-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 4px;
}

.bcp-section-nav__feature-title {
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	line-height: 1.3;
}

.bcp-section-nav__feature-desc {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
	line-height: 1.5;
	color: var( --bcp-nav-panel-muted );
}

.bcp-section-nav__feature-link {
	margin-top: 2px;
	color: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9rem );
	font-weight: var( --wp--custom--font-weight--semi-bold, 600 );
	text-decoration: none;
	transition: color 0.12s ease, transform 0.1s ease;
}
.bcp-section-nav__feature-link:hover,
.bcp-section-nav__feature-link:focus-visible {
	color: var( --wp--preset--color--primary, #5344f4 );
	text-decoration: underline;
}
.bcp-section-nav__feature-link:active {
	transform: scale( 0.97 );
}

/* === ハンバーガートグル(mobileMode='hamburger')============== */
.bcp-section-nav__toggle {
	display: none; /* デスクトップでは非表示。@media で出す。 */
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.bcp-section-nav__toggle-bars,
.bcp-section-nav__toggle-bars::before,
.bcp-section-nav__toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
	transition: transform 0.16s ease;
}
.bcp-section-nav__toggle-bars::before,
.bcp-section-nav__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.bcp-section-nav__toggle-bars::before { top: -7px; }
.bcp-section-nav__toggle-bars::after  { top: 7px; }

/* === 出現アニメーション(appearance / staggered)===============
   【フラッシュ防止 + フェイルセーフ】
   バー自体は常時可視(opacity:1)でレイアウト(sticky 等)を初回ペイントから確定。
   スタッガー対象のピルは **初回ペイントから隠す**(is-js を待たない)。これにより
   「一瞬全ピルが見えてから消えてスタッガー」というフラッシュが起きない。
   JS が無い/失敗(is-js が付かない)場合は CSS フェイルセーフ・アニメで必ず表示する。
   prefers-reduced-motion ではピルを隠さない(下の @media)。 */
.bcp-section-nav__bar {
	opacity: 1;
}

/* 既定: スタッガー対象のピルを初回ペイントから隠す(バー自体は見える)。 */
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button {
	opacity: 0;
}

/* まだ可視化(is-visible)されていない間のフェイルセーフ。JS が無い/遅い/失敗で
   is-visible が付かないままでも、1.6s 後に必ず表示する(待っても出ない事故を防ぐ)。
   JS が is-visible を付ければ下のスタッガー登場が優先され、フェイルセーフは発火しない。 */
.bcp-section-nav.is-staggered:not( .is-visible ) .bcp-section-nav__bar .wp-block-button {
	animation: bcp-section-nav-failsafe 0.001s linear 1.6s forwards;
}
@keyframes bcp-section-nav-failsafe {
	to { opacity: 1; }
}

@keyframes bcp-section-nav-fade-left {
	from { opacity: 0; transform: translateX( -0.75rem ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}
@keyframes bcp-section-nav-fade-up {
	from { opacity: 0; transform: translateY( 0.75rem ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* staggered: .is-visible が付いた瞬間に各ピルが順番にフェードイン。
   遅延 = index × --bcp-stagger-step。最大 20 ピルまで面倒を見る(下の nth-child 参照)。
   ピル要素は core/button の `.wp-block-button`。 */
.bcp-section-nav.is-staggered.is-visible .bcp-section-nav__bar .wp-block-button {
	animation: bcp-section-nav-fade-left 0.42s var( --bcp-stagger-ease ) both;
	animation-delay: calc( var( --bcp-stagger-index, 0 ) * var( --bcp-stagger-step, 100ms ) );
}
.bcp-section-nav.is-staggered.is-anim-fadeInUp.is-visible .bcp-section-nav__bar .wp-block-button {
	animation-name: bcp-section-nav-fade-up;
}

.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(1)  { --bcp-stagger-index: 0; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(2)  { --bcp-stagger-index: 1; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(3)  { --bcp-stagger-index: 2; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(4)  { --bcp-stagger-index: 3; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(5)  { --bcp-stagger-index: 4; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(6)  { --bcp-stagger-index: 5; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(7)  { --bcp-stagger-index: 6; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(8)  { --bcp-stagger-index: 7; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(9)  { --bcp-stagger-index: 8; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(10) { --bcp-stagger-index: 9; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(11) { --bcp-stagger-index: 10; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(12) { --bcp-stagger-index: 11; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(13) { --bcp-stagger-index: 12; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(14) { --bcp-stagger-index: 13; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(15) { --bcp-stagger-index: 14; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(16) { --bcp-stagger-index: 15; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(17) { --bcp-stagger-index: 16; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(18) { --bcp-stagger-index: 17; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(19) { --bcp-stagger-index: 18; }
.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button:nth-child(20) { --bcp-stagger-index: 19; }

/* 動きを減らす設定では時間差フェード・フェイルセーフを無効化し、ピルを常時可視にする。 */
@media ( prefers-reduced-motion: reduce ) {
	.bcp-section-nav.is-staggered .bcp-section-nav__bar .wp-block-button {
		opacity: 1;
		animation: none;
	}
}

/* === モバイル ====================================================
   モバイル判定のしきい値はブロックの `breakpoint` 属性(既定 1024px)。CSS @media は
   カスタムプロパティを読めないため、view.js が matchMedia('(max-width: breakpoint-1)')
   で root に `.is-mobile` を付け外しして driving する(= 属性が実際に効く)。
   JS 無効時のみ下の `@media ( max-width: 599px )` が固定 599px フォールバックとして効く
   (`:not(.is-js)` でガード。JS 有効時は breakpoint 属性=既定 1024 で driving し二重適用しない)。
   横スクロール(scroll)/ ハンバーガー(hamburger)の 2 モード。メガパネルは desktop 専用
   なのでモバイル幅では常に非表示(ピル = 直リンクで該当セクションへジャンプ)。 */

/* --- JS パス: 実 breakpoint で view.js が付ける .is-mobile --- */
.bcp-section-nav.is-mobile .bcp-section-nav__panels {
	display: none;
}
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar {
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* 全幅ブリード(背景・スクロール領域は画面端〜端)。左ガターは constrained 本文の実際の
	   左端 = max(root-padding, (100vw - contentSize)/2) に一致させる。本文が中央寄せされる幅
	   では (100vw-contentSize)/2、狭い幅では root-padding が効くので、どの幅でも先頭ピルが
	   見出し等と左揃えになる。スクロールするとガターが流れて余白が消え、右端は見切れる。 */
	--bcp-nav-content-gutter: max(
		var( --wp--style--root--padding-left, 16px ),
		calc( ( 100vw - var( --wp--style--global--content-size, 650px ) ) / 2 )
	);
	padding-inline-start: var( --bcp-nav-content-gutter );
	padding-inline-end: 0;
	scroll-padding-inline-start: var( --bcp-nav-content-gutter );
}
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar::-webkit-scrollbar {
	display: none;
}
/* 内側の core/buttons(.wp-block-buttons)は独自に flex-wrap:wrap / justify center を
   持つため、横スクロールにはこれも nowrap + 左寄せにする(でないとピルが内側で折り返す /
   中央寄せだとスクロール時に先頭ピルが見切れる)。/price の button-scroll-wrap と同方針。 */
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar .wp-block-buttons {
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.bcp-section-nav.is-mobile.is-mobile-scroll .bcp-section-nav__bar .wp-block-button {
	flex: 0 0 auto;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__toggle {
	display: inline-flex;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__bar {
	display: none;
	flex-direction: column;
	align-items: stretch;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__bar.is-menu-open {
	display: flex;
}
.bcp-section-nav.is-mobile.is-mobile-hamburger .bcp-section-nav__bar .wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/* --- no-JS フォールバック: 固定 599px。JS 有効時(.is-js)は二重適用しない ---
   メガパネルは JS 駆動(no-JS では .is-open が付かず既定で非表示)なので隠す指定は不要。 */
@media ( max-width: 599px ) {
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		--bcp-nav-content-gutter: max(
			var( --wp--style--root--padding-left, 16px ),
			calc( ( 100vw - var( --wp--style--global--content-size, 650px ) ) / 2 )
		);
		padding-inline-start: var( --bcp-nav-content-gutter );
		padding-inline-end: 0;
		scroll-padding-inline-start: var( --bcp-nav-content-gutter );
	}
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar::-webkit-scrollbar {
		display: none;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar .wp-block-buttons {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-scroll .bcp-section-nav__bar .wp-block-button {
		flex: 0 0 auto;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__toggle {
		display: inline-flex;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__bar {
		display: none;
		flex-direction: column;
		align-items: stretch;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__bar.is-menu-open {
		display: flex;
	}
	.bcp-section-nav:not( .is-js ).is-mobile-hamburger .bcp-section-nav__bar .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
}

/* トグルは既定で display:none(.bcp-section-nav__toggle)。モバイル(.is-mobile or
   no-JS の @media)かつ hamburger のときだけ上のルールで表示するので、デスクトップ用の
   明示的な打ち消しルールは不要。 */

/* === エディタプレビュー ========================================
   canvas 内では sticky / 出現アニメは邪魔なので無効化し、常時可視・常時展開で
   編集しやすくする。ドロップダウンは hover で確認できるよう CSS のまま残す。 */
.bcp-section-nav--editor {
	position: relative !important;
	top: auto !important;
}
.bcp-section-nav--editor .bcp-section-nav__bar,
.bcp-section-nav--editor .wp-block-button {
	opacity: 1 !important;
}
.bcp-section-nav--editor .wp-block-button {
	animation: none !important;
}