@charset "UTF-8";
body {
  background-color: #000000;
  color: #fff; }

img {
  width: 100%;
  height: auto; }

.text-x {
  overflow: hidden;
  animation: flipInY5Y 0.5s ease forwards;
  animation-delay: .20s; }
  .text-x:nth-of-type(2) {
    animation-delay: .25s; }
  .text-x:nth-of-type(3) {
    animation-delay: .30s; }
  .text-x:nth-of-type(4) {
    animation-delay: .35s; }
  .text-x:nth-of-type(5) {
    animation-delay: .40s; }
  .text-x:nth-of-type(6) {
    animation-delay: .45s; }
  .text-x:nth-of-type(7) {
    animation-delay: .50s; }
  .text-x:nth-of-type(8) {
    animation-delay: .55s; }
  .text-x:nth-of-type(9) {
    animation-delay: .60s; }
  .text-x:nth-of-type(10) {
    animation-delay: .65s; }
  .text-x:nth-of-type(11) {
    animation-delay: .70s; }
  .text-x:nth-of-type(12) {
    animation-delay: .75s; }
  .text-x:nth-of-type(13) {
    animation-delay: .80s; }
  .text-x:nth-of-type(14) {
    animation-delay: .85s; }

@keyframes flipInXX {
  0% {
    transform: translateX(30px);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
body {
  /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
  -webkit-backface-visibility: hidden; }

.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s; }

.flipInXX {
  backface-visibility: visible !important;
  animation-name: flipInXX; }

.main-title {
  opacity: 0; }
  .main-title.title-open {
    animation: flipInY5Y 0.5s ease forwards; }

@-webkit-keyframes flipInY5Y {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*
---------------------------------------------------------------------------------------------------------------------
各タイトル
---------------------------------------------------------------------------------------------------------------------
*/
.Item-Title {
  color: #fff;
  margin: auto; }
  .Item-Title p {
    font-size: 1.125em;
    letter-spacing: 0.12em;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    line-height: 1.4em;
    margin-bottom: 10px;
    color: #E6E6E6; }
    @media (min-width: 1024px) {
      .Item-Title p {
        font-size: 1.5em; } }
  .Item-Title h2 {
    font-size: 1.6em;
    line-height: 1.4em;
    margin: 20px 0 60px 0; }
    @media (min-width: 1024px) {
      .Item-Title h2 {
        font-size: 2.4em; } }
  .Item-Title h6 {
    font-size: 0.8em; }
    @media (min-width: 1024px) {
      .Item-Title h6 {
        font-size: 0.9em; } }
  .Item-Title h5 {
    font-size: 1.0em;
    line-height: 1.8em; }
    @media (min-width: 1024px) {
      .Item-Title h5 {
        font-size: 1.125em; } }
  .Item-Title a {
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.4em;
    color: #666666;
    position: relative; }
    @media (min-width: 1024px) {
      .Item-Title a {
        font-size: 0.9em; } }
    .Item-Title a img {
      width: 14px;
      height: auto;
      margin: -2px 0 0 10px; }
    .Item-Title a::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 1px;
      background: #666666;
      transform: scale(0, 1);
      transform-origin: right top;
      transition: transform .3s; }
    .Item-Title a:hover::after {
      transform-origin: left top;
      transform: scale(1, 1); }

.btn {
  position: relative;
  display: inline-block;
  width: 210px;
  height: 54px;
  border-radius: 50px;
  background-color: #fff;
  margin-top: 20px; }
  .btn h4 {
    font-size: 0.9em;
    color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    display: flex;
    align-items: center;
    margin: 0; }
  .btn img {
    width: 14px;
    height: auto;
    position: absolute;
    top: -1px;
    bottom: 0;
    right: 15px;
    display: flex;
    align-items: center;
    margin: auto;
    transition: .5s; }

a:hover .btn > img {
  right: 7px; }

a.re-btn {
  display: flex;
  justify-content: center; }
  @media (min-width: 1024px) {
    a.re-btn {
      justify-content: flex-start; } }
  a.re-btn:hover .btn > img {
    right: 7px; }

.recruit-title {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  z-index: 100; }
  @media (min-width: 1024px) {
    .recruit-title {
      top: 80px; } }
  .recruit-title .title {
    padding-left: 2%; }
    .recruit-title .title h1 {
      font-family: 'Montserrat', sans-serif;
      font-weight: bold;
      font-size: 2.0em;
      line-height: 0.8em;
      letter-spacing: 0.08em; }
      @media (min-width: 1024px) {
        .recruit-title .title h1 {
          font-size: 3.0em; } }
    .recruit-title .title h2 {
      font-size: 1.0em;
      line-height: 1.2em;
      margin: 0px; }
      @media (min-width: 1024px) {
        .recruit-title .title h2 {
          font-size: 1.125em; } }
  .recruit-title .sp-btn {
    position: absolute;
    top: 5px;
    right: 5%; }
    .recruit-title .sp-btn a {
      font-size: 0.9em;
      display: flex; }
      .recruit-title .sp-btn a img {
        width: 15px;
        margin: 1px 0 0 4px; }
  .recruit-title .re-btn {
    position: absolute;
    top: 0;
    right: 2%; }

.preface-text {
  margin: 80px auto 0; }
  @media (min-width: 768px) {
    .preface-text {
      margin: 80px auto 0; } }
  @media (min-width: 1024px) {
    .preface-text {
      margin: 140px auto 0; } }
  .preface-text .border1 {
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 5px; }
  .preface-text p {
    font-size: 0.8em;
    margin: 0;
    display: flex;
    justify-content: center;
    text-align: center; }
    @media (min-width: 1024px) {
      .preface-text p {
        font-size: 0.9em; } }

/*
---------------------------------------------------------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------------------------------------------------------
*/
#scroll-infinity {
  margin-top: 50px;
  background-color: #000; }
  @media (min-width: 1024px) {
    #scroll-infinity {
      margin-top: 60px; } }
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
  #scroll-infinity .scroll-infinity-wrap {
    display: flex;
    overflow: hidden; }
    #scroll-infinity .scroll-infinity-wrap.ue ul {
      animation: infinity-scroll-left 50s infinite linear 0.5s both; }
      @media (min-width: 1024px) {
        #scroll-infinity .scroll-infinity-wrap.ue ul {
          animation: infinity-scroll-left 100s infinite linear 0.5s both; } }
    #scroll-infinity .scroll-infinity-wrap.shita ul {
      animation: infinity-scroll-left 80s infinite linear 0.5s both; }
      @media (min-width: 1024px) {
        #scroll-infinity .scroll-infinity-wrap.shita ul {
          animation: infinity-scroll-left 200s infinite linear 0.5s both; } }
    #scroll-infinity .scroll-infinity-wrap ul {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0; }
      #scroll-infinity .scroll-infinity-wrap ul li {
        width: 200px;
        height: auto;
        padding-right: 10px; }
        @media (min-width: 768px) {
          #scroll-infinity .scroll-infinity-wrap ul li {
            width: 400px;
            padding-right: 20px; } }
        #scroll-infinity .scroll-infinity-wrap ul li img {
          border-radius: 10px;
          vertical-align: bottom; }
  #scroll-infinity .main-title {
    margin: 10px auto 20px; }
    #scroll-infinity .main-title h1 {
      font-size: 8.4vw;
      font-weight: bold;
      font-feature-settings: "palt";
      letter-spacing: 0.00em;
      line-height: 1.2em;
      text-align: center;
      margin: 0; }

