@charset "UTF-8";
#twenty-anniv {
  font-family: "San Francisco", "Arial", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Sans-Serif;
}
#twenty-anniv-history .c-section-title {
  background: url(../images/twenty-anniversary/title-history.svg) center 0 no-repeat;
}
#twenty-anniv-voice .c-section-title {
  background: url(../images/twenty-anniversary/title-voice.svg) center 0 no-repeat;
}
#twenty-anniv-event .c-section-title {
  background: url(../images/twenty-anniversary/title-event.svg) center 0 no-repeat;
}
#twenty-anniv-history .c-section-title, #twenty-anniv-voice .c-section-title, #twenty-anniv-event .c-section-title {
  background-size: auto 13rem;
}
#twenty-anniv-history .f_sf-ui, #twenty-anniv-voice .f_sf-ui, #twenty-anniv-event .f_sf-ui {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 3rem;
}
#twenty-anniv .l_continar {
  max-width: 96rem;
  width: 90%;
  margin: auto;
}

#twenty-anniv-history,
#twenty-anniv-event {
  background-color: #fafafa;
}

/* =========================
  セクションタイトル
========================= */
.c-section-title {
  line-height: 13rem;
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  margin-bottom: 5rem;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  min-height: 13rem;
}

@media screen and (max-width: 767px) {
  #twenty-anniv .c-section-title {
    line-height: 9rem;
    margin-bottom: 3.2rem;
    background-size: contain;
    background-position: center top;
    min-height: 9rem;
  }
}
/* =========================
  共通アニメーション
========================= */
.fade-in {
  opacity: 0;
  transform: translateY(6rem);
  transition: opacity 0.8s ease-out, transform 1s ease-out;
  -webkit-transition: opacity 0.8s ease-out, transform 1s ease-out;
  -moz-transition: opacity 0.8s ease-out, transform 1s ease-out;
  -ms-transition: opacity 0.8s ease-out, transform 1s ease-out;
  -o-transition: opacity 0.8s ease-out, transform 1s ease-out;
  -webkit-transform: translateY(6rem);
  -moz-transform: translateY(6rem);
  -ms-transform: translateY(6rem);
  -o-transform: translateY(6rem);
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}