@charset "UTF-8";
/* ==========================================================================
   common.css — 全ページ共通（デザイントークン / ベース / ヘッダー / フッター）
   方針: PCはデザイン通りの固定幅(--w-base、1320px)。基準幅未満は横スクロール（リキッドにしない）。
         SP(≤768px)のみ @media で可変。単位はpx（デザイン2xの1/2実寸）。
   ========================================================================== */

/* ---- デザイントークン --------------------------------------------------- */
:root {
  /* カラー */
  --c-black: #000000;
  /* 黒（本文・見出し） */
  --c-navy: #022952;
  /* ナビ等の濃紺文字 */
  --c-blue: #0074b8;
  /* 水色（アクセント/リンク/CTA） */
  --c-skyblue: #0474DF;
  --c-green: #06c755;
  /* LINE緑 */
  --c-bg: #f2f4f6;
  /* 背景グレー */
  --c-gray: #e5e8eb;
  /* 中間グレー */
  --c-line: #d4d9dd;
  /* 線・やや濃いグレー */
  --c-crumb: #939ba2;
  /* パンくずグレー */
  --c-deepblue: #00406C;
  /* タグ等のホバー色 */
  --c-red: #c8161d;
  /* お客様の声の一言。フォームのエラー色（#c00）とは用途を分ける */
  --c-white: #ffffff;

  /* タイポ（デザイン2x → CSS実寸 = ÷2） */
  --fz-pagetitle: 40px;
  /* ページタイトル */
  --fz-h1: 35px;
  --fz-h2: 27px;
  --fz-h3: 22px;
  --fz-body: 17px;
  /* 本文 */
  --fz-min: 14px;
  /* 最小 */

  /* レイアウト */
  --w-base: 1320px;
  /* PC基準幅（固定） */
  --w-inner: 1102px;
  /* 標準コンテンツ内幅（--w-base とは独立の固定値。旧1500px基準でのPSB実測: 1500 - 199*2）*/
  --gap-section: 125px;
  /* コンテンツ間（250/2） */
  --gap-footer: 150px;
  /* フッター上（350/2） */
  --ff-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --ff-barlow: "Barlow", sans-serif;
  /* DIN2014の代替（英数字ディスプレイ） */
}

/* DIN代替：数字などに適用 */
.font-barlow {
  font-family: var(--ff-barlow);
}

/* ---- ベース ------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* ページ内リンクで飛んだ時に sticky ヘッダー(100px)で隠れないよう、ジャンプ先の上に余白を確保する */
  scroll-padding-top: 100px;
}

