#company{
  background: linear-gradient(180deg, #fff 0%, #fff 118.7rem, #f9f9f9 118.7rem, #c4d7d1 100%);
  padding: 6.3rem 0 7.2rem;
  @media (width >= 961px) {
    background: linear-gradient(180deg, #fff 0%, #fff 93.9rem, #f9f9f9 93.9rem, #c4d7d1 100%);
    padding: 9rem 0 10rem;
  }

  .intro {
    margin: 0 auto;
    padding: 0 2rem;
    width: 36rem;
    @media (width >= 961px) {
      width: 96rem;
    }

    .lead {
      font-size: 2.2rem;
      line-height: 1.8;
      margin: 0 0 2.4rem;
      padding: 0;
      @media (width >= 961px) {
        font-size: 2.4rem;
      }
      
      span {
        background: #E6E61F;
        padding: 0 .5rem;
        &:nth-of-type(2) {
          padding: 0 .5rem 0 0;
        }
      }
    }

    .desc {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0;
    }
  }
}

#message {
  background: #F9F9F9;
  overflow: hidden;
  padding: 7.2rem 0 8.3rem;
  position: relative;
  @media (width >= 961px) {
    padding: 9rem 0;
  }

  &::before {
    bottom: -2.4rem;
    color: #FEFEFE;
    content: "MURAKATA INC. MURAKATA INC.";
    font-family: "Roboto", sans-serif;
    font-size: 15rem;
    font-weight: 700;
    left: -2rem;
    line-height: 1;
    position: absolute;
    white-space: nowrap;
    @media (width >= 961px) {
      bottom: -4.3rem;
      font-size: 18rem;
      left: -.7rem;
    }
  }

  .section-header {
    .lead {
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.8;
      margin: 0 0 2.4rem;
    }

    .desc {
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0 0 2.4rem;
    }

    > div {
      text-align: right;

      > div {
        display: inline-block;
        margin: 0 0 0 auto;
        position: relative;
        text-align: left;
        width: auto;
        z-index: 10;

        p {
          font-size: 1.4rem;
          line-height: 1.8;
          margin: 0;
        }

        img {
          height: auto;
          margin: 0;
          width: 15.9rem;
        }
      }
    }
  }
}

#overview {
  padding: 8.8rem 0 7.2rem;
  @media (width >= 961px) {
    padding: 11rem 0 10rem;
  }

  .access {
    margin: 0 auto;
    padding: 0 2rem;
    width: 36rem;
    @media (width >= 961px) {
      display: flex;
      justify-content: space-between;
      width: 96rem;
    }

    dl {
      align-items: center;
      display: flex;
      font-size: 1.6rem;
      line-height: 1.8;
      margin: 0;
      padding: 0;
      @media (width >= 961px) {
        width: 42.1rem;
      }

      dt {
        border-bottom: .1rem solid #E6E61F;
        padding: 2.2rem 0;
        white-space: nowrap;
        width: 6.5rem;
      }

      dd {
        border-bottom: .1rem solid #797979;
        font-weight: 400;
        margin: 0;
        padding: 2.2rem 0 2.2rem 2rem;
        width: calc(100% - 6.5rem);
      }

      &:first-of-type {
        dt {
          padding: 0 0 2.2rem;
        }

        dd {
          padding: 0 0 2.2rem 2rem;
        }
      }
      &:nth-of-type(2) {
        dt, dd {
          height: 10.2rem;
          @media (width >= 961px) {
            height: auto;
          }
        }
      }
      &:last-of-type {
        dt, dd {
          height: 13.1rem;
          @media (width >= 961px) {
            height: 10.2rem;
          }
        }
      }      
    }
    .map {
      border-radius: 1.6rem;
      height: 19.7rem;
      margin: 0 0 2.4rem;
      overflow: hidden;
      position: relative;
      width: 100%;
      @media (width >= 961px) {
        height: 29rem;
        margin: 0;
        width: 43.6rem;
      }

      iframe {
        height: 9.85rem;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) scale(2);
        width: 14rem;
        @media (width >= 961px) {
          height: 100%;
          position: static;
          transform: translate(0, 0) scale(1);
          width: 100%;
        }
      }
    }
  }
}

#history {
  background: #F9F9F9;
  padding: 7.2rem 0;
  @media (width >= 961px) {
    padding: 9.5rem;
  }

  dl {
    display: flex;
    gap: 1.6rem;
    margin: 0 auto;
    padding: 0 2rem;
    width: 36rem;
    @media (width >= 961px) {
      gap: 4.2rem;
      width: 96rem;
    }

    dt {
      border-right: .1rem solid #8D8D8D;
      color: #5F5F5F;
      font-size: 1.8rem;
      line-height: 3.2rem;
      margin: 0;
      position: relative;
      width: 7.6rem;
      @media (width >= 961px) {
        font-size: 3.2rem;
        width: 14.7rem;
      }
      &::before {
        background: #E6E61F;
        border-radius: 50%;
        content: "";
        display: block;
        height: 1rem;
        position: absolute;
        right: 0;
        top: 1.6rem;
        transform: translate(50%, -50%);
        width: 1rem;
        z-index: 10;
      }
    }

    dd {
      display: flex;
      flex-wrap: wrap;
      font-size: 1.5rem;
      line-height: 1.8;
      padding: .25rem 0 4rem;
      margin: 0;
      width: 22.8rem;
      @media (width >= 961px) {
        padding: 0 0 5.4rem;
        font-size: 1.8rem;
        width: 73.1rem;
      }

      > span {
        display: inline-block;
        &:nth-of-type(odd) {
          width: 4.5rem;
        }
        &:nth-of-type(even) {
        width: calc(100% - 4.5rem);
        }
        &:nth-of-type(n + 3) {
          padding: 1.6rem 0 0;
        }
      }
    }

    &:first-of-type, &:last-of-type {
      dt {
        &::after {
          background: #F9F9F9;
          content: "";
          display: block;
          height: 1.6rem;
          position: absolute;
          right: -.15rem;
          top: 0;
          width: .3rem;
        }
      }
    }
    &:last-of-type {
      dt {
        &::after {
          height: calc(100% - 1.6rem);
          top: 1.6rem;
        }
      }
    }
  }

  >p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: left;
    width: 36rem;
    @media (width >= 961px) {
      width: 96rem;
    }

  }
}