/* ============================================================= *

index

* ============================================================= */
/* =============================================================

Index

* ============================================================= */
.js-fade-up {
  opacity: 0;
  transition: opacity 1.4s var(--animation-kame) .5s, transform 1.4s var(--animation-kame) .5s;
  transform: translateY(60px);
}

.js-fade-up.is-fade-up {
  opacity: 1;
  transform: translateY(0);
}

.js-pop-up {
  opacity: 0;
  transition: all .5s var(--animation-pop);
  transition-property: transform, opacity;
  transform: scale(.5);
}

.js-pop-up.is-pop-up {
  opacity: 1;
  transform: scale(1);
}

.u-bounce-3 {
  animation: bounce-y-3 3s ease-in-out infinite alternate-reverse;
}

.u-bounce-2 {
  animation: bounce-y-2 3s ease-in-out infinite alternate-reverse;
}

.u-bounce-1 {
  animation: bounce-y-1 3s ease-in-out infinite alternate-reverse;
}

@keyframes bounce-y-3 {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}

@keyframes bounce-y-2 {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}

@keyframes bounce-y-1 {
  0% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(1%);
  }
}

@keyframes zoom-in-out {
  0% {
    scale: .98;
  }
  100% {
    scale: 1;
  }
}

@keyframes kame {
  0% {
    transform: rotate(0deg);
  }
  8.33333% {
    transform: rotate(-4deg);
  }
  25% {
    transform: rotate(4deg);
  }
  33.33333% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* p-index-section
=============================== */
.p-index-section-title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .0625em .0625em;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: calc(var(--leading-trim) + 30px);
  text-align: center;
  letter-spacing: .075em;
  font-size: 4.8rem;
}

@media screen and (max-width: 960px) {
  .p-index-section-title {
    gap: .58333em;
    width: 100%;
    aspect-ratio: 1;
    font-size: max(6cqi, 2.4rem);
  }
}

.p-index-section-title span._en {
  color: var(--key-color);
  font-family: var(--en-font-family);

  margin-block: var(--leading-trim);
}

.p-index-section-title span._ja {
  position: relative;
  color: var(--base-color);
  word-break: keep-all;
  letter-spacing: 0;
  font-weight: 700;
  font-size: .58333em;
  font-family: var(--base-font-family);
  line-height: 123.80952%;

  margin-block: var(--leading-trim);
}

@media screen and (max-width: 960px) {
  .p-index-section-title span._ja {
    font-size: .875em;
  }
}

.p-index-section-title._has-wbr {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-index-section-lead {
  font-size: 22px;
}

@media screen and (max-width: 960px) {
  .p-index-section-lead {
    text-align: center;
    font-size: 16px;
  }
}

/* p-index-hero
=============================== */
.p-index-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-height) + clamp(0px, -30.61224px + 8.16327vw, 32px));
  background: var(--bg-color);
}

@media screen and (max-width: 960px) {
  .p-index-hero {
    max-width: calc(100% + var(--inner-padding));
  }
}

/* p-index-hero__head
=============================== */
.p-index-hero__head {
  position: relative;
  z-index: 1;
  display: grid;
  justify-content: center;
  grid-template-areas: "title photo" "lead photo" "character photo";
  width: 100%;
  max-width: calc(855px + var(--inner-padding));
  transition: all .5s cubic-bezier(.55, .05, .22, .99);
  transition-property: transform, opacity;
  -moz-column-gap: 1%;
       column-gap: 1%;

  padding-inline: var(--inner-padding) 0;
  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .p-index-hero__head {
    justify-content: center;
    align-items: center;
    grid-template-columns: auto 70.42254%;
    grid-template-areas: "title title" "lead photo" "character photo";
    gap: 0;
    max-width: 100%;

    padding-inline: var(--inner-padding);
  }
}

.p-index-hero__head ._hexagon_01 {
  position: absolute;
  bottom: 0;
  left: -15%;
  animation: bounce-y-3 3s ease-in-out infinite alternate-reverse;
}

@media screen and (max-width: 960px) {
  .p-index-hero__head ._hexagon_01 {
    top: 0;
    right: 9.33333%;
    bottom: auto;
    left: auto;
  }
}

.p-index-hero__head ._hexagon_01 > img {
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
}

.p-index-hero__head ._hexagon_02 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: bounce-y-3 3s ease-in-out infinite alternate-reverse;
}

@media screen and (max-width: 960px) {
  .p-index-hero__head ._hexagon_02 {
    top: auto;
    right: auto;
    bottom: 15%;
    left: 6.66667%;
    z-index: -1;
    width: 32px;
    height: 32px;
  }
}

.p-index-hero__head ._hexagon_02 > img:nth-child(1) {
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
}

.p-index-hero__head ._hexagon_02 > img:nth-child(2) {
  position: absolute;
  bottom: 2rem;
  margin-left: 2rem;
  animation: bounce-y-3 3s ease-in-out infinite alternate-reverse;
  animation-delay: .3s;
}

.p-index-hero__head ._hexagon_03 {
  position: absolute;
  right: -20%;
  bottom: 0;
  animation: bounce-y-3 3s ease-in-out infinite alternate-reverse;
  animation-delay: .5s;
}

@media screen and (max-width: 960px) {
  .p-index-hero__head ._hexagon_03 {
    top: 30%;
    right: 9.33333%;
    bottom: auto;
    left: auto;
  }
}

.p-index-hero__head ._hexagon_03 > img {
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
}

@media screen and (max-width: 960px) {
  .p-index-hero__head ._hexagon_03 > img {
    width: 32px;
    height: 32px;
  }
}

.p-index-hero__title {
  position: relative;
  z-index: 1;
  grid-area: title;
  width: 100%;
  max-width: 414px;
  padding-top: 60px;
  line-height: 1;
}

