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

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-size: 3.2vw;
  transition: all 1.6s ease 0s;
  /* height: 500vh; GSAP側で制御するため不要 */
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  body {
    font-size: 0.9027777778vw;
  }
}

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

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

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

.load_2 {
  position: fixed;
  height: 100svh;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
  opacity: 0; /* JSで制御するため最初は非表示 */
  visibility: hidden; /* JSで制御するため最初は非表示 */
  /* ローディングアニメーション用スタイル */
}
.load_2 h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 54.6666666667vw;
}
@media screen and (min-width: 769px) {
  .load_2 h1 {
    width: 20.625vw;
  }
}
.load_2.is-active ul {
  position: relative;
  width: 100%;
  height: 100%;
}
.load_2.is-active ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* GSAPで制御するため最初は非表示 */
  visibility: hidden; /* GSAPで制御するため最初は非表示 */
}
.load_2.is-active ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がli要素いっぱいに広がるように */
}

.load_pc_container {
  display: flex;
  height: 100svh;
  width: 100%; /* 画面幅いっぱいに */
  position: absolute; /* .load_2 の子要素として絶対配置 */
  top: 0;
  left: 0;
  z-index: 5; /* h1より下、背景より上 */
}
.load_pc_container .load_pc_slot {
  position: relative;
  width: 50%; /* 2つのスロットが横並び */
  height: 100%;
  overflow: hidden; /* はみ出た画像を隠す */
}
.load_pc_container .load_pc_slot img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.load_pc_container .load_pc_slot .pc-load-img-overlay {
  opacity: 0;
  visibility: hidden;
}

/* ヘッダー・フッター固定、中央コンテンツのみ横スクロール */
.flex {
  /* position: fixed; */ /* ScrollTriggerのために削除 */
  top: 0;
  left: 0;
  /* width: 100%; */ /* 不要なため削除 */
  display: flex;
  flex-direction: column;
  height: 100svh; /* 100vhから100svhに変更してアドレスバーなどを考慮 */
  overflow: hidden;
}

header {
  flex-shrink: 0;
  height: 16svh;
  position: relative; /* z-indexを有効にするため */
  z-index: 1; /* 他の要素より手前に表示 */
  background-color: #fff; /* 背景色がないと透けてしまうため設定 */
}
header div {
  opacity: 0; /* JSで表示するため最初は非表示 */
  width: 21svh;
  margin-top: 5svh;
  margin-left: 6vw;
}
@media screen and (min-width: 769px) {
  header div {
    margin-left: 5%;
  }
}

.horizontal {
  height: 73svh; /* 高さを80svhに固定 */
  overflow: hidden;
  opacity: 0; /* JSで表示するため最初は非表示 */
}
@media screen and (min-width: 769px) {
  .horizontal {
    height: 70svh;
  }
}

.horizontal_inner {
  display: flex;
  height: 100%; /* 親要素(.horizontal)の高さに合わせる */
  /* 見切れ防止のため、ビューポート幅に応じた余白を追加 */
}
@media screen and (max-width: 768px) {
  .horizontal_inner {
    padding-right: 10vw;
  }
}

.panel {
  /* min-width: 100vw; */ /* コンテンツの幅に合わせるためコメントアウト */
  height: 100%;
}
.panel img {
  height: 100%;
  width: auto;
}

.bottom {
  flex-shrink: 0; /* 縮まないようにする */
  position: relative; /* z-indexを有効にするため */
  z-index: 1; /* 他の要素より手前に表示 */
  display: flex;
  align-items: center;
  padding: 0 6vw;
  gap: 30px;
  justify-content: space-between;
  margin-top: 4svh;
  opacity: 0; /* JSで制御するため最初は非表示 */
}
@media screen and (min-width: 769px) {
  .bottom {
    padding: 0 5%;
    margin-top: 5.5svh;
  }
}
.bottom p {
  font-size: 3.4666666667vw;
}
@media screen and (min-width: 769px) {
  .bottom p {
    font-size: 17px;
  }
}
.bottom p a {
  border-bottom: 1px solid;
}