/*
---------------------------------------------------------------------------------------------------------------------
プラモ対談
---------------------------------------------------------------------------------------------------------------------
*/
#puramo-talk {
  height: auto;
  border-radius: 30px;
  position: relative;
  margin: 20px auto 0;
  width: 90%;
  max-width: 1600px; }
  @media (min-width: 768px) {
    #puramo-talk {
      border-radius: 50px; } }
  @media (min-width: 1250px) {
    #puramo-talk {
      border-radius: 100px;
      margin: 50px auto 0; } }
  #puramo-talk .movie {
    padding-top: 20px; }
    @media (min-width: 1024px) {
      #puramo-talk .movie {
        padding-top: 100px; } }
    #puramo-talk .movie .movie-in {
      position: relative; }
      #puramo-talk .movie .movie-in .thumbnail img, #puramo-talk .movie .movie-in .thumbnail video {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        border: 4px solid #fff;
        border-radius: 20px; }
        @media (min-width: 768px) {
          #puramo-talk .movie .movie-in .thumbnail img, #puramo-talk .movie .movie-in .thumbnail video {
            border: 6px solid #fff;
            border-radius: 40px; } }
      #puramo-talk .movie .movie-in .video-play-button img {
        border-radius: 0; }
      #puramo-talk .movie .movie-in .video-play-button:after {
        background-color: #00A4E3; }
      #puramo-talk .movie .movie-in .video-play-button:before {
        background-color: #00A4E3; }
  #puramo-talk .video-title {
    width: 100%;
    margin: auto; }
    @media (min-width: 768px) {
      #puramo-talk .video-title {
        display: flex; } }
    @media (min-width: 1024px) {
      #puramo-talk .video-title {
        width: 90%; } }
    #puramo-talk .video-title .puromo-logo {
      margin: 10px auto 0;
      text-align: center; }
      @media (min-width: 768px) {
        #puramo-talk .video-title .puromo-logo {
          width: 50%; } }
      #puramo-talk .video-title .puromo-logo img {
        width: 70%; }
        @media (min-width: 768px) {
          #puramo-talk .video-title .puromo-logo img {
            width: 90%; } }
    #puramo-talk .video-title .txt {
      margin-top: 20px; }
      @media (min-width: 768px) {
        #puramo-talk .video-title .txt {
          width: 50%; } }
      #puramo-talk .video-title .txt h2 {
        font-size: 1.25em;
        line-height: 1.4em;
        font-feature-settings: "palt";
        letter-spacing: 0.08em; }
        @media (min-width: 1024px) {
          #puramo-talk .video-title .txt h2 {
            font-size: 2vw; } }
        @media (min-width: 1600px) {
          #puramo-talk .video-title .txt h2 {
            font-size: 2.5em; } }
      #puramo-talk .video-title .txt p {
        font-size: 0.9em;
        line-height: 1.6em;
        margin-top: 10px; }
        @media (min-width: 1024px) {
          #puramo-talk .video-title .txt p {
            font-size: 1.0em;
            margin-top: 20px; } }
        @media (min-width: 1600px) {
          #puramo-talk .video-title .txt p {
            font-size: 1.125em; } }

