.p-person + .p-page-links {
  margin-block-start: 0;
}

.c-section-heading {
  display: block grid;
  gap: calc(12 * var(--rem));
  justify-items: center;
  margin-block-end: calc(40 * var(--rem));
  margin-inline: auto;
  @media (width >= 768px) {
    margin-block-end: calc(80 * var(--rem));
    gap: calc(20 * var(--rem));
  }
  span:lang(en) {
    --clamp-min: 18;
    --clamp-max: 24;
    font-family: var(--font-ins);
    font-weight: 400;
    line-height: 1;
  }
  span:lang(ja) {
    --clamp-min: 32;
    --clamp-max: 48;
    font-family: var(--font-zen);
    line-height: 1;
    scale: 0.85 1;
  }
}

.p-media {
  align-items: start;
  display: block grid;
  row-gap: var(--column-gap, calc(48 * var(--rem)));
  @media (width >= 768px) {
    column-gap: var(--column-gap, calc(20 * var(--rem)));
    grid-template-columns: var(--media-img, 50%) 1fr;
    grid-template-rows: 1fr;
  }
}

.p-media.p-media--reverse {
  @media (width >= 768px) {
    direction: rtl;
  }
  & * {
    direction: ltr;
  }
}

.p-media__img-wrapper {
  inline-size: 100%;
}

.p-media__img {
  display: block;
  inline-size: 100%;
}

/* profile */
:where(.p-profile) {
  padding-block-start: calc(32 * var(--rem));
  @media (width >= 768px) {
    padding-block-start: calc(80 * var(--rem));
  }
  .p-media {
    --row-gap: calc(30 * var(--rem));
    --media-img: calc(569 / (1180 - 40) * 100%);
    @media (width >= 768px) {
      --column-gap: calc(80 / (1180 - 40) * 100%);
      align-items: end;
      padding-inline-start: calc(40 / 1180 * 100%);
    }
  }

  .p-media__body {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: calc(28 * var(--rem));
    @media (width >= 768px) {
      grid-template-columns: 1fr;
      padding-block-end: calc(32 * var(--rem));
    }
  }

  .p-media__title {
    --clamp-min: 24;
    --clamp-max: 32;
    line-height: 2.6;
    line-height: 1.6;
    margin-block-start: var(--leading-trim);
    @media (width >= 768px) {
      margin-block-start: calc(40 * var(--rem));
    }
  }
}

:where(.p-media__body-inner) {
  margin-block-start: calc(24 * var(--rem));
  @media (width >= 768px) {
    margin-block-start: calc(72 * var(--rem));
  }
  p {
    --clamp-min: 13;
    --clamp-max: 17;
    line-height: 1.6;
  }
}

.p-media__name {
  --clamp-min: 18;
  --clamp-max: 24;
  line-height: 2;
}

.p-media__num {
  font-family: var(--font-ins);
  font-size: calc(24 * var(--rem));
  font-weight: 400;
  line-height: 1;
  grid-column: 1/2;
  grid-row: 1/4;
  line-height: 1;
  @media (width >= 768px) {
    grid-column: 1/2;
    grid-row: 1/2;
  }
}

:where(.p-media__frame) {
  align-content: center;
  align-items: stretch;
  display: block grid;
  grid-template-columns: max-content 1fr;
  line-height: 1.5;
  margin-block-start: calc(16 * var(--rem));
  @media (width >= 768px) {
    margin-block-start: calc(48 * var(--rem));
  }

  .label {
    --clamp-min: 12;
    --clamp-max: 18;
    background-color: var(--color-black01);
    color: var(--color-white);
    display: grid;
    align-items: center;
    padding: calc(4 * var(--rem)) calc(12 * var(--rem));
    position: relative;
  }

  .label::after {
    background-color: var(--color-black01);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    block-size: 10px;
    content: "";
    display: block;
    inline-size: 5px;
    position: absolute;
    right: 0;
    top: 50%;
    translate: 100% -50%;
  }

  .text {
    --clamp-min: 12;
    --clamp-max: 18;
    background-color: var(--color-white);
    padding: calc(4 * var(--rem)) calc(12 * var(--rem));
    @media (width >= 768px) {
      padding: calc(4 * var(--rem)) calc(20 * var(--rem));
    }
  }
}

