/* number */
:root{
  --number-lineheight:1.7;
  --number-lineheight-title:1.5;
}

/* size */
:root{
  --size-font-p:1.15rem;
  --size-font-h1:2.5rem;
  --size-line-thick:.5rem;
  --size-lineheight-1:calc(var(--number-lineheight) * 1em);
  --size-lineheight-1half:calc(var(--size-lineheight-1) * 1.5);
  --size-lineheight-1-fix: calc(var(--size-font-p) * var(--number-lineheight));
  --size-lineheight-1half-fix: calc(var(--size-lineheight-1-fix) * 1.5);
  --size-linespace:calc((var(--size-lineheight-1) - 1em) / 2);
  --size-linespace-half:calc(var(--size-linespace) / 2);
  --size-maxwidth:50rem;
}

/* colors */
:root{
  --color-theme-static:#ffe7ee;
  --color-theme-double-static:#ffd1db;
  --color-theme-triple-static:#ffb7c7;
}
body:not([data-theme="dark"]){
  --color-background:white;
  --color-font:black;
  --color-theme-change:var(--color-theme-static);
  --color-theme-double-change:var(--color-theme-double-static);
  --color-theme-triple-change:var(--color-theme-triple-static);
  --color-gray-2:#cccccc;
  --color-gray-5:#808080;
  --color-whitetogray:white;
  --color-themetobackground:#ffe7ee;
  --color-whitebutton-hover:white;
  --color-themetogray-c:#ffe7ee;
  --color-themetogray-7:#ffe7ee;
}
body[data-theme="dark"]{
  --color-background:#1a1a1a;
  --color-font:#ddd;
  --color-theme-change:#404040;
  --color-theme-double-change:#777777;
  --color-theme-triple-change:#9e9e9e;
  --color-gray-2:#333333;
  --color-gray-5:#a0a0a0;
  --color-whitetogray:#333333;
  --color-themetobackground:var(--color-background);
  --color-whitebutton-hover:#cccccc;
  --color-themetogray-c:#cccccc;
  --color-themetogray-7:#777777;
}

/* fonts */
:root{
  --font-body: 'sanserif-body',sanserif;
  --font-title: 'sanserif-title',sanserif;
  --font-monospace: 'monospace',monospace;
}

/* preset */
:root{
  --preset-boxshadow-underline-2:inset 0 -.2rem 0;
  --preset-boxshadow-underline-7:inset 0 -.7rem 0;
}

/* all */
body *:not(.no-deco){box-sizing:border-box}

/* nav */
nav:not(.no-deco){margin:0;padding:0;}

/* scroll margin */
body *{scroll-margin-top:4rem}

/* placeholder */
.placeholder{
  text-align:center;
  font-size:calc(var(--size-font-p) * 1.5);
  margin:auto;height:fit-content;width:fit-content;
}

/* anchor */
a:not(.no-deco){color:var(--color-font);cursor:pointer;text-decoration:none;}
.highlight,a:not(.no-deco,.no-deco-a a,.footnote .n,.footnote .n *,h1.post a,h2>a,h3>a,h4>a,h5>a,h6>a,.badge,a.image, figure.image>a,.tags a,.panel li a,.display a){
  position:relative;
  padding-bottom:var(--size-linespace-half);
  box-shadow:var(--preset-boxshadow-underline-2) var(--variable-anchor-underlinecolor,var(--color-theme-change));
}
.index a:not(:hover),.no-underline:not(:hover),.no-underline a:not(:hover){--variable-anchor-underlinecolor:var(--color-background)}
.card a:not(:hover),.footnote.t a:not(.n):not(:hover){--variable-anchor-underlinecolor:var(--color-theme-double-change)}

/* mark */
mark:not(.no-deco){
  background:unset;color:var(--color-font);
  box-shadow:var(--preset-boxshadow-underline-7) var(--color-theme-change);padding-bottom:var(--size-linespace-half);
}

