/* 黒ネコの手 / スタイル一式（トークン＋本体） */

/* 詳細度はリセット(0,1,1)と部品(0,2,0)の2層 */
/* 部品から .bc-root を外すとリセットに負ける */
/* rem は使わない。html{font-size} は親テーマ側 */

.bc-root {
  /* ---- 色 ---- */
  --bc-c-orange: #e57936; /* パネル / CTAセクション / フッターボタン / 下線バー / ▼マーク */
  --bc-c-beige-bg: #f5f4ea; /* ヘッダー背景 */
  --bc-c-beige-cell: #eae3ce; /* 料金表の右カラム */
  /* フッター背景 / ロゴ / 肉球 / nav区切り / カードラベル */
  --bc-c-ink: #383838;
  --bc-c-red: #dd5555; /* CTAセクションの見出し / 注釈 */
  --bc-c-blue: #3888d3; /* 電話ボタン */
  --bc-c-green: #00c856; /* LINEボタン（CTAセクション） */
  --bc-c-white: #ffffff;
  --bc-c-black: #000000;
  --bc-c-rule: #666666; /* サービスの流れ 下罫線 */
  --bc-c-rule-lt: #d9d9d9; /* サービスの流れ 行間の罫線 */

  --bc-c-gray: #666666; /* 特徴カードの本文。--bc-c-rule と同値だが別定義 */
  --bc-c-line: #7dcd2c; /* メインビジュアルのLINEボタン。--bc-c-green とは別 */
  --bc-c-beige-btn: #f5e9dc; /* 「料金一覧を見る」「一覧を見る」の背景 */
  /* 上記の枠線 / Blog白カード枠 / KV見積りボタン背景 */
  --bc-c-beige-bd: #e2d3ca;
  --bc-c-beige-note: #fbeeda; /* サービスカード下部の色。現在は未使用 */
  --bc-c-gray-map: #828282; /* 地図セクションの背景 */
  --bc-c-veil: rgba(
    61.71,
    58.63,
    58.63,
    0.76
  ); /* お悩みセクションのオーバーレイ */
  --bc-c-card-veil: rgba(229, 121, 54, 0.6); /* お悩みカードの背景 */

  /* ---- フォント ---- */
  /* Montserrat と Inter に日本語グリフは無い */
  --bc-f-base: "Noto Sans JP", sans-serif;
  --bc-f-body: "M PLUS 1p", "Noto Sans JP", sans-serif;
  --bc-f-table: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --bc-f-logo: "Montserrat", "Noto Sans JP", sans-serif;
  --bc-f-heading: "Inter", "Noto Sans JP", sans-serif;

  /* ---- 共通の左右余白 ---- */
  --bc-gutter: 50px;

  /* ---- 幅の設定 ---- */
  --bc-w-canvas: 1280px;
  --bc-w-narrow: 840px; /* 料金表 / 注釈 / サービスの流れ */
  --bc-w-wide: 992px; /* 対応業務パネル */
  --bc-w-cta: 1088px; /* CTA白箱 */
  --bc-w-footer: 1000px; /* フッター内容 */

  /* ---- 罫線 ---- */
  --bc-bd-table: 1px solid var(--bc-c-black);
  --bc-bd-rule: 1px solid var(--bc-c-rule);
  --bc-bd-rule-lt: 1px solid var(--bc-c-rule-lt);

  /* ---- nav ---- */
  --bc-nav-gap: 20px; /* テキスト間の総距離（縦棒込み） */
  --bc-nav-sep-w: 1px;
  --bc-nav-sep-h: 21px;
  --bc-nav-sep-c: var(--bc-c-ink);
  --bc-nav-line: 19px; /* 項目テキストの行箱 */
}

/* ==========
   土台
   ========== */
.bc-root {
  box-sizing: border-box;
  background: var(--bc-c-white);
  color: var(--bc-c-black);
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  letter-spacing: normal;
  /* 日本語を文節単位で折り返す */
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
}

/* ==========
   共通の幅
   ========== */
.bc-root .bc-inner {
  width: 100%;
  max-width: var(--bc-w-canvas);
  margin-inline: auto;
  padding-inline: var(--bc-gutter);
}
.bc-root *,
.bc-root *::before,
.bc-root *::after {
  box-sizing: inherit;
}

/* 外部CSSが足す装飾用の疑似要素を無効化する */
.bc-root *::before,
.bc-root *::after {
  content: none;
}

/* リセット（0,1,1）。使う要素だけ列挙する */
.bc-root h1,
.bc-root h2,
.bc-root h3,
.bc-root p,
.bc-root ul,
.bc-root ol,
.bc-root li,
.bc-root dl,
.bc-root dt,
.bc-root dd,
.bc-root figure,
.bc-root table,
.bc-root button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  list-style: none;
}
.bc-root a {
  color: inherit;
  text-decoration: none;
}
.bc-root img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}
.bc-root table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========
   アクセシビリティ
   ========== */
