@charset "utf-8";

.random {
  position: absolute;
  z-index: 10;
//  animation: snailsMove 5s cubic-bezier(0, 1.1, 0.73, 1.4) 0s infinite both;
  cursor: pointer;
  display: none;
}

.random:hover {
  animation: snailsTremble 0.5s ease-out 0s infinite both;
}

@keyframes snailsMove {
  0% {transform: translateY(0);}
  10% {transform: translateY(-5px);}
  40% {transform: translateY(0);}
}

@keyframes snailsTremble {
  0% {transform: translateY(0);}
  30% {transform: translateY(-2px);}
  80% {transform: translateY(2px);}
  100% {transform: translateY(0);}
}

.random0 {
  top: -70px;
  left: 0;
  right: -171px;
  margin: 0 auto;
  width: 47px;
}

@media screen and (min-width: 900px){
  .random0 {
    left: 229px;
    right: auto;
  }
}

.random1 {
  position: static;
  margin: 20px;
}

.random2 {
  right: 12px;
  top: -52px;
}

.random3 {
  top: -62px;
  left: 0;
  right: 0;
}

.random3 img{
  height: 70px;
}

@media screen and (min-width: 900px){
  .random3 {
    top: -68px;
  }

  .random3 img{
    height: auto;
  }
}

.random4 {
  top: -28px;
  right: 0;
  left: 0;
}

@media screen and (min-width: 900px){
  .random4 {
    top: -86px;
  }
}

.random5 {
  left: 0;
  bottom: 0;
}

@media screen and (min-width: 900px){
  .random5 {
    top: 0;
    bottom: auto;
  }
}

.random6 {
  bottom: -10px;
  right: -34px;
}

@media screen and (min-width: 900px){
  .random6 {
    bottom: -53px;
    right: 0;
  }
}

.random7 {
  position: static;
  margin: 0 20px;
}

.random8 {
  top: 0;
  right: 0;
  width: 78px;
}




#contents {
  padding: 15px 15px 0 15px;
}

#contents_main {
  animation: fadeIn 1s ease-in-out 0.5s 1 both;
}

#main,
#footer {
  padding: 0 15px;
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  backface-visibility: hidden;
}

#footer_inner {
  margin-top: 40px;
}

.page_1,
.page_2,
.page_3,
.page_24 {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", 'notoserif', 'Sawarabi Mincho', 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
}

@media screen and (min-width: 900px){
  #contents_inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  #side {
    margin: 0 20px 0 30px;
    position: relative;
   flex-shrink: 0;
    animation: fadeIn 1s ease-in-out 0.5s 1 both;
  }

  #side_inner {
    z-index: 1000;
  }

  #contents_main {
    max-width: 730px;
    width: 100%;
  }

  #main,
  #footer {
    max-width: 100%;
    padding: 0 ;
  }

#contents_main_inner {
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  min-height: calc(100vh - 15px);
  height: 100%;
}

#main {
  flex-shrink: 0;
}

#footer {
  margin-top: auto;
}

}


@media screen and (min-width: 900px) and (min-height: 999px){
   #side {
     width: 255px;
   }
   #side_inner {
     position: fixed;
  }
}

/* ==========================================
*
*  Onair / Story
*
========================================== */
.introHead,
.onairHead {
  font-size: calc(5.129rem/2);
  font-feature-settings: 'pkna';
  letter-spacing: 0.05em;
  line-height: 1.4;
  animation: slideIn 2s ease 0.5s 1 both;
}

.onairHead>span {
  display: inline-block;
  white-space: nowrap;
}

.introHead {
  display: flex;
  align-items: flex-end;
  margin-top: 50px;

}

.introHead::after {
  flex-shrink: 100000000;
  width: 100%;
  max-width: 45px;
  border-top: 1px solid #1c1c1c;
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  height: 0.8em;
}


@media screen and (min-width: 900px){
  .introHead,
  .onairHead {
    font-size: 3.36rem;
  }

  .introHead {
    margin-top: 80px;
  }
}



.CNo15 .read {
  text-align: justify;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 899px){
  .read iframe {
    width: calc(100vw - 60px);
    height: calc(9/16*(100vw - 60px));
    max-width: 100%;
    max-height: 100%;
  }
}

