@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap");
:root {
  --screen-height:100vh; }

/*********************************************************************
 * Hover Scale系.
 *********************************************************************/
@-webkit-keyframes hover-scale {
  0%, 50%, 70% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0); }
  10% {
    -webkit-transform: scale(1.15, 1.15) translate(0, 0);
            transform: scale(1.15, 1.15) translate(0, 0); }
  30% {
    -webkit-transform: scale(0.95, 0.95) translate(0, 0);
            transform: scale(0.95, 0.95) translate(0, 0); } }
@keyframes hover-scale {
  0%, 50%, 70% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0); }
  10% {
    -webkit-transform: scale(1.15, 1.15) translate(0, 0);
            transform: scale(1.15, 1.15) translate(0, 0); }
  30% {
    -webkit-transform: scale(0.95, 0.95) translate(0, 0);
            transform: scale(0.95, 0.95) translate(0, 0); } }

@-webkit-keyframes hover-scale-small {
  0%, 50%, 70% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0); }
  10% {
    -webkit-transform: scale(1.01, 1.01) translate(0, 0);
            transform: scale(1.01, 1.01) translate(0, 0); }
  30% {
    -webkit-transform: scale(0.99, 0.99) translate(0, 0);
            transform: scale(0.99, 0.99) translate(0, 0); } }

@keyframes hover-scale-small {
  0%, 50%, 70% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0); }
  10% {
    -webkit-transform: scale(1.01, 1.01) translate(0, 0);
            transform: scale(1.01, 1.01) translate(0, 0); }
  30% {
    -webkit-transform: scale(0.99, 0.99) translate(0, 0);
            transform: scale(0.99, 0.99) translate(0, 0); } }

@-webkit-keyframes pin-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-15%);
            transform: translateY(-15%); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  70% {
    opacity: 1;
    -webkit-transform: translateY(-7%);
            transform: translateY(-7%); }
  75% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); } }

@keyframes pin-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-15%);
            transform: translateY(-15%); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  70% {
    opacity: 1;
    -webkit-transform: translateY(-7%);
            transform: translateY(-7%); }
  75% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%); } }

@-webkit-keyframes shadow-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-15%) translateX(40%);
            transform: translateY(-15%) translateX(40%); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-5%) translateX(15%);
            transform: translateY(-5%) translateX(15%); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); }
  70% {
    opacity: 1;
    -webkit-transform: translateY(-3%) translateX(7%);
            transform: translateY(-3%) translateX(7%); }
  75% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); } }

@keyframes shadow-fall {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-15%) translateX(40%);
            transform: translateY(-15%) translateX(40%); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-5%) translateX(15%);
            transform: translateY(-5%) translateX(15%); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); }
  70% {
    opacity: 1;
    -webkit-transform: translateY(-3%) translateX(7%);
            transform: translateY(-3%) translateX(7%); }
  75% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) translateX(0%);
            transform: translateY(0) translateX(0%); } }

/*********************************************************************
 * Bounce系.
 *********************************************************************/
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  40% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%); }
  70% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  80% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
@keyframes bounce {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  40% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%); }
  70% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  80% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes bounce-shadow {
  0% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%); }
  40% {
    -webkit-transform: translateX(20%) translateY(-10%);
            transform: translateX(20%) translateY(-10%); }
  70% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%); }
  80% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%); }
  100% {
    -webkit-transform: translateX(0%) translateY(0);
            transform: translateX(0%) translateY(0); } }

@keyframes bounce-shadow {
  0% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%); }
  40% {
    -webkit-transform: translateX(20%) translateY(-10%);
            transform: translateX(20%) translateY(-10%); }
  70% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%); }
  80% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%); }
  100% {
    -webkit-transform: translateX(0%) translateY(0);
            transform: translateX(0%) translateY(0); } }

@-webkit-keyframes bounce-cloud {
  0% {
    -webkit-transform: translateX(50%) scale(1.05);
            transform: translateX(50%) scale(1.05); }
  50% {
    -webkit-transform: translateX(50%) scale(1);
            transform: translateX(50%) scale(1); }
  100% {
    -webkit-transform: translateX(50%) scale(1.05);
            transform: translateX(50%) scale(1.05); } }

@keyframes bounce-cloud {
  0% {
    -webkit-transform: translateX(50%) scale(1.05);
            transform: translateX(50%) scale(1.05); }
  50% {
    -webkit-transform: translateX(50%) scale(1);
            transform: translateX(50%) scale(1); }
  100% {
    -webkit-transform: translateX(50%) scale(1.05);
            transform: translateX(50%) scale(1.05); } }

@-webkit-keyframes bounce-arrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-15%);
            transform: translateY(-15%); }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes bounce-arrow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-15%);
            transform: translateY(-15%); }
  80% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes intro-logo-bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes intro-logo-bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

html, body {
  font-family: 'Noto Sans JP', sans-serif; }

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

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

/*********************************************************************************************************************
 共通枠線
 **********************************************************************************************************************/
