@charset "UTF-8";

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

Global CSS

・ヘッダー、フッター等のページ共通で使用される要素「.g-×××」

上記はここに記述する

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

/* Global CSS .g-
============================================================================= */

/* Header
----------------------------------------------------------------------------- */
body.is-global_menu-open .g-header {}

body.is-scrolled:not(.is-global_menu-open) .g-header {}

.g-header {
  transition-property: background-color, color;
  transition-duration: var(--duration-hover-A);
  transition-timing-function: var(--ttf-eio-sine);

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--header-height);
    pointer-events: none;
    background-color:var(--cc-white-A);
    position: fixed;
    top: 0;
    left: 0;
    transition-property: opacity,background-color;
    transition-duration: var(--duration-hover-A);
    z-index: 999;
  }
  body:is(.is-header_inversion,.is-global_menu-open) &::before {
    opacity:0;
  }

  @media (width > 640px) {
  }
  @media (width <= 640px) {
    line-height: 1;
    color: var(--base-color);
    will-change: background-color, color;
    background-color:var(--cc-white-A);
  }

  .logo {
    width:11.6rem;
    height:var(--header-height);
    flex-shrink: 0;
    transition-property: width,height;
    transition-duration: var(--duration-hover-A);
    position:fixed;
    top:0;
    left:0;
    z-index: 1000;

    @media (width <= 640px) {
      width:6.8rem;
    }
    body:is(.is-header_inversion,.is-global_menu-open) & {
      @media (width > 640px) {
        width:13.2rem;
        height:10.6rem;
      }
      @media (width <=640px) {
        /* width:7.2rem; */
      }
    }

    >a {
      display: flex;
      align-items: center;
      justify-content: center;
      height:100%;
      position: relative;
      transition-property: background-color,opacity;
      transition-duration: var(--duration-hover-A);

      @media (width <=640px) {
      }

      &::before,
      &::after {
        content: "";
        display:block;
        height:auto;
        -webkit-mask-size:contain;
        mask-size:contain;
        -webkit-mask-repeat:no-repeat;
        mask-repeat:no-repeat;
        position:absolute;
        transition-property: opacity,background-color;
        transition-duration: var(--duration-hover-A);
        pointer-events:none;
      }
      &::before {
        width:5.6rem;
        aspect-ratio:56/43;
        background-color:var(--cc-black-A);
        -webkit-mask-image:url('/assets/img/common/logo_simple.svg');
        mask-image:url('/assets/img/common/logo_simple.svg');
        @media (width <=640px) {
          margin-left:.4rem;
          width:3.6rem;
        }
      }
      body.page_recruit &::before {
      }
      body:is(.is-header_inversion,.is-global_menu-open) &::before {
        opacity:0;
      }
      @media (width <=640px) {
        body:is(.is-global_menu-open) &::before {
          opacity:1;
        }
      }
      &::after {
        width:8.4rem;
        aspect-ratio:84/74;
        background-color:#fff;
        -webkit-mask-image:url('/assets/img/common/logo.svg');
        mask-image:url('/assets/img/common/logo.svg');
        @media (width <=640px) {
          width:4.8rem;
        }
      }
      body:not(.is-header_inversion,.is-global_menu-open) &::after {
        opacity:0;
      }
      body:is(.is-global_menu-open) &::after {
        background-color:var(--cc-black-A);
      }
      @media (width <=640px) {
        body:is(.is-global_menu-open) &::after {
          opacity:0;
        }
      }
      body:is(.is-global_menu-open).page_recruit &::after {
        background-color:#000;
      }
    }
  }

  .header-menu {
    display: flex;
    align-items: center;
    height:var(--header-height);
    position:fixed;
    top:0;
    right:0;
    z-index: 1000;
    transition-property: clip-path;
    transition-duration: var(--duration-hover-A);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    @media (width > 640px) {
      body:is(.is-global_menu-open):not(.page_recruit) & {
        clip-path:polygon(14.0rem 0, 100% 0, 100% 100%, 14.0rem 100%);
      }
      body:is(.is-global_menu-open):is(.page_recruit) & {
        clip-path:polygon(28.0rem 0, 100% 0, 100% 100%, 28.0rem 100%);
      }
    }

    @media (width <=640px) {
      body:is(.is-global_menu-open):is(.page_recruit) & {
        clip-path:polygon(19.2rem 0, 100% 0, 100% 100%, 19.2rem 100%);
      }
    }

    .link {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 14.0rem;
      height: 100%;

      &.recruit {
        background-color: var(--cc-green-A);
      }

      &.company {
        background-color: #000;
      }

      &:is(.recruit,.company) {
        transition-property: opacity;
        transition-duration: var(--duration-hover-A);
        body:is(.is-global_menu-open) & {
          opacity:0;
          pointer-events: none;
        }
      }

      &.translate {
        background-color: var(--cc-black-A);
        transition-property:background-color;
        transition-duration: var(--duration-hover-A);
        position:relative;

        > img {
          transition-property:opacity;
          transition-duration: var(--duration-hover-A);
        }
        &::after {
          content: "";
          margin:auto;
          width:9.4rem;
          height:auto;
          aspect-ratio:94/11;
          background-color:var(--cc-black-A);
          -webkit-mask-image:url('/assets/img/common/header_translate.svg');
          mask-image:url('/assets/img/common/header_translate.svg');
          -webkit-mask-size:contain;
          mask-size:contain;
          -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
          transition-property: opacity,background-color;
          transition-duration: var(--duration-hover-A);
          pointer-events:none;
          position:absolute;
          inset:0;
          opacity:0;
          @media (width <=640px) {
            width:7.1rem;
          }
        }
        body:is(.page_recruit) & {
          background-color:var(--cc-green-A);
          > img {
            opacity:0;
          }
          &::after {
            opacity:1;
            background-color:#000;
          }
        }
      }

      @media (width <=640px) {
        width: 9.6rem;
      }

      @media (hover:hover) {
        &:hover>img {
          opacity: .7;
        }
      }

      >img {
        transition-property: opacity;
        transition-duration: var(--duration-hover-A);
      }
    }
    .separator {
      margin-left: -1px;
      background-color: #fff;
      width: 1px;
      height: 3.0rem;
      transition-property: background-color;
      transition-duration: var(--duration-hover-A);
      position:relative;

      body:is(.page_recruit) & {
        background-color: #000;
      }

      .page_recruit & {
        background-color: var(--cc-green-A);
      }
    }
  }
}

