:root{--gray-rgb:0,0,0;--gray-alpha-200:rgba(var(--gray-rgb),0.08);--gray-alpha-100:rgba(var(--gray-rgb),0.05);--background-primary:#eeeeee;--background-secondary:#cecece;--button-primary:#333333;--button-primary-hover:#383838;--button-secondary-hover:#f2f2f2;--padding-xs:0.25rem;--padding-s:0.5rem;--padding-m:1rem;--padding-l:1.5rem;--padding-xl:2rem;--content-padding:0 20%;--content-padding-m:0 10%;--content-padding-s:0 5%;--font-main:#111111;--font-secondary:#888888;--font-xs:0.5rem;--font-s:0.75rem;--font-m:1rem;--font-l:1.25rem;--font-xl:1.5rem;--page-gap:2rem;--container-gap:1.5rem;--content-gap:1rem;--color-error:rgb(239 68 68)}.page{display:grid;width:100%;height:100%}.page.gap{gap:var(--page-gap)}div[id=content]{flex:1 0 auto;min-height:300px}.container{display:flex;width:100%;height:100%;padding:var(--content-padding)}.container.gap{gap:var(--container-gap)}.content{display:flex;gap:var(--padding-m);height:100%}.content>div{gap:var(--padding-s)}.content .gap{gap:var(--padding-xs)}.content>p{word-break:normal;overflow-wrap:anywhere}.list:hover{background-color:var(--background-primary)}.col{flex-direction:column}.col,.row{display:flex}.row{flex-direction:row}.row.middle{align-items:center}header{height:auto;align-items:center;padding:var(--padding-m) 10%;background-color:var(--background-primary)}header,header>div{display:flex;width:100%;position:relative}header>div{height:100%}header .title{gap:var(--padding-m);justify-content:center}.title .sns{gap:var(--padding-s)}header .wing{position:absolute;right:var(--padding-m);top:var(--padding-xs)}.wing,header .wing{justify-self:flex-end}.wing{position:relative;align-self:flex-end}hr{border:.5px solid var(--background-primary)}footer{height:auto;padding:var(--padding-xl) 10%}.nav,footer{background-color:var(--background-primary);display:flex}.nav{justify-content:center;gap:var(--padding-xl)}.nav button{border:none;background:none}.error{color:var(--color-error);font-size:var(--font-s);gap:var(--padding-xs)}button{border:none;border-radius:.5rem;cursor:pointer}button>*{display:block;padding:var(--padding-s) var(--padding-m);font-size:1rem;font-weight:bolder}button>[id=icon],button[id=icon]{padding:0!important}button[id=pin]{background-color:var(--background)}button>[id=icon]:hover,button[id=icon]{padding:0!important;background-color:var(--background-secondary)!important;border-radius:.5rem}button:hover{border-radius:.5rem;background-color:var(--background-secondary)}button.active{color:var(--font-main)}button.inactive{color:var(--font-secondary)}input{border:1px solid var(--background-secondary);border-radius:.5rem;padding:var(--padding-s)}.prev_comment{display:flex;flex-direction:column;gap:var(--padding-s);padding:var(--padding-s) var(--padding-xs)}.prev_comment .title{font-weight:700}.prev_comment .time{display:flex;font-size:var(--font-s);align-items:center;padding-left:var(--padding-m)}.prev_comment .remove{display:flex;flex:1 0 auto;justify-content:end}.remove>button{background-color:#fff}.remove>button:hover{background-color:var(--background-secondary)}.prev_comment>hr{border:.5px dotted var(--background-primary)}.comment{background-color:var(--background-primary);border-radius:.5rem;padding:var(--padding-m);display:flex;flex-direction:column;gap:var(--padding-m)}.comment .name{display:flex;align-items:center;gap:var(--padding-s);font-size:var(--font-m)}.comment textarea{border:1px solid var(--background-secondary);min-height:50px;padding:var(--padding-s)}.comment button{border:.5px solid var(--background-secondary)}@media only screen and (max-width:600px){.container{padding:var(--content-padding-m)}}@media only screen and (max-width:300px){.nav{flex-direction:column;align-items:center;gap:var(--padding-xs)}header{height:auto;min-height:auto}header>*{align-items:center}header .title{width:100%}header>.row{flex-direction:column}header .wing{position:relative;align-self:flex-end;right:0}.container{padding:var(--content-padding-s)}}.border_red{border:10px solid red}.border_blue{border:10px solid blue}.border_green{border:10px solid green}