.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.html_card,
.ogp_card {
	border: 1px solid rgba(27, 37, 56, 1);
	border-radius: 6px;
	padding: .2em .5em .5em .5em;
	position: relative;
}
.html_card::before,
.ogp_card::before {
	position: absolute;
	top: -20px;
	left: 1em;
	content: 'Reference';
	font-size: .7rem;
	color: #ffffff;
	background: rgba(27, 37, 56, 1);
	border-radius: 6px 6px 0px 0px;
	padding: .1em .5em;
}
.html_card p,
.ogp_card p {
	margin: .5em 0 .5em 0;
	line-height: 1.6em;
}
.html_card a,
.ogp_card a {
	text-decoration: none;
	margin: 0;
	padding: 0;
}
.ogp_card img {
	float: right;
	margin: .5em .5em .5em 1em;
	border-radius: 6px;
	width: 100px;
	height: auto;
}
.html_card p.title,
.ogp_card p.title {
	position: relative;
	padding: .3em .3em .3em .75em;
	border-left: 6px solid rgba(0, 188, 212, 1);
}
.html_card p.title::before,
.ogp_card p.title::before {
	position: absolute;
	content: '';
	left: -6px;
	bottom: 0;
	width: 6px;
	height: 50%;
	background-color: rgba(27, 37, 56, 1);
}
.html_card p.title a,
.ogp_card p.title a {
	font-size: 1.1rem;
	font-weight: bold;
	color: rgba(27, 37, 56, 1);
	padding-bottom: .1em;
	border-bottom: 1px dotted rgba(0, 188, 212, 1);
	transition: all .3s;
}
.html_card p.copy a,
.ogp_card p.copy a {
	font-size: .8rem;
	margin-bottom: 0em;
	text-decoration: underline;
	color: #666666;
	display: block;
}
.html_card p.copy a::before,
.ogp_card p.copy a::before {
	font-size: .9rem;
	font-family: 'FontAwesome';
	content: '\f0c1';
	color: rgba(0, 188, 212, 1);
	display: inline-block;
	width: 1.2rem;
}
.ogp_card p.card_bt {
	margin: 0px auto;
	margin-top: -20px;
	float: right;
}
.html_card p {
	position: relative;
}
.html_card p.card_bt {
	position: absolute;
	bottom: 0;
	right: .5em;
}
.html_card p.card_bt a,
.ogp_card p.card_bt a {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.2em 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border:1px solid rgba(0, 188, 212, 1);
	background: rgba(0, 188, 212, 1);
	overflow: hidden;
	z-index: 1;
}
.html_card p.card_bt a:after,
.ogp_card p.card_bt a:after  {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 100%;
	background : #fff;
	opacity: 0;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transition: 0.3s;
	z-index: -1;
}
.html_card p.card_bt a:hover,
.ogp_card p.card_bt a:hover {
	color: rgba(0, 188, 212, 1);
}
.html_card p.card_bt a:hover:after,
.ogp_card p.card_bt a:hover:after {
	height: 350%;
	opacity: 1;
}
.html_card p.card_bt a:active:after,
.ogp_card p.card_bt a:active:after {
	height: 450%;
	opacity: 1;
}

javascript:(function(f,s){s=document.createElement('script');s.src='//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';s.onload=function(){f(jQuery.noConflict(true))};document.body.appendChild(s)})(function($){var c=[];var r;c.u=document.URL;c.t=$('title').text();if($('meta[name=description]').attr('content')){c.d=$('meta[name=description]').attr('content')}else if($('meta[name=Description]').attr('content')){c.d=$('meta[name=Description]').attr('content')}else{c.d=' '};c.i=$('meta[property="og:image"]').attr('content');if(c.i!=null&&c.i!=""){if(c.i.substr(0,5)=="https"||c.i.substr(0,2)=="//"){}else{c.i=""}}c.n=$('meta[property="og:site_name"]').attr('content');c.td=document.domain;if(c.n!=null){c.np='<p>'+c.n+'</p>'}else{c.np=''};if(c.i!=null&&c.i!=""){r='<div class="ogp_card clearfix"><img src="'+c.i+'" alt="'+c.n+'" width="100" height="100" /><p class="title"><a href="'+c.u+'">'+c.t+'</a></p>'+c.d+'…<p class="copy"><a href="'+c.u+'">'+c.td+'</a></p><p class="card_bt"><a class="card_link" href="'+c.u+'" >ホームページを見る</a></p></div>'}else{r='<div class="html_card"><p class="title"><a class="card_link" href="'+c.u+'" >'+c.t+'</a></p>'+c.d+'…<p class="copy"><a class="card_link" href="'+c.u+'" >'+c.td+'</a></p><p class="card_bt"><a class="card_link" href="'+c.u+'" >ホームページを見る</a></p></div>'};$('body').prepend('<textarea style="width:90%;height:200px;z-index:2147483647;position:fixed;top:0;color:#000000;">'+r+'