@charset "UTF-8";

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

Layout CSS

・レイアウトコンポネ用クラス「.l-×××」

上記はここに記述する

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

/* Container
============================================================================= */
.l-form_container {
  padding-bottom:16.0rem;
  @media (width <= 640px) {
    padding-bottom:11.2rem;
  }
}


/* Heading
============================================================================= */
/* A */
.l-heading-A {
  display:grid;
  justify-content: flex-start;
  margin-bottom:12.0rem;
  gap:2.4rem;
  text-align: left;
  font-weight:500;

  @media (width <= 640px) {
    gap:1.6rem;
    margin-bottom:4.8rem;
  }

  &.-center {
    justify-content: center;
    text-align: center;
  }
  &.-right {
    justify-content: flex-end;
    text-align: right;
  }
  .en {
    font-family:var(--ff-nhgdp);
    font-size: 6.4rem;
    font-weight:500;
    line-height:1.1;
    letter-spacing:.07em;
    @media (width <= 640px) {
      font-size:3.6rem;
    }
  }
  .ja {
    font-size:1.5rem;
    letter-spacing: .25em;
    line-height:1;
    @media (width <= 640px) {
      font-size:1.2rem;
    }
  }
}

/* Recruit A */
.l-r_heading-A {
  display:grid;
  gap:1.6rem;
  &.-center {
    justify-content: center;
    text-align: center;
  }
  &.-right {
    justify-content: flex-end;
    text-align: right;
  }
  .ja {
    padding-left:1.0rem;
    font-size:1.6rem;
    line-height:1.6;
    letter-spacing: .2em;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      padding-left:.4rem;
      font-size:1.4rem;
    }
  }
}


/* Button 全体
----------------------------------------------------------------------------- */
.l-wrap_button {
  display:block;
  @media (hover) {
    &:hover {
      .l-button-A {
        --my-color:var(--base-color-reverse);
        --my-bg:var(--base-bg-reverse);
        padding-inline:.5em;
      }
    }
  }
}

/* Button
----------------------------------------------------------------------------- */

[class*="l-button"] {
  .p-t-right &,
  &.p-t-center {
    margin-left:auto;
  }
  .p-t-center &,
  &.p-t-center {
    margin-inline:auto;
  }
  @media (width <= 640px) { /* SP */
    .p-t-sp-right &,
    &.p-t-sp-center {
      margin-left:auto;
    }
    .p-t-sp-center &,
    &.p-t-sp-center {
      margin-inline:auto;
    }
  }
}

.l-button-A {
	--my-color:var(--base-color);
	--my-bg:transparent;
  display:flex;
  justify-content: space-between;
  align-items: center;
  border-bottom:1px solid var(--base-color);
  gap:1.6rem;
  width:fit-content;
  padding-block:.8rem .6rem;
	background-color:var(--my-bg);
  font-size:1.8rem;
  line-height:1.1;
  letter-spacing: .1em;
	color:var(--my-color);
  overflow:hidden;
  position:relative;
	transition-property:background-color,color,border-color,padding-inline;
	transition-duration: var(--duration-hover-A);

  @media (width > 640px) { /* PC */
  }
  @media (width <= 640px) { /* SP */
    font-size:1.5rem;
  }

  @media (hover) {
    &:hover {
      --my-color:var(--base-color-reverse);
      --my-bg:var(--base-bg-reverse);
      padding-inline:.5em;
    }
  }

  &::after {
    background-color:var(--my-color);
    transition-property:background-color;
    transition-duration: var(--duration-hover-A);
  }
}

.l-button-B {
	--my-color:var(--base-color-reverse);
	--my-bg:var(--base-bg-reverse);
  display:flex;
  justify-content: center;
  align-items: center;
  margin-inline:auto;
  width:fit-content;
  min-width:24.0rem;
  padding:1.6rem 3.2rem;
	background-color:var(--my-bg);
  font-size:1.6rem;
  line-height:1.6;
  letter-spacing: .15em;
	color:var(--my-color);
  overflow:hidden;
  position:relative;
	transition-property:background-color,color,border-color,padding-inline;
	transition-duration: var(--duration-hover-A);

  @media (width > 640px) { /* PC */
  }
  @media (width <= 640px) { /* SP */
    font-size:1.3rem;
  }

  @media (hover) {
    &:hover {
      --my-color:var(--base-color);
      --my-bg:var(--base-bg);
    }
  }
}

