@charset 'utf-8';

/* reset */

*,*:after,*:before {
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
	-webkit-overflow-scrolling:touch;
	-ms-word-break:break-all; word-break:break-all; word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto;
}
html { height:100%; overflow-y:hidden; }
body { height:100%; overflow-y:hidden; -webkit-text-size-adjust:100%; }
#all, #menu-wrap, #container-wrap { position:relative; }

table { border-collapse:collapse; border-spacing:0; }
a:focus { outline:none; }
style, script { display:none!important; }

body { line-height:150%;  -webkit-text-size-adjust:100%; margin:0; padding:0; }

h1,h2,h3 { line-height:120%; }
h1 { font-size:150%; }
h2 { font-size:125%; }
h3 { font-size:110%; }

img { max-width:100%; }

pre { line-height: 110%; font-family: monospace; }

a, a:visited { color:inherit; }
a { text-decoration:none; }
a:hover, a:active { text-decoration:underline; }

.post .more, .post-body a { text-decoration:underline; }

* { border-style:none; border-width:1px; }
hr { border-top-style:solid; height:0; }
input, textarea { border-style:solid;  -webkit-appearance:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; }
input[type="checkbox"], input[type="radio"] { border-style:none; }
input:focus, textarea:focus, select:focus,
input[type="submit"]:focus,input[type="button"]:focus,input[type="reset"]:focus,
button:focus, a.btn:focus {
	outline:none;
}

/* utils */

.clearfix { min-height:1px; }
.clearfix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
* html .clearfix { height:1px; /\*//*/ height:auto; overflow:hidden; /**/ }

@media all and (min-width:768px) {
	/* for Desktop or Tablet */
	.for-mobile { display:none !important; }
}

@media all and (max-width:767px) {
	/* for Smartphone */
	.for-desktop { display:none !important; }
}

.pre-wrap { white-space:pre-wrap; }

a.focus-toggle[tabindex] ~ .focus-toggle-target { display:none !important; }
a.focus-toggle[tabindex]:focus ~ .focus-toggle-target { display:block !important; }

input[type="checkbox"].css-toggle { display:none !important; }
input[type="checkbox"].css-toggle ~ .css-toggle-target { display:none; }
input[type="checkbox"].css-toggle:checked ~ .css-toggle-target { display:block; }

form ul.errorlist { list-style:none; margin:0.5em 0; padding:0; }
form ul.errorlist > li { margin:0; padding:0; color:red; }

ul.menu { list-style:none; margin:0; padding:0; }
ul.menu > li { padding:0; margin :0; }
ul.menu > li > a { display:block; text-decoration:none; }
ul.menu > li > a:hover { text-decoration:none; }

ul.menu.horizontal { display:block; min-height:1px; }
ul.menu.horizontal > li { display:block; float:left; vertical-align:middle; }
ul.menu.horizontal > li + li { margin-left:2px; }
ul.menu.horizontal > li > a { display:block; float:left; padding:2px 4px 0; }
ul.menu.horizontal:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
ul.menu.horizontal > li { border-bottom:2px solid transparent; }

ul.menu.vertical { display:block; }
ul.menu.vertical > li { display:block; }
ul.menu.vertical > li > a { display:block; }
ul.menu.vertical > li > a { padding:2px 4px; }
ul.menu.vertical > li { border-left:2px solid transparent; }
ul.menu.vertical > li.active, ul.vertical > li:hover { border-color:black; }

/******* styles ********/

html { font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', sans-serif; }
/* #cover-picker, #menu, #submenu { font-family:'Lato', 'Helvetica Neue', sans-serif; font-weight:400; } */

body { font-size: 16px; line-height: 24px; padding:0; margin:0; }

img.fa-png { display:inline-block; vertical-align:text-bottom; height:1.3em; line-height:1; }

ul.menu > li > a { color:inherit; }
#cover-picker a { color:inherit; }
.post-title > a { color:inherit; }

#cover-title-permalink,
#cover-title {
	text-shadow:
		0 0 3px rgba(0,0,0,1),
		0 0 20px rgba(0,0,0,.3);
}

#cover-description {
	text-shadow:
		0 0 3px rgba(0,0,0,1),
		0 0 5px rgba(0,0,0,.5),
		0 0 10px rgba(0,0,0,.3);
}

