@media only screen and (max-width: 767px) {
    html {
        font-size: 2.33vw;
    }

    body::before {
        background-image: url(../img/bg_sp.jpg);
    }

    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }

    .container {
        width: 39.2rem;
    }

    .sub-page {
        padding-top: 10rem;
        padding-bottom: 6.2rem;
    }

    .main-frame {
        padding: 2.5rem 1.2rem;
    }

    .inner-frame {
        padding: 2.6rem;
    }

    .pager {
        margin-top: 3.2rem;
    }

    .title-area {
        margin-bottom: 1.6rem;
    }

    .page-title {
        line-height: 4.1rem;
    }

    .select-wrap select {
        padding: 0.4rem 2.8rem 0.4rem 2.6rem;
    }

    /* header */

    header {
        top: 2.4rem;
    }

    .header-wrap {
        width: 39.1rem;
    }

    .navi-btn-wrap {
        display: block;
        position: fixed;
        background-color: rgb(250 167 165 / 51%);
        width: 4.2rem;
        height: 4.2rem;
        border-radius: 50%;
        right: 1.2rem;
        top: 1.4rem;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navi-btn {
        width: 2.3rem;
        position: relative;
        cursor: pointer;
        display: inline-block;
        z-index: 1;
        height: 1.6rem;
        padding-left: 0.1rem;
    }

    .navi-btn span {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 5px;
        transition: .3s;
    }

    .navi-btn span:nth-of-type(2) {
        top: 0.8rem;
        width: 1.6rem;
    }

    .navi-btn span:last-of-type {
        top: 1.6rem;
        width: 0.8rem;
    }

    .navi-btn-on span {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        transition: .3s;
    }

    .navi-btn-on span:first-of-type {
        transform: rotate(-45deg);
        width: 100%;
    }

    .navi-btn-on span:nth-of-type(2) {
        transform: translateX(0);
        opacity: 0;
    }

    .navi-btn-on span:last-of-type {
        transform: rotate(45deg);
        width: 100%;
        top: 0;
    }

    #gnav {
        display: none;
        background-color: #FA918F;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        height: 100svh;
        overflow-y: scroll;
        padding: 7.6rem 2rem 2rem 2rem;
    }

    #gnav::after {
        content: "";
        display: block;
        width: calc(100% - 4rem);
        height: calc(100vh - 9.6rem);
        height: calc(100dvh - 9.6rem);
        height: calc(100svh - 9.6rem);
        background-image: url(../img/menu_bg.jpg);
        position: absolute;
        top: 7.6rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        background-size: cover;
    }

    #gnav ul {
        flex-direction: column;
        padding: 8rem 3.8rem;
        gap: 2rem;
        position: relative;
        z-index: 2;
    }

    #gnav ul li a {
        font-size: 3.6rem;
    }

    #gnav ul li.active a::before {
        display: none;
    }

    /* footer */

    .footer-wrap {
        width: 38.7rem;
        flex-direction: column;
        align-items: center;
        gap: 1.8rem;
        padding: 1.4rem 0 1.8rem;
    }

    footer .logo {
        width: 20rem;
    }

    footer .info {
        width: 100%;
        justify-content: space-between;
        padding-bottom: 0;
    }

    /* TOP */

    #top .container {
        width: 39.2rem;
    }

    .kv {
        position: relative;
    }

    .kv .inner {
        width: 39.1rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .kv h1 img {
        width: 29.5rem;
    }

    .top-news {
        padding-top: 3.3rem;
        padding-bottom: 6.5rem;
    }

    /* NEWS */

    .news-frame {
        padding: 2rem 1.65rem 2.8rem;
        position: relative;
    }

    .news-head .more-link {
        position: absolute;
        bottom: 2.6rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .news-list li:not(:last-child) {
        margin-bottom: 1rem;
    }

    .news-list li a {
        padding: 1rem 2.4rem 1rem 1.2rem;
        min-height: auto;
        gap: 0.8rem;
        border-radius: 5rem;
    }

    .news-list li a .detail {
        width: calc(100% - 8rem);
    }

    .news-list li .icon {
        width: 7.4rem;
    }

    .news-list li a .date {
        margin-bottom: 0.6rem;
    }

    .news-list li a .new {
        margin-left: 0.4rem;
    }

    .news-list li a .title {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
    }

    .news-frame .link-wrap {
        margin-top: 4rem;
    }

    #news .title-area {
        padding-left: 2rem;
    }

    #news.single .title-area {
        padding: 2rem 2.4rem 0.8rem;
    }

    #news.single .date {
        font-size: 1.4rem;
    }

    #news.single .title {
        line-height: 2.8rem;
        font-size: 1.8rem;
        margin-bottom: 1.6rem;
    }

    #news.single .frame-bottom {
        padding: 3.2rem 0 2.8rem;
    }

    /* DISCOGRAFY */

    #discography .title-area {
        padding: 2rem 2.4rem 0.8rem;
    }

    #discography .inner-frame {
        padding: 3.6rem 4rem;
    }

    #discography .card-grid {
        display: flex;
        flex-direction: column;
        gap: 2.8rem;
    }

    #discography .frame-bottom {
        padding: 3.2rem 0 2.8rem;
    }

    /* BIOGRAPHY */

    #biography .main-frame {
        padding-bottom: 4rem;
    }

    #biography .title-area {
        padding: 2rem 2.4rem 0.8rem;
    }

    #biography .inner-frame {
        padding: 2.6rem;
    }

    #biography .content-wrap {
        flex-direction: column;
    }

    #biography .img-area {
        width: 100%;
        order: 1;
    }

    #biography .text-area {
        order: 2;
        line-height: 2.8rem;
    }

    /* MOVIE */

    #movie .title-area {
        padding: 2rem 2.4rem 0.8rem;
    }

    #movie .inner-frame {
        padding: 2rem 1.4rem;
    }

    #movie .movie-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }

    #movie .movie-item {
        height: 19.8rem;
    }

    #movie .frame-bottom {
        padding: 3.2rem 0 2.8rem;
    }

    /* MEDIA */

    #media .main-frame {
        position: relative;
        padding: 2.2rem 1.8rem 3.6rem;
    }

    #media .tab-wrap {
        display: block;
    }

    #media .cat-tab {
        display: flex;
        margin-bottom: 1.2rem;
    }

    #media .tab-button {
        flex: 1 0 auto;
        margin: 0;
        padding: 0;
    }

    #media .tab-button a {
        min-width: auto;
        padding: 0.4rem;
        display: block;
        width: 100%;
    }

    #media .tab-wrap .select-wrap {
        position: absolute;
        right: 1.6rem;
        top: 3.2rem;
    }

    .media-list li:not(:last-child) {
        margin-bottom: 1rem;
    }

    .media-item {
        display: block;
        border-radius: 4rem;
    }

    .media-item .cat {
        width: auto;
        padding: 1.4rem 0 1rem;
    }

    .media-item .title {
        width: auto;
        border-right: none;
        border-bottom: 1px solid #FAAEAB;
        padding: 1.6rem 0 1.2rem;
        margin: 0 2.2rem;
    }

    .media-item .contents {
        padding: 1.2rem 0 1.6rem;
        margin: 0 2.2rem;
    }

    #media .regular {
        margin-top: 4rem;
    }

    /*LIVE*/

    #live .main-frame {
        padding: 2rem 1.6rem;
    }

    #live .text-area {
        padding-left: 0.4rem;
    }

    .live-list li:not(:last-child) {
        margin-bottom: 1.2rem;
    }

    .live-item {
        border-radius: 4rem;
        flex-wrap: wrap;
    }

    .live-item .date {
        font-size: 1.4rem;
        width: 7.2rem;
    }

    .live-item .cat {
        font-size: 1.3rem;
        padding: 0.3rem;
        width: 7.6rem
    }

    .live-item .title {
        padding: 0;
        width: 100%;
        min-height: auto;
        padding-top: 1.2rem;
    }

    .live-item .title p {
        width: 100%;
        -webkit-line-clamp: 3;
    }

    #live.single .title-area {
        padding: 2rem 2.4rem 0.8rem;
    }

    #live.single .inner-frame {
        padding: 2.4rem;
    }

    #live.single .live-head {
        flex-wrap: wrap;
        margin-bottom: 1.6rem;
    }

    #live.single .date {
        font-size: 1.6rem;
    }

    #live.single .cat {
        min-width: 7.6rem;
        font-size: 1.3rem;
        padding: 0.3rem;
        margin: 0 0 0 1.6rem;
    }

    #live.single .time {
        width: 100%;
        margin-top: 0.8rem;
        font-size: 1.5rem;
    }

    #live.single .title {
        line-height: 2.8rem;
        font-size: 1.8rem;
        margin-bottom: 4rem;
    }

    #live.single .contents {
        line-height: 2.8rem;
    }

    #live.single .contents .thumbnail {
        margin-bottom: 4rem;
    }

    #live.single .frame-bottom {
        padding: 3.2rem 0 2.8rem;
    }

    /* LINK */

    #link .main-frame {
        padding: 2rem 1.6rem;
    }

    #link .title-area {
        padding-left: 0.4rem;
    }

    .link-list li a {
        padding: 1.2rem 1rem;
        gap: 1.4rem;
    }

    .link-icon {
        width: 6rem;
    }
}