@charset "utf-8";

/* 全体 */
main h1:not(.chapter-title) {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--text-heading-1);
}

ul li::marker,
ol li::marker {
  color: var(--main-color);
}

body[data-view-type='page'] main .container h1,
body[data-view-type='page'] main .container h2 {
  font-weight: bold;
}

body[data-view-type='page'] main .container > *:not(.fullpage-container):not(.contents):first-child {
  margin-top: 2rem;
}

body[data-view-type='page'] main .container > *:not(.fullpage-container):not(.contents):last-child {
  margin-bottom: 5rem;
}

main .container > * + * {
  margin-top: 1rem;
}

main .container > * + h1 {
  margin-top: 2rem;
}

main .container > * + h2 {
  margin-top: 1.65rem;
}

main .container > * + h3 {
  margin-top: 1.5rem;
}

main .container > * + ul,
main .container > * + ol {
  margin-top: 0;
}

main .container > hr {
  border: none;
  border-top: solid 2px #ddd;
}

.fullpage-container {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

/* spinner */
/* ローディングスピナー */
.video::before,
.classics-content .tab-content::before {
  --size: 5rem;
  content: '';
  display: block;
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: calc(50% - var(--size) / 2);
  left: calc(50% - var(--size) / 2);
  animation: rotate 1.5s infinite cubic-bezier(0.39, 0.65, 0.7, 0.56);
  transform-origin: 50% 50%;
  z-index: -1;

  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiPjxkZWZzPjxjbGlwUGF0aCBpZD0iYiI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBpZD0iYSIgY2xpcC1wYXRoPSJ1cmwoI2IpIj48cGF0aCBkPSJNNTIxOC43ODItNTAxNi4xMzdoLTExLjA0MWEzNy4yODksMzcuMjg5LDAsMCwwLTExLjAwOC0yNi41MzMsMzcuMjg2LDM3LjI4NiwwLDAsMC0yNi41MzItMTEuMDA3LDM3LjYxLDM3LjYxLDAsMCwwLTI3Ljg1MiwxMi40bC04LjIwOC03LjQxYTQ4LjQwNiw0OC40MDYsMCwwLDEsMTYtMTEuNyw0OC4yLDQ4LjIsMCwwLDEsMjAuMDYyLTQuMzIzLDQ4LjI4NSw0OC4yODUsMCwwLDEsMTguOTEsMy44MTcsNDguNDEzLDQ4LjQxMywwLDAsMSwxNS40NDEsMTAuNDEyLDQ4LjQsNDguNCwwLDAsMSwxMC40MTIsMTUuNDQxLDQ4LjI3MSw0OC4yNzEsMCwwLDEsMy44MTgsMTguOTA5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUxMjAuNTQzIDUwNjYpIiBmaWxsPSIjMzMzIi8+PC9nPjwvc3ZnPg==');
  background-size: 100%;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* 画像 */
.image {
  width: 100%;
  overflow-x: clip;
}

.image .swiper-slide {
  padding: 0 0;
  height: 100%;
  text-align: center;
}

.image .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.fullpage-container.image {
  padding: 1rem 0 1rem;
}

@media (min-width: 768px) {
  .fullpage-container.image {
    min-height: 48em;
  }
}

.fullpage-container.image .swiper-slide img {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: none;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.15;
}

/* iframe */
.drill-container {
  width: 100%;
  height: 100%;
  max-height: 780px;
  margin: auto;
  /* padding: 1rem 0; */
}

.fullpage-container.drill-iframe {
  display: block;
  width: 100%;
  height: 100% !important;
  border: none;
}

/* クイズ */
.quiz-frame {
  padding: 0.5em 0 1em;
  border: none;
}

/* リスト */
.group > h1 + .page-description {
  margin: 0.5rem 0.25em 1rem;
  font-size: 0.9em;
}

/* 古典別章段コンテンツ */
.fullpage-container.classics-content {
  display: grid;
  grid-template-rows: max-content 1fr;
  overflow: hidden;
  padding: 0.75rem 0 2rem;
  border: none;
  border-radius: 0.75rem;
}

.classics-content .tabs > ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin-left: 0;
  border-bottom: solid 1px var(--main-color);
}

.classics-content .tabs > ul li {
  flex: 1;
  margin-top: 0;
  text-align: center;
}

.classics-content .tabs .tab-button {
  cursor: pointer;
  width: 100%;

  padding: 0.75rem 1.5rem;
  border: none;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  background-color: #0001;

  color: #0007;
  font-size: 110%;

  transition: 75ms ease-out;
  transition-property: color, background-color;
}

.classics-content .tabs .tab-button:hover,
.classics-content .tabs .tab-button:focus {
  filter: brightness(0.95);
}

.classics-content .tab-button.active {
  background-color: var(--main-color);
  box-shadow: 2px 2px 4px #0001;
  color: white;
}

.classics-content .tabs .tab-button:not(.active):hover {
  background-color: #0002;
  color: black;
}

.classics-content .tab-content-container {
  direction: rtl;
  overflow: hidden;
  max-width: 100%;
  border: solid 1px var(--main-color);
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;

  /* ローディングスピナー用 */
  position: relative;
}

.classics-content .tab-content {
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  text-align: center;
  animation: fadeIn 500ms ease-out;

  /*
    Flexboxではサイズを上手く指定できないため、
    画像の横並は、インライン要素で横並びに
  */
  white-space: nowrap;

  /* インライン要素間の空白非表示Hack */
  font-size: 0px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.classics-content .tab-content:not(.active) {
  display: none;
}

.classics-content .tab-content > img {
  display: inline-block;
  width: auto;
  height: 100%;
}

/* 動画 */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
}

.video:not(.fullpage-container) {
  background-color: #0001;
}

.fullpage-container.video {
  padding: 1rem 0;
}

.fullpage-container.video div {
  padding: unset !important;
  height: 100%;
  width: 100%;
}

/* 音声 */
main audio {
  display: block;
  max-width: 500px;
  width: 100%;
  min-width: 280px;
}

/* リンク */
.external-link small::after {
  content: '';
  margin-left: 0.5rem;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjc1KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjc1IDEuOCkiPjxwYXRoIGQ9Ik0yODguODYsMzMuODZIMjc3LjM0VjIyLjM0aDQuODZWMjBIMjc1VjM2LjJoMTYuMlYyOWgtMi4zNFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNzUgLTIwKSIgZmlsbD0iI2FhYSIvPjwvZz48cGF0aCBkPSJNMzUwLjQ3NywwVjIuMzRoMy41NjVsLTcuNTczLDcuNTczLDEuNjU1LDEuNjU1TDM1NS43LDMuOTk1VjcuNTZoMi4zNFYwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY1LjAzNykiIGZpbGw9IiNhYWEiLz48L2c+PC9zdmc+');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ファイル */
.file-list-icon {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.file-item {
  margin-top: 0;
}

.file-item a {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  background-size: contain;
  transition: filter 75ms ease-out;
}

.file-item[data-file-type='docx'] > a {
  background-image: url('data:image/png;base64,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');
}

.file-item[data-file-type='pdf'] > a {
  background-image: url('data:image/png;base64,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');
}

.file-item a:hover {
  filter: brightness(0.85);
}

.file-item a > span {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: clip;
}

/* 古典別章段 */
.block-list ol {
  margin: 0;
}

.block-list ol li {
  margin: 0;
}

.page-list {
  list-style: none;
}

/* デジタル漢字ドリル */
.drill-screen .game-screen {
  width: 100%;
  padding: 1rem 0 2rem;
}

.drill-screen .game-screen#game {
  display: none;
  height: 100%;
  /* display: grid;
  grid-template-rows: max-content 1fr max-content;
  gap: 1rem; */
}

.drill-screen:not([data-screen='start']) .game-screen#start,
.drill-screen:not([data-screen='game']) .game-screen#game,
.drill-screen:not([data-screen='result']) .game-screen#result {
  display: none;
}

/* GAME */
.drill-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.drill-header #hint {
  line-height: 1.35;
  font-size: 110%;
}

