body {
  background-color: #f6f6f6;
}

.font-sm{
  font-size: 1.0rem;
}

.navbar-brand {
  font-size: 3.5rem;
}

.legal__title {
  margin: 80px;
  text-align: center;
  font-size: 40px;
}

.legal__wrapper {
  max-width: 960px;
  width: calc(960 / 1280 * 100vw);
  margin: 0 auto 100px;
  border-radius: 5px;
  border: solid 4px #fff;
  border-collapse: separate;
  background-color: #fff;
}

.legal__box {
  display: flex;
}

.legal__box:last-child .legal__dt,
.legal__box:last-child .legal__dd {
  border-bottom: none;
}

.legal__dt {
  width: 290px;
  padding: 10px;
  background-color: #f6f6f6;
  border-bottom: solid 3px #fff;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

dl,
dd {
  margin-bottom: 0;
}

.legal__dd {
  width: 70%;
  padding: 10px;
  border-bottom: solid 3px #f6f6f6;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.legal__plusmark {
  display: inline-block;
  margin-left: 50px;
}

.legal__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.legal__contact-box {
  margin-bottom: 0;
}

.legal__address-box,
.legal__phone-box {
  display: flex;
}

.legal__address-dt,
.legal__phone-dt {
  width: 150px;
  font-weight: normal;
}

.legal__img {
  width: 100%;
  display: block;
  margin-bottom: 40px;
}



/*中間のデバイス (タブレット, 768px とそれ以下)*/
@media (max-width: 992px) {

  .font-sm{
    font-size: 3.0rem;
  }
  .navbar-brand{
    font-size: 3.5rem;
  }

  .legal__wrapper {
    width: calc(950 / 992 * 100vw);
  }

  .legal__box {
    display: block;
  }

  .legal__dt {
    width: 100%;
    font-size: 32px;
  }

  .legal__dd {
    width: 100%;
    padding: 20px 10px;
    font-size: 32px;
  }

  .legal__address-dt,
  .legal__phone-dt {
    width: 300px;
  }

  .legal__plusmark {
    display: inline-block;
    margin-left: 100px;
  }

  .display-sp {
    display: none;
  }
}

/* 小さなデバイス （スマホ,576pxとそれ以下）*/
@media (max-width: 576px) {

  .font-sm {
    font-size: 1.0rem;
  }

  .navbar-brand {
    font-size: 1.25rem;
  }
}