@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
メインビジュアル
---------------------------------------------------------------------------------------------------------------------
*/
#job-mv {
  position: relative; }
  #job-mv.yakuzaishi {
    background: linear-gradient(135deg, #33A9FF, #6450FF, #7234FF); }
  #job-mv.sogo {
    background: linear-gradient(135deg, #FF8133, #FF2E36, #F53A90); }
  #job-mv::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../../img/new/common/Screen.webp");
    background-size: auto;
    height: 100%;
    mix-blend-mode: overlay;
    z-index: 1; }
  #job-mv .mv-in {
    position: relative;
    max-width: 1800px;
    margin: auto;
    width: 90%;
    height: 720px;
    z-index: 10; }
    @media (min-width: 768px) {
      #job-mv .mv-in {
        width: 95%;
        height: auto; } }
    @media (min-width: 1600px) {
      #job-mv .mv-in {
        width: 90%; } }
    #job-mv .mv-in .mv-contents {
      padding-top: 110px; }
      @media (min-width: 768px) {
        #job-mv .mv-in .mv-contents {
          position: absolute;
          top: 60px;
          bottom: 0;
          left: 2%;
          align-items: center;
          display: flex;
          padding-top: 0; } }
      @media (min-width: 1250px) {
        #job-mv .mv-in .mv-contents {
          top: 40px;
          left: 3%; } }
      #job-mv .mv-in .mv-contents .mv-contents-in {
        position: relative;
        z-index: 100; }
        #job-mv .mv-in .mv-contents .mv-contents-in .copy {
          color: #fff; }
          #job-mv .mv-in .mv-contents .mv-contents-in .copy h2 {
            font-size: 1.0em;
            line-height: 1.2em;
            display: inline-block;
            border: 2px solid #fff;
            padding: 5px 20px;
            border-radius: 40px; }
            @media (min-width: 1024px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h2 {
                font-size: 1.2em;
                padding: 10px 30px;
                border: 3px solid #fff; } }
            @media (min-width: 1250px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h2 {
                font-size: 1.4em; } }
          #job-mv .mv-in .mv-contents .mv-contents-in .copy h1 {
            font-size: 2.2em;
            line-height: 1.2em;
            font-feature-settings: "palt";
            letter-spacing: 0.04em;
            margin-top: 5px; }
            @media (min-width: 768px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h1 {
                font-size: 2.5em; } }
            @media (min-width: 1024px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h1 {
                font-size: 3.0em; } }
            @media (min-width: 1250px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h1 {
                font-size: 4.0em;
                margin-top: 20px; } }
          #job-mv .mv-in .mv-contents .mv-contents-in .copy h3 {
            font-size: 1.8em;
            line-height: 1.3em;
            margin-top: 20px; }
            @media (min-width: 768px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h3 {
                font-size: 2.0em; } }
            @media (min-width: 1024px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h3 {
                font-size: 2.0em;
                margin-top: 40px; } }
            @media (min-width: 1250px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy h3 {
                font-size: 3.0em; } }
          #job-mv .mv-in .mv-contents .mv-contents-in .copy p {
            font-size: 0.9em;
            text-align: justify;
            line-height: 1.8em;
            margin-top: 10px; }
            @media (min-width: 768px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy p {
                width: 50%; } }
            @media (min-width: 1024px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy p {
                font-size: 1.0em; } }
            @media (min-width: 1250px) {
              #job-mv .mv-in .mv-contents .mv-contents-in .copy p {
                font-size: 1.125em;
                margin-top: 15px; } }
    #job-mv .mv-in ul.photo {
      position: absolute;
      bottom: 0;
      z-index: 10;
      margin-top: 2px; }
      @media (min-width: 768px) {
        #job-mv .mv-in ul.photo {
          position: relative; } }
      #job-mv .mv-in ul.photo li {
        width: 100%; }
        @media (min-width: 768px) {
          #job-mv .mv-in ul.photo li {
            width: 55%;
            margin-left: 45%;
            padding-top: 120px; } }
        @media (min-width: 1250px) {
          #job-mv .mv-in ul.photo li {
            width: 50%;
            margin-left: 50%; } }
        @media (min-width: 1600px) {
          #job-mv .mv-in ul.photo li {
            padding-top: 5%; } }

