@charset "UTF-8";
/* --------------------------------------------------
 ※※※※※※※※※※※※※※※※※※※※※※※※
 共通ページ用
 このファイルはsassでコンパイルされています
 以下の内容を変更したい場合は構成するscssファイルを
 ご確認ください
 ※※※※※※※※※※※※※※※※※※※※※※※※
-------------------------------------------------- */
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";
:root {
  --color-white: #fff;
  --color-white-rgb: 255 255 255;
  --color-black: #000;
  --color-black-rgb: 0 0 0;
  --color-gray: #6b6b6b;
  --color-gray-rgb: 107 107 107;
  --color-gray-light: #d9d9d9;
  --color-gray-light-rgb: 217 217 217;
  --color-text: #072160;
  --color-text-rgb: 7 33 96;
  --color-text-darkgray: #4c4c4c;
  --color-text-darkgray-rgb: 76 76 76;
  --color-main-dark: #072160;
  --color-main-dark-rgb: 7 33 96;
  --color-main: #002f9d;
  --color-main-rgb: 0 47 157;
  --color-main-pale: #8caeff;
  --color-main-pale-rgb: 140 174 255;
  --color-main-pale2: #d0e0fd;
  --color-main-pale2-rgb: 208 224 253;
  --color-main-pale3: #f2f7ff;
  --color-main-pale3-rgb: 242 247 255;
  --color-accent: #f1aa00;
  --color-accent-rgb: 241 170 0;
  --color-accent2: #e56837;
  --color-accent2-rgb: 229 104 55;
  --color-accent-dark: #714e04;
  --color-accent-dark-rgb: 113 78 4;
  --color-accent-pale: #fff4d9;
  --color-accent-pale-rgb: 255 244 217;
  --color-disabled: #6b6b6b;
  --color-disabled-rgb: 107 107 107;
  --color-disabled2: #99a9b0;
  --color-disabled2-rgb: 153 169 176;
  --color-disabled-light: #d9d9d9;
  --color-disabled-light-rgb: 217 217 217;
  --color-notice500: #fa8c6a;
  --color-notice500-rgb: 250 140 106;
  --color-notice50: #ffede2;
  --color-notice50-rgb: 255 237 226;
  --color-alert: #ff383c;
  --color-alert-rgb: 255 56 60;
  --color-correct: #24ba02;
  --color-correct-rgb: 36 186 2;
  --color-correct-pale: #f2ffef;
  --color-correct-pale-rgb: 242 255 239;
  --color-correct-dark: #07600a;
  --color-correct-dark-rgb: 7 96 10;
  --color-incorrect: #fa8c6a;
  --color-incorrect-rgb: 250 140 106;
  --color-incorrect-pale: #ffede2;
  --color-incorrect-pale-rgb: 255 237 226;
  --color-incorrect-dark: #e56837;
  --color-incorrect-dark-rgb: 229 104 55;
  --color-error: #e56837;
  --color-error-rgb: 229 104 55;
  --color-life: #ff6186;
  --color-life-rgb: 255 97 134;
  --color-point: #ffae00;
  --color-point-rgb: 255 174 0;
  --color-quest-dark: #a25100;
  --color-quest-dark-rgb: 162 81 0;
  --color-quest: #f1aa00;
  --color-quest-rgb: 241 170 0;
  --color-quest2: #f19500;
  --color-quest2-rgb: 241 149 0;
  --color-quest3: #ffebaa;
  --color-quest3-rgb: 255 235 170;
  --color-quest4: #e56837;
  --color-quest4-rgb: 229 104 55;
  --color-collection1: #1549c2;
  --color-collection1-rgb: 21 73 194;
  --color-collection2: #002f9d;
  --color-collection2-rgb: 0 47 157;
  --color-collection3: #8caeff;
  --color-collection3-rgb: 140 174 255;
  --color-collection4: #467dfd;
  --color-collection4-rgb: 70 125 253;
  --color-collection5: #f2f7ff;
  --color-collection5-rgb: 242 247 255;
  --color-hint: #ffaa00;
  --color-hint-rgb: 255 170 0;
  --color-hint-light: #fff9d2;
  --color-hint-light-rgb: 255 249 210;
  --color-favorite: #ffaa00;
  --color-favorite-rgb: 255 170 0;
  --color-favorite-dark: #e56837;
  --color-favorite-dark-rgb: 229 104 55;
  --color-x: #000;
  --color-x-rgb: 0 0 0;
  --color-line: #06c755;
  --color-line-rgb: 6 199 85;
}

:root {
  --font-family: "Noto Sans JP", sans-serif;
  --font-7xl: 80px;
  --font-6xl: 64px;
  --font-5xl: 48px;
  --font-4xl: 32px;
  --font-3xl: 28px;
  --font-2xl: 24px;
  --font-xl: 20px;
  --font-l: 18px;
  --font-m: 16px;
  --font-s: 14px;
  --font-xs: 12px;
  --font-2xs: 10px;
  --font-3xs: 8px;
  --font-zero: 0;
  --font-weight-regular: 400;
  --font-weight-normal: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 900;
  --line-m: 1.5;
  --line-s: 1.3;
  --line-xs: 1.2;
  --line-2xs: 1.1;
  --line-none: 1;
  --letter-spacing-xs: -0.001em;
  --letter-spacing-s: -0.01em;
  --letter-spacing-m: 0;
  --letter-spacing-l: 0.01em;
  --letter-spacing-xl: 0.04em;
}

:root {
  --padding-xl: 20px;
  --padding-l: 18px;
  --padding-m: 16px;
  --padding-s: 14px;
  --padding-xs: 12px;
  --padding-2xs: 10px;
  --padding-3xs: 8px;
  --padding-4xs: 4px;
  --padding-5xs: 2px;
}

:root {
  --trans-button: 0.1s ease;
}

:root {
  --radius-full: 999px;
  --radius-half: 50%;
  --radius-l: 12px;
  --radius-m: 10px;
  --radius-s: 8px;
  --radius-xs: 4px;
}

:root {
  --content-max-width: 768px;
}

/* ------------------------------
  base
------------------------------ */
html.is-fixed, html.is-fixed body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}
html.is-fixed body {
  left: 0;
}

body {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-m);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-m);
  line-height: var(--line-xs);
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* ダブルタップズームのみ無効化（スクロール・ピンチは保持）。
     旧: initialize.js の touchend preventDefault → スクロール阻害のため CSS 方式へ移行 */
  touch-action: manipulation;
}

* {
  box-sizing: border-box;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

form {
  display: contents;
}

a {
  text-decoration: none;
}
@media (any-hover: hover) {
  a:hover {
    text-decoration: none;
  }
}
a:focus-visible {
  outline: solid 3px var(--color-main);
  outline-offset: 3px;
}

b {
  font-weight: var(--font-weight-bold);
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  image-rendering: auto;
}

p,
h1,
h2,
h3,
h4,
h5,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--font-4xl);
}

h2 {
  font-size: var(--font-3xl);
}

h3 {
  font-size: var(--font-2xl);
}

h4 {
  font-size: var(--font-xl);
}

h5 {
  font-size: var(--font-l);
}

input {
  font-family: var(--font-family);
}

button {
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}
button:focus-visible {
  outline: solid 3px var(--color-main);
  outline-offset: 3px;
}

summary:focus-visible {
  outline: solid 3px var(--color-main);
  outline-offset: 3px;
}

.only-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  pointer-events: none;
}

/* ------------------------------
  ly-two-column
------------------------------ */
.ly-two-column {
  display: flex;
  flex: 1;
  flex-direction: column;
}
@media screen and (width > 1024px) {
  .ly-two-column {
    flex-direction: row;
  }
}
@media screen and (width > 1024px) {
  .ly-two-column main {
    flex: 1;
  }
}
.ly-two-column aside {
  display: flex;
  flex-direction: column;
}
@media screen and (width > 1024px) {
  .ly-two-column aside {
    width: 28.55vw;
    max-width: 390px;
    height: auto;
  }
}

/* ------------------------------
accordion-box
------------------------------ */
.accordion-box {
  width: 100%;
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  color: var(--color-main);
}
.accordion-box__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-l) var(--padding-m);
  border-radius: var(--radius-m);
  background-color: var(--color-main-pale3);
  font-weight: var(--font-weight-bold);
  list-style: none;
  appearance: none;
}
.accordion-box[open] .accordion-box__summary {
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}
.accordion-box[open] .accordion-box__summary:focus-visible {
  border-radius: var(--radius-m);
  outline: solid 3px var(--color-main);
  outline-offset: 3px;
}
.accordion-box__summary::marker {
  display: none;
}
.accordion-box__summary::-webkit-details-marker {
  display: none;
}
.accordion-box__summary-icon {
  width: 16px;
  height: 16px;
}
.accordion-box__summary-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
  mask: url("../images/icon/ico_plus-rounded.svg") no-repeat center/contain;
}
.accordion-box[open] .accordion-box__summary-icon::before {
  mask-image: url("../images/icon/ico_minus.svg");
}
.accordion-box__contents {
  padding: var(--padding-m);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

/* ------------------------------
alert-block
------------------------------ */
.alert-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 9px var(--padding-3xs) var(--padding-3xs);
  border: 2px solid var(--color-alert);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  row-gap: 7px;
}
.alert-block__heading {
  display: flex;
  align-items: center;
  column-gap: 4px;
  color: var(--color-main);
  font-size: var(--font-s);
}
.alert-block__heading [class^=icon-] {
  width: 16px;
  height: 16px;
}
.alert-block__heading [class^=icon-]::before {
  background-color: var(--color-alert);
}

/* ------------------------------
alert-message
------------------------------ */
.alert-message {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: var(--padding-4xs) 7px var(--padding-4xs) var(--padding-2xs);
  border: 2px solid var(--color-alert);
  border-radius: var(--radius-full);
  background: var(--color-white);
  text-decoration: none;
  cursor: pointer;
}
.alert-message__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-main);
  font-size: var(--font-s);
  line-height: var(--line-none);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-message__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-4xs);
  border-radius: var(--radius-full);
  background: var(--color-alert);
  color: var(--color-white);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
article-card
------------------------------ */
.article-card {
  display: flex;
  flex-direction: column;
  padding: var(--padding-m);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  row-gap: 8px;
}
.article-card__heading {
  color: var(--color-main);
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
}
.article-card__detail {
  color: var(--color-text);
  font-size: var(--font-s);
}
.article-card__image {
  width: 200px;
  margin: 0;
  padding: 0 0 var(--padding-3xs) var(--padding-3xs);
  float: right;
}
@media screen and (width > 1024px) {
  .article-card__image {
    width: 345px;
  }
}
.article-card__image img {
  width: 100%;
  height: auto;
}

/* ------------------------------
article-heading
------------------------------ */
.article-heading {
  position: relative;
  padding-bottom: 25px;
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-normal);
}
.article-heading::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-main-pale);
}

/* ------------------------------
article-index
------------------------------ */
.article-index {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  width: 100%;
  padding: var(--padding-s) var(--padding-m);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
}
.article-index__heading {
  font-size: var(--font-m);
}

/* ------------------------------
article-link-block
------------------------------ */
.article-link-block {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--padding-s) var(--padding-m);
  column-gap: 16px;
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  font-weight: var(--font-weight-normal);
}
.article-link-block__text-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 8px;
}
.article-link-block__heading {
  color: var(--color-main);
  font-size: var(--font-m);
  font-weight: var(--font-weight-normal);
}
.article-link-block__text {
  color: var(--color-gray);
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.article-link-block [class^=icon-] {
  width: 16px;
  height: 16px;
}
.article-link-block [class^=icon-]::before {
  background-color: var(--color-main);
}

/* ------------------------------
article-link-block-list
------------------------------ */
.article-link-block-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 12px;
}

/* ------------------------------
article-list
------------------------------ */
.article-list {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.article-list__item {
  position: relative;
  padding-left: var(--padding-s);
  line-height: 1.25;
}
.article-list__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-half);
  background-color: var(--color-main);
  translate: 0 -50%;
}
.article-list__link {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-xl);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-list__link:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------
article-table
------------------------------ */
.article-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}
@media screen and (width > 1024px) {
  .article-table {
    grid-column: 2;
    grid-template-columns: 1fr 1fr;
  }
  .article-table:has(:nth-child(odd):last-child) .article-table__item:nth-last-child(2) {
    border-bottom: solid 1px var(--color-main-pale);
  }
}
.article-table__item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  width: 100%;
  border: solid 1px var(--color-main-pale);
}
.article-table__item:not(:last-child) {
  border-bottom: 0;
}
@media screen and (width > 1024px) {
  .article-table__item {
    display: grid;
  }
  .article-table__item:not(:last-child) {
    border-bottom: solid 1px var(--color-main-pale);
  }
  .article-table__item:nth-child(odd) {
    border-right: 0;
  }
  .article-table__item:nth-child(n+3) {
    border-top: 0;
  }
  .article-table__item:last-child:nth-child(odd) {
    width: calc(100% + 1px);
    border-right: solid 1px var(--color-main-pale);
  }
}
.article-table__item-heading {
  padding: var(--padding-m);
  background-color: var(--color-main-pale3);
  font-size: var(--font-l);
  font-weight: var(--font-weight-bold);
}
.article-table__item-data {
  padding: var(--padding-xs) var(--padding-m);
}