.bc-root a:focus-visible,
.bc-root button:focus-visible {
  outline: 2px solid var(--bc-c-orange);
  outline-offset: 2px;
}
.bc-root .bc-skiplink {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--bc-c-white);
  color: var(--bc-c-ink);
  font-family: var(--bc-f-base);
  font-size: 15px;
  border: 2px solid var(--bc-c-orange);
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}
.bc-root .bc-skiplink:focus {
  transform: translateY(0);
}
/* ==========
   ヘッダー（全ページ共通）
   ========== */
.bc-root .bc-header {
  position: relative;
  height: 98px;
  background: var(--bc-c-beige-bg);
}
.bc-root .bc-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bc-root .bc-header__brand {
  display: flex;
  align-items: center;
  gap: 3px;
}
.bc-root .bc-header__paw {
  width: 35px;
  height: 34.3px;
  flex: none;
}
.bc-root .bc-header__title {
  font-family: var(--bc-f-logo);
  font-size: 30px;
  font-weight: 800;
  line-height: 30px;
  color: var(--bc-c-ink);
  white-space: nowrap;
}
/* ハンバーガー */
.bc-root .bc-header__toggle {
  display: none; /* 900px以上では出さない */
  width: 44px;
  height: 44px;
  flex: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.bc-root .bc-header__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bc-c-ink);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.bc-root .bc-header--open .bc-header__toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.bc-root .bc-header--open .bc-header__toggle span:nth-child(2) {
  opacity: 0;
}
.bc-root .bc-header--open .bc-header__toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========
   nav（ヘッダー・フッター共通）
   ========== */
.bc-root .bc-nav__list {
  display: flex;
  align-items: center;
}
.bc-root .bc-nav__item {
  display: flex;
  align-items: center;
}
.bc-root .bc-nav__item + .bc-nav__item::before {
  content: "";
  flex: none;
  width: var(--bc-nav-sep-w);
  height: var(--bc-nav-sep-h);
  margin: 0 calc((var(--bc-nav-gap) - var(--bc-nav-sep-w)) / 2);
  background: var(--bc-nav-sep-c);
}
.bc-root .bc-nav__link {
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32px;
  line-height: var(--bc-nav-line);
  white-space: nowrap;
}
.bc-root .bc-header .bc-nav__link {
  color: var(--bc-c-ink);
}
.bc-root .bc-footer .bc-nav__link {
  color: var(--bc-c-white);
}
.bc-root .bc-footer__nav {
  --bc-nav-sep-c: var(--bc-c-white);
}

/* ==========
   KV帯（hero）
   ========== */
.bc-root .bc-hero {
  background: var(--bc-c-beige-bg);
}
.bc-root .bc-hero__stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: var(--bc-w-canvas);
  margin: 0 auto;
  aspect-ratio: 1280 / 574;
  background: url("../img/top/kv.png") center top / 100% 100% no-repeat;
}
/* --u はKV原寸1280px上の1px。KV幅に追従する */
.bc-root .bc-hero__stage > * {
  --u: 0.078125cqw;
}

.bc-root .bc-hero__copy {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(119 * var(--u));
  font-family: var(--bc-f-base);
  font-size: max(calc(40 * var(--u)), 22px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--bc-c-ink);
  white-space: nowrap;
}
.bc-root .bc-hero__copy em {
  font-style: normal;
  color: var(--bc-c-orange);
}

.bc-root .bc-hero__lead {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(266 * var(--u));
  font-family: var(--bc-f-base);
  font-size: calc(1.9px + 18.1 * var(--u));
  font-weight: 400;
  line-height: 1.6;
  color: var(--bc-c-ink);
  white-space: nowrap;
}

