:root {
  --txtBase: #212029;
  --txtGray: #6c6971;
  --gray: #ccc;
  --lightGray: #f2f2f2;
  --purple: #b06bbe;
  --lightPurple: #f8eafa;
  --red: #e28477;
  --lightRed: #fdefed;
  --blue: #4c86c5;
  --lightBlue: #e7f4fa;
  --gold: #9d7900;
  --lightGold: #fcfcdd;
  --green: #5db15b;
  --lightGreen: #edfded;
  --orange: #e5821c;
  --lightOrange: #fcf5e7;
  --productBorderLightPurple: #eccef0;
  --productBgLightPurple: #fefaff;
  --productBlue: #4580C2;
  --productGray: #484848;
  --productLightGray: #fcfcfc;
  --productBorderGray: #d7d7d7;
}

#history .txt {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.45px;
  line-height: 30px;
}
@media screen and (max-width: 768px) {
  #history .txt {
    font-size: 12px;
    letter-spacing: 0.29px;
    line-height: 26px;
  }
}
#history .--large.txt {
  font-size: 32px;
}
@media screen and (max-width: 768px) {
  #history .--large.txt {
    font-size: 26px;
  }
}
#history .--medium.txt {
  font-size: 18px;
}
@media screen and (max-width: 768px) {
  #history .--medium.txt {
    font-size: 15px;
  }
}
#history .--small.txt {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
}
@media screen and (max-width: 768px) {
  #history .--small.txt {
    font-size: 12px;
  }
}
#history .--light.txt {
  font-weight: 300;
}
#history .--bold.txt {
  font-weight: 700;
}
#history .--indent.txt {
  text-indent: -1em;
  padding-left: 1em;
}
#history .--strech.txt {
  flex: 1;
}
#history .--fitHeight.txt {
  height: fit-content;
}
#history .--fitWidth.txt {
  width: fit-content;
}
#history .--txtCenter.txt {
  text-align: center;
}
#history .--txtBase.txt {
  color: #212029;
}
#history .--txtGray.txt {
  color: #6c6971;
}
#history .--gray.txt {
  color: #ccc;
}
#history .--lightGray.txt {
  color: #f2f2f2;
}
#history .--purple.txt {
  color: #b06bbe;
}
#history .--lightPurple.txt {
  color: #f8eafa;
}
#history .--red.txt {
  color: #e28477;
}
#history .--lightRed.txt {
  color: #fdefed;
}
#history .--blue.txt {
  color: #4c86c5;
}
#history .--lightBlue.txt {
  color: #e7f4fa;
}
#history .--gold.txt {
  color: #9d7900;
}
#history .--lightGold.txt {
  color: #fcfcdd;
}
#history .--green.txt {
  color: #5db15b;
}
#history .--lightGreen.txt {
  color: #edfded;
}
#history .--orange.txt {
  color: #e5821c;
}
#history .--lightOrange.txt {
  color: #fcf5e7;
}
#history .--productBorderLightPurple.txt {
  color: #eccef0;
}
#history .--productBgLightPurple.txt {
  color: #fefaff;
}
#history .--productBlue.txt {
  color: #4580C2;
}
#history .--productGray.txt {
  color: #484848;
}
#history .--productLightGray.txt {
  color: #fcfcfc;
}
#history .--productBorderGray.txt {
  color: #d7d7d7;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
}

.common_width_small {
  max-width: 935px;
}

.pageHeader {
  padding-bottom: 66px;
  border-bottom: 1px solid #6c6971;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .pageHeader {
    padding-bottom: 47px;
    margin-bottom: 73px;
  }
}

.pageTitleArea {
  text-align: center;
  margin-bottom: 140px;
}
@media screen and (max-width: 768px) {
  .pageTitleArea {
    text-align: start;
    margin-bottom: 67px;
  }
}
.pageTitleArea .pageTitle {
  color: var(--purple);
  font-size: 32px;
  letter-spacing: 1.66px;
  line-height: 47px;
  margin-bottom: 38px;
}
@media screen and (max-width: 768px) {
  .pageTitleArea .pageTitle {
    font-size: 24px;
    letter-spacing: 1.25px;
    line-height: 34px;
    margin-bottom: 25px;
  }
}
.pageTitleArea .pageSubTitle {
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.45px;
  font-weight: 300;
}
@media screen and (max-width: 768px) {
  .pageTitleArea .pageSubTitle {
    font-size: 12px;
    letter-spacing: 0.29px;
    line-height: 26px;
  }
}

