@charset "utf-8";

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; background: #fff; }
body {
	width: 100%;
	height: 100%;
	min-width: 960px;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #040542;
}
input { font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif; }
ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a:link { color: #040542; text-decoration: none; }
a:visited { color: #040542; text-decoration: none; }
a:hover { text-decoration: none; }
.device_click a:hover,
.device_click input[type=image]:hover,
.device_click input[type=submit]:hover { opacity: .6; filter: alpha(opacity=60); }
.device_click .btn_over:hover { opacity: 1; filter: alpha(opacity=100); }

.pc { display: block !important; }
.sp { display: none !important; }

/* space
------------------------------------------------ */
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
}
.clearfix:before,.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after { clear: both; }

/* container
------------------------------------------------ */
#container {
	position: relative;
}

#container .wrap {
	position: relative;
	margin: 0 auto;
	width: 950px;
}

/* block */
#container .block1 {
	position: relative;
	margin-top: -96px;
	padding-bottom: 80px;
	background: url(../img/content1_top.png) no-repeat center top;
	z-index: 10;
}

#container .block1:after {
	content: " ";
	position: absolute;
	bottom: -96px;
	left: 0;
	width: 100%;
	height: 96px;
	background: url(../img/content1_btm.png) no-repeat center top;
}

#container .block1 .white {
	position: absolute;
	bottom: -96px;
	height: 96px;
	background: #fff;
}
#container .block1 .white_left { left: 0; }
#container .block1 .white_right { right: 0; }

#container .block2 {
	position: relative;
	padding: 96px 0;
	background: url(../img/content2_bg.png) repeat-y center center #ffdb56;
	z-index: 5;
}

/* header
------------------------------------------------ */
#header {
	border-bottom: solid #8a9da8 1px;
}

/* main
------------------------------------------------ */
#main {
	display: block;
	position: relative;
	width: 100%;
}

/* pagetop */
#pagetop {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 20px;
	width: 98px;
}

/* page_menu
------------------------------------------------ */
#page_menu {
	position: absolute;
	width: 100%;
	height: 48px;
	background: url(../img/head_bg.png) repeat-x left top;
	z-index: 100;
}

	#page_menu .nav {
	}

		#page_menu .nav ul {
			display: none;
			width: 130px;
			background: #e22052;
			border-bottom: solid #dae0e8 1px;
			-webkit-box-shadow: 1px 1px 2px #999;
			-moz-box-shadow: 1px 1px 2px #999;
			-ms-box-shadow: 1px 1px 2px #999;
			-o-box-shadow: 1px 1px 2px #999;
			box-shadow: 1px 1px 2px #999;
		}

			#page_menu .nav ul li {
				border-top: solid #dae0e8 1px;
				border-bottom: solid #bbc7d4 1px;
				text-align: center;
				font-size: 15px;
				font-size: 1.5rem;
				font-weight: bold;
				line-height: 1;
			}
			#page_menu .nav ul li:first-child { border-top: none; }

				#page_menu .nav ul li a {
					display: block;
					padding: 10px 0;
					color: #fff;
				}

		#page_menu .nav .btn {
			margin-left: -2px;
			width: 136px;
		}

/* title_block
------------------------------------------------ */
#title_block {
	position: relative;
	height: 500px;
/* 	height: 652px; */
}