@media screen and (max-width: 960px) {
  .p-index-hero__title {
    max-width: 72.39437%;

    padding-block: 12px;
  }
  .p-index-hero__title img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.p-index-hero__lead {
  grid-area: lead;
  margin-bottom: 30px;
  color: var(--key-color);
  white-space: nowrap;
  font-size: calc(22px + var(--slope-1px) * 6);
  font-family: var(--en-font-family);
}

.p-index-hero__photo {
  position: relative;
  grid-area: photo;
  width: 570px;
}

@media screen and (max-width: 960px) {
  .p-index-hero__photo {
    width: 100%;
  }
}

.p-index-hero__photo li {
  overflow: hidden;
}

.p-index-hero__photo li img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-index-hero__photo::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -12px;
  display: block;
  width: calc(100% + 12px + 28px);
  height: calc(100% + 8px + 32px);
  aspect-ratio: 1;
  background-image: url(../img/index-slide-bg.webp);
  background-size: contain;
  background-repeat: no-repeat;
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
  animation-delay: .3s;
}

@media screen and (max-width: 960px) {
  .p-index-hero__photo::before {
    top: -3px;
    left: -8px;
    width: calc(100% + 8px + 10px);
    height: calc(100% + 3px + 12px);
  }
}

.p-index-hero__character {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  grid-area: character;
  padding-left: 38px;
  text-align: center;

  --animation-duration: 3s;
  --animation-delay: 1s;
}

@media screen and (max-width: 960px) {
  .p-index-hero__character {
    padding-left: 0;
  }
}

.p-index-hero__character > img {
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);
}

.p-index-hero__control {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--inner-width);
  margin-top: 2.5rem;
}

@media screen and (max-width: 960px) {
  .p-index-hero__control {
    justify-content: flex-end;
    margin-top: 5%;

    padding-inline: var(--inner-padding);
  }
}

/* p-index-hero__body
=============================== */
.p-index-hero__body {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 72px;
  padding-bottom: 45px;
  color: #4d4d4d;
  text-align: center;

  padding-inline: var(--inner-padding);
  margin-inline: auto;
}

.p-index-hero__body::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  z-index: 0;
  z-index: -1;
  width: var(--inner-width-px);
  height: var(--inner-width-px);
  max-width: 992px;
  max-height: 960px;
  aspect-ratio: 1;
  background-image: url(../img/index-hero-bg.svg);
  background-position: top center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(-50%);
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;

  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .p-index-hero__body::before {
    width: 100px;
    height: 100px;
  }
}

.p-index-hero__message {
  letter-spacing: .1em;
  font-size: 2.2rem;
}

@media screen and (max-width: 960px) {
  .p-index-hero__message {
    font-size: 1.6rem;
  }
}

.p-index-hero__message-emphasis {
  margin-top: 2.2rem;
  margin-bottom: 3.6rem;
  letter-spacing: .1em;
  font-weight: 700;
  font-size: 3.2rem;
}

@media screen and (max-width: 960px) {
  .p-index-hero__message-emphasis {
    margin-top: 3.2rem;
    margin-bottom: 2.8rem;
    border-radius: 14px;
    background: var(--white);
    font-size: 2.4rem;

    padding-block: 1.08333em;
    padding-inline: 1em;
  }
}

/* p-index-hero__foot
=============================== */
.p-index-hero__foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  pointer-events: none;

  margin-inline: auto;
}

.p-index-hero__foot img {
  width: 100%;
  max-width: 800px;
}

.p-index-hero__wave {
  position: absolute;
  bottom: -1px;
  display: flex;
  width: 100%;
  height: 200px;
}

.p-index-hero__wave img,
.p-index-hero__wave svg {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 960px) {
  .p-index-hero__wave {
    height: 100px;
  }
}

@media screen and (max-width: 560px) {
  .p-index-hero__wave {
    height: 60px;
  }
}

/* p-index-company
=============================== */
.p-index-company {
  position: relative;
  background: var(--blue);
}

.p-index-company__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "head image" "body image";
  max-width: calc(1044px + var(--inner-padding)*2);
  padding-top: calc(1.5 * var(--vh));
  padding-left: var(--inner-padding);
  -moz-column-gap: 5%;
       column-gap: 5%;

  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .p-index-company__inner {
    z-index: 2;
    grid-template-columns: 56% 42.66667%;
    grid-template-areas: "head ." "image image" "lead lead" "body body";
    row-gap: 36px;
    max-width: 100%;
    -moz-column-gap: 1.33333%;
         column-gap: 1.33333%;

    padding-inline: var(--inner-padding);
  }
}

.p-index-company__character {
  position: absolute;
  top: 0;
  left: 6rem;

  --animation-duration: 4s;
  --animation-delay: 2s;
}

@media screen and (max-width: 960px) {
  .p-index-company__character {
    width: 111.6px;
    height: 87.6px;
    transform: translateY(-50%);
  }
  .p-index-company__character img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

@media screen and (max-width: 560px) {
  .p-index-company__character {
    left: 5%;
  }
}

.p-index-company__character > img {
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);
}

.p-index-company__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-area: head;
  max-width: calc(250px + 100px * 2);
  margin-right: auto;
  margin-left: 0;

  padding-inline: 100px;
  padding-block: 90px;
}

@media screen and (max-width: 960px) {
  .p-index-company__head {
    width: 100%;

    padding-block: 0;
    padding-inline: 0;
  }
}

.p-index-company__head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  background-image: url(../img/index-company-bg.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 960px) {
  .p-index-company__head::before {
    content: none;
  }
}

.p-index-company__head::after {
  content: "";
  position: absolute;
  bottom: 2.5%;
  left: 2.5%;
  z-index: -2;
  width: 100%;
  aspect-ratio: 1;
  background-image: url(../img/index-company-pattern.webp);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 960px) {
  .p-index-company__head::after {
    content: none;
  }
}

