@font-face {
  font-family: "GenYoGothic";
  src: url("/resources/fonts/GENYOGOTHIC-R.TTC") format("collection");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ITC Avant Garde Pro";
  src: url("/resources/fonts/ITCAVANTGARDEPRO-MD.OTF") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --font-family-tc: "GenYoGothic", sans-serif;
  --font-family-en: "ITC Avant Garde Pro", sans-serif;
  --col-white: #fff;
  --col-white-30: rgba(255 255 255 / 0.3);
  --col-white-75: rgba(255 255 255 / 0.75);
  --col-white-90: rgba(255 255 255 / 0.9);
  --radius-glow-panel: 1.79cqw;
  --radius-form-control: 1.5cqw;
}
.img {
  width: auto;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}
.btn {
  background: transparent;
}
[hidden] {
  display: none !important;
}
.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* #region - THEME - */
.theme-HC {
  --col-theme: #20a8d1;
  --url-menu-bg: url(/resources/menu-bg-hc.webp);
  --url-exhibit-bg: url(/resources/hc-bg-main.webp);
  --url-exhibit-bg-fill: url(/resources/hc-bg-fill.webp);
}
.theme-CL {
  --col-theme: #0041a0;
  --url-menu-bg: url(/resources/menu-bg-ci.webp);
  --url-exhibit-bg: url(/resources/cl-bg-main.webp);
  --url-exhibit-bg-fill: url(/resources/cl-bg-fill.webp);
}
.theme-ST {
  --col-theme: #0058d5;
  --url-menu-bg: url(/resources/menu-bg-st.webp);
  --url-exhibit-bg: url(/resources/st-bg-main.webp);
  --url-exhibit-bg-fill: url(/resources/st-bg-fill.webp);
}
.theme-SD {
  --col-theme: #6d5bce;
  --url-menu-bg: url(/resources/menu-bg-sd.webp);
  --url-exhibit-bg: url(/resources/sd-bg-main.webp);
  --url-exhibit-bg-fill: url(/resources/sd-bg-fill.webp);
}
.theme-IC {
  --col-theme: #00959e;
  --url-menu-bg: url(/resources/menu-bg-ic.webp);
  --url-exhibit-bg: url(/resources/ic-bg-main.webp);
  --url-exhibit-bg-fill: url(/resources/ic-bg-fill.webp);
}
/* #endregion */

/* #region - GLOW PANEL - */
.glow-panel {
  --glow-color: var(--col-theme);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border: 0.62cqw solid var(--col-white);
  border-radius: var(--radius-glow-panel);
  background: var(--glow-color);
  box-shadow: 0 0 3cqw var(--col-white);
  overflow: visible;

  &::before, &::after {
    content: "";
    position: absolute;
    border-radius: var(--radius-glow-panel);
    pointer-events: none;
  }
}
.glow-panel::before {
  inset: 0;
  z-index: 1;
  background: var(--col-white);
  filter: blur(3cqw);
  mix-blend-mode: overlay;
}
.glow-panel::after {
  z-index: 2;
  inset: 1.25cqw;
  background: var(--glow-color);
  filter: blur(1cqw);
}

.glow-panel__icon {
  pointer-events: none;
  z-index: 10;
}
.glow-panel__text {
  z-index: 10;
  color: var(--col-white);
  font-family: var(--font-family-en);
  font-weight: 500;
  text-align: center;
  font-stretch: 108%;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  pointer-events: none;
}
.glow-panel--button {
  width: 21.28cqw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  .glow-panel__icon {
    width: 100%;
  }
  .glow-panel__text {
    position: absolute;
    bottom: -2cqw;
    left: 50%;

    font-size: 3.08cqw;
    line-height: 3.33cqw;
    transform: translate(-50%, 100%);
    white-space: nowrap;
  }
}

.glow-panel--banner {
  width: 100%;
  aspect-ratio: 290/77;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  .glow-panel__icon {
    height: 18.9cqw;
  }
  .glow-panel__text {
    font-size: 5.38cqw;
    text-align: left;
  }
}
/* #endregion */

