@charset "utf-8";
/* 健診予約フォーム用スタイルシート */

.hidden, [hidden] {
  visibility: hidden !important;
  display: none !important;
}

.wpcf7 {
  margin: 0 auto 100px;
}

.wpcf7-response-output {
  font-size: 17px;
  text-align: justify;
}

.reservation_main form {
  margin: 0 auto;  
  width: 800px;
  max-width: 100%;
}

.reservation_main .steps {
  display: flex;
  margin: auto;
  max-width: 460px;
  align-items: center;
  justify-content: space-between;
  font-size: min(20px, 4.3vw); /* 画面幅に応じたフォントサイズ */
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.reservation_main .steps span.steps-step {
  display: block;
  width: 3.5em;
  height: 2.1em;
  line-height: 2.1em;
}
.reservation_main .steps img.steps-arrow {
  display: block;
  width: 3.8em;
  height: 1em;
  margin: 0;
  padding: 0;
  object-position: center;
  object-fit: contain;
}
/* 現在のステップの強調表示
確認表示ブロック（#wpcf7cpcnf）がない場合は step-1 を強調、ある場合は step-2 を強調する */
.reservation_main:not(:has(#wpcf7cpcnf)) .steps span.steps-step.steps-step-1,
.reservation_main:has(#wpcf7cpcnf) .steps span.steps-step.steps-step-2 {
  background-color: #10b5ca;
  color: #fff;
}

.reservation_main .reservation_type {
  margin: 0 -5.55% 70px;
  display: flex;
  justify-content: space-evenly;
  font-size: min(25px, 4.9vw); /* 画面幅に応じたフォントサイズ */
  font-weight: 700;
}

.reservation_main .reservation_type a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  width: 8.72em;
  height: 3.28em;
  box-sizing: border-box;
  border: solid 4px #10b5ca;
  background-color: #10b5ca;
  color: #fff;
  text-decoration: none !important;
}

/* 共通スタイルでa要素のホバー時のスタイルが設定されているのを上書きする */
.reservation_main .reservation_type a:not([href]) {
  color: #fff;
  opacity: 1;
  cursor: default;
}
.reservation_main .reservation_type a[href]:link,
.reservation_main .reservation_type a[href]:hover,
.reservation_main .reservation_type a[href]:active,
.reservation_main .reservation_type a[href]:visited {
  background-color: #fff;
  color: #10b5ca;
  transition: opacity 0.3s;
}

.reservation_main p {
  text-align: justify; /* 段落内のテキストは両端揃えとする */
}

.reservation_main .introduction {
  max-width: 100%;
  margin: 70px auto;
}

.reservation_main .introduction p {
  margin: 0;
  width: 100%;
  font-size: 16px;
  margin: 0.4em 0;
  line-height: 1.5;
}

.reservation_main sup {
  color: #F00;
  margin-left: 0.125em;
}

.reservation_main fieldset {
  border: none;
  margin: 0 auto;
  padding: 0;
}

.reservation_main fieldset label {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: #10b5ca;
  cursor: default;
}

 .reservation_main fieldset legend {
  float: left; /* legend要素をインライン要素のように配置するハック */
  font-size: 17px;
  font-weight: 700;
  color: #10b5ca;
}

.reservation_main fieldset label + span,
.reservation_main fieldset legend + span {
  font-size: 16px;
  font-weight: normal;
  margin-left: 16px;
}

.reservation_main fieldset span + label {
  margin-top: 6px;
}

.reservation_main fieldset label + small,
.reservation_main fieldset legend + small,
.reservation_main fieldset sup + small {
  font-size: 14px;
  font-weight: normal;
  margin-left: 17px;
}

.reservation_main fieldset legend ~ p {
  clear: both; /* 段落をlegend要素の下に配置するためにfloat指定を解除する */
  margin-top: 1em;
}

.reservation_main fieldset legend ~ p span {
  font-size: 16px;
}

.reservation_main fieldset input,
.reservation_main fieldset select,
.reservation_main fieldset textarea {
  display: block;
  width: 100%;
  margin: 8px 0;
  /* border: 2px solid #10b5ca; */
  border: 1px solid #000;
  border-radius: 4px;
  padding: 0 6px;
}
.reservation_main fieldset input[type="date"] {
  max-width: 340px;
}
.reservation_main fieldset input[type="file"] {
  padding: 3px 6px;
}
.reservation_main fieldset input[type="radio"],
.reservation_main fieldset input[type="checkbox"] {
  display: inline-block;
  width: auto;
  vertical-align: baseline;
  margin-right: 0.25em;
}
.reservation_main fieldset textarea {
  height: 90px;
}

.reservation_main fieldset .wpcf7-radio,
.reservation_main fieldset .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  margin: 8px 0;
  gap: 8px 24px;
}

.reservation_main fieldset .wpcf7-radio label,
.reservation_main fieldset .wpcf7-checkbox label {
  margin-left: 16px;
  text-indent: -16px;
  font-size: 16px;
  font-weight: inherit;
  color: inherit;
}

.reservation_main fieldset .wpcf7-list-item {
  margin: 0;
}

.reservation_main fieldset .wpcf7-list-item-label {
  padding-right: 16px;
}
.reservation_main fieldset .wpcf7-list-item-label::before,
.reservation_main fieldset fieldset .wpcf7-list-item-label::after {
  content: none;
}

/* 無効なオプションのスタイル（選択不可） */
/*.reservation_main fieldset label:has(input[disabled]) {
  cursor: not-allowed;
}
.reservation_main fieldset input[disabled] {
  cursor: not-allowed;
}
.reservation_main fieldset input[disabled] + .wpcf7-list-item-label {
  opacity: 0.25;
  text-decoration: line-through;
  cursor: not-allowed;
}*/

/* 無効なオプションのスタイル（非表示） */
.reservation_main fieldset span.wpcf7-list-item:has(input[disabled]) {
  visibility: hidden;
  display: none;
}

/* 段落内にオプションを含み、全て無効である場合のスタイル（非表示） */
.reservation_main fieldset .items-options .wpcf7-form-control-wrap:has(input):not(:has(input:not([disabled]))),
.reservation_main fieldset .items-options p:has(input):not(:has(input:not([disabled]))) {
  visibility: hidden;
  display: none;
}

.reservation_main fieldset p,
.reservation_main fieldset fieldset,
.reservation_main fieldset table {
  display: block;
  margin: 0 auto 28px;
  width: 100%;
  max-width: 640px;
  border: none;
  padding: 0;
  line-height: 1.8;
}
.reservation_main fieldset table tr th,
.reservation_main fieldset table tr td {
  display: block;
  margin: 0;
  width: 100%;
  border: none;
  padding: 0;
}

.reservation_main fieldset .inputs-inline input {
  display: inline-block;
  width: auto;
}

.reservation_main .footnote {
  max-width: 100%;
  margin: auto;
}

.reservation_main .footnote p {
  font-size: 16px;
  text-align: justify;
}

.reservation_main .reservation_submit {
  position: relative;
  display: block;
  width: fit-content;
  margin: 28px auto;
}
.reservation_main .reservation_submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  margin: 0;
}

