@charset "UTF-8";
/* =============================================================
   lp.css — 下層ページ本文（.lp）の土台。clean モードで読む。
   本文HTML（template-parts/clean/<key>.html）は build/render-clean.js が本番の表示を実測して生成する。
     .lp-sec / .lp-wrap / .lp-row / .lp-col / .lp-box … 入れ物（配置の数値は assets/css/pages/<key>.css の .bN）
     .kt-N / .kb-N … 書体・ボタン（assets/css/kbody.css）
   ここには「数値を持たない共通の決まり」と、本番サイトが独自に書いていた部品のCSS（パンくず・表）だけを置く。
   ============================================================= */
.fs-mode-clean .fs-main { color: #000; }
.lp { overflow-x: clip; }
/* 入れ物は flow-root：子の margin-top が親の外へ抜けない（実測した余白をそのまま再現するため） */
.lp-sec, .lp-wrap, .lp-col, .lp-box { display: flow-root; position: relative; min-width: 0; }
.lp-wrap { width: calc(100% - 30px); margin-inline: auto; }
.lp-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.lp-row > * { flex: 0 0 auto; width: 100%; } /* 幅は pages/<key>.css の .bN が上書き。無指定だと内容幅に広がるため 100% を既定に */
/* 見出し・段落の margin は base.css で 0。ここで .lp p{margin:0} のように書くと .bN の余白指定に勝ってしまうので書かない */
.lp-img img { display: block; width: 100%; height: auto; }
.lp-img a:hover img { opacity: .85; }
.lp-list li { list-style: inherit; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; transition: opacity .2s; }
.lp-btn:hover { opacity: .8; }
.lp-hr { height: 0; margin-bottom: 0; border: 0; }
.lp-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.lp-table { width: 100%; border-collapse: collapse; }
.lp a:not(.lp-btn) { color: inherit; }
.lp p a:not(.lp-btn), .lp li a { text-decoration: underline; }
.lp-raw a { text-decoration: none; }

/* アイコン（CSS マスクの自前図形） */
:root {
  --lp-ico-arrow: var(--fs-arrow-icon);
  --lp-ico-chevsq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 0h20a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm7.6 6L8 7.6l4.4 4.4L8 16.4 9.600 18l6-6z'/%3E%3C/svg%3E");
  --lp-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --lp-ico-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}
.lp-icon { display: block; aspect-ratio: 1; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.lp-ico-arrow { --ico: var(--lp-ico-arrow); }
.lp-ico-check { --ico: var(--lp-ico-check); }
.lp-ico-chevsq { --ico: var(--lp-ico-chevsq); }
.lp-ico-down { --ico: var(--lp-ico-down); }
/* 中央にアイコンを置いた区切り線 */
.lp-iline { display: flex; align-items: center; gap: 12px; }
.lp-iline::before, .lp-iline::after { content: ""; flex: 1; border-top: var(--bw, 1px) solid var(--c, currentColor); }
.lp-iline .lp-icon { flex: 0 0 var(--is, 24px); width: var(--is, 24px); color: var(--ic, currentColor); }

/* 表示の出し分け */
.lp .is-hidden { display: none !important; }
@media (min-width: 768px) { .lp .is-sp-only { display: none !important; } }
@media (max-width: 767px) { .lp .is-pc-only { display: none !important; } .lp-wrap { width: 100%; } }

/* ---------- 本番サイトが独自に書いていた部品（カスタムCSSからの移植） ---------- */
/* パンくず */
.lp .breadcrumb { margin: 0; padding: 0; list-style: none; font-family: var(--fs-font-base); font-size: 16px; line-height: normal; }
.lp .breadcrumb li { display: inline; list-style: none; font-weight: 700; }
.lp .breadcrumb li::after { content: ">"; padding: 0 .2em; color: #555; }
.lp .breadcrumb li:last-child::after { content: ""; }
.lp .breadcrumb li a { text-decoration: none; color: var(--fs-primary-text); }
.lp .breadcrumb li a:hover { text-decoration: underline; }
/* 料金表などの表 */
.lp .case-table { width: 100%; border-collapse: collapse; font-family: var(--fs-font-base); }
.lp .case-table th, .lp .case-table td { padding: 12px; border: 1px solid #ddd; text-align: left; font-size: 14px; line-height: 1.8; }
.lp .case-table th { background-color: var(--fs-accent); font-weight: 400; color: var(--fs-on-accent); }
.lp .case-table td { background-color: var(--fs-white); color: #666; }
.lp .case-table td.gold { background-color: var(--fs-accent); color: var(--fs-on-accent); }
@media (min-width: 1024px) { .lp .case-table { margin-left: auto; margin-right: auto; } .lp .case-table th { width: 300px; } }
@media (max-width: 1023px) { .lp .case-table th, .lp .case-table td { font-size: 15px; } .lp .case-table th { width: 150px; } }