@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

:root {
    --text-color: #dddddd;
    --bg-color: #181818;
    --icon-color: #dddddd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #dddddd;
        --bg-color: #181818;
        --icon-color: #dddddd;
    }
}

html {
    color: var(--text-color);
    background-color: var(--bg-color);
    font-size: 16px;
}

header {
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    background-color: #181818;
    border-bottom: 1px solid #dddddd80;
    z-index: 1;
}

a {
    color: #0077cc;
    text-decoration: none;
}

a:hover {text-decoration: underline;}

a.signin {
    color: #dddddd;
    text-decoration: none;
}

.logo {
    margin: 0 auto 0 15px;
    vertical-align: top;
}

ul {
    display: list-item;
    list-style: none;
    padding-left: 0;
}

main {overflow-x: scroll;}

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

main, footer {line-height: 1.7;}

section {margin-top: 30px;}

h1 {text-align: center;}

address {font-style: normal;}

p.footer-menu {font-size: 20px;}

img.icon {vertical-align: top;}

.point-sum-rank {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    width: 20px;
}

.like-vote-icon, .dislike-vote-icon, .point-total-icon {margin-left: 20px;}

.like-vote-icon, .dislike-vote-icon {cursor: pointer;}

.point-sum-last {display: none;}

.vote-item {white-space: nowrap;}

nav.breadcrumb {margin: 5px 0 20px 10px;}

nav.breadcrumb a {color: #dddddd;}

p.request {
    text-align: center;
    margin-top: 30px;
}

.toggle-input {
    position: absolute;
    opacity: 0;
}

.toggle-label {
    width: 65px;
    height: 30px;
    background: #181818;
    border: 3px solid #dddddd80;
    position: relative;
    display: inline-block;
    border-radius: 40px;
    transition: 0.4s;
    box-sizing: border-box;
    cursor: pointer;
}

.toggle-label:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    left: 2px;
    top: 2px;
    background: #0077cc;
    transition: 0.4s;
}

.toggle-input:checked + .toggle-label {background: #0077cc;}

.toggle-input:checked + .toggle-label:after {
    left: 37px;
    background: #181818;
}

.toggle-switch {
    margin-right: 10px;
    position: relative;
    width: 65px;
    height: 30px;
}

.toggle-text {
    margin: 0 10px 2px auto;
    height: 20px;
    cursor: pointer;
}

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

@media screen and (max-width: 767px) {
    a.signin {margin: 0 20px 0 auto;}

    .header-vote-life, nav.header-menu {display: none ;}

    main {
        margin: 20px 10px 30px 10px;
        font-size: 15px;
    }

    footer {
        margin: 100px 0 80px 0;
        text-align: left;
        border-top: 1px solid #dddddd80;
    }
    
    .footer-menu {
        text-align: left;
        margin: 20px 0 0 10px;
    }

    p.footer-menu {margin-left: 0;}

    div.bottom-nav ul {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        background-color: #181818;
        border-top: 1px solid #dddddd80;
        justify-content: space-around;
        line-height: 1;
        padding: 5px 0 5px 0;
    }

    div.bottom-nav li {
        display: table;
        table-layout: fixed;
        text-align: center;
        width: 25%;
    }

    div.bottom-nav span {
        color: #dddddd;
        font-size: 14px;
    }
}

@media screen and (min-width: 768px) {
    a.signin {margin: 0 20px 0 15px;}

    header {position: fixed;}

    .header-vote-life {margin: 0 auto;}

    img.life-recover-icon {margin-left: 15px;}

    nav.header-menu {margin: 0 10px 0 auto;}

    nav.header-menu li {
        display: inline-block;
        margin: 0 7px 0 7px;
    }

    nav.header-menu a {color: #dddddd;}

    .toggle-switch, .toggle-text {margin-right: 20px;}

    main {
        margin-top: 80px;
        text-align: center;
    }

    footer {
        margin: 200px 0 30px 0;
        border-top: 1px solid #dddddd80;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .footer-menu {margin-top: 20px;}

    div.bottom-nav {display: none;}

    nav.breadcrumb {margin-top: 65px;}
}

@media screen and (min-width: 768px) and (max-width: 799px) {
    .header-vote-life {font-size: 15px;}
    nav.header-menu li {font-size: 14px;}
}

@media screen and (min-width: 800px) and (max-width: 824px) {
    .header-vote-life {font-size: 15px;}
    nav.header-menu li {font-size: 15px;}
}

main section {margin-top: 30px;}

main section, main section span {display: inline-block;}

main section li {
    margin: 5px auto 0 auto;
    text-align: left;
}

.icon-text {margin-left: 5px;}

.item-name {text-align: left;}

.item-like, .item-dislike, .item-point-sum {text-align: right;}