/* ==========================================
*
*  Staff
*
========================================== */

.staffCastList {
  margin-bottom: 100px;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", 'notoserif', 'Sawarabi Mincho', 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
}

.staffCastList>li {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  margin-bottom: 1.5em;
  font-feature-settings: 'pkna';
  letter-spacing: 0.1em;
  align-items: center;
}

.staffCastList>li>span:first-child {
  font-size: 1.568rem;
}

.staffCastList>li>span:nth-child(2) {
  font-size: 2.24rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.staffCastList i {
  font-size: 1.2rem;
  font-style: normal;
}

@media screen and (max-width: 899px){
  .CNo4 .article_h2 {
    text-align: center;
  }
}

@media screen and (min-width: 900px){
  .staffCastList>li {
    flex-direction: row;
  }

  .staffCastList>li>span:first-child {
    margin-right: 1em;
  }

  .staffCastList>li>span:nth-child(2) {
    align-items: flex-start;
  }

  .staffCastList i {
    font-size: 1.4rem;
    font-style: normal;
  }
}


.CNo10 .wdp03 {
  max-width: 100%;
}



@media screen and (min-width: 600px){
  .CNo10 .tp4 tr {
    justify-content: space-between;
  }

  .CNo10 .wdp03 {
    max-width: 30%;
  }
}


@media screen and (max-width: 899px){
  .mfp-arrow {
    display: none !important;
  }
}


.goodsTag {
  background: #030303;
  color: #fafafa;
  font-weight: 300;
  font-size: 1.1rem;
  padding: 0.2em 0.2em 0.1em;
  margin: 0 0.5em 0 0;
}

.goodsTag--goods {
  background: #52bed8;
}

.goodsTag--lottery {
  background: #D3933C;
}

.goodsTag--prize {
  background: #8bbc1c;
}

.nwu_box--goods .lp {
  border: 1px solid #52bed8;
}

.nwu_box--lottery .lp {
  border: 1px solid #D3933C;
}

.nwu_box--prize .lp {
  border: 1px solid #8bbc1c;
}

.CNo9 .ph {
  max-width: 300px;
}

.CNo9 .ph {
  max-width: 300px;
}

.CNo9 .read {
    overflow: hidden;
}

.CNo9 #list_06>.nwu_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.CNo9 #list_06 .sm {
  flex-grow: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.CNo9 #list_06 img {
  max-height: 350px;
}

.CNo9 #list_06 .sm::after {
  display: none;
}

@media screen and (max-width: 600px){

  .CNo9 .ph {
    max-width: 100%;
  } 

  .CNo9 .ph a.img_link {
    pointer-events: none;
  }

  .CNo9 #list_06 img {
    max-height: calc(50vw - 30px - 8px);
  }
}


/* ==========================================
*
*  Music List
*
========================================== */

.CNo7 #list_06>.nwu_box {
  width: 100%;
  transition: 0.5s;
  outline: 0px solid rgba(140, 227, 219, 0.2);
}

.CNo7 #list_06>.nwu_box:hover {
  background: rgba(140, 227, 219, 0.2);
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
  outline: 10px solid rgba(140, 227, 219, 0.2);
}

.CNo7 #list_06>.nwu_box:hover .sm a img{
  opacity: 1;
}

.CNo7 #list_06>.nwu_box:hover .cd__digitalDownloadList img{
  opacity: 1;
}

.CNo7 #list_06>.nwu_box:hover .cd__digitalDownloadList>li:hover img{
  opacity: 0.4 !important;
}

.CNo7 #list_06>.nwu_box  img.lp{
  border: 1px solid #999;
}

.CNo7 #list_06>.nwu_box .title{
  display: none;
}

.CNo7 #list_06>.nwu_box .cd__indexOnly{
  display: none;
}



.CNo7 #list_06>.nwu_box .cap{
  text-align: left;

}

@media screen and (min-width: 900px){
  .CNo7 #list_06>.nwu_box {
    display: flex;
  }


  .CNo7 #list_06>.nwu_box .sm{
    max-width: 300px;
    margin-right: 16px;
  }

  .CNo7 #list_06 .sm::after {
    display: none;
  }
}

