@charset "utf-8";

.fv {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;

  .fv-wrap {
    position: relative;
    width: calc(100% - 48px);
    margin-inline: auto;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    /* aspect-ratio: 1230 / 675; */
    overflow: hidden;

    @media screen and (max-width: 488px) {
      /* aspect-ratio: 343 / 612; */
      aspect-ratio: 340 / 480;
    }
  }

  .fv-container {
    position: relative;
    container-type: inline-size;
    border-radius: 32px;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
        to left,
        transparent, 
        rgba(255, 255, 255, 0.2) 
      );
      z-index: 1;
    }
  }

  .fv-copy {
    position: absolute;
    top: 48.5%;
    translate: 0 -50%;
    left: 9.25cqw;
    z-index: 5;
    opacity: 0;
    /* transition: ease 300ms all; */

    @media screen and (max-width: 560px) {
      top: 64%;
      left: 2.25cqw;
    }

    &.-op {
      top: calc(50dvh - 98px);
      left: 50%;
      translate: -50% -50%;
      scale: 1.2;
      z-index: 10;
      opacity: 1;
      @media screen and (max-width: 768px) {
        top: calc(50dvh - 68px);
      }

      .fv-copy__text p {
        top: 0;
      }
    }

    &.-show {
      opacity: 1;

      .fv-copy__text p {
        top: 0;
      }
    }
  }

  .fv-copy__text {
    height: fit-content;
    padding-block: .1cqw;
    overflow: hidden;

    p {
      position: relative;
      top: 5cqw;
      font-size: 3.45111cqw;
      font-weight: 500;
      color: var(--blue);
      letter-spacing: .2em;
      transition: ease 300ms top;

      @media screen and (max-width: 560px) {
        font-size: 6.45111cqw;
      }
    }

    + .fv-copy__text {
      margin-top: 1.6cqw;

      @media screen and (max-width: 768px) {
        margin-top: 2.8cqw;
      }
    }
  }

  .fv-copy__handwritten {
    position: relative;
    width: 37cqw;
    left: 4.5%;
    margin-top: 3.5cqw;

    @media screen and (max-width: 560px) {
      width: 69cqw;
      margin-top: 6.5cqw;
    }

    .square {
      content: "";
      position: absolute;
      border: .8cqw var(--lime) solid;
      width: 35cqw;
      height: 85%;
      top: -.25cqw;
      left: -2.5%;
      z-index: -1;
      opacity: 0;
      transition: ease 300ms opacity;

      @media screen and (max-width: 560px) {
        border: 1.6cqw var(--lime) solid;
        width: 65cqw;
      }

      &.-show {
        opacity: 1;
      }
    }
  }

  .fv-handwritten svg {
    height: auto;
    overflow: visible;
  }

  #stroke-group {
    .stroke-path {
      fill: none;
      stroke: #0d64b0;
      stroke-width: 0.28px;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: none !important;
    }
  }

  #fill-group {
    .fill-path {
      fill: #0d64b0;
    }
  }

  /* -----------------------------
    Slider / Swiper
    ----------------------------- */
  .slider {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: var(--white);
      transition: ease 500ms all;
      z-index: 5;
    }

    &.-show {
      opacity: 1;
      z-index: 0;

      &::before {
        top: -100%;
      }
    }

    .fv-slider-frame {
      position: relative;
      width: 100%;
      border-radius: 32px;
      overflow: hidden;
      aspect-ratio: 1494 / 1030;

      @media (max-width: 560px) {
        aspect-ratio: 343 / 480;
      }

      .fv-slider {
        width: 100%;
        height: 100%;

        .swiper-wrapper {
          width: 100%;
          height: 100%;
        }

        .swiper-slide {
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: opacity 2s ease-in-out;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;

            &.-pc {
              display: none;
              @media screen and (min-width: 561px) {
                display: block;
              }
            }
            &.-sp {
              display: none;
              @media screen and (max-width: 560px) {
                display: block;
              }
            }
          }
        }

        .swiper-slide-active {
          opacity: 1 !important;
          visibility: visible !important;
          z-index: 10;
        }
      }
    }
  }
}


/* -----------------------------
  Opening / Common animation
  ----------------------------- */
body.-fixed {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  inset: 0;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: none;
}

.op {
  position: fixed;
  background: var(--white);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: ease 300ms opacity;
  z-index: 5;

  &.-show {
    visibility: visible;
    opacity: 0;
  }
}

.js-op-text {
  position: relative;
  opacity: 0;

  &.-show {
    top: 0;
    opacity: 1;
  }
}

