/* Google Fonts - 大胆な英字フォントとシンプルな日本語フォント */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Noto+Sans+JP:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');



:root {

/* 主要な色を定義 */

--background-dark: #12121c;

/* グラデーションの色を全体的に明るく調整 */

--gradient-start: #66dd66; /* 明るい緑 */

--gradient-middle: #44ccff; /* 明るい水色 */

--gradient-end: #b366ff; /* 明るい紫 */

--text-light: #e0e0e0;

--accent-gray: #7a7a8a;

--accent-light-gray: #a0a0b0;

--ui-dark: #2a2a3a;

--ui-border: #4a4a5a;

--brush-color: #303030; /* ブラシテクスチャの色 (濃いグレー) */

/* ローディングバーの色を定義 */

--loading-bg-color: #12121c;

--loading-bar-border: #e0e0e0;

--loading-bar-fill: #e0e0e0;

--loading-text-color: #e0e0e0;

}



body {

font-family: 'Montserrat', 'Noto Sans JP', sans-serif;

background-color: var(--background-dark);

color: var(--text-light);

line-height: 1.6;

margin: 0;

min-height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

overflow: hidden;

position: relative;

}



/* 全てのコンテンツを囲むラッパー */

.content-wrapper {

opacity: 0;

transition: opacity 1s ease-out;

width: 100%;

min-height: 200vh;

height: auto;

display: flex;

flex-direction: column;

justify-content: flex-start;

align-items: center;

position: relative;

}

.content-wrapper.loaded {

opacity: 1;

}



/* === ローディング画面のスタイル (変更なし) === */

#loading-screen {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

background-color: var(--loading-bg-color);

display: flex; flex-direction: column; justify-content: center; align-items: center;

z-index: 9999;

transition: opacity 0.5s ease-out;

pointer-events: all;

}

#loading-screen.fade-out {

opacity: 0;

pointer-events: none;

}



/* ローディング画面内のオブジェクトレイヤー */

#loading-screen .object-layer {

position: absolute;

top: 0; left: 0; width: 100%; height: 100%;

perspective: 1000px;

z-index: 5;

opacity: 0.5;

}



.loading-text-wrapper {

display: flex; justify-content: space-between;

width: 320px;

margin-bottom: 5px;

color: var(--loading-text-color);

font-size: 1.1em; letter-spacing: 0.05em;

z-index: 10;

}



.loading-bar-container {

width: 320px;

height: 20px;

border: 2px solid var(--loading-bar-border);

background-color: transparent;

border-radius: 3px; overflow: hidden;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

z-index: 10;

}



.loading-bar-fill {

height: 100%;

width: 0%;

background-color: var(--loading-bar-fill);

transition: width 0.3s ease-out;

}



/* === 既存のトップページスタイル === */



/* 背景のブラシテクスチャ */

.brush-background {

position: fixed;

top: 0; left: 0; width: 100%; height: 100vh;

z-index: 0;

opacity: 0.8;

background-image:

radial-gradient(ellipse at 10% 20%, var(--brush-color) 0%, transparent 50%),

radial-gradient(ellipse at 80% 90%, var(--brush-color) 0%, transparent 40%),

radial-gradient(ellipse at 50% 10%, var(--brush-color) 0%, transparent 60%),

radial-gradient(ellipse at 20% 70%, var(--brush-color) 0%, transparent 55%),

radial-gradient(ellipse at 60% 40%, var(--brush-color) 0%, transparent 45%);

background-image:

linear-gradient(45deg, var(--brush-color) 25%, transparent 25%),

linear-gradient(-45deg, var(--brush-color) 25%, transparent 25%),

linear-gradient(45deg, transparent 75%, var(--brush-color) 75%),

linear-gradient(-45deg, transparent 75%, var(--brush-color) 75%);

background-size: 50px 50px;

background-blend-mode: overlay;

filter: grayscale(100%) contrast(150%);

animation: moveBrush 120s linear infinite;

}

@keyframes moveBrush { from { background-position: 0 0; } to { background-position: 100% 100%; } }



/* ヘッダー (上部のナビゲーション) */

header {

position: fixed;

top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; box-sizing: border-box; background-color: var(--ui-dark); border-bottom: 1px solid var(--ui-border); z-index: 20;

}

.header-left, .header-right { display: flex; align-items: center; gap: 20px; }

.lang-switcher { font-size: 0.9em; color: var(--text-light); }

