@charset "utf-8";

/*
  BASE
*/
:root {
  --primary-color: #1558C5;
  --secondary-color: #F57;
  --bg-color: #f9f9f9;
  --border-color: #e4e4e4;
  --base-color: #333;
  --gray-scale-color: #666;
  --font-size-headline: 2.25rem;
  --font-size-xl: 1.875rem;
  --font-size-l: 1.125rem;
  --font-size-base: 1rem;
  --font-size-xs: .8125rem;
}

html {
  scroll-behavior: smooth;
  margin: 0;
}

.domestic-cloud_contents {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  text-size-adjust: 100%;
  color: var(--base-color);
}

.layout_main * {
  box-sizing: border-box;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

a {
  transition: opacity ease 0.3s;
  text-decoration: none;
}

p {
  line-height: 2;
  margin: 0;
}

.inner {
  max-width: 75rem;
  margin: 0 auto;
}

.link_to_contact {
  display: flex;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 36px;
  background: var(--secondary-color);
  color: #fff;
  font-weight: 700;
  line-height: 1;

}

@media screen and (max-width: 767px) {
  .only-pc {
    display: none;
  }

  .inner {
    padding: 0 1rem;
  }
}

@media screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }

  .link_to_contact {
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity .3s;
    }
    &:hover {
      &::before {
        opacity: .2;
      }
    }
  }
}

/*
  MAIN
*/

.layout_main {
  overflow: hidden;
}

.layout_header {
  position: absolute;
  top: 0;
  padding: 1.25rem 1.25rem 0;
  z-index: 999;
  width: 100%;
  margin: 0 auto;

  .header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
  }

  .header_logo {
    display: block;
    width: 18.8333%;
    line-height: 0;

    img {
      height: auto;
      max-width: 100%;
      vertical-align: bottom;
    }
  }
}

.layout_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;

  .nav_list {
    display: flex;
    align-items: center;
  }

  .nav_item {
    border-left: 1px solid #333;
    min-width: 11.5rem;

    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: .56rem 1rem;
      font-size: var(--font-size-xs);
      line-height: 1;
    }

    &:last-child {
      border-right: 1px solid #333;
    }
  }

  .nav_cta_button {
    font-size: 0.875rem;
    padding: 1rem 1.88rem;
  }
}

/* HERO */

.layout_hero {
  background: url(../images/bg-hero.png);
  width: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 38.75rem;
  position: relative;
  &::before {
    content: '';
    display: block;
    padding-top: 51.3889%;
  }
  &::after {
    content: "";
    display: block;
    background: url(../images/illust-hero.svg) no-repeat center bottom;
    background-size: contain;
    width: 60%;
    min-width: 700px;
    height: calc(100% - 9.3243%);
    position: absolute;
    top: 13.2432%;
    right: 0;
  }

  .hero_inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1240px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    padding: 1rem 1.25rem 0;
    margin: 0 auto;

    .sakura-cloud_logo {
      margin: 0 0 1.81rem;
    }
  }

  .hero_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;

    .cta-dl-banner {
      display: block;
      width: 27.1875rem;
      line-height: 0;
      box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.10);
      margin-top: 1rem;

      img {
        width: 100%;
      }
    }
  }

  .hero_headline {
    color: var(--primary-color);
    font-size: 1.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
  }
  .hero_catchphrase {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--primary-color);

    .hero_label {
      color: #FFF;
      font-size: 3rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.5;
      background: var(--primary-color);
      padding: 0rem 0.75rem;
    }
  }
}

