@charset "UTF-8";
/*
  /rakurakucloud/mailmarketing/asset/css/object/module/m-about.css
  「楽楽電子保存」でできることモジュール用CSS
*/
.m-about {
  padding: 40px 30px 30px;
  border-radius: 10px;
  background: var(--white);
  @media screen and (max-width: 840px) {
    padding: 20px;
    margin: 0 auto;
    .c-heading-lead {
      text-align: center;
    }
  }
}
.m-about:nth-child(n + 2) {
  margin: 25px 0 0 0;
}
.m-about-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  @media screen and (max-width: 840px) {
    display: block;
  }
}
.m-about-item {
  align-items: center;
  background-color: var(--gray-bg-02);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  line-height: 24px;
  padding: 30px 20px;
  position: relative;
  text-align: center;
  min-width: 300px;
  min-height: 80px;
  @media screen and (max-width: 840px) {
    margin: 0 0 20px;
  }
  &::after {
    border: 10px solid transparent;
    border-top-color: var(--gray-bg-02);
    bottom: -18px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
  }
}
.m-about__image-wrap {
  max-width: 800px;
  margin: 30px auto 0;
}
.m-about__text-wrap {
  text-align: center;
  margin: 30px auto 0;
  .c-heading-lead {
    margin: 20px 0 0;
  }
}
.m-about__sub-title {
  font-size: 20px;
  font-weight: bold;
}
.m-about__title {
  font-size: 24px;
  font-weight: bold;
}
.m-about__title-large {
  font-size: 30px;
  font-weight: bold;
}

/* イラストで表現した製品説明ver */
.m-about-3column-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
  @media screen and (max-width: 840px) {
    display: block;
  }
}
.m-about-3column-item {
  background-color: var(--white);
  border-radius: 10px;
  padding: 40px 30px;
  @media screen and (max-width: 840px) {
    margin: 0 0 30px;
  }
}
.m-about-3column__icon-wrap {
  max-width: 196px;
  margin: 0 auto 30px;
}
.m-about-3column__text {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}