/*
---------------------------------------------------------------------------------------------------------------------
トップ　メッセージ
---------------------------------------------------------------------------------------------------------------------
*/
#message-v11 {
  max-width: 1300px;
  width: 90%;
  margin: 40px auto 30px; }
  @media (min-width: 1024px) {
    #message-v11 {
      margin: 80px auto 60px; } }
  #message-v11 .message-text {
    padding: 0 0 40px 0; }
    @media (min-width: 1024px) {
      #message-v11 .message-text {
        padding: 0 60px 0 0; } }
    #message-v11 .message-text .Item-Title {
      margin-bottom: 30px; }
    #message-v11 .message-text .copy-text h2 {
      font-size: 1.6em;
      line-height: 1.4em;
      margin-bottom: 60px; }
      @media (min-width: 1250px) {
        #message-v11 .message-text .copy-text h2 {
          font-size: 2.4em; } }
    #message-v11 .message-text .copy-text p {
      font-size: 0.9em;
      line-height: 1.8em;
      text-align: justify; }
      @media (min-width: 1250px) {
        #message-v11 .message-text .copy-text p {
          font-size: 1.125em; } }
    #message-v11 .message-text .name {
      display: flex;
      justify-content: flex-end;
      margin: 70px 0 0 0; }
      #message-v11 .message-text .name h3 {
        font-size: 0.75em;
        font-weight: normal;
        line-height: 1.4em; }
      #message-v11 .message-text .name img {
        width: 230px;
        height: auto; }
        @media (min-width: 1250px) {
          #message-v11 .message-text .name img {
            width: 380px; } }
  #message-v11 figure {
    position: relative;
    margin: 0 0 40px 0; }
    #message-v11 figure img {
      width: 100%;
      height: auto;
      vertical-align: bottom;
      border-radius: 10px; }
      @media (min-width: 1024px) {
        #message-v11 figure img {
          border-radius: 20px; } }
    #message-v11 figure p {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 0.9em; }
  #message-v11 .message-photo-pc {
    display: none; }
    @media (min-width: 768px) {
      #message-v11 .message-photo-pc {
        display: block; } }

.card01 {
  width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden; }
  .card01 .swiper-slide {
    padding: 0 10px;
    margin-bottom: 50px; }
    .card01 .swiper-slide .pickup-box {
      color: #fff;
      position: relative; }
      .card01 .swiper-slide .pickup-box img {
        border-radius: 20px; }
      .card01 .swiper-slide .pickup-box p {
        position: absolute;
        top: 0;
        right: 0; }
  @media (min-width: 768px) {
    .card01 {
      display: none; } }

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  margin: 0 5px; }

.swiper-pagination {
  left: 0;
  right: 0;
  bottom: 50px; }

/*
---------------------------------------------------------------------------------------------------------------------
日本の採用を変えるリクライブチーム
---------------------------------------------------------------------------------------------------------------------
*/
#member {
  max-width: 1300px;
  width: 90%;
  margin: auto;
  padding: 50px 0 0; }
  #member .Item-Title {
    text-align: center; }
  #member .member-in {
    margin: 60px 0 0 0; }
  #member .member-btn {
    text-align: center;
    margin: auto; }
  #member .member-box {
    margin-bottom: 30px; }
    @media (min-width: 1024px) {
      #member .member-box {
        margin-bottom: 60px; } }
    #member .member-box img {
      width: 100%;
      height: auto;
      vertical-align: bottom;
      border-radius: 10px; }
      @media (min-width: 1024px) {
        #member .member-box img {
          border-radius: 10px; } }
    #member .member-box .text {
      margin-top: 10px; }
      #member .member-box .text h4 {
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        font-size: 0.9em; }
        @media (min-width: 1024px) {
          #member .member-box .text h4 {
            font-size: 1.0em; } }
      #member .member-box .text h5 {
        font-size: 0.75em;
        line-height: 1.4em; }
        @media (min-width: 1024px) {
          #member .member-box .text h5 {
            font-size: 0.8em; } }
      #member .member-box .text a img {
        width: 15px;
        height: auto;
        border-radius: 0;
        transition: .5s; }
        #member .member-box .text a img:hover {
          opacity: 0.7; }
  @media only screen and (min-width: 1024px) {
    #member .o-3column .col-lg-3 {
      padding: 0 10px; }
    #member .o-3column {
      margin: 0 -10px; } }
  @media only screen and (min-width: 768px) {
    #member .o-3column .col-lg-3a {
      padding: 0 10px; }
    #member .o-3column {
      margin: 0 -10px; } }

