@charset "UTF-8";
/* -------------------- */
/* Root settings        */
/* -------------------- */
:root {
  font-weight: 400;
  font-feature-settings: "palt", "calt";
  line-height: 1.7;

  /* variables */
  --menu-width: 350px;
  --content-width: 5000px;
  --toc-min-width: 300px;
  --theme-color: #555559;
  --theme-text-color: #fafafa;
}

/* -------------------- */
/* font                 */
/* -------------------- */
:root { font-family: "Yu Gothic", "YuGothic", sans-serif; }
@page { font-family: "Yu Gothic", "YuGothic", sans-serif; }
pre, :not(pre)>code, pre code { font-family: "Consolas", "游ゴシック", "YuGothic", monospace, sans-serif; }

/* -------------------- */
/* Header               */
/* -------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  font-feature-settings: "palt", "calt";
}
h1:has(.section-number),
h2:has(.section-number),
h3:has(.section-number) {
  display: flex;
}
.section-number {
  padding-right: 1em;
  display: inline-block;
  white-space: nowrap;
}
h1 {
  font-size: 2.2rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  padding-left: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-left: solid 5px var(--theme-color);
  background: #eee;
}
h2 {
  margin-top: 3rem;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  line-height: 1.2;
  border-bottom: solid var(--theme-color);
  border-width: 1px;
}
h3 {
  margin-top: 2rem;
  margin-bottom: 0.3rem;
  font-size: 1.5rem;
  line-height: 1.2;
}
h4 {
  margin-top: 1.2rem;
  margin-bottom: 0rem;
  font-size: 1.3rem;
}
h5 {
  margin-top: 0.4rem;
  margin-bottom: 0rem;
  font-size: 1rem;
}
h6 {
  margin-top: 0.2rem;
  margin-bottom: 0rem;
  font-size: 0.85rem;
}
h2:hover .header-anchor,
h3:hover .header-anchor,
h4:hover .header-anchor {
  display: inline;
  color: #e8e8e8;
}
.header-anchor {
  display: none;
}

/* -------------------- */
/* text                 */
/* -------------------- */
a {
  text-decoration: none;
  color: #3498db;
}

a:visited {
  color: #9b59b6;
}

a:hover {
  text-decoration: underline;
  color: #e74c3c;
}

p {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  font-feature-settings: "palt", "calt";
  text-align: left;
}

pre {
  margin: 0.8rem 0;
  padding: 1em 2em;
  background-color: #eee;
  box-decoration-break: clone;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
}

ul,
ol {
  padding-inline-start: 1.5em;
}

nav ol {
  list-style-type: none;
}

sup {
  font-size: 65%;
}

sub {
  font-size: 65%;
}

/* -------------------- */
/* figure               */
/* -------------------- */
figure {
  margin: 1.5rem auto;
  text-align: center;
}

figure img {
  max-width: 100%;
  margin: 0.5rem auto;
}

figure figcaption {
  margin: 0.5rem auto;
  width: 90%;
  font-size: 90%;
  break-inside: avoid;
}

figure img[src$=".png"],
figure img[src$=".jpg"],
figure img[src$=".jpeg"],
figure img[src$=".gif"],
figure img[src$=".webp"] {
  image-resolution: 200dpi;
}

img {
  max-width: 100%;
  object-fit: contain;
}

svg {
  max-width: 100%;
}

/* -------------------- */
/* popup image          */
/* -------------------- */
.popup-image-background {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: all 250ms ease-in-out;
}
.pop-up-image-check {
  display: none;
}
.pop-up-image-check:checked + .popup-image-background {
  visibility: visible;
  opacity: 1;
  z-index: 100000;
}
.popup-image-window {
  overflow: auto; /* scroll */
  max-height: 95%;
  max-width: 95vw;
  min-width: fit-content;
  position: fixed;
  top: 50%; /* center */
  left: 50%; /* center */
  transform: translate(-50%, -50%); /* center */
  z-index: 100010;
  margin: 5px auto;
  padding: 5px 5px;
  background: #fff;
}
.popup-image-window img {
  max-width: 95vw; /* max: browser 95% */
  min-width: 50vw; /* min: browser 50% */
}