/* #region - RETURN BUTTON */
.btn--return {
  --col-return-btn: var(--col-white);
  position: relative;
  align-self: flex-start;
  width: 7.69cqw;
  aspect-ratio: 1;
  padding: 0;
  border: 0.36cqw solid var(--col-return-btn);
  border-radius: 1.03cqw;
  background: rgba(255, 255, 255, 0.1);
}

.btn--return::before,
.btn--return::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
}

.btn--return::before {
  left: 2.3cqw;
  width: 2.5cqw;
  height: 2.5cqw;
  border-bottom: 0.36cqw solid var(--col-return-btn);
  border-left: 0.36cqw solid var(--col-return-btn);
  transform: translateY(-50%) rotate(45deg);
}

.btn--return::after {
  left: 2.25cqw;
  width: 3.5cqw;
  height: 0.36cqw;
  background: var(--col-return-btn);
  transform: translateY(-50%);
}
/* #endregion */


/* #region - SPLASH - */
.splash {
  background:
    radial-gradient(circle at 12% 8%, rgba(32, 214, 255, 0.72), transparent 35%),
    radial-gradient(circle at 18% 92%, rgba(125, 57, 255, 0.68), transparent 38%),
    linear-gradient(145deg, #08aeea 0%, #0759dd 46%, #1516a9 72%, #4219c7 100%);
}

.sp__bar-bg {
  height: 1.5cqw;
  border: var(--col-white-75) 0.35cqw solid;
  border-radius: 9999px;
  box-shadow: 0 0 1cqw var(--col-white);
}

.sp__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #20e7ff 0%, #58c9ff 45%, #b795ff 100%);
}

.sp__pct {
  color: var(--col-white);
  font-family: var(--font-family-en);
  font-weight: 500;
  font-size: 3cqw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-shadow: 0 0 1cqw var(--col-white);
}
/* #endregion */

/* #region - P00_HOME - */
.home .bg-top {
  background-image: url(/resources/home-bg-main.webp);
}
.home .bg-fill {
  background: url(/resources/home-bg-fill.webp) no-repeat center/100% 100%;
}
.home .page-content {
  padding-top: 80cqw;
  flex: 1;
  justify-content: center;
}

.theme-menu__buttons {
  display: grid;
  grid-template-columns: repeat(3, 21.28cqw);
  grid-auto-rows: 21.28cqw;
  justify-content: center;
  gap: 11.54cqw 6.6cqw;

}
.theme-menu__buttons> :nth-child(4),
.theme-menu__buttons> :nth-child(5) {
  position: relative;
  left: 13.94cqw;
}
/* #endregion */

/* #region - P01_EXHIBIT_MENU - */
.exhibit-menu .bg-scroll {
  background: var(--col-theme);
  .bg-top {
    background-image: var(--url-menu-bg);
  }
  .bg-fill {
    background: var(--col-theme);
    transform: translateY(-0.5cqw);
  }
}

.exhibit-menu .page-content {
  padding: 28.6cqw 11.8cqw 15cqw;
  gap: 5.5cqw;
}

.exhibit-menu__buttons {
  width: 100%;
  display: grid;
  gap: 4cqw;
  &.use-fade-slide {
    animation: fadeSlide 0.3s ease;
  }
}

.btn--exhibit {
  width: 100%;
  min-height: 8.57cqw;
  height: auto;
  padding: 0;

  display: grid;
  grid-template-columns: 18% 82%;
  align-items: stretch;
  border: var(--col-white) 0.5cqw solid;
  border-radius: 2cqw;
  overflow: hidden;
  text-align: left;
}
.btn--exhibit .btn__index {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--col-theme);
  border-right: var(--col-white) 0.5cqw solid;
  color: var(--col-white);
  font-family: var(--font-family-en);
  font-size: 4.61cqw;
  letter-spacing: 0.1em;
}
.btn--exhibit .btn__text {
  min-width: 0;
  padding: 1.5cqw 2.5cqw;

  display: flex;
  align-items: center;

  background: var(--col-white-30);
  color: var(--col-white);
  font-family: var(--font-family-tc);
  font-size: 3.1cqw;
  letter-spacing: 0.05em;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.btn--exhibit .btn__index-text {
  display: inline-block;
  transform: scaleX(1.15);
  transform-origin: center;
}

.exhibit-menu__submenu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4cqw;
}
.exhibit-menu__submenu-back {
  width: 60%;
  grid-template-columns: auto;
  background: var(--col-white-30);
  align-self: center;
  .btn__text {
    justify-self: center;
    background-color: transparent;
  }
}
/* #endregion */

