:root{color-scheme:light;--paper:#fff;--ink:#20252c;--muted:#555f6b;--link:#1556a0;--line:#d7dde5;--panel:#f3f6fa}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:1.0625rem;line-height:1.85;overflow-wrap:anywhere}
a{color:var(--link);text-underline-offset:.2em}
a:hover{color:var(--link);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--link);outline-offset:4px}

#header{position:relative;z-index:20;min-height:auto;padding:0;overflow:visible;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:none}
#header .container{max-width:76rem;padding:1.2rem 1.25rem}
#header .navbar{min-height:auto}
#header .logo a{color:var(--ink);font-size:1rem;font-weight:750;text-decoration:none}
#header .dropmenu ul li a{color:var(--muted);font-size:.9rem}
#header .dropmenu ul li a.active,#header .dropmenu ul li a:focus,#header .dropmenu ul li a:hover{color:var(--link)!important}
@media(min-width:841px){
  #header .dropmenu,#header .dropmenu>ul,#header .dropmenu>ul>li{height:100%}
  #header .dropmenu>ul>li{display:flex;align-items:center}
  #header .dropmenu ul ul{z-index:100;top:100%;margin-top:0;transform:none!important}
  #header .dropmenu ul li:hover>ul,#header .dropmenu ul li:focus-within>ul{display:block;visibility:visible;opacity:1;pointer-events:auto}
}

#start{padding-top:0}
#body-wrapper{padding:0}
#body-wrapper>.container,#body-wrapper.blog-listing>.container{max-width:72rem;margin:2.5rem auto 5rem;padding:0 1.25rem}
#body-wrapper .columns{margin:0 -1.5rem}
#body-wrapper .column{padding:0 1.5rem}
#item.col-9{width:68%}
#sidebar.col-3{width:32%}

.content-item{min-width:0}
.content-title{text-align:left!important}
.content-title h2,.content-title h2 a{color:var(--ink);font-size:clamp(1.8rem,4.4vw,2.65rem);font-weight:700;line-height:1.45;letter-spacing:-.025em;text-decoration:none}
.content-title h3{color:var(--muted);font-size:1.12rem;font-weight:400}
.content-title time,.content-title .blog-date,.content-title .tags{color:var(--muted);font-size:.88rem}
h1,h2,h3,h4,h5,h6{color:var(--ink);line-height:1.45}
h1{margin:.6rem 0 1rem;font-size:clamp(1.8rem,4.4vw,2.65rem);letter-spacing:-.025em}
.e-content h2,#body-wrapper>.container>h2{margin:3rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);font-size:1.5rem}
.e-content h3,#body-wrapper>.container>h3{margin:2rem 0 .6rem;font-size:1.2rem}
p,ul,ol,dl,figure{margin:1.2rem 0}
li+li{margin-top:.45rem}

blockquote,.notices{margin:1.5rem 0;padding:.7rem 1.2rem;background:var(--panel);border:0;border-left:4px solid var(--link);border-radius:0 .4rem .4rem 0;color:var(--ink)}
pre{max-width:100%;overflow-x:auto;padding:1rem;background:var(--panel);border:1px solid var(--line);border-radius:.4rem;line-height:1.6;white-space:pre}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}
:not(pre)>code{padding:.1em .3em;background:var(--panel)}
.table-wrapper{max-width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
th,td{padding:.7rem;border:1px solid var(--line);text-align:left;vertical-align:top}
thead{background:var(--panel)}
img,svg,video{max-width:100%;height:auto}

#sidebar{padding-top:0}
#sidebar .sidebar-content{margin:0 0 1rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:.5rem;background:var(--paper)}
#sidebar h4{margin:0 0 .6rem;color:var(--ink);font-size:1rem}
#sidebar ul{margin:.6rem 0;padding-left:1.3rem}
#sidebar a{font-size:.92rem}

.blog-listing .bricklayer{margin-left:0;margin-right:0}
.blog-listing .bricklayer-column{padding:0 .65rem}
.blog-listing .card{margin-bottom:1.3rem;overflow:hidden;border:1px solid var(--line);border-radius:.5rem;box-shadow:none}
.blog-listing .card-header,.blog-listing .card-body,.blog-listing .card-footer{padding-left:1.2rem;padding-right:1.2rem}
.blog-listing .card-title h5{margin:.3rem 0;font-size:1.2rem}
.blog-listing .card-title a{color:var(--ink);text-decoration:none}
.blog-listing .card-subtitle,.blog-listing .card-footer{color:var(--muted);font-size:.88rem}

.btn,.button,button,input[type="submit"]{border-color:var(--link);border-radius:.35rem;color:var(--link)}
.btn:hover,.button:hover,button:hover,input[type="submit"]:hover{background:var(--link);border-color:var(--link);color:var(--paper)}
#footer{padding:0;background:var(--paper)!important;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
#footer .container{max-width:76rem;padding:1.2rem 1.25rem}
#footer p{margin:0}
[id]{scroll-margin-top:1.5rem}

@media(min-width:64rem){#sidebar{position:sticky;top:1.5rem;align-self:flex-start;max-height:calc(100vh - 3rem);overflow:auto}}
@media(max-width:840px){#body-wrapper>.container,#body-wrapper.blog-listing>.container{margin-top:1.5rem}#body-wrapper .columns{display:flex;flex-direction:column;margin:0}#body-wrapper .column{width:100%!important;padding:0}#item{order:2}#sidebar{order:1;margin-bottom:1.5rem}.mobile-menu .button_container span{background:var(--ink)}}
@media(max-width:30rem){body{font-size:1rem}#header .container,#body-wrapper>.container,#body-wrapper.blog-listing>.container,#footer .container{padding-left:1rem;padding-right:1rem}}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--paper:#171b21;--ink:#e7edf5;--muted:#b2bdcb;--link:#8dbdff;--line:#455264;--panel:#222a35}input,textarea,select{background:var(--panel);color:var(--ink)}}
@media print{#header .desktop-menu,.mobile-menu,#sidebar,.prev-next{display:none!important}#body-wrapper>.container,#body-wrapper.blog-listing>.container{max-width:none;margin:0;padding:0}#body-wrapper .column{width:100%!important;padding:0}body{background:#fff;color:#000;font-size:11pt}pre{white-space:pre-wrap}h2,h3{break-after:avoid}}