/* ============================================================
   ユアナレ 静的ランディングページ（/）専用スタイル
   Home.razor (Blazor) で使用していた app.css の LP 部分を抽出・移植。
   Blazorビルド成果物・scoped CSS に依存せず、/ 単体で表示が完結する。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100vh;
    background: #FFFFFF;
    color: #1F2933;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

img, svg { vertical-align: middle; }

h1, h2, h3 { margin: 0; padding: 0; }

.lp__hero-sec h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text-hd);
    margin: 0 0 8px;
}

/* Google審査向け説明セクション（静的LP固有） */
.lp__about p { margin: 0 0 12px; color: var(--lp-text-sub); font-size: 0.88rem; line-height: 1.9; }
.lp__about p strong { color: var(--lp-text-hd); }

.public-layout {
    min-height: 100vh;
    background: var(--color-bg);
}

/* ===== LP (ランディングページ) ===== */

.lp {
    --lp-green:      #50B886;
    --lp-green-dk:   #2D8A5E;
    --lp-green-lt:   #D8F3DC;
    --lp-green-tint: #F0FCF4;
    --lp-blue:       #5B9BD5;
    --lp-blue-dk:    #1D4ED8;
    --lp-blue-lt:    #DBEAFE;
    --lp-purple:     #9B79C4;
    --lp-purple-dk:  #6D28D9;
    --lp-purple-lt:  #EDE9FE;
    --lp-orange-dk:  #B45309;
    --lp-orange-lt:  #FDEBD3;
    --lp-text-hd:    #1A2135;
    --lp-text-sub:   #596579;
    --lp-border:     #E4EAF1;
    --lp-bg:         #F8FAFC;
    --lp-white:      #FFFFFF;
    --lp-radius:     16px;
    --lp-shadow:     0 2px 16px rgba(0,0,0,0.08);
    --lp-shadow-md:  0 4px 24px rgba(0,0,0,0.10);

    width: 100%;
    background: var(--lp-white);
    color: #3D4A5C;
    line-height: 1.7;
}

/* ナビゲーション */
.lp__nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lp-border);
    padding-block: 12px;
}
.lp__nav-inner {
    max-width: 768px;
    margin-inline: auto;
    padding-inline: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lp__logo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--lp-green-dk);
    letter-spacing: -0.02em;
}
.lp__logo span { color: var(--lp-blue); }
.lp__logo .lp__beta-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 50px;
    background: var(--lp-green-lt);
    color: var(--lp-green-dk);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.lp__nav-cta {
    background: var(--lp-green);
    color: var(--lp-white);
    border: none;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s;
}
.lp__nav-cta:hover { background: var(--lp-green-dk); }

/* コンテナ（各セクション内の幅制限） */
.lp__container {
    max-width: 768px;
    margin-inline: auto;
    padding-inline: 18px;
}

/* アイキャッチラベル */
.lp__eyebrow {
    display: inline-block;
    background: var(--lp-green-lt);
    color: var(--lp-green-dk);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 10px;
}

