@charset "UTF-8";
/* ============================================================
   splight tracker LP — sub.css（2026-09-15）
   特徴・仕組み（features/）・用途（usecase/）・アプリ（app/）専用の追加部品。
   ・site.css の後に読み込む。色・書体・余白は site.css のトークンだけを使う
   ・全面ライト／ボタンは四角／枠線は区切り線中心で最小限
   ・オレンジや緑の塗りの上に白文字を置かない（文字は --ink-strong 系）
   ============================================================ */

/* section 以外の id（小見出し等）にもヘッダー分の余白を確保 */
.sub-page [id]{scroll-margin-top:calc(var(--header-h) + 16px);}
.sub-page ol{list-style:none;}   /* site.css は ul だけ消しているため ol の番号も消す */

/* 見出しは単語の途中で折らない（<wbr> と句読点で折る。入りきらない時だけ文字単位） */
.page-head h1,.sub-page .sec-head h2,.next-cta .t,.toc a,.uc-points dt,.dlist dt,
.mode-list h4,.layers .t,.dl-card h3,.faq summary{word-break:keep-all; overflow-wrap:anywhere;}

/* カタカナ語など、途中で折りたくない語（「アクチュエー／ター」「トラ／ッカー」のような割れを防ぐ） */
.nw{white-space:nowrap;}
/* 最後の行が1〜2文字だけになるのを避ける（対応ブラウザのみ効く。非対応でも表示は崩れない） */
.sub-page main :is(p,dd,li,figcaption){text-wrap:pretty;}
.page-head h1,.sub-page .sec-head h2{text-wrap:balance;}

/* ---- ヘッダー: 現在のページ ---- */
.gnav a[aria-current="page"]{color:var(--ink-strong);}
.gnav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1);}

/* ============================================================
   パンくず
   ============================================================ */
.crumbs{padding-top:18px;}
.crumbs ol{display:flex; flex-wrap:wrap; font-size:12.5px; line-height:1.8; color:var(--sub2);}
.crumbs li{display:flex; align-items:center;}
.crumbs li + li::before{content:"›"; margin:0 10px; color:var(--sub2);}
.crumbs a{color:var(--green-ink-strong); text-decoration:underline; text-underline-offset:3px;}
.crumbs [aria-current="page"]{color:var(--ink);}

/* ============================================================
   ページ冒頭（見出し・リード・ページ内目次・写真）
   ============================================================ */
.page-head{padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,96px);}
.page-head-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,72px); align-items:start;
}
.page-head h1{
  font-family:var(--font-head); font-size:clamp(26px,3.5vw,40px); font-weight:900;
  line-height:1.45; letter-spacing:.01em; color:var(--ink-strong);
}
.page-head .lead{margin-top:22px; font-size:15px; color:var(--sub); line-height:2.0;}
.page-head .lead + .note-s{margin-top:10px;}
.page-head-media{margin:6px 0 0;}
.page-head-media img{width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius-card);}

/* ---- ページ内目次 ---- */
.toc{margin-top:32px;}
.toc-t{font-size:12.5px; font-weight:700; color:var(--sub); letter-spacing:.04em; margin-bottom:8px;}
.toc ol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; border-top:1px solid var(--line2);}
.toc.one ol{grid-template-columns:1fr;}
.toc li{border-bottom:1px solid var(--line);}
/* a の中身はカタカナ語ごとに span で包まれるため、flex（子ごとに gap が入る）にしない */
.toc a{
  display:block; padding:11px 2px;
  font-size:14px; font-weight:700; line-height:1.7; color:var(--ink-strong); transition:color .2s;
}
.toc a:hover{color:var(--green-ink-strong);}
.toc .n{display:inline-block; width:2.6em; font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--green-ink-strong);}
.toc .s{font-weight:400; color:var(--sub2);}
.toc-foot{margin-top:12px;}

/* ============================================================
   本文の共通部品
   ============================================================ */