/* -------------------- */
/* table                */
/* -------------------- */
table {
  display: table;
  min-width: 50%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1rem auto;
}
td, th {
  font-size: 0.8rem;
  padding: 0.4rem;
  text-align: left;
}
th {
  background: #605f5f;
  border: solid 2px #fff;
  color: #fff;
}
thead {
  border-bottom: solid 4px #fff;
}
tr {
  background: #ebebeb;
}
td {
  border: solid 2px #fff;
}
/* gray-table */
table.gray th {
  background: #605f5f;
  border: solid 2px #fff;
  color: #fff;
}
table.gray thead {
  border-bottom: solid 4px #fff;
}
table.gray tr {
  background: #ebebeb;
}
table.gray td {
  border: solid 2px #fff;
}
/* simple-table */
table.simple th {
  background: inherit;
  color: #000;
  border: solid 1px;
}
table.simple thead {
  border-bottom: double 3px;
}
table.simple tr {
  background: inherit;
}
table.simple td {
  border: solid 1px;
}

/* <- : right border hidden */
table td.isRightBorderHidden {
  border-right: none;
}
table td.isRightBorderHidden + td {
  border-left: none;
}

/* -------------------- */
/* quote                */
/* -------------------- */
blockquote {
  background-color: #f6f6f6;
  margin: 1.5rem 0.5rem;
  padding: 0.5rem 1rem;
  border-left: 6px solid #ccc;
}

blockquote :not(pre) > code {
  padding: 0;
  word-break: break-all;
}

/* -------------------- */
/* pre/code             */
/* -------------------- */
/* inline code */
:not(pre) > code {
  padding: 2pt;
  background-color: #eee;
  font-size: 1em;
  white-space: pre-wrap;
}
table :not(pre) > code {
  background-color: #d0d0d0;
}
/* code block */
pre code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* -------------------- */
/* note                 */
/* -------------------- */
div.note {
  margin-top: 20pt;
  margin-bottom: 20pt;
  break-inside: avoid-page;
}
div.note_content {
  margin: 0pt;
  padding-top: 4pt;
  padding-left: 12pt;
  padding-right: 12pt;
  padding-bottom: 5pt;
  display: block;
  background: #eee;
  break-inside: avoid-page;
  break-before: avoid-page;
}
div.note_title {
  margin: 0pt;
  padding-top: 3pt;
  padding-bottom: 3pt;
  padding-left: 10pt;
  padding-right: 10pt;
  background: #bbb;
  font-size: 1.1rem;
  font-weight: 600;
  break-after: avoid-page;
}
div.note li p {
  margin: 0pt;
}

/* -------------------- */
/* styling              */
/* -------------------- */
body {
  counter-reset: section subsection fig tbl footnote cite tablecaption;
}

/* Section */
section {
  counter-increment: section;
  counter-reset: subsection;
}

section article {
  counter-increment: subsection;
}

/* toc part */
a.doc-part {
  font-weight: 600;
  font-size: 1.7rem;
}

/* figure */
figure img.fig {
  counter-increment: fig;
}

figcaption span.fig-number::before {
  content: "Fig. ";
}
figcaption span.fig-number::after {
  content: counter(fig) ": ";
}

/* table caption */
table caption {
  counter-increment: tablecaption;
}

caption span.caption-number::after {
  content: counter(tablecaption) ": ";
}

/* footnote */
.footnote {
  counter-increment: footnote;
}

.footnote::footnote-call,
.footnote::footnote-marker {
  content: "[" counter(footnote) "]";
}

.footnote::footnote-call {
  font-size: 80%;
  margin: 0 0.3rem;
}

.footnote::footnote-marker {
  margin-right: 0.2rem;
}

/* break shortcode */
#shortcodes-page-break {
  break-before: page;
}

