*{
margin:0;
padding:0;
line-height:0;
}
.responsive{
max-width:100%;
}

body{
min-height: 100vh;
background:url(images/bg_pc.jpg) no-repeat 50% 0%;
background-size: cover;
}
#content{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width:94vw;
aspect-ratio:8/4;
}
#title{
position:absolute;
top:5%;
left:0;
width:38%;
}
#illust{
position:absolute;
top:0;
right:0;
width:62%;
}
#logo{
position:absolute;
top:70%;
left:4%;
width:30%;
}

#close{
position:absolute;
top:2%;
right:2%;
width:8%;
}
#close img{
cursor:pointer;
}

.mobile{
display:none;
}
.mobile_table{
display:none;
}

@media (max-width: 639px) {
body{
background:url(images/bg.jpg) no-repeat 50% 0%;
background-size: cover;
}
#content{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -48%);
width:100vw;
aspect-ratio:unset;
}
#title{
position:relative;
top:0;
left:16%;
width:72%;
}
#illust{
position:relative;
top:0;
left:0;
width:100%;
margin-top:2%;
}
#logo{
position:relative;
top:0;
left:20%;
width:60%;
margin-top:4%;
}

#close{
width:15%;
}

.pc{
display:none;
}
.mobile{
display:block;
}
.mobile_table{
display:table;
}
}