@charset "UTF-8";

/* 標準画面端末用 */
@media (min-width: 641px) {
	/* side */
	#side_contents {
		float: right;
		background-color: #e74c3c;
		width: 170px;
		padding: 5px;
		margin: 0 10px 0 18px;
		border-radius: 4px;
	}
	#side_contents ul {
		margin: 0;
		padding: 0;
	}
	#side_contents ul > li {
		list-style-type: none;
	}
	#side_contents h3 {
		color: #fff;
		font-size: 14px;
		line-height: 2;
		margin: 0 0 5px;
	}
	#side_contents h3:before {
		content: url(/images/icon/icon_sub_h3_w.png);
		display: inline-block;
		vertical-align: middle;
		height: 11px;
		line-height: 1;
		margin: 0 5px 3px;
	}
	#side_contents ol {
		margin: 0;
		padding: 6px;
		color: #e74c3c;
		background-color: #fff;
		border-radius: 4px;
	}
	#side_contents ol > li {
		list-style-type: none;
		border-bottom: 1px dotted #ccc;
	}
	#side_contents ol > li:last-child {
		border-bottom: none;
	}
	#side_contents ol a {
		position: relative;
		display: block;
		font-size: 15px;
		line-height: 36px;
		padding: 0 .5em;
	}
	#side_contents ol a:hover {
		opacity: .7;
	}
	#side_contents ol a:after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 7px;
		width: 4px;
		height: 4px;
		margin-top: -2px;
		border-top: 1px solid #555;
		border-right: 1px solid #555;
		-webkit-transform: rotate(45deg);
	 	-moz-transform: rotate(45deg);
	 	-ms-transform: rotate(45deg);
	 	transform: rotate(45deg);
	}
}

/* 小画面端末用 */
@media (max-width: 640px) {
	.standard {
		display: none;
	}
	.compact {
		display: block;
	}

	/* header */
	#header {
		border-bottom: 1px solid #e74c3c;
	}
	#header h1 a {
		padding-top: 42px;
		background: url(/sp/img/header/logo_sp.png) center center no-repeat;
		width: 180px;
		margin: auto;
	}
	#header > div a {
		position: absolute;
		top: 0;
		display: inline-block;
		width: 42px;
		height: 0;
		padding-top: 42px;
		overflow: hidden;
	}
	#header > div a:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -14px;
		margin-left: -14px;
		display: inline-block;
		background-image: url(/images/blog/icon_blog.png);
		background-repeat: no-repeat;
		width: 28px;
		height: 28px;
		vertical-align: middle;
	}
	#header a[href^="/blog/"] {
		left: 0;
	}
	#header a[href^="/blog/"]:before {
		background-position: 0 -190px;
	}
	#header a[href^="#side_contents"] {
		right: 0;
	}
	#header a[href^="#side_contents"]:before {
		background-position: 0 -228px;
	}
	#header a[href^="#side_contents"].open:before {
		background-position: 0 -266px;
	}

	/* footer */
	#footer {
		font-size: 11px;
	}
	#footer a[href$="_top"] {
		right: 6px;
		bottom: 24px;
		width: 59px;
		padding-top: 59px;
		background-image: url(/images/btn/btn_totop_3.png);
	}
	#footer a[href$="_top"]:hover {
		background-position: 0 0;
	}

	/* side */
	#side_contents {
		color: #ddd;
		background-color: #333;
		font-size: 14px;
	}
	#side_contents > .compact {
		text-align: center;
		padding: 10px 0;
		border-bottom: 1px solid #444;
	}
	#side_contents a.button {
		font-size: 16px;
		padding: 0;
		height: 36px;
		line-height: 36px;
		width: 138px;
	}
	#side_contents a.button:before {
		margin-bottom: 2px;
	}
	#side_contents ul {
		margin: 0;
		padding: 0;
		line-height: 40px;
	}
	#side_contents li {
		list-style-type: none;
		border-bottom: 1px solid #444;
	}
	#side_contents li a {
		display: block;
		padding-left: 2em;
		text-decoration: none;
	}
	#side_contents li a[href="/"] {
		background-color: #777;
	}
	#side_contents li a:hover {
		background-color: #444;
	}
	#side_contents li h3 {
		position: relative;
		margin: 0 0 0 2em;
		font-size: inherit;
		font-weight: normal;
		cursor: pointer;
	}
	#side_contents li h3:after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 12px;
		right: 12px;
		background: url(/images/blog/icon_arrow_blog.png) 0 -78px no-repeat;
		width: 16px;
		height: 16px;
		margin: auto;
		vertical-align: middle;
	}
	#side_contents li ol {
		padding-left: 2em;
		height: 0;
		overflow: hidden;
	}
	#side_contents li ol li:last-child {
		border: none;
	}
	#side_contents li ol li a {
		padding: 0;
		color: #e64c3b;
	}
	#side_contents li ol li a:before {
		content: "・";
	}
	#side_contents li.open h3 {
		border-bottom: 1px solid #444;
	}
	#side_contents li.open h3:after {
		background-position: 0 -52px;
	}
	#side_contents li.open ol {
		height: auto;
	}

	/* メニュー表示トランジション */
	html {
		background-color: #333;			/* #side_contentsと同じ色にしておく */
	}
	#side_contents {
		display: none;
		float: right;
		margin: -59px -264px -80px 0;		/* #headerの高さ 横幅 #footerの高さ */
		width: 264px;
		z-index: 9999;
	}
	#manage_menu ~ #side_contents {
		margin-top: -99px;					/* 管理メニュー分も含める */
	}
	html.menu {
		overflow-x: hidden;
	}
	html.menu #header a[href^="#side_contents"]:before {
		background-position: 0 -266px;
	}
	html.menu #menu_overlay {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 9998;
	}

	/* modal */
	#modal {
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 1);
	}

	/* 管理メニュー */
	#manage_menu {
		height: 54px;
		line-height: 54px;
		cursor: pointer;
	}
	#manage_menu h1 {
		width: 150px;
	}
	#manage_menu h1:after {
		background-position: 0 -260px;
	}
	#manage_menu .menu {
		display: none;
	}
	#manage_menu.open {
		position: relative;
	}
	#manage_menu.open h1:after {
		background-position: 0 -286px;
	}
	#manage_menu.open .menu {
		display: block;
		position: absolute;
		top: 54px;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .85);
		z-index: 9997;
	}
	#manage_menu.open .menu ul {
		float: none;
		display: block;
		margin: 0;
		border-top: 1px solid #555;
	}
	#manage_menu.open .menu ul li {
		display: block;
		margin: 0;
		border-bottom: 1px solid #555;
	}
	#manage_menu.open .menu ul li a {
		display: block;
		padding: 0 1.6em;
		font-size: 15px;
	}
	#manage_menu.open .menu ul li a:hover {
		background-color: #444;
		text-decoration: none;
	}
	#manage_menu.open a.back {
		margin-left: 2.4em;
		line-height: 4;
		font-size: 15px;
	}

	/* 記事一覧 */
	#index_top #footer a[href$="_top"] {
		bottom: 64px;
	}
	#index_top #footer.show a[href$="_top"] {
		bottom: 24px;
	}
	ol.posts > li a.summary:hover {
		opacity: 1.0;
	}


	/* 記事詳細 */
	#article_top .body {
		padding: 1em 1.5em 1.5em;
	}
	#article_top .body .date {
		font-size: 12px;
	}
	#article_top .body .blog_title {
		margin-top: 0.6em;
	}

	/* 投稿フォーム */
	form#post_form ul.notes {
		position: static;
	}
	form#post_form .select_media .file {
		float: none;
		margin: 0 0 .5em;
	}
	form#post_form .select_media ul {
		margin-bottom: 1em;
	}
	form#post_form .media_info .thumb {
		max-width: 108px;
		margin-right: 1em;
	}
	form#post_form .media_info ul {
		line-height: 1.5;
		overflow: hidden;
	}
}