#page-menu {
  width: 95%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 20px; }
  @media (min-width: 768px) {
    #page-menu {
      display: flex;
      justify-content: center;
      top: -25px; } }
  #page-menu .page-menu-in {
    border-radius: 60px;
    padding: 15px 10px 15px 0;
    text-align: center; }
    @media (min-width: 768px) {
      #page-menu .page-menu-in {
        display: flex;
        align-items: center;
        padding: 0 40px;
        height: 50px; } }
    #page-menu .page-menu-in.aqua {
      background-color: #074CCE; }
    #page-menu .page-menu-in.rouge {
      background-color: #E60012; }
    #page-menu .page-menu-in ul {
      margin-bottom: 5px; }
      @media (min-width: 768px) {
        #page-menu .page-menu-in ul {
          margin: 0 20px 0 0; } }
      @media (min-width: 1024px) {
        #page-menu .page-menu-in ul {
          margin: 0 40px 0 0; } }
      #page-menu .page-menu-in ul:last-child {
        margin: 0; }
      #page-menu .page-menu-in ul li {
        display: inline-block;
        margin-right: 20px; }
        @media (min-width: 1024px) {
          #page-menu .page-menu-in ul li {
            margin-right: 40px; } }
        #page-menu .page-menu-in ul li:last-child {
          margin-right: 0; }
        #page-menu .page-menu-in ul li a {
          position: relative;
          font-size: 0.8em;
          line-height: 1.4em;
          color: #fff; }
          @media (min-width: 768px) {
            #page-menu .page-menu-in ul li a {
              line-height: 1.2em; } }
          @media (min-width: 1024px) {
            #page-menu .page-menu-in ul li a {
              font-size: 1.0em; } }
          #page-menu .page-menu-in ul li a::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; }
          #page-menu .page-menu-in ul li a:hover::after {
            transform-origin: left top;
            transform: scale(1, 1); }
          #page-menu .page-menu-in ul li a::before {
            content: '';
            position: absolute;
            right: -10px;
            top: 6px;
            width: 6px;
            height: 6px;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            transform: rotate(135deg); }
            @media (min-width: 768px) {
              #page-menu .page-menu-in ul li a::before {
                right: -10px;
                top: 6px; } }
            @media (min-width: 1024px) {
              #page-menu .page-menu-in ul li a::before {
                top: 8px; } }

