@charset "utf-8";
/* ==========================================================================
   site.css  ―  株式会社なかいち開発
   共通 main.css で再現できないサイト固有の差分のみを記述する。
   数値は claude-design-output/ の実数値をそのまま採用（目視推定は不可）。

   ■ 元データの基準値（claude-design-output/ から解決した実数値）
     コンテナ       : width: min(1400px, 100% - clamp(40px,12vw,160px))
                      （1200px / 1160px / 1000px / 920px のバリエーションあり）
     セクション余白 : TOP      padding: clamp(64px,8vw,110px) 0
                      下層     padding: clamp(56px,7vw,96px) 0
                      ヒーロー padding: clamp(48px,6vw,88px) 0
                      CTA帯    padding: clamp(48px,6vw,80px) 0
     基準gap        : カード 36px / 32px、ブロック clamp(28px,4vw,56px)
     カラム比率     : 58% - 42%（会社情報）/ 36% - 60%（reform 方針）
                      flex 1 1 420px + flex 1 1 40%（下層ブロック共通）
     見出し         : EN 19px/600/.01em/1.3 #2A5FA8
                      JA 31px/700/.06em/1.35 #0B2545
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. base（元データ head.php のベース指定）
   -------------------------------------------------------------------------- */
body {
  font-weight: 500;              /* 元データ body font-weight:500 */
  line-height: 1.7;
  color: #1E2A38;
  background: #fff;
  overflow-x: clip;              /* sticky ヘッダーを殺さない横はみ出し防止 */
  text-wrap: pretty;
}
a { color: #003894; }
a:hover { color: #2A5FA8; opacity: 1; }

/* Font Awesome 不使用のため、共通CSSのアイコン疑似要素を無効化 */
.header__tel::before,
.sp-nav__link::after { content: none; }

/* --------------------------------------------------------------------------
   2. container / section（元データの幅・余白）
   -------------------------------------------------------------------------- */
.container-wide,
.container,
.container-narrow {
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
.container-wide   { width: min(1400px, 100% - clamp(40px, 12vw, 160px)); }
.container        { width: min(1200px, 100% - clamp(40px, 12vw, 160px)); }
.container-narrow { width: min(1000px, 100% - clamp(40px, 12vw, 160px)); }

.section       { padding: clamp(64px, 8vw, 110px) 0; }  /* TOP 標準 */
.section--sub  { padding: clamp(56px, 7vw, 96px) 0; }   /* 下層 標準 */
.section--hero { padding: clamp(48px, 6vw, 88px) 0; }   /* ページヒーロー */
.section--band { padding: clamp(48px, 6vw, 80px) 0; }   /* CTA帯 */
.section--flat { padding: 0; }

.bg-light { background: #F5F8FB; }
.bg-pale  { background: #F7FBFE; }
.bg-navy  { background: #003894; color: #fff; }

/* --------------------------------------------------------------------------
   3. header（sticky / ロゴ56px / ナビ14px / 電話ブロック）
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  background: #fff;
}
.header__inner {
  width: 96%;
  max-width: none;
  height: auto;
  padding: 14px 0;
  gap: 28px;
  flex-wrap: wrap;
}
.header__logo img { height: 56px; }
.header__nav {
  gap: 22px;
  margin-left: auto;
  margin-right: 0;
  font-size: 14px;
  flex-wrap: wrap;
}
.header__nav-item a {
  display: inline-block;
  padding: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: #1E2A38;
  border-bottom: 2px solid transparent;
}
.header__nav-item a::after { display: none; }
.header__nav-item a:hover { color: #003894; opacity: 1; }
.header__nav-item--current a {
  color: #003894;
  font-weight: 700;
  border-bottom-color: #003894;
}
.header__tel {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: inherit;
  border-left: 1px solid #E3EAF1;
  padding-left: 20px;
  text-decoration: none;
}
.header__tel:hover { opacity: 1; }
.header__tel-num {
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #003894;
}
.header__tel-sub {
  font-size: 11px;
  line-height: 1.4;
  color: #5B6C7F;
}

/* SPナビ（元データに指定なし。共通コンポーネントで補完） */
.sp-nav__link { font-size: 1.6rem; }
.sp-nav__link::before {
  content: "\203A";
  order: 2;
  margin-left: auto;
  font-family: "Outfit", sans-serif;
  opacity: .5;
}
.sp-nav__en { order: 1; }

/* --------------------------------------------------------------------------
   4. セクション見出し（EN + JA + リード）
   -------------------------------------------------------------------------- */
.sec-head { text-align: center; }
.sec-head__en {
  margin: 0 0 4px;
  font-family: "Outfit", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  color: #2A5FA8;
}
.sec-head__ttl {
  margin: 0;
  font-size: 31px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0B2545;
}
.sec-head__lead {
  margin: 0 auto 56px;
  max-width: 860px;
  font-size: 16px;
  line-height: 1.7;
  color: #43525F;
}
/* 元データのセクション別 margin-bottom */
.sec-head--svc      .sec-head__ttl { margin-bottom: 24px; }
.sec-head--works    .sec-head__ttl { margin-bottom: 8px; }
.sec-head--about    .sec-head__ttl { margin-bottom: 36px; }
.sec-head--property .sec-head__ttl { margin-bottom: 32px; }
.sec-head--greeting .sec-head__ttl { margin-bottom: 40px; }
.sec-head--overview .sec-head__ttl { margin-bottom: 48px; }
.sec-head--flow     .sec-head__ttl { margin-bottom: 52px; }
.sec-head--point    .sec-head__ttl { margin-bottom: 56px; }
.sec-head--form     .sec-head__ttl { margin-bottom: 36px; }
.sec-head--navy .sec-head__en  { color: #8CD2F5; }
.sec-head--navy .sec-head__ttl { color: #fff; }
.sec-head--left { text-align: left; }

/* --------------------------------------------------------------------------
   5. 矢印リンク（→ の円が右に動く共通ボタン）
   -------------------------------------------------------------------------- */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #0B2545;
  text-decoration: none;
}
.btn-arrow:hover { color: #0B2545; opacity: 1; }
.btn-arrow__circle {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #9DC921, #003894);
  padding: 1px;
  display: inline-flex;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.btn-arrow__inner {
  flex: 1;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  color: #0B2545;
}
.btn-arrow:hover .btn-arrow__circle { transform: translateX(10px); }
.btn-arrow--fill {
  background: #fff;
  color: #003894;
  border-radius: 4px;
  padding: 14px 18px 14px 32px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  gap: 16px;
}
.btn-arrow--fill:hover { color: #003894; }
.btn-arrow--fill .btn-arrow__circle { width: 40px; height: 40px; }
.btn-arrow--fill .btn-arrow__inner { font-size: 16px; }

/* --------------------------------------------------------------------------
   6. メインビジュアル（TOP）
   -------------------------------------------------------------------------- */
.mv {
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  min-height: min(84vh, 760px);
  /* .mv__deco を下にはみ出させるため overflow は切らない
     （写真のはみ出しは .mv__figure 側の overflow:hidden で処理） */
}
.mv__deco {
  position: absolute;
  left: 0;
  bottom: -80px;
  width: 50%;
  height: 50%;
  background: #EAF6FD;
  z-index: 0;
}
.mv__body {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  padding-left: 80px;
}
.mv__sub {
  margin: 0 0 14px;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: .04em;
  color: #0B2545;
}
.mv__ttl {
  /* 写真に重なっても読めるように白帯を敷く。
     文字の左端は .mv__sub と揃えたいので padding 分だけ左へ引く */
  display: inline-block;
  background: #fff;
  padding: 0px 24px;
  margin: 0 0 0 -24px;
  position: relative;
  z-index: 2;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: .01em;
  color: #003894;
  white-space: nowrap;
}
.mv__figure {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80%;
  border-radius: 2px 0 0 2px;
  background: #DEE8F1;
  overflow: hidden;
}
.mv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.mv__img.is-active { opacity: 1; }
.mv__news {
  position: absolute;
  right: 0;
  bottom: 56px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  padding: 18px 28px;
  text-decoration: none;
  color: #0B2545;
  max-width: min(560px, 90%);
}
.mv__news:hover { color: #003894; opacity: 1; }
.mv__news-label { font-size: 14px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.mv__news-sep   { width: 1px; align-self: stretch; background: #E3EAF1; }
.mv__news-date  { font-family: "Outfit", sans-serif; font-size: 13px; color: #7D93A8; white-space: nowrap; }
.mv__news-ttl   { font-size: 14px; font-weight: 500; line-height: 1.6; }

/* --------------------------------------------------------------------------
   7. 事業内容カード（TOP）
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
}
.svc-card { display: block; text-decoration: none; color: inherit; }
.svc-card:hover { color: inherit; opacity: 1; }
.svc-card__figure { position: relative; margin-bottom: 26px; }
.svc-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #DEE8F1;
}
.svc-card__arrow {
  position: absolute;
  right: 20px;
  bottom: -26px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9DC921, #003894);
  padding: 1px;
  display: flex;
  z-index: 2;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.svc-card__arrow span {
  flex: 1;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  color: #0B2545;
}
.svc-card:hover .svc-card__arrow { transform: translateX(10px); }
.svc-card__head { position: relative; margin-bottom: 12px; }
.svc-card__num {
  position: absolute;
  left: -6px;
  top: -14px;
  z-index: 0;
  font-family: "Outfit", sans-serif;
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: #EAF6FD;
}
.svc-card__en {
  position: relative;
  z-index: 1;
  margin: 0 0 2px;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #2A5FA8;
}
.svc-card__ttl {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: #0B2545;
}
.svc-card__text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.7;
  color: #5B6C7F;
}

/* --------------------------------------------------------------------------
   8. 買取訴求バナー（共通パーツ）
   -------------------------------------------------------------------------- */
.purchase-band {
  width: min(1160px, 100% - clamp(40px, 12vw, 160px));
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) 0 clamp(64px, 8vw, 110px);
}
.purchase-band__en {
  margin: 0 0 -34px 44px;
  position: relative;
  z-index: 2;
  font-family: "Outfit", sans-serif;
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  color: #8CD2F5;
}
.purchase-band__box {
  position: relative;
  background: #003894;
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
}
.purchase-band__body { flex: 1 1 420px; min-width: 0; }
.purchase-band__ttl {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.5;
  font-weight: 700;
}
.purchase-band__lead {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: #DCE7F4;
}
.purchase-band__note {
  margin: 0 0 32px;
  font-size: 14px;
  letter-spacing: .04em;
  color: #B9D5F0;
}
.purchase-band__figure { flex: 0 1 40%; min-width: 260px; }
.purchase-band__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #DEE8F1;
}

/* --------------------------------------------------------------------------
   9. 施工事例カード
   -------------------------------------------------------------------------- */
.works-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
/* 記事数が3件未満でもカードの大きさを変えないため、列数は固定にする
   （auto-fit だと空カラムが詰められてカードが引き伸ばされる） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 896px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .works-grid { grid-template-columns: 1fr; }
}
.works-card { display: block; text-decoration: none; color: inherit; }
.works-card:hover { color: inherit; opacity: 1; }
.works-card__figure { position: relative; margin-bottom: 16px; }
.works-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #DEE8F1;
}
.works-card__cat {
  position: absolute;
  right: 0;
  bottom: -12px;
  z-index: 2;
  background: #fff;
  color: #0B2545;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 8px 16px;
}
.works-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.works-card__date { font-family: "Outfit", sans-serif; font-size: 12px; color: #7D93A8; }
.works-card__ttl  { margin: 0; font-size: 16px; line-height: 1.7; font-weight: 500; color: #0B2545; }

/* --------------------------------------------------------------------------
   10. 会社紹介 / 物件情報（TOP）
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.about__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #DEE8F1;
}
.about__text { margin: 0 0 28px; font-size: 15px; line-height: 1.7; color: #43525F; }

.license-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: #E3EAF1;
  border: 1px solid #E3EAF1;
  margin-bottom: 28px;
}
.license-list__item { flex: 1 1 150px; min-width: 0; background: #fff; padding: 18px; }
.license-list__label { margin: 0 0 6px; font-size: 12px; color: #7D93A8; }
.license-list__value { margin: 0; font-size: 13px; line-height: 1.6; font-weight: 500; color: #0B2545; }

.property { background: #F5F8FB; display: flex; flex-wrap: wrap; align-items: stretch; }
.property__body {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 6vw, 88px) clamp(32px, 4vw, 64px) clamp(56px, 6vw, 88px)
           max(clamp(20px, 6vw, 80px), calc((100vw - 1400px) / 2));
}
.property__text { margin: 0 0 32px; max-width: 720px; font-size: 15px; line-height: 1.7; color: #43525F; }
.property__links { display: flex; flex-wrap: wrap; gap: 14px; }
.property__figure { flex: 1 1 56%; min-height: min(72vh, 620px); }
.property__figure img { display: block; width: 100%; height: 100%; object-fit: cover; background: #DEE8F1; }

.btn-portal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: 10px;
  padding: 13px 18px;
  text-decoration: none;
}
.btn-portal:hover { opacity: 1; }
.btn-portal__body { display: flex; align-items: center; gap: 16px; }
.btn-portal__bar { width: 6px; align-self: stretch; min-height: 26px; border-radius: 3px; }
.btn-portal__name { font-size: 16px; font-weight: 700; white-space: nowrap; }
.btn-portal__ext {
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.btn-portal:hover .btn-portal__ext { transform: translate(6px, -6px); }
.btn-portal--goo { background: #9DC921; }
.btn-portal--goo .btn-portal__bar { background: #fff; }
.btn-portal--goo .btn-portal__name,
.btn-portal--goo .btn-portal__ext { color: #1C3D00; }
.btn-portal--uchina { background: #003894; }
.btn-portal--uchina .btn-portal__bar { background: #8CD2F5; }
.btn-portal--uchina .btn-portal__name,
.btn-portal--uchina .btn-portal__ext { color: #fff; }

/* --------------------------------------------------------------------------
   11. お問い合わせ帯（共通パーツ）
   -------------------------------------------------------------------------- */
.contact-band { background: #F5F8FB; }
.contact-band__inner {
  padding: clamp(48px, 6vw, 80px) 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
}
.contact-band__item {
  flex: 1 1 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
}
.contact-band__item:hover { color: inherit; opacity: 1; }
.contact-band__icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-band__icon--tel  { background: #003894; }
.contact-band__icon--mail { background: #8CD2F5; }
.contact-band__body { display: flex; flex-direction: column; gap: 4px; }
.contact-band__tel {
  font-family: "Outfit", sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #003894;
}
.contact-band__label {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #003894;
}
.contact-band__note { font-size: 14px; line-height: 1.7; color: #43525F; }
.contact-band__sep { width: 1px; background: #D8E3ED; align-self: stretch; }

/* --------------------------------------------------------------------------
   12. footer
   -------------------------------------------------------------------------- */
.footer-body { background: #003894; color: #fff; padding: 0; }
.footer-body__inner {
  max-width: none;
  padding: clamp(56px, 6vw, 80px) 0 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: normal;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.footer-body__left {
  flex: 1 1 380px;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-body__right { flex: 1 1 420px; width: auto; min-width: 0; }
.footer-body__logo {
  display: inline-flex;
  background: #fff;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.footer-body__logo img { display: block; height: 42px; width: auto; filter: none; }
.footer-body__info  { margin: 0 0 6px; font-size: 14px; line-height: 1.7; color: #DCE7F4; }
.footer-body__hours { margin: 0 0 22px; font-size: 13px; line-height: 1.7; color: #A9C4E2; }
.footer-body__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 14px;
  margin-bottom: 20px;
  font-size: 13px;
}
.footer-body__nav-item a { font-size: 13px; color: #fff; }
.footer-body__nav-item a:hover { color: #8CD2F5; opacity: 1; }
.footer-body__nav-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .3); }
.footer-body__license { margin: 0; font-size: 12px; line-height: 1.8; color: #A9C4E2; }
.footer-body__map {
  width: 100%;
  height: min(42vw, 320px);
  margin-top: 0;
  border-radius: 0;
}
.footer-bottom {
  background: #003894;
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 18px 0;
}
.footer-bottom__copyright {
  margin: 0;
  font-family: "Outfit", "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  color: #A9C4E2;
}

/* --------------------------------------------------------------------------
   13. ページヒーロー / パンくず（下層共通）
   -------------------------------------------------------------------------- */
.page-hero--solid {
  background: #003894;
  color: #fff;
  text-align: left;
  padding: 0;
}
.page-hero--solid .container-wide { padding: clamp(48px, 6vw, 88px) 0; }
.page-hero--solid .heading__en {
  display: block;
  margin: 0 0 4px;
  font-family: "Outfit", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  color: #8CD2F5;
}
.page-hero--solid .heading__ja {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  color: #fff;
}
.breadcrumb { padding: 0; border-bottom: 1px solid #E3EAF1; font-size: 12px; }
.breadcrumb .container-wide { padding: 14px 0; }
.breadcrumb__item:not(:last-child)::after { content: "／"; margin: 0 .25em; color: #7D93A8; }
.breadcrumb__link { color: #7D93A8; }
.breadcrumb__link:hover { color: #003894; text-decoration: underline; }
.breadcrumb__current { color: #7D93A8; }

/* --------------------------------------------------------------------------
   14. 下層ページ共通ブロック（見出しバー + 本文 + 図版）
   -------------------------------------------------------------------------- */
.block { max-width: 1200px; margin: 0 auto; }
.block + .block { margin-top: clamp(56px, 7vw, 88px); }
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #F5F8FB;
  padding: 16px 22px;
}
.block-head__ttl {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #0B2545;
}
.block-head__bar {
  width: 6px;
  height: 24px;
  flex: 0 0 auto;
  background: #9DC921;
  border-radius: 3px;
}
.block-head__en {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #2A5FA8;
  white-space: nowrap;
}
.block-body {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(28px, 4vw, 44px);
}
.block-body__text { flex: 1 1 420px; min-width: 0; }
.block-body__text > p { margin: 0; font-size: 16px; line-height: 2; color: #43525F; }
.block-body__figure { flex: 1 1 40%; min-width: 280px; overflow: hidden; }
.block-body__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #DEE8F1;
}
.block-point { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.block-point__circle {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #02a2dd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #fff;
}
.block-point__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: #1E2A38;
}
.block-note { border-left: 3px solid #8CD2F5; padding: 6px 0 6px 20px; margin-top: 32px; }
.block-note__ttl { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #0B2545; }
.block-note p { margin: 0; font-size: 14px; line-height: 1.7; color: #5B6C7F; }

/* 下層リード（ページ冒頭） */
.page-lead__ttl {
  margin: 0 0 20px;
  text-align: center;
  font-weight: 700;
  color: #0B2545;
}
.page-lead__ttl--sell   { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.6; }
.page-lead__ttl--rent   { font-size: clamp(21px, 2.2vw, 30px); line-height: 1.65; }
.page-lead__ttl--reform { font-size: clamp(21px, 2.2vw, 30px); line-height: 1.6; }
.page-lead__text {
  margin: 0 auto 48px;
  max-width: 820px;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: #43525F;
}
.page-lead__text--wide  { max-width: 1200px; }
.page-lead__text--tight { margin-bottom: 14px; }
.page-lead__note {
  margin: 0 auto 48px;
  max-width: 820px;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 500;
  color: #003894;
}
.lead-figure { max-width: 1200px; margin: 0 auto; overflow: hidden; }
.lead-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background: #DEE8F1;
}

/* --------------------------------------------------------------------------
   15. 3つの安心（POINT）
   -------------------------------------------------------------------------- */
.point-wrap {
  width: min(1200px, 100% - clamp(40px, 12vw, 160px));
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
}
.point-inner { max-width: 1060px; margin: 0 auto; }
.point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.point-card { min-width: 0; text-align: center; }
.point-card__en {
  margin: 0 0 10px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #9DC921;
}
.point-card__icon { display: flex; justify-content: center; margin-bottom: 26px; }
.point-card__icon span {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #F1F7FB;
  display: flex;
  align-items: center;
  justify-content: center;
}
.point-card__ttl  { margin: 0 0 12px; font-size: 21px; font-weight: 700; color: #0B2545; }
.point-card__text { margin: 0; font-size: 15px; line-height: 1.9; color: #43525F; }

/* --------------------------------------------------------------------------
   16. 流れ（FLOW）
   -------------------------------------------------------------------------- */
.flow { border-bottom: 1px dashed #CBD9E5; }
.flow__item {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2vw, 32px);
  border-top: 1px dashed #CBD9E5;
  padding: clamp(32px, 4vw, 52px) 0;
}
.flow__head {
  flex: 0 0 auto;
  width: min(320px, 100%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: clamp(8px, 3vw, 48px);
}
.flow__num {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid #2A5FA8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #2A5FA8;
}
.flow__ttl  { font-size: 19px; font-weight: 700; color: #0B2545; }
.flow__text { flex: 1 1 320px; min-width: 0; margin: 0; font-size: 16px; line-height: 2; color: #43525F; }

/* --------------------------------------------------------------------------
   17. ビフォーアフター
   -------------------------------------------------------------------------- */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  padding-top: clamp(28px, 4vw, 40px);
}
.ba-grid--narrow { max-width: 760px; }
.ba-set__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ba-set__cell { position: relative; aspect-ratio: 1; overflow: hidden; background: #DEE8F1; }
.ba-set__cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-set__badge {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 4px 10px;
}
.ba-set__badge--before { background: rgba(11, 37, 69, .82); }
.ba-set__badge--after  { background: rgba(0, 56, 148, .86); }
.ba-set__caption { margin: 0; font-size: 14px; font-weight: 500; color: #0B2545; }

/* --------------------------------------------------------------------------
   18. リフォーム：大切にしていること
   -------------------------------------------------------------------------- */
.policy {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 72px);
}
.policy__figure { flex: 0 1 calc(36% - 24px); min-width: 260px; overflow: hidden; }
.policy__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #DEE8F1;
}
.policy__body { flex: 1 1 calc(60% - 24px); min-width: 0; }
.policy__ttl  { margin: 0 0 24px; font-size: 21px; font-weight: 700; color: #0B2545; }
.policy__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.policy__list li {
  border-top: 1px solid #E3EAF1;
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: #43525F;
}

/* --------------------------------------------------------------------------
   19. 会社概要
   -------------------------------------------------------------------------- */
.greeting p { margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: #43525F; }
.greeting__sign { margin: 0 0 6px; text-align: right; font-size: 15px; color: #43525F; }
.greeting__name { margin: 0; text-align: right; font-size: 16px; font-weight: 700; color: #0B2545; }

.overview { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 48px); align-items: flex-start; }
.overview__table { flex: 1 1 calc(58% - 24px); min-width: 320px; }
.overview__access { flex: 1 1 calc(42% - 24px); min-width: 280px; }
.overview__access p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: #43525F; }
.overview__access iframe { display: block; width: 100%; height: min(64vw, 460px); border: 0; }

.table-company { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-company th,
.table-company td { border-top: 1px solid #E3EAF1; line-height: 1.9; color: #1E2A38; background: none; }
.table-company th {
  width: 150px;
  text-align: left;
  vertical-align: top;
  padding: 22px 16px 22px 0;
  font-weight: 500;
}
.table-company td { padding: 22px 0; }

.info-cards {
  background: #fff;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.info-cards__ttl {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 700;
  color: #0B2545;
}
.info-cards__bar {
  width: 6px;
  height: 24px;
  flex: 0 0 auto;
  background: #9DC921;
  border-radius: 3px;
}
.info-cards p { margin: 0; font-size: 15px; line-height: 1.9; color: #43525F; }

.contact-strip__inner {
  padding: clamp(48px, 6vw, 80px) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.contact-strip__ttl { margin: 0 0 12px; font-size: clamp(20px, 2vw, 28px); font-weight: 700; color: #fff; }
.contact-strip__text { margin: 0; font-size: 15px; line-height: 1.7; color: #DCE7F4; }
.contact-strip__tel {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  color: #003894;
  padding: 22px 36px;
  text-decoration: none;
  transition: background .3s ease;
}
.contact-strip__tel:hover { background: #8CD2F5; color: #003894; opacity: 1; }
.contact-strip__num { font-family: "Outfit", sans-serif; font-size: 28px; line-height: 1; }
.contact-strip__sub { font-size: 12px; color: #2A5FA8; }

/* --------------------------------------------------------------------------
   20. 売却相談フォーム
   -------------------------------------------------------------------------- */
.form-section {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) 24px;
}
.form-section__lead { margin: 0 0 44px; font-size: 15px; line-height: 1.7; color: #43525F; }
/* CMSフォーム（cdn.rs-sys.jp の埋め込み）を当サイトのデザインに合わせる。
   CMS側の mail-form.css は body 内で後から読み込まれるため、
   ID（#cms-contact-1-1-area）でスコープして確実に上書きする。
   値は元データ（claude-design-output/company.php）のフォーム部分と同一。 */
#cms-contact-1-1-area .form-contents {
  padding: 0;
  margin: 0;
  background: transparent;
}
#cms-contact-1-1-area form dl { margin: 0 0 30px; }
/* js/common.js が dt + dd を1行にまとめた場合のみグリッド化する。
   整形前（万一JSが動かない場合）はCMS標準のレイアウトのまま崩れない。 */
#cms-contact-1-1-area form dl[data-nk-decorated] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
}
#cms-contact-1-1-area form dl[data-nk-decorated] dt {
  float: none;
  width: auto;
  padding: 0;
}
#cms-contact-1-1-area form dl[data-nk-decorated] dd { padding: 0; }
#cms-contact-1-1-area .cms-form__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
#cms-contact-1-1-area .cms-form__row--full { grid-column: 1 / -1; }
/* 姓・名／セイ・メイは必ず隣同士に並べる。CMS側で項目が増減しても対が崩れないよう、
   左右の列を明示する（列位置は js/common.js が付ける data-field で判定）。 */
#cms-contact-1-1-area .cms-form__row[data-field="姓"],
#cms-contact-1-1-area .cms-form__row[data-field="セイ"] { grid-column: 1; }
#cms-contact-1-1-area .cms-form__row[data-field="名"],
#cms-contact-1-1-area .cms-form__row[data-field="メイ"] { grid-column: 2; }
#cms-contact-1-1-area form dl dt {
  margin: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: #0B2545;
}
#cms-contact-1-1-area form dl dt span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#cms-contact-1-1-area form dl dt span.required::before {
  content: "必須";
  order: 2;
  top: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: #B4261E;
  font-size: 11px;
  font-weight: 400;
}
#cms-contact-1-1-area form dl dt span.optional::before { content: none; }
#cms-contact-1-1-area form dl dd {
  padding: 0;
  margin: 0;
  border-bottom: 0;
  line-height: 1.7;
}

/* 入力欄 */
#cms-contact-1-1-area .textarea,
#cms-contact-1-1-area .textarea-serect {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #D7E0EA;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #1E2A38;
  outline: none;
  transition: border-color .3s ease;
}
#cms-contact-1-1-area input.textarea { height: auto; }
#cms-contact-1-1-area textarea.textarea { min-height: 140px; line-height: 1.7; }
#cms-contact-1-1-area .textarea:focus,
#cms-contact-1-1-area .textarea-serect:focus { border-color: #003894; }

/* チェックボックス（ご相談の種別） */
#cms-contact-1-1-area .cms-form__choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#cms-contact-1-1-area .cms-form__choices label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #D7E0EA;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #1E2A38;
  cursor: pointer;
}
#cms-contact-1-1-area .checkbox {
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  accent-color: #003894;
}

/* 送信ボタン */
#cms-contact-1-1-area .submit-btn,
#cms-contact-1-1-area button {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 20px 56px;
  background: #003894;
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .3s ease;
}
#cms-contact-1-1-area .submit-btn::before { content: none; }
#cms-contact-1-1-area .submit-btn:hover,
#cms-contact-1-1-area button:hover { background: #0B2545; }
#cms-contact-1-1-area .recaptcha-area { margin: 24px 0 0; text-align: left; }

/* エラー表示 */
#cms-contact-1-1-area .form-err-msg {
  margin: 0 0 24px;
  padding: 16px 20px;
  background: #FDF2F1;
  border: 1px solid #B4261E;
  border-radius: 4px;
  color: #B4261E;
  font-size: 14px;
  line-height: 1.7;
}
#cms-contact-1-1-area .form-err-msg ul { list-style: disc inside; }

/* 送信完了 */
#cms-contact-1-1-area .form-thanks-msg {
  padding: clamp(28px, 4vw, 48px);
  background: #F5F8FB;
  border: 1px solid #E3EAF1;
}
#cms-contact-1-1-area .form-thanks-msg p {
  font-size: 16px;
  line-height: 1.9;
  color: #43525F;
}
#cms-contact-1-1-area .form-thanks-msg .back-home-btn {
  width: auto;
  margin: 28px 0 0;
  text-align: center;
}
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a {
  display: inline-block;
  width: auto;
  padding: 18px 48px;
  background: #003894;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
}
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a:hover { background: #0B2545; }

/* フォームのレスポンシブ。種別は3列→2列→1列、入力項目は2列のまま狭め、
   スマホでは1項目1行にする（姓・名／セイ・メイだけは隣同士のまま）。 */
@media (max-width: 896px) {
  #cms-contact-1-1-area .cms-form__choices { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  #cms-contact-1-1-area form dl[data-nk-decorated] { gap: 20px 12px; }
  #cms-contact-1-1-area .cms-form__row { grid-column: 1 / -1; }
  #cms-contact-1-1-area .cms-form__row[data-field="姓"],
  #cms-contact-1-1-area .cms-form__row[data-field="セイ"] { grid-column: 1; }
  #cms-contact-1-1-area .cms-form__row[data-field="名"],
  #cms-contact-1-1-area .cms-form__row[data-field="メイ"] { grid-column: 2; }
  #cms-contact-1-1-area .cms-form__choices { grid-template-columns: 1fr; }
}

.privacy { margin-top: 64px; border-top: 1px solid #E3EAF1; padding-top: 40px; }
.privacy__ttl { margin: 0 0 20px; font-size: 18px; font-weight: 700; color: #0B2545; }
.privacy__list {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #5B6C7F;
}

/* --------------------------------------------------------------------------
   21. 施工事例一覧（タブ / ページネーション）
   -------------------------------------------------------------------------- */
.works-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.works-tabs__item {
  border: 1px solid #E3EAF1;
  color: #1E2A38;
  padding: 10px 20px;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.works-tabs__item:hover { border-color: #003894; color: #003894; opacity: 1; }
.works-tabs__item.is-current {
  border-color: #003894;
  background: #003894;
  color: #fff;
  pointer-events: none;
}
.pagination { margin: 56px 0 0; }
.pagination__list { gap: 8px; font-family: "Outfit", sans-serif; font-size: 14px; }
.pagination__link {
  min-width: 0;
  height: auto;
  padding: 12px 18px;
  border: 1px solid #E3EAF1;
  border-radius: 0;
  color: #1E2A38;
}
.pagination__link:hover { border-color: #003894; color: #003894; opacity: 1; }
.pagination__link.is-current { border-color: #003894; background: #003894; color: #fff; }

/* --------------------------------------------------------------------------
   22. 施工事例詳細
   -------------------------------------------------------------------------- */
.entry { max-width: 1060px; margin: 0 auto; min-width: 0; }
.entry__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.entry__cat  { background: #EDF6DE; color: #4A6B12; font-size: 12px; padding: 5px 12px; }
.entry__date { font-family: "Outfit", sans-serif; font-size: 13px; color: #7D93A8; }
.entry__ttl {
  margin: 0 0 32px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.6;
  font-weight: 700;
  color: #0B2545;
}
.entry__cat:empty,
.entry__date:empty,
.entry__ttl:empty { display: none; }

/* 記事本文（CMSに登録されたHTMLがそのまま入る領域）。
   写真・スペック表・施工前後の比較・見出しは本文内で登録されるため、
   ここで元データの記事デザインに揃うようにスタイルを当てておく。 */
.entry__body {
  font-size: 15px;
  line-height: 1.7;
  color: #43525F;
}
.entry__body > *:first-child { margin-top: 0; }
.entry__body p { margin: 0 0 24px; }
.entry__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 24px;
}
.entry__body h2 {
  margin: 48px 0 14px;
  padding-left: 14px;
  border-left: 4px solid #003894;
  font-size: 19px;
  font-weight: 700;
  color: #0B2545;
}
.entry__body h3 { margin: 40px 0 12px; font-size: 17px; font-weight: 700; color: #0B2545; }
.entry__body h4 { margin: 32px 0 10px; font-size: 16px; font-weight: 700; color: #0B2545; }
.entry__body strong,
.entry__body b { font-weight: 700; color: #0B2545; }
.entry__body a { color: #003894; text-decoration: underline; }
.entry__body a:hover { color: #2A5FA8; }
.entry__body ul,
.entry__body ol { margin: 0 0 24px; padding-left: 1.4em; }
.entry__body ul { list-style: disc; }
.entry__body ol { list-style: decimal; }
.entry__body li { margin-bottom: 8px; }
.entry__body blockquote {
  margin: 0 0 24px;
  padding: 6px 0 6px 20px;
  border-left: 3px solid #8CD2F5;
  color: #5B6C7F;
}
.entry__body hr { border: 0; border-top: 1px solid #E3EAF1; margin: 40px 0; }
.entry__body iframe,
.entry__body video { max-width: 100%; }
.entry__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 14px;
}
.entry__body th {
  text-align: left;
  background: #F5F8FB;
  border: 1px solid #E3EAF1;
  padding: 14px 18px;
  font-weight: 500;
  color: #5B6C7F;
}
.entry__body td {
  border: 1px solid #E3EAF1;
  padding: 14px 18px;
  color: #1E2A38;
}
@media (max-width: 639px) {
  .entry__body table { display: block; overflow-x: auto; }
}

.entry__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid #E3EAF1;
  padding-top: 24px;
  margin-top: 48px;
  font-size: 14px;
}
/* 前後記事のタグがCMSにないため、一覧へ戻る1本のみ */
.entry__nav--single { justify-content: center; }

/* --------------------------------------------------------------------------
   23. アンカー位置（sticky ヘッダー分のオフセット）
   -------------------------------------------------------------------------- */
#military,
#form,
#cmsblog { scroll-margin-top: 100px; }

/* --------------------------------------------------------------------------
   24. スクロールフェードイン（wireframe：下から20px・低〜中の演出）
   -------------------------------------------------------------------------- */
.is-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.is-fade.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .is-fade { opacity: 1; transform: none; transition: none; }
  .mv__img { transition: none; }
}

/* --------------------------------------------------------------------------
   25. レスポンシブ補完
       元データにはブレークポイント指定がないため、共通CSSのSPナビ切替
       （1100px）に合わせた最小限の調整のみを行う。
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .header__inner { padding-right: 56px; gap: 16px; }
  .header__tel { margin-left: auto; }
}
@media (max-width: 896px) {
  /* MV：テキストが写真に重なって読めなくなるため縦積みに切り替える */
  .mv { display: block; min-height: 0; }
  .mv__deco { display: none; }
  .mv__body { max-width: none; padding: 40px clamp(12px, 4vw, 80px) 32px; text-align: center; }
  /* 白帯は文字幅ぴったりにして中央へ */
  .mv__ttl { padding-left: 0; padding-right: 0; margin-left: 0; }
  .mv__figure { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
  .mv__news { position: static; max-width: none; flex-wrap: wrap; gap: 12px; padding: 16px 20px; }
  .mv__news-sep { display: none; }
  /* CTA帯：アイコンもテキストも左揃えに（中央寄せだとテキスト左揃えと噛み合わない） */
  .contact-band__inner { justify-content: flex-start; }
  .contact-band__item { justify-content: flex-start; }
  .contact-band__sep { display: none; }
  .property__figure { min-height: 0; aspect-ratio: 4 / 3; }
  /* SPではフッターナビを出さない（グローバルナビはハンバーガーに集約） */
  .footer-body__nav { display: none; }
  /* フォームの左右余白を他セクション（.container-wide）と同じ量にする */
  .form-section {
    padding-left: calc(clamp(40px, 12vw, 160px) / 2);
    padding-right: calc(clamp(40px, 12vw, 160px) / 2);
  }
  .footer-body__map { height: min(60vw, 320px); }
  .overview__access iframe { height: min(80vw, 460px); }
}
@media (max-width: 639px) {
  /* キャッチが変な位置で折り返さないよう、幅に収まる大きさにする */
  .mv__ttl { white-space: normal; font-size: clamp(20px, 6vw, 28px); text-wrap: balance; }
  .block-point__circle { width: 88px; height: 88px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   26. 個別調整（元データの入れ子構造に対応）
   -------------------------------------------------------------------------- */
/* rent / reform：リード画像の直後に続くブロックの間隔 */
.lead-figure + .block { margin-top: clamp(56px, 7vw, 88px); }

/* 施工事例一覧 */
.works-list { padding: clamp(48px, 6vw, 80px) 0; }
.works-list__lead { margin: 0 0 36px; font-size: 16px; line-height: 1.7; color: #43525F; }

/* 施工事例詳細 */
.entry-wrap { padding: clamp(40px, 5vw, 72px) 0; }

/* 一覧への導線ボタン */
.works-link { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 72px); }

/* CMS埋め込み枠（span で出力されるためブロック化する） */
#cms-blog-entry-list-1-area { display: block; }

/* --------------------------------------------------------------------------
   27. CMS記事一覧（埋め込み出力）
   カード部分は .works-card 系をそのまま使う。ここでは一覧ページ側の
   ギャップと、<%page_link%> が出力するページ送りの体裁を整える。
   -------------------------------------------------------------------------- */
.works-list .works-grid { gap: 36px; }

.works-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 56px;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
}
.works-pager:empty { display: none; }
/* CMSがul/li等で囲って出力した場合もフラットに並べる */
.works-pager div,
.works-pager ul,
.works-pager ol,
.works-pager li,
.works-pager p { display: contents; }
.works-pager a,
.works-pager span,
.works-pager strong,
.works-pager em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid #E3EAF1;
  color: #1E2A38;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.works-pager a:hover { border-color: #003894; color: #003894; opacity: 1; }
/* 現在ページ（リンクになっていない要素＝現在地） */
.works-pager > strong,
.works-pager > em,
.works-pager li > strong,
.works-pager li > em,
.works-pager .current,
.works-pager .active,
.works-pager .is-current {
  background: #003894;
  border-color: #003894;
  color: #fff;
}
/* TOPはページ送りを出さない */
.cms-list--nopager .works-pager { display: none; }

/* MVのお知らせ（CMS埋め込み）
   ラッパーの span を消して <a class="mv__news"> を .mv の直接の子として扱う。
   PC＝右下に絶対配置／SP＝写真の下に流し込み、どちらも静的版と同じ挙動になる。 */
.mv > [id^="cms-blog-entry-"] { display: contents; }

/* --------------------------------------------------------------------------
   28. セクション背景写真（うっすら敷く）
   画像は style="--sec-bg: url(…)" でHTML側から指定する（CDNパスは $img 基準）。
   MVの装飾ブロック（.mv__deco）も同じ指定で背景を敷ける。
   -------------------------------------------------------------------------- */
.sec-bg { position: relative; }
.sec-bg::before,
.mv__deco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sec-bg) top left / cover no-repeat;
  opacity: var(--sec-bg-opacity, .3);
  pointer-events: none;
}
.sec-bg > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   29. SP固定TELバー（896px以下で常時表示）
   共通コンポーネント .sp-fixed-bar を当サイトの配色に合わせる。
   -------------------------------------------------------------------------- */
.sp-fixed-bar {
  background: #003894;
  border-top: 0;
  padding: 0;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(11, 37, 69, .18);
}
.sp-fixed-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 16px;
  font-size: inherit;
  color: #fff;
}
.sp-fixed-bar__link:hover { color: #fff; opacity: 1; }
.sp-fixed-bar__icon { display: flex; flex: 0 0 auto; }
.sp-fixed-bar__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.sp-fixed-bar__num {
  font-family: "Outfit", sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
}
.sp-fixed-bar__note { font-size: 11px; line-height: 1.4; color: #B9D5F0; }

@media (max-width: 896px) {
  /* ヘッダーの電話は固定バーに集約する */
  .header__tel { display: none; }
  /* 固定バーの高さ分、フッター最下部に余白を確保 */
  .footer-bottom { padding-bottom: 76px; }
}

/* --------------------------------------------------------------------------
   30. OP演出（TOP：ロゴがゆったり出て、ゆったり消える）
   JS不使用。全体3秒で、フェードイン約1秒 → 保持約0.8秒 → フェードアウト。
   終了後は visibility:hidden になるのでクリックを妨げない。
   -------------------------------------------------------------------------- */
.op {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  animation: op-veil 3s cubic-bezier(.4, 0, .2, 1) forwards;
}
.op__logo {
  width: min(340px, 62vw);
  height: auto;
  opacity: 0;
  animation: op-logo 3s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes op-logo {
  0%   { opacity: 0; transform: translateY(10px); }
  35%  { opacity: 1; transform: translateY(0); }
  62%  { opacity: 1; transform: translateY(0); }
  88%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes op-veil {
  0%   { opacity: 1; visibility: visible; }
  62%  { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
/* 動きを減らす設定の環境ではOPを出さない */
@media (prefers-reduced-motion: reduce) {
  .op { display: none; }
}