.p-profile__descripton {
  margin-inline: auto;
  max-inline-size: 740px;
  margin-block-start: calc(56 * var(--rem));
  @media (width >= 768px) {
    margin-block-start: calc(88 * var(--rem));
  }
}

/* career path */
:where(.p-career) {
  background-color: var(--color-gray02);
  padding-block: calc(72 * var(--rem));
  @media (width >= 768px) {
    padding-block: calc(80 * var(--rem));
  }

  .p-media {
    --row-gap: calc(57 / 1100 * 100%);
    --media-img: calc(420 / 1100 * 100%);
    @media (width >= 768px) {
      --column-gap: calc(96 / 1100 * 100%);
    }
  }

  .p-media__img-wrapper {
    block-size: 274px;
    overflow: hidden;
    @media (width >= 768px) {
      block-size: 402px;
    }
    @media (width < 768px) {
      inline-size: calc(100% + var(--inline-content-space) * 2);
      margin-inline: calc(-1 * var(--inline-content-space));
    }
  }

  .p-media__img {
    block-size: 100%;
    display: block;
    object-fit: cover;
    inline-size: 100%;
  }

  .p-media__body {
    container: media-body / inline-size;
  }
}

.p-timeline {
  overflow: hidden;
  display: block grid;
}

.p-timeline__row {
  display: block grid;
  grid-template-columns: 83px 54px 1fr;
}

:where(.p-timeline__time) {
  font-size: calc(16 * var(--rem));
  align-self: start;
  align-items: baseline;
  align-content: center;
  display: block grid;
  font-weight: 500;
  grid-template-columns: max-content auto;
  justify-content: center;
  line-height: 1;
  inline-size: 100%;
  block-size: calc(28 * var(--rem));
  .sm {
    font-size: calc(12 * var(--rem));
  }
  .md {
    font-size: calc(14 * var(--rem));
  }
}

.p-timeline__row:not(:last-of-type) .p-timeline__time {
  border: 1px solid currentColor;
}

.p-timeline__row:last-of-type .p-timeline__time {
  background-color: var(--color-blue01);
  color: var(--color-white);
}

.p-timeline__line {
  isolation: isolate;
  position: relative;
  &::before {
    content: "";
    border: 1px dashed currentColor;
    inline-size: 25px;
    left: 0;
    position: absolute;
    top: 14px;
  }
  &::after {
    content: "";
    background-color: var(--color-black01);
    block-size: 100%;
    inline-size: 1px;
    left: 32px;
    position: absolute;
    top: 14px;
    z-index: -1;
  }
}
.p-timeline__line .circle {
  aspect-ratio: 1/1;
  background-color: var(--color-gray01);
  border: 4px solid var(--color-black01);
  border-radius: 50%;
  display: block;
  inline-size: 15px;
  margin-block-start: 5px;
  margin-inline-start: 25px;
}

.p-timeline__body {
  display: grid;
  gap: calc(5 * var(--rem));
}

.p-timeline__row:not(:last-of-type) .p-timeline__body {
  padding-block-end: calc(24 * var(--rem));
}

.p-timeline__title {
  font-size: calc(14 * var(--rem));
  font-weight: 500;
}

.p-timeline__text {
  font-size: calc(11 * var(--rem));
}

