@charset "UTF-8";
/* CSS Document */
/*------------------------------
	MARK:#COMMON
------------------------------*/
.inner{
  padding-inline: 4rem;
  margin-inline: auto;
  @media screen and (max-width: 768px) {
    padding-inline: 1.5rem;
  }
  &.narrow{
    padding-inline: 10rem;
    @media screen and (max-width: 768px) {
      padding-inline: 1.5rem;
    }
  }
}
.contents-inner{
  padding-inline: 1.5rem;
  width: 113rem;
  margin-inline: auto;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}
.subpage-mv{
  padding-bottom: 10rem;
  @media screen and (max-width: 768px) {
    padding-bottom: 4rem;
  }
  .title{
    .en{
      color: var(--main);
      font-family: var(--font-roboto);
      font-style: italic;
      font-weight: 500;
      display: flex;
      column-gap: 1rem;
      @media screen and (max-width: 768px) {
        column-gap: 0.5rem;
      }
      .num{
        font-size: 2.8rem;
        @media screen and (max-width: 768px) {
          font-size: 2rem;
        }
      }
      p{
        font-size: 12rem;
        line-height: 0.8;
        letter-spacing: -0.01em;
        @media screen and (max-width: 768px) {
          font-size: 5.4rem;
        }
      }
    }
    h1{
      font-size: 2.1rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      column-gap: 0.1em;
      margin-top: 2.4rem;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
        margin-top: 1.5rem;
        vertical-align: middle;
      }
      &::before{
        content: "⚫︎";
        font-size: 1.25em;
        color: var(--main);
        line-height: 0.5;
      }
    }
  }
  .copy{
    font-size: 4.8rem;
    font-weight: 600;
    line-height: 1.55;
    margin-top: 9rem;
    @media screen and (max-width: 768px) {
      font-size: 2rem;
      margin-top: 3rem;
    }
  }
  .readText{
    margin-top: 6rem;
    width: 50%;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      width: 100%;
    }
  }

  .image{
    margin-top: 9rem;
    @media screen and (max-width: 768px) {
      margin-top: 3rem;
    }
  }
}
/*------------------------------
	MARK:keyframes
------------------------------*/
@keyframes slideRight{
  0%{transform: translateX(0);}
  100%{transform: translateX(var(--mv-slide-distance));}
}
@keyframes slideLeft{
  0%{transform: translateX(0);}
  100%{transform: translateX(calc(var(--mv-slide-distance) * -1));}
}
@keyframes galleryRight{
  0%{transform: translateX(0);}
  100%{transform: translateX(calc(50% + 1rem));}
}
@keyframes galleryLeft{
  0%{transform: translateX(0);}
  100%{transform: translateX(calc(-50% - 1rem));}
}
@keyframes scrollIndicatorWheel{
  0%{ opacity: 0; transform: translateY(0); }
  15%{ opacity: 1; }
  65%{ opacity: 1; transform: translateY(1.3rem); }
  100%{ opacity: 0; transform: translateY(1.7rem); }
}
@keyframes show{
  from{ opacity: 0;}
  to{ opacity: 1;}
}
/*------------------------------
	MARK:#TOP
------------------------------*/
.page-top{
  overflow-x: clip;
  section:not(.brand,.mv){
    position: relative;
    z-index: 1;
  }
  .section-title{
    &.center{
      margin-inline: auto;
      width: fit-content;
      text-align: center;
      .en{
        justify-content: center;
      }
      .en::after{
        display: none;
      }
    }
    .en{
      color: var(--main);
      font-size: 1.6rem;
      font-weight: 700;
      font-style: italic;
      display: flex;
      column-gap: 0.25em;
      margin-bottom: 1rem;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &::after{
        content: "-";
      }
      &.white{
        color: #fff;
      }
    }
    h2{
      color: var(--gray);
      font-size: 3.8rem;
      font-weight: 600;
      font-style: italic;
      display: flex;
      align-items: flex-end;
      @media screen and (max-width: 768px) {
        font-size: 2.6rem;
      }
      &.white{
        color: #fff;
      }
      span{
        font-size: 1.5em;
      }
      .lottie-wrap{
        font-size: 1.5em;
        height: 1em;
        position: relative;
        .js-lottie{
          position: absolute;
          top: 0;
          left: 0;
        }
        &.katagirijuku{
          width: 4.5em;
          margin-right: 0.1em;
          .js-lottie{
            width: calc(100% * 1600 / 1190);
            transform: translate(
              calc((100% - 4.5em) / 2 * -1),
              calc((100% - 1em) / 2 * -1)
            );
          }
        }
        &.shigoto{
          width: 2em;
          margin-right: -0.08em;
          .js-lottie{
            width: calc(100% * 1200 / 650);
            transform: translate(
              calc((100% - 2em) / 2 * -1),
              calc((100% - 1em) / 2 * -1)
            );
          }
        }
        &.kankyo{
          width: 2em;
          margin-right: -0.05em;
          .js-lottie{
            width: calc(100% * 1200 / 670);
            transform: translate(
              calc((100% - 2em) / 2 * -1),
              calc((100% - 1em) / 2 * -1)
            );
          }
        }
        &.hirogarumirai{
          width: 5em;
          margin-right: -0.05em;
          .js-lottie{
            width: calc(100% * 1200 / 1077);
            transform: translate(
              calc((100% - 4.9em) / 2 * -1),
              calc((100% - 1.05em) / 2 * -1)
            );
          }
        }
      }
    }
  }

  .sticky-wrap{
    position: relative;
    &:has(.message.shown){
      .mv .copy{
        opacity: 0;
      }
    }
  }
  
  /*------------------------------
  MARK:--mv
  ------------------------------*/
  .mv{
    --mv-slide-gap: 1.3334vw;
    --mv-slide-distance: 160vw;
    --mv-slide-offset: calc(var(--mv-slide-distance) - 6vw);
    position: sticky;
    top: 0;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    padding-left: 7rem;
    padding-bottom: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    @media screen and (max-width: 768px) {
      --mv-slide-distance: 240vw;
      padding-left: 2rem;
      padding-bottom: calc(0.5rem + var(--sp-nav-height));
    }
    #canvas-container {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      overflow: hidden;
      &::before{
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 50% 40%, #f8f8f8 0%, #ffffff 58%, #f1f1f1 100%);
        transition: opacity 0.12s ease;
      }
      canvas{
        position: relative;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.12s ease;
      }
      &.is-ready{
        &::before{
          opacity: 0;
        }
        canvas{
          opacity: 1;
        }
      }
    }
    
    .copy{
      position: relative;
      z-index: 2;
      font-weight: 800;
      font-style: italic;
      font-feature-settings: "palt";
      letter-spacing: -0.2em;
      width: fit-content;
      transition: opacity 0.1s ease;

      p{
        font-size: 6.6rem;
        padding: 0.025em 0.25em 0.125em 0.15em;
        width: fit-content;
        position: relative;
        
        color: transparent;
        background-image: linear-gradient(75deg, var(--sub) 0% 33%, var(--main)  50%, transparent 66% 100%);
        background-size: 400% 100%;
        background-position: 100% 0%;
        background-repeat: no-repeat;
        background-clip: text;
        -webkit-background-clip: text;
        transition: background-position 3s cubic-bezier(.3, .01, .1, 1);
        &+ p{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1rem;
          }
        }
        &::before{
          content: "";
          display: block;
          position: absolute;
          z-index: -1;
          height: 100%;
          width: 100%;
          left: 0;
          top: 0;
          background-color: #fff;
          transform: scaleX(0);
          transition: transform 1s cubic-bezier(.6, .05, 0, 1);
          transform-origin: left;
          will-change: transform;
        }
        @media screen and (max-width: 768px) {
          font-size: 3.2rem;
          line-height: 1.2;
        }
      }
      .main{
        color: transparent;
        transition: color 0s 0.75s;
      }
      .em{
        font-size: 1.2em;
        transition: color 0s 0.75s;
      }
      &.shown{
        p{
          background-position: 0% 0%;
          .main{
            color: var(--main);
          }
          &::before{
            transform: scaleX(1);
          }
        }
      }
    }

    .bg-wrap{
      position: absolute;
      transform: rotate(-9deg);
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      ul{
        position: absolute;
        height: 62lvh;
        margin: 0;
        padding: 0;
        li{
          width: calc((var(--mv-slide-distance) / 3) - var(--mv-slide-gap));
          height: 62lvh;
          position: absolute;
          overflow: hidden;
          will-change: transform;
          video{
            position: absolute;
            z-index: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: none;
            min-height: none;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        &:nth-child(1){
          right: var(--mv-slide-offset);
          bottom: calc(50% + 0.55vw);
          li{
            bottom: 0;
            left: 0;
            animation: slideRight 30s linear infinite;
            &:nth-child(1){
              animation-delay: 0s;
            }
            &:nth-child(2){
              animation-delay: -10s;
            }
            &:nth-child(3){
              animation-delay: -20s;
            }
          }
        }
        &:nth-child(2){
          left: var(--mv-slide-offset);
          top: calc(50% + 0.55vw);
          li{
            top: 0;
            right: 0;
            animation: slideLeft 30s linear infinite;
            &:nth-child(1){
              animation-delay: 0s;
            }
            &:nth-child(2){
              animation-delay: -10s;
            }
            &:nth-child(3){
              animation-delay: -20s;
            }
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:--message
  ------------------------------*/
  .message{
    position: relative;
    padding-block: 14rem 10rem;
    @media screen and (max-width: 768px) {
      padding-block: 8rem 5rem;
    }
    .wrap{
      display: flex;
      column-gap: 8rem;
      padding-bottom: 10rem;
      position: relative;
      @media screen and (max-width: 768px) {
        column-gap: 3rem;
        padding-bottom: 5rem;
      }
      .en-wrap{
        position: sticky;
        top: 10rem;
        height: 100%;
      }
      .en{
        color: var(--main);
        display: flex;
        flex-direction: column;
        padding-left: 3rem;
        @media screen and (max-width: 768px) {
          padding-left: 0;
        }
        span{
          writing-mode: vertical-lr;
          line-height: 1;
          font-size: 16px;
          font-weight: 700;
          font-family: var(--font-roboto);
          font-style: italic;
          letter-spacing: 0.1em;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
        }
        &::after{
          content: "";
          width: 1px;
          height: 7rem;
          background-color: currentColor;
          margin-inline: auto;
          margin-top: 1rem;
          @media screen and (max-width: 768px) {
            margin-top: 0.6rem;
          }
        }
      }
      .text{
        font-weight: 600;
        line-height: 2.2;
        p{
          font-size: 21px;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
          }
          &+ p{
            margin-top: 1lh;
          }
          &:first-child{
            margin-top: calc((1em - 1lh) / 2);
          }
          .js-textmask{
            display: inline-block;
            background-image: linear-gradient(to right, var(--black) 0% 33.3%, #25252520 63% 100%);
            background-size: 300% 100%;
            background-position: 100% 0%;
            background-repeat: no-repeat;
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            &.sponly{
              display: contents;
              @media screen and (max-width: 768px) {
                display: inline-block;
              }
            }
            &.spmask{
              @media screen and (max-width: 768px) {
                display: contents;
              }
            }
          }
        }
      }
    }
    .copy{
      font-size: 11rem;
      font-weight: 800;
      font-style: italic;
      font-feature-settings: "palt";
      letter-spacing: -0.08em;
      margin-inline: auto;
      width: fit-content;
      color: transparent;

      background-image: linear-gradient(75deg, var(--sub) 0% 33%, var(--main)  50%, transparent 66% 100%);
      background-size: 400% 100%;
      background-position: 100% 0%;
      background-repeat: no-repeat;
      background-clip: text;
      -webkit-background-clip: text;
      transition: background-position 3s cubic-bezier(.3, .01, .1, 1);
      @media screen and (max-width: 768px) {
        font-size: 4.6rem;
        line-height: 1.2;
      }

      span:not(.main){
        font-size: 9rem;
        @media screen and (max-width: 768px) {
          font-size: 3.8rem;
        }
      }
      .main{
        color: transparent;
        transition: color 0s 0.75s;
      }
      &.shown{
        background-position: 0% 0%;
        .main{
          color: var(--main);
        }
      }
    }
  }
  /*------------------------------
    MARK:--gallery
  ------------------------------*/
  .gallery{
    padding: 2rem;
    @media screen and (max-width: 768px) {
      padding: 1rem;
    }
    .wrap{
      display: grid;
      gap: 2rem;
      overflow: hidden;
      @media screen and (max-width: 768px) {
        gap: 1rem;
      }
      .row{
        display: grid;
        gap: 2rem;
        grid-template-rows: 30rem;
        width: calc(200% + 2rem);
        /* width: 100%; */
        &:first-child{
          grid-template-columns: 58fr 45fr 49fr 58fr 45fr 49fr;
          /* grid-template-columns: 58fr 45fr 49fr; */
          /* animation: galleryLeft 30s linear infinite; */
        }
        &:last-child{
          grid-template-columns: 49fr 45fr 58fr 49fr 45fr 58fr;
          /* grid-template-columns: 49fr 45fr 58fr; */
          margin-left: -100%;
          /* animation: galleryRight 30s linear infinite; */
        }
        @media screen and (max-width: 768px) {
          grid-template-rows: 14rem;
          width: calc(300% + 1rem);
          gap: 1rem;
        }
        img{
          width: 100%;
          height: 100%;
          max-width: none;
          object-fit: cover;
        }
      }
    }
  }
  /*------------------------------
    MARK:--aboutus
  ------------------------------*/
  .aboutus{
    /* padding-top: 14rem; */
    padding-top: 12rem;
    padding-bottom: 8rem;
    background-image: linear-gradient(to top, var(--main) 40rem, transparent 40rem);
    @media screen and (max-width: 768px) {
      padding-top: 6rem;
      padding-bottom: 5rem;
      background-image: linear-gradient(to top, var(--main) 26rem, transparent 26rem);
    }
    .container{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 4rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-top: 2rem;
      }
      a{
        display: block;
        position: relative;
        @media screen and (max-width: 768px) {
          aspect-ratio: 6/5;
        }
        &:nth-child(2n+1){
          margin-top: 6rem;
          @media screen and (max-width: 768px) {
            margin-top: 0;
          }
        }
        &:nth-child(2n){
          margin-bottom: 6rem;
          @media screen and (max-width: 768px) {
            margin-bottom: 0;
            img{
              max-width: none;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
        }
        &::after{
          content: "";
          position: absolute;
          z-index: 0;
          width: 100%;
          height: 36%;
          left: 0;
          bottom: 0;
          background-image: linear-gradient(to top, #000000b3 0%, transparent 100%);
        }
        .title{
          position: absolute;
          z-index: 1;
          top: 2.5rem;
          left: 3rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 0.8rem;
          color: var(--main);
          font-family: var(--font-roboto);
          font-style: italic;
          @media screen and (max-width: 768px) {
            top: 2rem;
            left: 1.5rem;
            row-gap: 0.5rem;
          }
          .num{
            font-size: 3.8rem;
            @media screen and (max-width: 768px) {
              font-size: 3.2rem;
            }
          }
          .en{
            writing-mode: vertical-lr;
            font-weight: 700;
            letter-spacing: 0.1em;
            @media screen and (max-width: 768px) {
              font-size: 1.6rem;
            }
          }
        }
        h3{
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          z-index: 1;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 2.5rem 3rem;
          color: #fff;
          font-style: italic;
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          font-size: 2.4rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            font-size: 2rem;
            padding: 2rem 1.5rem;
          }
          .arrow{
            font-size: 3rem;
            @media screen and (max-width: 768px) {
              font-size: 2.4rem;
            }
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:--aboutwork
  ------------------------------*/
  .aboutwork{
    padding-block: 10rem;
    background-color: var(--sub);
    @media screen and (max-width: 768px) {
      padding-block: 4rem 5rem;
    }
    .container{
      display: grid;
      grid-template-columns: 1fr 110rem;
      @media screen and (max-width: 768px) {
        display: block;
      }
    }
    .title-wrap{
      position: relative;
      .section-title{
        position: sticky;
        top: 12rem;
        @media screen and (max-width: 768px) {
          position: static;
        }
      }
    }
    .item-wrap{
      @media screen and (max-width: 768px) {
        margin-top: 2rem;
      }
      .trainer{
        display: block;
        position: relative;
        color: #fff;
        @media screen and (max-width: 768px) {
          aspect-ratio: 3/2;
          img{
            height: 100%;
            max-width: none;
            object-fit: cover;
          }
        }
        .arrow{
          position: absolute;
          font-size: 3rem;
          bottom: 2.5rem;
          right: 3rem;
          @media screen and (max-width: 768px) {
            font-size: 2.4rem;
            bottom: 1rem;
            right: 1.5rem;
          }
        }
        .title{
          position: absolute;
          left: 0;
          top: 50%;
          padding-left: 4rem;
          font-style: italic;
          padding-bottom: 1rem;
          border-bottom: 0.4rem solid var(--main);
          transform: translateY(-50%);
          @media screen and (max-width: 768px) {
            padding-left: 1rem;
            border-width: 0.2rem;
          }
          h3{
            font-weight: 700;
            font-size: 1.8rem;
            @media screen and (max-width: 768px) {
              font-size: 1.3rem;
              font-weight: 600;
            }
          }
          .en{
            font-weight: 700;
            font-size: 6.8rem;
            letter-spacing: 0.02em;
            margin-left: -0.1em;
            @media screen and (max-width: 768px) {
              font-size: 4rem;
            }
          }
        }
      }

      .interview{
        margin-top: 6rem;
        border-top: 1px solid #fff;
        padding-top: 4rem;
        @media screen and (max-width: 768px) {
          margin-top: 3rem;
          padding-top: 2rem;
        }
        .title{
          font-style: italic;
          position: relative;
          .en{
            font-size: 14rem;
            color: #fff;
            opacity: 0.16;
            line-height: 1;
            @media screen and (max-width: 768px) {
              font-size: 7rem;
            }
          }
          h3{
            font-size: 3.2rem;
            font-weight: 700;
            color: #fff;
            position: absolute;
            top: calc(50% - 0.1em);
            @media screen and (max-width: 768px) {
              font-size: 1.6rem;
            }
          }
        }
        .wrap{
          display: flex;
          align-items: flex-end;
          column-gap: 8rem;
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            display: block;
          }
          .readText{
            color: #fff;
            font-size: 2rem;
            line-height: 1.9;
            @media screen and (max-width: 768px) {
              font-size: 1.4rem;
            }
          }
          .view-btn{
            flex-shrink: 0;
            display: grid;
            place-content: center;
            border: 0.2rem solid #fff;
            border-radius: 100vmax;
            color: #fff;
            width: 20rem;
            height: 4rem;
            transition: background-color 0.2s var(--default-timing-function);
            @media screen and (max-width: 768px) {  
              margin-top: 2rem;
              border-width: 1px;
            }
            span{
              font-size: 1.6rem;
              font-weight: 700;
              font-style: italic;
              transition: letter-spacing 0.3s var(--default-timing-function), color 0.3s var(--default-timing-function);
            }
            @media (any-hover:hover) {
              &:hover{
                background-color: #fff;
                color: var(--main);
                span{
                  letter-spacing: 0.1em;
                }
              }
            }
          }
        }
        .interview-slider-wrapper{
          overflow: hidden;
          margin-top: 4rem;
          margin-right: -4rem;
          cursor: none;
          @media screen and (max-width: 768px) {
            margin-right: -2rem;
            margin-left: -1.5rem;
          }
        }
        .interview-container{
          display: flex;
          column-gap: 2rem;
          @media screen and (max-width: 768px) {
            padding-left: 1.5rem;
          }
          li{
            width: 48rem;
            flex-shrink: 0;
            @media screen and (max-width: 768px) {
              width: 22rem;
            }
            a{
              display: block;
              overflow: hidden;
              @media (any-hover:hover) {
                &:hover{
                  img{
                    opacity: 0.6;
                  }
                }
              }
              img{
                pointer-events: none;
                transition: opacity 0.3s var(--default-timing-function);
              }
              .profile{
                padding-top: 1.5rem;
                display: flex;
                align-items: center;
                column-gap: 1.5rem;
                @media screen and (max-width: 768px) {
                  display: block;
                  padding-top: 0.8rem;
                }
                .gym{
                  border-radius: 100vmax;
                  background-color: #fff;
                  color: var(--main);
                  font-size: 1.4rem;
                  font-weight: 600;
                  padding: 0.7rem 1.5rem;
                  width: fit-content;
                  @media screen and (max-width: 768px) {
                    font-size: 1.1rem;
                    padding: 0.4rem 0.8rem;
                  }
                }
                .name{
                  color: #fff;
                  @media screen and (max-width: 768px) {
                    margin-top: 0.5rem;
                  }
                  span{
                    display: inline-block;
                  }
                  .initial{
                    font-family: var(--font-roboto);
                    font-size: 3rem;
                    font-weight: 500;
                    @media screen and (max-width: 768px) {
                      font-size: 2rem;
                    }
                  }
                  .join{
                    font-weight: 500;
                    font-size: 1.4rem;
                    margin-left: 1em;
                    padding-left: 0.5em;
                    border-left: 1px solid currentColor;
                    @media screen and (max-width: 768px) {
                      font-size: 1.2rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:--independence
  ------------------------------*/
  .independence{
    height: 200dvh;
    margin-bottom: 10rem;
    @media screen and (max-width: 768px) {
      margin-bottom: 6rem;
      height: auto;
    }
    .section-title{
      position: relative;
      .en{
        font-size: 2.1rem;
        @media screen and (max-width: 768px) {
          font-size: 1.3rem;
        }
      }
      h2{
        font-size: 4.8rem;
        @media screen and (max-width: 768px) {
          font-size: 2.6rem;
          justify-content: center;
        }
      }
    }
    .text-wrap{
      position: relative;
      @media screen and (max-width: 768px) {
        grid-area: 1/1;
        height: 100%;
        display: grid;
        place-content: center;
      }
    }
    .wrap{
      background-image: var(--main-gradation);
      padding: 1rem;
      height: calc(100dvh - var(--header-height));
      width: 100%;
      display: grid;
      place-content: center;
      position: relative;
      @media (any-hover:hover) {
        &:hover{
          .view-btn{
            background-color: #fff;
            color: var(--main);
            span{
              letter-spacing: 0.1em;
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        height: auto;
        padding: 1.5rem;
      }
      &::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        background-color: #fff;
        opacity: 1;
        transition: opacity 0.2s ease 0s;
      }
      &:has(.text-wrap.shown){
        &::before{
          opacity: 0;
          transition: opacity 0.5s ease 0.1s;
        }
        @media screen and (max-width: 768px) {
          &::before{
            opacity: 0;
          }
        }
      }
      .image{
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
        position: absolute;
        inset: 1rem;
        overflow: hidden;
        /* gsap */
        transform-origin: center bottom;
        transform: scale(0.25);
        @media screen and (max-width: 768px) {
          inset: 0;
          width: 100%;
          height: auto;
          aspect-ratio: 530 / 442;
          transform: scale(1);
          position: relative;
          margin-inline: auto;
          grid-area: 1/1;
        }
        .image-offset{
          width: 100%;
          height: 100%;      
          transform: scale(4);
          @media screen and (max-width: 768px) {
            transform: scale(1);
          }
        }
        img{
          width: 100%;
          height: 100%;
          max-width: none;
          object-fit: cover;
          /* gsap */
          transform: scale(1.5);
          @media screen and (max-width: 768px) {
            transform: scale(1);
          }
        }
      }
      .view-btn{
        position: relative;
        display: grid;
        place-content: center;
        border-radius: 100vmax;
        color: #fff;
        width: 20rem;
        height: 4rem;
        background-color: var(--main);
        margin-inline: auto;
        margin-top: 3rem;
        transition: 
          transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.6s ease,
          background-color 0.2s var(--default-timing-function);
        span{
          font-size: 1.6rem;
          font-weight: 700;
          font-style: italic;
          transition: letter-spacing 0.3s var(--default-timing-function), color 0.3s var(--default-timing-function);
        }
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
          width: 14rem;
        }
      }
      .scroll-indicator{
        position: absolute;
        left: 50%;
        bottom: 3rem;
        z-index: 2;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        color: #fff;
        text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2);
        will-change: transform, opacity;
        @media screen and (max-width: 768px) {
          display: none;
        }
        .label{
          display: block;
          font-family: var(--font-roboto);
          font-size: 1rem;
          font-style: italic;
          font-weight: 700;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          @media screen and (max-width: 768px) {
            font-size: 0.9rem;
          }
        }
        .mouse{
          width: 2.2rem;
          height: 3.5rem;
          border: 1px solid rgba(255, 255, 255, 0.9);
          border-radius: 100vmax;
          display: grid;
          justify-items: center;
          padding-top: 0.6rem;
          background-color: rgba(255, 255, 255, 0.08);
          backdrop-filter: blur(0.4rem);
          -webkit-backdrop-filter: blur(0.4rem);
          @media screen and (max-width: 768px) {
            width: 2rem;
            height: 3.2rem;
          }
          .wheel{
            display: block;
            width: 0.35rem;
            height: 0.7rem;
            border-radius: 100vmax;
            background-color: #fff;
            animation: scrollIndicatorWheel 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
          }
        }
        .arrow{
          display: block;
          width: 1px;
          height: 1.6rem;
          background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), #fff);
          position: relative;
          @media screen and (max-width: 768px) {
            height: 1.4rem;
          }
          &::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -0.1rem;
            width: 0.65rem;
            height: 0.65rem;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            transform: translateX(-50%) rotate(45deg);
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:--workstyle
  ------------------------------*/
  .workstyle{
    padding-block: 10rem 4rem;
    @media screen and (max-width: 768px) {
      padding-block: 4rem;
    }
    .container{
      margin-top: 5rem;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 4rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-top: 2rem;
      }
      a{
        display: block;
        position: relative;
        &::after{
          content: "";
          position: absolute;
          z-index: 0;
          width: 100%;
          height: 36%;
          left: 0;
          bottom: 0;
          background-image: linear-gradient(to top, #000000b3 0%, transparent 100%);
          @media screen and (max-width: 768px) {

          }
        }
        .title{
          position: absolute;
          z-index: 1;
          top: 2.5rem;
          left: 2.5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 0.8rem;
          color: var(--main);
          font-family: var(--font-roboto);
          font-style: italic;
          @media screen and (max-width: 768px) {
            top: 2rem;
            left: 1.5rem;
            row-gap: 0.5rem;
          }
          .num{
            font-size: 3.8rem;
            @media screen and (max-width: 768px) {
              font-size: 3.2rem;
            }
          }
          .en{
            writing-mode: vertical-lr;
            font-weight: 700;
            letter-spacing: 0.1em;
            @media screen and (max-width: 768px) {
              font-size: 1.6rem;
            }
          }
        }
        h3{
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          z-index: 1;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 2.5rem 3rem;
          color: #fff;
          font-style: italic;
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          font-size: 2.4rem;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            font-size: 2rem;
            padding: 2rem 1.5rem;
          }
          .arrow{
            font-size: 3rem;
            @media screen and (max-width: 768px) {
              font-size: 2.4rem;
            }
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:--recruit
  ------------------------------*/
  .recruit{
    .en{
      font-family: var(--font-roboto);
      font-size: 24rem;
      font-weight: 700;
      color: var(--main);
      letter-spacing: 0.04em;
      margin-left: -0.07em;
      line-height: 0.68;
      @media screen and (max-width: 768px) {
        font-size: 10rem;
      }
    }
    .container{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: 30rem;
      @media screen and (max-width: 768px) {
        grid-template-rows: 17rem;
      }
      a{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
        row-gap: 1rem;
        transition: 0.3s var(--default-timing-function);
        border: 1px solid;
        &:nth-child(1){background-color: var(--sub); border-color: var(--sub);}
        &:nth-child(2){background-color: var(--mid); border-color: var(--mid);}
        &:nth-child(3){background-color: var(--low); border-color: var(--low);}
        @media screen and (max-width: 768px) {
          row-gap: 0.8rem;
          padding-top: 1rem;
        }
        .title{
          font-size: 1.8rem;
          @media screen and (max-width: 768px) {
            font-size: 1.1rem;
          }
        }
        .main{
          font-size: 2.4rem;
          font-style: italic;
          @media screen and (max-width: 768px) {
            font-size: 1.5rem;
            font-feature-settings: "palt";
          }
        }
        .sub{
          font-size: 2.1rem;
          font-style: italic;
          @media screen and (max-width: 768px) {
            font-size: 1.3rem;
          }
        }
        .arrow{
          font-size: 3rem;
          margin-top: 1rem;
          @media screen and (max-width: 768px) {
            font-size: 2.4rem;
          }
        }
        p{
          transition: 0.3s var(--default-timing-function);
        }
        @media (any-hover:hover) {
          &:hover{
            background-color: #fff;
            border-color: var(--main) !important;
            color: var(--main);
          }
        }
      }
    }
  }
}

/*------------------------------
  MARK:interview-cursor
------------------------------*/
.interview-cursor{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background-color: #f4331580;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  .cursor-arrows{
    display: flex;
    align-items: center;
    column-gap: 1.6rem;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
  }
  .cursor-label{
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-roboto);
    letter-spacing: 0.14em;
  }
}


/*------------------------------
  MARK:#MESSAGE
------------------------------*/
.page-message{
  /*------------------------------
    MARK:--subpage-mv
  ------------------------------*/
  .subpage-mv{
    background-image: linear-gradient(to top, var(--main) 0% 50rem, transparent 50rem 100%);
    @media screen and (max-width: 768px) {
      background-image: linear-gradient(to top, var(--main) 0% 12rem, transparent 12rem 100%);
      padding-bottom: 1.8rem;
    }
    .image{
      @media screen and (max-width: 768px) {
        aspect-ratio: 400 / 300;
        img{
          max-width: none;
          height: 100%;
          object-fit: cover;
          object-position: 45% center;
        }
      }
    }
  }
  /*------------------------------
    MARK:--profile
  ------------------------------*/
  .profile{
    padding-block: 10rem 14rem;
    @media screen and (max-width: 768px) {
      padding-block: 2rem 5rem;
    }
    .wrap{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      @media screen and (max-width: 768px) {
        display: block;
      }
      .name-wrap{
        line-height: 1.4;
        .sub{
          font-size: 2.2rem;
          font-weight: 600;
          letter-spacing: 0.1em;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
        .name{
          font-size: 6rem;
          font-weight: 600;
          letter-spacing: 0.15em;
          @media screen and (max-width: 768px) {
            font-size: 2.4rem;
          }
        }
        .en{
          font-family: var(--font-roboto);
          font-size: 2.6rem;
          font-weight: 500;
          color: var(--main);
          letter-spacing: 0.1em;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
      }
      .text-wrap{
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
        }
        .sub{
          font-weight: 700;
          color: #fff;
          background-color: var(--main);
          display: inline-block;
          padding: 0.2em 0.5em;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
        .readText{
          margin-top: 1.6rem;
          font-size: 1.4rem;
          @media screen and (max-width: 768px) {
            margin-top: 1rem;
            font-size: 1.3rem;
            line-height: 1.8;
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:--contents
  ------------------------------*/
  .contents{
    padding-bottom: 14rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 6rem;
    }
     .container{
      position: relative;
      display: grid;
      grid-template-columns: 1fr 66rem;
      column-gap: 9rem;
      margin-left: calc(50% - 50vw);
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        margin-left: 0;
        row-gap: 3.5rem;
      }
      .image{
        position: sticky;
        top: var(--header-height);
        height: calc(100dvh - var(--header-height));
        width: 100%;
        @media screen and (max-width: 768px) {
          position: static;
          display: contents;
        }
        .wrap{
          position: absolute;
          inset: 0;
          &:nth-child(1){
            z-index: 3;
            @media screen and (max-width: 768px) {
              grid-row: 2 / 3;
            }
          }
          &:nth-child(2){
            z-index: 2;
            @media screen and (max-width: 768px) {
              grid-row: 4 / 5;
            }
          }
          @media screen and (max-width: 768px) {
            position: static;
          }
        }
        img{
          position: absolute;
          inset: 0;
          max-width: none;
          height: 100%;
          object-fit: cover;
          transition: opacity 0.6s var(--default-timing-function);
          pointer-events: none;
          @media screen and (max-width: 768px) {
            position: static;
            object-position: center 20%;
          }
          &.hidden{
            opacity: 0;
            @media screen and (max-width: 768px) {
              opacity: 1;
            }
          }
        }
      }
      .text-wrap{
        /* padding-top: 14rem; */
        padding-bottom: 8rem;
        @media screen and (max-width: 768px) {
          display: contents;
        }
        .text{
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: calc(100dvh - var(--header-height));
          padding-block: 8rem;
          @media screen and (max-width: 768px) {
            display: block;
            min-height: auto;
            padding-block: 0;
          }
          .copy{
            font-size: 2.8rem;
            font-weight: 700;
            line-height: 1.65;
            margin-top: calc((1em - 1lh) / 2);
            @media screen and (max-width: 768px) {
              font-size: 2rem;
            }
          }
          .readText{
            margin-top: 3rem;
            @media screen and (max-width: 768px) {
              margin-top: 2rem;
            }
          }
        }
      }
    }
    .text{
      .copy{
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.65;
        margin-top: calc((1em - 1lh) / 2);
        @media screen and (max-width: 768px) {
          font-size: 2rem;
        }
      }
      .readText{
        margin-top: 1.6rem;
      }
      /* &+ .text{
        margin-top: 0;
        @media screen and (max-width: 768px) {
          margin-top: 1rem;
        }
      } */
    }
    .wide-image{
      margin-top: 10rem;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
      }
      &+ .text{
        margin-top: 7rem;
        @media screen and (max-width: 768px) {
          margin-top: 4rem;
        }
      }
    }
    .bottom-wrap{
      @media screen and (max-width: 768px) {
        display: flex;
        flex-direction: column-reverse;

      }
    }
  }
}

/*------------------------------
  MARK:#INTERVIEW
------------------------------*/
.page-interview {

  /*------------------------------
    MARK:--mv
  ------------------------------*/
  .mv {
    position: relative;
    padding-bottom: 11rem;
    margin-bottom: 10rem;
    background-image: linear-gradient(to top, var(--main) 0% 50rem, transparent 50rem 100%);
    @media screen and (max-width: 768px) {
      background-image: none;
      padding-bottom: 0;
      margin-bottom: 3rem;
    }
    .title {
      display: flex;
      column-gap: 5rem;
      @media screen and (max-width: 768px) {
        display: block;
      }
      .sub {
        h1 {
          font-size: 1.4rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          column-gap: 0.1em;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
          &::before {
            content: "⚫︎";
            font-size: 1.25em;
            color: var(--main);
            /* line-height: 0.5; */
          }
        }
        .num {
          font-family: var(--font-roboto);
          font-size: 8rem;
          font-style: italic;
          color: var(--main);
          display: flex;
          margin-top: 1.6rem;
          @media screen and (max-width: 768px) {
            font-size: 5rem;
            margin-top: 1rem;
          }
          span{
            font-size: 0.5em;
            line-height: 0.9;
          }
        }
        p {
          font-size: 12rem;
          line-height: 0.8;
          letter-spacing: -0.01em;
        }
      }
    }
    .copy {
      font-size: 3.8rem;
      font-weight: 600;
      line-height: 1.55;
      margin-top: calc((1em - 1lh) / 2);
      @media screen and (max-width: 768px) {
        font-size: 2rem;
        margin-top: 1.5rem;
      }
    }
    .image-wrap{
      margin-top: 3.5rem;
      position: relative;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
        &::before{
          content: "";
          display: block;
          position: absolute;
          z-index: 0;
          width: 100vw;
          height: 25rem;
          top: 7rem;
          left: -1.5rem;
          background-color: var(--main);
        }
      }
      .image{
        overflow: hidden;
        position: relative;
        @media screen and (max-width: 768px) {
          aspect-ratio: 710 / 580;
          img{
            max-width: none;
            height: 100%;
            object-fit: cover;
            object-position: 44% center;
          }
        }
      }
      svg{
        position: absolute;
        left: -0.2rem;
        top: 0;
        height: 100%;
        width: auto;
        .p{
          fill: none;
          stroke: #fff;
          stroke-miterlimit: 10;
          stroke-dasharray: 1;
          stroke-dashoffset: 1;
          stroke-width: 0;
          transition: 
          stroke-width 0.8s ease-in-out,
          stroke-dashoffset 0.6s ease-in-out;
        }
        &.shown{
          .p{
            stroke-dashoffset: 0;
            stroke-width: 2;
            @media screen and (max-width: 768px) {
              stroke-width: 1;
            }
          }
        }
      }
    }
    .profile{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 55rem;
      border-radius: 2rem 0 0 0;
      background-color: #fff;
      padding: 3.5rem 4rem 4rem;
      @media screen and (max-width: 768px) {
        position: relative;
        padding: 2.5rem 2rem 3.5rem;
        width: calc(100% - 6rem);
        margin-inline: auto;
        border-radius: 1.5rem 1.5rem 0 0;
        margin-top: -5rem;
      }
      .sub{
        font-weight: 700;
        color: #fff;
        background-color: var(--main);
        display: inline-block;
        padding: 0.3em 0.5em;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      .wrap{
        display: flex;
        align-items: center;
        column-gap: 1rem;
        margin-top: 2rem;
        @media screen and (max-width: 768px) {
          margin-top: 1.5rem;
        }
        .gym{
          border-radius: 100vmax;
          background-color: var(--main);
          color: #fff;
          font-size: 1.4rem;
          font-weight: 600;
          padding: 0.7rem 1.5rem;
          width: fit-content;
          @media screen and (max-width: 768px) {
            font-size: 1.1rem;
            padding: 0.5rem 1rem;
          }
        }
        .name{
          display: flex;
          align-items: flex-end;
          .initial{
            font-family: var(--font-roboto);
            color: var(--main);
            font-size: 3rem;
            font-weight: 600;
            line-height: 0.75;
            @media screen and (max-width: 768px) {
              font-size: 2.4rem;
            }
          }
          .join{
            font-weight: 500;
            font-size: 1.4rem;
            margin-left: 1em;
            padding-left: 0.5em;
            border-left: 1px solid currentColor;
            @media screen and (max-width: 768px) {
              font-size: 1.2rem;
            }
          }
        }
      }
      .readText{
        font-size: 1.4rem;
        margin-top: 1.6rem;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
          margin-top: 1rem;
        }
      }
    }
  }
  /*------------------------------
    MARK:--contents
  ------------------------------*/
  .contents{
    .container{
      position: relative;
      display: grid;
      grid-template-columns: 1fr 66rem;
      column-gap: 9rem;
      margin-left: calc(50% - 50vw);
      padding-bottom: 10rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        margin-left: 0;
        row-gap: 3.5rem;
        padding-bottom: 4rem;
      }
      .image{
        position: sticky;
        top: var(--header-height);
        height: calc(100dvh - var(--header-height));
        width: 100%;
        @media screen and (max-width: 768px) {
          position: static;
          display: contents;
        }
        .wrap{
          position: absolute;
          inset: 0;
          &:nth-child(1){
            z-index: 3;
            @media screen and (max-width: 768px) {
              grid-row: 2 / 3;
            }
          }
          &:nth-child(2){
            z-index: 2;
            @media screen and (max-width: 768px) {
              grid-row: 4 / 5;
            }
          }
          &:nth-child(3){
            z-index: 1;
            @media screen and (max-width: 768px) {
              grid-row: 6 / 7;
            }
          }
          @media screen and (max-width: 768px) {
            position: static;
            /* aspect-ratio: 400 / 300; */
            width: 66%;
            margin-inline: auto;
            overflow: hidden;
          }
        }
        img{
          position: absolute;
          inset: 0;
          max-width: none;
          height: 100%;
          object-fit: cover;
          transition: opacity 0.6s var(--default-timing-function);
          pointer-events: none;
          @media screen and (max-width: 768px) {
            position: static;
          }
          &.hidden{
            opacity: 0;
            @media screen and (max-width: 768px) {
              opacity: 1;
            }
          }
        }
      }
      .text-wrap{
        border-top: 1px solid var(--low);
        /* padding-top: 5rem; */
        padding-bottom: 12rem;
        @media screen and (max-width: 768px) {
          display: contents;
        }
        .text{
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: calc(100dvh - var(--header-height));
          padding-block: 8rem;
          @media screen and (max-width: 768px) {
            display: block;
            min-height: auto;
            padding-block: 0;
          }
          .copy{
            font-size: 2.8rem;
            font-weight: 700;
            line-height: 1.65;
            margin-top: calc((1em - 1lh) / 2);
            @media screen and (max-width: 768px) {
              font-size: 2rem;
            }
          }
          .readText{
            margin-top: 3rem;
            @media screen and (max-width: 768px) {
              margin-top: 2rem;
            }
          }
          &+ .text{
            /* margin-top: 12rem; */
            @media screen and (max-width: 768px) {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
  .wide-image{
    @media screen and (max-width: 768px) {
      aspect-ratio: 750 / 500;
      overflow: hidden;
      img{
        max-width: none;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  /*------------------------------
    MARK:--offtime
  ------------------------------*/
  .offtime{
    background-color: var(--sub);
    padding-block: 8rem;
    @media screen and (max-width: 768px) {
      padding-block: 5rem;
    }
    .wrap{
      border-radius: 2rem;
      background-color: #fff;
      display: flex;
      column-gap: 8rem;
      padding: 8rem;
      @media screen and (max-width: 768px) {
        border-radius: 1.6rem;
        display: grid;
        padding: 2rem;
      }
      .image{
        width: 39rem;
        flex-shrink: 0;
        @media screen and (max-width: 768px) {
          width: 100%;
          grid-row: 3/4;
          margin-top: 2rem;
        }
      }
      .text-wrap{
        @media screen and (max-width: 768px) {
          display: contents;
        }
        .title{
          font-style: italic;
          position: relative;
          @media screen and (max-width: 768px) {
            grid-row: 1/2;
          }
          p{
            font-size: 7.8rem;
            color: var(--low);
            font-weight: 700;
            line-height: 1;
            opacity: 0.3;
            @media screen and (max-width: 768px) {
              font-size: 6rem;
            }
          }
          h2{
            font-size: 2.1rem;
            font-weight: 700;
            color: var(--main);
            position: absolute;
            top: calc(50% - 0.1em);
            @media screen and (max-width: 768px) {
              font-size: 1.6rem;
            }
          }
        }
        .readText{
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            margin-top: 1rem;
          }
        }
      }
    }
  }
  /*------------------------------
    MARK:--index-interview
  ------------------------------*/
  .index-list{
    &.interview-list{
      padding-bottom: 14rem;
      border-bottom: var(--bggray) 1px solid;
      margin-bottom: 3rem;
      @media screen and (max-width: 768px) {
        padding-bottom: 6rem;
      }
      .container{
        gap: 8rem 6rem;
        @media screen and (max-width: 768px) {
          gap: 4rem 1.5rem;
        }
      }
    }
    &.note-list{
      padding-bottom: 12rem;
      @media screen and (max-width: 768px) {
        padding-bottom: 6rem;
      }
      .container{
        gap: 6rem 6rem;
        @media screen and (max-width: 768px) {
          gap: 4rem 1.5rem;
        }
      }
    }
    .container{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      @media screen and (max-width: 768px) {
        grid-template-columns: repeat(2,1fr);
      }
      li{
        a{
          display: block;
          overflow: hidden;
          &.is-disabled{
            pointer-events: none;
          }
          @media (any-hover:hover) {
            &:hover{
              img{
                opacity: 0.7;
              }
              .name,
              .note-title time,
              .note-title p{
                color: var(--main);
              }
            }
          }
          img{
            pointer-events: none;
            transition: opacity 0.3s var(--default-timing-function);
          }
          .profile{
            padding-top: 1.5rem;
            display: flex;
            align-items: center;
            column-gap: 1.5rem;
            @media screen and (max-width: 768px) {
              display: block;
              padding-top: 0.8rem;
            }
            .gym{
              border-radius: 100vmax;
              background-color: var(--main);
              color: #fff;
              font-size: 1.4rem;
              font-weight: 600;
              padding: 0.7rem 1.5rem;
              width: fit-content;
              @media screen and (max-width: 768px) {
                font-size: 1.1rem;
                padding: 0.4rem 0.8rem;
              }
            }
            .name{
              transition: color 0.2s var(--default-timing-function);
              @media screen and (max-width: 768px) {
                margin-top: 0.5rem;
              }
              span{
                display: inline-block;
              }
              .initial{
                font-family: var(--font-roboto);
                color: var(--main);
                font-size: 3rem;
                font-weight: 500;
                @media screen and (max-width: 768px) {
                  font-size: 2rem;
                }
              }
              .join{
                font-weight: 500;
                font-size: 1.4rem;
                margin-left: 1em;
                padding-left: 0.5em;
                border-left: 1px solid currentColor;
                @media screen and (max-width: 768px) {
                  font-size: 1.2rem;
                }
              }
            }
          }
          .note-title{
            font-weight: 600;
            time{
              font-size: 1.4rem;
              display: inline-block;
              color: var(--gray01);
              margin-block: 1.5rem 1.2rem;
              transition: color 0.2s var(--default-timing-function);
              @media screen and (max-width: 768px) {
                font-size: 1rem;
                margin-block: 0.5rem;
              }
            }
            p{
              font-size: 2.1rem;
              line-height: 1.6;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              /* 表示したい行数 */
              overflow: hidden;
              transition: color 0.2s var(--default-timing-function);
              @media screen and (max-width: 768px) {
                font-size: 1.4rem;
                -webkit-line-clamp: 3;
                line-height: 1.5;
              }
            }
          }
        }
      }
      /* @media (any-hover:hover) {
        &:has(a:hover){
          a:not(:hover){
            opacity: 0.4;
          }
        }
      } */
    }
  }
  .note-mv{
    padding-bottom: 7rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 3rem;
    }
  }
  /*------------------------------
    MARK:--index-pagenation
  ------------------------------*/
  .index-pagenation{
    padding-bottom: 12rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 6rem;
    }
    ul{
      display: flex;
      justify-content: center;
      font-size: 2.1rem;
      line-height: 0.8;
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
      }
      &::after{
        content: "…";
      }
      li{
        &+ li{
          border-left: var(--black) 1px solid;
        }
        &.current{
          a,
          button{
            font-weight: 500;
            color: var(--main);
          }
        }
        a{
          display: inline-block;
          width: 5.2rem;
          text-align: center;
          font-family: var(--font-roboto);
          @media screen and (max-width: 768px) {
            width: 4.8rem;
          }
        }
        button{
          appearance: none;
          border: 0;
          background: transparent;
          display: inline-block;
          width: 5.2rem;
          text-align: center;
          font-family: var(--font-roboto);
          font-size: inherit;
          line-height: inherit;
          cursor: pointer;
          transition: color 0.2s var(--default-timing-function);
          @media screen and (max-width: 768px) {
            width: 4.8rem;
          }
          @media (any-hover:hover) {
            &:hover{
              color: var(--main);
            }
          }
        }
      }
    }
    &.note-pagenation{
      padding-top: 0;
      ul{
        &::after{
          content: none;
        }
      }
    }
  }
}

/*------------------------------
  MARK:#FAQ
------------------------------*/
.page-faq {
  .subpage-mv{
    padding-bottom: 9rem;
    @media screen and (max-width: 768px) {
      padding-bottom: 4rem;
    }
  }
  .contents{
    margin-top: 9rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
    }
    .container{
      display: grid;
      grid-template-columns: 40rem 1fr;
      column-gap: 7.5rem;
      position: relative;
      @media screen and (max-width: 768px) {
        display: block;
      }
    }
  }
  .aside{
    --gap: 1.6rem;
    padding: 4rem 2rem 0 10rem;
    background-color: var(--sub);
    position: sticky;
    top: var(--header-height);
    height: calc(100dvh - var(--header-height));
    @media screen and (max-width: 768px) {
      display: none;
    }
    .nav{
      display: grid;
      gap: var(--gap);
      li{
        position: relative;
        &::before{
          content: "";
          display: block;
          width: 100%;
          height: 4rem;
          background-color: #fff;
          position: absolute;
          top: 0;
          left: 0;
          transform-origin: left;
          transform: scaleX(0);
          transition: transform 0.3s ease-in-out -0.15s;
        }
        &.rows{
          a,&::before{
            height: 6rem;
          }
          .num{
            height: 5.2rem;
          }
        }
        &.current{
          a{
            color: var(--main);
            transition: color 0.25s ease;
          }
          .num{
            border-color: var(--main);
            transition: border-color 0.25s ease;
          }
          &::before{
            transform: scaleX(1);
            transition: transform 0.2s cubic-bezier(.08, .78, .31, .98);
          }
        }
      }
      a{
        display: flex;
        align-items: center;
        position: relative;
        height: 4rem;
        width: 100%;
        color: #fff;
        font-size: 1.6rem;
        transition: color 0.1s ease;
      }
      .num{
        display: inline-block;
        height: 3.2rem;
        border-right: 1px solid #fff;
        font-weight: 700;
        font-family: var(--font-roboto);
        display: grid;
        place-content: center;
        width: 3.6rem;
        margin-right: 1rem;
        padding-top: 0.1em;
        transition: border-color 0.1s ease;
      }
      p{
        font-weight: 600;
        line-height: 1.35;
      }
    }
    .icon{
      margin-top: 3rem;
      aspect-ratio: 1;
      position: relative;
      li{
        position: absolute;
        width: calc(var(--iw) * 0.1rem);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        img{
          opacity: 0;
          transform-origin: center bottom;
        }
        &.current{
          img{
            animation: popLanding 1.5s forwards;
          }
        }
      }
    }
  }
  
  .main{
    padding-top: 4rem;
    @media screen and (max-width: 768px) {
      padding-top: 0;
      padding-inline: 1.5rem;
      width: 100%;
    }
    article{
      &+ article{
        margin-top: 12rem;
        @media screen and (max-width: 768px) {
          margin-top: 4rem;
        }
      }
      &:last-child{
        min-height: calc(100dvh - var(--header-height));
        padding-bottom: 12rem;
        @media screen and (max-width: 768px) {
          padding-bottom: 4rem;
          min-height: auto;
        }
      }
    }
    .title{
      display: flex;
      align-items: center;
      width: 100%;
      color: #fff;
      height: 6.4rem;
      background-color: var(--main);
      @media screen and (max-width: 768px) {
        height: 4.8rem;
      }
      .num{
        font-size: 3.2rem;
        display: inline-block;
        height: 5.2rem;
        border-right: 1px solid #fff;
        font-weight: 700;
        font-family: var(--font-roboto);
        display: grid;
        place-content: center;
        width: 8.6rem;
        padding-top: 0.1em;
        margin-right: 2.4rem;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
          width: 4.8rem;
          height: 3.6rem;
          margin-right: 1.2rem;
        }
      }
      h2{
        font-size: 3.2rem;
        font-weight: 600;
        display: flex;
        align-items: baseline;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
      }
    }
    ul{
      margin-top: 3.5rem;
      @media screen and (max-width: 768px) {
        margin-top: 1rem;
      }
      li{
        .wrap{
          width: 87.5rem;
          display: flex;
          @media screen and (max-width: 768px) {
            width: 100%;
            align-items: center;
          }
        }
        &+ li{
          border-top: 1px solid var(--bggray);
        }
      }
    }
    .accordion-trigger{
      width: 100%;
      padding: 2.5rem 0;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      column-gap: 1.5rem;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
        padding: 2rem 0;
        column-gap: 1rem;
      }
      .q-label{
        font-family: var(--font-roboto);
        font-size: 3.2rem;
        font-weight: 500;
        display: grid;
        place-content: center;
        background-color: var(--sub);
        color: #fff;
        width: 8.6rem;
        height: 4.4rem;
        margin-right: 2rem;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
          width: 3.6rem;
          height: 2.4rem;
          margin-right: 1.2rem;
        }
      }
      .q-text{
        flex: 1;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.6;
        margin-top: 0.8rem;
        padding-right: 4rem;
        @media screen and (max-width: 768px) {
          font-size: 1.5rem;
          line-height: 1.4;
          margin-top: 0;
          padding-right: 1rem;
        }
      }
      .accordion-icon{
        width: 8.6rem;
        height: 4.4rem;
        flex-shrink: 0;
        position: relative;
        display: block;
        border: 1px solid var(--sub);
        @media screen and (max-width: 768px) {
          width: 3.6rem;
          height: 2.4rem;
        }
        &::before,
        &::after{
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          background-color: var(--sub);
          transition: transform 0.3s var(--default-timing-function);
        }
        &::before{
          width: 2rem;
          height: 1px;
          transform: translate(-50%, -50%);
          @media screen and (max-width: 768px) {
            width: 1rem;
          }
        }
        &::after{
          width: 2rem;
          height: 1px;
          transform: translate(-50%, -50%) rotate(-90deg);
          @media screen and (max-width: 768px) {
            width: 1rem;
          }
        }
      }
      &[aria-expanded="true"]{
        .accordion-icon::after{
          transform: translate(-50%, -50%);
        }
      }
    }
    .accordion-content{
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s var(--default-timing-function);
      &.open{
        grid-template-rows: 1fr;
      }
    }
    .accordion-inner{
      overflow: hidden;
      display: flex;
      column-gap: 1.5rem;
      @media screen and (max-width: 768px) {
        column-gap: 1rem;
      }
      .border-wrap{
        border-top: 1px dashed var(--sub);
        padding-block: 2rem 4rem;
        width: 100%;
        .readText{
          .bold{
            font-weight: 700;
          }
          .indent{
            display: inline-block;
            padding-left: 1em;
            text-indent: -1em;
          }
          a{
            text-decoration: underline;
            color: var(--main);
            @media (any-hover:hover) {
              &:hover{
                text-decoration: none;
              }
            }
          }
        }
      }
    }
    .add-text{
      margin-top: 6rem;
      @media screen and (max-width: 768px) {
        margin-top: 4rem;
      }
      .line-btn{
        margin-top: 2.5rem;
        display: grid;
        place-content: center;
        position: relative;
        background-color: var(--line);
        width: fit-content;
        height: 7.2rem;
        border-radius: 1rem;
        padding-inline: 5rem;
        transition: 0.3s var(--default-timing-function);
        @media screen and (max-width: 768px) {
          height: 6rem;
          padding-inline: 4rem;
          margin-inline: auto;
        }
        .btn-text{
          color: #fff;
          font-size: 1.8rem;
          font-weight: 700;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
          }
        }
        .btn-arrow{
          position: absolute;
          right: 2rem;
          top: calc(50% - 0.65em);
          display: grid;
          place-content: center;
          font-size: 1.8rem;
          width: 1.2em;
          line-height: 1.5;
          overflow: hidden;
          color: #fff;
          @media screen and (max-width: 768px) {
            right: 1rem;
          }
          &::before,
          &::after{
            content: "→";
            display: inline-block;
            grid-area: 1/1;
            padding-inline: 0.1em;
            font-family: var(--font-roboto);
            transition: 0.3s var(--default-timing-function), transform 0s;
          }
          &::before{
            transform: translateX(-100%);
          }
        }
        @media (any-hover:hover) {
          &:hover{
            opacity: 0.6;
            .btn-arrow{
              &::before{
                transform: translateX(0);
                transition: 0.3s var(--default-timing-function), transform 0.6s cubic-bezier(0.35,0.35,0.2,1);
              }
              &::after{
                transform: translateX(100%);
                transition: 0.3s var(--default-timing-function);
              }
            }
          }
        }
      }
    }
  }
}

@keyframes popLanding {
0% {
    opacity: 0;
    transform: scale(0.5);
  }

  20% {
    opacity: 1;
    transform: scale(1.02);
    /* 少し浮き上がり、目標より大きく */
  }
  
  60% {
    transform: scale(1);
    /* 少し沈み、目標より小さく */
  }
  
  100% {
    opacity: 1;
    transform: scale(1);
    /* 定位置・等倍に落ち着く */
  }
}

/*------------------------------
  MARK:#KEYWORDS
------------------------------*/
.page-keywords {
  position: relative;

  .scroll-down{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @media screen and (max-width: 768px) {
      display: none;
    }
    .scroll-down-sticky{
      position: sticky;
      left: 0;
      top: 0;
      width: 100%;
      height: clamp(800px, 100lvh, 1000px);
      display: grid;
      place-content: center;
    }
    .inner{
      height: 50rem;
      width: 140rem;
      padding-inline: 0;
      position: relative;
    }
    p{
      position: absolute;
      left: 0;
      bottom: 0;
      color: var(--main);
      font-family: var(--font-roboto);
      writing-mode: vertical-lr;
      line-height: 1;
      display: flex;
      align-items: center;
      column-gap: 0.5em;
      &::after{
        content: "";
        display: block;
        background-color: currentColor;
        font-size: 0.9em;
        width: 1em;
        height: 0.75em;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
    }
  }

  .subpage-mv{
    padding-bottom: 0;
  }

  .screen{
    position: relative;
    height: fit-content;
    @media screen and (max-width: 768px) {
      display: grid;
      padding-inline: 1.5rem;
      padding-bottom: 6rem;
      .images,
      .text,
      .text .text-sticky,
      .text .contents-inner,
      .text ul{
        display: contents;
      }
    }
  }
  .indicator{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
    @media screen and (max-width: 768px) {
      display: none;
    }
    &.is-hidden{
      opacity: 0;
    }
    .indicator-sticky{
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: clamp(800px, 100lvh, 1000px);
      display: grid;
      place-content: center;
      @media screen and (max-width: 768px) {
        height: auto;
      }
    }
    .contents-inner{
      height: 50rem;
      padding-top: 8rem;
    }
    .wrap{
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 1rem;
      .en{
        font-family: var(--font-roboto);
        flex-shrink: 0;
      }
      .bar{
        flex-grow: 1;
        position: relative;
        span{
          display: block;
          height: 1px;
          width: 100%;
          &.base{
            position: relative;
            background-color: #e0e0e0;
          }
          &.active{
            position: absolute;
            left: 0;
            top: 0;
            background-color: var(--main);
            transform: scaleX(0);
          }
        }
      }
      .num{
        font-family: var(--font-roboto);
        font-weight: 300;
        font-style: italic;
        flex-shrink: 0;
        font-feature-settings: "palt";
        span{
          display: none;
          width: 2ch;
          &.current{
            display: inline-block;
          }
        }
      }
    }
  }
  .images{
    position: relative;
    padding-top: 50lvh;
    @media screen and (max-width: 768px) {
      padding-top: 0;
    }
    .scroll-section{
      height: clamp(800px,100lvh,1000px);
      display: grid;
      place-content: center;
      @media screen and (max-width: 768px) {
        position: relative;
        height: auto;
        margin-top: 7rem;
        &:first-of-type{
          margin-top: 6rem;
        }
      }
      .image-wrap{
        width: 41rem;
        overflow: hidden;
        @media screen and (max-width: 768px) {
          width: 22rem;
        }
        &.shown{
          img{
            transform: scale(1);
          }
        }
      }
      img{
        transform: scale(1.2);
        transition: transform 1.2s cubic-bezier(.16, .64, .32, 1);
      }
    }
    .sp-indicator{
      display: none;
      @media screen and (max-width: 768px) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: 0.5rem;
        position: absolute;
        left: 0;
        top: 7rem;
        width: 100%;
        .en{
          font-family: var(--font-roboto);
          flex-shrink: 0;
          font-size: 0.8rem;
          font-weight: 300;
        }
        .bar{
          flex-grow: 1;
          position: relative;
          span{
            display: block;
            height: 1px;
            width: 100%;
            left: 0;
            top: 0;
            background-color: var(--main);
          }
        }
        .num{
          font-family: var(--font-roboto);
          font-weight: 300;
          font-style: italic;
          flex-shrink: 0;
          font-feature-settings: "palt";
          font-size: 0.8rem;
        }
      }
    }
  }
  .text{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    .text-sticky{
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: clamp(800px, 100lvh, 1000px);
      display: grid;
      place-content: center;
    }
    .contents-inner{
      height: 50rem;
      padding-top: 16rem;
    }
    ul{
      li{
        display: none;
        justify-content: space-between;
        @media screen and (max-width: 768px) {
          display: block;
          opacity: 1;
          &:nth-of-type(1){
            grid-row: 2/3;
          }
          &:nth-of-type(2){
            grid-row: 4/5;
          }
          &:nth-of-type(3){
            grid-row: 6/7;
          }
          &.shown{
            .title p{
              animation: clipIn 0.4s cubic-bezier(0, .5, 0, 1) forwards;
            }
            .title div{
              animation: clipIn 0.4s cubic-bezier(0, .5, 0, 1) forwards;
            }
            .title :is(p,div) span{
              animation: fadeUp 0.8s cubic-bezier(0, .1, 0, 1) 0.32s forwards;
            }
            .readText{
              animation: fadeUp 0.8s ease 0.4s forwards;
            }
          }
        }
        &.current{
          display: flex;
          .title p{
            animation: clipIn 0.4s cubic-bezier(0, .5, 0, 1) forwards;
          }
          .title div{
            animation: clipIn 0.4s cubic-bezier(0, .5, 0, 1) forwards;
          }
          .title :is(p,div) span{
            animation: fadeUp 0.8s cubic-bezier(0, .1, 0, 1) 0.32s forwards;
          }
          .readText{
            animation: fadeUp 0.8s ease 0.4s forwards;
          }
        }
        &.fading-out{
          display: flex;
          opacity: 0;
          transition: opacity 0.5s ease;
        }
        .title{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          align-self: flex-start;
          @media screen and (max-width: 768px) {
            margin-top: -6rem;
          }
          p,div{
            position: relative;
            z-index: 1;
            display: inline-block;
            color: #fff;
            font-weight: 600;
            font-feature-settings: "palt";
            letter-spacing: 0.05em;
            line-height: 1;
            padding: 1.8rem 2rem 2rem;
            transform: scaleX(0);
            transform-origin: left;
            @media screen and (max-width: 768px) {
              padding: 0.9rem 1rem 1rem;
            }
            &.no-top{
              padding-top: 0;
            }
            &.no-bottom{
              padding-bottom: 0;
            }
          }
          p{
            background-color: var(--sub);
            font-size: 2.8rem;
            @media screen and (max-width: 768px) {
              font-size: 1.4rem;
            }
            &+ p{
              margin-top: -0.4rem;
              z-index: 0;
              padding: 1.8rem 2rem;
              @media screen and (max-width: 768px) {
                margin-top: -0.2rem;
                padding: 0.9rem 1rem;
              }
            }
          }
          div{
            background-color: var(--main);
            font-size: 6rem;
            @media screen and (max-width: 768px) {
              font-size: 3rem;
            }
            &+ div{
              margin-top: -0.5rem;
              z-index: 0;
              @media screen and (max-width: 768px) {
                margin-top: -0.25rem;
              }
            }
          }
          span{
            display: inline-block; 
            transform: translateY(1rem);
            opacity: 0;
          }
        }
        .readText{
          width: 30rem;
          align-self: flex-end;
          text-align: justify;
          font-feature-settings: "palt";
          letter-spacing: 0.08em;
          margin-block: calc((1em - 1lh) / 2);
          transform: translateY(1rem);
          opacity: 0;
          span{
            font-size: 0.875em;
          }
          @media screen and (max-width: 768px) {
            width: 100%;
            margin-top: 2rem;
            text-align: left;
            font-feature-settings: unset;
            letter-spacing: 0;
          }
        }
      }
    }
  }
}

@keyframes clipIn {
  0%{transform: scaleX(0);}
  100%{transform: scaleX(1);}
}

@keyframes fadeUp {
  0%{transform: translateY(1rem); opacity: 0;}
  100%{transform: translateY(0);opacity: 1;}
}

/*------------------------------
  MARK:#CAREER-PATH
------------------------------*/
.page-career-path {
  --figure-bg: #f2f5f9;

  .personal-wrap{
    display: flex;
    justify-content: space-between;
    @media screen and (max-width: 768px) {
      display: block;
    }
    .en{
      font-weight: 700;
      color: var(--main);
      font-family: var(--font-roboto);
      letter-spacing: 0.1em;
      line-height: 1.5;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
      }
    }
    h2{
      font-size: 3.8rem;
      font-weight: 600;
      line-height: 1.7;
      margin-top: 3rem;
      @media screen and (max-width: 768px) {
        font-size: 2.4rem;
        margin-top: 1rem;
        line-height: 1.5;
      }
    }
    .image{
      width: 62rem;
      flex-shrink: 0;
      @media screen and (max-width: 768px) {
        width: 100%;
        margin-top: 2rem;
      }
    }
  }

  .careerstep{
    margin-top: 10rem;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
  }
  .careerstep-title{
    display: grid;
    grid-template-columns: 1.6rem auto;
    grid-template-rows: auto auto;
    gap: 1.5rem 1rem;
    align-items: center;
    @media screen and (max-width: 768px) {
      grid-template-columns: 0.8rem auto;
      gap: 1rem 0.5rem;
    }
    .point{
      width: 1.6rem;
      aspect-ratio: 1;
      background-color: var(--black);
      @media screen and (max-width: 768px) {
        width: 0.8rem;
      }
    }
    h3{
      font-size: 2.8rem;
      font-weight: 600;
      @media screen and (max-width: 768px) {
        font-size: 1.6rem;
      }
    }
    p{
      grid-column: 2/3;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
        line-height: 1.5;
      }
    }
  }

  .figure-wrap{
    margin-top: 4rem;
    background-image: linear-gradient(to right, transparent 25rem, var(--figure-bg) 25rem);
    @media screen and (max-width: 768px) {
      background-image: none;
      background-color: var(--figure-bg);
      margin-top: 3rem;
    }
    .figure-container{
      padding: 8rem 0 10rem 8rem;
      @media screen and (max-width: 768px) {
        padding: 4rem 0 4rem;
      }
    }
  }

  .svg-rank{
    position: relative;
    margin-top: 3rem;
    .text-wrap{
      background-color: #fff;
      padding: 2rem 4rem;
      display: inline-block;
      border-radius: 100vmax;
      width: 34rem;
      position: absolute;
      right: 3rem;
      top: 4rem;
      @media screen and (max-width: 768px) {
        position: static;
        margin-top: 2rem;
      }
      p{
        line-height: 1.5;
        padding-left: 1em;
        text-indent: -1em;
        @media screen and (max-width: 768px) {
          font-size: 1.3rem;
        }
      }
    }
  }

  .about-rank{
    border-radius: 1rem;
    background-color: #fff;
    position: relative;
    padding: 3rem 5rem;
    margin-top: 3rem;
    @media screen and (max-width: 768px) {
      padding: 2.5rem 2rem;
      margin-top: 2rem;
    }
    .title{
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--main);
      isolation: isolate;
    }
    .readText{
      line-height: 1.75;
      margin-top: 1.5rem;
      isolation: isolate;
    }
    .caption{
      color: var(--sub);
      font-size: 1.4rem;
      margin-top: 1.5rem;
      isolation: isolate;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
        line-height: 1.5;
      }
    }
    .image{
      position: absolute;
      bottom: 0;
      right: 6rem;
      width: 17rem;
      @media screen and (max-width: 768px) {
        width: 10rem;
        right: 2rem;
      }
    }
  }

  .svg-career{
    margin-top: 8rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
    }
  }

  .about-career{
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
    @media screen and (max-width: 768px) {
      margin-top: 2rem;
      display: block;
    }
    .text-wrap{
      .readText{
        line-height: 1.5;
        font-size: 1.8rem;
        @media screen and (max-width: 768px) {
          font-size: 1.3rem;
        }
      }
      .caption{
        color: var(--sub);
        font-size: 1.4rem;
        margin-top: 1.5rem;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
          line-height: 1.5;
        }
      }
    }
    .example-wrap{
      background-color: #fff;
      border-radius: 1rem;
      padding: 2rem 5rem;
      position: relative;
      flex-shrink: 0;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
      }
      .title{
        color: var(--main);
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -0.5em);
        white-space: nowrap;
      }
      .readText{
        line-height: 1.75;
        @media screen and (max-width: 768px) {
          text-align: center;
        }
      }
    }
  }

  .stepup{
    margin-top: 16rem;
    padding-bottom: 16rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      padding-bottom: 6rem;
    }
    .readText{
      margin-top:5rem;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
      }
    }
    .to-independence{
      margin-top: 8rem;
      display: flex;
      align-items: center;
      width: 62rem;
      border-radius: 2rem;
      overflow: hidden;
      margin-inline: auto;
      box-shadow: 0.3rem 0.3rem 1rem #84848440;
      position: relative;
      @media screen and (max-width: 768px) {
        width: 100%;
        border-radius: 1rem;
        margin-top: 5rem;
      }
      .image{
        width: 26rem;
        overflow: hidden;
        margin-right: 5rem;
        @media screen and (max-width: 768px) {
          width: 13rem;
          margin-right: 1.5rem;
        }
      }
      .en{
        font-family: var(--font-roboto);
        font-weight: 700;
        line-height: 1.5;
        color: var(--main);
        letter-spacing: 0.1em;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      .ja{
        font-weight: 600;
        font-size: 2.4rem;
        margin-top: 1.5rem;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
          margin-top: 0.5rem;
        }
      }
      .arrow{
        position: absolute;
        right: 4rem;
        display: inline-block;
        font-size: 3.2rem;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
          right: 1.5rem;
        }
      }
    }
  }

  .stepup-wrap{
    display: flex;
    justify-content: space-between;
    @media screen and (max-width: 768px) {
      display: block;
    }
    .en{
      font-weight: 700;
      color: var(--main);
      font-family: var(--font-roboto);
      letter-spacing: 0.1em;
      line-height: 1.5;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
      }
    }
    h2{
      font-size: 3.8rem;
      font-weight: 600;
      line-height: 1.7;
      margin-top: 3rem;
      @media screen and (max-width: 768px) {
        font-size: 2.4rem;
        margin-top: 1rem;
        line-height: 1.5;
      }
    }
    .image{
      width: 65rem;
      flex-shrink: 0;
      @media screen and (max-width: 768px) {
        margin-top: 2rem;
        width: 100%;
      }
    }
  }
}

/*------------------------------
  MARK:#JOB
------------------------------*/
.page-job {
  .anc-btn{
    margin-bottom: 5rem;
    @media screen and (max-width: 768px) {
      margin-bottom: 0;
    }
    .grid{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: 9rem;
      border: max(0.2rem,2px) solid var(--pale);
      @media screen and (max-width: 768px) {
        margin-inline: -1.5rem;
        grid-template-rows: 5rem;
      }
    }
    a{
      display: grid;
      place-content: center;
      text-align: center;
      font-weight: 600;
      font-size: 2.1rem;
      line-height: 1.3;
      transition: 0.1s;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &+ a{
        border-left: max(0.2rem,2px) solid var(--pale);
      }
      @media (any-hover: hover) {
        &:hover{
          background-color: var(--main);
          color: #fff;
        }
        
      }
    }
  }
  .job,
  .store,
  .important{
    padding-top: 5rem;
    @media screen and (max-width: 768px) {
      padding-top: 4rem;
    }
    .section-wrap{
      margin-inline: -25rem 0;
      display: flex;
      gap: 6rem;
      @media screen and (max-width: 768px) {
        margin-inline: 0;
        display: block;
      }
      .text-wrap{
        padding-bottom: 15rem;
        border-bottom: max(0.1rem,1px) solid var(--pale);
        @media screen and (max-width: 768px) {
          margin-top: 3rem;
          padding-bottom: 4rem;

        }
      }
      .image{
        width: 74rem;
        flex-shrink: 0;
        @media screen and (max-width: 768px) {
          width: 100%;
        }
      }
      .en{
        font-size: 1.4rem;
        color: var(--main);
        font-weight: 500;
        font-family: var(--font-roboto);
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
      }
      h2{
        font-size: 3.8rem;
        font-weight: 600;
        margin-top: 1rem;
        @media screen and (max-width: 768px) {
          font-size: 2.4rem;
          margin-top: 0.6rem;
        }
      }
      .readText{
        margin-top: 3rem;
        margin-bottom: 5rem;
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
          margin-bottom: 3rem;
        }
      }
    }
  }
  .important{
    .section-wrap{
      .text-wrap{
        border-bottom: none;
      }
    }
  }

  #svg-store{
    margin-inline: auto;
    width: 90%;
  }

  .schedule{
    margin-top: 14rem;
    padding-block: 8rem 10rem;
    background-color: var(--pale);
    @media screen and (max-width: 768px) {
      margin-top: 0;
      padding-block: 3rem 4rem;
    }
    .title{
      text-align: center;
      position: relative;
      .en{
        font-family: var(--font-roboto);
        color: #fff;
        font-weight: 700;
        font-size: 8.6rem;
        font-style: italic;
        opacity: 0.5;
        @media screen and (max-width: 768px) {
          font-size: 4.4rem;
        }
      }
      h2{
        font-size: 3rem;
        color: var(--main);
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 0;
        display: grid;
        place-content: center;
        width: 100%;
        height: 100%;
        padding-bottom: 0.8rem;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
          padding-bottom: 0.4rem;
        }
      }
    }
    .schedule-container{
      margin-top: 3rem;
      border-radius: 2rem;
      background: var(--job-schedule-bg) no-repeat center/cover;
      padding: 7rem 6rem;
      color: #fff;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4rem;
      @media screen and (max-width: 768px) {
        margin-top: 2rem;
        border-radius: 1rem;
        padding: 1.5rem 1rem 3rem;
        display: block;
      }
      &:has(#tab1:checked){
        .example-wrap .hd span.tab1{opacity: 1;}
        .example-wrap .time-grid.tab1{opacity: 1;}
      }
      &:has(#tab2:checked){
        .example-wrap .hd span.tab2{opacity: 1;}
        .example-wrap .time-grid.tab2{opacity: 1;}
      }
      &:has(#tab3:checked){
        .example-wrap .hd span.tab3{opacity: 1;}
        .example-wrap .time-grid.tab3{opacity: 1;}
      }

      .btn-wrap{
        width: 23rem;
        flex-shrink: 0;
        @media screen and (max-width: 768px) {
          display: grid;
          grid-template-columns: repeat(3,1fr);
          gap: 1rem;
          width: 100%;
        }
        li{
          position: relative;
          &+ li{
            margin-top: 2rem;
            @media screen and (max-width: 768px) {
              margin-top: 0;
            }
          }
          &:has(input:checked){
            label{
              background-color: var(--main);
            }
          }
        }
        input{
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }
        label{
          display: flex;
          align-items: center;
          padding: 0.5rem 1.5rem;
          background-color: var(--sub);
          @media screen and (max-width: 768px) {
            flex-direction: column;
            padding: 0.5rem 0.5rem;
          }
          span{
            display: inline-block;
            font-weight: 500;
            @media screen and (max-width: 768px) {
              font-size: 1.2rem;
            }
          }
          .num{
            border-right: max(0.1rem,1px) solid #fff;
            padding-block: 1.2rem;
            padding-right: 1.5rem;
            margin-right: 1.5rem;
            @media screen and (max-width: 768px) {
              border-right: none;
              border-bottom: max(0.1rem,1px) solid #fff;
              font-size: 1.1rem;
              text-align: center;
              padding: 0;
              padding-bottom: 0.5rem;
              margin: 0;
              margin-bottom: 0.5rem;
              width: 100%;
            }
          }
          .arrow{
            position: absolute;
            right: 1.5rem;
            @media screen and (max-width: 768px) {
              position: static;
            }
          }
        }
      }
      .example-wrap{
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
        }
        .hd{
          font-size: 2.4rem;
          font-weight: 600;
          position: relative;
          padding-bottom: 1.5rem;
          border-bottom: max(0.1rem,1px) solid #fff;
          margin-bottom: 3rem;
          @media screen and (max-width: 768px) {
            font-size: 1.3rem;
            padding-bottom: 1rem;
          }
          span{
            opacity: 0;
            transition: opacity 0.1s;
            @media screen and (max-width: 768px) {
              height: 2lh;
              line-height: 1.5;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            &.tab1,&.tab2{
              position: absolute;
              left: 0;
              top: 0;
            }
          }
        }
        .wrap{
          position: relative;
        }
        .time-grid{
          display: grid;
          grid-template-columns: repeat(2,1fr);
          gap: 4rem;
          width: 100%;
          opacity: 0;
          transition: opacity 0.1s;
          @media screen and (max-width: 768px) {
            gap: 1rem;
          }
          &.tab1,&.tab3{
            position: absolute;
            top: 0;
            left: 0;
          }
          ul{
            li{
              display: grid;
              grid-template-columns: 8rem 5rem auto;
              align-items: center;
              padding-bottom: 6rem;
              position: relative;
              @media screen and (max-width: 768px) {
                grid-template-columns: 4rem 3rem auto;
                padding-bottom: 3rem;
              }
              &::before{
                content: "";
                width: 2px;
                height: 100%;
                display: block;
                position: absolute;
                left: calc(10.5rem - 1px);
                top: 0;
                background-color: var(--bggray);
                @media screen and (max-width: 768px) {
                  left: calc(5.5rem - 1px);
                }
              }
              &:last-of-type{
                padding-bottom: 0;
                &::before{
                  display: none;
                }
              }
              p{
                font-size: 2.4rem;
                font-weight: 600;
                line-height: 1.3;
                margin-block: -1rem;
                @media screen and (max-width: 768px) {
                  font-size: 1.3rem;
                }
              }
              .clock{
                border-radius: 50%;
                background-color: #fff;
                width: 100%;
                aspect-ratio: 1;
                position: relative;
                &::before,&::after{
                  content: "";
                  position: absolute;
                  left: calc(50% - 0.5px);
                  bottom: 50%;
                  transform-origin: center bottom;
                  display: block;
                  width: 1px;
                  background-color: var(--main);
                }
                &::before{
                  height: 1.4rem;
                  transform: rotate(calc(var(--short) / 12 * 360deg));
                  @media screen and (max-width: 768px) {
                    height: 0.7rem;
                  }
                }
                &::after{
                  height: 1.8rem;
                  transform: rotate(calc(var(--long) / 60 * 360deg));
                  @media screen and (max-width: 768px) {
                    height: 1rem;
                  }
                }
              }
              .task{
                margin-left: 2rem;
                span{
                  font-size: 0.6em;
                  font-feature-settings: "palt";
                  letter-spacing: 0.05em;
                }
              }
            }
          }
        }
      }
    }
    .caption{
      font-size: 1.4rem;
      text-align: right;
      margin-top: 1rem;
      @media screen and (max-width: 768px) {
        font-size: 1.1rem;
      }
    }
  }
}

/*------------------------------
  MARK:#SYSTEM
------------------------------*/
.page-system {
  .anc-btn{
    margin-bottom: 10rem;
    @media screen and (max-width: 768px) {
      margin-bottom: 4rem;
    }
    .grid-wrap{
      position: relative;
      &::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: max(0.2rem,2px);
        background-color: var(--pale);
      }
    }
    .grid{
      display: grid;
      width: fit-content;
      grid-template-columns: repeat(2,37rem);
      grid-template-rows: 9rem;
      justify-content: center;
      margin-inline: auto;
      border: max(0.2rem,2px) solid var(--pale);
      @media screen and (max-width: 768px) {
        grid-template-rows: 5rem;
        grid-template-columns: repeat(2,1fr);
        width: 100%;
      }
    }
    a{
      display: grid;
      place-content: center;
      text-align: center;
      font-weight: 600;
      font-size: 2.1rem;
      line-height: 1.3;
      transition: 0.1s;
      @media screen and (max-width: 768px) {
        font-size: 1.3rem;
      }
      &+ a{
        border-left: max(0.2rem,2px) solid var(--pale);
      }
      @media (any-hover: hover) {
        &:hover{
          background-color: var(--main);
          color: #fff;
        }
      }
    }
  }

  .section-hd{
    .en{
      font-size: 1.4rem;
      font-family: var(--font-roboto);
      font-weight: 500;
      color: var(--main);
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
      }
    }
    h2{
      font-size: 3.8rem;
      font-weight: 600;
      margin-top: 0.5rem;
      @media screen and (max-width: 768px) {
        font-size: 2.4rem;
      }
    }
    &+ .readText{
      margin-top: 3rem;
      @media screen and (max-width: 768px) {
        margin-top: 2rem;
      }
    }
  }
  
  .training{
    .training-grid{
      margin-top: 7rem;
      border-top: max(0.1rem,1px) solid var(--pale);;
      padding-top: 7rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 5rem;
      @media screen and (max-width: 768px) {
        margin-top: 4rem;
        padding-top: 0;
        display: block;
      }
    }
    .item{
      @media screen and (max-width: 768px) {
        margin-top: 4rem;
      }
      &:first-child{
        grid-column: span 2;
      }
    }
    .title-wrap{
      display: flex;
      align-items: center;
      gap: 3rem;
      margin-bottom: 3rem;
      @media screen and (max-width: 768px) {
        gap: 1.5rem;
        margin-bottom: 2rem;
      }
      .icon{
        width: 8rem;
        @media screen and (max-width: 768px) {
          width: 6rem;
        }
      }
      h3{
        font-size: 2.8rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
      }
      .sub{
        font-size: 1.6rem;
        font-weight: 500;
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        margin-top: 1rem;
        @media screen and (max-width: 768px) {
          font-size: 1.3rem;
          line-height: 1.5;
          margin-top: 0.5rem;
        }
      }
    }
    .hd{
      display: grid;
      place-content: center;
      color: #fff;
      font-weight: 500;
      font-size: 2.1rem;
      background-color: var(--sub);
      height: 4.8rem;
      @media screen and (max-width: 768px) {
        height: 4rem;
        font-size: 1.8rem;
      }
    }
    .grid-wrap{
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 2rem;
      padding: 4rem;
      background-color: var(--pale);
      @media screen and (max-width: 768px) {
        grid-template-columns: repeat(2,1fr);
        gap: 1rem;
        padding: 1.5rem 1.5rem 2rem;
      }
      li{
        display: grid;
        place-content: center;
        height: 10rem;
        background-color: #fff;
        text-align: center;
        font-size: 2.1rem;
        font-weight: 500;
        line-height: 1.5;
        grid-column: span var(--span,1);
        @media screen and (max-width: 768px) {
          font-size: 1.5rem;
          line-height: 1.3;
          height: 6rem;
        }
        span{
          font-size: 0.7em;
        }
      }
    }
    .table-wrap{
      margin-top: 4rem;
      border: max(0.1rem,1px) solid var(--sub);
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: 3.5rem 8rem;
      grid-auto-flow: column;
      @media screen and (max-width: 768px) {
        margin-top: 2rem;
        grid-template-rows: 3rem 6rem;
      }
      dt{
        display: grid;
        place-content: center;
        font-weight: 500;
        background-color: var(--pale);
        border-left: max(0.1rem,1px) solid var(--sub);
        border-bottom: max(0.1rem,1px) solid var(--sub);
        @media screen and (max-width: 768px) {
          font-size: 1.4rem;
        }
        &:first-of-type{
          border-left: none;
        }
      }
      dd{
        display: grid;
        place-content: center;
        border-left: max(0.1rem,1px) solid var(--sub);
        text-align: center;
        line-height: 1.3;
        @media screen and (max-width: 768px) {
          font-size: 1.2rem;
        }
        &:first-of-type{
          border-left: none;
        }
      }
    }
    .caption{
      text-align: right;
      font-size: 1.4rem;
      margin-top: 1rem;
      @media screen and (max-width: 768px) {
        font-size: 1.2rem;
      }
    }
    .works{
      margin-top: 4rem;
      .works-hd{
        font-weight: 500;
        padding-bottom: 1.5rem;
        border-bottom: max(0.1rem,1px) dashed var(--sub);
        &::before{
          content: "◼︎";
        }
      }
      .teachers{
        display: flex;
        align-items: center;
        margin-top: 1.5rem;
        flex-wrap: wrap;
        row-gap: 1rem;
        @media screen and (max-width: 768px) {
          font-size: 1.4rem;
        }
        span{
          display: inline-block;
          &+ span{
            &::before{
              content: "/";
              display: inline-block;
              margin-inline: 0.5em;
            }
          }
        }
      }
    }
  }

  .benefits{
    margin-top: 16rem;
    padding-bottom: 16rem;
    @media screen and (max-width: 768px) {
      margin-top: 8rem;
      padding-bottom: 4rem;
    }
    .grid-wrap{
      margin-top: 4rem;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 4rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: repeat(2,1fr);
        margin-top: 3rem;
        gap: 1.5rem;
    }
    li{
      border: max(.1rem,1px) solid var(--sub);
      padding: 3rem 3rem 4rem;
      text-align: center;
      @media screen and (max-width: 768px) {
        padding: 1rem 1rem 2rem;
      }
      .image{
        background-color: var(--pale);
        display: grid;
        place-content: center;
        height: 17.6rem;
        @media screen and (max-width: 768px) {
          height: 10rem;
        }
        img{
          width: calc(var(--iw) * 0.1rem);
          @media screen and (max-width: 768px) {
            width: calc(var(--iw) * 0.05rem);
          }
        }
      }
      h3{
        padding-block: 2rem 1.5rem;
        font-size: 2.1rem;
        font-weight: 500;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
          padding: 0;
          height: 2lh;
          display: grid;
          place-content: center;
          padding-block: 1rem;
          margin-block: 1rem;
          line-height: 1.3;
        }
      }
      p{
        border-top: max(0.1rem, 1px) solid var(--pale);
        padding-top: 1.5rem;
        line-height: 1.5;
        font-feature-settings: "palt";
        letter-spacing: 0.05em;
        @media screen and (max-width: 768px) {
          font-size: 1.3rem;
        }
        &.caption{
          font-size: 1.4rem;
          @media screen and (max-width: 768px) {
            font-size: 1.3rem;
            border-top: none;
          }
        }
      }
    }
  }
}
}

/*------------------------------
  MARK:#FUTURE
------------------------------*/
.page-future {
  .choices-mv{
    padding-top: var(--header-height);
    position: relative;
    .image-wrap{
      background-image: var(--main-gradation);
      padding: 1rem;
      position: relative;
      @media screen and (max-width: 768px) {
        padding: 0.5rem;
      }
      img{
        max-width: none;
        pointer-events: none;
      }
    }
    .section-title{
      position: absolute;
      inset: var(--header-height) 0 0 0;
      display: grid;
      place-content: center;
      text-align: center;
      .en{
        color: var(--main);
        font-size: 2.1rem;
        letter-spacing: 0.1em;
        font-family: var(--font-roboto);
        font-weight: 700;
        margin-bottom: 1rem;
        @media screen and (max-width: 768px) {
          font-size: 1.3rem;
        }
      }
      h1{
        color: #fff;
        font-size: 4.8rem;
        font-weight: 600;
        display: flex;
        align-items: flex-end;
        @media screen and (max-width: 768px) {
          font-size: 2.4rem;
        }
        .lottie-wrap{
          font-size: 1.5em;
          height: 1em;
          position: relative;
          .js-lottie{
            position: absolute;
            top: 0;
            left: 0;
          }
          &.hirogarumirai{
            width: 5em;
            margin-right: -0.05em;
            .js-lottie{
              width: calc(100% * 1200 / 1077);
              transform: translate(
                calc((100% - 4.9em) / 2 * -1),
                calc((100% - 1.05em) / 2 * -1)
              );
            }
          }
        }
      }
    }
  }
  .message{
    margin-top: 12rem;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
    .message-wrap{
      display: flex;
      justify-content: space-between;
      @media screen and (max-width: 768px) {
        display: block;
      }

      .title-wrap{
        .en{
          color: var(--main);
          font-family: var(--font-roboto);
          font-size: 1.6rem;
          font-weight: 700;
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
        }
        h2{
          font-size: 4.8rem;
          font-weight: 600;
          line-height: 1.8;
          margin-top: 2rem;
          @media screen and (max-width: 768px) {
            font-size: 2.8rem;
            line-height: 1.5;
            margin-top: 1rem;
          }
          span{
            background-image: var(--main-gradation);
            background-repeat: no-repeat;
            background-position: left bottom;
            background-size: 0% 26%;
            transition: background-size 1s cubic-bezier(0,0.3,0,1);
          }
          &.shown{
            span{
              background-size: 100% 26%;
            }
          }
        }
      }
      .text-wrap{
        width: 50%;
        flex-shrink: 0;
        @media screen and (max-width: 768px) {
          width: 100%;
        }
        .readText{
          font-size: 2rem;
          font-weight: 600;
          line-height: 2.2;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
            margin-top: 3rem;
          }
          &+ .readText{
            margin-top: 1lh;
          }
        }
      }
    }
    .image{
      margin-top: 14rem;
      @media screen and (max-width: 768px) {
        margin-top: 5rem;
      }
    }

    .catch-wrap{
      margin-top: 6rem;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
      }
      h2{
        font-size: 3.8rem;
        font-weight: 600;
        @media screen and (max-width: 768px) {
          font-size: 2.6rem;
          line-height: 1.5;
        }
        span{
          color: var(--main);
        }
      }
      .readText{
        margin-top: 4rem;
        @media screen and (max-width: 768px) {
          margin-top: 2rem;
        }
      }
    }
  }

  .bg-section{
    margin-top: 16rem;
    position: relative;
    @media screen and (max-width: 768px) {
      margin-top: 5rem;
    }
    .absolute-section{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(100% - 20rem);
      @media screen and (max-width: 768px) {
        position: relative;
      }
    }
    .sticky-section{
      width: 100%;
      height: calc(100dvh - var(--header-height));
      position: sticky;
      top: var(--header-height);
      left: 0;
      @media screen and (max-width: 768px) {
        position: absolute;
        top: 0;
        height: 100%;
        &.sp-section{
          position: relative;
        }
      }
      .image{
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        @media screen and (max-width: 768px) {
          position: sticky;
          height: calc(100dvh - var(--header-height));
          top: var(--header-height);
        }
        img{
          object-fit: cover;
          height: 100%;
          pointer-events: none;
        }
      }
      .text-slide{
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.2;
        p{
          animation: text-slide 50s linear infinite;
          font-size: 7rem;
          font-weight: 700;
          font-family: var(--font-roboto);
          line-height: 0.75;
          color: #fff;
          font-style: italic;
          white-space: nowrap;
          padding-right: 0.5ch;
        }
      }
    }

    .item-section{
      position: absolute;
      top: 0;
      height: 0;
      width: 100%;
      height: 100%;
      @media screen and (max-width: 768px) {
        position: static;
      }

      .title{
        color: #fff;
        .en{
          font-size: 1.4rem;
          font-family: var(--font-roboto);
          @media screen and (max-width: 768px) {
            font-size: 1.2rem;
          }
          &::before{
            content: "⚫︎";
            font-size: 1em;
            color: var(--main);
            line-height: 0.5;
          }
        }
        h2{
          font-size: 3.8rem;
          font-weight: 600;
          line-height: 1.35;
          margin-top: 1rem;
          @media screen and (max-width: 768px) {
            font-size: 2.4rem;
          }
          span{
            font-size: 1.5em;
          }
        }
      }

      .contents-inner{
        height: 100%;
      }
      
      .skills-wrap{
        padding-block: 8rem 9rem;
        height: 100%;
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 768px) {
          padding-block: 8rem 5rem;
          display: block;
        }
        .text-wrap{
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .readText{
            width: 30rem;
            margin-top: 4rem;
            @media screen and (max-width: 768px) {
              width: 100%;
              margin-top: 3rem;
            }
          }
        }
        .figure-wrap{
          --c01: #ff6200;
          --c02: #ff843a;
          --c03: #f29a6d;
          --c04: #f2ba9e;
          flex-shrink: 0;
          width: 55rem;
          height: 55rem;
          margin-block: auto;
          position: relative;
          color: #fff;
          text-align: center;
          @media screen and (max-width: 768px) {
            width: 100%;
            height: calc(100vw - 3rem);
            margin-top: 4rem;
          }
          .circle{
            width: 100%;
            height: 100%;
            div{
              position: absolute;
              width: 50%;
              aspect-ratio: 1;
              border-radius: 50%;
            }
            .circle01{
              background-color: var(--c01);
              top: 0;
              left: 25%;
            }
            .circle02{
              background-color: var(--c02);
              top: 25%;
              right: 0;
            }
            .circle03{
              background-color: var(--c03);
              bottom: 0;
              left: 25%;
            }
            .circle04{
              background-color: var(--c04);
              top: 25%;
              left: 0;
            }
            .half04{
              background-color: var(--c04);
              top: 25%;
              left: 0;
              clip-path: inset(0 0 50% 0);
            }
          }
          ul{
            position: absolute;
            inset: 0;
            height: 100%;
            width: 100%;
            li{
              position: absolute;
              width: 50%;
              aspect-ratio: 1;
              display: grid;
              place-content: center;
              .num{
                font-size: 2.8rem;
                font-family: var(--font-oswald);
                padding-bottom: 0.8rem;
                position: relative;
                @media screen and (max-width: 768px) {
                  font-size: 1.6rem;
                }
                &::after{
                  content: "";
                  display: block;
                  position: absolute;
                  background-color: currentColor;
                  width: 1rem;
                  height: 2px;
                  bottom: 0;
                  left: calc(50% - 0.5rem);
                }
              }
              .text{
                font-size: 1.6rem;
                font-weight: 600;
                line-height: 1.5;
                margin-top: 0.8rem;
                @media screen and (max-width: 768px) {
                  font-size: 1.3rem;
                }
              }
            }
            .item01{
              top: 0;
              left: 25%;
              padding-bottom: 5rem;
              @media screen and (max-width: 768px) {
                padding-bottom: 4rem;
              }
            }
            .item02{
              top: 25%;
              right: 0;
              padding-bottom: 3rem;
              @media screen and (max-width: 768px) {
                padding-bottom: 2rem;
              }
            }
            .item03{
              bottom: 0;
              left: 25%;
              padding-bottom: 2rem;
              @media screen and (max-width: 768px) {
                padding-bottom: 1rem;
              }
            }
            .item04{
              top: 25%;
              left: 0;
              padding-bottom: 3rem;
              @media screen and (max-width: 768px) {
                padding-bottom: 2rem;
              }
            }
          }
        }
      }

      .fc-wrap{
        padding-block: 8rem 3rem;
        @media screen and (max-width: 768px) {
          padding-block: 4rem;
        }
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100%;
        min-height: 0;
        @media screen and (max-width: 768px) {
          display: block;
        }
        .title{
          padding-bottom: 2rem;
          @media screen and (max-width: 768px) {
            padding-bottom: 3rem;
          }
        }
        .card-grid{
          margin-right: calc((300% + 15rem) * -1);
          display: grid;
          grid-template-columns: repeat(4,1fr);
          gap: 5rem;
          height: 100%;
          min-height: 0;
          @media screen and (max-width: 768px) {
            display: block;
            margin-right: 0;
            height: auto;
          }
        }
        .card{
          width: 100%;
          height: 100%;
          overflow: hidden;
          border-radius: 2rem;
          background-color: #fff;
          display: grid;
          grid-template-columns: 43rem 1fr;
          padding-inline: 4rem;
          min-height: 0;
          @media screen and (max-width: 768px) {
            display: block;
            padding: 2rem;
            &+ .card{
              margin-top: 3rem;
            }
          }
          .image-wrap{
            padding-block: 4rem 3.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 0;
            @media screen and (max-width: 768px) {
              padding-block: 0;
            }
            .num{
              font-size: 3.4rem;
              font-family: var(--font-oswald);
              color: var(--sub);
              font-weight: 700;
              @media screen and (max-width: 768px) {
                font-size: 2.4rem;
              }
              span{
                font-size: 0.5em;
                @media screen and (max-width: 768px) {
                  font-size: 0.75em;
                }
              }
            }
            img{
              width: calc(var(--iw) * 0.1rem);
              margin-inline: auto;
              @media screen and (max-width: 768px) {
                width: calc(var(--iw) * 0.06rem);
                margin-block: 2rem;
              }
            }
            h3{
              font-size: 3.8rem;
              font-weight: 600;
              line-height: 1.45;
              font-feature-settings: "palt";
              letter-spacing: 0.05em;
              @media screen and (max-width: 768px) {
                font-size: 2.4rem;
              }
              span{
                color: var(--main);
              }
            }
          }
          .text-wrap{
            overflow-y: auto;
            /* overscroll-behavior: contain; */
            height: 100%;
            min-height: 0;
            @media screen and (max-width: 768px) {
              height: auto;
            }
            .hd{
              padding-top: 4rem;
              font-size: 2.1rem;
              font-weight: 500;
              padding-bottom: 2rem;
              border-bottom: max(0.1rem,1px) solid var(--pale);
              @media screen and (max-width: 768px) {
                padding-top: 0;
                margin-top: 3rem;
                font-size: 1.8rem;
                line-height: 1.5;
                padding-bottom: 1rem;
              }
            }
            .readText{
              margin-top: 2rem;
              font-size: 1.4rem;
              line-height: 1.7;
              font-feature-settings: "palt";
              letter-spacing: 0.02em;
              .caption{
                font-size: 0.875em;
              }
            }
            .list{
              display: flex;
              gap: 1rem;
              flex-wrap: wrap;
              background-color: var(--pale);
              border-radius: 2rem;
              padding: 2rem 2.5rem 3rem;
              position: relative;
              overflow: hidden;
              margin-top: 3rem;
              margin-bottom: 3rem;
              @media screen and (max-width: 768px) {
                border-radius: 1rem;
                margin-bottom: 0;
                margin-top: 3rem;
                padding: 2rem 1.5rem 4rem;
              }
              p{
                font-size: 1.2rem;
                display: inline-block;
                padding: 0.5rem 0.8rem;
                background-color: #fff;
                position: relative;
                @media screen and (max-width: 768px) {
                  font-size: 1.2rem;
                  line-height: 1.4;
                }
                span{
                  font-size: 0.875em;
                }
              }
              &::before{
                content: "KEYWORD";
                font-family: var(--font-roboto);
                font-size: 5rem;
                font-weight: 700;
                color: var(--sub);
                position: absolute;
                opacity: 0.15;
                bottom: 0;
                right: 0;
                line-height: 0.7;
                @media screen and (max-width: 768px) {
                  font-size: 3.2rem;
                }
              }
            }
          }
        }
        .indicator{
          --choices-indicator-progress: 0;
          margin-inline: 1.5rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 2rem;
          position: relative;
          @media screen and (max-width: 768px) {
            display: none;
          }
          &::before,
          &::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            left: 0;
            top: calc(50% - 0.5px);
          }

          &::before{
            background-image: linear-gradient(to right, #fff 50%, transparent 50%);
            background-repeat: repeat-x;
            background-size: 8px 1px;
            background-position: 0% 0%;
          }
          &::after{
            background-color: #fff;
            transform-origin: left;
            transform: scaleX(var(--choices-indicator-progress));
          }
          .point{
            width: 1rem;
            aspect-ratio: 1;
            background-color: #fff;
            border-radius: 50%;
          }
        }
      }
      &[data-scroll="hidden"]{
        animation: section-hidden 0.8s cubic-bezier(0,.2,.2,1) forwards;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        @media screen and (max-width: 768px) {
          animation: section-shown 0.8s cubic-bezier(0,.2,.2,1) forwards;
          pointer-events: auto;
          opacity: 1;
          visibility: visible;
        }
      }
      &[data-scroll="shown"]{
        animation: section-shown 0.8s cubic-bezier(0,.2,.2,1) forwards;
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
      }
      &.skills[data-scroll="shown"]{
        .circle01,
        .item01{
          animation: skill-01 1s cubic-bezier(.43,.02,.26,1) forwards;
        }
        .circle02,
        .item02{
          animation: skill-02 1s cubic-bezier(.43,.02,.26,1) forwards;
        }
        .circle03,
        .item03{
          animation: skill-03 1s cubic-bezier(.43,.02,.26,1) forwards;
        }
        .circle04,
        .half04,
        .item04{
          animation: skill-04 1s cubic-bezier(.43,.02,.26,1) forwards;
        }
      }
      @media screen and (max-width: 768px) {
        &.skills.shown{
          .circle01,
          .item01{
            animation: skill-01 1s cubic-bezier(.43,.02,.26,1) forwards;
          }
          .circle02,
          .item02{
            animation: skill-02 1s cubic-bezier(.43,.02,.26,1) forwards;
          }
          .circle03,
          .item03{
            animation: skill-03 1s cubic-bezier(.43,.02,.26,1) forwards;
          }
          .circle04,
          .half04,
          .item04{
            animation: skill-04 1s cubic-bezier(.43,.02,.26,1) forwards;
          }
        }
      }
    }

    .scroll-section{
      height: 100dvh;
      @media screen and (max-width: 768px) {
        display: none;
      }
      &.half{
        height: 20rem;
      }
    }
  }

  .fc-interview{
    margin-top: 14rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
    }
    .thum-wrap{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 4rem;
      width: fit-content;
      margin-inline: auto;
      @media screen and (max-width: 768px) {
        display: block;
      }
    }
    button{
      width: 53rem;
      position: relative;
      border-left: max(0.8rem,8px) solid var(--main);
      box-sizing: border-box;
      @media screen and (max-width: 768px) {
        width: 100%;
        &+ button{
          margin-top: 3rem;
        }
      }
      @media (any-hover: hover) {
        &:hover{
          .icon{
            color: var(--main);
          }
        }
      }
      .image{
        position: relative;
      }
      .title{
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 2.5rem;
        padding-left: 3rem;
        @media screen and (max-width: 768px) {
          padding-top: 2rem;
          padding-left: 2rem;
        }
        .en{
          font-family: var(--font-roboto);
          font-size: 6.8rem;
          font-weight: 700;
          line-height: 1;
          @media screen and (max-width: 768px) {
            font-size: 4rem;
          }
        }
        .ja{
          font-size: 2.1rem;
          font-weight: 600;
          margin-top: 1.5rem;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
            margin-top: 1rem;
          }
        }
      }
      .icon{
        width: 8.8rem;
        aspect-ratio: 1;
        border-radius: 50%;
        border: max(0.1rem,1px) solid currentColor;
        display: grid;
        place-content: center;
        color: #fff;
        position: absolute;
        left: calc(50% - 4.4rem);
        top: 50%;
        @media screen and (max-width: 768px) {
          width: 6rem;
        }
        span{
          font-size: 2rem;
          display: inline-block;
          padding-left: 0.2em;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
          }
        }
      }
      .profile{
        position: absolute;
        bottom: 0;
        left: 0;
        padding-left: 3rem;
        padding-bottom: 2.5rem;
        @media screen and (max-width: 768px) {
          padding-left: 2rem;
          padding-bottom: 2rem;
        }
        .store{
          display: inline-block;
          padding: 0.4rem 1rem;
          background-color: #fff;
          font-weight: 600;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
        }
        .name{
          font-size: 2.8rem;
          font-weight: 600;
          color: #fff;
          font-family: var(--font-roboto);
          margin-top: 1rem;
        }
      }
    }
  }

  .independence{
    margin-top: 16rem;
    padding-bottom: 16rem;
    @media screen and (max-width: 768px) {
      margin-top: 4rem;
      padding-bottom: 5rem;
    }
    .title{
      position: relative;
      text-align: center;
      .en{
        font-family: var(--font-roboto);
        font-size: 14.8rem;
        font-weight: 700;
        font-style: italic;
        color: var(--pale);
        @media screen and (max-width: 768px) {
          font-size: 4.4rem;
        }
      }
      h2{
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        font-size: 3.8rem;
        font-weight: 600;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }
      }
    }
    .readText{
      margin-top: 2rem;
      border-top: max(0.1rem,1px) solid var(--pale);
      padding-top: 3rem;
      @media screen and (max-width: 768px) {
        padding-top: 2rem;
      }
    }
  }
}

@keyframes text-slide{
  from{transform: translateX(0);}
  to{transform: translateX(-100%);}
}
@keyframes section-hidden{
  from{transform: translateY(0); opacity: 1; visibility: visible;}
  to{transform: translateY(-4rem); opacity: 0; visibility: hidden;}
}
@keyframes section-shown{
  from{transform: translateY(4rem); opacity: 0;}
  to{transform: translateY(0); opacity: 1;}
}
@keyframes skill-01{
  from{transform: translate(-2rem,-6rem);}
  to{transform: translate(0,0);}
}
@keyframes skill-02{
  from{transform: translate(6rem,-2rem);}
  to{transform: translate(0,0);}
}
@keyframes skill-03{
  from{transform: translate(2rem,6rem);}
  to{transform: translate(0,0);}
}
@keyframes skill-04{
  from{transform: translate(-6rem,2rem);}
  to{transform: translate(0,0);}
}


.choices-video-popover{
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 8rem);
  background-color: rgba(0,0,0,0.82);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--default-timing-function), visibility 0.25s step-end;
  &.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s var(--default-timing-function), visibility 0s step-start;
  }
  .choices-video-popover__player{
    width: min(112rem, 100%);
    aspect-ratio: 16 / 9;
    background-color: #000;
  }
  video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/*------------------------------
  MARK:#DATA
------------------------------*/
.page-data {
  overflow-x: hidden;
  .subpage-mv{
    padding-bottom: 0;
    .inner{
      display: flex;
      justify-content: space-between;
      @media screen and (max-width: 768px) {
      }
      img{
        width: 69rem;
        margin-top: -5rem;
        margin-right: 5rem;
        @media screen and (max-width: 768px) {
          width: 60%;
          margin-right: -4rem;
          margin-top: -2rem;
        }
      }
    }
  }
  .data{
    padding-block: 13rem 12rem;
    @media screen and (max-width: 768px) {
      padding-block: 4rem;
    }
    /* 背景線 */
    background-color: var(--pale);
    background-image: linear-gradient(
      to right,
      transparent 0% calc(3.125% - 0.5px),
      #fff calc(3.125% - 0.5px) calc(3.125% + 0.5px),
      transparent calc(3.125% + 0.5px) calc(18.75% - 0.5px),
      #fff calc(18.75% - 0.5px) calc(18.75% + 0.5px),
      transparent calc(18.75% + 0.5px) calc(34.375% - 0.5px),
      #fff calc(34.375% - 0.5px) calc(34.375% + 0.5px),
      transparent calc(34.375% + 0.5px) calc(50% - 0.5px),
      #fff calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px) calc(65.625% - 0.5px),
      #fff calc(65.625% - 0.5px) calc(65.625% + 0.5px),
      transparent calc(65.625% + 0.5px) calc(81.25% - 0.5px),
      #fff calc(81.25% - 0.5px) calc(81.25% + 0.5px),
      transparent calc(65.625% + 0.5px) calc(96.875% - 0.5px),
      #fff calc(96.875% - 0.5px) calc(96.875% + 0.5px),
      transparent calc(96.875% + 0.5px) 100%
    );
    .data-grid{
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-template-rows: repeat(13,11rem);
      gap: 2.5rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7,auto);
        gap: 1.5rem;
      }
      .data-item{
        background-color: #fff;
        position: relative;
        &.item01{grid-area: 1 / 1 / 5 / 3; @media screen and (max-width: 768px) {grid-area: 1 / 1 / 2 / 2;}}
        &.item02{grid-area: 1 / 3 / 3 / 5; @media screen and (max-width: 768px) {grid-area: 3 / 1 / 4 / 2;}}
        &.item03{grid-area: 3 / 3 / 7 / 5; @media screen and (max-width: 768px) {grid-area: 4 / 1 / 5 / 2;}}
        &.item04{grid-area: 5 / 1 / 7 / 3; @media screen and (max-width: 768px) {grid-area: 2 / 1 / 3 / 2;}}
        &.item05{grid-area: 7 / 1 / 11 / 3; @media screen and (max-width: 768px) {grid-area: 5 / 1 / 6 / 2;}}
        &.item06{grid-area: 7 / 3 / 11 / 5; @media screen and (max-width: 768px) {grid-area: 6 / 1 / 7 / 2;}}
        &.item07{grid-area: 11 / 1 / 14 / 5; @media screen and (max-width: 768px) {grid-area: 7 / 1 / 8 / 2;}}
        &.align-end{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
        }
        img{
          width: calc(var(--iw) * 0.1rem);
          @media screen and (max-width: 768px) {
            width: calc(var(--iw) * 0.06rem);

          }
        }
        .num{
          gap: 0.5rem;
          display: flex;
          align-items: flex-end;
          span{
            font-size: calc(var(--fz) * 0.1rem);
            display: inline-block;
            @media screen and (max-width: 768px) {
              font-size: calc(var(--fz) * 0.06rem);
            }
          }
        }
        .count{
          font-family: var(--font-oswald);
          font-weight: 600;
          line-height: 0.95;
          letter-spacing: 0.05em;
          width: calc(var(--ch) * 1ch);
          text-align: right;
        }
        .unit{
          font-weight: 700;
        }
      }
      h3{
        position: absolute;
        top: 2.5rem;
        left: 3rem;
        display: flex;
        column-gap: 0.6rem;
        line-height: 1.4;
        font-size: 2.1rem;
        font-weight: 600;
        @media screen and (max-width: 768px) {
          font-size: 1.6rem;
          top: 1.5rem;
          left: 2rem;
        }
        &::before{
          content: "●";
          color: var(--main);
          padding-top: 0.15em;
          font-size: 0.8em;
        }
      }
      .item01{
        padding-bottom: 5rem;
        @media screen and (max-width: 768px) {
          padding-top: 8rem;
          padding-bottom: 4rem;
        }
        .num{
          margin-top: 9rem;
          @media screen and (max-width: 768px) {
            margin-top: 2rem;
          }
        }
      }
      .item02{
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 5rem;
        padding-top: 4rem;
        @media screen and (max-width: 768px) {
          column-gap: 3rem;
          padding-top: 6rem;
          padding-bottom: 3rem;
        }
        .num{
          position: relative;
          margin-bottom: 3rem;
          @media screen and (max-width: 768px) {
            margin-bottom: 2rem;
          }
          p{
            position: absolute;
            top: 120%;
            left: 0;
            color: var(--sub);
            font-weight: 600;
            font-feature-settings: "palt";
            @media screen and (max-width: 768px) {
              font-size: 1.2rem;
              top: 110%;
            }
          }
        }
      }
      .item03{
        padding-bottom: 4rem;
        @media screen and (max-width: 768px) {
          padding-top: 8rem;
          padding-bottom: 2rem;
        }
        .image-wrap{
          position: relative;
          width: 35rem;
          @media screen and (max-width: 768px) {
            width: 70%;
          }
          img{
            margin-inline: auto 0;
          }
          p{
            position: absolute;
            left: 0;
            top: 0;
            font-size: 4.8rem;
            font-weight: 700;
            @media screen and (max-width: 768px) {
              font-size: 3rem;
            }
            span{
              font-size: 0.6em;
            }
          }
        }
        .area{
          line-height: 1.5;
          font-feature-settings: "palt";
          text-align: center;
          margin-top: 4rem;
          @media screen and (max-width: 768px) {
            margin-top: 3rem;
            font-size: 1.1rem;
          }
        }
      }
      .item04{
        padding-top: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 6rem;
        @media screen and (max-width: 768px) {
          column-gap: 3rem;
          padding-top: 6rem;
          padding-bottom: 3rem;
        }
      }
      .item05,
      .item06{
        padding-bottom: 6rem;
        @media screen and (max-width: 768px) {
          padding-top: 7rem;
          padding-bottom: 3rem;
        }
        .num{
          margin-top: 4rem;
          margin-left: 4rem;
          @media screen and (max-width: 768px) {
            margin-top: 2rem;
            margin-left: 2rem;
          }
        }
      }
      .item07{
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 8rem;
        padding-top: 2rem;
        @media screen and (max-width: 768px) {
          display: block;
          padding-top: 8rem;
          padding-bottom: 4rem;
          &> img{
            margin-inline: auto;
          }
        }
        .text-wrap{
          display: flex;
          @media screen and (max-width: 768px) {
            justify-content: center;
            margin-top: 2rem;
          }
          .text{
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-right: 2rem;
            @media screen and (max-width: 768px) {
              margin-inline: 1rem;
            }
            p{
              font-size: 1.8rem;
              font-weight: 600;
              line-height: 1.5;
              @media screen and (max-width: 768px) {
                font-size: 1.2rem;
              }
            }
          }
        }
        .num{
          position: relative;
          p{
            position: absolute;
            top: 120%;
            left: 0;
            color: var(--sub);
            font-weight: 600;
            font-feature-settings: "palt";
            @media screen and (max-width: 768px) {
              font-size: 1.2rem;
              top: 110%;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }

  .questionnaire{
    padding-block: 15rem;
    @media screen and (max-width: 768px) {
      padding-block: 4rem 6rem;
    }
    .questionnaire-container{
      @media screen and (max-width: 768px) {
        display: grid;
        grid-template-columns: 1fr;
      }
    }
    .questionnaire-hd{
      position: relative;
      text-align: center;
      .en{
        font-family: var(--font-roboto);
        font-size: 14rem;
        font-weight: 700;
        font-style: italic;
        color: var(--pale);
        @media screen and (max-width: 768px) {
          font-size: 4.4rem;
        }
      }
      h2{
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        font-size: 3rem;
        font-weight: 700;
        color: var(--main);
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
        }

      }
    }
    .q-wrap{
      margin-top: 8rem;
      border-bottom: max(0.1rem,1px) solid var(--sub);
      @media screen and (max-width: 768px) {
        border-bottom: none;
        margin-top: 0;
        display: contents !important;
      }
      &.wrap01{
        display: flex;
        justify-content: space-between;
      }
      &.wrap02{
        display: flex;
        justify-content: space-between;
      }
      &.wrap03{
        display: flex;
        justify-content: space-between;
      }
      &.wrap05{
        display: flex;
        justify-content: space-between;
        padding-bottom: 7rem;
      }
      .q-column01{
        width: 48.5rem;
        @media screen and (max-width: 768px) {
          display: contents;
        }
      }
      .q-column02{
        width: 54rem;
        @media screen and (max-width: 768px) {
          display: contents;
        }
      }
    }
    .q-item{
      @media screen and (max-width: 768px) {
        border-bottom: max(0.1rem,1px) solid var(--sub);
        margin-top: 3rem;
        padding-bottom: 3rem;
      }
    }
    .q-hd{
      position: relative;
      font-size: 1.8rem;
      font-weight: 500;
      border-bottom: 0.4rem solid var(--main);
      width: fit-content;
      span{
        font-family: var(--font-outfit);
        font-size: 4rem;
        font-weight: 500;
        color: var(--main);
        display: inline-block;
        margin-right: 1rem;
        @media screen and (max-width: 768px) {
          font-size:3.6rem ;
        }
      }
      p{
        display: inline-block;
        font-size: 1.8rem;
        font-feature-settings: "palt";
        @media screen and (max-width: 768px) {
          line-height: 1.3;
        }
      }
      &::before{
        content: "";
        width: 1.2rem;
        height: 0.8rem;
        background-color: var(--main);
        position: absolute;
        top: calc(99% + 0.4rem);
        left: 7rem;
        clip-path: polygon(0 0, 80% 0, 90% 100%);
      }
    }
    img{
      width: calc(var(--iw) * 0.1rem);
      @media screen and (max-width: 768px) {
        width: calc(var(--iw) * 0.06rem);
      }
    }
    .item01{
      padding-bottom: 10rem;
      @media screen and (max-width: 768px) {
        padding-bottom: 5rem;
      }
      .image-wrap{
        margin-top: 6rem;
        position: relative;
        @media screen and (max-width: 768px) {
          margin-top: 3rem;
        }
        img{
          position: relative;
        }
        img:first-child{
          position: absolute;
          top: -0.5rem;
          right: 12.5rem;
          @media screen and (max-width: 768px) {
            top: -0.2rem;
            right: 7rem;
          }
        }
      }
    }
    .item02{
      position: relative;
      padding-bottom: 6rem;
      padding-right: 12rem;
      @media screen and (max-width: 768px) {
        padding-bottom: 4rem;
        padding-right: 4rem;
      }
      .image-wrap{
        margin-top: 5rem;
        position: relative;
        z-index: 1;
        img{
          position: relative;
        }
        img:first-child{
          position: absolute;
          top: 5rem;
          left: 8.8rem;
          @media screen and (max-width: 768px) {
            width: 16rem;
            top: 4.5rem;
            left: 7rem;
          }
        }
        img:nth-child(2){
          @media screen and (max-width: 768px) {
            width: 32rem;
          }
        }
      }
      .trainer{
        position: absolute;
        bottom: 0;
        right: -4rem;
        @media screen and (max-width: 768px) {
          width: 18rem;
          right: -5rem;
          z-index: 0;
        }
      }
    }
    .item03{
      padding-bottom: 8rem;
      border-bottom: max(0.1rem,1px) solid var(--sub);
      @media screen and (max-width: 768px) {
        padding-bottom: 4rem;
      }
      img{
        width: 100%;
        margin-top: 4rem;
      }
    }
    .item05{
      margin-top: 5rem;
      position: relative;
      padding-bottom: 4rem;
      @media screen and (max-width: 768px) {
        grid-row: 5/6;
      }
      .list-hd{
        display: flex;
        align-items: center;
        font-size: 2.6rem;
        font-weight: 600;
        column-gap: 0.5rem;
        margin-top: 5rem;
        @media screen and (max-width: 768px) {
          font-size: 2rem;
        }
        &::before{
          content: "●";
          color: var(--main);
          font-size: 0.7em;
        }
      }
      .list-wrap{
        display: flex;
        flex-wrap: wrap;
        gap: 1.8rem;
        margin-top: 2rem;
        @media screen and (max-width: 768px) {
          gap: 1.5rem;
        }
        li{
          display: inline-block;
          background-color: var(--pale);
          font-size: 1.8rem;
          font-weight: 500;
          padding: 0.8rem 1.5rem;
          @media screen and (max-width: 768px) {
            font-size: 1.6rem;
            &:nth-child(7){
              order: -5;
            }
          }
        }
      }
      .trainer{
        position: absolute;
        right: -7rem;
        top: -9.9rem;
        @media screen and (max-width: 768px) {
          right: -3rem;
          top: -1.1rem;
        }
      }
    }
    .item04{
      padding-bottom: 7rem;
      border-bottom: max(0.1rem,1px) solid var(--sub);
      @media screen and (max-width: 768px) {
        padding-bottom: 3rem;
      }
      .list-wrap{
        margin-top: 4rem;
        display: grid;
        grid-template-columns: repeat(3,auto);
        grid-template-rows: repeat(7,auto);
        grid-auto-flow: column;
        gap: 2rem;
        @media screen and (max-width: 768px) {
          grid-template-columns: repeat(2,1fr);
          grid-template-rows: repeat(11,auto);
          gap: 1.5rem;
        }
        li{
          font-size: 1.8rem;
          font-weight: 500;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
          span{
            font-size: 1.4rem;
            color: var(--sub);
            font-feature-settings: "palt";
            @media screen and (max-width: 768px) {
              font-size: 1.1rem;
            }
          }
          &::before{
            content: "";
            display: inline-block;
            width: 0.5em;
            height: 0.5em;
            margin-bottom: 0.15em;
            margin-right: 0.5em;
            border: max(0.1rem, 1px) solid var(--main);
            @media screen and (max-width: 768px) {
              margin-right: 0.2em;
            }
          }
          br + span{
            padding-left: 1.8rem;
            @media screen and (max-width: 768px) {
              padding-left: 0.8rem;
            }
          }
        }
      }
      img{
        width: 100%;
        margin-top: 4rem;
        @media screen and (max-width: 768px) {
          margin-top: 3rem;
        }
      }
    }
    .item06{
      margin-top: 7rem;
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
        padding-bottom: 0;
      }
      .image-wrap{
        position: relative;
        height: 32rem;
        margin-top: 7rem;
        @media screen and (max-width: 768px) {
          height: 18rem;
          margin-top: 4rem;
        }
        img{
          &:first-child{
            position: relative;
            margin-left: 8rem;
            @media screen and (max-width: 768px) {
              margin-left: 7rem;
            }
          }
          &:nth-child(2){
            position: absolute;
            bottom: 0;
            left: -12rem;
            @media screen and (max-width: 768px) {
              left: -6rem;
            }
          }
          &:nth-child(3){
            position: absolute;
            bottom: 0;
            right: 1rem;
            @media screen and (max-width: 768px) {
              right: 0;
            }
          }
        }
      }
    }
    .item07{
      .image-wrap{
        position: relative;
        margin-top: 4rem;
        img{
          position: relative;
          &:first-child{
            position: absolute;
            top: 10rem;
            left: 12rem;
            @media screen and (max-width: 768px) {
              top: 7.5rem;
              left: 9rem;
              width: 16rem;
            }
          }
          &:nth-child(2){
            @media screen and (max-width: 768px) {
              width: 100%;
            }
          }
        }
      }
    }
    .item08{
      @media screen and (max-width: 768px) {
        padding-bottom: 0;
      }
      .image-wrap{
        position: relative;
        margin-top: 1rem;
        padding-bottom: 7rem;
        @media screen and (max-width: 768px) {
          margin-top: 3rem;
          padding-bottom: 5.5rem;
        }
        img{
          position: relative;
          &:first-child{
            position: absolute;
            bottom: 0;
            left: 14rem;
            @media screen and (max-width: 768px) {
              left: 7rem;
            }
          }
        }
      }
    }
    .item09{
      padding-bottom: 7rem;
      @media screen and (max-width: 768px) {
        padding-bottom: 4rem;
      }
      img{
        width: 100%;
        margin-top: 5rem;
        @media screen and (max-width: 768px) {
          margin-top: 3rem;
        }
      }
    }

    .image-9-10{
      @media screen and (max-width: 768px) {
        margin-top: 3rem;
        width: 100%;
      }
    }
    .item10{
      width: 47rem;
      padding-right: 6rem;
      @media screen and (max-width: 768px) {
        width: 100%;
        padding-right: 0;
      }
      .q-row{
        display: flex;
        justify-content: space-between;
        margin-top: 4rem;
        &+ .q-row{
          margin-top: 2.5rem;
        }
        img{
          align-self: center;
          @media screen and (max-width: 768px) {
            width: 40%;
          }
        }
        .num{
          gap: 0.5rem;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
          span{
            font-size: calc(var(--fz) * 0.1rem);
            display: inline-block;
            @media screen and (max-width: 768px) {
              font-size: calc(var(--fz) * 0.075rem);
            }
          }
        }
        .count{
          font-family: var(--font-oswald);
          font-weight: 600;
          line-height: 0.95;
          letter-spacing: 0.02em;
        }
        .unit{
          font-weight: 700;
        }
      }
    }

    .item11,
    .item12{
      width: 80rem;
      height: 39rem;
      margin-inline: auto;
      border-radius: 100vmax;
      background-color: var(--pale);
      position: relative;
      @media screen and (max-width: 768px) {
        width: 100%;
        height: auto;
        border-radius: 0;
        background-color: transparent;
        picture{
          position: absolute;
          z-index: 1;
          max-width: none;
          width: calc(100% + 3rem);
          left: -1.5rem;
          bottom: 0;
        }
      }
      .hd{
        font-weight: 500;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        text-align: center;
        @media screen and (max-width: 768px) {
          font-size: 1.8rem;
          border-bottom: 0.4rem solid var(--main);
          position: relative;
          width: fit-content;
          height: auto;
          display: block;
          text-align: left;
          &::before{
            content: "";
            width: 1.2rem;
            height: 0.8rem;
            background-color: var(--main);
            position: absolute;
            top: calc(99% + 0.4rem);
            left: 7rem;
            clip-path: polygon(0 0, 80% 0, 90% 100%);
          }
        }
        span{
          font-family: var(--font-outfit);
          font-size: 2.8rem;
          font-weight: 500;
          color: var(--sub);
          display: block;
          @media screen and (max-width: 768px) {
            color: var(--main);
            display: inline-block;
            margin-right: 1rem;
            font-size: 3.6rem ;
          }
        }
        p{
          color: var(--main);
          font-size: 3.2rem;
          font-weight: 500;
          line-height: 1.4;
          margin-top: 1.5rem;
          @media screen and (max-width: 768px) {
            display: inline-block;
            font-size: 1.8rem;
            font-weight: 400;
            color: var(--black);
            font-feature-settings: "palt";
            line-height: 1.3;
            margin-top: 0;
          }
        }
      }
      .layer{
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        @media screen and (max-width: 768px) {
          position: relative;
          z-index: 0;
          height: auto;
        }
        img{
          position: absolute;
          @media screen and (max-width: 768px) {
            position: static;
            width: calc(var(--iw) * 0.085rem);
          }
        }
      }
    }
    .item11{
      margin-block: 25rem 0;
      @media screen and (max-width: 768px) {
        margin-block: 4rem 0;
        padding-bottom: 28rem;
        .layer{
          img{
            margin-top: -2rem;
          }
        }
        .layer.back{
          margin-top: 6rem;
          img:nth-child(2n){
            margin-inline: auto 0;
          }
        }
        .layer.middle{
          img:nth-child(2n + 1){
            margin-inline: auto 0;
          }
        }
        .layer.front{
          img:nth-child(2n){
            margin-inline: auto 0;
          }
        }
      }
      .q11-01{ top: -18rem; left: 55.6rem; }
      .q11-02{ top: -17.6rem; left: -8rem; }
      .q11-03{ top: -16.6rem; left: 27rem; }
      .q11-04{ top: -6rem; left: 12.4rem; }
      .q11-05{ top: -5rem; left: 65.7rem; }
      .q11-06{ top: -1.8rem; left: -21.6rem; }
      .q11-07{ top: -2.4rem; left: 47.5rem; }
      .q11-08{ top: 7rem; left: -10rem; }
      .q11-09{ top: 7rem; left: 71.5rem; }
      .q11-10{ top: 22.4rem; left: -13.7rem; }
      .q11-11{ top: 23rem; left: 77.5rem; }
      .q11-12{ top: 33.5rem; left: 6.7rem; }
      .q11-13{ top: 33rem; left: 60rem; }
      .q11-14{ top: 35rem; left: -22rem; }
      .q11-15{ top: 38rem; left: 31rem; }
      .q11-16{ top: 42rem; left: 76rem; }
      .q11-17{ top: 45rem; left: -3rem; }
      .q11-18{ top: 48rem; left: 25rem; }
      .q11-19{ top: 47rem; left: 52rem; }
    }
    .item12{
      margin-block: 60rem 20rem;
      @media screen and (max-width: 768px) {
        margin-block: 4rem 0;
        padding-bottom: 29rem;
        .layer{
          img{
            margin-top: -1rem;
          }
        }
        .layer.back{
          margin-top: 6rem;
          img:nth-child(2n){
            margin-inline: auto 0;
          }
        }
        .layer.middle{
          img:nth-child(2n + 1){
            margin-inline: auto 0;
          }
        }
        .layer.front{
          img:nth-child(2n){
            margin-inline: auto 0;
          }
        }
      }
      .q12-01{ top: -25rem; left: 49rem; }
      .q12-02{ top: -24rem; left: -2rem; }
      .q12-03{ top: -16rem; left: 25rem; }
      .q12-04{ top: -14.5rem; left: 70rem; }
      .q12-05{ top: -7rem; left: 10.5rem; }
      .q12-06{ top: -6rem; left: 47rem; }
      .q12-07{ top: 0.6rem; left: -15rem; }
      .q12-08{ top: 1.2rem; left: 74rem; }
      .q12-09{ top: 18rem; left: -22rem; }
      .q12-10{ top: 20rem; left: 74rem; }
      .q12-11{ top: 35rem; left: 17.3rem; }
      .q12-12{ top: 38rem; left: -22rem; }
      .q12-13{ top: 37.5rem; left: 60rem; }
      .q12-14{ top: 46rem; left: 8rem; }
      .q12-15{ top: 46rem; left: 42rem; }
    }
  }
}