/*:root{
--main:メインカラー;
--sub:サブカラー}
html{
--main-font:メインフォント}
body{
--bodybg:body背景色}
*::selection{
--selection-bg:選択の背景色;
--selection:文字色}
div.bodyarea{
--body-top:;
--body-bottom:;
--body-gap:}
div.wrapper{
--wrapper-gap:}
div.wrap{
--wrap-gap:}
a:not(:has(img)){
--link:文字色;
--link-weight:太さ;
--onlink:ホバー色}
*/
:root{
--common-main:var(--main,var(--orange));
--common-sub:var(--sub,var(--suborange));
--color-b:#353535;
--color-w:#abadb3;
--white:#fff;
--black:#000;
--rgb-b:0,0,0;
--rgb-w:255,255,255;
--orange:#ffa500;
--suborange:#ffbd20;
--xl:2rem;
--ll:calc(1rem + 0.7rem);
--large:calc(1rem + 0.4rem);
--med:calc(1rem + 0.2rem);
--small:calc(1rem - 0.2rem);
--ss:calc(1rem - 0.35rem);
--xs:calc(1rem - 0.45rem)}
@media(prefers-color-scheme:light){
:root{
--font:var(--color-b);
--bw:var(--white);
--rgb-bw:var(--rgb-w);
--bg:var(--slight);
--base:var(--white);
--common:var(--slight);
--dark:#c4c4c4;
--light:#d3d3d3;
--mlight:#e0e0e0;
--slight:#eee}
}
@media(prefers-color-scheme:dark){
:root{
--font:var(--color-w);
--bw:var(--black);
--rgb-bw:var(--rgb-b);
--bg:#1a1b20;
--base:#25262b;
--common:var(--base);
--dark:var(--light);
--light:#656571;
--mlight:#4b4b53;
--slight:#3e3f46}
}
html{
font-family:var(--main-font,sans-serif,system-ui,monospace);
line-height:1.6;
letter-spacing:0.1em;
color:var(--font);
height:100dvh;
width:100%;
@media(pointer:fine){
font-size:14px}
@media(pointer:coarse){
font-size:13px}
}
body{
background-color:var(--bodybg,var(--base));
font-size:1em;
overflow-wrap:anywhere;
word-break:normal;
line-break:strict;
display:flex;
flex-direction:column}
*::selection{
background-color:var(--selectionbg,var(--common-main));
color:var(--selection,var(--bw))}
*:focus{
outline:none}
*:focus-visible{
outline:none}
main{
width:95vw;
max-width:100%;
margin-left:auto;
margin-right:auto;
flex:1}
div.bodyarea{
margin-top:var(--body-top,3.5em);
margin-bottom:var(--body-bottom,8em);
display:flex;
justify-content:center;
&:has(>
:nth-child(2)){
width:100%;
align-items:center;
flex-flow:column;
row-gap:var(--body-gap,1.5em)}
}
div.wrapper:has(>
:nth-child(2)){
width:100%;
display:flex;
flex-direction:column;
row-gap:var(--wrapper-gap,1.5em)}
div.wrap:has(>
:nth-child(2)){
display:flex;
flex-direction:column;
row-gap:var(--wrap-gap,0.5em)}
:where(img){
max-width:100%;
height:auto;
color:transparent;
background-color:transparent}
a{
display:inline-block;
&[data-src]{
cursor:pointer}
&:not(:has(img)){
color:var(--link,inherit);
font-weight:var(--link-weight,normla);
@media(pointer:fine){
&:hover{
color:var(--onlink,var(--common-main))}
}
@media(pointer:coarse){
&:active{
color:var(--onlink,var(--common-main))}
}
}
}