@charset "UTF-8";
/*
 * history.css - 次の灯 HP 沿革ページ
 * Version: 1.0
 *
 * Claude Design handoff (2026-04-22) のタイムライン演出を、
 * プロジェクトのデザインシステム (common_v4.0.css) と統合。
 *
 * 統合方針:
 * - Hero/Breadcrumb/CTA/Footer → プロジェクト共通クラス (ewrd-sub-hero / ewrd-breadcrumb / ewrd-cta) を使用
 * - フォント → --font-japanese / --font-serif / --font-english を参照
 * - コンテナ幅 → .ewrd-container (max 1120px / padding 40px) を使用
 * - カテゴリ色 → プロジェクト変数 --accent-red / --primary-color / --secondary-color を参照
 *               (Reach の黄色のみローカル定義)
 *
 * ローカル固有要素 (.ewrd-history- namespace):
 * - period bar / legend / timeline spine / event reveal / pulse animation
 * - 全セレクタは body.ewrd-page-history 配下に namespace
 */

/* ===================================
   ローカルCSS変数（デザインファイルの4色カテゴリを共通変数へマッピング）
=================================== */
body {
    /* 4カテゴリの色は通常プロジェクト変数を参照 / 黄色のみローカル */
    --h-red:    var(--accent-red, #D61518);        /* Milestone */
    --h-green:  var(--primary-color, #1B5E20);     /* Expansion */
    --h-yellow: #E9CC3A;                           /* Reach (ローカル) */
    --h-navy:   var(--secondary-color, #1A2B48);   /* Organization */

    --h-muted:   rgba(26, 43, 72, 0.60);
    --h-muted-2: rgba(26, 43, 72, 0.38);
    --h-rule:    rgba(26, 43, 72, 0.10);
    --h-rule-2:  rgba(26, 43, 72, 0.18);
    --h-paper:   var(--white, #fff);
}

/* ===================================
   Hero 内の追加要素（リード文）
=================================== */
 .ewrd-sub-hero .ewrd-history-hero-lede {
    max-width: 640px;
    font-size: var(--fs-body);
    line-height: 2;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 28px;
    letter-spacing: 0.04em;
}

/* Hero内 breadcrumb はヘッディングとリード文の下 (ESG top 準拠) */
 .ewrd-sub-hero .ewrd-breadcrumb {
    margin-top: 32px;
}

/* ===================================
   Period Bar（期間と件数）
   Hero 直下・白背景セクション
=================================== */
 .ewrd-history-period-bar {
    background: var(--white);
    border-bottom: 1px solid var(--h-rule);
}

 .ewrd-history-period {
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-english);
    font-size: var(--fs-caption);
    color: var(--h-muted);
    letter-spacing: 0.04em;
}

 .ewrd-history-period b {
    color: var(--secondary-color);
    font-weight: 500;
    letter-spacing: 0.06em;
}

 .ewrd-history-period i {
    font-style: normal;
    width: 16px;
    height: 1px;
    background: var(--h-rule-2);
    display: inline-block;
    margin: 0 4px;
}


/* ===================================
   Legend（凡例）
=================================== */
 .ewrd-history-legend-wrap {
    background: var(--white);
    border-bottom: 1px solid var(--h-rule);
}

 .ewrd-history-legend {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: var(--fs-caption);
    color: var(--h-muted);
}

 .ewrd-history-legend .item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

 .ewrd-history-legend .d {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

 .ewrd-history-legend .d.red    { background: var(--h-red); }
 .ewrd-history-legend .d.green  { background: var(--h-green); }
 .ewrd-history-legend .d.yellow { background: var(--h-yellow); }
 .ewrd-history-legend .d.navy   { background: var(--h-navy); }

 .ewrd-history-legend .lbl {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

 .ewrd-history-legend .lbl .jp {
    font-family: var(--font-japanese);
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary-color);
    letter-spacing: 0.04em;
}

 .ewrd-history-legend .lbl .en {
    font-family: var(--font-english);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--h-muted-2);
    text-transform: uppercase;
}

/* ===================================
   Timeline Section（タイムライン本体）
   — 余白を計算し尽くし、視線が途切れないタイトな構成
=================================== */
 .ewrd-history-timeline-section {
    padding: 56px 0 var(--section-py-sm);
    background: var(--white);
}

 .ewrd-history-timeline {
    position: relative;
}

/* 縦ライン（spine） */
 .ewrd-history-spine {
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--h-rule-2);
    transform: translateX(0.5px);
}

 .ewrd-history-spine .fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fill, 0%);
    background: linear-gradient(to bottom, var(--h-green), var(--h-yellow) 60%, var(--h-red));
    transition: height 0.3s linear;
}

