/* reserve2024
 *
 * NOTE:  こちらのCSSはfunctions.phpで`wp_enqueue_scripts`を使用して読み込んでおりますが、
 *        `default.scss`でimportするなど、使いやすいように変更していただいて問題ございません。
----------------------------------------------------*/
#reserve_contents {
  padding-top: 0;
}

#reserve_contents #breadcrumbs {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
}

:is(.reserve2024, .reserve2024 *),
:is(.reserve2024, .reserve2024 *):after,
:is(.reserve2024, .reserve2024 *):before {
  --base-screen-width-desktop: 1440;
  --base-screen-width-mobile: 390;
  --spacing-unit: 8;
  --spacing-unit-px: var(--spacing-unit) * 1px;
  --rounded-unit: 4;
  --rounded-unit-px: var(--rounded-unit) * 1px;

  box-sizing: border-box;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.07em;
}

.reserve2024 {
  /* global header height + padding (clamped value) */
  padding-top: calc(var(--header-height) + (var(--spacing-unit-px) * 8));
  padding-bottom: calc(var(--spacing-unit-px) * 2);
}

.reserve2024 a:is(:link, :visited) {
  border-bottom: 1px solid currentColor;
  transition: border-bottom-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .reserve2024 a:is(:link, :visited):hover {
    border-bottom-color: transparent;
    text-decoration: none;
  }
}

.reserve2024 .inner {
  background: #fff;
  margin: 0 auto;
  padding: calc(var(--spacing-unit-px) * 7) calc(var(--spacing-unit-px) * 5) calc(var(--spacing-unit-px) * 8);
  width: 100%;
  max-width: 940px;
}

.reserve2024-heading-large {
  font-size: 32px;
  line-height: 1.44;
}

.reserve2024-heading-small {
  font-size: 24px;
  line-height: 1.44;
  padding-top: calc(var(--spacing-unit-px) * 1);
}

.reserve2024-note {
  line-height: 1.6;
  padding-top: calc(var(--spacing-unit-px) * 6);
}

.reserve2024-form {
  padding-top: calc(var(--spacing-unit-px) * 6);
}

.form-block + .form-block {
  padding-top: calc(var(--spacing-unit-px) * 6);
}

.form-block-heading {
  align-items: center;
  background: #fffee6;
  color: #000;
  display: flex;
  font-size: 18px;
  font-weight: 500;
  gap: calc(var(--spacing-unit-px) * 2);
  letter-spacing: 0.02em;
  margin: 0;
  padding: calc(var(--spacing-unit-px) * 2);
}

.form-block-heading::after {
  border-width: 1px;
  border-style: solid;
  display: grid;
  font-size: 12px;
  place-items: center;
  height: calc(var(--spacing-unit-px) * 3);
  width: calc(var(--spacing-unit-px) * 5);
}

.form-block-heading:is(.-required)::after {
  background: #e60012;
  border-color: transparent;
  color: #fff;
  content: '必須';
}

.form-block-heading:not(.-required)::after {
  background: #fff;
  border-color: #333;
  color: #333;
  content: '任意';
}

.form-block-body {
  display: grid;
  padding: calc(var(--spacing-unit-px) * 3) calc(var(--spacing-unit-px) * 2) 0;
}

.form-block-description {
  line-height: 1.6;
  padding-bottom: calc(var(--spacing-unit-px) * 2);
}

.form-block-description:is(.-spacing-lg) {
  padding-bottom: calc(var(--spacing-unit-px) * 4);
}

.form-group:has(.form-group-label) {
  display: grid;
  gap: calc(var(--spacing-unit-px) * 6);
  grid-template-columns: 13.5% 1fr;
}

.form-group + .form-group {
  padding-top: calc(var(--spacing-unit-px) * 4);
}

