.img-wrap1 {
    overflow: visible;
    position: absolute;
    top:20vh;
    bottom:20vh;
    left:0;
    width: calc(100vw / 3);
    height: 60vh;
    pointer-events: pointer;
    z-index: 1;
  }
  .img-wrap2 {
    overflow: visible;
    position: absolute;
    top:20vh;
    bottom:20vh;
    left:  calc(100vw / 3);
    width: calc(100vw / 3);
    height: 60vh;
    pointer-events: pointer;
    z-index: 2;
  }
  .img-wrap3 {
    overflow: visible;
    position: absolute;
    top:20vh;
    bottom:20vh;
    left:  calc(100vw / 3 * 2);
    width: calc(100vw / 3);
    height: 60vh;
    pointer-events: pointer;
    z-index: 3;
  }

  .image1 {/*親div*/
      position: relative;/*相対配置*/
      width: 100%;
      height: 100%;
    }
    .image1 .background1 {
      opacity: 1.0;
      display:block;
      }
  .image1 p {
    position: absolute;/*絶対配置*/
    color: rgb(0, 0, 0);/*文字は白に*/
    font-family: var(--text-lg-bold-font-family);
    font-weight: var(--text-lg-bold-font-weight);
    color: var(--white);
    font-size: 0.85vw; /* ビューポート幅の5% */
    letter-spacing: 0.5vw;
    line-height: 2.0vh;
    font-style: var(--text-lg-bold-font-style);
    top: 5vh;
    left: 5vw;
    
    }
  
  .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: #030303;
      background-color: #007BFF;
      border: none;
      border-radius: 5vw;
      text-align: center;
      text-decoration: none;
      box-sizing: border-box; /* パディングを含めたサイズ計算 */
      transition: background-color 0.3s ease;
    }