/* frame*/
body:not(.no-deco){
  font-family:var(--font-body);
  color:var(--color-font);font-size:1rem;
  color:var(--color-font);
  background-color:var(--color-background);
  margin:0;
  min-width:15rem;
  padding-bottom:1rem;
}
h1:not(.no-deco){
  margin:0;padding:.25em 1em;width:100%;
  background-color:var(--color-theme-change);
  font-size:var(--size-font-h1);
  word-break:keep-all;
  font-family:var(--font-title);font-weight:100;
}
h1.logo{text-align:center;}
a.logo{cursor:pointer;}
h1.logo>:first-child{width:5rem;height:auto;vertical-align:middle;}
h1.logo svg>*{fill:var(--color-theme-change)}
h1.logo svg{background-color:var(--color-font)}

/* monospace */
.monospace,pre:not(.no-deco),code:not(.no-deco){
  font-family:var(--font-monospace);
  letter-spacing:0;
  overflow-wrap:break-word;white-space:preserve;
}

/* post title */
h1.post{text-align:center}
a.post{cursor:pointer;}

/* neck */
.neck{
  width:100%;
  margin:1.5rem auto;
  font-family:var(--font-title);
}
.neck .flex{
  width:100%;margin:auto;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.neck .badge{
  padding:.25em;
  font-size:2rem;
  cursor:pointer;
}
.neck .t{height:calc(1em * var(--number-lineheight-title))}
.neck .date{
  font-size:1rem;
  color:var(--color-gray-5);
  text-align:center;
}

/* main */
main:not(.no-deco){
  font-size:var(--size-font-p);line-height:var(--number-lineheight);word-break:keep-all;letter-spacing:-.02em;word-spacing:.1em;
  width:100%;
  margin:3rem auto;
}

/* container */
.widthlimit{
  width:100%;padding:1.5rem;
  max-width:var(--size-maxwidth);
  margin:auto;
}

/* bottom */
.tags{
  font-size:calc(var(--size-font-p) * 1.1);
  display:flex;flex-wrap:wrap;
  column-gap:.75em;
}
.tags li a{word-break:keep-all;font-family:var(--font-title);font-weight:200;cursor:pointer;}
.tags li::before{
  content:'#';color:var(--color-theme-double-change);
  display:inline;
  margin-right:.25em;
  font-family:var(--font-title);font-weight:700;
}
.tags li{display:inline}
.tags.current{padding:1rem}
.tags.all{
  padding:0 1.5em;
  width:100%;
  max-width:30em;
  margin:1.5rem auto;
}
.comments{min-height:16rem}

/* upbar */
#upbar-search-bar::placeholder{
  font-size:1rem;
  color:var(--color-font);
}
#upbar{
  width:100%;height:3.5rem;
  position:fixed;top:0;left:0;right:0;
  z-index:9999;
  background-color:var(--color-themetobackground);
  display:box;
  vertical-align:middle;
  padding:.25rem 0;
}
#upbar-search-bar{
  position:relative;float:right;padding:0 .5rem;margin:.25rem .5rem .25rem 0;
  width:30rem;max-width:calc(100% - 10rem);height:2.5rem;border:0;
  font-size:1rem;
  background-color:var(--color-whitetogray);color:var(--color-font);
  outline:none;
}
#upbar-search-button{
  background-color:var(--color-whitetogray);
  width:2.5rem;height:2.5rem; border:0;margin:.25rem .5rem .25rem 0;
  float:right;position:relative;
  font-size:1.56rem;color:var(--color-themetogray-c);
  text-align:center;
  box-shadow:none;
}
#upbar-move-button{position:relative;font-size:0;float:left;margin:.25rem 0 .25rem .5rem;}
@-moz-document url-prefix(){#upbar-move-button{top:-.12rem;}}
#upbar-move-button-up,#upbar-move-button-down,#upbar-share-button{
  padding:0;
  background-color:transparent;box-shadow:none;border:none;
}
#upbar-move-button svg{height:1rem;width:2.5rem;}
#upbar-move-button button{width:2.5rem;height:1rem;display:block;}
#upbar-move-button-down{margin-top:.5rem;}
#upbar-share-button svg{height:2.5rem;width:2.5rem;}
#upbar-share-button{
  float:left;margin:.25rem 0 .25rem .5rem;width:2.5rem;height:2.5rem;
  position:relative;
}
#upbar-move-button svg{fill:var(--color-whitebutton-hover)}
#upbar-share-button svg{stroke:var(--color-whitebutton-hover)}
#upbar-move-button button:hover svg{fill:var(--color-theme-double-change)}
#upbar-share-button:hover svg{stroke:var(--color-theme-double-change)}
#upbar-search-button:hover{background-color:var(--color-theme-double-change);color:var(--color-whitebutton-hover)}

