@charset "Shift_JIS";

@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:700');

/*----------------■初期設定----------------*/
*  {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
}
ul,ol  {
	list-style: none;
}
table  {
	border-collapse: collapse;
}
th,td  {
	text-align: left;
	vertical-align: top;
}
img {
	border: none;
	vertical-align: top;
}

 /* リンク色の初期値 */
a:link { text-decoration:none;color:#00f; }
a:visited { text-decoration:none;color:#00f; }
a:hover { text-decoration:underline;color:#f00; }
a:active { text-decoration:none;color:#ccf; }

a[name]:hover { text-decoration:none;color:#000; }

/*----------------■よく使うもの----------------*/
 
.fltl  {
	float: left;
}
.fltr  {
	float: right;
}
.clear  {
	clear: both;
}
.clearfix:after {
	content:".";
	display:  block;
	clear:  both;
	height:  0;
	visibility:  hidden;
	overflow: hidden;/* 隙間対応 */
	font-size: 0.1em;/* 隙間対応 */
	line-height: 0;/* 隙間対応 */
}
.clearfix  {
	zoom:  1;
}

/*----------------■全体構造----------------*/

html {
	height: 100%;
}
body.movie_body {
	text-align: center;
	font-family: 'Noto Sans Japanese', serif;
	background: #fff;
	color: #000;
	font-size: 13px;
	line-height: 1.5;
}

img{
	max-width: 100%;
	height: auto;
}

/*----------------■動画----------------*/
.movie_area{
	position: absolute;
	top: 50%;
	left: 50%;
	width:90%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.movie_box h1 {
	margin-top: 10px;
	font-size: 20px;
}
.movie_comment {
	position: absolute;
	bottom: 10px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.list_mv_btn {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 40%;
	left: 50%;
	opacity:0.7;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.movie_list{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
.movie_list li{
	float: left;
	margin: 1px;
	position: relative;
	text-align: center;
}
.movie_list li a{
	color: #000;
	text-decoration: none;
}
.movie_list li a:hover{
	color: #f00;
}
.movie_list li p{
	padding: 10px 5px 25px 5px;
}


/*----------------■大画面---------------*/
@media screen and (min-width: 951px) {

.movie_box audio{
	width: 720px;
}

.movie_list li{
	width: 231px;
}



}

/*----------------■小・中画面---------------*/
@media screen and (max-width: 950px) {

.movie_box audio{
	width: 100%;
}

.movie_list li{
	width: 49%;
}



}


/*----------------■非携帯端末画面---------------*/
@media screen and (min-width: 501px) {

.movie_comment {
	display: none;
}

}