@charset "UTF-8";
/* ==========================================================
  demo.css
  for demo-information Page
========================================================== */
body#download {
    background-color: black;
    font-size: 4.5vw;
    letter-spacing: -0.05em;
}

@media screen and (min-width: 768px) {
    body#download {
        font-size: 16px;
    }
}

.wrapper {
    width: 100%;
    margin: 0;
    background-color: black;
    /*** /contents ***/
}

.wrapper .contents {
    width: 88%;
    margin: 0;
    background-color: #e5e5e5;
}

.wrapper .contents h1 {
    margin: 0 auto;
    padding: 13vw 0;
    position: relative;
    font-family: "FOT-マティス Pro DB", MatissePro-DB, "マティスPro DB", serif;
    font-size: 1.75em;
    line-height: 1;
    color: #535353;
    text-align: center;
}

.wrapper .contents h1::before {
    z-index: 1;
    content: '';
    display: block;
    width: 15vw;
    height: 22vw;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    background: url("../images/demo/mark.png") no-repeat top center/cover;
}

@media screen and (min-width: 768px) {
    .wrapper .contents h1 {
        font-size: 66px;
        padding: 56px 0;
        letter-spacing: -0.1em;
    }
    .wrapper .contents h1::before {
        width: 94px;
        height: 134px;
        top: 50%;
        left: 50%;
    }
}

.wrapper .contents .shadow {
    box-shadow: 0 0 17px rgba(0, 0, 0, 0.4);
}

.wrapper .contents h2 {
    box-sizing: border-box;
    margin: 0 auto 1vw;
    padding: 1vw 5vw;
    background: #3e3e3e url("../images/demo/bg_header.png") no-repeat top right/14px;
    font-family: "FOT-マティス Pro DB", MatissePro-DB, "マティスPro DB", serif;
    color: white;
}

.wrapper .contents h2 span {
    font-size: 0.7em;
}

@media screen and (min-width: 768px) {
    .wrapper .contents h2 {
        width: 950px;
        margin: 0 auto 20px;
        padding: 5px 12px;
        font-size: 25px;
    }
}

@media screen and (min-width: 768px) {
    .wrapper .contents .sp-only-br {
        display: none;
    }
}

.wrapper .contents .platform-box {
    box-sizing: border-box;
    margin: 0 auto 4vw;
    padding: 5vw;
    border: solid 1px #3e3e3e;
    font-family: "FOT-セザンヌ Pro DB", CezannePro-DB, "セザンヌPro DB", sans-serif;
}

@media screen and (min-width: 768px) {
    .wrapper .contents .platform-box {
        width: 950px;
        margin: 0 auto 40px;
        padding: 14px 12px 12px;
        font-size: 25px;
    }
}

.wrapper .contents .btn-dl {
    width: 90%;
    margin: 0 auto 7%;
}

@media screen and (min-width: 768px) {
    .wrapper .contents .btn-dl {
        width: 350px;
        margin: 0 0 20px 0;
    }
}

.wrapper .contents p {
    margin: 0 0 7% 0;
}

.wrapper .contents p.last {
    margin: 15% 0 7%;
}

@media screen and (min-width: 768px) {
    .wrapper .contents p {
        margin: 0 0 20px 0;
    }
    .wrapper .contents p.last {
        margin: 40px 0 20px;
    }
}

.wrapper .contents .btn-page-close {
    margin: 0 auto;
    padding: 0 0 10vw;
}

.wrapper .contents .btn-page-close a {
    border-radius: 4px;
}

@media screen and (min-width: 768px) {
    .wrapper .contents .btn-page-close {
        width: 350px;
        height: 63px;
        padding: 0 0 70px;
    }
}

@media screen and (min-width: 768px) {
    .wrapper .contents {
        width: 1000px;
        margin: 50px auto;
    }
}

/*** /wrapper ***/