#cover-picker { text-align:left; }
#cover-title-permalink,
#cover-title { font-size: 230%; font-weight:bold; margin: 15px 0; }
#cover-description { font-size:0.8rem; /* -moz-opacity:0.8; opacity:0.8; */ line-height:1.2; }
#cover-menus, #cover-menu { font-size:1rem; /* -moz-opacity:0.8; opacity:0.8; */ color:inherit; }
#cover-menus { margin-top:20px; text-align:center; margin-left:-8px; margin-right:-8px; }
#cover-menus > a { display:inline-block; margin-left:8px; margin-right:8px; }
/* #cover-menus > a + a { margin-left:1em; } */
#cover-menu { margin-top:-10px; }
#cover-down { text-align: center; -moz-opacity:0.5; opacity:0.5; }

#cover a:hover, #cover a:active { text-decoration:none; }

#cover-via {
	opacity:.5;
	color:white;
	background:black;
	color:rgba(255,255,255,.8);
	background:rgba(0,0,0,.5);
	text-shadow:none;
	
	font-size:75%;
	font-style:italic;
	padding:.2em .5em;
	line-height:1.1;
	position:absolute;
	right:0;
	bottom:0;
	max-width:100%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	z-index:10;
}
#cover-via:hover {
	opacity:1;
}

#main > #submenu { text-align: center; margin-top:20px; margin-bottom:30px; }

/* .post-title > a { display:block; } */
.post-menu, .post-date { -moz-opacity:0.75; opacity:0.75; }
#permalinkpage-post .post-title { margin:0; }

@media all and (max-width:767px) {
	#cover-title-permalink,
	#cover-title { font-size: 170%; }
	#cover-description { font-size: 0.9rem; line-height:1.4em; }
}

#pagination { text-align: center; }

#main > #pagination { margin-top:2em; margin-bottom:2em; }
#pagination > * { padding:4px 6px; line-height:1; display:inline-block; min-width:1.5em; }
#pagination > a { color:inherit; border-style:solid; display:inline-block; }
#pagination > a:hover { text-decoration:none; }
#pagination > a > img.fa-png { display:block; -moz-opacity:0.5; opacity:0.5; }
#pagination > a:hover > img.fa-png { -moz-opacity:1; opacity:1; }

#paging-first,#paging-prev { margin-right:0.5em; }
#paging-last,#paging-next { margin-left:0.5em; }

@media all and (max-width:767px) {
	#pagination { font-size:16px; }
	#pagination > * { margin-left:0.5em; }
	#pagination > *:first-child { margin-left:0; }
}

/*  */

#scroll-top {
	position: fixed;
	padding: 4px 8px;
	
	bottom: 50px;
	right: 20px;
	
	font-size:24px;
	line-height:24px;
	
	z-index:100;
}
#scroll-top > * { color:inherit; }

#main > #footer-wrap { padding:0; }

a.post-image > img { display:block; }
.post-title { font-size:150%; line-height:1.4em; font-weight:bold; }
#permalinkpage-post.no-cover .post-title { font-size:250%; }
.post-menu, .post-date { font-size:80%; }
.post-menu > a, .post-date > a { color:inherit; }

#permalinkpage-post .sns-shares-simple-toggle {
	border-top-style:solid;
	text-shadow:none;
	color:inherit;
	-moz-opacity:0.8; opacity:0.8;
}

#permalinkpage-post .sns-shares-simple {
	margin-top:2em;
}

.post-body { margin-top:1em; }

@media all and (max-width:767px) {
	.post-title { font-size:130%; }
	#permalinkpage-post.no-cover .post-title { font-size:180% }
}

#posts { padding-top:20px; }
/*  */

#posts > .post { padding-top: 10px; padding-bottom:4em; }
#posts > .post + .post-divider + .post { padding-top:2em; position: relative; }

/*  */

#submenu { margin-bottom: 2em; }

#posts.posts-short > .post { padding-bottom:60px; }

#posts > .post + .post-divider {
	display:block;
	width: 100%;
	height: 0;
	
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: relative;
	padding: 0 2em;
	left: -1em;
	
	border-top-style: solid;
}

.post-body img { max-width:100%; height:auto!important; display:block; }
.post-body iframe { max-width:100%; display:block; }
.post-body img,
.post-body iframe { margin-top:15px; margin-bottom:15px; }

@media all and (min-width:768px) {
	#submenu + #posts > .post:first-child { padding-top: 0; }
}

