@charset "UTF-8";

footer {
width: 100%;
position: relative;
min-height: 100%;	
margin-top: auto;
background-color: #009ec7;
height: 230px;
padding: 10px 0px;
text-align: left;
font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; 
color: #ffffff;
}

footer p{
font-size: 14px;
line-height: 1.3em;
}

.balloon{
position: absolute;
right: 140px;
bottom: 280px;
}

.house{
position: absolute;
right: 50px;
bottom: 233px;
}

footer_nav ul {
list-style:none;
}

footer_nav ul li  {
display: inline-block;
padding: 15px 0px 15px 10px;
font-size: 16px;
}

.circle01 {color: #145d94}
.circle02 {color: #c3c234}
.circle03 {color: #e8c537}
.circle04 {color: #ca4c91}

.footer_logo img{
margin: 0px;
padding: 10px;
} 

.address{
position: absolute;
bottom: 50px;
right: 20px;
text-align: right;
}

footer .copyright {
position: absolute;
width: 95%;
bottom: 15px;
font-size: 13px;
text-align: center;
}

	@keyframes animScale {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.2, 1.2); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

.balloon:hover{
animation: animScale 3s ease-out;
transform-origin: 50% 50%;
animation-play-state:running;
}



/* Media Queries(メディアクエリ)
--------------------------------------------------------- */
@media screen and (max-width: 768px){
    
footer {
width: 100%;
height: 200px;
padding: 0px;
}
    
footer p{
font-size: 12px;
line-height: 1.2em;
}
    
.balloon{
position: absolute;
right: 120px;
bottom: 220px;
}

.house{
position: absolute;
right: 20px;
bottom: 183px;
}
    

footer_nav ul li  {
display: inline-block;
padding: 20px 0px 10px 10px;
font-size: 13px;
}

    
.footer_logo img{
margin: auto;
width: 90%;
} 
    

.address{
bottom: 35px;
right: 10px;
text-align: right;
}
    
footer .copyright {
bottom: 10px;
font-size: 11px;
}

    
}