/* =================================
	TOP CSS
================================= */

.bg{
	position: relative;
}

/*	header main_image
============================== */
header{
	position: relative;
}
@keyframes example1 {
  0% {opacity: 0;
  transform: scale(1.05);}
  100% {opacity: 1;
  transform: scale(1);}
}

@media all and (min-width: 768px) {
.poster_bg{
	width: 100%;
	height: 568px;
}
header{
	width: 960px;
	height: 540px;
	background-image:url(../img/top/main_image2.jpg);
	margin: 20px auto 0;
	animation: example1 1.3s ease-in-out 0.3s 1 forwards;
	box-shadow:0px 0px 15px 15px rgba(255,255,255,0.5);
	opacity: 0;
}
h1.logo{
	width: 960px;
	height: 540px;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center top;
}
}
@media all and (max-width: 767px) {
header{
	overflow:hidden;
}
header h1{
	background-image:url(../img/top/main_image2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	height: 0;
	margin:15px auto 0;
	padding-top: 56.25%;
	animation: example1 1.3s ease-in-out 0.3s 1 forwards;
	opacity: 0;
}
}

/*	main
============================== */
.bg1,.bg2{
	width: 100%;
	overflow:hidden;
}
.bg2{
	background-image:url(../img/bg2.png);
}
@media all and (min-width: 768px) {
.bg1 {
	height: 1077px;
	height: 877px;
}
.bg2 {
	height: 450px;
}
}
@media all and (max-width: 767px) {
.bg2 {
	border-top: 2px solid #e5e5e5;
}
}

/*	menu_area
============================== */
.menu_area,.contents_area{
	position: relative;
}

/* m_paravi2
============================== */
@media all and (min-width: 768px) {
.m_paravi2{
	width: 590px;
	height: 204px;
	left: 194px; top: 60px;
	position: absolute;
}
.m_paravi2 a{
	background-image:url(../img/top/m_paravi_p.jpg?20190116_1);
	width: 590px;
	height: 204px;
	display: block;
	transition: 0.2s ease-in-out;
}
.m_paravi2 a:hover{
	opacity:0.7;
	background-color: #fff;
}
}
@media all and (max-width: 767px) {
.m_paravi2{
	margin: 20px 15px 15px;
}
.m_paravi2 a{
	background-image:url(../img/top/m_paravi_p.jpg?20190116_1);
  display: block;
  position: relative;
  transition: color 0.3s;
	background-size:contain;
  padding-top: 34.5762%;
  overflow: hidden;
  height: 0;
}
}

/*	onair_info
============================== */
.onair_info{
	text-align: center;
}
.onair_info a{
	text-decoration: none;
	color: #000;
}
.onair_info b{
	background: linear-gradient(transparent 50%, #fff500 0%);
	padding: 0 5px;
}
.onair_info .story_blue{
	color: #0053ac;
}
@media all and (min-width: 768px) {
.onair_info_area{
	margin: 0 auto;
	text-align: center;
}
.onair_info{
	font-size: 140%;
	width: 960px;
	margin: 2px 0 0;
}
.more_info{
	background-color: #ec1f2f;
	color: #fff;
	font-size: 75%;
	padding: 4px;
	font-weight: 400;
	position: relative;
	margin-left: 1em;
}
.more_info:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -16px;
 	margin-top: -3px;
	border: 4px solid transparent;
	border-right: 12px solid #ec1f2f;
}
}
@media all and (max-width: 767px) {
.onair_info{
	margin: 15px 0 15px;
	font-size: 95%;
	line-height: 1.7;
}
.more_info_box{
	display: block;
	margin-top: 5px;
}
.more_info{
	background-color: #ec1f2f;
	color: #fff;
	font-size: 90%;
	padding: 4px;
	font-weight: 400;
	position: relative;
}
}
/*	whats_new
============================== */
@media all and (min-width: 768px) {
.whats_new{
	width: 830px;/*twボタンのみ%*/
	/*width: 774px;SNSあり*/
	height: 86px;
	background-image:url(../img/top/whats_new_2.png);/*twボタンのみ*/
	/*background-image:url(../img/top/whats_new.png);SNSあり*/
	background-repeat:no-repeat;
	position: absolute;
/*	left: 10px; top: 295px;*/
	left: 10px; top: 60px;
}
}
@media all and (max-width: 767px) {
.whats_new{
	background-color: #fff;
	margin: 15px 0 10px;
  border-bottom: 10px solid #fff500;
}
.whats_new h2{
	text-align: center;
	background-color: #fff500;
	color: #000;
	font-weight: 800;
	font-size: 80%;
	padding: 3px 0;
}
}

/*	ticker
============================== */

div.ticker div.tck-outer {
	width:100%;
	overflow:hidden;
	position:relative;
	height:1.25em;
}
div.ticker div.tck-outer ul.tck-inner, div.ticker ul.tck-inner li, div.ticker ul.tck-inner li a {
	display:inline;
	white-space:nowrap;
}
div.ticker div.tck-outer ul.tck-inner {
	position:absolute;
	line-height:1.25;
}
div.ticker div.tck-outer ul.tck-inner li {
	position:relative;
	padding-right:3em;
}
div.ticker div.tck-outer ul.tck-inner li:before {
	content:"";
	width:20px;
	height:20px;
	display:inline-block;
	position:absolute;
	top:50%;
	margin-top:-10px;
}
div.ticker ul.tck-inner li a {
	color:#000;
	text-decoration:none;
	padding-left:26px;
}
span.date{
	background-color: #141414;
	color: #fff500;
	padding:3px;
	margin-right:10px;
	font-weight: normal;
	text-decoration:none;
}
span.date a:hover{
	text-decoration:none;
}
@media all and (min-width: 768px) {
div.ticker{
	margin: 0 22px 0 162px;
	padding:31px 0 0;
}
div.ticker ul.tck-inner li a {
	font-size:87.5%;
}
div.ticker ul.tck-inner li a:hover {
	text-decoration:underline;
}
span.date{
	font-size: 87.5%;
}
}
@media all and (max-width: 767px) {
div.ticker{
	border-left: none;
	border-right: none;
	padding:0.3em 0 0.4em;
}
div.ticker ul.tck-inner li a {
	font-size:50%;
}
}

/*	sns_l_btn
============================== */
@media all and (min-width: 768px) {
.sns_l_btn{
	width: 130px;
	height: 90px;
	position: absolute;
/*	left: 840px; top: 295px;*/
	left: 840px; top: 60px;
}
.twitter_btn,.instagram_btn{
	width: 65px;
	height: 65px;
	background-repeat:no-repeat;
}
.twitter_btn a,.instagram_btn a{
	display: block;
	width: 65px;
	height: 65px;
}
.twitter_btn{
	background-image:url(../img/top/twitter_btn.png);
	position: absolute;
	left: 37px; top: 0px;
}
.instagram_btn{
	background-image:url(../img/top/instagram_btn.png);
	position: absolute;
	left: 84px; top: 0px;
}
.sns_com{
	width: 94px;
	height: 20px;
	background-image:url(../img/top/sns_com.png);
	background-repeat:no-repeat;
	position: absolute;
	left: 24px; top: 70px;
}
}
@media all and (max-width: 767px) {
/* m_intro m_story */
.sns_l_btn{
	margin: 0 15px 0px;
}
.twitter_btn,.instagram_btn{
	margin:15px auto 0;
	width: 200px;
	height: 48px;
}
.twitter_btn a,.instagram_btn a,.twitter_btn b,.instagram_btn b {
	display: block;
	width: 200px;
	height: 48px;
	background-size: 200px 48px;
	position: relative;
	border-bottom: 3px solid #cacac2;
}
.twitter_btn a{
	background-image:url(../img/top/smp/twitter_btn.png);
}
.instagram_btn a{
	background-image:url(../img/top/smp/instagram_btn.png);
}
.sns_com{
	text-align:center;
	font-size: 60%;
	line-height: 2;
	clear: both;
	font-weight: 800;
	margin-top: 3px;
}
}

/*	menu
============================== */
.menu li{
	background-repeat:no-repeat;
	z-index: 1;
}
.m_interview,.m_photo{
	position: relative;
}
.btn_date{
	background-color: #1a1a1a;
	color: #fff;
	font-weight: normal;
	z-index: 2;
}
@media all and (min-width: 768px) {
/* m_intro */
.m_intro{
	width: 485px;
	height: 148px;
	left: 0px; top: 410px;
	left: 0px; top: 195px;
	position: absolute;
	background-image:url(../img/top/m_intro.png);
}
.m_intro a{
	width: 485px;
	height: 148px;
	display: block;
	transition: 0.2s ease-in-out;
}
.m_intro a:hover{
	opacity:0.4;
	background-color: #fff;
}
/* m_story */
.m_story{
	width: 485px;
	height: 148px;
	left: 0px; top: 360px;
	position: absolute;
	background-image:url(../img/top/m_story.png);
}
.m_story a{
	width: 485px;
	height: 148px;
	display: block;
	transition: 0.2s ease-in-out;
}
.m_story a:hover{
	opacity:0.4;
	background-color: #fff;
}
/* menu */
.menu li{
	width: 238px;
	height: 143px;
	position: absolute;
}
.menu li a{
	width: 238px;
	height: 143px;
	display: block;
	transition: 0.2s ease-in-out;
}
.menu li a:hover{
	opacity:0.4;
	background-color: #fff;
}
.menu .m_onair{
	left: 0px; top: 537px;
	background-image:url(../img/top/m_onair3.png);
}
.menu .m_cast{
	left: 247px; top: 537px;
	background-image:url(../img/top/m_cast3.png);
}
.menu .m_staff{
	left: 495px; top: 537px;
	background-image:url(../img/top/m_staff3.png);
}
.menu .m_chart{
	left: 742px; top: 537px;
	background-image:url(../img/top/m_chart3.png);
}
.menu .m_interview{
	left: 0px; top: 692px;
	background-image:url(../img/top/m_interview3.png);
}
.menu .m_photo{
	left: 247px; top: 692px;
	background-image:url(../img/top/m_photo3_open.png);
}
.menu .m_bbs{
	left: 495px; top: 692px;
	background-image:url(../img/top/m_bbs3.png);
}
.menu .m_stamp{
	left: 742px; top: 692px;
	background-image:url(../img/top/m_stamp3_open.png);
}
.btn_date{
	padding:6px;
	position: absolute;
	left: 0px;
	top: 6px;
	font-size:80%;
}
.btn_date:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -13px;
	border: 4px solid transparent;
	border-top: 8px solid #1a1a1a;
}
}
@media all and (max-width: 767px) {
/* m_intro m_story */
.menu_main{
	margin: 0 15px 20px;
}
.menu_main_btn{
	margin:10px auto 0;
	width: 49%;
	float: left;
	margin-right: 2%;
}
.menu_main_btn:nth-child(2n){
  margin-right: 0%;
}
.menu_main_btn a,.menu_main_btn b {
  display: block;
  position: relative;
  transition: color 0.3s;
	background-size:contain;
  padding-top: 43.1893%;
  overflow: hidden;
  height: 0;
}
.m_intro a{
	background-image:url(../img/top/smp/m_intro.png);
}
.m_story a{
	background-image:url(../img/top/smp/m_story.png);
}
/* menu */
.menu ul{
	margin: 0 15px 22px;
}
.menu ul li.m_two{
	margin:10px auto 0;
	width: 49%;
	float: left;
	margin-right: 2%;
}
.menu ul li.no_r{
  margin-right: 0%;
}
.menu ul li.m_two a,.menu ul li.m_two b {
  display: block;
  position: relative;
  transition: color 0.3s;
	background-size:contain;
  padding-top: 43.1893%;
  overflow: hidden;
  height: 0;
}
.menu ul li.m_wide{
	margin:10px auto 0;
	width: 100%;
	float: left;
}
.menu ul li.m_wide a,.menu ul li.m_wide b {
  display: block;
  position: relative;
  transition: color 0.3s;
	background-size:contain;
  padding-top: 20.9677%;
  overflow: hidden;
  height: 0;
}
.menu .m_cast a{
	background-image:url(../img/top/smp/m_cast.png);
}
.menu .m_staff a{
	background-image:url(../img/top/smp/m_staff.png);
}
.menu .m_onair a{
	background-image:url(../img/top/smp/m_onair.png);
}
.menu .m_chart a{
	background-image:url(../img/top/smp/m_chart.png);
}
.menu .m_bbs a{
	background-image:url(../img/top/smp/m_bbs.png);
}
.menu .m_interview a{
	background-image:url(../img/top/smp/m_interview.png);
}
.menu .m_photo a,.menu .m_photo b{
	background-image:url(../img/top/smp/m_photo_open.png);
}
.menu .m_stamp a,.menu .m_stamp b{
	background-image:url(../img/top/smp/m_stamp_open.png);
}
.btn_date{
	padding:3px;
	position: absolute;
	left: -4px;
	top: -6px;
	font-size:50%;
}
}

