@charset "utf-8";

/*
Theme Name: footer
*/

/* ************************************************ 
*	フッター
* ************************************************ */
#footer {
clear:both;
width:100%;
margin: 0;
padding: 150px 0;
background-color: #a9afb7;
position : relative;
}
#footer .row{
margin-bottom: 0px;
}
.footer-inner {
margin: 0 5%;
width: 90%;
padding: 0;
position:relative;
z-index:0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-logobox {
width: 20%;
margin: 0;
padding: 0 0 50px 0;
position: relative;
}
.footer-logobox .footer-logo{
padding: 0;
}
.footer-logobox .footer-logo img{
vertical-align: bottom;
width: 160px;
}

.footer-navbox-wrap {
width: 77%;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.footer-namebox {
width: 100%;
margin: 0;
padding: 30px 0 0 0;
border-top: 1px solid #ccc;
}

.footer-namebox p{
font-size: min(1.8vw,16px);
color: #fff;
}

#copyright {
width: 100%;
font-size: min(1.3vw,13px);
margin: 0;
padding: 20px 0 0 0;
line-height: 1.5;
color:#ccc;
}
#copyright a{
color:#ccc;
text-decoration:none;
}
#copyright a:hover {
color: #000;
}

.topcontrol{
z-index:999;
position : absolute;
bottom: 200px!important;
right: 5%!important;
}
.topcontrol a{
color: #fff;
font-size: 15px;
display:block;
position: relative;
text-decoration: none;
}
.topcontrol a:hover{
text-decoration: none;
}
.topcontrol a::before{
position:relative;
bottom:20px;
left: 50%;
content:"";
display:inline-block;
width:50px;
height:50px;
background:url("../watp/images/up.svg") no-repeat;
background-size:contain;
}
.topcontrol a:hover::before{
transform: rotateY(360deg);
transition: 0.5s;
}


/* ************************************************ 
*	レスポンシブ
* ************************************************ */
/* PC 画面の横幅が1160px以上 */
@media only screen and (min-width: 1160px) {
}


/* Tablet (Portrait) 画面の横幅が768px〜1159pxまで */
@media only screen and (min-width: 768px) and (max-width: 1159px) {
#footer { padding: 100px 0; }
.footer-logobox .footer-logo img { width: 120px; }

.topcontrol{
bottom: 100px!important;
right: 5%!important;
}

}


/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
#footer { padding: 75px 0; }
.footer-inner {
margin: 0 auto;
width: 90%;
}
.footer-logobox {
width: 100%;
margin: 0 0 30px 0;
padding: 0;
}
.footer-navbox-wrap { width: 100%; }
.footer-namebox p { font-size: 4.25vw; }
#copyright {
font-size: 3vw;
}

.topcontrol{
bottom: 20px!important;
right: 5%!important;
}
.topcontrol a::before{
width:35px;
height:35px;
}
}