/*
---------------------------------------------------------------------------------------------------------------------
TGNの薬剤師とは
---------------------------------------------------------------------------------------------------------------------
*/
#job-about {
  position: relative;
  background-color: #fff;
  top: 0;
  z-index: 10;
  padding: 160px 0 80px; }
  @media (min-width: 768px) {
    #job-about {
      padding: 120px 0 80px; } }
  @media (min-width: 1200px) {
    #job-about {
      padding: 160px 0 140px; } }
  #job-about .prologue {
    margin-top: 30px; }
    @media (min-width: 768px) {
      #job-about .prologue {
        display: flex;
        margin-top: 60px; } }
    #job-about .prologue .txt {
      padding: 0 5%; }
      @media (min-width: 768px) {
        #job-about .prologue .txt {
          width: 50%;
          margin-top: -8px;
          padding: 0 2% 0 5%; } }
      #job-about .prologue .txt h3 {
        font-size: 1.125em;
        line-height: 1.8em; }
        @media (min-width: 1024px) {
          #job-about .prologue .txt h3 {
            font-size: 1.50em; } }
        @media (min-width: 1200px) {
          #job-about .prologue .txt h3 {
            font-size: 1.85em; } }
      #job-about .prologue .txt ul {
        margin-top: 20px; }
        @media (min-width: 1200px) {
          #job-about .prologue .txt ul {
            margin-top: 40px;
            padding-right: 10%; } }
        #job-about .prologue .txt ul li {
          margin-bottom: 20px; }
          @media (min-width: 1200px) {
            #job-about .prologue .txt ul li {
              margin-bottom: 40px; } }
          #job-about .prologue .txt ul li:last-child {
            margin-bottom: 0; }
          #job-about .prologue .txt ul li h4 {
            font-size: 1.125em;
            text-align: justify;
            color: #E60012; }
            @media (min-width: 768px) {
              #job-about .prologue .txt ul li h4 {
                font-size: 1.35em; } }
            @media (min-width: 1200px) {
              #job-about .prologue .txt ul li h4 {
                font-size: 1.75em; } }
          #job-about .prologue .txt ul li p {
            font-size: 0.9em;
            font-feature-settings: "palt";
            letter-spacing: 0.04em;
            line-height: 1.6em;
            text-align: justify;
            margin: 10px 0 0 0; }
            @media (min-width: 768px) {
              #job-about .prologue .txt ul li p {
                font-size: 1.0em; } }
            @media (min-width: 1200px) {
              #job-about .prologue .txt ul li p {
                font-size: 1.125em; } }
    #job-about .prologue .photo {
      margin-top: 20px; }
      @media (min-width: 768px) {
        #job-about .prologue .photo {
          width: 50%;
          margin-top: 0; } }
      #job-about .prologue .photo ul {
        display: flex; }
        #job-about .prologue .photo ul li {
          width: 50%; }
          #job-about .prologue .photo ul li:first-child {
            padding-right: 5px; }
          #job-about .prologue .photo ul li:last-child {
            padding-left: 5px; }
  #job-about .job-about-card {
    padding: 0 0 50px 4%;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 60px; }
    @media (min-width: 768px) {
      #job-about .job-about-card {
        padding: 0 0 60px 5%; } }
    @media (min-width: 1200px) {
      #job-about .job-about-card {
        margin-top: 120px; } }
    #job-about .job-about-card .swiper-slide {
      width: 240px;
      margin: 0 30px 0 0; }
      @media (min-width: 768px) {
        #job-about .job-about-card .swiper-slide {
          width: 340px;
          margin: 0 40px 0 0; } }
      @media (min-width: 1250px) {
        #job-about .job-about-card .swiper-slide {
          width: 360px;
          margin: 0 60px 0 0; } }
      #job-about .job-about-card .swiper-slide:last-child {
        margin-right: 3%; }
    #job-about .job-about-card .about-box.aqua {
      border-top: 2px solid #074CCE; }
      #job-about .job-about-card .about-box.aqua h6 {
        color: #074CCE; }
    #job-about .job-about-card .about-box.rouge {
      border-top: 2px solid #E60012; }
      #job-about .job-about-card .about-box.rouge h6 {
        color: #E60012; }
    #job-about .job-about-card .about-box h6 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-style: italic;
      font-size: 1.8em;
      line-height: 1.0em;
      margin-top: 15px; }
      @media (min-width: 1024px) {
        #job-about .job-about-card .about-box h6 {
          font-size: 2.4em;
          margin-top: 30px; } }
    #job-about .job-about-card .about-box h3 {
      font-size: 1.25em;
      line-height: 1.4em;
      margin-top: 15px; }
      @media (min-width: 1024px) {
        #job-about .job-about-card .about-box h3 {
          font-size: 1.75em;
          margin-top: 30px; } }
    #job-about .job-about-card .about-box p {
      font-size: 0.9em;
      line-height: 1.8em;
      text-align: justify;
      margin-top: 10px; }
      @media (min-width: 1024px) {
        #job-about .job-about-card .about-box p {
          font-size: 1.125em;
          margin-top: 20px; } }
    #job-about .job-about-card .swiper-button-next, #job-about .job-about-card .swiper-container-rtl .swiper-button-prev {
      top: unset;
      bottom: 0;
      right: calc(50% - 100px); }
      @media (min-width: 1250px) {
        #job-about .job-about-card .swiper-button-next, #job-about .job-about-card .swiper-container-rtl .swiper-button-prev {
          right: calc(50% - 80px); } }
    #job-about .job-about-card .swiper-button-prev, #job-about .job-about-card .swiper-container-rtl .swiper-button-next {
      top: unset;
      bottom: 0;
      left: calc(50% - 100px); }
      @media (min-width: 1250px) {
        #job-about .job-about-card .swiper-button-prev, #job-about .job-about-card .swiper-container-rtl .swiper-button-next {
          left: calc(50% - 80px); } }
    #job-about .job-about-card .swiper-pagination {
      left: 0;
      right: 0;
      bottom: 10px;
      color: #fff; }
    #job-about .job-about-card .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #BDBCB6; }
    #job-about .job-about-card.aqua .swiper-pagination-bullet-active {
      opacity: 1;
      background-color: #0B46C9; }
    #job-about .job-about-card.rouge .swiper-pagination-bullet-active {
      opacity: 1;
      background-color: #E60012; }

