@charset "UTF-8";

/* *************************************** */
/* リスト */
/* *************************************** */
.util-viewlist {
	width:100%;
	margin-bottom:1em;
	overflow:hidden;text-overflow:ellipsis;
	line-height:1.2;
}
.util-viewlist > li {
	position:relative;
	display:inline-block;
	width:47.5%;
	margin:0;
	margin-right:2%;
	padding:1em 0 1em 5.9em;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	border-top:1px solid silver;
	vertical-align:top;
	min-height:7.6em;
}
.util-viewlist .thumb {
	position:absolute;
	top:1em;
	left:0;
	width:5.6em;
	height:5.6em;
}
.util-viewlist .thumb img {
	width:100%;
	height:100%;
}
.util-viewlist .thumb.update::after {
	content:"update";
	display:block;
	position:absolute;
	font-size:.7em;
	top:0;
	left:0;
	padding:.1em .4em;
	line-height:1em;
	color:white;
	background-color:#ff4f44;
	border-radius:1em;
	-webkit-animation:flash 3s linear 0s infinite normal;
}
.util-viewlist .thumb a { text-decoration:none; }
.util-viewlist .thumb a.admin::after {
	content:"管理人";
	display:block;
	position:absolute;
	font-size:.5em;
	font-weight:normal;
	bottom:0;
	left:0;
	opacity:.9;
	padding:.1em .4em;
	line-height:1.3em;
	color:black;
	background-color:white;
	border:1px solid #00a;
	border-radius:.1em;
}
.util-viewlist .thumb a.hide::after {
	content:"非公開";
	display:block;
	position:absolute;
	font-size:.6em;
	font-weight:normal;
	bottom:0;
	left:0;
	padding:.1em .4em;
	line-height:1.4em;
	color:white;
	opacity:1;
	background-color:#ff4f44;
	border-radius:.1em;
}
.util-viewlist .title {
	overflow:hidden;
	text-overflow:ellipsis;
}
.util-viewlist .title a {
	color:steelblue;
	font-size:1.1em;
	text-decoration:none;
}
.util-viewlist a.button {
	color:white;
}
.util-viewlist a:hover {
	color:tomato;
}
.util-viewlist .title .looks {
	display:block;
	font-size:.6em;
	color:steelblue;
	line-height:1.1em;
	overflow:hidden;
	text-overflow:ellipsis;
}