/* グロナビ展開ボタン */
.g-header_menu-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 10.0rem;
  height: var(--header-height);
  background-color: var(--cc-black-A);
  position: relative;
  transition-property: background-color;
  transition-duration: var(--duration-hover-A);

  .page_recruit & {
    background-color: var(--cc-green-A);

    &::before,
    &::after {
      background-color: #000;
    }
  }
  .is-global_menu-open.page_recruit & {
    background-color: #000;

    &::before,
    &::after {
      background-color: #fff;
    }
  }

  @media (width <=640px) {
    width: 6.8rem;
  }

  &::before,
  &::after {
    content: "";
    display: block;
    width: 4.0rem;
    height: 1px;
    background-color: #fff;
    position: absolute;
    transition-property: background-color, transform;
    transition-duration: var(--duration-hover-A);
    will-change: background-color, transform;
    transition-timing-function: var(--ttf-eio-expo);

    @media (width <=640px) {
      width: 2.8rem;
    }
  }

  &::before {
    transform: translateY(-.8rem);

    @media (width <=640px) {
      transform: translateY(-.6rem);
    }
  }

  &::after {
    transform: translateY(.8rem);

    @media (width <=640px) {
      transform: translateY(.6rem);
    }
  }

  .is-global_menu-open &::before {
    transform: rotate(-203.5deg);
  }

  .is-global_menu-open &::after {
    transform: rotate(203.5deg);
  }
}

