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

.chronologically-about {
  max-width: 1048px;
  margin-inline: auto;
  padding: 60px 20px;
  font-size: 18px;
  font-size: 1.8rem; }

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

.chronologically-wrap {
  background: url(../img/chronologically_bg.jpg) left top repeat; }

.chronologically-block {
  position: relative; }
  .chronologically-block::before {
    content: "";
    display: block;
    width: 20px;
    height: 100%;
    background-color: #dae8e0;
    position: absolute;
    top: 0;
    left: calc(50% - 10px);
    z-index: 0; }
  .chronologically-block .page-cnt {
    max-width: 1120px;
    padding-top: 70px;
    padding-bottom: 90px;
    padding-left: 0;
    padding-right: 0;
    position: relative; }
    .chronologically-block .page-cnt .grid-item {
      width: 50%;
      margin-top: 200px;
      padding: 0 6.3%;
      box-sizing: border-box;
      position: relative;
      opacity: 0;
      transition-property: all;
      transition-duration: 0.5s;
      transform: translateY(50px); }
      .chronologically-block .page-cnt .grid-item.show {
        opacity: 1;
        transform: translateY(0); }
        .chronologically-block .page-cnt .grid-item.show::before {
          opacity: 1; }
        .chronologically-block .page-cnt .grid-item.show::after {
          width: 50px; }
      .chronologically-block .page-cnt .grid-item.leftblock::before, .chronologically-block .page-cnt .grid-item.leftblock::after {
        right: -7px; }
      .chronologically-block .page-cnt .grid-item.leftblock::after {
        transform: translate3d(-7px, 6px, 0); }
      .chronologically-block .page-cnt .grid-item.rightblock::before, .chronologically-block .page-cnt .grid-item.rightblock::after {
        left: -7px; }
      .chronologically-block .page-cnt .grid-item.rightblock::after {
        transform: translate3d(7px, 6px, 0); }
      .chronologically-block .page-cnt .grid-item:first-child {
        margin-top: 0; }
      .chronologically-block .page-cnt .grid-item::before, .chronologically-block .page-cnt .grid-item::after {
        content: "";
        display: block;
        background-color: #009944;
        position: absolute;
        top: 38px;
        transition-property: all;
        transition-duration: 0.6s; }
      .chronologically-block .page-cnt .grid-item::before {
        width: 15px;
        height: 15px;
        border-radius: 8px;
        opacity: 0; }
      .chronologically-block .page-cnt .grid-item::after {
        width: 0;
        height: 3px; }
      .chronologically-block .page-cnt .grid-item.mtop-ajust {
        margin-top: 300px; }

.chronologically-ttl {
  font-family: 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 40px;
  font-size: 4.0rem;
  color: #FFF;
  text-align: center;
  background-color: #334c3e;
  padding: 15px;
  position: relative;
  z-index: 1; }
  .chronologically-ttl + .chronologically-lead {
    margin-top: 60px; }

.year {
  font-size: 80px;
  font-size: 8.0rem;
  font-weight: 300;
  line-height: 1.0;
  color: #009944;
  margin-bottom: 25px; }
  .year span {
    font-size: 30px;
    font-size: 3.0rem;
    font-weight: normal; }