/*
---------------------------------------------------------------------------------------------------------------------
日本の採用を変えるリクライブチーム
---------------------------------------------------------------------------------------------------------------------
*/
#real {
  max-width: 1250px;
  width: 90%;
  margin: 80px auto 0; }
  @media (min-width: 1024px) {
    #real {
      margin: 160px auto 0; } }
  #real .real-in1 {
    margin: 70px 0 60px 0; }
  #real .real-in2 {
    margin-bottom: 60px; }
  #real .Item-Title {
    text-align: center; }
  #real .real-box img {
    border-radius: 20px; }
  #real .real-box.icatch {
    width: 80%;
    max-width: 400px;
    margin: auto; }
    @media (min-width: 1024px) {
      #real .real-box.icatch {
        margin-left: auto;
        margin-right: inherit; } }
  #real .one-day {
    text-align: center;
    margin-top: 20px; }
    @media (min-width: 1024px) {
      #real .one-day {
        display: flex;
        align-items: center;
        height: 100%;
        margin-top: 0;
        padding-left: 5%; } }
    @media (min-width: 1850px) {
      #real .one-day {
        padding-left: 85px; } }
    #real .one-day a {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .5s; }
      @media (min-width: 1024px) {
        #real .one-day a {
          justify-content: flex-start; } }
      #real .one-day a h3 {
        font-size: 1.125em;
        margin: 0 0 0 20px;
        position: relative; }
        @media (min-width: 1024px) {
          #real .one-day a h3 {
            font-size: 1.5em; } }
      #real .one-day a img {
        width: 45px;
        height: auto; }
    #real .one-day:hover {
      opacity: 1; }
      #real .one-day:hover a > h3::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        background: #fff;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .3s; }
      #real .one-day:hover a > h3:hover::after {
        transform-origin: left top;
        transform: scale(1, 1); }
  #real .radio-list {
    margin: 20px 0 0 0; }
    @media (min-width: 1024px) {
      #real .radio-list {
        padding-left: 5%;
        margin: 0; } }
    @media (min-width: 1850px) {
      #real .radio-list {
        padding-left: 85px; } }
    #real .radio-list ul li {
      border-bottom: 1px solid #707070;
      padding: 30px 0; }
      #real .radio-list ul li:first-child {
        border-top: 1px solid #707070; }
      #real .radio-list ul li a {
        font-size: 1.125em;
        font-weight: bold;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: .5s; }
        @media (min-width: 1024px) {
          #real .radio-list ul li a {
            font-size: 1.5em; } }
        #real .radio-list ul li a:hover {
          color: #00A4E3;
          opacity: 1; }
    #real .radio-list .btn {
      margin: 30px auto 0;
      display: flex; }
      @media (min-width: 768px) {
        #real .radio-list .btn {
          margin: 30px 0 0 0; } }

/*
---------------------------------------------------------------------------------------------------------------------
事業内容
---------------------------------------------------------------------------------------------------------------------
*/
#business {
  margin: 190px auto 120px;
  width: 100%; }
  #business .Item-Title {
    text-align: center;
    width: 90%;
    margin: 0 auto 40px; }
    @media (min-width: 1024px) {
      #business .Item-Title {
        margin: 0 auto 80px; } }
    #business .Item-Title p {
      margin-top: 50px; }
  #business .service {
    padding: 45px 0; }
  #business .service.color1 {
    background: linear-gradient(to right, rgba(44, 36, 249, 0.2), rgba(183, 0, 99, 0.2)); }
  #business .service.color2 {
    background-color: rgba(242, 186, 0, 0.2); }
  #business .service.color3 {
    background: linear-gradient(to right, rgba(36, 249, 192, 0.2), rgba(183, 20, 255, 0.2)); }
  #business .service-in {
    max-width: 1200px;
    margin: auto;
    width: 90%; }
    @media (min-width: 1024px) {
      #business .service-in {
        display: flex; } }
    #business .service-in .service-img {
      position: relative; }
      @media (min-width: 1024px) {
        #business .service-in .service-img {
          width: 60%; } }
      #business .service-in .service-img img {
        border-radius: 20px; }
      #business .service-in .service-img .play-btn {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center; }
        #business .service-in .service-img .play-btn img {
          width: 40px;
          height: auto;
          transform: scale(1);
          transition-duration: 0.8s; }
      #business .service-in .service-img a:hover .play-btn > img {
        transform: scale(1.08); }
    #business .service-in .service-info {
      text-align: center;
      margin: 20px 0 0 0; }
      @media (min-width: 1024px) {
        #business .service-in .service-info {
          width: 40%;
          margin: 0 0 0 60px;
          text-align: left;
          display: flex;
          align-items: center; } }
      #business .service-in .service-info .logo img {
        width: auto;
        height: 47px; }
      #business .service-in .service-info h2 {
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        font-size: 3.3em;
        line-height: 1.0em;
        letter-spacing: 0.08em; }
      #business .service-in .service-info h3 {
        font-size: 1.0em;
        line-height: 1.4em;
        margin-top: 20px; }
        @media (min-width: 1024px) {
          #business .service-in .service-info h3 {
            font-size: 1.125em; } }
      #business .service-in .service-info .btn {
        margin-top: 30px; }

/*
---------------------------------------------------------------------------------------------------------------------
募集職種
---------------------------------------------------------------------------------------------------------------------
*/
#job .Item-Title {
  text-align: center;
  margin-bottom: 60px;
  width: 100%; }