.drill-header #hint span {
  display: inline-block;
}

.drill-header #hint br {
  display: none;
}

.drill-header #number {
  flex-shrink: 0;
  line-height: 1;
  margin-left: auto;
}

.drill-header #number .total {
  font-size: 80%;
}

.question-card {
  position: relative;
  display: block;
  align-items: center;

  border: solid 2px var(--main-color);
  border-radius: 0.5rem;

  line-height: 2;
  user-select: none;

  overflow: hidden;
  /* Safari での表示崩れを修正 */
}

.question-card > div {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  /* vertical-rl なので通常状態での row-reversed と同じ */
  gap: 1.5rem;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  writing-mode: vertical-rl;
  /* Safari での表示崩れを修正 */
  text-orientation: mixed;

  padding: 1rem 1.5rem;
}

/* 漢字ドリル */
.drill-screen .game-button {
  cursor: pointer;
  width: 100%;
  position: relative;
  padding: 1rem 1rem;
  background: #2d2d2d;
  color: white;
  font-size: larger;
  border-radius: 0.75rem;

  text-align: center;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.25;
  user-select: none;

  transition: filter 75ms ease-out;
}

.drill-screen .game-button:hover {
  filter: brightness(2);
}

.drill-screen .game-button:active {
  filter: brightness(2.5);
}