/* ------------------------------
article-text
------------------------------ */
.article-text__strong {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* ------------------------------
article-text-link
------------------------------ */
.article-text-link {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-xl);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.article-text-link:hover {
  text-decoration: underline;
}

/* ------------------------------
article-update
------------------------------ */
.article-update {
  color: var(--color-gray);
  font-size: var(--font-s);
}
.article-update__date {
  margin-left: -3px;
}

/* ------------------------------
badge-list
------------------------------ */
.badge-list {
  display: flex;
  column-gap: 14px;
}

/* ------------------------------
breadcrumb
------------------------------ */
.breadcrumb {
  display: inline-flex;
  column-gap: 2px;
  font-size: var(--font-xs);
  list-style: none;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.breadcrumb__item::after {
  content: ">";
  margin-inline: 4px 3px;
  font-size: var(--font-2xs);
}
.breadcrumb__item:last-child::after {
  display: none;
}
.breadcrumb__item-link {
  color: var(--color-main);
  text-decoration: underline;
}

/* ------------------------------
  button
------------------------------ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: var(--padding-3xs);
  column-gap: 4px;
  transition: var(--trans-button);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--radius-m);
  outline: none;
  background-color: var(--color-main);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-white);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}
.button--primary {
  border-color: var(--color-main-pale3);
  background-color: var(--color-main);
  box-shadow: 0 2px 0 var(--color-main-pale);
  color: var(--color-white);
}
.button--secondary {
  border-color: var(--color-main-pale);
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-main);
}
.button--fixed {
  width: 160px;
}
.button--fill {
  width: 100%;
}
.button:active:not(.is-disabled) {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.button.is-disabled {
  border-color: var(--color-disabled-light);
  background-color: var(--color-disabled);
  box-shadow: none;
  color: var(--color-white);
}
.button [class^=icon-] {
  width: 12px;
  height: 12px;
}
.button [class^=icon-]::before {
  background-color: var(--color-main);
}
.button__main {
  display: flex;
  font-size: var(--font-m);
}
.button__point {
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.button__point-num {
  margin-inline: -2px;
}
.button__subtext {
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-normal);
}
.button .icon-printer {
  width: 12px;
  height: 12px;
  translate: 0 1px;
}

/* ------------------------------
  button-anchorlink
------------------------------ */
.button-anchorlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: var(--padding-3xs);
  column-gap: 4px;
  transition: var(--trans-button);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  outline: none;
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-main);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}
.button-anchorlink:active:not(.is-disabled) {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.button-anchorlink.is-disabled {
  border-color: var(--color-disabled-light);
  background-color: var(--color-disabled);
  box-shadow: none;
  color: var(--color-white);
}
.button-anchorlink [class^=icon-] {
  width: 16px;
  height: 16px;
}
.button-anchorlink [class^=icon-]::before {
  background-color: var(--color-main);
}

/* ------------------------------
  button-back
------------------------------ */
.button-back {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: var(--padding-2xs);
  column-gap: 4px;
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale);
  border-radius: 11px;
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-main);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button-back:active:not(.is-disabled) {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.button-back--rounded {
  border-radius: var(--radius-full);
}
.button-back.is-disabled {
  border-color: var(--color-disabled-light);
  background-color: var(--color-disabled);
  box-shadow: none;
  color: var(--color-white);
}
.button-back [class^=icon-] {
  width: 12px;
  height: 12px;
}
.button-back [class^=icon-]::before {
  background-color: var(--color-main);
}
.button-back .icon-printer {
  width: 12px;
  height: 12px;
  translate: 0 1px;
}

/* ------------------------------
  button-checkbox
------------------------------ */
.button-checkbox {
  display: flex;
  position: relative;
  align-items: center;
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-m);
}
.button-checkbox:has(input:focus-visible) {
  outline: solid 3px var(--color-main);
  outline-offset: 3px;
}
.button-checkbox:hover {
  cursor: pointer;
}
.button-checkbox--text-m {
  padding: 0 6px 0 26px;
  font-size: var(--font-m);
}
.button-checkbox--text-s {
  padding: var(--padding-5xs) 6px 1px 24px;
  font-size: var(--font-s);
}
.button-checkbox__checkbox {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 0;
  height: 0;
  translate: -50% -50%;
  appearance: none;
}
.button-checkbox__checkbox::after {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: var(--color-disabled2);
  mask: url("../images/icon/ico_checkbox.svg") no-repeat center/contain;
  translate: 0 -50%;
}
.button-checkbox--text-s .button-checkbox__checkbox::after {
  width: 14px;
  height: 14px;
}
.button-checkbox__checkbox:checked::after {
  mask-image: url("../images/icon/ico_checkbox-on.svg");
  background-color: var(--color-main);
}

/* ------------------------------
button-exit
------------------------------ */
.button-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transition: var(--trans-button);
  border: 1px solid var(--color-main-pale);
  border-radius: 5px;
  background: var(--color-white);
  box-shadow: 0 1px 0 var(--color-main);
  cursor: pointer;
  aspect-ratio: 1;
  appearance: none;
}
.button-exit:active {
  translate: 0 1px;
  box-shadow: 0 0 0 var(--color-main);
}
.button-exit .icon-cancel {
  width: 10px;
  height: 10px;
}
.button-exit .icon-cancel::before {
  background-color: var(--color-main);
}

/* ----------------------------------------
button-favorite
---------------------------------------- */
.button-favorite {
  display: inline-grid;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
}
.button-favorite__star {
  display: block;
  width: 100%;
  height: 100%;
}
.button-favorite__star-fill {
  fill: none;
}
.button-favorite__star-line {
  fill: var(--color-favorite);
}
.button-favorite.is-favorite .button-favorite__star-fill {
  fill: var(--color-favorite);
}

/* ------------------------------
  button-game
------------------------------ */
.button-game {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 90px;
  padding: var(--padding-2xs) var(--padding-2xs) 13px;
  transition: var(--trans-button);
  border: 2px solid var(--color-main);
  border-radius: var(--radius-l);
  background-color: var(--color-white);
  box-shadow: 0 4px 0 var(--color-main);
  text-decoration: none;
  row-gap: 3px;
}
.button-game:active {
  translate: 0 2px;
  box-shadow: 0 0 0 var(--color-main);
}
.button-game.is-mypashage {
  border-color: var(--color-accent);
  box-shadow: 0 4px 0 var(--color-quest-dark);
}
.button-game.is-mypashage:active {
  box-shadow: 0 0 0 var(--color-quest-dark);
}
.button-game::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: var(--radius-s);
  mask: url("../images/common/img_pattern-dots.svg") no-repeat top -8px right -157px/296px 222px;
  background-color: var(--color-main-pale3);
}
.button-game.is-mypashage::after {
  background-color: var(--color-accent-pale);
}
.button-game__point {
  display: flex;
  position: absolute;
  z-index: 2;
  top: -10px;
  right: -10px;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 18px;
  padding-right: var(--padding-5xs);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-full);
  background-color: var(--color-quest);
  box-shadow: 0 3px 0 var(--color-quest);
  color: var(--color-white);
  font-size: var(--font-2xs);
  letter-spacing: var(--letter-spacing-l);
  white-space: nowrap;
}
.button-game.is-mypashage .button-game__point {
  right: -4px;
}
.button-game__point-value {
  margin-inline: 2px;
  font-size: var(--font-s);
}
.button-game__subject {
  display: inline-flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: var(--color-main-pale2);
  color: var(--color-text);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
.button-game__title {
  position: relative;
  z-index: 1;
  max-width: 98px;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-s);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------
  button-gamestart
------------------------------ */
.button-gamestart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 49px;
  padding: var(--padding-3xs) 22px;
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale3);
  border-radius: var(--radius-m);
  background-color: var(--color-main);
  box-shadow: 0 4px 0 var(--color-main-pale);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button-gamestart:active {
  box-shadow: 0 0 0 var(--color-main-pale);
  translate: 0 4px;
}
.button-gamestart.is-disabled {
  border-color: var(--color-disabled-light);
  background-color: var(--color-disabled);
  box-shadow: none;
  color: var(--color-white);
  cursor: default;
  pointer-events: none;
}

/* ------------------------------
button-icon
------------------------------ */
.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transition: var(--trans-button);
  border: 1px solid var(--color-main-pale);
  border-radius: var(--radius-half);
  background: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  cursor: pointer;
  appearance: none;
}
.button-icon:active {
  translate: 0 2px;
  box-shadow: 0 0 0 var(--color-main);
}
.button-icon [class^=icon-] {
  /* ボタン(28px)やヘッダー高さは変えず、中のアイコンだけ大きく見せる
     （小学生でも気づけるように 16px → 22px。2026-08） */
  width: 22px;
  height: 22px;
}
.button-icon [class^=icon-]::before {
  background: var(--color-main);
}
/* サウンドOFF状態（スピーカーのワンタップトグル）：
   ヘッダーの青系統一を崩さないよう、グレーアウト＋×付きスピーカーでOFFを示す */
.button-icon.is-sound-off {
  border-color: #c9d1e0;
  background: #eef0f5;
  box-shadow: 0 2px 0 #a3adc2;
}
.button-icon.is-sound-off [class^=icon-]::before {
  background: #93a0b8;
}
/* ハンバーガーメニューの名前・学年（タップで設定ページへ）。
   右端の「＞」でリンクだと分かるようにする */
.navigation-sub-menu__profile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.navigation-sub-menu__profile-link:active {
  opacity: 0.7;
}
.navigation-sub-menu__profile-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.navigation-sub-menu__profile-link .icon-arrow-right::before {
  background: var(--color-main);
}
.navigation-sub-menu__profile-hint {
  font-size: 11px;
  color: var(--color-main);
}

/* ------------------------------
button-hamburger
------------------------------ */
.button-hamburger {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  row-gap: 3px;
  appearance: none;
}
.button-hamburger__bar {
  display: block;
  width: 26px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-main);
}

/* ------------------------------
  button-large
------------------------------ */
.button-large {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 292px;
  height: auto;
  min-height: 82px;
  padding: var(--padding-2xs);
  transition: var(--trans-button);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--radius-m);
  box-shadow: 0 4px 0 var(--color-main-pale);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  row-gap: 4px;
}
.button-large--primary {
  border-color: var(--color-main-pale3);
  background-color: var(--color-main);
  box-shadow: 0 4px 0 var(--color-main-pale);
  color: var(--color-white);
}
.button-large--secondary {
  border-color: var(--color-main-pale);
  background-color: var(--color-white);
  box-shadow: 0 4px 0 var(--color-main);
  color: var(--color-main);
  row-gap: 5px;
}
.button-large:active:not(.is-disabled) {
  box-shadow: 0 0 0 var(--color-main-pale);
  translate: 0 3px;
}
.button-large.is-disabled {
  border-color: var(--color-disabled-light);
  background-color: var(--color-disabled);
  box-shadow: none;
  color: var(--color-white);
}
.button-large__next {
  display: flex;
  align-items: center;
  margin: 0;
  column-gap: 2px;
  font-size: var(--font-3xl);
  text-align: center;
}
.button-large__more {
  display: flex;
  align-items: center;
  margin: 0;
  column-gap: 2px;
  font-size: var(--font-2xl);
  text-align: center;
}
.button-large__point {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-normal);
}
.button-large__point-num {
  margin-inline: -3px;
}
.button-large__subtext {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 7px;
  margin: 0;
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.button-large__subtext-item {
  display: inline-flex;
  position: relative;
  align-items: center;
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-xs);
}
.button-large .icon-life {
  width: 16px;
  height: 16px;
}
.button-large .icon-point {
  width: 16px;
  height: 16px;
}
.button-large .icon-point::before {
  background-color: var(--color-point);
}

/* ------------------------------
  button-menu
------------------------------ */
.button-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 2px;
  width: 100%;
  height: 100%;
  padding-block: var(--padding-4xs) var(--padding-3xs);
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale);
  border-radius: var(--radius-l);
  background-color: var(--color-white);
  box-shadow: 0 4px 0 var(--color-main);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button-menu:has(.icon-game) {
  padding-top: var(--padding-3xs);
}
.button-menu.is-selectgame {
  row-gap: 6px;
}
.button-menu:active {
  translate: 0 3px;
  box-shadow: 0 0 0 var(--color-main);
}
.button-menu--small {
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-2xs) var(--padding-4xs);
  column-gap: 4px;
  color: var(--color-main);
  font-size: var(--font-s);
}
.button-menu [class^=icon-] {
  width: 37px;
  height: auto;
}
.button-menu [class^=icon-]::before {
  background-color: var(--color-main);
}
.button-menu [class^=icon-].icon-makegame {
  width: 39px;
  translate: 1px 0;
  margin-bottom: -2px;
}
.button-menu [class^=icon-].icon-makegame::before {
  background-color: transparent;
}
.button-menu .icon-game {
  width: 39px;
  height: auto;
  translate: 0 2px;
}
.button-menu .icon-ranking {
  width: 40px;
  translate: 0 -2px;
  margin-bottom: -4px;
}
.button-menu--small [class^=icon-] {
  width: auto;
  height: 17px;
}
.button-menu--small .icon-calendar {
  width: auto;
  height: 16px;
}
.button-menu--small .icon-library {
  width: auto;
  height: 17px;
}

/* ------------------------------
  button-secondary
------------------------------ */
.button-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: var(--padding-3xs);
  column-gap: 4px;
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-main);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button-secondary--fixed {
  width: 160px;
}
.button-secondary--small {
  flex-direction: column;
  width: 100%;
  max-width: 234px;
}
.button-secondary:active:not(.is-disabled) {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.button-secondary.is-disabled {
  border-color: var(--color-disabled-light);
  background-color: var(--color-disabled);
  box-shadow: none;
  color: var(--color-white);
}
.button-secondary [class^=icon-] {
  width: 12px;
  height: 12px;
}
.button-secondary [class^=icon-]::before {
  background-color: var(--color-main);
}
.button-secondary__main {
  display: flex;
  font-size: var(--font-m);
}
.button-secondary__point {
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.button-secondary__point-num {
  margin-inline: -2px;
}
.button-secondary__subtext {
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-normal);
}
.button-secondary .icon-printer {
  width: 12px;
  height: 12px;
  translate: 0 1px;
}

/* ------------------------------
  button-select
------------------------------ */
.button-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: var(--padding-3xs);
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale);
  border-radius: var(--radius-full);
  background-color: var(--color-main);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-white);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button-select--primary {
  border-color: var(--color-main-pale);
  box-shadow: 0 2px 0 var(--color-main);
}
.button-select--secondary {
  border-color: var(--color-main-pale);
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-text);
}
.button-select:active:not(.is-disabled) {
  box-shadow: 0 0 0 var(--color-main-pale);
  translate: 0 3px;
}

