section#cover {
  height: auto !important;

  background: url('../img/tcj-dic-partnership-top.webp') no-repeat center center;
  background-size: 100% auto;
  aspect-ratio: 2874 / 1560;

  @media (width <=575px) {
    margin-top: 70px;
    background: url('../img/tcj-dic-partnership-top-s.webp') no-repeat center center;
    background-size: auto 100%;
    aspect-ratio: 603 / 846;
  }
}



main {
  section {
    padding-top: 110px !important;
    padding-bottom: 110px !important;
    margin: 0 !important;

    h2 {
      margin-top: 0 !important;
      font-size: 30px;
      font-weight: bold;

      @media (width < 575px) {
        font-size: 18px;
      }

      &.red {
        color: #8a2b2b;
      }
    }
  }

  .container {
    width: 80%;
    max-width: 1100px;
    margin-left: auto !important;
    ;
    margin-right: auto !important;
    ;
  }

  section#what-is-obd-itto {
    div.support-items {
      figure {
        text-align: center;

        &.tcj {

          span,
          h3,
          h4 {
            color: #8C1E23 !important;
          }
        }

        &.dic {

          span,
          h3,
          h4 {
            color: #034E7E !important;
          }
        }

        figcaption {
          h3 {
            margin-top: 30px;
            font-size: 32px;

            @media (width <=575px) {
              font-size: 22px;
            }

            font-family: 'Noto Sans JP',
            sans-serif;
          }

          h4 {
            margin: 20px auto;
          }

          p {
            padding: 0;
          }
        }
      }
    }

    p#integration {
      text-align: center;
      background-color: #F3E6E6;
      margin: 40px auto;
      padding: 10px;
    }
  }

  section#features {
    background-color: #E7F0F6;

    h2 {
      margin-bottom: 50px;
    }

    div.support-items {
      display: grid;
      grid-template-columns: repeat(3, auto);

      @media (width < 992px) {
        grid-template-columns: repeat(2, auto);
      }

      @media (width < 575px) {
        grid-template-columns: repeat(1, auto);
      }


      &>div {
        padding: 35px 25px;
        background-color: #fff;

        h3 {
          font-family: 'Noto Serif JP', serif;
          color: #034E7E;
          text-align: center;
          font-size: 18px;
          margin-bottom: 10px;
        }

        p {
          font-size: 13px;
          margin-bottom: 0;

        }
      }
    }
  }

  section#integration-workflow{
    figure{
      width: 90%;
      max-width: 600px;
      margin: 0 auto;
      img{
        width: 100%;
      }
    }
  }

  section#user-experience-scenario {
    background-color: #E7F0F6;

    &>p {
      text-align: center;
      margin-bottom: 25px;
    }

    div+div {
      margin-top: 25px;
    }

    div.scene {
      background-color: #fff;
      padding: 28px 32px;

      h3 {
        font-size: 25px;
        display: flex;

        @media (width <=575px) {
          flex-direction: column;
          font-size: 18px;
        }

        gap: 24px;
        align-items: center;
        margin-bottom: 25px;

        span {
          display: inline-block;
          width: 200px;
          padding: 24px;
          background-color: #034E7E;
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          text-align: center;

          @media (width <=575px) {
            font-size: 16px;
            padding: 10px;
          }
        }
      }

      p.scenario-result {
        margin-top: 25px;
        display: flex;
        align-items: center;
        gap: 12px;

        /* アイコンとテキストの間隔 */
        &::before {
          content: "";
          display: block;
          flex-shrink: 0;
          width: 32px;
          /* 外枠の幅 */
          height: 32px;
          /* 外枠の高さ */
          background-color: #F3E6E6;
          /* 外枠の背景色 */

          /* SVGの色を #8C1E23 に書き換えたData URI */
          background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none' /%3E%3Cpath fill='%238C1E23' d='M9 20h6v2H9zm-.83-4.95c.41.62.62 1.36.72 1.95H8v2h8v-2h-.89c.11-.59.31-1.33.72-1.95c.36-.54.76-1.01 1.14-1.46c1-1.18 2.03-2.39 2.03-4.6c0-3.86-3.14-7-7-7s-7 3.14-7 7c0 2.21 1.03 3.42 2.02 4.58c.39.45.78.92 1.15 1.47ZM12 4c2.76 0 5 2.24 5 5c0 1.47-.62 2.2-1.55 3.3c-.4.47-.85 1-1.28 1.64c-.68 1.03-.97 2.23-1.09 3.06h-2.17c-.12-.83-.4-2.03-1.08-3.05c-.43-.65-.89-1.19-1.29-1.66C7.61 11.2 7 10.48 7 9c0-2.76 2.24-5 5-5' /%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 20px;
          /* 中のSVGアイコン自体のサイズ */
        }
      }

    }
  }

  section#user-merit {
    div#user-merit-wrapper {
      display: grid;
      gap: 35px;
      grid-template-columns: repeat(2, 1fr);

      @media (width <=575px) {
        grid-template-columns: 1fr;
      }

      width: 90%;
      max-width: 1300px;
      margin: 0 auto;

      article {
        background-color: #fff;
        padding: 50px;

        @media (width <=575px) {
          padding: 20px;
        }

        span,
        p.merit-free {
          display: inline-block;
          background-color: #F3E6E6;
          font-weight: bold;
          padding: 5px 15px;
          font-size: 13px;
          color: #8C1E23;

          &.no {
            background-color: #F5F5F5;
          }
        }

        p.merit-free {
          font-size: 15px;
          width: 100%;
          text-align: center;
          font-weight: normal;
          padding: 10px;
          margin-top: 50px;

          @media (width <=575px) {
            margin-top: 20px;
          }
        }

        header {
          display: flex;
          gap: 15px;
          margin-bottom: 30px;
        }
      }
    }
  }

  section#tcj-dic-flow {
    div.container {
      max-width: 600px;
    }

    ol.step-list {
      display: grid;
      grid-template-rows: repeat(3, auto);
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      justify-content: right;
      align-items: flex-end;
      gap: 0 20px;

      @media (width <=575px) {
        display: block;
      }

      @media (width >575px) {
        .step-item {
          &:nth-child(3n)::before {
            display: none;
          }
        }
      }
    }
  }

  section#tcj-dic-price {
    background-color: #E7F0F6;

    .cost-cards {
      display: flex;
      gap: 40px;

      @media (width < 992px) {
        flex-direction: column;
      }

      .cost-card {
        flex: 1;
        background-color: #fff;
        padding: 30px;
        align-items: flex-start;

        h3 {
          margin-bottom: 30px;
          color: #034E7E;
          font-size: 24px;

          @media (width < 575px) {
            font-size: 18px;
          }

          font-weight: bold;
        }

        dl {
          display: grid;
          grid-template-columns: 120px 1fr;

          @media (width < 575px) {
            grid-template-columns: 1fr;
          }

          dt,
          dd {
            margin: 0;
            border-bottom: 1px solid #ddd;
            align-content: center;
            padding: 15px 0;
            font-size: 16px;
          }

          dt {
            text-align: left;
            font-weight: normal;
          }

          dd {
            text-align: right;

            @media (width < 575px) {
              text-align: left;
            }

            font-weight: bold;
          }
        }
      }
    }

    ul#cost-notes {
      margin-top: 28px;
      font-size: 14px;

      /* padding-left: 1.5em; */
      li {
        list-style-type: "※ "
      }

      li+li {
        margin-top: 18px;
      }

      li.important {
        font-weight: bold;
        color: #8C1E23;
      }
    }
  }

  section#tcj-dic-news {
    display: flex;
    gap: 40px;

    @media (width < 992px) {
      flex-direction: column;
    }

    .card {
      border: none;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    figure {
      flex: 1;
      background-color: #F3E6E6;
      padding: 40px 50px;
      margin: 0;
      display: flex;
      flex-direction: column;

      img,
      iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border: none;
        display: block;
      }

      figcaption {
        margin-top: auto;
        padding-top: 20px;
        font-weight: bold;
        text-align: center;
      }
    }
  }

  section#bottom-cover-image {

    @media (width < 992px) {
      height: 90vh;
    }

    ul {
      width: 90%;
      max-width: 1000px;
      /* margin: 0 auto; */
      display: flex;
      gap: 20px;
      padding: 0;

      @media (width < 992px) {
        flex-direction: column;
      }

      h3 {
        color: #fff;
        font-size: 24px;
      }

      li {
        flex: 1;
        text-align: center;
        background: rgba(255, 255, 255, 0.336);
        border: 1px solid rgba(255, 255, 255, 0.7);
        padding: 20px;
        display: flex;
        gap: 30px;
        flex-direction: column;

        p {
          font-weight: normal;
          font-style: 16px;
          margin-bottom: auto;
        }
      }
    }
  }
}