@charset "UTF-8";

@import url("settings.css");

/* ============================================================================================
      Header
============================================================================================= */
.header {
  position: fixed;
  height: 80px;
  top: 0;
  z-index: 9999999;
  background-color: #fff;
}

.header_inr {
  position: relative;
  height: 100%;
  padding-left: 45px;
  padding-right: 20px;
  z-index: 100;
}

.header_logo {
  transition: opacity 0.3s;
}

.header_logo .header_logo_img,
.gnav_head  .header_logo_img {
  flex-shrink: 0;
  width: calc(1.6rem * 8.25);
}

.header_logo_ttl {
  position: relative;
  flex-shrink: 0;
}

.header_logo_ttl::before {
  content: '';
  position: absolute;
  display: block;
  width: 1px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: -21px;
  margin: auto;
  background-color: var(--color-text);
}

.header_btn a {
  min-width: 140px;
  height: 38px;
}

.header_btn{
  cursor: pointer;
}

.header_btn .header_btn_inr {
  min-width: 140px;
  height: 38px;
}

.header_btn_wrap{
  position: relative;
}

.header_btn_menu{
  position: absolute;
  width: max-content;
  background-color: var(--color-reverse);
  padding: 2.4rem 3.2rem;
  border: 1px solid #eee;
  border-radius: 1rem;
  inset: 0% 0% auto auto;
  top: 8rem;
  box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.15);
  font-family: var(--font-serif);
  line-height: 170%;
}

.header_btn_menu_inr{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.js_header_acd.js_open .header_btn{
  background-color: var(--color-reverse);
  color: var(--color-main);
}

.header_ico_arrow{
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
}

.header_ico_external_link{
  width: 12px;
  height: 12px;
}

.header_btn_menu_link{
  gap: 2.5rem;
}

.header_btn_menu_ttl.g_arrow{
  position: relative;
  padding-right: 0;
}

.header_btn_menu_ttl.g_arrow::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  background-color: var(--color-text-grey);
  -webkit-transform: scale3d(0, 0, 0);
  transform: scale3d(0, 0, 0);
  -webkit-transform-origin: left;
  transform-origin: left;
}

.header_btn_menu_ttl.g_arrow::after {
  /* display: none; */
  width: 1em;
  height: 1em;
  top: auto;
  bottom: 0.25em;
  right: -1em;
  background-image: url("../img/common/arrow_bk.svg");
  background-color: transparent;
  background-size: 0.5em 0.5em;
  background-position: center center;
  border: none;
  transition: background-position 0.3s;
}

.header_btn_menu_ico {
  display: inline-block; /* important for transform */
  transition: transform 0.25s ease;
}
  
/* Navi */
.header_gnav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 10px;
  background-color: rgb(62 99 108 / 30%);
}

.header_gnav_inr {
  width: 100%;
  border-radius: 10px;
  background-color: var(--color-reverse);
  overflow: hidden;
}

.header_gnav_cont {
  position: relative;
  width: 90vw;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-inline: auto;
  padding: 75px 25px;
}

/* .header_gnav_cont::after {
  content: "";
  position: absolute;
  display: block;
  width: 161px;
  height: 167px;
  left: -110px;
  bottom: 13px;
  background-image: url("../img/common/gnavi_img.svg");
} */

.header_gnav .gnav_ttl {
  max-width: 425px;
}

.gnav_head_copy {
  max-width: 250px;
}

.gnav_lst {
  margin-top: 60px;
}

.gnav_itm_head {
  font-size: 2.5rem;
}

.gnav_itm_head__en {
  display: block;
  color: var(--color-green);
  font-size: 1.4rem;
}

.gnav_itm_head + * {
  margin-top: 30px;
}

.gnav_inr_itm + .gnav_inr_itm {
  margin-top: 6px;
}

.gnav_inr_itm a {
  position: relative;
  display: block;
  padding-left: calc(1.6rem * 1);
  font-size: 1.6rem;
  transition: color 0.3s;
}

.gnav_inr_itm a::before {
  content: "・";
  position: absolute;
  left: 0;
}

@media (any-hover: hover) {
  .gnav_inr_itm a:hover {
    color: var(--color-main);
  }
  
  .header_btn_menu_ttl.g_arrow:hover::before {
    -webkit-animation: line 1.5s infinite;
    animation: line 1.5s infinite;
  }

  .header_btn_menu_ttl.g_arrow:hover::after {
    background-position: right center;
  }
  .header_btn_menu_link:hover .header_btn_menu_ico {
    transform: translate(4px, -4px); 
  }
}

@media (min-width: 897px) {
  .header.js_open .header_logo {
    opacity: 0;
    pointer-events: none;
  }

  .gnav_itm_head.g_arrow {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-right: 0;
  }

  .gnav_itm_head.g_arrow::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    background-color: var(--color-text-grey);
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    -webkit-transform-origin: left;
    transform-origin: left;
  }

  .gnav_itm_head.g_arrow::after {
    /* display: none; */
    width: 1em;
    height: 1em;
    top: auto;
    bottom: 0.25em;
    right: -1em;
    background-image: url("../img/common/arrow_bk.svg");
    background-color: transparent;
    background-size: 0.5em 0.5em;
    background-position: center center;
    border: none;
    transition: background-position 0.3s;
  }

  .gnav_itm_head.g_arrow:hover::before {
    -webkit-animation: line 1.5s infinite;
    animation: line 1.5s infinite;
  }

  .gnav_itm_head.g_arrow:hover::after {
    background-position: right center;
  }
}

