@font-face {
    font-family: "Saitamaar";
    src: url("font/Saitamaar.woff2") format("woff2"),
    url("font/Saitamaar.woff") format("woff"),
    url("font/Saitamaar.ttf") format("ttf");
    font-display: swap;
}

@font-face {
    font-family: "Black Han Sans";
    src: url("font/BlackHanSans-Regular.woff2") format("woff2"),
    url("font/BlackHanSans-Regular.woff") format("woff"),
    url("font/BlackHanSans-Regular.ttf") format("ttf");
    font-display: swap;
}

.center {
    text-align: center;
}

body {
    margin: 0;
    padding: 3em 0 0 0;
    background-color: rgb(185, 235, 255);
}

.pad_3em {
    height: 3em;
}

nav {
    background-color: rgb(50, 50, 50);
    width: 100%;
    height: 3em;
    position: fixed;
    top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 1;
}

nav::-webkit-scrollbar {
    display: none;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0.5em;
    padding: 0.5em;
    border-left: rgb(220, 220, 220) 1px solid;
}

nav ul li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
}

.search_form_container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 3em;
}

.search_form {
    width: 60em;
    padding: 0;
    background-color: rgb(50, 50, 50);
    border: 0;
    color: rgb(80, 80, 80);
    box-shadow: 5px 5px 20px -8px rgba(0,0,0,0.75);
}

.search_form form {
    display: flex;
    padding: 0.4em;
    margin: 0;
}

.search_form_input {
    font-size: 0.8em;
    padding: 0.4em;
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.7)
}

.search_type_input {
    -webkit-appearance: menulist-button;
    margin: 0;
}

.search_keyword_input {
    flex-grow: 2;
    width: 4em;
    max-width: 60em;
    margin: 0 0.4em;
    border: none;
    border-bottom: rgb(150, 150, 150) 1px solid;
}

.search_form_submit {
    flex-grow: 1;
    width: 2em;
    max-width: 6em;
    margin: 0;
    font-size: 1em;
    padding: 0.4em;
    border: none 0 black;
    color: rgb(120, 120, 120);
    background-color: rgb(180, 180, 180);
}

#thread_list_container {
    display: flex;
    margin: 3em 0;
    align-items: center;
    justify-content: center;
}

#thread_list {
    width: 60em;
    background-color: rgb(230, 250, 255);
    color: rgb(80, 80, 80);
    box-shadow: 5px 5px 20px -8px rgba(0,0,0,0.75);
}

.thread_list_item {
    padding: 0.1em;
    margin: 0.3em;
    border-bottom: rgb(150, 150, 150) 1px solid;
}

.thread_list_item:nth-last-child(2) {
    border-bottom: none;
}

.thread_list_nav {
    padding: 0.1em;
    background-color: rgb(50, 50, 50);
    border-bottom: none;
}

.thread_list_nav a {
    text-decoration: none;
    color: rgb(150, 150, 150);
}

.thread_list_nav p {
    margin: 0.4em 0;
}

.thread_list_item:hover {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-transition: background-color 150ms linear;
    transition: background-color 150ms linear;
}

.thread_list_item a {
    text-decoration: none;
    color: rgb(150, 150, 150);
}

.thread_list_item p {
    margin: 0.4em 0;
}

.thread_list_item_order {
    line-height: 0.01em;
    margin-top: 0;
    margin-bottom: 0.4em;
}

.thread_list_item_order a {
    color: inherit;
    text-decoration: none;
}

.thread_list_item_id {
    margin: 0;
}

.thread_list_item_owner {
    margin: 0;
}

.thread_list_item_title {
    margin: 0;
    font-weight: bold;
}

.thread_list_item_title a {
    color: inherit;
    text-decoration: none;
}

.thread_list_item_update_date {
    margin: 0;
    color: rgb(180, 180, 180);
    font-size: 0.9em;
}

#notice_container, .ad_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#notice, .ad {
    width: 60em;
    background-color: rgb(230, 250, 255);
    color: rgb(80, 80, 80);
    box-shadow: 5px 5px 20px -8px rgba(0,0,0,0.75);
    overflow: auto;
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

#notice div {
    margin: 1em;
}

#thread_section {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.thread {
    background-color: rgb(250, 250, 250);
    color: rgb(80, 80, 80);
    width: 60em;
    box-shadow: 5px 5px 20px -8px rgba(0,0,0,0.75);
}

.thread_head {
    padding: 1.3em 0.8em;
    background-color: rgb(50, 50, 50);
    color: rgba(255, 255, 255, 0.9);
}

.dead_sign {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 0.3em;
    background-color: rgb(50, 50, 50);
}

.thread_order {
}

.thread_id {
    margin: 0;
}

.thread_owner {
    margin: 0;
}

.thread_title {
    margin: 0;
    font-weight: bolder;
    font-size: 2em;
}

.thread_title a {
    color: inherit;
    text-decoration: none;
}