.util-viewlist .ps {
	margin:.3em 0;
	background-color:#f0f0f0;
	font-size:.8em;
	white-space:nowrap;
}
.util-viewlist .ps > ul {
	overflow:hidden;
	text-overflow:ellipsis;
}
.util-viewlist .ps li {
	width:auto;
	display:inline;
	margin:0;
	padding:0;
	line-height:1.8em;
	border:none;
	margin-right:1em;
	white-space:nowrap;
}
.util-viewlist .ps li:first-child {
	padding-left:.5em;
}
.util-viewlist .ps li::after {
	content:"|";
	color:#aaa;
	margin-left:.2em;
	margin-right:-.8em;
}
.util-viewlist .ps a { color:#555; }
.util-viewlist .ps a:hover { color:tomato; }
.util-viewlist .ps li:last-child { margin-right:0; }
.util-viewlist .ps li:last-child:after { display:none; }

.util-viewlist .pr {
	font-size:.85em;
	color:#999;
	line-height:1.2em;
	overflow:hidden;text-overflow:ellipsis;
}

.util-viewlist .join {
	color:peru;
}

.util-viewlist .time {
	font-size:.85em;
	color:darkgreen;
}
.util-viewlist pickup {
	color:red;
	font-weight:bold;
}



/* *************************************** */
/* view設定 */
/* *************************************** */
.util-viewlist-setting {
	position:relative;
	display:inline-block;
	line-height:0em;
	white-space:nowrap;
	border:1px solid silver;
	border-radius:2px;
	margin-bottom:.5em;
}
.util-viewlist-setting > * { cursor:pointer; vertical-align:middle; opacity:0.3; transition:all .2s linear; }
.util-viewlist-setting > .select { opacity:1; background-color:#eee; }
.util-viewlist-setting-detail {
	display:inline-block;
	width:44px;
	height:24px;
	padding:5px 7px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.util-viewlist-setting-detail > div {
	position:relative;
	width:6px;
	height:6px;
	background-color:black;
	margin-bottom:2px;
}
.util-viewlist-setting-detail > div::before {
	content:"";
	position:absolute;
	display:block;
	top:1px;
	right:-23px;
	width:21px;
	height:0;
	border-top:1px solid black;
}
.util-viewlist-setting-detail > div::after {
	content:"";
	position:absolute;
	display:block;
	top:4px;
	right:-23px;
	width:21px;
	height:0;
	border-top:1px solid black;
}

.util-viewlist-setting-simple {
	display:inline-block;
	width:44px;
	height:24px;
	padding:4px 6px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.util-viewlist-setting-simple > div {
	height:6px;
	margin:0;
	margin-bottom:2px;
	padding:0;
}
.util-viewlist-setting-simple > div > div {
	display:inline-block;
	width:6px;
	height:6px;
	background-color:black;
	margin:1px;
}



/* *************************************** */
/* サークルリスト */
/* *************************************** */
.util-viewlist.circle > li {
	display:block;
	width:auto;
	margin:0;
	padding-left:7.5em;
	min-height:9em;
}
.util-viewlist.circle .thumb {
	width:7em;
	height:7em;
}



/* *************************************** */
/* ブログリスト */
/* *************************************** */
.util-viewlist.blog > li {
	display:block;
	width:auto;
	margin:0;
}


/* *************************************** */
/* 簡易版リスト(小) */
/* *************************************** */
.util-viewlist.simple > li {
	display:inline-block;
	margin:.1em;
	width:120px;
	height:120px;
	padding:0;
	overflow:hidden;
	border:none;
	min-height:initial;
}
.util-viewlist.simple .thumb {
	width:100%;
	height:100%;
	top:0;
}
.util-viewlist.simple .thumb a.hide::after {
	bottom:inherit;
	top:0;
	left:0;
}
.util-viewlist.simple .thumb.update::after {
	left:initial;
	right:0;
}
.util-viewlist.simple.util-edit .thumb.update::after {
	display:none;
}
.util-viewlist.simple .thumb a.admin::after {
	bottom:inherit;
	top:0;
	left:0;
}
.util-viewlist.simple .title {
	overflow:hidden;
	z-index:1;
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
}
.util-viewlist.simple .title a {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display:block;
	font-size:.75em;
	color:white;
	line-height:1em;
	padding:2em .1em .4em .25em;
	overflow:hidden;
	text-overflow:ellipsis;
	max-height:7em;
	z-index:2;
	background-color:rgba(0,0,0,0.3);
	background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6) 70%);
}
.util-viewlist.simple .title .looks {
	display:none;
}
.util-viewlist.simple .ps {
	display:none;
}
.util-viewlist.simple .pr {
	display:none;
}



/* *************************************** */
/* 簡易版リスト(大) */
/* *************************************** */
.util-viewlist.simple.simple-big > li {
	width:150px;
	height:150px;
}
.util-viewlist.simple.simple-big .title a {
	font-size:.8em;
}



/* *************************************** */
/* 簡易版リスト(ps) */
/* *************************************** */
.util-viewlist.simple.simple-ps .title {
	bottom:18px;
}
.util-viewlist.simple.simple-ps .title a {
	padding-right:.1em;
	padding-bottom:.2em;
}
.util-viewlist.simple.simple-ps .ps {
	border:none;
	display:block;
	position:absolute;
	background-color:rgba(80,16,0,0.6);
	bottom:0;
	left:0;
	z-index:2;
	font-size:.7em;
	width:100%;
	margin:0;
	padding:0 .2em;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	height:18px;
	line-height:18px;
	color:#ddd;
}
.util-viewlist.simple.simple-ps .ps li {
	color:#ddd;
	margin-right:.5em;
	line-height:inherit;
}
.util-viewlist.simple.simple-ps .ps li:first-child { padding-left:.1em; }
.util-viewlist.simple.simple-ps .ps li::after {
	display:none;
}
.util-viewlist.simple.simple-ps .ps li > * {
	color:#ddd;
}
.util-viewlist.simple.simple-ps .ps li ttl {
	display:none;
}



/* *************************************** */
/* 編集リンク */
/* *************************************** */
.util-viewlist .edit {
	position:absolute;
	top:1px;
	right:0;
	display:block;
	padding:8px;
	margin:-8px;
	border-radius:.1em;
	width:20px;
	height:20px;
	color:white;
	line-height:1.4em;
	font-weight:normal;
	cursor:pointer;
	opacity:.4;
	transition:opacity .1s linear;
	z-index:3;
	background:url(/img/1.0/icon_gear_16.png) no-repeat center center transparent;
}
.util-viewlist .edit::after {
	content:" ";
	display:block;
	position:absolute;
	width:20px;
	height:20px;
	top:8px;
	left:8px;
	background:url(/img/1.0/icon_gear_16.png) no-repeat 2px 2px gray;
}
.util-viewlist.simple .edit {
	opacity:.7;
}
.util-viewlist .edit:hover {
	opacity:1;
}



/* *************************************** */
/* 編集メニュー */
/* *************************************** */
#edit-menu {
	display:none;
	position:absolute;
	white-space:nowrap;
	font-size:.8em;
	padding:.2em .5em;
	background-color:#f5f5f5;
	border:1px solid silver;
	border-radius:.2em;
	box-shadow:0 0 3px #aaa;
	z-index:5;
}
#edit-menu a {
	display:block;
	text-decoration:none;
}
#edit-menu a.none {
	color:#666;
	cursor:text;
}