/* noti */
.noti{
  position:absolute;
  opacity:0;
}

/* footer */
.footer{height:5rem;padding:1rem;display:flex;justify-content:center;flex-wrap:wrap;row-gap:1rem;}
.footer>*{vertical-align:middle;margin:auto .5rem;height:3.5rem;margin:auto .5rem;}
.footer .button.i{width:3.5rem;}

/* feed button */
#feed-button>svg{width:60%;height:60%;margin:20% auto;display:block;fill:var(--color-font);}

/* theme button */
#theme-button>svg{display:none;}
body:not([data-theme="dark"]) #theme-button-s,body[data-theme="dark"] #theme-button:hover #theme-button-s,
body[data-theme="dark"] #theme-button-m,body:not([data-theme="dark"]) #theme-button:hover #theme-button-m{
  display:block;
}
body[data-theme="dark"] #theme-button:hover #theme-button-m,body:not([data-theme="dark"]) #theme-button:hover #theme-button-s{
  display:none;
}
body:not([data-theme="dark"]) #theme-button,body[data-theme="dark"] #theme-button:hover{background-color:var(--color-theme-static);}
#theme-button-s{margin:auto;width:2.5rem;height:2.5rem;fill:black;stroke-width:0;}
body[data-theme="dark"] #theme-button-s,body:not([data-theme="dark"]) #theme-button:hover #theme-button-s{display:none;}
body[data-theme="dark"] #theme-button,body:not([data-theme="dark"]) #theme-button:hover{background-color:#333333;}
#theme-button-m{margin:auto;width:2.3rem;height:2.3rem;stroke-width:0;fill:#ddd;}

/* language button */
.lang-select,.lang-select>select{background-color:var(--color-theme-change);cursor:pointer;}
.lang-select{
  padding:0;width:fit-content;
  position:relative;
}
.lang-select>select{
  padding:1rem .5rem 1rem 2.5rem;
  font-size:1rem;
  border:none;
  font-family:var(--font-body);color:var(--color-font);
  height:100%;
}
.lang-select>span{
  font-size:1.2rem;
  position:absolute;
  right:5.2rem;top:.95rem;
  -moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;
}
.lang-select>select:hover,.lang-select:hover{background-color:var(--color-theme-double-change)}

/* dfn */
dfn:not(.no-deco){font-style:unset;}

/* heading */
h2:not(.no-deco),h3:not(.no-deco),h4:not(.no-deco),h5:not(.no-deco),h6:not(.no-deco){
  letter-spacing:-.02em;word-spacing:.2em;line-height:1.2;
  overflow-wrap:break-word;
  margin-bottom:var(--size-lineheight-1-fix);
  font-family:var(--font-title);
  text-shadow:.05em 0 var(--color-theme-change);
}
h2:not(.no-deco){font-size:calc(var(--size-font-h1) * 1.5);font-weight:100;margin-top:var(--size-lineheight-1);}
h3:not(.no-deco){font-size:calc(var(--size-font-h1) * 1);font-weight:100;margin-top:var(--size-lineheight-1);}
h4:not(.no-deco){font-size:calc(var(--size-font-h1) * .75);font-weight:200;margin-top:var(--size-lineheight-1-fix);}
h5:not(.no-deco){font-size:calc(var(--size-font-h1) * .5);font-weight:200;margin-top:var(--size-lineheight-1-fix);}
h6:not(.no-deco){font-size:clac(var(--size-font-h1) * .25);font-weight:200;margin-top:var(--size-lineheight-1-fix);}
h2+h3:not(.no-deco),h3+h4:not(.no-deco),h4+h5:not(.no-deco),h5+h6:not(.no-deco){margin-top:0;}