@media (max-width: 896px) {
  .header {
    height: calc(1.6rem * 3.75);
  }

  .header_inr {
    padding-left: 20px;
  }

  .header_btn_menu_inr{
    gap: 1.2rem;
  }

  .header_btn_menu_link{
    gap: 1.6rem;
  }

  /* Navi */
  .header_gnav {
    height: 100vh;
    padding: 0;
    background-color: var(--color-reverse);
    overflow-y: scroll;
  }

  .header_gnav_inr {
    border-radius: 0;
  }

  .header_gnav_cont {
    max-width: 100%;
    padding: calc(1.6rem * 3.75) 0 0;
  }

  .header_gnav_cont::after {
    display: none;
  }

  .header_gnav .entry_lst {
    padding-bottom: calc(1.6rem * 12.5);
  }

  .gnav_head {
    display: none;
  }

  .gnav_lst {
    margin-top: calc(1.6rem * 1.25);
  }

  .gnav_itm + .gnav_itm {
    border-top: 1px solid var(--color-border);
  }

  .gnav_itm_head {
    position: relative;
    font-size: 1.8rem;
  }

  .gnav_itm_head > * {
    display: block;
    padding: calc(1.6rem * 0.625) 0;
  }

  .gnav_itm_head__en {
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .gnav_itm_head + .gnav_itm_head {
    margin-top: 0;
    border-top: 1px solid var(--color-border);
  }

  .gnav_itm_head.js_acd__sp::before,
  .gnav_itm_head.js_acd__sp::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: var(--color-main);
    transition: rotate 0.3s;
  }

  .gnav_itm_head.js_acd__sp::before {
    width: calc(1.6rem * 0.833);
    height: 1px;
    right: calc(1.6rem * 0.55);
  }

  .gnav_itm_head.js_acd__sp::after {
    width: 1px;
    height: calc(1.6rem * 0.833);
    right: calc(calc(1.6rem * 1) - 1px);
  }

  .gnav_itm_head.js_acd__sp.js_open::before {
    display: none;
  }

  .gnav_itm_head.js_acd__sp.js_open::after {
    rotate: 90deg;
  }

  .gnav_itm_head.g_arrow::after {
    width: calc(1.6rem * 2);
    height: calc(1.6rem * 2);
    background-size: calc(1.6rem * 0.77) calc(1.6rem * 1);
  }

  .gnav_itm_head + .gnav_inr_lst {
    display: none;
    margin-top: calc(1.6rem * 0.625);
    margin-bottom: calc(1.6rem * 1.25);
  }

  .gnav_inr_itm + .gnav_inr_itm {
    margin-top: 6px;
  }

  .gnav_inr_itm a {
    position: relative;
    display: block;
    padding-left: calc(1.6rem * 1);
    font-size: 1.4rem;
  }

  .gnav_inr_itm a::before {
    content: "・";
    position: absolute;
    left: 0;
  }

  .header_btn_menu{
    top: 5rem;
    padding: 1.6rem 2.4rem;
  }
}

@media (max-width: 576px) {
  .header_inr {
    padding-left: calc(1.6rem * 1.25);
    padding-right: calc(1.6rem * 1.25);
  }

  .header_logo .header_logo_img,
  .gnav_head  .header_logo_img {
    width: calc(1.6rem * 6);
  }

  .header_right .g_hamb,
  .header_right .header_btn > * {
    font-size: 1.4rem;
  }
  .header_right .header_btn > * {
    min-width: calc(1.6rem * 6.875);
    height: calc(1.6rem * 2);
    font-size: 1.4rem;
  }
}

/* ============================================================================================
      Footer
============================================================================================= */

/* ENTRY */
.sec_entry_ttl {
  font-size: 4.8rem;
}

.entry_lst {
  gap: 2px;
}

.entry_itm {
  max-width: 100%;
}