.drill-screen .game-screen#start {
  max-width: 640px;
  margin: auto;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.drill-screen .game-screen#start fieldset {
  width: 100%;
  border-style: solid;
  border-color: var(--main-color);
  padding: 2rem;
  border-radius: 0.75rem;
}

.drill-screen .game-screen#start fieldset label > span {
  display: inline-block;
}

.drill-screen .game-screen#start fieldset .toggle-switch,
.drill-screen .game-screen#start fieldset div {
  flex-shrink: 0;
}


/* ラジオボタン */
.drill-screen .game-screen#start fieldset input[type='radio'] {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  position: relative;
  margin-right: 0.5rem;
  appearance: none;
  border-radius: 50%;
  border: solid 2px #ddd;
}

.drill-screen .game-screen#start fieldset input[type='radio']:checked::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;
  height: 65%;
  transform: translate3d(-50%, -50%, 1px);

  background-color: var(--main-color);
  border-radius: 50%;
  box-shadow: 0 0 4px #0006;
  animation: pop 125ms ease-in forwards;
}

@keyframes pop {
  from {
    transform: translate3d(-50%, -50%, 1px) scale3d(1, 1, 1);
  }

  50% {
    transform: translate3d(-50%, -50%, 1px) scale3d(1.15, 1.15, 1.15);
  }

  to {
    transform: translate3d(-50%, -50%, 1px) scale3d(1, 1, 1);
  }
}

.drill-screen .game-screen#start .field-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 400px;
  margin: 0 auto;
  font-size: 120%;
  user-select: none;
}

.drill-screen .game-screen#start .field-container > div {
  margin-left: auto;
}

.drill-screen .game-screen#start .field-container > div > p {
  display: flex;
  align-items: center;
}

.drill-screen .game-screen#start .field-container > div > p + p {
  margin-top: 0.5rem;
}

.drill-screen .game-screen#start .game-button#game-start img {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

@media screen and (max-width: 920px) {
  .drill-screen .game-screen#start fieldset {
    padding: 1.75rem 1.5rem;
  }

  .drill-screen .game-screen#start .field-container {
    font-size: 110%;
    gap: 1.25rem;
  }
}

/* 漢字ドリル */
.kanji-drill .question-card {
  font-size: clamp(15px, calc(2px + 0.85vw + 2vh), 36px);
  font-family: 'SansdGT-DB';
}

.kanji-drill .question-sentence {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5em;

  padding: 0;
  padding-top: 4.5vh;
  padding-left: 1em;
  padding-bottom: 1.5vh;

  font-size: 1.25em;

  /* vertical-rlでも縦書用文字にならない文字があるため強制。 */
  /* 漢字ドリルのみ */
  font-feature-settings: 'vert';
}

/* 文字拡大 */
.kanji-drill .question-sentence[data-mag-level='1'] {
  font-size: 1.5em;
}

.kanji-drill .question-sentence[data-mag-level='2'] {
  font-size: 1.75em;
}

