/* ==========================================
   Step Indicator (申込ステップ)
   ========================================== */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 56rem;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.step-number {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background-color: #e5e7eb;
  color: #6b7280;
  font-size: 1.125rem;
  transition: all 0.3s;
}

.step-item.step-active .step-number {
  background-color: #4f46e5;
  color: #ffffff;
}

.step-item.step-completed .step-number {
  background-color: #10b981;
  color: #ffffff;
}

.step-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
  text-align: center;
}

.step-item.step-active .step-label {
  color: #4f46e5;
  font-weight: 600;
}

.step-item.step-completed .step-label {
  color: #10b981;
}

.step-line {
  flex: 1;
  height: 2px;
  background-color: #e5e7eb;
  margin: 0 1rem;
  max-width: 8rem;
}

.step-line-completed {
  background-color: #10b981;
}

.icon-check-white {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.general-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 2rem;
}

.general-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
  line-height: 2.25rem;
}

.general-subtitle {
  color: #4b5563;
  margin-bottom: 1.5rem;
}

.general-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.registration-container {
  max-width: 48rem;
  margin: 0 auto;
}

.form-section {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 640px) {
  .general-card {
    padding: 1rem;
  }

  .form-section {
    padding: 1rem;
  }
}

.section-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.required {
  color: #dc2626;
  font-weight: bold;
}

/* Radio button styles */
.radio-group {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}

.radio-label input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  flex-shrink: 0;
}

.radio-label input[type="radio"]:disabled {
  cursor: not-allowed;
}

.radio-label span {
  user-select: none;
}

/* ==========================================
   Reset and Base Styles (共通)
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f9fafb;
  color: #111827;
  min-height: 100vh;
}

/* ==========================================
   Common Container (共通)
   ========================================== */
.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

.bold {
  font-weight: bold;
}

/* ==========================================
   Common Button Styles (共通)
   ========================================== */
.btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  text-wrap: auto;
}

.btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #4338ca;
}

.btn-secondary {
  background-color: #ffffff;
  color: #4f46e5;
  border: 2px solid #4f46e5;
}

.btn-secondary:hover {
  background-color: #eef2ff;
}

/* ==========================================
   Common Form Styles (共通)
   ========================================== */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  display: block;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
}

.form-group .label {
  padding: 0 1rem;
}

.form-input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-input::placeholder {
  color: #9ca3af;
}

.form-input:disabled {
  background-color: #f3f4f6; 
  cursor: not-allowed;
  opacity: 1;
}

/* ==========================================
   Common Error Message (共通)
   ========================================== */
.error-message:not(.form-group .error-message) {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin: 1rem 0;
}

.form-group .error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

.normal-message {
  background-color: #d1fae5;
  border: 1px solid #6ee7b7;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin: 1rem 0;
}

/* ==========================================
   Common Icons (共通)
   ========================================== */
