/* ============================================================
   FundLab 共有スタイルシート（デザイン刷新 2026 v2）
   コンセプト: 明るい紙の上に鮮やかなデータビジュアル
   暖白×ネイビー×朱×金 / 明朝の大見出し / 細い罫線 / 円のモチーフ
   ============================================================ */

/* ---------- 1. 設計トークン ---------- */
:root {
    /* 基調色（明るい紙） */
    --paper: #FAF8F3;          /* 背景: 明るい暖白 */
    --paper-card: #FFFFFF;     /* カード背景: 白 */
    --ink: #1C2B4A;            /* 基本インク: 濃紺 */
    --ink-deep: #16223C;       /* 濃紺（フッターのみ） */
    --text: #3A4254;           /* 本文 */
    --text-muted: #69707F;     /* 補足テキスト */
    --line: #E8E3D7;           /* 罫線 */
    --line-strong: #D4CDBA;    /* 強調罫線 */

    /* アクセント（イメージボードの鮮やかさ） */
    --terra: #C44536;          /* 朱（テキスト用主アクセント） */
    --vermilion: #E04E1F;      /* 朱橙（図版用・イメージボードの扇形の色） */
    --gold: #D49A2E;           /* 金（図版ハイライト） */

    /* ツール別アクセント（明るい紙の上で映える、はっきりした彩度） */
    --tool-asset: #2F8551;        /* 緑 */
    --tool-backtest: #1E56B0;     /* 青 */
    --tool-optimize: #C03A28;     /* 朱 */
    --tool-montecarlo: #D9731A;   /* 橙 */
    --tool-correlation: #1F8694;  /* ティール */
    --tool-ranking: #B4831B;      /* 金茶 */
    --tool-market: #2F6890;       /* 鋼青 */
    --tool-withdrawal: #6B4C93;   /* 深紫 */

    /* タイポグラフィ */
    --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-label: 'Space Grotesk', 'Noto Sans JP', sans-serif;

    /* 形状 */
    --radius: 10px;
    --shadow-card: 0 1px 4px rgba(28, 43, 74, 0.07);
    --shadow-hover: 0 8px 22px rgba(28, 43, 74, 0.12);
}

/* ---------- 2. ベース ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-home {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* 旧デザインの装飾（浮遊円・グリッド背景）は非表示 */
.bg-shapes,
.page-home .grid-pattern {
    display: none;
}

/* ---------- 3. ヘッダー ---------- */
.page-home header {
    position: relative;
    z-index: 10;
    padding: 1.4rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.page-home .logo {
    font-family: var(--font-label);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    display: flex;
    align-items: center;
    gap: 0.05em;
    color: var(--ink);
}

.logo .fund { color: var(--ink); }
.logo .lab { color: var(--ink); }
.page-home .logo .lab::after {
    content: '.';
    color: var(--terra);
}

.page-home nav {
    display: flex;
    gap: 1.4rem;
}

.page-home nav a {
    text-decoration: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.25s ease;
    position: relative;
    padding-bottom: 3px;
}

.page-home nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--terra);
    transition: width 0.25s ease;
}

.page-home nav a:hover {
    color: var(--terra);
}

.page-home nav a:hover::after {
    width: 100%;
}

/* ---------- 4. ヒーロー（テキスト＋円のデータビジュアル） ---------- */
.page-home .hero {
    position: relative;
    z-index: 5;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3.5rem;
    text-align: left;
    padding: 3.5rem 2rem 2rem;
}

.page-home .hero-copy {
    flex: 1.15;
    min-width: 0;
}

.page-home .hero-copy::before {
    content: 'FUND ANALYSIS & SIMULATION';
    display: block;
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--terra);
    margin-bottom: 1.4rem;
}

.page-home .hero h1 {
    font-family: var(--font-serif);
    font-size: 3.1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.6rem;
    letter-spacing: 0.02em;
    line-height: 1.35;
    animation: fadeInUp 0.8s ease-out;
}

.page-home .hero h1 span {
    color: var(--terra);
    white-space: nowrap;
}

.page-home .hero p {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    color: var(--text-muted);
    font-weight: 400;
    max-width: 640px;
    margin: 0;
    line-height: 2.0;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.page-home .hero-art {
    flex: 0.9;
    max-width: 440px;
    animation: fadeInUp 0.9s ease-out 0.15s both;
}

.page-home .hero-art svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- 5. セクション見出し ---------- */
.page-home .tools-heading {
    position: relative;
    z-index: 5;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.2rem 2rem 0;
    text-align: left;
}

.page-home .tools-heading h2 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}

