@charset "UTF-8";

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

  Assorti Company SP Style

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

/* Page Common
------------------------------------------ */
dl dt h3 { font-size: calc(48 / 750 * 100vw); }
dl dd p { font-size: calc(24 / 750 * 100vw * 1.15); }

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

  Page Header

------------------------------------------ */
.page-header .inner { padding: calc(100 / 750 * 100%) 0 0; }
.page-heading { width: calc(308 / 750 * 100vw); }
.page-catch { width: calc(627 / 750 * 100vw); }

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

  Section

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

/* Section01
------------------------------------------ */
.sec01 { padding: calc(130 / 750 * 100%) 0 calc(200 / 750 * 100%); }
.sec01 .green-line {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(160 / 750 * -100vw);
  left: 0;
  width: calc(60 / 750 * 100vw);
  height: calc(240 / 750 * 100vw);
  background-color: var(--green);
}
.greeting { flex-direction: column; }
.greeting dl {
  width: 100%;
  padding: 0;
  margin: 0 0 calc(50 / 750 * 100%);
}
.greeting dl dt { margin: 0 0 calc(55 / 750 * 100%); }
.greeting figure {
  width: calc(364 / 750 * 100vw);
  margin: 0 auto;
}
.greeting figure figcaption {
  justify-content: center;
  margin: 25px 0 0;
}
.greeting figure figcaption img { width: calc(150 / 750 * 100vw); }
.greeting figure figcaption span { font-size: calc(18 / 750 * 100vw); }

@media screen and (max-width:480px) {
  .greeting figure figcaption {
    flex-direction: column;
    margin: 15px 0 0;
  }
  .greeting figure figcaption span { margin: 0 0 5px; }
}
@media screen and (max-width:414px) {
  .greeting figure figcaption img { width: calc(150 / 750 * 100vw * 1.15); }
  .greeting figure figcaption span { font-size: calc(18 / 750 * 100vw * 1.15); }
}

/* Section02
------------------------------------------ */
.sec02 { padding: 0 0 calc(300 / 750 * 100%); }
.corp-profile { flex-direction: column; }
.sec-visual {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 0 0 4.666666%;
  margin: 0 0 calc(95 / 750 * 100%);
}
.sec-visual::after {
  bottom: calc(32 / 750 * -100vw);
  width: calc(125 / 750 * 100vw);
  height: calc(32 / 750 * 100vw);
}
.sec-visual figure { width: calc(470 / 750 * 100vw); }
.sec-visual h3 {
  font-size: calc(48 / 750 * 100vw);
  margin: 0;
}
.sec02 dl {
  width: 100%;
  font-size: calc(24 / 750 * 100vw * 1.15);
  padding: 0 4.666666%;
}
.sec02 dl dd {
  border-bottom: solid 1px #cfd8dc;
  margin: 0 0 1em;
  padding: 0 0 1em;
}

/* Section02
------------------------------------------ */
.sec03 { padding: 0 0 calc(180 / 750 * 100%); }
.sec03 .green-line {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(300 / 750 * -100vw);
  left: 0;
  width: calc(60 / 750 * 100vw);
  height: calc(240 / 750 * 100vw);
  background-color: var(--green);
}
.sec-intro {
  flex-direction: column;
  margin: 0 0 calc(100 / 750 * 100%);
}
.sec-intro dl { width: 100%; }
.sec-intro dl dt { margin: 0 0 calc(60 / 750 * 100%); }
.sec-intro figure {
  width: calc(291 / 750 * 100vw);
  margin: calc(45 / 750 * 100%) auto 0;
}
.ten-goals { margin: 0 0 calc(60 / 750 * 100%); }
.ten-goals h4 {
  font-size: calc(40 / 750 * 100vw);
}
.ten-goals ul {
  width: 100%;
  margin: calc(40 / 750 * 100%) auto 0;
  padding: 0 calc(40 / 750 * 100%);
}
.ten-goals ul li {
  width: calc( (100% - ((30 / 750 * 100%) * 2)) / 3 );
  border: solid 1px #efefef;
  margin: 0 0 calc(30 / 750 * 100%);
}
.sdgs-images {
  flex-direction: column;
  padding: 0 calc(40 / 750 * 100%);
}
.sdgs-images figure { width: 100%; }
.sdgs-images figure:first-of-type { margin: 0 auto calc(80 / 750 * 100%); }
.sdgs-images figure:nth-of-type(2n) { margin: 0 auto calc(80 / 750 * 100%); }
.sdgs-images figure:nth-of-type(3n) { margin: 0 auto calc(80 / 750 * 100%); }
.sdgs-images figure:nth-of-type(4n) { margin: 0 auto calc(80 / 750 * 100%); }
.sdgs-images figure:nth-of-type(5n) { margin: 0 auto; }
/*
.sdgs-images figure:nth-of-type(5n) { margin: 0 54px 0 0; }
*/
.sdgs-images figure figcaption {
  font-size: calc(24 / 750 * 100vw * 1.15);
  line-height: calc(40 / 24);
}