@charset "utf-8";
/* ===========================================================

	Title: features.css
	Created: 2018-3-2

=========================================================== */
/*

	group
	esg


=========================================================== */
.feature-head {
  color: var(--white, #fff);
  padding: 8px 16px;
  font-family: YuGothic;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 32px */
  border-radius: 8px;
  border: 1px solid var(--main-color--01, #00a2d9);
  background: var(--main-color--01, #00a2d9);
  margin-bottom: 24px;
}
.feature-head.small {
  font-size: 18px;
}
.feature-head2 {
  color: var(--white, #fff);
  padding: 16px;
  font-family: YuGothic;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 32px */
  border-radius: 8px;
  border: 1px solid var(--main-color--01, #00a2d9);
  background: var(--main-color--01, #00a2d9);
  margin-bottom: 24px;
}
.feature-head3 {
  display: flex;
  flex-direction: column;
  height: 100px;
  padding: 16px 8px;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  border-radius: 8px;
  border: 2px solid var(--main-color--01, #00a2d9);
  background: var(--sub-color--03, #f0f9f1);
  margin-bottom: 24px;
}
.feature-head3 span {
  font-size: 18px;
}
.feature-column1 {
  display: flex;
  margin-bottom: 32px;
}
.feature-column1 .img-column {
  width: 208px;
  margin-right: 16px;
  text-align: center;
}
.feature-column1 .img-column img {
  display: block;
  width: 100%;
}
.feature-column1 .list-style--disc {
  flex: 1;
}
/* ===========================================================

	index

=========================================================== */

.read {
  color: #00467e;
  font-size: 24px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 2.4px;
  margin-bottom: 32px;
}
/* 全体設定 */
.feature-hub {
  display: flex;
  width: 100%;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

.feature-hub .item {
  flex: 1;
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 各アイテムの基本設定 */
.feature-hub .item01,
.feature-hub .item02,
.feature-hub .item03 {
}

.feature-summary {
  flex-basis: 100%;
  align-self: flex-start;
}

/* dt（タイトル）設定 */
.feature-hub dl dt {
  display: flex;
  font-weight: 700;
  background-color: #00467e;
  color: #fff;
  padding: 12px 24px 16px 16px;
  text-align: left;
  border-radius: 8px 8px 0px 0px;
}
.feature-hub dl dt span:first-child {
  display: block;
  padding-right: 8px;
}

.feature-hub dl dt span:last-child {
}

/* dd（説明文）設定 */
.feature-hub dl dd {
  background-color: #f2f6f9;
  color: #001c32;
  margin: 0;
  padding: 16px 24px 16px 16px;
  text-align: left;
  border-radius: 0px 0px 8px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  margin-bottom: 2rem;
}

.feature-hub dl dd ul {
  padding-left: 0;
}

.feature-hub dl dd ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.feature-hub dl dd ul li::before {
  content: "•";
  color: #00467e;
  font-size: 2em;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-4px);
}

.feature-hub dl::after {
  content: "";
  display: block;
  width: 200px;
  height: 40px;
  margin: 10px auto 0; /* 上の要素との隙間を調整 */
  background: linear-gradient(
    to bottom,
    #fff,
    #6690b2
  ); /* 上から下のグラデーション */
  clip-path: polygon(50% 100%, 0 0, 100% 0); /* 三角形を作成 */
}

/* 各アイテムの補足テキスト */
.feature-hub .feature-txt {
  font-size: 2。0rem;
  font-weight: 700;
  background-color: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
}

/* サマリー部分 */
.feature-hub .feature-summary {
  font-size: 2rem;
  font-weight: 700;
  border: 2px solid #00467e;
  padding: 24px 32px;
  margin-top: 2rem;
  border-radius: 8px;
  text-align: center;
}

.feature-hub .feature-summary strong {
  font-weight: 700;
}

/* ===========================================================

	portfolio

=========================================================== */

.table-feature-portfolio {
}

.table-feature-portfolio thead th,
.table-feature-portfolio tbody td {
  text-align: center;
}

.table-feature-portfolio thead th:first-child {
  width: 70%;
}

.table-feature-portfolio thead th span {
  font-size: 1.4rem;
  display: block;
}

.table-feature-portfolio tbody td strong {
  font-size: 2rem;
  font-size: 2rem;
  font-weight: 700;
  margin-right: 5px;
}

.table-feature-portfolio2 th {
  width: 25%;
}

/* ===========================================================

	growth

=========================================================== */
.feature-hub--growth {
  display: flex;
  width: 100%;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 2rem;
}

.feature-hub--growth .item {
  flex: 1;
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 各アイテムの基本設定 */
.feature-hub--growth .item01,
.feature-hub--growth .item02,
.feature-hub--growth .item03 {
}

.feature-hub--growth dl {
  height: 100%;
}
/* dt（タイトル）設定 */
.feature-hub--growth dl dt {
  display: flex;
  font-weight: 700;
  background-color: #00467e;
  color: #fff;
  padding: 12px 24px 16px 16px;
  text-align: left;
  border-radius: 8px 8px 0px 0px;
}
.feature-hub--growth dl dt span:first-child {
  display: block;
  padding-right: 8px;
}

.feature-hub--growth dl dt span:last-child {
}

/* dd（説明文）設定 */
.feature-hub--growth dl dd {
  background-color: #f2f6f9;
  color: #001c32;
  margin: 0;
  padding: 16px 24px 16px 16px;
  text-align: left;
  border-radius: 0px 0px 8px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  min-height: 340px;
}

.feature-hub--growth dl dd ul {
  padding-left: 0;
}

.feature-hub--growth dl dd ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.feature-hub--growth dl dd ul li::before {
  content: "•";
  color: #00467e;
  font-size: 2em;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-4px);
}

/* 各アイテムの補足テキスト */
.feature-hub--growth .feature-txt {
  font-size: 2。0rem;
  font-weight: 700;
  background-color: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
}

/* サマリー部分 */
.feature-hub--growth .feature-summary {
  font-size: 1.8rem;
  border: 1px solid #00467e;
  padding: 24px 32px;
  margin-top: 2rem;
  border-radius: 8px;
  text-align: center;
}

.feature-hub--growth .feature-summary strong {
  font-weight: 700;
}

.feature-hub--growth dl dd ul.growth-caution li::before {
  font-size: 1.6rem;
  color: #000;
  content: attr(data-indent-head);
  transform: translateY(6px);
}

/* ===========================================================

	sponsor

=========================================================== */

.box-sponsor {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.box-sponsor p {
  padding: 12px 0 12px 16px;
}

/* ===========================================================

	esg

=========================================================== */

.link-list {
  margin: 1rem 0;
}
.box-esg {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  border-radius: 0;
  margin-top: 40px;
}

.box-esg .item {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 0;
  position: relative;
}

.box-esg .item .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 60px;
}

.box-esg ul.list-initiative {
  padding-left: 0;
}

.box-esg ul.list-initiative li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.box-esg ul.list-initiative li::before {
  content: "•";
  color: #00467e;
  font-size: 2em;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-4px);
}

.box-esg .list-logo {
  display: flex;
  gap: 10px;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.box-esg .list-logo li img {
  max-width: 100px;
  height: auto;
  object-fit: contain;
}

.box-esg .pic-single {
  width: 100%;
  margin-top: 0;
  text-align: center;
}

.box-esg .pic-single img {
  width: 700px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.box-esg .item.typeE {
  border: 1px solid #239e89;
}

.box-esg .item.typeS {
  border: 1px solid #1d8ab3;
}

.box-esg .item.typeG {
  border: 1px solid #09366c;
}

.box-esg .item::before {
  content: "";
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  background-color: #000;
  line-height: 1;
  padding: 16px 20px;
  position: absolute;
  top: 0;
  left: 0;
}

.box-esg .item.typeE::before {
  content: "E";
  background-color: #239e89;
}

.box-esg .item.typeS::before {
  content: "S";
  background-color: #1d8ab3;
}

.box-esg .item.typeG::before {
  content: "G";
  background-color: #09366c;
}