@charset "UTF-8";
/*------------------------------------------------------------
	リセット
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure { margin: 0; padding: 0; background: transparent; border: 0; outline: 0; font-size: 1em; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }
object,embed { display: block; border: none; }

/*------------------------------------------------------------
	クリアフィクス
------------------------------------------------------------*/
.clearfix:before,
.clearfix:after,
#container:before,
#container:after,
#header:before,
#header:after,
#contents:before,
#contents:after,
#footer:before,
#footer:after,
.section::before,
.section:after {
	display: table;
	line-height: 0;
	content: "";
}

.clearfix:after,
#container:after,
#header:after,
#contents:after,
#footer:after,
.section:after {
	clear: both;
}

.clear {
	clear:both;
}
/*------------------------------------------------------------
	リンク
------------------------------------------------------------*/
a {
	text-decoration: none;
	font-size:100%;
	color:#3399ff;
}
a:hover {
	text-decoration: underline;
}
a img {
	border-style: none;
}

/*------------------------------------------------------------
	フォント
------------------------------------------------------------*/
body { -webkit-text-size-adjust: 100%; } /*スマホ表示時の文字サイズ拡大を防ぐ*/

body, table, input, textarea, select, option {
	font-family: " Lucida Grande ", " Lucida Sans Unicode ", Helvetica,"Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	font-size: 0.9em;
} 
h1 {
	font-size: 310%;
}

h2 {
	font-size: 180%;
}

h3 {
	font-size: 150%;
}

h4 {
	font-size: 125%;
}

small {
	font-size: 80%;
}

hr {
	clear: both;
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	background-color:#0c8bbd;
	/*background-image:url(img/bg2.png);
	background-position:center top;*/
}
#container {
}
.wrap {
	width:980px;
	margin:0 auto;
}
#header {
	margin:0;
	padding:60px 0;
	background-color:#9cdbf4;
}
#nav {
	margin:0 0 0px 0;
}
#contents {
	margin:0 0 0px 0;
}

#footer {
	padding:20px 0;
}

/*------------------------------------------------------------
	header
------------------------------------------------------------*/
#header .logoArea {
	margin-bottom:70px;
}
#header .logoArea h1 {
	font-size:400%;
	font-weight:normal;
	color:#000;
	margin:40px 0 20px 0;
}
#header .logoArea .logoImg {
	float:left;
	margin-right:50px;
}

.downloadArea {}
.explanation {
	width:530px;
	float:left;
	font-size:90%;
}

.downloadArea .btn {
	margin:20px 0;
	float:right;
}
.downloadArea .btn li {
	display:inline-block;
	margin:0 5px;
}

/*------------------------------------------------------------
	footer
------------------------------------------------------------*/
#footer .f-nav {
	margin:0 0 10px 0;
}
#footer .f-nav ul {}
#footer .f-nav ul li {
	display:inline;
	text-align:center;
	color:#fff;
	font-size:90%;
}
#footer .f-nav ul li .separator {
	padding:0 5px;
}
#footer .f-nav ul li a {
	color:#fff;
}
#footer .f-nav ul li a:hover {
	text-decoration:underline;
}
#footer .f-sns {
	text-align:right;
}
#footer .f-sns ul {}
#footer .f-sns ul li {
	display:inline;
	text-align:center;
	margin:0 3px;
}

#footer .copyright {
	text-align: center;
	color:white;
}

/*------------------------------------------------------------
	contents
------------------------------------------------------------*/
.subtitle {
	padding:20px 0;
	background-color:#0da4e0;
}
.subtitle h3 {
	color:#fff;
	font-size:36px;
	font-weight:normal;
	background-image:url(img/bg_subt.png);
	background-position:0 0;
	background-repeat:no-repeat;
	padding:50px 0 0px 0px;
	/*padding:15px 0 20px 70px;*/
}
.section {
	background-color:#fff;
	padding:50px 0 30px 0;
}
.channelBlock {
	float:right;
	display:inline-block;
	padding:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background-color:#fff;
	margin-bottom:0px;
}

.movieSection {}

.movieSection .movie-wrap {
	width:460px;
	float:left;
	padding-bottom:30px;
	margin-bottom:50px;
	background-image:url(img/line.png);
	background-position:left bottom;
	background-repeat:no-repeat;
}

.movieSection .even {
	float:right;
}

.movieSection .movie-wrap h4 {
	font-size:130%;
	font-weight:normal;
	line-height:1.4;
	margin-bottom:10px;
	padding:3px 5px;
	border-left:5px solid #f74668;
}
.movieSection .movie-wrap .movie {
	position:relative;
	margin-bottom:10px;
}
.movieSection .movie-wrap .movie .btnStart {
	position:absolute;
	left:43%;
	top:38%;
	z-index:10;
}
.movieSection .movie-wrap .movie .thumbnail {
	width:100%;
	height:auto;
}
.movieSection .movie-wrap .summary {
	
}
#inline-wrap {
	text-align:center;
}


.video-container {
	position: relative;
	width:100%;
	height:0;
	padding-top:56.25%;
	margin-bottom:30px;
	overflow:hidden;
}
 
.video-container iframe {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.popup-modal-dismiss {
	text-align:center;
	color:#fff;
	padding-top:10px;
}
.popup-modal-dismiss a {
	color:#fff;
}













/*------------------------------------------------------------
	responsive
------------------------------------------------------------*/

@media (max-width: 979px) {
	.wrap {
		width:94%;
		margin:0 3%;
	}
}

@media (max-width: 919px) {
	.movieSection .movie-wrap {
		float:none;
	}
	.subtitle h3 {
		font-size:24px;
		/*padding:15px 0 20px 70px;*/
	}
	#footer .f-nav {
		text-align:center;
	margin:0 0 20px 0;
}
#footer .f-sns {
	text-align:center;
	margin:0 0 20px 0;
}

}

@media (max-width: 767px) {
	#header {
		padding:20px 0;
	}
	#header .logoArea {
		margin-bottom:20px;
	}
	#header .logoArea h1 {
		text-align:center;
		font-size:220%;
		font-weight:normal;
		color:#000;
		margin:0px 0 20px 0;
	}
	#header .logoArea .logoImg {
		float:none;
		margin-right:0px;
		margin-bottom:10px;
		text-align:center;
	}
	#header .logoArea .logoImg img {
		width:100px;
		height:auto;
	}
	.downloadArea {
		padding:10px;
	}
	.explanation {
		width:100%;
		float:none;
		font-size:86%;
	}
	
	.downloadArea .btn {
		margin:20px 0;
		float:none;
		text-align:center;
	}
	.downloadArea .btn li {
		display:inline-block;
		width:40%;
		margin:0 3%;
	}
	.downloadArea .btn li img {
		width:100%;
		height:auto;
	}
	.subtitle {
		text-align:right;
	}
	.subtitle h3 {
		text-align:left;
	}
	.channelBlock {
		float:none;
	}
}

@media (max-width: 459px) {
	
	.movieSection .movie-wrap {
		width:100%;
	}
	video {
		width:100%;
		height:auto;
		margin-bottom:30px;
	}
}

@media (max-width: 480px) {
	img.full-img {
		width:100%;
		height:auto;
	}
}