/* button */
.button{
  font-family:var(--font-title);
  border:unset;
  padding:.1em .5em;background-color:var(--color-theme-change);
}
.button.i{
  font-size:0;
  padding:0;
  border-radius:30%;
}

/* image */
.image,.image:not(img) img{width:auto;height:auto;max-width:100%;}
.image{margin-top:var(--size-lineheight-1);margin-bottom:var(--size-lineheight-1);}
.image:not(.center){margin:var(--size-lineheight-1) .5em}
.image>*{max-width:100%}
.image.right{float:right;margin:0 0 .5em 1em}
figure.image{display:inline-grid;align-items:center;}
figure.image img:not(figcaption *){
  grid-column:1/2;grid-row:1/2;
  margin:0 auto;
}
figure.image figcaption{
  grid-column:1/2;grid-row:2/3;
  font-size:calc(var(--size-font-p) * .8);}

/* icon */
.icon{height:1.5em;width:auto;border:0px;vertical-align:bottom;display:inline;}

/* symbol */
.symbol{
  font-size:1.25em;
  -moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;
}

/* table */
.table-nospace{border-collapse:collapse;border-spacing:0;border-style:none;padding:0;}
.table-nospace td ,.table-nospace tr{border-spacing:0;border-style:none;padding:0;margin:0;}
.table-yesspace td{padding:.5em;}
.table-yesspace{margin:.5em;}
table.innerline td{border:.05em solid var(--color-gray-2)}
table.innerline{border-collapse:collapse;border:hidden;}

/* footnote */
.footnote .n{
  text-decoration: none;
  color:var(--color-gray-5);
  margin-right:.1em;
}
.footnote.t .n{
  vertical-align: super;
  font-size:.8em;letter-spacing:-.1em;
}
.footnote.b .n{font-size:1em;max-width:10vw;word-break:keep-all;overflow-wrap:break-word;}
.footnote.t{display:inline;position:relative;}
.footnote.b{
  padding-top:.3rem;padding-left:.6rem;
  margin-top:var(--size-lineheight-1-fix);
  border-top:.2rem solid var(--color-theme-change);
}
.footnote.b>*{display:flex}
.footnote.b:not(.n){font-size:calc(var(--size-font-p) * 0.8);}
.footnote.t>:not(.n){
  display:none;
  z-index:3;position:absolute;
}
.footnote.b>*>:not(.n){float:left;margin-left:.7em;max-width:calc(100% - 2em);}
.footnote.t .bar{position:absolute}

/* script */
.script:not(details>.script){margin-top:var(--size-lineheight-1);margin-bottom:var(--size-lineheight-1);}
.script{padding:0 1em;}

/* list */
ul:not(.no-deco,li>ul,.index summary+ul),ol:not(.no-deco,li>ol,.index summary+ol),dl:not(.no-deco){margin-top:var(--size-lineheight-1);margin-bottom:var(--size-lineheight-1);}
li:not(.no-deco){white-space:normal;overflow-wrap:break-word;}
ol:not(.no-deco)>li::marker{font-weight:bold;}
ol.index,.index ol{counter-reset:index;list-style-type:none;}
ol.index li{counter-increment:index;}
ol.index li::before{
  content:counters(index,".") ".";
  color:var(--color-theme-double-change);font-weight:bold;white-space:nowrap;
  padding-right:.25em;
}
ol:not(.no-deco){padding-left:1em}
ul:not(.no-deco){padding-left:.75em;list-style-type:square;}
li:not(.no-deco)::marker{color:var(--color-theme-double-change)}
ul.horizontal,ol.horizontal{
  display:flex;justify-content:center;flex-wrap:wrap;
  padding-left:1.5em;padding-right:1em;column-gap:2em;
}
li .flex{display:flex;flex-wrap:wrap;}
li .flex>ol,li .flex>ul{margin-left:.5em}
li .flex *{min-width:1px}
li .flex>*{margin-top:0;margin-bottom:0;}
dt:not(.no-deco):not(dt+dt){float:left;clear:left;}
dd:not(.no-deco){clear:left}
dt+dt:not(.no-deco)::before{content:"/";margin:0 1em;color:var(--color-gray-2);}