/* delivery_area
============================== */
@media all and (min-width: 768px) {
/* m_tbsfree */
.m_tbsfree{
	width: 465px;
	height: 175px;
	left: 257px; top: 1062px;
	position: absolute;
}
.m_tbsfree a{
	background-image:url(../img/m_tbsfree.png);
	width: 465px;
	height: 175px;
	display: block;
	transition: 0.2s ease-in-out;
}
.m_tbsfree a:hover{
	opacity:0.7;
	background-color: #fff;
}
}
@media all and (max-width: 767px) {
/* m_tbsfree */
.m_tbsfree{
	width: 300px;
	height: 113px;
	margin: 0 auto 25px;
}
.m_tbsfree a{
	background-image:url(../img/m_tbsfree.png);
	width: 300px;
	height: 113px;
	background-size: 300px 113px;
	display: block;
}
}

/*	trailer（youtube）
============================== */
@media all and (min-width: 768px) {
.trailer {
	left: 507px; top: 415px;
	left: 507px; top: 200px;
	position: absolute;
	width: 463px;
	height: 310px;
	background-image:url(../img/top/trailer.png);
}
.player-outer > iframe {
	width: 415px;
	height: 234px;
	margin: 54px 0 0 25px;
}
}
@media all and (max-width: 767px) {
.trailer{
	margin: 20px 15px 10px;
	border-bottom: 5px solid #fff500;
}
.trailer h2.trailer_tit {
	padding-top: 11.663%;
	overflow: hidden;
	height: 0;
	background-size: contain;
	background-image:url(../img/top/smp/trailer_tit.png);
}
.player-outer {
	position:relative;
	height:0;
	padding-top:56.25%;
}
.player-outer > iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
}

