@charset "UTF-8";

/***************************************************
 * Generated by SVG Artista on 10/16/2025, 5:06:12 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
.cls-1,
.cls-2 {
  font-family: NotoSansJP-Bold-90ms-RKSJ-H, "Noto Sans JP";
  font-weight: 700;
}

.cls-1,
.cls-2,
.cls-3 {
  fill: #fff;
}

.cls-1,
.cls-3 {
  /* font-size: 24px; */
  font-size: 2.4rem;
}

.cls-4 {
  /* fill: #00b28a; */
}

.cls-5 {
  /* fill: #0068b7; */
}

.cls-6 {
  /* fill: #2ab7de; */
}

.cls-7 {
  isolation: isolate;
}

.cls-8 {
  mix-blend-mode: multiply;
}

.cls-2 {
  /* font-size: 100px; */
  font-size: 10rem;
}

.cls-3 {
  font-family: NotoSansJP-Regular-90ms-RKSJ-H, "Noto Sans JP";
}
@-webkit-keyframes animate-svg-diversity {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 104, 183);
  }
}

@keyframes animate-svg-diversity {
  0% {
    fill: transparent;
    transform: translate(-2rem, 0);
  }
  50% {
    fill: rgb(0, 104, 183);
    transform: translate(2rem, 0);
  }
  100% {
    fill: rgb(0, 104, 183);
    transform: translate(0, 0);
  }
}
#diversity-circle,
#diversity-d,
#diversity-eng,
#diversity-jap {
  -webkit-animation: animate-svg-diversity 0.7s ease-in-out 0.8s both;
  animation: animate-svg-diversity 0.7s ease-in-out 0.8s both;
}
/* .svg-diversity {
  -webkit-animation: animate-svg-diversity 0.7s ease-in-out 0.8s both;
  animation: animate-svg-diversity 0.7s ease-in-out 0.8s both;
} */

@-webkit-keyframes animate-svg-inclusion {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 178, 138);
  }
}

@keyframes animate-svg-inclusion {
  0% {
    fill: transparent;
    transform: translate(2rem, 0);
  }
  50% {
    fill: rgb(0, 178, 138);
    transform: translate(-2rem, 0);
  }

  100% {
    fill: rgb(0, 178, 138);
    transform: translate(0, 0);
  }
}
#inclusion-circle,
#inclusion-i,
#inclusion-eng,
#inclusion-jap {
  -webkit-animation: animate-svg-inclusion 0.7s ease-in-out 0.9s both;
  animation: animate-svg-inclusion 0.7s ease-in-out 0.9s both;
}
/* .svg-inclusion {
  -webkit-animation: animate-svg-inclusion 0.7s ease-in-out 0.9s both;
  animation: animate-svg-inclusion 0.7s ease-in-out 0.9s both;
} */

@-webkit-keyframes animate-svg-equity {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(42, 183, 222);
  }
}

@keyframes animate-svg-equity {
  0% {
    fill: transparent;
    transform: translate(0, 2rem);
  }
  50% {
    fill: rgb(42, 183, 222);
    transform: translate(0, -2rem);
  }
  100% {
    fill: rgb(42, 183, 222);
    transform: translate(0, 0);
  }
}

#equity-circle,
#equity-e,
#equity-eng,
#equity-jap {
  -webkit-animation: animate-svg-equity 0.7s ease-in-out 1s both;
  animation: animate-svg-equity 0.7s ease-in-out 1s both;
}
/* .svg-equity {
  -webkit-animation: animate-svg-equity 0.7s ease-in-out 1s both;
  animation: animate-svg-equity 0.7s ease-in-out 1s both;
} */

/************************************** SVGアニメーション END */

svg {
  display: block;
  margin: 0 auto 10rem auto;
  /* 親要素の幅に合わせてSVGの幅を100%にする */
  width: 100%;
  /* 縦横比を維持するために高さを自動調整する */
  height: auto;
  /* 必要に応じて最大幅を設定し、大きな画面で過度に大きくならないようにする */
  max-width: 71rem; /* 元の幅を最大幅として設定 */
  overflow: visible;
}
.diversity-area {
  margin-bottom: 12rem;
}
.diversity-area p {
  font-size: 1.6rem;
  line-height: 2;
}
.diversity-area p.mb6 {
  margin-bottom: 6rem;
}
.diversity-area p.mb3 {
  margin-bottom: 3rem;
}
.diversity-area p.mb2 {
  margin-bottom: 2rem;
}
ul.diversity-list {
  counter-reset: listnum;
}
ul.diversity-list li {
  margin-bottom: 8rem;
}
ul.diversity-list li:last-child {
  margin-bottom: 0;
}
.diversity-subtitle {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
}
.diversity-subtitle.blue {
  color: #0068b7;
  margin-bottom: 1rem;
}
.diversity-title {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  border-bottom: 1px solid #e9ecee;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 0;
}
.diversity-title::before {
  counter-increment: listnum;
  content: "（" counter(listnum) "）";
}

