@charset "UTF-8";
/* =====================
  日東物産の強み
 ======================= */
.strength {
  padding: 5.208% 0;
}
.strength:last-child {
  padding-bottom: 0;
}

.strength-lead {
  font-size: 125%;
  line-height: 1.8;
}

.strength-lead-img {
  margin: 9.375% 0 15.625%;
}

.strength-box {
  margin-top: 11.563%;
  background: #E3F4FA;
  border-radius: 1.5em;
  padding: 8.375% 0 9.375%;
  position: relative;
}

.strength-box-num {
  font-size: 325%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 0.154em 0.308em 0.215em;
  background: #2481A2;
  color: var(--c_wht);
  border-radius: 200px;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 10.462em;
  max-width: 90%;
}

.strength-box-inner {
  width: 75%;
  margin: 0 auto;
  font-size: 125%;
  line-height: 1.8;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.2em 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em 1.2em;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.strength-box-ttl {
  -ms-grid-column-span: 2;
  grid-column: span 2;
  text-align: center;
  font-size: 140%;
  font-weight: 700;
  color: #2481A2;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}
.strength-box-ttl .is-large {
  font-size: 157.143%;
}
.strength-box-ttl:before {
  content: "";
  width: 2.343em;
  height: 2.343em;
  background: url(../img/common/heading.png) no-repeat center/contain;
  position: absolute;
  right: calc(100% + 12px);
  top: -1.429em;
  -webkit-filter: brightness(0) saturate(100%) invert(47%) sepia(23%) saturate(1339%) hue-rotate(150deg) brightness(88%) contrast(90%);
          filter: brightness(0) saturate(100%) invert(47%) sepia(23%) saturate(1339%) hue-rotate(150deg) brightness(88%) contrast(90%);
}

.strength-box-txt:first-of-type {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

.strength-box--02 .strength-box-num {
  background: #EBA027;
}
.strength-box--02 .strength-box-ttl {
  color: #EBA027;
}
.strength-box--02 .strength-box-ttl:before {
  -webkit-filter: brightness(0) saturate(100%) invert(74%) sepia(92%) saturate(2282%) hue-rotate(347deg) brightness(102%) contrast(84%);
          filter: brightness(0) saturate(100%) invert(74%) sepia(92%) saturate(2282%) hue-rotate(347deg) brightness(102%) contrast(84%);
}

.strength-box--03 .strength-box-num {
  background: #50AA32;
}
.strength-box--03 .strength-box-ttl {
  color: #50AA32;
}
.strength-box--03 .strength-box-ttl:before {
  -webkit-filter: brightness(0) saturate(100%) invert(50%) sepia(77%) saturate(452%) hue-rotate(60deg) brightness(97%) contrast(83%);
          filter: brightness(0) saturate(100%) invert(50%) sepia(77%) saturate(452%) hue-rotate(60deg) brightness(97%) contrast(83%);
}

.strength-box--04 .strength-box-num {
  background: #2878E1;
}
.strength-box--04 .strength-box-ttl {
  color: #2878E1;
}
.strength-box--04 .strength-box-ttl:before {
  -webkit-filter: brightness(0) saturate(100%) invert(48%) sepia(11%) saturate(4982%) hue-rotate(183deg) brightness(86%) contrast(106%);
          filter: brightness(0) saturate(100%) invert(48%) sepia(11%) saturate(4982%) hue-rotate(183deg) brightness(86%) contrast(106%);
}

.strength-box--05 .strength-box-num {
  background: #C74D4D;
}
.strength-box--05 .strength-box-ttl {
  color: #C74D4D;
}
.strength-box--05 .strength-box-ttl:before {
  -webkit-filter: brightness(0) saturate(100%) invert(32%) sepia(65%) saturate(664%) hue-rotate(314deg) brightness(107%) contrast(88%);
          filter: brightness(0) saturate(100%) invert(32%) sepia(65%) saturate(664%) hue-rotate(314deg) brightness(107%) contrast(88%);
}

/* タブレット
  ------------------------ */
@media (max-width: 1079px) {
  .strength-box-inner {
    width: 90%;
  }
  .strength-box-num {
    font-size: 36px;
  }
  .strength-box-ttl {
    font-size: 32px;
  }
  .strength-box-ttl .is-large {
    font-size: 42px;
  }
  .strength-box-ttl:before {
    width: 60px;
    height: 60px;
    right: 100%;
  }
}
/* スマホ
  ------------------------ */
@media (max-width: 699px) {
  .strength {
    padding: 50px 0;
  }
  .strength-lead {
    font-size: 16px;
  }
  .strength-lead-img {
    margin: 60px 0 80px;
  }
  .strength-box {
    margin-top: 50px;
    border-radius: 16px;
    padding: 40px 0 20px;
  }
  .strength-box-num {
    font-size: 24px;
    width: 280px;
    padding: 6px 20px 8px;
  }
  .strength-box-inner {
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px 0;
  }
  .strength-box-ttl {
    font-size: 16px;
    line-height: 1.25;
  }
  .strength-box-ttl .is-large {
    font-size: 28px;
  }
  .strength-box-ttl:before {
    width: 28px;
    height: 28px;
    right: calc(100% + 4px);
    top: 0;
  }
}