.entry_itm .g_card_img img {
  max-height: 500px;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (max-width: 896px) {
  .sec_entry_ttl {
    font-size: 4rem;
  }

  .entry_lst {
    gap: 1px;
  }

  .entry_itm .g_card_img img {
    max-height: 150px;
    -o-object-fit: cover;
    object-fit: cover;
  }
}

/* Footer */
.footer {
  position: relative;
}

.footer_inr {
  position: relative;
  width: 90vw;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin-inline: auto;
}

.footer_cont {
  position: relative;
  margin-top: 60px;
  margin-bottom: 10px;
}

.footer_head .footer_head_logo {
  width: 175px;
  margin: 0;
}

.footer_head .footer_head_copy {
  max-width: 242px;
  margin: 0;
}

.footer_gnav {
  padding-left: 25px;
  padding-right: 25px;
}

.footer_btm_nav_itm {
  position: relative;
  font-size: 1.4rem;
}

.footer_btm_nav_itm + .footer_btm_nav_itm::before {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 45%;
  top: 2px;
  bottom: 0;
  left: -20px;
  margin: auto;
  background-color: var(--color-text);
}

.footer_cp_link {
  position: absolute;
  top: 0;
  right: 0;
}

.footer_copy {
  padding: calc(1.6rem * 0.3125);
  background-color: var(--color-bg);
}

.footer_seal {
  position: absolute;
  max-width: 130px;
  left: 40px;
  bottom: 40px;
}

@media (max-width: 896px) {
  .footer_head .footer_head_logo {
    max-width: calc(1.6rem * 10.5);
  }

  .footer_head .footer_head_copy {
    max-width: calc(1.6rem * 15.625);
  }

  .footer_gnav {
    padding-left: 0;
    padding-right: 0;
  }

  .footer_gnav .gnav_lst {
    margin-top: calc(1.6rem * 2.5);
  }

  .footer_gnav .gnav_itm:last-child {
    border-bottom: 1px solid var(--color-border);
  }

  .footer_cp_link {
    position: static;
    margin-top: calc(1.6rem * 2.5);
    text-align: center;
  }

  .footer_btm_nav_itm {
    font-size: 1.2rem;
  }

  .footer_seal {
    position: static;
    margin: calc(1.6rem * 1.5) auto calc(1.6rem * 1);
  }
}

@media (max-width: 576px) {
  .footer_cont {
    margin-top: 16vw;
    margin-bottom: 2.6vw;
  }
}

/* ============================================================================================
      Contents
============================================================================================= */
/*    TOP
===================================================== */
/* MV */
.mv {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 100px);
  aspect-ratio: 683 / 406;
}

.mv_inr {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 100px);
  aspect-ratio: 683 / 406;
}

.mv_ttl {
  position: absolute;
  width: 40%;
  left: 14.75%;
  top: 12%;
  z-index: 10;
}

.mv_board {
  position: absolute;
  width: 16%;
  left: 1%;
  top: 2%;
}

.mv_lottie {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
}

.mv_scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px;
  margin: auto;
  padding-bottom: 70px;
  font-size: 1.46vw;
}

.mv_scroll::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 60px;
  top: calc(1lh + 10px);
  left: 0;
  right: 0;
  margin: auto;
  background: var(--color-text);
  -webkit-animation: mvScroll 2s ease-in-out infinite;
  animation: mvScroll 2s ease-in-out infinite;
  opacity: 0;
}

@-webkit-keyframes mvScroll {
  0% {
    height: 0;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    height: 60px;
    opacity: 0;
  }
}

@keyframes mvScroll {
  0% {
    height: 0;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    height: 60px;
    opacity: 0;
  }
}

@media (max-width: 1366px) {
  .mv_scroll {
    font-size: 2rem;
  }
}

@media (max-width: 896px) {
  .mv,
  .mv_inr {
    max-height: 100%;
    aspect-ratio: 3 / 4;
  }

  .mv_ttl {
    width: 70vw;
    top: 30vw;
    left: 0;
    margin-inline: auto;
  }

  .mv_board {
    width: 18%;
    top: auto;
    bottom: 6%;
  }

  .mv_lottie__map {
    width: 186vw;
    left: -81.5vw;
  }

  .mv_lottie__circle {
    width: 186vw;
    left: 15vw;
    top: auto;
    bottom: 20vw;
  }

  .mv_scroll {
    display: none;
  }
}

@media (max-width: 576px) {
  .mv,
  .mv_inr {
    aspect-ratio: 375 / 756;
  }

  .mv_ttl {
    width: 115vw;
    top: 37vw;
    left: -8vw;
    right: 0;
  }

  .mv_board {
    width: 45.6vw;
    top: auto;
    bottom: 0;
  }

  .mv_lottie__map {
    width: 186vw;
    left: -81.5vw;
  }

  .mv_lottie__circle {
    width: 220vw;
    left: 15vw;
    bottom: 30vw;
  }

  .mv_scroll {
    display: none;
  }
}

/* News */
.top_news {
  position: absolute;
  width: 100%;
  max-width: 22.694vw;
  right: 5.857vw;
  bottom: 2.196vw;
}

.top_news_itm_link {
  font-size: 0.878vw;
}

.top_news_itm_date {
  width: 10ch;
}

.top_news_itm_ttl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top_news_link {
  margin-top: 2.928vw;
  font-size: 1.46vw;
}

@media (max-width: 1366px) {
  .top_news_itm_link {
    font-size: 1.2rem;
  }

  .top_news_link {
    font-size: 2rem;
  }
}

@media (max-width: 896px) {
  .top_news {
    max-width: 60vw;
    right: 5.857vw;
    bottom: 2.196vw;
  }

  .top_news_itm {
    margin-top: calc(1.6rem * 0.375);
  }

  .top_news_itm_link {
    font-size: 1.4rem;
  }

  .top_news_link {
    margin-top: calc(1.6rem * 1.5);
  }
}

@media (max-width: 576px) {
  .top_news {
    position: static;
    max-width: 90vw;
    margin: 16vw auto 0;
  }
}

