@charset "UTF-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

info CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Variables CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

SVG CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/**
 * SVG画像をアイコンに使いたい的ないろいろ
 *
 *  [Html] SVG塗りつぶしの色をBackground-Imageとして扱うときに変更する
 * https://code.i-harness.com/ja/q/cbfa3c
 */
/* Variables
-------------------------------------------- */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 0; }

#container .contHeading {
  align-items: flex-end; }
  #container .contHeading .ttlWrap {
    width: 100%;
    padding: 25px 20px;
    text-align: center; }
  @media screen and (max-width: 1300px) {
    #container .contHeading {
      height: 55.5vw;
      background-image: url(/recruit/shr/img/reason/main_img_tb.jpg?d=20230711) !important; } }
  @media (max-width: 480px) {
    #container .contHeading {
      height: 75vh;
      background-image: url(/recruit/shr/img/reason/main_img_sp.jpg?) !important; }
      #container .contHeading .ttlWrap {
        padding: 20px; } }

#container .reason .tagWrap .tagList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  #container .reason .tagWrap .tagList .tag_item {
    display: block;
    padding: 10px 20px; }
    @media (max-width: 480px) {
      #container .reason .tagWrap .tagList .tag_item {
        padding: 10px 10px; } }
    #container .reason .tagWrap .tagList .tag_item .tag_txt {
      display: block;
      position: relative;
      font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, "Segoe UI", sans-serif;
      font-size: 1.6rem;
      font-weight: bold;
      cursor: pointer; }
      #container .reason .tagWrap .tagList .tag_item .tag_txt::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: #E1DED7;
        transition: width 0.5s; }
      #container .reason .tagWrap .tagList .tag_item .tag_txt.js-active::after {
        width: 100%; }
      @media (max-width: 480px) {
        #container .reason .tagWrap .tagList .tag_item .tag_txt {
          font-size: 1.2rem; } }
#container .reasonsWrap .reasonsList {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  min-height: 300px;
  margin: 40px auto 0;
  overflow: hidden;
  z-index: 0; }
  #container .reasonsWrap .reasonsList::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    background: #FFF url("../img/common/loading.svg") no-repeat center center/40px auto;
    transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); }
  #container .reasonsWrap .reasonsList.js-reason-list-loading::before {
    opacity: 1; }
  #container .reasonsWrap .reasonsList .listItem {
    box-sizing: border-box;
    width: 23.5%;
    margin: 0 0.75% 20px;
    border: solid 1px #E1DED7;
    background: #F6F6F6;
    cursor: pointer;
    /*&:nth-child(4n) {
    	margin: 0 0 20px 0;
    }*/ }
    @media screen and (max-width: 1000px) {
      #container .reasonsWrap .reasonsList .listItem {
        width: 31%;
        margin: 0 1.15% 20px; } }
    @media (max-width: 768px) {
      #container .reasonsWrap .reasonsList .listItem {
        width: 48%;
        margin: 0 1% 20px; } }
    @media (max-width: 480px) {
      #container .reasonsWrap .reasonsList .listItem {
        width: calc(100% - 30px);
        margin: 0 15px 20px; } }
    #container .reasonsWrap .reasonsList .listItem .itemTtl {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      padding: 8px;
      background: #E1DED7; }
      #container .reasonsWrap .reasonsList .listItem .itemTtl .personNum {
        width: 45px;
        font-size: 2.6rem;
        line-height: 1;
        font-weight: bold;
        color: #333; }
      #container .reasonsWrap .reasonsList .listItem .itemTtl h2 {
        width: calc(100% - 45px);
        text-align: left;
        font-size: 1.6rem;
        font-weight: bold;
        color: #333; }
    #container .reasonsWrap .reasonsList .listItem .profileWrap {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      margin: 20px auto 22px;
      padding: 0 15px; }
      #container .reasonsWrap .reasonsList .listItem .profileWrap .itemimg {
        width: 100px;
        overflow: hidden;
        border-radius: 50%; }
      #container .reasonsWrap .reasonsList .listItem .profileWrap .itemTxt {
        display: flex;
        box-sizing: border-box;
        width: calc(100% -100px);
        align-items: center;
        padding: 0 0 0 20px; }
        #container .reasonsWrap .reasonsList .listItem .profileWrap .itemTxt p {
          color: #333;
          font-weight: bold;
          padding: 5px 12px;
          background: #E1DED7; }
          @media screen and (max-width: 1200px) {
            #container .reasonsWrap .reasonsList .listItem .profileWrap .itemTxt p {
              font-size: 1.4rem; } }
          @media (max-width: 768px) {
            #container .reasonsWrap .reasonsList .listItem .profileWrap .itemTxt p {
              font-size: 1.2rem; } }
    #container .reasonsWrap .reasonsList .listItem .hashtag {
      padding: 0 15px 20px;
      font-size: 1.2rem;
      font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, "Segoe UI", sans-serif; }
      #container .reasonsWrap .reasonsList .listItem .hashtag .hashtag-txt {
        display: inline-block;
        margin: 0 12px 0 0; }
#container .reasons-modal__container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  z-index: -1;
  transition: opacity .5s .5s ease-in-out; }
  #container .reasons-modal__container::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1; }
  #container .reasons-modal__container.js-modal-show {
    opacity: 1;
    transition: opacity .5s 0s ease-in-out; }
#container .reasons-modal__modal {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 800px;
  width: 100%;
  padding: 0;
  opacity: 0;
  background: #FFF;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.5s ease-in-out, transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
  z-index: 2; }
  #container .reasons-modal__modal.js-modal-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.5s ease-in-out, transform 0.5s cubic-bezier(0.77, 0, 0.175, 1.5);
    pointer-events: auto; }
  @media screen and (max-width: 840px) {
    #container .reasons-modal__modal {
      width: 95vw; } }
  #container .reasons-modal__modal-inner {
    display: flex; }
    @media (max-width: 480px) {
      #container .reasons-modal__modal-inner {
        display: block; } }
