@charset "utf-8";

/* ======================================================
 * new-employees_alarm_light.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * - Page Component
 * - Clearfix
 * PC Media Queries
 * @media only screen and (max-width: 767px)
 * - Page Component
 * - Clearfix
 * SP Media Queries
 * Print
====================================================== */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px) {
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* -----new-employees-tab-layout----- */
  .new-employees-tab-layout .new-employees-tab_navi {
    margin: 45px 0 35px;
    border-bottom: 4px solid #fdd22b;
  }
  .new-employees-tab-layout .new-employees-tab_list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    border-bottom: 4px solid #222;
    font-family: "Noto Sans CJK JP", "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .new-employees-tab-layout .new-employees-tab_list > li {
    width: calc((100% - 4px)/2);
  }
  .new-employees-tab-layout .new-employees-tab_list > li + li {
    margin-left: 4px;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    min-height: 96px;
    padding: 15px 30px;
    border-radius: 11px 11px 0 0;
    border: 4px solid #222;
    border-bottom: none;
    background-color: #bbb;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 8px;
    left: 0;
    bottom: -8px;
    transition: all .2s;
    content: '';
  }
  .new-employees-tab-layout .new-employees-tab_list > li:first-of-type > a::after {
    width: calc(100% + 4px);
    left: -4px;
    border-left: 4px solid transparent;
  }
  .new-employees-tab-layout .new-employees-tab_list > li:last-of-type > a::after {
    width: calc(100% + 4px);
    left: 0;
    border-right: 4px solid transparent;
  }
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a {
    background-color: #fdd22b;
    color: #222;
  }
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a::after {
    background-color: #fdd22b;
  }
  .new-employees-tab-layout .new-employees-tab_list > li:first-of-type.is-current > a::after {
    border-left-color: #222;
  }
  .new-employees-tab-layout .new-employees-tab_list > li:last-of-type.is-current > a::after {
    border-right-color: #222;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label {
    position: relative;
    font-size: 3.0rem;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::before,
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::after {
    display: block;
    width: 21px;
    height: 4px;
    position: absolute;
    left: 50%;
    bottom: -17px;
    border-radius: 2px;
    background-color: transparent;
    transition: all .2s;
    content: '';
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::before {
    margin-left: -17px;
    transform: rotate(42deg);
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::after {
    margin-left: -3px;
    transform: rotate(-42deg);
  }
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a > .tab_label::before,
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a > .tab_label::after {
    background-color: #000;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label > span {
    font-size: 4.6rem;
  }
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}

/* ======================================================
 * PC Media Queries
====================================================== */
/***
@media screen and (min-width: 768px) and (max-width: 960px) {
}
@media screen and (min-width: 1921px) {
}
@media screen and (min-width: 768px) and (max-width: 1920px) {
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
}
***/


/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 767px) {
  /* ------------------------------------------------------
   * Page Component
  ------------------------------------------------------ */
  /* -----new-employees-tab-layout----- */
  .new-employees-tab-layout .new-employees-tab_navi {
    margin: 40px 0 25px;
    border-bottom: 2px solid #fdd22b;
  }
  .new-employees-tab-layout .new-employees-tab_list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    border-bottom: 2px solid #222;
    font-family: "Noto Sans CJK JP", "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .new-employees-tab-layout .new-employees-tab_list > li {
    width: calc((100% - 3px)/2);
  }
  .new-employees-tab-layout .new-employees-tab_list > li + li {
    margin-left: 3px;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    min-height: 60px;
    padding: 5px 10px;
    border-radius: 11px 11px 0 0;
    border: 2px solid #222;
    border-bottom: none;
    background-color: #bbb;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    left: 0;
    bottom: -4px;
    transition: all .2s;
    content: '';
  }
  .new-employees-tab-layout .new-employees-tab_list > li:first-of-type > a::after {
    width: calc(100% + 2px);
    left: -2px;
    border-left: 2px solid transparent;
  }
  .new-employees-tab-layout .new-employees-tab_list > li:last-of-type > a::after {
    width: calc(100% + 2px);
    left: 0;
    border-right: 2px solid transparent;
  }
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a {
    background-color: #fdd22b;
    color: #222;
  }
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a::after {
    background-color: #fdd22b;
  }
  .new-employees-tab-layout .new-employees-tab_list > li:first-of-type.is-current > a::after {
    border-left-color: #222;
  }
  .new-employees-tab-layout .new-employees-tab_list > li:last-of-type.is-current > a::after {
    border-right-color: #222;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label {
    position: relative;
    font-size: 1.6rem;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::before,
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::after {
    display: block;
    width: 12px;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: -11px;
    border-radius: 1px;
    background-color: transparent;
    transition: all .2s;
    content: '';
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::before {
    margin-left: -11px;
    transform: rotate(42deg);
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label::after {
    margin-left: -3px;
    transform: rotate(-42deg);
  }
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a > .tab_label::before,
  .new-employees-tab-layout .new-employees-tab_list > li.is-current > a > .tab_label::after {
    background-color: #000;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label > span {
    font-size: 2.8rem;
  }
  /* ------------------------------------------------------
   * Clearfix
  ------------------------------------------------------ */
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
}


/* ======================================================
 * SP Media Queries
====================================================== */
/***
@media only screen and (min-width: 320px) and (max-width: 767px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
***/
@media only screen and (max-width: 340px) {
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label {
    font-size: 1.4rem;
  }
  .new-employees-tab-layout .new-employees-tab_list > li > a > .tab_label > span {
    font-size: 2.6rem;
  }
}
/***
@media only screen and (max-width: 320px) {
}



/* ======================================================
 * Print
====================================================== */
@media print {
}