@charset "UTF-8";
/* ⑫ Typography v3 用 Webフォント読込（@import は先頭必須）2026-07-09
   ロールバック: この行と末尾の⑫⑬セクションを削除して inject_global.py 再実行 */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@600;700&family=Cormorant+Garamond:ital,wght@1,500;1,600&display=swap');

/* === BIARABA Global Mobile Fix v3 ==============================
   対象: 全公開ページ + 投稿
   方針: モバイル横はみ出しの安全網 + 軽量な共通改善のみ。
        ページ個別の装飾化は inject_global.py で対象ページにだけ追加注入。
        テーマ未変更、PCに影響しない範囲。
   v3: bi-*/biaraba-* カスタムブロック flex-wrap 修正
       ヒーロー動画 height:auto 例外処理
================================================================ */

/* ============================================================
   ① モバイル：横はみ出しの安全網
   ============================================================ */
@media (max-width: 768px) {
  /* ルートで横スクロール禁止（最後の砦） */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 主要ラッパーも横スクロール禁止 */
  #wrapper, #container, #main, #content-inner {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ヘッダー内のはみ出しを防止（サイトロゴが溢れる事故防止） */
  #header, .l-header, .l-header__inner {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* メディア要素の最大幅 */
  img, video, iframe, svg, embed, object, canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  iframe {
    width: 100% !important;
  }

  /* テーブルは横スクロールで見せる（潰さない） */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* pre / code の横はみ出し防止 */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-break: break-word;
    white-space: pre-wrap;
  }

  /* 長い英単語・URL の途中改行 */
  p, li, h1, h2, h3, h4, h5, h6, dt, dd, blockquote {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* SWELL のフルワイド系：負のマージンを完全無効化 */
  .swell-block-fullWide,
  .alignfull,
  .alignwide,
  [class*="alignfull"],
  [class*="alignwide"] {
    max-width: 100vw !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  /* CF7 の入力要素 */
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="url"],
  .wpcf7-form select,
  .wpcf7-form textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* post_content 内の子要素はみ出し防止 */
  .post_content > *,
  .entry-content > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 投稿ページ：左右の余白確保 */
  .single .post_content,
  .single .entry-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* ============================================================
     サイトロゴをモバイル適切サイズに（PC比率に合わせて縮小）
     SWELL の -series ヘッダー(49px高)にロゴ画像(267×178px)が
     overflow: visible で溢れ出て大きく見える問題を修正。
     max-height: 44px で高さ制御し、幅は比例縮小させる。
     ============================================================ */
  .c-headLogo,
  .c-headLogo__link,
  .l-header__logo,
  .l-header__logo > a {
    max-width: 150px !important;
    overflow: hidden !important;
  }
  .c-headLogo img,
  .c-headLogo__link img,
  .l-header__logo img {
    max-height: 44px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 768px) {
  /* ============================================================
     ② カスタムHTMLブロック（bi-* / biaraba-*）のモバイル修正
     各ページのカスタムコンテンツで使われている flex-nowrap レイアウトを
     390px幅でも折り返しできるよう修正する。
     page 1002: .hero/.prob-grid/.str-list/.str-item
     page 1017: .bi-hero/.bi-prob-list/.bi-steps/.bi-cards/.bi-price-row など
     page 590:  .bi-cards/.bi-price/.bi-list/.bi-fee__row など
     page 586:  .bi-probCards/.bi-steps/.bi-step/.bi-faq など
     page 519:  .bi-cta/.bi-fit/.bi-media/.bi-points__grid/.bi-steps など
     ============================================================ */

  /* コンテナ：折り返し許可 */
  [class^="bi-"], [class*=" bi-"],
  .biaraba-grid, .biaraba-actions,
  .hero, .prob-grid, .str-list, .str-item {
    flex-wrap: wrap !important;
  }

  /* 直接の子要素：コンテナ幅を超えない + shrink 許可 */
  [class^="bi-"] > *, [class*=" bi-"] > *,
  .biaraba-grid > *, .biaraba-actions > *,
  .hero > *, .prob-grid > *, .str-list > *, .str-item > * {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
  }

  /* 例外: マーキーティッカーは1行で流す（折り返すと壁になる）
     ※ 上の折り返し許可・shrink許可より後に書いて勝たせること */
  .bi-marquee__track {
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
  }
  .bi-marquee__track > * {
    max-width: none !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
  }

  /* p-postList の負のマージンによる横はみ出し防止 */
  .p-postList {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ============================================================
     ③ ヒーロー動画：height:auto!important の例外処理
     グローバルの video{height:auto!important} によって
     ヒーロー動画が16:9(292px)に縮みグレーエリアが生じる問題を解消。
     position:absolute + height:100% でコンテナ全体を満たす。
     ============================================================ */
  .p-mainVisual .p-mainVisual__video,
  .p-mainVisual video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
  }

  .p-mainVisual {
    overflow: hidden !important;
  }
}

/* ============================================================
   ④ 軽量な共通改善（PCにも適用可）
   ============================================================ */
/* 画像読み込み時のフェードを少しだけ */
.entry-content img,
.post_content img {
  transition: transform 0.6s ease, opacity 0.4s ease;
}

/* ============================================================
   ⑤ v4 ブラッシュアップ（2026-06-07）
   方針: ブランド統一感UP + アーカイブ/投稿の視認性UP
         LPカスタムスコープ(bi-*)には影響させない
   ============================================================ */

/* --- Webfont: Noto Sans JP（重要見出し向けにシャープな日本語） --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* SWELL標準のページタイトル・見出しに上品な日本語フォントを適用
   bi-* スコープは触らない（既存LPデザイン優先） */
body:not(:has(.bi-storemgmt)):not(:has(.bi-hero)) .c-pageTitle,
body:not(:has(.bi-storemgmt)):not(:has(.bi-hero)) .c-archiveHeader__title,
body:not(:has(.bi-storemgmt)):not(:has(.bi-hero)) .post_content h2,
body:not(:has(.bi-storemgmt)):not(:has(.bi-hero)) .post_content h3,
body:not(:has(.bi-storemgmt)):not(:has(.bi-hero)) .entry-content h2,
body:not(:has(.bi-storemgmt)):not(:has(.bi-hero)) .entry-content h3 {
  font-family: 'Noto Sans JP', '游ゴシック体', YuGothic, 'Yu Gothic', sans-serif !important;
  letter-spacing: 0.04em;
}

/* --- アーカイブ（よみもの・カテゴリページ）のカード視覚UP --- */
.p-postList__item,
.p-postList__link {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.p-postList__item:hover {
  transform: translateY(-4px);
}
.p-postList__item:hover .c-postThumb__figure,
.p-postList__item:hover .c-postThumb {
  box-shadow: 0 14px 36px rgba(201, 168, 76, 0.18), 0 0 0 1px rgba(201, 168, 76, 0.25);
}
.c-postThumb__figure,
.c-postThumb {
  overflow: hidden;
  border-radius: 6px;
  transition: box-shadow 0.35s ease;
}
.c-postThumb__img {
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) !important;
}
.p-postList__item:hover .c-postThumb__img {
  transform: scale(1.04) !important;
}

/* 記事タイトルのホバーで上品にゴールド寄り */
.p-postList__title a,
.p-postList__item a {
  transition: color 0.25s ease;
}
.p-postList__item:hover .p-postList__title {
  color: #C9A84C !important;
}

/* カテゴリラベルの可読性UP（黒背景に黒文字事故防止） */
.c-postThumb__cat {
  background: rgba(8, 8, 8, 0.7) !important;
  border: 1px solid rgba(201, 168, 76, 0.4) !important;
  color: #E8C97A !important;
  letter-spacing: 0.06em;
  font-size: 11px !important;
}

/* --- 記事本文の読みやすさ強化 --- */
.post_content p,
.entry-content p {
  line-height: 2.0;
  letter-spacing: 0.02em;
}
.post_content h2,
.entry-content h2 {
  margin-top: 2.2em;
  border-left: 4px solid #C9A84C;
  padding-left: 0.7em;
  line-height: 1.5;
}
.post_content h3,
.entry-content h3 {
  margin-top: 1.8em;
  border-bottom: 1px dashed rgba(201, 168, 76, 0.45);
  padding-bottom: 0.3em;
}
.post_content blockquote,
.entry-content blockquote {
  border-left: 3px solid #C9A84C;
  background: rgba(201, 168, 76, 0.06);
  padding: 1em 1.2em;
  margin: 1.6em 0;
  border-radius: 0 4px 4px 0;
}

/* --- リンクのデフォルト色を統一（ゴールド系） --- */
.post_content a:not(.btn):not([class*="bi-"]),
.entry-content a:not(.btn):not([class*="bi-"]) {
  color: #C9A84C;
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.post_content a:not(.btn):not([class*="bi-"]):hover,
.entry-content a:not(.btn):not([class*="bi-"]):hover {
  color: #E8C97A;
  text-decoration-color: #E8C97A;
}

/* --- パンくず・タブの上品化 --- */
.c-breadcrumbs,
.p-breadcrumbs {
  font-size: 12px !important;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* --- カテゴリ/タブ切り替えボタンの視認性 --- */
.c-tabList__item,
.swell-tab-label {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.c-tabList__item:hover {
  border-color: rgba(201, 168, 76, 0.6) !important;
}

/* --- ページ全体の文章スクロールをやわらかく --- */
html {
  scroll-behavior: smooth;
}

/* --- 選択時のハイライトをブランドゴールドに --- */
::selection {
  background: rgba(201, 168, 76, 0.35);
  color: #fff;
}

/* --- フッターの間隔調整 --- */
.l-footer,
footer.l-footer {
  letter-spacing: 0.04em;
}

/* --- 関連記事・記事下のサムネにも同じホバー --- */
.c-relatedPosts .c-postThumb,
.p-postListMin__item .c-postThumb {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.c-relatedPosts .c-postThumb:hover,
.p-postListMin__item:hover .c-postThumb {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(201, 168, 76, 0.15);
}

/* --- グローバルナビのアクティブ下線アクセント --- */
.l-header .c-gnav__item.current-menu-item > a,
.l-header .c-gnav__item.current_page_item > a {
  position: relative;
}

/* --- モバイルではホバー効果を抑える（タップ後に貼り付く誤動作防止） --- */
@media (hover: none) {
  .p-postList__item:hover {
    transform: none;
  }
  .p-postList__item:hover .c-postThumb__img {
    transform: none !important;
  }
}

/* ============================================================
   ⑥ カスタムカーソル対策（2026-07-07 縮小）
   注入元（WP Headers And Footers のフッターコード）を根本削除済み。
   万一キャッシュ等で残った場合の保険として最小限だけ残す。
   ============================================================ */
html body #bi-cursor,
html body #bi-cursor-ring {
  display: none !important;
}

/* ============================================================
   ⑦ Polish v1（2026-06-28）
   方針: 全LPのヒーロー暗転を緩める／ゴールド斜線を控えめに／
         CTAボタンのホバーを統一／ヒーロー写真を活かす。
   対象: bi-rental / bi-rpo / bi-open / bi-storemgmt /
         bi-machigashi / bi-cm / bi-home
   ============================================================ */

/* ── ヒーローの黒オーバーレイを最大55%に緩める ─────────────── */
.bi-rental .bi-hero__overlay,
.bi-rpo .bi-hero__overlay,
.bi-open .bi-hero__overlay,
.bi-storemgmt .bi-hero__overlay,
.bi-machigashi .bi-hero__overlay,
.bi-cm .bi-cm-hero__overlay,
.bi-home .bi-hero__overlay {
  background:
    radial-gradient(1200px 600px at 50% 12%, rgba(255,255,255,.10) 0%, transparent 55%),
    linear-gradient(180deg,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.50) 55%,
      rgba(0,0,0,.62) 100%) !important;
}

/* ── ヒーロー上の装飾斜線を1枚に減らし、目立たなく ─────────── */
.bi-rental .bi-hero__lines,
.bi-rpo .bi-hero__lines,
.bi-open .bi-hero__lines,
.bi-storemgmt .bi-hero__lines,
.bi-machigashi .bi-hero__lines,
.bi-home .bi-hero__lines {
  opacity: .30 !important;
  mix-blend-mode: screen;
}

/* ── ヒーロー画像は少し拡大とパンライトを抑え、SP/PCで自然に ── */
.bi-rental .bi-hero__bg,
.bi-rpo .bi-hero__bg,
.bi-open .bi-hero__bg,
.bi-storemgmt .bi-hero__bg,
.bi-machigashi .bi-hero__bg,
.bi-home .bi-hero__bg {
  transform: scale(1.02) !important;
  filter: saturate(.92) contrast(1.02);
}

/* ── ヒーローのテキスト影を統一（読みやすさ確保） ─────────── */
.bi-rental .bi-hero__title,
.bi-rpo .bi-hero__title,
.bi-open .bi-hero__title,
.bi-storemgmt .bi-hero h1,
.bi-machigashi .bi-hero__title,
.bi-cm .bi-cm-hero__title,
.bi-home .bi-hero__title {
  text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 18px 38px rgba(0,0,0,.45) !important;
}

/* ── CTAボタン: 共通ホバーで上品に浮かせる ─────────────────── */
.bi-cta__btn,
.bi-cm-btn,
.bi-storemgmt .btn-g,
.bi-storemgmt .btn-o,
.bi-svc__btn {
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
  will-change: transform;
}
.bi-cta__btn:hover,
.bi-cm-btn:hover,
.bi-storemgmt .btn-g:hover,
.bi-storemgmt .btn-o:hover,
.bi-svc__btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 50px rgba(202,161,90,.28),
    0 8px 18px rgba(0,0,0,.55) !important;
  border-color: rgba(226,194,122,.95) !important;
}

/* ── カードのゴールド斜線パターンを控えめに（ノイズ感を減らす） ── */
.bi-rental .bi-card,
.bi-rental .bi-plan,
.bi-rpo .bi-card,
.bi-rpo .bi-plan,
.bi-open .bi-card,
.bi-machigashi .bi-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)) !important;
  border-color: rgba(202,161,90,.22) !important;
}

