@charset "utf-8";

.job-page-shell {
  padding: min(6.667vw, 100px) 0 0;
  overflow: hidden;
}

.job-content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
}

.job-intro {
  position: relative;
  padding: 0 0 min(8vw, 120px);
}

.job-intro > h2 {
  position: relative;
  z-index: 1;
  width: min(100%, 1050px);
  margin-inline: auto;
}

.job-intro > p {
  position: relative;
  z-index: 1;
  width: min(100%, 1050px);
  margin-top: min(2.133vw, 32px);
  margin-inline: auto;
  font-size: min(1.067vw, 1.6rem);
  line-height: 2.2;
  text-align: center;
}

.job-intro > p + p {
  margin-top: min(0.667vw, 10px);
}

.job-staff {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: min(1.667vw, 25px);
  row-gap: 0;
  margin-top: min(6.667vw, 100px);
}

.job-staff__pair {
  display: contents;
}

.staff-card {
  position: relative;
  z-index: 0;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-items: stretch;
  min-width: 0;
  text-align: left;
}

.staff-card::after {
  position: absolute;
  z-index: -1;
  top: min(16vw, 240px);
  left: 50%;
  width: min(10vw, 150px);
  aspect-ratio: 1;
  content: "";
  background: url("../img/common/illust-dots.svg") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  transform: translateX(-25%);
}

.staff-card__photo {
  width: 100%;
  max-width: min(17.467vw, 262px);
  align-self: center;
}

.staff-card__career {
  display: table;
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  margin: calc(-1 * min(1.333vw, 20px)) 0 min(0.667vw, 10px);
  padding: min(0.133vw, 2px) min(0.667vw, 10px);
  justify-self: start;
  color: #111;
  background: var(--color-lime);
  font-size: min(0.8vw, 1.2rem);
  font-weight: 700;
  line-height: 1.5;
}

.staff-card h3 {
  color: var(--color-ink);
  font-size: min(1.067vw, 1.6rem);
  line-height: 1.35;
}

.staff-card h3 span {
  display: block;
  color: #111;
  font: 700 min(2vw, 3rem)/1 Arial, sans-serif;
  letter-spacing: 0;
}

.staff-card > p:not(.staff-card__career) {
  width: 100%;
  margin-top: min(1.2vw, 18px);
  font-size: min(0.933vw, 1.4rem);
  line-height: 1.8;
}

.staff-card dl {
  position: relative;
  width: 100%;
  min-height: 0;
  margin: min(2vw, 30px) 0 0;
  padding: min(1.667vw, 25px) min(1.2vw, 18px) min(1.2vw, 18px);
  background: var(--color-white);
  border: 1px solid #8d9290;
  text-align: left;
}

.staff-card dt {
  position: absolute;
  top: 0;
  left: min(1.2vw, 18px);
  padding-inline: min(0.667vw, 10px);
  color: #6b716f;
  background: var(--color-white);
  font-size: min(0.8vw, 1.2rem);
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  white-space: nowrap;
}

.staff-card dd {
  margin: 0;
  font-size: min(0.8vw, 1.2rem);
  line-height: 1.75;
}

