/* =========================================================
   サイト共通のベーススタイル（全ページで最初に読み込む）
   - サイト全体で使う共通スタイル（色・ヘッダー・フッター・基本のリンク色など）は
     必ずこのファイルに書く。
   - 各ページだけの見た目は、そのページ専用のCSS（例: about.css）に書く。

   ヘッダー・フッターは about-1.html（トップpage と共通デザイン）の見た目を
   4ページ（about-1 / about-4 / contact / privacy-policy）で共通化したもの。
   コピー元は style.css の Header / Footer セクション。ただし about-1.html は
   引き続き style.css を読み込み、そちら側の position:fixed 実装で表示される
   （style.css は変更しない＝ルールが二重に存在する）。
   このファイル側は position:sticky で実装し、body への padding-top 追加は行わない。
   ========================================================= */

/* full-bleed（width:100vw）実装によるスクロールバー幅分の横はみ出しを隠す。
   overflow-x:hidden だと html/body がスクロールコンテナ扱いになり、共通ヘッダーの
   position:sticky が効かなくなるため clip を使う（見た目は hidden と同じ）。 */
html,
body {
  overflow-x: clip;
}

/* ---------- サイト共通のCSS変数 ---------- */
:root{
  --bb-black:    #111111;
  --bb-sns-bg:   #111111;   /* SNSアイコンの丸い地色 */
  --bb-red:      #e2311d;   /* ロゴ・見出しアクセントの赤（style.css と統一） */
  --bb-orange:   #f7931e;   /* 赤→オレンジ→ゴールドのグラデ中間色（style.css と統一） */
  --bb-gold:     #fdb913;   /* グラデーション終端のゴールド */
  --bb-coral:    #F2726F;   /* ボタンのサーモンピンク */
  --bb-pink-bg:  #FBEBEC;   /* ヒーロー・円背景の薄いピンク */
  --bb-pink-mid: #F6C9CE;   /* グラデーション中間色 */
  --bb-text:     #2b2b2b;   /* ヘッダーのナビ文字色など、黒よりわずかに淡い本文色 */
  --bb-gradient: linear-gradient(90deg, var(--bb-red) 0%, var(--bb-orange) 55%, var(--bb-gold) 100%);
  --bb-navy-glow-base: #030c22;   /* フッター本体・弧の濃紺 */

  /* ヘッダー・フッターのレイアウト用（style.css の :root と同値） */
  --frame-bg:    #fff;                     /* ヘッダー地色・弧の白 */
  --frame-rule:  rgba(28, 35, 51, 0.16);  /* ヘッダー下辺の罫線 */
  --frame-w:     14px;                     /* 額縁の太さ（style.css の :root と同値） */
  --bar-h:       58px;                     /* ナビ本体の高さ */
  --header-arc:  22px;                     /* ヘッダー下辺・左右の弧の大きさ */
  --logo-slot:   220px;                    /* 中央ロゴ列の幅 */

  --bs-body-font-family: "Noto Sans JP", sans-serif;
  --bs-link-color: var(--bb-red);
}
/* 上下に額縁のぶんだけ余白を空ける。左右は空けない（全幅の背景を持つ節を
   画面端まで通し、額縁を本文の上に重ねて切り取る形にするため。style.css と同じ考え方）。 */
body{
  color:var(--bb-black);
  font-feature-settings:"palt" 1;
  padding-top: var(--frame-w);
  padding-bottom: var(--frame-w);
}
a{ text-decoration:none; }

/* ---------- Header ----------
   about-1.html（＝トップページと共通デザイン）のヘッダーを4ページ共通化したもの。
   左右にナビを振り分け、ロゴは中央。about-1 / index は style.css 側の position:fixed
   ＋額縁＋body余白で表示されるが、こちらは額縁を持たないページ向けに position:sticky
   で実装し、body への padding-top 追加は行わない。 */
.bb-header {
  position: sticky;
  /* 額縁の上辺の下にくっつける */
  top: var(--frame-w);
  z-index: 1036;
  background-color: var(--frame-bg);
  border-bottom: 1px solid var(--frame-rule);
}

