@charset "UTF-8";

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    background: url(../img/20xxprecp/cp-bg_pc.jpg) top center no-repeat fixed;
    background-color: #0c1d22;
    color: #fff;
}

/*-----footer-----*/
.footer {
    clear: both;
    text-align: center;
    background-color: #000;
}
small { display: block; width: 100%; }

/*-----wrapper-----*/
.wrapper { width: 100%; }

/*-----conttents-----*/
.contents {
    height: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
}
/*---date---*/
.date {
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    background-color: rgba(0,0,0,0.7);
}
/*--btn-box--*/
.btn-box {
    display: flex;
    margin: 0 auto;
    /*▼for pc and tablet*/
    width: 95%;
}
.tw, .mail {
    display: block;
    color: #fff;
    text-decoration: none;
    width: 50%;
    border: 1px solid #00509b;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.5);
    /*▼for pc and tablet*/
    line-height: 319%;
}
.tw:before, .mail:before {
    display: block;
    float: left;
    content: "";
    /*▼for pc and tablet*/
     margin: 2% 1%;
    padding-bottom: 19%;
    width: 19%;
    height: 0;
}
.tw:before   { background: url(../img/20xxprecp/cp-icon-tw.png) center center no-repeat; background-size: contain; }
.mail:before { background: url(../img/20xxprecp/cp-icon-mail.png) center center no-repeat; background-size: contain; }
/*--catch-box--*/
.catch-box {
    text-align: left; background: url(../img/20xxprecp/cp-bg-catch.png) right center no-repeat; }
/*--prize-box--*/
.prize-box { margin: 0 auto; }
.prize {
    display: flex;
    border: 1px solid #fff;
    border-radius: 10px;
    background-color: rgba(0,38,77,0.5);
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
}
.extra { border-color: #ffdf7c; }
.extra .prize-right { text-align: center; }
.extra .narrow { letter-spacing: -6px; }
.prize-left { width: 36%; text-align: right; }
.prize-right { padding-left: 13%; width: 64%; text-align: left; }
.dott { font-size: 5%; }


/*--------------------
pc
--------------------*/
@media screen and (min-width: 961px) {
    body:before { display: none; }
    /*-----footer-----*/
    .footer { padding: 30px 0 40px; }
    .footer img { width: 120px; }
    small {
        margin-top: 30px;
        font-size: 12px;
        line-height: 1.5;
    }
    /*-----wrapper-----*/
    .wrapper {
        position: relative;
        margin: 0 auto;
        width: 960px;
        height: 100%;
    }
    /*-----h1-----*/
    h1 {
        position: fixed;
        left: 50%;
        top: 30px;
        margin-left: -480px;
        padding-right: 25px;
        width: 960px;
        height: 207px;
        text-align: right;
    }
    h1 img { width: 34%; }
    /*-----conttents-----*/
    .contents {
        float: left;
        padding: 28px 0 100px;
        width: 550px;
    }
    /*--h2--*/
    h2 {}
    /*---date---*/
    .date {
        margin-top: 15px;
        padding: 10px 0;
        font-size: 23px;
    }
    /*--btn-box--*/
    .btn-box { margin-top: 30px; width: 510px; }
    .tw, .mail {
        margin: 0 5px;
        padding: 0 5px;
        font-size: 16px;
        line-height: 55px;
    }
    .tw:before, .mail:before {
        margin-top: 5px;
        padding-bottom: 0;
        width: 45px;
        height: 45px;
    }
    /*--catch-box--*/
    .catch-box {
        margin: 30px auto 0;
        width: 520px;
        background-size: 25% auto;
    }
    .catch-box img { width: 415px; }
    /*--prize-box--*/
    .prize-box { margin-top: 15px; padding: 0 15px; }
    .prize {
        margin: 10px 0;
        padding: 15px 0;
        font-size: 30px;
    }
}

/*--------------------
tablet
--------------------*/
@media screen and (min-width: 641px) and (max-width: 960px) {
    body { background-image: none; }
    body:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
        background: url(../img/20xxprecp/cp-bg_tb.jpg) top center no-repeat;
        background-size: 100% auto;
    }
    /*-----footer-----*/
    .footer { padding: calc((30/960)*100%) 0 calc((40/960)*100%); }
    .footer img { width: calc((120/960)*100%); }
    small {
        margin-top: calc((30/960)*100%);
        font-size: 1.2vw;
        line-height: 1.5;
    }
    /*-----wrapper-----*/
    .wrapper { width: 100%; }
    /*-----h1-----*/
    h1 {
        position: fixed;
        left: 50%;
        top: calc((30/960)*100%);
        margin-left: calc((-480/960)*100%);
        padding-right: calc((25/960)*100%);
        width: 100%;
        height: calc((207/960)*100%);
        text-align: right;
    }
    h1 img { width: 34%; }
    /*-----contents-----*/
    .contents {
        float: left;
        padding: calc((28/960)*100%) 0 calc((100/960)*100%);
        width: calc((550/960)*100%);
    }
    /*--h2--*/
    h2 img { width: calc((500/550)*100%); }
    /*--date--*/
    .date {
        margin-top: calc((15/550)*100%);
        padding: calc((10/550)*100%) 0;
        font-size: 2.5vw;
    }
    /*--btn-box--*/
    .btn-box { margin-top: calc((30/550)*100%); }
    .tw, .mail {
        margin: 0 calc((5/550)*100%);
        padding: 0 calc((5/550)*100%);
        font-size: 1.8vw;
    }
    /*--catch-box--*/
    .catch-box {
        margin: calc((30/550)*100%) auto 0;
        width: calc((520/550)*100%);
        background-size: 27% auto;
    }
    .catch-box img { width: calc((430/550)*100%); }
    /*--prize-box--*/
    .prize-box {
        margin-top: calc((15/550)*100%);
        padding: 0 calc((15/550)*100%);
    }
    .prize {
        margin: calc((10/550)*100%) 0;
        padding: calc((15/550)*100%) 0;
        font-size: 3vw;
    }
}

