main .section[id] .container::after {
  content: none;
}

.item3x1,
.item3x4 {
  display: grid;
  gap: 60px;
}

.item3x1 {
  gap: 40px;
}
  .shadow {
    box-shadow: 3px 3px 5px rgb(51 51 51 /30%);
  }
  .btn {
    display: flex;
    width: auto;
    font-size: 1.5rem;
    padding: 0.5em 1em;
    background: var(--main-color);
    color: #fff;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    .icon {
      vertical-align: bottom;
    }
    .icon:first-child {
      margin-right: 8px;
    }
    .icon:last-child {
      margin-left: 8px;
    }
    .icon:only-child {
      background: #000;
    }
  }

#consultation {
  #flow {
    .container {
      max-width: var(--lg);
      padding-right: 16px;
      padding-left: 16px;
    }
    .item3x4 {
      padding-right: 24px;
      padding-left: 24px;
    }
  }
  .flow__list {
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    grid-template-columns: 36% auto;
    gap: 60px;
  }
  .flow__wrapper {
    position: relative;
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    grid-row: span 1;
    gap: 1rem;
    &:last-child .flow__title::after {
      content: none;
    }
  }

  .flow__title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-column: 1 / 2;
    background: #f089ca;
    color: #fff;
    min-height: 60px;
    border-radius: 4px;
    &::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      content: "";
      border: 20px solid transparent;
      border-top-color: rgb(240 137 202/50%);
      border-right-width: 60px;
      border-left-width: 60px;
      top: calc(100% + 20px);
      right: 0;
      left: 0;
      margin: auto;
    }
  }
  .title__step {
    margin-bottom: 0.5em;
  }
  .title__text {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.2;
  }
  .flow__text {
    display: flex;
    align-items: center;
    margin: 0;
    grid-column: 2 / -1;
  }

  .flow2__wrapper {
    display: grid;
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
    justify-content: center;
  }
  .flow2__figure {
    max-width: 250px;
    margin-right: auto;
    margin-left: auto;
    grid-row: 1 / 2;
  }
  .flow2__step {
    grid-row: 2 / 3;
    font-size: 1.1rem;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
  }
  .flow2__text {
    max-width: 80%;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    color: var(--navy);
    grid-row: 3 /-1;
  }
}

/* 会社概要 */
#company {
  #contact {
    .container {
      padding-right: 24px;
      padding-left: 24px;
    }
  }
  .contact__wrapper {
    display: grid;
    justify-content: center;
    padding: 24px;
    background: #f5f5f5;
  }

  .contact__figure {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-bottom: 24px;
  }

  .contact__title {
    font-size: 1.25rem;
    text-align: center;
    line-height: 1.2;
    font-weight: normal;
  }

  .contact__contents {
    margin-bottom: 0;
  }
  .content__wrapper {
    display: grid;
    gap: 0.5rem;
    &:not(:last-child) {
      margin-bottom: 1.25rem;
    }
  }
  .content__name,
  .content__detail {
    margin: auto;
  }
  .content__name {
    text-align: center;
  }

  .content__detail {
    color: var(--navy);
    text-align: center;
  }

  .content__detail {
    line-height: 1.2;
    font-size: 1.5em;
  }

  .info__wrapper {
    margin-bottom: 64px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .info__map {
    margin-bottom: 64px;
  }
  .info__content:not(:last-child) {
    margin-bottom: 32px;
  }

  .info__name {
    font-size: 1.1em;
    margin-bottom: 0.5em;
    color: var(--navy);
  }

  .content__list {
    .list__item {
      margin-bottom: 0.25em;
    }
  }

  .partner {
    padding-right: 24px;
    padding-left: 24px;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(4, auto);
    gap: 40px;
  }
  .partner__wrapper {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    gap: 1rem;
  }
  .partner__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin: auto;
    > figure {
      flex-basis: 50%;
    }
    img {
      max-height: 80px;
      width: auto;
    }
  }
  .partner__name {
    grid-row: 2/-1;
    text-align: center;
    line-height: 1.2;
    font-weight: bold;
  }
}

/* 制作実績・その他の取り組み */
#social {
  .section .container {
    max-width: var(--lg);
  }

  .section__title {
    text-align: center;
  }
}

#achievements {
  .container.grid {
    padding-right: 24px;
    padding-left: 24px;
    gap: 36px;
  }
  .wrap {
    justify-self: center;
    align-self: end;
  }
  .btn {
    display: flex;
  }
}
.achievements__list {
  .list__item {
    margin-bottom: 4px;
  }
}

#other {
  .container.grid {
    padding-right: 24px;
    padding-left: 24px;
    gap: 40px;
  }
}
#smrj,
#smartSME {
  .section__title {
    font-size: 1.5rem;
  }
  .section__header {
    margin-bottom: 24px;
  }
}
#smartSME {
  .container.grid {
  gap: 0;
  grid-template-rows: repeat(2,auto);
  height: auto;
  }
}
#caseStudy {
  .container.grid {
    gap: 64px;
  }
}

