/* =========================================================
   いるかリビング合同会社　共通スタイル (style.css)
   ---------------------------------------------------------
   ■ 色をまとめて変えたいとき → すぐ下の :root の中だけ直せばOK
   ■ それ以外は基本さわらなくて大丈夫です
   ========================================================= */

:root {
  --main:        #fc4a1a;  /* メインカラー（朱色・橙） */
  --main-light:  #f7b733;  /* 明るい橙（グラデの片方） */
  --main-dark:   #d6391a;  /* 濃い橙（ボタン押下など） */
  --accent:      #d64545;  /* アクセントの赤 */
  --sub:         #1f7a8c;  /* サブカラー（橙の対称色・青緑の差し色）※社長確認中 */
  --base-bg:     #fff7e8;  /* ページの背景（淡いクリーム） */
  --hero-bg:     #ffe9d6;  /* ヒーローの背景 */
  --card-bg:     #ffffff;  /* カードの背景 */
  --text:        #333333;  /* 本文の文字色 */
  --text-soft:   #555555;  /* 補助の文字色 */
  --line:        #f28c38;  /* 見出し横の線 */
  --max:         960px;    /* 本文の最大幅 */
}

/* ---------- 全体の土台 ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--base-bg);
  line-height: 1.9;
  font-size: 18px;          /* 高齢の方でも読みやすい大きさ */
  word-break: break-word;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }

a { color: var(--accent); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* ---------- ヘッダー（全ページ共通） ---------- */
/* 上段＝白帯（ロゴ＋電話＋無料相談）／下段＝橙のメニュー帯 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.header-top { background: #fff; }
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 60px; width: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.header-tel {
  color: var(--main-dark);
  text-decoration: none;
  font-weight: bold;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}
.header-tel .tel-num { font-size: 20px; }
.header-tel small { display: block; font-weight: normal; font-size: 12px; color: var(--text-soft); }

.btn-consult {
  background: var(--main);
  color: #fff;
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid var(--main);
  transition: .2s;
  white-space: nowrap;
}
.btn-consult:hover { background: var(--main-dark); border-color: var(--main-dark); }

/* ---------- ナビ（橙の帯・他ページへの導線） ---------- */
.site-nav { background: linear-gradient(90deg, var(--main-light), var(--main)); }
.site-nav .nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
}
.site-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  display: block;
  padding: 12px 18px;
}
.site-nav a:hover { background: rgba(255,255,255,0.18); }