nav a { text-decoration: none; color: var(--text-light); font-weight: 400; font-size: 0.9em; margin-left: 20px; }

nav a:hover { color: var(--gradient-middle); }

.logo-text { font-family: 'Orbitron', sans-serif; font-size: 1.2em; font-weight: 700; color: var(--gradient-end); }

.menu-toggle { width: 40px; height: 40px; background-color: var(--ui-dark); border: 1px solid var(--ui-border); border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--text-light); font-size: 1.5em; }



/* メインコンテンツエリア (1ページ目) */

.main-content {

display: flex; flex-direction: column; justify-content: center; align-items: center;

width: 100%;

height: 100vh;

position: relative;

z-index: 12;

text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

margin-top: 0;

}



/* メインタイトル「Changer Capital ANRI」を囲むラッパー */

.main-title-wrapper {

position: relative;

z-index: 12;

transform-style: preserve-3d;

perspective: 800px;

display: inline-block;

}



/* 個々の文字のスタイル */

.main-title {

font-family: 'Montserrat', sans-serif;

font-size: 6em;

font-weight: 900;

line-height: 0.9;

text-transform: uppercase;

letter-spacing: -0.05em;


background: linear-gradient(to right, var(--gradient-start), var(--gradient-middle), var(--gradient-end));

-webkit-background-clip: text;

background-clip: text;

color: transparent;


filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)) drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));

text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),

0 0 20px rgba(0, 255, 255, 0.2);


transform: translateZ(0px);

display: block;

text-align: center;

}



.sub-title { font-size: 1.5em; font-weight: 700; color: var(--text-light); margin-top: 30px; letter-spacing: 0.1em; z-index: 12; }





/* 3Dオブジェクトの雰囲気 */

.content-wrapper > .object-layer {

position: absolute; top: 0; left: 0; width: 100%; height: 100vh;

perspective: 1000px;

z-index: 11;

}



/* 3D オブジェクト共通スタイル */

.object {

position: absolute;

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

border-radius: 5px;

box-shadow: 0 0 20px rgba(0,0,0,0.5),

0 0 30px rgba(120, 120, 150, 0.2);

opacity: 0.7;

transform-style: preserve-3d;

animation: float 18s infinite ease-in-out alternate;

}



/* オブジェクトの調整：数を減らし、配置と透明度を調整 */

/* box オブジェクト */

.object.box { width: 80px; height: 80px; left: 10%; top: 20%; transform: rotateY(45deg) rotateX(20deg) translateZ(50px); opacity: 0.6; }

.object.box.pos-2 { width: 40px; height: 40px; right: 8%; top: 40%; transform: rotateY(-30deg) rotateX(-10deg) translateZ(-50px); animation-duration: 14s; opacity: 0.5; }

/* .object.box.pos-3 は削除または透明度を低く */

.object.box.pos-3 { display: none; } /* オブジェクトを非表示にする */

.object.box.pos-4 { width: 60px; height: 60px; left: 5%; top: 60%; transform: rotateZ(30deg) translateZ(30px); animation-duration: 19s; opacity: 0.7; }

.object.box.pos-5 { display: none; } /* オブジェクトを非表示にする */



/* sphere オブジェクト */

.object.sphere { width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-light-gray), var(--accent-gray)); right: 15%; bottom: 25%; transform: translateZ(-30px); animation-duration: 18s; opacity: 0.6; }

.object.sphere.pos-2 { width: 50px; height: 50px; left: 3%; bottom: 10%; background: radial-gradient(circle at 70% 70%, var(--accent-light-gray), var(--accent-gray)); transform: translateZ(10px); animation-duration: 22s; opacity: 0.7; }

/* .object.sphere.pos-3 は削除または透明度を低く */

.object.sphere.pos-3 { display: none; } /* オブジェクトを非表示にする */

.object.sphere.pos-4 { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--accent-light-gray), var(--accent-gray)); left: 40%; top: 10%; transform: translateZ(-10px); animation-duration: 20s; opacity: 0.8; }



/* ring オブジェクト */

.object.ring { width: 120px; height: 120px; background-color: transparent; border: 10px solid var(--accent-light-gray); border-radius: 50%; left: 20%; bottom: 10%; transform: rotateY(60deg) rotateX(10deg); animation-duration: 20s; opacity: 0.6; }

