/* ------------------------------
DOCUMENT PAGE（資料集）
------------------------------ */
.document {
  & .link__list2 {
    margin-bottom: 72px;
    &.local__navi {
      & ul {
        background: var(--blue03);
        padding: 24px;
        justify-content: flex-start;
        gap: 20px 40px;

        & li {
          &+li {
            margin: 0;
          }

          & a {
            color: var(--blue01);

            &::before {
              background: url(../img/common/icon_arrow_right_blue.svg);
            }
          }
        }
      }
    }
    
  }

  & .section__box {
    scroll-margin: 80px;

    &+.section__box {
      margin-top: 80px;
    }
  }

  & .document__guide {
    background: var(--blue03);
    display: flex;
    padding: 77px 56px;
    margin-top: 150px;
    margin-bottom: 100px;

    & p {
      margin: 0;
      font-size: var(--px16);
      font-weight: 700;
      display: block;
      text-align: center;
      width: 100%;
    }
  }

  .intro__box {
    margin: 0 0 44px 0;
    & p {
      & .red {
        color: var(--red01);
      }
    }
  }

  & .doc__table {
    overflow: auto;
    font-feature-settings: "palt";
    & table {
      width: 900px;
      border-collapse:separate;
      border-spacing: 0;
      border: none;
    }
    & + .doc__table {
      margin-top: 60px;
    }
    & thead {
      & tr {
        & th {
          background: var(--blue05); 
          color: var(--white01);
          font-size: var(--px14);
          padding: 2em 1em;
          text-align: center;
          line-height: 1.56;
          &:nth-of-type(1) {
            position: sticky;
            left: 0;
            top:0;
            width: 240px;
          }
          &:nth-of-type(2) {
            width: 66px;
          }
          &:nth-of-type(3) {
            width: 156px;
          }
          &:nth-of-type(4) {
            width: 200px;
          }
          &:not(:last-of-type) {
            border-right: var(--blue06) solid 1px;
          }
        }
      }
    }
    & tbody {
      & tr {
        & th {
          background: var(--white01); 
          font-size: var(--px14);
          padding: 2em 0.5em 2em 5.5em;
          border-right: var(--blue06) solid 1px;
          border-bottom: var(--blue06) solid 1px;
          position: sticky;
          left: 0;
          top:0;
          z-index: 2;
          text-align: left;
          width: 240px;
          line-height: 1.56;
          & .cat {
            display: block;
            position: absolute;
            left: 0;
            top:50%;
            width: 5em;
            transform: translateY(-50%);
            text-align: center;
          }
          &:after {
            content: ''; display: block; width: 1px; background: var(--blue06); height: 100%; position: absolute; left: 5em; top:0;
          }
          &:nth-of-type(1) {
            border-left: var(--blue06) solid 1px;
          }
        }
        & td {
          font-size: var(--px14);
          padding: 0.5em 0.5em;
          z-index: 1;
          position: relative;
          background: var(--white01);
          text-align: center;
          border-bottom: var(--blue06) solid 1px;
          border-right: var(--blue06) solid 1px;
          line-height: 1.56;
          & a {
            display: inline-block;
            padding: 0 2em 0 0;
            position: relative;
            text-align: left;
            font-size: var(--px14);
            &:after {
              content: '';
              display: block;
              position: absolute;
              background: url(../img/common/icon_pdf.svg) center center / 100% 100% no-repeat;
              width: 1.5em;
              height: 1.5em;
              right: 0;
              top:50%;
              transform: translateY(-50%);
            }
          }
        }
        &:not(:last-of-type) {
          & td {
            
          }
        }
      }
    }
  }
}
@media screen and ( max-width:1040px ) {
  .document {
    & .doc__table {
      position: relative;
      &.active {
        & .doc__table__scroller {
          display: block;
          width: 154px; 
          height: 104px; 
          background: url(../img/download/scroll.png) center center / 100% 100% no-repeat; 
          position: fixed; 
          left: 50%; 
          top:50%; 
          transform: translateX(-50%) translateY(-50%);  
          z-index: 10; 
          pointer-events: none;  
          animation: fadeIn 5s ease-in 0.2s forwards;     
          opacity: 0;
          &:hover {
            animation: none;
          }
        }
      }
      
    }
  }
}
@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  15% {
    display: block;
    opacity: 1;
  }

  85% {
    display: block;
    opacity: 1;
  }

  100% {
    display: block;
    opacity: 0;
  }
}

@media screen and (max-width:810px) {
  .document {
    & .link__list2 {
      & ul {
        gap: 20px;
      }
    }

    & .document__guide {
      margin-bottom: 0;
      margin-top: 80px;
    }
    & .doc__table {
      & thead {
        & tr {
          & th {
            font-size: var(--px12);
            &:nth-of-type(1) {
              width: 200px;
            }
            &:nth-of-type(2) {
              width: 66px;
            }
            &:nth-of-type(3) {
              width: 120px;
            }
            &:nth-of-type(4) {
              width: 160px;
            }
          }
        }
      }
      & tbody {
        & tr {
          & th {
            font-size: var(--px12);
            width: 200px;
          }
          & td {
            font-size: var(--px12);
            & a {
              font-size: var(--px12);
            }
          }
        }
      }
      & table {

      }
    }
  }
}