/* ============================================================
   e不動産屋 / style.css
   共通スタイル完成版
   TOP専用クラス（.top-hero / .branch-grid 等）は
   index.html の <style> に残す方針
   ============================================================ */


/* ------------------------------------------------------------
   1. CSS変数
   ------------------------------------------------------------ */
:root {
  /* ── 紺系 ── */
  --color-navy-dark:    #0f2340;
  --color-navy:         #1a3560;
  --color-navy-light:   #254b78;

  /* ── 金系 ── */
  --color-gold:         #b89238;
  --color-gold-light:   #c9a84c;
  --color-gold-pale:    #fdf8ee;
  --color-gold-border:  #e8d9a8;

  /* ── 白・背景 ── */
  --color-white:        #ffffff;
  --color-bg:           #f7f8fa;
  --color-bg-warm:      #fafaf7;
  --color-border:       #e2e6ec;

  /* ── テキスト ── */
  --color-text:         #1a1a2e;
  --color-text-mid:     #444466;
  --color-text-light:   #8888aa;

  /* ── フォント ── */
  --font-sans:  'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;

  /* ── スペーシング ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  72px;

  /* ── 角丸 ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ── シャドウ ── */
  --shadow-sm: 0 2px 8px rgba(15,35,64,.07);
  --shadow-md: 0 6px 24px rgba(15,35,64,.13);
}


/* ------------------------------------------------------------
   2. リセット・ベース
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.4;
}

/* テーブル */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
}

thead th {
  background: var(--color-navy-dark);
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.75;
  vertical-align: top;
}

tbody tr:hover {
  background: var(--color-bg);
}


/* ------------------------------------------------------------
   3. ユーティリティ
   ------------------------------------------------------------ */
.mt-md       { margin-top: var(--space-md); }
.mb-xs       { margin-bottom: var(--space-xs); }
.text-center { text-align: center; }


/* ------------------------------------------------------------
   4. コンテナ
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ------------------------------------------------------------
   5. ヘッダー
   ------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: var(--color-navy-dark);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.site-header__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ブランドエリア */
.site-header__brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}

/* テキストロゴ */
.site-header__logo {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: .04em;
  text-decoration: none;
}

/* 画像ロゴ（img差し替え時） */
.site-header__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo-img {
  height: 36px;
  width: auto;
  display: block;
}

/* タグライン */
.site-header__tagline {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em;
  white-space: nowrap;
  display: none;
}

/* ナビ */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-header__nav-link {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.72);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-decoration: none;
}

.site-header__nav-link:hover {
  background: rgba(255,255,255,.1);
  color: var(--color-white);
}

/* ヘッダー高さのオフセット */
.header-offset {
  padding-top: 64px;
}


/* ------------------------------------------------------------
   6. セクション
   ------------------------------------------------------------ */
.section {
  padding: var(--space-xl) 0;
}

.section--white { background: var(--color-white); }
.section--bg    { background: var(--color-bg); }
.section--warm  { background: var(--color-bg-warm); }
.section--navy  { background: var(--color-navy-dark); }

/* ラベル */
.section__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.section__label--light {
  color: var(--color-gold-light);
  opacity: .85;
}

/* 見出し */
.section__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--color-navy-dark);
  line-height: 1.35;
  margin-bottom: var(--space-md);
}

.section__title--white {
  color: var(--color-white);
}

/* リード文 */
.section__lead {
  font-size: 15px;
  color: var(--color-text-mid);
  line-height: 1.9;
  max-width: 640px;
  margin-bottom: var(--space-lg);
}


/* ------------------------------------------------------------
   7. ボタン
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .18s, color .18s, border-color .18s,
              box-shadow .18s, transform .12s;
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* LINE */
.btn--line {
  background: #06c755;
  color: var(--color-white);
  border-color: #06c755;
}
.btn--line:hover {
  background: #05b34c;
  border-color: #05b34c;
}

/* ゴースト（白枠） */
.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,.55);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--color-white);
}

/* アウトライン（紺枠） */
.btn--outline {
  background: transparent;
  color: var(--color-navy-light);
  border-color: var(--color-navy-light);
}
.btn--outline:hover {
  background: var(--color-navy-light);
  color: var(--color-white);
}

/* 紺塗り */
.btn--navy {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border-color: var(--color-navy-dark);
}
.btn--navy:hover {
  background: var(--color-navy-light);
  border-color: var(--color-navy-light);
}

/* 幅100% */
.btn--full { width: 100%; }

/* 小さめ */
.btn--sm {
  font-size: 13px;
  padding: 8px 16px;
}


/* ------------------------------------------------------------
   8. カード（汎用）
   ------------------------------------------------------------ */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

/* グリッド：3列 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* グリッド：2列 */
.card-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}


/* ------------------------------------------------------------
   9. 記事カード
   ------------------------------------------------------------ */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
  text-decoration: none;
}

.article-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.article-card__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-border);
  background: var(--color-gold-pale);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  align-self: flex-start;
}

.article-card__title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy-dark);
  line-height: 1.5;
  margin-bottom: 6px;
}

.article-card__desc {
  font-size: 13px;
  color: var(--color-text-mid);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 10px;
}

.article-card__link {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy-light);
  margin-top: auto;
}

.article-card__link::after { content: ' \2192'; }


/* ------------------------------------------------------------
   10. FAQ
   ------------------------------------------------------------ */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 4px;
  cursor: pointer;
  user-select: none;
}

.faq-q:hover {
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.faq-q__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-navy-dark);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-q__text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy-dark);
  line-height: 1.55;
}

.faq-q__arrow {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-light);
  transition: transform .2s;
}

.faq-item.is-open .faq-q__arrow {
  transform: rotate(180deg);
}

.faq-a {
  display: none;
  padding: 0 4px 18px 40px;
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.85;
}

.faq-item.is-open .faq-a {
  display: block;
}


/* ------------------------------------------------------------
   11. 最終CTA（.cta-section）
   ------------------------------------------------------------ */
.cta-section {
  background: var(--color-navy-dark);
  padding: var(--space-xl) 0;
  text-align: center;
}

.cta-section__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.5vw, 30px);
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.cta-section__text {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.9;
  margin-bottom: var(--space-lg);
}

