@media (prefers-color-scheme: dark) {
    body {
        --color_a: #2d2d2d;
        --color_a7: #2d2d2dab;
        --color_a5: #2d2d2d80;
        --color_a3: #2d2d2d55;
        --color_b: #212121;
        --color_c: #181818;
        --text: #e8e8e8;
        --text7: #e8e8e8ab;
        --text5: #e8e8e880;
        --text3: #e8e8e855;
        --text_r: #2c2c2c;
        --text_r7: #2c2c2cab;
        --text_r5: #2c2c2c80;
        --text_r3: #2c2c2c55;
        --label: #007bff;
        --theme_r: #3ebbff;
        --body-bg: #0d213b;
    }

    .filter_r {
        filter: invert(1);
    }
}

@media (prefers-color-scheme: light) {
    body {
        --color_a: #ffffff;
        --color_a7: #ffffffab;
        --color_a5: #ffffff80;
        --color_a3: #ffffff55;
        --color_b: #ececec;
        --color_c: #cecece;
        --text: #3d3d3d;
        --text7: #3d3d3dab;
        --text5: #3d3d3d80;
        --text3: #3d3d3d55;
        --text_r: #e8e8e8;
        --text_r7: #e8e8e8ab;
        --text_r5: #e8e8e880;
        --text_r3: #e8e8e855;
        --label: #57a8ff;
        --theme_r: #1f8bff;
        --body-bg: #8c8c8c;
    }
}

:root {
    color-scheme: light dark;
}

:focus-visible {
    outline-offset: -1px;
    outline: var(--text) solid 1px;
}

#baseline-warning {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f8d7da;
    color: #721c24;
    padding: 1em;
    text-align: center;
    z-index: 1000;
}

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    --container_w: 76em;
    --theme: #FF8403;
    --theme_bg: #191313;
    --red: #ad0000;
    --green: #00ad00;
    --gap: 0.6rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(var(--color_a), var(--body-bg));
    margin: 0;
    z-index: 0;
    color: var(--text);
    min-height: 100vh;
}

body > .container {
    margin: 90px 0 1em 0;
    padding: 2em;
    border-radius: 0.5em;
    flex-grow: 1;
}

