@import url('./var.css');

.five-reasons-title {
  width: 80%;
  margin: 0 auto;
}

.five-reasons-title > img {
  width: 100%;
}

/* TODO: Font Family */
.feature > dt {
  --indent-num: 1.37; /* 先頭の丸括弧の分のインデント */
  --indent: 1.37em; /* ATTENTION: --indent-numと--indentは揃える */
  --font-size: var(--text-xl);

  display: block;
  font-size: var(--font-size);
  font-weight: bold;
  font-family: 'Arial', 'Helvetica', sans-serif;
  padding: 0.625rem 0.75em 0.625rem calc(0.75em + var(--indent));
  border-radius: 0.625rem;
  box-shadow: 0 0 0.1875rem 0.0625rem lightgray;
  margin-bottom: 0.5em;
  text-indent: calc(-1 * var(--indent));
}

.feature > dt > span:not(.feature-circle) {
  color: #d0080a;
}

dt + dd {
  line-height: 2;
  margin-bottom: 3.125rem;
  font-size: var(--text-base);
}

dt > span.feature-circle {
  --num-size-ratio: 0.8em;

  display: inline-block;
  box-sizing: content-box;
  height: var(--num-size-ratio);
  width: var(--num-size-ratio);
  padding: calc(1em - var(--num-size-ratio));
  border-radius: 50%;
  text-align: center;
  line-height: var(--num-size-ratio);
  background-color: #9e5357;
}

dt > span.feature-circle > span {
  display: inline-block;
  font-weight: normal;
  font-size: var(--num-size-ratio);
  text-indent: calc(var(--font-size) * var(--indent-num));
  color: #fff;
}

@media screen and (min-width: 600px) {
  .feature > dt {
    --font-size: var(--text-2xl);
  }

  dt + dd {
    font-size: var(--text-lg);
  }
}

@media screen and (min-width: 1280px) {
  .feature > dt {
    --font-size: var(--text-3xl);
  }
}