/* SVG Icons as Background Images */
.icon-calendar {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-arrow-left {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-indigo {
  filter: invert(36%) sepia(79%) saturate(2717%) hue-rotate(233deg) brightness(91%) contrast(92%);
}

.icon-location {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-file {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-logout {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-login {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-user-plus {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ==========================================
   Header Styles (イベント一覧画面)
   ========================================== */
.header {
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4f46e5;
  line-height: 2rem;
}

.user-info {
  font-size: 0.875rem;
  color: #4b5563;
  margin-top: 0.25rem;
}

/* ==========================================
   Navigation Styles (イベント一覧画面)
   ========================================== */
.nav {
  display: flex;
  gap: 1rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
  color: #4b5563;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
}

.nav-link:hover {
  background-color: #f3f4f6;
}

.nav-link-active {
  background-color: #e0e7ff;
  color: #4338ca;
}

/* ==========================================
   Main Content (イベント一覧画面)
   ========================================== */
.main {
  padding: 2rem 0;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
  line-height: 2.25rem;
}

.page-description {
  color: #4b5563;
}

/* ==========================================
   Event Grid (イベント一覧画面)
   ========================================== */
.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   Event Card (イベント一覧画面)
   ========================================== */
.event-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.event-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.event-content {
  padding: 1.5rem;
}

.event-category {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #e0e7ff;
  color: #4338ca;
  border-radius: 9999px;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.event-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.75rem;
  line-height: 1.75rem;
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.event-detail-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: #4b5563;
  font-size: 0.875rem;
}

/* ==========================================
   Login Page Styles (ログイン画面)
   ========================================== */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-wrapper {
  max-width: 28rem;
  width: 100%;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
  line-height: 2.25rem;
}

.login-subtitle {
  color: #4b5563;
  font-size: 1rem;
}

.login-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 2rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.btn-half-width {
  width: 50%;
  margin: 0 auto;
}

/* ==========================================
   Responsive (共通)
   ========================================== */
@media (max-width: 640px) {
  .login-card {
    padding: 1.5rem;
  }
  
  .login-title {
    font-size: 1.5rem;
  }

  .btn-half-width {
    width: 100%;
  }
}

/* ==========================================
   Event Detail Page Styles (イベント詳細画面)
   ========================================== */
.event-detail-container {
  max-width: 56rem;
  margin: 0 auto;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4b5563;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}

.back-button:hover {
  color: #111827;
}

.event-detail-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.event-detail-content {
  padding: 2rem;
}

.event-detail-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
  line-height: 2.25rem;
}

/* Event Info Grid */
.event-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .event-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.event-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.info-label {
  color: #111827;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.info-value {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.5;
}

.text-red {
  color: #dc2626;
}

/* Event Description Section */
.event-description-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.75rem;
}

.event-description {
  color: #4b5563;
  line-height: 1.75;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .event-detail-content {
    padding: 1.5rem;
  }
  
  .event-detail-title {
    font-size: 1.5rem;
  }
}

/* Table styles */
.table-container {
  overflow-x: auto;
  margin-bottom: 0.5rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  table-layout: fixed;
}

.table.layout-auto {
  table-layout: auto;
}

.table thead {
  background-color: #f9fafb;
}

.table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
}

.table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background-color: #f9fafb;
}


input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.drop-area {
  flex: 1;
  min-width: 250px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s ease;
}

.drop-area.drag-over {
  border-color: #007bff;
  background-color: #e7f3ff;
}

.file-info {
  font-weight: bold;
  color: #007bff;
  margin-top: 10px;
  word-break: break-all; /* 長いファイル名対策 */
}


.form-help-text {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0;
}

.form-actions {
  padding-top: 1rem;
}

.form-actions-split {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
}

.form-actions-split .btn {
  flex: 1;
}

.notice {
  background-color: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  margin: 0;
}

.border {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.form-section h3:nth-of-type(n+3) {
  border-top: 1px solid #e5e7eb;
  margin-top: 1.0rem;
  padding-top: 1.5rem;
}

/* ==========================================
   Confirmation Styles (確認画面)
   ========================================== */
.confirmation-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.confirmation-section {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
}

.confirmation-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.confirmation-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.75rem;
}

.confirmation-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.confirmation-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.confirmation-label {
  min-width: 10rem;
  color: #6b7280;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.confirmation-value {
  flex: 1;
  color: #111827;
  font-size: 1rem;
}

/* ==========================================
   Complete Styles (完了画面)
   ========================================== */
.complete-card {
  text-align: center;
}

.complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: #d1fae5;
  border-radius: 50%;
  margin-bottom: 1.5rem;
}

.icon-check-circle {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.complete-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
  line-height: 2.25rem;
}

.complete-message {
  color: #4b5563;
  margin-bottom: 1.5rem;
}

.complete-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: left;
}

.icon-mail {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.complete-notice-content {
  flex: 1;
}

.complete-notice-title {
  color: #111827;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.complete-notice-text {
  color: #4b5563;
  font-size: 0.875rem;
}

.btn-with-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.icon-credit-card {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.button-grid{
  display: grid;
  gap: 1rem;
}

/* ==========================================
   Payment Page Styles
   ========================================== */
.payment-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.payment-header h2 {
  margin: 0;
  margin-left: 0.75rem;
}

.payment-summary {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.payment-summary h3 {
  color: #111827;
  margin: 0 0 1rem 0;
}

.summary-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-label {
  color: #6b7280;
  font-size: 0.875rem;
}

.summary-value {
  color: #111827;
  font-size: 0.875rem;
}

.summary-total {
  border-top: 1px solid #e5e7eb;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  color: #111827;
  font-weight: 500;
}

.total-amount {
  color: #111827;
  font-size: 1.25rem;
  font-weight: 500;
}

.security-notice {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
}

.security-notice h3 {
  margin-bottom: 1rem;
}

.icon-lock {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 0.75rem;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.security-text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}

.payment-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.btn-payment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-payment .icon-lock {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  margin-right: 0.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================
   Payment Complete Page Styles
   ========================================== */
.payment-success-notice {
  background-color: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: flex-start;
  text-align: left;
}

.icon-credit-card-green {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 0.75rem;
  margin-top: 0.125rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.success-notice-content {
  flex: 1;
}

.btn-full-width {
  width: 100%;
}

.btn:disabled{
  background-color: #d1d5dc !important;
  cursor: not-allowed !important;
}

ul {
  list-style-position: inside;
}

/* カレンダー外枠 */
.calendar-popup {
  display: none;
  position: fixed;
  z-index: 10000;
  background: #ffffff;
  border: 1px solid #dddddd;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  padding: 15px;
  width: 92%;       /* スマホ用 */
  max-width: 340px; /* PC用（一回り小さいサイズ） */
  box-sizing: border-box;
  border-radius: 10px;
  font-family: sans-serif;
}

/* ヘッダー */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.calendar-header span {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.calendar-header button {
  cursor: pointer;
  border: 1px solid #eee;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 14px;
}

/* テーブル */
.calendar-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.calendar-table th, .calendar-table td {
  width: 14.28%;
  text-align: center;
  vertical-align: middle;
}
.calendar-table th {
  font-size: 13px;
  color: #aaa;
  padding-bottom: 10px;
  font-weight: normal;
}

/* 日付セル */
.calendar-table td {
  padding: 10px 0;
  font-size: 16px;
  color: #444;
  cursor: pointer;
  border-radius: 6px;
}
.calendar-table td:not(:empty):hover {
  background-color: #007bff;
  color: #ffffff;
}

/* 今日 */
.calendar-table td.today {
  font-weight: bold;
  background-color: #fff1f0;
}

/* 選択日 */
.calendar-table td.selected {
  font-weight: bold;
  box-shadow: inset 0 0 0 2px #444; /* 内側に枠線を引く */
}

/* 曜日別の色固定設定 */
.calendar-table .sun { color: #ff4d4f; } /* 日曜は赤 */
.calendar-table .sat { color: #007bff; } /* 土曜は青 */

.btn-link-center {
  display: block;
  width: 100%;
  text-align: center;
  color: #4f46e5;
  background: none;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  transition: color 0.2s;
}

.btn-link-center:hover {
  color: #4338ca;
  text-decoration: underline;
}