@charset "UTF-8";

.header#header {

  position: relative;

}

.main-area {

  padding-top: 0;

}

.footer {

  padding-top: 0;

}



.footer .footer-inner .page-top{

    margin: 0;

    width: 0;

    height: 0;

}

#MO260724AW {

  max-width: 100%;

  min-width: 100%;

  font-feature-settings: "palt";

  position: relative;

  --font-counter: avenir-lt-pro, sans-serif;

  --font-eng: garamond-premier-pro, serif;

  --font-italic: garamond-premier-pro-subhead, serif;

  --font-l: 300;

  --font-m: 500;

  --pc-width: 1500;

  --sp-width: 750;

  --pc-artboard-width: 615;

  --sp-artboard-width: 750;

  --black: #000000;

  --white: #ffffff;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

  --light-gray: #f4eee4;

}

#MO260724AW * {

  box-sizing: border-box;

}



/* @media (min-width: 1401px) {

  #MO260724AW {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

} */

@media (min-width: 768px) {

  #MO260724AW {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}

@media (max-width: 767px) {

  #MO260724AW {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#MO260724AW img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}



#MO260724AW a:has(img) {

  width: 100%;

  height: 100%;

}



#MO260724AW [class*="menu-item"] {

  display: flex;

  flex-direction: column;

  gap: calc(14 * var(--formula));

  position: relative;

  width: 100%;

  padding: calc(19 * var(--formula)) 0 calc(26 * var(--formula)) 0;

}

#MO260724AW [class*="menu-item"]::before,

#MO260724AW [class*="menu-item"]::after {

  content: "";

  position: absolute;

  width: 0%;

  height: 1px;

  background-color: var(--black);

  left: auto;

  right: 0;

  transition:

    width 0.4s ease,

    left 0s 0.4s,

    right 0s 0.4s;

}



#MO260724AW [class*="menu-item"]::before {

  top: 0;

}

#MO260724AW [class*="menu-item"]::after {

  bottom: 0;

}

#MO260724AW [class*="menu-item"].is-active::before,

#MO260724AW [class*="menu-item"].is-active::after {

  width: 100%;

  left: 0;

  right: auto;

  transition:

    width 0.4s ease,

    left 0s,

    right 0s;

}



@media (max-width: 767px) {

  #MO260724AW [class*="menu-item"].is-active::before,

  #MO260724AW [class*="menu-item"].is-active::after {

    transition:

      width 0.4s ease 0.2s, 

      left 0s,

      right 0s;

  }

}

#MO260724AW [class*="menu-title"] {

  font-family: var(--font-eng);

  color: var(--black);

  font-size: calc(32 * var(--formula));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: normal;

}

#MO260724AW [class*="credit-list"] {

  display: flex;

  flex-direction: column;

  gap: calc(10 * var(--formula));

}



#MO260724AW [class*="credit-list"] li {

  font-family: var(--font-italic);

  color: var(--black);

  font-size: calc(27 * var(--formula));

  line-height: calc(4/3);

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: italic;

  display: block;

  white-space: nowrap;

}



#MO260724AW [class*="credit-list"] li a{

      margin-right: calc(

      9 * var(--formula)

    );

}

#MO260724AW [class*=""] {

}

#MO260724AW [class*=""] {

}

#MO260724AW [class*=""] {

}

#MO260724AW [class*=""] {

}

/* =========================================

       Hero Section (全画面化)

    ========================================= */

.hero {

  position: relative;

  height: 100dvh;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

  position: sticky;

  top: 0;

  overflow: hidden;

}



.hero-video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

}



.video-pc {

  display: none;

}

.video-sp {

  display: block;

}



@media (min-width: 768px) {

  .video-pc {

    display: block;

  }

  .video-sp {

    display: none;

  }

}

.video-sound-btn {

  position: absolute;

  bottom: calc(20 * var(--formula));

  right: calc(20 * var(--formula));

  z-index: 10;

  width: calc(40 * var(--formula)); /* 画像のサイズに合わせて調整してください */

  height: calc(

    40 * var(--formula)

  ); /* 画像のサイズに合わせて調整してください */

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: opacity 0.3s ease;

  padding: 0;

}



/* data-state="off" の時の表示設定 */

#MO260724AW .video-sound-btn[data-state="off"] .icon-on {

  display: none;

}

#MO260724AW .video-sound-btn[data-state="off"] .icon-off {

  display: block;

}



/* data-state="on" の時の表示設定 */

