@charset "utf-8";

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

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #333;
  text-align: center;
  color: #fff;
}

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

a:hover,
a:active{
  text-decoration: 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;
  }
}

/*========= 粒子を描画するエリア設定 ===============*/

#wrapper {
  /*描画されるテキストを中央寄せにする*/
  display: flex;
  justify-content: center;
  align-items: center;
}

#particle {
  width: 100%;
  height: 100vh;
  vertical-align: bottom;
  /*canvasタグ下に余白が生まれるのを防ぐ*/
}

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
  columns: 4;/*段組みの数*/
  padding:0 15px;/*ギャラリー左右に余白をつける*/
  }
  
  .gallery li {
      margin-bottom: 20px;/*各画像下に余白をつける*/
  }
  
  /*ギャラリー内のイメージは横幅100%にする*/
  .gallery img{
    width:100%;
    height:auto;
    vertical-align: bottom;/*画像の下にできる余白を削除*/}
  
  /*　横幅900px以下の段組み設定　*/
  @media only screen and (max-width: 900px) {
    .gallery{
    columns:3;
    } 
  }
  
  @media only screen and (max-width: 768px) {
    .gallery{
    columns: 2;
    } 
  }
  
  .header{
    width: calc(100% - 48px);
    max-width:1200px;
    margin:0px auto;
  }
  .header-inner{
    display: flex;
  }
  .hana-logo{
    margin-top:48px;
    margin-bottom:48px;
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
  }
  .hana-logo img{
    width:100%;
  }
  .hana-logo h1{
    font-size:30px;
    margin-left:50px;
  }
  .contact_btn{
    position:fixed;
    z-index: 9999;
    right:24px;
    top:24px;
    background-color:rgba(0, 0, 0, 0.5);
    padding:10px 20px;
    border-radius:20px 0px 20px 0px;
  }
  .contact_btn a{
    color: white;
  }
  .contact_btn a:hover{
    transform: scale(2,2);
  }

  @media only screen and (max-width: 768px) {
    .hana-logo{
      flex-direction:column;
      text-align:center;
    }
  }