/*  */
#posts > .post-has-image .post-image > a {
	display:block;
}

@media (min-width:768px) {

	#posts > .post-has-image { position:relative; }
	#posts > .post-has-image .post-info {
		position:relative;
		padding-right:166px;
		width:100%;
	}
	#posts > .post-has-image > .post-container {
		position:relative;
		min-height:112px;
	}
	#posts > .post-has-image .post-image {
		position:absolute;
		top:0;
		right:0;
		width:150px;
		height:100%;
		background-position:center center;
		background-size:cover;
	}
	#posts > .post-has-image .post-image img {
		display:block;
		width:100%;
		height:100%;
		-moz-opacity:0;
		opacity:0;
	}

}

@media (max-width:767px) {
	#posts > .post-has-image .post-image {
		margin-top:15px;
	}
	#posts > .post-has-image .post-image img {
		width:100%;
		display:block;
	}
}
/*  */

#cover-picker { padding:20px; }

@media all and (min-width:1024px) {
	#cover-picker { padding:15px; }
}

@media all and (min-width:768px) and (max-width:1279px) {
	/* for Desktop or Tablet */
	h1  { font-size:130%; }
}

@media all and (max-width:767px) {
	/* for Smartphone */
	
	body { font-size:16px; line-height:24px; }
	
	#main > * { padding-left:15px; padding-right:15px; }
	#main > *:first-child { padding-top:15px; }
	
	/* #main, #footer { padding:15px; } */
	
	h1 { font-size:120%; }
	h2 { font-size:110%; }
	h3 { font-size:105%; }
	
}

body.init { opacity:0; transition:opacity 500ms ease 0; }
body { opacity: 1; transition:opacity 500ms ease 0; }


/* for contents */
img.alignleft { float:left; margin-right:7px; margin-bottom:7px; max-width:50%; }
img.alignright { float:right; margin-left:7px; margin-bottom:7px; max-width:50%; }

a[href="#translate"] {
	border-style:solid;
	
	display:inline-block;
	vertical-align:middle;
	font-size:75%;
	font-weight:normal;
	line-height:1em;
	
	padding:4px 0.6em 4px 0.6em;
	-moz-border-radius:1.2em;
	-webkit-border-radius:1.2em;
	-ms-border-radius:1.2em;
	border-radius:1.2em;
	
	white-space:nowrap;
	margin-left:2em;
}

@media (max-width:767px) {
	a[href="#translate"] {
		font-size:80%;
		padding:3px 0.4em 3px 0.4em;
	}
}

#cover-picker h1 { margin-top:0; }

@media (max-width:767px) {
	#cover-picker { padding-bottom:15px; }
}


/** menus **/

#menu-wrap {
	position: relative;
	width: 280px;
	float: left;
	margin-right:-280px;
	
	min-height: 100%;
	overflow:hidden;
	
	background: black;
	color: #ccc;
	color: rgba(255,255,255,0.8);
	
	overflow-y: auto;
	height: 100vh;
}

#container-wrap {
	position: relative;
	float: left;
	width: 100%;
	
	min-height: 100%;
	overflow:hidden;
	
	background: white;
	color: #333;
	color: rgba(0,0,0,0.8);
	
	overflow-y: auto;
	height: 100vh;
}

#container { position:relative; }

#container-mask {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: transparent;
	background: rgba(255,255,255,0);
	cursor: pointer;
	z-index:32700;
}

body.menu-closed #container-mask {
	display:none;
}

#all {
	overflow:hidden;
}
#menu-wrap, #container-wrap {
	/*
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important;
	*/
}

#footer-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
}

#main-menu-toggle {
	position: absolute;
	left: 20px;
	top: 20px;

	display: inline-block;
	padding: 1px;
}

body.init #main-menu-toggle {
	-moz-transform: rotateY(-360deg);
	-webkit-transform: rotateY(-360deg);
	-ms-transform: rotateY(-360deg);
	transform: rotateY(-360deg);
	opacity: 0;
}

#main-menu-toggle {
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	
	-moz-transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
	
	-moz-transition-delay: 1s;
	-webkit-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
	
	-moz-opacity: 1;
	opacity: 1;
}

#main-menu-toggle > img {
	display: block;
	height: 32px;
	/*  */ height:32px; /*  */
	/*  */
	/*  */
	
	width:auto;
}

