@charset "utf-8";



body#about #teaser {
  background-image: url(../images/history/bg_mainvisual.jpg);
}

#about .pageHeadArea:after {
    background-image: url('../images/history/img_page_head.png');
}


.historyArea {
  width: 100%;
  overflow: hidden;
}
.historyArea .historyBox {
  position: relative;
  min-height: 2180px;
}
.historyArea .historyBox:before {
  position: absolute;
  background: url(../images/history/bg_history.png) top center no-repeat;
  width: 100%;
  height: 100%;
  z-index: 99;
  content: "";
  left: 0;
  top: 0;
  
}

.historyArea .historyItem {
  position: relative;
  background: #faf5f5;
  padding: 24px 30px 30px;
  box-sizing: border-box;
  width: 510px;
}
.historyArea .historyItem:before {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: #000;
  content: '';
}
.historyTtl {
  position: absolute;
  z-index: 2;
  font-size: 1.6rem;
  line-height: 1.375;
  text-align: center;
  font-weight: normal;
  width: 180px;
}

.historyTtl span {
  display: block;
  color: #e60012;
  font-size: 2.8rem;
  line-height: 1.6;
  font-weight: bold;
  margin-bottom: 8px;
}
.historyThumb {
  position: absolute;
  z-index: 2;
  width: 310px;
}
.historyPopup {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.285;
}
.historyArea .historyItem.history01 {
  margin-left: 276px;
  margin-bottom: 46px;
}
.historyArea .historyItem.history01:before {
  width: 70px;
  left: 100%;
  top: 202px;
}
.historyArea .historyItem.history01 .historyTtl {
  right: -234px;
  top: 157px;
}
.historyArea .historyItem.history01 .historyThumb {
  top: 100%;
  left: 100%;
  margin: -55px 0 0 13px;
}
.historyArea .historyItem.history01 .historyPopup {
  width: 310px;
  height: 270px;
  background: url(../images/history/bg_history_popup01.png) left top no-repeat;
  left: -276px;
  top: 210px;
  padding: 0 12px 128px 94px;
}
.historyArea .historyItem.history02 {
  margin-left: 33px;
  margin-bottom: 19px;
}
.historyArea .historyItem.history02:before {
  width: 87px;
  left: 100%;
  top: 174px;
}
.historyArea .historyItem.history02 .historyTtl {
  right: -245px;
  top: 124px;
}
.historyArea .historyItem.history02 .historyThumb {
  top: 264px;
  left: 100%;
  margin-left: 135px;
}
.historyArea .historyItem.history02 .historyPopup {
  width: 320px;
  height: 200px;
  background: url(../images/history/bg_history_popup02.png) left top no-repeat;
  left: -34px;
  top: 100%;
  padding: 0 12px 57px 104px;
  margin-top: -63px;
}

.historyArea .historyItem.history03 {
  margin-left: 510px;
  margin-bottom: 99px;
}
.historyArea .historyItem.history03:before {
  width: 53px;
  right: 100%;
  top: 155px;
}
.historyArea .historyItem.history03 .historyTtl {
  left: -214px;
  top: 120px;
}
.historyArea .historyItem.history03 .historyThumb {
  top: 177px;
  left: -600px;
}
.historyArea .historyItem.history03 .historyPopup {
  width: 312px;
  height: 196px;
  background: url(../images/history/bg_history_popup03.png) left top no-repeat;
  right: -100px;
  bottom: -80px;
  padding: 0 12px 55px 108px;
}

.historyArea .historyItem.history04 {
  margin-left: 406px;
  margin-bottom: 44px;
}
.historyArea .historyItem.history04:before {
  width: 144px;
  right: 100%;
  top: 54px;
}
.historyArea .historyItem.history04 .historyTtl {
  left: -305px;
  top: 14px;
}
.historyArea .historyItem.history04 .historyThumb {
  bottom: 60px;
  left: -340px;
}
.historyArea .historyItem.history04 .historyPopup {
  width: 367px;
  height: 207px;
  background: url(../images/history/bg_history_popup04.png) left top no-repeat;
  right: -206px;
  bottom: -44px;
  padding: 0 12px 65px 152px;
}

.historyArea .historyItem .hd04 {
  line-height: 1.6;
  margin-bottom: 8px;
}
.historyArea .historyItem p + p {
  margin-top: 8px;
}


