button {
  all: unset;
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  width: auto;
  background-color: transparent;
  cursor: pointer;
}

input {
  background-color: #fff;
}

input:is(:-webkit-autofill, :autofill) {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: inherit !important;
  /* transition: background-color 5000s ease-in-out 0s; */
}

dialog {
  /* all: unset; */
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  width: auto;
  background-color: transparent;
  max-width: none;
  max-height: none;
  border-radius: 0 !important;
}

#contents_pages:before, #contents_pages:after {
  display: none;
}

#main_pages.group {
  max-width: 1250px;

  .index_pages {
    @media (width <= 768px) {
      width: 100%;
      padding-inline: 20px;
    }
  }
}


/*  -------------------------------------------
  メイン
-------------------------------------------- */
.group-main {
  position: relative;
  z-index: 1;

  @media (width <= 999px) {
    padding-block: 30px;
  }

  .group-main__bg {
    width: 100%;
    height: 100%;
    
    @media (width <= 999px) {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }

    @media (width <= 768px) {
      left: -20px;
      width: calc(100% + 40px);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;

        @media (width <= 999px) {
          object-position: top;
        }
    }
  }

  .group-main__buttons {
    @media (width >= 1000px) {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    
    @media (width <= 999px) {
      display: grid;
      justify-content: center;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }

  .group-main__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 54px;
    padding-inline: 14px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    color: #0E0D6A;
    border: 2px solid #0E0D6A;
    border-radius: 50vh;
    background-color: #fff;
    box-shadow: 0 3px 0 #0E0D6A;
    transition: .3s;

    @media (769px <= width <= 999px) {
      justify-self: center;
    }
    @media (width <= 768px) {
      width: 100%;
      height: 38px;
      padding-inline: 10px;
    }

    .icon {
      width: 32px;
      height: 32px;
      fill: #0E0D6A;
      transition: .3s;

      @media (width <= 768px) {
        width: 20px;
        height: 20px;
      }
    }

    span {
      flex-grow: 1;

      @media (width <= 768px) {
        font-size: 11px;
      }
    }

    .arrow {
      width: 14px;
      height: 14px;
      fill: #0E0D6A;
      transition: .3s;

      @media (width <= 768px) {
        width: 8px;
        height: 8px;
      }
    }
  }

  @media (hover: hover) {
    .group-main__button:hover {
      background-color: #0E0D6A;
      color: #fff;

      .icon {
        fill: #fff;
      }

      .icon--img {
        filter: brightness(0) invert(1);
      }

      .arrow {
        fill: #FF5400;
      }
    }
  }

  /* ボタンの位置 */
  @media (width >= 1000px) {
    .group-main__button {
      position: absolute;
    }
    .group-main__button.drone {
      top: min(calc(59 / 1250 * 100vw), 59px);
      left: min(calc(550 / 1250 * 100vw), 550px);
    }
    .group-main__button.dx {
      top: min(calc(386 / 1250 * 100vw), 386px);
      left: min(calc(610 / 1250 * 100vw), 610px);
    }
    .group-main__button.content-media {
      top: min(calc(153 / 1250 * 100vw), 153px);
      left: min(calc(633 / 1250 * 100vw), 633px);
    }
    .group-main__button.research-development {
      top: min(calc(280 / 1250 * 100vw), 280px);
      left: min(calc(647 / 1250 * 100vw), 647px);
    }
    .group-main__button.ai-saas {
      top: min(calc(490 / 1250 * 100vw), 490px);
      left: min(calc(633 / 1250 * 100vw), 633px);
    }
    .group-main__button.internet {
      top: min(calc(576 / 1250 * 100vw), 576px);
      left: min(calc(514 / 1250 * 100vw), 514px);
    }
    .group-main__button.fixed-communication {
      top: min(calc(43 / 1250 * 100vw), 43px);
      left: min(calc(174 / 1250 * 100vw), 174px);
    }
    .group-main__button.network {
      top: min(calc(156 / 1250 * 100vw), 156px);
      left: min(calc(75 / 1250 * 100vw), 75px);
    }
    .group-main__button.information-communication {
      top: min(calc(271 / 1250 * 100vw), 271px);
      left: min(calc(64 / 1250 * 100vw), 64px);
    }
    .group-main__button.mobile-communication {
      top: min(calc(386 / 1250 * 100vw), 386px);
      left: min(calc(60 / 1250 * 100vw), 60px);
    }
    .group-main__button.direct-store {
      top: min(calc(219 / 1250 * 100vw), 219px);
      left: min(calc(338 / 1250 * 100vw), 338px);
    }
    .group-main__button.sales-support {
      top: min(calc(328 / 1250 * 100vw), 328px);
      left: min(calc(310 / 1250 * 100vw), 310px);
    }
    .group-main__button.distribution-retail {
      top: min(calc(453 / 1250 * 100vw), 453px);
      left: min(calc(303 / 1250 * 100vw), 303px);
    }
    .group-main__button.sales-marketing {
      top: min(calc(570 / 1250 * 100vw), 570px);
      left: min(calc(193 / 1250 * 100vw), 193px);
    }
    .group-main__button.bpo-it {
      top: min(calc(226 / 1250 * 100vw), 226px);
      left: min(calc(914 / 1250 * 100vw), 914px);
    }
    .group-main__button.finance {
      top: min(calc(353 / 1250 * 100vw), 353px);
      left: min(calc(983 / 1250 * 100vw), 983px);
    }
    .group-main__button.education {
      top: min(calc(453 / 1250 * 100vw), 453px);
      left: min(calc(911 / 1250 * 100vw), 911px);
    }
    .group-main__button.energy {
      top: min(calc(586 / 1250 * 100vw), 586px);
      left: min(calc(980 / 1250 * 100vw), 980px);
    }
  }
  /* ボタンの位置 セールスマーケティングなし*/
  @media (width >= 1000px) {
    .group-main__button {
      position: absolute;
    }
    .group-main__button.drone {
      top: min(calc(59 / 1250 * 100vw), 59px);
      left: min(calc(550 / 1250 * 100vw), 550px);
    }
    .group-main__button.dx {
      top: min(calc(374 / 1250 * 100vw), 374px);
      left: min(calc(603 / 1250 * 100vw), 603px);
    }
    .group-main__button.content-media {
      top: min(calc(179 / 1250 * 100vw), 179px);
      left: min(calc(511 / 1250 * 100vw), 511px);
    }
    .group-main__button.research-development {
      top: min(calc(260 / 1250 * 100vw), 260px);
      left: min(calc(629 / 1250 * 100vw), 629px);
    }
    .group-main__button.ai-saas {
      top: min(calc(497 / 1250 * 100vw), 497px);
      left: min(calc(645 / 1250 * 100vw), 645px);
    }
    .group-main__button.internet {
      top: min(calc(586 / 1250 * 100vw), 586px);
      left: min(calc(540 / 1250 * 100vw), 540px);
    }
    .group-main__button.fixed-communication {
      top: min(calc(70 / 1250 * 100vw), 70px);
      left: min(calc(90 / 1250 * 100vw), 90px);
    }
    .group-main__button.network {
      top: min(calc(159 / 1250 * 100vw), 159px);
      left: min(calc(195 / 1250 * 100vw), 195px);
    }
    .group-main__button.information-communication {
      top: min(calc(243 / 1250 * 100vw), 243px);
      left: min(calc(73 / 1250 * 100vw), 73px);
    }
    .group-main__button.mobile-communication {
      top: min(calc(362 / 1250 * 100vw), 362px);
      left: min(calc(64 / 1250 * 100vw), 64px);
    }
    .group-main__button.direct-store {
      top: min(calc(300 / 1250 * 100vw), 300px);
      left: min(calc(310 / 1250 * 100vw), 310px);
    }
    .group-main__button.sales-support {
      top: min(calc(429 / 1250 * 100vw), 429px);
      left: min(calc(347 / 1250 * 100vw), 347px);
    }
    .group-main__button.distribution-retail {
      top: min(calc(534 / 1250 * 100vw), 534px);
      left: min(calc(181 / 1250 * 100vw), 181px);
    }
    .group-main__button.bpo-it {
      top: min(calc(185 / 1250 * 100vw), 185px);
      left: min(calc(885 / 1250 * 100vw), 885px);
    }
    .group-main__button.finance {
      top: min(calc(314 / 1250 * 100vw), 314px);
      left: min(calc(980 / 1250 * 100vw), 980px);
    }
    .group-main__button.education {
      top: min(calc(410 / 1250 * 100vw), 410px);
      left: min(calc(899 / 1250 * 100vw), 899px);
    }
    .group-main__button.energy {
      top: min(calc(549 / 1250 * 100vw), 549px);
      left: min(calc(974 / 1250 * 100vw), 974px);
    }
  }

}

/*  -------------------------------------------
  上記以外での採用
-------------------------------------------- */
.group-other {
  padding-block-start: 50px;
  padding-inline: calc(60 / 1250 * 100vw);
  
  @media (width <= 768px) {
    padding-block-start: 36px;
    padding-inline: 0;
  }

  .group-other__heading {
    font-size: 30px;
    font-weight: 700;

    @media (width <= 768px) {
      font-size: 22px;
    }
  }

  .group-other__anchors {
    display: flex;
    gap: 20px;
    margin-block-start: 20px;
    
    @media (width <= 768px) {
      flex-direction: column;
      gap: 10px;
      margin-block-start: 16px;
    }
  }

  .group-other__anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 3);
    height: 48px;
    padding-inline: 70px 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    background-color: #0E0D6A;
    transition: .3s;

    @media (width <= 1000px) {
      /* width: 100%; */
      padding-inline: 10px 10px;
    }

    /* @media (width <= 768px) {
      width: 100%;
      height: 52px;
      padding-inline: 180px 10px;
    } */

    @media (width <= 768px) {
      width: 100%;
      height: 52px;
      padding-inline: 80px 10px;
    }

    sup {
      font-size: 12px;
      position: relative;
      top: -0.2em;
    }

    .icon {
      width: 30px;
      height: 30px;
      margin-inline-end: 6px;
    }

    .arrow {
      justify-self: flex-end;
      width: 14px;
      height: 14px;
      fill: #fff;
      margin-inline-start: auto;
    }
  }

  @media (hover: hover) {
    .group-other__anchor:hover {
      background-color: #FF5400;
    }
  }

  .group-other__note {
    margin-block-start: 16px;
    font-weight: 500;

    @media (width <= 768px) {
      font-size: 14px;
    }
  }
}