.kanji-drill .question-sentence > .segment {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.kanji-drill .question-sentence > .segment > .word {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
}

.kanji-drill .question-card .question-sentence .word .kanji {
  display: inline-block;
  padding-block: 0.225em;
  line-height: 1;
  letter-spacing: 0.15em;

  /* 中心に揃えるため左側にマージン */
  margin-block-end: 0.28em;
}

.kanji-drill .question-card .question-sentence .word .kanji {
  padding-top: 0.125em;
}

.kanji-drill .question-card .question-sentence .word + .word .kanji {
  padding-top: 0;
}

.kanji-drill .question-card .question-sentence .word .underline {
  width: 2px;
  height: 100%;
}

.kanji-drill .question-card .question-sentence .word.problem .underline {
  background: #333;
}

.kanji-drill .question-card .question-sentence .word .yomi {
  width: 1.85em;
  padding-inline: 0.125em;
  font-size: max(0.6em, 14px);
}

.kanji-drill .question-card[data-gamemode='reading'] .word.problem .yomi,
.kanji-drill .question-card[data-gamemode='writing'] .word.problem .kanji {
  transition: 750ms linear;
  transition-property: visibility, opacity;
  color: var(--color-answer);
}

.kanji-drill .question-card.question[data-gamemode='reading'] .word.problem .yomi,
.kanji-drill .question-card.question[data-gamemode='writing'] .word.problem .kanji,
.kanji-drill .question-card.question .answer-badge {
  transition: none;
  visibility: hidden;
  opacity: 0;
}

.kanji-drill .question-card.answer[data-gamemode='reading'] .word.problem .yomi,
.kanji-drill .question-card.answer[data-gamemode='writing'] .word.problem .kanji {
  visibility: visible;
  opacity: 1;
}

/* 文法ドリル */
.grammar-drill .question-card {
  font-feature-settings: 'palt' 0;
  line-height: 1.4;
  font-size: min(calc(0.7vw + 2vh), 24px);
}

.grammar-drill .question-card::before,
.grammar-drill .question-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  z-index: 1;
}

