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

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


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

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

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

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

/*以下はコンテンツ内のレイアウト*/



/*========= レイアウトのためのCSS ===============*/


small{
	background:#eee;
	color:#fff;
	display: block;
	text-align: center;
	padding:20px;
}



.modaal-area {
    position: relative;
    background-color: aliceblue;
    border-radius: 15px;
}
.modaal-area ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}

.modaal-img{
	width: 100%;
	height: auto;
    margin: auto;
    border-radius: 15%;
   
    
}

.modaal-area li {
    letter-spacing: normal;
    margin: auto;
    padding: 1rem;
    color: #555555
}


@media screen and (max-width:900px){
    .modaal-area ul {
    display: flex;
    flex-direction: column;
   
}
    
    
    
}