.crdb {
  --crdb-red: #d71920;
  --crdb-red-dark: #9f1015;
  --crdb-ink: #17202a;
  --crdb-muted: #65717c;
  --crdb-line: #dce2e7;
  --crdb-bg: #f4f6f8;
  background: #fff;
  border: 1px solid var(--crdb-line);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(20, 30, 40, .09);
  color: var(--crdb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Noto Sans SC", sans-serif;
  margin: 1.5rem auto;
  max-width: 1180px;
  overflow: hidden;
}

.crdb *, .crdb *::before, .crdb *::after { box-sizing: border-box; }
.crdb__header { align-items: center; background: linear-gradient(120deg, #9f1015, #d71920 56%, #ee3f43); color: #fff; display: flex; justify-content: space-between; padding: 22px 26px; }
.crdb__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 4px; opacity: .76; }
.crdb__title { color: #fff; font-size: clamp(21px, 3vw, 30px); line-height: 1.25; margin: 0; }
.crdb__clock { align-items: flex-end; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.crdb__clock-label { font-size: 11px; opacity: .78; }
.crdb__clock-time { font-size: 25px; font-weight: 800; letter-spacing: .04em; }
.crdb__clock-date { font-size: 12px; opacity: .85; }

.crdb__search { background: var(--crdb-bg); border-bottom: 1px solid var(--crdb-line); padding: 20px 24px; }
.crdb__fields { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(170px, 1fr) 38px minmax(170px, 1fr) minmax(132px, .72fr) auto; }
.crdb__field { color: #38434d; display: flex; flex-direction: column; font-size: 12px; font-weight: 700; gap: 6px; min-width: 0; position: relative; }
.crdb__field--from { grid-column: 1; grid-row: 1; }
.crdb__swap { grid-column: 2; grid-row: 1; }
.crdb__field--to { grid-column: 3; grid-row: 1; }
.crdb__field--date { grid-column: 4; grid-row: 1; }
.crdb__field--time { border: 0; grid-column: 1; grid-row: 2; margin: 0; padding: 0; }
.crdb__field--type { grid-column: 3; grid-row: 2; }
.crdb__field--limit { grid-column: 4; grid-row: 2; }
.crdb__submit { grid-column: 5; grid-row: 2; }
.crdb__field legend { margin: 0 0 6px; padding: 0; }
.crdb__time-selects { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.crdb input, .crdb select, .crdb button { font: inherit; }
.crdb input[type="search"], .crdb input[type="date"], .crdb select { background: #fff; border: 1px solid #bfc8d0; border-radius: 7px; color: var(--crdb-ink); height: 44px; min-width: 0; padding: 0 11px; width: 100%; }
.crdb input:focus, .crdb select:focus, .crdb button:focus-visible { border-color: var(--crdb-red); box-shadow: 0 0 0 3px rgba(215, 25, 32, .14); outline: 0; }
.crdb__swap { background: #fff; border: 1px solid #bfc8d0; border-radius: 50%; color: var(--crdb-red); cursor: pointer; font-size: 19px; height: 38px; margin-bottom: 3px; padding: 0; width: 38px; }
.crdb__submit { background: var(--crdb-red); border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 800; height: 44px; padding: 0 20px; white-space: nowrap; }
.crdb__submit:hover { background: var(--crdb-red-dark); }
.crdb button:disabled { cursor: wait; opacity: .6; }

.crdb__suggestions { background: #fff; border: 1px solid #cbd2d8; border-radius: 7px; box-shadow: 0 9px 24px rgba(20, 30, 40, .18); display: none; left: 0; max-height: 290px; overflow: auto; position: absolute; right: 0; top: calc(100% + 2px); z-index: 20; }
.crdb__suggestions.is-open { display: block; }
.crdb__suggestion { background: #fff; border: 0; border-bottom: 1px solid #edf0f2; color: var(--crdb-ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; text-align: left; width: 100%; }
.crdb__suggestion:hover { background: #fff1f1; }
.crdb__suggestion strong { font-size: 14px; }
.crdb__suggestion span { color: var(--crdb-muted); font-size: 11px; font-weight: 400; }

.crdb__status { border-bottom: 1px solid var(--crdb-line); color: var(--crdb-muted); font-size: 13px; min-height: 46px; padding: 14px 24px; }
.crdb__status.is-loading::before { animation: crdb-spin .8s linear infinite; border: 2px solid #e1e5e8; border-top-color: var(--crdb-red); border-radius: 50%; content: ""; display: inline-block; height: 14px; margin-right: 8px; vertical-align: -2px; width: 14px; }
.crdb__status.is-error { background: #fff3f3; color: #a40e14; }
@keyframes crdb-spin { to { transform: rotate(360deg); } }

.crdb__summary { background: #fff; font-size: 16px; font-weight: 800; padding: 16px 24px 8px; }
.crdb__table-wrap, .crdb__route-scroll { overflow-x: auto; }
.crdb__table, .crdb__route-table { border-collapse: collapse; margin: 0; width: 100%; }
.crdb__table { min-width: 1450px; }
.crdb__table th { background: #29343d; color: #fff; font-size: 11px; letter-spacing: .05em; padding: 10px 12px; text-align: left; white-space: nowrap; }
.crdb__table td { border-bottom: 1px solid var(--crdb-line); font-size: 13px; padding: 13px 12px; vertical-align: middle; }
.crdb__table tbody .crdb__train-row:nth-of-type(even) { background: #f2f6fa; }
.crdb__train-row:hover { background: #fafbfc; }
.crdb__train-code { color: var(--crdb-red); font-size: 17px !important; font-weight: 900; white-space: nowrap; }
.crdb__time-cell strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.crdb__time-cell span { color: var(--crdb-muted); display: block; font-size: 11px; white-space: nowrap; }
.crdb__table th.crdb__seat-head { background: linear-gradient(#34a3db, #147fc1); border-left: 1px solid rgba(255, 255, 255, .22); line-height: 1.2; min-width: 72px; padding: 9px 5px; text-align: center; white-space: normal; }
.crdb__seat-cell { border-left: 1px solid #bdd2e2; min-width: 72px; padding: 8px 4px !important; text-align: center; }
.crdb__seat-cell.is-empty { color: #9aa4ac; }
.crdb__seat-option { align-items: center; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-height: 30px; white-space: nowrap; }
.crdb__seat-option + .crdb__seat-option { border-top: 1px dotted #c8d5df; margin-top: 4px; padding-top: 4px; }
.crdb__seat-option strong { font-size: 12px; font-weight: 800; }
.crdb__seat-option strong.is-available { color: #159020; }
.crdb__seat-option strong.is-number { color: #17202a; font-size: 14px; }
.crdb__seat-option strong.is-waitlist { color: #f07800; }
.crdb__seat-option strong.is-none { color: #9aa4ac; font-weight: 500; }
.crdb__seat-price { color: #6f7c86; display: block; font-size: 9px; font-weight: 500; margin-top: 3px; }
.crdb__seat-kind { background: #e9f2f8; border-radius: 3px; color: #36759b; font-size: 9px; margin-bottom: 2px; padding: 1px 3px; }
.crdb__route-button { background: #fff; border: 1px solid var(--crdb-red); border-radius: 5px; color: var(--crdb-red); cursor: pointer; font-size: 12px; font-weight: 700; padding: 6px 9px; white-space: nowrap; }
.crdb__purchase-link { background: var(--crdb-red); border: 1px solid var(--crdb-red); border-radius: 5px; color: #fff !important; display: inline-block; font-size: 11px; font-weight: 800; margin: 4px 0 0; padding: 6px 9px; text-decoration: none !important; white-space: nowrap; }
.crdb__purchase-link:hover { background: var(--crdb-red-dark); border-color: var(--crdb-red-dark); }
.crdb__route-row td { background: #f6f8fa; padding: 16px 24px; }
.crdb__route-row h4 { font-size: 14px; margin: 0 0 9px; }
.crdb__route-table { background: #fff; border: 1px solid var(--crdb-line); min-width: 520px; }
.crdb__route-table th, .crdb__route-table td { border-bottom: 1px solid var(--crdb-line); font-size: 11px; padding: 7px 9px; text-align: left; }
.crdb__route-table th { background: #e9edf0; color: #38434d; }
.crdb__notice { background: #fbfbfc; color: var(--crdb-muted); font-size: 11px; line-height: 1.7; padding: 13px 24px 16px; }
.crdb__notice p { margin: 3px 0; }
.crdb__notice a { color: var(--crdb-red); }

.crdb__delay { border-top: 5px solid #29343d; padding: 20px 24px; }
.crdb__delay-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 14px; }
.crdb__delay-heading .crdb__eyebrow { color: var(--crdb-red); }
.crdb__delay-heading h3 { color: var(--crdb-ink); font-size: 20px; margin: 0; }
.crdb__delay-heading > p { color: var(--crdb-muted); font-size: 11px; margin: 0; }
.crdb__delay-form { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(190px, 1.2fr) minmax(110px, .55fr) minmax(155px, .8fr) auto; }
.crdb__delay-submit { background: #29343d; border: 0; border-radius: 7px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 800; height: 44px; padding: 0 18px; white-space: nowrap; }
.crdb__delay-result { background: var(--crdb-bg); border-radius: 6px; color: var(--crdb-muted); font-size: 13px; margin-top: 12px; min-height: 43px; padding: 12px; }
.crdb__delay-result.is-loading::before { animation: crdb-spin .8s linear infinite; border: 2px solid #e1e5e8; border-top-color: var(--crdb-red); border-radius: 50%; content: ""; display: inline-block; height: 14px; margin-right: 8px; vertical-align: -2px; width: 14px; }
.crdb__delay-result.is-error { background: #fff3f3; color: #a40e14; }
.crdb__delay-result.is-success { background: #edf8f0; color: #176532; }

@media (max-width: 900px) {
  .crdb__fields { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); }
  .crdb__field--from { grid-column: 1; grid-row: 1; }
  .crdb__swap { grid-column: 2; grid-row: 1; }
  .crdb__field--to { grid-column: 3; grid-row: 1; }
  .crdb__field--date { grid-column: 1; grid-row: 2; }
  .crdb__field--time { grid-column: 3; grid-row: 2; }
  .crdb__field--type { grid-column: 1; grid-row: 3; }
  .crdb__field--limit { grid-column: 2; grid-row: 3; }
  .crdb__submit { grid-column: 3; grid-row: 3; }
  .crdb__delay-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .crdb { border-radius: 0; margin-left: -12px; margin-right: -12px; }
  .crdb__header { align-items: flex-start; padding: 18px; }
  .crdb__clock-time { font-size: 19px; }
  .crdb__search { padding: 16px; }
  .crdb__fields { display: grid; grid-template-columns: 1fr 42px; }
  .crdb__field, .crdb__field--from, .crdb__field--to, .crdb__field--date, .crdb__field--time, .crdb__field--type { grid-column: 1 / -1; grid-row: auto; }
  .crdb__swap { grid-column: 2; grid-row: 2; margin-top: -22px; }
  .crdb__field--limit { grid-column: 1; grid-row: auto; }
  .crdb__submit { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .crdb__status, .crdb__summary, .crdb__notice { padding-left: 16px; padding-right: 16px; }
  .crdb__table { min-width: 1450px; }
  .crdb__delay { padding: 18px 16px; }
  .crdb__delay-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .crdb__delay-form { grid-template-columns: 1fr; }
  .crdb__delay-submit { width: 100%; }
}