.grammar-drill .question-card::before {
  left: 0;
  background: linear-gradient(to right, #fff, #fff0);
}

.grammar-drill .question-card::after {
  right: 0;
  background: linear-gradient(to left, #fff, #fff0);
}

.grammar-drill .question-card > div {
  /* OVERRIDE */
  display: grid;
  grid-template-rows: 1fr 0.25fr minmax(auto, 1fr);
  grid-template-areas: 'info' 'main' 'aside';
  column-gap: 0;
  row-gap: 4rem;
  padding: 1.25rem 0.75rem;
}

.grammar-drill .question-card u {
  /* 
    Safari 17.2：縦書き時に下線が右に来てしまうため、
    全ブラウザで下線は疑似要素で対応
  */
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.grammar-drill .question-card u::before {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  transform: translateX(calc(0.5em + 4px));
  width: 2px;
  background-color: currentColor;
}

.grammar-drill .question-card em {
  font-style: normal;
  color: var(--color-answer);
}

.grammar-drill .question-group {
  display: inline-block;
  margin-left: 0.75em;
  padding: 0.35em 0.15em;
  border-radius: 0.25rem;
  background-color: #ececec;
  color: #515151;
  font-size: max(14px, 60%);
}

.grammar-drill .question-info {
  grid-area: info;
}

.grammar-drill .question-text {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: max(90%, 16px);
  line-height: 2.1;
}

.grammar-drill .question-text .question-number {
  flex-shrink: 0;

  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin: 0 0.5em;
  border-radius: 0.25em;
  background-color: var(--color-answer);

  color: white;
  font-size: 80%;
  line-height: 1;
  text-combine-upright: all;
}

/* 選択肢一覧 */
.grammar-drill .question-card .selection-list {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  margin-right: 1.5rem;

  padding: 1.5rem 1rem;
  border: dashed 2px lightgray;
  border-radius: 1rem;
  font-size: max(85%, 15px);
}

.grammar-drill .question-card:not(.selection) .selection-list {
  display: none;
}

.grammar-drill .question-card .selection-list span {
  display: inline-block;
}

/* 問題文 */
.grammar-drill .question-card .question-sentence {
  grid-area: main;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  padding: 3rem 0;
  font-size: 110%;
}

.grammar-drill .question-card.answer.answer-replace .question-sentence {
  display: none;
}

.grammar-drill .question-card .question-sentence > .segment ruby rt.answer {
  display: revert;
  visibility: hidden;
  opacity: 0;
  transition: 750ms linear;
  transition-property: visibility, opacity;
}

.grammar-drill .question-card.answer .question-sentence > .segment ruby rt.answer {
  visibility: visible;
  opacity: 1;
}

.grammar-drill .question-sentence > .segment {
  display: inline-flex;
  align-items: flex-end;
  /* ルビがあるとずれるため左に寄せる */
  flex-wrap: wrap;
}

.grammar-drill .question-sentence > .segment .answer {
  color: var(--color-answer);
}

.grammar-drill .question-sentence > .segment .outside-text {
  margin-top: -1em;
}

.grammar-drill .question-sentence > .segment ruby rt {
  margin-left: 0.5rem;
  padding: 0.25rem 0;
  /* transform: translateX(0.25rem); */
  font-size: 70%;
}

.grammar-drill .question-sentence > .segment img {
  display: inline-block;
}

.grammar-drill .question-sentence > .segment .full-height-image {
  margin-top: 0.5em;
  height: calc(100% - 0.5em);
  width: auto;
}

.grammar-drill .question-card.question .question-sentence > .segment > .answer {
  /* 問題表示中に、解答部分は非表示 */
  display: none;
}

.grammar-drill .question-card.answer .question-sentence > .segment > .word.replace {
  /* 解答表示中に、被置き換え部分を非表示 */
  display: none;
}

/* HTMLモードの問題テキスト */
.grammar-drill .question-sentence .segment.html {
  display: block;
  line-height: 1.5;
}

/* 解答例 */
.grammar-drill .question-card .example-answer {
  grid-area: aside;
  margin: auto 0;
  padding: 3rem 0;
  width: fit-content;
  min-height: min(100%, 16em);
  /* max-height: 22em; */
  font-size: 1em;

  transition: 750ms linear;
  transition-property: visibility, opacity;
}

.grammar-drill .question-card.answer.answer-replace .example-answer {
  grid-area: main;
  margin: auto;
}

.grammar-drill .question-card .example-answer-badge,
.grammar-drill .question-card .inline-answer-badge {
  display: inline-block;
  margin-left: 0.75em;
  padding: 0.75rem 0.1rem;
  border-radius: 0.25rem;
  background-color: var(--color-answer);

  color: white;
  font-size: 70%;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.grammar-drill .question-card .example-answer .segment img {
  display: inline-block;
}

.grammar-drill .question-card .example-answer .segment .full-height-image {
  margin-top: 0.5em;
  height: calc(100% - 1em);
  width: auto;
}

.grammar-drill .question-card .example-answer .outside-text {
  margin-top: -1em;
}

/* 文法ドリル：解答表示中 */
.grammar-drill .question-card:not(.answer) .example-answer {
  width: 0;
  overflow: hidden;
  transition: none;
  visibility: hidden;
  opacity: 0;
}

.grammar-drill .question-card:not(.answer.example) .example-answer-badge,
.grammar-drill .question-card:not(.answer:not(.example)) .inline-answer-badge {
  display: none;
}

/* .grammar-drill .answer-badge,  */
.grammar-drill .question-card.question .answer-badge,
.grammar-drill .question-card.answer.example .answer-badge {
  transition: none;
  visibility: hidden;
  opacity: 0;
}

/* 解答バッジ */
.answer-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 5;
  writing-mode: vertical-rl;

  padding: 0.5rem 0.1em;
  border: solid 0.125em currentColor;
  border-radius: 0.25em;
  color: var(--color-answer);
  font-weight: bold;
  font-family: 'TT-UDDigiKyokashoPro-Medium';
  font-size: 150%;
  line-height: 1;

  transition: 750ms linear;
  transition-property: visibility, opacity;
}

.answer-buttons {
  display: flex;
  gap: 1.5rem;
}

.answer-buttons button {
  flex: 1;
  padding: 0.35em 1em;
  border: none;
  border-radius: 0.5rem;
  font-size: 150%;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

.answer-buttons button:disabled {
  opacity: 0.25;
}

.answer-buttons button:hover,
.answer-buttons button:focus {
  filter: brightness(0.95);
}

.answer-buttons button:active {
  filter: brightness(0.8);
}

.answer-buttons button#incorrect {
  background-color: var(--color-incorrect);
}

.answer-buttons button#correct {
  background-color: var(--color-correct);
}

.answer-buttons button img {
  filter: invert(1);
}

/* リザルト */
.drill-screen .game-screen#result {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: auto;
}

.drill-screen .game-screen#result h1 {
  margin: 0;
  font-size: 135%;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.drill-screen .game-screen#result .chart {
  display: flex;
  gap: 4.75rem;
  align-items: center;
  padding: 1.5rem 0;
  padding-right: 6rem;
}

