@charset "utf-8";
.center {
  text-align:center;
}
img{vertical-align:bottom;}

.fs12{font-size: 12px;}
.ml40{margin-left: 40px;}
.mt5{margin-top: 5px;}
.mt30{margin-top: 30px;}
.mt50{margin-top: 50px;}
.mb40{margin-bottom: 40px;}


@media screen and (max-width: 768px) {
.pc {
  display: none;
}
#content{
  width:100%;
  margin:10px auto 0 auto;
  font-size:14px;
}

.audiojs {
    width: 100%;
    height: 36px;
    background: #404040;
    overflow: hidden;
    font-size: 12px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));
    background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

}


@media screen and (min-width: 769px)  {
.sp {
  display: none;
}
#content{
  width:980px;
  margin:10px auto 0 auto;
  font-size:14px;
}
.songBox{
  max-width:900px;
  text-align: center;
}
}


#school_song{margin:50px auto 20px;text-align:center;}
#school_song a{width: fit-content;display: contents;}
#school_song .detail_btn{color: #fff;background: var(--light_color);width: 300px;margin: auto auto 0;padding: 20px 30px;font-size: 18px;transition: 0.3s;display: block;pointer-events: painted;}
#school_song .detail_btn::after{content: "";display: block;width: calc(100% - 10px);height: calc(100% - 10px);border: 1px solid #fff;position: absolute;top: 4px;left: 4px;}
#school_song .detail_btn strong{font-family: Osaka,"MS PƒSƒVƒbƒN","MS PGothic",Sans-Serif;}
#school_song .detail_btn:hover{opacity: 0.6;transition: 0.3s;}
#school_song .note{margin:10px auto;text-align:center;}

@media screen and (max-width: 768px) {
.ceremony_Tit{font-size:16px;} 
#school_song .detail_btn{width: 100%;padding:0.5em 0.5em 0.6em;}
}