@media screen and (max-width: 960px) {
  .p-index-company__head .p-index-section-title {
    margin-bottom: 0;
  }
  .p-index-company__head .p-index-section-title::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1;
    background-image: url(../img/index-company-bg.svg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .p-index-company__head .p-index-section-title::after {
    content: "";
    position: absolute;
    bottom: 2.5%;
    left: 2.5%;
    z-index: -2;
    width: 100%;
    aspect-ratio: 1;
    background-image: url(../img/index-company-pattern.webp);
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

.p-index-company .p-index-section-lead {
  z-index: 2;
}

@media screen and (max-width: 960px) {
  .p-index-company .p-index-section-lead {
    grid-area: lead;
    text-align: left;

    inline-size: -moz-fit-content;

    inline-size: fit-content;
    margin-inline: auto;
  }
}

.p-index-company__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  grid-area: body;
  gap: 2rem 10px;
  width: 100%;

  padding-inline: var(--inner-padding);
}

@media screen and (min-width: 961px) {
  .p-index-company__body {
    margin-top: 3.6rem;
  }
}

@media screen and (max-width: 960px) {
  .p-index-company__body {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 3.6rem;
  }
}

@media screen and (max-width: 560px) {
  .p-index-company__body {
    flex-direction: column;
  }
}

.p-index-company__image {
  position: relative;
  grid-area: image;
  padding-right: 4rem;
}

@media screen and (max-width: 960px) {
  .p-index-company__image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 0;
  }
}

.p-index-company__image__02 {
  position: absolute;
  right: 0;
  width: 100%;
  max-width: 403px;
  margin-top: -4rem;
  border-radius: 1.8rem;
}

@media screen and (max-width: 960px) {
  .p-index-company__image__02 {
    position: relative;
    margin-top: 1.5rem;
  }
}

.p-index-company__movie {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 1.8rem;
}

.p-index-company__movie iframe {
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

/* p-index-interview
=============================== */
.p-index-interview {
  position: relative;
  background: var(--pink);
}

.p-index-interview::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  z-index: 1;
  display: inline-block;
  width: 1000px;
  height: 30px;
  background: radial-gradient(circle farthest-side, #fff, #fff 30%, transparent 30%, transparent);
  background-size: 30px;
  transform-origin: center;

  rotate: 45deg;
  translate: -50% 0;
}

@media screen and (max-width: 960px) {
  .p-index-interview::before {
    top: -40%;
    width: min(180vh, 1200px);

    rotate: 80deg;
  }
}

@media screen and (max-width: 560px) {
  .p-index-interview::before {
    top: -40%;
    width: min(180vh, 1200px);

    rotate: 80deg;
  }
}

.p-index-interview::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  left: 0;
  z-index: 1;
  display: block;
  width: 92px;
  height: 92px;
  aspect-ratio: 1;
  margin: auto;
  background: url(../img/kamekoro-down-01.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  --animation-duration: 3s;
  --animation-delay: 1s;
}

@media screen and (max-width: 1366px) {
  .p-index-interview::after {
    top: -20.5%;
    right: -13%;
  }
}

@media screen and (max-width: 960px) {
  .p-index-interview::after {
    content: none;
  }
}

.p-index-interview__wave {
  position: absolute;
  top: 0;
  z-index: 0;
  z-index: 0;
  width: 100%;
  background: var(--blue);
}

.p-index-interview__inner {
  display: grid;
  grid-template-columns: 30% 30% auto;
  max-width: calc(1044px + var(--inner-padding)*2);
  padding-top: calc(3 * var(--vh));
  padding-bottom: 6rem;

  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .p-index-interview__inner {
    grid-template-rows: auto auto auto 1fr 100px;
    grid-template-columns: auto 54.66667%;
    grid-template-areas: ". head" "lead lead" ". ." "body body" ". .";
    padding-bottom: 0;
  }
  .p-index-interview__inner::before {
    content: "";
    position: relative;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    grid-column: 1/2;
    grid-row: 1/2;
    width: 130px;
    aspect-ratio: 1;
    margin: auto;
    background: url(../img/kamekoro-foot.png);
    background-size: contain;
    background-repeat: no-repeat;
    animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

    --animation-duration: 3s;
    --animation-delay: 1s;
  }
}

.p-index-interview__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  max-width: calc(250px + 100px * 2);
  margin-right: 0;
  margin-left: auto;

  padding-inline: 100px;
  padding-block: 90px;
}

@media screen and (max-width: 960px) {
  .p-index-interview__head {
    grid-column: head;
    width: 100%;

    padding-block: 0;
    padding-inline: 0;
  }
}

.p-index-interview__head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  background-image: url(../img/index-interview-bg.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 960px) {
  .p-index-interview__head::before {
    content: none;
  }
}

.p-index-interview__head::after {
  content: "";
  position: absolute;
  top: -2.5%;
  left: -5%;
  z-index: -2;
  width: 105%;
  aspect-ratio: 1;
  background-image: url(../img/index-interview-pattern.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
  animation-delay: .3s;
}

@media screen and (max-width: 960px) {
  .p-index-interview__head::after {
    content: none;
  }
}

@media screen and (max-width: 960px) {
  .p-index-interview__head .p-index-section-title::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1;
    background-image: url(../img/index-interview-bg.svg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .p-index-interview__head .p-index-section-title::after {
    content: "";
    position: absolute;
    top: -2.5%;
    left: -5%;
    z-index: -2;
    width: 105%;
    aspect-ratio: 1;
    background-image: url(../img/index-interview-pattern.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
    animation-delay: .3s;
  }
}

.p-index-interview .p-index-section-lead {
  z-index: 2;
}

@media screen and (max-width: 960px) {
  .p-index-interview .p-index-section-lead {
    grid-area: lead;
    grid-area: lead;
    text-align: left;

    padding-inline: var(--inner-padding);
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    margin-inline: auto;
  }
}

.p-index-interview__body {
  position: absolute;
  bottom: 20rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: calc(1044px + var(--inner-padding)*2);
  padding-bottom: 2rem;

  padding-inline: calc(var(--inner-padding) * 2);
}

@media screen and (max-width: 960px) {
  .p-index-interview__body {
    position: relative;
    bottom: 0;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    grid-area: body;
  }
}

.p-index-interview__image {
  z-index: 0;
}

@media screen and (min-width: 961px) {
  .p-index-interview__image {
    position: absolute;
    bottom: 0;
    left: 0;
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    width: 100%;
    max-width: 100%;
    padding-left: calc(var(--inner-padding) * 2);
  }
}

@media screen and (max-width: 960px) {
  .p-index-interview__image {
    position: relative;
    grid-column: 1/3;
    grid-row: 3/6;
  }
}

.p-index-interview__image img {
  max-width: 60%;
}

@media screen and (max-width: 960px) {
  .p-index-interview__image img {
    max-width: 90%;

    margin-inline: auto;
  }
}

@media screen and (max-width: 960px) {
  .p-index-interview__image::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 60%;
    z-index: 1;
    z-index: -1;
    display: inline-block;
    width: 600px;
    height: 30px;
    background: radial-gradient(circle farthest-side, #fff, #fff 30%, transparent 30%, transparent);
    background-size: 30px;
    transform-origin: center;

    rotate: -75deg;
    translate: -50% 0;
  }
}

.p-index-interview__foot {
  bottom: -1px;
  z-index: 0;
  width: 100%;
}

@media screen and (min-width: 961px) {
  .p-index-interview__foot {
    position: relative;
  }
}

@media screen and (max-width: 960px) {
  .p-index-interview__foot {
    position: absolute;
    height: 100px;
  }
}

.p-index-interview__foot img,
.p-index-interview__foot svg {
  width: 100%;
  height: 100%;
}

/* p-index-walfare
=============================== */
.p-index-walfare {
  position: relative;
  background: var(--light-yellow);
}

.p-index-walfare::before {
  content: "";
  position: absolute;
  top: 0;
  right: 55%;
  z-index: 1;
  display: inline-block;
  width: 750px;
  height: 30px;
  background: radial-gradient(circle farthest-side, #fff, #fff 30%, transparent 30%, transparent);
  background-size: 30px;
  transform-origin: center;

  rotate: -60deg;
  translate: 72.5% 0;
}

@media screen and (max-width: 960px) {
  .p-index-walfare::before {
    right: 60%;
    width: 90px;
  }
}

@media screen and (max-width: 560px) {
  .p-index-walfare::before {
    right: 80%;
    width: 90px;
  }
}

.p-index-walfare__inner {
  position: relative;
  max-width: calc(1044px + var(--inner-padding)*2);
  padding-bottom: 6.6rem;

  margin-inline: auto;
  padding-inline: var(--inner-padding);
}

@media screen and (max-width: 960px) {
  .p-index-walfare__inner {
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-template-areas: "head image" "body body";
    row-gap: 36px;
    max-width: 100%;
    -moz-column-gap: 1.33333%;
         column-gap: 1.33333%;

    padding-inline: var(--inner-padding);
  }
}

.p-index-walfare__inner::after {
  content: "";
  position: absolute;
  top: -15%;
  right: 40%;
  z-index: 1;
  display: block;
  width: 92px;
  height: 92px;
  aspect-ratio: 1;
  margin: auto;
  background: url(../img/kamekoro-down-02.png);
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: center;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  --animation-duration: 3s;
  --animation-delay: 1s;
}

@media screen and (max-width: 1366px) {
  .p-index-walfare__inner::after {
    top: -17%;
    right: 37%;
  }
}

@media screen and (max-width: 1206px) {
  .p-index-walfare__inner::after {
    top: -17%;
    right: 37%;
  }
}

@media screen and (max-width: 960px) {
  .p-index-walfare__inner::after {
    content: none;
  }
}

.p-index-walfare__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: calc(250px + 100px * 2);

  margin-inline: auto;
  padding-inline: 100px;
  padding-block: 90px;
}

@media screen and (max-width: 960px) {
  .p-index-walfare__head {
    grid-area: head;
    width: 100%;
    height: 100%;

    padding-block: 0;
    padding-inline: 0;
  }
}

.p-index-walfare__head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  background-image: url(../img/index-welfare-bg.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 960px) {
  .p-index-walfare__head::before {
    content: none;
  }
}

.p-index-walfare__head::after {
  content: "";
  position: absolute;
  top: 4%;
  left: .5%;
  z-index: -2;
  width: 105%;
  aspect-ratio: 1;
  background-image: url(../img/index-welfare-pattern.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
  animation-delay: .3s;
}

@media screen and (max-width: 960px) {
  .p-index-walfare__head::after {
    content: none;
  }
}

@media screen and (max-width: 960px) {
  .p-index-walfare .p-index-section-title {
    margin-bottom: 0;
  }
  .p-index-walfare .p-index-section-title::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1;
    background-image: url(../img/index-welfare-bg.svg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .p-index-walfare .p-index-section-title::after {
    content: "";
    position: absolute;
    top: 4%;
    left: .5%;
    z-index: -2;
    width: 105%;
    aspect-ratio: 1;
    background-image: url(../img/index-welfare-pattern.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    animation: zoom-in-out 3s ease-in-out infinite alternate-reverse;
    animation-delay: .3s;
  }
}

.p-index-walfare .p-index-section-lead {
  text-align: left;
}

@media screen and (max-width: 960px) {
  .p-index-walfare .p-index-section-lead {
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 2.5rem;

    margin-inline: auto;
  }
}

.p-index-walfare__character {
  position: absolute;
  top: -10%;
  right: 7.5%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 145px;

  translate: -50% -100%;
  --animation-duration: 4s;
  --animation-delay: 2s;
  --animation-duration: 4s;
  --animation-delay: 2s;
}

@media screen and (max-width: 960px) {
  .p-index-walfare__character {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    justify-content: center;
    align-items: center;
    grid-area: image;

    translate: 0 0;
  }
}

.p-index-walfare__character > img {
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);
}

.p-index-walfare__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.6rem;
  width: 100%;

  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .p-index-walfare__button {
    gap: 25px 10px;
  }
}

@media screen and (max-width: 560px) {
  .p-index-walfare__button {
    flex-direction: column;
  }
  .p-index-walfare__button img,
  .p-index-walfare__button picture {
    width: 100%;
  }
}

.p-index-walfare__body {
  position: relative;
  z-index: 3;
  width: 100%;
}

@media screen and (max-width: 960px) {
  .p-index-walfare__body {
    grid-area: body;
  }
}

@media screen and (min-width: 961px) {
  .p-index-walfare__body {
    margin-top: 6rem;
  }
}

/* ============================================================= *

Company

* ============================================================= */
/* ============================================================= *

company

* ============================================================= */
.p-company-philosophy {
  display: flex;
  flex-direction: column;
  gap: calc(60px + var(--slope-1px) * 20);
}

.p-company-philosophy__item {
  display: flex;
  flex-direction: column;
  gap: calc(30px + var(--slope-1px) * 20);
}

.p-company-philosophy__head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
}

.p-company-philosophy__head span {
  font-weight: 500;
  font-size: 32px;
  line-height: 140%;
  /* 44.8px */
}

@media screen and (max-width: 960px) {
  .p-company-philosophy__head span {
    font-weight: 500;
    font-size: 22px;
    line-height: 140%;
    /* 30.8px */
  }
}

@media screen and (max-width: 960px) {
  .p-company-philosophy__head {
    gap: 20px;
  }
}

.p-company-philosophy__head::before, .p-company-philosophy__head::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-self: center;
  width: 100%;
  height: 20px;
  background: radial-gradient(circle farthest-side, var(--_bg-color), var(--_bg-color) 40%, transparent 40%, transparent);
  background-size: 20px;
  transform-origin: center;
}

/* ============================================================= *

message

* ============================================================= */
.p-message {
  padding-top: calc(20px + var(--slope-1px) * 10);
}

.p-message-frame {
  display: flex;
  flex-direction: column;
  gap: calc(30px + var(--slope-1px) * 10);
}

.p-message-frame__foot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 1em;
  font-weight: 400;
  font-size: calc(16px + var(--slope-1px) * 6);
  line-height: 140%;
}

@media screen and (max-width: 960px) {
  .p-message-frame__foot {
    text-align: right;
  }
  .p-message-frame__foot span {
    display: block;
  }
}

.p-message-sign {
  width: 100%;
  max-width: calc(148px + var(--slope-1px) * 72);
  margin-left: auto;
}

/* ============================================================= *

infographics

* ============================================================= */
.p-infographics {
  padding-top: calc(10px + var(--slope-1px) * 20);
}

.p-infographics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: 10px 11px;
  max-width: 970px;

  margin-inline: auto;
  place-content: center;
}

.p-infographics__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================================================= *

sustainability

* ============================================================= */
.p-sdgs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(5px + var(--slope-1px) * 5);
  margin-bottom: calc(30px + var(--slope-1px) * 10);
}

