html, body {
    background: #000;
    width: 100vw;
    height: 100vh;
    /* overflow: hidden; */
}

#index {
    display: block;
    position:relative;
    width:100%;
    /* height: 100%; */
}

@media screen and (min-width: 769px) {

    /* ------------------------------
    News banner
    ------------------------------ */
    .p-news {
        position: fixed;
        top: 0;
        right: 104px;
        bottom: 0;
        width: max-content;
        height: 701px;
        z-index: 5;
        margin: auto;
    }

    .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;
        position: relative;
        width: 256px;
        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--pc {
        display: none;
    }

    /* ------------------------------
    #cover
    ------------------------------ */
    
    #cover { 
        display: flex;
        align-items: center;
        position: absolute;
        width: 100vw;
        height: 100vh;
        z-index: 5;
        padding: 0 104px;
        overflow: hidden;
        -ms-transition: opacity 800ms ease;
        -moz-transition: opacity 800ms ease;
        -webkit-transition: opacity 800ms ease;
        transition: opacity 800ms ease;
    }
    
    #cover .container {
        display: block;
        
    }

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

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

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

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

    #cover #navigation {
        overflow: hidden;
        margin-left: 54px;
        margin-bottom: 12px;
    }

    #cover #navigation li {
        display: block;
        min-height: 10px;
        margin-bottom: 22px;
    }

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

    #cover #navigation li a:hover {
        opacity: 0.67;        
    }

    #cover #navigation li.introduction { width: 84px; }
    #cover #navigation li.introduction a {
        background-image: url("../images/navigation_introduction.png");
        padding-left: 84px;
    }

    #cover #navigation li.about { width: 199px; }
    #cover #navigation li.about a {
        background-image: url("../images/navigation_about.png");
        padding-left: 199px;
    }

    #cover #navigation li.history { 
        width: 49px;
        height: 13px;
        margin-bottom: 21px;
    }
    #cover #navigation li.history a {
        background-image: url("../images/navigation_history.png");
        padding-left: 49px;
        height: 13px;
    }

    #cover #navigation li.discography { 
        height: 13px;
        margin-bottom: 21px;
    }
    #cover #navigation li.discography a {
        background-image: url("../images/navigation_discography.png");
        padding-left: 86px;
        height: 13px;
    }

    #cover #navigation li.facebook { width: 65px; }
    #cover #navigation li.facebook a {
        background-image: url("../images/navigation_facebook.png");
        padding-left: 65px;
    }

    #cover #navigation li.links { width: 37px; }
    #cover #navigation li.links a {
        background-image: url("../images/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/copyright.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 0;
        padding-left: 242px;
        height: 9px;
        overflow: hidden;
        opacity: 0.67;
    }

    #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-left: 54px;
        margin-bottom: 32px;
    }

    #cover .sound-samples  .sound-samples__headline {
        font-size: 13px;
        line-height: 18px;
        padding-bottom: 24px;
    }

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

    #cover .sound-samples .sound-samples__list li {
        font-size: 11px;
        line-height: 12px;
        color: #fff;
        letter-spacing: 0.05rem;
        list-style-position:inside;
        list-style-type: decimal;
        margin-left: 12px;
        margin-bottom: 12px;
    }

    #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: 390px;
        height: 42px;
        margin-left: 54px;
        margin-bottom: 44px;
    }

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

    #cover .banner_online-shop:hover img {
        filter: grayscale( 100% );
    }

    /* ------------------------------
    #background
    ------------------------------ */
    #background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        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;
        top: 0;
        left: 0;
        width:100vw;
        height: 100vh;
        z-index: 10;
        overflow: hidden;
        opacity: 0;

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

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

    #detail.show {
        opacity: 1;
    }

    #detail.hide {
        opacity: 0;
    }

    #detail div.container {
        display: block;
        background: #000;
        border-left: solid 0 #fff;
        border-right: solid 0 #fff;
        position: relative;
        width: 960px;
        height: 100vh;
        margin: 0 auto;
        opacity: 0;

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

    #detail div.show {
        border-width: 8px;
        opacity: 1;
    }

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

    #detail div.close {
        display: block;
        background: url("../images/close.gif");
        background-size: contain;
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        padding-left: 64px;
        height: 64px;
        overflow: hidden;
        cursor: pointer;
        z-index: 10;
    }

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