@charset "UTF-8";
/* px を rem に変換 */
/************************************************************************
RakutenSansUI系
@font-faceは/assets/css/rf-main.cssで設定済
************************************************************************/
@font-face {
  font-family: 'RakutenSansUI';
  src: url("/assets/fonts/RakutenSans/RakutenSansUI_W_Rg.woff2") format("woff2"), url("/assets/fonts/RakutenSans/RakutenSansUI_W_Rg.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.font-rsans-ui {
  font-family: 'RakutenSansUI',Roboto,Arial,'Arial Unicode MS',sans-serif !important;
  font-weight: normal !important;
}

@font-face {
  font-family: 'RakutenSansUI_bold';
  src: url("/assets/fonts/RakutenSans/RakutenSansUI_W_Bd.woff2") format("woff2"), url("/assets/fonts/RakutenSans/RakutenSansUI_W_Bd.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.font-rsans-ui-bold {
  font-family: 'RakutenSansUI_bold','Helvetica Neue',HelveticaNeue,Helvetica,Arial,'Arial Unicode MS',sans-serif !important;
}

@font-face {
  font-family: 'RakutenSansUI_light';
  src: url("/careers/assets/fonts/RakutenSansUI_W_Lt.woff2") format("woff2"), url("/careers/assets/fonts/RakutenSansUI_W_Lt.woff") format("woff");
  font-style: normal;
  font-display: swap;
}

.font-rsans-ui-light {
  font-family: 'RakutenSansUI_light','Helvetica Neue',HelveticaNeue,Helvetica,Arial,'Arial Unicode MS',sans-serif !important;
}

/************************************************************************
RakutenSans系
************************************************************************/
@font-face {
  font-family: 'RakutenSans_bold';
  src: url("/careers/assets/fonts/RakutenSans_W_Bd.woff2") format("woff2"), url("/careers/assets/fonts/RakutenSans_W_Bd.woff") format("woff");
  font-display: swap;
}

.font-rsans-bold {
  font-family: 'RakutenSans_bold','Helvetica Neue',HelveticaNeue,Helvetica,Arial,'Arial Unicode MS',sans-serif !important;
}

/************************************************************************
アイコン
（アイコン一覧はreadmeフォルダのfont-icons.pngを参照ください）
************************************************************************/
@font-face {
  font-family: 'recruit-icons';
  src: url("/careers/assets/fonts/icons/icons.eot?dsmwpv");
  src: url("/careers/assets/fonts/icons/icons.eot?dsmwpv#iefix") format("embedded-opentype"), url("/careers/assets/fonts/icons/icons.ttf?dsmwpv") format("truetype"), url("/careers/assets/fonts/icons/icons.woff?dsmwpv") format("woff"), url("/careers/assets/fonts/icons/icons.svg?dsmwpv#icons") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="recruit-font-icon-"], [class*=" recruit-font-icon-"] {
  font-family: 'recruit-icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.recruit-font-icon-arrow-a:before {
  content: "\e900";
}

.recruit-font-icon-arrow-b:before {
  content: "\e901";
}

.recruit-font-icon-plus:before {
  content: "\e902";
}

.recruit-font-icon-minus:before {
  content: "\e903";
}

.recruit-font-icon-lupe:before {
  content: "\e904";
}

.recruit-font-icon-blank:before {
  content: "\e905";
}

.recruit-font-icon-plus-bold:before {
  content: "\e906";
}

.icon-flow-appointment:before {
  content: "\e90e";
}

.icon-flow-document:before {
  content: "\e90f";
}

.icon-flow-entry:before {
  content: "\e910";
}

.icon-flow-interview:before {
  content: "\e911";
}

.icon-flow-lupe:before {
  content: "\e912";
}

.icon-flow-mypage:before {
  content: "\e913";
}

.icon-flow-selection:before {
  content: "\e914";
}

.icon-flow-tel:before {
  content: "\e915";
}

.icon-kf-service:before {
  content: "\e90a";
  color: #555;
}

.icon-kf-device-a:before {
  content: "\e917";
}

.icon-kf-device-b:before {
  content: "\e916";
}

.icon-kf-charity:before {
  content: "\e91c";
}

.icon-kf-chart:before {
  content: "\e91a";
}

.icon-kf-distribution:before {
  content: "\e919";
}

.icon-kf-from:before {
  content: "\e918";
}

.icon-kf-japan:before {
  content: "\e91b";
}

.icon-kf-location:before {
  content: "\e907";
}

.icon-kf-man:before {
  content: "\e908";
}

.icon-kf-people:before {
  content: "\e909";
}

.icon-kf-women-chart:before {
  content: "\e90c";
}

.icon-kf-employees:before {
  content: "\e90d";
}

.icon-kf-store:before {
  content: "\e90b";
}

.icon-env-benefits:before {
  content: "\e91d";
}

.icon-env-culture:before {
  content: "\e91e";
}

.icon-env-development:before {
  content: "\e91f";
}

.icon-env-office:before {
  content: "\e920";
}

/************************************************************************
mixin
************************************************************************/
/************************************************************************
rex
************************************************************************/
/************************************************************
COMMON
*************************************************************/
.kv .kv-box .kv-txt .kv-txt-01 .font-rsans-ui-bold, .kv .kv-box .kv-txt .kv-txt-01 .font-rsans-bold {
  letter-spacing: 0 !important;
}

/************************************************************
SMALL
*************************************************************/
@media screen and (max-width: 768px) {
  .kv .kv-box {
    text-decoration: none;
    display: block;
    height: 250px;
    color: white;
    position: relative;
    overflow: hidden;
  }
  .kv .kv-box.kv-mid-career .kv-box-bg {
    background-image: url(/careers/assets/img/index/kv/mid-career-img-sp.jpg);
  }
  .kv .kv-box.kv-new-grad .kv-box-bg {
    background-position: center top 30%;
    background-image: url(/careers/assets/img/index/kv/new-graduate-img-sp.jpg);
  }
  .kv .kv-box .kv-box-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1s;
  }
  .kv .kv-box .kv-box-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .kv .kv-box .kv-box-inner::after {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    display: inline-block;
    transform: translateY(-50%);
    content: "\F103";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    top: 1px;
    display: inline-block;
    font: normal 1em rex-icon;
    font-size: 35px;
  }
  .kv .kv-box .kv-box-inner .kv-txt .kv-txt-01 {
    font-size: 2.3125rem;
    line-height: 0.87em;
  }
  .kv .kv-box .kv-box-inner .kv-txt .kv-txt-01 .kv-txt-01-mini {
    font-size: 1.6875rem;
  }
  .kv .kv-box .kv-box-inner .kv-txt .kv-txt-02 {
    margin-top: 26px;
    font-size: 0.875rem;
    line-height: 1em;
  }
}

/************************************************************
LARGE
*************************************************************/
@media screen and (min-width: 769px) {
  .kv .kv-box {
    text-decoration: none;
    display: block;
    margin: 0 auto;
    max-width: 1800px;
    height: 260px;
    color: white;
    position: relative;
    overflow: hidden;
  }
  .kv .kv-box:hover .kv-box-inner {
    opacity: .7;
  }
  .kv .kv-box:hover .kv-box-bg {
    transform: scale(1.05);
  }
  .kv .kv-box.kv-mid-career .kv-box-bg {
    background-image: url(/careers/assets/img/index/kv/mid-career-img.jpg);
  }
  .kv .kv-box.kv-new-grad .kv-box-bg {
    background-position: center top;
    background-image: url(/careers/assets/img/index/kv/new-graduate-img.jpg);
  }
  .kv .kv-box .kv-box-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1s;
  }
  .kv .kv-box .kv-box-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    transition: opacity .2s;
  }
  .kv .kv-box .kv-box-inner::after {
    content: "\F103";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    top: 1px;
    display: inline-block;
    font: normal 1em rex-icon;
    font-size: 40px;
  }
  .kv .kv-box .kv-box-inner .kv-txt {
    min-width: 470px;
  }
  .kv .kv-box .kv-box-inner .kv-txt .kv-txt-01 {
    font-size: 3.375rem;
    line-height: 0.87em;
  }
  .kv .kv-box .kv-box-inner .kv-txt .kv-txt-01 .kv-txt-01-mini {
    font-size: 2.125rem;
  }
  .kv .kv-box .kv-box-inner .kv-txt .kv-txt-02 {
    margin-top: 26px;
    font-size: 1rem;
    line-height: 1em;
  }
}

