/* ==========================================
   選考フローページ専用スタイル
   ========================================== */

/* 既存の変数を参照しつつ、ローカル変数を定義 */
:root {
    --flow-blue: #186EA9;
    /* TOSCOメインブルー */
    --flow-light-blue: #eaf4fd;
    /* 背景用薄い青 */
    --flow-gray: #f8f9fa;
    /* 背景用グレー */
    --flow-text: #333;
}

/* --- セクション全体 --- */
.flow-section {
    padding: 6rem 0 8rem;
    background: #f0f4f8;
    position: relative;
    overflow: hidden;
}

/* 導入テキスト */
.flow-intro {
    text-align: center;
    margin-bottom: 5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.flow-intro-text {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 2;
    color: #666;
}

/* --- タイムライン構造 --- */
.flow-timeline {
    max-width: 1050px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 2rem;
}

/* 各ステップのラッパー */
.flow-item {
    display: flex;
    margin-bottom: 0;
    /* 下の要素とくっつける（線をつなぐため） */
    position: relative;
}

/* 左側：マーカーエリア（数字・線・ドット） */
.flow-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    /* 固定幅 */
    flex-shrink: 0;
    position: relative;
    padding-top: 1rem;
}

/* 数字 */
.flow-number {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: #e0e6ed;
    /* 薄いグレー */
    text-shadow: 2px 2px 0 #fff;
    /* 線と被った時のために白フチ */
    z-index: 2;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.flow-item:hover .flow-number {
    color: var(--flow-blue);
    /* ホバーで青く */
}

/* 中央のドット */
.flow-dot {
    width: 16px;
    height: 16px;
    background: #fff;
    border: 3px solid var(--flow-blue);
    border-radius: 50%;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.flow-item:hover .flow-dot {
    background: var(--flow-blue);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(24, 110, 169, 0.2);
}

/* 最後のステップのドット（チェックマーク風など強調） */
.flow-dot.icon-check {
    width: 24px;
    height: 24px;
    background: var(--flow-blue);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--flow-blue);
}

/* 縦線 */
.flow-line {
    flex: 1;
    /* 下まで伸ばす */
    width: 2px;
    background: #e0e6ed;
    margin-top: 0;
    min-height: 150px;
    position: relative;
}

/* 最後のアイテムは線を消す */
.flow-item-last .flow-line {
    display: none;
}

/* 右側：コンテンツエリア */
.flow-content {
    flex: 1;
    padding-bottom: 4rem;
    padding-left: 2rem;
}

.flow-item-last .flow-content {
    padding-bottom: 0;
}

/* --- カードデザイン（Tech-Edgeスタイル） --- */
.flow-card {
    background: #fff;
    padding: 2.5rem 3rem;
    position: relative;
    /* テック感：左上と右下を少しカット */
    clip-path: polygon(20px 0,
            100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%,
            0 20px);
    /* clip-pathを使うとbox-shadowが消えるため、親要素やfilterで影をつける */
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.05));
    transition: transform 0.3s ease, filter 0.3s ease;
    border-left: 4px solid var(--flow-blue);
    /* 左にアクセントライン */
}

.flow-card:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 8px 25px rgba(24, 110, 169, 0.15));
}

/* 内定カード（ハイライト） */
.flow-card-highlight {
    border-left: 4px solid #FF6600;
}

/* ステップラベル (STEP 01) */
.flow-step-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--flow-blue);
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
    background: #eaf4fd;
    padding: 0.2rem 0.8rem;
    border-radius: 4px;
}

.flow-card-highlight .flow-step-label {
    color: #FF6600;
    background: #fff5eb;
}

/* タイトル */
.flow-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
    line-height: 1.4;
}

/* 本文 */
.flow-card-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 0;
}

.flow-card-text small {
    display: block;
    margin-top: 0.5rem;
    color: #888;
}

/* アクションボタン（エントリー用） */
.flow-action {
    margin-top: 2rem;
}
.annotation {
    font-size: 0.85rem;
    color: #666;
    display: block;
    margin: 5px 0 0;
}

/* --- 注意書きエリア --- */
.flow-note {
    max-width: 800px;
    margin: 5rem auto 0;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.flow-note-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flow-note-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
}

.flow-note-list li::before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--flow-blue);
}

.flow-note-list li:last-child {
    margin-bottom: 0;
}

/* ==========================================
   スマホ・タブレット対応
   ========================================== */

@media (max-width: 768px) {
    .flow-section {
        padding: 4rem 0 6rem;
    }

    /* タイムラインのレイアウト変更 */
    .flow-timeline {
        padding-left: 0;
    }

    .flow-item {
        /* スマホではマーカーとコンテンツを近づける */
    }

    /* マーカーエリアを縮小 */
    .flow-marker {
        width: 50px;
        /* 幅を狭く */
        align-items: center;
        padding-top: 2rem;
        /* カードの上辺と合わせる調整 */
    }

    .flow-number {
        /* スマホでは数字をマーカーエリアではなく、カード内に移動させるか、
           あるいは小さくして配置するか。ここでは小さくして配置 */
        font-size: 1.5rem;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 0;
        color: var(--flow-blue);
        opacity: 0.5;
    }

    .flow-dot {
        width: 12px;
        height: 12px;
        margin-top: 0.5rem;
    }

    .flow-line {
        width: 2px;
    }

    /* コンテンツエリア */
    .flow-content {
        padding-left: 1rem;
        /* マーカーとの距離を詰める */
        padding-bottom: 3rem;
    }

    /* カードスタイル調整 */
    .flow-card {
        padding: 1.5rem;
        /* スマホではクリップパスを少し控えめに */
        clip-path: polygon(10px 0,
                100% 0,
                100% calc(100% - 10px),
                calc(100% - 10px) 100%,
                0 100%,
                0 10px);
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
    }

    .flow-card-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .flow-step-label {
        font-size: 0.7rem;
    }

    .flow-intro {
        margin-bottom: 3rem;
    }
}

/* アニメーション（スクロールでふわっと表示）用 */
/* 必要に応じてJSで .is-visible クラスを付与する想定のスタイル */
.flow-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

/* 順番に表示させる遅延設定 */
.flow-item:nth-child(1) {
    animation-delay: 0.2s;
}

.flow-item:nth-child(2) {
    animation-delay: 0.4s;
}

.flow-item:nth-child(3) {
    animation-delay: 0.6s;
}

.flow-item:nth-child(4) {
    animation-delay: 0.8s;
}

.flow-item:nth-child(5) {
    animation-delay: 1.0s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}