.cta-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: var(--space-md);
}

.cta-contact__btn-tel,
.cta-contact__btn-mail,
.cta-contact__btn-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
  min-width: 220px;
}

.cta-contact__btn-tel:hover,
.cta-contact__btn-mail:hover,
.cta-contact__btn-line:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cta-contact__btn-tel {
  background: var(--color-white);
  color: var(--color-navy-dark);
}

.cta-contact__btn-mail {
  background: rgba(255,255,255,.08);
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,.22);
}

.cta-contact__btn-line {
  background: #06c755;
  color: var(--color-white);
}

.cta-contact__btn-line:hover {
  background: #05b34c;
}

.cta-contact__icon {
  font-size: 22px;
  flex-shrink: 0;
}

.cta-contact__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.cta-contact__sub {
  font-size: 12px;
  font-weight: 400;
  opacity: .7;
  margin-top: 2px;
}

.cta-section__note {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  line-height: 1.7;
}


/* ------------------------------------------------------------
   12. フッター
   ------------------------------------------------------------ */
.site-footer {
  background: #080f1e;
  padding: var(--space-lg) 0 var(--space-md);
}

.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.site-footer__brand {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}

.site-footer__address {
  font-size: 13px;
  color: rgba(255,255,255,.48);
  line-height: 1.85;
  margin-bottom: var(--space-md);
}

.site-footer__address a {
  color: inherit;
  text-decoration: none;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--space-md);
}

.site-footer__nav-link {
  font-size: 13px;
  color: rgba(255,255,255,.52);
  padding: 4px 14px 4px 0;
  margin-right: 14px;
  border-right: 1px solid rgba(255,255,255,.14);
  transition: color .15s;
  line-height: 1.6;
  text-decoration: none;
}

.site-footer__nav-link:last-child {
  border-right: none;
  margin-right: 0;
}

.site-footer__nav-link:hover {
  color: var(--color-white);
}

.site-footer__divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: var(--space-sm) 0;
}

.site-footer__license {
  font-size: 12px;
  color: rgba(255,255,255,.38);
  margin-bottom: 8px;
}

.site-footer__disclaimer {
  font-size: 12px;
  color: rgba(255,255,255,.28);
  line-height: 1.8;
  margin-bottom: 16px;
}

.site-footer__copy {
  font-size: 12px;
  color: rgba(255,255,255,.22);
}


/* ------------------------------------------------------------
   13. パンくずナビ
   ------------------------------------------------------------ */
.breadcrumb {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
}

.breadcrumb__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
}

.breadcrumb__link {
  color: var(--color-navy-light);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s;
}

.breadcrumb__link:hover {
  text-decoration-color: var(--color-navy-light);
}

.breadcrumb__sep {
  color: var(--color-text-light);
  margin: 0 2px;
}

.breadcrumb__current {
  color: var(--color-text-light);
}


/* ------------------------------------------------------------
   14. 記事ページ共通
   ------------------------------------------------------------ */

/* 記事ヒーロー */
.article-hero {
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, #1a3560 100%);
  padding: 48px 0 44px;
  position: relative;
  overflow: hidden;
}

.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 90% 20%,
    rgba(184,146,56,.12) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.article-hero .container {
  position: relative;
  z-index: 1;
}

.article-hero__inner {
  max-width: 780px;
}

.article-hero__step {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--color-gold-light);
  border: 1px solid rgba(184,146,56,.4);
  padding: 3px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.article-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3.5vw, 30px);
  color: var(--color-white);
  line-height: 1.45;
  margin-bottom: 14px;
}

.article-hero__lead {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.8;
  margin-bottom: 12px;
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

/* 記事本文レイアウト：メイン＋サイドバー */
.article-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  align-items: start;
}

.article-main {
  min-width: 0;
}

.article-section {
  margin-bottom: var(--space-lg);
}

.article-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 22px);
  color: var(--color-navy-dark);
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-navy-dark);
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.article-section h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-navy-dark);
  font-weight: 700;
  margin: var(--space-md) 0 var(--space-xs);
  padding-left: 10px;
  border-left: 3px solid var(--color-gold);
}

.article-section p {
  font-size: 15px;
  color: var(--color-text-mid);
  line-height: 1.9;
  margin-bottom: var(--space-sm);
}

/* ── コラム記事共通（.article-header / .article-lead / .article-return / .column-item） ── */

.article-header {
  margin: 32px 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-border, #e4e0d6);
}
.article-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-text, #2b2b2b);
  margin: 0;
}

.article-lead {
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--c-text, #2b2b2b);
  margin: 0 0 32px;
}

/* コラム一覧リスト項目（<a class="column-item"> 内の <h3><p> 構成） */
.column-item {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-border, #e4e0d6);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.column-item:hover {
  opacity: 0.7;
}
/* .article-section h3 の serif font / gold border-left / padding-left をリセット */
.column-item h3 {
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-text, #2b2b2b);
  margin: 0 0 8px;
  padding-left: 0;
  border-left: none;
}
/* .article-section p の margin-bottom をリセット */
.column-item p {
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--c-text-light, #5a5a5a);
  margin: 0;
}

.article-return {
  margin: 48px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border, #e4e0d6);
}
.article-return p {
  margin: 0 0 12px;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--c-text, #2b2b2b);
}
.article-return p:last-child {
  margin-bottom: 0;
}
.article-return a {
  color: var(--c-text, #2b2b2b);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s;
}
.article-return a:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .article-header {
    margin: 24px 0 20px;
    padding-bottom: 16px;
  }
  .article-header h1 {
    font-size: 1.5rem;
  }
  .article-lead {
    font-size: 0.875rem;
    margin: 0 0 24px;
  }
  .column-item {
    padding: 16px 0;
  }
  .column-item h3 {
    font-size: 1rem;
  }
  .column-item p {
    font-size: 0.8125rem;
  }
  .article-return {
    margin: 32px 0 16px;
    padding-top: 20px;
  }
}

/* ボックス：ポイント */
.box-point {
  background: #eef4fa;
  border: 1px solid #b8d0e8;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.9;
}

.box-point__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-navy-light);
  margin-bottom: 8px;
}

/* ボックス：補足ノート */
.box-note {
  background: var(--color-bg-warm);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.85;
}

