@charset "UTF-8";
/***

last update 25-04-22


Author:DEVIE-IDEA LLC(合同会社デバイス・アイデア)
Copylight:DEVIE-IDEA LLC(合同会社デバイス・アイデア)
URL:www.device-idea.com


***/
/* ベースレイアウト */
.flow-timetable {
  border-collapse: separate;
  border-spacing: 0 2rem;
  margin: 1rem auto;
  width: 100%;
  max-width: 900px;
}

.flow-timetable tr {
  position: relative;
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  margin:4px;
  border-radius: 10px;
  /*border:solid 1px blue;*/
  text-align: center;
}

.flow-timetable td {
  padding: 0.5rem 0.5rem;
  vertical-align: middle;
  font-size: 1rem;
  color: #333;
}

/* flow-date: 左側 */
.flow-timetable td:first-child {
  font-weight: bold;
  /*border-right: 1px solid #ccc;*/
}

/* flow-desc: 右側 */
.flow-timetable td:last-child {
  color: #666;
}

/* ↓または→矢印の表示用 */
.flow-timetable tr:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #888;
}

/* 横型に切り替え（タブレット以上） */
@media not print and (min-width: 768px) {
  .flow-timetable {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .flow-timetable tr {
    display: inline-block;
    width: auto;
    min-width: 200px;
    margin-right: 1.5rem;
  }

  .flow-timetable td {
    display: block;
  }

  .flow-timetable tr:not(:last-child)::after {
    content: "→";
    left: auto;
    right: -1.5rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
@media print{
  .flow-timetable td {
    font-size:small;
    padding: 0.2rem 0.2rem;
  }
}