@charset "UTF-8";
/**
 * CSS設計は原則的にMindBEMdingで行う。
 * バリエーション分け（Modifier）はハイフン始まりのマルチクラスで行う。
 * 状態管理は原則的にWAI-ARIAおよびdata属性で行う。
 * JSで生成する要素のclass名はアンスコ始まりにして疑似BEM風にする。
 */

:root {
  --base-color: #434a56;
  --white-color-primary: #f7f8f8;
  --white-color-secondary: #fefefe;
  --gray-color-primary: #e4e7e9;
  --gray-color-secondary: #c2c2c2;
  --gray-color-tertiary: #676f79;
  --active-color: #30a2d2;
  --valid-color: #44c08a;
  --invalid-color: #f72f47;
  --valid-icon: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M9.86%2018a1%201%200%200%201-.73-.32l-4.86-5.17a1%201%200%201%201%201.46-1.37l4.12%204.39%208.41-9.2a1%201%200%201%201%201.48%201.34l-9.14%2010a1%201%200%200%201-.73.33z%22%20fill%3D%22%2344c08a%22%2F%3E%3C%2Fsvg%3E");
  --invalid-icon: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M13.41%2012l4.3-4.29a1%201%200%201%200-1.42-1.42L12%2010.59l-4.29-4.3a1%201%200%200%200-1.42%201.42l4.3%204.29-4.3%204.29a1%201%200%200%200%200%201.42%201%201%200%200%200%201.42%200l4.29-4.3%204.29%204.3a1%201%200%200%200%201.42%200%201%201%200%200%200%200-1.42z%22%20fill%3D%22%23f72f47%22%20%2F%3E%3C%2Fsvg%3E");
}

body {
  background: var(--white-color-primary);
  color: var(--base-color);
  line-height: 1.5;
}

/* ============================================================
   フォームレイアウト（スマホファースト対応）
   ============================================================ */

.form {
  background-color: transparent;
  box-sizing: border-box;
  width: 100%;
}

/* スマホ: グループをブロック積みに */
.form__group {
  border: 0;
  box-sizing: border-box;
  margin-top: 1.5em;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.form__group + .form__group {
  margin-top: 1.25em;
}

/* スマホ: floatを使わず縦並びに */
.form__group-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  /* スマホではfloat解除・全幅 */
  float: none;
  max-width: 100%;
  padding: 0 0 0.4em 0;
  width: 100%;
}

