*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}

a img{
border:none;
}
img{
vertical-align:bottom;
}
li{
list-style-type: none;
}
.responsive{
max-width:100%;
}

#curtain{
position:fixed;
top:0;
left:0;
width:100vw;
height:100dvh;
background-color:#fff;
z-index:100;
}
#curtain .loading{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:20%;
opacity:0.2;
}

#header{
position:relative;
padding:20px 0;
min-width: 1130px;
background:url(images/header_bg.jpg) no-repeat 50% 0%;
background-size: cover;
}
#header .logo{
position:absolute;
top:5%;
right:2%;
}

#content{
padding:20px 0 40px 0;
min-width: 1130px;
background:url(images/bg.png) 50% 0%;
}
#content .catch{
margin:0 auto;
width:770px;
}
#content .title{
margin:40px auto 0 auto;
width:800px;
}
#content p{
font-size:1.2rem;
line-height:1.4;
color:#792400;
}
#content p.em{
margin-top:20px;
font-weight:bold;
font-size:2rem;
}

#quiz{
margin:20px auto 0 auto;
width:1130px;
}
#quiz > div{
display:inline-block;
margin-top:2%;
padding:0 1%;
vertical-align: bottom;
width:45%
}

/*youtube*/
#quiz .yt{
position: relative;
width: 100%;
padding-top: 56.25%;/*16:9=100:x*/
}
#quiz .yt iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#footer{
padding:20px 0 20px 0;
min-width: 1130px;
background:url(images/footer_bg.jpg) 50% 0%;
}
#footer ul{
display:table;
table-layout:fixed;
margin:0 auto;
width:1000px;
}
#footer li{
display:table-cell;
vertical-align:middle;
}
#footer li:nth-child(1), #footer li:nth-child(3){
width:28%;
}
#footer li:nth-child(2){
width:44%;
}
#footer .btn{
margin-top:-20px;
}

.mobile_inline{
display:none;
}



@media (max-width: 640px) {
#curtain .loading{
width:60%;
}

#header{
padding:2vw 2vw;
min-width: unset;
}
#header .logo{
top:1%;
right:1%;
width:26%;
}

#content{
padding:4vw 0 8vw 0;
min-width: unset;
background-size: 70%;
}
#content .catch{
width:90%;
}
#content .title{
margin:3vw auto 0 auto;
width:96%;
}
#content p{
font-size:3.5vw;
}
#content p.em{
margin-top:4vw;
font-size:5vw;
}

#quiz{
margin:4vw auto 0 auto;
width:92%;
}
#quiz > div{
margin-top:5vw;
width:100%
}

#footer{
min-width: unset;
padding:2vw 0 2vw 0;
}
#footer ul{
width:96%;
}
#footer li:nth-child(1), #footer li:nth-child(3){
width:24%;
}
#footer li:nth-child(2){
padding:0 2%;
width:44%;
}
#footer .btn{
margin-top:-1vw;
}
#footer .copyright{
margin-top:-2vw;
}

.mobile_inline{
display:inline;
}
}