/************************************************************
COMMON
*************************************************************/
.employee-voice .inner-box {
  background-color: rgba(255, 255, 255, 0.9);
}

/************************************************************
SMALL
*************************************************************/
@media screen and (max-width: 768px) {
  .employee-voice {
    height: 90vw;
    background-image: url(/careers/assets/img/index/employee-voice/bg-sp.jpg?2);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .employee-voice .inner-box {
    margin: 0 auto;
    width: 80vw;
    padding: 40px 0;
  }
  .employee-voice .inner-box .recruit-sec-title {
    line-height: 2rem;
  }
  .employee-voice .inner-box .recruit-sec-title .recruit-sec-title-jp {
    font-size: 0.875rem;
  }
  .employee-voice .inner-box .detail-btn {
    margin: 25px auto 0;
  }
}

/************************************************************
LARGE
*************************************************************/
@media screen and (min-width: 769px) {
  .employee-voice {
    margin: 0 auto;
    max-width: 1440px;
    height: 340px;
    background-image: url(/careers/assets/img/index/employee-voice/bg.jpg?2);
    background-size: cover;
    background-position: center;
    padding-top: 80px;
  }
  .employee-voice .inner-box {
    margin: 0 auto;
    width: 600px;
    min-height: 220px;
    padding-top: 45px;
    padding-bottom: 20px;
  }
  .employee-voice .inner-box .detail-btn {
    margin: 25px auto 0;
  }
}

/************************************************************
COMMON
*************************************************************/
/************************************************************
SMALL
*************************************************************/
/************************************************************
LARGE
*************************************************************/