/* ============================
	zenryoku_appeal style
============================ */

/* general
============================================= */

body {
	background-color: #040d52;
	background-image: url(../img/bg.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: top center;
}
header {
    background: rgba(255, 255, 255, 0);
}

@media all and (max-width: 767px) {
	body::before {
  content: "";
  width: 100vw;
  height: 100vh;
  background-image: url(../img/bg_sp.jpg);
  position: fixed;
		background-size: contain;
  top: 0px;
  left: 0px;
  z-index: -1; 
}
}

.no-wrap {
    display: inline-block; /* インラインブロック化 */
}

.rotate {transform: rotate( 90deg ); display: block;}
@media all and (min-width: 768px) {
.nobr { display:none; }
.nobrSp { display:block; }
}

@media all and (max-width: 767px) {
.nobr { display:block; }
.nobrSp { display:none; }
}

#contents {color: rgba(255, 255, 255, 1);}

#contents .unit, #contents #snsArea{
    background: rgba(4, 13, 82, 0.4);
	border: solid 2px #ff21ff;
	box-shadow:0 0 5px rgba(255,33,255,1), 0 0 5px rgba(255,33,255,1), 0 0 1px rgba(255,33,255,1);
    -webkit-box-shadow:0 0 5px rgba(255,33,255,1), 0 0 5px rgba(255,33,255,1), 0 0 1px rgba(255,33,255,1);
    -moz-box-shadow:0 0 5px rgba(255,33,255,1), 0 0 5px rgba(255,33,255,1), 0 0 1px rgba(255,33,255,1);
	    padding: 0 0 1em 0;
}
#share_space {
    background: rgba(4, 13, 82, 0);
}
.sns_space {
    background: rgba(4, 13, 82, 0);
}