.aboutNoteArea .noteImg {
  left: -12px;
  top: 10px;
}




@media screen and (max-width: 768px) {

.historyArea {
  width: 100%;
  overflow: hidden;
}
.historyArea .historyBox {
  position: relative;
  min-height: 0;
  padding-top: 12vw;
}
.historyArea .historyBox:before {
  background: #666666;
  width: 0.8vw;
  height: 100%;
  left: 14.4vw;
  top: 0;
  z-index: -1;
}

.historyArea .historyItem {
  position: relative;
  background: transparent;
  padding: 3.2vw 0 3.8vw 20.8vw;
  width: 100%;
  margin: 0 !important;
}
.historyArea .historyItem:before {
  display: none;
}
.historyTtl {
  font-size: 2.9vw;
  line-height: 1.36;
  width: 32vw;
  background: #fff;
  padding: 2.13vw 0 3.2vw;
  right: auto !important;
  left: -1vw !important;
  top: 0 !important;
}
.historyTtl:before {
  height: 0.3125vw;
  width: 9.33vw;
  position: absolute;
  left: 100%;
  top: 50%;
  z-index: 2;
  content: "";
  background: #000;
}

.historyTtl span {
  font-size: 6.4vw;
  line-height: 1.5;
  margin-bottom: 0;
}
.historyThumb {
  position: relative;
  width: 46vw;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 8vw 0 0 !important;
}
.historyPopup {
  z-index: 3;
  font-size: 3.0vw;
  line-height: 1.33;
  position: relative;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

.historyArea .historyItem.history01 .historyPopup {
  width: 72.5vw;
  height: 44.26vw;
  background: url(../images/history/bg_history_popup01_sp.png) left top no-repeat;
  background-size: 100%;
  left: 0;
  top: 0;
  padding: 0 1vw 14.8vw 28.8vw;
  margin-top: -12.4vw;
}

.historyArea .historyItem.history02 .historyPopup {
  width: 72.5vw;
  height: 44.26vw;
  background: url(../images/history/bg_history_popup02_sp.png) left top no-repeat;
  background-size: 100%;
  left: 0;
  top: 0;
  padding: 0 1vw 14.8vw 28.8vw;
  margin-top: -8.4vw;
}


.historyArea .historyItem.history03 .historyPopup {
  width: 72.5vw;
  height: 44.26vw;
  background: url(../images/history/bg_history_popup03_sp.png) left top no-repeat;
  background-size: 100%;
  left: 0;
  top: 0;
  padding: 0 1vw 14.8vw 28.8vw;
  margin-top: -7.6vw;
}

.historyArea .historyItem.history04 {
  padding-bottom: 0;
}
.historyArea .historyItem.history04 .historyPopup {
 width: 72.5vw;
  height: 41.6vw;
  background: url(../images/history/bg_history_popup04_sp.png) left top no-repeat;
  background-size: 100%;
  left: 0;
  top: 0;
  padding: 0 1vw 12.4vw 28.8vw;
  margin-top: -10.2vw;
}

.historyArea .historyItem .hd04 {
  font-size: 3.73vw;
  line-height: 1.42;
  margin-bottom: 1.33vw;
}
.historyArea .historyItem p + p {
  margin-top: 8px;
}
.historyArea .historyItem .spview {
  padding-left: 25.6vw;
}
.historyArea .historyItem .btnLink02 {
  width: 28vw;
  margin: 0;
}
  .historyArea .historyItem .btnLink02 span {
    height: 6.9vw;
    background-position: right 2vw center;
}
.aboutNoteArea .noteImg {
  left: 4vw;
  top: 50%;
  transform: translateY(-50%);
  width: 25vw;
}
  
  
.historyPop {
    width: 92vw;
    box-sizing: border-box;
    padding: 4.26vw 5.33vw 21.7vw;
    background: #faf5f5;
    position: relative;
  }
.historyPop .hd04 {
    text-align: center;
  font-size: 3.73vw;
  line-height: 1.6;
  margin-bottom: 2vw;
  }
.historyPop p + p {
  margin-top: 1em;
  }
  
.historyPop .popupClose {
    position: absolute;
    left: 50%;
    margin-left: -5vw;
    width: 10vw;
    height: 10vw;
    bottom: 4vw;
    z-index: 2;
  }

}