#vi_lower {
  background-image: url("/cms/wp-content/themes/sdat_renew/img/product/partition/vi.webp"); }
  @media screen and (max-width: 767px) {
    #vi_lower {
      background-position: left center; } }

/* index
------------------------------------ */
#contents .vi {
  text-align: center;
  max-width: 1100px;
  text-align: center;
  position: relative;
  margin: 0 auto 60px; }
  #contents .vi:before {
    content: "";
    width: calc(100vw / 2);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    background: #000920;
    display: block;
    z-index: 0; }
  #contents .vi:after {
    z-index: 0;
    content: "";
    width: calc(100vw / 2);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    background: #000920;
    display: block; }
#contents .feature {
  margin-bottom: 6rem; }
  #contents .feature ul {
    display: flex;
    justify-content: space-between; }
    #contents .feature ul li {
      width: 32%;
      background: #eaf2f6; }
  #contents .feature dl {
    display: grid; }
    #contents .feature dl dd {
      order: 3;
      padding: 2rem; }
    #contents .feature dl dd.photo {
      padding: 0;
      order: 1;
      margin-bottom: 20px; }
    #contents .feature dl dt {
      order: 2;
      text-align: center;
      position: relative;
      padding-bottom: 1.5rem;
      font-weight: bold;
      font-size: 2.0rem;
      color: #0c1f55; }
      #contents .feature dl dt span {
        font-size: 2.4rem; }
      #contents .feature dl dt:after {
        content: "";
        background: #0c1f55;
        width: 70px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: block; }
#contents .type {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  #contents .type > * {
    width: 45%;
    margin: 0 0 80px; }
  #contents .type table {
    margin-bottom: 2rem; }
@media screen and (max-width: 767px) {
  #contents .feature ul {
    display: block; }
    #contents .feature ul li {
      width: 100%;
      margin-bottom: 30px; }
  #contents .feature dl dd {
    order: 2; }
  #contents .feature dl dd.photo {
    order: 3;
    margin-bottom: 20px; }
  #contents .feature dl dt {
    order: 1;
    padding: 1.5rem 1rem; }
  #contents .type {
    display: block; }
    #contents .type > * {
      width: 100%;
      margin: 0 0 50px; } }
