@charset "UTF-8";
/*------------------------------
  フロントページ（/）
------------------------------*/

@keyframes text-in{
  from{transform: translateY(110%);}
  to{transform: translateY(0%);}
}

@keyframes copy-in{
  from{opacity: 0;}
  to{opacity: 1;}
}

@keyframes image-in{
  from{transform: translateX(0);}
  to{transform: translateX(-5rem);}
}

@keyframes image-out{
  from{transform: translateX(-5rem);}
  to{transform: translateX(-8rem);}
}

@keyframes hidden{
  from{opacity: 1;}
  to{opacity: 0;}
}

@keyframes mask-in{
  from{transform: translateX(0);}
  to{transform: translateX(3rem);}
}

@keyframes mask-out{
  from{transform: translateX(3rem);}
  to{transform: translateX(6rem);}
}

@keyframes mask-in-sp{
  from{transform: translateX(0);}
  to{transform: translateX(1rem);}
}

@keyframes mask-out-sp{
  from{transform: translateX(1rem);}
  to{transform: translateX(2rem);}
}

@keyframes to-orange{
  from{
    --grade01: #5096d3;
    --grade02: #0dd7e4;
    --grade03: #dbfcff;
  }
  to{
    --grade01: #ec5900;
    --grade02: #ecb700;
    --grade03: #ffedbd;
  }
}

@keyframes to-blue{
  from{
    --grade01: #ec5900;
    --grade02: #ecb700;
    --grade03: #ffedbd;
  }
  to{
    --grade01: #5096d3;
    --grade02: #0dd7e4;
    --grade03: #dbfcff;
  }
}
@keyframes aboutusSlideshow{
  0%{ opacity: 0; }
  6.66%{ opacity: 1; }
  33.33%{ opacity: 1; }
  40%{ opacity: 0; }
  100%{ opacity: 0; }
}
@keyframes flicker{
  0%{  opacity: 0; }
  6.25%{  opacity: 0.55; }
  12.5%{  opacity: 0.29; }
  18.75%{  opacity: 0.93; }
  25%{  opacity: 1; }
  31.25%{  opacity: 0.8; }
  37.5%{  opacity: 0.1; }
  43.75%{  opacity: 0.99; }
  50%{  opacity: 0.11; }
  56.25%{  opacity: 0.72; }
  62.5%{  opacity: 0.93; }
  68.75%{  opacity: 0.38; }
  75%{  opacity: 0.1; }
  81.25%{  opacity: 0.19; }
  87.5%{  opacity: 0.38; }
  93.75%{  opacity: 0.5; }
  100%{  opacity: 1; }
}

@property --grade01 {
  syntax: '<color>';
  inherits: true;
  initial-value: #5096d3;
}

@property --grade02 {
  syntax: '<color>';
  inherits: true;
  initial-value: #0dd7e4;
}

@property --grade03 {
  syntax: '<color>';
  inherits: true;
  initial-value: #dbfcff;
}

