```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#08111f">
<meta name="description" content="World OnAir。AI、音楽、検索、記録。アイデアを世界へ。">
<title>World OnAir | WOA公式サイト</title>

<style>
:root {
--bg: #08111f;
--panel: #111e30;
--text: #f5f8ff;
--muted: #b7c5d9;
--cyan: #35d9ff;
--orange: #ffae55;
--line: #29415b;
}

* { box-sizing: border-box; }

html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}

body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: Arial, "Noto Sans JP", sans-serif;
line-height: 1.8;
}

a {
color: inherit;
text-decoration: none;
}

.container {
width: min(1100px, 92%);
margin: auto;
}

header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(8,17,31,.97);
border-bottom: 1px solid var(--line);
}

.header-inner {
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 10px 0;
}

.logo {
font-size: 23px;
font-weight: 900;
letter-spacing: 1px;
}

.logo span, h1 span { color: var(--cyan); }

nav {
display: flex;
flex-wrap: wrap;
gap: 13px;
font-size: 14px;
}

nav a:hover, footer a:hover { color: var(--cyan); }

.hero {
padding: 85px 0;
background:
radial-gradient(ellipse at 85% 15%, #173f59, transparent 45%),
radial-gradient(ellipse at 5% 90%, #352747, transparent 40%);
}

.eyebrow {
color: var(--cyan);
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
}

h1 {
margin: 14px 0;
font-size: clamp(40px, 8vw, 70px);
line-height: 1.2;
}

.hero p {
max-width: 650px;
color: var(--muted);
font-size: 17px;
}

.actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 25px;
}

.button {
display: inline-block;
padding: 10px 18px;
border-radius: 8px;
background: var(--cyan);
color: #06111d;
font-weight: bold;
text-align: center;
}

.button.orange { background: var(--orange); }

.button.outline {
background: transparent;
border: 1px solid var(--cyan);
color: var(--text);
}

.section { padding: 60px 0; }
.section.alt { background: #0b1627; }

.section h2 {
margin: 0 0 8px;
font-size: clamp(27px, 5vw, 38px);
}

.lead {
margin: 0 0 28px;
color: var(--muted);
}

.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}

.card {
padding: 22px;
min-width: 0;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
}

.card:hover { border-color: var(--cyan); }

.card h3 { margin: 8px 0; font-size: 21px; }
.card p { color: var(--muted); font-size: 14px; }

.icon { font-size: 30px; }

.tag {
display: inline-block;
margin: 3px;
padding: 2px 9px;
border: 1px solid var(--line);
border-radius: 20px;
color: var(--cyan);
font-size: 12px;
}

.price { font-size: 28px; font-weight: bold; }
.price small { font-size: 13px; color: var(--muted); }

.notice {
margin-top: 18px;
padding: 14px;
border-left: 3px solid var(--orange);
background: #1b2635;
color: var(--muted);
font-size: 13px;
}

.account {
max-width: 650px;
margin: auto;
padding: 25px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 14px;
}

footer {
padding: 35px 0;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
}

.footer-inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}

.footer-links {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

@media (max-width: 760px) {
.header-inner { align-items: flex-start; flex-direction: column; }
.grid { grid-template-columns: 1fr; }
.hero { padding: 55px 0; }
.section { padding: 45px 0; }
}
</style>
</head>

<body>
<header>
<div class="container header-inner">
<a class="logo" href="#top">World <span>OnAir</span></a>
<nav>
<a href="#products">サービス</a>
<a href="#free">無料版</a>
<a href="#paid">有料版</a>
<a href="#about">WOAについて</a>
<a href="#account">会員案内</a>
<a href="#language">言語</a>
</nav>
</div>
</header>

<main>
<section class="hero" id="top">
<div class="container">
<div class="eyebrow">WORLD ONAIR / WOA</div>
<h1>アイデアを、<br><span>世界へ。</span></h1>
<p>
AI、音楽、検索、記録。<br>
World OnAirは、作りたいものを形にして、
必要な人に届けるためのプロジェクトです。
</p>
<div class="actions">
<a class="button" href="#products">サービスを見る</a>
<a class="button outline" href="#about">WOAについて</a>
</div>
</div>
</section>

<section class="section" id="products">
<div class="container">
<h2>WOAのサービス</h2>
<p class="lead">AIから音楽まで、新しいサービスを順次展開します。</p>

<div class="grid">
<article class="card">
<div class="icon">💻</div>
<span class="tag">AI / PC</span>
<h3>WOA AI PC</h3>
<p>パソコンの質問、動作確認、トラブルの原因調査、解決方法の案内を目指すPC向けAIアシスタント。</p>
<a class="button outline" href="#ai-pc">詳しく見る</a>
</article>

<article class="card">
<div class="icon">🔎</div>
<span class="tag">検索</span>
<h3>WOA AI Search</h3>
<p>情報を探しやすくするための検索サービス。必要な情報へ簡単にたどり着くことを目指します。</p>
<a class="button outline" href="#ai-search">詳しく見る</a>
</article>

<article class="card">
<div class="icon">🎵</div>
<span class="tag">音楽</span>
<h3>WOA Music</h3>
<p>RIANOの楽曲など、オリジナル音楽を発表・販売する音楽プロジェクト。</p>
<a class="button outline" href="#music">詳しく見る</a>
</article>

<article class="card">
<div class="icon">📝</div>
<span class="tag">記録</span>
<h3>MyLog</h3>
<p>日々のメモや記録を残し、あとから振り返り、必要な情報を探せる仕組みを目指します。</p>
<a class="button outline" href="#mylog">詳しく見る</a>
</article>

<article class="card">
<div class="icon">✨</div>
<span class="tag">キャラクター</span>
<h3>RIANO</h3>
<p>音楽やイラスト、デジタルコンテンツ、キャラクターグッズへ広がるWOAの世界。</p>
<a class="button outline" href="#riano">詳しく見る</a>
</article>

<article class="card">
<div class="icon">🚀</div>
<span class="tag">新企画</span>
<h3>新しいサービス</h3>
<p>新しいアイデアを形にし、準備ができたものから公開していきます。</p>
<a class="button outline" href="#about">WOAについて</a>
</article>
</div>
</div>
</section>

<section class="section alt" id="ai-pc">
<div class="container">
<h2>WOA AI PC</h2>
<p class="lead">パソコンが苦手な人にも、わかりやすいサポートを。</p>
<div class="grid">
<div class="card">
<h3>パソコンの質問</h3>
<p>操作方法や設定を、わかりやすい言葉で説明します。</p>
</div>
<div class="card">
<h3>トラブル解決支援</h3>
<p>症状やパソコンの状態から原因候補と解決方法を案内します。</p>
</div>
<div class="card">
<h3>メモ・情報検索</h3>
<p>保存した記録や情報を見つけやすくする機能を目指します。</p>
</div>
</div>
</div>
</section>

<section class="section" id="ai-search">
<div class="container">
<h2>WOA AI Search</h2>
<p class="lead">探したい情報を、もっと簡単に。</p>
<div class="card">
<p>キーワードの整理や関連語の活用などによって、情報探しを手助けする検索サービスを目指します。</p>
<p>機能や利用条件は、正式公開時にお知らせします。</p>
</div>
</div>
</section>

<section class="section alt" id="music">
<div class="container">
<h2>WOA Music</h2>
<p class="lead">オリジナル音楽とキャラクターの世界を届けます。</p>
<div class="card">
<h3>RIANO — 音楽プロジェクト</h3>
<p>オリジナル楽曲の発表・販売を中心に、音楽とデジタルコンテンツを展開します。</p>
<p>楽曲・販売ページへのリンクは、準備ができ次第追加します。</p>
</div>
</div>
</section>

<section class="section" id="mylog">
<div class="container">
<h2>MyLog</h2>
<p class="lead">自分の記録を残し、あとから活用する。</p>
<div class="card">
<p>メモや日々の記録を整理し、必要なときに見返せるサービスを目指します。</p>
<p>公開時期や利用条件は、決まり次第掲載します。</p>
</div>
</div>
</section>

<section class="section alt" id="riano">
<div class="container">
<h2>RIANO</h2>
<p class="lead">音楽からキャラクターグッズまで、広がる世界。</p>
<div class="card">
<p>音楽、イラスト、デジタルコンテンツ、キーホルダーなどのオリジナルグッズを企画します。</p>
<p>商品画像や販売先は、準備ができたものから掲載します。</p>
</div>
</div>
</section>

<section class="section" id="free">
<div class="container">
<h2>無料版</h2>
<p class="lead">まずは無料で使える機能から。</p>
<div class="card">
<div class="price">無料 <small>／対象サービスごと</small></div>
<ul>
<li>公開されている無料コンテンツの閲覧</li>
<li>無料提供が設定された機能の利用</li>
<li>サービスのお知らせの確認</li>
</ul>
<p>※無料で利用できる範囲はサービスによって異なります。</p>
</div>
</div>
</section>

<section class="section alt" id="paid">
<div class="container">
<h2>有料版</h2>
<p class="lead">追加機能やコンテンツを提供するプランを予定しています。</p>
<div class="grid">
<div class="card">
<h3>WOA AI PC</h3>
<p>利用できる機能や対応環境など、詳細を順次公開します。</p>
<div class="price">価格未定</div>
</div>
<div class="card">
<h3>WOA Music</h3>
<p>楽曲や関連コンテンツは、商品ごとに価格を表示します。</p>
<div class="price">商品ごと</div>
</div>
<div class="card">
<h3>その他のサービス</h3>
<p>料金・利用条件は、正式公開時に明示します。</p>
<div class="price">順次公開</div>
</div>
</div>
<p class="notice">このページはサービス紹介用です。会員決済や有料会員の自動登録はまだ実装されていません。</p>
</div>
</section>

<section class="section" id="account">
<div class="container">
<h2>会員登録・ログイン</h2>
<p class="lead">会員機能は、安全な登録・本人確認の仕組みを実装してから公開します。</p>
<div class="account">
<h3>会員登録について</h3>
<p>登録時には、異なる2つのメールアドレスと1つのパスワードを使用する設計を予定しています。</p>
<p class="notice">会員登録・ログイン機能は準備中です。このページから登録情報は送信されません。パスワードや個人情報を入力しないでください。</p>
<div class="actions">
<button class="button" type="button" onclick="accountNotice()">会員登録（準備中）</button>
<button class="button outline" type="button" onclick="accountNotice()">ログイン（準備中）</button>
</div>
<p id="account-message" role="status"></p>
</div>
</div>
</section>

<section class="section alt" id="about">
<div class="container">
<h2>World OnAirについて</h2>
<div class="card">
<p>World OnAir（WOA）は、AI、音楽、検索、記録、キャラクターコンテンツなどを企画・開発するプロジェクトです。</p>
<p>日常で使いやすいサービスを大切にしながら、アイデアを形にしていきます。</p>
</div>
</div>
</section>

<section class="section" id="language">
<div class="container">
<h2>Language</h2>
<p class="lead">現在は日本語版です。英語版・スペイン語版は順次準備します。</p>
<div class="actions">
<span class="button">日本語（公開版）</span>
<span class="button outline">English（準備中）</span>
<span class="button outline">Español（準備中）</span>
</div>
</div>
</section>
</main>

<footer>
<div class="container footer-inner">
<div>
<div class="logo">World <span>OnAir</span></div>
<p>アイデアを、世界へ。</p>
<p>© <span id="year"></span> World OnAir</p>
</div>
<div class="footer-links">
<a href="#products">サービス</a>
<a href="#free">無料版</a>
<a href="#paid">有料版</a>
<a href="#account">会員案内</a>
<a href="#top">ページ上部へ</a>
</div>
</div>
</footer>

<script>
document.getElementById("year").textContent = new Date().getFullYear();

function accountNotice() {
document.getElementById("account-message").textContent =
"会員登録・ログイン機能は現在準備中です。";
}
</script>
</body>
</html>
```