.sub-page .sec-head + .feature{padding-top:0;}
.sub-page .feature:last-child{padding-bottom:0;}
.feature.fig-right .feature-fig{order:2;}           /* 900px 以下は site.css の order:-1 !important が優先 */
.feature-body .h-item{font-size:17px; font-weight:700; letter-spacing:.02em; line-height:1.7; margin:0 0 6px;}
.feature-body p + .h-item,.feature-body .dlist + .h-item{margin-top:24px;}
.feature-body .dlist{margin-top:4px;}

.more{margin-top:18px; font-size:14px;}
.text-link{
  display:inline; line-height:1.7;
  color:var(--green-ink-strong); font-weight:700; text-decoration:underline; text-underline-offset:4px;
}
.text-link::after{
  content:""; display:inline-block; vertical-align:middle; margin:-2px 0 0 8px;
  width:14px; height:7px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M0 4h13M9.5 .8 13.2 4 9.5 7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M0 4h13M9.5 .8 13.2 4 9.5 7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/></svg>") no-repeat center/contain;
  transition:transform .2s ease;
}
.text-link:hover::after{transform:translateX(3px);}
.inline-link{color:var(--green-ink-strong); font-weight:700; text-decoration:underline; text-underline-offset:3px;}

/* ---- 項目と説明の一覧（部位・仕様・復旧） ---- */
.dlist{border-top:1px solid var(--line2);}
.dlist > div{display:grid; grid-template-columns:11em minmax(0,1fr); gap:4px 20px; padding:14px 0; border-bottom:1px solid var(--line);}
.dlist dt{font-family:var(--font-head); font-size:15px; font-weight:700; line-height:1.75; color:var(--ink-strong);}
.dlist dd{font-size:14px; color:var(--sub); line-height:1.95;}

/* ---- 部位の一覧（写真＋一覧の2列） ---- */
.parts-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,64px); align-items:start;}
.parts-grid figure{margin:0;}
.parts-grid img{width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius-card);}
.parts-grid figcaption{margin-top:10px; font-size:12px; color:var(--sub2); line-height:1.8;}

/* ---- 1日の動き ---- */
.day{margin-top:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line2);}
.day li{padding:12px 10px 12px 0; border-bottom:1px solid var(--line);}
.day li + li{padding-left:14px; border-left:1px solid var(--line);}
.day .t{display:block; font-family:var(--font-head); font-size:14.5px; font-weight:700; line-height:1.6; color:var(--ink-strong);}
.day .d{display:block; margin-top:2px; font-size:13px; line-height:1.8; color:var(--sub);}

/* ---- アプリ画面の切り抜き（通知の部分だけ見せる） ---- */
.feature-fig .phone-crop{max-width:340px; margin:0 auto;}
.feature-fig .phone-crop img{
  width:100%; height:auto; aspect-ratio:440 / 360; object-fit:cover; object-position:top;
  border-radius:18px; border:1px solid var(--line2); background:#fff;
  box-shadow:0 16px 38px rgba(20,40,10,.12);
}
.feature-fig .phone-crop + figcaption{text-align:center;}

/* ---- 数字（3つ並び） ---- */
.stat-row.three{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ============================================================
   よくある質問（開閉）
   ============================================================ */
.faq{max-width:880px; border-top:1px solid var(--line2);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:auto minmax(0,1fr) 16px; align-items:baseline; gap:14px;
  padding:18px 4px; font-family:var(--font-head); font-size:16px; font-weight:700;
  line-height:1.7; color:var(--ink-strong);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:""; width:14px; height:14px; align-self:center; color:var(--green-ink-strong);
  background:
    linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;
}
.faq details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat;}
.faq summary:hover{color:var(--green-ink-strong);}
.faq .k{font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--green-ink-strong);}
.faq .ans{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:0 34px 20px 4px;}
.faq .ans p{font-size:14.5px; color:var(--sub); line-height:2.0;}

