@font-face {
    font-family: 'Nimbus Sans';
    src: url('fonts/NimbusSanL-Reg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 基本設定 */
:root {
    --company-color: #cc0000;
    --separator-color: #cc0000;
    --line-color: #cc0000;
    --type-bg: #cc0000;
    --type-text: #ffffff;
    --type-text-shadow: none; /* 種別文字のアウトライン用 */
    --car-bg-color: #383838;  /* 号車表示の背景色 */
    --numbering-radius: 8px;
    --timebox-width: 50px;    /* 所要時間ボックス用 */
    --timebox-height: 32px;
    --timebox-radius: 0px;
    --line-fill-percent: 94%;
    --chevron-color-1: #e60012;
    --chevron-color-2: #0066cc;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    color: #fff;
    overflow-x: hidden;
}

.en, .en-st-name, .time-label, .time-box, .st-id, .line-code, .st-num, .car-en-text, .car-number .number, .lower-number-box {
    font-family: 'Nimbus Sans', sans-serif, 'Meiryo';
    font-weight: bold;
}

#lcd-monitor {
    width: 800px;
    height: 450px;
    background-color: #ffffff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(1.3);
    transform-origin: top center;
    margin-bottom: 150px;
    user-select: none;
    -webkit-user-select: none;
}

.top-color-bar {
    height: 5px;
    background: 
        linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(0,0,0,0.25)),
        linear-gradient(to right, rgba(0,0,0,0) 0%, var(--company-color) 15%, var(--company-color) 85%, rgba(0,0,0,0) 100%);
    width: 100%;
}

.header-info {
    display: flex;
    align-items: center;
    height: 36px;
    background: linear-gradient(to bottom, #b5b5b5 0%, #ffffff 100%);
    padding: 0 15px;
    position: relative;
}

.train-type-wrapper {
    position: relative;
    width: 130px;
    height: 36px;
    background-image: 
        linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0.15) 100%),
        linear-gradient(var(--type-bg), var(--type-bg));
    background-color: var(--type-bg);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    transition: background-image 0.3s;
}

.train-type {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--type-text);
    /* ここで文字自体に縁取りをつける */
    text-shadow: var(--type-text-shadow);
    font-weight: bold;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.train-type .inner { display: inline-block; white-space: nowrap; transform-origin: center; }
.train-type.kanji .inner, .train-type.kana .inner { font-size: 22px; }
.train-type.en .inner { font-size: 18px; }
.train-type.active { opacity: 1; }

.destination-wrapper {
    position: relative;
    height: 36px;
    margin-left: 15px;
    margin-right: 15px;
    flex-grow: 1;
    overflow: hidden;
}