/* ── タグchipの境界線も同じトーンに揃える ─────────────────── */
.bi-rental .bi-tag,
.bi-rpo .bi-tag,
.bi-open .bi-tag,
.bi-machigashi .bi-tag {
  border-color: rgba(202,161,90,.30) !important;
}

/* ── 価格・%・数値のハイライトカラーを統一 ────────────────── */
.bi-rental .bi-plan__rate,
.bi-rpo .bi-plan__rate,
.bi-open .bi-plan__rate,
.bi-machigashi .bi-plan__rate {
  color: #e2c27a !important;
}

/* ── store-support: ヒーローh1の<em>を斜体解除＋アクセント色化 ─ */
.bi-storemgmt .hero-h1 em,
.bi-storemgmt h1 em {
  font-style: normal !important;
  color: #e2c27a !important;
  letter-spacing: inherit;
}

/* ── chef-matching: タイトル内ハイライト<span class="g">を統一色に ─ */
.bi-cm .bi-cm-hero__title .g,
.bi-cm h1 .g,
.bi-cm h2 .g {
  color: #e2c27a !important;
  font-style: normal !important;
}

/* ── 共通: 各セクションのpadding微調整（息継ぎ確保） ───────── */
.bi-rental .bi-sec,
.bi-rpo .bi-sec,
.bi-open .bi-sec,
.bi-machigashi .bi-sec {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
@media (max-width: 768px) {
  .bi-rental .bi-sec,
  .bi-rpo .bi-sec,
  .bi-open .bi-sec,
  .bi-machigashi .bi-sec {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ── CTAボタンの「→」矢印を末尾に追加（テキストに直書きされていないものだけ） ── */
.bi-cta__btn:not([data-no-arrow])::after,
.bi-cm-btn--primary:not([data-no-arrow])::after,
.bi-cm-store__cta:not([data-no-arrow])::after {
  content: " →";
  font-weight: 800;
  margin-left: 4px;
  display: inline-block;
  transition: transform .2s ease;
}
.bi-cta__btn:hover::after,
.bi-cm-btn--primary:hover::after,
.bi-cm-store__cta:hover::after {
  transform: translateX(3px);
}

/* ── 共通：ボタン押下時の触覚 ─────────────────────────────── */
.bi-cta__btn:active,
.bi-cm-btn:active,
.bi-storemgmt .btn-g:active,
.bi-storemgmt .btn-o:active,
.bi-svc__btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.5) !important;
}

/* ── store-support: 領域カード見出し(h4化) ────────────────── */
.bi-storemgmt .bi-area-ttl {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #f5f0e8 !important;
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(202,161,90,.30) !important;
  border-left: 0 !important;
  line-height: 1.45 !important;
  letter-spacing: .02em;
}

/* ── store-support: 悩みカード本文div(prob-ttl)も読みやすく ─ */
.bi-storemgmt .prob-ttl {
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  color: #f5f0e8 !important;
  margin: 0 0 8px !important;
  letter-spacing: .01em;
}

/* ── store-support: セクションのキャッチ「仕組みは…」 ─────── */
.bi-storemgmt .bi-sec__catch {
  text-align: center;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  color: #e2c27a;
  letter-spacing: .04em;
  margin: 24px 0 32px;
  padding: 20px;
  border-top: 1px solid rgba(202,161,90,.25);
  border-bottom: 1px solid rgba(202,161,90,.25);
}

/* ============================================================
   ⑧ 事業内容ページ(486) Polish — biaraba-* 命名向け
   ============================================================ */

/* ヒーロー動画オーバーレイを緩める（bi-* と同基準） */
.biaraba-fv::before {
  background:
    radial-gradient(1200px 600px at 50% 12%, rgba(255,255,255,.10) 0%, transparent 55%),
    linear-gradient(180deg,
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,.50) 55%,
      rgba(0,0,0,.62) 100%) !important;
}

