.p-page-home {
  background-repeat: no-repeat;
  background-position: top 0 center;
  background-size: 1440px;
  background-image: url('../../../img/home/hero_bg.webp');
  overflow: hidden;

  /* Hero */
  .p-page-home-hero {
    padding-bottom: 100px;
    overflow: hidden;
    
    .p-page-home-hero__mv {
      padding-top: 50px;
      margin-bottom: 50px;
      position: relative;

      .p-page-home-hero__mv-list-wrap {
        display: flex;
        gap: 40px;
        overflow: hidden;
      }

      .p-page-home-hero__mv-list {
        display: flex;
        gap: 40px;
        animation: heroMvScroll 60s linear infinite;

        .p-page-home-hero__mv-list-item {
          min-width: 1530px;
        }
      }

      .p-page-home-hero__mv-list-sp {
        display: none;
      }
    }

    .p-page-home-hero__catch {
      text-align: center;
      color: #1A2F40;
      font-family:  var(--font-ff-shippori-mincho);
      font-size: 2.2rem;
      line-height: 30px;
      letter-spacing: 8.8px;
      margin-bottom: 100px;

      br {
        display: none;
      }
    }

    .p-page-home-hero__text-visual {
      display: flex;
      gap: 30px;
      overflow: hidden;

      .p-page-home-hero__text-visual-list {
        display: flex;
        align-items: center;
        gap: 30px;
        animation: heroTextVisualScroll 40s linear infinite;

        .p-page-home-hero__text-visual-list-item {

          &:nth-child(1) {
            min-width: 589px;
          }

          &:nth-child(2) {
            min-width: 514px;
          }

          &:nth-child(3) {
            min-width: 305px;
          }
        }
      }
    }
  }

  /* About */
  .p-page-home-about {
    .p-page-home-about__content {
      display: grid;
      gap: 30px;
      position: relative;

      .c-title-h1 {
        br {
          display: none;
        }
      }

      .p-page-home-about__content-cube-image {
        position: absolute;
        width: 120px;
        height: 103px;
        right: 0;
        top: -22px;
        z-index: 1;
      }
    }
  }

  .p-page-home-business-recruit-faq {
    padding-top: 150px;
    background: var(--color-gradient-02);
  }

  /* Business */
  .p-page-home-business {
    padding-bottom: 130px;

    .p-page-home-business__content {
      display: grid;
      gap: 30px;
      border-radius: 30px;
      padding: 70px 60px;
      background: linear-gradient(254deg, #3CCAE4 0%, #18A8C3 51%, #007E96 100%);
      position: relative;

      .c-title-en-ja {
        .c-title-en-ja__en {
          .c-title-en-ja__en-text {
            color: var(--color-font-03);
          }
        }
        .c-title-en-ja__ja {
          color: var(--color-font-03);
        }
      }

      .c-text {
        color: var(--color-font-03);
      }

      .p-page-home-business__links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        .p-page-home-business__link--business {
          grid-column: 2 / 4;
          background-color: var(--color-primary-01);

          .c-button-square-rounded__text {
            color: var(--color-font-03);
          }
        }
      }

      .p-page-home-business__content-cube-image {
        position: absolute;
        width: 467px;
        height: 395px;
        right: -247px;
        top: -278px;
        z-index: 1;
      }
    }
  }

  /* Recruit - FAQ */
  .p-page-home-recruit-faq {
    padding-bottom: 160px;

    .p-page-home-recruit-faq__contents {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 100px;

      .p-page-home-recruit-faq__content-border {
        background-color: var(--color-border-01);
      }

      .p-page-home-recruit-faq__content {
        display: grid;
        gap: 50px;

        .p-page-home-recruit-faq__content-description {
          font-size: 1.6rem;
        }
      }
    }
  }

  /* Achievements */
  .p-page-home-achievements {
    padding-top: 150px;
    background-repeat: no-repeat;
    background-size: 1440px;
    background-position: 0 center;
    background-image: url('../../../img/home/achievements_bg.webp');

    .p-page-home-achievements__counters {
      margin: 104px 0 100px 0;
      display: grid;
      grid-template-columns: 1fr 1px 1fr 1px 1fr;
      gap: 58px;

      .p-page-home-achievements__counter-border {
        background-color: var(--color-border-01);
      }

      .p-page-home-achievements__counter {
        .p-page-home-achievements__counter-box {
          display: grid;
  
          .p-page-home-achievements__counter-box-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 13px;
  
            .p-page-home-achievements__counter-box-title-text {
              font-size: 2.2rem;
              letter-spacing: 5.5px;
              font-weight: 700;
            }
          }
  
          .p-page-home-achievements__counter-box-data {
            display: flex;
            align-items: flex-end;
            justify-content: center;
  
            .p-page-home-achievements__counter-box-data-attention {
              color: var(--color-primary-02);
              font-size: 2.6rem;
              font-weight: 500;
              line-height: 110%;
              letter-spacing: 1.3px;
              writing-mode: vertical-rl;
              margin-right: 6px;
            }
  
            .p-page-home-achievements__counter-box-data-number {
              color: var(--color-primary-02);
              font-family: var(--font-ff-outfit);
              font-size: 8.0rem;
              font-weight: 200;
            }
            
            .p-page-home-achievements__counter-box-data-unit {
              color: var(--color-primary-02);
              font-family: var(--font-ff-outfit);
              font-size: 5.0rem;
            }
          }
  
          .p-page-home-achievements__counter-box-footer {
            color: var(--color-primary-02);
            font-size: 2.2rem;
            font-weight: 500;
            letter-spacing: 1.1px;
            text-align: right;
          }
        }  
      }
    }

    .p-page-home-achievements__company {
      padding: 40px 0;
      background-color: rgba(24, 168, 195, 0.1);

      .p-page-home-achievements__company-list-wrap {
        overflow: hidden;
        display: flex;
        gap: 20px;
      }

      .p-page-home-achievements__company-list {
        display: flex;
        gap: 20px;
        animation: achievementsCompanyScroll 60s linear infinite;

        .p-page-home-achievements__company-list-item {
          min-width: 272px;
          border-radius: 5px;
          overflow: hidden;
        }
      }
    }

    .p-page-home-achievements__contents {
      padding: 100px 0 150px 0;

      .p-page-home-achievements__contents-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        margin-bottom: 50px;
      }

      .p-page-home-achievements__contents-button {
        text-align: center;
      }
    }
  }

  /* News - Column */
  .p-page-home-news-column {
    background-color: #fff;
    padding: 150px 0;

    .p-page-home-news-column__contents {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 120px;
    }

    .c-title-en-ja {
      margin-bottom: 50px;
    }

    .p-page-home-news-column__content-button {
      margin-top: 50px;
    }
  }
}

