@charset "utf-8";
/*=========================footer====================================*/

footer,.footernavi,
.footernavi ul,.footernavi ul li,
.footernavi ul li a{
    color: #fff;
    text-decoration: none;
}
footer{
    font-weight: 300;
    line-height: 1.8;
    float: left;
    position: relative;
    z-index: 999;
    width:100%;
    padding:2% 10%;
    background-color:#151515;
}
.footernavi{
    width: 90%;
    max-width: 960px;
    min-width: 777px;
    margin: 20px auto;
}
.footernavi ul{width: 380px;}
.footernavi .ft_upper_l,.footernavi .ft_upper_r,
.footernavi .ft_bottom_l,.footernavi .ft_bottom_r{
    width: 50%;
}
.footernavi .ft_upper_l ul, .footernavi .ft_upper_r ul,
.footernavi .ft_bottom_l ul, .footernavi .ft_bottom_r ul{
    display: inline-block;
    text-align: left;
}
.footernavi .ft_upper_l,
.footernavi .ft_bottom_l{text-align:  left;}
.footernavi .ft_upper_r,
.footernavi .ft_bottom_r{text-align:  right;}
.footernavi h4{
    border-bottom: 1px solid;
    line-height: 1.8;
}
.footernavi li.sns_button {
    width: 21%;
    max-width: 35px;
    display:  inline-block;
    margin: 10px 2% 0 0;
}
.footernavi li.sns_button:nth-child(2){
    margin-left: 3%;
}
.footernavi li.sns_button img {
    width: 100%;
}
.footerlogo{
    width: 100%;
    text-align: center;
    margin-bottom:20px;
}
.copy{
    width: 100%;
    line-height:1.3;
    height:50px;
    display:block;
    text-align:center;
    white-space:nowrap;
    margin-bottom:30px;
    color:#666
}
a.hatena-bookmark-button {margin: 8px 0 0;display: inline-block;}
/*========================================================= media screen 768px =============================*/
@media screen and (max-width: 768px){
    .footer{position: absolute; bottom: 0}
    .footernavi{min-width:0}
    .footernavi ul{width: 100%;}
    .footernavi .ft_upper_r, .footernavi .ft_bottom_r{float:none}
    .copy{font-size:1rem;line-height:1;}
    .footernavi .ft_upper_l,.footernavi .ft_bottom_l,
    .footernavi .ft_upper_r,.footernavi .ft_bottom_r{width:100%;text-align:center}
}
@media screen and (max-width: 480px){
    footer{padding: 15px 12px;}
    .footernavi{margin:20px 0 0 0}
}