.form-group-label {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

.form-field {
  width: min(100%, calc(var(--spacing-unit-px) * 87));
}

.form-field:is(.-sm) {
  width: min(100%, calc(var(--spacing-unit-px) * 62));
}

.form-field:is(.-email) {
  width: min(100%, calc(var(--spacing-unit-px) * 50));
}

.form-field:is(.-cols-2):not(:has(.field-radio, .field-checkbox)),
.-cols-2 :is(.field-radio, .field-checkbox) {
  display: grid;
  gap: calc(var(--spacing-unit-px) * 2);
  grid-template-columns: repeat(2, 1fr);
}

.form-note {
  color: #000;
  display: block;
  font-size: 12px;
  padding-top: calc(var(--spacing-unit-px) * 1);
}

.form-accordion {
  width: 100%;
  max-width: calc(var(--spacing-unit-px) * 90);
}

.form-accordion + .form-accordion {
  padding-top: calc(var(--spacing-unit-px) * 2);
}

.form-accordion-heading {
  background: #ebebed;
  border-radius: calc(var(--rounded-unit-px) * 2);
  cursor: pointer;
  display: grid;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  place-items: center;
  position: relative;
  height: calc(var(--spacing-unit-px) * 7);
}

.form-accordion-heading::before,
.form-accordion-heading::after {
  background: #d34e85;
  content: '';
  position: absolute;
  right: calc(var(--spacing-unit-px) * 2);
  height: 2px;
  width: 16px;
}

.form-accordion-heading::after {
  rotate: 90deg;
  transform-origin: center;
  transition: rotate 0.15s ease;
}

:is([open]) .form-accordion-heading::after {
  rotate: 0deg;
}

.form-accordion-heading::marker,
.form-accordion-heading::-webkit-details-marker {
  display: none;
}

.form-accordion-body {
  background: rgba(235, 235, 237, 0.4);
  padding: calc(var(--spacing-unit-px) * 3);
}

.datetime-block {
  display: grid;
  gap: calc(var(--spacing-unit-px) * 3);
  grid-template-columns: repeat(2, 1fr);
}

.datetime-block + .datetime-block {
  padding-top: calc(var(--spacing-unit-px) * 3);
}

@media (max-width: 640px) {
  #reserve_contents {
    width: 95%;
  }

  .reserve2024 {
    /* global header height + padding (clamped value) */
    padding-top: calc(var(--header-height) + (var(--spacing-unit-px) * 2));
    padding-bottom: calc(var(--spacing-unit-px) * 2);
  }

  .reserve2024 .inner {
    padding: calc(var(--spacing-unit-px) * 5) 0 calc(var(--spacing-unit-px) * 5);
  }

  .reserve2024-head {
    padding: 0 calc(var(--spacing-unit-px) * 2);
  }

  .reserve2024-heading-large {
    font-size: 20px;
    letter-spacing: 0.09em;
  }

  .reserve2024-heading-small {
    font-size: 16px;
    padding-top: calc(var(--spacing-unit-px) * 0.5);
  }

  :is(.-confirm) .reserve2024-heading-small {
    padding-top: calc(var(--spacing-unit-px) * 4);
  }

  .reserve2024-note {
    padding-top: calc(var(--spacing-unit-px) * 4);
  }

  .form-block-description:is(.-spacing-lg) {
    padding-bottom: calc(var(--spacing-unit-px) * 3);
  }

  .form-group:has(.form-group-label) {
    gap: calc(var(--spacing-unit-px) * 1);
    grid-template-columns: 1fr;
  }

  .form-group + .form-group {
    padding-top: calc(var(--spacing-unit-px) * 3);
  }

  .form-field:is(.-cols-2):not(:has(.field-radio, .field-checkbox)),
  .-cols-2 :is(.field-radio, .field-checkbox) {
    gap: calc(var(--spacing-unit-px) * 2);
    grid-template-columns: 1fr;
  }

  .form-field:is(.-mobile-cols-2):not(:has(.field-radio, .field-checkbox)),
  .-mobile-cols-2 :is(.field-radio, .field-checkbox) {
    gap: calc(var(--spacing-unit-px) * 2);
    grid-template-columns: repeat(2, 1fr);
  }

  .form-accordion-heading::before,
  .form-accordion-heading::after {
    right: calc(var(--spacing-unit-px) * 3);
  }

  .form-accordion-body {
    padding: calc(var(--spacing-unit-px) * 3) calc(var(--spacing-unit-px) * 1);
  }

  .datetime-block {
    gap: calc(var(--spacing-unit-px) * 2);
    grid-template-columns: 1fr;
  }

  .datetime-block + .datetime-block {
    padding-top: calc(var(--spacing-unit-px) * 4);
  }
}

