@charset "UTF-8";

.c-hdg--lv2 span{
    font-weight: 700;
    font-size: 30px;
    line-height: 150%;
    color: #003175;
}
h2.c-hdg--lv2 {
    margin-bottom: 41px;
}

h3.c-hdg--lv3 {
    font-weight: 700;
    font-size: 30px;
    line-height: 150%;
    color: #003175;
    margin-top: 60px;
    margin-bottom: 24px;
}
h3.c-hdg--lv3 span{
    padding-inline: 8px;
    background: #003175;
    color: #FFF;
    display: inline;
    font-size: 30px;
    font-weight: 700;
    line-height: 150%;
}

.p-fv__lead{
    color: #003175;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%;
    text-align: center;
}

.bg-white{
    background-color: #fff;
}

@media screen and (min-width: 748px){
    .c-hdg--lv2 span{
        font-size: 46px;
    }

    h3.c-hdg--lv3 {
        font-size: 46px;
        margin-top: 80px;
        margin-bottom: 24px;
    }
    h3.c-hdg--lv3 span{
        font-size: 46px;
    }

    .p-fv__lead{
        font-size: 20px;
    }

}


#key{
    background-color: #fff;
    padding-bottom: 155.9px;
}


/* c-keyvisi-area */
.c-keyvisi-area{
    position: relative;
    background-position: center center;
    background-size: cover;    
}

.c-keyvisi-area img{
    width: 100%;
}


@media screen and (min-width: 748px){
    #key {
        background-color: #fff;
        padding-bottom: 86px;
    }

    .c-keyvisi-area{
        position: relative;
        background-position: center center;
        background-size: cover;    
    }

    .c-keyvisi-area-text{
        margin: 0 auto;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin-left: 16.1805vw;
        line-height: 180%;
    }
    .c-keyvisi-area-text p:last-child{
        margin-top: 26px;
    }

    .c-keyvisi-area-img01{
        position: absolute;
        top: 4.083vw;
        left: 104px;
        width: 242px;
    }
    .c-keyvisi-area-img02{
        position: absolute;
        top: 66.8px;
        right: 0;
        width: 383px;
    }
    .c-keyvisi-area-img03{
        position: absolute;
        left: 5.625vw;
        bottom: 0.555vw;
        width: 320px;
    }
    .c-keyvisi-area-img04{
        position: absolute;
        right: 85.1px;
        bottom: 96x;
        width: 237px;
    }

}

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

    .c-keyvisi-area-text{
        margin: 0 auto;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        line-height: 170%;
    }
    .c-keyvisi-area-text p:last-child{
        margin-top: 16px;
    }

    .c-keyvisi-area-img01{
        position: absolute;
        top: 33px;
        right: 0;
        width: 172px;
    }
    .c-keyvisi-area-img02{
        position: absolute;
        bottom: -108px;
        right: -10px;
        width: 260px;
    }
    .c-keyvisi-area-img03{
        position: absolute;
        left: -25px;
        top: -2px;
        width: 168px;
    }
    .c-keyvisi-area-img04{
        position: absolute;
        left: -48px;
        bottom: 25px;
        width: 134px;
    }
}


/* c-keyvisi-area */

#point{
    background-color: #fff;
    padding-bottom: 60px;
}

.point-area-box {
    margin-top: 40px;
}
.point-area .point-area-box:first-child {
    margin-top: 0;
}

.point-area-text {
    width: 100%;
}

.point-area-text dl {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.point-area-box:first-child .point-area-text dl {
    margin-top: 0;
}
.point-area-text dt {
    color: #3F7CD8;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    line-height: 100%;
}
.point-area-text dt span{
    font-size: 41px;
    font-weight: 700;
    line-height: 100%;
}
.point-area-text dd {
    color: #003175;
    font-size: 26px;
    font-weight: 700;
    margin-top: 12px;
    line-height: 150%;
}
.point-area-text p {
    margin-top: 16px;
    color: #003175;
    font-size: 16px;
    line-height: 200%;
    font-weight: 400;
}

.point-area-img{
    margin-top: 16px;
}

.point-area .point-area-box:nth-child(even) .point-area-text{
    order: 2;
}
.point-area .point-area-box:nth-child(even) .point-area-img{
    order: 1;
}

@media screen and (min-width: 748px){
    #point{
        padding-bottom: 100px;
    }

    .point-area-box {
        display: flex;
        gap: 48px;
        margin-top: 80px;
    }

    .point-area-text dl {
        gap: 24px;
        margin-top: 0;
    }

    .point-area-text dt {
        font-size: 16px;
    }
    .point-area-text dt span{
        font-size: 50px;
    }
    .point-area-text dd {
        font-size: 34px;
    }

    .point-area-text p {
        margin-top: 24px;
    }

    .point-area-img{
        width: 47.72%;
        flex-shrink: 0;
        margin-top: 0;
    }
}


