/*
netapp_on_aws.css
*/
/* common
--------------------------------------------------------------------------- */
@media all and (max-width: 749px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media all and (max-width: 749px) {
  .sp {
    display: block;
  }
}

#netapp_on_aws .inner {
  max-width: 980px;
  margin: 0 auto;
}

@media all and (max-width: 749px) {
  #netapp_on_aws .inner {
    margin: 0 25px;
  }
}

:root {
    --theme_color: #003D86;
    --sub_color: #1283D6;
    --light_blue: #ECF3FB;
    --light_gray: #F0F0F0;
}

#netapp_on_aws .con_bg_blue {
    background-color: var(--light_blue);
}

#netapp_on_aws .con_bg_gray {
    background-color: var(--light_gray);
}

/* hero
--------------------------------------------------------------------------- */
#hero .catch_sub {
  font-size: 20px;
}

#hero {
  background: url(./../img/solution/backup/netapp_on_aws/kv_pc.jpg) no-repeat center center;
  background-size: cover;
  margin-bottom: 60px;
  color: #fff;
}

#hero .inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 120px 0 115px;
  position: relative;
}

#hero .logo {
  position: absolute;
  bottom: 10px;
  right: 0;
}

#hero h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 20px;
}

#hero .catch {
  font-size: 22px;
  line-height: 1.4;
}

@media all and (max-width: 749px) {
  #hero {
    background: url(./../img/solution/backup/netapp_on_aws/kv_sp.jpg) no-repeat top center;
    background-size: 100% auto;
    margin-bottom: 40px;
  }
  #hero .inner {
    padding: 260px 0 0;
  }
  #hero .logo {
    top: 10px;
    right: 10px;
  }
  #hero .mv_ttl {
    padding: 30px 30px 35px;
    background: linear-gradient(to top, rgb(12, 73, 133) 80%, rgba(12, 73, 133, 0) 100%);
  }
  #hero h1 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  #hero .catch {
    font-size: 18px;
  }
}


/* netapp_on_aws_overview */
#netapp_on_aws_overview {
  
    .con {
        margin-bottom: 30px;
        padding: 15px;

        @media all and (min-width: 750px) {
            padding: 35px;
        }

        ul.group {
            margin-bottom: 35px;

            @media all and (min-width: 750px) {
                margin-bottom: 70px;
                display: flex;
                justify-content: space-between;
            }

            li {
                background-color: #fff;
                padding: 30px;
                margin-bottom: 20px;

                @media all and (min-width: 750px) {
                    width: calc(100% / 3 - 12px);
                    margin-bottom: 0;
                }

                &:last-of-type {
                    margin-bottom: 0;
                }

                dt {
                    text-align: center;
                    color: var(--theme_color);
                    margin-bottom: 35px;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 1.4;
                }
            }
        }

        h3 {
            color: var(--theme_color);
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 13px;
        }
    }

}


/* netapp_on_aws_usecase */
#netapp_on_aws_usecase {
    .img_box {
        padding: 15px;
        margin-bottom: 30px;

        @media all and (min-width: 750px) {
            padding: 30px;
        }
    }
}

/* netapp_on_aws_detail */
#netapp_on_aws_detail {
    dl {
        background-color: var(--light_blue);
        padding: 15px;
        margin-bottom: 24px;

        @media all and (min-width: 750px) {
            display: flex;
            padding: 30px;
        }

        dt {
            background-color: #1283D6;
            color: #fff;
            border-radius: 10px;
            padding: 0.5rem 1rem;
            font-weight: 600;
            margin-bottom: 10px;

            @media all and (min-width: 750px) {
                text-align: center;
                width: 110px;
                margin-bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 47px;
                flex: none;
            }
        }

        ul {
            margin-bottom: 1rem;

            & li {
                position: relative;
                padding-left: 20px;
                font-weight: 600;

                &::before {
                    content: "●";
                    color: #1283D6;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                & ul {
                    margin-bottom: 0;

                    & li {
                      font-weight: normal;

                      &::before {
                        content: "●";
                        color: #707070;
                        position: absolute;
                        left: 0;
                        top: 0;
                      }
                    }
                }
            }
        }

        .note {
            font-size: 12px;
        }
    }
}


/* netapp_on_aws_faq */
#netapp_on_aws_faq {
  margin-bottom: 40px;
}