/* CSS Document */

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

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

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

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

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}
.modaal-inner-wrapper{
    padding: 0px;
}
.modaal-content-container{
    padding: 70px 20px;
}
.modaal-wrapper{
    background: #fff;
}
.modaal-container {
     box-shadow: none!important;
}

.modaal-wrapper h4{
    background: #03004c;
    color: #fff;
    padding: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}
.modaal-wrapper .img{
    margin-bottom: 1rem;
}
.modaal-wrapper .img img{
 aspect-ratio: 2 / 1;
    object-fit: cover;
}
.modaal-wrapper .topTxt{
    text-align: center;
}
.modaal-wrapper .txt{
    text-align: center;
    margin-bottom: 1rem;
}
.modaal-wrapper .comBtn a {
    padding: 10px 10px 12px;
    margin: 0 auto 2rem;
}
.modaal-wrapper .flex-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.modaal-wrapper dl{
    flex-basis: 48%;
}

@media screen and (max-width:768px){
.modaal-wrapper dl{
    flex-basis: 100%;
}
.modaal-wrapper dl +dl{
    margin-top: 3rem;
}
}

.modaal-wrapper .modaal-close{
    background-color: #35a2e2;
}