/* --- 初回アニメーション時のみ有効化するルール --- */

/* 1. スライダーの::before (白カバー) の transition を初回のみ有効に */
main.-op-running {
  .fv {
    .slider::before {
      transition: ease-out 400ms top;
    }
  }

  /* 2. triangle のアニメーションを初回のみ有効に */
  .js-op-deco {
    .triangle {
      transition: transform 0.4s ease, opacity 0.4s ease;
    }
  }
}

.js-op-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* JSから付与される「表示」状態 */
.js-op-header.-visible {
  opacity: 1;
  pointer-events: auto;
}

/* -----------------------------
  NEWS
  ----------------------------- */

.news {
  padding-inline: 9.5cqw;
  @media screen and (max-width: 768px) {
    padding-inline: 2.4rem;
  }
  
  .news-inner {
    max-width: 1040px;
    display: flex;
    margin-inline: auto;
    gap: 24px;
    padding-block: 4rem;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 16px;
    }
  }

  .news-title {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.35;
  }

  dl {
    max-height: 80px;
    overflow-y: auto;
    width: 100%;
    padding-right: 1.5rem;
  }
  @media screen and (max-width: 768px) {
    dl {
      max-height: 120px;
    }
  }
  .news-item {
    display: flex;
    gap: 16px;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 4px;
    }
    + .news-item {
      margin-top: 8px;
    }
  }
  dt {
    font-weight: 500;
  }
  dt,
  dd {
    font-size: 1.6rem;
    @media screen and (max-width: 768px) {
      font-size: 1.4rem;
    }
  }
}

.sec-aboutUs {
  position: relative;
  padding-block: 114px;
  @media screen and (max-width: 768px) {
    padding-block: 48px 72px;
  }
  &::before {
    content: "" ;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 100vw;
    height: 100%;
    border-radius: 64px 0 0 0;
    z-index: -1;
    background: var(--blue-light);
    @media screen and (max-width: 768px) {
      width: 100%; 
      border-radius: 40px;
    }
  }

  .block-intro {
    @media screen and (max-width: 768px) {
      width: auto;
    }
    &.short {
      width: 37cqw;
      @media screen and (max-width: 768px) {
        width: auto;
      }
    }
  }

  .section-block__inner {
    position: relative;
    container-type: inline-size;
    border-radius: 64px 0 0 0;
    &.bg {
      background: var(--blue-light);
    }
  }

  .section-image {
    position: absolute;
    bottom: 70%;
    right: 6cqw;
    max-width: 640px;
    width: 56cqw;
    z-index: 0;
  }
  
  @media screen and (max-width: 768px) {
    .section-outer .section-block.first {
      margin-top: 45cqw;
    }
    .section-image {
      bottom: 97%;
      right: 0;
      max-width: 534px;
      width: 89cqw;
      z-index: -1;
    }
  }
}

.sec-people {
  position: relative;
  top: -48px;
  padding-block: 80px 0;
  &::before {
    content: "" ;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 100vw;
    height: 100%;
    border-radius: 64px 0 0 0;
    z-index: -1;
    background: var(--white);
    @media screen and (max-width: 768px) {
      width: 100%; 
      border-radius: 40px;
    }
  }

  @media screen and (max-width: 768px) {
    .section-heading .img-outer{
      position: relative;
      aspect-ratio: 396 / 312;
      width: calc(100% + 16px);
      margin-left: 16px;
      border-radius: 16px 0 0 16px;
      img {
        object-fit: cover;
        object-position: right;
      }
    }
  }

  .section-block {
    width: auto;
    padding: 0 4.5cqw;
    @media screen and (max-width: 768px) {
      padding: 0;
    }
  }

  .section-block__inner {
    margin-inline: auto;
  }
}

