body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: normal;
    }


.umaku{
    margin: auto;
    text-align: center;
    height: 600px;
    width: 1000px;
}
.umaku111{
    margin: auto;
    text-align: center;
    height: 700px;
    width: 1000px;
    background-color: black;
}

/* スタイルの状態変化を「my-fade-in」という名前で定義 */
@keyframes my-fade-in {
    from {
    opacity: 0;
    }
    to {
    opacity: 3;
    }
  }
  
  #ok1 {  
    /* .boxが「my-fade-in」で状態変化するように指定 */
    animation-name:     my-fade-in;
    animation-duration: 2.5s;
    
  }
  #umaku22{  
    /* .boxが「my-fade-in」で状態変化するように指定 */
    animation-name:     my-fade-in;
    animation-duration: 1.5s;
  }
  #yata11{  
    /* .boxが「my-fade-in」で状態変化するように指定 */
    animation-name:     my-fade-in;
    animation-duration: 1.5s;
  }


  #yata2222 {  
    /* .boxが「my-fade-in」で状態変化するように指定 */
    animation-name:     my-fade-in;
    animation-duration: 1.5s;
  }
  
  
.umaku2{
    margin: auto;
    text-align: center;
    height: 700px;
    width: 1000px;
}
.yoi{
    position: absolute;
    top:550px;
    left:250px;
    z-index: 10;
}
.yata1{
    position: absolute;
    height: 600px !important;
    z-index: 2;
    top:70px;
    left:630px;
    object-fit: cover;
    
}
.yata222{
    position: absolute;
    height: 900px !important;
    z-index: 2;
    top:165px;
    left:200px;
    object-fit: cover;
}
.yata2225{
    position: absolute;
    height: 980px !important;
    z-index: 2;
    top:120px;
    left:350px;
    object-fit: cover;
}
.yata333{
    position: absolute;
    height: 900px !important;
    z-index: 2;
    top:163px;
    right:200px;
    object-fit: cover;
}
.yata3335{
    position: absolute;
    height: 980px !important;
    z-index: 2;
    top:110px;
    right:350px;
    object-fit: cover;
}
.yata444{
    position: absolute;
    height: 950px !important;
    z-index: 2;
    top:155px;
    right:570px;
    object-fit: cover;
}
.yata5555{
    position: absolute;
    height: 1100px !important;
    z-index: 2;
    top:52px;
    right:567px;
    object-fit: cover;
}
.nan{
    position: relative;
    

}


.hei1{
    width:900px;
    height: 100px;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(221, 223, 223);
    opacity: 0.7;
    padding-top: 5px;
    padding-left: 30px;
    text-align: start;
    font-size: 25px;
    bottom: 0px;
}

.gng{
    width: 1000px;
    left:150px;
}
.yes{
    font-size: 20px;
}
.mon{
    right: 10px;
    display: block;
}

.button1{
    width: 600px;
    height: 50px;
    background-color: rgb(93, 86, 194);
    border-color:transparent ;
    opacity: 0.8;
    bottom:400px;
    right:420px;
    position: absolute;
    z-index: 50;
    color: aliceblue;
    font-size: 30px;
    text-align: left;
    padding:5px 10px ;
    transition: all .2s;
    box-shadow: 6px 6px #668AD8;
}
.button1:hover{
    box-shadow: 10px 10px #bad866;
    border-color: transparent;
}
.button2{
    width: 600px;
    height: 50px;
    background-color: rgb(93, 86, 194);
    border-color:transparent ;
    opacity: 0.8;
    bottom:300px;
    right: 420px;
    position: absolute;
    z-index: 50;
    color: aliceblue;
    font-size: 30px;
    text-align: left;
    padding:5px 10px ;
    transition: all .2s;
    box-shadow: 6px 6px #668AD8;
}
.button2:hover{
    box-shadow:10px 10px #bad866 ;
    border-color: transparent;
}
.hyoi{
    
    z-index: 50;
}

.iyada{
    width: 1000px;
    height: 700px;
    z-index: 1;
    position: relative;
}

.iine1{
    font-size: 20px;
    
}
.iine2{
    font-size: 20px;
    color: rgb(4, 4, 123);
}
.iine3{
    font-size: 20px;
    color: rgb(4, 87, 81);
}
.ha{
    position: absolute;
    top:10px;
    height: 600px;
}
.gngn{
    position: absolute;
    z-index: 200;
    width: 1000px;
    left:210px;
    height: 570px;
}
.taital{
    width: 1300px;
    z-index:1;
    height: 700px;
    position: relative;
    left: 65px;
}
#gen{
    z-index: 200;
    position: absolute;
    right: 545px;
    top:385px;
    width: 355px;
    height: 70px;
    border-radius: 70px;
    color: #fff;
  background-color: #d466e2;
  font-size: 30px;
}
#value{
    z-index: 200;
    position: absolute;
    right: 545px;
    top:500px;
    width: 355px;
    height: 70px;
    background-color: rgb(250, 246, 246); 
    border-color: black;
    font-size: 24px;
}
.hei{
    
    
    font-weight: bold;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1.5s steps(100),
      blink .5s steps(1) infinite alternate;
  }
  .hei{
    width:900px;
    height: 100px;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(226, 224, 224);
    opacity: 0.7;
    padding-top: 5px;
    padding-left: 30px;
    text-align: start;
    font-size: 30px;
    bottom: 0px;
    font-weight: bold;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1.5s steps(100),
      blink .5s steps(1) infinite alternate;
}
  @keyframes typing{
    0% {width: 0;}
  }
  @keyframes blink{
    50% {border-right-color: transparent;}
  }
  .dai{
    position: absolute;
    height: 50px !important;
    font-family: sans-serif;
    color: #fff;
    font-size: 24px;
    width: 130px;
    z-index: 2;
    top:10px;
    left:970px;
    object-fit: cover;
    background-color: #668AD8;
    border-color: #668AD8;
}
.text{
    background-color: aliceblue !important;
    border-color: black;
    border-radius: 15px;
}
#owa{
    z-index: 200;
    position: absolute;
    right: 545px;
    top:600px;
    width: 355px;
    height: 70px;
    border-radius: 70px;
    color: rgb(0, 0, 0);
  font-size: 20px;
}
.hei1{
    width:900px;
    height: 100px;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(226, 224, 224);
    opacity: 0.7;
    padding-top: 5px;
    padding-left: 30px;
    text-align: start;
    font-size: 25px;
    bottom: 0px;
    font-weight: bold;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1.5s steps(100),
      blink .5s steps(1) infinite alternate;
}
  @keyframes typing{
    0% {width: 0;}
  }
  @keyframes blink{
    50% {border-right-color: transparent;}
  }