html,
body {
  font-size: 1vw;
}

body {
  margin: 0 auto;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

form {
  width: 90%;
  margin: 0 auto;
}

a {
  cursor: pointer;
}

hr {
  border-top: 2px solid #958879;
  margin: 5% auto;
}

::placeholder,
select:invalid {
  color: #999;
}

span.alert {
  display: block;
  font-size: 2.5rem;
  color: rgb(255, 82, 82);
}

@media screen and (min-width: 769px) {
  html {
    margin: 0 auto;
    font-size: 8px;
  }
  .modal-body {
    margin: 0 auto;
    max-width: 769px;
  }
}

@media screen and (max-width: 480px) {
  html,
  body {
    font-size: 1.2vw;
  }
}

/*********************************
  ヘッダー
*********************************/
.visit-header {
  height: clamp(530px, 125vw, 850px);
  width: 100%;
}

/*********************************
  入力フォーム
*********************************/

/* googlemap */
.visitor_input li .map-container {
  width: 100%;
  padding: 3rem;
  border: 1px solid #958879;
  border-radius: 2rem;
}
.visitor_input li .map-container .pin-icon {
  width: 20px;
}
.visitor_input li .map-container .pin-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visitor_input li .map-container .google-map {
  text-align: center;
  margin: 3rem 0;
}
.visitor_input li .map-container .google-map iframe {
  width: 100%;
}

.visitor_input li .map-container p.access {
  color: #534741;
  font-size: 3rem;
}

.visitor_input li .map-container p.address {
  color: #534741;
  font-weight: bold;
  font-size: 3.5rem;
  margin: 3rem 0;
}

.visitor_input li .annotation {
  margin-top: 2rem;
  color: #958879;
  font-size: 2.8rem;
}

.visitor_input li {
  margin: 5% 0;
}

/* フォーム項目 */
.visitor_input li p {
  color: #958879;
  font-size: 3.5rem;
}

/* フォーム部品共通 */
.visitor_input li input:not(.meet_date, .meet_time),
.visitor_input li select {
  height: 10rem;
  margin: 2% 0;
  padding: 0 2%;
  font-size: 3.5rem;
  border: 1px solid #958879;
  border-radius: 2rem;
}

/* カレンダー */
.calendar_placeholder,
.visitor_input li .meet_date_time {
  height: 10rem;
  width: 60rem;
  margin: 2% 0;
  padding: 0 2%;
  font-size: 3.5rem;
  border: 1px solid #958879;
  border-radius: 2rem;
  display: flex;
  cursor: pointer;
  position: relative;
}
.visitor_input li .meet_date_time div {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  z-index: -1;
  color: #958879;
}
.visitor_input li .meet_date_time div img {
  width: 10%;
  vertical-align: middle;
}
.visitor_input li .meet_date_time div span {
  padding-left: 2%;
  vertical-align: middle;
  font-size: 3rem;
}
.visitor_input li .meet_date_time input:nth-of-type(1) {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 10%;
  width: 40%;
  z-index: -10;
}
.visitor_input li .meet_date_time input:nth-of-type(2) {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 60%;
  width: 40%;
  z-index: -10;
}

.visitor_input li .meet_date_time div span.arrow {
  position: relative;
  display: inline-block;
  padding-left: 18rem;
}
.arrow::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border-top: solid 2px #958879;
  border-right: solid 2px #959595;
  position: absolute;
  left: 100%;
  top: -1rem;
}
.arrow.arrow-bottom::before {
  transform: rotate(135deg);
}

