@charset "UTF-8";

/* themes-blk */
.center {
  text-align: center;
}

.themes-blk {
  padding: 100px 0;
}

.themes-blk .theme-card {
  position: relative;
  width: 46.4%;
  margin-bottom: 40px;
  padding: 40px;
  background-color: #fff;
  border-radius: 4px;
}

.themes-blk .theme-card:last-child {
  margin-bottom: 0;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow {
  background-color: #fff;
  transition: all .2s;
}

.themes-blk .theme-card.yellow::before,
.themes-blk .theme-card .yellow {
  background-color: #f5a22c;
  transition: all .2s;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.yellow {
  border: 1px solid #f5a22c;
  border-radius: 50%;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.yellow::after {
  transition: all .2s;
  filter: invert(58%) sepia(70%) saturate(730%) hue-rotate(336deg) brightness(98%) contrast(95%);
}

.themes-blk .theme-card.blue::before,
.themes-blk .theme-card .blue {
  background-color: #0075ba;
  transition: all .2s;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.blue {
  border: 1px solid #0075ba;
  border-radius: 50%;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.blue::after {
  filter: invert(60%) sepia(85%) saturate(1955%) hue-rotate(181deg) brightness(80%) contrast(106%);
}

.themes-blk .theme-card.cyan::before,
.themes-blk .theme-card .cyan {
  background-color: #22b7a9;
  transition: all .2s;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.cyan {
  border: 1px solid #22b7a9;
  border-radius: 50%;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.cyan::after {
  filter: invert(55%) sepia(99%) saturate(358%) hue-rotate(125deg) brightness(91%) contrast(85%);
}

.themes-blk .theme-card.pink::before,
.themes-blk .theme-card .pink {
  background-color: #e96b9a;
  transition: all .2s;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.pink {
  border: 1px solid #e96b9a;
  border-radius: 50%;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.pink::after {
  filter: invert(57%) sepia(57%) saturate(1813%) hue-rotate(302deg) brightness(101%) contrast(83%);
}

.themes-blk .theme-card.purple::before,
.themes-blk .theme-card .purple {
  background-color: #a672af;
  transition: all .2s;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.purple {
  border: 1px solid #a672af;
  border-radius: 50%;
}

.themes-blk .theme-ttl:hover .theme-ttl-arrow.purple::after {
  filter: invert(53%) sepia(10%) saturate(1647%) hue-rotate(245deg) brightness(94%) contrast(92%);
}

.themes-blk .theme-card.top-border::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 84.3%;
  height: 4px;
  content: "";
  transform: translateX(-50%);
  border-radius: 0 0 2px 2px;
}

.themes-blk .theme-ttl {
  display: inline-block;
  position: relative;
  padding-right: 38px;
  font-size: 1.25rem;
  font-weight: 700;
}

.themes-blk .theme-ttl .theme-ttl-arrow {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 0;
  width: 100%;
  height: 24px;
  border: 1px solid transparent;
  max-width: 24px;
  border-radius: 50%;
}

.themes-blk .theme-ttl .theme-ttl-arrow::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: url('/img/common/ico_right_arrow.png') no-repeat center/contain;
  content: "";
  transform: translate(-50%, -50%);
}

.themes-blk .theme-list li a {
  display: flex;
  color: #048851;
}

.themes-blk .theme-list li a span {
  margin-right: 15px;
}

.themes-blk .theme-list li a span img {
  width: 8px;
  max-width: 8px;
}

/* stb-link-flex */
.stb-link-flex {
  display: flex;
  flex-wrap: wrap;
}

.stb-link-flex .stb-link {
  display: inline-block;
  width: 30.91%;
  margin-right: 3.5%;
  padding: 16px 0;
  background-color: #fff;
  color: #048851;
  font-weight: 700;
  border-bottom: 1px solid #e6e6e6;
}

.stb-link-flex .stb-link:nth-child(3n) {
  margin-right: 0;
}

.stb-link-flex .stb-link .stb-link-txt {
  position: relative;
  padding: 0 46px 0 20px;
}

.stb-link-flex .stb-link .arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3%;
  width: 24px;
  margin-left: 10px;
  padding: 12px 0;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
}

.stb-link-flex .stb-link .arrow::after,
.stb-link-flex .stb-link.active .arrow::after {
  position: absolute;
  top: 50%;
  right: 38%;
  width: 6px;
  height: 6px;
  background-color: #048851;
  content: '';
  transform: translateY(-50%);
  border-radius: 50%;
}

.stb-link-flex .stb-link:hover {
  background-color: #048851;
  color: #fff;
  border-radius: 5px;
}

.stb-link-flex .stb-link:hover .arrow,
.stb-link-flex .stb-link:active .arrow,
.stb-link-flex .stb-link.active .arrow {
  width: 24px;
  padding: 12px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
}

.stb-link-flex .stb-link:hover .arrow::after,
.stb-link-flex .stb-link:active .arrow:after,
.stb-link-flex .stb-link.active .arrow::after {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 8px;
  height: 8px;
  background: url('/img/common/ico_arrow.svg') no-repeat center/contain;
  content: '';
  transform: translate(50%, -50%) rotate(90deg);
  border-radius: unset;
}

/* common sustainable business process and environment */

.cmm-sustainable-area .related-img-blk {
  justify-content: flex-start;
}

.cmm-sustainable-area .cmm-sub-sustainable {
  align-items: flex-start;
}

.cmm-sustainable-area .bg-gray-content {
  padding: 20px;
}

.cmm-sustainable-area .related-img-blk .related-img {
  width: 11.06%;
  margin-right: 2%;
}

.cmm-sustainable-area .common-button {
  width: 100%;
  padding: 20px 62px 20px 20px;
  border-left: unset;
  border-right: unset;
  border-radius: 0;
  border-top: 1px solid #e6e6e6 !important;
  border-bottom: unset;
}

.cmm-sustainable-area .common-button:last-child {
  border-bottom: 1px solid #e6e6e6 !important;
}

.cmm-sustainable-area .common-button .arrow {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.cmm-boxshadow-img {
  box-shadow: 30px 30px 30px #C6E8DAB3;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .themes-blk .theme-ttl:hover .theme-ttl-arrow.yellow {
    border: 1px solid transparent;
    background-color: #f5a22c;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.yellow::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.blue {
    border: 1px solid transparent;
    background-color: #0075ba;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.blue::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.cyan {
    border: 1px solid transparent;
    background-color: #22b7a9;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.cyan::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.pink {
    border: 1px solid transparent;
    background-color: #e96b9a;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.pink::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.purple {
    border: 1px solid transparent;
    background-color: #a672af;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.purple::after {
    filter: unset;
  }

  .stb-link-flex .stb-link .arrow {
    width: 24px;
    padding: 12px;
    background-color: #048851;
    transition: all 0.3s ease-in-out;
    border-radius: 50%;
  }

  .stb-link-flex .stb-link .arrow::after {
    right: 50%;
    width: 8px;
    height: 8px;
    background: url(/img/common/ico_arrow_white.svg) no-repeat center/contain;
    transform: translate(50%, -50%);
    border-radius: unset;
  }

  .stb-link-flex .stb-link:hover {
    background-color: #fff;
    color: #048851;
    border-radius: 5px;
  }

  .stb-link-flex .stb-link:hover .arrow {
    background-color: #048851;
  }

  .stb-link-flex .stb-link:hover .arrow::after {
    background: url(/img/common/ico_arrow_white.svg) no-repeat center/contain;
    transform: translate(50%, -50%);
  }
}

@media only screen and (max-width: 767.9px) {
  .cmm-boxshadow-img {
    box-shadow: 15px 15px 15px #C6E8DAB3;
  }

  /* themes-blk */
  .themes-blk {
    padding: 50px 0;
  }

  .themes-blk .theme-card {
    width: 100%;
    padding: 30px 20px;
  }

  .themes-blk .theme-list li a span {
    margin-right: 4%;
  }

  .themes-blk .theme-card.top-border::before {
    width: 100%;
  }

  .themes-blk .theme-ttl .theme-ttl-arrow {
    top: 6px;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.yellow {
    border: 1px solid transparent;
    background-color: #f5a22c;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.yellow::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.blue {
    border: 1px solid transparent;
    background-color: #0075ba;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.blue::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.cyan {
    border: 1px solid transparent;
    background-color: #22b7a9;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.cyan::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.pink {
    border: 1px solid transparent;
    background-color: #e96b9a;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.pink::after {
    filter: unset;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.purple {
    border: 1px solid transparent;
    background-color: #a672af;
  }

  .themes-blk .theme-ttl:hover .theme-ttl-arrow.purple::after {
    filter: unset;
  }

  /* stb-link-flex */
  .stb-link-flex .stb-link {
    width: 100%;
    margin-right: 0;
  }

  .stb-link-flex .stb-link:hover {
    background-color: #fff;
    color: #048851;
    border-radius: 5px;
  }

  .stb-link-flex .stb-link .arrow {
    width: 24px;
    padding: 12px;
    background-color: #048851;
    transition: all 0.3s ease-in-out;
    border-radius: 50%;
  }

  .stb-link-flex .stb-link .arrow::after {
    right: 50%;
    width: 8px;
    height: 8px;
    background: url('/img/common/ico_arrow_white.svg') no-repeat center/contain;
    transform: translate(50%, -50%);
    border-radius: unset;
  }

  .stb-link-flex .stb-link:hover .arrow {
    background-color: #048851;
  }

  .stb-link-flex .stb-link:hover .arrow::after {
    background: url('/img/common/ico_arrow_white.svg') no-repeat center/contain;
    transform: translate(50%, -50%);
  }

  /* common sustainable business process and environment */

  .cmm-sustainable-area .related-img-blk .related-img {
    width: 27.94%;
    margin-right: 5.3%;
    margin-bottom: 4.8%;
  }

  .cmm-sustainable-area .bg-gray-content {
    padding: 4.8% 0 0 4.8%;
  }
}