/* ヘッダー下辺の弧。ナビ本体（.bb-header__bar / 高さ--bar-h）はそのまま四角のまま
   崩さず、その下にだけ左右の端から弧を足す。ロゴ・ナビの当たり判定には
   一切影響しない。
   幅=高さの2倍にして、左右とも0に収束する正しい半円にしている（片側だけ
   垂直に切り立つ変形防止）。中央はヘッダーの地の直線のまま（へこんで見える）、
   左右の端だけ半円が下に垂れる形。::before=左端、::after=右端 */
.bb-header::before,
.bb-header::after {
  content: "";
  position: absolute;
  top: 100%;
  width: calc(var(--header-arc) * 2);
  height: var(--header-arc);
  background: var(--frame-bg);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}

.bb-header::before {
  left: 0;
}

.bb-header::after {
  right: 0;
}

.bb-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--bar-h);
  padding: 0 clamp(1rem, 2.5vw, 2rem);
}

/* ---- ロゴ ---- */
.bb-header .navbar-brand {
  margin: 0;
  padding: 0;
}

.bb-header .navbar-brand img {
  display: block;
  height: 26px;
  width: auto;
  max-width: calc(var(--logo-slot) - 32px);
  object-fit: contain;
}

/* ハンバーガー（991px以下だけ表示）。3本線が開いたときに×へ変形する。
   見た目・動きはトップページ（style.css の .bb-mnav-toggle）と同じ */
.bb-mnav-toggle {
  display: none;
  position: relative;
  margin-left: auto;
  width: 44px;  /* タップ領域は44px角を確保する */
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  /* 開閉のたびにボタンごと1回転する。1回転（360deg）なので、
     線の傾きは下の span 側の指定だけで決まる */
  transition: transform 0.6s ease;
}

.bb-mnav-toggle[aria-expanded="true"] {
  transform: rotate(360deg);
}

.bb-mnav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--bb-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.bb-mnav-toggle span:nth-child(1) { top: 15px; }
.bb-mnav-toggle span:nth-child(2) { top: 21px; }
.bb-mnav-toggle span:nth-child(3) { top: 27px; }

.bb-mnav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.bb-mnav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.bb-mnav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- ナビ ---- */
.bb-header .nav-link {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--bb-text);
  padding: 0.5rem 0.7rem;
  transition: color 0.25s ease;
}

.bb-header .nav-link:hover,
.bb-header .nav-link:focus-visible {
  color: var(--bb-red);
}

.bb-header__actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.bb-header .btn-contact {
  background: var(--bb-gradient);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.42rem 1.2rem;
  white-space: nowrap;
  transition: filter 0.25s ease;
}

.bb-header .btn-contact:hover {
  color: #fff;
  filter: brightness(1.05);
}

/* SNSアイコン（ヘッダー／縦ナビ／モバイルメニューの3か所で共通）。
   丸い地色はCSSで描き、画像（assets/img/icon-sns-*.svg）は白抜きのマークだけを持つ。
   こうしておくと、ホバー時の色替えも並べ替えもCSSだけで完結する */
.bb-sns-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: var(--bb-sns-bg);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* 既定のホバー色。下で個別指定していないもの（YouTube）はこれが効く */
.bb-sns-icon:hover,
.bb-sns-icon:focus-visible {
  background-color: var(--bb-red);
}

.bb-sns-icon img {
  position: relative; /* Instagramのグラデ層(::before)より手前に描くため */
  display: block;
  width: 15px;
  height: 15px;
  transition: filter 0.25s ease;
}

/* ---- ホバー時は各SNSらしい見た目に切り替える ---- */

/* Instagram: 公式のグラデーション。background-image は色の補間ができず
   パッと切り替わってしまうので、同じ大きさの層を重ねて不透明度でフェードさせる */
.bb-sns-icon--instagram::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}

.bb-sns-icon--instagram:hover::before,
.bb-sns-icon--instagram:focus-visible::before {
  opacity: 1;
}

/* グラデーションがフェードインしきるまでの下地は黒のまま（赤が透けないように） */
.bb-sns-icon--instagram:hover,
.bb-sns-icon--instagram:focus-visible {
  background-color: var(--bb-sns-bg);
}