.diversity-table-area {
}
.diversity-table {
  width: 100%;
  border-left: 1px solid #e9ecee;
  border-top: 1px solid #e9ecee;
  table-layout: fixed;
}

.diversity-table th {
  font-weight: bold;
  text-align: center;
  background-color: #d0d5da;
  height: 4.5rem;
  padding: 1rem 2rem;
}

.diversity-table td {
  padding: 2rem;
}
.diversity-table th,
.diversity-table td {
  font-size: 1.6rem;
  border-bottom: 1px solid #e9ecee;
  border-right: 1px solid #e9ecee;
  line-height: 1.5;
  vertical-align: middle;
}
ul.matter-list {
}
ul.matter-list li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
ul.matter-list li:last-child {
  margin-bottom: 0;
}
ul.matter-list li.mid {
  position: relative;
  z-index: 0;
}
ul.matter-list li.mid::before {
  content: "・";
  margin-right: 0.5rem;
}
.using-link-area {
  display: flex;
  gap: 1rem;
}
.using-link {
  width: 50%;
}
.using-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: #0068b7;
  min-height: 5rem;
  border: 1px solid #e9ecee;
  border-radius: 10rem;
  padding: 1rem 4rem;
  line-height: 1.5;
}
.using-link a.hover {
  color: #fff;
  background-color: #0068b7;
  border: 1px solid #0068b7;
}
.using-link a.hover span::after {
  filter: brightness(0) invert(1) opacity(0.8);
}
.using-link span {
  position: relative;
  z-index: 0;
  margin: 0 1.5rem 0 0;
}
.using-link span.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -0.2rem;
  right: -2.5rem;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid #0068b7;
  border-right: 1px solid #0068b7;
  transform: rotate(45deg);
}
.using-link span.blank::after {
  content: "";
  width: 1.1rem;
  position: absolute;
  margin: 0.5rem 0 0 0.5rem;
  aspect-ratio: 1;
  background: url(/images3/common/icon-blank.png) no-repeat center / contain;
}
.promotion-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.promotion-box:first-child {
  margin: 0 6rem 0 0;
}
.promotion-box:last-child {
}
.evaluation-area {
  background-color: #f2f6f8;
  padding: 6rem;
}
.evaluation-table {
  width: 100%;
  border-left: 1px solid #e9ecee;
  border-top: 1px solid #e9ecee;
  table-layout: fixed;
}
.evaluation-table th {
  font-weight: bold;

  background-color: #d0d5da;
  height: 5rem;
}
.evaluation-table th:first-child {
  width: 34%;
}
.evaluation-table td:first-child {
  text-align: left;
}
.evaluation-table td {
  background-color: #fff;
}
.evaluation-table td.blue {
  background-color: #d4e6f6;
}
.evaluation-table td.center {
  text-align: center;
}
.evaluation-table th,
.evaluation-table td {
  font-size: 1.6rem;
  border-bottom: 1px solid #e9ecee;
  border-right: 1px solid #e9ecee;
  line-height: 1.5;
  vertical-align: middle;
  padding: 2rem 1.5rem;
  text-align: center;
}
.evaluation-title {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 6rem;
}

.evaluation-subtitle {
  font-size: 2.1rem;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 4rem;
}
.result-area {
  margin-bottom: 12rem;
}
/* ----------------------------------------
.c-generic-link
---------------------------------------- */
.c-generic-link {
  width: 30rem;
  margin: 0 auto;
}
.c-generic-link a {
  position: relative;
  display: grid;
  place-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 30%);
  min-height: 7rem;
  padding: 2rem 4rem;
  background-color: var(--color-main);
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  transition:
    box-shadow 0.12s,
    background-color 0.12s;
}
.c-generic-link a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 0.8rem;
  aspect-ratio: 1;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
.c-generic-link a.hover {
  box-shadow: none;
  background-color: #137bca;
}
/* ----------------------------------------
css animation
---------------------------------------- */

.js-fade {
  opacity: 0;
  transform: translateY(2rem);
}

.js-fadeUp {
  transition: all 0.5s ease-out;
  transition-delay: 0.1s;
  transform: translateY(0);
  opacity: 1;
}