/*
---------------------------------------------------------------------------------------------------------------------
薬剤師の仕事を知る
---------------------------------------------------------------------------------------------------------------------
*/
#job-know {
  position: relative;
  z-index: 10;
  border-radius: 10px;
  margin-top: -20px;
  padding: 20px 0 60px; }
  @media (min-width: 768px) {
    #job-know {
      padding: 80px 0 60px; } }
  @media (min-width: 1200px) {
    #job-know {
      border-radius: 20px;
      margin-top: -40px;
      padding: 100px 0; } }
  #job-know.aqua {
    background-color: #EAF1FF; }
  #job-know.rouge {
    background: linear-gradient(to bottom, #FFEDE2, #FFDEE1, #FFDEF9); }
  #job-know .kazari {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    opacity: 0.08;
    border-top-left-radius: 10px; }
    @media (min-width: 1024px) {
      #job-know .kazari {
        border-top-left-radius: 20px; } }
  #job-know .know-prologue {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
    width: 90%; }
    @media (min-width: 768px) {
      #job-know .know-prologue {
        display: flex; } }
    #job-know .know-prologue .know-title {
      margin: 40px 0 0 0; }
      @media (min-width: 768px) {
        #job-know .know-prologue .know-title {
          width: 60%;
          margin: 0 0 0 0; } }
      @media (min-width: 1200px) {
        #job-know .know-prologue .know-title {
          margin: 60px 0 0 0; } }
      #job-know .know-prologue .know-title .job-title {
        margin-left: -5%; }
        #job-know .know-prologue .know-title .job-title img {
          left: 0; }
      #job-know .know-prologue .know-title .txt {
        padding-right: 5%;
        margin-top: 20px; }
        #job-know .know-prologue .know-title .txt p {
          font-size: 1.0em;
          line-height: 1.6em; }
          @media (min-width: 768px) {
            #job-know .know-prologue .know-title .txt p {
              font-size: 1.125em; } }
          @media (min-width: 1200px) {
            #job-know .know-prologue .know-title .txt p {
              font-size: 1.25em; } }
    #job-know .know-prologue .photo {
      width: 60%;
      position: relative;
      margin: 40px 0 0 40%; }
      @media (min-width: 768px) {
        #job-know .know-prologue .photo {
          width: 40%;
          margin: 0; } }
      #job-know .know-prologue .photo ul {
        position: absolute;
        top: 0;
        left: -110px; }
        @media (min-width: 768px) {
          #job-know .know-prologue .photo ul {
            top: -50px;
            left: -80px; } }
        @media (min-width: 1200px) {
          #job-know .know-prologue .photo ul {
            top: 0; } }
        #job-know .know-prologue .photo ul.aqua li {
          color: #064CCE; }
        #job-know .know-prologue .photo ul.rouge li {
          color: #E60012; }
        #job-know .know-prologue .photo ul li {
          position: relative; }
          #job-know .know-prologue .photo ul li p {
            font-size: 0.8em;
            font-weight: 700;
            background-color: #fff;
            border-radius: 40px;
            display: inline-block;
            line-height: 1.2em;
            text-align: center;
            padding: 8px 16px; }
            @media (min-width: 768px) {
              #job-know .know-prologue .photo ul li p {
                font-size: 0.9em; } }
            @media (min-width: 1200px) {
              #job-know .know-prologue .photo ul li p {
                font-size: 1.0em; } }
          #job-know .know-prologue .photo ul li:first-child {
            top: 0; }
          #job-know .know-prologue .photo ul li:last-child {
            top: -2px;
            left: 15%; }
  #job-know .movie-area {
    max-width: 1360px;
    margin: 20px auto 0;
    width: 90%; }
    @media (min-width: 768px) {
      #job-know .movie-area {
        margin: 60px auto 0; } }
    @media (min-width: 1200px) {
      #job-know .movie-area {
        margin: 100px auto 0; } }
    #job-know .movie-area .movie-box {
      margin-bottom: 60px; }
      @media (min-width: 768px) {
        #job-know .movie-area .movie-box {
          display: flex; } }
      @media (min-width: 1200px) {
        #job-know .movie-area .movie-box {
          margin-bottom: 120px; } }
      #job-know .movie-area .movie-box:last-child {
        margin-bottom: 0; }
      #job-know .movie-area .movie-box .photo {
        position: relative; }
        @media (min-width: 768px) {
          #job-know .movie-area .movie-box .photo {
            width: 50%;
            height: 100%; } }
        @media (min-width: 1200px) {
          #job-know .movie-area .movie-box .photo {
            width: 60%; } }
        #job-know .movie-area .movie-box .photo .thumbnail {
          position: relative; }
          #job-know .movie-area .movie-box .photo .thumbnail img {
            border-radius: 10px; }
            @media (min-width: 1024px) {
              #job-know .movie-area .movie-box .photo .thumbnail img {
                border-radius: 15px; } }
      #job-know .movie-area .movie-box .txt-area {
        margin-top: 10px; }
        @media (min-width: 768px) {
          #job-know .movie-area .movie-box .txt-area {
            width: 50%;
            padding-left: 5%;
            margin-top: 0; } }
        @media (min-width: 1200px) {
          #job-know .movie-area .movie-box .txt-area {
            width: 40%; } }
        #job-know .movie-area .movie-box .txt-area.aqua h4, #job-know .movie-area .movie-box .txt-area.aqua h2 {
          color: #064CCE; }
        #job-know .movie-area .movie-box .txt-area.aqua ul li::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.2em;
          width: 16px;
          height: 16px;
          background: url("../../img/parts/check-1.svg") no-repeat center/contain; }
        #job-know .movie-area .movie-box .txt-area.rouge h4, #job-know .movie-area .movie-box .txt-area.rouge h2 {
          color: #E60012; }
        #job-know .movie-area .movie-box .txt-area.rouge ul li::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.2em;
          width: 16px;
          height: 16px;
          background: url("../../img/parts/check-2.svg") no-repeat center/contain; }
        #job-know .movie-area .movie-box .txt-area h4 {
          font-size: 1.0em;
          line-height: 1.2em;
          margin: 0 0 5px 0; }
          @media (min-width: 768px) {
            #job-know .movie-area .movie-box .txt-area h4 {
              font-size: 1.125em; } }
          @media (min-width: 1200px) {
            #job-know .movie-area .movie-box .txt-area h4 {
              font-size: 1.375em;
              margin: 0 0 10px 0; } }
        #job-know .movie-area .movie-box .txt-area h2 {
          font-size: 1.5em;
          line-height: 1.15em; }
          @media (min-width: 768px) {
            #job-know .movie-area .movie-box .txt-area h2 {
              font-size: 2.0em; } }
          @media (min-width: 1200px) {
            #job-know .movie-area .movie-box .txt-area h2 {
              font-size: 3.75em; } }
        #job-know .movie-area .movie-box .txt-area ul {
          margin-top: 20px; }
          @media (min-width: 768px) {
            #job-know .movie-area .movie-box .txt-area ul {
              margin-top: 30px; } }
          @media (min-width: 1200px) {
            #job-know .movie-area .movie-box .txt-area ul {
              margin-top: 40px; } }
          #job-know .movie-area .movie-box .txt-area ul li {
            position: relative;
            font-size: 0.8em;
            padding-left: 20px;
            width: calc(100% - 30px);
            margin-bottom: 5px; }
            @media (min-width: 768px) {
              #job-know .movie-area .movie-box .txt-area ul li {
                font-size: 1.0em; } }
            @media (min-width: 1200px) {
              #job-know .movie-area .movie-box .txt-area ul li {
                font-size: 1.125em;
                margin-bottom: 12px; } }
            #job-know .movie-area .movie-box .txt-area ul li:last-child {
              margin-bottom: 0; }
        #job-know .movie-area .movie-box .txt-area .detail-btn {
          margin-top: 10px;
          display: flex;
          justify-content: flex-end; }
          @media (min-width: 768px) {
            #job-know .movie-area .movie-box .txt-area .detail-btn {
              margin-top: 30px;
              justify-content: flex-start; } }

