/* トップのLP化（2026-10-01・見本 第2版をもとに実装）。藍のヒーロー → 生成り → 白 → 藍の会員機能 → 朱の締め、と明暗でメリハリを付ける。
   見本：Drive 技術資料/design/2026-10-01_トップLP化見本/mockup-v2.html。トップでだけ読み込む（inc/assets.php）。 */
@layer pages {
.home-body { --lp-ai-950: #0d1626; --lp-ai-900: #13203a; --lp-ai-800: #1b2c4d; --lp-shu: #c2462d; --lp-shu-deep: #a6371f; --lp-kin: #c9a35b; --lp-kinari: #f7f3ea; --lp-ease: cubic-bezier(.32, .72, 0, 1); }
.home-body :is(.lp-hero, .lp-sec, .lp-member, .lp-final) :is(h1, h2, h3), .home-body :is(.section-heading, .faq-section, .empathy) h2 { font-family: var(--font-pillar); font-weight: 600; letter-spacing: .02em; }

/* 見出し前の小さなラベル */
.lp-tag { display: inline-flex; align-items: center; justify-self: start; width: fit-content; padding: 5px 12px; border-radius: 999px; background: rgb(194 70 45 / 8%); color: var(--lp-shu-deep); font: 600 .6875rem/1 var(--font-sans); letter-spacing: .2em; }
.lp-tag.is-dark { background: rgb(255 255 255 / 8%); color: #f2c6b8; }

/* ボタン：丸い島と、入れ子の円に入れた矢印 */
.lp-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 8px 8px 28px; border-radius: 999px; background: var(--lp-shu); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px rgb(194 70 45 / 35%); transition: transform .5s var(--lp-ease), box-shadow .5s var(--lp-ease); }
.lp-btn .arw { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / 18%); transition: transform .5s var(--lp-ease); }
.lp-btn:hover { color: #fff; box-shadow: 0 14px 36px rgb(194 70 45 / 45%); }
.lp-btn:hover .arw { transform: translate(3px, -1px) scale(1.06); }
.lp-btn:active { transform: scale(.98); }
.lp-btn:focus-visible { outline: 3px solid #f2c6b8; outline-offset: 3px; }
.lp-btn.is-line { background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%); }
.lp-btn.is-line .arw { background: rgb(255 255 255 / 10%); }
.lp-btn.is-light { background: #fff; color: var(--lp-ai-900); box-shadow: none; }
.lp-btn.is-light .arw { background: var(--brand-ink-soft); }
.lp-btn.is-white { background: #fff; color: var(--lp-shu-deep); box-shadow: 0 14px 40px rgb(0 0 0 / 18%); }
.lp-btn.is-white .arw { background: var(--brand-accent-soft); }

/* 1. ヒーロー：藍の夜空と、結果の見本カード */
.lp-hero { position: relative; overflow: hidden; padding: 96px 0 0; background: radial-gradient(1200px 600px at 78% 20%, rgb(47 74 120 / 55%), transparent 60%), radial-gradient(800px 500px at 8% 92%, rgb(194 70 45 / 18%), transparent 60%), linear-gradient(180deg, var(--lp-ai-950), var(--lp-ai-900) 70%, var(--lp-ai-800)); color: #c9d2df; }
.lp-hero-sky { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 32% 62%, #fff6, transparent), radial-gradient(1.5px 1.5px at 58% 12%, #fff9, transparent), radial-gradient(1px 1px at 72% 48%, #fff5, transparent), radial-gradient(1px 1px at 88% 78%, #fff7, transparent), radial-gradient(1px 1px at 22% 88%, #fff5, transparent); }
.lp-ring { position: absolute; right: -180px; top: 10px; width: 760px; height: 760px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 7%); box-shadow: inset 0 0 0 70px rgb(255 255 255 / 1.5%), inset 0 0 0 71px rgb(255 255 255 / 5%), inset 0 0 0 160px rgb(255 255 255 / 1.2%), inset 0 0 0 161px rgb(255 255 255 / 5%); animation: lp-spin 160s linear infinite; }
.lp-ring span { position: absolute; color: rgb(255 255 255 / 28%); font: 400 15px/1 var(--font-pillar); }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 560px; }
.lp-hero h1 { margin-top: 22px; color: #fff; font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.2; letter-spacing: .03em; }
.lp-hero h1 .ln { display: block; white-space: nowrap; }
.lp-hero h1 .accent { color: #f2c6b8; }
.lp-lead { max-width: 30em; margin-top: 26px; color: #c9d2df; font-size: 1.125rem; }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 36px; }
.lp-cta small { color: #9fb0c8; font-size: .8125rem; line-height: 1.7; }
.lp-stack { position: relative; margin: 0; }
.lp-cards { position: relative; height: 500px; }
.lp-bezel { position: absolute; padding: 6px; border-radius: 26px; background: rgb(255 255 255 / 7%); box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 30px 60px rgb(5 10 20 / 45%); }
.lp-core { padding: 20px 22px; border-radius: 20px; background: var(--nc-50); color: var(--nc-800); box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%); }
.lp-card-label { display: block; margin-bottom: 10px; color: var(--nc-600); font-size: .6875rem; letter-spacing: .14em; }
.lp-b1 { left: 0; top: 10px; width: 330px; transform: rotate(-3deg); animation: lp-float 9s var(--lp-ease) infinite; }
.lp-b2 { right: 0; top: 140px; width: 270px; transform: rotate(2.5deg); animation: lp-float 10s var(--lp-ease) -3s infinite reverse; }
.lp-b3 { left: 60px; bottom: 0; width: 360px; transform: rotate(-1deg); animation: lp-float 11s var(--lp-ease) -5s infinite; }
@keyframes lp-float { 50% { translate: 0 -10px; } }
.lp-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.lp-pillars span { padding: 8px 0 6px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgb(28 27 23 / 8%); color: var(--nc-900); font: 500 1.65rem/1.45 var(--font-pillar); }
.lp-pillars small { display: block; margin-bottom: 2px; color: var(--nc-600); font: 700 .625rem/1 var(--font-sans); }
.lp-pillars .is-day { background: var(--brand-accent-soft); box-shadow: 0 0 0 1px rgb(194 70 45 / 35%); color: var(--lp-shu-deep); }
.lp-b1 p { margin-top: 12px; font-size: .8125rem; }
.lp-score { display: flex; align-items: flex-end; gap: 10px; }
.lp-score strong { color: var(--lp-ai-900); font: 500 3.4rem/1 var(--font-pillar); }
.lp-grade { padding: 3px 10px; border-radius: 999px; background: var(--lp-kin); color: #1c1b17; font-size: .75rem; font-weight: 700; }
.lp-stack svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.lp-compat-chart { overflow: visible; }
.lp-radar-grid polygon, .lp-radar-grid path { fill: none; stroke: #e3dfd5; stroke-width: 1; }
.lp-radar-area { fill: rgb(194 70 45 / 18%); stroke: #c2462d; stroke-width: 2; stroke-linejoin: round; }
.lp-radar-labels text { fill: #6b675c; font: 600 11px/1 var(--font-sans); }
.lp-sample-note { margin-top: 18px; color: #9fb0c8; font-size: .75rem; text-align: right; }
.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 56px 0 0; border-top: 1px solid rgb(255 255 255 / 10%); }
.lp-stats > div { display: flex; flex-direction: column-reverse; padding: 26px 8px 30px; text-align: center; }
.lp-stats > div + div { border-left: 1px solid rgb(255 255 255 / 8%); }
.lp-stats dd { margin: 0; color: #fff; font: 500 2.6rem/1.15 var(--font-pillar); }
.lp-stats dd small { margin-left: 4px; color: #c9d2df; font: 600 .9rem var(--font-sans); }
.lp-stats dt { color: #9fb0c8; font-size: .8125rem; }
.lp-stats-note { max-width: 56em; margin: 0 auto; padding-bottom: 28px; color: #8e9fb8; font-size: .75rem; line-height: 1.8; text-align: center; }

/* 2〜3. 白地の節：大見出しと大きな余白 */
.lp-sec { padding-block: 140px 0; }
/* 入力フォームのあとの「わかること」は、結果の下に続くので上の余白を少し詰める */
#what-you-get { padding-top: 120px; }
.lp-head { display: grid; gap: 18px; margin-bottom: 56px; }
.lp-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.3; }
.lp-head p { max-width: 36em; color: var(--nc-600); font-size: 1.0625rem; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--nc-200); list-style: none; }
.lp-steps li { padding: 40px 36px 8px 0; }
.lp-steps li + li { padding-left: 36px; border-left: 1px solid var(--nc-200); }
.lp-steps .num { display: block; margin-bottom: 20px; color: transparent; -webkit-text-stroke: 1px var(--lp-shu); font: 400 5.5rem/1 var(--font-pillar); }
.lp-steps h3 { margin-bottom: 10px; font-size: 1.5rem; }
.lp-steps p { color: var(--nc-600); }
.lp-zig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.lp-zig + .lp-zig { margin-top: 120px; }
.lp-zig.is-rev .lp-visual { order: 2; }
.lp-visual { padding: 8px; border-radius: 34px; background: rgb(28 27 23 / 4%); box-shadow: 0 0 0 1px rgb(28 27 23 / 8%); }
.lp-visual .lp-core { min-height: 340px; padding: 32px; border-radius: 27px; background: #fff; box-shadow: 0 40px 80px -30px rgb(19 32 58 / 25%); }
.lp-visual svg { display: block; width: 100%; max-width: 360px; margin-top: 8px; }
.lp-vtitle { margin-top: 14px; color: var(--nc-900); font: 500 1.6rem/1.5 var(--font-pillar); }
.lp-quote { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: var(--lp-kinari); font-size: .9375rem; }
.lp-fade { position: relative; margin-top: 16px; color: var(--nc-600); font-size: .9375rem; }
.lp-fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0%), #fff 85%); }
.lp-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.lp-axes span { padding: 14px 16px; border-radius: 14px; background: var(--lp-kinari); }
.lp-axes small { display: block; color: var(--nc-600); font-size: .75rem; }
.lp-axes b { color: var(--lp-ai-900); font: 500 1.9rem/1.2 var(--font-pillar); }
.lp-ztext h3 { margin: 18px 0; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.32; }
.lp-ztext > p { color: var(--nc-600); font-size: 1.0625rem; }
.lp-ztext ul { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-ztext li { display: flex; align-items: baseline; gap: 12px; color: var(--nc-900); font-weight: 600; }
.lp-ztext li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-shu); transform: translateY(-3px); }
.lp-link { display: inline-block; margin-top: 26px; color: var(--lp-shu-deep); font-weight: 700; }
.lp-more { margin-top: 72px; text-align: center; }
.lp-more a { color: var(--brand-ink); font-weight: 700; }

/* 4. 会員機能：藍の地に大小のタイル */
.lp-member { margin-top: 140px; padding: 130px 0; background: var(--lp-ai-950); color: #c9d2df; }
.lp-member h2, .lp-member h3 { color: #fff; }
.lp-member .lp-head p { color: #9fb0c8; }
.lp-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.lp-tile { grid-column: span 5; padding: 6px; border-radius: 28px; background: rgb(255 255 255 / 5%); box-shadow: 0 0 0 1px rgb(255 255 255 / 8%); }
.lp-tile .lp-core { height: 100%; padding: 28px; border-radius: 22px; background: linear-gradient(180deg, var(--lp-ai-900), var(--lp-ai-950)); color: #c9d2df; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.lp-tile h3 { margin: 14px 0 8px; font-size: 1.45rem; }
.lp-tile p { font-size: .9375rem; }
.lp-tile.is-rank { grid-column: span 7; grid-row: span 2; }
.lp-tile.is-wide { grid-column: span 12; }
.lp-rank { display: grid; gap: 8px; margin-top: 22px; }
.lp-rank span { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 5%); }
.lp-rank i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lp-shu); color: #fff; font: 700 .75rem/1 var(--font-sans); font-style: normal; }
.lp-rank b { color: #fff; font: 500 1.5rem/1 var(--font-pillar); }
.lp-rank em { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--lp-kin); color: #1c1b17; font: 700 .6875rem/1.4 var(--font-sans); font-style: normal; vertical-align: 4px; }
.lp-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 90px; margin-top: 20px; }
.lp-months i { border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #f2c6b8, var(--lp-shu)); }
.lp-member .lp-cta { margin-top: 48px; }

/* 感想が0件のあいだは、見出しと投稿欄だけに縮める */
.reviews-section.is-empty :is(.reviews-overview, .section-heading > p) { display: none; }

/* 5. 締め：朱の帯 */
.lp-final { position: relative; overflow: hidden; margin-top: 120px; padding: 140px 0; background: linear-gradient(135deg, var(--lp-shu), var(--lp-shu-deep)); color: #fff; text-align: center; }
.lp-final h2 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.3; }
.lp-final p { max-width: 32em; margin: 22px auto 40px; font-size: 1.0625rem; }
.lp-final-kanji { position: absolute; right: -40px; bottom: -120px; color: rgb(255 255 255 / 6%); font: 400 420px/1 var(--font-pillar); pointer-events: none; }
.lp-final + * { margin-top: 0; }
.lp-sticky { display: none; }

/* 画面に入ると静かに浮かび上がる（対応ブラウザだけ。非対応や動きを減らす設定では最初から表示） */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-rv { animation: lp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes lp-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ring, .lp-bezel { animation: none; }
  .lp-btn, .lp-btn .arw { transition: none; }
}
}
@layer pages {
@media (max-width: 900px) {
.lp-hero-grid { grid-template-columns: 1fr; }
.lp-zig { grid-template-columns: 1fr; gap: 36px; }
.lp-zig.is-rev .lp-visual { order: 0; }
.lp-bento { grid-template-columns: 1fr; }
.lp-tile, .lp-tile.is-rank, .lp-tile.is-wide { grid-column: auto; grid-row: auto; }
}
@media (max-width: 767px) {
.lp-hero { padding-top: 56px; }
.lp-hero h1 { font-size: clamp(2rem, 9.6vw, 2.6rem); }
.lp-lead { font-size: 1rem; }
.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: auto; margin-top: 8px; }
.lp-bezel { position: relative; inset: auto; width: auto; transform: none; animation: none; }
.lp-b1 { grid-column: 1 / -1; }
.lp-b2 .lp-core, .lp-b3 .lp-core { height: 100%; padding: 16px; }
.lp-b2 svg { max-height: 90px; }
.lp-b2 .lp-compat-chart { max-height: none; }
.lp-b3 svg { margin-top: 18px; }
.lp-score strong { font-size: 2.6rem; }
.lp-sample-note { text-align: left; }
.lp-ring { width: 520px; height: 520px; right: -260px; top: 60px; }
.lp-stats { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
.lp-stats > div:nth-child(3) { border-left: 0; }
.lp-stats > div:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 8%); }
.lp-stats dd { font-size: 2.1rem; }
.lp-sec { padding-top: 96px; }
.lp-head { margin-bottom: 40px; }
.lp-steps { grid-template-columns: 1fr; }
.lp-steps li, .lp-steps li + li { padding: 30px 0 6px; border-left: 0; border-top: 1px solid var(--nc-200); }
.lp-steps li:first-child { border-top: 0; }
.lp-steps .num { font-size: 4rem; }
.lp-zig + .lp-zig { margin-top: 88px; }
.lp-visual .lp-core { min-height: 0; padding: 22px; }
.lp-axes { grid-template-columns: repeat(2, 1fr); }
.lp-member { margin-top: 96px; padding: 96px 0; }
.home-body .calculation { padding-top: 96px; }
.lp-final { margin-top: 88px; padding: 104px 0; }
.lp-final-kanji { font-size: 280px; }
.lp-sticky { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; z-index: 40; display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgb(13 22 38 / 82%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 30px rgb(13 22 38 / 30%); transition: transform .5s var(--lp-ease), opacity .5s var(--lp-ease); }
.lp-sticky .lp-btn { flex: 1; justify-content: space-between; min-height: 48px; padding-left: 18px; font-size: .9375rem; box-shadow: none; }
.lp-sticky .lp-btn .arw { width: 34px; height: 34px; }
/* 入力欄を操作しているあいだと、鑑定結果を表示したあとは隠す（入力欄や結果の上に重ならないように） */
.home-body:has(#calculate:focus-within, #reading-section:not([hidden])) .lp-sticky { visibility: hidden; opacity: 0; transform: translateY(120%); pointer-events: none; transition: transform .5s var(--lp-ease), opacity .5s var(--lp-ease), visibility 0s .5s; }
.home-body { padding-bottom: 76px; }
}
}