/*	bg2_area
============================== */
@media all and (min-width: 768px) {
.bg2 .wrap{
	position: relative;
}
/* tw_box */
.tw_box .tw_tit a{
	width: 300px;
	height: 60px;
	display: block;
	background-color: #fff500;
	background-image: url(../img/top/tw_box3.png);
	background-repeat: no-repeat;
	position: relative;
}
.tw_box{
	width: 300px;
	height: 350px;
	left: 175px; top: 42px;
	position: absolute;
	background-color: #fff;
	border-bottom: 5px solid #cacac2;
}
/* insta_box */
.insta_box .insta_tit a{
	width: 465px;
	height: 60px;
	display: block;
}
.insta_box{
	width: 465px;
	height: 509px;
	left: 505px; top: 42px;
	position: absolute;
	background-image:url(../img/top/insta_box.png);
}
}
@media all and (max-width: 767px) {
/*.bg2 .wrap{
	margin: 0 15px;
}*/
.tw_box{
	width: 300px;
	margin: 20px auto 25px;
	background-color: #fff;
	border-bottom: 3px solid #cacac2;
}
.tw_box .tw_tit a{
	width: 300px;
	height: 40px;
	display: block;
	background-color: #fff500;
	background-image: url(../img/top/smp/tw_tit.png);
	background-repeat: no-repeat;
	position: relative;
}
.twitter-widget-wrapper iframe { width: 740px !important; }
.insta_box{
	width: 740px !important;
	margin: 20px auto 25px;
	background-color: #fff;
	border-bottom: 3px solid #cacac2;
}
.insta_box .insta_tit a{
	width: 300px;
	height: 40px;
	display: block;
	background-color: #fff500;
	background-image: url(../img/top/smp/insta_tit.png);
	background-repeat: no-repeat;
	position: relative;
}
}

