/* =====================================
 *  来店予約フォーム（/visit-reservation）
 *  テーマ stylepage.css の formTable を土台に、差分だけを足す
 * ===================================== */

/* 改行してよい位置の区切り（この中では改行しない） */
.vrsvNb {
  display: inline-block;
  line-height: inherit; /* テーマの span { line-height: 1 } を打ち消す */
}

/* 店舗の電話番号一覧（リード文の下） */
.vrsvTelList {
  list-style: none;
  width: auto;
  max-width: 560px;
  margin: 30px auto 0;
  padding: 18px 24px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.vrsvTelList li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  font-size: 14px;
  text-align: left;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.vrsvTelList li + li {
  border-top: 1px dotted #ccc;
}
.vrsvTelList li > * {
  line-height: 1.6; /* テーマの span { line-height: 1 } を打ち消す */
}
.vrsvTelList small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.vrsvTelList a {
  color: #511d4a;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  text-decoration: none;
}
.vrsvTelList a:before {
  content: "\260E";
  margin-right: 6px;
  font-size: 0.9em;
}

/* KIYOKO HATA LP から来たときの案内 */
.vrsvLpNotice {
  margin-bottom: 40px;
  padding: 18px 20px;
  text-align: center;
  background-color: #f6f1f6;
  border: 1px solid #c9b6cc;
}
.vrsvLpNotice[hidden] {
  display: none;
}
.vrsvLpNotice__ttl {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #511d4a;
}
.vrsvLpNotice__txt {
  font-size: 13px;
  margin-top: 6px;
  color: #575757;
}

/* 見出しの「*」を2行見出しでもずれないように */
.formTable__row.-vt .formTable__head {
  padding-top: 12px;
}
.formTable__row.-vt .formTable__head.-req:before {
  top: 10px;
}

/* ご来店店舗：カード型のラジオ */
.-vrsvShop .formTable__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.-vrsvShop .mwform-radio-field {
  display: block;
  margin: 0 !important;
}
.-vrsvShop .mwform-radio-field label {
  display: block;
  height: 100%;
  cursor: pointer;
}
.-vrsvShop .mwform-radio-field-text {
  display: block !important;
  height: 100%;
  padding: 14px 14px 14px calc(1em + 26px) !important;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid #ccc;
  background-color: #fff;
  transition: border-color 0.2s, background-color 0.2s;
}
.-vrsvShop .mwform-radio-field-text:before,
.-vrsvShop .mwform-radio-field-text:after {
  top: 16px !important;
  left: 14px !important;
}
.-vrsvShop .ipradi:checked + .mwform-radio-field-text {
  color: inherit;
  border-color: #74527c;
  background-color: #f6f1f6;
  box-shadow: inset 0 0 0 1px #74527c;
}
.vrsvShopName {
  display: block;
  line-height: 1.5;
}
.vrsvShopSub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
}
.vrsvShopInfo {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #747a7a;
}

/* ご来店の目的：チェックボックスを縦に並べる */
.vrsvPurpose .mwform-checkbox-field {
  display: inline-block;
  margin: 0 24px 10px 0 !important;
}

/* 希望日時：日付と時間を横並び */
.vrsvDate {
  display: flex;
  gap: 10px;
}
.vrsvDate__day {
  flex: 1 1 auto;
}
.vrsvDate__time {
  flex: 0 0 160px;
}
.vrsvDate .iptxt[readonly] {
  background-color: #fff;
  cursor: pointer;
}
.vrsvDateNote {
  list-style: none;
  margin: 14px 0 0 230px;
  font-size: 13px;
  line-height: 1.8;
  color: #575757;
}
.vrsvDateNote li {
  position: relative;
  padding-left: 1.1em;
}
.vrsvDateNote li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.vrsvDateNote strong {
  color: #511d4a;
}

/* カレンダーの定休日 */
.ui-datepicker td.vrsvClosed span {
  color: #bbb;
  background: #f4f4f4;
  text-decoration: line-through;
}

.vrsvPolicy a {
  color: #74527c;
  text-decoration: underline;
}

/* 確認画面 */
.mw_wp_form_confirm .vrsvDate {
  display: block;
}
.mw_wp_form_confirm .vrsvDate > div {
  display: inline;
  margin-right: 1em;
}
.mw_wp_form_confirm .-vrsvShop .formTable__data {
  display: block;
}
.mw_wp_form_confirm .vrsvDateNote {
  display: none;
}
.mw_wp_form_confirm .formTable__data {
  overflow-wrap: anywhere; /* 長いメールアドレスなどではみ出さないように */
}
.vrsvConfirmValue .vrsvShopSub {
  display: inline-block; /* 入る幅なら1行、入らなければ（ の前で改行 */
  font-size: inherit;
}

@media (max-width: 769px) {
  .vrsvTelList {
    margin: 24px 20px 0;
    padding: 12px 0;
  }
  .vrsvTelList li {
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .vrsvTelList small {
    font-size: 11.5px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .-vrsvShop .formTable__data {
    grid-template-columns: 1fr;
  }
  .formTable__row.-vt .formTable__head {
    padding-top: 0;
  }
  .formTable__row.-vt .formTable__head.-req:before {
    top: 0;
  }
  .formTable__head br {
    display: none;
  }
  .vrsvDate__time {
    flex-basis: 126px;
  }
  .vrsvDate__time select {
    padding-left: 8px;
    padding-right: 24px;
  }
  .vrsvDateNote {
    margin-left: 0;
  }
}