:root{
  --blue:#0a7cff; --sky:#00b4ff; --deep:#08306b;
  --bg:#f3f7ff; --card:#fff; --soft:#eef5ff;
  --ink:#0f223a; --muted:#5b6b86;
  --shadow:0 16px 40px rgba(8,48,107,.16);
  --r:18px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Helvetica Neue","Arial",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
.container{max-width:1040px;margin:auto;margin-top:0;padding:40px 18px;padding-top:0}
.section{margin:26px 0}

.hero{position:relative;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;overflow:hidden}
.hero.compact{padding-bottom:0}
.hero-shapes{position:absolute;inset:-120px;background:
radial-gradient(260px at 20% 20%,rgba(255,255,255,.22),transparent 60%),
radial-gradient(360px at 80% 30%,rgba(255,255,255,.18),transparent 62%)}
.hero-inner{max-width:1040px;margin:auto;padding:44px 18px 22px;display:grid;gap:18px}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:900}
.tagline{opacity:.9;margin:2px 0 0}
.nav{display:flex;gap:10px}
.btn{border-radius:999px;padding:10px 18px;font-weight:700}
.btn.ghost{background:#fff;color:var(--blue)}
.btn.primary{background:var(--blue);color:#fff}

.hero-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.hero-card{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center}
.hero-card .ico{font-size:22px}
.hero-card .title{font-weight:800}

.wave{display:block;width:100%;height:120px}
.wave path{fill:var(--bg)}

.head{display:flex;gap:12px;align-items:end;margin-bottom:12px}
.kicker{font-size:.75rem;letter-spacing:.18em;color:var(--blue);font-weight:800}
h2{margin:0;font-size:2rem;color:var(--deep)}

.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card.soft{background:var(--soft)}
.card.pop{background:linear-gradient(180deg,#fff,var(--soft))}

.list .row{display:flex;gap:10px;align-items:center;padding:8px 0}
.date{color:var(--muted);font-size:.9rem}
.tag{font-size:.7rem;background:#e6efff;color:#2453ff;border-radius:999px;padding:2px 8px}
.tag.new{background:#ffe8e8;color:#d33}
.txt{flex:1}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.muted{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{background:#e6efff;color:#2453ff;border-radius:999px;padding:6px 10px;font-size:.8rem}

.spots{display:grid;gap:8px}
.spot{display:flex;gap:8px;align-items:center}

.stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.st{background:#fff;border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}
.no{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;border-radius:10px;padding:6px 8px;font-weight:800}

.footer{background:#0a2a6a;color:#fff}
.foot{display:flex;justify-content:space-between;gap:12px}
.small{opacity:.85;font-size:.85rem}

/* 背景の装飾がクリックを邪魔しないようにする */
.hero-shapes{
  pointer-events: none;
}

/* クリックできる本体を前面に */
.hero-inner{
  position: relative;
  z-index: 1;
}

/* 運行情報バー */
.opbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;
  background:rgb(0 0 0 / 50%);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  cursor:pointer;            /* ← これが無いと手にならない環境がある */
}

.opbar:hover{ transform: translateY(-1px); }
.opbar:active{ transform: translateY(0); }
.opbar:focus-visible{
  outline:3px solid rgba(255,255,255,.75);
  outline-offset:2px;
}

.op-label{
  font-weight:900;
  letter-spacing:.08em;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.16);
}

.op-title{
  font-weight:900;
}

.op-updated{
  margin-left:auto;
  font-size:.85rem;
  opacity:.9;
}

/* 状態別の目立つ色（ベースは青サイトに馴染むように） */
.opbar.is-normal{ background: rgba(0, 200, 120, .22); border-color: rgba(0,200,120,.35); }
.opbar.is-delay{  background: rgba(255, 170, 0, .22); border-color: rgba(255,170,0,.35); }
.opbar.is-suspend{background: rgba(255, 70, 70, .22); border-color: rgba(255,70,70,.35); }
.opbar.is-info{   background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }

/* =========================
   クイック3カード：高さ揃え＆整列
   ========================= */

/* 3つ並びの親（すでにある場合は上書き） */
.quick-grid{
  align-items: stretch;         /* 高さを揃える */
}

/* 3カード共通：同じ高さ・中央寄せ・押せる見た目 */
.quick-card{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  min-height: 78px;             /* ここで縦幅を揃える（好みで調整OK） */
  padding: 16px 18px;
  border-radius: 18px;

  cursor: pointer;              /* PCで手カーソル */
}

/* 中身（タイトル/サブ）を縦に積む */
.quick-card > div{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* タイトル/サブの行間を安定させる */
.qc-title{ line-height: 1.2; }
.qc-sub  { line-height: 1.2; opacity: .95; }

/* アイコンの見た目を安定（絵文字/画像どちらでも） */
.qc-ico{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  font-size: 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
}

/* =========================
   「運行情報」カード専用：きれいに整列
   - 運行情報カードに class="traffic" を付けられるなら最強
   ========================= */

/* もし運行情報カードに class="traffic" を付けている場合 */
.quick-card.traffic{
  justify-content: space-between;
}

/* 右側（平常運行 / 更新時刻）を横並びにする想定 */
.quick-card.traffic .right{
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}

/* ステータスを目立たせる（平常運行/遅延など） */
.quick-card.traffic .status{
  font-weight: 900;
  letter-spacing: .02em;
}

/* 更新時刻は小さめ */
.quick-card.traffic .updated{
  font-size: .9rem;
  opacity: .92;
}

/* =========================
   「読み込み中…」がズレる/小さい問題を抑える
   （spanやsmallが混在してても崩れにくく）
   ========================= */
.quick-card *{
  box-sizing: border-box;
}

.quick-card .muted,
.quick-card small{
  opacity: .92;
}

h1 {
  margin:5px 0;
}

/* =========================
   運行情報バー：中央寄せ修正
   ========================= */

/* 1) 運行情報バーが置かれている“外側”を中央に寄せる */
.operation-wrap,
.operation-area,
.operation-container,
#operation,
#operationInfo,
.operation {
  max-width: 1040px;          /* サイトのcontainer幅に合わせる */
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;          /* containerと同じ左右余白 */
  padding-right: 18px;
}

/* 2) バー本体が横いっぱいに伸びるようにする */
.operation-wrap .card,
.operation-area .card,
.operation-container .card,
#operation .card,
#operationInfo .card,
.operation .card,
.operation-bar,
.operation-panel {
  width: 100%;
}

/* 3) hero内に置いている場合、左寄りになりやすいので念のため */
.hero .operation-wrap,
.hero .operation-area,
.hero .operation-container,
.hero #operation,
.hero #operationInfo,
.hero .operation {
  width: 100%;
}

/* 4) もし“position:absolute”でズレてる場合の保険 */
.operation-wrap,
.operation-area,
.operation-container,
#operation,
#operationInfo,
.operation {
  position: relative;
  left: auto;
  right: auto;
}

/* =========================
   FIX: operation bar centering & click issues
   ========================= */

/* wave / hero decorations should not block clicks */
.wave,
.wave *{
  pointer-events: none;
}

.hero-shapes,
.hero-bg-shapes{
  pointer-events: none;
}

/* ensure hero content stays on top */
.hero-inner{
  position: relative;
  z-index: 2;
}

/* buttons / links should clearly be clickable */
.nav a,
.btn{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   FIX: operation bar horizontal centering
   ========================= */

/* common container width (align with main container) */
.opbar,
.ops-card,
.operation-bar,
#operationBar{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* prevent flex parent from shrinking the bar */
.hero,
.hero-inner{
  flex-wrap: wrap;
}

/* if inserted right after header */
header + #operationBar{
  padding-left: 18px;
  padding-right: 18px;
}


/* ===== Operation Status Bar ===== */
.opbar{
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.opbar-inner{
  display:flex;
  align-items:stretch;
  min-height: 44px;
  width:100%;
}

.op-left{
  width: 160px;
  padding: 8px 12px;
  background:z;        /* 赤いラベル部分 */
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}

.op-title{
  font-weight: 900;
  letter-spacing: .04em;
}

.op-sub{
  font-size: 12px;
  opacity: .9;
}

.op-main{
  flex:1;
  background: #3c3c3c;        /* グレー帯 */
  color:#fff;
  padding: 8px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.op-msg{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
}

.op-icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
}

.op-text{
  line-height: 1.2;
}

.op-updated{
  font-size: 12px;
  opacity: .9;
  white-space: nowrap;
}

/* status colors (必要ならバー全体の雰囲気を変える用) */
.op-normal .op-msg{ color:#fff; }   /* 画像寄せなら赤固定でもOK */
.op-delay  .op-msg{ color:#ffe600; }
.op-suspend .op-msg{ color:#ffff00; }
.op-info   .op-msg{ color:#ffe600; }

/* ヘッダー内の配置を崩さないため */
.hero .hero-inner .opbar{
  max-width: 1040px;
  margin-left:auto;
  margin-right:auto;
}

@media screen and (max-width:768px) {
  .op-left{
    width:100%;
    flex-direction: row;
    gap:10px;
    align-items: center;
    padding-top:0;
  }

  .opbar-inner {
    display: block;
  }

  .op-title, .op-sub {
    display: flex;
  }

  .op-sub {
    height:0.8em;
    line-height: 0.8;
    padding:0;
    font-size: .75rem;
  }

  .op-main{
    display: block;
  }
}