@container media-body (width >= 400px) {
  .p-timeline__row {
    grid-template-columns: 99px 106px 1fr;
  }

  :where(.p-timeline__time) {
    block-size: calc(30 * var(--rem));
    font-size: calc(20 * var(--rem));
    .sm {
      font-size: calc(13 * var(--rem));
    }
    .md {
      font-size: calc(18 * var(--rem));
    }
  }

  .p-timeline__line .circle {
    border: 5px solid var(--color-black01);
    inline-size: 17px;
    margin-block-start: 8px;
    margin-inline-start: 42px;
  }

  .p-timeline__line {
    position: relative;
    &::before {
      inline-size: 42px;
      top: 15px;
    }
    &::after {
      left: 50px;
      top: 16px;
    }
  }

  .p-timeline__body {
    gap: calc(12 * var(--rem));
  }

  .p-timeline__row:not(:last-of-type) .p-timeline__body {
    padding-block-end: calc(40 * var(--rem));
  }

  .p-timeline__title {
    font-size: calc(18 * var(--rem));
  }

  .p-timeline__text {
    font-size: calc(14 * var(--rem));
  }
}

/* faq */
:where(.p-faq) {
  padding-block: calc(72 * var(--rem)) calc(80 * var(--rem));
  @media (width >= 768px) {
    padding-block: calc(120 * var(--rem)) calc(104 * var(--rem));
  }

  .p-media {
    --row-gap: calc(40 / 1100 * 100%);
    --media-img: calc(580 / 1100 * 100%);
    @media (width >= 768px) {
      --column-gap: calc(80 / 1100 * 100%);
    }
  }

  .p-media + .p-media {
    margin-block-start: calc(80 * var(--rem));
    @media (width >= 768px) {
      margin-block-start: calc(104 * var(--rem));
    }
  }

  .p-media__img-wrapper {
    block-size: 262px;
    overflow: hidden;
    @media (width >= 768px) {
      block-size: 470px;
    }
    @media (width < 768px) {
      inline-size: calc(100% + var(--inline-content-space));
    }
  }

  .p-media:not(.p-media--reverse) .p-media__img-wrapper {
    @media (width < 768px) {
      margin-inline-start: calc(-1 * var(--inline-content-space));
    }
  }

  .p-media.p-media--reverse .p-media__img-wrapper {
    @media (width < 768px) {
      margin-inline-end: calc(-1 * var(--inline-content-space));
    }
  }

  .p-media__img {
    block-size: 100%;
    display: block;
    object-fit: cover;
    inline-size: 100%;
  }

  .p-media__body {
    display: grid;
    row-gap: calc(32 * var(--rem));
    @media (width >= 768px) {
      margin-block-start: calc(40 * var(--rem));
      row-gap: calc(40 * var(--rem));
    }
  }

  .p-media__title {
    --clamp-min: 22;
    --clamp-max: 26;
    font-weight: 500;
    line-height: 1.8;
    & > span {
      display: inline-block;
    }
  }

  .p-media__contents p + p {
    margin-block-start: 1em;
  }
}

/* message */
.p-message {
  padding-block-end: calc(120 * var(--rem));
  @media (width >= 768px) {
    padding-block-end: calc(160 * var(--rem));
  }
}

.p-message__img-wrapper {
  block-size: 286px;
  @media (width >= 768px) {
    block-size: 486px;
    overflow: hidden;
  }
  @media (width < 768px) {
    margin-inline: calc(-1 * var(--inline-content-space));
  }
}

.p-message__img {
  display: block;
  inline-size: 100%;
  object-fit: cover;
  block-size: 100%;
}

.p-message__contents {
  margin-inline: auto;
  max-inline-size: 740px;
  display: block grid;
  row-gap: calc(32 * var(--rem));
  margin-block-start: calc(40 * var(--rem));
  @media (width >= 768px) {
    margin-block-start: calc(88 * var(--rem));
    row-gap: calc(40 * var(--rem));
  }
}

.p-message__title {
  --clamp-min: 22;
  --clamp-max: 26;
  font-weight: 500;
  line-height: 1.8;
}