.menu .hidebox ul {}
#mn_red .hidebox, #mn_red .hidebox li { background-color:#ff59d3; }
.menu .hidebox li { width: 100%;}
.menu .hidebox li a {
	background: -moz-linear-gradient(top, #ff59d3, #ffa1f0);
  background: -webkit-linear-gradient(top, #ff59d3, #ffa1f0);
  background: linear-gradient(to bottom, #ff59d3, #ffa1f0);
	font-family: ab-plus, sans-serif;
font-weight: 400;
font-style: normal;
 transition:0.5s;}
.menu .hidebox li a span {background-repeat: no-repeat; background-position: 20% center; background-size: 24px 24px; background-image: url(../img/arrow.png);}


#plus1 h2, #sns h2, #onair h2, #plus h2, #outline h2 {background-repeat: no-repeat; background-position: center top; background-size: contain; text-indent:-9999px;}
#plus1 h2, #sns h2{background-image: url(../img/h2_sns.png);}
#onair h2{background-image: url(../img/h2_onair.png);}
#plus h2, #outline h2 {background-image: url(../img/h2_about2.png);}
#ranking h2 { display: none;}
#plus1 .set, #sns .set { width: 100%;}
#plus1 .set .cont, #sns .set .cont { padding-bottom: 1em;}

#ranking.unit .photo { margin: 0;}
#ranking.unit .set {width:98%; padding: 1em 0 0.5em 0;}

#plus1.unit, #sns.unit, #plus2.unit { padding: 0 1em;}
#plus.unit, #outline.unit, #onair.unit { padding: 0 1em 1em;}
#ranking.unit { padding: 1em;}
#plus1.plus .set .cont {width: 100%;}
#plus2 h2 { display: none;}
#plus2 .set:first-of-type { width: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: contain; background-image: url(../img/bg_read.png);}
#plus2 .set:first-of-type .cont {color: #ff4ccf; text-align: center; font-size: 1.1em; font-weight: bold; padding: 1em 0 2em;}
#plus2 .set:nth-of-type(2) { width: auto; background-color: #0492ff; padding: 0 0.5em; margin-bottom: 2em;}
#plus2 h3:nth-of-type(1) { display: none;}/*今週のジャンル*/
#plus2 .set:nth-of-type(2) .cont {background-repeat: no-repeat; background-position: center top; background-size: auto 38px; background-image: url(../img/genre.png); padding: 45px 0 10px; font-size: 1.1em; font-weight: bold; text-align: center;}/*今週のジャンル*/
#plus2 .set:nth-of-type(n+3){ width: auto;}

#plus .set:first-of-type .cont, #outline .set:first-of-type .cont { font-size: 1.0em;}
#plus .set:first-of-type .cont small, #outline .set:first-of-type .cont small  { font-size: 0.8em;}
#plus .set:nth-of-type(2), #outline .set:nth-of-type(2) { width: auto; border: 1px solid #e877ae;
	border-image: linear-gradient(to right, #e877ae, #7c73f3);
	border-image-slice: 1;
padding-bottom: 0;}
#plus .set:nth-of-type(2) .cont, #outline .set:nth-of-type(2) .cont { padding: 1em; width: auto;}

.unit h3 { border-left:none;  width: auto; padding: 0.5em 0;
background: -moz-linear-gradient(left, #e877ae, #7c73f3);
  background: -webkit-linear-gradient(left, #e877ae, #7c73f3);
  background: linear-gradient(to right, #e877ae, #7c73f3);
}
#plus2 h3, #onair h3 { width: auto; padding: 0.5em 0.5em;}
#plus1 h3, #sns h3, #plus h3, #outline h3 {text-align: center; padding: 0.2em 0;
font-family: ab-plus, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.1em;}

#plus2 .set .photo, #this_onair .photo, #plusSpecial .photo {padding: 3px; width: auto;
background-image: linear-gradient(90deg, rgba(247, 149, 51, 1), rgba(234, 112, 85, 1) 33%, rgba(239, 78, 123, 1) 66%, rgba(161, 102, 171, 1));}

#share_space dt { color: rgba(255, 255, 255, 1);}
#share_space dt:before, #share_space dt:after {
    background-color: rgba(255, 255, 255, 1);
}
#onair.unit .s_photo { width: 100%;}

#keyword.unit { padding: 1.2em 0 1em 0;}
#keyword h2{ color: rgba(255, 255, 255, 1);}

.btn { border-radius: 0px; height: 60px; position: relative; margin: 0.5em auto 0.5em auto;}
.btn a { background-color:#fff; background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; background-image: url(../img/arrow.png); transition:0.5s; display: block;}
.btn a:hover {background-color:#ffe6fb; background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; background-image: url(../img/arrow.png); }
.btn span {font-family: ab-plus, sans-serif;
font-weight: bold;
font-style: normal;
font-size: 1.1em;
color: #ff21c4;
letter-spacing: -0.1em;
padding-left:12px;}
.btn span span.old {font-family: Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; font-size: 0.7em; position: static; padding-left: 0; letter-spacing: 0em;}
.btn#tw a {background-image: url(../img/arrow_tw.png);}
.btn#tw span { color: #13a1fc;}
.btn#tw a:hover {background-color:#d1edff;} 
.btn:before { display: none;}
.btn::after {
  /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ①疑似要素のボックスを影色で塗りつぶし */
 border: solid 2px #fff;
  /* ②ブラーフィルターでぼかす */
  filter: blur(0px);
  /* ③位置やサイズを調整 */
  transform: translateY(5px) translateX(5px) scale(1.00);
  /* ④乗算で重ねる */
		mix-blend-mode: multiply;
	opacity: 1;}

.unit .s_photo .onair_space .onair_date { color:#42c3ff; }
#this_onair h4 { border-left: 3px solid #42c3ff; }




@media screen and (min-width: 768px) {
	.menu .hidebox li a span { font-size: 2.0em; padding:15px;}
#plus1 h2, #onair h2 { height: 85px; padding-bottom: 0em; margin-bottom:1.0em;}
#sns h2{ height: 85px; padding-bottom: 0em; margin-bottom:0.2em;}
#plus h2, #outline h2  { height: 80px; padding-bottom: 0em; margin-bottom:0em;}
}
@media all and (max-width: 767px) {
	.menu .hidebox li {}
	.menu .hidebox li a span {
    background-repeat: no-repeat;
    background-position: 5% center;
    background-size: 15px 15px;
    background-image: url(../img/arrow.png);
		font-size: 1.5em; padding:15px 0 15px 15px;
}
	#contents {width: 95%; margin: 0 auto 1em;}
	#plus1.unit, #sns.unit, #plus2.unit { padding: 0 0.5em;}
#plus.unit, #outline.unit, #onair.unit { padding: 0 0.5em 0.5em;}
	#ranking.unit { padding: 0.5em;}
	#plus1 h2, #onair h2 { height: 55px; padding-bottom: 0em; margin-bottom:1.0em;}
	#sns h2 { height: 55px; padding-bottom: 0em; margin-bottom:0em;}
	#plus2 .set:first-of-type .cont { font-size: 1.0em; padding: 0.5em 0 2em;}
	#plus2 .set:nth-of-type(2) .cont {
    background-size: auto 32px;
    padding: 38px 0 8px;
    font-size: 1.1em;
}
	#plus h2, #outline h2 { height: 50px; width: 100%; padding-bottom: 0em; margin-bottom:0em;}
	.btn {height: 50px; width: 270px; }
	.btn a {background-position: 10px center; background-size: 17px 17px;}
	.btn a:hover {background-position: 10px center; background-size: 17px 17px;}
	.btn span { font-size: 1.1em;}
	#new h2 {color: rgba(255, 255, 255, 1);}
	.copyright p, .copyright p > small a { color: #fff;}
	#new h2 .link_txt a {color: #fff;}
#new h2 .link_txt:before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 1);
    border-left: 0;
    border-bottom: 0;
    position: absolute;
    bottom: 3px;
    right: 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
}

/* this_onair
============================================= */

#this_onair.unit { padding: 1em;}

#this_header {background: rgba(255, 255, 255, 0.15); padding: 0 0 1em 0; margin-bottom: 1.5em;
box-shadow:0 0 5px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.2), 0 0 5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.2);}

#this_onair h3 { border-left:none; border-bottom: none; padding: 0.5em; width: auto;
background: -moz-linear-gradient(left, #e877ae, #7c73f3);
  background: -webkit-linear-gradient(left, #e877ae, #7c73f3);
  background: linear-gradient(to right, #e877ae, #7c73f3);
}
#this_onair h3:not(:first-of-type) { margin-top: 1.5em;}
#this_onair .box { margin-top: 1.5em;}
#this_date {color: #42c3ff;}
.lamp { color: #fff;}

@media all and (max-width: 767px) {
#this_onair.unit { padding: 0.5em;}

}


/* 特番
============================================= */
#plusSpecial { padding-top: 1em!important;}
#plusSpecial h2{text-align: center; padding: 0.2em 0; width: 95%;
font-family: ab-plus, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.8em;
	background: -moz-linear-gradient(left, #e877ae, #7c73f3);
    background: -webkit-linear-gradient(left, #e877ae, #7c73f3);
    background: linear-gradient(to right, #e877ae, #7c73f3);
}
#plusSpecial h2 span {
font-family: "zen-old-mincho", sans-serif;
font-weight: 700;
font-style: normal;}

#plusSpecial.unit .read {width: 100%; font-size: 1.2em; text-align: center; padding-bottom: 1em;}

#plusSpecial dl {font-size: 1.4em; font-weight: bold; line-height: 1.6em; padding-bottom: 1em;}
#plusSpecial dl dt.onair_date, #plusSpecial .onair_date  {color: #42c3ff; font-size: 130%; padding-bottom: 0.5em; font-weight: bold;}
#plusSpecial .performer { text-align: center; font-size: 130%; padding-bottom: 1em;}
#plusSpecial .artist { display: inline-block; font-weight: bold;
background:rgba(4,13,82,0.5); border: solid 1px rgba(237,146,190,0.4); 
color: #e877ae; padding: 8px 20px ; margin: 5px; min-width: 6em;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;}

@media all and (max-width: 767px) {
	#plusSpecial { padding-top: 0.8em!important;}
	#plusSpecial h2 {font-size: 1.6em;}
	#plusSpecial dl dt { text-align: center;}
	#plusSpecial .artist {min-width: 10em; padding: 6px 15px ;}
}

/* 集計中
============================================= */
.totalling { text-align:center;}
.totalling h4 {
font-family: ab-plus, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.8em;
display: block;
text-align:center!important;
    color: #ff4ccf;}
.txt { font-weight: bold; display: block;}
.date { text-align:right!important; padding: 0!important;}
@media screen and (min-width: 768px) {
	.totalling { margin-top: -40px;}
	.totalling h4 { font-size: 1.6em!important;}
	.txt {font-size: 1.3em; padding: 25px 0;}
}
@media all and (max-width: 767px) {
	.totalling { margin-top: -30px;}
	.totalling h4 { font-size: 1.3em!important;}
	.txt {font-size: 1.2em;; padding: 20px 0;}
}