@charset "UTF-8";

:root {
  --primary-color: 54, 209, 115;
  /*#36D173*/
  --accent-color: 224, 75, 50;
  /*#E04B32*/
  --text-color: 255, 255, 255;
  /*#FFFFFF*/
  --bg-color: 0, 0, 0;
  /*#000*/
  /*320px-1280px root 10px*/
  --padding-inline: clamp(1.6rem, 0.8rem + 2.5vw, 4rem);
  /* 最小320px → 最大768px の高さ範囲でスケール */
  --min-h: 320;
  --max-h: 1024;
  --base: clamp(14px, calc(14px + 10 * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))), 16px);
}

body.careermap {
  font-size: var(--base);
}

.inview {
  transition-property: opacity;
}

.careermap .main-header {
  position: relative;
}

.content:has(#careermap) {
  font-family: "DotGothic16", sans-serif;
  background-color: rgb(var(--bg-color));
  color: rgb(var(--text-color));
  padding-top: 0;

  /* @media screen and (min-width: 1025px) {
    padding-top: 70px;
  } */
}

#careermap {
  padding-top: 8rem;

  .base {
    /* height: 100dvh; */
    margin-top: 8vh;
    margin-bottom: 8vh;
    padding-top: 8vh;
    padding-bottom: 8vh;
    /* padding-top: 5vh;
    padding-bottom: 5vh; */
    /* border-top: 1px solid rgb(var(--primary-color)); */
    background-color: rgb(var(--bg-color));
  }
}

.font-dot {
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.weight-bold {
  font-weight: bold;
}

.has-primary-color {
  color: rgb(var(--primary-color));
}

.has-accent-color {
  color: rgb(var(--accent-color));
}

.sp-only {
  @media screen and (min-width: 480px) {
    display: none;
  }
}

.pc-only {
  display: none;

  @media screen and (min-width: 1025px) {
    display: block;
  }
}

.ani-blink {
  animation: blink 1.8s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.ani-slideinRight,
.ani-slideinLeft {
  opacity: 0;
}

.inner.is-show .ani-slideinRight {
  animation: slideinRight 0.6s 0.7s ease-out forwards;
}

@keyframes slideinRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.inner.is-show .ani-slideinLeft {
  animation: slideinLeft 0.6s 0.7s ease-out forwards;
}

@keyframes slideinLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ani-reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, clip-path 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 1s;
}

.inner.is-show .ani-reveal {
  transform: translate3d(0, 0, 0);
  animation: reveal 0.7s 0.4s ease-out forwards;
}

@keyframes reveal {
  from {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }

  to {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}



html.is-locked {
  overflow: hidden;
  height: 100vh;
}

/* 縦向きの時に回転を促すメッセージを表示 */
@media (max-width: 1024px) and (orientation: portrait) {
  .rotate-message {
    display: block;
  }

  #careermap,
  #entry {
    opacity: 0;
  }
}

@media (min-width: 1025px),
(orientation: landscape) {
  .rotate-message {
    display: none;
  }

}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.modal-container:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

.modal-closed {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  display: block;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  text-indent: -9999px;

  &::before,
  &::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;
    background: rgb(var(--accent-color));
    position: absolute;
    top: 50%;
    left: 0;
    transition: background 0.3s ease-in-out;
  }

  &::before {
    transform: translateY(-50%) rotate(45deg);
  }

  &::after {
    transform: translateY(-50%) rotate(-45deg);
  }

  &:hover {

    &::before,
    &::after {
      background: rgb(var(--text-color));
    }
  }
}

.caution {
  font-size: 1.4rem;
  text-align: center;
  padding: 4rem 2rem;
  border: 1px solid rgb(var(--accent-color));
  width: 90%;
  max-width: 48rem;
  margin: 8rem auto;
  color: rgb(var(--text-color));
  font-family: "DotGothic16", sans-serif;
  position: relative;

  .ttl {
    width: fit-content;
    font-size: 1.25em;
    color: rgb(var(--accent-color));
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(var(--accent-color));
    margin-inline: auto;
    margin-bottom: 1em;
  }

}