body > img {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -1;
    left: 0;
    mask: linear-gradient(#fffa, #0000);
}

svg {
    fill: var(--text)
}

header {
    display: flex;
    width: 100%;
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
    height: 90px;
    background: rgba(25 19 19 /var(--bgo));
    transition: height 0.2s ease, opacity 0.2s ease;
    z-index: 100;
}

header .container {
    display: flex;
    align-items: center;
    height: calc(100% - 20px);
    max-width: calc(var(--container_w) + 5em);
}

header .logo {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

header .logo .ico, header .logo a {
    height: 100%;
}

header .logo > .text {
    padding: 3% 2em;
    height: 40%;
    box-sizing: content-box;
}


header .tab * {
    padding: 0 1em;
}

header .user {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}

header a {
    color: var(--theme);
    font-weight: bolder;
}

header a:hover {
    color: var(--theme_r);
}

header input {
    display: none;
}

header .menu_btn, header .menu_btn label, header .menu_btn img {
    height: 100%;
}


header .menu {
    position: absolute;
    background: var(--theme_bg);
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    opacity: 0.95;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

header input:checked ~ .menu {
    max-height: 10em;
}

header .menu a {
    padding: 0.5em;
}

footer {
    background: #000000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffffff;
    position: relative;
}

footer img {
    width: 100%;
    max-width: 70em;
}

footer .t {
    position: absolute;
    bottom: 0;
    padding-bottom: 0.5em;
}

dialog {
    z-index: 200;
    margin: auto;
    padding: 2em;
    border: 0;
    border-radius: 1em;
}

dialog::backdrop {
    background-color: #0008;
}

a {
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    color: var(--text);
}


input, select, button, .btn {
    font-size: 1em;
    border: none;
    padding: 0.2em 1.1em;
    border-radius: 1em;
    background: var(--text7);
    color: var(--text_r);
    transition: background 0.2s ease, border 0.2s ease;
}

input[type=submit], input[type=button], .btn, button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    backdrop-filter: contrast(0.8);
}

.btn > svg {
    height: 1em;
}

.tox .tox-collection__item-label {
    word-break: keep-all !important;
}

.tox button {
    backdrop-filter: none;
}

input[type=submit]:hover, input[type=button]:hover, .btn:hover, button:hover {
    background: var(--text_r3);
}

button:disabled {
    background: var(--text3);
}

@media (prefers-color-scheme: light) {
    input, select, button, .btn {
        background: var(--color_a7);
        color: var(--text);
        box-shadow: var(--text3) 0 0 4px 0;
    }

    input[type=submit]:hover, input[type=button]:hover, .btn:hover, button:hover {
        background: var(--color_b);
    }

    button:disabled {
        background: var(--text3);
    }
}

table {
    border-collapse: collapse;
    border: 2px solid var(--color_c);
}

thead {
    background: var(--color_b);
}

th, td {
    border: 1px solid var(--color_c);
    text-align: center;
    padding: 0.2em;
}

hr {
    border: solid var(--theme_r);
    border-width: 1px 0 0 0;
    opacity: 0.5;
    margin-top: 0.2em;
}

img {
    object-fit: cover;
    max-width: 100%;
}

textarea {
    resize: none;
    padding: 0.5em;
    border-radius: 0.5em;
    border: 1px solid var(--color_c);
    min-height: 3em;
    max-height: 10em;
    font-size: 1.2em;
    max-width: 100%;
}

.container {
    max-width: var(--container_w);
    width: 100%;
    padding: 0 2em;
    position: relative;
}

.content {
    display: flow-root;
}

.hd {
    display: none !important;
}

.h100 {
    height: 100%;
}

.sticky {
    position: sticky;
    top: calc(60px);
    z-index: 50;
}

.relative {
    position: relative;
}

.bg {
    background: var(--color_a);
}

.d_content {
    display: contents;
}

.f40 {
    display: none;
}

.f, .fc {
    display: flex;
    flex-wrap: wrap;
}

.inline {
    display: inline-flex !important;
}

.fc {
    flex-direction: column;
}

.ac {
    align-items: center;
}

.as {
    align-items: flex-start;
}

.jc {
    justify-content: center;
}

.je {
    justify-content: flex-end;
}

.nw {
    white-space: nowrap;
    flex-wrap: nowrap;
}

.ow {
    overflow-wrap: anywhere;
    white-space: wrap;
}

.oh {
    overflow: hidden;
}

.oa {
    overflow: auto
}

.mr02 {
    margin-right: 0.2em
}

.a_shd {
    box-shadow: var(--color_a) 2px 2px 3px 1px;
}

.a5_shd {
    box-shadow: var(--color_a5) 2px 2px 3px 1px;
}

.a7_shd {
    box-shadow: var(--color_a7) 2px 2px 3px 1px;
}

.a_box, .a7_box, .a5_box, .b_box, .c_box, .r_box {
    border-radius: 0.3em;
    padding: 0.2em 0.3em;
    display: flex;
}

.a_box {
    background: var(--color_a);
}

.a5_box {
    background: var(--color_a5);
}

.a7_box {
    background: var(--color_a7);
}

.b_box {
    background: var(--color_b);
}

.c_box {
    background: var(--color_c);
}

.r_box {
    background: var(--text);
    color: var(--text_r);
}

.tag {
    display: flex;
    border-radius: 1em;
    padding: 0.2em 0.7em;
    align-items: center;
    margin: 0 1em;
    color: #fff;
    white-space: nowrap;
}

.gap_t {
    margin-top: var(--gap);
}

.gap_t2 {
    margin-top: calc(var(--gap) * 2);
}

.gap_t3 {
    margin-top: calc(var(--gap) * 3);
}

.gap_t4 {
    margin-top: calc(var(--gap) * 4);
}

.gap_r {
    margin-right: var(--gap);
}

.gap_l {
    margin-left: var(--gap);
}

.gap_l2 {
    margin-left: calc(var(--gap) * 2);
}

.gap_l3 {
    margin-left: calc(var(--gap) * 3);
}

.gap_l4 {
    margin-left: calc(var(--gap) * 4);
}

.gap_x {
    margin-left: var(--gap);
    margin-right: var(--gap);
}

.gap_x2 {
    margin-left: calc(var(--gap) * 2);
    margin-right: calc(var(--gap) * 2);
}

.gap_x3 {
    margin-left: calc(var(--gap) * 3);
    margin-right: calc(var(--gap) * 3);
}

.gap_x4 {
    margin-left: calc(var(--gap) * 4);
    margin-right: calc(var(--gap) * 4);
}

.gap_x5 {
    margin-left: calc(var(--gap) * 5);
    margin-right: calc(var(--gap) * 5);
}

.gap_b {
    margin-bottom: var(--gap);
}

.gap_cx > *, .gap_cxh > * {
    margin-left: calc(var(--gap) / 2);
    margin-right: calc(var(--gap) / 2);
}

.gap_c > *, .gap_ch > * {
    margin: calc(var(--gap) / 2);
}

.gap_c > *:first-child, .gap_cx > *:first-child {
    margin-left: 0;
}

.gap_c > *:last-child, .gap_cx > *:last-child {
    margin-right: 0;
}

.pad {
    padding: var(--gap);
}

.pad_2 {
    padding: calc(var(--gap) / 2);
}

.w100 {
    width: 100%;
}

.label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
}

.red {
    color: var(--red);
}

.green {
    color: var(--green);
}

.theme {
    color: var(--theme)
}

.theme_r {
    color: var(--theme_r)
}

.spoiler {
    background: var(--text);
    transition: background-color 0.2s ease;
}

.spoiler:hover {
    background: #0000;
}

.wb_bg {
    background: var(--theme_r);
}

.sb_bg {
    background: var(--theme);
}

.ds_bg {
    background: var(--green);
}

.red_bg {
    background: var(--red);
}

.wb_br {
    border-color: var(--theme_r);
}

.op7 {
    opacity: 0.7;
}

.op5 {
    opacity: 0.5;
}

.ophover {
    transition: opacity 0.2s ease;
}

.ophover:hover {
    opacity: 0.7;
}

.fss {
    font-size: 0.9em;
}


.b {
    font-weight: bold;
}


.g1 {
    display: grid;
    grid-template-columns: 1fr;
}

.ff {
    flex: 1 1 0
}

.bb {
    border-bottom: 1px var(--color_b) solid;
}

.toggle label {
    display: flex;
    align-items: center;
}

.toggle label svg {
    width: 1em;
}

.toggle input, .grid_col input {
    display: none;
}

.toggle input:checked + label {
    display: none;
}

.cbhd input[type=checkbox], .cbhd input[type=radio] {
    display: none;
}

.cbhd label, .cbhd span:not(.label) {
    padding: 0.3em 1.1em;
    border-radius: 2em;
    margin: 0 calc(var(--gap) * 0.6) var(--gap) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--text3);
    color: var(--text);
    transition: all 0.2s ease;
    backdrop-filter: contrast(0.8);
}