/* ─── ヒーロー ─── */
.lp__hero-sec {
    background: linear-gradient(145deg, var(--lp-green-tint) 0%, #EEF6FF 55%, #F5F0FF 100%);
    padding-top: 36px;
    overflow: hidden;
}
.lp__hero-layout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp__hero-sec h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--lp-text-hd);
    margin: 10px 0 14px;
    padding: 0;
}
.lp__hero-sec h1 em {
    font-style: normal;
    color: var(--lp-green-dk);
}
.lp__hero-subcopy {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lp-text-hd);
    margin-bottom: 10px;
}
.lp__hero-lead {
    font-size: 0.95rem;
    color: var(--lp-text-sub);
    line-height: 1.75;
    margin-bottom: 22px;
}
.lp__cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 28px;
}
.lp__cta-btn {
    background: var(--lp-green);
    color: var(--lp-white);
    border: none;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(80,184,134,.35);
    transition: transform .18s, box-shadow .18s;
}
.lp__cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(80,184,134,.45);
}
.lp__cta-text-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lp-green-dk);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    text-decoration: none;
}
.lp__cta-text-btn:hover { opacity: .75; }
.lp__hero-visual {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.lp__hero-svg {
    width: 100%;
    max-width: 380px;
    height: auto;
}

/* ─── セクション共通 ─── */
.lp__sec { padding-block: 52px; }
.lp__sec--subtle { background: var(--lp-bg); }
.lp__sec--green  { background: linear-gradient(160deg, var(--lp-green-tint), #EEF6FF); }

.lp__sec-hd {
    text-align: center;
    margin-bottom: 28px;
}
.lp__sec-hd h2 {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    font-weight: 700;
    color: var(--lp-text-hd);
    margin: 6px 0 0;
    line-height: 1.4;
    padding: 0;
}
.lp__sec-sub {
    font-size: 0.88rem;
    color: var(--lp-text-sub);
    margin-top: 8px;
    line-height: 1.65;
}

/* バッジ */
.lp__badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--lp-green-lt);
    color: var(--lp-green-dk);
}
.lp__badge--blue     { background: var(--lp-blue-lt);   color: var(--lp-blue-dk); }
.lp__badge--green-dk { background: var(--lp-green-lt);  color: var(--lp-green-dk); }

/* プランタグ（機能カード・ステップカード用の小バッジ） */
.lp__tag {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.lp__tag--free     { background: var(--lp-green-lt);  color: var(--lp-green-dk); }
.lp__tag--personal { background: var(--lp-blue-lt);   color: var(--lp-blue-dk); }
.lp__tag--trial    { background: var(--lp-orange-lt); color: var(--lp-orange-dk); }

/* ─── Free / Personal 簡易比較 ─── */
.lp__plans-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.lp__plan-card {
    position: relative;
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    padding: 26px 20px 22px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
}
.lp__plan-card--personal {
    border: 2px solid var(--lp-green);
    box-shadow: var(--lp-shadow-md);
}
.lp__plan-reco {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--lp-green);
    color: var(--lp-white);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
}
.lp__plan-hd { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.lp__plan-name { font-size: 1.1rem; font-weight: 800; color: var(--lp-text-hd); }
.lp__plan-tagline { font-size: 0.8rem; color: var(--lp-text-sub); }
.lp__plan-price { font-size: 1.6rem; font-weight: 800; color: var(--lp-text-hd); margin: 6px 0 14px; }
.lp__plan-price span { font-size: 0.78rem; font-weight: 600; color: var(--lp-text-sub); margin-left: 2px; }
.lp__plan-list { list-style: none; padding: 0; margin: 0; }
.lp__plan-list li {
    font-size: 0.82rem;
    color: var(--lp-text-sub);
    padding-left: 18px;
    position: relative;
    margin-bottom: 7px;
    line-height: 1.5;
}
.lp__plan-list li::before { content: '✓'; position: absolute; left: 0; color: var(--lp-green); font-weight: 700; }
.lp__plan-card--personal .lp__plan-list li::before { color: var(--lp-blue); }

/* ─── 仕組みステップ ─── */
.lp__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.lp__step-card {
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    padding: 18px 14px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
}
.lp__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lp-white);
    margin-bottom: 8px;
}
.lp__step-num--g { background: var(--lp-green); }
.lp__step-num--b { background: var(--lp-blue); }
.lp__step-num--p { background: var(--lp-purple); }
.lp__step-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.lp__step-card h3 {
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--lp-text-hd);
    padding: 0;
}
.lp__step-card p { font-size: 0.78rem; color: var(--lp-text-sub); line-height: 1.55; margin: 0; }

.lp__safety-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--lp-green-lt);
    border-radius: var(--lp-radius);
    padding: 14px 18px;
    margin-top: 18px;
}
.lp__safety-banner p { font-size: 0.82rem; color: var(--lp-green-dk); line-height: 1.6; margin: 0; }
.lp__safety-banner strong { font-weight: 700; }

/* ─── できること ─── */
.lp__feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.lp__feat-card {
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    padding: 22px 16px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
    text-align: center;
    transition: transform .18s, box-shadow .18s;
}
.lp__feat-card:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow-md); }
.lp__feat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.lp__feat-card h3 { font-size: 0.88rem; font-weight: 700; margin: 0 0 6px; color: var(--lp-text-hd); padding: 0; }
.lp__feat-card p  { font-size: 0.78rem; color: var(--lp-text-sub); line-height: 1.6; margin: 0; }

/* ─── 使い方 ─── */
.lp__howto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.lp__howto-card {
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    padding: 20px 16px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
}
.lp__howto-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lp-white);
    margin-bottom: 10px;
}
.lp__howto-icon { margin-bottom: 8px; }
.lp__howto-card h3 { font-size: 0.88rem; font-weight: 700; margin: 0 0 4px; color: var(--lp-text-hd); padding: 0; }
.lp__howto-card p  { font-size: 0.78rem; color: var(--lp-text-sub); line-height: 1.55; margin: 0; }

/* ─── 家族グループ ─── */
.lp__max-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
}
.lp__max-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--lp-green);
    color: var(--lp-white);
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 76px;
    flex-shrink: 0;
}
.lp__max-num   { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--lp-white); }
.lp__max-label { font-size: 0.72rem; font-weight: 600; color: var(--lp-white); margin-top: 2px; }
.lp__max-desc-title { font-size: 0.95rem; font-weight: 700; color: var(--lp-text-hd); margin: 0 0 6px; }
.lp__max-desc-list { list-style: none; padding: 0; margin: 0; }
.lp__max-desc-list li {
    font-size: 0.82rem;
    color: var(--lp-text-sub);
    padding-left: 16px;
    position: relative;
    margin-bottom: 3px;
}
.lp__max-desc-list li::before { content: '✓'; position: absolute; left: 0; color: var(--lp-green); font-weight: 700; }

