.img-wrap1 {
    overflow: visible;
    position: absolute;
    top:0vh;
    bottom:0vh;
    left:0;
    width: calc(100vw / 4 + 20px);
    height: 100vh;
    pointer-events: pointer;
    z-index: 1;
    object-fit: cover;
  }
  .img-wrap2 {
    overflow: visible;
    position: absolute;
    top:0vh;
    bottom:0vh;
    left:  calc(100vw / 4);
    width: calc(100vw / 4 + 20px);
    height: 100vh;
    pointer-events: pointer;
    z-index: 2;
    object-fit: cover;
  }
  .img-wrap3 {
    overflow: visible;
    position: absolute;
    top:0vh;
    bottom:0vh;
    left:  calc(100vw / 4 * 2);
    width: calc(100vw / 4);
    height: 100vh;
    pointer-events: pointer;
    z-index: 3;
    object-fit: cover;
  }
  .img-wrap4 {
    overflow: visible;
    position: absolute;
    top:0vh;
    bottom:0vh;
    left:  calc(100vw / 4 * 3);
    width: calc(100vw / 4);
    height: 100vh;
    pointer-events: pointer;
    z-index: 4;
    object-fit: cover;
  }
  .image1 {/*親div*/
      position: relative;/*相対配置*/
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .image1 .background1 {
      opacity: 1.0;
      display:block;
      left: calc(0%);
      width: calc(510% - 170px);
      height: 100%; /* 画像の高さを調整 */
      
      
      }
      .image1 .background2 {
      opacity: 1.0;
      display:block;
      left: calc(-98% - 20px);
      width: calc(500%);
      height: 100%; /* 画像の高さを調整 */
      
      
      }
      .image1 .background3 {
      opacity: 1.0;
      display:block;
      left: calc(-198%);
     width: calc(500%);
      height: 100%; /* 画像の高さを調整 */
     
      }
      .image1 .background4 {
      opacity: 1.0;
      display:block;
      left: calc(-298% );
      width: calc(500%);
      height: 100%; /* 画像の高さを調整 */
      
      }
  .image1 p {
    position: absolute;/*絶対配置*/
    color: white;/*文字は白に*/
    font-family: var(--text-lg-bold-font-family);
    font-weight: var(--text-lg-bold-font-weight);
    color: var(--white);
    font-size: 3.5vw; /* ビューポート幅の5% */
    letter-spacing: var(--text-lg-bold-letter-spacing);
    line-height: var(--text-lg-bold-line-height);
    font-style: var(--text-lg-bold-font-style);
    top: 10vh;
    left: 10vw;
    writing-mode: vertical-lr; /* 縦書き */
    }
  
  .image1 img {
    width: 100%;
    height: 100%;
    position: absolute;
    }

    body
    {
    top: 0;
    left: 0;
    }
    button
    {
      font-size: 0.5vw;
    width: 10vw;
    height: 5vh;
      color: white;


      display: inline-flex; /* 中央揃えのためにflexboxを使用 */
      align-items: center;
      justify-content: center;
      padding: 0.5em 1em; /* 相対単位で余白を設定 */
      font-weight: bold;
      color: #fff;
      background-color: #007BFF;
      border: none;
      border-radius: 5vw;
      text-align: center;
      text-decoration: none;
      box-sizing: border-box; /* パディングを含めたサイズ計算 */
      transition: background-color 0.3s ease;
    }