@media screen and (max-width: 768px) {
    html, body {
        min-height: 100vh;
        height: auto;
        overflow-y: auto;
    }

    /* ------------------------------
    #News banner
    ------------------------------ */
    .p-news {
        width: 100%;
        margin-bottom: 36px;
    }

    .p-news__container {
        background-color: #000;
        border: solid 1px rgba( 255, 255, 255, 0.5 );
        color: rgba( 255, 255, 255, 0.76 );
        font-family: 'Kozuka Mincho Pro', '小塚明朝 Pro', 'Yu Mincho', YuMincho, '游明朝体', 'ヒラギノ明朝 ProN','Hiragino Mincho ProN', serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.05em;
        line-height: 20px;
        text-decoration: none;
        display: block;
        width: 100%;
        margin-bottom: 24px;
    }

    .p-news__container:hover::after {
        content: '';
        background-color: #000;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.34;
    }

    .p-news__image {
        display: block;
        width: 100%;
        object-fit: contain;
    }

    .p-news__summary {
        padding: 8px 16px;
    }

    .p-news__date {
    }

    .p-news__headline {
    }

    .is-hidden--sp {
        display: none;
    }

    /* ------------------------------
    #cover
    ------------------------------ */
    #cover {
        position: relative;
        z-index: 1;
        padding: 32px;
        /*height: calc( 100% - 64px);*/
        height: 100%;
        overflow: hidden;
        -ms-transition: opacity 800ms ease;
        -moz-transition: opacity 800ms ease;
        -webkit-transition: opacity 800ms ease;
        transition: opacity 800ms ease;
    }

    #cover header {
        margin-bottom: 48px;
    }

    #cover h1 {
        display: block;
        background-image: url("../images/title.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 0;
        padding-left: 100%;
        height: 96px;
        overflow: hidden;
        margin-bottom: 36px;
    }

    #cover h2 {
        display: block;
        background-image: url("../images/subtitle01.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 0;
        padding-left: 256px;
        height: 36px;
        overflow: hidden;
        margin-bottom: 12px;
    }

    #cover h3 {
        display: block;
        background-image: url("../images/subtitle02.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 0;
        padding-left: 256px;
        height: 12px;
        overflow: hidden;
    }

    #cover #navigation {
        overflow: hidden;
        margin-bottom: 16px;
    }

    #cover #navigation li {
        display: block;
        height: 13px;
        margin-bottom: 24px;
    }

    #cover #navigation li a {
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 0;
        height: 13px;
        overflow: hidden;
    }

    #cover #navigation li.introduction { width: 84px; }
    #cover #navigation li.introduction a {
        background-image: url("../images/sp_navigation_introduction.png");
        padding-left: 84px;
    }
    #cover #navigation li.about { width: 199px; }
    #cover #navigation li.about a {
        background-image: url("../images/sp_navigation_about.png");
        padding-left: 199px;
    }
    #cover #navigation li.history { width: 50px; }
    #cover #navigation li.history a {
        background-image: url("../images/sp_navigation_history.png");
        padding-left: 50px;
    }
    #cover #navigation li.discography { width: 86px; }
    #cover #navigation li.discography a {
        background-image: url("../images/sp_navigation_discography.png");
        padding-left: 86px;
    }
    #cover #navigation li.facebook { width: 65px; }
    #cover #navigation li.facebook a {
        background-image: url("../images/sp_navigation_facebook.png");
        padding-left: 65px;
    }
    #cover #navigation li.links { width: 37px; }
    #cover #navigation li.links a {
        background-image: url("../images/sp_navigation_links.png");
        padding-left: 37px;
    }

    #cover #navigation li.shop { width: 138px; }
    #cover #navigation li.shop a {
        background-image: url("../images/navigation_shop.png");
        padding-left: 138px;
        height: 13px;
    }

    #cover #navigation li.news { width: 36px; }
    #cover #navigation li.news a {
        background-image: url("../images/navigation_news.png");
        padding-left: 36px;
        height: 10px;
    }

    #cover p.copyright {
        display: block;
        background-image: url("../images/sp_copyright.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 0;
        padding-left: 242px;
        height: 9px;
        overflow: hidden;
        opacity: 0.67;
        padding-bottom: 16px;
    }

    #cover .sound-samples {
        color: #fff;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Yu Gothic', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
        line-height: 32px;
        margin-bottom: 32px;
    }

    #cover .sound-samples  .sound-samples__headline {
        font-size: 13px;
    }

    #cover .sound-samples .sound-samples__list {
    }

    #cover .sound-samples .sound-samples__list li {
        color: #fff;
        font-size: 11px;
        letter-spacing: 0.05em;
        list-style-position:inside;
        list-style-type: decimal;
    }

    #cover .sound-samples .sound-samples__list li a {
        color: #fff;
        text-decoration: none;
    }

    #cover .sound-samples .sound-samples__list li a:hover {
        opacity: 0.67;
    }

    #cover .banner_online-shop {
        display: block;
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-bottom: 48px;
    }

    #cover .banner_online-shop img {
        display: block;
        object-fit: contain;
        object-position: top left;
        width: 100%;
        height: 100%;
    }

    /* ------------------------------
    #background
    ------------------------------ */
    #background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.67;

        -ms-transition: opacity 800ms ease;
        -moz-transition: opacity 800ms ease;
        -webkit-transition: opacity 800ms ease;
        transition: opacity 800ms ease;
    }

    #background li {
        background-position: center center;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;

        -ms-transition: opacity 3200ms ease;
        -moz-transition: opacity 3200ms ease;
        -webkit-transition: opacity 3200ms ease;
        transition: opacity 3200ms ease;
    }

    #background li.current {
        opacity: 1;
        z-index: 1;
    }

    /* ------------------------------
    #detail
    ------------------------------ */
    #detail {
        display: block;
        background: rgba( 0, 0, 0, 0.68 );
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height: 100%;
        z-index: 10;
        overflow: visible;
        opacity: 0;

        -ms-transition: opacity 400ms ease;
        -moz-transition: opacity 400ms ease;
        -webkit-transition: opacity 400ms ease;
        transition: opacity 400ms ease;
    }

    #detail.show {
        opacity: 1;
    }

    #detail.hide {
        opacity: 0;
    }

    #detail div.container {
        background: #000;
        border: none;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        opacity: 0;

        -ms-transition: opacity 400ms ease;
        -moz-transition: opacity 400ms ease;
        -webkit-transition: opacity 400ms ease;
        transition: opacity 400ms ease;
    }

    #detail div.show {
        border: none;
        opacity: 1;
    }

    #detail div.hide {
        border: none;
        opacity: 0;
    }

    #detail iframe {
        border: none;
        width: 100%;
        height: 100%;
    }

    #detail div.close {
        display: block;
        background: url("../images/sp_close.png");
        background-size: contain;
        background-position: center center;
        position: fixed;
        top: 0;
        right: 0;
        width: 0;
        height: 32px;
        padding-left: 32px;
        z-index: 10;
        overflow: hidden;
    }

    #detail div.close:hover {
        opacity: 1;
    }
}