.hero{
    height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-content{
    position:relative;
    z-index:2;
}

#hero-title{
    font-size:60px;
    letter-spacing:3px;
    margin-bottom:20px;
}

.subtitle{
    font-size:25px;
    opacity:0.8;
}

.cta{
    display:inline-block;
    margin-top:40px;
    padding:15px 40px;
    border:1px solid #fff;
    text-decoration:none;
    color:#fff;
    transition:0.3s;
}

.cta:hover{
    background:#fff;
    color:#000;
}

/* セクション */
.info section{
    width: 100%;
    padding:80px 20px;
    text-align:center;
}

.info section.dark{
    background:#0a0a0a;
}

.info section h2{
    font-size:36px;
    margin-bottom:40px;
    letter-spacing:2px;
}

.abst {
    font-size:18px;
    width: 60%;
    margin:0 auto 40px auto;
    color: #e2e2e2;
}

/* カード */
.card{
    width: 35%;
    border:1px solid #333;
    padding:30px;
    margin:20px auto;
    transition:0.3s;
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card h3{
    font-size:24px;
    margin-bottom:10px;
    width: 80%;
}

.card p{
    width: 75%;
    margin:10px 0;
}

.card p, .card li{
    font-size:18px;
    color: rgb(202, 202, 202);
}

.card:hover{
    border-color:#fff;
}

/* タイムライン */
.timeline{
    width: 35%;
    margin:0 auto;
    border-left:2px solid #fff;
    padding-left:20px;
    text-align:left;
}

.item{
    margin-bottom:45px;
}

.item span{
    font-weight:bold;
    font-size:25px;
}

.item p{
    font-size:18px;
    margin:12px 0;
    color: #e2e2e2;
}

.item p.annotation{
    color: #ffa2a2;
}

@media screen and (max-width:1250px) {
    #hero-title {
        font-size: 6.5vmin;
    }
    .subtitle {
        font-size: 4vmin;
    }
    .card {
        width: 90%;
        padding: 15px 10px;
    }
    .card h3{
        font-size: 4.5vmin;
        width: 90%;
    }
    .card p{
        font-size:3.5vmin;
        width: 85%;
        margin:10px 0;
    }
    .info section h2{
        font-size: 5vmin;
    }
    .abst {
        width: 90%;
        font-size: 3.5vmin;
    }
    .timeline{
        width: 85%;
        padding: 15px 10px;
    }
    .item{
        margin-bottom:45px;
    }
    .item span{
        font-size: 4.5vmin;
    }
    .item p{
        font-size:3.5vmin;
        margin:12px 0;
    }
}