/* ---------- ボタン共通 ---------- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  transition: .2s;
}
.btn-primary { background: var(--main); color: #fff; }
.btn-primary:hover { background: var(--main-dark); }
.btn-outline { background: #fff; color: var(--main); border: 2px solid var(--main); }
.btn-outline:hover { background: #fff1e8; }
.btn-tel { background: #2e7d32; color: #fff; }     /* 電話は色を変えて目立たせる */
.btn-tel:hover { background: #256528; }

/* ---------- ヒーロー ---------- */
.hero { background: var(--hero-bg); padding: 48px 20px; }
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.hero-copy h2 { font-size: 30px; line-height: 1.5; margin: 0 0 16px; color: #5b3a1a; }
.hero-copy .lead { font-size: 19px; color: var(--main-dark); font-weight: bold; margin: 0 0 16px; }
.hero-copy .lead-sub { font-size: 16px; color: var(--text-soft); margin: 0 0 26px; }
.hero-image img { width: 100%; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,0.18); display: block; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- セクション共通 ---------- */
.section { padding: 52px 0; }
.section.tint { background: #fff; }
.section h3.title {
  font-size: 26px;
  text-align: center;
  margin: 0 0 8px;
  color: var(--main-dark);
}
.section .subtitle { text-align: center; color: var(--text-soft); margin: 0 0 32px; }

/* ---------- お悩み共感 ---------- */
.worries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.worry {
  background: #fff;
  border: 1px solid #f3d8bf;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.worry .mark {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--main); color: #fff;
  border-radius: 50%;
  font-weight: bold; font-size: 18px; line-height: 1;
}

/* ---------- サービス概要（5本柱） ---------- */
/* 5枚を中央寄せのフレックスに（PCは3＋2で中央に揃う） */
.pillars { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.pillar {
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  border-top: 4px solid var(--main);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  flex: 1 1 280px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}
.pillar h4 { margin: 0 0 8px; font-size: 19px; color: var(--main-dark); }
.pillar p { margin: 0 0 14px; font-size: 16px; color: var(--text-soft); flex: 1; }
.pillar .more { color: var(--main); font-weight: bold; text-decoration: none; font-size: 15px; align-self: flex-start; }
.pillar .more:hover { text-decoration: underline; }

/* ---------- 各ページへの入口カード（3枚） ---------- */
.entry-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.entry {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.entry .entry-img { aspect-ratio: 4 / 3; overflow: hidden; }
.entry .entry-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entry .entry-head { background: linear-gradient(90deg, var(--main-light), var(--main)); color: #fff; padding: 14px 18px; font-size: 19px; font-weight: bold; }
.entry .entry-body { padding: 18px; flex: 1; }
.entry .entry-body ul { margin: 0 0 14px; padding-left: 1.1em; }
.entry .entry-body li { font-size: 15.5px; color: var(--text-soft); margin-bottom: 6px; }
.entry .entry-foot { padding: 0 18px 18px; }
.entry .more { color: var(--main); font-weight: bold; text-decoration: none; }
.entry .more:hover { text-decoration: underline; }

/* ---------- 選ばれる理由 ---------- */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.reason { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-left: 4px solid var(--sub); }
.reason h4 { margin: 0 0 6px; color: var(--main-dark); font-size: 18px; }
.reason p { margin: 0; font-size: 16px; color: var(--text-soft); }
.reason-image { margin-top: 24px; text-align: center; }
.reason-image img { width: 100%; max-width: 720px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }

/* ---------- WEB特典 ---------- */
.benefit {
  border: 2px solid var(--main);
  border-radius: 10px;
  padding: 22px;
  background: #fff;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.12);
  text-align: center;
}
.benefit h3 { color: var(--main); margin: 0 0 10px; }
.benefit .strong { color: var(--main); font-weight: bold; }

/* ---------- 会社概要（要約） ---------- */
.company { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 10px; padding: 26px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.company dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; margin: 0 0 18px; }
.company dt { font-weight: bold; color: var(--main-dark); }
.company dd { margin: 0; }

/* ---------- お問い合わせ CTA ---------- */
.cta { background: linear-gradient(90deg, var(--main-light), var(--main)); color: #fff; text-align: center; padding: 50px 20px; }
.cta h3 { font-size: 26px; margin: 0 0 10px; }
.cta .cta-tel { font-size: 34px; font-weight: bold; color: #fff; text-decoration: none; display: inline-block; margin: 6px 0; }
.cta .cta-tel small { display: block; font-size: 15px; font-weight: normal; }
.cta .cta-buttons { margin-top: 18px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* スマホだけで効く改行（PCでは無視されて1行のまま） */
.sp-br { display: none; }

/* ---------- フッター ---------- */
.site-footer { background: var(--main); color: #fff; text-align: center; padding: 26px 20px; }
.site-footer a { color: #fff; }
.footer-links { margin-top: 10px; display: flex; gap: 10px 24px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   スマホ対応（画面が狭いときの調整）
   ========================================================= */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero { padding: 32px 18px; }
  .hero-inner { grid-template-columns: 1fr; gap: 22px; }          /* 縦積みに */
  .hero-image { order: -1; }                                      /* スマホは画像を上に */
  .hero-copy h2 { font-size: 23px; }
  .hero-copy .lead { font-size: 17px; }
  .hero-cta .btn { flex: 1; text-align: center; }                /* ボタンを横いっぱいに */
  .worries, .reasons { grid-template-columns: 1fr; }            /* 1列に */
  .pillar { flex-basis: 100%; max-width: none; }                /* 5本柱も1列に */
  .entry-cards { grid-template-columns: 1fr; }                   /* 1列に */
  .company dl { grid-template-columns: 1fr; gap: 2px 0; }
  .company dt { margin-top: 10px; }
  .header-inner { justify-content: center; gap: 10px; }
  .header-tel { text-align: center; }
  .site-nav a { padding: 10px 12px; font-size: 15px; }
  .cta h3 { font-size: 22px; }              /* スマホは少し小さくして窮屈さを解消 */
  .cta .cta-tel { font-size: 28px; }
  .sp-br { display: inline; }               /* スマホでは指定位置で改行を有効に */
}

/* =========================================================
   下層ページ用の部品（サービス内容・安全管理 などで共通利用）
   ※ ここはデザインの土台です。基本さわらなくて大丈夫です
   ========================================================= */

/* ---------- ページ見出しの帯 ---------- */
.page-hero { background: var(--hero-bg); padding: 40px 20px; text-align: center; }
.page-hero h1 { font-size: 28px; margin: 0 0 12px; color: #5b3a1a; }
.page-hero p { max-width: 760px; margin: 0 auto; color: var(--text-soft); font-size: 17px; }

/* ページ内ジャンプ（早見リンク） */
.page-jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.page-jump a {
  background: #fff; color: var(--main-dark); text-decoration: none;
  border: 1px solid #f0c9a6; border-radius: 999px;
  padding: 8px 16px; font-size: 15px; font-weight: 600;
}
.page-jump a:hover { background: #fff1e8; }

/* ---------- サービスのまとまり（1サービス＝1ブロック） ---------- */
.svc { padding: 46px 0; border-bottom: 1px solid #f0ddc6; scroll-margin-top: 120px; }
.svc:last-of-type { border-bottom: none; }

.svc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; }
.svc-num {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--main); color: #fff; font-weight: bold; font-size: 21px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.svc-head h2 { font-size: 23px; margin: 0; color: var(--main-dark); }

/* タグ（無料／会員制 など） */
.tag { display: inline-block; font-size: 13px; font-weight: bold; padding: 3px 12px; border-radius: 999px; color: #fff; }
.tag-free { background: #2e7d32; }       /* 無料は緑で安心感 */
.tag-member { background: var(--sub); }   /* 会員制はサブカラー */

/* 文章＋写真の2カラム（スマホでは縦積み） */
.svc-top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px; align-items: center; margin-bottom: 26px; }
.svc-lead { font-size: 17px; margin: 0; }
.svc-figure { margin: 0; }
.svc-figure img { width: 100%; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); display: block; }
.svc-figure figcaption { font-size: 13px; color: var(--text-soft); text-align: center; margin-top: 8px; }

/* 小項目カード（無料相談の3つ など） */
.svc-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-item { background: #fff; border: 1px solid #f3d8bf; border-radius: 10px; padding: 18px 20px; }
.svc-item h3 { margin: 0 0 8px; font-size: 17px; color: var(--main-dark); }
.svc-item p { margin: 0; font-size: 15.5px; color: var(--text-soft); }
.svc-item .tag { margin-bottom: 10px; }
.svc-item .item-price {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed #f0c9a6;
  font-size: 15px; color: var(--text);
}
.svc-item .item-price b { color: var(--main-dark); font-size: 17px; }

/* チェックリスト（作業内容など） */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.checklist li { position: relative; padding-left: 28px; font-size: 16px; }
.checklist li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--main); font-weight: bold; }

/* 料金カード（金額を大きく見せる） */
.price-card { background: #fff; border: 2px solid var(--main); border-radius: 12px; padding: 22px 24px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.price-card .price-row { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; }
.price-card .price-label { font-size: 14px; color: var(--text-soft); display: block; }
.price-card .price-amount { font-size: 30px; font-weight: bold; color: var(--main-dark); line-height: 1.2; }
.price-card .price-amount small { font-size: 16px; font-weight: normal; color: var(--text); }
.price-card .price-note { margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--text-soft); }
.price-card .price-note li { padding-left: 16px; position: relative; margin-bottom: 4px; }
.price-card .price-note li::before { content: "・"; position: absolute; left: 0; }

/* 補足カード（“なぜ大切か”などの読み物） */
.callout { background: #fff7ef; border-left: 5px solid var(--main-light); border-radius: 8px; padding: 18px 22px; margin: 0 0 22px; }
.callout h3 { margin: 0 0 8px; color: var(--main-dark); font-size: 18px; }
.callout p { margin: 0 0 10px; font-size: 16px; }
.callout p:last-child { margin-bottom: 0; }
.callout ul { margin: 6px 0 0; padding-left: 1.2em; }
.callout li { font-size: 16px; margin-bottom: 6px; }

/* 数字を目立たせる強調 */
.hl { color: var(--main-dark); font-weight: bold; }

/* 注意書き */
.note { font-size: 18px; color: var(--text-soft); background: #f7f0e6; border-radius: 8px; padding: 12px 16px; margin: 18px 0 0; }

/* 汎用の白いカード（お客様専用ページ など） */
.panel { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.panel h2 { margin: 0 0 12px; color: var(--main-dark); font-size: 21px; }

/* ページ下部の「戻る／他ページへ」リンク */
.back-links { margin-top: 28px; display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: center; }
.back-links a { color: var(--main); font-weight: bold; text-decoration: none; }
.back-links a:hover { text-decoration: underline; }

/* ---------- 安心ポイントのグリッド（安全管理ページの要約） ---------- */
.assurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.assure {
  background: #fff; border-radius: 12px; padding: 24px 20px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-top: 4px solid var(--main);
}
.assure .ico {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
  background: #fff1e8; display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.assure h4 { margin: 0 0 8px; color: var(--main-dark); font-size: 17px; }
.assure p { margin: 0; font-size: 15px; color: var(--text-soft); }

/* 小見出し（セクション内の中項目） */
.sub-head { color: var(--main-dark); font-size: 18px; margin: 22px 0 12px; padding-left: 12px; border-left: 4px solid var(--main-light); }

/* ---------- お客様へのメッセージ（埋もれないよう目立たせる） ---------- */
.closing { background: linear-gradient(135deg, #fff3e9, #ffe2cf); padding: 50px 22px; }
.closing-inner {
  max-width: 780px; margin: 0 auto; background: #fff; border-radius: 18px;
  padding: 40px 34px; text-align: center;
  box-shadow: 0 12px 30px rgba(214,57,26,0.16); border-top: 6px solid var(--main);
}
.closing-inner .label {
  display: inline-block; background: var(--main); color: #fff; font-weight: bold;
  padding: 7px 22px; border-radius: 999px; font-size: 15px; margin-bottom: 20px;
}
.closing-inner h2 { font-size: 25px; color: var(--main-dark); margin: 0 0 20px; line-height: 1.5; }
.closing-inner p { font-size: 17px; margin: 0 0 16px; }
.closing-inner .promise {
  font-size: 22px; font-weight: bold; color: var(--main-dark); line-height: 1.7;
  background: #fff7ef; border-radius: 12px; padding: 18px 20px; margin: 22px 0;
}
.closing-inner .promise .em { color: var(--main); }
.closing-inner .sign { margin: 22px 0 0; color: var(--text-soft); font-size: 15px; }

/* ---------- 代表ごあいさつ（会社概要ページ） ---------- */
.greeting {
  display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start;
  background: #fff; border-radius: 14px; padding: 32px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.greeting-photo img { width: 100%; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.15); display: block; }
.greeting-photo .cap { text-align: center; font-size: 13px; color: var(--text-soft); margin: 10px 0 0; }
.greeting-body .ttl { font-size: 21px; color: var(--main-dark); margin: 4px 0 16px; }
.greeting-body p { font-size: 17px; margin: 0 0 14px; }
.greeting-body .name { margin: 20px 0 0; color: var(--text-soft); font-size: 15px; }
.greeting-body .name strong { display: inline-block; margin-left: 6px; font-size: 20px; color: var(--text); }

/* ---------- 保有資格カード（会社概要ページ） ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cert-card { background: #fff; border-radius: 12px; padding: 22px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-top: 4px solid var(--main-light); }
.cert-card h4 { margin: 0 0 12px; color: var(--main-dark); font-size: 17px; }
.cert-card ul { margin: 0; padding-left: 1.1em; }
.cert-card li { font-size: 15.5px; margin-bottom: 11px; }
.cert-card li:last-child { margin-bottom: 0; }
.cert-card li small { display: block; color: var(--text-soft); font-size: 13px; line-height: 1.5; }

/* 事業内容のミニリスト */
.biz-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 24px; }
.biz-list li { position: relative; padding-left: 30px; font-size: 16px; }
.biz-list li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--main); }

/* ---------- ミッション・ビジョン・バリュー ---------- */
.mvv { background: linear-gradient(180deg, #fff7e8 0%, #ffe9d6 100%); }
.mvv-statements { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.mvv-card { background: var(--card-bg); border-radius: 14px; padding: 26px 26px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); border-top: 5px solid var(--main); }
.mvv-card.vision { border-top-color: var(--sub); }
.mvv-label { display: block; font-weight: 800; letter-spacing: .08em; font-size: 22px; color: var(--main); margin-bottom: 12px; line-height: 1.3; }
.mvv-card.vision .mvv-label { color: var(--sub); }
.mvv-label small { display: block; font-size: 13px; letter-spacing: .04em; font-weight: 700; color: var(--text-soft); margin-top: 2px; }
.mvv-card p { margin: 0; font-size: 17.5px; line-height: 1.85; }

.mvv-value { background: var(--card-bg); border-radius: 14px; padding: 30px 28px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.mvv-label.center { text-align: center; color: var(--main-dark); }
.mvv-lead { text-align: center; margin: 2px 0 26px; color: var(--text-soft); font-size: 16px; }
.mvv-lead strong { color: var(--text); }
.value-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.vg-head { font-size: 18px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid #f0e2cf; color: var(--main-dark); }
.value-group.pro .vg-head { color: var(--sub); }
.value-list { list-style: none; counter-reset: v; margin: 0; padding: 0; }
.value-group.pro .value-list { counter-reset: v 3; }
.value-list li { position: relative; padding-left: 46px; margin-bottom: 18px; font-size: 15.5px; line-height: 1.7; color: var(--text-soft); }
.value-list li:last-child { margin-bottom: 0; }
.value-list li strong { display: block; font-size: 17px; color: var(--text); margin-bottom: 3px; line-height: 1.55; }
.value-list li::before { counter-increment: v; content: counter(v); position: absolute; left: 0; top: 1px; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; background: var(--main); color: #fff; font-weight: 700; font-size: 16px; }
.value-group.pro .value-list li::before { background: var(--sub); }

/* 認定団体・提携先のロゴ列 */
.org-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #f0e2cf; }
.org-logos .lbl { width: 100%; font-size: 13px; color: var(--text-soft); margin: 0 0 4px; }
.org-logo { height: 52px; width: auto; display: block; }
/* ロゴ未入手の差し込み口（素材が届いたら下の placeholder を <img> に差し替え） */
.org-logo-ph { height: 52px; min-width: 150px; border: 1px dashed #e0b489; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #b58a5c; font-size: 12px; background: #fff8ef; text-align: center; padding: 0 12px; }

/* ---------- 放置リスクのチップ（空き家Q&Aページ） ---------- */
.risk-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.risk-chip {
  background: #fff; border: 1px solid #f3d8bf; border-radius: 999px;
  padding: 10px 18px; font-size: 15px; font-weight: 600; color: var(--main-dark);
  display: inline-flex; align-items: center; gap: 8px;
}

/* ---------- Q&A カード（空き家Q&Aページ） ---------- */
.qa-list { display: flex; flex-direction: column; gap: 16px; }
.qa { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden; }
.qa .q { display: flex; gap: 12px; align-items: center; padding: 16px 20px; background: linear-gradient(90deg, #fff4ea, #ffffff); }
.qa .q h3 { margin: 0; font-size: 17.5px; color: var(--main-dark); }
.qa .a { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-top: 1px solid #f3e6d4; }
.qa .a .ans { font-size: 16px; }
.qa .a .ans ul { margin: 8px 0 0; padding-left: 1.1em; }
.qa .a .ans li { margin-bottom: 6px; }
.qa .badge {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 17px; line-height: 1;
}
.qa .q .badge { background: var(--main); color: #fff; }
.qa .a .badge { background: #e6eef0; color: var(--sub); }

/* 強調ハイライト（最大6倍など） */
.kw { color: var(--accent); font-weight: bold; }

/* ---------- 下層ページのスマホ対応 ---------- */
@media (max-width: 760px) {
  .page-hero h1 { font-size: 23px; }
  .svc-top { grid-template-columns: 1fr; gap: 18px; }
  .svc-figure { order: -1; }                 /* スマホは写真を先に見せる */
  .svc-items { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .price-card .price-amount { font-size: 26px; }
  .assurance { grid-template-columns: 1fr; }
  .closing-inner { padding: 30px 20px; }
  .closing-inner h2 { font-size: 21px; }
  .closing-inner .promise { font-size: 18px; }
  .greeting { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .greeting-photo { max-width: 260px; margin: 0 auto; }
  .mvv-statements { grid-template-columns: 1fr; gap: 16px; }
  .value-groups { grid-template-columns: 1fr; gap: 26px; }
  .mvv-value { padding: 24px 20px; }
  .cert-grid { grid-template-columns: 1fr; }
  .biz-list { grid-template-columns: 1fr; }
  .legal dl { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
  .legal dt { margin-top: 8px; }
}

/* ---------- 規約・ポリシーなどの文書ページ（プライバシーポリシー等） ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal .intro { font-size: 16px; margin: 0 0 8px; }
.legal h2 {
  font-size: 19px; color: var(--main-dark); margin: 30px 0 12px;
  padding-left: 12px; border-left: 4px solid var(--main);
}
.legal h2:first-of-type { margin-top: 6px; }
.legal p { font-size: 16px; margin: 0 0 12px; }
.legal ul { padding-left: 1.3em; margin: 0 0 12px; }
.legal li { font-size: 16px; margin-bottom: 8px; }
.legal a { color: var(--accent); }
.legal dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0 0 12px; }
.legal dt { font-weight: bold; color: var(--main-dark); }
.legal dd { margin: 0; }
.legal .revised { margin-top: 30px; padding-top: 16px; border-top: 1px solid #f0ddc6; color: var(--text-soft); font-size: 15px; }