:root{
  --bg:#f9fafb;
  --card:#ffffff;
  --accent:#16a34a; /* 緑系 */
  --accent-light:#4ade80;
  --text:#0f172a;
  --text-light:#334155;
  --muted:#64748b;
  --muted-light:#94a3b8;
  --radius:12px;
  --shadow:0 4px 16px rgba(0,0,0,0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg);color:var(--text);line-height:1.6;padding:1rem}
img{max-width: 80%; 
  display: block;
  margin: 0 auto; /* 中央寄せ */
  border-radius: var(--radius);}

.stops-viewer {
  width: 100%;                /* card-list の幅にフィット */
  max-width: 100%;            /* 親に合わせる */
  height: 100%;              /* ビューポートの高さを指定（必要に応じ調整） */
  overflow: auto;             /* 横・縦スクロール可能 */
  border: 1px solid #ccc;     /* PDFっぽい枠線 */
  border-radius: 8px;
  background: #fff;
}

.stops-viewer img {
  display: block;
  max-width: none;  /* 縮小禁止 → 原寸で表示 */
  height: auto;
}


a {
  text-decoration: none;
  color: #1d4ed8; /* 青色 */
}


header{padding:2rem 1rem;text-align:center;background:var(--accent);color:white;border-radius:var(--radius);margin-bottom:2rem}
header h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:0.5rem}
header p{font-size:1rem;color:var(--accent-light)}

main{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}

section{background:var(--card);padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow)}
h2{margin-bottom:1rem;font-size:1.5rem;color:var(--accent-light)}
p{margin-bottom:1rem;color:var(--text-light)}

.card-list{display:flex;flex-direction:column;gap:1rem}



.card {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  padding: 0.1rem 0.8rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-left: 4px solid var(--accent-light);
  gap: 0.75rem;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.card-img-wrapper {
  flex: 0 0 150px;  /* 固定幅にしておく */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}


@media (max-width: 820px) {
  .card {
    flex-direction: column;
    text-align: left; /* テキストは左寄せのまま */
  }

  .card-img-wrapper {
    flex: unset;            /* 固定幅を解除 */
    margin-top: 12px;       /* 上に余白 */
    margin-bottom: 12px;    /* 下に余白 ← 追加 */
    align-self: center;     /* 中央寄せ（不要なら消してOK） */
  }
}



.card h3{margin:0.5rem 0;color:var(--accent)}
.meta{color:var(--muted-light);font-size:0.9rem}

form{display:flex;flex-direction:column;gap:0.8rem}
input,textarea,button,select{padding:0.6rem;border:1px solid #e2e8f0;border-radius:8px;font-size:1rem}
input:focus,textarea:focus,select:focus{border-color:var(--accent-light);outline:none}
button{background:var(--accent);color:white;font-weight:bold;cursor:pointer;border:none}


.table-wrapper {
  overflow-x: auto; /* 横スクロール可能 */
  -webkit-overflow-scrolling: touch;
}

table {
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 各列の幅を均等に固定 */
}

th, td {
  white-space: nowrap; /* 折り返さず1行で表示 */
  padding: 0.8rem;
  text-align: center;
  border-left: 1px solid #16a34a;
  border-right: 1px solid #16a34a;
}

th {
  background-color: #16a34a;
  color: white;
  font-weight: bold;
  border-top: 2px solid #16a34a;
  border-bottom: 2px solid #16a34a;
}
tr:nth-child(even) td{
background-color:#f1f5f9;
}


ul {
  list-style: none; /* デフォルトの丸印を消す */
  padding-left: 0;
  margin-top: 0.8rem;
}

li {
  position: relative;
  padding-left: 2rem; /* チェックマーク分の余白を増やす */
  margin-bottom: 0.8rem;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0.8rem 3rem;
  font-size: 1rem;
  color: var(--text-light);
}

li::before {
  content: '✔'; /* チェックマーク */
  position: absolute;
  left: 0.8rem; /* 左余白を増やす */
  top: 50%;
  transform: translateY(-50%); /* 縦中央に配置 */
  color: var(--accent);
  font-weight: bold;
}






footer{text-align:center;padding:1rem;color:var(--muted-light);font-size:0.9rem;margin-top:2rem}

@media(max-width:480px){
  body{padding:0.5rem}
  header{padding:1.5rem 1rem}
  main{gap:1.5rem}
  h2{font-size:1.3rem}
}



.back-link{
  max-width:700px;           /* main と同じ幅 */
  margin: 1rem auto;         /* デフォルトは通常の余白に */
  padding: 0 0.25rem;
}


/* ヘッダー直後（上側）のときだけ詰める */
header + .back-link{
  margin-top: -1rem;         /* ここだけ従来の“引き上げ” */
  margin-bottom: 1rem;
}

/* main の直後（下側）のときは重ならないように余裕を持たせる */
main + .back-link{
  margin-top: 1.5rem;        /* 正のマージンで重なり防止 */
  margin-bottom: 1rem;
}



.back-link a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .9rem;
  border-radius:999px;
  background:var(--card);
  color:var(--text);
  box-shadow:var(--shadow);
  border:1px solid #e2e8f0;
  transition:transform .06s ease, background .15s ease;
  font-size:.95rem;
}
.back-link a:hover{ background:#f8fafc; transform:translateY(-1px) }
.back-link .arrow{ color:var(--accent); font-weight:700 }