/* X: 白黒を反転させる。丸を白にし、白一色のSVGは filter で黒へ反転させる。
   輪郭は border だと28pxの箱が広がって並びがずれるので、内側の影で描く */
.bb-sns-icon--x:hover,
.bb-sns-icon--x:focus-visible {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--bb-sns-bg);
}

.bb-sns-icon--x:hover img,
.bb-sns-icon--x:focus-visible img {
  filter: invert(1);
}

/* ---- lg以上: 左右にナビ、中央にロゴ ---- */
@media (min-width: 992px) {
  /* 中央にロゴ用の列を確保する。両端に寄せるだけだと、ナビが長くなったぶん
     内側へ伸びてロゴに重なる。
     Bootstrapが .navbar-expand-lg .navbar-collapse に display:flex !important を
     当てているので、こちらも !important でないとグリッド指定が効かない */
  .bb-header .navbar-collapse {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--logo-slot) minmax(0, 1fr);
    align-items: center;
    width: 100%;
  }

  .bb-header__nav {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }

  .bb-header__nav--left {
    grid-column: 1;
    justify-content: center;
  }

  .bb-header__nav--right {
    grid-column: 3;
    justify-content: flex-end;
  }

  /* ロゴは中央に固定して置く（ナビの並びからは外す） */
  .bb-header .navbar-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
  }

  /* 幅の狭いlgでも収まるよう、文字と余白は画面幅に合わせて詰める */
  .bb-header .nav-link {
    padding: 0.5rem clamp(0.25rem, 0.55vw, 0.7rem);
    font-size: clamp(0.74rem, 0.8vw, 0.85rem);
    white-space: nowrap;
  }

  .bb-header .btn-contact {
    padding: 0.4rem clamp(0.7rem, 0.9vw, 1.2rem);
    font-size: clamp(0.74rem, 0.8vw, 0.85rem);
  }
}

/* ---- lg未満: ハンバーガー＋全画面メニューに切り替える ---- */
@media (max-width: 991.98px) {
  .bb-header__bar {
    padding: 0.6rem 1rem;
  }

  /* ヘッダー内の横並びナビは畳む。991px以下のナビは全画面メニュー(.bb-mnav)が担う */
  .bb-header .navbar-collapse {
    display: none !important;
  }

  .bb-mnav-toggle {
    display: block;
  }
}

/* サブページ側のナビ項目に aria-current="page" を付けて、現在地をうっすら強調する
   （現在の4ページ共通ヘッダーでは aria-current を付けていないので、このルールは
   将来 aria-current を付けた場合の保険） */
.bb-header .nav-link[aria-current="page"] {
  color: var(--bb-red);
}

/* ---------- Mobile Nav（〜991px）----------
   トップページ（index.html / style.css の .bb-mnav 一式）と同じスマホメニューを、
   共通ヘッダーを使う下層ページにも入れたもの。開閉は assets/js/nav.js。
   トップとの違いは切り替え幅だけ（トップは〜767px、こちらは〜991px。
   下層の横並びナビは992px未満だと収まらないため現状の幅を踏襲している）。

   全画面メニューはヘッダーの下端から額縁の内側いっぱいに広がる。
   白い面そのものは .bb-mnav-circle（中央から広がる円）が作るので、この要素自体は
   透明にしてリンクを載せるだけの器にしている。
   閉じている間は visibility:hidden なので、キーボードのフォーカスも読み上げも入らない */
.bb-mnav-circle,
.bb-mnav {
  display: none;
}

.bb-mnav {
  position: fixed;
  top: calc(var(--frame-w) + var(--bar-h));
  left: var(--frame-w);
  right: var(--frame-w);
  bottom: var(--frame-w);
  z-index: 1036;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.5rem 1rem;
  background: transparent;
  overflow-y: auto;
  visibility: hidden;
}

.bb-mnav.is-open {
  visibility: visible;
}

.bb-mnav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.bb-mnav__list a {
  display: block;
  padding: 0.3rem 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bb-text);
}

.bb-mnav__list a[aria-current="page"] {
  color: var(--bb-red);
}