/* other story */
.p-other-story {
  border-image: linear-gradient(var(--color-gray04) 0 0) fill 0 / /0 100lvi;
  color: var(--color-white);
  display: block grid;
  grid-template-columns: var(--inline-content-space) 1fr 92px var(--inline-content-space);
  grid-template-rows: auto calc(48 * var(--rem)) auto;
  grid-template-areas:
    ". title nav ."
    ". . . ."
    "cards cards cards cards";
  isolation: isolate;
  padding-block: calc(80 * var(--rem));
  position: relative;
  @media (width >=768px) {
    grid-template-columns: var(--inline-content-space) 1fr var(--inline-content-space);
    grid-template-rows: auto calc(16 * var(--rem)) 48px calc(40 * var(--rem)) auto;
    grid-template-areas:
      ". title ."
      ". . ."
      ". nav ."
      ". . . "
      "cards cards cards";
    padding-block: calc(120 * var(--rem));
  }
}

.p-other-story__title {
  grid-area: title;
  .c-level2-heading {
    --clamp-min: 28;
    --clamp-max: 48;
    font-family: var(--font-zen);
    font-weight: 500;
    line-height: 1.6;
    position: relative;
    scale: 0.85 1;
    transform-origin: left;
  }
}

.p-other-story .c-section-sub-heading {
  --clamp-min: 80;
  --clamp-max: 160;
  position: absolute;
  right: 0;
  top: 0;
  writing-mode: revert;
  z-index: -1;
}

.p-swiper-cards {
  grid-area: cards;
  overflow: hidden;
}

.p-swiper-card {
  align-content: start;
  display: block grid;
  container: card-container / inline-size;
  flex-shrink: 0;
  row-gap: calc(20 * var(--rem));
  width: 295px;
  @media (width >= 768px) {
    width: 341px;
  }
}

.p-swiper-card__img-wrapper {
  aspect-ratio: 340/400;
  inline-size: 100%;
  overflow: hidden;
  position: relative;
}

.p-swiper-card__img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.p-swiper-card__caption {
  --clamp-min: 15;
  --clamp-max: 18;
  display: grid;
  grid-auto-flow: column;
  position: absolute;
  right: 0;
  top: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  .label {
    --clamp-min: 15;
    --clamp-max: 18;
    align-items: center;
    background-color: var(--color-black01);
    color: var(--color-white);
    display: grid;
    line-height: 1;
    padding: 0.8em 0.53em;
  }
  .text {
    --clamp-min: 14;
    --clamp-max: 15;
    align-items: center;
    background-color: color-mix(in srgb, var(--color-white) 70%, transparent);
    color: var(--color-black01);
    display: grid;
    line-height: 1.2;
    padding: 0.8em 0.53em;
  }
}

.p-swiper-card__body {
  display: block grid;
  grid-template-rows: auto calc(16 * var(--rem)) auto auto;
  grid-template-areas:
    "text"
    "."
    "status"
    "name";
}

.p-swiper-card__text {
  --clamp-min: 18;
  --clamp-max: 20;
  font-weight: 500;
  grid-area: text;
  line-height: 1.8;
}

.p-swiper-card__status {
  --clamp-min: 10;
  --clamp-max: 12;
  color: var(--color-gray01);
  grid-area: status;
  line-height: 1.6;
}

.p-swiper-card__name {
  --clamp-min: 16;
  --clamp-max: 18;
  color: var(--color-gray01);
  grid-area: name;
}

.p-swiper-cards__nav {
  align-items: center;
  align-self: end;
  display: block grid;
  gap: calc(12 * var(--rem));
  grid-area: nav;
  grid-template-columns: repeat(2, 40px);
  position: relative;
  justify-self: end;
  @media (width >= 768px) {
    gap: calc(24 * var(--rem));
    grid-template-columns: repeat(2, 48px);
  }
}

.p-swiper-cards__nav .swiper-button-next,
.p-swiper-cards__nav .swiper-button-prev {
  aspect-ratio: 1/1;
  block-size: auto;
  inline-size: 100%;
  position: relative;
  left: revert;
  right: revert;
  top: revert;
  margin-top: 0;
  &::after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    inline-size: 100%;
    aspect-ratio: 1/1;
  }
}

.p-swiper-cards__nav .swiper-button-prev::after {
  background-image: url(../img/common/swiper-prev.svg);
}

.p-swiper-cards__nav .swiper-button-next::after {
  background-image: url(../img/common/swiper-next.svg);
}