@charset "UTF-8";
/* =====================================================================
   無呼吸ラボ 下層ページ（ハブ／一覧）共通スタイル（第2段階・レスポンシブ）
   トップ（top-responsive.css）と同じデザイン言語：ネイビー基調・罫線ベース・フラット。
   ===================================================================== */
:root{
  --p-navy:#003b96; --p-navy-d:#002a6e; --p-link:#0a59c2;
  --p-green:#007541; --p-green-d:#005037;
  --p-ink:#15233b; --p-sub:#56627a; --p-line:#e3e8f1; --p-line-d:#d3ddec;
  --p-soft:#f1f5fb;
  --p-shadow-h:0 8px 22px rgba(16,38,76,.09);
}
*{ box-sizing:border-box; }
body{ margin:0; color:var(--p-ink); background:#fff;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.82; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--p-link); }

.p-main{ padding-top:119px; }
.p-wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

/* パンくず */
.p-bc{ background:var(--p-soft); border-bottom:1px solid var(--p-line); }
.p-bc__list{ max-width:1040px; margin:0 auto; padding:11px 24px; list-style:none; display:flex; flex-wrap:wrap; gap:4px 6px; font-size:12px; color:var(--p-sub); }
.p-bc__list li{ display:flex; align-items:center; gap:6px; }
.p-bc__list li+li::before{ content:"›"; color:#9fb0cc; }
.p-bc__list a{ color:var(--p-sub); text-decoration:none; }
.p-bc__list a:hover{ color:var(--p-link); text-decoration:underline; }
.p-bc__list li:last-child{ color:var(--p-ink); font-weight:600; }

/* ページ見出し */
.p-head{ padding:44px 0 30px; border-bottom:1px solid var(--p-line); margin-bottom:38px; }
.p-head__title{ font-size:clamp(24px,3.6vw,34px); font-weight:800; color:var(--p-navy-d); margin:0 0 12px; letter-spacing:-.01em; line-height:1.35; }
.p-head__lead{ font-size:14.5px; color:var(--p-sub); margin:0; max-width:760px; }

/* セクション（ハブ用） */
.p-section{ padding-bottom:50px; }
.p-sec__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 22px; padding-bottom:13px; border-bottom:1px solid var(--p-line); }
.p-sec__title{ font-size:clamp(19px,2.5vw,23px); font-weight:800; color:var(--p-ink); margin:0; line-height:1.35; }
.p-sec__title small{ display:block; font-size:13px; font-weight:500; color:var(--p-sub); margin-top:4px; }
.p-sec__more a{ font-size:13px; font-weight:700; color:var(--p-navy); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; white-space:nowrap; }
.p-sec__more a:hover{ border-bottom-color:currentColor; }

/* カードグリッド */
.p-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.p-card a{ display:block; height:100%; background:#fff; border:1px solid var(--p-line); border-radius:4px; overflow:hidden; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.p-card a:hover{ transform:translateY(-3px); box-shadow:var(--p-shadow-h); border-color:var(--p-navy); }
.p-card__thumb{ aspect-ratio:1/1; overflow:hidden; background:var(--p-soft); border-bottom:1px solid var(--p-line); }
.p-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.p-card a:hover .p-card__thumb img{ transform:scale(1.03); }
.p-card__body{ padding:15px 18px 19px; }
.p-card__eyebrow{ display:block; font-size:11.5px; font-weight:700; color:var(--p-navy); letter-spacing:.02em; margin-bottom:7px; }
.p-card__title{ font-size:14.5px; font-weight:700; line-height:1.6; color:var(--p-ink); margin:0; }

/* 関連リンク（タイル） */
.p-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:24px; }
.p-links a{ display:flex; align-items:center; gap:12px; padding:15px 18px; background:#fff; border:1px solid var(--p-line-d); border-radius:4px; color:var(--p-ink); font-size:14.5px; font-weight:700; text-decoration:none; transition:border-color .16s ease, color .16s ease; }
.p-links__ic{ width:24px; height:24px; flex:none; display:grid; place-items:center; }
.p-links__ic svg{ width:22px; height:22px; fill:none; stroke:var(--p-navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.p-links__tx{ flex:1; }
.p-links a::after{ content:""; width:8px; height:8px; flex:none; border-top:2px solid #aab9d2; border-right:2px solid #aab9d2; transform:rotate(45deg); transition:border-color .16s; }
.p-links a:hover{ border-color:var(--p-navy); color:var(--p-navy); }
.p-links a:hover::after{ border-color:var(--p-navy); }

/* 下部CTA */
.p-cta{ margin:10px 0 64px; background:var(--p-soft); border:1px solid var(--p-line); border-radius:4px; padding:30px; text-align:center; }
.p-cta__title{ font-size:18px; font-weight:800; color:var(--p-navy); margin:0 0 6px; }
.p-cta__text{ font-size:13.5px; color:var(--p-sub); margin:0 0 18px; }
.p-cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.p-btn{ display:inline-flex; align-items:center; gap:11px; padding:14px 24px; border-radius:4px; text-decoration:none; font-weight:800; font-size:15px; transition:background .16s, border-color .16s; }
.p-btn__ic{ width:24px; height:24px; flex:none; display:grid; place-items:center; }
.p-btn__ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.p-btn--check{ background:var(--p-green); color:#fff; }
.p-btn--check:hover{ background:var(--p-green-d); }
.p-btn--hospital{ background:#fff; color:var(--p-green-d); border:1.5px solid var(--p-green); }
.p-btn--hospital:hover{ background:#f1f8f4; }

/* レスポンシブ */
@media (max-width:900px){ .p-cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .p-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
  .p-main{ padding-top:56px; }
  .p-head{ padding:30px 0 22px; margin-bottom:28px; }
  .p-section{ padding-bottom:38px; }
  .p-sec__head{ flex-wrap:wrap; align-items:baseline; }
  .p-cta{ padding:24px 20px; }
  .p-cta__btns{ flex-direction:column; }
  .p-btn{ justify-content:center; }
}
@media (max-width:480px){
  .p-cards{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .p-card__body{ padding:12px 13px 15px; }
  .p-card__eyebrow{ font-size:11px; margin-bottom:5px; }
  .p-card__title{ font-size:14px; line-height:1.5; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .p-card a:hover{ transform:none; }
  .p-card a:hover .p-card__thumb img{ transform:none; }
}
