929 lines
32 KiB
HTML
929 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<meta name="description" content="Ponshu Room — 飲んだ日本酒を、自分だけの記録に">
|
||
<meta name="theme-color" content="#FDFCF9">
|
||
<title>Ponshu Room</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js" integrity="sha384-tTkFttkBclaU1cloKwOi9xk3pbao3VZxTjLNBt8iFABWDBQibbAbWpVmO28zMuxq" crossorigin="anonymous"></script>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg: #FDFCF9;
|
||
--bg2: #F5F2EC;
|
||
--surface: #FFFFFF;
|
||
--border: rgba(0,0,0,0.07);
|
||
--border2: rgba(0,0,0,0.04);
|
||
--text: #1C1917;
|
||
--text2: #57534E;
|
||
--text3: #A8A29E;
|
||
--accent: #C2692A;
|
||
--accent-h: #A8551F;
|
||
--accent-l: rgba(194,105,42,0.10);
|
||
--accent-b: rgba(194,105,42,0.22);
|
||
--warm2: #FEF3E8;
|
||
--r-lg: 24px;
|
||
--r-md: 16px;
|
||
--r-sm: 10px;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: 'Inter', -apple-system, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
line-height: 1.65;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
button { cursor: pointer; border: none; background: none; font-family: inherit; }
|
||
img { display: block; }
|
||
|
||
/* ── Nav ── */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32px;
|
||
height: 60px;
|
||
background: rgba(253,252,249,0.9);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.nav-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.02em;
|
||
color: var(--text);
|
||
}
|
||
|
||
.nav-logo {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 8px;
|
||
background: var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.nav-links a {
|
||
font-size: 13px;
|
||
color: var(--text2);
|
||
padding: 6px 12px;
|
||
border-radius: var(--r-sm);
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
|
||
.nav-links a:hover { background: var(--bg2); color: var(--text); }
|
||
|
||
.nav-cta {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
background: var(--accent);
|
||
padding: 7px 16px;
|
||
border-radius: var(--r-sm);
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.nav-cta:hover { background: var(--accent-h); color: #fff; }
|
||
|
||
/* ── Hero ── */
|
||
.hero {
|
||
max-width: 1040px;
|
||
margin: 0 auto;
|
||
padding: 72px 32px 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
align-items: center;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.hero { grid-template-columns: 1fr; padding: 48px 24px 0; text-align: center; }
|
||
.hero-visual { order: -1; }
|
||
nav { padding: 0 20px; }
|
||
}
|
||
|
||
.hero-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--accent);
|
||
background: var(--warm2);
|
||
border: 1px solid var(--accent-b);
|
||
padding: 4px 12px;
|
||
border-radius: 100px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(32px, 4.5vw, 52px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.035em;
|
||
line-height: 1.12;
|
||
color: var(--text);
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.hero h1 .light { font-weight: 400; color: var(--text2); }
|
||
|
||
.hero-desc {
|
||
font-size: 16px;
|
||
color: var(--text2);
|
||
line-height: 1.75;
|
||
margin-bottom: 32px;
|
||
max-width: 420px;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.hero-desc { margin-left: auto; margin-right: auto; }
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.hero-actions { justify-content: center; }
|
||
}
|
||
|
||
.btn-lg {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 13px 24px;
|
||
border-radius: var(--r-md);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
transition: all 0.15s;
|
||
}
|
||
|
||
.btn-primary-lg {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-primary-lg:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(194,105,42,0.28); }
|
||
|
||
.btn-ghost-lg {
|
||
background: var(--surface);
|
||
color: var(--text2);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.btn-ghost-lg:hover { border-color: rgba(0,0,0,0.16); color: var(--text); }
|
||
|
||
.hero-note {
|
||
margin-top: 14px;
|
||
font-size: 12px;
|
||
color: var(--text3);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.hero-note { justify-content: center; }
|
||
}
|
||
|
||
/* ── Hero visual (mock phone) ── */
|
||
.hero-visual {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
padding-top: 24px;
|
||
}
|
||
|
||
.phone-mock {
|
||
width: 240px;
|
||
background: var(--text);
|
||
border-radius: 36px;
|
||
padding: 14px;
|
||
box-shadow: 0 32px 64px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
}
|
||
|
||
.phone-screen {
|
||
background: #1C1009;
|
||
border-radius: 26px;
|
||
overflow: hidden;
|
||
min-height: 360px;
|
||
padding: 20px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.ps-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.ps-title { font-size: 11px; font-weight: 600; color: #F5EDD6; letter-spacing: 0.04em; }
|
||
.ps-sub { font-size: 9px; color: rgba(245,237,214,0.45); }
|
||
|
||
.ps-entry {
|
||
background: rgba(255,255,255,0.06);
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
border-radius: 12px;
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.ps-dot {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.ps-entry-text { flex: 1; min-width: 0; }
|
||
.ps-entry-name { font-size: 10px; font-weight: 600; color: #F5EDD6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.ps-entry-meta { font-size: 9px; color: rgba(245,237,214,0.45); margin-top: 1px; }
|
||
|
||
.ps-stars { color: var(--accent); font-size: 9px; letter-spacing: 1px; }
|
||
|
||
.ps-radar {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.07);
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.ps-radar-title { font-size: 9px; color: rgba(245,237,214,0.5); margin-bottom: 8px; }
|
||
|
||
.ps-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
|
||
.ps-bar-label { font-size: 8px; color: rgba(245,237,214,0.5); width: 24px; flex-shrink: 0; }
|
||
.ps-bar-track { flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
|
||
.ps-bar-fill { height: 100%; border-radius: 2px; background: var(--accent); }
|
||
|
||
/* ── Trust bar ── */
|
||
.trust-bar {
|
||
max-width: 1040px;
|
||
margin: 48px auto 0;
|
||
padding: 0 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.trust-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
font-size: 13px;
|
||
color: var(--text3);
|
||
}
|
||
|
||
.trust-item svg { color: var(--accent); }
|
||
|
||
.trust-divider { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }
|
||
|
||
@media (max-width: 720px) {
|
||
.trust-bar { padding: 0 24px; justify-content: center; }
|
||
.trust-divider { display: none; }
|
||
}
|
||
|
||
/* ── Section ── */
|
||
.section {
|
||
max-width: 1040px;
|
||
margin: 0 auto;
|
||
padding: 72px 32px 0;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.section { padding: 56px 24px 0; }
|
||
}
|
||
|
||
.section-eyebrow {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(22px, 3vw, 32px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.2;
|
||
color: var(--text);
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
/* ── Bento feature grid ── */
|
||
.bento {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
grid-template-rows: auto;
|
||
gap: 12px;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.bento { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.bento-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
padding: 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
transition: box-shadow 0.2s;
|
||
}
|
||
|
||
.bento-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.07); }
|
||
|
||
.bento-card.span2 { grid-column: span 2; }
|
||
.bento-card.span3 { grid-column: span 3; }
|
||
.bento-card.span4 { grid-column: span 4; }
|
||
|
||
@media (max-width: 720px) {
|
||
.bento-card.span2, .bento-card.span3, .bento-card.span4 { grid-column: span 1; }
|
||
}
|
||
|
||
.bento-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 12px;
|
||
background: var(--warm2);
|
||
border: 1px solid var(--accent-b);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--accent);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bento-label { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
|
||
.bento-desc { font-size: 13px; color: var(--text2); line-height: 1.6; }
|
||
|
||
.bento-big-num {
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.04em;
|
||
color: var(--text);
|
||
line-height: 1;
|
||
}
|
||
|
||
.bento-big-num span { font-size: 20px; font-weight: 400; color: var(--text3); }
|
||
|
||
/* ── Steps ── */
|
||
.steps-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2px;
|
||
background: var(--border);
|
||
border-radius: var(--r-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
.steps-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.step-cell {
|
||
background: var(--surface);
|
||
padding: 32px 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.step-num {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
color: var(--accent);
|
||
}
|
||
|
||
.step-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
|
||
.step-desc { font-size: 14px; color: var(--text2); line-height: 1.65; }
|
||
|
||
/* ── Pricing ── */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
.pricing-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.price-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
padding: 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.price-card.featured {
|
||
border-color: var(--accent);
|
||
background: var(--warm2);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.price-badge {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: #fff;
|
||
background: var(--accent);
|
||
padding: 3px 9px;
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.price-tier {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text3);
|
||
}
|
||
|
||
.price-card.featured .price-tier { color: var(--accent); }
|
||
|
||
.price-amount {
|
||
font-size: 44px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.04em;
|
||
line-height: 1;
|
||
color: var(--text);
|
||
}
|
||
|
||
.price-amount sup { font-size: 18px; font-weight: 500; vertical-align: super; }
|
||
.price-amount small { font-size: 14px; font-weight: 400; color: var(--text3); letter-spacing: 0; }
|
||
|
||
.price-tagline { font-size: 14px; color: var(--text2); line-height: 1.6; }
|
||
|
||
.price-features {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 9px;
|
||
}
|
||
|
||
.price-features li {
|
||
font-size: 14px;
|
||
color: var(--text2);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
}
|
||
|
||
.price-features li.off { color: var(--text3); }
|
||
.price-features li svg { flex-shrink: 0; }
|
||
|
||
.btn-full {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 13px 20px;
|
||
border-radius: var(--r-md);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
transition: all 0.15s;
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-accent { background: var(--accent); color: #fff; }
|
||
.btn-accent:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(194,105,42,0.25); }
|
||
|
||
.btn-outline-dark { background: transparent; color: var(--text2); border: 1px solid var(--border); }
|
||
.btn-outline-dark:hover { border-color: rgba(0,0,0,0.18); color: var(--text); }
|
||
|
||
/* ── Quote ── */
|
||
.quote-band {
|
||
background: var(--bg2);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 64px 32px;
|
||
margin-top: 72px;
|
||
}
|
||
|
||
.quote-inner {
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.quote-mark {
|
||
font-size: 40px;
|
||
color: var(--accent);
|
||
line-height: 1;
|
||
font-family: Georgia, serif;
|
||
}
|
||
|
||
.quote-text {
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.65;
|
||
color: var(--text);
|
||
}
|
||
|
||
.quote-attr { font-size: 13px; color: var(--text3); }
|
||
|
||
/* ── Footer ── */
|
||
footer {
|
||
border-top: 1px solid var(--border);
|
||
padding: 32px;
|
||
background: var(--surface);
|
||
margin-top: 72px;
|
||
}
|
||
|
||
.footer-inner {
|
||
max-width: 1040px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
|
||
.footer-copy { font-size: 12px; color: var(--text3); }
|
||
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
|
||
.footer-links a { font-size: 12px; color: var(--text3); transition: color 0.15s; }
|
||
.footer-links a:hover { color: var(--text2); }
|
||
|
||
.spacer { height: 72px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Nav -->
|
||
<nav>
|
||
<div class="nav-brand">
|
||
<div class="nav-logo">
|
||
<i data-lucide="wine" style="width:15px;height:15px;"></i>
|
||
</div>
|
||
Ponshu Room
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#features">機能</a>
|
||
<a href="#pricing">価格</a>
|
||
<a class="nav-cta" href="#pricing">無料で試す</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero -->
|
||
<div class="hero">
|
||
<div class="hero-text">
|
||
<div class="hero-eyebrow">
|
||
<i data-lucide="sparkles" style="width:11px;height:11px;"></i>
|
||
日本酒記録アプリ
|
||
</div>
|
||
<h1>飲んだ日本酒を、<br><span class="light">自分だけの記録に。</span></h1>
|
||
<p class="hero-desc">ラベルを撮るだけで名前・産地・味を自動で記録。あなたの好みをAIが学習して、次の一本を提案します。</p>
|
||
<div class="hero-actions">
|
||
<a href="#pricing" class="btn-lg btn-primary-lg">
|
||
<i data-lucide="smartphone" style="width:16px;height:16px;"></i>
|
||
無料で始める
|
||
</a>
|
||
<a href="#features" class="btn-lg btn-ghost-lg">どんなアプリ？</a>
|
||
</div>
|
||
<p class="hero-note">
|
||
<i data-lucide="shield-check" style="width:12px;height:12px;color:var(--accent);"></i>
|
||
クレジットカード不要。広告なし。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Phone mockup -->
|
||
<div class="hero-visual">
|
||
<div class="phone-mock">
|
||
<div class="phone-screen">
|
||
<div class="ps-header">
|
||
<div>
|
||
<div class="ps-title">MY COLLECTION</div>
|
||
<div class="ps-sub">12本</div>
|
||
</div>
|
||
<div class="ps-sub">2026.04</div>
|
||
</div>
|
||
<div class="ps-entry">
|
||
<div class="ps-dot" style="background:rgba(194,105,42,0.15);">
|
||
<i data-lucide="wine" style="width:14px;height:14px;color:var(--accent);"></i>
|
||
</div>
|
||
<div class="ps-entry-text">
|
||
<div class="ps-entry-name">獺祭 純米大吟醸</div>
|
||
<div class="ps-entry-meta">山口県 · 旭酒造</div>
|
||
</div>
|
||
<div class="ps-stars">★★★★★</div>
|
||
</div>
|
||
<div class="ps-entry">
|
||
<div class="ps-dot" style="background:rgba(100,120,180,0.15);">
|
||
<i data-lucide="wine" style="width:14px;height:14px;color:#6478B4;"></i>
|
||
</div>
|
||
<div class="ps-entry-text">
|
||
<div class="ps-entry-name">久保田 千寿</div>
|
||
<div class="ps-entry-meta">新潟県 · 朝日酒造</div>
|
||
</div>
|
||
<div class="ps-stars">★★★★☆</div>
|
||
</div>
|
||
<div class="ps-entry">
|
||
<div class="ps-dot" style="background:rgba(80,150,100,0.15);">
|
||
<i data-lucide="wine" style="width:14px;height:14px;color:#509664;"></i>
|
||
</div>
|
||
<div class="ps-entry-text">
|
||
<div class="ps-entry-name">八海山 普通酒</div>
|
||
<div class="ps-entry-meta">新潟県 · 八海醸造</div>
|
||
</div>
|
||
<div class="ps-stars">★★★★☆</div>
|
||
</div>
|
||
<div class="ps-radar">
|
||
<div class="ps-radar-title">AI TASTE PROFILE</div>
|
||
<div class="ps-bar-row">
|
||
<div class="ps-bar-label">香り</div>
|
||
<div class="ps-bar-track"><div class="ps-bar-fill" style="width:82%;"></div></div>
|
||
</div>
|
||
<div class="ps-bar-row">
|
||
<div class="ps-bar-label">甘み</div>
|
||
<div class="ps-bar-track"><div class="ps-bar-fill" style="width:65%;"></div></div>
|
||
</div>
|
||
<div class="ps-bar-row">
|
||
<div class="ps-bar-label">辛み</div>
|
||
<div class="ps-bar-track"><div class="ps-bar-fill" style="width:40%;"></div></div>
|
||
</div>
|
||
<div class="ps-bar-row">
|
||
<div class="ps-bar-label">コク</div>
|
||
<div class="ps-bar-track"><div class="ps-bar-fill" style="width:70%;"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trust bar -->
|
||
<div class="trust-bar">
|
||
<div class="trust-item">
|
||
<i data-lucide="shield-check" style="width:14px;height:14px;"></i>
|
||
データは自分だけのもの
|
||
</div>
|
||
<div class="trust-divider"></div>
|
||
<div class="trust-item">
|
||
<i data-lucide="ban" style="width:14px;height:14px;"></i>
|
||
広告なし
|
||
</div>
|
||
<div class="trust-divider"></div>
|
||
<div class="trust-item">
|
||
<i data-lucide="infinity" style="width:14px;height:14px;"></i>
|
||
買い切り・月額なし
|
||
</div>
|
||
<div class="trust-divider"></div>
|
||
<div class="trust-item">
|
||
<i data-lucide="map-pin" style="width:14px;height:14px;"></i>
|
||
日本語対応
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Features -->
|
||
<section class="section" id="features">
|
||
<div class="section-eyebrow">機能</div>
|
||
<div class="section-title">シンプルに、でも<br>ちゃんと使える。</div>
|
||
|
||
<div class="bento">
|
||
<div class="bento-card span3">
|
||
<div class="bento-icon">
|
||
<i data-lucide="camera" style="width:18px;height:18px;"></i>
|
||
</div>
|
||
<div class="bento-label">ラベルを撮るだけ</div>
|
||
<div class="bento-desc">カメラで撮影するとAIが酒名・蔵元・産地を自動で読み取ります。手で入力する必要はありません。</div>
|
||
</div>
|
||
|
||
<div class="bento-card span3">
|
||
<div class="bento-icon">
|
||
<i data-lucide="bar-chart-2" style="width:18px;height:18px;"></i>
|
||
</div>
|
||
<div class="bento-label">味の傾向がわかる</div>
|
||
<div class="bento-desc">記録が増えるほど「あなたが好きな味」のグラフが育ちます。甘口・辛口・香りの好みを見える化。</div>
|
||
</div>
|
||
|
||
<div class="bento-card span2">
|
||
<div class="bento-big-num">47<span>都道府県</span></div>
|
||
<div class="bento-desc">産地マップで、飲んだお酒の旅をたどれます。</div>
|
||
</div>
|
||
|
||
<div class="bento-card span2">
|
||
<div class="bento-icon">
|
||
<i data-lucide="brain" style="width:18px;height:18px;"></i>
|
||
</div>
|
||
<div class="bento-label">AI おすすめ</div>
|
||
<div class="bento-desc">あなたの好みから「次に飲みたい一本」を提案。</div>
|
||
</div>
|
||
|
||
<div class="bento-card span2">
|
||
<div class="bento-icon">
|
||
<i data-lucide="cloud" style="width:18px;height:18px;"></i>
|
||
</div>
|
||
<div class="bento-label">バックアップ</div>
|
||
<div class="bento-desc">Googleドライブに自動保存。機種変更しても安心。</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Steps -->
|
||
<section class="section" id="how">
|
||
<div class="section-eyebrow">使い方</div>
|
||
<div class="section-title">3ステップで始まります。</div>
|
||
<div class="steps-grid">
|
||
<div class="step-cell">
|
||
<div class="step-num">01</div>
|
||
<div class="step-title">アプリを入れる</div>
|
||
<div class="step-desc">インストールするだけ。アカウント登録はメールアドレスのみ。面倒な手続きはありません。</div>
|
||
</div>
|
||
<div class="step-cell">
|
||
<div class="step-num">02</div>
|
||
<div class="step-title">ラベルを撮る</div>
|
||
<div class="step-desc">飲んだお酒のラベルをカメラで撮影。AIが名前や産地を自動で記録します。</div>
|
||
</div>
|
||
<div class="step-cell">
|
||
<div class="step-num">03</div>
|
||
<div class="step-title">記録を育てる</div>
|
||
<div class="step-desc">記録が増えるほど、あなたの好みが見えてきます。気に入ったら¥500でフル機能に。</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing -->
|
||
<section class="section" id="pricing">
|
||
<div class="section-eyebrow">価格</div>
|
||
<div class="section-title">まず無料で、<br>続けたいと思ったら。</div>
|
||
<div class="pricing-grid">
|
||
<div class="price-card">
|
||
<div class="price-tier">無料</div>
|
||
<div>
|
||
<div class="price-amount">¥0</div>
|
||
</div>
|
||
<div class="price-tagline">10件まで記録して、アプリを試せます。クレジットカード不要。</div>
|
||
<ul class="price-features">
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
日本酒を10件まで記録
|
||
</li>
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
ラベル撮影・自動入力
|
||
</li>
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
味のグラフ表示
|
||
</li>
|
||
<li class="off">
|
||
<i data-lucide="minus" style="width:15px;height:15px;"></i>
|
||
記録は10件まで
|
||
</li>
|
||
<li class="off">
|
||
<i data-lucide="minus" style="width:15px;height:15px;"></i>
|
||
AI おすすめなし
|
||
</li>
|
||
</ul>
|
||
<a href="#" class="btn-full btn-outline-dark">
|
||
<i data-lucide="smartphone" style="width:15px;height:15px;"></i>
|
||
無料で始める
|
||
</a>
|
||
</div>
|
||
|
||
<div class="price-card featured">
|
||
<div class="price-badge">人気</div>
|
||
<div class="price-tier">フルアクセス</div>
|
||
<div>
|
||
<div class="price-amount"><sup>¥</sup>500 <small>買い切り</small></div>
|
||
</div>
|
||
<div class="price-tagline">一度だけの購入で、すべての機能がずっと使えます。追加料金なし。</div>
|
||
<ul class="price-features">
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
記録は無制限
|
||
</li>
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
AI おすすめ機能
|
||
</li>
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
産地マップ（47都道府県）
|
||
</li>
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
Googleドライブ自動バックアップ
|
||
</li>
|
||
<li>
|
||
<i data-lucide="check" style="width:15px;height:15px;color:var(--accent);"></i>
|
||
今後の新機能も含む
|
||
</li>
|
||
</ul>
|
||
<a href="https://buy.stripe.com/test_9B67sEbN3fowfMW4jwenS00" class="btn-full btn-accent" target="_blank" rel="noopener noreferrer">
|
||
<i data-lucide="credit-card" style="width:15px;height:15px;"></i>
|
||
¥500 で購入する
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="spacer"></div>
|
||
|
||
<!-- Quote -->
|
||
<div class="quote-band">
|
||
<div class="quote-inner">
|
||
<div class="quote-mark">"</div>
|
||
<p class="quote-text">通知でうるさく呼び戻す仕掛けも、データを売る仕組みも、持ちません。<br>使いたいときに開いて、記録が残る。それだけを。</p>
|
||
<p class="quote-attr">Posimai — 開発者より</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="footer-inner">
|
||
<div class="footer-copy">© 2026 Posimai</div>
|
||
<div class="footer-links">
|
||
<a href="https://posimai.soar-enrich.com/legal/privacy" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>
|
||
<a href="https://posimai.soar-enrich.com/legal/terms" target="_blank" rel="noopener noreferrer">利用規約</a>
|
||
<a href="https://posimai.soar-enrich.com/legal/tokusho" target="_blank" rel="noopener noreferrer">特定商取引法に基づく表記</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
if (window.lucide) lucide.createIcons();
|
||
</script>
|
||
|
||
<!-- Dev toggle — visible only when ?dev=1 -->
|
||
<script>
|
||
(function(){
|
||
if(!location.search.includes('dev=1')) return;
|
||
const wrap = document.createElement('div');
|
||
wrap.style.cssText = 'position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:6px;';
|
||
['A:/', 'B:/index-b.html', 'C:/index-c.html'].forEach(function(s){
|
||
const [label, href] = s.split(':');
|
||
const a = document.createElement('a');
|
||
a.href = href + '?dev=1';
|
||
a.textContent = label;
|
||
const isCurrent = label === 'B';
|
||
a.style.cssText = 'font-family:monospace;font-size:11px;padding:6px 12px;border-radius:6px;text-decoration:none;transition:all 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.08);' + (isCurrent ? 'background:#C2692A;color:#fff;border:1px solid #C2692A;' : 'background:rgba(253,252,249,0.95);color:#78716C;border:1px solid rgba(194,105,42,0.3);');
|
||
wrap.appendChild(a);
|
||
});
|
||
document.body.appendChild(wrap);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|