@charset "UTF-8";
/* =========================================================
   sub.css  (サービス系 共通スタイル / ZEH-Viewer基準)
   対象: .anyone-page, .airtight-page, .zeh-page
   差分は各CSSに最小限だけ残す
========================================================= */

/* ===== ページ全体 ===== */
.anyone-page, .airtight-page, .zeh-page { padding: 32px 0 64px; }
.anyone-page .prose,
.airtight-page .prose,
.zeh-page .prose {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  line-height: 1.9;
}

/* ===== タイトルセクション ===== */
.anyone-page .page-title,
.airtight-page .page-title,
.zeh-page .page-title {
  background: #f7faf8;
  border-bottom: 1px solid var(--border);
  padding: 24px 0 16px;
  text-align: center;
}
.anyone-page .page-title h1,
.airtight-page .page-title h1,
.zeh-page .page-title h1 {
  font-size: clamp(24px, 3.2vw, 32px);
  margin: 6px 0 10px;
  font-weight: 800;
}
.anyone-page .page-title .lead,
.airtight-page .page-title .lead,
.zeh-page .page-title .lead {
  font-size: 1.05rem;
  color: #667085;
}

/* ===== セクション見出し・基本余白 ===== */
.anyone-page section,
.airtight-page section,
.zeh-page section { padding: 20px 0; }

.anyone-page .intro h2, .anyone-page .details h2, .anyone-page #services h2, .anyone-page #faq h2,
.airtight-page .intro h2, .airtight-page .details h2, .airtight-page #services h2, .airtight-page #faq h2,
.zeh-page .intro h2, .zeh-page .details h2, .zeh-page #services h2, .zeh-page #faq h2 {
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 26px 0 14px;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
}

/* ===== Hotfix: reset conflicts from global CSS ===== */

/* 1) 本文ブロックを明示ブロック化＆フロート解除 */
.anyone-page .prose,
.airtight-page .prose,
.zeh-page .prose {
  display: block;
  float: none;
}
.anyone-page .prose::after,
.airtight-page .prose::after,
.zeh-page .prose::after { content:""; display:block; clear:both; }

/* 2) ボタン系の“位置ズレ”を禁止 */
.anyone-page .btn,
.airtight-page .btn,
.zeh-page .btn,
.anyone-page .btn-outline,
.airtight-page .btn-outline,
.zeh-page .btn-outline {
  position: static !important;
  float: none !important;
  margin: 0; /* 余白は .btn-row で管理 */
  vertical-align: middle;
}

/* 3) ボタン行は必ず中央寄せ */
.anyone-page .btn-row,
.airtight-page .btn-row,
.zeh-page .btn-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  text-align: center !important;
}

/* 4) h2/h3の外部マージン干渉を吸収 */
.anyone-page .prose h3,
.airtight-page .prose h3,
.zeh-page .prose h3 { margin: 18px 0 6px !important; }
.anyone-page .intro h2,
.anyone-page .details h2,
.anyone-page #services h2,
.anyone-page #faq h2,
.airtight-page .intro h2,
.airtight-page .details h2,
.airtight-page #services h2,
.airtight-page #faq h2,
.zeh-page .intro h2,
.zeh-page .details h2,
.zeh-page #services h2,
.zeh-page #faq h2 {
  margin: 26px 0 14px !important;
}

/* 5) 画像・埋め込みの横はみ出しを抑止 */
.anyone-page img, .airtight-page img, .zeh-page img,
.anyone-page iframe, .airtight-page iframe, .zeh-page iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 6) .related-services セクションのセンタリングを強制 */
.anyone-page .related-services,
.airtight-page .related-services,
.zeh-page .related-services { text-align: center !important; }

/* ===== Related Services polish (共通) ===== */

/* 見出し周りの間隔 */
.related-services { margin: 44px 0 28px; text-align: center; }
.related-services h2 { margin: 0 0 18px; }

/* グリッド幅を本文(.prose)と揃える＆中央寄せ */
.service-cards{
  max-width: 860px;          /* .prose と同幅 */
  margin: 0 auto 22px;       /* 中央寄せ */
  display: grid;
  grid-template-columns: 1fr;/* 1列（読みやすさ優先） */
  gap: 16px;
}

/* カードの質感と内側余白 */
.service-cards .card{
  background: #f6faf7;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
  text-align: center;
}

/* タイトルと本文の余白 */
.service-cards .card h3{ font-size: 1.08rem; margin: 4px 0 8px; }
.service-cards .card p{ font-size: .95rem; margin: 0 0 12px; color:#404a57; }

/* ボタンは中央配置 */
.service-cards .card .btn{
  display: inline-block;
  margin: 0 auto;
}

/* ほんのりホバー */
.service-cards .card:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

/* 画面が広いときだけ2列に（任意） */
@media (min-width: 980px){
  .service-cards.two-cols{
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 18px;
  }
}

/* 狭い端末の内側余白を最適化 */
@media (max-width: 480px){
  .service-cards .card{ padding: 14px 14px; }
}

/* ===== Button row: safety & UX polish ===== */
.btn-row{
  display:flex; gap:.6rem; flex-wrap:wrap;
  justify-content:center; align-items:center;
  margin:10px 0 4px;
}
.btn, .btn-outline{ vertical-align:middle; }
.btn:focus-visible, .btn-outline:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent) 35%, #000);
  outline-offset:2px;
}

/* 固定ヘッダー分だけアンカー位置をずらす（#services など） */
.anyone-page [id], .airtight-page [id], .zeh-page [id]{ scroll-margin-top: 90px; }

/* ===== Fix: .btn-outline が消える問題を強制上書き ===== */
.btn-row > .btn,
.btn-row > .btn-outline{
  display: inline-block !important;
  padding: .7rem 1.2rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.btn-row > .btn-outline{
  border: 1px solid var(--accent, #22a06b) !important;
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
.btn-row > .btn-outline:hover{ background: #f8fafc !important; }

/* =========================================================
   Breadcrumbs（サービス系 共通）
   - 本文幅(860px)に合わせて中央寄せ
   - 区切り記号はHTML側に直書き（疑似要素は無効化）
========================================================= */
.anyone-page .breadcrumbs,
.airtight-page .breadcrumbs,
.zeh-page .breadcrumbs{
  font-size: .9rem;
  max-width: 860px;
  margin: 12px auto 0;  /* 中央寄せ */
  padding: 0 20px;      /* .prose と同じ内側余白 */
}
.anyone-page .breadcrumbs ol,
.airtight-page .breadcrumbs ol,
.zeh-page .breadcrumbs ol{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.anyone-page .breadcrumbs li,
.airtight-page .breadcrumbs li,
.zeh-page .breadcrumbs li{ list-style: none; }

/* 他CSSからの疑似要素を無効化（"?" や ">" の混入防止） */
.anyone-page .breadcrumbs *::before,
.airtight-page .breadcrumbs *::before,
.zeh-page .breadcrumbs *::before,
.anyone-page .breadcrumbs *::after,
.airtight-page .breadcrumbs *::after,
.zeh-page .breadcrumbs *::after{
  content: none !important;
}