/* section_problem_solution */
.section_problem_solution {
  padding: 3.75rem 1.25rem 0;

  .problem_solution_inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    align-self: stretch;
  }

  /* problem_container */
  .problem_container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: 100%;

    .headline {
      color: #333;
      text-align: center;
      font-size: 2.1875rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.5;

      span {
        color: var(--secondary-color);
      }
    }
  }

  .problem_list {
    display: flex;
    justify-content: center;
    gap: 3rem;

    .problem_item {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      width: 21.375rem;
      flex-shrink: 1;
      text-align: center;

      .problem_img {
        align-items: center;
        background: url(../images/bg-problem_img.svg) no-repeat center;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        width: 9.625rem;
        height: 9.625rem;
        line-height: 1;
      }

      p {
        color: #333;
        text-align: center;
        font-family: "Noto Sans JP";
        font-size: var(--font-size-l);
        font-style: normal;
        font-weight: 700;
        line-height: 160%; /* 28.8px */
      }
    }
  }

  /* angle-down */
  .angle-down {
    align-items: center;
    display: flex;
    height: 64px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* solution_container */
  .solution_container {
    display: flex;
    flex-direction: column;
    gap: 6.25rem;
    width: 100%;

    .headline {
      font-size: 2.125rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.5;
      margin: 0 auto;
      text-align: center;

      span {
        color: var(--secondary-color);
      }
    }
  }

  .solution_column {
    display: flex;
    flex-direction: column;
    gap: 100px;
    max-width: 62.5rem;
    margin: 0 auto;
  }

  .solution_item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:nth-child(even) {
      flex-direction: row-reverse;
    }
  }

  .solution_text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 48%;
    color: var(--gray-scale-color);
  }

  .solution_title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015rem;
    line-height: 1.8;
    color: var(--base-color);
  }

  .solution_label {
    font-size: 1.3125rem;
    color: var(--secondary-color);
    font-weight: 700;
    line-height: 1.6;
  }

  .solution_figure {
    width: 48%;
    line-height: 0;
    flex-shrink: 0;

    & img {
      width: 100%;
    }
  }

}


/* section_suggestion_box  */
.section_suggestion_box {
  padding: 5.01rem 1.25rem 8.29rem;

  .suggestion_box {
    display: flex;
    width: 100%;
    max-width: 75rem;
    padding: 3.75rem min(6.9444%, 6.25rem);
    align-items: flex-start;
    gap: 8%;
    border-radius: 1rem;
    background: #EFFCF5;
    margin: 0 auto;

    .suggestion_item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
      flex-shrink: 0;
      color: var(--gray-scale-color);

      .suggestion_item-img {
        width: 37px;
        height: 30px;

      }
    }

    .suggestion_title {
      color: var(--base-color);
      font-family: "Noto Sans JP";
      font-size: 1.3125rem;
      font-style: normal;
      font-weight: 700;
      line-height: 100%;
      align-self: stretch;
    }
  }

}


/* section_fullstack */
.section_fullstack {
  width: 100%;
  display: block;
  background-image:url(../images/bg-fullstack-arrow.svg), url(../images/bg-fullstack.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: center 2rem, center center;
  background-size: 87.125rem auto, cover;
  overflow: hidden;

  .fullstack_inner {
    display: flex;
    max-width: 62.5rem;
    margin: 0 auto;
    padding: 8.75rem 1.25rem 7.51rem;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }

  .fullstack_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }

  .fullstack_head_top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    align-self: stretch;
    margin: 0 auto;
    max-width: 760px;

    .sub_headline {
      text-align: center;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.5;
      align-self: stretch;
    }

    .fullstack_headline {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .37rem 0;
      text-align: center;
      font-feature-settings: 'halt' on, 'palt' on;
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.06em;

      & span {
        display: inline-block;
        border-bottom: 8px solid var(--secondary-color);
      }
    }
  }

  .fullstack_head_text {
    max-width: 800px;
    color: var(--gray-scale-color);
    span {
      color: #F57;
      font-weight: 700;
    }
  }

  .fullstack_column {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }

  .fullstack_item {
    display: flex;
    align-items: center;
    gap: 2.5rem;

    &:nth-child(even) {
      flex-direction: row-reverse;
    }
  }

  .fullstack_summary {
    display: flex;
    flex: 1;
    width: 48%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;

    .app-run {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .77rem;
    }

    .title {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.8;
    }

    .text {
      padding-top: .5rem;
      color: var(--gray-scale-color);
    }

    .note_list {
      li {
        color: var(--secondary-color);
        font-size: .875rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -.011em;
        align-self: stretch;
        &::before {
          content: "※";
        }
      }
    }
  }

  .fullstack_figure {
    width: 48%;
    line-height: 0;
    flex-shrink: 0;

    & img {
      width: 100%;
    }
  }
}