/* #region - P02_EXHIBIT - */
.exhibit .bg-scroll {
  background: var(--col-white);
  .bg-top {
    background-image: var(--url-exhibit-bg);
    aspect-ratio: 390/200;
  }
  .bg-fill {
    background: var(--col-white);
  }
  .bg-bottom {
    background-image: var(--url-exhibit-bg-fill);
    aspect-ratio: 390/350;
  }
}
.exhibit .page-content {
  padding: 43.5cqw 0 0;
  flex: 1;
}
.exhibit .btn--return {
  --col-return-btn: #888888;
  margin-left: 5cqw;
}
.poster-area {
  width: 100%;
  .progress-bar {
    transform: translateY(-5cqw);
    &::after {
      background: var(--col-theme);
    }
  }
}
.exhibit__btn-group {
  margin: 6cqw 0 8cqw;
  mix-blend-mode: screen;
  .btn--group .btn__image {
    width: 36cqw;
  }
}
/* #endregion */

/* #region - P03_FEEDBACK - */
.feedback .bg-top {
  background-image: url(/resources/feedback-bg-main.webp);
}
.feedback .bg-fill {
  background: url(/resources/feedback-bg-fill.webp) no-repeat center/100% 100%;
}

.feedback .page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100cqh;
  padding-top: 37cqw;
  box-sizing: border-box;
  position: relative;
}

.feedback .feedback-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
  padding: 10cqw;
}

.feedback .step.active {
  flex: 1 1 0;
  min-height: 0;
  justify-content: space-between;
}

.feedback__form {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  gap: 5cqw;
}

.step__title {
  color: var(--col-white);
  font-family: var(--font-family-en);
  font-size: 5cqw;
  line-height: 5.13cqw;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  white-space: nowrap;
  text-align: center;
  position: relative;
  margin-bottom: 7cqw;
  &::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -3cqw;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--col-white-90) 12%,
        var(--col-white-90) 88%,
        transparent 100%);
  }
}
.feedback .button-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5cqw;
  .btn--back .btn__image {
    width: 27.52cqw;
  }
  .btn--next .btn__image {
    width: 63.33cqw;
  }
  .btn--submit .btn__image {
    width: 47.78cqw;
  }
}

.feedback__return-btn {
  position: absolute;
  z-index: 1;
  top: 41cqw;
  left: 10cqw;
}

.form-status-overlay {
  background: rgba(3, 18, 57, 0.72);
  backdrop-filter: blur(1.2cqw);
}

.form-status-overlay .status-panel {
  width: 58cqw;
  height: 55cqw;
  box-sizing: border-box;
  border: 0.3cqw solid rgba(255, 255, 255, 0.85);
  border-radius: 3cqw;
  color: var(--col-white);
  background:
    linear-gradient(145deg, rgba(8, 174, 234, 0.96) 0%, rgba(7, 65, 160, 0.98) 52%, rgba(109, 91, 206, 0.98) 100%);
  box-shadow:
    0 0 3cqw rgba(88, 201, 255, 0.55),
    0 2cqw 6cqw rgba(3, 18, 57, 0.45);
  font-family: var(--font-family-en);
  font-size: 4cqw;
  font-weight: 500;
  line-height: 1.4;
}

.form-status-overlay .loader {
  width: 10cqw;
  height: 10cqw;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #20e7ff;
  filter: drop-shadow(0 0 1.5cqw rgba(32, 231, 255, 0.75));
}

.form-status-overlay .icon-success,
.form-status-overlay .icon-error {
  font-family: var(--font-family-en);
  font-size: 12cqw;
  line-height: 1;
  text-shadow: 0 0 2cqw currentColor;
}

.form-status-overlay .icon-success {
  color: #41d6a3;
}

.form-status-overlay .icon-error {
  color: #ff6b78;
}

