:root {
  --key-color: #ae7700;
  --border-color: #dddddd;
  --primary-bg-color: #f1f1f1;
  --secondary-bg-color: #ffffff;
  --primary-font-family: "Zen Kaku Gothic New", sans-serif;
  --secondary-font-family: "Zen Old Mincho", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

/* 縦画面 */
.container {
  width: 800px;
  height: 1280px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.header {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 14px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .back-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
    pointer-events: auto;
    width: 117px;
    height: 55px;
    outline: 1px solid var(--key-color);
    border-radius: 9999px;
    color: var(--key-color);
    font-size: 23px;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-medium);
  }

  .back-top-btn {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    opacity: 0;
    width: 300px;
    height: 100px;
  }

  .header-btns-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-right: 30px;
  }
}

.back-btn-arrow-left {
  margin-right: 10px;
  width: 21px;
  height: 21px;
}

.btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.horizontal-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--secondary-bg-color);
  color: var(--key-color);
  border-radius: 10px;
  padding: 43px 60px;
  font-size: 32px;
  font-family: var(--primary-font-family);
  font-weight: var(--font-weight-medium);
  outline: 4px solid var(--border-color);
  outline-offset: -4px;
  line-height: 1.25;
}

.btn-with-icon {
  position: relative;

  img {
    position: absolute;
    left: 60px;
  }
}

.lang-btn,
.bell-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--key-color);
  font-size: 16px;
  font-family: var(--primary-font-family);
  font-weight: var(--font-weight-medium);
  pointer-events: auto;

  img {
    width: 30px;
    height: 30px;
  }
}

.key-color-btn {
  width: fit-content;
  height: 84px;
  padding: 26px 45px 28px;
  background: var(--key-color);
  color: var(--secondary-bg-color);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-family: var(--primary-font-family);
}

.key-color-btn-disabled {
  background: var(--border-color);
  color: #969696;
}

.key-color-btn-inverted {
  background-color: transparent;
  color: var(--key-color);
  outline: 1px solid var(--key-color);
}

dialog {
  border: none;
  background: transparent;
  position: relative;

  .modal-header-btns-right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    position: absolute;
    top: 30px;
    right: 30px;
  }

  .modal-back-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30px;
    left: 30px;
    pointer-events: auto;
    width: 117px;
    height: 55px;
    border: solid 1px var(--key-color);
    border-radius: 9999px;
    color: var(--key-color);
    font-size: 23px;
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-medium);
  }

  .modal-lang-btn {
    width: 558px;
    height: 159px;
  }
}

#langSelectModal {
  margin: 0;
  min-width: 800px;
  min-height: 1280px;
  padding: 162px 121px 163px 121px;
}

#backTopModal {
  margin: 0;
  min-width: 800px;
  min-height: 1280px;
  padding: 382px 40px;

  .back-top-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 720px;
    height: 486px;
    background: var(--primary-bg-color);
    border-radius: 10px;
    padding: 80px 40px;

    .page-description {
      margin-bottom: 60px;
    }

    input {
      width: 640px;
      margin-bottom: 50px;
    }
  }
}

#backTopModal:has(.msg-visible) {
  padding: 358px 40px;

  .back-top-modal-content {
    height: 564px;
    padding: 20px 40px 80px 40px;

    .form-action-msg {
      width: 680px;
      margin-bottom: 80px;
    }
  }
}

#loadingModal {
  margin: 0;
  min-width: 800px;
  min-height: 1280px;
  padding: 586px 348px;

  .loading-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    width: 103px;
    height: 107px;

    p {
      font-family: var(--primary-font-family);
      font-size: 18px;
      font-weight: var(--font-weight-regular);
      color: var(--key-color);
    }
  }
}

/* モーダルの背景 */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
  animation: backdropFadeIn 0.2s ease-in;
}

/* 閉じるアニメーション */
dialog.closing::backdrop {
  animation: backdropFadeOut 0.2s ease;
}

.loading-spinner {
  width: 64px;
  height: 64px;
  border: 4px solid var(--key-color);
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes backdropFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.content-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  min-height: 100%;
  background: var(--primary-bg-color);
  color: black;
}

.main-content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 10px 40px 80px 40px;
}

.page-title {
  font-family: var(--primary-font-family);
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  margin-bottom: 30px;
}

.page-description {
  font-family: var(--primary-font-family);
  font-size: 25px;
  line-height: 2;
  text-align: center;
  font-weight: var(--font-weight-regular);
  margin-bottom: 80px;
}

.form-action-msg {
  font-family: var(--primary-font-family);
  font-size: 25px;
  font-weight: var(--font-weight-medium);
  width: 720px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  color: red;
  outline: 1px solid red;
  border-radius: 10px;
  background: #fbe9e9;
  margin-bottom: 30px;
}

.msg-visible {
  display: flex;
}