/* section-fullstack */
.layout_contact {
  background: var(--primary-color) url(../images/illust-cta-bg.svg) no-repeat right center;
  background-size: 40.625% auto;
  padding: 5rem 0 4.75rem;
  width: 100%;
  flex-shrink: 0;

  .contact_inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;

    &::before {
      content: url(../images/illust-cta.svg);
      position: absolute;
      left: 0;
      margin: 0 auto;
      float: left;
    }
  }

  .cta_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.44rem;
    max-width: 42.5rem;
    margin: 0 auto;

    .cta_title {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: .625rem 0;
      & span {
        color: #fff;
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        padding: 0.375rem 0rem;
        background: linear-gradient(transparent 34px, #FDB813 0%);
      }

      & small {
        font-size: 24px;
      }
    }

    .cta_text {
      color: #fff;
      text-align: center;
      font-weight: 700;
    }
  }

  .cta_menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    .link_to_contact {
      width: 100%;
      max-width: 400px;
      height: 70px;
      font-size: 1.125rem;
      margin: 0 auto;
    }
  }

  .cta_nav_list {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cta_nav_item {
    min-width: 12.75rem;
    border-left: 1px solid #fff;
    & a {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: .53rem 1rem;
      color: #fff;
      font-size: .875rem;
      line-height: 1;
    }

    &:last-child {
      border-right: 1px solid #fff;
    }
  }
}