/* ---------- 6. ツールカード ---------- */
.page-home .features {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    padding: 2rem 2rem 4.5rem;
    max-width: 1140px;
    margin: 0 auto;
}

.page-home .feature-card {
    background: var(--paper-card);
    border-radius: var(--radius);
    padding: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.7s ease-out both;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }
.feature-card:nth-child(5) { animation-delay: 0.5s; }
.feature-card:nth-child(6) { animation-delay: 0.6s; }
.feature-card:nth-child(7) { animation-delay: 0.7s; }

.page-home .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--line-strong);
}

/* ヘッダー: ツール色の淡い色地（紙）の上に、ツール色の鮮やかな図版 */
.page-home .card-header {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.header-asset       { color: var(--tool-asset);       background: color-mix(in srgb, var(--tool-asset) 12%, #FFFDF8); }
.header-backtest    { color: var(--tool-backtest);    background: color-mix(in srgb, var(--tool-backtest) 12%, #FFFDF8); }
.header-optimize    { color: var(--tool-optimize);    background: color-mix(in srgb, var(--tool-optimize) 12%, #FFFDF8); }
.header-montecarlo  { color: var(--tool-montecarlo);  background: color-mix(in srgb, var(--tool-montecarlo) 13%, #FFFDF8); }
.header-correlation { color: var(--tool-correlation); background: color-mix(in srgb, var(--tool-correlation) 12%, #FFFDF8); }
.header-ranking     { color: var(--tool-ranking);     background: color-mix(in srgb, var(--tool-ranking) 13%, #FFFDF8); }
.header-market      { color: var(--tool-market);      background: color-mix(in srgb, var(--tool-market) 12%, #FFFDF8); }
.header-withdrawal  { color: var(--tool-withdrawal);  background: color-mix(in srgb, var(--tool-withdrawal) 12%, #FFFDF8); }

.page-home .card-header svg {
    width: 124px;
    height: 106px;
}

.page-home .card-content {
    padding: 1.6rem 1.7rem 1.7rem;
}

.page-home .card-tag {
    display: inline-block;
    font-family: var(--font-label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
}

.feature-card:nth-child(1) .card-tag { color: var(--tool-asset); }
.feature-card:nth-child(2) .card-tag { color: var(--tool-backtest); }
.feature-card:nth-child(3) .card-tag { color: var(--tool-optimize); }
.feature-card:nth-child(4) .card-tag { color: var(--tool-montecarlo); }
.feature-card:nth-child(5) .card-tag { color: var(--tool-correlation); }
.feature-card:nth-child(6) .card-tag { color: var(--tool-ranking); }
.feature-card:nth-child(7) .card-tag { color: var(--tool-market); }

.page-home .feature-card h3 {
    font-family: var(--font-serif);
    font-size: 1.22rem;
    font-weight: 600;
    margin-bottom: 0.7rem;
    color: var(--ink);
}

.page-home .feature-card p {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.8;
    font-weight: 400;
    margin-bottom: 1.3rem;
}

.page-home .card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.3s ease;
    color: var(--ink);
}

.feature-card:nth-child(1) .card-cta { color: var(--tool-asset); }
.feature-card:nth-child(2) .card-cta { color: var(--tool-backtest); }
.feature-card:nth-child(3) .card-cta { color: var(--tool-optimize); }
.feature-card:nth-child(4) .card-cta { color: var(--tool-montecarlo); }
.feature-card:nth-child(5) .card-cta { color: var(--tool-correlation); }
.feature-card:nth-child(6) .card-cta { color: var(--tool-ranking); }
.feature-card:nth-child(7) .card-cta { color: var(--tool-market); }

.page-home .card-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.page-home .feature-card:hover .card-cta svg {
    transform: translateX(5px);
}

/* ---------- 7. 新着記事 ---------- */
.page-home .articles-section {
    position: relative;
    z-index: 5;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem 4.5rem;
}

.page-home .articles-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--line);
}

.page-home .articles-head h2 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}

.page-home .articles-all-link {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--terra);
    text-decoration: none;
    font-weight: 500;
}

.page-home .articles-all-link:hover {
    text-decoration: underline;
}

.page-home .articles-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.page-home .article-mini-card {
    display: flex;
    flex-direction: column;
    background: var(--paper-card);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.page-home .article-mini-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--line-strong);
}

.article-bar { height: 4px; }
.bar-red  { background: var(--tool-optimize); }
.bar-gold { background: var(--tool-ranking); }
.bar-blue { background: var(--tool-backtest); }

.page-home .article-body {
    padding: 1.2rem 1.4rem;
    flex: 1;
}

.page-home .article-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.page-home .article-tag {
    font-family: var(--font-label);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 0.18rem 0.55rem;
    border-radius: 3px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.tag-red  { background: var(--tool-optimize); }
.tag-gold { background: var(--tool-ranking); }
.tag-blue { background: var(--tool-backtest); }

.page-home .article-date {
    font-family: var(--font-label);
    font-size: 0.74rem;
    color: var(--text-muted);
}

.page-home .article-title {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.6;
}

/* ---------- 8. フッター（濃紺セクション・サイトで唯一の暗部） ---------- */
.page-home footer {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--ink-deep);
    color: #9AA3B5;
    font-family: var(--font-sans);
    font-size: 0.82rem;
}

/* 免責文: 景表法の打ち消し表示対策として本文より目立つ明色を維持 */
.page-home .footer-disclaimer {
    font-size: 0.88rem;
    color: #E6E1D4;
    margin-bottom: 0.9rem;
    line-height: 1.9;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- 9. アニメーション ---------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 10. ハンバーガーメニュー ---------- */
.page-home .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    z-index: 100;
}

.page-home .hamburger span {
    width: 24px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.page-home .hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.page-home .hamburger.open span:nth-child(2) {
    opacity: 0;
}

.page-home .hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ---------- 11. レスポンシブ ---------- */
@media (max-width: 1100px) {
    .page-home .features {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }

    .page-home .hero-art {
        max-width: 320px;
    }
}

@media (max-width: 900px) {
    .page-home .hero {
        flex-direction: column;
        gap: 2rem;
    }

    .page-home .hero-art {
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .page-home header {
        padding: 1.2rem 1.5rem;
        flex-direction: row;
        justify-content: space-between;
    }

    .page-home .hamburger {
        display: flex;
    }

    .page-home nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(250, 248, 243, 0.98);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 99;
    }

    .page-home nav.open {
        display: flex;
    }

    .page-home nav a {
        font-size: 1.15rem;
    }

    .page-home .hero {
        padding: 2.5rem 1.5rem 1.5rem;
    }

    .page-home .hero h1 {
        font-size: 2.1rem;
    }

    .page-home .hero p {
        font-size: 0.92rem;
        line-height: 1.95;
    }

    .page-home .hero-art {
        max-width: 230px;
    }

    .page-home .tools-heading {
        padding: 0.8rem 1.5rem 0;
    }

    .page-home .tools-heading h2 {
        font-size: 1.05rem;
    }

    .page-home .features {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 1.2rem 1.25rem 2rem;
        max-width: 100%;
    }

    .page-home .feature-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        border-radius: var(--radius);
        min-height: 72px;
        animation: none;
        transform: none !important;
    }

    .page-home .card-header {
        width: 56px;
        min-width: 56px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid var(--line);
    }

    .card-header svg { display: none; }

    .header-asset::after       { content: '配分'; }
    .header-backtest::after    { content: '検証'; }
    .header-optimize::after    { content: '最適'; }
    .header-montecarlo::after  { content: '将来'; }
    .header-correlation::after { content: '相関'; }
    .header-ranking::after     { content: '順位'; }
    .header-market::after      { content: '指数'; }
    .header-withdrawal::after  { content: '取崩'; }

    .page-home .card-header::after {
        font-family: var(--font-serif);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        writing-mode: vertical-rl;
    }

    .page-home .card-content {
        padding: 0.875rem 0.75rem 0.875rem 1rem;
        flex: 1;
        min-width: 0;
    }

    .card-tag { display: none; }

    .page-home .feature-card h3 {
        font-size: 0.92rem;
        margin-bottom: 0.2rem;
        line-height: 1.3;
    }

    .page-home .feature-card p {
        font-size: 0.72rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }

    .card-cta { display: none; }

    .page-home .feature-card::after {
        content: '›';
        font-size: 1.4rem;
        color: var(--line-strong);
        display: flex;
        align-items: center;
        padding-right: 1rem;
        flex-shrink: 0;
        font-weight: 300;
    }

    .page-home .articles-section {
        padding: 0 1.5rem 3rem;
    }

    .page-home .articles-mini-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .page-home .logo {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .page-home .hero h1 {
        font-size: 1.75rem;
    }

    .page-home .hero p {
        font-size: 0.88rem;
    }

    .page-home .features {
        padding: 1rem 1rem 1.5rem;
    }
}