#MO260724AW .video-sound-btn[data-state="on"] .icon-on {

  display: block;

}

#MO260724AW .video-sound-btn[data-state="on"] .icon-off {

  display: none;

}



/* =========================================

       Layout & Sections

    ========================================= */

.main-layout {

  display: flex;

  flex-direction: column;

  width: 100%;

  position: relative;

  z-index: 20;

  background: var(--white);

}

.left-column {

  width: 100%;

}

.right-column {

  display: none;

}



@media (min-width: 768px) {

  .main-layout {

    flex-direction: row;

  }

  .left-column {

    width: calc(615 * var(--formula_pc));

  }

  .right-column {

    display: block;

    flex: 1;

  }

}



.look-viewer-spacer {

  position: relative;

  z-index: 20;

  width: 100%;

}



.staff-credit-sp {

  height: 100dvh;

  width: 100%;

  display: flex;

  align-items: start;

  background-color: var(--black);

  z-index: 30;

  position: relative;

  margin-top: -100dvh;

  flex-direction: column;

  padding: calc(93 * var(--formula)) calc(35 * var(--formula)) 0;

  position: relative;

}

#MO260724AW .staff-credit-list {

  margin: calc(12 * var(--formula)) 0 calc(20 * var(--formula)) 0;

  gap: calc(18 * var(--formula));

}

.credit-item {

  display: flex;

  flex-direction: column;

  gap: calc(15 * var(--formula));

}

.section-title,

.credit-role {

  font-family: var(--font-eng);

  color: var(--light-gray);

  font-size: calc(34 * var(--formula));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: normal;

}

.credit-name {

  font-family: var(--font-italic);

  color: var(--light-gray);

  font-size: calc(29 * var(--formula));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: italic;

}



.staff-hr1,

.staff-hr2 {

  border: none;

  border-top: 1px solid var(--light-gray); 

  margin: calc(20 * var(--formula)) 0; 

  width: 100%;

}

.check-all-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: absolute;

  top: 78.6%;

  left: 50%;

  transform: translate(-50%, -50%);

  gap: calc(2 * var(--formula));

}

.btn-main-text {

  font-family: var(--font-eng);

  color: var(--light-gray);

  font-size: calc(50 * var(--formula));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: normal;

}

.btn-sub-text {

  font-family: var(--font-italic);

  color: var(--light-gray);

  font-size: calc(23.89 * var(--formula));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: italic;

}

@media (min-width: 768px) {

  .staff-credit-sp {

    display: none;

  }

}



.look-viewer {

  position: sticky;

  top: 0;

  width: 100%;

  height: 100dvh;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}



/* =========================================

       Image Viewer (横並び)

    ========================================= */

.image-viewport {

  width: 100%;

  height: 82.5dvh;

  overflow: hidden;

  position: relative;

  flex-shrink: 0;

}

@media (min-width: 768px) {

  .image-viewport {

    height: 100dvh;

    aspect-ratio: auto;

  }

}



.image-track {

  display: flex;

  flex-direction: column;

  height: 100%;

  will-change: transform;

}

@media (min-width: 768px) {

  .image-track {

    flex-direction: row; 

  }

}



.slide-item {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

#MO260724AW .look-counter {

  position: absolute;

  top: calc(33 * var(--formula));

  left: calc(33 * var(--formula));

  z-index: 20;

  font-family: var(--font-counter);

  color: var(--black);

  font-size: calc(19 * var(--formula));

  line-height: 1;

  letter-spacing: 0.075em;

  text-align: left;

  font-weight: var(--font-l);

  transform: translateZ(0);

  will-change: transform;

  backface-visibility: hidden;

}

#MO260724AW .view-all {

  position: absolute;

  top: calc(33 * var(--formula));

  right: calc(29 * var(--formula));

  z-index: 20;

  font-family: var(--font-counter);

  color: var(--black);

  font-size: calc(19 * var(--formula));

  line-height: 1;

  letter-spacing: 0.075em;

  text-align: left;

  font-weight: var(--font-l);

  transform: translateZ(0);

  will-change: transform;

  backface-visibility: hidden;

}

/* =========================================

       Menu Area (SP/PC Placeholder)

    ========================================= */

#sp-menu-placeholder {

  flex: 1;

  display: flex;

  flex-direction: column;

  min-height: 0;

  width: 100%;

  position: relative;

  z-index: 10;

}

@media (min-width: 768px) {

  #sp-menu-placeholder {

    display: none;

  }

}



