@charset "UTF-8";

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

Global CSS

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

上記はここに記述する

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

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

/* Header
----------------------------------------------------------------------------- */
body.is-global_menu-open .g-header {
  background-color:transparent;
}
.g-header {
  display:flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
  height:var(--header-height-scrolled);
  line-height:1;
  /* background-color:var(--base-bg); */
  z-index: 1000;
  position:fixed;
  top:0;
  transition-property:clip-path,height;
  transition-duration:var(--duration-hover-A);
  transition-timing-function: var(--ttf-eio-sine);
  will-change:clip-path;

  @media (width > 640px) {
    min-width:var(--pc-min-width);
  }
  @media (width <= 640px) {
    gap:.5rem;
  }

  .name {
    flex-shrink: 0;
    height:100%;
    font-size:2.8rem;
    letter-spacing: .15em;
    transition: opacity 0.6s;
    @media (width <= 640px) {
      font-size:2.4rem;
    }
    .is-scrolled & {
      opacity: 0;
      pointer-events: none;
    }

    > a {
      display:flex;
      align-items: center;
      padding-inline:4.8rem;
      height:100%;
      @media (width <= 640px) {
        padding-inline:2.0rem;
      }

    }
  }
}

/* グロナビ展開ボタン */
.g-header_menu-btn {
  flex-shrink: 0;
  display:flex;
  justify-content: center;
  align-items: center;
  width:16.0rem;
  height:var(--header-height);

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

  &::before,
  &::after {
    content:"";
    display:block;
    width:6.4rem;
    height:1px;
    background-color:var(--base-color);
    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) {
      content:"";
      display:block;
      background-color:var(--base-color);
      position:absolute;
      transition-property:background-color,transform;
      transition-duration:var(--duration-hover-A);
    }
  }
  &::before {
    transform:translateY(-5px);
    @media (width <= 640px) {
      transform:translateY(-4px);
    }
  }
  &::after {
    transform:translateY(5px);
    @media (width <= 640px) {
      transform:translateY(4px);
    }
  }

  .is-global_menu-open &::before {
    transform:rotate(-30deg);
  }
  .is-global_menu-open &::after {
    transform:rotate(30deg);
  }
}
.site_recruit .g-header_menu-btn {
  .is-global_menu-open &::before,
  .is-global_menu-open &::after {
    background-color:var(--base-color-reverse);
  }
}