.object.ring.pos-2 { width: 70px; height: 70px; border: 5px solid var(--accent-light-gray); right: 30%; top: 50%; transform: rotateY(90deg) rotateX(20deg); animation-duration: 17s; opacity: 0.5; }

/* .object.ring.pos-3 は削除または透明度を低く */

.object.ring.pos-3 { display: none; } /* オブジェクトを非表示にする */

.object.ring.pos-4 { width: 90px; height: 90px; border: 7px solid var(--accent-light-gray); left: 70%; top: 30%; transform: rotateX(30deg) translateZ(20px); animation-duration: 21s; opacity: 0.6; }



/* fragment オブジェクト */

.object.fragment { width: 60px; height: 100px; background-color: var(--accent-gray); transform: skewY(-20deg) rotateZ(10deg); right: 5%; top: 5%; animation-duration: 12s; opacity: 0.5; }

.object.fragment.pos-2 { display: none; } /* オブジェクトを非表示にする */

.object.fragment.pos-3 { width: 20px; height: 30px; background-color: var(--accent-light-gray); transform: skewX(10deg) rotateZ(50deg); left: 30%; top: 90%; animation-duration: 11s; opacity: 0.6; }

/* .object.fragment.pos-4 は削除または透明度を低く */

.object.fragment.pos-4 { display: none; } /* オブジェクトを非表示にする */

/* .object.fragment.pos-5 は削除または透明度を低く */

.object.fragment.pos-5 { display: none; } /* オブジェクトを非表示にする */



/* x-shape オブジェクト */

.object.x-shape { width: 80px; height: 80px; background: transparent; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; opacity: 0.5; animation-duration: 16s; }

.object.x-shape::before, .object.x-shape::after { content: ''; position: absolute; width: 100%; height: 15px; background-color: var(--accent-gray); border-radius: 5px; box-shadow: 0 0 8px rgba(0,0,0,0.2); }

.object.x-shape::before { transform: rotate(45deg) translateZ(5px); }

.object.x-shape::after { transform: rotate(-45deg) translateZ(-5px); }

.object.x-shape.pos-1 { left: 25%; top: 35%; transform: rotateX(10deg) rotateY(20deg) translateZ(20px); animation-delay: -2s; opacity: 0.6; }

.object.x-shape.pos-2 { display: none; } /* オブジェクトを非表示にする */

.object.x-shape.pos-3 { width: 60px; height: 60px; left: 40%; top: 5%; transform: rotateX(30deg) rotateY(40deg) translateZ(30px); animation-delay: -8s; opacity: 0.5; }

.object.x-shape.pos-4 { right: 10%; top: 70%; width: 50px; height: 50px; transform: rotateX(-40deg) rotateY(10deg) translateZ(-50px); animation-delay: -12s; opacity: 0.4; }

/* .object.x-shape.pos-5 は削除または透明度を低く */

.object.x-shape.pos-5 { display: none; } /* オブジェクトを非表示にする */

/* .object.x-shape.pos-6 は削除または透明度を低く */

.object.x-shape.pos-6 { display: none; } /* オブジェクトを非表示にする */

.object.x-shape.pos-7 { left: 70%; top: 80%; width: 30px; height: 30px; transform: rotateY(20deg) rotateX(10deg) translateZ(40px); animation-delay: -25s; opacity: 0.7; }



/* orbit オブジェクト */

.object.orbit {

width: 150px;

height: 150px;

background: transparent;

border-radius: 50%;

position: absolute;

display: flex;

justify-content: center;

align-items: center;

transform-style: preserve-3d;

opacity: 0.5;

animation-duration: 25s;

border: none;

}

.object.orbit::before,

.object.orbit::after {

content: '';

position: absolute;

border-radius: 50%;

border: 3px solid var(--accent-light-gray);

box-shadow: 0 0 10px rgba(0,0,0,0.3);

}

.object.orbit::before {

width: 100%;

height: 100%;

}

.object.orbit::after {

width: 70%;

height: 70%;

transform: rotateZ(45deg);

}

.object.orbit .planet {

position: absolute;

width: 20px;

height: 20px;

border-radius: 50%;

background-color: var(--gradient-middle);

box-shadow: 0 0 8px var(--gradient-middle);

transform: translateZ(5px);

}

.object.orbit.pos-1 { left: 10%; top: 70%; transform: rotateX(70deg) rotateY(20deg) translateZ(0px); animation-delay: -3s; opacity: 0.6; }

