@charset "UTF-8";

/*----------------------------------------------------------------------------*/
/*共通*/
html {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
    width: 100%;
    background-color: #ebebeb;
    box-sizing: border-box;
}

.moviewrap {
    position: relative;
    padding-bottom: 56.25%;
    /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
    width: 95%;
    margin: 0 auto;
}

.moviewrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*------------------------------------------------スマホ用ページ用設定*/
@media screen and (max-width: 767px) {

    /*767px以下の場合*/
    .nosp {
        display: none;
    }

    body {
        background: #000;
    }

    /*------------------------------------------------*/
    .movie {
        margin: 0 auto;
        padding: 50% 0 10px 0;
        background-image: url(_image/main_bg.png), url(_image/hokkaido.png);
        background-repeat: no-repeat, no-repeat;
        background-position: top, 200px 300px;
        background-size: 250%, 100%;
    }

    .mainttl {
        margin: 0 auto 30px;
        text-align: center;
    }

    .mainttl img {
        width: 35%;
        display: block;
        margin: 0 auto 20px;
    }

    .contentsWap {
        text-align: center;
        margin: 0 auto 30px;
        color: #fff;
    }

    /*-------------------------------------------------------end@media*/
}

/*------------------------------------------------PC用ページ用設定*/
@media screen and (min-width: 768px) {

    /*768px以上の場合*/
    .nopc {
        display: none;
    }

    body {
        min-width: 1024px;
        background: #000;
    }

    /*------------------------------------------------*/
    .movie {
        margin: 0 auto;
        padding: 300px 0 10px 0;
        background-image: url(_image/main_bg.png), url(_image/hokkaido.png);
        background-repeat: no-repeat, no-repeat;
        background-position: top, 700px 300px;
    }

    .mainttl {
        width: 960px;
        margin: 0 auto 30px;
        text-align: center;
    }

    .mainttl img {
        width: 23%;
        display: block;
        margin: 0 auto 20px;
    }

    .contentsWap {
        text-align: center;
        margin: 0 auto 30px;
        width: 960px;
        color: #fff;
    }



    /*-------------------------------------------------------end@media*/
}