/* ボックス：注意 */
.box-warn {
  background: #fff8ec;
  border: 1px solid #f0d090;
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  font-size: 14px;
  color: var(--color-text-mid);
  line-height: 1.85;
}

/* 記事末尾CTA */
.article-cta {
  background: var(--color-navy-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  margin-top: var(--space-lg);
  text-align: center;
}

.article-cta__title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.article-cta__text {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.9;
  margin-bottom: var(--space-md);
}

.article-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* サイドバー */
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 80px;
}

.aside-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
}

.aside-box__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-text-light);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.aside-box__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-mid);
  padding: 7px 0;
  border-bottom: 1px dashed var(--color-border);
  transition: color .15s;
  text-decoration: none;
  line-height: 1.5;
}

.aside-box__link:last-child {
  border-bottom: none;
}

.aside-box__link:hover {
  color: var(--color-navy-light);
}

.aside-box__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-navy-dark);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   15. 内ページ共通（company / contact / 記事LP等）
   ------------------------------------------------------------ */

/* ページヒーロー */
.page-hero {
  padding: 48px 0 40px;
}

.page-hero--navy {
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, #1a3560 100%);
}

.page-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 36px);
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 12px;
}

.page-hero__lead {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.85;
  max-width: 600px;
}

/* コンテンツボディ */
.content-body {
  padding: var(--space-lg) 0;
}

.content-body--single {
  max-width: 780px;
  margin: 0 auto;
}

.content-section {
  margin-bottom: var(--space-lg);
}

.content-section h2 {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.5vw, 22px);
  color: var(--color-navy-dark);
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-navy-dark);
  margin-bottom: var(--space-md);
}

.content-section h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-navy-dark);
  font-weight: 700;
  margin: var(--space-md) 0 var(--space-xs);
}

.content-section p {
  font-size: 15px;
  color: var(--color-text-mid);
  line-height: 1.9;
  margin-bottom: var(--space-sm);
}


/* ------------------------------------------------------------
   16. レスポンシブ
   ------------------------------------------------------------ */

/* タブレット */
@media (max-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-body {
    grid-template-columns: 1fr;
  }

  .article-aside {
    position: static;
  }
}

/* スマホ（主要ブレークポイント） */
@media (max-width: 768px) {
  :root {
    --space-lg: 40px;
    --space-xl: 56px;
  }

  /* ヘッダー：SPでサービスリンクを非表示 */
  .site-header__nav-link--hide-sp {
    display: none;
  }

  /* タグラインSPでも表示 */
  .site-header__tagline {
    display: none;
  }

  /* グリッド：1列 */
  .card-grid {
    grid-template-columns: 1fr;
  }

  .card-grid--2col {
    grid-template-columns: 1fr;
  }

  /* CTA：縦並び */
  .cta-contact {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-contact__btn-tel,
  .cta-contact__btn-mail,
  .cta-contact__btn-line {
    min-width: unset;
    justify-content: center;
  }

  /* フッター */
  .site-footer__nav-link {
    font-size: 12px;
    padding: 3px 10px 3px 0;
    margin-right: 10px;
  }

  /* 記事 */
  .article-body {
    padding: var(--space-md) 0;
  }

  .article-cta__btns {
    flex-direction: column;
  }

  .article-cta__btns .btn {
    width: 100%;
    justify-content: center;
  }

  /* テーブル */
  table {
    font-size: 13px;
  }

  thead th,
  tbody td {
    padding: 10px;
  }
}

/* 小型スマホ */
@media (max-width: 480px) {
  .container,
  .container--narrow {
    padding: 0 16px;
  }

  .site-header__inner {
    padding: 0 16px;
  }

  .breadcrumb__inner {
    padding: 0 16px;
    font-size: 12px;
  }

  .faq-q {
    padding: 14px 2px;
  }

  .faq-a {
    padding: 0 2px 14px 34px;
  }
}

/* タグライン：600px以上で表示 */
@media (min-width: 600px) {
  .site-header__tagline {
    display: inline;
  }
}
/* ============================================================
   見た目調整用 上書きCSS
   style.css の一番最後に追加
   ============================================================ */

/* 全体の余白を少し広げて、詰まり感を減らす */
.section {
  padding: 88px 0;
}

/* 見出しを少し強くする */
.section__title {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.45;
  margin-bottom: 32px;
}

/* リードや説明文の読みやすさを上げる */
.section__lead,
.empathy-list li,
.no-list li,
.article-card__desc,
.card p,
.content-section p {
  line-height: 1.95;
}

/* 共感ブロックを少し“箱”っぽく見せる */
.section--bg .container--narrow {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
}

/* 共感リストの区切りを少し見やすく */
.empathy-list {
  margin: 28px 0 32px;
}

.empathy-list li {
  padding: 14px 0 14px 24px;
  font-size: 16px;
}

/* 共感ブロック直下のCTAをボタンらしく見せる */
.section--bg .container--narrow > div[style*="display:flex"] {
  gap: 16px !important;
  margin-top: 28px;
}

.section--bg .container--narrow > div[style*="display:flex"] .btn {
  min-height: 50px;
  padding: 14px 22px;
}

/* サービス紹介ブロックのカード感を強める */
.card-grid--2col {
  gap: 24px;
}

.card-grid--2col .card {
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,35,64,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.card-grid--2col .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15,35,64,.12);
}

/* サービス見出しを少し上品に */
.card-grid--2col .card p[style*="font-family:var(--font-serif)"] {
  line-height: 1.5;
  margin-bottom: 10px !important;
}

/* サービス説明文の詰まり感を減らす */
.card-grid--2col .card p[style*="font-size:14px"] {
  line-height: 1.95 !important;
}

/* ボタンを少しだけ“押せる感”のある見た目に */
.btn {
  min-height: 48px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15,35,64,.08);
}

.btn:hover {
  transform: translateY(-2px);
}

/* ヘッダーの文字を少し見やすく */
.site-header__nav-link {
  color: rgba(255,255,255,.82);
}

.site-header__tagline {
  color: rgba(255,255,255,.58);
}