#job .job-category {
  position: relative;
  background-color: #fff;
  width: 90%;
  max-width: 600px;
  height: 100px;
  border-radius: 20px;
  margin: 0 auto 30px; }
  @media (min-width: 1024px) {
    #job .job-category {
      height: 90px; } }
  #job .job-category a::after {
    position: absolute;
    top: 50%;
    right: 20px;
    content: '';
    margin: -5px 0 0 0;
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .5s;
    opacity: 0; }
  #job .job-category a::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 18px;
    content: '';
    margin: auto;
    width: 10px;
    height: 10px;
    background-color: #000;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    transition: .5s;
    transform: scale(1); }
  #job .job-category a:hover::after {
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    opacity: 1; }
  #job .job-category a:hover::before {
    background-color: #000;
    transform: scale(3); }
  #job .job-category a h3 {
    font-size: 1.0em;
    color: #000;
    display: flex;
    justify-content: center;
    height: 100%;
    padding: 20px 0 0 0; }
    @media (min-width: 768px) {
      #job .job-category a h3 {
        font-size: 1.125em;
        align-items: center;
        justify-content: flex-start;
        padding: 0 0 0 20px; } }
  #job .job-category a:hover .bosyu-btn {
    background-color: #fff; }
    #job .job-category a:hover .bosyu-btn h6:first-child {
      opacity: 0; }
    #job .job-category a:hover .bosyu-btn h6:last-child {
      opacity: 1;
      color: #000; }
  #job .job-category a .bosyu-btn {
    width: 100px;
    height: 30px;
    position: absolute;
    top: 34px;
    bottom: 0;
    right: 0;
    left: 0;
    display: inline-block;
    background-color: #000;
    text-align: center;
    border-radius: 3px;
    transition: .5s;
    margin: auto; }
    @media (min-width: 768px) {
      #job .job-category a .bosyu-btn {
        top: 0;
        right: 44px;
        left: inherit;
        font-size: 1.125em; } }
    #job .job-category a .bosyu-btn h6 {
      position: absolute;
      left: 0;
      right: 0;
      font-size: 1.0em;
      color: #fff;
      line-height: 28px;
      transition: .5s; }
      #job .job-category a .bosyu-btn h6:last-child {
        opacity: 0; }
#job .sales {
  max-width: 1200px;
  width: 90%;
  margin: 120px auto 200px; }
  @media (min-width: 1024px) {
    #job .sales {
      display: flex; } }
  #job .sales .sales-left {
    text-align: center; }
    @media (min-width: 768px) {
      #job .sales .sales-left {
        width: 45%;
        text-align: left; } }
    @media (min-width: 1024px) {
      #job .sales .sales-left {
        width: 40%;
        margin-top: 5%; } }
    @media (min-width: 1250px) {
      #job .sales .sales-left {
        width: 35%;
        text-align: left;
        margin-top: 12%; } }
    #job .sales .sales-left .sales-left-in {
      margin-top: 20px; }
      @media (min-width: 1024px) {
        #job .sales .sales-left .sales-left-in {
          margin-top: 0px; } }
      #job .sales .sales-left .sales-left-in .Item-Title {
        text-align: left;
        margin: 0; }
      #job .sales .sales-left .sales-left-in .btn {
        margin-top: 40px; }
  @media (min-width: 768px) {
    #job .sales .sales-right {
      width: 55%; } }
  @media (min-width: 1024px) {
    #job .sales .sales-right {
      width: 60%; } }
  @media (min-width: 1250px) {
    #job .sales .sales-right {
      width: 65%; } }
  #job .sales .sales-right img {
    border-radius: 20px; }

