@charset "utf-8";

/*============================
       DMM Style Sheet
==============================*/


/* =====================
  outline
===================== */
body {
    background-color: #1a1a1a;
}

.galmetal {
    position: relative;
    margin: 0 -12px;/* 左右の余白を消す */
    color: #ccc;
    text-align: center;
}

.galmetal h1,
.galmetal h2 {
    margin: 0;
}

.galmetal button {
    margin: 0 auto;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}

/* =====================
  .cont-dmm
===================== */
.galmetal .cont-dmm {
    width: 100%;
    height: 30px;
    border-bottom: 1px #ccc solid;
    background: #fff;
}

.galmetal .link-dmmgames {
    float: left;
    margin: 2px 0 0 20px;
}

.galmetal .link-dmmweb {
    float: right;
    height: 15px;
    margin: 8px 20px 0 0;
}

.galmetal .cont-dmm::after {
    display: table;
    clear: both;
    content: ' ';
}

/* =====================
  .cont-galmetal
===================== */
.galmetal .cont-galmetal  {
    position: relative;
}

.galmetal .cont-galmetal a {
    text-decoration: none;
}

/*  .bg-video
---------------------　*/
.galmetal .bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: -10;
    opacity: 0;
}

.galmetal .is-bgvideo-none {
    position: fixed;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: -5;
}

/*  .sect-main
---------------------　*/
.galmetal .sect-main {
    padding-bottom: 219px;
}

/*  .sect-gnavi
---------------------　*/
.galmetal .sect-gnavi {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 42px;
    width: 100%;
    height: 77px;
    margin: auto;
    background: url('http://p.dmm.com/p/general/netgame/feature/galmetal/common/bg_gnavi.jpg') repeat-x center top;
    z-index: 10;
}

.galmetal .logo_gnavi,
.galmetal .sect-gnavi nav,
.galmetal .list_gnavi,
.galmetal .btn-gnavi {
    display: inline-block;
}

.galmetal .logo_gnavi {
    margin: 6px 20px 0 0;
}

/* li間の隙間調整 */
.galmetal .list-gnavi {
    height: 77px;
    letter-spacing: -4px;
}

.galmetal .btn-gnavi {
   vertical-align: bottom;
}

.galmetal .btn-gnavi a {
    display: block;
    height: 77px;
    padding: 15px 20px 15px 23px;
    border-top: 1px solid #ee4f5c;
    border-right: 1px solid #b3000e;
    background-color: #e60012;
    box-sizing: border-box;
    transform: skew(-15deg);
    -webkit-transform: skew(-15deg);
    letter-spacing: 0;
}

.galmetal .btn-gnavi:first-child a {
    border-left: 1px solid #b3000e;
}

.galmetal .btn-gnavi a:hover,
.galmetal .btn-gnavi a:focus,
.galmetal .btn-gnavi .is-btn-none {
    border-top: 1px solid #741616;
    border-right: 1px solid #571011;
    background-color: #741616;
}

.galmetal .btn-gnavi ruby {
    display: block;
    transform: skew(15deg);
    -webkit-transform: skew(15deg);
}

.galmetal .btn-gnavi rt {
    display: table-header-group;
}

.galmetal .btn-gnavi rb {
    display: block;
    margin: 4px 0 0 -1px;
}

.galmetal .btn-gnavi:nth-child(2) rb,
.galmetal .btn-gnavi:nth-child(3) rb,
.galmetal .btn-gnavi:nth-child(4) rb {
    margin-top: 8px;
}

/*  .pop-special
---------------------　*/
.galmetal .pop-special {    
    display: none;    /*  にゃんご非表示 */
    visibility: visible;
    position: absolute;
    top: -111px;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 650px;
}

.js-available .fn-pop {
    visibility: hidden;
}

/* =====================
  footer
===================== */
.galmetal footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 0;
    background-color: #1a1a1a;
    z-index: 10;
}

.galmetal footer li {
    display: inline-block;
    vertical-align: bottom;
}

.galmetal .tx-copyright small {
    font-size: 12px;
}

.tx-copyright + .tx-copyright {
    margin-left: 20px;
}

/* =====================
  画面幅調整
===================== */
@media screen and (max-width: 1050px) {
    .galmetal,
    .galmetal .cont-galmetal,
    .galmetal .sect-gnavi,
    .galmetal footer {
        width: 1050px;
    }
}

#fancybox-overlay {
    position: fixed;
}