@charset "UTF-8";
body { font-size:1em; }
/* ************************************************ */
/* ブログ情報 */
/* ************************************************ */
#bloginfo {
	display:flex;
	flex-flow:row nowrap;
	align-items:stretch;
	width:100%;
	margin:1em 0;
}

#bloginfo > article {
	flex:1 1 auto;
	width:100%;
	margin-right:1em;
}

#bloginfo > aside {
	flex:0 0 336px;
}

article > section {
	background-color:white;
	padding:1em;
	border-radius:.2em;
	margin-bottom:2em;
	position:relative;
}

article section h2 {
	font-size:1.2em;
	font-weight:bold;
}

section.info {
	margin-top:4em;
}
section.info header {
	display:flex;
	position:relative;
	align-items:stretch;
	min-height:5em;
}
section.info .thumb {
	flex:0 0 auto;
	position:absolute;
	top:-4em;
	width:9em;
	height:9em;
}
section.info .thumb img {
	max-width:100%;
	max-height:100%;
}
section.info h2 {
	margin-top:1em;
}
section.info .setting {
	flex:1 1 auto;
	text-align:right;
	font-size:.8em;
	margin-left:13em;
}
section.info .setting .button {
	margin-bottom:.3em;
	width:9em;
	text-align:center;
	border:1px solid rgb(90,161,59);
	padding:0 .5em;
}
section.info .setting .button[disabled] {
	border-color:#ccc;
}
section.info .setting .negative {
	background-color:white;
	color:#666;
	border-color:#ddd;
}

.blog {
}
.blog > li {
	padding:1em 0;
}
.blog > li:not(:last-of-type) {
	border-bottom:1px solid #ddd;
}
.blog li.desc {
	color:#999;
}
.blog dl {
	display:flex;
	flex-flow:row nowrap;
	width:100%;
	overflow:hidden;
}
.blog dl > dt {
	flex:0 0 auto;
	width:5em;
	text-align:right;
	margin-right:.5em;
	font-size:.9em;
	color:#aaa;
}
.blog dl > dt::after {
	content:" : ";
}
.blog dl > dd {
	overflow:hidden;
	text-overflow:ellipsis;
}
.blog .cate span {
	font-size:.8em;
	color:#888;
}

section.items h2 {
	padding-bottom:.3em;
}

#list-item {
	border-top:1px solid #ddd;
	margin-bottom:2em;
}
.list li {
	border-bottom:1px solid #ddd;
}
.list .item {
	position:relative;
}
.list .link {
	padding:1.1em 0;
	display:block;
	font-size:1em;
}
.list .item .title {
	line-height:1.4;
	color:black;
}
.list .item .body {
	color:#aaa;
	font-size:.85em;
	line-height:1.5;
	margin-top:.2em;
}
.list .time {
	color:#bbb;
	font-size:.75em;
}
.list .remove {
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
	font-size:.9em;
	line-height:1.4;
	padding:0 1em;
	border-radius:.2em;
	background-color:steelblue;
	color:white;
	cursor:pointer;
}


/* ボタン */
.buttons {
	text-align:center;
	margin-top:2em;
}
.next {
	display:block;
	max-width:40em;
	margin:0 auto;
	line-height:3.2;
	padding:0 1em;
	color:#555;
	border:1px solid silver;
	border-radius:.2em;
	text-align:center;
	cursor:pointer;
}
.next:hover {
	background-color:#f5f5f5;
}


/* サイドバー */
aside {
	position:relative;
}
aside > section + section {
	margin-top:2em;
}
aside .ads * {
	text-align:center;
	margin:0 auto;
}
aside .ads:last-of-type {
	position:sticky;
	top:1em;
}



/* ************************************************ */
/* 広告 */
/* ************************************************ */
main .ads {
	padding:1em 0;
	box-sizing:content-box;
	min-height:100px;
	text-align:center;
}



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

#bloginfo {
	margin-top:0;
	flex-flow:column nowrap;
}

#bloginfo .ads-header {
}

#bloginfo > aside {
	flex:0 0 auto;
}

}


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

main > .wrapper {
	padding-top:0;
}

main h1 {
	font-size:1.6em;
	line-height:1.2;
}
article > section {
	padding:.5em;
	position:relative;
}

#list-item {
	max-width:100%;
}

section.info {
	line-height:1.3;
	font-size:.95em;
	margin-top:2.5em;
}
#bloginfo section h2 {
	display:none;
}
section.info header {
	min-height:3.5em;
}
section.info .thumb {
	width:6em;
	height:6em;
	top:-2.5em;
}
section.info .setting {
	margin-left:7em;
}
section.info .setting .button {
	font-size:.9em;
}
.blog {
	width:100%;
	margin-right:0;
	margin-top:.5em;
	font-size:.95em;
}
.blog > li {
	padding:.4em 0;
	line-height:1.3;
}
.blog > li:not(:last-of-type) {
	border:none;
}
.blog li.id {
	font-size:.8em;
	color:#999;
}
.blog li.id dd::before {
	content:"ID: ";
}
.blog li.title {
	font-size:1.1em;
	font-weight:bold;
}
.blog dl {
	flex-flow:column wrap;
}
.blog dl > dt {
	display:none;
	text-align:left;
	font-size:.75em;
	line-height:1.2;
	padding-top:.8em;
	margin-bottom:.3em;
}
.blog dl > dt::after { display:none; }
#list-item {
	border-top:0;
	font-size:.95em;
}
.list > li {
	padding:.5em 0;
}
.list .item .title {
	color:#888;
	font-weight:bold;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.list .item .body {
	font-size:.75em;
	display:box;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	text-overflow:ellipsis;
}

}