@charset "utf-8";
/*--------------------------------------------------------------------------------

  wrapper

--------------------------------------------------------------------------------*/
.l-wrapper {
  position: relative;
  min-height: 100%;
}

/*--------------------------------------------------------------------------------

  header

--------------------------------------------------------------------------------*/
header {
  width: 100%;
  z-index: 100;
  position: sticky;
  top: 0;
  left: 0;
}
.l-hd {
  background-color: #FFF;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  transition: background 0.2s ease-in-out;
}
@media not (max-width: 1000px) {
  .l-hd {
    grid-template-areas: 
      "hd-logo gnav";
  }
}
@media (max-width: 1000px) {
  .l-hd {
    grid-template-areas: 
      "hd-logo hd-sns gnav-btn";
  }
}
.l-hd-logo { grid-area: hd-logo; }
.l-hd-sns { grid-area: hd-sns; align-self: center; }
.l-gnav { grid-area: gnav; }
.l-gnav-btn { grid-area: gnav-btn; }

/* scroll down
----------------------------------------*/
header.is-up { animation: hd-up 0.4s forwards; }
header.is-down { animation: hd-down 0.4s forwards; }
@keyframes hd-up { from { transform: translateY(0); } to { transform: translateY(-110%); } }
@keyframes hd-down { from { transform: translateY(-110%); } to { transform: translateY(0); } }

/* gnav open
----------------------------------------*/
body:has(.l-gnav.is-open, .l-gnav.is-close) .l-hd { transition: none; }
header.is-stay .l-hd { background-color: transparent; }
header.is-stay { height: 100dvh; }
header.is-stay { transform: translateY(0); }

@media not (max-width: 1000px) { header .sp-only { display: none !important; } }
@media (max-width: 1000px) { header .pc-only { display: none !important; } }

/*--------------------------------------------------------------------------------
  .l-hd_logo
--------------------------------------------------------------------------------*/
.l-hd_logo { 
  justify-self: start;
  align-self: center;
}
@media not (max-width: 760px) {
  .l-hd_logo { padding: 1rem 1.5rem; }
  .l-hd_logo img { width: 200px; }
}
@media (max-width: 760px) {
  .l-hd_logo { padding: 1rem; min-width: 140px; }
  .l-hd_logo img { width: clamp(140px, (200 / 500 * 100vw), 180px); }
}

