@charset "UTF-8";

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

  Assorti Company PC Style

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

/* Page Common
------------------------------------------ */
dl dt h3 {
  font-size: 60px;
  font-size: 6.0rem;
  font-weight: 400;
  letter-spacing: 0.075em;
  text-shadow:
  1px 1px 0 var(--wht), -1px -1px 0 var(--wht), -1px 1px 0 var(--wht), 1px -1px 0 var(--wht),
  0px 1px 0 var(--wht),  0 -1px 0 var(--wht), -1px 0 0 var(--wht), 1px 0 0 var(--wht);
}
dl dd p {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: 0.075em;
  line-height: calc(40 / 18);
}

@media screen and (max-width:1024px) {
  dl dt h3 { font-size: calc(60 / 1500 * 100vw); }
}

/* ------------------------------------------

  Page Header

------------------------------------------ */
.page-header .inner { padding: 130px 0 0; }
.page-heading {
  width: 396px;
  bottom: initial;
}
.page-catch {
  right: 0;
  width: 784px;
  opacity: 0.6;
}

@media screen and (max-width:1024px) {
  .page-header .inner { padding: calc(130 / 1500 * 100%) 0 0; }
  .page-heading { width: calc(396 / 1500 * 100vw); }
  .page-catch { width: calc(784 / 1500 * 100vw); }
}


/* ------------------------------------------

  Section

------------------------------------------ */

/* Section01
------------------------------------------ */
.sec01 { padding: 115px 0 300px; }
.sec01 .green-line {
  content: "";
  position: absolute;
  z-index: -1;
  top: -160px;
  left: 0;
  width: 90px;
  height: 355px;
  background-color: var(--green);
  transform: skewX(15deg);
  transform-origin: 0 100%;
}
.greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.greeting dl {
  width: calc(835 / 1200 * 100%);
  padding: 0 calc(145 / 1200 * 100%) 0 0;
}
.greeting dl dt { margin: 0 0 55px; }
.greeting figure { flex-shrink: 0; }
.greeting figure figcaption {
  display: flex;
  align-items: center;
  margin: 25px 0 0;
}
.greeting figure figcaption span {
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.075em;
  margin: 0 15px 0 0;
}

@media screen and (max-width:1024px) {
  .sec01 { padding: calc(115 / 1500 * 100%) 0 calc(300 / 1500 * 100%); }
  .sec01 .green-line {
    top: calc(160 / 1500 * -100vw);
    width: calc(90 / 1500 * 100vw);
    height: calc(355 / 1500 * 100vw);
  }
  .greeting dl dt { margin: 0 0 calc(55 / 1500 * 100%); }
}

/* Section02
------------------------------------------ */
.sec02 { padding: 0 0 300px; }
.corp-profile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.sec-visual { position: relative; }
.sec-visual::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -40px;
  width: 160px;
  height: 40px;
  background-color: var(--green);
  transform: skewX(15deg);
  transform-origin: 0 0;
}
.sec-visual h3 {
  font-size: 60px;
  font-size: 6.0rem;
  font-weight: 400;
  letter-spacing: 0.075em;
  margin: 0 0 60px;
}
.sec02 dl {
  width: 50%;
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: 0.075em;
  line-height: calc(30 / 18);
  padding: 0 0 0 calc((100% - 1200px) / 2);
}
.sec02 dl dd {
  border-bottom: solid 1px #cfd8dc;
  margin: 0 0 1em;
  padding: 0 0 1em;
}
.sec02 dl dd a {
  color: var(--blk);
  text-decoration: none;
}

@media screen and (max-width:1024px) {
  .sec02 { padding: 0 0 calc(300 / 1500 * 100%); }
  .sec-visual { width: calc(580 / 1500 * 100vw); }
  .sec-visual::after {
    bottom: calc(40 / 1500 * -100vw);
    width: calc(160 / 1500 * 100vw);
    height: calc(40 / 1500 * 100vw);
  }
  .sec-visual h3 {
    font-size: calc(60 / 1500 * 100vw);
    margin: 0 0 calc(60 / 1500 * 100%);
  }
  .sec02 dl { padding: 0 0 0 calc((100% - 93.75%) / 2); }
}

