header {
  .inner {
    margin-top: 8%;
    margin-bottom: 8%;
  }

  .recruit {
    position: absolute;
    bottom: 0;
    width: 138px;

  }
}

.info-bar {
  display: none;
}

.top {
  position: relative;
  margin-top: -2rem;
  margin-bottom: 7rem;

  .message {
    > div {
      flex-direction: column;

      img:nth-child(1) {
        margin-bottom: 2vw;
      }
    }

    > p {
      font-size: 13px;
      line-height: 26px;
      max-width: 80%;
      margin-top: 25vw;
    }
  }

  .dotline-social {
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: -1em;
    display: flex;
    transform: rotate(90deg) translate(11rem, -150%);
    gap: 1em;

    img {
      transform: rotate(-90deg);
    }
  }
}

.business-column {
  margin-top: 6rem;
  grid-template-columns: auto auto;
  gap: 3rem 2rem;

  .business3-sp {
    display: grid;
    margin-bottom: 6rem;
    text-align: center;
    border-top: 7px solid var(--color-mediumblue-500);
    border-right: 3px solid var(--color-mediumblue-500);
    border-left: 3px solid var(--color-mediumblue-500);
    grid-column: 1 / 3;
  }

  .business-column-content {
    grid-template-columns: auto auto;

    &.size2 {
      grid-column: 1 / 3;

      .logo {
        margin-bottom: min(4vw, 43.2px);
      }
    }
  }
}

.social-businesses {
  display: grid;
  margin-top: 6rem;
  grid-template-columns: auto auto;
  gap: 10px 20px;

  .business1 {
    text-align: center;
    border-right: 3px solid var(--color-mediumblue-500);
    border-bottom: 7px solid var(--color-mediumblue-500);
    border-left: 3px solid var(--color-mediumblue-500);
    grid-column: 1 / 3;
  }

  .business {
    display: flex;
    height: 44px;
    background-color: var(--color-mediumblue-500);
    grid-column: 1 / 3;
    place-content: center;
    justify-items: center;

    img {
      width: 240px;
    }
  }

  .business2 {
    text-align: center;
    border-top: 7px solid var(--color-mediumblue-500);
    border-right: 3px solid var(--color-mediumblue-500);
    border-left: 3px solid var(--color-mediumblue-500);
    grid-column: 1 / 3;
  }

  .business3 {
    display: none;
    text-align: center;
    border-top: 7px solid var(--color-mediumblue-500);
    border-right: 3px solid var(--color-mediumblue-500);
    border-left: 3px solid var(--color-mediumblue-500);
    grid-column: 1 / 3;
  }

}

.business-nav {
  display: grid;
  width: 90%;
  margin: auto;
  margin-top: 10vw;
  grid-template-columns: 48% 48%;
  gap: 4%;

  .dotty {
    margin-bottom: 8vw;
    grid-column: 1 / 3;

    img:nth-child(1) {
      width: 60%;
      transform: translate(60%, 0px);
    }

    img:nth-child(2) {
      width: 40%;
      transform: translate(55%, 0px);
    }
  }

}

.lifestage {
  background-color: var(--color-yellow);

  .discription {
    font-weight: bold;
    display: grid;
    width: 90vw;
    padding-top: 10%;
    grid-template-columns: auto;
    gap: 5%;

    div {
      margin-bottom: 12vw;

      img {
        width: 70%;
        margin: auto;
      }

      .size-l {
        font-size: 25px;
        margin-bottom: 1vw;
      }

      .size-m {
        font-size: 14px;
        margin-bottom: 16vw;
      }

      .size-s {
        font-size: 1.1rem;
        line-height: 1.8;
        margin-top: 3rem;
        margin-bottom: 16vw;
      }
    }
  }

  .graph {
    display: none;
    width: 90vw;
    margin: auto;
    padding-bottom: 6vw;
  }

  .graph-sp {
    display: block;
    width: 90vw;
    margin: auto;
    padding-bottom: 18vw;
  }
}

