/* ----------- btn ------------ */
.opa{
  transition: 0.3s;
}
.opa:hover{
  opacity: 0.7;
}
.opa_drk, .opa_wht{
  position: relative;
  padding-bottom: 2px;
}
.opa_drk:hover:after, .opa_wht:hover:after {
  transform: scaleX(1);
}
.opa_drk:after, .opa_wht:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transition: transform .3s ease;
  height: 1px;
  width: 100%;
}
.opa_drk:after {
  background: #000;
}
.opa_wht:after {
  background: #fff;
}
.hov_red{
  transition: .1s;
  padding-bottom: 0px;
  border-bottom: 1px solid;
}
.hov_red:hover{
  color: #E21C35;
}
/* ----------- 改行＆表示切り替えレスポンシブ ------------ */
@font-face {
  font-family: 'arial';
  src: url("../fonts/arial.woff") format("woff");
}
.arial {
  font-family: 'arial';
}
.on1280{
  display: none;
}
.on1024{
  display: none;
}
.on768{
  display: none;
}
.on480{
  display: none;
}
@media (max-width: 1280px){
  .off1280{
    display: none;
  }
  .on1280{
    display: block;
  }
}
@media (max-width: 1024px){
  .off1024{
    display: none;
  }
  .on1024{
    display: block;
  }
}
@media (max-width: 768px){
  .off768{
    display: none;
  }
  .on768{
    display: block;
  }
}
@media (max-width: 480px){
  .off480{
    display: none;
  }
  .on480{
    display: block;
  }
}
/* --------------------- header ------------------- */
header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
}
header .headerLogo{
  max-width: 200px;
}
header nav.gnavi{
  float: unset;
  height: auto;
}
header nav.gnavi ul{
  display: flex;
  justify-content: space-around;
}
header nav.gnavi li{
  float: unset;
}

/* --------------------- common ------------------- */
.c_white {
  color: #fff;
}
.f36 {
  font-size: 36px
}
.f14 {
  font-size: 14px;
}
.h2-inner .f14{
  margin-top: 8px;
  letter-spacing: 2px;
}