@charset "UTF-8";
/*******　仕事　*******/
.job {
  width: 100%;
  overflow-x: hidden; }
  .job .keyvisual {
    width: 100vw;
    aspect-ratio: 390 / 400;
    background-image: url("../../job/img/job_kv_sp.jpg");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media only screen and (min-width: 769px) {
      .job .keyvisual {
        width: 100%;
        aspect-ratio: 1920 / 998;
        background-image: url("../../job/img/job_kv_pc.jpg"); } }
  .job .keyvisual-inner {
    width: 100vw;
    padding-top: calc(115 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .job .keyvisual-inner {
        width: 100%;
        padding-top: calc(375 / 1920 * 100vw); } }
  .job .keyvisual-inner-logo {
    width: calc(330 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .job .keyvisual-inner-logo {
        width: calc(858 / 1920 * 100vw); } }
  .job .keyvisual-inner-lead {
    width: calc(370 / 390 * 100vw);
    margin: calc(35 / 390 * 100vw) auto 0;
    font-size: calc(14 / 390 * 100vw);
    font-weight: 600;
    line-height: 1.7;
    text-align: center; }
    @media only screen and (min-width: 769px) {
      .job .keyvisual-inner-lead {
        width: calc(858 / 1920 * 100vw);
        margin: calc(95 / 1920 * 100vw) auto 0;
        font-size: calc(35 / 1920 * 100vw);
        line-height: 1.65;
        filter: drop-shadow(0 0 5px #FFF) drop-shadow(0 0 3px #FFF) drop-shadow(0 0 5px #FFF); } }
  .job .outline {
    width: 100%;
    position: relative;
    z-index: 1;
    padding: calc(47 / 390 * 100vw) 0 calc(240 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .job .outline {
        margin: calc(0 / 1080 * 100vw) auto 0;
        padding: calc(125 / 1080 * 100vw) 0 calc(293 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .job .outline {
        margin: 0px auto 0;
        padding: 125px 0 293px; } }
    @media only screen and (min-width: 1981px) {
      .job .outline {
        margin: 0px auto 0; } }
  .job .page-title {
    position: absolute;
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: calc(340 / 390 * 100vw);
    height: calc(62 / 390 * 100vw);
    margin: auto;
    top: calc(-60 / 390 * 100vw);
    left: 0;
    right: 0; }
    @media only screen and (min-width: 769px) {
      .job .page-title {
        width: calc(960 / 1080 * 100vw);
        height: calc(110 / 1080 * 100vw);
        top: calc(-60 /1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .job .page-title {
        width: 960px;
        height: 110px;
        top: -60px; } }
  .job .outline-inner {
    width: calc(300 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .job .outline-inner {
        width: calc(878 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .job .outline-inner {
        width: 878px; } }
  .job .outline-inner-text {
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .job .outline-inner-text {
        width: 37em;
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .job .outline-inner-text {
        margin: 0 auto 0; } }
  .job .block01 {
    position: relative;
    z-index: 100;
    width: 100vw;
    background-image: url("../../job/img/bg_lpink_sp.png"), linear-gradient(transparent, transparent 50%, #fcf0f3 50% 100%);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    margin: calc(-170 / 390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .job .block01 {
        background-image: url("../../job/img/bg_lpink_pc.png"), linear-gradient(transparent, transparent 50%, #fcf0f3 50% 100%);
        width: 100%;
        margin: calc(-210 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .job .block01 {
        background-size: auto auto;
        background-repeat: repeat-x;
        margin: -210px auto 0; } }
  .job .block01-inner {
    margin: 0 auto;
    padding: calc(0 / 390 * 100vw) 0 calc(154 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .job .block01-inner {
        width: 100%;
        padding: calc(0 / 1080 * 100vw) 0 calc(232 / 1080 * 100vw);
        top: calc(-210 / 1080 * 100vw);
        left: 0;
        right: 0;
        margin: auto; } }
    @media only screen and (min-width: 1080px) {
      .job .block01-inner {
        padding: 0px 0 232px;
        top: -210px; } }
  .job .job-list {
    width: calc(350 / 390 * 100vw);
    margin: calc(30 / 390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .job .job-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: calc(960 / 1080 * 100vw);
        margin: calc(46 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .job .job-list {
        width: 960px;
        margin: 46px auto 0; } }
    .job .job-list li {
      background-color: #FFF !important;
      width: calc(350 / 390 * 100vw);
      margin-bottom: calc(30 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .job .job-list li {
          width: calc(464 / 1080 * 100vw);
          margin-bottom: calc(32 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .job .job-list li {
          width: 464px;
          margin-bottom: 32px; } }
      .job .job-list li a {
        width: 100%;
        display: flex;
        justify-content: space-between; }
        .job .job-list li a:hover {
          text-decoration: none;
          opacity: 0.7; }
        .job .job-list li a .job-list_ph {
          width: 50%; }
        .job .job-list li a .job-list_textarea {
          width: 50%;
          background-color: #FFF;
          padding: calc(10 / 390 * 100vw) calc(10 / 390 * 100vw);
          color: #000; }
          @media only screen and (min-width: 769px) {
            .job .job-list li a .job-list_textarea {
              padding: calc(12 / 1080 * 100vw); } }
          @media only screen and (min-width: 1080px) {
            .job .job-list li a .job-list_textarea {
              padding: 12px; } }
          .job .job-list li a .job-list_textarea h3 {
            width: calc(110 / 390 * 100vw);
            margin: 0 auto; }
            @media only screen and (min-width: 769px) {
              .job .job-list li a .job-list_textarea h3 {
                width: calc(145 / 1080 * 100vw); } }
            @media only screen and (min-width: 1080px) {
              .job .job-list li a .job-list_textarea h3 {
                width: 145px; } }
          .job .job-list li a .job-list_textarea .job-list_annotation {
            font-size: calc(9 / 390 * 100vw);
            line-height: 1em;
            text-align: center;
            margin-top: 0.4em; }
            @media only screen and (min-width: 769px) {
              .job .job-list li a .job-list_textarea .job-list_annotation {
                font-size: calc(12 / 1080 * 100vw);
                margin-top: 0.6em; } }
            @media only screen and (min-width: 1080px) {
              .job .job-list li a .job-list_textarea .job-list_annotation {
                font-size: 12px; } }
          .job .job-list li a .job-list_textarea .job-list_text {
            font-size: calc(10 / 390 * 100vw);
            line-height: 1.6em;
            margin-top: 0.5em; }
            @media only screen and (min-width: 769px) {
              .job .job-list li a .job-list_textarea .job-list_text {
                font-size: calc(13 / 1080 * 100vw);
                line-height: 1.6em;
                margin-top: 0.7em; } }
            @media only screen and (min-width: 1080px) {
              .job .job-list li a .job-list_textarea .job-list_text {
                font-size: 13px; } }
  .job .block01-inner-btn {
    margin: calc(36 / 390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .job .block01-inner-btn {
        margin: calc(90 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .job .block01-inner-btn {
        margin: 90px auto 0; } }
  .job .banarea {
    position: relative;
    z-index: 200;
    background: #df6a86;
    width: 100vw;
    margin: 0 auto;
    height: calc(395 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .job .banarea {
        width: 100%;
        height: calc(245 / 1080 * 100vw);
        margin: 0 auto; } }
    @media only screen and (min-width: 1080px) {
      .job .banarea {
        height: 245px;
        margin: 0 auto; } }
    .job .banarea .banarea-inner {
      position: absolute;
      width: calc(350 / 390 * 100vw);
      top: calc(-88 / 390 * 100vw);
      left: 0;
      right: 0;
      margin: auto; }
      @media only screen and (min-width: 769px) {
        .job .banarea .banarea-inner {
          width: calc(960 / 1080 * 100vw);
          top: calc(-117 / 1080 * 100vw);
          display: flex;
          justify-content: space-between; } }
      @media only screen and (min-width: 1080px) {
        .job .banarea .banarea-inner {
          width: 960px;
          top: -117px; } }
      .job .banarea .banarea-inner li {
        background-color: #FFF;
        width: calc(350 / 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .job .banarea .banarea-inner li {
            width: calc(464 / 1080 * 100vw);
            top: calc(-117 / 1080 * 100vw);
            display: flex;
            justify-content: space-between; } }
        @media only screen and (min-width: 1080px) {
          .job .banarea .banarea-inner li {
            width: 464px;
            top: -117px; } }
      .job .banarea .banarea-inner li + li {
        margin-top: calc(43 / 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .job .banarea .banarea-inner li + li {
            margin-top: 0; } }