/*
---------------------------------------------------------------------------------------------------------------------
働きやすい環境があります。
---------------------------------------------------------------------------------------------------------------------
*/
#Diversity {
  width: 100%;
  margin: 120px auto 60px; }
  @media (min-width: 1024px) {
    #Diversity {
      margin: 120px auto 60px; } }
  #Diversity .Item-Title {
    text-align: center;
    margin-bottom: 100px; }
  #Diversity .diversity-title h2 {
    font-size: 1.5em;
    line-height: 1.2em;
    margin: 0 0 20px 0; }
    @media (min-width: 768px) {
      #Diversity .diversity-title h2 {
        font-size: 2.0em;
        margin: 0 0 40px 0; } }
  #Diversity .diversity-inn {
    margin: auto;
    width: 90%; }
    @media (min-width: 1600px) {
      #Diversity .diversity-inn {
        width: 80%; } }
  #Diversity #diversity-in h3 {
    font-size: 1.3em; }
    @media (min-width: 768px) {
      #Diversity #diversity-in h3 {
        font-size: 1.5em; } }
  #Diversity #diversity-in h4 {
    font-size: 1.0em;
    line-height: 1.4em;
    padding-top: 5px; }
    @media (min-width: 768px) {
      #Diversity #diversity-in h4 {
        font-size: 1.125em; } }
  #Diversity #diversity-in p {
    font-size: 0.9em;
    line-height: 1.8em;
    text-align: justify;
    margin: 10px 0; }
    #Diversity #diversity-in p .opa {
      opacity: 0; }
  #Diversity #diversity-in ul li {
    font-size: 0.95em;
    line-height: 2em; }
  #Diversity #diversity-in ol li {
    font-size: 0.9em;
    background-color: #E5E5E5;
    text-align: center;
    line-height: 1.0em;
    padding: 8px 0;
    border-radius: 5px;
    margin-top: 10px; }
  #Diversity .DiversityBox {
    width: 95%;
    margin: 0 auto 60px; }
    @media (min-width: 768px) {
      #Diversity .DiversityBox {
        width: 100%;
        margin: 0 auto 0; } }
    #Diversity .DiversityBox h3 {
      font-size: 1.4em;
      margin-top: 10px; }
      @media (min-width: 768px) {
        #Diversity .DiversityBox h3 {
          font-size: 1.6em;
          margin-top: 20px; } }
    #Diversity .DiversityBox img {
      border-radius: 20px; }
  #Diversity .WelfareBox {
    border-left: 1px solid #999999;
    width: 100%;
    height: 100%;
    padding: 0 15px 10px; }
    @media (min-width: 1250px) {
      #Diversity .WelfareBox {
        padding: 0 30px 10px; } }
    #Diversity .WelfareBox.Last {
      border-right: 1px solid #999999; }
    #Diversity .WelfareBox ul {
      margin-top: 20px; }
      #Diversity .WelfareBox ul li .Tume {
        font-feature-settings: "palt";
        letter-spacing: 0.08em; }
  #Diversity .ScrollBtn {
    position: relative; }
    @media (min-width: 2200px) {
      #Diversity .ScrollBtn {
        display: none; } }
    #Diversity .ScrollBtn .Right {
      right: 10px; }
    #Diversity .ScrollBtn .Left {
      right: 60px; }
    #Diversity .ScrollBtn .Top {
      position: absolute;
      top: -60px; }
      #Diversity .ScrollBtn .Top img {
        width: 40px; }
  #Diversity .diversity-3 {
    margin: 0 0 60px 0; }
    @media (min-width: 1024px) {
      #Diversity .diversity-3 {
        margin: 0 0 100px 0; } }
    @media only screen and (min-width: 1024px) {
      #Diversity .diversity-3 .o-4column .col-xl-4 {
        padding: 0 20px; }
      #Diversity .diversity-3 .o-4column {
        margin: 0 -20px; } }
  #Diversity .diversity-2 {
    margin: 0 0 20px 0; }
    @media (min-width: 1024px) {
      #Diversity .diversity-2 {
        margin: 0 0 100px 0; } }
    #Diversity .diversity-2 h2 {
      font-size: 1.5em;
      line-height: 1.2em;
      margin: 0 0 20px 0; }
      @media (min-width: 768px) {
        #Diversity .diversity-2 h2 {
          font-size: 2.0em;
          margin: 0 0 40px 0; } }
    @media only screen and (min-width: 1024px) {
      #Diversity .diversity-2 .o-6column .col-xl-6 {
        padding: 0 30px; }
      #Diversity .diversity-2 .o-6column {
        margin: 0 -30px; } }
  #Diversity .Welfare {
    overflow-x: auto;
    margin: 0 0 100px 0; }
    #Diversity .Welfare .Welfare-in {
      display: flex; }
    #Diversity .Welfare .WelfareBox ul {
      width: 340px; }
  #Diversity .scroll-area {
    width: 92.5%;
    margin-left: 7.5%; }
    @media (min-width: 1024px) {
      #Diversity .scroll-area {
        width: 95%;
        margin-left: 5%; } }
    @media (min-width: 1600px) {
      #Diversity .scroll-area {
        width: 90%;
        margin-left: 10%; } }
  #Diversity ::-webkit-scrollbar {
    display: none; }
  #Diversity ::-webkit-scrollbar-thumb {
    display: none; }
  #Diversity ::-webkit-scrollbar-track {
    display: none; }
  #Diversity .office {
    margin: 60px auto 0;
    width: 90%; }
    @media (min-width: 1600px) {
      #Diversity .office {
        width: 80%; } }
    #Diversity .office img {
      width: 100%;
      height: auto; }

/*
---------------------------------------------------------------------------------------------------------------------
カンパニー
---------------------------------------------------------------------------------------------------------------------
*/
#company {
  position: relative;
  max-width: 940px;
  width: 90%;
  margin: 0 auto 80px; }
  #company .company-bg {
    position: relative; }
    #company .company-bg img {
      width: 100%;
      height: auto;
      border-radius: 20px; }
    #company .company-bg::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(52, 52, 52, 0.6);
      height: 100%;
      mix-blend-mode: multiply;
      z-index: 10;
      border-radius: 20px; }
  #company .text {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 100; }
    #company .text .text-in {
      text-align: center;
      width: 90%;
      color: #fff; }
      #company .text .text-in h3 {
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        font-size: 1.5em; }
      #company .text .text-in p {
        font-size: 0.9em; }
  #company a:hover .text > .text-in > .btn > img {
    right: 7px; }

/*
---------------------------------------------------------------------------------------------------------------------
エントリー
---------------------------------------------------------------------------------------------------------------------
*/
#entry {
  width: 100%;
  position: relative;
  overflow: hidden; }
  #entry a {
    transition: .5s; }
    #entry a:hover .entry-bg {
      position: relative; }
      #entry a:hover .entry-bg::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        mix-blend-mode: multiply;
        z-index: 10; }
  #entry .entry-bg {
    transition: .5s; }
    #entry .entry-bg img {
      width: 100%;
      height: auto;
      transition: .5s; }
  #entry .entry-text {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center; }
    #entry .entry-text .entry-text-in {
      display: flex;
      z-index: 100; }
      #entry .entry-text .entry-text-in ul {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        animation: infinity-scroll-left 100s infinite linear 0.5s both; }
        #entry .entry-text .entry-text-in ul li {
          width: 1300px;
          height: auto; }
          @media (min-width: 768px) {
            #entry .entry-text .entry-text-in ul li {
              width: 1300px; } }
          #entry .entry-text .entry-text-in ul li img {
            width: 100%;
            vertical-align: bottom; }