/* アーカイブ表示時副題を浮かす */
@media (max-width: 800px) {
	#contents .title h2 {
		position: relative;
	}
	#contents .title h2 small {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 11px;
		line-height: 1;
	}
	#contents .title h2 small:before {
		content: "※";
	}
}

/* ユーザーTOPのタイトル部を縮小表示 */
@media (max-width: 850px) {
	body.user #contents .title, body.op #contents .title {
		padding-bottom: 4px;
	}
	body.user #contents .title h2, body.user.op #contents .title h2 {
		position: relative;
		margin-left: 52px;
		font-size: 14px;
	}
	body.user #contents .title h2:after, body.op #contents .title h2:after {
		vertical-align: 0;
		margin-left: 0.8em;
		font-size: 11px;
	}
	body.user #contents .title .thumbnail, body.op #contents .title .thumbnail {
		width: 42px;
		margin: 7px;
	}
	body.user #contents .title .thumbnail img, body.op #contents .title .thumbnail img {
		height: 42px;
	}
	body.user #contents .title nav, body.op #contents .title nav {
		margin-left: 52px;
	}
	body.user #contents .title nav a, body.user #contents .title nav button, body.op #contents .title nav a, body.op #contents .title nav button {
		margin: 0;
		font-size: 11px;
		vertical-align: middle;
		line-height: 11px;
	}
	body.user #contents .title nav a:before, body.op #contents .title nav a:before {
		background-image: url(/images/blog/icon_blog_s.png);
		background-position: 0 -1px;
		-webkit-background-size: 20px 170px;
		background-size: 20px 170px;
		width: 20px;
		height: 20px;
	}
	body.user #contents .title nav button:before, body.op #contents .title nav button:before {
		background-image: url(/images/blog/icon_chip_s_b.svg);
		background-position: 0 -1px;
		width: 20px;
		height: 20px;
	}
	body.user #contents .title nav button:hover::before, body.op #contents .title nav button:hover::before {
		background-image: url(/images/blog/icon_chip_s.svg);
		background-position: 0 -1px;
	}
	body.user #contents .title nav a:hover:before, body.op #contents .title nav a:hover:before {
		background-position: 0 -1px;
	}
	body.user #contents .title nav a[href*="/online"]:before, body.op #contents .title nav a[href*="/online"]:before {
		background-position: 0 -61px;
	}
	body.user #contents .title nav a[href*="/online"]:hover:before, body.op #contents .title nav a[href*="/online"]:hover:before {
		background-position: 0 -61px;
	}
	body.user #contents .title nav a[href^="/blog/"]:before, body.op #contents .title nav a[href^="/blog/"]:before {
		background-position: 0 -91px;
	}
	body.user #contents .title nav a[href^="/blog/"]:hover:before, body.op #contents .title nav a[href^="/blog/"]:hover:before {
		background-position: 0 -91px;
	}
}