.cbhd input:checked + label {
    background: var(--text7);
    font-weight: bold;
    color: var(--text_r);
}

.cbhd label:hover {
    background: var(--text5);
}

.cbhd span:not(.label) {
    border: var(--text7) 1px solid;
    padding: calc(0.3em - 1px) calc(1.1em - 1px);
}

.cbhd .toggle label {
    background: var(--text7);
}

.cbhd span:not(.label):hover {
    background: var(--text5);
}

.cbhd span:not(.label):active {
    background: var(--text_r);
}

@media (prefers-color-scheme: light) {
    .cbhd label, .cbhd span:not(.label) {
        color: var(--text_r);
    }

    .cbhd span:not(.label):active {
        background: var(--text7);
    }
}


.filter .label {
    padding: 0.2em;
    font-size: small;
}

.filter .slash {
    display: block;
    height: calc(100% - var(--gap));
    margin-right: 0.2em;
    margin-left: calc(0.2em - var(--gap));
    width: 2px;
    background: var(--text);
    transform: skew(-10deg);
}

.filter input, .filter select {
    margin-bottom: var(--gap);
}

.filter input[type=text], .filter input[type=number], .filter select {
    min-width: 0;
}

.filter .process {
    margin-bottom: var(--gap);
}

.filter .ico_box > input {
    margin-bottom: 0;
}


.fold > div {
    display: contents;
    position: relative;
}

.fold .choice {
    display: flex;
}

.fold .choice {
    cursor: default;
}

.fold > .choice {
    display: contents;
}

.switch_box {
    display: grid;
    grid-template-columns:auto 1fr;
    transition: grid-template-columns 0.2s ease;
}

.switch_box .label {
    font-size: 1em;
    display: flex;
    align-items: center;
    margin-bottom: var(--gap);
}

