@charset "UTF-8";

/*!===========================
このcssはSassから生成されていますので、
直接編集しないようご注意ください。
===========================*/

@keyframes zoomout {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes left-right {
  0% {
    width: 0;
    opacity: 0;
  }

  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes slideup {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* スクロールアニメーション基本設定
============================== */

.iv,
.ivo {
  transform: translateY(50px);
  opacity: 0;
}

.fadeinup {
  transition: all 1.0s ease-in;
  transform: translateY(0px);
  opacity: 1 !important;
}

@media (max-width: 767px) {
  table > tbody > tr > th,
  table > tbody > tr > td {
    padding: 15px 10px;
  }

  .button {
    font-size: 0.8rem !important;
    padding: 5px 5px !important;
    white-space: nowrap;
  }

  .buttons-list .button {
    height: auto !important;
  }

  .form-control {
    padding: 0 5px !important;
    margin-bottom: 10px;
  }

  .text-right .btn-primary {
    display: inline-flex;
  }

  .table-bordered tbody td {
    padding: 0.2rem !important;
  }

  /* ==================================================
layout
================================================== */

  main {
    padding-top: 1.5em;
  }

  main > aside {
    order: 1;
    width: 100%;
    padding: 50px 0 0;
    margin-bottom: 0;
  }

  main > aside > * {
    max-width: none;
  }

  main > aside + #content {
    width: 100%;
  }

  main > aside + #content > * {
    padding-left: 20px;
  }

  main > aside + #content > * > * {
    max-width: none;
  }

  /* class
============================== */

  .title-h01 {
    font-size: 2.0rem;
  }

  .title-h02 {
    font-size: 1.8rem;
  }

  .title-h03 {
    font-size: 1.7rem;
  }

  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  img.sp,
  span.sp {
    display: inline;
  }

  table.sp {
    display: table;
  }

  .alignleft,
  .alignright {
    float: none;
    max-width: 100% !important;
    margin-bottom: 0;
  }

  .alignleft {
    margin-right: 0;
  }

  .alignright {
    margin-left: 0;
  }

  .col {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
  }

  .col > * {
    width: 100%;
  }

  .col > *:nth-child(n + 2) {
    margin-top: 2.0em;
  }

  .col.col3::before,
  .col.col4::before,
  .col.col5::before {
    content: "";
    display: block;
    height: 0;
    order: 1;
  }

  .col.col3::after,
  .col.col4::after,
  .col.col5::after {
    content: "";
    display: block;
    height: 0;
  }

  .col.col3::before {
    width: 100%;
  }

  .col.col3::after {
    width: 100%;
  }

  .col.col3 > * {
    width: 100%;
  }

  .col.col3 > *:nth-child(-n + 1) {
    margin-top: 0;
  }

  .col.col3 > *:nth-child(n + 2) {
    margin-top: 2.0em;
  }

  .col.col4::before {
    width: calc(100% / 2 - 10px);
  }

  .col.col4::after {
    width: calc(100% / 2 - 10px);
  }

  .col.col4 > * {
    width: calc(100% / 2 - 10px);
  }

  .col.col4 > *:nth-child(-n + 2) {
    margin-top: 0;
  }

  .col.col4 > *:nth-child(n + 3) {
    margin-top: 2.0em;
  }

  .col.col5::before {
    width: calc(100% / 3 - 10px);
  }

  .col.col5::after {
    width: calc(100% / 3 - 10px);
  }

  .col.col5 > * {
    width: calc(100% / 3 - 10px);
  }

  .col.col5 > *:nth-child(-n + 3) {
    margin-top: 0;
  }

  .col.col5 > *:nth-child(n + 4) {
    margin-top: 2.0em;
  }

  .col.w40w55 > *:nth-child(1) {
    width: 100%;
  }

  .col.w40w55 > *:nth-child(2) {
    margin-top: 2.0em;
    width: 100%;
  }

  .col.w55w40 > *:nth-child(1) {
    width: 100%;
  }

  .col.w55w40 > *:nth-child(2) {
    margin-top: 2.0em;
    width: 100%;
  }

  .col-11 {
    flex: 0 0 89.666667% !important;
  }

  .scroll {
    overflow-x: auto;
  }

  .scroll::-webkit-scrollbar {
    height: 5px;
  }

  .scroll::-webkit-scrollbar-track,
  .scroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
  }

  .scroll::-webkit-scrollbar-track {
    background: #CCCCCC;
  }

  .scroll::-webkit-scrollbar-thumb {
    background: #666666;
  }

  .scroll table {
    white-space: nowrap;
  }

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

  .content .container-fluid {
    padding-right: 2.5px;
    padding-left: 2.5px;
  }

  .card .card-header {
    padding: .75rem 0.5rem;
  }

  .card .card-body {
    padding: 1.25rem 0.5rem;
  }

  .card .card-body h4.title {
    font-size: 0.8em;
  }

  .card .card-body .text-left tbody td {
    font-size: 1.0rem;
    vertical-align: top;
  }

  .card-header > .card-tools {
    margin-right: -.225rem !important;
  }

  .form-search-employee .display-select {
    margin-left: 0px;
    width: 100%;
  }

  .salary-increase-method-box .column-item .item-group {
    width: 180px;
  }

  .dropdown-toggle:after {
    display: block !important;
    margin: 0 auto !important;
    text-align: center;
    width: auto;
  }

  .salary-increase-method-box .dropdown-toggle:after {
    width: 25%;
  }

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

  header {
    margin: 0;
    padding: 0 20px;
    width: 100%;
    height: 70px;
  }

  header .wrap .title-area {
    width: 40%;
  }

  header .wrap .title-area .logo-tit {
    max-width: 180px;
  }

  header .wrap .nav-area {
    width: 58%;
  }

  header .wrap .nav-area .nav-area-sub ul li {
    font-size: 2.6rem;
  }

  header .wrap .nav-area .nav-area-sub ul li:nth-child(n + 2) {
    margin: 0 0 0 0.8em;
  }

  header .wrap .nav-area .nav-area-sub ul li.mypage {
    display: none;
  }

  header .wrap .nav-area .nav-area-sub ul li.logout {
    width: 100px;
  }

  .drawer-hamburger {
    width: 40px;
    height: 40px;
  }

  #hmenu-wrap {
    font-size: 1.6rem;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  #hmenu-wrap a {
    color: inherit;
  }

  /* ==================================================
footer
================================================== */

  footer #page_top a {
    text-align: center;
  }

  /* ==================================================
aside
================================================== */

  main > aside .nav-area .title {
    font-size: 2.0rem;
  }

  .pc-side-nav-fixed {
    position: static;
  }

  /* ==================================================
main
================================================== */

  body:not(#top) #content > *:not(#breadcrumb):not(.common-area) {
    padding-top: 50px;
    /*padding-bottom: 50px;*/
  }

  body:not(#top) #content > *:not(#breadcrumb):not(.common-area) > *:nth-child(n+2) {
    margin-top: 10px;
  }

  /* sub common
============================== */

  .h-remind-area .title-area::before {
    left: 50%;
  }

  .h-remind-area .title-area .btn-close {
    font-size: 1.8rem;
    cursor: pointer;
  }

  /* mypage
============================== */

  #mypage .remind-area .wrap .remind-list li a .date-area {
    width: 100%;
  }

  #mypage .remind-area .wrap .remind-list li a .date-area .mark {
    margin-right: 0;
  }

  #mypage .remind-area .wrap .remind-list li a .txt-area {
    margin-top: 0.5em !important;
    width: 100%;
  }

  /* wp pager
============================== */

  .wp-pagenavi > * {
    padding: .4em .5em !important;
  }

  /* contact
============================== */

  #contact .intro-area p {
    text-align: left;
  }

  #contact .form-area .wrap dl {
    display: block;
  }

  #contact .form-area .wrap dl dt {
    padding: 0.5em 1.0em 0.5em 1.0em;
    font-size: 1.6rem;
    width: 100%;
  }

  #contact .form-area .wrap dl dt.required {
    padding: 0.5em 3.0em 0.5em 1.0em;
  }

  #contact .form-area .wrap dl dd {
    width: 100%;
  }

  #contact .thanks-area {
    text-align: left;
  }

  /* user-raise-assessments
============================== */

  .salary-increase-assessments-table thead,
  .salary-increase-assessments-detail-table thead {
    display: none;
  }

  .salary-increase-assessments-table tbody tr:nth-child(even),
  .salary-increase-assessments-detail-table tbody tr:nth-child(even) {
    background: #eeffff;
  }

  .salary-increase-assessments-table tbody td,
  .salary-increase-assessments-detail-table tbody td {
    border: none;
    display: block;
    float: left;
    text-align: left !important;
    width: 50%;
  }

  .salary-increase-assessments-table tbody td .sp,
  .salary-increase-assessments-detail-table tbody td .sp {
    background: #1A727B;
    border-radius: 0.3em;
    color: #fff;
    display: inline-block !important;
    font-size: 0.8em;
    margin-right: 10px;
    padding: 0px 5px;
  }

  .salary-increase-assessments-table tbody td .button-redirect,
  .salary-increase-assessments-detail-table tbody td .button-redirect {
    margin-top: 1em !important;
  }

  .salary-increase-assessments-detail-table tbody td.half-year {
    border-top: 1px solid #dee2e6;
    display: block !important;
    width: 100% !important;
  }

  .salary-increase-assessments-detail-table tbody td.half-year .first-half,
  .salary-increase-assessments-detail-table tbody td.half-year .second-half {
    display: block !important;
    width: 100%;
  }

  /* user-bonus-assessments
============================== */

  .salary-increase-assessments-table thead,
  .salary-increase-assessments-detail-table thead {
    display: none;
  }

  .salary-increase-assessments-table tbody tr:nth-child(even),
  .salary-increase-assessments-detail-table tbody tr:nth-child(even) {
    background: #eeffff;
  }

  .salary-increase-assessments-table tbody td,
  .salary-increase-assessments-detail-table tbody td {
    border: none;
    display: block;
    float: left;
    text-align: left !important;
    width: 50%;
  }

  .salary-increase-assessments-table tbody td .sp,
  .salary-increase-assessments-detail-table tbody td .sp {
    background: #1A727B;
    border-radius: 0.3em;
    color: #fff;
    display: inline-block !important;
    font-size: 0.8em;
    margin-right: 10px;
    padding: 0px 5px;
  }

  .salary-increase-assessments-table tbody td p,
  .salary-increase-assessments-detail-table tbody td p {
    margin-top: 0.5em !important;
  }

  .salary-increase-assessments-detail-table tbody td.half-year {
    border-top: 1px solid #dee2e6;
    display: block !important;
    width: 100% !important;
  }

  .salary-increase-assessments-detail-table tbody td.half-year .first-half,
  .salary-increase-assessments-detail-table tbody td.half-year .second-half {
    display: block !important;
    width: 100%;
  }

  /* employees
============================== */

  .table-employees thead {
    display: none;
  }

  .table-employees tbody tr:nth-child(even) {
    background: #eeffff;
  }

  .table-employees tr {
    display: inline-block;
    padding: 20px 0;
  }

  .table-employees tbody td {
    border: none;
    display: block;
    float: left;
    text-align: left !important;
    width: 50%;
  }

  .table-employees tbody td .sp {
    background: #1A727B;
    border-radius: 0.3em;
    color: #fff;
    display: inline-block !important;
    font-size: 0.8em;
    margin-right: 10px;
    padding: 0px 5px;
  }

  /* search-form
============================== */

  #search-form {
    margin-left: -15px;
    margin-right: -15px;
  }

  /* profileEdit
============================== */

  #profileEdit .info-company .flex-row,
  #profileEdit .password .flex-row,
  #profileEdit .qualification-skills .flex-row,
  #profileEdit .self-introduction .flex-row {
    display: block;
  }

  #profileEdit .flex-row .big-title {
    margin: 10px auto;
    padding: 5px;
    width: 90%;
  }

  #profileEdit .flex-row .medium-wrapper {
    margin: 0 auto;
    padding: 0;
    width: 90%;
  }

  #profileEdit .flex-row .small-wrapper {
    justify-content: center;
    padding-right: 1rem;
    padding-bottom: 1rem;
  }

  .user-img.flex-column {
    height: auto !important;
  }

  .user-img.flex-column .user-img-display {
    width: auto !important;
  }

  .user-avatar .file-upload-wrapper {
    margin-top: 10px;
  }

  .user-avatar .delete-file-wrapper {
    margin-top: -40px;
  }

  .self-introduction .introduction-textarea {
    min-width: 260px;
    width: auto;
  }

  /* skillmaps-difficulties
============================== */

  .boxRadio .button-submit {
    margin-top: 10px !important;
  }
}

@media (max-width: 320px) {
  .button {
    padding: 5px 5px !important;
  }
}