/*--------------------
sp
--------------------*/
@media screen and (max-width: 640px) {
    body { background-image: none; }
    body:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
        background: url(../img/20xxprecp/cp-bg_sp.jpg) top center no-repeat;
        background-size: 100% auto;
    }
    /*-----footer-----*/
    .footer { padding: calc((30/640)*100%) calc((20/640)*100%) calc((40/640)*100%); }
    .footer img { width: calc((120/640)*100%); }
    small {
        margin-top: calc((30/640)*100%);
        font-size: 2vw;
        line-height: 1.5;
    }
    /*-----wrapper-----*/
    .wrapper { width: 100%; }
    /*-----h1-----*/
    h1 {
        position: fixed;
        left: calc((20/640)*100%);
        top: calc((25/640)*100%);
        width: calc((342/640)*100%);
        text-align: left;
    }
    h1 img { width: 100%; }
    /*-----contents-----*/
    .contents {
        position: relative;
        margin-top: calc((280/640)*100%);
        padding: calc((28/640)*100%) 0 calc((100/640)*100%);
        width: 100%;
        background-color: rgba(0,0,0,0.8);
    }
    /*--h2--*/
    h2 img { width: calc((500/640)*100%); }
    /*--date--*/
    .date {
        margin-top: calc((15/640)*100%);
        padding: calc((10/550)*100%) 0;
        font-size: 4.2vw;
    }
    /*--btn-box--*/
    .btn-box { margin-top: calc((30/640)*100%); }
    .tw, .mail {
        margin: 0 calc((5/640)*100%);
        padding: 0 calc((5/640)*100%);
        font-size: 3.2vw;
    }
    /*--catch-box--*/
    .catch-box {
        margin: calc((30/640)*100%) auto 0;
        width: calc((600/640)*100%);
        background-size: 30% auto;
    }
    .catch-box img { width: calc((471/640)*100%); }
    /*--prize-box--*/
    .prize-box { margin-top: calc((20/640)*100%); padding: 0 calc((15/640)*100%); }
    .prize {
        margin: calc((10/640)*100%) 0;
        padding: calc((15/640)*100%) 0;
        font-size: 5.2vw;
    }   
    
}