/* SPで余白を整える */
@media (max-width: 768px) {
  .section {
    padding: 64px 0;
  }

  .section--bg .container--narrow {
    padding: 28px 20px;
  }

  .section__title {
    font-size: 30px;
    margin-bottom: 24px;
  }

  .empathy-list li {
    font-size: 15px;
    padding: 12px 0 12px 22px;
  }

  .card-grid--2col .card {
    padding: 24px 20px;
  }
}
/* ==========================================================================
   TOPページ専用スタイル（layout-top）
   ---------------------------------------------------------------
   このブロック全体を、既存 style.css の末尾に追記してください。
   すべて body.layout-top でスコープしてあるため、既存の .cta / .section /
   .fv 等のクラスに影響を与えません。TOPページ以外では一切発火しません。
   ========================================================================== */


/* --------------------------------------------------------------------------
   TOP用ローカル変数
   ※ 既存 style.css に --navy / --gold / --bg などの変数が既にある場合、
     下記の値を既存変数名に合わせて差し替えてください（例: var(--navy)）。
     そのままでも動きます。
   -------------------------------------------------------------------------- */
body.layout-top {
  --fd-navy:         #1a2b4a;
  --fd-navy-strong:  #0f1c35;
  --fd-gold:         #b89a5c;
  --fd-gold-dark:    #a18247;
  --fd-text:         #2b2b2b;
  --fd-text-sub:     #5a5a5a;
  --fd-border:       #e4e0d6;
  --fd-bg:           #faf8f3;
  --fd-bg-alt:       #f3efe5;
  --fd-serif:        "Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --fd-header-h:     72px;  /* 既存ヘッダー高さに合わせる */
  --fd-header-h-sm:  56px;  /* SP時ヘッダー高さ */
}


/* --------------------------------------------------------------------------
   共通コンテナ（セクション内幅）
   -------------------------------------------------------------------------- */
body.layout-top .fv__inner,
body.layout-top .cta-quiet__inner,
body.layout-top .cta__inner,
body.layout-top .section__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}


/* --------------------------------------------------------------------------
   FV
   ・キャッチとサブコピーは一体感を出す（間隔を詰める）
   ・上下の余白を詰めて、ファーストビュー内に全体が収まるように
   -------------------------------------------------------------------------- */
body.layout-top .fv {
  padding: 120px 0 56px; /* 64px（固定ヘッダー高）+ 56px（視覚余白） */
  background: var(--fd-bg);
}
body.layout-top .fv__catch {
  font-family: var(--fd-serif);
  font-size: 32px;
  line-height: 1.65;
  color: var(--fd-navy);
  margin: 0 0 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
body.layout-top .fv__lead {
  font-size: 14px;
  line-height: 1.85;
  color: var(--fd-text-sub);
  margin: 0 0 0;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  body.layout-top .fv {
    padding: 104px 0 40px; /* 64px（固定ヘッダー高）+ 40px（視覚余白） */
  }
  body.layout-top .fv__catch {
    font-size: 26px;
    line-height: 1.6;
    margin: 0 0 14px;
  }
}
body.layout-top .fv__brand {
  font-size: 14px;
  line-height: 1.8;
  color: var(--fd-text-sub);
  margin: 0;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   FV 2カラム（左：メインキャッチ、右：借地のミカタ）
   ・fv__inner の max-width はここで FV 専用に上書き（他セクションに影響しない）
   ・fv__side は将来バナー差し替えを想定した固定幅設計（380px）
   -------------------------------------------------------------------------- */
body.layout-top .fv__inner {
  max-width: 820px; /* 共通の section__inner と揃える（FVだけ広がる問題の修正） */
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
body.layout-top .fv__main {
  flex: 1 1 auto;
  min-width: 0;
}
/* fv__side：バナー差し替えを想定した固定幅コンテナ */
body.layout-top .fv__side {
  flex: 0 0 380px;
  display: flex;
  align-items: center;
  padding-top: 4px;
}
body.layout-top .fv__mikata-banner {
  display: block;
  width: 100%;
  transition: opacity 0.2s;
}
body.layout-top .fv__mikata-banner:hover {
  opacity: 0.85;
}
body.layout-top .fv__mikata-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* タブレット（769px〜960px）：fv__side を縮小して fv__main のキャッチ幅を確保 */
@media (max-width: 960px) {
  body.layout-top .fv__side {
    flex: 0 0 260px;
  }
  body.layout-top .fv__inner {
    gap: 24px;
  }
}
@media (max-width: 768px) {
  body.layout-top .fv__inner {
    flex-direction: column;
    gap: 0;
  }
  body.layout-top .fv__side {
    flex: none;
    width: 100%;
    margin-top: 24px;
    padding-top: 0;
  }
}


/* --------------------------------------------------------------------------
   CTA①（静・控えめ）
   ・FVと同じ背景色で続きの空気にする
   ・テキストリンク型。ボタン化しない。
   -------------------------------------------------------------------------- */
body.layout-top .cta-quiet {
  padding: 28px 0 56px;
  background: var(--fd-bg);
  border-top: 1px solid var(--fd-border);
}
body.layout-top .cta-quiet__inner {
  text-align: center;
}
body.layout-top .cta-quiet__lead {
  font-size: 15px;
  color: var(--fd-text-sub);
  margin: 0 0 10px;
}
body.layout-top .cta-quiet__link {
  margin: 0 0 8px;
}
body.layout-top .cta-quiet__link a {
  display: inline-block;
  padding: 4px 0;
  font-size: 17px;
  color: var(--fd-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--fd-navy);
  transition: opacity 0.2s;
}
body.layout-top .cta-quiet__link a:hover {
  opacity: 0.6;
}
body.layout-top .cta-quiet__note {
  font-size: 13px;
  color: var(--fd-text-sub);
  margin: 6px 0 0;
}


/* --------------------------------------------------------------------------
   セクション共通
   ・背景色で区切る。罫線は出さない。
   -------------------------------------------------------------------------- */
body.layout-top .section {
  padding: 72px 0;
}
body.layout-top .section--empathy,
body.layout-top .section--trust-reason,
body.layout-top .section--trust-fact,
body.layout-top .section--categories {
  background: #fff;
}
body.layout-top .section--bridge,
body.layout-top .section--service {
  background: var(--fd-bg-alt);
}

body.layout-top .section__heading {
  font-family: var(--fd-serif);
  font-size: 24px;
  line-height: 1.6;
  color: var(--fd-navy);
  margin: 0 0 32px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
body.layout-top .section__body p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--fd-text);
  margin: 0 0 20px;
}
body.layout-top .section__body p:last-child {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   信頼要素・前半（機能として弱く説明）
   ・左にゴールドの細罫で補強。控えめに。
   -------------------------------------------------------------------------- */
body.layout-top .trust-reason {
  border-left: 2px solid var(--fd-gold);
  padding: 4px 0 4px 22px;
}
body.layout-top .trust-reason__item {
  font-size: 15px;
  line-height: 1.9;
  color: var(--fd-text);
  margin: 0 0 14px;
}
body.layout-top .trust-reason__item:last-child {
  margin-bottom: 0;
}
body.layout-top .trust-reason__item--summary {
  color: var(--fd-navy);
  margin-top: 20px;
}


/* --------------------------------------------------------------------------
   信頼要素・後半（事実の淡々配置）
   -------------------------------------------------------------------------- */
body.layout-top .trust-fact {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fd-border);
}
body.layout-top .trust-fact__row {
  display: flex;
  padding: 14px 0;
  border-bottom: 1px solid var(--fd-border);
  font-size: 15px;
}
body.layout-top .trust-fact__row dt {
  flex: 0 0 140px;
  color: var(--fd-text-sub);
  font-weight: 500;
}
body.layout-top .trust-fact__row dd {
  flex: 1;
  margin: 0;
  color: var(--fd-text);
}


/* --------------------------------------------------------------------------
   CTA②（本線）
   ・ネイビー地＋ゴールドボタンで視覚的に最も強く。
   -------------------------------------------------------------------------- */
body.layout-top .cta {
  padding: 72px 0;
  background: var(--fd-navy);
  color: #fff;
}
body.layout-top .cta__inner {
  text-align: center;
}
body.layout-top .cta__lead {
  font-size: 16px;
  line-height: 1.95;
  margin: 0 0 28px;
  color: rgba(255,255,255,0.92);
}
body.layout-top .cta__button {
  margin: 0 0 14px;
}
body.layout-top .cta__button-link {
  display: inline-block;
  padding: 16px 56px;
  background: var(--fd-gold);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s;
}
body.layout-top .cta__button-link:hover {
  background: var(--fd-gold-dark);
}
body.layout-top .cta__note {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  margin: 0 0 24px;
}
body.layout-top .cta__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 32px;
}
body.layout-top .cta__sub li {
  margin: 0;
}
body.layout-top .cta__sub a {
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
body.layout-top .cta__sub a:hover {
  color: #fff;
  border-bottom-color: #fff;
}


/* --------------------------------------------------------------------------
   下層ページ導線
   ・#categories アンカージャンプ時にヘッダーで隠れないよう余白確保
   -------------------------------------------------------------------------- */
body.layout-top #categories {
  scroll-margin-top: calc(var(--fd-header-h) + 16px);
}
body.layout-top .category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
body.layout-top .category-list__item a {
  display: block;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--fd-border);
  text-decoration: none;
  color: var(--fd-text);
  transition: border-color 0.2s, transform 0.2s;
}
body.layout-top .category-list__item a:hover {
  border-color: var(--fd-gold);
  transform: translateY(-1px);
}
body.layout-top .category-list__title {
  display: block;
  font-size: 16px;
  color: var(--fd-navy);
  font-weight: 500;
}
body.layout-top .category-list__note {
  display: block;
  font-size: 13px;
  color: var(--fd-text-sub);
  margin-top: 6px;
}