/* Common */
.top_wrapper {
  overflow: hidden;
}

.top_card_itm {
  display: contents;
}

.top_card_itm_link {
  display: -ms-grid;
  display: grid;
  -ms-grid-row-span: 3;
  grid-row: span 3;
  -ms-grid-rows: subgrid;
  grid-template-rows: subgrid;
  gap: 0;
  height: 100%;
  padding-left: calc(1.6rem * 1.25);
  padding-right: calc(1.6rem * 1.25);
  padding-bottom: 115px;
}

.top_card_itm_link::after {
  width: calc(1.6rem * 2.8125);
  height: calc(1.6rem * 2.8125);
  top: auto;
  bottom: calc(1.6rem * 2);
  left: 0;
  background-size: calc(1.6rem * 1.125) calc(1.6rem * 1.375);
}

.top_card_itm + .top_card_itm .top_card_itm_link {
  border-left: 1px solid var(--color-text);
}

.top_card_itm_icon {
  max-width: 140px;
  margin-inline: auto;
}

.top_card_itm_ttl__en {
  display: block;
  -ms-grid-row-align: center;
  align-self: center;
  margin-bottom: 25px;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 896px) {
  .top_card_itm_link {
    padding-bottom: calc(1.6rem * 6.5625);
  }

  .top_card_itm_icon {
    max-width: calc(1.6rem * 6.25);
  }

  .top_card_itm_ttl__en {
    margin-bottom: calc(1.6rem * 0.33);
  }
}

@media (max-width: 576px) {
  .top_card_itm_link {
    padding-top: calc(1.6rem * 1.875);
  }

  .top_card_itm + .top_card_itm .top_card_itm_link {
    border-top: 1px solid var(--color-text);
    border-left: none;
  }
}

.top_sec_img {
  position: relative;
  height: 50vw;
  max-height: 750px;
  z-index: 10;
  overflow: hidden;
}

.top_sec_img_inr {
  position: absolute;
  width: 100%;
  height: 1000px;
  background-size: cover;
  background-position: center center;
}

.top_sec_img__about .top_sec_img_inr {
  top: -50%;
  background-image: url(../img/top/top_about.gif);
}

.top_sec_img__recruit .top_sec_img_inr {
  top: -150%;
  background-image: url(../img/top/top_requirements.jpg);
}

@media (max-width: 1040px) {
  .top_sec_img__about .top_sec_img_inr {
    top: -100%;
  }

  .top_sec_img__recruit .top_sec_img_inr {
    top: -200%;
    background-image: url(../img/top/top_requirements.jpg);
  }
}

@media (max-width: 896px) {
  .top_sec_img {
    max-height: calc(1.6rem * 18.75);
  }

  .top_sec_img_inr {
    position: static;
    height: 100%;
  }
}

/* About */
@media (max-width: 576px) {
  .top_about .top_card_lst {
    width: 90vw;
    margin-inline: auto;
  }
}

/* Business & Works */
.top_business-works {
  padding-top: 180px;
  overflow: hidden;
}

.top_business-works_inr {
  padding-bottom: 95px;
}