.form-status-overlay #statusBtn {
  min-width: 24cqw;
  margin-top: 1cqw;
  padding: 1.8cqw 5cqw;
  border: 0.25cqw solid var(--col-white-90);
  border-radius: 5cqw;
  color: var(--col-white);
  background: var(--col-white-30);
  box-shadow: 0 0 2cqw rgba(88, 201, 255, 0.55);
  font-family: var(--font-family-en);
  font-size: 3.6cqw;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* #endregion */
/* #region - P03_FEEDBACK--STEP01 - */
.step-01 {
  padding-top: 10cqw;
}
.step-01 .feedback__form {
  justify-content: flex-start;
  margin-top: 5cqw;
  gap: 8cqw;
}

.step-01 .form-field {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2cqw;
  padding-bottom: 1cqw;
  color: var(--col-white);
}

.step-01 .form-field::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--col-white-90) 12%,
      var(--col-white-90) 88%,
      transparent 100%);
}

.step-01 .label,
.step-01 .input {
  font-family: var(--font-family-tc);
  font-size: 3.6cqw;
  line-height: 5.13cqw;
}

.step-01 .label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 1.5cqw;
  background-color: var(--col-white-30);
}

.step-01 .input {
  flex: 1 1 auto;
  min-width: 0;
  height: 5.13cqw;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--col-white);
  background: transparent;
}
/* #endregion */
/* #region - P03_FEEDBACK--STEP02 - */
.feedback .step-02.active {
  flex: 1 0 auto;
  min-height: max-content;
}

.step-02 .feedback__form {
  flex: 1 0 auto;
  min-height: max-content;
  justify-content: flex-start;
}

.step-02 .feedback-question {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}

.step-02 .question-label,
.step-02 .radio-label,
.step-02 .inquiry-description,
.step-02 .select-input,
.step-02 .feedback-textarea {
  font-family: var(--font-family-tc);
  font-size: 3.6cqw;
  line-height: 5.13cqw;
}

.step-02 .question-label {
  color: var(--col-white);
}

.step-02 .select-field {
  position: relative;
  width: 100%;
}

.step-02 .select-field::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 8cqw;
  bottom: 1px;
  width: 1px;
  background: var(--col-white-75);
  pointer-events: none;
}

.step-02 .select-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.8cqw;
  width: 0;
  height: 0;
  border-right: 1.5cqw solid transparent;
  border-left: 1.5cqw solid transparent;
  border-top: 2cqw solid var(--col-white);
  transform: translateY(-30%);
  pointer-events: none;
}

.step-02 .select-input {
  width: 100%;
  height: 8cqw;
  padding: 0 10cqw 0 3cqw;
  border: 1px solid var(--col-white);
  border-radius: var(--radius-form-control);
  outline: 0;
  appearance: none;
  color: var(--col-white);
  background: rgba(255, 255, 255, 0.2);
}

.step-02 .select-input option {
  color: #1d1d1d;
  background: var(--col-white-75);
}

.step-02 .select-input:disabled,
.step-02 .feedback-textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.step-02 .inquiry-fieldset {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5cqw;
  padding: 0;
  border: 0;
  margin: 0;
  min-width: 0;
  min-height: max-content;
}

.step-02 .inquiry-option {
  display: flex;
  flex-direction: column;
  gap: 2cqw;
}

.step-02 .inquiry-row {
  display: flex;
  align-items: center;
  gap: 2cqw;
}

.step-02 .radio-input {
  flex: 0 0 auto;
  width: 4.2cqw;
  height: 4.2cqw;
  margin: 0;
  border: 1px solid var(--col-white);
  border-radius: 50%;
  appearance: none;
  background: transparent;
}

.step-02 .radio-input:checked {
  background: radial-gradient(circle, var(--col-white) 0 38%, transparent 42%);
}

.step-02 .radio-label {
  color: var(--col-white);
  white-space: nowrap;
}

.step-02 .inquiry-select-field {
  flex: 1 1 auto;
  min-width: 0;
}

.step-02 .inquiry-description {
  margin: 0 0 0 6.2cqw;
  color: var(--col-white);
}

.step-02 .feedback-textarea {
  width: 100%;
  min-height: 30cqw;
  padding: 3cqw;
  border: 1px solid var(--col-white);
  border-radius: var(--radius-form-control);
  outline: 0;
  color: var(--col-white);
  background: transparent;
  resize: none;
}

.step-02 .feedback-textarea::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
/* #endregion */