/* Scss Document */
/*
---------------------------------------
entry01
---------------------------------------
*/
#entry01 {
  position: relative; }
  @media (max-width: 999px) {
    #entry01 {
      margin-bottom: 6rem; } }
  #entry01 .icoDeco {
    position: absolute;
    top: 0vw;
    right: 8vw;
    width: 90rem;
    height: auto;
    z-index: 0; }
    @media (max-width: 999px) {
      #entry01 .icoDeco {
        right: -16rem;
        width: 56rem;
        height: auto;
        z-index: 0;
        max-width: 200%; } }
  #entry01 .recruitBoxs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px; }
    @media (max-width: 999px) {
      #entry01 .recruitBoxs {
        margin-bottom: 4rem; } }
    #entry01 .recruitBoxs .recruitBox {
      display: block;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      color: #fff;
      aspect-ratio: 958 / 639; }
      #entry01 .recruitBoxs .recruitBox .pic {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover; }
      #entry01 .recruitBoxs .recruitBox::before {
        content: "";
        width: 88%;
        height: 88%;
        background: rgba(60, 60, 60, 0.42);
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translate(-50%, -50%);
        transition: width 0.8s cubic-bezier(0.76, 0, 0.24, 1), height 0.8s cubic-bezier(0.76, 0, 0.24, 1), background 0.8s ease; }
      #entry01 .recruitBoxs .recruitBox .txtBox {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center; }
        #entry01 .recruitBoxs .recruitBox .txtBox .deco {
          width: 100%;
          position: absolute;
          top: 49%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 10.4rem;
          font-weight: 500;
          line-height: 1;
          white-space: nowrap;
          color: rgba(255, 255, 255, 0.1);
          pointer-events: none; }
        #entry01 .recruitBoxs .recruitBox .txtBox .sttl {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 1;
          transform: translate(-50%, -50%);
          color: #fff;
          font-size: 3.6rem;
          font-weight: 500;
          line-height: 1.5; }
        #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn {
          width: 8rem;
          height: 8rem;
          border-radius: 50%;
          background: linear-gradient(135deg, #266EE8 0%, #7E61E4 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          left: 50%;
          bottom: 22%;
          z-index: 1;
          transform: translateX(-50%);
          transition: background .45s ease,transform .45s ease; }
          #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn .arrowBox {
            width: 2.2rem;
            height: 1.4rem;
            position: relative;
            display: block; }
            #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn .arrowBox img {
              width: 2.2rem;
              height: auto;
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: opacity .3s ease; }
              #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn .arrowBox img:first-child {
                opacity: 1; }
              #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn .arrowBox img:last-child {
                opacity: 0; }
      #entry01 .recruitBoxs .recruitBox:hover {
        opacity: 1; }
        #entry01 .recruitBoxs .recruitBox:hover::before {
          width: 100%;
          height: 100%;
          background: rgba(60, 60, 60, 0.6); }
        #entry01 .recruitBoxs .recruitBox:hover .moreBtn {
          background: #fff;
          transform: translateX(-50%) scale(1.05); }
          #entry01 .recruitBoxs .recruitBox:hover .moreBtn .arrowBox img:first-child {
            opacity: 0; }
          #entry01 .recruitBoxs .recruitBox:hover .moreBtn .arrowBox img:last-child {
            opacity: 1; }
  @media (max-width: 999px) {
    #entry01 .recruitBoxs {
      grid-template-columns: 1fr;
      gap: 2px;
      max-width: 42rem;
      margin: 0 auto; }
      #entry01 .recruitBoxs .recruitBox::before {
        width: 88%;
        height: 84%; }
      #entry01 .recruitBoxs .recruitBox .txtBox .deco {
        font-size: 5.6rem; }
      #entry01 .recruitBoxs .recruitBox .txtBox .sttl {
        font-size: 2rem;
        top: 43%; }
      #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn {
        width: 4.4rem;
        height: 4.4rem;
        bottom: 16%; }
        #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn .arrowBox {
          width: 1.8rem;
          height: 1.2rem; }
          #entry01 .recruitBoxs .recruitBox .txtBox .moreBtn .arrowBox img {
            width: 1.8rem; } }