#pc-menu-placeholder {

  position: sticky;

  top: 0;

  height: 100dvh;

  width: 100%;

  display: flex;

  flex-direction: column;

}



.bottom-menu {

  flex: 1;

  min-height: 0;

  width: 100%;

  background-color: #1e293b;

  display: flex;

  flex-direction: column;

  align-items: center;

  z-index: 10;

  position: relative;

  transition: background-color 0.3s ease;

  padding: 0.5rem 0;

}

@media (min-width: 768px) {

  .bottom-menu {

    padding: 0;

  }

}



.menu-scroll-container {

  width: 100%;

  flex: 1;

  min-height: 0;

  position: relative;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  -ms-overflow-style: none;

  overscroll-behavior: contain;

  mask-image: linear-gradient(

    to bottom,

    transparent 0%,

    black 10%,

    black 90%,

    transparent 100%

  );

  -webkit-mask-image: linear-gradient(

    to bottom,

    transparent 0%,

    black 10%,

    black 90%,

    transparent 100%

  );

}

.menu-scroll-container::-webkit-scrollbar {

  display: none;

}

@media (min-width: 768px) {

  .menu-scroll-container {

    mask-image: none;

    -webkit-mask-image: none;

  }

}



#MO260724AW .menu-list {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: start;

  box-sizing: border-box;

  padding-left: calc(32 * var(--formula));

  padding-right: calc(32 * var(--formula));

  gap: calc(60 * var(--formula));

}



#MO260724AW .menu-title-00 {

  font-size: calc(37 * var(--formula));

}

#MO260724AW .sub-title-00 {

  font-family: var(--font-italic);

  color: var(--black);

  font-size: calc(29 * var(--formula));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: italic;

}

#MO260724AW .menu-item-00{

    padding: calc(5 * var(--formula)) 0 calc(26 * var(--formula)) calc(3 * var(--formula));

}

#MO260724AW .menu-item-01{

    padding: calc(12 * var(--formula)) 0 calc(25 * var(--formula)) 0;

    gap: calc(9 * var(--formula));

}

#MO260724AW .menu-item-03{

    padding: calc(25 * var(--formula)) 0 calc(25 * var(--formula)) calc(4 * var(--formula));

    gap: calc(9 * var(--formula));

}

#MO260724AW .menu-item-05{

    padding: calc(25 * var(--formula)) 0 calc(25 * var(--formula)) calc(4 * var(--formula));

    gap: calc(9 * var(--formula));

}

#MO260724AW .menu-item-09{

    padding: calc(26 * var(--formula)) 0 calc(28 * var(--formula)) calc(1 * var(--formula));

    gap: calc(9 * var(--formula));

}



#MO260724AW .menu-item-04,

#MO260724AW .menu-item-07,

#MO260724AW .menu-item-16,

#MO260724AW .menu-item-21 {

  flex-direction: row;

  align-items: center;

  gap: calc(23 * var(--formula));

}



#MO260724AW .credit-list-01{

}

#MO260724AW .credit-list-06 li a{margin-right: calc(5 * var(--formula));}

#MO260724AW .credit-list-08 li a{margin-right: calc(9 * var(--formula));}

#MO260724AW .credit-list-09 li a{margin-right: calc(8 * var(--formula));}



.break-sp,

.break-pc {

  display: none;

}





@media (max-width: 767px) {

  .break-sp {

    display: inline;

  }

}



@media (min-width: 768px) {

  .break-pc {

    display: inline;

  }

}

/* =========================================

       Modal & Buttons (PC Only)

    ========================================= */



.inner-absolute{

  position: absolute;

  top: calc(42 * var(--formula_pc));

  right: calc(37 * var(--formula_pc));

  z-index: 50;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: calc(3 * var(--formula_pc));

  transform: translateZ(0);

  will-change: transform;

  backface-visibility: hidden;

  }

.pc-check-all-btn{

    font-family: var(--font-eng);

    color: var(--black);

    font-size: calc(20.9 * var(--formula_pc));

    line-height: 1;

    letter-spacing: 0;

    text-align: left;

    font-weight: var(--font-m);

    font-style: normal;

    text-decoration: underline 1px var(--black);

    text-underline-offset: calc(2 * var(--formula_pc));

}

.modal-open-btn {padding: 0;font-size: 0.875rem;cursor: pointer;font-family: var(--font-eng);color: var(--black);font-size: calc(20.9 * var(--formula_pc));line-height: 1;letter-spacing: 0;text-align: left;font-weight: var(--font-m);font-style: normal;text-decoration: underline 1px var(--black);text-underline-offset: calc(2 * var(--formula_pc));}