#job-mv {
  position: relative;
  margin: 130px auto 0;
  width: 90%; }
  @media (min-width: 1024px) {
    #job-mv {
      margin: 200px auto 0;
      width: 96%; } }
  #job-mv .job-mv-bg img {
    border-radius: 20px; }
  #job-mv .job-mv-bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #797979;
    height: 100%;
    mix-blend-mode: multiply;
    z-index: 10; }
  #job-mv .job-mv-title {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; }
    #job-mv .job-mv-title .job-mv-title-in {
      text-align: center;
      z-index: 10; }
      #job-mv .job-mv-title .job-mv-title-in p {
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        font-size: 1.125em;
        line-height: 1.2em;
        margin: 0 0 20px 0; }
        @media (min-width: 1024px) {
          #job-mv .job-mv-title .job-mv-title-in p {
            font-size: 1.5em; } }
      #job-mv .job-mv-title .job-mv-title-in h1 {
        font-size: 1.8em;
        font-weight: bold;
        line-height: 1.4em;
        margin: 0; }
        @media (min-width: 1024px) {
          #job-mv .job-mv-title .job-mv-title-in h1 {
            font-size: 4.0em; } }
      #job-mv .job-mv-title .job-mv-title-in h3 {
        font-size: 0.9em;
        line-height: 1.8em;
        margin: 30px 0 0 0; }
        @media (min-width: 1024px) {
          #job-mv .job-mv-title .job-mv-title-in h3 {
            font-size: 1.125em;
            margin: 50px 0 0 0; } }
      #job-mv .job-mv-title .job-mv-title-in a.re-btn {
        display: flex;
        justify-content: center;
        margin-top: 20px; }

#contents {
  position: relative;
  max-width: 1300px;
  width: 90%;
  margin: 80px auto 0; }
  @media (min-width: 768px) {
    #contents {
      width: 95%;
      display: flex;
      margin: 100px auto 0; } }
  @media (min-width: 1024px) {
    #contents {
      margin: 160px auto 0; } }
  @media (min-width: 768px) {
    #contents .letter-body {
      position: absolute;
      top: 0;
      left: 30px;
      z-index: 100; } }
  #contents .letter-body .letter-body-in {
    margin-bottom: 60px; }
    @media (min-width: 1250px) {
      #contents .letter-body .letter-body-in {
        margin-bottom: 100px; } }
    #contents .letter-body .letter-body-in .title {
      margin: 0 0 20px 0;
      position: relative; }
      @media (min-width: 1250px) {
        #contents .letter-body .letter-body-in .title {
          margin: 0 0 40px 0; } }
      #contents .letter-body .letter-body-in .title img {
        width: 40px;
        height: auto; }
        @media (min-width: 1250px) {
          #contents .letter-body .letter-body-in .title img {
            width: 60px; } }
        #contents .letter-body .letter-body-in .title img:nth-child(1) {
          position: absolute;
          top: -10px;
          left: -10px;
          z-index: -10; }
          @media (min-width: 1250px) {
            #contents .letter-body .letter-body-in .title img:nth-child(1) {
              left: -20px; } }
      #contents .letter-body .letter-body-in .title h2 {
        font-size: 1.8em;
        line-height: 1.6em;
        position: relative;
        z-index: 10; }
        @media (min-width: 1250px) {
          #contents .letter-body .letter-body-in .title h2 {
            font-size: 2.8em; } }
        #contents .letter-body .letter-body-in .title h2 img:last-child {
          position: relative;
          bottom: -10px;
          left: -20px;
          z-index: -10; }
          @media (min-width: 1250px) {
            #contents .letter-body .letter-body-in .title h2 img:last-child {
              bottom: -20px;
              left: -50px; } }
    #contents .letter-body .letter-body-in p {
      font-size: 0.9em;
      font-weight: bold;
      line-height: 2em;
      margin: 0; }
      @media (min-width: 1250px) {
        #contents .letter-body .letter-body-in p {
          font-size: 1.125em; } }
  @media (min-width: 768px) {
    #contents .photo {
      margin-left: 50%; } }
  #contents .photo img {
    border-radius: 20px;
    margin-bottom: 30px;
    vertical-align: bottom; }

#contents2 {
  max-width: 1300px;
  position: relative;
  width: 90%;
  margin: auto; }
  @media (min-width: 768px) {
    #contents2 {
      margin: 340px auto 0;
      width: 95%; } }
  @media (min-width: 1024px) {
    #contents2 {
      margin: 140px auto 0; } }
  @media (min-width: 1250px) {
    #contents2 {
      margin: 40px auto 0; } }
  #contents2 .back img {
    border-radius: 20px; }
  #contents2 .back::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(121, 121, 121, 0.5);
    height: 100%;
    mix-blend-mode: multiply;
    z-index: 10; }
  #contents2 .contents2-text {
    position: absolute;
    bottom: 3%;
    left: 5%;
    width: 90%;
    z-index: 20; }
    @media (min-width: 1024px) {
      #contents2 .contents2-text {
        bottom: 5%; } }
    #contents2 .contents2-text .title {
      margin-bottom: 20px; }
      #contents2 .contents2-text .title img {
        width: 40px;
        height: auto; }
        @media (min-width: 1024px) {
          #contents2 .contents2-text .title img {
            width: 60px; } }
        #contents2 .contents2-text .title img:nth-child(1) {
          position: absolute;
          top: -10px;
          left: -10px;
          z-index: 10; }
          @media (min-width: 1024px) {
            #contents2 .contents2-text .title img:nth-child(1) {
              left: -20px; } }
      #contents2 .contents2-text .title h2 {
        font-size: 1.5em;
        line-height: 1.6em;
        font-feature-settings: "palt";
        position: relative;
        z-index: 20;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
        @media (min-width: 1024px) {
          #contents2 .contents2-text .title h2 {
            font-size: 2.8em; } }
        #contents2 .contents2-text .title h2 img:last-child {
          position: relative;
          bottom: -10px;
          left: -10px;
          z-index: -10; }
          @media (min-width: 1024px) {
            #contents2 .contents2-text .title h2 img:last-child {
              bottom: -20px;
              left: -50px; } }
    #contents2 .contents2-text p {
      font-size: 0.9em;
      font-weight: bold;
      line-height: 1.8em;
      margin: 0; }
      @media (min-width: 1024px) {
        #contents2 .contents2-text p {
          font-size: 1.125em; } }

