:root {
  /* 色設定 */
  --color-white: 255, 249, 240; /* #fff9f0 */
  --color-text-primary: 55, 48, 54; /* #373036 */
  --color-text-accent: 242, 73, 12; /* #F2490C */
  --color-text-success: 95, 141, 78; /* #5F8D4E */
  --color-text-success-dark: 58, 88, 48; /* #3A5830 */
  --color-text-error: 153, 27, 27; /* #991B1B */
  --color-text-error-dark: 102, 17, 17; /* #661111 */
  --color-background: 231, 186, 122; /* #e7ba7a */
  --color-progress: 146, 77, 67; /* #924d43 */
  --color-button: 175, 124, 75; /* #af7c4b */

  /* フォント設定 */
  --font-family-default: "Yusei Magic", sans-serif;
  --font-family-accent: "Kranky", serif;
  --text-size-base: 16px;
  --text-scale-ratio: 1.2;
  --text-xs: calc(1rem / (var(--text-scale-ratio) * var(--text-scale-ratio)));
  --text-sm: calc(1rem / var(--text-scale-ratio));
  --text-md: calc(1rem * var(--text-scale-ratio));
  --text-lg: calc(1rem * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-xl: calc(
    1rem * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );
  --text-xxl: calc(
    1rem * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio)
  );
  --text-xxxl: calc(
    1rem * var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio) * var(--text-scale-ratio) *
      var(--text-scale-ratio)
  );

  /* shadow */
  --shadow-subtle: 0 2px 8px rgba(146, 77, 67, 0.1);
  --shadow-card: 0 6px 16px rgba(175, 124, 75, 0.25);

  /* spacing */
  --space-unit: 1rem;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));

  /* radius */
  --border-radius-sm: var(--space-sm);
  --border-radius-md: var(--space-md);
  --border-radius-lg: var(--space-lg);
  --border-radius-xl: var(--space-xl);
}

/* グローバルスタイル */
html {
  font-size: var(--text-size-base);
  color: rgb(var(--color-text-primary));
}
body {
  font-family: var(--font-family-default);
  background-color: rgb(var(--color-background));
  text-align: center;
  padding: 0;
  margin: 0;
}
#quiz-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-lg) 10px;
  opacity: 0;
  transition: 100ms opacity ease-in-out;
}
#quiz-container.ready {
  opacity: 1;
}

h1 {
  font-family: var(--font-family-accent);
  color: rgb(var(--color-text-accent));
  font-size: var(--text-xxxl);
  letter-spacing: 3px;
}

/* タイトル */
section.title {
  width: clamp(600px, 80%, 1000px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: var(--space-md);
}
section.title h1 {
  margin-top: 0;
}
section.title .instruction {
  font-weight: 400;
  font-size: var(--text-md);
  margin-top: 0;
}

/* プログレスバー */
section.progress-container {
  --progress-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: rgb(var(--color-progress));
  margin-top: var(--space-md);
}
section.progress-container progress {
  width: clamp(150px, 50%, 300px);
  height: 24px;
  border-radius: var(--progress-radius);
  background-color: rgb(var(--color-white));
  border: 2px solid rgb(var(--color-progress));
  padding: 0px;
}
section.progress-container progress::-webkit-progress-bar {
  background: rgb(var(--color-white));
  border-radius: var(--progress-radius);
}
section.progress-container progress::-webkit-progress-value {
  background: rgb(var(--color-progress));
  border-radius: var(--progress-radius);
}
section.progress-container progress::-moz-progress-bar {
  background: rgb(var(--color-progress));
  border-radius: var(--progress-radius);
}
section.progress-container #current-question {
  font-size: var(--text-xl);
}

/* 質問 */
section.question-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-lg);
  gap: clamp(var(--space-md), 3vw, var(--space-xxl));
}
/* 質問・画像 */
section.question-container .question-image {
  align-self: center;
  border-radius: var(--border-radius-xl);
  background-color: rgb(var(--color-white));
  padding: clamp(var(--space-md), 2.7vw, var(--space-lg));
  width: clamp(350px, 60vw, 600px);
  box-sizing: border-box;
  border: 1px solid rgba(var(--color-text-button), 0.8);
  box-shadow: var(--shadow-card);
}
section.question-container .question-image .flip {
  transform-style: preserve-3d;
  aspect-ratio: 3/2;
}
section.question-container .question-image .flip .front,
section.question-container .question-image .flip .back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
section.question-container .question-image .flip .back {
  transform: rotateX(180deg);
}
section.question-container .question-image img {
  border-radius: var(--border-radius-xl);
  display: block;
  margin: auto;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* 回答 */
section.answer {
  font-size: var(--text-lg);
  font-weight: 700;
  display: none;
  align-self: flex-start;
  padding-left: var(--space-lg);
}
section.answer .symbol {
  margin-right: var(--space-xs);
  display: none;
}

/* 質問・選択肢 */
section.question-container section.question-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}
section.question-container #choices {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
}
section.question-container .choice {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}
section.question-container .choice > button {
  appearance: none;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  background-color: rgb(var(--color-button));
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s, transform 0.3s;
}
section.question-container .choice > button:hover {
  background-color: rgba(var(--color-button), 0.8);
  transform: scale(1.02);
}
section.question-container .choice .text {
  color: rgb(var(--color-white));
  padding: var(--space-md) var(--space-lg);
  min-width: 300px;
  border-radius: var(--border-radius-md);
  font-size: var(--text-md);
  display: inline-flex;
  gap: var(--space-md);
  justify-content: center;
}
section.question-container .choice .text .text-content-jp {
  display: none;
}
section.question-container .choice .audio {
  --button-size: 50px;
  width: var(--button-size);
  height: var(--button-size);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgb(var(--color-button));
}
section.question-container .choice .audio img {
  --imgage-size: 24px;
  width: var(--imgage-size);
  height: var(--imgage-size);
}

