/*------------------------------------------------------------
for develop
------------------------------------------------------------*/

.mp-fixed {
  z-index: 2222 !important;
  position: fixed !important;
  bottom: 0;
  width: 100%;
  background-color: rgba(253, 252, 252, 0.363);

  -webkit-animation: opacity 1s ease-in-out 1 forwards;
          animation: opacity 1s ease-in-out 1 forwards;
}

.button-house {
  margin: 0 auto;
  padding: 14px;
  border: none;
  border-radius: 24px;
  display: block;
  width: 75%;
  background-color: #1eaf7b;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.bg-grad-green-house {
  background: #3d846e;
  background: linear-gradient(135deg, #3d846e 0%, #00c7aa 100%);
  padding-bottom: 15px;
}

.table.card-info thead th .label-house,
.table.card-info tbody th .label-house,
.table.card-info tbody td .label-house {
  color: #1eaf7b;
  background-color: #F2F5F5;
  padding: 8px 3px;
  font-size: 11px;
}

.list-special-house li {
  border-radius: 10px;
  background-color: white;
  min-height: 90px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 15px;
  padding: 8px 3%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.list-special-house li .num {
  margin-bottom: 0;
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 10px;
  border: 2px solid #1eaf7b;
  color: #1eaf7b;
}
.list-special-house li .num.red {
  border: 2px solid #ff582e;
  color: #ff582e;
}

.mainte-reserve-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  padding: 16px 24px;
  border: none;
  border-radius: 9999px;
  background-color: #00C7A9;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mainte-reserve-search-button:hover {
  background-color: #00C7A9;
}

.mainte-reserve-search-icon {
  width: 24px;
  height: 24px;
  /* SVGが白色でない場合は、以下のフィルターで白色に変更できます */
  filter: brightness(0) invert(1);
}

.mainte-reserve-back-container {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 16px;
}

.mainte-reserve-back-link {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #00C7A9;
  font-size: 1rem;
  font-weight: 700;
}

.mainte-reserve-back-arrow {
  width: 24px;
  height: 24px;
  /* SVGの色を#00C7A9に変更する場合は以下のフィルターを使用 */
  filter: invert(70%) sepia(93%) saturate(411%) hue-rotate(121deg) brightness(89%) contrast(101%);
}

/*  */
.mainte-reserve-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background-color: #fff;
}

.mainte-reserve-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 22px;
  text-align: center;
}

.mainte-reserve-text {
  font-size: 1rem;
  font-weight: 700;
  color: #2c31a6;
  margin: 0;
}

.mainte-reserve-text-emphasis {
  font-size: 1rem;
  font-weight: 700;
  color: #2c31a6;
  margin: 0;
}

.mainte-reserve-icon {
  margin: 24px 0;
}

.mainte-reserve-icon img {
  width: 64px;
  height: 64px;
}

.mainte-reserve-favorite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  padding: 16px 24px;
  margin-bottom: 24px;
  border: none;
  border-radius: 9999px;
  background-color: #00C7A9;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mainte-reserve-favorite-button:hover {
  opacity: 0.9;
}

.mainte-reserve-star-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.mainte-reserve-back-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mainte-reserve-back-link {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #00C7A9;
  font-size: 1rem;
  font-weight: 700;
}

.mainte-reserve-back-arrow {
  width: 24px;
  height: 24px;
  filter: invert(70%) sepia(93%) saturate(411%) hue-rotate(121deg) brightness(89%) contrast(101%);
}

.preferreddate-complete-text {
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #2C31A6;
}