#work {
  max-width: 1300px;
  width: 90%;
  margin: auto;
  padding: 60px 0 80px 0; }
  @media (min-width: 768px) {
    #work {
      width: 95%; } }
  @media (min-width: 1024px) {
    #work {
      padding: 80px 0 140px 0; } }
  #work .work-in {
    margin-left: 5%; }
  #work h2 {
    font-size: 1.6em;
    font-weight: bold;
    margin: 0 0 30px 0; }
    @media (min-width: 1024px) {
      #work h2 {
        font-size: 2.3em; } }
  #work .midashi {
    display: flex;
    margin-bottom: 20px; }
    #work .midashi img {
      width: 15px; }
    #work .midashi h3 {
      font-size: 1.0em;
      font-weight: bold;
      line-height: 1.4em;
      margin: 0 0 0 5px; }
      @media (min-width: 1024px) {
        #work .midashi h3 {
          font-size: 1.125em;
          margin: 0 0 0 10px; } }
  #work p {
    font-size: 0.9em;
    line-height: 1.8em;
    margin: 0 0 0 20px; }
    @media (min-width: 1024px) {
      #work p {
        font-size: 1.0em;
        margin: 0 0 0 25px; } }

#recruitment {
  background-color: #fff;
  padding: 50px 0 60px;
  color: #111; }
  @media (min-width: 450px) {
    #recruitment {
      padding: 100px 0 120px; } }
  #recruitment .recruitment-in {
    max-width: 1250px;
    width: 90%;
    margin: auto; }
  #recruitment p {
    font-size: 0.9em;
    margin: 1px 5px 0 2px;
    float: left;
    font-weight: bold; }
    @media (min-width: 450px) {
      #recruitment p {
        margin: 7px 10px 0 2px;
        font-size: 1.125em; } }
  #recruitment h3 {
    font-size: 1.125em;
    border-bottom: 1px solid #333;
    font-weight: bold;
    padding-bottom: 10px; }
    @media (min-width: 450px) {
      #recruitment h3 {
        font-size: 1.75em;
        padding-bottom: 20px; } }
  #recruitment table {
    line-height: 1.6em;
    width: 100%;
    margin: 0px auto 0px; }
    #recruitment table th, #recruitment table td {
      font-size: 0.9em;
      display: block; }
      @media (min-width: 1024px) {
        #recruitment table th, #recruitment table td {
          font-size: 1.0em;
          display: table-cell; } }
    #recruitment table th {
      width: 120px;
      padding-left: 10px;
      vertical-align: top;
      padding-top: 20px; }
      @media (min-width: 450px) {
        #recruitment table th {
          width: 260px;
          border-bottom: 1px solid #D3D3D3; } }
    #recruitment table tr {
      border-bottom: 1px solid #D3D3D3; }
    #recruitment table td {
      text-align: left;
      padding: 20px 10px; }
      #recruitment table td ul {
        margin: 0; }
        #recruitment table td ul li {
          margin: 0; }
          #recruitment table td ul li .tume {
            font-feature-settings: "palt";
            letter-spacing: 0.04em; }
      #recruitment table td a {
        color: #111;
        transition: .5s; }
        #recruitment table td a:hover {
          text-decoration: none;
          color: #444; }

/*キャンペーンボタン*/
.Document-Btn {
  margin-top: 20px; }

.Campaign-Btn a {
  color: #fff;
  display: inline-block;
  width: 200px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
  position: relative;
  font-size: 14px;
  font-weight: 400; }

.Campaign-Btn.Btn2 a {
  background: linear-gradient(to right, rgba(92, 187, 199, 0.99) 0%, #106ae5 100%);
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.16));
  transition: all 3s ease-out;
  transition: .5s;
  transform: scale(1); }

.Campaign-Btn.Btn2 a:hover {
  background: linear-gradient(to right, rgba(102, 197, 209, 0.99) 0%, #146eef 100%);
  color: #fff;
  transform: scale(1.035);
  text-decoration: none; }

.Campaign-Btn.Btn1 a:before, .Campaign-Btn.Btn2 a:before {
  content: "";
  position: absolute;
  top: 45%;
  right: 6px;
  width: 8px;
  height: 1px;
  background: #fff;
  transform: rotate(45deg); }

.Campaign-Btn.Btn1 a:after, .Campaign-Btn.Btn2 a:after {
  content: "";
  position: absolute;
  top: 55%;
  right: 6px;
  width: 8px;
  height: 1px;
  background: #fff;
  transform: rotate(-45deg); }