/*
  Sherpac 製品サイト版（sherpac-product.html）専用。2026-09-25。
  karui.app 型：製品専用ヘッダー／中央寄せのヒーロー＋大きな画面／数字3つ／機能を交互に／料金2枚／FAQ／最後にダウンロード。
  PACT のブランド指示を守る：オレンジ地に小さい文字を置かない・ホバーで位置を動かさない・常時動く演出なし。
*/
:root {
  --sx-ink: #0d1117;
  --sx-ink-2: #3a4150;
  --sx-muted: #667085;
  --sx-line: #e6e8ec;
  --sx-bg: #ffffff;
  --sx-soft: #f6f7f9;
  --sx-navy: #071b3c;
  --sx-orange: #ff4c21;
  --sx-orange-text: #cc3a10;
  --sx-radius: 16px;
  --sx-max: 1120px;
  --sx-shadow: 0 30px 80px rgba(13, 17, 23, .16), 0 6px 18px rgba(13, 17, 23, .08);
}

body.sx-site {
  margin: 0;
  background: var(--sx-bg);
  color: var(--sx-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
.sx-site *, .sx-site *::before, .sx-site *::after { box-sizing: border-box; }
.sx-site img { max-width: 100%; height: auto; display: block; }
.sx-site a:not(.sx-btn) { color: inherit; }
.sx-site h1, .sx-site h2, .sx-site h3, .sx-site h4 { margin: 0; line-height: 1.25; letter-spacing: -.02em; }
.sx-site p { margin: 0; }
.sx-site [hidden] { display: none !important; }
.sx-site .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sx-site :focus-visible { outline: 3px solid var(--sx-orange); outline-offset: 3px; border-radius: 6px; }
.sx-site kbd {
  display: inline-block; min-width: 1.8em; padding: 0 .45em; border: 1px solid var(--sx-line); border-bottom-width: 2px;
  border-radius: 6px; background: #fff; font: 600 .82em/1.7 inherit; text-align: center; color: var(--sx-ink);
}
.sx-site code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
/* 親テーマも「コンテンツへスキップ」を出すが、行き先（#main_content）がこのページに無い。自前の1本だけ残す。 */
body:has(> .skip) > .skip-link.screen-reader-text { display: none; }

/* ボタン */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.sx-btn svg { width: 18px; height: 18px; fill: currentColor; }
.sx-btn--sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.sx-btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.sx-btn--dark { background: var(--sx-ink); color: #fff; }
.sx-btn--ghost { background: #fff; color: var(--sx-ink); border-color: #cfd4dc; }
@media (hover: hover) {
  .sx-btn--dark:not(.is-disabled):hover { background: var(--sx-navy); }
  .sx-btn--ghost:not(.is-disabled):hover { border-color: var(--sx-ink); }
}
.sx-btn.is-disabled { cursor: not-allowed; }
.sx-btn--dark.is-disabled { background: #4a5160; }
.sx-btn--ghost.is-disabled { color: var(--sx-muted); }

/* ヘッダー */
.sx-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(230, 232, 236, .8);
}
.sx-header__inner { max-width: var(--sx-max); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 28px; }
.sx-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; text-decoration: none; }
.sx-nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--sx-ink-2); }
.sx-nav a { text-decoration: none; padding: 6px 0; }
@media (hover: hover) { .sx-nav a:hover { color: var(--sx-ink); } }
.sx-menu { display: none; }
.sx-mobile-nav { display: none; }

/* ヒーロー */
.sx-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 88px 24px 40px;
  background:
    radial-gradient(60% 55% at 12% 8%, #dfe8ff 0%, rgba(223, 232, 255, 0) 70%),
    radial-gradient(55% 50% at 92% 14%, #ffe4d8 0%, rgba(255, 228, 216, 0) 70%),
    linear-gradient(#fbfbfd, #fff 70%);
}
.sx-hero__copy { max-width: 760px; margin: 0 auto; }
.sx-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sx-line); font-size: 13px; font-weight: 700; color: var(--sx-ink-2);
}
.sx-hero h1 { margin-top: 22px; font-size: clamp(38px, 6.2vw, 72px); font-weight: 900; line-height: 1.12; letter-spacing: -.04em; }
.sx-hero h1 span { color: var(--sx-navy); }
.sx-hero__lead { margin-top: 20px; font-size: clamp(16px, 1.6vw, 19px); color: var(--sx-ink-2); }
.sx-actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sx-hero__meta { margin-top: 16px; font-size: 13px; color: var(--sx-muted); }
.sx-mobile-note { display: none; }

.sx-desk {
  margin: 56px auto 0; max-width: 1040px; padding: clamp(28px, 6vw, 72px) clamp(16px, 5vw, 64px) clamp(26px, 4vw, 44px);
  border-radius: 28px;
  background:
    radial-gradient(80% 70% at 20% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #1d3a6e 0%, #071b3c 45%, #3a2a4f 78%, #c9583a 120%);
  box-shadow: var(--sx-shadow);
}
.sx-desk__screen { max-width: 820px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.sx-desk figcaption { margin-top: 22px; display: flex; gap: 6px; align-items: center; justify-content: center; color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; }
.sx-desk figcaption kbd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.sx-desk figcaption span { margin-left: 6px; }
.sx-film {
  position: relative; aspect-ratio: 16/9; width: 100%; max-width: 1120px;
  margin: 48px auto 0; border-radius: 20px; overflow: hidden;
  background: #fff; box-shadow: var(--sx-shadow);
}
.sx-film iframe { width: 100%; height: 100%; display: block; border: 0; }
.sx-film noscript img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sx-note { margin-top: 12px; font-size: 12.5px; color: var(--sx-muted); }
.sx-note--center { text-align: center; }

/* 数字 */
.sx-stats { max-width: var(--sx-max); margin: 0 auto; padding: 56px 24px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.sx-stat b { display: block; font-size: clamp(36px, 4.4vw, 52px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.sx-stat b small { font-size: .45em; margin-left: 2px; }
.sx-stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--sx-ink-2); }

/* 節 */
.sx-section { padding: clamp(72px, 9vw, 120px) 24px; }
.sx-section > * { max-width: var(--sx-max); margin-left: auto; margin-right: auto; }
.sx-section--soft { background: var(--sx-soft); }
.sx-section--dark { background: var(--sx-navy); color: #fff; }
.sx-head { text-align: center; max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sx-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sx-orange-text); }
.sx-section--dark .sx-eyebrow { color: #ffb39f; }
.sx-head h2 { margin-top: 12px; font-size: clamp(28px, 3.8vw, 44px); font-weight: 900; }
.sx-head > p:not(.sx-eyebrow) { margin-top: 18px; color: var(--sx-ink-2); font-size: 16.5px; }
.sx-section--dark .sx-head > p:not(.sx-eyebrow) { color: rgba(255, 255, 255, .8); }

/* 悩み */
.sx-pains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sx-pain { border: 1px solid var(--sx-line); border-radius: var(--sx-radius); padding: 24px 26px; background: #fff; }
.sx-pain__q { color: var(--sx-muted); font-size: 14.5px; }
.sx-pain__q::before { content: "いま"; display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 6px; background: var(--sx-soft); font-size: 11.5px; font-weight: 800; color: var(--sx-ink-2); }
.sx-pain__a { margin-top: 10px; font-weight: 700; font-size: 16px; }
.sx-pain__a::before { content: "Sherpac"; display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 6px; background: var(--sx-ink); font-size: 11.5px; font-weight: 800; color: #fff; }

/* 機能 */
.sx-feature { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sx-feature + .sx-feature { margin-top: clamp(72px, 9vw, 112px); }
.sx-feature--rev .sx-feature__text { order: 2; }
.sx-feature__no { font-size: 13px; font-weight: 800; color: var(--sx-orange-text); letter-spacing: .1em; }
.sx-feature h3 { margin-top: 10px; font-size: clamp(22px, 2.5vw, 30px); font-weight: 900; }
.sx-feature__text > p:not(.sx-feature__no) { margin-top: 16px; color: var(--sx-ink-2); }
.sx-feature__media figcaption { margin-top: 12px; font-size: 13px; color: var(--sx-muted); }
.sx-feature__media--tall .sx-shot { max-width: 440px; margin: 0 auto; }
.sx-feature__media--tall figcaption { text-align: center; }
.sx-shot { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--sx-line); box-shadow: 0 18px 48px rgba(13, 17, 23, .1); }

.sx-checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.sx-checks li { position: relative; padding-left: 28px; font-size: 15px; }
.sx-checks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sx-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;
}
.sx-codes { margin: 20px 0 0; display: grid; gap: 10px; }
.sx-codes div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.sx-codes dt code { display: inline-block; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--sx-line); font-size: 14px; }
.sx-codes dd { margin: 0; font-size: 14px; color: var(--sx-muted); }

.sx-grid { margin-top: clamp(72px, 9vw, 112px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sx-grid article { background: #fff; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); padding: 24px; }
.sx-grid h4 { font-size: 16.5px; font-weight: 800; }
.sx-grid p { margin-top: 8px; font-size: 14px; color: var(--sx-ink-2); line-height: 1.75; }

/* 使い方 */
.sx-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sx-steps li > span { display: block; margin-top: 20px; font-size: 13px; font-weight: 800; color: var(--sx-orange-text); letter-spacing: .1em; }
.sx-steps b { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; }
.sx-steps p { margin-top: 8px; font-size: 14.5px; color: var(--sx-ink-2); }
.sx-steps .sx-shot { aspect-ratio: 16 / 10; display: flex; align-items: center; background: var(--sx-soft); }

/* プライバシー */
.sx-privacy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sx-privacy div { border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--sx-radius); padding: 24px; background: rgba(255, 255, 255, .04); }
.sx-privacy b { font-size: 16.5px; }
.sx-privacy p { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .78); line-height: 1.75; }
.sx-more { margin-top: 28px; }
.sx-more summary { cursor: pointer; font-weight: 700; font-size: 14.5px; width: fit-content; margin: 0 auto; list-style: none; padding: 10px 18px; border-radius: 999px; border: 1px solid currentColor; }
.sx-more summary::-webkit-details-marker { display: none; }
.sx-more summary::after { content: "＋"; margin-left: 8px; }
.sx-more[open] summary::after { content: "－"; }
.sx-more > p { margin-top: 20px; font-size: 14px; line-height: 1.9; }
.sx-section--dark .sx-more > p { color: rgba(255, 255, 255, .8); }

/* 料金 */
.sx-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px !important; }
.sx-plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--sx-line); border-radius: 22px; padding: 32px; background: #fff; }
.sx-plan--pro { border: 2px solid var(--sx-ink); box-shadow: var(--sx-shadow); }
.sx-plan__badge { position: absolute; top: -14px; left: 32px; padding: 4px 14px; border-radius: 999px; background: var(--sx-orange); color: #fff; font-size: 13px; font-weight: 800; }
.sx-plan__name { font-size: 20px; font-weight: 900; }
.sx-plan__name span { margin-left: 10px; font-size: 12.5px; font-weight: 700; color: var(--sx-muted); }
.sx-plan__price { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sx-plan__price b { font-size: 44px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.sx-plan__price s { color: var(--sx-muted); font-size: 17px; }
.sx-plan__later { color: var(--sx-muted); font-size: 15px; font-weight: 700; }
.sx-plan__price small { width: 100%; font-size: 13px; color: var(--sx-muted); }
.sx-plan .sx-checks { margin-bottom: 28px; }
.sx-plan .sx-btn { margin-top: auto; width: 100%; }
.sx-plan__period { margin-top: 12px; font-size: 12.5px; color: var(--sx-muted); text-align: center; }

.sx-trust { list-style: none; margin-top: 48px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 16px; }
.sx-trust li { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: start; }
.sx-trust svg { grid-row: span 2; width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--sx-soft); fill: none; stroke: var(--sx-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sx-trust b { font-size: 15px; }
.sx-trust span { font-size: 13px; color: var(--sx-muted); line-height: 1.6; }

.sx-more--table { margin-top: 48px; }
.sx-table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); }
.sx-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.sx-table th, .sx-table td { padding: 14px 18px; border-bottom: 1px solid var(--sx-line); text-align: center; }
.sx-table tbody tr:last-child > * { border-bottom: 0; }
.sx-table th[scope="row"] { text-align: left; font-weight: 600; }
.sx-table th[scope="row"] small { display: block; font-size: 12px; color: var(--sx-muted); font-weight: 400; }
.sx-table thead th { background: var(--sx-soft); font-weight: 800; }
.sx-table .is-pro { background: rgba(7, 27, 60, .04); }
.sx-more--table .sx-note { text-align: center; }

/* Proへの切り替え */
.sx-upgrade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.sx-upgrade__steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 20px; }
.sx-upgrade__steps li { counter-increment: step; position: relative; padding-left: 52px; }
.sx-upgrade__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--sx-ink); color: #fff; display: grid; place-items: center; font-weight: 800; }
.sx-upgrade__steps b { font-size: 17px; }
.sx-upgrade__steps p { margin-top: 4px; font-size: 14.5px; color: var(--sx-ink-2); }
.sx-upgrade .sx-shot { margin: 0; }

/* FAQ */
.sx-faq { max-width: 800px !important; border-top: 1px solid var(--sx-line); }
.sx-faq details { border-bottom: 1px solid var(--sx-line); }
.sx-faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 700; font-size: 16px; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--sx-ink); border-bottom: 2px solid var(--sx-ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.sx-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sx-faq details p { padding: 0 0 22px; color: var(--sx-ink-2); font-size: 15px; }

/* 最後 */
.sx-final {
  text-align: center; padding: clamp(80px, 10vw, 128px) 24px;
  background:
    radial-gradient(50% 60% at 50% 0%, #e6ecff 0%, rgba(230, 236, 255, 0) 70%),
    var(--sx-soft);
}
.sx-final img { margin: 0 auto; width: 88px; height: 88px; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(13, 17, 23, .12); }
.sx-final h2 { margin-top: 28px; font-size: clamp(28px, 4vw, 46px); font-weight: 900; }
.sx-final > p:not(.sx-hero__meta):not(.sx-mobile-note) { margin: 16px auto 0; max-width: 560px; color: var(--sx-ink-2); }

/* フッター */
.sx-footer { border-top: 1px solid var(--sx-line); padding: 56px 24px 32px; font-size: 14px; }
.sx-footer__inner { max-width: var(--sx-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.sx-footer__brand p { margin-top: 10px; color: var(--sx-muted); }
.sx-footer__by a { font-weight: 800; color: var(--sx-ink); }
.sx-footer__col { display: flex; flex-direction: column; gap: 10px; }
.sx-footer__col p { font-weight: 800; font-size: 13px; }
.sx-footer__col a { text-decoration: none; color: var(--sx-ink-2); padding: 2px 0; }
@media (hover: hover) { .sx-footer__col a:hover { color: var(--sx-ink); text-decoration: underline; } }
.sx-footer__col span { color: var(--sx-muted); }
.sx-footer__col small { font-size: 12px; color: var(--sx-muted); }
.sx-footer__copy { max-width: var(--sx-max); margin: 40px auto 0; font-size: 12.5px; color: var(--sx-muted); }

/* 中くらい */
@media (max-width: 960px) {
  .sx-privacy, .sx-trust { grid-template-columns: repeat(2, 1fr); }
  .sx-grid { grid-template-columns: repeat(2, 1fr); }
  .sx-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* スマホ */
@media (max-width: 760px) {
  body.sx-site { font-size: 15px; }
  .sx-header__inner { height: 58px; padding: 0 16px; gap: 12px; }
  .sx-nav { display: none; }
  .sx-header .sx-btn--sm { margin-left: auto; }
  .sx-menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 11px; border: 0; background: transparent; cursor: pointer;
  }
  .sx-menu span:not(.sr) { display: block; height: 2px; background: var(--sx-ink); border-radius: 2px; transition: transform .2s; }
  .sx-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .sx-menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .sx-mobile-nav { display: flex; flex-direction: column; padding: 8px 16px 16px; border-top: 1px solid var(--sx-line); background: #fff; }
  .sx-mobile-nav a { padding: 12px 4px; min-height: 44px; text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--sx-line); }
  .sx-mobile-nav a:last-child { border-bottom: 0; color: var(--sx-muted); }

  .sx-hero { padding: 56px 16px 32px; }
  .sx-br-pc { display: none; }
  .sx-actions .sx-btn { width: 100%; }
  .sx-desk { margin-top: 40px; border-radius: 20px; }
  .sx-desk__screen { border-radius: 10px; }
  .sx-desk figcaption { font-size: 13px; }

  .sx-stats { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .sx-section { padding-left: 16px; padding-right: 16px; }
  .sx-pains, .sx-grid, .sx-steps, .sx-privacy, .sx-plans, .sx-upgrade, .sx-trust { grid-template-columns: 1fr; }
  .sx-feature { grid-template-columns: 1fr; gap: 28px; }
  .sx-feature--rev .sx-feature__text { order: 0; }
  .sx-plan { padding: 28px 22px; }
  .sx-plans { gap: 32px; }
  .sx-footer__inner { grid-template-columns: 1fr; }
}

/* スマホ・タブレット（触って操作する端末）では、Mac専用の案内を出す */
@media (pointer: coarse) and (max-width: 1024px) {
  /* Mac専用：スマホ・タブレットではダウンロードボタンを隠し、案内に置き換える（購入はできる） */
  .sx-site [data-download-url] { display: none !important; }
  .sx-mobile-note.sx-maconly--plan { margin: 0 0 12px; max-width: none; }
  .sx-mobile-note { display: block; margin: 16px auto 0; max-width: 420px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--sx-line); font-size: 13.5px; color: var(--sx-ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-site * { transition: none !important; scroll-behavior: auto !important; }
}
/* iPhone の Safari で横にスワイプできないように。html の hidden は画面へ移るだけで sticky を壊さない */
html:has(body.sx-site) { scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html:has(body.sx-site) { scroll-behavior: auto; } }

/* ==========================================================================
   2026-09-25 夕：旧PACT版（sherpac.html）の部品を戻した
   図解・入力の例・Webサイトの4点・予定/ToDo/メモのカード・コマンドの4点・6機能・Free/Pro比較表・
   権限・Proへの切り替え4手順。部品のCSSは assets/sherpac-lp.css をそのまま読み込む（二重管理しない）。
   sherpac-lp.css は pages.css の変数を前提にしているので、ここで同じ名前を定義する。
   ========================================================================== */
body.sx-site {
  --navy: #071b3c; --orange: #ff4c21; --warm: var(--sx-soft); --wash: #eef2f9;
  --line: var(--sx-line); --ink: var(--sx-ink-2); --ease: cubic-bezier(.2, .8, .2, 1);
}
/* 生成り（--warm）の節の上では、中のカードを白に */
.sx-section--soft .sp-map__list li, .sx-section--soft .sp-capture__card { background: #fff; }
.sx-section--soft .sp-map { background: #fff; }
.sx-site .sp-map { margin-top: 0; }
.sx-site .sp-examples { margin-top: 32px; }
.sx-site .sp-web__grid, .sx-site .sp-capture, .sx-site .sp-cmd__grid, .sx-site .sp-upgrade, .sx-site .sp-features, .sx-site .sp-table-wrap { margin-top: 0; }
.sx-site .sp-subhead { margin-top: 64px; }
.sx-site .sp-screen { margin-left: auto; margin-right: auto; }
.sx-site .sp-capture { margin-top: 40px; }
.sx-site .sp-features { margin-top: clamp(72px, 9vw, 112px); }
.sx-site .sx-feature__intro { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.sx-site .sx-feature__intro h3 { margin-top: 10px; font-size: clamp(22px, 2.5vw, 30px); font-weight: 900; }
.sx-site .sx-feature__intro > p:not(.sx-feature__no) { margin-top: 16px; color: var(--sx-ink-2); }
.sx-site .sx-block + .sx-block { margin-top: clamp(80px, 10vw, 128px); }
.sx-site .sp-table__notes { max-width: var(--sx-max); }
.sx-site .sp-perms { margin-top: 28px; }
.sx-site .sp-privacy__license { margin: 26px auto 0; }
.sx-site .sp-upgrade__no { background: var(--sx-ink); }

/* ヘッダー：PACT APP 一覧へ戻る */
.sx-back {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--sx-line); background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--sx-ink-2); text-decoration: none; white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.sx-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .sx-back:hover { border-color: var(--sx-ink); color: var(--sx-ink); } }
.sx-site .sx-header__inner { gap: 16px; }
.sx-site .sx-header__inner .sx-brand { margin-right: 12px; }
@media (max-width: 760px) {
  .sx-back { padding: 6px 10px 6px 7px; font-size: 12px; }
  .sx-back .sx-back__long { display: none; }
}
@media (max-width: 420px) {
  .sx-site .sx-header .sx-btn--sm { display: none; }
  .sx-site .sx-header__inner .sx-brand { margin-right: auto; }
}
/* 旧部品が使う読み上げ用の隠し文字（pages.css の定義を読み込んでいないため、ここで同じものを置く） */
.sx-site .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ヘッダー：戻るボタンを足した分、1000px以下ではメニューを「≡」にまとめる（780pxで文字が折り返していた） */
.sx-site .sx-nav a { white-space: nowrap; }
@media (max-width: 1000px) {
  .sx-site .sx-nav { display: none; }
  .sx-site .sx-header .sx-btn--sm { margin-left: auto; }
  .sx-site .sx-menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 11px; border: 0; background: transparent; cursor: pointer;
  }
  .sx-site .sx-menu span:not(.sr) { display: block; height: 2px; background: var(--sx-ink); border-radius: 2px; transition: transform .2s; }
  .sx-site .sx-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .sx-site .sx-menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .sx-site .sx-mobile-nav { display: flex; flex-direction: column; padding: 8px 16px 16px; border-top: 1px solid var(--sx-line); background: #fff; }
  .sx-site .sx-mobile-nav a { padding: 12px 4px; min-height: 44px; text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--sx-line); }
  .sx-site .sx-mobile-nav a:last-child { border-bottom: 0; color: var(--sx-muted); }
}

/* ==========================================================================
   2026-09-25 夜：本人フィードバック（図が左寄り・Webの強調・Dock・Space移動・プライバシー節をFAQへ）
   ========================================================================== */
/* 旧部品は sherpac-lp.css で margin:48px 0 0 などを持っていて、左右 auto が消えていた（広い画面で左寄り）。
   詳細度が同じなので、後に読み込むこちらで左右を auto に戻す */
.sx-site .sp-map, .sx-site .sp-examples, .sx-site .sp-web__grid, .sx-site .sp-subhead, .sx-site .sp-screen,
.sx-site .sp-capture, .sx-site .sp-capture__note, .sx-site .sp-cmd__grid, .sx-site .sp-cmd__note,
.sx-site .sp-features, .sx-site .sp-table-wrap, .sx-site .sp-table__notes, .sx-site .sp-upgrade {
  margin-left: auto; margin-right: auto;
}
.sx-site .sp-map, .sx-site .sp-web__grid, .sx-site .sp-cmd__grid, .sx-site .sp-upgrade, .sx-site .sp-features,
.sx-site .sp-table-wrap, .sx-site .sp-examples, .sx-site .sp-capture { max-width: var(--sx-max); }
.sx-site .sp-subhead, .sx-site .sp-screen { max-width: 920px; }
.sx-site .sp-cmd__note, .sx-site .sp-capture__note { max-width: var(--sx-max); }

/* 日本語の小見出しに英字用の広い字間が掛かっていた（「E n t e r」のように開く） */
.sx-site .sp-map__label, .sx-site .sp-capture__tag, .sx-site .sp-examples__title, .sx-site .sp-table__group th { letter-spacing: .04em !important; }

/* いちばんの違い（Webページも開ける） */
.sx-highlight {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 76, 33, .08), rgba(255, 76, 33, 0) 70%),
    linear-gradient(#fff, #fbfbfd);
  border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line);
}
.sx-badge {
  display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--sx-ink); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
}
.sx-highlight .sx-head h2 { font-size: clamp(30px, 4.4vw, 52px); }
.sx-head strong, .sx-hero__lead strong { color: var(--sx-ink); font-weight: 800; background: linear-gradient(transparent 62%, rgba(255, 76, 33, .22) 62%); }
.sx-webchips { list-style: none; padding: 0; margin: -24px auto 48px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px !important; }
.sx-webchips li span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--sx-line); background: #fff;
  font-size: 13.5px; font-weight: 700;
}
.sx-webchips li span::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--sx-ink-2);
  background: linear-gradient(var(--sx-ink-2), var(--sx-ink-2)) center/100% 1.4px no-repeat, linear-gradient(var(--sx-ink-2), var(--sx-ink-2)) center/1.4px 100% no-repeat;
}

/* Dock の設定画面 */
.sx-site #dock .sp-screen { margin-top: 48px; }
.sx-site .sp-screen figcaption b { margin-right: 4px; }

/* スペースで候補を移動 */
.sx-space {
  margin: 32px auto 0; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
  padding: 26px 28px; border-radius: var(--sx-radius); background: var(--sx-ink); color: #fff;
}
.sx-space__keys { display: flex; align-items: center; gap: 6px; }
.sx-space__keys kbd { min-width: 88px; height: 40px; line-height: 38px !important; font-size: 14px !important; background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .35) !important; color: #fff !important; }
.sx-space__keys span { font-weight: 800; font-size: 18px; margin-left: 4px; }
.sx-space__title { font-size: 17px; font-weight: 800; }
.sx-space ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.sx-space kbd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
@media (max-width: 760px) {
  .sx-space { grid-template-columns: 1fr; padding: 22px 18px; }
  .sx-space__keys kbd { min-width: 72px; }
}

/* FAQ の中の一覧 */
.sx-faq .sx-faq__list { margin: 0 0 12px; padding-left: 1.2em; color: var(--sx-ink-2); font-size: 15px; display: grid; gap: 4px; }
.sx-faq details p + .sx-faq__list { margin-top: -10px; }

/* フッターの一文 */
.sx-footer__by a { margin-left: 6px; font-weight: 700 !important; }
/* バッジの文字色が .sx-head > p の色指定に負けていた。見出しは文節で折り返す */
.sx-head > p.sx-badge { color: #fff; margin-top: 0; font-size: 13px; }
.sx-highlight .sx-head { max-width: 980px; }
.sx-site .sx-head h2, .sx-site .sx-feature h3, .sx-site .sx-feature__intro h3 { word-break: auto-phrase; text-wrap: balance; }
.sx-site .sx-space li kbd { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .3) !important; color: #fff !important; }

/* Mac専用の案内（2026-09-26） */
.sx-copyurl { display: block; margin: 10px auto 0; padding: 8px 16px; border-radius: 999px; border: 1px solid #cfd4dc; background: #fff; font: 700 13px/1.4 inherit; color: var(--sx-ink); cursor: pointer; }

/* 法務・サポートのページ（sherpac-legal / terms / privacy / support / updates / licenses、2026-09-26） */
.sx-nav--doc { margin-left: auto; }
.sx-nav--doc a[aria-current="page"] { color: var(--sx-ink); text-decoration: underline; text-underline-offset: 6px; }
.sx-doc { max-width: 800px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 24px clamp(64px, 8vw, 104px); }
.sx-doc h1 { margin-top: 10px; font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -.01em; line-height: 1.3; }
.sx-doc__lead { margin-top: 16px; color: var(--sx-ink-2); font-size: 15.5px; line-height: 1.9; }
.sx-doc section { margin-top: 40px; }
.sx-doc h2 { font-size: 18px; font-weight: 800; padding-bottom: 10px; border-bottom: 1px solid var(--sx-line); }
.sx-doc section > p, .sx-doc section > ul, .sx-doc section > ol { margin-top: 14px; font-size: 15px; line-height: 1.9; color: var(--sx-ink-2); }
.sx-doc section li + li { margin-top: 6px; }
.sx-doc h3 { margin-top: 26px; font-size: 16px; font-weight: 800; color: var(--sx-ink); }
.sx-doc ul, .sx-doc ol { padding-left: 1.4em; }
.sx-doc a { color: var(--sx-navy); text-decoration: underline; text-underline-offset: 3px; }
.sx-doc a.sx-btn { text-decoration: none; }
/* .sx-doc a（0,1,1）がボタンの文字色（0,1,0）に勝つので、ボタンの色を戻す */
.sx-doc a.sx-btn--dark { color: #fff; }
.sx-doc a.sx-btn--ghost { color: var(--sx-ink); }
.sx-doc strong { color: var(--sx-ink); }
.sx-doc__table { margin: 32px 0 0; border-top: 1px solid var(--sx-line); }
.sx-doc section .sx-doc__table { margin-top: 16px; }
.sx-doc__table > div { display: grid; grid-template-columns: 200px 1fr; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--sx-line); }
.sx-doc__table dt { font-weight: 800; font-size: 14.5px; }
.sx-doc__table dd { margin: 0; font-size: 15px; line-height: 1.85; color: var(--sx-ink-2); }
.sx-doc__contact { margin-top: 32px; padding: 24px 28px; border-radius: var(--sx-radius); background: var(--sx-soft); }
.sx-doc__contact-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--sx-orange-text); }
.sx-doc__contact-mail { margin-top: 6px; font-size: 20px; font-weight: 800; word-break: break-all; }
.sx-doc__contact p:last-child { margin-top: 6px; font-size: 14px; color: var(--sx-ink-2); }
.sx-doc__warn { padding: 12px 16px; border-radius: 12px; background: #fff4f0; color: var(--sx-ink) !important; font-size: 14px !important; }
.sx-doc__release { margin-top: 16px; padding: 24px; border: 1px solid var(--sx-line); border-radius: var(--sx-radius); }
.sx-doc__release > p:not(.sx-mobile-note) { font-size: 15px; color: var(--sx-ink-2); }
.sx-doc__release .sx-btn { margin-top: 16px; }
.sx-doc__release .sx-btn ~ p:not(.sx-mobile-note) { margin-top: 14px; }
.sx-doc__ver { font-size: 20px !important; font-weight: 900; color: var(--sx-ink) !important; }
.sx-doc__ver span { margin-left: 10px; font-size: 13px; font-weight: 600; color: var(--sx-muted); }
.sx-doc__date { margin-top: 48px; font-size: 13px; color: var(--sx-muted); text-align: right; }
@media (max-width: 1000px) { .sx-docpage .sx-nav--doc { display: flex; gap: 16px; font-size: 13px; } }
@media (max-width: 760px) { .sx-doc__table > div { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 480px) { .sx-docpage .sx-brand { display: none; } }

/* 2026-09-28 機能の節を動画中心に：見出し＋短い説明＋動画（feature-films.html#…）＋要点。
   長い説明文とスクリーンショットは動画に置き換え、数字と条件だけを要点として残す。 */
.sx-site .sx-film--feature { max-width: 1040px; margin: 0 auto; }
.sx-site .sx-head + .sx-film--feature,
.sx-site .sx-webchips + .sx-film--feature { margin-top: 40px; }
.sx-site .sp-facts { list-style: none; max-width: 1040px; margin: 24px auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sx-site .sp-facts li { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--sx-line); border-radius: 14px; background: #fff; color: var(--sx-ink-2); font-size: 14px; line-height: 1.75; }
.sx-site .sp-facts b { color: var(--sx-ink); font-size: 15px; line-height: 1.5; }
.sx-site .sp-facts code { align-self: flex-start; padding: 5px 10px; border-radius: 8px; background: var(--sx-soft); color: var(--sx-ink); font: 700 14px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.sx-site .sp-facts__note { max-width: 1040px; margin: 14px auto 0; color: var(--sx-muted); font-size: 12.5px; line-height: 1.8; }
.sx-site .sx-film--feature + .sx-note { max-width: 1040px; margin-left: auto; margin-right: auto; }
.sx-site .sp-upgrade--solo { max-width: 1040px; margin: 28px auto 0; grid-template-columns: 1fr; }
.sx-site .sp-upgrade--solo .sp-upgrade__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) {
  .sx-site .sp-facts, .sx-site .sp-upgrade--solo .sp-upgrade__steps { grid-template-columns: 1fr; }
  .sx-site .sx-head + .sx-film--feature, .sx-site .sx-webchips + .sx-film--feature { margin-top: 28px; }
}