.bb-mnav__cta {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.75rem 2.2rem;
  background: var(--bb-gradient);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

.bb-mnav__cta:hover,
.bb-mnav__cta:focus-visible {
  color: #fff;
}

.bb-mnav__sns {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.6rem;
}

/* ---- 開くときの演出（中央から円が広がってメニュー面になる）----
   円は2枚重ねてある。先に走るのがブランドのグラデーション（赤→オレンジ→ゴールド）で、
   0.25秒遅れて白い円が追いかけ、最終的にその白がメニューの地になる。
   結果として「オレンジ〜赤がサッと画面を拭ってから白に落ち着く」動きになる。
   閉じるときは逆に白が先に縮んでオレンジが顔を出し、そのオレンジが遅れて縮む。
   どちらの円も額縁(z-index:1035)より下なので、塗り替わるのは縁の内側だけ */
.bb-mnav-circle {
  position: fixed;
  /* 画面中央に置くため、50%から半径(50px)ぶん戻した位置から始める */
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
}

/* 色の層。開くときは真っ先に、閉じるときは最後に動く */
.bb-mnav-circle--accent {
  z-index: 1033;
  background: var(--bb-gradient);
  transition: transform 0.6s ease 0.25s;
}

/* 白い層。開くときは遅れて、閉じるときは真っ先に動く。
   これが開き切ったあとのメニューの地になる */
.bb-mnav-circle--panel {
  z-index: 1034;
  background: var(--frame-bg);
  transition: transform 0.6s ease 0s;
}

/* 直径100px × 50 ＝ 5000px。縦長の端末でも四隅まで確実に覆える大きさ。
   transition-delay をここで入れ替えることで、開くときだけ色が先行する */
html.is-mnav-open .bb-mnav-circle {
  transform: scale(50);
}

html.is-mnav-open .bb-mnav-circle--accent {
  transition-delay: 0s;
}

html.is-mnav-open .bb-mnav-circle--panel {
  transition-delay: 0.25s;
}

/* 白い層が画面を覆いきってから中身を出す（0.45秒待ってフェードイン）。
   .is-open が外れるとアニメーションごと無くなるので、閉じるときは即座に消える */
.bb-mnav__list,
.bb-mnav__cta,
.bb-mnav__sns {
  opacity: 0;
}

.bb-mnav.is-open .bb-mnav__list,
.bb-mnav.is-open .bb-mnav__cta,
.bb-mnav.is-open .bb-mnav__sns {
  animation: bb-mnav-in 0.8s ease 0.45s both;
}

@keyframes bb-mnav-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 991.98px) {
  .bb-mnav-circle {
    display: block;
  }

  .bb-mnav {
    display: flex;
  }
}

/* メニューを開いている間は背後の本文をスクロールさせない（JSが .is-mnav-open を付ける）。
   ここで overflow が切り替わると、閉じたときにブラウザがスクロール位置を先頭へ
   戻してしまう（ファイル冒頭の overflow-x:clip との出入りが原因）。
   位置の復帰は assets/js/nav.js が行っている。 */
html.is-mnav-open,
html.is-mnav-open body {
  overflow: hidden;
}

/* ヘッダーは position:sticky なので、上の overflow:hidden でページが
   スクロールしなくなると本来の流し込み位置（ページ最上部）へ戻ってしまう。
   下までスクロールした状態でメニューを開くと、×ボタンごと画面外へ消える。
   開いている間だけ fixed にして、その場に留める。
   （about-1 / index は style.css 側で最初から fixed なのでこの指定は不要） */
html.is-mnav-open .bb-header {
  position: fixed;
  top: var(--frame-w);
  left: 0;
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bb-mnav-circle,
  .bb-mnav-toggle,
  .bb-mnav-toggle span {
    transition: none;
  }

  .bb-mnav.is-open .bb-mnav__list,
  .bb-mnav.is-open .bb-mnav__cta,
  .bb-mnav.is-open .bb-mnav__sns {
    animation-delay: 0s;
    animation-duration: 0.01ms;
  }
}

/* ---------- Footer ----------
   参考: yurumaru.life。上端が中央でいちばん低く沈み込み、左右の端ほど
   高く迫り上がる「谷（半円が下向きに凹む）」形の弧を .bb-footer-arc で表現し、
   その下にナビ／巨大ロゴタイプ／連絡先を横3カラムで並べる。
   弧とフッター本体の継ぎ目が見えないよう、どちらも同じ単色
   （グローのグラデーションは付けない）にしている。 */
