.p-top-mv-slide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p-top-mv-slide:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
  .p-top-mv-slide:before {
    background: rgba(0, 0, 0, 0.3);
  }
}
.p-top-mv-slide__list {
  overflow: hidden;
}
.p-top-mv-slide__item {
  width: 100%;
  height: 100vh;
  position: relative;
}
.p-top-mv-slide__item picture {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  overflow: hidden;
}
.p-top-mv-slide__item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 110vw;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-out;
  animation-fill-mode: forwards;
}
.p-top-mv-slide__item:not(.is-active):not(.is-prev) img {
  transform: translateX(-3%);
  animation: none;
}
.p-top-mv-slide__item.is-active img {
  opacity: 1;
  animation: slideLeft 7s linear;
}
.p-top-mv-slide__item.is-prev img {
  transform: translateX(-3%);
  animation-play-state: paused;
  transition: opacity 2s ease-out;
}

@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-3%);
  }
}
.p-top-mv {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.p-top-mv__message {
  width: clamp(355.84px, calc(834 / 1800 * 100vw), 834px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  visibility: hidden;
}
@media (max-width: 767px) {
  .p-top-mv__message {
    width: clamp(543.0697674419px, calc(667.2 / 430 * 100vw), 775.8139534884px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-mv__message {
    width: clamp(273.488372093px, calc(336 / 430 * 100vw), 390.6976744186px);
  }
}
.p-top-mv__img {
  max-width: 100%;
  height: auto;
}

.p-top-message {
  color: #fff;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.8) 80%, #000000 100%);
  position: relative;
}
.p-top-message__inner {
  width: clamp(391.2533333333px, calc(917 / 1800 * 100vw), 917px);
  margin-inline: auto;
  position: relative;
  padding-bottom: clamp(114.3466666667px, calc(268 / 1800 * 100vw), 268px);
}
@media (max-width: 767px) {
  .p-top-message__inner {
    width: clamp(597.1162790698px, calc(733.6 / 430 * 100vw), 853.023255814px);
  }
}
@media (max-width: 767px) {
  .p-top-message__inner {
    padding-bottom: clamp(174.511627907px, calc(214.4 / 430 * 100vw), 249.3023255814px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-message__inner {
    width: 100%;
    padding-bottom: clamp(104.1860465116px, calc(128 / 430 * 100vw), 148.8372093023px);
  }
}
.p-top-message__title {
  padding-top: clamp(153.6px, calc(360 / 1800 * 100vw), 360px);
  writing-mode: vertical-rl;
  font-size: clamp(21.3333333333px, calc(50 / 1800 * 100vw), 50px);
  position: absolute;
  top: 0;
  right: 0;
  letter-spacing: 0.2em;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .p-top-message__title {
    padding-top: clamp(234.4186046512px, calc(288 / 430 * 100vw), 334.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-top-message__title {
    font-size: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-message__title {
    position: relative;
    margin-block: auto;
    padding-top: clamp(125.3488372093px, calc(154 / 430 * 100vw), 179.0697674419px);
    font-size: clamp(22.7906976744px, calc(28 / 430 * 100vw), 32.5581395349px);
  }
}
.p-top-message__text {
  font-size: clamp(10.6666666667px, calc(25 / 1800 * 100vw), 25px);
  letter-spacing: 0.05em;
  line-height: 2.4;
}
@media (max-width: 767px) {
  .p-top-message__text {
    font-size: clamp(16.2790697674px, calc(20 / 430 * 100vw), 23.2558139535px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-message__text {
    font-size: clamp(11.3953488372px, calc(14 / 430 * 100vw), 16.2790697674px);
    line-height: 2.8571428571;
    text-align: center;
  }
}
.p-top-message__text--01 {
  padding-top: clamp(221.8666666667px, calc(520 / 1800 * 100vw), 520px);
}
@media (max-width: 767px) {
  .p-top-message__text--01 {
    padding-top: clamp(338.6046511628px, calc(416 / 430 * 100vw), 483.7209302326px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-message__text--01 {
    padding-top: clamp(65.9302325581px, calc(81 / 430 * 100vw), 94.1860465116px);
  }
}
.p-top-message__text--02 {
  margin-top: clamp(42.6666666667px, calc(100 / 1800 * 100vw), 100px);
}
@media (max-width: 767px) {
  .p-top-message__text--02 {
    margin-top: clamp(65.1162790698px, calc(80 / 430 * 100vw), 93.023255814px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-message__text--02 {
    margin-top: clamp(43.1395348837px, calc(53 / 430 * 100vw), 61.6279069767px);
  }
}

.p-top-comparison {
  position: relative;
  background: #000;
  color: #fff;
}
.p-top-comparison__inner {
  padding-top: clamp(81.92px, calc(192 / 1800 * 100vw), 192px);
}
@media (max-width: 767px) {
  .p-top-comparison__inner {
    padding-top: clamp(125.023255814px, calc(153.6 / 430 * 100vw), 178.6046511628px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-comparison__inner {
    padding-top: clamp(68.3720930233px, calc(84 / 430 * 100vw), 97.6744186047px);
    padding-bottom: clamp(67.5581395349px, calc(83 / 430 * 100vw), 96.511627907px);
  }
}
.p-top-comparison__title {
  font-size: clamp(21.3333333333px, calc(50 / 1800 * 100vw), 50px);
  margin-bottom: clamp(23.4666666667px, calc(55 / 1800 * 100vw), 55px);
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
}
@media (max-width: 767px) {
  .p-top-comparison__title {
    font-size: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}
@media (max-width: 767px) {
  .p-top-comparison__title {
    margin-bottom: clamp(35.8139534884px, calc(44 / 430 * 100vw), 51.1627906977px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-comparison__title {
    font-size: clamp(22.7906976744px, calc(28 / 430 * 100vw), 32.5581395349px);
  }
}
.p-top-comparison__text {
  font-size: clamp(10px, calc(16 / 1800 * 100vw), 16px);
  line-height: 2.5;
  text-align: center;
  margin-bottom: clamp(47.36px, calc(111 / 1800 * 100vw), 111px);
}
@media (max-width: 767px) {
  .p-top-comparison__text {
    font-size: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-top-comparison__text {
    margin-bottom: clamp(72.2790697674px, calc(88.8 / 430 * 100vw), 103.2558139535px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-comparison__text {
    text-align: left;
    font-size: clamp(10.5813953488px, calc(13 / 430 * 100vw), 15.1162790698px);
  }
}
.p-top-comparison__item {
  position: relative;
}
.p-top-comparison__item-text {
  position: absolute;
  background: #fff;
}
.p-top-comparison__item-text--after {
  top: 0;
  left: 0;
}
.p-top-comparison__item-text--before {
  top: 0;
  right: 0;
}
.p-top-comparison__image-compare {
  position: relative;
}
.p-top-comparison__image-compare--01 {
  width: 75.4601226994%;
  max-width: 1230px;
  margin-inline: auto;
  margin-bottom: clamp(30.72px, calc(72 / 1800 * 100vw), 72px);
}
@media (max-width: 767px) {
  .p-top-comparison__image-compare--01 {
    margin-bottom: clamp(46.8837209302px, calc(57.6 / 430 * 100vw), 66.976744186px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-comparison__image-compare--01 {
    width: 100%;
    max-width: 100%;
    margin-bottom: clamp(11.3953488372px, calc(14 / 430 * 100vw), 16.2790697674px);
  }
}
.p-top-comparison__image-compare--02 {
  margin-inline: auto 0;
  width: 48.036809816%;
}
@media screen and (max-width: 767px) {
  .p-top-comparison__image-compare--02 {
    width: 100%;
    max-width: 100%;
    margin-bottom: clamp(11.3953488372px, calc(14 / 430 * 100vw), 16.2790697674px);
  }
}
.p-top-comparison__image-compare--03 {
  width: 33.4969325153%;
  position: relative;
  bottom: clamp(81.0666666667px, calc(190 / 1800 * 100vw), 190px);
  margin-left: 9.8159509202%;
}
@media (max-width: 767px) {
  .p-top-comparison__image-compare--03 {
    bottom: clamp(123.7209302326px, calc(152 / 430 * 100vw), 176.7441860465px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-comparison__image-compare--03 {
    width: 100%;
    max-width: 100%;
    bottom: 0;
    margin-left: 0;
  }
}

.p-top-gallery-wrapper {
  background: #000;
  position: relative;
  width: 100%;
  margin-bottom: -1px;
  padding-top: 80px;
  overflow: hidden;
}

.p-top-gallery {
  z-index: 1;
  position: relative;
  min-height: 450vh;
  position: relative;
  background: #000;
  padding-top: clamp(69.12px, calc(162 / 1800 * 100vw), 162px);
  padding-bottom: clamp(96px, calc(225 / 1800 * 100vw), 225px);
}
@media (max-width: 767px) {
  .p-top-gallery {
    padding-top: clamp(105.488372093px, calc(129.6 / 430 * 100vw), 150.6976744186px);
  }
}
@media (max-width: 767px) {
  .p-top-gallery {
    padding-bottom: clamp(146.511627907px, calc(180 / 430 * 100vw), 209.3023255814px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-gallery {
    min-height: 400vh;
    padding-top: clamp(35px, calc(43 / 430 * 100vw), 50px);
    padding-bottom: clamp(48.8372093023px, calc(60 / 430 * 100vw), 69.7674418605px);
  }
}
.p-top-gallery__inner {
  width: 91.9791666667%;
  max-width: 1766px;
  margin-inline: auto;
  will-change: transform;
  transform-origin: center center;
  transform: scale(0.8);
}
@media screen and (max-width: 767px) {
  .p-top-gallery__inner {
    width: 100%;
    max-width: 100%;
  }
}

.p-top-section {
  position: relative;
  overflow: hidden;
  color: #fff;
}
.p-top-section__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.p-top-section__bg:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5019607843);
  content: "";
  z-index: 1;
}
.p-top-section__bg__figure {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 120%;
  margin: 0;
}
.p-top-section__bg__figure picture {
  max-width: unset;
  display: unset;
}
.p-top-section__bg__figure__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.p-top-section__inner {
  padding-top: clamp(45.2266666667px, calc(106 / 1800 * 100vw), 106px);
  padding-bottom: clamp(40.96px, calc(96 / 1800 * 100vw), 96px);
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .p-top-section__inner {
    padding-top: clamp(69.023255814px, calc(84.8 / 430 * 100vw), 98.6046511628px);
  }
}
@media (max-width: 767px) {
  .p-top-section__inner {
    padding-bottom: clamp(62.511627907px, calc(76.8 / 430 * 100vw), 89.3023255814px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-section__inner {
    padding-top: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
    padding-bottom: clamp(65.1162790698px, calc(80 / 430 * 100vw), 93.023255814px);
  }
}
.p-top-section__title {
  width: fit-content;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(42.6666666667px, calc(100 / 1800 * 100vw), 100px);
  letter-spacing: 0.05em;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 767px) {
  .p-top-section__title {
    font-size: clamp(65.1162790698px, calc(80 / 430 * 100vw), 93.023255814px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-section__title {
    font-size: clamp(40.6976744186px, calc(50 / 430 * 100vw), 58.1395348837px);
  }
}
.p-top-section__subtitle {
  writing-mode: vertical-rl;
  font-size: clamp(21.3333333333px, calc(50 / 1800 * 100vw), 50px);
  letter-spacing: 0.2em;
  line-height: 1.7;
  margin-bottom: clamp(27.3066666667px, calc(64 / 1800 * 100vw), 64px);
}
@media (max-width: 767px) {
  .p-top-section__subtitle {
    font-size: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
  }
}
@media (max-width: 767px) {
  .p-top-section__subtitle {
    margin-bottom: clamp(41.6744186047px, calc(51.2 / 430 * 100vw), 59.5348837209px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-section__subtitle {
    writing-mode: horizontal-tb;
    font-size: clamp(22.7906976744px, calc(28 / 430 * 100vw), 32.5581395349px);
  }
}
.p-top-section__content {
  width: clamp(189.0133333333px, calc(443 / 1800 * 100vw), 443px);
}
@media (max-width: 767px) {
  .p-top-section__content {
    width: clamp(288.4651162791px, calc(354.4 / 430 * 100vw), 412.0930232558px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-section__content {
    width: 100%;
    max-width: 100%;
  }
}
.p-top-section__text {
  font-size: clamp(10px, calc(16 / 1800 * 100vw), 16px);
  line-height: 2.5;
  margin-bottom: clamp(21.76px, calc(51 / 1800 * 100vw), 51px);
}
@media (max-width: 767px) {
  .p-top-section__text {
    font-size: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-top-section__text {
    margin-bottom: clamp(33.2093023256px, calc(40.8 / 430 * 100vw), 47.4418604651px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-section__text {
    font-size: clamp(10px, calc(12 / 430 * 100vw), 13.9534883721px);
    margin-bottom: clamp(26.0465116279px, calc(32 / 430 * 100vw), 37.2093023256px);
    line-height: 2.1666666667;
  }
}
.p-top-section__link span {
  padding-block: clamp(9.8133333333px, calc(23 / 1800 * 100vw), 23px);
  padding-inline: clamp(38.8266666667px, calc(91 / 1800 * 100vw), 91px);
  font-size: clamp(10.24px, calc(24 / 1800 * 100vw), 24px);
}
@media (max-width: 767px) {
  .p-top-section__link span {
    padding-block: clamp(14.976744186px, calc(18.4 / 430 * 100vw), 21.3953488372px);
  }
}
@media (max-width: 767px) {
  .p-top-section__link span {
    padding-inline: clamp(59.2558139535px, calc(72.8 / 430 * 100vw), 84.6511627907px);
  }
}
@media (max-width: 767px) {
  .p-top-section__link span {
    font-size: clamp(15.6279069767px, calc(19.2 / 430 * 100vw), 22.3255813953px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-section__link {
    margin-inline: 0 auto;
  }
  .p-top-section__link span {
    padding-block: clamp(13.8372093023px, calc(17 / 430 * 100vw), 19.7674418605px);
    padding-inline: clamp(50.4651162791px, calc(62 / 430 * 100vw), 72.0930232558px);
    font-size: clamp(13.023255814px, calc(16 / 430 * 100vw), 18.6046511628px);
  }
}
.p-top-section:nth-child(odd) .p-top-section__subtitle {
  margin-block: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-top-section:nth-child(odd) .p-top-section__subtitle {
    margin-top: clamp(283.2558139535px, calc(348 / 430 * 100vw), 404.6511627907px);
    margin-bottom: clamp(26.0465116279px, calc(32 / 430 * 100vw), 37.2093023256px);
  }
}
.p-top-section:nth-child(odd) .p-top-section__content {
  margin-inline: auto 0;
}
.p-top-section:nth-child(even) .p-top-section__title {
  margin-inline: auto 0;
}
@media screen and (max-width: 767px) {
  .p-top-section:nth-child(even) .p-top-section__title {
    margin-inline: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .p-top-section:nth-child(even) .p-top-section__subtitle {
    margin-top: clamp(283.2558139535px, calc(348 / 430 * 100vw), 404.6511627907px);
    margin-bottom: clamp(26.0465116279px, calc(32 / 430 * 100vw), 37.2093023256px);
  }
}

.p-top-concept {
  min-height: 150vh;
  display: flex;
  z-index: 3;
  position: absolute;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  color: #fff;
}
.p-top-concept__bg {
  background-image: url(../images/top/concept-bg.png);
}

.p-top-about__bg {
  background-image: url(../images/top/about-bg.png);
}

.p-top-service__bg {
  background-image: url(../images/top/service-bg.png);
}

.p-top-works {
  padding-top: clamp(70.4px, calc(165 / 1800 * 100vw), 165px);
  padding-bottom: clamp(78.08px, calc(183 / 1800 * 100vw), 183px);
  background-color: #000;
  background-image: url(../images/top/works-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
}
@media (max-width: 767px) {
  .p-top-works {
    padding-top: clamp(107.4418604651px, calc(132 / 430 * 100vw), 153.488372093px);
  }
}
@media (max-width: 767px) {
  .p-top-works {
    padding-bottom: clamp(119.1627906977px, calc(146.4 / 430 * 100vw), 170.2325581395px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works {
    padding-top: clamp(77.3255813953px, calc(95 / 430 * 100vw), 110.4651162791px);
    padding-bottom: clamp(65.1162790698px, calc(80 / 430 * 100vw), 93.023255814px);
  }
}
.p-top-works .splide__pagination {
  right: unset;
  left: 0;
  bottom: clamp(-40px, calc(-40 / 1800 * 100vw), -17.0666666667px);
  padding: 0;
}
@media (max-width: 767px) {
  .p-top-works .splide__pagination {
    bottom: clamp(-37.2093023256px, calc(-32 / 430 * 100vw), -26.0465116279px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works .splide__pagination {
    bottom: clamp(-30.2325581395px, calc(-26 / 430 * 100vw), -21.1627906977px);
  }
}
.p-top-works .splide__pagination__page {
  width: clamp(10.6666666667px, calc(25 / 1800 * 100vw), 25px);
  height: 4px;
  transform: scaleY(0.25);
  opacity: 1;
  background: #fff;
  border-radius: 0;
}
@media (max-width: 767px) {
  .p-top-works .splide__pagination__page {
    width: clamp(16.2790697674px, calc(20 / 430 * 100vw), 23.2558139535px);
  }
}
.p-top-works .splide__pagination__page.is-active {
  background: #846B00;
}
@media screen and (max-width: 767px) {
  .p-top-works .splide__pagination__page {
    width: clamp(20.3488372093px, calc(25 / 430 * 100vw), 29.0697674419px);
  }
}
.p-top-works__inner {
  margin-left: 7.6vw;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40.1066666667px, calc(94 / 1800 * 100vw), 94px);
  overflow: hidden;
  padding-bottom: clamp(43.52px, calc(102 / 1800 * 100vw), 102px);
}
@media (max-width: 767px) {
  .p-top-works__inner {
    gap: clamp(61.2093023256px, calc(75.2 / 430 * 100vw), 87.4418604651px);
  }
}
@media (max-width: 767px) {
  .p-top-works__inner {
    padding-bottom: clamp(66.4186046512px, calc(81.6 / 430 * 100vw), 94.8837209302px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__inner {
    margin-left: 0;
    width: 93%;
    max-width: 93%;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: clamp(32.5581395349px, calc(40 / 430 * 100vw), 46.511627907px);
    padding-bottom: clamp(68.3720930233px, calc(84 / 430 * 100vw), 97.6744186047px);
  }
}
.p-top-works__title {
  width: fit-content;
  color: #fff;
  display: flex;
  gap: clamp(6.8266666667px, calc(16 / 1800 * 100vw), 16px);
}
@media (max-width: 767px) {
  .p-top-works__title {
    gap: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__title {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: clamp(6.511627907px, calc(8 / 430 * 100vw), 9.3023255814px);
  }
}
.p-top-works__title--en {
  writing-mode: vertical-rl;
  font-size: clamp(10px, calc(14 / 1800 * 100vw), 14px);
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
@media (max-width: 767px) {
  .p-top-works__title--en {
    font-size: clamp(10px, calc(11.2 / 430 * 100vw), 13.023255814px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__title--en {
    writing-mode: horizontal-tb;
    font-size: clamp(11.3953488372px, calc(14 / 430 * 100vw), 16.2790697674px);
  }
}
.p-top-works__title--ja {
  writing-mode: vertical-rl;
  font-size: clamp(17.0666666667px, calc(40 / 1800 * 100vw), 40px);
  letter-spacing: 0.2em;
}
@media (max-width: 767px) {
  .p-top-works__title--ja {
    font-size: clamp(26.0465116279px, calc(32 / 430 * 100vw), 37.2093023256px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__title--ja {
    writing-mode: horizontal-tb;
    font-size: clamp(19.5348837209px, calc(24 / 430 * 100vw), 27.9069767442px);
  }
}
.p-top-works__list {
  width: 98vw;
}
@media screen and (max-width: 767px) {
  .p-top-works__list {
    width: clamp(558.3720930233px, calc(686 / 430 * 100vw), 797.6744186047px);
  }
}
.p-top-works__item {
  aspect-ratio: 460/680;
  position: relative;
  overflow: hidden;
}
.p-top-works__item-content {
  color: #fff;
  position: absolute;
  left: 0;
  pointer-events: none;
  bottom: clamp(17.0666666667px, calc(40 / 1800 * 100vw), 40px);
  padding-inline: clamp(12.8px, calc(30 / 1800 * 100vw), 30px);
}
@media (max-width: 767px) {
  .p-top-works__item-content {
    bottom: clamp(26.0465116279px, calc(32 / 430 * 100vw), 37.2093023256px);
  }
}
@media (max-width: 767px) {
  .p-top-works__item-content {
    padding-inline: clamp(19.5348837209px, calc(24 / 430 * 100vw), 27.9069767442px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__item-content {
    padding-inline: clamp(15.4651162791px, calc(19 / 430 * 100vw), 22.0930232558px);
    bottom: clamp(16.2790697674px, calc(20 / 430 * 100vw), 23.2558139535px);
  }
}
.p-top-works__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.p-top-works__item-image-wrapper {
  position: relative;
  position: relative;
  width: 100%;
  height: 100%;
}
.p-top-works__item-image-wrapper:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.14) 30%, rgba(0, 0, 0, 0.534) 70%, rgba(0, 0, 0, 0.6) 100%);
}
@media screen and (max-width: 767px) {
  .p-top-works__item-image-wrapper:before {
    height: 80%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0.534) 70%, rgba(0, 0, 0, 0.6) 100%);
  }
}
.p-top-works__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-top-works__item-date {
  font-family: "Lustiana", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(10px, calc(12 / 1800 * 100vw), 12px);
  margin-bottom: clamp(6.8266666667px, calc(16 / 1800 * 100vw), 16px);
  line-height: 1;
}
@media (max-width: 767px) {
  .p-top-works__item-date {
    font-size: clamp(10px, calc(9.6 / 430 * 100vw), 11.1627906977px);
  }
}
@media (max-width: 767px) {
  .p-top-works__item-date {
    margin-bottom: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__item-date {
    font-size: clamp(10px, calc(12 / 430 * 100vw), 13.9534883721px);
    margin-bottom: clamp(11.3953488372px, calc(14 / 430 * 100vw), 16.2790697674px);
  }
}
.p-top-works__item-title {
  font-size: clamp(10px, calc(16 / 1800 * 100vw), 16px);
  margin-bottom: clamp(6.8266666667px, calc(16 / 1800 * 100vw), 16px);
  font-weight: 400;
  line-height: 1.6875;
}
@media (max-width: 767px) {
  .p-top-works__item-title {
    font-size: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media (max-width: 767px) {
  .p-top-works__item-title {
    margin-bottom: clamp(10.4186046512px, calc(12.8 / 430 * 100vw), 14.8837209302px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__item-title {
    font-size: clamp(13.023255814px, calc(16 / 430 * 100vw), 18.6046511628px);
    margin-bottom: clamp(11.3953488372px, calc(14 / 430 * 100vw), 16.2790697674px);
  }
}
.p-top-works__item-tags {
  width: fit-content;
  display: flex;
  gap: clamp(3.4133333333px, calc(8 / 1800 * 100vw), 8px);
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .p-top-works__item-tags {
    gap: clamp(5.2093023256px, calc(6.4 / 430 * 100vw), 7.4418604651px);
  }
}
.p-top-works__item-tag {
  font-size: clamp(10px, calc(14 / 1800 * 100vw), 14px);
  background: #846B00;
  color: #fff;
  line-height: 1.4285714286;
  padding-block: clamp(1.7066666667px, calc(4 / 1800 * 100vw), 4px);
  padding-inline: clamp(1.7066666667px, calc(4 / 1800 * 100vw), 4px);
}
@media (max-width: 767px) {
  .p-top-works__item-tag {
    font-size: clamp(10px, calc(11.2 / 430 * 100vw), 13.023255814px);
  }
}
@media (max-width: 767px) {
  .p-top-works__item-tag {
    padding-block: clamp(2.6046511628px, calc(3.2 / 430 * 100vw), 3.7209302326px);
  }
}
@media (max-width: 767px) {
  .p-top-works__item-tag {
    padding-inline: clamp(2.6046511628px, calc(3.2 / 430 * 100vw), 3.7209302326px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-works__item-tag {
    font-size: clamp(8.1395348837px, calc(10 / 430 * 100vw), 11.6279069767px);
    padding-block: clamp(3.2558139535px, calc(4 / 430 * 100vw), 4.6511627907px);
    padding-inline: clamp(3.2558139535px, calc(4 / 430 * 100vw), 4.6511627907px);
  }
}
.p-top-works__item {
  width: clamp(196.2666666667px, calc(460 / 1800 * 100vw), 460px);
}
@media (max-width: 767px) {
  .p-top-works__item {
    width: clamp(299.5348837209px, calc(368 / 430 * 100vw), 427.9069767442px);
  }
}

.p-top-infills {
  padding-bottom: clamp(38.8266666667px, calc(91 / 1800 * 100vw), 91px);
}
@media (max-width: 767px) {
  .p-top-infills {
    padding-bottom: clamp(59.2558139535px, calc(72.8 / 430 * 100vw), 84.6511627907px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-infills {
    padding-bottom: clamp(69.1860465116px, calc(85 / 430 * 100vw), 98.8372093023px);
  }
}
.p-top-infills__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url(../images/top/infills-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  aspect-ratio: 1628/400;
}
.p-top-infills__link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.39);
  transition: all 0.6s ease;
}
.p-top-infills__link:hover {
  opacity: 1;
}
.p-top-infills__link:hover:before {
  background: rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 767px) {
  .p-top-infills__link {
    background-image: url(../images/top/infills-bg-sp.png);
    aspect-ratio: 398/300;
  }
}
.p-top-infills__logo {
  position: relative;
  width: clamp(117.76px, calc(276 / 1800 * 100vw), 276px);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .p-top-infills__logo {
    width: clamp(179.7209302326px, calc(220.8 / 430 * 100vw), 256.7441860465px);
  }
}

.p-top-gallery-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: -1px;
  padding-top: 80px;
  overflow: hidden;
}

.p-top-gallery__grid__wrapper {
  z-index: 1;
  position: relative;
  min-height: 450vh;
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grid__wrapper {
    min-height: 400vh;
  }
}

.p-top-gallery__grid__inner {
  height: 350vh;
}

.p-top-gallery__grids {
  display: flex;
  align-items: center;
  height: 100vh;
}

.p-top-gallery__grids__wrapper {
  display: flex;
  position: absolute;
  flex-direction: column;
  width: 100%;
  gap: clamp(10.24px, calc(24 / 1800 * 100vw), 24px);
}
@media (max-width: 767px) {
  .p-top-gallery__grids__wrapper {
    gap: clamp(15.6279069767px, calc(19.2 / 430 * 100vw), 22.3255813953px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grids__wrapper {
    width: 97%;
    max-width: 97%;
    margin-inline: auto;
    left: 50%;
    top: calc(50% + 5.5vw);
    transform: translate(-50%, -50%);
    gap: clamp(6.511627907px, calc(8 / 430 * 100vw), 9.3023255814px);
  }
}

.p-top-gallery__grids__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  gap: clamp(10.24px, calc(24 / 1800 * 100vw), 24px);
}
@media (max-width: 767px) {
  .p-top-gallery__grids__row {
    gap: clamp(15.6279069767px, calc(19.2 / 430 * 100vw), 22.3255813953px);
  }
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grids__row {
    gap: clamp(6.511627907px, calc(8 / 430 * 100vw), 9.3023255814px);
  }
}

.p-top-gallery__grids__items {
  position: relative;
  overflow: hidden;
}

.p-top-gallery__grids__items.--gallery--01 {
  width: 22%;
  margin-right: 20%;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grids__items.--gallery--01 {
    width: 39%;
    margin-right: 27%;
  }
}

.p-top-gallery__grids__items.--gallery--01:before {
  padding-top: 56.25%;
  float: left;
  content: "";
}

.p-top-gallery__grids__items.--gallery--01:after {
  display: block;
  clear: both;
  content: "";
}

.p-top-gallery__grids__items.--gallery--02 {
  align-self: end;
  width: 15%;
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grids__items.--gallery--02 {
    width: 24%;
  }
}

.p-top-gallery__grids__items.--gallery--02:before {
  padding-top: 130%;
  float: left;
  content: "";
}

.p-top-gallery__grids__items.--gallery--02:after {
  display: block;
  clear: both;
  content: "";
}

.p-top-gallery__grids__items.--gallery--03 {
  align-self: start;
  width: 15%;
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grids__items.--gallery--03 {
    width: 24%;
  }
}

.p-top-gallery__grids__items.--gallery--03:before {
  padding-top: 130%;
  float: left;
  content: "";
}

.p-top-gallery__grids__items.--gallery--03:after {
  display: block;
  clear: both;
  content: "";
}

.p-top-gallery__grids__items.--gallery--main {
  width: 40%;
  aspect-ratio: 881/572;
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grids__items.--gallery--main {
    width: 45.5%;
    aspect-ratio: 197/249;
  }
}

.p-top-gallery__grids__items.--gallery--main:before {
  padding-top: 56.25%;
  float: left;
  content: "";
}

.p-top-gallery__grids__items.--gallery--main:after {
  display: block;
  clear: both;
  content: "";
}

.p-top-gallery__grids__items.--gallery--main .p-top-gallery__grids__items__image {
  display: none;
}

.p-top-gallery__grids__items.--gallery--04 {
  width: 22%;
  margin-right: auto;
  margin-left: 25%;
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grids__items.--gallery--04 {
    width: 60%;
    margin-left: 27%;
  }
}

.p-top-gallery__grids__items.--gallery--04:before {
  padding-top: 56.25%;
  float: left;
  content: "";
}

.p-top-gallery__grids__items.--gallery--04:after {
  display: block;
  clear: both;
  content: "";
}

.p-top-gallery__grids__items__image {
  -o-object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-gallery__grid-main {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.p-top-gallery__grid-main__items {
  position: relative;
  width: 40vw;
  overflow: hidden;
  aspect-ratio: 881/572;
}
@media screen and (max-width: 767px) {
  .p-top-gallery__grid-main__items {
    width: 45%;
    aspect-ratio: 197/249;
  }
}

.p-top-gallery__grid-main__items__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2);
}

.-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.p-top-works__slider-wrapper {
  position: relative;
}

.cursor-follower {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  width: 70px;
  height: 70px;
  aspect-ratio: 1;
  mix-blend-mode: difference;
  will-change: transform;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .cursor-follower {
    width: 50px;
    height: 50px;
  }
}
.cursor-follower img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cursor-follower img.active {
  opacity: 1;
}
.cursor-follower .cursor-arrow.left {
  transform: rotate(180deg);
}

/*# sourceMappingURL=main.css.map */