html { line-height: 1.15; -webkit-text-size-adjust: 100% } body { margin: 0 } main { display: block } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } img { border-style: none } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0 } [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 0.0625rem dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0 } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -0.125rem } [type=search]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } template { display: none } [hidden] { display: none } *, ::before, ::after { box-sizing: border-box; } :root { --base-background-color: rgb(253, 253, 253); --base-text-color: rgb(91, 91, 91); --base-border-color: rgb(229 231 235); --nav-background-color: rgba(255, 255, 255, 0.75); --sensitive-modal-background-color: rgba(255, 255, 255, 0.5); --blog-nav-text-color: rgb(255, 255, 255); } :root { --link-text-color: rgb(209, 33, 87); --alert-border: rgb(209, 33, 87); --blockquote-alert-color: rgb(209, 33, 87); --nav-active-color: rgb(209, 33, 87); --nav-hover-color: rgba(209, 33, 87, 0.5); --blog-nav-background-color: rgb(209, 33, 87); --header-border: rgba(209, 33, 86, 0.5); } [class~="themas-pink"] { --link-text-color: rgb(209, 33, 87); --alert-border: rgb(209, 33, 87); --blockquote-alert-color: rgb(209, 33, 87); --nav-active-color: rgb(209, 33, 87); --nav-hover-color: rgba(209, 33, 87, 0.5); --blog-nav-background-color: rgb(209, 33, 87); --header-border: rgba(209, 33, 86, 0.5); } [class~="themas-purple"] { --link-text-color: rgb(161, 91, 247); --alert-border: rgb(153, 77, 247); --blockquote-alert-color: rgb(161, 91, 247); --nav-active-color: rgb(166, 101, 247); --nav-hover-color: rgba(166, 101, 247, 0.5); --blog-nav-background-color: rgb(161, 91, 247); --header-border: rgba(161, 91, 247, 0.5); } [class~="themas-green"] { --link-text-color: rgb(82, 159, 112); --alert-border: rgb(94, 183, 129); --blockquote-alert-color: rgb(94, 183, 129); --nav-active-color: rgb(94, 183, 129); --nav-hover-color: rgba(94, 183, 129, 0.5); --blog-nav-background-color: rgb(94, 183, 129); --header-border: rgba(94, 183, 129, 0.5); } [class~="themas-lightblue"] { --link-text-color: rgb(91, 167, 247); --alert-border: rgb(86, 158, 234); --blockquote-alert-color: rgb(91, 167, 247); --nav-active-color: rgb(91, 167, 247); --nav-hover-color: rgba(91, 166, 247, 0.5); --blog-nav-background-color: rgb(91, 167, 247); --header-border: rgba(91, 167, 247, 0.5); } @media (prefers-color-scheme: dark) { :root { --base-background-color: rgb(24, 24, 26); --base-text-color: rgb(255, 255, 255); --base-border-color: rgb(85, 85, 92); --nav-background-color: rgba(24, 24, 26, 0.5); --sensitive-modal-background-color: rgba(24, 24, 26, 0.5); --blog-nav-text-color: rgb(255, 255, 255); } } html { font-family: var(--font-family); line-height: var(--line-height); } html, body { background-color: var(--base-background-color); color: var(--base-text-color); } [class~="hidden"] { display: none !important; } [class~="block"] { display: block; } a { color: var(--link-text-color); text-decoration: none; border: solid 0.0625rem transparent; } a:focus { border: dashed 0.0625rem var(--link-text-color); } *, ::after, ::before { font-size: 0.95rem; overscroll-behavior: none; } h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; font-weight: normal; margin: 0; } h1 { font-size: 2.5rem; line-height: 3rem; margin: 2.5rem 0; } h2 { font-size: 1.5rem; line-height: 2rem; margin: 1.25rem 0; } h3 { font-size: 1.5rem; line-height: 2rem; margin: 1.25rem 0; } p { line-height: 1.25rem; margin: 1.25rem 0; } hr { margin: 1.75rem 0; padding: 0; border: none; border-top: solid 0.0625rem var(--alert-border); } ul { margin: 0; padding: 0; list-style-position: inside; } dl, dt, dd { margin: 0; padding: 0; } pre { margin: 0; } img { width: 31.25rem; } blockquote { position: relative; margin: 0; padding: 0.25rem; border: solid 0.125rem var(--blockquote-alert-color); border-width: 0 0 0 0.125rem; } [dir="rtl"] blockquote { border-width: 0 0.125rem 0 0; } [class~="alert"] { border: solid 0.0625rem var(--blockquote-alert-color); border-radius: 0.125rem; margin: 1rem 0; padding: 0.5rem; } [class~="dot"]::after { content: "・"; font-family: serif; opacity: 0.85; } [class~="content-root"] { position: fixed; top: 0; left: 0; bottom: 0; right: 0; inset: 0; width: 100svw; height: 100svh; overflow: auto; } [class~="max-display-contents"] { max-width: 65rem; margin: 0 auto; } @media (max-width: 70rem) { [class~="max-display-contents"] { width: calc(100% - 2rem); margin: 0 1rem; } } [class~="min-height-contents"] { min-height: 25rem; } [class~="main-nav"] { z-index: 999; position: sticky; top: 0; width: 100%; background-color: var(--nav-background-color); backdrop-filter: blur(1.5rem); border: solid 0.0625rem var(--base-border-color); border-width: 0.0625rem 0 0.0625rem 0; border-color: transparent transparent var(--base-border-color) transparent } [class~="main-nav-flex"] { display: flex; justify-self: start; } [class~="main-nav-item"] { width: 100%; text-transform: lowercase; } [class~="main-nav-item"] a { border: none !important; } @media (max-width: 65rem) { [class~="main-nav-item-sub"] { display: none; } } [class~="main-nav-item-flex"] { position: relative; display: flex; gap: 0.25rem; flex-direction: column; align-items: center; max-width: 4.5rem; padding: 0.85rem 0.5rem; margin: auto; } [class~="main-nav-item-active"]::before { content: ""; position: absolute; top: -0.0625rem; width: 100%; height: 0.0625rem; background-color: var(--nav-active-color); } [class~="main-nav-item-flex"] ::before { font-size: 1.35rem; } [class~="main-nav-item-flex"] span { font-size: 0.85rem; } @media (max-width: 30rem) { [class~="main-nav-item-flex"] ::before { font-size: 1.15rem; } [class~="main-nav-item-flex"] span { font-size: 0.7rem; } } [class~="contents-body"] { margin: 0 auto; } @media (max-width: 45rem) { [class~="main-nav"] { position: fixed; top: auto; bottom: 0; border-width: 0.0625rem 0 0 0; border-color: var(--base-border-color) transparent transparent transparent } [class~="contents-body"] { margin: 0 auto 6.5rem auto; } } [class~="blog-post-items"] { display: grid; gap: 1rem; margin: 3rem 0; } @media (min-width: 30rem) { [class~="blog-post-items"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } [class~="blog-post-item"] { width: 100%; border: solid 0.0625rem var(--base-border-color); border-radius: 0.125rem; overflow: hidden; } [class~="blog-post-item"] a { border: none; } [class~="blog-post-item-image"] { width: 100%; } [class~="blog-post-item-about-box"] { margin: 1rem 0.525rem; } [class~="blog-post-item-about-title"] { font-size: 1.125rem; } [class~="blog-post-item-about-more"] { font-size: 0.89rem; } [class~="blog-contents-title-image-content"] { width: 100%; border-radius: 0.25rem; margin: 2rem 0; } [class~="blog-contents-title"] { margin: 0; } [class~="blog-contents-title-time"] { font-size: 1.25rem; margin: 1rem 0; } table { margin: 1rem 0; border: solid 0.0625rem var(--alert-border); border-collapse: collapse; } th, td { padding: 0.75rem; border: solid 0.0625rem var(--alert-border); text-align: left; } [class~="sensitive-modal"] { display: flex; z-index: 1000; position: fixed; top: 0; left: 0; bottom: 0; right: 0; inset: 0; width: 100%; height: 100svh; background-color: var(--sensitive-modal-background-color); backdrop-filter: blur(1.5rem); } [class~="sensitive-modal-contents"] { color: rgb(255, 255, 255); width: 40rem; height: max-content; margin: auto; background-color: rgb(209, 33, 87); border-radius: 0.125rem; padding: 1.125rem; box-shadow: rgba(0, 0, 0, 0.35) 0 0.3125rem 0.9375rem; } [class~="sensitive-modal-buttons"] { display: flex; gap: 0.525rem; } @media (max-width: 45rem) { [class~="sensitive-modal"] { display: block; } [class~="sensitive-modal-contents"] { width: calc(100% - 2rem); margin: 2rem 1rem; } } [class~="sensitive-modal-lite-button"] { color: rgb(255, 255, 255); border: solid 0.0625rem rgb(255, 255, 255); background-color: transparent; } [class~="sensitive-modal-content-button"] { color: rgb(209, 33, 87); background-color: rgb(255, 255, 255); } [class~="sensitive-modal-lite-button"], [class~="sensitive-modal-content-button"] { padding: 0.5rem 0.5rem; border-radius: 0.125rem; } [class~="header-image"] { display: flex; gap: 0.5rem; align-items: center; margin: 1.5rem 0; } [class~="header-image"]::before, [class~="header-image"]::after { content: ""; display: block; width: 100%; height: 0.125rem; border-radius: 0.25rem; background-color: var(--header-border); } [class~="header-image"]::before { width: 1.5rem; } @media (max-width: 30rem) { [class~="header-image"]::before { width: 100%; } } [class~="header-image-contents"] { width: 3rem; height: 3rem; border-radius: 0.125rem; } [class~="header-border"] { display: block; width: 100%; height: 0.125rem; border-radius: 0.25rem; margin: 2.5rem 0; background-color: var(--header-border); }