/* オーバーレイ */
        .custom-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 9999;
        display: none;
        }

        /* モーダル共通 */
        .modal {
            width: 90vw;
            max-width: 600px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        display: none; /* JSで制御 */
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        background-color: #fff;
        }

        /* 表示中 */
        .modal.show {
        display: block;
        opacity: 1;
        }


        /* 閉じるボタン */
        .modal-close {
			position: absolute;
			right: 0;
			top: 0;
			color: #666;
			cursor: pointer;
			opacity: 1;
			width: 50px;
			height: 50px;
			background: rgba(0, 0, 0, 0);
			border-radius: 100%;
			transition: all .2s ease-in-out;
			padding: 0;
        }

.modal-close span {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}


/*全て共通：モーダルのボタンの色を変更したい場合*/
.modal-close:after, .modal-close:before {
    background: #ccc;
    display: block;
    content: " ";
    position: absolute;
    top: 14px;
    left: 23px;
    width: 4px;
    height: 22px;
    border-radius: 4px;
    transition: background .2s ease-in-out;
}

.modal-close:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.modal-close:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

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


        /* 内部スクロール用ラッパー */
        .modal .modaal-container {
        padding: 0;
        }

        /* ふわっとアニメーション */
        .modal.show {
        transform: translate(-50%, -50%) scale(1);
        }

        .modal:not(.show) {
        transform: translate(-50%, -50%) scale(0.95);
        }

        
.modal  {
    padding:0;
}

.modal  .inner {
    padding: 1em 0 0;
}

.modal ::placeholder {

color:#ccc;

}

.modal  ul.form{
	width:76%;
	display:block;
	margin:0 auto 1em;
}

.modal  ul.form li{
	width:100%;
	display:block;
	margin:0 0 1.5em;
}

.modal  ul.form li p{
	font-size:clamp(12px, 3vw, 26px);
	margin-bottom:0.3em;
}

.modal  ul.form li a{
	display:block;
	text-align:center;
}

.modal  ul.form li a.btn{
	width:90%;
	background-color:#545454;
	margin:0 auto 0.5em;
	padding:0.5em 1em;
	color:#fff;
	font-size:clamp(12px, 5vw, 26px);
	font-weight:700;
	border-radius:0.3em;
}
.modal  ul.form li a.uline{
	text-decoration:underline;
	font-size:clamp(12px, 3vw, 26px);
}

.modal  input[type="text"]{
	
	width:100% !important;
	border:1px solid #ccc;
	padding:0.7em 1em;
	font-size: 120%;
	color: #545454;
	display:block;
	margin:0;
	background-color:#fff;
}


.modal  .signup {
	background-color:#d0c3b2;
	padding:2em 0;
	text-align:center;
}

.modal .signup a{
	color:#fff;
	font-size:clamp(12px, 5vw, 26px);
	text-decoration:underline;
	font-weight:700;
}