/* ページ読み込み時に開くウィンドウ用 */
#op_win {
	width: 100%;
	width:calc(100% + 20px);
	height:100%;
	position:fixed;
	top: 0;
	left: 0;
	background: rgba(255,255,255, 0.97);
	*zoom: 1;
	display: none;
	z-index: 3001;
	overflow-y: auto;
}
.close{
	position: fixed;
	top:0;
	right: 0;
	display: block;
	width: 40px;
	height: 40px;
	z-index: 1001;
    background-color: #df4b8d;
}
.close_btn{
	position: relative;
    width: 28px;
    height: 1px;
    margin: 18px auto 0 auto;
	display: block;
}
.close_btn::before{
	position: absolute;
    content: '';
    width: 28px;
    height: 1px;
    background-color: #ffffff;
	top:-9px;
	left: 0;
	display: block;
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
}
.close_btn::after{
	position: absolute;
    content: '';
    width: 28px;
    height: 1px;
    background-color: #ffffff;
	top:9px;
	left: 0;
	display: block;
    -webkit-transform: translateY(-8px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
}
#op_win .close_btn{right: 0;}
.close_win {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 3002;

 }
#movieArea{
	position:relative;
	margin:50px auto 0 auto !important;
	transform: translateX(-10px);
	z-index: 3003;
}

.mov_list{
	position:relative;
	margin: 10px auto 0 auto;
    transform: translateX(-10px);
	width: calc(100% - 40px);
	z-index:3004;
	text-align: center;
}
.mov_list ul{
	position:relative;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}
.mov_list ul li{
    position: relative;
	padding: 0;
	margin: 5px 0;
    width: calc(50% - 3px);
	background-color: #0d399e;
}
.mov_list ul li span{
    position: relative;
    display:block;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
	font-size: .15rem;
	color: #ffffff;
    padding: 5px 0;
    line-height: normal;
}
.mov_list ul li span.fonts{font-size: .13rem;}
.mov_list ul li:nth-child(odd){background-color: #bf2542;}
.mov_list ul li:hover, .close_btn:hover{
	cursor: pointer;
	opacity: .7;
}

section#movie div#moviePlayer {
	position: relative;
	margin:0 auto;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	background-color: #000000;
}
section#movie div#moviePlayer div{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
    .mov_list ul{
        margin: auto;
        width: 960px;
        justify-content: center;
    }
    .mov_list ul li{width: 220px;margin: 5px;}
}