li{
    list-style: none;
}

a{
    text-decoration: none;
    color: #000;
}

li a img {
  vertical-align: middle;
}

html{
  overscroll-behavior:none;
}

body {
  width: 100%;
  background-color: white;
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font_en {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.font_a{
  font-family: "Montagu Slab", serif;
}

.font_b{
  font-family: "Bodoni Moda", serif;
}

.font_c{
  font-family: "Plus Jakarta Sans", sans-serif;
}

.font_d{
  font-family: "BIZ UDPMincho", serif;
}

.font_e{
  font-family: "Cardo", serif;
}

@media screen and (min-width: 768px) {
  .content {
    margin-top: 50px;
    padding: 20px;
  }

  .navImg{
    height: 20px;
    width: auto;
  }

    .topMenu {
      position: fixed;
      top: 0;
      left: -4500px; /* 右上に配置 */
      z-index: 1000;
      transition: transform 0.3s ease-out;
    }
    
    .topMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
    }
    
    .topMenu .menu-item {
      padding: 10px 10px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }

    .rightMenu {
      position: fixed;
      right: 0px; /* 右上に配置 */
      transform: rotate(90deg); 
      transform-origin: top right; /* 回転の基準点を右上に設定 */
      z-index: 100;
      transition: transform 0.3s ease-out;
    }
    
    .rightMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
    }
    
    .rightMenu .menu-item {
      padding: 10px 10px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }
    
    .bottomMenu {
      position: fixed;
      bottom: 0;
      left: 0; /* 右上に配置 */
      z-index: 1000;
      transition: transform 0.3s ease-out;
    }
    
    .bottomMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
      transform: scale(-1, -1);
    }
    
    .bottomMenu .menu-item {
      padding: 10px 10px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }
    
    .leftMenu {
      position: fixed;
      left: 50px; 
      transform: rotate(90deg); /* メニュー全体を90度回転 */
      transform-origin: top left; /* 回転の基準点を右上に設定 */
      z-index: 100;
      transition: transform 0.3s ease-out;
    }
    
    .leftMenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: flex-start; /* 左寄せ */
      transform: scale(-1, -1);
    }
    
    .leftMenu .menu-item {
      padding: 10px 10px;
      color: #333;
      white-space: nowrap; /* 改行を防ぐ */
    }
    
    .rightrect{
      position: fixed;
      top: 0;
      right: 0;
      width: 40px;
      height: 60px;
      background-color: #fff;
      z-index: 999;
    }

    .rightrect2{
      position: fixed;
      top: 0;
      right: 0;
      width: 10px;
      height: 40px;
      background-color: #fff;
      z-index: 1001;
    }

    
    .rightbottomrect{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 40px;
      height: 60px;
      background-color: #fff;
      z-index: 999;
    }
    
    .rightbottomrect2{
      position: fixed;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 40px;
      background-color: #fff;
      z-index: 1001;
    }
    
    .leftrect{
      position: fixed;
      top: 0;
      left: 0;
      width: 40px;
      height: 60px;
      background-color: #fff;
      z-index: 999;
    }

    .leftrect2{
      position: fixed;
      top: 0;
      left: 0;
      width: 10px;
      height: 40px;
      background-color: #fff;
      z-index: 1001;
    }
    
    .leftbottomrect{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 60px;
      background-color: #fff;
      z-index: 999;
    }
    
    .leftbottomrect2{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 10px;
      height: 40px;
      background-color: #fff;
      z-index: 1001;
    }
    
    .imageContainers{
      padding: 0 84px;
    }
    
    .image-container img{
      position: absolute;
    }
    /* .image-container {
        width: 200px;  
        height: 150px; 
      } */

          
  .img1{
    width: 300px;
    height: auto;
    top: 180px;
    left: 40px;
  }

  .img2{
    width: 220px;
    height: auto;
    top: 250px;
    left: 50%;
  }

  .img3{
    width: 570px;
    height: auto;
    top: 730px;
    left: 270px;
  }

  .img4{
    width: 300px;
    height: auto;
    top: 950px;
    right: 40px;
  }

  .img5{
    width: 40%;
    height: auto;
    top: 1270px;
    left: 40%;
  }

  .img6{
    width: 260px;
    height: auto;
    top: 1690px;
    left: 40px;
  }

  .img7{
    width: 270px;
    height: auto;
    top: 1870px;
    right: 350px;
  }

  .img8{
    width: 270px;
    height: auto;
    top: 1870px;
    right: 40px;
  }

  .img9{
    width: calc(100% - 80px);
    height: auto;
    top: 2390px;
    left: 40px;
  }

  .img10{
    width: 500px;
    height: auto;
    top: 3300px;
    left: 40px;
  }

  .img11{
    width: 130px;
    height: auto;
    top: 3380px;
    right: 10%;
  }

  .img12{
    width: 60%;
    height: auto;
    top: 3850px;
    right: 40px;
  }

  .img13{
    width: 100px;
    height: auto;
    top: 3970px;
    left: 200px;
  }

  .img14{
    width: 260px;
    height: auto;
    top: 4500px;
    right: 20%;
  }

  .img15{
    width: 450px;
    height: auto;
    top: 4630px;
    left: 10%;
  }

  .img16{
    width: 450px;
    height: auto;
    top: 4930px;
    right: 10%;
  }
  
  .img17{
    width: 560px;
    height: auto;
    top: 5300px;
    left: 15%;
  }

  .img18{
    width: 260px;
    height: auto;
    top: 5460px;
    right: 15%;
  }

  .img18{
    width: 260px;
    height: auto;
    top: 5460px;
    right: 15%;
  }

  .img19{
    width: 500px;
    height: auto;
    top: 6300px;
    left: 40px;
  }

  .img20{
    width: 300px;
    height: auto;
    top: 6250px;
    right: 20%;
  }

  .img21{
    width: 500px;
    height: auto;
    top: 6650px;
    right: 40px;
  }

  .img22{
    width: 260px;
    height: auto;
    top: 6850px;
    left: 40px;
  }

  .img23{
    width: 260px;
    height: auto;
    top: 6850px;
    left: 340px;
  }

  .img24{
    width: 160px;
    height: auto;
    top: 7100px;
    right: 15%;
  }

  .img25{
    width: 650px;
    height: auto;
    top: 7400px;
    right: 15%;
  }

  .img26{
    width: 160px;
    height: auto;
    top: 7600px;
    left: 20%;
  }

  .img27{
    width: 460px;
    height: auto;
    top: 7900px;
    right: 40px;
  }

  .img28{
    width: 320px;
    height: auto;
    top: 8100px;
    right: 540px;
  }

  .img29{
    width: 390px;
    height: auto;
    top: 8600px;
    left: 10%;
  }

  .img30{
    width: 390px;
    height: auto;
    top: 8700px;
    right: 10%;
  }
      
      .hover-image {
        opacity: 1;
        transition: opacity 0.8s ease;
      }
      
      .image-container:hover .hover-image {
        opacity: 1 !important;
      }
      
      .hidden-image {
        opacity: 0;
        position: absolute;
        top: 150px;
        left: 200px;
        width: 200px;
        height: auto;
        transition: 0.3s ease;
      }
      
      
      .hidden-image2 {
        z-index: -1;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 100px;
        width: 200px;
        height: auto;
        transition: 0.3s ease;
      }
    
    }
    
  @media screen and (max-width: 768px) {
    
      span,a
      {
        font-size: 14px;
      }
    
      .red{
        background-color: red;
      }
    
      .pcOnly{
        display: none;
      }

      .navImg{
        height: 14px;
        width: auto;
      }
      
      .topMenu {
        position: fixed;
        top: 0px;
        left: -3500px; /* 右上に配置 */
        z-index: 1000;
        transition: transform 0.3s ease-out;
      }
      
      .topMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
      }
      
      .topMenu .menu-item {
        padding: 0 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
      
      .content {
        margin-top: 50px;
        padding: 20px;
      }
      
      
      .rightMenu {
        position: fixed;
        /* top: 500px; */
        right: 0; /* 右上に配置 */
        transform: rotate(90deg); /* メニュー全体を90度回転 */
        transform-origin: top right; /* 回転の基準点を右上に設定 */
        z-index: 100;
        transition: transform 0.3s ease-out;
      }
      
      .rightMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
      }
      
      .rightMenu .menu-item {
        padding: 0 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
      
      .bottomMenu {
        position: fixed;
        bottom: 0;
        left: 0; /* 右上に配置 */
        z-index: 1000;
        transition: transform 0.3s ease-out;
      }
      
      .bottomMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
        transform: scale(-1, -1);
      }
      
      .bottomMenu .menu-item {
        padding: 0 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
      
      .leftMenu {
        position: fixed;
        left: 40px; 
        transform: rotate(90deg); /* メニュー全体を90度回転 */
        transform-origin: top left; /* 回転の基準点を右上に設定 */
        z-index: 100;
        transition: transform 0.3s ease-out;
      }
      
      .leftMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start; /* 左寄せ */
        transform: scale(-1, -1);
      }
      
      .leftMenu .menu-item {
        padding: 10px 10px;
        color: #333;
        white-space: nowrap; /* 改行を防ぐ */
      }
      
      .rightrect{
        position: fixed;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        background-color: #fff;
        z-index: 999;
      }
      
      .rightrect2{
        position: fixed;
        top: 0;
        right: 0;
        width: 10px;
        height: 30px;
        background-color: #fff;
        z-index: 1001;
      }
      
      .rightbottomrect{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 30px;
        height: 30px;
        background-color: #fff;
        z-index: 999;
      }
      
      .rightbottomrect2{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 30px;
        background-color: #fff;
        z-index: 1001;
      }
      
      .leftrect{
        position: fixed;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        background-color: #fff;
        z-index: 999;
      }

      .leftrect2{
        position: fixed;
        top: 0;
        left: 0;
        width: 10px;
        height: 30px;
        background-color: #fff;
        z-index: 1001;
      }
      
      .leftbottomrect{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 30px;
        height: 30px;
        background-color: #fff;
        z-index: 999;
      }
      
      .leftbottomrect2{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 30px;
        background-color: #fff;
        z-index: 1001;
      }
      
      .image-container{
        padding: 0 20px;
        position: relative;
      }
      
      .image-container img{
          position: absolute;
        }
        
        .hover-image {
          margin: auto;
          width: 200px;
          opacity: 1; /* 本番は0 */
          transition: opacity 0.3s ease;
        }
        
        .image-container:hover .hover-image {
          opacity: 1;
        }

        .img1{
          min-width: 100px;
          width: 30%;
          height: auto;
          top: 50px;
          left: 40px;
        }
      
        .img2{
          min-width: 120px;
          width: 20%;
          height: auto;
          top: 70px;
          left: 50%;
        }
      
        .img3{
          min-width: 130px;
          width: 45%;
          height: auto;
          top: 300px;
          right: 40px;
        }
      
        .img4{
          min-width: 77px;
          width: 20%;
          height: auto;
          top: 480px;
          right: 40px;
        }
      
        .img5{
          min-width: 150px;
          width: 40%;
          height: auto;
          top: 580px;
          left: 40%;
        }
      
        .img6{
          min-width: 80px;
          width: 25%;
          height: auto;
          top: 700px;
          left: 40px;
        }
      
        .img7{
          width: 28%;
          height: auto;
          top: 870px;
          right: 220px;
        }
      
        .img8{
          width: 28%;
          height: auto;
          top: 870px;
          right: 40px;
        }
      
        .img9{
          width: calc(100% - 80px);
          height: auto;
          top: 1200px;
          left: 40px;
        }
      
        .img10{
          width: 50%;
          height: auto;
          top: 1700px;
          left: 40px;
        }
      
        .img11{
          width: 13%;
          height: auto;
          top: 1700px;
          right: 10%;
        }
      
        .img12{
          width: 60%;
          height: auto;
          top: 2100px;
          right: 40px;
        }
      
        .img13{
          width: 15%;
          height: auto;
          top: 2300px;
          left: 40px;
        }
      
        .img14{
          width: 30%;
          height: auto;
          top: 2450px;
          right: 20%;
        }
      
        .img15{
          width: 33%;
          height: auto;
          top: 2630px;
          left: 10%;
        }
      
        .img16{
          width: 33%;
          height: auto;
          top: 2830px;
          right: 10%;
        }
        
        .img17{
          width: calc(100% - 80px);;
          height: auto;
          top: 3100px;
          left: 40px;
        }
      
        .img18{
          width: 30%;
          height: auto;
          top: 3660px;
          right: 15%;
        }
      
        .img18{
          width: 30%;
          height: auto;
          top: 3800px;
          right: 15%;
        }
      
        .img19{
          width: 50%;
          height: auto;
          top: 4100px;
          left: 40px;
        }
      
        .img20{
          width: 30%;
          height: auto;
          top: 4400px;
          right: 20%;
        }
      
        .img21{
          width: 50%;
          height: auto;
          top: 4650px;
          right: 40px;
        }
      
        .img22{
          width: 26%;
          height: auto;
          top: 4850px;
          left: 40px;
        }
      
        .img23{
          width: 260px;
          height: auto;
          top: 4850px;
          left: 40px;
        }
      
        .img24{
          width: 16%;
          height: auto;
          top: 5100px;
          right: 15%;
        }
      
        .img25{
          width: 65%;
          height: auto;
          top: 5400px;
          right: 15%;
        }
      
        .img26{
          width: 16%;
          height: auto;
          top: 6000px;
          left: 20%;
        }
      
        .img27{
          width: 46%;
          height: auto;
          top: 5900px;
          right: 40px;
        }
      
        .img28{
          width: 32%;
          height: auto;
          top: 6500px;
          right: 40px;
        }
      
        .img29{
          width: 39%;
          height: auto;
          top: 6600px;
          left: 10%;
        }
      
        .img30{
          width: 39%;
          height: auto;
          top: 6900px;
          right: 10%;
        }

        .circle-container {
          margin: 100px;
          width: 100px;
          height: 100px;
        }
        
        .circle {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          /* background-color: #ccc; */
          cursor: pointer;
        }
        
        .hidden-image {
          opacity: 0;
          position: absolute;
          top: 150px;
          left: 200px;
          width: 200px;
          height: auto;
          transition: 0.3s ease;
        }
        
      
        .circleimg{
          position: relative;
          margin-bottom: 1000px;
        }
      
        .circle-container2 {
          margin: 100px;
          width: 100px;
          height: 100px;
        }
        
        .circle2 {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          /* background-color: #ccc; */
          cursor: pointer;
        }
        
        .hidden-image2 {
          z-index: -1;
          opacity: 0;
          position: absolute;
          top: 0px;
          left: 100px;
          width: 200px;
          height: auto;
          transition: 0.3s ease;
        }
      
    }

    .hover-image.active {
    opacity: 1 !important; /* ⭐ インラインスタイルを強制的に上書き */
    /* transition: opacity 0.3s ease;  より滑らかな表示にしたい場合は追加 */
}