@charset "UTF-8";

body {
    /*ここから*/
    font-family: 'Orbitron','ヒラギノ丸ゴ ProN W4', sans-serif;
    background-image: url("haikei.jpg");
    background-size: auto 100vh;
    /*background-size: cover;*/
    background-repeat: no-repeat;
    padding:0;
    margin:0;
    /*ここまで*/
}

.layer-in {

      bottom: 0px;
      height: 100%;
      text-align: center;
}

.layer-img {
    height: auto;
    width: 100vw;
    margin: 0 auto;
}


.box14 {
    padding: 1em 0;
    width: 80%;
    /*height: 20%;*/
    background-color: rgba(5, 90, 142, 0.5);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    position: absolute;
    left: 9%;
    bottom: 28%;
    border-radius: 8px;
}
.box13 {
    padding: 1em 1em;
    width: 80%;
    height: 5%;
    color: white;
    background-color: rgba(5, 90, 142, 0.5);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: 5%;
    bottom: 50%;
    border-radius: 8px;
}
.box16 {
    padding: 1em 1em;
    width: 80%;
    height: 20%;
    background-color: rgba(255, 204, 51, 0.55);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    position: absolute;
    left: 5%;
    bottom: 20%;
    border-radius: 8px;
    flex-shrink: 0;

}

.box14 p {
    color: white;
    font-size: 4vw;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.box13 p {
    color: white;
    font-size: 4vw;
    margin:0;
    padding: 0;
    text-align: center;
}

.inner_box16 p {
    color: white;
    font-size: 4vw;
    margin: 0;
    padding: 0;
    text-align: center;
}


/*以下フェードイン表示の指定*/

.fadein {
    opacity: 0;
    animation: fadein 3s ease forwards;
}

@keyframes fadein {
    100% {
        opacity: 1;
    }
}


/*以下遅延の指定*/

.txt01 {
    animation-delay: 0.5s;
}

.txt02 {
    animation-delay: 1s;
}

.txt03 {
    animation-delay: 1.5s;
}

.txt04 {
    animation-delay: 2s;
}

.txt05 {
    animation-delay: 2.5s;
}

/*.top {
    font-size: 2vw;
    margin: 0;
    padding: 0;
    text-align: center;
    color: black;
}

.bottom {
    font-size: 3;
    margin: 0;
    padding: 0;
    text-align: center;
    color: black;
    border-radius: 4px;
}*/

.negaword {
    /*padding: 0.5em 1.5em;*/
    padding: 1em 0;
    width: 80%;
    height: 5%;
    background-color: rgba(153, 153, 153, 0.5);
    border: solid 1px;
    position: absolute;
    border-radius: 9px;
    left: 9%;
    bottom: 15%;
    font-size: 4vw;
    text-align: center;
    color: white;
}

.btn1 {
    padding: 0.5em 1em;
    width: 80%;
    height: 10%;
    background-color: rgba(5, 90, 142, 0.5);
    border-radius: 9px;
    position: absolute;
    color: white;
    left: 9%;
    margin: auto;
    bottom: 3%;
    font-size: 4vw;
}

.btn1:hover {
    opacity: 1;
}

#loading {
    width: 100vw;
    height: 100vh;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loadinglayer-img{
  width: auto;
  height: 100%;
  margin: 0 auto;

}

.box15 {
    padding: 0;
    width: 80%;
    height: 10%;
    font-size: 8vw;
    color: black;
    background-color: rgba(5, 90, 142, 0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0);
    border-radius: 15px;
    position: absolute;
    bottom: 50%;
    left:10%;
    margin:0;
    border-radius: 8px;

}
.fadein2 {
    opacity: 0;
    animation: fadein 3s ease forwards;
    display: inline-block;
    animation-iteration-count: 100;
}

@keyframes fadein2 {
    100% {
        opacity: 1;
    }
}


/*以下遅延の指定*/

.txt01 {
    animation-delay: 0.5s;
}

.txt02 {
    animation-delay: 1s;
}

.txt03 {
    animation-delay: 1.5s;
}

.txt04 {
    animation-delay: 2s;
}

/* test */
.inner_box16{
  display:flex;
  align-items: center;
  justify-content: center;
  height:100%;
  width:100%;
  flex-shrink: 0;

}

/*.loadinglayer-img{
    width: 100vw;
    height: auto;
}*/