@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------*/
/* ========= WELCOME  ========= */
div.about__welcome { position: relative; height: 100vh; height: 100vh; margin-top: -200px; background-color: var(--color__gray-900); }
div.about__welcome > * { height: fit-content; }
main#ABOUT h2.fullwidth-text.fit-text { position: absolute; bottom: 0; width: 100%; display: block; text-align: center; white-space: nowrap; font-size: 25vw !important; font-weight: var(--fw-bold); line-height: 1; color: var(--color__gray-50); letter-spacing: 0.05em; }

/*--------------------------------------------*/
/* ========= SCROLL INDICATOR ========= */
div.scroll-indicator { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); z-index: 10; gap: 20px; }
div.scroll-indicator p { font-size: 18px; color: var(--color__gray-50); text-align: center; white-space: nowrap; }
div.scroll-indicator .line { display: block; width: 1px; height: 40px; background-color: var(--color__gray-50); margin: 0 auto; opacity: 1; }

/*--------------------------------------------*/
/* ========= CONCEPT MSG ========= */

#conMSG { position: relative; min-height: 200vh; margin-top: 0vh; overflow: hidden; }

.parallax-bg {
  position: absolute;
  inset: -30%;
  background-image:
    linear-gradient(95deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.85) 22%,
      rgba(255,255,255,0.55) 48%,
      rgba(255,255,255,0.25) 70%,
      rgba(255,255,255,0.08) 85%,
      rgba(255,255,255,0) 100%
    ),
    url("../@assets/img/about/conceptMSG-KV.png");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  transform-origin: center center;
  will-change: transform, filter, opacity;
  z-index: -5000;
}

/* 浮遊文字コンテナ */
.floating-texts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 浮遊文字要素 */
.floating-text {
  position: absolute;
  font-family: 'Playfair Display', 'Shippori Mincho', serif;
  font-size: clamp(14px, 2vw, 32px);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  will-change: transform, opacity;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
}

.forSP { display: none; }

/* 各文字のランダムな初期位置 */
.floating-text:nth-child(1) { top: 15%; left: 8%; }
.floating-text:nth-child(2) { top: 25%; left: 72%; }
.floating-text:nth-child(3) { top: 35%; left: 15%; }
.floating-text:nth-child(4) { top: 45%; left: 85%; }
.floating-text:nth-child(5) { top: 55%; left: 25%; }
.floating-text:nth-child(6) { top: 65%; left: 65%; }
.floating-text:nth-child(7) { top: 75%; left: 35%; }
.floating-text:nth-child(8) { top: 85%; left: 55%; }
.floating-text:nth-child(9) { top: 20%; left: 45%; }
.floating-text:nth-child(10) { top: 30%; left: 5%; }
.floating-text:nth-child(11) { top: 40%; left: 75%; }
.floating-text:nth-child(12) { top: 50%; left: 20%; }
.floating-text:nth-child(13) { top: 60%; left: 80%; }
.floating-text:nth-child(14) { top: 70%; left: 10%; }
.floating-text:nth-child(15) { top: 80%; left: 60%; }
.floating-text:nth-child(16) { top: 90%; left: 40%; }
.floating-text:nth-child(17) { top: 12%; left: 30%; }
.floating-text:nth-child(18) { top: 22%; left: 70%; }
.floating-text:nth-child(19) { top: 32%; left: 12%; }
.floating-text:nth-child(20) { top: 42%; left: 82%; }
.floating-text:nth-child(21) { top: 52%; left: 28%; }
.floating-text:nth-child(22) { top: 62%; left: 68%; }
.floating-text:nth-child(23) { top: 72%; left: 18%; }
.floating-text:nth-child(24) { top: 82%; left: 78%; }
.floating-text:nth-child(25) { top: 92%; left: 38%; }
.floating-text:nth-child(26) { top: 18%; left: 58%; }
.floating-text:nth-child(27) { top: 28%; left: 8%; }
.floating-text:nth-child(28) { top: 38%; left: 88%; }
.floating-text:nth-child(29) { top: 48%; left: 22%; }
.floating-text:nth-child(30) { top: 58%; left: 62%; }
.floating-text:nth-child(31) { top: 68%; left: 32%; }
.floating-text:nth-child(32) { top: 78%; left: 72%; }
.floating-text:nth-child(33) { top: 88%; left: 16%; }
.floating-text:nth-child(34) { top: 14%; left: 52%; }
.floating-text:nth-child(35) { top: 24%; left: 42%; }
.floating-text:nth-child(36) { top: 34%; left: 76%; }
.floating-text:nth-child(37) { top: 44%; left: 26%; }
.floating-text:nth-child(38) { top: 54%; left: 86%; }
.floating-text:nth-child(39) { top: 64%; left: 14%; }
.floating-text:nth-child(40) { top: 74%; left: 54%; }
.floating-text:nth-child(41) { top: 84%; left: 34%; }
.floating-text:nth-child(42) { top: 94%; left: 74%; }
.floating-text:nth-child(43) { top: 16%; left: 46%; }
.floating-text:nth-child(44) { top: 26%; left: 6%; }
.floating-text:nth-child(45) { top: 36%; left: 66%; }
.floating-text:nth-child(46) { top: 46%; left: 36%; }
.floating-text:nth-child(47) { top: 56%; left: 76%; }
.floating-text:nth-child(48) { top: 66%; left: 24%; }
.floating-text:nth-child(49) { top: 76%; left: 64%; }
.floating-text:nth-child(50) { top: 86%; left: 44%; }

