:root {
    --brand-hue: 222;
    --brand-saturation: 100%;
    --brand-lightness: 40%;
    --brand1-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
    --brand2-light: hsl(calc(var(--brand-hue) + 100) 70% 40%);
    --text1-light: hsl(var(--brand-hue) 10% 17%);
    --text2-light: hsl(var(--brand-hue) 30% 30%);
    --text3-light: hsl(var(--brand-hue) 15% 45%);
    --surface1-light: hsl(var(--brand-hue) 80% 94%);
    --surface2-light: hsl(calc(var(--brand-hue) - 171) var(--brand-saturation) 99%);
    --surface3-light: hsl(calc(var(--brand-hue) - 200) 70% 95%);
    --surface4-light: hsl(var(--brand-hue) 20% 95%);
    --surface5-light: hsl(var(--brand-hue) 5% 97%);
    --surface-shadow1-light: hsl(var(--brand-hue) 10% 20%);
    --surface-shadow2-light: hsl(var(--brand-hue) 10% 75%);
    --measure: 50rem;
    --ratio: 1.7;
    --space-1: calc(var(--space0)/var(--ratio));
    --space-2: calc(var(--space0)/var(--ratio)/var(--ratio));
    --space-3: calc(var(--space0)/var(--ratio)/var(--ratio)/var(--ratio));
    --space-4: calc(var(--space0)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio));
    --space0: 1rem;
    --space1: calc(var(--space0)*var(--ratio));
    --space2: calc(var(--space0)*var(--ratio)*var(--ratio));
    --space3: calc(var(--space0)*var(--ratio)*var(--ratio)*var(--ratio));
    --space4: calc(var(--space0)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio));
    --space-side: calc(1rem + var(--space-1));
    background-color: var(--surface2-light);
    color: var(--text1-light);
    font-family: "メイリオ", "Helvetica Neue", sans-serif;
    line-height: var(--ratio);
    quotes: "『 " "』";
}

*,
*::before,
*::after {
    box-sizing:border-box
}

* {
    margin: 0;
    padding: 0;
    max-width: var(--measure);
}

* + * {
    margin-top: var(--space0);
}

body {
    display: flex;
    flex-direction: column;
    font-size: clamp(100%, 1rem + .1vw, 2vw);
    margin-top: var(--space-4);
}

body > * {
    width: clamp(16rem, 95vw, 85rem);
}

body {
    margin-block-end: 50vh;
}

html,
body,
figcaption,
summary {
    max-width: none;
}

header,
main,
footer {
    margin-inline: auto;
    min-width: 50%;
    padding: var(--space-1);
    padding-inline: var(--space-side);
}

:is(header, footer) nav {
    color: var(--text3-light);
    display: flex;
    gap: var(--space1);
    justify-content: space-between;
}

main {
    margin-block-start: 0;
    padding-block-start: 0;
}

ol > li:before {
    color: var(--text3-light);
    content: counter(count_ol) ".";
    counter-increment: count_ol;
    clear: left;
    float: left;
    font-size: 90%;
    margin-block-start: .1rem;
    margin-inline-start: -2.5rem;
    text-align: right;
    width: 2rem;
}

li {
    margin-inline-start:  1.5rem;
}

li + li {
    margin-block-start:  var(--space-3);
}

article > ol {
    counter-reset: count_ol;
    list-style: none;
}

article > ol > li:first-child {
    margin-block-start: var(--space0);
}

article > ol > li + li {
    margin-block-start: var(--space3);
}

article > ol ol {
    counter-reset: count_olol;
    list-style: none;
    padding-inline-start: .5rem;
    padding-block-end: .5rem;
}

article > ol ol li:before {
    color: var(--text1-light);
    counter-increment: count_olol;
    content: counter(count_olol) ".";
}

h1,
h2,
h3,
h4 {
    font-family: system-ui,-apple-system,"Segoe UI","Yu Gothic UI",sans-serif;
}

h1 + p,
h2 {
    color: var(--text2-light);
}

h1 {
    font-size: clamp(1.5rem, calc(1rem + .8vw), 2rem);
    font-weight: 400;
    margin-block-start: var(--space2);
}

h2 {
    font-size: clamp(1.2rem, calc(1rem + .4vw), 1.5rem);
    margin-block-start: var(--space4);
    padding-inline-start: 1rem;
    text-align: center;
}