.msg-hidden {
  display: none;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-inputs {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 96px;
}

.form-label {
  font-family: var(--primary-font-family);
  font-size: 30px;
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10.5px;
  min-width: 230px;
}

.form-input {
  width: 720px;
  height: 82px;
  padding: 0 20px;
  font-family: var(--primary-font-family);
  font-size: 25px;
  font-weight: var(--font-weight-regular);
  outline: 3px solid var(--border-color);
  border-radius: 10px;
  background: var(--secondary-bg-color);
  box-sizing: border-box;
}

.form-select {
  width: 720px;
  height: 82px;
  padding: 0 20px;
  font-family: var(--primary-font-family);
  font-size: 25px;
  font-weight: var(--font-weight-regular);
  border: 3px solid var(--border-color);
  border-radius: 10px;
  background: var(--secondary-bg-color);
  box-sizing: border-box;
  background-image: url("../images/dropdown-icon.png");
  background-repeat: no-repeat;
  background-position: right 25px center;
  background-size: 22px 22px;
}

.info-card {
  width: 720px;
  margin: 0 auto;
  margin-bottom: 80px;

  .info-box {
    background-color: var(--secondary-bg-color);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .info-title-row {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 17px 30px;
      border-bottom: 1px solid var(--border-color);
      background-color: #a5a5a5;
      color: var(--secondary-bg-color);

      .info-title {
        font-family: var(--primary-font-family);
        font-size: 25px;
        line-height: 1.25;
        font-weight: var(--font-weight-medium);
        margin-right: 40px;
      }
    }

    .info-row {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 30px;
      border-bottom: 1px solid var(--border-color);

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        font-family: var(--primary-font-family);
        font-size: 20px;
        line-height: 1.25;
        font-weight: var(--font-weight-medium);
        width: 216px;
        margin-right: 40px;
        word-break: keep-all;
        overflow-wrap: break-word;
      }

      .info-value {
        font-family: var(--primary-font-family);
        font-size: 25px;
        line-height: 1.25;
        font-weight: var(--font-weight-regular);
        width: 400px;
        word-break: keep-all;
        overflow-wrap: break-word;
      }
    }

    .info-button-row {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px;

      .info-button {
        width: 96px;
        height: 55px;
        font-family: var(--primary-font-family);
        font-size: 23px;
        line-height: 1;
        font-weight: var(--font-weight-regular);
        padding: 15px 25px 17px 25px;
      }
    }
    .info-image-row {
      margin-bottom: 30px;
      flex: 0 0 100%;
      text-align: center;
    
      img {
        width: 100%;
      }
    }
  }
}

.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 103px 85px 27px 85px;
  gap: 25px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 10px;
  z-index: 100;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  display: none;

  .scroll-icons {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;

    .scroll-hint-arrow {
      margin-top: 20px;
    }

    .scroll-hint-hand {
      align-self: flex-end;
      opacity: 0;
      animation: slideUpAndFade 1.5s ease 3;
    }
  }

  .scroll-text {
    font-family: var(--primary-font-family);
    font-weight: var(--font-weight-medium);
    font-size: 20px;
    color: var(--key-color);
    line-height: 1;
  }
}

.scroll-hint.hidden {
  opacity: 0;
}

@keyframes slideUpAndFade {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  65% {
    opacity: 0.75;
  }

  70% {
    opacity: 0.5;
  }

  75% {
    opacity: 0.25;
  }

  80% {
    transform: translateY(-100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* 横画面 */
@media screen and (orientation: landscape) {
  .container {
    width: 1280px;
    height: 800px;
    overflow-y: auto;
  }

  .header {
    margin-bottom: 0;
    z-index: 1;
  }

  .main-content {
    padding: 0 80px 80px 80px;
    margin-top: -48px;
  }

  .page-description {
    margin-bottom: 60px;
  }

  .form-action-msg {
    width: 1120px;
  }

  dialog {
    .modal-lang-btns {
      display: inline-grid;
      column-gap: 40px;
      grid-template-columns: repeat(3, auto);
    }

    .modal-lang-btn {
      width: 346px;
      height: 153px;
    }
  }

  #langSelectModal {
    min-width: 1280px;
    min-height: 800px;
    max-width: 1280px;
    padding: 230px 80px 224px 80px;
    margin: 0;
  }

  #backTopModal {
    min-width: 1280px;
    min-height: 800px;
    max-width: 1280px;
    padding: 142px 280px;
  }

  #backTopModal:has(.msg-visible) {
    padding: 118px 280px;

    .back-top-modal-content {
      height: 564px;
      padding: 20px 40px 80px 40px;

      .form-action-msg {
        width: 680px;
        margin-bottom: 80px;
      }
    }
  }

  #loadingModal {
    min-width: 1280px;
    min-height: 800px;
    max-width: 1280px;
    padding: 346px 588px;
  }

  .horizontal-btns {
    gap: 60px;
  }

  .form-inputs {
    display: flex;
    flex-direction: column;
    width: 1120px;
    gap: 40px;
    margin-bottom: 60px;
  }

  .form-input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .form-label {
    line-height: 1.25;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 10.5px;
  }

  .form-input {
    width: 870px;
    height: 82px;
    margin-bottom: 0;
  }

  .form-select {
    width: 870px;
    height: 82px;
  }

  .info-card {
    width: 1120px;
    margin-bottom: 60px;

    .info-box {
      background-color: var(--secondary-bg-color);
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .info-row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 30px;
        border-bottom: 1px solid var(--border-color);

        .info-label {
          font-family: var(--primary-font-family);
          font-size: 20px;
          line-height: 1.25;
          font-weight: var(--font-weight-medium);
          margin-right: 40px;
          width: 230px;
        }

        .info-value {
          font-family: var(--primary-font-family);
          font-size: 25px;
          line-height: 1.25;
          font-weight: var(--font-weight-regular);
          width: 800px;
          word-break: break-word;
        }
      }
    }
  }
}