.drill-screen .game-screen#result #pie {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

.drill-screen .game-screen#result #result-text {
  flex: 1;
  max-width: 280px;
  font-size: 140%;
  margin: 0 auto;
  width: 100%;
}

.drill-screen .game-screen#result #result-text .result-text-row {
  width: 100%;
  display: flex;
  align-items: center;
}

.drill-screen .game-screen#result #result-text .result-text-row img {
  margin: 0 0.25rem;
}

.drill-screen .game-screen#result #result-text .result-text-row:not(:last-child) {
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: solid 1px #ddd;
}

.drill-screen .game-screen#result #result-text .result-text-row::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.25rem;
}

.drill-screen .game-screen#result #result-text .result-text-row#correct::before {
  background-color: var(--color-correct);
}

.drill-screen .game-screen#result #result-text .result-text-row#incorrect::before {
  background-color: var(--color-incorrect);
}

.drill-screen .game-screen#result #result-text .result-text-row .count-number {
  margin-left: auto;
  font-size: 125%;
}

.drill-screen .game-screen#result .details {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.drill-screen .game-screen#result .details textarea {
  display: block;
  width: 100%;
  resize: vertical;
  padding: 1.25em;
  border-radius: 0.75rem;
  border: solid 2px #ccc;
  line-height: 1.5;
  font-family: inherit;
  resize: none;
}

.drill-screen .game-screen#result .copy-button {
  margin-top: auto;
  flex-basis: 5rem;
}

.drill-screen .game-screen#result .copy-button p {
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.drill-screen .game-screen#result .copy-button p > span {
  display: inline-block;
}

.drill-screen .game-screen#result #copy-to-clipboard {
  width: 5rem;
  height: 5rem;
  padding: 0.5em;
  border: none;
  border-radius: 0.75rem;
  background: var(--main-color);
}

.drill-screen .game-screen#result #copy-to-clipboard img {
  transform: translateY(2px);
  height: 100%;
}

.drill-screen .game-screen#result .game-button {
  background-color: var(--main-color);
}

.drill-screen .game-screen#result .game-button:hover {
  filter: brightness(1.1);
}

.drill-screen .game-screen#result .game-button:active {
  filter: brightness(1.25);
}