body {
  min-width: var(--w-base);
  /* 基準幅未満は横スクロール */
  font-family: var(--ff-base);
  font-size: var(--fz-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  /* vw基準で画面端まで伸びる背景（p-mtd-row 等）がbody幅ぴったりの場合にはみ出さないよう、
     横方向をスクロール扱いにする。スクロールバーを常時表示させてページ間で表示幅がずれないよう、
     clip ではなく scroll を使う（hidden だと sticky ヘッダーが壊れるので不可）。 */
  overflow-x: scroll;
}

/* ページ全体：全幅（body min-widthで基準幅未満は横スクロール）。
   フルブリード帯（ヘッダー/フッター/レビュー/青）は100%、コンテンツは各inner内で中央寄せ */
.l-page {
  width: 100%;
  overflow-x: clip;
}

/* 画像/アイコン用マスク（PSD書き出しアイコンを任意色で使う） */
.c-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.c-mask--tel {
  -webkit-mask-image: url(../img/common/icon_tel.png);
  mask-image: url(../img/common/icon_tel.png);
}
.c-mask--arrow {
  -webkit-mask-image: url(../img/common/icon_arrow.png);
  mask-image: url(../img/common/icon_arrow.png);
}
.c-mask--appraisal {
  -webkit-mask-image: url(../img/common/icon_appraisal.png);
  mask-image: url(../img/common/icon_appraisal.png);
}
.c-mask--line {
  -webkit-mask-image: url(../img/common/icon_line.png);
  mask-image: url(../img/common/icon_line.png);
}

/* 標準コンテンツ内幅 */
.l-inner {
  width: var(--w-inner);
  margin-inline: auto;
}

img {
  width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.u-blue {
  color: var(--c-blue);
}
.u-sp-only {
  display: none;
}
.u-pc-only {
  display: inline;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.l-header {
  height: 100px;
  background: var(--c-white);
  box-shadow: 1px 0 8px #00000021;
  position: sticky;
  top: 0;
  z-index: 300;
}
.l-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100px;
}
.l-header__logo {
  width: 142px;
  margin-left: 20px;
  flex: none;
}
.l-header__logo img {
  width: 142px;
  transition: transform .2s ease;
}
.l-header__logo:hover img {
  transform: scale(1.04);
}

/* PCでは drawer は透過（子がヘッダーのflexに直接並ぶ）／ハンバーガー非表示 */
.l-header__drawer {
  display: contents;
}
.l-header__hamburger {
  display: none;
}

/* グローバルナビ */
.l-gnav {
  margin-left: 32px;
}
.l-gnav__list {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* SP のドロワー専用の項目（トップへのリンク）。PC のグローバルナビには出さない */
.l-gnav__item--sp {
  display: none;
}
.l-gnav__item {
  position: relative;
}
.l-gnav__item>a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fz-min);
  font-weight: 700;
  color: var(--c-black);
  white-space: nowrap;
  padding: 38px 0;
  /* ホバー領域を確保 */
}
.l-gnav__arrow {
  width: 12px;
  height: 7px;
  color: var(--c-black);
  transition: transform .2s;
}

/* プルダウンを持たない単独リンクのみ、下線が左から出て右へ消えるホバー演出 */
.l-gnav__item:not(:has(.l-gnav__sub))>a {
  position: relative;
}
.l-gnav__item:not(:has(.l-gnav__sub))>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 36px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.l-gnav__item:not(:has(.l-gnav__sub))>a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* プルダウン（矢印付き項目のホバーで表示） */
.l-gnav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  padding: 6px 0;
}
.l-gnav__item:hover .l-gnav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.l-gnav__item:hover .l-gnav__arrow {
  transform: rotate(180deg);
}
.l-gnav__sub a {
  display: block;
  font-size: var(--fz-min);
  font-weight: 500;
  color: var(--c-black);
  padding: 12px 20px;
  white-space: nowrap;
}
.l-gnav__sub a:hover {
  background: var(--c-bg);
  opacity: 1;
}

/* TEL */
/* タップで発信できるよう <a href="tel:"> にしている（見た目は変えない） */
.l-header__tel {
  display: flex;
  color: inherit;
  text-decoration: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0 24px;
}
/* ナビとTELの間の縦区切り線 */
.l-header__tel::before {
  content: "";
  flex: none;
  width: 2px;
  height: 34px;
  background: var(--c-line);
  margin-right: 16px;
}
.l-header__tel-icon {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: var(--c-black);
  display: grid;
  place-items: center;
  flex: none;
}
.l-header__tel-icon .c-mask {
  width: 15px;
  height: 26px;
  color: #fff;
}
.l-header__tel-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.l-header__tel-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-black);
  line-height: 1.1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.l-header__tel-note {
  font-size: 11px;
  color: var(--c-black);
  white-space: nowrap;
}