.switch_box + input[type=submit] {
    margin: 3px 0 calc(var(--gap) + 3px) 0;
}

.switch_box .b {
    display: none;
}

.switch {
    display: none;
}

.process {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.process .arrow {
    height: 2em;
}


.ico_box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

.ico_box input {
    padding: 0 0.3em 0 2.8em;
}

.ico_box .ico {
    aspect-ratio: 1/1;
    object-fit: cover;
    image-rendering: pixelated;
    position: absolute;
    height: 2em;
    margin-left: var(--gap);
}

.arrow {
    height: 1.6em;
}


.jsb {
    justify-content: space-between;
}

.jsa {
    justify-content: space-around;
}

.text_r {
    color: var(--text_r);
}

.text_theme {
    color: var(--theme);
}

.text_theme_r {
    color: var(--theme_r);
}

.sort {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 0.3em;
}

.grid_col {
    display: none;
}

.login {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: large;
    font-weight: bolder;
}

.login > div {
    display: grid;
    grid-template-columns: 20em 20em;
    border-radius: 1em;
    overflow: hidden;
}

.login > div > div {
    background: var(--theme_bg);
    display: flex;
    justify-content: center;
    align-items: center;


}

.login div > img {
    width: 80%;
    object-fit: contain;
}

.login form {
    width: 20em;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    padding: 2em;
    background: var(--color_a);
}

.login form img {
    width: 70%;
}

.login form div {
    display: grid;
    grid-template-columns: 1fr;
}

.login form .error {
    color: var(--red);
}

.login form input {
    font-size: large;
    font-weight: bold;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    padding: 0.2em;
}

.login form ul {
    font-size: small;
    font-weight: bold;
    margin: 0;
    padding-inline-start: 25px;
    color: var(--red);
}


@media screen and (max-width: 40em) {
    .login > div {
        grid-template-columns: 1fr;
    }

    .login > div > div {
        display: none;
    }

}

.space {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.space div {
    display: flex;
}

.space input {
    width: 100%;
}

.function {
    display: flex;
}

.function #function_tree {
    display: flex;
}

.function #function_tree span {
    position: relative;
    transition: border-color 0.2s ease;
    cursor: default;
    background: var(--text3);
    border-color: #0000;
}

.function #function_tree span:after {
    content: "🞭";
    position: absolute;
    right: 0.2em;
    color: var(--red);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.function #function_tree span:hover {
    border-color: var(--red);
}

.function #function_tree span:hover:after {
    opacity: 1;
}

.tab_container > .tab {
    display: none;
}

.tab_container .content {
    display: flex;
    flex-direction: column-reverse;
}

.tab_container .content h2 {
    border-bottom: 1px var(--theme_r) solid;
    margin: var(--gap) 0;
}

.rl37 {
    display: grid;
    grid-template-columns: 15em 1fr;
    position: relative;
}

.rl37 .r {
    z-index: 10;
    background-color: var(--text3);
    padding: var(--gap);
    border-radius: 0.5em;

    .btn {
        display: none;
    }
}

.rl37 .l {
    z-index: 9;
    padding: 0 var(--gap);
}


@media screen and (max-width: 40em) {
    .rl37 {
        display: flex;
        overflow: hidden;
    }

    .rl37 .r, .rl37 .l {
        width: 100%;
        flex-shrink: 0;
        transition: transform 0.5s ease;
    }

    .rl37 .r .btn {
        display: flex;
        transition: transform 0.5s ease;
    }

    .rl37 .btn svg {
        transition: transform 0.5s ease;
    }


    .rl37 #search_msg {
        padding-left: 3em;
    }

    #left_bar:checked ~ .r, #left_bar:checked ~ .l {
        transform: translateX(-100%);
    }

    #left_bar:checked ~ .r .btn {
        transform: translateX(calc(100% + 1em));
    }

    #left_bar:checked ~ .r .btn svg {
        transform: rotate(180deg);
    }
}

.tree input {
    display: none;
}

.tree div {
    display: grid;
    border-radius: 0.5em;
    background: var(--color_a3);
    grid-template-rows: auto 1fr;
    overflow: hidden;
    transition: grid 0.5s;
    margin-bottom: 2px;
}

.tree label + div > div:hover {
    background: var(--color_a5);
}

.tree label {
    font-weight: bold;
    padding: 0.5em;
}