#history {
  padding-bottom: 118px;
}
#history .sec:not(:last-child) {
  margin-bottom: 100px;
}
#history .secTitle {
  color: var(--purple);
  font-size: 32px;
  letter-spacing: 1.5px;
  line-height: 43px;
  margin-bottom: 30px;
  padding-left: 27px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #history .secTitle {
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 1.13px;
    margin-bottom: 35px;
    padding-left: 21px;
  }
}
#history .secTitle::before {
  background: #fff;
  border: 4px solid var(--purple);
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 15px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 15px;
}
@media screen and (max-width: 768px) {
  #history .secTitle::before {
    border: 3px solid var(--purple);
    height: 13px;
    margin: 9px 0 0 0;
    width: 13px;
  }
}

.linkBtn {
  border-bottom: 1px solid var(--purple);
  color: var(--purple);
  display: flex;
  gap: 17px;
  padding: 4px;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .linkBtn {
    gap: 10px;
  }
}

.inPageLinkWrap {
  display: flex;
  font-family: "Roboto Serif";
  font-size: 24px;
  justify-content: center;
  line-height: 34px;
  letter-spacing: 1.39px;
  gap: 38px;
  margin-bottom: 94px;
}
@media screen and (max-width: 768px) {
  .inPageLinkWrap {
    font-size: 22px;
    line-height: 25px;
    letter-spacing: 1.28px;
    gap: initial;
    justify-content: space-between;
  }
}

.period {
  margin-bottom: 127px;
  margin-top: -135px;
  padding-top: 135px;
}
@media screen and (max-width: 768px) {
  .period {
    margin-bottom: 130px;
    margin-top: -128px;
    padding-top: 128px;
  }
}
.period .periodInn {
  text-align: center;
}
.period .periodInn.--blue {
  color: var(--blue);
}
.period .periodInn.--purple {
  color: var(--purple);
}
.period .periodInn .periodEnTitle {
  font-family: "Roboto Serif";
  font-size: 30px;
  line-height: 35px;
  letter-spacing: 1.5px;
  margin-bottom: 3px;
}
@media screen and (max-width: 768px) {
  .period .periodInn .periodEnTitle {
    font-size: 23px;
    line-height: 27px;
    letter-spacing: 1.15px;
    margin-bottom: 14px;
  }
}
.period .periodInn .periodYear {
  font-family: "Roboto Serif";
  font-size: 76px;
  font-weight: 400;
  line-height: 89px;
  letter-spacing: 4.41px;
  margin-bottom: 22px;
}
@media screen and (max-width: 768px) {
  .period .periodInn .periodYear {
    font-size: 43px;
    line-height: 50px;
    letter-spacing: 2.49px;
    margin-bottom: 14px;
  }
}
.period .periodInn .periodJpTitle {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.94px;
  margin-bottom: 44px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .period .periodInn .periodJpTitle {
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.78px;
    margin-bottom: 32px;
  }
}
.period .periodInn .periodJpTitle::before {
  background: transparent;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 12px;
  left: -23px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 12px;
}
@media screen and (max-width: 768px) {
  .period .periodInn .periodJpTitle::before {
    height: 9px;
    left: -15px;
    width: 9px;
  }
}
.period .periodInn .periodJpTitle.--blue::before {
  border: 3px solid var(--blue);
}
@media screen and (max-width: 768px) {
  .period .periodInn .periodJpTitle.--blue::before {
    border: 2px solid var(--blue);
  }
}
.period .periodInn .periodJpTitle.--purple::before {
  border: 3px solid var(--purple);
}
@media screen and (max-width: 768px) {
  .period .periodInn .periodJpTitle.--purple::before {
    border: 2px solid var(--purple);
  }
}