/* 右端ボタン（フル高さ） */
.l-header__btns {
  display: flex;
  height: 100px;
  flex: none;
}
.l-header__btn {
  width: 116px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--fz-min);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  text-align: center;
  border: 3px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s;
}
.l-header__btn img {
  width: auto;
  height: 40px;
}
.l-header__btn-icon {
  width: 48px;
  height: 40px;
}
.l-header__btn--line {
  background: var(--c-green);
  border-color: var(--c-green);
}
.l-header__btn--visit {
  background: var(--c-blue);
  border-color: var(--c-blue);
}
.l-header__btn--line:hover {
  background: #fff;
  color: var(--c-green);
  opacity: 1;
}
.l-header__btn--visit:hover {
  background: #fff;
  color: var(--c-blue);
  opacity: 1;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.l-footer {
  margin-top: var(--gap-footer);
}
.l-footer__main {
  display: flex;
  background: var(--c-blue);
  color: #fff;
}
.l-footer__left {
  width: 50%;
  min-width: 740px;
  padding: 120px 0 60px 5%;
  box-sizing: border-box;
}
.l-footer__right {
  width: 50%;
  position: relative;
  background-image: url(../img/common/footer_city.jpg);
  background-size: cover;
  background-position: center;
}
.l-footer__promo {
  position: relative;
  padding: 230px 0 0 10%;
}
.l-footer__promo-ttl {
  font-size: var(--fz-body);
  font-weight: 700;
  line-height: 1.75;
  margin-bottom: 20px;
}

/* フッターナビ */
.l-fnav {
  display: flex;
  gap: 78px;
}
.l-fnav__col {
  flex: none;
}
.l-fnav__ttl {
  font-size: var(--fz-h3);
  font-weight: 700;
  margin-bottom: 26px;
  white-space: nowrap;
}
.l-fnav__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.l-fnav__list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: var(--fz-body);
}
.l-fnav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.l-fnav__list a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* フッター下部 */
.l-footer__sub {
  margin-top: 40px;
}
.l-footer__policy {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fz-min);
  margin-bottom: 30px;
}
.l-footer__policy>a {
  position: relative;
  display: inline-block;
}
.l-footer__policy>a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}
.l-footer__policy>a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.l-footer__sns {
  display: flex;
  align-items: center;
  gap: 18px;
}
.l-footer__sns a {
  width: auto;
  height: 25px;
  display: block;
}
.l-footer__sns img {
  width: auto;
  height: 25px;
  display: block;
  transition: transform .2s ease;
}
.l-footer__sns a:hover img {
  transform: scale(1.2);
}
.l-footer__divider {
  width: 656px;
  height: 1px;
  background: rgba(255, 255, 255, .4);
  margin-bottom: 30px;
}
.l-footer__company-logo {
  display: inline-block;
  width: 154px;
  margin-bottom: 16px;
}
.l-footer__company-logo img {
  width: 100%;
  display: block;
  transition: transform .2s ease;
}
.l-footer__company-logo:hover img {
  transform: scale(1.04);
}
.l-footer__address {
  font-size: var(--fz-min);
  margin-bottom: 4px;
}
/* 宅建業免許番号（宅建業法 第50条の表示義務） */
.l-footer__license {
  font-size: 12px;
  margin-bottom: 20px;
  opacity: .85;
}
.l-footer__tel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.l-footer__tel-num {
  font-size: 25px;
  font-weight: 700;
}
.l-footer__tel-note {
  font-size: 12px;
}

/* フッターCTAボタン（LINE / 無料査定）: サイズ・配色反転は .c-cta-btn 共通コンポーネントを使用し、ここでは縦積み用の余白のみ追加 */
.c-footer-btn {
  margin-bottom: 20px;
}

/* コピーライト */
.l-footer__cr {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: var(--fz-min);
  padding: 16px 0;
}

/* ==========================================================================
   共通パーツ：ボタン
   ========================================================================== */
/* 黒い角丸「詳しくみる」ボタン */
.c-btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 251px;
  height: 52px;
  padding: 0 40px;
  background: var(--c-black);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  border: 2px solid var(--c-black);
  transition: background-color .2s, color .2s;
}
.c-btn-more:hover {
  background: #fff;
  color: var(--c-black);
}

/* ページ内アンカーへ飛ぶボタン群（methods/flow/faq で共通使用）。
   幅・高さ・gap・font-size はページごとの実測値差があるため、ページ個別CSSで上書きする */
.c-anchor-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.c-anchor-nav__btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 296px;
  height: 76px;
  border: 3px solid var(--c-blue);
  color: var(--c-blue);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .03em;
  transition: background-color .2s, color .2s;
}
.c-anchor-nav__btn:hover {
  background: var(--c-blue);
  color: #fff;
}
.c-anchor-nav__arrow {
  position: absolute;
  right: 28px;
  top: 50%;
  width: 17px;
  height: 11px;
  margin-top: -5.5px;
}

/* scroll-hint（vendor）のオーバーレイが、position:sticky の固定列より背面に回るのを防ぐ */
.js-scrollable .scroll-hint-icon-wrap {
  z-index: 2;
}

