@charset "UTF-8";

/* ここまでデモページ用のコード */

.modal-content {
	width: 70% ;
	max-width:600px;
	margin: 0 ;
	padding: 1.5rem ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 101 ;
	border-radius: 0.2rem;
	top:20% !important;
	left:50% !important;
	transform:translateY(-20%) !important;
	transform:translateX(-50%) !important;
}

#modal-overlay {
	z-index: 100 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-login-title{
	font-size:2.0rem;
	text-align:center;
	margin: 0 auto 3.0rem;
	position:relative;
}
.modal-login-title::after{
	width:60%;
	height:1px;
	background:#ad344c;
	position:absolute;
	bottom:-1.0rem;
	left:50%;
	transform:translate(-50%,0);
	content:'';
}
#modal-close{
	position: absolute;
	top: 2.0rem;
	right: 2.0rem;
	font-size: 2.0rem;
	color:#999999;
	z-index: 5;
}
#modal-close:hover{
	opacity:0.5;
}
.loginform{
	text-align:center;
}
.checkedarea{
	text-align:left;
	margin:1.0rem auto;
	width: 100%;
	font-size:0;
}
.checklist{
	font-size:1.2rem;
	padding:0.5rem 0.5rem 0.5rem 2.5rem;
	border-bottom:1px dotted #cccccc;
	margin:1.0rem auto 0;
	display: inline-block;
	vertical-align: middle;
	position:relative;
}
.checklist:before{
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	position: absolute;
	font-size: 1.2rem;
	left: 0.5rem;
	top: 50%;
	color: #ad344c;
	font-weight: 900;
	transform: translate(0,-50%);
	line-height: 1.2;
}
.checklist.onecolumn{
	width:90%;
}
.checklist.twocolumn{
	width:46%;
}
.checkedarea .checklist.twocolumn:last-child{
	margin:1.0rem 0 0 4%;
}
.ectext-small{
	margin:0.25rem 0.5rem 0;
	font-size:0.8rem;
}
.linebtnarea{
	margin:0 auto;
	margin-top:2.0rem;
	margin-bottom:2.0rem;
	width:90%;
}
.linebtnarea a:hover{
	opacity:0.7;
}
.modal-spbr{
	display:none;
}