/* リセットCSS */
<link href="css/reset.css" rel="stylesheet">



/* 親要素であるコンテナのスタイル */
.containerall {
    position: relative;
    width: 100vw; /* ビューポートの幅に合わせる */
    height: 100vh; /* ビューポートの高さに合わせる */
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
}


/* 構成1 */
.image1 {
    width: 100%;  /* 画面の横幅に合わせて動画の幅を調整 */
    height: auto; /* 縦横比を保持して高さを自動調整 */
    display: block; /* 動画がブロック要素として表示される */
    position: absolute; /* 絶対位置指定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
}

/* 構成2 */
.image2 {
    width: 100%;  /* 画面の横幅に合わせて動画の幅を調整 */
    height: auto; /* 縦横比を保持して高さを自動調整 */
    display: block; /* 動画がブロック要素として表示される */
    position: absolute; /* 絶対位置指定 */
    top: 223vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
}

/* 構成3 */
.image3 {
    width: 100%;  /* 画面の横幅に合わせて動画の幅を調整 */
    height: auto; /* 縦横比を保持して高さを自動調整 */
    display: block; /* 動画がブロック要素として表示される */
    position: absolute; /* 絶対位置指定 */
    top: 1025vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
}

/* 構成4 */
.image4 {
    width: 100%;  /* 画面の横幅に合わせて動画の幅を調整 */
    height: auto; /* 縦横比を保持して高さを自動調整 */
    display: block; /* 動画がブロック要素として表示される */
    position: absolute; /* 絶対位置指定 */
    top: 1675vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
}


/* PC用 */
.pcimage {
    width: 100%;  /* 画面の横幅に合わせて動画の幅を調整 */
    height: auto; /* 縦横比を保持して高さを自動調整 */
    display: block; /* 動画がブロック要素として表示される */
    position: absolute; /* 絶対位置指定 */
    top: 0vw; /* ビューポートの幅の割合で位置が決まる */
    left: 0vw; /* ビューポートの幅の割合で位置が決まる */
}


/* スマートフォンサイズの画面（600px以下）では、スマートフォン用を表示 */
@media (max-width: 600px) {
     .pcimage {
        display: none;
    }
}

/* PCサイズの画面（601px以上）では、PC用を表示 */
@media (min-width: 601px) {
    .image1,
    .image2,
    .image3,
    .image4 {
       display: none;
   }
}