/* Section03
------------------------------------------ */
.sec03 { padding: 0 0 200px; }
.sec03 .green-line {
  content: "";
  position: absolute;
  z-index: -1;
  top: -300px;
  left: 0;
  width: 90px;
  height: 355px;
  background-color: var(--green);
  transform: skewX(15deg);
  transform-origin: 0 100%;
}
.sec-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 135px;
}
.sec-intro dl { width: calc(695 / 1200 * 100%); }
.sec-intro dl dt {
  line-height: 1.0;
  margin: 0 0 60px;
}
.sec-intro figure {
  width: calc(364 / 1200 * 100%);
  flex-shrink: 0;
}
.ten-goals { margin: 0 0 80px; }
.ten-goals h4 {
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: 0.075em;
  text-align: center;
}
.ten-goals ul {
  width: 1020px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 45px auto 0;
}
.ten-goals ul li {
  width: 180px;
  border: solid 1px #efefef;
  margin: 0 0 30px;
}
.sdgs-images {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.sdgs-images figure {
  position: relative;
  width: 364px;
  flex-shrink: 0;
}
.sdgs-images figure:first-of-type { margin: 0 54px 0 0; }
.sdgs-images figure:nth-of-type(2n) { margin: 100px 54px 0 0; }
.sdgs-images figure:nth-of-type(3n) { margin: 200px 0 0; }
.sdgs-images figure:nth-of-type(4n) { margin: 0 54px 0 0; }
.sdgs-images figure:nth-of-type(5n) { margin: 100px 54px 0 0; }
/*
.sdgs-images figure:nth-of-type(5n) { margin: 0 54px 0 0; }
*/
.sdgs-images figure figcaption {
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: 0.075em;
  line-height: calc(36 / 18);
  margin: 0.5em 0 0;
}

@media screen and (max-width:1024px) {
  .sec03 { padding: 0 0 calc(200 / 1500 * 100%); }
  .sec03 .green-line {
    top: calc(300 / 1500 * -100vw);
    width: calc(90 / 1500 * 100vw);
    height: calc(355 / 1500 * 100vw);
  }
  .sec-intro { margin: 0 0 calc(135 / 1500 * 100%); }
  .sec-intro dl dt { margin: 0 0 calc(60 / 1500 * 100%); }
  .ten-goals { margin: 0 0 calc(80 / 1500 * 100%); }
  .ten-goals h4 { font-size: calc(36 / 1500 * 100vw); }
  .ten-goals ul {
    width: calc(1020 / 1200 * 100%);
    margin: calc(45 / 1500 * 100%) auto 0;
  }
  .ten-goals ul li { width: calc(180 / 1020 * 100%); }
  .sdgs-images figure { width: calc((100% - (54 / 1500 * 100% * 2)) / 3); }
  .sdgs-images figure:first-of-type { margin: 0 calc(54 / 1500 * 100%) 0 0; }
  .sdgs-images figure:nth-of-type(2n) { margin: calc(100 / 1500 * 100%) calc(54 / 1500 * 100%) 0 0; }
  .sdgs-images figure:nth-of-type(3n) { margin: calc(200 / 1500 * 100%) 0 0; }
  .sdgs-images figure:nth-of-type(4n) { margin: 0 calc(54 / 1500 * 100%) 0 0; }
  .sdgs-images figure:nth-of-type(5n) { margin: calc(100 / 1500 * 100%) calc(54 / 1500 * 100%) 0 0; }
  .sdgs-images figure figcaption { line-height: 1.8; }
}

small {
  font-size: calc(14 / 18 * 1em);
  display: block;
  line-height: calc(40 / 14);
}