/* ==========================================================================
   utilities.css — 余白・テキスト配置・displayユーティリティ(Bootstrap 5風)
   app.css(Order Ledgerデザインシステム)の後に読み込むこと。
   後勝ちでも .guide-content p 等(詳細度が高い)に負けないよう全て !important。

   ▼余白スケール(app.cssの余白リズムに対応)
     0 = 0        リセット用
     1 = 4px      微調整
     2 = 8px      小(gap相当)
     3 = 12px     本文ブロックの標準(.guide-content p の margin-bottom と同じ)
     4 = 16px     中
     5 = 24px     大
     6 = 40px     見出し前後
     7 = 64px     セクション間(.guide-content section + section と同じ)

   ▼命名(Bootstrap 5と同じ+BS4系の別名)
     m/p + t(上) b(下) s(左) e(右) x(左右) y(上下) + -数字
     左右はBS4系の l / r でも同じ意味で使える(ms-3 = ml-3, pe-2 = pr-2)。
     例: mb-3(下12px) mt-7(上64px) px-4(左右パディング16px) mx-auto(左右中央)

   ▼テキスト配置
     text-start / text-center / text-end(text-left / text-right も同義)

   ▼display
     d-none / d-inline / d-inline-block / d-block / d-flex / d-inline-flex / d-grid

   ▼レスポンシブ
     ブレークポイントはサイト共通の800px一本。-lg- がPC(801px以上)で適用。
     例: text-center text-lg-start = SPは中央寄せ・PCは左寄せ
         mb-2 mb-lg-5             = SPは下8px・PCは下24px
         d-none d-lg-block        = SPで非表示・PCで表示
   ========================================================================== */