.bb-footer {
  position: relative;
  overflow: visible;
  background: var(--bb-navy-glow-base);
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0 2rem;
}

/* 谷型の弧：濃紺の四角に、上端中央を起点(at 50% 0%)にした楕円の"穴"をSVGマスクで開ける
   （マスク内は 白＝残す／黒＝穴）。白いドームを重ねる方式だと、その白い板が真上の
   要素の影（.bb-cta-band__card の box-shadow など）まで隠してしまい、弧の上端で影が
   スパッと切れて横一本の線に見える。穴あきなら上の背景がそのまま透けて自然に消える。
   起点を下端にすると谷が上下逆になるので注意。横半径は必ず50%（未満だと端が尖る）。
   浅さは高さ側の半径（ry）のみで調整。 */
.bb-footer-arc {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 140px;
  overflow: hidden;
  background: var(--bb-navy-glow-base);
  pointer-events: none;
  /* 弧の下端（bottom:100%＝フッター本体の上辺）とフッター本体の境界が、
     端末のサブピクセル計算で1px未満ズレると、そこから背景色が透けて
     薄い線に見える（特にモバイル）。色は同じ設計のままにして、弧を
     フッター側へ1pxだけ食い込ませ、隙間そのものを潰す。 */
  transform: translateY(1px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cellipse cx='50' cy='0' rx='50' ry='58' fill='black'/%3E%3C/mask%3E%3Crect width='100' height='100' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cellipse cx='50' cy='0' rx='50' ry='58' fill='black'/%3E%3C/mask%3E%3Crect width='100' height='100' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.bb-footer a {
  color: rgba(255, 255, 255, 0.8);
}

.bb-footer a:hover {
  color: #fff;
}

.bb-footer .container {
  position: relative;
  z-index: 2;
  /* 右側は常時表示の縦ナビ(.bb-side-nav)にすぐ隣接するため、右寄せテキストが
     ナビの罫線にぴったりくっつかないよう少し余分に余白を取る */
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 1.5rem);
}

.bb-footer-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.5rem;
}

.bb-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-weight: 600;
}

.bb-footer-col--contact {
  text-align: right;
}

.bb-footer-address {
  font-size: 0.85rem;
  line-height: 1.9;
  margin-bottom: 1rem;
}

.bb-footer-address a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bb-footer-col--brand {
  text-align: center;
}

.bb-footer-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.4rem;
}

.bb-footer-wordmark {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.bb-copyright {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

@media (max-width: 767.98px) {
  .bb-footer-arc {
    height: 90px;
  }

  .bb-footer-cols {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2rem;
  }

  .bb-footer-col--brand {
    order: -1;
  }

  .bb-footer-col--contact {
    text-align: center;
  }

  .bb-footer-wordmark {
    font-size: clamp(2.4rem, 14vw, 3.5rem);
  }
}

/* ---------- 額縁 ----------
   トップ・about-1・news（style.css 側）にだけあった外枠を、base.css を使う
   about-4 / contact / privacy-policy にも入れて見た目を揃えたもの。
   ページの四辺を地色で覆い、その内側に細い罫線を1本引く。本文は縁の下を流れ、
   四辺で切り取られることでページが一枚の紙のように見える。装飾なので読み上げ対象外。 */
.bb-frame span {
  position: fixed;
  z-index: 1035;
  pointer-events: none;
}

.bb-frame__t,
.bb-frame__b,
.bb-frame__l,
.bb-frame__r {
  background: var(--frame-bg);
}

.bb-frame__t { top: 0; left: 0; right: 0; height: var(--frame-w); }
.bb-frame__b { bottom: 0; left: 0; right: 0; height: var(--frame-w); }
.bb-frame__l { top: 0; bottom: 0; left: 0; width: var(--frame-w); }
.bb-frame__r { top: 0; bottom: 0; right: 0; width: var(--frame-w); }

.bb-frame__rule {
  inset: var(--frame-w);
  border: 1px solid var(--frame-rule);
}