/* モーダル本体の指定 + モーダル外側の背景の指定 */
.modal-container,
.modal-container2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  box-sizing: border-box;
  z-index: 100;
}
/* モーダル本体の擬似要素の指定 */
.modal-container:before,
.modal-container2:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/* モーダルアクティブ時 */
.modal-container.active,
.modal-container2.active {
  opacity: 1;
  visibility: visible;
}
/* モーダル枠 */
.modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 95%;
  background: #fff;
}
/* モーダルを閉じるボタン */
.modal-close {
  margin: 5% auto;
  padding: 3%;
  font-size: 3rem;
  color: #958879;
  cursor: pointer;
  border: 1px solid #958879;
  border-radius: 2rem;
}
/* モーダル内のコンテンツ */
.modal-content {
  padding: 2rem;
}

.select-week {
  display: flex;
  justify-content: space-between;
}
.week {
  margin: 3% 0;
  padding: 3%;
  width: 30%;
  font-size: 3rem;
  color: #958879;
  cursor: pointer;
  border: 1px solid #958879;
  border-radius: 2rem;
}

/* カレンダー */
#table_calendar {
  width: 100%;
}
#table_calendar p,
td {
  font-size: 3rem;
  color: #958879;
}

.visitor_input li p.js-calendar_month {
  background: #958879;
  outline: 1px solid #958879;
  color: #fff;
  padding: 2% 0;
  font-size: 3rem;
}

#table_calendar .calendar_body {
  border-left: 1px solid #958879;
  border-right: 1px solid #958879;
}

#table_calendar .calendar_column th {
  width: calc(100% / 7);
  text-align: center;
  border: 2px solid #958879;
  border-bottom: 0;
}

#table_calendar tr th {
  width: calc(100% / 7);
}

#table_calendar tr td {
  width: calc(100% / 7);
  height: 10rem;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid #958879;
  border-right: 1px solid #958879;
  border-top: 2px solid #958879;
  border-bottom: 2px solid #958879;
  cursor: pointer;
}

#table_calendar tr td:hover {
  color: #fff;
  background: #f37022;
}

#calendar_month {
  color: #fff;
  background: #958879;
}

#table_calendar table {
  width: 100%;
}

/* 定休日 */
#table_calendar tr td.closed {
  pointer-events: none;
}

/* 営業日 */
#table_calendar > thead tr th p {
  font-size: 3rem;
  color: #958879;
  background: #ffefdd;
  padding: 0;
}
/* 土曜日 */
#table_calendar tr th.saturday_color p {
  color: #657a97;
  background: #e3ebfd;
}
/* 日曜日 */
#table_calendar tr th.sunday_color p {
  color: #e86272;
  background: #ffd6ca;
}

/* 名前ボタン */
.name-radio-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.name-radio-wrap input {
  width: 45%;
  margin: 2% 0;
}

/* 性別ボタン */
.gender-radio-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.gender-radio-wrap .gender-radio {
  width: 45%;
  margin: 2% 0;
  text-align: center;
}
.gender-radio-btn {
  visibility: hidden;
}
.gender-radio-btn + label {
  /* ボタン内部配置 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  /* ボタン色 */
  background: #fff;
  color: #958879;
  border: solid 1px #958879;
  border-radius: 2rem;
  font-size: 3.5rem;
}
/* 性別ボタン（クリック時） */
.gender-radio-btn:checked + label {
  color: #fff;
  background: #958879;
}
.visitor_input li .gender-radio input {
  height: 0px;
  padding: 0;
  margin: 0;
}

.visitor_input li.store select,
.visitor_input li.prefecture select,
.visitor_input li.tel input,
.visitor_input li.email input {
  width: 100%;
}