.year-block {
  margin-bottom: 30px; }
  .year-block:last-child {
    margin-bottom: 0; }
  .year-block.col2-img-l-w20, .year-block.col2-img-r-w20 {
    display: flex;
    align-items: flex-start; }
    .year-block.col2-img-l-w20 p, .year-block.col2-img-r-w20 p {
      flex-basis: 75%;
      margin-right: 5%; }
    .year-block.col2-img-l-w20 .chronologically-img, .year-block.col2-img-r-w20 .chronologically-img {
      margin: 0; }
  .year-block.col2-img-r-w20 {
    flex-direction: row-reverse; }
    .year-block.col2-img-r-w20 p {
      flex-basis: 75%;
      margin-right: 0;
      margin-left: 5%; }
  .year-block.col2-img-l-w50, .year-block.col2-img-r-w50 {
    display: flex;
    align-items: flex-start; }
    .year-block.col2-img-l-w50 p, .year-block.col2-img-r-w50 p {
      flex-basis: 50%;
      margin-right: 5%; }
    .year-block.col2-img-l-w50 .chronologically-img, .year-block.col2-img-r-w50 .chronologically-img {
      margin: 0; }
  .year-block.col2-img-r-w50 {
    flex-direction: row-reverse; }
    .year-block.col2-img-r-w50 p {
      flex-basis: 50%;
      margin-right: 0;
      margin-left: 5%; }
  .year-block.col2-img-l-w60, .year-block.col2-img-r-w60 {
    display: flex;
    align-items: flex-start; }
    .year-block.col2-img-l-w60 p, .year-block.col2-img-r-w60 p {
      flex-basis: 35%;
      margin-right: 5%; }
    .year-block.col2-img-l-w60 .chronologically-img, .year-block.col2-img-r-w60 .chronologically-img {
      margin: 0; }
  .year-block.col2-img-r-w60 {
    flex-direction: row-reverse; }
    .year-block.col2-img-r-w60 p {
      flex-basis: 35%;
      margin-right: 0;
      margin-left: 5%; }

.year-lead {
  font-size: 24px;
  font-size: 2.4rem;
  margin-bottom: 10px; }

.year-text {
  position: relative;
  padding-left: 1em; }
  .year-text::before {
    content: "●";
    position: absolute;
    top: 0;
    left: 0; }
  .year-text span {
    font-size: 14px;
    font-size: 1.4rem; }

.chronologically-img {
  margin-top: 25px;
  text-align: center; }

.img-caption {
  margin-top: 6px;
  font-size: 14px;
  font-size: 1.4rem; }
  .img-caption.taright {
    text-align: right; }

.chronologically-lead {
  max-width: 1048px;
  margin-inline: auto;
  padding-inline: 20px;
  position: relative;
  z-index: 1; }
  .chronologically-lead span {
    display: block;
    background-color: #009944;
    color: #FFF;
    text-align: center;
    font-family: 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: 32px;
    font-size: 3.2rem;
    padding: 5px;
    border-radius: 10px; }
  @media only screen and (max-width: 768px) {
    .chronologically-about {
      padding: 30px 20px;
      font-size: 1.6rem; }
    .chronologically-anchor {
      flex-wrap: wrap;
      padding: 12px; }
      .chronologically-anchor li {
        margin: 0 3%; }
      .chronologically-block::before {
        display: none; }
      .chronologically-block .page-cnt {
        display: block; }
        .chronologically-block .page-cnt .grid-item {
          width: 100%;
          margin-top: 60px;
          left: auto !important;
          top: auto !important; }
        .chronologically-block .page-cnt .grid-item.rightblock:before {
          left: calc(50% - 6px); }
        .chronologically-block .page-cnt .grid-item:last-child {
          margin-bottom: 0; }
          .chronologically-block .page-cnt .grid-item::before, .chronologically-block .page-cnt .grid-item::after {
            display: none; }
          .chronologically-block .page-cnt .grid-item::before {
            content: "";
            display: block;
            width: 12px;
            height: 50px;
            background-color: #dae8e0;
            position: absolute;
            top: -45px;
            left: calc(50% - 6px);
            border-radius: 0; }
          .chronologically-block .page-cnt .grid-item.mtop-ajust {
            margin-top: 60px; }
    .chronologically-ttl {
      font-size: 3.0rem; }
      .chronologically-ttl + .chronologically-lead {
        margin-top: 30px; }
    .year {
      font-size: 7.0rem;
      line-height: 1.2;
      text-align: center; }
      .year span {
        display: block;
        font-size: 2.0rem; }
      .chronologically-lead span {
        font-size: 2.2rem; } }