/*  -------------------------------------------
  会社名・キーワード検索
-------------------------------------------- */
.group-word {
  padding-block-start: 50px;
  padding-inline: calc(60 / 1250 * 100vw);
  
  @media (width <= 768px) {
    padding-block-start: 36px;
    padding-inline: 0;
  }

  .group-word__heading {
    font-size: 30px;
    font-weight: 700;

    @media (width <= 768px) {
      font-size: 22px;
    }
  }

  .group-word__main {
    margin-block-start: 20px;

    @media (width <= 768px) {
      margin-block-start: 16px;
    }
  }
}

.group-word-search-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-inline: 16px 12px;
  border: 2px solid #0E0D6A;
  box-sizing: border-box;
  
  input {
    appearance: none;
    border: none;
    font-size: 18px;
    width: calc(100% - 25px);

    &:active,
    &:focus {
      outline: none;
    }
  }

  button {
    width: 30px;
    height: 30px;
    svg {
      width: 100%;
      height: 100%;
      fill: #0E0D6A;
    }
  }
}

/*  -------------------------------------------
  モーダル
-------------------------------------------- */
/* @scope (.group-modal) {
  .group-modal__inner {
    border-radius: 0 !important;
  }
} */
.group-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.group-modal {
  width: 100vw;
  height: 100vh;
  padding-block: 100px 60px;
  padding-inline: 20px;
  
  @media (width <= 768px) {
    padding-block: 40px;
    
  }

  &[data-search-type="business"] {
    .search {
      display: none;
    }
  }

  &[data-search-type="search"] {
    .business {
      display: none;
    }
  }

  .group-modal__inner {
    position: relative;
    width: 100%;
    max-width: 880px;
    padding-block: 50px;
    padding-inline: 50px;
    margin: 0 auto;
    background-color: #fff;
    box-sizing: border-box;

    @media (width <= 768px) {
      padding-block: 60px;
      padding-inline: 20px;
    }

    &::before {
      content: '';
      width: 50px;
      height: 50px;
      background-color: #FF5400;
      position: absolute;
      top: 0;
      left: 0;
      clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    }
  }

  .group-modal__close {
    position: absolute;
    top: 30px;
    right: 30px;

    @media (width <= 768px) {
      width: 22px;
      height: 22px;
      top: 16px;
      right: 16px;

      img {
        width: 100%;
        height: auto;
      }
    }

    svg {
      width: 44px;
      height: 44px;

      @media (width <= 768px) {
        width: 22px;
        height: 22px;
      }
    }
  }

  .group-modal__heading {
    font-size: 30px;
    font-weight: 700;
  }

  .group-modal__text {
    margin-block-start: 8px;
    font-size: 16px;
    font-weight: 500;
    
    @media (width <= 768px) {
      font-size: 14px;
    }
  }

  .group-modal__form {
    margin-block-start: 16px;
  }

  .group-modal__search-number {
    margin-block-start: 6px;
    font-size: 14px;
    font-weight: 500;
  }

  .group-modal__recruitment {
    margin-block-start: 30px;

    @media (width <= 768px) {
      margin-block-start: 20px;
    }
  }

  .group-modal__main {
    margin-block-start: 40px;
  }

  .group-modal__card {
    & + .group-modal__card {
      margin-block-start: 40px;
      padding-block-start: 40px;
      border-top: 1px solid #000;
    }
  }
}

