@charset "UTF-8";

/**********************************************************
 *
 * 動画用モーダル (PC)
 *
 **********************************************************/


/* open icon */
.modal-open.withPlayIcon{
display: inline-block;
position: relative;
}
.modal-open.withPlayIcon::before{
content: "";
display:block;
outline: none !important;
height:60px;
width:60px;
position:absolute;
left:50%;
top:50%;
margin:-30px 0 0 -30px;
text-indent: -999px;
overflow: hidden;
background: url(/content/dam/nttcom/hq/jp/business/cmn/dcc-temp/docomo/images_osp/common/product_slider_mainpr_icon_play.png) no-repeat center center;
background-size: cover;
z-index:10;
}



/* modal
-------------------------------------------------- */
#modal-overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:9999;
}
#modal-content{
position:fixed;
display:none ;
width: 100%;
max-width: 940px;
z-index:99999;
}
#modal-content .inner{
position:relative;
padding-top:56.25%;
overflow:hidden;
}
#modal-content .inner #player{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
z-index:10;
}
#modal-content .modal-close{
width: 3.5em;
position: absolute;
top: -45px;
left: 10px;
margin: 0;
padding-top: 15px;
background: url(/content/dam/nttcom/hq/jp/business/cmn/dcc-temp/docomo/images_osp/common/product_slider_mainpr_icon_close.png) no-repeat center top;
background-size: 14px;
font-size: 12px;
color: #d0d0d0;
text-align: center;
cursor: pointer;
z-index: 10;
}
#modal-content .modal-close:hover{
}