.bc-root .bc-hero__actions {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(317 * var(--u));
  display: flex;
  gap: calc(27.46 * var(--u));
}
.bc-root .bc-hbtn {
  width: calc(241.27 * var(--u));
  height: calc(60.78 * var(--u));
  padding-inline: calc(12 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(36.84 * var(--u));
  font-family: var(--bc-f-base);
  font-size: calc(2.5px + 16.77 * var(--u));
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.bc-root .bc-hbtn__icon {
  flex: none;
}

.bc-root .bc-hbtn--line {
  gap: calc(5.58 * var(--u));
  background: var(--bc-c-line);
  color: var(--bc-c-white);
}
.bc-root .bc-hbtn--line .bc-hbtn__icon {
  width: calc(34.09 * var(--u));
  height: calc(34.09 * var(--u));
}

.bc-root .bc-hbtn--quote {
  gap: calc(7.06 * var(--u));
  background: var(--bc-c-beige-bd);
  border: calc(1.84 * var(--u)) solid var(--bc-c-beige-bd);
  color: var(--bc-c-ink);
}
.bc-root .bc-hbtn--quote .bc-hbtn__icon {
  width: calc(26.68 * var(--u));
  height: calc(26.68 * var(--u));
}

.bc-root .bc-hero__banner {
  position: absolute;
  left: calc(102 * var(--u));
  top: calc(404 * var(--u));
  width: calc(432 * var(--u));
  display: block;
}
.bc-root .bc-hero__banner img {
  width: 100%;
  height: auto;
}

/* ==========
   セクション見出し（英日2段）
   ========== */
.bc-root .bc-sechead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.bc-root .bc-sechead__en {
  font-family: var(--bc-f-logo);
  font-size: 25px;
  font-weight: 900;
  line-height: 40px;
  color: var(--bc-c-orange);
  text-align: center;
}
.bc-root .bc-sechead__ja {
  font-family: var(--bc-f-body);
  font-size: 25px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 1.25px;
  color: var(--bc-c-ink);
  text-align: center;
}

/* ==========
   About
   ========== */
.bc-root .bc-about {
  background: var(--bc-c-beige-bg);
}
.bc-root .bc-about__stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: var(--bc-w-canvas);
  margin: 0 auto;
  aspect-ratio: 1280 / 670;
  background: url("../img/top/about.png") center top / 100% 100% no-repeat;
}
.bc-root .bc-about__stage > * {
  --u: 0.078125cqw;
}

.bc-root .bc-about__head {
  position: absolute;
  left: 50%;
  top: calc(77 * var(--u));
  transform: translateX(-50%);
}
.bc-root .bc-about__head .bc-sechead__en {
  font-size: max(
    calc(25 * var(--u)),
    16px
  ); /* 下限16px。819px以下でここに張り付く */
  line-height: 1.6;
}
.bc-root .bc-about__head .bc-sechead__ja {
  font-size: max(
    calc(25 * var(--u)),
    16px
  ); /* 下限16px。819px以下でここに張り付く */
  line-height: 0.8;
  letter-spacing: 0.05em;
}
.bc-root .bc-about__head.bc-sechead {
  gap: calc(5 * var(--u));
}

.bc-root .bc-about__text {
  position: absolute;
  left: calc(640 * var(--u));
  top: calc(307 * var(--u));
  width: calc(473 * var(--u));
  font-family: var(--bc-f-base);
  font-size: max(calc(16 * var(--u)), 12px);
  font-weight: 400;
  line-height: 1.5625;
  letter-spacing: 0.05em;
  color: var(--bc-c-ink);
}
.bc-root .bc-about__text--sp {
  display: none;
}

/* ==========
   こんなお悩みありませんか？
   ========== */
.bc-root .bc-trouble {
  position: relative;
  background: url("../img/top/trouble.png") center center / cover no-repeat;
}
.bc-root .bc-trouble::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bc-c-veil);
}
.bc-root .bc-trouble__inner {
  position: relative;
  z-index: 1;
  padding-block: 124px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bc-root .bc-trouble__title {
  font-family: var(--bc-f-base);
  font-size: 25px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 2px;
  color: var(--bc-c-white);
  text-align: center;
  text-shadow: 0 4px 5px rgba(0, 0, 0, 0.25);
}
.bc-root .bc-trouble__rule {
  margin-top: 21.5px;
  width: min(350px, 100%);
  height: 5px;
  background: var(--bc-c-white);
}
.bc-root .bc-trouble__list {
  margin-top: 44.5px;
  width: 100%;
  max-width: 615px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bc-root .bc-trouble__item {
  min-height: 101px;
  padding: 12px 20px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bc-c-card-veil);
  border-radius: 20px;
  font-family: var(--bc-f-body);
  font-size: 16px;
  font-weight: 800;
  line-height: 25px;
  color: var(--bc-c-white);
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* ==========
   特徴カード
   ========== */
.bc-root .bc-features {
  background: var(--bc-c-white);
}
.bc-root .bc-features__inner {
  padding-block: 117px 87px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bc-root .bc-features__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bc-root .bc-features__sub {
  font-family: var(--bc-f-base);
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 1.6px;
  color: var(--bc-c-ink);
  text-align: center;
}
.bc-root .bc-features__title {
  font-family: var(--bc-f-base);
  font-size: 25px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 2px;
  color: var(--bc-c-ink);
  text-align: center;
}
.bc-root .bc-features__title em {
  font-style: normal;
  color: var(--bc-c-red);
}

/* 特徴カード見出し下の折れ線画像の枠 */
.bc-root .bc-feature__line {
  margin-top: 31px;
  width: min(346px, 100%);
  height: 10px;
}
.bc-root .bc-features__grid {
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 38px;
}
.bc-root .bc-feature {
  position: relative;
  width: 259px;
  min-height: 369px;
  padding: 35.61px 17.81px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 29.68px;
  background: var(--bc-c-white);
  border-radius: 11.87px;
  outline: 3.56px solid var(--bc-c-orange);
  outline-offset: -3.56px;
}
.bc-root .bc-feature__badge {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 79px;
}
.bc-root .bc-feature__title {
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 23.74px;
  letter-spacing: 1.28px;
  color: var(--bc-c-orange);
  text-align: center;
}
.bc-root .bc-feature__icon {
  width: 70px;
  height: 70px;
  flex: none;
}
.bc-root .bc-feature__text {
  align-self: stretch;
  font-family: var(--bc-f-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 17.81px;
  letter-spacing: 0.96px;
  color: var(--bc-c-gray);
}

/* ==========
   CTA（全ページ共通）
   ========== */
.bc-root .bc-cta {
  margin-top: 185px;
  padding: 43px 96px;
  background: var(--bc-c-orange);
}
.bc-root .bc-cta__box {
  width: 100%;
  max-width: var(--bc-w-cta);
  min-height: 278px;
  margin: 0 auto;
  padding: 50px 0 44px;
  background: var(--bc-c-white);
  text-align: center;
}
.bc-root .bc-cta__title {
  font-family: var(--bc-f-base);
  font-size: 24px;
  font-weight: 700;
  line-height: 20px;
  color: var(--bc-c-red);
}
.bc-root .bc-cta__hours {
  margin-top: 24px;
  font-family: var(--bc-f-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 25px;
  color: var(--bc-c-ink);
}
.bc-root .bc-cta__actions {
  margin-top: 39px;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.bc-root .bc-btn {
  width: 225px;
  height: 76px;
  padding: 17px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  color: var(--bc-c-white);
  text-align: center;
}
.bc-root .bc-btn--tel {
  background: var(--bc-c-blue);
}
.bc-root .bc-btn--line {
  background: var(--bc-c-green);
}
.bc-root .bc-btn--mail {
  background: var(--bc-c-red);
}

/* ==========
   「もっと見る」系ボタン
   ========== */
.bc-root .bc-more {
  width: 162.76px;
  height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ::before の余白を挟むため、21ではなく10 */
  gap: 10px;
  background: var(--bc-c-beige-btn);
  border: 1.24px solid var(--bc-c-beige-bd);
  border-radius: 24.85px;
  font-family: var(--bc-f-base);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.26px;
  line-height: 1;
  color: var(--bc-c-ink);
  white-space: nowrap;
}
/* 「>」矢印。::after を45度回して作る */
/* ::before は左右対称に見せるための空き */
.bc-root .bc-more::before,
.bc-root .bc-more::after {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 7.45px;
  height: 7.45px;
}
.bc-root .bc-more::before {
  visibility: hidden;
}
.bc-root .bc-more::after {
  border-top: 1.86px solid currentColor;
  border-right: 1.86px solid currentColor;
  transform: rotate(45deg);
}

.bc-root .bc-more--sm {
  width: 131px;
  height: 33px;
  gap: 15px;
  border-width: 1px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 0.22px;
}
.bc-root .bc-more--sm::before,
.bc-root .bc-more--sm::after {
  width: 6px;
  height: 6px;
}
.bc-root .bc-more--sm::after {
  border-top-width: 1.5px;
  border-right-width: 1.5px;
}

/* ==========
   Service
   ========== */
.bc-root .bc-svc {
  background: var(--bc-c-white);
}
.bc-root .bc-svc__inner {
  padding-block: 77px 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bc-root .bc-svc__grid {
  margin-top: 60px;
  width: 100%;
  max-width: 1133px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 15px;
  row-gap: 17px;
}
.bc-root .bc-svc__item {
  width: 272px;
  flex: none;
  display: flex;
}
.bc-root .bc-svc__card {
  width: 100%;
  display: block;
  border: 1px solid var(--bc-c-orange);
  border-radius: 20px;
}
/* ----------
   Service カード
   ---------- */
.bc-root .bc-scard {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 364px;
  border: 1px solid var(--bc-c-orange);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bc-c-white);
  color: inherit;
  text-decoration: none;
  --bc-scard-accent: #d59538;
}
.bc-root .bc-scard__body {
  flex: 1;
  padding: 29px 19px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bc-root .bc-scard__intro {
  display: flex;
  align-items: flex-start;
  gap: 29px;
}
.bc-root .bc-scard__num {
  flex: none;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: var(--bc-scard-accent);
  color: var(--bc-c-white);
  font-family: var(--bc-f-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 37px;
  letter-spacing: 0.75px;
  text-align: center;
}
.bc-root .bc-scard__headings {
  flex: 1;
  min-width: 0;
}
.bc-root .bc-scard__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
.bc-root .bc-scard__lead {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
}
.bc-root .bc-scard__list {
  width: 100%;
  height: 163px;
  list-style: none;
}
.bc-root .bc-scard__item {
  position: relative;
  padding-left: 20px;
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
}
.bc-root .bc-scard__item + .bc-scard__item {
  margin-top: 14px;
}
.bc-root .bc-scard__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1lh - 10px) / 2);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bc-scard-accent);
}
.bc-root .bc-scard__foot {
  min-height: 58px;
  padding: 5px 19px 0;
  background: var(--bc-c-beige-note);
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
}
/* 全カード共通 160×160・背景は透過 */
/* 枠内の見え方は画像側で調整する */
/* 絶対配置で下帯の上に乗る＝z-index不要 */
.bc-root .bc-scard__cat {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 160px;
}
.bc-root .bc-svc__card img {
  width: 100%;
  height: auto;
}
/* 8枚目のCTA枠。画像の吹き出しに文言を重ねる */
.bc-root .bc-svc__cta {
  position: relative;
}
.bc-root .bc-svc__cta-text {
  position: absolute;
  left: 20px;
  width: 170px;
  top: 96px;
  margin: 0;
  text-align: center;
  font-family: var(--bc-f-table);
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
  color: var(--bc-c-ink);
}
/* 「料金一覧を見る」は非表示。場所は残す */
/* 余白68px＋ボタン高41px＝109pxを確保 */
.bc-root .bc-svc__more {
  visibility: hidden;
  margin-top: 68px;
}

/* ==========
   Blog
   ========== */
.bc-root .bc-blog {
  background: var(--bc-c-beige-bg);
}
.bc-root .bc-blog__inner {
  padding-block: 100px 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bc-root .bc-blog__box {
  margin-top: 56px;
  width: 100%;
  max-width: 856px;
  padding: 26px 71px 26px;
  background: var(--bc-c-white);
  border: 2px solid var(--bc-c-beige-bd);
  border-radius: 20px;
}
.bc-root .bc-blog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bc-root .bc-blog__label {
  display: flex;
  align-items: center;
  gap: 4.69px;
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--bc-c-ink);
}
.bc-root .bc-blog__label img {
  width: 31.31px;
  height: 30.34px;
  flex: none;
}

.bc-root .bc-blog__list {
  margin-top: 34px;
}
.bc-root .bc-blog__item {
  border-bottom: 1px solid var(--bc-c-beige-bd);
}
.bc-root .bc-blog__link {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 33px;
}
.bc-root .bc-blog__date {
  flex: none;
  font-family: var(--bc-f-base);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 18px;
  color: var(--bc-c-ink);
}
.bc-root .bc-blog__info {
  width: 64%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 33px;
}
.bc-root .bc-blog__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bc-root .bc-blog__ttl {
  font-family: var(--bc-f-base);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 18px;
  color: var(--bc-c-ink);
}
.bc-root .bc-blog__excerpt {
  font-family: var(--bc-f-base);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16px;
  line-height: 12px;
  color: var(--bc-c-ink);
}
.bc-root .bc-blog__mark {
  width: 10px;
  height: 10px;
  flex: none;
}

/* ==========
   Company
   ========== */
.bc-root .bc-company {
  background: var(--bc-c-white);
}
.bc-root .bc-company__inner {
  padding-block: 100px 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bc-root .bc-company__table {
  margin: 64px 0 0;
  width: 100%;
  max-width: 438px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bc-root .bc-crow {
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.bc-root .bc-crow__head {
  height: 40px;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bc-c-orange);
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--bc-c-white);
  text-align: center;
}
.bc-root .bc-crow__body {
  margin: 0;
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: var(--bc-c-white);
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: var(--bc-c-black);
  text-align: center;
}
.bc-root .bc-crow__lg {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
.bc-root .bc-crow__hv {
  font-weight: 900;
}
.bc-root .bc-crow__mail,
.bc-root .bc-crow__tel {
  text-decoration: underline;
}

/* ==========
   Google MAP
   ========== */
.bc-root .bc-map {
  position: relative;
  height: 504px;
  background: var(--bc-c-gray-map);
  overflow: hidden;
}
.bc-root .bc-map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========
   フッター（全ページ共通）
   ========== */
.bc-root .bc-footer {
  padding: 76px var(--bc-gutter) 15px;
  background: var(--bc-c-ink);
  color: var(--bc-c-white);
}
.bc-root .bc-footer__inner {
  width: 100%;
  max-width: var(--bc-w-footer);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
.bc-root .bc-footer__brand {
  flex: none;
}
.bc-root .bc-footer__logo img {
  display: block;
  width: 100px;
  height: 100px;
}
.bc-root .bc-footer__addr {
  margin-top: 23px;
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: var(--bc-c-white);
}
/* SNS未開設のため非表示 */
/* 要素を消すとフッター左列の高さが変わる */
.bc-root .bc-footer__sns {
  visibility: hidden;
  margin-top: 23px;
  display: flex;
  gap: 13px;
}
.bc-root .bc-footer__sns img {
  width: 33px;
  height: 33px;
}
.bc-root .bc-footer__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.bc-root .bc-footer__nav {
  margin-top: 10px;
}
.bc-root .bc-footer__btn {
  margin-top: 37px;
  width: 152px;
  height: 51px;
  padding: 16px 30px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bc-c-orange);
  border-radius: 30px;
  font-family: var(--bc-f-base);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  color: var(--bc-c-white);
  white-space: nowrap;
}
.bc-root .bc-footer__copy {
  margin-top: 0;
  font-family: var(--bc-f-base);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--bc-c-white);
  text-align: center;
}

.bc-root .bc-footer__policy {
  margin-top: 24px;
  font-family: var(--bc-f-base);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--bc-c-white);
  text-align: center;
}

/* ==========
   ページタイトル（下層共通）
   ========== */
.bc-root .bc-pagetitle {
  margin-top: 133px;
  display: flex;
  justify-content: center;
}
.bc-root .bc-pagetitle__body {
  position: relative;
  width: 288px;
  /* 伸縮させると猫アイコンと罫線の位置が動く */
  min-width: 288px;
}
.bc-root .bc-pagetitle__icon {
  position: absolute;
  right: 100%;
  margin-right: 30.08px;
  bottom: 4px;
  width: 46.92px;
  height: 83px;
}
.bc-root .bc-pagetitle__text {
  font-family: var(--bc-f-base);
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  color: var(--bc-c-ink);
  text-align: center;
  /* 箱288pxより長い題は1行のまま外へ伸びる */
  /* 348pxで折り返し猫アイコンとの重なりを防ぐ */
  /* 狭い画面では画面幅(左右16px残す)が先に効く */
  /* left と transform は幅に依らず中央に置く */
  width: max-content;
  max-width: min(calc(100vw - 32px), 348px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.bc-root .bc-pagetitle__rule {
  display: block;
  width: 288px;
  height: 1px;
  margin-top: 30px;
  background: var(--bc-c-black);
}

/* ==========
   リード文（下層共通）
   ========== */
.bc-root .bc-lead {
  width: 100%;
  max-width: 910px;
  margin: 66px auto 0;
  font-family: var(--bc-f-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.48px;
  text-align: center;
  color: var(--bc-c-black);
}

/* ==========
   対応業務パネル（下層共通）
   ========== */
.bc-root .bc-panel {
  --bc-grid-w: 697px;
  --bc-grid-gap-x: 41px;
  width: 100%;
  max-width: var(--bc-w-wide);
  margin: 70px auto 0;
  padding: 64px 6% 81px;
  background: var(--bc-c-orange);
  border-radius: 15px;
}
/* 4枚並ぶページ用。gap を 41→21 に詰める */
.bc-root .bc-panel--cols4 {
  --bc-grid-w: 883px;
  --bc-grid-gap-x: 21px;
  padding-inline: 54px;
}
.bc-root .bc-panel__title {
  font-family: var(--bc-f-body);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3.6px;
  line-height: 1.4;
  color: var(--bc-c-white);
  text-align: center;
  text-indent: 3.6px;
}
.bc-root .bc-panel__grid {
  max-width: var(--bc-grid-w); /* 3列:697 ／ 4列:883 */
  margin: 51px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px var(--bc-grid-gap-x);
}
.bc-root .bc-card {
  width: 205px;
  height: 205px;
  background: var(--bc-c-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bc-root .bc-card__figure {
  height: 148px;
  width: 100%;
  overflow: hidden;
  flex: none;
}
.bc-root .bc-card__figure img {
  width: 100%;
  height: auto;
}
.bc-root .bc-card__label {
  font-family: var(--bc-f-base);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bc-c-ink);
  text-align: center;
}

/* ==========
   見出し＋オレンジバー
   ========== */
.bc-root .bc-heading {
  text-align: center;
}
.bc-root .bc-heading__text {
  display: inline-block;
  font-family: var(--bc-f-heading);
  font-size: 29px;
  font-weight: 400;
  line-height: 35px;
  color: var(--bc-c-black);
}
.bc-root .bc-heading__bar {
  display: block;
  width: 120px;
  height: 5.71px;
  margin: calc(var(--bc-bar-gap, 15px) - 2.855px) auto 0;
  background: var(--bc-c-orange);
}

/* ==========
   料金表
   ========== */
.bc-root .bc-table {
  width: 100%;
  max-width: var(--bc-w-narrow);
  margin: var(--bc-table-gap, 20px) auto 0;
  table-layout: fixed;
  font-family: var(--bc-f-table);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bc-c-black);
}
.bc-root .bc-table th,
.bc-root .bc-table td {
  height: 83px;
  border: var(--bc-bd-table);
  vertical-align: middle;
  /* 消すと外部指定の14pxに負けて文字が縮む */
  /* 直値にしないのはSPの20px指定を残すため */
  font-size: inherit;
}
.bc-root .bc-table th {
  width: 69.0476%;
  padding: 0 23px;
  background: var(--bc-c-white);
  font-weight: 400;
  text-align: left;
}
.bc-root .bc-table td {
  width: 30.9524%;
  padding: 0 8px;
  background: var(--bc-c-beige-cell);
  text-align: center;
}
.bc-root .bc-price--first {
  margin-top: 163px;
  --bc-bar-gap: 15px;
  --bc-table-gap: 20px;
}
.bc-root .bc-price--next {
  margin-top: 123px;
  --bc-bar-gap: 22.14px;
  --bc-table-gap: 35.72px;
}

/* ==========
   料金：表を使わない文章版
   ========== */
.bc-root .bc-price__text {
  width: 100%;
  max-width: var(--bc-w-narrow);
  margin: var(--bc-table-gap, 20px) auto 0;
  font-family: var(--bc-f-table);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bc-c-black);
  text-align: center;
}

/* ==========
   注釈
   ========== */
.bc-root .bc-note {
  width: 100%;
  max-width: var(--bc-w-narrow);
  margin: 26px auto 0;
  font-family: var(--bc-f-heading);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bc-c-red);
}

/* ==========
   サービスの流れ（アコーディオン）
   ========== */
.bc-root .bc-flow {
  /* 見出しの肉球ぶんだけ本文を字下げして揃える */
  --bc-flow-indent: 92.86px;
  width: 100%;
  max-width: var(--bc-w-narrow);
  margin: 169px auto 0;
}
.bc-root .bc-flow__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 11.25px 22.86px;
  border-bottom: var(--bc-bd-rule);
  cursor: pointer;
  text-align: left;
}
.bc-root .bc-flow__label {
  display: flex;
  align-items: center;
  gap: 20px;
}
.bc-root .bc-flow__paw {
  width: 50px;
  height: 49px;
  flex: none;
}
.bc-root .bc-flow__text {
  font-family: var(--bc-f-heading);
  font-size: 29px;
  font-weight: 400;
  line-height: 35px;
  color: var(--bc-c-black);
}
/* 素材は▼の向き。閉じているときだけ反転させる */
.bc-root .bc-flow__mark {
  width: 28.57px;
  height: 28.57px;
  flex: none;
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}
.bc-root .bc-flow__head[aria-expanded="true"] .bc-flow__mark {
  transform: rotate(0deg);
}
/* 0fr→1fr で中身の高さを測らずに開閉できる */
.bc-root .bc-flow__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  /* 閉じるときだけ最後まで見せてから消す */
  transition:
    grid-template-rows 0.3s ease,
    visibility 0s linear 0.3s;
  font-family: var(--bc-f-base);
  font-size: 16px;
  line-height: 1.8;
}
.bc-root .bc-flow__head[aria-expanded="true"] + .bc-flow__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 0.3s ease,
    visibility 0s;
}
.bc-root .bc-flow__inner {
  /* grid の子は既定で縮まないので明示する */
  min-height: 0;
  padding: 24px 0 0;
}
/* 業務名。小項目の前に置く行 */
.bc-root .bc-flow__group {
  padding: 16px 0 16px var(--bc-flow-indent);
  border-bottom: var(--bc-bd-rule);
  font-weight: 700;
  font-size: 18px;
}
/* 2つ目以降の業務名の前を1行ぶん空ける */
.bc-root .bc-flow__group:not(:first-child) {
  margin-top: 29px;
}
.bc-root .bc-flow__step {
  padding: 16px 0 16px var(--bc-flow-indent);
  border-bottom: var(--bc-bd-rule-lt);
}
.bc-root .bc-flow__step-title {
  font-weight: 700;
}
.bc-root .bc-flow__step-body {
  color: var(--bc-c-gray);
}
/* 最後の行の中に入れる。罫線と字下げは行が持つ */
.bc-root .bc-flow__note {
  margin-top: 8px;
  font-size: 14px;
  color: var(--bc-c-gray);
}
.bc-root .bc-flow__empty {
  padding: 16px 0 16px var(--bc-flow-indent);
  border-bottom: var(--bc-bd-rule-lt);
}

/* ##########
   メディアクエリ（末尾に集約）
   ########## */
/* ---- 1280px以上 ---- */
@media (min-width: 1280px) {
  .bc-root .bc-header__inner {
    padding: 0 54px 0 22px;
  }
}

/* ---- 1024px以下 ---- */
@media (max-width: 1024px) {
  .bc-root .bc-footer__inner {
    justify-content: center;
    gap: 20%;
  }
  .bc-root .bc-footer__main {
    flex: none;
  }
  .bc-root .bc-footer .bc-nav__list {
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
  }
  .bc-root .bc-footer .bc-nav__item + .bc-nav__item::before {
    content: none;
  }
}

/* ---- 949px以下 ---- */
@media (max-width: 949px) {
  .bc-root .bc-features__grid {
    margin-top: 50px;
  }
  .bc-root .bc-feature {
    margin-top: 50px;
  }
  .bc-root .bc-cta {
    margin-top: 80px;
  }
  .bc-root .bc-cta__title {
    font-size: 16px;
  }
  .bc-root .bc-cta__actions {
    flex-direction: column;
    align-items: center;
  }
  .bc-root .bc-btn {
    max-width: 100%;
  }
  .bc-root .bc-table {
    font-size: 20px;
  }
  .bc-root .bc-flow {
    --bc-flow-indent: 70px;
  }
  .bc-root .bc-flow__head {
    padding: 0 0 22.86px 0;
  }
  .bc-root .bc-flow__label {
    gap: 20px;
  }
  .bc-root .bc-flow__text {
    font-size: 20px;
  }
  .bc-root .bc-cta__title {
    line-height: 1.4;
  }
}

/* ---- 899px以下：ヘッダーをハンバーガーに ---- */
@media (max-width: 899px) {
  .bc-root .bc-header {
    height: 57px;
  }
  .bc-root .bc-header__title {
    font-size: 24px;
  }
  .bc-root .bc-header__paw {
    width: 28px;
    height: 27.4px;
  }
  .bc-root .bc-header__toggle {
    display: flex;
  }
  .bc-root .bc-header .bc-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--bc-c-beige-bg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  }
  .bc-root .bc-header--open .bc-nav {
    display: block;
  }
  .bc-root .bc-header .bc-nav__list {
    flex-direction: column;
    align-items: stretch;
  }
  .bc-root .bc-header .bc-nav__item {
    display: block;
  }
  .bc-root .bc-header .bc-nav__item + .bc-nav__item::before {
    content: none;
  }
  .bc-root .bc-header .bc-nav__link {
    display: block;
    padding: 16px 26.4px;
    line-height: 1.4;
    border-top: 1px solid rgba(56, 56, 56, 0.15);
  }
  .bc-root .bc-footer__inner {
    gap: 10%;
  }
}

/* ---- 600px以下：blog を段積み ---- */
/* 日付をタイトルの上へ。padding も縮める */
@media (max-width: 600px) {
  .bc-root .bc-hero__stage > *,
  .bc-root .bc-about__stage > * {
    --u: calc(100cqw / 574);
  }
  .bc-root .bc-header {
    height: 57px;
  }
  .bc-root .bc-header__title {
    font-size: 19px;
  }
  .bc-root .bc-hero__stage {
    aspect-ratio: 574 / 990;
    background: url("../img/top/SP__kv.png") center top / 100% 100% no-repeat;
  }
  .bc-root .bc-hbtn {
    width: calc(234.2 * var(--u));
    height: calc(59 * var(--u));
    padding-inline: calc(12 * var(--u));
    border-radius: calc(29.5 * var(--u));
    font-size: max(calc(18.7 * var(--u)), 11px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .bc-root .bc-hero__banner {
    left: calc(42 * var(--u));
    top: calc(760 * var(--u));
    width: calc(489 * var(--u));
  }
  .bc-root .bc-hero__copy {
    left: calc(67 * var(--u));
    top: calc(80 * var(--u));
    font-size: max(calc(35 * var(--u)), 22px);
    font-weight: 700;
    line-height: 1.5143;
    letter-spacing: 0.1em;
  }
  .bc-root .bc-hero__lead {
    position: absolute;
    left: calc(67 * var(--u));
    top: calc(209.85 * var(--u));
    font-size: max(calc(17.67 * var(--u)), 11px);
    line-height: 1.1885;
  }
  .bc-root .bc-about__stage {
    aspect-ratio: 574 / 850;
    background: url("../img/top/SP__about.png") center top / 100% 100% no-repeat;
  }
  .bc-root .bc-hero__actions {
    left: calc(39 * var(--u));
    top: calc(643 * var(--u));
    gap: calc(26.66 * var(--u));
  }
  .bc-root .bc-hbtn--line {
    gap: calc(5.41 * var(--u));
  }
  .bc-root .bc-hbtn--line .bc-hbtn__icon {
    width: calc(33 * var(--u));
    height: calc(33 * var(--u));
  }
  .bc-root .bc-hbtn--quote {
    gap: calc(5.41 * var(--u));
  }
  .bc-root .bc-hbtn--quote .bc-hbtn__icon {
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
  }
  .bc-root .bc-about__head {
    position: absolute;
    left: 50%;
    top: calc(45 * var(--u));
  }
  .bc-root .bc-about__head .bc-sechead__en {
    font-size: max(
      calc(25 * var(--u)),
      16px
    ); /* 下限16px。367px以下でここに張り付く */
    line-height: 1;
  }
  .bc-root .bc-about__head .bc-sechead__ja {
    font-size: max(
      calc(25 * var(--u)),
      16px
    ); /* 下限16px。367px以下でここに張り付く */
    line-height: 1;
  }
  .bc-root .bc-about__head.bc-sechead {
    gap: calc(11 * var(--u));
  }
  .bc-root .bc-about__text {
    position: absolute;
    left: calc(50 * var(--u));
    top: calc(156 * var(--u));
    width: calc(473 * var(--u));
    font-size: max(
      calc(16 * var(--u)),
      12px
    ); /* 下限12px。431px以下でここに張り付く */
    line-height: 1.5625;
    letter-spacing: 0.05em;
  }
  .bc-root .bc-blog__link {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .bc-root .bc-blog__date {
    flex-basis: 100%;
  }
  .bc-root .bc-blog__info {
    width: 100%;
  }
  .bc-root .bc-blog__box {
    padding-inline: 24px;
  }
}

/* ---- 549px以下 ---- */
/* 見出しの猫を隠し、About本文を短縮版にする */
@media (max-width: 549px) {
  .bc-root .bc-pagetitle__icon {
    display: none;
  }
  .bc-root .bc-about__text--full {
    display: none;
  }
  .bc-root .bc-about__text--sp {
    display: block;
  }
}

/* ==========
   WordPress用の追記
   ========== */
/* ここだけ .bc-root の外。他は全て配下に置く */
/* 対象ページ限定で読むので他へは波及しない */

body {
  /* 残すと全幅の帯の左右に8pxの隙間が出る */
  margin: 0;
}

#page_top {
  /* 親テーマが出す「トップへ戻る」を隠す */
  /* PHP側では外さない＝既存ページに影響させない */
  display: none !important;
}