@charset "UTF-8";

/* =============================================================================

Bestrate CSS

・最低価格保証用CSS「.bestrate-×××」

上記はここに記述する

============================================================================= */


/* .SelectorName
----------------------------------------------------------------------------- */
.bestrate-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}

.l-lowerpage-header-B.bestrate {
  background-color: var(--cc-white-A);
}

.bestrate-wrap {
  background-color: var(--cc-gray_back-A);
  @media (width > 640px) {
    padding: 12rem 20rem 16rem;
  }
  @media (width <= 640px) {
    padding: 8rem 0 0;
  }
}

.bestrate-read {
  @media (width > 640px) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    margin-bottom: 12rem;
  }
  @media (width <= 640px) {
    display: block;
    margin-bottom: 6.4rem;
    padding: 0 3rem;
  }

  .bestrate-title {
    padding-bottom: 0;
    border: none;
    @media (width > 640px) {
      margin-bottom: 1.6rem;
  }
  @media (width <= 640px) {
    margin-bottom: 2.4rem;
    text-align: center;
  }
  }
}

.bestrate-pic {
  @media (width > 640px) {
    width: 26.4rem;
    height: 21.5rem;
  }
  @media (width <= 640px) {
    margin: 0 auto 2.4rem;
    width: 18.9rem;
    height: 15.4rem;
  }
}

.bestrate-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bestrate-txtbox {
  @media (width > 640px) {
    width: 61.6rem;
  }
  @media (width <= 640px) {
    width: auto;
  }
}

.bestrate-title {
  border-bottom: 1px solid var(--cc-black-A);
  @media (width > 640px) {
    margin-bottom: 2.4rem;
    padding-bottom: 1.6rem;
  }
  @media (width <= 640px) {
    margin-bottom: 1.6rem;
    padding-bottom: 1.2rem;
  }
}

.bestrate-readtxt {
  line-height: 1.8;
  letter-spacing: 0.16em;
  @media (width > 640px) {
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
  }
  @media (width <= 640px) {
    margin-bottom: 1.6rem;
    font-size: 1.4rem;
  }
}

.bestrate-sec_wrap {
  background-color: var(--cc-white-A);
  @media (width > 640px) {
    padding: 12rem;
  }
  @media (width <= 640px) {
    padding: 5.6rem 3rem 6.4rem;
    font-size: 1.4rem;
  }
}

.bestrate-fixbox {
  @media (width > 640px) {
    margin-bottom: 10.4rem;
  }
  @media (width <= 640px) {
    margin-bottom: 5.6rem;
  }
}

.bestrate-check {
  position: relative;
  padding-left: 2.5rem;
}

.bestrate-check::before {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .3rem;
  border: 1px solid var(--cc-gray_text-A);
  @media (width > 640px) {
    top: .8rem;
  }
  @media (width <= 640px) {
    top: .6rem;
  }
}

.bestrate-check::after {
  content: "";
  position: absolute;
  left: .5rem;
  display: block;
  width: 0.5rem;
  height: 1rem;
  border-right: 1px solid var(--cc-gray_text-A);
  border-bottom: 1px solid var(--cc-gray_text-A);
  transform: rotate(45deg);
  @media (width > 640px) {
    top: 1rem;
  }
  @media (width <= 640px) {
    top: 0.8rem;
  }
}

.bestrate-fixbox:nth-child(2),
.bestrate-fixbox:nth-child(3) {
  ul {
    margin-left: 2.5rem;
  }

  li {
    list-style-type: disc;
  }
}

.bestrate-fixbox:nth-child(3) {
  .p-tg-text-A.p-c-gray_text-A {
      margin-bottom: 1.6rem;
  }
}

.bestrate-fixbox:last-child {
  margin-bottom: 0;
  .bestrate-title {
    @media (width > 640px) {
    margin-bottom: 4rem;
  }
  @media (width <= 640px) {
    margin-bottom: 1.2rem;
  }
  }
}

.bestrate-fixbox {
  .js-accordion-group {
    border-bottom: 0.1rem solid var(--cc-gray_line-A);
    @media (width > 640px) {
      padding: 4rem 0;
    }
    @media (width <= 640px) {
      padding: 2.4rem 0;
    }
  }
  .js-accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  
  }
  .js-accordion-button p {
    @media (width <= 640px) {
      width: 30.6rem;
    }
  }
  .js-accordion-target_inner {
  @media (width > 640px) {
    padding-top: 2.4rem;
  }
  @media (width <= 640px) {
    padding-top: 1.6rem;
  }
}
}

.bestrate-question {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;

  span {
    display: block;
    font-family:var(--ff-castoro);
  }
}

.bestrate-answerbox {
  background-color: var(--cc-gray_back-A);
  @media (width > 640px) {
    padding: 2.4rem;
  }
  @media (width <= 640px) {
    padding: 1.6rem 2.4rem;
  }
}

.bestrate-answer {
  display: flex;
  gap: 1.6rem;
  
  @media (width > 640px) {
    align-items: center;
  }
  @media (width <= 640px) {
    align-items: flex-start;
  }

  span {
    display: block;
    font-family:var(--ff-castoro);
  }
}