.eventsWrap {
  background-position: center top;
  background-repeat: repeat-y;
  background-size: auto;
}
@media screen and (max-width: 768px) {
  .eventsWrap {
    background-position: left top;
  }
}
.eventsWrap.--blue {
  background-image: url("../../../img/history/dot_blue.svg");
}
.eventsWrap.--purple {
  background-image: url("../../../img/history/dot_purple.svg");
}
.eventsWrap .eventsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0 90px;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow {
    flex-direction: column;
  }
}
.eventsWrap .eventsRow .eventsRowInn {
  width: calc((100% - 90px) / 2);
}
.eventsWrap .eventsRow .thisYearEvents {
  margin: 0 0 44px 0;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents {
    margin: 0 0 0 35px;
  }
}
.eventsWrap .eventsRow .thisYearEvents.--down {
  margin-top: 25px;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents.--down {
    margin-top: 0;
  }
}
.eventsWrap .eventsRow .thisYearEvents .year {
  font-family: "Roboto Serif";
  font-size: 34px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: 2.72px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .year {
    font-size: 23px;
    line-height: 30px;
    letter-spacing: 1.84px;
  }
}
.eventsWrap .eventsRow .thisYearEvents .year::before {
  content: "";
  height: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .year::before {
    width: 9px;
  }
}
.eventsWrap .eventsRow .thisYearEvents .year.--blue {
  color: var(--blue);
}
.eventsWrap .eventsRow .thisYearEvents .year.--blue::before {
  background-color: var(--blue);
}
.eventsWrap .eventsRow .thisYearEvents .year.--purple {
  color: var(--purple);
}
.eventsWrap .eventsRow .thisYearEvents .year.--purple::before {
  background-color: var(--purple);
}
.eventsWrap .eventsRow .thisYearEvents .year.--left {
  text-align: right;
  margin: 0 13.5px 4px 0;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .year.--left {
    text-align: left;
    margin: 0 0 7.2px 9.3px;
  }
}
.eventsWrap .eventsRow .thisYearEvents .year.--left::before {
  right: -26.5px;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .year.--left::before {
    left: -18.3px;
    right: initial;
  }
}
.eventsWrap .eventsRow .thisYearEvents .year.--right {
  text-align: left;
  margin: 0 0 4px 13.5px;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .year.--right {
    margin: 0 0 7.2px 9.3px;
  }
}
.eventsWrap .eventsRow .thisYearEvents .year.--right::before {
  left: -26.5px;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .year.--right::before {
    left: -18.3px;
  }
}
.eventsWrap .eventsRow .thisYearEvents .event {
  margin-bottom: 24px;
}
.eventsWrap .eventsRow .thisYearEvents .event .eventName {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.43px;
  padding: 5px 9px;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .event .eventName {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.38px;
  }
}
.eventsWrap .eventsRow .thisYearEvents .event .eventName.--blue {
  background-color: var(--lightBlue);
  color: var(--blue);
}
.eventsWrap .eventsRow .thisYearEvents .event .eventName.--purple {
  background-color: var(--lightPurple);
  color: var(--purple);
}
.eventsWrap .eventsRow .thisYearEvents .event .eventName.--left {
  text-align: left;
}
.eventsWrap .eventsRow .thisYearEvents .event .eventName.--notHasBg {
  background-color: initial;
  padding: 0;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .event .eventName.--notHasBg {
    text-align: left;
  }
}
.eventsWrap .eventsRow .thisYearEvents .event .eventTxt {
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0.7px;
  margin-bottom: 16px;
}
.eventsWrap .eventsRow .thisYearEvents .event .eventImgWrap.--row {
  display: flex;
  gap: 21px;
}
.eventsWrap .eventsRow .thisYearEvents .event .eventImgWrap .eventImg {
  margin-bottom: 20px;
  max-width: 416px;
}
@media screen and (max-width: 768px) {
  .eventsWrap .eventsRow .thisYearEvents .event .eventImgWrap .eventImg {
    margin-bottom: 24px;
  }
}
.eventsWrap .eventsRow .thisYearEvents .event .eventImgWrap .eventImg .eventImgCaption {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 28px;
  letter-spacing: 0.36px;
}
.eventsWrap .eventsRow .thisYearEvents .event .eventImgWrap .eventImg .eventImgCaption.--blue {
  color: var(--blue);
}
.eventsWrap .eventsRow .thisYearEvents .event .eventImgWrap .eventImg .eventImgCaption.--purple {
  color: var(--purple);
}
.eventsWrap .eventsRow .thisYearEvents .event :last-child {
  margin-bottom: 0;
}

.historyOfLogo {
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .historyOfLogo {
    display: none;
  }
}
.historyOfLogo.--lpg {
  left: 5%;
}
.historyOfLogo.--fujigas {
  right: 5%;
}

.gradation {
  background: rgb(252, 227, 255);
  background: linear-gradient(0deg, rgb(252, 227, 255) 0%, rgb(255, 255, 255) 100%);
  height: 163px;
  position: absolute;
  width: 100%;
  z-index: -2;
}
@media screen and (max-width: 768px) {
  .gradation {
    display: none;
  }
}