@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.2px;
  background-color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

/* .intro（FVの導入アニメーション：fv_movのFigma Makeプロトタイプを再現）
===================================================== */
html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.intro.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.intro_panel {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 390/700;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .intro_panel {
    max-width: 480px;
  }
}

.intro_groups {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease;
}
.intro_groups.is-hidden {
  opacity: 0;
}

.intro_group {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.intro_group.is-in {
  opacity: 1;
}
.intro_group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intro_group--1 {
  left: 6.9230769231cqw;
  top: 12.5641025641cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

.intro_group--2 {
  left: 33.0769230769cqw;
  top: 62.8205128205cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

.intro_group--3 {
  left: 24.6153846154cqw;
  top: 32.5641025641cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

.intro_group--4 {
  left: 13.0769230769cqw;
  top: 52.8205128205cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

.intro_group--5 {
  left: 27.1794871795cqw;
  top: 20cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

.intro_group--6 {
  left: 9.4871794872cqw;
  top: 55.3846153846cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

.intro_group--7 {
  left: 13.0769230769cqw;
  top: 15.641025641cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

.intro_group--8 {
  left: 24.6153846154cqw;
  top: 43.0769230769cqw;
  width: 61.9723076923cqw;
  height: 110.3105128205cqw;
}

/* .container（cqwの基準となる親要素）
===================================================== */
.container {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .container {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* 
===================================================== */
.fv {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 390/694;
  background-color: #fff;
}
.fv .swiper,
.fv .swiper-wrapper,
.fv .swiper-slide {
  width: 100%;
  height: 100%;
}
.fv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (min-width: 769px) {
  .fv {
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    height: 100vh;
    width: 56.1689870379vh;
    max-width: none;
    margin: 0;
  }
}

@media screen and (min-width: 769px) {
  main {
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }
}

/* .photo（作品カット・共通）
===================================================== */
.photo {
  position: relative;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plas {
  position: absolute;
  right: 2.5641025641cqw;
  bottom: 2.0512820513cqw;
  width: 3.8461538462cqw;
  height: 3.8461538462cqw;
  z-index: 2;
  display: block;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.plas::before, .plas::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}
.plas::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.2564102564cqw;
  transform: translateY(-50%);
}
.plas::after {
  top: 0;
  left: 50%;
  width: 0.2564102564cqw;
  height: 100%;
  transform: translateX(-50%);
}
.plas.plas--dark {
  color: #646464;
}
.plas.plas--white {
  color: #fff;
}

.photo--1 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 119.4871794872cqw;
}

.photo--2 {
  margin: 40px auto 0;
  width: 56.4102564103cqw;
  height: 75.0256410256cqw;
}

.photo--3 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 112.1794871795cqw;
}

.photo--4 {
  margin: 40px auto 0;
  width: 56.4102564103cqw;
  height: 70.5128205128cqw;
}

.photo--5 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 58.9316225641cqw;
}

.photo--6 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 112.1794871795cqw;
}

.photo--7 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 119.7435897436cqw;
}

.photo--8 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 100cqw;
}

.photo--9 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 56.2393148718cqw;
}

.photo--10 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 101.7948717949cqw;
}

.photo--11 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 112.1794871795cqw;
}

.photo--12 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 99.2307692308cqw;
}

.photo--13 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 129.2307692308cqw;
}

.photo--14 {
  margin: 40px auto 0;
  width: 56.4102564103cqw;
  height: 70.5128205128cqw;
}

.photo--16 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 112.0512820513cqw;
}

.photo--17 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 112.3076923077cqw;
}

.photo--18 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 96.1538461538cqw;
}

.photo--19 {
  margin: 40px auto 0;
  width: 56.4102564103cqw;
  height: 70.5128205128cqw;
}

.photo--20 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 110cqw;
}

.photo--21 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 125.3418830769cqw;
}

.photo--22 {
  margin: 40px auto 0;
  width: 56.4102564103cqw;
  height: 68.4615384615cqw;
}

.photo--23 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 112.0512820513cqw;
}

.photo--24 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 98.2051282051cqw;
}

.photo--25 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 107.6923076923cqw;
}

.photo--26 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 112.1794871795cqw;
}

.photo--27 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 96.1538461538cqw;
}

.photo--28 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 96.1538461538cqw;
}

.photo--29 {
  margin: 40px auto 0;
  width: 76.9230769231cqw;
  height: 86.6666666667cqw;
}

.photo--30 {
  margin: 40px auto 0;
  width: 89.7435897436cqw;
  height: 120.5555528205cqw;
}

/* .fade（GSAP ScrollTriggerで opacity を戻す）
===================================================== */
/* アイテムクレジット・モーダル（＋を押すとスライドではなく全画面にパッと切り替わる）
===================================================== */
html.is-panel-open,
html.is-panel-open body {
  overflow: hidden;
  height: 100%;
}

.credit_modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.credit_modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.credit_modal_close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.credit_modal_close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform-origin: center;
}
.credit_modal_close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}
.credit_modal_close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.credit_modal_inner {
  container-type: inline-size;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 70px 24px 40px;
}

.credit_modal_list {
  display: flex;
  flex-direction: column;
  gap: 25.641025641cqw;
}

.credit_modal_content {
  scroll-margin-top: 90px;
}

.credit_entry_img {
  width: 76.9230769231cqw;
  margin: 0 auto;
}
.credit_entry_img img {
  display: block;
  width: 100%;
  height: auto;
}

.credit_list {
  width: 76.9230769231cqw;
  margin: 2.5641025641cqw auto 0;
}

.credit_item {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2.5641025641cqw;
  padding: 0.2564102564cqw 0;
  color: #000;
  text-decoration: none;
}
.credit_item.is-soon {
  color: #000;
}

.credit_item_name,
.credit_item_price {
  font-family: Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-align: right;
}

.credit_item_name {
  font-weight: 700;
}

a.credit_item .credit_item_price {
  text-decoration: underline;
}

/* フッター（クレジット / ALL ITEMS / ロゴ）
===================================================== */
.footer {
  position: relative;
  margin-top: 25.8547035897cqw;
  margin-bottom: 1.2820512821cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12.8205128205cqw;
}

.footer_credit {
  font-family: Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #000;
  width: max-content;
  max-width: 90vw;
  white-space: nowrap;
}

.footer_allitems {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56.4102564103cqw;
  height: 10.2564102564cqw;
  border: 1px solid #000;
}
.footer_allitems a {
  font-family: Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.8205128205cqw;
  color: #000;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.footer_bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.8461538462cqw;
  width: max-content;
}
.footer_bottom .footer_logo {
  width: 25.641025641cqw;
  height: 4.1025641026cqw;
}
.footer_bottom .footer_logo img {
  display: block;
  width: 100%;
  height: 100%;
}
.footer_bottom .footer_copyright {
  font-family: Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 10px;
  text-align: center;
  color: #000;
}/*# sourceMappingURL=style.css.map */