.group-modal-recruitment {
  display: flex;
  padding-block: 15px;
  padding-inline: 30px 50px;
  background-color: #F1F1F1;

  @media (width <= 768px) {
    padding-block: 20px;
    padding-inline: 20px 0;
  }

  p {
    padding-inline-end: 30px;
    border-right: 1px solid #000;
    font-weight: 500;
    
    @media (width <= 768px) {
      display: flex;
      align-items: center;
      padding-inline-end: 16px;
    }
  }
  
  .group-modal-recruitment__checkboxes {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    padding-inline-start: 70px;
    font-weight: 500;

    @media (width <= 768px) {
      flex-direction: column;
      padding-inline-start: 36px;
      gap: 16px;
    }
  }
}


.group-modal-card {
  @media (width >= 769px) {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 12px));
    grid-template-rows: auto auto;
    gap: 24px 32px;
  }
  
  .group-modal-card__logo {
    @media (width >= 769px) {
      grid-area: 1/1/2/2;
      align-self: center;
    }
  }

  .group-modal-card__text {
    
    @media (width >= 769px) {
      grid-area: 1/2/2/3;
    }
    
    @media (width <= 768px) {
      margin-block-start: 20px;
    }
  }

  .group-modal-card__heading {
    font-size: 22px;
    font-weight: 700;
  }

  .group-modal-card__description {
    margin-block-start: 18px;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
    
    @media (width <= 768px) {
      margin-block-start: 8px;
    }
  }

  .group-modal-card__anchor {
    box-sizing: border-box;
  }

  &:not(:has(.group-modal-card__division)) {
    .group-modal-card__anchors {
      @media (width >= 900px) {
        grid-area: 2/1/3/3;
        display: flex;
        gap: 15px;
      }

      @media (width >= 769px) {
        grid-area: 2/1/3/3;
      }
    }
    
    .group-modal-card__anchor {
      @media (width >= 900px) {
        --_button-width: calc(100% / 3 - 10px);
      }
      
      @media (width <= 899px) {
        --_button-width: 100%;
        margin-block-start: 26px;
      }
    }
  }

  &:has(.group-modal-card__division) {
    .group-modal-card__division {
      @media (width >= 769px) {
        grid-area: 2/2/3/3;
      }

      @media (width <= 899px) {
        margin-block-start: 32px;
      }
    }

    .group-modal-card__division-item:not(:first-child) {
      margin-block-start: 32px;
    }

    .group-modal-card__division-name {
      font-size: 22px;
      font-weight: 700;
    }

    .group-modal-card__anchors {
      display: flex;
      gap: 8px;
      margin-block-start: 18px;

      @media (width <= 899px) {
        flex-direction: column;
        gap: 16px;
      }
    }

    .group-modal-card__anchor {
      @media (width >= 900px) {
        --_button-width: calc(100% / 2 - 4px);
        --_button-height: 40px;
        --_button-padding-left: 10px;
        --_button-font-size: 14px;
        --_button-box-width: 40px;
        --_button-triangle-right: 20px;
      }

      @media (width <= 899px) {
        --_button-width: 100%;
      }
    }
  }

}