@charset "euc-jp";
/*********************************************
内容       : ALオンラインバナー フラットデザイン用
ページURL  : http://ad.angel-live.com/onbanner/online_maker_flat.php
作成者     : おおで 2014.05.13
*********************************************/

body {
	margin: 0;
	padding: 0;
	background: #dfdfe7;
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic";
	font-size: 12px;
}
img { border: 0; }
a {
	color:#0066CC;
	text-decoration:none;
}
a:hover { text-decoration: none; }
p {
	margin: 0;
	paddding: 0;
	line-height: 1;
}
em {
	color: #ff0;
	font-style: normal;
}
#title a#wrapperStandard { display: none; }
/* タイトル（マーキー）
-----------------------------------------------------------------*/
#title {
	overflow: hidden;
	height: 35px;
	margin-bottom: 1px;
	background: url(../img/ad_flat_parts.png) repeat-x 0 -40px;

}
#title a {
	position: relative;
	display: block;
	height: 24px;
	padding: 11px 0px 0 138px;
	margin: 0 4px 0 0px;
	color: #fff;
	font-weight: normal;
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
}
/*
#title a marquee {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding: 0px 0 0 0px;
	margin-left: 0px;
	width: 100%;
	height: 35px;
	line-height: 35px;
}
*/
#title a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0px;
	display: block;
	width: 138px;
	height: 35px;
	margin-left: 0px;
	background: url(../img/ad_flat_parts.png) repeat-x 0 0;
}
#title a marquee em { color: #7eacc4; }
#title a marquee em:after {
	content: ":";
	display: inline-block;
	vertical-align: top;
	padding: 0 4px;
	color: #fff;
	font-weight: bold;
}
body.onlineBannerFlat #title a#wrapper {
	height: 35px;
	padding: 0px 0px 0 138px;
}
#tweetMarquee {
	height: 35px;
}
body.onlineBannerFlat #title a#wrapper > span {
	width: 200%;
	position: relative;
    display: block;
		height: 35px;
}
body.onlineBannerFlat #title a#wrapper > span span {
	display: block;
	width: 100%;
	position: absolute;
	left: 100%;
	top: 0;
	display: block;
	height: 35px;
	line-height: 35px;
	-ms-animation: marquee linear 5s infinite;
	-o-animation: marquee linear 5s infinite;
	-webkit-animation: marquee linear 5s infinite;
	-moz-animation: marquee linear 5s infinite;
	animation: marquee linear 5s infinite;
}
@-moz-keyframes marquee {
	0%   { left: 100%;}
	30%  { left: 0;}
	100% { left: 0;}
}
@-o-keyframes marquee {
	0%   { left: 100%;}
	30%  { left: 0;}
	100% { left: 0;}
}
@-webkit-keyframes marquee {
	0%   { left: 100%;}
	30%  { left: 0;}
	100% { left: 0;}
}
@-ms-keyframes marquee {
	0%   { left: 100%;}
	30%  { left: 0;}
	100% { left: 0;}
}
@keyframes marquee {
	0%   { left: 100%;}
	30%  { left: 0;}
	100% { left: 0;}
}
/* チャットボックス　共通
-----------------------------------------------------------------*/
.peep {
	position: absolute;
	z-index: 30;
	top: 139px;
	right: 10px;
	width: 63px;
	height: 13px;
	line-height: 13px;
	background: #cd7290;
	font-size: 10px;
	text-align: right;
	color: #fff;
}
.peep:before {
	content: "";
	position: absolute;
	top: 0;
	left: -13px;
	width: 13px;
	height: 13px;
	background: url(../img/ad_flat_parts.png) no-repeat -80px -80px;
}
.status {
	position: absolute;
	right: 0;
	bottom: 0;
}
.profile span { color: #f90; }
.boxCommon .profile .cup { display: none; }

.boxCommon{
	position: relative;
	float: left;
	padding: 2px;
	text-align: center;
	background: #fff;
	border: solid 1px #ccc;
	line-height:1;
}
.boxCommon .linkarea {
	z-index: 10;
	position: absolute;
	top:0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/alpha_bg.gif);
	text-align: left;
}
.boxCommon .linkarea:before {
	content: "";
	position: absolute;
	z-index:30;
	display: block;
	width: 57px;
	height: 25px;
	background: url(../img/ad_flat_parts.png) no-repeat 0 -80px;
}
.boxCommon .linkarea:after {
	content: "";
	position: absolute;
	z-index: 10;
	left: 10px;
	display: block;
	width: 12px;
	height: 6px;
	background: url(../img/ad_flat_parts.png) no-repeat -100px -80px;
}
.boxCommon .linkarea img {
	display: block;
	z-index: 10;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
.boxCommon .linkarea:hover img {
	position: absolute;
	z-index: 20;
}
.boxCommon .hitokoto {
	position: relative;
	margin: 0 0px 2px;
	background: #9e9ea4;
	font-size: 10px;
	text-align: left;
}
.boxCommon .profile { color: #222; }
.boxCommon .profile .name {
	font-size: 10px;
	line-height: 1.4em;
	margin-bottom: 2px;
}
.boxCommon .profile .name span,
.boxCommon .profile .name em { color: #e87197; }
.boxCommon .profile dl,
.boxCommon .profile dl dt,
.boxCommon .profile dl dd {
	margin: 0;
	padding: 0;
}
.boxCommon .profile dl dt,
.boxCommon .profile dl dd {
	display: inline-block;
	vertical-align: top;
}
.boxCommon .profile dl {
	display: block;
	text-align: center;
	max-width: 170px;
	height: 12px;
	margin: 2px 9.5px;
	overflow: hidden;
	white-space: nowrap;
}
.boxCommon .profile dl dt { color: #4499c0; }
.boxCommon .profile dl dt:after {
	content: ":";
	margin-right: 2px;
}
.boxCommon .profile dl dd:before { content: "・"; }
.boxCommon .profile dl dd:first-of-type:before { display: none; }

/* チャットボックス 小
-----------------------------------------------------------------*/
.chatbox{
	width: 128px;
	height: 156px;
	margin: 0 4px 4px;
}
.chatbox .linkarea:before {
	top: 18px;
	left: 6px;
}
.chatbox .linkarea:after { top: 18px; }
.chatbox .linkarea img {
	width: 120px;
	height: 90px;
	margin: 20px 0 0 6px;
}
.chatbox .linkarea:hover img {
	-webkit-transform: scale( 1.1 );
	-moz-transform: scale( 1.1 );
	-ms-transform: scale( 1.1 );
	-o-transform: scale( 1.1 );
}
.chatbox .linkarea .peep {
	top: 97px;
	right: 6px;
}
.chatbox .hitokoto {
	line-height: 16px;
	height: 16px;
	padding: 0 4px;
}
.chatbox .hitokoto p {
	overflow: hidden;
	width: 120px;
	line-height: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.chatbox .profile { margin-top: 96px; }
.chatbox .profile dl,
.chatbox .profile dl dt,
.chatbox .profile dl dd { font-size: 10px; }
.chatbox .profile dl {margin: 2px 10px}

/* チャットボックス 大
-----------------------------------------------------------------*/
.chatbox_big{
	width: 176px;
	height: 201px;
	padding: 2px;
	margin: 0 2px 2px;
}
.chatbox_big .linkarea:before {
	top: 30px;
	left: 10px;
}
.chatbox_big .linkarea:after { top: 30px; }
.chatbox_big .linkarea img {
	width: 160px;
	height: 120px;
	margin: 32px 0 0 10px;
}
.chatbox_big .linkarea:hover img {
	-webkit-transform: scale( 1.2 );
	-moz-transform: scale( 1.2 );
	-ms-transform: scale( 1.2 );
	-o-transform: scale( 1.2 );
}
.chatbox_big .hitokoto {
	height: 20px;
	padding: 3px 4px 5px;
}
.chatbox_big .hitokoto p { line-height: 1.1; }
.chatbox_big .profile { margin-top: 124px; }
.chatbox_big .profile .name { font-size: 12px; }