@charset "UTF-8";

/* onair-archive
---------------------------------------------------*/
#onair-archive {
    margin-bottom: 96px;
}
#onair-archive .ttl-section {
    margin-bottom: 64px;
}
#onair-archive .onair-list-wrap {
    width: 96%;
    max-width: 948px;
    margin: 0 auto 80px;
}
/* archive-page(pager) */
ul.archive-page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
/* top */
ul.archive-page + #archive-info {
    margin-top: 64px;
}
/* bottom */
#archive-info + ul.archive-page {
    margin-top: 64px;
}
ul.archive-page li {
    margin: 0.2em 1.5em;
}
ul.archive-page li a {
    color: var(--primary-color);
    font-size: var(--font-size-s);
    font-weight: bold;
}
ul.archive-page li a.active {
    text-decoration: underline;
}
/* archive-info */
#archive-info li {
    display: flex;
    align-items: flex-start;
    width: 100%;
    background-color: var(--white-color);
    border-radius: 32px;
    padding: 24px 14px 24px 24px;
}
#archive-info li + li {
    margin-top: 40px;
}
#archive-info li .archive-image {
    width: 38%;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 4%;
}
#archive-info li .archive-image img {
    width: 100%;
}
#archive-info li .archive-credit {
    width: 58%;
}
#archive-info li .archive-credit .archive-date {
    line-height: 1.6em;
    color: var(--main-color);
    font-size: var(--font-size-m);
    font-weight: bold;
    letter-spacing: 0.12em;
    margin-bottom: 0.8em;
}
#archive-info li .archive-credit .archive-ttl {
    line-height: 1.6em;
    color: var(--point-color);
    font-size: var(--font-size-m);
    font-weight: bold;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--point-color);
    padding-bottom: 0.8em;
    margin-bottom: 0.8em;
}
#archive-info li .archive-credit .archive-comment {
    line-height: 1.8em;
    white-space: pre-line;
    margin-bottom: 32px;
}
/* archive-link */
a.archive-link {
    position: relative;
    display: block;
    width: 98%;
    max-width: 162px;
    text-align: left;
    color: var(--white-color);
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    background-image: url('../img/common/icon_arrow.svg');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 28px 28px;
    border-radius: 2em;
    padding: 10px 24px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin: 0 0 0 auto;
}
a.archive-link:hover {
    background-color: var(--hover-color);
}
a.archive-link .span {
    display: inline-block;
    line-height: 1;
    color: var(--white-color);
    font-size: var(--font-size-s);
    font-weight: 700;
    letter-spacing: 0.12em;
    transform: rotate(0.05deg);
}

/* 768 */
@media screen and (max-width: 768px) {
    #onair-archive {
        margin-bottom: 18.9473vw;
    }
    #onair-archive .ttl-section {
        margin-bottom: 8.4210vw;
    }
    #onair-archive .onair-list-wrap {
        width: 87.3684vw;
        margin-bottom: 16.8421vw;
    }
    /* archive-page(pager) */
    /* top */
    ul.archive-page + #archive-info {
        margin-top: 10.5263vw;
    }
    /* bottom */
    #archive-info + ul.archive-page {
        margin-top: 10.5263vw;
    }
    ul.archive-page li {
        margin: 0.2em 1em;
    }
    /* archive-info */
    #archive-info li {
        display: block;
        border-radius: 8.4210vw;
        padding: 3.1578vw 3.1578vw 8.4210vw 3.1578vw;
    }
    #archive-info li + li {
        margin-top: 8.4210vw;
    }
    #archive-info li .archive-image {
        width: 100%;
        border-radius: 4.2105vw;
        margin-right: 0;
    }
    #archive-info li .archive-credit {
        width: 100%;
        margin-top: 4.2105vw;
    }
    #archive-info li .archive-credit .archive-date {
        letter-spacing: 0.06em;
    }
    #archive-info li .archive-credit .archive-ttl {
        font-size: var(--font-size-n);
    }
    #archive-info li .archive-credit .archive-comment {
        margin-bottom: 8.4210vw;
    }
    /* archive-link */
    a.archive-link {
        max-width: 42.6315vw;
        background-position: right 2.6315vw center;
        background-size: 7.3684vw 7.3684vw;
        padding: 2.6315vw 6.3157vw;
    }
}