/* -------------------- */
/* Page settings        */
/* -------------------- */
@page {
  margin-top: 8%;
  margin-bottom: 6%;
  margin-left: 10%;
  margin-right: 10%;
  @top-left-corner {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
    margin-bottom: 25%; /* 8% * 25% = 2%. ヘッダー描画域は全体の6% */
    content: "";
    font-size: 0.8rem;
    font-weight: 400;
  }
  @top-center {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
    margin-bottom: 25%;
    padding: 2mm;
    text-align: left;
    vertical-align: bottom;
    content: env(pub-title) " - " env(doc-title);
    font-size: 0.8rem;
    font-weight: 400;
  }
  @top-right-corner {
    background-color: var(--theme-color);
    color: var(--theme-text-color);
    margin-bottom: 25%;
    content: "";
    font-size: 0.8rem;
    font-weight: 400;
  }
  @bottom-left-corner {
    font-size: 0.8rem;
    font-weight: 400;
  }
  @bottom-left {
    font-size: 0.8rem;
    font-weight: 400;
  }
  @bottom-center {
    font-size: 0.8rem;
    font-weight: 400;
  }
  @bottom-right {
    font-size: 0.8rem;
    font-weight: 400;
  }
  @bottom-right-corner {
    font-size: 0.8rem;
    font-weight: 400;
  }
}

/* cover */
div.cover-top-center {
  visibility: hidden;
  string-set: top-center content();
}
div.cover-top-center2 {
  visibility: hidden;
  string-set: top-center2 content();
}
div.cover-bottom-left {
  visibility: hidden;
  string-set: bottom-left content();
}
div.cover-bottom-center {
  visibility: hidden;
  string-set: bottom-center content();
}
div.cover-bottom-right {
  visibility: hidden;
  string-set: bottom-right content();
}

/* -------------------- */
/* Role settings        */
/* -------------------- */
/* doc-cover */
[role="doc-cover"] {
  break-after: page;
  margin-top: 10%;
  text-align: center;
}

[role="doc-cover"] #cover-title {
  color: var(--theme-text-color);
  background-color: var(--theme-color);
  padding-top: 4rem;
  padding-bottom: 4rem;
}
[role="doc-cover"] h1 {
  font-size: 3rem;
  margin-right: 2rem;
  margin-left: 2rem;
  color: var(--theme-text-color);
  background: var(--theme-color);
}
[role="doc-cover"] h1,
[role="doc-cover"] h2,
[role="doc-cover"] h3 {
  display: block;
}
[role="doc-cover"] #cover-author {
  text-align: center;
  margin-top: 40%;
}

/* doc-introduction */
[role="doc-introduction"] {
  break-after: page;
}

/* doc-toc */
[role="doc-toc"] {
  margin-top: 10%;
  font-size: 1.2rem;
}
[role="doc-toc"] h2 {
  font-size: 2.5rem;
}
[role="doc-toc"] li a {
  display: inline-flex;
  width: 100%;
  text-decoration: none;
  color: currentColor;
  align-items: baseline;
}
[role="doc-toc"] li a::before {
  margin-left: 0.5em;
  margin-right: 0.5em;
  border-bottom: solid 1px;
  content: "";
  order: 1;
  flex: auto;
}
[role="doc-toc"] li a::after {
  text-align: right;
  content: target-counter(attr(href), page-number);
  align-self: flex-end;
  flex: none;
  order: 2;
}

/* doc-part */
[role="doc-part"] {
  background-color: var(--theme-color);
  color: var(--theme-text-color);
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  margin-top: 30%;
}

[role="doc-part"] h1 {
  color: var(--theme-text-color);
  background: var(--theme-color);
  margin-right: 20%;
  font-size: 3.5rem;
}

[role="doc-part"] p {
  margin-right: 20%;
}

/* doc-chapter */
[role="doc-chapter"] h1.doc-chapter {
  border-left: solid 5px var(--theme-color);
  border-bottom: none;
  border-right: none;
  border-top: none;
  font-size: 3rem;
  background-color: initial;
  color: initial;
}

/* doc-endnotes */
[role="doc-endnotes"] {
  float-reference: page;
  float: bottom;
  margin-bottom: 0;
}

/* doc-colophon */
#vivlio-colophon {
  margin-top: 10%;
}
[role="doc-colophon"] {
  position: relative;
  float-reference: page;
  float: bottom;
  margin-bottom: 0;
}
[role="doc-colophon"] table {
  margin: 0;
  width: 100%;
  font-size: 100%;
  border-top: 1px solid #000;
}
[role="doc-colophon"] table th {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  border: 0;
  box-shadow: none;
  background: inherit;
}
[role="doc-colophon"] table tr {
  border: 0;
  box-shadow: none;
  background: inherit;
}
[role="doc-colophon"] table tr:last-child td {
  border-bottom: 1px solid #000;
}
[role="doc-colophon"] table td {
  vertical-align: top;
  padding-left: 0;
}

