/* ©SCHNEID
映画『ONE CREATURE 無数の個性、ひとつの生きもの。』
Kazumi Nishibayashi */
@charset "UTF-8";
:root {
 --primary-color: #004D9B; /* Samurai Blue */
 --accent-color: #00A651;
 --text-color: #1A1A1A;
 --bg-color: #FFFFFF;
 --gray-bg: #F5F5F7;
 --border-color: #004D9B;
 --font-heading: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
 --font-body: 'Noto Sans JP', sans-serif;
 --transition-slow: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 --transition-fast: all 0.3s ease;
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 border-radius: 0 !important;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, nav, section, time, mark, audio, video {
 font-size: 1em;
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 background: transparent;
 vertical-align: bottom;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
 display: block;
}
html {
 font-size: 62.5%;
 scroll-behavior: smooth;
}
body {
 -webkit-text-size-adjust: 100%;
 overflow-x: hidden;
 font-size: 1.6rem;
 line-height: 2em;
 font-family: var(--font-body);
 background-color: var(--bg-color);
 color: var(--primary-color);
 font-style: inherit;
 font-weight: 500;
}
img {
 max-width: 100%;
 height: auto;
 display: block;
}
a {
 text-decoration: none;
 color: inherit;
 transition: var(--transition-fast);
}
ul {
 list-style: none;
}
p {
 font-size: clamp(1.5rem, 2vw, 1.8rem);
 line-height: 2em;
}
/* Loader */
.loader {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--primary-color);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1);
}
.loader-text {
 color: #fff;
 font-family: var(--font-heading);
 font-size: 3rem;
 font-weight: 700;
 letter-spacing: 0.1em;
 /* forwards を追加（終了時の状態を維持）
    1sだと速すぎる場合は 1.5s〜2.5s 程度にすると綺麗です
  */
 animation: loaderScaleUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 width: 70%;
 max-width: 600px;
 display: block;
 margin: auto;
 opacity: 0;
}
.loader-text img {
 width: 600px;
 height: auto;
}
/* アニメーション名を内容に合わせて変更 */
@keyframes loaderScaleUp {
 from {
  opacity: 0;
  transform: scale(0.8); /* 少し小さめの状態から開始 */
 }
 to {
  opacity: 1;
  transform: scale(1); /* 元のサイズで停止 */
 }
}
/* Header */
.header {
 position: absolute;
 top: 0;
 width: 100%;
 padding: 30px 40px;
 display: flex;
 align-items: center;
 z-index: 900;
 background: transparent;
}
.logo a {
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: 2rem;
 color: #fff; /* Initial white on hero image */
 letter-spacing: 0.05em;
}
.header-sns {
 display: flex;
 gap: 20px;
}
.header-sns a {
 color: #fff;
 font-size: clamp(2rem, 3vw, 3rem);
}
/* Menu Toggle Button (Circle) */
.menu-toggle {
 position: fixed;
 top: 30px;
 right: 30px;
 width: 100px;
 height: 100px;
 background: var(--primary-color);
 border: none;
 border-radius: 50% !important; /* Circular */
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 z-index: 2000;
 transform: scale(0);
 opacity: 0;
 transition: var(--transition-slow);
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.menu-toggle.visible {
 transform: scale(1);
 opacity: 1;
}
.menu-toggle-inner {
 width: 80px;
 height: 80px;
 border-radius: 50% !important;
 display: flex;
 justify-content: center;
 align-items: center;
}
.menu-toggle-text {
 color: #fff;
 font-family: var(--font-heading);
 font-weight: 700;
 font-size: clamp(1.5rem, 2vw, 2rem);
 letter-spacing: 0.05em;
}
.menu-toggle.is-active {
 background: #fff;
}
.menu-toggle.is-active .menu-toggle-inner {
 border-color: var(--primary-color);
}
.menu-toggle.is-active .menu-toggle-text {
 color: var(--primary-color);
}
.menu-toggle:hover {
 transform: scale(1.1);
}
/* Navigation Mask (Semi-transparent black) */
.nav-mask {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 z-index: 1400;
 opacity: 0;
 pointer-events: none;
 transition: var(--transition-slow);
}
.nav-mask.active {
 opacity: 1;
 pointer-events: auto;
}
/* Navigation Overlay */
.nav-overlay {
 position: fixed;
 top: 0;
 right: 0;
 width: 600px;
 height: 100%;
 background: var(--primary-color);
 z-index: 1500;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 padding: 120px 0 80px 100px;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 clip-path: inset(0 0 0 100%); /* Curtain effect from right */
 transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.nav-overlay.open {
 clip-path: inset(0 0 0 0);
}
.nav-links {
 text-align: left;
}
.nav-links li {
 margin: 20px 0;
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-overlay.open .nav-links li {
 opacity: 1;
 transform: translateY(0);
}
.nav-overlay.open .nav-links li:nth-child(1) {
 transition-delay: 0.25s;
}
.nav-overlay.open .nav-links li:nth-child(2) {
 transition-delay: 0.35s;
}
.nav-overlay.open .nav-links li:nth-child(3) {
 transition-delay: 0.45s;
}
.nav-overlay.open .nav-links li:nth-child(4) {
 transition-delay: 0.55s;
}
.nav-overlay.open .nav-links li:nth-child(5) {
 transition-delay: 0.65s;
}
.nav-links a {
 color: #fff;
 font-family: var(--font-heading);
 font-size: 6rem;
 line-height: 1.1em;
 font-weight: 700;
 text-transform: uppercase;
 display: block;
 transition: opacity 0.3s ease;
}
.nav-links a:hover, .sns-icons-menu a:hover {
 opacity: 0.6;
}
.sns-icons-menu {
 margin-top: 60px;
 opacity: 0;
 transform: translateY(20px);
 /* 初期状態（閉じる時）の transition を指定。
    遅延（0.85s）を削除し、一瞬で（または速やかに）消えるようにします。*/
 transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
 display: flex;
 gap: 30px;
}
/* メニューが開いた時（表示時）だけ遅延をかける */
.nav-overlay.open .sns-icons-menu {
 opacity: 1;
 transform: translateY(0);
 /* 開く時は 0.85s 待ってからふわっと出す */
 transition: opacity 0.5s ease 0.85s, transform 0.5s ease 0.85s;
}
.sns-icons-menu a {
 color: #fff;
 font-size: 4rem;
 width: 70px;
 height: 70px;
 border: 1px solid #fff;
 display: flex;
 justify-content: center;
 align-items: center;
}
/* Hero */
.hero {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 display: block;
 overflow: hidden;
 background: #002715; /* Dark Green baseline */
}
@media (max-width: 912px) {
 .hero {
  aspect-ratio: 1 / 1.414;
 }
 .header-sns {
  gap: 16px;
 }
 .sns-icons-menu a {
  font-size: 2rem;
  width: 44px;
  height: 44px;
 }
}
.hero-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: #0a0f12;
}
.hero-bg picture {
 width: 100%;
 height: 100%;
 display: block;
 opacity: 0.2;
 /* 変化することをブラウザに事前に知らせる */
 will-change: opacity;
 /* 5秒かけてクリアにする（開始を早めるためイージングを少し調整） */
 transition: opacity 5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-bg.is-loaded picture {
 opacity: 1;
}
.hero-bg img {
 width: 100%;
 height: 100%; /* For parallax vertical span */
 position: absolute;
 top: 0; /* Recenter img horizontally/vertically */
 left: 0;
 object-fit: cover;
}
.hero-content {
 position: relative;
 z-index: 2;
 color: #fff;
 width: 100%;
 height: 100%;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: center;
 padding-top: 60%; /* Balanced SP padding */
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 3s cubic-bezier(0.16, 1, 0.3, 1), transform 3s cubic-bezier(0.16, 1, 0.3, 1);
 transition-delay: 0s;
}
.hero-bg.is-loaded + .hero-content {
 opacity: 1;
 transform: translateY(0);
}
.hero-content .hero-logo {
 width: 94%;
 margin: 0 auto 10%;
}
.hero-content .flag {
 max-width: 240px;
 width: 34%;
 margin: 0 auto 5%;
}
.hero-content .hero-billing {
 max-width: 600px;
 width: 70%;
 margin: 0 auto 3%;
}
.hero-content .hero-roadshow {
 max-width: 200px;
 width: 26%;
 margin: 0 auto 8%;
}
.hero-content .hero-copyright {
 max-width: 240px;
 width: 40%;
 margin: 0 auto;
 opacity: .75;
}
.hero-catch {
 max-width: 200px;
 width: 16%;
 position: absolute;
 right: 12px;
 top: 12px;
}
@media (min-width: 913px) {
 .hero-content {
  padding-top: 17.7%;
 }
 .hero-content .hero-logo {
  width: 74.8%;
  margin: 0 auto 3.8%;
 }
 .hero-content .flag {
  width: 13%;
  margin-bottom: 1.75%;
 }
 .hero-content .hero-billing {
  width: 25%;
 }
 .hero-content .hero-roadshow {
  max-width: 220px;
  width: 13%;
  position: absolute;
  left: 10%;
  top: 79%
 }
 .hero-content .hero-copyright {
  max-width: 280px;
  width: 18%;
  position: absolute;
  left: 10.4%;
  top: 95%
 }
 .hero-catch {
  width: 7%;
  right: 4.5%;
  top: 5%;
 }
}
/* Section Common */
.section {
 padding: 120px 0;
 width: 86%;
 max-width: 1260px;
 margin: 0 auto;
}
.section-title {
 font-family: var(--font-heading);
 font-size: clamp(4rem, 6vw, 8rem);
 font-weight: 700;
 margin-bottom: 60px;
 letter-spacing: -0.02em;
 color: var(--primary-color);
 line-height: 0.9;
 text-align: center;
}
/* Trailer */
.trailer-section {
 background: var(--bg-color);
 max-width: 900px;
 padding-bottom: 20px;
}
.video-wrapper {
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
}
.video-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
/* Comment */
.comment-section {
 border-bottom: 1px solid var(--border-color);
}
.comment-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 120px;
 position: relative;
}
.comment-header {
 margin-bottom: 30px;
}
.comment-role {
 font-family: var(--font-heading);
 font-size: clamp(1.4rem, 1.8vw, 1.6rem);
 font-weight: 700;
 font-feature-settings: "palt" 1;
 color: var(--primary-color);
 display: block;
 margin-bottom: 5px;
}
.comment-name {
 font-size: clamp(4rem, 5vw, 5.2rem);
 line-height: 1em;
 font-weight: 700;
}
.comment-body p {
 text-align: justify;
}
@media (min-width: 913px) {
 .comment-grid .comment-card:first-of-type {
  position: relative;
 }
 .comment-grid .comment-card:first-of-type::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -60px;
  width: 1px;
  background-color: var(--border-color);
 }
}
/* Music */
.music-section {
 background: #fff;
}
.music-content {
 display: flex;
 gap: 60px;
}
.music-image {
 flex: 1;
}
.music-info {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.music-artist {
 font-size: clamp(2.6rem, 3.2vw, 4rem);
 font-weight: 700;
 color: var(--primary-color);
 margin-bottom: 16px;
}
.music-title {
 font-size: clamp(2.6rem, 3.2vw, 4rem);
 font-weight: 700;
 line-height: 1.2em;
 margin-bottom: 24px;
 padding-bottom: 24px;
 font-feature-settings: "palt"1;
 border-bottom: 1px solid var(--border-color);
}
/* Billing */
.billing-section {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 30px;
 margin-bottom: 60px;
}
.billing-section .flag {
 max-width: 240px;
 width: 40%;
 margin: 0 auto 5px;
}
.billing-section .billing {
 max-width: 500px;
 width: 100%;
 margin: 0 auto;
}
.billing-section .roadshow {
 max-width: 180px;
 width: 30%;
 margin: 0 auto;
}
@media (min-width: 913px) {
 .billing-section .flag {
  width: 20%;
 }
 .billing-section .roadshow {
  width: 20%;
 }
}
/* Footer */
.footer {
 padding: 80px 20px 30px;
 background: var(--primary-color);
 color: #fff;
}
.footer-sns {
 display: flex;
 justify-content: center;
 gap: 40px;
 margin-bottom: 60px;
}
.footer-sns a {
 font-size: 3rem;
 color: #fff;
}
.footer-bottom {
 max-width: 380px;
 width: 80%;
 margin: auto;
}
/* Mobile Adjustments */
@media (max-width: 912px) {
 .hero {
  /*aspect-ratio: 1 / 1.414;*/
  aspect-ratio: 1 / 1.6;
 }
 .section {
  padding: 60px 0;
 }
 .section-title {
  margin-bottom: 40px;
 }
 #trailer {
  padding: 60px 0 0;
 }
 .comment-grid {
  grid-template-columns: 1fr;
  gap: 60px;
 }
 .comment-header, .music-title, .music-artist {
  text-align: center;
 }
 .music-title {
  margin-bottom: 20px;
  padding-bottom: 20px;
 }
 .music-artist {
  margin-bottom: 12px;
 }
 .music-content {
  flex-direction: column;
  gap: 30px;
 }
 .header {
  padding: 12px 14px;
 }
 .logo a {
  font-size: 1.5rem;
 }
 .nav-overlay {
  width: 100%;
  padding: 100px 20px 80px;
  align-items: center;
  text-align: center;
 }
 .nav-links {
  text-align: center;
 }
 .nav-links a {
  font-size: 4rem;
 }
 .menu-toggle {
  width: 64px;
  height: 64px;
  top: 10px;
  right: 10px;
 }
 .menu-toggle-inner {
  width: 64px;
  height: 64px;
 }
}
@media (max-width: 480px) {
 #trailer {
  padding-top: 30px;
 }
}
/* Reveal Animations */
.reveal {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
 opacity: 1;
 transform: translateY(0);
}