@keyframes heroMvScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes heroTextVisualScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes achievementsCompanyScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* PC */
@media screen and (min-width: 1441px) {
  .p-page-home {
    background-size: 100%;

    .p-page-home-achievements {
      background-size: 100%;;
    }
  }
}

/* TABLET */
@media screen and (max-width: 1024px) {
  .p-page-home {
    /* About */
    .p-page-home-about {
      padding: 0 var(--device-tab-padding);
    }

    /* Recruit - FAQ */
    .p-page-home-recruit-faq {
      padding: 0 var(--device-tab-padding) 160px var(--device-tab-padding);
    }

    .p-page-home-achievements {
      background-size: cover;

      .p-page-home-achievements__main {
        padding: 0 var(--device-tab-padding) 70px var(--device-tab-padding);

        .p-page-home-achievements__counters {
          grid-template-columns: 1fr;
          gap: 70px;
          margin: 50px 0 0 0;
  
          .p-page-home-achievements__counter-border {
            height: 1px;
          }
  
          .p-page-home-achievements__counter {
            display: flex;
            justify-content: center;
  
            .p-page-home-achievements__counter-box {
              .p-page-home-achievements__counter-box-title {
                margin-bottom: 9px;
    
                .p-page-home-achievements__counter-box-title-image {
                  width: 26px;
                }
              }
            }  
          }
        }
      }

      .p-page-home-achievements__contents {
        padding: 100px var(--device-tab-padding) 150px var(--device-tab-padding);

        .p-page-home-achievements__contents-list {
          grid-template-columns: 1fr 1fr;
        }
      }
    }

    .p-page-home-news-column {
      padding: 150px var(--device-tab-padding);

      .p-page-home-news-column__contents {
        grid-template-columns: 1fr;
        gap: 70px;
      }
    }
  }
}