/* Global Menu */
.g-global_menu {
  background-color:var(--cc-white-A);
  width:100%;
  height:100lvh;
  overflow-y:auto;
  overscroll-behavior: contain;
  z-index: 999;
  position:fixed;
  top:0;
  left:0;
  transition-property: opacity,transform;
  transition-duration: var(--duration-hover-A);
  transform:translate3D(0,0,1px);

  body:is(.page_recruit) & {
    background-color:var(--cc-green-A);
    @media (width > 640px) {
      .inner {
        padding-top:4.0rem;
      }
    }
  }
  body:not(.is-global_menu-open) & {
    opacity:0;
    pointer-events: none;
  }
  @media (width > 640px) {
    display:flex;
    justify-content: center;
    align-items: center;
  }

  @media (width <=640px) {

  }

  .inner {
    @media (width > 640px) {
      display:flex;
      &:has(.menu_list) {
        justify-content: space-between;
        align-items: flex-start;
        width:92.4rem;
      }
      &:has(.recruit_menu_list) {
        flex-direction: column;
        align-items: center;
      }
    }
    @media (width <=640px) {
      display:grid;
      gap:2.8rem;
      min-height:calc(100dvh + 1px);
      padding:10.0rem 2.6rem;
      &:has(.recruit_menu_list) {
        padding-inline:6.0rem;
        padding-top:14.0rem;;
      }
    }
  }
  .menu_list {
    display:grid;
    align-items: flex-start;
    gap:6.4rem;
    @media (width <=640px) {
      gap:2.8rem;
    }
    .menu_item {
      > .link {
        display:block;
        width:fit-content;
        @media (width <=640px) {
          display:flex;
          align-items: flex-end;
          gap:.8rem;
        }
        .tag {
          display:block;
          padding:.4rem .8rem .5rem;
          width:fit-content;
          font-size:1.1rem;
          font-weight:500;
          line-height:1;
          letter-spacing: .28em;
          background-color:var(--cc-blue-A);
          color:#fff;
          @media (width > 640px) {
            margin-top:1.2rem;
          }
        }
        img {
        }
      }
    }
    .sub_list {
      display:grid;
      gap:.8rem;
      margin-top:2.4rem;
      font-size:1.3rem;
      letter-spacing: .28em;
      line-height:1.5;
      font-weight:500;
      @media (width > 640px) {
        margin-bottom:-1.2rem;
      }
      @media (width <=640px) {
        gap:.8rem;
        margin-top:1.6rem;
        margin-bottom:-.4rem;
      }
    }
    .sub_item {
      > a {
        display:block;
        padding-left:1.8rem;
        position:relative;
        @media (width > 640px) {
          width:fit-content;
        }

        &::before {
          content:"";
          display:block;
          margin-block:auto;
          width:1.0rem;
          height:.8rem;
          background-color:var(--cc-black-A);
          clip-path:polygon(0% 0%, 100% 50%, 0% 100%);
          position:absolute;
          left:0;
          inset-block:0;
        }
      }
    }
  }

  .sns_links {
    display: flex;
    align-items: center;
    gap:2.8rem;

    @media (width > 640px) {
      height:var(--header-height);
      position:absolute;
      top:0;
      right:27.6rem;
    }
    @media (width <=640px) {
      justify-content: flex-end;
      gap:1.8rem;
    }
    a {
      display:block;
      width:var(--cc-black-A);
      width:2.5rem;
      z-index: 1000;
      @media (width <=640px) {
        width:2.25rem;
      }
    }
  }
  .recruit_menu_list {
    display:grid;
    gap:5.2rem;
    @media (width > 640px) {
      justify-content: center;
    }
    @media (width <=640px) {
      gap:3.2rem;
    }
    .menu_item {
      > .link {
        display:block;
        width:fit-content;
        @media (width > 640px) {
          margin-inline:auto;
        }
      }
    }
  }
  .recruit_sns_links {
    display: flex;
    align-items: center;
    gap:5.2rem;

    @media (width > 640px) {
      margin-top:8.4rem;
      height:var(--header-height);
    }
    @media (width <=640px) {
      gap:2.0rem;
    }
    a {
      display:block;
      width:3.5rem;
      z-index: 1000;
      background-color:#000;
      @media (width <=640px) {
        width:2.5rem;
      }
    }
  }
}

/* TopicPath
----------------------------------------------------------------------------- */
.g-topicpath {
  --topicpath-pd: 2.0rem;
  padding-inline-start: var(--topicpath-pd);
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: .20em;
  overflow-x: auto;
  z-index: 10;

  @media (width > 640px) {
    border-top: 1px solid var(--cc-gray_line-A);
  }

  @media (width <=640px) {
    --topicpath-pd: 3.0rem;
  }

  >.inner {
    display: flex;
    align-items: center;
    height: 6.0rem;

    @media (width > 640px) {
      margin-inline: auto;
      width: 136.0rem;
    }

    @media (width <=640px) {
      width: 100%;
      font-size: 1.1rem;
    }
  }

  .item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    vertical-align: middle;

    a {}

    &:first-child {
      a {
        display: flex;
        align-items: center;
        gap: .3em;
        padding-bottom: .05em;
      }
    }

    &:not(:first-child) {
      &::before {
        flex-shrink: 0;
        content: "";
        margin-inline: 0.8rem;
        border-bottom: 1px solid var(--base-color);
        width: 1.0rem;
        height: 0;
      }

      > :is(a, span) {
        position: relative;
        top: -.125em;
      }
    }

    &:last-child {
      padding-inline-end: var(--topicpath-pd);
      color: #909090;
    }

    &:not(:last-child) {
      > :is(a) {
        text-underline-offset: 0;
      }
    }
  }
}


