/*
taken20190412.css

for directory-group
2019.4.12

左サイドバーに関連記事を並べてグループ記事にするレイアウト
*/

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, footer, header, nav, section {
	display: block;
}

body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.8;
	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;
}
blockquote p: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 {
	font-size: 90%;
}

table, td, th {
	border: solid 1px silver;
	border-collapse: collapse;
	border-spacing: 0;
	padding: .5em;
	background: white;
}
th {
	background: #ededed;
}
td {
	text-align: right;
}

table ul {
	padding: 0;
	padding-left: .5em;
}
/* tableの中のリストの位置調整 */

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,
article ul,
article ol,
article dl,
table {
	margin: 2em .8em;
}/* header, p, ul, pl, dl, table の上下横マージンを揃える　p との差は視覚的によいバランス */

article p,
#sns-button p {
	text-indent: 1em;
	margin: 0 .5em 2em .5em;
}/* p のみ両端 .5em */


	.page-top {
		display: none;
	}/* スマートフォンでは「先頭に戻る」を表示しない */


article li {margin-bottom: 1em;}

.picture-caption {
	text-indent: 0;
	margin: 0 .5em;
	color: gray;
}

article picture {
	text-align: center;
		margin-bottom: 2em;
}

.picture-copyright {
		text-align: center;
	text-indent: 0;
	font-size: 90%;	
	margin: 0;
	color: gray;
}

img {
	width: 100%;
}

table img,
article p img,
article li img,
#relation-articles li img,
article dt img {
	display: inline;/* webビーコン画像による改行をなくす */
	width: 1px;
	padding: 0;
	margin: 0;
}/* 広告webビーコン画像を1px表示にする */


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,
#relation-articles 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-ads {
	text-align: center;
	width: 320px;/* バナーの横幅 320 px */
	margin: 3em auto;/* バナーの上下マージン */
}


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

#relation-articles li:last-child {
	border-bottom: none;
}/* リスト最後の（出現理由不明の）空白スペースを消す */


#relation-articles li a {
	display: block;
	padding: 1.5em .3em;
}

#relation-articles li a:hover {
	background-color: honeydew;
}


.current {
	display: none;
}/* relation-articles で閲覧中の記事をスマートフォンでは隠す*/

#relation-articles li.ads-text a {
	padding: 0 0 1.5em 0;	
	border-bottom: 1px dotted silver;
}

#relation-articles li.ads-text a:hover {
	color: deeppink;
}

#relation-articles li.ads-text a:visited {
	color: #0066c0;
}/* 訪問済み広告をリンク済みカラーにしない */


.ads-text:before {
content: "広告";
font-weight: bold;
color: white;
background-color: #0066c0;
padding: 2px;
border-radius: 2px;
}

.ads-limited:before {
content: "期間限定セール";
font-weight: bold;
color: white;
background-color: #0066c0;
padding: 2px;
border-radius: 2px;
}


footer {
	margin: 0;
	padding: 2em 0;
	background: white;
	text-align: center;
}
footer p {
	text-indent: 0;
	margin: 0 auto;
	padding: 0;
}

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



@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;} 
	



	header h1 {font-size: 160%;}

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


	blockquote {
		margin: 0 2em 2em 2em;
		padding: 1em;
		background-color: #ededed;
		border-left: 5px solid gray;
	}
	
.picture-caption {
	margin: 0;
	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;
	}
		
	
	
	
}


@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;		
		border-bottom: 1px solid lightgray;
	}
	#mainBody {
		float: right;
		width: 640px;
	}
	article,
	#sns-button {
		width: 600px;
		margin: 0 auto;
	}
	
	.page-top {
		display: block;
		text-align: center;
		margin: 2em auto 0;
	}
	.page-top a:visited {
	color: #0066c0;		
	}
	#sideBar {
		float: left;
		width: 340px;
		font-size: 90%;
		
	}
	#sideBar-inner {
		width: 320px;/* 300px; */
		margin: 0 auto;
		
	}
	
	#sideBar-inner h2 {
	margin: 0 0 0 1em;

		font-size: 120%;
		font-weight: 600;
		text-shadow: 1px 1px 1px #f2f2f2;
		color: #4c4c4c;
		
		background-color: transparent;
		padding-left: 0;
		border-left: none;
		
	border-bottom: 1px solid silver;
	
	}/* 「関連記事」見出し */


#relation-articles ul {
		padding: 0 0 0 1em;	
}


	#relation-articles li {
	list-style-type: none;
}

.current {
	display: block;
	padding: 1.5em 0;	
	color: gray;
	font-weight: bold;
}/* relation-articlesで「閲覧中の記事」をPCでは表示する */
.current:before {
content: "閲覧中の記事";
font-weight: bold;
color: white;
background-color: #0066c0;
padding: 2px;
margin-right: 3px;
border-radius: 2px;
}




	
	#contents:after {
		content: "";
		clear: both;
		display: block;
	}
	
footer {
	background: whitesmoke;
}	
	
}

@media screen and (min-width: 1280px) {
	body {background-color: antiquewhite;}
	
	#contents {
		background-color: antiquewhite;
		width: 1160px;
		border: none;
	}
	
	#mainBody {
		width: 760px;
		background: white;
	}
	
	#sideBar-inner h2 {
	margin: 0;
}


#relation-articles ul {
	margin: 0 0 3em 0;
	padding: 0;
}


#relation-articles li a:hover {
	background-color: white;
}


footer {
	background: antiquewhite;
}	


}

@media screen and (min-width: 1440px) {
	body,
	#contents {
		background-color: #d2d0e1;
	}/* 紫薄いブルー　MBPフルスクリーン */

	
		#sideBar {
		float: left;
		width: 360px;
		font-size: 90%;
	}
	#sideBar-inner {
		width: 320px;/* 300px; */
		margin: 0 auto;
	}


	footer {
	background: #d2d0e1;
}	

}
@media screen and (min-width: 1920px) {
	body,
	#contents {
		background-color: #e5e8d3;
	}/* 薄黄色 */
	footer {
	background: #e5e8d3;
}	

}
@media screen and (min-width: 2560px) {
	body,
	#contents {
		background-color: #cdf1e5;
	}/* 薄エメラルドグリーン */
	footer {
	background: #cdf1e5;
}	

}