html {
font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "MS Gothic", "ＭＳ ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;

	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

article, aside, picture, figure, figcaption, footer, header, nav, section, summary {
	display: block;
}

body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.7;
	color: #333;
	background: white;
	word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {color: #4c4c4c;}

strong, em, b {
	font-style: normal;
	font-weight: bold;
}
strong {font-size: 130%;}
em {font-size: 110%;}
dt {
	font-size: 120%;
	font-weight: bold;
}
dd {margin-bottom: 1em;}
q {font-style: italic;}
blockquote {
	margin: 0 1.5em 2em 1.5em;
	padding: 1em .5em;
	background-color: #ededed;
	border-left: 5px double lightgray;
}

#img-border-none img {border: none;}

.note {
	padding: 1em .5em;
	border: 1px solid lightgray;
	border-radius: 3px;
	font-size: 90%;
}

blockquote p:last-child,
div.note p:last-child,
div.note ul,
div.note ol,
div.note dl,
div.note li:last-child,
div.note dd:last-child {
		margin-bottom: 0;
}

mark {
	font-size: 110%;
	background-color: #ffffb0;
	font-weight: bold;
	padding: .1em 0;
}
a {
	color: #0066c0;
	text-decoration: none;
	background: transparent;
	font-weight: bold;
}

a:visited {color: #660099;}



a:hover {
	color: deeppink;
	text-decoration: underline;
}



table, td, th {
	border: solid 1px silver;
	border-collapse: collapse;
	border-spacing: 0;
	padding: 10px;
	background: white;
}
th {
	background: #ededed;
}

nav p {
	margin: 0;
	padding: 0;
	font-size: 100%;
	text-indent: .5em;
	color: gold;
}
nav p a,
nav p a:visited {
	display: block;
	color: gold;
	background-color: #4c4c4c;
}
nav p a:hover {
	color: white;
	text-decoration: underline;
	background-color: #2e2e2e;
}

header,
.note,
article ul,
article ol,
article dl,
table {
	margin: 2em .8em;
}

.sideBar-ads .note {margin-top: 0;}

article p {margin: 0 .5em 2em .5em;}
#sns-button p {margin: 0 .5em 2em .5em;}
#sideBar p {margin: 0 .5em 1em .5em;}
figcaption {margin: 0 .5em;}


article li {margin-bottom: 1em;}

article p,
figcaption,
#sideBar p {
	text-indent: 1em;
}



figure,
picture {margin: 0 0 2em 0;}

.picture-caption {margin-bottom: 0;}

img {
	width: 100%;
	border-top: 1px solid lightgray;
	border-bottom: 1px solid lightgray;
}


header h1 {
	margin: 0;
	font-size: 130%;
	line-height: 1.5;
	border-bottom: solid 1px darkgray;
}
article header p {
	margin: .3em 0 0 0;
	font-size: 80%;
	line-height: 1.5;
	letter-spacing: 0.3em;
	text-align: right;
	color: darkgray;
}


article h2 {
	margin: 2em .5em 1em .5em;

	padding-left: .8em;
	line-height: 1.5;
	font-size: 150%;
	text-shadow: 1px 1px 1px #f2f2f2;
	border-left: solid .5em gold;	
}


article h3 {margin: 0 .5em; font-size: 110%;}
article h4 {margin: 0 .5em; font-size: 100%;}


#sideBar-inner h2 {
	margin: 0 0 1em 0;

	font-size: 100%;
	font-weight: 500;
	padding-left: 1em;
	background-color: lightgray;
	border-bottom: 1px solid silver;
}

#sideBar-inner .sideBar-ads h3 {
	margin: 3em .5em .5em .5em;
}


.sideBar-ads .banner {
	text-align: center;
}

.sideBar-ads .banner iframe {
	text-align: center;
}

.sideBar-ads ul,
.sideBar-ads dl {
	margin: 0;
	padding: 1em;
}


.sideBar-ads,
.sideBar-ads-300,
.sideBar-ads-1024 {margin: 2em auto;}


.sideBar-ads-300 {width: 300px;}

.sideBar-ads-1024 {display: none;}