.p-sdgs-list > * {
  width: calc(35px + var(--slope-1px) * 15);
  height: calc(35px + var(--slope-1px) * 15);
}

@media screen and (max-width: 960px) {
  .p-sdgs-list {
    max-width: 70.42254%;

    margin-inline: auto;
  }
}

.p-sdgs-frame {
  display: flex;
  flex-direction: column;
  gap: calc(20px + var(--slope-1px) * 10);
  margin-top: 30px;
  padding: calc(30px + var(--slope-1px) * 20);
  border: 5px solid #7fb1b2;
}

.p-sdgs-frame__head {
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * 6);
  line-height: 160%;
  /* 35.2px */

  margin-block: var(--leading-trim);
}

.p-sdgs-frame__body {
  margin-block: var(--leading-trim);
}

.p-sdgs-frame-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px calc(15px + var(--slope-1px) * 5);
}

@media screen and (max-width: 960px) {
  .p-sdgs-frame-grid {
    grid-template-columns: 100%;
  }
}

.p-sdgs-frame-grid__item {
  display: flex;
  flex-direction: column;
  gap: calc(15px + var(--slope-1px) * 5);
  padding: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .5);
  font-size: calc(14px + var(--slope-1px) * 4);
}

.p-sdgs-frame-grid__head {
  font-weight: 500;
  line-height: 1.6;

  margin-block: var(--leading-trim);
}

