@charset "UTF-8";
.p-psc-profession__inner {
  --container-width: 112rem;
}

.p-psc-mindset__box {
  display: grid;
  gap: 0;
  padding: 3rem 1.5rem;
  counter-reset: counter;
  background-color: #eef0f7;
  border: 1px solid rgba(9, 6, 76, 0.5);
}
@media (min-width: 768px) {
  .p-psc-mindset__box {
    gap: clamp(4rem, 5vw, 8rem);
    padding: clamp(3.5rem, 4.375vw, 7rem) clamp(6rem, 7.5vw, 12rem);
  }
}

.p-psc-mindset__content {
  display: flex;
  flex-direction: column;
  gap: 0 clamp(3rem, 3.75vw, 6rem);
}
@media (min-width: 768px) {
  .p-psc-mindset__content:nth-of-type(odd) {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .p-psc-mindset__content:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}

.p-psc-mindset__list {
  flex-grow: 1;
}

.p-psc-mindset__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 0.9375vw, 1.5rem) clamp(1rem, 1.25vw, 2rem);
  padding-block: clamp(1.5rem, 1.875vw, 3rem);
  border-bottom: solid 1px rgba(9, 6, 76, 0.5);
}
.p-psc-mindset__item:where(.p-psc-mindset__content *:nth-of-type(odd)) {
  --title-color: #0d396b;
}
.p-psc-mindset__item:where(.p-psc-mindset__content *:nth-of-type(even)) {
  --title-color: #8e4e90;
}
.p-psc-mindset__item::before {
  grid-area: 1/1/3/2;
  font-family: var(--font-lora);
  font-size: clamp(1.5rem, 1.875vw, 3rem);
  font-weight: 400;
  color: var(--title-color);
  letter-spacing: 0.05em;
  content: "" counter(counter, decimal-leading-zero);
  counter-increment: counter 1;
}

.p-psc-mindset__item__title {
  grid-area: 1/2/2/3;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.6875vw, 2.7rem);
  font-weight: 500;
  color: var(--title-color);
  letter-spacing: 0.08em;
}

.p-psc-mindset__item__text {
  display: flex;
  grid-area: 2/2/3/3;
  font-size: clamp(1.4rem, 1.0625vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: 0.12em;
}
.p-psc-mindset__item__text::before {
  content: "（例）";
}

.p-psc-mindset__content__image {
  display: flex;
  flex-basis: clamp(20rem, 25vw, 40rem);
  flex-shrink: 0;
  align-items: center;
}
.p-psc-mindset__content__image:where(.p-psc-mindset__content:nth-of-type(odd) *) {
  justify-content: flex-end;
}
.p-psc-mindset__content__image:where(.p-psc-mindset__content:nth-of-type(even) *) {
  justify-content: flex-start;
}
.p-psc-mindset__content__image img {
  max-width: 400px;
  margin: auto;
}
@media (min-width: 768px) {
  .p-psc-mindset__content__image img {
    width: auto;
  }
}

.p-psc-thoughts__list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 4.375vw, 7rem);
  margin-bottom: clamp(4rem, 5.625vw, 9rem);
}

.p-psc-thoughts__media {
  align-items: start;
}

@media (min-width: 768px) {
  .p-psc-thoughts__media__body:where(.p-psc-thoughts__media:nth-of-type(even) *) {
    order: 1;
  }
}
@media (min-width: 768px) {
  .p-psc-thoughts__media__body:where(.p-psc-thoughts__media:nth-of-type(odd) *) {
    order: 2;
  }
}

.p-psc-thoughts__media__title {
  margin-bottom: clamp(1.5rem, 1.875vw, 3rem);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.6875vw, 2.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-psc-thoughts__media__image:where(.p-psc-thoughts__media:nth-of-type(even) *) {
  order: 2;
}
.p-psc-thoughts__media__image:where(.p-psc-thoughts__media:nth-of-type(odd) *) {
  order: 1;
}

.p-psc-thoughts__button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 10rem;
  padding: 1rem 3rem;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.375vw, 2.2rem);
  font-weight: 500;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.08em;
  background-color: #8e4e90;
  border: 1px solid rgba(9, 6, 76, 0.5);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  transition: opacity var(--transition-duration) var(--transition-timing-function);
}
@media (min-width: 768px) {
  .p-psc-thoughts__button {
    min-width: 40rem;
  }
}
.p-psc-thoughts__button::after {
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 0.6rem;
  height: auto;
  aspect-ratio: 6/10;
  content: "";
  background: url(../images/common/button_arrow_white.svg) no-repeat center/contain;
  transition: translate var(--transition-duration) var(--transition-timing-function);
  transform: translateY(-50%);
}
.p-psc-thoughts__button:focus-visible {
  opacity: 0.8;
}
@media (any-hover: hover) {
  .p-psc-thoughts__button:hover {
    opacity: 0.8;
  }
}
.p-psc-thoughts__button > span {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em;
}

/*# sourceMappingURL=psc.css.map */