@charset "utf-8";
*{
  font-family: 'Noto Sans JP', sans-serif;
}
html{
  height: -webkit-fill-available;
}

body{
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

.main{
    height:100vh;
    width: 100vw;
    position: fixed;
    background-size: cover;
}

.main h2{
    text-align: center !important;
    padding: 6.75rem 0 .5rem;
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 1;
    color: #42484f;
}

.btn-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.btn-flex a{
    text-decoration: none;
    width: 40%;
    margin-top: 1.625rem;
    color: #fff !important;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    padding: 1.125rem 0 1.25rem;
    text-align: center;
    border-radius: 10px;
    border-width: 3px;
    border-style: solid;
    box-shadow: 0 5px 0 0 #2f2626;
}

.btn01{
    background-color: #fa7b7b;
    border-color: #f54646;
}
.btn01:active{
    background-color: #fed6d7;
    border-color: #fcc5c7;
}

.btn02{
    background-color: #e6ce4a;
    border-color: #d5ab48;
}
.btn02:active{
    background-color: #f7f0c8;
    border-color: #f1e5c8;
}

.btn03{
    background-color: #56d1e7;
    border-color: #4891d5;
}
.btn03:active{
    background-color: #c8f1f8;
    border-color: #c3ddf2;
}

.btn04{
    background-color: #4ddb7f;
    border-color: #2fad59;
}
.brn04:active{
    background-color: #c4f4d8;
    border-color: #bbe5cd;
}

.tap{
    font-weight: 400;
    font-size: 1.65rem;
    color: #fff;
    text-align: center;
    line-height: 1;
    margin-top: 1.25rem;
    text-shadow: 0px 0px 10px #000;
}