/* ---- 全幅共通 ---- */
.m-0 { margin: 0 !important; }
.m-1 { margin: 4px !important; }
.m-2 { margin: 8px !important; }
.m-3 { margin: 12px !important; }
.m-4 { margin: 16px !important; }
.m-5 { margin: 24px !important; }
.m-6 { margin: 40px !important; }
.m-7 { margin: 64px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 24px !important; }
.mt-6 { margin-top: 40px !important; }
.mt-7 { margin-top: 64px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 24px !important; }
.mb-6 { margin-bottom: 40px !important; }
.mb-7 { margin-bottom: 64px !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 12px !important; }
.ms-4 { margin-left: 16px !important; }
.ms-5 { margin-left: 24px !important; }
.ms-6 { margin-left: 40px !important; }
.ms-7 { margin-left: 64px !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 12px !important; }
.ml-4 { margin-left: 16px !important; }
.ml-5 { margin-left: 24px !important; }
.ml-6 { margin-left: 40px !important; }
.ml-7 { margin-left: 64px !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 12px !important; }
.me-4 { margin-right: 16px !important; }
.me-5 { margin-right: 24px !important; }
.me-6 { margin-right: 40px !important; }
.me-7 { margin-right: 64px !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 12px !important; }
.mr-4 { margin-right: 16px !important; }
.mr-5 { margin-right: 24px !important; }
.mr-6 { margin-right: 40px !important; }
.mr-7 { margin-right: 64px !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.mx-3 { margin-left: 12px !important; margin-right: 12px !important; }
.mx-4 { margin-left: 16px !important; margin-right: 16px !important; }
.mx-5 { margin-left: 24px !important; margin-right: 24px !important; }
.mx-6 { margin-left: 40px !important; margin-right: 40px !important; }
.mx-7 { margin-left: 64px !important; margin-right: 64px !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
.my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-5 { margin-top: 24px !important; margin-bottom: 24px !important; }
.my-6 { margin-top: 40px !important; margin-bottom: 40px !important; }
.my-7 { margin-top: 64px !important; margin-bottom: 64px !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: 16px !important; }
.p-5 { padding: 24px !important; }
.p-6 { padding: 40px !important; }
.p-7 { padding: 64px !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 12px !important; }
.pt-4 { padding-top: 16px !important; }
.pt-5 { padding-top: 24px !important; }
.pt-6 { padding-top: 40px !important; }
.pt-7 { padding-top: 64px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 12px !important; }
.pb-4 { padding-bottom: 16px !important; }
.pb-5 { padding-bottom: 24px !important; }
.pb-6 { padding-bottom: 40px !important; }
.pb-7 { padding-bottom: 64px !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 4px !important; }
.ps-2 { padding-left: 8px !important; }
.ps-3 { padding-left: 12px !important; }
.ps-4 { padding-left: 16px !important; }
.ps-5 { padding-left: 24px !important; }
.ps-6 { padding-left: 40px !important; }
.ps-7 { padding-left: 64px !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 4px !important; }
.pl-2 { padding-left: 8px !important; }
.pl-3 { padding-left: 12px !important; }
.pl-4 { padding-left: 16px !important; }
.pl-5 { padding-left: 24px !important; }
.pl-6 { padding-left: 40px !important; }
.pl-7 { padding-left: 64px !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 4px !important; }
.pe-2 { padding-right: 8px !important; }
.pe-3 { padding-right: 12px !important; }
.pe-4 { padding-right: 16px !important; }
.pe-5 { padding-right: 24px !important; }
.pe-6 { padding-right: 40px !important; }
.pe-7 { padding-right: 64px !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 4px !important; }
.pr-2 { padding-right: 8px !important; }
.pr-3 { padding-right: 12px !important; }
.pr-4 { padding-right: 16px !important; }
.pr-5 { padding-right: 24px !important; }
.pr-6 { padding-right: 40px !important; }
.pr-7 { padding-right: 64px !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.px-5 { padding-left: 24px !important; padding-right: 24px !important; }
.px-6 { padding-left: 40px !important; padding-right: 40px !important; }
.px-7 { padding-left: 64px !important; padding-right: 64px !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-5 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-6 { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-7 { padding-top: 64px !important; padding-bottom: 64px !important; }

.m-auto { margin: auto !important; }
.ms-auto { margin-left: auto !important; }
.ml-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.text-start { text-align: left !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-right { text-align: right !important; }

/* 縦揃え(BS5同名)。trに付けた場合は行内の全セルに効く */
.align-top, tr.align-top > th, tr.align-top > td { vertical-align: top !important; }
.align-middle, tr.align-middle > th, tr.align-middle > td { vertical-align: middle !important; }
.align-bottom, tr.align-bottom > th, tr.align-bottom > td { vertical-align: bottom !important; }

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* ---- PC(801px以上)のみ ---- */
@media (min-width: 801px) {
  .m-lg-0 { margin: 0 !important; }
  .m-lg-1 { margin: 4px !important; }
  .m-lg-2 { margin: 8px !important; }
  .m-lg-3 { margin: 12px !important; }
  .m-lg-4 { margin: 16px !important; }
  .m-lg-5 { margin: 24px !important; }
  .m-lg-6 { margin: 40px !important; }
  .m-lg-7 { margin: 64px !important; }

  .mt-lg-0 { margin-top: 0 !important; }
  .mt-lg-1 { margin-top: 4px !important; }
  .mt-lg-2 { margin-top: 8px !important; }
  .mt-lg-3 { margin-top: 12px !important; }
  .mt-lg-4 { margin-top: 16px !important; }
  .mt-lg-5 { margin-top: 24px !important; }
  .mt-lg-6 { margin-top: 40px !important; }
  .mt-lg-7 { margin-top: 64px !important; }

  .mb-lg-0 { margin-bottom: 0 !important; }
  .mb-lg-1 { margin-bottom: 4px !important; }
  .mb-lg-2 { margin-bottom: 8px !important; }
  .mb-lg-3 { margin-bottom: 12px !important; }
  .mb-lg-4 { margin-bottom: 16px !important; }
  .mb-lg-5 { margin-bottom: 24px !important; }
  .mb-lg-6 { margin-bottom: 40px !important; }
  .mb-lg-7 { margin-bottom: 64px !important; }

  .ms-lg-0 { margin-left: 0 !important; }
  .ms-lg-1 { margin-left: 4px !important; }
  .ms-lg-2 { margin-left: 8px !important; }
  .ms-lg-3 { margin-left: 12px !important; }
  .ms-lg-4 { margin-left: 16px !important; }
  .ms-lg-5 { margin-left: 24px !important; }
  .ms-lg-6 { margin-left: 40px !important; }
  .ms-lg-7 { margin-left: 64px !important; }

  .ml-lg-0 { margin-left: 0 !important; }
  .ml-lg-1 { margin-left: 4px !important; }
  .ml-lg-2 { margin-left: 8px !important; }
  .ml-lg-3 { margin-left: 12px !important; }
  .ml-lg-4 { margin-left: 16px !important; }
  .ml-lg-5 { margin-left: 24px !important; }
  .ml-lg-6 { margin-left: 40px !important; }
  .ml-lg-7 { margin-left: 64px !important; }

  .me-lg-0 { margin-right: 0 !important; }
  .me-lg-1 { margin-right: 4px !important; }
  .me-lg-2 { margin-right: 8px !important; }
  .me-lg-3 { margin-right: 12px !important; }
  .me-lg-4 { margin-right: 16px !important; }
  .me-lg-5 { margin-right: 24px !important; }
  .me-lg-6 { margin-right: 40px !important; }
  .me-lg-7 { margin-right: 64px !important; }

  .mr-lg-0 { margin-right: 0 !important; }
  .mr-lg-1 { margin-right: 4px !important; }
  .mr-lg-2 { margin-right: 8px !important; }
  .mr-lg-3 { margin-right: 12px !important; }
  .mr-lg-4 { margin-right: 16px !important; }
  .mr-lg-5 { margin-right: 24px !important; }
  .mr-lg-6 { margin-right: 40px !important; }
  .mr-lg-7 { margin-right: 64px !important; }

  .mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-lg-1 { margin-left: 4px !important; margin-right: 4px !important; }
  .mx-lg-2 { margin-left: 8px !important; margin-right: 8px !important; }
  .mx-lg-3 { margin-left: 12px !important; margin-right: 12px !important; }
  .mx-lg-4 { margin-left: 16px !important; margin-right: 16px !important; }
  .mx-lg-5 { margin-left: 24px !important; margin-right: 24px !important; }
  .mx-lg-6 { margin-left: 40px !important; margin-right: 40px !important; }
  .mx-lg-7 { margin-left: 64px !important; margin-right: 64px !important; }

  .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-lg-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
  .my-lg-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
  .my-lg-3 { margin-top: 12px !important; margin-bottom: 12px !important; }
  .my-lg-4 { margin-top: 16px !important; margin-bottom: 16px !important; }
  .my-lg-5 { margin-top: 24px !important; margin-bottom: 24px !important; }
  .my-lg-6 { margin-top: 40px !important; margin-bottom: 40px !important; }
  .my-lg-7 { margin-top: 64px !important; margin-bottom: 64px !important; }

  .p-lg-0 { padding: 0 !important; }
  .p-lg-1 { padding: 4px !important; }
  .p-lg-2 { padding: 8px !important; }
  .p-lg-3 { padding: 12px !important; }
  .p-lg-4 { padding: 16px !important; }
  .p-lg-5 { padding: 24px !important; }
  .p-lg-6 { padding: 40px !important; }
  .p-lg-7 { padding: 64px !important; }

  .pt-lg-0 { padding-top: 0 !important; }
  .pt-lg-1 { padding-top: 4px !important; }
  .pt-lg-2 { padding-top: 8px !important; }
  .pt-lg-3 { padding-top: 12px !important; }
  .pt-lg-4 { padding-top: 16px !important; }
  .pt-lg-5 { padding-top: 24px !important; }
  .pt-lg-6 { padding-top: 40px !important; }
  .pt-lg-7 { padding-top: 64px !important; }

  .pb-lg-0 { padding-bottom: 0 !important; }
  .pb-lg-1 { padding-bottom: 4px !important; }
  .pb-lg-2 { padding-bottom: 8px !important; }
  .pb-lg-3 { padding-bottom: 12px !important; }
  .pb-lg-4 { padding-bottom: 16px !important; }
  .pb-lg-5 { padding-bottom: 24px !important; }
  .pb-lg-6 { padding-bottom: 40px !important; }
  .pb-lg-7 { padding-bottom: 64px !important; }

  .ps-lg-0 { padding-left: 0 !important; }
  .ps-lg-1 { padding-left: 4px !important; }
  .ps-lg-2 { padding-left: 8px !important; }
  .ps-lg-3 { padding-left: 12px !important; }
  .ps-lg-4 { padding-left: 16px !important; }
  .ps-lg-5 { padding-left: 24px !important; }
  .ps-lg-6 { padding-left: 40px !important; }
  .ps-lg-7 { padding-left: 64px !important; }

  .pl-lg-0 { padding-left: 0 !important; }
  .pl-lg-1 { padding-left: 4px !important; }
  .pl-lg-2 { padding-left: 8px !important; }
  .pl-lg-3 { padding-left: 12px !important; }
  .pl-lg-4 { padding-left: 16px !important; }
  .pl-lg-5 { padding-left: 24px !important; }
  .pl-lg-6 { padding-left: 40px !important; }
  .pl-lg-7 { padding-left: 64px !important; }

  .pe-lg-0 { padding-right: 0 !important; }
  .pe-lg-1 { padding-right: 4px !important; }
  .pe-lg-2 { padding-right: 8px !important; }
  .pe-lg-3 { padding-right: 12px !important; }
  .pe-lg-4 { padding-right: 16px !important; }
  .pe-lg-5 { padding-right: 24px !important; }
  .pe-lg-6 { padding-right: 40px !important; }
  .pe-lg-7 { padding-right: 64px !important; }

  .pr-lg-0 { padding-right: 0 !important; }
  .pr-lg-1 { padding-right: 4px !important; }
  .pr-lg-2 { padding-right: 8px !important; }
  .pr-lg-3 { padding-right: 12px !important; }
  .pr-lg-4 { padding-right: 16px !important; }
  .pr-lg-5 { padding-right: 24px !important; }
  .pr-lg-6 { padding-right: 40px !important; }
  .pr-lg-7 { padding-right: 64px !important; }

  .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-lg-1 { padding-left: 4px !important; padding-right: 4px !important; }
  .px-lg-2 { padding-left: 8px !important; padding-right: 8px !important; }
  .px-lg-3 { padding-left: 12px !important; padding-right: 12px !important; }
  .px-lg-4 { padding-left: 16px !important; padding-right: 16px !important; }
  .px-lg-5 { padding-left: 24px !important; padding-right: 24px !important; }
  .px-lg-6 { padding-left: 40px !important; padding-right: 40px !important; }
  .px-lg-7 { padding-left: 64px !important; padding-right: 64px !important; }

  .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-lg-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
  .py-lg-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
  .py-lg-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
  .py-lg-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
  .py-lg-5 { padding-top: 24px !important; padding-bottom: 24px !important; }
  .py-lg-6 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .py-lg-7 { padding-top: 64px !important; padding-bottom: 64px !important; }

  .m-lg-auto { margin: auto !important; }
  .ms-lg-auto { margin-left: auto !important; }
  .ml-lg-auto { margin-left: auto !important; }
  .me-lg-auto { margin-right: auto !important; }
  .mr-lg-auto { margin-right: auto !important; }
  .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
  .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }

  .text-lg-start { text-align: left !important; }
  .text-lg-left { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-end { text-align: right !important; }
  .text-lg-right { text-align: right !important; }

  .d-lg-none { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-grid { display: grid !important; }
}

/* ==========================================================================
   移植ガイドページ共通(.guide-content 登録コンテンツ用)
   各ページの<style>に重複して書いていたものをここへ集約。
   ========================================================================== */

/* セクションブロック間の標準余白 */
.guide-content section + section { margin-top: 64px !important; }

/* app.cssの .guide-content p { max-width: 46em } の打ち消し。
   ブロックはdivで組むのが基本ルールだが、pが混ざっても幅が縮まないようにする保険 */
.guide-content p { max-width: none !important; }

/* 見出しに併記する価格などのsmall。間隔は全角スペースではなくマージンで取る
   (全角スペースだと空きすぎて見えるため・テキスト側にスペースは入れない) */
.guide-content h3 small { margin-left: 0.5em; }

/* BS5の.text-nowrap相当。SPで表の短いラベル(「◎ 推奨」等)が1文字ずつ折り返されるのを防ぐ */
.text-nowrap { white-space: nowrap !important; }

/* 注記リスト(マーク=※)・箇条書きリスト(マーク=・)。
   折り返し行をマークの幅ぶんぶら下げる。li内のテキストにマークは書かない(CSSが付ける) */
.note-list, .dot-list { list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; }
.note-list li, .dot-list li { position: relative; padding-left: 1.25em; }
.note-list li::before, .dot-list li::before { position: absolute; left: 0; }
.note-list li::before { content: "※"; }
.dot-list li::before { content: "・"; }

/* 大きめCTAボタン(BS5の.btn-lg相当)。図版・セクション下の誘導ボタン用。
   .btn-xl はさらに大きい主役CTA用。SPは.btnが全幅ブロックになるためmin-widthを外す */
.btn-lg { padding: 16px 32px !important; font-size: 19px !important; min-width: 280px; }
.btn-xl { padding: 18px 48px !important; font-size: 21px !important; min-width: 360px; }
@media (max-width: 800px) {
  .btn-lg, .btn-xl { min-width: 0; }
}

/* 3列以上の文章表(naireのデータ形式表・guideのお支払方法表など)をSPで親幅に収める。
   表は列の最小幅(折り返せない英単語+左右パディング28px)の合計より縮まないため、
   375px前後の端末では枠からはみ出す。パディングと文字を詰め、英単語も途中で折り返し可にする。
   横スクロールで逃がす .fig-scroll と違い、数行の説明表なので幅内で読み切れるようにする */
@media (max-width: 800px) {
  .guide-content .table-fit { width: 100%; }
  .guide-content .table-fit th,
  .guide-content .table-fit td { padding: 8px; font-size: 15px; overflow-wrap: anywhere; }
}

/* 表内の画像は余白を詰める(.guide-content img の margin:12px auto の打ち消し) */
.guide-content td img { margin: 4px auto; }
/* 価格表のイメージ列。SPは相対スケールを保ったまま一律縮小(width指定だと画像ごとの大小関係が崩れる)。
   fig-scrollで表を包む場合、app.cssの .fig-scroll img { min-width:640px }(SP)が
   表内画像まで巨大化させるため打ち消す */
@media (max-width: 800px) {
  .guide-content .price-table td img { zoom: 0.7; }
  .guide-content .fig-scroll td img { min-width: 0; }
  /* 見出し列(段数等)が縦1文字に潰れないようにする。横スクロールできるfig-scroll内の表に限定
     (通常の表に効かせると他の列が潰れて逆効果) */
  .guide-content .fig-scroll th:first-child,
  .guide-content .fig-scroll td:first-child { white-space: nowrap; }
}

/* アコーディオン(Bootstrap 5と同じクラス名・構成)。どのページでも使える汎用クラス。
   開閉機構はJS不要のネイティブ<details>で実装:
     <div class="accordion">
       <details class="accordion-item">
         <summary class="accordion-button">見出し</summary>
         <div class="accordion-body">中身</div>
       </details>
     </div>
   BS本体を導入したらdetails/summaryをBSの標準マークアップに差し替えるだけで移行できる。
   シェブロンはborder回転式(BSのSVG背景の代替・画像不要)、開くと上向きに回転 */
.accordion-item { border: 1px solid var(--line); background: var(--paper); }
.accordion-item + .accordion-item { margin-top: 12px; } /* 枠線連結はせず項目ごとに独立したボックスで見せる */
.accordion-button {
  display: block; list-style: none; cursor: pointer; position: relative;
  padding: 14px 44px 14px 16px; font-weight: 700;
  background: var(--canvas); /* 見出し部はページ背景と同じベージュで本文と区別する */
}
.accordion-button::-webkit-details-marker { display: none; }
.accordion-button::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -7px;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* 開いた状態でも文字色は変えない(アクセント色だとリンクに見えるため) */
details[open] > .accordion-button::after { transform: rotate(225deg); margin-top: -2px; }
.accordion-body { padding: 14px 16px 16px; } /* 上余白は見出し部(ベージュ)との区切り用 */

/* 補足ブロックの囲み(支払方法の連携方法・ご利用条件・ご利用時の流れなど)。
   HTMLのaside=本文の補足という概念に対応する名前。app.cssの.notice-box(点線)は
   分かりにくいとの判断で、ひとまとまりの補足はアコーディオン見出しと同じ
   ベージュ背景+実線の囲みで見せる */
.aside-box {
  border: 1px solid var(--line);
  background: var(--canvas);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 17px; /* 補足なので本文(20px)よりやや小さく。app.cssの注記系と同じサイズ */
}
/* 枠内の見出しも本文の縮小率に合わせる(標準のh4 18px:本文20px ≒ 16px:17px) */
.aside-box h4 { font-size: 16px; }

/* 小さめ画像の横並び(原寸のまま)。.naire-figsと違い画像幅を列幅まで引き伸ばさない */
.guide-content .img-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.guide-content .img-row img { margin: 0; }

/* ページ内アンカーナビ(旧サイト btn_01〜07.png のデザインをCSSで再現・画像不使用)。
   naire・guideなど複数ページで使う汎用パーツ(旧名: naire-nav。app.cssのチップ型
   .naire-navとは別物)。色は旧画像の実測値: ストライプ #c1272d/#c73d3e・背景 #f2f2f2。
   ボタン寸法も旧画像の285x55。.guide-content a:not(.btn) の下線に後勝ちするため
   .guide-content を付けて詳細度を揃えている */
.guide-content .anchor-nav {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 16px 0 40px; padding: 0;
}
.guide-content .anchor-nav a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 285px; min-height: 55px;
  padding: 8px 40px 8px 26px;
  border: 0; background: #f2f2f2;
  font-size: 15px; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
/* 左端の赤2トーン斜めストライプ帯 */
.guide-content .anchor-nav a::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 10px;
  background: repeating-linear-gradient(45deg, #c1272d 0 4px, #c73d3e 4px 8px);
}
/* 右端の下向きシェブロン */
.guide-content .anchor-nav a::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border: solid #c1272d; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.guide-content .anchor-nav a:hover { background: #e9e9e9; color: var(--ink); }
@media (max-width: 800px) {
  /* liがflexアイテムのためaのwidth:100%だけでは縮まない。liを半分幅にして2列で積む */
  .guide-content .anchor-nav { gap: 8px; }
  .guide-content .anchor-nav li { width: calc(50% - 4px); }
  .guide-content .anchor-nav a { width: 100%; font-size: 14px; padding: 8px 28px 8px 18px; }
  .guide-content .anchor-nav a::after { right: 10px; }
}