/* 浮遊文字レスポンシブ */
@media screen and (max-width: 767px) { 
  .floating-text {
    font-size: clamp(12px, 3vw, 20px);
  }
  
  .floating-text:nth-child(1) { top: 10%; left: 5%; }
  .floating-text:nth-child(2) { top: 20%; left: 75%; }
  .floating-text:nth-child(3) { top: 30%; left: 10%; }
  .floating-text:nth-child(4) { top: 40%; left: 80%; }
  .floating-text:nth-child(5) { top: 50%; left: 20%; }
  .floating-text:nth-child(6) { top: 60%; left: 70%; }
  .floating-text:nth-child(7) { top: 70%; left: 30%; }
  .floating-text:nth-child(8) { top: 80%; left: 60%; }
  .floating-text:nth-child(9) { top: 15%; left: 40%; }
  .floating-text:nth-child(10) { top: 25%; left: 2%; }
  .floating-text:nth-child(11) { top: 35%; left: 78%; }
  .floating-text:nth-child(12) { top: 45%; left: 15%; }
  .floating-text:nth-child(13) { top: 55%; left: 85%; }
  .floating-text:nth-child(14) { top: 65%; left: 8%; }
  .floating-text:nth-child(15) { top: 75%; left: 65%; }
  .floating-text:nth-child(16) { top: 85%; left: 35%; }
  .floating-text:nth-child(17) { top: 8%; left: 25%; }
  .floating-text:nth-child(18) { top: 18%; left: 75%; }
  .floating-text:nth-child(19) { top: 28%; left: 5%; }
  .floating-text:nth-child(20) { top: 38%; left: 88%; }
  .floating-text:nth-child(21) { top: 48%; left: 22%; }
  .floating-text:nth-child(22) { top: 58%; left: 72%; }
  .floating-text:nth-child(23) { top: 68%; left: 12%; }
  .floating-text:nth-child(24) { top: 78%; left: 82%; }
  .floating-text:nth-child(25) { top: 88%; left: 32%; }
  .floating-text:nth-child(26) { top: 12%; left: 62%; }
  .floating-text:nth-child(27) { top: 22%; left: 2%; }
  .floating-text:nth-child(28) { top: 32%; left: 92%; }
  .floating-text:nth-child(29) { top: 42%; left: 18%; }
  .floating-text:nth-child(30) { top: 52%; left: 68%; }
  .floating-text:nth-child(31) { top: 62%; left: 28%; }
  .floating-text:nth-child(32) { top: 72%; left: 78%; }
  .floating-text:nth-child(33) { top: 82%; left: 8%; }
  .floating-text:nth-child(34) { top: 5%; left: 58%; }
  .floating-text:nth-child(35) { top: 15%; left: 38%; }
  .floating-text:nth-child(36) { top: 25%; left: 88%; }
  .floating-text:nth-child(37) { top: 35%; left: 18%; }
  .floating-text:nth-child(38) { top: 45%; left: 92%; }
  .floating-text:nth-child(39) { top: 55%; left: 5%; }
  .floating-text:nth-child(40) { top: 65%; left: 62%; }
  .floating-text:nth-child(41) { top: 75%; left: 28%; }
  .floating-text:nth-child(42) { top: 85%; left: 82%; }
  .floating-text:nth-child(43) { top: 7%; left: 48%; }
  .floating-text:nth-child(44) { top: 17%; left: 1%; }
  .floating-text:nth-child(45) { top: 27%; left: 71%; }
  .floating-text:nth-child(46) { top: 37%; left: 31%; }
  .floating-text:nth-child(47) { top: 47%; left: 81%; }
  .floating-text:nth-child(48) { top: 57%; left: 11%; }
  .floating-text:nth-child(49) { top: 67%; left: 71%; }
  .floating-text:nth-child(50) { top: 77%; left: 41%; }
  
  /* text-stageのモバイル対応 */
  .text-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 20vh;
    min-height: 20vh;
  }
  
  .txItem--tl,
  .txItem--br {
    display: none;
  }
  
  .forSP {
    display: block;
    text-align: center;
  }
  
  .forSP span {
    display: block;
    font-size: 18px;
    line-height: 1.6;
    padding: 0.3em 0.8em;
    background: #fff;
    color: #000;
    margin-bottom: 20px;
  }
  
  .forSP span:last-child {
    margin-bottom: 0;
  }
}

