@charset "utf-8";
/* CSS Document */


/********** home **********/

main.home {
  padding: 9rem 0 0;
  
  .p-catch {
    padding: 0;
    height: calc(100vh - 9rem);
    overflow: hidden;
    .p-catch__inner {
      position: relative;
      margin: 0 auto;
      max-width: 1200px;
      height: 100%;
      .lottieArea {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% - 0%));
        width: 100%;
      }
      p {
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translate(-50%, calc(-50% + 0%));
        width: 100%;
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: .05em;
        text-align: center;
        br {
          display: none;
        }
      }
    }
  }

  .p-body{
    padding: 0 0 4rem;
    background: #f2f2f2;

    .p-chapter {
      padding: 10rem 0;
      .p-chapter__inner {
        margin: 0 auto;
        padding: 0 4rem;
        width: 100%;
        max-width: 800px;
        h2 {
          position: relative;
          margin: 0 0 6rem;
          font-size: 4.8rem;
          font-weight: 700;
          letter-spacing: .1em;
          text-align: center;
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%,0);
            display: inline-block;
            width: 60px;
            height: 4px;
            background: var(--text);
          }
        }
      }
    }

    #profile{
      .p-chapter__inner {
        p {
          word-break: keep-all;
          text-align: center;
          line-height: 2;
        }
      }
    }

    #work{
      margin: 0 auto;
      padding: 8rem 4rem;
      max-width: 1200px;
      background: #fff;
      border-radius: 60px;
      .p-chapter__inner {
        max-width: 1000px;
        h2 {
          width: fit-content;
          padding-right: 6rem;
          text-align: left;
          &::after {
            content: "";
            position: absolute;
            bottom: 50%;
            left: auto;
            right: 0;
            transform: translate(0, 100%);
            display: inline-block;
            width: 40px;
            height: 4px;
            background: var(--text);
          }
        }
      }
      .swiper {
        margin: 0 auto;
        padding: 0 4rem;
        max-width: 1000px;
        .swiper-wrapper {
          .swiper-slide {
            padding: 0;
            a {
              display: block;
              &:hover {
                .thumb {
                  img {
                    transform: scale(1.1);
                  }
                }
              }
              .thumb {
                aspect-ratio: 1200/630;
                border: 2px solid var(--text);
                border-radius: 20px;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: .3s;
                }
              }
              p {
                padding: .75em 0;
                font-size: 1.6rem;
                font-weight: 700;
                line-height: 1.4;
                letter-spacing: .05em;
              }
            }
          }
        }
        .swiper-button-next,
        .swiper-button-prev {
          background: #222;
          width: 30px;
          height: 30px;
          z-index: 2;
        }
        .swiper-button-next {
          right: -0px;
          &::after {
            content: '→';
            color: #fff;
            font-size: 1.5rem;
          }
        }
        .swiper-button-prev {
          left: -0px;
          &::after {
            content: '←';
            color: #fff;
            font-size: 1.5rem;
          }
        }
      }
    }

    #contact{
      .p-chapter__inner {
        p {
          word-break: keep-all;
          text-align: center;
          line-height: 2;
        }
        a {
          position: relative;
          display: block;
          margin: 4rem auto;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          background: #fff;
          overflow: hidden;
          &:hover {
            img {
              animation: toRight .5s ease-in-out forwards;
            }
          }
          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px dashed var(--text);
            animation: loop 20s linear infinite;
          }
          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
          }
        }
      }
    }

  }
}

@media (max-width: 768px) {
  main.home {
    padding: 7rem 0 0;
    .p-catch {
      padding: 9rem 0;
      .p-catch__inner {
        p {
          font-size: 2.4rem;
        }
      }
    }

    .p-body{
      padding: 0 0 4rem;
      
      .p-chapter {
        padding: 8rem 0;
        .p-chapter__inner {
          h2 {
            font-size: 4.8rem;
            &::after {
              width: 48px;
            }
          }
        }
      }

      #profile{
        .p-chapter__inner {
          h3 {
            font-size: 3.6rem;
          }
          ul {
            max-width: 540px;
            li {
              width: calc(100%/3 - 2rem*2/3);
            }
          }
        }
      }

      #work{
        .p-chapter__inner {
          padding: 0 2rem;
          ul {
            gap: 2rem;
            li {
              width: calc(100%/2 - 2rem/2);
              a {
                p {
                  font-size: 1.6rem;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 600px) {
  main.home {
    .p-catch {
      height: calc(100vh - 7rem);
    }
  }
}

@media (max-width: 480px) {
  main.home {
    .p-catch {
      padding: 6rem 0;
      .p-catch__inner {
        p {
          font-size: 1.6rem;
        }
      }
    }

    .p-body{
      padding: 0 0 2rem;
      
      .p-chapter {
        padding: 6rem 0;
        .p-chapter__inner {
          padding: 0 2rem;
          h2 {
            margin: 0 0 4rem;
            font-size: 3.6rem;
            &::after {
              width: 36px;
            }
          }
        }
      }

      #profile{
        .p-chapter__inner {
          h3 {
            font-size: 3.2rem;
          }
          ul {
            li {
              img {
                width: 40px;
              }
            }
          }
        }
      }

      #work{
        padding: 4rem 2rem;
        border-radius: 30px;
        .p-chapter__inner {
          ul {
            gap: 2rem;
            li {
              width: 100%;
            }
          }
        }
      }

      #contact{
        .p-chapter__inner {
          a {
            width: 120px;
            height: 120px;
            img {
              width: 50px;
            }
          }
        }
      }
    }
  }
}

@keyframes toRight {
  0% {
    left: 50%;
  }
  50% {
    left: 150%;
  }
  50.1% {
    left: -50%;
  }
  100% {
    left: 50%;
  }
}

@keyframes loop {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}