.dictionary {
  .container {
    display: block;
    margin-top: 0;

    .sidemenu {
      img {
        width: 76px;
      }

      .index_dictionary {
        font-size: 11px;
        font-weight: 700;
        margin-top: 24px;
        list-style: '-';
        list-style-position: inside;
        padding-inline-start: 0px;

        li {
          margin-bottom: 8px;

          a {
            text-decoration: none;
            color: black;
          }
        }
      }
    }

    .content {
      div:nth-child(1) {
        img {
          margin-bottom: 80px;
        }

        .info_jp {
          font-size: 15px;
          width: 120px;
          margin-top: 80px;
        }

        .info_en {
          font-size: 10px;
          width: 120px;
          margin-top: 6px;
        }

        .summary {
          font-size: 11px;
          font-weight: 700;
          line-height: 30px;
          width: 100%;
          margin: auto;
          margin-top: 30px;
        }
      }

      .toggle-dictionary-submenu {
        margin-bottom: 20px;

      }

      .dictionary-submenu {
        display: grid;
        margin-top: 30px;
        margin-bottom: 0px;
        grid-template-columns: 70%;
        gap: 0%;
      }

      .dictionary-submenu:not(.open) {
        display: none;
      }

      .dictionary-word {
        margin-top: 90px;
        margin-bottom: 60px;
      }

      .explanation {
        font-size: 14px;
        font-weight: bold;
        line-height: 32px;
      }
    }

    .back {
      margin: auto;
      margin-bottom: 100px;
    }
  }
}

.knowledge {
  .container {
    display: grid;
    grid-template-columns: 100%;
    gap: 0%;

    .sidemenu {
      .icon {
        width: 76px;
      }

      .toggle-category-submenu {
        display: flex;
        margin-bottom: 50px;

        p:nth-child(2) {
          margin-left: 25px;
          transform: rotate(90deg);
        }
      }

      .category-submenu {
        display: grid;
        margin-bottom: 250px;
        grid-template-columns: 48% 48%;
        gap: 12% 2%;

        > div img {
          margin-top: 0px;
        }
      }

      .category-submenu:not(.open) {
        display: none;
      }
    }

    .content {
      margin-bottom: 0px;

      &.bottom {
        margin-bottom: 300px;
      }

      div:nth-child(1) {
        margin-bottom: 150px;

        img {
          margin: auto;
          margin-bottom: 80px;
        }

        .info_jp {
          font-size: 15px;
          font-weight: 700;
          width: 138px;
        }

        .info_en {
          font-size: 10px;
          font-weight: bold;
          line-height: 18px;
          width: 138px;
          margin-top: 6px;
        }

        .summary {
          font-size: 13px;
          font-weight: bold;
          line-height: 30px;
          width: 100%;
          margin: auto;
          margin-top: 40px;
        }
      }

      .article-list {
        display: grid;
        justify-content: center;
        margin-bottom: 100px;
        grid-template-columns: 48% 48%;
        gap: 0% 4%;

        > div {
          margin-bottom: 40px;

          .thumb {
            width: 100%;
            height: auto;
            margin-bottom: 40px;
            border-radius: 30px;
            aspect-ratio: 1/1;
          }

          .article-title {
            font-size: 12px;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: 2px;
          }
        }
      }

      .dictionary-submenu:not(.open) {
        display: none;
      }
    }
  }
}

