@charset "utf-8";

#mainBox{
text-align: center;
position:relative;
background:url("../img/bg_pc.png");
padding:0px 0 30px 0;
vertical-align: top;
overflow: hidden;
font-size: 0;
}
#footBox{
text-align: center;
position:relative;
background:url("../img/bg_pc2.png");
padding:30px 0;
margin-top:20px;
font-size: 0;
vertical-align: top;
overflow: hidden;
}
.imgChange{
visibility: hidden;
}
#free{
position:absolute;
top:90px;
left:840px;
width: auto;
height: auto;
opacity:0;
}
#fumi{
position:absolute;
top:450px;
left:700px;
width: auto;
height: auto;
opacity:0;
}
#bear0,
#bear1,
#bear2,
#bear3,
#bear4,
#koala,
#owl{
transform-origin: 0 100%;  
-moz-transform-origin: 0 100%;  
-webkit-transform-origin: 0 100%;  
}
#bear0{
position:absolute;
top:128px;
left:13px;
width: auto;
height: auto;
}
#bear1{
position:absolute;
top:712px;
left:34px;
width: auto;
height: auto;
}
#bear2{
position:absolute;
top:764px;
left:174px;
width: auto;
height: auto;
}
#bear3{
position:absolute;
top:670px;
left:270px;
width: auto;
height: auto;
}
#bear4{
position:absolute;
top:710px;
left:530px;
width: auto;
height: auto;
}
#koala{
position:absolute;
top:745px;
left:410px;
width: auto;
height: auto;
}
#owl{
position:absolute;
top:825px;
left:575px;
width: auto;
height: auto;
}
.event{
margin-top: 25px;
}
.event:first-of-type{
margin-top: 0;
}
.absolute{
position:absolute;
top:30px;
left: 0;
z-index: 1;
}
#headBox .absolute{
left: 30px;
}
.relative{
position:relative;
}
.wrap{
position: relative;
text-align: center;
margin: 0;
padding: 0;
margin-top: 0px;
}
#mainBox .wrap{
margin-top: 0px;
}
#event4{
margin: 25px 25px 25px 0;
}
#event5{
margin: 25px 0 25px 0;
}
#infoWrap1{
position: absolute;
top:335px;
left:50%;
margin-left: -460px;
z-index: 1;
}
#infoWrap2{
position: absolute;
top:335px;
left:50%;
margin-left: 150px;
z-index: 1;
}
#info1{
margin: 0 25px 0 0;
}
#info2{
margin: 0;
}
.sns{
width: 90px;
display: inline-block;
margin: 0;
text-align: center;
}
.sns img{
width: 50px;
height: 50px;
margin-bottom: 5px;
}
.sns a{
color: #005160;
font-size: 12px;
}
.sns a:hover{
color: #E5290F;
}
.sns a:visited{
color: #888;
}
.notes-m{
margin-top: 10px;
font-size: 14px;
}


/* スマホ */
@media screen and (max-width:640px){

#mainBox,
#footBox{
margin:0 -12px;
overflow: hidden;
}
#mainBox{
background:url("../img/bg_sp.png");
padding:0 0 7% 0;
}
#footBox{
background:url("../img/bg_sp2.png");
padding:7% 0;
margin-top: 7%;
}
#free{
width: 31%;
top:13%;
left:57%;
}
#fumi{
width: 68%;
top:63%;
left:0.5%;
}
#bear0{
width: 30%;
top:6.7%;
left:32.2%;
}
#bear1{
width: 18%;
top:81.8%;
left:83%;
}
#bear2{
width: 16%;
top:51%;
left:78%;
}
#bear3{
width: 23.5%;
top:52%;
left:2%;
}
#bear4{
width: 17%;
top:64%;
left:78%;
}
#koala{
width: 20%;
top:75%;
left:68%;
}
#owl{
width: 15%;
top:91%;
left:70%;
}
.event{
margin-top: 3%;
}
.event:first-of-type{
margin-top: 0;
}
#event4{
margin: 3% 0 3% 0;
}
#event5{
margin: 0 0 3% 0;
}
#info1{
margin:0;
}
#info2{
margin: 4% 0 0 0;
}
#infoWrap1{
position: absolute;
margin: 0;
padding: 0;
top:37%;
left:0;
width: 100%;
z-index: 1;
}
#infoWrap1 img{
width: 65%;
height: auto;
}
#infoWrap2{
position: absolute;
margin: 0;
padding: 0;
top:82%;
width: 100%;
left:0%;
z-index: 1;
}
.sns{
width: 15%;
margin: 0 2%;
}
.sns img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
.sns a{
font-size: 2.4vw;
}
.notes-m{
font-size: 2.2vw;
}

}