/*====================================================
////id |  ro_server_price
====================================================*/
.ro_server_price-wrapper {
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ro_server_price {
  background: #fff;
  border: solid 1px;
  border-radius: 5px;
  display: flex;
    align-items: center;
    justify-content: center;
  position: relative;
}
.ro_server_price::before {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 8 8"><path fill="%23333333" d="M8,4.69h-3.31v3.31h-1.37v-3.31H0v-1.37h3.31V0h1.37v3.31h3.31v1.37Z" /></svg>') no-repeat center / contain;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
}
.ro_server_price:first-child::before {
  display: none;
}
.ro_server_price dt {
  font-weight: 700;
  margin-bottom: .3em;
  text-align: center;
}
.ro_server_price:nth-child(1) {
  border-color: var(--color_2);
}
.ro_server_price:nth-child(1) dt {
  color: var(--color_2);
}
.ro_server_price:nth-child(2) {
  border-color: var(--color_1);
}
.ro_server_price:nth-child(2) dt {
  color: var(--color_1);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {
  .ro_server_price-wrapper {
    flex-direction: column;
    margin: auto;
    max-width: 600px;
  }
  .ro_server_price dt {
    font-size: 1.14em;
  }
  .ro_server_price {
    margin-top: min(12vw, 60px);
    padding: min(5vw, 20px) min(5vw, 20px);
  }
  .ro_server_price::before {
    bottom: 100%;
    left: 0;
    right: 0;
    width: min(5.8vw, 30px);
    height: min(12vw, 60px);
  }
  .ro_server_price:first-child {
    margin-top: 0;
  }
  .ro_server_price .attentionMark {
    font-size: .857em;
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769.1px) {
  .ro_server_price-wrapper {
    gap: 1em 0;
  }
  .ro_server_price {
    margin-left: min(6vw, 80px);
    max-width: calc(50% - (min(6vw, 80px) / 2));
    padding: min(5vw, 36px) min(5vw, 20px);
  }
  .ro_server_price::before {
    top: 0;
    right: 100%;
    bottom: 0;
    width: min(6vw, 80px);
    height: 28px;
  }
  .ro_server_price:first-child {
    margin-left: 0;
  }
  
  .ro_server_price dt {
    font-size: 2rem;
  }
}

@media (hover: hover) {}


/*====================================================
////id |  ro_server_plan
====================================================*/
.ro_server_plan-wrapper {
  background: #fff;
  border-radius: 15px;
  display: grid;
    grid-gap: min(10vw, 40px);
  padding: min(8.5vw, 40px) min(4.5vw, 38px);
  margin: min(10.5vw, 64px) auto 0;
}
.ro_server_plan-head-wrapper {
  display: flex;
  overflow: hidden;
}
.ro_server_plan-head {
  margin-bottom: .8em;
  padding-right: 1.5em;
  position: relative;
}
.ro_server_plan-head::after {
  border-top: solid 1px;
  content: '';
  display: block;
  margin: auto;
  position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
  width: 100vw;
  height: 0;
}
.ro_server_plan-detail dl {
  border: solid 1px;
  border-radius: 10px;
  line-height: 1.5;
  text-align: center;
}
.ro_server_plan-detail dt {
  border-radius: 8px;
  color: #fff;
  margin-bottom: .5em;
  padding: .2em .5em;
}
.ro_server_plan-detail dd .price {
  font-weight: 700;
  line-height: 1;
}
.ro_server_plan-detail dd p {
  margin-top: .8em;
}

.ro_server_plan-detail dl:nth-child(1) {
  border-color: var(--color_2);
}
.ro_server_plan-detail dl:nth-child(1) dt {
  background: var(--color_2);
}
.ro_server_plan-detail dl:nth-child(1) dd .price {
  color: var(--color_2);
}

.ro_server_plan-detail dl:nth-child(2) {
  border-color: var(--color_1);
}
.ro_server_plan-detail dl:nth-child(2) dt {
  background: var(--color_1);
}
.ro_server_plan-detail dl:nth-child(2) dd .price {
  color: var(--color_1);
}

.ro_server_plan-detail dl:nth-child(3) {
  border-color: #DD6C89;
}
.ro_server_plan-detail dl:nth-child(3) dt {
  background: #DD6C89;
}
.ro_server_plan-detail dl:nth-child(3) dd .price {
  color: #DD6C89;
}

.ro_server_plan .attentionMark {
  font-weight: 400;
  margin-top: .7em;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
  .ro_server_plan {
    margin: auto;
    width: min(100%, 600px);
  }
  .ro_server_plan-head {
    font-size: 1.3em;
  }
  .ro_server_plan-detail {
    display: grid;
      grid-gap: min(5vw, 20px);
  }
  .ro_server_plan-detail dl {
    padding: min(5vw, 20px) min(5vw, 40px);
  }
  .ro_server_plan-head dt {
    font-size: 1.3em;
  }
  .ro_server_plan-detail dd .price {
    font-size: min(2.4em, 4rem);
  }
  .ro_server_plan .attentionMark {
    font-size: 1.0rem;
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960.1px) {
  .ro_server_plan-head {
    font-size: 2.4rem;
  }
  .ro_server_plan-detail {
    display: flex;
      gap: min(2vw, 32px);
      justify-content: center;
  }
  .ro_server_plan-detail dl {
    flex: 1;
    max-width: 400px;
    padding: min(5vw, 32px) min(2vw, 40px);
  }
  .ro_server_plan-detail dt {
    font-size: min(2vw, 2rem);
  }
  .ro_server_plan-detail dd .price {
    font-size: min(3.7vw, 4rem);
  }
  .ro_server_plan .attentionMark {
    font-size: 1.2rem;
  }
}

@media (hover: hover) {}


/*====================================================
////id |  xxx
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769.1px) {
}

@media (hover: hover) {}