@import url("https://use.typekit.net/caz8wgv.css");
@import url("https://use.typekit.net/vmb6vko.css");
html {
  scroll-padding-top: 70px;
}
body{
background:#000 url(../img/bg.png) repeat 0 0;
}

.f160 { font-size:160%;}
.stpnk{color:#e6369a;}
.futo {
font-family: "vdl-linegrpop-futoline", sans-serif;
font-weight: 400;
font-style: normal;
}
.vdlv7 {
font-family: vdl-v7gothic, sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing:.05em;
}

main.johnson {width:100% !important; padding-top:0 !important; background:none !important;}
main.johnson header{background:none !important;
background: url(../img/mainbg.png) no-repeat center center !important;
background-size:cover !important;
padding:1.5em 0 0;
margin-bottom: 0 !important;
}

main.johnson header .mainimg {width:1080px; height:771px; margin:0 auto; border-radius:24px; background:url(../img/main.jpg?1) no-repeat center 0 !important; background-size:cover !important; position: relative;
border:2px solid #bf3353;
box-shadow: 0px 0px 20px rgba(191,51,83,1), 0px 0px 10px 4px rgba(191,51,83,0.5) inset;}
/*main.johnson .mainimg:before {
  content:'';
  width:98%;
  height:98%;
  position: absolute;
  display:block;
  top:1%;
  left:1%;
  background:url(../img/line.png) no-repeat center center; background-size:contain;
}*/
.mainimg .onair_space {display:none;}
#wrap{margin:0 auto !important; padding:0; position: relative;}
#contents{background: url(../img/johnson.png) no-repeat right 5%  top 90px !important; background-size:220px !important;}

@media screen and (min-width: 768px) {
main.johnson #wrap{width:1080px !important;}
.ink3{position:absolute; right:-100px; top:600px; width:220px; z-index:-1;}
main.johnson #wrap::after { content: ""; display: block; clear: both;}
#container_johnson{
padding:1em 0 0;
background-image:url(../img/ink2.png),url(../img/bg2.png);
background-repeat:no-repeat,repeat;
background-position:calc(50% + 500px) 0,0 0;
background-size:320px,contain;
}
}

main.johnson .menu .hidebox { background :none; overflow: visible; margin:2em auto 0;}
.menu .hidebox ul {box-sizing: border-box; border-top:1px solid rgba(247,253,83,0.7); border-bottom:1px solid rgba(247,253,83,0.7); background-color:rgba(0,0,0,0.8); padding:.6em 0 .6em; position: relative;
box-shadow: 0px -8px 20px -10px rgba(247,253,83,0.6)}
.menu .hidebox ul:before{
  content: '';
  position: absolute;
  width:100%;
  height:1px;
  z-index:1;
  border-bottom:1px solid rgba(247,253,83,0.7);
  bottom:4px;
  left:0;
}

.menu .hidebox li {border-bottom:none; font-size:180%; background : none; border:none !important; position: relative;
flex-basis: auto !important;
width:auto !important;
font-family: "vdl-linegrpop-futoline", sans-serif;
font-weight: 400;
font-style: normal;
padding:0 .8em .25em;
float:none;
text-shadow: 0px 0px 10px rgba(247,253,83,0.6), 0px 0px 20px rgba(247,253,83,0.6);
}
.menu .hidebox li:before{
  content: "/";
  position: absolute;
  top:25%;
  left:-2.5%;
font-family: vdl-v7gothic, sans-serif;
font-weight: 300;
font-style: normal;
color:#f7fd53;
font-size:100%;
}
.menu .hidebox li:first-child:before{content: "";}

