@charset "UTF-8";
/* --------------------------------------------

	FileName	:	history.css

-------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Nothing+You+Could+Do&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

.mc-History {
}

.mc-History_Item {
  display: flex;
  padding: 0 30px;
  margin: 0 !important;
  justify-content: space-between;
  
}

.mc-History_Item dt{
    color: #202124;
    font-size: 2.8rem !important;
    font-family: "Cormorant Garamond", serif;
    padding: 70px 0 70px;
    flex: 0 0 100px;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
    
}

.mc-History_Item dt span{
  position: relative;
  display: inline-block;

}
.mc-History_Item dt span::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #1080b3;
  display: block;
  position: absolute;
  right: -48px;
  top: 50%;
  transform: translateY(-50%);
}

.mc-History_Item dd {
  padding: 70px 60px 20px;
  margin-bottom: 0 !important;
  border-left: 1px solid #202124;
  flex: 1 1 auto;
  position: relative;
  z-index: 0;
}

.mc-History_Wrap {
  display: flex;
  background-color: #f2f2f2;
  padding: 20px 30px;
  width: 100%;
  justify-content: space-between;
  position: relative;
}

.mc-History_Wrap.clm {
  flex-direction: column;
}

.mc-History_Wrap::before {
  position: absolute;
  width: 98px;
  height: 98px;
  background-color: rgba(116, 216, 156, .2);
  content: "";
  display: block;
  border-radius: 50%;
  top: -40px;
  left: -30px;
}

.mc-History_Wrap::after {
  position: absolute;
  width: 70px;
  height: 1px;
  background-color: #202124;
  content: "";
  display: block;
  top: 34px;
  left: -60px;
}

.mc-History_Wrap figure {
  margin: 0 !important;
  flex: 0 0 auto;
  text-align: center;
}

.mc-History_Wrap figure span {
  color: #000;
  margin-top: .25rem;
  display: inline-block;
}

.mc-History_Wrap figure a {
  text-decoration: none;
}

.mc-History_Wrap figure.multiple {
  display: flex;
  column-gap: 1rem;
}

.mc-History_Cnt {
  padding-right: 1rem;
}

.mc-History_Cnt .era {
  margin: 0 !important;
  font-family: "Zen Old Mincho", serif;
  font-size: 2.2rem;
  color: #1080b3;
  font-weight: bold;
  font-style: italic;
  line-height: 1;
}

.mc-History_Cnt li::before{
  background-color: #202124 !important;
  width: 4px !important;
  height: 4px !important;
}

@media only screen and (max-width: 768px) {
  .mc-History_Item {
    display: block;
    position: relative;
    padding: 0 0 0 10px;
  }
  .mc-History_Item dt{
    padding: 0;
    position: absolute;
    top: 25px;
    left: 100px;
  }

  .mc-History_Item dt span::after {
    right: auto;
    left: -104px;
    top: 80px;
  }

  .mc-History_Item dd {
    padding: 70px 39px 20px 50px;
  }

  .mc-History_Wrap {
    flex-direction: column;
    padding: 20px 15px;
  }

  .mc-History_Cnt {
    padding-right: 0;
  }

  .mc-History_Wrap figure.multiple {
  }
}