@charset "utf-8";


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


/* HTML5 display definitions（定義） */
article,
aside,
figcaption,
figure,
footer,
header,
nav,
section,
summary {
  display: block;
}

body	{
	margin: 0;
	font-size: 100%;
	line-height: 1.7;
	color: #333;

}	


/*   強調   */
strong, em, b	{
	font-style: normal;
	font-weight: bold;
}
strong { font-size: 130%;}
em { font-size: 110%;}
mark	{
	display: inline-block;
	color: black;
	font-weight: bold;
	background-color: #dada7b;
}

q	{
	font-style: italic;
	text-decoration: underline;}/*文中の引用部分*/

blockquote {
	margin: 0 .5em 2em .5em;
	padding: 1em;
	background-color: floralwhite;
	border: 1px solid darkgray;
	border-radius: 20px;
}


pre {
  font-family: monospace;
  font-size: 1em;
  overflow: auto;
}

a	{
	color: royalblue;
	text-decoration: none;
	background: transparent;
}

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

table, td, th { 
 border: solid 1px #333;
 border-collapse: collapse;
 border-spacing: 0;
 padding: 10px;
}

th { background-color: gainsboro;}

/* ブロック下 2em 画像のみ3em */
figure { margin: 0 0 3em 0;}

img { width: 100%;}

figcaption img {
	display: none;
	}/* figcaption文中の画像データによる改行を防ぐ */


p, ul, ol, dl, table, .note {
	margin-bottom: 2em;
	word-wrap: break-word;/* 長い単語でも折り返す */
}

ul { list-style-type: square;}
li {
	word-wrap: break-word;
	margin-bottom: 1.5em;
}


dt	{
	font-size: 110%;
	margin-bottom: 0.5em;
	font-weight: bold;
}
dd{	margin-bottom: 1.5em;}








#page	{
	background-color: white;
}

#siteHeader { background-color: #4c4c4c;}

#siteHeader h1	{
	margin: 0;
	padding: 3px 5px;
	font-size: 100%;
	color: gold;
}

#siteHeader h1 a	{
	color: gold;
}

#siteHeader h1 a:hover	{
	color: white;
	text-decoration: underline;
}

#contents,
#siteFooter { 
	width: 95%;
	margin: 2em auto;
	background-color: inherit;
}

#contentsHeader h1	{
	margin: 0;
	padding: 0;
	font-size: 130%;
	line-height: 1.375;
	color: #804000;
	border-bottom: solid 1px darkgray;
}

#contentsHeader p	{
	margin: 0.2em 0 2em 0;
	padding: 0;	
	font-size: 80%;
	line-height: 1.5;
	letter-spacing: 0.3em; 
	text-align: right;
	color: darkgray;
}

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


h2	{
	margin-bottom: 1.5em;
	padding: 0 1em;
	line-height: 2;
	font-size: 120%;
	color: maroon;
	background-color: white;
	border-top: solid 1px #4c4c4c;
	border-bottom: solid 1px #4c4c4c;
	border-left: solid 1em #4c4c4c;
	border-right: solid 1px #4c4c4c;
	box-shadow: 1px 1px 1px lightgray;
}

h3	{
	margin-bottom: 1em;
	padding: 0 0.5em;
	line-height: 1.5;
	font-size: 120%;
	color: maroon;
	background-color: white;
	border-left: solid 1em gold;
	border-bottom: solid 1px gold;
	box-shadow: 1px 1px 6px lightgray;
}

/* 注意書きの囲み */
.notice	{
	background-color: #fdffdf;
	font-size: 100%;
	margin-bottom: 2em;
	padding: 0.5em;
	border: 2px solid black;	
}

#mainBody .notice p {
	margin: 0;
	text-indent: 0;
}

/* 補足説明の囲み */
.note {
	border: 1px solid lightgray;
	padding: .5em;
	font-size: 80%;
}
.note p {
	margin-bottom: .5em;
}


/* 最下段の広告の隙間をなくす */
#siteFooter p	{
	margin: 0;
}



/* 広告ラベル */

.ad-label {
	display: block;
	margin: 0 auto;
	letter-spacing: 1em;
	color: silver;
	font-size: 80%;
	text-align: center;
}


@media screen and (min-width: 768px) {
	/* 	 768 -   */
#page	{
		width: 768px;
		margin: 0 auto;
}

#contents { 
	width: 600px;
	margin: 2em auto;
}

/* AdSense in here */
#siteFooter { 
	margin: 0 auto;
}

blockquote	{
	margin: 0 1em 2em 1em;
}
}

@media screen and (min-width: 770px) {
	/* 	 770 -   */
body	{
	background-color: whitesmoke;
}	
#page	{
	border-left: solid 1px #4c4c4c;
	border-right: solid 1px #4c4c4c;
	border-bottom: solid 1px #4c4c4c;
}
}

@media screen and (min-width: 800px) {
	/* 	 800px - 		 */
body	{
	background-color: gainsboro;
}
}

@media screen and (min-width: 1024px) {
	/* 	 1024px - 		 */
body	{
	background-color: slategray;
}
}

@media screen and (min-width: 1280px) {
	/* 	 1280px - 		 */
body	{
	background-color: antiquewhite;
}
}