@charset "UTF-8";
/* CSS Document */
/* 基本設定 */
/* 基本設定 */
/* --------------------------------------------------
	section size
-------------------------------------------------- */
/* 校歌・讃美歌 */
#page-header {
  padding-bottom: 19rem;
}
.song .sec-song {
  position: relative;
  margin-top: -7rem;
  padding-bottom: 15.5rem;
  overflow: hidden;
}
@media screen and (max-width: 520px) {
  .song .sec-song {
    padding-bottom: 10rem;
  }
}
.song .sec-song .flex {
  justify-content: center;
  gap: 0 3rem;
}
@media screen and (max-width: 520px) {
  .song .sec-song .flex {
    flex-wrap: wrap;
    gap: 6rem 0;
  }
}
.song .sec-song .flex .flex-cnts {
  width: calc((100% - 3rem) / 2);
  max-width: 60.9rem;
}
@media screen and (max-width: 520px) {
  .song .sec-song .flex .flex-cnts {
    width: 100%;
    max-width: inherit;
  }
}
.song .sec-song .flex .flex-cnts.-hymn .lyrics_box + .lyrics_box {
  margin-top: 6rem;
}
@media screen and (max-width: 520px) {
  .song .sec-song .flex .flex-cnts.-hymn .lyrics_box + .lyrics_box {
    margin-top: 3rem;
  }
}
.song .sec-song .song_ttl {
  position: relative;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: #f9f9ef;
  background: #66161c;
  margin-bottom: 4rem;
  border-radius: 0.2rem;
  box-sizing: border-box;
}
@media screen and (max-width: 520px) {
  .song .sec-song .song_ttl {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 3rem;
  }
}
.song .sec-song .song_ttl span {
  position: relative;
  display: inline-block;
  background: #66161c;
  padding: 0.8rem 4rem 1.1rem 1.8rem;
  z-index: 2;
}
@media screen and (max-width: 520px) {
  .song .sec-song .song_ttl span {
    padding: 0.8rem 2rem 1rem 1.2rem;
  }
}
.song .sec-song .song_ttl:after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(249, 249, 249, 0.21);
  z-index: 1;
}
.song .sec-song .music-wrap {
  margin: 0 auto 4rem auto;
}
@media screen and (max-width: 520px) {
  .song .sec-song .music-wrap {
    margin: 0 auto 2rem auto;
  }
}
@media screen and (max-width: 520px) {
  .song .sec-song .lyrics_box {
    width: 90%;
    margin: 0 auto;
  }
}
.song .sec-song .lyrics_box .num {
  color: #66161c;
  font-size: 3rem;
  line-height: 1.0666666667;
  letter-spacing: 0.025em;
  font-weight: 300;
}
@media screen and (max-width: 520px) {
  .song .sec-song .lyrics_box .num {
    font-size: 1.8rem;
    line-height: 1.4444444444;
    letter-spacing: 0.025em;
    font-weight: 300;
    margin-bottom: 0.5rem;
  }
}
.song .sec-song .lyrics_box .txt {
  color: #66161c;
  font-size: 1.8rem;
  line-height: 1.9444444444;
  letter-spacing: 0.05em;
  font-weight: 500;
}
@media screen and (max-width: 520px) {
  .song .sec-song .lyrics_box .txt {
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
}
.song .sec-song .lyrics_box [data-ruby] {
  position: relative;
}
.song .sec-song .lyrics_box [data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -1em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.5em;
  white-space: nowrap;
}
.song .sec-song .lyrics_box rt {
  display: none;
}
.song .sec-song .lyrics_box + .lyrics_box {
  margin-top: 3rem;
}
.song .sec-song .mejs__container {
  background: none;
  width: 49.7rem !important;
  height: 7.5rem !important;
  font-family: "Noto Sans JP", serif;
  color: #66161c;
  margin: 0 auto;
}
@media screen and (max-width: 520px) {
  .song .sec-song .mejs__container {
    width: 90% !important;
    min-width: inherit !important;
    height: 4.6rem !important;
  }
}
.song .sec-song .mejs__time {
  color: #66161c;
  font-size: 1.8rem;
  line-height: 1.7777777778;
  letter-spacing: 0.05em;
  font-weight: 500;
  height: auto;
  padding: 0;
}
@media screen and (max-width: 520px) {
  .song .sec-song .mejs__time {
    font-size: 1.2rem;
    line-height: 1.8333333333;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
}
.song .sec-song .mejs__controls {
  align-items: center;
}
.song .sec-song .mejs__controls:not([style*="display: none"]) {
  width: 100%;
  height: 100%;
  background: #f9f9ef;
  border: 1px solid #66161c;
  padding: 0 4rem;
  border-radius: 4rem;
}
@media screen and (max-width: 520px) {
  .song .sec-song .mejs__controls:not([style*="display: none"]) {
    padding: 0 2rem;
    border-radius: 3rem;
  }
}
.song .sec-song .mejs__button > button {
  top: 50%;
  transform: translateY(-50%);
  background: transparent url(../img/song/mejs-controls_enji.svg);
}
@media screen and (max-width: 520px) {
  .song .sec-song .mejs__button > button {
    background-size: auto 10rem;
  }
}
@media screen and (max-width: 520px) {
  .song .sec-song .mejs__button {
    width: 2rem;
  }
}
.song .sec-song .mejs__button.mejs__play button {
  margin: 0.3rem 0 0 0;
}
@media screen and (max-width: 520px) {
  .song .sec-song .mejs__button.mejs__play button {
    width: 1.6rem;
  }
}
.song .sec-song .mejs__button.mejs__pause button {
  background-position: -20px 0;
  margin: 0.3rem 0 0 0;
}
@media screen and (max-width: 520px) {
  .song .sec-song .mejs__button.mejs__pause button {
    background-position: -1.7rem 0;
    width: 1.6rem;
  }
}
.song .sec-song .mejs__button.mejs__volume-button {
  width: 3.9rem;
  height: 2.6rem;
  margin-left: 2rem;
}
.song .sec-song .mejs__button.mejs__volume-button button {
  background: url(../img/song/ico_speaker.svg) no-repeat center center;
  background-size: 100% auto;
  width: 3.9rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
}
.song .sec-song .mejs__button.mejs__unmute button {
  background: url(../img/song/ico_muted.svg) no-repeat center center;
  background-size: 100% auto;
  background-position: 0 0;
  width: 3.95rem;
  height: 3.7rem;
  margin: 1px 0 0 0;
  padding: 0;
}
.song .sec-song .mejs__button, .song .sec-song .mejs__time, .song .sec-song .mejs__time-rail {
  height: auto;
  padding-top: 0;
}
.song .sec-song .mejs__time-total, .song .sec-song .mejs__time-buffering, .song .sec-song .mejs__time-loaded, .song .sec-song .mejs__time-current, .song .sec-song .mejs__time-float, .song .sec-song .mejs__time-hovered, .song .sec-song .mejs__time-float-current, .song .sec-song .mejs__time-float-corner, .song .sec-song .mejs__time-marker {
  height: 2px;
}
.song .sec-song .mejs__time-total {
  margin: 0;
  background: rgba(102, 22, 28, 0.3);
}
.song .sec-song .mejs__time-current,
.song .sec-song .mejs__time-handle-content {
  background: #66161c;
}
.song .sec-song .mejs__time-hovered {
  background: #66161c;
}
.song .sec-song .mejs__horizontal-volume-slider {
  display: none !important;
}
.song .deco.bara01 {
  position: absolute;
  right: -18rem;
  bottom: -21rem;
  width: 40.9rem;
}
@media screen and (max-width: 520px) {
  .song .deco.bara01 {
    right: -9rem;
    bottom: -10rem;
    width: 20.4rem;
  }
}