.lp__groups-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lp__group-card {
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    padding: 22px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
    border-top: 4px solid var(--lp-green);
}
.lp__group-card--blue   { border-top-color: var(--lp-blue); }
.lp__group-card--purple { border-top-color: var(--lp-purple); }
.lp__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.lp__group-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--lp-green-lt);
    color: var(--lp-green-dk);
}
.lp__group-badge--blue   { background: var(--lp-blue-lt);   color: var(--lp-blue-dk); }
.lp__group-badge--purple { background: var(--lp-purple-lt); color: var(--lp-purple-dk); }
.lp__group-members { display: flex; gap: 5px; }
.lp__avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--lp-green-lt);
    color: var(--lp-green-dk);
}
.lp__avatar-icon--blue   { background: var(--lp-blue-lt);   color: var(--lp-blue-dk); }
.lp__avatar-icon--purple { background: var(--lp-purple-lt); color: var(--lp-purple-dk); }
.lp__group-card h3 { font-size: 1rem; font-weight: 700; color: var(--lp-text-hd); margin: 0 0 8px; padding: 0; }
.lp__group-desc    { font-size: 0.82rem; color: var(--lp-text-sub); line-height: 1.7; margin-bottom: 12px; }
.lp__group-tags    { display: flex; flex-wrap: wrap; gap: 6px; }
.lp__gtag          { background: #F3F4F6; border-radius: 8px; padding: 3px 9px; font-size: 0.72rem; color: var(--lp-text-sub); }
.lp__gtag--blue    { background: var(--lp-blue-lt);   color: var(--lp-blue-dk); }
.lp__gtag--purple  { background: var(--lp-purple-lt); color: var(--lp-purple-dk); }

/* ─── 安心ポイント ─── */
.lp__trust-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lp__trust-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--lp-bg);
    border-radius: var(--lp-radius);
    padding: 20px;
    border: 1px solid var(--lp-border);
}
.lp__trust-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp__trust-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--lp-text-hd); margin: 0 0 6px; padding: 0; }
.lp__trust-card p  { font-size: 0.82rem; color: var(--lp-text-sub); line-height: 1.65; margin: 0; }

/* ─── Final CTA ─── */
.lp__final-cta { background: linear-gradient(140deg, #50B886, #5B9BD5); padding-block: 56px; }
.lp__final-inner { text-align: center; }
.lp__final-cta h2 {
    color: var(--lp-white);
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
    padding: 0;
}
.lp__final-cta p { color: rgba(255,255,255,.9); font-size: 0.95rem; margin-bottom: 24px; line-height: 1.6; }
.lp__final-btn {
    background: var(--lp-white);
    color: var(--lp-green-dk);
    border: none;
    padding: 15px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    transition: transform .18s, box-shadow .18s;
    font-family: inherit;
}
.lp__final-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.lp__final-note { color: rgba(255,255,255,.75); font-size: 0.76rem; margin: 16px 0 0; }

/* ─── フッター ─── */
.lp__footer {
    background: #1A2135;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
    flex-wrap: wrap;
}
.lp__footer-brand {
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.lp__footer a { font-size: 0.78rem; color: rgba(255,255,255,.55); text-decoration: none; }
.lp__footer a:hover { color: rgba(255,255,255,.8); }

/* ─── レスポンシブ ─── */
@media (min-width: 560px) {
    .lp__trust-grid { grid-template-columns: repeat(3, 1fr); }
    .lp__trust-card { flex-direction: column; gap: 12px; }
    .lp__groups-grid { grid-template-columns: repeat(3, 1fr); }
    .lp__plans-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .lp__hero-layout { flex-direction: row; align-items: center; gap: 24px; padding-bottom: 8px; }
    .lp__hero-body   { flex: 1 1 54%; }
    .lp__hero-visual { flex: 1 1 46%; }
    .lp__cta-group   { padding-bottom: 0; }
    .lp__steps       { grid-template-columns: repeat(4, 1fr); }
    .lp__feat-grid   { grid-template-columns: repeat(4, 1fr); }
    .lp__howto-grid  { grid-template-columns: repeat(4, 1fr); }
    .lp__sec         { padding-block: 64px; }
}

/* 静的LPではCTAを<button>ではなく<a>で実装するための調整 */
a.lp__nav-cta, a.lp__cta-btn, a.lp__final-btn { text-decoration: none; display: inline-block; }