@charset "UTF-8";
/* [ クレステック global ] setting */
/* [ クレステック gloal ] component */
body {
  font-family: "Be Vietnam Pro", sans-serif;
}

.main-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}
.main-image h1 {
  width: 100%;
  color: #fff;
}
@media screen and (min-width: 1141px) {
  .main-image {
    aspect-ratio: 18 / 5;
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 90px;
  }
  .main-image h1 {
    max-width: calc(1460px * 0.8);
    line-height: 1.064;
    padding: 0 1.39vw;
  }
}
@media only screen and (max-width: 1140px) {
  .main-image {
    aspect-ratio: 8 / 9;
    background-position: top left;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .main-image h1 {
    line-height: 1.25;
    padding-left: 8.75vw;
  }
}

@media screen and (min-width: 1141px) {
  .container:has(.social) .main-image {
    background-image: url("../img/social/bg_main.jpg");
  }
}
@media only screen and (max-width: 1140px) {
  .container:has(.social) .main-image {
    background-image: url("../img/social/bg_main_sp.jpg");
  }
}
@media screen and (min-width: 1141px) {
  .container:has(.environment) .main-image {
    background-image: url("../img/environment/bg_main.jpg");
  }
}
@media only screen and (max-width: 1140px) {
  .container:has(.environment) .main-image {
    background-image: url("../img/environment/bg_main_sp.jpg");
  }
}
@media screen and (min-width: 1141px) {
  .container:has(.sdgs) .main-image {
    background-image: url("../img/sdgs/bg_main.jpg");
  }
}
@media only screen and (max-width: 1140px) {
  .container:has(.sdgs) .main-image {
    background-image: url("../img/sdgs/bg_main_sp.jpg");
  }
}
@media screen and (min-width: 1141px) {
  .container:has(.governance) .main-image {
    background-image: url("../img/governance/bg_main.jpg");
  }
}
@media only screen and (max-width: 1140px) {
  .container:has(.governance) .main-image {
    background-image: url("../img/governance/bg_main_sp.jpg");
  }
}

.sub-text {
  width: 100%;
}
.sub-text p {
  font-weight: 500;
}
@media screen and (min-width: 1141px) {
  .sub-text {
    max-width: calc(1460px * 0.8);
    padding: 0 1.04vw;
    margin: 2.6vw auto 0;
  }
  .sub-text p {
    font-size: clamp(1.7rem, calc(1.15vw * 0.8), calc(2.2rem * 0.8));
    line-height: 2.0;
  }
}
@media only screen and (max-width: 1140px) {
  .sub-text {
    padding: 0 3.75vw;
    margin: 5.13vw auto 0;
  }
  .sub-text p {
    font-size: calc(28 * 1px);
    font-size: calc(calc(100 / 800) * 28 * 1vw);
    line-height: 1.714;
  }
}

.ttl {
  position: relative;
  width: fit-content;
  color: #012148;
  font-weight: 800;
  line-height: 1.333;
  text-align: center;
  margin: 0 auto;
}
.ttl::after {
  position: absolute;
  content: '';
  left: 50%;
  background: #012148;
  transform: translateX(-50%);
}
@media screen and (min-width: 1141px) {
  .ttl {
    font-size: clamp(5rem, calc(3.13vw * 0.6), calc(6.0rem * 0.6));
    margin-top: 5.68vw;
  }
}
@media screen and (min-width: 1141px) and (min-width: 1441px) {
  .ttl {
    font-size: clamp(5rem, calc(3.13vw * 0.8), calc(6.0rem * 0.8));
  }
}
@media screen and (min-width: 1141px) {
  .ttl::after {
    bottom: -24px;
    width: 80px;
    height: 10px;
    border-radius: 5px;
  }
}
@media only screen and (max-width: 1140px) {
  .ttl {
    font-size: calc(60 * 1px);
    font-size: calc(calc(100 / 800) * 60 * 1vw);
    margin-top: 7.88vw;
  }
  .ttl::after {
    bottom: -5vw;
    width: 10vw;
    height: 1.25vw;
    border-radius: 0.63vw;
  }
}

.cts {
  width: 100%;
}
.cts h3 {
  width: fit-content;
  color: #012148;
  font-weight: 700;
  line-height: 1.333;
}
.cts p {
  font-weight: 500;
}
.cts h4 {
  color: #012148;
  font-weight: 700;
}
.cts .cts-list {
  display: flex;
  width: 100%;
}
.cts .cts-list dl dt::before {
  content: '●';
}
.cts .cts-list dl dd img.jubilo {
  aspect-ratio: 199 / 65;
}
.cts .cts-list dl dd img.yamaga {
  aspect-ratio: 636 / 167;
}
.cts .cts-list dl dd img.ssu {
  aspect-ratio: 483 / 179;
}
@media screen and (min-width: 1141px) {
  .cts {
    max-width: calc(1460px * 0.8);
    padding: 0 1.04vw;
    margin: calc(7.4vw + 24px) auto 4.27vw;
  }
  .cts h3 {
    font-size: clamp(3rem, 2.36vw, 3.4rem);
  }
  .cts p {
    font-size: clamp(1.7rem, calc(1.15vw * 0.8), calc(2.2rem * 0.8));
    line-height: 2.0;
    margin-top: 2.19vw;
  }
  .cts .cts-list {
    flex-wrap: wrap;
    gap: 1.39vw;
    margin-top: 1.98vw;
  }
  .cts .cts-list dl {
    width: calc((100% - (1.39vw * 2)) / 3);
  }
  .cts .cts-list dl dt {
    font-size: clamp(1.7rem, calc(1.15vw * 0.8), calc(2.2rem * 0.8));
    font-weight: 700;
    line-height: 2.0;
  }
  .cts .cts-list dl dd {
    padding-left: 2.6vw;
    margin-top: 1.56vw;
  }
}
@media only screen and (max-width: 1140px) {
  .cts {
    padding: 0 3.75vw;
    margin: calc(15.25vw + 5vw) auto 12.5vw;
  }
  .cts h3 {
    font-size: calc(60 * 1px);
    font-size: calc(calc(100 / 800) * 60 * 1vw);
  }
  .cts p {
    font-size: calc(28 * 1px);
    font-size: calc(calc(100 / 800) * 28 * 1vw);
    margin-top: 3.75vw;
  }
  .cts h4 {
    font-size: calc(40 * 1px);
    font-size: calc(calc(100 / 800) * 40 * 1vw);
    margin-top: 9.38vw;
  }
  .cts .cts-list {
    flex-direction: column;
    gap: 9.38vw;
    margin-top: 6.13vw;
  }
  .cts .cts-list dl {
    width: 100%;
  }
  .cts .cts-list dl dt {
    font-size: calc(28 * 1px);
    font-size: calc(calc(100 / 800) * 28 * 1vw);
    font-weight: 800;
  }
  .cts .cts-list dl dd {
    margin-top: 3.75vw;
    text-align: center;
  }
  .cts .cts-list dl dd img.jubilo {
    width: 83.5%;
  }
  .cts .cts-list dl dd img.yamaga {
    width: 86.4%;
  }
  .cts .cts-list dl dd img.ssu {
    width: 67.8%;
  }
}

.environment .environment-policy div {
  width: 100%;
  background: #012148;
}
.environment .environment-policy div dl {
  color: #fff;
}
@media screen and (min-width: 1141px) {
  .environment .environment-policy {
    max-width: calc(calc(1460px * 0.8) - 30px);
    margin: 4.9vw auto 7.08vw;
  }
  .environment .environment-policy div {
    padding: 3.13vw 2.55vw 3.13vw 1.82vw;
  }
  .environment .environment-policy div dl {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 4.17vw;
  }
  .environment .environment-policy div dl:last-child {
    margin-bottom: 0;
  }
  .environment .environment-policy div dl dt {
    width: 32.26%;
    font-size: clamp(2.4rem, calc(1.56vw * 0.8), calc(3.0rem * 0.8));
    font-weight: 800;
  }
  .environment .environment-policy div dl dd {
    width: calc(100% - 32.26%);
    font-size: clamp(1.7rem, calc(1.15vw * 0.8), calc(2.2rem * 0.8));
    line-height: 2.0;
  }
}
@media only screen and (max-width: 1140px) {
  .environment .environment-policy {
    padding: 0 1.69vw;
    margin: 12.25vw 0 14.63vw;
  }
  .environment .environment-policy div {
    padding: 6.13vw 2.13vw 8.25vw 4.88vw;
  }
  .environment .environment-policy div dl {
    margin-bottom: 10vw;
  }
  .environment .environment-policy div dl:last-child {
    margin-bottom: 0;
  }
  .environment .environment-policy div dl dt {
    font-size: calc(40 * 1px);
    font-size: calc(calc(100 / 800) * 40 * 1vw);
    font-weight: 700;
    margin-bottom: 2.5vw;
  }
  .environment .environment-policy div dl dd {
    font-size: calc(28 * 1px);
    font-size: calc(calc(100 / 800) * 28 * 1vw);
  }
}
@media screen and (min-width: 1141px) {
  .environment .content-detail5 h3 {
    font-size: clamp(3rem, calc(2.36vw * 0.8), calc(3.4rem * 0.8));
  }
}
@media screen and (min-width: 1141px) {
  .environment .content-detail3 h3 {
    font-size: clamp(3rem, calc(2.36vw * 0.8), calc(3.4rem * 0.8));
  }
}
@media screen and (min-width: 1141px) {
  .environment .content-detail4 h3 {
    font-size: clamp(3rem, calc(2.36vw * 0.8), calc(3.4rem * 0.8));
  }
}

@media screen and (min-width: 1141px) {
  .social .content-detail3 h3 {
    font-size: clamp(3rem, calc(2.36vw * 0.8), calc(3.4rem * 0.8));
  }
}
@media only screen and (max-width: 1140px) {
  .social .content-detail3 h3 {
    font-size: calc(30 * 1px);
    font-size: calc(calc(100 / 800) * 30 * 1vw);
  }
}
@media screen and (min-width: 1141px) {
  .social .content-detail4 h3 {
    font-size: clamp(3rem, calc(2.36vw * 0.8), calc(3.4rem * 0.8));
  }
}
@media only screen and (max-width: 1140px) {
  .social .content-detail4 h3 {
    font-size: calc(30 * 1px);
    font-size: calc(calc(100 / 800) * 30 * 1vw);
  }
}

.sdgs .sdgs-wrap {
  width: 100%;
}
@media screen and (min-width: 1141px) {
  .sdgs .sdgs-wrap {
    max-width: calc(1460px * 0.8);
    padding: 0 1.04vw;
    margin: 0 auto 4.86vw;
  }
  .sdgs .sdgs-wrap .sdgs-subject {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.6vw;
    margin-bottom: 2.92vw;
  }
  .sdgs .sdgs-wrap .sdgs-subject img {
    width: max(120px, 8.33vw);
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .sdgs .sdgs-wrap .sdgs-subject h3 {
    color: #012148;
    font-size: clamp(3rem, calc(2.36vw * 0.8), calc(3.4rem * 0.8));
  }
  .sdgs .sdgs-wrap h4 {
    color: #111;
    font-size: clamp(2.4rem, calc(1.56vw * 0.8), calc(3.0rem * 0.8));
    margin-bottom: 1.6vw;
  }
  .sdgs .sdgs-wrap p {
    font-size: clamp(1.6rem, calc(1.15vw * 0.8), calc(2.2rem * 0.8));
    margin-bottom: 1.88vw;
  }
  .sdgs .sdgs-wrap ul {
    margin-left: 1.25em;
  }
  .sdgs .sdgs-wrap ul li {
    font-size: clamp(1.8rem, calc(1.15vw * 0.8), calc(2.2rem * 0.8));
    margin-bottom: 1.04vw;
  }
  .sdgs .sdgs-wrap ul li:last-child {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 1140px) {
  .sdgs .sdgs-wrap {
    padding: 0 3.75vw;
    margin-bottom: 12.5vw;
  }
  .sdgs .sdgs-wrap .sdgs-subject {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4.13vw;
    margin-bottom: 4.13vw;
  }
  .sdgs .sdgs-wrap .sdgs-subject img {
    width: 25vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .sdgs .sdgs-wrap .sdgs-subject h3 {
    color: #012148;
    font-size: calc(30 * 1px);
    font-size: calc(calc(100 / 800) * 30 * 1vw);
    line-height: 1.5;
  }
  .sdgs .sdgs-wrap h4 {
    color: #111;
    font-size: calc(24 * 1px);
    font-size: calc(calc(100 / 800) * 24 * 1vw);
    margin-bottom: 3.13vw;
  }
  .sdgs .sdgs-wrap p {
    font-size: calc(28 * 1px);
    font-size: calc(calc(100 / 800) * 28 * 1vw);
    line-height: 1.714;
    margin-bottom: 4.38vw;
  }
  .sdgs .sdgs-wrap ul {
    margin-left: 1.25em;
  }
  .sdgs .sdgs-wrap ul li {
    font-size: calc(28 * 1px);
    font-size: calc(calc(100 / 800) * 28 * 1vw);
    line-height: 1.714;
    text-indent: -1.25em;
    padding-left: 1.25em;
    margin-bottom: 1.04vw;
  }
  .sdgs .sdgs-wrap ul li:last-child {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1141px) {
  .governance .content-detail4 > div picture {
    max-width: 80%;
  }
}