/* --------------------------------------------------------------------------
   タブレット（〜1024px）
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.layout-top .fv {
    padding: 80px 0 60px;
  }
  body.layout-top .fv__catch {
    font-size: 30px;
  }
  body.layout-top .section {
    padding: 64px 0;
  }
  body.layout-top .cta {
    padding: 64px 0;
  }
}


/* --------------------------------------------------------------------------
   スマホ（〜768px）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.layout-top .fv__inner,
  body.layout-top .cta-quiet__inner,
  body.layout-top .cta__inner,
  body.layout-top .section__inner {
    padding: 0 20px;
  }

  body.layout-top .fv {
    padding: 104px 0 44px; /* 64px（固定ヘッダー高）+ 40px（視覚余白） */
  }
  body.layout-top .fv__catch {
    font-size: 23px;
    line-height: 1.65;
    margin-bottom: 20px;
  }
  body.layout-top .fv__lead {
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 20px;
  }
  body.layout-top .fv__brand {
    font-size: 13px;
  }
  /* SPでは意図的改行を無効化して自然折返しに */
  body.layout-top .fv__lead br,
  body.layout-top .section__body p br,
  body.layout-top .cta__lead br {
    display: none;
  }

  body.layout-top .cta-quiet {
    padding: 20px 0 40px;
  }

  body.layout-top .section {
    padding: 48px 0;
  }
  body.layout-top .section__heading {
    font-size: 19px;
    margin-bottom: 24px;
  }
  body.layout-top .section__body p {
    font-size: 15px;
  }

  body.layout-top .trust-reason {
    padding-left: 16px;
  }

  body.layout-top .trust-fact__row {
    flex-direction: column;
    padding: 12px 0;
  }
  body.layout-top .trust-fact__row dt {
    flex: none;
    margin-bottom: 4px;
    font-size: 13px;
  }

  body.layout-top .cta {
    padding: 48px 0;
  }
  body.layout-top .cta__lead {
    font-size: 15px;
  }
  body.layout-top .cta__button-link {
    display: block;
    padding: 16px 24px;
  }
  body.layout-top .cta__sub {
    flex-direction: column;
    gap: 14px;
  }

  body.layout-top .category-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.layout-top .category-list__item a {
    padding: 20px 22px;
  }

  body.layout-top #categories {
    scroll-margin-top: calc(var(--fd-header-h-sm) + 12px);
  }
}

/* ========================================================================
   /TOPページ専用スタイル（layout-top）ここまで
   ======================================================================== */

/* ========================================================================
   プロフィールセクション（/profile/）
   ======================================================================== */