.reservation_main input[type="button"],
.reservation_main input[type="submit"],
.reservation_main input[type="reset"],
.reservation_main button {
  width: auto;
  min-width: 130px;
  height: 47px;
  border: 1px solid #10b5ca;
  padding: 11px;
  background-color: #10b5ca;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 0;
  text-align: center;
  cursor: pointer;
}

.reservation_main .wpcf7-not-valid-tip {
  margin-top: -0.125em;
  font-size: 16px;
  line-height: 1.25;
  color:#F00;
}

.reservation_main .wpcf7cp-form-hide {
  visibility: inherit !important;
  display: inherit !important;
}
  .reservation_main .wpcf7cp-form-hide .reservation_input {
    visibility: hidden !important;
    display: none !important;
  }

/* 確認表示ブロック */
.reservation_main #wpcf7cpcnf {
  position: static;
  margin: 70px auto 120px;
  max-width: 800px;
}
.reservation_main #wpcf7cpcnf p {
  margin: 0 auto;
}

/* 確認表示ブロック内に出力されるテーブルを通常の段落のように表示させる */
.reservation_main #wpcf7cpcnf table {
  display: block;
  border: none;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 640px;
}
.reservation_main #wpcf7cpcnf table tr {
  display: block;
  border: none;
  margin: 0 auto;
  padding: 0;
}
.reservation_main #wpcf7cpcnf table tr th {
  display: block;
  border: none;
  margin: 1.5em auto 0;
  padding: 0;
  font-weight: 700;
  color: #10b5ca;
}
.reservation_main #wpcf7cpcnf table tr td {
  display: block;
  border: none;
  margin: 0 auto;
  padding: 0;
}

.reservation_main #wpcf7cpcnf .wpcf7cp-btns {
  display: flex;
  margin: 50px auto 0;
  width: 90%;
  text-align: center;
  justify-content: space-evenly;
}
.reservation_main #wpcf7cpcnf .wpcf7cp-btns button.wpcf7cp-cfm-edit-btn {
  border: 1px solid #10b5ca;
  background-color: #fff;
  color: #10b5ca;
  margin: 0;
  min-width: 110px;
}
.reservation_main #wpcf7cpcnf .wpcf7cp-btns button.wpcf7cp-cfm-submit-btn {
  margin: 0;
  min-width: 170px;
}

.reservation_main .reservation_message-succeeded {
  margin-top: 1em;
    visibility: hidden;
    display: none;
}
/** 送信成功時にメッセージを表示 */
.reservation_main .wpcf7-form.sent .reservation_message-succeeded {
  visibility: inherit !important;
  display: inherit !important;
}