.block-card
{
	display:flex;
	
	/* align content of both panels */
	align-items: center;
	justify-content: center;
	
	flex-direction: row;
	justify-content; flex-start;
 
	width:100%;
	gap:10px;
	
	padding: 20px;
	border-radius:10px;
	border: 1px solid #94c3e1;
	
	background-color: rgba(232, 238, 249, 1);
	background-image: linear-gradient(135deg, rgba(232, 238, 249, 1) 60%, rgba(152, 175, 245, 1) 30%);

	-webkit-box-shadow: -1px 5px 16px -9px rgba(61, 69, 167, 1);
	-moz-box-shadow: -1px 5px 16px -9px rgba(61, 69, 167, 1);
	box-shadow: -1px 5px 16px -9px rgba(61, 69, 167, 1);
}

.block-card .panel-copy {
	width:60%;
}

.block-card .panel-img {
	text-align:center;
	width:40%;
}

.block-card .panel-img img {
	border-radius:10px;	
}
.block-card .panel-copy img {
	border-radius:10px;	
}

.block-card .panel-copy .title {
	display:block;
	font-size:19pt;	
	font-weight:600;
	margin-bottom:30px;
}

.block-card .panel-copy .mobile {
	display:none;
}	

.block-card .panel-img .desktop {
	display:inline;		
}		

.block-card .panel-copy ul {
	list-style: none;
	padding-left: 0; 
	margin-bottom:30px;
	list-style-position: inside;
}

.block-card .panel-copy p {
	padding-left: 0; 
	margin-bottom:30px;
}

.block-card .panel-copy ul li
{
	font-size:13pt;
	position: relative;
	padding-left: 20px;
}

.block-card .panel-copy ul li::before 
{
	position: absolute;
	left: 0;
	top: 0;
	content: '\2713\0020';
	color: green;
	margin-right: 20px;
}

.block-card .panel-copy a {
	padding:15px;
	background-color:#38a169;
	color:white;
	font-size:13pt;
	font-weight:700;
	letter-spacing:1px;
	border: 3px solid white;
	border-radius:15px;
}

.block-card .panel-copy a:hover {
	background-color:#238953;
}	

.block-card .panel-copy .memo {
	display:block;
	margin-top:20px;
	font-size:10pt;
}

.msg-box
{
	background-color:#eeffee; 
	border:2px solid #c1f2c1; 
	padding:20px; 
	border-radius: 10px; 
	text-align:center;
	margin:7px 0;
}

.msg-box.mobile {
	display:none;
}	

.msg-box.desktop {
	display:block;		
}	

.msg-box:hover
{
	background-color:#def6de;
}

.msg-box .title
{
	width:100%;
	float: left;
	font-size:26pt; 
	font-weight:500; 
	color:#1ca44b; 
	letter-spacing:1px;
}

.msg-box .msg
{
	font-size:14pt; 
	font-weight:600; 
	color:#2d80b1;
}


#follow-ll {
	background-color:#19be52;
	color:white;
	font-weight:600;
	height:50px;
	background-image: url('/assets/unlock.svg');
	background-repeat: no-repeat;
	background-position: 20px center;
	padding: 0 20px 0 40px;
	background-size:auto 14px;
	border-radius: 15px;
	letter-spacing:1px;
}

#follow-ll:hover {	background-color:#1ca44b; }

@media (max-width:768px) 
{
	#follow-ll { margin-bottom:20px; }
	.msg-box .title { font-size:14pt; }
	.msg-box .msg { font-size:11pt; )
}





@media screen and (max-width: 576px) 
{
	.msg-box { font-size:1.5rem; }
	
	.block-card .panel-copy,
	.block-card .panel-img
	{
		width:100%;
	}
	
	.block-card { flex-direction: column; }
	
	.block-card .panel-copy .title {
		text-align:center;
		margin-bottom:10px;
	}
	
	.block-card .panel-copy .mobile {
		display:block;
		width:60%;
		margin:auto;
	}	
	.block-card .panel-img .desktop { display:none; }			
	
	.msg-box.desktop { display:none; }
	.msg-box.mobile { display:block; }	
	
}

@media screen and (max-width: 668px) 
{
	.block-card .panel-copy .title { font-size:17pt; }		
	.msg-box span { font-size:14pt;}
}		

@media screen and (max-width: 800px) 
{
	.block-card .panel-copy ul li { font-size:11pt; }		
	.block-card .panel-copy a { font-size:10pt; }
}	






