/* Pagetop
============================================================================= */
.g-pagetop_button {
  --size: 9.4rem;
  --mb: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-inline: auto var(--mb);
  margin-block: calc((var(--mb) + var(--size)) * -1) var(--mb);
  width: var(--size);
  height: auto;
  aspect-ratio: 1/1;
  background-color: var(--cc-blue-A);
  z-index: 500;
  position: sticky;
  bottom: var(--mb);
  transform: translateY(calc(100% + var(--mb)));
  transition-property: transform, opacity;
  transition-duration: var(--duration-hover-A);
  transition-timing-function: var(--ttf-eo-cubic);

  body.page_recruit & {
    background-color:#000;
  }

  @media (width <=640px) {
    --size: 5.6rem;
    --mb: 1.0rem;
  }

  &::after {
    flex-shrink: 0;
    content: "";
    display: block;
    background-color: #fff;
    width: 1.0rem;
    height: .8rem;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  }
}

body.is-scrolled .g-pagetop_button {
  transform: translateY(0);
}


/* フッター
============================================================================= */
.g-footer {
  background-color: #000;
  padding: 2.4rem;
  color: #fff;

  @media (width > 640px) {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  @media (width <=640px) {
    padding: 3.2rem 3.8rem;
  }

  .page_recruit & {
    @media (width > 640px) {
      grid-template-rows: auto;
      grid-auto-flow: column;
    }

    @media (width <=640px) {
      align-items: center;
      padding: 2.0rem 2.4rem 2.4rem;
    }
  }

  .link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.6rem;
    height: 9.2rem;
    background-color: var(--cc-blue-A);

    @media (width > 640px) {
      grid-row: 1/-1;
      grid-column: 2/3;
    }

    @media (width <=640px) {
      margin-bottom: 2.0rem;
      width: 100%;
      height: 7.0rem;
    }
  }

  .sns_links {
    display: flex;
    gap: 2.8rem;

    @media (width > 640px) {}

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

    .page_recruit & {
      @media (width > 640px) {
        gap: 3.6rem;
        grid-column: 2/3;
      }

      @media (width <=640px) {
        justify-content: flex-end;
        margin-bottom: 2.4rem;
      }
    }

    a {
      display: block;
      background-color: #fff;
    }
  }

  .privacy_copyright {
    @media (width > 640px) {
      display: flex;
      flex-direction: row-reverse;
      align-items: baseline;
      gap: 2.8rem;
      margin-block: auto;
    }

    @media (width <=640px) {}

    .privacy_link {
      display: block;
      width: fit-content;
      letter-spacing: .16em;
      text-decoration: underline;

      @media (width <=640px) {
        margin-bottom: .4rem;
        font-size: 1.3rem;
      }

      @media (hover:hover) {
        &:hover {
          text-decoration: none;
        }
      }

      @media (width > 640px) {}
    }

    .copyright {
      font-size: 1.2rem;
      letter-spacing: .16em;

      @media (width <=640px) {}
    }
  }
}