#title_block:before,
#title_block:after {
	content: " ";
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
}
#title_block:before { left: 0; background: #0090af; }
#title_block:after { right: 0; background: #4aaccc; }

	#title_block .content {
		position: relative;
		width: 100%;
		height: 100%;
		background: url(../img/title_bg.gif) repeat-y center top;
		z-index: 2;
	}
	
		#page_title {
			margin: 0 auto;
			padding-top: 20px;
			width: 931px;
		}

	#title_block .sns {
		position: absolute;
		top: 64px;
		right: 0;
		padding: 10px 0;
		width: 54px;
		background: #fff;
		-webkit-border-radius: 5px 0 0 5px;
		-moz-border-radius: 5px 0 0 5px;
		-ms-border-radius: 5px 0 0 5px;
		-o-border-radius: 5px 0 0 5px;
		border-radius: 5px 0 0 5px;
		z-index: 5;
	}

		#title_block .sns .nhk-snsbtn {}
			#title_block .sns .nhk-snsbtn .nhksns { display: block; margin: 0 auto; width: 30px; }
				#title_block .sns .nhk-snsbtn .nhksns li { display: block; margin-bottom: 10px; width: 100%; }
					#title_block .sns .nhk-snsbtn .nhksns li a { display: block; }
						#title_block .sns .nhk-snsbtn .nhksns li a img { width: 100%; }
			#title_block .sns .nhksns-guide { margin: 0 2px !important; font-size: 10px; font-weight: normal; }
				#title_block .sns .nhksns-guide a { display: block; margin: 4px auto 0; width: 26px; }
					#title_block .sns .nhksns-guide a img { width: 100%; }

/* performer
------------------------------------------------ */
#performer {
	padding-top: 54px;
}

	#performer .title {
		margin: 0 auto;
		width: 867px;
	}

		#performer .title img { margin-left: 6px; }

	#performer .sns {
		display: none;
	}

/* another_judge */
#another_judge {
	margin: 20px auto 40px;
	width: 686px;
	background: url(../img/another_judge_bg.png) no-repeat center top;
	background-size: 100%;
	text-align: center;
}

	#another_judge .title {
		margin-bottom: 6px;
		width: 540px;
	}

	#another_judge .lead {
		font-size: 18px;
		font-size: 1.8rem;
	}

	#another_judge .text {
		margin-top: 20px;
		font-size: 24px;
		font-size: 2.4rem;
		font-weight: bold;
		color: #e22052;
	}

	#another_judge .vote {
		margin: 20px auto 0;
		width: 358px;
	}

		#another_judge .vote a { display: block; }

	#another_judge .note {
		margin-top: 10px;
		text-align: center;
		font-size: 14px;
		font-size: 1.4em;
		color: #c79a2f;
	}

/* news_staff */
#news_staff {
	margin: 40px 5px 30px;
}

	#news_staff .box {
		position: relative;
		float: left;
		padding-top: 14px;
		width: 458px;
		height: 100px;
		background: #ffdb56;
	}
	#news_staff #staff { float: right; }

		#news_staff .box .title {
			position: absolute;
			top: -12px;
			left: -10px;
			width: 46px;
			z-index: 2;
		}

		#news_staff .box .frame {
			position: relative;
			margin-left: 36px;
			padding-right: 20px;
			width: 385px;
			height: 88px;
			overflow: auto;
			z-index: 1;
		}

			#news_staff .box dl {
				padding: 6px 0;
				width: 386px;
				border-bottom: dotted #fff 1px;
			}

				#news_staff .box dl dt,
				#news_staff .box dl dd {
					display: inline-block;
					vertical-align: top;
					font-size: 14px;
					font-size: 1.4rem;
					line-height: 1.4;
				}

				#news_staff .box dl dt { padding-left: 10px; width: 94px; color: #007897; }
				#news_staff .box dl dd { width: 282px; color: #671b42; }

		#news_staff .box .coming {
			text-align: center;
			font-size: 16px;
			font-size: 1.6rem;
			font-weight: bold;
			line-height: 100px;
		}