.c-btn-more--sm {
  min-width: 150px;
  height: 38px;
  padding: 0 24px;
  font-size: 15px;
}

.c-btn-more--blue {
  background: var(--c-blue);
  border-color: var(--c-blue);
}
.c-btn-more--blue:hover {
  background: #fff;
  color: var(--c-blue);
}

/* セクション見出し画像の共通ラッパ（中央寄せ） */
.c-sec-ttl {
  text-align: center;
}
.c-sec-ttl img {
  display: inline-block;
  width: auto;
}

/* 星評価（CSSのみ・半分対応） */
.c-stars {
  position: relative;
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  color: var(--c-line);
  white-space: nowrap;
}
.c-stars::before {
  content: "★★★★★";
  letter-spacing: 3px;
}
.c-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5b301;
}
.c-stars__fill::before {
  content: "★★★★★";
  letter-spacing: 3px;
}

/* アバター（プレースホルダ） */
.c-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-gray);
  display: grid;
  place-items: center;
  flex: none;
}
.c-avatar svg {
  width: 34px;
  height: 34px;
  fill: #b7bfc6;
}

/* ==========================================================================
   共通パーツ：会社案内バナー（会社案内/FAQ/お問い合わせ）— 全ページ共通
   ========================================================================== */
.c-access {
  width: 1200px;
  margin: 125px auto 0;
}
.c-access__main,
.c-access__row a {
  position: relative;
  display: block;
  overflow: hidden;
}
.c-access__main img,
.c-access__row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.c-access a:hover img {
  transform: scale(1.04);
}
/* 縦横比はPSB実測（会社案内バナー=2648:720、FAQ/問い合わせ=1300:580 の半分）。画像は縦に余裕を持たせて書き出し、はみ出しはobject-fit:coverで吸収 */
.c-access__main {
  aspect-ratio: 1324 / 360;
}
.c-access__row {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}
.c-access__row a {
  width: calc((100% - 24px) / 2);
  aspect-ratio: 650 / 290;
}
.c-access__label {
  position: absolute;
  top: 24px;
  left: 30px;
  color: var(--c-white);
  font-size: 37px;
  font-weight: 700;
  line-height: 1.4;
}

/* ==========================================================================
   共通パーツ：大型CTA（★CTA）— ページ内で複数回使用
   ========================================================================== */
