透明感のモダンビューティー

Codexで、以下の参照コードを使った日本語のLPを実装してください。説明や構成案だけで終わらず、ブラウザで表示できるファイルを作ってください。

【今回つくるもの】
透明感のモダンビューティー / Sculptural Beauty
淡いラベンダーと繊細な文字で、日々のケアを美しく見せるLP。
特徴：直線的な商品写真・小さな正方形の写真・平行な細線のリンク

【自分用にする場合の変更欄】
ブランド／サービス名：VEIL
紹介するもの：ビューティー・商品
ページの目的・ボタン文言：ケアの時間を知る
この3項目を変更していなければ、参照コードをそのまま使って見本を再現してください。変更した場合だけ、その内容に合わせて本文・見出し・画像の説明文を調整してください。ブランド名はロゴ・図形内の文字・写真の注記・帯・締め・フッター・ページタイトルも揃えます。配色、写真の形、レイアウトは維持してください。写真の変更は別途指定があった場合だけ行います。

【再現するときの優先ルール】
下のHTML・CSSが完成形の基準です。雰囲気から新しくデザインし直さず、このコードを実装に使ってください。
・変更欄に応じて調整した文章以外の掲載文と、セクションの順序・数、図形・図面の構造、写真の注記を保持する。新しいナビ、ボタン、キャッチコピー、口コミ、実績を追加しない。
・変更欄が未変更なら、締めの見出しは「素肌と過ごす時間を、美しく。」のまま。自分用に見出しを変更した場合も、締めにはヒーローと同じ見出しを使い、別の締め文を追加しない。
・CSSの数値・単位・記述順・メディアクエリを保持する。container-typeとcqw、フォントとウェイト、改行用span、object-position、画像の縦横比、角の形、枠線、余白を省略しない。
・画像共通ルールを追加して個別のwidth・height・min-height・aspect-ratioを上書きしない。特に重ね写真も参照コードどおりの比率にする。
・見本のLP部分だけを作る。ギャラリーの外枠、「LP全体を見る」、プロンプト欄はLPに追加しない。

【実装・操作】
新規なら参照コードをindex.htmlとして保存してください。HTML・CSSだけで表示とページ内リンクが動作します。
既存プロジェクトへ入れる場合はその構成に合わせてHTMLをコンポーネントへ移し、必要な属性を変換してください。スタイルは.lp-page内とlp-接頭辞のクラスに限定し、既存のリセットや見出し・画像のCSSと干渉させないでください。head内のフォント読み込みと変数も移植します。単体HTML用のhtml・bodyの規則はアプリ全体へ適用せず、必要な背景・余白設定をLPのルートに移してください。
メインボタンは#sample-content、上部リンクは#sample-topへ移動します。この参照コードには予約・購入・送信機能はありません。追加指定がなければフォームやバックエンドを作らないでください。
キーボードのフォーカス表示とprefers-reduced-motionの指定を維持してください。

【画像とフォント】
画像は参照コード内の絶対URLを使用します。同じ画像をローカルへ保存する場合も、画像自体とトリミング指定を変更しないでください。
出典：Priscilla Du Preez / Unsplash（https://unsplash.com/photos/white-and-brown-glass-bottle-5NQkmZyT03s）。
Noto Sans JPとSpace GroteskはGoogle Fontsから読み込みます。明朝体・Georgia・等幅フォントは端末のフォントを使うため、環境によって字形が変わる場合があります。ネット接続が必要な画像・フォントが読み込めないときは、勝手に別素材へ置き換えず、その問題を報告してください。

【完成前の確認】
1. 375px・768px・1440pxの幅で表示し、画像・フォントの読み込み完了後に確認する。
2. 横はみ出し、文字の欠け、写真の形と重なり、本文4セクション、締めの見出しが参照コードどおりか確認する。変更欄で指定した文章の変更だけは許容する。
3. ボタンから本文へ、上部リンクから先頭へ移動できることを確認する。
4. 最後に作成ファイル、表示方法、変更欄に応じて変えた場所、実際に確認した幅を簡潔に報告する。画面確認ができなかった場合は未確認と明記する。