/* ------------------------------
  button-small
------------------------------ */
.button-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 234px;
  height: auto;
  padding: 6px var(--padding-3xs);
  transition: var(--trans-button);
  border: solid 2px;
  border-radius: var(--radius-m);
  color: var(--color-white);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  row-gap: 2px;
}
.button-small--primary {
  border-color: var(--color-main-pale3);
  background-color: var(--color-main);
  box-shadow: 0 4px 0 var(--color-main-pale);
  color: var(--color-white);
}
.button-small--secondary {
  border-color: var(--color-main-pale);
  background-color: var(--color-white);
  box-shadow: 0 4px 0 var(--color-main);
  color: var(--color-main);
}
.button-small--fixed {
  width: 160px;
}
.button-small:active:not(.is-disabled) {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.button-small.is-disabled {
  border-color: var(--color-disabled-light);
  background-color: var(--color-disabled);
  box-shadow: none;
  color: var(--color-white);
}
.button-small [class^=icon-] {
  width: 12px;
  height: 12px;
}
.button-small [class^=icon-]::before {
  background-color: var(--color-main);
}
.button-small__main {
  display: flex;
  font-size: var(--font-m);
}
.button-small__point {
  margin-left: 2px;
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.button-small__point-num {
  margin-inline: -2px;
}
.button-small__subtext {
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-normal);
}
.button-small .icon-printer {
  width: 12px;
  height: 12px;
  translate: 0 1px;
}

/* ------------------------------
  button-share
------------------------------ */
.button-share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 0;
  border-radius: var(--radius-half);
  appearance: none;
  aspect-ratio: 1;
}
.button-share--x {
  background-color: var(--color-x);
}
.button-share--x .icon-x {
  width: 28px;
  height: 28px;
  translate: 0 1px;
}
.button-share--line {
  background-color: var(--color-line);
}
.button-share--line .icon-line {
  width: 36px;
  height: 36px;
  translate: 0 1px;
}

/* ------------------------------
  button-radio
------------------------------ */
.button-radio {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  color: var(--color-main);
  cursor: pointer;
}
.button-radio:has(input:focus-visible) {
  outline: solid 3px var(--color-main);
  outline-offset: 3px;
}
.button-radio--text-m {
  padding: var(--padding-m) var(--padding-m) var(--padding-m) 40px;
  font-size: var(--font-m);
}
.button-radio--text-s {
  padding: var(--padding-m) var(--padding-m) var(--padding-m) 38px;
  font-size: var(--font-s);
}
.button-radio:has(input:checked) {
  background-color: var(--color-main-pale3);
  font-weight: var(--font-weight-bold);
}
.button-radio__radio {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 0;
  height: 0;
  translate: -50% -50%;
  appearance: none;
}
.button-radio__radio::after {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: var(--color-main);
  mask: url("../images/icon/ico_radio.svg") no-repeat center/contain;
  translate: 0 -50%;
}
.button-radio--text-s .button-radio__radio::after {
  width: 14px;
  height: 14px;
}
.button-radio__radio:checked::after {
  mask-image: url("../images/icon/ico_radio-on.svg");
}

/* ------------------------------
  button-tertiary
------------------------------ */
.button-tertiary {
  display: inline-flex;
  align-items: center;
  padding: 0;
  column-gap: 6px;
  transition: var(--trans-button);
  border: 0;
  background: none;
  color: var(--color-main);
  font-family: var(--font-family);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  white-space: nowrap;
}
.button-tertiary:hover {
  cursor: pointer;
}
.button-tertiary__text {
  display: inline-flex;
  align-items: center;
}
.button-tertiary__count {
  margin-inline: 4px 2px;
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  translate: 0 -1px;
}
.button-tertiary__count.is-zero {
  color: var(--color-error);
}
.button-tertiary__button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: var(--trans-button);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-half);
  background-color: var(--color-main);
  box-shadow: 0 2px 0 var(--color-main-pale);
  font-size: var(--font-zero);
  line-height: 0;
}
.button-tertiary:active .button-tertiary__button {
  box-shadow: 0 0 0 var(--color-main-pale);
  translate: 0 1px;
}
.button-tertiary__button .icon-plus {
  width: 13px;
  height: 13px;
}
.button-tertiary__button .icon-plus::before {
  background-color: var(--color-white);
}

/* ------------------------------
  button-tooltip
------------------------------ */
.button-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  transition: var(--trans-button);
  border: 1px solid var(--color-main-pale);
  border-radius: var(--radius-half);
  background: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  cursor: pointer;
  appearance: none;
}
.button-tooltip:active {
  translate: 0 2px;
  box-shadow: 0 0 0 var(--color-main);
}
.button-tooltip [class^=icon-] {
  width: 10px;
  height: 10px;
}
.button-tooltip [class^=icon-]::before {
  background: var(--color-main);
}

/* ------------------------------
bubble
------------------------------ */
.bubble {
  position: relative;
  z-index: 1;
  margin-left: 12px;
  padding: var(--padding-m);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
}
.bubble::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px;
  right: calc(100% - 7px);
  aspect-ratio: 24/20;
  width: 24px;
  height: auto;
  background: url("../images/common/img_bubble-tip.svg") no-repeat center/contain;
  mix-blend-mode: lighten;
}

/* ------------------------------
confetti
------------------------------ */
.confetti {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.confetti img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ------------------------------
conversation-list
------------------------------ */
.conversation-list {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.conversation-list__item {
  display: flex;
  align-items: flex-start;
  column-gap: 6px;
}
.conversation-list__item-person {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
}
.conversation-list__item-person-image {
  aspect-ratio: 1;
  width: 71px;
  height: auto;
  margin: 0;
}
.conversation-list__item-person-image img {
  width: 100%;
  height: auto;
}
.conversation-list__item-person-name {
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
  column-block
------------------------------ */
.column-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11px;
  row-gap: 11px;
  border-radius: var(--radius-m);
  background-color: var(--color-white);
}
.column-block__heading {
  width: 100%;
  font-size: var(--font-l);
  font-weight: var(--font-weight-normal);
}

/* ------------------------------
correct-answer
------------------------------ */
.correct-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
}
.correct-answer__detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 10px;
}
.correct-answer__detail-text {
  font-size: var(--font-xl);
  text-align: center;
}
.correct-answer__detail-explanation-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
}

/* ------------------------------
countdown
------------------------------ */
.countdown {
  display: inline-flex;
  align-items: center;
  padding: var(--padding-5xs) var(--padding-3xs) var(--padding-5xs) var(--padding-4xs);
  column-gap: 4px;
  border-radius: var(--radius-xs);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: var(--font-s);
  line-height: var(--line-s);
}
.countdown [class^=icon-] {
  width: 16px;
  height: 16px;
}
.countdown [class^=icon-]::before {
  background-color: var(--color-white);
}
.countdown__time {
  margin-left: 2px;
}

/* ------------------------------
  dialog
------------------------------ */
.dialog {
  display: flex;
  flex-direction: column;
  width: calc(100% - 32px);
  max-width: 358px;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  color: var(--color-text);
  line-height: var(--line-xs);
}
.dialog__heading {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 0;
  background-color: var(--color-main-pale3);
  color: var(--color-main);
  font-family: var(--font-family);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  text-align: center;
}
.dialog:has(.dialog-over) .dialog__heading {
  min-height: 46px;
}
.dialog__close {
  display: flex;
  position: absolute;
  top: 50%;
  right: 10px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: var(--font-zero);
  cursor: pointer;
}
.dialog:has(.dialog-over) .dialog__close {
  right: 14px;
}
.dialog__close [class^=icon-] {
  width: 100%;
  height: 100%;
}
.dialog__close [class^=icon-]::before {
  background-color: var(--color-main);
}
.dialog__body {
  padding: var(--padding-m);
  background-color: var(--color-white);
}
.dialog:has(.dialog-help) .dialog__body {
  padding: 0;
}
.dialog:has(.dialog-confirm) .dialog__body {
  padding: var(--padding-xl) var(--padding-m) 17px;
}

/* ------------------------------
  dialog-about
------------------------------ */
.dialog-about {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
.dialog-about__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
  text-align: center;
}
.dialog-about__lead-main {
  margin: 0;
  font-size: var(--font-l);
}
.dialog-about__lead-sub {
  color: var(--color-main);
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-bold);
}
.dialog-about__feature {
  display: flex;
  column-gap: 8px;
}
.dialog-about__feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
  min-width: 0;
  padding: var(--padding-2xs) var(--padding-xs);
  border-radius: var(--radius-m);
  background-color: var(--color-main-pale3);
}
.dialog-about__feature-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 90px;
  min-height: 62px;
  padding: 6px;
  border: 2px solid var(--color-main-pale);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  font-size: var(--font-2xs);
  row-gap: 8px;
}
.dialog-about__feature-item:first-child .dialog-about__feature-heading {
  row-gap: 3px;
}
.dialog-about__feature-heading [class^=icon-] {
  width: 22px;
  height: 22px;
}
.dialog-about__feature-heading [class^=icon-]::before {
  background-color: var(--color-main);
}
.dialog-about__feature-heading .icon-game {
  width: 24px;
  height: 24px;
}
.dialog-about__feature-name {
  color: var(--color-text);
  font-size: var(--font-2xs);
  text-align: center;
}
.dialog-about__feature-description {
  margin: 0;
  color: var(--color-main);
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-bold);
  /* 折り返しは文中の半角スペース位置だけ（語の途中で千切れない） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.dialog-about__notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--padding-5xs);
  color: var(--color-text);
  font-size: var(--font-2xs);
  text-align: center;
  row-gap: 2px;
}
.dialog-about__notice-text {
  font-weight: var(--font-weight-normal);
}

/* ------------------------------
  dialog-confirm
------------------------------ */
.dialog-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 21px;
}
.dialog-confirm__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
}
.dialog-confirm__message-heading {
  color: var(--color-main);
  font-size: var(--font-m);
  text-align: center;
  /* 折り返しは文中の半角スペース位置だけ（「3けた」「ゲーム」等が途中で千切れない）。
     スペースの無い長文は overflow-wrap で従来どおり折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.dialog-confirm__message-text {
  font-size: var(--font-s);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.dialog-confirm__button-wrap {
  display: flex;
  justify-content: flex-end;
  column-gap: 8px;
}
.dialog-confirm__button-wrap [class^=button] {
  width: 96px;
}

/* ------------------------------
  dialog-explanation
------------------------------ */
.dialog-explanation {
  display: flex;
  flex-direction: column;
  width: calc(100% - 12px);
  max-width: 768px;
  padding: 23px var(--padding-2xs);
  overflow: hidden;
  border: solid 1px var(--color-main);
  border-radius: var(--radius-m);
  color: var(--color-text);
}

/* ------------------------------
  dialog-help
------------------------------ */
.dialog-help {
  line-height: var(--line-xs);
}
.dialog-help__description {
  padding: var(--padding-m) var(--padding-m) var(--padding-s);
  border-bottom: solid 2px var(--color-main-pale);
  color: var(--color-main);
  font-size: var(--font-s);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.dialog-help__list {
  display: flex;
  flex-direction: column;
  padding: var(--padding-m);
  row-gap: 24px;
}
.dialog-help__list-item {
  display: flex;
  position: relative;
  column-gap: 16px;
}
.dialog-help__list-item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -14px;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-main-pale);
}
.dialog-help__list-item:last-child::after {
  display: none;
}
.dialog-help__list-item-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  margin: 0;
}
.dialog-help__list-item-icon--pashage {
  translate: 0 10px;
}
.dialog-help__list-item-icon img {
  width: 100%;
  height: 100%;
}
.dialog-help__list-item-text-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding-block: var(--padding-4xs);
}
.dialog-help__list-item-name {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
}
.dialog-help__list-item-text {
  font-size: var(--font-s);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ------------------------------
  dialog-over
------------------------------ */
.dialog-over {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
}
.dialog-over__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  color: var(--color-main);
}
.dialog-over__top-image {
  width: auto;
  height: 54px;
  aspect-ratio: 49/54;
}
.dialog-over__top-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dialog-over__heading {
  font-size: var(--font-l);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-align: center;
}
.dialog-over__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 8px;
  width: 100%;
}
.dialog-over__tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--padding-m) var(--padding-xs);
  border-radius: var(--radius-m);
  background-color: var(--color-main-pale3);
  color: var(--color-main);
  text-align: center;
  row-gap: 6px;
}
.dialog-over__tips-main {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-s);
}
.dialog-over__tips-note {
  font-size: var(--font-2xs);
}

/* ------------------------------
  dialog-review
------------------------------ */
.dialog-review {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.dialog-review__text {
  font-size: var(--font-s);
  text-align: center;
}
.dialog-review__button-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 12px;
}
.dialog-review__button-list-item {
  width: 100%;
  max-width: 234px;
}
.dialog-review__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 234px;
  height: auto;
  padding: 6px var(--padding-4xs);
  transition: var(--trans-button);
  border: solid 2px;
  border-radius: var(--radius-m);
  border-color: var(--color-main-pale3);
  background-color: var(--color-main);
  box-shadow: 0 4px 0 var(--color-main-pale);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  row-gap: 2px;
}
.dialog-review__button:active {
  translate: 0 4px;
  box-shadow: 0 0 0 var(--color-main-pale);
}
.dialog-review__button--secondary {
  border-color: var(--color-main-pale);
  background-color: var(--color-white);
  box-shadow: 0 4px 0 var(--color-main);
  color: var(--color-main);
}
.dialog-review__button--secondary:active {
  box-shadow: 0 0 0 var(--color-main);
}
.dialog-review__button-subtext {
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-normal);
}

/* ------------------------------
footer
------------------------------ */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
  width: 100%;
  padding: 6px 0 var(--padding-3xs);
  border-top: 2px solid var(--color-main-pale);
  background-color: var(--color-main-pale3);
  font-weight: var(--font-weight-regular);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footer__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-s);
  border-radius: var(--radius-full);
  background: var(--color-main);
  color: var(--color-white);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
.footer__copyright {
  font-size: var(--font-2xs);
  text-align: center;
}

/* ------------------------------
footer-nav-list
------------------------------ */
.footer-nav-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav-list__item {
  display: inline-flex;
  align-items: center;
}
.footer-nav-list__item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 10px;
  margin-inline: 7px;
  background: var(--color-main);
  translate: 0 1px;
}
.footer-nav-list__item-label {
  display: grid;
  min-width: 62px;
  height: 15px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: var(--font-2xs);
  place-items: center;
}
.footer-nav-list__item-link {
  color: var(--color-main);
  font-size: var(--font-2xs);
  text-decoration: none;
  white-space: nowrap;
}

/* ------------------------------
  game-card-list
------------------------------ */
.game-card-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 12px;
}
.game-card-list.is-empty {
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: var(--padding-5xs);
}
.game-card-list__item {
  position: relative;
}
.game-card-list__empty-text {
  color: var(--color-main);
  font-size: var(--font-s);
}