h2 a {
    text-decoration: none;
}

.year,
.day {
    color: var(--text3-light);
    font-size: 62%;
    font-weight: 400;
}

h2 a[href^="#"] {
    color: transparent;
    font-size: 80%;
    text-decoration: none;
}

h2:hover a[href^="#"],
h2 a[href^="#"]:focus {
    color: var(--text3-light);
}

article:nth-of-type(1) h2 {
    margin-block-start: var(--space2);
}

h2 + ol {
    margin-block-start: var(--space2);
}

h3 {
    font-size: clamp(1.3125rem, calc(1rem + .5vw), 1.5625rem);
    margin-block-start: var(--space2);
}

h4 {
    font-size: clamp(1.1rem, calc(1rem + .2vw), 1.25rem);
    font-weight: 800;
    margin-block-start: var(--space1);
}

code,
kbd {
    background: var(--surface4-light);
    border: 1px solid var(--surface-shadow2-light);
    font-family: consolas;
    font-size: 95%;
    margin-inline: var(--space-2);
    padding: 0 var(--space-2);
}

figcaption {
    color: var(--text3-light);
    font-size: 80%;
    text-align: center;
}

hr {
    border: none;
    border-block-start: 1px solid var(--surface-shadow2-light);
    height: 0;
    margin: var(--space3) 0;
}

pre {
    margin-block: var(--space1);
}

pre code {
    background-color: var(--surface5-light);
    border: 1px solid var(--surface-shadow2-light);
    display: block;
    font-family: consolas, monospace;
    line-height: 1.5;
    max-width: 100%;
    overflow-x: auto;
    padding: var(--space1);
    page-break-inside: avoid;
    word-wrap: break-word;
}

ul {
    list-style: disc;
}

/*----------
  Inline
----------*/
a {
    color: var(--brand1-light);
}

a:active {
    filter: brightness(0.95);
}

a:visited {
    color: var(--brand2-light);
}

a:hover {
    background-color: var(--surface5-light);
    text-decoration: underline;
}

del {
    font-size: .9em;;
    color: #a0a0a0;
    background: #f5f5f5;
}

del:hover {
    color: #666;
    background-image: none;
    background-color: #eee;
    transition: all 0.2s ease;
    text-decoration: none;
}

del a {
    pointer-events: none;
    color: inherit;
    text-decoration: line-through;
    cursor: default;
}

abbr {
    cursor: help;
    padding: 0 3px;
}

abbr:hover {
    background-color: var(--surface-shadow2-light);
    color: white;
}

dfn {
    font-style: normal;
    margin: 0 4px;
    text-decoration: underline dotted;
}

em {
    font-style: normal;
    font-weight: 700;
}

i {
    font-style: normal
}

img,
iframe {
    border: 1px solid var(--surface-shadow2-light);
    display: block;
    height: auto;
    max-width: 100%;
}

iframe {
    aspect-ratio: 16/12;
}

ins {
    text-decoration: none;
}

ins::before,
ins::after {
    color: var(--text3-light);
    font-size: 80%;
    padding-inline: var(--space-1);
}

ins::before {
    content: "[追記開始]";
}

ins::after {
    content: "[追記終了]";
}

rt {
    margin-block-start: 0;
    ruby-position: over;
}

/*----------
  .breadclumbs
----------*/
.breadclumbs ul {
    align-items: center;
    display: flex;
    gap: var(--space0);
    list-style: none;
    margin-block-start: 0;
}

.breadclumbs ul > li {
    align-items: center;
    display: flex;
    gap: var(--space0);
    margin-block-start: 0;
    margin-inline-start: 0;
}

.breadclumbs ul > li + li::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .8;
}

.breadclumbs a {
    color: currentColor;
}

/*----------
  .blockquote
----------*/
.blockquote {
    background-color: var(--surface3-light);
    border-inline-start: 5px solid var(--surface-shadow1-light);
    font-size: 95%;
    margin-block: var(--space1);
    padding: var(--space1) var(--space2);
}

.blockquote blockquote {
    border: none;
    margin: 0;
    padding: 0;
}

.blockquote blockquote :first-child {
    margin-block-start: 0;
}

.blockquote blockquote p {
    margin: 1rem 0 0;
}

