body { 
 	background-color: #ffffcc; /* Web=ffffcc */
	color:            #000000;

	background-image: url("img/sun_yellow.gif");
	/* background-image: url("img/sun_orange.gif"); */
	background-repeat: no-repeat;
	background-position: left top;

	font-family:      "メイリオ", "ＭＳ ゴシック", "ＭＳ 明朝";

	margin: 0 ;	     /* スペース */
	padding: 0 ;         /* 余白 */
	font-size: 12px ;    /* 文字サイズ */
	line-height: 1.218 ; /* 行の高さ */
}
td,th {
	font-family:      "メイリオ", "ＭＳ ゴシック", "ＭＳ 明朝";
	font-size: 12px ;
	line-height: 1.218 ; /* 行の高さ */
	border-color: #ffffff ;
}
img {
	border:	0;
	max-width: 100%;
	height: auto;
	align-items: flex-start;
}
.string1 {
	color:           red;
        font-weight:     bold
}
.box { 
	height:300px; 
	overflow: scroll;
}
a:link {
	color:	blue;
	text-decoration: none;
}
a:visited {
	color: purple;
	text-decoration: none;
}
a:hover {
	color:            #FF0000;
	background-color: #FFE080;
	text-decoration:  underline;
}
input,select,textarea {  
	font-size:   15px; 
	border:      1px black solid;
}
h1 {
	font-size: 	32px; 
	font-weight: 	none;
	color: 		brown;
}
h2 {
	font-size: 	24px; 
	font-weight: 	none; 
	color: 		fuchsia; 
}
h3 {  
	font-size: 	16px; 
	font-weight: 	none; 
	color: 		green; 
}
hr {
	color: green;
  	background-color: green;
	/* filter:alpha(opacity=80,finishopacity=0,style=3); */
	height: 2px;
}


/*-------- index.html用 wrapper の幅が contents + nikki(左右の余白含む) + link と同じになるようにする -------*/
.wrapper {
	width:       1080px ; /* 1080 = 260(contents) + 540 + 10 + 10(nikki) + 260(link) */
	margin:      0 auto ; /* 左右に[auto]を指定することで、真ん中に寄る */
	padding:     0 ;      /* 上下左右の余白を0にしておく */
}
.contents {
/*	background:  lightgreen ;*/
        width:       260px ;
	line-height: 2 ;                /* 行の高さ */
	text-align:  right ;            /* テキスト、画像の右寄せ */
        float:       left ;             /* 左に寄せる */
	padding:     0px 0px 0px 0px ;	/* 余白の設定 上に0px 右に0px 下に0px 左に0px */
}
.nikki {
/*	background:  cyan ;*/
	width:       540px ;
	line-height: 2 ;                /* 行の高さ */
	text-align:  center ;		/* テキスト、画像の真ん中寄せ */
	float:       left ;		/* 左に寄せる */
	padding:     0px 10px 0px 10px ;/* 余白の設定 上に0px 右に10px 下に0px 左に10px */
}
.link {
/*	background:  lightgray ;*/
	width:       260px ;
	line-height: 2 ;                /* 行の高さ */
	text-align:  left ;             /* テキスト、画像の右寄せ */
	float:       right ;	        /* 右に寄せる */
	padding:     0px 0px 0px 0px ;  /* 余白の設定 上に0px 右に0px 下に0px 左に0px */
}
.footer {
/*	background:  #e8e8e8 ; */
	border-top:  2px solid #888 ;   /* 枠線 */
	text-align:  center ;           /* テキスト、画像の真ん中寄せ */
	margin-top:  2em ;              /* 他のブロックとのスペース */
	padding:     1em 0 ;            /* 上下の余白 */
	clear:       both ;             /* floatを解除する */
}