/* 装飾斜線を控えめに */
.biaraba-fv__lines { opacity: .30 !important; }
.biaraba-fv__lines::before { opacity: .80 !important; }
.biaraba-fv__lines::after  { opacity: .40 !important; }

/* ヒーロー動画の発色を統一 */
.biaraba-fv__bg video,
.biaraba-fv__video {
  filter: saturate(.92) contrast(1.02) brightness(.85) !important;
}

/* タイトル影を bi-* と統一 */
.biaraba-fv__title {
  text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 18px 38px rgba(0,0,0,.45) !important;
}

/* サービスカードのゴールド斜線パターン削除＋ホバー統一 */
.biaraba-card {
  border: 1px solid rgba(202,161,90,.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18)) !important;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.biaraba-card:hover {
  transform: translateY(-3px);
  border-color: rgba(226,194,122,.85) !important;
  box-shadow: 0 22px 50px rgba(202,161,90,.18), 0 8px 18px rgba(0,0,0,.45) !important;
}
.biaraba-card__icon {
  background: rgba(202,161,90,.10) !important;
  border: 1px solid rgba(202,161,90,.30) !important;
}
.biaraba-card__arrow {
  color: #e2c27a !important;
  transition: transform .2s ease;
}
.biaraba-card:hover .biaraba-card__arrow {
  transform: translateX(3px);
}