/*	Instagram
============================== */
div.insta {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	overflow:hidden;
}
div.insta ul{margin:5px 0 0 16px;}
div.insta ul li {float:left; margin:8px 8px 0 0;}
div.insta ul li a, div.insta ul li a img {
	display:block;
	background-position:center center;
	background-repeat:no-repeat;
}
div.insta ul li a {background-size:cover;}
div.insta ul li a:hover img {background-color:hsla(216,82%,13%,0.25);}
div.insta ul li a img {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:1px solid #ccc;
}
div.insta ul li a img.icon-video {background-image:url(/um/img/play.png);}

@media all and (min-width: 768px) {
div.insta {
	padding: 30px 42px 20px;
}
div.insta ul li a, div.insta ul li a img{
	width:170px;
	height:170px;
}
}
@media all and (max-width: 767px) {
div.insta {
	padding: 10px 32px 20px;
}
div.insta ul li a, div.insta ul li a img{
	width:100px;
	height:100px;
}
}

/*	recta
============================== */
@media all and (min-width: 768px) {
div.recta{
	float: right;
	padding-top: 55px;
	padding-right: 174px;
}
}
@media all and (max-width: 767px) {
div.recta{
	margin:0 auto;
	text-align: center;
}
}

/*	footer
============================== */

footer {
	width: 100%;
	text-align: center;
	color: #fff;
	background-color:#000;
}
footer .copyright a{
	color: #fff500;
}
@media all and (min-width: 768px) {
footer {
	font-size: 75%;
	min-height: 100px;
}
footer .copyright{
	padding-top: 30px;
}
}
@media all and (max-width: 767px) {
footer {
	font-size: 62.5%;
	padding:20px 0px 20px;
	line-height: 1.5;
}
footer .copyright{
	padding: 10px 10px 0;
	line-height: 1.3;
}
}

/*	sns buttons
============================== */
.sns-btns {
	text-align:center;
	position:relative;
}
.sns-btns .tw, .sns-btns .fb {
	text-align:left;
	width:120px;
	display:inline-block;
}
@media all and (min-width: 768px) {
.sns-btns {
	left: 528px; top: 340px;
	position: absolute;
	float: left;
}
.sns-btns .tw{
	margin-left: 20px;
}
}
@media all and (max-width: 767px) {
.sns-btns {
	padding-top:15px;
	margin-bottom:30px;

}
}