.l-r_button-A {
	--my-color:var(--base-color);
	--my-bg:transparent;
  display:flex;
  align-items: center;
  gap:1.6rem;
  margin-inline:auto;
  border-radius:2.0rem;
  border:1px solid var(--base-color);
  width:fit-content;
  padding:1.6rem 3.2rem;
	background-color:var(--my-bg);
  font-size:1.4rem;
  line-height:1.6;
  letter-spacing: .15em;
	color:var(--my-color);
  overflow:hidden;
  position:relative;
	transition-property:background-color,color,border-color,padding-inline;
	transition-duration: var(--duration-hover-A);

  @media (width > 640px) { /* PC */
  }
  @media (width <= 640px) { /* SP */
    font-size:1.3rem;
  }

  @media (hover) {
    &:hover {
      --my-color:var(--base-color-reverse);
      --my-bg:var(--base-bg-reverse);
    }
  }

  &::after {
    background-color:var(--my-color);
    transition-property:background-color;
    transition-duration: var(--duration-hover-A);
    margin-top:-.1rem;
    width:1.2rem;
  }
}

/* Lower Page KV
----------------------------------------------------------------------------- */
.l-lowerpage-kv-A {
  display:flex;
  align-items: flex-end;
  height:100svh;
  position:relative;
  overflow:hidden;
  padding-left:6.4rem;
  padding-bottom:6.4rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-left:var(--pdi-sp-30);
    padding-bottom:8.0rem;
  }

  .heading {
    display:grid;
    gap:2.4rem;
    @media (width <= 640px) {
      gap:1.2rem;
    }
    &:has(.number) {
      @media (width > 640px) {
        grid-template-columns:auto 1fr;
        grid-template-rows:auto auto;
        gap:1.6rem 4.8rem;
      }
      @media (width <= 640px) {
        margin-bottom:-2.6rem;
      }
      .number {
        font-size:15.0rem;
        line-height:1;
        letter-spacing: .08em;
        @media (width > 640px) {
          grid-row: 1/-1;
        }
        @media (width <= 640px) {
          margin-bottom:.4rem;
          font-size:5.6rem;
        }
      }
      .ja {
        font-size:1.8rem;
        @media (width > 640px) {
          margin-top:auto;
        }
        @media (width <= 640px) {
          font-size:1.1rem;
        }
      }
      .en {
        @media (width > 640px) {
          font-size:8.0rem;
        }
      }
    }
    .ja {
      font-feature-settings: "palt" 0;
      font-size:2.2rem;
      line-height:1;
      letter-spacing: .12em;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        font-size:1.2rem;
      }
    }
    .en {
      font-size:10.0rem;
      line-height:1.1;
      letter-spacing: .07em;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        font-size:4.0rem;
      }
    }
  }
  .bg {
    position:absolute;
    inset:0;
    z-index: -1;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
    &::before,
    &::after {
      content:"";
      position:absolute;
      inset:0;
      mix-blend-mode: multiply;
    }
    &::before {
      background-color:var(--cc-green-D);
      opacity:.3;
      z-index: 1;
    }
    &::after {
      background-color:var(--cc-gray-B);
      opacity:.2;
      z-index: 2;
    }
  }
}

.l-lowerpage-kv-B {
  display:grid;
  justify-content: center;
  text-align: center;
  gap:.8rem;
  padding-top:12.8rem;
  margin-bottom:8.0rem;
  @media (width <= 640px) {
    gap:.4rem;
    padding-top:7.2rem;
    margin-bottom:3.2rem;
  }
  .en {
    font-size:6.0rem;
    line-height:1.5;
    letter-spacing: .05em;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      font-size:4.0rem;
    }
  }
  .ja {
    font-feature-settings: "palt" 0;
    font-size:1.6rem;
    line-height:2;
    letter-spacing: -.02em;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      font-size:1.2rem;
    }
  }
}

/* Recruit */
.l-r_lowerpage-kv-A {
  padding-block:14.4rem 8.0rem;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:6.4rem;
  }
  .heading {
    display:grid;
    align-items: center;
    gap:1.6rem;
    margin-bottom:4.0rem;
    text-align: center;
    @media (width <= 640px) {
      margin-bottom:3.2rem;
    }
    .en {
      font-size:16.0rem;
      line-height:1.15;
      letter-spacing: .05em;
      color:transparent;
      -webkit-background-clip:text;
      background-image:var(--grad-B);
      background-size: cover;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        font-size:7.2rem;
        line-height:1.1;
      }
    }
    .ja {
      font-size:1.6rem;
      line-height:1.6;
      letter-spacing: .2em;
      @media (width > 640px) {
      }
      @media (width <= 640px) {
        font-size:1.4rem;
      }
    }
  }
  .desc {
    text-align: center;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
  }
}