/*--------------------------------------------------------------------------------
  .l-hd-sns
--------------------------------------------------------------------------------*/
.l-hd-sns {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
  font-size: var(--fs-2s);
  line-height: var(--line-height-2s);
}
.l-hd-sns a {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
@media (max-width: 1000px) {
  .l-hd-sns { margin-right: 0.5rem; }
}
@media (max-width: 500px) {
  .l-hd-sns { --sns-size: 1.75rem; }
  .l-hd-sns_txt { display: none; }
}

/*--------------------------------------------------------------------------------

  global navigation

--------------------------------------------------------------------------------*/
@media not (max-width: 1000px) {
  .l-gnav { padding-bottom: 0 !important; } /* Google翻訳バーの高さ分のpadding無効 */
}
@media (max-width: 1000px) {
  .l-gnav {
    display: none;
    pointer-events: none;
    width: 100%;
    height: calc(100dvh - 100%);
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* gnav open
----------------------------------------*/
@keyframes gnav-open { from { opacity: 0; } to { opacity: 1; } }
@keyframes gnav-close { from { opacity: 1; } to { opacity: 0; } }
:root { --gnav-close-duration: 400; }
@media (max-width: 1000px) {
  body:has(.l-gnav.is-open) { overflow: hidden; }
  .l-gnav.is-open,
  .l-gnav.is-close {
    display: block;
    pointer-events: auto;
  }
  .l-gnav:before {
    content: "";
    width: 100%;
    height: 100dvh;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: var(--bg-quaternary);
  }
  .l-gnav.is-open:before { animation: 0.8s gnav-open var(--cubic-bezier) forwards; }
  .l-gnav.is-close:before { animation: calc(var(--gnav-close-duration) * 0.001s) gnav-close var(--cubic-bezier) forwards; }
}

/*--------------------------------------------------------------------------------
  .l-gnav_content
--------------------------------------------------------------------------------*/
.l-gnav-list { grid-area: gnav-list; }
.l-gnav-sublist { grid-area: gnav-sublist; }
.l-gnav-btnlist { grid-area: gnav-btnlist; }
@keyframes gnav-content-open { from { transform: scale(0.7); } to { transform: scale(1); } }
@media not (max-width: 1000px) {
  .l-gnav_content {
    display: grid;
    grid-template-areas: 
      "gnav-sublist gnav-btnlist"
      "gnav-list gnav-btnlist";
    grid-template-rows: auto 1fr;
  }
  .l-gnav-list {
    justify-content: end;
    padding-right: calc(2rem - var(--side-pd));
  }
  .l-gnav-sublist {
    align-self: end;
    justify-content: end;
    padding-top: 1rem;
    padding-right: 2rem;
  }
  .l-gnav-btnlist {
    padding: 1.25rem 1.25rem 1.25rem 0;
  }
}
@media (max-width: 1000px) {
  .l-gnav_content-wrap {
    display: grid;
    align-content: start;
    height: 100%;
    position: relative;
    overflow-y: hidden;
  }
  .l-gnav_content {
    opacity: 0;
    display: grid;
    grid-template-areas: 
      "gnav-list"
      "gnav-sublist"
      "gnav-btnlist";
    row-gap: var(--space-s);
    padding: var(--space-m) var(--SP-side-space-m);
    overflow-y: scroll;
    /* values(min:1.15em, max:1.25em) viewport(min:760px, max:1000px) */
    font-size: clamp(1.15em, 0.833em + 0.67vw, 1.25em);
  }
  .l-gnav.is-open .l-gnav_content { animation: 0.6s gnav-open var(--cubic-bezier) forwards; }
}

/*--------------------------------------------------------------------------------
  .l-gnav-list
--------------------------------------------------------------------------------*/
.l-gnav-list {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
}
.l-gnav-list_txt {
  display: block;
  font-family: var(--ff-go);
  font-weight: 500;
  transition: var(--hover-trans);
  line-height: var(--line-height-s);
}
@media not (max-width: 1000px) {
  .l-gnav-list {
    /* values(min:0.5rem, max:1rem) viewport(min:1000px, max:1200px) */
    --side-pd: clamp(0.5rem, -2rem + 4vw, 1rem);
    display: flex;
  }
  .l-gnav-list_txt {
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0.5rem var(--side-pd) 1.25rem var(--side-pd);
  }
  /* Google翻訳 英語 */
  html.translated-ltr[lang="en"] .l-gnav-list_txt {
    width: min-content;
    line-height: var(--line-height-2s);
  }
  html.translated-ltr[lang="en"] .l-gnav-list li:nth-of-type(3) {
    width: 22%;
  }
  html.translated-ltr[lang="en"] .l-gnav-list li:nth-of-type(2) .l-gnav-list_txt,
  html.translated-ltr[lang="en"] .l-gnav-list li:nth-of-type(3) .l-gnav-list_txt {
    width: 100%;
  }
}
@media (max-width: 1000px) {
  .l-gnav-list {
    --pd: 1rem;
    display: flex;
    flex-direction: column;
  }
  .l-gnav-list_txt {
    font-size: var(--fs-2m);
    padding: var(--pd) 0;
  }
  .l-gnav-list > li:first-child { margin-top: calc(-1 * var(--pd)); }
}
@media (max-width: 760px) {
  .l-gnav-list { --pd: 0.75rem; }
}
@media (hover: hover) {
  .l-gnav-list_txt:hover { color: var(--color-primary); }
}

/*--------------------------------------------------------------------------------
  .l-gnav-sublist
--------------------------------------------------------------------------------*/
.l-gnav-sublist {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  font-size: var(--fs-2s);
  display: flex;
  column-gap: 1.5rem;
}
.l-gnav-sublist a {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
@media not (max-width: 1000px) {
  .l-gnav-sublist {
    --sns-size: 1rem;
  }
  .l-gnav-sublist a {
    column-gap: 0.35rem;
  }
}
@media (max-width: 1000px) {
  .l-gnav-sublist {
    font-size: var(--fs-s);
    flex-direction: column;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }
  .l-gnav-sublist a {
    padding: 0.25rem 0;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-btnlist
--------------------------------------------------------------------------------*/
.l-gnav-btnlist {
  --link-color: #FFF;
  --link-color-hover: #FFF;
  --link-deco: none;
  --link-deco-hover: none;
  line-height: var(--line-height-2s);
  font-family: var(--ff-go);
  font-weight: 500;
  display: flex;
}
.l-gnav-btnlist a {
  display: block;
  height: 100%;
  display: grid;
  place-content: center;
  place-items: center;
  padding: 0.75rem 1.5rem;
  text-align: center;
}
.l-gnav-btnlist .new-graduate a { background-color: var(--color-primary); }
.l-gnav-btnlist .mid-career a { background-color: var(--color-secondary); }
@media (hover: hover) {
  .l-gnav-btnlist .new-graduate a:hover { background-color: var(--color-primary-light); }
  .l-gnav-btnlist .mid-career a:hover { background-color: var(--color-secondary-light); }
}
@media not (max-width: 1000px) {
  .l-gnav-btnlist { font-size: var(--fs-s); }
  .l-gnav-btnlist li:first-child a { border-radius: var(--rd-h2) 0 0 var(--rd-h2); }
  .l-gnav-btnlist li:last-child a { border-radius: 0 var(--rd-h2) var(--rd-h2) 0; }
  .l-gnav-btnlist a {
    overflow-wrap: break-word;
    max-width: 8em;
  }
}
@media (max-width: 1000px) {
  .l-gnav-btnlist {
    margin-top: 1rem;
    gap: var(--space-2s);
  }
  .l-gnav-btnlist li { width: 100%; }
  .l-gnav-btnlist a {
    border-radius: var(--rd-q);
    padding: 1.25rem;
  }
}
@media (max-width: 760px) {
  .l-gnav-btnlist {
    flex-direction: column;
  }
}

/*--------------------------------------------------------------------------------
  .l-gnav-btn
--------------------------------------------------------------------------------*/
:root {
  --gnav-width: fit-content;
  --gnav-btn-icon-height: 18px;
  --gnav-btn-bg: transparent;
  --gnav-btn-bg-hover: transparent;
  --gnav-btn-pd: 0.5rem 1.25rem;
  
  --gnav-btn-icon-width: 28px;
  --gnav-btn-line-bg: var(--color-primary);
  --gnav-btn-line-bg-hover: var(--color-primary);
  --gnav-btn-line-height: 2px;
  
  --gnav-btn-close-bg: transparent;
  --gnav-btn-close-bg-hover: transparent;
  --gnav-btn-close-line-bg: var(--color-primary);
  --gnav-btn-close-line-bg-hover: var(--color-primary);
}
.l-gnav-btn {
  width: var(--gnav-width);
  padding: var(--gnav-btn-pd);
  background-color: var(--gnav-btn-bg);
  cursor: pointer;
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: var(--hover-trans);
  transform: translate3d(0,0,0);
}
.l-gnav-btn.is-close { background-color: var(--gnav-btn-close-bg); }
.l-gnav-btn_icon {
  position: relative;
  width: var(--gnav-btn-icon-width);
  height: var(--gnav-btn-icon-height);
  transition: all 0.2s ease-out;
}
.l-gnav-btn_line {
  position: absolute;
  right: 0;
  left: 0;
  height: var(--gnav-btn-line-height);
  background-color: var(--gnav-btn-line-bg);
}
.l-gnav-btn.is-active .l-gnav-btn_line,
.l-gnav-btn.is-close .l-gnav-btn_line { transition: all 0.2s ease-out; }
.l-gnav-btn.is-close .l-gnav-btn_line { background-color: var(--gnav-btn-close-line-bg); }
.l-gnav-btn_line:nth-of-type(1) { width: 100%; top: 0; }
.l-gnav-btn_line:nth-of-type(2) { width: 100%; top: calc(50% - (var(--gnav-btn-line-height) / 2)); }
.l-gnav-btn_line:nth-of-type(3) { width: 100%; bottom: 0; }
.l-gnav-btn.is-active .l-gnav-btn_line:nth-of-type(1) { animation: gnav-btn_line1 0.4s forwards; }
.l-gnav-btn.is-active .l-gnav-btn_line:nth-of-type(3) { animation: gnav-btn_line3 0.4s forwards; }
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(1) { animation: gnav-btn-close_line1 0.4s forwards; }
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(2) { opacity: 0; }
.l-gnav-btn.is-close .l-gnav-btn_line:nth-of-type(3) { animation: gnav-btn-close_line3 0.4s forwards; }
@media (hover: hover) {
  .l-gnav-btn:not(.is-close):hover { background-color: var(--gnav-btn-bg-hover); }
  .l-gnav-btn:not(.is-close):hover .l-gnav-btn_line { background-color: var(--gnav-btn-line-bg-hover); }
  .l-gnav-btn.is-close:hover { background-color: var(--gnav-btn-close-bg-hover); }
  .l-gnav-btn.is-close:hover .l-gnav-btn_line { background-color: var(--gnav-btn-close-line-bg-hover); }
}
@keyframes gnav-btn_line1 {
  0% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(45deg); }
  50% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes gnav-btn_line3 {
  0% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(-45deg); }
  50% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes gnav-btn-close_line1 {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(calc((var(--gnav-btn-icon-height) / 2) - (var(--gnav-btn-line-height) / 2))) rotate(45deg); }
}
@keyframes gnav-btn-close_line3 {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(0); }
  100% { transform: translateY(calc(-1 * (var(--gnav-btn-icon-height) / 2) + (var(--gnav-btn-line-height) / 2))) rotate(-45deg); }
}
@media not (max-width: 1000px) { .l-gnav-btn { display: none; } }

/*--------------------------------------------------------------------------------

  footer

--------------------------------------------------------------------------------*/
footer {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  background-color: #FFF;
  padding: var(--space-2l) var(--side-space) var(--space-l) var(--side-space);
  display: grid;
  gap: var(--space-l);
  position: relative;
}
@media not (max-width: 1000px) {
  footer { grid-template-columns: auto 1fr auto; }
}

/*--------------------------------------------------------------------------------
  .l-ft_logo
--------------------------------------------------------------------------------*/
.l-ft_logo { align-self: center; }
.l-ft_logo img { width: clamp(130px, (220 / 500 * 100vw), 240px); }

/*--------------------------------------------------------------------------------
  .l-ft-menu
--------------------------------------------------------------------------------*/
.l-ft-menu {
  align-self: end;
  display: flex;
  flex-direction: column;
}
.l-ft-menu_list {
  --link-color: var(--txt-color);
  --link-color-hover: var(--color-primary);
  --link-deco: none;
  --link-deco-hover: none;
  font-size: var(--fs-s);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.l-ft-menu_list a:not(.c-newwin) {
  display: flex;
  column-gap: 0.5rem;
}
@media not (max-width: 1000px) {
  .l-ft-menu { row-gap: 1rem; }
}
@media (max-width: 1000px) {
  .l-ft-menu { row-gap: var(--space-m); }
}

/*--------------------------------------------------------------------------------
  .l-ft_cr
--------------------------------------------------------------------------------*/
.l-ft_cr {
  align-self: end;
  font-size: var(--fs-3s);
  color: var(--color-gray);
}

/*--------------------------------------------------------------------------------

  footer entry

--------------------------------------------------------------------------------*/
:root { --ft-entry-rd: var(--rd-4); }
.l-ft-entry {
  --container-side-space: var(--SP-side-space-s);
  background-color: var(--color-primary);
  border-radius: var(--ft-entry-rd) var(--ft-entry-rd) 0 0;
  margin-top: calc(-1 * var(--ft-entry-rd));
  padding: var(--space-2l) 0;
  position: relative;
}
.entry-ttl {
  text-align: center;
  font-family: var(--ff-go);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: var(--line-height-s);
  color: #FFF;
  padding-left: var(--side-space);
  padding-right: var(--side-space);
}
.entry-ttl:not(:first-of-type) {
  margin-top: var(--space-2l);
}
.entry-box {
  background-color: #FFF;
  padding: var(--inner-space-m);
  border-radius: var(--rd-1h);
  margin-top: var(--space-m);
}

/*--------------------------------------------------------------------------------
  new graduate
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .entry-box.-new-graduate { --col: 2; --bnr-col: 1; --bnr-width: min(100%, 360px); } }
@media (max-width: 760px) { .entry-box.-new-graduate { --col: 1; --bnr-col: 1; --bnr-width: min(80%, 360px); } }
.entry-box.-new-graduate {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: var(--space-l) var(--inner-space-m);
}
.entry-box.-new-graduate .entry-box_dl {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
}
.entry-box.-new-graduate .entry-box_dl dt {
  font-weight: 700;
  font-family: var(--ff-go);
  color: var(--color-primary);
  font-size: var(--fs-l);
  padding-bottom: var(--inner-space-2s);
}
.entry-box.-new-graduate .entry-box_bnr {
  display: grid;
  grid-template-columns: repeat(var(--bnr-col), 1fr);
  gap: var(--space-2s) var(--space-3s);
}
.entry-box.-new-graduate .entry-box_bnr a {
  display: block;
  text-align: center;
  border-radius: var(--rd-h);
  overflow: hidden;
  border: 2px solid var(--border-color);
}
.entry-box.-new-graduate .entry-box_bnr img {
  width: var(--bnr-width);
}

/*--------------------------------------------------------------------------------
  mid-career
--------------------------------------------------------------------------------*/
.entry-box.-mid-career {
  --btn-pd-side: 1rem;
  --btn-width-min: min(100%, 400px);
  text-align: center;
}
.entry-box.-mid-career .entry-box_txt {
  padding-bottom: calc(var(--inner-space-m) - 0.5rem);
}
@media (max-width: 760px) {
  .entry-box.-mid-career .entry-box_txt {
    text-align: left;
  }
}

/*--------------------------------------------------------------------------------

  page title

--------------------------------------------------------------------------------*/
.l-pg-area-ttl {
  --ttl-color: #FFF;
  color: #FFF;
  width: 100%;
  padding: var(--space-2l) 0;
  position: relative;
  background-color: var(--color-primary);
  clip-path: inset(0);
}
.l-pg-area-ttl:before {
  content: "";
  width: max(100vw, 100vh);
  height: max(100vw, 100vh);
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0.15;
  background: url("../../img/recruit/bg_animation.webp") repeat center center;
  background-size: clamp(140px, (240 / 760 * 100vw), 240px) auto;
  animation: pg-ttl-bg 90s linear infinite;
}
@keyframes pg-ttl-bg {
	0% { background-position: 0% 0%; }
	100% { background-position: 100% -100%; }
}
.l-pg-ttl {
  width: calc(var(--container-width, var(--base-width)) * 1px);
  max-width: calc(100% - (var(--container-side-space, var(--side-space)) * 2));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/*--------------------------------------------------------------------------------

  container

--------------------------------------------------------------------------------*/
.l-container {
  width: calc(var(--container-width, var(--base-width)) * 1px);
  max-width: calc(100% - (var(--container-side-space, var(--side-space)) * 2));
  margin-inline: auto;
}

/*--------------------------------------------------------------------------------

  main

--------------------------------------------------------------------------------*/
.l-main {
  padding-top: var(--space-2l);
  padding-bottom: calc( var(--space-3l) + var(--ft-entry-rd));  /* .l-ft-entryの角丸分 */
}