h1{
    display: flex;
    margin: auto;
    margin-top: 20px;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;
}

img{
    padding: 50px;
    display: flex;
    margin: auto;
    width: 700px;
    height: auto;
}

input{
    width: 400px;
    font-size: 30px;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;
}

button{
    font-size: 30px;
    width: 160px;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;
}

audio{
    display: flex;
    margin: auto;
    height: 100px;
    width: 600px;
}

span{
    display: inline-block;
    width: auto;
    margin-left: 20px;
    color: red;
    font-size: large;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;
}

.box{
    margin-bottom: 20px;
}

.header-div{
    display:flex;
    margin: auto;
}

.riddle-aria{
    margin-bottom: 1000px;
}

.container{
    text-align: center;
}

.a{
    display: flex;
    margin: auto;
    text-align: center;
    font-size: 20px;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;
}

iframe{
    display: flex;
    margin: auto;
}

details {
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
    max-width: 800px;
    margin: auto;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;
}

summary {
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;
}

.rank1{
    background-color: hsl(277, 100%, 100%);
}

.rank2{
    background-color: hsl(277, 100%, 93%);
}

.rank3{
    background-color: hsl(277, 100%, 87%);
}

.rank4{
    background-color: hsl(277, 100%, 83%);
}

.reset_button{
    display: flex;
    margin: auto;
    width: auto;
    font-size: 20px;
    font-family: "ヒラギノ角ゴシック", "Noto Sans JP", "メイリオ", monospace;    
}