.panel-border {
  position: relative;
  /*
  &:hover {
    &::after {
      width:100%;
    }
    &::before {
      width:100%;
    }

    & > *::after {
      height:100%;
    }
    & > *::before {
      height:100%;
    }
  }
   */ }

.panel-border::after,
.panel-border::before,
.panel-border > *::after,
.panel-border > *::before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  -webkit-transition: all .3s ease;
  transition: all .3s ease; }

/* 左上へ配置 */
.panel-border::after {
  width: 98.5%;
  height: 1px;
  top: 0px;
  right: 0px; }

/* 右下へ配置 */
.panel-border::before {
  width: 98.5%;
  height: 1px;
  left: 0px;
  bottom: 0px; }

/* 左下へ配置 */
.panel-border > *::after {
  width: 1px;
  height: 98%;
  left: 0px;
  top: 0px; }

/* 右下へ配置 */
.panel-border > *::before {
  width: 1px;
  height: 98%;
  bottom: 0px;
  right: 0px; }

/*********************************************************************************************************************
 共通ボタンスタイル
 **********************************************************************************************************************/
.btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.btn {
  display: inline-block;
  height: 50px;
  border-radius: 25px;
  background-color: #00a4e5;
  -webkit-transition: background-color .3s;
  transition: background-color .3s; }
  .btn:hover {
    background-color: #4775b7; }
  @media screen and (max-width: 812px) {
    .btn {
      height: 13.33333vw;
      width: 100%;
      border-radius: 6.66667vw; } }
  .btn .btn-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /*
    &::after {
      content: "";
      @include img-bg("/assets/images/hrm/common/ico-btn-arrow.png",50px,50px,50px,50px);
      position:absolute;
      bottom:50%;
      right:13px;
      transform: translateY(50%);
    }
*/ }
    .btn .btn-inner > span {
      color: white;
      padding-left: 65px;
      padding-right: 65px;
      letter-spacing: .08em;
      font-size: 14px;
      -webkit-transition: color .3s;
      transition: color .3s; }
      @media screen and (max-width: 812px) {
        .btn .btn-inner > span {
          padding: 0;
          font-size: 3.73333vw; } }

main#main {
  position: relative;
  display: block; }
  main#main > .bg {
    z-index: -1;
    pointer-events: none; }
  main#main > .bg.left {
    background-image: url("/assets/images/hrm/hub/bg-left.jpg");
    background-size: 600px 739.5px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 600px;
    height: 739.5px;
    display: block;
    position: relative;
    position: absolute;
    top: 0;
    left: 0; }
    @media screen and (max-width: 812px) {
      main#main > .bg.left {
        display: none; } }
  main#main > .bg.right {
    background-image: url("/assets/images/hrm/hub/bg-right.jpg");
    background-size: 600px 739.5px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 600px;
    height: 739.5px;
    display: block;
    position: relative;
    position: absolute;
    top: 0;
    right: 0; }
    @media screen and (max-width: 812px) {
      main#main > .bg.right {
        display: none; } }
  main#main #breadcrumbs {
    width: 100%;
    height: 30px;
    background-color: #edfaff; }
    @media screen and (max-width: 812px) {
      main#main #breadcrumbs {
        display: none; } }
    main#main #breadcrumbs ul {
      width: 980px;
      height: 100%;
      margin-right: auto;
      margin-left: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      main#main #breadcrumbs ul li:nth-child(n+2) {
        padding-left: 15px; }
      main#main #breadcrumbs ul li:last-of-type a::after {
        display: none; }
      main#main #breadcrumbs ul li a, main#main #breadcrumbs ul li span {
        height: 100%;
        position: relative;
        text-decoration: none;
        font-size: 12px;
        color: #00a4e5;
        padding-right: 24px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        main#main #breadcrumbs ul li a::after, main#main #breadcrumbs ul li span::after {
          content: "";
          background-image: url("/assets/images/hrm/common/ico-breadcrumbs.png");
          background-size: 12.5px 30px;
          background-repeat: no-repeat;
          background-position: center top;
          width: 12.5px;
          height: 30px;
          display: block;
          position: relative;
          position: absolute;
          top: 0;
          right: 0; }

main {
  position: relative;
  display: block; }
  main > .bg {
    z-index: -1;
    pointer-events: none; }
  main > .bg.left {
    background-image: url("/assets/images/hrm/hub/bg-left.jpg");
    background-size: 600px 739.5px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 600px;
    height: 739.5px;
    display: block;
    position: relative;
    position: absolute;
    top: 0;
    left: 0; }
    @media screen and (max-width: 812px) {
      main > .bg.left {
        display: none; } }
  main > .bg.right {
    background-image: url("/assets/images/hrm/hub/bg-right.jpg");
    background-size: 600px 739.5px;
    background-repeat: no-repeat;
    background-position: center top;
    width: 600px;
    height: 739.5px;
    display: block;
    position: relative;
    position: absolute;
    top: 0;
    right: 0; }
    @media screen and (max-width: 812px) {
      main > .bg.right {
        display: none; } }

/*# sourceMappingURL=../maps/hrm/common.css.map */