@font-face {
  font-family: 'Dela Gothic One';
  src: url('/um/library/fonts/Dela_Gothic_One/DelaGothicOne-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
}
body {
  background: linear-gradient(to bottom, #089dc9 5%, #7bcce3 12%, #f5f5ff 22%);
}
img[src="img/main.jpg"] {
  content: url("../img/main2.jpg") !important;
}
#program_nav li {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
#program_nav li a {
  border: 2px solid #262626;
  color: #262626
}
#program_nav .ind_mn-p span::after {
  border-top: 2px solid #089dc9;
  border-right: 2px solid #089dc9;
}
#stream_tbsfree {
  background-color: unset
}
#next_onair {
  position: relative;
  background-color: #ff0000;
  color: rgba(255, 255, 255, 1);
  z-index: 0;
}
#next_onair::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bg.png);
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  border-radius: 30px 30px 0 0;
  background-position: center top;
  background-attachment: fixed;
}
#next_onair h2 {
  position: relative;
  padding-left: 8%;
  color: #262626;
  margin: -1.5rem auto 1rem;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: 3px 3px 0 rgba(38, 38, 38, 0.9);
}
#next_onair h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  transform: translateY(-45%);
  width: 9rem;
  height: 9rem;
  background: url("../img/icon_akko.png") no-repeat center/contain;
}
#next_onair.unit h2 {
  color: rgba(245, 245, 255, 1);
  -webkit-text-stroke: 1px #262626;
}
#next_onair #onair_date {
  position: relative;
  background-color: #ffeb00;
  color: #262626;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 70%;
  margin: 0 auto;
  border-radius: 8px;
  outline: 1px solid #262626;
  outline-offset: -6px;
  border: 2px solid #262626;
}
#next_onair #onair_date::before {
  content: "";
  position: absolute;
  right: -2%;
  top: -22%;
  transform: translateY(-45%);
  width: 5.5rem;
  height: 5.5rem;
  transform: rotate(350deg);
  background: url(../img/hand_akko.png) no-repeat center / contain;
}
#next_onair #onair_date::after {
  content: "";
  position: absolute;
  left: -2.5%;
  top: -40%;
  width: 6rem;
  height: 6rem;
  transform: rotate(315deg);
  background: url(../img/hand_jumbo.png) no-repeat center / contain;
}
#next_onair #onair_date span {
  font-size: 125%
}
#tbsfree_update a {
  border: 2px solid #262626;
}
#next_onair .info_sub {
  background-color: rgba(245, 245, 255, 1);
  border-radius: 16px;
  padding: 2em;
  border: 2px solid #262626;
  margin: 1rem 0px 3rem;
}
#next_onair .info_sub:last-child {
  background-color: unset;
  border-radius: unset;
  padding: 0 2em;
  border: none;
}
#next_onair h3 {
  color: #262626;
  border-left: 3px solid #ffeb00;
}
.info_sub .sub_txt {
  color: #262626;
}
#next_onair .info_sub:last-child .sub_txt {
  color: rgba(245, 245, 255, 1);
  font-weight: bold
}
#official_sns {
  position: relative;
  background-color: #1aff1a;
  padding: 5rem 0 8rem 0;
  z-index: 0;
}
#official_sns::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bg.png);
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  border-radius: 30px 30px 0 0;
  background-position: center top;
  background-attachment: fixed;
}
#official_sns h2 {
  position: relative;
  padding-left: 8%;
  color: rgba(245, 245, 255, 1);
  margin: -1.5rem auto 1rem;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: 3px 3px 0 rgba(38, 38, 38, 0.9);
  -webkit-text-stroke: 1px #262626;
}
#official_sns h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  transform: translateY(-45%);
  width: 9rem;
  height: 9rem;
  background: url(../img/icon_jumbo.png) no-repeat center/contain;
}
#official_sns ul {
  border-radius: 16px;
  border: 2px solid #262626;
  /*  background-color: #ffeb00;*/
}
.sns_name, #sns_caution {
  color: #262626;
}
#about {
  position: relative;
  background-color: #ffeb00;
  color: #262626;
  z-index: 0;
}
#about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bg.png);
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  border-radius: 30px 30px 0 0;
  background-position: center top;
  background-attachment: fixed;
}
#about h2 {
  position: relative;
  padding-left: 8%;
  color: rgba(245, 245, 255, 1);
  margin: -1.5rem auto 1rem;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: 3px 3px 0 rgba(38, 38, 38, 0.9);
  -webkit-text-stroke: 1px #262626;
}
#about h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  transform: translateY(-45%);
  width: 9rem;
  height: 9rem;
  background: url(../img/icon_akko.png) no-repeat center/contain;
}
#about h3 {
  border-left: 3px solid #ff0000;
}
#about #program_info-set {
  display: none
}
#about .info_sp {
  background-color: rgba(245, 245, 255, 1);
  border-radius: 16px;
  padding: 2em;
  border: 2px solid #262626
}
#about .info_sub {
  border-radius: 16px;
  background-color: rgba(245, 245, 255, 1);
  border: 2px solid #262626;
  padding: 1em 2em .5em;
}
#about .info_sub:nth-of-type(2), #about .info_sub:nth-of-type(3) {
  margin-bottom: 3rem
}
#stream {
  position: relative;
  background-color: #1aff1a;
  padding: 5rem 0 8rem 0;
  z-index: 0;
}
#stream::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bg.png);
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  border-radius: 30px 30px 0 0;
  background-position: center top;
  background-attachment: fixed;
}
#stream h2 {
  position: relative;
  padding-left: 8%;
  color: rgba(245, 245, 255, 1);
  margin: -1.5rem auto 1rem;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: 3px 3px 0 rgba(38, 38, 38, 0.9);
  -webkit-text-stroke: 1px #262626;
}
#stream h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  transform: translateY(-45%);
  width: 9rem;
  height: 9rem;
  background: url(../img/icon_jumbo.png) no-repeat center/contain;
  z-index: 1
}
#stream .stream_set {
  background-color: #ff0000;
  border-radius: 16px;
  color: #fff;
  border: 2px solid #262626;
  position: relative;
  z-index: 0
}
#stream .stream_set::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bg.png) center / auto repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  border-radius: 30px 30px 0 0;
}
#stream .stream_set:nth-of-type(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/bg.png) center bottom / auto repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  border-radius: 30px 30px 0 0;
}
#stream .stream_icons {
  border: 2px solid #262626;
  border-radius: 6px;
}
#stream .stream_icons .stream_icon {
  border-radius: 16px;
}
#stream .stream_icons .stream_icon a {
  background-color: none
}
#stream #stream_caution {
  color: #262626;
}
@media all and (max-width: 1199px) {
  #next_onair h2, #official_sns h2, #about h2, #stream h2 {
    padding-left: 10%;
    margin: 0;
  }
}
@media all and (max-width: 922px) {
  body {
    background: linear-gradient(to bottom, #089dc9 5%, #7bcce3 7%, #f5f5ff 15%);
  }
  #program_nav li {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  #program_nav li a {
    border: 1px solid #262626
  }
  #next_onair::before, #official_sns::before, #about::before, #stream::before, #stream .stream_set::before {
    background: url(../img/bg_sp.png) top center / 100% auto repeat-y;
    background-position: center top;
    background-attachment: fixed;
  }
  #stream .stream_set:nth-of-type(2)::before {
    background: url(../img/bg_sp.png) bottom center / 100% auto repeat-y;
  }
  #next_onair h2, #official_sns h2, #about h2, #stream h2 {
    padding-left: 12%;
    margin: 0;
    text-shadow: 2px 2px 0 rgba(38, 38, 38, 0.9);
  }
  #next_onair #onair_date {
    width: 100%;
  }
  #next_onair #onair_date::before {
    right: -2vw;
    width: 6vw;
    height: 6vw;
  }
  #next_onair #onair_date::after {
    left: -2.2vw;
    top: -2.2vw;
    width: 6.5vw;
    height: 6.5vw;
  }
  #next_onair #onair_date, #official_sns ul, #about .info_sp, #about .info_sub, #stream .stream_set, #stream .stream_icons, #next_onair .info_sub {
    border: 2px solid #262626;
    outline-offset: -5px;
    margin-top: 1em
  }
  #next_onair .info_sub {
    margin: 1rem 0 2rem 0;
    /*    border-radius: 8px;*/
  }
  #next_onair .info_sub:last-child {
    margin: 1rem 0 0 0;
  }
  #next_onair .info_sub:last-child .sub_txt {
    padding: 0
  }
  #about .info_sub:nth-of-type(2) {
    margin: 1rem 0 2rem 0
  }
  #about .info_sub:nth-of-type(3) {
    margin: 1rem 0 2rem 0
  }
}
@media all and (max-width: 768px) {
  #next_onair h2::before, #official_sns h2::before, #about h2::before, #stream h2::before {
    width: 10vw;
    height: 10vw;
    top: 10%;
  }
  #next_onair #onair_date, #official_sns ul, #about .info_sp, #about .info_sub, #stream .stream_set, #stream .stream_icons, #next_onair .info_sub {
    margin-top: 0
  }
  #next_onair #onair_date span {
    font-size: 115%
  }
  #about .info_sub:nth-of-type(2) {
    margin: 0 0 2rem 0
  }
}
@media all and (max-width: 540px) {
  #next_onair h2, #official_sns h2, #about h2, #stream h2 {
    padding-left: 17%;
    margin: 0;
  }
  #next_onair h2::before, #official_sns h2::before, #about h2::before, #stream h2::before {
    width: 15vw;
    height: 15vw;
  }
  #next_onair #onair_date::before {
    right: -3vw;
    width: 8vw;
    height: 8vw;
  }
  #next_onair #onair_date::after {
    left: -3.2vw;
    top: -3.2vw;
    width: 8.5vw;
    height: 8.5vw;
  }
}