/* reserve2024 (fields)
----------------------------------------------------*/
/* label */
.field-item {
  /* width: 100%; */
}

.field-item-label {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  padding-bottom: calc(var(--spacing-unit-px) * 1);
}

.field-item-label:is(.-bold) {
  font-weight: 500;
}

.field-item-label:is(.-with-tip) {
  align-items: center;
  display: flex;
  gap: calc(var(--spacing-unit-px) * 2);
}

.field-item-label:is(.-with-tip)::after {
  border-width: 1px;
  border-style: solid;
  display: grid;
  font-size: 12px;
  place-items: center;
  height: calc(var(--spacing-unit-px) * 3);
  width: calc(var(--spacing-unit-px) * 5);
}

.field-item-label:is(.-with-tip, .-required)::after {
  background: #e60012;
  border-color: transparent;
  color: #fff;
  content: '必須';
}

.field-item-label:is(.-with-tip):not(.-required)::after {
  background: #fff;
  border-color: #333;
  color: #333;
  content: '任意';
}

/* textfield */
.field-text {
  background: #fff;
  border: 1px solid #ccc;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.3s ease;
  width: 100%;
}

.field-text:not(textarea) {
  border-radius: calc(var(--rounded-unit-px) * 1);
  padding: 0 calc(var(--spacing-unit-px) * 2);
  height: calc(var(--spacing-unit-px) * 7);
}

.field-text:is(textarea) {
  border-radius: calc(var(--rounded-unit-px) * 2);
  padding: calc(var(--spacing-unit-px) * 2);
}

.field-text:is(.-date) {
  cursor: pointer;
}

.field-text.field-text:is(.-date) {
  background: url('/wp/wp-content/themes/jc2024/assets/img/common/calendar.png') no-repeat calc(100% - (var(--spacing-unit-px) * 2)) center / 24px,
    #fff;
}

.field-text:is(.-date)::placeholder {
  color: #333;
}

@media (hover: hover) and (pointer: fine) {
  .field-text:hover {
    border-color: #808080;
  }
}

.field-text:focus {
  border-color: #d34e85;
  outline: 0;
}

/* select */
.field-select {
  background: url('/wp/wp-content/themes/jc2024/assets/img/common/arrow_down.png') no-repeat calc(100% - (var(--spacing-unit-px) * 2)) center / 24px,
    #fff;
  appearance: none;
  border: 1px solid #ccc;
  border-radius: calc(var(--rounded-unit-px) * 1);
  color: #333;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  padding: 0 calc(var(--spacing-unit-px) * 2);
  transition: border-color 0.3s ease;
  height: calc(var(--spacing-unit-px) * 7);
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .field-select:hover {
    border-color: #808080;
  }
}

.field-select:focus {
  border-color: #d34e85;
  outline: 0;
}

/* radio, checkbox */
:is(.field-radio, .field-checkbox) {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit-px) * 2);
}

.form-accordion-body :is(.field-radio, .field-checkbox) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.field-radio {
  --inner-bullet-size: 10;
  --outer-bullet-size: 16;
  --inner-bullet-size-px: var(--inner-bullet-size) * 1px;
  --outer-bullet-size-px: var(--outer-bullet-size) * 1px;
  --item-padding-x: calc(var(--spacing-unit-px) * 2);
}

:is(.field-radio, .field-checkbox) .wpcf7-list-item-label {
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: calc(var(--rounded-unit-px) * 1);
  cursor: pointer;
  display: grid;
  font-size: 16px;
  gap: calc(var(--spacing-unit-px) * 2);
  grid-template-columns: calc(var(--outer-bullet-size-px)) 1fr;
  line-height: 1.4;
  padding: 0 var(--item-padding-x);
  position: relative;
  transition: border-color 0.3s ease;
  height: calc(var(--spacing-unit-px) * 7);
  width: 100%;
}

:is(.field-radio, .field-checkbox).-sm .wpcf7-list-item-label {
  font-size: 110%;
}

.form-accordion-body :is(.field-radio, .field-checkbox) .wpcf7-list-item-label {
  border-radius: calc(var(--rounded-unit-px) * 2);
}

