@charset "UTF-8";

/* 
------------------------------------*/
/*infoエリアをはじめは非表示*/
.info_t{
	display: none;
}
.modaal-content-container {
    padding: 30px 15px;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container {
    max-width: 1020px;
    position: relative;
    border-radius: 20px;
    height: 90%;
    max-height: 580px;
}

/*モーダルのボタンの色を変更したい場合*/
.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:#666;
}
.modaal-inner-wrapper {
    backdrop-filter: blur(12px);
}
.modaal-overlay {
    background-color: #c3d3e8 !important;
}
.modaal-close {
    position: absolute;
    top: -66px;
    right: 0;
    left: auto;
}
.modaal-close::after, .modaal-close::before {
    height: 42px;
}
.modaal-close::after, .modaal-close::before, .modaal-close:focus::after, .modaal-close:focus::before,
.modaal-close:hover::after, .modaal-close:hover::before {
    background-color: #1652BC;
}
.modaal-close:focus, .modaal-close:hover {
  background-color: transparent;
}

            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .modaal-container {
                    border-radius: 30px;
                }
                .modaal-container {
                    max-height: 692px;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 960px) {
                .modaal-close {
                    right: -37px;
                }
                .modaal-content-container {
                    padding: 40px 30px;
                }
                .modaal-container {
                    max-height: none;
                    height: auto;
                }
            }