<!--Tsuda Style -->
body  {}

#flexbox{
    display: box;
    box-orient: horizontal;
}

#main  {
    width: 80%; /* 810px; */
    float: right;
    background-color: white;
    }


#footer {
    clear: both;
}

h1	{text-align: center; font-size:200%;
	padding: 0.3em; color: white;
	background-color:mediumslateblue}
h2	{text-indent: 1em;	color: white;
	background-color:#9F81F7}
h3	{text-indent: 1em; color: white;padding: 3pt;
	background-color:#BCA9F5}
h4	{text-indent: 1em; color: white;padding: 3pt;
	background-color:#D8CEF6}
h5	{text-indent: 1em; color: white; padding: 3pt;
	background-color: mediumorchid;
	border-left:hotpink 10px solid;}

.alignclear   {  clear:both;}
.indent	{ text-indent: 1em;}
.bold	{font-weight: bold;}
img.right {float: right; padding: 10pt 10pt 10pt 10pt;}
img.left  {float: left; padding: 10pt 10pt 10pt 10pt;}

pre.s	{margin: 5pt 10pt 5pt 0pt; padding: 0pt 10pt 5pt 10pt; border: thin gray solid; background-color:lavender}
pre.c	{margin: 5pt 10pt 5pt 0pt; padding: 0pt 10pt 5pt 10pt; border: thin gray solid; background-color:paleturquoise}
pre.e	{margin: 5pt 10pt 5pt 0pt; padding: 0pt 10pt 5pt 10pt; border: thin gray solid; background-color:gainsboro}
pre.f	{margin: 5pt 10pt 5pt 0pt; padding: 0pt 10pt 5pt 10pt; border: thin gray solid; background-color:gainsboro}

div.fbox	{margin-left:auto; float: right; width: 30%;
	border: 3px lightblue solid; padding: 10pt; background-color: lavender}

div.box	{padding: 0px; margin-bottom: 5px;
	border: 3px lightgreen solid; background-color: lavender}

div.widebox	{border: 3px lightblue solid; padding: 10pt; background-color: lavender}

div.ex	{margin: 5pt 5pt 20pt 10pt; border: 3px lightgreen solid; padding: 10pt; background-color: white}
/*
div	{border: 3px lightgreen solid; padding: 10pt; background-color: honeydew}
*/
/* image
p.left {text-align: left;}
p.right text-align: right;
img.base { vertical-align: baseline; }
img.top { vertical-align: top; }
img.middle { vertical-align: middle; }
img.bottom { vertical-align: bottom; }
 */
/* table */
table.tb { border:1px solid #ccc; border-spacing:0; border-collapse:collapse; width:100%; }
    .tb th { text-align:left;;border:1px solid #ccc; background-color:#eee; }
    .tb td { text-align:left;;border:1px solid #ccc; }
    .tb caption { font-weight:bold; }
    .tb .tbcl { text-align:left; }
    .tb .tbcc { text-align:center; }
    .tb .tbcr { text-align:right; }


/*
@charset "UTF-8";
*/
/*
HTML5の新要素をブロックレベル要素として宣言しておく。各ブラウザがHTML5に完全に対応するまで。
使わなければいいが使うかもしれないので。
*/
article, aside, dialog, figure, footer, header, legend, nav, section { display:block; }

/*
HTML5で削除された、あるいは変更されたタグを再定義。いまのところ多くのブラウザは已然対応はしているが。
うっかり使ったり気付かず残ってしまったときのばかよけ。fontタグはだめ！しょうがないので書き直し。
*/
center    { display:block; margin:auto; text-align:center; }
it         { font-style:italic; }
strike { text-decoration:line-through; }
u         { text-decoration:underline; }
tt        { font-family:monospace; }

/*
よく使う文字色と背景色(HTML標準16色)、書体、サイズなどの指定をclassとして定義。
<tag class="red bg-silver large bold">などと列挙して使用。
*/
/* 文字色 */
.black    { color:black; }
.gray     { color:gray; }
.silver   { color:silver; }
.white    { color:white; }
.aqua     { color:aqua; }
.blue     { color:blue; }
.fuchsia  { color:fuchsia; }
.green    { color:green; }
.lime     { color:lime; }
.maroon   { color:maroon; }
.navy     { color:navy; }
.olive    { color:olive; }
.pink     { color:pink; }
.purple   { color:purple; }
.red      { color:red; }
.teal     { color:teal; }
.yellow   { color:yellow; }

/* 背景色 */
.bg-black   { background-color:black; }
.bg-gray    { background-color:gray; }
.bg-silver  { background-color:silver; }
.bg-white   { background-color:white; }
.bg-aqua    { background-color:aqua; }
.bg-blue    { background-color:blue; }
.bg-fuchsia { background-color:fuchsia; }
.bg-green   { background-color:green; }
.bg-lime    { background-color:lime; }
.bg-maroon  { background-color:maroon; }
.bg-navy    { background-color:navy; }
.bg-olive   { background-color:olive; }
.bg-purple  { background-color:purple; }
.bg-red     { background-color:red; }
.bg-teal    { background-color:teal; }
.bg-yellow  { background-color:yellow; }

/* 文字の大きさ */
.xx-large { font-size:xx-large; }
.x-large  { font-size:x-large; }
.large    { font-size:large; }
.medium   { font-size:medium; }
.small    { font-size:small; }
.x-small  { font-size:x-small; }
.xx-small { font-size:xx-small; }
.larger   { font-size:larger; }
.smaller  { font-size:smaller; }

/* 書体等 */
.normal     { font-weight:normal; font-style:normal; text-decoration:none; }
.bold       { font-weight:bold; }
.italic     { font-style:italic; }
.monospace  { font-family:monospace; }
.underline  { text-decoration:underline; }
.strike     { text-decoration:line-through; }
.nowrap     { white-space:nowrap; }

/* 配置、レイアウト関係 */
.block    { display:block; } /* 変則的に変える場合。なるべく使わない。 */
.inline   { display:inline; } /* 変則的に変える場合。なるべく使わない。 */
.inline-block { display:inline-block; } /* 変則的に変える場合。なるべく使わない。 */
.block-left   { margin-left:0; margin-right:auto; }
.block-center { margin:auto; }
.block-right  { margin-left:auto; margin-right:0; }
.text-left    { text-align:left; }
.text-center  { text-align:center; }
.text-right   { text-align:right; }
.text-top     { vertical-align:top; }
.text-middle  { vertical-align:middle; }
.text-bottom  { vertical-align:bottom; }
.text-super   { vertical-align:super; font-size:smaller; }
.text-sub     { vertical-align:sub; font-size:smaller; }
.left   { margin-left:0; margin-right:auto; text-align:left; }
.center { margin:auto; text-align:center; }
.right  { margin-left:auto; margin-right:0; text-align:right; }
.top    { vertical-align:top; }
.middle { vertical-align:middle; }
.bottom { vertical-align:bottom; }
.hidden { visibility:hidden; } /* 表示しないだけで領域は確保。レイアウト調整用。*/

/* よく使いそうな指定 */
.note, .notes { color:maroon; font-size:smaller; }
.link    { color:#440066; text-decoration:underline; cursor:pointer; }
.link:hover, .link:focus { color:#FF3366; }
.padding { padding:4px; }
.border  { border:2px outset gray; }
.margin  { margin:4px; }

/*
その他このサイトにディフォルトで適用される設定。
*/
div,pre { margin:0; border:0; padding:0; }
table,caption,tbody,thead,tfoot,th,tr,td { padding:0; border:0; margin:0; border-collapse:collapse; border-spacing:0; }
caption  { color:blue; font-weight:bold; }
th  { color:navy; }
table.border td { padding:1px 2px; border:1px inset gray; }
hr  { display:block; width:100%; height:1px; padding:0; border:solid 1px gray; margin:2px 0px; background-color:silver; }
a:hover, a:focus { color:#FF3366; }
del { text-decoration:line-through; }
em  { font-weight:bold; font-style:normal; }
img { border:0; }
input { border-color:#EEEEEE; }