/*-------- yado.html用 wrapper の幅が contents + nikki(左右の余白含む) + link と同じになるようにする -------*/
.y_wrap {
	width:       822px ; /* 260 * 3 + 30(余白) + 12(枠線) */
	margin:      0 auto ; /* 左右に[auto]を指定することで、真ん中に寄る */
	padding:     0 ;      /* 上下左右の余白を0にしておく */
}
.y_l {
	background:  #FFCCCC ;
        width:       260px ;
	line-height: 2 ;                /* 行の高さ */
	text-align:  left ;             /* テキスト、画像の右寄せ */
        float:       left ;             /* 左に寄せる */
	padding:     0px 0px 0px 10px ;	/* 余白の設定 上に0px 右に0px 下に0px 左に10px */
	border:  2px solid #888 ;   /* 枠線 */
}
.y_c {
	background:  #FFFFCC ;
        width:       260px ;
	line-height: 2 ;                /* 行の高さ */
	text-align:  left ;             /* テキスト、画像の右寄せ */
        float:       left ;             /* 左に寄せる */
	padding:     0px 0px 0px 10px ;  /* 余白の設定 上に0px 右に0px 下に0px 左に10px */
	border:  2px solid #888 ;   /* 枠線 */
}
.y_r {
	background:  #CCFFFF ;
        width:       260px ;
	line-height: 2 ;                /* 行の高さ */
	text-align:  left ;             /* テキスト、画像の右寄せ */
        float:       right ;            /* 左に寄せる */
	padding:     0px 0px 0px 10px ;	/* 余白の設定 上に0px 右に0px 下に0px 左に10px */
	border:  2px solid #888 ;   /* 枠線 */
}
.y_footer {
/*	background:  #e8e8e8 ; */
/*	border-top:  2px solid #888 ; 枠線 */
	text-align:  center ;           /* テキスト、画像の真ん中寄せ */
	margin-top:  2em ;              /* 他のブロックとのスペース */
	padding:     1em 0 ;            /* 上下の余白 */
	clear:       both ;             /* floatを解除する */
}


/* for SmartPhone */
@media screen and (max-width: 680px) {
    img {
        float : none ;
        max-width: 100%;
        height: auto;
    }
    h1 {
        font-size : 12px ;
        margin : 1em 0 0.8em 0 ;
    }
    h2 {
        font-size : 12px ;
        margin : 1em 0 0.8em 0 ;
    }
    h3 {
        font-size : 12px ;
        margin : 1em 0 0.8em 0 ;
    }
    body {
        font-size : 10px ;	/* 文字サイズ */
    }
    td {
        font-size : 10px;
    }
    .box {
	height:100px;
	overflow: scroll;
    }
    .nsp {
	display: none ; /* 非表示にする */
    }

/* index.html */
    .wrapper {
	width: auto ;
	padding: 0 0 ; /* 左右の余白 */
    }
    .contents {
	text-align: left ;
	width: auto ;
	padding: 5px 5px ;	/* 上下に5px, 左右に5pxの余白 */
	line-height: 2 ;	/* 行の高さ */
	border: none ;		/* 枠線なし */
	float: none ;		/* floatを無効する */
    }
    .nikki {
	text-align: center ;
	width: auto ;
	padding: 0 0 ;		/* 上下に0px, 左右に0pxの余白 */
	line-height: 2 ;	/* 行の高さ */
	border: none ;		/* 枠線なし */
	width: auto ;
	float: none ;		/* floatを無効する */
    }
    .link {
	text-align: left ;
	width: auto ;
	padding: 5px 5px ;	/* 上下に5px, 左右に5pxの余白 */
	line-height: 2 ;	/* 行の高さ */
	border: none ;		/* 枠線なし */
	float: none ;		/* floatを無効する */
    }

/* yado.html */
    .y_wrap {
	width: auto ;
	padding: 0 0 ; /* 左右の余白 */
    }
    .y_l {
	text-align: left ;
	width: auto ;
	padding: 5px 5px ;	/* 上下に5px, 左右に5pxの余白 */
	line-height: 2 ;	/* 行の高さ */
	border: none ;		/* 枠線なし */
	float: none ;		/* floatを無効する */
    }
    .y_c {
	text-align: left ;
	width: auto ;
	padding: 5px 5px ;	/* 上下に0px, 左右に0pxの余白 */
	line-height: 2 ;	/* 行の高さ */
	border: none ;		/* 枠線なし */
	float: none ;		/* floatを無効する */
    }
    .y_r {
	text-align: left ;
	width: auto ;
	padding: 5px 5px ;	/* 上下に5px, 左右に5pxの余白 */
	line-height: 2 ;	/* 行の高さ */
	border: none ;		/* 枠線なし */
	float: none ;		/* floatを無効する */
    }
}