.cd__digitalDownloadList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
}

.cd__digitalDownloadList>li {
  width: calc(100%/3 - 10px);
  margin-right: calc(10px*3/2);
  margin-bottom: 10px;
}

.cd__digitalDownloadList>li:nth-child(3n) {
  margin-right: 0;
}

#cms_block>[class^="page_"] .cd__digitalDownloadList>li {
  width: auto;
  margin: 0 10px 10px 0;
}

.cd__type {
  margin: 0;
}

.cd__title {
  margin: 0 0 1em;
  font-size: 2.4rem;
  line-height: 1;
}

.cd__date {
  margin: 0 0 0.5em;
  font-size: 1.6rem;
  font-weight: 600;
}

.cd__specList {
  margin: 0;
}

.cd__subhead {
  margin: 1em 0 0;
}

/* ==========================================
*
*  Music index
*
========================================== */

.line_00 .cd__specList,
.line_00 .cd__subhead,
.line_00 .cd__digitalDownloadList,
.line_00 .cd__link,
.CNo7 .line_00 .ph
 {
  display: none;
}

.CNo7 .line_00 .cd__title {
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  letter-spacing: 0.05em;
  margin: 0 0 0.4em;
  animation: slideIn 1s ease 0.5s 1 both;
  font-size: 3rem;
  line-height: 1.2;
}



.CNo7 .img_l_tp3 {
  max-width: 100%;
  width: 100%;
  flex-basis: auto;
}

.CNo7 .img_l_tp3 .cap{
  margin: 0.5em 0 2em;
}

.CNo7 .img_l_tp3 .ph{
    text-align: center;
}

.CNo7 .img_l_tp3 .ph img{
  max-height: calc(100vw - 60px);
}

@media screen and (min-width: 600px){
.CNo7 .type_2 .ph{
  max-width: 300px;
}

.CNo7 .img_l_tp3 {
  display: flex;
  flex-wrap: wrap;
}

.CNo7 .img_l_tp3 .ph{
  width: 200px;
  flex-shrink: 0;
  margin-right: 16px;
}

.CNo7 .img_l_tp3 .ph img{
  max-height: 200px;
}

.CNo7 .img_l_tp3 .cap{
  width: calc(100% - 200px - 18px);
}

}

.cd__link {
  background: #000;
  padding: 0.5em 2.3em;
  color: #fff !important;
}

.cd__link:hover {
  opacity: 0.6;
}

@media screen and (max-width: 899px){
  .cd__link {
    display: block;
    text-align: center;
    margin: 1em auto 2em;
  }
}

/* ==========================================
*
*  On Air
*
========================================== */

.onairNetList {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.4rem;  
  justify-content: space-between;
}

.onairNetList li{
  width: 47%;
}

.onairNetList a{
  text-decoration: none;
  border-bottom: 1px solid #d0d0d0;
  display: flex;
  height: 100%;
  align-items: center;
  color: #60acbf;
  padding: 1em 0.5em 0.5em;
  transition: 0.5s;
  font-weight: 600;
  justify-content: center;
  padding: 1em 0 0.5em;
  text-align: center;
}

@media screen and (max-width: 320px){
  .onairNetList a{
      font-size: 1.2rem; 
  }
}


.onairNetList a:hover {
  color: #70bccf;
  background: rgba(140, 227, 219, 0.2);
}

.onairNetList a[href="#"]{
  pointer-events: none;
  color: #333;
}

@media screen and (min-width: 900px){
  .onairNetList {
    justify-content: flex-start;
  }

  .onairNetList li{
    width: 30%;
    margin: 0em 1em 0 0;
  }

  .onairNetList a{
  justify-content: flex-start;
  padding: 1em 0.5em 0.5em;
  text-align: left;
  }
}











/*HTML5　audio*/

.audioplayer {
  height: 2.5em;
  color: #fff;
  position: relative;
  z-index: 1;
  background: #333;
}

/* mini mode (fallback) */

.audioplayer-mini {
  width: 2.5em;
  margin: 0 auto;
}

/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