.p-sdgs-frame-grid__body {
  margin-top: var(--leading-trim);
  line-height: 1.4;
}

.p-sdgs-action-grid {
  display: flex;
  gap: calc(20px + var(--slope-1px) * 10);
  margin-top: calc(30px + var(--slope-1px) * 10);
}

@media screen and (max-width: 960px) {
  .p-sdgs-action-grid {
    flex-direction: column;
  }
}

.p-sdgs-action-grid._x1 {
  position: relative;
}

.p-sdgs-action-grid._x1::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(30px + var(--slope-1px) * 70);
  left: auto;
  z-index: 1;
  display: block;
  width: calc(40px + var(--slope-1px) * 38);
  height: calc(20px + var(--slope-1px) * 20);
  aspect-ratio: 1;
  margin: auto;
  background-image: url(../img/kamekoro-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  scale: -1 1;
  translate: 0 -100%;
  --animation-duration: 3s;
  --animation-delay: 1s;
}

.p-sdgs-action-grid._x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 960px) {
  .p-sdgs-action-grid._x2 {
    grid-template-columns: 100%;
  }
}

.p-sdgs-action__item {
  display: flex;
  flex-direction: column;
  gap: calc(15px + var(--slope-1px) * 5);
  padding: calc(20px + var(--slope-1px) * 10) 25px;
  border-radius: 20px;
  background: var(--white);
}

.p-sdgs-action__head {
  /* 30.8px */
  text-align: center;
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px) * 6);
  line-height: 140%;

  margin-block: var(--leading-trim);
}

.p-sdgs-action__body {
  margin-top: var(--leading-trim);
  font-size: calc(14px + var(--slope-1px) * 4);
  line-height: 140%;
  /* 19.6px */
}

.p-sdgs-action__body dl {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: var(--leading-trim);

  margin-inline: auto;
}

.p-sdgs-action__body dl + dl {
  margin-top: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 5));
}

