@charset "utf-8";

.modal-content {
	width: 480px;
	top:50%;
	left:50%;
	padding: 20px 0;
	background: #fff;
	position: fixed;
	display: none;
	z-index: 4;
	width: calc(100% - 20px);
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	border-radius: 6px;
}
@media screen and (min-width: 38.75em) {
	.modal-content {
		width: 500px;
	}
}
#modal-overlay {
	z-index: 3 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

#modal-close {
	position: absolute;
	top: 0;
	right: 7px;
	font-size: 150%;
	color: #666;
	cursor: pointer;
	}

.modal-content p {
	margin: 0;
	text-align:center;
	font-size: 1.2rem;
	}
.modal-content .text-blue{
	font-size: 24px;
	font-weight:bold;
	color: #e71a20;
	}
.modal-content .text-number{
	color: #e71a20;
	font-size:44px;
	font-weight:bold;
	line-height: 1;
	}
	.modal-content .text-number:before{
		display:inline-block;
		width: 50px;
		height: 50px;
		margin-right: 10px;
		vertical-align: middle;
		border:2px solid #e71a20;
		border-radius:50%;
		font-family: "Font Awesome 5 Free";
		content: "\f2a0";
		font-size: 80%;
		line-height: 50px;
		}
	.modal-content .title{
		font-size: 1.3rem;
		font-weight: bold;
		}
@media screen and (min-width: 38.75em) {
	.modal-content .title{
		text-align: center;
		font-size: 1.2rem;
		}
}

/* お問合せ先のモーダルを表示 */
.contact-modal{
	padding: 1rem;
	text-align: center;
	}
.contact-modal p {
	margin: 1rem 0 0 0;
	font-size: 13px;
	}
.contact-modal .title{
	margin: 0;
	font-size: 16px;
	}
.contact-modal i{
	font-size: 200%;
	color: #e71a20;
	}
.contact-modal .ico_triangle{
	width: 65px;
	}
	.contact-modal .title .text-red{
		background: linear-gradient(transparent 50%, #ffeb00 50%);
		}
.contact-modal .bg-color{
	margin-top: 2rem;
	padding: .5rem 1rem 1rem;
	}
.contact-modal dt{
	margin-bottom: .5rem;
	padding: .5rem;
	border-radius: 4px;
	background: #fff;
	font-size: 1.2rem;
	font-size: 14px;
	}
.contact-modal dd{
	font-size: 10px;
	}
@media screen and (max-width: 38.74em) {
.contact-modal{
	width: 330px;
	}
	.contact-modal .button.tel-1{
		padding: .75em 1rem;
		}
	.contact-modal .button.tel-2{
		padding: 1.15em 1rem;
		}
	.contact-modal .button.form{
		padding: 1.75em 1rem;
		}
}
@media screen and (min-width: 38.75em) {
	.contact-modal .button.form{
		line-height: 3.9rem;
		}
}

/* 外部リンクのモーダル */
#confirm-support,
#confirm-support2{
	padding-left: 20px;
	padding-right: 20px;
	border-color: #ccc;
}

#confirm-support p,
#confirm-support2 p{
	margin-top: 1em;
	font-size: .85rem;
}

/* アラート用モーダル */
.alert-modal {
	padding: 3%;
	display: none;
}

.alert-modal .title {
	margin-top: 15px;
}

.alert-modal-content-h5 {
	margin: unset;
	font-size: 40px;
	color: #e71a20;
	text-align: center;
}

.alert-modal-content-timearea {
	background-color: #ffea00;
	padding: 3%;
	margin-top: 15px;
}

.alert-modal-content-timearea .timer-text {
	font-size: 16px;
	font-weight: bold;
}

.alert-modal-content-timearea .timer-text i {
	font-size: 24px;
	margin-right: 5px;
}

.alert-modal-content-timearea .timer-text span {
	font-size: 20px;
}

.alert-modal-content-timearea .timer {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.alert-modal-content-timearea .timer span {
	display: inline-block;
	font-size: 40px;
	width: 54px;
}

.alert-modal-foot  {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	margin-top: 15px;
}

.alert-modal-foot .button {
	margin-top: unset;
	font-size: 16px;
	max-height: 60px;
}

.alert-modal-foot .button i {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}