.blockquote cite::before {
    color: var(--text2-light);
    content: "引用元 - ";
}

.blockquote cite {
    display: inline-block;
    font-style: normal;
    max-width: 70%;
}

.blockquote figcaption {
    text-align: right;
}

.blockquote h3 {
    font-size: 100%;
}

.blockquote li {
    margin-block-end: 1rem;
}

.blockquote ol li::before {
    color: var(--text1-light);
}

/*----------
  Details
----------*/
details {
    border-block: 1px solid var(--surface-shadow2-light);
    padding: var(--space0);
}

details,
details + * {
    margin-block-start: var(--space1);
}

details summary {
    color: var(--brand1-light);
    cursor: pointer;
    list-style: none;
    padding-inline-end: var(--space1);
    position: relative;
}

details summary::before {
    background: var(--surface1-light);
    border-radius: 50%;
    content: "";
    display: block;
    height: 28px;
    inset-inline-end: 0;
    position: absolute;
    top: 0;
    width: 28px;
}

details summary:hover::before {
    outline:1px solid currentColor;
}

details summary::after {
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    content: "";
    display: block;
    height: 8px;
    inset-block-start: 7px;
    inset-inline-end: 10px;
    position: absolute;
    top: 8px;
    transform: rotate(45deg);
    width: 8px;
}

details[open] summary::after {
    inset-block-start: 11px;
    transform: rotate(-135deg);
}

details summary + * {
    margin-block-start: var(--space1);
}

details > :not(summary) {
    font-size: 93%;
}

details > :last-child {
    padding-block-end: var(--space0);
}

/*----------
  .draft
----------*/
.draft,
.draft + * {
    display: none;
}

.draft + * + h2 {
    margin-block-start: var(--space2);
}

/*----------
  Table
----------*/
table {
    border-color: inherit;
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
}

th,
td {
    border-block-end: 1px solid var(--surface-shadow2-light);
    color: var(--text2-light);
    font-size: 90%;
    font-weight: 400;
    padding: .2rem 1rem;
    text-align: left;
    text-align: start;
}

th {
    border-width: 3px;
}

/*----------
  ruby
----------*/

ruby {
    ruby-position: over;
    ruby-align: center;
}

rt {
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1;
    color: inherit;
}

/*----------
  .english
----------*/
.english {
    font-family: serif;
    font-size: 140%;
    line-height: 1.4;
}

/*----------
  .box
----------*/
.box {
    color: var(--text2-light);
    background-color: var(--surface1-light);
    padding: var(--space1);
}

.box * {
    color: inherit;
}

.box.invert {
    color: var(--text1-light);
    background-color: var(--surface2-light);
}

/*----------
  .front_cover
----------*/
.front_cover {
    max-width: 20ch;
}

/*----------
  .blockquote.front_cover
----------*/
.blockquote.front_cover {
    background-color: var(--surface2-light);
    border-inline-start: 0;
    padding: 0;
}

/*----------
  Outline on Focus
  via https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/
----------*/
:is(a, button, input, textarea, summary) {
    --outline-size: max(2px, 0.08em);
    --outline-style: solid;
    --outline-color: currentColor;
}

:is(a, button, input, textarea, summary):focus {
    outline: var(--outline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset, var(--outline-size));
}

:is(a, button, input, textarea, summary):focus-visible {
    outline: var(--outline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset, var(--outline-size));
}

:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
    outline: none;
}


/*----------
  .featured_heading
----------*/
.featured_heading li {
    list-style: none;
    margin-inline-start: 0;
}

.featured_heading li li {
    margin-inline-start: 4rem;
}


/*----------
  data-ai-note
----------*/

[data-ai-note]::after {
  content: "この文章の構成と整理にはAIを活用しています。";
  background: #eaeaea;
  color: #666;
  border-radius: 3px;
  display: inline-block;
  font-size: 0.8em;
  margin: var(--space1) 0 0 0;
  padding: 2px 6px;
  vertical-align: super;
}


/*----------
  zenodo-badge
----------*/
.zenodo-badge {
    display: inline;
    border: none;
    vertical-align: middle;
}
/*----------
    github-icon
----------*/
.github-icon {
    display: inline;
    border: none;
    vertical-align: middle;
    padding-inline-end: 3px;;
}