*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
a img{
border:none;
}
img{
vertical-align:bottom;
max-width:100%;
}
li{
list-style-type: none;
}

body{
margin:0 auto;
background-color:transparent;
}

#loader{
position: absolute;
width: 6%;
aspect-ratio:1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#loader img{
position: absolute;
width: 100%;
top: 0;
left: 0;
}
#loader img:nth-of-type(1){
position: relative;
}
#loader{
animation:1.0s ease-in-out infinite scales;
transform-origin:50% 50%;
}
#loader img:nth-of-type(2){
animation:0.8s linear infinite rotation;
}
#loader img:nth-of-type(3){
animation:9.6s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
100%{ transform:rotate(-360deg); }
}
@keyframes scales{
  0%{ opacity: 0.8;}
 50%{ opacity: 0.4;}
100%{ opacity: 0.8;}
}

#container{/*jsで管理*/
/*position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 100%;*/
/*opacity:0;
display:none;*/
margin:0 auto;
width: 100%;
max-width:1200px;
display:none;
}

header{
position:relative;
z-index:1;
margin:0 auto 0 auto;
width:77%;
}
header .logo{
position:absolute;
bottom: 5%;
left: 23.5%;
width: 52%;
}

#content{
position:relative;
z-index:0;
margin:-14.5% auto 0 auto;
width:80%;
font-size:0;
}
#content .bg{
border-radius:20px;
padding-bottom:5%;
background:url(../images/wood.jpg) 0% 50%;
background-size: 100% auto;
}

#prize {
padding-top: 18%;
}
#prize article{
display: inline-block;
margin: 0 1%;
width: 45%;
}

.exp {
display: inline-block;
margin: 3% 1% 0 1%;
width: 45%;
vertical-align: top;
}
.exp h2 {
display: inline-block;
vertical-align: middle;
width: 25%;
margin-right: 2%;
}
.exp p {
display: inline-block;
vertical-align: middle;
width: 66%;
color: #fff;
text-align: justify;
}
#howto p{
font-size: 1.2vw;
line-height:1.6;
}
#period p{
font-size:1.5vw;
line-height:1.6;
}

#link{
margin:5% auto 0 auto;
max-width: 40%;
}
#link p{
font-size:1.5vw;
line-height:1.4;
color:#FFFF36;
}

.mobile{
display:none;
}

.SPhover{
opacity: 0.7;
}


@media (max-width: 767px) {
#loader{
width: 22%;
}

#container {
padding: 2% 0;
}
header {
margin-left: 6%;
width: 84%;
}
header .logo{
bottom: 0;
left: 5%;
width: 95%;
}
#content{
margin:-26% auto 0 auto;
width:90%;
}
#prize {
padding-top: 31%;
}
#prize article{
margin: 1% auto 0 auto;
display: block;
width: 93%;
}

.exp {
display: block;
margin: 5% 0 0 5%;
width: 95%;
}
.exp article {
text-align: left;
}
.exp h2 {
width: 18%;
}
#howto p{
width: 73%;
font-size:0.9rem;
}
#period p{
font-size:1rem;
}

#link{
max-width: 70%;
}
#link p{
font-size:0.8rem;
}

.mobile{
display:inline;
}
}


@media (min-width: 1400px) {
#howto p {
font-size: 1rem;
}
#period p, #link p{
font-size: 1.3rem;
}
}