@media all and (max-width:767px) {
	#main-menu-toggle {
		left: 14px;
		top: 14px;
	}
	/*  */
	#main {
		/*  */ padding-top:52px; /*  */
		/*  */
		/*  */
	}
	/*  */
	/*  */
}

body.menu-closed {}

body.menu-opened #container-wrap {
	-moz-transform: translate(280px, 0);
	-webkit-transform: translate(280px, 0);
	-ms-transform: translate(280px, 0);
	transform: translate(280px, 0);
}

body.menu-opened #nav {
	display:none;
}

#container-wrap {
	-webkit-transition: -webkit-transform .2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
	-moz-transition: -moz-transform .2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
	-ms-transition: -ms-transform .2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
	transition: transform .2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

/* #all, #menu-wrap, #container-wrap, #main { min-height:100vh; } /* vh buggy in ios */

#cover {
	position: relative;
	/* height: 100vh; /* vh buggy on iOS */
	background-size: cover;
	
	/*  */
	
	background-position: center center;
	background-repeat: no-repeat;
	
	color: white;
	border-color: white;
	border-color: rgba(255,255,255,0.5);
}

#cover-picker-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	
}

#cover-photo { display:none; } /* for ogp etc */
.ua-msie-8 #cover-photo { display:block; width:100%; height:auto; }
#cover-photo-trans { -moz-opacity:0; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; }

#cover-mask {
	position: absolute;
	top:0; left:0;
	width:100%; height:100%;
	background: url(/static/img/mask-black-gradient-320px.png) transparent bottom left repeat-x;
	-moz-opacity:0.8;
	opacity:0.8;
	z-index:1;
	/*  */
}


#cover-picker { z-index:3; }

#cover-picker, #main > * {
	position: relative;
	margin: 0 auto;
	max-width: 640px;
}

#main > #footer-wrap { max-width:none; }

#freearea-1 > p, #freearea-2 > p { margin:0; }

#cover-down {
	display:block;
	padding :15px 0 0 0;
	font-size: 32px;
}

@media (max-width:767px) {
	#cover-down { padding:10px 0 0 0; font-size:24px; }
}

/*  */

#menu > li > * {
	display:block;
	padding: 15px;
}

#menu > li > a:hover,
#menu > li.active > a {
	background: #222;
	color: white;
}

#menu > li.usermenu > a {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#menu > li.usermenu > a > .menu-icon { position:relative; vertical-align:middle; color:inherit; }
#menu > li.usermenu > a > .menu-icon { color:inherit; -moz-opacity:0.5; opacity:0.5; } 
#menu > li.usermenu > a:hover > .menu-icon,
#menu > li.usermenu.active > a > .menu-icon { -moz-opacity:1; opacity:1; }

#no-posts-for-admin, #no-posts {
	text-align:center;
	padding: 100px 20px;
	font-style: bold;
	-moz-opacity:0.7;
	opacity:0.7;
}

#no-posts {
	font-size: 24px;
	line-height: 24px;
}

input[type="text"], input[type="password"], input[type="url"], input[type="email"],
textarea {
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 4px 8px;
}

input[type=submit], input[type=button], button, a.btn {
	background: transparent;
	color: inherit;
	border-radius: 1em;
	padding: 0.5em 1em;
}


/*  */

#contactform { padding-bottom:8em; }
#contactform form > div {}
#contactform form > div > * { vertical-align:top; }
#contactform form > div > label { width:120px; display:inline-block; }

#contactform form > div > input,
#contactform form > div > textarea { width:400px; }

#contactform form > div > textarea { height:15em; }
#contactform form > div > input[type=submit] { width:auto; margin-top:1em; }
#contactform form > div > ul.errorlist { margin-left:120px; }
#contactform form > input[type=submit] { margin-left:120px; width:auto; margin-top:1em; }

@media screen and (max-width:767px) {
	#contactform form > div > label,
	#contactform form > div > input,
	#contactform form > div > textarea,
	#contactform form > div > ul.errorlist { width:100%; }
	
	#contactform form > div > ul.errorlist,
	#contactform form > input[type=submit] { margin-left:0; }
	
	#contactform form > div + div { margin-top:1em; }
}

