@charset "utf-8";
/*========= モーダル表示のためのCSS ===============*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#000;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
.modaal-content-container{
    padding: 0;
}
/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}
.modaal-video-wrap{
    margin: auto;
    width: 400px;
    margin-right: 9%;
}
.modaal-video-container{
    width: 400px;
    height: 300px;
}
.modaal-wrapper .modaal-close {
    border: none;
    padding: 0;
    -webkit-appearance: none;
    position: absolute;
    /* left: calc(50% + 180px); */
    right: 8%;
    top: calc(50% - 180px);
    z-index: 100;
    background: #e6e6e6;
}
.modaal-close{
    width: 40px;
    height: 40px;
}
.modaal-close:after, .modaal-close:before{
    top: 8px;
    left: 18px;
}
.modaal-container{
    width: 440px;
    min-height: 334px;
    padding: 20px 20px 14px;
    margin: auto;
    /* margin-right: 9%; */
    display: block;
    background: rgba(0,0,0,0.6);
    color: #ececec;
    border-radius: 0.25rem;
    position: absolute;
    top: 30%;
    right: 4%;
}
.modaal-wrapper .modaal-container .modaal-close{
    top: -18px;
    right: -20px;
}