/* お問い合わせセクションの統一感（ゴールド枠線を控えめ） */
.biaraba-contact {
  border-top: 1px solid rgba(202,161,90,.25);
}
.biaraba-contact__tel {
  color: #e2c27a !important;
}

/* ============================================================
   ⑨ 統一フッターCTAバナー（全LP共通）
   方針: 全LPの最下部に「次の一歩は、30分の相談で見えてきます。」
         を全幅で挿入。ブランド一貫性と着地率の底上げを狙う。
   ============================================================ */
.bi-footer-cta {
  position: relative;
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 80px;
  padding: 76px 24px 80px;
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(202,161,90,.22), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #050505 100%);
  border-top: 1px solid rgba(202,161,90,.30);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.bi-footer-cta::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    linear-gradient(125deg, transparent 0 52%, rgba(202,161,90,.12) 53%, rgba(202,161,90,.04) 56%, transparent 57%),
    linear-gradient(125deg, transparent 0 72%, rgba(202,161,90,.08) 73%, rgba(202,161,90,.02) 76%, transparent 77%);
  opacity: .65;
  pointer-events: none;
  z-index: -1;
}
.bi-footer-cta__inner {
  width: min(740px, calc(100% - 32px));
  margin: 0 auto;
}
.bi-footer-cta__kicker {
  font-size: 12px;
  letter-spacing: .26em;
  color: #e2c27a;
  font-weight: 800;
  margin: 0 0 16px;
  text-transform: uppercase;
}
.bi-footer-cta__title {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.55;
  font-weight: 900;
  color: #fff !important;
  margin: 0 0 20px;
  letter-spacing: .02em;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.bi-footer-cta__lead {
  color: rgba(255,255,255,.78);
  line-height: 1.95;
  font-size: 15px;
  margin: 0 0 32px;
}
.bi-footer-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  border-radius: 999px;
  border: 1.5px solid rgba(226,194,122,.7);
  background: linear-gradient(180deg, rgba(202,161,90,.28), rgba(202,161,90,.10));
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 15.5px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.bi-footer-cta__btn::after {
  content: " →";
  margin-left: 8px;
  display: inline-block;
  font-weight: 900;
  transition: transform .2s ease;
}
.bi-footer-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 56px rgba(202,161,90,.30),
    0 8px 18px rgba(0,0,0,.55);
  border-color: rgba(226,194,122,.95);
}
.bi-footer-cta__btn:hover::after { transform: translateX(4px); }
.bi-footer-cta__btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.bi-footer-cta__note {
  margin: 22px 0 0;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  letter-spacing: .10em;
}
.bi-footer-cta__divider {
  display: block;
  width: 56px;
  height: 1px;
  background: rgba(202,161,90,.5);
  margin: 0 auto 22px;
}
@media (max-width: 520px) {
  .bi-footer-cta { padding: 56px 18px 64px; margin-top: 56px; }
  .bi-footer-cta__title { font-size: clamp(20px, 6.2vw, 26px); line-height: 1.5; }
  .bi-footer-cta__lead { font-size: 14px; line-height: 1.9; }
  .bi-footer-cta__btn { padding: 14px 28px; font-size: 14.5px; }
}

