@charset "utf-8";
/* culture */
main{overflow: hidden;}
/* inview */
.inview.left{ position:relative;
    transition:all 0.3s ease;
    transition-delay: 0.6s;
    -webkit-transform:translateX(-5%) ;
    transform:translateX(-5%);
    opacity:0;
}
.inview.inviewShow.left{-webkit-transform:translateX(0) ;
transform:translateX(0); opacity:1;}

.inview.right{ position:relative;
    transition:all 0.8s ease;
    transition-delay: 0.1s;
    -webkit-transform:translateX(5%) ;
    transform:translateX(5%);
    opacity:0;
}
.inview.inviewShow.right{-webkit-transform:translateX(0) ;
transform:translateX(0); opacity:1;}

.inview.bottom{ position:relative;
    transition:all 0.8s ease;
    transition-delay: 0.1s;
    -webkit-transform:translateY(10%) ;
    transform:translateY(10%);
    opacity:0;
}
.inview.inviewShow.bottom{-webkit-transform:translateY(0) ;
transform:translateY(0); opacity:1;}
 /* delay */
.d1{transition-delay: 0.1s !important;}
.d2{transition-delay: 0.2s !important;}
.d3{transition-delay: 0.3s !important;}
.d4{transition-delay: 0.4s !important;}
.d5{transition-delay: 0.5s !important;}
.d6{transition-delay: 0.6s !important;}
.d8{transition-delay: 0.8s !important;}
.d10{transition-delay: 1s !important;}
.t2{transition-duration:2s !important;}

