@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------------------------------------------------------
*/
#mv {
  background-color: #008442;
  position: relative;
  margin-top: 55px; }
  @media (min-width: 768px) {
    #mv {
      margin-top: 60px; } }
  @media (min-width: 1024px) {
    #mv {
      display: flex;
      margin-top: 0; } }
  @media (min-width: 1250px) {
    #mv {
      padding-top: 70px; } }
  #mv .mv-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center; }
    @media (min-width: 1024px) {
      #mv .mv-title {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; } }
    @media (min-width: 1181px) {
      #mv .mv-title {
        top: -40px;
        height: 720px; } }
    @media (min-width: 1250px) {
      #mv .mv-title {
        height: 900px; } }
    #mv .mv-title .mv-title-in {
      width: 90%;
      margin: 10px auto 0; }
      @media (min-width: 768px) {
        #mv .mv-title .mv-title-in {
          width: 60%; } }
      @media (min-width: 1024px) {
        #mv .mv-title .mv-title-in {
          width: 50%;
          margin: 100px auto 0;
          max-width: 780px; } }
      @media (min-width: 1800px) {
        #mv .mv-title .mv-title-in {
          max-width: 800px; } }
      #mv .mv-title .mv-title-in .main-logo {
        width: 100%;
        position: relative;
        z-index: 10; }
        @media (min-width: 768px) {
          #mv .mv-title .mv-title-in .main-logo {
            width: 126%;
            left: -13%; } }
      #mv .mv-title .mv-title-in .main-title {
        position: relative;
        color: #fff;
        margin-top: -10%; }
        @media (min-width: 1024px) {
          #mv .mv-title .mv-title-in .main-title {
            margin-top: -16%; } }
        @media (min-width: 1250px) {
          #mv .mv-title .mv-title-in .main-title {
            margin-top: -16%; } }
        #mv .mv-title .mv-title-in .main-title h1 {
          font-size: 2.0em;
          margin-bottom: 10px; }
          @media (min-width: 1024px) {
            #mv .mv-title .mv-title-in .main-title h1 {
              font-size: 2.5em; } }
          #mv .mv-title .mv-title-in .main-title h1 div {
            line-height: 1.1em; }
        #mv .mv-title .mv-title-in .main-title h2 {
          font-family: 'Montserrat', sans-serif;
          font-size: 1.45em;
          line-height: 1.0em;
          margin-bottom: 20px; }
          @media (min-width: 1024px) {
            #mv .mv-title .mv-title-in .main-title h2 {
              font-size: 2.4em; } }
        #mv .mv-title .mv-title-in .main-title img {
          width: 90%;
          margin: auto; }
        #mv .mv-title .mv-title-in .main-title p {
          font-size: 0.9em;
          line-height: 1.6em;
          margin-top: 20px; }
          @media (min-width: 1024px) {
            #mv .mv-title .mv-title-in .main-title p {
              font-size: 1.125em; } }
  #mv .slide-loop {
    padding: 0;
    overflow: hidden;
    width: 100%; }
    @media (min-width: 1024px) {
      #mv .slide-loop {
        display: flex;
        padding: 0 2%;
        width: 25%; } }
    #mv .slide-loop.left {
      padding-top: 5px; }
      @media (min-width: 1024px) {
        #mv .slide-loop.left {
          padding: 0 0 0 2%; } }
    #mv .slide-loop.right {
      margin-top: 20px;
      padding-bottom: 20px; }
      @media (min-width: 1024px) {
        #mv .slide-loop.right {
          margin: 0 0 0 auto;
          padding: 0 2% 0 0; } }
    #mv .slide-loop .line-box {
      width: 100%; }
      #mv .slide-loop .line-box .line-wrap {
        overflow: hidden;
        display: flex; }
        @media (min-width: 1024px) {
          #mv .slide-loop .line-box .line-wrap {
            display: block;
            height: 100vh;
            max-height: 820px; } }
        @media (min-width: 1181px) {
          #mv .slide-loop .line-box .line-wrap {
            height: 720px; } }
        @media (min-width: 1250px) {
          #mv .slide-loop .line-box .line-wrap {
            height: 900px; } }
        #mv .slide-loop .line-box .line-wrap ul {
          margin: 0;
          display: flex; }
          @media (min-width: 1024px) {
            #mv .slide-loop .line-box .line-wrap ul {
              display: block; } }
          #mv .slide-loop .line-box .line-wrap ul li {
            width: 100px;
            margin-right: 10px; }
            @media (min-width: 768px) {
              #mv .slide-loop .line-box .line-wrap ul li {
                width: 200px; } }
            @media (min-width: 1024px) {
              #mv .slide-loop .line-box .line-wrap ul li {
                width: auto;
                margin: 0 0 20px 0; } }
            @media (min-width: 1600px) {
              #mv .slide-loop .line-box .line-wrap ul li {
                margin: 0 0 25px 0; } }
            #mv .slide-loop .line-box .line-wrap ul li img {
              border-radius: 5px; }
              @media (min-width: 768px) {
                #mv .slide-loop .line-box .line-wrap ul li img {
                  border-radius: 10px; } }
              @media (min-width: 1250px) {
                #mv .slide-loop .line-box .line-wrap ul li img {
                  border-radius: 18px; } }
        #mv .slide-loop .line-box .line-wrap ul.line-type1 {
          animation: infinity-scroll-left1 80s infinite linear 0.5s both; }
        #mv .slide-loop .line-box .line-wrap ul.line-type2 {
          animation: infinity-scroll-left2 80s infinite linear 0.5s both; }
  @media (max-width: 1023px) {
    @keyframes infinity-scroll-left1 {
      from {
        transform: translateX(0); }
      to {
        transform: translateX(-100%); } }
    @keyframes infinity-scroll-left2 {
      from {
        transform: translateX(-100%); }
      to {
        transform: translateX(0); } } }
  @media (min-width: 1024px) {
    @keyframes infinity-scroll-left1 {
      from {
        transform: translateY(0); }
      to {
        transform: translateY(-100%); } }
    @keyframes infinity-scroll-left2 {
      from {
        transform: translateY(-100%); }
      to {
        transform: translateY(0); } } }

