@charset "UTF-8";

#Feature_list .feature_ttl {
  font-weight: 400;
  font-style: normal;
}

@media only screen and (max-width: 767px) {
  .pcOnly {
    display: none;
  }

  html {
    font-size: calc(10 * (100vw / 750));
  }

  #Feature_list {
    padding-top: calc(185* (100vw / 750));
  }

  #Feature_list.Feature_list_bnr {
    padding-top: calc(255* (100vw / 750));
  }

  #Feature_list .ttl-main {
    margin-bottom: calc(50 *(100vw / 750));
  }

  #Feature_list .box-features {
    margin-bottom: calc(50 *(100vw / 750));
    width: 100%;
  }

  #Feature_list .block-features {
    position: relative;
  }

  .feature_tab {
    position: absolute;
    top: calc(113* (100vw / 750));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  #Feature_list .block-features .box-wrapper {
    margin-top: calc(155* (100vw / 750));
  }

  .feature_tab_list dt {
    font-size: calc(32* (100vw / 750));
    text-align: center;
    position: relative;
    width: auto;
    padding: 0 calc(94* (100vw / 750));
    letter-spacing: 0.1em;
    margin-right: calc(32* (100vw / 750));
  }

  .feature_tab_list {
    text-align: center;
    padding-bottom: calc(63* (100vw / 750));
    background-color: #fff;
    letter-spacing: .1rem;
  }

  .feature_tab_list dd {
    font-size: calc(28* (100vw / 750));
    display: none;
    position: relative;
    text-align: center;
    padding: calc(52* (100vw / 750)) calc(124* (100vw / 750)) calc(13* (100vw / 750));
  }

  .feature_tab_list dd:nth-of-type(1) {
    padding-top: calc(80* (100vw / 750));
  }

  .feature_tab_list dt::before {
    content: "";
    position: absolute;
    right: calc(58* (100vw / 750));
    top: calc(13* (100vw / 750));
    background-color: #000;
    width: calc(20* (100vw / 750));
    height: 1px;
  }

  .feature_tab_list dt::after {
    content: "";
    position: absolute;
    right: calc(67* (100vw / 750));
    top: calc(4* (100vw / 750));
    background-color: #000;
    width: 1px;
    height: calc(20* (100vw / 750));
    transition: opacity .5s;
    opacity: 1;
  }

  .feature_tab_list .ttl::after {
    opacity: 0;
  }

  .feature_tab_list .current {
    position: relative;
  }

  .feature_tab_list .current::before {
    content: "";
    display: block;
    position: absolute;
    background-color: #000;
    width: calc(133* (100vw / 750));
    height: 1px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%)
  }

  .feature_tab_ttl {
    display: none;
  }

  .feature_tab_ttl_active {
    display: block;
  }

  .feature_tab_content {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .spOnly {
    display: none;
  }

  html {
    font-size: calc(10 * (100vw / 1400));
  }

  #Feature_list {
    margin-top: 7rem;
  }

  #Feature_list.main-area .main-inner {
    width: 100%;
    max-width: 1020px;
  }

  #Feature_list .feature_tab_list {
    justify-content: center;
    letter-spacing: .1rem;
  }

  #Feature_list .feature_tab_list li {
    width: auto;
    margin-bottom: 4rem;
    font-size: 16px;
    margin-right: 5.1rem;
    text-align: center;
    cursor: pointer;
    padding: 0 1rem 1rem;
    margin-right: 3rem;
  }

  .current {
    border-bottom: 1px solid #000;
  }

  #Feature_list .feature_tab_list li:last-child {
    margin-right: 0;
  }

  .feature_tab_content {
    display: none;
  }

  #Feature_list .contents__list {
    justify-content: flex-start;
  }

  #Feature_list .contents__list li {
    margin: 0 1rem 30px;
  }

  #Feature_list .feature_tab_content {
    margin-right: 0;
  }
}

@media only screen and (min-width: 1400px) {
  html {
    font-size: 62.5%;
  }
}