/*
---------------------------------------------------------------------------------------------------------------------
採用資料を見る
---------------------------------------------------------------------------------------------------------------------
*/
.material {
  position: relative;
  max-width: 1360px;
  margin: 60px auto 40px;
  width: 90%;
  background-color: #fff;
  padding: 30px 0;
  border-radius: 10px; }
  @media (min-width: 1024px) {
    .material {
      border-radius: 20px;
      padding: 60px 0;
      margin: 100px auto 100px; } }
  .material .guide-slide {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    width: 90%; }
    .material .guide-slide .title.aqua h2 {
      border-left: 5px solid #064CCE; }
    .material .guide-slide .title.rouge h2 {
      border-left: 5px solid #E60012; }
    .material .guide-slide .title h2 {
      font-size: 1.5em;
      line-height: 1.4em;
      padding-left: 10px; }
      @media (min-width: 768px) {
        .material .guide-slide .title h2 {
          font-size: 2.0em; } }
      @media (min-width: 1200px) {
        .material .guide-slide .title h2 {
          font-size: 2.25em;
          padding-left: 15px; } }
    .material .guide-slide .title p {
      font-size: 0.9em;
      line-height: 1.4em;
      margin: 10px 0 0 0; }
      @media (min-width: 768px) {
        .material .guide-slide .title p {
          font-size: 1.0em; } }
      @media (min-width: 1200px) {
        .material .guide-slide .title p {
          font-size: 1.125em; } }
    .material .guide-slide .material-card {
      margin: 20px auto 0;
      overflow: hidden;
      position: relative; }
      @media (min-width: 768px) {
        .material .guide-slide .material-card {
          margin: 40px auto 0; } }
      .material .guide-slide .material-card article {
        padding-bottom: 50px; }
        @media (min-width: 768px) {
          .material .guide-slide .material-card article {
            padding-bottom: 60px; } }
        .material .guide-slide .material-card article img {
          border-radius: 10px; }
          @media (min-width: 1024px) {
            .material .guide-slide .material-card article img {
              border-radius: 20px; } }
    .material .guide-slide .swiper-button-prev, .material .guide-slide .swiper-button-next {
      top: inherit;
      bottom: 0;
      left: 50px; }
    .material .guide-slide .swiper-button-prev {
      left: 0; }
    .material .guide-slide .swiper-pagination {
      right: 0;
      left: inherit;
      bottom: 0;
      color: #000;
      font-weight: bold; }

/*
---------------------------------------------------------------------------------------------------------------------
先輩社員の本音　ショート動画
---------------------------------------------------------------------------------------------------------------------
*/
#shorts {
  background-color: #fff;
  padding: 60px 0; }
  @media (min-width: 1024px) {
    #shorts {
      padding: 140px 0; } }

