@charset "UTF-8";

/* NTTComの歴史 */
a:hover {
  opacity: 1;
  color: #FED33E;
}

.is-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .is-pc {
    display: none;
  }
  .is-sp {
    display: block;
  }
}

._intro {
  background: linear-gradient(120deg,rgba(254,211,62,1) 0%,rgba(255,186,0,1) 100%);
}
._intro ._intro-wrapper {
  max-width: 1060px;
  padding: 60px 0;
  margin: 0 auto;
}

._intro ._intro-txt {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
  color: #1C1C1C;
}
@media screen and (max-width: 768px) {
  ._intro ._intro-wrapper {
    padding: 70px 20px 90px;
  }
  ._intro ._intro-txt {
    font-size: 16px;
    text-align: left;
    line-height: 2;
  }
}

.page-history .history {
  padding: 100px 0 0;
  background: linear-gradient(180deg,rgba(43,119,185,1) 0%,rgba(0,88,121,1) 10%,rgba(0,112,121,1) 20%,rgba(0,65,121,1) 30%,rgba(0,88,121,1) 40%,rgba(0,112,121,1) 50%,rgba(0,65,121,1) 60%,rgba(43,119,185,1) 70%,rgba(0,88,121,1) 80%,rgba(0,112,121,1) 90%,rgba(0,65,121,1) 100%);
}

.page-history .history-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
}
/* SP版 */
@media screen and (max-width: 768px) {
  .page-history .history {
    padding: 0 0 0;
    background: linear-gradient(180deg,rgba(43,119,185,1) 0%,rgba(0,88,121,1) 10%,rgba(0,112,121,1) 20%,rgba(0,65,121,1) 30%,rgba(0,88,121,1) 40%,rgba(0,112,121,1) 50%,rgba(0,65,121,1) 60%,rgba(43,119,185,1) 70%,rgba(0,88,121,1) 80%,rgba(0,112,121,1) 90%,rgba(0,65,121,1) 100%);
  }

  .page-history .history-wrapper {
    max-width: 100%;
    margin: 0 20px;
    display: block;
  }

}


