@charset "UTF-8";

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


/* open icon-f42a
-------------------------------------------------- */
.modal-open-f42a{
display:block;
outline: none !important;
position: relative;
}
.modal-open-f42a:after{
content: "";
height:37px;
width:37px;
position:absolute;
left:50%;
top:50%;
margin: -18px 0 0 -18px;
-background: url(/images_osp/common/product_slider_mainpr_icon_play.png) no-repeat 0 0;
background-size: cover;
z-index:10;
}

.modal-open-f42a img{
border-radius: 10px;
}


.modal-open-f42a:hover{
opacity:0.8;
}

/* open icon
-------------------------------------------------- */
.modal-open{
display:block;
outline: none !important;
position: relative;
}
.modal-open:after{
content: "";
height:37px;
width:37px;
position:absolute;
left:50%;
top:50%;
margin: -18px 0 0 -18px;
background: url(/images_osp/common/product_slider_mainpr_icon_play.png) no-repeat 0 0;
background-size: cover;
z-index:10;
}

.modal-open img{
border-radius: 10px;
}



/* modal-f42a
-------------------------------------------------- */
#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-f42a{
position:fixed;
display:none ;
width:90%;
z-index:99999;
}
#modal-content-f42a .inner{
position:relative;
padding-top:56.25%;
overflow:hidden;
}
#modal-content-f42a .inner #player{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
z-index:10;
}


#modal-content-f42a #f42a{
height:75vh;
max-height:75vh;
overflow-y: scroll;
margin: auto;
background-color: #ffffff;
border: 4px solid #000000;
padding: 30px 10px;
}
#modal-content-f42a #f42a .box-txt{
border: 1px solid #000000;
border-radius: 10px;
padding: 20px 20px
}
#modal-content-f42a #f42a .box-txt .box-tit{
position: relative;
top: -30px;
left: 0;
right: 0;
margin: auto;
width: 85%;
background-color: #ffffff;
}

#modal-content-f42a .modal-close{
padding: 10px 0;
position: absolute;
left: 0;
right: 0;
bottom: -20px;
margin: auto;
width: 150px;
color: #ffffff;
font-weight: bold;
background-color: #000000;
border-radius: 50px;
cursor: pointer;
}
#modal-content-f42a .modal-close-btn{
}
#modal-content-f42a .modal-close-btn:after {
    content: "×";
    display: inline-block;
    margin-left: 5px;
}

/* modal
-------------------------------------------------- */
#modal-content{
position:fixed;
display:none ;
width: 100%;
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(/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{
}