@charset "UTF-8";
/* ZEN AI LAB — TOOL STORE（/tool-store/ ・ /tool-store/{slug}/）DESIGN 3.0（2026-09-28・見た目刷新のみ）。
   DESIGN 4.0（2026-09-25〜、黒基調・キャラクターなし・Linear/Raycast/Vercel参照）を土台に、
   CEO指示でヒーロー・FREE EDITION・LINE FREE ACCESSの3箇所だけを刷新。データ層・カード・カタログ本体は不変。
   設計原則（継続）:
   1. 黒に近い背景（#08090a 前後）と、オフホワイトの文字・1px の細い境界線。過剰なネオン・グラデーションで飾らない。
   2. 主要ボタンは白塗り基調のまま、ヒーロー/FREE ACCESSのCTAだけアクセントの水色を使う。
   3. 見出しは大きく・字間を少し詰める。本文は 15px 前後・行間 1.7。階層は色の濃淡（100% / 72% / 52%）とサイズで作る。
   4. カタログ本体は「実際の製品画面が主役」のまま。ヒーローだけ公式キャラクター（ZEN・AI LAB・NOA）が主役
      （FUTURE TERMINAL＝トップページと共通の実在素材。新規生成なし。詳細 = docs/tool-store/line-free-access/）。
   5. 余白は 4px の倍数。
   全セレクタは .ts- で始める（既存ページに影響しない）。値は下の :root 相当（.ts-main 内のトークン）で一元管理する。
   前提: body.zen-home 配下（共有ヘッダー・フッターは変更しない）。 */

/* ============ 1. デザイントークン ============ */
.ts-main{
  /* color */
  --ts-bg:#08090a;--ts-surface:#0e1012;--ts-well:#14171b;
  --ts-line:rgba(255,255,255,.08);--ts-line-2:rgba(255,255,255,.16);
  --ts-text:#f7f8f8;--ts-text-2:#b4b9c2;--ts-text-3:#8a8f98;
  --ts-accent:#7c9cff;
  /* type */
  --ts-font:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
  --ts-fs-display:clamp(2.5rem,5.6vw,3.75rem);--ts-fs-h2:clamp(1.5rem,2.8vw,2rem);--ts-fs-lead:1.0625rem;--ts-fs-body:.9375rem;--ts-fs-sm:.8125rem;--ts-fs-xs:.75rem;
  /* space (4px grid) */
  --ts-s1:4px;--ts-s2:8px;--ts-s3:12px;--ts-s4:16px;--ts-s5:20px;--ts-s6:24px;--ts-s8:32px;--ts-s10:40px;--ts-s12:48px;--ts-s16:64px;--ts-s20:80px;
  /* shape */
  --ts-r1:8px;--ts-r2:12px;--ts-r3:16px;--ts-container:1200px;--ts-gutter:24px;
  /* motion */
  --ts-ease:cubic-bezier(.2,.6,.2,1);--ts-dur:.16s;
  background:var(--ts-bg);color:var(--ts-text);font-family:var(--ts-font);font-size:var(--ts-fs-body);line-height:1.75;-webkit-font-smoothing:antialiased
}

/* ============ 2. ベース ============ */
.ts-main h1,.ts-main h2,.ts-main h3,.ts-main p,.ts-main dl,.ts-main dd,.ts-main ul,.ts-main ol{margin:0;padding:0}
.ts-main ul,.ts-main ol{list-style:none}
.ts-main h1,.ts-main h2,.ts-main h3{color:var(--ts-text);font-family:var(--ts-font);font-feature-settings:"palt"}
.ts-main img{display:block;max-width:100%;height:auto}
:where(.ts-main a){color:inherit;text-decoration:none}
.ts-main :focus-visible{outline:2px solid var(--ts-accent);outline-offset:2px;border-radius:6px}
.ts-wrap{width:min(var(--ts-container),calc(100% - var(--ts-gutter) * 2));margin:0 auto}
.ts-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-ts-js][hidden]{display:none!important}
.ts-note{margin-top:var(--ts-s4);font-size:var(--ts-fs-xs);line-height:1.8;color:var(--ts-text-3);max-width:52rem}

/* パンくず */
.ts-crumbs{margin:0 0 var(--ts-s8)}
.ts-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.ts-crumbs a{color:var(--ts-text-3)}
.ts-crumbs a:hover{color:var(--ts-text)}
.ts-crumbs [aria-current]{color:var(--ts-text-2)}