.menu .hidebox li#mn_onair:before{background:none;}
.menu .hidebox li span {display:inline-block; padding:.3em !important;}
.menu .hidebox li a {color:#f7fd53 !important; background : none; transition: .5s;}
.menu .hidebox li a:hover { background:none; opacity:0.5;}
.menu .hidebox li:nth-child(odd) {border:none;}

.unit h3 {margin: 0 auto .5em; font-size:140%; text-align: center; padding:.5em 0; font-weight:700; line-height: 130%; border:none; background:none;}
.unit h4 { font-size:140%;}
.unit,#share_space,.sns_space{background-color:rgba(0,0,0,0.6) !important; border:2px solid #e6369a; border-radius:24px; margin:4em 0 3em; text-align: left; padding:0 0 1em;
color:#fff; box-shadow: 0px 0px 16px rgba(232,64,174,0.6), 6px 7px 7px 1px rgba(232,64,174,0.3);}

#next_onair.unit{margin:3em 0 3em; padding:0 0 1.5em;}
#next_onair #next_date {font-size:120%; color:#f7fd53; padding:.5em 4%; text-align: left; font-weight: bold;}
#next_onair.unit .sub_txt {width:auto; margin: .5em 1.5em .25em 1.5em; padding:0 1%; border:none !important;  font-size:100%; background-color:rgba(33,238,255,0.9); display:inline-block;}
#next_onair.unit .sub_cont {width:auto; font-size:80%; padding:.5em 4%;}

#about,#plus1{position: relative;}
#about.unit{margin:4em 0 3em;}
.ink1{position:absolute; left:-50px; top:-100px; width:220px;}
.ink5{position:absolute; right:-30px; top:-80px; width:180px;}
.ink4{position:absolute; right:-150px; bottom:-130px; width:410px; z-index:-1;}
#about.unit h2,#next_onair.unit h2,#plus1.unit h2,#minogashi.unit h2 {width:255px; height:50px; background: url(../img/about.svg) no-repeat 0 0; background-size:100%; position: relative; text-align: left; margin:-1em 0 1.8em 1.5em !important; display:block; z-index:1;}
#next_onair.unit h2{background-image:url(../img/next.svg); margin:-1em 0 .8em 1.5em !important;}
#plus1.unit h2{background-image:url(../img/topics.svg); width:280px; margin:-1em 0 .8em 1.5em !important;}
#minogashi.unit h2{background-image:url(../img/stream.svg); width:320px; margin:-1em 0 .8em 1.5em !important;}

#about.unit h3 {padding:0 0 .5em; margin:0;
font-family: "vdl-linegrpop-futoline", sans-serif;
font-weight: 400;
font-style: normal;
color:#e6369a;
font-size:180%;
text-align:left;
text-shadow: 0px 0px 10px rgba(232,64,174,0.6), 0px 0px 20px rgba(232,64,174,0.6);
}
#about.unit .cont{font-size:105%;}

#minogashi dl{
font-family: vdl-v7gothic, sans-serif;
font-weight: 500;
font-style: normal;
}
#minogashi dt { font-size: 140%;}
#tver,#paravi {background: rgba(255,255,255,0.1);}
#paravi .logoimg {background-image: url(../img/u-next.svg?1); /*background-size:80%;*/ background-position:center,center;}
#minogashi #tbsfree .mainimg{background-image: url(../img/johnson_tbs.jpg); background-size:cover; background-position:center center;}

#plus1.unit{padding:0 0 1.5em;}
#plus1.unit h3{text-align:left; padding:0 0 .5em 1.5em; margin:0;}
#plus1.unit h3 span.new_txt{
display:inline-block;
font-family: "vdl-linegrpop-futoline", sans-serif;
font-weight: 400;
font-style: normal;
color:#f7fd53;
font-size:110%;
text-shadow: 0px 0px 10px rgba(247,253,83,0.6), 0px 0px 20px rgba(247,253,83,0.6);
}
#plus1.unit .cont{font-size:100%;}
#plus1.unit .cont p{line-height:160%;}

#plus1.unit .btn { width:52%; height:auto; margin:1em auto 0; background:none !important; border-radius: 18px !important; color:#ff21b2 !important; transition: .5s; position: relative; padding:7% 0;}
#plus1.unit .btn:hover{opacity:0.5;}
#plus1.unit .btn a { width: 100%; height: 100%; display: block; border-radius: 18px !important; color:#ff21b2 !important; border:2px solid #e6369a; box-shadow: 0px 0px 16px rgba(232,64,174,0.6), 6px 7px 7px 1px rgba(232,64,174,0.3);}
#plus1.unit .btn a:hover { background:none;}
#plus1.unit .btn span {letter-spacing:.1em; font-weight: 600; text-align: center; font-size:120%; color:#ff21b2 !important; display:inline-block;}
#plus1.unit .btn:before { content: ''; width: 12px; height: 12px; border-top: 3px solid #ff21b2; border-right: 3px solid #ff21b2; position: absolute; top:43%; right: 6%; display: inline-block; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}