.scrollbar {
  width: 150px;
  height: 2px;
  background-color: #ccc;
}
@media screen and (min-width: 769px) {
  .scrollbar {
    width: 180px;
    height: 3px;
  }
}

.scrollbar_thumb {
  width: 0;
  height: 100%;
  background-color: #333;
}

.credit {
  width: fit-content;
  white-space: nowrap;
  line-height: 0.9;
}
.credit li a span {
  text-decoration: underline;
  margin-left: 5%;
}

.img_1 {
  margin-left: 6vw;
}
@media screen and (min-width: 769px) {
  .img_1 {
    margin-left: 5vw;
  }
}

.img1_cre {
  margin-left: 5%;
  margin-top: auto;
  margin-right: -27vw;
}
@media screen and (min-width: 769px) {
  .img1_cre {
    margin-left: 2%;
    margin-right: -5vw;
  }
}

.img_2 {
  margin-left: -15%;
  margin-right: 5%;
  height: 60%;
}
@media screen and (min-width: 769px) {
  .img_2 {
    margin-left: -8%;
    margin-right: 1%;
  }
}

.img_3 {
  height: 60%;
  margin-top: auto;
  margin-right: 30%;
}
@media screen and (min-width: 769px) {
  .img_3 {
    margin-right: 12%;
  }
}

.img_4 {
  height: 86%;
  margin-top: 9%;
}
@media screen and (min-width: 769px) {
  .img_4 {
    margin-top: 3%;
  }
}

.img4_cre {
  margin-left: 5%;
  margin-top: auto;
  margin-bottom: 7%;
}
@media screen and (min-width: 769px) {
  .img4_cre {
    margin-left: 2%;
    margin-bottom: 2%;
  }
}

.img_6 {
  height: 86%;
  margin: 0 auto 0 15vw;
}
@media screen and (min-width: 769px) {
  .img_6 {
    margin: 0 auto 0 6vw;
  }
}

.img_7 {
  width: 52vw;
}
@media screen and (min-width: 769px) {
  .img_7 {
    width: 16vw;
  }
}
.img_7 img {
  width: 100%;
}

.img_7_box {
  margin: auto 0% 0 5%;
}
@media screen and (min-width: 769px) {
  .img_7_box {
    margin: auto 0% 0 2%;
  }
}
.img_7_box .credit {
  margin-bottom: 10%;
}

.img_9_box {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .img_9_box {
    width: 86vw;
  }
}
.img_9_box .img9_top {
  display: flex;
  height: 47%;
  gap: 5%;
  margin-left: -15%;
  /* %指定だと親要素の幅が基準になり意図しない余白が生まれるため、vh単位に変更 */
  margin-top: 5vh;
}
@media screen and (max-width: 768px) {
  .img_9_box .img9_top {
    margin-left: -15vw;
  }
}

.img_11 {
  margin-left: 26vw;
}
@media screen and (min-width: 769px) {
  .img_11 {
    margin-left: 8vw;
  }
}

.img_10 {
  height: 32%;
  margin: 4% auto 0 24%;
}
@media screen and (max-width: 768px) {
  .img_10 {
    margin: 4% auto 0 15vw;
  }
}

.img12_cre {
  margin: auto 15vw 0 5%;
}
@media screen and (min-width: 769px) {
  .img12_cre {
    margin: auto 8vw 0 2%;
  }
}

