@charset "UTF-8";
/* Generated from trust_astro .astro <style> blocks. */

/*------------------------------
	MARK:component: Loader
------------------------------*/
#loader{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  width: 100%;
  height: 100%;
  background-color: #01042a;
  transition: opacity 1.1s ease;
  &::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: url(../image/common/loader_bg.jpg) no-repeat top center/cover;
    transition: opacity 1s cubic-bezier(0.35, 0.35, 0.2, 1), transform 10s linear;
  }
  &.is-start{
    &::after{
      opacity: 1;
      transform: scale(1.1);
    }
    .loader-copy{
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.4s ease-in-out 0.2s, transform 1s ease;
      /* .box p{
        transform: translateY(0);
      } */
    }
  }
  &.is-end{
    opacity: 0;
    transition-delay: 0.2s;
    pointer-events: none;
    .loader-copy{
      opacity: 0;
      transition: opacity 0.4s ease;
    }

  }
  .loader-copy{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 3rem;
    transform: translateY(2rem);
    opacity: 0;
    @media screen and (max-width: 768px) {
      column-gap: 1rem;
    }
    .box{
      display: grid;
      place-content: center;
      width: 34rem;
      height: 10.5rem;
      background-color: #fff;
      overflow: hidden;
      @media screen and (max-width: 768px) {
        width: 12rem;
        height: 3.6rem;
        flex-shrink: 0;
      }
      p{
        @media screen and (max-width: 768px) {
          width: calc(var(--textW) * 0.03rem);
        }
      }
    }
    p{
      width: calc(var(--textW) * 0.1rem);
      @media screen and (max-width: 768px) {
        width: calc(var(--textW) * 0.03rem);
      }
    }
  }
}

/*------------------------------
	MARK:component: SiteHeader
------------------------------*/
header{

  position: fixed;
  z-index: 100001;
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
  /* 不透明度80% */
  background-color: #ffffffcc;
  transform: translateY(-100%);
  transition: height 0.3s var(--default-timing-function), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;

  &.is-enter{
    transform: translateY(0);
  }

  &.is-firstview{
    --sub: #fff;
    color: #fff;
    background-color: transparent;
    .header-wrap .logo a img.firstview{
      opacity: 1;
    }
    .spNav-btn .spNav-icon.sp-menu{
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'><rect x='0' y='16.5' width='32' height='2' rx='1' ry='1' fill='%23fff'/></svg>");
      &::before,
      &::after{
        background-color: #fff;
      }
    }
    &:has(.spNav-btn[aria-expanded="true"]){
      color: var(--black);
      .header-wrap .logo a img.firstview{
        opacity: 0;
      }
    }
  }
  
  /* 全体 */
  &:has(a[class^=category-].in-hover),
  &:has(a[class^=category-].is-active){
    height: calc(var(--header-height) * 2);
  }
  /* aboutus */
  &:has(a.category-aboutus.in-hover),
  &:has(a.category-aboutus.is-active){
    .category-aboutus span{
      /* color: var(--sub); */
      background-size: 100% 1px;
      background-position: 0 100%;
    }
    .link-aboutus{
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transition: opacity 0.3s var(--default-timing-function);
    }
  }
  /* aboutwork */
  &:has(a.category-aboutwork.in-hover),
  &:has(a.category-aboutwork.is-active){
    .category-aboutwork span{
      /* color: var(--sub); */
      background-size: 100% 1px;
      background-position: 0 100%;
    }
    .link-aboutwork{
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transition: opacity 0.3s var(--default-timing-function);
    }
  }
  /* aboutworkstyle */
  &:has(a.category-aboutworkstyle.in-hover),
  &:has(a.category-aboutworkstyle.is-active){
    .category-aboutworkstyle span {
      /* color: var(--sub); */
      background-size: 100% 1px;
      background-position: 0 100%;
    }
    .link-aboutworkstyle{
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transition: opacity 0.3s var(--default-timing-function);
    }
  }
  .header-wrap{
    height: var(--header-height);
    padding-inline: 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media screen and (max-width: 768px) {
      padding-inline: 1.5rem;
    }
  }
  .logo{
    display: flex;
    align-items: center;
    column-gap: 2rem;
    @media screen and (max-width: 768px) {
      column-gap: 10px;
    }
    a{
      display: grid;
      transition: opacity 0.1s;
      @media screen and (max-width: 768px) {
        padding-bottom: 0;
      }
      img{
        width: 10rem;
        grid-area: 1/1;
        transition: 0.3s;
        @media screen and (max-width: 768px) {
          width: 80px;
        }
        &.firstview{
          opacity: 0;
        }
      }
      @media (any-hover:hover) {
        &:hover{
          opacity: 0.6;
        }
      }
    }
    .site-name{
      padding-top: 0.1rem;
      transition: 0.3s;
      @media screen and (max-width: 768px) {
        padding-bottom: 0;
      }
      .company-name{
        font-weight: 700;
        font-size: 1.4rem;
        @media screen and (max-width: 768px) {
          font-size: 11px;
        }
      }
      .en{
        font-size: 1.4rem;
        display: flex;
        column-gap: 0.25em;
        margin-top: 0.5rem;
        @media screen and (max-width: 768px) {
          font-size: 9px;
          letter-spacing: 0.1em;
          margin-top: 6px;
        }
        span{
          display: inline-block;
          font-family: var(--font-roboto);
          &::first-letter{
            font-weight: 700;
          }
        }
      }
    }
  }
  .category-nav{
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    @media screen and (max-width: 768px) {
      display: none;
    }
    .category-wrap{
      display: flex;
      column-gap: 4.5rem;
      font-weight: 500;
      margin-right: 4.5rem;
      a{
        &[target="_blank"]{
          display: flex;
          align-items: center;
          column-gap: 0.1em;
          &::after{
            content: '';
            display: inline-block;
            width: 1em;
            aspect-ratio: 1;
            background: url("../image/common/external.svg") no-repeat center/cover;
            margin-top: 0.15em;
          }
        }
      }
    }
    .test-btn{
      position: relative;
      display: grid;
      place-content: center;
      width: 16rem;
      height: 4rem;
      border-radius: 100vmax;
      border: max(0.1rem,1px) solid currentColor;
      margin-right: 3rem;
      transition: 
      background-color 0.3s var(--default-timing-function),
      border 0.3s var(--default-timing-function);
      &::after{
        content: "→";
        position: absolute;
        top: calc(50% - 0.5em);
        right: 0.5em;
        opacity: 0;
        color: #fff;
        transition: 0.3s var(--default-timing-function);
        transition-property: opacity, transform;
      }
      span{
        color: currentColor;
        font-weight: 700;
        letter-spacing: 0.05em;
        position: relative;
        z-index: 1;
        transition: 0.3s var(--default-timing-function);
        transition-property: color, transform;
      }
      @media (any-hover:hover) {
        &:hover{
          border: max(0.1rem,1px) solid #fff;
          background-color: #01a5e2;
          transition: border 0s linear, transform 0.3s var(--default-timing-function);
          span{
            color: #fff;
            transform: translateX(-0.5em);
            transition: color 0s linear, transform 0.3s var(--default-timing-function);
          }
          &::after{
            transform: translateX(-0.5em);
            opacity: 1;
            transition: opacity 0.1s linear, transform 0.3s var(--default-timing-function);
          }
        }
      }
    }
    .tel-btn{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 24.5rem;
      height: 6rem;
      background-color: var(--black);
      padding-inline: 2rem 1.5rem;
      margin-right: 1.5rem;
      span{
        color: #fff;
        font-weight: 500;
        font-size: 1.4rem;
        position: relative;
        z-index: 1;
        line-height: 1.4;
      }
      .tel-icon{
        width: 3.6rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: #01a5e2;
        position: relative;
        transition: 0.1s;
        &::before,
        &::after{
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          width: 2rem;
          aspect-ratio: 1;
          background: no-repeat center/contain;
          transition: transform 0.1s var(--default-timing-function), opacity 0.1s;
          will-change: opacity, transform;
        }
        &::before{
          background-image: url(../image/common/tel.svg);
        }
        &::after{
          background-image: url(../image/common/tel_c.svg);
          opacity: 0;
        }

      }
      @media (any-hover:hover) {
        &:hover{
          .tel-icon{
            background-color: #fff;
            &::before{
              opacity: 0;
            }
            &::after{
              opacity: 1;
            }
            &::before,&::after{
              transform: translate(-50%, -50%) scale(1.1);
            }
          }
        }
      }
    }
    .entry-btn{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 14rem;
      height: 6rem;
      padding-inline: 2rem 1rem;
      background-color: #01a5e2;
      position: relative;
      overflow: hidden;
      transition: background-color 0.3s var(--default-timing-function), box-shadow 0.3s var(--default-timing-function);
      &> span{
        color: var(--black);
        font-weight: 700;
        letter-spacing: 0.05em;
        position: relative;
        z-index: 1;
        transition: 0.3s var(--default-timing-function);
        transition-property: letter-spacing, color;
      }
      .magnetic-hover{
        width: 3.6rem;
        height: 3.6rem;
      }
      .magnetic-hover::after{
        background-color: #01a5e2;
        width: calc(3.6rem - 2px);
        height: calc(3.6rem - 2px);
      }
    }
  }
  .link-nav{
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: var(--header-height);
    /* border-top: 1px solid #fff; */
    @media screen and (max-width: 768px) {
      display: none;
    }
    .link-wrap{
      height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      column-gap: 4rem;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* 右側にエントリーボタン+ギャップの余白 */
      padding-inline: 4rem 18rem;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      a{
        font-size: 1.4rem;
        font-weight: 500;
      }
    }
    .nav-title{
      color: var(--sub);
      font-size: 1.3rem;
      font-weight: 500;
      display: flex;
      column-gap: 0.25em;
    }
  }
  .spNav-btn{
    display: none;
    @media screen and (max-width: 768px) {
      display: grid;
    }
    place-content: center;
    transition: background-color 0.3s var(--default-timing-function);
    &[aria-expanded="true"]{
      .spNav-icon.sp-menu{
        background-image: none;
        &::before,
        &::after{
          background-color: var(--black);
        }
        &::before{
          top: 16.5px;
          transform: rotate(45deg);
        }
        &::after{
          bottom: 16.5px;
          transform: rotate(-45deg);
        }
      }
      span{
        color: #fff;
      }
    }
    .spNav-icon{
      display: block;
      &.sp-menu{
        width: 32px;
        height: 36px;
        position: relative;
        background-color: transparent;
        mask-image: none;
        -webkit-mask-image: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'><rect x='0' y='16.5' width='32' height='2' rx='1' ry='1' fill='%23252525'/></svg>");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        transition: 0.3s var(--default-timing-function);
        &::before,
        &::after{
          content: "";
          position: absolute;
          left: 0;
          width: 100%;
          height: 2px;
          border-radius: 999px;
          background-color: var(--black);
          transition:
            transform 0.3s var(--default-timing-function),
            top 0.3s var(--default-timing-function),
            bottom 0.3s var(--default-timing-function),
            background-color 0.3s var(--default-timing-function);
        }
        &::before{
          top: 6px;
        }
        &::after{
          bottom: 6px;
        }
      }
    }
  }
}

header.is-transparent{
  --sub: #fff;
  color: #fff;
  background-color: transparent !important;
}

header.is-transparent .header-wrap .logo a img.firstview{
  opacity: 1;
}

header.is-transparent .spNav-btn .spNav-icon.sp-menu{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'><rect x='0' y='16.5' width='32' height='2' rx='1' ry='1' fill='%23fff'/></svg>");
}

header.is-transparent .spNav-btn .spNav-icon.sp-menu::before,
header.is-transparent .spNav-btn .spNav-icon.sp-menu::after{
  background-color: #fff;
}

header.is-menu-open{
  color: var(--black);
  background-color: #fff !important;
}

header.is-menu-open .header-wrap .logo a img.firstview{
  opacity: 0;
}

header.is-menu-open .spNav-btn .spNav-icon.sp-menu{
  background-image: none;
}

header.is-menu-open .spNav-btn .spNav-icon.sp-menu::before,
header.is-menu-open .spNav-btn .spNav-icon.sp-menu::after{
  background-color: var(--black);
}

/*------------------------------
	MARK:component: SpMenu
------------------------------*/
#spMenu{
  display: none;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  opacity: 0;
  background-color: #fff;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--default-timing-function), visibility 0.35s step-end, background-color 0.35s var(--default-timing-function);
  @media screen and (max-width: 768px) {
    display: block;
  }
  &.is-open,
  &[aria-hidden="false"]{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s var(--default-timing-function), visibility 0s linear;
  }
  .spMenu-panel{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    transform: translateY(calc(100% + 2rem));
    border-bottom: 1px solid #d7d7d7;
    transition: transform 0.45s var(--default-timing-function);
  }
  &.is-open .spMenu-panel,
  &[aria-hidden="false"] .spMenu-panel{
    transform: translateY(0);
  }
  .inner{
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 10rem;
  }
  .spMenu-nav{
    display: grid;
    gap: 2rem;
  }
  .nav-category{
    margin-top: 1rem;
    .nav-hd{
      margin-bottom: 1rem;
      .en{
        font-size: 2.8rem;
        font-weight: 700;
        color: var(--main);
        display: flex;
        align-items: center;
      }
      .ja{
        font-size: 1rem;
        font-weight: 600;
      }
    }
    .nav-link{
      font-size: 1.3rem;
      line-height: 1.6;
      display: flex;
      align-items: center;
      column-gap: 0.25em;
      border-bottom: 1px dotted var(--gray01);
      &::before{
        content: "-";
      }
    }
  }
  .test-btn{
    margin-block: 1rem 2rem;
    width: 80%;
  }
  .external-btn{
    border: 2px solid var(--main);
    border-radius: 100vmax;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.2em;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--main);
    &:first-of-type{
      margin-top: 2rem;
    }
    &::after{
      content: "";
      display: block;
      margin-top: 0.1em;
      width: 1em;
      aspect-ratio: 1;
      mask: url(../image/common/external.svg) center/contain;
      -webkit-mask: url(../image/common/external.svg) center/contain;
      background-color: var(--main);
    }
  }
}

/*------------------------------
	MARK:component: SiteFooter
------------------------------*/
footer {
  position: relative;
  z-index: 1;
  .tel-wrap{
    display: grid;
    place-content: center;
    padding-block: 8rem 9rem;
    background: url(../image/common/tel_bg.jpg) no-repeat center/cover;
    text-align: center;
    @media screen and (max-width: 768px) {
      padding-block: 2rem 3rem;
    }
    .icon{
      width: 4.8rem;
      margin-inline: auto;
      @media screen and (max-width: 768px) {
        width: 3.6rem;
      }
    }
    .tel-title{
      font-size: 3rem;
      font-weight: 600;
      color: #fff;
      margin-top: 1rem;
      @media screen and (max-width: 768px) {
        font-size: 2rem;
      }
      span{
        font-size: 1.08em;
      }
    }
    .tel-desc{
      font-size: 1.4rem;
      font-weight: 500;
      color: #fff;
      margin-top: 1.5rem;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
        margin-top: 1rem;
      }
    }
    .tel-guide{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.4rem;
      color: #fff;
      column-gap: 0.8rem;
      margin-top: 2rem;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
        column-gap: 1rem;
        margin-top: 3rem;
      }
      &::before,
      &::after{
        content: "";
        display: block;
        width: 100%;
        flex-grow: 1;
        height: max(0.1rem,1px);
        background-color: #fff;
      }
      span{
        flex-shrink: 0;
      }
    }
    .tel-btn{
      display: grid;
      place-content: center;
      padding-block: 2rem;
      margin-top: 1.6rem;
      border: 1px var(--accent) solid;
      background-image: linear-gradient(90deg, transparent 50%, var(--accent) 50%);
      background-size: 200% 100%;
      background-position: 100%;
      transition: background 0.3s var(--default-timing-function);
      @media screen and (max-width: 768px) {
        padding-block: 1.2rem;
      }
      span{
        font-weight: 500;
        transition: color 0.3s var(--default-timing-function);
        .num{
          font-family: var(--font-roboto);
          font-size: 2.8rem;
          @media screen and (max-width: 768px) {
            font-size: 2rem;
          }
        }
        .time{
          font-size: 1.4rem;
          display: inline-block;
          margin-top: 0.5rem;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
      }
      @media (any-hover: hover) {
        &:hover{
          background-position: 0%;
          span{
            color: var(--accent);
          }
        }
      }
    }
  }

  .link-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 35rem;
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      grid-template-rows: 12rem 12rem;
    }
    .recruit-btn{
      display: grid;
      place-content: center;
      &:first-child{ 
        background-color: var(--black); 
        .magnetic-hover{
          &::after{
            background-color: var(--black);
          }
        }
      }
      &:last-child{ background-color: var(--main); }
      &> span{
        color: #fff;
        font-size: 2.4rem;
        font-weight: 600;
        position: relative;
        display: inline-block;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
        .magnetic-hover{
          position: absolute;
          left: calc(100% + 1.5rem);
          top: calc(50% - 2rem);
          @media screen and (max-width: 768px) {
            top: calc(50% - 1.6rem);
          }
        }
      }
    }
  }
  .footer-inner{
    width: 110rem;
    margin-inline: auto;
    padding-top: 7rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    @media screen and (max-width: 768px) {
      padding-top: 0;
      width: 100%;
    }
  }
  .footer-hd{
    display: flex;
    flex-direction: column;
    @media screen and (max-width: 768px) {
      display: none;
    }
    .logo{
      display: flex;
      align-items: center;
      column-gap: 2rem;
      transition: opacity 0.1s;
      a{
        display: inline-block;
        padding-bottom: 0.6rem;
        img{
          width: 10rem;
        }
        @media (any-hover:hover) {
          &:hover{
            opacity: 0.6;
          }
        }
      }
      .site-name{
        padding-bottom: 0.5rem;
        .company-name{
          font-size: 1.4rem;
          font-weight: 600;
        }
        .en{
          font-size: 1.4rem;
          display: flex;
          column-gap: 0.25em;
          margin-top: 0.5rem;
          span{
            display: inline-block;
            font-family: var(--font-roboto);
            &::first-letter{
              font-weight: 700;
            }
          }
        }
      }
    }
    .test-banner{
      overflow: hidden;
      width: 30rem;
      display: block;
      margin-top: 2.5rem;
      transition: opacity 0.1s;
      @media (any-hover:hover) {
        &:hover{
          opacity: 0.6;
        }
      }
    }
    .company-info{
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      row-gap: 0.6rem;
      .company-name{
        font-size: 1.4rem;
        font-weight: 600;
      }
      .company-address{
        font-size: 1.4rem;
        margin-top: 0.5rem;
      }
      .tel-title{
        background-color: var(--sub);
        color: #fff;
        font-size: 1.6rem;
        font-weight: 600;
        padding: 0.125em 0.25em;
        width: fit-content;
        margin-top: 1rem;
      }
      .tel-btn{
        color: var(--sub);
        font-size: 1.8rem;
        font-family: var(--font-roboto);
        font-weight: 600;
        span{
          font-size: 0.8125em;
        }
        @media (any-hover:hover) {
          &:hover{
            text-decoration: underline;
          }
        }
      }
      .tel-time{
        font-size: 1.2rem;
      }
    }
  }
  .footer-nav{
    display: grid;
    grid-template-columns: repeat(3,auto);
    grid-template-rows: repeat(2,auto);
    gap:6rem 8rem;
    flex-shrink: 0;
    @media screen and (max-width: 768px) {
      display: none;
    }
    .nav-category{
      &:nth-of-type(4){grid-column: 2/3;}
      &:nth-of-type(5){grid-column: 3/4;}
      .nav-hd{
        margin-bottom: 2rem;
        .ja{
          font-size: 1.4rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          &::before{
            content: "⚫︎";
            color: var(--main);
            font-size: 1.125em;
            line-height: 0;
          }
        }
        .en{
          margin-top: 0.2em;
          font-size: 3.2rem;
          font-weight: 700;
          color: var(--main);
          letter-spacing: -0.02em;
        }
      }
      .nav-link{
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        column-gap: 0.25em;
        font-weight: 500;
        &::before{
          content: "-";
        }
        &+ .nav-link{
          margin-top: 1em;
        }
      }
    }
  }
  .footer-inner.bottom{
    align-items: center;
    padding-block: 1em;
    margin-top: 7rem;
    @media screen and (max-width: 768px) {
      padding-block: 1rem;
      justify-content: center;
      margin-top: 0;
    }
    .nav-link{
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      column-gap: 0.25em;
      &::before{
        content: "-";
      }
      @media screen and (max-width: 768px) {
        display: none;
      }
    }
    .footer-copyright{
      font-size: 1.2rem;
      font-family: var(--font-roboto);
      @media screen and (max-width: 768px) {
        font-size: 1rem;
      }
  }
  }
}