.caseStudy__wrapper {
  padding-right: 16px;
  padding-left: 16px;
}
.caseStudy__outline {
  margin-bottom: 0.5em;
  font-size: 0.8em;
  color: var(--black);
  grid-row: 1 / 2;
  grid-column: 1 / -1;
}
.caseStudy__title {
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--black);
  grid-row: 2 / -1;
  grid-column: 1 / 2;
  line-height: 1.2;
}
.caseStudy__logo {
  grid-row: 1 / -1;
  grid-column: 2 / -1;
  display: flex;
  align-items: end;
  margin-bottom: 8px;
}
.caseStudy__header {
  .header__wrapper {
    display: grid;
    grid-template-columns: auto 24%;
    grid-template-rows: repeat(2, auto);
    gap: 0 8px;
    margin-bottom: 10px;
    border-bottom: 5px solid var(--main-color);
  }
}
.caseStudy__lead {
  font-size: 1.125rem;
}

.caseStudy__contents {
  .content__image {
    margin-bottom: 36px;
  }
  .content__list {
    display: inline-flex;
    flex-wrap: wrap;
  }
  .list__item {
    background: #586d8a;
    color: #fff;
    font-size: 0.875rem;
    padding: 0.5em;
    border-radius: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
  }
}

/* 公開事例 */
#case {
  .container:first-of-type {
    max-width: var(--lg);
    padding-right: 16px;
    padding-left: 16px;
  }
  section {
    color: #333;
    padding-block: 16px;
  }
  h4 {
    font-size: 1.1rem;
    padding-left: 16px;
    border-left: 8px solid var(--main-color);
  }
  h5 {
    font-size: 1rem;
    display: inline-flex;
    &::before {
      display: block;
      content:"";
      width: 0;
      height:  0;
      margin-top: .3em;
      border: 6px solid transparent;
      border-left:10px solid var(--main-color);
    }
  }
  p {
    font-size: .9rem;
    line-height: 1.4;
  }
  b {
    color: var(--main-color);
  }
  ul {
    margin-bottom: 1em;
    font-size: .9rem;
  }
  li {
    display: flex;
    &::before {
      display: block;
      width: 0.25em;
      height: 0.25em;
      margin-top: .4em;
      margin-right: .5em;
      background: #333;
      content: "";
      border-radius: 10px;
    }
  }

  li + li {
    margin-top: .5em;
  }
  .table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 16px;
    table {
      width:max-content;
      min-width: 100%;
    }
  }
}

@media (width > 576px) {
  .item3x4 {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(18, auto);
    gap: 60px 30px;
  }
  #consultation {
    .flow2__wrapper {
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
    .flow2__wrapper {
      gap: 0;
    }
    .flow2__figure {
      padding: 0;
    }
    .flow2__step {
      align-self: center;
    }
    .flow2__text {
      align-items: start;
    }
  }

  #company {
    .item3x1 {
      grid-template-columns: minmax(150px, 30%) auto;
    }
    .contact__wrapper {
      grid-column: span 2;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: repeat(2, auto);
      gap: 0;
    }
    .contact__figure {
      display: grid;
      align-items: center;
      grid-column: 1 /2;
      grid-row: 1 / -1;
      height: auto;
      margin: 0;
    }
    .contact__title {
      grid-column: 2 / -1;
      grid-row: 1 / 2;
    }

    .contact__contents {
      grid-column: 2 / -1;
      grid-row: 2 / -1;
    }
    #info {
      .container.grid {
        padding-right: 24px;
        padding-left: 24px;
        max-width: var(--xl);
        grid-template-columns: auto minmax(300px, 50%);
      }
    }
    .info__wrapper {
      padding-right: 0;
      padding-left: 0;
    }

    .partner {
      grid-column: 1 / -1;
    }
  }

  #social {
  }
  #achievements {
    .container.grid {
      grid-template-columns: auto 40%;
    }
  }

  #smartSME {
    .container.grid {
      grid-template-columns: auto 40%;
    }
  }
  .caseStudy__header {
    margin-bottom: 36px;
    .header__wrapper {
      grid-template-columns: auto minmax(100px, 180px);
      grid-template-rows: repeat(3, auto);
    }
  }
  .caseStudy__outline {
    grid-row: 2 /3;
  }
  .caseStudy__title {
    grid-row: 3 / -1;
  }

  .caseStudy__contents {
    display: grid;
    grid-template-columns: 36% auto;
    grid-template-rows: repeat(2, auto);
    gap: 10px 24px;
  }
  .content__image {
    grid-column: 1 / 2;
    grid-row: 1 / -1;
  }

  .content__text {
    grid-column: 2 / -1;
    grid-row: 1 / 2;
  }
  .content__list {
    grid-column: 2 / -1;
    grid-row: 2 / -1;
    align-self: self-start;
  }
}
@media (width >= 959px) {
  .item3x4 {
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(12, auto);
  }
  #consultation {
    .flow2__step {
    }
  }
  #company {
    .item3x1 {
      max-width: var(--xl);
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: minmax(120px, max-content) repeat(2, auto);
    }

    .contact__wrapper {
      grid-template-rows: subgrid;
      grid-column: span 1;
      grid-row: span 3;
    }
    .contact__figure {
      grid-row: 1 / 2;
    }
    .contact__title {
      grid-row: 2 / 3;
      align-self: center;
    }
    .contact__contents {
      grid-row: 3 / -1;
      align-self: center;
    }

    .partner {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, auto);
    }
  }
  #other {
    .container.grid {
      max-width: var(--xl);
      grid-template-columns: repeat(2,1fr);
    }
  }
#case {
  p {
    font-size: 1rem;
  }
  ul {
    font-size: 1rem;
  }
 }

  #structure {
    display: grid;
    grid-template-columns: auto 30%;
    gap: 40px;
  }
}