@charset "EUC-JP";

.xserver-ssl-sv__inner {
  display: flex;
  flex-direction: row;
  flex-direction: column;
  height: 636px;
  padding: 16px;
  background: url('../../images/xserver-vps/sv-back.svg') no-repeat;
  background-position: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.feature__point {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.feature__left {
  max-width: 44.4444444444%;
  flex-basis: 44.4444444444%;
}

.feature figure {
  display: flex;
  flex-direction: row;
  flex-basis: 48.8888888889%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.feature .back-text {
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.feature .back-text::before {
  font-family: century-gothic, sans-serif;
  font-size: 6rem;
  font-style: normal;
  line-height: 1;
  position: absolute;
  z-index: -1;
  top: -8px;
  left: -24px;
  content: attr(data) '';
  color: #caebfc;
}

.encrypt__flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.plan__flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.plan__single {
  overflow: hidden;
  border: 1px solid #9ec0e1;
  flex-basis: 31.8518518519%;
}

.suport__flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.suport__flex > * {
  flex-basis: 47.1962616822%;
}

.suport figure {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.service__single {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.service__single.rev {
  flex-direction: row-reverse;
}

.service__img {
  flex-basis: 48.8888888889%;
}

.service__info {
  flex-basis: 46.6666666667%;
}

.service__info .link-button1 a::before {
  width: 22px;
  height: 21px;
  background: url('../../images/icon/window.svg') !important;
}

.service__info .title span {
  font-weight: bold;
  display: block;
  color: #148dce;
}

.service .tag {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.service .tag li {
  font-size: 1.4rem;
  margin-right: 4px;
  padding: 0 16px;
  color: white;
}

.service .tag li:nth-of-type(1) {
  background-color: #148dce;
}

.service .tag li:nth-of-type(2) {
  background-color: #6680ff;
}

.service .tag li:nth-of-type(3) {
  background-color: #66b3ff;
}

.service .tag li:last-of-type {
  margin-right: 0;
}

.service .text {
  font-size: 1.6rem;
}

.service .link-button1 {
  width: 344px;
  max-width: 100%;
}

@media only screen and (min-width: 768px) {
  .feature figure {
    min-height: 350px;
  }

  .encrypt__left {
    margin-right: 48px;
  }

  .suport figure {
    min-height: 288px;
  }
}

@media only screen and (max-width: 999px) {
  .feature__point {
    flex-direction: column-reverse;
  }

  .feature__left {
    max-width: 100%;
  }

  .feature .back-text {
    margin-top: 16px;
  }

  .feature .back-text::before {
    font-size: 6rem;
  }

  .service .tag li {
    font-size: 1.4rem;
  }

  .service .text {
    font-size: 1.4rem;
  }

  .logo img {
    width: 60%;
  }
}

@media only screen and (max-width: 999px) and (-ms-high-contrast: none) {
  .feature__left {
    min-height: 350px;
  }
}

@media only screen and (max-width: 767px) {
  .xserver-ssl-sv__inner {
    flex-direction: row;
    height: 360px;
    background-size: contain;
  }

  .feature__left {
    flex-basis: 100%;
  }

  .feature figure {
    flex-basis: 100%;
  }

  .encrypt__flex {
    text-align: center;
  }

  .encrypt__flex > * {
    flex-basis: 100%;
  }

  .encrypt__left {
    text-align: center;
  }

  .plan__single {
    margin-top: 24px;
    flex-basis: 100%;
  }

  .plan__single:first-of-type {
    margin-top: 0;
  }

  .suport__flex > * {
    flex-basis: 100%;
  }

  .service__img {
    flex-basis: 100%;
  }

  .service__info {
    flex-basis: 100%;
  }
}

@media only screen and (max-width: 767px) and (-ms-high-contrast: none) {
  .feature article:last-child .feature__left {
    min-height: 150px;
  }

  .feature figure {
    min-height: 300px;
  }

  .feature figure img {
    width: 250px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
  .plan__single {
    flex-basis: 48.8888888889%;
  }

  .plan__single:last-of-type {
    margin-top: 24px;
  }
}
/*# sourceMappingURL=xserver-vps.css.map */