@charset "UTF-8";

/* ===== 強み（p-about-strengths） ===== */
.p-about-strengths {
  padding-top: 5rem;
}

.p-about-strengths__content {
  display: grid;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 9fr);
  align-items: start;
}

.p-about-strengths__content > :nth-child(1) {
  grid-column: 1;
}

.p-about-strengths__content > :nth-child(2) {
  grid-column: 3;
}

.p-about-strengths__head {
  position: sticky;
  top: 7.5rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.625rem;
  padding-top: 1.5625rem;
  writing-mode: vertical-rl;
  color: var(--color-accent);
  font-family: var(--font-mincho);
  font-feature-settings: "palt" 1, "liga" 1;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.p-about-strengths__head span {
  display: block;
}

.p-about-strengths__head span:nth-child(2) {
  padding-top: 2.6875rem;
}

/* ===== クロージング（p-about-closing） ===== */
.p-about-closing {
  padding-top: 5rem;
}

.p-about-closing__inner {
  position: relative;
  border-top: 1px solid var(--color-rule);
  padding-top: 2rem;
  padding-bottom: 11.4375rem;
  text-align: center;
}

.p-about-closing__inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.0625rem;
  height: 6.4375rem;
  background-color: var(--color-rule);
}

.p-about-closing__eng {
  margin-bottom: 4rem;
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-align: left;
}

.p-about-closing__head {
  margin-bottom: 3.5rem;
}

/* ===== レスポンシブ（width < 59.375em） ===== */
@media screen and (width < 59.375em) {
  .p-about-strengths__content {
    grid-template-columns:
      minmax(0, 3fr)
      minmax(0, 1fr)
      minmax(0, 9fr);
  }

  .p-about-strengths__head {
    font-size: 1.625rem;
    gap: 0.75rem;
  }

  .p-about-strengths__head span:nth-child(2) {
    padding-top: 1.625rem;
  }
}

/* ===== レスポンシブ（width < 46.875em） ===== */
@media screen and (width < 46.875em) {
  .p-about-closing__inner {
    padding-bottom: 8.75rem;
  }

  .p-about-closing__text {
    text-align: left;
  }
}