@charset "utf-8";
/* CSS Document */
/*===============================

    common

================================*/
:root { font-size: 62.5%; }/* 1(r)em = 10px */

* { letter-spacing: 0; }

body {
  color: #3E3A39;
  font-family: '游ゴシック' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ ProN' , Meiryo , 'メイリオ' , sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  height: 100%;
  text-align: left;
  width: 100%;
}

.wrapper {
  align-items: flex-start;
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-between;
  line-height: 1.5;
  margin: 20px auto 0;
  overflow:hidden;
  text-align: left;
  width: 980px;
}

.pc_br { display: block; }
.is-sp { display: none; }


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

/* Icon */
.u_ic {
  position: relative;
}
.u_ic::before,
.u_ic::after {
  content: "";
  margin: auto;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  position: absolute;
  pointer-events: none;
}

/*===============================

    コンテンツ

================================*/
.container {
  /*float: right;*/
  width: 730px;
}

.mainContents {}

.topImage { margin-bottom: 30px; }
.topImage__link{
  display: block;
  line-height: 0;
}
.topImage img {
  height: auto;
  max-width: 100%;
}

/* 動画 */
.iframeBox { margin: 20px 0; }

@media screen and (min-width: 768px){
  .iframeBox--center {
    margin: 20px auto;
    width: 530px;
  }
}

.iframeBox__inner {
  position: relative;
  width: 100%;
  padding-top: calc(100% * 9 / 16);
}

.iframeBox__inner > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
    見出し
================================*/
/* 2色ライン */
.headline-bicolor {
  border-bottom: 3px solid #ccc;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 30px;
  padding: 0 0 10px;
  position: relative;
}

.headline-bicolor::before {
  border-bottom: 3px solid crimson;
  content: "";
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 65%;
}

.headline-bicolor > span {
  font-size: .8em;
  margin-left: 10px;
}

/* 背景画像（人） */
.headline-bgImg {
  background-image:url("../../../common/img/recruit/rec_title_red.gif");
  background-repeat: no-repeat;
  background-position: left bottom;
  font-size: 18px;
  margin: 20px 0 30px;
  padding:23px 0px 8px 75px;
  display:block;
}

/*
    カテゴリーリンク
================================*/
.categoryBtnNav {
  margin: 30px 0 60px 0;
} 