.top_business-works_inr::before {
  width: 215px;
  height: 223px;
  left: 14.4%;
  bottom: 0;
  background-image: url("../img/common/gnavi_img.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 0;
}

.top_business-works_inr::after {
  width: 246px;
  height: 660px;
  top: -210px;
  right: 0;
  background-image: url("../img/top/top_business.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 0;
}

.top_business,
.top_works {
  position: relative;
  width: 50%;
  padding-left: 95px;
  z-index: 10;
}

.top_works {
  margin-left: auto;
}

@media (max-width: 896px) {
  .top_business-works_inr {
    padding-bottom: calc(1.6rem * 0.5);
  }

  .top_business-works_inr::before {
    width: calc(1.6rem * 11);
    height: calc(1.6rem * 11.4375);
    left: calc(-5vw - calc(1.6rem * 4.6875));
    bottom: calc(1.6rem * 2.5);
  }

  .top_business-works_inr::after {
    width: calc(1.6rem * 10.25);
    height: calc(1.6rem * 27.5);
    top: -90px;
    right: calc(-5vw - calc(1.6rem * 3.75));
  }

  .top_business,
  .top_works {
    position: relative;
    width: 50.67%;
    padding-left: 0;
    z-index: 10;
  }

  .top_works {
    margin-left: auto;
  }
}

@media (max-width: 576px) {
  .top_business-works_inr::after {
    top: -24vw;
  }
}

.top_wrapper + .sec_entry {
  margin-top: 80px;
}

@media (max-width: 896px) {
  .top_wrapper + .sec_entry {
    margin-top: calc(1.6rem * 3.75);
  }
}

/*    News
===================================================== */
.news_itm {
  padding-right: 0;
  border-top: 1px solid var(--color-border);
}

.news_itm:last-child {
  border-bottom: 1px solid var(--color-border);
}

.news_itm.g_arrow::after {
  width: 2.4em;
  height: 2.4em;
  background-size: 0.75em 1em;
}

.news_itm a {
  display: block;
  padding: 30px 50px 30px 0;
}

.news_itm a > * {
  transition: color 0.3s;
}

.news_itm_txt {
  margin-top: calc(1.6rem * 0.625);
}

@media (any-hover: hover) {
  .news_itm:hover::after {
    background-image: url("../img/common/arrow_gr.svg");
    background-color: transparent;
  }

  .news_itm a:hover > * {
    color: var(--color-main);
  }
}

@media (max-width: 896px) {
  .news_itm a {
    padding: calc(1.6rem * 1.25) calc(1.6rem * 3) calc(1.6rem * 1.25) 0;
  }
}

/* article */
.news_article_head_date {
  display: block;
  margin-bottom: calc(1.6rem * 1.42);
}

/*    Message
===================================================== */
.message_cont {
  margin-top: 120px;
}

.message_cont_img {
  width: 100%;
  max-width: 445px;
  margin-inline: auto;
}

.message_cont_txt {
  width: 100%;
  line-height: 1.75;
}

@media (max-width: 896px) {
  .message_cont {
    margin-top: calc(1.6rem * 4.375);
  }

  .message_cont_img {
    max-width: 445px;
  }

  .message_cont_txt {
    line-height: 1.6;
  }
}

@media (max-width: 576px) {
  .message_cont_img {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

/*    Compass
===================================================== */
.compass_wrap {
  max-width: 1180px;
  justify-content: end;
  gap: 60px;
}

.compass_itm {
  position: sticky;
  display: -ms-grid;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  bottom: 0;
  background-color: var(--color-reverse);
  opacity: 1;
  transition: all 0.5s ease 0s;
}

.compass_itm:nth-child(1) {
  z-index: 10;
}
.compass_itm:nth-child(2) {
  z-index: 9;
}
.compass_itm:nth-child(3) {
  z-index: 8;
}
.compass_itm:nth-child(4) {
  z-index: 7;
}
.compass_itm:nth-child(5) {
  z-index: 6;
}
.compass_itm:nth-child(6) {
  z-index: 5;
}
.compass_itm:nth-child(7) {
  z-index: 4;
}

.compass_itm.js_hidden {
  opacity: 0;
}

.compass_itm_ttl {
  font-size: 4.8rem;
}

.compass_itm_ttl__hidden {
  visibility: hidden;
}

.compass_itm_ttl_char {
  display: inline-block;
}

.compass_itm_year {
  flex-shrink: 0;
  width: 340px;
  font-size: 14rem;
  line-height: 1;
}

/* SideNav */
.compass_sideNav.js_hidden {
  opacity: 0;
}

.compass_sideNav {
  position: sticky;
  width: calc(1.6rem * 0.625);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  top: 50%;
  translate: 0 -50%;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity 0.3s;
}

.compass_sideNav_itm a {
  display: block;
  width: calc(1.6rem * 0.625);
  height: calc(1.6rem * 0.625);
  font-size: 0;
  border-radius: 50%;
  background-color: var(--color-text-lightgrey);
  transition: background-color 0.3s;
}

.compass_sideNav_itm.js_current a {
  background-color: var(--color-green);
}

@media (min-width: 897px) {
  .compass_itm_ttl_char {
    display: inline-block;
    opacity: 0;
    --delay: 0.1s;
  }

  .compass_itm.js_fullScr_itm__top .compass_itm_ttl {
    transition: opacity 0.3s;
  }

  .compass_itm.js_fullScr_itm__top.js_active .compass_itm_ttl {
    transition: opacity 0.3s;
  }

  .compass_itm.js_fullScr_itm__top.js_active .compass_itm_ttl_char {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-name: data_itm_txt_char;
    animation-name: data_itm_txt_char;
  }

  .compass_itm_ttl_char:nth-child(1) {
    -webkit-animation-delay: calc(0.1s + var(--delay));
    animation-delay: calc(0.1s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(2) {
    -webkit-animation-delay: calc(0.2s + var(--delay));
    animation-delay: calc(0.2s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(3) {
    -webkit-animation-delay: calc(0.3s + var(--delay));
    animation-delay: calc(0.3s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(4) {
    -webkit-animation-delay: calc(0.4s + var(--delay));
    animation-delay: calc(0.4s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(5) {
    -webkit-animation-delay: calc(0.5s + var(--delay));
    animation-delay: calc(0.5s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(6) {
    -webkit-animation-delay: calc(0.6s + var(--delay));
    animation-delay: calc(0.6s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(7) {
    -webkit-animation-delay: calc(0.7s + var(--delay));
    animation-delay: calc(0.7s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(8) {
    -webkit-animation-delay: calc(0.8s + var(--delay));
    animation-delay: calc(0.8s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(9) {
    -webkit-animation-delay: calc(0.9s + var(--delay));
    animation-delay: calc(0.9s + var(--delay));
  }

  .compass_itm_ttl_char:nth-child(10) {
    -webkit-animation-delay: calc(1s + var(--delay));
    animation-delay: calc(1s + var(--delay));
  }
}

@media (max-width: 896px) {
  .compass_wrap {
    max-width: 100%;
    gap: calc(1.6rem * 1.875);
  }

  .compass_itm_inr {
    width: 100%;
  }

  .compass_itm:not(.js_fullScr_itm__top) .compass_itm_ttl {
    font-size: 2.8rem;
  }

  .compass_itm_year {
    width: auto;
    font-size: 10rem;
  }

  .compass_itm_cont p {
    font-size: 1.4rem;
  }
}

/*    Data & Keywords
===================================================== */
.data_itm {
  position: sticky;
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 445px;
  height: 100vh;
  height: 100dvh;
  padding: 20px;
  bottom: 0;
  line-height: 2;
  background-color: var(--color-reverse);
  opacity: 1;
  transition: all 0.5s ease 0s;
}

.data_itm:nth-child(1) {
  z-index: 10;
}
.data_itm:nth-child(2) {
  z-index: 9;
}
.data_itm:nth-child(3) {
  z-index: 8;
}
.data_itm:nth-child(4) {
  z-index: 7;
}
.data_itm:nth-child(5) {
  z-index: 6;
}
.data_itm:nth-child(6) {
  z-index: 5;
}
.data_itm:nth-child(7) {
  z-index: 4;
}

.data_itm.js_hidden {
  opacity: 0;
}

.data_itm_txt__hidden {
  position: absolute;
  visibility: hidden;
}

.data_itm__top_inr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  width: 90vw;
  max-width: 1100px;
  height: 100vh;
  height: 100dvh;
  right: -125%;
  margin: auto;
  font-size: 5rem;
  line-height: 1;
  translate: -50% 0;
  transition: opacity 0.3s;
}

.data_itm_txt_char {
  display: inline-block;
  opacity: 0;
  --delay: 0.1s;
}

.data_itm.js_fullScr_itm__top .data_itm_txt {
  /* position: absolute;
  width: 90vw;
  max-width: 1100px;
  right: -125%;
  margin: auto;
  font-size: 5rem;
  line-height: 1;
  translate: -50% 0; */
  transition: opacity 0.3s;
}

.data_itm.js_fullScr_itm__top.js_active .data_itm_txt {
  transition: opacity 0.3s;
}

.data_itm.js_fullScr_itm__top.js_active .data_itm_txt_char {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-name: data_itm_txt_char;
  animation-name: data_itm_txt_char;
}

.data_itm_txt_char:nth-child(1) {
  -webkit-animation-delay: calc(0.1s + var(--delay));
  animation-delay: calc(0.1s + var(--delay));
}

.data_itm_txt_char:nth-child(2) {
  -webkit-animation-delay: calc(0.2s + var(--delay));
  animation-delay: calc(0.2s + var(--delay));
}

.data_itm_txt_char:nth-child(3) {
  -webkit-animation-delay: calc(0.3s + var(--delay));
  animation-delay: calc(0.3s + var(--delay));
}

.data_itm_txt_char:nth-child(4) {
  -webkit-animation-delay: calc(0.4s + var(--delay));
  animation-delay: calc(0.4s + var(--delay));
}

.data_itm_txt_char:nth-child(5) {
  -webkit-animation-delay: calc(0.5s + var(--delay));
  animation-delay: calc(0.5s + var(--delay));
}

.data_itm_txt_char:nth-child(6) {
  -webkit-animation-delay: calc(0.6s + var(--delay));
  animation-delay: calc(0.6s + var(--delay));
}

.data_itm_txt_char:nth-child(7) {
  -webkit-animation-delay: calc(0.7s + var(--delay));
  animation-delay: calc(0.7s + var(--delay));
}

.data_itm_txt_char:nth-child(8) {
  -webkit-animation-delay: calc(0.8s + var(--delay));
  animation-delay: calc(0.8s + var(--delay));
}

.data_itm_txt_char:nth-child(9) {
  -webkit-animation-delay: calc(0.9s + var(--delay));
  animation-delay: calc(0.9s + var(--delay));
}

.data_itm_txt_char:nth-child(10) {
  -webkit-animation-delay: calc(1s + var(--delay));
  animation-delay: calc(1s + var(--delay));
}

.data_itm_txt_char:nth-child(11) {
  -webkit-animation-delay: calc(1.1s + var(--delay));
  animation-delay: calc(1.1s + var(--delay));
}

.data_itm_txt_char:nth-child(12) {
  -webkit-animation-delay: calc(1.2s + var(--delay));
  animation-delay: calc(1.2s + var(--delay));
}

.data_itm_txt_char:nth-child(13) {
  -webkit-animation-delay: calc(1.3s + var(--delay));
  animation-delay: calc(1.3s + var(--delay));
}

@-webkit-keyframes data_itm_txt_char {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes data_itm_txt_char {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* SideNav */
.data_sideNav.js_hidden {
  opacity: 0;
  z-index: -1;
}

.data_sideNav {
  position: sticky;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  top: 50%;
  translate: 0 -50%;
  flex-shrink: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
  z-index: 20;
}

.data_sideNav_itm a {
  display: inline-block;
  color: var(--color-text-lightgrey);
  font-size: 7.2rem;
  line-height: 1;
  transition: color 0.3s;
}

.data_sideNav_itm:last-child a {
  letter-spacing: calc(1.6rem * 0.1 * -1);
}

.data_sideNav_itm.js_current a {
  color: var(--color-green);
}

@media (any-hover: hover) {
  .data_sideNav_itm a:hover {
    color: var(--color-green);
  }
}

@media (max-width: 1240px) {
  .data_itm__top_inr {
    width: 80vw;
    right: -30vw;
  }
}

@media (max-width: 896px) {
  .data_itm_ttl__sp {
    padding-right: 1em;
    color: var(--color-text-lightgrey);
    font-size: 5rem;
    line-height: 1.2;
    transition: color 0.3s;
  }

  .data_itm_ttl__sp.js_open {
    color: var(--color-green);
  }

  .data_itm__sp:last-child .data_itm_ttl__sp {
    letter-spacing: -0.1em;
  }

  .data_itm_ttl__sp::before,
  .data_itm_ttl__sp::after {
    content: "";
    position: absolute;
    display: block;
    background-color: var(--color-green);
    transition: rotate 0.5s;
  }

  .data_itm_ttl__sp::before {
    width: 0.5em;
    height: 1px;
    top: 0.75em;
    right: 0;
  }

  .data_itm_ttl__sp::after {
    width: 1px;
    height: 0.5em;
    top: 0.5em;
    right: calc(0.25em - 1px);
  }

  .data_itm_ttl__sp.js_open::before {
    display: none;
  }

  .data_itm_ttl__sp.js_open::after {
    rotate: 90deg;
  }

  .data_itm_cont__sp {
    padding-top: 1.25em;
    padding-bottom: 1.25em;
  }
}

@media (max-width: 576px) {
  .data_itm_ttl__sp {
    font-size: 4.5rem;
  }

  .data_itm_ttl__sp > span {
    display: block;
  }
}

/*    Career system
===================================================== */
.system_head {
  width: 100%;
  max-width: 445px;
}

.system_cont {
  width: 100%;
}

@media (max-width: 896px) {
  .system_head {
    max-width: 100%;
  }
}

/*    Recruit Info - Common
===================================================== */
.sec_recruit_info {
  padding-top: 180px;
  padding-bottom: 180px;
}

@media (max-width: 896px) {
  .sec_recruit_info {
    padding-top: calc(1.6rem * 5);
    padding-bottom: calc(1.6rem * 5);
  }
}

/*    Requirements
===================================================== */
/* Search */
.requirements_search {
  position: relative;
  padding: 50px 45px;
  border-radius: calc(1.6rem* 0.625);
  background-color: var(--color-bg);
  overflow: hidden;
}

.requirements_search_itm {
  padding: 30px 0;
}

.requirements_search_itm:first-child {
  padding-top: 0;
}

.requirements_search_itm:last-child {
  padding-bottom: 0;
}

.requirements_search_itm + .requirements_search_itm {
  border-top: 1px solid var(--color-border02);
}

.requirements_search_itm_ttl {
  position: relative;
  width: calc((8em * 1.05) + 2em);
  padding-left: 1.25em;
}

.requirements_search_itm_ttl::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  top: 0.65em;
  left: 0;
  background-color: var(--color-green);
  border-radius: 50%;
}

.requirements_search_itm_tag > * {
  display: block;
  padding: 0.425em 2.15em;
  font-size: 1.4rem;
  background: var(--color-border);
  border-radius: 50px;
  overflow: hidden;
  transition: color 0.2s, background-color 0.2s;
}

.requirements_search_itm_tag.current > * {
  color: var(--color-reverse);
  background: var(--color-main);
}

.requirements_search_reset {
  position: absolute;
  top: 40px;
  right: 45px;
}

.requirements_search_reset > * {
  display: block;
  padding: 0.425em 2.15em;
  color: var(--color-reverse);
  font-size: 1.4rem;
  background-color: var(--color-text);
  border-radius: 50px;
  overflow: hidden;
  transition: color 0.2s, background-color 0.2s;
}

@media (any-hover: hover) {
  .requirements_search_itm_tag > *:hover {
    color: var(--color-reverse);
    background: var(--color-main);
  }
  .requirements_search_reset > *:hover {
    background: var(--color-main);
  }
}

@media (max-width: 896px) {
  .requirements_search {
    padding: 2.5em 1.25em;
  }
  .requirements_search_itm {
    padding: 1.25em 0;
  }
  .requirements_search_itm_ttl {
    width: auto;
  }
  .requirements_search_reset {
    top: 1.25em;
    right: 1.25em;
  }
  .requirements_search_itm_tag > *,
  .requirements_search_reset > * {
    font-size: 1.2rem;
  }
}


/* Common */
.requirements_wrap {
  max-width: 1170px;
  justify-content: end;
  gap: 30px;
}

.requirements_wrap > .requirements_cont {
  width: 100%;
  max-width: 730px;
}

.requirements_jobItm + .requirements_jobItm {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid var(--color-border);
}

.requirements_jobItm_head {
  width: 205px;
  flex-shrink: 0;
}

.requirements_jobItm_head_place {
  display: block;
  padding-left: calc(1.6rem * 1);
}

.requirements_jobItm_head_place::before {
  width: 0.5em;
  height: 0.75em;
  top: 0.45em;
  left: 0;
  background-image: url("../img/common/icon_map.svg");
}

.requirements_jobItm_head_more {
  display: block;
  text-decoration: underline;
}

@media (max-width: 896px) {
  .requirements_wrap > .requirements_cont {
    max-width: 100%;
  }

  .requirements_jobItm + .requirements_jobItm {
    margin-top: calc(1.6rem * 1.25);
    padding-top: calc(1.6rem * 1.25);
  }
}

@media (max-width: 576px) {
  .requirements_jobItm_head {
    width: auto;
  }
}

.requirements_sideNav {
  position: sticky;
  width: 190px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  top: 80px;
  flex-shrink: 0;
}

.requirements_sideNav_itm {
  padding-left: 1em;
}

.requirements_sideNav_itm + .requirements_sideNav_itm {
  margin-top: 5px;
}

.requirements_sideNav_itm::before {
  width: 0.35em;
  height: 0.35em;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background-color: var(--color-green);
  opacity: 0;
  transition: opacity 0.2s;
}

.requirements_sideNav_itm.js_current::before {
  opacity: 1;
}

@media (any-hover: hover) {
  .requirements_sideNav_itm:hover::before {
    opacity: 1;
  }
}

/* detail */
.requirements_table_itm + .requirements_table_itm {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--color-border);
}

.requirements_table_itm_ttl {
  width: 160px;
  flex-shrink: 0;
}

.requirements_table_itm_cont {
  width: 100%;
}

.requirements_table_flow_itm + .requirements_table_flow_itm {
  margin-top: 20px;
}

.requirements_table_flow_itm_ttl {
  color: var(--color-text);
}

.requirements_table_flow_itm_ttl__step {
  display: inline-block;
  padding: calc(1.6rem * 0.18) calc(1.6rem * 0.43) calc(1.6rem * 0.14);
  color: var(--color-reverse);
  background-color: var(--color-green);
}

.requirements_table_flow_itm_txt {
  padding-left: calc(1.6rem * 4.8125);
  margin-top: calc(1.6rem * 0.375);
}

@media (max-width: 896px) {
  .requirements_table_itm + .requirements_table_itm {
    margin-top: calc(1.6rem * 1.25);
    padding-top: calc(1.6rem * 1.25);
  }

  .requirements_table_flow_itm + .requirements_table_flow_itm {
    margin-top: calc(1.6rem * 1.25);
  }
}

@media (max-width: 576px) {
  .requirements_table_itm_ttl {
    width: auto;
  }
}

.recruit_bnrItm {
  width: 100%;
  max-width: 350px;
  border: 1px solid var(--color-border02);
  border-radius: 5px;
  overflow: hidden;
}

.recruit_bnrItm a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 25px;
}

.recruit_bnrItm img {
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 896px) {
  .recruit_bnrItm {
    max-width: calc(1.6rem * 18.75);
  }

  .recruit_bnrItm a {
    height: calc(1.6rem * 5);
    padding: calc(1.6rem * 1.25);
  }
}

/*    FAQ
===================================================== */
.faq_lst {
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}

.faq_itm + .faq_itm {
  border-top: 1px solid var(--color-border);
}

.faq_itm_ttl {
  position: relative;
  padding: 30px 30px 30px 0;
  cursor: pointer;
}

.faq_itm_ttl::before,
.faq_itm_ttl::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: var(--color-main);
  transition: all 0.3s linear;
  z-index: 1;
}

.faq_itm_ttl::before {
  width: 15px;
  height: 1px;
  right: 0;
}

.faq_itm_ttl::after {
  width: 1px;
  height: 15px;
  right: 7px;
}

.faq_itm_ttl.js_open::before {
  display: none;
}

.faq_itm_ttl.js_open::after {
  -webkit-transform: rotate(90deg) translateY(0px);
  transform: rotate(90deg) translateY(0px);
}

.faq_itm_ttl_txt {
  display: flex;
  gap: 15px;
}

.faq_itm_ttl_txt::before {
  content: "Q";
  color: var(--color-green);
}

.faq_itm_cont {
  display: none;
  width: 100%;
  max-width: 490px;
  padding-bottom: 30px;
}

.faq_itm_cont_inr {
  display: flex;
  gap: 15px;
}

.faq_itm_cont_inr::before {
  content: "A";
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 500;
}

@media (max-width: 896px) {
  .faq_itm_ttl {
    padding: calc(1.6rem * 1.25) calc(1.6rem * 1.25) calc(1.6rem * 1.25) 0;
  }

  .faq_itm_ttl::before {
    width: calc(1.6rem * 0.83);
  }

  .faq_itm_ttl::after {
    height: calc(1.6rem * 0.83);
    right: calc(1.6rem * 0.38);
  }

  .faq_itm_ttl_txt {
    gap: calc(1.6rem * 0.83);
  }

  .faq_itm_cont {
    padding-bottom: calc(1.6rem * 1.25);
  }

  .faq_itm_cont_inr {
    gap: calc(1.6rem * 0.9375);
  }

  .faq_itm_cont_inr::before {
    font-size: 1.8rem;
  }
}