:is(.field-radio, .field-checkbox) .wpcf7-list-item-label::before,
:is(.field-radio, .field-checkbox) .wpcf7-list-item-label::after {
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  content: '';
  display: block;
}

:is(.field-radio, .field-checkbox) .wpcf7-list-item-label::before {
  border: 1px solid #333;
  width: calc(var(--outer-bullet-size-px));
}

:is(.field-radio, .field-checkbox) .wpcf7-list-item-label::after {
  background: #333;
  opacity: 0;
  position: absolute;
  left: calc(var(--item-padding-x) + (var(--outer-bullet-size-px) - var(--inner-bullet-size-px)) / 2);
  transition: opacity 0.3s ease;
  width: calc(var(--inner-bullet-size-px));
}

:is(.field-radio, .field-checkbox) [type='radio']:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}

:is(.field-radio, .field-checkbox) .wpcf7-list-item {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  :is(.field-radio, .field-checkbox) .wpcf7-list-item-label:hover {
    border-color: #808080;
  }
}

/* submit */
.form-submit {
  padding-top: calc(var(--spacing-unit-px) * 7);
}

.form-submit-button {
  all: unset;
  background: #d65a77;
  color: #fff;
  cursor: pointer;
  display: grid;
  font-size: 16px;
  margin: 0 auto;
  place-items: center;
  position: relative;
  transition: opacity 0.3s ease;
  height: calc(var(--spacing-unit-px) * 7);
  width: calc(var(--spacing-unit-px) * 60);
}

.form-submit-button::after {
  aspect-ratio: 1 / 1;
  background: url('/wp/wp-content/themes/jc2024/assets/img/common/arrow_right.png') no-repeat center center / contain;
  content: '';
  pointer-events: none;
  position: absolute;
  right: calc(var(--spacing-unit-px) * 2);
  height: 24px;
}

.form-submit-button [type='submit'] {
  all: unset;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .form-submit-button:hover {
    opacity: 0.6;
  }
}