/* 「次へ」ボタン */
section.next {
  margin-top: var(--space-lg);
  justify-content: center;
  display: none;
}
section.next #next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background-color: rgb(var(--color-text-accent));
  color: rgb(var(--color-white));
  border: none;
  border-radius: var(--border-radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-md);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}
section.next #next-button:hover {
  background-color: rgba(var(--color-text-accent), 0.8);
  transform: scale(1.02);
}
section.next #next-button img {
  height: 20px;
  width: auto;
}

/* 結果 */
section#results {
  display: none;
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xxl);
  background-color: rgba(var(--color-white), 0.9);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(var(--color-text-accent), 0.8);
  box-shadow: var(--shadow-card);
}
section#results #comment {
  font-size: var(--text-lg);
}
section#results .results-text {
  font-size: var(--text-md);
  letter-spacing: 1px;
}
section#results #score {
  font-size: var(--text-xl);
  color: rgb(var(--color-text-accent));
}

section#results .back {
  margin-top: var(--space-lg);
}
section#results .back a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background-color: rgb(var(--color-progress));
  color: rgb(var(--color-white));
  border: none;
  border-radius: var(--border-radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-md);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  text-decoration: none;
}
section#results .back a:hover {
  background-color: rgba(var(--color-progress), 0.8);
}
section#results .back a img {
  height: 14px;
  width: auto;
  transform: rotate(180deg);
}

/* 回答後のスタイルオーバーライド */
/* オーバーライド・回答 */
.with-feedback section.answer {
  display: block;
}
.with-feedback.valid section.answer .symbol.success,
.with-feedback.invalid section.answer .symbol.error {
  display: inline-block;
}
.with-feedback.valid section.answer {
  color: rgb(var(--color-text-success-dark));
}
.with-feedback.invalid section.answer {
  color: rgb(var(--color-text-error));
}
/* オーバーライド・現在の質問 */
.with-feedback section.question-container .question-image .flip {
  transform: rotateX(180deg);
  transition: transform 0.8s;
}
.with-feedback section.question-container .choice .text {
  pointer-events: none;
}
.with-feedback section.question-container .choice .text .text-content-jp {
  display: inline;
}
.with-feedback section.question-container .choice.valid .text::after,
.with-feedback section.question-container .choice.invalid .text::after {
  position: absolute;
  top: 50%;
  left: var(--space-lg);
  transform: translateY(-50%);
}

.with-feedback section.question-container .choice.valid .text::after {
  content: "✔";
  color: rgb(var(--color-text-success-dark));
}
.with-feedback section.question-container .choice.invalid .text::after {
  content: "✘";
  color: rgb(var(--color-text-error-dark));
}
.with-feedback section.question-container .choice.valid .text,
.with-feedback section.question-container .choice.valid .audio {
  background-color: rgba(var(--color-text-success), 0.75);
}
.with-feedback section.question-container .choice.invalid .text,
.with-feedback section.question-container .choice.invalid .audio {
  background-color: rgba(var(--color-text-error), 0.75);
}
.with-feedback section.next {
  display: flex;
}

/* 結果表示のスタイルオーバーライド */
#quiz-container.results .quiz-container-inner {
  display: none;
}
#quiz-container.results section#results {
  display: block;
}

/* レスポンシブ用 */
@media (max-width: 600px) {
  :root {
    --text-size-base: 14px;
  }
  #quiz-container {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }
  .progress-container .progress-text {
    white-space: nowrap;
  }
  section.title {
    width: 100%;
    margin-top: 0;
    flex-direction: column;
    align-items: center;
  }

  section.title h1 {
    margin-top: 0;
  }
  section.title p {
    margin-top: 0;
  }
  section.title .instruction {
    font-size: var(--text-size-base);
  }

  section.question-container {
    gap: var(--space-sm);
  }
  section.question-container #choices {
    gap: var(--space-sm);
  }
  section.question-container {
    margin-top: var(--space-md);
    width: 100%;
    justify-content: center;
  }
  section.question-container section.question-right {
    gap: var(--space-sm);
  }
  section.question-container .question-image {
    width: 90%;
    padding: var(--space-md);
  }

  section.question-container .choice .text {
    padding: var(--space-sm) var(--space-md);
    min-width: 250px;
  }

  section.question-container .choice .audio {
    --button-size: 44px;
  }
  section.question-container .choice .audio img {
    --imgage-size: 22px;
  }

  section.next {
    margin-top: var(--space-md);
  }

  section#results {
    padding: var(--space-lg) var(--space-xl);
  }
}