.profile {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
}
.profile__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.profile__lead {
  font-size: 15px;
  color: #666;
  margin-bottom: 40px;
  letter-spacing: 0.04em;
}
.profile__body p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 1.5em;
  letter-spacing: 0.03em;
}
.profile__body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .profile {
    padding: 48px 20px;
  }
  .profile__title {
    font-size: 20px;
  }
  .profile__body p {
    font-size: 15px;
    line-height: 1.85;
  }
}
/* ========================================================================
   /プロフィールセクションここまで
   ======================================================================== */


/* =================================================================
   TOP直下入口カード（top-entry）+ 詳しい案内（cat-detail）+ フッター余白
   - 2026-04-25 追記：3グループ簡易入口を FV直下に追加した際の最小スタイル
   - 既存クラス名は変更しない。新規プレフィックス top-entry-* / cat-detail-*
   ================================================================= */

/* ── TOP直下入口セクション ── */
body.layout-top .section--top-entry {
  background: #ffffff;
  padding: 40px 24px 56px;
  border-top: 1px solid #ebe7df;
}
body.layout-top .top-entry__inner {
  max-width: 980px;
  margin: 0 auto;
}
body.layout-top .top-entry__heading {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1e1e1e;
  margin: 0 0 12px;
  text-align: center;
}
body.layout-top .top-entry__sub {
  font-size: 0.875rem;
  color: #6a6a6a;
  line-height: 1.95;
  text-align: center;
  margin: 0 0 32px;
}

/* ── カードグリッド ── */
body.layout-top .top-entry__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 768px) {
  body.layout-top .top-entry__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── カード本体 ── */
body.layout-top .top-entry-card {
  background: #f7f5f0;
  border: 1px solid #e8e3d6;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
}
body.layout-top .top-entry-card--baibai           { background: #f3f1eb; }
body.layout-top .top-entry-card--shakuchi-sokochi { background: #f5f3ed; }
body.layout-top .top-entry-card--ugokanai         { background: #f7f5f0; }

body.layout-top .top-entry-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e1e1e;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
body.layout-top .top-entry-card__body {
  font-size: 0.8125rem;
  color: #4a4a4a;
  line-height: 1.85;
  margin: 0 0 14px;
  flex-grow: 0;
}
body.layout-top .top-entry-card__link {
  margin: 4px 0 0;
}
body.layout-top .top-entry-card__link a {
  display: inline-block;
  font-size: 0.8125rem;
  color: #1f3a5f;
  text-decoration: none;
  border-bottom: 1px solid #1f3a5f;
  padding-bottom: 1px;
}
body.layout-top .top-entry-card__link a:hover { opacity: 0.7; }
body.layout-top .top-entry-card__link--main {
  margin-bottom: 12px;
}

/* ── カード内サブリンク ── */
body.layout-top .top-entry-card__sublinks {
  list-style: none;
  margin: 8px 0 0;
  padding: 12px 0 0;
  border-top: 1px dotted #cfc8b4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.layout-top .top-entry-card__sublinks li a {
  display: inline-block;
  font-size: 0.78125rem;
  color: #4a4a4a;
  text-decoration: none;
  padding: 3px 0;
}
body.layout-top .top-entry-card__sublinks li a:hover {
  color: #1f3a5f;
}
body.layout-top .top-entry-card__sublinks--full {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ── 下部詳しい案内（cat-detail） ── */
body.layout-top .cat-detail {
  padding-top: 48px;
}
body.layout-top .cat-detail__inner {
  max-width: 760px;
}
body.layout-top .cat-detail__lead {
  font-size: 0.875rem;
  color: #6a6a6a;
  line-height: 1.95;
  text-align: center;
  margin: -8px 0 32px;
}

/* ── 既存ブロック8 cat-group の最低限スタイル（CSS未定義状態の解消） ── */
body.layout-top .cat-group {
  background: #ffffff;
  border: 1px solid #ebe7df;
  padding: 24px;
  margin: 0 0 20px;
}
body.layout-top .cat-group__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e1e1e;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}
body.layout-top .cat-group__sub {
  font-size: 0.8125rem;
  color: #6a6a6a;
  line-height: 1.85;
  margin: 0 0 14px;
}
body.layout-top .cat-group__body p {
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.95;
  margin: 0 0 12px;
}
body.layout-top .cat-group__link a,
body.layout-top .cat-group__card-link a,
body.layout-top .cat-group__hub-link a {
  display: inline-block;
  font-size: 0.8125rem;
  color: #1f3a5f;
  text-decoration: none;
  border-bottom: 1px solid #1f3a5f;
  padding-bottom: 1px;
}
body.layout-top .cat-group__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 0 0 18px;
}
@media (max-width: 768px) {
  body.layout-top .cat-group__cards { grid-template-columns: 1fr; }
}
body.layout-top .cat-group__card {
  background: #f7f5f0;
  padding: 16px;
}
body.layout-top .cat-group__card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e1e1e;
  margin: 0 0 6px;
}
body.layout-top .cat-group__card-body {
  font-size: 0.8125rem;
  color: #4a4a4a;
  line-height: 1.85;
  margin: 0 0 10px;
}
body.layout-top .cat-group__hub {
  background: #f5f3ed;
  border: 1px dotted #cfc8b4;
  padding: 16px;
  margin-top: 10px;
}
body.layout-top .cat-group__hub-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e1e1e;
  margin: 0 0 4px;
}
body.layout-top .cat-group__hub-sub {
  font-size: 0.75rem;
  color: #6a6a6a;
  margin: 0 0 6px;
}
body.layout-top .cat-group__hub-body {
  font-size: 0.8125rem;
  color: #4a4a4a;
  line-height: 1.85;
  margin: 0 0 8px;
}
body.layout-top .cat-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.layout-top .cat-group__list a {
  display: inline-block;
  font-size: 0.875rem;
  color: #1f3a5f;
  text-decoration: none;
  padding: 3px 0;
}
body.layout-top .cat-group__list a:hover { opacity: 0.7; }

/* ── 下層導線 末尾：借地のミカタ バナー ── */
.categories-mikata-banner {
  margin: 32px 0;
  text-align: center;
}
.categories-mikata-banner__link {
  display: inline-block;
  max-width: 700px;
  width: 100%;
  transition: opacity 0.2s;
}
.categories-mikata-banner__link:hover {
  opacity: 0.85;
}
.categories-mikata-banner__link img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .categories-mikata-banner {
    margin: 24px 0;
  }
}