/* ------------------------------
	game-card
------------------------------ */
.game-card {
  position: relative;
  z-index: 0;
}
.game-card .button-favorite {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 16px;
  transition: var(--trans-button);
}
.game-card .button-favorite:active {
  translate: 0 2px;
}
.game-card:has(.game-card__link:active) .button-favorite {
  translate: 0 2px;
}
.game-card:has(.game-card__control:active) .button-favorite {
  translate: 0;
}

.game-card__link {
  display: flex;
  position: relative;
  z-index: 0;
  flex-direction: column;
  width: 100%;
  padding: var(--padding-s);
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale);
  border-radius: 5px;
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  color: var(--color-text);
  line-height: var(--line-s);
  text-decoration: none;
  row-gap: 7px;
}
.game-card:has(.button-favorite:active) .game-card__link {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.game-card.is-mypashage .game-card__link {
  border-color: var(--color-favorite);
  box-shadow: 0 2px 0 var(--color-favorite-dark);
}
.game-card:has(.game-card__control) .game-card__link {
  padding-bottom: 67px;
}
.game-card__link:active {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.game-card.is-mypashage .game-card__link:active {
  box-shadow: 0 0 0 var(--color-favorite-dark);
}
.game-card__top {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  min-width: 0;
}
.game-card__head {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: calc(24px + var(--padding-3xs));
  column-gap: 8px;
}
.game-card__heading {
  display: inline-flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  margin: 0;
  column-gap: 8px;
  font-size: var(--font-l);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-s);
}
.game-card__heading [class^=icon-] {
  width: 32px;
  height: 32px;
}
.game-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-card__number {
  color: var(--color-main);
  font-size: var(--font-s);
}
.game-card__text {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-xl);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-card__message {
  color: var(--color-notice500);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
}
.game-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
  column-gap: 4px;
}
.game-card__taglist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
}
.game-card__date {
  color: var(--color-favorite);
  font-size: var(--font-s);
  white-space: nowrap;
}
.game-card__alert {
  display: flex;
  align-items: center;
  column-gap: 4px;
  color: var(--color-main);
  font-size: var(--font-xs);
}
.game-card__alert [class^=icon-] {
  width: 16px;
  height: 16px;
}
.game-card__alert [class^=icon-]::before {
  background-color: var(--color-alert);
}
.game-card__control {
  display: flex;
  position: absolute;
  z-index: 1;
  bottom: 16px;
  left: 14px;
  justify-content: flex-end;
  width: calc(100% - 30px);
  padding-top: 9px;
  column-gap: 8px;
  transition: var(--trans-button);
}
.game-card:has(.game-card__link:active) .game-card__control {
  translate: 0 2px;
}
.game-card:has(.button-favorite:active) .game-card__control {
  translate: 0 2px;
}
.game-card__control::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-main-pale);
}

/* ------------------------------
game-title
------------------------------ */
.game-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-max-width);
  padding: var(--padding-m) var(--padding-s);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-l);
  background-color: var(--color-white);
  row-gap: 6px;
}
.game-title__category-list {
  display: inline-flex;
  column-gap: 2px;
  font-size: var(--font-2xs);
  list-style: none;
}
.game-title__category-list-item {
  display: inline-flex;
  column-gap: 2px;
}
.game-title__category-list-item::after {
  content: ">";
}
.game-title__category-list-item:last-child::after {
  display: none;
}
.game-title__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 4px;
}
.game-title__heading {
  display: flex;
  align-items: center;
  column-gap: 4px;
}
.game-title__heading [class^=icon-] {
  width: 16px;
  height: 16px;
}
.game-title__title {
  font-size: var(--font-m);
}
.game-title__number {
  color: var(--color-main);
}
.game-title__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block: 6px;
  border: solid 2px var(--color-hint);
  border-radius: 7px;
  background-color: var(--color-hint-light);
  color: var(--color-black);
  row-gap: 4px;
}
.game-title__point-heading {
  color: var(--color-main);
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.game-title__point-heading .icon-light {
  width: 16px;
  height: 16px;
  translate: 0 1px;
}
.game-title__point-heading .icon-light::before {
  background-color: var(--color-main);
}
.game-title__point-text {
  font-size: var(--font-xs);
}

/* ------------------------------
  gamecomplete-header
------------------------------ */
.gamecomplete-header__heading {
  display: flex;
  flex-direction: column;
}
.gamecomplete-header__heading.is-gameover img {
  width: auto;
  height: 28px;
}
.gamecomplete-header__heading.is-clear img {
  width: auto;
  height: 33px;
}

/* ------------------------------
game-block
------------------------------ */
.game-block {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-l);
}
.game-block__heading-link {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-xs) var(--padding-m);
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
}
@media screen and (width > 1024px) {
  .game-block__heading-link {
    padding-block: var(--padding-s);
  }
}
.game-block__heading-button {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: var(--trans-button);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-half);
  background-color: var(--color-main);
  box-shadow: 0 2px 0 var(--color-main-pale);
  color: var(--color-white);
  cursor: pointer;
  translate: 0 -50%;
}
.game-block__heading-link:active .game-block__heading-button {
  box-shadow: 0 0 0 var(--color-main-pale);
  translate: 0 calc(-50% + 2px);
}
.game-block__heading-button .icon-replay {
  width: 16px;
  height: 16px;
  translate: 2px 0;
}
.game-block__heading-button .icon-replay::before {
  background-color: var(--color-white);
}
.game-block__body {
  padding: var(--padding-m);
  background-color: var(--color-white);
}

/* ------------------------------
game-list
------------------------------ */
.game-list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------
game-list-item
------------------------------ */
.game-list-item__link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--padding-3xs) var(--padding-2xs);
  column-gap: 16px;
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale);
  border-radius: 5px;
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
}
.game-list-item__link:active {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 3px;
}
.game-list-item__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  border-radius: var(--radius-half);
  background: var(--color-main);
  color: var(--color-white);
  font-size: var(--font-s);
}
.game-list-item__subject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: -1px;
  padding: var(--padding-4xs);
  border: solid 1px var(--color-main-pale);
  border-radius: var(--radius-xs);
  background: var(--color-main-pale2);
  color: var(--color-main);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
.game-list-item__contents {
  display: flex;
  flex: 1;
  min-width: 0;
}
.game-list-item__title-wrap {
  display: flex;
  position: relative;
  flex: 1;
  align-items: center;
  min-width: 0;
  column-gap: 8px;
}
.game-list-item__title-wrap [class^=icon-] {
  width: 24px;
  height: 24px;
}
.game-list-item__icon {
  width: 24px;
  height: 24px;
}
.game-list-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.game-list-item__title {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-s);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-list-item__info {
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.game-list-item__number {
  display: inline-flex;
  justify-content: center;
  min-width: 33px;
  color: var(--color-main);
  font-size: var(--font-xs);
}
.game-list-item__bonus {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: var(--padding-5xs) var(--padding-4xs);
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: var(--font-2xs);
  white-space: nowrap;
}

/* ------------------------------
goal-object
------------------------------ */
.goal-object {
  display: none;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media screen and (width > 1024px) {
  .goal-object {
    right: 0;
    left: auto;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
.goal-object img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (width > 1024px) {
  .goal-object img {
    height: 49.1215vw;
    max-height: none;
    object-fit: contain;
    object-position: bottom right;
  }
}
.game-main.is-gameover .goal-object {
  display: flex;
}

/* ------------------------------
  icon-alert
------------------------------ */
.icon-alert::before {
  mask-image: url("../images/icon/ico_alert.svg");
}

/* ------------------------------
  icon-arrow-down
------------------------------ */
.icon-arrow-down::before {
  mask-image: url("../images/icon/ico_arrow-down.svg");
}

/* ------------------------------
  icon-arrow-left
------------------------------ */
.icon-arrow-left::before {
  mask-image: url("../images/icon/ico_arrow-left.svg");
}

/* ------------------------------
  icon-arrow-right
------------------------------ */
.icon-arrow-right::before {
  mask-image: url("../images/icon/ico_arrow-right.svg");
}

/* ------------------------------
  icon-bell
------------------------------ */
.icon-bell::before {
  mask-image: url("../images/icon/ico_bell.svg");
}

/* ------------------------------
  icon-book
------------------------------ */
.icon-book::before {
  mask-image: url("../images/icon/ico_book.svg");
}

/* ------------------------------
  icon-calendar
------------------------------ */
.icon-calendar::before {
  mask-image: url("../images/icon/ico_calendar.svg");
}

/* ------------------------------
  icon-category-ai
------------------------------ */
.icon-category-ai::before {
  background-image: url("../images/icon/ico_category-ai.svg");
}

/* ------------------------------
  icon-category-common
------------------------------ */
.icon-category-common::before {
  background-image: url("../images/icon/ico_category-common.svg");
}

/* ------------------------------
  icon-category-official
------------------------------ */
.icon-category-official::before {
  background-image: url("../images/icon/ico_category-official.svg");
}

/* ------------------------------
  icon-cancel
------------------------------ */
.icon-cancel::before {
  mask-image: url("../images/icon/ico_cancel.svg");
}

/* ------------------------------
  icon-check
------------------------------ */
.icon-check::before {
  mask-image: url("../images/icon/ico_check.svg");
}

/* ------------------------------
  icon-hint
------------------------------ */
.icon-hint::before {
  mask-image: url("../images/icon/ico_hint.svg");
}

/* ------------------------------
  icon
------------------------------ */
[class^=icon-] {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
  font-size: var(--font-zero);
  place-items: center;
  aspect-ratio: 1;
}
[class^=icon-]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* ------------------------------
  icon-eraser
------------------------------ */
.icon-eraser::before {
  mask-image: url("../images/icon/ico_eraser.svg");
}

/* ------------------------------
  icon-filter
------------------------------ */
.icon-filter::before {
  mask-image: url("../images/icon/ico_filter.svg");
}

/* ------------------------------
  icon-garbage
------------------------------ */
.icon-garbage::before {
  mask-image: url("../images/icon/ico_garbage.svg");
}

/* ------------------------------
  icon-game
------------------------------ */
.icon-game {
  aspect-ratio: 37/27;
  height: auto;
}
.icon-game::before {
  mask-image: url("../images/icon/ico_game.svg");
}

/* ------------------------------
  icon-gear
------------------------------ */
.icon-gear::before {
  mask-image: url("../images/icon/ico_gear.svg");
}

/* ------------------------------
  icon-guide
------------------------------ */
.icon-guide::before {
  mask-image: url("../images/icon/ico_guide.svg");
}

/* ------------------------------
  icon-library
------------------------------ */
.icon-library {
  aspect-ratio: 18/17;
}
.icon-library::before {
  mask-image: url("../images/icon/ico_library.svg");
}

/* ------------------------------
  icon-life
------------------------------ */
.icon-life::before {
  background-color: var(--color-life);
  mask-image: url("../images/icon/ico_heart.svg");
}

/* ------------------------------
  icon-light
------------------------------ */
.icon-light::before {
  mask-image: url("../images/icon/ico_light.svg");
}

/* ------------------------------
  icon-line
------------------------------ */
.icon-line::before {
  background-image: url("../images/icon/ico_line.svg");
}

/* ------------------------------
  icon-makegame
------------------------------ */
.icon-makegame::before {
  background-color: transparent !important;
  background-image: url("../images/icon/ico_makegame.svg");
}

/* ------------------------------
  icon-modal-close
------------------------------ */
.icon-modal-close::before {
  mask-image: url("../images/icon/ico_modal-close.svg");
}

/* ------------------------------
  icon-pen
------------------------------ */
.icon-pen::before {
  mask-image: url("../images/icon/ico_pen.svg");
}

/* ------------------------------
  icon-point
------------------------------ */
.icon-point::before {
  mask-image: url("../images/icon/ico_point.svg");
}

/* ------------------------------
  icon-plus
------------------------------ */
.icon-plus::before {
  background-color: var(--color-life);
  mask-image: url("../images/icon/ico_plus.svg");
}

/* ------------------------------
  icon-printer
------------------------------ */
.icon-printer::before {
  mask-image: url("../images/icon/ico_printer.svg");
}

/* ------------------------------
  icon-question
------------------------------ */
.icon-question::before {
  mask-image: url("../images/icon/ico_question.svg");
}

/* ------------------------------
  icon-ranking
------------------------------ */
.icon-ranking::before {
  mask-image: url("../images/icon/ico_ranking.svg");
}

/* ------------------------------
  icon-replay
------------------------------ */
.icon-replay::before {
  mask-image: url("../images/icon/ico_replay.svg");
}

/* ------------------------------
  icon-rush
------------------------------ */
.icon-rush::before {
  mask-image: url("../images/icon/ico_rush.svg");
}

/* ------------------------------
  icon-share
------------------------------ */
.icon-share::before {
  mask-image: url("../images/icon/ico_share.svg");
}

/* ------------------------------
  icon-search
------------------------------ */
.icon-search::before {
  mask-image: url("../images/icon/ico_search.svg");
}

/* ------------------------------
  icon-sound
------------------------------ */
.icon-sound::before {
  mask-image: url("../images/icon/ico_sound.svg");
}

/* ------------------------------
  icon-sound-off
------------------------------ */
.icon-sound-off::before {
  mask-image: url("../images/icon/ico_sound-off.svg");
}

/* ------------------------------
  icon-sort-ascending
------------------------------ */
.icon-sort-ascending::before {
  mask-image: url("../images/icon/ico_sort-ascending.svg");
}

/* ------------------------------
  icon-sort-descending
------------------------------ */
.icon-sort-descending::before {
  mask-image: url("../images/icon/ico_sort-descending.svg");
}

/* ------------------------------
  icon-target
------------------------------ */
.icon-target::before {
  mask-image: url("../images/icon/ico_target.svg");
}

/* ------------------------------
  icon-time
------------------------------ */
.icon-time::before {
  mask-image: url("../images/icon/ico_time.svg");
}

/* ------------------------------
  icon-triangle-down
------------------------------ */
.icon-triangle-down::before {
  mask-image: url("../images/icon/ico_triangle-down.svg");
}

/* ------------------------------
  icon-user
------------------------------ */
.icon-user::before {
  mask-image: url("../images/icon/ico_user.svg");
}

/* ------------------------------
  icon-x
------------------------------ */
.icon-x::before {
  background-color: var(--color-white);
  mask-image: url("../images/icon/ico_x.svg");
}

/* ------------------------------
  input-search
------------------------------ */
.input-search {
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex: 1;
  width: 100%;
}
.input-search__input {
  width: 100%;
  height: 36px;
  padding: var(--padding-4xs) var(--padding-4xs) var(--padding-4xs) 32px;
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  line-height: var(--line-m);
}
.input-search__input:focus {
  outline: none;
  background-color: var(--color-main-pale3);
}
.input-search__label {
  position: absolute;
  top: 50%;
  left: 34px;
  transform: translateY(-50%);
  font-weight: var(--font-weight-normal);
  pointer-events: none;
}
.input-search__input:active + .input-search__label, .input-search__input:focus + .input-search__label {
  display: none;
}
.input-search [class^=icon-] {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  translate: 0 -50%;
}
.input-search [class^=icon-]::before {
  background-color: var(--color-main);
}

/* ------------------------------
introduction
------------------------------ */
.introduction {
  display: flex;
  flex-direction: column;
  width: calc(100% + 2px);
  margin-top: -2px;
  padding: 9px var(--padding-2xs) var(--padding-xs);
  border: solid 2px var(--color-main-dark);
  border-radius: var(--radius-l);
  background-color: var(--color-white);
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  text-align: center;
  row-gap: 10px;
}
.introduction__heading {
  letter-spacing: var(--letter-spacing-xl);
  text-align: center;
}
.introduction__main {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: auto;
  max-height: 150px;
  padding: 6px 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: url("../images/common/img_radiation.jpg") no-repeat center/cover;
  aspect-ratio: 340/150;
}
.introduction__main::after {
  content: "";
  display: block;
  aspect-ratio: 650/233;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 10px);
  max-width: 340px;
  height: auto;
  background: url("../images/common/img_introduction-collection.png") no-repeat top calc(50% + 3px) left 50%/cover;
  translate: calc(-50% + 2px) calc(-50% + 8px);
  pointer-events: none;
}
.introduction__main-top {
  line-height: var(--line-none);
}
.introduction__main-strong {
  margin-right: -2px;
  font-size: var(--font-2xl);
}
.introduction__main-bottom {
  translate: 0 -2px;
  letter-spacing: var(--letter-spacing-xl);
}
.introduction__main-link {
  position: relative;
  margin-right: -4px;
  color: var(--color-main);
  cursor: pointer;
}
.introduction__main-link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 4px);
  height: 1px;
  background-color: var(--color-main);
  translate: 0 1px;
}

/* ------------------------------
  link-list
------------------------------ */
.link-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 6px;
}
.link-list__item-link {
  color: var(--color-main);
  font-size: var(--font-s);
}