/* ============ 3. 部品 ============ */
/* ボタン: 主要 = 白塗り。副 = 細い枠。 */
.ts-btn,.ts-buy{display:inline-flex;align-items:center;justify-content:center;gap:var(--ts-s2);min-height:44px;padding:0 var(--ts-s5);font:inherit;font-size:.9375rem;font-weight:600;line-height:1;border-radius:10px;cursor:pointer;transition:background var(--ts-dur) var(--ts-ease),border-color var(--ts-dur) var(--ts-ease),color var(--ts-dur) var(--ts-ease)}
.ts-main .ts-buy{min-height:48px;padding:0 var(--ts-s6);color:#08090a;background:var(--ts-text);border:1px solid var(--ts-text)}
.ts-main .ts-buy:hover{color:#08090a;background:#fff;border-color:#fff}
.ts-main .ts-btn-ghost{color:var(--ts-text);background:transparent;border:1px solid var(--ts-line-2)}
.ts-main .ts-btn-ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.28)}
.ts-new{font-size:.6875rem;font-weight:700;letter-spacing:.08em;color:var(--ts-accent)}
.ts-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;font:inherit;font-size:.75rem;color:var(--ts-text-3);border:1px solid var(--ts-line-2);border-radius:6px}

/* 節の見出し */
.ts-sec{padding:var(--ts-s12) 0}
.ts-sec-head{margin:0 0 var(--ts-s8)}
.ts-sec-eyebrow{margin:0 0 var(--ts-s2);font-size:var(--ts-fs-xs);font-weight:600;letter-spacing:.14em;color:var(--ts-text-3)}
.ts-h2{font-size:var(--ts-fs-h2);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.ts-h3{margin:0 0 var(--ts-s3);font-size:1rem;font-weight:600}
.ts-sec-sub{margin-top:var(--ts-s2);font-size:var(--ts-fs-sm);color:var(--ts-text-3)}

/* 窓（実際の製品画面を入れる枠） */
.ts-frame{display:block;overflow:hidden;background:var(--ts-surface);border:1px solid var(--ts-line-2);border-radius:var(--ts-r2);box-shadow:0 24px 48px -24px rgba(0,0,0,.7)}
.ts-frame img{width:100%}

/* ============ 4. ファーストビュー（中央のメッセージ → 製品ショーケース） ============ */
.ts-hero{position:relative;overflow:hidden;padding:var(--ts-s8) 0 var(--ts-s10);isolation:isolate;background:var(--ts-bg)}
.ts-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:url("../img/ft/ft-city-1672.webp");background-size:cover;background-position:center top;opacity:.22}
.ts-hero::after{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 45% at 50% 0%,rgba(90,120,255,.1),transparent 72%),linear-gradient(180deg,rgba(8,9,10,.35) 0%,rgba(8,9,10,.75) 65%,var(--ts-bg) 100%)}
.ts-hero>.ts-wrap{position:relative;z-index:1}
.ts-hero-copy{max-width:46rem;margin:var(--ts-s8) auto var(--ts-s8);text-align:center}
.ts-eyebrow{margin:0 0 var(--ts-s5);font-size:var(--ts-fs-xs);font-weight:600;letter-spacing:.16em;color:var(--ts-text-3)}
.ts-hero h1{margin:0 0 var(--ts-s5);font-size:var(--ts-fs-display);font-weight:600;line-height:1.18;letter-spacing:-.02em}
.ts-hero-lead{margin:0 0 var(--ts-s8);font-size:var(--ts-fs-lead);line-height:1.85;color:var(--ts-text-2)}
.ts-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ts-s3)}
.ts-searchbar{display:flex;align-items:center;gap:var(--ts-s3);max-width:32rem;height:48px;margin:0 0 var(--ts-s5);padding:0 var(--ts-s4);background:var(--ts-surface);border:1px solid var(--ts-line-2);border-radius:var(--ts-r2);transition:border-color var(--ts-dur)}
.ts-searchbar[hidden]{display:none}
.ts-searchbar:focus-within{border-color:rgba(255,255,255,.4)}
.ts-searchbar-icon{display:inline-flex;color:var(--ts-text-3)}
.ts-searchbar-input{flex:1;min-width:0;height:100%;padding:0;font:inherit;font-size:16px;color:var(--ts-text);background:transparent;border:0;outline:0}
.ts-searchbar-input::placeholder{color:var(--ts-text-3)}
.ts-searchbar-input::-webkit-search-cancel-button{filter:invert(.7)}
.ts-hero-facts{margin-top:var(--ts-s2);text-align:center;font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-br{display:none}

/* ヒーローの主役（2026-09-28 CEO 指示・実在の公式素材のみ）。実画面の「窓」ショーケース（旧 .ts-stage/.ts-win）は
   キャラクター主役の方向へ置き換えたため廃止。PCは1枚バナー・スマホはZEN・SORA・NOAの3体構成（幅で切替）。 */
.ts-hero-visual{margin-top:var(--ts-s8)}

/* PC: 完成済みのヒーローバナー（既定は非表示・900px以上だけ表示）。
   `.ts-main img{display:block}`（部品2.ベース）より詳細度を上げないと勝てないため `.ts-main` を付ける。 */
.ts-main .ts-hero-banner-pc{display:none;max-width:1080px;width:100%;height:auto;margin:0 auto;border-radius:var(--ts-r3)}

/* スマホ: ZEN・SORA・NOA（FUTURE TERMINALと共通の実在素材＋新規追加のSORA）。下端は背景へ溶ける。900px以上は非表示。 */
.ts-cast{position:relative;display:flex;align-items:flex-end;justify-content:center;max-width:1080px;margin:0 auto;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
.ts-cast img{height:clamp(220px,32vw,360px);width:auto;object-fit:contain;filter:drop-shadow(0 20px 36px rgba(0,0,0,.55))}
.ts-cast-zen{z-index:3}
.ts-cast-sora{z-index:2;margin:0 -8% 0 0}
.ts-cast-noa{z-index:2;height:clamp(120px,17vw,190px);margin:0 0 2% -6%}
@media (min-width:900px){
  .ts-main .ts-hero-banner-pc{display:block}
  .ts-cast{display:none}
}

/* ============ 5. 商品カード ============ */
.ts-grid{display:grid;gap:var(--ts-s4);grid-template-columns:1fr}
.ts-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--ts-surface);border:1px solid var(--ts-line);border-radius:var(--ts-r2);transition:border-color var(--ts-dur) var(--ts-ease),background var(--ts-dur) var(--ts-ease)}
.ts-card:hover{border-color:var(--ts-line-2);background:#111417}
.ts-card:focus-within{border-color:var(--ts-accent)}
.ts-card[hidden]{display:none}
/* 画像: 全カード 16:10・同じ余白・同じ切り取り（上端そろえで、窓が下から覗く形） */
.ts-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ts-well);border-bottom:1px solid var(--ts-line)}
.ts-thumb{position:absolute;left:var(--ts-s4);top:var(--ts-s4);width:calc(100% - var(--ts-s4) * 2);height:calc(100% - var(--ts-s4));object-fit:cover;object-position:left top;border:1px solid var(--ts-line-2);border-bottom:0;border-radius:8px 8px 0 0}
.ts-card-body{display:flex;flex:1;flex-direction:column;gap:var(--ts-s2);padding:var(--ts-s5)}
.ts-card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-s3);min-height:1.25rem;font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-card-cat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-card-name{font-size:1.0625rem;font-weight:600;line-height:1.4;letter-spacing:-.005em}
.ts-card-catch{min-height:3.4em;font-size:var(--ts-fs-sm);line-height:1.7;color:var(--ts-text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ts-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-s3);margin-top:auto;padding-top:var(--ts-s4)}
.ts-price{font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ts-text)}
.ts-card-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--ts-s3);font-size:var(--ts-fs-sm);font-weight:600;color:var(--ts-text);border:1px solid var(--ts-line-2);border-radius:var(--ts-r1);transition:background var(--ts-dur),border-color var(--ts-dur)}
.ts-card:hover .ts-card-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.ts-card-btn::after{content:"";position:absolute;inset:0;border-radius:var(--ts-r2)}
.ts-card-btn:focus-visible{outline:none}
.ts-card-sum{font-size:var(--ts-fs-sm);line-height:1.8;color:var(--ts-text-3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ts-card-lead .ts-card-name{font-size:1.5rem;letter-spacing:-.01em}
.ts-card-lead .ts-card-catch{font-size:1rem;min-height:0}
.ts-card-lead .ts-price{font-size:1.375rem}

/* 画面画像が無い商品の代替（商品名・環境だけ。存在しない画面は描かない） */
.ts-thumb-tpl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--ts-s1);padding:var(--ts-s5);
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:16px 16px}
.ts-thumb-tpl-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:var(--ts-s3);color:var(--ts-text-2);background:var(--ts-surface);border:1px solid var(--ts-line-2);border-radius:var(--ts-r1)}
.ts-thumb-tpl-name{font-size:1.0625rem;font-weight:600;line-height:1.35;color:var(--ts-text)}
.ts-thumb-tpl-meta{font-size:var(--ts-fs-sm);font-weight:500;color:var(--ts-text-2)}


