@charset "UTF-8";
/* =====================================================================
   無呼吸ラボ トップページ 本文スタイル（B-ii：レスポンシブ単一URL）
   方針：ブランドのネイビーを基調に、罫線ベースのフラットで編集的な質感。
   多色アクセント・過剰な影/チップ/シェブロンを排し、装飾を最小化。
   ===================================================================== */
:root{
  --t-navy:#003b96; --t-navy-d:#002a6e; --t-link:#0a59c2;
  --t-green:#007541; --t-green-d:#005037;
  --t-ink:#15233b; --t-sub:#56627a; --t-line:#e3e8f1; --t-line-d:#d3ddec;
  --t-soft:#f1f5fb; --t-paper:#fff;
  --t-shadow-h:0 8px 22px rgba(16,38,76,.09);
}
*{ box-sizing:border-box; }
body{ margin:0; color:var(--t-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(--t-link); }

.t-main{ padding-top:119px; }
.t-wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }
.t-section{ padding:58px 0; }
.t-section + .t-section{ padding-top:0; }

/* ---------- ヒーロー ---------- */
.t-hero{ background:var(--t-soft); border-bottom:1px solid var(--t-line); }
.t-hero__inner{ max-width:1040px; margin:0 auto; padding:50px 24px 48px;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.84fr); column-gap:44px; align-items:start;
  grid-template-areas:
    "eyebrow visual"
    "title   visual"
    "lead    visual"
    "links   visual"
    "cta     visual"; }
.t-hero__eyebrow{ grid-area:eyebrow; justify-self:start; display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  color:var(--t-navy); padding-bottom:6px; border-bottom:2px solid var(--t-navy); }
.t-hero__title{ grid-area:title; font-size:clamp(28px,7.6vw,38px); font-weight:800; line-height:1.42; color:var(--t-navy-d);
  margin:16px 0 12px; letter-spacing:-.01em; }
.t-hero__lead{ grid-area:lead; font-size:12px; color:var(--t-sub); margin:0 0 24px; }
.t-hero__links{ grid-area:links; list-style:none; margin:0 0 26px; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-items:stretch; }
.t-hero__links a{ height:100%; display:flex; align-items:center; gap:10px;
  background:var(--t-navy); border-radius:4px; padding:13px 16px;
  font-size:16px; font-weight:700; color:#fff; text-decoration:none; line-height:1.34;
  transition:background .16s ease; }
.t-hero__links a:hover{ background:var(--t-navy-d); }
.t-hero__links__ic{ width:30px; flex:none; display:grid; place-items:center; }
.t-hero__links__ic img{ width:auto; height:auto; max-width:28px; max-height:26px; }
.t-hero__links__tx{ white-space:nowrap; }
.t-hero__links br{ display:none; }   /* PCは1行（改行なし） */

