@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////
 ///// COMMON /////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////// */
/* This text is in Times New Roman */
.yearSerif {
    font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif;
    font-weight: 600;
}


.indexno {
    opacity: 0;
}
.yearTitle{
    font-size: 2.6rem;
}

img{
    width: 100%;
}
#contsArea {
    padding: 50px 0 0;
    text-align: center;
}

#contsArea .mainTitle{
    margin: 0 auto 40px;
}
#contsArea .mainTitle h2+p{
    line-height: 1;
}


.historyArea .historySet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    padding: 0 5%;
}
.historyArea .historySet .yearBlk {
    position: relative;
    width: 25%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.historyArea .historySet .yearBlk h3{
    margin: 0 0 0 .3em;
}
.historyArea .historySet .yearBlk::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #000;
    position: absolute;
    top: .9em;
    left: -2px;

}
.historyArea .historySet .yearBlk::after{
    content: "";
    width: 1px;
    height: 100%;
    background: #000000;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0.9em 0 0;
}
.historyArea .historySet .yearTitle {
}
.historyArea .historySet .hisBlk {
    width: 75%;
    padding: 0 0 4em;
}
.historyArea .historySet .txtBlk {
    text-align: left;
    margin: 0 0 10px;
}
.historyArea .historySet .txtBlk p {
}
.historyArea .historySet .imgBlk {
}
.historyArea .historySet .imgBlk p {
}
.historyArea .historySet .imgBlk p:not(:last-of-type){
    margin: 0 0 10px;
}
.historyArea .historySet img {
}

.background {
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    position: fixed;
    background-position: center center;
    opacity: 0;
    background-size: cover;
    -webkit-transition: 1.0s;
    transition: 1.0s;
    z-index: -1;
}

.historyArea .historySet {
    color: #777777;
    -webkit-transition: 1.0s;
    transition: 1.0s;
}
.historyArea .historySet .imgBlk img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: 1.0s;
    transition: 1.0s;
}

.historyArea .historySet.show {
    color: #000000;
}
.historyArea .historySet.show .imgBlk img{
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.show .background {
    opacity: 1;
}


#content01_bg {background-image: url(../img/pc/1988_bg.jpg);}
#content02_bg {background-image: url(../img/pc/1994_bg.jpg);}
#content03_bg {background-image: url(../img/pc/2004_bg.jpg);}
#content04_bg {background-image: url(../img/pc/2006_bg.jpg);}
#content05_bg {background-image: url(../img/pc/2008_bg.jpg);}
#content06_bg {background-image: url(../img/pc/2011_bg.jpg);}
#content07_bg {background-image: url(../img/pc/2012_bg.jpg);}
#content08_bg {background-image: url(../img/pc/2014_bg.jpg);}
#content09_bg {background-image: url(../img/pc/2015_bg.jpg);}
#content10_bg {background-image: url(../img/pc/2017_bg.jpg);}
#content11_bg {background-image: url(../img/pc/2018_bg.jpg);}
#content12_bg {background-image: url(../img/pc/2019_bg.jpg);}
#content13_bg {background-image: url(../img/pc/2020_bg.jpg);}
#content14_bg {background-image: url(../img/pc/2021_bg.jpg);}



@media screen and ( min-width:768px) {

    .yearTitle{
        font-size: 4.6rem;
    }


    .historyArea .historySet {
        max-width: 1000px;
        margin: 0 auto;
    }
    .historyArea .historySet .yearBlk {
        width: 20%;
    }
    .historyArea .historySet .yearBlk::before{
        top: 1.8em;
    }
    .historyArea .historySet .yearBlk::after{
        margin: 1.8em 0 0;
    }
    .historyArea .historySet .hisBlk{
        width: 80%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse;
        flex-flow: row-reverse;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 0 10em;
    }
    .historyArea .historySet .hisBlk .txtBlk {
        width: 48%;
    }

    .historyArea .historySet .hisBlk .imgBlk {
        max-width: 400px;
        width: 50%;
    }
}
@media screen and ( min-width:961px) {
    #contsArea .mainTitle{
        margin: 0 auto 60px;
    }
    .indexno {
        opacity: 1;
    }

    #contsArea .mainimgCnt{
        margin: 0 auto 120px;
    }
    .styleBlk{
        margin: -80px auto 0px;
        padding: 120px 0 0;
    }

}

@media screen and ( min-width:1024px) {
    #contsArea {
        padding: 100px 0 0;
    }
}


.imgBlk .swiper-container{
    margin: 0 0 10px;
}

.swiper-container .swiper-button-prev,.swiper-container .swiper-button-next{
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-image: none;

}
.swiper-container .swiper-button-prev{
    left: 3%;
}
.swiper-container .swiper-button-next{
    right: 3%;
}
.swiper-container .swiper-button-prev::after,.swiper-container .swiper-button-next::after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    -webkit-transition: .8s all ease-in;
    transition: .8s all ease-in;
}
.swiper-container .swiper-button-prev::after{
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    -webkit-transform: translate(0, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
}

.swiper-container .swiper-button-next::after{
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    -webkit-transform: translate(0, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}