:root {
  --font-base: "Noto Sans JP", sans-serif;
  --font-en: "Lato", sans-serif;
  --font-ubuntu: "Ubuntu", sans-serif;
  --leading-trim: calc((1em - 1lh) / 2);
  --blue: #2635A7;
  --bg-noise: url("../img/common/bg-noise-blue.png") repeat;
  --bg-noise-yel: url("../img/common/bg-noise-yellow.png") repeat;
  --border: #2635A71A;
  --border02: #2635A733;
  --yellow: #FFF100;
  --grey: #F2F3F4;
  --header-height: 71px;
  --sp-fixed-btns-height: 46px;
  --radius: 10px;
  --mask-arrow: url("../img/common/icon-arrow.svg") no-repeat center center/ contain;
  --top-part-height: min(calc(70 / 1280) * 100vw, 70px);
}
@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --header-height: 60px;
  }
}

.p-work .c-ttl__en {
  font-size: 7.2rem;
}
@media screen and (max-width: 768px) {
  .p-work .c-ttl__en {
    font-size: 4rem;
  }
}
.p-work__btns {
  background: #F9F9F9;
  padding-block: 80px calc(80px + var(--top-part-height));
}
.p-work__btns .c-btn {
  display: flex;
  max-width: 267px;
}
.p-work__btns .c-btn__btn {
  flex-grow: 1;
}
.p-work__btns-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 265px));
  gap: 20px;
}
@media screen and (max-width: 1027px) {
  .p-work__btns-list {
    grid-template-columns: repeat(2, minmax(0, 265px));
    justify-content: center;
    gap: 40px 30px;
  }
}
@media screen and (max-width: 768px) {
  .p-work__btns-list {
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}
.p-work__btns-list .c-btn__btn {
  min-width: unset;
  min-height: unset;
  flex-grow: 1;
}
@media screen and (max-width: 499px) {
  .p-work__btns-list-item .c-arrow {
    width: 45px;
  }
}

.p-work-work {
  position: relative;
  z-index: 1;
  background: #fff;
  padding-block: 48px calc(120px + var(--top-part-height));
}
.p-work-work::before {
  content: "";
  width: calc(768 / 1280 * 100vw);
  aspect-ratio: 765/494;
  position: absolute;
  top: max(70 / 1280 * -100vw, -70px);
  left: 0;
  background: url("../img/work/section-deco.svg") no-repeat center center/contain;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .p-work-work::before {
    width: 82%;
  }
}
@media screen and (max-width: 599px) {
  .p-work-work::before {
    width: 85%;
    top: 0;
    transform: translateY(11%);
  }
}
.p-work-work:nth-child(even)::before {
  top: -110px;
  left: auto;
  right: 0;
  background-image: url("../img/work/section-deco-right.svg");
}
@media screen and (max-width: 768px) {
  .p-work-work:nth-child(even)::before {
    top: 0;
    transform: translateY(-6%);
  }
}
.p-work-work:last-child {
  padding-bottom: 120px;
}

.p-work-container {
  padding-top: 80px;
  display: grid;
  gap: 80px 0;
}
@media screen and (max-width: 768px) {
  .p-work-container {
    padding-top: 60px;
    gap: 60px 0;
  }
}
.p-work-container.has-pb {
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .p-work-container.has-pb {
    padding-bottom: 60px;
  }
}
.p-work-container + .p-work-container {
  border-top: 1px solid rgba(0, 0, 0, 0.1019607843);
}

.p-work-item {
  display: flex;
  align-items: start;
  gap: 0 calc(57 / 1120 * 100%);
}
@media screen and (max-width: 768px) {
  .p-work-item {
    flex-direction: column;
    gap: 40px 0;
  }
}
.p-work-item.--reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .p-work-item.--reverse {
    flex-direction: column-reverse;
  }
}
.p-work-item__img {
  width: calc(610 / 1120 * 100%);
  aspect-ratio: 610/396;
  border-radius: var(--radius);
  overflow: hidden;
}
@media screen and (max-width: 1023px) {
  .p-work-item__img {
    width: 45%;
  }
}
@media screen and (max-width: 768px) {
  .p-work-item__img {
    width: 100%;
  }
}
.p-work-item__img > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.p-work-item__texts {
  width: calc(453 / 1120 * 100%);
  padding-top: 30px;
  display: grid;
  gap: 45px 0;
}
@media screen and (max-width: 1023px) {
  .p-work-item__texts {
    width: 55%;
  }
}
@media screen and (max-width: 768px) {
  .p-work-item__texts {
    width: 100%;
    padding-top: 0;
  }
}
.p-work-item__ttl {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  .p-work-item__ttl {
    font-size: 2.5rem;
  }
}
.p-work-intv-card {
  display: block;
  position: relative;
  background: var(--bg-noise);
  padding: 40px 40px 40px 60px;
  border-radius: var(--radius);
  color: var(--grey);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .p-work-intv-card {
    padding: 7.8226857888vw;
    padding-block: 50px 40px;
  }
}
@media screen and (max-width: 599px) {
  .p-work-intv-card {
    padding: 20px;
    padding-top: 60px;
  }
}
.p-work-intv-card::before {
  content: "Interview";
  font-family: var(--font-en);
  font-size: 6.5rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.2);
  line-height: 0.7;
  text-transform: uppercase;
  position: absolute;
  top: 11px;
  left: 5px;
  z-index: -1;
}
@media screen and (max-width: 599px) {
  .p-work-intv-card::before {
    font-size: 5rem;
    writing-mode: vertical-lr;
    left: auto;
    top: 0;
    right: 0;
  }
}
.p-work-intv-card__inner {
  display: grid;
  grid-template-columns: calc(230 / 1020 * 100%) 1fr;
  gap: 0 calc(88 / 1020 * 100%);
  border-radius: var(--radius);
}
@media screen and (max-width: 768px) {
  .p-work-intv-card__inner {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }
}
.p-work-intv-card__img {
  aspect-ratio: 231/280;
  border-radius: var(--radius);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .p-work-intv-card__img {
    width: min(100%, 58.59375vw);
    margin-inline: auto;
  }
}
@media screen and (max-width: 599px) {
  .p-work-intv-card__img {
    max-width: 200px;
  }
}
.p-work-intv-card__img > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.p-work-intv-card__label {
  gap: 0 10px;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.6980392157);
  grid-template-columns: 22px max-content;
  justify-content: end;
}
@media screen and (max-width: 599px) {
  .p-work-intv-card__label {
    position: absolute;
    top: 20px;
    left: 20px;
  }
}
.p-work-intv-card__label::before {
  width: 22px;
  background-image: url("../img/common/bg-noise-light-blue.png"), url("../img/common/bg-noise-yellow.png");
  background-size: 50% 100%, 50% 100%;
  background-position: left, right;
}
.p-work-intv-card__text-group {
  margin-top: 17px;
  display: grid;
  gap: 27px 0;
}
@media screen and (max-width: 599px) {
  .p-work-intv-card__text-group {
    margin-top: 0;
    gap: 30px;
  }
}
.p-work-intv-card .c-intv-year-dept {
  position: static;
}
.p-work-intv-card .c-intv-year-dept .year {
  color: #fff;
}
.p-work-intv-card__ttl {
  font-size: 2.2rem;
  line-height: 1.5;
}
.p-work-intv-card__text {
  width: calc(642 / 700 * 100%);
  font-size: 1.4rem;
  line-height: 1.8;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: start;
}
@media screen and (max-width: 768px) {
  .p-work-intv-card__text {
    width: 100%;
  }
}
.p-work-intv-card__link-wrap {
  margin-top: 70px;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .p-work-intv-card__link-wrap {
    margin-top: 50px;
  }
}
.p-work-intv-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0 10px;
  color: #fff;
}

.p-work-security {
  background: #fff;
}
.p-work-security .p-work-item.--reverse .c-ttl-ja::before {
  background-image: url("../img/common/bg-noise-yellow.png");
}
@media screen and (max-width: 768px) {
  .p-work-tech .c-ttl__en {
    font-size: 3.8rem;
  }
}

.p-work-gallery {
  background: #fff;
  padding-block: 100px;
  position: relative;
  z-index: 1;
}
.p-work-gallery__gallery {
  position: static;
}