#rvladm-login {
	position:absolute;
	top:15px;
	right:15px; left:auto;
	color:white;
	/*  */
	
}
#rvladm-login > a {
	color:inherit;
	background:black;
	background:rgba(0,0,0,0.5);
	
	-moz-border-radius:12px;
	border-radius:12px;
	
	display: block;
	padding:0 6px 1px 4px;
	
	height:24px;
}
#rvladm-login > a > * {
	vertical-align:middle;
	display:inline-block;
	font-size:11px;
	line-height:1em;
}

#cover-last-build {
	position:absolute;
	right:15px;
	top:15px;
	white-space:no-wrap;
	background:black;
	background:rgba(0,0,0,0.5);
	color:white;
	padding:0 0.5em;
	
	height:12px;
	
	-moz-border-radius:0.6em;
	border-radius:0.6em;
}
#cover-last-build > a{
	color:inherit;
}

#cover-authorized {
	position:absolute;
	left:25px;
	bottom:25px;
}

@media (max-width:767px) {
	#cover-authorized {
		left:14px;
		bottom:14px;
	}
}

/*  */

.post-author { margin-top:5px; }
.post-author-image { width:28px; height:28px; -moz-border-radius:14px; border-radius:14px; vertical-align:middle; }
.post-author-name { margin-left:0.4em; display:inline-block; vertical-align:middle; }

#cover-author { margin-top:15px; }


/* color-scheme */

body, #container-wrap {
	background:white;
	color:#222;
	color:rgba(0,0,0,0.8);
}

body { border-color:#ccc; border-color:rgba(0,0,0,0.2); }
* { border-color:inherit; }

input:focus, textarea:focus, select:focus,
input[type="submit"]:focus,input[type="button"]:focus,input[type="reset"]:focus,
button:focus, a.btn:focus,
input[type="submit"]:hover,input[type="button"]:hover,input[type="reset"]:hover,
button:hover, a.btn:hover {
	border-color:#888; border-color:rgba(0,0,0,0.5);
}

input[type="submit"]:active,input[type="button"]:active,input[type="reset"]:active,
button:active, a.btn:active {
	background-color: #eee;
	background-color: rgba(0,0,0,0.1);
}

#main-menu-toggle {
	color: white;
	background:#888;
	background: rgba(0,0,0,0.5);
}

ul.menu.horizontal { color:#888; color:rgba(0,0,0,0.5); }
ul.menu.horizontal > li.active, ul.horizontal > li:hover { border-color:#888; border-color:rgba(0,0,0,0.5); color:black; }

#scroll-top {
	color:white;
	background: black;
	background: rgba(0,0,0,0.4);
}

/*  */

/*  */

/*  */

/*  */

/*  dark */
	
	body, #container-wrap {
		background:black;
		color:#ccc;
		color:rgba(255,255,255,0.8);
	}
	
	* { border-color:#666; border-color:rgba(255,255,255,0.4); }
	
	input:focus, textarea:focus, select:focus,
	input[type="submit"]:focus,input[type="button"]:focus,input[type="reset"]:focus,
	button:focus, a.btn:focus,
	input[type="submit"]:hover,input[type="button"]:hover,input[type="reset"]:hover,
	button:hover, a.btn:hover {
		border-color:#888; border-color:rgba(255,255,255,0.5);
	}
	
	input[type="submit"]:active,input[type="button"]:active,input[type="reset"]:active,
	button:active, a.btn:active {
		background-color: #eee;
		background-color: rgba(255,255,255,0.3);
	}
	
	#main-menu-toggle {
		color: black;
		background:#888;
		background: rgba(255,255,255,0.5);
	}
	
	ul.menu.horizontal { color:#aaa; color:rgba(255,255,255,0.8); }
	ul.menu.horizontal > li.active, ul.horizontal > li:hover { border-color:#888; border-color:rgba(255,255,255,0.8); color:white; }
	
	#scroll-top {
		color:white;
		background: black;
		background: rgba(0,0,0,0.5);
	}
	
	.post-title { /* color: white; */ }
	
/*  */


/*  */

/*  */


/*  */

/*  */

/*  */

/*  */

/*  */

/*  */




/*  */
/*  */


.post-body-ad { text-align:center; margin:40px auto; }
.post-body .ifr-ad { display:inline-block; }
@media (max-width:320px) {
	.post-body-ad { margin-left:-15px; margin-right:-15px; }
	.post-body-ad > iframe {
		display:block;
		margin:0 auto;
	}
}

/** #1946 workaround **/
/*  */