.fv-logo { padding: 1.25rem; margin: 0 1.5rem; }
.fv-logo .logo_txt { width: 100%; left: 0; top: 0; animation: spin 12s linear infinite; }
.fv-main-logo { width: 83px; }

@keyframes spin {
    from {
        transform: rotate(0deg);
        }
        to {
        transform: rotate(360deg);
    }
}

.search_params { padding-bottom: 2rem; }

.media { border-top: 2px solid #000; }
.media_aside { position: sticky; top: 82px; }
.media_wrap { max-width: 1600px; margin: auto; flex-direction: row-reverse; width: 100%; }
.media_main { width: 70%; box-sizing: border-box; padding: 4.5rem 3rem; }
.media_list ul li { padding: 1.5rem 0; border-top: 1px solid #B1B1B1; position: relative; }
.media_list ul li a { transition: 0.5s; }
.media_list ul li a:hover { opacity: 0.7; }
.media_list ul li .pic { width: 280px; }
.media_list ul li .info { width: calc(100% - 310px); box-sizing: border-box; padding-right: 2rem; position: relative; }
.media_list ul li .info .tags { padding-right: 5rem; }
.media_list ul li .cat_border span { height: 33px; line-height: 33px; font-size: 14px; padding: 0 12px; }
.media_list ul li .cat_border::after { width: 1.25rem; height: 1.25rem; }
.media_list ul li .info .date { font-size: 13px; font-weight: 200; }
.media_list ul li .info .ttl { line-height: 160%; padding: 1.5rem 0 0; margin-bottom: 1.5rem; font-size: 1.5rem; position: relative; -webkit-line-clamp: 3; }
.media_list ul li .new { position: absolute; bottom: 1.5rem; right: 2rem; z-index: 1; }
.media_list ul li .new span { position: relative; font-size: 1.125rem; height: 80px; width: 80px; line-height: 80px; display: block; text-align: center; }
.media_list ul li .new span::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: ''; z-index: -1;
    background: url(../img/common/new-bg.png) no-repeat center center;
    background-size: 100% auto;
    animation: spin 12s linear infinite;
}

.media_list ul li:first-child { border: none; padding-top: 0; }
.media_list ul li:first-child .pic { width: 48%; max-width: 490px; }
.media_list ul li:first-child .info { width: 48%; }
.media_list ul li:first-child .new { top: 12rem; bottom: auto; }

.lineup { padding: 4rem 0; border-top: 2px solid #000; }
.lineup-marquee { padding: 2rem 0 0.25rem; overflow: hidden; }
.lineup ul { width: 3600px; animation: lineup_animation 120s linear infinite; }
.lineup ul.woodbox { animation-direction: reverse; }
.lineup ul li { width: 170px; text-align: center; padding: 0 15px; }
.lineup ul li .centered_img img { height: 100%; width: auto; }
.lineup ul li a:hover .centered_img img { height: 105%; }
.lineup ul li .name { font-size: 14px; font-weight: 500; padding: 1rem 0 0; }
.lineup ul li .produced { font-size: 10px; font-weight: 600; }
.lineup ul li .hashtags { padding-top: 0.5rem; }
.lineup ul li .hashtags span { font-size: 10px; padding: 0 0.25rem; height: 1rem; line-height: 1rem; margin: 0.25rem 0.25rem 0; background-color: #fff; border: 1px solid #000; border-radius: 0.25rem; display: block; }
.lineup ul li .hashtags span::before { display: inline-block; content: '♯'; font-size: 10px; }


@keyframes lineup_animation {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {

    .fv-logo { padding: 1rem; margin: 0 1rem; }
    .fv-main-logo { width: 60px; }

    .media_main { width: 100%; padding: 3rem 4%; }

    .media_list ul li .pic { width: 220px; }
    .media_list ul li .info { width: calc(100% - 250px); }
    .media_list ul li .info .ttl { padding: 1.25rem 0 0; margin-bottom: 1.25rem; font-size: 1.25rem; }
    .media_list ul li .info .ttl::after { width: 60px; height: 60px; bottom: -3rem; }

    .media_list ul li:first-child .info { width: 56%; }
    .media_list ul li:first-child .pic { width: 40%; }

    .media_list ul li .new span { width: 60px; height: 60px; line-height: 60px; font-size: 14px; }
    .media_list ul li:first-child .new { top: 10rem; }
    
    .search_box { padding-top: 2rem; }
}

/* -------------------------------------------- sp */

@media screen and (max-width: 767px) {

    .media_main { padding: 2rem 6%; }

    .media_list ul li .info .tags { padding-right: 3rem; }

    .media_list ul li .pic { width: 100px !important; }
    .media_list ul li .info { width: calc(100% - 115px) !important; }
    .media_list ul li .cat_border span { padding: 0 6px; font-size: 10px; height: 18px; line-height: 18px; }
    .media_list ul li .cat_border::after { width: 12px; height: 12px; bottom: -2px; right: -2px; }
    .media_list ul li .info { padding-right: 0; }
    .media_list ul li .info .ttl { padding: 0.75rem 0 0; margin-bottom: 0.5rem; font-size: 1rem; line-height: 150%; -webkit-line-clamp: 2; }
    .media_list ul li .info .ttl::after { width: 30px; height: 30px; bottom: -2rem; }
    .media_list ul li .info .date { font-size: 12px; }

    .media_list ul li .new { top: auto !important; bottom: 0.5rem !important; right: 0; }
    .media_list ul li .new span { font-size: 8px; width: 35px; height: 35px; line-height: 35px; }

    .lineup ul { width: 3060px; }
    .lineup ul li { width: 150px; padding: 0 10px; }
}