/* ------------------------------
  list-widget
------------------------------ */
.list-widget {
  display: flex;
  column-gap: 4px;
}
.list-widget__filter {
  position: relative;
}
.list-widget__sort {
  position: relative;
}

/* ------------------------------
  list-widget-button
------------------------------ */
.list-widget-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  transition: var(--trans-button);
  border: 2px solid var(--color-main-pale);
  border-radius: var(--radius-half);
  background: var(--color-white);
  box-shadow: 0 2px 0 var(--color-main);
  cursor: pointer;
  appearance: none;
}
.list-widget-button:active {
  translate: 0 2px;
  box-shadow: 0 0 0 var(--color-main);
}
.list-widget-button [class^=icon-] {
  width: 16px;
  height: 16px;
}
.list-widget-button [class^=icon-]::before {
  background: var(--color-main);
}

/* ------------------------------
  list-widget-filter-popup
------------------------------ */
.list-widget-filter-popup {
  display: none;
  position: absolute;
  z-index: 3;
  top: calc(100% + 14px);
  width: 100vw;
  max-width: 325px;
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  box-shadow: 0 2px 4px rgb(var(--color-main-rgb)/1);
}
.list-widget-filter-popup.is-active {
  display: block;
}
.list-widget-filter-popup__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-block: var(--padding-m);
  color: var(--color-main);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.list-widget-filter-popup__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-m);
  row-gap: 16px;
}
.list-widget-filter-popup__body .button-secondary {
  width: 96px;
}
.list-widget-filter-popup__list-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  width: 100%;
}
.list-widget-filter-popup__list {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.list-widget-filter-popup__list::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-main-pale);
}
.list-widget-filter-popup__list:last-child::after {
  display: none;
}

/* ------------------------------
  list-widget-sort-popup
------------------------------ */
.list-widget-sort-popup {
  display: none;
  position: absolute;
  z-index: 3;
  top: calc(100% + 10px);
  width: 100vw;
  max-width: 112px;
  padding: var(--padding-3xs);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  box-shadow: 0 2px 4px rgb(var(--color-main-rgb)/1);
}
.list-widget-sort-popup.is-active {
  display: block;
}
.list-widget-sort-popup__list {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.list-widget-sort-popup__button {
  width: 100%;
  padding: var(--padding-2xs) var(--padding-m);
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--color-main);
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.list-widget-sort-popup__button.is-current {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* ------------------------------
loader
------------------------------ */
.loader {
  --loader-radius: 24px; /* 表示サイズ（幅・高さ）専用 */
  --stroke-width: 10px; /* viewBox(0 0 100 100)基準の線幅 */
  width: calc(var(--loader-radius) * 2);
  height: calc(var(--loader-radius) * 2);
  transform: rotate(-90deg);
  /* 背景のグレーの円 */
  /* 動く青いバー */
}
.loader__bg, .loader__bar {
  /* viewBox の半径50から線幅の半分を差し引いて枠いっぱいに収める（--loader-radius は使わない） */
  --loader-r: calc(50px - var(--stroke-width) / 2);
  stroke-width: var(--stroke-width);
  stroke-linecap: round; /* 線の先端を丸くする */
  fill: none; /* 中身は塗りつぶさない */
  cx: 50%;
  cy: 50%;
  r: var(--loader-r);
}
.loader__bg {
  stroke: var(--color-gray-light);
}
.loader__bar {
  /* 円周の長さ（2 * π * r） */
  --loader-circle-length: calc(2 * 3.141592 * var(--loader-r));
  /* 青い線の長さ */
  --loader-bar-range: 40px;
  transform-origin: center;
  animation: spin 1.5s linear infinite;
  stroke-dasharray: var(--loader-circle-length);
  stroke-dashoffset: calc(var(--loader-circle-length) - var(--loader-bar-range));
  stroke: var(--color-main-pale);
  rotate: 5deg;
}

/* 回転させるためのアニメーションキーフレーム */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ------------------------------
main-menu
------------------------------ */
.main-menu {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
@media screen and (width > 1024px) {
  .main-menu {
    row-gap: 12px;
  }
}
.main-menu__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.main-menu__list-item {
  flex: 1;
}

/* ------------------------------
memorize-countdown-wrap
------------------------------ */
.memorize-countdown-wrap {
  display: flex;
  position: sticky;
  z-index: 998;
  top: 0;
  flex-direction: column;
  align-items: center;
  padding: 15px var(--padding-3xs) var(--padding-m);
  background-color: var(--color-white);
}

/* ------------------------------
memorize-head
------------------------------ */
.memorize-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  padding: var(--padding-s) var(--padding-3xs) var(--padding-l);
  background-color: var(--color-main-pale2);
}

/* ------------------------------
memorize-quiz-wrap
------------------------------ */
.memorize-quiz-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-m) var(--padding-3xs);
}
.memorize-countdown-wrap + .memorize-quiz-wrap {
  padding-top: 0;
}

/* ------------------------------
notice-box
------------------------------ */
.notice-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 6px var(--padding-3xs);
  border-radius: var(--radius-m);
  background-color: var(--color-main-pale3);
  color: var(--color-text);
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-s);
  row-gap: 2px;
}

/* ------------------------------
header-actions
------------------------------ */
.header-actions {
  display: flex;
  align-items: flex-start;
  height: 26px;
  column-gap: 10px;
}

/* ------------------------------
header-common
------------------------------ */
.header-common {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--padding-2xs) var(--padding-m) var(--padding-3xs);
  border-bottom: 2px solid var(--color-main-pale);
  background-color: var(--color-white);
  gap: 8px;
}
.header-common__logo {
  display: flex;
  align-items: center;
}
.header-common__logo img {
  width: auto;
  height: 31px;
}
.header-common__menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  column-gap: 12px;
}
@media screen and (width > 1024px) {
  .header-common__menu {
    column-gap: 22px;
  }
}
.header-common__menu-sub {
  display: flex;
  align-items: center;
  column-gap: 12px;
}

/* ------------------------------
header-game
------------------------------ */
.header-game {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 4px;
  width: 100%;
  min-height: 48px;
  padding: 6px 11px;
  background-color: var(--color-white);
  /* ペン（メモ）メニュー等のヘッダー操作UIが、fixed配置の「⚡nかい」バッジ
     (z-index:120) に隠れないよう、ヘッダー全体をその手前に置く */
  position: relative;
  z-index: 300;
}
.header-game__contents {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
@media (width <= 375px) {
  .header-game__contents {
    flex-wrap: wrap;
  }
}
.header-game__exit {
  flex: 0 0 20px;
  aspect-ratio: 1;
}
.header-game__info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 5px;
  gap: 8px;
}

/* ------------------------------
header-memo
------------------------------ */
.header-memo {
  display: flex;
  position: relative;
  z-index: 3;
  flex-direction: column;
  padding-bottom: var(--padding-4xs);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 10px transparent;
  row-gap: 16px;
}
.header-memo.is-active {
  background-color: var(--color-main-pale);
  box-shadow: 0 0 0 4px var(--color-main-pale), 0 0 0 6px var(--color-white);
}
.header-memo__submenu {
  display: none;
  flex-direction: column;
  row-gap: 10px;
}
.header-memo.is-active .header-memo__submenu {
  display: flex;
}

/* ------------------------------
hint-block
------------------------------ */
.hint-block {
  width: 100%;
  padding: 5px var(--padding-xs);
  border: solid 1px var(--color-hint);
  border-radius: 5px;
  background-color: var(--color-hint-light);
  color: var(--color-black);
  font-size: var(--font-xs);
  line-height: var(--line-2xs);
}

/* ------------------------------
  modal
------------------------------ */
.modal {
  display: flex;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgb(var(--color-main-dark-rgb)/0.5);
}
.game .modal {
  background: rgb(var(--color-main-dark-rgb)/0.3);
}

