@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');



body{
    margin:0;
    padding:0;
    font-family:"Kiwi Maru", serif;
    font-weight:400;
    font-style:normal;
    background-image:url("picture/background.png");
    background-repeat:repeat-y;
    background-size:100% auto;
}



.control{
    position:fixed;
    top:0vw;
    height:100%;
    left:0vw;
    width:10vw;
    background-color:#000000;
    box-shadow:0.4vw 0 0.7vw rgba(0,0,0,0.4);
}
.logo{
    margin:1vw 0.5vw 2vw 0.5vw;
    width:9vw;
}
.link{
    padding:1vw;
    margin-left:0.5vw;
    width:9vw;
    font-size:1vw;
    color:#ffffff;
    background:none;
    border:none;
}
.line{
    margin-left:0.5vw;
    width:9vw;
    height:0.03vw;
    background-color:#ffffff;
    opacity:0.7;
}



.screen{
    margin:3.5vw 0.5vw 0 10.5vw;
    width:89vw;
}



.home-box{
    width:100%;
    margin:2vw 0 2vw 0;
    background-color:#000000;
    border:0.1vw solid #ffffff;
}
.home-img{
    margin:3vw 13vw 5vw 13vw;
    width:63vw;
}
.home-text{
    font-size:3.5vw;
    text-align:center;
    color:#000000;
}



.rule-title{
    width:100%;
    font-size:3vw;
    text-align:center;
}
.rule-textbox{
    width:92%;
    margin:2%;
    padding:1% 2%;
    background-color:#ffffff;
    border:0.1vw solid #000000;
}
.rule-text{
    width:100%;
    height:3vw;
    font-size:2.5vw;
    text-align:left;
}



.overview-box{
    width:18%;
    margin:2vw 0.5%;
    padding:0.5% 1%;
    background-color:#000000;
    border:0.5vw solid var(--color);
}
.overview-title{
    width:100%;
    font-size:1.2vw;
    color:#ffffff;
}
.overview-rogo{
    margin:-3% 0;
    width:98.9%;
}
.overview-chart{
    position:absolute;
    left:30vw;
    top:6vw;
    width:69.5vw;
    background-color:#ffffff;
}
.overview-charttitle{
    position:absolute;
    left:32.5vw;
    top:42.5vw;
    font-size:2.5vw;
}
.overview-text{
    position:absolute;
    left:58vw;
    top:var(--top);
    font-size:1.5vw;
}



.game-box{
    margin:0 1vw;
    display:grid;
    grid-template-columns:repeat(2,1fr);
}
.game-boxelement{
    margin:0 0.5vw 1vw 0.5vw;
    width:42vw;
    height:19vw;
    background-color:#000000;
    border:0.5vw solid var(--color);
    position:relative;
}
.game-rogo{
    margin:1vw 0 0 0.3vw;
    width:38%;
}
.game-text{
    margin:1vw 0 0 1.5vw;
    font-size:4.4vw;
    color:#ffffff;
    font-weight:800;
}
.game-chart{
    position:absolute;
    top:1.7vw;
    left:16.7vw;
    width:24.4vw;
    height:15.7vw;
    background-color:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
}
.game-canvas{
  max-width:100%;
  max-height:100%;
  aspect-ratio:16/9;
}
.game-date{
    position:absolute;
    top:48vw;
    left:12vw;
    font-size:3vw;
}
.game-button{
    position:absolute;
    top:48vw;
    left:55.9vw;
    height:4vw;
    width:42.8vw;
    font-family:"Kiwi Maru", serif;
    font-weight:600;
    font-style:normal;
    color:#000000;
    font-size:2vw;
    background-color:#ffffff;
    border:0.3vw solid #000000;
    display:flex;
    justify-content:center;
    align-items:center;
}