@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  template_c3.css
 style info :  corporate No.3 用の cssの定義
=================================================================== */
/*-----------------------------------------------------------------

layout

-----------------------------------------------------------------*/
#contents_right {
  margin-top: -80px;
  position: relative;
  z-index: 3;
}
.media #contents_right {
  margin-top: 0;
}
main.titlenone {
  margin-top: 80px;
}

@media only screen and (max-width: 690px) {
  main.titlenone {
    margin-top: 55px;
  }
}

/*-----------------------------------------------------------------

header

-----------------------------------------------------------------*/
.drawer-hamburger {
  display: none;
}

body.dcms_editor header.template_c3 {
  position: static;
}

header.template_c3 {
  position: fixed;
  height: 85px;
  width: 100%;
  z-index: 102;
  background-color: #ffffff;
}

header.template_c3 #header_logo {
  margin-left: 21px;
  float: left;
  position: relative;

  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  max-width: 240px;
}

header.template_c3 #header_logo a {
  display: block;
}

header.template_c3 #header_logo a img {
  width: 100%;
  height: auto;
  display: block;
}

header.template_c3 .gnavi_area {
  padding-right: 198px;
  width: 100%;
  height: 100%;
  display: block;
}

header.template_c3 .gnavi_area #drawer_in, header.template_c3 .gnavi_area nav {
  height: 100%;
}

header.template_c3 .gnavi_area ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  height: 100%;
}

header.template_c3 .gnavi_area ul li {
  margin-right: 2em;
  list-style: none;
  height: 100%;
}

header.template_c3 .gnavi_area ul li a {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px 0;
  position: relative;
  font-weight: bold;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  font-size: 13px;
}
header.template_c3 .gnavi_area ul li a:hover{
  color: #0031b1;
  text-decoration: none;
}
header.template_c3 .gnavi_area ul li a::after {
  position: absolute;
  bottom: 0;
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

header.template_c3 .gnavi_area ul li.main_current a {
  text-decoration: none;
}

header.template_c3 .gnavi_contact, 
header.template_c3 .gnavi_contact2, 
header.template_c3 .top_contact_sp {
  display: none;
}

header.template_c3 #contact_area a {
  position: absolute;
  right: 0;
  top: 0;
  width: 98px;
  height: 100%;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

header.template_c3 #contact_area a .txt {
  display: block;
  height: 100%;
  padding: 48px 8px 8px 8px;
  font-weight: bold;
  background-repeat: no-repeat;
  background-image: url(../image/common/bg_head01.png);
  background-position: center 10px;
}
header.template_c3 #contact_area2 a .txt:hover,
header.template_c3 #contact_area a .txt:hover{
  opacity: 0.7;
}
header.template_c3 #contact_area a::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: -webkit-transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
  transition: -webkit-transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
  -o-transition: transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
  transition: transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
  transition: transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98), -webkit-transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
}

header.template_c3 #contact_area a:hover {
  text-decoration: none;
}

header.template_c3 #contact_area a:hover::before {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media only screen and (max-width: 1024px) {
  .drawer-hamburger {
    display: block;
  }
  body.drawer-open header.template_c3::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }
  header.template_c3 {
    height: 65px;
  }
  header.template_c3 #header_area {
    height: 55px;
  }
  header.template_c3 .gnavi_area {
    padding-right: 0;
    width: 100%;
  }
  header.template_c3 #drawer_in {
    padding: 77px 25px 25px 25px;
    overflow-y: scroll;
    height: auto;
  }
  header.template_c3 .gnavi_area #drawer_in {
    height: auto;
  }
  header.template_c3 .gnavi_area nav {
    height: 100%;
  }
  header.template_c3 .gnavi_area ul {
    display: block;
    height: auto;
  }
  header.template_c3 .gnavi_area ul li {
    margin: 0;
    padding: 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    list-style: none;
    height: 100%;
    color: #bbb;
  }
  header.template_c3 .gnavi_area ul li a {
    padding: 16px;
  }
  header.template_c3 .gnavi_area ul li a::after {
    display: none;
  }
  header.template_c3 .gnavi_area ul li:first-child {
    border-width: 1px 0 1px 0;
    border-style: solid;
        color: #bbb;
  }
  header.template_c3 #header_logo {
    margin-left: 16px;
    width: auto;
  }
  header.template_c3 #header_logo a img {
    height: auto;
    width: 85%;
    margin: 0 0 0 0;
  }
  header.template_c3 #contact_area {
    display: none;
  }
  header.template_c3 .gnavi_contact {
    display: block;
    margin-top: 1.5em;
  }
  header.template_c3 .gnavi_contact a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
  }
  header.template_c3 .gnavi_contact a .txt {
    display: block;
    height: 100%;
    padding: 45px 8px 8px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-image: url(../image/common/bg_head01.png);
    background-position: center 12px;
  }
  header.template_c3 .gnavi_contact a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: -webkit-transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
    transition: -webkit-transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
    -o-transition: transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
    transition: transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
    transition: transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98), -webkit-transform 0.4s 0s cubic-bezier(0.48, 0.18, 0, 0.98);
  }
  header.template_c3 .gnavi_contact a:hover {
    text-decoration: none;
  }
  header.template_c3 .gnavi_contact a:hover::before {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  header.template_c3 .gnavi_contact a {
    color: #ffffff;
    background-color: #152E6E;
}
header.template_c3 .gnavi_contact2 {
    display: block;
    margin-top: 1.5em;
}
header.template_c3 .gnavi_contact2 a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}
  header.template_c3 .gnavi_contact2 a {
    color: #ffffff;
    background-color: #EC8141;
}
header.template_c3 .gnavi_contact2 a .txt {
    display: block;
    height: 100%;
    padding: 45px 8px 8px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-image: url(../image/common/bg_head02.png);
    background-position: center 12px;
}
header.template_c3 .gnavi_contact2 a:hover{
  text-decoration: none;
}
header.template_c3 .gnavi_contact2 a .txt:hover,
header.template_c3 .gnavi_contact a .txt:hover{
  opacity: 0.7;
}
.top_contact_sp {
    display: block;
    margin: 22px auto 0;
}
.top_contact_in_sp p{
  text-align: center;
  color: #333;
}
.top_contact_in_sp span{
  text-align: center;
  color: #152E6E;
  display: block;
  font-size: 40px;
  font-weight: 700;
}
}





header.template_c3 #contact_area2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 97px;
    height: 85px;
}
header.template_c3 #contact_area2 a {
    display: block;
    height: 100%;
    background-color: #EC8141;
    color: #ffffff;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
}
header.template_c3 #contact_area {
    position: absolute;
    right: 97px;
    top: 0;
    width: 97px;
    height: 85px;
}
header.template_c3 #contact_area a {
    display: block;
    height: 100%;
    background-color: #5284B2;
    color: #ffffff;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    font-size: 10px;
}
header.template_c3 #contact_area2 a .txt {
    display: block;
    height: 100%;
    padding: 48px 8px 8px 8px;
    font-weight: bold;
    background-repeat: no-repeat;
    font-size: 10px;
    background-image: url(../image/common/bg_head02.png);
    background-position: center 15px;
}
.page_payroll .template_c3, 
.media .template_c3 {
    background-color: #ffffff;
}
.page_payroll .template_c3 #header_area, 
.media .template_c3 #header_area {
    width: 100%;
    height: 85px;
    max-width: 1320px;
    margin: auto;
    position: relative;
}