body {
  font-family: sans-serif; background-color: #f4f7f6;
  display: flex; justify-content: center; padding-top: 20px;
}

.app-container {
  background: white; padding: 20px; border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-align: center;
  width: 100%; max-width: 600px;
}

.question-text {
  font-size: 18px; font-weight: bold; padding: 15px; border: 3px solid #4caf50;
  border-radius: 5px; margin-bottom: 15px; text-align: left; line-height: 1.5;
}

/* 時計 */
.clock {
  width: 180px; height: 180px; border: 5px solid #0056b3; border-radius: 50%;
  position: relative; margin: 0 auto 10px; background: #ffffe0;
}
.center-dot {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
  background: #fff; border: 3px solid #e91e63; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 10;
}
.hand {
  position: absolute; bottom: 50%; left: 50%;
  transform-origin: bottom center; transition: transform 1s ease-in-out; border-radius: 10px;
}
.hour { width: 7px; height: 45px; background: #2196f3; margin-left: -3.5px; z-index: 5; }
.minute { width: 5px; height: 75px; background: #e91e63; margin-left: -2.5px; z-index: 6; }
.number { position: absolute; top: 50%; left: 50%; font-size: 14px; font-weight: bold; color: #333; }
#timeDisplay { margin: 5px 0 15px; font-size: 22px; color: #d32f2f; font-weight: bold; }

/* ガイダンスメッセージ */
.instruction-box {
  background: #fff9c4; padding: 10px; border-radius: 8px; font-weight: bold;
  color: #333; margin-bottom: 15px; font-size: 16px; border: 2px dashed #fbc02d;
}
.instruction-box.success { background: #c8e6c9; border-color: #4caf50; }
.instruction-box.error { background: #ffccbc; border-color: #ff5722; }

/* 戻る数直線（右から左） */
.timeline-container { margin: 10px 0 20px; padding: 15px 5px; background: #e3f2fd; border-radius: 8px; }
.timeline-row { display: flex; align-items: center; justify-content: space-between; }
.time-point { font-weight: bold; font-size: 15px; width: 70px; }
.arrow-container { flex-grow: 1; display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 10px; }

/* 入力ボックス */
.input-group { background: #fff; border: 2px solid #90caf9; padding: 5px; border-radius: 6px; display: flex; align-items: center; margin-bottom: 5px; }
.num-input { width: 40px; font-size: 16px; text-align: center; border: 1px solid #ccc; margin-right: 5px; border-radius: 4px; }
.btn-check { background: #ff9800; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-weight: bold; cursor: pointer; }
.btn-check:hover { background: #f57c00; }
.btn-check:disabled { background: #ccc; cursor: not-allowed; }

/* 左向きの矢印線 */
.arrow-line-left { width: 100%; height: 4px; background: #e91e63; position: relative; }
.arrow-line-left::before {
  content: ''; position: absolute; left: -6px; top: -4px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid #e91e63;
}

.btn-reset { width: 100%; padding: 12px; font-size: 16px; font-weight: bold; background: #9e9e9e; color: white; border: none; border-radius: 5px; cursor: pointer; }
.btn-reset:hover { background: #757575; }