.c-cta {
  padding: 125px 0 0;
}
.c-cta.c-cta-topcontent {
  padding: 100px 0;
}
.c-cta__box {
  width: 1200px;
  margin-inline: auto;
  border: 5px solid var(--c-black);
  background: var(--c-bg);
}
.c-cta__ttl {
  background: var(--c-bg);
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.4;
  padding: 26px 20px;
  border-bottom: 5px solid var(--c-black);
}
.c-cta__body {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.c-cta__text {
  flex: 1;
  padding: 42px 30px 42px 52px;
}
.c-cta__lead {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.9;
}
.c-cta__btns {
  display: flex;
  gap: 18px;
  margin-top: 34px;
}
.c-cta__tel {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 362px;
  height: 71px;
  border: 3px solid var(--c-blue);
  background: #fff;
  justify-content: center;
  transition: background-color .2s, border-color .2s;
}
.c-cta__tel-icon {
  width: 24px;
  height: 40px;
  color: var(--c-blue);
  transition: color .2s;
}
.c-cta__tel-text {
  display: flex;
  flex-direction: column;
}
.c-cta__tel-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1.15;
  letter-spacing: .02em;
  transition: color .2s;
}
.c-cta__tel-note {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-blue);
  transition: color .2s;
}
.c-cta__tel:hover {
  background: var(--c-blue);
  opacity: 1;
}
.c-cta__tel:hover .c-cta__tel-icon,
.c-cta__tel:hover .c-cta__tel-num,
.c-cta__tel:hover .c-cta__tel-note {
  color: #fff;
}
/* c-cta-btn: 「ラベル＋矢印アイコン」型ボタンの共通コンポーネント（CTA内の無料査定ボタン／フッターのLINE・無料査定ボタンで共用） */
.c-cta-btn {
  display: flex;
  align-items: center;
  width: 362px;
  height: 71px;
  padding: 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border: 3px solid transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
.c-cta-btn__label {
  flex: 1;
  text-align: center;
}
.c-cta-btn__arrow {
  width: 48px;
  height: 48px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
  transition: background-color .2s;
}
.c-cta-btn__arrow .c-mask {
  width: 22px;
  height: 13px;
  transition: color .2s;
}
.c-cta-btn--blue {
  background: var(--c-blue);
  border-color: var(--c-blue);
}
.c-cta-btn--blue .c-cta-btn__arrow .c-mask {
  color: var(--c-blue);
}
.c-cta-btn--blue:hover {
  background: #fff;
  color: var(--c-blue);
  opacity: 1;
}
.c-cta-btn--green {
  background: var(--c-green);
  border-color: var(--c-green);
}
.c-cta-btn--green .c-cta-btn__arrow .c-mask {
  color: var(--c-green);
}
.c-cta-btn--green:hover {
  background: #fff;
  color: var(--c-green);
  opacity: 1;
}
.c-cta-btn--black {
  background: var(--c-black);
  border-color: var(--c-black);
}
.c-cta-btn--black .c-cta-btn__arrow .c-mask {
  color: var(--c-black);
}
.c-cta-btn--black:hover {
  background: #fff;
  color: var(--c-black);
  opacity: 1;
}
.c-cta-btn--blue:hover .c-cta-btn__arrow {
  background: var(--c-blue);
}
.c-cta-btn--green:hover .c-cta-btn__arrow {
  background: var(--c-green);
}
.c-cta-btn--black:hover .c-cta-btn__arrow {
  background: var(--c-black);
}
.c-cta-btn:hover .c-cta-btn__arrow .c-mask {
  color: #fff;
}
.c-cta__photo {
  width: 360px;
  flex: none;
  align-self: stretch;
}
.c-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   関連ページ（parts/relates.php）
   元は support ページ専用だったもの。8ページで共用するため共通化した。
   1ページあたり2件で、PC は横2列・SP は1列。
   ========================================================================== */
.c-relates {
  margin-top: 117px;
}
.c-relates__ttl {
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  margin-bottom: 66px;
}
.c-relates__row {
  width: 1002px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  column-gap: 29px;
  row-gap: 40px;
}
.c-relate {
  display: block;
  width: calc((100% - 29px) / 2);
}
.c-relate__img {
  display: block;
  width: 100%;
  aspect-ratio: 486 / 201;
  overflow: hidden;
}
.c-relate__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.c-relate:hover {
  opacity: 1;
}
.c-relate:hover .c-relate__img img {
  transform: scale(1.05);
}
.c-relate__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  background: var(--c-bg);
}
.c-relate__label {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .07em;
}
.c-relate__arrow {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 21px;
  height: 12px;
  color: var(--c-black);
  transition: transform .2s;
}
.c-relate:hover .c-relate__arrow {
  transform: translateY(-50%) translateX(4px);
}

/* ==========================================================================
   SP（≤768px）— 追ってレスポンシブ調整
   ========================================================================== */
