/* ============================================================================
   Sherpac LP（PACT版）専用スタイル — 2026-09-24 作成
   ----------------------------------------------------------------------------
   - pages.css（→ WordPressでは hybrid-pages.css）の後に読み込む前提。
     色・余白・部品（--navy / --orange / --warm / --wash / --line / --ink / --content /
     --ease / --corner、.page-kicker / .section-label / .button / .faq-list /
     .page-section / .page-footer / .reveal）は pages.css のものをそのまま使う。
   - 🔴 他ページに影響させないため、すべて body[data-page="sherpac"] の下に閉じ込める。
   - 旧 wordpress/themes/pact/assets/css/sherpac.css（2026-08-28 のショートコード移植・
     Sherpac LP の配色そのまま）とは別物。WordPressへ入れるときは
     assets/css/hybrid-sherpac.css という名前で置く（手順は docs/SHERPAC_LP_REVIEW_2026-09-24.md）。
   ========================================================================== */

body[data-page="sherpac"]{--sp-radius:18px;--sp-shadow:0 30px 80px rgba(7,27,60,.14)}
[data-page="sherpac"] kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:#fff;color:var(--navy);font:800 12px/1 Arial,"Hiragino Kaku Gothic ProN",sans-serif}
[data-page="sherpac"] code{font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* --- 共通の見出し --------------------------------------------------------- */
[data-page="sherpac"] .sp-head{max-width:900px}
[data-page="sherpac"] .sp-head .section-label{display:flex;align-items:center;gap:12px}
[data-page="sherpac"] .sp-head .section-label::before{content:"";width:34px;height:4px;border-radius:9px;background:var(--orange)}
[data-page="sherpac"] .sp-head h2{margin:0;font-size:clamp(28px,3.6vw,50px);line-height:1.2;letter-spacing:-.04em;word-break:auto-phrase;text-wrap:balance}
[data-page="sherpac"] .sp-head>p:not(.section-label){max-width:680px;margin:22px 0 0;color:var(--ink);font-size:clamp(15px,1.25vw,17px)}

/* 🔴 オレンジ地の文字は白（紺にしない）。本人の確定指示 */
/* --- 無効ボタン（公開準備中） -------------------------------------------- */
[data-page="sherpac"] .sp-btn-disabled{cursor:not-allowed;opacity:.62;transform:none!important}
[data-page="sherpac"] .sp-btn-disabled::after{content:"…"}
[data-page="sherpac"] .sp-actions{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
[data-page="sherpac"] .sp-actions--center{justify-content:center}
[data-page="sherpac"] .sp-textlink{font-size:13px;font-weight:900;text-decoration:none;border-bottom:2px solid var(--orange);padding-bottom:2px}
/* ホバーは色だけ変える（位置を動かさない。本人の確定指示） */
[data-page="sherpac"] .sp-textlink{transition:color .2s}
@media (hover:hover){[data-page="sherpac"] .sp-textlink:hover{color:#cc3a10}}
[data-page="sherpac"] .sp-textlink:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* --- ヒーロー ------------------------------------------------------------- */
[data-page="sherpac"] .sp-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(70px,8vw,124px) 0 clamp(80px,9vw,130px);background:var(--warm);border-bottom:1px solid var(--navy)}
[data-page="sherpac"] .sp-hero .page-hero__mark{opacity:.9}
[data-page="sherpac"] .sp-hero__inner{width:var(--content);margin:auto;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
[data-page="sherpac"] .sp-hero h1{margin:0;font-size:clamp(40px,4.7vw,72px);line-height:1.1;letter-spacing:-.06em}
[data-page="sherpac"] .sp-hero h1>span,[data-page="sherpac"] .sp-hero h1 em{display:block;white-space:nowrap}
[data-page="sherpac"] .sp-hero h1 em{font-style:normal;color:var(--orange)}
[data-page="sherpac"] .sp-hero__lead{max-width:560px;word-break:auto-phrase;margin:28px 0 0;color:var(--ink);font-size:clamp(16px,1.35vw,19px);font-weight:600;line-height:1.9}
[data-page="sherpac"] .sp-hero__facts{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
[data-page="sherpac"] .sp-hero__facts li{padding:6px 12px;border:1px solid rgba(7,27,60,.22);border-radius:99px;background:#fff;font-size:12px;font-weight:800}

/* アプリの画面（Sherpacリポジトリの本物のSwiftUIビューを、架空のデモデータで描いた画像）
   作り方: Sherpac の Tests/SherpacTests/LandingPageScreensSnapshotTests.swift と ProScreensSnapshotTests.swift を
   SHERPAC_WRITE_SNAPSHOTS=1 で実行 → $TMPDIR/sherpac-snapshots/*.png → sips -Z 1240（ランチャー）/ 1600（窓）で assets/sherpac/ へ。
   - ランチャーの画像は「窓まるごと」。候補の下で切ってフッターをつなぎ、四隅とも同じ角丸（22pt/780pt=2.82%）で
     描いてある。角の外は透明なPNG。ここでは同じ角丸で影と細い枠だけを付ける（灰色の地・下端のぼかしは使わない）。
   - 角丸・枠・影は <img> に付ける。.sp-shot は幅の基準（cqw）と、手順の画像の高さをそろえる枠だけを担う。 */
[data-page="sherpac"] .sp-stage{position:relative;min-width:0}
[data-page="sherpac"] .sp-shot{container-type:inline-size;position:relative;margin:0}
[data-page="sherpac"] .sp-shot img{display:block;width:100%;height:auto;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(7,27,60,.12),0 18px 44px rgba(7,27,60,.10)}
/* ランチャー（窓の角丸と同じ比率） */
[data-page="sherpac"] .sp-shot--launcher img,[data-page="sherpac"] .sp-shot--step img{border-radius:2.82cqw;background:none}
[data-page="sherpac"] .sp-shot--launcher img{box-shadow:0 0 0 1px rgba(7,27,60,.14),var(--sp-shadow)}
[data-page="sherpac"] .sp-shot--window img{box-shadow:0 0 0 1px var(--line),var(--sp-shadow)}
[data-page="sherpac"] .sp-stage__hotkey{margin:22px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;font-weight:800}
[data-page="sherpac"] .sp-stage__hotkey span{margin-left:6px}
[data-page="sherpac"] .sp-stage__note{margin:6px 0 0;color:rgba(7,27,60,.5);font-size:11px}

/* 画面の大きな見本（コマンドビルダー・Pro画面） */
[data-page="sherpac"] .sp-screen{margin:36px 0 0;display:grid;gap:16px}
[data-page="sherpac"] .sp-screen figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:13px;color:var(--ink);line-height:1.8}
[data-page="sherpac"] .sp-screen figcaption b{color:var(--navy);font-size:14px}

/* Sherpacのアプリアイコン（アプリ本体と同じ画像） */
[data-page="sherpac"] .sp-hero__kicker{display:flex;align-items:center;gap:12px}
[data-page="sherpac"] .sp-appicon{flex:none;width:36px;height:36px}
[data-page="sherpac"] .sp-appicon--large{display:block;width:96px;height:96px;margin:0 auto 22px}

/* --- 問題 ----------------------------------------------------------------- */
[data-page="sherpac"] .sp-pains{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
[data-page="sherpac"] .sp-pain{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:220px;padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff}
[data-page="sherpac"] .sp-pain__q{margin:0;font-size:16px;font-weight:900;line-height:1.6}
[data-page="sherpac"] .sp-pain__a{margin:0;padding-top:16px;border-top:1px solid var(--line);color:var(--ink);font-size:13px;line-height:1.7}
[data-page="sherpac"] .sp-pain__a::before{content:"→ ";color:var(--orange);font-weight:900}

/* --- 使い方 --------------------------------------------------------------- */
[data-page="sherpac"] .sp-steps{margin:48px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
[data-page="sherpac"] .sp-steps li{padding:28px 26px;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px 4px 14px 14px;background:#fff}
/* 3枚の枠の高さをいちばん背の高い画像（最初の画面 1240×774）にそろえ、下の見出しの位置を合わせる。
   画像は枠の上に寄せ、切り取らずに全体を見せる */
[data-page="sherpac"] .sp-steps .sp-shot--step{margin:0 0 22px;aspect-ratio:1240/774}
[data-page="sherpac"] .sp-steps__no{display:block;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.14em}
[data-page="sherpac"] .sp-steps b{display:block;margin-top:10px;font-size:19px;line-height:1.4}
[data-page="sherpac"] .sp-steps p{margin:12px 0 0;color:var(--ink);font-size:14px;line-height:1.95}
[data-page="sherpac"] .sp-examples{margin-top:18px;padding:26px;border:1px solid var(--line);border-radius:14px;background:#fff}
[data-page="sherpac"] .sp-examples__title{margin:0 0 12px;font-size:12px;font-weight:900;letter-spacing:.12em}
[data-page="sherpac"] .sp-examples ul{margin:0;padding:0;list-style:none}
[data-page="sherpac"] .sp-examples li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px 24px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
[data-page="sherpac"] .sp-examples code{justify-self:start;max-width:100%;padding:6px 10px;border-radius:8px;background:var(--warm);font-size:13px;font-weight:700;overflow-wrap:anywhere}
[data-page="sherpac"] .sp-examples li span{color:var(--ink);font-size:14px}
[data-page="sherpac"] .sp-examples__note{margin:14px 0 0;color:var(--ink);font-size:12px}

/* --- 主な機能 ------------------------------------------------------------- */
[data-page="sherpac"] .sp-features{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--navy);border-left:1px solid var(--line)}
[data-page="sherpac"] .sp-feature{position:relative;padding:28px 24px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;transition:background .25s}
[data-page="sherpac"] .sp-feature:hover{background:var(--warm)}
[data-page="sherpac"] .sp-feature__no{display:inline-block;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.14em}
[data-page="sherpac"] .sp-feature h3{margin:14px 0 0;font-size:17px;line-height:1.5}
[data-page="sherpac"] .sp-feature p{margin:12px 0 0;color:var(--ink);font-size:13px;line-height:1.9}

/* --- Free / Pro 比較表 ---------------------------------------------------- */
[data-page="sherpac"] .sp-table-wrap{margin-top:48px;border:1px solid var(--navy);border-radius:16px;background:#fff;overflow:hidden}
[data-page="sherpac"] .sp-table{width:100%;border-collapse:collapse;table-layout:fixed}
[data-page="sherpac"] .sp-table th,[data-page="sherpac"] .sp-table td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;font-size:14px}
[data-page="sherpac"] .sp-table thead th{padding:22px 20px;border-bottom:1px solid var(--navy);font-size:18px;font-weight:900}
[data-page="sherpac"] .sp-table thead th:first-child{font-size:12px;letter-spacing:.12em;text-align:left}
[data-page="sherpac"] .sp-table thead th span{display:block;margin-top:4px;font-size:11px;font-weight:800;opacity:.7}
[data-page="sherpac"] .sp-table col,[data-page="sherpac"] .sp-table th:first-child{width:52%}
[data-page="sherpac"] .sp-table tbody th{text-align:left;font-weight:800}
[data-page="sherpac"] .sp-table tbody th small{display:block;margin-top:2px;color:var(--ink);font-size:11px;font-weight:600}
[data-page="sherpac"] .sp-table .is-pro{background:var(--wash)}
[data-page="sherpac"] .sp-table thead .is-pro{color:#fff;background:var(--navy)}
[data-page="sherpac"] .sp-table td.is-pro strong{color:var(--navy);font-weight:900}
[data-page="sherpac"] .sp-table__group th{padding:12px 20px!important;background:var(--warm);font-size:11px!important;font-weight:900;letter-spacing:.14em;text-align:left!important}
[data-page="sherpac"] .sp-table tbody tr:last-child>*{border-bottom:0}
[data-page="sherpac"] .sp-mark{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}
[data-page="sherpac"] .sp-mark--yes{background:var(--navy)}
[data-page="sherpac"] .sp-mark--no{width:16px;height:2px;border-radius:2px;background:rgba(7,27,60,.35)}
[data-page="sherpac"] .sp-table__notes{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:var(--ink);font-size:13px}
[data-page="sherpac"] .sp-table__notes li::before{content:"※ "}

/* --- 価格 ----------------------------------------------------------------- */
[data-page="sherpac"] .sp-plans{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
[data-page="sherpac"] .sp-plan{position:relative;display:flex;flex-direction:column;padding:34px 32px;border:1px solid var(--navy);border-radius:18px;background:#fff}
[data-page="sherpac"] .sp-plan--pro{color:#fff;background:var(--navy)}
[data-page="sherpac"] .sp-plan__ribbon{position:absolute;right:24px;top:-14px;margin:0;padding:6px 14px;border-radius:99px;background:var(--orange);color:#fff;font-size:13px;font-weight:900}
[data-page="sherpac"] .sp-plan__tag{margin:0;font-size:11px;font-weight:900;letter-spacing:.16em;opacity:.75}
[data-page="sherpac"] .sp-plan h3{margin:8px 0 0;font-size:24px}
[data-page="sherpac"] .sp-plan__price{margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
[data-page="sherpac"] .sp-plan__price s{flex-basis:100%;font-size:14px;font-weight:700;opacity:.7}
[data-page="sherpac"] .sp-plan__amount{font-size:clamp(44px,5vw,64px);font-weight:900;line-height:1;letter-spacing:-.04em}
[data-page="sherpac"] .sp-plan--pro .sp-plan__amount{color:var(--orange)}
[data-page="sherpac"] .sp-plan__unit{font-size:12px;font-weight:800;opacity:.8}
[data-page="sherpac"] .sp-plan__list{flex:1;margin:24px 0 28px;padding:0;list-style:none;display:grid;align-content:start;gap:10px;font-size:14px;font-weight:700}
[data-page="sherpac"] .sp-plan__list li{position:relative;padding-left:22px}
[data-page="sherpac"] .sp-plan__list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--orange)}
[data-page="sherpac"] .sp-plan .button{width:100%}
[data-page="sherpac"] .sp-plan__period{margin:14px 0 0;font-size:12px;opacity:.8}
[data-page="sherpac"] .sp-terms{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
[data-page="sherpac"] .sp-terms li{padding:22px;border-radius:14px;background:var(--warm)}
[data-page="sherpac"] .sp-terms b{display:block;font-size:16px}
[data-page="sherpac"] .sp-terms span{display:block;margin-top:8px;color:var(--ink);font-size:13px;line-height:1.85}

/* --- プライバシー（紺の帯） ------------------------------------------------- */
[data-page="sherpac"] .sp-privacy .sp-head>p:not(.section-label){color:rgba(255,255,255,.76)}
[data-page="sherpac"] .sp-privacy__grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.18);overflow:hidden}
[data-page="sherpac"] .sp-privacy__grid div{padding:24px;background:var(--navy)}
[data-page="sherpac"] .sp-privacy__grid b{display:block;font-size:16px}
[data-page="sherpac"] .sp-privacy__grid b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--orange)}
[data-page="sherpac"] .sp-privacy__grid p{margin:10px 0 0;color:rgba(255,255,255,.76);font-size:13px;line-height:1.85}
[data-page="sherpac"] .sp-perms{margin-top:18px;padding:24px 26px;border-radius:14px;background:rgba(255,255,255,.06)}
[data-page="sherpac"] .sp-perms__title{margin:0;font-size:15px;font-weight:900}
[data-page="sherpac"] .sp-perms ul{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
[data-page="sherpac"] .sp-perms li{padding:12px 14px;border:1px solid rgba(255,255,255,.2);border-radius:10px}
[data-page="sherpac"] .sp-perms li b{display:block;font-size:13px}
[data-page="sherpac"] .sp-perms li span{display:block;margin-top:2px;color:rgba(255,255,255,.7);font-size:12px}
[data-page="sherpac"] .sp-perms__note{margin:14px 0 0;color:rgba(255,255,255,.76);font-size:13px}
[data-page="sherpac"] .sp-privacy__license{max-width:900px;margin:26px 0 0;color:rgba(255,255,255,.66);font-size:12px;line-height:1.9}

/* --- 最後の導線 ----------------------------------------------------------- */
[data-page="sherpac"] .sp-final{padding:clamp(80px,9vw,130px) 0;border-top:1px solid var(--line);background:#fff;text-align:center}
[data-page="sherpac"] .sp-final__inner{width:min(760px,var(--content));margin:auto}
[data-page="sherpac"] .sp-final .page-kicker{justify-content:center}
[data-page="sherpac"] .sp-final h2{margin:0;word-break:auto-phrase;font-size:clamp(34px,5vw,64px);line-height:1.1;letter-spacing:-.05em}
[data-page="sherpac"] .sp-final__inner>p:not(.page-kicker):not(.sp-final__legal){margin:22px auto 0;max-width:560px;color:var(--ink)}
[data-page="sherpac"] .sp-final .sp-textlink{display:inline-block;margin-top:30px}
[data-page="sherpac"] .sp-final__legal{margin:40px 0 0;color:rgba(7,27,60,.55);font-size:12px}

/* --- レスポンシブ --------------------------------------------------------- */
@media(max-width:1000px){
  [data-page="sherpac"] .sp-hero__inner{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-stage{max-width:620px}
  [data-page="sherpac"] .sp-pains,[data-page="sherpac"] .sp-features,[data-page="sherpac"] .sp-privacy__grid,[data-page="sherpac"] .sp-perms ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 3列だと画面の画像が小さくなりすぎる幅では、1行に1手順（画像を左、説明を右）にする */
@media(max-width:1000px) and (min-width:641px){
  [data-page="sherpac"] .sp-steps{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-steps li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:26px;align-content:start}
  [data-page="sherpac"] .sp-steps li>.sp-shot--step{grid-column:1;grid-row:1/4;margin:0;align-self:start}
  [data-page="sherpac"] .sp-steps .sp-shot--step{aspect-ratio:auto}
  [data-page="sherpac"] .sp-steps li>:not(.sp-shot){grid-column:2}
}
@media(max-width:760px){
  [data-page="sherpac"] .sp-steps,[data-page="sherpac"] .sp-plans{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-plans{gap:30px}
  [data-page="sherpac"] .sp-examples li{grid-template-columns:1fr}
}
@media(max-width:640px){
  [data-page="sherpac"] .sp-hero h1{font-size:clamp(34px,10.4vw,52px)}
  [data-page="sherpac"] .sp-pains,[data-page="sherpac"] .sp-features,[data-page="sherpac"] .sp-terms,[data-page="sherpac"] .sp-privacy__grid,[data-page="sherpac"] .sp-perms ul{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-pain{min-height:0}
  [data-page="sherpac"] .sp-steps .sp-shot--step{aspect-ratio:auto}
  [data-page="sherpac"] .sp-table th,[data-page="sherpac"] .sp-table td{padding:13px 10px;font-size:13px}
  [data-page="sherpac"] .sp-table thead th{padding:16px 10px;font-size:15px}
  [data-page="sherpac"] .sp-table col,[data-page="sherpac"] .sp-table th:first-child{width:46%}
  [data-page="sherpac"] .sp-plan{padding:30px 22px}
  [data-page="sherpac"] .sp-actions .button{width:100%}
  [data-page="sherpac"] .sp-examples{padding:18px}
}

/* FAQ：ブラウザー既定の▶を消し、pages.css の「＋／−」だけを見せる */
[data-page="sherpac"] .faq-list summary{list-style:none}
[data-page="sherpac"] .faq-list summary::-webkit-details-marker{display:none}
[data-page="sherpac"] .faq-list summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* --- アプリとWebサイト（#websites・2026-09-24 追加） ----------------------- */
[data-page="sherpac"] .sp-web__grid{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
[data-page="sherpac"] .sp-web__shot{margin:0}
[data-page="sherpac"] .sp-web__shot figcaption{margin-top:18px;color:var(--ink);font-size:13px;line-height:1.85}
[data-page="sherpac"] .sp-web__shot figcaption b{color:var(--navy)}
[data-page="sherpac"] .sp-web__points{margin:0;padding:0;list-style:none;counter-reset:spweb;border-top:1px solid var(--navy)}
[data-page="sherpac"] .sp-web__points li{counter-increment:spweb;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
[data-page="sherpac"] .sp-web__points li::before{content:"0" counter(spweb);grid-row:1/3;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1.9}
[data-page="sherpac"] .sp-web__points b{font-size:16px;line-height:1.6}
[data-page="sherpac"] .sp-web__points span{margin-top:4px;color:var(--ink);font-size:13px;line-height:1.85}
@media(max-width:1000px){
  [data-page="sherpac"] .sp-web__grid{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-web__shot{max-width:680px}
}

/* ==========================================================================
   2026-09-24 夕 追加：図解・予定/ToDo/メモ・コマンドビルダー・Proへの切り替え方
   （本人フィードバック「魅力が伝わってこない」への対応。docs/SHERPAC_LP_REVIEW_2026-09-24.md 10節）
   ========================================================================== */

/* 画像の前に置く小見出し（画像が急に出てこないように） */
[data-page="sherpac"] .sp-subhead{margin:56px 0 0;max-width:760px}
[data-page="sherpac"] .sp-subhead h3{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.5}
[data-page="sherpac"] .sp-subhead p{margin:10px 0 0;color:var(--ink);font-size:14px;line-height:1.9}
[data-page="sherpac"] .sp-subhead+.sp-screen{margin-top:24px}
/* 窓の画面は大きくしすぎない */
[data-page="sherpac"] .sp-screen{max-width:920px}

/* --- 図解：ひとつの入口（#one-entrance） ------------------------------------
   左に「いままで別々だった入口」、中央にSherpacの入力欄、右に「Enterで起きること」。
   線は装飾のSVG（aria-hidden）。文字はすべて本物のテキスト。スマホでは縦に積み、線の代わりに下向きの矢印を置く。 */
[data-page="sherpac"] .sp-map{margin:48px 0 0;padding:clamp(22px,3vw,40px);border:1px solid var(--line);border-radius:20px;background:#fff}
[data-page="sherpac"] .sp-map__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(40px,80px) minmax(230px,.95fr) minmax(40px,80px) minmax(0,1fr);align-items:stretch}
[data-page="sherpac"] .sp-map__col{display:flex;flex-direction:column;min-width:0}
[data-page="sherpac"] .sp-map__label{margin:0 0 12px;color:rgba(7,27,60,.62);font-size:11px;font-weight:900;letter-spacing:.14em}
[data-page="sherpac"] .sp-map__list{flex:1;margin:0;padding:0;list-style:none;display:grid;gap:8px}
[data-page="sherpac"] .sp-map__list--in{grid-template-rows:repeat(6,1fr)}
[data-page="sherpac"] .sp-map__list--out{grid-template-rows:repeat(4,1fr)}
[data-page="sherpac"] .sp-map__list li{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"icon title" "icon sub";column-gap:12px;align-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--warm)}
[data-page="sherpac"] .sp-map__list--out li{border-color:rgba(7,27,60,.28);background:#fff}
[data-page="sherpac"] .sp-map__list svg{grid-area:icon;align-self:center;width:34px;height:34px;padding:6px;border-radius:9px;background:#fff;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[data-page="sherpac"] .sp-map__list--out svg{background:var(--navy);stroke:#fff}
[data-page="sherpac"] .sp-map__list b{grid-area:title;font-size:14px;line-height:1.45}
[data-page="sherpac"] .sp-map__list b,[data-page="sherpac"] .sp-map__list small{word-break:auto-phrase}
[data-page="sherpac"] .sp-map__list small{grid-area:sub;color:var(--ink);font-size:11.5px;line-height:1.5}
[data-page="sherpac"] .sp-map__wires{display:block;width:100%;height:calc(100% - 30px);margin-top:30px;overflow:visible}
[data-page="sherpac"] .sp-map__wires path{fill:none;stroke:rgba(7,27,60,.3);stroke-width:1.5;vector-effect:non-scaling-stroke}
[data-page="sherpac"] .sp-map__wires--out path{stroke:var(--orange);stroke-width:2}
[data-page="sherpac"] .sp-map__hub{align-self:center;margin-top:30px;padding:26px 22px 22px;border:2px solid var(--navy);border-radius:20px;background:#fff;text-align:center;box-shadow:0 18px 44px rgba(7,27,60,.12)}
[data-page="sherpac"] .sp-map__hub img{display:block;width:56px;height:56px;margin:0 auto}
[data-page="sherpac"] .sp-map__hubname{margin:6px 0 0;font-size:18px;font-weight:900;letter-spacing:-.02em}
[data-page="sherpac"] .sp-map__input{margin:16px 0 0;display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--warm);font-size:14px;font-weight:800;text-align:left;overflow-wrap:anywhere}
[data-page="sherpac"] .sp-map__caret{flex:none;width:2px;height:18px;border-radius:2px;background:var(--orange)}
[data-page="sherpac"] .sp-map__keys{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:800;color:var(--ink)}
[data-page="sherpac"] .sp-map__keys span{margin:0 4px}
[data-page="sherpac"] .sp-map figcaption{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.85}
[data-page="sherpac"] .sp-map figcaption b{color:var(--navy)}
/* 一度だけ、線が引かれる（pathLength="1" で長さをそろえる）。動きを減らす設定・JSなしでは最初から引いた状態 */
@media (prefers-reduced-motion:no-preference){
  [data-page="sherpac"] .sp-map.reveal .sp-map__wires path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .35s}
  [data-page="sherpac"] .sp-map.reveal .sp-map__wires--out path{transition-delay:1s}
  [data-page="sherpac"] .sp-map.reveal.is-visible .sp-map__wires path{stroke-dashoffset:0}
}

/* --- 予定・ToDo・メモ（#capture） ------------------------------------------ */
[data-page="sherpac"] .sp-capture{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
[data-page="sherpac"] .sp-capture__card{display:flex;flex-direction:column;gap:14px;padding:26px 24px;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px 4px 14px 14px;background:var(--warm)}
[data-page="sherpac"] .sp-capture__tag{margin:0;color:var(--navy);font-size:12px;font-weight:900;letter-spacing:.1em}
[data-page="sherpac"] .sp-capture__card code{align-self:start;max-width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:15px;font-weight:700;overflow-wrap:anywhere}
[data-page="sherpac"] .sp-capture__card code::before{content:"";display:inline-block;width:2px;height:1em;margin-right:8px;vertical-align:-.12em;border-radius:2px;background:var(--orange)}
[data-page="sherpac"] .sp-capture__card>p:last-child{margin:0;color:var(--ink);font-size:14px;line-height:1.85}
[data-page="sherpac"] .sp-capture__note{margin:18px 0 0;color:var(--ink);font-size:12.5px;line-height:1.8}

/* --- コマンドビルダー（#commands） ------------------------------------------ */
[data-page="sherpac"] .sp-cmd__grid{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(28px,4.5vw,64px);align-items:start}
[data-page="sherpac"] .sp-cmd__points{margin:0;padding:0;list-style:none;counter-reset:spcmd;border-top:1px solid var(--navy)}
[data-page="sherpac"] .sp-cmd__points li{counter-increment:spcmd;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
[data-page="sherpac"] .sp-cmd__points li::before{content:"0" counter(spcmd);grid-row:1/3;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:2}
[data-page="sherpac"] .sp-cmd__points b{font-size:17px;line-height:1.6}
[data-page="sherpac"] .sp-cmd__points span{margin-top:6px;color:var(--ink);font-size:14px;line-height:1.9}
[data-page="sherpac"] .sp-cmd__shot{margin:0;max-width:560px}
[data-page="sherpac"] .sp-cmd__shot figcaption{margin-top:14px;color:var(--ink);font-size:13px;line-height:1.85}
[data-page="sherpac"] .sp-cmd__shot figcaption kbd{min-width:22px;height:21px;font-size:11px}
[data-page="sherpac"] .sp-cmd__note{margin:26px 0 0;max-width:900px;color:var(--ink);font-size:12.5px;line-height:1.8}

/* --- Proへの切り替え方（#activate） ------------------------------------------ */
[data-page="sherpac"] .sp-upgrade{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(28px,4.5vw,64px);align-items:start}
[data-page="sherpac"] .sp-upgrade__steps{margin:0;padding:0;list-style:none;display:grid;gap:10px}
[data-page="sherpac"] .sp-upgrade__steps li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:#fff}
[data-page="sherpac"] .sp-upgrade__no{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-size:16px;font-weight:900}
[data-page="sherpac"] .sp-upgrade__steps b{display:block;font-size:16px;line-height:1.6}
[data-page="sherpac"] .sp-upgrade__steps p{margin:6px 0 0;color:var(--ink);font-size:13.5px;line-height:1.85}
[data-page="sherpac"] .sp-upgrade__shots{display:grid;gap:14px;max-width:520px;padding:10px 0 18px;border:1px solid var(--line);border-radius:18px;background:#fff}
[data-page="sherpac"] .sp-upgrade__note{padding-left:18px}
/* 画面の切り抜きは、カード自身の枠と影を含むので、ページ側では枠を付けない */
[data-page="sherpac"] .sp-shot--bare img{border-radius:0;background:none;box-shadow:none}
[data-page="sherpac"] .sp-upgrade__shots figure{margin:0}
[data-page="sherpac"] .sp-upgrade__shots figcaption{margin-top:4px;padding-left:18px;color:var(--ink);font-size:12.5px;font-weight:700}
[data-page="sherpac"] .sp-upgrade__note{margin:0;color:rgba(7,27,60,.5);font-size:11px}

@media(max-width:1000px){
  [data-page="sherpac"] .sp-cmd__grid,[data-page="sherpac"] .sp-upgrade{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-cmd__shot{max-width:480px}
  [data-page="sherpac"] .sp-capture{grid-template-columns:1fr}
  /* 図解は縦に積む：入口（2列）→ ↓ → Sherpac → ↓ → 起きること（2列） */
  [data-page="sherpac"] .sp-map__grid{grid-template-columns:1fr;row-gap:0}
  [data-page="sherpac"] .sp-map__wires{display:none}
  [data-page="sherpac"] .sp-map__list--in,[data-page="sherpac"] .sp-map__list--out{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  [data-page="sherpac"] .sp-map__hub{position:relative;justify-self:center;width:min(100%,360px);margin:52px 0}
  [data-page="sherpac"] .sp-map__hub::before,[data-page="sherpac"] .sp-map__hub::after{content:"";position:absolute;left:50%;width:2px;height:36px;margin-left:-1px;background:rgba(7,27,60,.3)}
  [data-page="sherpac"] .sp-map__hub::before{top:-46px}
  [data-page="sherpac"] .sp-map__hub::after{bottom:-46px;background:var(--orange)}
}
@media(max-width:640px){
  [data-page="sherpac"] .sp-terms{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-map{padding:16px 10px}
  [data-page="sherpac"] .sp-map__label{padding-left:4px}
  [data-page="sherpac"] .sp-map__list{gap:6px}
  [data-page="sherpac"] .sp-map__list li{grid-template-columns:24px minmax(0,1fr);column-gap:8px;padding:9px 8px}
  [data-page="sherpac"] .sp-map__list svg{width:24px;height:24px;padding:4px;border-radius:7px}
  [data-page="sherpac"] .sp-map__list b{font-size:13px}
  [data-page="sherpac"] .sp-map__list small{font-size:11px}
  [data-page="sherpac"] .sp-upgrade__steps li{grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding:18px 16px}
  [data-page="sherpac"] .sp-upgrade__no{width:30px;height:30px;font-size:14px}
}
@media(max-width:359px){
  [data-page="sherpac"] .sp-map__list--in,[data-page="sherpac"] .sp-map__list--out{grid-template-columns:1fr}
}

/* ==========================================================================
   2026-09-25 午後 追加：Sherpac Dock（#dock）・ダッシュボード（#dashboard）
   （docs/SHERPAC_LP_REVIEW_2026-09-24.md 12節）
   - #dock は #websites の部品（.sp-web__grid / .sp-web__shot / .sp-web__points）をそのまま使う。
   - dock-launcher.png はランチャーの下の部分だけの切り抜き。上端の角もページ側の角丸でそろえる。
   - share-card.jpg はカードの外枠ぴったりの切り抜き。四隅の外側（灰色）はカードと同じ角丸（55/1166=4.72%）で隠す。
   ========================================================================== */
[data-page="sherpac"] .sp-web__shot figcaption kbd{min-width:22px;height:21px;font-size:11px}
[data-page="sherpac"] .sp-share{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(28px,4.5vw,64px);align-items:center}
[data-page="sherpac"] .sp-share__copy h3{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.5}
[data-page="sherpac"] .sp-share__copy>p{margin:10px 0 0;color:var(--ink);font-size:14px;line-height:1.9}
[data-page="sherpac"] .sp-share__copy ul{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
[data-page="sherpac"] .sp-share__copy li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;line-height:1.7}
[data-page="sherpac"] .sp-share__copy li::before{content:"";position:absolute;left:0;top:1.3em;width:10px;height:10px;border-radius:50%;background:var(--orange)}
[data-page="sherpac"] .sp-share__card{container-type:inline-size;margin:0}
[data-page="sherpac"] .sp-share__card img{display:block;width:100%;height:auto;border-radius:4.8cqw;box-shadow:var(--sp-shadow)}
@media(max-width:1000px){
  [data-page="sherpac"] .sp-share{grid-template-columns:1fr}
  [data-page="sherpac"] .sp-share__card{max-width:400px}
}