/* ====== ベース ====== */
.box-shadow { box-shadow: 0 0 10px 0 rgba(0,0,0,.1); }
.keyvisual-title img { width:100%; height:auto; }

.h2 {
  padding-inline-start: 0;
  border-left: none;
  color: var(--tos-blue);
  font-weight: bold;

  ruby > rt {
    padding-block-end: 2rem;
    font-size: 60%;
    font-weight: normal;
    opacity: .4;
    text-align: left;
  }
}

/* ====== anchor-area ====== */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}

.anchor-area {
  details {
    border-radius: 10px;
    background-color: color-mix(in sRGB,#E8F3FB 60%,white);
    font-weight: bold;

    > summary {
      padding-block: 2rem;
      background-color: color-mix(in sRGB,#7BBBE6 15%,white);
      border-radius: 10px;
      border: 1px solid #fff;
      text-align: center;

      .triangle {
        display: inline-block;
        width: 15px; height: 8px;
        margin-inline-start: 1rem;
        background: var(--tos-blue);
        border-radius: 10px;
        clip-path: polygon(0 0, 100% 0%, 50% 100%);
      }
    }

    &[open] > summary .triangle {
      clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
  }

  .details-body {
    padding-block: 2rem;
    background-image: linear-gradient(90deg, #f1f9ff,#fff,#f1f9ff);

    @media (min-width: 768px) {
      padding-block: .6rem;
      background-image: none;
    }
  }

  ul.anchor-list {
    width: fit-content;
    margin-inline: auto;

    @media (min-width: 768px) {
      display: flex;
      justify-content: space-around;
      width: 80%;
    }

    li {
      position: relative;

      &:not(:last-of-type) {
        margin-block-end: 1em;

        @media (min-width: 768px) {
          margin-block-end: 0;
        }
      }

      a {
        position: relative;
        display: inline-block;
        color: #000;

        @media (min-width: 768px) {
          padding: .9em 1em;
        }

        &:hover {
          background-image: linear-gradient(90deg,#fff, transparent 32% 72%, #fff);
          outline: 1px solid #fff;
          text-decoration: none;
        }

        &::before {
          content: "";
          position: absolute;
          left: -15px;
          width: 5px; height: 100%;
          background-color: var(--tos-blue);
          border-radius: 3px;

          @media (min-width: 768px) {
            content: none;
          }
        }

        &::after {
          content: "";
          position: absolute;
          top: 50%; right: -2em;
          transform: translateY(-50%);
          width: 15px; height: 8px;
          background: var(--tos-blue);
          border-radius: 10px;
          clip-path: polygon(0 0, 100% 0%, 50% 100%);

          @media (min-width: 768px) {
            top: auto; right: 50%; bottom: .2em;
            transform: translateX(50%);
            width: 12px; height: 6px;
          }
        }
      }
    }
  }
}

/* ====== link-arrow ====== */
.link-arrow { position: relative; }
.link-arrow::before {
  content:""; position:absolute; top:50%; right:1rem; transform:translateY(-50%);
  width:36px; height:36px;
  background-color: color-mix(in sRGB,#E8F3FB 60%,white);
  border-radius: 9999px;
}
.link-arrow::after {
  content:"⇢"; position:absolute; top:50%; right:1rem; transform: translate(-5px, -58%);
  font-size:2em;
}

.article-item:has(.link-arrow) a:hover .link-arrow {
  &::before { background-color:#E61E1E; }
  &::after { color:#fff; }
}

/* ====== c-entry-section ====== */
.c-entry-section {
  &.gradation {
    background-image: linear-gradient(
      to top,
      #eef7ff 0%,
      #f6faff00 100%
    );
  }

  .entry-section-inner {
    width: min(100%, 1200px);
    padding-block: 1em 6rem;
    padding-inline: 10px;
    margin-inline: auto;

    @media (min-width:768px) {
      padding-block: 2em;
      padding-inline: 50px;
    }

    .article-item {
      border-radius: 15px;

      & .article-item-textarea {
          border-bottom-right-radius: 15px;
          border-bottom-left-radius: 15px;
      }
    }
  }
}

/* ====== about ====== */
.about {
  background-image: url("../img/recruit/background-image-01-sp.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  @media (min-width: 768px) {
    background-image: url("../img/recruit/background-image-01-pc.png");
  }

  .about-inner {
    width: min(100%, 1200px);
    padding-block: 1em 3em;
    padding-inline: 10px;
    margin-inline: auto;

    @media (min-width:768px) {
      padding-block: 2em;
      padding-inline: 50px;
    }

    & .article-item,
    & .article-item-textarea {
        border-radius: var(--radius);
    }

    a:hover { text-decoration: none; }
    .link-arrow::before { background-color: #fff; }

    .grid-area {
      .claassification-item {
        display: grid;
        place-items: center;
        row-gap: 10px;
        padding-block-start: 15px;
      }
      .article-item {
        background-color: #fff;
      }
    }

    .gradation {
      background-image: linear-gradient(90deg, #fff, #e8eef8);
    }
  }
}

/* ====== details open 制御（PCで開く） ====== */
details[data-details="pc-open"] {
  @media (min-width:768px) {
    summary { display: none; }
  }
}

/******* 募集要項・エントリー ページ *******/
.entry {
  
  & .h2 {
    border:none;
    color: var(--tos-blue);
  }
  
  & .h3 {
    padding-inline-start: 0;
    border: none;
  }

  & .link-img:has(img) {
    display: inline-block;

    &:hover {
      opacity: 0.8;
    }
  }

  & table {
    border-collapse: collapse;

    & th,
    & td {
      border: solid 2px var(--tos-gray-25);
    }
  
    & th,
    & tr > td:nth-of-type(-n+2):nth-last-of-type(n+2) {
      text-align: center;
    }
  
    & .txt-vertical {
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
    }
  } 
}

/******* 職種マッチング・研修制度 ページ *******/
.training {
  
  & .h2 {
    border:none;
    color: var(--tos-blue);
  }

  & .width-length {
    width: min(90%, var(--length));
    margin-inline: auto;
  }
}