a {
    text-decoration: none;
    color: inherit;
    transition-duration: .2s;
}

a:hover {
    color: inherit;
    letter-spacing: 0.04em;
    font-weight: bold;
}

.in-text {
    margin-left: 2em;
}

.in-text>h1,
.in-text>h2,
.in-text>h3,
.in-text>h4,
.in-text>h5 {
    margin-left: -1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.in-text a {
    color: #ff8628;
}

.table {
    background: linear-gradient(to right, rgba(255, 160, 80, .7), rgba(255, 220, 200, .7));
    margin: 10px;
    border-radius: 10px;
    color: black;
    vertical-align: middle;
}

.back {
    background: url("bg.50d92ec35aa6.png");
    background-attachment: fixed;
    color: white
}

.navbar {
    background-color: #ff8628;
    width: 100%;
    padding: 4px;
    position: fixed;
    top: 0px;
    left: 0px;
    padding-left: 100px;
    padding-right: 200px;
    box-shadow: 0px 10px 2px 2px rgba(0, 0, 0, .3);
    z-index: 999;
    display: flex;
}

.info-submit {
    border-radius: 5px;
    border-style: solid;
    border-color: #ff8628;
    padding: 20px;
}

.btn {
    border-radius: 10px;
    color: white;
    background-color: #ff8628;
    border-style: solid;
    border-width: 1px;
    border-color: saddlebrown;
}

.active {
    background-color: rgba(0, 0, 0, 0);
}

.active:hover {
    color: #ff8628;
}

.danger {
    border-radius: 10px;
    padding: 8px;
    border-style: none;
    color: white;
    background-color: red;
}

.dl_link {
    background: #ff8628;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    color: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: saddlebrown;
}

.line {
    height: 5px;
    background-color: #ff8628;
}

.icon {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, .3);
    margin-right: 10px;
    margin-left: 10px;
}

.icon-placeholder {
    display: block;
    width: 40px;
    /* 画像の幅 */
    height: 40px;
    /* 画像の高さ */
    background-color: #e0e0e0;
    /* プレースホルダーの色、または背景画像 */
}

.mid-thumb {
    height: 64px;
    width: 64px;
    border-radius: 5px;
    border: solid;
    border-color: black;
}

.song-index {
    position: fixed;
    width: auto;
    height: auto;
    right: 30px;
    bottom: 30px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    color: black;
}

.countdown-timer {
    font-weight: bold;
    position: fixed;
    width: auto;
    height: auto;
    right: 30px;
    top: 100px;
    background-color: white;
    border-color: gray;
    border-style: solid;
    border-radius: 10px;
    text-align: center;
    padding: 5px;
    border-width: 2px;
    color: gray;
}

.thumb {
    height: 128px;
    width: 128px;
    border-radius: 10px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 0.5);
    background-color: rgba(30, 30, 30, 1);
}

.thumb-placeholder {
    display: block;
    /* またはinline-block; 必要に応じて */
    height: 128px;
    /* プレースホルダーの高さを画像の高さに合わせます */
    width: 128px;
    /* プレースホルダーの幅を画像の幅に合わせます */
    border-radius: 10px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 0.5);
    background-color: rgba(30, 30, 30, 1);
    /* 読み込み中の表示色 */
}

.diff {
    background: darkslategray;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
}

.trans {
    text-decoration: none;
    color: black;
}

.trans:hover {
    text-decoration: none;
    color: black;
}

.top5-trigger {
    color: black;
}

.top5-target tr:nth-child(n+9) {
    display: none;
}

.top5-target.top5-open tr:nth-child(n+9) {
    display: table-row;
}

.border7-trigger {
    color: black;
}

.border7-target tr:nth-child(n+8) {
    display: none;
}

.border7-target.border7-open tr:nth-child(n+8) {
    display: table-row;
}

.border8-trigger {
    color: black;
}

.border8-target tr:nth-child(n+18) {
    display: none;
}

.border8-target.border8-open tr:nth-child(n+18) {
    display: table-row;
}

.tooltip-inner {
    max-width: 100%;
}

.dropdown:hover>.dropdown-menu {
    display: block;
}

.balloon {
    border-radius: 10px;
    background: rgba(255, 180, 128, .8);
    margin: 20px;
    padding-top: 20px;
    color: black
}

.pos-fix {
    transform: translate(0px, 5px);
}

.enclosure {
    border-radius: 10px;
    border: 3px dashed rgba(0, 0, 0, .5);
    padding: 10px;
}

.owner-comment {
    height: auto;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    margin: 10px;
    margin-bottom: 20px;
    margin-right: 20px;
    padding: 10px;
    white-space: pre;
}

pre {
    white-space: pre-wrap;
    line-height: 140%
}


/* match */

.song_card {
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    width: 300px;
    transition-duration: .5s;
}

.match-border {
    height: 1080px;
    width: 1920px;
    font-size: 80px;
}

.match-title {
    font-size: 45px;
    position: fixed;
    left: 50%;
    top: 85px;
    transform: translateX(-50%);
    font-family: 'Anton', sans-serif;
}

.match-resetbutton {
    font-size: 60px;
    position: fixed;
    left: 50%;
    bottom: 800px;
    transform: translateX(-50%);
}

.match-player1 {
    position: fixed;
    left: 0px;
    top: 105px;
    width: auto;
    height: auto;
    font-family: 'Anton', "M PLUS Rounded 1c", sans-serif;
}

.match-winbutton1 {
    position: fixed;
    left: 0px;
    top: 240px;
    width: auto;
    height: auto;
}