/* ============================================================
   用途ページ（3用途を同じ5項目で）
   ============================================================ */
.uc-detail{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4.5vw,64px); align-items:start;}
.uc-fig{margin:0; position:sticky; top:calc(var(--header-h) + 24px);}
.uc-fig img{width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius-card);}
.uc-fig figcaption{margin-top:10px; font-size:12px; color:var(--sub2); line-height:1.8;}
.uc-points{border-top:1px solid var(--line2);}
.uc-points > div{padding:20px 0 22px; border-bottom:1px solid var(--line);}
.uc-points dt{
  display:block; margin-bottom:6px;
  font-family:var(--font-head); font-size:16.5px; font-weight:700; line-height:1.7; color:var(--ink-strong);
}
.uc-points dt .n{display:inline-block; width:1.6em; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--green-ink-strong);}
.uc-points dd{font-size:14.5px; color:var(--sub); line-height:2.0;}
.uc-points dd li{position:relative; padding-left:16px;}
.uc-points dd li::before{content:"・"; position:absolute; left:0;}
.uc-points dd .note-s{margin-top:8px;}
.uc-points dd .more{margin-top:8px;}
.uc-points dd .btn{display:flex; width:fit-content; margin-top:14px;}

/* ============================================================
   アプリページ
   ============================================================ */
.sub-block + .sub-block{margin-top:clamp(40px,4.5vw,64px);}

/* ---- 5つのモード ---- */
.mode-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); column-gap:26px; border-top:1px solid var(--line2);}
.mode-list li{padding:16px 0 14px; border-bottom:1px solid var(--line);}
.mode-list h4{font-size:16px; font-weight:700; letter-spacing:.02em; line-height:1.7; color:var(--ink-strong); margin-bottom:4px;}
@media (max-width:760px){ .mode-list h4{line-height:1.6;} }
.mode-list p{font-size:13.5px; color:var(--sub); line-height:1.9;}

/* ---- 案件＞盤＞回路 ---- */
.layers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}
.layers li{position:relative; background:#fff; border-radius:12px; padding:18px 20px 16px;}
.layers li + li::before{
  content:"›"; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  font-size:18px; font-weight:700; color:var(--green-ink-strong);
}
.layers .t{display:block; margin-bottom:4px; font-family:var(--font-head); font-size:16px; font-weight:700; line-height:1.6; color:var(--ink-strong);}
.layers .t .n{margin-right:8px; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--green-ink-strong);}
.layers p{font-size:13.5px; color:var(--sub); line-height:1.9;}

/* ---- 画面3枚（figure＋説明）。拡大表示は site.js の .shots img をそのまま使う ---- */
.screens{justify-content:center;}
.screens figure{margin:0; flex:0 1 264px; min-width:0;}
.screens figure img{width:100%; height:auto; max-width:none; animation:none;}
.screens figcaption{margin-top:14px; font-size:13px; line-height:1.85; color:var(--sub);}
.screens figcaption b{display:block; margin-bottom:2px; font-family:var(--font-head); font-size:15px; color:var(--ink-strong);}

/* ---- デモ ---- */
.demo-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:20px;}
.demo-row .note-s{margin:0; flex:1 1 240px;}

/* ---- 使い始め方のカード（ストア公開後はカード単位で差し替える） ---- */
.dl-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:28px;}
.dl-card{display:flex; flex-direction:column; gap:8px; background:var(--bg-soft); border-radius:var(--radius-card); padding:clamp(22px,2.6vw,30px);}
.dl-card .k{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--green-ink-strong);}
.dl-card h3{font-size:17px;}
.dl-card .state{position:relative; padding-left:15px; font-size:13px; font-weight:700; line-height:1.8; color:var(--ink-strong);}
.dl-card .state::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--green);}
.dl-card .state.wait::before{background:var(--orange);}
.dl-card p{font-size:13.5px; color:var(--sub); line-height:1.95;}