/*
---------------------------------------------------------------------------------------------------------------------
人を知る
---------------------------------------------------------------------------------------------------------------------
*/
#people-know {
  position: relative;
  padding: 40px 0 60px;
  border-radius: 10px; }
  @media (min-width: 1024px) {
    #people-know {
      padding: 80px 0; } }
  @media (min-width: 1200px) {
    #people-know {
      border-radius: 20px;
      padding: 100px 0; } }
  #people-know::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../../img/new/common/Screen.webp");
    background-size: auto;
    mix-blend-mode: overlay;
    z-index: 1; }
  #people-know.sogo {
    background: linear-gradient(135deg, #FF8133, #FF2E36, #F53A90); }
  #people-know.yakuzai {
    background: linear-gradient(135deg, #33A9FF, #6450FF, #7234FF); }
  #people-know .common-title {
    margin-top: 40px; }
  #people-know .know-card {
    margin-top: 20px; }
    @media (min-width: 1024px) {
      #people-know .know-card {
        margin-top: 30px; } }
  #people-know .know-box {
    padding: 0 40px; }
    @media (min-width: 1024px) {
      #people-know .know-box {
        padding: 0 20px; } }
    @media (min-width: 1200px) {
      #people-know .know-box {
        padding: 0 30px; } }
    @media (min-width: 1600px) {
      #people-know .know-box {
        padding: 0 60px; } }

