/* footerStyle.css */

#ft{background: #222; color: #f9f9f9;} 
#ft .adm_link a{color: #fff; background: #555; padding: 5px; }
#ft a, #ft_copy{color: #888;}
#ft_wr{width: 1200px; padding: 50px 20px; overflow: hidden;}
#ft_sns{width: 65%;}
#ft_sns ul{float: right; overflow: hidden;}
#ft_sns ul li{float: left; width: 40px; height: 40px; text-indent: -9999px; overflow: hidden; margin-left: 15px;}
#ft_sns ul li a{width: 100%; height: 100%; background: url(../../img/common/ft_sns1.png); background-size: 100% auto; }
#ft_sns ul li.ft_sns2 a{background-image: url(../../img/common/ft_sns2.png);}
#ft_sns ul li.ft_sns3 a{background-image: url(../../img/common/ft_sns3.png);}
#ft_sns ul li.ft_sns4 a{background-image: url(../../img/common/ft_sns4.png);}
#ft_contact{width: 40%; text-align: right; margin-top: 10px;}
#ft_contact strong{font-size: 36px; font-weight: 600; line-height: 50px;}
#ft_link{display: flex; margin-bottom: 30px;}
#ft_link > a{ line-height: 20px; font-size: 14px; color: #f9f9f9;}
#ft_link > a::after{content: ""; display: block; width: 1px; height: 15px; background: #888; margin-left: 10px; float: right; margin-right: 10px; margin-top: 3px;}

#ft_link > a.ft_link3::after{display: none;}
#ft_company{}
#ft_company p{font-size: 14px; line-height: 1.5; color: #f9f9f9;}
#ft_copy{font-size: 14px; margin-top: 10px;}

.ft_inner{display: flex; justify-content: space-between; width: 1200px; max-width: 100%; margin: 0px auto; padding: 50px 0;}
.ft_left{width: 100%;}
.ft_left .adm_link{margin-left: 10px;}
.ft_right .rel_site_w {
    position: relative;
    z-index: 130;
    font-size: 15px;
}
.ft_right button {
    width: 240px;
    height: 50px;
    color: #999;
    font-weight: 300;
    padding: 0 20px;
    position: relative;
    border: 1px solid #999;
    text-align: left;
    background: #222;
}
.ft_right button:after {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 6px;
    background: url(/img/btn-rel.png);
    position: absolute;
    content: '';
}
.ft_right button.on:after {
    transform: translateY(-50%) rotate(180deg);
}
.ft_right .rel_site {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #ccc;
    display: none;
}
.ft_right .rel_site li {
    border-top: 1px solid #ccc;
}
.ft_right .rel_site li:first-child {
    border-top: 0;
}
.ft_right .rel_site a {
    display: block;
    padding: 10px 20px;
    color: #666 !important;
}

.ft_right .ft_sns{display: flex; justify-content: flex-end; margin-top: 20px;}
.ft_right .ft_sns a img{width: 40px;}
.ft_right .ft_sns a+a{margin-left: 10px;}

#ft_copy a{color: #fff; background-color: #666; padding: 3px; font-size: 12px;}

@media screen and (min-width:1200px){
    #ft_sns{float: right;}
    #ft_sns ul{float: right;}
    #ft_sns ul li{float: left;}
    #ft_contact{float: right;}
    #ft_link{}
    #ft_company{}
    #ft_copy{float: left;}
}
@media screen and (max-width:1199px){
    #ft{width: 100%;}
    #ft_wr{width: 100%; padding: 40px 0;} 
    #ft_sns,
    #ft_contact,
    #ft_link,
    #ft_company,
    #ft_copy{overflow: hidden; width: 100%;}  
    #ft_sns ul{float: none; width: 264px; margin: 0 auto;}
    #ft_sns ul li{margin: 0; width: 25%;}
    #ft_sns ul li a{background-size: 40px auto; background-position: center; background-repeat: no-repeat;}
    #ft_contact{margin-top: 20px; text-align: center; padding-bottom: 40px; border-bottom: 1px solid #888;}
    #ft_link{text-align: center; width: 313px; margin: 20px auto 0;}
    #ft_company{ text-align: center; margin: 30px auto;}
    #ft_copy{margin-top: 0; text-align: center;}
    #ft_company{width: 100%;}
    #ft_company li{float: none; display: inline-block;}  
    #ft_company li.ft_company2::after, #ft_company li.ft_company3::after{display: none;} 
    #ft_copy span{display: block;}
    #ft_company li.ft_company3{display: block;}
    #ft_contact strong{font-size: 36px; line-height: 50px;}
    #ft_contact p{font-size:14px;}

    .ft_inner{flex-wrap: wrap; padding: 20px 0;}
    .ft_inner .ft_left{width: 100%;}
    .ft_inner .ft_right{width: 100%;}
    #ft_link{margin: 0 auto;}
    #ft_company{margin: 20px 0;}
    #ft_company p{font-size: 12px;}
    .ft_right .rel_site_w{font-size: 12px; width: 60%; margin: 20px auto 0;}
    .ft_right button{height: 35px; width: 100%;}

    #ft_copy a{margin-top: 10px; display: inline-block;}
    .ft_right .ft_sns{justify-content: center;}
}
@media screen and (max-width:480px){
    #ft_company{padding: 0 20px;}
    #ft_company li::after{display: none;} 
    #ft_company li.ft_company6{display: block;}
    #ft_company li.ft_company1::after, #ft_company li.ft_company4::after{display: block;}
    #ft_link{width: 100%; display:block; }
    #ft_link > a{font-size: 12px;}
    #ft_company li{font-size: 12px;}
    #ft_copy{font-size:12px;}
    #ft_contact{margin-bottom: 30px; padding: 0 20px 30px;}
    #ft_contact strong{font-size: 30px; line-height: 40px;}
    #ft_contact p{font-size:12px; line-height: 1.5;}
}
@media screen and (max-width: 430px){
    #ft_company li.ft_company4{display: block;}
    #ft_company li.ft_company4::after{display: none;}
}