.staff-card--sano,
.speaker-sano { --staff-color: #58b858; }
.staff-card--kishida,
.speaker-kishida { --staff-color: #eea656; }
.staff-card--ishikawa,
.speaker-ishikawa { --staff-color: #df7e89; }
.staff-card--furukawa,
.speaker-furukawa { --staff-color: #4a83b8; }

.question-nav {
  position: relative;
  z-index: 0;
  display: grid;
  gap: min(1.333vw, 20px);
  width: 75%;
	max-width: 900px;
  margin: min(6.667vw, 100px) auto 0;
}

.question-nav::before,
.question-nav::after {
  position: absolute;
  z-index: -1;
  width: min(11.333vw, 170px);
  aspect-ratio: 238.56 / 220.28;
  content: "";
  background: url("../img/common/illust-triangle.svg") center / contain no-repeat;
  pointer-events: none;
}

.question-nav::before {
  top: calc(-1 * min(5.333vw, 80px));
  left: calc(-1 * min(8vw, 120px));
}

.question-nav::after {
  right: calc(-1 * min(8vw, 120px));
  bottom: calc(-1 * min(4vw, 60px));
  transform: scaleX(-1);
}

.question-nav a {
  display: grid;
  grid-template-columns: min(5.333vw, 80px) 1fr min(3.333vw, 50px);
  align-items: center;
  min-height: min(5.333vw, 80px);
  padding: min(0.667vw, 10px) min(1.333vw, 20px);
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid rgb(45 83 82 / 25%);
  border-radius: min(1.333vw, 20px);
  box-shadow: 0 min(0.533vw, 8px) 0 rgb(45 83 82 / 22%);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.question-nav a:hover {
  background: var(--color-cream);
  border-color: var(--color-lime);
}

.question-nav span {
  color: var(--staff-color, var(--color-ink));
  font: 800 min(1.333vw, 2rem)/1 Arial, sans-serif;
}

.question-nav strong {
  font-size: min(1.333vw, 2rem);
  line-height: 1.5;
}

.question-nav i {
  display: grid;
  width: min(2.667vw, 40px);
  aspect-ratio: 1;
  place-items: center;
  color: var(--color-white);
  background: var(--color-ink);
  border-radius: 50%;
  font-style: normal;
  line-height: 1;
}

.talk-section {
  position: relative;
  width: 100%;
  padding: min(7.333vw, 110px) min(4.667vw, 70px) min(8vw, 120px);
  border-top: 1px solid var(--color-ink);
}

.talk-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(26.667vw, 400px);
  align-items: center;
  gap: min(2.667vw, 40px);
}

.talk-heading--photo-left {
  grid-template-columns: min(26.667vw, 400px) minmax(0, 1fr);
}

.talk-heading--wide-photo {
  grid-template-columns: 1fr;
}

.talk-heading--wide-photo img {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: min(3.333vw, 50px);
}

.talk-heading__number {
  position: absolute;
  top: min(5.333vw, 80px);
  left: 0;
  color: #111;
  font: 600 min(0.933vw, 1.4rem)/1 Arial, sans-serif;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
}

.talk-heading__number strong {
  margin: 0;
  font: inherit;
}

.talk-heading h2 {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  color: var(--color-white);
  font-size: min(2.133vw, 3.2rem);
  font-weight: 800;
  line-height: 1.5;
}

.talk-heading--photo-right h2,
.talk-heading--photo-left h2 {
  align-self: start;
  margin-top: min(2.667vw, 40px);
}

#talk01 .talk-heading h2::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: min(13.333vw, 200px);
  aspect-ratio: 253.77 / 198.95;
  content: "";
  background: url("../img/common/illust-circle02.svg") center / contain no-repeat;
  pointer-events: none;
  transform: translate(-18%, -50%);
}

.talk-heading h2 span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: min(0.267vw, 4px) min(1.067vw, 16px);
  background: var(--color-ink);
}

.talk-heading h2 span + span {
  margin-top: min(0.4vw, 6px);
}

.talk-heading > img {
  width: 100%;
}

.talk-list {
  display: grid;
  gap: min(2.667vw, 40px);
  width: min(100%, 1000px);
  margin: min(6.667vw, 100px) auto 0;
}

.talk-message {
  display: grid;
  grid-template-columns: min(5.333vw, 80px) minmax(0, 1fr);
  align-items: start;
  gap: min(1.333vw, 20px);
}

.talk-message--right {
  grid-template-columns: minmax(0, 1fr) min(5.333vw, 80px);
}

.talk-message--right figure {
  grid-column: 2;
  grid-row: 1;
}

.talk-message--right > p {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.talk-message figure {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: min(0.667vw, 10px);
}

.talk-message figure img {
  width: min(4.667vw, 70px);
  height: auto;
  object-fit: contain;
}

.talk-message figcaption {
  margin-top: min(0.4vw, 6px);
  color: var(--staff-color);
  font-size: min(0.933vw, 1.4rem);
  font-weight: 800;
  line-height: 1.4;
}

.talk-message > p {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  min-height: min(4.667vw, 70px);
  overflow: visible;
  padding: min(1.2vw, 18px) min(2vw, 30px);
  color: #111;
  background: var(--color-white);
  border: 1px solid #aab3b2;
  border-radius: min(0.8vw, 12px);
  box-shadow: 0 min(0.4vw, 6px) 0 rgb(86 94 93 / 38%);
  font-size: min(1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.8;
}

.talk-message > p::before,
.talk-message > p::after {
  position: absolute;
  top: min(1.467vw, 22px);
  width: 0;
  height: 0;
  content: "";
  border-top: min(0.4vw, 6px) solid transparent;
  border-bottom: min(0.4vw, 6px) solid transparent;
}

.talk-message > p::before {
  left: calc(-1 * min(0.667vw, 10px));
  border-right: min(0.667vw, 10px) solid #aab3b2;
}

.talk-message > p::after {
  top: calc(min(1.467vw, 22px) + 1px);
  left: calc(-1 * min(0.533vw, 8px));
  border-top-width: min(0.333vw, 5px);
  border-bottom-width: min(0.333vw, 5px);
  border-right: min(0.6vw, 9px) solid var(--color-white);
}

.talk-message--right > p::before {
  right: calc(-1 * min(0.667vw, 10px));
  left: auto;
  border-right: 0;
  border-left: min(0.667vw, 10px) solid #aab3b2;
}

.talk-message--right > p::after {
  right: calc(-1 * min(0.533vw, 8px));
  left: auto;
  border-right: 0;
  border-left: min(0.6vw, 9px) solid var(--color-white);
}

.job-roles {
  margin-top: min(8.667vw, 130px);
}

.job-roles > h3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(0.667vw, 10px);
  color: var(--color-ink);
  font-size: min(1.733vw, 2.6rem);
  line-height: 1.5;
  text-align: center;
}

.job-roles__title-text {
  position: relative;
  z-index: 0;
}

.job-roles__title-text::after {
  position: absolute;
  z-index: -1;
  bottom: min(0.2vw, 3px);
  left: 50%;
  display: block;
  width: min(13.333vw, 200px);
  height: min(0.667vw, 10px);
  content: "";
  background: var(--color-lime);
  transform: translateX(-50%);
}

.job-roles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: min(4vw, 60px);
  margin-top: min(6.667vw, 100px);
}

.role-card {
  position: relative;
  padding: min(3.333vw, 50px) min(2vw, 30px) min(2.667vw, 40px);
  background: var(--color-white);
  border-radius: min(2vw, 30px);
  box-shadow: 0 min(0.533vw, 8px) min(1.333vw, 20px) rgb(45 83 82 / 18%);
}

.role-card__character {
  position: absolute;
  z-index: 2;
  top: 0;
  width: min(6vw, 90px);
  height: auto;
  transform: translateY(-72%);
}

.role-card--fd .role-card__character {
  right: min(1.333vw, 20px);
}

.role-card--td .role-card__character {
  left: min(1.333vw, 20px);
}

.role-card--fd { --role-color: #58b858; }
.role-card--td { --role-color: #4a83b8; }

.role-card h4 {
  position: absolute;
  top: 0;
  left: min(2vw, 30px);
  margin: 0;
  padding: min(0.4vw, 6px) min(1.333vw, 20px);
  color: var(--color-white);
  background: var(--color-ink);
  font-size: min(1.333vw, 2rem);
  text-align: center;
  transform: translateY(-50%);
}

.role-card--td h4 {
  right: min(2vw, 30px);
  left: auto;
}

.role-card dl {
  margin: 0;
}

.role-card dl > div {
  display: grid;
  grid-template-columns: min(12vw, 180px) minmax(0, 1fr);
  border-top: 1px solid #8d9290;
}

.role-card dl > div:first-child {
  border-top: 0;
}

.role-card dt,
.role-card dd {
  margin: 0;
  padding: min(1.333vw, 20px);
  font-size: min(0.933vw, 1.4rem);
  line-height: 1.8;
}

.role-card dt {
  color: var(--color-ink);
  font-weight: 800;
}

.role-card__term-nowrap {
  white-space: nowrap;
}

.role-card__tasks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.role-card__tasks li {
  display: grid;
  grid-template-columns: 1em minmax(0, 1fr);
}

.role-card__tasks li::before {
  content: "・";
}

.talk-section__closing-photo {
  width: 100%;
  margin-top: min(8vw, 120px);
}

.people-links {
  width: min(calc(100% - min(5.333vw, 80px)), 1200px);
  margin-inline: auto;
  padding: min(4.667vw, 70px) 0 min(6.667vw, 100px);
  text-align: center;
}

.people-links__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: min(0.667vw, 10px);
  color: var(--color-ink);
  font-size: min(1.333vw, 2rem);
  font-weight: 800;
  line-height: 1.5;
}

.contents-lines {
  display: inline-flex;
  align-items: flex-end;
  gap: min(0.267vw, 4px);
  height: min(1.333vw, 20px);
}

.contents-lines i {
  display: block;
  width: 1px;
  height: min(1.333vw, 20px);
  background: var(--color-ink);
  transform: rotate(-28deg);
  transform-origin: bottom;
}

.contents-lines i + i {
  height: min(0.933vw, 14px);
}

.contents-lines--right {
  transform: scaleX(-1);
}

.people-links__list {
  display: flex;
  justify-content: center;
  gap: min(2vw, 30px);
  margin-top: min(2.667vw, 40px);
}

.people-links__slider { position: relative; }
.people-links__viewport { overflow: visible; }
.people-links__button,
.people-links__pagination { display: none; }

.people-links__list a {
  display: block;
  width: min(8vw, 120px);
  overflow: hidden;
  border: min(0.2vw, 3px) solid transparent;
  border-radius: 50%;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.people-links__list a:hover,
.people-links__list a[aria-current="page"] {
  border-color: var(--color-lime);
  transform: translateY(calc(-1 * min(0.333vw, 5px)));
}

.people-links__list img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.people-links__list .is-clone { display: none; }

@media (max-width: 768px) {
  .job-page-shell {
    padding-top: 10.256vw;
  }

  .job-content {
    width: 100%;
  }

  .job-intro {
    padding: 0 0 18vw;
  }

  .job-intro > h2 br,
  .job-intro > p br {
    display: none;
  }

  .job-intro > p {
    width: inherit;
    margin-top: 7.692vw;
    font-size: 3.59vw;
    line-height: 1.6;
    text-align: left;
  }

  .job-intro > p + p {
    margin-top: 3.077vw;
  }

  .job-staff {
    display: flex;
    flex-direction: column;
    gap: 12.821vw;
    margin-top: 15.385vw;
  }

  .job-staff__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4.103vw;
    row-gap: 0;
  }

  .staff-card__photo {
    max-width: 38.462vw;
  }

  .staff-card::after {
    top: 38.462vw;
    width: 30.769vw;
  }

  .staff-card__career {
    margin: -3.077vw 0 1.538vw;
    padding: 0.513vw 1.026vw;
    font-size: 2.564vw;
  }

  .staff-card h3 {
    font-size: 4.103vw;
	  margin: 0.5em 0;
  }

  .staff-card h3 span {
    font-size: 5.128vw;
  }

  .staff-card > p:not(.staff-card__career) {
    margin-top: 3.077vw;
    font-size: 3.1vw;
    line-height: 1.4;
  }

  .staff-card dl {
    margin-top: 6.154vw;
    padding: 5.128vw 3.077vw 3.077vw;
    border-width: 1px;
  }

  .staff-card dt,
  .staff-card dd {
    font-size: 2.9vw;
  }

  .question-nav {
    gap: 4.103vw;
    margin-top: 17.949vw;
	  width: 100%;
  }
	

  .question-nav a {
    grid-template-columns: 10.256vw 1fr 8.205vw;
    min-height: 18.462vw;
    padding: 2.564vw 3.077vw;
    border-radius: 3.59vw;
    box-shadow: 0 1.538vw 0 rgb(45 83 82 / 22%);
  }

  .question-nav span {
    font-size: 3.2vw;
  }

  .question-nav strong {
    font-size: 3.2vw;
    line-height: 1.55;
  }

  .question-nav i {
    width: 6.154vw;
  }

  .talk-section {
    padding: 15.385vw 0 20.513vw;
  }

  .talk-heading,
  .talk-heading--photo-left,
  .talk-heading--wide-photo {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .talk-heading--photo-left > img {
    grid-row: 3;
  }

  .talk-heading__number {
    position: static;
    grid-row: 1;
    margin-bottom: 5.128vw;
    font-size: 3.077vw;
    letter-spacing: 0.08em;
    text-align: center;
    writing-mode: horizontal-tb;
  }

  .talk-heading__number strong {
    margin: 0;
    font: inherit;
  }

  .talk-heading h2 {
    font-size: 5.128vw;
    line-height: 1.65;
  }

  .talk-heading--photo-right h2,
  .talk-heading--photo-left h2 {
    margin-top: 0;
  }

  #talk01 .talk-heading h2::before {
    width: 41.026vw;
  }

  .talk-heading h2 span {
    padding: 1.026vw 2.564vw;
    font-size: 4.333vw;
  }

  .talk-heading h2 span + span {
    margin-top: 1.026vw;
  }

  .talk-heading > img,
  .talk-heading--wide-photo img {
    grid-column: auto;
    margin-top: 2.564vw;
  }

  .talk-list {
    gap: 7.692vw;
    margin-top: 12.821vw;
  }

  .talk-message,
  .talk-message--right {
    grid-template-columns: 15.385vw minmax(0, 1fr);
    gap: 3.077vw;
  }

  .talk-message--right {
    grid-template-columns: minmax(0, 1fr) 15.385vw;
  }

  .talk-message figure img {
    width: 13.333vw;
    height: auto;
  }

  .talk-message figure {
    margin-top: 2.564vw;
  }

  .talk-message figcaption {
    margin-top: 1.026vw;
    font-size: 3.077vw;
  }

  .talk-message > p {
    min-height: 15.385vw;
    padding: 3.59vw 4.103vw;
    border-radius: 2.564vw;
    box-shadow: 0 1.538vw 0 rgb(86 94 93 / 38%);
    font-size: 3.333vw;
    line-height: 1.8;
  }

  .talk-message > p::before,
  .talk-message > p::after {
    top: 4.103vw;
    border-top-width: 1.538vw;
    border-bottom-width: 1.538vw;
  }

  .talk-message > p::before {
    left: calc(-1 * 2.564vw);
    border-right-width: 2.564vw;
  }

  .talk-message > p::after {
    top: 4.359vw;
    left: calc(-1 * 2.051vw);
    border-top-width: 1.282vw;
    border-bottom-width: 1.282vw;
    border-right-width: 2.308vw;
  }

  .talk-message--right > p::before {
    right: calc(-1 * 2.564vw);
    left: auto;
    border-left-width: 2.564vw;
  }

  .talk-message--right > p::after {
    right: calc(-1 * 2.051vw);
    left: auto;
    border-left-width: 2.308vw;
  }

  .job-roles {
    margin-top: 20.513vw;
  }

  .job-roles > h3 {
    font-size: 4.615vw;
  }

  .job-roles > h3 {
    gap: 1.282vw;
  }

  .job-roles__title-text::after {
    width: 53.846vw;
    height: 2.051vw;
    bottom: 0;
  }

  .job-roles__grid {
    grid-template-columns: 1fr;
    gap: 28.205vw;
    margin-top: 25.641vw;
  }

  .role-card {
    padding: 12.821vw 5.128vw 8.205vw;
    border-radius: 5.128vw;
    box-shadow: 0 1.538vw 4.103vw rgb(45 83 82 / 18%);
  }

  .role-card__character {
    width: 20.513vw;
  }

  .role-card--fd .role-card__character {
    right: 4.103vw;
  }

  .role-card--td .role-card__character {
    left: 4.103vw;
  }

  .role-card h4 {
    padding: 1.538vw 5.128vw;
    font-size: 4.103vw;
  }

  .role-card--fd h4 {
    left: 5.128vw;
  }

  .role-card--td h4 {
    right: 5.128vw;
  }

  .role-card dl > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .role-card dt,
  .role-card dd {
    font-size: 3.077vw;
  }

  .role-card dt {
    padding: 3.59vw 3.59vw 1.282vw;
  }

  .role-card dd {
    padding: 0 3.59vw 3.59vw;
  }

  .talk-section__closing-photo {
    margin-top: 17.949vw;
  }

  .people-links {
    width: calc(100% - 10.256vw);
    padding: 12.821vw 0 17.949vw;
  }

  .people-links__title {
    gap: 1.282vw;
    font-size: 4.103vw;
  }

  .contents-lines {
    gap: 1.026vw;
    height: 4.103vw;
  }

  .contents-lines i {
    height: 4.103vw;
  }

  .contents-lines i + i {
    height: 3.077vw;
  }

  .people-links__list {
    justify-content: flex-start;
    gap: 4.103vw;
    width: max-content;
    margin-top: 0;
    padding: 1.282vw 0 2.564vw;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .people-links__list.is-no-transition { transition: none; }

  .people-links__list a {
    width: 20.513vw;
    flex: 0 0 20.513vw;
    border-width: 0;
    opacity: 0.6;
    transform: none;
    transition: opacity 0.25s ease;
  }

  .people-links__list a:hover,
  .people-links__list a[aria-current="page"] {
    border-color: transparent;
    transform: none;
  }

  .people-links__list a.is-active { opacity: 1; }
  .people-links__list .is-clone { display: block; }

  .people-links__slider {
    margin-top: 7.692vw;
  }

  .people-links__viewport { overflow: hidden; }

  .people-links__button {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 8.205vw;
    aspect-ratio: 1;
    padding: 0 0 0.15em;
    place-items: center;
    color: var(--color-white);
    background: var(--color-ink);
    border: 0;
    border-radius: 50%;
    font: 700 3.333vw/1 Arial, sans-serif;
    cursor: pointer;
    transform: translateY(-50%);
  }

  .people-links__button--prev { left: 0; }
  .people-links__button--next { right: 0; }

  .people-links__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.077vw;
    margin-top: 4.103vw;
  }

  .people-links__pagination button {
    width: 2.564vw;
    aspect-ratio: 1;
    padding: 0;
    background: rgb(45 83 82 / 25%);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .people-links__pagination button.is-active {
    background: var(--color-ink);
    transform: scale(1.3);
  }
}