/* モーダルの絶対配置スタイル */

.credit-modal {

  position: absolute;

  z-index: 100;

  background-color: var(--black);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

/* ▼ アニメーションの起点を「右上」に設定し、サイズを0にしておく */

    transform-origin: top right;

    transform: scale(0);

    

    /* ▼ transitionに transform を追加 */

    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;

  top: calc(87 * var(--formula_pc));

  width: calc(209 * var(--formula_pc));

  height: calc(368 * var(--formula_pc));

  right: calc(34 * var(--formula_pc));

}



.credit-modal.is-active {

    opacity: 1;

    visibility: visible;

    transform: scale(1); /* 通常のサイズに拡大 */

}

.modal-content {

    width: 100%;

    position: relative;

    height: 100%;

}

.modal-title {

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 1.5rem;

  letter-spacing: 0.1em;

}

.modal-text {

  color: #9ca3af;

  line-height: 1.8;

  font-size: 0.95rem;

}

.modal-close-btn {position: absolute;width: calc(24 * var(--formula_pc));height: calc(24 * var(--formula_pc));padding: 0;border: none;background: transparent;cursor: pointer;bottom: calc(10 * var(--formula_pc));left: calc(10 * var(--formula_pc));}



.modal-close-btn::before,

.modal-close-btn::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  width: calc(24 * var(--formula_pc));  

  height: 1px; 

  background-color: var(--light-gray); 

}



/* 45度傾けてクロスさせる */

.modal-close-btn::before {

  transform: translateY(-50%) rotate(45deg);

}

.modal-close-btn::after {

  transform: translateY(-50%) rotate(-45deg);

}



