/* FC LP v6: 新セクション「実際の画面を見る・触ってみる」（2026-10-24）。
   本番 fp/index.html の CSS には触れず、クラスはすべて ts- 始まり（見出し・英字・色は本番のまま）。
   手本はツアー（fc-lp-tour/a/tour-v4）の画面構成: 上に3つのアプリ、左に名前・一言・説明・チップ、右に水色の舞台で画面。
   案A・B = 白地に水色の舞台（ツアーと同じ）／案C（.ts--navy）= 本番ガチャと同じ濃紺の面 */
.ts{--ts-ink:#172939;--ts-muted:#5d7085;--ts-blue:#1775ee;--ts-pale:#eef5fd;--ts-rule:#e2e9f2;--ts-ghost:#dce9f8;
  --ts-grad:linear-gradient(120deg,#0693e3 0%,#1775ee 60%,#1259d6 100%);
  color:var(--ts-ink);line-break:strict}
.ts.section{padding-top:56px}
.ts *{box-sizing:border-box}
.ts button{font-family:inherit}
.ts-head h2{margin:0}
.ts-head .phrase{display:inline-block}
@media(max-width:600px){.ts.section{padding-top:24px}}

/* --- 3つのアプリのカード --- */
.ts-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.ts-tab{display:flex;align-items:center;gap:14px;min-width:0;height:84px;padding:0 22px;border:1px solid var(--ts-rule);border-radius:16px;background:#fff;color:var(--ts-muted);text-align:left;cursor:pointer;transition:background-color .25s,border-color .25s,box-shadow .25s,color .25s}
.ts-tab .ts-ic{width:48px;height:48px;border-radius:13px}
.ts-tab b{display:block;font-size:20px;font-weight:900;line-height:1.2;letter-spacing:-.3px;white-space:nowrap}
.ts-tab small{display:block;font-size:12.5px;line-height:1.4;white-space:nowrap}
.ts-tab[aria-selected="true"]{background:var(--ts-pale);border-color:#9cc3f5;color:var(--ts-ink);box-shadow:0 14px 28px -20px #1775ee99}
@media(hover:hover){.ts-tab:hover{border-color:#bcd7f7;color:var(--ts-ink)}}
.ts-ic{flex:none;display:block;width:40px;height:40px;border-radius:11px;overflow:hidden;box-shadow:0 0 0 1px #17293914}
.ts-ic img{width:100%;height:100%;object-fit:cover;display:block}
.ts-adm{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(150deg,#1f3a57,#0b1726)}
.ts-adm svg{width:66%;height:66%}

/* --- 1画面ぶん（左: 名前・一言・説明・チップ／右: 舞台） --- */
.ts-view{display:grid;grid-template-columns:390px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"cap stage" "foot stage";column-gap:32px;margin-top:20px}
.ts-view[hidden]{display:none}
.ts-view.is-in{animation:tsIn .45s ease both}
@keyframes tsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ts-cap{grid-area:cap;padding-top:12px}
.ts-who{margin:0;font-size:15px;font-weight:700;color:var(--ts-blue)}
.ts-name{display:flex;align-items:center;gap:16px;margin:12px 0 0}
.ts-name .ts-ic{width:64px;height:64px;border-radius:16px}
.ts-name b{font-size:48px;font-weight:900;line-height:1.1;letter-spacing:-1.5px;white-space:nowrap}
.ts-h{margin:28px 0 0;font-size:27px;font-weight:900;line-height:1.45;letter-spacing:-.6px}
/* 見出しは3タブとも1行（オーナー指示 2026-10-25）。幅が足りない端末では文字を縮めて収める */
.ts-h{white-space:nowrap}
.ts-h .blue{color:var(--ts-blue)}
.ts-sub{margin:10px 0 0;font-size:14px;line-height:1.8;color:var(--ts-muted)}
.ts-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.ts-chip{display:inline-flex;align-items:center;height:40px;padding:0 10px;border:1px solid #d5e0ec;border-radius:100px;background:#fff;color:var(--ts-ink);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.ts-chip[aria-pressed="true"]{background:var(--ts-ink);border-color:var(--ts-ink);color:#fff}
@media(hover:hover){.ts-chip:hover{border-color:#9cc3f5}}
.ts-foot{grid-area:foot;align-self:end;padding-top:28px}
.ts-note{margin:0 0 14px;font-size:12px;line-height:1.7;color:var(--ts-muted)}
.ts-nav{display:flex;gap:8px}
.ts-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:54px;padding:0 20px;border:0;border-radius:100px;font-size:15px;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:transform .2s ease}
.ts-grad{flex:1;background:var(--ts-grad);color:#fff;box-shadow:0 14px 28px -12px #1775eeaa}
.ts-ghost{background:#fff;color:var(--ts-ink);box-shadow:inset 0 0 0 1.5px #cfdcea}
.ts-ghost svg{color:var(--ts-blue)}
.ts-line{flex:1;gap:8px;background:#06c755;color:#fff;box-shadow:0 14px 28px -12px #06c75599}
.ts-lic{display:inline-flex;flex:none}.ts-lic svg{width:22px;height:22px}
@media(hover:hover){.ts-btn:hover{transform:translateY(-2px)}}
.ts-ni{display:block;flex:none;width:24px;height:24px;margin:0 2px;border-radius:7px;overflow:hidden}
.ts-ni img{width:100%;height:100%;object-fit:cover;display:block}

/* --- 舞台 --- */
.ts-stage{grid-area:stage;position:relative;display:flex;align-items:center;justify-content:center;min-height:660px;padding:64px 28px 32px;border-radius:24px;background:var(--ts-pale);overflow:hidden}
.ts-bgword{position:absolute;left:36px;top:-6px;font:900 112px/1 Arial,Helvetica,sans-serif;letter-spacing:-6px;white-space:nowrap;color:var(--ts-ghost);pointer-events:none;user-select:none}
.ts-ph{position:relative;z-index:1;width:262px;aspect-ratio:390/844;border:7px solid #111a24;border-radius:34px;background:#fff;overflow:hidden;box-shadow:0 30px 50px -24px #17293980;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.ts-ph::before{content:"";position:absolute;left:50%;top:6px;z-index:3;width:30%;height:15px;transform:translateX(-50%);border-radius:100px;background:#111a24}
.ts-ph>img,.ts-br-body>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ts-ph iframe,.ts-br-body iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff;max-width:none}
.ts-br{position:relative;z-index:1;width:100%;max-width:780px;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 28px 56px -28px #17293970,0 0 0 1px #1729391f}
.ts-br-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#f1f4f8;border-bottom:1px solid #e1e7ee}
.ts-br-bar i{width:9px;height:9px;border-radius:50%;background:#cfd8e3}
.ts-br-bar span{flex:1;max-width:420px;height:22px;margin-left:8px;padding:0 12px;border-radius:100px;background:#fff;color:var(--ts-muted);font-size:11px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-br-body{position:relative;aspect-ratio:1280/800;overflow:hidden}
.ts-touch{position:absolute;left:50%;bottom:9%;z-index:4;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:100px;background:#172939;color:#fff;font-size:13.5px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 10px 24px #17293940}
.ts-touch svg{width:18px;height:18px;color:#8ed1fc}
.is-live .ts-touch{display:none}
.ts-pc-only{display:block}.ts-sp-only{display:none}

@media(max-width:900px){
  .ts-tabs{gap:6px;margin-top:26px}
  .ts-tab{flex-direction:column;justify-content:center;gap:5px;height:78px;padding:6px 2px;text-align:center;border-radius:12px}
  .ts-tab .ts-ic{width:28px;height:28px;border-radius:8px}
  .ts-tab b{font-size:13px}.ts-tab small{font-size:10px}
  .ts-view{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"cap" "stage" "foot";margin-top:16px}
  .ts-cap{padding-top:0}
  .ts-who{font-size:12px}
  .ts-name{margin-top:6px;gap:12px}
  .ts-name .ts-ic{width:44px;height:44px;border-radius:12px}
  .ts-name b{font-size:28px;letter-spacing:-.8px}
  .ts-h{margin-top:14px;font-size:min(21px,5.4vw)}
  .ts-sub{font-size:13px}
  .ts-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:14px -24px 0;padding:0 24px 2px}
  .ts-chips::-webkit-scrollbar{display:none}
  .ts-chip{flex:none;height:36px;padding:0 14px;font-size:13px}
  .ts-stage{min-height:0;margin-top:16px;padding:46px 16px 22px;border-radius:20px}
  .ts-bgword{left:14px;top:-2px;font-size:58px;letter-spacing:-3px}
  .ts-ph{width:250px}
  .ts-foot{padding-top:18px}
  .ts-note{font-size:11px;margin-bottom:10px}
  .ts-btn{height:50px;font-size:14px;padding:0 14px}
  .ts-pc-only{display:none}.ts-sp-only{display:block}
}

/* --- 案C: 本番ガチャと同じ濃紺の面（#132a53・右上の青い光・#9cc7ff の小見出し・#ffffff0e の面）。色は本番にあるものだけ --- */
.ts--navy{--ts-ink:#fff;--ts-muted:#c1d1e8;--ts-blue:#9eceff;--ts-pale:#ffffff0e;--ts-rule:#ffffff26;--ts-ghost:#ffffff0d;background:#132a53;color:#fff}
.ts--navy::before{content:"";position:absolute;z-index:-1;width:600px;height:600px;right:-200px;top:0;background:radial-gradient(#345ff88c,transparent 65%);pointer-events:none}
.ts--navy.section{padding-top:108px}
@media(max-width:600px){.ts--navy.section{padding-top:68px}}
.ts--navy .eyebrow{color:#9cc7ff}
.ts--navy h2{color:#fff}
.ts--navy h2 .blue{color:#9eceff}
.ts--navy[data-wm]::after{color:#ffffff0d}
.ts--navy .ts-tab{background:#ffffff0e;border-color:#ffffff26;color:#c1d1e8}
.ts--navy .ts-tab[aria-selected="true"]{background:#ffffff1f;border-color:#9cc7ff;color:#fff;box-shadow:none}
@media(hover:hover){.ts--navy .ts-tab:hover{border-color:#9cc7ff;color:#fff}}
.ts--navy .ts-who{color:#9cc7ff}
.ts--navy .ts-h .blue{color:#9eceff}
.ts--navy .ts-stage{border:1px solid #ffffff26}
.ts--navy .ts-chip{background:transparent;border-color:#ffffff40;color:#fff}
.ts--navy .ts-chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:#132a53}
.ts--navy .ts-note{color:#a7bfdf}
.ts--navy .ts-ghost{background:#ffffff0e;color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff40}
.ts--navy .ts-ghost svg{color:#9cc7ff}
.ts--navy .ts-ic{box-shadow:0 0 0 1px #ffffff26}
.ts--navy .ts-touch{background:#fff;color:#132a53}
.ts--navy .ts-touch svg{color:#1775ee}
@media(prefers-reduced-motion:reduce){.ts-view.is-in{animation:none}.ts *{transition:none!important}}