.page-top{
  .section-title{
    .en{
      color: var(--main);
      font-family: var(--font-roboto);
      font-size: max(3.8rem, 18px);
      font-weight: 600;
      letter-spacing: 0.2em;
      @media screen and (max-width: 768px) {
        font-size: 3.8rem;
      }
      &::first-letter{
        font-size: 1.25em;
        color: #d67033;
      }
    }
    h2{
      font-size: max(2.1rem, 12px);
      font-weight: 600;
      margin-top: 1rem;
      @media screen and (max-width: 768px) {
        font-size: 2.1rem;
      }
    }
  }


  .message{
    padding-block: 20rem;
    position: relative;
    --js-duration: 2.2s;
    @media screen and (max-width: 768px) {
      padding-block: 6rem;
    }
    &::before{
      content: "";
      display: block;
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20rem;
      background-image: linear-gradient(to top, var(--white-through) 0%, transparent 100%);
    }
    .message-wrap{
      isolation: isolate;
      @media screen and (max-width: 768px) {
        padding-bottom: 8rem;
      }
      p{
        text-align: center;
        font-size: max(2.1rem, 18px);
        font-weight: 600;
        font-family: var(--font-zen);
        line-height: 2.2;
        @media screen and (max-width: 768px) {
          font-size: 1.5rem;
          line-height: 2;
          white-space: nowrap;
        }
        &+ p{
          margin-top: 1lh;
        }
      }
    }
    .image{
      position: absolute;
      @media screen and (max-width: 768px) {
        position: static;
      }
      &.image01{
        right: 4rem;
        top: 7rem;
        width: 37rem;
        @media screen and (max-width: 768px) {
          width: 23rem;
          margin-inline: auto 0;
        }
      }
      &.image02{
        left: 4rem;
        top: 30rem;
        width: 37rem;
        @media screen and (max-width: 768px) {
          width: 20rem;
          margin-top: -5rem;
        }
      }
      &.image03{
        right: 14rem;
        top: 60rem;
        width: 30rem;
        @media screen and (max-width: 768px) {
          width: 19rem;
          margin-inline: auto 2rem;
        }
      }
    }
  }

  .aboutus{
    padding-top: 10rem;
    background-color: var(--white-through);
    @media screen and (max-width: 768px) {
      padding-top: 0;
    }
    @media (any-hover: hover) and (min-width: 769px) {
      &:has(.btn-wrap a:nth-child(1):hover){
        .aboutus-wrap .images .image-message{
          opacity: 1;
        }
      }
      &:has(.btn-wrap a:nth-child(2):hover){
        .image:not(.image-keyword){
          opacity: 0 !important;
        }
        .aboutus-wrap .images .image-keyword{
          opacity: 1;
        }
      }
      &:has(.btn-wrap a:nth-child(3):hover){
        .image:not(.image-data){
          opacity: 0 !important;
        }
        .aboutus-wrap .images .image-data{
          opacity: 1;
        }
      }
    } 
    .aboutus-wrap{
      display: grid;
      grid-template-columns: 1fr 55rem;
      gap: 8rem;
      margin-left: -25rem;
      @media screen and (max-width: 768px) {
        display: flex;
        flex-direction: column-reverse;
        gap: 5rem;
        margin-left: 0;
      }
      .images{
        position: relative;
        width: 100%;
        align-self: flex-end;
        display: grid;
        .image{
          grid-area: 1/1;
          transition: opacity 0.3s;
          opacity: 0;
        }
        .image-message{
          z-index: 3;
          opacity: 1;
        }
        .image-keyword{
          z-index: 2;
        }
        .image-data{
          z-index: 1;
        }
        @media screen and (max-width: 768px) {
          .image{
            transition: none;
            animation: aboutusSlideshow 9s ease infinite;
          }
          .image-message{
            animation-delay: 0s;
          }
          .image-keyword{
            animation-delay: 3s;
          }
          .image-data{
            animation-delay: 6s;
          }
          @media (prefers-reduced-motion: reduce) {
            .image{
              animation: none;
            }
            .image-message{
              opacity: 1;
            }
          }
        }
      }
      .text-wrap{
        padding-top: 6rem;
        @media screen and (max-width: 768px) {
          padding-top: 0;
        }
        .readText{
          margin-top: 4rem;
        }
        .btn-wrap{
          margin-top: 4rem;
          a{
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: var(--shadow);
            height: 9rem;
            padding-inline: 2rem;
            background-color: var(--white);
            transition: background-color 0.1s;
            &+ a{
              margin-top: 3rem;
              @media screen and (max-width: 768px) {
                margin-top: 2rem;
              }
            }
            @media (any-hover: hover) {
              &:hover{
                background-color: var(--main);
                .title{
                  h3{color: var(--white);}
                  .en{color: var(--white);}
                }
                .arrow path{fill: var(--white);}
              }

            }
          }
          .title{
            display: flex;
            align-items: center;
            gap: 1.5rem;
            flex-shrink: 0;
            @media screen and (max-width: 768px) {
              display: block;
            }
            h3{
              font-size: max(1.8rem,13px);
              font-weight: 600;
              transition: color 0.1s;
              @media screen and (max-width: 768px) {
                font-size: 1.6rem;
              }
            }
            .en{
              color: var(--gray);
              font-size: 1.4rem;
              font-weight: 700;
              font-family: var(--font-roboto);
              transition: color 0.1s;
              @media screen and (max-width: 768px) {
                margin-top: 0.6rem;
              }
            }
          }
          .arrow{
            width: 5.4rem;
            @media screen and (max-width: 768px) {
              width: 4rem;
            }
          }
        }
      }
    }
  }
  .interview{
    padding-top: 36rem;
    padding-bottom: 10rem;
    background-color: var(--white-through);
    @media screen and (max-width: 768px) {
      padding-top: 6rem;
      padding-bottom: 5rem;
    }
    .list-btn{
      margin-top: 6rem;
      @media screen and (max-width: 768px) {
        margin-top: 4rem;
        margin-inline: auto 0;
      }
    }

    .interview-wrap{
      display: grid;
      grid-template-columns: auto 98rem;
      @media screen and (max-width: 768px) {
        display: block;
        margin-left: 0;
        margin-right: 0;
      }
    }
    .interview-grid{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 5rem;
      @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 4rem;
        margin-top: 5rem;
      }
      a{
        display: grid;
        grid-template-rows: auto 1fr;
        box-shadow: var(--shadow);
        .image-wrap{
          position: relative;
          overflow: hidden;
          .job{
            font-size: max(1.4rem,10px);
            font-weight: 600;
            color: var(--white);
            background-color: var(--main);
            padding: 1rem;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .title-wrap{
          padding: 2.5rem 3rem 2.5rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background-color: var(--white);
          @media screen and (max-width: 768px) {
            padding: 1.5rem 2rem 2rem;
          }
          .copy{
            font-size: max(1.8rem,14px);
            font-weight: 500;
            line-height: 1.75;
            font-feature-settings: "palt";
            letter-spacing: 0.1em;
            font-style: italic;
            @media screen and (max-width: 768px) {
              font-size: 1.6rem;
            }
          }
          h3{
            font-size: max(2.1rem,16px);
            font-weight: 700;
            font-family: var(--font-roboto);
            padding-top: 2rem;
            width: fit-content;
            align-self: flex-end;
            color: var(--main);
          }
        }
      }
    }
  }
}

.page-top {
  .mv{
    --ease: cubic-bezier(0,0,0,1);
    --late: cubic-bezier(0,0,1,0);
    width: 100%;
    height: 100dvh;
    position: relative;
    background-image: linear-gradient(
      to top,
      var(--grade01) 0%,
      var(--grade02) 75%,
      var(--grade03) 100%
    );
    @media screen and (max-width: 768px) {
      overflow-x: hidden;
    }
    &[data-mv-gradation="blue"]{
      animation: to-orange calc(var(--f) * 3) var(--late) calc(var(--f) * 112) both;
    }
    &[data-mv-gradation="orange"]{
      animation: to-blue calc(var(--f) * 3) var(--late) calc(var(--f) * 112) both;
    }
    &[data-mv-animation="true"]{
      .text-container{
        p{
          &:nth-child(1) span{animation: text-in calc(var(--f) * 25) var(--ease) calc(var(--f) * 7) forwards;}
          &:nth-child(2) span{animation: text-in calc(var(--f) * 25) var(--ease) calc(var(--f) * 10) forwards;}
          &:nth-child(3) span{animation: text-in calc(var(--f) * 25) var(--ease) calc(var(--f) * 13) forwards;}
        }
      }
      .copy-container{
        animation: copy-in calc(var(--f) * 17) calc(var(--f) * 40) forwards;
      }
    }
    &[data-mv-gradation="false"]{
      --shadow-color: transparent;
      img{display: none;}
      .mask{
        background-color: transparent;
      }
    }
    &[data-mv-gradation="blue"]{
      --shadow-color: #2d3340;
      img{display: block;}
      .mask{
        background-color: #08193c;
        mix-blend-mode: soft-light;
      }
    }
    &[data-mv-gradation="orange"]{
      --shadow-color: #493020;
      img{display: block;}
      .mask{
        background-color: #f46108;
        mix-blend-mode: hard-light;
      }
    }
    .image[data-mv-image="true"]{
      img{
        animation:
          image-in calc(var(--f) * 50) var(--ease) forwards,
          image-out calc(var(--f) * 25) var(--late) calc(var(--f) * 75) forwards,
          hidden calc(var(--f) * 1.5) linear calc(var(--f) * 98.5) forwards
        ;
      }
      .mask{
        animation: 
          flicker calc(var(--f) * 15) var(--ease) forwards,
          mask-in calc(var(--f) * 50) var(--ease) forwards,
          mask-out calc(var(--f) * 25) var(--late) calc(var(--f) * 75) forwards,
          hidden calc(var(--f) * 1.5) linear calc(var(--f) * 98.5) forwards
        ;
        @media screen and (max-width: 768px) {
          animation: 
            flicker calc(var(--f) * 15) var(--ease) forwards,
            mask-in-sp calc(var(--f) * 50) var(--ease) forwards,
            mask-out-sp calc(var(--f) * 25) var(--late) calc(var(--f) * 75) forwards,
            hidden calc(var(--f) * 1.5) linear calc(var(--f) * 98.5) forwards
          ;
        }
      }
    }
    .text-container{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 5rem;
      @media screen and (max-width: 1100px) and (min-width: 769px) {
        justify-content: flex-start;
        padding-top: 24rem;
      }
      @media screen and (max-width: 768px) {
        padding-left: 1.5rem;
        justify-content: flex-start;
        padding-top: 9rem;
      }
      p{
        font-size: max(12.5rem,100px);
        font-family: var(--font-roboto);
        font-weight: 700;
        color: var(--white);
        line-height: 0.9;
        opacity: 0.5;
        overflow: hidden;
        @media screen and (max-width: 768px) {
          font-size: 7.5rem;
        }
        &:first-child,
        &:last-child{
          padding-left: 0.35em;
        }
        span{
          display: inline-block;
          transform: translateY(110%);
          &::first-letter{
            font-size: 1.4em;
          }
        }
      }
    }
    .image-container{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;

      .image-01,
      .image-02,
      .image-03,
      .image-04,
      .image-05{
        position: absolute;
        width: auto;
        height: calc(100% * (var(--sizeY) / 1200));
        left: calc(46% - (100dvh * (var(--sizeX) / var(--sizeY)) / 2));
        bottom: 0;
        @media screen and (max-width: 768px) {
          left: calc(75% - (100dvh * (var(--sizeX) / var(--sizeY)) / 2));
          height: calc(92% * (var(--sizeY) / 1200));
          width: 300%;
        }
      }
      [data-mv-image="false"]{
        opacity: 0;
      }
      [data-mv-image="true"]{
        opacity: 1;
      }
      .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
      }
      .image-01{
        --sizeX: 1220;
        --sizeY: 1173;
        .mask{
          mask-image: url(../image/top/mv_01.png);
        }
      }
      .image-02{
        --sizeX: 995;
        --sizeY: 1164;
        .mask{
          mask-image: url(../image/top/mv_02.png);
        }
      }
      .image-03{
        --sizeX: 893;
        --sizeY: 1134;
        .mask{
          mask-image: url(../image/top/mv_03.png);
        }
      }
      .image-04{
        --sizeX: 924;
        --sizeY: 1079;
        .mask{
          mask-image: url(../image/top/mv_04.png);
        }
      }
      .image-05{
        --sizeX: 932;
        --sizeY: 1094;
        @media screen and (max-width: 768px) {
          left: calc(90% - (100dvh * (var(--sizeX) / var(--sizeY)) / 2));
        }
        .mask{
          mask-image: url(../image/top/mv_05.png);
        }
      }
      img{
        height: 100%;
        width: auto;
        isolation: isolate;
      }
    }
    .copy-container{
      opacity: 0;
      position: absolute;
      inset: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-inline: auto min(100px, 4rem);
      width: max(67rem,600px);
      padding-top: 16rem;
      gap: max(5rem,40px);
      @media screen and (max-width: 1100px) and (min-width: 769px) {
        justify-content: flex-end;
        padding-bottom: 10rem;
        picture{
          filter: drop-shadow(0 0 4rem var(--shadow-color));
        }
      }
      @media screen and (max-width: 768px) {
        gap: 3rem;
        justify-content: flex-end;
        margin-inline: 1.5rem;
        padding-bottom: 4rem;
        width: calc(100% - 3rem);
        padding-top: 0;
      }
      a{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--white);
        height: max(7rem,50px);
        width: max(34rem,260px);
        padding-inline: max(2rem,16px) 3rem;
        color: var(--main);
        transition: background-color 0.1s;
        @media screen and (max-width: 768px) {
          height: 4.4rem;
          width: 18rem;
          border-radius: 100vmax;
          padding-inline: 1.8rem 1.5rem;
          background-color: var(--main);
          margin-inline: auto 0;
        }
        @media (any-hover: hover) {
          &:hover{
            background-color: var(--main);
            span{ color: var(--white);}
            .arrow path{fill: var(--white);}
          }

        }
        span{
          font-size: max(1.6rem,14px);
          font-weight: 700;
          transition: color 0.1s;
          @media screen and (max-width: 768px) {
            font-size: 1.4rem;
            color: var(--white);
          }
        }
        .arrow{
          width: max(3rem,20px);
          @media screen and (max-width: 768px) {
            width: 2.4rem;
            path{
              fill: var(--white);
            }
          }
        }
      }
    }
  }
}