/* SWELL投稿エリアにフッターCTAが入っても色が壊れないように */
.post_content .bi-footer-cta a {
  color: #fff !important;
}
.post_content .bi-footer-cta h2.bi-footer-cta__title {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  margin: 0 0 20px !important;
}

/* ── SP: ヒーロー見出しのフォントサイズを下げて単語の泣き別れ防止 ─ */
@media (max-width: 520px) {
  .bi-rental .bi-hero__title,
  .bi-rpo .bi-hero__title,
  .bi-open .bi-hero__title,
  .bi-machigashi .bi-hero__title,
  .bi-cm .bi-cm-hero__title,
  .bi-home .bi-hero__title,
  .bi-storemgmt .hero-h1 {
    font-size: clamp(22px, 6.4vw, 28px) !important;
    line-height: 1.42 !important;
    letter-spacing: .01em !important;
  }
  .bi-rental .bi-hero__lead,
  .bi-rpo .bi-hero__lead,
  .bi-open .bi-hero__lead,
  .bi-machigashi .bi-hero__lead,
  .bi-cm .bi-cm-hero__lead {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
  .bi-rental .bi-hero__kicker,
  .bi-rpo .bi-hero__kicker,
  .bi-open .bi-hero__kicker,
  .bi-machigashi .bi-hero__kicker {
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }
}

/* ============================================================
   ⑩ Motion v2（2026-07-07）
   方針: 「AIっぽい」装飾（粒・波・絵文字・派手な模様）を排し、
   ハイエンドなブランドサイト定番の控えめなモーションに統一する。
   - IntersectionObserver ベースのスクロールリビール（全ブラウザ対応）
   - JS が動く環境でのみ発火（html.bi-motion ガード。無JSでも全表示）
   - prefers-reduced-motion は JS 側で respect（クラス付与しない）
   ============================================================ */

/* ── スクロールリビール基礎 ─────────────────────────────── */
html.bi-motion .bi-io {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bi-d, 0s);
  will-change: opacity, transform;
}
html.bi-motion .bi-io.is-in {
  opacity: 1;
  transform: none;
}

/* 見出しは移動距離を短く（上品に） */
html.bi-motion h2.bi-io,
html.bi-motion h3.bi-io {
  transform: translateY(16px);
}

/* 画像・カードはわずかなスケールセトルを付与 */
html.bi-motion figure.bi-io,
html.bi-motion .wp-block-image.bi-io,
html.bi-motion .bi-svc.bi-io,
html.bi-motion .bi-card.bi-io,
html.bi-motion .bi-plan.bi-io,
html.bi-motion .biaraba-card.bi-io {
  transform: translateY(26px) scale(0.98);
}
html.bi-motion figure.bi-io.is-in,
html.bi-motion .wp-block-image.bi-io.is-in,
html.bi-motion .bi-svc.bi-io.is-in,
html.bi-motion .bi-card.bi-io.is-in,
html.bi-motion .bi-plan.bi-io.is-in,
html.bi-motion .biaraba-card.bi-io.is-in {
  transform: none;
}

/* ── お問い合わせフォームのストライプ模様を撤去（フラット化） ── */
.biaraba-form__stripe {
  display: none !important;
}
.biaraba-card::before {
  background: none !important;
}

/* ── アンカーへのスムーススクロール ─────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── アクセシビリティ ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.bi-motion .bi-io {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   ⑪ 固定「無料相談」バナー（2026-07-08）
   K.INNOVATION の固定 Recruit バナーを参考に、黒×金のトンマナで。
   出現/退避の制御は bi-motion-v2.js（スクロール量・CTA近接）。
   ============================================================ */
.bi-consult-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  display: block;
  width: min(238px, calc(100vw - 36px));
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid rgba(202, 161, 90, 0.5);
  border-radius: 4px;
  padding: 16px 18px 14px;
  text-decoration: none !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}
/* 追加CSS（カスタマイザー）の `body * { background-color: transparent !important }` に背景色を消され、
   ぼかしだけが残って下のセクションの色が透けていた（2026-10-21 オーナー指摘：アイボリーの面で白文字が読めない）。
   詳細度を上げた !important で背景を戻す */