/* チャプター（年グループ）— 年号上下の余白を最小化 */
 .ewrd-history-chapter {
    position: relative;
    padding: 32px 0 0;
}

 .ewrd-history-chapter:first-of-type {
    padding-top: 0;
}

 .ewrd-history-chapter > header {
    position: sticky;
    top: 20px;
    z-index: 5;
    margin-bottom: 4px;
    pointer-events: none;
}

/* 年号マーカー: ネイビー背景の極小チップ — spine に重ねて配置 */
 .ewrd-history-year-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 14px 7px 14px;
    background: var(--secondary-color);
    pointer-events: auto;
    font-family: var(--font-english);
    margin-left: -4px;
    box-shadow: 0 6px 24px -10px rgba(26, 43, 72, 0.32);
    position: relative;
    isolation: isolate;
    /* chapter enterアニメーション — 左からスライド入 */
    transform: translateX(-16px);
    opacity: 0;
    transition:
        transform 0.7s cubic-bezier(0.22, 0.8, 0.22, 1),
        opacity 0.7s cubic-bezier(0.22, 0.8, 0.22, 1);
}

 .ewrd-history-year-pill.in {
    transform: none;
    opacity: 1;
}

 .ewrd-history-year-pill .y {
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    letter-spacing: 0.08em;
    line-height: 1;
}

/* 年号チップ右の細い装飾ライン（spine から続く印象） */
 .ewrd-history-year-pill::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: 32px;
    height: 1px;
    background: var(--h-rule-2);
    transform: translateY(-0.5px);
    z-index: -1;
}

@media (min-width: 768px) {
     .ewrd-history-year-pill {
        padding: 8px 18px;
    }
     .ewrd-history-year-pill .y {
        font-size: 18px;
    }
     .ewrd-history-year-pill::after {
        width: 48px;
    }
}

/* ===================================
   Event（各出来事）— ミニマル / テキストのみ
   3段階視線誘導:
     [0ms]   DATE + CATEGORY (視線入口) — 左から14pxスライド
     [160ms] TITLE            (本文)    — 下から8pxふわっと
     [320ms] NODE pulse       (定着)    — 色が決まり波紋発火
=================================== */
 .ewrd-history-event {
    position: relative;
    padding: 20px 0 20px 40px;
}

 .ewrd-history-event + .ewrd-history-event {
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px dashed var(--h-rule);
}

/* Stage 1: DATE + CATEGORY — 0ms */
 .ewrd-history-event-date {
    opacity: 0;
    transform: translateX(-14px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 0.8, 0.22, 1),
        transform 0.55s cubic-bezier(0.22, 0.8, 0.22, 1);
}

 .ewrd-history-event.in .ewrd-history-event-date {
    opacity: 1;
    transform: none;
}

/* Stage 2: TITLE — 160ms */
 .ewrd-history-event-title {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 0.8, 0.22, 1) 0.16s,
        transform 0.65s cubic-bezier(0.22, 0.8, 0.22, 1) 0.16s;
}

 .ewrd-history-event.in .ewrd-history-event-title {
    opacity: 1;
    transform: none;
}