.p-sdgs-action__body dl dd {
  display: inline-flex;
  gap: calc(10px + var(--slope-1px) * 5);
}

.p-sdgs-action__body dl dd em {
  position: relative;
  color: var(--key-color);
  font-weight: 700;
}

.p-sdgs-action__body dl dd em::before {
  content: "";
  position: relative;
  display: inline-flex;
  width: 12px;
  height: 14px;
  margin-right: calc(10px + var(--slope-1px) * 5);
  background: var(--yellow);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.p-sdgs-action__image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(15px + var(--slope-1px) * 10);
  width: 100%;

  margin-inline: auto;
}

@media screen and (max-width: 960px) {
  .p-sdgs-action__image {
    flex-direction: column;
  }
}

.c-inner-section__body > .p-sdgs-action__image {
  margin-top: calc(30px + var(--slope-1px) * 10);
}

.p-sdgs-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(22px + var(--slope-1px) * 13);
  width: calc(100% - (calc(6px + var(--slope-1px) * 4) * 2));
  margin-top: calc(30px + var(--slope-1px) * 10);
  margin-bottom: calc(6px + var(--slope-1px) * 4);
  outline: calc(6px + var(--slope-1px) * 4) solid var(--white);
  border: 2px solid var(--key-color);
  border-radius: 20px;
  background: var(--white);

  padding-block: calc(20px + var(--slope-1px) * 20) calc(40px + var(--slope-1px) * 15);
  padding-inline: calc(15px + var(--slope-1px) * 25);
  margin-inline: auto;
}

.p-sdgs-summary::after {
  content: "";
  position: absolute;
  right: calc(30px + var(--slope-1px) * 70);
  bottom: 0;
  left: auto;
  z-index: 1;
  display: block;
  width: calc(54px + var(--slope-1px) * 36);
  height: calc(28px + var(--slope-1px) * 18);
  aspect-ratio: 1;
  margin: auto;
  background-image: url(../img/kamekoro-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--animation-duration) var(--animation-kame) infinite var(--animation-delay);

  scale: -1 1;
  --animation-duration: 3s;
  --animation-delay: 1s;
}

.p-sdgs-summary__head {
  color: var(--key-color);
  text-align: center;
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * 12);
  line-height: 160%;
  /* 44.8px */
}

.p-sdgs-summary__body {
  display: flex;
  align-items: center;
  justify-items: center;
  width: -moz-fit-content;
  width: fit-content;

  margin-inline: auto;
}

/* ============================================================= *

interview

* ============================================================= */
.p-interview-lead {
  margin-bottom: calc(30px + var(--slope-1px) * 30);
}

/* ============================================================= *

welfare

* ============================================================= */
.p-welfare {
  padding-top: calc(10px + var(--slope-1px) * 20);
}

.p-welfare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: 10px 11px;
  max-width: 970px;

  margin-inline: auto;
  place-content: center;
}

.p-welfare__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================================================= *

training

* ============================================================= */
.p-training-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(30px + var(--slope-1px) * 10);
  margin-bottom: calc(40px + var(--slope-1px) * 60);
}

.p-training-lead__head {
  margin-block: var(--leading-trim);
}

.p-training-lead__body {
  margin-block: var(--leading-trim);
}

.p-training-lead__title {
  color: var(--key-color);
  font-weight: 700;
  font-size: calc(22px + var(--slope-1px) * 6);
  line-height: 160%;
  /* 44.8px */
}

.p-training-cycle {
  position: relative;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 0 calc(12px + var(--slope-1px) * 24);
  margin-bottom: calc(80px + var(--slope-1px) * 70);
}

@media screen and (max-width: 960px) {
  .p-training-cycle {
    grid-template-rows: 1fr auto 1fr;
    gap: calc(21px + var(--slope-1px) * 15);
  }
}

@media screen and (max-width: 560px) {
  .p-training-cycle {
    grid-template-rows: calc(47px + var(--slope-1px) * 83) auto calc(47px + var(--slope-1px) * 83);
  }
}

.p-training-cycle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  grid-column: 1/4;
  grid-row: 1/4;
  box-sizing: content-box;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  max-width: 570px;
  max-height: 570px;
  aspect-ratio: 1;
  margin: auto;
  border: calc(2px + var(--slope-1px) * 6) solid #ddc354;
  border-radius: 50%;
}

@media screen and (max-width: 960px) {
  .p-training-cycle::before {
    width: 58.57143%;
  }
}

.p-training-cycle__center {
  justify-content: center;
  align-items: center;
  grid-column: 2/3;
  grid-row: 2/3;
  margin: auto;
}

.p-training-cycle__item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: calc(47px + var(--slope-1px) * 83);
  border-radius: calc(7.2px + var(--slope-1px) * 12.8);
  background: var(--white);
  text-align: center;
  /* 36px */
  letter-spacing: .518px;
  font-weight: 500;
  font-style: normal;
  font-size: 3.6rem;
  line-height: 100%;
}

@media screen and (max-width: 960px) {
  .p-training-cycle__item {
    font-size: calc(12px + var(--slope-1px) * 12);
  }
}

.p-training-cycle__item::before {
  content: "";
  position: absolute;
  inset: calc(2.8px + var(--slope-1px) * 7.2);
  z-index: 1;
  display: block;
  width: calc(100% - (calc(2.8px + var(--slope-1px) * 7.2) * 2));
  height: calc(100% - (calc(2.8px + var(--slope-1px) * 7.2) * 2));
  border: calc(.72px + var(--slope-1px) * 1.28) solid #ddc354;
  border-radius: calc(7.2px + var(--slope-1px) * 2.8);
  pointer-events: none;
}

.p-training-cycle__item._top {
  grid-column: 2/3;
  grid-row: 1/2;
  transform: translateY(-40%);
}

@media screen and (max-width: 960px) {
  .p-training-cycle__item._top {
    transform: translateY(0%);
  }
}

