@charset "utf-8";


html, body { 
  margin: 0px;
  padding: 0px;
 }


.zen-kaku-gothic-new-light {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 300;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-new-black {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 900;
  font-style: normal;
}



body {
    font-family: "Zen Kaku Gothic New"; 
    font-size: 1.0em;
    color: #a6a6a6;
    line-height:3em;
    background-color: #ffffff;
    letter-spacing: 4px;
    }

a{text-decoration: none;}
a:link {color: #ffffff;} 


#container{
  background-color: rgb(0, 0, 0);
  margin: 0 auto;
  width: 100%;
  max-width :430px;
  background-size: contain;
  text-align: center;
  overflow: hidden;
}


.keyvisual {
  position: absolute;
  height: 100%;
  margin-top: 35%;
  margin-left: -3%;
  margin-right: auto;

  /* アニメーションを順に実行 */
  animation: slide-skew1 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards, fluffy 4s infinite 1.0s;
}

@keyframes slide-skew1 {
0% {
  transform: translate(180px, 30px);
  opacity: 0;
}
100% {
  transform: translate(0, 0);
  opacity: 1;
}
}

@keyframes fluffy {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-20px);
  }
}


#main-text{
    object-fit: cover;
    display: flex;
    align-items: flex-end;
    margin: 0;
}

/*
#awa_container{
    background-color: transparent;
    margin: 0 auto;
    width: 100%;
    max-width :430px;
    height: 1000px;
    background-size: contain;
    padding: 0;
    position:absolute;
    overflow: hidden;
    left: 600px;
    bottom: 10px;
    margin: 0 auto;
}


/*
#move{
  animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
  position: absolute;
  bottom: -10%;
  left: 20%;
}

@keyframes move {
  0% { transform: translateY(0px);}
  100% { transform: translateY(-1000px); opacity: 0;} 
}
*/



#copy01{
  position: absolute;
  width: 30%;
  margin-left: 3%;
  margin-right: auto;
  margin-top: 6%;
  opacity: 0.5;

  animation: slideIn1 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

 
@keyframes slideIn1 {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

#copy02{
  position: absolute;
  width: 20%;
  margin-left: 70%;
  margin-right: auto;
  margin-top: 50%;


  animation: slideIn2 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn2 {
  0% {
    transform: translateY(180px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}

#reddot{
  position: absolute;
  width: 20%;
  margin-left: -1%;
  margin-right: auto;
  margin-top: 63%;
  opacity: 1;

  animation: zoomIn 7s
}

#botanring{
  position: absolute;
  margin-top: 55%;
  margin-left: -10%;
  animation: rotate 25s infinite linear;
}

#ring{
  position: absolute;
  margin-top: 50%;
  margin-left: -15%;
  margin-right: auto;

  animation: rotate 40s infinite linear;
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 12s infinite linear;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#logo{
  position: absolute;
  margin-left: 72%;
  margin-right: auto;
  margin-top: 3%;
}

#top_back_narabe{
  width: 100%;
}

#title{
  position: absolute;
  margin-left: 2%;
  margin-right: auto;
  margin-top: 160%;
  animation: slide-skew2 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slide-skew2 {
  0% {
    transform: translate(-180px,-30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}

#title02{
  position: absolute;
  margin-left: 2%;
  margin-right: auto;
  margin-top: 180%;
  animation: slide-skew2 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


#takusan{
  flex: auto;
}


#gokugoku{
  margin-left: auto;
  margin-right: auto;
  margin: 0px;
  padding: 0px;

}


#motteru{
  flex: auto;
  margin-top: 20%;
  margin-bottom: -10%;
}

.text{
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 35px;
  text-align: center;
  letter-spacing: 1px;
  margin-top: 26%;
  margin-bottom: 25%;
}

/* フェードイン用のクラス */


.fadeIn {
  opacity: 0;
  transition: 4s;
}
.fadeIn.is-show {
  opacity: 1;
}


.text01{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 5%;
}

.text02{
  margin-left: auto;
  margin-right: auto;
  font-weight: normal;
  text-align: center;
  margin-top: 10%;
}

.text03{
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 25px;
  text-align: center;
  letter-spacing: 2px;
  margin-top: 15%;
  margin-bottom: 25%;
  color: #d7d7d7;
}



.nakami01{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
  margin-bottom: 20%;
}






#last{
  position: relative;
}

#setumei{
  
  margin-left: auto;
  margin-right: auto;
  margin-top: 20%;
  color: #d7d7d7;
  text-align: center;
  line-height: 110%;
  font-weight: bold;
  font-size: 140%
}

#setumei02{
  
  margin-left: auto;
  margin-right: auto;
  color: #d7d7d7;
  text-align: center;
  line-height: 110%;
  font-size: medium;
}

#setumei03{
  margin-left: auto;
  margin-right: auto;
  color: #d7d7d7;
  margin-bottom: 0%;
  text-align: center;
  line-height: 110%;
  font-size: small;
}

#setumei04{
  margin-left: auto;
  margin-right: auto;
  color: #d7d7d7;
  text-align: center;
  line-height: 110%;
  font-size: medium;
  margin-bottom: 20%;
}

#last{
  margin-right: auto;
  width: 110%;
  margin-left: -5%;
}

#nakami01{
  margin-left: auto;
  margin-right: auto;
  color: #d7d7d7;
  text-align: center;
  line-height: 110%;
  font-size: small;
}


.hr1 {
  border: none;
  border-top: 2px solid #000000;
  margin-bottom: 2px;
}

.copyright{
  margin: 0;
  padding: 5px 5px 15px 20px;
  background-color: #000000;
  font-size: 0.7em;
  color: #ffffff;
}

.btm{
  width: 200px;



  background: #E22323;
  border-radius: 10px;
}




.moji{

position: absolute;
width: 97px;
height: 23px;
left: 146px;
top: 4619px;

font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 23px;
/* ボックスの高さと同一、または164% */
letter-spacing: 0.17em;

color: #FFFFFF;
}




.btm:hover {
  background-color: #cacaca;
  color: #000000;
  cursor: pointer;
}

















/*
img {
  position: absolute;
  bottom: auto;
  left: auto;
}
*/

/* 泡の見た目 */

/*
.bubble {
  position: absolute;
  bottom: -50px;
  background-color: transparent;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 10px rgba(216, 216, 216, 0.626);
  animation: bubble 3s linear infinite;
}
*/

/* 泡の一番明るい部分を疑似要素で表現 */
/*
.bubble::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(0.25) translate(-70%, -70%);
  background: radial-gradient(rgba(255, 255, 255, 0.5), transparent);
  border-radius: 50%;
}
*/
/* 泡が横に揺れながら上昇していくアニメーション */

/*
@keyframes bubble {
  0% {
    transform: translate(0, 0); 
  }
  25% {
    transform: translate(-10px, -25vh); 
  }
  50% {
    transform: translate(10px, -50vh); 
  }
  75% {
    transform: translate(-5px, -75vh); 
  }
  100% {
    transform: translate(5px, -100vh); 
    opacity: 0;
  }
}
*/



/*
#shake{
  animation: shake 2s ease 0s infinite normal;
  -webkit-animation: shake 2s ease 0s infinite normal;
}
*/