/* tournament */
#tournament {
	position: relative;
	width: 100%;
	height: 688px;
	background: url(../img/tournament_bg2.png) no-repeat center top;
}

	#tournament ul {
		position: absolute;
		top: 0;
		width: 400px;
	}
	#tournament .block_a { left: 0; }
	#tournament .block_b { right: 0; }

		#tournament ul li {
			position: absolute;
			width: 230px;
		}
		#tournament ul .list1 { top: 24px; }
		#tournament ul .list2 { top: 230px; }
		#tournament ul .list3 { top: 434px; }

		#tournament .block_a .list1 { left: 168px; }
		#tournament .block_a .list2 { left: 0; }
		#tournament .block_a .list3 { left: 168px; }

		#tournament .block_b .list1 { right: 168px; }
		#tournament .block_b .list2 { right: 0; }
		#tournament .block_b .list3 { right: 168px; }

			#tournament ul li a { display: block; }

/* appeal
------------------------------------------------ */
#appeal {
	padding-bottom: 240px !important;
}

	#appeal .title {
		margin: 0 auto 60px;
		width: 420px;
	}

	#appeal .box {
		position: relative;
		margin-top: 40px;
		width: 850px;
		height: 386px;
		background: #fff;
		border: solid #89103f 18px;
	}

		#appeal .box .video { position: relative; float: left; margin: 34px 0 0 34px; width: 450px; height: 274px; }
			#appeal .box .video img,
			#appeal .box .video embed,
			#appeal .box .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		#appeal .box .info { position: relative; float: left; margin: 34px 0 0 20px; width: 300px; z-index: 2; }
			#appeal .box .group { position: absolute; top: -76px; right: -100px; }
			#appeal .box .info .name { font-size: 26px; font-size: 2.6rem; font-weight: bold; color: #040542; }
			#appeal .box .info .profile { font-size: 16px; font-size: 1.6rem; }
		#appeal .box .photo { position: absolute; right: 0; bottom: 0; z-index: 1; }
			#appeal .box .photo img { vertical-align: bottom; }
		#appeal .box .like { position: absolute; bottom: 0; left: 34px; }
			#appeal .box .like dt,
			#appeal .box .like dd { display: inline-block; vertical-align: top; font-size: 10px; font-size: 1rem; line-height: 1; }
			#appeal .box .like dt { padding-top: 15px; }
			#appeal .box .like dd { margin-left: 12px; width: 283px; height: 66px; background: url(../img/appeal_board.png) no-repeat left bottom; }
				#appeal .box .like dd p { display: inline-block; vertical-align: bottom; }
				#appeal .box .like dd .btn { padding-left: 32px; width: 79px; height: 66px; }
				#appeal .box .like dd .num { margin-left: 22px; width: 108px; height: 38px; background-position: left bottom; background-repeat: no-repeat; text-align: center; }
				#appeal .box_a .like dd .num { background-image: url(../img/appeal_board_a.png); }
				#appeal .box_b .like dd .num { background-image: url(../img/appeal_board_b.png); }
					#appeal .box .like dd .num span { display: block; font-size: 10px; font-size: 1rem; line-height: 38px; color: #fff; }
						#appeal .box .like dd .num span img { margin: 0 1px; padding-top: 2px; height: 24px; max-width: inherit; vertical-align: middle; }

/* introduce
------------------------------------------------ */
#introduce {
	padding-top: 74px;
}

	#introduce .title {
		margin: 0 auto 40px;
		width: 324px;
	}

	#introduce .lead {
		margin-bottom: 34px;
		text-align: center;
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: bold;
	}

	#introduce dl {
		margin: 0 auto;
		padding: 24px 0;
		width: 396px;
		border-top: dotted #040542 1px;
	}

		#introduce dl dt,
		#introduce dl dd {
			text-align: center;
			font-size: 16px;
			font-size: 1.6rem;
		}

		#introduce dl dt { font-weight: bold; }
		#introduce dl dd { margin-top: 10px; }

	#introduce .date {}
	#introduce .host {}
		#introduce .host dd {}
			#introduce .host dd ul {}
				#introduce .host dd ul li { display: inline-block; vertical-align: top; }
				#introduce .host dd ul .host1 { width: 260px; }
				#introduce .host dd ul .host2 { margin-left: 14px; width: 122px; }
					#introduce .host dd ul li .photo {}
						#introduce .host dd ul li .photo img { margin-bottom: 8px; }
						#introduce .host dd ul li .photo figcaption { line-height: 1.4; }