/* ============================================================
   ページ末尾（トップへ・他のページへ・試算を依頼する）
   ============================================================ */
.page-next-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start;}
.next-links{border-top:1px solid var(--line2);}
.next-links li{border-bottom:1px solid var(--line);}
.next-links a{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 4px;
  font-family:var(--font-head); font-size:15.5px; font-weight:700; line-height:1.7; color:var(--ink-strong);
  transition:color .2s;
}
.next-links a .s{display:block; font-family:var(--font-body); font-size:12.5px; font-weight:400; color:var(--sub2); line-height:1.8;}
.next-links a::after{
  content:""; width:16px; height:8px; flex:none; background:var(--green-ink-strong);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M0 4h13M9.5 .8 13.2 4 9.5 7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M0 4h13M9.5 .8 13.2 4 9.5 7.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/></svg>") no-repeat center/contain;
  transition:transform .2s ease;
}
.next-links a:hover{color:var(--green-ink-strong);}
.next-links a:hover::after{transform:translateX(4px);}
.next-cta{background:var(--bg-soft); border-radius:var(--radius-card); padding:clamp(24px,3.5vw,40px);}
.next-cta .t{margin-bottom:10px; font-family:var(--font-head); font-size:clamp(18px,2.2vw,22px); font-weight:900; line-height:1.7; letter-spacing:.015em; color:var(--ink-strong);}
.next-cta p{font-size:14px; color:var(--sub); line-height:2;}
.next-cta .btn{width:100%; margin-top:18px;}
.next-cta .note-s{margin-top:12px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .page-head-grid,.parts-grid,.uc-detail,.page-next-grid{grid-template-columns:1fr;}
  .uc-fig{position:static;}
  .dl-cards{grid-template-columns:1fr;}
  .layers{grid-template-columns:1fr; gap:12px;}
  .layers li + li::before{content:none;}
}
@media (max-width:760px){
  .crumbs{padding-top:14px;}
  .page-head{padding:20px 0 56px;}
  .page-head h1{font-size:26px; line-height:1.45;}
  .page-head .lead{margin-top:16px; font-size:14.5px; line-height:1.9;}
  .page-head-media img,.parts-grid img,.uc-fig img{aspect-ratio:16 / 10;}
  .toc{margin-top:24px;}
  .toc ol{grid-template-columns:1fr;}
  .dlist > div{grid-template-columns:1fr; gap:2px; padding:12px 0;}
  .day .t{font-size:14px;}
  .day .d{font-size:12.5px;}
  .stat-row.three{grid-template-columns:1fr;}
  .faq summary{font-size:15px; gap:10px; padding:16px 2px;}
  .faq .ans{gap:10px; padding:0 2px 18px;}
  .faq .ans p{font-size:14px; line-height:1.9;}
  .uc-points dt{font-size:16px;}
  .uc-points dd{font-size:14px; line-height:1.9;}
  .uc-points dd .btn{width:100%;}
  /* 画面3枚は site.css の .shots（横スワイプ）に乗せ、1枚＝figure 単位でスナップ */
  /* 上の .screens{justify-content:center} がスマホでも効くと、はみ出した横並びが中央寄せになり
     1枚目が左の画面外（スクロールで戻れない位置）に押し出される（実測: 1枚目 left=-186px）。スマホは左寄せに戻す */
  .screens{justify-content:flex-start; scroll-padding-inline:20px;}
  .screens figure{flex:0 0 78%; max-width:320px; scroll-snap-align:start;}
  .screens figure img{flex:none; width:100%; max-width:none; scroll-snap-align:none;}   /* site.css の .shots img{scroll-snap-align:center} が中の画像にも効き、2枚目に吸着して始まるため解除 */
  .demo-row .btn{width:100%;}
}

/* 設問・目次の補足で、文末の2文字だけが次の行に落ちるのを軽減する */
.faq summary,.toc-foot{text-wrap:pretty;}