html body .bi-consult-fab {
  background-color: rgba(12, 12, 12, 0.94) !important;
}
.bi-consult-fab.is-show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bi-consult-fab:hover {
  box-shadow: 0 18px 48px rgba(202, 161, 90, 0.28);
}
.bi-consult-fab__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(226, 194, 122, 0.65);
  padding-bottom: 10px;
}
.bi-consult-fab__title {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.2;
}
.bi-consult-fab__arrow {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(226, 194, 122, 0.85);
  color: #e2c27a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.bi-consult-fab:hover .bi-consult-fab__arrow {
  transform: translateX(4px);
  background: rgba(202, 161, 90, 0.16);
}
.bi-consult-fab__sub {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  margin-top: 9px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .bi-consult-fab {
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 11px 14px 10px;
  }
  .bi-consult-fab__title { font-size: 15px; }
  .bi-consult-fab__arrow { width: 24px; height: 24px; font-size: 12px; }
  .bi-consult-fab__sub { font-size: 10px; margin-top: 7px; }
  .bi-consult-fab__row { padding-bottom: 7px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bi-consult-fab { transition: none; }
}


/* ============================================================
   ⑫ Typography v3（2026-07-09）
   見出し=明朝（Shippori Mincho B1）、英字キッカー=Cormorant Italic。
   対象はデザイン済みランディング面のみ（記事本文・SWELL標準見出しは対象外）。
   ロールバック: 先頭の @import とこの⑫・⑬を削除して inject_global.py 再実行。
   ============================================================ */

/* ── 見出しの明朝化 ── */
.bi-home .bi-hero__title,
.bi-home .bi-h2,
.bi-rental .bi-hero__title,
.bi-rpo .bi-hero__title,
.bi-open .bi-hero__title,
.bi-machigashi .bi-hero__title,
.bi-storemgmt .hero-h1,
.bi-cm .bi-cm-hero__title,
.bi-cm .bi-cm-h2,
.bi-footer-cta__title {
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
}
.bi-home .bi-hero__title,
.bi-rental .bi-hero__title,
.bi-rpo .bi-hero__title,
.bi-open .bi-hero__title,
.bi-machigashi .bi-hero__title,
.bi-cm .bi-cm-hero__title {
  line-height: 1.32 !important;
}
/* 小さめ見出しはウェイト700で視認性担保 */
.bi-home .bi-svc__title,
.bi-home .bi-contact__h3 {
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}

/* ── SWELLメインビジュアル見出しも明朝に統一（2026-07-18追加） ──
   トップ最上部の p-mainVisual__slideTitle だけがゴシックで、
   直下の .bi-hero__title 以降の明朝トーンから浮いていたため統一。
   ロールバック: この1ブロックを削除して inject_global.py 再実行。 */
.p-mainVisual__slideTitle {
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  line-height: 1.5 !important;
}

/* ── 英字キッカーをセリフイタリックに ── */
.bi-home .bi-eyebrow,
.bi-hero__kicker,
.bi-cm-kicker {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  letter-spacing: .3em !important;
  color: rgba(214, 180, 106, .9) !important;
}

/* ── 句読点ぶら下がり対策 ── */
/* SP専用改行: HTML側に <br class="bi-br-sp"> を置いて使う */
.bi-br-sp { display: none; }
@media (max-width: 560px) {
  .bi-br-sp { display: inline; }
}
/* 段落末の孤立行を減らす（対応ブラウザのみ・他は無視） */
.bi-home p, .bi-home li,
.bi-rental p, .bi-rpo p, .bi-open p,
.bi-machigashi p, .bi-cm p, .bi-storemgmt p {
  text-wrap: pretty;
}
.bi-home .bi-h2,
.bi-cm .bi-cm-h2 {
  text-wrap: balance;
}

/* ── テキスト選択色（ブランドの金） ── */
::selection { background: rgba(202, 161, 90, .9); color: #0b0b0b; }

/* ============================================================
   ⑬ Micro-interactions v3（2026-07-09）
   - スクロール進捗ヘアライン（bi-motion-v2.js ③ が #bi-progress を生成）
   - トップ見出し下ヘアラインの描画アニメーション
   - CTAボタンの金シャインスイープ
   ============================================================ */

/* ── スクロール進捗ヘアライン ── */
#bi-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 99999;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(202,161,90,0), rgba(202,161,90,.95) 30%, #e2c27a);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ── トップ見出しヘアラインの描画（既存 .bi-h2::after を利用） ── */
html.bi-motion .bi-home h2.bi-io::after {
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
html.bi-motion .bi-home h2.bi-io.is-in::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── CTA 金シャインスイープ（hover時に光が走る） ── */
.bi-cta__btn,
.bi-footer-cta__btn,
.bi-svc__btn,
.bi-cm-btn--primary {
  position: relative;
  overflow: hidden;
}
.bi-cta__btn::before,
.bi-footer-cta__btn::before,
.bi-svc__btn::before,
.bi-cm-btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 200, .22), transparent);
  transform: skewX(-18deg) translateX(0);
  pointer-events: none;
}
.bi-cta__btn:hover::before,
.bi-footer-cta__btn:hover::before,
.bi-svc__btn:hover::before,
.bi-cm-btn--primary:hover::before {
  transition: transform .85s cubic-bezier(0.22, 1, 0.36, 1);
  transform: skewX(-18deg) translateX(380%);
}

@media (prefers-reduced-motion: reduce) {
  #bi-progress { display: none; }
  .bi-cta__btn::before,
  .bi-footer-cta__btn::before,
  .bi-svc__btn::before,
  .bi-cm-btn--primary::before { display: none; }
  html.bi-motion .bi-home h2.bi-io::after {
    transform: translateX(-50%) scaleX(1) !important;
    transition: none !important;
  }
}

/* ── 相談ピル: モバイル安全網(①)の除外＋日本語折返し調整 ──
   ①の flex-wrap:wrap !important が金ドットと本文を泣き別れさせるため、
   必ず①より後方（ここ）に記述する */
