/* MV
*************************/
/* MV本体 */
.p-top__mv {
  position: relative;
  width: 100vw;
  height: 148vw;
  overflow: hidden;

  @media (width >=48rem) {
    height: 47.0555vw;
    min-height: 40rem;
  }
}

/* 背景レイヤー */
.p-top__mv-bg {
  position: absolute;
  inset: 0;
  background: image-set(url(../../images/top/sp-mv.webp) type("image/webp"),
      url(../../images/top/sp-mv.jpg) type("image/jpeg")) center / cover no-repeat;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;
    background: rgba(255, 255, 255, .68);

  }

  @media (width >=48rem) {
    background: image-set(url(../../images/top/mv.webp) type("image/webp"),
        url(../../images/top/mv.jpg) type("image/jpeg")) center / cover no-repeat;
  }

  &.is-visible {
    opacity: 1;
  }
}

.p-top__mv-body {
  width: 100%;
}

.p-top__mv-title-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--c-black-secondary);
  position: relative;
  z-index: 2;
}

/* テキスト部は上に */
.p-top__mv-inner {
  position: relative;
  z-index: 2;
  max-width: 990px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-inline: 1rem;
}

.p-top__mv-lead {
  text-align: center;
  font-size: clamp(1.1rem, 0.859rem + 1.39vw, 1.5rem);
  color: var(--c-black-secondary);
  line-height: 1.8;
}

.p-top__mv-title {
  text-align: center;
  align-items: center;
  flex-direction: column;
  font-weight: var(--font-weight-black);
  display: flex;
  gap: 0.4rem;

  em {
    display: block;
    font-style: italic;
    font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
    line-height: var(--line-height-100);
    letter-spacing: var(--tracking-tight);
	font-size: clamp(2rem, 0.616rem + 7.2vw, 5.5rem);
/*     font-size: clamp(3rem, 0.616rem + 10.2vw, 7.5rem); */
    text-align: center;
    font-feature-settings: "palt";
  }
}

.p-top__mv-text {
  text-align: center;
  margin-block-start: clamp(1.5rem, 1.021rem + 2.19vw, 2.5rem);
  max-width: 480px;
  margin-inline: auto;
  width: fit-content;
}

.p-top__mv-button {
  margin-top: 1.5rem;
}

/* works
*************************/
.top-works {
  padding-block-start: var(--font-size-5xl);
}

.top-works__inner {
  margin-block-start: -4rem;
  display: grid;
  gap: 2.5rem;

  @media (width < 48rem) {
    margin-block-start: -1.8rem;
  }
}

.top-works__item figcaption {
  margin-block-start: 0.5rem;
  font-size: var(--font-size-xs);
}

.p-top__works-button {
  text-align: center;
  margin-block-start: clamp(1.5rem, 0.705rem + 3.4vw, 3rem);
}

.splide__slide img {
  height: auto;
  width: 100%;
  box-shadow: 1rem 1rem 1rem rgba(154, 153, 152, 0.1);
}

.splide__slide img {
  transition: transform 0.5s ease;

}

.splide__slide:hover img {
  opacity: .5;
  transform: scale(.98);
  outline: 3px solid #FFFFFF;
  outline-offset: -12px
}

/* service
*************************/
.top-service__lists {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: clamp(2rem, 0.411rem + 6.8vw, 5rem);

  @media (width >=48rem) {
    grid-template-columns: repeat(3, 1fr);

    .top-service__list:nth-child(2) {
      margin-top: 40px;
    }

    .top-service__list:nth-child(3) {
      margin-top: 80px;
    }
  }
}

.top-service__list a {
  position: relative;
  display: grid;
  place-content: center;
  overflow: hidden;
  box-shadow: 1rem 1rem 1rem rgba(154, 153, 152, 0.4);

  &::after {
    position: absolute;
    content: "";
    inset: 0;
    background-color: rgba(0, 0, 0, 0.52);
    opacity: 1;
    transition: opacity 0.6s ease;
  }

  img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease, filter 0.6s ease;

    @media (width <48rem) {
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: top;
    }
  }

  &:hover,
  &:focus {
    &::after {
      opacity: 1;
    }

    img {
      transform: scale(1.03);
      filter: blur(3px);
    }
  }
}