/* ------------------------------
  modal-getbadge
------------------------------ */
.modal-getbadge {
  display: flex;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
}
.modal-getbadge__body {
  display: flex;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 0;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-block: var(--padding-l) 15px;
  background: rgb(var(--color-black-rgb)/0.79);
  translate: 0 calc(-50% + 4px);
}
.modal-getbadge__heading {
  color: var(--color-accent);
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.modal-getbadge__image {
  display: grid;
  position: relative;
  width: 94px;
  height: 94px;
  margin-bottom: 3px;
  place-items: center;
  aspect-ratio: 1;
}
.modal-getbadge__image img {
  width: 44px;
  height: auto;
  filter: drop-shadow(0 2px 0 var(--color-accent2));
}
.modal-getbadge .subject-badge {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.modal-getbadge__flash {
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 138px;
  height: 138px;
  background: url("../images/common/img_flash-reward.svg") no-repeat center/138px;
  aspect-ratio: 1;
  translate: -50% -50%;
}
.modal-getbadge__stars {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.modal-getbadge__star {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  background: url("../images/common/img_star.png") no-repeat center/contain;
  translate: -50% -50%;
  aspect-ratio: 1;
}
.modal-getbadge__star:first-child {
  width: 28px;
  translate: calc(-50% - 23px - 14px) calc(-50% + 5px + 14px);
}
.modal-getbadge__star:nth-child(2) {
  width: 18px;
  translate: calc(-50% - 20px - 9px) calc(-50% - 9px - 9px);
}
.modal-getbadge__star:nth-child(3) {
  width: 28px;
  translate: calc(-50% + 21px + 14px) calc(-50% - 11px - 14px);
}
.modal-getbadge__star:nth-child(4) {
  width: 16px;
  translate: calc(-50% + 32px + 8px) calc(-50% + 0px + 8px);
}
.modal-getbadge__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
}
.modal-getbadge__name {
  color: var(--color-white);
  font-size: var(--font-s);
}

/* ------------------------------
  modal-getcollection
------------------------------ */
.modal-getcollection {
  display: flex;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: rgb(var(--color-black-rgb)/0.79);
}
.modal-getcollection__heading img {
  width: auto;
  height: 45px;
  translate: -5px 0;
}
.modal-getcollection__image {
  display: grid;
  position: relative;
  margin-block: -42px;
  place-items: center;
  aspect-ratio: 1;
}
.modal-getcollection__flash {
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 393px;
  height: auto;
  background: url("../images/common/img_flash-reward.svg") no-repeat center/contain;
  aspect-ratio: 1;
  translate: -50% -50%;
  mix-blend-mode: screen;
}
.modal-getcollection__stars {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.modal-getcollection__star {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  background: url("../images/common/img_star.png") no-repeat center/contain;
  translate: -50% -50%;
  aspect-ratio: 1;
}
.modal-getcollection__star:first-child {
  width: 28px;
  translate: calc(-50% - 66px - 14px) calc(-50% - 29px - 14px);
}
.modal-getcollection__star:nth-child(2) {
  width: 28px;
  translate: calc(-50% - 90px - 14px) calc(-50% + 23px + 14px);
}
.modal-getcollection__star:nth-child(3) {
  width: 18px;
  translate: calc(-50% - 42px - 9px) calc(-50% - 22px - 9px);
}
.modal-getcollection__star:nth-child(4) {
  width: 18px;
  translate: calc(-50% - 36px - 9px) calc(-50% + 45px + 9px);
}
.modal-getcollection__star:nth-child(5) {
  width: 16px;
  translate: calc(-50% + 11px + 8px) calc(-50% - 49px - 8px);
}
.modal-getcollection__star:nth-child(6) {
  width: 28px;
  translate: calc(-50% + 29px + 14px) calc(-50% + 36px + 14px);
}
.modal-getcollection__star:nth-child(7) {
  width: 18px;
  translate: calc(-50% + 59px + 9px) calc(-50% + 33px + 9px);
}
.modal-getcollection__star:nth-child(8) {
  width: 18px;
  translate: calc(-50% + 73px + 9px) calc(-50% - 16px - 9px);
}
.modal-getcollection__star:nth-child(9) {
  width: 28px;
  translate: calc(-50% + 90px + 14px) calc(-50% - 1px - 14px);
}
.modal-getcollection__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;
  width: 100%;
}
.modal-getcollection__name {
  color: var(--color-white);
  font-size: var(--font-xl);
}

/* ------------------------------
obstacles-object
------------------------------ */
.obstacles-object {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  aspect-ratio: 1/1;
  width: auto;
  height: 100%;
  translate: -50% 0;
  object-fit: cover;
}
.obstacles-object img {
  width: 100%;
  height: 100%;
}
.game-main.is-gameover .obstacles-object {
  display: block;
}

/* ------------------------------
pagination
------------------------------ */
.pagination {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  row-gap: 8px;
}
.pagination__top {
  display: flex;
  justify-content: space-between;
}
.pagination__top .button {
  width: 86px;
}
.pagination__list {
  display: flex;
  justify-content: center;
  column-gap: 4px;
  color: var(--color-main);
}
.pagination__list-item {
  aspect-ratio: 1;
  width: 36px;
  height: auto;
}
.pagination__list-link {
  display: grid;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  place-items: center;
}
.pagination__list-link.is-current {
  padding: var(--padding-4xs);
  color: var(--color-white);
  text-decoration: none;
  translate: 0 -1px;
}
.pagination__list-link.is-current::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 33px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-half);
  background-color: var(--color-main);
}
.pagination__list-separate {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

/* ------------------------------
player-life
------------------------------ */
.player-life {
  display: flex;
  align-items: center;
  column-gap: 1px;
}
.player-life__item {
  display: inline-flex;
  width: 17px;
  height: auto;
  aspect-ratio: 16/15;
}
@media (width <= 388px) {
  .header-game .player-life__item {
    width: 15px;
  }
}

.player-life__heart {
  display: block;
  width: 100%;
  height: 100%;
}
.player-life__heart-fill {
  fill: var(--color-life);
}
.player-life__heart-line {
  stroke-width: 0.95;
  opacity: 0.75;
  fill: none;
}

/* ------------------------------
player-object
------------------------------ */
.player-object {
  display: flex;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: clamp(214px, 214px + (100dvh - 720px) * 1.3, 214px);
  translate: -50% 0;
  aspect-ratio: 780/428;
}
@media screen and (width > 1024px) {
  .player-object {
    max-height: 440px;
  }
}
.player-object.is-train {
  --train-h: clamp(0px, 35vh, 440px);
  --train-w: calc(var(--train-h) * 1650 / 400);
  right: clamp(0px, (100% - var(--train-w)) / 2, 100%);
  left: auto;
  width: auto;
  max-width: none;
  height: var(--train-h);
  aspect-ratio: 1650/400;
  translate: 0;
}
.player-object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.player-object.is-train img {
  object-fit: cover;
  object-position: right;
}

/* ------------------------------
player-point
------------------------------ */
.player-point {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
}
.player-point .icon-point {
  width: 12px;
  height: 12px;
  translate: 0 1px;
}
.player-point .icon-point::before {
  background-color: var(--color-point);
}
.player-point__text {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: var(--line-none);
}
.player-point__value {
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
player-time
------------------------------ */
.player-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.player-time .icon-time {
  width: 14px;
  height: 14px;
  translate: 0 1px;
}
.player-time .icon-time::before {
  background-color: var(--color-main);
}
.player-time__text {
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
}

/* ------------------------------
progress
------------------------------ */
.progress {
  display: flex;
  width: 100%;
  max-width: 290px;
  column-gap: 10px;
}

/* ------------------------------
progress-circle
------------------------------ */
.progress-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  --progress-percent-quest: 40;
  --progress-percent-collection: 50;
  --progress-quest-color-1: var(--color-quest);
  --progress-quest-color-2: var(--color-quest2);
  --progress-collection-color-1: var(--color-collection4);
  --progress-collection-color-2: var(--color-collection3);
}
.progress-circle__bg-outline {
  stroke-width: 18;
  stroke: var(--color-disabled-light);
  fill: none;
}
.progress-circle__bg {
  stroke-width: 8;
  stroke: var(--color-disabled-light);
  fill: none;
}
.progress-circle #progressGradientQuest stop:first-child {
  stop-color: var(--progress-quest-color-1);
}
.progress-circle #progressGradientQuest stop:last-child {
  stop-color: var(--progress-quest-color-2);
}
.progress-circle #progressGradientCollection stop:first-child {
  stop-color: var(--progress-collection-color-1);
}
.progress-circle #progressGradientCollection stop:last-child {
  stop-color: var(--progress-collection-color-2);
}
.progress-circle__gauge-outline {
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 326.73px;
  stroke-dashoffset: calc(326.73px * (1 - var(--progress-percent-quest) / 100));
  stroke: var(--color-white);
  fill: none;
}
.progress-circle--collection .progress-circle__gauge-outline {
  stroke-dashoffset: calc(326.73px * (1 - var(--progress-percent-collection) / 100));
}
.progress-circle__gauge {
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 326.73px;
  stroke-dashoffset: calc(326.73px * (1 - var(--progress-percent-quest) / 100));
  fill: none;
}
.progress-circle--quest .progress-circle__gauge {
  stroke: url("#progressGradientQuest");
}
.progress-circle--collection .progress-circle__gauge {
  stroke-dashoffset: calc(326.73px * (1 - var(--progress-percent-collection) / 100));
  stroke: url("#progressGradientCollection");
}

/* ------------------------------
progress-graph
------------------------------ */
.progress-graph {
  position: relative;
  width: 100%;
  max-width: 100px;
  height: auto;
  aspect-ratio: 1;
}
.progress-graph[data-full-progress=true]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  aspect-ratio: 1;
  border: 3px solid var(--color-white);
  border-radius: var(--radius-half);
  translate: -50% -50%;
}
.progress-block.is-quest .progress-graph[data-full-progress=true]::before {
  background-color: var(--color-quest3);
}
.progress-block.is-collection .progress-graph[data-full-progress=true]::before {
  background-color: var(--color-collection5);
}
.progress-graph svg {
  width: 100%;
  height: 100%;
}
.progress-graph__summary {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  height: auto;
  border-radius: var(--radius-half);
  color: var(--color-text-darkgray);
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  aspect-ratio: 1;
  row-gap: 0;
  translate: -50% -50%;
}
.progress-circle[data-progress="100"] + .progress-graph__summary {
  color: var(--color-accent-dark);
}
.progress-circle--quest[data-progress="100"] + .progress-graph__summary {
  background: var(--color-quest3);
}
.progress-circle--collection + .progress-graph__summary {
  row-gap: 8px;
}
.progress-circle--collection[data-progress="100"] + .progress-graph__summary {
  background: var(--color-collection5);
}

.progress-graph__summary-subject {
  font-size: var(--font-2xl);
}
.progress-graph__summary-detail {
  font-weight: var(--font-weight-normal);
  line-height: var(--line-none);
  white-space: nowrap;
}
.progress-graph__summary-obj + .progress-graph__summary-detail {
  translate: 0 -8px;
}
.progress-graph__summary-detail-current {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
.progress-graph__summary-detail-separator {
  margin-inline: -5px;
  font-size: var(--font-3xs);
}
.progress-graph__summary-detail-total {
  font-size: var(--font-2xs);
}

/* ------------------------------
progress-block
------------------------------ */
.progress-block {
  display: flex;
  flex: 100% 1 1;
  flex-direction: column;
  row-gap: 0;
}
.progress-block__heading {
  padding: var(--padding-4xs) 6px;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  color: var(--color-white);
  font-size: var(--font-m);
  text-align: center;
}
.progress-block.is-quest .progress-block__heading {
  background: linear-gradient(to right, var(--color-quest), var(--color-quest2));
}
.progress-block.is-collection .progress-block__heading {
  background: linear-gradient(to right, var(--color-collection1), var(--color-collection2));
}
.progress-block__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-s) var(--padding-l);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  background: var(--color-white);
}

/* ------------------------------
quiz-card
------------------------------ */
.quiz-card {
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  padding: var(--padding-s) 15px;
  border: 2px solid var(--color-main);
  border-radius: 5px;
  background-color: var(--color-white);
}
.quiz-card.is-review {
  border-color: var(--color-notice500);
}
.quiz-card .tag-review {
  position: absolute;
  top: 15px;
  right: 14px;
}

.quiz-card__title {
  display: flex;
  position: relative;
  align-items: center;
  min-height: 25px;
  padding-bottom: var(--padding-3xs);
  column-gap: 4px;
}
.quiz-card__title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-main-pale);
}
.quiz-card__title-number {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding-bottom: 1px;
  border-radius: var(--radius-half);
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-none);
  aspect-ratio: 1/1;
}
.quiz-card__title-text {
  font-family: var(--font-family);
  font-size: var(--font-s);
  font-weight: var(--font-weight-normal);
}
.quiz-card.is-review .quiz-card__title-text::before {
  content: "";
  display: block;
  width: 90px;
  height: 20px;
  float: right;
  pointer-events: none;
}
.quiz-card__title-mark {
  display: inline-block;
  margin-right: 2px;
  padding-inline: var(--padding-4xs);
  background-color: var(--color-main-pale2);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.quiz-card__answer {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  padding-top: var(--padding-3xs);
}
.quiz-card__answer-title {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
}
.quiz-card__answer.is-text-lot .quiz-card__answer-title {
  font-size: var(--font-m);
}
.quiz-card__answer-detail {
  font-size: var(--font-xs);
}

/* ------------------------------
quiz-list
------------------------------ */
.quiz-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 12px;
}

/* ------------------------------
quest-block
------------------------------ */
.quest-block {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-l);
  translate: 1px 0;
}
.quest-block__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--padding-4xs) var(--padding-m);
  column-gap: 9px;
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-m);
}
.quest-block__heading [class^=icon-] {
  width: 16px;
  height: 16px;
}
.quest-block__heading [class^=icon-]::before {
  background-color: var(--color-white);
}
.quest-block__heading-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-half);
  background-color: var(--color-main);
  box-shadow: 0 2px 0 var(--color-main-pale);
  color: var(--color-white);
  cursor: pointer;
}
.quest-block__heading-button .icon-replay {
  width: 16px;
  height: 16px;
  translate: 2px 0;
}
.quest-block__heading-button .icon-replay::before {
  background-color: var(--color-white);
}
.quest-block__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;
  padding: 6px 29px var(--padding-m) 25px;
  background-color: var(--color-white);
}
.quest-block .badge-list {
  translate: 3px 0;
}

.quest-block__games {
  display: flex;
  width: 100%;
  column-gap: 20px;
  background-color: var(--color-white);
}
.quest-block__games-item {
  flex: 1;
}

/* ------------------------------
question
------------------------------ */
.question {
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: column;
  width: 100%;
  max-width: 764px;
  row-gap: 18px;
}

/* ------------------------------
question-block
------------------------------ */
.question-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: var(--padding-xs) 24px var(--padding-xl);
  border-radius: var(--radius-m);
  background: var(--color-white);
  line-height: var(--line-s);
}
.question-block:not(:has(.question-block__heading)) {
  padding-top: 36px;
}
.question-block.is-text-few {
  row-gap: 0;
  text-align: center;
}
.question-block.is-text-medium {
  row-gap: 4px;
}
.question-block.is-text-lot {
  row-gap: 4px;
}
.question-block__heading {
  width: fit-content;
  margin-inline: 37px;
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-xs);
}
.question-block.is-text-few .question-block__heading {
  font-size: var(--font-xl);
}
.question-block.is-text-medium .question-block__heading {
  font-size: var(--font-l);
}
.question-block.is-text-lot .question-block__heading {
  font-size: var(--font-l);
}
.question-block__text-wrap {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 76px;
}
.question-block__text {
  margin: 0;
  color: var(--color-text);
  line-height: var(--line-xs);
}
.question-block.is-text-few .question-block__text {
  font-size: var(--font-4xl);
}
.question-block.is-text-medium .question-block__text {
  font-size: var(--font-xl);
}
.question-block.is-text-lot .question-block__text {
  font-size: var(--font-m);
}
.question-block__highlight {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
question-choices
------------------------------ */
.question-choices {
  display: flex;
  flex-direction: column;
  width: calc(100% + 4px);
  margin: 0;
  padding: 0;
  row-gap: 16px;
  translate: -2px;
}
.question-choices__item {
  width: 100%;
}
.question-choices__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--padding-m) 24px;
  transition: var(--trans-button);
  border: 2px solid var(--color-main);
  border-radius: var(--radius-m);
  background: var(--color-white);
  box-shadow: 0 4px 0 var(--color-main);
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-s);
  line-height: var(--line-xs);
  cursor: pointer;
  appearance: none;
}
body:has(.is-correct, .is-incorrect) .question-choices__button {
  pointer-events: none;
}
.question-choices__button:active {
  translate: 0 3px;
  box-shadow: 0 0 0 var(--color-main);
}
.question-choices__button.is-text-few {
  font-size: var(--font-2xl);
}
.question-choices__button.is-text-medium {
  font-size: var(--font-xl);
}
.question-choices__button.is-text-lot {
  font-size: var(--font-m);
}
.question-choices__button.is-correct {
  border-color: var(--color-correct);
  background-color: var(--color-correct-pale);
  box-shadow: 0 4px 0 var(--color-correct-dark);
}
.question-choices__button.is-incorrect {
  border-color: var(--color-incorrect);
  background-color: var(--color-incorrect-pale);
  box-shadow: 0 4px 0 var(--color-incorrect-dark);
}

/* ------------------------------
question-feedback
------------------------------ */
.question-feedback {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  pointer-events: none;
}
.game-main.is-correct .question-feedback {
  top: 174px;
  left: 50%;
  translate: -50% 0;
}

.game-main.is-incorrect .question-feedback {
  top: 187px;
  left: 50%;
  translate: -50% 0;
}

.question-feedback__correct {
  display: none;
  width: 241px;
  height: 241px;
}
.question-feedback__correct img {
  display: block;
  width: 100%;
  height: 100%;
}
.game-main.is-correct .question-feedback__correct {
  display: block;
}

.question-feedback__incorrect {
  display: none;
  width: 184px;
  height: 184px;
}
.question-feedback__incorrect img {
  display: block;
  width: 100%;
  height: 100%;
}
.game-main.is-incorrect .question-feedback__incorrect {
  display: block;
}

