@charset "UTF-8";
.page-ttl-block {
  background-image: url(../img/main_img.jpg); }

.history-anchor {
  margin: 0;
  padding: 16px;
  list-style: none;
  display: flex;
  justify-content: center;
  background-color: #f7efeb; }
  .history-anchor li {
    margin: 0 1.8%; }
    .history-anchor li a::before {
      content: "▼";
      display: inline-block;
      color: #6e4040; }

.history-wrap .page-cnt {
  padding-top: 40px;
  padding-bottom: 90px;
  position: relative; }
  .history-wrap .page-cnt::before {
    content: "";
    display: block;
    width: 6px;
    height: 100%;
    background-color: #f7efeb;
    position: absolute;
    top: 0;
    left: 120px;
    z-index: 2; }

.history-ttl {
  font-family: 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 40px;
  font-size: 4.0rem;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 40px; }
  .history-ttl::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background-color: #6e4040;
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px); }

.history-list {
  margin: 0;
  padding: 0; }
  .history-list::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }
  .history-list + .history-ttl {
    margin-top: 120px; }
  .history-list > div {
    border-bottom: #999999 solid 1px;
    display: flex;
    justify-content: space-between;
    margin: 0 0 0;
    padding: 40px 0;
    opacity: 0;
    transform: translateY(80px);
    transition-property: all;
    transition-duration: 0.5s; }
    .history-list > div.show {
      opacity: 1;
      transform: translateY(0); }
    .history-list > div.global {
      background-color: #f5fafd; }
    .history-list > div.noborder {
      border-bottom: none; }

.history-year {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  padding: 4px 0 0 8px; }
  .history-year span {
    font-size: 14px;
    font-size: 1.4rem;
    display: block; }

.history-detail {
  min-height: 64px;
  width: calc(100% - 130px); }

.month {
  margin-bottom: 30px; }
  .month:last-child {
    margin-bottom: 0; }
  .month.column {
    display: flex;
    justify-content: space-between; }
    .month.column > div:nth-child(1) {
      width: 54%; }
    .month.column > div:nth-child(2) {
      width: 42.5%; }
      .month.column > div:nth-child(2) > div + div {
        margin-top: 30px; }
  .month.img-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .month.img-column > div {
      width: 48.2%; }
      .month.img-column > div img {
        width: 100%;
        height: auto; }
    .month.img-column .img-caption {
      width: 100%; }

.month-ttl {
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 5px; }

.img-caption {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  font-size: 1.4rem; }

.img-block {
  margin-bottom: 20px; }
  .img-block:last-child {
    margin-bottom: 0; }
  .img-block.mt {
    margin-top: 20px; }

.tacenter {
  text-align: center; }

.taleft {
  text-align: left; }

.icon-global {
  margin-top: 5px;
  line-height: 1.0; }

@media only screen and (max-width: 768px) {
    .history-anchor {
      flex-wrap: wrap;
      padding: 12px; }
      .history-anchor li {
        margin: 0 3%; }
    .history-wrap .page-cnt {
      padding-top: 25px;
      padding-bottom: 50px; }
      .history-wrap .page-cnt::before {
        width: 5px;
        left: 10px; }
    .history-ttl {
      font-size: 3.0rem;
      margin-bottom: 30px; }
      .history-list + .history-ttl {
        margin-top: 80px; }
      .history-list > div {
        display: block;
        padding: 25px 0; }
    .history-year {
      padding: 0 0 0 8px;
      margin-bottom: 10px; }
      .history-year span {
        display: inline-block; }
    .history-detail {
      min-height: initial;
      width: auto;
      padding: 0 0 0 8px; }
      .month.column {
        display: block; }
        .month.column > div:nth-child(1) {
          width: auto;
          margin-bottom: 20px; }
        .month.column > div:nth-child(2) {
          width: auto;
          text-align: center; }
      .month.img-column {
        display: block; }
        .month.img-column > div {
          width: auto; }
        .month.img-column > div:nth-child(1) {
          margin-bottom: 15px; } }