.system {
  padding: 40px 20px;
  background-color: #cfe4e9; }
  .system > section {
    opacity: 0;
    bottom: -10px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    background-color: #fff;
    padding: 30px 20px;
    margin-bottom: 30px;
    position: relative; }
    .system > section.active {
      opacity: 1;
      bottom: 0; }
    .system > section::before {
      content: '';
      width: 25%;
      height: 5px;
      background-color: #0e7a92;
      position: absolute;
      top: 0;
      left: 0; }
    .system > section:last-child {
      margin-bottom: 0; }
    @media (min-width: 669px) {
      .system > section {
        margin: 0 auto 30px;
        max-width: 1200px;
        padding: 30px;
        box-sizing: border-box; } }
    .system > section .txt h2 {
      font-weight: 500;
      margin: 0 0 10px;
      font-size: 19px;
      font-size: clamp(17px, 3vw, 19px); }
      @media (min-width: 669px) {
        .system > section .txt h2 {
          margin-bottom: 20px;
          font-size: 25px;
          font-size: clamp(20px, 3vw, 25px); } }
    .system > section .txt p {
      margin: 0; }
    .system > section .txt .flex-box-pc {
      margin-top: 20px; }
      .system > section .txt .flex-box-pc ul {
        list-style-type: none;
        padding-left: 0;
        margin: 0 0 5px; }
        .system > section .txt .flex-box-pc ul:last-child {
          margin-bottom: 0; }
        .system > section .txt .flex-box-pc ul li {
          position: relative;
          padding-left: 15px;
          margin-bottom: 5px; }
          .system > section .txt .flex-box-pc ul li:last-child {
            margin-bottom: 0; }
          .system > section .txt .flex-box-pc ul li::before {
            content: '';
            width: 8px;
            height: 8px;
            background-color: #0e7a92;
            position: absolute;
            left: 0;
            top: 10px; }
          .system > section .txt .flex-box-pc ul li span.etc {
            display: inline-block;
            margin-left: -15px; }
      @media (min-width: 669px) {
        .system > section .txt .flex-box-pc ul {
          width: 33%;
          margin-bottom: 0; } }
    @media (min-width: 669px) {
      .system > section .txt {
        padding: 20px 30px 30px 15px;
        box-sizing: border-box; } }
    @media (min-width: 669px) {
      .system > section.flex-box-pc > .txt {
        width: calc(100% - 35.555555%); } }
    .system > section .img {
      text-align: center;
      margin-top: 20px; }
      @media (min-width: 669px) {
        .system > section .img {
          margin-top: 0;
          width: 35.555555%; } }
      .system > section .img picture {
        margin-bottom: 15px;
        display: block; }
        .system > section .img picture:last-child {
          margin-bottom: 0; }
        @media (min-width: 669px) {
          .system > section .img picture {
            margin-bottom: 20px; } }
  @media (min-width: 669px) {
    .system {
      padding: 100px 40px; } }
  .system + .topicPath {
    background-color: #cfe4e9; }