/* ============ 機内モードの地図（座席のモニターのような現在地マップ） ============ */
/* 地図が読めたときだけ .has-map が付く。読めないときは今までの線の図のまま */

.fl-map, .fl-views, .fl-credit, .fl-hud, .fl-where { display: none; }

.flight.has-map { display: block; padding: 0; background: radial-gradient(1200px 800px at 50% 40%, #0c1830 0%, #03060d 70%); }
.flight.has-map::before { display: none; }
.flight.has-map .fl-map { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; } /* ドラッグで回す・2 本指で拡大 */
.flight.has-map .fl-map:active { cursor: grabbing; }
/* 地図を自由に動かしているとき：右上に「飛行機の位置に戻る」 */
.fl-recenter { display: none; }
.flight.has-map.free .fl-recenter {
  display: inline-flex; align-items: center; gap: 8px; position: absolute; right: 28px; top: 84px; z-index: 6; padding: 10px 22px;
  border-radius: 99px; background: rgba(14, 17, 23, .82); border: 1px solid rgba(255, 200, 61, .55); color: #ffe39a; font: inherit; font-size: 17px; cursor: pointer;
}
.fl-recenter .ic { width: 22px; height: 22px; }
/* 地上の地図（離陸のあと・着陸の前）：地球の上に、ふわっと重ねる。夜は暗く */
.fl-ground { display: none; }
.flight.has-map .fl-ground {
  display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: #0b1626;
  transition: opacity 1.4s ease;
}
.flight.has-map .fl-ground.show { opacity: 1; pointer-events: auto; }
.flight.tv.suite .fl-ground.show { pointer-events: none; }
.fl-ground .maplibregl-canvas { outline: none; }
.fl-gplane { line-height: 0; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .75)); }
.fl-gplane .ic { width: 46px; height: 46px; }
.fl-gap { padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(255, 200, 61, .6); background: rgba(10, 14, 22, .82); color: #ffe39a; font: 700 14px/1.2 var(--mono, monospace); letter-spacing: .06em; }
.fl-screen.media .fl-recenter, .fl-screen.clockmode .fl-recenter, .flight.tv.suite .fl-recenter { visibility: hidden; }
.flight.has-map .route { display: none; }
.fl-globe { display: none; }
.flight.has-map.has-globe .fl-globe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

.flight.has-map .fl-inner {
  position: absolute; inset: 0; width: auto; padding: 20px 24px; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.flight.has-map .fl-inner > * > * { pointer-events: auto; }

/* 半透明のガラスの板 */
.flight.has-map .fl-head, .flight.has-map .fl-main, .flight.has-map .fl-hud, .flight.has-map .fl-where, .flight.has-map .fl-views {
  background: rgba(6, 12, 26, .62); border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.flight.has-map .fl-head { align-self: flex-start; max-width: min(560px, 100%); padding: 12px 18px; text-align: left; pointer-events: auto; }
.flight.has-map .fl-top { justify-content: flex-start; font-size: 13px; }
.flight.has-map .fl-title { font-size: 18px; margin-top: 6px; }

/* 機体の選択（地図があるときだけ） */
.fl-plane { display: none; }
.flight.has-map .fl-plane { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #8fa3bd; }
.fl-plane select {
  background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px;
  padding: 4px 8px; font: inherit; font-size: 13px; color-scheme: dark;
}

/* 下の段：飛行データ ｜ 残り時間 ｜ 現在地 */
.flight.has-map .fl-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; }
.flight.has-map .fl-main { padding: 16px 28px 14px; text-align: center; }
.flight.has-map .fl-remaining { font-size: clamp(48px, 6.5vw, 84px); }
.flight.has-map .fl-meta { margin: 8px 0 14px; font-size: 13px; }
.flight.has-map .fl-noise { margin-top: 12px; }

.flight.has-map .fl-hud {
  display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 10px 22px; justify-self: start;
  padding: 14px 18px; text-align: left;
}
.fl-hud small, .fl-where small { display: block; font-size: 11px; color: #8fa3bd; letter-spacing: .06em; }
.fl-hud b { display: block; font-family: var(--mono); font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; }
.fl-hud b small { display: inline; font-size: 11px; color: #aab8c9; letter-spacing: 0; }

.flight.has-map .fl-where { display: block; justify-self: end; padding: 14px 18px; text-align: left; min-width: 220px; }
.fl-where > b { display: block; font-size: 20px; color: #ffc83d; margin: 2px 0; }
.fl-where > span { display: block; font-family: var(--mono); font-size: 12px; color: #aab8c9; }
.fl-spot { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: #8fe3ff; }
.fl-spot.mt { color: #fff2c9; }
.fl-clocks { display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fl-clocks b { display: block; font-family: var(--mono); font-size: 20px; color: #fff; }

/* 視点の切り替え */
.flight.has-map .fl-views { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 620px); position: absolute; top: 20px; right: 24px; z-index: 2; padding: 4px; gap: 2px; border-radius: 10px; }
.fl-views button { background: transparent; color: #aab8c9; font-size: 12px; padding: 6px 10px; border-radius: 7px; }
.fl-views button:hover { color: #fff; }
.fl-views button.now { color: #fff; box-shadow: inset 0 -2px 0 #ffc83d; border-radius: 7px 7px 3px 3px; }
.fl-views button.on { background: #ffc83d; color: #111; font-weight: 700; }

/* 重ねて見るもの（雲・オーロラ・台風・都市名・天の川）と静かモード */
.fl-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: rgba(255, 255, 255, .14); }
.fl-views button.fl-layer { color: #6f7f93; }
.fl-views button.fl-layer.lit { color: #e8f1ff; background: rgba(90, 176, 255, .16); }
.fl-views button.fl-layer.calm.lit { background: rgba(255, 200, 61, .18); color: #ffd978; }
.fl-spot.storm { color: #ffb3a8; }
.fl-spot.aurora { color: #9dffc4; }
.fl-spot.routes { color: #9fd4ff; }

.flight.has-map .fl-credit {
  display: block; position: absolute; right: 10px; bottom: 4px; max-width: calc(100% - 20px); text-align: right;
  font-size: 10px; color: rgba(255, 255, 255, .35); pointer-events: none;
}

/* 機内のときは、放送の案内を上に出す（下の板と重ならないように） */
body:has(.flight.has-map:not([hidden])) .announce { bottom: auto; top: 90px; }

/* ---------- 狭い画面 ---------- */
@media (max-width: 1100px) {
  .flight.has-map .fl-views { max-width: calc(100% - 48px); }
  .flight.has-map .fl-head { margin-top: calc(var(--views-h, 40px) + 8px); }
  .flight.has-map .fl-foot { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
  .flight.has-map .fl-hud { order: 1; justify-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .flight.has-map .fl-where { order: 0; justify-self: stretch; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; padding: 10px 14px; }
  .flight.has-map .fl-main { order: 2; justify-self: stretch; }
  .fl-where > small { display: none; }
  .fl-where > b { font-size: 16px; margin: 0; }
  .fl-clocks { margin: 0 0 0 auto; padding: 0; border: 0; gap: 12px; }
  .fl-clocks b { font-size: 15px; }
}
@media (max-width: 700px) {
  .flight.has-map .fl-inner { padding: 12px; gap: 10px; }
  .flight.has-map .fl-views { top: 12px; right: 12px; left: 12px; justify-content: center; }
  .fl-views button { flex: 1; padding: 6px 4px; }
  .flight.has-map .fl-head { align-self: stretch; }
  .fl-hud b { font-size: 15px; }
  .flight.has-map .fl-main { padding: 12px 14px; }
  .flight.has-map .fl-remaining { font-size: 48px; }
}

/* ============ 座席モニターの演出（📺 モニター） ============ */
/* ふだんは入れ物が画面いっぱいに広がるだけ。.tv のときは、前の座席の背もたれに付いたモニターの中に映す */
.fl-cabin, .fl-ports, .fl-remote, .fl-notes, .fl-knob { display: none; }
.fl-seatback, .fl-bezel, .fl-screen { position: absolute; inset: 0; }
.flight:not(.has-map) .fl-screen { display: grid; place-items: center; padding: 16px; overflow: auto; }
.fl-splash { display: none; }

.flight.tv {
  background:
    radial-gradient(1200px 300px at 50% -80px, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #e8ecf1 0%, #d5dbe2 35%, #b9c1cb 100%);
  overflow: hidden;
}
/* 奥の座席（ぼかし） */
.flight.tv .fl-cabin { display: block; position: absolute; inset: 0; filter: blur(6px); }
.cb-seat { position: absolute; bottom: -40px; width: 22vw; height: 78vh; border-radius: 60px 60px 0 0; background: linear-gradient(90deg, #1b3f93, #2a56b8 60%, #1a3a86); opacity: .85; }
.cb-seat.l { left: -12vw; }
.cb-seat.r { right: -12vw; }

/* 前の座席の背もたれ */
.flight.tv .fl-seatback {
  inset: auto; left: 50%; top: max(12px, 2.5vh); transform: translateX(-50%);
  width: calc(var(--mw) + 150px); height: calc(100vh + 40px); /* 下は画面の外まで続く */
  border-radius: 70px 70px 34px 34px;
  background: linear-gradient(180deg, #f6f7f9 0%, #e7eaee 55%, #d7dbe1 100%);
  box-shadow: inset 0 3px 0 #fff, inset 0 -20px 40px rgba(0, 0, 0, .06), 0 30px 60px rgba(20, 30, 50, .35);
}
/* 背もたれの左右の青い布 */
.flight.tv .fl-seatback::before, .flight.tv .fl-seatback::after {
  content: ''; position: absolute; top: 40px; bottom: -40px; width: 34px;
  background: repeating-linear-gradient(35deg, rgba(255, 255, 255, .06) 0 3px, rgba(0, 0, 0, 0) 3px 7px), linear-gradient(90deg, #163a8a, #2b5cc2 55%, #1b4198);
}
.flight.tv .fl-seatback::before { left: -30px; border-radius: 40px 0 0 0; }
.flight.tv .fl-seatback::after { right: -30px; border-radius: 0 40px 0 0; transform: scaleX(-1); }
/* 画面の黒いふち */
.flight.tv .fl-bezel {
  inset: auto; left: 50%; top: 42px; transform: translateX(-50%);
  width: calc(var(--mw) + 30px); height: calc(var(--mh) + 30px); padding: 15px;
  background: linear-gradient(180deg, #1a1c20, #0a0b0d); border-radius: 20px;
  box-shadow: 0 0 0 2px #2b2e33, 0 10px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.flight.tv .fl-bezel::after { /* 画面の映り込み */
  content: ''; position: absolute; inset: 15px; border-radius: 6px; pointer-events: none; z-index: 5;
  background: linear-gradient(120deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 32%);
}
.flight.tv .fl-screen {
  inset: auto; left: 15px; top: 15px; width: 1600px; height: 900px; overflow: hidden; border-radius: 6px;
  transform: scale(var(--s)); transform-origin: top left; background: #03060d;
}
/* 画面の下のUSBと電源のランプ */
.flight.tv .fl-ports { display: flex; gap: 14px; position: absolute; left: 50%; top: calc(var(--mh) + 82px); transform: translateX(-50%); }
.fl-ports .usb { width: 22px; height: 9px; border-radius: 2px; background: #2a2d33; box-shadow: inset 0 0 0 2px #50545c; }
.fl-ports .pwr { width: 12px; height: 12px; border-radius: 50%; background: #1f2226; box-shadow: 0 0 0 2px #50545c, 0 0 8px rgba(80, 200, 120, .8) inset; }
/* 手元のボタン */
.flight.tv .fl-remote {
  display: flex; gap: 14px; position: absolute; left: 50%; top: calc(var(--mh) + 116px); transform: translateX(-50%);
  padding: 10px 22px; border-radius: 14px; background: linear-gradient(180deg, #2c3036, #16181c); box-shadow: 0 0 0 3px #9aa0a8, inset 0 1px 0 rgba(255, 255, 255, .1);
}
.fl-remote button {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 13px; line-height: 1;
  color: #d9dde3; background: #1b1e22; box-shadow: 0 0 0 1px #5c616a; cursor: pointer; transition: box-shadow .15s, background .15s;
}
.fl-remote button:hover { background: #262a30; box-shadow: 0 0 0 1px #9aa6b4, 0 0 10px rgba(140, 190, 255, .35); }
.fl-remote button.on { box-shadow: 0 0 0 2px #ffc83d, 0 0 12px rgba(255, 200, 61, .5); color: #ffd978; }
.fl-remote button.dim { opacity: .45; }
.fl-remote button .ic { width: 18px; height: 18px; vertical-align: middle; } /* 手元のボタンのアイコン（icons.js） */
/* YouTube の決まり：埋め込みプレーヤーの上に、ほかの物を重ねない・プレーヤーの見た目を変えない。
   YouTube を映しているあいだ（.yt-on）は、画面の映り込み・明るさ・色補正を効かせず、お知らせはプレーヤーの外に出す */
.flight.yt-on .fl-bezel::after { display: none; }
.flight.tv.scr-dim.yt-on .fl-screen > .ife-media { filter: none; }
.flight.yt-on .fl-screen.cv-p, .flight.yt-on .fl-screen.cv-d, .flight.yt-on .fl-screen.cv-t { filter: none; }
/* 全画面（座席の画面をウィンドウいっぱいに）：映している物の下に「座席の画面にもどる」の帯。プレーヤーには重ねない */
.ife-fsback { display: none; }
.flight.fs-ok .ife-fsback {
  display: flex; align-items: center; justify-content: flex-end; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; padding: 0 14px;
  background: #0b0d11; border-top: 1px solid rgba(255, 255, 255, .08);
}
.ife-fsback .fs-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; cursor: pointer; }
.ife-fsback .fs-back:hover { background: rgba(255, 255, 255, .14); }
.flight.fs-ok .ife-media video, .flight.fs-ok .ife-media .ife-yt { bottom: 46px; height: auto; }
.flight.fs-ok .ife-media[data-type="safety"] .ife-yt { bottom: 86px; }
.flight.fs-ok .ife-media[data-type="safety"] .ife-safe { bottom: 46px; }
.flight.fs-ok .ife-mbar { bottom: 46px; }
.flight.tv.yt-on #fl-remote-tip { top: auto; bottom: 14px; }
body:has(.flight.yt-on:not([hidden])) .announce { top: auto; bottom: 16px; }
.fl-remote-tip {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%); margin: 0; z-index: 40; pointer-events: none;
  padding: 8px 16px; border-radius: 99px; background: rgba(10, 16, 28, .88); color: #fff;
  font-size: 13px; white-space: nowrap; opacity: 0; transition: opacity .3s;
}
.fl-remote-tip.show { opacity: 1; }
.flight.tv .fl-remote-tip { top: calc(var(--mh) + 166px); z-index: 3; }

/* 機内の明るさ（--dim：0＝明るい昼 〜 0.8＝消灯中）。画面と手元のボタンは暗くしない */
.flight.tv .fl-cabin::after { content: ''; position: absolute; inset: -20px; background: rgba(4, 8, 20, var(--dim, 0)); transition: background 2s; }
.fl-shade { display: none; }
.flight.tv .fl-shade {
  display: block; position: absolute; left: -34px; right: -34px; top: 0; bottom: -40px; z-index: 1; pointer-events: none;
  border-radius: 70px 70px 0 0; background: rgba(4, 8, 20, var(--dim, 0)); transition: background 2s;
}
.flight.tv.reading .fl-shade {
  background: radial-gradient(ellipse 60% 55% at 50% -5%, rgba(255, 214, 160, .2), rgba(255, 214, 160, 0) 70%), rgba(4, 8, 20, calc(var(--dim, 0) * .45));
}
.flight.tv .fl-bezel, .flight.tv .fl-remote { z-index: 2; }
.flight.tv.scr-dim .fl-screen > * { filter: brightness(var(--scr, 1)); }
/* 注意書き・テーブルの留め具 */
.flight.tv .fl-notes {
  display: flex; justify-content: space-between; position: absolute; left: 36px; right: 36px; top: calc(var(--mh) + 196px);
  font-size: 10px; line-height: 1.4; color: #59606a;
}
.fl-notes span { padding: 4px 8px; border: 1px solid #b4bac2; border-radius: 3px; background: rgba(255, 255, 255, .5); }
.flight.tv .fl-knob {
  display: block; position: absolute; right: 30px; top: calc(var(--mh) / 2 + 30px); width: 30px; height: 44px; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, #fff, #d4d8de); box-shadow: 0 2px 6px rgba(0, 0, 0, .2), inset 0 0 0 2px #c7ccd3;
}
/* 画面がつくときの「スタート」 */
.flight.tv .fl-splash {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; position: absolute; inset: 0; z-index: 20; padding: 60px 80px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(10, 20, 50, .55)),
    linear-gradient(180deg, #2f7fd6 0%, #8cc3ee 45%, #f4e3c3 62%, #6e7fae 63%, #3c4f8e 100%);
  color: #fff; pointer-events: none; opacity: 0; transition: opacity 1s;
}
.flight.tv .fl-splash.show { opacity: 1; transition: none; }
.fl-splash small { font-family: var(--mono); font-size: 16px; letter-spacing: .3em; opacity: .85; }
.fl-splash b { font-size: 56px; letter-spacing: .06em; text-shadow: 0 4px 20px rgba(0, 0, 0, .3); }
.fl-splash span { font-size: 22px; opacity: .9; }

/* ============ 窓の外（窓側の席） ============ */
/* 窓の大きさは本物に合わせる：ふつうの機体は 縦30×横20cm、中型ジェット機（最新型）は 縦47×横28cm。
   --cm＝1cm の長さ。窓ガラスは二重（外側の厚いガラス＋内側の薄いガラス。内側には小さな空気穴） */
.fl-winview {
  --cm: min(1.25vh, .95vw); --wh: 30; --ww: 20; --pitch: 51; --rad: 44%;
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background:
    radial-gradient(900px 500px at 50% 45%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #5d6167 0%, #45494f 55%, #34373c 100%);
  overflow: hidden;
}
.fl-winview[data-plane="twin"] { --wh: 47; --ww: 28; --pitch: 53; --rad: 42%; }
.fl-winview[data-plane="biz"] { --wh: 34; --ww: 28; --pitch: 60; --rad: 48%; }
.fl-winview[data-plane="sst"] { --wh: 16; --ww: 11; --pitch: 42; --rad: 46%; }
.fl-winview[data-plane="prop"] { --wh: 30; --ww: 21; --pitch: 55; --rad: 44%; }
.fl-winview[data-plane="regional"] { --wh: 30; --ww: 22; --pitch: 51; --rad: 44%; }
.fl-winview[data-plane="narrow"] { --wh: 30; --ww: 21; --pitch: 51; --rad: 44%; }
.fl-winview[data-plane="dom"] { --wh: 33; --ww: 22; --pitch: 51; --rad: 44%; }
.fl-winview[data-plane="wide"] { --wh: 38; --ww: 26; --pitch: 51; --rad: 44%; }
.fl-winview[hidden] { display: none; }
/* 昼は窓からの光が壁に差しこむ。夜は機内が暗くなる */
.fl-winview::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--dim, 0) * 1.3);
  background: linear-gradient(115deg, rgba(0, 0, 0, 0) 30%, rgba(255, 246, 225, .1) 42%, rgba(0, 0, 0, 0) 56%);
}
.fl-winview::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(2, 4, 12, calc(var(--dim, 0) * .9)); transition: background 2s; }
.wv-wall {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
  /* 窓と窓の間は本物の間かく。ただし 3 つの窓が画面に入るように、広すぎるときは縮める */
  gap: max(24px, min(calc((var(--pitch) - var(--ww)) * var(--cm)), calc((100vw - 3 * (var(--ww) + 7) * var(--cm)) / 2 - 30px)));
}

/* 窓まわり（プラスチックの枠。奥へ向かって細くなる） */
.wv-window { position: relative; flex: none; z-index: 1; }
.wv-reveal {
  position: relative; width: calc(var(--ww) * var(--cm) + 7 * var(--cm)); height: calc(var(--wh) * var(--cm) + 9 * var(--cm));
  border-radius: var(--rad) / calc(var(--rad) * .8); display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #f3f4f6 0%, #e2e5e9 58%, #c7ccd2 80%, #aeb4bb 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px #8c939b;
}
/* 外側のガラス（厚い）：景色が見えるガラス。少し奥にある */
.wv-pane.outer {
  position: relative; width: calc(var(--ww) * var(--cm)); height: calc(var(--wh) * var(--cm)); overflow: hidden;
  border-radius: var(--rad) / calc(var(--rad) * .8); background: #000;
  box-shadow: 0 0 0 calc(.9 * var(--cm)) #d5d9de, 0 0 0 calc(1.1 * var(--cm)) #b9bfc6, inset 0 0 calc(2 * var(--cm)) rgba(0, 0, 0, .55);
}
.wv-pane.outer canvas { width: 100%; height: 100%; display: block; object-fit: cover; transform: translate(var(--px, 0), var(--py, 0)) scale(1.06); transition: transform .4s ease-out; }
/* 内側のガラス（薄い）：手前にあって、うっすら映り込みと、下に小さな空気穴 */
.wv-pane.inner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(var(--ww) * var(--cm) + 2.4 * var(--cm)); height: calc(var(--wh) * var(--cm) + 2.4 * var(--cm));
  border-radius: var(--rad) / calc(var(--rad) * .8); pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28), inset 0 0 12px rgba(255, 255, 255, .08);
}
.wv-hole { position: absolute; left: 50%; bottom: calc(1.8 * var(--cm)); width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%); background: rgba(40, 45, 55, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.wv-window.side { opacity: .96; }
.wv-bar {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 20px; border-radius: 14px;
  background: rgba(10, 16, 28, .82); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.wv-bar b { font-family: var(--mono); font-size: 15px; color: #ffd978; }
.wv-bar span { font-size: 14px; color: #c9d2dd; }
.wv-bar .wv-time { font-family: var(--mono); font-size: 20px; font-weight: 700; color: #ffc83d; }
.wv-reveal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(2, 4, 12, calc(var(--dim, 0) * .85)); transition: background 2s; }
.wv-sky { font-style: normal; font-size: 13px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 200, 120, .16); color: #ffd9a8; }

/* ---------- 窓の外：白い機内（明るい壁と、手前の座席） ---------- */
.fl-winview {
  background:
    radial-gradient(1100px 520px at 50% 42%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #f2f3f5 0%, #e4e7eb 58%, #cfd4da 100%);
}
/* 夜は、青い機内照明のような暗さ */
.fl-winview::after { background: rgba(14, 22, 52, calc(var(--dim, 0) * .78)); }
.fl-winview::before { background: linear-gradient(115deg, rgba(0, 0, 0, 0) 30%, rgba(255, 250, 235, .35) 42%, rgba(0, 0, 0, 0) 56%); }
/* 窓のくぼみ（壁から奥へへこんだ、白いまるい枠） */
.wv-reveal {
  background: radial-gradient(ellipse at 50% 45%, #ffffff 0%, #eef0f3 55%, #d9dde2 78%, #c3c8ce 100%);
  box-shadow: inset 0 calc(1.2 * var(--cm)) calc(2.4 * var(--cm)) rgba(0, 0, 0, .12), 0 0 0 calc(1.6 * var(--cm)) #f6f7f9, 0 0 0 calc(1.7 * var(--cm)) #d5d9de, 0 20px 40px rgba(0, 0, 0, .12);
}
/* 本物の映像 */
.wv-pane.outer video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s;
  transform: translate(var(--px, 0), var(--py, 0)) scale(1.06);
}
.fl-winview.video .wv-pane.outer video { opacity: 1; }
.fl-winview.video.flip .wv-pane.outer video { transform: translate(var(--px, 0), var(--py, 0)) scale(-1.06, 1.06); }
/* 日よけ（上下にドラッグして下ろす） */
.wv-blind {
  position: absolute; left: 0; right: 0; top: 0; height: var(--blind, 5%); z-index: 3; cursor: ns-resize; touch-action: none;
  background: linear-gradient(180deg, #f1f2f4 0%, #e3e6ea 85%, #cfd4d9 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .28); transition: height .12s;
}
.wv-blind i { position: absolute; left: 50%; bottom: 7px; width: 34%; height: 9px; transform: translateX(-50%); border-radius: 6px; background: #c2c7cd; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.wv-blind::after { content: ''; position: absolute; inset: 0; background: rgba(14, 22, 52, calc(var(--dim, 0) * .7)); pointer-events: none; }
/* 手前の座席（布の背もたれと、革のヘッドレスト） */
.wv-seats { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.wv-seat {
  position: absolute; bottom: -14vh; width: 17vw; height: 58vh; border-radius: 5vw 5vw 1vw 1vw;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, rgba(0, 0, 0, .04) 2px 4px),
    linear-gradient(90deg, #6f6c68, #8f8b86 30%, #86827d 70%, #625f5b);
  box-shadow: inset -10px 0 20px rgba(0, 0, 0, .25), 0 20px 40px rgba(0, 0, 0, .35);
  filter: brightness(calc(1 - var(--dim, 0) * .6));
}
.wv-seat::before { /* ヘッドレスト */
  content: ''; position: absolute; left: 12%; right: 12%; top: 2.5vh; height: 11vh; border-radius: 2vw;
  background: linear-gradient(180deg, #7b5a45, #5f4333); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .3);
}
.wv-seat.a { left: -6vw; transform: rotate(-3deg); }
.wv-seat.b { left: 9vw; bottom: -20vh; transform: rotate(-2deg); }
.wv-seat.c { right: -8vw; bottom: -16vh; width: 15vw; transform: rotate(4deg); }
.wv-credit { position: relative; z-index: 3; font-size: 11px; color: #5d6570; margin-top: -12px; }
.wv-credit a { color: inherit; }
.wv-bar { z-index: 3; }

/* ---------- 窓ガラス：写真のように、ふちの黒いゴム・ガラスの小さな傷やほこり・映り込み ---------- */
.wv-pane.outer {
  box-shadow:
    0 0 0 calc(.45 * var(--cm)) #1c1f23,             /* ガラスのふちの黒いゴム */
    0 0 0 calc(.6 * var(--cm)) #5a6068,
    0 0 0 calc(1.1 * var(--cm)) #e6e9ed,
    inset 0 0 calc(3 * var(--cm)) rgba(0, 0, 0, .35);
}
.wv-pane.inner {
  background-image: var(--glass-img), linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .07) 100%);
  background-size: cover, auto;
  mix-blend-mode: screen; opacity: calc(.35 + (1 - var(--dim, 0)) * .65);
}
/* 近くで見る：窓 1 つを大きく、座席から少しななめに見た角度で。手前の枠は目に近いので少しぼける */
.fl-winview.close .wv-window.side, .fl-winview.close .wv-seats { display: none; }
.fl-winview.close .wv-window.main { transform: perspective(1600px) rotateY(var(--tilt, 9deg)) rotateX(3deg) scale(var(--zoom, 1.4)); transition: transform .6s ease; }
.fl-winview.close .wv-reveal {
  background: radial-gradient(ellipse at 50% 46%, #fafbfc 0%, #eceef1 52%, #d7dbe0 74%, #b9bfc6 100%);
  box-shadow: inset 0 calc(1.5 * var(--cm)) calc(4 * var(--cm)) rgba(0, 0, 0, .18), 0 0 0 calc(6 * var(--cm)) #eef0f2, 0 0 calc(12 * var(--cm)) calc(6 * var(--cm)) rgba(0, 0, 0, .12);
}
.fl-winview.close .wv-reveal::after { /* 目に近い枠のぼけ */
  content: ''; position: absolute; inset: calc(-5 * var(--cm)); border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 calc(3 * var(--cm)) calc(4 * var(--cm)) rgba(236, 238, 241, .9); filter: blur(6px);
}
.fl-winview.close .wv-bar { position: absolute; bottom: 22px; }
.fl-winview.close .wv-credit { position: absolute; bottom: 4px; }
.wv-zoom { white-space: nowrap; }

/* ============ ファーストクラスの個室（.suite） ============
   前の壁に大きなモニター、左右は木目の仕切りと窓のある機体の壁、下にオットマン。
   --fx0/--fx1/--fy0/--fy1：前の壁の四すみ（JS で計算）。左右の壁と床は、そこから手前に広がる */
.fl-suite { display: none; }
.flight.tv.suite .fl-suite { display: block; position: absolute; inset: 0; overflow: hidden; }
.flight.tv.suite .fl-cabin, .flight.tv.suite .fl-notes, .flight.tv.suite .fl-knob,
.flight.tv.suite .fl-ports, .flight.tv.suite .fl-shade { display: none; }
.su-room { position: absolute; inset: 0; }
.flight.side-r .su-room { transform: scaleX(-1); } /* 右の窓側の席は、左右反対 */
:where(.su-room > i) { position: absolute; inset: 0; display: block; }

/* 仕切りの向こうの客室（明るい天井・遠くの窓・カーテン） */
.su-far {
  background:
    radial-gradient(60% 40% at 50% 0%, #ffffff, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #eef0f2 0%, #dfe2e6 40%, #c9cdd3 100%);
}
.su-farwin { /* 遠くの窓の列（ぼかし） */
  top: 3vh; bottom: auto; height: 7vh; left: 55%; right: 0; filter: blur(3px); opacity: .85;
  background: radial-gradient(closest-side, #fff 60%, rgba(255, 255, 255, 0)) 0 0 / 5.5vw 100% repeat-x;
  mix-blend-mode: screen;
}
.su-curtain { /* 通路との間のカーテン */
  left: auto; right: 4vw; width: 11vw; bottom: auto; height: calc(var(--fy0) + 4vh); filter: blur(1.5px);
  background: repeating-linear-gradient(90deg, #8e9096 0 1.1vw, #a7a9ae 1.1vw 1.9vw, #7f8187 1.9vw 2.4vw);
  box-shadow: inset 0 -30px 40px rgba(0, 0, 0, .15);
}

/* 前の壁（モニターの付いた壁）：黒に近い濃い灰色 */
.su-front {
  clip-path: polygon(var(--fx0) var(--fy0), var(--fx1) var(--fy0), var(--fx1) var(--fy1), var(--fx0) var(--fy1));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%),
    linear-gradient(90deg, #1b1d22, #26292f 50%, #1b1d22);
}
.su-front-rail { /* 前の壁の上のふち（丸みのある手すり） */
  clip-path: polygon(calc(var(--fx0) - 6px) calc(var(--fy0) - 10px), calc(var(--fx1) + 6px) calc(var(--fy0) - 10px), calc(var(--fx1) + 6px) calc(var(--fy0) + 6px), calc(var(--fx0) - 6px) calc(var(--fy0) + 6px));
  background: linear-gradient(180deg, #6d7179 0%, #3b3e45 45%, #24262b 100%);
}

/* 左の壁（窓側の席：機体の白い壁と窓）。まん中の席は、左も木目の仕切り */
.su-wall.l {
  clip-path: polygon(0 0, var(--fx0) calc(var(--fy0) - 4vh), var(--fx0) var(--fy1), 0 100%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0) 40%),
    linear-gradient(180deg, #f4f5f6 0%, #e6e8eb 55%, #cfd3d8 100%);
}
.su-rail.l { display: none; }
/* 窓：壁に沿って奥へ小さくなる。白いふちの中に空。夜は暗く */
.su-win {
  inset: auto; transform-origin: 0 50%; transform: perspective(70vw) rotateY(58deg);
  border-radius: 46% / 38%; overflow: hidden;
  background: linear-gradient(180deg, #d9e8f7 0%, #f7fbff 45%, #fff 100%);
  box-shadow: 0 0 0 1.1vw #eceef1, 0 0 0 1.25vw #d2d6dc, inset 0 0 2vw rgba(120, 140, 170, .35);
}
.su-win > i { position: absolute; inset: 0; background: rgba(6, 12, 34, calc(var(--dim, 0) * 1.15)); transition: background 2s; }
.su-win::before { /* 日よけ（少し下ろしてある） */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1;
  background: linear-gradient(180deg, #e9ebee, #d4d8dd); box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.su-win.w1 { left: -1vw; top: 16vh; width: 12vw; height: 34vh; }
.su-win.w2 { left: calc(var(--fx0) * .55); top: 20vh; width: 7vw; height: 25vh; }
/* 窓の下のサイドコンソール（濃い灰色） */
.su-con {
  clip-path: polygon(0 calc(100% - 34vh), var(--fx0) calc(var(--fy1) - 13vh), var(--fx0) var(--fy1), 0 100%);
  background: linear-gradient(90deg, #2b2e34, #1c1e22);
}
.su-con-top {
  clip-path: polygon(0 calc(100% - 38vh), var(--fx0) calc(var(--fy1) - 14.5vh), var(--fx0) calc(var(--fy1) - 13vh), 0 calc(100% - 34vh));
  background: linear-gradient(90deg, #5d6169, #3a3d44);
}
/* まん中の席：左も木目の仕切り（窓とサイドコンソールはない） */
.flight.mid .su-wall.l { clip-path: polygon(0 calc(var(--fy0) - 13vh), var(--fx0) var(--fy0), var(--fx0) var(--fy1), 0 100%); }
.flight.mid .su-rail.l { display: block; }
.flight.mid .su-win, .flight.mid .su-con, .flight.mid .su-con-top { display: none; }

/* 右の壁（木目の仕切り）と、通路側の引き戸 */
.su-wall.r, .flight.mid .su-wall.l {
  background:
    repeating-linear-gradient(178deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, 0) 2px 5px, rgba(0, 0, 0, .12) 5px 6px, rgba(0, 0, 0, 0) 6px 11px),
    repeating-linear-gradient(181deg, rgba(120, 90, 80, .18) 0 1px, rgba(0, 0, 0, 0) 1px 9px),
    linear-gradient(90deg, #3b3036, #4a3d43 50%, #33292e);
}
.su-wall.r { clip-path: polygon(var(--fx1) var(--fy0), 100% calc(var(--fy0) - 13vh), 100% 100%, var(--fx1) var(--fy1)); }
.su-rail.r, .su-rail.l { background: linear-gradient(180deg, #7a7e86, #45484f 50%, #26282d); }
.su-rail.r { clip-path: polygon(var(--fx1) calc(var(--fy0) - 10px), 100% calc(var(--fy0) - 13vh - 3.2vh), 100% calc(var(--fy0) - 13vh + 1vh), var(--fx1) calc(var(--fy0) + 6px)); }
.su-rail.l { clip-path: polygon(0 calc(var(--fy0) - 13vh - 3.2vh), var(--fx0) calc(var(--fy0) - 10px), var(--fx0) calc(var(--fy0) + 6px), 0 calc(var(--fy0) - 13vh + 1vh)); }
.su-door { /* 縦の筋の入った引き戸（手前側） */
  clip-path: polygon(calc(100% - 13vw) calc(var(--fy0) + 2vh), 100% calc(var(--fy0) - 9vh), 100% 100%, calc(100% - 13vw) calc(var(--fy1) + 6vh));
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 2px, rgba(0, 0, 0, 0) 2px 9px, rgba(0, 0, 0, .25) 9px 11px, rgba(0, 0, 0, 0) 11px 16px),
    linear-gradient(180deg, #5a5d63, #3f4247 60%, #2f3135);
}

/* 床（黒っぽいカーペット） */
.su-floor {
  clip-path: polygon(var(--fx0) var(--fy1), var(--fx1) var(--fy1), 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, 0) 1.5px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(160, 120, 90, .08) 0 1px, rgba(0, 0, 0, 0) 1.5px) 0 0 / 5px 5px,
    linear-gradient(180deg, #2a2624, #3a3431);
}

/* モニターの横の白い照明と、小さな丸いスピーカー */
.su-led {
  inset: auto; left: calc(50% + var(--mw) / 2 + 2.2vw); top: calc(var(--mt) + 2vh); width: 7px; height: calc(var(--mh) * .45);
  border-radius: 4px; background: #fdfdff; box-shadow: 0 0 12px 3px rgba(235, 240, 255, .7), 0 0 40px 10px rgba(200, 215, 255, .25);
}
.su-spk {
  inset: auto; left: calc(50% + var(--mw) / 2 + 1.9vw); top: calc(var(--mt) - 3.2vh); width: 1.6vw; height: 1.6vw; border-radius: 50%;
  background: radial-gradient(circle, #111 0 35%, #3a3d43 40%, #22252a 70%); box-shadow: 0 0 0 2px #4a4e55;
}

/* モニターの下の棚と、オットマン（足をのせる台・ベッドの足もと） */
.su-shelf {
  inset: auto; left: calc(50% - var(--mw) / 2 - 1vw); width: calc(var(--mw) + 2vw);
  top: calc(var(--mt) + var(--mh) + 3.2vh); height: 2.6vh; border-radius: 4px;
  background: linear-gradient(180deg, #54585f 0%, #33363c 40%, #1d1f23 100%); box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
}
.su-otto-top { /* オットマンの上の面（手前に広がる） */
  clip-path: polygon(calc(50% - var(--mw) * .36) calc(var(--mt) + var(--mh) + 7vh), calc(50% + var(--mw) * .36) calc(var(--mt) + var(--mh) + 7vh),
                     calc(50% + var(--mw) * .44) calc(var(--fy1) - 1vh), calc(50% - var(--mw) * .44) calc(var(--fy1) - 1vh));
  background:
    radial-gradient(circle, rgba(255, 255, 255, .22) 0 .8px, rgba(0, 0, 0, 0) 1.2px) 0 0 / 5px 5px,
    linear-gradient(180deg, #34363b, #494c52);
}
.su-otto { /* オットマンの前の面 */
  clip-path: polygon(calc(50% - var(--mw) * .44) calc(var(--fy1) - 1vh), calc(50% + var(--mw) * .44) calc(var(--fy1) - 1vh),
                     calc(50% + var(--mw) * .44) calc(var(--fy1) + 9vh), calc(50% - var(--mw) * .44) calc(var(--fy1) + 9vh));
  background:
    radial-gradient(circle, rgba(255, 255, 255, .14) 0 .8px, rgba(0, 0, 0, 0) 1.2px) 0 0 / 5px 5px,
    linear-gradient(180deg, #25272b, #1a1b1e);
}

/* 手前のひじかけ（席の番号つき） */
.su-arm {
  inset: auto; right: -5vw; bottom: -8vh; width: 30vw; height: 19vh; border-radius: 2.4vh;
  background: linear-gradient(180deg, #4b4e55 0%, #2d3035 25%, #1c1e22 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 -10px 30px rgba(0, 0, 0, .35);
}
.su-seatno {
  position: absolute; left: 3vw; top: 3.5vh; padding: .3em .55em; border-radius: 6px;
  font: 700 clamp(12px, 1.1vw, 18px) / 1 var(--mono, monospace); letter-spacing: .06em; color: #e9ecf1;
  background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.flight.side-r .su-seatno { transform: scaleX(-1); } /* 左右反対の中でも、文字は正しい向き */

/* 暗さ（夜）と読書灯 */
.flight.tv.suite .fl-suite::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(4, 8, 20, calc(var(--dim, 0) * .9)); transition: background 2s; }
.flight.tv.suite.reading .fl-suite::after {
  background: radial-gradient(ellipse 45% 55% at 22% 30%, rgba(255, 214, 160, .22), rgba(255, 214, 160, 0) 70%), rgba(4, 8, 20, calc(var(--dim, 0) * .45));
}

/* モニター：前の壁に埋め込み。ふちは細く */
.flight.tv.suite { background: #dfe2e6; }
.flight.tv.suite .fl-seatback {
  top: var(--mt); width: calc(var(--mw) + 16px); height: calc(var(--mh) + 16px);
  border-radius: 6px; background: none; box-shadow: none;
}
.flight.tv.suite .fl-seatback::before, .flight.tv.suite .fl-seatback::after { display: none; }
.flight.tv.suite .fl-bezel {
  top: 0; width: calc(var(--mw) + 16px); height: calc(var(--mh) + 16px); padding: 8px; border-radius: 6px;
  background: #0b0c0e; box-shadow: 0 0 0 1px #3c3f45, 0 0 30px rgba(120, 150, 220, .12);
}
.flight.tv.suite .fl-bezel::after { inset: 8px; border-radius: 3px; }
.flight.tv.suite .fl-screen { left: 8px; top: 8px; border-radius: 3px; }

/* 手元の操作パネル（サイドコンソールの上）。金属のふちに、黒いボタン */
.flight.tv.suite .fl-remote {
  top: calc(100vh - var(--mt) - 23vh); left: calc(2.4vw - 50vw + var(--mw) / 2 + 8px); transform: perspective(900px) rotateY(24deg);
  gap: 8px; padding: 9px 12px; border-radius: 9px;
  background: linear-gradient(180deg, #141518, #0c0d0f);
  box-shadow: 0 0 0 4px #7a5842, 0 0 0 5px #3b2a20, 0 10px 24px rgba(0, 0, 0, .45);
}
.flight.tv.suite.side-r .fl-remote { left: auto; right: calc(2.4vw - 50vw + var(--mw) / 2 + 8px); transform: perspective(900px) rotateY(-24deg); }
.flight.tv.suite.mid .fl-remote { left: 50%; top: calc(var(--mh) + 16px + 8vh); transform: translateX(-50%) perspective(900px) rotateX(38deg); } /* まん中の席：オットマンの上に置いてある */
.flight.tv.suite .fl-remote button {
  width: 34px; height: 30px; border-radius: 5px; font-size: 13px;
  background: linear-gradient(180deg, #25272c, #17181b); box-shadow: 0 0 0 1px #3d4047, inset 0 1px 0 rgba(255, 255, 255, .08);
}
.flight.tv.suite .fl-remote-tip { top: calc(var(--mh) - 56px); }

/* 個室のモニターがつくときの「ようこそ」画面（スタートを押すまで出ている） */
.sp-suite { display: none; }
.flight.tv.suite .fl-splash { padding: 0; background: #fff; transition: opacity .8s; }
.flight.tv.suite .fl-splash.wait { pointer-events: auto; }
.flight.tv.suite .fl-splash > small, .flight.tv.suite .fl-splash > b, .flight.tv.suite .fl-splash > span { display: none; }
.flight.tv.suite .sp-suite { display: block; position: absolute; inset: 0; color: #1c2230; overflow: hidden; }

/* 右：目的地の空（斜めに切った形）。現地の時刻で、朝・昼・夕方・夜の色になる */
.sp-sky {
  position: absolute; inset: 0 0 0 36%; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #2f6fc9 0%, #6aa6e6 45%, #bfe0f7 78%, #eaf5fb 100%);
  transition: background 1s;
}
.sp-sky[data-sky="dawn"] { background: linear-gradient(180deg, #3a4c8f 0%, #8b7fb8 38%, #f0a7a0 68%, #ffd7a6 100%); }
.sp-sky[data-sky="dusk"] { background: linear-gradient(180deg, #4b5aa8 0%, #b494cf 34%, #f2b58c 62%, #f7d9a8 74%, #7d6aa0 100%); }
.sp-sky[data-sky="night"] { background: linear-gradient(180deg, #050a1f 0%, #101d4a 55%, #283b78 88%, #3f4f8a 100%); }
.sp-stars { position: absolute; inset: 0; opacity: 0; background:
  radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 33% 9%, #fff, transparent),
  radial-gradient(1.6px 1.6px at 58% 26%, #fff, transparent), radial-gradient(1px 1px at 77% 14%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 88% 38%, #fff, transparent), radial-gradient(1px 1px at 46% 44%, #fff, transparent),
  radial-gradient(1.3px 1.3px at 67% 55%, #fff, transparent), radial-gradient(1px 1px at 24% 36%, #fff, transparent),
  radial-gradient(1.1px 1.1px at 94% 8%, #fff, transparent), radial-gradient(1px 1px at 40% 22%, #fff, transparent); }
.sp-sky[data-sky="night"] .sp-stars { opacity: .9; animation: sp-twinkle 4s ease-in-out infinite alternate; }
@keyframes sp-twinkle { to { opacity: .55; } }
.sp-sun { position: absolute; right: 16%; top: 22%; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, #fffef6 0 38%, rgba(255, 244, 214, .7) 52%, rgba(255, 244, 214, 0) 72%); }
.sp-sky[data-sky="dawn"] .sp-sun, .sp-sky[data-sky="dusk"] .sp-sun { top: 58%; background: radial-gradient(circle, #fff3d6 0 34%, rgba(255, 196, 140, .75) 52%, rgba(255, 170, 120, 0) 72%); }
.sp-sky[data-sky="night"] .sp-sun { width: 64px; height: 64px; top: 16%; right: 20%; background: radial-gradient(circle at 40% 40%, #fdfbef 0 45%, rgba(230, 236, 255, .35) 55%, rgba(230, 236, 255, 0) 72%); }
.sp-cloud { position: absolute; height: 34px; border-radius: 99px; background: rgba(255, 255, 255, .8); filter: blur(7px); animation: sp-drift 70s linear infinite; }
.sp-cloud.c1 { top: 62%; left: 20%; width: 360px; }
.sp-cloud.c2 { top: 72%; left: 55%; width: 480px; height: 44px; animation-duration: 95s; }
.sp-cloud.c3 { top: 44%; left: 70%; width: 220px; opacity: .7; animation-duration: 55s; }
.sp-sky[data-sky="night"] .sp-cloud { background: rgba(120, 140, 200, .25); }
.sp-sky[data-sky="dusk"] .sp-cloud, .sp-sky[data-sky="dawn"] .sp-cloud { background: rgba(255, 214, 190, .7); }
@keyframes sp-drift { from { transform: translateX(0); } to { transform: translateX(-420px); } }
.sp-jet { position: absolute; left: 30%; top: 36%; width: 60px; fill: rgba(255, 255, 255, .92); transform: rotate(-8deg); animation: sp-fly 30s linear infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
@keyframes sp-fly { from { transform: translate(-80px, 30px) rotate(-8deg); } to { transform: translate(560px, -50px) rotate(-8deg); } }
.sp-dest { position: absolute; left: 24%; bottom: 64px; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.sp-dest small { display: block; font-size: 22px; letter-spacing: .3em; opacity: .9; }
.sp-dest b { display: block; font-size: 84px; line-height: 1; letter-spacing: .04em; font-weight: 800; }
.sp-dest span { display: block; margin-top: 10px; font-size: 20px; opacity: .92; }

/* 左：白い面に、席・便・出発地→目的地・時刻 */
.sp-card { position: absolute; left: 80px; top: 64px; bottom: 60px; width: 640px; display: flex; flex-direction: column; }
.sp-top { display: flex; align-items: baseline; gap: 18px; }
.sp-seat { font-size: 72px; font-weight: 800; letter-spacing: .01em; line-height: 1; }
.sp-class { font-size: 15px; font-weight: 700; letter-spacing: .3em; color: #9a7b45; }
.flight.tv.suite .sp-flight { font-size: 18px; opacity: 1; color: #5b6272; }
.flight.tv.suite .sp-class { opacity: 1; font-size: 15px; }
.sp-welcome { margin-top: 54px; font-size: 21px; letter-spacing: .06em; color: #4a5162; }
.sp-route { display: flex; align-items: center; gap: 22px; margin-top: 12px; font-size: 76px; font-weight: 800; letter-spacing: .06em; line-height: 1.15; }
.flight.tv.suite .sp-route span { font-size: inherit; opacity: 1; }
.sp-route i { font-style: normal; font-weight: 400; color: #9a7b45; font-size: 60px; }
.sp-codes { display: flex; align-items: center; gap: 16px; margin-top: 6px; font: 700 26px/1 var(--mono, monospace); letter-spacing: .12em; color: #5b6272; }
.sp-codes svg { width: 30px; fill: #9a7b45; }
.sp-times { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 34px; margin-top: 38px; padding-top: 22px; border-top: 1px solid #e3e5ea; }
.sp-times small { display: block; font-size: 13px; color: #7a8190; letter-spacing: .04em; }
.sp-times b { display: block; margin-top: 4px; font: 700 30px/1.1 var(--mono, monospace); }
.sp-start {
  align-self: flex-start; margin-top: auto; padding: 14px 76px; border: 0; border-radius: 99px; cursor: pointer; text-align: center;
  font-size: 26px; font-weight: 700; color: #1c2230; background: #ffc83d; line-height: 1.2; box-shadow: 0 6px 18px rgba(200, 150, 30, .35);
  animation: sp-pulse 2.4s ease-in-out infinite;
}
.sp-start small { display: block; font-size: 13px; font-weight: 500; opacity: .85; }
.sp-start:hover { background: #ffd25e; }
@keyframes sp-pulse { 50% { box-shadow: 0 6px 26px rgba(255, 190, 40, .7); } }

/* ============ 機内エンターテインメントのメニュー（画面の中。1600×900 の画面として作る） ============ */
.ife-ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ife-ic.mini { width: .95em; height: .95em; vertical-align: -.12em; }
.ife-fab {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
}
.ife-fab .ife-ic { width: 64px; height: 64px; padding: 17px; border-radius: 50%; color: #1c2230; background: #ffc83d; box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .12); transition: transform .15s; }
.ife-fab:hover .ife-ic { transform: scale(1.06); }
.ife-fab span { font-size: 13px; letter-spacing: .1em; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.flight:not(.has-map) .ife-fab { display: none; }

.ife {
  position: absolute; inset: 0; z-index: 30; color: #e9ebf0; background: #0e0f13;
  display: grid; grid-template-columns: 120px 1fr; grid-template-rows: 110px 1fr;
  font-size: 18px; animation: ife-in .35s ease;
}
.ife[hidden] { display: none; }
@keyframes ife-in { from { opacity: 0; } to { opacity: 1; } }
.ife-rail { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 18px 0 30px; border-right: 1px solid rgba(255, 255, 255, .06); }
.ife-rail button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #d6d9e0; cursor: pointer; font-size: 12px; }
.ife-rail .ife-menu .ife-ic { width: 66px; height: 66px; padding: 18px; border-radius: 50%; color: #1c2230; background: #ffc83d; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.ife-rail .ife-back .ife-ic { width: 46px; height: 46px; padding: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px #d6d9e0; }
.ife-rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 26px; }
.ife-rail-foot .ife-ic { width: 32px; height: 32px; }
.ife-rail button.now, .ife-rail button:hover { color: #ffc83d; }
.ife-head { display: flex; align-items: center; justify-content: space-between; padding: 0 70px 0 56px; }
.ife-head h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: .04em; }
.ife-head #ife-left { font-size: 17px; color: #c8ccd4; display: flex; align-items: center; gap: 10px; }
.ife-head .ife-ic.mini { width: 24px; height: 24px; transform: rotate(-35deg); color: #c8ccd4; }
.ife-body { padding: 10px 70px 40px 56px; overflow: hidden; }
.ife[data-page="home"] .ife-head { justify-content: center; padding-top: 30px; }
.ife[data-page="home"] .ife-head h2 { font-weight: 500; font-size: 30px; }
.ife[data-page="home"] #ife-left { position: absolute; right: 70px; top: 44px; }

/* モードの選択 */
.ife-modes { display: flex; justify-content: center; gap: 36px; margin-top: 40px; }
.ife-mode {
  width: 300px; min-height: 380px; padding: 34px 26px; border-radius: 10px; border: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; align-items: center; gap: 12px; color: #2a2f3a;
  background: linear-gradient(180deg, #fbfbfa, #f1f1ee); box-shadow: 0 8px 26px rgba(0, 0, 0, .45); transition: transform .15s, box-shadow .15s;
}
.ife-mode:hover { transform: translateY(-4px); }
.ife-mode.on { box-shadow: 0 0 0 4px var(--c), 0 8px 26px rgba(0, 0, 0, .45); }
.ife-ring { display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; color: var(--c); box-shadow: 0 0 0 3px var(--c), inset 0 0 0 10px #fff, inset 0 0 0 12px var(--c); background: #fff; }
.ife-ring .ife-ic { width: 56px; height: 56px; stroke-width: 1.6; }
.ife-mode b { font-size: 22px; color: var(--c); letter-spacing: .1em; }
.ife-mode ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.ife-mode li { display: flex; gap: 8px; }
.ife-mode li .ife-ic { width: 20px; height: 20px; margin-top: 1px; color: #fff; fill: #3f9b5e; stroke: #fff; }
.ife-note { margin: 30px 0 0; text-align: center; font-size: 15px; color: #a7adb8; }
.ife-pill {
  display: flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 10px 26px; border-radius: 99px; cursor: pointer;
  font-size: 16px; color: #e9ebf0; background: none; border: 1.5px solid #b9bec8;
}
.ife-pill .ife-ic { width: 22px; height: 22px; }
.ife-pill.on { color: #1c2230; background: #ffc83d; border-color: #ffc83d; }

/* フライト情報（タイムライン） */
.ife-tl { margin-top: 26px; padding: 30px 60px 34px; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ife-tl-head { display: flex; align-items: center; gap: 12px; font-size: 17px; color: #b9bec8; }
.ife-tl-head .ife-ic { width: 28px; height: 28px; }
.ife-tl-track { position: relative; height: 150px; margin: 10px 20px 0; }
.ife-tl-line, .ife-tl-done { position: absolute; left: 0; top: 112px; height: 4px; border-radius: 2px; }
.ife-tl-line { right: 0; background: #5b5e66; }
.ife-tl-done { background: #cdb487; }
.ife-tl-bulge { position: absolute; top: 108px; width: 130px; height: 12px; margin-left: -65px; border-radius: 50%; background: #5b5e66; }
.ife-tl-bulge.past { background: #cdb487; }
.ife-tl-dot { position: absolute; top: 106px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #cdb487; }
.ife-tl-dot.a { left: 0; }
.ife-tl-dot.b { left: 100%; background: #7d8089; }
.ife-tl-ev { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ife-tl-ev > i { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 2px #c8ccd4; color: #fff; }
.ife-tl-ev > i .ife-ic { width: 30px; height: 30px; }
.ife-tl-ev small { font-size: 12px; line-height: 1.35; color: #b9bec8; white-space: nowrap; }
.ife-tl-ev.past > i { box-shadow: 0 0 0 2px #cdb487; color: #cdb487; }
.ife-tl-ev small { position: absolute; top: 132px; }
.ife-tl-plane { position: absolute; top: 100px; transform: translateX(-50%); color: #fff; font-size: 30px; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)); }
.ife-tl-ends { display: flex; justify-content: space-between; margin: 36px 0 0; }
.ife-tl-ends b { display: flex; flex-direction: column; font-size: 24px; letter-spacing: .06em; }
.ife-tl-ends b:last-child { text-align: right; }
.ife-tl-ends small { font-size: 14px; font-weight: 400; color: #b9bec8; letter-spacing: 0; }
.ife-facts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 34px; }
.ife-facts div { padding: 18px 20px; border-radius: 8px; background: #191b21; }
.ife-facts small { display: block; font-size: 14px; color: #a7adb8; }
.ife-facts b { display: block; margin-top: 6px; font: 700 34px/1.1 var(--mono, monospace); color: #fff; }
.ife-facts em { margin-left: 4px; font-style: normal; font-size: 15px; color: #a7adb8; }

/* 設定 */
.ife-tabs { display: flex; gap: 20px; margin: 16px 0 60px; }
.ife-tabs button { padding: 18px 26px; border: 0; background: none; color: #e9ebf0; font-size: 17px; cursor: pointer; border-bottom: 2px solid #5b5e66; }
.ife-tabs button.on { background: #1d1f26; border-bottom-color: #cdb487; }
.ife-rows { background: #1a1c22; border-radius: 4px; }
.ife-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding: 0 30px; border-bottom: 1px solid #0e0f13; font-size: 18px; }
.ife-row.col { flex-direction: column; align-items: stretch; justify-content: center; padding: 20px 30px 26px; }
.ife-sw { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: #c8ccd4; cursor: pointer; font-size: 16px; }
.ife-sw i { position: relative; width: 60px; height: 32px; border-radius: 99px; background: #2b2e36; box-shadow: inset 0 0 0 1.5px #5b5e66; }
.ife-sw i::after { content: ''; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #4b5060; transition: left .2s, background .2s; }
.ife-sw.on i { background: #3a3122; box-shadow: inset 0 0 0 1.5px #cdb487; }
.ife-sw.on i::after { left: 32px; background: #cdb487; }
.ife-sw span { width: 36px; text-align: left; }
.ife-seg { display: flex; gap: 6px; }
.ife-seg button { padding: 10px 18px; border-radius: 6px; border: 1.5px solid #4b4f59; background: none; color: #d6d9e0; font-size: 15px; cursor: pointer; }
.ife-seg button.on { border-color: #cdb487; background: #3a3122; color: #fff; }
/* ご紹介する街（目的地のご紹介のビデオ）を選ぶ欄 */
.ife-select { min-width: 260px; padding: 10px 14px; border-radius: 6px; border: 1.5px solid #4b4f59; background: #15171c; color: #d6d9e0; font: inherit; font-size: 15px; cursor: pointer; }
.ife-select:focus-visible { outline: 2px solid #cdb487; outline-offset: 2px; }
.ife-select option, .ife-select optgroup { background: #15171c; color: #d6d9e0; }
.ife-sub { display: block; margin-top: 2px; color: #8a8f9a; font-size: 13px; }
.ife-radio { display: flex; justify-content: flex-end; gap: 36px; margin-top: 18px; }
.ife-radio button { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: #d6d9e0; font-size: 16px; cursor: pointer; }
.ife-radio i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #8a8f99; }
.ife-radio .on i { box-shadow: inset 0 0 0 1.5px #cdb487, inset 0 0 0 8px #1a1c22, inset 0 0 0 15px #cdb487; }

/* アクセシビリティ：文字を大きく・ハイコントラスト・色補正（画面の中だけにかかる） */
.fl-screen.ife-big .fl-head, .fl-screen.ife-big .fl-foot, .fl-screen.ife-big .fl-views { zoom: 1.18; }
.fl-screen.ife-big .ife { font-size: 21px; }
.fl-screen.ife-hc { --hc: 1; }
.fl-screen.ife-hc canvas { filter: contrast(1.25) saturate(1.1); }
.fl-screen.ife-hc .fl-hud, .fl-screen.ife-hc .fl-main, .fl-screen.ife-hc .fl-where, .fl-screen.ife-hc .fl-head, .fl-screen.ife-hc .fl-views {
  background: #000 !important; color: #fff !important; box-shadow: 0 0 0 2px #fff !important; backdrop-filter: none !important;
}
.fl-screen.ife-hc .ife { background: #000; }
.fl-screen.ife-hc .ife-row, .fl-screen.ife-hc .ife-facts div { background: #000; box-shadow: inset 0 0 0 1.5px #fff; }
.fl-screen.cv-p { filter: url(#ife-cv-p); }
.fl-screen.cv-d { filter: url(#ife-cv-d); }
.fl-screen.cv-t { filter: url(#ife-cv-t); }

/* 「ようこそ」画面の小さな文字（ふつうの画面の「スタート」表示の文字の設定を受けないように） */
.flight.tv.suite .sp-suite small { font-family: inherit; opacity: 1; }
.flight.tv.suite .sp-suite .sp-welcome { font-size: 21px; letter-spacing: .06em; color: #4a5162; }
.flight.tv.suite .sp-suite .sp-times small { font-size: 13px; letter-spacing: .04em; color: #7a8190; }
.flight.tv.suite .sp-suite .sp-dest small { font-size: 22px; letter-spacing: .3em; opacity: .9; }
.flight.tv.suite .sp-suite .sp-start small { font-size: 13px; letter-spacing: .12em; }

/* ============ ファーストの個室：手元の タブレット（横 19.5cm × 縦 13.5cm くらい。スタンドになるケース付き） ============
   寝かせてある → さわると起き上がる（ロック画面）→ もう一度さわると手前に大きく寄る（ホーム画面） */
.su-pad { display: none; }
.flight.tv.suite .su-pad {
  --rx: 72deg; --ry: 18deg;
  display: block; position: absolute; z-index: 3; left: 1.6vw; bottom: 4vh; width: calc(var(--mw) * .45); cursor: pointer;
  transform-origin: 30% 100%;
  transform: perspective(1100px) rotateY(var(--ry)) rotateX(var(--rx)) scale(.92);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), width .7s cubic-bezier(.2, .8, .2, 1), left .7s, bottom .7s;
}
.flight.tv.suite .su-pad:not(.up):hover { --rx: 62deg; }
.flight.tv.suite .su-pad.up { --rx: 4deg; --ry: 14deg; transform: perspective(1100px) rotateY(var(--ry)) rotateX(var(--rx)) translateY(-3vh) scale(1.04); }
/* 手前に寄ったとき：左下から、大きな画面の下のあたりまで */
.flight.tv.suite .su-pad.near {
  z-index: 8; cursor: default; left: 2vw; bottom: 2vh; width: min(calc(60vh * 1.45), 66vw);
  transform: perspective(1400px) rotateX(3deg);
}
.flight.tv.suite.side-r .su-pad { left: auto; right: 1.6vw; --ry: -18deg; transform-origin: 70% 100%; }
.flight.tv.suite.side-r .su-pad.up { --ry: -14deg; }
.flight.tv.suite.side-r .su-pad.near { right: 2vw; }
.flight.tv.suite.mid .su-pad { --ry: 0deg; }
.flight.tv.suite .fl-remote { display: none; } /* ファーストでは、タブレットで操作する */
.flight.tv.suite .fl-remote-tip { top: calc(var(--mh) - 56px); }

/* ケース（うしろに折って、スタンドにしている） */
.pad-case {
  position: absolute; left: 10%; right: 10%; bottom: -9%; height: 34%; border-radius: 4% / 10%;
  background: linear-gradient(180deg, #2c3446 0%, #1c2230 60%, #141821 100%);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pad-case::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 10%; border-bottom: 1px dashed rgba(255, 255, 255, .12); }
/* 本体：うすい金属のふちと、細い黒いふち */
.pad-body {
  position: relative; aspect-ratio: 195.4 / 134.8; padding: 3.2%; border-radius: 6.5% / 9.4%;
  background: #0b0c0f;
  box-shadow: 0 0 0 2px #8e9bb3, 0 0 0 3px #5d6880, 0 18px 36px rgba(0, 0, 0, .5), inset 0 0 0 1px #20232a;
}
.pad-cam { position: absolute; left: 50%; top: 1.3%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1d2330; box-shadow: 0 0 0 1px #2e3440; }
.pad-body::after { /* 画面の映り込み */
  content: ''; position: absolute; inset: 3.2%; border-radius: 3.6% / 5.2%; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 34%);
}
.pad-screen {
  position: relative; height: 100%; border-radius: 3.6% / 5.2%; overflow: hidden; container-type: inline-size; color: #fff;
  /* 壁紙：水色から青への波 */
  background:
    radial-gradient(120% 140% at 110% 110%, #0c2a9c 0 38%, rgba(12, 42, 156, 0) 39%),
    radial-gradient(90% 120% at 95% 20%, #3f8fe8 0 30%, rgba(63, 143, 232, 0) 55%),
    linear-gradient(120deg, #2fd0c8 0%, #36b6d8 35%, #2c7fd8 70%, #1f4cc0 100%);
}
.pad-view { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .5s .25s; }
.su-pad:not(.up) .pad-view { opacity: 0; transition: opacity .3s; pointer-events: none; }
.su-pad:not(.up) .pad-screen { background: #07080b; } /* 寝ているあいだは、画面が消えている */
.pad-view[data-p="tv"], .pad-view[data-p="movies"], .pad-view[data-p="now"], .pad-view[data-p="web"] { background: rgba(8, 14, 32, .78); backdrop-filter: blur(10px); }
.pad-hint {
  position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%) rotateX(-60deg); white-space: nowrap;
  padding: 4px 10px; border-radius: 99px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s; pointer-events: none;
}
.su-pad:not(.up):hover .pad-hint { opacity: 1; }
.su-pad.up .pad-hint { display: none; }
.pad-view button { font: inherit; color: inherit; cursor: pointer; }
.pad-view .ife-ic { width: 1em; height: 1em; }

/* ロック画面（起き上がったところ） */
.pl-lock { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 6cqw; text-shadow: 0 1px 8px rgba(0, 20, 60, .25); }
.pl-lock .ife-ic { width: 4cqw; height: 4cqw; stroke-width: 2.4; }
.pl-lock span { margin-top: 2cqw; font-size: 3.6cqw; font-weight: 600; }
.pl-lock b { font: 600 20cqw/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; opacity: .92; }
.pl-foot { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding-bottom: 2.2cqw; }
.pl-foot span { font-size: 3cqw; font-weight: 600; }
.pl-foot small { font-size: 2.4cqw; opacity: .8; }
.pl-bar { display: block; width: 26cqw; height: .9cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .9); }
.pl-bar.home { position: absolute; left: 50%; bottom: 1.4cqw; transform: translateX(-50%); width: 22cqw; }

/* 上の段（時刻・機内モード・電池） */
.pad-status { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw 3cqw .6cqw; font-size: 2.3cqw; font-weight: 600; }
.ps-r { display: flex; align-items: center; gap: 1.2cqw; }
.ps-r .ps-plane { width: 2.6cqw; height: 2.6cqw; }
.ps-wifi { width: 2.4cqw; height: 1.8cqw; border-radius: 2.4cqw 2.4cqw 0 0; border: .4cqw solid #fff; border-bottom: 0; opacity: .9; }
.ps-r em { font-style: normal; }
.ps-bat { position: relative; width: 4.4cqw; height: 2cqw; border-radius: .5cqw; box-shadow: 0 0 0 .25cqw #fff; background: linear-gradient(90deg, #fff 100%, transparent 0); }
.ps-bat::after { content: ''; position: absolute; right: -.8cqw; top: .55cqw; width: .4cqw; height: .9cqw; border-radius: 0 .3cqw .3cqw 0; background: #fff; }

/* ホーム画面：左にウィジェット、右にアプリ */
.ph-wrap { flex: 1; display: grid; grid-template-columns: 34% 1fr; gap: 3cqw; padding: 1.6cqw 3.4cqw 4cqw; min-height: 0; }
.ph-widgets { display: flex; flex-direction: column; gap: 2cqw; }
.ph-w {
  padding: 2.4cqw 2.8cqw; border-radius: 3cqw; border: 0; text-align: left;
  background: rgba(255, 255, 255, .2); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.ph-w.clock b { display: block; font: 500 10cqw/1 system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; }
.ph-w.clock span { display: block; margin-top: .8cqw; font-size: 2.4cqw; opacity: .9; }
.ph-w.trip small { display: block; font-size: 2.3cqw; opacity: .9; }
.ph-w.trip b { display: block; margin: .4cqw 0 1.2cqw; font: 700 4.2cqw/1.1 var(--mono, monospace); }
.ph-prog { display: block; height: .9cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .3); overflow: hidden; }
.ph-prog i { display: block; height: 100%; width: 0; background: #ffd25e; }
.ph-w.trip span { display: block; margin-top: 1cqw; font-size: 2.2cqw; opacity: .9; }
.ph-w.now { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.5cqw !important; background: rgba(20, 24, 40, .45); }
.ph-w.now .ife-ic { width: 3.4cqw; height: 3.4cqw; }
.ph-w.now span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ph-w.now em { font-style: normal; color: #ffd25e; }
.ph-apps { display: grid; grid-template-columns: repeat(5, 1fr); align-content: start; gap: 2.4cqw 1.6cqw; }
.ph-apps button { display: flex; flex-direction: column; align-items: center; gap: .9cqw; padding: 0; border: 0; background: none; transition: transform .1s; }
.ph-apps button > i {
  display: grid; place-items: center; width: 9.6cqw; height: 9.6cqw; border-radius: 2.4cqw; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000));
  box-shadow: 0 .6cqw 1.6cqw rgba(0, 20, 60, .3);
}
.ph-apps button > i .ife-ic { width: 5.2cqw; height: 5.2cqw; stroke-width: 2.2; }
.ph-apps button span { font-size: 2.1cqw !important; line-height: 1.15; text-shadow: 0 1px 4px rgba(0, 20, 60, .45); white-space: nowrap; }
.ph-apps button.on > i { box-shadow: 0 0 0 .5cqw #ffd25e, 0 .6cqw 1.6cqw rgba(0, 20, 60, .3); }
.ph-apps button.dim { opacity: .45; }
.pad-view button.tap { transform: scale(.92); }

/* 自分のサイトなどを開いているとき */
.pw-head { display: flex; align-items: center; gap: 2cqw; padding: 1.2cqw 2cqw; font-size: 2.8cqw; background: rgba(10, 14, 26, .9); }
.pw-head b { flex: 1; }
.pw-head button { display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 3cqw !important; }
.pw-head .ife-ic { width: 3cqw; height: 3cqw; }
.pw-frame { flex: 1; width: 100%; border: 0; background: #fff; }

/* テレビ・映画の一覧、見ている番組 */
.pv-head { display: flex; align-items: center; gap: 2cqw; padding: 1.4cqw 4cqw 1.6cqw; font-size: 4cqw; }
.pv-head button { display: grid; place-items: center; width: 6cqw; height: 6cqw; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.pv-head .ife-ic { width: 3.4cqw; height: 3.4cqw; }
.pv-list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 1.4cqw; padding: 0 4cqw; overflow: auto; }
.pv-list button { display: flex; align-items: center; gap: 2cqw; padding: 1.4cqw 2cqw; border: 0; border-radius: 2cqw; text-align: left; background: rgba(255, 255, 255, .08); }
.pv-list button.on { box-shadow: inset 0 0 0 1.5px #ffc83d; }
.pv-list i, .pn-info.tv > i { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; flex: none; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 3cqw; color: #fff; background: var(--c); }
.pv-list span { flex: 1; min-width: 0; }
.pv-list b { display: block; font-size: 2.8cqw; }
.pv-list small { display: block; font-size: 2.2cqw; opacity: .75; }
.pv-list em { font-style: normal; font-size: 2cqw; font-weight: 700; padding: .3cqw 1.2cqw; border-radius: 1cqw; background: #d8453a; }
.pv-note { margin: 0; padding: 1.6cqw 4cqw 3cqw; font-size: 2.1cqw; opacity: .6; }
.pv-posters { flex: 1; display: flex; gap: 2.4cqw; padding: 1cqw 4cqw; overflow-x: auto; overflow-y: hidden; }
.pv-posters button { flex: none; width: 17cqw; padding: 0; border: 0; background: none; text-align: left; }
.pv-poster {
  display: flex; align-items: flex-end; aspect-ratio: 2 / 3; padding: 1.6cqw; border-radius: 1.4cqw; overflow: hidden;
  background: radial-gradient(90% 60% at 70% 20%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, var(--a), var(--b));
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .4);
}
.pv-poster b { font-size: 2.8cqw; line-height: 1.1; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.pv-posters small { display: block; margin-top: 1cqw; font-size: 2.2cqw; }
.pv-posters em { display: block; font-style: normal; font-size: 2cqw; opacity: .7; }
.pn-info { display: flex; gap: 3cqw; padding: 0 5cqw; }
.pn-info .pv-poster { width: 13cqw; flex: none; }
.pn-info b { display: block; font-size: 3.4cqw; }
.pn-info small { display: block; font-size: 2.3cqw; opacity: .75; }
.pn-info p { margin: 1.2cqw 0; font-size: 2.5cqw; line-height: 1.45; opacity: .9; }
.pn-info .pn-cr { font-size: 2cqw; opacity: .6; }
.pn-info.tv { align-items: flex-start; padding-top: 1cqw; }
.pn-info.tv > i { width: 10cqw; height: 10cqw; font-size: 4.6cqw; }
.pn-prog { position: relative; height: 1.2cqw; margin: 2.4cqw 5cqw 0; border-radius: 1cqw; background: rgba(255, 255, 255, .18); cursor: pointer; }
.pn-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #ffc83d; }
.pn-time { display: flex; justify-content: space-between; padding: 1cqw 5cqw 0; font: 2.2cqw var(--mono, monospace); opacity: .8; }
.pn-ctl { display: flex; justify-content: center; align-items: center; gap: 3cqw; margin-top: auto; padding: 1.6cqw 4cqw; }
.pn-ctl button { display: flex; flex-direction: column; align-items: center; gap: .4cqw; padding: 1.4cqw; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.pn-ctl button .ife-ic { width: 4.4cqw; height: 4.4cqw; }
.pn-ctl button small { font-size: 1.8cqw; }
.pn-ctl button.big { padding: 2.2cqw; color: #1c2230; background: #ffc83d; }
.pn-ctl button.big .ife-ic { width: 5.4cqw; height: 5.4cqw; }
.pn-stop { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; margin: 0 5cqw 3cqw; padding: 1.3cqw; border: 0; border-radius: 2cqw; font-size: 2.4cqw !important; background: rgba(255, 255, 255, .1); }
.pn-stop .ife-ic { width: 2.6cqw; height: 2.6cqw; }

/* 大きな画面で見ているとき：地図の案内は隠す。テレビ（YouTube）の上には何も重ねない */
.ife-media { position: absolute; inset: 0; z-index: 25; background: #000; }
.ife-media[hidden] { display: none; }
.ife-media video, .ife-yt, .ife-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ife-media video { object-fit: contain; background: #000; }
.fl-screen.media .ife-fab, .fl-screen.media .fl-inner, .fl-screen.media .fl-views, .fl-screen.media .fl-credit { visibility: hidden; }
.ife-mbar {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 22px; padding: 26px 40px 22px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75) 40%); color: #fff; font-size: 20px; opacity: 0; transition: opacity .5s;
}
.ife-media.bar .ife-mbar { opacity: 1; }
.ife-media[data-type="tv"] .ife-mbar { display: none; }
.ife-mprog { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.ife-mprog i { display: block; height: 100%; width: 0; background: #ffc83d; }
.ife-mbar span { font-family: var(--mono, monospace); }
.ife-mbar small { grid-column: 1 / -1; font-size: 13px; opacity: .7; }
.ife-mbar a { color: inherit; }

/* ============ ファーストの タブレット：暗い色のダッシュボード（大きな文字・大きなアイコン） ============ */
/* 手前に寄ったときは、もう少し大きく */
.flight.tv.suite .su-pad.near { width: min(calc(66vh * 1.45), 72vw); }
/* ファーストでは、大きな画面はさわらない（見るだけ）。操作のボタンは タブレット に移す */
.flight.tv.suite .fl-screen { pointer-events: none; }
.flight.tv.suite .ife-fab, .flight.tv.suite .fl-views, .flight.tv.suite .fl-actions, .flight.tv.suite .fl-noise,
.flight.tv.suite .fl-plane, .flight.tv.suite #fl-seat, .flight.tv.suite .ife-rail { visibility: hidden; }
.flight.tv.suite .sp-start small::after { content: ' ・ 手元のタブレット をタップ'; }

/* 大きな画面の右上：再生中の曲（見るだけ） */
.ife-chip {
  position: absolute; right: 30px; top: 96px; z-index: 7; display: flex; align-items: center; gap: 10px; max-width: 520px;
  padding: 10px 18px; border-radius: 99px; font-size: 17px; color: #fff; background: rgba(14, 16, 34, .72); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(160, 140, 255, .35);
}
.ife-chip[hidden] { display: none; }
.ife-chip .ife-ic { width: 22px; height: 22px; color: #a894ff; }
.ife-chip span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ife-chip small { opacity: .75; white-space: nowrap; }
.ife-chip em { font-style: normal; color: #ffd25e; font-size: 14px; }
.fl-screen.media .ife-chip { display: none; }

/* 画面ぜんたい：左に大きなアイコンの列、右に中身 */
.pad-view[data-p="home"], .pad-view[data-p="music"], .pad-view[data-p="tv"], .pad-view[data-p="movies"], .pad-view[data-p="now"],
.pad-view[data-p="map"], .pad-view[data-p="flight"], .pad-view[data-p="settings"] { background: #171830; backdrop-filter: none; }
.pd { position: absolute; inset: 0; display: grid; grid-template-columns: 13cqw 1fr; color: #eceefa; }
.pd-rail { display: flex; flex-direction: column; align-items: center; gap: .9cqw; padding: 2cqw 0 1.6cqw; background: #13142a; border-right: 1px solid rgba(255, 255, 255, .05); }
.pd-logo { font-style: normal; font-size: 3.4cqw; color: #a894ff; margin-bottom: .6cqw; }
.pd-rail button { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3cqw; width: 10cqw; padding: .9cqw 0; border: 0; border-radius: 1.8cqw; background: none; color: #9a9cc0; }
.pd-rail button .ife-ic { width: 4.4cqw; height: 4.4cqw; }
.pd-rail button span { font-size: 1.9cqw !important; white-space: nowrap; }
.pd-rail button.on { color: #fff; background: #2a2b52; }
.pd-rail button.on::before { content: ''; position: absolute; left: -1.5cqw; top: 22%; bottom: 22%; width: .6cqw; border-radius: 1cqw; background: #8b6cff; }
.pd-rail .pd-off { margin-top: auto; color: #ff8d8d; }
.pd-main { display: flex; flex-direction: column; min-width: 0; padding: 2cqw 3cqw 2.4cqw; }
.pd-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.8cqw; }
.pd-top b { display: block; font-size: 4.8cqw; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.pd-top small { display: block; margin-top: .4cqw; font-size: 2.4cqw; color: #a9abcf; }
.pd-stat { display: flex; align-items: center; gap: 1.2cqw; font-size: 2.6cqw; font-weight: 600; }
.pd-stat .ps-plane { width: 2.8cqw; height: 2.8cqw; }
.pd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.6cqw; overflow: hidden; }
.pd-card { position: relative; border: 0; border-radius: 2.6cqw; padding: 2cqw 2.4cqw; background: #23244a; color: inherit; text-align: left; }
.pd-card small { font-size: 2.2cqw; color: #a9abcf; }

/* ホーム */
.pd-home { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr; gap: 1.6cqw; min-height: 0; }
.pd-card.trip { grid-column: span 3; background: linear-gradient(135deg, #3b2e8f, #23244a 70%); }
.pd-card.trip b { display: block; margin: .4cqw 0 1.2cqw; font: 700 8cqw/1 var(--mono, monospace); letter-spacing: .02em; }
.pd-prog { position: relative; display: block; height: 1cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .15); }
.pd-prog > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8b6cff, #ffc83d); }
.pd-prog em { position: absolute; top: 50%; transform: translate(-50%, -50%); color: #fff; }
.pd-prog em .ife-ic { width: 3.4cqw; height: 3.4cqw; }
.pd-row { display: flex; justify-content: space-between; margin-top: 1.4cqw; font-size: 2.3cqw; color: #cfd1ee; }
.pd-card.clock { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.pd-card.clock b { font: 500 7.4cqw/1 system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; }
.pd-card.clock span { margin-top: .8cqw; font-size: 2.1cqw; color: #a9abcf; }
.pd-card.music { grid-column: span 3; display: flex; align-items: center; gap: 2cqw; }
.pd-card.modes { display: flex; flex-direction: column; gap: .8cqw; padding: 1.6cqw; }
.pd-card.modes button { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.2cqw; border: 0; border-radius: 1.4cqw; font-size: 2.3cqw !important; background: rgba(255, 255, 255, .06); }
.pd-card.modes button .ife-ic { width: 3cqw; height: 3cqw; }
.pd-card.modes button.on { background: #8b6cff; color: #fff; }
.pd-card.dev { display: flex; flex-direction: column; justify-content: flex-end; gap: .4cqw; min-height: 0; padding: 1.8cqw 2cqw; cursor: pointer; }
.pd-card.dev > .ife-ic { position: absolute; left: 2cqw; top: 1.8cqw; width: 4.8cqw; height: 4.8cqw; color: #b9bbe0; }
.pd-card.dev > .pd-sw { position: absolute; right: 1.8cqw; top: 2cqw; }
.pd-card.dev b { font-size: 2.8cqw; }
.pd-card.dev.on { background: linear-gradient(160deg, #5b44c9, #3a2c8a); }
.pd-card.dev.on > .ife-ic { color: #fff; }
.pd-card.dev.dim { opacity: .45; }
.pd-card.dev.web { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #23244a), #23244a); }
.pd-card.dev.web > .ife-ic { color: #fff; }
.pd-sw { display: inline-block; position: relative; width: 6.6cqw; height: 3.6cqw; padding: 0; border: 0; border-radius: 99px; background: #3a3b62; vertical-align: middle; }
.pd-sw > i { position: absolute; left: .5cqw; top: .5cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #fff; transition: left .2s; }
.pd-sw.on { background: #8b6cff; }
.pd-sw.on > i { left: 3.5cqw; }

/* 音楽 */
.pd-art { display: grid; place-items: center; flex: none; width: 9cqw; height: 9cqw; border-radius: 1.8cqw; color: rgba(255, 255, 255, .9);
  background: radial-gradient(80% 60% at 70% 20%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(150deg, var(--a), var(--b)); }
.pd-art .ife-ic { width: 4.4cqw; height: 4.4cqw; }
.pd-art.empty { background: #2e2f5a; }
.pd-mtxt { flex: 1; min-width: 0; }
.pd-mtxt small { display: block; font-size: 2.1cqw; color: #a894ff; }
.pd-mtxt b { display: block; font-size: 3.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mtxt span { display: block; font-size: 2.1cqw; color: #a9abcf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mbtn { display: flex; align-items: center; gap: 1cqw; }
.pd-mbtn button, .pd-ctl button { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.pd-mbtn button .ife-ic, .pd-ctl button .ife-ic { width: 3.2cqw; height: 3.2cqw; }
.pd-mbtn button.big, .pd-ctl button.big { width: 8.4cqw; height: 8.4cqw; background: #8b6cff; }
.pd-mbtn button.big .ife-ic, .pd-ctl button.big .ife-ic { width: 4cqw; height: 4cqw; }
.pd-tabs { display: flex; gap: 1cqw; }
.pd-tabs button { padding: 1cqw 2.6cqw; border: 0; border-radius: 99px; font-size: 2.6cqw !important; background: #23244a; color: #cfd1ee; }
.pd-tabs button.on { background: #8b6cff; color: #fff; }
.pd-list { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 1.2cqw; overflow: auto; }
.pd-list button { display: flex; align-items: center; gap: 1.8cqw; padding: 1.2cqw 1.6cqw; border: 0; border-radius: 2cqw; background: #23244a; text-align: left; min-width: 0; }
.pd-list button.on { box-shadow: inset 0 0 0 .35cqw #8b6cff; background: #2c2b5c; }
.pd-list .pd-art { width: 7cqw; height: 7cqw; }
.pd-list span { flex: 1; min-width: 0; }
.pd-list b { display: block; font-size: 2.8cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-list small { display: block; font-size: 2cqw; color: #a9abcf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-list em { flex: none; max-width: 16cqw; font-style: normal; font-size: 1.7cqw; color: #8f91b8; text-align: right; }
.pd-list em.live { padding: .3cqw 1.2cqw; border-radius: 1cqw; font-weight: 700; color: #fff; background: #d8453a; }
.pd-ch { display: grid; place-items: center; flex: none; width: 7cqw; height: 7cqw; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 3.2cqw; color: #fff; background: var(--c); }
.pd-ch.big { width: 13cqw; height: 13cqw; font-size: 6cqw; }
.pd-player { display: flex; align-items: center; gap: 1.8cqw; padding: 1.4cqw 1.8cqw; border-radius: 2.2cqw; background: #2a2b52; }
.pd-player[hidden] { display: none; }
.pd-player .pd-art { width: 7cqw; height: 7cqw; }
.pd-note { margin: 0; font-size: 2cqw; color: #8f91b8; }

/* 映画・再生中 */
.pd-posters { flex: 1; display: flex; gap: 2cqw; overflow-x: auto; overflow-y: hidden; padding-bottom: .6cqw; }
.pd-posters button { flex: none; width: 17cqw; padding: 0; border: 0; background: none; text-align: left; }
.pd-posters button.on .pv-poster { box-shadow: 0 0 0 .4cqw #8b6cff; }
.pd-posters .pv-poster { width: 100%; }
.pd-posters b { display: block; margin-top: 1cqw; font-size: 2.4cqw; }
.pd-posters small { display: block; font-size: 2cqw; color: #a9abcf; }
.pd-nowbox { flex: 1; display: flex; gap: 3cqw; min-height: 0; }
.pd-nowbox .pv-poster { width: 18cqw; flex: none; align-self: flex-start; }
.pd-nowtxt { flex: 1; min-width: 0; }
.pd-nowtxt b { display: block; font-size: 4cqw; }
.pd-nowtxt small { display: block; font-size: 2.1cqw; color: #a9abcf; }
.pd-nowtxt p { margin: 1.2cqw 0 0; font-size: 2.5cqw; line-height: 1.45; }
.pd-nowtxt .pn-prog { margin: 2.4cqw 0 0; height: 1.2cqw; }
.pd-nowtxt .pn-time { padding: 1cqw 0 0; font-size: 2.2cqw; }
.pd-ctl { display: flex; justify-content: center; align-items: center; gap: 1.6cqw; }
.pd-ctl button.stop { width: auto; height: 6.4cqw; padding: 0 2.4cqw; border-radius: 99px; display: flex; gap: 1cqw; font-size: 2.4cqw !important; }

/* 地図の表示 */
.pd-group small { display: block; margin-bottom: .8cqw; font-size: 2.2cqw; color: #a9abcf; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 1cqw; }
.pd-chips button { padding: 1.1cqw 2.2cqw; border: 0; border-radius: 99px; font-size: 2.5cqw !important; background: #23244a; color: #dfe1f6; }
.pd-chips button.on { background: #8b6cff; color: #fff; }

/* フライト */
.pd-fgrid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1.6cqw; min-height: 0; }
.pd-card.big { display: flex; flex-direction: column; justify-content: flex-end; gap: .4cqw; cursor: pointer; }
.pd-card.big > .ife-ic { position: absolute; left: 2.4cqw; top: 2cqw; width: 5.6cqw; height: 5.6cqw; color: #b9aaff; }
.pd-card.big b { font-size: 3.2cqw; }
.pd-card.big.warn > .ife-ic { color: #ff9a8a; }
.pd-card.big.warn b { color: #ffd1c8; }

/* 設定 */
.pd-rows { flex: 1; display: flex; flex-direction: column; gap: 1cqw; overflow: auto; }
.pd-r { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.2cqw 2.2cqw; border-radius: 1.8cqw; background: #23244a; font-size: 2.6cqw; }
.pd-seg { display: flex; gap: .6cqw; }
.pd-seg button { padding: .8cqw 1.8cqw; border: 0; border-radius: 99px; font-size: 2.2cqw !important; background: #34355f; color: #dfe1f6; }
.pd-seg button.on { background: #8b6cff; color: #fff; }
.pd-view button.tap { transform: scale(.94); }

/* ホームの下の段：読書灯などのスイッチを横一列に */
.pd-home { grid-template-rows: auto auto auto; }
.pd-devs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2cqw; } /* 上の段にスイッチ 6 つ、下の段にアプリ 2 つ */
.pd-card.dev { min-height: 10.5cqw; padding: 1.4cqw 1.6cqw; }
.pd-card.dev > .ife-ic { left: 1.6cqw; top: 1.4cqw; width: 3.8cqw; height: 3.8cqw; }
.pd-card.dev > .pd-sw { right: 1.4cqw; top: 1.5cqw; }
.pd-card.dev b { font-size: 2.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-card.trip b { font-size: 7cqw; margin: .2cqw 0 1cqw; }
.pd-card.modes button { padding: .6cqw 1.1cqw; }
/* 画面の高さに収める（左のアイコンの列が長くても、はみ出さない） */
.pd { grid-template-rows: 100%; }
.pd-rail { gap: .5cqw; padding: 1.4cqw 0 1.2cqw; overflow: hidden; min-height: 0; }
.pd-logo { display: none; }
.pd-rail button { padding: .6cqw 0; gap: .2cqw; }
.pd-rail button .ife-ic { width: 3.8cqw; height: 3.8cqw; }
.pd-rail button span { font-size: 1.75cqw !important; }
.pd-main { min-height: 0; overflow: hidden; }
.pd-home { align-content: start; }
.pd-main { padding: 1.6cqw 2.6cqw 1.8cqw; }
.pd-top { margin-bottom: 1.2cqw; }
.pd-top b { font-size: 4.4cqw; }
.pd-home { gap: 1.3cqw; }
.pd-card.trip { padding: 1.6cqw 2.2cqw; }
.pd-card.trip b { font-size: 6.4cqw; margin: .1cqw 0 .9cqw; }
.pd-row { margin-top: 1cqw; }
.pd-card.modes { gap: .5cqw; padding: 1.2cqw 1.4cqw; }
.pd-card.modes button { padding: .45cqw 1cqw; font-size: 2.2cqw !important; }
.pd-card.music { padding: 1.4cqw 2cqw; }
.pd-card.dev { min-height: 9.6cqw; }

/* ホームの上の段：大きな時計と、行き先 */
.pd-card.clock.wide { grid-column: span 2; flex-direction: row; justify-content: flex-start; gap: 2.4cqw; padding: 1.8cqw 2.6cqw; background: linear-gradient(135deg, #3b2e8f, #23244a 75%); }
.pd-card.clock.wide b { font-size: 9cqw; }
.pd-card.clock.wide span { margin: 0; font-size: 2.4cqw; text-align: left; }
.pd-card.dest { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: .3cqw; }
.pd-card.dest b { font-size: 4.6cqw; }
.pd-card.dest span { font-size: 2.2cqw; color: #cfd1ee; }

/* 大きな画面：映画・テレビは、ほかの席と同じように操作できる（タップでの一時停止はしない。一時停止はボタンで） */
.flight.tv.suite .ife-media { pointer-events: auto; }

/* 大きな画面の残り時間（前の黄色の表示のまま）：上に「出発地 → 目的地」、下に進み具合 */
.fl-tripline, .fl-tripbar { display: none; }
.flight.tv.suite .fl-tripline { display: block; font-size: 20px; letter-spacing: .06em; color: #c8ccd6; text-align: center; }
.flight.tv.suite .fl-tripbar { display: block; position: relative; height: 6px; margin: 10px 8px 4px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.fl-tripbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--amber, #ffc83d); }
.fl-tripbar em { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 200, 61, .8); }
.pd-card.clock.wide span { white-space: nowrap; }
.pd-list em.vod { padding: .3cqw 1.2cqw; border-radius: 1cqw; font-weight: 700; color: #fff; background: #5b5fd0; }
.pd-tabs { flex-wrap: wrap; }

/* ============ ファースト：木目のサイドコンソールに埋め込んだ タブレット ／ 立体的なふち ／ ホログラムのガラスの画面 ============ */
/* 「ようこそ」画面のスタートのボタンは出さない（タブレットでスタートする） */
.flight.tv.suite .sp-start { display: none; }

/* 木目のサイドコンソール（肘掛けの上の面と、手前の面）。タブレット はくぼみに収まっている */
.su-mount { display: none; }
.flight.tv.suite .su-mount {
  --pw: calc(var(--mw) * .45);
  display: block; position: absolute; z-index: 2; left: 0; bottom: 0; width: calc(var(--pw) + 5vw); height: calc(var(--pw) * .24 + 9vh);
  pointer-events: none;
}
.flight.tv.suite.side-r .su-mount { left: auto; right: 0; transform: scaleX(-1); }
.su-mount > i { position: absolute; display: block; }
.mt-top { /* 上の面：くるみの木目 */
  left: 0; right: 0; top: 0; bottom: 3.2vh; clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0) 0 5px, rgba(0, 0, 0, .18) 5px 6px, rgba(0, 0, 0, 0) 6px 13px, rgba(255, 220, 180, .06) 13px 14px),
    repeating-linear-gradient(88deg, rgba(90, 50, 25, .0) 0 38px, rgba(40, 20, 10, .35) 38px 44px, rgba(90, 50, 25, 0) 44px 90px),
    linear-gradient(90deg, #4a2e1c, #6b4428 30%, #573620 60%, #6e472b 85%, #4a2e1c);
  box-shadow: inset 0 2px 0 rgba(255, 230, 200, .25);
}
.mt-well { /* タブレット が収まるくぼみ（暗い影） */
  left: 1.1vw; bottom: calc(3.2vh + .6vh); width: calc(var(--pw) * .94 + 1.2vw); height: calc(var(--pw) * .22 + 1vh);
  border-radius: 10px; clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #0b0806, #1b120c);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .85), inset 0 -2px 0 rgba(255, 220, 180, .12);
}
.mt-trim { left: 0; right: 0; bottom: 3.2vh; height: 3px; background: linear-gradient(90deg, #7a5842, #d6a47a 40%, #8a6448 70%, #c9976c); box-shadow: 0 0 6px rgba(214, 164, 122, .5); }
.mt-front { /* 手前の面（少し暗い木目） */
  left: 0; right: 0; bottom: 0; height: 3.2vh;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, .2) 9px 10px), linear-gradient(180deg, #3d2516, #2a190f);
}
.mt-led { left: 6%; right: 6%; bottom: 0; height: 2px; background: #bfe8ff; box-shadow: 0 0 10px 2px rgba(150, 215, 255, .6); opacity: .7; }
/* 寝かせているときは、くぼみにぴったり（まっすぐ前向き）。起き上がるときに少しだけ斜めに */
.flight.tv.suite .su-pad { --rx: 76deg; --ry: 0deg; bottom: calc(3.2vh + .9vh); left: 1.7vw; }
.flight.tv.suite.side-r .su-pad { --ry: 0deg; left: auto; right: 1.7vw; }
.flight.tv.suite .su-pad.up { --rx: 8deg; --ry: 12deg; }
.flight.tv.suite.side-r .su-pad.up { --ry: -12deg; }
.flight.tv.suite .pad-case { display: none; }

/* ふち：黒いガラスに、上からの光のつやと、下の影 */
.flight.tv.suite .pad-body {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 18%),
    linear-gradient(180deg, #2b2e36 0%, #0d0e12 45%, #07080a 100%);
  box-shadow:
    0 0 0 1.5px #a9b3c6, 0 0 0 3px #4b5263, 0 0 0 4px rgba(0, 0, 0, .6),
    inset 0 1.5px 0 rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .8), inset 2px 0 3px rgba(255, 255, 255, .06),
    0 22px 40px rgba(0, 0, 0, .55), 0 6px 12px rgba(0, 0, 0, .4);
}
.flight.tv.suite .pad-body::before { /* ふちの左上に光の筋 */
  content: ''; position: absolute; left: 4%; top: 1.2%; width: 40%; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

/* 画面：うしろが透けて見えるガラスに、ホログラムの虹色の光 */
.flight.tv.suite .su-pad.up .pad-screen {
  background:
    radial-gradient(70% 60% at 15% 10%, rgba(120, 220, 255, .22), rgba(120, 220, 255, 0) 70%),
    radial-gradient(60% 70% at 90% 90%, rgba(170, 120, 255, .25), rgba(170, 120, 255, 0) 70%),
    linear-gradient(135deg, rgba(18, 28, 60, .55), rgba(12, 12, 32, .72));
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(150, 220, 255, .35), inset 0 0 30px rgba(110, 190, 255, .18);
}
.flight.tv.suite .su-pad.up .pad-screen::after { /* 虹色のつや（ゆっくり動く）と、うすい走査線 */
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(120, 240, 255, .16) 42%, rgba(200, 140, 255, .16) 50%, rgba(255, 200, 150, .10) 58%, rgba(255, 255, 255, 0) 70%) 0 0 / 250% 100%,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, rgba(255, 255, 255, 0) 1px 4px);
  animation: holo 9s linear infinite;
}
@keyframes holo { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
.flight.tv.suite .pad-view[data-p] { background: transparent; backdrop-filter: none; }
.flight.tv.suite .pd { color: #eaf6ff; text-shadow: 0 0 10px rgba(120, 210, 255, .25); }
.flight.tv.suite .pd-rail { background: rgba(8, 14, 34, .35); border-right: 1px solid rgba(140, 210, 255, .18); }
.flight.tv.suite .pd-rail button { color: #9fc4e6; }
.flight.tv.suite .pd-rail button.on { color: #fff; background: linear-gradient(135deg, rgba(90, 210, 255, .35), rgba(160, 110, 255, .35)); box-shadow: 0 0 12px rgba(110, 200, 255, .35); }
.flight.tv.suite .pd-rail button.on::before { background: linear-gradient(180deg, #6fe3ff, #a88bff); box-shadow: 0 0 8px #6fe3ff; }
.flight.tv.suite .pd-card, .flight.tv.suite .pd-list button, .flight.tv.suite .pd-r, .flight.tv.suite .pd-player, .flight.tv.suite .pd-tabs button, .flight.tv.suite .pd-chips button {
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(150, 220, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 14px rgba(0, 10, 30, .25);
  backdrop-filter: blur(6px);
}
.flight.tv.suite .pd-card.clock.wide { background: linear-gradient(135deg, rgba(90, 210, 255, .22), rgba(160, 110, 255, .18) 60%, rgba(255, 255, 255, .04)); }
.flight.tv.suite .pd-card.dev.on, .flight.tv.suite .pd-card.modes button.on, .flight.tv.suite .pd-tabs button.on, .flight.tv.suite .pd-chips button.on,
.flight.tv.suite .pd-seg button.on, .flight.tv.suite .pd-sw.on {
  background: linear-gradient(135deg, rgba(80, 210, 255, .75), rgba(150, 110, 255, .75)); box-shadow: 0 0 14px rgba(110, 200, 255, .45);
}
.flight.tv.suite .pd-list button.on { box-shadow: inset 0 0 0 .3cqw #6fe3ff, 0 0 14px rgba(110, 220, 255, .35); }
.flight.tv.suite .pd-mbtn button.big, .flight.tv.suite .pd-ctl button.big { background: linear-gradient(135deg, #5fd6ff, #9a7bff); box-shadow: 0 0 16px rgba(110, 200, 255, .55); }
.flight.tv.suite .pd-mbtn button, .flight.tv.suite .pd-ctl button, .flight.tv.suite .pd-seg button { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(150, 220, 255, .25); }
.flight.tv.suite .pd-top small, .flight.tv.suite .pd-card small, .flight.tv.suite .pd-list small { color: #a9cbe8; }
.flight.tv.suite .pd-prog > i, .flight.tv.suite .pn-prog i { background: linear-gradient(90deg, #6fe3ff, #a88bff); }

/* スクロールバーは見えないように（スクロールはできる） */
.su-pad, .su-pad * { scrollbar-width: none; }
.su-pad ::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pd-card.clock.wide { flex-direction: column; align-items: flex-start; justify-content: center; gap: .6cqw; } .pd-card.clock.wide span { white-space: nowrap; }

/* ============ タブレットの中の大きさを、本物の タブレットのアプリに合わせる ============
   タブレット の横向きは幅 1133pt。見やすさのため 1.25 倍（1pt ≒ 0.11cqw）で、
   ・押せるところは 44pt 以上（≒ 4.8cqw）・ふつうの文字 17pt（≒ 1.85cqw）・小さい文字 13pt（≒ 1.45cqw）
   ・左はアイコン＋文字の「サイドバー」（写真・ミュージック・設定アプリと同じ形） */
.flight.tv.suite .pd { grid-template-columns: 24cqw 1fr; font-size: 1.85cqw; }
.flight.tv.suite .pd-rail { align-items: stretch; gap: .3cqw; padding: 2cqw 1.2cqw 1.4cqw; }
.pd-rail-h { display: block; padding: 0 1cqw .8cqw; font-size: 1.35cqw; font-weight: 600; letter-spacing: .04em; color: #8fb3d3; }
.flight.tv.suite .pd-rail button { flex-direction: row; justify-content: flex-start; gap: 1.2cqw; width: auto; min-height: 4.8cqw; padding: 0 1.2cqw; border-radius: 1.2cqw; }
.flight.tv.suite .pd-rail button .ife-ic { width: 2.4cqw; height: 2.4cqw; }
.flight.tv.suite .pd-rail button span { font-size: 1.8cqw !important; }
.flight.tv.suite .pd-rail button.on::before { left: -1.2cqw; }
.flight.tv.suite .pd-rail .pd-off { margin-top: auto; }
.flight.tv.suite .pd-main { padding: 1.8cqw 2.2cqw 1.6cqw; }
.flight.tv.suite .pd-top { margin-bottom: 1.4cqw; align-items: center; }
.flight.tv.suite .pd-top b { font-size: 3.1cqw; }
.flight.tv.suite .pd-top small { font-size: 1.55cqw; margin-top: .2cqw; }
.flight.tv.suite .pd-stat { font-size: 1.6cqw; gap: .8cqw; }
.flight.tv.suite .pd-stat .ps-plane { width: 1.8cqw; height: 1.8cqw; }
.flight.tv.suite .ps-bat { width: 3cqw; height: 1.4cqw; }
.flight.tv.suite .pd-body { gap: 1.2cqw; }
.flight.tv.suite .pd-card { border-radius: 2cqw; padding: 1.5cqw 1.7cqw; }
.flight.tv.suite .pd-card small { font-size: 1.45cqw; }

/* ホーム（ウィジェット） */
.flight.tv.suite .pd-home { gap: 1.2cqw; }
.flight.tv.suite .pd-card.clock.wide b { font-size: 5cqw; }
.flight.tv.suite .pd-card.clock.wide span { font-size: 1.5cqw; }
.flight.tv.suite .pd-card.dest b { font-size: 2.6cqw; }
.flight.tv.suite .pd-card.dest span { font-size: 1.5cqw; }
.flight.tv.suite .pd-card.music { gap: 1.4cqw; padding: 1.3cqw 1.6cqw; }
.flight.tv.suite .pd-card.modes { gap: .5cqw; padding: 1.2cqw 1.3cqw; }
.flight.tv.suite .pd-card.modes button { min-height: 3.6cqw; padding: 0 1cqw; gap: .8cqw; font-size: 1.6cqw !important; }
.flight.tv.suite .pd-card.modes button .ife-ic { width: 2cqw; height: 2cqw; }
.flight.tv.suite .pd-devs { gap: 1cqw; }
.flight.tv.suite .pd-card.dev { min-height: 7.4cqw; padding: 1.2cqw 1.3cqw; }
.flight.tv.suite .pd-card.dev > .ife-ic { left: 1.3cqw; top: 1.2cqw; width: 2.6cqw; height: 2.6cqw; }
.flight.tv.suite .pd-card.dev > .pd-sw { right: 1.2cqw; top: 1.2cqw; }
.flight.tv.suite .pd-card.dev b { font-size: 1.6cqw; }
/* スイッチ（iOS の形・小さめ） */
.flight.tv.suite .pd-sw { width: 4.6cqw; height: 2.7cqw; }
.flight.tv.suite .pd-sw > i { left: .3cqw; top: .3cqw; width: 2.1cqw; height: 2.1cqw; }
.flight.tv.suite .pd-sw.on > i { left: 2.2cqw; }

/* 音楽の表示 */
.flight.tv.suite .pd-art { width: 5.2cqw; height: 5.2cqw; border-radius: 1.2cqw; }
.flight.tv.suite .pd-art .ife-ic { width: 2.6cqw; height: 2.6cqw; }
.flight.tv.suite .pd-mtxt small { font-size: 1.4cqw; }
.flight.tv.suite .pd-mtxt b { font-size: 2cqw; }
.flight.tv.suite .pd-mtxt span { font-size: 1.45cqw; }
.flight.tv.suite .pd-mbtn { gap: .7cqw; }
.flight.tv.suite .pd-mbtn button, .flight.tv.suite .pd-ctl button { width: 4.4cqw; height: 4.4cqw; }
.flight.tv.suite .pd-mbtn button .ife-ic, .flight.tv.suite .pd-ctl button .ife-ic { width: 2cqw; height: 2cqw; }
.flight.tv.suite .pd-mbtn button.big, .flight.tv.suite .pd-ctl button.big { width: 5.4cqw; height: 5.4cqw; }
.flight.tv.suite .pd-mbtn button.big .ife-ic, .flight.tv.suite .pd-ctl button.big .ife-ic { width: 2.4cqw; height: 2.4cqw; }
/* 上のタブ（セグメント） */
.flight.tv.suite .pd-tabs { gap: .6cqw; }
.flight.tv.suite .pd-tabs button { min-height: 3.6cqw; padding: 0 1.6cqw; font-size: 1.6cqw !important; }
/* 一覧（テレビ・音楽） */
.flight.tv.suite .pd-list { gap: .8cqw; }
.flight.tv.suite .pd-list button { min-height: 5.6cqw; gap: 1.2cqw; padding: .8cqw 1.2cqw; border-radius: 1.4cqw; }
.flight.tv.suite .pd-list .pd-art, .flight.tv.suite .pd-ch { width: 4.2cqw; height: 4.2cqw; font-size: 1.9cqw; }
.flight.tv.suite .pd-list b { font-size: 1.8cqw; }
.flight.tv.suite .pd-list small { font-size: 1.4cqw; }
.flight.tv.suite .pd-list em { font-size: 1.25cqw; max-width: 12cqw; }
.flight.tv.suite .pd-list em.live, .flight.tv.suite .pd-list em.vod { padding: .2cqw .8cqw; border-radius: .7cqw; }
.flight.tv.suite .pd-note { font-size: 1.4cqw; }
.flight.tv.suite .pd-player { gap: 1.2cqw; padding: 1cqw 1.4cqw; border-radius: 1.6cqw; }
/* 映画 */
.flight.tv.suite .pd-posters { gap: 1.6cqw; }
.flight.tv.suite .pd-posters button { width: 12.5cqw; }
.flight.tv.suite .pd-posters .pv-poster b { font-size: 1.8cqw; }
.flight.tv.suite .pd-posters > button > b { font-size: 1.6cqw; margin-top: .8cqw; }
.flight.tv.suite .pd-posters small { font-size: 1.35cqw; }
.flight.tv.suite .pd-nowbox { gap: 2cqw; }
.flight.tv.suite .pd-nowbox .pv-poster { width: 13cqw; }
.flight.tv.suite .pd-nowtxt b { font-size: 2.6cqw; }
.flight.tv.suite .pd-nowtxt small { font-size: 1.45cqw; }
.flight.tv.suite .pd-nowtxt p { font-size: 1.7cqw; }
.flight.tv.suite .pd-nowtxt .pn-time { font-size: 1.5cqw; }
.flight.tv.suite .pd-ch.big { width: 9cqw; height: 9cqw; font-size: 4cqw; }
.flight.tv.suite .pd-ctl { gap: 1.2cqw; }
.flight.tv.suite .pd-ctl button.stop { height: 4.4cqw; padding: 0 1.8cqw; font-size: 1.6cqw !important; gap: .6cqw; }
/* 地図の表示 */
.flight.tv.suite .pd-group small { font-size: 1.45cqw; margin-bottom: .6cqw; }
.flight.tv.suite .pd-chips { gap: .7cqw; }
.flight.tv.suite .pd-chips button { min-height: 3.8cqw; padding: 0 1.6cqw; font-size: 1.65cqw !important; }
/* フライト */
.flight.tv.suite .pd-fgrid { grid-auto-rows: minmax(10cqw, auto); gap: 1.2cqw; align-content: start; }
.flight.tv.suite .pd-card.big > .ife-ic { left: 1.7cqw; top: 1.5cqw; width: 3cqw; height: 3cqw; }
.flight.tv.suite .pd-card.big b { font-size: 2cqw; }
/* 設定（設定アプリと同じ、角の丸いグループの一覧） */
.flight.tv.suite .pd-rows { gap: 0; border-radius: 1.6cqw; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(150, 220, 255, .25); }
.flight.tv.suite .pd-r { min-height: 4.8cqw; padding: .6cqw 1.8cqw; border-radius: 0; font-size: 1.8cqw; box-shadow: none; border-bottom: 1px solid rgba(150, 220, 255, .12); }
.flight.tv.suite .pd-seg { gap: .4cqw; }
.flight.tv.suite .pd-seg button { min-height: 3.2cqw; padding: 0 1.2cqw; font-size: 1.5cqw !important; }
/* 下の小さな再生バー */
.pd-mini { display: flex; align-items: center; gap: 1.2cqw; margin-top: 1.2cqw; padding: .8cqw 1.2cqw; border-radius: 1.6cqw;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(150, 220, 255, .3); backdrop-filter: blur(8px); }
.pd-mini[hidden] { display: none; }
.flight.tv.suite .pd-mini .pd-art { width: 4cqw; height: 4cqw; }
.pd-mini .pd-mtxt b { font-size: 1.7cqw !important; }
/* ロック画面も少し小さく */
.flight.tv.suite .pl-lock b { font-size: 15cqw; }
.flight.tv.suite .pl-lock span { font-size: 2.4cqw; }
.flight.tv.suite .pl-foot span { font-size: 2cqw; }
.flight.tv.suite .pl-foot small { font-size: 1.6cqw; }
.flight.tv.suite .pd-rows { flex: none; align-self: stretch; }

/* ============ タブレットの色：ワイン色・金色・銀色 ============
   ワイン（#6e1a33 / #3a0d1b）・金（#e3c27a → #b58a3c）・銀（#d7dbe2 / #9aa1ad） */
.flight.tv.suite .su-pad.up .pad-screen {
  background:
    radial-gradient(70% 60% at 12% 8%, rgba(227, 194, 122, .18), rgba(227, 194, 122, 0) 70%),
    radial-gradient(70% 80% at 92% 95%, rgba(150, 30, 70, .45), rgba(150, 30, 70, 0) 70%),
    linear-gradient(135deg, rgba(58, 13, 27, .72), rgba(24, 8, 14, .82));
  box-shadow: inset 0 0 0 1px rgba(215, 219, 226, .35), inset 0 0 30px rgba(227, 194, 122, .12);
}
.flight.tv.suite .su-pad.up .pad-screen::after {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(240, 215, 150, .14) 44%, rgba(230, 232, 238, .12) 52%, rgba(255, 255, 255, 0) 66%) 0 0 / 250% 100%,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, rgba(255, 255, 255, 0) 1px 4px);
  opacity: .55;
}
.flight.tv.suite .pd { color: #f6efe6; text-shadow: 0 0 10px rgba(227, 194, 122, .15); }
.flight.tv.suite .pd-rail { background: rgba(30, 6, 14, .45); border-right: 1px solid rgba(215, 219, 226, .2); }
.flight.tv.suite .pd-rail-h { color: #c9a45e; }
.flight.tv.suite .pd-rail button { color: #cdd1d8; }
.flight.tv.suite .pd-rail button.on { color: #fff; background: linear-gradient(135deg, rgba(150, 30, 70, .65), rgba(90, 16, 40, .65)); box-shadow: inset 0 0 0 1px rgba(227, 194, 122, .55), 0 0 12px rgba(150, 30, 70, .35); }
.flight.tv.suite .pd-rail button.on::before { background: linear-gradient(180deg, #f0d693, #b58a3c); box-shadow: 0 0 8px rgba(227, 194, 122, .8); }
.flight.tv.suite .pd-rail .pd-off { color: #e9a0ad; }
.flight.tv.suite .pd-card, .flight.tv.suite .pd-list button, .flight.tv.suite .pd-r, .flight.tv.suite .pd-player, .flight.tv.suite .pd-tabs button, .flight.tv.suite .pd-chips button, .pd-mini {
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(215, 219, 226, .26), inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 14px rgba(20, 0, 8, .3);
}
.flight.tv.suite .pd-card.clock.wide { background: linear-gradient(135deg, rgba(150, 30, 70, .55), rgba(70, 12, 30, .45) 60%, rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(227, 194, 122, .45); }
.flight.tv.suite .pd-card.clock.wide b { color: #f3dca0; }
.flight.tv.suite .pd-card.dev.on, .flight.tv.suite .pd-card.modes button.on, .flight.tv.suite .pd-tabs button.on, .flight.tv.suite .pd-chips button.on, .flight.tv.suite .pd-seg button.on {
  color: #fff; background: linear-gradient(135deg, #8a2346, #5a1028); box-shadow: inset 0 0 0 1px rgba(227, 194, 122, .7), 0 0 12px rgba(150, 30, 70, .4);
}
.flight.tv.suite .pd-sw { background: rgba(215, 219, 226, .25); }
.flight.tv.suite .pd-sw.on { background: linear-gradient(135deg, #f0d693, #b58a3c); box-shadow: 0 0 10px rgba(227, 194, 122, .5); }
.flight.tv.suite .pd-sw > i { background: #f4f5f7; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.flight.tv.suite .pd-card.dev.on > .ife-ic { color: #f3dca0; }
.flight.tv.suite .pd-card.dev > .ife-ic, .flight.tv.suite .pd-card.big > .ife-ic { color: #d7dbe2; }
.flight.tv.suite .pd-card.big.warn > .ife-ic { color: #e9a0ad; }
.flight.tv.suite .pd-list button.on { box-shadow: inset 0 0 0 .25cqw #e3c27a, 0 0 14px rgba(227, 194, 122, .3); background: linear-gradient(160deg, rgba(150, 30, 70, .45), rgba(255, 255, 255, .04)); }
.flight.tv.suite .pd-mbtn button.big, .flight.tv.suite .pd-ctl button.big { color: #3a0d1b; background: linear-gradient(135deg, #f3dca0, #c9a45e 55%, #a67c34); box-shadow: 0 0 14px rgba(227, 194, 122, .5); }
.flight.tv.suite .pd-mbtn button, .flight.tv.suite .pd-ctl button, .flight.tv.suite .pd-seg button { background: rgba(215, 219, 226, .12); box-shadow: inset 0 0 0 1px rgba(215, 219, 226, .3); }
.flight.tv.suite .pd-top small, .flight.tv.suite .pd-card small, .flight.tv.suite .pd-list small, .flight.tv.suite .pd-group small, .flight.tv.suite .pd-mtxt span { color: #c3c7cf; }
.flight.tv.suite .pd-mtxt small { color: #e3c27a; }
.flight.tv.suite .pd-prog > i, .flight.tv.suite .pn-prog i { background: linear-gradient(90deg, #b58a3c, #f0d693); }
.flight.tv.suite .pd-list em.live { background: #8a2346; }
.flight.tv.suite .pd-list em.vod { background: rgba(215, 219, 226, .25); color: #f6efe6; }
.flight.tv.suite .pd-rows { box-shadow: inset 0 0 0 1px rgba(215, 219, 226, .28); }
.flight.tv.suite .pd-r { border-bottom-color: rgba(215, 219, 226, .14); }
.flight.tv.suite .pd-posters button.on .pv-poster { box-shadow: 0 0 0 .3cqw #e3c27a; }
.flight.tv.suite .pd-note { color: #aeb3bc; }
/* ロック画面の文字は金色、ふちの金属は銀色 */
.flight.tv.suite .pl-lock b { color: #f3dca0; text-shadow: 0 0 18px rgba(227, 194, 122, .35); }
.flight.tv.suite .pad-body { box-shadow:
    0 0 0 1.5px #dfe3ea, 0 0 0 3px #8e96a4, 0 0 0 4px rgba(0, 0, 0, .6),
    inset 0 1.5px 0 rgba(255, 255, 255, .35), inset 0 -3px 6px rgba(0, 0, 0, .8), inset 2px 0 3px rgba(255, 255, 255, .06),
    0 22px 40px rgba(0, 0, 0, .55), 0 6px 12px rgba(0, 0, 0, .4); }
/* 大きな画面の「♪ 曲名」も金色に */
.ife-chip { box-shadow: inset 0 0 0 1px rgba(227, 194, 122, .45); background: rgba(40, 8, 18, .72); }
.ife-chip .ife-ic { color: #e3c27a; }
.flight.tv.suite .pd-art.empty { background: linear-gradient(150deg, #8a2346, #3a0d1b); color: #f3dca0; }
.flight.tv.suite .pd-ctl button.stop { white-space: nowrap; flex: none; }

/* ============ タブレットの大きさを変える角・URL の画面・大きな画面の時計 ============ */
.flight.tv.suite .su-pad.near { width: var(--padw, min(calc(66vh * 1.45), 72vw)); }
.flight.tv.suite .su-pad.resizing { transition: none; }
.pad-grip { display: none; }
.flight.tv.suite .su-pad.near .pad-grip {
  display: block; position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; z-index: 5; cursor: nesw-resize; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 220, 160, .95) 0 5px, rgba(243, 220, 160, .25) 6px 9px, rgba(243, 220, 160, 0) 10px);
  opacity: 0; transition: opacity .2s;
}
.flight.tv.suite.side-r .su-pad.near .pad-grip { right: auto; left: -10px; cursor: nwse-resize; }
.flight.tv.suite .su-pad.near:hover .pad-grip, .flight.tv.suite .su-pad.resizing .pad-grip { opacity: 1; }

.pu-box { display: flex; flex-direction: column; gap: 1cqw; }
.pu-box input {
  width: 100%; min-height: 4.8cqw; padding: 0 1.6cqw; border-radius: 1.4cqw; border: 0; outline: none; font: inherit; font-size: 1.8cqw; color: #f6efe6;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(215, 219, 226, .35);
}
.pu-box input:focus { box-shadow: inset 0 0 0 1.5px #e3c27a, 0 0 12px rgba(227, 194, 122, .25); }
.pu-box input::placeholder { color: #aeb3bc; }
.pu-btns { display: flex; gap: 1cqw; }
.pu-btns button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .8cqw; min-height: 4.6cqw; border: 0; border-radius: 1.4cqw; font-size: 1.7cqw !important;
  color: #3a0d1b; background: linear-gradient(135deg, #f3dca0, #c9a45e 55%, #a67c34);
}
.pu-btns button + button { color: #f6efe6; background: linear-gradient(135deg, #8a2346, #5a1028); box-shadow: inset 0 0 0 1px rgba(227, 194, 122, .6); }
.pu-btns .ife-ic { width: 2.2cqw; height: 2.2cqw; }
.pd-note.warn { color: #f0b4bf !important; }
.flight.tv.suite .pd-list.one { grid-template-columns: 1fr; }
.flight.tv.suite .pd-list.one button { min-height: 4.8cqw; }

.ife-clock {
  position: absolute; inset: 0; z-index: 22; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none;
  background: radial-gradient(80% 70% at 50% 45%, #1a0f14 0%, #07050a 70%); color: #f6efe6;
}
.ife-clock[hidden] { display: none; }
.ife-clock b { font: 200 300px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #f3dca0; text-shadow: 0 0 40px rgba(227, 194, 122, .25); }
.ife-clock b em { margin-left: 18px; font-size: 90px; font-style: normal; color: #c9ced6; }
.ife-clock span { font-size: 34px; letter-spacing: .1em; color: #d7dbe2; }
.ife-clock small { font-size: 24px; letter-spacing: .06em; color: #aeb3bc; }
.fl-screen.clockmode .fl-inner, .fl-screen.clockmode .fl-views, .fl-screen.clockmode .ife-chip { visibility: hidden; }

/* 自分のサイト：タブレット と大きな画面のどちらで見るか */
.pw-move { display: flex; align-items: center; gap: .6cqw; width: auto !important; padding: 0 1.4cqw !important; border-radius: 99px !important; font-size: 1.5cqw !important;
  color: #3a0d1b; background: linear-gradient(135deg, #f3dca0, #c9a45e) !important; }
.pw-move .ife-ic { width: 1.8cqw; height: 1.8cqw; }
.pd-card.dev.web { cursor: default; }
.pw-pick { position: absolute; right: 1cqw; top: 1cqw; display: flex; gap: .4cqw; }
.pw-pick button { min-height: 2.7cqw; padding: 0 .9cqw; border: 0; border-radius: 99px; font-size: 1.25cqw !important; color: #f6efe6; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(227, 194, 122, .55); }
.pw-pick button:hover { background: rgba(227, 194, 122, .3); }
.flight.tv.suite .pd-card.dev.web { grid-column: span 3; }
.flight.tv.suite .pd-ctl button.stop { width: auto; }

/* ============ オットマンの前の面：手元のボタン（5 個・光る） ============ */
.su-otto-panel { display: none; }
.flight.tv.suite .su-otto-panel {
  display: flex; justify-content: center; gap: 1.1vw; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  top: calc(var(--fy1) + 1.2vh); padding: .9vh 1.4vw; border-radius: 12px;
  background: linear-gradient(180deg, #17181c, #0c0d10); box-shadow: 0 0 0 1px #3a3d45, inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .5);
}
.su-otto-panel button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; color: #b9bdc6; }
.su-otto-panel button i {
  display: grid; place-items: center; width: clamp(30px, 2.6vw, 44px); height: clamp(30px, 2.6vw, 44px); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #34363d, #18191d 70%); box-shadow: 0 0 0 1.5px #55585f, inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .6);
  transition: box-shadow .2s, transform .08s;
}
.su-otto-panel button .ife-ic { width: 52%; height: 52%; }
.su-otto-panel button span { font-size: clamp(9px, .7vw, 12px); letter-spacing: .04em; white-space: nowrap; }
.su-otto-panel button:hover i { box-shadow: 0 0 0 1.5px #c9a45e, inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 4px rgba(0, 0, 0, .6); }
.su-otto-panel button.on { color: #f3dca0; }
.su-otto-panel button.on i { color: #f3dca0; box-shadow: 0 0 0 1.5px #e3c27a, 0 0 12px rgba(227, 194, 122, .6), inset 0 1px 0 rgba(255, 255, 255, .15); }
.su-otto-panel button.press i { transform: scale(.9); }
.pd-select { min-height: 3.2cqw; padding: 0 1.2cqw; border-radius: 99px; border: 0; font: inherit; font-size: 1.5cqw; color: #f6efe6; background: rgba(215, 219, 226, .14); box-shadow: inset 0 0 0 1px rgba(215, 219, 226, .3); }
.pd-select option { color: #1c2230; }
.flight.tv.suite .pd-body:has(.pd-rows) { overflow-y: auto; }

/* 手元のボタンは、オットマンにさわったときだけ出る */
.flight.tv.suite .su-otto-panel { opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .35s, transform .35s; }
.flight.tv.suite .su-otto-panel.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.su-otto-zone { display: none; }
.flight.tv.suite .su-otto-zone {
  display: block; position: absolute; z-index: 3; cursor: pointer;
  left: calc(50% - var(--mw) * .44); width: calc(var(--mw) * .88); top: calc(var(--fy1) - 1vh); height: 11vh;
}
.flight.tv.suite .su-otto-zone::after { /* ボタンのある場所を知らせる、うすい金色の線 */
  content: ''; position: absolute; left: 50%; top: 3.2vh; width: 12%; height: 3px; margin-left: -6%; border-radius: 3px;
  background: rgba(227, 194, 122, .45); box-shadow: 0 0 8px rgba(227, 194, 122, .5); transition: opacity .3s;
}
.flight.tv.suite .su-otto-zone.hide::after { opacity: 0; }

/* ============ 機内の安全ビデオ（YouTube の上には何も重ねない。下の帯に題名とスキップ） ============ */
.ife-safe { display: none; }
.ife-media[data-type="safety"] { pointer-events: auto; }
.ife-media[data-type="safety"] .ife-yt { bottom: 40px; height: auto; }
.ife-media[data-type="safety"] .ife-mbar { display: none; }
.ife-media[data-type="safety"] .ife-safe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px;
  background: linear-gradient(180deg, #11161e, #0a0d12); border-top: 1px solid rgba(255, 255, 255, .08); color: #d6dee8; font-size: 12px;
}
.ife-safe span { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ife-safe b { color: #ffd24d; font-size: 13px; }
.ife-safe small { color: #8793a3; overflow: hidden; text-overflow: ellipsis; }
.ife-safe button { flex: none; padding: 5px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 12px; cursor: pointer; }
.ife-safe button:hover { background: rgba(255, 255, 255, .14); }

/* 機内のビデオ：少し間をあけて、ふわっと始める */
.ife-media.reel-in { animation: reel-in 1.2s ease both; }
@keyframes reel-in { from { opacity: 0; } to { opacity: 1; } }
.ife-safe em { font-style: normal; color: #aab6c6; }

/* 地図の帯は、ふだんは出さない（メニューの「地図の表示」から） */
.flight.has-map .fl-views { display: none; }
.ife-view { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.ife-view h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #8f9bab; letter-spacing: .08em; }
.ife-view section > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ife-chip2 { padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: #cfd8e3; font-size: 14px; cursor: pointer; }
.ife-chip2:hover { background: rgba(255, 255, 255, .1); }
.ife-chip2.on { border-color: #ffc83d; background: rgba(255, 200, 61, .16); color: #ffe39a; font-weight: 700; }

/* 飛行中の機体は、名前だけ */
.fl-plane-name { font-size: 13px; color: #e6edf5; }

/* モードを選ぶ画面：ふわっと出して、カードを順に */
.ife.intro { animation: ife-in .8s ease both; }
.ife.intro .ife-mode { animation: ife-card .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i, 0) * .14s); }
.ife.intro .ife-head, .ife.intro .ife-note, .ife.intro .ife-pill { animation: ife-in .7s ease both; animation-delay: .2s; }
@keyframes ife-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ife-card { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ife.intro, .ife.intro * { animation: none !important; } .ife-media.reel-in { animation: none; } }
.ife-chip2 { display: inline-flex; align-items: center; gap: 7px; }
.ife-chip2 .ife-ic.chip { width: 17px; height: 17px; flex: none; }

/* エコノミー・プレミアムエコノミー：環境音を選ぶ欄はなし（機内の音の オン／オフ は座席のボタンで） */
.flight.econ .fl-noise { display: none !important; }

/* ============ 出発前の画面（ファースト以外）：大きな時計と便の案内 ============ */
.fl-pre { position: absolute; inset: 0; z-index: 19; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 60px 90px;
  color: #eaf1f8; background: radial-gradient(1200px 700px at 50% 30%, #173252, #0a1424 70%, #060b14); transition: opacity 1.4s ease; }
.fl-pre[hidden] { display: none; }
.fl-pre.out { opacity: 0; }
.pre-top { position: absolute; left: 70px; right: 70px; top: 50px; display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; letter-spacing: .2em; color: #8fb2d6; }
.pre-top b { font-family: var(--mono); font-size: 30px; letter-spacing: .06em; color: #fff; }
.pre-clock { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pre-clock b { font-family: var(--mono); font-size: 190px; font-weight: 700; line-height: 1; letter-spacing: .02em; color: #fff; text-shadow: 0 6px 40px rgba(90, 170, 255, .35); }
.pre-clock b em { font-style: normal; font-size: .38em; color: #9dc3ea; }
.pre-clock small { font-size: 26px; color: #9dc3ea; }
.pre-route { display: flex; align-items: center; gap: 44px; }
.pre-route span { display: flex; flex-direction: column; align-items: center; }
.pre-route b { font-family: var(--mono); font-size: 64px; letter-spacing: .06em; }
.pre-route small { font-size: 22px; color: #9dc3ea; }
.pre-route i .ife-ic { width: 64px; height: 64px; color: #ffc83d; }
.pre-msg { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.pre-msg b { font-size: 38px; letter-spacing: .08em; color: #ffd978; animation: pre-blink 2.4s ease-in-out infinite; }
.pre-msg small { font-size: 20px; letter-spacing: .12em; color: #b9cde2; }
@keyframes pre-blink { 50% { opacity: .55; } }
.pre-facts { display: flex; gap: 60px; padding-top: 22px; border-top: 1px solid rgba(157, 195, 234, .25); }
.pre-facts div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pre-facts small { font-size: 16px; color: #8fb2d6; letter-spacing: .06em; }
.pre-facts b { font-family: var(--mono); font-size: 34px; }

/* ============ プレミアムエコノミーの席（見本 A'：明るいグレーの樹脂の殻 ＋ 深い緑のまだらの織物。ロゴなし） ============ */
/* 前の席の背中は、シボ（細かい凹凸）と色むらのある樹脂の殻。布は 枕・枕カバー・横のふち・ポケット だけ */
.fl-pe, .pe-head, .pe-tray, .pe-latch, .pe-pocket { display: none; }
.flight.tv.pe {
  --pe-stipple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='3' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='1.6' lighting-color='%23fff' result='l'%3E%3CfeDistantLight azimuth='235' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.2' intercept='.82'/%3E%3CfeFuncG type='linear' slope='.2' intercept='.82'/%3E%3CfeFuncB type='linear' slope='.2' intercept='.82'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)'/%3E%3C/svg%3E");
  --pe-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.14' intercept='.88'/%3E%3CfeFuncG type='linear' slope='.14' intercept='.89'/%3E%3CfeFuncB type='linear' slope='.14' intercept='.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
  --pe-fleck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -0.62'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --pe-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 -0.55'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --pe-weave: repeating-linear-gradient(0deg, rgba(0, 0, 0, .10) 0 1px, rgba(0, 0, 0, 0) 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  --pe-fabric: var(--pe-fleck) 0 0 / 160px, var(--pe-dark) 0 0 / 160px, var(--pe-weave), linear-gradient(180deg, #2f6450, #24523f 70%, #1d4535);
}
/* 奥のとなりの席：まだらの織物 */
.flight.tv.pe .cb-seat { background: var(--pe-fabric); }
.pe-frame, .pe-upper, .pe-knob, .pe-ticket, .pe-foot { display: none; }
.flight.tv.pe { --pe-light: var(--pe-stipple) 0 0 / 180px, linear-gradient(180deg, #ffffff, #eef0f3 55%, #e1e5ea); --pe-darkresin: var(--pe-stipple) 0 0 / 180px, linear-gradient(180deg, #6a6f77, #555a61 50%, #45494f); }

/* 前の席の形：緑の布が殻を包み、上に耳のある枕（殻の後ろ） */
.flight.tv.pe .pe-frame {
  display: block; position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(12px, 2.5vh) - 4px); bottom: -40px; width: calc(var(--mw) + 202px);
}
.flight.tv.pe .pe-frame::before { /* 背もたれの布 */
  content: ''; position: absolute; left: 0; right: 0; top: 56px; bottom: 0; border-radius: 86px 86px 0 0; background: var(--pe-fabric);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .12), inset 0 26px 30px -20px rgba(0, 0, 0, .35), 0 24px 48px rgba(20, 30, 50, .35);
}
.flight.tv.pe .pe-frame::after { /* 夜は暗く */
  content: ''; position: absolute; left: 0; right: 0; top: -20px; bottom: 0; z-index: 4; pointer-events: none; border-radius: 86px 86px 0 0; background: rgba(4, 8, 20, var(--dim, 0)); transition: background 2s;
}
.flight.tv.pe .pe-head {
  display: block; position: absolute; left: 50%; top: 0; width: calc(var(--mw) * .66); height: 112px; transform: translateX(-50%); z-index: 1;
  border-radius: 54px 54px 34px 34px; background: var(--pe-fabric);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .14), inset 0 -10px 14px -6px rgba(0, 0, 0, .35), 0 9px 12px -3px rgba(0, 0, 0, .45), -7px 5px 10px -5px rgba(0, 0, 0, .38), 7px 5px 10px -5px rgba(0, 0, 0, .38);
}
.pe-wing { position: absolute; top: 16px; bottom: 14px; width: 52px; background: var(--pe-fabric); }
.pe-wing.l { left: 0; border-radius: 54px 10px 10px 34px; box-shadow: inset -2px 0 0 rgba(0, 0, 0, .35), inset 0 0 12px rgba(0, 0, 0, .25), 3px 0 6px rgba(0, 0, 0, .25); }
.pe-wing.r { right: 0; border-radius: 10px 54px 34px 10px; box-shadow: inset 2px 0 0 rgba(0, 0, 0, .35), inset 0 0 12px rgba(0, 0, 0, .25), -3px 0 6px rgba(0, 0, 0, .25); }
/* 枕カバー（前の人の枕）：てっぺんをまたいで、向こうへ折り返している */
.flight.tv.pe .pe-cover {
  display: block; position: absolute; left: 50%; top: -6px; width: calc(var(--mw) * .38); height: 80px; transform: translateX(-50%); z-index: 3; border-radius: 12px 12px 5px 5px;
  background: var(--pe-fleck) 0 0 / 160px, var(--pe-weave), linear-gradient(180deg, #f1ece1, #e5dfd1 30%, #d8d1c1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .28), 0 1px 1px rgba(0, 0, 0, .25);
}
.pe-cover { display: none; }
.flight.tv.pe .pe-cover::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); box-shadow: 0 -2px 3px rgba(0, 0, 0, .12); }
.flight.tv.pe .pe-cover::after { content: ''; position: absolute; left: 6px; right: 6px; top: 18px; bottom: 6px; border: 1px dashed rgba(90, 80, 60, .35); border-top: 0; border-radius: 0 0 3px 3px; }

/* 殻：下は濃いグレー、モニターのまわりは明るいグレー。まわりの布との境目に影 */
.flight.tv.pe .fl-seatback {
  top: calc(max(12px, 2.5vh) + 100px); border-radius: 62px 62px 0 0;
  background: var(--pe-darkresin); background-blend-mode: multiply, normal;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 0 5px rgba(0, 0, 0, .14), 0 -3px 14px 5px rgba(0, 0, 0, .22),
    inset 0 10px 14px -6px rgba(0, 0, 0, .28), inset 12px 0 16px -8px rgba(0, 0, 0, .24), inset -12px 0 16px -8px rgba(0, 0, 0, .24);
}
.flight.tv.pe .fl-seatback::before, .flight.tv.pe .fl-seatback::after { display: none; }
.flight.tv.pe .pe-upper {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--mh) + 104px); border-radius: 62px 62px 26px 26px;
  background: var(--pe-light); background-blend-mode: multiply, normal; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .85), 0 4px 8px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.flight.tv.pe .pe-upper::before { /* モニターがはまるくぼみ */
  content: ''; position: absolute; left: 50%; top: 30px; width: calc(var(--mw) + 54px); height: calc(var(--mh) + 54px); transform: translateX(-50%); border-radius: 22px;
  background: linear-gradient(180deg, #d7dbe0, #eceef1); box-shadow: inset 0 4px 8px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .8);
}
/* コートかけ */
.flight.tv.pe .pe-hook { position: absolute; left: 12px; top: 64px; width: 28px; height: 36px; border-radius: 6px;
  background: linear-gradient(180deg, #f5f6f8, #b9bec5 60%, #8c939c); box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, .15); }
.flight.tv.pe .pe-hook::after { content: ''; position: absolute; left: 7px; right: 7px; top: 10px; height: 12px; border: 2px solid #7a818a; border-top: 0; border-radius: 0 0 8px 8px; }
/* イヤホンの穴と USB（明るい殻の上） */
.flight.tv.pe .fl-ports .usb { background: #1a1c1f; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .8); }
.flight.tv.pe .fl-ports .pwr { background: #1a1c1f; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .8); }
.flight.tv.pe .fl-remote { box-shadow: 0 0 0 3px #9aa0a8, 0 4px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1); }
.flight.tv.pe .fl-knob { display: none; }
.flight.tv.pe .fl-notes span { background: rgba(255, 255, 255, .88); }
.flight.tv.pe .fl-shade { top: 0; border-radius: 62px 62px 0 0; }
/* 閉じたテーブル・ロックつまみ（溝つき）・チケットホルダー */
.flight.tv.pe .pe-tray {
  display: block; position: absolute; left: 50%; top: calc(var(--mh) + 182px); width: calc(var(--mw) * .64); height: 150px; transform: translateX(-50%); border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .14), 0 1px 0 rgba(255, 255, 255, .12);
}
.flight.tv.pe .pe-knob {
  display: block; position: absolute; left: 50%; top: calc(var(--mh) + 172px); width: 46px; height: 24px; transform: translateX(-50%); z-index: 1; border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, rgba(255, 255, 255, .35) 1px 2px, rgba(0, 0, 0, 0) 2px 4px) 50% 50% / 26px 13px no-repeat, var(--pe-light);
  background-blend-mode: normal, multiply, normal; box-shadow: 0 3px 5px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.flight.tv.pe .pe-ticket {
  display: block; position: absolute; right: 34px; top: calc(var(--mh) + 112px); width: 70px; height: 46px; z-index: 1; border-radius: 6px;
  background: var(--pe-light); background-blend-mode: multiply, normal; box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.flight.tv.pe .pe-ticket > i { position: absolute; left: 6px; right: 6px; top: 7px; bottom: 10px; border-radius: 2px; background: repeating-linear-gradient(180deg, #fff 0 5px, #eef2f7 5px 6px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.flight.tv.pe .pe-ticket > i::before { content: ''; position: absolute; left: 4px; top: 5px; width: 22px; height: 3px; background: #2b6cb0; box-shadow: 0 6px 0 -.5px #9aa3ad, 0 11px 0 -.5px #9aa3ad; }
.flight.tv.pe .pe-ticket::after { content: ''; position: absolute; inset: 3px; border-radius: 4px; background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* 物入れ：緑のキルトの革（金色のふち）と、のぞく機内誌・安全のしおり */
.flight.tv.pe .pe-pocket { display: block; position: absolute; left: 50px; right: 50px; top: calc(var(--mh) + 356px); height: 150px; }
.pe-mags { position: absolute; left: 30px; right: 30px; top: -18px; height: 40px; }
.pe-mags i { position: absolute; bottom: 0; height: 40px; border-radius: 2px 2px 0 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .25); }
.pe-mags i:nth-child(1) { left: 6%; width: 32%; background: linear-gradient(180deg, #2c4f7c, #1e3a5e); transform: rotate(-3deg); }
.pe-mags i:nth-child(2) { left: 32%; width: 30%; height: 34px; background: linear-gradient(180deg, #f5f1e6, #e2dccd); transform: rotate(2deg); }
.pe-mags i:nth-child(2)::after { content: 'SAFETY'; position: absolute; left: 8px; top: 6px; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; color: #b23a3a; }
.pe-mags i:nth-child(3) { left: 60%; width: 26%; height: 28px; background: linear-gradient(180deg, #c9d3dc, #aeb9c4); transform: rotate(-1deg); }
.pe-flap { position: absolute; inset: 0; border-radius: 12px 12px 0 0;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0) 0 17px, rgba(0, 0, 0, .28) 17px 18px, rgba(255, 255, 255, .10) 18px 19px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0 17px, rgba(0, 0, 0, .28) 17px 18px, rgba(255, 255, 255, .10) 18px 19px),
    radial-gradient(120% 90% at 50% 10%, #3a7058, #25523f 70%, #1d4434);
  box-shadow: inset 0 0 0 4px #c9a36a, inset 0 0 0 5px rgba(0, 0, 0, .2), 0 -2px 6px rgba(0, 0, 0, .35); }
.pe-flap::after { content: ''; position: absolute; left: 10px; right: 10px; top: 10px; border-top: 1.5px dashed rgba(255, 255, 255, .25); }
/* 足置き（たたんだバー） */
.flight.tv.pe .pe-foot {
  display: block; position: absolute; left: 70px; right: 70px; top: calc(var(--mh) + 540px); height: 30px; border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, rgba(0, 0, 0, 0) 2px 12px), var(--pe-darkresin); background-blend-mode: normal, multiply, normal;
  box-shadow: 0 -2px 0 rgba(255, 255, 255, .12), 0 4px 8px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .18);
}

/* 窓側の席：窓のある側は、白い壁と丸い窓 */
.flight.tv.pe .fl-pe { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pe-arm { display: none; }
.pe-wall { display: none; position: absolute; top: 12vh; bottom: -2vh; width: 16vw;
  background: var(--pe-stipple, none) 0 0 / 180px, linear-gradient(90deg, #f3f4f6, #e2e5e9); background-blend-mode: multiply, normal; box-shadow: 0 0 30px rgba(0, 0, 0, .18); }
.pe-wall.l { left: 0; border-radius: 0 60px 0 0; }
.pe-wall.r { right: 0; border-radius: 60px 0 0 0; }
.pe-win { position: absolute; left: 50%; top: 10vh; width: 8vw; height: 13vw; transform: translateX(-50%); border-radius: 50% / 38%;
  background: radial-gradient(ellipse at 50% 30%, #ffffff, #bfdcf2 45%, #8fbfe4); box-shadow: 0 0 0 10px #f7f8f9, 0 0 0 12px #cfd4d9, inset 0 0 20px rgba(0, 0, 0, .12); }
.pe-warm { display: none; }
.flight.tv.pe.pe-win-l .pe-wall.l, .flight.tv.pe.pe-win-r .pe-wall.r { display: block; }
.flight.tv.pe.pe-win-l .cb-seat.l, .flight.tv.pe.pe-win-r .cb-seat.r { display: none; }

/* ============ プレミアムエコノミー：テーブル・お飲み物・パンフレット ============ */
.pe-table, .pe-items { display: none; }
.flight.tv.pe .pe-knob { cursor: pointer; pointer-events: auto; transition: transform .15s; }
.flight.tv.pe .pe-knob:hover { transform: translateX(-50%) translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 200, 61, .6), inset 0 1px 0 rgba(255, 255, 255, .95); }
.flight.tv.pe .pe-pocket { cursor: pointer; pointer-events: auto; }
.flight.tv.pe .pe-pocket:hover .pe-mags i { transform: translateY(-6px); }
.pe-mags i { transition: transform .2s; }
/* 開いたテーブル：背もたれから手前に倒れた、明るいグレーの板（手前ほど広い） */
.flight.tv.pe .pe-table {
  display: block; position: absolute; left: 50%; top: calc(var(--mh) + 330px); width: calc(var(--mw) * .86); height: 170px; z-index: 2;
  transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; transition: transform .45s cubic-bezier(.3, 1.2, .5, 1);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  background: var(--pe-stipple) 0 0 / 180px, linear-gradient(180deg, #d9dde2 0%, #eef0f3 40%, #f7f8fa 100%); background-blend-mode: multiply, normal;
}
.flight.tv.pe .pe-table::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); }
.flight.tv.pe.pe-open .pe-table { transform: translateX(-50%) scaleY(1); }
.flight.tv.pe.pe-open .pe-tray { background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .18)); } /* テーブルが外れたあとのくぼみ */
.flight.tv.pe .pe-items { display: block; position: absolute; left: 50%; top: calc(var(--mh) + 330px); width: calc(var(--mw) * .86); height: 170px; transform: translateX(-50%); z-index: 3; pointer-events: none; }
.pe-napkin { position: absolute; left: 20%; top: 58px; width: 110px; height: 34px; border-radius: 6px; transform: rotate(-4deg);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, rgba(0, 0, 0, 0) 2px 6px), linear-gradient(180deg, #ffffff, #e9ecef); box-shadow: 0 4px 6px rgba(0, 0, 0, .18); }
.pe-drink { position: absolute; left: 58%; top: -30px; width: 72px; height: 96px; animation: pe-put .5s ease both; }
.pe-drink svg { width: 100%; height: 100%; overflow: visible; }
@keyframes pe-put { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.pe-drink .steam { animation: pe-steam 2.4s ease-in-out infinite; }
@keyframes pe-steam { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: .8; transform: translateY(-3px); } }
.pe-drink .fizz circle { animation: pe-fizz 1.8s linear infinite; }
.pe-drink .fizz circle:nth-child(2) { animation-delay: .6s; } .pe-drink .fizz circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes pe-fizz { from { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }

/* お飲み物のサービス（モニターの画面の中・1600×900 の座標） */
.fl-svc { position: absolute; inset: 0; z-index: 24; display: flex; flex-direction: column; gap: 22px; padding: 50px 70px; overflow: auto; scrollbar-width: none;
  color: #eef3f8; background: radial-gradient(1200px 700px at 50% 0%, #1d3552, #0b1422 70%); }
.fl-svc[hidden] { display: none; }
.fl-svc.in { animation: reel-in .8s ease both; }
.svc-head b { display: block; font-size: 44px; letter-spacing: .06em; color: #ffd978; }
.svc-head span { font-size: 22px; color: #9dc3ea; }
.fl-svc h3 { margin: 0 0 10px; font-size: 22px; color: #9dc3ea; font-weight: 700; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.svc-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff; cursor: pointer; }
.svc-grid button:hover { background: rgba(255, 200, 61, .14); border-color: #ffc83d; }
.svc-ico { width: 60px; height: 76px; } .svc-ico svg { width: 100%; height: 100%; }
.svc-grid b { font-size: 22px; } .svc-grid small { font-size: 16px; color: #9fb2c6; }
.svc-foot { display: flex; justify-content: center; padding-bottom: 10px; }
.svc-foot button { padding: 12px 34px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); background: none; color: #dfe7ef; font-size: 22px; cursor: pointer; }

/* 物入れのパンフレット（紙の冊子） */
.pe-book { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 3vh 3vw; background: rgba(8, 12, 20, .55); backdrop-filter: blur(3px); }
.pe-book[hidden] { display: none; }
.pb-box { width: min(1080px, 94vw); height: min(720px, 90vh); display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #f6f1e6; color: #2a2620;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: pe-put .35s ease both; }
.pb-tabs { display: flex; gap: 4px; padding: 10px 12px 0; background: #e7ddca; }
.pb-tabs button { padding: 10px 18px; border: 0; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .4); color: #5a4f3f; font-size: 14px; font-weight: 700; cursor: pointer; }
.pb-tabs button.on { background: #f6f1e6; color: #2a2620; }
.pb-x { margin-left: auto; background: none !important; font-size: 22px !important; line-height: 1; }
.pb-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 22px; }
.pb-spread { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: calc(100% - 50px); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); background: #fffdf8; }
.pb-page { padding: 28px 32px; font-size: 15px; line-height: 1.8; }
.pb-page + .pb-page { border-left: 1px solid #e3dac8; box-shadow: inset 12px 0 18px -14px rgba(0, 0, 0, .25); }
.pb-page h4 { margin: 0 0 4px; font-size: 24px; }
.pb-en { margin: 0 0 12px; font-family: var(--mono); letter-spacing: .2em; color: #8a7a5f; }
.pb-box { padding: 10px 14px; border-radius: 8px; background: #efe6d3; }
.pb-cover { height: 100%; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 28px; border-radius: 4px; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(10, 30, 50, .55)), linear-gradient(180deg, #5aa0e0 0%, #a9d2f2 45%, #f4e3c3 62%, #7e9bc6 63%, #3d5e93 100%); }
.pb-cover small { letter-spacing: .3em; } .pb-cover b { font-size: 54px; letter-spacing: .1em; } .pb-cover em { font-style: normal; } .pb-cover span { font-size: 20px; }
.pb-list { margin: 10px 0; padding: 0; list-style: none; } .pb-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #d9ceb8; } .pb-list small { color: #8a7a5f; }
.pb-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; } .pb-dl dt { color: #8a7a5f; } .pb-dl dd { margin: 0; font-weight: 700; }
.pb-note { font-size: 13px; color: #7a6c55; }
.pb-nav { display: flex; justify-content: center; align-items: center; gap: 18px; padding-top: 12px; font-size: 13px; color: #7a6c55; }
.pb-nav button, .pb-dochead button { padding: 8px 16px; border-radius: 99px; border: 1px solid #cdbfa5; background: #fffdf8; color: #2a2620; cursor: pointer; }
.pb-nav button:disabled { opacity: .4; cursor: default; }
.pb-safety h4, .pb-dest h4 { margin: 0 0 14px; font-size: 22px; } .pb-safety h4 small, .pb-dest h4 small { font-size: 12px; color: #8a7a5f; letter-spacing: .15em; margin-left: 8px; }
.pb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pb-cards div { padding: 12px 14px; border-radius: 10px; background: #fffdf8; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.pb-cards svg { width: 100%; height: 110px; background: #eef3f8; border-radius: 8px; }
.pb-cards b { display: block; margin-top: 8px; font-size: 16px; } .pb-cards small { color: #8a7a5f; } .pb-cards p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; }
.pb-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pb-docs button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 10px; border: 1px solid #e0d5c0; background: #fffdf8; text-align: left; cursor: pointer; color: #2a2620; }
.pb-docs button:hover { border-color: #b88d3c; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.pb-thumb { font-style: normal; padding: 2px 8px; border-radius: 4px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.pb-docs small { color: #8a7a5f; }
.pb-doc { height: 100%; display: flex; flex-direction: column; gap: 8px; }
.pb-dochead { display: flex; align-items: center; gap: 12px; } .pb-dochead b { flex: 1; } .pb-dochead a { font-size: 13px; color: #2b6cb0; }
.pb-doc iframe { flex: 1; width: 100%; border: 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #e0d5c0; }
.pb-credit { color: #8a7a5f; }
@media (max-width: 760px) { .pb-spread { grid-template-columns: 1fr; } .pb-cards { grid-template-columns: 1fr 1fr; } }
/* テーブルを開いたら、視線を下へ（前の席ごと少し上にずらして、テーブルと飲み物が見えるように） */
.flight.tv.pe .fl-seatback, .flight.tv.pe .pe-frame { transition: translate .7s cubic-bezier(.3, .8, .3, 1); } /* 横の位置（まん中寄せ）は動かさない */

.flight.tv.pe .fl-seatback { height: calc(100vh + 320px); }
.flight.tv.pe .pe-frame { bottom: -340px; }

/* テーブルの上の機内誌・安全のしおり（押すと開く） */
.pe-mini { position: absolute; top: 34px; width: 92px; height: 120px; padding: 10px 8px; border: 0; border-radius: 3px; cursor: pointer; pointer-events: auto; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; transform-origin: 50% 100%; transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 10px rgba(0, 0, 0, .25), inset -3px 0 0 rgba(0, 0, 0, .12); }
.pe-mini b { font-size: 13px; letter-spacing: .06em; } .pe-mini small { font-size: 10px; opacity: .85; }
.pe-mini.mag { left: 4%; transform: rotate(-6deg); color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(10, 30, 50, .5)), linear-gradient(180deg, #5aa0e0, #a9d2f2 45%, #f4e3c3 62%, #7e9bc6 63%, #3d5e93); }
.pe-mini.safe { left: 13%; top: 46px; transform: rotate(4deg); color: #b23a3a; background: linear-gradient(180deg, #f7f3ea, #e6dfcf); }
.pe-mini:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 10px 16px rgba(0, 0, 0, .3), 0 0 0 2px rgba(255, 200, 61, .7); }
.pe-napkin { left: 30%; }
.pe-mini { top: -6px; height: 104px; }
.pe-mini.safe { top: 4px; }
/* 夜の暗さ：重ねる板ではなく、座席そのものの明るさを下げる（形がずれて黒い板が見えないように） */
.flight.tv.pe .pe-frame::after { display: none; }
.flight.tv.pe .pe-frame { filter: brightness(calc(1 - var(--dim, 0) * .95)); transition: translate .7s cubic-bezier(.3, .8, .3, 1), filter 2s; }
.flight.tv.pe .fl-shade { left: 0; right: 0; top: 0; bottom: 0; border-radius: 62px 62px 0 0; }
/* テーブルを開いたら、視線を下へ（前の席ごと少し上にずらして、テーブルと飲み物が見えるように） */
.flight.tv.pe.pe-open .fl-seatback, .flight.tv.pe.pe-open .pe-frame { translate: 0 calc(-1 * min(240px, var(--mh) * .55)); }

/* テーブルは少し下げて、物入れからのぞく冊子の頭が、テーブルの向こうに見えるように（押すと開く） */
.flight.tv.pe .pe-table, .flight.tv.pe .pe-items { top: calc(var(--mh) + 372px); }
.flight.tv.pe.pe-open .pe-pocket { z-index: 1; }
.flight.tv.pe.pe-open .pe-mags i { box-shadow: 0 -1px 2px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .25); }
/* 窓側の席の白い壁と窓は、いったん出さない（左右とも、となりの席のぼかし） */
.flight.tv.pe.pe-win-l .pe-wall.l, .flight.tv.pe.pe-win-r .pe-wall.r { display: none; }
.flight.tv.pe.pe-win-l .cb-seat.l, .flight.tv.pe.pe-win-r .cb-seat.r { display: block; }


/* ============ ビジネスクラスの個室（.biz） ============
   場面は bizscene.js の SVG（a：高い壁・ワインレッド、b：濃いグレー・暖かい光・木目、c：白い殻・青い帯・赤い物入れ）。
   列ごとに種類が変わる。その上に、本物のモニターの画面をぴったり重ねる（位置は fitBiz で --bx・--by・--mw・--mh） */
.fl-biz { display: none; }
.flight.tv.biz { background: #15171b; }
.flight.tv.biz .fl-biz { display: block; position: absolute; inset: 0; overflow: hidden; }
.flight.tv.biz.bz-r .fl-biz { transform: scaleX(-1); } /* 右の窓側の席は、左右反対 */
.fl-biz .bz-svg { position: absolute; display: block; }
.flight.tv.biz.bz-mid .bz-win { display: none; }      /* まん中の席：窓なし */
/* 夜の暗さ（--dim）。光るもの（光の帯・読書灯・赤い物入れ）は暗くしない */
.fl-biz .bz-dim { opacity: calc(var(--dim, 0) * .85); transition: opacity 2s; }
.fl-biz .glow { opacity: calc(var(--dim, 0) * 1.35); transition: opacity 2s; }
.fl-biz .bz-read { opacity: 0; transition: opacity .6s; }
.flight.tv.biz.reading .bz-read { opacity: .35; }
.flight.tv.biz.reading .bz-dim { opacity: calc(var(--dim, 0) * .5); }
.flight.tv.biz .fl-cabin, .flight.tv.biz .fl-notes, .flight.tv.biz .fl-knob,
.flight.tv.biz .fl-ports, .flight.tv.biz .fl-shade { display: none; }
/* モニター：場面の中のモニターの枠に、画面だけを重ねる */
.flight.tv.biz .fl-seatback {
  left: var(--bx); top: var(--by); transform: none; width: var(--mw); height: var(--mh);
  border-radius: 0; background: none; box-shadow: none;
}
.flight.tv.biz .fl-seatback::before, .flight.tv.biz .fl-seatback::after { display: none; }
.flight.tv.biz .fl-bezel { left: 0; top: 0; transform: none; width: var(--mw); height: var(--mh); padding: 0; border-radius: 2px; background: #03060d; box-shadow: none; }
.flight.tv.biz .fl-bezel::after { inset: 0; border-radius: 2px; }
.flight.tv.biz .fl-screen { left: 0; top: 0; border-radius: 2px; }
/* 手元のボタン：手前の座席の上に置いてある */
.flight.tv.biz .fl-remote {
  top: calc(100vh - var(--by) - 92px); left: calc(50vw - var(--bx)); transform: translateX(-50%) perspective(900px) rotateX(24deg);
  box-shadow: 0 0 0 3px #7d838b, 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.flight.tv.biz .fl-remote-tip { top: calc(100vh - var(--by) - 150px); left: calc(50vw - var(--bx)); }

/* ============ 機内メニュー（2026-10-05 作り直し：上の帯＋上のタブ。1600×900 の画面として作る） ============
   いつも見える上の帯（便・区間・進み具合・到着まで）と、5 つのタブ（フライト情報・マップ・表示モード・照明とサウンド・設定）。
   入口は画面の右上の「メニュー」。特定の航空会社の画面をまねず、大きな押しやすいボタンと短い言葉で作る */
.ife-fab {
  left: auto; right: 28px; top: 24px; transform: none; flex-direction: row; gap: 10px; padding: 10px 24px 10px 18px;
  border-radius: 99px; background: rgba(14, 17, 23, .82); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.ife-fab .ife-ic { width: 26px; height: 26px; padding: 0; border-radius: 0; color: #ffc83d; background: none; box-shadow: none; }
.ife-fab span { font-size: 18px; letter-spacing: .08em; text-shadow: none; }
.ife-fab:hover { border-color: #ffc83d; }
.ife-fab:hover .ife-ic { transform: none; }
.ife-fsback2 { display: none; }
.flight.fs-ok .ife-fsback2 {
  display: inline-flex; align-items: center; gap: 8px; position: absolute; right: 200px; top: 24px; z-index: 6; padding: 10px 22px;
  border-radius: 99px; background: rgba(14, 17, 23, .82); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: inherit; font-size: 17px; cursor: pointer;
}
.flight.fs-ok .ife-fsback2 .ic { width: 22px; height: 22px; }
.fl-screen.media .ife-fsback2, .fl-screen.clockmode .ife-fsback2 { visibility: hidden; }

.ife { display: flex; flex-direction: column; grid-template: none; background: #0e1117; }
.ife-status {
  flex: none; display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 48px;
  background: #12151c; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 18px; color: #c9cfda;
}
.ife-status b { color: #fff; font-family: var(--mono, monospace); letter-spacing: .04em; }
.ife-st-bar { flex: 1; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ife-st-bar i { display: block; height: 100%; border-radius: 9px; background: #ffc83d; }
.ife-st-left { color: #ffc83d; font-weight: 700; }
.ife-nav { flex: none; display: flex; align-items: stretch; gap: 4px; height: 78px; padding: 0 36px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ife-nav button {
  display: flex; align-items: center; gap: 10px; padding: 0 24px; border: 0; border-bottom: 4px solid transparent; background: none;
  color: #a9b2c1; font: inherit; font-size: 20px; cursor: pointer; transition: color .15s;
}
.ife-nav button .ic { width: 24px; height: 24px; }
.ife-nav button:hover { color: #fff; }
.ife-nav button.now { color: #fff; font-weight: 700; border-bottom-color: #ffc83d; }
.ife-nav .ife-close { margin-left: auto; }
.ife-body { flex: 1; padding: 34px 56px 40px; overflow: hidden; }
.ife-h { margin: 0 0 26px; font-size: 26px; font-weight: 500; letter-spacing: .02em; }
.ife-note { margin: 28px 0 0; text-align: left; font-size: 16px; color: #8f98aa; }

/* 表示モード：横に並んだ 3 つの大きな選択ボタン */
.ife-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; }
.ife-mode {
  width: auto; min-height: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 10px 20px; align-items: start;
  padding: 30px 28px; border-radius: 14px; border: 2px solid transparent; background: #1b2030; color: #e9ebf0; text-align: left; box-shadow: none; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ife-mode > .ic { grid-row: span 2; width: 52px; height: 52px; color: #c9cfda; }
.ife-mode b { font-size: 26px; color: #fff; letter-spacing: .04em; }
.ife-mode small { font-size: 16px; line-height: 1.7; color: #a9b2c1; }
.ife-mode:hover { transform: none; border-color: rgba(255, 200, 61, .45); }
.ife-mode.on { border-color: #ffc83d; background: #2a2516; box-shadow: none; }
.ife-mode.on > .ic { color: #ffc83d; }
.ife.intro .ife-mode { animation: ife-card .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i, 0) * .12s); }

/* フライト情報：到着までの時間・フェーズ（まっすぐな線を離陸〜着陸に区切る）・数値 */
.ife-fi-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.ife-fi-left { display: flex; align-items: baseline; gap: 14px; }
.ife-fi-left b { font: 700 72px/1 var(--mono, monospace); color: #fff; }
.ife-fi-left span { font-size: 20px; color: #a9b2c1; }
.ife-fi-phase { font-size: 18px; color: #a9b2c1; }
.ife-fi-phase b { color: #ffc83d; }
.ife-ph { position: relative; height: 112px; margin: 34px 12px 0; }
.ife-ph .seg { position: absolute; top: 56px; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .14); }
.ife-ph .seg.done { background: #ffc83d; }
.ife-ph .lbl { position: absolute; top: 78px; transform: translateX(-50%); font-size: 16px; color: #8f98aa; white-space: nowrap; }
.ife-ph .lbl.now { color: #ffc83d; font-weight: 700; }
.ife-ph .pl { position: absolute; top: 42px; transform: translateX(-50%); line-height: 0; color: #fff; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)); }
.ife-ph .pl .ic { width: 34px; height: 34px; transform: rotate(45deg); }
.ife-ph .ev { position: absolute; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 15px; color: #c9cfda; white-space: nowrap; }
.ife-ph .ev .ife-ic { width: 22px; height: 22px; }
.ife-ph .ev small { font-size: 15px; }
.ife-ph .ev::after { content: ''; position: absolute; left: 50%; top: 30px; width: 1px; height: 22px; background: rgba(255, 255, 255, .25); }
.ife-ph .ev.past { color: #6f7889; }
.ife-ph-ends { display: flex; justify-content: space-between; margin-top: 2px; }
.ife-ph-ends b { display: flex; flex-direction: column; font-size: 26px; letter-spacing: .06em; }
.ife-ph-ends b:last-child { text-align: right; }
.ife-ph-ends small { font-size: 15px; font-weight: 400; color: #a9b2c1; letter-spacing: 0; }
.ife-facts { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.ife-facts div { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 12px; background: #171b24; }
.ife-facts div > .ic { width: 34px; height: 34px; color: #cdb487; }
.ife-facts small { font-size: 15px; }
.ife-facts b { margin-top: 4px; font-size: 34px; }

/* 照明・サウンド／設定：まとまりごとのリスト（2 列） */
.ife-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.ife-grp h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #cdb487; letter-spacing: .04em; }
.ife-grp h4 .ic { width: 22px; height: 22px; }
.ife-grp .ife-row { min-height: 74px; margin-bottom: 8px; padding: 12px 24px; border: 0; border-radius: 10px; background: #171b24; font-size: 18px; }
.ife-grp .ife-row > span { min-width: 0; }
.ife-grp .ife-seg { flex-wrap: wrap; justify-content: flex-end; }
.ife-grp .ife-select { min-width: 220px; }

/* マップ：種類ごとのボタン */
.ife-view { max-width: none; }
.ife-view h3 { font-size: 16px; color: #cdb487; }
.ife-chip2 { padding: 12px 20px; font-size: 17px; }
.ife-chip2 .ic { width: 20px; height: 20px; }