/* Global Menu */
.g-gnav_active-slide {
  transition-property:clip-path;
  transition-duration:.5s;
  transition-timing-function: var(--ttf-eio-cubic);
  backface-visibility: hidden;
  @media (width > 640px) {
    clip-path: inset(0 0 0 0);
  }
  body:is(.is-global_menu-open) & {
    @media (width > 640px) {
      clip-path: inset(0 var(--pc-gm-open-width) 0 0);
    }
  }
}
.g-global_menu {
  @media (width > 640px) {
    background-color: rgba(0, 0, 0, 0.2);
  }
  @media (width <= 640px) {
    background-color: rgba(0, 0, 0, 0.9);
  }
  body:not(.is-global_menu-open) & {
    pointer-events:none;
    clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  body:is(.is-global_menu-open) & {
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  width:100%;
  height:100dvh;
  z-index: 999;
  color:var(--base-color);
  position:fixed;
  right:0;
  top:0;
  transition-property:clip-path;
  transition-duration:.5s;
  transition-timing-function: var(--ttf-eio-cubic);
  backface-visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;

  @media (width > 640px) {
    width:var(--pc-gm-open-width);
  }
  @media (width <= 640px) {
    --main-gap:calc(2.4rem - 1lh + 1em);
    --sub-gap:calc(1.6rem - 1lh + 1em);
    padding-block:calc(var(--header-height) + 4.0rem) 10.0rem;
  }

  > .inner {
    position:relative;
    overflow:hidden;
    @media (width > 640px) {
      padding:12.8rem 9.0rem;
      padding-left:13.0rem;
    }
    @media (width <= 640px) {
      padding-bottom:2.4rem;
    }
  }

  .main_links {
    display:grid;
    @media (width > 640px) {
      grid-template-columns:auto auto;
      grid-template-rows:auto auto auto;
      gap:8.0rem 10.0rem;
    }
    @media (width <= 640px) {
      gap:4.0rem;
    }
  }
  .main_links-item {
    width:fit-content;
    @media (width > 640px) {
      &:first-child {
        grid-row:1/2;
        grid-column:1/2;
      }
      &.-recruit {
        grid-row:1/2;
        grid-column:2/3;
      }
    }
    @media (width <= 640px) {
      &:has(.js-accordion-button) {
        width:100%;
      }
    }
  }
  .main_links-item-link {
    border-bottom:1px solid;
    padding-bottom:.8rem;
    display:flex;
    align-items: baseline;
    gap:1.6rem;
    width:100%;
    position:relative;


     .en {
        font-size:2.4rem;
        line-height:1;
        letter-spacing: .08em;
     }
     .ja {
        font-size:1.2rem;
        line-height:1.5;
        letter-spacing: .12em;
        color:var(--cc-gray-A);
     }

     > i {
      display:flex;
      justify-content: center;
      align-items: center;
      width:1.8rem;
      height:1.8rem;
      position:absolute;
      right:0;

      &::before,
      &::after {
        content:"";
        display:block;
        width:100%;
        height:1px;
        background-color:var(--base-color);
        position:absolute;
        transition-property:transform;
        transition-duration:.5s;
      }
    }
    &:not([aria-expanded="true"]) {
      i::after {
        transform:rotate(-90deg);
      }
    }
    &:is([aria-expanded="true"]) {
      i::before {
        transform:rotate(180deg);
      }
    }
  }
  .sub_links {
    display:grid;
    gap:2.4rem;
    padding-top:3.2rem;
    @media (width <= 640px) {
      gap:2.0rem;
    }
  }
  .sub_links-item {
    width:fit-content;
    @media (width > 640px) {
      &:first-child {
        grid-column:1/-1;
      }
    }
  }
  .sub_links-item-link {
    display:flex;
    align-items: baseline;
    gap:.8rem;
    width:100%;
    @media (width <= 640px) {
      flex-direction: column;
      gap:.4rem;
    }

     .en {
        font-size:1.8rem;
        line-height:1.1;
        letter-spacing: .08em;
     }
     .ja {
        font-size:1.0rem;
        line-height:1.5;
        letter-spacing: .12em;
        color:var(--cc-gray-A);
        @media (width <= 640px) {
          font-size:1.2rem;
        }
     }
  }
  .sns_links {
    display:flex;
    gap:3.2rem;
    margin-top:8.0rem;
    font-size:1.5rem;
    line-height:1;
    letter-spacing: .08em;
    @media (width <= 640px) {
      flex-direction: column;
      gap:2.4rem;
      margin-top:6.4rem;
    }
    .item {
      @media (width <= 640px) {
        width:fit-content;
      }
    }
    .link {
      display:flex;
      align-items: center;
      border-bottom:1px solid;
      gap:.8rem;
      padding-bottom:.6rem;
    }
  }
  .logo {
    position:absolute;
    right:4.8rem;
    bottom:4.8rem;
    @media (width <= 640px) {
      right:4.0rem;
      bottom:0;
    }
  }
}

/* Recruit */
body.is-global_menu-open .g-recruit_header {
  .name .m-i-af-recruit_logo::after {
    @media (width <= 640px) {
      background-color:var(--base-color-reverse);
    }
  }
}
.g-recruit_header {
  display:flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
  height:var(--header-height-scrolled);
  line-height:1;
  /* background-color:var(--base-bg); */
  z-index: 1000;
  position:fixed;
  top:0;
  transition-property:clip-path,height;
  transition-duration:var(--duration-hover-A);
  transition-timing-function: var(--ttf-eio-sine);
  will-change:clip-path;

  &.is-dark {
    .name .m-i-af-recruit_logo::after,
    .g-header_menu-btn::before,
    .g-header_menu-btn::after {
      background-color:var(--base-color-reverse);
    }
  }

  @media (width > 640px) {
    min-width:var(--pc-min-width);
  }
  @media (width <= 640px) {
    gap:.5rem;
  }

  .name {
    flex-shrink: 0;
    height:100%;
    font-size:2.8rem;
    letter-spacing: .15em;
    @media (width <= 640px) {
      font-size:2.4rem;
    }

    > a {
      display:flex;
      align-items: center;
      padding-inline:4.8rem;
      height:100%;
      @media (width <= 640px) {
        padding-inline:2.0rem;
      }
      &.m-i-af-recruit_logo::after {
        transition-duration:var(--duration-hover-A);
        transition-property:background-color;
      }
    }
  }
}

.g-recruit_global_menu {
  --base-color:var(--cc-black-A);
  body:not(.is-global_menu-open) & {
    pointer-events:none;
    clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  body:is(.is-global_menu-open) & {
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  width:100%;
  height:100dvh;
  z-index: 999;
  color:var(--base-color);
  position:fixed;
  right:0;
  top:0;
  transition-property:clip-path;
  transition-duration:.5s;
  transition-timing-function: var(--ttf-eio-cubic);
  backface-visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color:#fff;
  background-image:url(/assets/images/common/recruit_menu-bg.webp);
  background-size:cover;
  background-position:center;

  @media (width > 640px) {
    width:var(--pc-gm-open-width);
  }
  @media (width <= 640px) {
    --main-gap:calc(2.4rem - 1lh + 1em);
    --sub-gap:calc(1.6rem - 1lh + 1em);
    padding-block:calc(var(--header-height) + 4.0rem) 10.0rem;
  }

  > .inner {
    position:relative;
    overflow:hidden;
    @media (width > 640px) {
      padding:12.8rem 9.0rem;
      padding-left:13.0rem;
    }
    @media (width <= 640px) {
      padding-bottom:2.4rem;
    }
  }

  .main_links {
    display:grid;
    gap:2.8rem;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
  }
  .main_links-item {
    width:fit-content;
    @media (width > 640px) {
      &:first-child {
        grid-column:1/-1;
      }
    }
    @media (width <= 640px) {
      &:has(.js-accordion-button) {
        width:100%;
      }
    }
  }
  .main_links-item-link {
    display:flex;
    align-items: baseline;
    gap:.8rem;
    width:100%;
    position:relative;

    .en {
      font-size:2.4rem;
      line-height:1;
      letter-spacing: .08em;
    }
    .ja {
      font-size:1.2rem;
      line-height:1;
      letter-spacing: .20em;
      color:var(--cc-gray-B);
    }
  }
  .sub_links {
    display:grid;
    gap:1.6rem;
    padding-top:2.0rem;
    @media (width <= 640px) {
    }
  }
  .sub_links-item {
    display:flex;
    align-items: center;
    width:fit-content;
    gap:.8rem;
    @media (width > 640px) {
    }
    &::before {
      content:"";
      border-bottom:1px solid;
      width:1.2rem;
    }
  }
  .sub_links-item-link {
    display:block;
    font-size:1.5rem;
    line-height:1.2;
    letter-spacing: .20em;
    @media (width <= 640px) {
    }
  }
  .sns_links {
    display:flex;
    align-items: center;
    margin-top:7.2rem;
    font-size:1.6rem;
    line-height:1;
    letter-spacing: .07em;
    > dt {
      flex-shrink: 0;
      width:6.9rem;
    }
    > dd {
      flex-shrink: 0;
      &:first-of-type {
        border-left:1px solid;
      }
      &:last-of-type {
        border-right:1px solid;
      }
      & + dd {
        border-left:1px dashed;
      }
    }
    .link {
      display:block;
      padding-inline:1.6rem;
      &::before {
        width:2.0rem;
      }
    }
  }
  .corporate_link {
    display:flex;
    align-items: baseline;
    gap:1.0rem;
    margin-top:5.2rem;
    font-size:1.6rem;
    line-height:1;
    letter-spacing: .07em;
    text-decoration: underline;
    text-underline-offset: .3em;
  }
}

.g-canvas {
  width:100%;
  height:100lvh;
  position:fixed;
  top:0;
  left:0;
  pointer-events: none;
  z-index: -1;
  :is(canvas,img) {
    width:100%;
    height:100%;
    position:absolute;
  }
  img {
    opacity: 0.1;
  }

  &.is-recruit {
  }
}


/* TopicPath
----------------------------------------------------------------------------- */
.site_recruit .g-topicpath {
  justify-content: flex-end;;
}
.g-topicpath {
  --topicpath-pd:2.0rem;
  display:flex;
  align-items: center;
  padding-inline-start:var(--topicpath-pd);
  height:5.0rem;
  font-size:1.3rem;
  line-height:1.5;
  letter-spacing: .08em;
  overflow-x:auto;
  position:absolute;
  z-index:10;

  @media (width > 640px) {
    margin-inline:auto;
    padding-inline:6.4rem;
    inset-inline:0;
  }
  @media (width <= 640px) {
    --topicpath-pd:1.5rem;
    width:100%;
    font-size:1.2rem;
  }

  > .item {
    flex-shrink: 0;
    vertical-align: middle;

    a {
      transition:opacity var(--duration-hover-A);
    }

    &:first-child {
      a {
        display:flex;
        align-items: center;
        gap:.3em;
        padding-bottom:.05em;
      }
    }
    &:not(:first-child) {
      &::before {
        content:"";
        display:inline-block;
        margin-bottom:0.2rem;
        margin-inline:0.6rem;
        border-block-start:1px solid;
        border-inline-end:1px solid;
        width:0.6rem;
        height:0.6rem;
        transform:rotate(45deg);
      }
    }
    &:last-child {
      padding-inline-end:var(--topicpath-pd);
    }
    &:not(:last-child) {
      > :is(a) {
        /* text-decoration: underline; */
        text-underline-offset: 0;
      }
    }
  }
}


/* ZABO
============================================================================= */
.g-zabo {
  overflow: hidden;
  pointer-events: none;
  position: relative;
  display: flex;
  justify-content: center;
  @media (width > 640px) {
    padding-bottom:8rem;
  }
  @media (width <= 640px) {
    padding-bottom:1.6rem;
  }
  .target {
    display: block;
    margin: auto;
    height: auto;
    width: 87vw;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
  }
  video.target {
    mask: url(#maskPath);
  }
  svg {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
}

/* Contact link
============================================================================= */
.g-contact_link {
  border-top:1px solid;

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

  .link {
    display:block;
    padding-block:14.0rem;
    @media (width <= 640px) {
      padding-block:4.8rem;
    }
    &:before {
      content: "";
      display: block;
      background-color: rgba(255, 255, 255, 0.0);
      backdrop-filter: blur(10px);
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .inner {
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .text {
    display:grid;
    gap:3.2rem;
    @media (width <= 640px) {
      gap:1.2rem;
    }

    .en {
      font-size:8.0rem;
      letter-spacing: .08em;
      line-height:1;
      @media (width <= 640px) {
        font-size:3.2rem;
      }
    }
    .ja {
      font-size:1.4rem;
      letter-spacing: .12em;
      line-height:2;
      @media (width <= 640px) {
        font-size:1.0rem;
      }
    }
  }
}


/* Footer
----------------------------------------------------------------------------- */

.g-footer {
  padding-block:12.0rem 8.0rem;
  border-top:1px solid;

  @media (width <= 640px) {
    padding-block:8.0rem 4.0rem;
  }

  > .inner {
    display:grid;
    position:relative;
    @media (width > 640px) {
      grid-template-rows:auto auto auto 1fr auto;
      grid-template-columns:1fr auto auto auto;
      align-items: flex-start;
      gap:4.0rem 8.0rem;
      padding-right:8.0rem;
    }
    @media (width <= 640px) {
      gap:5.6rem;
    }
  }

  .company {
    @media (width > 640px) {
      grid-row:1/-2;
      grid-column:1/2;
    }
    @media (width <= 640px) {
      margin-bottom:.8rem;
    }
    .companyname {
      margin-top:5.0rem;
      margin-bottom:1.2rem;
      font-size:2.0rem;
      line-height:1;
      letter-spacing: .12em;
      @media (width <= 640px) {
        margin-top:5.0rem;
        margin-bottom:2.0rem;
        font-size:1.8rem;
      }
    }
    .name {
      margin-bottom:4.8rem;
      font-size:2.6rem;
      line-height:1;
      letter-spacing: .12em;
      @media (width <= 640px) {
        margin-bottom:4.0rem;
        font-size:2.4rem;
      }
    }
    .address {
      margin-bottom:1.5rem;
      font-size:1.5rem;
      line-height:2;
      letter-spacing: .12em;
      @media (width <= 640px) {
        margin-bottom:2.4rem;
        font-size:1.4rem;
      }
    }
    .tel {
      border-bottom:1px solid;
      padding-bottom:.4rem;
      width:fit-content;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .12em;
      @media (width <= 640px) {
        padding-bottom:.2rem;
      }
    }
  }
  .main_links {
    display:grid;
    @media (width > 640px) {
      grid-row:1/-1;
      grid-column:2/-1;
      grid-template-rows:subgrid;
      grid-template-columns:subgrid;
    }
    @media (width <= 640px) {
      gap:3.2rem;
    }
  }
  .main_links-item {
    @media (width > 640px) {
      width:fit-content;
      min-width:7.2rem;
      &:nth-child(2),
      &:nth-child(3) {
        grid-row:1/-1;
      }
    }
    @media (width <= 640px) {
      border-bottom:1px solid;
      width:fit-content;

      &:has(.js-accordion-button) {
        width:100%;
      }
    }
  }
  .main_links-item-link {
    display:block;
    padding-bottom:.6rem;
    width:100%;
    font-size:1.8rem;
    line-height:1;
    letter-spacing: .08em;
    position:relative;
    @media (width > 640px) {
      border-bottom:1px solid;
    }
    @media (width <= 640px) {
      display:flex;
      align-items: center;
      padding-bottom:.8rem;

      &.js-accordion-button {
        margin-bottom:1.6rem;
      }
    }
    > i {
     display:flex;
     justify-content: center;
     align-items: center;
     width:1.8rem;
     height:1.8rem;
     position:absolute;
     right:0;

     &::before,
     &::after {
       content:"";
       display:block;
       width:100%;
       height:1px;
       background-color:var(--base-color);
       position:absolute;
       transition-property:transform;
       transition-duration:.5s;
     }
   }
   &:not([aria-expanded="true"]) {
     i::after {
       transform:rotate(-90deg);
     }
   }
   &:is([aria-expanded="true"]) {
     i::before {
       transform:rotate(180deg);
     }
   }
  }
  .sub_links {
    display:grid;
    gap:2.4rem;
    padding-top:3.2rem;
    @media (width <= 640px) {
      gap:1.2rem;
      padding-block:1.6rem 3.2rem;
      padding-left:1.6rem;
    }
  }
  .sub_links-item {
    width:fit-content;
    @media (width > 640px) {
      &:first-child {
        grid-column:1/-1;
      }
    }
  }
  .sub_links-item-link {
    display:grid;
    row-gap:.8rem;
    width:100%;
    &:has(.number) {
      grid-template-rows:auto auto;
      grid-template-columns:2.8rem 1fr;
    }
    @media (width > 640px) {
    }
    @media (width <= 640px) {
      gap:.4rem;
    }

    .number {
      grid-row:1/-1;
      margin-top:.4em;
      font-size:1.0rem;
      line-height:1;
      letter-spacing: .05em;
    }
     .en {
        font-size:1.6rem;
        line-height:1.1;
        letter-spacing: .08em;
     }
     .ja {
        font-size:1.2rem;
        line-height:1.5;
        letter-spacing: .12em;
        color:var(--cc-gray-A);
        @media (width <= 640px) {
          font-size:1.2rem;
        }
     }
  }
  .sns_links {
    display:grid;
    gap:3.2rem;
    font-size:1.5rem;
    line-height:1;
    letter-spacing: .08em;
    @media (width > 640px) {
      grid-row:4/5;
      grid-column:-2/-1;
      margin-top:2.4rem;
    }
    @media (width <= 640px) {
    }
    .item {
      @media (width <= 640px) {
        width:fit-content;
      }
    }
    .link {
      display:flex;
      align-items: center;
      border-bottom:1px solid;
      gap:.8rem;
      padding-bottom:.6rem;
    }
  }
  .last {
    display:grid;
    gap:2.8rem;
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
    .privacy {
      border-bottom:1px solid;
      width:fit-content;
      font-size:1.5rem;
      line-height:1;
      letter-spacing: .08em;
    }
    .copyright {
      font-size:1.4rem;
      line-height:1.1;
      letter-spacing: .08em;
    }
  }
  .logo {
    position:absolute;
    right:0;
    bottom:0;
    @media (width <= 640px) {
      right:3.0rem;
      bottom:4.0rem;
    }
  }
}

/* Recruit Footer */
.g-recruit_footer {
  padding-block:12.8rem 9.2rem;

  @media (width <= 640px) {
    padding-block:9.6rem 7.2rem;
  }

  > .inner {
    display:grid;
    position:relative;
    @media (width > 640px) {
      grid-template-rows:auto auto auto auto 1fr auto;
      grid-template-columns:1fr auto auto auto;
      align-items: flex-start;
      gap:4.8rem 10.4rem;
    }
    @media (width <= 640px) {
      gap:6.4rem;
    }
  }

  .company {
    @media (width > 640px) {
      grid-row:1/-1;
      grid-column:1/2;
      display:flex;
      flex-direction: column;
      height:100%;
    }
    @media (width <= 640px) {
      margin-bottom:.8rem;
    }
    .recruit_logo {
      margin-bottom:7.2rem;
      width:16.0rem;
      @media (width <= 640px) {
        margin-bottom:4.8rem;
        width:13.0rem;
      }
      .m-i-af-recruit_logo {
        width:100%;
        &::after {
          width:100%;
        }
      }
    }
    .name {
      margin-bottom:1.6rem;
      font-size:1.6rem;
      line-height:2;
      letter-spacing: .20em;
      @media (width <= 640px) {
        margin-bottom:1.2rem;
        font-size:1.5rem;
      }
    }
    .address {
      margin-bottom:.8rem;
      font-size:1.4rem;
      line-height:2;
      letter-spacing: .20em;
      @media (width <= 640px) {
        margin-bottom:.6rem;
        font-size:1.3rem;
      }
    }
    .tel {
      margin-bottom:7.2rem;
      width:fit-content;
      font-size:1.4rem;
      line-height:2;
      letter-spacing: .10em;
      @media (width <= 640px) {
        margin-bottom:2.4rem;
        font-size:1.3rem;
      }
    }
    .sns_links {
      display:flex;
      align-items: center;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .12em;
      @media (width <= 640px) {
        font-size:1.5rem;
      }
      > dt {
        flex-shrink: 0;
        width:6.6rem;
        @media (width <= 640px) {
          width:6.9rem;
        }
      }
      > dd {
        flex-shrink: 0;
        &:first-of-type {
          border-left:1px solid;
        }
        &:last-of-type {
          border-right:1px solid;
        }
        & + dd {
          border-left:1px dashed;
        }
      }
      .link {
        display:block;
        padding-inline:1.6rem;
        &::before {
          width:2.0rem;
        }
      }
    }
    .corporate_link {
      display:flex;
      align-items: baseline;
      width:fit-content;
      gap:1.0rem;
      margin-top:auto;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .12em;
      text-decoration: underline;
      text-underline-offset: .3em;
      @media (width <= 640px) {
        margin-top:2.4rem;
        font-size:1.5rem;
      }
    }
  }
  .main_links {
    display:grid;
    @media (width > 640px) {
      grid-row:1/-2;
      grid-column:2/-1;
      grid-template-columns:subgrid;
      grid-template-rows:subgrid;
      grid-auto-flow: column;
    }
    @media (width <= 640px) {
      gap:2.2rem;
    }
  }
  .main_links-item {
    width:fit-content;
    @media (width > 640px) {
      &.-interview {
        grid-row:2/-1;
        grid-column:2/3;
      }
      &.-join_our_team {
        grid-row:2/4;
        grid-column:3/4;
      }
      &.-entry {
        grid-row:4/5;
        grid-column:3/4;
      }
    }
    @media (width <= 640px) {
      &:has(.js-accordion-button) {
        width:100%;
      }
    }
  }
  .main_links-item-link {
    display:grid;
    gap:1.6rem;
    width:100%;
    position:relative;
    @media (width <= 640px) {
      display:flex;
      align-items: baseline;
      gap:1.2rem;
    }

    .en {
      font-size:2.4rem;
      line-height:1;
      letter-spacing: .08em;
    }
    .ja {
      font-size:1.2rem;
      line-height:1;
      letter-spacing: .20em;
      color:var(--cc-gray-A);
    }
  }
  .sub_links {
    display:grid;
    gap:1.8rem;
    padding-top:4.0rem;
    color:var(--cc-gray-A);
    @media (width <= 640px) {
      padding-top:1.6rem;
      gap:1.2rem;
    }
  }
  .sub_links-item {
    display:flex;
    align-items: center;
    width:fit-content;
    gap:.8rem;
    @media (width > 640px) {
    }
    &::before {
      content:"";
      border-bottom:1px solid;
      width:1.2rem;
    }
  }
  .sub_links-item-link {
    display:block;
    font-size:1.4rem;
    line-height:1.2;
    letter-spacing: .20em;
    @media (width <= 640px) {
      font-size:1.3rem;
    }
  }
  .last {
    @media (width > 640px) {
      grid-column:2/-1;
      display:flex;
      gap:6.4rem;
    }
    @media (width <= 640px) {
      display:grid;
      gap:2.4rem;
    }
    .privacy {
      border-bottom:1px solid;
      width:fit-content;
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .12em;
      @media (width <= 640px) {
      }
    }
    .copyright {
      font-size:1.4rem;
      line-height:1;
      letter-spacing: .12em;
    }
  }
  .logo {
    position:absolute;
    @media (width > 640px) {
      left:100%;
      bottom:-4.8rem;
    }
    @media (width <= 640px) {
      right:3.0rem;
      bottom:4.0rem;
    }
  }
}

/* Pagetop
----------------------------------------------------------------------------- */
.g-pagetop_button {
  /* display:flex; */
  display:none;
  justify-content: center;
  align-items: center;
  width:8.0rem;
  height:auto;
  aspect-ratio: 1/1;
  z-index:500;
  position:fixed;
  bottom:0;
  right:0;
  transform:translateY(100%);
  transition-property: transform,opacity;
  transition-duration: var(--duration-hover-A);
  transition-timing-function: var(--ttf-eo-cubic);
  @media (width <= 640px) {
    bottom:calc(var(--sp-fixed-height));
    transform:translateY(calc(100% + var(--sp-fixed-height)));
  }
  &::after {
    background-color:#fff;
    width:50%;
    transform:rotate(-90deg);
  }
}
body.is-scrolled .g-pagetop_button {
  transform:translateY(0);
}


/* サービスリンク
============================================================================= */
.g-service_links {
  --my-cgap:2.0rem;
  margin-inline:auto;
  justify-content: center;
  @media (width > 640px) {
    display:flex;
    flex-wrap:wrap;
    gap:4.4rem var(--my-cgap);
    max-width:160.0rem;
  }
  @media (width <= 640px) {
    display:grid;
    gap:2.4rem;
  }
  .item {
    @media (width > 640px) {
      display:flex;
      align-items: flex-end;
      gap:var(--my-cgap);
    }
    @media (width <= 640px) {
    }

    &:not(.-not_separator) {
      @media (width > 640px) {
        &::before {
          content:"";
          width:2.6rem;
          height:6.6rem;
          clip-path:polygon(calc(100% - 1px) 0,100% 1px,1px 100%,0 calc(100% - 1px));
          background-color:var(--base-color);
        }
      }
    }
  }
  .item-link {
    display:grid;
    gap:1.2rem;
    &[href*="signdisplay"] {
      --my-color:var(--cc-shinshu-A);
    }
    &[href*="print"] {
      --my-color:var(--cc-green-A);
    }
    &[href*="silkscreen"] {
      --my-color:var(--cc-natane-A);
    }
    &[href*="indigodyeing"] {
      --my-color:var(--cc-ruri-A);
    }
    &[href*="design"] {
      --my-color:var(--cc-seiheki-A);
    }
    &[href*="webdesign"] {
      --my-color:var(--cc-taisha-A);
    }
    &[href*="architecture"] {
      --my-color:var(--cc-ayame-A);
    }
    @media(hover:hover) {
      &:hover {
        color:var(--my-color);
        .en {
          border-bottom-color:var(--my-color);
        }
      }
    }
    &.-active {
      pointer-events:none;
      .en {
        opacity:.6;
      }
    }
    @media (width > 640px) {
    }
    @media (width <= 640px) {
    }
    .ja {
      font-size:1.4rem;
      letter-spacing: .15em;
      line-height:1;
      color:var(--cc-gray-A);
      @media (width <= 640px) {
        font-size:1.1rem;
      }
    }
    .en {
      font-size:6.4rem;
      letter-spacing: .05em;
      line-height:1.1;
      transition-property: color,border-color;
      transition-duration: var(--duration-hover-A);
      @media (width > 640px) {
        border-bottom:1px solid transparent;
      }
      @media (width <= 640px) {
        font-size:3.2rem;
      }
    }
  }
}


/* エントリーリンク
============================================================================= */
.g-entry_link {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
  .link {
    display:block;
    height:48.0rem;
    @media (width <= 640px) {
      height:21.6rem;
    }

    @media (hover:hover) {
      &:hover {
        .inner > i {
          background-color:var(--base-color);
          &::after {
            background-color:var(--base-color-reverse);
          }
        }
      }
    }
  }
  .inner {
    display:flex;
    align-items: center;
    justify-content: space-between;
    height:100%;
    font-size:16.0rem;
    line-height:1.15;
    letter-spacing: .05em;
    @media (width <= 640px) {
      font-size:4.0rem;
    }
    > i {
      display:flex;
      align-items: center;
      justify-content: center;
      border:1px solid;
      border-radius:50%;
      width:12.0rem;
      height:auto;
      aspect-ratio: 1/1;
      transition-duration:var(--duration-hover-A);
      transition-property:background-color;
      @media (width <= 640px) {
        width:5.6rem;
      }

      &::after {
        transition-duration:var(--duration-hover-A);
        transition-property:background-color;
      }
    }
  }
  .subword {
    font-size:2.0rem;
    padding-left: 1rem;
    @media (width <= 640px) {
      font-size:1.2rem;
      padding-left: 0.2rem;
    }
  }
}


/*
============================================================================= */
.g-flowtingbnr {
  display: flex;
  justify-content: right;
  position: fixed;
  right: 0;
  z-index: 1000;
  @media (width > 640px) {
    top: 50%;
    transform: translateY(-50%);
  }
  @media (width <= 640px) {
    bottom: 0;
    width: 100%;
  }
  .box {
    @media (width > 640px) {
      width: 4rem;
    }
    @media (width <= 640px) {
      width: 100%;
      display: flex;
    }
  }
  .link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    @media (width > 640px) {
      background-size: 600% 200%;
    }
    @media (width <= 640px) {
      height: 5rem;
      width: 50%;
      background-size: 200% 200%;
    }
    &.-entry {
      @media (width > 640px) {
        background-image:var(--grad-B);
        height: 12rem;
      }
      @media (width <= 640px) {
          background-image: linear-gradient(to right, #f1cd2c, #FE8411);
      }
      &:before {
        @media (width > 640px) {
          background-image: linear-gradient(to bottom, #f1cd2c, #FE8411);
        }
      }
    }
    &.-corp {
      @media (width > 640px) {
        background-image:var(--grad-A);
        height: 14.4rem;
      }
      @media (width <= 640px) {
          background-image: linear-gradient(to right, #4BA0E6, #011475);
      }
      &:before {
        @media (width > 640px) {
          background-image: linear-gradient(to bottom, #4BA0E6, #011475);
        }
      }
    }
    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity 0.2s;
    }
    span {
      display: block;
      position: relative;
      color: #FFF;
      @media (width > 640px) {
        writing-mode: vertical-rl;
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
      }
      @media (width <= 640px) {
        font-size: 1.8rem;
      }
    }
    @media(hover:hover) {
      &:hover {
        &:before {
          opacity: 0.5;
        }
      }
    }
  }
}


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