.sec-womens {
  position: relative;
  padding-block: 114px;
  container-type: inline-size;
  @media screen and (max-width: 768px) {
    padding-block: 64px 120px;
  }
  &::before {
    content: "" ;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 100vw;
    height: 100%;
    border-radius: 64px 0 0 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(251, 235, 249, 1) 0%, rgba(255, 246, 217, 1) 100%);
    @media screen and (max-width: 768px) {
      width: 100%; 
      border-radius: 40px;
    }
  }

  .section-heading .heading-unit .heading-category {
    font-size: 6.875cqw;
  }

  .section-block {
    position: relative;
    width: 100vw;
    margin-inline: auto;
    @media screen and (max-width: 768px) {
      width: auto;
    }
  }

  .section-image {
    position: absolute;
    inset-block: -26cqw;
    right: 4cqw;
    max-width: 480px;
    width: 48cqw;
    z-index: 0;
    @media screen and (max-width: 768px) {
      inset-block: initial;
      top: -12cqw;
      right: 5cqw;
      bottom: initial;
      width: 48cqw;
      z-index: -1;
    }
  }

  @media screen and (max-width: 768px) {
    .heading-unit {
      padding-left: 24px;
      .heading-category {
        font-size: 4.2rem;
      } 
    } 
  }

  .head-text__unit .head {
    font-size: 1.5625cqw;
    @media screen and (max-width: 768px) {
      font-size: 1.6rem;
    }
  }

  .section-block__inner {
    max-width: 1280px;
    padding: 0;
    @media screen and (max-width: 768px) {
      margin-top: 45%;
    }
  }

  .section-block {
    container-type: inline-size;
  }
  
  .block-intro {
    padding-left: 9.375cqw;
    @container (min-width: 1280px) {
      padding-left: calc(9.375cqw - 20px);
    }
    @media screen and (max-width: 768px) {
      width: auto;
      padding-inline: 16px;
    }

    &.short {
      width: 37cqw;
      @media screen and (max-width: 768px) {
        width: auto;
      }
    }
  }

  .block-list {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    gap: 24px;
    @media screen and (max-width: 768px) {
      width: auto;
      margin-inline: auto;
      padding-inline: 0;
      gap: 0;
    }

    .head-text__unit {
      width: fit-content;
      margin-inline: auto;
      @media screen and (max-width: 768px) {
        margin-inline: initial;
      }
    }
    .link-btn {
      margin-inline: auto;
      @media screen and (max-width: 768px) {
        margin-inline: initial;
      }
    }
  }

  .block-list__item {

    &:nth-of-type(1) {
      .img-outer {
        border-radius: 0 40px 40px 0;
      }
    }
    &:nth-of-type(2) {
      .img-outer {
        border-radius: 40px;
      }
    }
    &:nth-of-type(3) {
      .img-outer {
        border-radius: 40px 0 0 40px;
      }
    }
    @media screen and (max-width: 768px) {
      &:nth-of-type(3),
      &:nth-of-type(4),
      &:nth-of-type(5) {
        .img-outer {
          border-radius: 44px;
        }
      }
    }
  }


  @media (min-width: 769px) {
    .block-list.js-sp-slider .swiper-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
    }

    .block-list.js-sp-slider .swiper-slide {
      width: calc( (100% - 24px * 2) / 3 );
    }
  }

  @media (max-width: 768px) {
    .swiper-wrapper {
      width: calc(100% - 48px);
      /* padding-inline: 24px; */
    }
    .block-list.js-sp-slider {
      width: 100%;
    }
  }

  @media screen and (min-width: 769px) {
    .js-sp-slider .swiper-button-prev,
    .js-sp-slider .swiper-button-next {
      display: none;
    }
  }

  @media screen and (max-width: 768px) {
    .js-sp-slider .swiper-button-prev,
    .js-sp-slider .swiper-button-next {
      background: none;
      top: 40%;
      translate: 0 -50%;
      width: 40px;
      height: 40px;
      &::before {
        content: "";
        position: absolute;
        width: 40px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--purple);
        top: 50%;
        translate: 0 -50%;
        z-index: 1;
      }
      &::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--white);
        border-bottom: 2px solid var(--white);
        rotate: -45deg;
        top: 50%;
        left: 10px;
        translate: 0 -50%;
        z-index: 1;
      }
    }

    .js-sp-slider .swiper-button-prev {
      left: 2.5vw;
    }

    .js-sp-slider .swiper-button-next {
      right: 2.5vw;
    }

    .js-sp-slider .swiper-button-prev::after {
      rotate: 135deg;
      left: 16px;
    }
  }
  
}