.knowledge2 {
  .container {
    .article-header {
      display: grid;
      align-items: center;
      justify-content: center;
      grid-template-columns: 100%;
      gap: 0%;

      .discription {
        .article-title {
          font-size: 24px;
          font-weight: 700;
          line-height: 50px;
          margin-top: 120px;
          letter-spacing: 2px;
        }

        .post-date {
          font-size: 10px;
          font-weight: 700;
          margin-top: 120px;
        }

        .summary {
          font-size: 13px;
          font-weight: bold;
          line-height: 30px;
          margin-top: 110px;
        }
      }

      .thumb {
        > div {
          width: 100%;
          height: 486px;
          margin-top: 90px;
          border: 5px solid var(--color-mediumblue-500);
          border-radius: 20px;
          box-shadow: 10px 10px var(--color-mediumblue-500);
        }
      }
    }

    .article-content {
      width: 100%;
      margin: auto;
      margin-top: 100px;
      margin-bottom: 100px;
      padding-top: 10px;
      padding-bottom: 10px;

      h2 {
        font-size: 18px;
        font-weight: 700;
        line-height: 40px;
      }

      img {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
      }

      p {
        font-size: 15px;
        font-weight: normal;
        line-height: 1.8;
      }
    }
  }

  .article-author {
    width: 100%;
    background-color: #F0F0F0;

    .title {
      display: flex;
      max-width: min(1080px, calc(100vw - 8%));
      margin: auto;
      padding-top: 40px;

      hr {
        width: 10%;
        height: 1px;
        color: black;
        background-color: black;
      }

      p {
        width: 40%;
        text-align: center;
      }
    }

    .author-info {
      display: flex;
      align-items: center;
      flex-direction: column;
      max-width: 70%;
      margin: auto;
      margin-top: 40px;

      .icon {
        width: 100%;
        height: auto;
        border-radius: 30px;
        aspect-ratio: 1/1;
      }

      .info {
        margin-bottom: 40px;

        .name {
          font-size: 15px;
          font-weight: 700;
          margin-top: 60px;
        }

        .position {
          font-size: 11px;
          font-weight: 700;
          line-height: 30px;
          margin-top: 10px;
        }

        .bio {
          font-size: 13px;
          font-weight: 700;
          line-height: 30px;
          margin-top: 30px;
        }
      }
    }
  }

  .article-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 150px;
    margin-bottom: 150px;

    .previous {
      font-size: 10px;
      font-weight: 700;
      display: block;
      width: 100px;
      padding: 6px;
      text-align: left;
      text-decoration: none;
      color: white;
      border-radius: 20px;
      background-color: var(--color-mediumblue-500);
    }

    .back {
      font-size: 10px;
      font-weight: 700;
      margin-right: 30px;
      margin-left: 30px;
      color: var(--color-mediumblue-500);
    }

    .next {
      font-size: 10px;
      font-weight: 700;
      display: block;
      width: 100px;
      padding: 6px;
      text-align: right;
      text-decoration: none;
      color: white;
      border-radius: 20px;
      background-color: var(--color-mediumblue-500);
    }
  }
}


/*追加*/
.dictionary {
  & .container {
    & .content {
      & div:nth-child(1) {
        .summary {
          font-size: 15px;
          font-weight: 700;
          line-height: 1.8;
          width: 100%;
          margin: auto;
          margin-top: 30px;
        }
      }
    }
  }
}

.dictionary {
  & .container {
    & .content {
      & .toggle-dictionary-submenu {
        label {
          font-size: 12px;
          font-weight: 700;
          display: flex;
          width: 100%;
          margin-bottom: 30px;
          padding: 4px;
          padding-left: 8px;
          cursor: pointer;
          color: var(--color-mediumblue-500);
          border: 3px solid var(--color-mediumblue-500);
          border-radius: 5px;
          box-shadow: 5px 5px var(--color-mediumblue-500);

          .font-12 {
            font-size: 1.1rem;
          }
        }
      }
    }
  }
}


.dictionary {
  & .container {
    & .content {
      & .dictionary-submenu {
        & > div {
          & ul:nth-child(2) {
            li {
              font-size: 15px;
              margin-bottom: 8px;
            }
          }
        }
      }
    }
  }
}