/* css/style.css に追記 */
.swiper {
  width: 100vw; /* 画面幅いっぱいに設定 */
  /* 高さは必要に応じて調整してください */
  height: 100%; /* 親の.panelの高さに合わせる */
}
@media screen and (min-width: 769px) {
  .swiper {
    width: 27vw;
  }
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img_6 .swiper {
  width: 83vw;
}
@media screen and (min-width: 769px) {
  .img_6 .swiper {
    width: 23vw;
  }
}

.img_7_swiper .swiper {
  width: 53vw;
}
@media screen and (min-width: 769px) {
  .img_7_swiper .swiper {
    width: 15vw;
  }
}

.img_18 {
  height: 55%;
  margin-left: 29vw;
}
@media screen and (min-width: 769px) {
  .img_18 {
    margin-left: 11vw;
  }
}

.img_19 {
  height: 40%;
  margin: 30% -83vw auto 5%;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .img_19 {
    margin: 9% -23% auto 1%;
  }
}

.img19_cre {
  margin: auto 10% 0 auto;
  text-align: right;
}
@media screen and (min-width: 769px) {
  .img19_cre {
    margin: auto 3% 0 auto;
  }
}

.img_20 {
  margin-right: 40vw;
}
@media screen and (min-width: 769px) {
  .img_20 {
    margin-right: 12%;
  }
}

.img_21 {
  width: 81vw;
}
@media screen and (min-width: 769px) {
  .img_21 {
    width: 21vw;
  }
}

.img_27 {
  margin-left: 37vw;
}
@media screen and (min-width: 769px) {
  .img_27 {
    margin-left: 11vw;
  }
}

.img_34 {
  margin-left: 12vw;
}
@media screen and (min-width: 769px) {
  .img_34 {
    margin-left: 6vw;
  }
}

.img_8 {
  margin-left: 35vw;
}
@media screen and (min-width: 769px) {
  .img_8 {
    margin-left: 12%;
  }
}

.img_36_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 5%;
}
@media screen and (min-width: 769px) {
  .img_36_box {
    margin-left: 2%;
  }
}
.img_36_box div {
  height: 45%;
}

.sns_box {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: end;
  margin-left: 40%;
  white-space: nowrap;
  padding-bottom: 5%;
}
@media screen and (min-width: 769px) {
  .sns_box {
    margin-left: 30%;
  }
}
.sns_box .all_btn {
  border: 1px solid;
  padding: 3% 10%;
  font-size: 15px;
}
.sns_box .b_logo {
  margin: 30% 0 10%;
}
.sns_box .b_logo img {
  height: 8vw;
}
@media screen and (min-width: 769px) {
  .sns_box .b_logo img {
    height: 2.5vw;
  }
}
.sns_box .sns {
  text-decoration: underline;
  font-size: 12px;
  margin-bottom: 2%;
}
.sns_box .copy {
  margin-top: 10%;
}

/* --- All Looks Modal --- */
#all_looks {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;
}
#all_looks.is-active {
  opacity: 1;
  visibility: visible;
}
#all_looks p {
  text-align: center;
  font-size: 17px;
  margin: 20% 10% 6%;
}
@media screen and (min-width: 769px) {
  #all_looks p {
    font-size: 26px;
    margin: 10% auto 6%;
  }
}
#all_looks ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3vw;
  width: 90%;
  margin: 0 auto 10%;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  #all_looks ul {
    width: 73%;
    gap: 2vw;
    justify-content: left;
  }
}
#all_looks ul li {
  width: calc(50% - 1.5vw);
}
@media screen and (min-width: 769px) {
  #all_looks ul li {
    width: calc(33.5% - 1.5vw);
  }
}
#all_looks ul li a {
  position: relative;
  /* position:relative を正しく機能させるために追加 */
  display: block;
}
#all_looks ul li a .plus {
  position: absolute;
  bottom: 3%;
  right: 4%;
  width: 15%;
  z-index: 99;
}
@media screen and (min-width: 769px) {
  #all_looks ul li a .plus {
    width: 8%;
  }
}

.close-all-looks {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 25px;
  height: 25px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0;
}
.close-all-looks::before, .close-all-looks::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}
.close-all-looks::before {
  transform: rotate(45deg);
}
.close-all-looks::after {
  transform: rotate(-45deg);
}

.last img {
  height: 5%;
}
@media screen and (min-width: 769px) {
  .last img {
    height: 5.2vw;
  }
}/*# sourceMappingURL=style.css.map */