@media (max-width: 768px) {
  /* 関連ページ */
  .c-relates {
    margin-top: 70px;
  }
  .c-relates__ttl {
    font-size: 22px;
    margin-bottom: 30px;
  }
  .c-relates__row {
    width: 90%;
    flex-direction: column;
    row-gap: 20px;
  }
  .c-relate {
    width: 100%;
  }
  .c-relate__bar {
    height: 56px;
  }
  .c-relate__label {
    font-size: 18px;
  }
  .c-relate__arrow {
    right: 24px;
  }

  html {
    scroll-padding-top: 60px;
    /* SPヘッダー高さ */
  }
  /* overflow-x: hidden だと祖先要素の overflow 計算により .l-header の position: sticky が効かなくなるため clip を使う */
  body {
    min-width: 0;
    overflow-x: clip;
  }
  .l-page {
    width: 100%;
    overflow-x: clip;
  }
  .l-inner {
    width: 90%;
  }

  /* ---- ヘッダー（ハンバーガー＋ドロワー） ---- */
  .l-header {
    height: 60px;
  }
  .l-header__inner {
    width: 100%;
    height: 60px;
    padding: 0 16px;
  }
  /* ドロワー展開中は背景スクロールをロック */
  body.is-menu-open {
    overflow: hidden;
  }
  .l-header__logo {
    width: 116px;
    margin-left: 0;
  }
  .l-header__logo img {
    width: 116px;
  }

  .l-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-left: auto;
    flex: none;
  }
  .l-header__hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--c-navy);
    margin: 0 auto;
    transition: transform .3s, opacity .3s;
  }
  body.is-menu-open .l-header__hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.is-menu-open .l-header__hamburger span:nth-child(2) {
    opacity: 0;
  }
  body.is-menu-open .l-header__hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .l-header__drawer {
    display: block;
    position: fixed;
    top: 60px;
    right: 0;
    width: 86%;
    max-width: 340px;
    height: calc(100vh - 60px);
    background: #fff;
    border-left: 1px solid var(--c-line);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    padding: 24px 24px 60px;
    z-index: 200;
  }
  body.is-menu-open .l-header__drawer {
    transform: none;
  }

  .l-gnav {
    margin-left: 0;
  }
  .l-gnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .l-gnav__item--sp {
    display: block;
  }
  .l-gnav__item>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--c-line);
  }
  .l-gnav__item:not(:has(.l-gnav__sub))>a::after {
    content: none;
  }
  /* SP：プルダウンはオーバーレイではなくアコーディオン（タップ展開） */
  .l-gnav__sub {
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    min-width: 0;
    padding: 0;
    z-index: auto;
    opacity: 1;
    visibility: visible;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: var(--c-bg);
  }
  /* PCホバー用のtransform/位置をSPで無効化（左ズレ防止） */
  .l-gnav__item:hover .l-gnav__sub {
    transform: none;
    left: auto;
  }
  .l-gnav__item.is-open .l-gnav__sub {
    max-height: 500px;
  }
  .l-gnav__item.is-open .l-gnav__arrow {
    transform: rotate(180deg);
  }
  .l-gnav__sub a {
    padding: 13px 24px;
    border-bottom: 1px solid var(--c-line);
    font-size: 15px;
  }
  .l-gnav__sub a:last-child {
    border-bottom: 0;
  }
  .l-header__tel {
    margin-left: 0;
    padding: 32px 0 0;
    justify-content: center;
  }
  .l-header__tel::before {
    display: none;
  }
  .l-header__btns {
    display: flex;
    height: auto;
    margin-top: 28px;
    gap: 10px;
  }
  .l-header__btn {
    width: 50%;
    height: 86px;
    padding: 3px;
    border-radius: 6px;
    gap: 2px;
  }
  .l-header__btn-icon {
    width: 36px;
    height: 30px;
  }

  /* ---- フッター ---- */
  .u-sp-only {
    display: inline;
  }
  .u-pc-only {
    display: none;
  }
  .l-footer {
    margin-top: 90px;
  }
  .l-footer__main {
    flex-direction: column;
  }
  .l-footer__left {
    width: 100%;
    min-width: 100%;
    padding: 50px 6% 40px;
  }
  .l-footer__right {
    width: 100%;
    min-height: 320px;
  }
  .l-footer__promo {
    padding: 60px 6%;
  }
  .l-fnav {
    flex-wrap: wrap;
    gap: 24px 32px;
  }
  .l-fnav__ttl {
    font-size: 18px;
    margin-bottom: 14px;
  }
  .l-fnav__list {
    gap: 0;
  }
  .l-fnav__list a {
    font-size: 15px;
    padding: 4px 0;
  }
  .l-fnav__list a::after {
    bottom: 2px;
  }
  .l-footer__divider {
    width: 100%;
  }
  /* c-cta-btn 共通コンポーネント（CTA内の無料査定ボタン／フッターのLINE・無料査定ボタン） */
  .c-cta-btn {
    width: 100%;
    height: 64px;
    max-width: 360px;
    font-size: 16px;
    margin-inline: auto;
  }
  .c-cta-btn__arrow {
    width: 40px;
    height: 40px;
  }
  .c-cta-btn__arrow .c-mask {
    width: 18px;
    height: 11px;
  }

  /* ---- 会社案内バナー（SPは3つとも16:9で統一） ---- */
  .c-access {
    width: 90%;
    margin-top: 80px;
  }
  .c-access__main {
    aspect-ratio: 16 / 9;
  }
  .c-access__row {
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }
  .c-access__row a {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .c-access__label {
    top: 20px;
    left: 20px;
    font-size: 22px;
  }

  /* ---- CTA ---- */
  .c-cta {
    padding: 60px 0 0;
  }
  .c-cta__box {
    width: 90%;
    border-width: 4px;
  }
  .c-cta__ttl {
    font-size: 20px;
    padding: 18px 16px;
    border-bottom-width: 4px;
  }
  .c-cta__body {
    flex-direction: column;
    padding: 0;
  }
  .c-cta__text {
    padding: 28px 6%;
  }
  .c-cta__lead {
    font-size: 15px;
  }
  .c-cta__btns {
    flex-direction: column;
    gap: 12px;
  }
  .c-cta__tel {
    width: 100%;
    height: 64px;
    max-width: 360px;
    margin-inline: auto;
  }
  .c-cta__tel-icon {
    width: 18px;
    height: 35px;
  }
  .c-cta__tel-num {
    font-size: 18px;
  }
  .c-cta__tel-note {
    font-size: 12px;
  }
  .c-cta__photo {
    width: 100%;
    height: 220px;
  }
}

