@charset "utf-8";

.main-head {
    background: #f7eede;
}

.main-head h1 {
    width: 50%;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
    left: 48%;
}

.box-about {
    padding: 110px 0 120px;
}

.box-about-01,
.box-about-02 {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 180%;
}

.box-about-01 {
    padding-left: 320px;
}

.box-about-01 .tit {
    width: 180px;
    display: block;
    position: absolute;
    left: 0;
    top: -20px;
}

.box-about-01 .img-timeline {
    max-width: 690px;
    width: 100%;
    margin-bottom: 45px;
}

.box-about-02,
.box-about-01 .list-about {
    margin-bottom: 75px;
}

.box-about-02 {
    display: flex;
    flex-direction:row-reverse;
    align-items: flex-start;
}

.list-about {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0 20px;
}

.box-about-01 .list-about {
    max-width: 690px;
    width: 100%;
    letter-spacing: 2px;
}

.box-about-02 .list-about {
    max-width: 420px;
    width: 100%;
}

.box-about-02 .img {
    position: absolute;
    left: 0;
    top: 0;
}

.list-about dt {
     text-align-last: justify;
}

.list-about dd {
    letter-spacing: 4px;
}


.box-map {
    position: relative;
    max-width: 980px;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    margin: 0 auto;
}

.box-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.box-about-01 .tit.obj.active { animation: fadeTit 1.6s 0.3s ease-in-out forwards; }

@keyframes fadeTit {
    0% { 
        opacity: 0;
        translate: -30% -30%;
        transform: rotate(-30deg);
    }
    60% { 
        translate: 10% 10%;
        transform: rotate(10deg);
    }    
    100% { 
        opacity: 1;
        translate: 0;
        transform: rotate(0);
    }
}


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

@media screen and (max-width: 900px) {

    .main-head h1 {
        width: 100%;
        left: -2%;
        text-align: right;
    }
    
    .main-head .img-head {
        object-position: 70%;
    }
    
    .box {
        padding: 8% 5%;
    }
    
    .box-about-01,
    .box-about-02 {
        font-size: 4vw;
    }
    
    .box-about-01 {
        padding-left: 0;
    }
    .box-about-01 .tit {
        width: 100%;
        display: block;
        position: relative;
        top: 0;
        text-align: center;
        margin-bottom: 8%;
    }
    .box-about-01 .tit .img-tit {
        width: 32%;
        margin: 0 auto;
    }

    .box-about-02 {
        display: block;
    }
    
    .list-about {
        grid-template-columns: 25% 1fr;
        gap: 0 5%;
    }
    
    .box-about-02 .list-about,
    .box-about-01 .img-timeline,
    .box-about-01 .list-about {
        width: 100%;
        max-width: 100%;
    }
    
    .box-about-02 {
        margin-bottom: 12%;
    }
    
    .box-about-01 .img-timeline,
    .box-about-01 .list-about {
        margin-bottom: 8%;
    }
    
    .box-about-02 .img {
        width: 100%;
        position: relative;
        margin-bottom: 8%;
    }
    
    .box-map {
        aspect-ratio: 7 / 6;
    }
    
    .list-about dd {
    letter-spacing: 0.1vw;
}
    
}