/* ------------------------------
question-progress
------------------------------ */
.question-progress {
  --question-progress-ratio: 15;
  display: flex;
  position: absolute;
  z-index: 0;
  top: -20px;
  left: -4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: var(--radius-half);
  background: var(--color-white);
  color: var(--color-text);
}
.question-progress__circle {
  inset: 0;
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}
.question-progress__circle-bg {
  stroke-width: 12;
  stroke: var(--color-main-pale);
  fill: none;
}
.question-progress__circle-gauge {
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 326.73px;
  stroke-dashoffset: calc(326.73px * (1 - var(--question-progress-ratio) / 100));
  stroke: var(--color-main);
  fill: none;
}
.question-progress[data-progress="0"] .question-progress__circle-gauge, .question-progress[style*="--question-progress-ratio: 0"] .question-progress__circle-gauge {
  stroke-dashoffset: 326.73px;
}
.question-progress__summary {
  display: inline-flex;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  align-items: baseline;
  column-gap: 2px;
  font-size: var(--font-2xs);
  translate: -50% calc(-50% - 1px);
}
.question-progress__current {
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
}
.question-progress__separator {
  margin-inline: -2px;
  font-weight: var(--font-weight-bold);
}
.question-progress__total {
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
result-gameclear
------------------------------ */
.result-gameclear {
  width: 100%;
  max-width: 337px;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--color-white);
}
.result-gameclear__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-3xs) var(--padding-2xs);
  background-color: var(--color-main);
}
.result-gameclear__total-heading {
  display: inline-flex;
  align-items: center;
  margin: 0;
  column-gap: 4px;
  color: var(--color-white);
  font-size: var(--font-m);
}
.result-gameclear__total-heading .icon-point {
  width: 20px;
  height: 20px;
}
.result-gameclear__total-heading .icon-point::before {
  background-color: var(--color-point);
}
.result-gameclear__total-point {
  display: flex;
  align-items: flex-end;
  margin: 0;
  column-gap: 1px;
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
}
.result-gameclear__total-point-number {
  font-size: var(--font-xl);
}
.result-gameclear__total-point-unit {
  font-size: var(--font-2xs);
  translate: 0 -2px;
}
.result-gameclear__body {
  padding: var(--padding-xs) var(--padding-2xs);
  background-color: var(--color-white);
}

/* ------------------------------
result-gameclear-list
------------------------------ */
.result-gameclear-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-gameclear-list__item {
  display: grid;
  grid-template-columns: 140px 50px 1fr;
  align-items: center;
  padding-block: var(--padding-2xs);
  border-bottom: 1px solid var(--color-main-pale);
}
.result-gameclear-list__item:first-child {
  padding-top: 0;
}
.result-gameclear-list__item-heading {
  display: inline-flex;
  grid-column: 1;
  align-items: center;
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-m);
  line-height: var(--line-none);
  gap: 4px;
}
.result-gameclear-list__item-heading .icon-question,
.result-gameclear-list__item-heading .icon-time,
.result-gameclear-list__item-heading .icon-rush {
  width: 16px;
  height: 16px;
  color: var(--color-main);
}
.result-gameclear-list__item-heading .icon-question::before,
.result-gameclear-list__item-heading .icon-time::before,
.result-gameclear-list__item-heading .icon-rush::before {
  background-color: var(--color-main);
}
.result-gameclear-list__item-record {
  grid-column: 2;
  min-width: 84px;
  color: var(--color-main);
  font-family: var(--font-family);
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  text-align: right;
  white-space: nowrap;
  justify-self: end;
}
.result-gameclear-list__item-record-value {
  margin-right: 2px;
  font-size: var(--font-m);
}
.result-gameclear-list__item-point {
  grid-column: 3;
  font-size: var(--font-m);
  line-height: var(--line-none);
  text-align: right;
  white-space: nowrap;
  justify-self: end;
}
.result-gameclear-list__item-point-value {
  margin-inline: -2px;
}
.result-gameclear-list__item-point-unit {
  font-size: var(--font-2xs);
}

/* ------------------------------
result-gameover
------------------------------ */
.result-gameover {
  display: flex;
  width: 100%;
  max-width: 337px;
  min-height: 68px;
  overflow: hidden;
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  background: var(--color-white);
}
.result-gameover__column {
  display: flex;
  position: relative;
  flex: 1 1 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px var(--padding-xs) var(--padding-3xs);
  row-gap: 2px;
}
.result-gameover__column:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: calc(100% - 16px);
  background: var(--color-main-pale);
}
.result-gameover__column-heading {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-xs);
  line-height: var(--line-s);
  text-align: center;
}
.result-gameover__column-score {
  display: flex;
  align-items: flex-end;
  margin: 0;
  column-gap: 4px;
  font-family: var(--font-family);
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
  text-align: center;
  translate: 0 -2px;
}
.result-gameover__column-score-number {
  font-size: var(--font-xl);
  translate: 0 3px;
}

/* ------------------------------
retry
------------------------------ */
.retry {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 8px;
  width: 100%;
  padding: var(--padding-m) var(--padding-3xs);
  background: var(--color-white);
}

/* ------------------------------
retry-heading
------------------------------ */
.retry-heading {
  width: 100%;
  max-width: var(--content-max-width);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-none);
}

/* ------------------------------
share
------------------------------ */
.share {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  align-items: center;
  width: 100%;
  padding: var(--padding-m);
  background-color: var(--color-white);
}
.share__heading {
  color: var(--color-black);
  font-size: var(--font-s);
}
.share__button-list {
  display: flex;
  align-items: center;
  column-gap: 16px;
}

/* ------------------------------
subject-badge
------------------------------ */
.subject-badge {
  --progress-percent-subject: 0;
  display: inline-flex;
  position: relative;
  z-index: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: var(--trans-button);
}
.subject-badge:active {
  translate: 0 1px;
}
.subject-badge::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(100% - 4px);
  height: calc(100% - 3px);
  transition: var(--trans-button);
  border-radius: var(--radius-half);
  background: var(--color-quest4);
  translate: -50% calc(-50% + 4px);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.subject-badge:active::after {
  translate: -50% -50%;
}
.subject-badge__circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.subject-badge__circle-track {
  stroke-width: 6;
  stroke: var(--color-disabled-light);
  fill: none;
}
.subject-badge__circle-gauge-outline {
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100.53px;
  stroke-dashoffset: calc(100.53px * (1 - var(--progress-percent-subject) / 100));
  stroke: var(--color-white);
  fill: none;
}
.subject-badge__circle-gauge {
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100.53px;
  stroke-dashoffset: calc(100.53px * (1 - var(--progress-percent-subject) / 100));
  stroke: var(--color-quest);
  fill: none;
}
.subject-badge__core {
  display: inline-flex;
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: var(--radius-half);
  background-color: var(--color-white);
  color: var(--color-text-darkgray);
  font-size: var(--font-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-none);
}
.subject-badge[data-progress="0"] .subject-badge__circle-gauge-outline, .subject-badge[data-progress="0"] .subject-badge__circle-gauge, .subject-badge[style*="--progress-percent-subject: 0"] .subject-badge__circle-gauge-outline, .subject-badge[style*="--progress-percent-subject: 0"] .subject-badge__circle-gauge {
  stroke-dashoffset: 100.53px;
}
.subject-badge.is-complete .subject-badge__core, .subject-badge[data-progress="100"] .subject-badge__core {
  background-color: var(--color-quest3);
  color: var(--color-accent-dark);
}

/* ------------------------------
  side
------------------------------ */
.side {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: var(--padding-xl) var(--padding-m) var(--padding-l);
  background-color: var(--color-main-pale3);
  row-gap: 16px;
}
@media screen and (width > 1024px) {
  .side {
    padding: var(--padding-xl) var(--padding-l) 30px;
  }
}
.side__games-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 19px;
}
@media screen and (width > 1024px) {
  .side__games-wrap {
    row-gap: 15px;
  }
}

/* ------------------------------
navigation-sub-menu
------------------------------ */
.navigation-sub-menu {
  display: none;
  position: absolute;
  z-index: 999;
  top: calc(100% + 7px);
  right: 13px;
  width: 140px;
  padding: var(--padding-m);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  box-shadow: 0 2px 4px var(--color-main-dark);
}
.navigation-sub-menu.is-active {
  display: block;
}
.navigation-sub-menu__head {
  display: flex;
  flex-direction: column;
  min-width: 0;
  row-gap: 4px;
  padding-bottom: var(--padding-s);
  border-bottom: 1px solid var(--color-main-pale);
}
.navigation-sub-menu__name {
  overflow: hidden;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation-sub-menu__grade {
  color: var(--color-main);
  font-size: 13px;
}
.navigation-sub-menu__alert {
  display: flex;
  align-items: flex-start;
  padding-top: 3px;
  column-gap: 2px;
  color: var(--color-alert);
  font-size: var(--font-s);
  font-weight: var(--font-weight-bold);
}
.navigation-sub-menu__alert [class^=icon-] {
  width: 16px;
  height: 16px;
  translate: 0 -1px;
}
.navigation-sub-menu__alert [class^=icon-]::before {
  background-color: var(--color-alert);
}
.navigation-sub-menu__section {
  padding-block: var(--padding-s);
  border-bottom: 1px solid var(--color-main-pale);
}
.navigation-sub-menu__section:first-of-type {
  padding-top: var(--padding-m);
}
.navigation-sub-menu__section:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
@media screen and (width > 1024px) {
  .navigation-sub-menu__section--sp {
    display: none;
  }
}
.navigation-sub-menu__list {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.navigation-sub-menu__list-item-link {
  display: flex;
  align-items: center;
  column-gap: 4px;
  color: var(--color-main);
}
.navigation-sub-menu__list-item-link [class^=icon-] {
  width: 16px;
  height: 16px;
  translate: 0 2px;
}
.navigation-sub-menu__list-item-link [class^=icon-]::before {
  background-color: var(--color-main);
}
.navigation-sub-menu__list-item-link .icon-makegame::before {
  background-color: transparent;
}

/* ------------------------------
navigation-main
------------------------------ */
@media screen and (width < 769px) {
  .navigation-main {
    display: none;
  }
}
@media screen and (769px <= width <= 1024px) {
  .navigation-main {
    display: none;
  }
}
.navigation-main__list {
  display: flex;
  align-items: center;
  column-gap: 16px;
}
.navigation-main__list-item-link {
  display: flex;
  align-items: center;
  column-gap: 4px;
  color: var(--color-main);
}
.navigation-main__list-item-link [class^=icon-] {
  width: 16px;
  height: 16px;
}
.navigation-main__list-item-link [class^=icon-]::before {
  background-color: var(--color-main);
}
.navigation-main__list-item-link .icon-makegame::before {
  background-color: transparent;
}

/* ------------------------------
  tag
------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--padding-4xs) var(--padding-3xs);
  column-gap: 4px;
  border-radius: var(--radius-full);
  color: var(--color-white);
  font-size: var(--font-xs);
  line-height: var(--line-2xs);
}
.tag--feature {
  background-color: var(--color-main-pale);
}
.tag--mypashage {
  background-color: var(--color-accent);
}

/* ------------------------------
  tag-review
------------------------------ */
.tag-review {
  display: inline-flex;
  align-items: center;
  padding: var(--padding-5xs) 6px;
  column-gap: 4px;
  border: solid 2px var(--color-notice500);
  border-radius: 5px;
  background-color: var(--color-notice50);
  color: var(--color-notice500);
  font-size: var(--font-xs);
  line-height: var(--line-2xs);
}
.tag-review [class^=icon] {
  width: 12px;
  height: 12px;
}
.tag-review [class^=icon]::before {
  background-color: var(--color-notice500);
}

/* ------------------------------
text-link
------------------------------ */
.text-link {
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-xl);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.text-link:hover {
  text-decoration: underline;
}

/* ------------------------------
  unit-filter
------------------------------ */
.unit-filter {
  margin-inline: 2px;
}
.unit-filter__tablist {
  display: flex;
  justify-content: flex-start;
  padding-inline: var(--padding-xl);
  column-gap: 12px;
}
.unit-filter__tablist-button {
  padding: var(--padding-4xs) var(--padding-3xs) 5px;
  border: solid var(--color-white);
  border-width: 2px 2px 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background-color: var(--color-main-pale);
  color: var(--color-white);
  font-size: var(--font-l);
}
.unit-filter__tablist-button[aria-selected=true] {
  border-color: var(--color-main-pale);
  background-color: var(--color-white);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* ------------------------------
  unit-filter-panel
------------------------------ */
.unit-filter-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  padding: 11px var(--padding-3xs) 7px;
  border-radius: var(--radius-m);
  background-color: var(--color-white);
}
@media screen and (width > 1024px) {
  .unit-filter-panel {
    align-items: flex-start;
  }
}
.unit-filter-panel__tablist {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 var(--padding-5xs) var(--padding-4xs);
}
@media (width <= 375px) {
  .unit-filter-panel__tablist {
    overflow-x: scroll;
  }
}
.unit-filter-panel__tablist-button {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-xs);
  column-gap: 2px;
  border: 0;
  background: none;
  color: var(--color-main-pale);
  font-size: var(--font-s);
  white-space: nowrap;
}
@media screen and (width > 1024px) {
  .unit-filter-panel__tablist-button {
    width: auto;
  }
}
.unit-filter-panel__tablist-button:first-child {
  padding-left: var(--padding-3xs);
}
.unit-filter-panel__tablist-button:last-child {
  padding-right: var(--padding-3xs);
}
.unit-filter-panel__tablist-button::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background-color: var(--color-main-pale);
  translate: 0 -50%;
}
.unit-filter-panel__tablist-button:last-child::after {
  display: none;
}
.unit-filter-panel__tablist-button [class^=icon-] {
  width: 16px;
  height: 16px;
}
.unit-filter-panel__tablist-button-text {
  display: flex;
  position: relative;
  align-items: center;
  column-gap: 2px;
  line-height: var(--line-xs);
}
.unit-filter-panel__tablist-button[aria-selected=true] .unit-filter-panel__tablist-button-text {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}
.unit-filter-panel__tablist-button[aria-selected=false] .unit-filter-panel__tablist-button-text [class^=icon-] {
  opacity: 0.5;
}
.unit-filter-panel__tablist-button-text::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background-color: var(--color-main);
}
.unit-filter-panel__tablist-button[aria-selected=true] .unit-filter-panel__tablist-button-text::after {
  display: block;
}

