body{

  font-family:  "A1 Mincho","Sawarabi Mincho", sans-serif;
  color: #000;
  letter-spacing: .2em;
  background: url(../img/common/bg.png) repeat-y 50% 50% / 100%;
}

a{
  color: #000;
  transition: opacity .3s;
}

@media (max-width: 767px) {
  .sp_none{
    display: none !important;
  }
}

@media (min-width: 768px) {
  .pc_none{
    display: none !important;
  }
}

.aC{
  text-align: center;
}
@media (max-width: 767px) {
  .sp_aL{
    text-align: left !important;
  }
}
.wrap{
  margin: 0 auto;
  max-width: 1100px;
  width: 90%;
}

.body__inner{
  overflow: hidden;
  padding-top: 139px;
}

.sp{
  display: none;
}

.pc{
  display: block;
}

@media (max-width: 1300px) {

  .body__inner{
    padding-top: 10vw;
  }
}

@media (max-width: 1023px) {

  .body__inner{
    padding-top: 70px;
  }

}

@media (max-width: 767px) {

  body{
    letter-spacing: .1em;
  }
  .wrap{
    margin: 0 20px;
    width: auto;
  }

  .sp{
    display: block;
  }

  .pc{
    display: none;
  }

}


 /* ==========================================================================
   bg
   ========================================================================== */
.bg{
  /*background: url(../img/common/bg.png) repeat-y 50% 50% / 100%;*/
}


/* ==========================================================================
   header
   ========================================================================== */
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255,255,255,0);
  height: 139px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
  transition: height .3s,background-color .3s;
}

header.is-fixed{
  background-color: rgba(255,255,255,.8);
  height: 100px;
}

header > p{
  margin-left: 28px;
}

header ul{
  display: flex;
  margin-right: 76px;
}

header ul li{
  margin-left: 38px;
  font-size: 16px;
  white-space: nowrap;
}

header ul li a{
  position: relative;
  padding-left: .2em;
}

header ul li a::after{
  content: "";
  width: 0%;
  height: 1px;
  background-color: #707070;
  position: absolute;
  right: 0;
  bottom: -5px;
  transition: width .3s ;
}

header ul li a.hover::after{
  width: 100%;
  left: 0;
}

@media (max-width: 1300px) {

  header{
    height: 10vw;
  }

  header.is-fixed{
    height: 80px;
  }

  header > p{
    margin-right: 30px;
  }

  header ul{
    margin-right: 30px;
  }

  header ul li{
    margin-left: 28px;
    font-size: 1.3vw;
  }

}

@media (max-width: 1023px) {

  header{
    height: 70px;
  }

  header.is-fixed{
    height: 70px;
    background-color: rgba(255,255,255,.9);
  }

  header > p{
    margin-left: 20px;
    width: 180px;
  }

  header nav{
    position: fixed;
    left: 0;
    top: 70px;
    width: 100%;
    background-color: rgba(255,255,255,.9);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    padding-bottom: 10px;
  }

  header nav.is-active{
    opacity: 1;
    visibility: visible;
  }

  header ul{
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px;
  }

  header ul li{
    margin-left: 0px;
    font-size: 12px;
    width: 50%;
    text-align: center;
  }

  header ul li a{
    display: block;
    padding: 8px 0;
  }

  header ul li a::after{
    display: none;
  }

}

/* ==========================================================================
   c-ham
   ========================================================================== */


@media (max-width: 1023px) {

  .c-ham{
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 10000;
  }

  .c-ham span{
    width: 28px;
    height: 1px;
    background-color: #000;
    display: block;
    margin: 0 auto;
    transition: .4s ease;
  }

  .c-ham span:first-child{
    margin-top: 6px;
  }

  .c-ham span:nth-child(2){
    margin-top: 7px;
  }

  .c-ham span:nth-child(3){
    margin-top: 7px;
  }

  .c-ham.is-active span:first-child{
    transform: translateY(8px) rotate(45deg);
  }

  .c-ham.is-active span:nth-child(2){
    opacity: 0;
  }

  .c-ham.is-active span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }


}


/* ==========================================================================
   c-secttl
   ========================================================================== */
.c-secttl {
  text-align: center;
  margin-bottom: 60px;
}

.c-secttl span{
  border-bottom: 1px solid #707070;
  padding-bottom: 14px;
  font-size: 22px;
  line-height: 22px;
  vertical-align: baseline;
}

.c-secttl span img{
  /*vertical-align: middle;*/
  vertical-align: top;
}

@media (max-width: 767px) {

  .c-secttl {
    margin-bottom: 40px;
  }

  .c-secttl span{
    padding-bottom: 5px;
    font-size: 19px;
    line-height: 19px;
  }

  .c-secttl img{
    width: auto;
    height: 19px;
  }

}

/* ==========================================================================
   c-txt
   ========================================================================== */
.c-txt{
  font-size: 16px;
  line-height: 1.75;
}

@media (max-width: 767px) {

  .c-txt{
    font-size: 14px;
    line-height: 1.75;
  }

}

/* ==========================================================================
   footer
   ========================================================================== */
footer{
  /*padding-bottom: 120px;*/
  padding-bottom: 50px;
}

footer ul{
  display: flex;
  font-size: 14px;
  margin-bottom: 37px;
}

footer ul li{
  margin-right: 23px;
}

.footer__copy{
  font-size: 14px;
}

footer ul li a{
  position: relative;
}

footer ul li a::after{
  content: "";
  width: 0%;
  height: 1px;
  background-color: #707070;
  position: absolute;
  right: 0;
  bottom: -5px;
  transition: width .3s;
}


footer ul li a.hover::after{
   width: 100%;
   left: 0;
}



@media (max-width: 767px) {

  footer{
    /*padding-bottom: 60px;*/
    padding-bottom: 20px;
  }

  footer ul{
    display: flex;
    font-size: 13px;
    margin-bottom: 24px;
  }

  footer ul li{
    margin-right: 23px;
  }

  .footer__copy{
    font-size: 11px;
  }

}

