@charset "utf-8";

@font-face {
    font-display: swap;
    font-family: 'Itim-Regular';
    src: url(/static/font/Itim-Regular.ttf);
}
:root{
    --header-height:64px;
}
body {
}

.title {
    font-family: Itim-Regular;
}

.card-content {
    padding: 10px !important;
}

.card-title {
    height: 60px;
    overflow: hidden;
    margin-bottom: 0px !important;
    line-height: 22px !important;
}

.music-title {
    font-family: Itim-Regular;
    /*
        -webkit-text-stroke: 0.5px #000;
        text-stroke: 0.5px #000;
    */
    font-size: small !important;
    pointer-events: none;
}
.fixed-header-content{
    top:0px;
    position: fixed;
    z-index: 9999999;
    height:var(--header-height);
}
/*
.nav-wrapper{
    background-color: orange;
}
.kensaku{
    background-color: green;
}
*/
.new-content-button {
    /*    width: 100px;*/
    position: fixed;
    bottom: 10px;
    right: 10px;
    /*color: green;*/
    /* border:1px solid #888888;*/
    padding: 2pt;
    /* background-color: #ffffff;*/
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    -khtml-opacity: 0.85;
    opacity: 0.85;

}

.new-content-button circle {
    /*background-color: orange;*/
}

.uk-search {
    width: 100vw !important;
}

.uk-search-input {
    width: 100%;
}

.uk-divider-icon {
    margin: 0;
}

.watch-on-youtube {
    margin-top: 10px;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.watch-on-youtube a {
    border: 0px !important;

    /*    color: red !important;*/

}

hr {
    margin-bottom: -5px;
    border-top: 1px single #fff;
    text-align: center;
}

hr:after {
    content: '🐾';
    display: inline-block;
    position: relative;
    top: -15px;
    padding: 0 10px;
    /*background: orange;*/
    color: #bbb;
    font-size: 18px;
}

.buttons-section {
    margin-bottom: 0px;
}


.balloon-right {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #555;
    box-sizing: border-box;
    border-radius: 15px;

}

.balloon-right:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
}

.balloon-right:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #555;
    z-index: 1;
}

. balloon-right p {
    margin: 0;
    padding: 0;
}

@keyframes squash {
    0% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(10, .5) translate(0, 300px);
    }

    100% {
        transform: scale(1) translate(0, 0);
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2020-4-14 0:23:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
.rotate-center {
    -webkit-animation: rotate-center .8s cubic-bezier(.455, .03, .515, .955) infinite alternate both;
    animation: rotate-center .8s cubic-bezier(.455, .03, .515, .955) infinite alternate both
}

@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

.rotate-bottom {
    -webkit-animation: rotate-bottom .5s cubic-bezier(.455, .03, .515, .955) infinite alternate forwards;
    animation: rotate-bottom .5s cubic-bezier(.455, .03, .515, .955) infinite alternate forwards
}

/* ----------------------------------------------
 * Generated by Animista on 2020-4-14 0:32:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes rotate-bottom {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: 75% bottom;
        transform-origin: 75% bottom
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: 75% bottom;
        transform-origin: 75% bottom
    }
}

@keyframes rotate-bottom {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: 75% bottom;
        transform-origin: 75% bottom
    }

    100% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        -webkit-transform-origin: 75% bottom;
        transform-origin: 75% bottom
    }
}


/*参考：https://saruwakakun.com/html-css/reference/speech-bubble*/
.balloon4 {
    position: relative;
    padding: 15px;
    background: #fff0c6;
    border-radius: 30px;
}

.balloon4:before {
    content: "";
    position: absolute;
    right: 23%;
    width: 13px;
    height: 12px;
    bottom: -110%;
    background: #fff0c6;
    border-radius: 50%;
}

.balloon4:after {
    content: "";
    position: absolute;
    right: 12%;
    width: 20px;
    height: 18px;
    bottom: -70%;
    background: #fff0c6;
    border-radius: 50%;
}

.balloon4 p {
    margin: 0;
    padding: 0;
}


body {
    padding-bottom: 150px;
}


.flex {
    display: flex;
    flex-wrap: wrap;
}

.box {
    width: 220px;
    padding: 20px;
    margin: 0 20px 20px 20px;
    background: #666;
    color: #fff;
    box-sizing: border-box;
}


.box {
    opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02 {
    animation-delay: 0.2s;
}

.delay-time04 {
    animation-delay: 0.4s;
}

.loading {
    border: none !important;
    box-shadow: none !important;
}

#nav-mobile {
    width: 100% !important;
}

.search-area {
    width: 80% !important;
}

#search {
    display: none;
}

/*svg {*/
/*    color: #ffab40;*/
/*}*/

/*nav{*/
/*    margin-top: -3rem;*/
/*    z-index: 10;*/
/*    position: fixed;*/
/*}*/
.slider {
    /*margin-top: var(--header-height);*/
}
.content{
        margin-top: var(--header-height);

}

.slider .slides {
    background-color: white !important;
}

.icon {
    /*    vertical-align: inherit!!!importnat;*/
    margin-right: 4% !important;
    margin-left: 4% !important;

}

.dropdown-content {
    min-width: 200px;
}

.menu-icon {
    margin-right: 0% !important;
    margin-left: 0% !important;

}

.copyright-pre {
    background-color: #222;
    color: rgba(255, 255, 255, .7);
    border-color: #222;
}

.icons {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.icons a {
    text-decoration: none;

}

.material-icons {
    display: inline-flex;
    user-select: none;
    /*    vertical-align: middle;*/
}

.tab-text {
    font-size: 24px !important;
}

.expand-search-area {
    width: 60%;
}

.show-always {
    /*transform: translateX(0%) !important;*/
}

.list-section {
    margin-top: 1rem;
}

.card {
    border-radius: 10px;
    overflow: hidden;
}

.uk-modal-body, .modal {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.gray-collapsible {
    background-color: gray;
}

#control-ui {

}

input[type=range] + .thumb.active .value {
    margin-left: -1%;
    margin-top: -53%;
    font-size: 10px
}
input[type=range] + .thumb {
display: none;
}

.navbar-fixed nav {
    display: flex;
    justify-content: center;
    align-items: center;
    /*gap:10px;*/
    border-radius: 10px !important;
    /*left: calc(50% - 300px / 2);*/
    left: 20px;
    flex-direction: column;
    width: auto;
    height: auto;
    /*top: calc(80% - 50px / 2);*/
    bottom:20px;
    line-height: 0px;
}

.navbar-fixed {
    height: 0px;
}
.playing-title{
    line-height: 24px;
}

.navbar-fixed nav #control-ui {
    display: flex;
    margin: 0px;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.navbar-fixed nav #control-ui .slider-zone {
    display: inline;
    height: auto;
    width: 250px;
}

.navbar-fixed nav #control-ui .material-icons {
    display: inline;
        height: 24px;
    line-height: 24px;
}

.navbar-fixed nav #control-ui #volume-slider {
    display: inline;
}

.play-controller{
    padding: 8px;
}
@media(max-width:600px){
    #controller{
        display: none !important;
    }
}
.about-pre {
    background-color: #222;
    color: rgba(255, 255, 255, .7);
    border-color: #222;
    white-space: pre-wrap ;
}