/* cm
------------------------------------------------ */
#cm {
/* 	padding-bottom: 240px !important; */
}

	#cm .title {
		display: none;
		margin: 0 auto 60px;
		width: 300px;
	}

	#cm .box {
		display: none;
		position: relative;
		margin-top: 40px;
		width: 850px;
		height: 386px;
		background: #fff;
	}

	#cm .box_a { border: solid #0090AF 18px; }
	#cm .box_b { border: solid #C1114A 18px; }

		#cm .box .info { position: relative; float: right; margin: 114px 46px 0 0; width: 300px; z-index: 2; }
			#cm .box .info .name { font-size: 26px; font-size: 2.6rem; font-weight: bold; color: #040542; }
		#cm .box .video { position: relative; float: left; margin: 34px 0 0 34px; width: 450px; height: 274px; }
			#cm .box .video img,
			#cm .box .video embed,
			#cm .box .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		#cm .box .photo { position: absolute; right: 0; bottom: 0; z-index: 1; }
			#cm .box .photo img { vertical-align: bottom; }
		#cm .box .like { position: absolute; bottom: 0; right: 34px; width: 288px; }
			#cm .box .like dt,
			#cm .box .like dd { display: inline-block; margin: 0 auto; vertical-align: top; font-size: 10px; font-size: 1rem; line-height: 1; }
			#cm .box .like dt { width: 288px; padding-top: 15px; }
			#cm .box .like img { margin: 0 auto;}
			#cm .box_a .like dd { margin: 18px 0 0; width: 283px; height: 66px; background: url(../img/cm_board_bb.png) no-repeat left bottom; }
			#cm .box_b .like dd { margin: 18px 0 0; width: 283px; height: 66px; background: url(../img/cm_board_pb.png) no-repeat left bottom; }
				#cm .box .like dd p { display: inline-block; vertical-align: bottom; }
				#cm .box .like dd .btn { padding-left: 32px; width: 79px; height: 66px; }
				#cm .box .like dd .num { margin-left: 22px; width: 108px; height: 38px; background-position: left bottom; background-repeat: no-repeat; text-align: center; }
				#cm .box_a .like dd .num { background-image: url(../img/cm_board_bs.png); }
				#cm .box_b .like dd .num { background-image: url(../img/cm_board_ps.png); }
					#cm .box .like dd .num span { display: block; font-size: 10px; font-size: 1rem; line-height: 38px; color: #fff; }
						#cm .box .like dd .num span img { margin: 0 1px; padding-top: 2px; vertical-align: middle; }

/* footer
------------------------------------------------ */
#footer {
	position: relative;
	width: 100%;
}

