@charset "UTF-8";

/* =====================
  共通
===================== */
.article[data-id='2'] {
  padding-bottom: 14.5vw;
  padding-top: 11.5vw;
}
.article[data-id='2'] h2 {
  font-size: 4.26666666vw;
  font-weight: bold;
  color: #222;
  border-bottom: 2px solid #eeeeee;
  padding-bottom: 1.5vw;
  position: relative;
  text-align: left;
  padding-right: 3vw;
  padding-left: 3vw;
  margin-bottom: 6vw;
}
.article[data-id='2'] h2::after {
  content: '';
  display: block;
  width: 9.86666666vw;
  height: 2px;
  background: #1f489d;
  position: absolute;
  bottom: -2px;
  left: 0px;
}
.article[data-id='2'] p {
  text-align: left;
  font-size: 3.46666666vw;
  line-height: 2;
  &.tac {
    text-align: center;
    font-size: 5vw;
    font-weight: 600;
  }
}
.article[data-id='2'] .wrapper {
  width: 92vw;
  margin-left: auto;
  margin-right: auto;
}
.form-wrapper {
  margin-top: 7vw;
}

/* ==== ボタン ==== */
.form-submit {
  text-align: center;
  margin-top: 12vw;
}
.form-submit .btn {
  width: 76.53333333vw;
  height: 16.8vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3.73333333vw;
  font-weight: bold;
  color: #fff;
  background-color: #1f489d;
}
.form-submit .btn::before {
  display: inline-block;
  content: '';
  background-image: url(../../img/common/06.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 2.66666666vw;
  height: 2.66666666vw;
  margin-right: 0.5em;
  position: relative;
  top: -0.1em;
}
.form-back {
  color: #1f489d;
  font-size: 3.2vw;
  font-weight: bold;
  margin-top: 9vw;
}

/* =====================
  お問い合わせ
===================== */

/* ==== unit01 ==== */
.form-wrapper .unit01 {
  background-color: #f8f9fb;
  padding-top: 10.5vw;
  padding-bottom: 5.5vw;
  margin-bottom: 10vw;
}
.form-wrapper .unit01 .item .title {
  color: #1f489d;
  margin-bottom: 4.5vw;
}
.form-wrapper .unit01 .item input:not([type='checkbox']) {
  /* background-color: #fff !important; */
  height: 45px;
}
.form-wrapper .unit01 .item + .item {
  margin-top: 8vw;
}

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

.form-wrapper .check-wrapper div {
  margin-bottom: 5px;
}
.form-wrapper .check-wrapper div:last-child {
  width: 100%;
}
.form-wrapper .check-wrapper .agree {
  text-align: left;
  border-top: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  font-weight: bold;
  font-size: 15px;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: 19px;
}
.form-wrapper .check-wrapper input[type='checkbox'] {
  display: none;
}
.form-wrapper .check-wrapper label {
  cursor: pointer;
  transition: all 250ms ease 0s;
  display: inline-flex;
}
.form-wrapper .check-wrapper label span {
  line-height: 1.3;
  display: inline-block;
  text-align: left;
  font-size: 14px;
}
.form-wrapper .check-wrapper label i {
  display: inline-block;
  width: 17px;
  height: 17px;
  background: #fff;
  border: 1px solid #9c9c9c;
  border-radius: 2px;
  position: relative;
  margin-right: 0.3em;
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
  top: 1px;
}
.form-wrapper .check-wrapper input[type='checkbox']:checked + label i {
  background: #3aaae5;
  border: 1px solid #3aaae5;
}
.form-wrapper .check-wrapper label i::after {
  content: '';
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check%22%20class%3D%22svg-inline--fa%20fa-check%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%) scale(0.1);
  left: 2px;
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.form-wrapper .check-wrapper input[type='checkbox']:checked + label i::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.form-wrapper .check-wrapper input[type='checkbox'] {
  display: none;
}

/* ==== テーブル ==== */
.form-wrapper .item p {
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
}
.form-wrapper .item + .item {
  margin-top: 4.5vw;
}
.form-wrapper .item .title {
  display: block;
  font-weight: bold;
  font-size: 15px;
  text-align: left;
  margin-bottom: 2vw;
}
.form-wrapper .item.must .title::after {
  display: inline-block;
  content: '必須';
  font-weight: normal;
  color: #e21a1a;
  font-size: 12px;
  margin-left: 0.5em;
}
.form-wrapper .item input:not([type='checkbox'], [type='radio']) {
  border: 2px solid #cecece;
  width: 100%;
  height: 50px;
  padding: 0 1em;
  border-radius: 2px;
  box-shadow: inset 0px 2px 6px 0px rgb(0 0 0 / 9%);
  transition: --all-animation;
}
.form-wrapper .item input:not([type='checkbox'], [type='radio']):focus {
  box-shadow: none;
}
.form-wrapper .item:nth-child(even) input:not([type='checkbox'], [type='radio']) {
  background-color: #fff;
}
.form-wrapper .item:nth-child(odd) input:not([type='checkbox'], [type='radio']) {
  background-color: #f6faff;
}

.form-wrapper .item input:not([type='checkbox']):focus {
  box-shadow: none;
}
.form-wrapper .item input + input {
  margin-top: 2.5vw;
}
.form-wrapper .item textarea {
  border: 2px solid #cecece;
  width: 100%;
  height: 150px;
  padding: 1em;
  border-radius: 2px;
  box-shadow: inset 0px 2px 6px 0px rgb(0 0 0 / 9%);
  transition: --all-animation;
}
.form-wrapper .item textarea:focus {
  box-shadow: none;
}
/* Email 必須カラー */
.form-wrapper .item input[name='email'] {
  background-color: #f6faff !important;
}
.form-wrapper .item input[name='address'] {
  background-color: #f6faff !important;
}
/* 郵便番号 入力エリアサイズ */
.form-wrapper .item input[name='postalcode'] {
  background-color: #fff !important;
  width: 43vw;
}

/* ==== プラポリチェックボックス ==== */
.form-agree .agree {
  text-align: left;
  border-top: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  font-weight: bold;
  font-size: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-top: 12px;
}
.form-agree input[type='checkbox'] {
  display: none;
}
.form-agree label {
  cursor: pointer;
  transition: all 250ms ease 0s;
}
.form-agree label i {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid #cecece;
  border-radius: 2px;
  position: relative;
  vertical-align: -6px;
  margin-right: 0.6em;
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.form-agree input[type='checkbox']:checked + label i {
  background: #1f489d;
  border: 1px solid #1f489d;
}
.form-agree label i::after {
  content: '';
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check%22%20class%3D%22svg-inline--fa%20fa-check%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 15px;
  height: 14px;
  display: block;
  position: absolute;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%) scale(0.1);
  left: 3px;
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.form-agree input[type='checkbox']:checked + label i::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.form-agree input[type='checkbox'] {
  display: none;
}

/* =====================
  入力内容のご確認
===================== */
.exhibition_confirm-contents .article[data-id='2'] {
  padding-bottom: 11.5vw;
  padding-top: 6vw;
}
.exhibition_confirm-contents .article[data-id='2'] .wrapper {
  width: 100%;
}
.exhibition_confirm-contents .article[data-id='2'] p {
  margin-left: 4vw;
  margin-right: 4vw;
}
.exhibition_confirm-contents table,
.exhibition_confirm-contents tbody {
  display: block;
}
.exhibition_confirm-contents tr {
  display: block;
  border-bottom: 1px solid #cecece;
  padding: 3.5vw 4vw;
}
.exhibition_confirm-contents table th,
.exhibition_confirm-contents table td {
  font-size: 3.2vw;
  display: block;
}
.exhibition_confirm-contents table th {
  margin-bottom: 1.5vw;
  font-weight: bold;
}
.exhibition_confirm-contents table .must th::after {
  display: inline-block;
  content: '必須';
  font-weight: normal;
  color: #e21a1a;
  margin-left: 0.5em;
}
.exhibition_confirm-contents .form-wrapper .unit01 {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.exhibition_confirm-contents .form-wrapper .unit01 tr:first-child {
  border-top: 1px solid #cecece;
}
/* =====================
  送信完了
===================== */
.exhibition_complete-contents .article[data-id='2'] {
  padding-bottom: 15.5vw;
  padding-top: 6vw;
}
.exhibition_complete-contents .article[data-id='2'] .wrapper {
  width: 100%;
}
.exhibition_complete-contents .article[data-id='2'] p {
  margin-left: 4vw;
  margin-right: 4vw;
}
.exhibition_complete-contents .form-submit {
  margin-top: 11vw;
}
.exhibition_complete-contents .form-submit .btn::before {
  display: none;
}

/* =====================
  ポップアップ
===================== */
.js-popup {
  color: #1f489d;
  font-weight: bold;
}

/* UI LOCK */
body.popup-on {
  pointer-events: none;
  overflow: hidden;
}
.form-popup {
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.95);
}
body.popup-on .popup {
  -webkit-transition: opacity 600ms var(--easeOutExpo) 0ms;
  -moz-transition: opacity 600ms var(--easeOutExpo) 0ms;
  -ms-transition: opacity 600ms var(--easeOutExpo) 0ms;
  -o-transition: opacity 600ms var(--easeOutExpo) 0ms;
  transition: opacity 600ms var(--easeOutExpo) 0ms;
  z-index: 2000;
  opacity: 1;
  pointer-events: auto;
}
.popup-inner {
  padding: 3vw 1em;
  max-height: 100vh;
  -ms-overflow-y: auto;
  overflow-y: auto;
  text-align: center;
}
.popup-item {
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  padding: 8vw 6vw;
  opacity: 0;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}
body.popup-on .popup-item {
  -webkit-transition: all 600ms var(--easeOutExpo) 250ms;
  -moz-transition: all 600ms var(--easeOutExpo) 250ms;
  -ms-transition: all 600ms var(--easeOutExpo) 250ms;
  -o-transition: all 600ms var(--easeOutExpo) 250ms;
  transition: all 600ms var(--easeOutExpo) 250ms;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
/* 閉じる */
.popup-close {
  position: fixed;
  top: calc(3vw - 1vw);
  z-index: 2001;
  right: 3vw;
  width: 10.6667vw;
  height: 10.6667vw;
  border: 2px solid var(--white);
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: var(--radiusCircle);
  display: block;
  -webkit-transition: all 250ms ease 0s;
  -moz-transition: all 250ms ease 0s;
  -ms-transition: all 250ms ease 0s;
  -o-transition: all 250ms ease 0s;
  transition: all 250ms ease 0s;
  color: #fff;
  border-radius: 0;
}
.popup-close:active {
  background: rgba(255, 255, 255, 1);
  color: var(--black);
}
.popup-close::before {
  font-weight: normal;
  display: inline-flex;
  width: 100%;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: calc(10.6667vw - 2px);
  font-size: 5vw;
  line-height: 1;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  content: '×';
}
.exhibition-contents.popup-on .popup-item {
  padding: 8vw 4vw;
}
.exhibition-contents .policy-wrapper .wrapper {
  width: auto;
}

/* =====================
  exhibition-check
===================== */
.exhibition-check {
  margin-block-end: 10vw;

  .title {
    margin-bottom: 2vw !important;
  }

  /* ==== tr ==== */
  .tr {
    & :where(.th, .td) {
      vertical-align: top;
    }
    .td {
      padding-bottom: 10vw;
      word-break: break-all;
    }

    & label {
      cursor: pointer;
      font-size: calc((100 / 750) * 30 * 1vw);
    }

    & input:not([type='checkbox']) {
      background-color: transparent !important;
    }

    & :is([type='checkbox'], [type='radio'], select) {
      appearance: auto !important;
      background-color: unset !important;
      height: unset !important;
      accent-color: #1f489d !important;
      margin: unset;
      cursor: pointer !important;
    }

    .unit {
      display: block flex;
      align-items: flex-start;
      gap: 0.4em;
      padding-block-start: 2.2vw;
      border-bottom: 1px solid #aaaaaa;
      padding-block-end: 7vw;

      & input[type='checkbox'] {
        flex-shrink: 0;
        translate: 0 0vw;
      }
      .item {
        margin-block: calc((1em - 1lh) / 2);
        display: block grid;
        gap: 3.5vw;
      }
    }

    /* =====================
      schedule
    ===================== */
    .schedule {
      display: block grid;
      gap: 4.3vw;
    }

    /* =====================
      am-or-pm
    ===================== */
    .am-or-pm {
      pointer-events: none;
      opacity: 0.3;
      display: block flex;
      align-items: flex-start;
      gap: calc((100 / 750) * 26 * 1vw);

      .fwb {
        flex-shrink: 0;
        font-size: calc((100 / 750) * 30 * 1vw);
      }

      .body {
        display: block flex;
        flex-wrap: wrap;
        gap: calc((100 / 750) * 22 * 1vw);

        & label {
          display: flex;
          gap: calc((100 / 750) * 16 * 1vw);
          align-items: center;
          justify-content: flex-start;

          & span {
            flex-shrink: 0;
            font-size: calc((100 / 750) * 30 * 1vw);
          }
        }
      }
    }

    /* =====================
      arrival-time
    ===================== */
    .arrival-time {
      pointer-events: none;
      opacity: 0.3;
      display: block flex;
      align-items: center;
      gap: calc((100 / 750) * 12 * 1vw);

      .fwb {
        font-size: calc((100 / 750) * 30 * 1vw);
      }
      & select {
        border: 1px solid #cecece;
        font-family: inherit;
        font-size: calc((100 / 750) * 28 * 1vw);
        background: white !important;
      }
    }

    .unit:has(.js-schedule:checked) {
      .am-or-pm,
      .arrival-time {
        pointer-events: auto;
        opacity: 1;
      }
    }
  }
}

.confirm-in-wrap {
  padding-left: 1em !important;
}
.confirm-wrap {
  padding-block: 0.5em !important;
}
.confirm-wrap + .confirm-wrap {
  border-block-start: 1px solid #cecece !important;
}