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

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

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


/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}



.modaal-close {
	position: fixed;
	left: 10px;
	top: 5px;
	color: #fff;
	cursor: pointer;
	opacity: 1;
	width: 30px;
	height: 30px;
	background: rgba(0, 0, 0, 0);
	border-radius: 1vw;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.modaal-close:focus,
.modaal-close:hover {
	outline: none;
	background: #fff;
}

.modaal-close:focus:before,
.modaal-close:focus:after,
.modaal-close:hover:before,
.modaal-close:hover:after {
	background: #202020;
}