/* -------------------- */
/* media settings       */
/* -------------------- */
@media print {
  :root {
    widows: 3;
    orphans: 3;
    hyphens: auto;
    font-size: 12px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid;
  }
  tr,
  th,
  td {
    break-inside: avoid;
  }
  .footnote {
    float: footnote;
    text-align: left;
  }

  #menu {
    display: none;
  }
  #TableOfContents, #TableOfContents-sidebar {
    display: none;
  }

  .copy-button {
    display: none;
  }

  /* multi-column */
  .two-columns {
    text-align: justify;
    columns: 2;
    column-gap: 2.2rem;
    column-rule-style: none;
  }
  div.two-columns {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .videobox {
    display: none;
  }
}

@media screen {
  :root {
    font-size: 1.05rem;
    font-weight: 500;
  }
  body {
    margin: auto 0rem;
    padding-bottom: 4rem;
  }
  article {
    margin: 0 auto;
    max-width: 60rem;
  }
  section {
    clear: both;
  }
  figure {
    max-width: 50rem;
  }
  .footnote {
    vertical-align: super;
    background-color: rgba(214, 255, 0, 0.4);
    margin: 0 0.1rem;
    line-height: 0;
  }
  .footnote a {
    word-break: break-all;
  }
  a[data-ref="sec"],
  a[data-ref="subsec"],
  a[data-ref="fig"],
  a[data-ref="tbl"],
  a[data-ref="cite"] {
    color: #e74c3c;
    background-color: rgba(255, 0, 0, 0.3);
  }
  a[data-ref="sec"]::before {
    content: "§ XXX";
  }
  a[data-ref="subsec"]::before {
    content: "§ XXX.XXX";
  }
  a[data-ref="fig"]::before {
    content: "Fig. XXX";
  }
  :root:lang(ja) a[data-ref="fig"]::before {
    content: "図 XXX";
  }
  a[data-ref="tbl"]::before {
    content: "Table XXX";
  }
  :root:lang(ja) a[data-ref="tbl"]::before {
    content: "表 XXX";
  }
  a[data-ref="cite"]::before {
    content: "[XXX]";
  }

  [role="doc-toc"] {
    margin-top: 0;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 1.2rem;
  }

  [role="doc-part"] {
    margin: 0 0;
  }
  [role="doc-chapter"] h1.doc-chapter {
    margin: 0 0 0 0;
    padding: 3rem 2rem;
  }

  #content {
    box-sizing: border-box;
    margin-left: var(--menu-width);
    padding: 20px 40px;
    max-width: min(var(--content-width), calc(98% - var(--menu-width) - var(--toc-min-width)));
    transition: all 0.2s ease-out;
  }
  video {
    max-width: 100%;
  }
  .videobox {
    text-align: center;
  }

  /* Side Menu */
  #menu {
    box-sizing: border-box;
    top: 0px;
    height: 100%;
    width: var(--menu-width);
    position: fixed;
    overflow: auto;
    color: #fafafa;
    background: #333;
    padding: 0px 20px;
    margin-left: 0px;
    font-size: 0.9rem;
    z-index: 80;
    transition: all 0.2s ease-out;
  }

  #menu .logo img {
    max-width: var(--menu-width);
    margin-left: -20px;
  }

  /* menu color styling */
  #menu a {
    text-decoration: none;
    color: #fafafa;
  }

  #menu a:visited {
    color: #fafafa;
  }

  #menu .menu-selected {
    background-color: #666;
  }

  #menu a:hover {
    text-decoration: underline;
    color: #e74c3c;
    background-color: #444;
  }

  #menu ul li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #ffffff;
    padding: 3px 0px 3px 0px;
  }

  /* menu indent styling */
  #menu ul {
    padding: 0 0 0 1rem;
  }
  #menu ul li {
    list-style: none;
    margin: 0;
  }

  #menu details ul {
    margin: 0 0 0 1rem;
    padding: 0;
  }

  #menu details > summary {
    list-style-position: outside
  }

  /* menu footer */
  .menu-footer a {
    margin-left: 1rem;
    font-size: 1rem;
    display: block;
    box-sizing: border-box;
  }

  .language-selector summary:hover {
    cursor: pointer;
    text-decoration: underline;
    color: #e74c3c;
    background-color: #444;
  }

  .select-language {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
  }

  .one-language {
    margin-left: 0.8rem;
  }

  .menu-footer-space {
    margin-top: 10rem;
  }

  #TableOfContents {
    display: none;
  }

  /* -------------------- */
  /* copy button          */
  /* -------------------- */
  .copy-button {
    color: #bbb;
    background-color: #fff;
    border: 1px solid;
    border-radius: 5px 5px 0px 0px;

    display: block;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: -2px;
    padding: 3px 10px;
    font-size: 0.8em;
  }

  .copy-button:hover {
    cursor: pointer;
    color: #fff;
    background-color: #3498db;
  }

  .copy-button:active {
    cursor: pointer;
    color: #fff;
    background-color: #00387b;
  }

  .copy-button:focus {
    outline: 0;
  }

  .highlight pre {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
  pre {
    margin-top: 0;
  }

  .EditThisPage {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    margin-left: 1rem;
  }
  /* -------------------- */
  /* Tags                 */
  /* -------------------- */
  .taglist {
    font-size: 0.8rem;
    list-style: none;
    margin: 1rem;
    margin-bottom: 1.5rem;
  }
  .taglist li {
    display: inline-block;
  }
  .taglist a {
    display: inline-block;
    margin: 0 0.1rem 0.2rem 0;
    padding: 0.3rem;
    line-height: 1rem;
    text-decoration: none;
    color: #3498db;
    border: 1px solid #3498db;
    border-left: 3px solid #3498db;
  }
  .taglist a:hover {
    color: #e74c3c;
    border: 1px solid #e74c3c;
    border-left: 3px solid #e74c3c;
  }

  /* -------------------- */
  /* menu accordion buton */
  /* -------------------- */
  .accordion-btn {
    position: fixed;
    top: 0px;
    left: var(--menu-width);
    display: flex;
    height: 100%;
    width: 15px;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-out;
  }
  .accordion-btn:hover {
    background-color: #ddd;
    cursor: pointer;
  }
  .accordion-btn:hover span {
    background-color: #fff;
    width: 10px;
    height: 20px;
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  }
  /* accordion checked = close */
  #accordion-btn-check:checked ~ .accordion-btn {
    background-color: var(--theme-color);
    left: 0px;
  }
  #accordion-btn-check:checked ~ .accordion-btn:hover span {
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  }
  #accordion-btn-check:checked ~ #content {
    margin-left: 0px;
    max-width: calc(min(var(--content-width), calc(98% - var(--toc-min-width) - var(--menu-width))) + var(--menu-width));
  }
  #accordion-btn-check:checked ~ #menu {
    width: 0px;
    padding: 0px;
  }

  /* --------------------- */
  /* right accordion buton */
  /* --------------------- */
  .right-accordion-btn {
    position: fixed;
    top: 0px;
    left: calc(min(calc(var(--menu-width) + var(--content-width)), calc(98% - var(--toc-min-width))) - 15px);
    display: flex;
    height: 100%;
    width: 15px;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-out;
  }
  .right-accordion-btn:hover {
    background-color: #ddd;
    cursor: pointer;
  }
  .right-accordion-btn:hover span {
    background-color: #fff;
    width: 10px;
    height: 20px;
    clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
  }
  /* right-accordion checked = close */
  #right-accordion-btn-check:checked ~ .right-accordion-btn {
    background-color: var(--theme-color);
    left: calc(100% - 15px);
  }
  #right-accordion-btn-check:checked ~ .right-accordion-btn:hover span {
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  }
  #right-accordion-btn-check:checked ~ #content {
    max-width: 100%;
  }
  #right-accordion-btn-check:checked ~ #content #TableOfContents-sidebar {
    left: 100%;
    width: 0px;
    min-width: 0px;
    padding: 0px;
  }


  /* ---------------- */
  /* page toc sidebar */
  /* ---------------- */
  #TableOfContents-sidebar {
    display: inline;
    position: fixed;
    top: 50px;
    bottom: 50px;
    overflow-y: auto;
    left: min(calc(var(--menu-width) + var(--content-width)), calc(98% - var(--toc-min-width)));
    width: calc(98% - var(--menu-width) - var(--content-width));
    min-width: var(--toc-min-width);
    font-size: 0.8em;
    border-radius: 0.1em;
    border: solid 1px lightgray;
    background: inherit;
    padding-right: 10px;
    transition: all 0.2s ease-out;
  }
  #TableOfContents-sidebar > ul:before {
    content: "Table of contents";
    font-weight: bolder;
  }
  #TableOfContents-sidebar  h2 {
    background: inherit;
    text-align: inherit;
    border-bottom: 1px #eee solid;
    padding: 10px;
  }
  #TableOfContents-sidebar  ul {
    list-style-type: none;
  }
  #TableOfContents-sidebar ul li,#TableOfContents-sidebar summary {
    padding-top: 0;
    font-weight: normal;
    border-bottom: dashed 1px lightgray;
  }
  #TableOfContents-sidebar  li > ul {
    padding-left: 1em;
  }
  #TableOfContents-sidebar  details > ul {
    padding-left: 2em;
  }
  #TableOfContents-sidebar summary:hover {
    cursor: pointer;
    background-color: #EFEFEF;
  }

  /* break shortcode */
  #shortcodes-page-break {
    border-top: 1px dashed #ccc;
    break-before: page;
  }
}
#accordion-btn-check {
  display: none;
}
#right-accordion-btn-check {
  display: none;
}
#pagetoc-accordion-btn-check, .pagetoc-accordion-btn {
  display: none;
}

