Cacher is the code snippet organizer for pro developers

/* ----------------------------
* base
* -------------------------- */
html {
  //font-size: 62.5%;
  font-size: 10px;
}

$font_default: 'Roboto',"ヒラギノ角ゴ ProN",Hiragino Kaku Gothic ProN,"メイリオ",Meiryo,sans-serif;

body {
  margin: auto;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  font-family: $font_default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media screen and (-ms-high-contrast: active),
    (-ms-high-contrast: none) {
      //    font-family: 'sans-serif'; //support IE10 & 11
  }
}

iframe {
  width: 100%;
}

img {
  font-size: 0;
}

a {
  outline: none;

  &:link,
  &:visited,
  &:active {
    text-decoration: none;
    outline: none;
  }

  &:hover {
    outline: none;
  }
}

input, select, textarea {
  border: none;
  outline: none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select {

}

select {
  //appearance: none;
}

select::-ms-expand {
  display: none;
}

textarea {
  max-width: 100%;
}

button {
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
}

.hr{
  border-top: 1px solid #858585;
}

.sp-visible{
  display: none ;
}

.pc-visible{
  display: block;
}


/* ----------------------------
* reset
* -------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

p, figure, dl, dd, ol, ul, li, figure {
  margin: 0;
}

ol, ul, li {
  list-style:none;
  padding: 0;
}

dl {
  padding: 0;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

input, select {
  vertical-align:middle;
  border-radius: 0;
}

img {
  vertical-align: top;
}

address {
  font-style: normal;
}


/* ----------------------------
* @media
* -------------------------- */
$BREAK_POINT_MOBILE: 768px;

@mixin mobile($break-point: $BREAK_POINT_MOBILE) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}

/* ----------------------------
* visible
* -------------------------- */
@include mobile {
  body {
    min-width: 320px;
  }
  .sp-visible{
    display: block;
  }
  .pc-visible{
    display: none;
  }
}


/* ----------------------------
* calc-vw
* -------------------------- */
@function calc-vw($size, $viewport:320){
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

/* ----------------------------
* color
* -------------------------- */
$c_w1: #fff;
$c_w2: #f0f0f0;
$c_w3: #c5c5c5;

$c_b1: #000;
$c_b2: #1a1a1a;
$c_b3: #333;
$c_b4: #4d4d4d;
$c_b5: #666;
$c_b6: #262626;

/* ----------------------------
* flex
* -------------------------- */
@mixin space-between {
  display: flex;
  justify-content: space-between;
}


/* ----------------------------
* opacity
* -------------------------- */
$opacity-link-hover: .6;


/* ----------------------------
* footer
* -------------------------- */
.l-footer{
  background-color: $c_b2;
  color: $c_w1;
  height: 200px;
  text-align: center;
  min-width: 1280px;
  font-weight: 400;
  ul{
    padding: 50px 0 40px;
  }
  li{
    display:inline;
    padding-left:30px;
    padding-right:30px;
    font-size: 11px;
    border-left:1px solid $c_w1;
    a{
      color: $c_w1;
      transition: .15s;
      &:hover{
        opacity: $opacity-link-hover;
      }
    }
  }
  li:first-child {
    border-left:none;
    padding-left:inherit;
  }
  li:last-child {
    padding-right:inherit;
  }
}

.l-footer-logo img{
  width: 100px;
  margin-bottom: 10px;
}
@include mobile {
  .l-footer-logo img{
    margin-bottom: calc-vw(10, 320);
  }
}


.l-footer-credit{
  opacity: .6;
}
@include mobile {
  .l-footer-credit{
    margin-bottom: calc-vw(30, 320);
  }
}

/**  * mobile */
@include mobile {
  .l-footer{
    min-width: inherit;
    height: calc-vw(160, 320);
    ul{
      padding: calc-vw(30,320) 0 calc-vw(40,320);
    }
    li{
      padding: 0 calc-vw(18,320);
    }
  }
}

<!--  .footer  -->
<footer class="l-footer">
  <div class="l-footer-container">
    <div class="l-footer-links">
      <ul class="l-footer-list">
        <li><a href="">PRIVACY POLICY</a></li>
        <li><a href="">TERMS</a></li>
        <li><a href="">CONTACT</a></li>
      </ul>
    </div>
    <a href="//www.recruit.jp" class="l-footer-logo"><img src="" alt=""></a>
    <div class="l-footer-credit">
      <small class="l-footer-copyright">© 2017 Co.,Ltd</small>
    </div>
  </div>
</footer>
<!--  .footer  -->