/* Table
============================================================================= */
/* A */
.l-table-A {
  --tc:calc(24.0rem + 1px);
  display:grid;
  border-top:1px solid var(--cc-gray-A);
  font-size:1.6rem;
  line-height:2;
  letter-spacing: .25em;

  @media (width > 640px) {
    grid-template-columns:var(--tc) 1fr;
  }
  @media (width <= 640px) {
    font-size:1.4rem;
  }

  .row {
    display:grid;
    border-bottom:1px solid var(--cc-gray-A);
    padding-block:3.2rem;

    @media (width > 640px) {
      grid-column:1/3;
      grid-template-columns:subgrid;
      align-items: flex-start;
    }
    @media (width <= 640px) {
      gap:.8rem;
      padding-block:2.0rem;
    }
  }

  .th {
    position:relative;
    @media (width <= 640px) {
      font-weight:500;
    }
  }
  .td {
    text-align: justify;
    a {
      display:inline-flex;
      gap:.5em;
      text-decoration: underline;
      text-underline-offset: .4em;

      &.m-i-af-external-A::after {
        margin-top:.5em;
        width:.8em;
      }
    }
  }
}

/* B */
.l-table-B {
  --tc:calc(24.0rem + 1px);
  display:grid;
  grid-template-columns:var(--tc) 1fr;
  font-size:1.3rem;
  line-height:calc(22/13);
  letter-spacing: .05em;

  @media (width > 640px) {
    &[style*="--tc-pc"] {
      --tc:calc(var(--tc-pc) * .1rem + 1px);
    }
  }
  @media (width <= 640px) {
    font-size:1.2rem;
    &[style*="--tc-sp"] {
      --tc:calc(var(--tc-sp) * .1rem + 1px);
    }
  }

  > div {
    grid-column:1/3;
    display:grid;
    grid-template-columns:subgrid;
    align-items: flex-start;
    border-bottom:1px solid var(--cc-white-A);
    padding-block:2.0rem;

    &:first-child {
      padding-top:0;
    }
    @media (width <= 640px) {
      padding-block:2.0rem;
    }
  }

  :is(dt,dd) {
  }
  dt {
    position:relative;
  }
  dd {
  }
}

/* A */
.l-r_table-A {
  --tc:calc(12.0rem + 1px);
  --my-pb:1.6rem;
  display:grid;

  @media (width > 640px) {
    grid-template-columns:var(--tc) 1fr;
  }
  @media (width <= 640px) {
    display:grid;
    gap:2.4rem;
    font-size:1.4rem;
  }

  .row {
    display:grid;

    @media (width > 640px) {
      grid-column:1/3;
      grid-template-columns:subgrid;
    }
    @media (width <= 640px) {
      gap:.8rem;
    }
  }

  .th {
    position:relative;
    font-size:1.6rem;
    line-height:2.2;
    letter-spacing: .24em;
    @media (width > 640px) {
      padding-block:var(--my-pb);
    }
    @media (width <= 640px) {
      border-bottom:1px solid var(--cc-gray-A);
      padding-bottom:.4rem;
      font-weight:500;
    }
    &::after {
      content:"";
      width:100%;
      height:1.1px;
      background-image:var(--grad-B);
      background-size:cover;
      position:absolute;
      left:0;
      bottom:0;
      z-index: 1;
      @media (width <= 640px) {
        width:12.0rem;
        bottom:-1px;
      }
    }
  }
  .td {
    text-align: justify;
    @media (width > 640px) {
      border-bottom:1px solid var(--cc-gray-A);
      padding-block:var(--my-pb);
      padding-left:4.0rem;
    }
    @media (width <= 640px) {
      padding-top:1.6rem;
      padding-inline:.8rem;
    }
  }
}



/* contents
============================================================================= */
.l-contents-A {
  padding-bottom:28.0rem;
  @media (width > 640px) {
    display:grid;
    grid-template-columns:calc(50% - 44.8rem) 1fr;
  }
  @media (width <= 640px) {
    padding-bottom:8.0rem;
    overflow:hidden;
  }
}
body:is(.is-global_menu-open) .l-contents-A-side {
  @media (width <= 640px) {
    z-index:1;
    transition-delay:0s;
  }
}
.l-contents-A-side {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }

  .inner {
    @media (width > 640px) {
      width:100%;
    }
  }
}
.l-contents-A-main {
  --my-pb:10.0rem;
  margin-block:calc(var(--my-pb) * -1);
  @media (width > 640px) {
    width:112.0rem;
  }
  @media (width <= 640px) {
    --my-pb:6.0rem;
  }
  .l-contents-A-main_inner {
    padding-block:var(--my-pb);
  }
}

