@charset "UTF-8";
/*ーーーーーーーーーー
***
共通要素は
/assets/css/common_renew.css　にまとめて書いておきます
***
ーーーーーーーーーーー*/
@import url("/assets/css/common_renew.css");
/*ーーーーーーーーーー

ーーーーーーーーーーー*/
.c-history {
  /*width: 800px;*/
  margin: 1em auto;
  position: relative;
  max-width: 100%;
}
.c-history:after { /*縦線*/
  content: "";
  width: 2px;
  border-left: 2px solid #3eab52;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20%;
  z-index: -1;
}
.c-history dl {
  overflow: hidden;
}
.c-history dt > span {
  width: 15%;
  height: 40px;
  font-size: 16px;
  font-weight: bold;
  background: #3eab52;
  line-height: 40px;
  text-align: right;
  position: relative;
  float: left;
  color: #fff;
} /* ポイントはdtだけfloatさせること*/
.c-history dt span:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-left-color: #3eab52;
  position: absolute;
  top: 0;
  left: 100%;
} /*　矢印部分 */
.c-history dd {
  margin-left: 22%;
  position: relative;
  padding-top: 8px;
  /*padding-left: 32px;*/
  padding-bottom: 32px;
  /* 白で縁取り
  text-shadow:
    2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff; */
}
/*.c-history dd:nth-of-type(1) {
  background: url("../image/renew/history_img_01.jpg") no-repeat center right / contain;
}
.c-history dd:nth-of-type(3) {
  background: url("../image/renew/history_img_02.jpg") no-repeat center right / contain;
}
.c-history dd:nth-of-type(6) {
  background: url("../image/renew/history_img_03.jpg") no-repeat center right / contain;
}*/
.c-history dd:before {
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3eab52;
  position: absolute;
  left: -3.5%;
  top: 12px;
}
.c-history-month {
  margin-bottom: 5px !important;
  padding-top: 5px !important;
  font-size: 2.2rem !important;
  color: #3eab52;
  border-top: #3eab52 1px solid;
  margin-top: 0.5em !important;
  padding-left: 12px !important;
}
.c-history-month .gatsu {
  font-size: 75% !important;
}
.c-history-month:not(:first-of-type) {
  margin-top: 1em !important;
}
.c-history-item {
  padding-bottom: 0 !important;
  padding-left: 12px !important;
    margin-bottom: 0.8em!important;
  /*font-size: 1.6rem !important;*/
}
/* 基本のPC用スタイルはそのまま */
/* スマホ対応 */
@media (max-width: 768px) {
  .c-history {
    width: 95%; /* 画面幅に合わせる */
    margin: 20px auto;
  }
  .c-history:after {
    content: none; /* timelineの線 */
  }
  .c-history dt {
    width: 100%;
  }
  .c-history dt span {
    width: 100%;
    height: 2em;
    line-height: 1;
    font-size: 1.4rem;
    text-align: left;
    float: none;
    display: block;
    padding: 0.1em;
    margin-bottom: 0;
  }
  .c-history dt span.year {
    display: inline;
  }
  .c-history dt span:after {
    /*border-width: 0.5em;
    top: 0;*/
    content: none
  }
  .c-history dd {
    margin-top: 0;
    padding-left: 0;
    padding-bottom: 24px;
    padding-top: 0;
    margin-left: 0;
  }
  .c-history dd:before {
    content: none;
  }
  .c-history-month {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
  }
  .c-history-item {
    /*font-size: 1.3rem !important;*/
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
  /*文字と重なるので、背景画像に薄く白をのせる
  .c-history dd:nth-of-type(1) {
    background:
      linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url("../image/renew/history_img_01.jpg") no-repeat center right / contain;
  }
  .c-history dd:nth-of-type(3) {
    background:
      linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url("../image/renew/history_img_02.jpg") no-repeat center right / contain;
  }
  .c-history dd:nth-of-type(6) {
    background:
      linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url("../image/renew/history_img_03.jpg") no-repeat center right / contain;
  }*/
}
/**/
.c-history dd {
  /* background-color: rgba(255, 255, 255, 0.8);*/
  border-radius: 8px;
  /* padding: 36px 44px; */
  margin-bottom: 24px;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
  /* border: 1px #CCC solid;*/
}
.c-history dt .year {
  font-size: 200%;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  padding-right: 0.1em;
}