/* ============ 6. カタログ ============ */
.ts-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ts-s4);margin-bottom:var(--ts-s4);padding-bottom:var(--ts-s4);border-bottom:1px solid var(--ts-line)}
.ts-tabs{display:flex;gap:var(--ts-s1);max-width:100%;overflow-x:auto;scrollbar-width:none}
.ts-tabs::-webkit-scrollbar{display:none}
.ts-tab{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--ts-s3);font:inherit;font-size:.875rem;font-weight:500;color:var(--ts-text-3);background:transparent;border:0;border-radius:var(--ts-r1);cursor:pointer;transition:color var(--ts-dur),background var(--ts-dur)}
.ts-tab span{font-size:var(--ts-fs-xs)}
.ts-tab:hover{color:var(--ts-text)}
.ts-tab[aria-pressed="true"]{color:var(--ts-text);background:rgba(255,255,255,.08)}
.ts-selects{display:flex;gap:var(--ts-s2)}
.ts-select{min-height:36px;padding:0 32px 0 var(--ts-s3);font:inherit;font-size:var(--ts-fs-sm);font-weight:500;color:var(--ts-text-2);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid var(--ts-line-2);border-radius:var(--ts-r1);-webkit-appearance:none;appearance:none;cursor:pointer}
.ts-select:hover{color:var(--ts-text)}
.ts-select:focus-visible{outline:2px solid var(--ts-accent);outline-offset:2px}
.ts-select option{background:#14171b;color:var(--ts-text)}
.ts-result{margin:0 0 var(--ts-s5);font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-empty{padding:var(--ts-s12) var(--ts-s5);text-align:center;border:1px dashed var(--ts-line-2);border-radius:var(--ts-r2);color:var(--ts-text-3)}
.ts-empty[hidden]{display:none}
.ts-empty p{margin:0 0 var(--ts-s3)}
.ts-empty-all{color:var(--ts-text-3)}

/* 購入の流れ */
.ts-steps{display:grid;gap:0;grid-template-columns:1fr}
.ts-steps li{display:flex;flex-direction:column;gap:var(--ts-s2);padding:var(--ts-s6) 0;border-top:1px solid var(--ts-line)}
.ts-step-no{font-size:var(--ts-fs-xs);font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--ts-text-3)}
.ts-steps strong{font-size:1.0625rem;font-weight:600}
.ts-steps li>span:last-child{font-size:var(--ts-fs-sm);line-height:1.8;color:var(--ts-text-2)}

/* FREE EDITION（無料版）: 実在する無料版があればカード、無ければ「準備中」表示のみ（架空の画面は描かない） */
.ts-freeedition-empty{padding:var(--ts-s10) var(--ts-s5);text-align:center;color:var(--ts-text-3);background:var(--ts-surface);border:1px dashed var(--ts-line-2);border-radius:var(--ts-r3)}
.ts-freeedition-empty p{margin:0 0 var(--ts-s2);font-size:var(--ts-fs-sm);line-height:1.8}
.ts-freeedition-empty p:last-child{margin-bottom:0}
.ts-freeedition-empty strong{color:var(--ts-text)}
.ts-freeedition-empty-icon{font-size:1.75rem;margin-bottom:var(--ts-s3)}

/* LINE FREE ACCESS */
.ts-access-inner{display:flex;flex-direction:column;gap:var(--ts-s8);align-items:center;padding:var(--ts-s10) var(--ts-s6);
  background:linear-gradient(135deg,#0e1420,#0a0c14);border:1px solid var(--ts-line-2);border-radius:var(--ts-r3);text-align:center}
.ts-access-copy{max-width:34rem}
.ts-access-copy .ts-sec-head,.ts-access-copy .ts-sec-eyebrow{margin-bottom:var(--ts-s2)}
.ts-access-copy .ts-h2{margin-bottom:var(--ts-s3)}
.ts-access-copy .ts-sec-sub{margin:0 0 var(--ts-s6);color:var(--ts-text-2)}
.ts-main .ts-access-cta{background:var(--ts-accent);color:#08090a;border-color:var(--ts-accent);box-shadow:0 0 24px rgba(124,156,255,.3)}
.ts-main .ts-access-cta:hover{background:#93aeff;color:#08090a;border-color:#93aeff}
.ts-access-cast{display:flex;align-items:flex-end;justify-content:center;flex-shrink:0}
.ts-access-cast img{height:170px;width:auto;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.ts-access-cast .ts-access-noa{height:96px;margin-left:-16px}

/* 無料で使えるもの（既存の無料リソース一覧・不変） */
.ts-free-list{border-bottom:1px solid var(--ts-line)}
.ts-free-list a{display:grid;gap:var(--ts-s2) var(--ts-s6);grid-template-columns:1fr auto;align-items:center;padding:var(--ts-s5) 0;border-top:1px solid var(--ts-line);transition:background var(--ts-dur)}
.ts-free-name{font-size:1.0625rem;font-weight:600}
.ts-free-desc{grid-column:1;font-size:var(--ts-fs-sm);color:var(--ts-text-2)}
.ts-free-go{grid-column:2;grid-row:1 / span 2;color:var(--ts-text-3);transition:transform var(--ts-dur),color var(--ts-dur)}
.ts-free-list a:hover .ts-free-go{color:var(--ts-text);transform:translateX(3px)}

/* 結び */
.ts-close{padding:var(--ts-s16) 0 var(--ts-s20);border-top:1px solid var(--ts-line)}
.ts-close-inner{display:grid;gap:var(--ts-s10);grid-template-columns:1fr;align-items:end}
.ts-close h2{margin-bottom:var(--ts-s4);font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:600;line-height:1.35;letter-spacing:-.015em}
.ts-close-copy p{max-width:28rem;font-size:var(--ts-fs-body);color:var(--ts-text-2)}
.ts-close-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ts-s4)}
.ts-close-stats div{padding-top:var(--ts-s4);border-top:1px solid var(--ts-line-2)}
.ts-close-stats dt{font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-close-stats dd{margin-top:var(--ts-s1);font-size:clamp(2rem,4vw,2.75rem);font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ts-text)}

/* ============ 7. 商品ページ ============ */
.ts-lp-hero{position:relative;padding:var(--ts-s8) 0 var(--ts-s6);background:radial-gradient(60% 50% at 50% 0%,rgba(90,120,255,.07),transparent 72%),var(--ts-bg)}
.ts-lp-hero-copy{max-width:46rem}
.ts-lp-hero h1{margin:0 0 var(--ts-s4);font-size:clamp(2.25rem,5.2vw,3.5rem);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.ts-lp-catch{margin:0 0 var(--ts-s3);font-size:clamp(1.0625rem,2vw,1.25rem);font-weight:500;line-height:1.7;color:var(--ts-text)}
.ts-lp-summary{margin:0;font-size:var(--ts-fs-body);line-height:1.9;color:var(--ts-text-2)}
.ts-lp-facts{display:flex;flex-wrap:wrap;gap:var(--ts-s3) var(--ts-s10);margin:var(--ts-s8) 0 0}
.ts-lp-facts dt{margin-bottom:2px;font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-lp-facts dd{font-size:var(--ts-fs-body);color:var(--ts-text)}
.ts-lp-facts .ts-lp-price{font-size:1.5rem;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.ts-lp-cta{display:flex;flex-wrap:wrap;gap:var(--ts-s3);margin-top:var(--ts-s8)}
.ts-lp-cta-note{margin-top:var(--ts-s3);font-size:var(--ts-fs-xs);line-height:1.7;color:var(--ts-text-3)}
.ts-lp-hero-media{margin-top:var(--ts-s12)}
.ts-lp-shot{width:100%}

.ts-problems,.ts-features{display:grid;gap:0 var(--ts-s10);grid-template-columns:1fr}
.ts-problems li,.ts-features li{padding:var(--ts-s6) 0;border-top:1px solid var(--ts-line)}
.ts-problems strong,.ts-features strong{display:block;margin-bottom:var(--ts-s2);font-size:1.0625rem;font-weight:600;line-height:1.5}
.ts-problems p,.ts-features p{font-size:var(--ts-fs-sm);line-height:1.85;color:var(--ts-text-2)}
.ts-audience{margin-top:var(--ts-s10)}
.ts-audience ul{display:grid;gap:var(--ts-s2)}
.ts-audience li{position:relative;padding-left:var(--ts-s5);font-size:var(--ts-fs-body);color:var(--ts-text-2)}
.ts-audience li::before{content:"";position:absolute;left:4px;top:.85em;width:4px;height:4px;border-radius:50%;background:var(--ts-text-3)}

.ts-video{position:relative;margin-bottom:var(--ts-s6);aspect-ratio:16/9;border:1px solid var(--ts-line-2);border-radius:var(--ts-r2);overflow:hidden;background:var(--ts-surface)}
.ts-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ts-video-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ts-s3);width:100%;font:inherit;color:var(--ts-text);background:var(--ts-surface);border:0;cursor:pointer;transition:background var(--ts-dur)}
.ts-video-play:hover{background:#111417}
.ts-video-icon{display:inline-flex;color:var(--ts-text-2)}
.ts-video-text{font-size:var(--ts-fs-sm);font-weight:600}
.ts-video-link{position:absolute;right:12px;bottom:10px;z-index:2;font-size:var(--ts-fs-xs);color:var(--ts-text-3);text-decoration:underline;text-underline-offset:3px}
.ts-shots{display:grid;gap:var(--ts-s6) var(--ts-s5);grid-template-columns:1fr}
.ts-shots li{display:flex;flex-direction:column;gap:var(--ts-s3)}
.ts-shots .ts-frame{transition:border-color var(--ts-dur)}
.ts-shots .ts-frame:hover{border-color:rgba(255,255,255,.3)}
.ts-shots li>span{font-size:var(--ts-fs-sm);line-height:1.7;color:var(--ts-text-3)}

.ts-steps-lp{grid-template-columns:1fr}
.ts-steps-lp li{flex-direction:row;align-items:baseline;gap:var(--ts-s5)}
.ts-steps-lp li>span:last-child{font-size:var(--ts-fs-body);color:var(--ts-text)}

.ts-price-box{display:grid;grid-template-columns:1fr;background:var(--ts-surface);border:1px solid var(--ts-line-2);border-radius:var(--ts-r3);overflow:hidden}
.ts-price-main{display:flex;flex-direction:column;gap:var(--ts-s1);padding:var(--ts-s8)}
.ts-price-label{font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-price-value{font-size:clamp(2.25rem,5vw,3rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ts-price-checked{font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-price-cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ts-s3);margin-top:var(--ts-s6)}
.ts-price-cta .ts-note{margin:0}
.ts-price-list{display:grid;gap:0;padding:0 var(--ts-s8) var(--ts-s6);border-top:1px solid var(--ts-line)}
.ts-price-list div{padding:var(--ts-s5) 0;border-bottom:1px solid var(--ts-line)}
.ts-price-list div:last-child{border-bottom:0}
.ts-price-list dt{margin-bottom:var(--ts-s1);font-size:var(--ts-fs-xs);color:var(--ts-text-3)}
.ts-price-list dd{font-size:var(--ts-fs-sm);line-height:1.85;color:var(--ts-text-2)}
.ts-price-list dd ul{display:grid;gap:var(--ts-s1)}
.ts-price-list dd li{position:relative;padding-left:var(--ts-s4)}
.ts-price-list dd li::before{content:"";position:absolute;left:2px;top:.85em;width:4px;height:4px;border-radius:50%;background:var(--ts-text-3)}

.ts-faq{border-bottom:1px solid var(--ts-line)}
.ts-faq-item{border-top:1px solid var(--ts-line)}
.ts-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-s4);padding:var(--ts-s5) 0;font-size:1rem;font-weight:500;line-height:1.6;cursor:pointer;list-style:none}
.ts-faq-item summary::-webkit-details-marker{display:none}
.ts-faq-item summary::after{content:"+";flex:none;font-size:1.25rem;font-weight:400;color:var(--ts-text-3)}
.ts-faq-item[open] summary::after{content:"−"}
.ts-faq-item p{padding:0 0 var(--ts-s6);max-width:46rem;font-size:var(--ts-fs-sm);line-height:1.9;color:var(--ts-text-2)}
.ts-back{padding-bottom:var(--ts-s16)}

/* スマホの固定購入バー（ヒーローの購入ボタンが見えなくなったら出す） */
.ts-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:var(--ts-s3) var(--ts-s4) calc(var(--ts-s3) + env(safe-area-inset-bottom));background:rgba(8,9,10,.94);border-top:1px solid var(--ts-line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ts-sticky[hidden]{display:none}
.ts-sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-s3);max-width:var(--ts-container);margin:0 auto}
.ts-sticky-name{display:flex;flex-direction:column;min-width:0;font-size:var(--ts-fs-sm);font-weight:600;line-height:1.35}
.ts-sticky-name small{font-size:var(--ts-fs-sm);font-weight:500;color:var(--ts-text-2)}
.ts-sticky .ts-buy{flex:none;min-height:44px;padding:0 var(--ts-s5);font-size:.875rem}

/* ============ 8. レスポンシブ ============ */
@media (min-width:560px){
  .ts-grid{grid-template-columns:repeat(2,1fr)}
  .ts-shots{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:720px){
  .ts-steps{grid-template-columns:repeat(3,1fr);gap:0 var(--ts-s8)}
  .ts-steps-lp{grid-template-columns:repeat(2,1fr)}
  .ts-steps-lp li{flex-direction:column;gap:var(--ts-s2)}
  .ts-problems{grid-template-columns:repeat(2,1fr)}
  .ts-grid-featured{grid-template-columns:repeat(2,1fr)}
  .ts-card-lead{grid-column:1/-1}
  .ts-free-list a{grid-template-columns:minmax(0,15rem) 1fr auto}
  .ts-free-desc{grid-column:2}
  .ts-free-go{grid-column:3;grid-row:1}
  .ts-close-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ts-access-inner{flex-direction:row;justify-content:space-between;text-align:left;padding:var(--ts-s10)}
  .ts-access-copy .ts-sec-sub{margin-left:0}
}
@media (min-width:900px){
  .ts-hero{padding:var(--ts-s8) 0 var(--ts-s4)}
  .ts-featured{padding-top:var(--ts-s10)}
  .ts-br{display:inline}
  .ts-card-lead{flex-direction:row}
  .ts-card-lead .ts-card-media{order:2;flex:0 0 58%;aspect-ratio:auto;min-height:340px;border-bottom:0;border-left:1px solid var(--ts-line)}
  .ts-card-lead .ts-card-body{order:1;flex:1;justify-content:center;gap:var(--ts-s3);padding:var(--ts-s10)}
  .ts-sec{padding:var(--ts-s20) 0}
  .ts-grid{grid-template-columns:repeat(3,1fr)}
  .ts-features{grid-template-columns:repeat(3,1fr)}
  .ts-steps-lp{grid-template-columns:repeat(4,1fr)}
  .ts-price-box{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .ts-price-list{padding:var(--ts-s3) var(--ts-s8);border-top:0;border-left:1px solid var(--ts-line)}
  .ts-related .ts-grid{grid-template-columns:repeat(3,1fr)}
  .ts-sticky{display:none}
}
@media (min-width:1140px){
  .ts-grid{grid-template-columns:repeat(4,1fr)}
  .ts-grid-featured{grid-template-columns:repeat(2,1fr)}
  .ts-related .ts-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:719px){
  .ts-main{--ts-gutter:20px}
  .ts-sec{padding:var(--ts-s10) 0}
  .ts-hero-copy{margin:var(--ts-s8) auto var(--ts-s8)}
  .ts-hero-cta .ts-buy,.ts-hero-cta .ts-btn{width:100%}
  .ts-cast{margin-top:var(--ts-s6)}
  .ts-cast img{height:clamp(160px,42vw,220px)}
  .ts-cast-noa{height:clamp(90px,24vw,120px)}
  .ts-toolbar{flex-direction:column;align-items:stretch}
  .ts-selects .ts-select-wrap{flex:1}
  .ts-selects .ts-select{width:100%}
  .ts-lp-cta .ts-buy,.ts-lp-cta .ts-btn,.ts-price-cta .ts-buy{width:100%}
  .ts-lp{padding-bottom:76px}
  .ts-price-main{padding:var(--ts-s6)}
  .ts-price-list{padding:0 var(--ts-s6) var(--ts-s4)}
  .ts-close{padding:var(--ts-s12) 0 var(--ts-s16)}
}
@media (prefers-reduced-motion:reduce){
  .ts-main *{transition:none!important}
}