.l-side-menu_list-A {
  @media (width > 640px) {
    --row:7;
    --gap:2.0rem;
    display:grid;
    gap:var(--gap);
    margin-block:calc(.5em - .5lh);
    margin-left:auto;
    width:29.0rem;
    font-size:1.4rem;
    line-height:1;
    letter-spacing: .25em;
    position:sticky;
    top:calc(50vh - (var(--row) / 2 * 1lh) - ((var(--row) - 1) / 2 * var(--gap)));
  }
  @media (width <= 640px) {
  }
  &::before {
    content:"";
    border-radius:50%;
    width:.8rem;
    height:.8rem;
    background-color:var(--cc-white-B);
    position:absolute;
    top:calc(.5lh - .4rem);
    right:calc(100% + .8rem);
    transition-duration:var(--duration-hover-A),.75s;
    transition-property: opacity,transform;
    pointer-events:none;
    transform:translateY(calc((var(--gap) + 1lh) * var(--current)));
    transition-timing-function: var(--ttf-eio-cubic),var(--ttf-eo-quad);
  }
  &:not(:has(.is-current),[style*="--current"]) {
    &::before {
      opacity:0;
    }
  }
  > li {
    width:fit-content;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
    > a {
      text-underline-offset: .4em;
      color:var(--cc-gray-A);
      transition-duration:var(--duration-hover-A);
      transition-property: color;
      width:fit-content;
      position:relative;
      @media (hover) {
        &:hover {
          color:var(--base-color);
        }
      }
      @media (width > 640px) {
      }
      @media (width <= 640px) {
      }
      &.is-current {
        color:var(--base-color);
        &::before {
          transform:scaleX(1);
        }
      }
      &::before {
        content:"";
        width:calc(100% - .25em);
        border-bottom:1px solid;
        position:absolute;
        bottom:-5px;
        left:0;
        transform-origin:left center;
        transform:scaleX(0);
        transition-duration:var(--duration-hover-A);
        transition-property: transform;
        pointer-events: none;
      }
    }
  }

}


/* contents
============================================================================= */
.l-recruit_interview-splide_wrap {
  padding-block:20.0rem;
  overflow:hidden;
  @media (width <= 640px) {
    padding-block:11.2rem;
  }
  .l-r_heading-A {
    margin-bottom:10.4rem;
    @media (width <= 640px) {
      margin-bottom:12.0rem;
    }
  }
  .inner {
    position:relative;
  }
}

.l-recruit_interview-splide {
  position:static;
  @media (width > 640px) {
    width:126.4rem;
  }
  @media (width <= 640px) {
    width:28.0rem;
  }
  .splide__track {
    overflow:visible;
  }
  .splide__list {
  }
  .splide__arrows {
    display:flex;
    gap:2.4rem;
    position:absolute;
    top:17.6rem;
    right:0;
    z-index: 1;
    @media (width <= 640px) {
      gap:1.6rem;
      top:23.6rem;
      right:3.0rem;
    }
  }
  .splide__arrow {
    --my-color:var(--base-color);
    border-radius:50%;
    border:1px solid;
    width:7.2rem;
    height:7.2rem;
    border-radius:50%;
    @media (width <= 640px) {
      width:4.8rem;
      height:4.8rem;
    }
    > svg {
      width:100%;
      height:auto;
      fill:var(--my-color);
    }
    &.is-prev {
      svg {
        transform:scaleX(-1);
      }
    }
  }
  img {
    border-radius:2.8rem;
    @media (width <= 640px) {
      border-radius:2.0rem;
    }
  }
  .heading {
    padding-block:3.2rem 2.0rem;
  }
  .tags {
    display:flex;
    flex-wrap:wrap;
    margin-bottom:.7rem;
    gap:1.2rem;
    font-size:1.4rem;
    line-height:1.7;
    letter-spacing: .18em;
    @media (width <= 640px) {
      font-size:1.1rem;
    }

    > li {
      border-radius:100px;
      padding:.1rem 1.2rem;
      background-color:#F0EEEB;
    }
  }
  .name {
    display:flex;
    align-items: baseline;
    gap:1.2rem;
    @media (width <= 640px) {
      gap:.8rem;
    }

    .ja {
      font-size:2.0rem;
      line-height:1.7;
      letter-spacing: .18em;
      @media (width <= 640px) {
        font-size:1.6rem;
      }
    }
    .en {
      font-size:1.5rem;
      line-height:1.7;
      letter-spacing: .08em;
      color:#666666;
      @media (width <= 640px) {
        font-size:1.3rem;
      }
    }
  }
}