【参照コード：省略せず実装に使用】
```html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VEIL | 透明感のモダンビューティー</title>
<meta name="description" content="淡いラベンダーと繊細な文字で、日々のケアを美しく見せるLP。">
<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=Noto+Sans+JP:wght@100..900&amp;family=Space+Grotesk:wght@300..700&amp;display=swap" rel="stylesheet">
<style>
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;tab-size:4}
body{margin:0}
.lp-page{--font-jp:'Noto Sans JP';--font-display:'Space Grotesk';width:100%;max-width:1440px;margin:0 auto;font:400 16px/1.8 var(--font-jp),sans-serif}
:where(.lp-page,.lp-page *,.lp-page ::before,.lp-page ::after){box-sizing:border-box;margin:0;padding:0;border:0 solid}
:where(.lp-page h1,.lp-page h2,.lp-page h3){font-size:inherit;font-weight:inherit}
:where(.lp-page a){color:inherit;text-decoration:none}
:where(.lp-page b,.lp-page strong){font-weight:bolder}
:where(.lp-page code){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-size:1em}
:where(.lp-page small){font-size:80%}
:where(.lp-page img,.lp-page svg){display:block;vertical-align:middle}
:where(.lp-page img){max-width:100%;height:auto}
.lp-page a:focus-visible{outline:3px solid #e55d29;outline-offset:5px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lp-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.lp-sample{position:relative;background:var(--sample-bg);color:var(--sample-ink);font-family:var(--font-jp),sans-serif;overflow:hidden;isolation:isolate;container-type:inline-size}.lp-sample p{margin:0}.lp-sample h1,.lp-sample h3{margin:0;color:inherit;letter-spacing:-.04em}.lp-sampleNav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 6%;font-size:13px;line-height:1.4}.lp-sampleNav b{font-family:var(--font-display),sans-serif;font-size:21px;letter-spacing:.08em}.lp-sampleNav>span{font-size:10px;letter-spacing:.14em}.lp-sampleHero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5%;padding:45px 6% 70px;min-height:570px}.lp-sampleCopy{position:relative;z-index:2;min-width:0}.lp-sampleKicker{font-size:12px;letter-spacing:.12em;margin-bottom:20px!important}.lp-sampleCopy h1{font-size:clamp(32px,4.2cqw,68px);font-weight:600;line-height:1.45;text-wrap:balance;word-break:normal;overflow-wrap:anywhere}.lp-sampleDescription{font-size:16px;line-height:1.9;margin-top:24px!important;max-width:36em}.lp-sampleCta{display:inline-flex;gap:16px;align-items:center;justify-content:center;font-size:14px;line-height:1.5;padding:14px 22px;background:var(--sample-ink);color:var(--sample-bg);margin-top:28px;border:1px solid var(--sample-ink)}.lp-sampleArt{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;align-self:stretch;min-height:360px;overflow:hidden}.lp-sampleArt img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.lp-sampleSections{padding:70px 6%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}.lp-sampleSection{border-top:1px solid;padding-top:20px}.lp-sampleNumber{font:14px/1.5 var(--font-display),sans-serif;opacity:.65}.lp-sampleSection h3{font-size:23px;line-height:1.6;margin:18px 0}.lp-sampleSection p{font-size:16px;line-height:1.9}.lp-sampleClosing{text-align:center;padding:75px 8%;background:var(--sample-ink);color:var(--sample-bg)}.lp-sampleClosing>p{font-family:var(--font-display),sans-serif;letter-spacing:.15em;font-size:15px}.lp-sampleClosing h3{font-size:32px;line-height:1.7;margin:20px 0}.lp-sampleClosing a{display:inline-block;border-bottom:1px solid;padding:8px;font-size:14px}.lp-sampleFooter{display:flex;justify-content:space-between;gap:20px;padding:25px 6%;font-size:12px}.lp-sampleFooter b{font-family:var(--font-display),sans-serif;letter-spacing:.07em}
.lp-headlinePart{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.lp-beauty .lp-sampleNav b{font:32px/1.4 Georgia,serif;letter-spacing:.25em}.lp-beauty .lp-sampleHero{padding:60px 9% 90px;gap:10%}.lp-beauty .lp-sampleCopy h1{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-weight:400;font-size:4.5cqw}.lp-beauty .lp-sampleArt{border-radius:160px 160px 0 0;filter:saturate(.65)}.lp-beauty .lp-sampleCta{background:none;color:inherit}.lp-beauty .lp-sampleSections{grid-template-columns:1fr 1fr;gap:55px}.lp-beauty .lp-sampleSection{border-color:#c8c1d4}.lp-beauty .lp-sampleClosing{background:#d9d4e1;color:#463e4a}
@media(max-width:1000px){.lp-sampleSections{gap:24px}.lp-sampleSection h3{font-size:20px}.lp-fullSample .lp-sampleHero{min-height:500px}.lp-fullSample .lp-sampleArt{min-height:320px}.lp-fullSample .lp-sampleDescription{font-size:14px}.lp-fullSample .lp-sampleCopy h1{font-size:4.6cqw}.lp-fullSample .lp-sampleCta{font-size:13px;padding:12px 16px}.lp-fullSample .lp-sampleSections{grid-template-columns:1fr 1fr}.lp-fullSample .lp-sampleSection{display:block}.lp-fullSample .lp-sampleSection h3{margin:14px 0}.lp-fullSample .lp-sampleSection p{font-size:14px}}
@media(max-width:640px){.lp-fullSample .lp-sampleNav{padding:22px 7%}.lp-fullSample .lp-sampleNav b{font-size:20px}.lp-fullSample .lp-sampleNav>span{display:none}.lp-fullSample .lp-sampleHero{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding:28px 7% 44px;min-height:0}.lp-fullSample .lp-sampleCopy h1{font-size:clamp(27px,8.5cqw,38px);line-height:1.5}.lp-fullSample .lp-sampleKicker{font-size:12px;margin-bottom:14px!important}.lp-fullSample .lp-sampleDescription{font-size:16px;margin-top:18px!important}.lp-fullSample .lp-sampleCta{font-size:14px;margin-top:24px;align-self:flex-start}.lp-fullSample .lp-sampleArt{min-height:280px;margin:0;align-self:stretch}.lp-fullSample .lp-sampleSections{display:flex;flex-direction:column;padding:42px 7%;gap:24px}.lp-fullSample .lp-sampleSection{display:block;transform:none;margin:0}.lp-fullSample .lp-sampleSection h3{font-size:23px}.lp-fullSample .lp-sampleSection p{font-size:16px}.lp-fullSample .lp-sampleNumber{font-size:14px}.lp-fullSample .lp-sampleClosing{padding:45px 7%}.lp-fullSample .lp-sampleClosing h3{font-size:25px}.lp-fullSample .lp-sampleFooter{flex-direction:column;gap:8px;padding:24px 7%}}
.lp-primaryPhoto{object-position:center}
.lp-artNote{position:absolute;bottom:0;left:0;z-index:2;font:12px/1.5 var(--font-display),sans-serif;letter-spacing:.08em;padding:10px 0;background:var(--sample-bg);width:100%}
.lp-sampleArt .lp-detailPhoto{inset:auto;z-index:2}
.lp-beauty .lp-sampleNav{border-bottom:1px solid #c8c1d477;align-items:flex-end}
.lp-beauty .lp-sampleNav b{font-size:64px;letter-spacing:.25em;font-weight:400}.lp-beauty .lp-sampleNav>span{padding-bottom:12px}
.lp-beauty .lp-sampleHero{grid-template-columns:.95fr 1.05fr;gap:9%;padding:50px 7% 75px}
.lp-beauty .lp-sampleArt{order:-1;border-radius:0;overflow:visible;min-height:460px;filter:saturate(.65);background:transparent}
.lp-beauty .lp-sampleArt .lp-primaryPhoto{inset:0 auto auto 0;width:80%;height:88%;border-radius:0;object-position:50% 56%}
.lp-beauty .lp-sampleArt .lp-detailPhoto{right:0;bottom:0;width:44%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 76%;border:8px solid #f0eef0;border-radius:0;box-shadow:0 6px 22px #463e4a14}
.lp-beauty .lp-artNote{width:55%;font-size:10px;letter-spacing:.12em;bottom:0;background:transparent;writing-mode:horizontal-tb}
.lp-beauty .lp-sampleCopy h1{font-size:4cqw;font-weight:400;line-height:1.6}
.lp-beauty .lp-sampleCta{border:0;border-top:1px solid #463e4a;border-bottom:1px solid #463e4a;border-radius:0;background:transparent;color:#463e4a;padding:12px 0;letter-spacing:.08em}
.lp-beauty .lp-sampleSections{grid-template-columns:1fr 1fr;gap:55px 70px;padding:75px 9%}
.lp-beauty .lp-sampleSection{border-top:0;border-left:1px solid #c8c1d4;padding:0 0 0 24px}.lp-beauty .lp-sampleNumber{font-family:Georgia,serif;font-size:28px;opacity:.65}
.lp-beauty .lp-sampleClosing{background:transparent;color:#463e4a;border-block:1px solid #c8c1d4;margin:0 7%;padding:60px 4%;text-align:left}
.lp-beauty .lp-sampleClosing>p{font-family:Georgia,serif;font-size:48px;letter-spacing:.3em}
.lp-beauty .lp-sampleClosing a{border:1px solid #c8c1d4;padding:12px 24px}
@media(max-width:1000px) and (min-width:641px){
 .lp-fullSample.lp-beauty .lp-sampleArt{min-height:350px}
 .lp-fullSample .lp-sampleNav b{max-width:100%}
}
@media(max-width:640px){
 .lp-fullSample .lp-sampleNav{position:relative;display:flex;align-items:center;padding:20px 7%}
 .lp-fullSample .lp-sampleHero{display:flex;flex-direction:column;min-height:0;height:auto;gap:30px;padding:28px 7% 44px;grid-template-columns:none}
 .lp-fullSample .lp-sampleCopy{width:100%;max-width:none}.lp-fullSample .lp-sampleCopy h1{font-size:clamp(27px,8.5cqw,38px);line-height:1.5}
 .lp-fullSample .lp-sampleDescription{font-size:16px}.lp-fullSample .lp-sampleArt{order:0;min-height:280px;height:310px;margin:0;align-self:stretch;width:100%}
 .lp-fullSample .lp-sampleSections{display:flex;flex-direction:column;gap:30px;padding:42px 7%}
 .lp-fullSample .lp-sampleSection{display:block;max-width:100%;margin-top:0}.lp-fullSample .lp-sampleSection h3{font-size:23px;margin:14px 0}.lp-fullSample .lp-sampleSection p{font-size:16px}
 .lp-fullSample .lp-sampleClosing{display:block;padding:45px 7%;gap:0}.lp-fullSample .lp-sampleClosing h3{font-size:25px;margin:20px 0}
 .lp-fullSample.lp-beauty .lp-sampleNav b{font-size:44px}.lp-fullSample.lp-beauty .lp-sampleArt{order:-1;height:365px;min-height:0;border-radius:0;filter:saturate(.65)}
 .lp-fullSample.lp-beauty .lp-sampleArt .lp-primaryPhoto{width:78%;height:87%;border-radius:0}.lp-fullSample.lp-beauty .lp-sampleArt .lp-detailPhoto{width:43%;height:auto;aspect-ratio:1;border-radius:0;border-width:7px}
 .lp-fullSample.lp-beauty .lp-artNote{font-size:10px;width:50%}.lp-fullSample.lp-beauty .lp-sampleCopy h1{font-size:29px}
 .lp-fullSample.lp-beauty .lp-sampleSection{padding-left:22px}.lp-fullSample.lp-beauty .lp-sampleClosing{margin:0 7%;padding:40px 3%}
}
</style>
</head>
<body style="background:#F0EEF0">
<main class="lp-page" aria-label="VEIL">
<div id="sample-top" style="--sample-bg:#F0EEF0;--sample-ink:#463E4A;--sample-accent:#C8C1D4" class="lp-sample lp-beauty lp-fullSample"><div class="lp-sampleNav"><b>VEIL</b><span>SCULPTURAL BEAUTY</span></div><div class="lp-sampleHero"><div class="lp-sampleCopy"><p class="lp-sampleKicker">ビューティー・商品</p><h1><span class="lp-headlinePart">素肌と過ごす時間を、</span><span class="lp-headlinePart">美しく。</span></h1><p class="lp-sampleDescription">慌ただしい日も、ゆっくり過ごせる日も。肌に触れる時間を、今の自分と向き合う小さな習慣に。</p><a class="lp-sampleCta" href="#sample-content">ケアの時間を知る <span aria-hidden="true">↗</span></a></div><div class="lp-sampleArt"><img class="lp-primaryPhoto" src="https://images.unsplash.com/photo-1564020426549-fabfb8c467ad?auto=format&amp;fit=crop&amp;fm=jpg&amp;q=80&amp;w=1200" alt="手に持った無地ラベルのアンバー色のボトル" loading="lazy" width="1200" height="900"/><img class="lp-detailPhoto" src="https://images.unsplash.com/photo-1564020426549-fabfb8c467ad?auto=format&amp;fit=crop&amp;fm=jpg&amp;q=80&amp;w=1200" alt="" aria-hidden="true" loading="lazy" width="1200" height="900"/><span class="lp-artNote">DAILY RITUAL / VEIL</span></div></div><div id="sample-content" class="lp-sampleSections"><section class="lp-sampleSection"><span class="lp-sampleNumber">01</span><h3>朝と夜に、自分のためのひととき。</h3><p>慌ただしい日も、ゆっくり過ごせる日も。肌に触れる時間を、今の自分と向き合う小さな習慣に。</p></section><section class="lp-sampleSection"><span class="lp-sampleNumber">02</span><h3>心地よさを、丁寧に選ぶ。</h3><p>手のひらに広げたときの感触。肌になじませる時間。毎日使うものだからこそ、使い心地を大切にします。</p></section><section class="lp-sampleSection"><span class="lp-sampleNumber">03</span><h3>シンプルに、続けられること。</h3><p>足し続けるだけではなく、自分に合うケアを見つめる。無理のない手順で、日々のリズムに寄り添います。</p></section><section class="lp-sampleSection"><span class="lp-sampleNumber">04</span><h3>置く姿も、暮らしの一部に。</h3><p>静かな色と、すっきりとしたかたち。手に取るたびに気持ちが整うような、身近な道具でありたいと考えています。</p></section></div><div class="lp-sampleClosing"><p>VEIL</p><h3>素肌と過ごす時間を、美しく。</h3><a href="#sample-top">ページ上部へ戻る ↑</a></div><div class="lp-sampleFooter"><b>VEIL</b><span>架空ブランドのデザインサンプル</span></div></div>
</main>
</body>
</html>
```