/*------------------------------
	MARK:component: Pankuzu
------------------------------*/
#pankuzu{
  display: flex;
  align-items: center;
  column-gap: 1em;
  color: #fff;
  padding-left: 6rem;
  font-size: 1.2rem;
  height: 10rem;
  @media screen and (max-width: 768px) {
    height: 6rem;
    padding-left: 2rem;
    font-size: 1rem;
  }
  a{
    @media (any-hover: hover) {
      &:hover{
        text-decoration: underline;
      }
    }
  }
}

/*------------------------------
	MARK:page: index
------------------------------*/
.page-top{
  /*------------------------------
    MARK:section-title
  ------------------------------*/
  .section-title{
    h2{
      display: flex;
      align-items: center;
      font-size: 1.6rem;
      font-weight: 600;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
      }
      &::before{
        content: "⚫︎";
        line-height: 0;
        font-size: 1.25em;
      }
    }
    .en{
      font-size: 10rem;
      font-weight: 500;
      font-family: var(--font-roboto);
      margin-top: 0.05em;
      @media screen and (max-width: 768px) {
        font-size: 6rem;
      }
    }
  }
  /*------------------------------
  	MARK:mv
  ------------------------------*/
  .mv {
    width: 100vw;
    height: 100dvh;
    position: sticky;
    top: 0;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    background:
      linear-gradient(132deg, #050d17 0%, #102036 52%, #182d46 100%);
    &::after{
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      background-color: #25252566;
      mix-blend-mode: hard-light;
    }
    .mv-canvas{
      position: absolute;
      inset: 0;
      z-index: 0;
      canvas{
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .copy{
      position: relative;
      z-index: 4;
      width: 100%;
      height: 100%;
      padding-left: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      row-gap: 3.5rem;
      /* opacity: 0;
      translate: 0 1rem; */
      mask-image: linear-gradient(80deg, #000 36%, transparent 60%);
      mask-repeat: no-repeat;
      mask-position: 100% 0%;
      mask-size: 300% 100%;
      transition: mask-position 3.4s ease 0.2s;
      @media screen and (max-width: 768px) {
        padding-inline: 1.5rem;
        row-gap: 2.2rem;
      }
      &.is-start{
        /* opacity: 1;
        translate: 0 0;
        transition-property: opacity, translate;
        transition-duration: 1.2s;
        transition-delay: 0.4s;
        transition-timing-function: ease-in-out; */
        mask-position: 0% 0%;
      }
      .row{
        display: flex;
        align-items: center;
        column-gap: 1.8rem;
        margin-top: 2.5rem;
        @media screen and (max-width: 768px) {
          margin-top: 1.2rem;
          column-gap: 1rem;
        }
        .switch-box{
          --switch-glow-alpha: 0.14;
          --switch-edge-alpha: 0.08;
          --switch-sheen-shift: -140%;
          width: 30rem;
          height: 10.5rem;
          background: #fff;
          position: relative;
          overflow: hidden;
          box-shadow:
            0 2.4rem 4.8rem rgba(5, 14, 28, 0.18),
            inset 0 0 0 1px rgba(255, 255, 255, 0.72);
          transform-style: preserve-3d;
          perspective: 120rem;
          @media screen and (max-width: 768px) {
            width: 15rem;
            height: 6rem;
          }
          &::before,
          &::after{
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
          }
          &::before{
            background:
              radial-gradient(circle at 20% 50%, rgba(255, 255, 255, calc(var(--switch-glow-alpha) * 0.85)) 0%, rgba(255, 255, 255, 0) 38%);
          }
          &::after{
            inset: -12% auto -12% -32%;
            width: 42%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, var(--switch-edge-alpha)) 44%, rgba(255, 255, 255, 0) 100%);
            transform: translate3d(var(--switch-sheen-shift), 0, 0) skewX(-24deg);
          }
          li{
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            z-index: 1;
            backface-visibility: hidden;
            will-change: transform, opacity;
            p{
              will-change: transform, opacity;
            }
          }
        }
      }
      p{
        width: calc(var(--textW) * 0.1rem);
        @media screen and (max-width: 768px) {
          width: calc(var(--textW) * 0.055rem);
        }
      }
    }
    .niigata{
      position: absolute;
      z-index: 4;
      top: 55%;
      left: 0;
      translate: 0 -50%;
      padding-left: 90rem;
      width: 100%;
      pointer-events: none;
      opacity: 0;
      @media screen and (max-width: 768px) {
        padding-inline: 4rem;
        z-index: 0;
        top: 50%;
      }
      .beacon-wrap{
        position: relative;
        width: fit-content;
      }
      .beacon{
        position: absolute;
        top: 40.59%;
        left: 56.15%;
        translate: -50% -50%;
        display: grid;
        place-items: center;
      }
      .beacon-dot{
        grid-area: 1/1;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background: #d8ff00;
      }
      .beacon-ring{
        position: absolute;
        grid-area: 1/1;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        border: 1px solid #d8ff00;
        animation: beacon-ring 2s ease-out infinite;
        .beacon-ring--delay{
          animation-delay: 1.2s;
        }
      }
      .beacon-dashed{
        grid-area: 1/1;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 50%;
        border: 2px dashed #d8ff00;
        animation: beacon-spin 12s linear infinite;
      }
      .beacon-text{
        position: absolute;
        color: var(--accent);
        font-size: 1.8rem;
        font-family: var(--font-roboto);
        font-weight: 500;
        right: 8.2rem;
        top: 3rem;
        opacity: 0;
        transition: opacity 0.5s;
        .beacon-text-line{
          position: absolute;
          left: calc(100% + 0.7rem);
          top: -0.6rem;
          overflow: visible;
          polyline{
            stroke-dasharray: 72;
            stroke-dashoffset: 72;
            transition: stroke-dashoffset 1s cubic-bezier(.59, .01, 0, .99);
            @media screen and (max-width: 768px) {
              transition: stroke-dashoffset 0.5s cubic-bezier(.59, .01, 0, .99);
            }
          }
        }
        &> span{
          display: inline-block;
          overflow: hidden;
          height: 1em;
          &> span{
            display: inline-block;
            transform: translateY(100%);
            transition: transform 0.5s ease 0.6s;
            @media screen and (max-width: 768px) {
              transition: transform 0.5s ease 0.1s;
            }
          }
        }
      }
      img{
        width: 58rem;
      }
      &.shown{
        .beacon-text{
          opacity: 1;
          transition: opacity 0s;
          .beacon-text-line polyline{
            stroke-dashoffset: 0;
          }
          &> span{
            &> span{
              transform: translateY(0);
            }
          }
        }
      }
    }
  }

  /*------------------------------
  	MARK:message
  ------------------------------*/
  .message{
    position: relative;
    z-index: 1;
    padding-left: 4rem;
    padding-top: calc(100dvh + 10rem);
    padding-bottom: calc(50dvh - 3.2rem);
    @media screen and (max-width: 768px) {
      padding-inline: 1.5rem;
      padding-top: 120dvh;
      padding-bottom: 10rem;
    }
    .message-wrap{
      position: relative;
      display: flex;
      align-items: stretch;
      column-gap: 5rem;
      color: #fff;
      @media screen and (max-width: 768px) {
        column-gap: 1.5rem;
      }
      .en{
        position: relative;
        span{
          position: sticky;
          top: 10rem;
          writing-mode: vertical-lr;
          font-family: var(--font-roboto);
          font-size: 1.8rem;
          font-weight: 500;
          display: inline-block;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
            top: 8rem;
          }
        }
      }
      .js-message{
        font-family: var(--font-zen);
        font-weight: 700;
        font-size: 3.2rem;
        line-height: 2;
        @media screen and (max-width: 768px) {
          font-size: 2.4rem;
        }
        p{
          font-size: 2.8rem;
          color: #fff;
          opacity: 0;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
          }
          &:first-child{
            margin-top: calc((1em - 1lh) / 2);
          }
          &:last-child{
            margin-bottom: calc((1em - 1lh) / 2);
          }
        }
        .yakumono{
          font-family: var(--font-noto);
          font-feature-settings: "palt";
          letter-spacing: 0.15em;
        }
      }
    }
  }
  /*------------------------------
  	MARK:spi
  ------------------------------*/
  .spi-banner{
    padding-block: 10rem;
    background-color: #fff;
    @media screen and (max-width: 768px) {
      padding-block: 5rem;
    }
    .inner.spi{
      width: 95rem;
      @media screen and (max-width: 768px) {
        width: 100%;
      }
    }
    .hover-img{
      position: relative;
      display: block;
      .magnetic-hover{
        position: absolute;
        top: calc(50% - 2rem);
        right: 2rem;
        @media screen and (max-width: 768px) {
          top: calc(50% - 1.6rem);
          right: 1rem;
        }
      }
      .image-wrap{
        overflow: hidden;
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        width: auto;
        height: calc(100% - 3rem);
        aspect-ratio: 339 / 177;
        @media screen and (max-width: 768px) {
          display: none;
        }
        img{
          transform-origin: bottom;
        }
      }
    }
  }
  /*------------------------------
  	MARK:aboutus
  ------------------------------*/
  .aboutus{
    background-color: var(--main);
    padding-block: 6rem 11rem;
    @media screen and (max-width: 768px) {
      padding-block: 5rem;
    }
    .section-title{
      color: #fff;
    }
    .title-wrap{
      display: flex;
      justify-content: space-between;
      @media screen and (max-width: 768px) {
        flex-direction: column;
        row-gap: 1rem;
      }
      .readText{
        width: 56rem;
        font-weight: 500;
        flex-shrink: 0;
        color: #fff;
        margin-top: 1em;
        @media screen and (max-width: 768px) {
          width: 100%;
        }
      }
    }
    .container{
      display: grid;
      grid-template-columns: 1fr 56rem;
      grid-template-rows: 28rem 28rem;
      gap: 4rem;
      margin-top: 9rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        margin-top: 4rem;
        gap: 6rem;
      }
      li{
        &:first-child{
          grid-row: span 2;
        }
        a{
          position: relative;
          display: block;
          .title{
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2rem;
            width: 25rem;
            height: 8rem;
            background-color: var(--main);
            @media screen and (max-width: 768px) {
              padding: 1rem 1.5rem 0 0;
              width: 28rem;
              height: 5.4rem;
            }
            &.wide{
              width: 33rem;
              @media screen and (max-width: 768px) {
                width: 28rem;
              }
            }
            .wrap{
              .en{
                color: var(--accent);
                font-family: var(--font-roboto);
                font-weight: 500;
                font-size: 1.4rem;
                @media screen and (max-width: 768px) {
                  font-size: 1.2rem;
                }
              }
              .ja{
                font-weight: 600;
                font-size: 1.8rem;
                color: #fff;
                margin-top: 0.8rem;
                @media screen and (max-width: 768px) {
                  font-size: 1.6rem;
                  margin-top: 0.4rem;
                }
              }
            }
          }
        }
      }
    }
  }
  /*------------------------------
  	MARK:aboutwork
  ------------------------------*/
  .aboutwork{
    padding-block: 11rem;
    @media screen and (max-width: 768px) {
      padding-block: 5rem;
    }
    .section-title{
      h2::before,
      .en{
        color: var(--main);
      }
    }
    .job-link{
      position: relative;
      margin-top: 4rem;
      display: block;
      @media screen and (max-width: 768px) {
        margin-top: 2rem;
      }
      img{
        position: relative;
        z-index: 0;
      }
      .title{
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 6rem;
        color: #fff;
        @media screen and (max-width: 768px) {
          padding-left: 1.5rem;
        }
        h3{
          font-size: 3.2rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
          }
        }
        .en{
          font-family: var(--font-roboto);
          font-weight: 500;
          font-size: 2.1rem;
          margin-top: 0.6em;
          padding-left: 0.25em;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
            margin-top: 0.5em;
          }
        }
      }
      .magnetic-hover{
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        @media screen and (max-width: 768px) {
          bottom: auto;
          top: calc(50% - 1.6rem);
          right: 1rem;
        }
      }
    }
    /*------------------------------
      MARK:interview
    ------------------------------*/
    .interview-title{
      margin-top: 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      @media screen and (max-width: 768px) {
        margin-top: 6rem;
      }
      .title-wrap{
        .en{
          font-size: 6rem;
          font-weight: 500;
          color: var(--main);
          font-family: var(--font-roboto);
          @media screen and (max-width: 768px) {
            font-size: 4.8rem;
          }
        }
        h3{
          font-size: 1.6rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
        }
      }
      .view-btn{
        display: flex;
        align-items: center;
        column-gap: 1.6rem;
        span{
          font-size: 1.6rem;
          font-weight: 500;
          color: var(--main);
          font-family: var(--font-roboto);
        }
        .magnetic-hover{
          box-shadow: 0 0 0.6rem #c6c7d690;
        }
      }
    }
    
    .interview-slider-wrapper{
      overflow: hidden;
      margin-right: -25rem;
      margin-left: -1rem;
      padding-left: 1rem;
      margin-top: 5rem;
      @media screen and (max-width: 768px) {
        margin-right: -1.5rem;
        margin-top: 3rem;
      }
    }
    .interview-container{
      display: flex;
      column-gap: 4rem;
      @media screen and (max-width: 768px) {
        column-gap: 2rem;
      }
      li{
        width: 38rem;
        flex-shrink: 0;
        @media screen and (max-width: 768px) {
          width: 22rem;
        }
        a{
          position: relative;
          display: block;
          overflow: hidden;
          @media (any-hover:hover) {
            cursor: none;
          }
        }
        img{
          pointer-events: none;
          transition: opacity 0.3s var(--default-timing-function);
        }
        .profile{
          .dept{
            display: flex;
            align-items: center;
            column-gap: 1rem;
            font-size: 1.4rem;
            margin-top: 1.6rem;
            @media screen and (max-width: 768px) {
              font-family: 1.2rem;
              margin-top: 1rem;
              column-gap: 0.5rem;
            }
            p{
              background-color: var(--main);
              font-weight: 700;
              padding: 0.8rem 2rem;
              line-height: 1;
              border-radius: 100vmax;
              color: #fff;
              @media screen and (max-width: 768px) {
                padding: 0.5em 1em;
                font-size: 1.2rem;
              }
            }
            span{
              font-weight: 600;
              color: var(--main);
            }
          }
          .name{
            font-size: 2.1rem;
            font-weight: 500;
            margin-top: 1.2rem;
            font-family: var(--font-roboto);
            &.ja{
              font-size: 1.8rem;
              line-height: 1.283333;
            }
            @media screen and (max-width: 768px) {
              margin-top: 0.5rem;
            }
          }
        }
      }
      @media (any-hover:hover) {
        &:has(a:hover){
          a:not(:hover){
            img{
              opacity: 0.4;
            }
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:environment
  ------------------------------*/
  .environment{
    background-color: var(--bggray);
    padding-block: 6rem 10rem;
    @media screen and (max-width: 768px) {
      padding-block: 5rem;
    }
    .section-title{
      text-align: center;
      h2{
        justify-content: center;
        &::before{
          display: none;
        }
      }
      .en{
        color: var(--main);
        margin-top: 0;
        white-space: nowrap;
      }
    }
    .link-wrap{
      margin-top: 5rem;
      display: grid;
      grid-template-columns: repeat(2,1fr);
      column-gap: 5rem;
      @media screen and (max-width: 768px) {
        margin-top: 2rem;
        grid-template-columns: 1fr;
        row-gap: 1.5rem;
      }
      a{
        background-color: #fff;
        display: grid;
        place-content: center;
        height: 15rem;
        position: relative;
        text-align: center;
        box-shadow: 0 0 0.4rem #c6c7d690;
        @media screen and (max-width: 768px) {
          height: 10rem;
        }
        .en{
          font-family: var(--font-roboto);
          font-size: 1.4rem;
          font-weight: 500;
          color: var(--main);
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
        h3{
          font-size: 2.4rem;
          font-weight: 600;
          margin-top: 0.6rem;
          @media screen and (max-width: 768px) {
            font-size: 1.8rem;
            margin-top: 0.4rem;
          }
        }
        .magnetic-hover{
          position: absolute;
          right: 4rem;
          top: 5.5rem;
          box-shadow: 0 0 0.4rem #c6c7d690;
          @media screen and (max-width: 768px) {
            right: 2rem;
            top: calc(50% - 1.6rem);
          }
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: message
------------------------------*/
.page-message.-index {
  .subpage-mv{
    @media screen and (max-width: 768px) {
      height: auto;
    }
    .title-wrap{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 8rem;
      @media screen and (max-width: 768px) {
        display: block;
        height: auto;
      }
      &> div{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        row-gap: 1.2rem;
        @media screen and (max-width: 768px) {
          row-gap: 0.5rem;
        }
      }
      .readText{
        padding-top: 2rem;
        @media screen and (max-width: 768px) {
          padding-top: 3rem;
        }
      }
    }
  }

  .intro{
    padding-top: 10rem;
    @media screen and (max-width: 768px) {
      padding-top: 4rem;
    }
    h2{
      font-size: 2.8rem;
      font-weight: 500;
      margin-bottom: 3rem;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
        margin-bottom: 2.5rem;
      }
    }
    .readText{
      &+ .readText{
        margin-top: 1lh;
      }
    }
  }

  .list{
    ul{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 2rem 4.8rem;
      margin-top: 8rem;
      padding-bottom: 10rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        margin-top: 4rem;
        padding-bottom: 6rem;
        gap: 1rem;
      }
      li{
          background-image: linear-gradient(90deg, #C7C7C7);
          background-position: 100% 100%;
          background-repeat: no-repeat;
          background-size: 100% 1px;
      }
      a{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding-block: 2rem;
        color: var(--main);
        .title-wrap{
          display: flex;
          gap: 1rem;
        }
        .num{
          font-size: 1.2rem;
          font-weight: 500;
          color: #919191;
          font-family: var(--font-roboto);
          line-height: 1.6;
        }
        h2{
          font-size: 2.4rem;
          font-weight: 600;
          color: var(--main);
          display: flex;
          flex-direction: column;
          row-gap: 0.5rem;
          @media screen and (max-width: 768px) {
            font-size: 2rem;
          }
          .sub{
            font-size: 0.6em;
            font-feature-settings: "palt";
          }
        }
        .magnetic-hover{
          box-shadow: 0 0 0.4rem #c6c7d690;
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: message/top-message
------------------------------*/
.page-message.-top-message, .page-message.-about {
  .subpage-mv{
    h1{
      display: flex;
      gap: 1rem;
      span{
        font-size: 0.7em;
      }
    }
  }

  aside{
    .profile-wrap{
      border-bottom: max(0.1rem,1px) solid #fff;
      padding-bottom: 1.6rem;
      p{
        font-size: 2.1rem;
        font-weight: 500;
      }
    }
  }
  .contents{
    .profile{
      display: grid;
      grid-template-columns: 8.8rem 1fr;
      column-gap: 1.6rem;
      padding-bottom: 5rem;
      border-bottom: var(--bggray) solid max(0.1rem,1px);
      @media screen and (max-width: 768px) {
        margin-inline: 0;
        border-bottom: none;
        grid-template-columns: 5.6rem 1fr;
      }
      .readText{
        margin-block: calc((1em - 1lh) / 2);
      }
    }
  }

  .accordion{
    margin-top: 8rem;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
    .accordion-grid{
      margin-top: 1lh;
      font-size: 1.6rem;
      line-height: 2;
      height: 3lh;
      overflow: hidden;
      position: relative;
      transition: height 0.5s ease;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.5lh;
        background-image: linear-gradient(0deg, #fff 0%, transparent 100%);
        transition: opacity 0.3s ease;
      }
      &.open::after{
        opacity: 0;
      }
    }
    h2{
      font-size: 2.8rem;
      padding-bottom: 1.2rem;
      font-weight: 500;
      border-bottom: max(0.1rem,1px) solid var(--main);
      line-height: 1.5;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
      }
    }
    p{
      &+ p{
        margin-top: 4rem;
      }
      &.hd-1{
        font-size: 2.1rem;
        font-weight: 600;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1.5rem;
          }
        }
      }
      &.hd-2{
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 1rem;
        }
      }
      .bold{
        font-weight: 600;
      }
      .red{
        color: rgb(245, 0, 0);
      }
      &.border{
        border-top: max(0.1rem,1px) solid var(--bggray);
        padding-top: 3rem;
      }
    }
    button{
      width: 23rem;
      height: 5.4rem;
      border-radius: 100vmax;
      background-color: var(--bggray);
      display: grid;
      place-content: center;
      box-sizing: border-box;
      padding-top: 0.8rem;
      margin-inline: auto;
      margin-top: 4rem;
      border: max(0.1rem, 1px) solid var(--bggray);
      transition: border-color 0.1s;
      @media screen and (max-width: 768px) {
        width: 20rem;
        height: 4.4rem;
        margin-top: 3rem;
      }
      @media (any-hover: hover) {
        &:hover{
          border-color: var(--main);
        }
      }
      span{
        font-size: 1.4rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      img{
        width: 1.6rem;
        margin-inline: auto;
        transition: transform 0.2s;
      }
    }
    &:has(.accordion-grid.open){
      button img{
        transform: rotate(180deg);
      }
    } 
  }
}

/*------------------------------
	MARK:page: message/top-interview
------------------------------*/
.page-message.-top-interview {
  .mv-image{
    position: relative;
    padding-bottom: 11rem;
    background-color: var(--main);
    @media screen and (max-width: 768px) {
      padding-bottom: 3rem;
    }
    .copy-wrap{
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      padding-top: 20rem;
      padding-left: 8rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      @media screen and (max-width: 768px) {
        position: static;
        padding-top: 0;
        padding-left: 2rem;
        margin-top: -4.5rem;
      }
      .en{
        width: fit-content;
        color: var(--accent);
        font-family: var(--font-roboto);
        font-size: 1.8rem;
        background-color: var(--main);
        padding: 0.8rem 1.8rem;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
          padding: 0.5rem 1rem;
        }
      }
      .copy{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.2rem;
        @media screen and (max-width: 768px) {
          row-gap: 0.5rem;
        }
        span{
          display: inline-block;
          padding: 1rem 1.8rem 1.1rem;
          background-color: #fff;
          font-size: 4.8rem;
          font-weight: 600;
          font-feature-settings: "palt";
          letter-spacing: 0.05em;
          @media screen and (max-width: 768px) {
            padding: 0.6rem 1rem 0.7rem;
            font-size: 2rem;
          }
        }
      }
    }
    .profile-wrap{
      position: absolute;
      right: 0;
      bottom: calc(11rem - 1px);
      padding: 4.5rem 25rem 2rem 3.5rem;
      background-color: var(--main);
      color: #fff;
      text-align: right;
      @media screen and (max-width: 768px) {
        position: static;
        padding: 0 2rem;
        margin-top: 4rem;
      }
      .title{
        font-size: 1.4rem;
        font-weight: 500;
      }
      .name{
        font-size: 4rem;
        font-weight: 600;
        margin-top: 2rem;
        @media screen and (max-width: 768px) {
          font-size: 2.8rem;
          margin-top: 1rem;
        }
      }
      .en{
        font-family: var(--font-roboto);
        font-size: 1.8rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        color: #515db7;
        margin-top: 1rem;
        @media screen and (max-width: 768px) {
          font-size: 1.4rem;
        }
      }
    }
  }
  aside{
    .profile-wrap{
      border-bottom: max(0.1rem,1px) solid #fff;
      padding-bottom: 1.6rem;
      .title{
        font-size: 1.4rem;
        font-weight: 500;
      }
      .name{
        font-size: 4rem;
        font-weight: 600;
        margin-top: 2rem;
      }
      .en{
        font-family: var(--font-roboto);
        font-size: 1.8rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        color: #b0b0c6;
        margin-top: 1rem;
      }
    }
  }
  .contents{
    .profile{
      display: grid;
      grid-template-columns: 8.8rem 1fr;
      column-gap: 1.6rem;
      padding-bottom: 5rem;
      border-bottom: var(--bggray) solid max(0.1rem,1px);
      @media screen and (max-width: 768px) {
        margin-inline: 0;
        border-bottom: none;
        grid-template-columns: 5.6rem 1fr;
      }
      .en{
        background-color: var(--main);
        height: 100%;
        display: grid;
        place-content: center;
        color: #fff;
        font-family: var(--font-roboto);
        font-weight: 500;
        @media screen and (max-width: 768px) {
          aspect-ratio: 1;
          height: auto;
          width: 100%;
          font-size: 1.1rem;
        }
      }
      .readText{
        margin-block: calc((1em - 1lh) / 2);
      }
    }
    .message{
      .image{
        margin-top: 6rem;
        margin-right: -25rem;
        @media screen and (max-width: 768px) {
          margin-right: 0;
          margin-top: 0;
        }
      }
      .copy{
        font-size: 3rem; 
        font-weight: 600;
        line-height: 1.6;
        margin-top: 5rem;
        padding-bottom: 2rem;
        border-bottom: var(--bggray) solid max(0.1rem, 1px);
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
          margin-top: 3rem;
          padding-bottom: 1.5rem;
        }
      }
      .readText{
        margin-top: 2rem;
        @media screen and (max-width: 768px) {
          margin-top: 1.5rem;
        }
        &+ .image{
          margin-top: 8rem;
          @media screen and (max-width: 768px) {
            margin-top: 5rem;
          }
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: message/career
------------------------------*/
.page-message.-career {
  .subpage-mv{
    h1{
      display: flex;
      gap: 1rem;
      span{
        font-size: 0.7em;
      }
    }
  }

  aside{
    .profile-wrap{
      border-bottom: max(0.1rem,1px) solid #fff;
      padding-bottom: 1.6rem;
      p{
        font-size: 2.1rem;
        font-weight: 500;
      }
    }
  }
  .contents{
    .profile{
      display: grid;
      grid-template-columns: 8.8rem 1fr;
      column-gap: 1.6rem;
      padding-bottom: 5rem;
      border-bottom: var(--bggray) solid max(0.1rem,1px);
      @media screen and (max-width: 768px) {
        margin-inline: 0;
        border-bottom: none;
        grid-template-columns: 5.6rem 1fr;
      }
      .readText{
        margin-block: calc((1em - 1lh) / 2);
      }
    }
    .desc{
      span{
        font-size: 1.5em;
        font-weight: 600;
      }
    }
  }

  .accordion{
    margin-top: 8rem;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
    .accordion-grid{
      margin-top: 1lh;
      font-size: 1.6rem;
      line-height: 2;
      height: 3lh;
      overflow: hidden;
      position: relative;
      transition: height 0.5s ease;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.5lh;
        background-image: linear-gradient(0deg, #fff 0%, transparent 100%);
        transition: opacity 0.3s ease;
      }
      &.open::after{
        opacity: 0;
      }
    }
    h2{
      font-size: 2.8rem;
      padding-bottom: 1.2rem;
      font-weight: 500;
      border-bottom: max(0.1rem,1px) solid var(--main);
      line-height: 1.5;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
      }
    }
    p{
      &+ p{
        margin-top: 4rem;
      }
      &.hd-1{
        font-size: 2.1rem;
        font-weight: 600;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1.5rem;
          }
        }
      }
      &.hd-2{
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 1rem;
        }
      }
      .bold{
        font-weight: 600;
      }
      .red{
        color: rgb(245, 0, 0);
      }
      &.border{
        border-top: max(0.1rem,1px) solid var(--bggray);
        padding-top: 3rem;
      }
    }
    button{
      width: 23rem;
      height: 5.4rem;
      border-radius: 100vmax;
      background-color: var(--bggray);
      display: grid;
      place-content: center;
      box-sizing: border-box;
      padding-top: 0.8rem;
      margin-inline: auto;
      margin-top: 4rem;
      border: max(0.1rem, 1px) solid var(--bggray);
      transition: border-color 0.1s;
      @media screen and (max-width: 768px) {
        width: 20rem;
        height: 4.4rem;
        margin-top: 3rem;
      }
      @media (any-hover: hover) {
        &:hover{
          border-color: var(--main);
        }
      }
      span{
        font-size: 1.4rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      img{
        width: 1.6rem;
        margin-inline: auto;
        transition: transform 0.2s;
      }
    }
    &:has(.accordion-grid.open){
      button img{
        transform: rotate(180deg);
      }
    } 
  }
}

/*------------------------------
	MARK:page: message/new-grad
------------------------------*/
.page-message.-new-grad {
  .subpage-mv{
    h1{
      display: flex;
      gap: 1rem;
      span{
        font-size: 0.7em;
      }
    }
  }

  aside{
    .profile-wrap{
      border-bottom: max(0.1rem,1px) solid #fff;
      padding-bottom: 1.6rem;
      p{
        font-size: 2.1rem;
        font-weight: 500;
      }
    }
  }
  .contents{
    .profile{
      display: grid;
      grid-template-columns: 8.8rem 1fr;
      column-gap: 1.6rem;
      padding-bottom: 5rem;
      border-bottom: var(--bggray) solid max(0.1rem,1px);
      @media screen and (max-width: 768px) {
        margin-inline: 0;
        border-bottom: none;
        grid-template-columns: 5.6rem 1fr;
      }
      .readText{
        margin-block: calc((1em - 1lh) / 2);
      }
    }
  }

  .accordion{
    margin-top: 8rem;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
    &:first-child{
      margin-top: 0;
    }
    .accordion-grid{
      margin-top: 1lh;
      font-size: 1.6rem;
      line-height: 2;
      height: 3lh;
      overflow: hidden;
      position: relative;
      transition: height 0.5s ease;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.5lh;
        background-image: linear-gradient(0deg, #fff 0%, transparent 100%);
        transition: opacity 0.3s ease;
      }
      &.open::after{
        opacity: 0;
      }
    }
    h2{
      font-size: 2.8rem;
      padding-bottom: 1.2rem;
      font-weight: 500;
      border-bottom: max(0.1rem,1px) solid var(--main);
      line-height: 1.5;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
      }
    }
    p{
      &+ p{
        margin-top: 4rem;
      }
      &.hd-1{
        font-size: 2.1rem;
        font-weight: 600;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1.5rem;
          }
        }
      }
      &.hd-2{
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 1rem;
          &.mt3{
            margin-top: 3rem;
          }
        }
      }
      .bold{
        font-weight: 600;
      }
      .red{
        color: rgb(245, 0, 0);
      }
      &.border{
        border-top: max(0.1rem,1px) solid var(--bggray);
        padding-top: 3rem;
      }
    }
    button{
      width: 23rem;
      height: 5.4rem;
      border-radius: 100vmax;
      background-color: var(--bggray);
      display: grid;
      place-content: center;
      box-sizing: border-box;
      padding-top: 0.8rem;
      margin-inline: auto;
      margin-top: 4rem;
      border: max(0.1rem, 1px) solid var(--bggray);
      transition: border-color 0.1s;
      @media screen and (max-width: 768px) {
        width: 20rem;
        height: 4.4rem;
        margin-top: 3rem;
      }
      @media (any-hover: hover) {
        &:hover{
          border-color: var(--main);
        }
      }
      span{
        font-size: 1.4rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      img{
        width: 1.6rem;
        margin-inline: auto;
        transition: transform 0.2s;
      }
    }
    &:has(.accordion-grid.open){
      button img{
        transform: rotate(180deg);
      }
    } 
  }
}

/*------------------------------
	MARK:page: message/tips
------------------------------*/
.page-message.-tips {
  .subpage-mv{
    h1{
      display: flex;
      gap: 1rem;
      span{
        font-size: 0.7em;
      }
    }
  }

  aside{
    .profile-wrap{
      border-bottom: max(0.1rem,1px) solid #fff;
      padding-bottom: 1.6rem;
      p{
        font-size: 2.1rem;
        font-weight: 500;
      }
    }
  }
  .contents{
    .profile{
      display: grid;
      grid-template-columns: 8.8rem 1fr;
      column-gap: 1.6rem;
      padding-bottom: 5rem;
      border-bottom: var(--bggray) solid max(0.1rem,1px);
      @media screen and (max-width: 768px) {
        margin-inline: 0;
        border-bottom: none;
        grid-template-columns: 5.6rem 1fr;
      }
      .readText{
        margin-block: calc((1em - 1lh) / 2);
      }
    }
  }

  .accordion{
    margin-top: 8rem;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
    .accordion-grid{
      margin-top: 1lh;
      font-size: 1.6rem;
      line-height: 2;
      height: 3lh;
      overflow: hidden;
      position: relative;
      transition: height 0.5s ease;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.5lh;
        background-image: linear-gradient(0deg, #fff 0%, transparent 100%);
        transition: opacity 0.3s ease;
      }
      &.open::after{
        opacity: 0;
      }
    }
    h2{
      font-size: 2.8rem;
      padding-bottom: 1.2rem;
      font-weight: 500;
      border-bottom: max(0.1rem,1px) solid var(--main);
      line-height: 1.5;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
      }
    }
    p{
      &+ p{
        margin-top: 3rem;
      }
      &.hd-1{
        font-size: 2.1rem;
        font-weight: 600;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1.5rem;
          }
        }
      }
      &.hd-2{
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
        &+ .readText{
          margin-top: 1rem;
        }
      }
      .bold{
        font-weight: 600;
      }
      .red{
        color: rgb(245, 0, 0);
      }
    }
    button{
      width: 23rem;
      height: 5.4rem;
      border-radius: 100vmax;
      background-color: var(--bggray);
      display: grid;
      place-content: center;
      box-sizing: border-box;
      padding-top: 0.8rem;
      margin-inline: auto;
      margin-top: 4rem;
      border: max(0.1rem, 1px) solid var(--bggray);
      transition: border-color 0.1s;
      @media screen and (max-width: 768px) {
        width: 20rem;
        height: 4.4rem;
        margin-top: 3rem;
      }
      @media (any-hover: hover) {
        &:hover{
          border-color: var(--main);
        }
      }
      span{
        font-size: 1.4rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      img{
        width: 1.6rem;
        margin-inline: auto;
        transition: transform 0.2s;
      }
    }
    &:has(.accordion-grid.open){
      button img{
        transform: rotate(180deg);
      }
    } 
  }
}

/*------------------------------
	MARK:page: message/licensed
------------------------------*/
.page-message.-licensed {
  .subpage-mv{
    h1{
      display: flex;
      gap: 1rem;
      span{
        font-size: 0.7em;
      }
    }
  }

  aside{
    .profile-wrap{
      border-bottom: max(0.1rem,1px) solid #fff;
      padding-bottom: 1.6rem;
      p{
        font-size: 2.1rem;
        font-weight: 500;
      }
    }
  }
  .contents{
    .profile{
      display: grid;
      grid-template-columns: 8.8rem 1fr;
      column-gap: 1.6rem;
      padding-bottom: 5rem;
      border-bottom: var(--bggray) solid max(0.1rem,1px);
      @media screen and (max-width: 768px) {
        margin-inline: 0;
        border-bottom: none;
        grid-template-columns: 5.6rem 1fr;
      }
      .readText{
        margin-block: calc((1em - 1lh) / 2);
      }
    }
  }

  .tab-btn{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 5.4rem;
    gap: 1.5rem;
    border-bottom: max(0.1rem, 1px) solid var(--main);
    margin-bottom: 8rem;
    @media screen and (max-width: 768px) {
      gap: 1rem;
      margin-bottom: 6rem;
    }
    button{
      display: grid;
      place-content: center;
      background-color: var(--bggray);
      font-size: 1.8rem;
      font-weight: 500;
      text-align: center;
      line-height: 1.25;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
      }
      &.current{
        background-color: var(--main);
        color: #fff;
      }
    }
  }

  /* タブ切り替え（前の要素をフェードアウト → 次の要素をフェードインでふわっと） */
  .tab-contents{
    display: none;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    &.is-active{
      display: block;
    }
    &.is-active.is-shown{
      opacity: 1;
      transform: translateY(0);
    }
  }
  aside .link-wrap{
    display: none;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    &.is-active{
      display: block;
    }
    &.is-active.is-shown{
      opacity: 1;
      transform: translateY(0);
    }
  }

  .accordion{
    margin-top: 8rem;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
    &:first-child{
      margin-top: 0;
    }
    .accordion-grid{
      margin-top: 1lh;
      font-size: 1.6rem;
      line-height: 2;
      height: 3lh;
      overflow: hidden;
      position: relative;
      transition: height 0.5s ease;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.5lh;
        background-image: linear-gradient(0deg, #fff 0%, transparent 100%);
        transition: opacity 0.3s ease;
      }
      &.open::after{
        opacity: 0;
      }
    }
    h2{
      font-size: 2.8rem;
      padding-bottom: 1.2rem;
      font-weight: 500;
      border-bottom: max(0.1rem,1px) solid var(--main);
      line-height: 1.5;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
      }
    }
    p{
      &+ p{
        margin-top: 4rem;
      }
      &.hd-1{
        font-size: 2.1rem;
        font-weight: 600;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1.5rem;
          }
        }
      }
      &.hd-2{
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 1.5;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
        &+ .hd-2,
        &+ .readText{
          margin-top: 1rem;
          &.mt3{
            margin-top: 3rem;
          }
        }
      }
      .bold{
        font-weight: 600;
      }
      .red{
        color: rgb(245, 0, 0);
      }
      .indent{
        padding-left: 1em;
        text-indent: -1em;
        display: inline-block;
      }
      &.caption{
        font-size: 0.875em;
      }
      &.border{
        border-top: max(0.1rem,1px) solid var(--bggray);
        padding-top: 3rem;
      }
    }
    button{
      width: 23rem;
      height: 5.4rem;
      border-radius: 100vmax;
      background-color: var(--bggray);
      display: grid;
      place-content: center;
      box-sizing: border-box;
      padding-top: 0.8rem;
      margin-inline: auto;
      margin-top: 4rem;
      border: max(0.1rem, 1px) solid var(--bggray);
      transition: border-color 0.1s;
      @media screen and (max-width: 768px) {
        width: 20rem;
        height: 4.4rem;
        margin-top: 3rem;
      }
      @media (any-hover: hover) {
        &:hover{
          border-color: var(--main);
        }
      }
      span{
        font-size: 1.4rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      img{
        width: 1.6rem;
        margin-inline: auto;
        transition: transform 0.2s;
      }
    }
    &:has(.accordion-grid.open){
      button img{
        transform: rotate(180deg);
      }
    } 
  }
}

/*------------------------------
	MARK:page: keywords
------------------------------*/
.page-keywords {
  background-color: var(--bggray);
  padding-bottom: 10rem;
  @media screen and (max-width: 768px) {
    padding-bottom: 4rem;
  }
  
  .scroll-section{
    position: relative;
    .scroll-area{
      height: 200dvh;
      @media screen and (max-width: 768px) {
        display: none;
      }
    }
  }
  
  .canvas-absolute{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    @media screen and (max-width: 768px) {
      position: static;
    }
  }
  
  .canvas-sticky{
    position: sticky;
    top: var(--header-height);
    left: 0;
    height: calc(100dvh - var(--header-height));
    @media screen and (max-width: 768px) {
      position: static;
      height: auto;
    }
    .inner{
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .keywords-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 70rem;
    max-height: 80rem;
    padding-block: 4rem 6rem;
    @media screen and (max-width: 768px) {
      display: block;
      height: auto;
      min-height: 0;
      max-height: none;
      padding-block: 4rem 0;
    }
  }

  .containerーhd{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.6rem;
    border-top: max(0.6rem,6px) solid var(--main);
    border-bottom: max(0.1rem,1px) solid var(--main);
    font-family: var(--font-roboto);
    flex-shrink: 0;
    color: var(--main);
    @media screen and (max-width: 768px) {
      display: none;
    }
    .progress{
      display: grid;
      grid-template-columns: repeat(5,10rem);
      .bar{
        position: relative;
        height: 1px;
        background-color: #d0d0e5;
        &:nth-of-type(1){z-index: 5;}
        &:nth-of-type(2){z-index: 4;}
        &:nth-of-type(3){z-index: 3;}
        &:nth-of-type(4){z-index: 2;}
        &:nth-of-type(5){z-index: 1;}
        &::before,
        &::after{
          content: "";
          background-color: #d0d0e5;
          width: 0.4rem;
          aspect-ratio: 1;
          position: absolute;
          top: 50%;
        }
        &::before{
          left: 0;
          transform: translate(-50%,-50%);
        }
        &::after{
          right: 0;
          transform: translate(50%,-50%);
        }
        span{
          display: block;
          background-color: var(--main);
          width: 100%;
          height: 1px;
          transform-origin: left center;
          transform: scaleX(0);
        }
        &.active{
          &::before,
          &::after{
            background-color: var(--main);
          }
        }
      }
    }
  }

  .container-contents{
    flex-grow: 1;
    height: 100%;
    position: relative;
    @media screen and (max-width: 768px) {
      height: auto;
      position: static;
    }
    li{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      padding-top: 4rem;
      opacity: 0;
      pointer-events: none;
      @media screen and (max-width: 768px) {
        position: relative;
        height: auto;
        padding-top: 0;
        opacity: 1;
        pointer-events: auto;
        &+ li{
          margin-top: 6rem;
        }
      }
      &.current{
        pointer-events: auto;
        opacity: 1;
      }
      &:nth-of-type(2n){
        .text-area{
          margin-inline: auto 0;
          @media screen and (max-width: 768px) {
            margin-inline: 0;
          }
        }
      }
      .text-area{
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 36rem;
        @media screen and (max-width: 768px) {
          width: 100%;
          height: auto;
          justify-content: flex-start;
          margin-top: 3rem;
        }
        h2{
          font-size: 4.4rem;
          font-weight: 700;
          font-feature-settings: "palt";
          letter-spacing: 0.05em;
          line-height: 1.45;
          display: flex;
          flex-direction: column;
          width: 100%;
          white-space: nowrap;
          color: var(--main);
          opacity: 0;
          transform: translateY(1rem);
          @media screen and (max-width: 768px) {
            font-size: 3rem;
          }
        }
        .readText{
          line-height: 1.8;
          font-weight: 500;
          margin-top: 3.5rem;
          opacity: 0;
          transform: translateY(1rem);
          @media screen and (max-width: 768px) {
            margin-top: 1.5rem;
          }
        }
        &[data-animate-state="shown"]{
          h2{
            animation: textFadeIn 0.8s var(--default-timing-function) forwards;
          }
          .readText{
            animation: textFadeIn 0.8s var(--default-timing-function) 0.1s forwards;
          }
        }
      }
      .image-area{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: grid;
        align-items: center;
        @media screen and (max-width: 768px) {
          position: relative;
          height: auto;
          margin-top: 3rem;
        }
      }
      
      &.keyword01{
        .image{
          width: 50rem;
          margin-left: 48rem;
          overflow: hidden;
          opacity: 0;
          transform: scale(0);
          @media screen and (max-width: 768px) {
            width: 80%;
            margin-inline: auto;
          }
        }
        .image-area{
          @media screen and (max-width: 768px) {
            margin-top: 0;
          }
        }
        .image-area[data-animate-state="shown"]{
          .image{
            animation: keyword01 1.2s cubic-bezier(.58, .38, .05, 1.08) 0.2s forwards;
          }
        }
      }
      &.keyword02{
        .image-wrap{
          overflow: hidden;
          width: 40rem;
          height: 55rem;
          margin-inline: auto 54rem;
          margin-block: auto 0;
          opacity: 0;
          transform: translateY(1rem);
          @media screen and (max-width: 768px) {
            height: 30rem;
            width: 70%;
            margin-inline: auto;
          }
        }
        .image-track{
          display: flex;
          flex-direction: column;
          animation: loop 20s linear infinite;
          img{
            padding-bottom: 0.5rem;
          }
        }
        .image-area[data-animate-state="shown"]{
          .image-wrap{
            animation: textFadeIn 1s ease 0.2s forwards;
          }
        }
      }
      &.keyword03{
        .image-area{
          @media screen and (max-width: 768px) {
            height: 40dvh;
            min-height: 34rem;
            .image-wrap{
              height: 100%;
              width: 100%;
              position: relative;
            }
          }
        }
        img{
          position: absolute;
          top: 50%;
          left: 50%;
          opacity: 0;
          &:nth-of-type(1){
            width: 50rem;
            transform: translate(-4rem,-50%);
            @media screen and (max-width: 768px) {
              width: 30rem;
              transform: translate(-50%,-50%);
            }
          }
          &:nth-of-type(2){
            width: 33rem;
            transform: translate(18rem , -1rem);
            @media screen and (max-width: 768px) {
              width: 20rem;
              transform: translate(-3rem, 0);
            }
          }
          &:nth-of-type(3){
            width: 27rem;
            transform: translate(-8rem,-8rem);
            @media screen and (max-width: 768px) {
              width: 16rem;
              transform: translate(-17rem,-5rem);
            }
          }
          &:nth-of-type(4){
            width: 22rem;
            transform: translate(10rem,-24rem);
            @media screen and (max-width: 768px) {
              width: 14rem;
              transform: translate(-50%,-15rem);
            }
          }
        }
        .image-area[data-animate-state="shown"]{
          img{
            opacity: 1;
            transition: opacity 0.05s;
            &:nth-of-type(1) { transition-delay: 0.2s; }
            &:nth-of-type(2) { transition-delay: 0.5s; }
            &:nth-of-type(3) { transition-delay: 0.6s; }
            &:nth-of-type(4) { transition-delay: 0.9s; }
          }
        }
      }
      &.keyword04{
        .image-area{
          @media screen and (max-width: 768px) {
            width: 100%;
            height: 30dvh;
          }
        }
        .image01{
          position: absolute;
          left: 0;
          bottom: 50%;
          width: 58rem;
          @media screen and (max-width: 768px) {
            width: 100%;
          }
          img{
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
        .image02{
          position: absolute;
          left: 28rem;
          top: 55%;
          width: 36rem;
          @media screen and (max-width: 768px) {
            width: 60%;
            left: 40%;
            top: 13rem;
          }
          img{
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .image03{
          position: absolute;
          left: 6.5rem;
          top: 76%;
          width: 32rem;
          @media screen and (max-width: 768px) {
            width: 54%;
            left: 1.1rem;
            top: 20rem;
          }
          img{
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .m1{
          clip-path: inset(0 50% 75% 50%);
        }
        .m2{
          clip-path: inset(30% 100% 20% 0);
        }
        .m3{
          clip-path: inset(87% 70% 7% 30%);
        }
        .m4{
          clip-path: inset(0 100% 0 0);
        }
        .m5{
          clip-path: inset(0 100% 0 0);
        }
        .image-area[data-animate-state="shown"]{
          .m1,.m2,.m3,.m4,.m5{
            animation-duration: 1s;
            animation-timing-function: cubic-bezier(0, .7, 0, 1);
            animation-delay: 0.4s;
            animation-fill-mode: forwards;
          }
          .m1{ animation-name: m1; }
          .m2{ animation-name: m2; }
          .m3{ animation-name: m3; }
          .m4{ animation-name: m4; }
          .m5{ animation-name: m5; }
        }
      }
      &.keyword05 {
        .image-area{
          @media screen and (max-width: 768px) {
            height: 30dvh;
          }
        }
        .image01 {
          width: 40rem;
          position: absolute;
          left: 50%;
          bottom: 25%;
          transform-origin: 100% 90%;
          transform: scale(0);
          @media screen and (max-width: 768px) {
            left: 5%;
            width: 60%;
            bottom: 20%;
          }
        }
        .image02 {
          width: 22rem;
          position: absolute;
          left: 80%;
          top: 50%;
          transform-origin: 0 90%;
          transform: scale(0);
          @media screen and (max-width: 768px) {
            width: 35%;
            left: 60%;
            top: 50%;
          }
        }

        .image-area[data-animate-state="shown"] {
          .image01 {
            animation: keyword05 1.4s cubic-bezier(.89, .27, .11, .94) forwards;
            img{
              animation: keyword05Img 10s -6s alternate infinite;
            }
          }
          .image02 {
            animation: keyword05 1.4s cubic-bezier(.89, .27, .11, .94) forwards;
            img{
              animation: keyword05Img 10s alternate infinite;
            }
          }
        }
      }
    }
  }
}
@keyframes loop {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@keyframes textFadeIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes keyword01{
  0%{
    opacity: 0;
    transform: scale(0);
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes keyword05{
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}
@keyframes keyword05Img{
  0%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(10%);
  }
}
@keyframes m1 {
  to { clip-path: inset(0 0 75% 50%); }
}
@keyframes m2 {
  to { clip-path: inset(30% 40% 20% 0); }
}
@keyframes m3 {
  to { clip-path: inset(87% 20% 7% 30%); }
}
@keyframes m4 {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes m5 {
  to { clip-path: inset(0 0 0 0); }
}

/*------------------------------
	MARK:page: data
------------------------------*/
.page-data {
  --border: #b0b0c6;

  /* カウントアップ（1文字ずつスタッガー出現） */
  .countUp {
    [data-count-char] {
      --count-ease: cubic-bezier(.47,.02,0,.97);
      display: inline-block;
      opacity: 0;
      transform: translateY(0.2em);
      transition: opacity 1s var(--count-ease),
        transform 0.8s var(--count-ease);
      transition-delay: var(--count-delay, 0ms);
    }
    &[data-count-state="true"] [data-count-char] {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 白背景 */
  .data{
    padding-bottom: 14rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 5rem;
    }
    img{
      width: calc(var(--iw) * 0.1rem);
      @media screen and (max-width: 768px) {
        width: calc(var(--iw) * 0.075rem);
      }
      &.icon03{
        position: absolute;
        bottom: 7rem;
        right: 0;
        @media screen and (max-width: 768px) {
          bottom: 3rem;
        }
      }
      &.icon04{
        margin-inline: auto;
        margin-top: 5rem;
        @media screen and (max-width: 768px) {
          margin-top: 0;
        }
      }
    }
    .num{
      display: flex;
      align-items: flex-end;
      span{
        display: inline-block;
      }
      .countUp{
        font-family: var(--font-roboto);
        font-weight: 700;
        color: var(--main);
        font-size: 14.8rem;
        letter-spacing: -0.05em;
        line-height: 0.75;
        @media screen and (max-width: 768px) {
          font-size: 8rem;
        }
        &.fz80{ 
          font-size: 8rem;
          @media screen and (max-width: 768px) {
            font-size: 5.4rem;
          }
        }
        &.fz90{ 
          font-size: 9rem;
          @media screen and (max-width: 768px) {
            font-size: 6rem;
          }
        }
        &.fz110{ 
          font-size: 11rem;
          @media screen and (max-width: 768px) {
            font-size: 6rem;
          }
        }
      }
      .unit{
        font-weight: 600;
        font-size: 4rem;
        line-height: 1.3;
        white-space: nowrap;
        margin-left: 0.4em;
        @media screen and (max-width: 768px) {
          font-size: 2.8rem;
        }
        &.fz26{ 
          font-size: 2.6rem;
          @media screen and (max-width: 768px) {
            font-size: 1.8rem;
          }
        }
        &.fz18{ 
          font-size: 1.8rem;
        }
        &.fw900{ font-weight: 900;}
      }
    }
    h2{
      font-size: 1.8rem;
      font-weight: 500;
      color: #fff;
      background-color: var(--black);
      padding: 0.5rem 1.6rem 0.6rem;
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
        padding: 0.5rem 1.2rem 0.6rem;
      }
    }
  }
  .data-grid{
    border-bottom: max(1px,0.1rem) solid var(--border);
    &.grid-01{
      display: flex;
      justify-content: space-between;
      @media screen and (max-width: 768px) {
        display: contents;
      }
    }
    &.grid-02{
      margin-top: 5rem;
      @media screen and (max-width: 768px) {
        display: contents;
      }
    }
    &.grid-03{
      margin-top: 5rem;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 10rem;
      @media screen and (max-width: 768px) {
        display: contents;
      }
    }
    &.grid-04{
      display: grid;
      justify-content: space-between;
      grid-template-columns: auto auto;
      margin-top: 5rem;
      column-gap: 10rem;
      @media screen and (max-width: 768px) {
        display: contents;
      }
    }
    &.grid-05{
      margin-top: 5rem;
      border-bottom: none;
      @media screen and (max-width: 768px) {
        display: contents;
      }
    }
  }
  .data-item{
    position: relative;
    padding-block: 5rem 7rem;
    @media screen and (max-width: 768px) {
      padding-block: 5rem 3rem;
      margin-top: 3rem;
      border-bottom: max(1px,0.1rem) solid var(--bggray);
    }
    &.item-01{
      display: flex;
      align-items: flex-end;
      column-gap: 4rem;
      @media screen and (max-width: 768px) {
        flex-direction: column-reverse;
        align-items: center;
        padding-bottom: 5rem;
        img{
          margin-bottom: 3rem;
        }
      }
      .caption{
        position: absolute;
        bottom: 4rem;
        left: 0;
        font-size: 1.4rem;
        @media screen and (max-width: 768px) {
          bottom: 2rem;
          left: auto;
          right: 0;
        }
      }
    }
    &.item-02{
      display: flex;
      align-items: flex-end;
      column-gap: 2rem;
      @media screen and (max-width: 768px) {
        flex-direction: column-reverse;
        align-items: center;
        img{
          margin-bottom: 3rem;
          margin-right: 2rem;
        }
      }
    }
    &.item-03{
      @media screen and (max-width: 768px) {
        padding-bottom: 15rem;
      }
      h3{
        font-size: 2.1rem;
        font-weight: 500;
        line-height: 1.5;
        border-bottom: max(1px,0.1rem) solid var(--black);
        display: inline-block;
        margin-bottom: 2rem;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
          margin-bottom: 1rem;
        }
        span{
          font-size: 0.75em;
          font-weight: 600;
        }
      }
      ul{
        display: grid;
        grid-template-columns: repeat(3,auto);
        justify-content: space-between;
        gap: 6rem 0;
        margin-top: 1rem;
        @media screen and (max-width: 768px) {
          grid-template-columns: 1fr;
          gap: 3rem;
        }
      }
      li{
        display: flex;
        align-items: center;
        column-gap: 2rem;
        @media screen and (max-width: 768px) {
          column-gap: 1.5rem;
        }
        &:nth-child(7){
          grid-column: span 2;
          @media screen and (max-width: 768px) {
            grid-column: span 1;
          }
        }
      }
      .icon-wrap{
        display: grid;
        place-content: center;
        width: 8.4rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: var(--bggray);
        flex-shrink: 0;
        margin-top: 2rem;
        @media screen and (max-width: 768px) {
          width: 6rem;
        }
      }
    }
    &.item-04{
      grid-row: span 2;
      padding-top: 6rem;
      @media screen and (max-width: 768px) {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 5rem;
        img{
          margin-bottom: 2rem;
        }
      }
      .num-row{
        display: flex;
        align-items: flex-end;
        column-gap: 4rem;
        @media screen and (max-width: 768px) {
          justify-content: center;
        }
      }
      .num-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      h3{
        font-size: 2.1rem;
        font-weight: 500;
        margin-bottom: 2rem;
      }
    }
    &.item-05{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-direction: row-reverse;
      border-bottom: max(1px,0.1rem) solid var(--border);
      padding-block: 0 7rem;
      height: fit-content;
      @media screen and (max-width: 768px) {
        flex-direction: column-reverse;
        align-items: center;
        padding-block: 5rem 3rem;
        img{
          margin-bottom: 3rem;
        }
      }
      .num-wrap{
        padding-top: 6rem;
        position: relative;
        @media screen and (max-width: 768px) {
          position: static;
          padding-top: 0;
        }
      }
    }
    &.item-06{
      display: flex;
      align-items: center;
      justify-content: space-between;
      @media screen and (max-width: 768px) {
        flex-direction: column-reverse;
        align-items: center;
        img{
          margin-bottom: 3rem;
        }
      }
      .num-wrap{
        padding-top: 6rem;
        position: relative;
        @media screen and (max-width: 768px) {
          position: static;
          padding-top: 0;
        }
      }
    }
    &.item-07,
    &.item-08{
      .icon-wrap{
        height: 14rem;
        display: grid;
        place-content: center;
        margin-bottom: 1rem;
        @media screen and (max-width: 768px) {
          height: 10rem;
        }
      }
      .num-row{
        display: flex;
        align-items: flex-end;
        column-gap: 6rem;
        @media screen and (max-width: 768px) {
          column-gap: 3rem;
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
      }
      .num-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      h3{
        font-size: 2.1rem;
        font-weight: 500;
        margin-bottom: 2rem;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
      }
    }
    &.item-09{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0;
      @media screen and (max-width: 768px) {
        flex-direction: column-reverse;
        border-bottom: none;
      }
      .num-row{
        display: flex;
        column-gap: 4.5rem;
        @media screen and (max-width: 768px) {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 3rem;
          margin-top: 3rem;
        }
      }
      h3{
        font-size: 2.1rem;
        font-weight: 500;
        line-height: 1.5;
        border-bottom: max(1px,0.1rem) solid var(--black);
        display: inline-block;
        margin-bottom: 2rem;
        width: 10rem;
        text-align: center;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
          width: 7.5rem;
        }
      }
      .num{
        justify-content: center;
        padding-left: 1.5rem;
      }
    }
  }
  
  /* グレー背景 */
  .question{
    background-color: var(--bggray);
    padding-block: 12rem 18rem;
    @media screen and (max-width: 768px) {
      padding-block: 4rem 5rem;
    }
    img{
      width: calc(var(--iw) * 0.1rem);
      @media screen and (max-width: 768px) {
        width: calc(var(--iw) * 0.075rem);
      }
    }
    .question-title{
      p{
        display: grid;
        place-content: center;
        background-color: var(--main);
      }
      .ja{
        height: 3.2rem;
        width: 10rem;
        font-size: 1.4rem;
        color: var(--accent);
        @media screen and (max-width: 768px) {
          height: 2.8rem;
        }
      }
      .en{
        font-family: var(--font-roboto);
        font-size: 10rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        width: 64rem;
        height: 11.8rem;
        color: #fff;
        @media screen and (max-width: 768px) {
          font-size: 4.8rem;
          width: 32rem;
          height: 6.8rem;
        }
      }
    }
    h2{
      font-size: 2.1rem;
      font-weight: 500;
      color: var(--main);
      margin-bottom: 1.5rem;
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
      }
      &::before{
        content: "◼︎";
      }
    }
    .question-grid{
      &.grid-02{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 5rem;
        @media screen and (max-width: 768px) {
          display: contents;
        }
      }
    }
    .question-panel{
      background-color: #fff;
      box-shadow: 0 0 0.3rem #c6c7d640;
      padding: 4rem;
      position: relative;
      @media screen and (max-width: 768px) {
        padding: 2rem;
      }
    }
    .question-item{
      margin-top: 6rem;
      @media screen and (max-width: 768px) {
        margin-top: 4rem;
      }
      &.item-01{
        img{
          position: absolute;
          bottom: 0;
          right: 0;
          &.question01{ right: 1.2rem; }
          &.question03{ right: 1.2rem; }
          &.question04{ right: 1.2rem; }
        }
        ul{
          display: grid;
          grid-template-columns: auto auto auto;
          grid-template-rows: 19rem 19rem;
          gap: 2rem;
          @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto auto;
            gap: 1.5rem;
          }
        }
        li{
          background-color: #fff;
          padding-inline: 3rem;
          display: flex;
          align-items: center;
          position: relative;
          box-shadow: 0 0 0.3rem #c6c7d640;
          @media screen and (max-width: 768px) {
            padding: 2rem;
          }
          &:nth-child(4){
            grid-column: span 2;
            @media screen and (max-width: 768px) {
              grid-column: span 1;
            }
          }
        }
        p{
          font-size: 2.4rem;
          font-weight: 600;
          line-height: 1.5;
          isolation: isolate;
          @media screen and (max-width: 768px) {
            font-size: 1.8rem;
          }
          span{
            position: relative;
            display: inline-block;
            &::before{
              content: "";
              display: block;
              position: absolute;
              z-index: -1;
              background-color: var(--accent);
              width: 105%;
              height: 1rem;
              left: -2.5%;
              bottom: 0.2rem;
              @media screen and (max-width: 768px) {
                height: 0.8rem;
              }

            }
          }
          &.large{
            font-size: 4.2rem;
            @media screen and (max-width: 768px) {
              font-size: 2.8rem;
            }
            span::before{
              bottom: 0.5rem;
            }
          }
        }
      }
      &.item-02{
        .question-panel{
          height: 43rem;
          isolation: isolate;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: flex-end;
          @media screen and (max-width: 768px) {
            height: auto;
          }
        }
        img{
          position: absolute;
          z-index: -1;
          top: 4rem;
          left: 4rem;
          @media screen and (max-width: 768px) {
            top: 2rem;
            left: 2rem;
          }
        }
        .num-wrap{
          @media screen and (max-width: 768px) {
            padding-top: 8rem;
          }
        }
        .sub{
          color: var(--main);
          font-size: 5.4rem;
          line-height: 1.25;
          font-weight: 600;
          margin-bottom: 2.5rem;
          @media screen and (max-width: 768px) {
            font-size: 3.2rem;
            margin-bottom: 1.5rem;
          }
        }
        .num{
          display: flex;
          align-items: flex-end;
          span{
            display: inline-block;
          }
          .countUp{
            font-family: var(--font-roboto);
            font-weight: 700;
            font-size: 14.8rem;
            letter-spacing: -0.05em;
            line-height: 0.75;
            @media screen and (max-width: 768px) {
              font-size: 8rem;
            }
          }
          .unit{
            font-weight: 900;
            font-size: 4rem;
            line-height: 1.3;
            white-space: nowrap;
            margin-left: 0.4em;
            @media screen and (max-width: 768px) {
              font-size: 2.8rem;
            }
          }
        }
        .caption{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            font-size: 1.3rem;
            margin-top: 3rem;
          }
        }
      }
      &.item-03{
        .question-panel{
          height: 43rem;
          isolation: isolate;
          @media screen and (max-width: 768px) {
            height: auto;
            img{
              width: calc(var(--iw) * 0.05rem);
            }
          }
          &::before{
            content: "";
            position: absolute;
            z-index: -1;
            inset: 2.5rem 1.5rem;
            display: block;
            background-repeat: repeat-y;
            background-image: linear-gradient(to bottom, var(--bggray) 0 0.1rem, transparent 0.1rem 100%);
            background-position: 0 0;
            background-size: 100% 2.5rem;
            @media screen and (max-width: 768px) {
              background-size: 100% 2.4rem;
            }
          }
        }
        .question07{
          position: absolute;
          bottom: 3.7rem;
          right: 1.8rem;
        }
      }
      &.item-04,
      &.item-05{
        .question-panel{
          display: grid;
          place-content: center;
          @media screen and (max-width: 768px) {
            display: flex;
            flex-direction: column-reverse;
            padding: 3rem 2rem;
          }
        }
        .icon-wrap{
          width: 24rem;
          aspect-ratio: 1;
          border-radius: 50%;
          background-color: var(--bggray);
          display: grid;
          place-content: center;
          @media screen and (max-width: 768px) {
            width: 12rem;
            margin-inline: auto;
            margin-top: 3rem;
            img{
              width: calc(var(--iw) * 0.05rem);
            }
          }
        }
        ul{
          position: absolute;
          inset: 0;
          @media screen and (max-width: 768px) {
            position: static;
          }
        }
        li{
          --bg: var(--main);
          --color: #fff;
          position: absolute;
          background-color: var(--bg);
          color: var(--color);
          padding: 3rem;
          min-width: 25rem;
          @media screen and (max-width: 768px) {
            position: static;
            padding: 2.5rem 1.5rem;
            min-width: auto;
            width: fit-content;
            margin-inline: auto;
            &+ li{
              margin-top: 2rem;
            }
          }
          &::before{
            content: "";
            position: absolute;
            left: calc(50% - 0.9rem);
            top: calc(100% - 1px);
            display: block;
            background-color: var(--bg);
            width: 1.8rem;
            aspect-ratio: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%);
            @media screen and (max-width: 768px) {
              width: 1.4rem;
              left: calc(50% - 0.7rem);
            }
          }
          &.gray{
            --bg: var(--bggray);
            --color: var(--main);
          }
          p{
            font-size: 3rem;
            font-weight: 500;
            line-height: 1.3;
            text-align: center;
            font-feature-settings: "palt";
            letter-spacing: 0.05em;
            @media screen and (max-width: 768px) {
              font-size: 1.6rem;
            }
            span{color: var(--accent);}
            &.small{ 
              font-size: 1.6rem; 
              @media screen and (max-width: 768px) {
                font-size: 1.4rem;
              }
            }
            &.large{
              font-size: 3.4rem;
              @media screen and (max-width: 768px) {
                font-size: 2rem;
              }
            }
          }
        }
      }
      &.item-04{
        .question-panel{
          height: 52rem;
          @media screen and (max-width: 768px) {
            height: auto;
          }
        }
        li{
          &:nth-child(1){
            left: 8rem;
            top: 5rem;
          }
          &:nth-child(2){
            left: 58rem;
            top: 5rem;
          }
          &:nth-child(3){
            left: 79rem;
            top: 14rem;
          }
          &:nth-child(4){
            left: 4rem;
            top: 24rem;
          }
          &:nth-child(5){
            left: 59rem;
            top: 32rem;
          }
          &:nth-child(6){
            left: 27rem;
            top: 37rem;
          }
        }
      }
      &.item-05{
        .question-panel{
          height: 58rem;
          @media screen and (max-width: 768px) {
            height: auto;
          }
        }
        li{
          &:nth-child(1){
            left: 29rem;
            top: 4rem;
          }
          &:nth-child(2){
            left: 62rem;
            top: 5.5rem;
          }
          &:nth-child(3){
            left: 6rem;
            top: 12rem;
          }
          &:nth-child(4){
            left: 78rem;
            top: 16rem;
          }
          &:nth-child(5){
            left: 6.4rem;
            top: 39rem;
          }
          &:nth-child(6){
            left: 49rem;
            top: 43rem;
          }
          &:nth-child(7){
            left: 72rem;
            top: 32rem;
          }
          &:nth-child(8){
            left: 18rem;
            top: 28rem;
          }
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: workstyle
------------------------------*/
.page-workstyle {
  .benefits{
    padding-block: 10rem 15rem;
    background-color: var(--bggray);
    @media screen and (max-width: 768px) {
      padding-block: 4rem;
    }
    .title{
      display: flex;
      column-gap: 8rem;
      @media screen and (max-width: 768px) {
        display: block;
      }
      .title-wrap{
        flex-shrink: 0;
        .en{
          font-family: var(--font-roboto);
          font-weight: 500;
          color: var(--main);
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
        }
        h2{
          font-size: 5rem;
          font-weight: 500;
          margin-top: 1rem;
          @media screen and (max-width: 768px) {
            font-size: 2.8rem;
            margin-top: 0.5rem;
          }
        }
      }
      .readText{
        margin-top: calc((1em - 1lh) / 2);
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
        }
      }
    }
    .image{
      margin-top: 6rem;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
      }
    }
    .benefits-grid{
      display: grid;
      grid-template-columns: repeat(6,1fr);
      grid-template-rows: auto auto;
      gap: 2rem;
      margin-top: 4rem;
      @media screen and (max-width: 768px) {
        gap: 1.5rem;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5,auto);
      }
      li{
      background-color: #fff;
        &:not(:has(.title-wrap)){
          grid-column: span 2;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1.2rem 1.2rem 1.2rem 3rem;
          @media screen and (max-width: 768px) {
            padding: 1rem 1rem 1rem 2rem;
            width: 100%;
            grid-column: span 1;
          }
        }
        &:has(.title-wrap){
          grid-column: span 3;
          padding: 1.2rem 1.2rem 3rem 1.2rem;
          @media screen and (max-width: 768px) {
            padding: 1rem 1rem 2rem 1rem;
            grid-column: span 1;
          }
        }
        .title-wrap{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 1.2rem;
          border-bottom: max(0.1rem,1px) solid #b0b0c6;
          padding-left: 1.8rem;
          @media screen and (max-width: 768px) {
            padding-left: 1rem;
            padding-bottom: 1rem;
          }

        }
        h3{
          span{
            font-size: 2.6rem;
            font-weight: 500;
            @media screen and (max-width: 768px) {
              font-size: 2rem;
            }
            &.sub{
              font-size: 1.4rem;
              font-feature-settings: "palt";
              display: inline-block;
              margin-top: 0.8rem;
              @media screen and (max-width: 768px) {
                font-size: 1.2rem;
              }
            }
          }
        } 
        .icon{
          display: grid;
          place-content: center;
          background-color: var(--main);
          width: 7.8rem;
          aspect-ratio: 1;
          @media screen and (max-width: 768px) {
            width: 5.4rem;
          }
          img{
            width: calc(var(--iw) * 0.1rem);
            @media screen and (max-width: 768px) {
              width: calc(var(--iw) * 0.07rem);
            }
          }
        }
        .list{
          padding-left: 1.8rem;
          margin-top: 2.5rem;
          @media screen and (max-width: 768px) {
            padding-left: 1rem;
            margin-top: 2rem;
          }
          p{
            font-size: 1.6rem;
            display: flex;
            align-items: center;
            column-gap: 0.5em;
            @media screen and (max-width: 768px) {
              font-size: 1.4rem;
            }
            &::before{
              content: "●";
              color: var(--main);
              font-size: 0.7em;
            }
            &+ p{
              margin-top: 1rem;
            }
          }
        }
      }
    }
  }
  .bg-fff{
    padding-block: 18rem 16rem;
    background-color: #fff;
    @media screen and (max-width: 768px) {
      padding-block: 4rem;
    }
  }
  .policy{
    .policy-wrap{
      padding-bottom: 10rem;
      border-bottom: max(0.1rem,1px) solid #b0b0c6;
      display: flex;
      column-gap: 6rem;
      @media screen and (max-width: 768px) {
        padding-bottom: 4rem;
        display: block;
      }
      .title{
        .title-wrap{
          .en{
            font-family: var(--font-roboto);
            font-weight: 500;
            color: var(--main);
            @media screen and (max-width: 768px) {
              font-size: 1.4rem;
            }
          }
          h2{
            font-size: 5rem;
            font-weight: 500;
            margin-top: 1rem;
            @media screen and (max-width: 768px) {
              font-size: 2.8rem;
              margin-top: 0.5rem;
            }
          }
        }
        .readText{
          margin-top: 5rem;
          @media screen and (max-width: 768px) {
            margin-top: 2rem;
          }
        }
      }
      .image{
        width: 54rem;
        flex-shrink: 0;
        @media screen and (max-width: 768px) {
          width: 100%;
          margin-top: 3rem;
        }
      }
    }
  }
  .secure{
    .secure-wrap{
      padding-top: 10rem;
      display: flex;
      column-gap: 7rem;
      @media screen and (max-width: 768px) {
        padding-top: 4rem;
        display: block;

      }
      .title-wrap{
        flex-shrink: 0;
        .en{
          font-size: 1.4rem;
          font-weight: 500;
          font-family: var(--font-roboto);
          color: #fff;
          background-color: var(--main);
          padding: 0.5em 0.8rem;
          display: inline-block;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
        h2{
          font-size: 3.4rem;
          font-weight: 500;
          margin-top: 1.6rem;
          @media screen and (max-width: 768px) {
            font-size: 2.8rem;
            margin-top: 1rem;
          }
        }
      }
      ul{
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
        }
        li{
          background-color: var(--bggray);
          display: flex;
          @media screen and (max-width: 768px) {
            display: block;
          }
          &+ li{
            margin-top: 3.5rem;
            @media screen and (max-width: 768px) {
              margin-top: 2rem;
            }
          }
          .image{
            width: 30rem;
            flex-shrink: 0;
            @media screen and (max-width: 768px) {
              width: 100%;
            }
          }
          .text-wrap{
            padding-inline: 4.5rem;
            display: grid; 
            place-content: center;
            @media screen and (max-width: 768px) {
              padding-inline: 2rem;
              padding-block: 2rem;
            }
            .hd{
              display: flex;
              align-items: flex-start;
              column-gap: 1.5rem;
              @media screen and (max-width: 768px) {
                column-gap: 1rem;
              }
              .num{
                font-size: 1.4rem; 
                font-weight: 500;
                display: grid;
                place-content: center;
                color: #fff;
                background-color: var(--main);
                width: 3rem;
                aspect-ratio: 1;
                @media screen and (max-width: 768px) {
                  font-size: 1.2rem;
                  width: 2.6rem;
                }
              }
              h3{
                font-size: 2.4rem;
                font-weight: 500;
                line-height: 1.5;
                margin-top: -0.4rem;
                @media screen and (max-width: 768px) {
                  font-size: 1.8rem;
                  margin-top: -0.2rem;
                }
              }
            }
            .readText{
              margin-top: 1.2rem;
              font-feature-settings: "palt";
            }
          }
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: jobs
------------------------------*/
.page-jobs-list{
  --office: #007de6;
  .list{
    padding-bottom: 10rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 6rem;
    }
  }
  .list-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7rem;
    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 4rem;
    }
    a{
      position: relative;
      padding-right: 2rem;
      background-color: var(--main);
      @media screen and (max-width: 768px) {
        padding-right: 1rem;
      }
      &.office{
        --main: var(--office);
      }
      .title-wrap{
        display: flex;
        align-items: center;
      }
      .num{
        display: grid;
        place-content: center;
        background-color: var(--bggray);
        width: 8.6rem;
        height: 7.8rem;
        color: var(--main);
        font-size: 3.2rem;
        font-family: var(--font-roboto);
        padding-top: .1em;
        @media screen and (max-width: 768px) {
          width: 5.4rem;
          height: 4.8rem;
          font-size: 2rem;
        }
      }
      h2{
        font-size: 2.8rem;
        font-weight: 500;
        color: #fff;
        padding-left: 2.5rem;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
          padding-left: 1.5rem;
        }
      }
      .image{
        overflow: hidden;
      }
      .magnetic-hover{
        position: absolute;
        top: 2rem;
        right: 2rem;
        @media screen and (max-width: 768px) {
          top: 0.8rem;
          right: 1rem;
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: jobs/office
------------------------------*/
.page-jobs-page {
  --office: #007de6;
  .aside-container{
    margin-top: 12rem;
    @media screen and (max-width: 768px) {
      margin-top: 0;
    }
    &.office{
      --main: var(--office);
    }
    aside{
      padding-inline: 0;
      .aside-sticky{
        display: block;
        padding-top: 0;
        padding-bottom: 0;
      }
      .aside-wrap{
        padding-block: 4rem;
        padding-inline: 10rem 6rem;
        height: calc(100% - 14rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-y: scroll;
        overscroll-behavior: contain;
      }
      .jobs-title{
        background-color: var(--main);
        height: 14rem;
        padding: 7.5rem 0 2rem 10rem;
        color: #fff;
        font-weight: 600;
        font-size: 3.2rem;
      }
      .jobs-wrap{
        padding-top: 0;
        .scope{
          margin-top: 0;
        }
        .scope-hd{
          font-size: 1.6rem;
          font-weight: 600;
          color: var(--main);
          border-bottom: max(0.1rem, 1px) solid var(--main);
          padding-bottom: 1rem;
          &::before{
            content: "◼︎";
            display: inline-block;
            margin-right: 0.125em;
          }
        }
        ul{
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          margin-top: 2rem;
          li{
            display: inline-block;
            padding: 0.8rem 1rem;
            font-size: 1.3rem;
            background-color: #fff;
            color: var(--black);
          }
          &+ .scope-hd{
            margin-top: 4rem;
          }
        }
      }
      .link-wrap{
        li{
          background-position: left;
          background-size: 0% 100%;
          &.current{
            background-color: #d0d0e5;
            background-size: 100% 100%;
          }
          &+ li{
            margin-top: 1rem;
          }
          a{
            display: block;
            padding-block: 1rem 0.5rem;
          }
          span{
            display: block;
            width: fit-content;
            &.en{
              color: #fff;
              background-color: var(--main);
              font-size: 1.4rem;
              font-family: var(--font-roboto);
              padding: 0.3rem 0.4rem;
              letter-spacing: 0.05em;
              line-height: 1;
            }
            &.ja{
              font-size: 1.6rem;
              font-weight: 600;
              color: var(--main);
              margin-top: 0.1em;
            }
          }
        }
      }
    }
    .contents{
      @media screen and (max-width: 768px) {
        padding-bottom: 2rem;
      }
    }
    .items{
      .item{
        display: grid;
        grid-template-columns: 1fr 38rem;
        padding-bottom: 6rem;
        border-bottom: max(0.1rem,1px) solid var(--bggray);
        @media screen and (max-width: 768px) {
          display: block;
          padding-bottom: 4rem;
        }
        &+ .item{
          padding-top: 3rem;
          @media screen and (max-width: 768px) {
            padding-top: 4rem;
          }
        }
        .icon-wrap{
          p{
            width: fit-content;
            padding-block: 0.6rem;
            background-color: var(--main);
            @media screen and (max-width: 768px) {
              padding-block: 0.2rem;
            }
            span{
              display: inline-block;
              padding: 0.2rem 1rem;
              color: #fff;
              font-family: var(--font-roboto);
              letter-spacing: 0.1em;
              @media screen and (max-width: 768px) {
                padding: 0.2rem 0.8rem;
                font-size: 1.2rem;
              }
              &:first-of-type{
                border-right: max(0.1rem,1px) dotted #fff;
              }
            }
          }
          h2{
            font-size: 3.6rem;
            font-weight: 600;
            color: var(--main);
            margin-top: 2rem;
            line-height: 1;
            span{
              font-size: 0.6em;
              font-feature-settings: "palt";
            }
            @media screen and (max-width: 768px) {
              font-size: 2.4rem;
              margin-top: 1.2rem;
            }
          }
          img{
            width: calc(var(--iw) * 0.1rem);
            margin-inline: auto;
            margin-top: 4rem;
            @media screen and (max-width: 768px) {
              margin-top: 3rem;
              width: calc(var(--iw) * 0.07rem);
            }

          }
        }
        .desc-wrap{
          @media screen and (max-width: 768px) {
            margin-top: 3rem;
          }
          .desc-hd{
            border-left: max(0.4rem, 4px) solid var(--main);
            height: 4.2rem;
            display: flex;
            align-items: center;
            background-color: var(--bggray);
            padding-left: 1.5rem;
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 2rem;
            @media screen and (max-width: 768px) {
              height: 3.6rem;
              padding-left: 1rem;
              font-size: 1.8rem;
              margin-bottom: 1.5rem;
            }
          }
          p{
            line-height: 2;
            @media screen and (max-width: 768px) {
              line-height: 1.8;
            }
            &+ .desc-hd{
              margin-top: 3rem;
            }
          }
        }
      } 
    }
    .schedule{
      .schedule-hd{
        margin-top: 8rem;
        padding-bottom: 3rem;
        border-bottom: max(0.1rem,1px) solid currentColor;
        color: var(--main);
        @media screen and (max-width: 768px) {
          margin-top: 5rem;
        }
        .en{
          font-size: 4.6rem;
          font-weight: 700;
          font-family: var(--font-roboto);
          @media screen and (max-width: 768px) {
            font-size: 4rem;
          }
        }
        h2{
          font-weight: 600;
          margin-top: 0.4em;
          @media screen and (max-width: 768px) {
            margin-top: 0.2rem;
          }
        }
      }
      .term-wrap{
        margin-top: 4rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 6rem;
        @media screen and (max-width: 768px) {
          display: block;
          margin-top: 3rem;
        }
        .column-wrap{
          &:last-child{
            .term:last-child::before{
              display: none;
            }
          }
          @media screen and (max-width: 768px) {
            display: contents;
          }
        }
        .term{
          position: relative;
          display: flex;
          column-gap: 2rem;
          padding-bottom: 3.5rem;
          @media screen and (max-width: 768px) {
            column-gap: 1.5rem;
            padding-bottom: 3rem;
          }
          &::before{
            content: "";
            width: 1rem;
            height: 100%;
            position: absolute;
            left: 6rem;
            top: 0;
            background-color: var(--bggray);
          }
          time{
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--main);
            width: 14rem;
            height: 5rem;
            border-radius: 100vmax;
            padding-right: 0.2rem;
            flex-shrink: 0;
            position: relative;
            @media screen and (max-width: 768px) {
              width: 11rem;
              height: 4.4rem;
            }
            span{
              text-align: center;
              display: inline-block;
              flex-grow: 1;
              font-size: 2.1rem;
              font-weight: 500;
              font-family: var(--font-roboto);
              color: #fff;
              letter-spacing: 0.05em;
              @media screen and (max-width: 768px) {
                font-size: 1.6rem;
              }
            }
            .clock{
              width: 4.6rem;
              aspect-ratio: 1;
              border-radius: 50%;
              background-color: #fff;
              position: relative;
              @media screen and (max-width: 768px) {
                width: 4rem;
              }
              &::before,&::after{
                content: "";
                width: 0.2rem;
                background-color: var(--main);
                position: absolute;
                bottom: calc(50% - 0.1rem);
                left: calc(50% - 0.1rem);
                transform-origin: center calc(100% - 0.1rem);
                border-radius: 0.1rem;
              }
              &::before{
                height: 1.4rem;
                transform: rotate(calc(var(--short) / 12 * 360deg));
                @media screen and (max-width: 768px) {
                  height: 1.2rem;
                }
              }
              &::after{
                height: 1.8rem;
                transform: rotate(calc(var(--long) / 60 * 360deg));
                @media screen and (max-width: 768px) {
                  height: 1.6rem;
                }
              }
            }
          }
          .desc{
            padding-top: 1.45rem;
            @media screen and (max-width: 768px) {
              padding-top: 1.1rem;
            }
            &:has(.phase){
              padding-top: 1.4rem;
              @media screen and (max-width: 768px) {
                padding-top: 1.3rem;
              }
            }
            .phase{
              font-size: 2.2rem;
              font-weight: 600;
              color: var(--main);
              margin-bottom: 1rem;
              line-height: 1;
              @media screen and (max-width: 768px) {
                font-size: 1.8rem;
              }
            }
            p{
              font-size: 1.4rem;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
  .to-interview{
    background-color: var(--bggray);
    padding-block: 9rem 12rem;
    padding-inline: 43rem 6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 3rem;
    @media screen and (max-width: 768px) {
      padding-block: 4rem;
      padding-inline: 2rem;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    a{
      display: flex;
      width: fit-content;
      justify-content: stretch;
      align-items: center;
      width: 100%;
      padding: 2rem 2.5rem 2rem 2rem;
      background-color: #fff;
      @media screen and (max-width: 768px) {
        margin-inline: auto;
        width: 100%;
        padding: 1rem;
      }
      .image{
        width: 20rem;
        @media screen and (max-width: 768px) {
          width: 12rem;
        }
      }
      .title-wrap{
        margin-left: 2.5rem;
        @media screen and (max-width: 768px) {
          margin-left: 1.5rem;
        }
        .en{
          font-weight: 500;
          font-family: var(--font-roboto);
          font-size: 5rem;
          color: var(--main);
          @media screen and (max-width: 768px) {
            font-size: 2.1rem;
          }
        }
        .job{
          color: #fff;
          background-color: var(--main);
          display: inline-block;
          font-size: 1.4rem;
          font-weight: 500;
          padding: 0.5rem 1rem;
          margin-top: 1rem;
          @media screen and (max-width: 768px) {
            font-size: 1rem;
            padding: 0.3rem 0.5rem;
          }
        }
        .name{
          font-weight: 500;
          font-size: 2.1rem;
          margin-top: 0.8rem;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
            margin-top: 0.5rem;
          }
          span{
            font-size: 0.75em;
          }
        }
      }
      .magnetic-hover{
        margin-inline: auto 0;
        box-shadow: 0 0 0.6rem #c6c7d690;
      }
    }
  }
}

/*------------------------------
	MARK:page: faq
------------------------------*/
.page-faq {
  .contents{
    margin-top: 7rem;
    padding-bottom: 12rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      padding-bottom: 6rem;
    }
    .row{
      &+ .row{
        margin-top: 5rem;
        @media screen and (max-width: 768px) {
          margin-top: 2.5rem;
        }
      }
    }
    dt{
      padding: 1.8rem;
      background-color: var(--main);
      position: relative;
      display: grid;
      grid-template-columns: 5.4rem 1fr 4rem;
      align-items: center;
      @media screen and (max-width: 768px) {
        padding: 1rem;
        grid-template-columns: 4rem 1fr 3rem;
        align-items: flex-start;
        &.align-center{
          align-items: center;
        }
      }
      .en{
        display: grid;
        place-content: center;
        background-color: var(--bggray);
        color: var(--main);
        font-size: 3.2rem;
        font-weight: 500;
        font-family: var(--font-roboto);
        aspect-ratio: 1;
        @media screen and (max-width: 768px) {
          font-size: 2rem;
        }
      }
      p{
        color: #fff;
        font-size: 2.1rem;
        font-weight: 500;
        padding-inline: 2rem;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
          padding-inline: 1.5rem;
          line-height: 1.5;
        }
      }
      .icon{
        display: grid;
        place-content: center;
        @media screen and (max-width: 768px) {
          aspect-ratio: 1;
        }
        img{
          width: 1.6rem;
          transition: transform 0.2s;
          transform: rotate(180deg);
        }
      }
    }
    dd{
      display: grid;
      .faq-a-wrap{
        padding: 1.8rem;
        display: grid;
        grid-template-columns: 5.4rem 1fr;
        background-color: var(--bggray);
        @media screen and (max-width: 768px) {
          padding: 1rem;
          grid-template-columns: 4rem 1fr;
        }
      }
      .en{
        display: grid;
        place-content: center;
        background-color: #fff;
        color: var(--main);
        font-size: 3.2rem;
        font-weight: 500;
        font-family: var(--font-roboto);
        aspect-ratio: 1;
        @media screen and (max-width: 768px) {
          font-size: 2rem;
        }
      }
      .readText{
        line-height: 1.75;
        padding-inline: 2rem;
        padding-block: 1rem;
        @media screen and (max-width: 768px) {
          padding-inline: 1.5rem;
          padding-block: 0.8rem;
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: aptitude-test
------------------------------*/
.page-aptitude-test {
  background-color: var(--bggray);
  [hidden]{
    display: none !important;
  }
  .test-canvas{
    position: relative;
    overflow: hidden;
    min-height: calc(80rem - var(--header-height));
    height: calc(100dvh - var(--header-height));
    max-height: calc(100rem - var(--header-height));
    @media screen and (max-width: 768px) {
      min-height: 64rem;
      max-height: none;
    }
    .images,
    .images-result{
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      img{
        position: absolute;
        bottom: 0;
      }
      .image01{
        width: 25.2rem;
        left: 4.4rem;
        @media screen and (max-width: 768px) {
          width: 25%;
          left: -1rem;
        }
      }
      .image02{
        width: 19rem;
        left: 28rem;
        @media screen and (max-width: 768px) {
          width: 20%;
          left: 20%;
        }
      }
      .image03{
        width: 22rem;
        right: 28rem;
        @media screen and (max-width: 768px) {
          width: 22%;
          right: 20%;
        }
      }
      .image04{
        width: 21rem;
        right: 5rem;
        @media screen and (max-width: 768px) {
          width: 22%;
          right: -1rem;
        }
      }
    }
    .result-confetti{
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      canvas{
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .first-view,
    .calc-view,
    .result-view{
      opacity: 1;
      transform: translateY(0);
      transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      &.is-entering{
        opacity: 0;
        transform: translateY(1.4rem);
        pointer-events: none;
      }
    }

    .first-view{
      padding-top: 8rem;
      isolation: isolate;
      @media screen and (max-width: 768px) {
        padding-top: 3rem;
      }
      .title-wrap{
        display: flex;
        align-items: center;
        @media screen and (max-width: 768px) {
          display: block;
          text-align: center;
        }
        h2{
          font-size: 4.4rem;
          font-weight: 600;
          color: var(--main);
          line-height: 2;
          padding-right: 1.5rem;
          border-right: #b0b0c6 solid max(0.1rem, 1px);
          margin-right: 1.5rem;
          white-space: nowrap;
          @media screen and (max-width: 768px) {
            font-size: 2rem;
            border-right: 0;
          }
        }
        .readText{
          font-size: 1.8rem;
          font-weight: 500;
          line-height: 1.6;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
            text-align: center;
          }
        }
      }
      .btn-container{
        width: 62rem;
        height: 31rem;
        margin-inline: auto;
        margin-top: 6rem;
        background-color: #fff;
        box-shadow: 0 0 0.3rem #c6c7d640;
        display: grid;
        place-content: center;
        @media screen and (max-width: 768px) {
          width: 100%;
          height: auto;
          margin-top: 4rem;
          padding-block: 3rem 2.5rem;
          padding-inline: 2rem;
          display: block;
        }
        p{
          font-size: 2.4rem;
          font-weight: 500;
          text-align: center;
          line-height: 1.5;
          @media screen and (max-width: 768px) {
            font-size: 1.8rem;
          }
        }
        .start-btn{
          margin-top: 2.5rem;
          display: grid;
          place-content: center;
          background-color: var(--main);
          color: #fff;
          font-size: 2.1rem;
          font-weight: 500;
          width: 42rem;
          height: 11rem;
          margin-inline: auto;
          @media screen and (max-width: 768px) {
            margin-top: 2rem;
            width: 100%;
            height: 6rem;
            font-size: 1.6rem;
          }
          @media (any-hover: hover) {
            &:hover{
              opacity: 0.7;
            }
          }
        }
      }
    }

    .question-view{
      padding-top: 7rem;
      position: absolute;
      z-index: 1;
      inset: 0;
      opacity: 1;
      transform: translateY(0);
      transition:
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      @media screen and (max-width: 768px) {
        padding-top: 3rem;

      }
      &.is-entering{
        opacity: 0;
        transform: translateY(1.4rem);
        pointer-events: none;
      }
      .question-panel{
        position: relative;
        width: 79rem;
        height: 42rem;
        background-color: #fff;
        box-shadow: 0 0 0.3rem #c6c7d640;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-inline: auto;
        border-top: 1.2rem solid var(--main);
        padding: 4rem 9rem 5rem;
        @media screen and (max-width: 768px) {
          width: 100%;
          height: auto;
          border-top: 0.6rem solid var(--main);
          padding: 8rem 2rem 2.5rem;
        }
      }
      .num-title{
        display: grid;
        place-content: center;
        background-color: var(--main);
        width: 10rem;
        height: 8.8rem;
        font-family: var(--font-roboto);
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        padding-bottom: 0.5rem;
        @media screen and (max-width: 768px) {
          width: 6rem;
          height: 5.4rem;
          padding-bottom: 0.2rem;
        }
        .en{
          color: var(--accent);
          font-weight: 500;
          @media screen and (max-width: 768px) {
            font-size: 1rem;
          }
        }
        .num{
          font-size: 6.6rem;
          color: #fff;
          line-height: 1;
          height: 1em;
          @media screen and (max-width: 768px) {
            font-size: 4rem;
          }
          .counter{
            /* display: inline-block;
            width: 1ch; */
            display: inline-grid;
            position: relative;
            overflow: hidden;
            height: 1em;
            line-height: 1;
            vertical-align: top;
            &.is-slotting{
              .counter-slot-current{
                opacity: 0;
                transform: translateY(-100%);
              }
              .counter-slot-next{
                opacity: 1;
                transform: translateY(0);
              }
            }
          }
        }
        .counter-slot{
          display: grid;
          place-items: center;
          height: 1em;
          line-height: 1;
          transition:
            opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .counter-slot-next{
          position: absolute;
          inset: 0;
          opacity: 0;
          transform: translateY(100%);
        }
      }
      .question-term{
        height: 2lh;
        text-align: center;
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.5;
        display: grid;
        place-content: center;
        .question-title{
          white-space: pre-line;
          @media screen and (max-width: 768px) {
            white-space: unset;
          }
        }
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
        }
      }

      .btn-wrap{
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 768px) {
          margin-top: 4rem;
          display: block;
        }
        button{
          width: 28rem;
          height: 8rem;
          display: grid;
          place-content: center;
          color: #fff;
          font-size: 3rem;
          font-weight: 500;
          border-width: max(0.1rem,1px);
          border-style: solid;
          border-color: transparent;
          transition: 0.1s var(--default-timing-function);
          @media screen and (max-width: 768px) {
            width: 100%;
            height: 6rem;
            font-size: 2rem;
          }
          &.yes-btn{
            background-color: var(--main);
            @media (any-hover: hover) {
              &:hover{
                border-color: var(--main);
                background-color: transparent;
                color: var(--main);
              }
            }
          }
          &.no-btn{
            background-color: #0e178d99;
            @media screen and (max-width: 768px) {
              margin-top: 1rem;
            }
            @media (any-hover: hover) {
              &:hover{
                border-color: #0e178d99;
                background-color: transparent;
                color: var(--main);
              }
            }
          }
        }
      }

      .question-indicator{
        width: 100%;
        height: 6rem;
        display: flex;
        align-items: center;
        column-gap: 2rem;
        isolation: isolate;
        padding-inline: 2.5rem;
        box-shadow: 0 0 0.5rem #c6c7d699;
        @media screen and (max-width: 768px) {
          height: 4rem;
          padding-inline: 1.5rem;
          margin-top: 3rem;
          column-gap: 1rem;
        }
        .bar{
          height: 1rem;
          width: 100%;
          background-color: var(--bggray);
          span{
            display: block;
            width: 100%;
            height: 100%;
            transform-origin: left;
            background-color: var(--main);
            transform: scaleX(calc(var(--term) / 9));
            transition: transform 0.4s var(--default-timing-function);
          }
        }
        .progress{
          flex-shrink: 0;
          font-size: 1.6rem;
          font-family: var(--font-roboto);
          color: var(--main);
          .counter{
            display: inline-block;
            width: 1ch;
          }
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
        }
      }

    }
    .back-btn{
      margin-top: 3.5rem;
      width: fit-content;
      margin-inline: auto;
      display: block;
      color: var(--sub);
      font-size: 1.6rem;
      font-weight: 500;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
        font-size: 1.6rem;
      }
      @media (any-hover: hover) {
        &:hover{
          text-decoration: underline;
        }
      }
    }
    .calc-view{
      position: absolute;
      z-index: 1;
      inset: 0;
      display: grid;
      place-content: center;
      text-align: center;
      padding-bottom: 16rem;
      pointer-events: none;
      .calc-now{
        font-size: 2.4rem;
        font-weight: 600;
        color: var(--main);
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
      }
    }

    .result-view{
      position: relative;
      z-index: 1;
      padding-top: 7rem;
      isolation: isolate;
      @media screen and (max-width: 768px) {
        padding-top: 3rem;
      }
      .result-panel{
        width: 79rem;
        margin-inline: auto;
        position: relative;
        @media screen and (max-width: 768px) {
          width: 100%;
        }
        .result-hd{
          display: grid;
          place-content: center;
          background-color: var(--main);
          color: #fff;
          font-size: 2.1rem;
          font-weight: 500;
          height: 8rem;
          @media screen and (max-width: 768px) {
            height: 6rem;
            font-size: 1.8rem;
          }
        }
        .result-container{
          background-color: #fff;
          padding: 5rem 4rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          @media screen and (max-width: 768px) {
            padding: 2.5rem 2rem;
          }
        }
        .result-title{
          font-size: 2.4rem;
          font-weight: 600;
          border-bottom: max(0.2rem,2px) solid var(--bggray);
          padding-bottom: 1.5rem;
          color: var(--main);
          text-align: center;
          font-feature-settings: "palt";
          @media screen and (max-width: 768px) {
            font-size: 1.8rem;
            line-height: 1.3;
          }
        }
        .result-score{
          position: relative;
          font-size: 6rem;
          font-weight: 500;
          color: var(--main);
          display: flex;
          justify-content: center;
          align-items: flex-end;
          margin-top: 4rem;
          padding-bottom: 1.5rem;
          padding-right: 0.5em;
          @media screen and (max-width: 768px) {
            font-size: 3rem;
            padding-bottom: 1rem;
          }
          &::before{
            content: "";
            position: absolute;
            z-index: 0;
            width: 100%;
            height: 3.8rem;
            bottom: 0;
            left: 0;
            background-color: var(--accent);
            @media screen and (max-width: 768px) {
              height: 3rem;
            }
          }
          span{
            display: inline-block;
            position: relative;
          }
          .unit{
            transform: translateY(-0.05em);
          }
          .score{
            font-size: 2.5em;
            font-weight: 700;
            font-family: var(--font-roboto);
            letter-spacing: -0.05em;
            line-height: 0.75;
            margin-right: 0.1em;
            &> span{
              letter-spacing: -0.1em;
            }
          }
        }
        .result-link{
          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 2rem;
          margin-top: 5rem;
          @media screen and (max-width: 768px) {
            flex-direction: column;
            row-gap: 1rem;
            margin-top: 3rem;
          }
          p{
            font-size: 1.8rem;
            line-height: 1.5;
            @media screen and (max-width: 768px) {
              font-size: 1.6rem;
              text-align: center;
            }
          }
          picture{
            width: 1rem;
            @media screen and (max-width: 768px) {
              width: 100%;
            }
          }
          .link-btn{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-inline: 3rem 2.5rem;
            width: 29rem;
            height: 9rem;
            background-color: var(--main);
            color: #fff;
            font-size: 2.1rem;
            font-weight: 500;
            margin-left: 1rem;
            line-height: 1;
            @media screen and (max-width: 768px) {
              width: 100%;
              padding-inline: 2rem 1.5rem;
              height: 7rem;
              margin-left: 0;
              font-size: 1.8rem;
            }
            &:has(.caption){
              text-align: center;
              justify-content: center;
              padding-inline: 0;
              @media (any-hover: hover) {
                &:hover{
                  opacity: 0.7;
                }
              }
            }
            .caption{
              font-size: 0.5em;
            }
          }
        }
        .result-effects-left,
        .result-effects-right{
          position: absolute;
          top: 0;
          height: 100%;
          aspect-ratio: 600 / 1100;
          @media screen and (max-width: 768px) {
            display: none;
          }
          img{
            height: 100%;
            position: absolute;
            animation-timing-function: cubic-bezier(0, .61, .2, 1);
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            &:nth-of-type(2){animation-delay: 0.05s;}
            &:nth-of-type(3){animation-delay: 0.1s;}
          }
        }
        .result-effects-left{
          right: 100%;
          img{
            transform-origin: right center;
            transform: scale(0);
          }
        }
        .result-effects-right{
          left: 100%;
          img{
            transform-origin: left center;
            transform: scale(0);
          }
        }
        &:has(.result-high:not([hidden])){
          .result-effects-left,
          .result-effects-right{
            img{
              animation-name: effects;
            }
          }
        }
        &:has(.result-visit:not([hidden])){
          .result-effects-left,
          .result-effects-right{
            img{
              &:nth-of-type(1),
              &:nth-of-type(2){
                animation-name: effects;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes effects {
  to{transform: scale(1);}
}

/*------------------------------
	MARK:page: interview
------------------------------*/
.page-interview-list {
  .filter{
    margin-top: 7rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
    }
  }
  .list{
    margin-top: 6rem;
    padding-bottom: 14rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      padding-bottom: 6rem;
    }
    .list-container{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8rem 5rem;
      @media screen and (max-width: 768px) {
        gap: 4rem 1.5rem;
      }
      a{
        .name-wrap{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.8rem;
          @media screen and (max-width: 768px) {
            display: block;
          }
          .title{
            font-weight: 600;
            display: flex;
            @media screen and (max-width: 768px) {
              align-items: center;
            }
            .career{
              font-size: 1.4rem;
              display: inline-block;
              padding: 0.8rem 2rem;
              background-color: var(--main);
              border-radius: 100vmax;
              margin-right: 1rem;
              color: #fff;
              @media screen and (max-width: 768px) {
                font-size: 1rem;
                padding: 0.5rem 1.5rem;
              }
            }
            .jobs{
              font-size: 1.4rem;
              color: var(--main);
              display: flex;
              align-items: center;
              column-gap: 0.6em;
              span{
                display: inline-block;
              }
              @media screen and (max-width: 768px) {
                font-size: 1.2rem;
              }
            }
          }
          .name{
            padding-bottom: 1rem;
            margin-top: 1rem;
            @media screen and (max-width: 768px) {
              padding-bottom: 0.5rem;
            }
            .initial{
              font-family: var(--font-roboto);
              font-size: 2.6rem;
              margin-right: 0.5rem;
              font-weight: 600;
              @media screen and (max-width: 768px) {
                font-size: 1.8rem;
              }
            }
            .sub{
              font-weight: 500;  
              @media screen and (max-width: 768px) {
                font-size: 1.2rem;
              }
            }
          }
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: interview/mt
------------------------------*/
.page-interview-page {
  .subpage-mv{
    height: auto;
    background-size: 43rem 100%;
    background-repeat: no-repeat;
    color: var(--black);
    @media screen and (max-width: 768px) {
      background-size: 100% 100%;
    }
    .inner{
      @media screen and (max-width: 768px) {
        background-color: #fff;
      }
    }
  }
  .mv-image {
    position: relative;
    .image{
      padding-left: 25rem;
      @media screen and (max-width: 768px) {
        padding-left: 2rem;
      }
    }
    .copy-wrap{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      padding-left: 6rem;
      color: var(--black);
      display: flex;
      flex-direction: column;
      justify-content: center;
      @media screen and (max-width: 768px) {
        position: static;
        padding-left: 3rem;
        margin-top: -4.5rem;
      }
      .en{
        width: fit-content;
        color: var(--accent);
        font-family: var(--font-roboto);
        font-size: 1.8rem;
        background-color: var(--main);
        padding: 0.8rem 1.8rem;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
          padding: 0.5rem 1rem;
        }
      }
      .copy{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.2rem;
        @media screen and (max-width: 768px) {
          row-gap: 0.5rem;
        }
        span{
          display: inline-block;
          padding: 1rem 1.8rem 1.1rem;
          background-color: #fff;
          font-size: 4.2rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            padding: 0.6rem 1rem 0.7rem;
            font-size: 2rem;
          }
        }
      }
    }
    .profile-wrap{
      position: absolute;
      bottom: -3rem;
      right: 0;
      padding: 3rem 18rem 3rem 3rem;
      background-color: var(--bggray);
      @media screen and (max-width: 768px) {
        position: static;
        margin-inline: 2rem;
        padding: 1.5rem 2rem;
        margin-top: 2rem;
        margin-bottom: 3rem;
      }
      .title{
        font-size: 1.4rem;
        font-weight: 600;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
        .career{
          display: inline-block;
          padding: 0.8rem 2rem;
          background-color: var(--main);
          border-radius: 100vmax;
          margin-right: 1rem;
          color: #fff;
          @media screen and (max-width: 768px) {
            padding: 0.5rem 1.2rem;
            font-size: 1.2rem;
          }
        }
      }
      .name{
        margin-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: max(1px,0.1rem) solid #fff;
        min-width: 24rem;
        @media screen and (max-width: 768px) {
          min-width: auto;
        }
        .initial{
          font-family: var(--font-roboto);
          font-size: 2.8rem;
          margin-right: 0.5rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            font-size: 2.1rem;
          }
        }
        .sub{
          font-weight: 500;  
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
      }
      .tag{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-top: 2rem;
        @media screen and (max-width: 768px) {
          margin-top: 1rem;
        }
        span{
          display: inline-block;
          padding: 0.8rem 1.5rem;
          font-size: 1.4rem;
          font-weight: 600;
          background-color: #fff;
          @media screen and (max-width: 768px) {
            padding: 0.5rem 1rem;
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  .profile{
    display: grid;
    grid-template-columns: 8.8rem 1fr;
    column-gap: 1.6rem;
    padding-block: 6.5rem 5rem;
    border-bottom: var(--bggray) solid max(0.1rem,1px);
    margin-left: 28rem;
    @media screen and (max-width: 768px) {
      margin-inline: 0;
      padding-block: 3rem;
      border-bottom: none;
      grid-template-columns: 5.6rem 1fr;
    }
    .en{
      background-color: var(--main);
      height: 100%;
      display: grid;
      place-content: center;
      color: #fff;
      font-family: var(--font-roboto);
      font-weight: 500;
      @media screen and (max-width: 768px) {
        aspect-ratio: 1;
        height: auto;
        width: 100%;
        font-size: 1.1rem;
      }
    }
    .readText{
      margin-block: calc((1em - 1lh) / 2);
      @media screen and (max-width: 768px) {
        /* margin-top: 1rem; */
      }
    }
  }

  aside{
    .profile-wrap{
      .title{
        font-size: 1.4rem;
        font-weight: 600;
        .career{
          display: inline-block;
          padding: 0.8rem 2rem;
          background-color: var(--main);
          border-radius: 100vmax;
          margin-right: 1rem;
          color: #fff;
        }
      }
      .name{
        margin-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: max(1px,0.1rem) solid #fff;
        .initial{
          font-family: var(--font-roboto);
          font-size: 2.8rem;
          margin-right: 0.5rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            font-size: 2.1rem;
          }
        }
        .sub{
          font-weight: 500;  
        }
      }
      .tag{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.8rem;
        margin-top: 2rem;
        span{
          display: inline-block;
          padding: 0.8rem 1.5rem;
          font-size: 1.4rem;
          font-weight: 600;
          background-color: #fff;
        }
      }
    }
  }
  .contents{
    .message{
      .image{
        margin-top: 6rem;
        margin-right: -25rem;
        @media screen and (max-width: 768px) {
          margin-right: 0;
          margin-top: 0;
        }
      }
      .copy{
        font-size: 3rem; 
        font-weight: 600;
        line-height: 1.5;
        margin-top: 5rem;
        padding-bottom: 2rem;
        border-bottom: var(--bggray) solid max(0.1rem, 1px);
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
          margin-top: 3rem;
          padding-bottom: 1.5rem;
        }
      }
      .readText{
        margin-top: 2rem;
        @media screen and (max-width: 768px) {
          margin-top: 1.5rem;
        }
        &+ .image{
          margin-top: 8rem;
          @media screen and (max-width: 768px) {
            margin-top: 5rem;
          }
        }
      }
    }
  }
  .charm{
    padding-block: 11rem 9rem;
    position: relative;
    .bg{
      position: absolute;
      inset: 0;
      object-fit: cover;
      height: 100%;
    }
    @media screen and (max-width: 768px) {
      padding-block: 4rem 3rem;
    }
    .charm-wrap{
      display: flex;
      column-gap: 7.5rem;
      @media screen and (max-width: 768px) {
        display: block;
      }
      .text-wrap{
        color: #fff;
        .title{
          display: flex;
          align-items: flex-end;
          column-gap: 1.2rem;
          @media screen and (max-width: 768px) {
            align-items: center;
          }
          img{
            width: 4rem;
          }
          h2{
            font-size: 3rem;
            font-weight: 600;
            line-height: 1.3;
            @media screen and (max-width: 768px) {
              font-size: 2rem;
            }
          }
        }
        .readText{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1.5rem;
          }
        }
      }
      .image{
        width: 46rem;
        flex-shrink: 0;
        @media screen and (max-width: 768px) {
          width: 100%;
          margin-top: 2rem;
        }
      }
    }
  }
  .to-list{
    padding-block: 12rem;
    background-color: var(--bggray);
    display: grid;
    place-content: center;
    @media screen and (max-width: 768px) {
      padding-block: 4rem;
      display: block;
    }
    a{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 58rem;
      height: 18.6rem;
      background-color: #fff;
      padding-inline: 5rem 6rem;
      box-shadow: 0 0 1rem #c6c7d660;
      @media screen and (max-width: 768px) {
        width: calc(100% - 4rem);
        margin-inline: auto;
        height: 8rem;
        padding-inline: 3rem 2.5rem;
      }
      .title-wrap{
        color: var(--main);
        font-weight: 500;
        padding-bottom: 1rem;
        @media screen and (max-width: 768px) {
          padding-bottom: 0;
        }
        .en{
          font-size: 5rem;
          font-family: var(--font-roboto);
          @media screen and (max-width: 768px) {
            font-size: 2.8rem;
          }
        }
        .ja{
          margin-top: 0.8rem;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
            margin-top: 0;
          }
        }
      }
      .magnetic-hover{
        box-shadow: 0 0 0.6rem #c6c7d690;
      }
    }
  }
}

/*------------------------------
	MARK:page: requirements
------------------------------*/
.page-requirements-list {
  .filter{
    margin-top: 7rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
    }
  }
  .list{
    margin-top: 8rem;
    padding-bottom: 12rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      padding-bottom: 6rem;
    }
    .list-container{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4rem 3.5rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        row-gap: 2rem;
      }
      a{
        padding: 3.5rem 2rem 3rem;
        background-color: #fff;
        box-shadow: 0 0 1rem #c6c7d660;
        @media screen and (max-width: 768px) {
          padding: 2.5rem 2rem 2rem;
          box-shadow: 0 0 2rem #c6c7d699;
        }
        .title{
          font-weight: 600;
          font-size: 2.1rem;
          color: var(--main);
          padding-inline: 2rem;
          @media screen and (max-width: 768px) {
            font-size: 1.8rem;
            padding-inline: 1rem;
          }
        }
        .desc{
          margin-top: 2rem;
          line-height: 1.4;
          font-size: 1.6rem;
          padding-inline: 2rem;
          @media screen and (max-width: 768px) {
            padding-inline: 1rem;
            font-size: 1.4rem;
            margin-top: 1rem;
          }
        }
        .tag-wrap{
          display: flex;
          flex-wrap: wrap;
          gap: 0.8rem;
          margin-top: 2rem;
          border-top: var(--bggray) solid max(0.1rem,1px);
          padding-top: 2rem;
          padding-inline: 2rem;
          @media screen and (max-width: 768px) {
            padding-inline: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
          }
          p{
            background-color: var(--bggray);
            padding: 0.8rem 1.5rem;
            display: inline-block;
            font-size: 1.4rem;
          }
        }
        @media (any-hover: hover) {
          &:hover{
            background-color: #f6f5f9;
            box-shadow: none;
          }
        }
      }
    }
  }
  .pagenation{
    padding-bottom: 12rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 6rem;
    }
    .pagenation-container{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3rem;
      @media screen and (max-width: 768px) {
        gap: 2rem;
      }
    }
    .pagenation-btn{
      display: grid;
      place-content: center;
      width: 6rem;
      height: 3.2rem;
      background-color: var(--black);
      border-radius: 100vmax;
      @media screen and (max-width: 768px) {
        width: 4.8rem;
        height: 2.8rem;
      }
      span{
        color: #fff;
        display: block;
        transform: scaleY(2);
        font-family: var(--font-roboto);
        transition: transform 0.1s;
      }
      &.inactive{
        pointer-events: none;
      }
      @media (any-hover: hover) {
        &:hover{
          &.prevBtn span{
            transform: scaleY(2) translateX(-0.1em);
          }
          &.nextBtn span{
            transform: scaleY(2) translateX(0.1em);
          }

        }
      }
    }
    .pagenation-num{
      font-size: 2.1rem;
      opacity: 0.2;
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
      }
      &.current{
        opacity: 1;
        pointer-events: none;
      }
      @media (any-hover: hover) {
        &:hover{
          text-decoration: underline;
        }
      }
    }
  }
}

/*------------------------------
	MARK:page: requirements/page
------------------------------*/
.page-requirements-page {
  .contents{
    margin-top: 7rem;
    padding-bottom: 8rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      padding-bottom: 4rem;
    }
    dl{
      
    }
    .row{
      border-top: #b0b0c6 solid max(0.1rem,1px);
      display: grid;
      grid-template-columns: 24rem 1fr;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        /* border-top: none; */
      }
      &:last-of-type{
        border-bottom: #b0b0c6 solid max(0.1rem,1px);
        @media screen and (max-width: 768px) {
          border-bottom: none;
        }
      }

    }
    dt{
      background-color: var(--bggray);
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--main);
      padding: 2rem 2rem;
      line-height: 1.556;
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
        line-height: 1.5;
        padding: 1.2rem 1.5rem;
      }
    }
    dd{
      padding: 2rem 3rem;
      line-height: 1.75;
      @media screen and (max-width: 768px) {
        padding: 1rem 1.5rem 3rem;
      }
    }
  }
  .to-entry{
    padding-block: 12rem;
    background-color: var(--bggray);
    display: grid;
    place-content: center;
    @media screen and (max-width: 768px) {
      padding-block: 4rem;
      display: block;
    }
    a{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 46rem;
      height: 14.2rem;
      background-color: #fff;
      padding-inline: 5rem 6rem;
      box-shadow: 0 0 1rem #c6c7d660;
      @media screen and (max-width: 768px) {
        width: calc(100% - 4rem);
        margin-inline: auto;
        height: 8rem;
        padding-inline: 2rem 2.5rem;
      }
      .ja{
        font-size: 2.4rem;
        font-weight: 600;
        color: var(--main);
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
      }
      .magnetic-hover{
        box-shadow: 0 0 0.6rem #c6c7d690;
      }
    }
  }
}

/*------------------------------
	MARK:page: entry
------------------------------*/
.page-entry {
  background-color: var(--bggray);
  .form{
    padding-inline: 5rem;
    max-width: 120rem;
    padding-block: 8rem 6rem;
    margin-inline: auto;
    margin-top: 7rem;
    background-color: #fff;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      max-width: none;
      width: 100%;
      padding-block: 3rem 1rem;
      padding-inline: 0;
    }

    .state{
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 1rem;
      @media screen and (max-width: 768px) {
        column-gap: 0.5rem;
        justify-content: space-between;
      }
      .step{
        width: fit-content;
        background-color: var(--bggray);
        color: var(--main);
        display: flex;
        align-items: center;
        padding-block: 0.8rem;
        height: 6.6rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          height: 4.4rem;
        }
        &.current{
          background-color: var(--main);
          color: #fff;
          .num{
            border-color: #fff;
          }
        }
      }
      .num{
        width: 6rem;
        text-align: center;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: max(0.1rem, 1px) solid var(--main);
        font-size: 1.8rem;
        @media screen and (max-width: 768px) {
          width: 3rem;
          font-size: 1.2rem;
        }
      }
      .ja{
        width: 16rem;
        text-align: center;
        font-size: 2.1rem;
        @media screen and (max-width: 768px) {
          width: 6.5rem;
          font-size: 1.1rem;
        }
      }
      .arrow{
        transform: scaleX(0.6);
        font-size: 2rem;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
    }
    .form-container{
      margin-top: 7rem;
      @media screen and (max-width: 768px) {
        margin-top: 4rem;
      }
      .form-row{
        border-top: var(--bggray) solid max(0.1rem, 1px);
        display: grid;
        grid-template-columns: 25rem 1fr;
        padding: 5rem;
        @media screen and (max-width: 768px) {
          display: block;
          padding: 2.5rem 0;
        }
      }
      dt{
        display: flex;
        column-gap: 0.8rem;
        @media screen and (max-width: 768px) {
          align-items: center;
        }
        label,
        legend{
          font-size: 2.1rem;
          font-weight: 500;
          line-height: 1.333;
          @media screen and (max-width: 768px) {
            font-size: 1.5rem;
          }
          span{
            font-size: 0.9em;
            font-feature-settings: "palt";
          }
        }
        &> span{
          display: grid;
          place-content: center;
          background-color: var(--bggray);
          color: var(--main);
          width: 5rem;
          height: 2.8rem;
          font-size: 1.2rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            height: 1.8rem;
            font-size: 1rem;
            width: 3rem;
          }
          &.required{
            background-color: var(--main);
            color: #fff;
          }
        }
      }
      dd{
        @media screen and (max-width: 768px) {
          margin-top: 1.5rem;
        }
        input{
          height: 5rem;
          width: 100%;
          border: unset;
          outline: unset;
          background-color: #f6f5f9;
          border: var(--bggray) solid max(0.1rem, 1px);
          padding-inline: 1rem;
          @media screen and (max-width: 768px) {
            height: 4.4rem;
            font-size: 1.4rem;
          }
        }
        textarea{
          width: 100%;
          border: unset;
          outline: unset;
          background-color: #f6f5f9;
          border: var(--bggray) solid max(0.1rem, 1px);
          padding-inline: 1rem;
          padding-block: 1rem;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
        }
        .caption{
          color: #a0a0af;
          font-size: 1.4rem;
          margin-top: 1rem;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
        &.birth-wrap{
          display: flex;
          column-gap: 2rem;
          align-items: center;
          @media screen and (max-width: 768px) {
            column-gap: 1rem;
          }
          select{
            height: 5rem;
            width: 14rem;
            border: unset;
            outline: unset;
            background-color: #f6f5f9;
            border: var(--bggray) solid max(0.1rem, 1px);
            padding-inline: 1rem;
            @media screen and (max-width: 768px) {
              height: 4.4rem;
              width: 8rem;
            }
          }
          label{
            font-size: 1.8rem;
            @media screen and (max-width: 768px) {
              font-size: 1.4rem;
            }
          }
        }
        &:not(:is(.birth-wrap)){
          select{
            height: 5rem;
            width: 53.8rem;
            border: unset;
            outline: unset;
            background-color: #f6f5f9;
            border: var(--bggray) solid max(0.1rem, 1px);
            padding-inline: 1rem;
            @media screen and (max-width: 768px) {
              height: 4.4rem;
              width: 100%;
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }
  .form-send{
    margin-top: 7rem;
    padding-bottom: 10rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      padding-bottom: 6rem;
    }
    .agreement{
      display: flex;
      align-items: center;
      justify-content: center;
      @media screen and (max-width: 768px) {
        justify-content: flex-start;
      }
      input{
        height: 2.4rem;
        width: 2.4rem;
        border: unset;
        outline: unset;
        background-color: #f6f5f9;
        border: var(--bggray) solid max(0.1rem, 1px);
        margin-right: 1rem;
        @media screen and (max-width: 768px) {
          height: 2rem;
          width: 2rem;
          margin-right: 0.8rem;
        }
      }
      label{
        @media screen and (max-width: 768px) {
          font-size: 1.4rem;
        }
        a{
          text-decoration: underline;
          color: var(--sub);
        }
      }
    }
    .agreement-note{
      font-size: 1.3rem;
      line-height: 1.6;
      text-align: center;
      margin-top: 1rem;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
        text-align: left;
        margin-top: 0.8rem;
      }
    }
    .to-confirm{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 46rem;
      height: 14.2rem;
      background-color: #fff;
      padding-inline: 5rem 6rem;
      box-sizing: border-box;
      box-shadow: 0 0 1rem #c6c7d660;
      margin-inline: auto;
      margin-top: 3rem;
      @media screen and (max-width: 768px) {
        width: 100%;
        height: 10rem;
        padding-inline: 3rem 2.5rem;
      }
      .ja{
        font-size: 2.4rem;
        font-weight: 600;
        color: var(--main);
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
      }
      .magnetic-hover{
        box-shadow: 0 0 0.6rem #c6c7d690;
      }
    }
  }
}

/*------------------------------
	MARK:wp-additions（WPテーマ独自の追加分）
------------------------------*/
.page-interview-list .filter-empty,
.page-requirements-list .filter-empty,
.page-requirements-list .no-posts{
  padding-block: 6rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
  @media screen and (max-width: 768px) {
    padding-block: 3rem;
    font-size: 1.4rem;
  }
}

.page-404 .contents{
  padding-block: 10rem 14rem;
  text-align: center;
  @media screen and (max-width: 768px) {
    padding-block: 5rem 7rem;
  }
  .code{
    font-family: var(--font-roboto);
    font-size: 8rem;
    font-weight: 700;
    color: var(--main);
    line-height: 1;
    @media screen and (max-width: 768px) {
      font-size: 5rem;
    }
  }
  .desc{
    margin-top: 2rem;
    font-size: 1.6rem;
    line-height: 2;
    @media screen and (max-width: 768px) {
      font-size: 1.4rem;
    }
  }
  .to-top{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
    padding: 1.6rem 4rem;
    border: max(0.1rem,1px) solid var(--main);
    border-radius: 100vmax;
    color: var(--main);
    font-weight: 600;
    transition: 0.3s var(--default-timing-function);
    @media (any-hover:hover) {
      &:hover{
        background-color: var(--main);
        color: #fff;
      }
    }
  }
}

/* エントリーフォーム（確認・完了画面／WPテーマ独自の追加分） */
.trust-hp{
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-entry{
  .form-errors{
    margin-top: 4rem;
    padding: 2rem 2.5rem;
    border: max(0.1rem,1px) solid #d43c3c;
    background-color: #fdf2f2;
    color: #b32020;
    font-size: 1.5rem;
    @media screen and (max-width: 768px) {
      margin-top: 2rem;
      padding: 1.5rem;
      font-size: 1.3rem;
    }
    .form-errors-title{
      font-weight: 600;
    }
    ul{
      margin-top: 1rem;
      li{
        line-height: 1.8;
        &::before{
          content: "・";
        }
      }
    }
  }
  .form-container .confirm-value{
    line-height: 1.8;
    font-size: 1.6rem;
    @media screen and (max-width: 768px) {
      font-size: 1.4rem;
    }
  }
  .confirm-actions{
    display: flex;
    justify-content: center;
    column-gap: 3rem;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      row-gap: 1.5rem;
    }
    .to-confirm{
      margin-top: 0;
      @media screen and (max-width: 768px) {
        width: 100%;
      }
      &.back .ja{
        color: var(--black);
      }
    }
  }
  .form-send .to-top-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 46rem;
    height: 14.2rem;
    background-color: #fff;
    padding-inline: 5rem 6rem;
    box-sizing: border-box;
    box-shadow: 0 0 1rem #c6c7d660;
    margin-inline: auto;
    @media screen and (max-width: 768px) {
      width: 100%;
      height: 10rem;
      padding-inline: 3rem 2.5rem;
    }
    .ja{
      font-size: 2.4rem;
      font-weight: 600;
      color: var(--main);
      @media screen and (max-width: 768px) {
        font-size: 1.8rem;
      }
    }
    .magnetic-hover{
      box-shadow: 0 0 0.6rem #c6c7d690;
    }
  }
  .thanks-message{
    margin-top: 6rem;
    text-align: center;
    @media screen and (max-width: 768px) {
      margin-top: 3rem;
      text-align: left;
    }
    .thanks-title{
      font-size: 2.4rem;
      font-weight: 600;
      color: var(--main);
      @media screen and (max-width: 768px) {
        font-size: 1.8rem;
      }
    }
    .thanks-text{
      margin-top: 2rem;
      line-height: 2.2;
      font-size: 1.6rem;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
        br.pconly{
          display: none;
        }
      }
    }
  }
}