.destination {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #222;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.destination .inner { display: inline-block; white-space: nowrap; transform-origin: left center; }
.destination.kanji .inner, .destination.kana .inner { font-size: 24px; }
.destination.en .inner { font-size: 20px; }
.destination.active { opacity: 1; }

/* === 号車表示の共通・切り替え設定 === */
.car-number-wrapper {
    position: relative;
    width: 90px;
    height: 36px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    flex-shrink: 0;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.car-number {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.car-number.active { opacity: 1; }
.car-number .number-wrap { display: inline-flex; justify-content: center; align-items: center; width: 28px; transition: background-color 0.3s; }
.car-number .number { font-size: 24px; font-weight: bold; display: inline-block; transform-origin: center; }
.car-number.kanji .unit, .car-number.kana .unit { font-size: 12px; margin-left: 1px; font-weight: bold; transform: translateY(3px); }
.car-en-text { display: flex; flex-direction: column; font-size: 10px; font-weight: bold; line-height: 1.1; text-align: left; }
.car-number.en .number { font-size: 24px; font-weight: bold; }

/* スタイル1：全体を塗る */
.car-number-wrapper.style-full {
    background-color: var(--car-bg-color);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.car-number-wrapper.style-full .car-number { padding-right: 8px; color: #ffffff; }
.car-number-wrapper.style-full .car-number.en { padding-right: 0; }
.car-number-wrapper.style-full .car-en-text { margin-right: 4px; }

/* スタイル2：数字のみ塗り、その他は背景透過（黒文字） */
.car-number-wrapper.style-number-only {
    background-color: transparent;
    box-shadow: none;
}
.car-number-wrapper.style-number-only .car-number { color: #222; }
.car-number-wrapper.style-number-only .number-wrap {
    background-color: var(--car-bg-color);
    color: #fff; /* 背景がある数字部分は白文字 */
    border-radius: 4px;
    height: 28px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    margin-right: 4px;
}
.car-number-wrapper.style-number-only .car-number.en .number-wrap {
    margin-right: 0;
    margin-left: 6px; /* Car No. の横に少し隙間 */
}


/* 次駅案内エリア */
.next-station-area {
    display: flex;
    align-items: center;
    height: 110px;
    padding-left: 60px;
    background-color: #ffffff;
}

.next-label-wrapper {
    position: relative;
    width: 90px;
    height: 35px;
    margin-right: 10px;
    align-self: flex-end;
    margin-bottom: 25px;
    overflow: hidden;
}

.next-label {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}
.next-label .inner { display: inline-block; white-space: nowrap; transform-origin: left bottom; }
.next-label.active { opacity: 1; }

.station-number-box {
    border: 5px solid var(--line-color);
    border-radius: var(--numbering-radius);
    width: 75px;
    height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    flex-shrink: 0;
}
.station-number-box .line-code { font-size: 16px; font-weight: bold; line-height: 1.1; color: #000; }
.station-number-box .st-num { font-size: 32px; font-weight: bold; line-height: 1; color: #000; }

.station-name-wrapper {
    position: relative;
    height: 85px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    margin-right: 20px;
    flex-grow: 1;
    overflow: hidden;
}

.station-name {
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #000;
    opacity: 0;
    pointer-events: none;
    overflow: visible;
}
.station-name .inner { 
    display: inline-block; 
    white-space: nowrap; 
    width: max-content;
    flex-shrink: 0;
    transform-origin: center; }
.station-name.kanji .inner, .station-name.kana .inner { font-size: 80px; letter-spacing: 8px; }
.station-name.en .inner { font-size: 65px; letter-spacing: 2px; }
.station-name.active { opacity: 1; transform: translateY(0) scaleY(1); }
.station-name.exit-down { animation: animExitDown 0.7s ease-in forwards; }
.station-name.enter-down { animation: animEnterDown 0.7s ease-out forwards; }

@keyframes animExitDown {
    0% { transform: translateY(0) scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: translateY(5px) scaleY(0); transform-origin: bottom; opacity: 0; }
}

@keyframes animEnterDown {
    0% { transform: translateY(-15px) scaleY(0); transform-origin: top; opacity: 0; }
    100% { transform: translateY(0) scaleY(1); transform-origin: top; opacity: 1; }
}

.separator-bar {
    height: 5px;
    background: 
        linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(0,0,0,0.25)),
        linear-gradient(to right, rgba(0,0,0,0) 0%, var(--separator-color) 15%, var(--separator-color) 85%, rgba(0,0,0,0) 100%);
    width: 100%;
}

.main-content {
    flex-grow: 1;
    background-color: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
}

.route-map-grid {
    display: grid;
    padding-left: 25px;
    grid-template-columns: 48px repeat(8, 1fr) 10px;
    grid-template-rows: 120px 42px 40px; 
    column-gap: 8px;
    align-items: center;
    justify-items: center;
    width: 100%;
    padding-top: 5px;
    position: relative;
}

/* === ナンバリング非表示時、駅名を下へ詰めるための調整 === */
.route-map-grid.hide-numbering {
    grid-template-rows: 162px 0px 40px;
}
.route-map-grid.hide-numbering .st-name-vert {
    height: 162px;
}
.route-map-grid.hide-numbering .st-id {
    display: none;
}

.grid-item { position: relative; z-index: 2; }
.row-1 { grid-row: 1; align-self: flex-end; }
.row-2 { grid-row: 2; align-self: center; } 
.row-3 { grid-row: 3; }

.st-name-vert { 
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: 100%;
    padding-bottom: 0px; 
}

.st-name-inner.ja-st-name {
    writing-mode: vertical-rl; 
    text-orientation: upright; 
    font-size: 26px; 
    font-weight: bold; 
    letter-spacing: 0px; 
    color: #000;
    white-space: nowrap;
    transform-origin: center bottom;
    margin-bottom: 2px;
}

.st-name-inner.en-st-name {
    writing-mode: horizontal-tb; 
    font-size: 20px; 
    font-weight: bold; 
    color: #000;
    white-space: nowrap;
    position: absolute;
    left: 45%; 
    bottom: 2px; 
    transform-origin: left bottom;
}

.st-id { 
    font-size: 14px; 
    font-weight: bold; 
    color: #000;
    line-height: 1;
}

.lower-number-box {
    border: 3px solid var(--line-color);
    border-radius: var(--numbering-radius);
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}
.lower-number-box .lower-line-code { font-size: 10px; font-weight: bold; line-height: 1; color: #000; }
.lower-number-box .lower-st-num { font-size: 16px; font-weight: bold; line-height: 1; color: #000; }

.grey-text, .grey-text .st-name-inner, .grey-text .lower-line-code, .grey-text .lower-st-num { color: #999 !important; }
.grey-text .lower-number-box { border-color: #999 !important; }

/* ベースとなるグレーライン */
.time-bar-bg {
    position: absolute;
    bottom: 0;
    left: 25px;
    width: calc(100% - 25px);
    height: 40px;
    background-color: #888888;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
}

/* 伸び縮みするカラーライン */
.time-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--line-fill-percent);
    height: 100%;
    background-color: var(--line-color);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.25) 100%);
}

/* 先端の鋭角を作るための白い三角形マスク(上と下) */
.time-bar-mask-top {
    position: absolute;
    top: -1px; /* 上にはみ出させる */
    left: -0.5px;
    width: 0;
    height: 0;
    border-top: 21px solid #ffffff; /* 20pxから21pxに拡大 */
    border-right: 16px solid transparent; /* 15pxから16pxに拡大 */
    z-index: 2;
}
.time-bar-mask-bottom {
    position: absolute;
    bottom: -1px; /* 下にはみ出させる */
    left: -0.5px;
    width: 0;
    height: 0;
    border-bottom: 21px solid #ffffff;
    border-right: 16px solid transparent;
    z-index: 2;
}

.time-label { 
    color: #fff; 
    font-size: 13px; 
    font-weight: bold; 
    align-self: flex-end;
    justify-self: start;
    margin-left: 20px;
    margin-bottom: 2px;
}

/* 所要時間図形（幅と高さも変数で動的に制御） */
.time-box {
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(0,0,0,0.15) 100%), #ebebeb;
    color: #000;
    width: var(--timebox-width);
    height: var(--timebox-height);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: var(--timebox-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.white-chevron {
    width: 16px;
    height: 16px;
    border-top: 6px solid #fff;
    border-right: 6px solid #fff;
    transform: rotate(-135deg);
}

.time-box-bg {
    position: absolute;
    width: var(--timebox-width);
    height: var(--timebox-height);
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(0,0,0,0.15) 100%), #ebebeb;
    border-radius: var(--timebox-radius);
    z-index: 1;
    transition: width 0.3s, height 0.3s, border-radius 0.3s;
}

/* === 現在地矢印 (赤・青) とコンテナ === */
.current-chevron-container {
    position: relative;
    width: 50px;
    height: 40px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.chevron-large {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-top: 12px solid var(--chevron-color-1, #e60012);
    border-right: 12px solid var(--chevron-color-1, #e60012);
    transform: rotate(-135deg);
    margin-left: 15px;
    filter: drop-shadow(1px 0px 0px #fff) drop-shadow(-1px 0px 0px #fff) drop-shadow(0px 1px 0px #fff) drop-shadow(0px -1px 0px #fff);
}

.chevron-blink {
    animation: blinkChevronCustom 2s infinite;
}

/* 2つの変数の色を交互に切り替える */
@keyframes blinkChevronCustom {
    0%, 49.9% { border-color: var(--chevron-color-1); }
    50%, 100% { border-color: var(--chevron-color-2); }
}

.footer-note { 
    position: absolute; 
    bottom: 5px; 
    right: 15px; 
    font-size: 11px; 
    color: #000; 
    font-weight: bold; 
    line-height: 1.4;
    text-align: right;
    transition: opacity 0.5s;
}
.footer-note.fade-out { opacity: 0; }

/* ▼ ニュース・運行情報レイヤーのスタイル */
#ad-news-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0; 
    z-index: 20; 
}

#ad-news-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;  
}

/* 右下のページ数表示スタイル */
#ad-page-indicator {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #555555;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 8px;
    border-radius: 4px;
}

.ad-title {
    background-color: #ececec;
    color: #000;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #a3a3a3;
    padding: 5px;
}

.ad-content {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #111111;
    line-height: 1.4;
    flex-grow: 1;
}

/* 緊急停車レイヤーのスタイル */
#emergency-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffe800;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 背景の薄い白い!マーク */
.em-bg-icon {
    position: absolute;
    width: 350px;
    height: 350px;
    opacity: 0.6; 
    z-index: 101;
    pointer-events: none;
}

/* 文字エリア */
.em-text-box {
    position: relative;
    z-index: 102;
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1.3;
}

.em-red {
    font-size: 80px;
    color: #cc0000; /* 赤文字 */
}

.em-black {
    font-size: 65px;
    padding-left: 50px;
    color: #000000; /* 黒文字 */
}

.em-red-en {
    font-size: 55px;
    font-family: 'Nimbus Sans', sans-serif, 'Meiryo';;
    color: #cc0000; /* 英語の赤文字 */
    margin-top: 20px;
}

/* === 設定パネルUI === */
#control-panel { width: 1040px; background-color: #2b2b2b; border: 1px solid #444; border-radius: 8px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
#control-panel h2 { font-size: 18px; border-bottom: 2px solid #009b65; padding-bottom: 8px; margin-bottom: 15px; color: #4de0a7; }
.panel-section { background-color: #222; padding: 12px 15px; border-radius: 6px; margin-bottom: 15px; }
.panel-section h3 { font-size: 14px; color: #ddd; margin-bottom: 10px; }
.panel-row { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.panel-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.panel-grid-3 h4 { font-size: 13px; color: #4de0a7; margin-bottom: 5px; margin-top:0; }
label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ccc; margin-bottom: 4px; }
input[type="text"], input[type="number"], select { background-color: #444; border: 1px solid #666; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; }
button { background-color: #009b65; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
button:hover { background-color: #00b878; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 6px; text-align: center; border: 1px solid #444; }
th { background-color: #333; color: #ddd; }

/* フッター全体のコンテナ設定 */
footer {
    padding: 6px 10px;
    font-size: 11px;
    color: #999;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

footer p {
    margin: 0;
}

footer #site-version {
    color: #aaa;
}

/* リンク要素のデザイン */
footer .footer-link {
    color: #aaa;
    text-decoration: none;
}

/* リンクにマウスを乗せた際の動き */
footer .footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* 画面幅に応じた全体縮小 */
#app-wrapper {
    width: 1080px; /* パネル等を含む基準幅 */
    margin: 0 auto;
    transform-origin: top center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    overflow-x: hidden; /* 横スクロールバーを出さない */
}

/* 文字はみ出し処理縮小時に中央配置 */
.line-code, .st-num, .lower-line-code, .lower-st-num, .st-id {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}