/* =========================================================
 * LCD 画面（素材 PPTX の寸法・色をそのまま写したもの）
 * 単位 px ＝ 素材の pt。画面全体は 860 × 484。
 *
 * 書体の割り当て
 *   日本語：種別・路線図・その他 ＝ BIZ UDPゴシック ／ 次駅（駅名）＝ BIZ UDゴシック
 *   英語  ：すべて BIZ UDPゴシック
 * BIZ UDゴシックは Windows に入っているものを使う（Google Fonts 版は漢字の
 * 字送りが 1.675 倍に広く、素材と字間が合わないため使わない）。
 * 入っていない環境では BIZ UDPゴシック で代用する（漢字の字形・字幅は同じ）。
 * ========================================================= */
@font-face { font-family: 'LCD UD'; font-weight: 700; src: local('BIZ UDGothic Bold'), local('BIZUDGothic-Bold'), local('BIZ UDゴシック Bold'); }
@font-face { font-family: 'LCD UD'; font-weight: 400; src: local('BIZ UDGothic'), local('BIZUDGothic-Regular'), local('BIZ UDゴシック'); }
@font-face { font-family: 'LCD UDP'; font-weight: 700; src: local('BIZ UDPGothic Bold'), local('BIZUDPGothic-Bold'), local('BIZ UDPゴシック Bold'); }
@font-face { font-family: 'LCD UDP'; font-weight: 400; src: local('BIZ UDPGothic'), local('BIZUDPGothic-Regular'), local('BIZ UDPゴシック'); }
.lcd {
  --lcd-p: 'LCD UDP', 'BIZ UDPGothic', sans-serif;
  --lcd-ud: 'LCD UD', 'LCD UDP', 'BIZ UDPGothic', sans-serif;
  position: absolute; left: 0; top: 0;
  width: 860px; height: 484px;
  transform-origin: 0 0;
  background: #fff; overflow: hidden;
  font-family: var(--lcd-p); font-weight: 700; color: #000;
  -webkit-font-smoothing: antialiased;
}
.lcd * { box-sizing: border-box; }
#lcdBody { position: absolute; inset: 0; z-index: 1; }
#lcdHeader { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ---------- ヘッダー ---------- */
.h-band  { position: absolute; left: 0; top: 0; width: 860px; height: 31.2px; background: #D9D9D9; }
.h-grad  { position: absolute; left: 0; top: 31.2px; width: 860px; height: 119.1px;
           background: linear-gradient(180deg, #878686 0%, #8F8D8D 20%, #A8A6A6 55%, #CAC8C8 100%); }
.h-line1 { position: absolute; left: 0; top: 150.3px; width: 860px; height: 4.5px; background: #1392CB; }
.h-line2 { position: absolute; left: 0; top: 154.8px; width: 860px; height: 4.5px; background: #D0CECE; }

.h-badge {
  position: absolute; left: 8.5px; top: 7.8px; width: 143px; height: 44.4px;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 30px; white-space: pre;
  text-shadow: 2.1px 2.1px 2.4px rgba(0, 0, 0, .45);
}
.h-badge span { display: inline-block; line-height: 1; }
.h-dest { position: absolute; left: 164px; top: 29.5px; transform: translateY(-50%); font-size: 29px; line-height: 1; white-space: nowrap; }

.h-pfx { position: absolute; right: 701px; bottom: 346px; font-size: 32px; line-height: 1; text-align: right; white-space: nowrap; }
.h-pfx.two { line-height: 1.13; bottom: 344px; }
.h-num { position: absolute; left: 167.1px; top: 60px; width: 77.7px; height: 77.7px; }
.h-num svg, .rm-num svg { width: 100%; height: 100%; display: block; }
.h-name { position: absolute; left: 200px; top: 50px; width: 660px; height: 96px; }
.h-name span { position: absolute; left: 0; top: 0; line-height: 96px; font-size: 80px; white-space: pre; transform-origin: left center; }
.h-name.ja span, .h-name.kana span { font-family: var(--lcd-ud); }
.h-name.ja span { letter-spacing: 6px; margin-right: -6px; }
.h-name.kana span { letter-spacing: -3px; }
.h-yuki { position: absolute; right: 11px; bottom: 344px; font-size: 36px; line-height: 1; letter-spacing: -1.5px; }

/* ---------- 路線図 ---------- */
.rm { position: absolute; inset: 0; }
.rm-passed { position: absolute; top: 331.3px; height: 39.8px; background: linear-gradient(180deg, #A6A6A6 0%, #767171 32%, #A6A6A6 100%); }
.rm-bar { position: absolute; top: 331.3px; height: 39.8px; }
.rm-dot { position: absolute; top: 336.4px; width: 28.1px; height: 29.6px; border-radius: 50%; background: #D9D9D9; }
.pass { position: absolute; width: 22px; height: 30px; }
.chev { position: absolute; width: 37.5px; height: 43.6px; z-index: 2; }
.vname { position: absolute; width: 53.3px; line-height: 1; }
.vname span { position: absolute; left: 0; width: 100%; text-align: center; }
.vname.gray { color: #808080; }
.rm-num { position: absolute; top: 299.2px; width: 28.3px; height: 28.3px; }
.rm-xfer { position: absolute; display: flex; align-items: center; gap: 3px; height: 20px; font-size: 12px; white-space: nowrap; }
.rm-xfer svg { width: 19.4px; height: 19.4px; flex: none; }
.rm-xfer.gray { color: #8C8C8C; }
.rm-notice {
  position: absolute; left: 40px; top: 453.8px; width: 780px; height: 25.5px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; white-space: nowrap;
  background: linear-gradient(90deg, #F2F2F2 0%, #ACACAC 16%, #7A7777 32%, #7A7777 68%, #ACACAC 84%, #F2F2F2 100%);
}
.rm-notice span { display: inline-block; }
.rm-notice.up { top: 425px; }
.rm-ticker { position: absolute; left: 0; top: 459px; width: 860px; height: 25px; background: #262626; color: #fff; font-size: 15px; overflow: hidden; white-space: nowrap; }
.rm-ticker span { display: inline-block; padding-left: 100%; line-height: 25px; animation: lcd-tick 20s linear infinite; }
@keyframes lcd-tick { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- 帯（のりかえ・ドア・運行情報） ---------- */
.bandbar {
  position: absolute; left: 0; top: 159.3px; width: 860px; height: 49px;
  display: flex; align-items: center; justify-content: center;
  background: #D9D9D9; border-top: 1.2px solid #3A3A3A; border-bottom: 1.5px solid #1A1A1A;
  font-size: 30px; white-space: nowrap;
}
.bandbar span { display: inline-block; }
.door-band { font-size: 31px; }
.info-band { background: #F4B183; font-size: 26px; letter-spacing: .45em; text-indent: .45em; }

/* ---------- のりかえ ---------- */
.xl { position: absolute; left: 0; top: 208.3px; width: 860px; height: 275.7px; display: flex; align-items: center; justify-content: center; }
.xl-inner { display: flex; flex-direction: column; align-items: flex-start; }
.xl-row { display: flex; align-items: center; transform-origin: left center; }
.xl-row svg { flex: none; }
.xl-ja, .xl-en { white-space: nowrap; line-height: 1.15; }
.xl-dir { margin-left: .75em; }
.xl-ja small { font-size: .8em; margin-left: .45em; }
.xl.one .xl-row svg { width: 71px; height: 71px; margin-right: 20px; }
.xl.one .xl-ja { font-size: 31px; }
.xl.one .xl-en { font-size: 21px; margin-top: 5px; }
.xl.few .xl-inner { gap: 16px; }
.xl.few .xl-row svg { width: 48px; height: 48px; margin-right: 14px; }
.xl.few .xl-ja { font-size: 26px; }
.xl.few .xl-en { font-size: 17px; margin-top: 2px; }
.xl.many .xl-inner { display: grid; grid-template-columns: repeat(2, auto); column-gap: 64px; row-gap: 18px; }
.xl.many .xl-row svg { width: 50px; height: 50px; margin-right: 14px; }
.xl.many .xl-ja { font-size: 27px; }
.xl.many .xl-en { font-size: 17px; margin-top: 2px; }

/* ---------- ドア ---------- */
.dr { position: absolute; left: 0; top: 208.3px; width: 860px; height: 275.7px; }
.dr-side { position: absolute; top: 0; height: 100%; background: #F2F2F2; }
.dr-side.l { left: 0; width: 274px; }
.dr-side.r { left: 584px; width: 276px; }
.dr-frame { position: absolute; left: 274px; top: 0; width: 310px; height: 100%; background: #fff; border-left: 1px solid #A0A0A0; border-right: 1px solid #A0A0A0; }
.dr-strip { position: absolute; top: 0; width: 5px; height: 100%; background: #FFF200; }
.dr-strip.l { left: 23px; }
.dr-strip.r { left: 282px; }
/* 開口部（x 302.5〜556）。扉はこの中で左右へ引き込まれ、外へ出た部分は見えない */
.dr-ap { position: absolute; left: 302.5px; top: 0; width: 253.5px; height: 100%; overflow: hidden; z-index: 1; }
.dr-out { position: absolute; inset: 0; background: linear-gradient(180deg, #DCE5EB 0%, #DCE5EB 60%, #B4B4B4 60%, #9C9C9C 100%); }
.dr-out i { position: absolute; left: 0; right: 0; top: 65%; height: 6px; background: #F2D21B; }
.dr-leaf { position: absolute; top: 0; height: 100%; background: #808080; }
.dr-leaf.l { left: 0; width: 126.25px; }
.dr-leaf.r { left: 126.25px; width: 127.25px; }
/* 戸先のゴム（閉じると中央で黒白黒の縦線になる） */
.dr-leaf.l::after, .dr-leaf.r::before { content: ''; position: absolute; top: 0; width: 8.75px; height: 100%; }
.dr-leaf.l::after { right: 0; background: linear-gradient(90deg, #000 0 34%, #fff 34% 62%, #000 62% 100%); }
.dr-leaf.r::before { left: 0; background: linear-gradient(270deg, #000 0 34%, #fff 34% 62%, #000 62% 100%); }
.dr-win { position: absolute; top: 20.7px; width: 76px; height: 129px; background: #fff; border: 3px solid #000; border-radius: 13px; box-shadow: 0 0 0 5px #fff; }
.dr-leaf.l .dr-win { left: 20.5px; }
.dr-leaf.r .dr-win { left: 28.25px; }
.dr-handle { position: absolute; top: 40.7px; width: 13px; height: 169px; border: 3.5px solid #6E6E6E; border-radius: 9px; }
.dr-handle.l { left: 7px; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dr-handle.r { left: 289px; border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dr-arrow { position: absolute; top: 81px; width: 70px; height: 106px; }
.dr-arrow.l { left: 190px; background: linear-gradient(90deg, #FF9900 0%, #FF9900 58%, #FFE9AE 100%);
              clip-path: polygon(0 50%, 52% 0, 52% 24%, 100% 24%, 100% 76%, 52% 76%, 52% 100%); }
.dr-arrow.r { left: 599px; background: linear-gradient(270deg, #FF9900 0%, #FF9900 58%, #FFE9AE 100%);
              clip-path: polygon(100% 50%, 48% 0, 48% 24%, 0 24%, 0 76%, 48% 76%, 48% 100%); }
.dr-caution { position: absolute; top: 245.7px; height: 30px; display: flex; align-items: center; justify-content: center; background: #FFD700; font-size: 20px; }
.dr-caution.l { left: 0; width: 274px; }
.dr-caution.r { left: 584px; width: 276px; }
.dr-noentry { position: absolute; left: 358.75px; top: 70px; width: 140px; height: 140px; border-radius: 50%; background: #E60012; box-shadow: 0 0 0 4px #fff; }
.dr-noentry i { position: absolute; left: 15%; right: 15%; top: 50%; height: 17%; transform: translateY(-50%); background: #fff; }
.dr-warn { position: absolute; left: 350.75px; top: 66px; width: 156px; height: 137px; z-index: 2; }
.dr-noentry { z-index: 2; }
.dr-arrow { z-index: 2; }

/* ---------- アニメーション ---------- */
@keyframes lcd-blink { 0% { opacity: 1; } 70% { opacity: 0; } }
@keyframes lcd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lcd-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* こちら側のドアが開きます：扉が左右に開き、矢印が外へ出てから点滅 */
.dr-this .dr-leaf.l { animation: dr-open-l 1.5s cubic-bezier(.55, 0, .25, 1) .7s both; }
.dr-this .dr-leaf.r { animation: dr-open-r 1.5s cubic-bezier(.55, 0, .25, 1) .7s both; }
@keyframes dr-open-l { from { transform: translateX(0); } to { transform: translateX(-127px); } }
@keyframes dr-open-r { from { transform: translateX(0); } to { transform: translateX(128px); } }
.dr-this .dr-arrow.l { animation: dr-arrow-l 1.5s ease-out .7s both, lcd-blink 1s steps(1, end) 2.4s infinite; }
.dr-this .dr-arrow.r { animation: dr-arrow-r 1.5s ease-out .7s both, lcd-blink 1s steps(1, end) 2.4s infinite; }
@keyframes dr-arrow-l { from { opacity: 0; transform: translateX(30px); } 30% { opacity: 1; } to { opacity: 1; transform: translateX(0); } }
@keyframes dr-arrow-r { from { opacity: 0; transform: translateX(-30px); } 30% { opacity: 1; } to { opacity: 1; transform: translateX(0); } }

/* 反対側のドアが開きます：扉は閉じたまま、進入禁止の印が出て点滅 */
.dr-opposite .dr-noentry { animation: lcd-pop .45s cubic-bezier(.3, 1.6, .5, 1) .3s both, lcd-blink 1.2s steps(1, end) 1.4s infinite; }

/* 扉にご注意ください：開いた扉が閉まり、注意の印が点滅 */
.dr-closing .dr-leaf.l { animation: dr-close-l 1.4s cubic-bezier(.55, 0, .25, 1) .5s both; }
.dr-closing .dr-leaf.r { animation: dr-close-r 1.4s cubic-bezier(.55, 0, .25, 1) .5s both; }
@keyframes dr-close-l { from { transform: translateX(-127px); } to { transform: translateX(0); } }
@keyframes dr-close-r { from { transform: translateX(128px); } to { transform: translateX(0); } }
.dr-closing .dr-warn { animation: lcd-pop .4s cubic-bezier(.3, 1.6, .5, 1) .2s both, lcd-blink 1s steps(1, end) 1.9s infinite; }

/* ---------- ご挨拶・運行情報 ---------- */
.msg { position: absolute; left: 0; top: 159.3px; width: 860px; height: 324.7px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.msg-ja { font-size: 31px; line-height: 1.32; }
.msg-en { font-size: 25px; font-weight: 400; margin-top: 34px; }
.info-txt { position: absolute; left: 46px; right: 46px; top: 230px; font-size: 28px; line-height: 1.55; }

/* ---------- 号車・出口案内 ---------- */
.cars { position: absolute; inset: 0; }
.cars-rail { position: absolute; left: 16px; top: 249.3px; width: 819px; height: 1.5px; background: #000; }
.cars-pf { position: absolute; left: 46px; top: 251.5px; width: 762.75px; height: 110.3px;
           clip-path: polygon(22.5px 0, calc(100% - 20.25px) 0, 100% 100%, 0 100%);
           background: linear-gradient(180deg, #8C8C8C 0%, #A9A9A9 45%, #C4C4C4 88%, #E2E2E2 94%, #9A9A9A 100%); }
.cars-yellow { position: absolute; left: 34px; right: 32px; top: 8px; border-top: 2.5px dashed #FFF200; }
.cars-pfedge { position: absolute; left: 46px; top: 361.8px; width: 762.75px; height: 21px; background: #A6A6A6; }
.car { position: absolute; top: 195.3px; height: 54px; display: flex; align-items: center; justify-content: center;
       background: linear-gradient(180deg, #E4E4E4 0%, #B0B0B0 100%); border: 1px solid #4A4A4A; border-bottom: 4px solid #1F8FD8;
       font-size: 34px; font-weight: 400; }
.car.nose-l { clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.car.nose-r { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 14px, 100% 100%, 0 100%); }
.car.me { top: 172.8px; height: 76.5px; z-index: 2; color: #fff; font-size: 44px; border-color: #001F6B;
          background: linear-gradient(180deg, #0B3AA8 0%, #00268C 40%, #0A3FB5 100%); border-bottom-color: #1E7BFF; }
.cars-arrow { position: absolute; top: 210.3px; width: 52px; height: 28px; background: #FF0000;
              clip-path: polygon(0 50%, 42% 0, 42% 28%, 100% 28%, 100% 72%, 42% 72%, 42% 100%); }
.cars-arrow.r { clip-path: polygon(100% 50%, 58% 0, 58% 28%, 0 28%, 0 72%, 58% 72%, 58% 100%); }
.pict { position: absolute; top: 292px; width: 54px; height: 54px; background: #fff; border: 2px solid #000; display: flex; align-items: center; justify-content: center; }
.pict img { width: 46px; height: 46px; object-fit: contain; }
.exitlbl { position: absolute; top: 348.3px; width: 84px; height: 37px; background: #FFC000; border: 1px solid #000; display: flex; align-items: center; justify-content: center; font-size: 24px; z-index: 2; }
.cars-demo { position: absolute; right: 14px; bottom: 10px; font-size: 13px; font-weight: 400; color: #8C8C8C; }

/* 路線図：現在位置の矢印を点滅 */
.chev { animation: lcd-blink 1s steps(1, end) infinite; }

/* 号車案内：進行方向の矢印を動かし、この車両を明滅 */
.cars-arrow { animation: cars-nudge-l 1s ease-in-out infinite; }
.cars-arrow.r { animation-name: cars-nudge-r; }
@keyframes cars-nudge-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-9px); } }
@keyframes cars-nudge-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
.car.me { animation: car-me 1s steps(1, end) infinite; }
@keyframes car-me { 0% { filter: none; } 65% { filter: brightness(1.55); } }

/* 画面の切り替わり：本文は画面が替わったときだけ、上部は文字だけをふわっと出す */
#lcdBody.enter > * { animation: lcd-in .28s ease-out both; }
#lcdHeader.enter .h-name, #lcdHeader.enter .h-pfx, #lcdHeader.enter .h-dest,
#lcdHeader.enter .h-yuki, #lcdHeader.enter .h-badge span { animation: lcd-in .22s ease-out both; }

/* ---------- 全線対応で追加 ---------- */
.h-dest small { font-size: .76em; margin-right: .1em; }
.h-dest.thr { font-size: 22px; }
.vname span.rot { transform: rotate(90deg); }
.rm-xfer svg + svg { margin-left: -1px; }
.xl-row svg + svg { margin-left: 6px; }

/* 種別変更のお知らせ（素材スライド39） */
.chg { position: absolute; inset: 0; }
.chg-ja { position: absolute; left: 0; top: 182px; width: 860px; text-align: center; font-size: 32px; line-height: 1.2; white-space: nowrap; }
.chg-en { position: absolute; left: 0; top: 236px; width: 860px; text-align: center; font-size: 17px; white-space: nowrap; }
.chg-ja span, .chg-en span { display: inline-block; }
.chg em { font-style: normal; }
.chg-bar { position: absolute; top: 375px; height: 31px; }
.chg-bar.a { left: 86px; width: 355px; }
.chg-bar.b { left: 441px; width: 364px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.chg-dot { position: absolute; left: 426px; top: 375.5px; width: 30px; height: 30px; border-radius: 50%; background: #fff; z-index: 1; }
.chg-st { position: absolute; left: 341px; top: 296px; width: 200px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.chg-st b { font-size: 32px; }
.chg-st span { font-size: 18px; }
.chg-badge { position: absolute; top: 354px; width: 155px; height: 66px; border-radius: 9px; z-index: 1;
             display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
             color: #fff; text-shadow: 2px 2px 2.4px rgba(0, 0, 0, .45); white-space: pre; }
.chg-badge.a { left: 177px; }
.chg-badge.b { left: 544px; }
.chg-badge b { font-size: 30px; }
.chg-badge span { display: inline-block; font-size: 20px; }