/* responsible layout
------------------------------------------------ */
@media screen and (max-width: 640px) {
	/* common */
	body { min-width: inherit; }
	.pc { display: none !important; }
	.sp { display: block !important; }
	a:link,
	a:visited { text-decoration: none; }

	/* container */
	#container {}
	#container .wrap { width: 100%; }

	/* pagetop */
	#pagetop { right: 20px; bottom: 20px; width: 50px; }

	/* block */
	#container .block1 { margin-top: -7.5%; padding-bottom: 40px; background-image: url(../img/sp/content1_top.png); background-size: 100%; }
	#container .block1:after { bottom: -7.5%; height: 7.5%; background-image: url(../img/sp/content1_btm.png); background-size: 100%; }
	#container .block1 .white { display: none; }
	#container .block2 { padding: 40px 0; background-size: 100%; }

	/* page_menu */
	#page_menu { height: 24px; background-size: auto 100%; }
	#page_menu .nav {}
	#page_menu .nav ul { width: 100%; }
	#page_menu .nav ul li { font-size: 1.2rem; }
	#page_menu .nav ul li a { padding: 20px 0; }
	#page_menu .nav .btn { width: 66px; }

	/* title_block */
	#title_block { height: auto; }
	#title_block:before,
	#title_block:after { display: none; }
	#title_block .content { padding-bottom: 20px; /*padding-bottom: 40px;*/ background-image: url(../img/sp/title_bg.gif); background-size: 100%; overflow: hidden; }
	#page_title { margin-left: -8%; width: 116%; }
	#title_block .sns { display: none; }

	/* performer */
	#performer { padding-top: 26px; }
	#performer .title { width: 100%; }
	#performer .title img { margin-left: 0; }
	#performer .sns { display: block; margin-top: 40px; text-align: center; }
	#performer .sns .nhk-snsbtn {}
	#performer .sns .nhk-snsbtn li { margin-right: 8px; }
	#performer .sns .nhk-snsbtn li a { display: block; }
	#performer .sns .nhk-snsbtn li img { width: 28px; }

	/* another_judge */
	#another_judge { margin: 10px 0 20px; width: auto; background: none; }
	#another_judge .title { width: 100%; }
	#another_judge .text { margin-top: 20px; font-size: 1.4rem; }
	#another_judge .lead { margin-top: 10px; font-size: 1.4rem; }
	#another_judge .vote { width: 72%; }
	#another_judge .note { margin-top: 6px; font-size: .8rem; }

	/* news_staff */
	#news_staff { margin: 10px 0 20px; }
	#news_staff .box { float: none !important; margin-top: 10px; padding: 0; width: 100%; height: auto; }
	#news_staff .box:first-child { margin-top: 0; }	
	#news_staff .box .title { top: -4px; left: 6px; width: 24px; }
	#news_staff .box .frame { margin-left: 30px; padding-right: 0; width: 88%; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; }
	#news_staff .box dl { width: 94%; }
	#news_staff .box dl dt,#news_staff .box dl dd { font-size: 1rem; }
	#news_staff .box dl dt { padding-left: 0; width: 24%; }
	#news_staff .box dl dd { width: 76%; }
	#news_staff .box .coming { padding: 10px 0; font-size: 1.4rem; line-height: 1; }

	/* tournament */
	#tournament { height: auto; background-image: url(../img/sp/tournament_bg2.png); background-size: 100%; }
	#tournament ul { display: inline-block; position: relative; top: auto !important; right: auto !important; left: auto !important; margin-top: 12%; width: 50%; vertical-align: top; }
	#tournament ul li { position: relative; top: auto !important; right: auto !important; left: auto !important; margin-top: .5% !important; width: 77.5%; }
	#tournament .block_a li { margin-left: 4%; }
	#tournament .block_b li { margin: 0 4% 0 auto; }

	/* appeal */
	#appeal { padding-bottom: 120px !important; }
	#appeal .title { margin-bottom: 26px; width: 66%; }
	#appeal .box { margin-top: 26px; width: auto; height: auto; border-width: 10px; }
	#appeal .box .video { float: none; margin: 15px; padding-bottom: 52%; width: auto; height: auto; }
	#appeal .box .info { float: none; margin: 15px; width: auto; }
	#appeal .box .group { top: 0; right: -15px; width: 24%; }
	#appeal .box .group:after { content: " "; position: absolute; top: 50%; right: 0; margin-top: -4px; width: 50%; height: 8px; background: #89103f; z-index: 1; }
	#appeal .box .group img { position: relative; width: 82%; z-index: 2; }
	#appeal .box .info .name { font-size: 1.8rem; }
	#appeal .box .info .profile { font-size: 1.2rem; }
	#appeal .box .photo { width: 44%; }
	#appeal .box .like { position: relative; bottom: auto; left: auto; width: 54%; }
	#appeal .box .like dt,#appeal .box .like dd { display: block; }
	#appeal .box .like dt { padding-top: 0; margin: 0 auto; width: 80%; }
	#appeal .box .like dd { margin: 6px 0 0; width: 100%; height: auto; background-image: url(../img/sp/appeal_board.png); background-size: 100%; }
	#appeal .box .like dd .btn { padding-left: 12px; width: 30%; height: auto; }
	#appeal .box .like dd .num { margin-left: 12px; width: 40%; height: auto; min-height: 26px; background-size: 100% 100%; }
	#appeal .box_a .like dd .num { background-image: url(../img/sp/appeal_board_a.png); }
	#appeal .box_b .like dd .num { background-image: url(../img/sp/appeal_board_b.png); }
	#appeal .box .like dd .num span { padding: 4px 0 2px; line-height: 1; color: #fff; }
	#appeal .box .like dd .num span img { padding-top: 4px; height: 12px; }

	/* introduce */
	#introduce { padding-top: 30px; }
	#introduce .title { margin-bottom: 20px; width: 56%; }
	#introduce .lead { margin: 0 20px 18px; text-align: left; font-size: 1.2rem; font-weight: normal; }
	#introduce dl { margin: 0 20px; padding: 10px 0; width: auto; border-top: none; }
	#introduce dl dt,#introduce dl dd { text-align: left; font-size: 1.2rem; }
	#introduce dl dt { font-weight: normal; }
	#introduce dl dd { margin-top: 6px; }
	#introduce .date {}
	#introduce .host {}
	#introduce .host dd {}
	#introduce .host dd ul {}
	#introduce .host dd ul li { text-align: center; }
	#introduce .host dd ul .host1 { width: 66%; }
	#introduce .host dd ul .host2 { margin-left: 3%; width: 31%; }
	#introduce .host dd ul li .photo {}
	#introduce .host dd ul li .photo img { margin-bottom: 4px; }
	#introduce .host dd ul li .photo figcaption {}
	
	/* cm */
	#cm { padding-bottom: 120px !important; }
	#cm .title { margin-bottom: 26px; width: 66%; }
	#cm .box { margin-top: 26px; width: auto; height: auto; border-width: 10px; }
	#cm .box .video { float: none; margin: 15px; padding-bottom: 52%; width: auto; height: auto; }
	#cm .box .info { float: none; margin: 15px; width: auto; }
	#cm .box .group { top: 0; right: -15px; width: 24%; }
	#cm .box .group:after { content: " "; position: absolute; top: 50%; right: 0; margin-top: -4px; width: 50%; height: 8px; background: #89103f; z-index: 1; }
	#cm .box .group img { position: relative; width: 82%; z-index: 2; }
	#cm .box .info .name { font-size: 1.8rem; }
	#cm .box .photo { width: 44%; }
	#cm .box .like { position: relative; bottom: auto;  margin: 0 auto; right: auto;width: 54%;}
	#cm .box .like dt,#appeal .box .like dd { display: block; }
	#cm .box .like dt { padding-top: 0; margin: 0 auto; width: 80%; }
	#cm .box_a .like dd { margin: 0; width: 100%; height: auto; background-image: url(../img/sp/cm_board_bb.png); background-size: 100%; }
	#cm .box_b .like dd { margin: 0; width: 100%; height: auto; background-image: url(../img/sp/cm_board_pb.png); background-size: 100%; }
	#cm .box .like dd .btn { padding-left: 12px; width: 30%; height: auto; }
	#cm .box .like dd .num { margin-left: 12px; width: 40%; height: auto; min-height: 26px; background-size: 100% 100%; }
	#cm .box_a .like dd .num { background-image: url(../img/sp/cm_board_bs.png); }
	#cm .box_b .like dd .num { background-image: url(../img/sp/cm_board_ps.png); }
	#cm .box .like dd .num span { padding: 4px 0 2px; line-height: 1; color: #fff; }
	#cm .box .like dd .num span img { height: 20px; }

}