/* main img */
.mainImg{position: relative;}
.mainImg img{width:100%;}
.mainImg .ttl{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align: center;}
.mainImg .ttl p {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 0;
    letter-spacing: 0.2em;
    color: #ce121b;
}
.mainImg .ttl h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: 46px;
    font-weight: 500;
    margin-bottom: 15px;
    letter-spacing: 0.2em;
    color:#fff;
}
.mainImg .scroll{position: absolute; bottom:28px; font-family: 'Oswald', sans-serif; letter-spacing: 0.2em; font-size: 10px;
    color:#fff; left:50%; transform:translateX(-50%);}
.scrollLine{position: absolute; bottom:0; left:50%; height:30px; overflow: hidden;}
.scrollLine .baseLine{width:1px; height:6vh; background:#555;}
.scrollLine .overlapLine{position: absolute;
    z-index: 2;
    width: 100%;
    height: 6vh;
    display: block;
    top: 0;
    background: #fff;
    -webkit-animation: scrollline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
    animation: scrollline 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
@keyframes scrollline {
  0% {    top:-100%;}
  100% {    top:100%;  }
}
/* intro */
.intro {text-align: center; position:relative; padding-top:140px;}
.intro h2{font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 0;
    letter-spacing: 0.2em;
    color: #ce121b;}
.intro p{font-family: 'Noto Serif JP', serif; font-size:30px;font-weight: 500; line-height: 1.6; margin-bottom:96px;}
.intro .scrollLine{top:0; bottom:inherit;height:80px;}
/* innerLink */
.innerLink.is-fixed{    border-top: solid 1px #ccc;
    position: fixed;
    top: 70px;
    width: 100%;
    background: #fff;
    z-index: 2;}
.innerLink ul{text-align: center; padding: 0 14px;;}
.innerLink ul li{display: inline-block; margin:0 35px;}
.innerLink ul li a{color:#ccc; text-decoration: none; position: relative;}
.innerLink ul li a.active{color:#000;}
.innerLink ul li a.active:after{content:"・";    position: absolute;
    bottom: -22px;
    left: 1em;}
.history.contents_innner {
    padding-top: 130px;
    margin-top: -130px;
}
section#y1975:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 130px;
    background: #fff;
    top: 0;     left: 0;
}
/* section(history) */
.history .historyInner{max-width:1000px; margin:0 auto; display: flex;    padding: 80px 0 100px; position: relative;}
.history .historyInner:before{ content: "";
    display: block;
    height: 100%;
    width: 1px;
    border-left: solid 1px #999;
    position: absolute;
    left: 0;
    top: 0;}
#y1975 .historyInner:before{top:97px;}
#future .historyInner:before{height:153px;}
#future .historyInner:after{content: "";
    display: block;
    height: calc(100% + 100px);
    width: 1px;
    border-left: dotted 1px #999;
    position: absolute;
    left: 0;
    top: 153px;}
#future .historyInner{padding-top:136px;}
.history.g{background-color: #F4F5F6 !important;}
.history .year{
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 14px;
    padding-bottom: 0;
    padding-left:35px;
    letter-spacing: 0.2em;
    color: #ce121b;
    width: 245px;
    }
.history .year:before{content:"";display:block;width:15px;height: 1px;background:#999;position: absolute;top:17px;left: 0;}
.history h2{font-family: 'Noto Serif JP', serif; font-size:26px;font-weight: 500; line-height: 1.6; margin-bottom:40px; width:100%;}
.history .dna+h2{margin-top:100px;}
.history[id^="y"]{background-position:top 32px left -50px;background-repeat: no-repeat;background-size:507px 347px;background-color: #fff;position: relative;z-index: 1;transition:all 0.8s ease;opacity: 0; }
.history.contents_innner[id^="y"]{background-position:top 162px left -50px;z-index: -1; }
.history.inviewShow[id^="y"]{background-position:top 32px left 0;opacity: 1;}
.history.contents_innner.inviewShow[id^="y"]{background-position:top 162px left 0;}
.history#y1975{background-image:url(../images/bg_y75.svg);}
.history#y1977{background-image:url(../images/bg_y77.svg);}
.history#y1979{background-image:url(../images/bg_y79.svg);}
.history#y1983{background-image:url(../images/bg_y83.svg);}
.history#y1985{background-image:url(../images/bg_y85.svg);}
.history#y1986{background-image:url(../images/bg_y86.svg);}
.history#y1988{background-image:url(../images/bg_y88.svg);}
.history#y1992{background-image:url(../images/bg_y92.svg);}
.history#y1995{background-image:url(../images/bg_y95.svg);}
.history#y1997{background-image:url(../images/bg_y97.svg);}
.history#y1998{background-image:url(../images/bg_y98.svg);}
.history#y2005{background-image:url(../images/bg_y05.svg);}
.history#y2008{background-image:url(../images/bg_y08.svg);}
.history#y2011{background-image:url(../images/bg_y11.svg);}
.history#y2014{background-image:url(../images/bg_y14.svg);}
.history#y2015{background-image:url(../images/bg_y15.svg);}
.history#y2020{background-image:url(../images/bg_y20.svg);}
.history#future{    background: url(../images/bg_future.svg) 0 100px no-repeat;
    background-size: 100%;    padding-bottom: 350px;}
.historyBody {width: calc(100% - 245px);display: flex;flex-wrap: wrap;}
.historyBody .textBlock{width:calc(100% - 260px);}
.historyBody .figgroup {width: 260px;}

.history#y1985 {
    background-image: url(../images/bg_y85.svg),url(../images/bg_y85_img.jpg);
    background-position: top 32px left 0, top 0 left 0;
    background-size: 520px 348px,cover;
}
.history#y1988 {
    background-image: url(../images/bg_y88.svg),url(../images/bg_y88_img.jpg);
    background-position: top 32px left 0, top 0 left 0;
    background-size: 525px 331px,cover;
}
.history#y1992 {
    background-image: url(../images/bg_y92.svg),url(../images/bg_y92_img.jpg);
    background-position: top 162px left 0, top 0 right 0;
    background-size: 525px 331px,cover;
}
.history#y1995 {
    background-image: url(../images/bg_y95.svg),url(../images/bg_y95_img.jpg);
    background-position: top 32px left 0, top 0 right 0;
    background-size: 525px 331px,cover;
}
.history#y2005 {
    background-image: url(../images/bg_y05.svg),url(../images/bg_y05_img.jpg);
    background-position: top 162px left 0, bottom 0 right 0;
    background-size: 540px 347px,cover;
}
.history#y2014 {
    background-image: url(../images/bg_y14.svg),url(../images/bg_y14_img.jpg);
    background-position: top 32px left 0, top 0 right 0;
    background-size: 507px 347px,cover;
}
.history#y2020 {
    background-image: url(../images/bg_y20.svg),url(../images/bg_y20_img.jpg);
    background-position: top 162px left 0, top 0 right 0;
    background-size: 525px 331px,cover;
}
.history#y2020 .historyBody h2,
.history#y2020 .historyBody .textBlock>p{color:#fff;}
/* figure */
.figgroup figure{margin:0.6em 0 20px 40px;    text-align: right;}
.figgroup figure figcaption{font-size: 12px;    margin-top: 5px;line-height: 1.4;text-align: right;}
.figgroup figure.bottom {
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
}
.history#y2015 .figgroup figure:first-child{margin-top:-70px;}
.history#y2020 figure.bottom figcaption{color:#fff;}
/* DNA */
.dna{background:#F4F5F6; margin-top:calc(40px - 1em);}
.history.g .dna{background:#fff;    margin-top: calc(40px - 1em);}
.dna .dnaTtl{background:url(../images/bg_dna_start.svg) top 14px left no-repeat, url(../images/bg_dna_end.svg) right bottom 14px no-repeat; background-color: #000;    background-size: 40px 40px; color:#fff; padding:10px 56px 22px;}
.dna .dnaTtl p{font-size:12px; padding-bottom: 0;}
.dna .dnaTtl p span{ font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding-bottom: 0;
    letter-spacing: 0.2em;
    color: #ce121b;}
.dna h3{font-family: 'Noto Serif JP', serif; font-size:18px;font-weight: 500; line-height: 1.55; margin-bottom: 0;}
.dna>p {    padding: 30px 60px 40px;font-size: 14px;}

@media (max-width:1023px){
    section.history {    padding-left: 5%;    padding-right: 5%;    }
    .history[id^="y"]{background-size:52%;}
    .historyBody{display: block;}
    .historyBody .textBlock {    width: 100%;    }
    .historyBody .figgroup {    width: 260px;}
    .historyBody .figgroup {
    display: flex;
    width: 100%;
    justify-content: space-between;}
    .figgroup figure {
    margin-left: 0;
    margin-right: 0;
    width: 48%;}
    .historyBody img{width:100%;}
    .dna .dnaTtl{    padding: 10px 30px 22px;}
    .dna>p {    padding: 30px 30px 40px;}
    .history#y2015 .figgroup figure:first-child{margin-top:0;}
    .figgroup figure.bottom,
    .figgroup figure.bottom figcaption{position: static;}
}
@media (max-width:764px){.innerLink.is-fixed{ top:50px;}
@media (max-width:659px){
    .history .historyInner{display: block;}
    .historyBody{width:100%; padding-left:35px;}
    .dna{    margin-right: -6.5%; margin-top: calc(26px - 1em);margin-bottom: 30px;}
    .history .historyInner{padding: 45px 0 60px;}
    #y1975 .historyInner:before {    top: 63px;}
}
@media (max-width:529px){
    .intro{padding-top:58px;}
    .intro .scrollLine{height: 38px;}
    .intro p{    margin-bottom: 25px;font-size:27px;}
    .intro .inview.bottom.d8{margin-left:8px; margin-right: -8px;}
    .mainImg .ttl{    transform: translate(-50%, -70%);}
    .mainImg .ttl p{font-size: 14px;    padding-bottom: 15px;}
    .mainImg .ttl h1{font-size:36px; white-space: nowrap;}
    .innerLink ul{    display: flex;    justify-content: space-around;}
    .innerLink ul li{font-size: 13px; margin:0;}
    .historyBody .figgroup {flex-wrap: wrap;}

    .history[id^="y"]{background-size:75%;}
    .history#y1983{background-size: 75% , 100%; background-position: top 162px left 0, bottom 100px right -100px;}
    .history#y1985{background-image:url(../images/bg_y85.svg),url(../images/bg_y85_img_sp.jpg);background-size: 75% , contain;background-position: top 32px left 0, top 0 left 0;}
    .history#y1988{background-image:url(../images/bg_y88.svg),url(../images/bg_y88_img_sp.jpg);background-size: 75% , contain;background-position: top 32px left 0, top 0 left 0;}
    .history#y1992{background-image:url(../images/bg_y92_sp.svg),url(../images/bg_y92_img_sp.jpg);background-size: 75% , contain;background-position: top 162px left 0, top 130px left 0;}
    .history#y1995{background-image:url(../images/bg_y95.svg),url(../images/bg_y95_img_sp.jpg);background-size: 75% , contain;background-position: top 32px left 0, top 0 left 0;}
    .history#y2005{background-image:url(../images/bg_y05.svg),url(../images/bg_y05_img_sp.jpg);background-size: 75% , contain;background-position: top 162px left 0, bottom -107px right 0;}
    .history#y2014{background-image:url(../images/bg_y14.svg),url(../images/bg_y14_img_sp.jpg);background-size: 75% , contain;background-position: top 32px left 0, top 0 left 0;}
    .history#y2020{background-image:url(../images/bg_y20.svg),url(../images/bg_y20_img_sp.jpg);background-size: 75% , contain;    background-position: top 162px left 0, bottom 0 right 0; background-color:#003d6b;}
    .history .year{padding-left: 22px;}
    .historyBody{    padding-left: 22px;}
    .historyBody p img {    width: 102vw;    margin-left: -13%;}
    #future .historyInner {    padding-top: 45px;}
    #future .historyInner:after{height: calc(100% - 190px);    top: 63px;}
    .history#future{background-position: 0 37px;}
    #future .historyInner:before {    height: 62px;}
    .history#y2020 figure.bottom figcaption{    text-shadow: 0px 0px 10px #000;    background: rgba(0,0,0,.3); text-align: left;}
}