@charset "UTF-8";
/*******　座談会　*******/
.recruit {
  width: 100%;
  overflow-x: hidden; }
  .recruit .keyvisual {
    width: 100vw;
    aspect-ratio: 390 / 400;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url("../../recruit/img/recruit_kv_sp.jpg"); }
    @media only screen and (min-width: 769px) {
      .recruit .keyvisual {
        width: 100%;
        aspect-ratio: 1920 / 700;
        background-image: url("../../recruit/img/recruit_kv_pc.jpg"); } }
  .recruit .keyvisual-inner {
    width: 100vw; }
    @media only screen and (min-width: 769px) {
      .recruit .keyvisual-inner {
        width: 100%; } }
  .recruit .keyvisual-inner-lead {
    width: calc(370 / 390 * 100vw);
    margin: calc(14 / 390 * 100vw) auto 0;
    font-size: calc(14 / 390 * 100vw);
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
    filter: drop-shadow(0 0 calc(3 / 390 * 100vw) #FFF) drop-shadow(0 0 calc(3 / 390 * 100vw) #FFF); }
    @media only screen and (min-width: 769px) {
      .recruit .keyvisual-inner-lead {
        width: calc(900 / 1920 * 100vw);
        margin: calc(25 / 1920 * 100vw) auto 0;
        font-size: calc(35 / 1920 * 100vw);
        line-height: 1.65;
        filter: drop-shadow(0 0 calc(5 / 1920 * 100vw) #FFF) drop-shadow(0 0 calc(5 / 1920 * 100vw) #FFF); } }
  .recruit .outline {
    width: 100%;
    position: relative;
    padding: calc(47 / 390 * 100vw) 0 calc(68 / 390 * 100vw); }
    @media only screen and (min-width: 769px) {
      .recruit .outline {
        margin: calc(0 / 1080 * 100vw) auto 0;
        padding: calc(125 / 1080 * 100vw) 0 calc(83 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .recruit .outline {
        margin: 0px auto 0;
        padding: 125px 0 83px; } }
    @media only screen and (min-width: 1981px) {
      .recruit .outline {
        margin: 0px auto 0; } }
  .recruit .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) {
      .recruit .page-title {
        width: calc(960 / 1080 * 100vw);
        height: calc(110 / 1080 * 100vw);
        top: calc(-60 /1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .recruit .page-title {
        width: 960px;
        height: 110px;
        top: -60px; } }
  .recruit .outline-inner {
    width: calc(300 / 390 * 100vw);
    margin: 0 auto; }
    @media only screen and (min-width: 769px) {
      .recruit .outline-inner {
        width: calc(878 / 1080 * 100vw); } }
    @media only screen and (min-width: 1080px) {
      .recruit .outline-inner {
        width: 878px; } }
  .recruit .outline-inner-text {
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .recruit .outline-inner-text {
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .recruit .outline-inner-text {
        margin: 0 auto 0; } }
  .recruit .block01 {
    width: 100%;
    background-color: #df6a86;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    margin: calc(0 / 390 * 100vw) auto 0; }
    @media only screen and (min-width: 769px) {
      .recruit .block01 {
        width: 100%;
        margin: calc(0 / 1080 * 100vw) auto 0; } }
    @media only screen and (min-width: 1080px) {
      .recruit .block01 {
        background-size: auto auto;
        background-repeat: repeat-x;
        margin: 0px auto 0; } }
    .recruit .block01 .block01-inner {
      width: calc(228 / 390 * 100vw);
      margin: 0 auto;
      padding: calc(26 / 390 * 100vw) 0 calc(26 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .recruit .block01 .block01-inner {
          display: flex;
          justify-content: space-between;
          width: calc(960 / 1080 * 100vw);
          padding: calc(50 / 1080 * 100vw) 0 calc(50 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .recruit .block01 .block01-inner {
          width: 960px;
          padding: 50px 0 50px; } }
      .recruit .block01 .block01-inner .recruit_navi {
        display: block;
        width: calc(228 / 390 * 100vw);
        margin: 0;
        background: #FFF;
        border-radius: 3em;
        font-size: calc(14 / 390 * 100vw);
        font-weight: 600;
        text-align: center;
        color: #df6a86;
        padding: 0.7em 0;
        line-height: 1em; }
        @media only screen and (min-width: 769px) {
          .recruit .block01 .block01-inner .recruit_navi {
            width: calc(228 / 1080 * 100vw);
            font-size: calc(15 /1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .recruit .block01 .block01-inner .recruit_navi {
            width: 228px;
            font-size: 1.5rem; } }
        .recruit .block01 .block01-inner .recruit_navi:hover {
          text-decoration: none; }
      .recruit .block01 .block01-inner li + li {
        margin-top: calc(20 / 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .recruit .block01 .block01-inner li + li {
            margin-top: 0; } }
        @media only screen and (min-width: 1080px) {
          .recruit .block01 .block01-inner li + li {
            margin-top: 0; } }
  .recruit .block02 {
    background-color: #f0f0f0;
    width: 100%;
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .recruit .block02 {
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .recruit .block02 {
        margin: 0 auto 0; } }
    .recruit .block02 .block02-inner {
      position: relative;
      width: 100%;
      padding: calc(55 / 390 * 100vw) 0 0;
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .recruit .block02 .block02-inner {
          width: calc(968 / 1080 * 100vw);
          padding: calc(105 / 1080 * 100vw) 0 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block02 .block02-inner {
          width: 968px;
          padding: 105px 0 0; } }
    .recruit .block02 .block02-lead {
      width: calc(330 / 390 * 100vw);
      font-weight: 900;
      font-size: calc(23 / 390 * 100vw);
      text-align: center;
      line-height: 0;
      margin: 1em auto 1.2em; }
      @media only screen and (min-width: 769px) {
        .recruit .block02 .block02-lead {
          width: calc(942 / 1080 * 100vw);
          font-size: calc(23 / 1080 * 100vw);
          margin: 1.2em auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block02 .block02-lead {
          width: 942px;
          font-size: 2.3rem; } }
    .recruit .block02 .block02-personality {
      width: calc(228 / 390 * 100vw);
      margin: calc(17 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block02 .block02-personality {
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin: calc(30 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block02 .block02-personality {
          width: 100%;
          margin: 30px auto 0; } }
      .recruit .block02 .block02-personality li {
        width: 100%; }
        @media only screen and (min-width: 769px) {
          .recruit .block02 .block02-personality li {
            width: calc(228 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .recruit .block02 .block02-personality li {
            width: 228px; } }
      .recruit .block02 .block02-personality .personality01, .recruit .block02 .block02-personality .personality04 {
        position: relative; }
        .recruit .block02 .block02-personality .personality01 .personality01-img, .recruit .block02 .block02-personality .personality04 .personality01-img {
          position: absolute;
          width: calc(76 / 390 * 100vw);
          bottom: 0;
          left: calc(-46 / 390 * 100vw); }
          @media only screen and (min-width: 769px) {
            .recruit .block02 .block02-personality .personality01 .personality01-img, .recruit .block02 .block02-personality .personality04 .personality01-img {
              width: calc(76 / 1080 * 100vw);
              left: calc(-46 / 1080 * 100vw); } }
          @media only screen and (min-width: 1080px) {
            .recruit .block02 .block02-personality .personality01 .personality01-img, .recruit .block02 .block02-personality .personality04 .personality01-img {
              width: 76px;
              left: -46px; } }
        .recruit .block02 .block02-personality .personality01 .personality04-img, .recruit .block02 .block02-personality .personality04 .personality04-img {
          position: absolute;
          width: calc(66 / 390 * 100vw);
          bottom: 0;
          right: calc(-29 / 390 * 100vw); }
          @media only screen and (min-width: 769px) {
            .recruit .block02 .block02-personality .personality01 .personality04-img, .recruit .block02 .block02-personality .personality04 .personality04-img {
              width: calc(76 / 1080 * 100vw);
              right: calc(-29 / 1080 * 100vw); } }
          @media only screen and (min-width: 1080px) {
            .recruit .block02 .block02-personality .personality01 .personality04-img, .recruit .block02 .block02-personality .personality04 .personality04-img {
              width: 76px;
              right: -29px; } }
      .recruit .block02 .block02-personality li + li {
        margin-top: calc(20 / 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .recruit .block02 .block02-personality li + li {
            margin-top: 0; } }
    .recruit .block02 .personality_ill {
      width: calc(300 / 390 * 100vw);
      margin: calc(10 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block02 .personality_ill {
          width: calc(300 / 1080 * 100vw);
          margin: calc(20 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block02 .personality_ill {
          width: 300px;
          margin: 20px auto 0; } }
  .recruit .block03 {
    width: 100%;
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .recruit .block03 {
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .recruit .block03 {
        margin: 0 auto 0; } }
    .recruit .block03 .block03-inner {
      width: 100%;
      padding: calc(44 / 390 * 100vw) 0 calc(70 / 390 * 100vw);
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .recruit .block03 .block03-inner {
          width: calc(960 / 1080 * 100vw);
          padding: calc(97 / 1080 * 100vw) 0 calc(100 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .recruit .block03 .block03-inner {
          width: 960px;
          padding: 97px 0 100px; } }
    .recruit .block03 .h3-acc_square {
      width: calc(302 / 390 * 100vw);
      margin: 3em auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block03 .h3-acc_square {
          width: 100%; } }
    .recruit .block03 .method-fig {
      width: 100%;
      margin: calc(22 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block03 .method-fig {
          width: 100%;
          margin: calc(20 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block03 .method-fig {
          width: 100%;
          margin: 20px auto 0; } }
    .recruit .block03 .method-text {
      width: calc(350 / 390 * 100vw);
      margin: calc(50 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block03 .method-text {
          width: 100%;
          margin: calc(50 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block03 .method-text {
          width: 100%;
          margin: 50px auto 0; } }
      .recruit .block03 .method-text li {
        width: calc(100% - 1em);
        text-indent: -1em;
        padding: 0 0 0 1em;
        line-height: 1.7em; }
        .recruit .block03 .method-text li span {
          color: #df6a86;
          padding: 0; }
      .recruit .block03 .method-text li + li {
        margin-top: 0.7em; }
    .recruit .block03 .block03-inner-btn {
      margin: calc(40 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block03 .block03-inner-btn {
          margin: calc(70 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block03 .block03-inner-btn {
          margin: 70px auto 0; } }
    .recruit .block03 .block03-inner-ban {
      width: calc(350 / 390 * 100vw);
      margin: calc(50 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block03 .block03-inner-ban {
          width: calc(672 / 1080 * 100vw);
          margin: calc(100 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block03 .block03-inner-ban {
          width: 672px;
          margin: 100px auto 0; } }
  .recruit .block04 {
    background-color: #f0f0f0;
    width: 100%;
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .recruit .block04 {
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .recruit .block04 {
        margin: 0 auto 0; } }
    .recruit .block04 .block04-inner {
      position: relative;
      width: calc(350 / 390 * 100vw);
      padding: calc(50 / 390 * 100vw) 0 calc(70 / 390 * 100vw);
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .recruit .block04 .block04-inner {
          width: calc(960 / 1080 * 100vw);
          padding: calc(100 / 1080 * 100vw) 0 calc(125 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .recruit .block04 .block04-inner {
          width: 960px;
          padding: 100px 0 125px; } }
    .recruit .block04 .faq {
      background: #FFF;
      width: calc(350 / 390 * 100vw);
      padding: calc(25 / 390 * 100vw) calc(15 / 390 * 100vw) calc(28 / 390 * 100vw);
      margin: calc(30 / 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .block04 .faq {
          width: calc(960 / 1080 * 100vw);
          padding: calc(32 / 1080 * 100vw) calc(40 / 1080 * 100vw) calc(40 / 1080 * 100vw);
          margin: calc(34 / 1080 * 100vw) auto 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .block04 .faq {
          width: 960px;
          padding: 32px 40px 40px;
          margin: 34px auto 0; } }
      .recruit .block04 .faq .faq-q {
        background-image: url("../../recruit/img/faq-q.svg");
        background-position: top calc(2 / 390 * 100vw) left;
        background-repeat: no-repeat;
        background-size: calc(18 / 390 * 100vw);
        font-size: calc(19 / 390 * 100vw);
        color: #df6a86;
        line-height: 1.2em;
        font-weight: bold;
        padding: 0em 0 0.5em calc(35 / 390 * 100vw);
        margin: 0 auto 0; }
        @media only screen and (min-width: 769px) {
          .recruit .block04 .faq .faq-q {
            background-position: top calc(3 / 1080 * 100vw) left;
            background-size: calc(23 / 1080 * 100vw);
            font-size: calc(24 / 1080 * 100vw);
            padding: 0.1em 0 0.5em calc(45 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .recruit .block04 .faq .faq-q {
            background-size: 23px;
            font-size: 2.4rem;
            padding: 0.1em 0 0.5em 45px; } }
      .recruit .block04 .faq .faq-a {
        background-image: url("../../recruit/img/faq-a.svg");
        background-position: top calc(3 / 390 * 100vw) left;
        background-repeat: no-repeat;
        background-size: calc(18 / 390 * 100vw);
        font-size: calc(13 / 390 * 100vw);
        line-height: 2em;
        padding: 0em 0 0 calc(35 / 390 * 100vw);
        margin: 0.7em auto 0; }
        @media only screen and (min-width: 769px) {
          .recruit .block04 .faq .faq-a {
            background-position: top calc(3 / 1080 * 100vw) left;
            background-size: calc(23 / 1080 * 100vw);
            font-size: calc(16 / 1080 * 100vw);
            padding: 0em 0 0 calc(45 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .recruit .block04 .faq .faq-a {
            background-position: top 3px left;
            background-size: 23px;
            font-size: 1.6rem;
            padding: 0em 0 0 45px; } }
    .recruit .block04 .faq + .faq {
      margin-top: calc(20 / 390 * 100vw); }
      @media only screen and (min-width: 769px) {
        .recruit .block04 .faq + .faq {
          margin-top: calc(33 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .recruit .block04 .faq + .faq {
          margin-top: 33px; } }
  .recruit .banarea {
    background-color: #df6a86;
    background-image: url("../../recruit/img/bg_gray_sp.png");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-x;
    width: 100%;
    margin: 0 auto 0; }
    @media only screen and (min-width: 769px) {
      .recruit .banarea {
        background-image: url("../../recruit/img/bg_gray_pc.png");
        background-size: 100% auto;
        margin: 0 auto 0; } }
    @media only screen and (min-width: 1080px) {
      .recruit .banarea {
        background-size: auto auto;
        margin: 0 auto 0; } }
    .recruit .banarea .banarea-inner {
      width: calc(350 / 390 * 100vw);
      padding: calc(0 / 390 * 100vw) 0 calc(70 / 390 * 100vw);
      margin: 0 auto; }
      @media only screen and (min-width: 769px) {
        .recruit .banarea .banarea-inner {
          width: calc(625 / 1080 * 100vw);
          padding: calc(0 / 1080 * 100vw) 0 calc(100 / 1080 * 100vw); } }
      @media only screen and (min-width: 1080px) {
        .recruit .banarea .banarea-inner {
          width: 625px;
          padding: 0px 0 100px; } }
    .recruit .banarea .ban-wrap {
      width: calc(290 / 390 * 100vw);
      margin: calc(30/ 390 * 100vw) auto 0; }
      @media only screen and (min-width: 769px) {
        .recruit .banarea .ban-wrap {
          width: calc(625 / 1080 * 100vw);
          display: flex;
          justify-content: space-between;
          margin: calc(35 / 1080 * 100vw) 0 0; } }
      @media only screen and (min-width: 1080px) {
        .recruit .banarea .ban-wrap {
          width: 625px;
          font-size: 3.6rem;
          margin: 35px 0 0; } }
      .recruit .banarea .ban-wrap li {
        background: #FFF;
        width: 100%;
        padding: 0 0 calc(21/ 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .recruit .banarea .ban-wrap li {
            width: calc(290 / 1080 * 100vw);
            padding: 0 0 calc(21/ 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .recruit .banarea .ban-wrap li {
            width: 290px;
            padding: 0 0 21px; } }
        .recruit .banarea .ban-wrap li .ban-text {
          font-size: calc(21/ 390 * 100vw);
          text-align: center;
          font-weight: 700;
          margin: calc(20/ 390 * 100vw) auto 0; }
          @media only screen and (min-width: 769px) {
            .recruit .banarea .ban-wrap li .ban-text {
              font-size: calc(22/ 390 * 100vw);
              margin: calc(20/ 1080 * 100vw) auto 0; } }
          @media only screen and (min-width: 1080px) {
            .recruit .banarea .ban-wrap li .ban-text {
              font-size: 22px;
              margin: 20px auto 0; } }
        .recruit .banarea .ban-wrap li .ban-btn {
          margin: calc(21/ 390 * 100vw) auto 0; }
          @media only screen and (min-width: 769px) {
            .recruit .banarea .ban-wrap li .ban-btn {
              margin: calc(21/ 1080 * 100vw) auto 0; } }
          @media only screen and (min-width: 1080px) {
            .recruit .banarea .ban-wrap li .ban-btn {
              margin: 21px auto 0; } }
      .recruit .banarea .ban-wrap li + li {
        margin-top: calc(35 / 390 * 100vw); }
        @media only screen and (min-width: 769px) {
          .recruit .banarea .ban-wrap li + li {
            margin-top: calc(0 / 1080 * 100vw); } }
        @media only screen and (min-width: 1080px) {
          .recruit .banarea .ban-wrap li + li {
            margin-top: 0px; } }