#new .inner li{background:none;}
#new.unit{margin:4em 0 3em; border:2px solid #21eeff; box-shadow: 0px 0px 16px rgba(113,231,252,0.6), 6px 7px 7px 1px rgba(113,231,252,0.2);}
#new.unit h2{
font-family: "vdl-linegrpop-futoline", sans-serif;
font-weight: 400;
font-style: normal;
color:#21eeff;
font-size:180%;
text-align:center;
text-shadow: 0px 0px 10px rgba(113,231,252,0.6), 0px 0px 20px rgba(113,231,252,0.6);
}
#new .inner li .mtxt .date_txt,#new .inner li .mtxt .date_txt-pc {color:#21eeff !important;}
.morebtn_link {border: 1px solid #21eeff; color:#21eeff; position: relative; line-height: 100%;}

#tbs-realtime a {background-size: contain; border-radius:16px; box-shadow: inset 0px 0px 0px 4px #fff;}

#share_space{padding: 1.2em 0 .8em;}
#share_space dt,.sns_space dt {color:#fff !important;}
#share_space dt:before, #share_space dt:after {background-color: rgba(255,255,255,1) !important;}
#keyword{padding: 1.2em 0 1em;}
#keyword.unit h2{color:#fff;}

#sns_space{padding:.5em 0;}
#share_space,#keyword,.sns_space{text-align: center;}
.sns_space dl {background:none !important;}

.keyword_ul li {background:none; border:1px solid #e6369a;}
.keyword_ul li span {color:#e6369a;}

#next_date{color:#000; font-size:120%; padding:.5em 0 .5em 5%;}
#next_date  span{background: linear-gradient(transparent 65%, #fffd6d 65%); padding:0 .3em .3em;}

.btn{border-radius:0 !important; background:#0095FF !important; margin:1em auto 0; padding:.5em 0; width:60%;}
.btn:before {position: absolute; top:40%; right: 6%;}
.btn span{line-height:135%;}

.hid{visibility: hidden;}
.adv {display:block; width:300px; height: 250px; background:#fff; margin:0 auto 1em;}

#gotop{position:fixed !important; bottom:10px; right:.8%; z-index:10; display:block; width:100px; height:161px; margin:0 0 0 auto; background-size:contain; transition:.5s; opacity:0; }
#gotop.isActive {opacity: 1;}

@media all and (min-width: 768px) {
.nobr{display: none;	}
#tbs-realtime{margin:1em auto 0;}
}

@media all and (max-width: 767px) {
.pcbr{display: none;	}
main.johnson header{padding:5% 0 0;}
main.johnson header .mainimg{width:96%; height:0; padding:68.5% 0 0; border-radius:4vw;}
#container_johnson{
padding:4% 0 0;
background-image:url(../img/johnson.png),url(../img/ink2.png),url(../img/ink4.svg),url(../img/bg2.png);
background-repeat:no-repeat,no-repeat,no-repeat,repeat;
background-position:right 5% top 1.5%,right -40% top 0,right -20% top 35%,0 0;
background-size:35%,70%,58%,150%;
}
#contents{background:none !important;}

main.johnson .menu .hidebox {margin:5% auto 0;}
.menu .hidebox{opacity:1; height:auto;}
.menu label {display:none;}
.menu .hidebox ul {padding:1.8% 0; flex; flex-flow: row wrap; justify-content: center; align-items: center;}
.menu .hidebox li{font-size:7vw; vertical-align: middle; width:auto; padding:0 .5em .25em;}
.menu .hidebox li:before{
  top:25%;
  left:-4%;
font-size:85%;
}
.menu .hidebox li a{width:100%; height:100%; display:block;} 

.unit,#share_space,.sns_space{width:96%; margin:12% auto 0 !important; border-radius:4vw;}
.unit h3 {font-size:4.5vw; padding:2.5%;}
.unit h4 { font-size:3.9vw;}

.ink1{left:-10%; top:-8%; width:38%;}
.ink5{right:0; top:-18%; width:30%; z-index:0;}
.ink4{display:none;}
.ink3{position:absolute; left:0; bottom:8%; width:40%; z-index:-1;}

#next_onair.unit{margin:5% auto 0 !important; padding:0 0 4%;}
#next_onair #next_date{font-size:4vw; line-height:150%;}
#next_onair.unit .sub_txt{font-size:3.8vw; margin:2.5% 5%;}
#next_onair.unit .player-border{margin: .5em auto 2.5%;}

#about.unit h2,#next_onair.unit h2,#plus1.unit h2,#minogashi.unit h2{width:50%; height:0; padding:15% 0 0; margin:-1.25em 0 0 5% !important;}
#plus1.unit h2{width:54%; margin:-1.25em 0 2.5% 5% !important;}
#minogashi.unit h2{width:61%; margin:-1.25em 0 2.5% 5% !important;}
#about.unit h3{font-size:7vw;}
#about.unit .cont{font-size:4vw;}

#paravi .logoimg { background-size: 90%; background-position: center center; }

#plus1.unit{padding:0 0 3%;}
#plus1.unit h3{padding:0 0 .5em 5%;}
#plus1.unit .cont{padding:0 !important;}
#plus1.unit .btn { width:70%; border-radius:4vw !important; padding:9% 0;}
#plus1.unit .btn a{border-radius:4vw !important;}
#plus1.unit .btn span{font-size:4.5vw;}
#plus1.unit .btn:before{right: 5%; width:2.4vw; height:2.4vw;}

#new{padding: .5em 0 0 !important;}
#new.unit{width:96%; margin:6% auto !important;}
#new.unit h2{text-align:left; width:92%; font-size:8vw; margin:0  auto !important; padding:2.5% 0 4% 2% !important; }
#new h2 .link_txt {font-size:3.5vw !important; padding-right: 13px;
text-shadow:none;
font-family: vdl-v7gothic, sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing:.05em;
}
#new h2 .link_txt a{color:#21eeff;}
#new h2 .link_txt:before {width: 2vw; height: 2vw; border: 1px solid #21eeff; border-left: 0; border-bottom: 0; position: absolute; bottom: 3px; right: 0;}

#tbs-realtime{ margin: 0 auto 10% !important;}
#tbs-realtime a {border-radius:2vw;}

/*#share_space dt,#sns_space dt{font-size:5vw;}*/
#share_space,#keyword{padding:4% 0 4%;}
#share_space,.sns_space,#keyword.unit{margin:5% auto !important;}

#sns_space dt{padding:4% 0 2%;}
#sns_space dd {padding:0 0 4%;}
#sns_space .sns {width:auto; height:auto; padding:8% 0; flex-basis:45%; margin: .5em 1% 0;}
#sns_space .sns .sns_txt {font-size:4vw;}
#sns_space .sns .sns_txt:before {width:8vw; height:8vw;}

.keyword_ul li { height: 40px; flex-basis:43%;}

.btn{width:70%;}
.adv {margin:1em auto;}
.adv:last-of-type {margin:1em auto 1.5em;}
#gotop{bottom:65px; width:60px; height:97px;}

.info_txt-s{ font-size: 2.8vw !important; color: rgba(129, 137, 157,1); padding:5% 0 0 !important;}
}

.animation{
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.animation.active{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.animation1{opacity:0;
animation:anime1 1s ease 0.1s 1 forwards;
}
@keyframes anime1 {
    0% {opacity:0; transform: translate3d(0, 100px, 0); -webkit-transform: translate3d(0, 100px, 0);}
    100% {opacity:1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);}
}

#kiyaku{
	background-color: #f4f4f4;
	border: 2px solid #000;
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	height: 30em;
  overflow-y: auto;
}

.bktotop{display:none;}