/* 必須・任意アイコン */
.required {
  position: relative;
}
.required::after {
  content: "必須";
  color: #fff;
  background-color: #e37739;
  border-radius: 1rem;
  font-size: 2.5rem;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  margin-left: 2%;
  padding: 1%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.optional {
  position: relative;
}
.optional::after {
  content: "任意";
  color: #fff;
  background-color: #958879;
  border-radius: 1rem;
  font-size: 2.5rem;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  margin-left: 2%;
  padding: 1%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.unavailable {
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

/*********************************
  婚活活動状況・ご相談内容
*********************************/
.optional-title {
  display: flex;
  align-items: center;
}

p.input-title {
  color: #958879;
  font-size: 3.5rem;
  width: 100%;
  margin-left: 3%;
  cursor: pointer;
}

/* プラスマイナスアイコン */
.icon-wrap {
  width: 7rem;
  height: 7rem;
  margin: 0;
  background: #958879;
  border-radius: 50%;
  flex-shrink: 0;
}
.icon {
  display: block;
  height: 100%;
  text-align: center;
  line-height: 0;
  position: relative;
}
/* 横棒 */
.icon:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 3.5rem;
  height: 0.5rem; /* 太さ */
  border: 1px solid #fff;
  border-radius: 3px;
  background-color: #fff;
  transition: 0.2s;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
/* 縦棒 */
.icon:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 3.5rem;
  height: 0.5rem;
  border: 1px solid #fff;
  border-radius: 3px;
  background-color: #fff;
  transition: 0.3s;
}
/* クリック時 */
.icon.close:before {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
.icon.close:after {
  border: transparent;
  background-color: transparent;
}

/* チェックボックス */
.checkbox {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
}
.checkbox input {
  visibility: hidden;
}

.checkbox label {
  display: flex;
  position: relative;
  margin: 2rem 0;
  cursor: pointer;
  user-select: none; /* テキストの選択を防ぐ */
  font-size: 2.5rem;
  padding-left: 10%;
  color: #958879;
}

.checkbox label p {
  font-size: 3.5rem;
}

/* □ */
.checkmark {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 3%;
  height: 5rem; /* 大きさ */
  width: 5rem; /* 大きさ */
  border: solid 1px #d4dae2; /* 線 */
  border-radius: 4px;
  box-sizing: border-box;
}
/* ✓ */
.checkmark:after {
  content: "";
  position: absolute;
  left: 25%; /* チェックの位置 */
  top: 0%; /* チェックの位置 */
  width: 2rem; /* チェックの大きさ */
  height: 4rem; /* チェックの大きさ */
  border: solid #958879;
  border-width: 0 0.5rem 0.5rem 0;
  transform: rotate(45deg);
  opacity: 0; /* 透明にしておく */
}

/* チェックが入ったときの✓ */
.checkbox input:checked + .checkmark:after {
  opacity: 1; /* 透明を解除 */
}

/*********************************
  個人情報保護
*********************************/

p.privacy-policy-title {
  color: #958879;
  font-size: 3.5rem;
  width: 100%;
  margin-bottom: 3%;
}

p.privacy-policy-caption {
  font-size: 2.5rem;
  margin: 5% 0;
}

iframe.privacy {
  width: 100%;
  height: 30rem;
  border: 1px solid #ccc;
  border-radius: 2rem;
  padding: 0;
}
@media screen and (min-width: 769px) {
  iframe.privacy {
    height: 28.4rem;
  }
}

.personal_info_check label input {
  height: 0px;
  margin: 0;
  padding: 0;
}
.personal_info_check p {
  color: #f37022;
}

.submit-btn {
  margin: 10% 0;
  text-align: center;
}
.submit-btn button {
  font-size: 3.5rem;
  padding: 4% 10%;
  border: 1px solid #958879;
  border-radius: 2rem;
  background: #958879;
  color: #fff;
}

/*********************************
 年末年始休暇対応用 休暇を知らせるメッセージ
*********************************/
/* TODO:年末年始休暇対応用コードのため終了時削除 */
.js-add-alert-msg1,
.js-add-alert-msg2,
.js-add-alert-msg3,
.js-add-alert-msg4,
.js-add-alert-msg5,
.js-add-alert-msg6 {
  font-size: 12px !important;
  color: #e86272 !important;
  letter-spacing: 150% !important;
}
.js-add-alert-msg1,
.js-add-alert-msg4 {
  padding-top: 5px;
}