/*
---------------------------------------------------------------------------------------------------------------------
働き方を知る
---------------------------------------------------------------------------------------------------------------------
*/
#work, #recruit {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  width: 90%;
  padding: 80px 0 0; }
  @media (min-width: 1024px) {
    #work, #recruit {
      padding: 100px 0 0; } }
  @media (min-width: 1200px) {
    #work, #recruit {
      padding: 140px 0 0; } }
  #work .common-title, #recruit .common-title {
    margin-left: -5%; }
  #work.recruit, #recruit.recruit {
    padding: 40px 0 80px; }
    @media (min-width: 1024px) {
      #work.recruit, #recruit.recruit {
        padding: 80px 0 140px; } }
    @media (min-width: 1200px) {
      #work.recruit, #recruit.recruit {
        padding: 100px 0; } }
  #work ul.work-in, #recruit ul.work-in {
    margin-top: 40px; }
    @media (min-width: 1024px) {
      #work ul.work-in, #recruit ul.work-in {
        margin-top: 80px; } }
    #work ul.work-in li, #recruit ul.work-in li {
      margin-bottom: 40px; }
      @media (min-width: 768px) {
        #work ul.work-in li, #recruit ul.work-in li {
          display: flex;
          align-items: center;
          margin-bottom: 60px; } }
      #work ul.work-in li:last-child, #recruit ul.work-in li:last-child {
        margin-bottom: 0; }
      @media (min-width: 768px) {
        #work ul.work-in li .photo, #recruit ul.work-in li .photo {
          width: 250px; } }
      @media (min-width: 1200px) {
        #work ul.work-in li .photo, #recruit ul.work-in li .photo {
          width: 350px; } }
      #work ul.work-in li .photo img, #recruit ul.work-in li .photo img {
        border-radius: 10px; }
        @media (min-width: 1024px) {
          #work ul.work-in li .photo img, #recruit ul.work-in li .photo img {
            border-radius: 20px; } }
      #work ul.work-in li .contact, #recruit ul.work-in li .contact {
        margin-top: 20px; }
        @media (min-width: 768px) {
          #work ul.work-in li .contact, #recruit ul.work-in li .contact {
            width: calc(100% - 250px); } }
        @media (min-width: 1200px) {
          #work ul.work-in li .contact, #recruit ul.work-in li .contact {
            width: calc(100% - 350px);
            display: flex;
            align-items: center;
            justify-content: space-between; } }
        @media (min-width: 768px) {
          #work ul.work-in li .contact .txt, #recruit ul.work-in li .contact .txt {
            padding-left: 5%; } }
        @media (min-width: 1024px) {
          #work ul.work-in li .contact .txt, #recruit ul.work-in li .contact .txt {
            width: calc(100% - 240px); } }
        #work ul.work-in li .contact .txt h3, #recruit ul.work-in li .contact .txt h3 {
          font-size: 1.125em;
          line-height: 1.2em; }
          @media (min-width: 768px) {
            #work ul.work-in li .contact .txt h3, #recruit ul.work-in li .contact .txt h3 {
              font-size: 1.35em; } }
          @media (min-width: 1200px) {
            #work ul.work-in li .contact .txt h3, #recruit ul.work-in li .contact .txt h3 {
              font-size: 1.75em; } }
        #work ul.work-in li .contact .txt p, #recruit ul.work-in li .contact .txt p {
          font-size: 0.9em;
          line-height: 1.6em;
          margin: 10px 0 0 0; }
          @media (min-width: 768px) {
            #work ul.work-in li .contact .txt p, #recruit ul.work-in li .contact .txt p {
              font-size: 1.0em; } }
          @media (min-width: 1200px) {
            #work ul.work-in li .contact .txt p, #recruit ul.work-in li .contact .txt p {
              font-size: 1.125em;
              margin: 20px 0 0 0; } }
        #work ul.work-in li .contact .detail-btn, #recruit ul.work-in li .contact .detail-btn {
          display: flex;
          justify-content: flex-end;
          margin: 10px 0 0 0; }
          @media (min-width: 1200px) {
            #work ul.work-in li .contact .detail-btn, #recruit ul.work-in li .contact .detail-btn {
              justify-content: flex-start;
              margin: 0 0 0 0; } }

