@charset "UTF-8";

.compare-medicine {
  margin-top:100px;
  .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: 960px;
    }
    .catchcopy {
      display:inline-block;
    }
    .hdline {
      margin-top:0;
      margin-bottom:20px;
    }
    h1 {
      margin:0;
      padding:0 50px 0 0;
      font-size:36px;
      letter-spacing:0.1em;
      line-height:1.5;
      z-index:2;
    }
    .button.square {
      width:100%;
      max-width:360px;
      height:56px;
      border-radius:5px;
      border:none;
      margin-top:40px;
    }
    .__img {
      width:auto;
      height:340px;
    }
  }
  .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-top:0;
        font-size:28px;
        line-height:1.75;
        letter-spacing:0.1em;
      }
      h3 {
        margin-top: 30px;
        font-size:24px;
        font-weight:normal;
        line-height:1.75;
        letter-spacing:0.1em;
      }
      p {
        margin-top:30px;
      }
      strong {
        font-size:28px;
      }
      .__img {
        max-width:960px;
        width:100%;
        height:auto;
        margin:30px auto 20px auto;
      }
      .box {
        display:flex;
        gap:40px;
        flex:1;
        text-align:left;
        margin-top:30px;
        padding:40px;
        &.soon {
          position:relative;
          &::before {
            position:absolute;
            top:-10px;
            left:40px;
            display:block;
            content:"Comming Soon...";
            padding:3px 20px;
            background-color:#0E7AE0;
            font-family: "Roboto", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: italic;
            font-variation-settings:
              "wdth" 100;
            font-size:17px;
            color:#fff;
            letter-spacing:0.1em;
          }
        }
        .flex1 {
          flex:1;
        }
        img {
          height:auto;
          width:200px;
        }
        h3 {
          font-size:24px;
          line-height:1.75;
          letter-spacing:0.1em;
        }
        p {
          margin-top: 10px;
        }
      }
    }
  }
  .merit {
    position:relative;
    padding-bottom:60px;
    /*background-color:#F0F0F0;
    margin-top:-420px;
    padding-top:420px;*/
    text-align:center;
    z-index:1;
    .inner {
    }
    h2 {
      font-size:28px;
      text-align:center;
      margin:10px auto 20px auto;
    }
    p {

    }
    .box {
      display:flex;
      align-items:center;
      gap:40px;
      flex:1;
      text-align:left;
      padding:0;
      background-color:unset;
      + .box {
        margin-top:30px;
      }
      &.soon {
        position:relative;
        &::before {
          position:absolute;
          top:-10px;
          left:40px;
          display:block;
          content:"Comming Soon...";
          padding:3px 20px;
          background-color:#0E7AE0;
          font-family: "Roboto", serif;
          font-optical-sizing: auto;
          font-weight: 500;
          font-style: italic;
          font-variation-settings:
            "wdth" 100;
          font-size:17px;
          color:#fff;
          letter-spacing:0.1em;
        }
      }
      .flex1 {
        flex:1;
      }
      .img {
        width:80px;
        text-align:center;
        img {
          width:100%;
        }
      }
      img {
        height:auto;
        width:auto;
        margin:auto;
      }
      h3 {
        font-size:24px;
        line-height:1.75;
        letter-spacing:0.1em;
      }
      p {
        margin-top: 10px;
      }
      a.aboutdb {
        display:inline-block;
        margin-top: 1em;
        color:var(--color-main);
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .compare-medicine {
    header {
      .inner {
        display:block !important;
        text-align:center;
        .__img {
          margin:0 auto 40px auto;
        }
      }
    }
  }
}
@media screen and (max-width: 760px) {
  .compare-medicine {
    margin-top:80px;
    .merit {
      padding:40px 0;
      .inner {
        .box {
          display:block;
          .img {
            margin:0 auto 10px auto;
          }
        }
      }
    }
  }
}/*@media*/