.careermap .base {
  display: grid;
  align-content: center;
}

.careermap .inner {
  max-width: 1280px;
  padding-inline: 1em;
  margin: 0 auto;

  @media screen and (min-width: 600px) {
    padding-inline: 1.5em;
  }

  @media screen and (min-width: 960px) {
    padding-inline: var(--padding-inline);
  }

}


.lead {
  /* font-size: 2.4rem; */
  /*320-1280,vw*/
  /* font-size: clamp(2rem, 1.867rem + 0.417vw, 2.4rem); */
  /* font-size: clamp(2rem, 1.714rem + 0.893vh, 2.4rem); */

  /* フォールバック（古いブラウザ向け） */
  font-size: clamp(18px, 2vh, 24px);

  /* dvh対応ブラウザ向け上書き */
  font-size: clamp(18px,
      calc(18px + (24 - 18) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
      24px);
  text-align: center;

  br.sp {
    @media screen and (min-height: 375px) {
      display: none;
    }
  }
}


.anker {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  margin-inline: auto;
  width: 30%;
  max-width: 17.2rem;
}

.main-ttl {
  /* font-size: 2.4rem; */
  /*320-1280,vw*/
  /* font-size: clamp(2rem, 1.467rem + 1.667vw, 3.6rem); */
  font-size: clamp(20px, 2vh, 36px);
  font-size: clamp(20px,
      calc(20px + (36 - 20) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
      36px);
  color: rgb(var(--primary-color));
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin-bottom: 1em;

  @media screen and (min-width: 960px) {
    margin-bottom: 2em;
  }

  .level {
    display: inline-flex;
    /* height: 6.4rem; */
    /*480-1280*/
    /* height: clamp(4.8rem, 0.48rem + 9vw, 12rem); */
    height: clamp(40px, 2vh, 96px);
    height: clamp(40px,
        calc(40px + (96 - 40) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
        96px);

    max-width: clamp(144px, 2vh, 274px);
    max-width: clamp(144px,
        calc(144px + (274 - 144) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
        274px);

    margin-right: 0.8em;

    /* @media screen and (min-width: 1025px) {
      height: 12rem;
    } */

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .ttl {
    line-height: 1.5;
    display: inline-block;

    span {
      display: inline-block;
      font-size: 1.125em;
      margin-right: 0.125em;

      span {
        font-size: 0.575em;
        margin-left: 0.125em;
        margin-right: 0;
      }
    }
  }
}

.main-ttl.has-accent-color {
  color: rgb(var(--accent-color));
}


.sub-ttl {
  /* font-size: 2rem; */
  /*320-1280,vw*/
  /* font-size: clamp(2rem, 1.867rem + 0.417vw, 2.4rem); */
  /*320-768,vh*/
  /* font-size: clamp(2rem, 1.714rem + 0.893vh, 2.4rem); */
  font-size: clamp(20px, 2vh, 28px);
  font-size: clamp(20px,
      calc(20px + (28 - 20) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
      28px);

  color: rgb(var(--primary-color));
  margin-bottom: 1.5em;
  text-align: left;
  width: 100%;
  /* @media screen and (min-width: 1025px) {
    font-size: 2.4rem;
  } */

  .level {
    display: block;
    width: clamp(240px, 2vh, 300px);
    width: clamp(240px,
        calc(240px + (300 - 240) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
        300px);
    max-height: 30vh;
    margin-bottom: 10vh;

    @media screen and (min-width: 1025px) {
      max-width: 40rem;
    }
  }
}

.next {
  /* max-width: 24rem; */
  max-height: 20vh;
  width: clamp(180px, 2vh, 240px);
  width: clamp(180px,
      calc(180px + (240 - 180) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
      240px);

  /* margin-top: 4rem; */
  display: inline-block;

  @media screen and (min-width: 1025px) {
    max-width: 30rem;
    margin-top: 8rem;
  }

  img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

.levelup {
  .flx_box {
    align-items: center;
  }

  .img {
    max-width: 40vh;
    margin-top: 4.8rem;

    @media screen and (min-width: 960px) {
      max-width: 30vh;
    }
  }
}


/* firstvisual */
.firstvisual {
  position: relative;
  padding: 10rem 0 4rem;
  text-align: center;
  min-height: 100vh;
  display: grid;
  place-content: center;
}

.mv-ttl {
  --min-h: 320;
  --max-h: 600;
  /* padding: 8rem 3rem 6rem; */
  padding: 5em 1.5em 3em;
  border: 1px solid rgb(var(--primary-color));
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  max-width: 480px;
  /* max-width: clamp(480px, calc(480px + (960 - 480) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))), 960px); */

  @media screen and (min-width: 640px) {
    max-width: 600px;
  }

  @media screen and (min-width: 768px) {
    max-width: 680px;
  }

  @media screen and (min-width: 960px) {
    max-width: 800px;
  }

  @media screen and (min-width: 1025px) {
    max-width: 960px;
  }

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  span {
    max-width: 76%;
    display: inline-block;
    background: rgb(var(--primary-color));
    padding: 1em 1.5em;
    position: absolute;
    top: -25%;
  }
}

.firstvisual .lead {
  margin-block: 4rem;
}

#careermap .flx_box {
  margin-bottom: 0;
}

.flx_item {
  max-width: 58rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

@media screen and (min-width: 768px) {
  .levelup {
    .flx_box {
      align-items: center;
      justify-content: center;
    }

    .flx_2cols .flx_item:first-of-type {
      min-width: 40%;
      width: fit-content;
    }
  }

}

.img {
  /* max-width: 26rem; */
  /* max-width: clamp(20rem, 18rem + 6.25vw, 26rem); */
  /* max-width: clamp(20rem, 15.714rem + 13.393vh, 26rem); */
  /* margin-bottom: 4.8rem; */
  max-width: 30vh;
  margin-inline: auto;
  margin-bottom: 5vh;

  img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

.task {
  padding: 2vw 1.5vw 2vw 2vw;
  border: 1px solid rgb(var(--primary-color));
  height: 100%;
  /* max-height: 30vh; */
  overflow-y: auto;
  margin-inline: auto;
  width: 100%;

  /* @media screen and (min-width: 569px) {
    width: 80%;
  }

  @media screen and (min-width: 960px) {
    width: 90%;
  }

  @media screen and (min-height: 768px) {
    max-height: inherit;
  } */


}

.task::-webkit-scrollbar {
  width: 12px;
}

.task::-webkit-scrollbar-thumb {
  background: rgb(var(--primary-color));
  /* border-radius: 100vmax; */
  border-right: 5px solid transparent;
  /* 透明なボーダーをつける */
  border-left: 5px solid transparent;
  /* 透明なボーダーをつける */
  background-clip: padding-box;
  /* 背景を切り取る */
}

.task::-webkit-scrollbar-track {
  /* 上下に余白を付ける */
  margin-top: 6px;
  margin-bottom: 6px;
}

.task-ttl {
  /* font-size: 1.8rem; */
  /**/
  /* font-size: clamp(1.8rem, 1.6rem + 0.625vw, 2.4rem); */
  /* フォールバック（古いブラウザ向け） */
  font-size: clamp(13px, 2vh, 24px);
  /* dvh対応ブラウザ向け上書き */
  font-size: clamp(13px,
      calc(13px + (24 - 13) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
      24px);

  color: rgb(var(--text-color));
  margin-bottom: 1em;

  /* @media screen and (min-width: 1025px) {
    font-size: 2.4rem;
  } */
}

.icon {
  padding-left: 1.5em;
  text-indent: -1em;
  /* font-size: 1.4rem; */
  /* font-size: clamp(1.4rem, 1.267rem + 0.417vw, 1.8rem); */
  font-size: clamp(11px, 2vh, 18px);
  font-size: clamp(11px,
      calc(11px + (18 - 11) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
      18px);
  line-height: 1.65;

  +.icon {
    margin-top: 0.5em;
  }

  &::before {
    content: "";
    display: inline-block;
    border-top: 6px solid transparent;
    border-left: 6px solid rgb(var(--text-color));
    border-bottom: 6px solid transparent;
    margin-right: 0.5em;
    animation: blink 1.8s infinite;
  }
}

.icon.dot {
  &::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border: none;
    background: rgb(var(--text-color));
    border-radius: 50%;
    margin-right: 0.5em;
    animation: none;
  }
}

/*no_level_cap*/

.no_level_cap {
  .sub-ttl {
    width: fit-content;
    text-align: center;

    span {
      display: inline-block;
      background-color: rgb(var(--primary-color));
      padding: 0.5em 0.75em;
      margin-inline: auto;
      width: clamp(400px, 2vh, 640px);
      width: clamp(400px,
          calc(400px + (640 - 400) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
          640px);

    }
  }
}

.level_pyramid {
  .main-ttl {
    /* font-size: 3.6rem; */
    /* font-size: clamp(2.4rem, 1.867rem + 1.667vw, 4rem); */
    margin-bottom: 0;
    font-size: clamp(24px, 2vh, 40px);
    font-size: clamp(24px,
        calc(24px + (40 - 24) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
        40px);
    /* @media screen and (min-width: 1025px) {
      font-size: 4rem;
    } */
  }

  .pyramid {
    margin-inline: auto;
    text-align: center;
    height: 62vh;

    /* max-height: clamp(24px,
        calc(24px + (40 - 24) * ((100dvh - (var(--min-h) * 1px)) / (var(--max-h) - var(--min-h)))),
        40px); */
    @media screen and (min-width: 960px) {
      height: 70vh;
    }

    @media screen and (min-width: 1025px) {
      height: auto;
    }

    @media screen and (min-height: 600px) {
      height: 70vh;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.entry.base {
  background-color: rgb(var(--bg-color));
  padding-bottom: 5em;

  /* z-index: 20; */
  @media screen and (min-width: 1025px) {
    padding-bottom: 5em;
  }
}

.entry .sub-ttl {
  /* font-size: 3.6rem; */
  font-size: clamp(2.4rem, 1.867rem + 1.667vw, 4rem);
  text-align: center;
  margin-bottom: 4rem;

  @media screen and (min-width: 1025px) {
    /* font-size: 4rem; */
    margin-bottom: 8rem;
  }

  span {
    font-size: 0.75em;
    margin-bottom: 2.4rem;
  }
}

.entry h3 {
  /* font-size: 3rem; */
  font-size: clamp(2rem, 1.667rem + 1.042vw, 3rem);
  text-align: center;
  margin-bottom: 2.4rem;
}

.has-primary-color .btn a {
  /* font-size: 2.4rem; */
  /*320-1280,vw*/
  /* font-size: clamp(1.8rem, 1.6rem + 0.625vw, 2.4rem); */
  font-size: clamp(1.8rem, 1.371rem + 1.339vh, 2.4rem);
  color: rgb(var(--primary-color));
  border: 2px solid rgb(var(--primary-color));
  letter-spacing: 0.15em;
  padding: 0.8em 2.5em 0.8em 1em;

  &:hover {
    background-color: rgb(var(--primary-color));
    color: rgb(var(--bg-color));

    &::after {
      background-image: url(../img/icon-link.svg);
    }
  }
}

.has-primary-color .btn a::after {
  right: 0.675em;
  background-image: url(../img/careermap/icon-link.svg);
  transition: background-image 0.3s ease-in-out;
}