@charset "UTF-8";

/* プロフィール */
.profile {
	position:relative;
}
.profile .prof-image {
	width:250px;
	height:250px;
	float:right;
	margin:0;
}
.profile .prof-name {
	margin-right:260px;
}
.profile h1 {
	margin:0;
	margin-top:.2em;
	color:#282634;
}
.profile h1 .looks {
	font-size:.35em;
	color:gray;
	line-height:1.3;
	letter-spacing:0;
}


/* 件数表示 */
.profile .count-view {
	margin:1em 0;
	margin-right:260px;
	white-space:nowrap;
	font-size:.95em;
}


/* プロフィール内容 */
.prof-info {
	clear:both;
	float:right;
	font-size:.9em;
	width:250px;
}
.prof-info ul {
	margin:1em 0;
}
.prof-info li {
	border-bottom:1px solid silver;
	padding:.4em 0;
	line-height:1.2;
}
.prof-info li > .ttl {
	display:block;
	font-size:.7em;
	line-height:1;
	color:#272;
}
.prof-info li .ttl::after {
	content:":";
}
.prof-info li > .info {
}
.prof-info li .info a:hover { color:tomato; }


/* 自己PR */
.prof-view {
	position:relative;
	margin-right:270px;
}
.prof-view::after {
	content:"";
	display:block;
	clear:both;
}
.prof-view .view-head {
	border-bottom:1px solid silver;
	font-size:.9em;
	padding-bottom:.2em;
	margin-bottom:.5em;
}
.prof-view .prof-tag {
	margin:.5em 0;
	font-size:.9em;
}
.prof-view .p-pr {
	position:relative;
	margin:1em 0;
	font-size:.95em;
	line-height:1.3;
	overflow:hidden;text-overflow:ellipsis;
}
	


/* ボタン */
.m-button li { border:0; padding:0; }
.m-button a {
	line-height:1.5;
	margin-bottom:.5em;
	text-align:center;
	width:10em;
}


/* タグ */
.content.profile.new::before {
	display:block;
	position:absolute;
	padding:.3em 1em;
	line-height:1;
	border-radius:2em;
	border:.1em solid red;
	font-size:1.5em;
	content:"新規";
	color:red;
	top:0em;
	right:-0em;
	transform:rotate(15deg);
	opacity:.7;
}
.content.profile.nice::before {
	display:block;
	position:absolute;
	padding:.3em 1em;
	line-height:1;
	border-radius:2em;
	border:.1em solid red;
	font-size:1.5em;
	content:"人気！";
	color:red;
	top:0em;
	right:-0em;
	transform:rotate(15deg);
	opacity:.7;
}


/* メニュー */
#prof-menu {
	position:absolute;
	display:none;
	z-index:99;
	font-size:.8em;
	color:#aaa;
	padding:.3em 0;
	line-height:1.4;
	box-shadow:0 0 4px gray;
	border-radius:.2em;
	background-color:#eee;
}
#prof-menu::before {
	content:"";
	position:absolute;
	display:block;
	width:0;
	height:0;
	top:25%;
	right:-16px;
	border:1px solid transparent;
	border-width:7px 8px;
	border-left-color:#eee;
}
#prof-menu li { border-bottom:1px dotted silver; }
#prof-menu li:last-child { border-bottom:0; }
#prof-menu a {
	display:block;
	white-space:nowrap;
	color:#555;
	text-decoration:none;
	vertical-align:middle;
	padding:.2em .5em;
}
#prof-menu a:hover {
	background-color:#282634;
	color:white;
}


/* その他メニューボタン */
.etc-memu-square {
	position:relative;
	display:inline-block;
	height:0;
	width:0;
	padding:32px 32px 0 0;
opacity:.5;
}
.etc-memu-square:hover { opacity:1; }
.open .etc-memu-square .dot {
	border-color:gray;
}
.etc-memu-square .dot {
	position:absolute;
	border:3px solid gray;
	transition:all .3s linear;
	left:13px;
}
.etc-memu-square .dot:nth-child(1) {
	top:5px;
}
.etc-memu-square .dot:nth-child(2) {
	top:13px;
}
.etc-memu-square .dot:nth-child(3) {
	top:21px;
}
.etc-memu-square .dot::before {
	content:"";
	position:absolute;
	display:block;
	width:0;
	height:0;
	top:-3px;
	left:-11px;
	border:3px solid gray;
}
.etc-memu-square .dot::after {
	content:"";
	position:absolute;
	display:block;
	width:0;
	height:0;
	top:-3px;
	left:5px;
	border:3px solid gray;
}