/* card */
.card{
  -moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;
  margin:var(--size-lineheight-1) auto;
  padding:1em;
  background-color:var(--color-theme-change);
  width:100%;max-width:calc(100% - 2rem);
  word-break:keep-all;
}
.card .no-deco{font-size:inherit;font-weight:inherit;margin:0;padding:0;text-decoration:unset;}

/* panel */
.panel ul{
  padding:0;list-style-type:none;margin:0;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:flex-start;
  align-content:flex-start;
  gap:var(--gap,0);
}
.panel li{
  width:calc((100% - (var(--columns,1) - 1) * var(--gap,0)) / var(--columns,1));
  aspect-ratio:var(--aspectratio,1/1);
  overflow:hidden;
  -moz-user-select:none;-webkit-user-select:none;-ms-user-selct:none;user-select:none;
}
.panel li>:first-child{
  display:block;
  overflow:hidden;
  width:100%; height:100%;
}
.panel li .i,.panel li .t{width:100%;height:100%;}
.panel li .i img,.panel li .i svg{
  width:100%;height:100%;
  object-fit:cover;
  min-width:100%;min-height:100%;
}
.panel li .t{display:flex;align-items:center;}
.panel li .t>:first-child{height:fit-content;max-height:100%;width:inherit;}
.panel li .t>:first-child>:first-child{
  width:inherit;
  overflow:hidden;
  word-wrap:break-word;
}

/* display */
.display>*{
  display:block;position:relative;
  margin:0 auto;
  max-width:100%;
}
.display{
  width:auto;
  display:block;
}
.display:not(details>.display){margin:var(--size-lineheight-1half)  0}
.display.r-169-v>*{aspect-ratio:9/16;max-width:25rem;}
.display.r-169-h>*{aspect-ratio:16/9;}
.display.poster img{width:20em}
.display>a,.display picture{width:fit-content;height:fit-content;}
.display img,.display iframe{width:100%;height:auto;}

/* hr */
hr:not(.no-deco){border:none}
hr.dot,hr.line{margin:var(--size-lineheight-1) auto;background-color:var(--color-theme-change);}
hr.dot{aspect-ratio:1/1;width:auto;height:.5rem;background-color:var(--color-theme-double-change);border-radius:50%;}
hr.line{height:.2rem;width:80%;}
hr.linespace{height:0;margin:.35em auto;}

/* badge */
.badge{
  height:auto;width:auto;
  border-radius:2.5rem;
}

/* details */
details:not(.no-deco){
  margin:var(--size-lineheight-1) 0;overflow:hidden;
}
details:not(.no-deco)>summary{
  padding:0 .7em;
  width:100%;
  color:var(--color-font);
}

/* mask */
.mask{background-color:var(--maskcolor,var(--color-font))}
.mask>*{visibility:hidden}

/* center */
.center:not(table,.flex){display:block}
.center{margin-left:auto;margin-right:auto;}
a.center,div.center{width:fit-content}

/* right */
.right+.right{clear:right}

/* group */
.group{width:max-content;max-width:100%;height:auto;white-space:nowrap}
.group>*{max-height:99%;}

/* no margin */
main>:first-child,h2.first{margin-top:0}

/* side border */
details:not(.no-deco),.neck,.display,.script, dl div{
  border-left:var(--size-line-thick) solid var(--color-theme-change);border-right:var(--size-line-thick) solid var(--color-theme-change);
}

/* mobile */
@media screen and (max-width:15rem){
  body.with-upbar{padding-top:0;}
  #upbar,.upbar-gap{display:none;}
}
@media screen and (max-width:20rem){
  #upbar-search-button{display:none;}
  #upbar-search-bar{max-width:calc(100% - 7rem);}
}
@media screen and (max-width:30rem){
  :root{--size-font-p:1rem}
  :root{--size-font-h1:2rem}
  :root{--number-lineheight:1.5}
}
@media (max-width:767px){
}
@media (max-width:50rem){
}