.bi-consult__pill {
  flex-wrap: nowrap !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* ============================================================
   ⑭ グローバルFAQコンポーネント（bi-faqg）2026-07-13
   AIO: 主要LP＋トップの「よくある質問」共通スタイル。
   FAQPage JSON-LD（inject_schema.py）と対で運用する。
   背景色に依存しない中立配色（ライト/ダークどちらでも成立）。
   ロールバック: この⑭を削除して inject_global.py 再実行＋
   各ページの <section class="bi-faqg-sec"> を除去（add_faq_sections.py 参照）
   ※①の flex-wrap 安全網より必ず後方に置く（.bi-faqg__q は nowrap 必須） */
/* footer-cta と同じ全幅パターン: 幅0/狭小コンテナ（519等のフルブリードLP）でも成立させる */
.bi-faqg-sec {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
}
.bi-faqg { max-width: 860px; margin: 0 auto; padding: 72px 20px; }
/* 記事見出し用の高詳細度ルール（①: body:not(...)... .post_content h2 等）に
   確実に勝つため body + 3クラスで同点以上を確保（⑭が後方にあるので後勝ち） */
body .bi-faqg-sec .bi-faqg .bi-faqg__kicker {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important; font-weight: 600 !important;
  font-size: 15px !important; letter-spacing: .22em !important;
  color: #C9A84C !important; text-align: center !important; margin: 0 0 10px !important;
}
body .bi-faqg-sec .bi-faqg h2.bi-faqg__title {
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif !important;
  font-weight: 700 !important; font-size: clamp(22px, 3.4vw, 30px) !important;
  line-height: 1.4 !important; letter-spacing: .04em !important;
  text-align: center !important; margin: 0 !important;
  border: none !important; padding: 0 !important; background: none !important;
}
.bi-faqg__title::after {
  content: ""; display: block; width: 44px; height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(202,161,90,0), rgba(202,161,90,.95) 30%, #e2c27a);
}
.bi-faqg__list { margin: 30px 0 0; display: grid; gap: 12px; }
.bi-faqg__item {
  border: 1px solid rgba(148, 128, 80, .35);
  border-radius: 12px;
  background: rgba(148, 128, 80, .06);
  overflow: hidden;
  transition: border-color .25s ease;
}
.bi-faqg__item[open] { border-color: rgba(201, 168, 76, .75); }
.bi-faqg__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: nowrap !important;
  padding: 16px 46px 16px 18px;
  font-weight: 700; font-size: 15.5px; line-height: 1.7;
  position: relative;
}
.bi-faqg__q::-webkit-details-marker { display: none; }
.bi-faqg__q::before {
  content: "Q";
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 600; font-size: 19px;
  color: #C9A84C; flex: 0 0 auto; line-height: 1;
  transform: translateY(1px);
}
.bi-faqg__q::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid #C9A84C; border-bottom: 1.5px solid #C9A84C;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
.bi-faqg__item[open] .bi-faqg__q::after {
  transform: translateY(-30%) rotate(-135deg);
}
.bi-faqg__qt {
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
  min-width: 0;
}
.bi-faqg__a {
  padding: 0 18px 18px 46px;
  font-size: 14.5px; line-height: 1.95;
  opacity: .92;
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict;
}
@media (max-width: 560px) {
  .bi-faqg { padding: 56px 16px; }
  .bi-faqg__q { font-size: 14.5px; padding-right: 40px; }
  .bi-faqg__a { padding-left: 18px; }
}

/* ============================================================
   ⑮ サービス要点ガイド（bi-guide）2026-09-23
   SEO/AIO: 各サービスLPに「定義の即答・要点表・比較表・流れ・関連コラム」を追加。
   AIが抜き出しやすい構造（定義文→表→手順）で、検索語（大阪・相場・費用・
   〇〇とは・違い）をページ本文に持たせるためのコンポーネント。
   ⑭（bi-faqg）と同じ中立配色＋全幅パターン。挿入は add_service_guides.py。
   日本語の折返しは keep-all を使わない（keep-all＋anywhere は句読点が行頭に落ちる）。
   ロールバック: この⑮を削除して inject_global.py 再実行＋
   add_service_guides.py --remove を実行 */
.bi-guide-sec {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
}
.bi-guide { max-width: 920px; margin: 0 auto; padding: 72px 20px 24px; }
body .bi-guide-sec .bi-guide .bi-guide__kicker {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important; font-weight: 600 !important;
  font-size: 15px !important; letter-spacing: .22em !important;
  color: #C9A84C !important; text-align: center !important; margin: 0 0 10px !important;
}
body .bi-guide-sec .bi-guide h2.bi-guide__title {
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif !important;
  font-weight: 700 !important; font-size: clamp(22px, 3.4vw, 30px) !important;
  line-height: 1.45 !important; letter-spacing: .04em !important;
  text-align: center !important; margin: 0 !important;
  border: none !important; padding: 0 !important; background: none !important;
  word-break: normal; line-break: strict; overflow-wrap: break-word;
}
.bi-guide__title::after {
  content: ""; display: block; width: 44px; height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, rgba(202,161,90,0), rgba(202,161,90,.95) 30%, #e2c27a);
}
body .bi-guide-sec .bi-guide h3.bi-guide__h {
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif !important;
  font-weight: 700 !important; font-size: 18px !important; line-height: 1.5 !important;
  letter-spacing: .03em !important; text-align: left !important;
  margin: 40px 0 14px !important; padding: 0 0 0 14px !important;
  border: none !important; border-left: 3px solid #C9A84C !important;
  background: none !important;
}
body .bi-guide-sec .bi-guide h3.bi-guide__h::before,
body .bi-guide-sec .bi-guide h3.bi-guide__h::after { display: none !important; }
/* 定義の即答（AIOで最も引用されやすい段落） */
.bi-guide__answer {
  margin: 30px 0 0;
  padding: 22px 24px;
  border: 1px solid rgba(201, 168, 76, .55);
  border-radius: 12px;
  background: rgba(148, 128, 80, .07);
  font-size: 15.5px; line-height: 2;
  word-break: normal; line-break: strict; overflow-wrap: break-word;
}
.bi-guide__answer strong { color: inherit; background: linear-gradient(transparent 62%, rgba(201,168,76,.28) 62%); }
/* 要点表（dl） */
.bi-guide__facts {
  margin: 0; display: grid; grid-template-columns: 9.5em 1fr;
  border-top: 1px solid rgba(148, 128, 80, .35);
}
.bi-guide__facts dt, .bi-guide__facts dd {
  margin: 0; padding: 13px 12px;
  border-bottom: 1px solid rgba(148, 128, 80, .35);
  font-size: 14.5px; line-height: 1.85;
  word-break: normal; line-break: strict; overflow-wrap: break-word;
}
.bi-guide__facts dt { font-weight: 700; background: rgba(148, 128, 80, .07); }
/* 比較表：スマホでは横スクロール */
.bi-guide__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(148, 128, 80, .35); border-radius: 12px;
}
/* ①のモバイル安全網（[class*=" bi-"] > * に min-width:0 / max-width:100% を !important）
   が表を画面幅に押し潰すため、詳細度を上げて最小幅を確保し、枠内で横スクロールさせる */
