@charset "UTF-8";

/* ============================
   TOMOWL - RESERVE ページ
   ============================ */

/* ---------- Reserve Section ---------- */
.reserve-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  background-color: #f5f3ee;
}

/* ---------- Reserve Description ---------- */
.reserve-desc {
  max-width: 343px;
  padding-bottom: 24px;
}

.reserve-desc--line {
  padding-top: 24px;
}

/* ---------- Reserve CTA Buttons ---------- */
.btn-cta--reserve {
  width: 216px;
}

.btn-cta__label {
  display: block;
}

.btn-cta__label--montserrat {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 1.2px;
  line-height: 1.5;
}

.btn-cta__label--montserrat-lg {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 1.4px;
  line-height: 1.5;
}

.external-link-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* ---------- Section Title (Japanese) ---------- */
.reserve-section-title--jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #034234;
  font-size: 2rem;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.45;
  padding: 12px 0 24px;
}

/* ---------- Guide Block ---------- */
.reserve-guide-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.reserve-guide-block--cancel {
  padding-top: 24px;
}

.reserve-guide-block--formen {
  padding-top: 32px;
}

.reserve-guide-block--policy {
  padding-top: 32px;
  padding-bottom: 48px;
}

/* ---------- Guide Heading (boxed) ---------- */
.reserve-guide-heading {
  width: 230px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ca9c00;
  border-radius: 4px;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: #333a3a;
  letter-spacing: 0.32px;
  line-height: 1.6;
  text-align: center;
}

/* ---------- Bordered Heading (Montserrat) ---------- */
.reserve-bordered-heading {
  width: 230px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: #333a3a;
  letter-spacing: 1.6px;
  line-height: 1.5;
  text-align: center;
}

.reserve-bordered-heading--gold {
  border: 1px solid #ca9c00;
}

.reserve-bordered-heading--green {
  border: 1px solid #096b55;
}

/* ---------- Info Card (white bg) ---------- */
.reserve-info-card {
  width: 100%;
  max-width: 294px;
  margin-top: 18px;
  padding: 12px 6px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #333a3a;
  letter-spacing: 0.72px;
  line-height: 1.8;
  text-align: center;
}

/* ---------- Cancel Cards ---------- */
.cancel-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-top: 24px;
  align-items: center;
}

.cancel-card {
  width: 100%;
  max-width: 294px;
  padding: 6px 6px 12px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  text-align: center;
}

.cancel-card__title {
  padding: 0 10px;
  text-decoration: underline;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #333a3a;
  letter-spacing: 0.72px;
  line-height: 1.8;
  text-align: center;
}

.cancel-card__title--multi {
  text-decoration: underline;
}

.cancel-card__desc {
  padding-top: 6px;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #333a3a;
  letter-spacing: 0.72px;
  line-height: 1.8;
  text-align: center;
}

.cancel-note {
  padding: 0 6px;
  text-align: center;
}

/* ---------- Salon Info Table ---------- */
.salon-info-table {
  width: 100%;
  margin: 0 auto;
  padding-top: 0;
}

.salon-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0 10px 12px;
}

.salon-info-label {
  width: 110px;
  flex-shrink: 0;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #333a3a;
  letter-spacing: 0.4px;
  line-height: 1.8;
}

.salon-info-value {
  flex: 1;
  text-align: left;
  padding-left: 8px;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #333a3a;
  letter-spacing: 0.4px;
  line-height: 1.8;
}

.salon-info-row:first-child {
  padding-top: 24px;
}

.salon-info-row--border-gold {
  border-bottom: 0.5px solid #ca9c00;
}

.salon-info-row--border-green {
  border-bottom: 0.5px solid #096b55;
}

.salon-info-row--note {
  padding: 20px 0;
}

.salon-info-note {
  width: 100%;

  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #333a3a;
  letter-spacing: 0.4px;
  line-height: 1.8;
  text-align: center;
}

/* ---------- Policy Card ---------- */
.policy-card {
  width: 100%;
  max-width: 294px;
  margin-top: 24px;
  padding: 12px 6px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
}

.policy-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #333a3a;
  letter-spacing: 0.4px;
  line-height: 1.8;
  text-align: center;
}

/* ============================
   Tablet / Mid size layout
   760px - 1199px
   ============================ */
@media screen and (min-width: 760px) and (max-width: 1199px) {
  .reserve-section {
    padding-left: 8%;
    padding-right: 8%;
  }

  .salon-info-table {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .salon-info-row {
    gap: 36px;
    padding: 14px 0;
  }

  .salon-info-row:first-child {
    padding-top: 24px;
  }

  .salon-info-label {
    width: 120px;
    flex: 0 0 120px;
  }

  .salon-info-value {
    width: 200px;
    padding-left: 0;
    text-align: left;
  }

  .reserve-info-card,
  .cancel-card,
  .policy-card {
    max-width: 420px;
  }
}