.p-training-cycle__item._top:after {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 40%;
  height: calc(9px + var(--slope-1px) * 16);
  margin: auto;
  background: var(--white);
  transform: translateY(100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.p-training-cycle__item._right {
  grid-column: 3/4;
  grid-row: 2/3;
}

.p-training-cycle__item._right:after {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: calc(9px + var(--slope-1px) * 16);
  height: 40%;
  margin: auto;
  background: var(--white);
  transform: translateX(-100%);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.p-training-cycle__item._bottom {
  grid-column: 2/3;
  grid-row: 3/4;
  transform: translateY(40%);
}

@media screen and (max-width: 960px) {
  .p-training-cycle__item._bottom {
    transform: translateY(0%);
  }
}

.p-training-cycle__item._bottom:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 1;
  display: block;
  width: 40%;
  height: calc(9px + var(--slope-1px) * 16);
  margin: auto;
  background: var(--white);
  transform: translateY(-100%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.p-training-cycle__item._left {
  grid-column: 1/2;
  grid-row: 2/3;
}

.p-training-cycle__item._left:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 1;
  display: block;
  width: calc(9px + var(--slope-1px) * 16);
  height: 40%;
  margin: auto;
  background: var(--white);
  transform: translateX(100%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.p-training-cycle__image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-training-cycle__image._top-left {
  align-self: flex-end;
  grid-column: 1/2;
  grid-row: 1/2;
  justify-self: flex-end;
}

@media screen and (max-width: 960px) {
  .p-training-cycle__image._top-left {
    transform: translateY(25%);
  }
}

@media screen and (max-width: 560px) {
  .p-training-cycle__image._top-left {
    transform: translateY(50%);
  }
}

.p-training-cycle__image._top-right {
  align-self: flex-end;
  grid-column: 3/4;
  grid-row: 1/2;
  justify-self: flex-start;
}

@media screen and (max-width: 960px) {
  .p-training-cycle__image._top-right {
    transform: translateY(25%);
  }
}

@media screen and (max-width: 560px) {
  .p-training-cycle__image._top-right {
    transform: translateY(50%);
  }
}

.p-training-cycle__image._bottom-right {
  align-self: flex-start;
  grid-column: 3/4;
  grid-row: 3/4;
  justify-self: flex-start;
}

@media screen and (max-width: 960px) {
  .p-training-cycle__image._bottom-right {
    transform: translateY(-25%);
  }
}

@media screen and (max-width: 560px) {
  .p-training-cycle__image._bottom-right {
    transform: translateY(-50%);
  }
}

.p-training-cycle__image._bottom-left {
  align-self: flex-start;
  grid-column: 1/2;
  grid-row: 3/4;
  justify-self: flex-end;
}

@media screen and (max-width: 960px) {
  .p-training-cycle__image._bottom-left {
    transform: translateY(-25%);
  }
}

@media screen and (max-width: 560px) {
  .p-training-cycle__image._bottom-left {
    transform: translateY(-50%);
  }
}

.p-training-cycle__image img {
  width: 100%;
  height: 100%;
  max-width: 228px;
  max-height: 133px;
  border-radius: 20px;
}

.p-training-flow {
  display: grid;
  grid-template-rows: auto 1fr calc(190px + 20px + 50px);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: calc(80px + var(--slope-1px) * 60);
  -moz-column-gap: 10px;
       column-gap: 10px;
}

@media screen and (max-width: 960px) {
  .p-training-flow {
    grid-template-rows: auto 1fr calc(150px + 12px + 35px) auto 1fr calc(150px + 12px + 35px);
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
    -moz-column-gap: 9px;
         column-gap: 9px;
  }
}

.p-training-flow-column {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 100%;
  grid-row: span 3;
  row-gap: 0;
  -moz-column-gap: var(--_column-gap);
       column-gap: var(--_column-gap);

  --_column-gap:46px;
  --_row-gap:38px;
}

@media screen and (max-width: 960px) {
  .p-training-flow-column {
    grid-template-columns: 100%;
  }
}

.p-training-flow-column__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-training-flow-column__head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 4px;
  border-radius: 10px 10px 0 0;
  background: var(--light-blue);
}

.p-training-flow-column__head span {
  color: var(--white);
  text-align: center;
  letter-spacing: 1.04px;
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 8);
  line-height: 1;
}

.p-training-flow-column__head:after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 1px;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: calc(21px + var(--slope-1px) * 7.75);
  margin: auto;
  background: var(--light-blue);
  transform: translateY(100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.p-training-flow-column__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px 24px 16px 10px;
  background: var(--white);
}

@media screen and (max-width: 960px) {
  .p-training-flow-column__body {
    padding: 40px 15px 10px 12px;
  }
}

.p-training-flow-column__body:after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 1px;
  left: 0;
  display: block;
  width: 100%;
  height: calc(21px + var(--slope-1px) * 7.75);
  margin: auto;
  background: var(--white);
  transform: translateY(100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.p-training-flow-column__foot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-items: center;
  margin-top: calc(35px + var(--slope-1px) * 15);
  padding: 25px;
  border-radius: 20px;
  background: var(--white);
  color: var(--point-color);
  text-align: center;
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * 4);
  line-height: 1.4;
}

@media screen and (max-width: 960px) {
  .p-training-flow-column__foot {
    padding: 39px 10px;
  }
}

.p-training-flow-column__foot::before {
  content: "";
  position: absolute;
  inset: calc(6px + var(--slope-1px) * 4);
  z-index: 1;
  display: block;
  width: calc(100% - (calc(6px + var(--slope-1px) * 4) * 2));
  height: calc(100% - (calc(6px + var(--slope-1px) * 4) * 2));
  border: 2px solid var(--point-color);
  border-radius: 10px;
  pointer-events: none;
}

.p-training-flow-column__foot:after {
  content: "";
  position: absolute;
  right: calc(27px + var(--slope-1px) * 11);
  bottom: 10px;
  z-index: 1;
  display: block;
  align-self: center;
  width: calc(35px + var(--slope-1px) * 25);
  height: calc(18px + var(--slope-1px) * 13);
  aspect-ratio: 1;
  margin: auto;
  background: url(../img/kamekoro-header.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation: kame var(--_animation-duration) var(--animation-kame) infinite var(--_animation-delay);

  scale: -1 1;
}

.p-training-flow-column:nth-child(1) .p-training-flow-column__foot:after {
  --_animation-duration: 3.5s;
  --_animation-delay:2.5s;
}

.p-training-flow-column:nth-child(2) .p-training-flow-column__foot:after {
  --_animation-duration: 2.5s;
  --_animation-delay:1.5s;
}

.p-training-flow-column:nth-child(3) .p-training-flow-column__foot:after {
  --_animation-duration: 3s;
  --_animation-delay:1s;
}

.p-training-flow-column:nth-child(4) .p-training-flow-column__foot:after {
  --_animation-duration: 3.25s;
  --_animation-delay:2s;
}

.p-training-flow-column__list {
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px) * 4);
  line-height: 160%;
  /* 35.2px */

  margin-block: var(--leading-trim);
}

.p-training-flow-column__list > li {
  padding-left: 1em;
  text-indent: -1em;
}

.p-training-flow-column__list > li:before {
  content: "\30fb";
  color: var(--light-gray);
  font-weight: 900;

  padding-inline: .25em;
}

.p-training-flow-column__etc {
  width: 100%;
  margin-top: auto;
  /* 22.4px */
  margin-bottom: var(--leading-trim);
  text-align: right;
  font-weight: 500;
  font-size: calc(12px + var(--slope-1px) * 4);
  line-height: 140%;
}

.p-training-section-frame {
  display: flex;
  flex-direction: column;
  gap: calc(20px + var(--slope-1px) * 10);
  margin-top: 20px;
  padding: calc(30px + var(--slope-1px) * 20);
  border: 5px solid #e7c51b;
}

.p-training-section-frame__head {
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * 6);
  line-height: 160%;
  /* 35.2px */

  margin-block: var(--leading-trim);
}

