/* FC LP v6 用の複製（元は fc-lp-v5/full/tour/tour.css）。変えた点は追従メニューの形・位置だけ（yt-bar のブロック）。 */
/* FC LP v5 用の複製（元は fc-lp-tour/a/tour-v4/tour.css）。変えた点は末尾近くの「FC LP v5 用」の2か所だけ。
   ===== 作り直し案 v4: PC は v3 の白基調・左の見せ方＋v2 の小さめカード3枚・まっすぐなブラウザ枠。スマホは v3 と同じ（2026-10-15）=====
   ?v=4 のとき tour/tour.css の代わりに読む。LP本体のCSSには触らない。クラスはすべて yt- で始める。
   色: 白地に墨、水色の面（#eef5fd）と LP の --blue #1775ee。背景の大きな英字（アプリ名）は LP のヒーローと同じ見せ方。
   動きは3種類まで: ①見出しと画面のフェード ②アプリカードの選択の色 ③「触れます」の案内の出入り */
.yt-bar,.yt-tour{--yt-blue:var(--blue,#1775ee);--yt-ink:var(--ink,#172939);--yt-muted:var(--muted,#617386);--yt-line:#e4eaf2;--yt-pale:#eef5fd;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;line-break:strict;word-break:normal}
.yt-bar *,.yt-tour *{box-sizing:border-box}

/* --- 追従メニュー（3つのアプリのアイコン＋ボタン）--- */
.yt-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--yt-line);transform:translateY(110%);transition:transform .32s ease;pointer-events:none}
.yt-bar.is-on{transform:none;pointer-events:auto}
.yt-thumbs{display:flex;flex:none}
.yt-bi{display:block;width:34px;height:34px;border-radius:9px;overflow:hidden;box-shadow:0 0 0 2px #fff}
.yt-bi+.yt-bi{margin-left:-8px}
.yt-bi img{width:100%;height:100%;display:block;object-fit:cover}
.yt-open{position:relative;isolation:isolate;overflow:hidden;flex:1;min-width:0;height:50px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:100px;background:linear-gradient(120deg,#0693e3 0%,#1775ee 55%,#3a5ef0 100%);color:#fff;transition:color .35s ease,border-color .35s ease,box-shadow .35s ease;box-shadow:0 8px 20px -8px #1775ee99;font-weight:700;font-size:15px;line-height:1;font-family:inherit;white-space:nowrap;cursor:pointer}
.yt-open svg{width:18px;height:18px;flex:none}
/* PC: カーソルを当てると白地に青の文字へ滑らかに反転（白い面をふわっと重ねる） */
.yt-open::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;opacity:0;transition:opacity .35s ease}
@media(hover:hover){.yt-open:hover{color:#1775ee;border-color:#1775ee;box-shadow:0 8px 20px -10px #1775ee66}.yt-open:hover::before{opacity:1}}
@media(prefers-reduced-motion:reduce){.yt-open,.yt-open::before{transition:none}}
/* v6: 追従メニューは PC もスマホも丸いピル（スマホは幅いっぱいにしない）。下の位置は本番の固定バーがあるときだけその上 */
.yt-bar{left:50%;right:auto;bottom:calc(var(--mb-h,0px) + 16px);max-width:calc(100% - 24px);padding:8px 8px 8px 12px;border:1px solid var(--yt-line);border-radius:100px;transform:translate(-50%,140%);box-shadow:0 6px 20px #17293914}
.yt-bar.is-on{transform:translate(-50%,0)}
.yt-bar.is-on.is-reading{transform:translate(-50%,140%);pointer-events:none}
.yt-open{flex:none;padding:0 26px}
@media(max-width:600px){.yt-bar{gap:8px;padding:7px 7px 7px 10px}.yt-bi{width:30px;height:30px}.yt-open{height:46px;padding:0 16px;font-size:13.5px}}
/* 管理画面のアイコン: ボタンの青と分けて濃紺の地に、サイドバーとグラフのある画面の絵（2026-10-15） */
.yt-adm{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(150deg,#1f3a57,#0b1726);color:#fff}
.yt-adm svg{width:66%;height:66%}

/* --- ツアー（全画面・白基調）--- */
html.yt-lock,html.yt-lock body{overflow:hidden}
.yt-tour{position:fixed;inset:0;z-index:100;background:#fff;color:var(--yt-ink);opacity:0;transition:opacity .25s ease}
.yt-tour.is-open{opacity:1}
.yt-tour[hidden]{display:none}
.yt-tour:focus{outline:none}
.yt-shell{height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto}
.yt-top{display:flex;align-items:center;gap:6px;padding:8px 4px 0 10px}
.yt-title{display:none;margin:0}
.yt-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--yt-ink);cursor:pointer}
.yt-close svg{width:22px;height:22px}

/* 上の並び: 番号・アイコン・アプリ名。選んだものは水色の面、ほかは薄く */
.yt-apps{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.yt-app{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:44px;padding:0 6px;border:0;border-radius:100px;background:transparent;color:var(--yt-muted);font-family:inherit;cursor:pointer}
.yt-app[aria-selected="true"]{background:var(--yt-pale);color:var(--yt-ink)}
.yt-at{min-width:0}
.yt-aw{display:none}
.yt-app .yt-ic{width:24px;height:24px;border-radius:7px}
.yt-app:not([aria-selected="true"]) .yt-ic{opacity:.5}
.yt-ic{flex:none;display:block;overflow:hidden}
.yt-ic img{width:100%;height:100%;display:block;object-fit:cover}
.yt-an{font-size:12.5px;font-weight:800;line-height:1;white-space:nowrap}

/* 見出し: 使う人 → アプリの名前（大）→ 一言 */
.yt-cap{padding:12px 16px 0}
.yt-cap.is-in{animation:ytIn .4s ease both}
.yt-who{margin:0;font-size:12px;font-weight:700;line-height:1.4;color:var(--yt-blue)}
.yt-name{display:flex;align-items:center;gap:10px;margin:4px 0 0}
.yt-name .yt-ic{width:36px;height:36px;border-radius:10px;box-shadow:0 0 0 1px #1729391a}
.yt-nm{font-size:26px;font-weight:900;line-height:1.1;letter-spacing:-.5px;white-space:nowrap}
.yt-h{margin:10px 0 0;font-size:16px;font-weight:800;line-height:1.5}
.yt-sub{margin:1px 0 0;font-size:12px;line-height:1.6;color:var(--yt-muted)}
.yt-chips{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;scrollbar-width:none}
.yt-chips::-webkit-scrollbar{display:none}
.yt-chip{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid #d5e0eb;border-radius:100px;background:#fff;color:var(--yt-ink);font-weight:700;font-size:12.5px;line-height:1;font-family:inherit;white-space:nowrap;cursor:pointer}
.yt-chip svg{display:none}
.yt-chip[aria-pressed="true"]{background:var(--yt-ink);border-color:var(--yt-ink);color:#fff}

/* 舞台: スマホは黒い縁の端末。PC は水色の面の上にブラウザを斜めに浮かせる */
.yt-stage{position:relative;flex:1;min-height:0;display:flex;justify-content:center;padding:0 16px 2px}
.yt-num{display:none}
.yt-screen{position:relative;width:100%;height:100%;overflow:hidden;border:6px solid #111a24;border-radius:32px;background:#fff;box-shadow:0 16px 30px -14px #1729396b;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.yt-view{position:absolute;inset:0}
.yt-view[hidden]{display:none}
.yt-view.is-in{animation:ytIn .4s ease both}
@keyframes ytIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.yt-view iframe{position:absolute;left:0;top:0;width:390px;border:0;display:block;transform-origin:0 0;background:#fff;max-width:none}
.yt-view img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.yt-live{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:100px;background:var(--yt-blue);color:#fff;font-weight:700;font-size:15px;line-height:1;font-family:inherit;white-space:nowrap;cursor:pointer;box-shadow:0 8px 20px #17293933}
.yt-live svg{width:18px;height:18px}
.yt-hint{position:absolute;left:50%;bottom:22%;z-index:4;display:inline-flex;align-items:center;gap:8px;margin:0;height:44px;padding:0 20px;border-radius:100px;background:var(--yt-ink);color:#fff;font-size:14px;font-weight:700;line-height:1;white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px #17293940;
  opacity:0;transform:translate(-50%,10px);transition:opacity .3s ease,transform .3s ease}
.yt-hint svg{width:20px;height:20px;color:#8ed1fc}
.yt-hint.is-on{opacity:1;transform:translate(-50%,0)}

.yt-foot{padding:8px 16px max(12px,env(safe-area-inset-bottom))}
.yt-note{margin:0 0 8px;font-size:11px;line-height:1.6;color:var(--yt-muted)}
.yt-nav{display:flex;gap:8px}
.yt-prev,.yt-next,.yt-line{height:50px;border-radius:100px;font-weight:700;font-size:14.5px;line-height:1;font-family:inherit;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.yt-prev{flex:none;padding:0 18px;border:1px solid #d5e0eb;background:#fff;color:var(--yt-ink)}
.yt-prev[disabled]{display:none}
.yt-next{flex:1;min-width:0;border:0;background:var(--yt-blue);color:#fff}
.yt-next:hover{background:#3a8cf3}
.yt-line{flex:1;min-width:0;border:0;background:var(--line,#1775ee);color:#fff}
.yt-next svg,.yt-prev svg{width:16px;height:16px;flex:none}
.yt-ni{display:block;flex:none;width:24px;height:24px;margin:0 2px 0 4px;border-radius:7px;overflow:hidden}
.yt-ni img{width:100%;height:100%;display:block;object-fit:cover}
.yt-ni .yt-adm{background:linear-gradient(150deg,#1f3a57,#0b1726);color:#fff}
.yt-next[hidden],.yt-line[hidden]{display:none}
.yt-url,.yt-cover{display:none}

@media(min-width:901px){
  /* 上: 題と閉じる。その下に3つのアプリのカード。左は v3 の見せ方、右はまっすぐなブラウザ枠 */
  .yt-shell{max-width:1360px;display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;
    grid-template-areas:"top top" "cap stage" "chips stage" ". stage" "foot stage";column-gap:32px;padding:12px 24px 20px}
  /* 題・3つのメニュー・閉じるを1行に（2026-10-15）。メニューの上の余白をなくし、右の画面を大きく見せる */
  .yt-top{grid-area:top;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"title apps close";align-items:center;gap:16px;padding:0 0 12px}
  .yt-title{grid-area:title;display:block;font-size:13px;font-weight:700;line-height:40px;color:var(--yt-muted);white-space:nowrap}
  .yt-close{grid-area:close;justify-self:end;border:1px solid var(--yt-line)}
  .yt-close:hover{background:var(--yt-pale)}
  /* 上の3つ: 中央にまとめた切り替えスイッチ。薄い台の上で、選んだものだけ白く浮かせる（2026-10-15） */
  .yt-apps{grid-area:apps;justify-self:center;width:min(760px,62vw);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0;padding:5px;border-radius:16px;background:#eef3f9;box-shadow:inset 0 0 0 1px #e1e8f1}
  .yt-app{position:relative;justify-content:center;height:52px;padding:0 14px;gap:11px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--yt-muted);text-align:left;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease}
  .yt-app:hover{background:#ffffffb3;color:var(--yt-ink)}
  .yt-app[aria-selected="true"]{background:#fff;border-color:#bcd7f7;color:var(--yt-ink);box-shadow:0 6px 16px -8px #1775ee59,0 1px 2px #17293914}
  .yt-app:not([aria-selected="true"]) .yt-ic{filter:saturate(.7);opacity:.85}
  .yt-app .yt-ic{width:32px;height:32px;border-radius:9px;box-shadow:0 0 0 1px #17293914}
  .yt-at{display:flex;flex-direction:column;gap:2px;min-width:0}
  .yt-an{font-size:16px;line-height:1.2;letter-spacing:-.2px}
  .yt-aw{display:block;font-size:11.5px;font-weight:500;line-height:1.2;color:var(--yt-muted);white-space:nowrap}
  .yt-cap{grid-area:cap;padding:0}
  .yt-who{font-size:15px}
  .yt-name{gap:16px;margin-top:12px}
  .yt-name .yt-ic{width:64px;height:64px;border-radius:16px}
  .yt-nm{font-size:48px;letter-spacing:-1.5px}
  .yt-h{margin-top:28px;font-size:22px;line-height:1.5}
  .yt-sub{margin-top:8px;font-size:14px;line-height:1.7}
  .yt-chips{grid-area:chips;flex-wrap:wrap;gap:8px;padding:24px 0 0;overflow:visible}
  .yt-chip{height:40px;padding:0 18px;font-size:14px}
  .yt-chip:hover{border-color:var(--yt-ink)}
  .yt-stage{grid-area:stage;align-items:center;padding:44px 20px 20px;border-radius:20px;background:var(--yt-pale);overflow:hidden}
  /* 背景の大きな英字は LP のヒーロー（YARIKANO）と同じ見せ方: 太く、詰めて、薄い面の色 */
  .yt-num{display:block;position:absolute;left:40px;top:-2px;font:900 104px/1 "Arial Black",Arial,sans-serif;letter-spacing:-6px;white-space:nowrap;color:#dde9f7;pointer-events:none;z-index:0}
  .yt-screen{z-index:1;border:0;border-radius:12px;background:#fff;box-shadow:0 28px 56px -28px #17293970,0 0 0 1px #1729391f}
  .yt-stage[data-i="0"] .yt-screen{max-width:760px}
  .yt-url{display:flex;align-items:center;gap:7px;position:absolute;left:0;right:0;top:0;height:40px;padding:0 14px;background:#f1f4f8;border-bottom:1px solid #e1e7ee;z-index:2}
  .yt-url i{flex:none;width:10px;height:10px;border-radius:50%;background:#cfd8e3}
  .yt-url span{flex:1;min-width:0;max-width:520px;height:24px;margin-left:10px;display:block;padding:0 14px;border-radius:100px;background:#fff;color:var(--yt-muted);font-size:12px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .yt-view{top:40px}
  .yt-cover{display:block;position:absolute;left:0;top:0;background:#d3d3d3;z-index:3}
  .yt-foot{grid-area:foot;padding:0}
  .yt-note{margin:0 0 14px;font-size:12px}
  .yt-prev,.yt-next,.yt-line{height:48px}
  .yt-prev{padding:0 16px}
  .yt-next,.yt-line{padding:0 12px}
}
@media(prefers-reduced-motion:reduce){.yt-bar,.yt-tour,.yt-hint,.yt-app{transition:none}.yt-view.is-in,.yt-cap.is-in{animation:none}}

/* FC LP v5 用: 追従メニューは PC のみ。ページの末尾（フッター）が追従メニューに隠れないよう下に余白 */
.yt-lic{display:inline-flex;flex:none}.yt-lic svg{width:22px;height:22px}
.yt-line{gap:8px}

/* スマホ（900px以下）: 実機の大きさに近づける（2026-10-15）。
   端末の太い縁をやめて、アプリを画面の横幅いっぱい・等倍（390px）で出し、見出しと下のボタンを詰めて縦の高さを稼ぐ */
@media(max-width:900px){
  .yt-shell{max-width:none}
  .yt-top{padding:6px 2px 0 8px}
  .yt-app{height:38px}
  .yt-cap{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:8px 14px 0}
  .yt-who,.yt-sub{display:none}
  .yt-name{display:contents}
  .yt-name .yt-ic{grid-column:1;grid-row:1/3;width:40px;height:40px;border-radius:11px}
  .yt-nm{grid-column:2;grid-row:1;font-size:12px;font-weight:800;letter-spacing:0;color:var(--yt-blue);line-height:1.3}
  .yt-h{grid-column:2;grid-row:2;margin:0;font-size:15px;line-height:1.35}
  .yt-chips{padding:8px 14px}
  .yt-chip{height:30px;padding:0 13px;font-size:12px}
  /* デモとページの区切りが分かるよう、薄い水色の舞台の上にスマホの縦長の枠（ベゼル）で出す。
     枠は 390:844 の比のまま、空いている高さいっぱいに広げる */
  .yt-stage{padding:10px 16px 10px;background:var(--yt-pale);align-items:center}
  .yt-screen{flex:none;max-width:100%;border:6px solid #111a24;border-radius:34px;box-shadow:0 18px 32px -16px #17293980}
  .yt-screen::before{content:"";position:absolute;left:50%;top:6px;z-index:5;width:30%;height:16px;transform:translateX(-50%);border-radius:100px;background:#111a24;pointer-events:none}
  .yt-foot{padding:6px 14px max(8px,env(safe-area-inset-bottom))}
  .yt-note{margin:0 0 6px;font-size:10px;line-height:1.5}
  .yt-prev,.yt-next,.yt-line{height:44px;font-size:14px}
}

/* 画面の切り替えのピル（ホーム・ランキング等）は出さない。中の実際の画面を触って動かしてもらう（2026-10-15） */
.yt-chips{display:none!important}
@media(max-width:900px){
  /* 本物のスマホと同じく、上の出っ張り（ダイナミックアイランド）の下からアプリを出す */
  .yt-screen .yt-view{top:26px}
  .yt-screen{background:#fff}
  .yt-cap{padding-bottom:8px}
}

/* 注記が空のときは場所を取らない */
.yt-note:empty{display:none}