/* tooltips, loading spinner */
:is(.reserve2024) .wpcf7 .wpcf7-spinner {
  margin: auto;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

:is(.reserve2024) .wpcf7-not-valid-tip {
  background: #fff;
  font-size: 12px;
  padding-top: calc(var(--spacing-unit-px) * 1);
}

:is(.reserve2024) .wpcf7-form-control-wrap {
  display: block;
  position: relative;
  width: 100%;
}

:is(.reserve2024) .wpcf7-response-output {
  color: inherit;
  font-size: 100%;
  margin: calc(var(--spacing-unit-px) * 3) 0 0 !important;
  padding: calc(var(--spacing-unit-px) * 2) !important;
  text-align: center;
}

@media (min-width: 641px) and (max-width: 1024px) {
  span.field-radio,
  span.field-checkbox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  :is(.field-radio, .field-checkbox) .wpcf7-list-item-label {
    width: 100%;
  }
}

@media (max-width: 640px) {
  /* label */
  .field-item {
    width: 100%;
  }

  /* textfield */
  .field-text {
    max-width: 100%;
  }

  /* radio, checkbox */
  .form-field :is(.field-radio, .field-checkbox) {
    display: grid;
  }

  .form-accordion-body :is(.field-radio, .field-checkbox) {
    grid-template-columns: 1fr;
  }

  :is(.field-radio, .field-checkbox) .wpcf7-list-item-label {
    width: 100%;
  }

  :is(.field-radio, .field-checkbox) .wpcf7-list-item {
    display: block;
  }

  /* submit */
  .form-submit {
    padding: calc(var(--spacing-unit-px) * 6) calc(var(--spacing-unit-px) * 2) 0;
  }

  .form-submit-button {
    width: 100%;
  }
}

/* reserve2024 (confirmation modal)
----------------------------------------------------*/
.confirm {
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  inset: 0;
  margin: auto;
  overscroll-behavior-y: contain;
  position: fixed;
  place-items: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  height: 100svh;
  width: 100vw;
  z-index: 9999;
}

.confirm:not(.-show) {
  opacity: 0;
  visibility: hidden;
}

.confirm .inner {
  overflow-y: scroll;
  transition: translate 0.3s ease;
  height: 95svh;
}

.confirm:not(.-show) .inner {
  translate: 0 calc(var(--spacing-unit-px) * 3);
}

.confirm-heading {
  padding-bottom: calc(var(--spacing-unit-px) * 3);
}

.confirm-heading-large {
  font-size: 32px;
  letter-spacing: 0;
}

.confirm-heading-small {
  color: #e60012;
  font-size: 24px;
  line-height: 1.44;
  padding-top: calc(var(--spacing-unit-px) * 5);
}

.confirm-block {
  border: 0;
  margin: 0;
}

.confirm-block,
.confirm-block tbody {
  display: block;
  width: 100%;
}

.confirm-block + .confirm-block {
  padding-top: calc(var(--spacing-unit-px) * 4);
}

.confirm-block-row {
  align-items: center;
  display: grid;
  grid-template-columns: 30% 1fr;
}

.confirm-block-row + .confirm-block-row {
  border-top: 1px solid #f6f4da;
}

.confirm-block-row-head,
.confirm-block-row-data {
  border: 0;
  line-height: 1.4;
  padding: calc(var(--spacing-unit-px) * 4) calc(var(--spacing-unit-px) * 3);
  word-break: break-all;
}

.confirm-block-row-data:is(.-multiple-lines) {
  white-space: pre-wrap;
}

.confirm-block-row-head {
  background: #fffee6;
  color: #000;
  font-weight: 500;
  word-break: auto-phrase;
  height: 100%;
}

.confirm-submit {
  align-items: center;
  display: grid;
  gap: calc(var(--spacing-unit-px) * 2);
  grid-template-columns: repeat(2, 1fr);
  padding-top: calc(var(--spacing-unit-px) * 5);
}

.confirm-submit-button {
  all: unset;
  cursor: pointer;
  display: grid;
  font-size: 16px;
  margin: 0 auto;
  place-items: center;
  position: relative;
  transition: opacity 0.3s ease;
  height: calc(var(--spacing-unit-px) * 7);
  width: 100%;
}

.confirm-submit-button:not(.-prev) {
  background: #d65a77;
  color: #fff;
}

.confirm-submit-button:is(.-prev) {
  border: 2px solid #d65a77;
  color: #d65a77;
}

.confirm-submit-button::after {
  aspect-ratio: 1 / 1;
  background: url('/wp/wp-content/themes/jc2024/assets/img/common/arrow_right.png') no-repeat center center / contain;
  content: '';
  pointer-events: none;
  position: absolute;
  right: calc(var(--spacing-unit-px) * 2);
  height: 24px;
}

.confirm-submit-button :is([type='button'], [type='submit']) {
  all: unset;
  cursor: pointer;
  opacity: 0;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .confirm-submit-button:hover {
    opacity: 0.6;
  }
}

@media (max-width: 640px) {
  .confirm {
    padding: calc(var(--spacing-unit-px) * 2);
  }

  .confirm .inner {
    padding: calc(var(--spacing-unit-px) * 5) 0 calc(var(--spacing-unit-px) * 5);
    height: 100%;
  }

  .confirm-heading {
    padding: 0 calc(var(--spacing-unit-px) * 2) calc(var(--spacing-unit-px) * 2);
  }

  .confirm-heading-large {
    font-size: 20px;
    letter-spacing: 0.09em;
    text-align: center;
  }

  .confirm-heading-small {
    font-size: 16px;
    padding-top: calc(var(--spacing-unit-px) * 3);
    text-align: center;
  }

  .confirm-block + .confirm-block {
    padding-top: calc(var(--spacing-unit-px) * 3);
  }

  .confirm-block-row-head {
    padding: calc(var(--spacing-unit-px) * 3) calc(var(--spacing-unit-px) * 1);
  }

  .confirm-block-row-data {
    font-size: 16px;
    padding: calc(var(--spacing-unit-px) * 3) calc(var(--spacing-unit-px) * 2);
  }

  .confirm-submit {
    gap: calc(var(--spacing-unit-px) * 1);
    grid-template-columns: 1fr;
    padding: calc(var(--spacing-unit-px) * 3) calc(var(--spacing-unit-px) * 2) 0;
  }

  .confirm-submit-button:is(.-prev) {
    order: 2;
  }
}