@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code&family=Noto+Sans+JP:wght@300..600&display=swap');
*{
    --lily:#f9f9f9;
    --charcoal:#303030;
    --cherry:#e55274;
    --clover:#93d040;
    --river:#52b2dd;
    --indigo:#3357d1;
    --violet:#a944c7;
    --fg:48,48,48;
    --bg:249,249,249;
}
@media(prefers-color-scheme:dark){*{
    --fg:249,249,249;
    --bg:48,48,48;
}}
@keyframes pageIn{
    from{opacity:0;}
    to{opacity:1;}
}
html{
    font-family:"Noto Sans JP",sans-serif;
    font-size:18px;
    letter-spacing:.03em;
}
body{
    color:rgb(var(--fg));
    background:rgb(var(--bg));
    margin:0 !important;
}
main{
    animation:pageIn .2s ease;
    overflow-wrap:break-word;
    margin-inline:auto;
    width:min(1000px,90vw);
}
footer{
    display:flex;
    align-items:center;
    justify-content:center;
    height:3rem;
    bottom:0;
    margin:0;
    text-align:center;
}
footer p{
    margin:0;
}
a{
    color:rgb(var(--fg));
    text-decoration:underline;
    text-decoration-thickness:0.05rem;
}
a:hover{
    opacity:.8;
    transition:.2s;
}
a:focus{
    outline:2px solid rgb(var(--fg));
    outline-offset:2px;
}
h1{
    font-family:"tt-commons-pro","Noto Sans JP",sans-serif;
    font-size:3rem;
    font-weight:300;
    text-align:center;
    margin-bottom:0;
}
h2{
    margin:1rem 0;
    font-size:2rem;
    font-weight:600;
}
h3{
    margin:1rem 0;
    font-size:1.5rem;
    font-weight:500;
}
h4{
    margin:1rem 0;
    font-size:1.25rem;
    font-weight:500;
}
figure{
    max-width:90%;
    margin:1rem auto;
    text-align:center;
}
img{
    border-radius:5px;
    max-width:100%;
    max-height:70vh;
    width:auto;
    height:auto;
}
iframe{
    border-radius:10px;
}
figcaption,cite{
    font-size:0.9em;
    font-weight:300;
    padding:0.2rem 0;
}
blockquote{
    border-left:0.5rem solid rgb(var(--fg));
    margin-left:0;
    margin-right:0;
    padding-left:1rem;
}
code{
    border-radius:10px;
    color:#ffffff;
    background:#605f52;
    font-family:"M PLUS 1 Code",monospace;
}
code span{
    display:block;
    position:absolute;
    width:fit-content;
    color:#ffffff;
    background:#707070;
    margin-left:-10px;
    margin-top:-10px;
    margin-bottom:-1rem;
    border-radius:10px 0 10px 0;
    padding:0.125rem 0.3rem;
}
pre{
    padding:10px;
    border-radius:10px;
    background:#605f52;
    overflow:scroll;
}
/* reduced motion対応 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* フォーカス可能な要素の共通スタイル */
button,
[role="button"],
.clickable {
    cursor: pointer;
}
button:focus,
[role="button"]:focus,
.clickable:focus {
    outline: 2px solid rgb(var(--fg));
    outline-offset: 2px;
}