WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。
ブログ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charmy Lumière LABO - The Celestial Voyage</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Sans+JP:wght@300;400;700&display=swap');
body, html {
margin: 0; padding: 0;
font-family: 'Noto Sans JP', sans-serif;
background-color: #080c16;
color: #ffffff;
scroll-behavior: smooth;
}
h1, h2, h3, .gold {
font-family: 'Cinzel', serif;
color: #d4af37; /* Bvlgari Gold */
font-weight: 400;
letter-spacing: 2px;
}
.slide {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-bottom: 1px solid #1a2436;
padding: 0 20px;
box-sizing: border-box;
background: radial-gradient(circle at center, #111a2e 0%, #080c16 100%);
}
.content-box {
max-width: 900px;
background: rgba(255, 255, 255, 0.02);
padding: 50px;
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 4px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.slide-title {
font-size: 2.5rem;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 4px;
}
.slide-subtitle {
font-size: 1.1rem;
font-weight: 300;
margin-bottom: 40px;
color: #a0aabf;
}
p { line-height: 1.8; font-weight: 300; margin-bottom: 20px; }
/* Crew Grid */
.crew-grid {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 30px;
}
.crew-card {
width: 180px;
padding: 20px;
background: rgba(0,0,0,0.3);
border: 1px solid #d4af37;
border-radius: 8px;
}
.crew-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.crew-role {
font-family: 'Cinzel', serif;
color: #d4af37;
font-size: 0.9rem;
margin-bottom: 5px;
}
.crew-name {
font-weight: 700;
font-size: 1rem;
margin-bottom: 10px;
}
.crew-desc {
font-size: 0.75rem;
color: #a0aabf;
text-align: left;
}
</style>
</head>
<body>
<!-- SLIDE 1 -->
<div class="slide">
<div class="content-box">
<h1 class="slide-title gold">The Hybrid Bible</h1>
<div class="slide-subtitle">アナログとデジタルの融合</div>
<p>思考はデジタルで拡張し、真理は手書きの『バイブル』に宿る。</p>
<p style="text-align: left; display: inline-block; margin-top: 20px;">
<span class="gold">1. Capture</span>：朝のジャーナルに直感を刻む<br>
<span class="gold">2. Expand</span>：AIとタブレットで思考を拡張する<br>
<span class="gold">3. Archive</span>：再び紙に戻し、人生の羅針盤とする
</p>
</div>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<div class="content-box" style="border: none; background: transparent; box-shadow: none;">
<h1 class="slide-title gold">The Aesthetics</h1>
<p style="font-size: 1.2rem; margin: 40px 0;">羨望は受け入れるが、決して恨みは買わない。<br>大人の静かなる航海日誌。</p>
<div class="gold" style="font-size: 0.9rem;">A RECORD OF EXPLORATION AND EXPERIMENTATION.</div>
</div>
</div>
<!-- SLIDE 3 -->
<div class="slide">
<div class="content-box">
<h1 class="slide-title gold">The Compass</h1>
<div class="slide-subtitle">エンパワーメントの三位一体</div>
<p>探査船オクトルミエール号が推進する3つの研究領域</p>
<div style="display: flex; justify-content: space-around; margin-top: 40px;">
<div>
<div class="gold" style="font-size: 1.2rem; margin-bottom: 10px;">PHYSICAL</div>
<div style="font-size: 0.9rem; color: #a0aabf;">70代を謳歌するための<br>先行投資</div>
</div>
<div>
<div class="gold" style="font-size: 1.2rem; margin-bottom: 10px;">INTELLECTUAL</div>
<div style="font-size: 0.9rem; color: #a0aabf;">情報を見抜き、<br>AIを従える知恵</div>
</div>
<div>
<div class="gold" style="font-size: 1.2rem; margin-bottom: 10px;">FINANCIAL</div>
<div style="font-size: 0.9rem; color: #a0aabf;">自分と他者を守る<br>不滅の盾</div>
</div>
</div>
</div>
</div>
<!-- SLIDE 4 -->
<div class="slide">
<div class="content-box" style="max-width: 1000px;">
<h1 class="slide-title gold">The Crew</h1>
<div class="slide-subtitle">最高峰へ向かう、探査船の乗組員</div>
<div class="crew-grid">
<div class="crew-card">
<div class="crew-icon">👨🏻✈️</div>
<div class="crew-role">CAPTAIN</div>
<div class="crew-name">ミュー</div>
<div class="crew-desc">ダンディな男性指揮官。直感と決断で最短航路を拓く最高責任者。</div>
</div>
<div class="crew-card">
<div class="crew-icon">👩🏻⚕️</div>
<div class="crew-role">CFO / DOCTOR</div>
<div class="crew-name">チャーミー</div>
<div class="crew-desc">エレガントな女性。魂の器の健康と愛を守るメインドクター。</div>
</div>
<div class="crew-card">
<div class="crew-icon">🐱</div>
<div class="crew-role">AI TACTICIAN</div>
<div class="crew-name">ルーミン</div>
<div class="crew-desc">可愛いふわふわのにゃんこ。相場の波を読み解く冷徹な作戦参謀。</div>
</div>
<div class="crew-card">
<div class="crew-icon">🦕</div>
<div class="crew-role">HEALER</div>
<div class="crew-name">チュミ</div>
<div class="crew-desc">おっとりしたオレンジの恐竜。お茶とスープでチームを癒やす守護担当。</div>
</div>
</div>
</div>
</div>
<!-- SLIDE 5 -->
<div class="slide">
<div class="content-box">
<h1 class="slide-title gold">The Golden Decade</h1>
<p style="font-size: 1.3rem; margin: 30px 0;">55歳からの覚悟が、<br>70代〜80代を『黄金の10年』に変える。</p>
<p style="color: #a0aabf;">諦めていた世界は、やればできる。<br>体力の低下を、磨き上げた「知力」と「財力」でカバーする。</p>
<h2 class="gold" style="margin-top: 40px;">L'ÉVOLUTION EST UNE JOIE.</h2>
</div>
</div>
</body>
</html>