.sec-company {
  position: relative;
  top: -48px;
  padding-block: 80px 0;
  container-type: inline-size;
  @media screen and (max-width: 768px) {
    padding-block: 48px 0;
  }
  &::before {
    content: "" ;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 100vw;
    height: 100%;
    border-radius: 64px 0 0 0;
    z-index: -1;
    background: var(--white);
    @media screen and (max-width: 768px) {
      width: 100%; 
      border-radius: 40px;
    }
  }

  .section-block {
    max-width: 1040px;
    margin-inline: auto;
  }

  .block-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr; 
    gap: 5cqw;
    @media screen and (max-width: 768px) {
      grid-template-columns: auto;
      grid-template-rows: auto; 
      padding-inline: 16px;
      gap: 24px;
    }
  }

  .block-list__item {
    width: 100%;
    background: var(--orange);
    border-radius: 24px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    justify-items: center;
    align-items: center; 
    gap: 16px;
    padding-block: 3cqw;
    @media screen and (max-width: 768px) {
      width: auto;
      grid-template-columns: 80px 1fr; 
      grid-column: 1; 
      justify-content: flex-start;
      grid-row: span 1;
      gap: 8px;
      padding: 24px 32px;
      .head-text__unit {
        margin-right: auto;
      }
    }
    .head-text__unit .head {
      font-size: 1.5625cqw;
      @media screen and (max-width: 768px) {
        font-size: 1.4rem;
      }
    }

    img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 10cqw;
    }
    
    &:nth-of-type(1) {
      img {
        max-width: 58px;
        aspect-ratio: 58/66;
        @media screen and (max-width: 768px) {
          width: 10cqw;
        }
      }
    }
    &:nth-of-type(2) {
      img {
        max-width: 42px;
        aspect-ratio: 42/74;
        @media screen and (max-width: 768px) {
          width: 8cqw;
        }
      }
    }
    &:nth-of-type(3) {
      img {
        max-width: 86px;
        aspect-ratio: 86/52;
        @media screen and (max-width: 768px) {
          width: 14cqw;
        }
      }
    }
  }
  .head-text__unit {
    margin-bottom: 0;
  }
}

.sec-recruit {
  position: relative;
  padding-block: 64px 128px;
  @media screen and (max-width: 768px) {
    padding-block: 56px 64px;
  }
  &::before {
    content: "" ;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: 100vw;
    height: 100%;
    border-radius: 64px 0 0 0;
    z-index: -1;
    background: var(--gray-light);
    @media screen and (max-width: 768px) {
      width: 100%; 
      border-radius: 40px;
    }
  }

  @media screen and (max-width: 768px) {
    .heading-unit .heading-category {
      font-size: 4rem;
    }
    .heading-unit .heading-caption__sub {
      font-size: 1.8rem;
    }
  }

  .section-block {
    display: flex;
    margin-inline: auto;
    padding: 0 9cqw;
    gap: 5.46875cqw;
    max-width: 1040px;
    width: auto;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 16px;
      padding: 0 24px;
    }
  }

  .block-item__single {
    position: relative;
    max-width: 670px;
    width: 100cqw;
    height: fit-content;
    @media screen and (max-width: 768px) {
      max-width: initial;
      width: auto;
      margin-inline: auto;
    }

    .heading-img {
      display: block;
      overflow: hidden;
      border-radius: 24px;
    }

    .head-text__unit {
      position: absolute;
      left: 24px;
      top: 50%;
      translate: 0 -50%;
      margin-bottom: 0;
      @media screen and (max-width: 768px) {
        gap: 16px;
      }
      &::before {
        display: none;
      }
      .head {
        font-size: 3.2rem;
        @media screen and (max-width: 768px) {
          font-size: 2rem;
          &::before {
            bottom: -8px;
          }
        }
      }

      .text {
        font-size: 2rem;
        @media screen and (max-width: 768px) {
          font-size: 1.4rem;
        }
      }
    }
  }

  .block-list {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: auto; 
    gap: 50px;
    width: 46cqw;
    @media screen and (max-width: 768px) {
      width: auto;
      gap: 16px;
    }
  }

  .block-list__item {
    width: 100%;
    background: var(--white);
    border-radius: 24px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    justify-items: center;
    align-items: center; 
    gap: 16px;
    padding-block: 3cqw;

    @media screen and (max-width: 768px) {
      width: auto;
      grid-template-columns: 80px 1fr; 
      grid-column: 1; 
      justify-content: flex-start;
      grid-row: span 1;
      gap: 16px;
      padding: 24px 16px;
      .head-text__unit {
        margin-right: auto;
      }
    }

    .head-text__unit {
      margin-bottom: 0;
      .head {
        font-size: 1.74216cqw;
        @media screen and (max-width: 768px) {
          font-size: 1.4rem;
        }
      }
    }

    img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 10cqw;
    }
        
    &:nth-of-type(1) {
      img {
        max-width: 48px;
        aspect-ratio: 48/58;
      }
    }
    &:nth-of-type(2) {
      img {
        max-width: 86px;
        aspect-ratio: 86/56;
        @media screen and (max-width: 768px) {
          width: 16cqw;
        }
      }
    }
  }


}