@media (max-width: 920px), (max-height: 800px) {
  body[data-view-type='page'] main .container h1 {
    font-size: 18px;
  }

  .fullpage-container.image {
    overflow-y: hidden;
    padding: 1rem 0 2rem;
  }

  /* 漢字・文法ドリル */
  .drill-screen .game-screen {
    /* padding: 1rem 0 2rem; */
    padding: 1rem 0 1.5rem;
  }

  .drill-screen .game-screen#game {
    gap: 0.75rem;
  }

  .drill-screen .game-screen#game .answer-buttons {
    gap: 0.5rem;
  }

  .kanji-drill .question-card > div {
    padding: 0.75rem 1rem;
  }

  .kanji-drill .question-sentence {
    padding: 0;
    padding-top: 3vh;
    padding-left: 1em;
    padding-bottom: 1vh;
  }

  /* 文法ドリル */
  .grammar-drill .question-card {
    font-size: clamp(18px, calc(1vw + 1vh), 22px);
  }

  .grammar-drill .question-card::before,
  .grammar-drill .question-card::after {
    width: 1rem;
  }

  .grammar-drill .question-card > div {
    row-gap: 2.5rem;
    padding: 0.7rem 0.5rem;
  }

  .grammar-drill .question-group {
    margin-left: 0.5em;
  }

  .grammar-drill .question-text {
    gap: 0.45rem;
  }

  .grammar-drill .question-card .selection-list {
    margin-top: 1.25em;
    margin-bottom: 0rem;
    margin-right: 0.75em;
    padding: 1em 0.65em;
    border-width: 1.5px;
    border-radius: 0.5em;
    font-size: 80%;
  }

  .grammar-drill .question-card .example-answer {
    padding: 2rem 1em 1rem;
  }

  .grammar-drill .question-card .example-answer .outside-text {
    margin-top: -1rem;
  }

  .grammar-drill .question-card.answer.example .example-answer > .segment {
    margin-top: 1rem;
  }

  .grammar-drill .question-card .question-sentence {
    padding: 2rem 0 1rem;
  }

  .answer-badge {
    bottom: 0.5rem;
    left: 0.5rem;
  }

  /* リザルト画面 */
  .drill-screen .game-screen#result {
    padding-bottom: 5.5rem;
  }

  .drill-screen .game-screen#result h1 {
    text-align: center;
    margin-bottom: 0;
  }

  .drill-screen .game-screen#result .chart {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    padding-right: 0;
    padding-bottom: 0.5rem;
  }

  .drill-screen .game-screen#result #result-text {
    max-width: 250px;
    font-size: 110%;
  }

  .drill-screen .game-screen#result #pie {
    margin: 0 auto;
    width: 130px;
    height: 130px;
  }

  .drill-screen .game-screen#result .details {
    margin-bottom: 1rem;
    flex-direction: column;
  }

  .drill-screen .game-screen#result .details #result-details {
    font-size: 95%;
  }

  .drill-screen .game-screen#result .copy-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-basis: auto;
  }

  .drill-screen .game-screen#result .copy-button > p {
    margin-bottom: 0;
  }

  .drill-screen .game-screen#result .copy-button #copy-to-clipboard {
    width: 3.5rem;
    height: 3.5rem;
  }

  .drill-screen .game-screen#result .copy-button p {
    line-height: 1.2;
  }
}

@media screen and (max-width: 640px) {
  .page-header .title h1 {
    font-size: 13px;
  }

  .page-header .title h2 {
    font-size: 14px;
  }

  .drill-screen .game-screen {
    padding: 0.6rem 0 1.35rem;
  }

  .drill-screen .game-screen#game {
    gap: 0.6rem;
  }

  .drill-screen .game-screen#game .answer-buttons {
    gap: 0.45rem;
  }

  .grammar-drill .question-card {
    font-size: clamp(16px, calc(2vw + 0.8vw), 20px);
  }

  .grammar-drill .question-group {
    padding: 0.35em 0.15em;
    font-size: max(15px, 60%);
  }

  .grammar-drill .question-card .example-answer {
    padding: 1.5rem 0 0.5rem;
    /* padding-left: 0.5rem; */
  }

  .drill-header {
    padding: 0;
  }

  .drill-header #hint {
    font-size: 14px;
  }
}

@media screen and (max-width: 420px) {
  .rest-reminder {
    bottom: -0.2rem;
  }

  .rest-reminder .text-bubble {
    font-size: 75%;
  }

  .kanji-drill .question-sentence .word.problem::before {
    width: 1px;
  }

  .grammar-drill .question-card {
    font-size: clamp(14.5px, calc(2vw + 0.8vw), 18px);
  }

  .grammar-drill .question-card > div {
    row-gap: 1.5rem;
    padding: 0.75rem;
    padding-left: 1rem;
  }

  .grammar-drill .question-card .selection-list {
    padding: 0.75em 0.5em;
    margin-right: 0.35em;
  }

  .grammar-drill .question-group {
    padding: 0.35em 0.1em;
    font-size: max(13px, 60%);
  }

  .grammar-drill .question-text {
    line-height: 1.5;
  }

  .grammar-drill .question-text .question-number {
    margin: 0 0.15em;
  }

  .grammar-drill .question-card .question-sentence {
    padding: 1.5rem 0 0.5rem;
    font-size: 1.2em;
    row-gap: 0.5em;
  }

  .grammar-drill .question-card .example-answer-badge,
  .grammar-drill .question-card .inline-answer-badge {
    padding: 0.5rem 0;
    font-size: 90%;
  }

  .answer-badge {
    padding: 0.35rem 0.1em;
  }

  .answer-buttons button {
    padding-block: 0.1rem;
  }
}