@charset "utf-8";

.message-page {
  color: #111;
}

.message-page .global-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.message-page .header-entry img.icon-entry {
  filter: brightness(0) invert(1);
}

.message-shell {
  padding: min(8vw, 120px) min(5.333vw, 80px) min(10.667vw, 160px);
}

.message-content {
  width: min(100%, 1050px);
  margin-inline: auto;
}

.message-block {
  text-align: center;
}

.message-block + .message-block {
  margin-top: min(9.333vw, 140px);
  padding-top: min(8vw, 120px);
  border-top: 1px solid var(--color-ink);
}

.message-copy {
  margin-top: min(3.333vw, 50px);
  font-size: inherit;
  line-height: 2.35;
}

.message-goal h3 {
  display: table;
  margin-inline: auto;
  background: linear-gradient(transparent 62%, var(--color-lime) 62%);
  color: var(--color-ink);
  font-size: min(1.467vw, 2.2rem);
  font-weight: 800;
  line-height: 1.6;
}

.message-goal h3 + p {
  margin-top: min(0.667vw, 10px);
}

.message-goal + .message-goal {
  margin-top: min(2.667vw, 40px);
}

.message-hanamaru {
  width: min(58vw, 870px);
  margin: min(5.333vw, 80px) auto 0;
}

.message-hr__photo {
  position: relative;
  isolation: isolate;
  width: min(57.333vw, 860px);
  margin: min(5.333vw, 80px) auto 0;
}

.message-hr__photo::before,
.message-hr__photo::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.message-hr__photo::before {
  top: calc(-1 * min(3.333vw, 50px));
  left: calc(-1 * min(4vw, 60px));
  width: min(13.333vw, 200px);
  aspect-ratio: 253.77 / 198.95;
  background: url("../img/common/illust-circle02.svg") center / contain no-repeat;
}

.message-hr__photo::after {
  top: 52%;
  right: calc(-1 * min(6vw, 90px));
  width: min(20vw, 300px);
  aspect-ratio: 380.04 / 276.61;
  background: url("../img/common/illust-circle01.svg") center / contain no-repeat;
  transform: translateY(-50%);
}

.message-hr__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
}

.message-hr__photo .message-hr__beans {
  position: absolute;
  top: -8%;
  right: -7%;
  z-index: 0;
  width: 72%;
  max-width: none;
  pointer-events: none;
}

.message-mission__eyebrow {
  display: block;
  margin-bottom: min(0.667vw, 10px);
  color: #747d7a;
  font: 700 min(0.933vw, 1.4rem)/1 Arial, sans-serif;
  letter-spacing: 0.08em;
}

.message-mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: min(5.333vw, 80px);
  margin-top: min(5.333vw, 80px);
  text-align: left;
}

.message-mission__label {
  display: table;
  padding: min(0.333vw, 5px) min(0.8vw, 12px);
  color: var(--color-white);
  background: var(--color-ink);
  font-size: clamp(1.8rem, 1.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.5;
}

.message-mission__label + .message-mission__label {
  margin-top: min(0.267vw, 4px);
}

.message-mission__grid .message-copy {
  margin-top: min(2.667vw, 40px);
}

.message-mission__visual {
  width: 100%;
}

.message-related-link {
  margin: min(6.667vw, 100px) auto 0;
}

@media (max-width: 1200px) {
  .message-shell {
    padding-inline: 6.667%;
  }
}

@media (max-width: 768px) {
  .message-shell {
    padding: 10.256vw 6.154vw 20.513vw;
  }

  .message-block + .message-block {
    margin-top: 20.513vw;
    padding-top: 17.949vw;
  }

  .message-copy {
    margin-top: 8.205vw;
    font-size: 3.59vw;
    line-height: 2;
    text-align: left;
  }

  .message-goal h3 {
    margin-inline: 0;
    font-size: 4.2vw;
    text-align: left;
	  letter-spacing: -0.05em
  }

  .message-goal h3 + p {
    margin-top: 2.564vw;
  }

  .message-goal + .message-goal {
    margin-top: 8.205vw;
  }

  .message-hanamaru {
    width: 100%;
    margin-top: 10.256vw;
  }

  .message-hr__photo {
    width: 92%;
    margin-top: 12.821vw;
  }

  .message-hr__photo::before,
  .message-hr__photo::after {
    width: 30.769vw;
  }

  .message-hr__photo::after {
    right: -10.256vw;
  }

  .message-hr__photo .message-hr__beans {
    top: -5%;
    right: -10%;
    width: 82%;
  }

  .message-mission__eyebrow {
    margin-bottom: 2.051vw;
    font-size: 2.821vw;
  }

  .message-mission__grid {
    grid-template-columns: 1fr;
    gap: 10.256vw;
    margin-top: 10.256vw;
  }

  .message-mission__label {
    padding: 1.026vw 2.564vw;
    font-size: 4.333vw;
  }

  .message-mission__label + .message-mission__label {
    margin-top: 1.026vw;
  }

  .message-mission__grid .message-copy {
    margin-top: 7.692vw;
  }

  .message-mission__visual {
    width: 90%;
    margin-inline: auto;
  }

  .message-related-link {
    margin-top: 15.385vw;
  }
}