.form__group-content {
  /* スマホではfloat解除・全幅 */
  float: none;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* タブレット以上: 元の横並びレイアウトを復元 */
@media screen and (min-width: 768px) {
  .form__group::after {
    clear: both;
    content: "";
    display: table;
  }

  .form__group-header {
    float: left;
    max-width: 240px;
    padding: 0.8em 1.2em 0.8em 0;
    width: 100%;
  }

  .form__group-content {
    float: left;
    max-width: 580px;
    width: calc(100% - 240px);
  }
}

/* ============================================================
   ラベル
   ============================================================ */

.form__group-label {
  display: inline-block;
  font-size: 0.95em;
  line-height: 1.5;
}

.form__group-label > * {
  margin-left: 0.5em;
}

.form__required-label {
  background-color: var(--gray-color-primary);
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: normal;
  letter-spacing: 0.08em;
  padding: 0.25em 0.5em;
  vertical-align: middle;
}

/* ============================================================
   テキスト入力
   ============================================================ */

.form__text-input {
  box-sizing: border-box;
  max-width: 100%; /* スマホ: 全幅 */
  width: 100%;
}

.form__text-input.-narrow {
  max-width: 240px;
}

.form__text-input.-wide {
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .form__text-input {
    max-width: 440px;
  }
  .form__text-input.-wide {
    max-width: 580px;
  }
}

.text-input {
  position: relative;
  z-index: 0;
  width: 100%;
  box-sizing: border-box;
}

.text-input__body {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 1px solid var(--gray-color-primary);
  border-radius: 0;
  box-sizing: border-box;
  /* スマホでは高さを少し大きめに（タップしやすく）*/
  height: 3.25em;
  line-height: 3.25;
  overflow: hidden;
  padding: 0 1em;
  text-overflow: ellipsis;
  transition: background-color 0.3s;
  width: 100%;
  color: inherit;
  /* スマホでフォントサイズが16px未満だとiOSがズームするため固定 */
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  .text-input__body {
    font-size: inherit;
    height: 3.125em;
    line-height: 3.125;
  }
}

.text-input__body:-ms-input-placeholder { color: var(--gray-color-secondary); }
.text-input__body::-moz-placeholder      { color: var(--gray-color-secondary); }
.text-input__body::placeholder           { color: var(--gray-color-secondary); }

.text-input__body[data-is-valid] { padding-right: 2.5em; }
.text-input__body[data-is-valid=true]  { border-color: var(--valid-color);   box-shadow: inset 0 0 0 1px var(--valid-color); }
.text-input__body[data-is-valid=false] { border-color: var(--invalid-color); box-shadow: inset 0 0 0 1px var(--invalid-color); }
.text-input__body:focus { border-color: var(--active-color); box-shadow: inset 0 0 0 1px var(--active-color); outline: none; }
.text-input__body:-webkit-autofill { transition-delay: 9999s; -webkit-transition-property: background-color; transition-property: background-color; }

.text-input__validator {
  background-position: right 0.5em center;
  background-repeat: no-repeat;
  background-size: 1.5em;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.text-input__body[data-is-valid=true]  + .text-input__validator { background-image: var(--valid-icon); }
.text-input__body[data-is-valid=false] + .text-input__validator { background-image: var(--invalid-icon); }

/* ============================================================
   セレクトボックス
   ============================================================ */

.form__select-box {
  box-sizing: border-box;
  max-width: 100%; /* スマホ: 全幅 */
  width: 100%;
}

@media screen and (min-width: 768px) {
  .form__select-box {
    max-width: 240px;
  }
}

.select-box {
  position: relative;
  transition: background-color 0.5s ease-out;
  width: 100%;
  box-sizing: border-box;
}

.select-box::after {
  border-color: var(--gray-color-secondary) transparent transparent transparent;
  border-style: solid;
  border-width: 6px 4px 0;
  bottom: 0;
  content: "";
  display: inline-block;
  height: 0;
  margin: auto 0;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 0;
  width: 0;
  z-index: 1;
}

.select-box__body {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 1px solid var(--gray-color-primary);
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  /* スマホ: タップしやすい高さ */
  height: 3.25em;
  line-height: 3.25;
  padding-left: 1em;
  padding-right: calc(1em + 16px);
  width: 100%;
  color: inherit;
  /* iOS zoom 対策 */
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  .select-box__body {
    font-size: inherit;
    height: 3.125em;
    line-height: 3.125;
  }
}

.select-box__body[data-is-valid=true]  { border-color: var(--valid-color);   box-shadow: inset 0 0 0 1px var(--valid-color); }
.select-box__body[data-is-valid=false] { border-color: var(--invalid-color); box-shadow: inset 0 0 0 1px var(--invalid-color); }
.select-box__body.focus-visible { border-color: var(--active-color); box-shadow: inset 0 0 0 1px var(--active-color); outline: none; }
.select-box__body:-webkit-autofill { transition-delay: 9999s; -webkit-transition-property: background-color; transition-property: background-color; }

/* ============================================================
   名前フィールド（横並び）
   ============================================================ */

.form__name {
  display: flex;
  flex-direction: column; /* スマホ: 縦並び */
  gap: 0.75em;
  max-width: 100%;
  width: 100%;
}

.form__name > .form__text-input {
  flex: 1;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .form__name {
    flex-direction: row;
    max-width: 440px;
  }
  .form__name > :not(:last-child) {
    margin-right: 0; /* gap で制御 */
  }
}

/* ============================================================
   郵便番号
   ============================================================ */

.form__postal-code > :not(:last-child) {
  margin-bottom: 1em;
}

@media screen and (min-width: 576px) {
  .form__postal-code {
    align-items: center;
    display: flex;
  }
  .form__postal-code > .form__text-input {
    flex-basis: 100%;
  }
  .form__postal-code > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 1em;
  }
}

/* ============================================================
   テキストエリア
   ============================================================ */

.form__textarea {
  width: 100%;
  box-sizing: border-box;
}

.textarea {
  line-height: 1.5;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.textarea__body {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 1px solid var(--gray-color-primary);
  border-radius: 0;
  box-sizing: border-box;
  font: inherit;
  /* iOS zoom 対策 */
  font-size: 16px;
  height: 100%;
  left: 0;
  letter-spacing: inherit;
  overflow: hidden;
  padding: 1em;
  position: absolute;
  resize: none;
  top: 0;
  transition: background-color 0.5s ease-out;
  width: 100%;
  color: inherit;
}

@media screen and (min-width: 768px) {
  .textarea__body {
    font-size: inherit;
  }
}

.textarea__body:only-child {
  min-height: 180px; /* スマホでは少し低めに */
  position: relative;
  resize: vertical;
}

@media screen and (min-width: 768px) {
  .textarea__body:only-child {
    min-height: 240px;
  }
}

.textarea__body:focus                  { border-color: var(--active-color);   box-shadow: inset 0 0 0 1px var(--active-color);   outline: none; }
.textarea__body[data-is-valid=true]    { border-color: var(--valid-color);    box-shadow: inset 0 0 0 1px var(--valid-color); }
.textarea__body[data-is-valid=false]   { border-color: var(--invalid-color);  box-shadow: inset 0 0 0 1px var(--invalid-color); }

.textarea ._dummy-box {
  border: 1px solid;
  box-sizing: border-box;
  min-height: 180px;
  overflow: hidden;
  overflow-wrap: break-word;
  padding: 1em;
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
}

@media screen and (min-width: 768px) {
  .textarea ._dummy-box {
    min-height: 240px;
  }
}

/* ============================================================
   チェックボックス
   ============================================================ */

.form__checkbox {
  width: 100%;
}

.checkbox {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  /* タップ領域を広げる */
  padding: 0.25em 0;
}

.checkbox__input {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.checkbox__icon {
  display: inline-block;
  flex-shrink: 0;
  /* スマホでは少し大きめに */
  height: 1.75em;
  position: relative;
  width: 1.75em;
}

@media screen and (min-width: 768px) {
  .checkbox__icon {
    height: 1.5em;
    width: 1.5em;
  }
}

.checkbox__icon::before,
.checkbox__icon::after { content: ""; position: absolute; }

.checkbox__icon::before {
  border: 2px solid var(--gray-color-primary);
  height: 100%; left: 0; top: 0;
  transition: border-color 0.5s, opacity 0.5s, transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 100%;
}
.checkbox__input:checked + .checkbox__icon::before {
  border-color: var(--valid-color);
  opacity: 0;
  pointer-events: none;
  transform: rotate(45deg) scale3d(2, 2, 1);
}

.checkbox__icon::after {
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  height: 0.5em; left: 0.25em; opacity: 0; top: 0.375em;
  transform: rotate(-225deg);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 1em;
}
.checkbox__input:checked + .checkbox__icon::after {
  border-bottom: 2px solid var(--valid-color);
  border-left: 2px solid var(--valid-color);
  opacity: 1;
  transform: rotate(-45deg);
}

.checkbox__text {
  display: inline-block;
  letter-spacing: 0.01em;
  line-height: 1.5;
  position: relative;
  transition: color 0.3s;
}
.checkbox__input:checked ~ .checkbox__text { color: var(--valid-color); }
.checkbox__input.focus-visible ~ .checkbox__text { color: var(--active-color); }
.checkbox__input:disabled ~ .checkbox__text { color: var(--gray-color-secondary); }
@media (hover) {
  .checkbox__text:hover { color: var(--active-color); }
}
.checkbox__text::after {
  background-color: var(--active-color);
  bottom: -2px; content: ""; display: inline-block;
  height: 2px; left: 0; position: absolute;
  transform: scale3d(0, 1, 1); transform-origin: right;
  transition: transform 0.3s; width: 100%;
}
.checkbox__input:disabled ~ .checkbox__text::after { content: none; }
.checkbox__input.focus-visible ~ .checkbox__text::after { transform: scale3d(1, 1, 1); transform-origin: left; }
@media (hover) {
  .checkbox:hover .checkbox__text::after { transform: scale3d(1, 1, 1); transform-origin: left; }
}
.checkbox__icon + .checkbox__text { margin-left: 0.75em; }

/* ============================================================
   ラジオボタン
   ============================================================ */

.form__radio {
  width: 100%;
}

.radio {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  padding: 0.25em 0;
}

.radio__input {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.radio__icon {
  border: 1px solid var(--gray-color-primary);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  height: 1.75em;
  position: relative;
  transition: border-color 0.5s;
  width: 1.75em;
}

@media screen and (min-width: 768px) {
  .radio__icon {
    height: 1.5em;
    width: 1.5em;
  }
}

.radio__input:checked + .radio__icon { border-color: var(--valid-color); }

.radio__icon::before,
.radio__icon::after {
  border-radius: 50%; bottom: 0; content: "";
  height: 0.75em; left: 0; margin: auto; opacity: 0;
  position: absolute; right: 0; top: 0; width: 0.75em;
}
.radio__icon::before { background-color: var(--gray-color-secondary); transition: background-color 0.5s, opacity 0.5s; }
.radio__input:checked + .radio__icon::before { background-color: var(--valid-color); opacity: 1; }
.radio__input:checked + .radio__icon::after {
  -webkit-animation: radio-ripple 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
          animation: radio-ripple 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
  background-color: var(--valid-color);
  pointer-events: none;
}

@-webkit-keyframes radio-ripple {
  0%   { opacity: 0.8; transform: scale3d(1, 1, 1); }
  100% { opacity: 0;   transform: scale3d(4, 4, 1); }
}
@keyframes radio-ripple {
  0%   { opacity: 0.8; transform: scale3d(1, 1, 1); }
  100% { opacity: 0;   transform: scale3d(4, 4, 1); }
}

.radio__text {
  display: inline-block;
  letter-spacing: 0.01em;
  line-height: 1.5;
  position: relative;
  transition: color 0.3s;
}
.radio__input:disabled  ~ .radio__text { color: var(--gray-color-secondary); }
.radio__input:checked   ~ .radio__text { color: var(--valid-color); }
.radio__input.focus-visible ~ .radio__text { color: var(--active-color); }
@media (hover) { .radio__text:hover { color: var(--active-color); } }

.radio__text::after {
  background-color: var(--active-color);
  bottom: -2px; content: ""; display: inline-block;
  height: 2px; left: 0; position: absolute;
  transform: scale3d(0, 1, 1); transform-origin: right;
  transition: transform 0.3s; width: 100%;
}
.radio__input:disabled ~ .radio__text::after { content: none; }
.radio__input.focus-visible ~ .radio__text::after { transform: scale3d(1, 1, 1); transform-origin: left; }
@media (hover) { .radio:hover .radio__text::after { transform: scale3d(1, 1, 1); transform-origin: left; } }
.radio__icon + .radio__text { margin-left: 0.75em; }

/* ============================================================
   バリデーションメッセージ
   ============================================================ */

.form__validation {
  color: var(--invalid-color);
  font-size: 0.85em;
  margin-top: 0.5em;
}
.form__validation:empty { display: none; }
.form__validation:not(:empty) + .form__validation { margin-top: 0.25em; }

/* ============================================================
   送信ボタン
   ============================================================ */

.form__confirm,
.form__submit {
  max-width: 100%;
  width: 100%;
}

.form__confirm {
  margin-top: 2em;
  text-align: center;
}

.form__confirm-text {
  display: inline-block;
  text-align: left;
}

.form__submit {
  align-items: center;
  display: flex;
  flex-direction: column-reverse;
  margin-top: 2.5em;
}

.button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--gray-color-tertiary);
  border: 0;
  border-radius: 3px;
  box-shadow: 2px 2px 3px 0 var(--gray-color-primary);
  color: var(--white-color-primary);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  letter-spacing: 0.08em;
  line-height: inherit;
  /* スマホ: 幅広・タップしやすい */
  padding: 1em 2em;
  transition: background-color 0.3s;
  width: 100%;
  max-width: 320px;
  font-size: 1em;
}

@media screen and (min-width: 576px) {
  .button {
    padding: 1em 4em;
    width: auto;
  }
}

.button.-small { padding: 1em 1.5em; }
.button[aria-disabled=true] { cursor: not-allowed; opacity: 0.5; }
.button:not([aria-disabled=true]):focus { background-color: var(--base-color); }
@media (hover) {
  .button:not([aria-disabled=true]):hover { background-color: var(--base-color); }
}

/* ============================================================
   ファイル選択
   ============================================================ */

.file-select {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}

.file-select__input {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.file-select__button {
  background-color: var(--gray-color-tertiary);
  border-radius: 3px;
  box-shadow: 2px 2px 3px 0 var(--gray-color-primary);
  color: var(--white-color-primary);
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  letter-spacing: 0.08em;
  padding: 1em 1.5em;
  transition: background-color 0.3s;
}
.file-select__input.focus-visible ~ .file-select__button { background-color: var(--base-color); outline: 3px solid var(--active-color); }
@media (hover) { .file-select__button:hover { background-color: var(--base-color); } }

.file-select ._selected-file {
  background-color: var(--gray-color-primary);
  border-radius: 3px;
  letter-spacing: 0.08em;
  overflow: hidden;
  padding: 0.35em 0.75em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-select ._selected-file:empty { display: none; }

/* ============================================================
   補足ノート
   ============================================================ */

.form__note {
  color: #666;
  font-size: 0.85em;
  margin-top: 0.4em;
}

.form__notion {
  font-size: 0.85em;
  margin-top: 1em;
}

/* ============================================================
   サンクスメッセージ
   ============================================================ */

.booking-thank-you-message {
  background-color: #e8f8f1;
  border: 1px solid var(--valid-color);
  border-radius: 4px;
  color: #2a7a56;
  margin-bottom: 1.5em;
  padding: 1em 1.25em;
}

/* ============================================================
   ユーティリティ
   ============================================================ */

.visually-hidden {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.js-focus-visible :focus:not(.focus-visible) { outline: 0; }

::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ============================================================
   グループリスト
   ============================================================ */

.form__group-list {
  border-bottom: 1px solid var(--gray-color-primary);
  list-style: none;
  padding: 0.8em 0 1em;
}

.form__group-list-item + .form__group-list-item {
  margin-top: 1em;
}