/* アクセス
============================================================================= */
.g-access {
  @media (width > 640px) {

  }
  @media (width <= 640px) {
  }
  .access-wrap {
    display:grid;
    @media (width > 640px) {
      grid-template-columns: repeat(4,1fr);
      align-items: flex-start;
      gap:4.0rem 3.8rem;
    }
    & > .heading:first-child {
      @media (width > 640px) {
        margin-bottom:0;
      }
      @media (width <= 640px) {
        margin-bottom:3.2rem;
      }
    }
    .heading {
      margin-bottom:2.8rem;
      padding-block:.8rem;
      padding-left:1.6rem;
      font-size:1.8rem;
      font-weight:700;
      letter-spacing: .20em;
      line-height:1;
      .is-ftest & {
        font-weight:600;
      }
      @media (width > 640px) {
        display:flex;
        align-items: center;
        height:4.6rem;
      }
      @media (width <= 640px) {
        margin-bottom:1.6rem;
        padding-inline:1.2rem;
        font-size:1.6rem;
      }
      &.p-bg-white-A {
        letter-spacing: .10em;
        @media (width <= 640px) {
          padding-block:.6rem;
        }
        :not(.p-bg-black-A) & {
          border:1px solid;
          background-color:#fff;
        }
      }
      &.p-bg-blue-A {
        @media (width <= 640px) {
          padding-block:1.2rem;
          line-height:calc(49/36);
        }
      }

      &.-pc_ls_min {
        @media (width > 640px) {
          letter-spacing: .15em;
        }
      }
      &.-pc_min {
        @media (width > 640px) {
          font-size:1.5rem;
        }
      }
    }
    > .-pc_col1 {
      @media (width > 640px) {
        grid-column: span 1;
      }
    }
    > .-pc_col2 {
      @media (width > 640px) {
        grid-column: span 2;
      }
    }
    > .-pc_col3 {
      @media (width > 640px) {
        grid-column: span 3;
      }
    }
    > .-pc_col4 {
      @media (width > 640px) {
        grid-column: span 4;
      }
    }
    .block {
      @media (width > 640px) {
        display:grid;
        grid-template-columns: subgrid;
        grid-template-rows: auto 1fr;
        align-content: flex-start;
        height:100%;

        &:has(> .heading.p-bg-blue-A:first-child) {
          padding-top:1.6rem;
        }
      }
      @media (width <= 640px) {
        &:not(:first-of-type) {
          padding-top:3.2rem;
        }
      }
      .heading {
        @media (width > 640px) {
          grid-column:1/-1;
        }
      }
      .list {
        display:grid;
        @media (width > 640px) {
          grid-column:1/-1;
          grid-template-columns: subgrid;
          row-gap:4.0rem;
          &.-pc_col2 {
            grid-template-columns:repeat(2,1fr);
          }
        }
        @media (width <= 640px) {
          gap:2.4rem;
        }
        > div {
          @media (width > 640px) {
            padding-inline:1.4rem;
            display:flex;
            flex-direction: column;
          }
        }
        dt {
          margin-bottom:.8rem;
          font-weight:700;
          font-size:1.6rem;
          letter-spacing: .18em;
          line-height:1.5;
          @media (width <= 640px) {
            margin-bottom:.6rem;
          }
          .is-ftest & {
            font-weight:600;
          }
          @media (width > 640px) {
            display:flex;
            flex-direction: column;
          }
        }
        dd {
          font-size:1.3rem;
          letter-spacing: .18em;
          line-height:calc(24/13);
          @media (width > 640px) {
            flex:1;
            display:flex;
            flex-direction: column;
          }
          @media (width <= 640px) {
            line-height:1.6;
          }
          > p {
            @media (width > 640px) {
              margin-bottom:1.2rem;
            }
          }
          > a {
            --h:2.8rem;
            --b:1px;
            --deg: -32deg;
            --w-inner:calc( (var(--h) - var(--b)) * tan(var(--deg)) );
            --L:calc( (var(--h) - var(--b)) / cos(var(--deg)) );
            display:flex;
            align-items: center;
            padding-left:1.2rem;
            height:var(--h);
            font-size:1.2rem;
            position:relative;
            clip-path:polygon(0 0, calc(100% + var(--w-inner)) 0, calc(100% + 1px) 100%, 0 100%);
            @media (width > 640px) {
              margin-top:auto;
            }
            @media (width <=640px) {
              margin-top:1.0rem;
            }
            .p-bg-black-A & {
              border-block:var(--b) solid;
              border-left:var(--b) solid;
              &::after {
                content:"";
                border-right:var(--b) solid;
                height:var(--L);
                transform:rotate(var(--deg));
                transform-origin:right bottom;
                position:absolute;
                right:0;
                bottom:0;
              }
            }
            :not(.p-bg-black-A) & {
              background-color:var(--cc-black-A);
              color:#fff;
            }
          }
        }
      }
    }
  }
}


/* Sample
============================================================================= */
.g-selectorName {
  @media (width > 640px) {}

  @media (width <=640px) {}
}