@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}
body {
  text-align:left;
    background-size: cover;
    background-attachment: fixed;
  background-color: #fcfcfc;
  max-width: 820px;
  margin: 0 auto;
  font-family: "Zen Kaku Gothic New", sans-serif ;
}
h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
h2 {
  font-family: miller-banner, serif;
font-style: normal;
font-weight: 300;
  font-size: 32px;
  text-align: left;
  color: #62534c;
  padding-top: 64px;
  margin-bottom: 50px;
  padding-left: 14px;
  letter-spacing: 0.08em;
}
  @media(min-width: 540px) {
  h2 {
padding-left: 32px;
}
}
p {
  font-size: 14px;
  color: #62534c;
  font-weight: 400;
  font-style: normal;
}
    @media(min-width: 540px) {
  p {
font-size: 16px;
}
}
img {
  max-width: 100%;
  vertical-align: bottom;
  margin: 0 auto;
   /* animation-name: fadein;
  animation-duration: 2.5s;*/
  
}
.wrap {
  padding-left: 14px;
}
@media(min-width: 820px) {
  .wrap {
  padding-left: 32px;
}
}
a:hover {
  opacity: 0.8;
  transition: 0.3s;
}
a {
  color: #000;
  text-decoration: none;
}
.none {
  display: none;
}

.bottttom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  bottom: -2%;
  width: 100%;
  max-width: 376px;
  align-items: center;
  height: 50px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.bottom-nav a {
  text-decoration: none;
}

/*
.fadein {
	opacity : 1;
	transform : translate(0, 10px);
	transition : all 200ms;
	}

/* 画面内に入った状態
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
  transition : all 800ms;
	}
*/



.fadeIn{
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeInTrigger {
  opacity: 0;
}




.zoomIn {
  animation-name:zoomInAnime;
  animation-duration:2.3s;
  animation-fill-mode:forwards;
}
@keyframes zoomInAnime{
  from {
  transform: scale(0.7);
  }

  to {
      transform: scale(1);
  }
}



.slideIn {
  animation-name:slideInAnime;
  animation-delay: 100ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
}
.slideIn2 {
  animation-delay: 200ms;
}
.slideIn3 {
  animation-delay: 300ms;

}
@keyframes slideInAnime{
  0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.slideInTrigger {
  opacity: 0;
}








.sp-container{
  display: block;
  overflow: hidden;
  max-width: 820px;
  margin: 0 auto;
}


@media(min-width: 820px) {
  body {
      background-image: url("../images/web_bg.png");
  background-size: cover;
    background-repeat: no-repeat;
    
  }
  .sp-container-bg {
    max-width: 1920px;
    text-align: left;
    margin: 0 auto;
overflow-y: scroll;
    background-color: #fff;
    opacity: 0.99;
    z-index: -1;
  }
  
  .sp-container {
    max-width: 820px;
    text-align: left;
    margin: 0 auto;
overflow-y: scroll;
    box-shadow: 0px -0px 30px 5px rgba(60, 56, 56, 0.25);
    z-index: 1;
    background-color: #fcfcfc;
    /*
    padding-bottom: 1px;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 760px;
    height: 100vh;
    overflow-y: scroll;
    z-index: 0;
  background-color: #fff;
    box-shadow: 0px -0px 30px 5px rgba(195, 125, 146, 0.35);*/
  }
}


/*==================================================
gallary-slideのためのcss
===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
img{
  height: auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery img{
  width: 95%;
  height: auto;
  margin: 0 auto 3% auto;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1));
}
.choice-btn{
  width: 96%;
  margin: 0 auto;
}
.choice-btn img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;

}



/*==========================================================================
スマホ表示
========================================================================== */   
@media screen and (max-width:750px){
  /* ...and position them! */
  img {
      width: 100vw;
      }
      .button2{
        width: 130px;
      }
      .slider-event img {
        width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
      }
      .slider2 {
        width: 100%;
      }    
  }

/* 750or1024 */