.object.orbit.pos-2 { right: 5%; top: 20%; width: 100px; height: 100px; transform: rotateX(-60deg) rotateY(-10deg) translateZ(-50px); animation-delay: -8s; opacity: 0.4; }

/* .object.orbit.pos-3 は削除または透明度を低く */

.object.orbit.pos-3 { display: none; } /* オブジェクトを非表示にする */

.object.orbit.pos-4 { right: 25%; bottom: 5%; width: 120px; height: 120px; transform: rotateY(50deg) rotateX(10deg) translateZ(10px); animation-delay: -18s; opacity: 0.5; }

/* .object.orbit.pos-5 は削除または透明度を低く */

.object.orbit.pos-5 { display: none; } /* オブジェクトを非表示にする */



@keyframes float {

0% { transform: translateY(0) rotate(0deg) scale(1); }

25% { transform: translateY(-25px) rotate(10deg) translateX(10px) scale(1.02); }

50% { transform: translateY(-40px) rotate(20deg) translateX(-15px) scale(1.04); }

75% { transform: translateY(-20px) rotate(5deg) translateX(5px) scale(1.01); }

100% { transform: translateY(0) rotate(0deg) scale(1); }

}





/* --- DREAM STORYページ用のオブジェクト追加 (変更なし、または必要に応じて調整) --- */

/* top: 100% から 200% の間で出現させる */

.object.box.pos-6 {

width: 50px; height: 50px;

left: 80%; top: 110%; /* 2ページ目の上部 */

transform: rotateY(30deg) translateZ(10px);

animation-duration: 20s;

opacity: 0.8;

}

.object.sphere.pos-5 {

width: 65px; height: 65px;

left: 10%; top: 150%; /* 2ページ目の中央 */

border-radius: 50%;

background: radial-gradient(circle at 50% 50%, var(--accent-light-gray), var(--accent-gray));

transform: translateZ(-10px);

animation-duration: 25s;

opacity: 0.9;

}

.object.ring.pos-5 {

width: 150px; height: 150px;

border: 8px solid var(--accent-light-gray);

left: 60%; top: 180%; /* 2ページ目の下部 */

transform: rotateX(70deg) translateZ(50px);

animation-duration: 22s;

opacity: 0.7;

}

.object.x-shape.pos-8 {

width: 80px; height: 80px;

left: 30%; top: 130%; /* 2ページ目の上部 */

transform: rotateX(-40deg) rotateY(10deg) translateZ(-50px);

animation-delay: -10s;

opacity: 0.6;

}



/* ナビゲーションボタン (Prev/Next) */

.nav-button {

position: fixed;

top: 50%; transform: translateY(-50%); width: 60px; height: 60px; background-color: var(--ui-dark); border: 1px solid var(--ui-border); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--text-light); font-size: 1.5em; cursor: pointer; z-index: 15;

box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}

.nav-button.prev { left: 50px; }

.nav-button.next { right: 50px; }



/* スクロールインジケーター */

.scroll-indicator {

position: absolute; bottom: 30px; color: var(--text-light); font-size: 0.9em; z-index: 12;

}

.scroll-indicator::after { content: '↓'; display: block; margin-top: 5px; animation: bounce 1s infinite; }

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }





/* === DREAM STORYセクションのスタイル (2ページ目 - 変更なし) === */

#dream-story-section {

width: 100%;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: var(--background-dark);

position: relative;

z-index: 15;

box-sizing: border-box;

}



.dream-title {

font-family: 'Montserrat', sans-serif;

font-size: 4em;

font-weight: 900;

line-height: 1;

text-transform: uppercase;

letter-spacing: 0.1em;

position: relative;


background: linear-gradient(to right, var(--gradient-start), var(--gradient-middle), var(--gradient-end));

-webkit-background-clip: text;

background-clip: text;

color: transparent;


filter: drop-shadow(0 0 3px rgba(0, 0, 0, 1));

text-shadow: 0 0 5px rgba(255, 255, 255, 0.2),

0 0 10px rgba(0, 255, 255, 0.1);

z-index: 1;

}



.dream-subtext {

font-family: 'Noto Sans JP', sans-serif;

font-size: 1.2em;

color: var(--gradient-middle);

margin-top: 20px;

letter-spacing: 0.05em;

text-align: center;

z-index: 1;

}