/* =========================================================
   Company History
========================================================= */

.company-history {
    color: #17324d;
}


/* =========================================================
   History Section
========================================================= */

.history-section {
    padding: 110px 0 120px;

    background: #ffffff;
}


/* =========================================
   Hero Text
========================================= */

.history-hero-inner {
    display: flex;
    align-items: center;
    gap: 70px;

}


.history-hero-text {
    flex: 1;
}




/* =========================================
   Hero Image
========================================= */

.history-hero-image {
    flex: 1;
}

.history-hero-image img {
    display: block;

    width: 100%;
    height: 360px;

    object-fit: cover;

    border-radius: 4px;
}

.history-hero-years {
    position: absolute;

    right: 0;
    bottom: -5px;

    color: rgba(37, 99, 235, 0.08);

    font-size: 6rem;
    font-weight: 700;

    letter-spacing: -0.04em;

    line-height: 1;

    pointer-events: none;
}



/* =========================================================
   Timeline
========================================================= */

.history-timeline {
    position: relative;

    max-width: 960px;

    margin: 0 auto;
}


/* 縦ライン */

.history-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 150px;

    width: 1px;

    background: #d5e0eb;

    z-index: 0;
}


/* =========================================================
   History Item
========================================================= */

.history-item {
    position: relative;

    display: grid;

    grid-template-columns: 150px 1fr;

    column-gap: 55px;

    padding: 0 0 65px;
}


/* 年 */

.history-year {
    position: relative;

    text-align: right;

    padding-right: 24px;
    box-sizing: border-box;

    z-index: 2;

}

.history-year span {
    display: inline-block;

    color: #2563eb;

    font-size: 1.65rem;
    font-weight: 700;

    line-height: 1.4;
}


/*    通常項目
   ○・横線は表示しない */

.history-year::after {
    display: none;
}




/* =========================================================
   大きな出来事
   ○を縦ラインの中央に配置
========================================================= */

.history-item-major .history-year::after {
    content: "";

    display: block;

    position: absolute;

    top: 10px;
    left: 150px;

    width: 15px;
    height: 15px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #ffffff;

    border: 3px solid #2563eb;

    box-sizing: border-box;

    z-index: 3;
}

/* =========================================
   大きな出来事の横線
========================================= */

.history-item-major::after {
    content: "";

    position: absolute;

    top: 17px;
    left: 150px;

    width: 55px;
    height: 1px;

    background: #b8cce0;

    z-index: 1;
}



/* =========================================================
   Content
========================================================= */

.history-content {
    padding-bottom: 5px;
}

.history-content h3 {
    margin: 0 0 18px;

    font-size: 1.3rem;
    line-height: 1.7;
    font-weight: 700;
}

.history-content p {
    margin: 0;

    color: #526477;

    font-size: 1.08rem;
    line-height: 1.95;
}


/* 英文が非表示状態でも余白を作らない */

.history-content p + p {
    margin-top: 12px;
}



/* =========================================
   Major Event
========================================= */

.history-item-major .history-year span {
    font-size: 1.8rem;
}

.history-item-major .history-content h3 {
    font-size: 1.45rem;
}

.history-tag {
    margin-bottom: 10px !important;

    color: #2563eb !important;

    font-size: 0.75rem !important;
    font-weight: 700;

    letter-spacing: 0.14em;
}





/* =========================================================
   Responsive
========================================================= */

@media (max-width: 768px) {

    /* History Years */

    .history-hero-years {
        right: 0;
        bottom: -2px;

        font-size: 3.2rem;
    }


    /* History Section */

    .history-section {
        padding: 80px 0 90px;
    }


    /* タイムラインをスマホ用に変更 */

    .history-timeline::before {
        left: 8px;
    }

    .history-item {
        display: block;

        padding-left: 35px;
        padding-bottom: 50px;
    }

    .history-item::after {
        display: none;
    }

    .history-year {
        margin-bottom: 12px;

        text-align: left;
    }

    .history-year span {
        font-size: 1.45rem;
    }

    .history-year::after {
        left: -32px;
        right: auto;

        top: 6px;
    }

    .history-item-major .history-year span {
        font-size: 1.6rem;
    }

    .history-item-major .history-year::after {
        left: -32px;
        right: auto;

        top: 4px;

        transform: none;
    }

    .history-item-major::after {
        display: none;
    }

    .history-content h3 {
        font-size: 1.2rem;
    }

    .history-content p {
        font-size: 1.05rem;
        line-height: 1.9;
    }

}