@charset "UTF-8";

/*================================
atmos
================================*/
.top_main{
   background-image: url(/images/atmos/main.jpg);
}
@media screen and ( max-width:750px) {
   /*.top_main{
   background-image: url(/images/menu/main_sp.jpg);
}*/
}

section#atmos{
   margin-top: 20px;
}
#atmos h3{
font-size: 1.8rem;
   margin-bottom: 1.0em;
}
.gallery{
   display: flex;
   flex-wrap: wrap;
  gap: 2%;
/*columns:3;*/
/*padding:0 15px;*/
/*width: 86%;*/
margin: 0 auto 20px;
}
.gallery li {
  width: calc(33% - 1%);
    margin-bottom: 30px;
}

.gallery img{
	width:100%;
	height: 100%;
  object-fit: cover;
   border-radius: 20px;
	vertical-align: bottom;
}

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

}

@media only screen and (max-width: 768px) {
   #atmos h3{
      text-align: center;
   }
	.gallery{
	/*columns: 2;*/
	/*width: 95%;*/
	}	
   .gallery li {
  width: calc(50% - 1%);
   }
}

/*========= レイアウトのためのCSS ===============*/

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

/*画像を出現させるアニメーションCSS*/

.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}