body .bi-guide-sec .bi-guide table.bi-guide__table {
  width: 100% !important; min-width: 620px !important; max-width: none !important; margin: 0 !important;
  border-collapse: collapse !important; border: none !important;
  background: transparent !important; font-size: 14px !important; line-height: 1.75 !important;
}
body .bi-guide-sec .bi-guide .bi-guide__table th,
body .bi-guide-sec .bi-guide .bi-guide__table td {
  padding: 12px 14px !important; text-align: left !important; vertical-align: top !important;
  border: none !important; border-bottom: 1px solid rgba(148, 128, 80, .28) !important;
  background: transparent !important; color: inherit !important;
  word-break: normal; line-break: strict; overflow-wrap: break-word;
}
body .bi-guide-sec .bi-guide .bi-guide__table thead th {
  font-weight: 700 !important; font-size: 13.5px !important;
  background: rgba(148, 128, 80, .10) !important;
}
body .bi-guide-sec .bi-guide .bi-guide__table tbody th {
  font-weight: 700 !important; white-space: nowrap; width: 7.5em;
}
body .bi-guide-sec .bi-guide .bi-guide__table .is-us {
  background: rgba(201, 168, 76, .12) !important;
}
body .bi-guide-sec .bi-guide .bi-guide__table thead th.is-us { color: #C9A84C !important; }
.bi-guide__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.8; opacity: .75; }
/* 流れ */
body .bi-guide-sec .bi-guide ol.bi-guide__steps,
body .bi-guide-sec .bi-guide ul.bi-guide__links { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.bi-guide__steps { counter-reset: bi-guide-step; display: grid; gap: 10px; }
/* SWELL の .post_content ol/ul li の番号・ドット装飾を打ち消す */
body .bi-guide-sec .bi-guide .bi-guide__links li::before { display: none !important; content: none !important; }
body .bi-guide-sec .bi-guide .bi-guide__steps li,
body .bi-guide-sec .bi-guide .bi-guide__links li { list-style: none !important; }
body .bi-guide-sec .bi-guide .bi-guide__steps li {
  counter-increment: bi-guide-step;
  position: relative; margin: 0; padding: 12px 14px 12px 52px;
  border: 1px solid rgba(148, 128, 80, .30); border-radius: 10px;
  font-size: 14.5px; line-height: 1.8;
  word-break: normal; line-break: strict; overflow-wrap: break-word;
}
body .bi-guide-sec .bi-guide .bi-guide__steps li::before {
  content: counter(bi-guide-step) !important;
  position: absolute; left: 14px; top: 11px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 15px;
  color: #C9A84C; border: 1px solid rgba(201, 168, 76, .75); background: none;
}
.bi-guide__steps li strong { font-weight: 700; }
/* 関連コラム */
.bi-guide__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body .bi-guide-sec .bi-guide .bi-guide__links li { margin: 0 !important; padding: 0 !important; }
body .bi-guide-sec .bi-guide .bi-guide__links a {
  display: block; height: 100%;
  padding: 12px 34px 12px 14px; position: relative;
  border: 1px solid rgba(148, 128, 80, .30); border-radius: 10px;
  font-size: 14px; line-height: 1.7; text-decoration: none !important;
  color: inherit !important;
  word-break: normal; line-break: strict; overflow-wrap: break-word;
  transition: border-color .25s ease, background-color .25s ease;
}
body .bi-guide-sec .bi-guide .bi-guide__links a::after {
  content: "→"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: #C9A84C;
}
@media (hover: hover) {
  body .bi-guide-sec .bi-guide .bi-guide__links a:hover {
    border-color: rgba(201, 168, 76, .85); background: rgba(148, 128, 80, .07);
  }
}
.bi-guide__more { margin: 14px 0 0; font-size: 14px; line-height: 1.9; }
body .bi-guide-sec .bi-guide .bi-guide__more a { color: #C9A84C !important; text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .bi-guide { padding: 56px 16px 16px; }
  .bi-guide__answer { padding: 18px 16px; font-size: 15px; }
  .bi-guide__facts { grid-template-columns: 1fr; }
  .bi-guide__facts dt { border-bottom: none; padding-bottom: 4px; }
  .bi-guide__facts dd { padding-top: 4px; }
  .bi-guide__links { grid-template-columns: 1fr; }
}