@charset "utf-8";

/* ==========================================================================
  keyvisual
  ========================================================================== */
.keyvisual {
  text-align: center;
  color: #fff;
}
.keyvisual p {
  margin: 0;
  font-weight: bold;
  line-height: 1.3;
}
.keyvisual span {
  display: block;
}

@media screen and (max-width: 767px) {
  .keyvisual {
    height: 125px;
    padding-top: 35px;
    box-sizing: border-box;
  }
  .keyvisual p {
    padding: 0 10px;
    font-size: 2.7rem;
    text-shadow:0px 0px 12px #000;
  }
  .keyvisual span {
    font-size: 1.3rem;
    text-shadow:0px 0px 12px #000;
  }
  body#advantage .keyvisual {
    background: url(/assets/img/advantage/keyvisual_sp.jpg) center 25% no-repeat;
    background-size: cover;
  }
  body#business .keyvisual {
    background: url(/assets/img/business/keyvisual_sp.jpg) center center no-repeat;
    background-size: cover;
  }
  body#company .keyvisual {
    padding-top: 45px;
    background: url(/assets/img/company/keyvisual_sp.jpg) center center no-repeat;
    background-size: cover;
  }
  body#contact .keyvisual {
    padding-top: 45px;
    background: url(/assets/img/contact/keyvisual_sp.jpg) center center no-repeat;
    background-size: cover;
  }
}

@media screen and (min-width: 768px) {
  .keyvisual {
    height: 190px;
    padding-top: 60px;
    box-sizing: border-box;
  }
  .keyvisual p {
    font-size: 5.4rem;
    text-shadow:0px 0px 12px #000;
  }
  .keyvisual span {
    font-size: 1.8rem;
    text-shadow:0px 0px 12px #000;
  }
  body#advantage .keyvisual {
    background: url(/assets/img/advantage/keyvisual_pc.jpg) center center no-repeat;
    background-size: cover;
  }
  body#business .keyvisual {
    background: url(/assets/img/business/keyvisual_pc.jpg) center center no-repeat;
    background-size: cover;
  }
  body#company .keyvisual {
    background: url(/assets/img/company/keyvisual_pc.jpg) center center no-repeat;
    background-size: cover;
  }
  body#contact .keyvisual {
    background: url(/assets/img/contact/keyvisual_pc.jpg) center center no-repeat;
    background-size: cover;
  }
}
@media screen and (min-width: 1024px) {
  .keyvisual {
    height: 240px;
    padding-top: 85px;
  }
}


/* ==========================================================================
  main_nav
  ========================================================================== */

@media screen and (max-width: 767px) {
  .main_nav {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .main_nav {
    padding: 55px 0;
    background: #f4f4f4;
  }
  body#company .main_nav {
    padding: 30px 0;
  }
  .main_nav-container {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .main_nav-list {
    margin: 0 -10px;
    padding: 0;
    list-style: none;
  }
  .main_nav-list:after {
    content: "";
    display: block;
    clear: both;
  }
  .main_nav-list li {
    float: left;
    width: calc(16.666% - 20px);
    margin: 0 10px;
  }
  body#company .main_nav-list li {
    width: calc(25% - 20px);
  }
  .main_nav-list a {
    display: block;
    color: #555;
    font-size: 1.4rem;
    text-decoration: none;
    transition: all 0.2s linear 0s;
  }
  body#company .main_nav-list a {
    font-size: 1.8rem;
  }
  .main_nav-list a:hover,
  .main_nav-list a.act {
    opacity: .6;
  }
  .main_nav-list img {
    width: 100%;
    height: auto;
    margin-bottom: 7px;
  }
  .main_nav-list span {
    position: relative;
    padding-left: 20px;
  }
  .main_nav-list span:before {
    position: absolute;
    left: 0;
    top: calc(50% - 8px);
    content: "";
    width: 16px;
    height: 16px;
    background: #26a973 url(/assets/img/common/arrow_right_w.svg) center center no-repeat;
    background-size: 4px auto;
  }
  body#company .main_nav-list span:before {
    background-image: url(/assets/img/common/arrow_bottom_w.svg);
    background-size: auto 4px;
  }
}

@media all and (-ms-high-contrast:none) { /* IE hack */
  .main_nav-list span:before {
    top: 0;
  }
}


/* ==========================================================================
  main
  ========================================================================== */

@media screen and (max-width: 767px) {
  .main_container {
    padding: 20px 0 100px;
  }
}

@media screen and (min-width: 768px) {
  .main_container {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 10px 120px;
    box-sizing: border-box;
  }
}