.text-stage  { position: relative; z-index: 2; height: 200vh; max-width: 1440px; margin: 0 auto; }
.txItem span { display: inline-block; font-size: 32px; line-height: 1.8;  padding: 0.2em 0.6em;  background: #fff;  color: #000; position: relative; z-index: 10; }
.txItem--tl  { position: absolute; top: 20%;    left: 5%; }
.txItem--br  { position: absolute; bottom: 20%; right: 5%; }

/*--------------------------------------------*/

/* ========= INTRODUCTION ========= */
section#INTRODUCTION { min-height: 100vh; background-color: var(--color__gray-50); color: var(--color__gray-900); }
section#INTRODUCTION p { font-size: 1.5em; line-height: 1.8em; margin-bottom: 1.5em; }
section#INTRODUCTION p:last-child { margin-bottom: 0px; }
section#INTRODUCTION p.intro__copy { font-size: 2em; text-align: left; line-height: 1.5em; font-weight: var(--fw-bold); margin-bottom: 25px; }

@media screen and (max-width: 767px) { 
  section#INTRODUCTION p.intro__copy { font-size: 1.3em; }
  section#INTRODUCTION p             { font-size: .9em; text-align: left; }
}

/*--------------------------------------------*/

/* ========= STORYWORDS ========= */
div#STORYWORDS { position: relative; min-height: 100vh; height: 375vh; background-color: var(--color__gray-50); color: var(--color__gray-900); }

p.storywords01 { position: absolute; top: 10vh; left: 10vw; }
p.storywords02 { position: absolute; top: 23vh; left: -1vw; }
p.storywords04 { position: absolute; top: 28vh; left: 59vw; }
p.storywords03 { position: absolute; top: 92vh; left: 10vw; }
p.storywords05 { position: absolute; top: 152vh; left: 10vw; }
p.storywords06 { position: absolute; top: 205vh; left: 38vw; }
p.storywords07 { position: absolute; top: 300vh; left: 50%; transform: translateX(-50%); }
p.storywords08 { position: absolute; top: 144vh; left: 45vw; }
p.storywords09 { position: absolute; top: 137vh; left: 41vw; transform: scale(0.9);}
p.storywords10 { position: absolute; top: 2vh; left: 51vw; transform: scale(0.8); }
p.storywords11 { position: absolute; top: 149vh; left: 25vw; transform:scale(0.8); }

/* STORYWORDS FOR SMARTPHONE */
@media screen and (max-width: 767px) { 
  div#STORYWORDS { height: 190vh; }

  p.storywords01 {left:12vw;}              p.storywords01 img {height:100px; width:150px;} 
  p.storywords02 {top: 21vh;}              p.storywords02 img {width:250px;}
  p.storywords04 {top: 23vh; left: 83vw;}  p.storywords04 img {height: 170px;}
  p.storywords03 {top: 50vh; left: 14vw;}  p.storywords03 img {width: 180px;}
  p.storywords05 {top: 81vh; left: 14vw;}  p.storywords05 img {height: 180px;}
  p.storywords06 {top: 110vh; left: 54vw;} p.storywords06 img {width: 150px;}
  p.storywords08 {top: 78vh; left: 60vw;}  p.storywords08 img {width: 150px;}
  p.storywords09 {top: 74vh; left: 52vw;}  p.storywords09 img {width: 150px;}
  p.storywords07 {top: 145vh;}             p.storywords07 img {transform: scale(1.45);}
  p.storywords10 { top: -8vh; left: 65vw; transform: scale(0.35);}
  p.storywords11 { top: 66.5vh; left: 37vw; transform: scale(0.4); }
}

/*--------------------------------------------*/

/* ========= STORY ========= */
section#STORY    { position: relative; background-color: var(--color__gray-900); color: var(--color__gray-50); height: 125vh; overflow: hidden; }
p.story_copy_pc        { position: absolute;top: -30px;right: 0; }
p.story_copy_sp        { display: none; }
p.story_copy_pc img    { height: 85vh; }
section#STORY .inner   { position: relative; height: 100%; }
section#STORY .textBox { position: absolute; left: 0; bottom: 20vh; writing-mode: vertical-rl; text-orientation: upright; padding-block: 2rem; }

section#STORY .textBox p     { font-size: 2em; line-height: 1.5em; }
section#STORY .textBox p + p { margin-right: 2em; }

/* ========= STORY RESPONSIVE ========= */
@media screen and (max-width: 767px) { 
section#STORY    { position: relative; background-color: var(--color__gray-900); color: var(--color__gray-50); height: fit-content; overflow: hidden; }
p.story_copy_sp     { display: block; }
p.story_copy_pc     { display: none; }
section#STORY .inner { position: relative; height: 100%; }
section#STORY .textBox { position: static; margin-top: 30px; writing-mode: inherit; text-orientation: unset; padding-block: 0; }

section#STORY .textBox p     { font-size: 1.5em; line-height: 1.5em; text-align: left; white-space: wrap;}
section#STORY .textBox p + p { margin-right: 0em; }
}

/*--------------------------------------------*/

/* ========= CHARA ========= */
section#CHARA    { position: relative; background-color: var(--color__gray-900); color: var(--color__gray-50); max-height: 115vh; overflow: hidden; }
section#CHARA h3 { margin-bottom: 48px; }
section#CHARA h4 { font-size: 3em; margin-bottom: 40px; font-weight: var(--fw-bold); }
section#CHARA p  { font-size: 1.2em; line-height: 1.8em; }

section#CHARA article { position: relative; }

@media screen and (max-width: 767px) {
  section#CHARA h4 { margin-top: 30px; }
}

/* ========= CHARA RESPONSIVE ========= */
@media screen and (max-width: 767px) {
  section#CHARA { max-height: 125vh; }
}

/*--------------------------------------------*/

/* ========= FEATURES ========= */

section#FEATURES    { min-height: 100vh; }
section#FEATURES h4 { position: relative; margin-bottom:2em; font-size: 48px; text-wrap: wrap; }
span.fea_num        { position: absolute; z-index: -2000; font-size: 18em; top: -299px; color: var(--color__accent-teal);}
span.fea_title      { position: absolute; right: 0; bottom: 130px; font-size: 2em; }
section#FEATURES article div.flexBox { margin-block: 500px; }
section#FEATURES article:first-child { margin-top: -300px; }
section#FEATURES article div.flexBox:last-of-type { margin-block-end: 0px; }
.fea__caption { display: inline-block; width: 350px; height: fit-content; background-color: var(--color__gray-50); color: var(--color__gray-900); font-size: 1.5em; line-height: 1.5em; margin-left: -50px; }

/* ========= FEATURES RESPONSIVE ========= */
@media screen and (max-width: 767px) { 
  section#FEATURES    { min-height: 100vh; }
  section#FEATURES h3 { margin-bottom: 50px; }
  section#FEATURES h4 { position: relative; margin-bottom:0; font-size: 16px;  }
  span.fea_num        { position: relative; z-index: -2000; font-size: 10em; top: 0; color: var(--color__accent-teal);}
  span.fea_title      { position: absolute; left: 0em; bottom: .5em; font-size: 2em; white-space: wrap;}
  section#FEATURES article { margin-bottom: 40px; }
  section#FEATURES article:last-child  { margin-bottom: 0; }
  section#FEATURES article div.flexBox { margin-block: 0; padding: .4em; }
  section#FEATURES article:first-child { margin-top: -300px; }
  .fea__caption { display: block; width: fit-content; height: fit-content; background-color: var(--color__gray-50); color: var(--color__gray-900); font-size: 1em; line-height: 1.5em; margin-left: 0; padding: .5em; }
}

/*--------------------------------------------*/

/* ========= TRAILER ========= */

#TRAILER                    {  }
#TRAILER .trailer_container { display: flex; justify-content: center; align-items: center; max-width: 100%; height: 100%; aspect-ratio: 16 / 9; }
#TRAILER p { margin-top: 20px; text-align: center; }

/*--------------------------------------------*/
/* ========= COMMON RESPONSIVE ========= */
@media screen and (max-width: 767px) { 
  main#ABOUT h2.fullwidth-text.fit-text { font-size: 35vw; letter-spacing: 0.05em; }
  div.scroll-indicator .line { height: 30px; }
  div.scroll-indicator p { font-size: 16px; }
  section { padding-block: 50px; }

  #conMSG { min-height: 20vh; }
}