#sideBar-inner .ad-label,
footer .ad-label {
	margin-bottom: 0;
	letter-spacing: 1em;
	color: #4c4c4c;
	font-size: 90%;
	text-align: center;
}

#relation-articles ul {
	margin: 0 0 3em 1em;
	padding: 0 1em;
}
#relation-articles li {
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	list-style-type: disc;
	border-bottom: 1px dotted silver;
}

footer {
	margin: 0;
	background: white;
	padding: 1em .5em 3em .5em;
	text-align: center;
}
footer p {
	margin: 0 auto;
	padding: 0;
}


.web-beacon img,
figcaption img,
h3 img, 
h4 img {width: 1px;}

.vc img {border: none;}/* vc-adsのwebビーコン対策 */
.vc a:hover {opacity: .9;}
.vc .note {padding-top: 0;}

@media screen and (min-width: 600px) {
	body {
		background: white;
		font-size: 110%;
	}
	#mainBody, #sideBar {
		width: 600px;
		margin: 0 auto;
	}
	
	
	nav p {
		font-size: 120%;
		font-weight: bold;
	}
	header {margin:3em 0px;}
	
	article p,
	#sns-button p {margin: 0 0 2em 0;} 
#sideBar p {margin: 0 0 1em 0;}
figcaption {margin: 0;}

	header h1 {font-size: 160%;}

	article h2 {margin: 2em 0 1em 0;}
	article h3,
	article h4 {margin: 0;}

	article img {border: 1px solid gainsboro;}

	blockquote {
		margin: 0 2em 2em 2em;
		padding: 1em;
		background-color: #ededed;
		border-left: 5px solid gray;
	}
	article .note {
		margin: 0 2em 2em 2em;
		padding: 1em;
		border: 1px solid lightgray;
		border-radius: 3px;
		font-size: 90%;
	}
	
	#sideBar-inner h2 {

	margin: 2em 0;
		font-size: 120%;
		font-weight: 600;
		text-shadow: 1px 1px 1px #f2f2f2;
		color: #4c4c4c;
		background-color: whitesmoke;
		padding-left: .8em;
		border-left: solid .5em gold;
		border-bottom: none;
	}
		
	.sideBar-ads h3 {margin: 1em .5em;}
}


@media screen and (min-width: 1024px) {
	body {
		background: whitesmoke;
		font-size: 100%;
	}
	#contents {
		background: white;
		width: 1024px;
		margin: 0 auto;
		border-left: 1px solid lightgray;
		border-right: 1px solid lightgray;
	}
	#mainBody {
		float: left;
		width: 640px;
	}
	article,
	#sns-button {
		width: 600px;
		margin: 0 auto;
	}
	
	#sideBar {
		float: right;
		width: 340px;
		font-size: 90%;
	}
	#sideBar-inner {
		padding-top: 1em;
		width: 300px;
		margin: 0 auto;
	}
	#sideBar-inner h2 {margin: 2em 0;}
	
	
	.sideBar-ads-1024 {
		display: block;
		margin: 2em 0;
	}
	
	#contents:after {
		content: "";
		clear: both;
		display: block;
	}
}

@media screen and (min-width: 1280px) {
	body {background-color: antiquewhite;}
	
	#contents {
		background-color: antiquewhite;
		width: 1160px;
		border: none;
	}
	#mainBody {
		float: left;
		width: 760px;
		background: white;
		border-left: 1px solid gainsboro;
		border-right: 1px solid gainsboro;
	}
	article {
		width: 600px;
		margin: 0 auto;
	}

	#sideBar {
		float: right;
		width: 340px;
		font-size: 90%;
		background: white;
		border-left: 1px solid gainsboro;
		border-right: 1px solid gainsboro;
		border-bottom: 1px solid gainsboro;
	}
	#sideBar-inner {
		width: 300px;
		margin: 0 auto;
	}
}
@media screen and (min-width: 1440px) {
	body,
	#contents {
		background-color: #d2d0e1;
	}
}
@media screen and (min-width: 1920px) {
	body,
	#contents {
		background-color: #e5e8d3;
	}
}
@media screen and (min-width: 2560px) {
	body,
	#contents {
		background-color: #cdf1e5;
	}
}