/* ------------------------------------------------------ */
/* 記事リスト */
/* ------------------------------------------------------ */
.ping > li {
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	border-bottom:1px dotted silver;
	margin-bottom:1em;
}
.ping > li:last-child { border-bottom-width:0; margin-bottom:0; }
.ping .title {
	font-size:1.1em;
}
.ping .blog {
	vertical-align:middle;
	display:inline-block;
	*display:inline; *zoom:1;
	font-size:.8em;
	color:#555;
	max-width:10em;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	margin-left:.5em;
	position:relative;
	padding-right:.3em;
}
.ping .blog::before { content:"("; }
.ping .blog::after { content:")"; position:absolute; right:0; }
.ping .body {
	font-size:.9em;
	color:#555;
	line-height:1.2;
	white-space:normal;
	overflow:hidden;
	margin-bottom:.2em;
}
.ping .foot {
	margin-bottom:.2em;
}
.ping .time {
	font-size:.9em;
	color:darkgreen;
	margin-right:.6em;
	vertical-align:middle;
}
.ping .jq-bim-wedget {
	font-size:.85em;
	margin-bottom:.6em;
}



/* ------------------------------------------------------ */
/* 登録ブログ */
/* ------------------------------------------------------ */
#main .blog-list {
	position:relative;
	max-width:45em;
	width:100%;
	bottom:0;
	margin-top:2em;
	line-height:1.3;
}
body.mode-sp #main .blog-list { display:none; }
#main .blog-list > li {
	margin:.8em 0;
	padding:.3em;
	background-color:#f8f8f8;
	border-radius:.2em;
}
#main .blog-list > li:last-child { margin-bottom:0; }
#main .blog-list > li > a {
	display:flex;
	position:relative;
	flex-flow:row nowrap;
	align-items:flex-start;
	position:relative;
	border:1px dashed gray;
	border-radius:.2em;
	text-overflow:ellipsis;
	padding:.5em .5em;
	text-decoration:none;
	color:#888;
}
#main .blog-list > li:hover {
	background-color:#fff8f8;
}
#main .blog-list > .next {
	background-color:initial;
	color:steelblue;
	cursor:pointer;
	font-size:.95em;
}
#main .blog-list > .next:hover {
	text-decoration:underline;
}
#main .blog-list > .next blogcnt::before {
	content:"(";
}
#main .blog-list > .next blogcnt::after {
	content:"件)";
}
#main .blog-list .thumb {
	flex:0 0 auto;
	width:70px;
	height:70px;
	margin-left:.5em;
}
#main .blog-list .thumb img {
	width:70px;
	height:70px;
	border:1px solid silver;
}
#main .blog-list .body {
	flex:1 1 auto;
	width:50%;
}
#main .blog-list h3 {
	font-size:1em;
	line-height:1.4;
	color:steelblue;
}
#main .blog-list h3::before {
	display:inline-block;
	content:"";
	width:1.3em;
	height:1.2em;
	vertical-align:middle;
	background-position:left center;
	background-repeat:no-repeat;
	background-size:1.1em;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACLElEQVRYR7WXwVHrQAyGpRnvGUrwm9k9kw4IFUAHDzqgA0IFQAVAB+kAqODlnZ0MpgM4747FKGNnbLPxSnbYW8bO/p9+abUywsRlrV0g4l8AyIloiYi3RVGseNs8z3NjzA0AzPknAKz4nRDCQ1mWn/wOjtXP8/zYGPMCALPIHldVVX0i4iMiHvefExE/O2PQUQB9cSL6AIASEU+lATFECOGPGiAS+X/v/Zwtdc5dAsCjFKKqqgcVwJA4i2oBtq5JaZXi7MqFMWYJACdDGiKAEeLblFhrrxHxbh8A144IwFrLx+u83miX84jt2np41gIcTJyIvkIIMxEApyDLslkIYdU0kF7BaSNn866KongSAcRy6JybEdErIh5xh/PenxljLoTHcCs+qhOyGy0X2hBl3W5TB2snrgZg24normmjdRG2IVTiKoB2ztu9XAHRibwhFdVArMMpIaLiIgeG2qsQYq94EkDS2xMQg+KDABLxJo8xCJ4TmqOmvgustXNE5GFDvPoQ0j/+KEIeo7Is+xebZFKbNkNG0ydS70dTYK3l7iaebHoiyZz3oToOpK7PRERq8Y4DU6xvLhaJ5XsdcM7x5cDjtXaNirzTCev5/V2rPCXyDsDI6CdFvgPQRs+TDBFdbjYbHjgnL1RW/nbaLcuS7/6DLAZInnuOGgDu1+v14iCqrU0YgL/TeKzat56994tDRt0WGgL4VeFdEdZj1j27QERvAMCfz8vfirhv8zdXd6Qw5mQ1JwAAAABJRU5ErkJggg==);
}
#main .blog-list .vender-instagram h3::before {
	background-image:url('/img/oauth/IG.png');
	background-image:url('/js/images/jq-ping-vender-instagram.png');
	background-size:1.1em;
}
#main .blog-list .vender-instagram h3::after {
	display:inline-block;
	content:"Instagram";
	font-size:.6em;
	margin-left:.2em;
	vertical-align:middle;
	line-height:1.4;
	padding:0 .5em;
	color:white;
	background-color:#90588a;
	border-radius:.2em;
}
#main .blog-list .info {
	margin:.1em 0;
	font-size:.9em;
	line-height:1.3;
	overflow:hidden;
	text-overflow:ellipsis;
}
#main .blog-list .info > li {
	display:inline;
	margin-right:.5em;
	white-space:nowrap;
}
#main .blog-list .info .url {
	color:darkgreen;
}
#main .blog-list .info .ttl {
	font-size:.75em;
	color:#448;
}
#main .blog-list .info .ttl::after { content:":"; }
#main .blog-list .comment {
	font-size:.8em;
	line-height:1.3;
	color:#999;
}



