https://www.lacklustre.org/ja/Recent content in Lack Lustreへようこそ on Lack LustreHugo -- gohugo.ioja© Continuia OÜ 2026. All rights reserved.https://www.lacklustre.org/ja/documentation/introduction/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/introduction/<p class="lead">Lack Lustreとは何か、何のために設計されているか、そして日常のコミュニケーションツールとどう違うかの概要。</p>https://www.lacklustre.org/ja/documentation/core/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/core/<p class="lead">Lack Lustreの動作を形成する設計原則と、特定の機能が意図的に制限されている理由。</p>https://www.lacklustre.org/ja/documentation/concepts/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/concepts/<p class="lead">共通理解を確保するために、Lack Lustreで使用される主要用語の明確な定義。</p> <h1 class="relative group">主要な概念と用語 <div id="主要な概念と用語" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e4%b8%bb%e8%a6%81%e3%81%aa%e6%a6%82%e5%bf%b5%e3%81%a8%e7%94%a8%e8%aa%9e" aria-label="アンカー">#</a> </span> </h1> <p>このセクションでは、Lack Lustreで使用される主要な用語を説明します。</p>https://www.lacklustre.org/ja/documentation/letters/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/letters/<p class="lead">レターのライフサイクル（作成からアクセスまで）の段階的な概要。</p> <h1 class="relative group">レターの仕組み <div id="レターの仕組み" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e3%83%ac%e3%82%bf%e3%83%bc%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf" aria-label="アンカー">#</a> </span> </h1> <p>すべてのレターは同じ高レベルのライフサイクルに従います：</p>https://www.lacklustre.org/ja/documentation/delivery/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/delivery/<p class="lead">2つの配信オプションと、それらがセキュリティと利便性においてどのように異なるかの説明。</p> <h1 class="relative group">配信方法 <div id="配信方法" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e9%85%8d%e4%bf%a1%e6%96%b9%e6%b3%95" aria-label="アンカー">#</a> </span> </h1> <p>Lack Lustreは2つの配信方法を提供しています。それぞれが秘密性と使いやすさの異なるバランスをサポートします。</p>https://www.lacklustre.org/ja/documentation/security/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/security/<p class="lead">Lack Lustreが暗号化、アクセス制御、システム設計を通じてコンテンツを保護する方法。</p>https://www.lacklustre.org/ja/documentation/options/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/options/<p class="lead">ニーズに最適な配信オプションを選択するための明確な比較。</p> <h1 class="relative group">どちらのオプションがより安全か？ <div id="どちらのオプションがより安全か" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e3%81%a9%e3%81%a1%e3%82%89%e3%81%ae%e3%82%aa%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e3%82%88%e3%82%8a%e5%ae%89%e5%85%a8%e3%81%8b" aria-label="アンカー">#</a> </span> </h1> <p>両方の配信オプションは安全ですが、異なる結果を優先します。</p>https://www.lacklustre.org/ja/documentation/cooldown/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/cooldown/<p class="lead">なぜレターを即座にリリースできないのか、そしてクールダウン期間が意図的な使用をどのようにサポートするのか。</p> <h1 class="relative group">クールダウン期間の説明 <div id="クールダウン期間の説明" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e3%82%af%e3%83%bc%e3%83%ab%e3%83%80%e3%82%a6%e3%83%b3%e6%9c%9f%e9%96%93%e3%81%ae%e8%aa%ac%e6%98%8e" aria-label="アンカー">#</a> </span> </h1> <p>すべてのレターには、リリースできるようになる前にクールダウン期間が含まれています。</p>https://www.lacklustre.org/ja/documentation/privacy/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/privacy/<p class="lead">Lack Lustreが信頼要件を最小限に抑え、プライバシーを保護する方法。</p>https://www.lacklustre.org/ja/documentation/account/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/account/<p class="lead">削除を含む、アカウントの存続期間中にデータに何が起こるか。</p> <h1 class="relative group">アカウントのライフサイクルとデータ削除 <div id="アカウントのライフサイクルとデータ削除" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e3%82%a2%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88%e3%81%ae%e3%83%a9%e3%82%a4%e3%83%95%e3%82%b5%e3%82%a4%e3%82%af%e3%83%ab%e3%81%a8%e3%83%87%e3%83%bc%e3%82%bf%e5%89%8a%e9%99%a4" aria-label="アンカー">#</a> </span> </h1> <p>あなたは常にデータを管理し続けます。</p>https://www.lacklustre.org/ja/documentation/subscriptions/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/subscriptions/<p class="lead">サブスクリプションがどのように機能し、いつ必要で、いつ不要かについて。</p> <h1 class="relative group">サブスクリプションと支払い <div id="サブスクリプションと支払い" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e3%82%b5%e3%83%96%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a8%e6%94%af%e6%89%95%e3%81%84" aria-label="アンカー">#</a> </span> </h1> <p>サブスクリプションは追加機能のロックを解除しますが、受取人には必要ありません。</p>https://www.lacklustre.org/ja/documentation/limitations/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/limitations/<p class="lead">Lack Lustreが何を行うように設計されているか、そして何を行わないかを定義する重要な境界。</p>https://www.lacklustre.org/ja/documentation/support/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/documentation/support/<p class="lead">ヘルプの取得方法と、サポートができること、できないこと。</p> <h1 class="relative group">お問い合わせとサポート <div id="お問い合わせとサポート" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"> <a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b%e3%81%a8%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88" aria-label="アンカー">#</a> </span> </h1> <p>サポートは以下の問題に対応できます：</p>https://www.lacklustre.org/ja/lp/you-know-where-everything-is/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/lp/you-know-where-everything-is/<style> .ll-lp { --ll-ink: #2a2118; --ll-ink-soft: #5a4a39; --ll-cream: #f7efe2; --ll-cream-deep: #efe3cc; --ll-rule: rgba(70,50,30,0.18); --ll-accent: #8a5a2b; } html.dark .ll-lp { --ll-ink: #efe3cc; --ll-ink-soft: #c8b89a; --ll-cream: transparent; --ll-cream-deep: rgba(247,239,226,0.04); --ll-rule: rgba(247,239,226,0.18); --ll-accent: #d6a564; } .ll-lp { color: var(--ll-ink); padding-bottom: 5.5rem; } @media (min-width: 768px) { .ll-lp { padding-bottom: 0; } } .ll-lp h1, .ll-lp h2, .ll-lp h3 { font-family: 'Iowan Old Style','Palatino Linotype','Palatino','Book Antiqua',Georgia,'Source Serif Pro',serif; font-weight: 600; letter-spacing: -0.01em; } .ll-lp h1 { font-weight: 700; line-height: 1.05; } .ll-lp p, .ll-lp li, .ll-lp .ll-quote { font-family: 'Iowan Old Style','Palatino Linotype','Palatino','Book Antiqua',Georgia,serif; } .ll-hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding: 1rem 0 2.25rem; } .ll-hero__image { position: relative; aspect-ratio: 12 / 7; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 12px 40px rgba(60,40,20,0.18), 0 2px 6px rgba(60,40,20,0.10); margin: 0 -1.25rem; border-radius: 0; } .ll-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } .ll-hero__image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(40,25,10,0.18); pointer-events: none; } .ll-hero__copy { text-align: left; } .ll-hero__eyebrow { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ll-ink-soft); margin: 0 0 0.85rem; font-family: ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif; } .ll-hero__eyebrow::before { content: "✦"; margin-right: 0.55em; color: var(--ll-accent); opacity: 0.9; } .ll-hero h1 { margin: 0 0 0.85rem; font-size: clamp(2rem, 5.5vw, 3.1rem); } .ll-hero__sub { font-size: 1.18rem; line-height: 1.55; color: var(--ll-ink-soft); margin: 0 0 1.6rem; max-width: 32rem; } .ll-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; margin: 0 0 0.9rem; } .ll-hero__cta a { line-height: 0; display: inline-block; transition: transform 200ms ease; } .ll-hero__cta a:hover { transform: translateY(-1px); } .ll-hero__cta img { height: 52px; width: auto; margin: 0; } .ll-hero__trust { font-size: 0.92rem; color: var(--ll-ink-soft); margin: 0.4rem 0 0; } .ll-hero__trust span { display: inline-block; } .ll-hero__trust span + span::before { content: "·"; margin: 0 0.55em; opacity: 0.55; } @media (min-width: 768px) { .ll-hero { grid-template-columns: 1.05fr 1fr; gap: 3rem; padding: 2.5rem 0 3rem; } .ll-hero__image { margin: 0; border-radius: 0.5rem; order: 2; } .ll-hero__copy { order: 1; } .ll-hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); } } .ll-section { padding: 2rem 0; } .ll-section h2 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); } .ll-section > p { color: var(--ll-ink-soft); } .ll-section--center { text-align: center; } .ll-section--center > * { margin-left: auto; margin-right: auto; } .ll-section--center > p { max-width: 38rem; } .ll-divider { border: 0; height: 1px; background: var(--ll-rule); margin: 2rem 0; max-width: 4rem; } .ll-divider--center { margin-left: auto; margin-right: auto; } .ll-usecases, .ll-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; } .ll-usecases > div, .ll-cards > div { padding-top: 0.5rem; border-top: 1px solid var(--ll-rule); } .ll-usecases h3, .ll-cards h3 { margin: 0.5rem 0 0.4rem; font-size: 1.15rem; color: var(--ll-ink); } .ll-usecases p, .ll-cards p { margin: 0; color: var(--ll-ink-soft); font-size: 1rem; line-height: 1.55; } .ll-shots { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; } @media (min-width: 640px) { .ll-shots { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } .ll-shots__caption { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--ll-ink-soft); margin: 0 0 0.25rem; font-family: ui-sans-serif,system-ui,-apple-system,sans-serif; } .ll-phone { aspect-ratio: 9 / 19; max-width: 220px; width: 100%; background: #1a140d; border-radius: 1.6rem; padding: 0.45rem; box-shadow: 0 18px 40px rgba(60,40,20,0.22), 0 3px 8px rgba(60,40,20,0.12); position: relative; } .ll-phone::before { content: ""; position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%); width: 30%; height: 0.45rem; background: #0a0703; border-radius: 0 0 0.6rem 0.6rem; z-index: 2; } .ll-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.2rem; display: block; margin: 0; } .ll-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; } .ll-step { padding: 1.25rem 1.25rem 1.4rem; border-radius: 0.65rem; background: var(--ll-cream-deep); border: 1px solid var(--ll-rule); } .ll-step h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--ll-ink); } .ll-step p { margin: 0; color: var(--ll-ink-soft); font-size: 0.98rem; } .ll-step__num { display: inline-block; font-family: ui-sans-serif,system-ui,sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.15em; color: var(--ll-accent); margin-bottom: 0.4rem; } .ll-founder { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; margin-top: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--ll-rule); border-bottom: 1px solid var(--ll-rule); } @media (min-width: 640px) { .ll-founder { grid-template-columns: 140px 1fr; gap: 1.75rem; } } .ll-founder img { width: 140px; height: 140px; object-fit: cover; border-radius: 0.5rem; margin: 0; box-shadow: 0 6px 18px rgba(60,40,20,0.18); } .ll-founder h2 { margin: 0 0 0.55rem; font-size: 1.4rem; } .ll-founder p { margin: 0; color: var(--ll-ink-soft); line-height: 1.65; } .ll-founder__sig { font-style: italic; color: var(--ll-ink); margin-top: 0.6rem !important; } .ll-privacy { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; } @media (min-width: 640px) { .ll-privacy { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } } .ll-privacy__item { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.25rem 0; } .ll-privacy__icon { width: 2rem; height: 2rem; color: var(--ll-accent); } .ll-privacy__icon svg { width: 100%; height: 100%; stroke-width: 1.4; } .ll-privacy__label { margin: 0; font-family: 'Iowan Old Style',Palatino,Georgia,serif; font-weight: 600; font-size: 1.05rem; color: var(--ll-ink); } .ll-privacy__desc { margin: 0; color: var(--ll-ink-soft); font-size: 0.97rem; line-height: 1.5; } .ll-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.85rem; margin-top: 1.25rem; } .ll-quote { padding: 1rem 1.15rem; border-left: 2px solid var(--ll-accent); font-style: italic; background: var(--ll-cream-deep); border-radius: 0 0.4rem 0.4rem 0; color: var(--ll-ink); font-size: 1.02rem; line-height: 1.5; } .ll-samples { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; } @media (min-width: 768px) { .ll-samples { grid-template-columns: 1fr 1fr; gap: 1.75rem; } } .ll-sample { padding: 1.4rem 1.5rem 1.5rem; border-radius: 0.55rem; background: var(--ll-cream-deep); border: 1px solid var(--ll-rule); position: relative; } .ll-sample__label { display: inline-block; font-family: ui-sans-serif,system-ui,sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ll-accent); margin: 0 0 0.7rem; padding: 0.25rem 0.6rem; border: 1px solid var(--ll-rule); border-radius: 999px; background: rgba(247,239,226,0.4); } html.dark .ll-sample__label { background: rgba(247,239,226,0.06); } .ll-sample p { margin: 0 0 0.75rem; color: var(--ll-ink); line-height: 1.6; } .ll-sample p:last-child { margin-bottom: 0; } .ll-sample p em, .ll-sample em { font-style: italic; color: var(--ll-ink-soft); } .ll-faqs { margin-top: 1.5rem; } .ll-faq { border-bottom: 1px solid var(--ll-rule); } .ll-faq:first-child { border-top: 1px solid var(--ll-rule); } .ll-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; color: var(--ll-ink); font-family: 'Iowan Old Style',Palatino,Georgia,serif; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .ll-faq summary::-webkit-details-marker { display: none; } .ll-faq summary::after { content: "+"; flex-shrink: 0; width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ll-accent); font-weight: 400; font-size: 1.3rem; line-height: 1; transition: transform 200ms ease; } .ll-faq[open] summary::after { content: "−"; } .ll-faq p { margin: 0 0 1rem; color: var(--ll-ink-soft); line-height: 1.6; } .ll-cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; justify-content: center; align-items: center; margin: 1.5rem 0 0.5rem; } .ll-cta-row a { line-height: 0; display: inline-block; } .ll-cta-row img { height: 48px; width: auto; margin: 0; } .ll-final { text-align: center; padding: 2.5rem 0 1.5rem; } .ll-final h2 { margin-bottom: 0.5rem; font-size: clamp(1.6rem, 3vw, 2.1rem); } .ll-final p { max-width: 34rem; margin: 0 auto 1.5rem; color: var(--ll-ink-soft); } .ll-stores { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; justify-content: center; align-items: center; margin: 0; } .ll-stores a { line-height: 0; display: inline-block; } .ll-stores img { height: 52px; width: auto; margin: 0; } .app-badge-light { display: inline-block; } .app-badge-dark { display: none; } html.dark .app-badge-light { display: none; } html.dark .app-badge-dark { display: inline-block; } .ll-footer-trust { text-align: center; color: var(--ll-ink-soft); font-size: 0.92rem; padding: 1.5rem 0 0.5rem; } .ll-footer-trust strong { color: var(--ll-ink); font-weight: 600; } .ll-sticky { display: none; } @media (max-width: 767px) { .ll-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 0.6rem; justify-content: center; align-items: center; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--ll-cream); border-top: 1px solid var(--ll-rule); box-shadow: 0 -6px 18px rgba(60,40,20,0.08); } html.dark .ll-sticky { background: #1a140d; } .ll-sticky a { line-height: 0; display: inline-block; } .ll-sticky img { height: 40px; width: auto; margin: 0; } } @media (prefers-reduced-motion: no-preference) { .ll-hero__copy > * { opacity: 0; transform: translateY(10px); animation: ll-rise 700ms cubic-bezier(.2,.7,.2,1) forwards; } .ll-hero__copy > *:nth-child(1) { animation-delay: 60ms; } .ll-hero__copy > *:nth-child(2) { animation-delay: 160ms; } .ll-hero__copy > *:nth-child(3) { animation-delay: 260ms; } .ll-hero__copy > *:nth-child(4) { animation-delay: 360ms; } .ll-hero__copy > *:nth-child(5) { animation-delay: 460ms; } .ll-hero__image { opacity: 0; animation: ll-fade 900ms ease-out 120ms forwards; } @keyframes ll-rise { to { opacity: 1; transform: none; } } @keyframes ll-fade { to { opacity: 1; } } } </style> <div class="ll-lp"> <section class="ll-hero"> <div class="ll-hero__image"> <picture> <source media="(min-width: 768px)" srcset="https://www.lacklustre.org/cozy-vintage-desk-vignette-1642x958.png" /> <img src="https://www.lacklustre.org/cozy-vintage-desk-vignette-821x479.png" alt="温かみのあるヴィンテージの机に置かれた読書ランプ、ノート、カップ——物事を整えるために腰を下ろす場所。" loading="eager" /> </picture> </div> <div class="ll-hero__copy"> <p class="ll-hero__eyebrow">Lack Lustre</p>https://www.lacklustre.org/ja/lp/things-i-want-my-kids-to-know/Mon, 01 Jan 0001 00:00:00 +0000https://www.lacklustre.org/ja/lp/things-i-want-my-kids-to-know/<style> .ll-lp { --ll-ink: #2a2118; --ll-ink-soft: #5a4a39; --ll-cream: #f7efe2; --ll-cream-deep: #efe3cc; --ll-rule: rgba(70,50,30,0.18); --ll-accent: #8a5a2b; } html.dark .ll-lp { --ll-ink: #efe3cc; --ll-ink-soft: #c8b89a; --ll-cream: transparent; --ll-cream-deep: rgba(247,239,226,0.04); --ll-rule: rgba(247,239,226,0.18); --ll-accent: #d6a564; } .ll-lp { color: var(--ll-ink); padding-bottom: 5.5rem; } @media (min-width: 768px) { .ll-lp { padding-bottom: 0; } } .ll-lp h1, .ll-lp h2, .ll-lp h3 { font-family: 'Iowan Old Style','Palatino Linotype','Palatino','Book Antiqua',Georgia,'Source Serif Pro',serif; font-weight: 600; letter-spacing: -0.01em; } .ll-lp h1 { font-weight: 700; line-height: 1.05; } .ll-lp p, .ll-lp li, .ll-lp .ll-quote { font-family: 'Iowan Old Style','Palatino Linotype','Palatino','Book Antiqua',Georgia,serif; } .ll-hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding: 1rem 0 2.25rem; } .ll-hero__image { position: relative; aspect-ratio: 12 / 7; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 12px 40px rgba(60,40,20,0.18), 0 2px 6px rgba(60,40,20,0.10); margin: 0 -1.25rem; border-radius: 0; } .ll-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } .ll-hero__image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(40,25,10,0.18); pointer-events: none; } .ll-hero__copy { text-align: left; } .ll-hero__eyebrow { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ll-ink-soft); margin: 0 0 0.85rem; font-family: ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif; } .ll-hero__eyebrow::before { content: "✦"; margin-right: 0.55em; color: var(--ll-accent); opacity: 0.9; } .ll-hero h1 { margin: 0 0 0.85rem; font-size: clamp(2rem, 5.5vw, 3.1rem); } .ll-hero__sub { font-size: 1.18rem; line-height: 1.55; color: var(--ll-ink-soft); margin: 0 0 1.6rem; max-width: 32rem; } .ll-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; margin: 0 0 0.9rem; } .ll-hero__cta a { line-height: 0; display: inline-block; transition: transform 200ms ease; } .ll-hero__cta a:hover { transform: translateY(-1px); } .ll-hero__cta img { height: 52px; width: auto; margin: 0; } .ll-hero__trust { font-size: 0.92rem; color: var(--ll-ink-soft); margin: 0.4rem 0 0; } .ll-hero__trust span { display: inline-block; } .ll-hero__trust span + span::before { content: "·"; margin: 0 0.55em; opacity: 0.55; } @media (min-width: 768px) { .ll-hero { grid-template-columns: 1.05fr 1fr; gap: 3rem; padding: 2.5rem 0 3rem; } .ll-hero__image { margin: 0; border-radius: 0.5rem; order: 2; } .ll-hero__copy { order: 1; } .ll-hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); } } .ll-section { padding: 2rem 0; } .ll-section h2 { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); } .ll-section > p { color: var(--ll-ink-soft); } .ll-section--center { text-align: center; } .ll-section--center > * { margin-left: auto; margin-right: auto; } .ll-section--center > p { max-width: 38rem; } .ll-divider { border: 0; height: 1px; background: var(--ll-rule); margin: 2rem 0; max-width: 4rem; } .ll-divider--center { margin-left: auto; margin-right: auto; } .ll-usecases, .ll-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; } .ll-usecases > div, .ll-cards > div { padding-top: 0.5rem; border-top: 1px solid var(--ll-rule); } .ll-usecases h3, .ll-cards h3 { margin: 0.5rem 0 0.4rem; font-size: 1.15rem; color: var(--ll-ink); } .ll-usecases p, .ll-cards p { margin: 0; color: var(--ll-ink-soft); font-size: 1rem; line-height: 1.55; } .ll-shots { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; } @media (min-width: 640px) { .ll-shots { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } .ll-shots__caption { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--ll-ink-soft); margin: 0 0 0.25rem; font-family: ui-sans-serif,system-ui,-apple-system,sans-serif; } .ll-phone { aspect-ratio: 9 / 19; max-width: 220px; width: 100%; background: #1a140d; border-radius: 1.6rem; padding: 0.45rem; box-shadow: 0 18px 40px rgba(60,40,20,0.22), 0 3px 8px rgba(60,40,20,0.12); position: relative; } .ll-phone::before { content: ""; position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%); width: 30%; height: 0.45rem; background: #0a0703; border-radius: 0 0 0.6rem 0.6rem; z-index: 2; } .ll-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.2rem; display: block; margin: 0; } .ll-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; } .ll-step { padding: 1.25rem 1.25rem 1.4rem; border-radius: 0.65rem; background: var(--ll-cream-deep); border: 1px solid var(--ll-rule); } .ll-step h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--ll-ink); } .ll-step p { margin: 0; color: var(--ll-ink-soft); font-size: 0.98rem; } .ll-step__num { display: inline-block; font-family: ui-sans-serif,system-ui,sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.15em; color: var(--ll-accent); margin-bottom: 0.4rem; } .ll-founder { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; margin-top: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--ll-rule); border-bottom: 1px solid var(--ll-rule); } @media (min-width: 640px) { .ll-founder { grid-template-columns: 140px 1fr; gap: 1.75rem; } } .ll-founder img { width: 140px; height: 140px; object-fit: cover; border-radius: 0.5rem; margin: 0; box-shadow: 0 6px 18px rgba(60,40,20,0.18); } .ll-founder h2 { margin: 0 0 0.55rem; font-size: 1.4rem; } .ll-founder p { margin: 0; color: var(--ll-ink-soft); line-height: 1.65; } .ll-founder__sig { font-style: italic; color: var(--ll-ink); margin-top: 0.6rem !important; } .ll-privacy { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; } @media (min-width: 640px) { .ll-privacy { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } } .ll-privacy__item { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.25rem 0; } .ll-privacy__icon { width: 2rem; height: 2rem; color: var(--ll-accent); } .ll-privacy__icon svg { width: 100%; height: 100%; stroke-width: 1.4; } .ll-privacy__label { margin: 0; font-family: 'Iowan Old Style',Palatino,Georgia,serif; font-weight: 600; font-size: 1.05rem; color: var(--ll-ink); } .ll-privacy__desc { margin: 0; color: var(--ll-ink-soft); font-size: 0.97rem; line-height: 1.5; } .ll-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.85rem; margin-top: 1.25rem; } .ll-quote { padding: 1rem 1.15rem; border-left: 2px solid var(--ll-accent); font-style: italic; background: var(--ll-cream-deep); border-radius: 0 0.4rem 0.4rem 0; color: var(--ll-ink); font-size: 1.02rem; line-height: 1.5; } .ll-samples { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; } @media (min-width: 768px) { .ll-samples { grid-template-columns: 1fr 1fr; gap: 1.75rem; } } .ll-sample { padding: 1.4rem 1.5rem 1.5rem; border-radius: 0.55rem; background: var(--ll-cream-deep); border: 1px solid var(--ll-rule); position: relative; } .ll-sample__label { display: inline-block; font-family: ui-sans-serif,system-ui,sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ll-accent); margin: 0 0 0.7rem; padding: 0.25rem 0.6rem; border: 1px solid var(--ll-rule); border-radius: 999px; background: rgba(247,239,226,0.4); } html.dark .ll-sample__label { background: rgba(247,239,226,0.06); } .ll-sample p { margin: 0 0 0.75rem; color: var(--ll-ink); line-height: 1.6; } .ll-sample p:last-child { margin-bottom: 0; } .ll-sample p em, .ll-sample em { font-style: italic; color: var(--ll-ink-soft); } .ll-faqs { margin-top: 1.5rem; } .ll-faq { border-bottom: 1px solid var(--ll-rule); } .ll-faq:first-child { border-top: 1px solid var(--ll-rule); } .ll-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; color: var(--ll-ink); font-family: 'Iowan Old Style',Palatino,Georgia,serif; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .ll-faq summary::-webkit-details-marker { display: none; } .ll-faq summary::after { content: "+"; flex-shrink: 0; width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ll-accent); font-weight: 400; font-size: 1.3rem; line-height: 1; transition: transform 200ms ease; } .ll-faq[open] summary::after { content: "−"; } .ll-faq p { margin: 0 0 1rem; color: var(--ll-ink-soft); line-height: 1.6; } .ll-cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; justify-content: center; align-items: center; margin: 1.5rem 0 0.5rem; } .ll-cta-row a { line-height: 0; display: inline-block; } .ll-cta-row img { height: 48px; width: auto; margin: 0; } .ll-final { text-align: center; padding: 2.5rem 0 1.5rem; } .ll-final h2 { margin-bottom: 0.5rem; font-size: clamp(1.6rem, 3vw, 2.1rem); } .ll-final p { max-width: 34rem; margin: 0 auto 1.5rem; color: var(--ll-ink-soft); } .ll-stores { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; justify-content: center; align-items: center; margin: 0; } .ll-stores a { line-height: 0; display: inline-block; } .ll-stores img { height: 52px; width: auto; margin: 0; } .app-badge-light { display: inline-block; } .app-badge-dark { display: none; } html.dark .app-badge-light { display: none; } html.dark .app-badge-dark { display: inline-block; } .ll-footer-trust { text-align: center; color: var(--ll-ink-soft); font-size: 0.92rem; padding: 1.5rem 0 0.5rem; } .ll-footer-trust strong { color: var(--ll-ink); font-weight: 600; } .ll-sticky { display: none; } @media (max-width: 767px) { .ll-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 0.6rem; justify-content: center; align-items: center; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--ll-cream); border-top: 1px solid var(--ll-rule); box-shadow: 0 -6px 18px rgba(60,40,20,0.08); } html.dark .ll-sticky { background: #1a140d; } .ll-sticky a { line-height: 0; display: inline-block; } .ll-sticky img { height: 40px; width: auto; margin: 0; } } @media (prefers-reduced-motion: no-preference) { .ll-hero__copy > * { opacity: 0; transform: translateY(10px); animation: ll-rise 700ms cubic-bezier(.2,.7,.2,1) forwards; } .ll-hero__copy > *:nth-child(1) { animation-delay: 60ms; } .ll-hero__copy > *:nth-child(2) { animation-delay: 160ms; } .ll-hero__copy > *:nth-child(3) { animation-delay: 260ms; } .ll-hero__copy > *:nth-child(4) { animation-delay: 360ms; } .ll-hero__copy > *:nth-child(5) { animation-delay: 460ms; } .ll-hero__image { opacity: 0; animation: ll-fade 900ms ease-out 120ms forwards; } @keyframes ll-rise { to { opacity: 1; transform: none; } } @keyframes ll-fade { to { opacity: 1; } } } </style> <div class="ll-lp"> <section class="ll-hero"> <div class="ll-hero__image"> <picture> <source media="(min-width: 768px)" srcset="https://www.lacklustre.org/vintage-letter-foutain-pen-scene-1642x958.png" /> <img src="https://www.lacklustre.org/vintage-letter-foutain-pen-scene-821x479.png" alt="温かみのあるヴィンテージの木製机に置かれた手書きの手紙と万年筆。" loading="eager" /> </picture> </div> <div class="ll-hero__copy"> <p class="ll-hero__eyebrow">Lack Lustre</p>