/* section_cases */
.section_cases {
  padding: 6.25rem 1.25rem;

  .cases_inner {
    display: flex;
    flex-direction: column;
    gap: 5rem;

    .headline {
      text-align: center;
      font-size: 2.125rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1;
    }
  }

  .cases_list {
    display: flex;
    justify-content: center;
    gap: 0 4.8333%;

    & li {
      flex: 1;
      border-radius: 10px;
      box-shadow: 0px 0px 20px 0px rgba(152, 166, 193, 0.25);
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
    }

    .case_link {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .case_image {
      order: -1;
      overflow: hidden;
    }

    .case_image img {
      transition: transform ease 0.5s;
      width: 100%;
    }



    .case_summary {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: var(--gray-scale-color);
      padding: 1rem 1.5rem 1.87rem;
    }

    .case_customer {
      text-align: center;
      margin: 0 0 1.19rem;
    }

    .case_description {
      color: var(--gray-scale-color);
      line-height: 1.8;
      margin: 0 0 1.75rem;
    }


    .case_data{
      margin-top: auto;
      & dl {
        & dt {
          display: flex;
          align-items: center;
          gap: .25rem;
          font-size: 0.9375rem;
          font-weight: 700;
          &::before {
            content: "";
            display: block;
            width: 1rem;
            height: 1rem;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
        & dd {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1rem;
          font-weight: 700;
          line-height: 1.2;
          padding: .38rem 0;
          min-height: 3.125rem;
          text-align: center;
          color: #fff;
        }
      }
    }

    .case_data_probrem {
      & dt {
        color: #386ECE;
        &::before {
          background-image: url(../images/icon_cases_theme.svg);
        }
      }
      & dd {
        background: #386ECE;
        position: relative;
        &::after {
          content: "";
          display: block;
          margin: 0 auto;
          width: 0;
          height: 0;
          border-left: 12px solid transparent;
          border-right: 12px solid transparent;
          border-top: 12px solid #386ECE;
          position: absolute;
          left: 0;
          right: 0;
          bottom: -0.5rem;
          margin: 0 auto;
        }
      }
    }

    .case_data_effect {
      & dt {
        color: #00C7DD;
        &::before {
          background-image: url(../images/icon_cases_effect.svg);
        }
      }
      & dd {
        background: #00C7DD;
      }
    }

  }
}


/* お役立ち資料 */

.section-documents {
  background: #F5F8FA;
  padding: 6.25rem 1.25rem;
  width: 100%;
  flex-shrink: 0;

  .headline {
    text-align: center;
    font-size: 2.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;

  }

  .documents_inner {
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }

  .documents_contents {
    display: flex;
    flex-direction: column;
    gap: 2.29rem;
  }

  .documents_list {
    display: flex;
    gap: 0 4.8333%;
    flex-shrink: 0;
    margin: 0 auto;

    & li {
      flex: 1;
    }
  }

  .document_link {
    background: #FFF;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(152, 166, 193, 0.25);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    height: 100%;
  }

  .document_summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    padding: 1.5rem 1.87rem 2.38rem;

    p {
      color: var(--gray-scale-color);
      font-family: "Noto Sans JP";
      font-size: 1.0625rem;
      line-height: 1.8;
    }

    .download {
      color: var(--secondary-color);
      font-size: 1.0625rem;
      font-weight: 500;
      line-height: 1;
      text-align: center;
      margin-top: auto;
    }
  }
  .document_img {
    order: -1;
    overflow: hidden;

    img {
      transition: transform ease 0.5s;
      width: 100%;
    }
  }

  .document_more_link {
    align-self: flex-end;
    color: #1C1CEF;
    font-weight: 500;
    line-height: 1;
  }
}

/*
  FOOTER
*/

.layout_footer {
  height: 55px;
  flex-shrink: 0;
  border-top: 1px solid #EAEAEA;
  background: #FFF;
  margin: 0 auto;

  .footer-line_inner {
    margin: 0 auto;
    padding: 20px;
    text-align: justify;
    color: #666;
    font-family: "Noto Sans JP";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 13px */

    .footer-copyright {
      color: #666;
      text-align: right;
      font-family: "Noto Sans JP";
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 100%; /* 14px */
    }
  }
}

@media screen and (min-width: 768px) {
  .nav_item a:hover,
  .cta_nav_item a:hover{
    text-decoration: underline;
  }

  .cta-dl-banner {
    position: relative;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity .3s;
    }
    &:hover {
      &::before {
        opacity: .2;
      }
    }
  }
  .case_link:hover {
    opacity: 0.7;
  }

  .case_link:hover .case_image img {
    transform: scale(1.15);
  }

  .document_link:hover .document_img img {
    transform: scale(1.15);
  }

  .document_link:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 1024px) {
  .layout_hero {
    &::after {
      width: 600px;
      min-width: inherit;
      top: 79px;
    }
  }
}

@media screen and (max-width: 959px) {
  .layout_header {
    & .layout_nav {
      display: none;
    }
  }
  .layout_hero {
    &::after {
      width: 39.0625%;
      height: auto;
      padding: 36.32812% 0 0;
      background: url(../images/illust-hero-sp.svg) no-repeat right center;
      background-size: cover;
      min-width: inherit;
      top: 11.84rem;
      right: 0;
    }
  }
  .layout_contact {
    & .contact_inner {
      &::before {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 767px) {

  .layout_header {
    padding: 1.4rem 1.03rem;
    position: relative;

    .header_logo {
      width: 8.13rem;
    }
  }
  .layout_hero {
    background: url(../images/sp-bg-hero.png);
    position: relative;
    height: 100%;
    min-height: inherit;
    padding: 1.45rem 0 2.75rem;

    &::before {
      display: none;
    }

    &::after {
      width: 43.0769%;
      padding: 40% 0 0;
      top: 11.84rem;
      right: 0;
    }


    .hero_inner {
      position: relative;
      top: 0;
      transform: none;
      padding: 0 1rem;

      .sakura-cloud_logo {
        width: 13.08788rem;
        margin: 0 0 1.76rem;
      }
    }

    .hero_content {
      gap: 1rem;
      margin: 0 0 2rem;

      .cta-dl-banner {
        width: 100%;
      }
    }

    .hero_headline {
      font-size: 1.5rem;
      white-space: nowrap;
    }

    .hero_catchphrase {
      font-size: 1.75rem;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: .25rem;
      .hero_label {
        font-size: 2.5rem;
      }
    }
  }

  .sp_hero_footer {
    width: 100%;
    .layout_nav {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 1rem 0;
      .nav_item {
        width: 50%;
        min-width: inherit;
        & a {
          padding: .56rem .5rem;
        }
      }
      .nav_cta_button {
        font-size: var(--font-size-l);
        padding: 1.62rem 0;
      }
    }
  }

  .section_problem_solution {
    padding: 2.5rem 0 0;
    & .problem_solution_inner {
      margin: 0 1rem;
    }
    & .problem_container {
      gap: 2.5rem;
      .headline {
        font-size: 1.75rem;
      }
    }
    & .problem_list {
      flex-direction: column;
      align-items: center;
    }

    & .solution_container {
      gap: 2.5rem;
      .headline {
        font-size: 1.625rem;
      }
    }
    & .solution_item {
      flex-direction: column-reverse;
      align-items: center;
      gap: 2rem;
      &:nth-child(even) {
        flex-direction: column-reverse;
      }
    }

    & .solution_text {
      width: 100%;
      gap: 1.5rem;
    }

    & .solution_title {
      font-size: 1.25rem;
    }

    & .solution_label {
      font-size: var(--font-size-l);
    }

    & .solution_figure {
      width: 100%;
    }
  }

  .section_suggestion_box {
    padding: 4rem 1rem;
    .suggestion_box {
      padding: 2rem 1rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;

      .suggestion_item {
        width: 100%;
        gap: 1rem;

      }
      .suggestion_title {
        font-size: 1.25rem;
      }
    }
  }

  .section_fullstack {
    padding: 4.45rem 0 4rem;
    background-image: url(../images/bg-fullstack-arrow-sp.svg), url(../images/bg-fullstack-sp.svg);
    background-position: center 2.42rem, center center;
    background-size: 100% auto, cover;
    & .fullstack_inner {
      padding: 0 1rem;
      gap: 4rem;

    }
    .fullstack_head {
      gap: 2.5rem;
    }

    .fullstack_head_top {
      .sub_headline {
        font-size: 1.5rem;
      }

      .fullstack_headline {
        font-size: 2rem;
      }
    }
    .fullstack_head_text {
    }

    .fullstack_column {
      gap: 4rem;

      .fullstack_item {
        flex-direction: column;
        gap: 1.5rem;
      }

      .fullstack_item {
        &:nth-child(even) {
          flex-direction: column;
        }
    }

    .fullstack_summary {
      width: 100%;
    }

    .fullstack_figure {
      width: 100%;
    }
  }
}

  .layout_contact {
    padding: 3.5rem 0;
    background: var(--primary-color);
    .contact_inner {
      padding: 0 20px;
      height: 100%;
      gap: 1.5rem;
      &::before {
        display: none;
      }
    }

    .cta_head {
      gap: 1rem;

      .cta_title {
        gap: .5rem;
        & span {
          font-size: 1.5rem;
          background: linear-gradient(transparent 26px, #FDB813 0%);
        }

        & small {
          font-size: 1.25rem;
        }
      }
    }

    .cta_menu {
      gap: 1rem;
    }

    .cta_nav_item {
      width: 50%;
      min-width: inherit;

      & a {
        font-size: 0.8125rem;
        padding: .56rem 0;
      }
    }
  }

  .layout_footer {
    .footer-line_inner {
      width: 100%;
    }
  }

  .section_cases {
    padding: 3.5rem 0;
    .cases_inner {
      gap: 2.5rem;
    }
    .cases_list {
      flex-direction: column;
      gap: 2.5rem;
    }
  }

  .section-documents {
    padding: 3.5rem 0;
    .documents_inner {
      gap: 2.5rem;
    }
    .documents_list {
      flex-direction: column;
      gap: 2.5rem;
    }
  }
}