@charset "utf-8";

#history {
position: relative;
}

#history h2 {
text-align: center;
font-size: 200%;
border-bottom: 1px solid #fff;
margin-top: 10%;
}

#history h2#history_sub {
border: none;
font-size: 140%;
text-align: left;
margin: -36% 0 16% -13%;
padding: 1% 0 1% 13%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 56%);
}

#history .bgc_01 {
background: linear-gradient(to bottom right, #e4ddca 0.1%, #e0ddd6, #d9d7cf, #f9f9f9);
}

#history img {
display: block;
margin: 0 auto;
width: 70%;
}

#history .firstLetter {
width: 90%;
margin: 4% auto;
}

#history .firstLetter::first-letter {
font-size: 200%;
}

#history .dpf {
display: flex;
justify-content: center;
align-items: center;
}

#history .dpf img:first-child {
margin-right: 2%;
}

@media screen and (min-width:769px) {
#history { width: 80%; margin: 0 auto; }
}

@media screen and (max-width:769px) {
#history h2#history_sub { font-size: 120%; margin: -30% 0 15% -10%; }
}

@media screen and (max-width:680px) {
#history img, #history .firstLetter { width: 100%; }
#history .dpf { width: 49%; }
}

@media screen and (max-width:599px) {
#history .dpf { flex-wrap: wrap; width: 430px; }
#history .dpf img:first-child { margin-right: 0; margin-bottom: 2%; }
}

@media screen and (max-width:599px) {
#history .dpf { width: 100%; }
}