@media screen and (max-width: 1500px) {
  /* -------- */
  /* pagetoc  */
  /* -------- */
  #TableOfContents-sidebar {
    display: block;
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    transition: all 0.2s;
  }
  .right-accordion-btn {
    display: none;
  }
  .pagetoc-accordion-btn {
    color: #fafafa;
    background: var(--theme-color);
    display: block;
    margin-bottom: 1px;
    padding: 10px;
  }
  .pagetoc-accordion-btn:hover {
    background-color: #555;
    cursor: pointer;
  }
  #pagetoc-accordion-btn-check:checked ~ #TableOfContents-sidebar {
    max-height: 400px;
    border: solid 1px lightgray;
  }
}

/* 900px - 1500px */
@media screen and (max-width: 1500px) and (min-width: 900px) {
  #content {
    max-width: var(--content-width);
  }
  #accordion-btn-check:checked ~ #content {
    max-width: calc(var(--content-width) + var(--menu-width));
  }
}

/* ----------------------------- */
/* -900px                        */
/* ----------------------------- */
@media screen and (max-width: 900px) {
  /* content relocation */
  #content {
    padding: 20px 15px;
    margin-left: 0px;
    max-width: var(--content-width);
  }
  #menu {
    height: 0%;
    width: 0%;
  }
  .accordion-btn {
    display: none;
  }

  /* --------------- */
  /* humburger buton */
  /* --------------- */
  .humburger-btn {
    position: fixed;
    top: 5px;
    right: 15px;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: var(--theme-color);
  }
  .humburger-btn span,
  .humburger-btn span:before,
  .humburger-btn span:after {
    content: "";
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
  }
  .humburger-btn span:before {
    bottom: 8px;
  }
  .humburger-btn span:after {
    top: 8px;
  }

  /* humburger buton check */
  #humburger-btn-check:checked ~ .humburger-btn span {
    background-color: rgba(255, 255, 255, 0);
  }
  #humburger-btn-check:checked ~ .humburger-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #humburger-btn-check:checked ~ .humburger-btn span::after {
    top: 0;
    transform: rotate(-45deg);
  }
  #humburger-btn-check:checked ~ .menu-content {
    left: 0;
  }

  /* humberger menu contents */
  .menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    padding: 10px 10px 0;
    top: 0;
    left: 100%;
    z-index: 80;
    transition: all 0.5s;
    background-color: var(--theme-color);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 1.2rem;
  }
  .menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    box-sizing: border-box;
    color: #ffffff;
    text-decoration: none;
    padding: 5px 15px 5px 0;
    position: relative;
    border-bottom: dashed 1px gray;
  }
}

#humburger-btn-check {
  display: none;
}