/* 年表サイドバー */
.page-history .timeBar {
  font-family: "Lato", serif;
  font-size: 14px;
  font-weight: bold;
  width: 235px;
  margin-left: 20px;
  position: sticky;
  top: 250px;
}
.page-history .timeBar-list {
  padding: 22px 92px 22px 22px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
  
.page-history .timeBar .circle {
  width: 11px;
  height: 11px;
  margin-right: 10px;
  border: solid 1px #C9C9C9;
  border-radius: 6px;
  position: relative;
}
.page-history .timeBar .timeBar-list::after {
  content: "";
  width: 1px;
  height: 39px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 44px;
  left: 27px;
}
.page-history .timeBar .timeBar-list:last-child::after {
  display: none;
}
.page-history .timeBar .dot {
  width: 3px;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  top: 3px;
  left: 3px;
}
/* now カレント */
.page-history .timeBar .label {
  color: #fff;
}
.page-history .now {
  font-size: 20px;
}
.page-history .now .dot {
  width: 5px;
  height: 5px;
  background-color: #FED33E;
  border-radius: 3px;
  position: absolute;
  top: 2px;
  left: 2px;
}
.page-history .now .label {
  color: #FED33E;
}
@media screen and (max-width: 768px) {
  .page-history .timeBar-sp {
    width: 100%;
    font-family: "Lato", serif;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 30px 0;
    padding: 0 20px;
    background: linear-gradient(120deg,rgba(13,69,160,1),rgba(0,28,80,1) 100%);
    display: inline-flex;
    white-space: nowrap;
    overflow-x: scroll;
    position: sticky;
    top: 160px;
    z-index: 1000;
  }
  .page-history .timeBar-list {
    padding: 22px 0;
    margin-right: 46px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
    
  .page-history .timeBar-sp .circle {
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border: solid 1px #C9C9C9;
    border-radius: 6px;
    position: relative;
  }
  .page-history .timeBar-sp .timeBar-list::after {
    content: "";
    width: 21px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 32px;
    left: 100px;
  }
  .page-history .timeBar-sp .timeBar-list:last-child::after {
    display: none;
  }
  .page-history .timeBar-sp .dot {
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    top: 3px;
    left: 3px;
  }
  .page-history .timeBar-sp .label {
    color: #fff;
  }

  /* now カレント */
.page-history .timeBar .label {
  color: #fff;
}
.page-history .now {
  font-size: 14px;
}
.page-history .now .dot {
  width: 5px;
  height: 5px;
  background-color: #FED33E;
  border-radius: 3px;
  position: absolute;
  top: 2px;
  left: 2px;
}
.page-history .now .label {
  color: #FED33E;
}

}


.page-history .historyEvent-wrap {
  max-width: 920px;
  margin: 0 110px 0 auto;
} 
@media screen and (max-width: 768px) {
  .page-history .historyEvent-wrap {
    max-width: 100%;
    margin: 0 20px;
  } 
}

/* センターライン */
.centerline {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .centerline {
    left: 24px;
  }
}
/* IEのみセンターライン変更 */
@media all and (-ms-high-contrast: none){
  .centerline {
    display: none;
  }
}

/* 歴史エピック*/
.page-history .epic-tit {
  width: 920px;
  height: 215px;
  box-sizing: border-box;
  padding: 40px 102px;
  border-radius: 10px;
  text-align: center;
  background: linear-gradient(120deg,rgba(13,69,160,1),rgba(0,28,80,1) 100%);
  position: relative;
}
.page-history .epic-tit2 {
  width: 920px;
  height: 215px;
  box-sizing: border-box;
  padding: 22px 118px;
  border-radius: 10px;
  text-align: center;
  background: linear-gradient(120deg,rgba(13,69,160,1),rgba(0,28,80,1) 100%);
  position: relative;
}
.page-history .timeline {
  display: inline-block;
  font-family: "Lato", serif;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 14px;
  margin: 13px 0 20px;
  border-radius: 15px;
  color: black;
  background: linear-gradient(120deg,rgba(254,211,62,1) 0%,rgba(255,186,0,1) 100%);
  position: relative;
}
.page-history .timeline::before {
  content: "";
  width: 15px;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 13px;
  left: 60px;
}
/* 2019- */
.page-history .epic-tit-wrap .time2019 {
  display: inline-block;
  font-family: "Lato", serif;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 40px;
  margin: 13px 0 20px;
  border-radius: 15px;
  color: black;
  background: linear-gradient(120deg,rgba(254,211,62,1) 0%,rgba(255,186,0,1) 100%);
  position: relative;
}
.page-history .epic-tit-wrap .time2019::before {
  content: "";
  width: 15px;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 13px;
  left: 90px;
}
.page-history .main {
  display: inline-block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.1;
  margin: 0 0 10px;
  color: #FED33E;
}
.page-history .sub {
  display: inline-block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin: 10px 0 10px;
  color: #fff;
}

/* 歴史エピックタイトル　背景 */
.page-history .epic-tit .bg-txt,
.page-history .epic-tit2 .bg-txt {
  font-family: "Lato", serif;
  font-size: 108px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 8px;
  white-space: nowrap;
  position: absolute;
  top: 53px;
  left: 91px;
}
.page-history .epic-tit .bg-txt::before,
.page-history .epic-tit2 .bg-txt::before {
  content: "";
  width: 90px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 50px;
  left: 324px;
}
.page-history .epic-tit .bg-2019 {
  font-family: "Lato", serif;
  font-size: 108px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 8px;
  white-space: nowrap;
  position: absolute;
  top: 53px;
  left: 258px;
}
.page-history .epic-tit .bg-2019::before {
  content: "";
  width: 90px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 50px;
  left: 324px;
}


/* SP版 */
@media screen and (max-width: 768px) {
  .page-history .epic-tit {
    width: 100%;
    height: auto;
    padding: 30px 20px 26px 20px;
    margin: 0 0 0;
  }
  .page-history .epic-tit2 {
    width: 100%;
    height: auto;
    padding: 30px 20px;
  }
  .page-history .timeline {
    display: inline-block;
    font-family: "Lato", serif;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 9px;
    margin: 0 0;
  }
  .page-history .timeline::before {
    width: 9px;
    top: 7px;
    left: 38px;
  }
  .page-history .epic-tit-wrap .time2019 {
    font-size: 11px;
    padding: 4px 20px 4px 15px;
    margin: 0 0;
  }
  .page-history .epic-tit-wrap .time2019::before {
    width: 9px;
    top: 9px;
    left: 43px;
  }
  .page-history .main {
    font-size: 21px;
    margin: 10px 0 4px 0;
  }
  .page-history .sub {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0;
  }
/* 歴史エピックタイトル　背景 */
  .page-history .epic-tit .bg-txt,
  .page-history .epic-tit2 .bg-txt {
    font-family: "Lato", serif;
    font-size: 49px;
    letter-spacing: 1px;
    top: calc( 50% - 25px );
    left: calc( 50% - 153px );
  }
  .page-history .epic-tit .bg-txt::before,
  .page-history .epic-tit2 .bg-txt::before,
  .page-history .epic-tit .bg-2019::before {
    content: "";
    width: 32px;
    height: 3px;
    top: 26px;
    left: 137px;
  }
  .page-history .epic-tit .bg-2019 {
    font-family: "Lato", serif;
    font-size: 49px;
    letter-spacing: 1px;
    top: calc( 50% - 25px );
    left: calc( 50% - 89px );
  }

}


/* イベント　メッセージ */
.page-history .event {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.page-history .pivot {
  width: 64px;
  height: 64px;
  border-radius: 35px;
  background: linear-gradient(180deg,rgba(254,211,62,1),rgba(255,186,0,1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-history .pivot-num {
  font-family: "Lato", serif;
  font-size: 14px;
  font-weight: bold;
  color: #0E367D;
}
.page-history .event-message {
  width: 400px;
  padding: 20px;
  background-color: #E6EEF2;
  border-radius: 10px;
}

@media screen and (max-width: 768px) { 
  .page-history .event {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .page-history .pivot {
    max-width: 51px;
    max-height: 51px;
    margin: 0 26px 0 0;
  }
  .page-history .pivot-num {
    font-size: 11px;
  }
  .page-history .event-message {
    width: calc(100% - 26px);
  }
}



/* 各イベント余白調整　PC版 */
.page-history .event {
  margin: 0 0 54px;
}
/* Epic01  1999-2002*/
.page-history .epNo01 { margin: 54px 0 54px 0; }
.page-history .epNo03 { margin: 0 0 360px 0; }
.page-history .epNo05 { margin: 0 0 60px 0; }
.page-history .epNo06 { margin: 0 0 140px 0; }
.page-history .epNo07 { margin: 0 0 110px 0; }
.page-history .epNo08 { margin: 0 0 100px 0; }
.page-history .epNo09 { margin: 0 0 240px 0; }
.page-history .epNo10 { margin: 0 0 60px 0; }
.page-history .epNo11 { margin: 0 0 250px 0; }
/* Epic02 2003-2005*/
.page-history .epNo12 { margin: 54px 0 30px 0; }
.page-history .epNo13 { margin: 0 0 140px 0; }
.page-history .epNo14 { margin: 0 0 30px 0; }
.page-history .epNo15 { margin: 0 0 60px 0; }
.page-history .epNo16 { margin: 0 0 70px 0; }
.page-history .epNo17 { margin: 0 0 120px 0; }
.page-history .epNo18 { margin: 0 0 280px 0; }
.page-history .epNo21 { margin: 0 0 250px 0; }
/* Epic03 2006-2008*/
.page-history .epNo22 { margin: 60px 0 54px 0; }
.page-history .epNo23 { margin: 0 0 10px 0; }
.page-history .epNo24 { margin: 0 0 90px 0; }
.page-history .epNo25 { margin: 0 0 100px 0; }
.page-history .epNo27 { margin: 0 0 30px 0; }
.page-history .epNo28 { margin: 0 0 120px 0; }
.page-history .epNo29 { margin: 0 0 30px 0; }
.page-history .epNo30 { margin: 0 0 170px 0; }
.page-history .epNo31 { margin: 0 0 10px 0; }
.page-history .epNo32 { margin: 0 0 30px 0; }
.page-history .epNo33 { margin: 0 0 280px 0; }
.page-history .epNo35 { margin: 0 0 540px 0; }
/* Epic04 2009-2010*/
.page-history .epNo36 { margin: 60px 0 54px 0; }
.page-history .epNo39 { margin: 0 0 50px 0; }
.page-history .epNo40 { margin: 0 0 270px 0; }
.page-history .epNo41 { margin: 0 0 30px 0; }
.page-history .epNo42 { margin: 0 0 360px 0; }
.page-history .epNo43 { margin: 0 0 10px 0; }
.page-history .epNo44 { margin: 0 0 360px 0; }
.page-history .epNo45 { margin: 0 0 370px 0; }
.page-history .epNo46 { margin: 0 0 60px 0; }
/* Epic05 2011-2015*/
.page-history .epNo47 { margin: 60px 0 10px 0; }
.page-history .epNo48 { margin: 0 0 460px 0; }
.page-history .epNo50 { margin: 0 0 10px 0; }
.page-history .epNo51 { margin: 0 0 130px 0; }
.page-history .epNo52 { margin: 0 0 30px 0; }
.page-history .epNo53 { margin: 0 0 270px 0; }
.page-history .epNo54 { margin: 0 0 10px 0; }
.page-history .epNo55 { margin: 0 0 100px 0; }
.page-history .epNo56 { margin: 0 0 130px 0; }
.page-history .epNo57 { margin: 0 0 10px 0; }
.page-history .epNo58 { margin: 0 0 290px 0; }
.page-history .epNo59 { margin: 0 0 100px 0; }
.page-history .epNo60 { margin: 0 0 30px 0; }
.page-history .epNo61 { margin: 0 0 410px 0; }
.page-history .epNo62 { margin: 0 0 10px 0; }
.page-history .epNo63 { margin: 0 0 520px 0; }
.page-history .epNo64 { margin: 0 0 10px 0; }
.page-history .epNo65 { margin: 0 0 50px 0; }
.page-history .epNo66 { margin: 0 0 180px 0; }
.page-history .epNo67 { margin: 0 0 130px 0; }
.page-history .epNo68 { margin: 0 0 10px 0; }
.page-history .epNo69 { margin: 0 0 80px 0; }
.page-history .epNo70 { margin: 0 0 10px 0; }
.page-history .epNo71 { margin: 0 0 180px 0; }
.page-history .epNo72 { margin: 0 0 180px 0; }
.page-history .epNo73 { margin: 0 0 250px 0; }
.page-history .epNo74 { margin: 0 0 60px 0; }
.page-history .epNo75 { margin: 0 0 30px 0; }
.page-history .epNo76 { margin: 0 0 30px 0; }
.page-history .epNo77 { margin: 0 0 140px 0; }
.page-history .epNo78 { margin: 0 0 140px 0; }
.page-history .epNo79 { margin: 0 0 30px 0; }
.page-history .epNo80 { margin: 0 0 180px 0; }
.page-history .epNo81 { margin: 0 0 10px 0; }
.page-history .epNo82 { margin: 0 0 130px 0; }
/* Epic06 2016-2018*/
.page-history .epNo83 { margin: 60px 0 360px 0; }
.page-history .epNo85 { margin: 0 0 370px 0; }
.page-history .epNo87 { margin: 0 0 20px 0; }
.page-history .epNo88 { margin: 0 0 250px 0; }
.page-history .epNo89 { margin: 0 0 80px 0; }
.page-history .epNo90 { margin: 0 0 10px 0; }
.page-history .epNo91 { margin: 0 0 260px 0; }
.page-history .epNo92 { margin: 0 0 150px 0; }
.page-history .epNo93 { margin: 0 0 250px 0; }
.page-history .epNo94 { margin: 0 0 190px 0; }
.page-history .epNo95 { margin: 0 0 220px 0; }
.page-history .epNo96 { margin: 0 0 10px 0; }
.page-history .epNo97 { margin: 0 0 150px 0; }
.page-history .epNo99 { margin: 0 0 20px 0; }
.page-history .epNo100 { margin: 0 0 420px 0; }
.page-history .epNo101 { margin: 0 0 80px 0; }
.page-history .epNo102 { margin: 0 0 30px 0; }
.page-history .epNo103 { margin: 0 0 10px 0; }
.page-history .epNo104 { margin: 0 0 350px 0; }
.page-history .epNo105 { margin: 0 0 110px 0; }
.page-history .epNo106 { margin: 0 0 10px 0; }
.page-history .epNo107 { margin: 0 0 290px 0; }
.page-history .epNo108 { margin: 0 0 100px 0; }
.page-history .epNo109 { margin: 0 0 10px 0; }
.page-history .epNo110 { margin: 0 0 50px 0; }
.page-history .epNo111 { margin: 0 0 30px 0; }
.page-history .epNo112 { margin: 0 0 40px 0; }
.page-history .epNo113 { margin: 0 0 220px 0; }
/* Epic07 2019-*/
.page-history .epNo114 { margin: 60px 0 30px 0; }
.page-history .epNo115 { margin: 0 0 390px 0; }
.page-history .epNo116 { margin: 0 0 110px 0; }
.page-history .epNo117 { margin: 0 0 210px 0; }
.page-history .epNo118 { margin: 0 0 180px 0; }
.page-history .epNo119 { margin: 0 0 80px 0; }
.page-history .epNo120 { margin: 0 0 320px 0; }
.page-history .epNo121 { margin: 0 0 120px 0; }
.page-history .epNo122 { margin: 0 0 160px 0; }
.page-history .epNo123 { margin: 0 0 120px 0; }
.page-history .epNo124 { margin: 0 0 20px 0; }
.page-history .epNo125 { margin: 0 0 180px 0; }
.page-history .epNo126 { margin: 0 0 140px 0; }
.page-history .epNo127 { margin: 0 0 340px 0; }
.page-history .epNo128 { margin: 0 0 70px 0; }
.page-history .epNo129 { margin: 0 0 50px 0; }
.page-history .epNo130 { margin: 0 0 150px 0; }
.page-history .epNo131 { margin: 0 0 60px 0; }
.page-history .epNo132 { margin: 0 0 30px 0; }
.page-history .epNo133 { margin: 0 0 80px 0; }
.page-history .epNo134 { margin: 0 0 10px 0; }
.page-history .epNo135 { margin: 0 0 70px 0; }
.page-history .epNo136 { margin: 0 0 260px 0; }
.page-history .epNo137 { margin: 0 0 60px 0; }
.page-history .epNo138 { margin: 0 0 150px 0; }
.page-history .epNo139 { margin: 0 0 110px 0; }
.page-history .epNo140 { margin: 0 0 20px 0; }
.page-history .epNo141 { margin: 0 0 380px 0; }
.page-history .epNo142 { margin: 0 0 360px 0; }
.page-history .epNo143 { margin: 0 0 60px 0; }
.page-history .epNo144 { margin: 0 0 30px 0; }
.page-history .epNo145 { margin: 0 0 60px 0; }
.page-history .epNo146 { margin: 0 0 30px 0; }
.page-history .epNo147 { margin: 0 0 80px 0; }
.page-history .epNo148 { margin: 0 0 100px 0; }
.page-history .epNo149 { margin: 0 0 310px 0; }
.page-history .epNo150 { margin: 0 0 56px 0; }

@media screen and (max-width: 768px) { 
  /* 各イベント余白調整　SP版 */
  .page-history .event { 
    margin: 36px 0 0;
  }
  .page-history .epNo11 { margin: 36px 0 36px; }
  .page-history .epNo21 { margin: 36px 0 36px; }
  .page-history .epNo35 { margin: 36px 0 36px; }
  .page-history .epNo46 { margin: 36px 0 36px; }
  .page-history .epNo82 { margin: 36px 0 36px; }
  .page-history .epNo113 { margin: 36px 0 36px; }
  .page-history .epNo150 { margin: 36px 0 36px; }
}



/* event-message 吹き出し三角 */
.triangle, .triangle::before, .triangle::after { 
  width: 17px;
  height: 17px;
}
.page-history .event-message .trans-right {
  transform: rotate(-90deg);
  position: absolute;
  top: 10px;
  left: -12px;
}
.page-history .event-message .trans-left {
  transform: rotate(90deg);
  position: absolute;
  top: 10px;
  right: -12px;
}
.triangle {
  overflow: hidden;
  background-color: transparent;
  position: relative;
  margin: 0 auto;
  border-radius: 20%;
  transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
} 
.triangle:before, 
.triangle:after {
  position: absolute;
  content: '';
}
.triangle::before {
  background-color: #E6EEF2;
  border-radius: 20% 20% 20% 53%;
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle::after {
  background-color: #E6EEF2;
  border-radius: 20% 20% 53% 20%;
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%);
}
@media screen and (max-width: 768px) { 
  .triangle::before {
    background-color: #E6EEF2;
  }
  .triangle::after {
    background-color: #E6EEF2;
  }
  .page-history .event-message .trans-right,
  .page-history .event-message .trans-left { 
    transform: rotate(-90deg);
    position: absolute;
    top: 10px;
    left: -12px;
    right: auto;
  }
}


/* 右サイド　イベント */
.page-history .msRight {
  position: absolute;
  top: 14px;
  right: 0px;
}
/* 左サイド　イベント */
.page-history .msLeft {
  position: absolute;
  top: 14px;
  left: 0px;
}
.page-history .event-tit {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: #0E367D;
  margin: 0 0 15px;
}
.page-history .event-txt {
  font-size: 13px;
  line-height: 1.8;
}
.page-history .event-gr {
  height: 100%;
  max-width: 920px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.page-history .yellow {
  background: linear-gradient(transparent 0%, #FED33E 0%)
}
@media screen and (max-width: 768px) { 
  .page-history .event-tit {
    font-size: 14px;
    line-height: 1.2;
    margin: 0 0 10px;
  }
  .page-history .event-txt {
    font-size: 11px;
    line-height: 1.5;
  }
/* 右サイド　イベント */
  .page-history .msRight,
  .page-history .msLeft {
    position: relative;
    top: 8px;
  }
}


/* TOPIC AWARD */
.page-history .award .event-message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  padding: 20px;
  background: linear-gradient(180deg,rgba(254,211,62,1) 0%,rgba(255,186,0,1) 100%);
  border-radius: 10px;
} 
.page-history .award .event-icon img {
  min-width: 59px;
  min-height: 59px;
  margin: 0 15px 0 0;
}
.page-history .award .event-txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #0E367D;
}

.page-history .award .triangle::before {
  background-color: #FED33E;
}
.page-history .award .triangle::after {
  background-color: #FED33E;
}
@media screen and (max-width: 768px) { 
  .page-history .award .event-message {
    width: 100%;
    padding: 15px;
  } 
  .page-history .award .event-icon img {
    min-width: 38px;
    min-height: 38px;
    margin: 0 0;
  }
  .page-history .award .event-txt {
    font-size: 14px;
    line-height: 1.2;
    margin-left: 10px;
  }
}
  


/* TOPIC LOGO */
.page-history .topic-logo .txt-wrap {
  display: flex;
  justify-content: space-between;
} 
.page-history .topic-logo .logo img {
  display: inline;
  padding: 23px 20px;
  max-width: 134px;
  background-color: #fff;
  border-radius: 5px;
} 
.page-history .topic-logo .logo2 img {
  display: inline;
  border-radius: 5px;
  max-width: 134px;
} 
.page-history .topic-logo .logo,
.page-history .topic-logo .logo2 {
  margin: 0 21px 0 0;
}
@media screen and (max-width: 768px) { 
  .page-history .topic-logo .txt-wrap {
    display: block;
  } 
  .page-history .topic-logo .logo img {
    display: inline;
    max-width: 111px;
    padding: 20px 16px;
    margin: 0 0 15px;
  } 
  .page-history .topic-logo .logo2 img {
    display: inline;
    border-radius: 5px;
    max-width: 111px;
    margin: 0 0 15px;
  } 
  .page-history .topic-logo .logo,
  .page-history .topic-logo .logo2 {
    margin: 0 21px 0 0;
  }
}


/*  NORMAL TOPIC */
.event .event-message .pic-large{
  margin: 0 0 15px 0;
}


/* SOCIAL TOPIC */
.page-history .topicSocial {
  padding: 40px 36px;
  background: linear-gradient(180deg,#1BA7A1,#007974 100%);
  border-radius: 10px;
  flex-wrap: nowrap;
  position: relative;
}
.page-history .topicSocial .pivot,
.page-history .topicContribution .pivot {
  width: 82px;
  height: 30px;
  margin: 0 30px 0 0;
  border: solid 1px #fff;
  border-radius: 15px;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-history .topicSocial .pivot-num,
.page-history .topicContribution .pivot-num {
  font-family: "Lato", serif;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.page-history .topicSocial .event-message,
.page-history .topicContribution .event-message {
  width: 100%;
  padding: 0 0;
  background: none
}
.page-history .topicSocial .event-tit,
.page-history .topicContribution .event-tit {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 15px;
}
.page-history .topicSocial .event-txt,
.page-history .topicContribution .event-txt {
  font-size: 14px;
  color: #fff;
}
.page-history .topicSocial .tag,
.page-history .topicContribution .tag {
  padding: 13px 14px 13px 18px;
  border-radius: 0 10px 0 10px;
  background: linear-gradient(180deg,rgba(254,211,62,1),rgba(255,186,0,1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
}
.page-history .topicSocial .tag-tit,
.page-history .topicContribution .tag-tit {
  font-family: Montserrat;
  font-size: 12px;
  margin: 0 0 0 8px;
}

/* CONTRIBUTION TOPIC */
.page-history .topicContribution {
  padding: 43px 36px 40px;
  background: linear-gradient(180deg,#B53828,#9A5C13 100%);
  border-radius: 10px;
  flex-wrap: nowrap;
  position: relative;
}
.page-history .topicContribution .icon {
  max-height: 15px;
}

@media screen and (max-width: 768px) { 
  /* SOCIAL TOPIC */
  .page-history .topicSocial {
    padding: 20px;
    margin: 46px 0 36px;
    flex-wrap: wrap;
  }
  .page-history .topicSocial .pivot,
  .page-history .topicContribution .pivot {
    width: 66px;
    height: 22px;
    margin: 0 0 12px 0;
  }
  .page-history .topicSocial .pivot-num,
  .page-history .topicContribution .pivot-num {
    font-size: 11px;
  }
  .page-history .topicSocial .event-tit,
  .page-history .topicContribution .event-tit {
    font-size: 14px;
  }
  .page-history .topicSocial .event-txt,
  .page-history .topicContribution .event-txt {
    font-size: 11px;
  }
  .page-history .topicSocial .tag,
  .page-history .topicContribution .tag {
    padding: 8px 12px;
  }
  .page-history .topicSocial .icon,
  .page-history .topicContribution .icon {
    width: 13px;
    height: 13px;
  }
  .page-history .topicSocial .tag-tit,
  .page-history .topicContribution .tag-tit {
    font-size: 10px;
    margin: 0 0 0 5px;
  }
    /* CONTRIBUTION TOPIC */
  .page-history .topicContribution {
    padding: 20px;
    margin: 46px 0 36px;
    background: linear-gradient(180deg,#B53828,#9A5C13 100%);
    flex-wrap: wrap;
  }
  .page-history .topicContribution .icon {
    width: 13px;
    height: 13px;
  }
}