/* ── フッター見出しと項目の余白増（4ブロック構成・読みやすさ） ── */
.site-footer .site-footer__nav-title {
  margin-bottom: 12px;
}
.site-footer .site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .site-footer__nav-list li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.site-footer .site-footer__nav-list li a {
  font-size: 0.8125rem;
  line-height: 1.7;
}
.site-footer .site-footer__company {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ============================================================
   可読性改善（2026-04-26 適用）
   ──────────────────────────────────────────────────────────
   方針：本文・説明文・フォーム入力欄を 17〜18px 基準に底上げ。
        ヘッダー・フッター・タグライン・パンくず・注釈・コピーライト
        などは現状維持（レイアウト崩れリスクがあるため触らない）。
   このセクションは末尾追加のため、上の同じセレクタの指定より優先される。
   対象クラス：本文 / li / リード / CTA / フォーム入力欄。スマホは @media (max-width: 480px) で 1段階控えめに。
   ============================================================ */

/* 本文（共通：相続・借地・共有・境界・底地・土壌汚染などの長文ページ） */
.section__body p,
.article-section p,
.content-section p,
.profile__body p,
body.layout-top .section__body p {
  font-size: 18px;
  line-height: 1.8;
}

/* 本文中の箇条書き：本文と同等のサイズに揃える */
.section__body ul li,
.section__body ol li,
.article-section ul li,
.article-section ol li,
.content-section ul li,
.content-section ol li,
body.layout-top .section__body ul li,
body.layout-top .section__body ol li,
.empathy-list li {
  font-size: 18px;
  line-height: 1.8;
}

/* リード文・節の導入文（補足扱い・控えめ） */
.section__lead,
.contact-block__lead,
.profile__lead,
.article-hero__lead,
.page-hero__lead,
body.layout-top .fv__lead,
body.layout-top .cta-quiet__lead {
  font-size: 17px;
  line-height: 1.75;
}

/* CTA 周りの説明文・前後文（17px 前後） */
.cta-section__text,
.cta__lead,
.cta-block__pre,
body.layout-top .cta__lead {
  font-size: 17px;
  line-height: 1.75;
}

/* フォーム入力欄：高齢ユーザー想定で 17px 以上 */
.contact-form__input,
.contact-form__textarea,
.partners-form__input {
  font-size: 17px;
  line-height: 1.6;
}

/* フォームの補足注意書き：補足扱いだが小さすぎないよう 16px に底上げ */
.contact-form__note {
  font-size: 16px;
  line-height: 1.75;
}

/* スマホ：本文は 17px に微調整（横幅が狭いため 18px だと改行が増えやすい） */
@media (max-width: 480px) {
  .section__body p,
  .article-section p,
  .content-section p,
  .profile__body p,
  body.layout-top .section__body p,
  .section__body ul li,
  .section__body ol li,
  .article-section ul li,
  .article-section ol li,
  .content-section ul li,
  .content-section ol li,
  body.layout-top .section__body ul li,
  body.layout-top .section__body ol li,
  .empathy-list li {
    font-size: 17px;
    line-height: 1.8;
  }
  .section__lead,
  .contact-block__lead,
  .profile__lead,
  .article-hero__lead,
  .page-hero__lead,
  body.layout-top .fv__lead,
  body.layout-top .cta-quiet__lead,
  .cta-section__text,
  .cta__lead,
  .cta-block__pre,
  body.layout-top .cta__lead {
    font-size: 16px;
    line-height: 1.75;
  }
}


/* ============================================================
   公開前最終調整：読みやすさ・リンク識別性
   ============================================================ */
/* ── 本文中リンクの識別性（モダンな下線表現） ── */
body.layout-top .section__body a,
body.layout-top .section__body p a,
body.layout-top .cat-group__body a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: rgba(26, 53, 96, 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease, color 0.2s ease;
}
body.layout-top .section__body a:hover,
body.layout-top .section__body p a:hover,
body.layout-top .cat-group__body a:hover {
  color: var(--color-navy-dark);
  text-decoration-color: var(--color-navy);
}
/* ── カードのクリック可能感を出す ── */
body.layout-top .cat-group__card {
  background: #f7f5f0;
  padding: 22px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  display: block;
}
body.layout-top .cat-group__card:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
/* ── カード内文字の読みやすさ向上 ── */
body.layout-top .cat-group__card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.55;
}
body.layout-top .cat-group__card-body {
  font-size: 0.875rem;
  color: var(--color-text-mid);
  line-height: 1.85;
  margin: 0;
}

/* ============================================================
   7枚カード階層（2026-05-09 役員会決議）
   主役4（borrower/lender/相続/共有）と補助3（境界/過去用途/所有者不明）
   背景色は変えない。差別化は padding と font-size のみ。
   既存の body.layout-top .cat-group__card 定義を非破壊で拡張。
   ============================================================ */
/* ===== 主役カード（上段4枚） ===== */
body.layout-top .cat-group__card--primary {
  padding: 28px 24px;
}
body.layout-top .cat-group__card--primary .cat-group__card-title {
  font-size: 17px;
  line-height: 1.5;
}
body.layout-top .cat-group__card--primary .cat-group__card-body {
  font-size: 13px;
  line-height: 1.75;
}
/* ===== 補助カード（下段3枚） ===== */
body.layout-top .cat-group__card--secondary {
  padding: 18px 16px;
}
body.layout-top .cat-group__card--secondary .cat-group__card-title {
  font-size: 14px;
  line-height: 1.5;
}
body.layout-top .cat-group__card--secondary .cat-group__card-body {
  font-size: 12px;
  line-height: 1.6;
}
/* ===== モバイル ===== */
@media (max-width: 768px) {
  body.layout-top .cat-group__card--primary {
    padding: 22px 18px;
  }
  body.layout-top .cat-group__card--primary .cat-group__card-title {
    font-size: 15px;
  }
  body.layout-top .cat-group__card--primary .cat-group__card-body {
    font-size: 12px;
  }
  body.layout-top .cat-group__card--secondary {
    padding: 14px 16px;
  }
  body.layout-top .cat-group__card--secondary .cat-group__card-title {
    font-size: 13px;
  }
  body.layout-top .cat-group__card--secondary .cat-group__card-body {
    font-size: 11px;
  }
}

