@charset "UTF-8";

/* =============================================
  header
============================================= */

header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#header.shadow {
  box-shadow: 0 3px 6px 0px #21212129;
}

header .logo {
  width: 440px;
  margin-left: 42px;
  display: flex;
  align-items: center;
}

header .logo a {
  display: inline-block;
  padding: 4px 0;
}

header .logo a img {
  width: 100%;
}

header .logo div {
  margin: 2px 0 0 12px;
  padding: 2px 0 4px 14px;
  border-left: solid 1.5px #707070;
}

header .logo div img {
  max-width: none !important;
  width: 143.83px !important;
}

header nav {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* -ms-flex-wrap: wrap;
  flex-wrap: wrap; */
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

header nav ul li {
  font-style: 1.8rem;
  /*   margin-right: 3em; */
  padding: 21px;
}

header nav ul a {
  width: 100%;
}

header nav ul a:hover {
  color: #005ca2;
}

header nav ul .sub{
  overflow: hidden;
  position: absolute;
  right:140px;
  padding:0 30px;
  min-height: 0;
  height: 0px;
  z-index: 3;
}

@media screen and (max-width: 1248px) {
  header nav ul li{
    padding: 32px 18px;
  }

  header nav ul .sub{
    padding: 0 18px;
  }
}
@media screen and (min-width: 1409px) {
  .sub.active {
    min-height: 60px;
    line-height: 60px;
    background-color:#fff;
    box-shadow: 0 3px 6px 0px #21212129;
  }
  header ul li:last-child .sub.active {
    max-width: 170px;
    width: 100%;
  }
}

.has-sub {
  cursor: default;
}

.has-sub > p {
  padding: 15px;
  font-size: 1.8rem;
  border-top: solid 1px #e5e5e5;
}

.sub01 {
  top: 80px;
}

.sub02 {
  top: 140px;
}

.sub02 a {
  display: flex!important;
  align-items: center;
}

.sub02 img {
  width: 15px;
  margin-left: 15px;
}

@media screen and (min-width: 1409px) {
  .has-sub > p {
    padding: 0;
    border-top: unset;
    font-size: 1.6rem;
  }
}

header nav .contact {
  background-color: #005CA2;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 2rem;
  width: 140px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 12px 0;
}

header nav .contact .icon {
  margin-bottom: 10px;
}

header nav .contact .icon img {
  width: 54px;
}

.js-toggle::after {
  content: "";
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: $c-black transparent transparent transparent;
  display: inline-block;
  margin-left: 7px;
  padding-bottom: 2px;
  vertical-align: middle;
}

.js-hamburger {
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;
  width: 30px;
  height: 100%;
  z-index: 9999;
}

.js-hamburger span {
  width: 100%;
  height: 2px;
  background-color: #005CA2;
  position: relative;
  -webkit-transition: ease 0.4s;
  transition: ease 0.4s;
  display: block;
}

.js-hamburger span:nth-child(1) {
  top: 0;
}

.js-hamburger span:nth-child(2) {
  margin: 8px 0;
}

.js-hamburger span:nth-child(3) {
  top: 0;
}

.js-hamburger.is-active span:nth-child(1) {
  top: 6px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

.js-hamburger.is-active span:nth-child(3) {
  top: -14px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.pagetop {
  display: none;
  position: fixed;
  right: 15px;
  bottom: 60px;
  z-index: 150;
}

.pagetop a {
  display: block;
  font-size: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  background: #ffbc00;
  line-height: 50px;
}

.pagetop a i {
  font-size: 20px;
  color: #fff;
  line-height: 50px;
}

@media screen and (max-width: 1200px) {
  /*   header {
    display: block;
  } */

  header nav {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    /*     margin-top: 30px; */
  }
}

@media screen and (max-width: 855px) {
  header nav a {
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 1409px) {
  .js-hamburger {
    display: none;
  }

}

@media screen and (min-width: 768px) {
  header {
    position: fixed;
    z-index: 100;
  }
}

@media screen and (max-width: 1408.98px) {
  header {
    padding: 15px;
  }

  header nav {
    display: none;
  }

  header nav.is-open {
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.161);
    display: block;
    position: absolute;
    top: 69px;
    left: 0;
    width: 100%;
    z-index: 100;
  }

  header nav.is-open ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  header nav.is-open ul li {
    margin-right: 0;
  }

  header nav.is-open ul a {
    border-top: solid 1px #e5e5e5;
    display: block;
    font-size: 1.8rem;
    padding: 15px;
  }

  header nav.is-open .contact {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0;
    padding: 15px 0;
    width: 100%;
    height: auto;
  }

  header nav.is-open .contact .icon {
    margin: 0 10px 0 0;
    width: 30px;
  }

  header nav.is-open .contact .icon img {
    width: 100%;
    vertical-align: sub;
  }

  header nav ul {
    margin: 0;
  }

  header nav ul li {
    padding: 0;
  }

  header nav ul .sub{
    overflow:visible;
    position:static;
    height:auto;
  }
}

@media screen and (max-width: 767.98px) {
  header {
    align-items: center;
    display: flex;
    padding: 15px;
    position: fixed;
    z-index: 100;
  }

  header .logo {
    margin-left: 0;
  }

  header .logo a img {
    width: auto !important;
    max-width: 132.31px !important;
  }

  header .logo div {
    margin: 4px 0 2px 10px;
    padding: 0 0 4px 12px;
  }

  header .logo div img {
    width: auto !important;
    max-width: 74.63px !important;
  }

  .pagetop a {
    width: 40px;
    height: 40px;
  }

  .pagetop a i {
    line-height: 40px;
  }

}


/* =============================================
  footer
============================================= */
.footer-nav {
  background-color: #005ca2;
  color: #fff;
  padding: 75px 0 10px;
}

.footer-nav .container {
  max-width: 1250px;
}

.footer-nav .logo {
  margin-bottom: 78px;
  max-width: 400px;
}

.footer-nav .logo img {
  width: 100%;
}

.footer-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.footer-list {
  margin-bottom: 40px;
  width: calc(50% - 50px);
}

.footer-employment-lists {
  margin-bottom: 20px;
}

.footer-newgraduate p,
.footer-employment-list:first-child a {
  font-size: 16px;
  font-weight: bold;
}

.footer-newgraduate {
  width: 100%;
  max-width: 300px;
}

.footer-newgraduate a {
  padding: 10px 15px;
  display: flex;
  border: 1px solid;
  align-items: center;
  justify-content: space-between;
}

.footer-newgraduate img {
  width: 20px;
  height: 20px;
}

@media screen and (min-width: 768px) {
  .footer-employment-lists {
    display: flex;
  }
  .footer-employment-list:first-child {
    margin-right: 40px;
    margin-top: -2px;
  }
  .footer-newgraduate p,
  .footer-employment-list:first-child a {
    font-size: 18px;
  }
}

@media screen and (min-width: 1250px) {
  .footer-employment-lists {
    justify-content: space-between;
  }
  .footer-employment-list:first-child {
    margin-right: 0;
  }
}

.footer-list-ttl {
  /* border-bottom: solid 1px; */
  font-size: 1.8rem;
  font-weight: bold;
  /* margin-bottom: 22px; */
  padding-bottom: 20px;
}

.footer-list a {
  color: #fff;
  line-height: 2.25;
}

.footer-list-ttl span {
  cursor: default;
}



.footer-list-ttl a {
  line-height: inherit;
}

.footer-copy {
  background-color: #fff;
  font-size: 1.4rem;
  padding: 14px 0 30px;
}

.footer-copy .container {
  display: flex;
  align-items: center;
}

.footer-copy p {
  margin-left: auto;
}

@media screen and (min-width: 1250px) {
  .footer-list {
    flex: 1 1 calc((100% / 5) - 100px);
  }
  .left-move {
    transform: translateX(80px);
  }
  .left-move2 {
    transform: translateX(50px);
  }
}

@media screen and (max-width: 767.98px) {
  .footer-list {
    width: calc(50% - 20px);
  }

  .footer-list-ttl {
    font-size: 1.4rem;
  }

  .footer-nav {
    padding-top: 35px;
  }

  .footer-nav .logo {
    margin-bottom: 40px;
    width: 90%;
  }

  .footer-copy .container {
    flex-direction: column;
  }

  .footer-copy p {
    margin-left: unset;
  }
  .footer-employment-list:first-child a {
    font-size: 1.4rem;
  }
}


/* =============================================
  column
============================================= */
.column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: wrap;
  -ms-flex: wrap;
  flex: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.column>* img {
  width: 100%;
  max-width: 100%;
}

.column>* .txt {
  text-align: left;
}

.column>*.sub {
  width: calc(40% - 15px);
}

.column>*.main {
  width: calc(60% - 15px);
}

.column>*.main img {
  width: auto;
}

.column.col-2>* {
  width: calc(50% - 10px);
}

.column.col-3>* {
  width: calc(33.333% - 16.666px);
}

.column.col-4>* {
  width: calc(25% - 11.25px);
}

.column.col-5>* {
  width: calc(20% - 12px);
}

@media screen and (max-width: 767.98px) {
  .column .figure {
    text-align: center;
  }

  .column.col-2,
  .column.col-3 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
  }

  .column.col-2>*,
  .column.col-3>* {
    width: auto;
  }

  .column.col-4>* {
    width: calc(50% - 10px);
  }

  .column.col-5>* {
    width: calc(33.333% - 16.666px);
  }
}


/* =============================================
  container
============================================= */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}


/* =============================================
  link
============================================= */
.link {
  color: #000;
  border-bottom: solid 2px;
  padding: 0 74px 1px 10px;
  position: relative;
}

.link::after {
  background-color: #000;
  content: "";
  display: inline-block;
  width: 44px;
  height: 17px;
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  position: absolute;
  right: 10px;
}

.link.c-blue::after {
  background-color: #005CA2;
}

.link.c-white::after {
  background-color: #fff;
}


/* =============================================
  txt
============================================= */
.txt {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* =============================================
  adjust
============================================= */
.mt-0 {
  margin-top: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.pt-5 {
  padding-top: 5px !important;
}

.pr-5 {
  padding-right: 5px !important;
}

.pb-5 {
  padding-bottom: 5px !important;
}

.pl-5 {
  padding-left: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pr-10 {
  padding-right: 10px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pl-10 {
  padding-left: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

.pr-15 {
  padding-right: 15px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.pl-15 {
  padding-left: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mr-25 {
  margin-right: 25px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

.ml-25 {
  margin-left: 25px !important;
}

.pt-25 {
  padding-top: 25px !important;
}

.pr-25 {
  padding-right: 25px !important;
}

.pb-25 {
  padding-bottom: 25px !important;
}

.pl-25 {
  padding-left: 25px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mr-30 {
  margin-right: 30px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.ml-30 {
  margin-left: 30px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pr-30 {
  padding-right: 30px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pl-30 {
  padding-left: 30px !important;
}

.mt-35 {
  margin-top: 35px !important;
}

.mr-35 {
  margin-right: 35px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.ml-35 {
  margin-left: 35px !important;
}

.pt-35 {
  padding-top: 35px !important;
}

.pr-35 {
  padding-right: 35px !important;
}

.pb-35 {
  padding-bottom: 35px !important;
}

.pl-35 {
  padding-left: 35px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.mt-45 {
  margin-top: 45px !important;
}

.mr-45 {
  margin-right: 45px !important;
}

.mb-45 {
  margin-bottom: 45px !important;
}

.ml-45 {
  margin-left: 45px !important;
}

.pt-45 {
  padding-top: 45px !important;
}

.pr-45 {
  padding-right: 45px !important;
}

.pb-45 {
  padding-bottom: 45px !important;
}

.pl-45 {
  padding-left: 45px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mr-50 {
  margin-right: 50px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.ml-50 {
  margin-left: 50px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pr-50 {
  padding-right: 50px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

.pl-50 {
  padding-left: 50px !important;
}

.mt-55 {
  margin-top: 55px !important;
}

.mr-55 {
  margin-right: 55px !important;
}

.mb-55 {
  margin-bottom: 55px !important;
}

.ml-55 {
  margin-left: 55px !important;
}

.pt-55 {
  padding-top: 55px !important;
}

.pr-55 {
  padding-right: 55px !important;
}

.pb-55 {
  padding-bottom: 55px !important;
}

.pl-55 {
  padding-left: 55px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mr-60 {
  margin-right: 60px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.ml-60 {
  margin-left: 60px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pr-60 {
  padding-right: 60px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.pl-60 {
  padding-left: 60px !important;
}

.mt-65 {
  margin-top: 65px !important;
}

.mr-65 {
  margin-right: 65px !important;
}

.mb-65 {
  margin-bottom: 65px !important;
}

.ml-65 {
  margin-left: 65px !important;
}

.pt-65 {
  padding-top: 65px !important;
}

.pr-65 {
  padding-right: 65px !important;
}

.pb-65 {
  padding-bottom: 65px !important;
}

.pl-65 {
  padding-left: 65px !important;
}

.mt-70 {
  margin-top: 70px !important;
}

.mr-70 {
  margin-right: 70px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.ml-70 {
  margin-left: 70px !important;
}

.pt-70 {
  padding-top: 70px !important;
}

.pr-70 {
  padding-right: 70px !important;
}

.pb-70 {
  padding-bottom: 70px !important;
}

.pl-70 {
  padding-left: 70px !important;
}

.mt-75 {
  margin-top: 75px !important;
}

.mr-75 {
  margin-right: 75px !important;
}

.mb-75 {
  margin-bottom: 75px !important;
}

.ml-75 {
  margin-left: 75px !important;
}

.pt-75 {
  padding-top: 75px !important;
}

.pr-75 {
  padding-right: 75px !important;
}

.pb-75 {
  padding-bottom: 75px !important;
}

.pl-75 {
  padding-left: 75px !important;
}

.ta-c {
  text-align: center !important;
}

.ta-r {
  text-align: right !important;
}

.ta-l {
  text-align: left !important;
}

.fs-12 {
  font-size: 1.2rem !important;
}

.fs-14 {
  font-size: 1.2rem !important;
}

.fs-16 {
  font-size: 1.4rem !important;
}

.fs-20 {
  font-size: 1.4rem !important;
}

.fw-bold {
  font-weight: bold !important;
}

.fw-normal {
  font-weight: normal !important;
}

.c-blue {
  color: #005CA2 !important;
}

.c-white {
  color: #fff !important;
}

mark {
  background-color: transparent;
  color: $c-blue-2;
}

.sp-none {
  display: none;
}

.pc-none {
  display: block;
}

@media screen and (min-width: 767.98px) {
  .sp-none {
    display: block;
  }

  .pc-none {
    display: none;
  }

  .fs-12 {
    font-size: 1.2rem !important;
  }

  .fs-14 {
    font-size: 1.4rem !important;
  }

  .fs-16 {
    font-size: 1.6rem !important;
  }

  .fs-18 {
    font-size: 1.8rem !important;
  }

  .fs-20 {
    font-size: 2rem !important;
  }

  .fl-l {
    float: left !important;
    margin-right: 20px;
  }

  .fl-r {
    float: right !important;
    margin-left: 20px;
  }

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

  .clear {
    clear: both;
  }
}