@charset "utf-8";

.main-head {
    background: #f2e6d6;
}

.main-head h1 {
    text-shadow: 1px 1px 10px #fff,-1px 1px 10px #fff,1px -1px 10px #fff,-1px -1px 10px #fff;
    color: #eb6100;
}

.box {
    padding: 120px 0;
}

.box .box-wrap {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: left;
}

.box .tit {
    width: 510px;
    height: 270px;
    position: relative;
}

.box .img-tit {
    width: 190px;
    position: relative;
    left: -10px;
    z-index: 2;
}

.box .tit::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.box-under .tit::after {
    background: url("../img/day/bg_under.png") no-repeat center;
    background-size: 100% auto;
    width: 322px;
    aspect-ratio: 358 / 317;
    height: auto;
}

.box-over .tit::after {
    background: url("../img/day/bg_over.png") no-repeat center;
    background-size: 100% auto;
    width: 322px;
    aspect-ratio: 394 / 297;
    height: auto;
}

.box .img-timeline {
    width: 510px;
}

.box .list {
    width: 410px;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 45px;
    position: absolute;
    bottom: 0;
    right: 15px;
}

.box .list .img {
    width: 100%;
    object-fit: cover;
    border-radius: 40px;
    overflow: hidden;
}

/******************************************************/

.img-tit.obj.active { animation: fadeImgtit 1.2s 0.6s ease-in-out forwards; }

@keyframes fadeImgtit {
    from { 
        opacity: 0;
        translate: 80% -50%;
        transform: rotate(50deg);
    }
    to { 
        opacity: 1;
        translate: 0;
        transform: rotate(0);
    }
}

/******************************************************/

@media screen and (max-width: 900px) {
    
    .box {
        padding: 10% 5% 8%;
    }
    
    .box-over {
        padding: 8% 5% 12%;
    }
    .box .box-wrap {
        width: 100%;
    }

    .box .tit {
        width: 100%;
        height: auto;
        position: relative;
        margin-bottom: 4vw;
    }

    .box .img-tit {
        width: 40%;
        left: 2%;
    }
    
    .box .tit::after {
        width: 60%;
        top:0;
    }
    
    .box .img-timeline {
        width: 100%;
        margin-bottom: 12vw;
    }
    
    .box .list {
        width: 100%;
        gap: 4vw;
        position: relative;
        right: 0;
    }

    .box .list .img {
        border-radius: 20px;
    }
    
    @keyframes fadeImgtit {
        from { 
            opacity: 0;
            translate: -80% -50%;
            transform: rotate(-50deg);
        }
        to { 
            opacity: 1;
            translate: 0;
            transform: rotate(0);
        }
    }
    
}