.audioplayer>div {
  position: absolute;
}

/* play/pause button */

.audioplayer-playpause {
  width: 2.5em;
  height: 100%;
  text-align: left;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
  top: 0;
  left: 0;
}

.audioplayer:not(.audioplayer-mini) .audioplayer-playpause {

}

.audioplayer-mini .audioplayer-playpause {
  width: 100%;
}

.audioplayer-playpause:hover, .audioplayer-playpause:focus {
  background-color: #222;
}

.audioplayer-playpause a {
  display: block;
}

.audioplayer-stopped .audioplayer-playpause a {
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-right: none;
  border-left-color: #fff;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.5em 0 0 -0.25em;
}

.audioplayer-playing .audioplayer-playpause a {
  width: 0.75em;
  height: 0.75em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.375em 0 0 -0.375em;
}

.audioplayer-playing .audioplayer-playpause a:before, .audioplayer-playing .audioplayer-playpause a:after {
  width: 40%;
  height: 100%;
  background-color: #fff;
  content: '';
  position: absolute;
  top: 0;
}

.audioplayer-playing .audioplayer-playpause a:before {
  left: 0;
}

.audioplayer-playing .audioplayer-playpause a:after {
  right: 0;
}

/* timers */

.audioplayer-time {
  width: 4.375em;
  height: 100%;
  line-height: 2.375em;
  text-align: center;
  z-index: 2;
  top: 0;
}

.audioplayer-time-current {
  border-left: 2px solid rgba(144, 144, 144, 0.5);
  left: 2.5em;
}

.audioplayer-time-duration {
  border-right: 2px solid rgba(144, 144, 144, 0.5);
  right: 2.5em;
}

.audioplayer-novolume .audioplayer-time-duration {
  border-right: 0;
  right: 0;
}

/* progress bar of loaded/played */

.audioplayer-bar {
  height: 0.875em;
  background-color: #222;
  cursor: pointer;
  z-index: 1;
  top: 50%;
  right: 6.875em;
  left: 6.875em;
  margin-top: -0.438em;
}

.audioplayer-novolume .audioplayer-bar {
  right: 4.375em;
}

.audioplayer-bar div {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.audioplayer-bar-loaded {
  background-color: #333;
  z-index: 1;
}

.audioplayer-bar-played {
  background: #70bccf;
  z-index: 2;
}

/* volume button */

.audioplayer-volume {
  width: 2.5em;
  height: 100%;
  text-align: left;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
  top: 0;
  right: 0;
}

.audioplayer-volume:hover, .audioplayer-volume:focus {
  background-color: #222;
}

.audioplayer-volume-button {
  width: 100%;
  height: 100%;
}

.audioplayer-volume-button a {
  width: 0.313em;
  height: 0.375em;
  background-color: #fff;
  display: block;
  position: relative;
  z-index: 1;
  top: 40%;
  left: 35%;
}

.audioplayer-volume-button a:before, .audioplayer-volume-button a:after {
  content: '';
  position: absolute;
}

.audioplayer-volume-button a:before {
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-left: none;
  border-right-color: #fff;
  z-index: 2;
  top: 50%;
  right: -0.25em;
  margin-top: -0.5em;
}

.audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after {
  width: 0.313em;
  height: 0.313em;
  border: 0.25em double #fff;
  border-width: 0.25em 0.25em 0 0;
  left: 0.563em;
  top: -0.063em;
  border-radius: 0 0.938em 0 0;
  -webkit-transform: rotate( 45deg);
  transform: rotate( 45deg);
}

/* volume dropdown */

.audioplayer-volume-adjust {
  height: 6.25em;
  cursor: default;
  position: absolute;
  left: 0;
  right: 0px;
  top: -9999px;
  background: #333;
}

.audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
  opacity: 0;
}

.audioplayer-volume:hover .audioplayer-volume-adjust {
  top: auto;
  bottom: 100%;
}

.audioplayer-volume-adjust>div {
  width: 40%;
  height: 80%;
  background-color: #222;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin: 30% auto 0;
}

.audioplayer-volume-adjust div div {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #70bccf;
}

.audioplayer-novolume .audioplayer-volume {
  display: none;
}