.t-hero__cta{ grid-area:cta; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.t-btn{ display:inline-flex; align-items:center; gap:13px; min-width:0; padding:14px 18px;
  border-radius:4px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
.t-btn__ic{ width:28px; height:28px; flex:none; display:grid; place-items:center; }
.t-btn__ic svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.t-btn__tx{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; min-width:0; }
.t-btn__note{ font-size:11px; font-weight:600; opacity:.9; }
.t-btn__label{ font-size:18px; font-weight:800; letter-spacing:.01em; }
.t-btn--check{ background:#fff; color:var(--t-green-d); border:1.5px solid var(--t-green); }
.t-btn--check:hover{ background:#f1f8f4; }
.t-btn--hospital{ background:var(--t-green); color:#fff; }
.t-btn--hospital:hover{ background:var(--t-green-d); }

.t-hero__visual{ grid-area:visual; align-self:center; aspect-ratio:4/3; border-radius:4px; overflow:hidden; }
.t-hero__visual img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- 監修医ストリップ ---------- */
.t-supervise{ background:#eaf1fb; border-bottom:1px solid var(--t-line); }
.t-supervise__inner{ display:flex; align-items:center; justify-content:center; gap:12px; padding-top:12px; padding-bottom:12px; }
.t-supervise__ic{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--t-navy); color:#fff; }
.t-supervise__ic svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.t-supervise__tx{ margin:0; font-size:13px; color:var(--t-ink); line-height:1.5; }
.t-supervise__tx b{ color:var(--t-navy); font-weight:800; }
.t-supervise__dr{ margin-left:10px; padding-left:12px; border-left:1px solid var(--t-line-d); color:var(--t-sub); font-size:12.5px; }

/* ---------- 動画 ---------- */
.t-video{ max-width:680px; margin:0 auto; }
.t-video__frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:4px;
  overflow:hidden; border:1px solid var(--t-line); background:#000; }
.t-video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.t-video__more{ margin:12px 0 0; font-size:13.5px; text-align:center; }

/* ---------- バナー ---------- */
.t-bnr{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.t-bnr a{ display:block; border-radius:4px; overflow:hidden; border:1px solid var(--t-line);
  transition:border-color .16s ease; }
.t-bnr a:hover{ border-color:var(--t-navy); }
.t-bnr picture{ display:block; }
.t-bnr a img{ width:100%; }

/* ---------- 最新更新情報 ---------- */
.t-news{ border:1px solid var(--t-line); border-radius:4px; padding:24px 28px; }
.t-news__head{ display:flex; align-items:center; gap:11px; margin:0 0 6px; }
.t-news__head h2{ font-size:16px; font-weight:800; color:var(--t-navy); margin:0; letter-spacing:.01em; }
.t-news__head .t-news__badge{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--t-navy);
  border:1px solid var(--t-navy); padding:2px 9px; border-radius:3px; }
.t-news ul{ list-style:none; margin:0; padding:0; }
.t-news li{ border-top:1px solid var(--t-line); }
.t-news li:first-child{ border-top:0; }
.t-news a{ display:block; padding:13px 0 13px 18px; position:relative; font-size:14px; color:var(--t-ink); text-decoration:none; }
.t-news a::before{ content:""; position:absolute; left:2px; top:1.25em; width:5px; height:5px;
  border-top:2px solid var(--t-navy); border-right:2px solid var(--t-navy); transform:rotate(45deg); }
.t-news a:hover{ color:var(--t-link); }

/* ---------- カテゴリ別コンテンツ ---------- */
.t-cat{ --cat:#003b96; }            /* アクセントはネイビーで統一 */
.t-cat__head{ display:block; margin:0 0 24px; }
.t-cat__title{ font-size:clamp(20px,2.6vw,25px); font-weight:800;
  color:var(--t-ink); margin:0; padding-bottom:12px; line-height:1.36; letter-spacing:.01em;
  border-bottom:1px solid var(--t-line); }
.t-cat__title a{ color:inherit; text-decoration:none; }
.t-cat__title a:hover{ color:var(--t-navy); text-decoration:underline; }
.t-cat__title small{ display:block; font-size:13px; font-weight:500; color:var(--t-sub);
  margin-top:5px; line-height:1.5; }
.t-cat__more{ margin:10px 0 0; text-align:right; }
.t-cat__more a{ font-size:13px; font-weight:700; color:var(--cat); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px; white-space:nowrap; transition:border-color .16s; }
.t-cat__more a:hover{ border-bottom-color:currentColor; }

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

/* 関連リンク（カテゴリ内の補助導線） */
.t-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:24px; }
.t-links a{ display:flex; align-items:center; gap:12px; padding:15px 18px; background:#fff;
  border:1px solid var(--t-line-d); border-radius:4px; color:var(--t-ink);
  font-size:14.5px; font-weight:700; text-decoration:none; transition:border-color .16s ease, color .16s ease; }
.t-links__ic{ width:24px; height:24px; flex:none; display:grid; place-items:center; }
.t-links__ic svg{ width:22px; height:22px; fill:none; stroke:var(--cat); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.t-links__tx{ flex:1; }
.t-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; }
.t-links a:hover{ border-color:var(--cat); color:var(--cat); }
.t-links a:hover::after{ border-color:var(--cat); }

/* ---------- アプリ訴求 ---------- */
.t-app{ background:var(--t-soft); border:1px solid var(--t-line); border-radius:4px;
  padding:30px 32px; display:grid; grid-template-columns:170px 1fr; gap:30px; align-items:center; }
.t-app__img figure{ margin:0; }
.t-app__title{ font-size:19px; font-weight:800; color:var(--t-navy); margin:0 0 7px; letter-spacing:.01em; }
.t-app__text{ font-size:13.5px; color:var(--t-sub); margin:0 0 16px; }
.t-app__btns{ display:flex; gap:12px; flex-wrap:wrap; }
.t-app__btns a{ display:block; }
.t-app__btns img{ height:42px; width:auto; }

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .t-hero__inner{ grid-template-columns:1fr; column-gap:0; row-gap:14px; align-items:stretch; padding:30px 24px 28px;
    grid-template-areas:
      "eyebrow"
      "title"
      "visual"
      "links"
      "cta"; }
  .t-hero__eyebrow{ justify-self:start; }
  .t-hero__title{ margin:0; font-size:clamp(20px,7.6vw,28px); line-height:1.42; }
  .t-hero__lead{ display:none; }
  .t-hero__visual{ justify-self:center; align-self:center; width:100%; max-width:180px; margin:2px 0; aspect-ratio:auto; background:none; }
  .t-hero__visual img{ width:100%; height:auto; object-fit:contain; }
  .t-hero__links{ margin:0; }
  .t-cards{ grid-template-columns:repeat(3,1fr); }
  .t-app{ grid-template-columns:130px 1fr; gap:22px; padding:24px; }
}
@media (max-width:768px){
  .t-main{ padding-top:56px; }
  .t-section{ padding:40px 0; }
  .t-supervise__inner{ flex-direction:column; gap:5px; text-align:center; }
  .t-supervise__tx{ font-size:12.5px; }
  .t-supervise__dr{ display:block; margin:2px 0 0; padding:0; border-left:0; font-size:12px; }
  .t-hero__links a{ padding:13px 12px; gap:8px; line-height:1.4; }
  .t-hero__links__ic{ width:26px; }
  .t-hero__links__ic img{ max-width:24px; max-height:22px; }
  .t-cat__head{ margin-bottom:18px; }
  .t-cat__title{ white-space:nowrap; font-size:clamp(15px,5vw,22px); line-height:1.3; padding-bottom:9px; }
  .t-cat__title small{ white-space:normal; font-size:12px; margin-top:6px; }
  .t-cat__more{ font-size:12px; margin:8px 0 0; }
  .t-app{ grid-template-columns:1fr; text-align:center; }
  .t-app__img figure{ max-width:150px; margin:0 auto; }
  .t-app__btns{ justify-content:center; }
}
@media (max-width:600px){
  .t-cards{ grid-template-columns:repeat(2,1fr); }
  .t-hero__links br{ display:inline; }   /* 狭幅は固定位置で改行 */
  .t-hero__links a{ line-height:1.46; }
  /* CTAはスタック＋影・矢印で主役化（ネイビーのカテゴリボタンと明確に差別化） */
  .t-hero__cta{ grid-template-columns:1fr; gap:11px; }
  .t-btn{ width:100%; justify-content:flex-start; gap:13px; padding:15px 16px; position:relative;
    box-shadow:0 3px 12px rgba(16,38,76,.10); }
  .t-btn__tx{ flex:1; gap:3px; }
  .t-btn__note{ font-size:11.5px; }
  .t-btn__label{ font-size:17px; white-space:normal; }
  .t-btn::after{ content:""; width:9px; height:9px; flex:none; align-self:center;
    border-top:2.4px solid currentColor; border-right:2.4px solid currentColor; transform:rotate(45deg); opacity:.55; }
  .t-btn--check{ background:#eef7f1; }
  .t-btn--hospital{ box-shadow:0 5px 16px rgba(0,117,65,.30); }
}
@media (max-width:480px){
  .t-cards{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .t-card__body{ padding:12px 13px 15px; }
  .t-card__eyebrow{ font-size:11px; margin-bottom:5px; }
  .t-card__title{ font-size:14px; line-height:1.5; }
  .t-bnr{ grid-template-columns:1fr; }
}
@media (max-width:360px){
  .t-hero__inner{ grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "title" "lead" "visual" "links" "cta"; }
  .t-hero__visual{ max-width:180px; }
  .t-hero__links a{ font-size:12.5px; padding:12px 9px; gap:6px; }
  .t-hero__links__ic{ width:22px; }
  .t-hero__links__ic img{ max-width:20px; max-height:20px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .t-card a:hover{ transform:none; }
  .t-card a:hover .t-card__thumb img{ transform:none; }
}