@charset "UTF-8";

.digipro-monitoring {
  /*margin-top:100px;*/
  * {
    box-sizing: border-box;
  }
  p {
    margin-bottom:0;
  }

  .button {
    display:inline-block;
    padding:0.8em 30px;
    background-color:#F29714;
    color:#fff;
    border-radius:100px;
    font-size:16px;
    text-align:center;
    transition:all 0.5s;
    &:hover {
      opacity:0.75;
      color:#fff;
    }
  }

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;
  }

  .box {
    background-color: #fff;
    /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); */
    border-radius: 10px;
    text-align: center;
    padding: 20px;
  }

  .hdline {
    margin-top:40px;
    font-size:24px;
    font-weight:bold;
    color:#02A1E6;
  }

  .inner {
    position:relative;
    width:100%;
    height:100%;
    max-width: 1000px;
    margin:0 auto;
    padding:0 20px;
  }
  header {
    position:relative;
    width:100%;
    height:auto;
    padding:60px 0;
    /*background: linear-gradient(45deg, #EFEFEF, #E5E5E5);*/
    overflow:hidden;
    >.inner {
      display:flex;
      justify-content:space-between;
      flex-direction: row-reverse;
      align-items:center;
      max-width:1020px;
    }
    .catchcopy {
      display:inline-block;
    }
    h1 {
      margin:0;
      padding:0;
      font-size:30px;
      letter-spacing:0.1em;
      line-height:1.75;
      z-index:2;
    }
    .button.square {
      width:100%;
      max-width:360px;
      border-radius:5px;
      border:none;
      margin-top:40px;
    }
    .__img {
      width:auto;
      height:100%;
      max-height:400px;
    }
  }
  .overview {
    position:relative;
    width:100%;
    padding:0 40px;
    margin-bottom: 60px;
    text-align:center;
    z-index:2;
    .inner {
      width:100%;
      max-width:1280px;
      margin:0 auto;
      padding:80px 40px 60px 40px;
      background-color:#F7F7F7;
      border-radius:10px;
      .eppv-logo {
        width:360px;
        height:auto;
        margin:0 auto;
      }
      h2 {
        margin-bottom:30px;
        font-size:24px;
        line-height:1.75;
        letter-spacing:0.1em;
      }
      p {
        margin-top:30px;
        font-size:22px;
      }
      strong {
        font-size:28px;
      }
      .__img {
        max-width:875px;
        width:100%;
        height:auto;
        margin:0 auto;
      }
      .detail {
        margin-top:20px;
        margin-bottom:20px;
        border-radius:10px;
        overflow:hidden;
        h4 {
          display:block;
          background-color:#0B71D1;
          text-align:center;
          color:#fff;
          padding:15px 20px;
          margin-bottom:5px;
        }
        .flex {
          gap:5px;
          align-items:stretch;
          .point {
            flex:1;
            padding:20px;
            background-color:#fff;
            text-align:center;
            img {
              margin:0 auto 10px auto;
            }
            h5 {
              font-size:20px;
              text-align:center;
            }
            p {
              margin-top:10px;
              font-size:16px;
              font-weight:normal;
              text-align:left;
            }
          }
        }
      }
    }
  }
  .use-image {
    .inner {
      text-align:center;
      padding-bottom:90px;
      max-width:1051px;
    }
    .hdline {
      margin-bottom:40px;
    }
    .__img {
      max-width:1011px;
      width:100%;
      height:auto;
      margin:0 auto;
    }
  }
  .voice {
    background-color:#EBF5FC;
    padding:20px 0 40px 0;
    .inner {
      text-align:center;
    }
    .hdline {
      margin-bottom:40px;
    }
    h2 {
      font-size:28px;
      text-align:center;
      margin-bottom:30px;
    }
    .flex {
      margin-bottom:30px;
      align-items:center;
      gap:0;
      .box {
        flex:1;
        text-align:center;
        padding:30px;
        .__img {
          margin:0 auto 10px auto;
        }
        h3 {
          font-size:18px;
          letter-spacing:0.1em;
          margin-bottom:10px;
          text-align:left;
          text-wrap:wrap;
          strong {
            color:#0E7AE0;
          }
        }
        p {
          text-align:left;
        }
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .digipro-monitoring {
    header {
      .inner {
        display:block !important;
        text-align:center;
        .__img {
          margin:0 auto 40px auto;
        }
      }
    }
  }
}
@media screen and (max-width: 760px) {
  .digipro-monitoring {
    /*margin-top:80px;*/
    .overview {
      padding:40px 0;
      .inner {
        .detail {
          .flex {
            display:block;
            .point {
              padding:20px 30px !important;
              +.point {
                margin-top:5px;
              }
            }
          }
        }
      }
    }
    .voice {
      .flex {
        .box {
          padding:20px;
        }
        .__img {
          width:120px;
        }
      }
    }
  }
}/*@media*/