@media (width <48rem) {
  .top-service__list {
    width: fit-content;
    margin-inline: auto;
  }
}

.top-service__list-title {
  color: var(--c-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  gap: 0.5rem;
  text-align: center;
  width: 100%;

  span {
    line-height: var(--line-height-100);
  }
}

.p-service__title-en {
  font-size: clamp(0.875rem, 0.809rem + 0.28vw, 1rem);
}

.p-service__title-ja {
  font-size: 1.35rem;

  @media (width >=48rem) {
    font-size: clamp(1rem, 0.868rem + 0.57vw, 1.25rem);
  }
}

.top-service__list a:is(:hover, :focus-visible, :active) {
  img {
    transform: scale(1.05);
  }

  &::after {
    opacity: 0.8;
  }
}

/* about
*************************/
.p-top__about-message {
  background: url(../../images/top/kanagawa.png) center / contain no-repeat;
  display: grid;
  flex-direction: column;
  justify-content: center;


  @media (width >=48rem) {
    gap: clamp(1.25rem, 0.058rem + 5.1vw, 3.5rem);
    padding-block: 12.5rem 15rem;
    display: flex;
    flex-direction: row-reverse;
  }
}

.p-top__about-container {
  max-width: 1080px;
}

.p-top__about-title-ja {
  text-align: right;
}

.p-top__about-text {
  text-align: center;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-180);
  color: var(--c-white);
  font-size: clamp(0.938rem, 0.64rem + 1.27vw, 1.5rem);
}

.p-top__about-button {
  margin-block-start: 2rem;
  text-align: center;
}

.p-top__about-title {
  font-size: clamp(2rem, 1.205rem + 3.4vw, 3.5rem);
  color: #fff;
  letter-spacing: 0.5em;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;

  span {
    writing-mode: vertical-rl;
  }
  @media (width <48rem) {
    margin-block-start: 1.5rem;
  }
}

.top-about__bg-title {
  position: relative;
  z-index: 0;
  opacity: .2;
}

.p-top__info {
  margin-block-start: 3.5rem;
  max-width: var(--max-container-size-l);
  display: flex;
  justify-content: flex-end;
  margin-inline: auto;

  @media (width >=48rem) {
    margin-block-start: -2.5rem;
  }
}

.p-top__info-list {
  width: 21.25rem;

  .p-top__info-menu {
    margin-block-start: .4rem;
    color: var(--c-white);
    display: grid;
    gap: .4rem;

    span {
      line-height: var(--line-height-100);

      @media (width <48rem) {
        text-align: center;
      }

      &:first-of-type {
        font-size: var(--font-size-xs);
        font-family: var(--font-en);
      }

      &:last-of-type {
        font-size: calc(15 * var(--torem));
        font-weight: var(--font-weight-bold);

        @media (width >=48rem) {
          font-size: var(--font-size-lg);
        }
      }
    }
  }
}

.p-top__info-list figure {
  position: relative;
  overflow: hidden;
}

.p-top__info-list img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
  will-change: transform, filter;
}

.p-top__info-list a:hover,
.p-top__info-list a:focus {
  img {
    filter: brightness(.5);
    transform: scale(1.03);
    outline: 3px solid #FFFFFF;
    outline-offset: -12px;
  }
}

/* スクロールダウン */
.scroll-down {
  position: absolute;
  bottom: 2rem;
  right: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-en);
}

.scroll-down__text {
  line-height: var(--line-height-100);
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--c-black-secondary);
}

.scroll-down__line {
  position: relative;
  right: 2px;
  width: 1px;
  height: 2rem;
  background-color: var(--c-black-secondary);
  transform-origin: bottom center;
  animation: scrollLine 2s ease-in-out infinite;
}

/* 線のアニメーション */
@keyframes scrollLine {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}