/*
---------------------------------------------------------------------------------------------------------------------
中央トラックとは
---------------------------------------------------------------------------------------------------------------------
*/
#about-service {
  position: relative;
  overflow: hidden; }
  #about-service .about-card, #about-service .about-card1, #about-service .about-card2 {
    position: relative; }
    #about-service .about-card::before, #about-service .about-card1::before, #about-service .about-card2::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(62, 76, 123, 0.65);
      height: 100%;
      mix-blend-mode: multiply;
      z-index: 4; }
    @media (min-width: 1250px) {
      #about-service .about-card .tablet, #about-service .about-card1 .tablet, #about-service .about-card2 .tablet {
        display: none; } }
    #about-service .about-card .desktop, #about-service .about-card1 .desktop, #about-service .about-card2 .desktop {
      display: none; }
      @media (min-width: 1250px) {
        #about-service .about-card .desktop, #about-service .about-card1 .desktop, #about-service .about-card2 .desktop {
          display: flex; } }
  #about-service .map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5; }
    @media (min-width: 768px) {
      #about-service .map {
        top: -10%; } }
    #about-service .map ul li:first-child {
      width: 80%;
      margin: auto; }
      @media (min-width: 768px) {
        #about-service .map ul li:first-child {
          width: 250px; } }
      @media (min-width: 1024px) {
        #about-service .map ul li:first-child {
          width: 500px; } }
      @media (min-width: 1250px) {
        #about-service .map ul li:first-child {
          width: 80%; } }
      @media (min-width: 1600px) {
        #about-service .map ul li:first-child {
          width: 100%; } }
    #about-service .map ul li:nth-child(2), #about-service .map ul li:nth-child(3) {
      width: 90%;
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center; }
      @media (min-width: 768px) {
        #about-service .map ul li:nth-child(2), #about-service .map ul li:nth-child(3) {
          width: 250px; } }
      @media (min-width: 1024px) {
        #about-service .map ul li:nth-child(2), #about-service .map ul li:nth-child(3) {
          width: 400px; } }
      @media (min-width: 1250px) {
        #about-service .map ul li:nth-child(2), #about-service .map ul li:nth-child(3) {
          width: 30%; } }
  #about-service p {
    font-size: 0.8em;
    text-align: justify;
    line-height: 1.8em;
    color: #fff;
    margin-top: 10px; }
    @media (min-width: 1024px) {
      #about-service p {
        font-size: 1.0em;
        margin-top: 20px; } }
    @media (min-width: 1400px) {
      #about-service p {
        font-size: 1.125em;
        margin-top: 30px; } }
  #about-service h3 {
    color: #fff; }
  #about-service h2 {
    color: #fff;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6); }
  #about-service .common-btn {
    margin-top: 10px; }
    @media (min-width: 1024px) {
      #about-service .common-btn {
        margin-top: 20px; } }
    @media (min-width: 1400px) {
      #about-service .common-btn {
        margin-top: 30px; } }
  #about-service .about-service-in {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 1800px;
    margin: auto; }
  #about-service .about {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 10;
    width: 80%; }
    @media (min-width: 768px) {
      #about-service .about {
        width: 40%;
        top: 8%; } }
    @media (min-width: 1250px) {
      #about-service .about {
        width: 33%; } }
  #about-service .service {
    position: absolute;
    bottom: 5%;
    right: 5%;
    z-index: 10;
    width: 80%; }
    @media (min-width: 768px) {
      #about-service .service {
        width: 40%;
        bottom: 8%; } }
    @media (min-width: 1250px) {
      #about-service .service {
        width: 33%; } }

