@charset "UTF-8";
.a-area.--banner {
  background-color: var(--banner-bg);
}
.a-area.--article-header {
  background-color: var(--topicpath-bg);
  border-bottom: 1px solid var(--border);
}

.a-area__inner {
  display: flow-root;
  max-width: var(--main-max-width);
  margin: 0 auto;
}

.a-header {
  margin: 0 var(--main-side-margin);
}
.a-header.--l-image-start {
  margin-top: 16px;
}
.a-header.--l-text-start {
  margin-top: 32px;
}

.a-header__title.--border {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.a-header__title.--l-below-image {
  padding-top: 16px;
}

.a-header__image {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 4px;
}
.a-header__image.--border {
  border: 1px solid var(--border);
}

.a-header__image-frame {
  background-color: #000000;
  border-radius: 4px;
}
.a-header__image-frame.--none {
  background-color: transparent;
}

.a-title {
  font-family: var(--font-bold);
  font-size: 1.8rem;
  font-weight: bold;
  font-optical-sizing: auto;
}
.a-title.--center {
  text-align: center;
}
.a-title.--l-text-start {
  margin-bottom: 8px;
}
.a-title__version {
  font-family: var(--font-base);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
}

.a-title-description {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.a-title-description.--l-above-title {
  margin-bottom: 8px;
}
.a-title-description.--l-below-title {
  margin-top: 8px;
}
.a-title-description a {
  color: var(--text-muted);
}
.a-title-description a:hover {
  text-decoration: underline;
}

.a-section {
  margin: 0 var(--main-side-margin);
}
.a-section.--margin-m {
  margin-top: 32px;
  margin-bottom: 32px;
}
.a-section.--margin-m-top {
  margin-top: 32px;
}
.a-section.--margin-m-bottom {
  margin-bottom: 32px;
}
.a-section.--margin-l {
  margin-top: var(--article-margin-tb);
  margin-bottom: var(--article-margin-tb);
}
.a-section.--margin-l-top {
  margin-top: var(--article-margin-tb);
}
.a-section.--margin-l-bottom {
  margin-bottom: var(--article-margin-tb);
}
.a-section.--margin-ll-bottom {
  margin-bottom: 96px;
}
.a-section.--margin-aside-top {
  margin-top: 40px;
}
.a-section.--margin-aside-bottom {
  margin-bottom: 40px;
}
.a-section.--2columns {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
@media (max-width: 719px) {
  .a-section.--2columns {
    flex-direction: column;
  }
}

.as-header.--border {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.as-title {
  font-family: var(--font-bold);
  font-size: 1.3rem;
  font-optical-sizing: auto;
  font-weight: bold;
}
.as-title.--l-text-link-list-start {
  margin-bottom: 16px;
}
.as-title.--l-text-list-start {
  margin-bottom: 8px;
}
.as-title__date {
  font-family: var(--font-base);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
}

.as-column {
  flex: 1;
}

.asc-title {
  font-family: var(--font-bold);
  font-size: 1.15rem;
  font-optical-sizing: auto;
  font-weight: bold;
}
.asc-title.--center {
  text-align: center;
}
.asc-title.--l-text-start {
  margin-bottom: 8px;
}
.asc-title.--l-text-list-start {
  margin-bottom: 8px;
}
.asc-title.--l-aside-text-list-start {
  margin-bottom: 4px;
}
.asc-title.--l-text-link-list-start {
  margin-bottom: 16px;
}
.asc-title.--l-image-start {
  margin-bottom: 12px;
}
.asc-title.--l-list-start {
  margin-bottom: 12px;
}
.asc-title.--l-asc-button-container-v-start {
  margin-bottom: 8px;
}
.asc-title.--l-table-start {
  margin-bottom: 12px;
}
.asc-title.--l-aside-table-start {
  margin-bottom: 8px;
}
.asc-title.--l-guide-steps-start {
  margin-bottom: 12px;
}

.asc-text {
  line-height: 1.5rem;
}

.asc-paragraph {
  display: flex;
  flex-direction: column;
}
.asc-paragraph.--center {
  text-align: center;
}
.asc-paragraph.--l-below-title {
  margin-top: 8px;
}
.asc-paragraph.--margin-m {
  margin: 24px 0;
}

.asc-button-container-h {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.asc-button-container-h.--align-center {
  justify-content: center;
}
.asc-button-container-h.--l-below-text-list {
  margin-top: 12px;
}
.asc-button-container-h.--l-below-button-container-h {
  margin-top: 12px;
}

.asc-button-container-v {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asc-button-container-v .asc-text-button {
  align-self: flex-start;
}
.asc-button-container-v .asc-icon-button {
  align-self: flex-start;
}

.asc-download-info {
  display: flex;
  gap: 8px;
}

.asc-download-info__file-name {
  font-size: 0.9rem;
  font-weight: bold;
  font-family: var(--font-bold);
}

.asc-download-info__file-size {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.asc-icon-block {
  display: flex;
  gap: 4px;
}

.asc-icon-block__icon {
  width: 44px;
  height: 44px;
}

.asc-icon-block__content {
  flex: 1;
}

.asc-text-button {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  text-decoration: none;
  border-radius: 4px;
  padding: 10px 8px;
}
.asc-text-button:hover {
  text-decoration: none;
}
.asc-text-button__main {
  display: flex;
  margin: 0 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.asc-text-button__text {
  font-size: 1rem;
  vertical-align: middle;
}
.asc-text-button__arrow {
  width: 12px;
  height: 12px;
  mask: url("/resources/icons/arrow.svg");
  -webkit-mask: url("/resources/icons/arrow.svg");
}
.asc-text-button.--mini {
  padding: 8px 4px;
}
.asc-text-button.--mini .cmn-icon {
  width: 16px;
  height: 16px;
}
.asc-text-button.--mini .asc-text-button__main {
  margin: 0 8px;
}
.asc-text-button.--mini .asc-text-button__text {
  font-size: 0.9rem;
}
.asc-text-button.--normal {
  background-color: var(--normal-btn-bg);
  color: var(--text-base);
  border: 1px solid var(--border);
}
.asc-text-button.--normal:hover {
  background-color: var(--normal-btn-bg-hvr);
}
.asc-text-button.--normal .asc-text-button__arrow {
  background-color: var(--normal-btn-arrow);
}
.asc-text-button.--accent {
  background-color: var(--accent-btn-bg);
  color: var(--accent-btn-text);
  border: 0;
}
.asc-text-button.--accent:hover {
  background-color: var(--accent-btn-bg-hvr);
}
.asc-text-button.--accent .asc-text-button__arrow {
  background-color: var(--accent-btn-text);
}
.asc-text-button.--dark {
  background-color: var(--dark-btn-bg);
  color: var(--dark-btn-text);
  border: 0;
}
.asc-text-button.--dark:hover {
  background-color: var(--dark-btn-bg-hvr);
}
.asc-text-button.--dark .asc-text-button__arrow {
  background-color: var(--dark-btn-arrow);
}
.asc-text-button.--sns-youtube {
  background-color: #ff0000;
  color: #ffffff;
  border: 0;
}
.asc-text-button.--sns-youtube:hover {
  background-color: #c00000;
}

.asc-icon-button {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  text-decoration: none;
  border-radius: 4px;
  padding: 10px 8px;
}
.asc-icon-button:hover {
  text-decoration: none;
}
.asc-icon-button__main {
  display: flex;
  margin: 0 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.asc-icon-button__icon {
  width: 20px;
  height: 20px;
}
.asc-icon-button__text {
  font-size: 1rem;
  vertical-align: middle;
}
.asc-icon-button__arrow {
  width: 12px;
  height: 12px;
  mask: url("/resources/icons/arrow.svg");
  -webkit-mask: url("/resources/icons/arrow.svg");
}
.asc-icon-button.--mini {
  padding: 8px 4px;
}
.asc-icon-button.--mini .asc-icon-button__main {
  margin: 0 16px;
}
.asc-icon-button.--normal {
  background-color: var(--normal-btn-bg);
  color: var(--text-base);
  border: 1px solid var(--border);
}
.asc-icon-button.--normal:hover {
  background-color: var(--normal-btn-bg-hvr);
}
.asc-icon-button.--normal .cmn-icon {
  background-color: var(--text-base);
}
.asc-icon-button.--normal .asc-icon-button__arrow {
  background-color: var(--normal-btn-arrow);
}
.asc-icon-button.--accent {
  background-color: var(--accent-btn-bg);
  color: var(--accent-btn-text);
  border: 0;
}
.asc-icon-button.--accent:hover {
  background-color: var(--accent-btn-bg-hvr);
}
.asc-icon-button.--accent .cmn-icon {
  background-color: var(--accent-btn-text);
}
.asc-icon-button.--accent .asc-icon-button__arrow {
  background-color: var(--accent-btn-text);
}
.asc-icon-button.--dark {
  background-color: var(--dark-btn-bg);
  color: var(--dark-btn-text);
  border: 0;
}
.asc-icon-button.--dark:hover {
  background-color: var(--dark-btn-bg-hvr);
}
.asc-icon-button.--dark .cmn-icon {
  background-color: var(--dark-btn-text);
}
.asc-icon-button.--dark .asc-icon-button__arrow {
  background-color: var(--dark-btn-arrow);
}
.asc-icon-button.--sns-x {
  background-color: #000000;
  color: #ffffff;
  border: 0;
}
.asc-icon-button.--sns-x:hover {
  background-color: #505050;
}
.asc-icon-button.--sns-x .cmn-icon {
  background-color: #ffffff;
}
.asc-icon-button.--sns-x .asc-icon-button__arrow {
  background-color: #ffffff;
}
.asc-icon-button.--sns-bluesky {
  background-color: #1185fe;
  color: #ffffff;
  border: 0;
}
.asc-icon-button.--sns-bluesky:hover {
  background-color: #0570d0;
}
.asc-icon-button.--sns-bluesky .cmn-icon {
  background-color: #ffffff;
}
.asc-icon-button.--sns-bluesky .asc-icon-button__arrow {
  background-color: #ffffff;
}

.asc-image {
  display: block;
  max-width: 100%;
  border-radius: 4px;
}
.asc-image.--border {
  border: 1px solid var(--border);
}
.asc-image.--l-center {
  margin-left: auto;
  margin-right: auto;
}
.asc-image.--l-below-text {
  margin-top: 8px;
}
.asc-image.--l-below-text-list {
  margin-top: 12px;
}
.asc-image.--l-below-image-capiton {
  margin-top: 18px;
}

.asc-image-title {
  color: var(--text-base);
  margin-top: 4px;
}

.asc-image-caption {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.asc-image-container.--center .asc-image {
  margin-left: auto;
  margin-right: auto;
}
.asc-image-container.--center .asc-image-title {
  text-align: center;
}
.asc-image-container.--center .asc-image-caption {
  text-align: center;
}

.asc-list {
  width: 100%;
  font-size: 0.9rem;
  text-align: left;
}
.asc-list.--aside {
  font-size: 0.8rem;
  color: var(--text-weak);
}
.asc-list.--aside-text {
  font-size: 0.9rem;
  line-height: 1.1rem;
  color: var(--text-weak);
}
.asc-list.--l-below-image {
  margin-top: 12px;
}

.asc-list__item {
  border-top: 1px solid var(--border);
}
.asc-list__item:last-child {
  border-bottom: 1px solid var(--border);
}

.asc-list__item-field {
  padding: 4px 8px 4px 0;
  vertical-align: middle;
}
.asc-list__item-field:last-child {
  padding-right: 0;
}
.asc-list__item-field.--title {
  font-weight: bold;
}
.asc-list__item-field.--text {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.2rem;
}
.asc-list__item-field.--icon img {
  display: block;
  margin: 2px 0;
}

.asc-text-list {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 0.35rem;
}
.asc-text-list.--aside {
  font-size: 0.9rem;
  color: var(--text-muted);
  gap: 0;
}
.asc-text-list.--l-below-text {
  margin-top: 8px;
}
.asc-text-list.--l-below-text-margin {
  margin-top: 24px;
}
.asc-text-list.--l-below-image {
  margin-top: 8px;
}

.asc-text-list__item {
  line-height: 1.5rem;
  padding-left: 0.9rem;
}
.asc-text-list__item::before {
  position: absolute;
  left: 0.2rem;
  content: "•";
  text-align: center;
}
.asc-text-list__item.--indented-1 {
  padding-left: 2.9rem;
}
.asc-text-list__item.--indented-1::before {
  content: "‣";
  left: 2.2rem;
}

.asc-text-link-list {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 16px;
}
.asc-text-link-list.--large {
  font-size: 110%;
}
.asc-text-link-list:not(.--no-bullet) .asc-text-link-list__item {
  padding-left: 0.9rem;
}
.asc-text-link-list:not(.--no-bullet) .asc-text-link-list__item::before {
  position: absolute;
  left: 0.2rem;
  content: "•";
  text-align: center;
}

.asc-table {
  text-align: left;
  border-collapse: separate;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.asc-table__header-cell {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  background-color: var(--table-header-bg);
}
.asc-table__header-cell:not(:first-child) {
  border-left: 1px solid var(--border);
}

.asc-table__body-cell {
  padding: 8px;
  vertical-align: middle;
}
.asc-table__body-cell:not(:first-child) {
  border-left: 1px solid var(--border);
}
.asc-table__body-row:not(:last-child) .asc-table__body-cell {
  border-bottom: 1px solid var(--border);
}
.asc-table__body-cell.--padding-nallow {
  padding: 4px 8px;
}

.asc-table__content-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asc-switcher {
  display: flex;
  flex-direction: row;
}

.asc-switcher__button {
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  font-size: 90%;
  user-select: none;
}
.asc-switcher__button .cmn-icon {
  width: 16px;
  height: 16px;
  margin: 8px 0;
}
.asc-switcher__button.--left {
  border-radius: 8px 0 0 8px;
  margin-right: -1px;
}
.asc-switcher__button.--middle {
  margin-right: -1px;
}
.asc-switcher__button.--right {
  border-radius: 0 8px 8px 0;
}
.asc-switcher__button.selected {
  background-color: var(--bg-sel);
  border: solid 1px var(--border-sel);
  z-index: 1;
}
.asc-switcher__button:not(.selected) {
  border: solid 1px var(--border);
  color: var(--text-muted);
  cursor: pointer;
}
@media (hover: hover) {
  .asc-switcher__button:not(.selected):hover {
    background-color: var(--bg-hvr);
  }
}

.asc-guide-steps__step {
  display: flex;
  margin: 2px 0;
}
.asc-guide-steps__step:last-child .asc-guide-steps__step-content {
  padding-bottom: 0;
}

.asc-guide-steps__step-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0;
  margin-right: 12px;
  font-weight: bold;
}
.asc-guide-steps__step-number p {
  flex: 0;
  padding: 0 8px;
  background-color: #606060;
  color: #ffffff;
  line-height: 1.7rem;
  border-radius: 4px;
}
.asc-guide-steps__step-number .asc-guide-steps__step-bar {
  box-sizing: content-box;
  flex: 1;
  border-left: 2px solid #606060;
}

.asc-guide-steps__step-content {
  flex: 1;
  padding-bottom: 20px;
}
.asc-history-balloon {
  margin-bottom: 4px;
  padding: 10px 16px 8px;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.asc-history-balloon__text {
  color: #404040;
  font-size: 90%;
  line-height: 1.3rem;
  vertical-align: middle;
}

.asc-history-balloon__date {
  margin-top: 6px;
  width: 100%;
  color: #808080;
  font-size: 75%;
  text-align: right;
}

.asc-history-balloon-kani {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.asc-history-balloon-kani__tail-a {
  margin-bottom: 4px;
  position: relative;
  left: 24px;
  width: 14px;
  height: 10px;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.asc-history-balloon-kani__tail-b {
  margin-bottom: 2px;
  position: relative;
  left: 16px;
  width: 10px;
  height: 8px;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.asc-history-balloon-kani__kani {
  margin: 0 auto;
}
.asc-history-balloon-kani__kani img {
  display: block;
  width: 88px;
}

.asc-history-balloon-container {
  margin: 0 auto;
}
.asc-history-balloon-container.--top-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.asc-history-balloon-container.--history-page {
  max-width: 360px;
  display: flex;
  flex-direction: column;
}

.asc-hr {
  border: none;
  border-top: 1px solid var(--border);
}

.asci-note {
  color: var(--text-note);
}

.asci-strong {
  font-weight: 400;
  color: var(--text-strong);
}

.asci-icon {
  vertical-align: middle;
  margin: 0 4px;
}

.global-main {
  scroll-behavior: smooth;
}

.global-footer {
  padding: 32px 0;
}

.global-footer__menu {
  margin-bottom: 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: small;
}
.global-footer__menu a {
  color: var(--text-faint);
}

.global-footer__copyright {
  text-align: center;
  color: var(--text-faint);
  font-size: small;
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:root {
  --header-max-width: 820px;
  --main-max-width: 820px;
  --article-margin-tb: 72px;
  --font-base: "Noto Sans JP", sans-serif;
  --font-bold: "Noto Sans JP", sans-serif;
  --text-base: #303030;
  --text-weak: #454545;
  --text-muted: #606060;
  --text-faint: #808080;
  --text-strong: #e04080;
  --text-note: #d06020;
  --text-link: #0073b1;
  --text-link-visited: #0073b1;
  --text-muted-link: #606060;
  --bg-hvr: #dcf0fc;
  --bg-sel: #b8e0f8;
  --border: #c0c0c0;
  --border-sel: #20a0e0;
  --global-bg: #f4f4f4;
  --header-bg: #ffffff;
  --header-bg-hvr: #dcf0fc;
  --header-bg-sel: #b8e0f8;
  --topicpath-bg: #fafafa;
  --main-bg: #fafafa;
  --banner-bg: #ffffff;
  --banner-border: #fafafa;
  --table-header-bg: #f8f0e8;
  --normal-btn-bg: #fafafa;
  --normal-btn-bg-hvr: #dcf0fc;
  --normal-btn-bg-sel: #b8e0f8;
  --normal-btn-arrow: #a0a0a0;
  --accent-btn-bg: #0078D4;
  --accent-btn-bg-hvr: #005ea6;
  --accent-btn-text: #ffffff;
  --dark-btn-bg: #303030;
  --dark-btn-bg-hvr: #606060;
  --dark-btn-text: #ffffff;
  --dark-btn-arrow: #ffffff;
}
@media (min-width: 720px) {
  :root {
    --header-menu-left-margin: 10px;
    --header-menu-right-margin: 10px;
    --header-logo-width: 160px;
    --header-menu-li-side-padding: 16px;
    --header-menu-hb-side-padding: 16px;
    --header-menu-hb-dropdown-right: -6px;
    --header-menu-hb-dropdown-top: 3px;
    --header-topicpath-side-margin: 10px;
    --header-optional-text: inline;
    --main-side-margin: 10px;
    --article-border-side: 1px solid var(--border);
    --article-border-radius: 4px;
    --article-padding: 18px 12px;
    --section-padding: 18px;
  }
}
@media (max-width: 719px) and (min-width: 540px) {
  :root {
    --header-menu-left-margin: 8px;
    --header-menu-right-margin: 8px;
    --header-logo-width: 160px;
    --header-menu-li-side-padding: 16px;
    --header-menu-hb-side-padding: 16px;
    --header-topicpath-side-margin: 8px;
    --header-menu-hb-dropdown-right: 2px;
    --header-menu-hb-dropdown-top: 3px;
    --header-optional-text: inline;
    --main-side-margin: 8px;
    --article-border-side: 1px solid var(--border);
    --article-border-radius: 4px;
    --article-padding: 18px 10px;
    --section-padding: 18px;
  }
}
@media (max-width: 539px) {
  :root {
    --header-menu-left-margin: 6px;
    --header-menu-right-margin: 0;
    --header-logo-width: 128px;
    --header-menu-li-side-padding: 16px;
    --header-menu-hb-side-padding: 16px;
    --header-topicpath-side-margin: 6px;
    --header-menu-hb-dropdown-right: 2px;
    --header-menu-hb-dropdown-top: 2px;
    --header-optional-text: none;
    --main-side-margin: 6px;
    --article-border-side: 1px solid var(--border);
    --article-border-radius: 4px;
    --article-padding: 18px 10px;
    --section-padding: 18px;
  }
}
@media (max-width: 374px) {
  :root {
    --header-menu-li-side-padding: 10px;
    --header-menu-hb-side-padding: 10px;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--global-bg);
  color: var(--text-base);
  font-family: var(--font-base);
  font-weight: 400;
  font-style: normal;
}
body a {
  color: var(--text-link);
}

.cmn-icon {
  width: 20px;
  height: 20px;
  background-color: var(--text-base);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.cmn-icon--bg-color {
  background-color: var(--main-bg);
}
.cmn-icon.hamburger {
  mask-image: url("/resources/icons/hamburger.svg");
  -webkit-mask-image: url("/resources/icons/hamburger.svg");
}
.cmn-icon.author {
  mask-image: url("/resources/icons/author.svg");
  -webkit-mask-image: url("/resources/icons/author.svg");
}
.cmn-icon.storeroom {
  mask-image: url("/resources/icons/storeroom.svg");
  -webkit-mask-image: url("/resources/icons/storeroom.svg");
}
.cmn-icon.history {
  mask-image: url("/resources/icons/history.svg");
  -webkit-mask-image: url("/resources/icons/history.svg");
}
.cmn-icon.message {
  mask-image: url("/resources/icons/message.svg");
  -webkit-mask-image: url("/resources/icons/message.svg");
}
.cmn-icon.grid-view {
  mask-image: url("/resources/icons/grid-view.svg");
  -webkit-mask-image: url("/resources/icons/grid-view.svg");
}
.cmn-icon.list-view {
  mask-image: url("/resources/icons/list-view.svg");
  -webkit-mask-image: url("/resources/icons/list-view.svg");
}
.cmn-icon.comic {
  mask-image: url("/resources/icons/comic.svg");
  -webkit-mask-image: url("/resources/icons/comic.svg");
}
.cmn-icon.game {
  mask-image: url("/resources/icons/game.svg");
  -webkit-mask-image: url("/resources/icons/game.svg");
}
.cmn-icon.tool {
  mask-image: url("/resources/icons/tool.svg");
  -webkit-mask-image: url("/resources/icons/tool.svg");
}
.cmn-icon.video {
  mask-image: url("/resources/icons/video.svg");
  -webkit-mask-image: url("/resources/icons/video.svg");
}
.cmn-icon.other {
  mask-image: url("/resources/icons/other.svg");
  -webkit-mask-image: url("/resources/icons/other.svg");
}
.cmn-icon.download {
  mask-image: url("/resources/icons/download.svg");
  -webkit-mask-image: url("/resources/icons/download.svg");
}
.cmn-icon.question {
  mask-image: url("/resources/icons/question.svg");
  -webkit-mask-image: url("/resources/icons/question.svg");
}
.cmn-icon.manual {
  mask-image: url("/resources/icons/manual.svg");
  -webkit-mask-image: url("/resources/icons/manual.svg");
}
.cmn-icon.survey {
  mask-image: url("/resources/icons/survey.svg");
  -webkit-mask-image: url("/resources/icons/survey.svg");
}
.cmn-icon.bug {
  mask-image: url("/resources/icons/bug.svg");
  -webkit-mask-image: url("/resources/icons/bug.svg");
}
.cmn-icon.feedback {
  mask-image: url("/resources/icons/feedback.svg");
  -webkit-mask-image: url("/resources/icons/feedback.svg");
}
.cmn-icon.test {
  mask-image: url("/resources/icons/test.svg");
  -webkit-mask-image: url("/resources/icons/test.svg");
}
.cmn-icon.arrow-right {
  mask-image: url("/resources/icons/arrow-right.svg");
  -webkit-mask-image: url("/resources/icons/arrow-right.svg");
}
.cmn-icon.logo-x {
  mask-image: url("/resources/icons/logo-x.svg");
  -webkit-mask-image: url("/resources/icons/logo-x.svg");
}
.cmn-icon.logo-bluesky {
  mask-image: url("/resources/icons/logo-bluesky.svg");
  -webkit-mask-image: url("/resources/icons/logo-bluesky.svg");
}

.dropdown-menu-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.dropdown-menu-list__item:first-child .dropdown-menu-list__item-link {
  border-radius: 4px 4px 0 0;
}
.dropdown-menu-list__item:last-child .dropdown-menu-list__item-link {
  border-radius: 0 0 4px 4px;
}
.dropdown-menu-list__item-link {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 17px 12px 19px 12px;
  color: var(--text-base);
}
.dropdown-menu-list__item-link:hover {
  background-color: var(--header-bg-hvr);
  text-decoration: none;
}
.dropdown-menu-list__separator {
  height: 0;
  margin: 1px 2px;
  border-top: 1px solid var(--border);
}

.topicpath__list {
  display: flex;
  flex-wrap: wrap;
}

.topicpath__item {
  display: flex;
  height: 20px;
  line-height: 20px;
  font-size: 75%;
  color: var(--text-muted);
}
.topicpath__item:not(:last-child)::after {
  display: block;
  font-size: x-small;
  color: var(--border);
  content: "▶";
  padding: 0 0.5em 0 0.6em;
}

.topicpath__item-link {
  color: var(--text-muted);
}
.topicpath__item-link:hover {
  text-decoration: underline;
}

.global-header__navigation {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

.global-header__topicpath {
  background-color: var(--topicpath-bg);
  border-bottom: 1px solid var(--border);
}

.header-hamburger-menu {
  z-index: 1000;
  position: relative;
}
.header-hamburger-menu.is-open {
  background-color: var(--header-bg-sel);
}
.header-hamburger-menu.is-open .header-hamburger-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.1s ease;
}
@media (hover: hover) and (pointer: fine) {
  .header-hamburger-menu:not(.is-open) .header-hamburger-menu__button:hover {
    background-color: var(--header-bg-hvr);
  }
}
.header-hamburger-menu:not(.is-open) .header-hamburger-menu__dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.1s ease;
}
@media (max-width: 539px) {
  .header-hamburger-menu {
    grid-column: 3;
    grid-row: 1;
  }
}

.header-hamburger-menu__button {
  cursor: pointer;
}

.header-hamburger-menu__button-icon {
  display: block;
  margin: 0 auto;
  padding: calc((var(--row-height) - 20px) / 2) var(--header-menu-hb-side-padding);
  width: 20px;
  height: 20px;
}

.header-hamburger-menu__button-icon-path {
  stroke: var(--text-base);
  stroke-width: 1;
}

.header-hamburger-menu__dropdown {
  display: block;
  position: absolute;
  width: max-content;
  right: var(--header-menu-hb-dropdown-right);
  top: calc(var(--row-height) + var(--header-menu-hb-dropdown-top));
}

.header-hamburger-menu__dropdown--frame {
  background-color: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.header-logo {
  width: var(--header-logo-width);
  padding: 0 2px;
  margin: 0;
}

.header-logo__image {
  max-width: 100%;
}

.header-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.header-menu-list__item {
  user-select: none;
}
.header-menu-list__item.--bold {
  font-family: var(--font-bold);
  font-weight: bold;
}

.header-menu-list__item-link {
  display: block;
  color: var(--text-base);
  line-height: var(--row-height);
  font-size: 15px;
  padding: 0 var(--header-menu-li-side-padding);
}
.header-menu-list__item-link:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .header-menu-list__item-link:hover {
    background-color: var(--header-bg-hvr);
  }
}

.header-menu-list__optional-text {
  display: var(--header-optional-text);
}

.header-navigation {
  max-width: var(--header-max-width);
  margin: 0 auto;
}

.header-navigation__inner {
  padding: 0 var(--header-menu-right-margin) 0 var(--header-menu-left-margin);
  --row-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--row-height);
}

.header-topicpath {
  max-width: var(--header-max-width);
  margin: 0 auto;
}

.header-topicpath__inner {
  padding: 2px var(--header-topicpath-side-margin);
}