:root {
  --color-main-red: #cc1637;
  --color-main-red-dark: #a11e31;
  --color-main-blue: #283776;
  --color-border: #dadada;
  --color-base: #ffffff;
  --box-shadow: 0 0 32px -16px rgba(1,1,1,.16);
}

/* ******************************
 *
 * RESPONSIVE MIXIN
 *
 * ****************************** */
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
@font-face {
  font-family: "tanpearl";
  src: url("../fonts/TAN-PEARL.otf") format("opentype"), url("../fonts/TAN-PEARL.ttf") format("truetype"), url("../fonts/TAN-PEARL.woff") format("woff"), url("../fonts/TAN-PEARL.woff2") format("woff2");
}
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
/* ******************************
 *
 * MIXIN
 *
 * ****************************** */
/* ******************************
 *
 * KEYFRAMES
 *
 * ****************************** */
@-webkit-keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes loopRotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loopRotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.valueSection {
  position: relative;
}
@media screen and (min-width: 320px) {
  .valueSection {
    margin: 64px auto 0;
    max-width: 100%;
  }
}
@media screen and (min-width: 600px) {
  .valueSection {
    margin: 128px auto 0;
    max-width: 80%;
  }
}

.valueSection_titleWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 320px) {
  .valueSection_titleWrapper {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_titleWrapper {
    margin-bottom: 32px;
  }
}

.valueSection_title {
  font-weight: 800;
  text-align: center;
}
@media screen and (min-width: 320px) {
  .valueSection_title {
    font-size: 4.4rem;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_title {
    font-size: 4.4rem;
  }
}
.valueSection_title strong {
  font-size: 124%;
  margin: 0 4px;
}

.valueSection_titleEn {
  font-weight: 800;
}
@media screen and (min-width: 320px) {
  .valueSection_titleEn {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_titleEn {
    font-size: 2.4rem;
  }
}

.valueSection_list {
  display: grid;
}
@media screen and (min-width: 320px) {
  .valueSection_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.valueSection_listItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  border: solid 1px var(--color-border);
  background: var(--color-base);
  -webkit-box-shadow: var(--box-shadow);
          box-shadow: var(--box-shadow);
}
@media screen and (min-width: 320px) {
  .valueSection_listItem {
    padding: 24px;
    border-radius: 8px;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_listItem {
    padding: 32px 0 48px;
    border-radius: 16px;
  }
}
.valueSection_listItem .num, .valueSection_listItem .title {
  font-weight: 800;
  color: var(--color-main-red-dark);
}
.valueSection_listItem .num {
  margin-bottom: 8px;
  line-height: 1;
}
@media screen and (min-width: 320px) {
  .valueSection_listItem .num {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_listItem .num {
    font-size: 3.2rem;
  }
}
.valueSection_listItem .title {
  margin-bottom: 32px;
  line-height: 1.42;
}
@media screen and (min-width: 320px) {
  .valueSection_listItem .title {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_listItem .title {
    font-size: 4rem;
  }
}
.valueSection_listItem .title small {
  font-size: 60%;
}
.valueSection_listItem .desc {
  opacity: 0.8;
  line-height: 1.42;
}
@media screen and (min-width: 320px) {
  .valueSection_listItem .desc {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 600px) {
  .valueSection_listItem .desc {
    font-size: 1.8rem;
  }
}/*# sourceMappingURL=value.css.map */