/* ===================================
   Stage 3: ノード — 320ms
   色が決まり、波紋パルス発火
=================================== */
 .ewrd-history-event-node {
    position: absolute;
    left: 0;
    top: 28px;
    width: 9px;
    height: 9px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

 .ewrd-history-event-node::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--white);
    border: 1.5px solid rgba(26, 43, 72, 0.4);
    transform: scale(0.55);
    transition:
        transform 0.55s cubic-bezier(0.22, 0.8, 0.22, 1) 0.32s,
        background-color 0.4s ease 0.32s,
        border-color 0.4s ease 0.32s;
}

 .ewrd-history-event.in .ewrd-history-event-node::before {
    transform: scale(1);
    background: var(--h-red);
    border-color: var(--h-red);
}

 .ewrd-history-event.in .ewrd-history-event-node.green::before {
    background: var(--h-green);
    border-color: var(--h-green);
}

 .ewrd-history-event.in .ewrd-history-event-node.yellow::before {
    background: var(--h-yellow);
    border-color: var(--h-yellow);
}

 .ewrd-history-event.in .ewrd-history-event-node.navy::before {
    background: var(--h-navy);
    border-color: var(--h-navy);
}

/* パルスエフェクト（出現時の波紋） */
 .ewrd-history-event-node::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color 0.7s ease;
}

 .ewrd-history-event.in .ewrd-history-event-node::after {
    border-color: rgba(214, 21, 24, 0.22);
    animation: ewrd-history-pulse 2.4s ease-out 0.45s both;
}

 .ewrd-history-event.in .ewrd-history-event-node.green::after {
    border-color: rgba(27, 94, 32, 0.22);
    animation: ewrd-history-pulse 2.4s ease-out 0.45s both;
}

 .ewrd-history-event.in .ewrd-history-event-node.yellow::after {
    border-color: rgba(233, 204, 58, 0.48);
    animation: ewrd-history-pulse 2.4s ease-out 0.45s both;
}

 .ewrd-history-event.in .ewrd-history-event-node.navy::after {
    border-color: rgba(26, 43, 72, 0.24);
    animation: ewrd-history-pulse 2.4s ease-out 0.45s both;
}

@keyframes ewrd-history-pulse {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* イベント日付 + カテゴリ */
 .ewrd-history-event-date {
    font-family: var(--font-english);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--h-muted);
    font-weight: 400;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

 .ewrd-history-event-date strong {
    color: var(--secondary-color);
    font-weight: 600;
}

 .ewrd-history-event-date time {
    display: inline-flex;
}

 .ewrd-history-event-date .cat {
    font-family: var(--font-english);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    font-weight: 500;
    text-transform: uppercase;
}

 .ewrd-history-event-date .cat.red    { color: var(--h-red); }
 .ewrd-history-event-date .cat.green  { color: var(--h-green); }
 .ewrd-history-event-date .cat.yellow { color: #9B8100; }
 .ewrd-history-event-date .cat.navy   { color: var(--h-navy); }

/* イベントタイトル */
 .ewrd-history-event-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.1875rem); /* 16px - 19px */
    line-height: 1.75;
    color: var(--secondary-color);
    letter-spacing: 0.04em;
    text-wrap: pretty;
    margin: 0;
}

 .ewrd-history-event-title strong {
    font-weight: 700;
}

 .ewrd-history-event-title .hl-red {
    color: var(--h-red);
    font-weight: 700;
}

 .ewrd-history-event-title .hl-navy {
    color: var(--secondary-color);
    font-weight: 700;
}

/* モーション低減設定 */
@media (prefers-reduced-motion: reduce) {
     .ewrd-history-year-pill,
     .ewrd-history-event-date,
     .ewrd-history-event-title {
        transition: none;
        opacity: 1;
        transform: none;
    }
     .ewrd-history-event-node::before {
        transition: none;
        transform: scale(1);
    }
     .ewrd-history-event.in .ewrd-history-event-node::after {
        animation: none;
    }
}

/* 印刷 */
@media print {
     .ewrd-history-spine,
     .ewrd-history-event-node {
        display: none;
    }
     .ewrd-history-event {
        padding-left: 0;
        border-top: 1px solid #ccc;
    }
     .ewrd-history-event-date,
     .ewrd-history-event-title {
        opacity: 1;
        transform: none;
    }
}