.match-player2 {
    position: fixed;
    right: 0px;
    top: 105px;
    width: auto;
    height: auto;
    font-family: 'Anton', "M PLUS Rounded 1c", sans-serif;
}

.match-winbutton2 {
    position: fixed;
    right: 0px;
    top: 240px;
    width: auto;
    height: auto;
}


/* star1 */

.match-result1_1 {
    position: fixed;
    left: 15px;
    top: 15px;
    width: auto;
    height: auto;
}

.match-result1_2 {
    position: fixed;
    left: 145px;
    top: 25px;
    width: auto;
    height: auto;
}

.match-result1_3 {
    position: fixed;
    left: 258px;
    top: 37px;
    width: auto;
    height: auto;
}

.match-result1_4 {
    position: fixed;
    left: 350px;
    top: 37px;
    width: auto;
    height: auto;
}


/* star1 */


/* star2 */

.match-result2_1 {
    position: fixed;
    right: 20px;
    top: 15px;
    width: auto;
    height: auto;
}

.match-result2_2 {
    position: fixed;
    right: 150px;
    top: 25px;
    width: auto;
    height: auto;
}

.match-result2_3 {
    position: fixed;
    right: 260px;
    top: 35px;
    width: auto;
    height: auto;
}

.match-result2_4 {
    position: fixed;
    right: 355px;
    top: 35px;
    width: auto;
    height: auto;
}


/* star2 */

.match-bomb1 {
    position: fixed;
    /* left: 600px; */
    /* top: 70px; */
    left: 720px;
    top: 0px;
    width: auto;
    height: auto;
}

.match-retrybutton1 {
    position: fixed;
    left: 600px;
    top: 250px;
    width: auto;
    height: auto;
}

.match-bomb2 {
    position: fixed;
    /* right: 600px; */
    /* top: 70px; */
    right: 720px;
    top: 0px;
    width: auto;
    height: auto;
}

.match-retrybutton2 {
    position: fixed;
    right: 600px;
    top: 250px;
    width: auto;
    height: auto;
}

.match-noretry {
    position: fixed;
    left: 50%;
    top: 250px;
    width: auto;
    height: auto;
    transform: translateX(-50%);
}

.match-accmodify{
    position: fixed;
    left: 50%;
    top: 300px;
    width: auto;
    height: auto;
    transform: translateX(-50%);
}

.match-image {
    position: fixed;
    left: 50px;
    bottom: 40px;
    width: 230px;
    height: 230px;
}

.match-info {
    position: fixed;
    font-size: 60px;
    left: 350px;
    bottom: 40px;
    width: 1200px;
    white-space: nowrap;
    overflow: hidden;
    height: auto;
    font-family: 'Fjalla One', "M PLUS Rounded 1c", sans-serif;
}

.match-highest1 {
    color: yellow;
    position: fixed;
    font-size: 60px;
    left: 420px;
    top: 10px;
    width: auto;
    height: auto;
    font-family: 'Anton', "M PLUS Rounded 1c", sans-serif;
}

.match-highest2 {
    color: yellow;
    position: fixed;
    font-size: 60px;
    left: 70%;
    top: 10px;
    width: auto;
    height: auto;
    transform: translateX(-50%);
    font-family: 'Anton', "M PLUS Rounded 1c", sans-serif;
}

.match-info #picker-suffix { /* もしくは .match-border .match-info #picker-suffix */
    margin-left: .25em;
    font-size: .6em;
}

.coordinator {
    position: fixed;
    font-size: 60px;
    left: 900px;
    top: 400px;
    width: auto;
    height: auto;
    font-size: 20px;
}

@keyframes flash {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.indent>h4 {
    font-style: italic;
}

.indent>p {
    margin-left: 40px;
}

.indent>p>a {
    color: #ff8628;
}


/* above match */

.buruburu {
    display: inline-block;
    animation: hurueru .1s infinite;
}

@keyframes hurueru {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
    25% {
        transform: translate(2px, 2px) rotateZ(1deg)
    }
    50% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }
    75% {
        transform: translate(2px, 0px) rotateZ(-1deg)
    }
    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
}

.snow {
    /*雪の色*/
    /* color: snow; */
    color: snow;
    /*雪の大きさ*/
    font-size: 10px;
    /*初期位置*/
    position: fixed;
    top: -5%;
    /*雪を適当な幅で降らせる*/
    text-shadow: 5vw -100px 2px, 10vw -400px 3px, 20vw -500px 4px, 30vw -580px 1px, 39vw -250px 2px, 42vw -340px 5px, 56vw -150px 2px, 63vw -180px 0, 78vw -220px 4px, 86vw -320px 9px, 94vw -170px 7px;
    /*雪アニメーション1*/
    animation: roll 5s linear infinite;
}


/*2つめの雪アニメーション*/

.snow2nd {
    animation: anim 10s linear infinite;
}

@keyframes roll {
    0% {
        transform: rotate(0deg);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: rotate(20deg);
        top: 100%;
        opacity: 0;
    }
}

@keyframes anim {
    100% {
        color: transparent;
        top: 150%;
    }
}


/* ナビゲーションバーの高さが50pxの場合 */

html {
    scroll-padding-top: 50px;
    /* ナビゲーションバーの高さに合わせる */
}

button:disabled {
    background-color: #cccccc;
    /* ボタンをグレーに */
    color: #666666;
    /* テキストの色も薄くする */
    cursor: not-allowed;
    /* マウスカーソルを変更 */
    border: 1px solid #999999;
    /* ボーダーも調整 */
}