@charset "UTF-8";
/* CSS Document */
/* 基本-モバイルファースト ======================================================================================================== */



#history{
padding-top: 50vw;
}
.count-up{
color: #000;
font-size: 40vw;
font-weight: bold;
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: -100;
opacity: .1;
}
#history_inner{
display: flex;
}
#history .timeline p{
content: "";
display: block;
width: 2px;
height: 0;
background-color: #111;
margin-left: 5vw;
}
#history .timeline span{
display: none;
}
#history #list{
flex: 1;
margin-right: 5vw;
}
#history #list article{
padding-bottom: 15vw;
}
#history #list article:first-child{
margin-top: -10px;
}
#history #list article .year{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
position: relative;
}
#history #list article .year h3{
font-size: 10vw;
margin-top: -1.5vw;
font-weight: bold;
line-height: 1;
}
#history #list article .year .line{
width: 100%;
height: 2px;
background-color: #b3203a;
margin-right: 0.5em;
}

#history #list article .year .pin{
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #b3203a;
position: absolute;
left: -10px;
top: 0;
bottom: 0;
margin: auto 0;
}
#history #list article dl{
display: flex;
align-items: flex-start;
text-align: left;
margin-top: 8vw;
margin-left: 5vw;
}
#history #list article .year + dl{
margin-top: 2vw;
}
#history #list article dt{
display: block;
font-size: 6vw;
line-height: 1;
font-weight: bold;
white-space: nowrap;
}
#history #list article dd{
display: block;
flex: 1;
margin-left: 1em;
/* text-align: center; */
}
#history #list article dd p{
text-align: left;
}
#history #list article dd .photo{
display: inline-block;
position: relative;
margin-top: 10px;
text-align: center;
}
#history #list article dd .photo img{
max-height: 52vw;
}
#history #list article dd .photo .caption{
color: #fff;
text-shadow:0px 0px 4px #000 , 0px 0px 10px #000;
font-weight: bold;
position: absolute;
right: 5px;
bottom: 5px;
}


#history #epilogue{
font-size: 4vw;
font-weight: bold;
text-align: left;
}





/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){

#history{
padding-top: 10vh;
}

#history_inner{
display: block;
position: relative;
}
#history .timeline{
width: 2px;
height: 100%;
padding-top: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
#history .timeline p{
margin: 0;
}
#history #list{
flex: inherit;
margin: 0 8vw;
}
#history #list article{
width: 50%;
padding-bottom: 40px;
}
#history #list article:first-child{
margin-top: 0;
}
#history #list article:nth-child(odd){
margin-left: auto;
}
#history #list article:nth-child(even) .year{
flex-direction: row;
}
#history #list article:nth-child(even) .year .line{
margin-right: 0;
margin-left: 0.5em;
}
#history #list article:nth-child(even) .year .pin{
left: inherit;
right: -10px;
}
#history #list article .year h3{
font-size: 60px;
margin-top: -10px;
}
#history #list article dl{
width: 450px;
margin-left: auto;
margin-top: 40px;
}
#history #list article .year + dl{
margin-top: 20px;
}
#history #list article:nth-child(even) dl{
margin-left: 0;
margin-right: auto;
}
#history #list article dt{
font-size: 40px;
}
#history #list article dd{
font-size: 16px;
margin-top: 0.5em;
}
#history #list article dd .photo img{
max-height: 304px;
}

#history #epilogue{
font-size: 40px;
text-align: center;
}


}