/* hero */
#hero {
  padding: 0;
  overflow: hidden;
}
#hero .c-inner {
  width: 100%;
  max-width: 1120px;
}
#hero .p-content {
  position: relative;
  width: 100%;
  height: 100%;
}
#hero .p-content::before {
  display: block;
  padding-top: 2200px;
  content: '';
}
#hero .p-content-title {
  position: absolute;
  left: 136px;
  top: 1000px;
  z-index: 10;
}
#hero .p-content-title h1 img {
  width: 280px;
}
#hero .p-content-title p {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
#hero .p-content-catch {
  position: absolute;
  right: 24px;
  top: 176px;
  width: max-content;
  z-index: 10;
  writing-mode: vertical-rl;
}
#hero .p-content-catch p {
  font-size: 48px;
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
  letter-spacing: .15em;
  /* writing-mode: vertical-rl; */
}
#hero .p-content-lead {
  position: absolute;
  right: 8px;
  top: 1136px;
  width: max-content;
}
#hero .p-content-lead p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1px;
}
#hero .p-content-button {
  position: absolute;
  right: 120px;
  top: 1384px;
}
#hero .p-content-button [class*="c-btn"] {
  font-size: 18px;
}
#hero .p-content-notes {
  position: absolute;
  right: 24px;
  bottom: 72px;
  z-index: 1;
}
#hero .p-content-notes p {
  font-size: var(--font-size-xs);
}
#hero [class*="p-content-image"] {
  position: absolute;
  z-index: 1;
}
#hero [class*="p-content-image"] img {
  max-width: none;
}
#hero .p-content-image-01 {
  right: -88px;
  top: -160px;
}
#hero .p-content-image-01 img {
  width: 1048px;
}
#hero .p-content-image-02 {
  left: -84px;
  top: 1272px;
}
#hero .p-content-image-02 img {
  width: 288px;
}
#hero .p-content-image-03 {
  left: 286px;
  top: 1312px;
}
#hero .p-content-image-03 img {
  width: 336px;
}
#hero .p-content-image-04 {
  left: 12px;
  top: 1660px;
}
#hero .p-content-image-04 img {
  width: 312px;
}
#hero .p-content-image-05 {
  left: 432px;
  top: 1752px;
}
#hero .p-content-image-05 img {
  width: 294px;
}
#hero .p-content-image-06 {
  right: -128px;
  top: 1544px;
}
#hero .p-content-image-06 img {
  width: 408px;
}
#hero .p-content-shape-01 {
  position: absolute;
  left: -672px;
  top: 164px;
  z-index: 0;
}
#hero .p-content-shape-01 img {
  width: 1288px;
}
@media screen and (max-width: 1120px) {
  #hero .p-content::before {
    padding-top: 179.5%;
  }
  #hero .p-content-title {
    left: 18%;
    top: 79.5vw;
  }
  #hero .p-content-title h1 img {
    width: calc(280 / 1280 * 100vw);
  }
  #hero .p-content-title p {
    font-size: calc(14 * var(--base-vw-coef));
  }
  #hero .p-content-catch {
    right: 6%;
    top: 14.00vw;
  }
  #hero .p-content-catch p {
    font-size: calc(44 * var(--base-vw-coef));
  }
  #hero .p-content-lead {
    right: 1.75%;
    top: 90.75vw;
  }
  #hero .p-content-lead p {
    font-size: calc(16 * var(--base-vw-coef));
  }
  #hero .p-content-button {
    right: 12.75%;
    top: 111.25vw;
  }
  #hero .p-content-button [class*="c-btn"] {
    font-size: calc(18 * var(--base-vw-coef));
  }
  #hero .p-content-notes {
    right: 2%;
    bottom: 7vw;
  }
  #hero .p-content-image-01 {
    right: -1%;
    top: -12.5vw;
  }
  #hero .p-content-image-01 img {
    width: calc(1048 / 1280 * 100vw);
  }
  #hero .p-content-image-02 {
    left: -1.5%;
    top: 102.5vw;
  }
  #hero .p-content-image-02 img {
    width: calc(288 / 1280 * 100vw);
  }
  #hero .p-content-image-03 {
    left: 28%;
    top: 107.75vw;
  }
  #hero .p-content-image-03 img {
    width: calc(336 / 1280 * 100vw);
  }
  #hero .p-content-image-04 {
    left: 7%;
    top: 133vw;
  }
  #hero .p-content-image-04 img {
    width: calc(312 / 1280 * 100vw);
  }
  #hero .p-content-image-05 {
    left: 41.5%;
    top: 142.75vw;
  }
  #hero .p-content-image-05 img {
    width: calc(294 / 1280 * 100vw);
  }
  #hero .p-content-image-06 {
    right: -4.5%;
    top: 126.5vw;
  }
  #hero .p-content-image-06 img {
    width: calc(408 / 1280 * 100vw);
  }
  #hero .p-content-shape-01 {
    left: -44%;
    top: 11.5vw;
  }
  #hero .p-content-shape-01 img {
    width: calc(1288 / 1280 * 100vw);
  }
}
@media screen and (max-width: 960px) {
  #hero .p-content::before {
    padding-top: 340%;
  }
  #hero .p-content-title {
    left: 4.5%;
    top: 107vw;
  }
  #hero .p-content-title h1 img {
    width: calc(260 / 750 * 100vw);
  }
  #hero .p-content-title p {
    font-size: calc(15 * var(--base-vw-coef));
  }
  #hero .p-content-catch {
    right: 2%;
    top: 19.5vw;
  }
  #hero .p-content-catch p {
    font-size: calc(40 * var(--base-vw-coef));
  }
  #hero .p-content-lead {
    right: auto;
    left: 50%;
    top: 139.5vw;
    translate: -50% 0;
  }
  #hero .p-content-lead p {
    font-size: calc(15 * var(--base-vw-coef));
  }
  #hero .p-content-button {
    right: auto;
    left: 50%;
    top: 163vw;
    width: 100%;
    translate: -50% 0;
  }
  #hero .p-content-button [class*="c-btn"] {
    font-size: calc(16 * var(--base-vw-coef));
  }
  #hero .p-content-image-01 {
    right: auto;
    left: 0;
    top: -47.75vw;
  }
  #hero .p-content-image-01 img {
    width: calc(969 / 750 * 100vw);
  }
  #hero .p-content-image-02 {
    left: auto;
    right: 3%;
    top: 185.25vw;
  }
  #hero .p-content-image-02 img {
    width: calc(289 / 750 * 100vw);
  }
  #hero .p-content-image-03 {
    left: 0;
    top: 173.5vw;
  }
  #hero .p-content-image-03 img {
    width: calc(334 / 750 * 100vw);
  }
  #hero .p-content-image-04 {
    left: 7%;
    top: 282.25vw;
  }
  #hero .p-content-image-04 img {
    width: calc(309 / 750 * 100vw);
  }
  #hero .p-content-image-05 {
    left: 21.5%;
    top: 222.75vw;
  }
  #hero .p-content-image-05 img {
    width: calc(347 / 750 * 100vw);
  }
  #hero .p-content-image-06 {
    right: -12.5%;
    top: 261.75vw;
  }
  #hero .p-content-image-06 img {
    width: calc(405 / 750 * 100vw);
  }
  #hero .p-content-shape-01 {
    left: -72%;
    top: 6.75vw;
  }
  #hero .p-content-shape-01 img {
    width: calc(1058 / 750* 100vw);
  }
}
@media screen and (max-width: 800px) {
  #hero .p-content-button {
    top: 166.5vw;
  }
}
@media screen and (max-width: 640px) {
  #hero .p-content::before {
    padding-top: 356%;
  }
  #hero .p-content-title {
    left: 3%;
  }
  #hero .p-content-title p {
    font-size: calc(10* var(--base-vw-coef));
  }
  #hero .p-content-catch p {
    font-size: calc(32* var(--base-vw-coef));
  }
  #hero .p-content-lead {
    left: 54%;
    top: 145.5vw;
  }
  #hero .p-content-lead p {
    font-size: calc(13* var(--base-vw-coef));
  }
  #hero .p-content-lead p > .c-flex {
    flex-direction: column;
  }
  #hero .p-content-button {
    left: 51%;
    top: 182.5vw;
  }
  #hero .p-content-button [class*="c-btn"] {
    font-size: calc(14* var(--base-vw-coef));
  }
  #hero .p-content-image-02 {
    top: 201.25vw;
  }
  #hero .p-content-image-03 {
    top: 189.5vw;
  }
  #hero .p-content-image-04 {
    top: 298.25vw;
  }
  #hero .p-content-image-05 {
    top: 237.75vw;
  }
  #hero .p-content-image-06 {
    top: 276.75vw;
  }
}
@media screen and (max-width: 480px) {
  #hero .p-content::before {
    padding-top: 390%;
  }
  #hero .p-content-button {
    top: 200vw;
  }
  #hero .p-content-image-02 {
    top: 233.25vw;
  }
  #hero .p-content-image-03 {
    top: 217.5vw;
  }
  #hero .p-content-image-04 {
    top: 327.25vw;
  }
  #hero .p-content-image-05 {
    top: 267.75vw;
  }
  #hero .p-content-image-06 {
    top: 309.75vw;
  }
}