.tree label + div {
    margin: 0 0.5em 0.5em;
    background: none;
    display: block;
}


.list_result {
    border-radius: 0.5em;
    box-shadow: 1px 1px 3px 1px #0004;
    background: var(--color_a5);
    display: grid;
    grid-template-columns: 13.4em 1fr auto 11em;
    grid-template-rows: auto auto auto auto 1fr 2em;
    white-space: nowrap;
}

.list_result .cover {
    grid-area: 1/1/6/2;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 0.5em 0 0 0;

    img {
        height: 100%;
        width: 100%;
    }
}

.list_result .title {
    grid-area: 1/2/1/4;
    margin: 0.6rem 0.6rem 0 0.6rem;
    color: var(--theme);
}

.list_result .time {
    grid-area: 1/4/1/5;
    margin: 0 0.6rem 0 0;
    align-self: end;
    padding: 0.1em;
}

.list_result .author {
    grid-area: 2/2/2/4;
    margin: 0 0.6rem;
    padding: 0.1em;
}

.list_result .size {
    grid-area: 2/4/2/5;
    margin: 0 0.6rem 0 0;
    padding: 0.1em;
    overflow: hidden;
}

.list_result .desc {
    grid-area: 3/2/6/4;
    max-height: 4em;
    overflow: hidden;
    margin: 0 0.6rem 0.6rem 0.6rem;
    padding: 0.1em;
}

.list_result .stress {
    grid-area: 3/4/3/5;
    padding: 0.1em;
    margin: 0 0.6rem 0 0;
    overflow: hidden;
}

.list_result .version {
    grid-area: 4/4/4/5;
    padding: 0.1em;
}

.list_result .download {
    grid-area: 5/4/5/5;
    padding: 0.1em;
    margin: 0 0.6rem 0 0;
    overflow: hidden;
}

.list_result .io {
    grid-area: 6/1/6/3;
    display: flex;
    background: var(--color_a5);
    padding: 0.2em 0.2em 0.2em 0.6em;
    border-radius: 0 0 0 0.5em;
    overflow: hidden;
}

.list_result .io > div {
    margin: 0 0.2em;
}

.list_result .io > div img {
    height: 1.6em;
    width: 1.6em;
}


.list_result .io .tag {
    margin: 0 0.2em;
}

.list_result .function {
    width: fit-content;
    min-width: 11em;
    grid-area: 6/3/6/5;
    background: var(--color_a5);
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.6em;
    border-radius: 0 0 0.5em 0;
}


.list #results {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
}

@media screen and (max-width: 60em) {
    #results {
        grid-template-columns: 1fr;
    }

    #results .list_result {
        grid-template-columns: 8em 1fr auto;
        grid-template-rows: auto auto auto 2em;
    }

    #results .list_result .cover {
        grid-area: 1/1/4/2;
    }

    #results .list_result .title {
        font-size: large;
    }

    #results .list_result .desc {
        display: none;
    }

    #results .list_result .size {
        display: none;
    }

    #results .list_result .download {
        display: none;
    }

    #results .list_result .stress {
        display: none;
    }

    #results .list_result .time {
        display: none;
    }

    #results .list_result .author {
        grid-area: 2/2/2/4;
    }

    #results .list_result .version {
        grid-area: 3/2/3/4;
        margin: 0 0.6rem 0.6em;
    }

    #results .list_result .io {
        grid-area: 4/1/4/3;
    }

    #results .list_result .io .ico_tag > div > div {
        display: none;
    }

    #results .list_result .function {
        grid-area: 4/3/4/4;
        min-width: initial;
        width: 100%;
        overflow: hidden;
    }

    #results .list_result .function span {
        width: 100%;
        overflow: hidden;
        justify-content: end;
    }
}

.tip_box {
    display: flex;
    position: relative;
    flex-shrink: 0;
}

.tip_box .h {
    background: var(--text);
    color: var(--text_r);
    font-size: 0.5em;
    border-radius: 0.4em;
    padding: 0 0.2em;
    display: flex;
    align-items: center;
    align-self: center;
    margin-left: 0.5em;
    transition: opacity 0.2s ease;
}

.tip_box:hover .h {
    opacity: 0.8;
}