/* ── 「→」付きリンクの hover 強調 ── */
body.layout-top .cat-group__link a:hover,
body.layout-top .cat-group__card-link a:hover,
body.layout-top .cat-group__hub-link a:hover {
  color: var(--color-navy-dark);
  border-bottom-color: var(--color-navy-dark);
}


/* ============================================================
   FV 借地のミカタバナー拡大調整
   H1 3段化に伴い左カラム（fv__main）の縦長が増したため、
   右カラム（fv__side）の固定幅を拡張して縦の長さを揃え、
   バナーをより大きく見せる。
   既存の L1564 / L1585 の値（PC 380px / タブレット 260px）を
   末尾追記でカスケード上書きする方針。
   ============================================================ */
/* PC（〜961px以上）：fv__side 380px → 460px */
body.layout-top .fv__side {
  flex: 0 0 460px;
}
body.layout-top .fv__mikata-banner img {
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* タブレット（〜960px）：fv__side 260px → 320px に等比拡大 */
@media (max-width: 960px) {
  body.layout-top .fv__side {
    flex: 0 0 320px;
  }
  body.layout-top .fv__mikata-banner img {
    max-width: 320px;
  }
}

/* SP（〜768px）：縦並びに切り替わるため、バナー最大幅を抑えて中央寄せ */
@media (max-width: 768px) {
  body.layout-top .fv__side {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  body.layout-top .fv__mikata-banner img {
    max-width: 100%;
  }
}


/* ============================================================
   借地のミカタバナー：境界の明確化と浮き上がり効果
   ・FV背景（var(--fd-bg)）とバナー背景（クリーム #fbfaf6）が
     同系色のため、subtle な box-shadow と border-radius で輪郭を出す
   ・hover 時は shadow と translateY で軽くインタラクティブ感
   ・section--mikata 内の img を含む a タグは border-radius+shadow を適用
     （cat-group__link a は section__body の外なので影響なし）
   ============================================================ */
/* ── 借地のミカタバナー（FV右側）── */
body.layout-top .fv__mikata-banner {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 35, 64, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body.layout-top .fv__mikata-banner:hover {
  box-shadow: 0 6px 20px rgba(15, 35, 64, 0.14);
  transform: translateY(-2px);
}

/* ── 下方の借地のミカタ紹介ブロック内のバナー（img を内包する a タグ）── */
body.layout-top .section--mikata .section__body a {
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 35, 64, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body.layout-top .section--mikata .section__body a:hover {
  box-shadow: 0 6px 20px rgba(15, 35, 64, 0.14);
  transform: translateY(-2px);
}


/* ============================================================
   TOP 導線整理（FV右カード化／中段2枚カード／下段左右配置）
   ============================================================ */
/* ── FV右側：画像バナーからカードUIへ ── */
body.layout-top .fv__mikata-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-mikata-border, #e0d8c0);
  border-radius: 8px;
  padding: 18px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 2px 12px rgba(15, 35, 64, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
body.layout-top .fv__mikata-card:hover {
  box-shadow: 0 6px 20px rgba(15, 35, 64, 0.14);
  transform: translateY(-3px);
  border-color: #c9b888;
}
body.layout-top .fv__mikata-card__banner {
  background: #fbfaf6;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
}
body.layout-top .fv__mikata-card__banner img {
  display: block;
  width: 100%;
  height: auto;
}
body.layout-top .fv__mikata-card__title {
  font-size: 0.875rem;
  color: var(--color-text-mid);
  line-height: 1.7;
  margin: 0 0 10px;
}
body.layout-top .fv__mikata-card__cta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-navy);
  font-weight: 500;
  border-top: 1px solid #e0d8c0;
  padding-top: 10px;
  margin-top: 4px;
}
/* fv__side の幅をカードUIに合わせて調整（460px → 360px） */
body.layout-top .fv__side {
  flex: 0 0 360px !important;
  max-width: 360px !important;
}
@media (max-width: 960px) {
  body.layout-top .fv__side {
    flex: 0 0 280px !important;
    max-width: 280px !important;
  }
}
@media (max-width: 768px) {
  body.layout-top .fv__side {
    flex: 0 0 auto !important;
    max-width: 380px !important;
    width: 100%;
    margin: 0 auto;
  }
}
/* ── 中段：2枚カード ── */
body.layout-top .section--entries .section__inner {
  padding-top: 32px;
  padding-bottom: 32px;
}
body.layout-top .entries-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  body.layout-top .entries-cards {
    grid-template-columns: 1fr;
  }
}
body.layout-top .entry-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 22px 20px;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.layout-top .entry-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
body.layout-top .entry-card__title {
  font-size: 0.95rem;
  color: var(--color-navy-dark);
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.55;
}
body.layout-top .entry-card__body {
  font-size: 0.875rem;
  color: var(--color-text-mid);
  line-height: 1.85;
  margin: 0;
}
body.layout-top .entry-card--mikata {
  background: #fbfaf6;
  border-color: #e0d8c0;
}
body.layout-top .entry-card--mikata .entry-card__title {
  font-family: var(--font-serif);
}
body.layout-top .entry-card--mikata:hover {
  border-color: #c9b888;
}
/* ── 下段：借地のミカタ紹介の左右配置 ── */
body.layout-top .mikata-intro {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 20px;
}
@media (max-width: 768px) {
  body.layout-top .mikata-intro {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
body.layout-top .mikata-intro__banner {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 35, 64, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body.layout-top .mikata-intro__banner:hover {
  box-shadow: 0 6px 20px rgba(15, 35, 64, 0.14);
  transform: translateY(-2px);
}
body.layout-top .mikata-intro__banner img {
  display: block;
  width: 100%;
  height: auto;
}
body.layout-top .mikata-intro__body p {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--color-text-mid);
  line-height: 1.85;
}
body.layout-top .mikata-intro__body p:last-child {
  margin-bottom: 0;
}