/* 基本設定 */
body {
  font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", MS PGothic, sans-serif;
  margin: 0;
  padding: 0 15px 150px 15px;
  background: #f4f7f9;
  font-size: 16px;
  color: #333;
  line-height: 1.6
}
.container {
  max-width: 600px;
  margin: 15px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,.05)
}
h1 {
  text-align: center;
  color: #114a80;
  font-size: 2.1em;
  margin-bottom: 30px;
  font-weight: bold
}
.form-group { margin-bottom: 25px }
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #114a80;
  font-size: 1.0em
}
input[type="number"], input[type="tel"], input[type="date"], select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1.1em;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  transition: border-color .2s
}
input:focus, select:focus {
  outline: none;
  border-color: #114a80;
  box-shadow: 0 0 0 2px rgba(17,74,128,.2)
}
.input-with-icon { position: relative; width: 100% }
.input-with-icon input[type="tel"] { padding-right: 100px }
.icon-inside {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #555;
  cursor: pointer;
  transition: color .2s
}
.icon-inside:hover { color: #114a80 }
.camera-icon-inside { right: 0 }
.gallery-icon-inside { right: 50px }

/* ★追加: 強調した注意書きのスタイル */
.notice-message {
  background-color: #fff9c4; /* 薄い黄色 */
  border: 2px solid #fbc02d; /* 濃い黄色枠 */
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 25px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.notice-message p {
  color: #d32f2f; /* 赤文字 */
  font-weight: 900; /* 極太 */
  font-size: 1.3em; /* 大きく */
  margin: 0;
  letter-spacing: 0.05em;
}

.input-pair {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  position: relative;
  background: #fdfdfd
}
.input-pair .tel-input { flex: 3; margin-right: 10px }
.input-pair .time-input { flex: 1 }
.input-pair label {
  font-size: .9em;
  font-weight: normal;
  color: #555;
  margin-bottom: 5px
}
.delete-btn {
  position: absolute;
  right: -12px;
  top: -12px;
  background: #d9534f;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.2)
}
.customer-name-display {
  font-size: .9em;
  color: #0056b3;
  font-weight: bold;
  margin-top: 5px;
  padding-left: 2px;
  min-height: 1.2em
}
.error-message {
  font-size: .9em;
  color: #d9534f;
  font-weight: bold;
  margin-top: 5px;
  padding-left: 2px;
  min-height: 1.2em
}
input.error, select.error {
  border-color: #d9534f!important;
  background: #fff8f8
}
.bottom-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 15px 0;
  box-shadow: 0 -2px 5px rgba(0,0,0,.1);
  box-sizing: border-box;
  text-align: center;
  z-index: 900;
  border-top: 1px solid #e0e0e0
}
.btn {
  color: #fff;
  padding: 15px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  width: 90%;
  max-width: 450px;
  transition: background-color .2s ease, opacity .2s;
  display: block;
  margin: 5px auto
}
.submit-btn { background: #114a80 }
.search-btn { background: #6c757d }
.btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: .7
}

/* ★追加: 送信中のローディングオーバーレイ */
#loadingOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.85); /* 少し白っぽくして背景を隠す */
  z-index: 9999;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#loadingOverlay .spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #114a80;
  border-radius: 50%;
  width: 60px; height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
#loadingOverlay p {
  color: #114a80;
  font-weight: bold;
  font-size: 1.2em;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 15px;
  box-sizing: border-box
}
.modal-content {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,.2);
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  text-align: center
}
.modal-content h2 { color: #114a80; margin-top: 0 }
.modal-close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 2em; font-weight: bold;
  color: #aaa; cursor: pointer; line-height: 1
}
.modal-close-btn:hover { color: #333 }

#successModal .icon {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 18px; height: 72px; margin-bottom: 16px
}
#successModal .tool {
  width: 56px; height: 56px; opacity: 0;
  transform: translateY(24px) scale(0.96)
}
#successModal.show .tool { animation: popUp 500ms cubic-bezier(.2,.8,.2,1) forwards }
#successModal .tool:nth-child(2) { animation-delay: 120ms }
@keyframes popUp {
  0% { opacity: 0; transform: translateY(28px) scale(.92) }
  60% { opacity: 1; transform: translateY(-6px) scale(1.02) }
  100% { opacity: 1; transform: translateY(0) scale(1) }
}
#successModal p {
  font-size: 1.2em; font-weight: bold; margin-bottom: 25px;
  color: #333; opacity: 0; transform: translateY(28px)
}
#successModal.show p { animation: riseIn 500ms cubic-bezier(.2,.8,.2,1) 180ms forwards }
@keyframes riseIn {
  0% { opacity: 0; transform: translateY(28px) }
  60% { opacity: 1; transform: translateY(-6px) }
  100% { opacity: 1; transform: translateY(0) }
}
#successOkBtn {
  background: #114a80; color: #fff; border: none;
  border-radius: 4px; padding: 12px 35px;
  font-size: 1.1em; cursor: pointer
}

#searchResultArea { text-align: left; margin-top: 20px }
#searchResultArea table { width: 100%; border-collapse: collapse }
#searchResultArea th, #searchResultArea td { border: 1px solid #ddd; padding: 8px; font-size: .9em }
#searchResultArea th { background: #f2f2f2; font-weight: bold }
#searchResultArea tr:nth-child(even) { background: #f9f9f9 }

#scanner-popup {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.9); z-index: 2000;
  display: none; flex-direction: column;
  justify-content: center; align-items: center
}
#scanner-video { width: 90%; max-width: 500px; height: auto; border: 2px solid #fff; border-radius: 10px }
#scanner-popup p { color: #fff; font-size: 1.2em; margin: 20px 0 }
#close-scanner {
  background: #d9534f; color: #fff; padding: 15px 30px;
  font-size: 1.2em; border-radius: 10px; border: none; cursor: pointer; margin-top: 20px
}

#fallingAlert {
  position: fixed; left: 50%; top: -120px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.98);
  border: 3px solid #d9534f; border-radius: 10px;
  padding: 12px 18px; z-index: 3000;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  font-weight: 900; color: #d9534f; font-size: 22px;
  letter-spacing: .05em; text-align: center;
  text-shadow: 0 1px 0 #fff, 0 0 6px rgba(217,83,79,.25);
  pointer-events: none; white-space: nowrap; opacity: 0
}
#fallingAlert.show { animation: dropCenter 1200ms cubic-bezier(.2,.9,.2,1) forwards }
@keyframes dropCenter {
  0% { top: -120px; opacity: 0 }
  45% { top: 40vh; opacity: 1 }
  70% { top: 36vh; opacity: 1 }
  100% { top: 40vh; opacity: 0 }
}
.hidden { display: none!important }