/* SP */
@media screen and (max-width: 768px) {
  .p-page-home {
    background-image: url('../../../img/home/hero_bg_sp.webp');

    /* Hero */
    .p-page-home-hero {
      padding-bottom: 70px;
      
      .p-page-home-hero__mv {
        padding-top: 21px;
        margin-bottom: 70px;

        .p-page-home-hero__mv-list-wrap {
          gap: 25px;
        }

        .p-page-home-hero__mv-list {
          display: none;
        }

        .p-page-home-hero__mv-list-sp {
          display: block;
          min-width: calc(485 / var(--device-sp-width) * 80vw);
          animation: heroMvScroll 30s linear infinite;

          .p-page-home-hero__mv-list-sp-item {
            .p-page-home-hero__mv-list-sp-item-image {
              width: 100%;
            }
          }
        }
      }

      .p-page-home-hero__catch {
        margin-bottom: 84px;
        padding: 0 30px;
        font-size: 1.8rem;

        br {
          display: inline;
        }
      }

      .p-page-home-hero__text-visual {
        gap: 22px;

        .p-page-home-hero__text-visual-list {
          gap: 22px;
          animation: heroTextVisualScroll 30s linear infinite;

          .p-page-home-hero__text-visual-list-item {

            &:nth-child(1) {
              min-width: calc(475 / var(--device-sp-width) * 100vw);

              img {
                width: 100%;
              }
            }

            &:nth-child(2) {
              min-width: calc(452 / var(--device-sp-width) * 100vw);

              img {
                width: 100%;
              }
            }

            &:nth-child(3) {
              min-width: calc(246 / var(--device-sp-width) * 100vw);

              img {
                width: 100%;
              }
            }
          }
        }
      }
    }

    /* About */
    .p-page-home-about {
      padding: 0 30px 70px 30px;

      .p-page-home-about__content {
        .c-title-h1 {
          br {
            display: inline;
          }
        }

        .p-page-home-about__content-cube-image {
          display: none;
        }
      }
    }

    .p-page-home-business-recruit-faq {
      padding-top: 30px;
    }

    /* Business */
    .p-page-home-business {
      padding-bottom: 70px;
  
      .p-page-home-business__content {
        padding: 50px 30px;
    
        .p-page-home-business__links {
          grid-template-columns: 1fr;
  
          .p-page-home-business__link--business {
            grid-column: 1;
          }
        }
  
        .p-page-home-business__content-cube-image {
          display: none;
        }
      }
    }

    /* Recruit - FAQ */
    .p-page-home-recruit-faq {
      padding: 0 30px 70px 30px;

      .p-page-home-recruit-faq__contents {
        grid-template-columns: 1fr;
        gap: 70px;

        .p-page-home-recruit-faq__content-border {
          height: 1px;
        }

        .p-page-home-recruit-faq__content {
          gap: 50px;

          .p-page-home-recruit-faq__content-description {
            font-size: 1.6rem;
          }
        }
      }
    }

    /* Achievements */
    .p-page-home-achievements {
      padding-top: 70px;
      background-image: url('../../../img/home/achievements_bg_sp.webp');

      .p-page-home-achievements__main {
        padding: 0 30px 70px 30px;
      }

      .p-page-home-achievements__company {
        padding: 54px 0;

        .p-page-home-achievements__company-list {
          animation: achievementsCompanyScroll 40s linear infinite;

          .p-page-home-achievements__company-list-item {
            min-width: 140px;
            width: 140px;

            .p-page-home-achievements__company-list-item-image {
              width: 100%;
              height: auto;
            }
          }
        }
      }

      .p-page-home-achievements__contents {
        padding: 70px 30px;

        .p-page-home-achievements__contents-list {
          grid-template-columns: 1fr;
        }
      }
    }

    /* News - Column */
    .p-page-home-news-column {
      padding: 70px 30px;
    }
  }
}