.p-training-section-frame__body {
  margin-block: var(--leading-trim);
}

.p-training-section-link {
  color: var(--point-color);
  font-weight: bold;
}

.p-training-section-link::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1lh;
  background: var(--point-color);
  vertical-align: bottom;

  -webkit-mask-image: var(--icon-eternal);

          mask-image: var(--icon-eternal);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.p-training-section-frame__list {
  line-height: 160%;
  /* 28.8px */
}

.p-training-section-frame__list._column {
  -moz-column-count: 2;
       column-count: 2;
}

@media screen and (max-width: 960px) {
  .p-training-section-frame__list._column {
    -moz-column-count: auto;
         column-count: auto;
  }
}

.p-training-section-frame__list > li {
  padding-left: 1em;
  text-indent: -1em;
}

.p-training-section-frame__list > li:before {
  content: "\30fb";
  color: var(--light-gray);
  font-weight: 900;

  padding-inline: .25em;
}

/* ============================================================= *

job recruitments

* ============================================================= */
body[data-category=requirements] .c-section._bg .c-section__body {
  background-image: var(--_bg-middle), var(--_bg-foot), var(--_bg-foot);
  background-position: right 200px, center left, right bottom calc(30px + var(--slope-1px) * 40);
  background-repeat: no-repeat, no-repeat, no-repeat;
}

body[data-category=requirements] .c-section._bg .c-section__body::before {
  content: none;
}

.p-job-entry-button-container {
  display: flex;
  justify-content: center;
  align-items: center;

  padding-block: calc(20px + var(--slope-1px) * 20);
}

.p-job-entry-button {
  display: inline grid;
  align-items: center;
  grid-template-columns: auto auto auto;
  gap: .25em;
  width: -moz-fit-content;
  width: fit-content;
  outline: none;
  border: none;
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_color);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 28px;
  transition: all .3s var(--animation), color .3s var(--animation);
  will-change: width;
  -moz-appearance: none;
       appearance: none;

  --_arrow-color: var(--point-color);
  inline-size: min(100%, 355px);
  padding-inline: .5em .25em;
  padding-block: .71429em;
}

@media screen and (max-width: 960px) {
  .p-job-entry-button {
    font-size: 21px;

    inline-size: min(100%, 266px);
  }
}

.p-job-entry-button._new-graduate {
  --_bg-color: var(--newgrads-bg-color);
  --_color: var(--newgrads-color);
}

.p-job-entry-button._mid-career {
  --_bg-color: var(--midcareer-bg-color);
  --_color: var(--midcareer-color);
}

.p-job-entry-button._part-time {
  --_bg-color: var(--part-bg-color);
  --_color: var(--part-color);
}

.p-job-entry-button span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  word-break: keep-all;
  line-height: 1;

  margin-block: var(--leading-trim);
}

.p-job-entry-button::before {
  content: '';
}

.p-job-entry-button::after {
  content: "";
  justify-self: center;
  aspect-ratio: 1;
  background: var(--icon-arrow) 50% 50%/contain no-repeat;
  transition: all .2s ease-out;

  inline-size: .96429em;
}

@media screen and (max-width: 960px) {
  .p-job-entry-button {
    padding-inline: .5em;
  }
}

@media (any-hover: hover) {
  .p-job-entry-button:where(:hover) {
    scale: 1.02;
  }
}

/* ============================================================= *

404 not found

* ============================================================= */
/* p-notfound
=============================== */
.p-notfound {
  color: var(--base-color);
  text-align: center;
  line-height: 1.5;
}

.p-notfound svg path {
  fill: currentColor;
}

.p-notfound__image {
  max-width: 300px;
  margin: 0 auto 5rem;
}

@media screen and (max-width: 767px) {
  .p-notfound__image {
    width: 25%;
    max-width: 140px;
  }
}

.p-notfound__head {
  margin-top: -.25em;
  margin-bottom: -.25em;
  font-weight: 300;
  font-size: 1.75em;
}

.p-notfound__body {
  margin-top: .75em;
  margin-bottom: -.25em;
  font-size: 1.25em;
}

.p-notfound__foot {
  margin-top: 3em;
}