@media (min-width: 768px) {

  #MO260724AW [class^="menu-item-"] {

    width: 100%;

    padding: calc(9 * var(--formula_pc)) 0 calc(8 * var(--formula_pc))

      calc(7 * var(--formula_pc));

    gap: calc(10 * var(--formula_pc));

  }

  #MO260724AW [class*="menu-title"] {

    font-family: var(--font-eng);

    color: var(--black);

    font-size: calc(17.47 * var(--formula_pc));

    line-height: 1;

    letter-spacing: 0;

    text-align: left;

    font-weight: var(--font-m);

    font-style: normal;

    cursor: pointer;

  }

  #MO260724AW [class*="credit-list"] {

    display: flex;

    flex-direction: column;

    gap: calc(10 * var(--formula));

  }

  #MO260724AW [class*="credit-list"] li {

    font-size: calc(13 * var(--formula_pc));

    font-weight: var(--font-m);

  line-height: 1;

  }

  #MO260724AW [class*="credit-list"] li a {

    display: inline-block;

    margin-right: calc(

      5 * var(--formula_pc)

    ); /* 横の余白（元の gap と同じ値） */

    margin-bottom: calc(6 * var(--formula_pc)); /* 縦の余白（行間） */

  }

  #MO260724AW .menu-list {

    display: grid !important;

    grid-template-columns: 1fr 1fr; /* 均等な2列 */

    column-gap: calc(68 * var(--formula_pc)); /* 左右の余白 */

    row-gap: calc(

      0 * var(--formula_pc)

    ); /* 上下の余白（適宜調整してください） */

    align-items: start; /* 上揃え */

    padding: 0;

  }



  #MO260724AW .menu-title-00 {

    font-size: calc(24 * var(--formula_pc));

  }

  #MO260724AW .sub-title-00 {

    font-family: var(--font-italic);

    color: var(--black);

    font-size: calc(21 * var(--formula_pc));

    line-height: 1;

    letter-spacing: 0;

    text-align: left;

    font-weight: var(--font-m);

    font-style: italic;

  }

  #MO260724AW .menu-item-00 {

    grid-column: 1 / 3;

    grid-row: 1;

    text-align: center;

    padding: calc(16 * var(--formula_pc)) 0 calc(64 * var(--formula_pc))

      calc(7 * var(--formula_pc)); /* タイトル下だけ少し広めに */

    gap: calc(5 * var(--formula_pc));

  }

  #MO260724AW .menu-item-01 {

    grid-column: 1;

    grid-row: 2;

  }

  #MO260724AW .menu-item-02 {

    grid-column: 1;

    grid-row: 3;

    gap: calc(6 * var(--formula_pc));

    margin: calc(16 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-03 {

    grid-column: 1;

    grid-row: 4;

    margin: calc(9 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-04 {

    grid-column: 1;

    grid-row: 5;

    margin: calc(5 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-05 {

    grid-column: 1;

    grid-row: 6;

    margin: calc(-27 * var(--formula_pc)) 0 0 0;

    gap: calc(7 * var(--formula_pc));

  }

  #MO260724AW .menu-item-06 {

    grid-column: 1;

    grid-row: 7;

    margin: calc(-26 * var(--formula_pc)) 0 0 0;

    gap: calc(8 * var(--formula_pc));

  }

  #MO260724AW .menu-item-07 {

    grid-column: 1;

    grid-row: 8;

    margin: calc(-6 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-08 {

    grid-column: 1;

    grid-row: 9;

    margin: calc(-49 * var(--formula_pc)) 0 0 0;

    gap: calc(7 * var(--formula_pc));

  }

  #MO260724AW .menu-item-09 {

    grid-column: 1;

    grid-row: 10;

    margin: calc(-64 * var(--formula_pc)) 0 0 0;

    gap: calc(8 * var(--formula_pc));

  }

  #MO260724AW .menu-item-10 {

    grid-column: 1;

    grid-row: 11;

    margin: calc(-64 * var(--formula_pc)) 0 0 0;

  }



  /* --- 右列 (11〜21) --- */

  #MO260724AW .menu-item-11 {

    grid-column: 2;

    grid-row: 2;

    gap: calc(8 * var(--formula_pc));

  }

  #MO260724AW .menu-item-12 {

    grid-column: 2;

    grid-row: 3;

    margin: calc(3 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-13 {

    grid-column: 2;

    grid-row: 4;

    gap: calc(7 * var(--formula_pc));

  }

  #MO260724AW .menu-item-14 {

    grid-column: 2;

    grid-row: 5;

    margin: calc(-3 * var(--formula_pc)) 0 0 0;

    gap: calc(8 * var(--formula_pc));

  }

  #MO260724AW .menu-item-15 {

    grid-column: 2;

    grid-row: 6;

    margin: calc(7 * var(--formula_pc)) 0 0 0;

    gap: calc(6 * var(--formula_pc));

  }

  #MO260724AW .menu-item-16 {

    grid-column: 2;

    grid-row: 7;

    margin: calc(9 * var(--formula_pc)) 0 0 0;

    gap: calc(6 * var(--formula_pc));

  }

  #MO260724AW .menu-item-17 {

    grid-column: 2;

    grid-row: 8;

    margin: calc(3 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-18 {

    grid-column: 2;

    grid-row: 9;

    margin: calc(2 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-19 {

    grid-column: 2;

    grid-row: 10;

    margin: calc(7 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-20 {

    grid-column: 2;

    grid-row: 11;

    margin: calc(4 * var(--formula_pc)) 0 0 0;

  }

  #MO260724AW .menu-item-21 {

    grid-column: 2;

    grid-row: 12;

  }

  #MO260724AW .menu-item-04,

  #MO260724AW .menu-item-07,

  #MO260724AW .menu-item-16,

  #MO260724AW .menu-item-21 {

    flex-direction: row;

    align-items: baseline;

    gap: calc(14 * var(--formula_pc));

  }

  #MO260724AW .credit-list-11 {

    gap: calc(7 * var(--formula_pc));

  }

  #menu-container {

    overflow-y: auto; /* 縦方向のスクロールを有効にする */

    -ms-overflow-style: none; /* IE, Edge用 */

    scrollbar-width: none; /* Firefox用 */

    padding: calc(25 * var(--formula_pc)) calc(45 * var(--formula_pc)) 0;

  }



  /* Chrome, Safari用のスクロールバー非表示設定 */

  #menu-container::-webkit-scrollbar {

    display: none;

  }



  #MO260724AW .staff-credit-list {align-items: flex-end;margin: calc(13 * var(--formula_pc)) calc(15 * var(--formula_pc)) 0 0;gap: calc(8.8 * var(--formula_pc));}

.credit-item {

  display: flex;

  flex-direction: column;

  gap: calc(8 * var(--formula_pc));

  align-items: flex-end;

}

.section-title,

.credit-role {

  font-family: var(--font-eng);

  color: var(--light-gray);

  font-size: calc(17 * var(--formula_pc));

  line-height: 1;

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-m);

  font-style: normal;

}

.credit-name {

  font-size: calc(14.75 * var(--formula_pc));

}

}