@charset "UTF-8";
html {
  font-size: 16px;
}
p{
  line-height: 1.75;
}
a {
  transition: .4s;
}
a:hover {
  opacity: 0.6;
  transition: .4s;
}

.sp {
  display: none;
}
.p-r {
  position: relative;
}
.p-a {
  position: absolute;
}
.ta-c {
  text-align: center;
}
.m-0a {
  margin: 0 auto;
}
.flex, .flex_sp, .flex_sp_r {
  display: flex;
  justify-content: space-between;
}
.col-2, .col-3, .col-4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.col-2 > * {
  width: calc(100% / 2 - 1%);
}
.col-3 > * {
  width: calc(100% / 3 - 1%);
}
.col-4 > * {
  width: calc(100% / 4 - 1%);
}
.col-2 > *:nth-of-type(n+3){
  margin-top: 40px;
}
.bg-white{
  background-color: #fff;
}

.contents .container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.contents .container_large {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}


/* ----- main ----- */
@media screen and (max-width: 768px) {
  html {
    font-size: 10px;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .flex_sp {
    flex-direction: column;
  }
  .flex_sp_r {
    flex-direction: column-reverse;
  }
  .col-2, .col-3, .col-4 {
    flex-direction: column;
  }
  .col-2 > *, .col-3 > *, .col-4 > * {
    width: 100%;
    margin: 0 auto;
  }
  .col-2 > *:nth-of-type(n+2), .col-3 > *:nth-of-type(n+2), .col-4 > *:nth-of-type(n+2) {
    margin-top: 20px;
  }
  .contents .container, .contents .container_large{
    width: 90%;
    margin: 0 auto;
  }
  .navbar .navbar-brand {
    padding: 1rem 0!important;
  }
}