.due-date-checker {
  max-width: 700px;
  padding: 28px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  font-size: 16px;
}

.due-date-checker label {
  display: block;
  margin-bottom: 16px;
  font-weight: bold;
  color: #444;
}

.due-date-checker select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  min-width: 120px;
  margin: 10px 8px 10px 0;
  padding: 12px 42px 12px 14px;

  font-size: 16px;
  color: #333;

  border: 1px solid #d9d9d9;
  border-radius: 12px;

  background-color: #fff;

  /* ▼ 矢印 */
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%);

  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);

  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;

  cursor: pointer;
  transition: all 0.2s ease;
}

.due-date-checker select:hover {
  border-color: #f3a6b8;
}

.due-date-checker select:focus {
  outline: none;
  border-color: #f08ca3;
  box-shadow: 0 0 0 4px rgba(240, 140, 163, 0.15);
}

#checkDueDate {
  display: inline-block;
  margin-top: 10px;
  padding: 14px 28px;

  font-size: 16px;
  font-weight: bold;
  color: #fff;

  border: none;
  border-radius: 999px;

  background: linear-gradient(135deg, #f7a8b8 0%, #f08ca3 100%);

  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(240, 140, 163, 0.25);
}

#checkDueDate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(240, 140, 163, 0.35);
}

#checkDueDate:active {
  transform: translateY(0);
}

.due-date-result {
  margin-top: 22px;
  padding: 16px;

  border-radius: 14px;
  background: #fff7f9;

  font-weight: bold;
  line-height: 1.9;
  color: #444;
}

.reservation-highlight {
  color: #e96a8d;
  font-size: 1.2em;
  font-weight: bold;
}



/* スマホ対応 */
@media screen and (max-width: 600px) {
  .due-date-checker {
    padding: 20px;
  }

  .due-date-checker select {
    width: 100%;
    margin-right: 0;
  }

  #checkDueDate {
    width: 100%;
  }
}