img{width:100%;}

.asa1{width: 60vh;
position: relative;
aspect-ratio: 1/ 1;
    text-align: center;
margin: auto;
margin-top: 5vh;
background-color: #839b5c;
}

.asa1 img{position: absolute;
left: 0;
top: 0;}

.sitani{animation: sitani 1 3s 1s;
    animation-fill-mode: forwards;
    mask-image: none;
          mask-size: 0% 0%;
          overflow: clip;
          line-height: 0;
          line-height: 0;
          clip-path: inset(0% 0% 100% 0%);
          mask-position: right center;
    }

    @keyframes sitani {      0%{   mask-image: none;
          mask-size: 0% 0%;
          overflow: clip;
          line-height: 0;
          line-height: 0;
          clip-path: inset(0% 0% 100% 0%);
          mask-position: right center;

        }

         100% {
          clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
          mask-size: 110% 110%;
          transition-duration: 1s ;
          transition-timing-function:ease-in-out;
        transition-delay: 0.5s;

          }}


.fadeinni{animation: fadeinni 1 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0
    }

    @keyframes fadeinni{

      0%{opacity: 0;}
      100%{opacity: 1;}

    }


.yokoni{animation: yokoni 1 1s 3s;
    animation-fill-mode: forwards;
    mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
    line-height: 0;
      clip-path: inset(0% 100% 0% 0%);
      mask-position: right center;}

  @keyframes yokoni {



  0%{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
    line-height: 0;
      clip-path: inset(0% 100% 0% 0%);
      mask-position: right center;

  }
  100% {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;


    }

  }


body{margin: 0;
padding: 0;
font-family: "Shippori Mincho", serif;
}

.asa2{width: 70vh;
margin: auto;
text-align: right;
margin-top: 0.5vh;
font-size: 1.3vh;
display: none;
}

.asa3{position: relative;
width: 60vh;
aspect-ratio: 1 / 0.42;
margin: auto;
margin-top: 3vh;
margin-bottom: 10vh;
}

.asa3 img{position: absolute;
left: 0;
top: 0;}

main{width: 100%;
padding-bottom: 10%;}
.map{width: 30vh;
    aspect-ratio: 1 / 0.7;
margin: auto;}

#sp{display: none;}

.maps{display: flex;
justify-content: space-between;
width: 70vh;
margin: auto;}

.map1{width: 20vh;}

.map3{width: 20vh;
    box-sizing: border-box;
padding-left: 3%;
padding-top: 0%;
font-size: 1.3vh;
line-height: 2.1vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.map3 p{margin: 0;}

.map3 span{font-size: 1.1vh;
line-height: 0vh;}

.map3 a{color: black;
text-decoration: none;}

.insta{width: 17%;
line-height: 0;}



.anidelay0xxx{animation-delay: 0s!important;}
.anidelay0xx{animation-delay: 0.5s!important;}
.anidelay0x{animation-delay: 0.8s!important;}
.anidelay0{animation-delay: 2.1s!important;}
.anidelay1{animation-delay: 2.2s!important;}
.anidelay2{animation-delay: 2.4s!important;}
.anidelay3{animation-delay: 2.6s!important;}
.anidelay4{animation-delay: 3.6s!important;}
.anidelay5{animation-delay: 3.8s!important;}
.anidelay6{animation-delay: 4s!important;}
.anidelay7{animation-delay: 4.2s!important;}
.anidelay8{animation-delay: 4.4s!important;}
.anidelay9{animation-delay: 4.6s!important;}
.anidelay10{animation-delay: 4.8s!important;}
.anidelay11{animation-delay: 5s!important;}
.anidelay12{animation-delay: 5.2s!important;}
.anidelay13{animation-delay: 5.4s!important;}
.anidelay14{animation-delay: 9.5s!important;}
.anidelay15{animation-delay: 9.7s!important;}
.anidelay16{animation-delay: 6s!important;}

@media screen and (max-width: 1099px) {

    #sp{display: block;}
#pc{display: none;}
    .asa1{width: 90vw;
        background-color: transparent;
        position: relative;
        aspect-ratio: 1 / 1;
    margin-top: 10%;}

    .asa1::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 90%;
        height: 100%;
        background-color: #839b5c;
      }

    .asa2{width: 90vw;
    font-size: 10px;}
    .asa3{width: 100vw;
    margin-top: 20%;
margin-bottom: 20%;
transform: scale(1.3);
}

    .maps{width: 90vw;
    flex-direction: column;
margin-top: 10%;}

    .map{width: 80%;}

    .map3{width: 100%;
    text-align: center;
    padding: 0;
font-size: 14px;
line-height: 28px;
margin-top: 10%;}

main{padding-bottom:15% ;
width: 100vw;
overflow: hidden;
}

.map3 span{font-size: 12px;
line-height: 20px;}

.insta{margin: auto;
width: 10%;
margin-top: 30px;}
}