/*
---------------------------------------------------------------------------------------------------------------------
採用情報
---------------------------------------------------------------------------------------------------------------------
*/
#recruit {
  max-width: 1200px;
  width: 90%;
  background-color: #008442;
  border-radius: 30px;
  margin: 60px auto; }
  @media (min-width: 768px) {
    #recruit {
      display: flex;
      margin: 120px auto;
      border-radius: 40px; } }
  @media (min-width: 1024px) {
    #recruit {
      border-radius: 60px; } }
  #recruit .recruit-L {
    display: flex;
    align-items: center;
    margin: auto;
    width: 80%;
    padding-top: 50px; }
    @media (min-width: 768px) {
      #recruit .recruit-L {
        width: 50%;
        padding: 40px 0 40px 6%; } }
    @media (min-width: 1250px) {
      #recruit .recruit-L {
        padding: 0 0 0 6%; } }
    #recruit .recruit-L .recruit-L-in p {
      font-size: 0.9em;
      text-align: justify;
      line-height: 1.8em;
      color: #fff;
      margin: 20px 0 0 0; }
      @media (min-width: 768px) {
        #recruit .recruit-L .recruit-L-in p {
          width: 90%; } }
      @media (min-width: 1024px) {
        #recruit .recruit-L .recruit-L-in p {
          font-size: 1.0em;
          margin: 30px 0 0 0; } }
      @media (min-width: 1250px) {
        #recruit .recruit-L .recruit-L-in p {
          font-size: 1.125em; } }
    #recruit .recruit-L .recruit-L-in .btn-area {
      margin-top: 20px; }
      @media (min-width: 1024px) {
        #recruit .recruit-L .recruit-L-in .btn-area {
          margin-top: 60px; } }
      #recruit .recruit-L .recruit-L-in .btn-area .color3 {
        margin-top: 20px; }
  #recruit .recruit-R {
    padding: 0 5%; }
    @media (min-width: 768px) {
      #recruit .recruit-R {
        width: 50%;
        margin: auto 0 0 0;
        padding: 0 4% 0 0; } }
    @media (min-width: 1250px) {
      #recruit .recruit-R {
        padding: 0 5% 0 0; } }
    #recruit .recruit-R ul li:first-child {
      position: relative;
      bottom: -3em; }
      @media (min-width: 1024px) {
        #recruit .recruit-R ul li:first-child {
          bottom: -5em; } }
    #recruit .recruit-R ul li:last-child {
      position: relative;
      z-index: 1; }