@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%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kakugo Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #222;
}
ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a:link { color: #2078be; text-decoration: none; }
a:visited { color: #2078be; text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* clearfix
------------------------------------------------ */
.clearfix:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	font-size: 0;
	content: ".";
}

.clearfix {
	clear: both;
	*zoom: 1;
}

/* header
------------------------------------------------ */
#header {
}

/* container
------------------------------------------------ */
#container {
	min-height: 830px;
	background: url(../img/share/bg.gif) repeat-y left top #fff;
}

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

/* sns */
.sns {
	width: 170px;
	height: 24px;
	text-align: right;
}

	.sns nhk-snsbtn {
		width: 100%;
	}

		.sns .nhk-snsbtn .nhksns {
			float: right;
		}

			.sns .nhk-snsbtn .nhksns li { margin: 0 0 0 5px; }

		.sns .nhk-snsbtn .nhksns-guide {
			margin: 0 !important;
		}

			.sns .nhk-snsbtn .nhksns-guide a { display: inline-block; margin-left: 5px; width: 24px; vertical-align: middle; }
				.sns .nhk-snsbtn .nhksns-guide a img { margin: 0; width: 22px; height: 22px; }

/* side_column */
#side_column {
	position: absolute;
	top: 0;
	left: 0;
	padding-bottom: 20px;
	width: 220px;
}

	#logo {
		padding: 24px 22px;
		width: 176px;
		background: #fff;
	}

		#logo a { display: block; }
		#logo img { width: 100%; }

	#gnav {
		margin-top: 10px;
	}
	#gnav.sp_gnav { display: none; }
	.device_pc #gnav.sp_gnav { display: none !important; }

		#gnav ul {
		}

			#gnav ul li {
				position: relative;
				height: 60px;
			}

			#gnav ul li:after {
				content: " ";
				position: absolute;
				bottom: 0;
				left: 18px;
				width: 184px;
				height: 0;
				border-top: dashed #90bcdf 1px;
			}

				#gnav ul li a { display: block; width: 100%; height: 100%; }
				#gnav ul li img { height: 100%; }

	#side_column .info {
		margin-top: 30px;
	}

		#side_column .info .time {
			margin-left: 20px;
			width: 174px;
		}

			#side_column .info .time img { width: 100%; }

		#side_column .info .menu {
			display: none;
		}

/* main_column */
#main_column {
	position: relative;
	margin-left: 220px;
	height: 100%;
}

/* top_sns */
.top_sns {
	position: absolute;
	top: 8px;
	right: 20px;
	height: 50px;
	z-index: 10;
}

	.top_sns .sns { margin-left: auto; }

/* article */
.article {
}

	.article .page_title {
		width: 100%;
		padding-top: 58px;
		min-height: 162px;
		text-align: center;
		overflow: hidden;
	}

		.article .page_title h1 {
			height: 60px;
			font-size: 10px;
			font-size: 1rem;
			font-weight: normal;
			line-height: 1;
		}

			.article .page_title h1 img { height: 100%; }

		.article .page_title .explain {
			margin-top: 10px;
			font-size: 12px;
			font-size: 1.2rem;
		}

/* modal window
------------------------------------------------ */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	background: rgba(0,0,0,.8);
	width: 100%;
	height: 100vh;
	z-index: 50;
}

#modal_contents {
	position: fixed;
	top: 50%;
	left: 50%;
	display: none;
	margin: -138px 0 0 -235px;
	width: 470px;
	height: 275px;
	z-index: 100;
}
#modal_contents .movie { width: 100%; height: 100%; text-align: center; }
#modal_contents video { width: 100%; height: auto; }

#modal_close {
	position: absolute;
	top: -30px;
	right: 0;
	width: 26px;
	height: 26px;
}

#modal_close a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/share/close.png) no-repeat left top;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#modal_close a:hover { text-decoration: none; }

/* responsive style
------------------------------------------------ */
@media screen and (max-width: 780px) {
	/* article */
	.article {}
	.article .page_title {}
	.article .page_title h1 { margin: 0 auto; width: 80%; height: auto; }
	.article .page_title h1 img { width: 100%; height: auto; }
}

@media screen and (max-width: 640px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
	/* container */
	#container { min-height: inherit; background: #fff; }
	/* side_column */
	#side_column { position: relative; top: auto; left: auto; padding-bottom: 10px; width: 100%; }
	#logo,
	#side_column .info { display: table-cell; padding: 10px 5%; width: 40%; vertical-align: middle; }
	#logo {}
	#gnav { display: none; margin-top: 4px; background: #2078be; }
	#gnav ul {}
	#gnav ul li { width: 100%; height: auto; }
	#gnav ul li:after { left: 5%; width: 90%; }
	#gnav ul li:last-child:after { display: none; }
	#gnav ul li a { overflow: hidden; }
	#gnav ul li img { width: 60%; height: auto; }	
	#side_column .info { margin-top: 0; background: #2078be; }
	#side_column .info .time { display: block; margin-left: 0; width: 100%; }
	#side_column .info .menu { display: block; margin-top: 10px; width: 100%; }
	#side_column .info .menu a { display: block; }
	#side_column .info .menu img { width: 100%; }	
	/* main_column */
	#main_column { margin-left: 0; }
	/* article */
	.article { margin-top: 20px; }
	.article .page_title { padding-top: 0; margin-bottom: 20px; min-height: inherit; }
	.article .page_title h1 { width: 100%; }
	.article .page_title .explain { font-size: 1.2rem; font-weight: bold; }
	/* btm_sns */
	.btm_sns { padding: 30px 0; }
	.btm_sns .sns { margin: 0 auto; }
	/* modal window */
	#overlay {}
	#modal_contents { top: 30%; left: 4%; margin: 0; width: 92%; height: auto; }
	#modal_close { top: -20px; width: 18px; height: 18px; }
	#modal_close a { background-size: 100%; }
}