@charset 'UTF8';

body { margin: 0; color: #333; font-size: 12px; line-height: 20px; font-family: "メイリオ","MS ゴシック","ヒラギノ角ゴシック", sans-serif; background: white url('img/background.png');}
table { border-collapse: collapse;}
td { padding:0; vertical-align: top;}
div,p { padding: 0px; margin: 0px; position: relative;}
ul { padding:0px; margin:0px;}
img { border: 0px;}
a { display: inline; text-decoration: none;}

/*---上---*/
div#top { background: #67451a url('img/back5.png'); height: 10px;}
div#header { width: 850px; margin: 0 auto; height: 70px; position: relative;}
img#illust { position: absolute; right: 80px; top: 8px;}
div#addr { position: absolute; left: 540px; top: 20px; font-size: 15px; color: forestgreen;}
div#addr2 { position: absolute; left: 460px; top: 20px; font-size: 15px; color: forestgreen;}
div#outer { width: 842px; margin: 0 auto;}
div#credit { width: 790px; padding-top: 5px; margin: 0 auto; font-size: 11px; text-align: center;}



/*---左---*/
div#left { float: left; width: 220px; position: relative;}
p#left { background: brown url('img/back4.png'); height: 20px; border: grey 1px solid; padding: 5px 10px; color: white; margin-bottom: 9px;}
ul#left-side { list-style: none; margin-top: 75px;}
ul#left-side li { margin-bottom: 9px; border-width: 1px 1px 1px 1px ; border-style: solid; border-color: grey; position: relative; box-shadow: 2px 2px 4px #ccc;}
ul#left-side li img { position: absolute; left: 8px; top: 8px; width: 24px;}
ul#left-side li a { display: block; padding: 28px 12px 5px 42px; font-size: 13px; background: #FDF4C5; color: green;}
ul#left-side li a span { position: absolute; left: 42px; top: 8px; font-size: 15px; color: darkorange; font-weight: bold;}
ul#left-side li a:hover { background: gold; color: red; }

ul#left-area { list-style: square; margin: 10px 22px;}
ul#left-area li { color: red; font-size: 15px;}
ul#left-area li a { font-size: 14px; color: green;}
ul#left-area li a:hover { color: red; }

div#left-low { border: 1px solid grey; background: ivory; margin-bottom: 12px;}
div#left-low p { padding: 12px; color: #555;}

/*---右---*/
div#right-side { width: 612px; float: right;}
div#box1 { width: 610px; background: transoarent; border: 1px solid grey; box-shadow: 2px 2px 5px #ccc;  margin-bottom: 10px;}
div#box1 div.photo { width: 610px; height: 300px; }
div#box1 div.photo-p { width: 610px; height: 200px; }

div#box1 p.top { height: 20px; padding: 5px 10px; color: white; background: url('img/back2.png'); border-bottom: 1px solid grey;}
div#box1 p.bottom { height: 20px; padding: 5px 10px; color: white; background: url('img/back4.png');}

/*---右ニュース---*/
div#box2 { width: 610px; background: white; border: 1px solid grey; margin-bottom: 10px;}
p#title { background: url('img/back5.png');; padding: 3px 10px; color: brown; font-size: 15px; text-align: center;}
p#caption { padding: 14px 25px 0 18px; font-size: 15px; color: green;}
p#caption a#nlink { color: green;}
p#caption a:hover#nlink { color: royalblue;}


p#caption1 { padding: 5px 25px 2px 25px; font-size: 14px; color: brown; background: #F5ECD4;}
p#para1 { margin: 10px 15px 0 15px; padding: 0 4px 8px 4px; border-bottom: 1px solid gold;}
p#para2 { margin: 10px 15px 20px 15px; padding: 0 4px;}
p#para3 { margin: 10px 15px 0 15px; padding: 0 4px;}
span#detail { float: right; font-size: 12px;}

/*--feature chemo profile info column --*/

div#f-01 { padding: 20px 20px 20px 220px; postion: relative; line-height: 24px;}
div#f-02 { padding: 20px 220px 20px 20px; position: relative; height: 120px; line-height: 24px;}
ul#f-03 { list-style: none; margin: 20px; line-height: 24px;}
ul#f-03 li { float:left; width: 175px; margin-right: 20px;}
ul#f-03 li#end { margin-right: 0;}
ul#f-03 img { margin: 5px 0;}
div#f-04{ width: 150px; font-size: 13px; color: white; padding: 0 10px; margin-bottom: 5px; background: darkorange; text-align: center;}
img#f-05 { position:absolute; top: 20px; left: 20px; width: 170px; height: 120px;}
img#f-06 { position:absolute; top: 20px; right: 20px; width: 170px; height: 120px;}
img#f-07 { position:absolute; top: 145px; left: 20px; width: 170px; height: 120px;}
img#f-08 { position:absolute; top: 270px; left: 20px; width: 170px; height: 120px;}
img#f-09 { width: 170px; height: 120px;}

div#c-01 { font-size: 15px; color: green; margin: 20px 20px 10px 20px; font-weight: bold;}
div#c-02 { width: 90px; text-align: center; font-size: 14px; color: white; margin: 20px 20px 10px 20px; background: green;}
p#c-02 { line-height: 24px; margin: 10px 20px; font-size: 14px; color: #826E4C;}
p#c-03 { line-height: 24px; margin: 10px 20px; font-size: 13px; color: #275D1F;}

table#profile { border-width: 1px 1px 0 0 ; border-color: brown; border-style: solid; border-collapse: collapse; margin: 20px;}
table#profile td { border-width: 0 0 1px 1px ; border-color: brown; border-style: solid; padding: 4px 10px; font-size: 14px;}
table#profile td.cell1 { background: darkorange; color: white;}
table#profile td.cell2 { background: ivory; color: #6A581F;}
table#profile td.cell4 { background: white; color: darkgreen; width: 220px;}
table#profile td.cell5 { background: ivory; color: #6A581F; width: 300px;}

ul#c-04 { margin: 0px 10px 20px 40px; list-style: round;}
ul#c-04 li { font-size: 13px;  margin-right: 30px;}
div#c-05 { margin: 10px 20px; background: gold; color: brown; font-size: 14px; padding: 2px 20px;}

/*--column news--*/

div#column { background: url('img/note.png'); line-height: 24px; margin: 20px; padding: 0 4px;}
div#column p { font-size: 17px; color: darkorange;}
div#column img#rightside { float: right; margin: 0 0 10px 20px;}
div#column img#leftside { float: left; margin: 10px 20px 0 0;}
ul#column-cgi-link { list-style: none; margin-left: 2px;}
ul#column-cgi-link li { border-bottom: 1px dotted #999375; height: 20px; margin-bottom: 7px;}
ul#column-cgi-link a { display: inline; color: darkgreen;}
ul#column-cgi-link a:hover { color: tomato;}

div#box2-news { width: 610px; background: white; border: 1px solid grey; margin-bottom: 10px; height: 1000px;}
div#news-page { background: url('img/note1.png'); line-height: 28px; margin: 20px; padding: 0 4px; color: #336600; font-size: 14px;}
div#news-page p { font-size: 17px; color: royalblue;}
div#news-page img#rightside { float: right; margin: 0 0 10px 20px;}
div#news-page img#leftside { float: left; margin: 10px 20px 0 0;}
ul#news-cgi-link { margin-left: 0px; padding: 10px 5px 10px 21px; border: grey 1px solid; background: white;}
ul#news-cgi-link li { border-bottom: 1px dotted #99CCCC; margin-bottom: 7px; color: red; line-height: 18px;}
ul#news-cgi-link a { display: inline; color: #006699; font-size: 12px;}
ul#news-cgi-link a:hover { color: steelblue;}

/*---CGI news---*/

#news-div { height: 30px; position: relative;}
#news-div a#prevbutton { display:block;background:white; border: 1px solid grey; padding: 2px 8px;position:absolute;top:0;left:0;}
#news-div a#prevbutton:hover { background:coral;}

#news-div a#nextbutton { display:block;background:white; border: 1px solid grey; padding: 2px 8px;position:absolute;top:0;right:0;}
#news-div a#nextbutton:hover { background:coral;}

/*---CSS3---*/

.mask { overflow: hidden;}

div#rBox { margin: 20px; height: 192px; line-height: 17px;}
div#rBox div#baseBox { margin: 0; float: left; width: 150px; border: 1px grey solid; margin: 5px;}/*マスクを入れるdiv*/
div#rBox div#eachBox { height: 170px; }/*グラデーション色をいれるdiv*/
div#rBox div img { width: 150px; height: 80px;}
div#rBox div p { padding: 3px 5px; text-align: center;}
div#rBox div p.txt { font-size: 11px; text-align: left;}

/*--radius gradient--*/

.radius4 {
	border-radius: 4px; 
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	}
.radius8 {
	border-radius: 8px; 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	}

.gradient1 {
background: -webkit-linear-gradient(270deg,ivory 0%, white 100%);
background: -moz-linear-gradient(270deg,ivory 0%, white 100%);
background: -ms-linear-gradient(270deg,ivory 0%, white 100%);
background: -o-linear-gradient(270deg,ivory 0%, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='ivory', endColorstr='white'); 
}

.gradient2 {
background: -webkit-linear-gradient(270deg,#eeeeee 0%, #dfdfdf 100%);
background: -moz-linear-gradient(270deg,#eeeeee 0%, #dfdfdf 100%);
background: -ms-linear-gradient(270deg,#eeeeee 0%, #dfdfdf 100%);
background: -o-linear-gradient(270deg,#eeeeee 0%, #dfdfdf 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#eeeeee', endColorstr='#dfdfdf'); 
}

.gradient04	{
	background: -moz-linear-gradient(left top, #990,
			#c36 30%,
			#f60 50%,
			#000 70%,
			#066);　/* Firefox用 */
	background: -webkit-gradient(linear, left top, right bottom, from(#990),
			color-stop(0.3, #c36),
			color-stop(0.5, #f60),
			color-stop(0.7, #000),
			to(#066));　/* Safari,Google Chrome用 */
}

 

/*-----javascript------*/
	 div.wrap {
	    width:610px;
	    height: 300px;
	    background-color:#ffffff;
	}
         div.wrap.three {
            width:610px;
            height:300px;
            border:none;
            margin:0;
            padding:0;
         }
         /* example3 */
         div.example3_container a.slider_prev,
         div.example3_container a.slider_next {
            color: #cccccc;
            margin-top: 0px;
         }
         ul#example3 {
            list-style: none;
            margin:0; padding:0;
         }
         ul#example3 li {
            list-style: none;
            margin:0; padding:0;
         }
         ul#example3 li img {
         	border: none;
			height: 300px; /*google chrome用*/
         }

div#banner { width: 220px; position: absolute; left: 0; top: 38px;}
div#banner a { display: block; padding: 15px 10px 10px 45px; height: 35px; color: white; background: coral; box-shadow: 2px 2px 4px #aaa; line-height: 18px; font-size: 11px; font-weight: bold;}
div#banner a span { font-size: 15px; color: yellow; font-weight: bold;}
div#banner a:hover { display: block; color: white; background: gold; box-shadow: none;}
div#banner a:hover span { font-size: 15px; color: red;}
div#banner div { position: absolute;}
div#banner div#smart1 {
	left: 9px;
	top:15px;
	background: #333;
	width: 22px;
	height: 32px;
	z-index: 98;
	box-shadow: 2px 2px 4px #777;
	border-radius: 4px; 
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;}
div#banner div#smart2 { 
	left: 11px; 
	top: 17px;
	width: 18px; 
	height: 25px; 
	z-index: 99;
	background: -webkit-linear-gradient(270deg,#dddddd 0%, #555555 100%);
	background: -moz-linear-gradient(270deg,#dddddd 0%, #555555 100%);
	background: -ms-linear-gradient(270deg,#dddddd 0%, #555555 100%);
	background: -o-linear-gradient(270deg,#dddddd 0%, #555555 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dddddd', endColorstr='#555555'); }

div#icon-h { border: 1px solid grey; text-align: center; width: 50px; height: 50px; position: absolute; right: 10px; top: 12px;background: white;}
div#icon-h img { margin-top: 1px; position: absolute; top: 1px; left: 10px;}
div#icon-h a { display: block; text-align: center; font-size: 12px; color: darkorange; padding: 29px 0 4px 0; }
div#icon-h a:hover { color: green;}

a#button1 { float: left; display: block; text-align: center; width: 70px; padding:2px; background: #eee; border: 1px solid grey; margin-right: 4px; box-shadow: 2px 2px 3px #aaa;}
a:hover#button1 { bacground: lime; box-shadow: 2px 2px 3px #aaa inset;}