header {
  .inner {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.knowledge {
  .container {

    margin-top: 0;
  }
}

.knowledge {
  & .container {
    .sidemenu {
      z-index: 0;
      margin-top: 0;
    }
  }
}

.knowledge {
  & .container {
    & .sidemenu {
      & .category-submenu {
        > div img {
          margin-top: 0px;
          margin-left: 8px;
        }
      }
    }
  }
}

.knowledge {
  & .container {
    & .sidemenu {
      & .category-submenu {
        & > div {
          & ul {
            & li {
              a {
                font-size: 1em;
                color: black;
              }
            }
          }
        }
      }
    }
  }
}

.knowledge {
  & .container {
    & .sidemenu {
      .toggle-category-submenu {
        display: flex;
        margin-bottom: 50px;

        .font-12 {
          font-size: 15px;
        }
      }
    }
  }
}

label.knowledge-title .font-12 {
  font-size: 15px;
}

.dictionary {

  & .container {
    .sidemenu {
      position: relative;
      z-index: 0;
      margin-top: 0;
    }
  }
}

.top {
  & .message {
    > div {
      position: relative;
      z-index: 9999;
      flex-direction: column;
      margin-top: 1.5rem;
    }
  }
}

.top .business-column {
  grid-template-columns: 1fr 1fr;
}

.knowledge2 {
  & .container {
    & .article-content {
      img {
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 30px;
      }
    }
  }
}

.knowledge {
  & .container {
    & .content {
      div:nth-child(1) {
        margin-bottom: 60px;
      }
    }
  }
}

.knowledge {
  & .container {
    & .content {
      .knowledge-title {
        font-size: 16px;
        margin-bottom: 20px;
      }
    }
  }
}

.knowledge {
  & .container {
    & .content {
      & .article-list {
        & > div {
          .go {
            display: block;
            width: 100%;
            margin-top: 10px;
            margin-bottom: 10%;
          }
        }
      }
    }
  }
}

.knowledge {
  & .container {
    & .content {
      & .article-list {
        & > div {
          .thumb {
            width: 100%;
            height: auto;
            margin-bottom: 5px;

          }
        }
      }
    }
  }
}

.knowledge {
  & .container {
    & .content {
      & .article-list {
        & > div {
          margin-bottom: .5em;

          .article-title {
            font-size: 14px;
            font-weight: 700;
            line-height: 22px;
            letter-spacing: 2px;
          }
        }
      }
    }
  }
}

.knowledge {
  & .container {
    & .sidemenu {
      & .category-submenu {
        & > div {
          & ul {
            & li {
              a {
                font-size: 1.3em;
                color: black;
              }
            }
          }
        }
      }
    }
  }
}

.knowledge {
  & .container {
    & .sidemenu {
      .category-submenu {
        display: grid;
        margin-bottom: 100px;
        grid-template-columns: 48% 48%;
        gap: 12% 2%;
      }
    }
  }
}

.knowledge {
  & .container {
    & .sidemenu {
      .category-submenu {
        display: grid;
        margin-bottom: 170px;
        grid-template-columns: 48% 48%;
        gap: 4% 2%;
      }
    }
  }
}

.knowledge {
  & .container {
    & .content {
      & div:nth-child(1) {
        .summary {
          font-size: 15px;
        }
      }
    }
  }
}

.knowledge2 {
  & .container {
    & .article-header {
      & .discription {
        .post-date {
          font-size: 12px;
          font-weight: 700;
          margin-top: 20px;
        }
      }
    }
  }
}

.knowledge2 {
  & .container {
    & .article-header {
      & .discription {
        .article-title {
          font-size: 24px;
          font-weight: 700;
          line-height: 50px;
          margin-top: 20px;
          letter-spacing: 2px;
        }
      }
    }
  }
}

.knowledge2 {
  & .container {
    & .article-content {
      p {
        font-size: 15px;
        font-weight: normal;
        line-height: 1.8;
      }
    }
  }
}

.knowledge2 {
  & .container {
    & .article-header {
      & .thumb {
        > div {
          width: 100%;
          height: 100%;
          margin-top: 30px;
          margin-bottom: 0;
          border: 5px solid var(--color-mediumblue-500);
          border-radius: 20px;
          background-position: center center !important;
          box-shadow: 10px 10px var(--color-mediumblue-500);
        }
      }
    }
  }
}

.knowledge2 {
  & .container {
    & .article-content {
      margin-top: 4em;
    }
  }
}

.lifestage {
  & .discription {
    div {
      margin-bottom: 0;
    }
  }
}

.lifestage {
  & .discription {
    & div {
      .size-s {
        margin-bottom: 0;
      }
    }
  }
}

.dictionary {
  & .container {
    & .content {
      & div:nth-child(1) {
        .info_jp {
          font-size: 16px;
          font-weight: bold;
          width: 120px;
          margin-top: 80px;
        }
      }
    }
  }
}

.knowledge2 {
  & .container {

    & .article-header {
      & .discription {
        img {
          width: 5.5em;
        }
      }
    }
  }
}

/* ソーシャルビジネス改修 */

/* top */
.business_link-wrap {
  display: block;

  .business_link {
    width: 100%;
    margin-bottom: 80px;

    .shadow-box {
      min-height: auto;

        img.img-h {
          max-height: 150px;
        }
    }

    .shadow-box.pd {
      padding: 1rem;
    }
  }

}

/* structure */

.structrure {

  .structure-social-business {
      margin-top: 3em;
  }

  .message {
    margin-top: 80px;
  }

}

/* superiority */

.superiority {
  .message {
    &>div {
      align-items: flex-start;
    }

    >p {
      width: 100%;
    }
  }
}