/* *************************************** */
/* ダイアログ */
/* *************************************** */
.viewlist-dialog .user {
	font-size:1.1em;
	font-weight:bold;
	border-bottom:1px dotted silver;
	margin-bottom:.5em;
}



/* *************************************** */
/* 解散 */
/* *************************************** */
#close-confirm ul {
	margin:1em 0;
	font-size:.9em;
}
#close-confirm ul li::before {
	content:"※";
}
#close-confirm form {
	margin:1em 0;
	padding-top:1em;
	border-top:1px dotted silver;
}
#close-confirm .check {
	width:21em;
	margin:.5em 0;
	font-size:.9em;
	border-radius:.2em;
	background-color:#f0f0f0;
	padding:.1em .3em;
}
#close-confirm input[type="password"] {
	padding:.2em .5em;
	font-size:.9em;
	width:20em;
}



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

.util-viewlist .thumb {
	width:4.5em;
	height:4.5em;
}
.util-viewlist.circle .thumb {
	width:5em;
	height:5em;
}
.util-viewlist.simple.simple-big .thumb {
	width:100%;
	height:100%;
}
.util-viewlist > li {
	padding-left:5.0em;
	width:99%;
}
.util-viewlist.circle > li {
	padding-left:5.5em;
}
.util-viewlist.simple > li {
	width:95px;
	height:95px;
	margin:1px;
	padding:0;
}
.util-viewlist.simple.simple-big > li {
	width:112px;
	height:112px;
	margin:1px;
	padding:0;
}
.util-viewlist .title a { font-size:1em; }
.util-viewlist .pr { font-size:.8em; }
.util-viewlist.simple .title a { font-size:.7em; }
.util-viewlist.simple.simple-big .title a { font-size:.7em; }
.util-viewlist .ps > ul { overflow:auto; text-overflow:initial; padding-right:1em; }

#edit-menu a { padding:.2em; border-bottom:1px dotted silver; }
#edit-menu a:last-child { border:none; }

}