.thread_create_date {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

.thread_update_date {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

.thread_body {
    padding: 0.1px 0;
    background-color: rgb(230, 250, 255);
}

.response {
    margin: 1.0em 0.5em;
    padding: 0.3em 0.5em;
    border-left: rgb(210, 210, 210) 1px solid;
}

.response:hover {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-transition: background-color 150ms linear;
    transition: background-color 150ms linear;
}

.response_info {
    margin: 0;
}

.response_create_date {
    margin: 0;
    font-size: 0.8em;
    color: rgb(80, 80, 80);
}

.content {
    margin-top: 0.5em;
    margin-bottom: 0;
    color: rgb(50, 50, 50);
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.response_mask, .response_unmask {
    color: rgb(150, 150, 150) !important;
}

.response_test_indicator, .response_mask_mark {
    font-size: 0.8em;
    font-weight: bold;
    color: rgb(255, 80, 80);
}

.response_sequence {
    font-weight: bold;
    cursor: pointer;
    color: rgb(0, 145, 255);
}

.response_owner_id {
    font-size: 0.8em;
    color: rgb(80, 80, 80);
}

.response_owner_id a {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

#create_thread_container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 3em 0;
}

.create_thread {
    width: 60em;
    border: rgb(210, 210, 210) 1px solid;
    box-shadow: 5px 5px 20px -8px rgba(0,0,0,0.75);
}

.post_form {
    border: none;
    margin: 0;
    background-color: rgb(50, 50, 50);
}

.post_form form {
    margin: 0;
}

.post_form input {
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.7);
}

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
    .post_form textarea {
        font-size: 1.2em !important;
    }
}

.post_form textarea {
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.0em;
}

.post_form_default {
    width: 100%;
    font-size: 1em;
    padding: 0.4em;
    margin-bottom: 0.5em;
    border: none;
    border-bottom: rgb(150, 150, 150) 1px solid;
}

.post_form_attachment {
    width: 100%;
    font-size: 1em;
    padding: 0.4em;
    margin-bottom: 0.5em;
    color: rgb(150, 150, 150);
}

.post_form_content {
    width: 100%;
    height: 6em;
    font-size: 1em;
    padding: 0.4em;
    margin-bottom: 0.5em;
    border: none;
    border-bottom: rgb(150, 150, 150) 1px solid;
}

.post_form_button_group {
    display: flex;
    flex-direction: row;
}

.post_form_submit {
    min-width: 40em;
    max-width: 60em;
    font-size: 1em;
    padding: 0.4em;
    margin: 0;
}

.button_default {
    border: rgb(150, 150, 150) 1px solid;
    background-color: rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0.7);
}

.button_default:hover {
    background-color: rgba(0, 145, 255, .2);
    -webkit-transition: background-color 150ms linear;
    transition: background-color 150ms linear;
}

.post_form_test {
    min-width: 10em;
    font-size: 1em;
    padding: 0.4em;
    margin: 0 0 0 0.5em;
}

.thread_form_submit {
    width: 100%;
    min-width: 40em;
    font-size: 1em;
    padding: 0.4em;
    margin: 0;
}

.version {
    text-align: right;
    margin: 1.5em;
}

.mona {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    font-family: 'Saitamaar', sans-serif;
    line-height: 1.1em;
    background-color: rgba(255, 255, 255, 0.5);
}

textarea.mona {
    white-space: pre;
    overflow-x: auto;
}

span.spoiler {
    color: rgba(0, 0, 0, 0);
}

.manage_button_set {
    display: flex;
    padding: 0.3em;
    border-top: rgb(210, 210, 210) 1px solid;
}

.manage_button_set button {
    width: 100%;
    font-size: 1em;
    padding: 0.4em;
    margin: 0.4em;
}

@media (max-width: 60em) {
    #thread_list_container {
        display: block;
    }

    #thread_section {
        display: block;
    }

    #create_thread_container {
        display: block;
    }

    .post_form_button_group {
        display: block;
    }

    #thread_list {
        width: auto;
    }

    .thread_list_item p {
        margin: 0.2em;
        font-size: 0.9em;
    }

    #notice {
        font-size: 0.9em;
    }

    .thread {
        width: auto;
    }

    .create_thread {
        width: auto;
    }

    .thread_owner {
        font-size: 0.9em;
    }

    .thread_title {
        font-size: 1em;
    }

    .response_sequence {
        font-size: 0.9em;
    }

    .response_owner {
        font-size: 0.9em;
    }

    .content {
        font-size: 0.9em;
    }

    .post_form_content {
        font-size: 1.0em;
    }

    .post_form_submit {
        width: 100%;
        min-width: 0;
    }

    .post_form_test {
        width: 100%;
        min-width: 0;
        margin: 0.5em 0 0 0;
    }

    .thread_form_submit {
        min-width: 0;
    }

    .search_form {
    }

    .post_form textarea {
        font-size: inherit;
    }
}