.categoryBtnNav_row{}
.categoryBtnNav_row:nth-of-type(2){}
.categoryBtnNav_row + .categoryBtnNav_row{
  margin-top: 10px;
}
.categoryBtnNav_row .categoryBtnNav_row_inner{
  display: grid !important;
  -ms-grid-columns: (1fr) [3];
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.categoryBtnNav_row:nth-of-type(2) .categoryBtnNav_row_inner{
  -ms-grid-columns: (1fr) [3];
  grid-template-columns: repeat(3, 1fr);
}

.categoryBtnNav_item {
  text-align: center;
  width: 100%;
}

.categoryBtnNav_link {
  padding: 12px 20px 12px 20px;
  background-color: #fff;
  border-radius: 5px;
  color: #000;
  border: 1px solid #d8d8d8;
  display: block;
  font-size: 15px;
  font-weight: bold;
  transition: .3s;
  text-align: left;
  line-height: 1;
}


.categoryBtnNav_link::before {
  width: 15px;
  height: 15px;
  top: 0;
  bottom: 0;
  right: 20px;
  background-color: #E5002D;;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  transition: background-color var(--transition);
  transition: all var(--transition);
}
.categoryBtnNav_link::after {
  width: 4px;
  height: 4px;
  top: 0;
  bottom: 0;
  right: 26px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (any-hover: hover){
  .categoryBtnNav_link:hover {
    color: #fff;
    background: #E5002D;
    text-decoration: none;
  }
  .categoryBtnNav_link:hover::before {
    background-color: #fff;
  }
  .categoryBtnNav_link:hover::after {
    border-top: 1px solid #E5002D;
    border-right: 1px solid #E5002D;
  }
}

.categoryBtnNav_link-pickup{
  color: #fff;
  background: #E5002D;
  text-decoration: none;
}
.categoryBtnNav_link-pickup::before {
  background-color: #fff;
}
.categoryBtnNav_link-pickup::after {
  border-top: 1px solid #E5002D;
  border-right: 1px solid #E5002D;
}

@media (any-hover: hover){
  .categoryBtnNav_link-pickup:hover {
    color: #000;
    background: #fff;
    text-decoration: none;
  }
  .categoryBtnNav_link-pickup:hover::before {
    background-color: #E5002D;
  }
  .categoryBtnNav_link-pickup:hover::after {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
  }
}


/*
    Flex box
================================*/
.flexBox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flexBox-col3::after {
content: "";
display: block;
width: 220px;
}

.flexBox_inner {
  display: flex;
  flex: 0 1 auto;
}

.flexBox_inner > a {
  color: inherit;
  display: block;
}

.flexBox_inner > a:hover { text-decoration: none; }



/*===============================

    トップぺージ

================================*/
.detailList { margin: 30px 0; }

.detailList_wrapper {
  margin: 20px 0;
}

.detailList_ttl {
  border-left: 6px solid #ff5555;
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 0 0 10px;
}

.detailList_contents {}


/*
    最新情報
================================*/
.rec_newsList { margin: 30px 0; }

.rec_newsList_wrapper {
  margin: 12px 0;
}

.rec_newsList_ttl {
  border-left: 6px solid #ff5555;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 0 0 10px;
}

.rec_newsList_contents {}



/*
    カード型リンク
================================*/
.cardTypeBox {
  margin: 0 0 30px;
  width: 350px;
}

.cardTypeBox > a { transition: .3s; }

.cardTypeBox > a:hover {
  opacity: .6;
}

.cardTypeBox_img {}

.cardTypeBox_ttl {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.cardTypeBox_ttl >span {
  display: block;
  font-size: .8em;
}

.cardTypeBox_txt {}


/*
    お問合せボックス
================================*/
.borderBox {
  border: 3px solid currentColor;
  margin: 30px 0;
}

.borderBox-contact {
  border: 5px solid  crimson;
  border-radius: 10px;
  margin: 30px auto;
  padding: 10px;
  width: 80%;
}

.borderBox-contact a {
  color: currentColor;
  display: block;
  text-decoration: none;
  transition: .3s;
}

.borderBox-contact a:hover {
  opacity: .6;
  text-decoration: none;
}



/*===============================

    インタビューページ

================================*/
.photoCardBox {
  height: 220px;
  margin-bottom: 20px;
  position: relative;
}

.photoCardBox > a { transition: .3s; }

.photoCardBox > a:hover {
  opacity: .6;
  text-decoration: none;
}

.photoCardBox.flexBox_inner { width: 220px; }

.photoCardBox_ttl {
  background-color: rgba(255,255,255,.7);
  font-size: 13px;
  padding: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

/*
    アコーディオンBOX
================================*/
.accordionBox.is-hide {
  height: 240px;
  overflow: hidden;
}

.rashikuBox.is-hide {
  height: 300px;
  overflow: hidden;
}


/* 開閉ボタン */
[class^="switchBar"] {
  border: 2px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  font-size: 20px;
  margin: auto;
  padding: 5px;
  text-align: center;
  width: 80%;
}

[class^="switchBar"]::before {
  content: "\f067";
  color: #666;
  display: inline-block;
  font-family: "fontawesome";
  font-size: 18px;
  font-weight: 700;
  margin-right: 5px;
}

[class^="switchBar"].is-on::before {
  content: "\f068";
  color: #666;
  display: inline-block;
  font-family: "fontawesome";
  font-size: 18px;
  font-weight: 700;
  margin-right: 5px;
}


/*
    らしくインタビュー一覧
================================*/
.articleListBox {
  margin-bottom: 30px;
  width: 350px;
}

.articleListBox > a {
  display: block;
  transition: .3s;
  width: 100%;
}

.articleListBox > a:hover { opacity: .6; }

.articleListBox_img {}
.articleListBox_img > img { display: block; }

.articleListBox_inner {
  display: flex;
  flex-flow: column wrap;
  width: 220px;
}

/*新卒バナー*/
.freshersBanner{
  margin-top: 20px;
}
.freshersBanner img{
  width: 100%;
}

/*ローディングの動画*/

.l_video{
  height: 100vh;
  width: 100vw;
  z-index: 999999;
  position: fixed;
  background: #fff;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;    
}
.m_video_main{
  width: 100%;
  height: 100%;
}
.m_video_btn{
  position:absolute;
  right: 5vw;
  bottom: 5vh;
}
.m_video_btnMain{
  border: 1px solid #333;
  font-size: 14px;
  color: #333;
  padding: 10px 20px;
  background: #fff;
  transition: .3s;
}
.m_video_btnMain:hover{
  opacity: 0.6;
}
@media(max-width: 896px) {
  .l_video{
    display: none;
  }
}



/*===============================

    utility

================================*/
.u_bold { font-weight: bold; }
.u_sup { vertical-align: super; }

/* font-size */
.u_fz10 { font-size: 10px;}
.u_fz11 { font-size: 11px;}
.u_fz12 { font-size: 12px;}
.u_fz13 { font-size: 13px;}
.u_fz14 { font-size: 14px;}
.u_fz15 { font-size: 15px;}
.u_fz16 { font-size: 16px;}
.u_fz17 { font-size: 17px;}
.u_fz18 { font-size: 18px;}
.u_fz19 { font-size: 19px;}
.u_fz20 { font-size: 20px;}

/* font-weight */
.u_fw-b { font-weight: bold; }
.u_fw-500 { font-weight: 500; }
.u_fw-700 { font-weight: 700; }

/* padding */
.u_p0 { padding: 0 !important; }
.u_p-xs { padding: 0.2rem !important; }
.u_p-sm { padding: 0.5rem !important; }
.u_p-md { padding: 1rem !important; }
.u_p-lg { padding: 1.5rem !important; }
.u_p-xl { padding: 3rem !important; }

.u_pt0 { padding-top: 0 !important; }
.u_pt-xs { padding-top: 0.2rem !important; }
.u_pt-sm { padding-top: 0.5rem !important; }
.u_pt-md { padding-top: 1rem !important; }
.u_pt-lg { padding-top: 1.5rem !important; }
.u_pt-xl { padding-top: 3rem !important; }

.u_px0 { padding-left: 0 !important; padding-right: 0 !important; }
.u_py0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.u_px-xs { padding-left: 0.2rem !important; padding-right: 0.2rem !important; }
.u_py-xs { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
.u_px-sm { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.u_py-sm { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.u_px-md { padding-left: 1rem !important; padding-right: 1rem !important; }
.u_py-md { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.u_px-lg { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.u_py-lg { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.u_px-xl { padding-left: 3rem !important; padding-right: 3rem !important; }
.u_py-xl { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* margin */
.u_mt0 { margin-top: 0 !important; }
.u_mt-xs { margin-top: 0.2rem !important; }
.u_mt-sm { margin-top: 0.5rem !important; }
.u_mt-md { margin-top: 1rem !important; }
.u_mt-lg { margin-top: 1.5rem !important; }
.u_mt-xl { margin-top: 3rem !important; }

.u_mr35 { margin-right: 35px; }

.u_mb10 { margin-bottom: 10px; }
.u_mb15 { margin-bottom: 15px; }
.u_mb20 { margin-bottom: 20px; }
.u_mb30 { margin-bottom: 30px; }
.u_mb50 { margin-bottom: 50px; }
.u_mb50 { margin-bottom: 50px; }
.u_mb100 { margin-bottom: 100px; }

/* text-align */
.u_taC { text-align: center; }
.u_taR { text-align: right; }
.u_taL { text-align: left; }

/* position */
.u_posRl { position: relative; }
.u_posAb { position: absolute; }
.u_posFx { position: fixed; }
.u_posStk { position: sticky; }
.u_posSt { position: static; }

.u_r10 { right: 10px; }
.u_btm10 { bottom: 10px; }

/* width */
.u_w350 { width: 350px; }
.u_w400 { width: 400px; }

.u_w40p { width: 40%; }
.u_w45p { width: 45%; }
.u_w50p { width: 50%; }

.u_maW70p { max-width: 70%; }
.u_maW75p { max-width: 75%; }
.u_maW80p { max-width: 80%; }

/*===============================

    レスポンシブ

================================*/
@media screen and (max-width:768px) {
body { margin: auto;width: 95%; }
div#cont { margin: 0; }
.is-sp { display: block; }
.rec_sideNav { display: none; }
.wrapper { width: 100%; }
.container { width: 100%; }
.categoryBtnNav_row_inner { grid-template-columns: repeat(1, 1fr) !important; }
.articleListBox_inner { margin-left: 10px; }
}

@media screen and (max-width:414px) {
  .flexBox { justify-content: center; }
}