#container .reasons-modal__profile {
  width: 200px; }
  @media (max-width: 480px) {
    #container .reasons-modal__profile {
      display: flex;
      align-items: center;
      width: 100%; } }
@media (max-width: 480px) {
  #container .reasons-modal__img-col {
    width: 100px; } }
#container .reasons-modal__txt-col {
  padding: 15px 13px; }
  @media (max-width: 480px) {
    #container .reasons-modal__txt-col {
      width: calc(100% - 100px); } }
#container .reasons-modal__itemTxt {
  display: block;
  font-size: 1.4rem;
  margin: 0 auto 12px; }
  #container .reasons-modal__itemTxt span {
    color: #333;
    padding: 5px 12px;
    font-weight: bold;
    background: #E1DED7; }
#container .reasons-modal__reasonName {
  display: block;
  font-size: 1.8rem !important;
  font-weight: bold; }
  #container .reasons-modal__reasonName .year {
    font-size: 1.4rem !important; }
  @media (max-width: 480px) {
    #container .reasons-modal__reasonName {
      font-size: 1.6rem !important; }
      #container .reasons-modal__reasonName .year {
        font-size: 1.2rem !important; } }
#container .reasons-modal__detail {
  width: calc(100% - 200px);
  padding: 0 0 20px;
  background: #F6F6F6; }
  @media (max-width: 480px) {
    #container .reasons-modal__detail {
      width: 100%;
      padding: 0 0 20px; } }
#container .reasons-modal__heading {
  margin: 0 auto 29px;
  padding: 10px 22px 6px;
  background: #E1DED7; }
  @media (max-width: 480px) {
    #container .reasons-modal__heading {
      margin: 0 auto 18px;
      padding: 10px 10px 6px 40px;
      text-indent: -14px; } }
  #container .reasons-modal__heading-ttl {
    display: block;
    font-size: 2rem;
    color: #333;
    vertical-align: middle; }
    #container .reasons-modal__heading-ttl .reasonNum {
      display: inline-block;
      vertical-align: middle;
      font-size: 3rem;
      margin: 0 7px 0 0; }
    @media (max-width: 480px) {
      #container .reasons-modal__heading-ttl {
        font-size: 1.6rem;
        line-height: 1.5; }
        #container .reasons-modal__heading-ttl .reasonNum {
          font-size: 2rem;
          margin: 0 7px 0 0; } }
#container .reasons-modal__txt {
  box-sizing: border-box;
  height: 320px;
  padding: 0 22px 10px;
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1; }
  @media (max-width: 480px) {
    #container .reasons-modal__txt {
      width: 100%;
      height: 30vh;
      min-height: 1px;
      z-index: 2; } }
  #container .reasons-modal__txt::-webkit-scrollbar {
    width: 10px; }
  #container .reasons-modal__txt::-webkit-scrollbar-track {
    background: none;
    border-left: none; }
  #container .reasons-modal__txt::-webkit-scrollbar-thumb {
    background: #E1DED7;
    border-radius: 10px; }
#container .reasons-modal__close-btn {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -50px;
  right: 0;
  cursor: pointer;
  background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M19.907%2017.293L12.214%209.6l6.893-6.893a.999.999%200%20000-1.414l-.8-.8a.999.999%200%2000-1.414%200L10%207.386%203.107.493a.999.999%200%2000-1.414%200l-.8.8a.999.999%200%20000%201.414L7.786%209.6.093%2017.293a.997.997%200%20000%201.415l.8.8a1%201%200%20001.414%200L10%2011.814l7.693%207.693a.997.997%200%20001.414.001l.8-.8a1%201%200%20000-1.415z%22%2F%3E%3C%2Fsvg%3E") no-repeat center center #E1DED7;
  background-size: 20px 20px; }

[data-simplebar] {
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start; }

.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit; }

.simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0; }

.simplebar-offset {
  direction: inherit !important;
  box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch; }

.simplebar-content-wrapper {
  direction: inherit;
  box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%;
  /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
  width: auto;
  visibility: visible;
  max-width: 100%;
  /* Not required for horizontal scroll to trigger */
  max-height: 100%;
  /* Needed for vertical scroll to trigger */
  scrollbar-width: none;
  -ms-overflow-style: none; }

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0; }

.simplebar-content:before,
.simplebar-content:after {
  content: ' ';
  display: table; }

.simplebar-placeholder {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  pointer-events: none; }

.simplebar-height-auto-observer-wrapper {
  box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0; }

.simplebar-height-auto-observer {
  box-sizing: inherit;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1000%;
  width: 1000%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1; }

.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden; }

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none; }

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all; }

.simplebar-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 10px; }

.simplebar-scrollbar:before {
  position: absolute;
  content: '';
  background: black;
  border-radius: 7px;
  left: 2px;
  right: 2px;
  opacity: 0;
  transition: opacity 0.2s linear; }

.simplebar-scrollbar.simplebar-visible:before {
  /* When hovered, remove all transitions from drag handle */
  opacity: 0.5;
  transition: opacity 0s linear; }

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 11px; }

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px; }

.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 11px; }

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  height: 100%;
  left: 2px;
  right: 2px; }

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 2px;
  height: 7px;
  min-height: 0;
  min-width: 10px;
  width: auto; }

/* Rtl support */
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0; }

.hs-dummy-scrollbar-size {
  direction: rtl;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  height: 500px;
  width: 500px;
  overflow-y: hidden;
  overflow-x: scroll; }

.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none; }