body {
    margin: 0;
    padding: 0;
}

/** 画面いっぱいにしたいコンテンツを入れるコンテナ **/
/* 画面いっぱい */
.box {
    width: 100%;
    height: 100vh;    /* 画面いっぱい */
    
    /*******************************************
    ※paddingを入れると、横スクロールバーが出て来る！
    
    padding: 20px;    /* コンテナの中身と枠の隙間 */
    ********************************************/
    
    /* Flexboxにする(コンテンツが縦横中央寄せ) */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;

    /* 横方向中央寄せ */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;


}

/* 高さ半分 */
.halfbox {
    width: 100%;
    height: 50vh;    /* 高さ半分 */

    /*******************************************
    ※paddingを入れると、横スクロールバーが出て来る！

    padding: 20px;    /* コンテナの中身と枠の隙間 */
    ********************************************/

    /* Flexboxにする(コンテンツが縦横中央寄せ) */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;

    /* 横方向中央寄せ */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    /* 縦方向中央寄せ */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* 高さ1/4 */
.quarterbox {
    width: 100%;
    height: 25vh;    /* 高さ半分 */

    /*******************************************
    ※paddingを入れると、横スクロールバーが出て来る！

    padding: 20px;    /* コンテナの中身と枠の隙間 */
    ********************************************/

    /* Flexboxにする(コンテンツが縦横中央寄せ) */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;

    /* 横方向中央寄せ */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    /* 縦方向中央寄せ */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/** 背景を画像一杯にしたい場合はクラス追加する **/
.box__bg_photo1 {
    background-image: url(../image/top_black_p_s.jpg);    /* 背景画像のURL */
    background-size: cover;    /* サイズいっぱいに背景画像を表示 */
    background-position: center;    /* 画像の中央を表示 */
    background-repeat: no-repeat;    /* リピート表示しない */
}


/******* その他機能 ********/
/** 全画面表示させた要素を、その要素ごとスクロールさせる
    ※Chroom未対応！(20171031現在)
**/
.scroll-area {
    width: 100%;
    height: 100vh;
    overflow-y: auto;

    /* スクロールのスナップ位置を100vhごとに設定
    ※同一heightじゃない場合、途中で止まってしまうこともあるので注意！
    */
    -webkit-scroll-snap-points-y: repeat(100vh);
    -ms-scroll-snap-points-y: repeat(100vh);
    scroll-snap-points-y: repeat(100vh);

    /* スナップ位置に強制的にスクロール */
    -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    scroll-snap-type: mandatory;

    -webkit-scroll-behavior: smooth;
    scroll-behavior: smooth;
}




/** for mobile **/

@media screen and (max-width: 700px){
    .box {
        /*width700px以下なら1カラムにする*/
        flex-direction: column;
    }
    
    .box__bg_photo1 {
        background-image: url(../image/top_black_mobile_p_s.jpg);    /* 背景画像のURL */
        background-size: cover;    /* サイズいっぱいに背景画像を表示 */
        background-position: center;    /* 画像の中央を表示 */
        background-repeat: no-repeat;    /* リピート表示しない */
    }
    
    
}