/* ------------------------------
  unit-select
------------------------------ */
.unit-select {
  position: relative;
  width: 100%;
}
.unit-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  padding: 6px var(--padding-3xs);
  transition: var(--trans-button);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-s);
  background: none;
  box-shadow: 0 2px var(--color-main);
  color: var(--color-text);
  text-align: left;
}
.unit-select.is-active .unit-select__button {
  background: var(--color-main-pale3);
}
.unit-select__button:active {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.unit-select__button [class^=icon-] {
  width: 16px;
  height: 16px;
}
.unit-select__button [class^=icon-]::before {
  background: var(--color-main);
}
.unit-select__button .unit-progress {
  margin-left: -2px;
}
.unit-select__button-contents {
  display: inline-flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  column-gap: 4px;
  font-weight: var(--font-weight-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unit-select__button-text {
  display: inline-block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unit-select__list {
  display: none;
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px + 1px);
  left: 50%;
  flex-direction: column;
  width: calc(100vw - 16px);
  padding: var(--padding-s) 6px;
  border-radius: var(--radius-m);
  background: var(--color-main-pale);
  row-gap: 8px;
  translate: -50% 0;
}
@media screen and (width > 1024px) {
  .unit-select__list {
    max-width: calc(100% + 20px);
  }
}
.unit-select.is-active .unit-select__list {
  display: flex;
}
.unit-select__item-link {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 6px;
  column-gap: 10px;
  transition: var(--trans-button);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-m);
  background: var(--color-white);
  box-shadow: 0 2px var(--color-main);
  color: var(--color-text);
  line-height: var(--line-m);
}
.unit-select__item-link.is-current {
  background: var(--color-main-pale3);
}
.unit-select__item-link:active {
  box-shadow: 0 0 0 var(--color-main);
  translate: 0 2px;
}
.unit-select__item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------
unit-progress
------------------------------ */
.unit-progress {
  --progress-percent-unit-question: 0;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text);
}
.unit-progress__circle {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  translate: 2px 0;
}
.unit-progress__circle-bg {
  stroke-width: 16;
  stroke: var(--color-disabled-light);
  fill: none;
}
.unit-progress__circle-gauge {
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 326.73px;
  stroke-dashoffset: calc(326.73px * (1 - var(--progress-percent-unit-question) / 100));
  stroke: var(--color-main-pale);
  fill: none;
}
.unit-progress[data-progress="0"] .unit-progress__circle-gauge, .unit-progress[style*="--progress-percent-unit-question: 0"] .unit-progress__circle-gauge {
  stroke-dashoffset: 326.73px;
}
.unit-progress__summary {
  display: inline-flex;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  column-gap: 2px;
  border-radius: var(--radius-half);
  background: var(--color-white);
  color: var(--color-main);
  font-size: var(--font-3xs);
  line-height: var(--line-none);
  translate: calc(-50% + 2px) -50%;
}
.unit-progress__current {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
}
.unit-progress__separator {
  margin-inline: -2px -1px;
  translate: 0 1px;
}
.unit-progress__total {
  font-weight: var(--font-weight-bold);
  translate: 0 2px;
}

/* ------------------------------
user-information
------------------------------ */
.user-information {
  display: flex;
  align-items: center;
}
.user-information__profile {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  gap: 4px;
  /* 拡大したアバターを左上ギリギリに寄せる（アプリ調整） */
  margin-top: -5px;
  margin-left: -9px;
}
.user-information__image {
  /* 79px → 96px に拡大（アプリ調整） */
  width: 96px;
  height: 96px;
  margin: 0;
  padding: var(--padding-4xs);
  border: solid 2px var(--color-main-pale);
  border-radius: var(--radius-half);
  background-color: var(--color-white);
}
.user-information__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.user-information__name {
  display: inline-flex;
  position: absolute;
  bottom: 0;
  align-items: center;
  justify-content: center;
  min-height: 17px;
  padding: var(--padding-5xs) 7px;
  border-radius: var(--radius-full);
  background-color: var(--color-main-pale2);
  color: var(--color-main);
  font-size: var(--font-2xs);
}
.user-information__data-list {
  display: flex;
  position: relative;
  z-index: 0;
  flex: 1;
  /* アバター拡大（79px→96px、+17px）の分だけ重なりを深くして、
     リストの位置・幅を拡大前と同じに保つ（右へのはみ出し防止。アプリ調整）
     計算: 96(拡大後幅) - 9(左寄せ) - 20 = 67 = 79(元幅) - 12(元の重なり) */
  margin-left: -20px;
  /* アバター拡大で相対的に下がって見えるため 3px 上げる（レイアウトに影響しない translate。アプリ調整） */
  translate: 0 -3px;
  padding: 6px var(--padding-xs) 6px 23px;
  border: solid 2px var(--color-main-pale);
  border-radius: 0 7px 7px;
  background-color: var(--color-white);
  list-style: none;
}
@media screen and (width > 1024px) {
  .user-information__data-list {
    padding: 6px var(--padding-xs) 6px 0;
    column-gap: 0;
  }
}
.user-information__data-list-item {
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: var(--padding-m);
}
@media screen and (width <= 375px) {
  .user-information__data-list-item {
    padding-inline: var(--padding-3xs);
  }
}
@media screen and (width > 1024px) {
  .user-information__data-list-item {
    padding-inline: 6px;
  }
}
.user-information__data-list-item::after {
  content: "";
  display: block;
  position: absolute;
  right: -1px;
  width: 1px;
  height: 27px;
  border-radius: var(--radius-full);
  background-color: var(--color-main-pale);
}
.user-information__data-list-item:first-child {
  padding-left: 0;
}
.user-information__data-list-item:last-child {
  padding-right: 0;
}
.user-information__data-list-item:last-child::after {
  display: none;
}
.user-information__data-label {
  color: var(--color-main);
  font-size: var(--font-2xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
.user-information__data-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  appearance: none;
  border: 0;
  background: none;
}
.user-information__data-detail .user-information__button {
  width: 10px;
  height: 10px;
}

.user-information__button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-half);
  background-color: var(--color-main);
  font-size: var(--font-zero);
  aspect-ratio: 1;
}
.user-information__button [class^=icon-] {
  width: 50%;
  height: 50%;
}
.user-information__button [class^=icon-]::before {
  background-color: var(--color-white);
}
.user-information__button .icon-replay {
  translate: 0.5px 0;
}
.user-information__data-score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: var(--color-main);
  font-weight: var(--font-weight-normal);
}
.user-information__data-unit {
  color: var(--color-text);
  font-size: var(--font-2xs);
}

/* ------------------------------
  game
------------------------------ */
.game {
  height: 100vh;
}
.game__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ------------------------------
game-main
------------------------------ */
.game-main {
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 24px var(--padding-3xs) 0;
  overflow: hidden;
}
.game-main__finishmessage {
  position: absolute;
  z-index: 2;
  font-size: var(--font-7xl);
}
.game-main > .hint-block {
  position: absolute;
  bottom: 16px;
  width: calc(100% - 32px);
  max-width: 764px;
}

/* ------------------------------
  gamecomplete
------------------------------ */
.gamecomplete {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url("../images/gamecomplete/bg_gamecomplete.png") repeat top center/480px;
}
.gamecomplete__inner {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}
.gamecomplete.is-gameover .gamecomplete__inner {
  row-gap: 24px;
}

.gamecomplete.is-clear .gamecomplete__inner {
  row-gap: 28px;
  padding-inline: var(--padding-m);
}

/* ------------------------------
gamecomplete-actions
------------------------------ */
.gamecomplete-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 18px;
  width: 100%;
}
.gamecomplete-actions__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  row-gap: 16px;
}
.gamecomplete-actions__next {
  width: 100%;
}
.gamecomplete-actions__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  width: 100%;
  max-width: 234px;
}

/* ------------------------------
gamecomplete-main
------------------------------ */
.gamecomplete-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.gamecomplete-main.is-clear {
  row-gap: 20px;
}
.gamecomplete-main.is-gameover {
  row-gap: 24px;
}
.gamecomplete-main .progress-block__graph {
  display: grid;
  place-items: center;
}

/* ------------------------------
  gameselect
------------------------------ */
.gameselect {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.gameselect__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ------------------------------
gameselect-filter-wrap
------------------------------ */
.gameselect-filter-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 8px;
}

/* ------------------------------
gameselect-list-wrap
------------------------------ */
.gameselect-list-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 158px;
  padding: var(--padding-s) var(--padding-3xs) var(--padding-m);
  background-color: var(--color-white);
  row-gap: 10px;
}
.gameselect-list-wrap__buttons {
  display: flex;
  width: 100%;
  column-gap: 4px;
}
.gameselect-list-wrap__buttons [class^=button-] {
  flex: 1;
}

/* ------------------------------
gameselect-main
------------------------------ */
.gameselect-main {
  flex: 1;
  background-color: var(--color-main-pale2);
}
@media screen and (width > 1024px) {
  .gameselect-main {
    padding-bottom: 0;
  }
}

/* ------------------------------
gameselect-top
------------------------------ */
.gameselect-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-2xs) var(--padding-3xs);
  background-color: var(--color-main-pale2);
  row-gap: 12px;
}
.gameselect-top__inner {
  width: 100%;
}

/* ------------------------------
  memorize
------------------------------ */
.memorize {
  height: 100vh;
}
.memorize__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ------------------------------
  memorize-buttons
------------------------------ */
.memorize-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  column-gap: 14px;
}

/* ------------------------------
  memorize-bottom
------------------------------ */
.memorize-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--padding-m);
  background-color: var(--color-main-pale2);
}
.memorize-bottom__buttons {
  width: 100%;
  padding: var(--padding-m) 0;
}
.memorize-bottom__share {
  width: 100%;
}

/* ------------------------------
  memorize-main
------------------------------ */
.memorize-main {
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
}

/* ------------------------------
  top
------------------------------ */
.top {
  height: 100%;
}
.top__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ------------------------------
top-information
------------------------------ */
.top-information {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

/* ------------------------------
top-main
------------------------------ */
.top-main {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  width: 100%;
  padding: 6px var(--padding-s) 17px var(--padding-xs);
  background: url("../images/common/img_bg-mass.svg") repeat center/22px 22px;
  row-gap: 220px;
}
@media screen and (width > 1024px) {
  .top-main {
    padding: var(--padding-m) var(--padding-s) var(--padding-m) var(--padding-l);
    background-position: center calc(50% - 10px);
  }
}
.top-main::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 40px;
  left: 50%;
  aspect-ratio: 1;
  width: 352px;
  height: auto;
  background: url("../images/top/img_mv.png") no-repeat center/contain;
  translate: calc(-50% + 5px) 0;
}
.top-main:has(.introduction) {
  background-position: top -4px center;
}
.top-main:has(.alert-message)::after {
  top: 75px;
}
@media screen and (width > 1024px) {
  .top-main {
    flex: 1;
  }
}
/* ------------------------------
top-menu
------------------------------ */
.top-menu {
  display: flex;
  position: relative;
  flex-direction: column;
  padding-inline: var(--padding-5xs);
  row-gap: 18px;
}

/* ------------------------------
fonts
------------------------------ */
.text-m {
  font-size: var(--font-m);
}

.text-s {
  font-size: var(--font-s);
}

.text-xs {
  font-size: var(--font-xs);
}

.text-2xs {
  font-size: var(--font-2xs);
}

/* ------------------------------
gap
------------------------------ */
[class^=gap-] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.gap-20 {
  gap: 20px;
}

.gap-18 {
  gap: 18px;
}

.gap-16 {
  gap: 16px;
}

.gap-12 {
  gap: 12px;
}

.gap-10 {
  gap: 10px;
}

.gap-8 {
  gap: 8px;
}

.gap-4 {
  gap: 4px;
}

/* ------------------------------
padding
------------------------------ */
.p-20 {
  padding: var(--padding-xl);
}

.p-18 {
  padding: var(--padding-l);
}

.p-16 {
  padding: var(--padding-m);
}

.p-12 {
  padding: var(--padding-xs);
}

.p-10 {
  padding: var(--padding-2xs);
}

.p-8 {
  padding: var(--padding-3xs);
}

.p-4 {
  padding: var(--padding-4xs);
}

/* ------------------------------
  game-container（アプリ共通の画面コンテナ）
------------------------------ */
/* PCで横に間延びしないよう、ヘッダー・フッターを含むページ全体を
   最大1400pxに制限して中央寄せする。
   ゲーム画面（プレイ・クリア・ゲームオーバー）だけは
   game-container--fullwidth を付けて全幅のまま。 */
.game-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
}

.game-container--fullwidth {
  max-width: none;
}

/* 通常ページ（ゲーム画面以外）の共通レイアウト補正。
   納品サンプルは body(100vh) 直下に .top(height:100%) が来る前提だが、
   アプリは間に #gameContainer(.game-container) が挟まり高さの連鎖が切れる。
   そこでゲーム画面（--fullwidth 付き）以外では、
   ・コンテナの高さ固定を解除してドキュメントスクロールにする
   ・.top / .gameselect を flex 化し最小高さを持たせてフッターを画面最下部へ置く
   （以前は各ページの style ブロックに同じ3点セットをコピーしていたものを集約） */
.game-container:not(.game-container--fullwidth) {
  height: auto;
  max-height: none;
  overflow: visible;
}
.game-container:not(.game-container--fullwidth) :is(.top, .gameselect) {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100dvh;
}
.game-container:not(.game-container--fullwidth) :is(.top__inner, .gameselect__inner) {
  flex: 1;
  height: auto;
}

/* キープ（星）ボタンが無いカードでは、星の分として確保されていた
   見出し行の右余白（padding-right）を外す。
   ※ キープ機能は初期リリースでは無効化中（ボタンをコメントアウト）。
     余白は :has で自動判定しているため、ボタンを復活させれば元の余白も自動で戻る。 */
.game-card:not(:has(.button-favorite)) .game-card__head {
  padding-right: 0;
}

/* is-disabled のボタンは見た目のグレーアウトだけでなくクリック自体も無効化する
   （button-gamestart.is-disabled が pointer-events:none を持つのと同じ扱いに揃える。
     ゲームクリア/ゲームオーバーの「もう一度プレイ」「ゲームを選ぶ」等の <a> ボタンが対象） */
.button-large.is-disabled,
.button-small.is-disabled,
.button-secondary.is-disabled {
  pointer-events: none;
  cursor: default;
}