/*--------------------------------------------------------------
# 導入
--------------------------------------------------------------*/
#explanation_intro .inner::after {
  display: block;
  content:"";
  width: min(80%,60rem);
  aspect-ratio: 600 / 450 ;
  margin: 5rem auto 0;
  background: url(/assets/img/explanation/intro_illust.png) no-repeat center / contain;
}
#explanation_intro .text {
  max-width: 80rem;
  margin: 0 auto;

  + .text {
    margin-top: 2em;
  }
}
/*--------------------------------------------------------------
# 就労継続支援B型の役割
--------------------------------------------------------------*/
#explanation_role {
  counter-reset: count 0;
  background: var(--bg-pale-blue);
}
#explanation_role .inner {
  max-width: 80rem;
  margin: 0 auto;
}
#explanation_role .text {
  margin-bottom: 5rem;
}
#explanation_role .content_block + .content_block {
  margin-top: 3rem;
}
#explanation_role .block_title {
  display: flex;
  align-items: center;
  counter-increment: count 1;
  margin-bottom: 0.3em;

  &::before {
    display: inline-flex;
    content: counter(count);
    font-size: 83%;
    justify-content: center;
    align-items: center;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.2em;
    border: 0.1rem solid;
    border-radius: 50%;
  }
}
#explanation_role .content_block p {
  margin-left: calc(var(--fs-bl-title) + 0.2em);
}
/*--------------------------------------------------------------
# 「就労継続支援B型」の特長とメリット
--------------------------------------------------------------*/
#explanation_feature {
  background: var(--bg-blue);
}
#explanation_feature .inner {
  max-width: 80rem;
  margin: 0 auto;
}
#explanation_feature .section_title::after {
  background: var(--bg-blue);
}
#explanation_feature .feature_list {
  margin-top: 5rem;
  padding: 3.7%;
  background: #FFF;
  border-radius: 3rem;

  & dt {
    color: #FFF;
    font-family: var(--ff-maru);
    font-size: var(--fs-bl-title);
    text-align: center;
    line-height: 1.5;
    width: 20rem;
    background: var(--key-color);
    border-radius: 1rem;
    transform: rotate(0.05deg);
  }
  & dd {
    & ol {
      counter-reset: count 0;
      & li {
        counter-increment: count 1;
        margin-top: 3rem;
        
        .block_title {
          display: flex;
          align-items: center;
          margin-bottom: 0.3em;
          &::before {
            display: inline-flex;
            content: counter(count);
            font-size: 83%;
            justify-content: center;
            align-items: center;
            width: 1.2em;
            height: 1.2em;
            margin-right: 0.2em;
            border: 0.1rem solid;
            border-radius: 50%;
          }
        }
        & p {
          margin-left: calc(var(--fs-bl-title) + 0.2em);
        }
      }
    }
  }
}
/*--------------------------------------------------------------
# 「就労移行支援」と「就労継続支援」の違い
--------------------------------------------------------------*/
#explanation_type .content_block {
  max-width: 80rem;
  margin: 0 auto;

  + .content_block {
    margin-top: 5rem;
  }
}
#explanation_type .block_title {
  margin: 3rem 0 0.3em;
}
#explanation_type .table_wrap {
  overflow-y: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  margin-top: 7rem;
}
#explanation_type .type_table {
  table-layout: fixed;
  width: max(100%,50rem);
  border: 0.2rem solid #FFF;

  & th {
    color: #FFF;
    width: 2em;
    height: 4.7em;
    padding: 0 0.5em;
    background: var(--key-color);
    border-right: 0.2rem solid #FFF;
    border-bottom: 0.2rem solid #FFF;
    @media (min-width:768px) {
      width: 6em;
    }
  }
  & tr:nth-child(1) {
    font-family: var(--ff-maru);
    text-align: center;

    & td:nth-of-type(1) {
      background: #00C1D6;
    }
    & td:nth-of-type(2) {
      background: #4AB2E6;
    }
    & td:nth-of-type(3) {
      background: #E37B13;
    }
  }
  & td {
    height: 4.7em;
    padding: 0.5em;
    border-right: 0.2rem solid #FFF;
    border-bottom: 0.2rem solid #FFF;
    @media (min-width:998px) {
      text-align: center;
    }

    &:nth-of-type(1) {
      background: rgba(0,193,214,0.3);
    }
    &:nth-of-type(2) {
      background: rgba(74,178,230,0.3);
    }
    &:nth-of-type(3) {
      background: rgba(227,123,19,0.3);
    }
    & br {
      display: none;
      @media (min-width:998px) {
        display: block;
      }
    }
  }
}
/*--------------------------------------------------------------
# 一緒に働いてみませんか？
--------------------------------------------------------------*/
#explanation_join {
  background: var(--bg-pale-blue);
}
#explanation_join .join_title {
  font-family: var(--ff-maru);
  font-size: var(--fs-intro-title);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 1.5em;
}
#explanation_join .content_block {
  max-width: 80rem;
  margin: 0 auto;
}
#explanation_join .text + .text {
  margin-top: 2em;
}