.clear {
clear: both;
}
footer .inner .underline {
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
}
@media screen and (min-width: 768px){
footer .inner .oth-nav {
width: 1200px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
align-items: flex-end;
position: relative;
margin: auto;
}

footer .inner .oth-nav div {
width: calc(25% - 20px);
}
.foot-menu {
width: 100%;
max-width: 1200px;
overflow: hidden;
margin: 10px auto;
flex-wrap: wrap;
display: flex;
justify-content: center;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.footbottom {
margin-top: 60px;
}

}
footer .inner .oth-nav .title {
font-size: 1.2em;
font-weight: bold;
margin: 30px 0;
}
footer .inner .oth-nav ul li {
margin-bottom: 16px;
background-image: url(../../img/arow_gray.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: 6px;
padding-left: 0.8em;
}
footer .inner .oth-nav ul li a {
position: relative;
display: inline-block;
}
.sns-nav {
width: 100%;
max-width: 1200px;
overflow: hidden;
margin: 10px auto;
flex-wrap: wrap;
display: flex;
justify-content: center;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.sns-nav li {
position: relative;
width: 150px;
display: inline-block;
margin: 0.5rem; 
}
.sns-nav li a {
display: flex;
align-items: center;
padding: 5px 0;
}
.sns-nav li a img {
width: 60px;
height: auto;
}
.sns-nav li span {
padding-left: 5px;
}
.foot-menu li {
position: relative;
width: 25%;
display: inline-block;
padding: 20px 0;
}
.foot-menu li a {
display: flex;
align-items: center;
}
.foot-menu li span {
background-image: url(../../img/arow_red.svg);
background-position: left center;
background-size: 1rem;
background-repeat: no-repeat;
padding: 2px 0 4px 1.4rem;
margin: 0 0 0 1rem;
}
.footbottom {
text-align: center;
}
.logounder {
margin-bottom: 10px;
padding: 10px;
}
.copyright{
color: #ccc;
font-size: 0.875em; 
padding-bottom: 1.75em; 
}
@media screen and (max-width: 767px){
.logounder {
font-size: 3.5vw;
}
footer .inner .underline {
border: none;
}
footer .inner .oth-nav {
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
position: relative;
margin: 30px auto 20px auto;
}
footer .inner .oth-nav ul li {
background-repeat: no-repeat;
background-position: left center;
background-size: 6px;
float: left;
font-size: 0.82em;
line-height: 1.4em;
margin-bottom: 10px;
padding-left: 0.8em;
padding-right: 0.5em;
width: 44%;
}
.sns-nav {
border: none;
padding-bottom: 0;
}
.sns-nav li {
width: 10%;
}
.sns-nav li a img {
width: 90%;
}
.sns-nav li span {
display: none;
}
footer .inner .foot-menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
padding: 0;
width: 92%;
margin: auto;
}
.foot-menu li {
width: 100%;
position: relative;
border-bottom: 1px solid #ccc;
padding: 1rem; 
}
.foot-menu li span {
background-image: none;
width: 100%;
margin: 0;
padding: 0.5rem 0.5rem 0.5rem 1.25rem; 
}
.foot-menu li span::after {
content:"";
background-image: url(../../img/arow_red.svg);
background-size: 1rem;
background-repeat: no-repeat;
padding: 2px 0 4px 1.4rem;
margin: 0 0 0 1rem;
position: absolute;
right: 10px;
height: 15px;
}
.foot-menu li a img {
width: 2.25rem;
} 
}