.tip_box .tip {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    background: var(--text);
    color: var(--text_r);
    padding: 0.5em;
    border-radius: 0.5em;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tip_box:hover .tip {
    visibility: visible;
    opacity: 1;
}

.ico_tag {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
    image-rendering: pixelated;
}

.ico_tag > div {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 0.3em;
    position: relative;
    background: var(--color_c);
    padding: 0.1em;
    max-height: 50px;
}

.ico_tag img, .ico_tag canvas {
    border-radius: 0.3em;
    height: calc(50px - 0.2em);
}

.ico_tag span {
    align-self: flex-start;
    display: flex;
    font-size: 0.7em;
    background: var(--text);
    color: var(--text_r);
    padding: 0 0.5em;
    border-radius: 1em;
    transform: translate(-1.1em, -0.2em);
    margin-right: -1.1em;
}

.ico_tag > div > div {
    padding-right: 0.7em;
}

.dropdown input[type=checkbox] {
    display: none;
}


.dropdown {
    transition: background-color 0.2s ease;
    background: var(--color_a5);
    border-radius: 0.3em 0.3em 0 0;
}

.dropdown_body {
    display: grid;
    overflow: hidden;
    background: none;
    border-radius: 0 0 0.3em 0.3em;
    transition: all 0.2s ease;
    grid-template-rows: 1fr;
    background: var(--color_a5);
}

.dropdown_body > * {
    min-height: 0;
}

.dropdown_search {
    z-index: 50;
    position: absolute;
    background: var(--color_a);
    width: calc(100% - 1em);
    border-radius: 0.3em;
    min-height: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 2em;
    opacity: 0;
    transition: padding 0.2s ease, max-height 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
}

.dropdown_search.show {
    padding: 2em;
    max-height: 60vh;
    box-shadow: var(--text3) 0 0 3px 3px;
    opacity: 1;
    overflow: visible;
}

.dropdown_search:before {
    content: '';
    background: var(--color_a);
    position: absolute;
    top: 0;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    transform: translateY(-10px) rotate(45deg);
}

.dropdown_search .ico_tag {
    height: 50px;
}

.dropdown_search .ico_tag img {
    height: calc(50px - 0.2em);
}


.link_result {
    border-radius: 0.5em;
    box-shadow: 1px 1px 3px 1px #0004;
    background: var(--color_a5);
    display: flex;
    height: 5em;
    min-width: 15em;
    position: relative;
}

.link_result .cover {
    height: 100%;
    border-radius: 0.5em 0 0 0.5em;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.link_result .content {
    margin: calc(var(--gap) / 2);
}

.link_result img {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

.pagination {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    overflow: hidden;
}

.pagination .page {
    --page: 0px;
    display: flex;
    overflow: hidden;
}

.pagination .page button {
    transform: translateX(calc(var(--page) * -1px));
    transition: transform 0.2s ease;
}


.pagination .prev {
    margin-right: var(--gap);
}

.pagination .next {
    margin-left: var(--gap);
}


.loading {
    display: none;
}


#loading {
    background: none;
    outline: none;
    outline-offset: 0;
    width: 20em;
    height: 20em;
    overflow: hidden;
}

#loading img {
    width: 100%;
}

dialog .tabu_table {
    width: 60rem;
    max-width: 100%;
    height: 30em;
}

@media screen and (max-width: 30em) {
    .hd30 {
        display: none;
    }
}

@media screen and (max-width: 40em) {
    .hd40 {
        display: none !important;
    }

    .fc40 {
        flex-direction: column;
    }

    .gap_l_40 {
        margin-left: var(--gap);
    }


    .gap_x_40 {
        margin-left: var(--gap);
        margin-right: var(--gap);
    }

    .gap_x2_40 {
        margin-left: calc(var(--gap) * 2);
        margin-right: calc(var(--gap) * 2);
    }

    .gap_x3_40 {
        margin-left: calc(var(--gap) * 3);
        margin-right: calc(var(--gap) * 3);
    }

    .gap_x4_40 {
        margin-left: calc(var(--gap) * 4);
        margin-right: calc(var(--gap) * 4);
    }

    .space {
        grid-template-columns: 1fr;
    }

    .no_gap40 {
        margin: 0;
    }

    .f40 {
        display: flex;
    }

    body > .container {
        padding: 0.5em;
        margin-top: calc(90px + 0.5em);
    }
}


@media screen and (max-width: 50em) {
    .hd50 {
        display: none;
    }
}