/* ------------------------------------------------------ */
/* follow */
/* ------------------------------------------------------ */
.content.follow dt {
	font-size:.9em;
	color:#555;
}
.content.follow textarea {
	width:80%;
	height:5em;
	padding:.5em;
}
.content.follow p {
	margin:1em 0;
	color:#555;
}
.content.follow .chk-hide {
	margin:1em 0;
	padding:.5em;
	background-color:#ddd;
}
.content.follow .cmt { margin:1em 0; }

/* message */
.content.msg textarea {
	width:80%;
	height:5em;
	padding:.5em;
}


/* nmae */
name { font-weight:bold; }



/* ------------------------------------------------------ */
/* スマホ対応 */
/* ------------------------------------------------------ */
@media screen and (max-width: 1100px) {

.profile .prof-image {
	width:200px;
	height:200px;
}
.prof-info { width:200px; }
.prof-view { margin-right:220px; }
.count-view > a.button {
	min-width:11em;
}

}

@media screen and (max-width: 600px) {

.profile .prof-image {
	width:120px;
	height:120px;
	margin-bottom:1em;
}
.profile .prof-name { margin-right:90px; }
.profile .count-view {
	overflow:auto;
	margin:1em 0 1em 0;
	clear:both;
	font-size:.9em;
}
.count-view > a.button {
	width:30%;
	margin-right:1%;
	min-width:initial;
	max-width:13em;
	padding:.7em .5em;
}
.prof-info {
	float:none;
	width:auto;
	margin:1.5em 0;
}
.prof-info li {
	display:inline-block;
	border:initial;
	margin-right:1em;
	border-bottom:1px dotted silver;
	padding:.4em 0 .1em 0;
}
.m-button { margin-bottom:.5em; }
.m-button li { border:initial; padding:0; margin:0; vertical-align:middle; margin-right:.2em; }
.m-button a { width:auto; }
.prof-view { margin:1em 0; }

/* /@media */
}