@charset "UTF-8";
html { scroll-padding-top: 185px; }
.workspace .calculation-column { display: block; }
.result-panel.comparison-summary { position: sticky; top: 10px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 10px 20px; padding: 16px 20px; margin: 0 0 22px; box-shadow: 0 5px 24px #173c2820; }
.comparison-summary .result-top .eyebrow { margin-bottom: 3px; }
.comparison-summary .result-top h2 { font-size: 16px; }
.comparison-summary .result-route { margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comparison-summary .cost-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.comparison-summary .cost-grid strong { font-size: 27px; }
.comparison-summary .recommendation { margin: 0; padding: 10px; }
.comparison-summary .summary-detail { grid-column: 1 / 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.comparison-summary .break-even { margin: 0; padding: 0; border: 0; gap: 12px; }
.comparison-summary .break-even strong { font-size: 16px; }
.comparison-summary .result-note { margin: 0; }
.comparison-summary .result-copy { margin: 0; padding: 7px 12px; justify-content: center; }
@media (max-width: 950px) {
  .result-panel.comparison-summary { gap: 10px 14px; padding: 14px 17px; }
  .comparison-summary .cost-grid strong { font-size: 23px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 245px; }
  .result-panel.comparison-summary { top: 6px; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 15px; margin: 0 0 20px; }
  .comparison-summary .result-top { grid-column: 1 / 3; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .comparison-summary .result-top .eyebrow { display: none; }
  .comparison-summary .result-top h2 { font-size: 12px; white-space: nowrap; }
  .comparison-summary .result-route { margin: 0; font-size: 9px; }
  .comparison-summary .cost-grid { grid-column: 1 / 3; gap: 12px; }
  .comparison-summary .cost-grid strong { font-size: 25px; }
  .comparison-summary .cost-label { margin-bottom: 0; font-size: 10px; }
  .comparison-summary .cost-formula { font-size: 9px; }
  .comparison-summary .recommendation { grid-column: 1 / 3; padding: 6px 9px; align-items: center; }
  .comparison-summary .recommendation strong { font-size: 11px; }
  .comparison-summary .recommendation p { display: none; }
  .comparison-summary .recommendation-icon { width: 17px; height: 17px; font-size: 12px; }
  .comparison-summary .summary-detail { grid-column: 1; }
  .comparison-summary .break-even { font-size: 8px; gap: 5px; flex-wrap: wrap; }
  .comparison-summary .break-even strong { font-size: 13px; }
  .comparison-summary .summary-detail .result-note { display: none; }
  .comparison-summary .result-copy { grid-column: 2; font-size: 9px; padding: 6px 8px; }
}
:root { --ink: #20342e; --muted: #75847d; --green: #117d63; --green-dark: #08634d; --pale: #edf6f1; --border: #e0e8e2; --paper: #fff; --background: #f6f8f5; --shadow: 0 4px 18px #263d2b05; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--background); font-family: "Yu Gothic UI", "Meiryo", system-ui, sans-serif; font-size: 14px; line-height: 1.6; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible { outline: 3px solid #74bfa9; outline-offset: 3px; }
input:focus, select:focus { outline: 2px solid #79baa5; outline-offset: 1px; }
input, select { min-width: 0; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--ink); padding: 10px 12px; }
input::placeholder { color: #abb4ae; }
input::-webkit-inner-spin-button { opacity: .35; }
input[readonly] { background: #f6f8f5; color: #75847d; }
h1, h2, h3, p { margin-top: 0; }
h2 { font-size: 17px; margin-bottom: 0; font-weight: 700; }
h3 { font-size: 15px; margin-bottom: 0; }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.topbar { height: 76px; padding: 0 max(28px, calc((100vw - 1180px)/2)); display: flex; align-items: center; gap: 30px; background: white; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 750; font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--green); color: white; font-size: 20px; }
.header-caption { color: #8d9992; font-size: 12px; }
.local-badge { margin-left: auto; padding: 6px 11px; border: 1px solid var(--border); border-radius: 20px; color: #75867c; font-size: 11px; white-space: nowrap; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #529e77; margin-right: 6px; vertical-align: 1px; }
.page { max-width: 1180px; padding: 26px 0 0; margin: auto; }
.breadcrumb { font-size: 11px; color: #91a097; margin-bottom: 27px; }
.breadcrumb span { margin: 0 10px; color: #b5c0b7; }
.page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--green); margin-bottom: 10px; }
h1 { font-size: 29px; line-height: 1.4; letter-spacing: .025em; margin-bottom: 12px; font-weight: 750; }
.intro { color: #7c8981; font-size: 13px; margin: 0; }
.title-art { width: 100px; height: 89px; border-radius: 24px; color: #75a78d; background: #eaf1e7; transform: rotate(-7deg); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 15px; }
.title-art span:first-child { font-size: 44px; font-weight: 300; line-height: 1.2; }
.title-art span:last-child { font-size: 12px; letter-spacing: .25em; }
.search-panel, .panel { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.search-panel { padding: 23px 27px 19px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step { display: inline-grid; place-items: center; height: 23px; width: 27px; border-radius: 5px; font-size: 10px; letter-spacing: .03em; font-weight: 650; background: #edf4ef; color: var(--green); margin-right: 9px; vertical-align: 2px; }
.small { font-size: 11px; }
.muted { color: var(--muted); }
.station-form { display: flex; align-items: end; gap: 18px; margin-top: 23px; }
.station-field { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }
.station-field > span:first-child { display: block; margin-bottom: 7px; }
.station-label-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.station-label-row > label { white-space: nowrap; }
.destination-shortcuts { display: flex; gap: 4px; }
.destination-shortcuts button { background: white; border: 1px solid #dbe6dc; border-radius: 4px; color: #6d8372; font-size: 10px; font-weight: 500; padding: 2px 7px; white-space: nowrap; }
.destination-shortcuts button[aria-pressed="true"] { background: #eaf4ed; border-color: #c7dfce; color: var(--green); }
.input-with-icon { display: flex; align-items: center; position: relative; }
.input-with-icon input { width: 100%; height: 48px; padding-left: 38px; font-size: 16px; font-weight: 600; background: #fafcf9; }
.station-dot { position: absolute; left: 17px; width: 10px; height: 10px; border: 2px solid var(--green); border-radius: 50%; z-index: 1; }
.station-dot.destination { border-color: #a5b2a5; background: #a5b2a5; }
.swap-button { border: 1px solid var(--border); background: white; border-radius: 50%; width: 33px; height: 33px; font-size: 20px; color: #789385; margin-bottom: 8px; flex: 0 0 33px; }
.swap-button:hover { background: var(--pale); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; padding: 11px 17px; font-weight: 600; font-size: 12px; line-height: 1.5; }
.primary { color: white; background: var(--green); }
.primary:hover { background: var(--green-dark); }
.secondary { background: white; color: var(--green); border-color: #d4e3da; }
.secondary:hover { background: #f3f8f4; }
.search-button { height: 48px; padding-inline: 28px; font-size: 13px; }
.small-button { font-size: 11px; padding: 7px 11px; }
.search-help { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11px; color: #929e95; padding-top: 13px; }
.search-status { color: #597463; background: #f2f7ef; padding: 9px 12px; margin: 12px 0 0; border-radius: 5px; font-size: 11px; }
.transport-option { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11px; color: #76887c; }
.transport-option input { accent-color: var(--green); }
.location-choices { margin-top: 13px; border: 1px solid #d2e2d5; border-radius: 7px; padding: 12px; background: #f7faf4; }
.location-choices p { font-size: 12px; margin-bottom: 8px; }
.location-choice-buttons { display: flex; gap: 7px; flex-wrap: wrap; }
.location-choice-buttons button { border: 1px solid #d2e2d5; border-radius: 5px; background: white; padding: 7px 10px; color: var(--green); font-size: 11px; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.sample-notice { display: flex; align-items: center; gap: 10px; background: #f0f4ea; border: 1px solid #e5ecd9; color: #738365; border-radius: 7px; font-size: 11px; padding: 10px 14px; margin-top: 18px; }
.info-symbol { display: grid; place-items: center; border: 1px solid #a1b38e; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; flex-shrink: 0; }
.sample-notice button { background: none; border: 0; color: inherit; font-size: 18px; margin-left: auto; }
.dirty-notice { color: #9a6d2b; background: #fff5dd; padding: 12px 16px; border-radius: 7px; font-size: 12px; margin-top: 18px; margin-bottom: 0; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 370px; align-items: start; gap: 29px; margin-top: 31px; }
.route-heading { margin-bottom: 9px; }
.count { display: inline-block; color: #94a198; background: #e9eee8; border-radius: 10px; padding: 1px 8px; font-size: 10px; margin-left: 5px; vertical-align: 2px; }
.section-description { color: #8c9990; font-size: 11px; margin-bottom: 18px; }
.route-card { background: white; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.route-card:hover { border-color: #7db49b; }
.route-card.selected { border: 2px solid var(--green); }
.route-card:focus-visible { outline: 3px solid #9ac4b4; outline-offset: 3px; }
.route-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px 12px; }
.route-card.selected .route-summary { background: #f5faf6; }
.route-choice { display: flex; align-items: center; gap: 10px; min-width: 0; }
.radio-indicator { width: 18px; height: 18px; border: 1.5px solid #cbd5ce; border-radius: 50%; background: white; flex-shrink: 0; }
.selected .radio-indicator { border: 5px solid var(--green); }
.route-number { font-size: 10px; color: #87948b; letter-spacing: .02em; }
.route-name { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.route-time { font-size: 20px; font-weight: 650; white-space: nowrap; }
.route-time small { font-size: 10px; font-weight: 500; margin-left: 3px; }
.route-meta { display: flex; gap: 14px; align-items: center; padding: 0 19px 13px 48px; color: #8d9991; font-size: 10px; border-bottom: 1px dashed #e6ece6; flex-wrap: wrap; }
.route-clock { color: #4e7060; font-weight: 600; }
.route-prices { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 12px 19px; background: #f7faf5; border-top: 1px solid #eef2e9; font-size: 10px; color: #77917f; }
.route-prices strong { color: #347159; margin-left: 4px; font-size: 12px; }
.route-card[aria-disabled="true"] { opacity: .65; cursor: wait; }
.route-fare { color: var(--green); font-weight: 600; margin-left: auto; }
.sample-chip { color: #9b8857; background: #f7f2e2; padding: 1px 5px; border-radius: 3px; }
.route-timeline { padding: 15px 20px 16px; }
.station-stop { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 650; }
.stop-point { display: block; height: 11px; width: 11px; background: white; border: 2px solid #8aaa9a; border-radius: 50%; flex-shrink: 0; }
.station-stop:first-child .stop-point, .station-stop:last-child .stop-point { border-color: var(--green); }
.timeline-leg { margin-left: 4px; border-left: 3px solid #99a6cb; padding: 8px 0 8px 17px; font-size: 11px; color: #809086; }
.timeline-leg.color-1 { border-color: #a589b3; }
.timeline-leg.color-2 { border-color: #8eaf78; }
.timeline-leg.color-3 { border-color: #e0b979; }
.timeline-leg.walk { border-left: 3px dotted #bdc6bc; }
.line-badge { background: #f3f4f9; color: #8a86a2; border: 1px solid #e9e8f0; border-radius: 4px; padding: 2px 7px; }
.line-badge.color-1 { color: #9074a2; background: #f5f0f7; border-color: #efe5f1; }
.line-badge.color-2 { color: #7c9565; background: #f1f6ec; border-color: #e5edde; }
.fare-panel { padding: 22px; margin-top: 23px; }
.fare-panel > p { margin: 9px 0 17px; }
.fare-source { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 17px; padding: 9px 11px; background: #f0f7ee; border-radius: 5px; color: #71907a; font-size: 10px; }
.text-button { background: none; border: 0; color: var(--green); font-size: 11px; padding: 3px; }
.text-button:hover { text-decoration: underline; }
.fare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fare-grid label { font-size: 11px; color: #6a7d70; }
.money-input { display: flex; align-items: center; position: relative; margin-top: 6px; }
.money-input input { width: 100%; text-align: right; padding-right: 30px; height: 42px; font-size: 15px; font-weight: 600; }
.money-input > span { position: absolute; right: 12px; font-size: 11px; color: #9aa69c; pointer-events: none; }
.passes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 17px; }
.fare-footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid #edf0eb; margin-top: 21px; padding-top: 15px; }
.error { font-size: 12px; color: #ba493c; background: #fff3ee; border-radius: 5px; padding: 8px 10px; margin: 12px 0 0; }
.conditions { padding: 22px; }
.conditions h2 { margin-bottom: 20px; }
.field-label { font-size: 11px; color: #77877c; font-weight: 600; }
.segmented { display: flex; padding: 4px; gap: 3px; background: #f1f4ef; border-radius: 7px; margin-top: 8px; }
.segmented button { flex: 1; border: 0; border-radius: 5px; background: none; color: #8c9a90; font-size: 12px; padding: 8px 2px; }
.segmented button.active { background: white; color: var(--green); box-shadow: 0 1px 4px #20342e12; font-weight: 700; }
.form-field { display: flex; flex-direction: column; font-size: 11px; color: #77877c; font-weight: 600; gap: 7px; margin-top: 18px; }
.form-field input { width: 100%; height: 41px; }
.condition-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.compact-segmented { display: inline-flex; border: 1px solid #e1e8df; border-radius: 5px; overflow: hidden; }
.compact-segmented button { border: 0; padding: 5px 15px; font-size: 11px; color: #8a978d; background: white; }
.compact-segmented button.active { background: #eaf4ed; color: var(--green); font-weight: 600; }
.days-heading { display: flex; justify-content: space-between; margin-top: 21px; margin-bottom: 8px; }
.date-input { display: flex; gap: 6px; align-items: center; }
.date-input input { min-width: 0; flex: 1; }
.date-picker-button { border: 1px solid var(--border); border-radius: 5px; background: #f6faf5; padding: 8px; color: var(--green); font-size: 10px; white-space: nowrap; }
.route-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: white; margin-bottom: 14px; }
.route-pagination:last-of-type { margin-top: 14px; }
.pagination-label { font-size: 11px; color: #6e7f72; text-align: center; }
.pagination-label small { display: block; color: #8c9a90; font-size: 10px; }
.pagination-button { border: 1px solid #d6e4d9; background: #f4f9f3; color: var(--green); border-radius: 5px; padding: 7px 13px; font-size: 11px; white-space: nowrap; }
.pagination-button:disabled { opacity: .4; cursor: default; }
.usage-calendar { border-top: 1px solid #e7ede4; margin-top: 23px; padding-top: 18px; }
.usage-calendar h3 { font-size: 12px; }
.usage-calendar > p:first-of-type { margin: 5px 0 12px; font-size: 10px; }
.calendar-navigation { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendar-navigation strong { font-size: 13px; }
.calendar-nav { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 5px; background: white; color: var(--green); font-size: 22px; line-height: 1; }
.calendar-nav:disabled { opacity: .3; cursor: default; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-weekdays { margin-bottom: 5px; font-size: 10px; text-align: center; color: #869483; }
.calendar-weekdays span:first-child { color: #bb786f; }
.calendar-weekdays span:last-child { color: #7795b6; }
.calendar-day { aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 6px; background: #f6f8f4; color: #5e7262; font-size: 11px; font-variant-numeric: tabular-nums; position: relative; }
.calendar-day.sunday { color: #b1766d; }
.calendar-day.saturday { color: #6f8dad; }
.calendar-day[aria-pressed="true"] { background: var(--green); color: white; font-weight: 700; }
.calendar-day[aria-current="date"] { border-color: #b4c5b6; }
.calendar-day[aria-current="date"]::after { content: ''; position: absolute; bottom: 3px; left: calc(50% - 1px); width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.calendar-day:hover { border-color: var(--green); }
.calendar-day:disabled { opacity: 1; color: #b8c1b5; background: #fafbf8; cursor: default; }
.calendar-day:disabled:hover { border-color: transparent; }
.calendar-date-month { display: block; font-size: 8px; line-height: 1; }
.calculation-range { background: #edf6f0; color: var(--green); padding: 7px 9px; border-radius: 5px; font-size: 11px; margin: 0 0 12px; }
.calendar-note { font-size: 9px; color: #a0ad9d; margin: 5px 0 0; }
.calendar-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.calendar-actions .text-button { font-size: 10px; }
.calendar-legend { margin-left: auto; display: flex; gap: 4px; align-items: center; color: #8a9787; font-size: 9px; }
.calendar-legend span { height: 8px; width: 8px; background: var(--green); border-radius: 2px; }
.calendar-status { font-size: 10px; color: #7e917e; margin: 8px 0 0; line-height: 1.7; }
.days-inputs { display: flex; flex-direction: column; gap: 7px; }
.day-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #6e7f72; font-size: 11px; }
.day-row .money-input { width: 95px; margin-top: 0; }
.day-row input { height: 36px; font-size: 14px; }
.total-days { display: flex; justify-content: space-between; align-items: center; background: #f6f8f4; border-radius: 5px; padding: 10px 12px; font-size: 11px; color: #869483; margin-top: 15px; }
.total-days strong { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.unit { font-size: 11px; font-weight: 500; margin-left: 4px; }
.result-panel { margin-top: 17px; border: 1px solid #bcd7c9; border-radius: 12px; background: #edf6f0; padding: 23px 22px 20px; }
.result-top .eyebrow { color: #69a488; margin-bottom: 6px; font-size: 9px; }
.result-top h2 { font-size: 17px; }
.result-route { color: #7d9787; font-size: 10px; margin: 7px 0 19px; overflow-wrap: anywhere; }
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cost-grid > div { min-width: 0; }
.cost-label { display: block; font-size: 11px; color: #839988; margin-bottom: 4px; }
.cost-grid strong { display: block; font-size: 25px; letter-spacing: -.025em; line-height: 1.45; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-grid strong small { font-size: 12px; font-weight: 500; margin-left: 3px; }
.cost-grid .long-amount { font-size: 18px; }
.cost-grid > div:last-child strong { color: var(--green); }
.cost-formula { display: block; font-size: 9px; color: #9aae9e; min-height: 15px; }
.recommendation { display: flex; align-items: start; gap: 10px; padding: 14px 11px; background: #daecdf; border-radius: 7px; margin-top: 19px; }
.recommendation.neutral { background: #e2ece3; }
.recommendation-icon { width: 22px; height: 22px; border-radius: 50%; background: #bbdac6; display: grid; place-items: center; color: #35764e; font-size: 15px; flex-shrink: 0; }
.recommendation strong { color: #35764e; font-size: 12px; line-height: 1.6; display: block; }
.recommendation p { color: #739b7c; font-size: 10px; margin: 4px 0 0; }
.break-even { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #d8e6db; margin-top: 18px; padding-top: 15px; color: #839988; font-size: 10px; }
.break-even strong { font-size: 22px; color: var(--green); font-variant-numeric: tabular-nums; }
.break-even strong span { font-size: 11px; font-weight: 500; margin-left: 4px; }
.result-note { font-size: 9px; color: #94a99a; margin: 3px 0 0; }
.result-copy { width: 100%; background: white; border-color: #d1e2d6; color: #5d816b; margin-top: 17px; font-size: 11px; justify-content: space-between; padding: 10px 12px; }
.result-copy:hover:enabled { background: #f7fbf7; }
.calculation-note { font-size: 10px; color: #9ba79e; line-height: 1.8; margin: 12px 3px 0; }
.empty-state { background: white; border: 1px dashed #cad9cd; border-radius: 11px; text-align: center; padding: 45px 18px; color: #859487; }
.empty-icon { display: grid; place-items: center; width: 45px; height: 45px; margin: 0 auto 15px; border-radius: 50%; background: #f0f6ef; color: #a1b999; font-size: 25px; }
.empty-state h3 { color: #597463; margin-bottom: 10px; }
.empty-state h3 { overflow-wrap: anywhere; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.empty-state p { font-size: 12px; margin-bottom: 20px; }
.comparison-panel { margin-top: 30px; padding: 24px; }
.comparison-panel h2 { font-size: 15px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 19px; white-space: nowrap; font-size: 11px; }
th { background: #f5f8f3; color: #9aa796; text-align: right; padding: 10px 14px; font-weight: 500; border-bottom: 1px solid #e4ebe0; }
td { text-align: right; padding: 16px 14px; border-bottom: 1px solid #edf1e9; }
td:first-child, th:first-child { text-align: left; }
.table-route-button { background: none; border: 0; color: #526c5a; font-size: 11px; padding: 0; text-align: left; }
.table-route-button:hover { color: var(--green); text-decoration: underline; }
.selected-row { background: #f5faf5; }
.comparison-note { margin: 14px 0 0; }
.winner-chip { color: var(--green); background: #eaf4ea; padding: 3px 7px; border-radius: 4px; }
.page-footer { border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; padding: 22px 0; margin-top: 42px; color: #a6b1a6; font-size: 10px; }
.route-dialog { border: 1px solid var(--border); border-radius: 13px; max-width: 680px; width: calc(100% - 30px); max-height: 90vh; padding: 27px; color: var(--ink); box-shadow: 0 24px 100px #152d2933; }
.route-dialog::backdrop { background: #192c2a60; backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; }
.dialog-heading .eyebrow { margin-bottom: 4px; }
.dialog-heading h2 { font-size: 20px; }
.icon-button { background: #f3f6f2; border: 0; width: 28px; height: 28px; border-radius: 50%; font-size: 19px; color: #789385; }
.dialog-stations { background: #f0f7f1; padding: 9px 12px; border-radius: 5px; color: var(--green); font-size: 12px; margin: 17px 0; }
.legs-heading { margin-top: 23px; }
.legs-heading + p { margin: 7px 0 13px; }
.leg-edit-row { display: grid; grid-template-columns: 75px minmax(0, 1fr) minmax(0, 1fr) 24px; gap: 8px; align-items: end; background: #f8faf7; padding: 12px; margin-top: 9px; border-radius: 6px; }
.leg-edit-row label { font-size: 10px; color: #869580; }
.leg-edit-row input, .leg-edit-row select { display: block; width: 100%; font-size: 12px; padding: 8px; margin-top: 4px; height: 37px; }
.leg-edit-row .line-field { grid-column: 2 / 4; }
.leg-edit-row .from-field { grid-column: 1 / 3; }
.leg-edit-row .to-field { grid-column: 3 / 4; }
.leg-edit-row .remove-leg { grid-column: 4; grid-row: 1 / 3; align-self: center; color: #aa7464; font-size: 16px; background: none; border: 0; padding: 0; }
.duration-field { width: 180px; }
.duration-field .money-input { margin-top: 0; }
.dialog-fares-title { margin: 23px 0 12px; }
.dialog-actions { display: flex; gap: 10px; justify-content: end; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 24px; }
.dialog-actions .danger { margin-right: auto; color: #b06a56; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 20px; border-radius: 8px; background: #244333; color: #fff; box-shadow: 0 4px 24px #193d2630; font-size: 12px; z-index: 10; max-width: calc(100% - 30px); width: max-content; }
@media (max-width: 1240px) { .page { margin-inline: 28px; } }
@media (max-width: 950px) { .workspace { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; } .conditions, .result-panel { padding: 20px 17px; } .station-form { gap: 12px; } .search-button { padding-inline: 18px; } .header-caption { display: none; } h1 { font-size: 26px; } .cost-grid strong { font-size: 23px; } .fare-footer { flex-wrap: wrap; } }
@media (max-width: 760px) { .topbar { height: 65px; padding-inline: 20px; } .brand { font-size: 14px; } .brand-mark { width: 29px; height: 29px; font-size: 18px; } .local-badge { font-size: 9px; padding: 5px 8px; } .page { margin-inline: 18px; padding-top: 20px; } .breadcrumb { margin-bottom: 20px; } h1 { font-size: 23px; } .intro { font-size: 11px; } .title-art { display: none; } .search-panel { padding: 20px 17px; } .search-panel .section-head > span { display: none; } .station-form { flex-wrap: wrap; gap: 10px; } .station-field { flex-basis: calc(50% - 28px); } .swap-button { flex: 0 0 30px; width: 30px; } .station-field input { font-size: 14px; } .search-button { width: 100%; margin-top: 7px; height: 43px; } .search-help { font-size: 10px; } .workspace { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; } .calculation-column { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; } .result-panel { margin-top: 0; } .calculation-note { grid-column: 1 / 3; margin: 0 3px; } .conditions h2, .result-top h2 { font-size: 15px; } .cost-grid { grid-template-columns: 1fr; gap: 10px; } .cost-grid strong { font-size: 25px; } .break-even { flex-wrap: wrap; } .comparison-panel { padding: 18px; } .page-footer { flex-direction: column; gap: 5px; } }
@media (max-width: 520px) { h1 { font-size: 21px; } .page-title { margin-bottom: 23px; } .calculation-column { display: block; } .conditions, .result-panel { padding: 22px; } .result-panel { margin-top: 18px; } .calculation-note { margin: 12px 3px 0; } .cost-grid { grid-template-columns: 1fr 1fr; gap: 15px; } .cost-grid strong { font-size: 25px; } .break-even { flex-wrap: nowrap; } .fare-panel { padding: 18px; } .fare-grid { gap: 9px; } .passes-grid .money-input input { font-size: 13px; padding-left: 4px; } .route-summary { padding-inline: 15px; } .route-name { font-size: 12px; } .route-time { font-size: 18px; } .route-meta { padding-left: 43px; padding-right: 15px; gap: 9px; } .route-timeline { padding-inline: 17px; } .route-heading h2 { font-size: 15px; } .route-dialog { padding: 20px 16px; } .leg-edit-row { padding: 9px; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 20px; gap: 6px; } .dialog-actions { gap: 7px; flex-wrap: wrap; } .dialog-actions .button { padding: 10px 12px; } .local-badge { border: 0; padding: 0; } .topbar { gap: 8px; padding-inline: 17px; } }

/* 判定結果は定期が緑、ICが青。同額と比較できない場合は中立色。 */
.result-panel.comparison-summary[data-winner="ticket"] { background: #eff6ff; border-color: #9abde6; }
.result-panel[data-winner="ticket"] .recommendation { background: #dbeafe; color: #174b87; }
.result-panel[data-winner="ticket"] #ticket-total { color: #1559a0; }
.result-panel[data-winner="ticket"] #pass-total { color: #718096; }
.result-panel.comparison-summary[data-winner="pass"] { background: #eaf7ef; border-color: #75b794; }
.result-panel[data-winner="pass"] #ticket-total { color: #718096; }
.result-panel[data-winner="pass"] #pass-total { color: #117d63; }
.result-panel.comparison-summary[data-winner="equal"] { background: #f5f5f4; border-color: #cbd0cc; }
.result-panel.comparison-summary .summary-detail { grid-column: 1 / -1; }
.destination-shortcuts { gap: 8px; }
.destination-shortcuts button { min-height: 44px; min-width: 86px; padding: 9px 16px; font-size: 15px; font-weight: 700; border-radius: 8px; border-width: 2px; }
.destination-shortcuts button[aria-pressed="true"] { background: #117d63; color: white; border-color: #117d63; }
.route-card .station-stop { font-size: 17px; gap: 11px; }
.route-card .station-stop strong { font-weight: 700; overflow-wrap: anywhere; }
.station-stop small { margin-left: auto; font-size: 11px; font-weight: 500; color: #6b7b72; white-space: nowrap; }
.route-card .timeline-leg { display: flex; align-items: center; gap: 9px; min-height: 52px; }
.route-card .line-badge { font-size: 14px; padding: 6px 9px; line-height: 1.5; overflow-wrap: anywhere; }
.transport-label { font-size: 11px; color: #607166; white-space: nowrap; }
.transfer-count { flex-shrink: 0; padding: 7px 10px; border-radius: 6px; background: #eaf4ee; color: #356951; font-size: 12px; }
.route-prices { flex-wrap: wrap; gap: 12px 20px; }
.route-verdict { margin-left: auto; font-size: 12px; font-weight: 700; }
.route-verdict[data-winner="pass"], tr[data-winner="pass"] .winner-chip { background: #dff2e6; color: #116244; padding: 4px 8px; border-radius: 5px; }
.route-verdict[data-winner="ticket"], tr[data-winner="ticket"] .winner-chip { background: #dbeafe; color: #174b87; padding: 4px 8px; border-radius: 5px; }
.route-verdict[data-winner="equal"], tr[data-winner="equal"] .winner-chip { background: #eee; color: #58616a; padding: 4px 8px; border-radius: 5px; }
.fixed-conditions { display: flex; gap: 9px; margin: 18px 0 0; }
.fixed-conditions span { background: #edf4ef; color: #356951; border-radius: 6px; padding: 6px 12px; font-size: 12px; }
@media (max-width: 760px) {
  .station-label-row { align-items: stretch; flex-direction: column; }
  .destination-shortcuts button { min-width: 0; flex: 1; padding: 8px; font-size: 14px; }
  .route-card .station-stop { font-size: 16px; }
  .route-card .line-badge { font-size: 12px; }
  .route-card .route-summary { gap: 7px; }
  .transfer-count { padding: 6px; font-size: 10px; }
  .route-verdict { margin-left: 0; }
}