/* ==========================================================================
   下層ページ共通（骨組み）
   ========================================================================== */
/* 上余白は PSB 実測（ヘッダー下端 101px → パンくずの文字上端 174.5px）に合わせた値 */
.l-lower {
  padding: 68px 0 0;
}
.l-lower__inner {
  width: var(--w-inner);
  margin-inline: auto;
}
/* パンくず。14px / 全体 var(--c-crumb) */
.c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fz-min);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--c-crumb);
  margin-bottom: 12px;
}
/* PSB 実測: パンくず文字下端 187.5 → タイトル文字上端 216 */
.c-breadcrumb a {
  color: var(--c-crumb);
}
.c-breadcrumb a:nth-of-type(n+2) {
  color: var(--c-crumb);
}
/* 3階層時、2つ目以降のリンクは黒（PSB 実測） */
.c-breadcrumb a:hover {
  color: var(--c-blue);
}
.c-breadcrumb span::before,
.c-breadcrumb a+span::before,
.c-breadcrumb a+a::before {
  content: "＞";
  margin: 0 12px;
  color: var(--c-crumb);
}
/* a + a は3階層（詳細ページ）用 */
.c-breadcrumb>span:first-child::before {
  content: none;
}
/* ページタイトル。下の黒罫は全下層ページ共通（PSB「長方形 1269」= 幅1102px・黒）。
   太さは PSB 全12ページを実測して多数派の 5px を採用（8ページが5px / 4ページが3px）。 */
.p-lower__ttl {
  font-size: var(--fz-pagetitle);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-black);
  padding-bottom: 28px;
  border-bottom: 5px solid var(--c-black);
  margin-bottom: 40px;
}
/* サンクス/404 */
.l-lower--thanks {
  text-align: center;
  padding: 120px 0 0;
}
.p-thanks__msg {
  font-size: var(--fz-body);
  line-height: 2;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .l-lower__inner {
    width: 90%;
  }
  .p-lower__ttl {
    font-size: 28px;
    padding-bottom: 20px;
    border-bottom-width: 3px;
  }
  .l-lower--thanks {
    padding: 70px 5% 0;
  }
}

/* ページトップボタン。スクロールで出現、トップ付近で非表示（common.js が is-visible を付け外し） */
.c-pagetop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 250;
  width: 95px;
  height: 95px;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.c-pagetop.is-visible:hover {
  transform: translateY(-6px);
}
.c-pagetop img {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .c-pagetop {
    right: 14px;
    bottom: 44px;
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 768px) {
  .c-anchor-nav {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .c-anchor-nav__btn {
    width: 90%;
    max-width: 320px;
    height: 60px;
    font-size: 17px;
    border-width: 2px;
  }
  .c-anchor-nav__arrow {
    right: 20px;
  }
}