#special .common-slide-card {
  padding: 0 0 60px 4%;
  position: relative;
  overflow: hidden;
  width: 100%; }
  @media (min-width: 768px) {
    #special .common-slide-card {
      padding: 0 0 80px 5%; } }
  #special .common-slide-card .swiper-slide {
    width: 250px;
    margin: 0 15px 0 0; }
    @media (min-width: 768px) {
      #special .common-slide-card .swiper-slide {
        width: 280px;
        margin: 0 20px 0 0; } }
    @media (min-width: 1250px) {
      #special .common-slide-card .swiper-slide {
        width: 300px;
        margin: 0 30px 0 0; } }
    #special .common-slide-card .swiper-slide:last-child {
      margin-right: 3%; }
  #special .common-slide-card .swiper-button-next, #special .common-slide-card .swiper-container-rtl .swiper-button-prev {
    top: unset;
    bottom: 0;
    right: calc(50% - 100px); }
    @media (min-width: 1250px) {
      #special .common-slide-card .swiper-button-next, #special .common-slide-card .swiper-container-rtl .swiper-button-prev {
        right: calc(50% - 80px); } }
  #special .common-slide-card .swiper-button-prev, #special .common-slide-card .swiper-container-rtl .swiper-button-next {
    top: unset;
    bottom: 0;
    left: calc(50% - 100px); }
    @media (min-width: 1250px) {
      #special .common-slide-card .swiper-button-prev, #special .common-slide-card .swiper-container-rtl .swiper-button-next {
        left: calc(50% - 80px); } }
  #special .common-slide-card .swiper-pagination {
    left: 0;
    right: 0;
    bottom: 10px;
    color: #fff; }
  #special .common-slide-card .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #BDBCB6; }
  #special .common-slide-card.aqua .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #0B46C9; }
  #special .common-slide-card.rouge .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: #E60012; }
  @media (min-width: 1024px) {
    #special .common-slide-card.career .swiper-pagination {
      display: none; }
    #special .common-slide-card.career .swiper-button-prev, #special .common-slide-card.career .swiper-button-next {
      display: none; } }