File: /virtual/moonarc/public_html/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MoonArc｜月のアーク - 暮らしに寄り添う、上質なセレクション</title>
<!-- 搜索引擎优化 -->
<meta name="description" content="MoonArc（ムーンアーク）は、日常に彩りと安らぎをもたらす、厳選されたホーム＆ライフスタイルアイテムを提供するブランドです。" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌙</text></svg>" />
<style>
/* ----- リセット & ベース ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
background-color: #faf9f6;
color: #1e1e1e;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ----- ヘッダー / ナビゲーション ----- */
header {
background-color: #ffffff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
position: sticky;
top: 0;
z-index: 100;
padding: 16px 0;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 4px;
color: #2c2c2c;
}
.logo span {
font-weight: 700;
color: #b89b7b;
}
.nav-links {
display: flex;
gap: 32px;
font-size: 0.95rem;
font-weight: 500;
color: #444;
}
.nav-links a {
transition: color 0.2s;
}
.nav-links a:hover {
color: #b89b7b;
}
.header-actions {
display: flex;
align-items: center;
gap: 20px;
}
.header-actions .icon-btn {
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
transition: transform 0.2s;
}
.header-actions .icon-btn:hover {
transform: scale(1.05);
}
/* ----- ヒーロー ----- */
.hero {
padding: 80px 0 64px;
text-align: center;
background: linear-gradient(145deg, #f3f0ea 0%, #faf9f6 100%);
}
.hero h1 {
font-size: 3.2rem;
font-weight: 300;
letter-spacing: 6px;
margin-bottom: 16px;
}
.hero h1 strong {
font-weight: 700;
color: #b89b7b;
}
.hero p {
font-size: 1.2rem;
color: #555;
max-width: 600px;
margin: 0 auto 32px;
}
.hero .btn-primary {
display: inline-block;
background-color: #2c2c2c;
color: #fff;
padding: 14px 48px;
border-radius: 40px;
font-weight: 500;
letter-spacing: 2px;
transition: background-color 0.3s, transform 0.2s;
}
.hero .btn-primary:hover {
background-color: #b89b7b;
transform: translateY(-2px);
}
/* ----- セクション共通 ----- */
section {
padding: 72px 0;
}
.section-title {
font-size: 2rem;
font-weight: 300;
letter-spacing: 4px;
text-align: center;
margin-bottom: 8px;
}
.section-subtitle {
text-align: center;
color: #777;
margin-bottom: 48px;
font-size: 0.95rem;
}
/* ----- 特徴 / 商品 ----- */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 40px;
}
.feature-item {
background: #fff;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
transition: transform 0.25s, box-shadow 0.25s;
}
.feature-item:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.feature-item .emoji-big {
font-size: 3.2rem;
margin-bottom: 16px;
}
.feature-item h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
}
.feature-item p {
color: #666;
font-size: 0.95rem;
}
/* ----- ブランドストーリー ----- */
.story {
background-color: #ffffff;
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.story-text h2 {
font-size: 2rem;
font-weight: 300;
letter-spacing: 3px;
margin-bottom: 16px;
}
.story-text h2 span {
font-weight: 700;
color: #b89b7b;
}
.story-text p {
color: #555;
margin-bottom: 16px;
}
.story-image {
background: #eae7e0;
border-radius: 20px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: #b89b7b;
}
/* ----- testimonial ----- */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
}
.testimonial-item {
background: #fff;
border-radius: 16px;
padding: 28px 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
border: 1px solid #f0ede8;
}
.testimonial-item .stars {
color: #d4b48c;
font-size: 1.2rem;
letter-spacing: 2px;
}
.testimonial-item blockquote {
font-style: normal;
margin: 12px 0 8px;
color: #333;
}
.testimonial-item .name {
font-size: 0.85rem;
color: #888;
}
/* ----- ニュースレター ----- */
.newsletter {
background: #f3f0ea;
text-align: center;
padding: 64px 0;
}
.newsletter h2 {
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 3px;
margin-bottom: 8px;
}
.newsletter p {
color: #555;
margin-bottom: 24px;
}
.newsletter-form {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.newsletter-form input {
padding: 12px 20px;
border: 1px solid #ddd;
border-radius: 40px;
width: 300px;
font-size: 1rem;
outline: none;
transition: border-color 0.2s;
}
.newsletter-form input:focus {
border-color: #b89b7b;
}
.newsletter-form button {
background-color: #2c2c2c;
color: #fff;
border: none;
padding: 12px 36px;
border-radius: 40px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
.newsletter-form button:hover {
background-color: #b89b7b;
}
/* ----- フッター ----- */
footer {
background-color: #1e1e1e;
color: #ccc;
padding: 48px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 32px;
}
.footer-brand .logo {
color: #eee;
font-size: 1.6rem;
}
.footer-brand p {
font-size: 0.9rem;
margin-top: 8px;
color: #aaa;
}
.footer-col h4 {
color: #fff;
font-weight: 500;
margin-bottom: 12px;
font-size: 1rem;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 8px;
font-size: 0.9rem;
}
.footer-col ul li a:hover {
color: #b89b7b;
}
.footer-bottom {
border-top: 1px solid #333;
padding-top: 24px;
text-align: center;
font-size: 0.8rem;
color: #777;
}
/* ----- レスポンシブ ----- */
@media (max-width: 768px) {
.header-inner {
flex-wrap: wrap;
gap: 12px;
}
.nav-links {
order: 3;
width: 100%;
justify-content: center;
gap: 20px;
font-size: 0.85rem;
}
.hero h1 {
font-size: 2.2rem;
}
.story-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.newsletter-form input {
width: 100%;
max-width: 320px;
}
}
@media (max-width: 480px) {
.hero {
padding: 48px 0 40px;
}
.hero h1 {
font-size: 1.8rem;
letter-spacing: 2px;
}
.section-title {
font-size: 1.6rem;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
</style>
</head>
<body>
<!-- ===== ヘッダー ===== -->
<header>
<div class="container header-inner">
<a href="#" class="logo">Moon<span>Arc</span></a>
<nav class="nav-links">
<a href="#">ホーム</a>
<a href="#">商品</a>
<a href="#">ストーリー</a>
<a href="#">お問い合わせ</a>
</nav>
<div class="header-actions">
<button class="icon-btn" aria-label="検索">🔍</button>
<button class="icon-btn" aria-label="カート">🛒</button>
</div>
</div>
</header>
<!-- ===== ヒーロー ===== -->
<section class="hero">
<div class="container">
<h1>月が導く、<br /><strong>上質な暮らし。</strong></h1>
<p>MoonArc（ムーンアーク）は、日常に彩りと安らぎをもたらす、<br />厳選されたホーム＆ライフスタイルアイテムをお届けします。</p>
<a href="#" class="btn-primary">コレクションを見る</a>
</div>
</section>
<!-- ===== 特徴 / 商品カテゴリー ===== -->
<section>
<div class="container">
<h2 class="section-title">✨ 厳選の3つの柱</h2>
<p class="section-subtitle">MoonArc が大切にしている品質とデザイン</p>
<div class="feature-grid">
<div class="feature-item">
<div class="emoji-big">🛋️</div>
<h3>ホームウェア</h3>
<p>天然素材にこだわった、心地よいテキスタイルとインテリア小物。</p>
</div>
<div class="feature-item">
<div class="emoji-big">🧴</div>
<h3>バス＆ボディ</h3>
<p>植物由来の処方で、日常のバスタイムを特別なひとときに。</p>
</div>
<div class="feature-item">
<div class="emoji-big">🎁</div>
<h3>ギフトセレクション</h3>
<p>大切な人へ贈りたくなる、上質で心のこもったギフト。</p>
</div>
</div>
</div>
</section>
<!-- ===== ブランドストーリー ===== -->
<section class="story">
<div class="container story-grid">
<div class="story-text">
<h2>私たちの<span>物語</span></h2>
<p>
MoonArc は「月の弧」—— 満ち欠けを繰り返す月のように、<br />
日常に穏やかな変化と美しさを届けたいという想いから生まれました。
</p>
<p>
日本の伝統的なものづくりの精神と、現代のライフスタイルを<br />
調和させたプロダクトを、一つひとつ丁寧にセレクトしています。
</p>
<a href="#" style="color:#b89b7b; font-weight:500;">もっと読む →</a>
</div>
<div class="story-image">
🌙
</div>
</div>
</section>
<!-- ===== お客様の声 ===== -->
<section>
<div class="container">
<h2 class="section-title">📖 お客様の声</h2>
<p class="section-subtitle">MoonArc を愛するみなさまからのメッセージ</p>
<div class="testimonial-grid">
<div class="testimonial-item">
<div class="stars">★★★★★</div>
<blockquote>「届いた瞬間から、香りと質感にうっとり。日常がちょっと贅沢になりました。」</blockquote>
<div class="name">— 30代・会社員</div>
</div>
<div class="testimonial-item">
<div class="stars">★★★★★</div>
<blockquote>「ギフトで贈ったら、相手からすぐにお礼の連絡が。センスがいいね、と褒められました。」</blockquote>
<div class="name">— 40代・自営業</div>
</div>
<div class="testimonial-item">
<div class="stars">★★★★☆</div>
<blockquote>「ホームウェアの肌触りが抜群で、リラックスタイムが格段に向上しました。」</blockquote>
<div class="name">— 20代・学生</div>
</div>
</div>
</div>
</section>
<!-- ===== ニュースレター ===== -->
<section class="newsletter">
<div class="container">
<h2>📩 メールマガジン</h2>
<p>新商品や限定キャンペーンなど、お得な情報をいち早くお届けします。</p>
<div class="newsletter-form">
<input type="email" placeholder="メールアドレスを入力" aria-label="メールアドレス" />
<button type="submit">登録する</button>
</div>
</div>
</section>
<!-- ===== フッター ===== -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="logo">Moon<span>Arc</span></div>
<p>〒150-0001 東京都渋谷区神宮前1-1-1<br />info@moonarc.shop</p>
</div>
<div class="footer-col">
<h4>カテゴリー</h4>
<ul>
<li><a href="#">ホームウェア</a></li>
<li><a href="#">バス＆ボディ</a></li>
<li><a href="#">ギフト</a></li>
<li><a href="#">新着</a></li>
</ul>
</div>
<div class="footer-col">
<h4>サポート</h4>
<ul>
<li><a href="#">よくある質問</a></li>
<li><a href="#">配送・返品</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>カンパニー</h4>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2026 MoonArc. All rights reserved.
</div>
</div>
</footer>
</body>
</html>