section#reservation {
  margin-bottom: 0;
}

/* =========================
   Contact Form 7 Reserve Form
   ========================= */

   .reserve-form {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px 22px 40px;
    background: var(--background); /* 画像に近い薄グレージュ */
    color: var(--text-color);
    font-family: var(--ff-yonaga);
    line-height: 1.8;
    box-sizing: border-box;
  }
  
  .reserve-form * {
    box-sizing: border-box;
  }
  
  .reserve-form .wpcf7-form-control-wrap {
    display: block;
  }
  
  .rf-lead {
    text-align: center;
    font-size: 14px;
    line-height: 2;
    margin: 0 0 28px;
    letter-spacing: 0.08em;
  }
  
  .rf-block {
    margin-bottom: 22px;
  }
  
  .rf-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
  }
  
  .rf-mini-label {
    display: block;
    font-size: 14px;
    color: #6f6b67;
    margin-bottom: 4px;
    letter-spacing: 0.08em;
  }
  
  .rf-grid {
    display: flex;
    gap: 12px 16px;
  }
    
  .rf-grid-birth {
    gap: 10px 12px;
  }
  
  .rf-grid-time {
    gap: 10px 14px;
  }
  
  .rf-field {
    min-width: 0;
  }
  
  .rf-field-inline {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .rf-grid-2 + .rf-grid-2 {
    margin-top: 20px;
  }
  
  /* 入力欄（下線のみ） */
  .reserve-form .rf-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--text-color);
    background: transparent;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.4;
    padding: 4px 2px 6px;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    letter-spacing: 0.06em;
  }
  
  .reserve-form .rf-input::placeholder {
    color: #8f8a84;
    opacity: 1;
  }
  
  .reserve-form .rf-input:focus {
    border-bottom-color: #5e5954;
  }

  .reserve-form .rf-input:focus::placeholder {
    color: transparent;
  }
  
  /* 年月日・時分用の短いinput */
  .reserve-form .rf-input-inline {
    width: 50px;
    min-width: 0;
    text-align: center;
  }
  
  .rf-unit {
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    padding-bottom: 4px;
    letter-spacing: 0.08em;
  }
  
  /* number入力のスピナー非表示（任意） */
  .reserve-form input[type="number"]::-webkit-outer-spin-button,
  .reserve-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .reserve-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  
  .rf-note {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-color);
    margin: 0 0 10px;
    letter-spacing: 0.04em;
  }
  
  .rf-note-bottom {
    margin: 10px 0 18px;
  }
  
  /* テキストエリア */
  .reserve-form .rf-textarea {
    width: 100%;
    min-height: 170px;
    resize: vertical;
    border: 1px solid var(--text-color);
    border-radius: 14px;
    background: #eeeee8;
    color: var(--text-color);
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.9;
    outline: none;
    box-shadow: none;
    vertical-align: middle;
  }
  
  .reserve-form .rf-textarea::placeholder {
    color: #8b8782;
    opacity: 1;
    white-space: pre-line;
  }
    
  .rf-consent {
    margin: 8px 0 14px;
    text-align: center;
  }

  .rf-consent label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .rf-consent .wpcf7-list-item {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #3f3a37;
    letter-spacing: 0.05em;
  }
  
  .rf-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-color);
    cursor: pointer;
  }
  
  /* 送信ボタン */
  .rf-submit-wrap {
    text-align: center;
    margin-top: 8px;
    position: relative;
    border: 2px solid var(--text-color);
    padding: 3px;
    border-radius: 13px;
    width: 300px;
    margin: 0 auto;
  }
  
  .reserve-form .rf-submit {
    appearance: none;
    border: 1px solid var(--text-color);
    border-radius: 14px;
    background: var(--sub-color);
    color: var(--text-color);
    font-size: 15px;
    padding: 12px 20px;
    margin: 0 auto;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
    letter-spacing: 0.1em;
    display: block;
    border-radius: 10px;
    width: 100%;
  }

  .reserve-form .rf-submit:disabled {
    opacity: 0.5;
    background: #cac9c7;
    cursor: not-allowed;
  }
  
  /* ポリシーリンク */
  .rf-policy-link {
    text-align: center;
    margin: 10px 0 0;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-decoration: underline;
    color: var(--text-color);
    cursor: pointer;
  }
    
  /* エラーメッセージ */
  .reserve-form .wpcf7-not-valid-tip {
    color: var(--accent-color);
    white-space: nowrap;
    font-size: 10px;
    position: absolute;
    bottom: -20px;
    left: 0;
    
  }
  
  .reserve-form .wpcf7 form.invalid .wpcf7-response-output,
  .reserve-form .wpcf7 form.unaccepted .wpcf7-response-output,
  .reserve-form .wpcf7 form.sent .wpcf7-response-output {
    margin: 16px 0 0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
  }
  
  /* スマホ */
  @media (max-width: 480px) {
    .reserve-form {
      padding: 24px 16px 34px;
    }  

    .reserve-form .rf-submit {
      width: 100%;
      min-width: 0;
    }
  }

  /* select を下線スタイルに */
.reserve-form .rf-select{
  width: 60px;
  border: none;
  border-bottom: 1px solid var(--text-color);
  background: transparent;
  color: var(--text-color);
  padding: 4px;
  font-size: 14px;
  text-align: center;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.reserve-form .rf-field-inline .wpcf7-form-control-wrap {
  position: relative;
}
.reserve-form .rf-field-inline:has(.rf-select) .wpcf7-form-control-wrap::after{
  content: "▾";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-color);
  pointer-events: none;
}


/* =========================
   Policy Modal
   ========================= */

.policy-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  filter: blur(5px);
  opacity: 0;
  transition: opacity 1s ease-in-out, filter 1s ease-in-out, z-index 1s ease-in-out;
}

.policy-modal.open {
  display: block;
  opacity: 1;
  filter: blur(0);
  z-index: 1000;
}

.policy-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 500px;
  background: var(--background);
  padding: 10px;
  padding-top: 40px;
  border-radius: 10px;
}

.policy-modal-content-inner-text {
  color: var(--text-color);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--text-color) var(--background);
  height: calc(100dvh - 300px);
  padding-right: 8px;
  padding-bottom: 20px;
  text-align: justify;
  font-size: 14px;
}

.policy-modal-content-inner-text span.ff-shippori {
  font-size: 16px;
}

.policy-modal-content h2 {
  color: var(--text-color);
  font-size: 16px;
}

.policy-modal-content-inner {
  border-radius: 10px;
  color: var(--text-color);
}

.close-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--text-color);
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.close-btn:before, .close-btn:after {
  background-color: #FFFFFF;
}

.note-text {
  font-size: 13px;
}


@media (min-width: 550px) {
  .policy-modal-content {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
  }
}


/* 送信を試みるまでエラー表示を隠す */
.reserve-form form:not(.rf-show-errors) .wpcf7-not-valid-tip {
  display: none !important;
}

.wpcf7 form .wpcf7-response-output {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
  display: block;
  background-color: var(--sub-color);
  border: none;
  margin-bottom: 10px!important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  display: block;
  border: none;
  color: var(--accent-color);
  margin-bottom: 10px!important;
}

.wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(50% + 100px);
  transform: translate(-50%, -50%);
  margin: 0;
  background-color: var(--text-color);
}

.wpcf7-spinner::before {
  background-color: #ffffff;
}