/* ----- common ----- */
#environment,
#commitment,
#flow {
  background-color: transparent;
  background-size: 1120px auto;
  background-position: top center;
  background-repeat: no-repeat;
}
#environment {
  background-image: url(2651da9e54-environment-bg_pc.png);
}
#commitment {
  margin-top: -32px;
  background-image: url(f634dcdff2-commitment-bg_pc.png);
}
#flow {
  margin-top: -32px;
  background-image: url(8741c5a3cd-flow-bg_pc.png);
}
#environment .c-heading,
#commitment .c-heading,
#flow .c-heading {
  font-size: 32px;
  font-weight: 700;
}
/* ----- environment ----- */
#environment .p-lead {
  padding: 0 calc(var(--base) * 2) calc(var(--base));
  border-bottom: 1px solid;
}
#environment .p-lead p {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.8;
}
#environment .p-lead p strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}
#environment .p-description p {
  font-size: 18px;
}
#environment .p-image img {
  width: 680px;
}
#environment .p-content > .c-flex {
  gap: calc(var(--base) * 4);
}
#environment .p-content > .c-flex > * {
  width: 424px;
  padding: calc(var(--base) * 2);
}
#environment .p-content > .c-flex > *:nth-child(1) {
  background-color: #e2752e;
}
#environment .p-content > .c-flex > *:nth-child(2) {
  background-color: #6fbdbe;
}
#environment .p-content-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding-bottom: calc(var(--base) * 1);
  border-bottom: 1px solid #fff;
}
#environment .p-content-list li {
  font-size: 15px;
  color: #fff;
}
#environment .p-content-list li::marker {
  content: '●';
}
#environment .p-sublead p {
  font-size: 18px;
}
/* ----- commitment ----- */
#commitment .p-content {
  width: 1024px;
  max-width: 100%;
  margin-inline: auto;
}
#commitment .p-content > .c-flex > *:nth-child(1) {
  width: 624px;
  padding-right: calc(var(--base)* 4);
}
#commitment .p-content > .c-flex > *:nth-child(2) {
  flex: 1;
}
#commitment .p-content-title h3 {
  font-size: 22px;
  font-weight: 500;
  padding-bottom: calc(var(--base) * 1);
  border-bottom: 1px solid;
}
#commitment .p-content-text p {
  font-size: 16px;
  letter-spacing: normal;
}
#commitment .p-content img {
  width: 100%;
}
#commitment .p-photo {
  width: 1024px;
  max-width: 100%;
  margin-inline: auto;
}
#commitment .p-photo > .c-flex {
  gap: calc((var(--base) * 2));
}
#commitment .p-photo > .c-flex > * {
  width: calc((100% - ((var(--base) * 2) * 2)) / 3);
}
#commitment .p-photo img {
  width: 100%;
}
/* ----- flow ----- */
#flow .p-lead p {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.8;
}
#flow .p-flow {
  width: 1024px;
  max-width: 100%;
  margin-inline: auto;
}
#flow .p-flow > .c-flex {
  gap: calc(var(--base) * 6) calc(var(--base) * 5);
}
#flow .p-flow > .c-flex > * {
  width: calc((100% - ((var(--base) * 5) * 2)) / 3);
}
#flow .p-flow-content {
  padding-top: calc(var(--base) * 1.5);
  padding-left: calc(var(--base) * 1.5);
  background-color: #fff;
}
#flow .p-flow > .c-flex > *::before {
  position: absolute;
  right: -40px;
  top: 0;
  border-top: 72px solid transparent;
  border-bottom: 72px solid transparent;
  border-left: 40px solid #6fbdbe;
  content: '';
}
#flow .p-flow > .c-flex > *:nth-child(5)::before {
  border-left-color: #e8c941;
}
#flow .p-flow > .c-flex > *:last-child::before {
  display: none;
}
#flow .p-flow-content-title {
  border-bottom: 1px solid #6fbdbe;
}
#flow .p-flow > .c-flex > *:nth-child(5) .p-flow-content-title,
#flow .p-flow > .c-flex > *:nth-child(6) .p-flow-content-title {
  border-bottom-color: #e8c941;
}
#flow .p-flow-content-title > .c-flex {
  gap: calc(var(--base) * 2);
}
#flow .p-flow-content-title > .c-flex > *:nth-child(1) {
  width: 48px;
  height: 52px;
  background-color: #6fbdbe;
}
#flow .p-flow > .c-flex > *:nth-child(5) .p-flow-content-title > .c-flex > *:nth-child(1),
#flow .p-flow > .c-flex > *:nth-child(6) .p-flow-content-title > .c-flex > *:nth-child(1) {
  background-color: #e8c941;
}
#flow .p-flow-content-title p {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  translate: 0 -50%;
}
#flow .p-flow-content-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #6fbdbe;
}
#flow .p-flow > .c-flex > *:nth-child(5) .p-flow-content-title h3,
#flow .p-flow > .c-flex > *:nth-child(6) .p-flow-content-title h3 {
  color: #e8c941;
}
#flow .p-flow-content-text {
  position: relative;
  width: 100%;
  height: 80px;
}
#flow .p-flow-content-text p {
  position: absolute;
  left: var(--base);
  top: 50%;
  font-size: 16px;
  font-weight: 500;
  translate: 0 -50%;
}
#flow .p-flow-button .c-btn {
  width: 100%;
  font-size: 22px;
  font-weight: 500;
  color: #6fbdbe;
  padding: .1em 0;
  background-color: #fff;
}
#flow .p-flow-button .c-btn::after {
  display: inline-block;
  position: relative;
  top: .1em;
  font-family: 'Material Symbols Outlined';
  font-size: inherit;
  font-weight: bold;
  line-height: 1;
  transition: all .2s ease;
  content: '\e5e1';
}
@media screen and (max-width: 1120px) {
  /* ----- common ----- */
  #environment,
  #commitment,
  #flow {
    background-size: cover;
  }
  #commitment,
  #flow {
    margin-top: -5%;
  }
  #environment .c-heading,
  #commitment .c-heading,
  #flow .c-heading {
    font-size: calc(32 * var(--base-vw-coef));
  }
  /* ----- environment ----- */
  #environment .p-lead p {
    font-size: calc(22 * var(--base-vw-coef));
  }
  #environment .p-lead p strong {
    font-size: calc(24 * var(--base-vw-coef));
  }
  #environment .p-description p {
    font-size: calc(18 * var(--base-vw-coef));
  }
  #environment .p-image img {
    width: calc(680 / 1280 * 100vw);
  }
  #environment .p-content > .c-flex > * {
    width: 44%;
  }
  #environment .p-content-title h3 {
    font-size: calc(20 * var(--base-vw-coef));
  }
  #environment .p-content-list li {
    font-size: calc(15 * var(--base-vw-coef));
  }
  #environment .p-sublead p {
    font-size: calc(18 * var(--base-vw-coef));
  }
  /* ----- commitment ----- */
  #commitment .p-content-title h3 {
    font-size: calc(22 * var(--base-vw-coef));
  }
  #commitment .p-content-text p {
    font-size: calc(16 * var(--base-vw-coef));
  }
  #commitment .p-content > .c-flex > *:nth-child(1) {
    width: 62%;
    padding-right: calc(var(--base)* 1);
  }
  /* ----- flow ----- */
  #flow .p-lead p {
    font-size: calc(22 * var(--base-vw-coef));
  }
  #flow .p-flow > .c-flex {
    gap: calc(var(--base)* 6) calc(var(--base)* 3);
  }
  #flow .p-flow > .c-flex > * {
    width: calc((100% - ((var(--base) * 3) * 2)) / 3);
  }
  #flow .p-flow > .c-flex > *::before {
    right: calc((var(--base) * -3) + 1px);
    border-top: calc((144 * var(--base-vw-coef)) / 2) solid transparent;
    border-bottom: calc((144 * var(--base-vw-coef)) / 2) solid transparent;
    border-left: calc(var(--base) * 3) solid #6fbdbe;
  }
  #flow .p-flow-content-title > .c-flex > *:nth-child(1) {
    width: calc(48 * var(--base-vw-coef));
    height: calc(52 * var(--base-vw-coef));
  }
  #flow .p-flow-content-title h3 {
    font-size: calc(20 * var(--base-vw-coef));
  }
  #flow .p-flow-content-title p {
    font-size: calc(32 * var(--base-vw-coef));
  }
  #flow .p-flow-content-text {
    height: calc(80 * var(--base-vw-coef));
  }
  #flow .p-flow-content-text p {
    font-size: calc(16 * var(--base-vw-coef));
  }
  #flow .p-flow-button .c-btn {
    font-size: calc(22 * var(--base-vw-coef));
  }
}
@media screen and (max-width: 960px) {
  /* ----- common ----- */
  #environment {
    padding-bottom: calc(var(--wrap-padding)* 2);
    background-image: url(7ecd5c82ed-environment-bg_sp.png);
  }
  #commitment {
    padding-bottom: calc(var(--wrap-padding)* 2);
    background-image: url(caaf0c5744-commitment-bg_sp.png);
  }
  #flow {
    padding-bottom: calc(var(--wrap-padding)* 2);
    background-image: url(7a6352be60-flow-bg_sp.png);
  }
  #commitment,
  #flow {
    margin-top: -10%;
  }
  #environment .c-heading,
  #commitment .c-heading,
  #flow .c-heading {
    font-size: calc(28* var(--base-vw-coef));
  }
  /* ----- environment ----- */
  #environment .p-lead > p > *:first-child {
    flex-direction: column;
  }
  #environment .p-lead p {
    font-size: calc(20* var(--base-vw-coef));
  }
  #environment .p-lead p strong {
    font-size: calc(22* var(--base-vw-coef));
    line-height: 1.55;
  }
  #environment .p-description .c-flex {
    flex-direction: column;
    align-items: center;
  }
  #environment .p-description p {
    font-size: calc(16* var(--base-vw-coef));
  }
  #environment .p-image img {
    width: calc(708 / 750 * 100vw);
  }
  #environment .p-content > .c-flex {
    gap: calc(var(--base) * 2) 0;
  }
  #environment .p-content > .c-flex > * {
    width: 70%;
  }
  #environment .p-sublead {
    width: 70%;
  }
  #environment .p-sublead p {
    font-size: calc(16* var(--base-vw-coef));
  }
  /* ----- commitment ----- */
  #commitment .p-content > .c-flex {
    gap: calc(var(--base)* 4) 0;
  }
  #commitment .p-content > .c-flex > *:nth-child(1) {
    width: 70%;
    padding-right: 0;
  }
  #commitment .p-content > .c-flex > *:nth-child(2) {
    flex: none;
    width: 70%;
  }
  #commitment .p-content-title h3 {
    font-size: calc(20* var(--base-vw-coef));
    text-align: center;
  }
  #commitment .p-content-text p {
    font-size: calc(15* var(--base-vw-coef));
  }
  #commitment .p-photo > .c-flex {
    gap: calc((var(--base)* 2)) 0;
  }
  #commitment .p-photo > .c-flex > * {
    width: calc(622 / 750 * 100vw);
  }
  /* ----- flow ----- */
  #flow .p-lead .c-flex {
    flex-direction: column;
  }
  #flow .p-lead p {
    font-size: calc(20* var(--base-vw-coef));
  }
  #flow .p-flow > .c-flex {
    gap: calc(var(--base)* 8) 0;
  }
  #flow .p-flow > .c-flex > * {
    width: 65%;
  }
  #flow .p-flow > .c-flex > *::before {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc((var(--base)* -5) + 1px);
    translate: -50% 0;
    border-left: calc((144* var(--base-vw-coef)) / 2) solid transparent;
    border-right: calc((144* var(--base-vw-coef)) / 2) solid transparent;
    border-top: calc(var(--base)* 5) solid #6fbdbe;
    border-bottom: 0;
    z-index: -1;
  }
  #flow .p-flow > .c-flex > *:nth-child(5)::before {
    border-top-color: #e8c941;
    border-left-color: transparent;
  }
  #flow .p-flow-button .c-btn {
    padding: .25em 0;
  }
}
@media screen and (max-width: 800px) {
}
@media screen and (max-width: 640px) {
  /* ----- common ----- */
  #commitment,
  #flow {
    margin-top: -10%;
  }
  #environment .c-heading,
  #commitment .c-heading,
  #flow .c-heading {
    font-size: calc(24* var(--base-vw-coef));
  }
  /* ----- environment ----- */
  #environment .p-lead p {
    font-size: calc(18* var(--base-vw-coef));
  }
  #environment .p-lead p strong {
    font-size: calc(20* var(--base-vw-coef));
  }
  #environment .p-description p {
    font-size: calc(14* var(--base-vw-coef));
  }
  #environment .p-content > .c-flex > * {
    width: 95%;
  }
  #environment .p-content-title h3 {
    font-size: calc(18* var(--base-vw-coef));
  }
  #environment .p-content-list li {
    font-size: calc(13* var(--base-vw-coef));
  }
  #environment .p-sublead {
    width: 100%;
  }
  #environment .p-sublead p {
    font-size: calc(14* var(--base-vw-coef));
  }
  /* ----- commitment ----- */
  #commitment .p-content > .c-flex > *:nth-child(1) {
    width: 95%;
  }
  #commitment .p-content > .c-flex > *:nth-child(2) {
    width: 95%;
  }
  #commitment .p-content-title h3 {
    font-size: calc(18* var(--base-vw-coef));
  }
  #commitment .p-content-text p {
    font-size: calc(13* var(--base-vw-coef));
  }
  #commitment .p-photo > .c-flex {
    gap: calc((var(--base)* 1)) 0;
  }
  /* ----- flow ----- */
  #flow .p-lead p {
    font-size: calc(18* var(--base-vw-coef));
  }
  #flow .p-flow > .c-flex > * {
    width: 90%;
  }
  #flow .p-flow-content-title > .c-flex > *:nth-child(1) {
    width: calc(44 * var(--base-vw-coef));
    height: calc(48* var(--base-vw-coef));
  }
  #flow .p-flow-content-title h3 {
    font-size: calc(18* var(--base-vw-coef));
  }
  #flow .p-flow-content-title p {
    font-size: calc(28* var(--base-vw-coef));
  }
  #flow .p-flow-content-text {
    height: calc(72* var(--base-vw-coef));
  }
  #flow .p-flow-content-text p {
    font-size: calc(15* var(--base-vw-coef));
  }
  #flow .p-flow-button .c-btn {
    font-size: calc(20* var(--base-vw-coef));
  }
}
@media screen and (max-width: 480px) {
}