body {
    min-width: 1280px;
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴシック','Hiragino Sans','Meiryo UI',YuGothic,'Yu Gothic','ＭＳ ゴシック','Arial',sans-serif;
}
.serif {
    font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ＭＳ 明朝', 'MS Mincho','Times New Roman',serif;
}
.link__txt--white {
    color: #fff;
    text-decoration: underline;
}
header {
    position: relative;
    z-index: 5;
}
#contents {
    background-color: #000;
    position: static;
    z-index: 1;
}
#contents img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
article {
    background: url('../img/bg_subpage.png') repeat-y center top;
}
.main__area {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}
.cnts__area {
    text-align: center;
    padding-bottom: 40px;
}
footer {
    position: relative;
    z-index: 3;
}

.logo__vp-sub {
    display: inline-block;
    margin-left: 40px;
}
.logo__link img {
    width: 181px;
    height: auto;
}
.ttl__page img {
    height: 84px !important;
    width: auto;
}

/* ==============================
twitterslide
============================== */
.tw__area {
    position: relative;
    z-index: 4;
}
#timeline {
    z-index: 40;
    cursor: pointer;
    position: fixed;
    top: 70px;
    left: -290px;
    width: 290px;
    padding: 0px 40px 0 0;
    background: url('../../img/tab_tw_slide.png') no-repeat right top;
    height: 260px;
}
#timeline .timeline-inner {
    overflow: auto;
    overflow-x: hidden;
    background: #2a2f33;
    margin: -72px auto 0 auto;
    overflow-y: hidden;
    padding-top: 37px;
    line-height: 1;
}
.twitter-timeline {
    height: 100% !important;
    width: 100% !important;
    vertical-align: bottom;
}
/* ==============================
641px~
============================== */
@media screen and (min-width: 641px) {
    /* ==============================
    ナビゲーション
    ============================== */
    .nav__wrap {
        width: 1260px;
        position: absolute;
        margin: 0 auto;
        left: 0; right: 0;
        z-index: 4;
    }
    .nav__list {
        display: inline-block;
        float: right;
        padding: 15px 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)),color-stop(15%, rgba(0,0,0,0.6)),color-stop(85%, rgba(0,0,0,0.6)),to(rgba(0,0,0,0)));
        background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 15%,rgba(0,0,0,0.6) 85%,rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
    }
    .nav__list li {
        padding: 0 25px;
        border-right: 1px solid #fff;
        position: relative;
    }
    .nav__link {
        font-size: 14px;
        color: #fff;
        text-shadow: 0 0 3px #1c3d69, 0 0 6px #2b5792, 0 0 10px #3c75c1;
        letter-spacing: 1px;
        text-decoration: none;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .nav__link:hover,
    .nav__link.crt {
        color: #fff;
        text-shadow: 0 0 3px #14d0f5, 0 0 6px #14d0f5, 0 0 10px #14d0f5;
    }
    .nav__link-dead {
        font-size: 14px;
        color: #828080;
        letter-spacing: 1px;
    }
    .drawer-toggle {
        display: none;
    }
    .drawer-menu-item.new::after {
        content: 'NEW';
        color: #ef7b00;
        position: absolute;
        bottom: -12px;
        font-size: 9px;
        left: 0;
        right: 0;
        margin: auto;
        display: block;
        text-align: center;
    }
}
/* ==============================
~640px
============================== */
@media screen and (max-width: 640px) {
    body {
        min-width: unset;
    }
    article {
        background-size: cover;
    }
    #contents {
        z-index: 3;
    }
    .twitter-timeline {
        height: 80vw !important;
        width: calc(100% - 2.3%) !important;
    }
    .drawer-hamburger {
        background-color: rgba(0,0,0,0.6);
        border-radius: .5em;
        top: calc((100vw * 0.08) + 21px);
        padding-top: 0.8rem;
        padding-right: 0.7rem;
        padding-bottom: 1.5rem;
        padding-left: 0.7rem;
    }
    .drawer-hamburger:hover {
        background-color: rgba(0,0,0,0.6);
    }
    .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger { right: 0.5rem; }
    .drawer-hamburger-icon,
    .drawer-hamburger-icon::before,
    .drawer-hamburger-icon::after {
        background-color: #fff;
    }
    .drawer-nav {
        width: 80vw;
        background-color: rgba(0,0,0,0.8);
    }
    .drawer--right .drawer-nav {
        right: -80vw;
    }
    .drawer--right.drawer-open .drawer-hamburger {
        right: 80vw;
    }
    .drawer-menu-item {
        text-align: center;
    }
    .nav__link {
        color: #fff;
        font-size: 8vw;
        text-decoration: none;
        position: relative;
    }
    .nav__link-dead {
        font-size: 8vw;
        text-decoration: none;
        position: relative;
    }
    .drawer-menu-item.new a::after {
        content: 'NEW';
        color: #ef7b00;
        position: absolute;
        top: -.5em;
        font-size: 2.5vw;
        right: -2.5em;
        margin: auto;
        display: block;
        text-align: center;
    }
}