/* chronology */

#chronology{
    padding-bottom: 60px;
}

.chronology--area{
    position: relative;
    margin-top: 48px;
}
.chronology--area::after {
    position: absolute;
    top: -24px;
    height: calc(100% + 24px);
    border-left: 6px dashed;
    content: '';
    left: 68px;
    border-image: linear-gradient(to bottom, #003175 60%, #003175) 1;
    z-index: 1;
}

.chronology--area--box{
    display: flex;
    gap:8px;
    margin-bottom: 20px;
}
.chronology--area .chronology--area--box:last-child{
    margin-bottom: 0;
}

.chronology--area--box--year{
    color: rgb(0, 49, 117, 0.6);
    display: flex;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
    align-items: flex-start;
    position: relative;
    line-height: 100%;
    width: 104px;
    flex-shrink: 0;
}
.chronology--area--box--year::after {
    position: absolute;
    top: 15px;
    width: 20px;
    border-top: 3px dashed rgb(0, 49, 117, 0.6);;
    content: '';
    right: 0;
}
.chronology--area--box--year p{
    margin-top: 4px;
}
.chronology--area--box--year img{
    width: 16px;
    margin-top: 7.5px;
    z-index: 2;
}

.chronology--area--box--text{
    color: #333;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    width: 100%;
}
.chronology--area--box--texttitle{
    color: #003175;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 16px;
    margin-top: 6px;
}

.chronology--area--box--year.type01{
    color: #003175;
    width: 104px;
    gap: 4px;
    position: relative;
}
.chronology--area--box--year.type01::after {
    top: 30px;
    right: -44px;
}
.chronology--area--box--year.type01 p{
    margin-top: 20px;
}
.chronology--area--box--year.type01 img{
    width: 60px;
    margin-top: 0;
}

.chronology--area--box--year.type01 img.chronology--area--box--year-img03{
    position: absolute;
    width: 12px;
    right: -27px;
    top: -6px;
}
.chronology--area--box--year.type01 img.chronology--area--box--year-img04{
    position: absolute;
    width: 13.5px;
    right: -27px;
    top: 56px;
}
.chronology--area--box--year.type01 img.chronology--area--box--year-img05{
    position: absolute;
    width: 8.4px;
    right: 6px;
    top: 80px;
}

.type01 .chronology--area--box--texttitle{
    font-size: 20px;
    padding-left: 46px;
}


@media screen and (min-width: 748px){
    #chronology{
        padding-bottom: 80px;
    }

    .chronology--area{
        position: relative;
        margin-top: 94px;
    }

    .chronology--area::after {
        position: absolute;
        top: -24px;
        height: calc(100% + 24px);
        border-left: 6px dashed;
        content: '';
        left: 156px;
        border-image: linear-gradient(to bottom, #003175 60%, #003175) 1;
        z-index: 1;
    }

    .chronology--area--box{
        display: flex;
        gap:28px;
        margin-bottom: 60px;
    }

    .chronology--area--box--year{
        color: rgb(0, 49, 117, 0.6);
        display: flex;
        gap: 52px;
        font-size: 40px;
        font-weight: 700;
        align-items: flex-start;
        padding-right: 131px;
        position: relative;
        line-height: 100%;
        width: 292px;
        flex-shrink: 0;
    }
    .chronology--area--box--year::after {
        position: absolute;
        top: 25px;
        width: 99px;
        border-top: 3px dashed rgb(0, 49, 117, 0.6);;
        content: '';
        right: 0;
    }

    .chronology--area--box--year img {
        width: 30px;
        margin-right: 16px;
        margin-top: 10.5px;
        z-index: 2;
    }

    .chronology--area--box--texttitle{
        color: #003175;
        font-weight: 700;
        font-size: 20px;
        line-height: 150%;
        margin-bottom: 16px;
        margin-top: 8px;
    }

    .chronology--area--box--year.type01{
        color: #003175;
        width: 327px;
        gap: 13px;
    }
    .chronology--area--box--year.type01::after {
        top: 52px;
        right: 0;
    }
    .chronology--area--box--year.type01 p{
        margin-top: 32px;
    }
    .chronology--area--box--year.type01 img{
        width: 105px;
        margin-right: 16px;
        margin-top: 0;
    }

    .chronology--area--box--year.type01 img.chronology--area--box--year-img03{
        width: 16px;
        right: 78px;
        top: -6px;
    }
    .chronology--area--box--year.type01 img.chronology--area--box--year-img04{
        position: absolute;
        width: 13.5px;
        right: 65px;
        top: 106px;
    }
    .chronology--area--box--year.type01 img.chronology--area--box--year-img05{
        position: absolute;
        width: 11.2px;
        right: 110px;
        top: 135px;
    }

    .type01 .chronology--area--box--texttitle{
        font-size: 34px;
        padding-left: 0;
    }
}