@charset "UTF-8";

html, body, div, section, a, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote,
 address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
	margin: 0;
	padding: 0;
	border: 0;
 }
 .opera {
    /*Opera（全バージョン）のみ*/
}
.opera8 {
    /*Opera 8.xのみ*/
}
.opera9 {
    /*Opera 9.xのみ*/
}
.opera10 {
    /*Opera 10.xのみ*/
}
.konqueror {
    /*Konquerorのみ*/
}
.webkit {
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari {
    /*Safari, NetNewsWire, OmniWeb, Shiira, Google Chromeのみ*/
}
.safari3 {
    /*Safari 3.xのみ*/
}
.chrome {
    /*Google Chromeのみ*/
}
.iron {
    /*SRWare Ironのみ*/
}
.hamrun1{display:inline-block; margin-left:150px; 
margin-top:50px; position:absolute; z-index:100;}
.hamrun2{display:inline-block; margin-left:330px; margin-top:50px; position:absolute; z-index:100;
}
.hamrun3{display:inline-block; margin-left:510px; margin-top:50px;position:absolute;z-index:100;
}

.container{
	width: 960px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.animeheader{margin-top:50px; margin-bottom:50px;}

.logo{
	z-index: auto;
	position: relative;
	margin-top: -340px;
	margin-right: auto;
	margin-left: 30px;
	margin-bottom: auto;
}

nav{padding-left:350px;
    padding-top:25px;
	display: inline-block;}
	
a:hover{color:#7C45F1;}
	nav a {text-decoration:none;
	color:#000000}
	
h1{
	font-size: 100px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	display: inline-block;
	margin-top: 70px;
	margin-left: 350px;
	text-transform: capitalize;
}
		
 h2{padding-left:200px;
    font-size:36px;
	font-family:"Arial Black", sans-serif;}
 
 .hamster1photo{
	margin-left: 230px;
 }
 	
p {
	padding-top: 40px;
	color: #000000;
	height: 0px;
}	
.hamsternav{padding-top:25px;}


.best_friend {border: 4px solid #00C957; background-color: #08B2AA; display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%; margin: auto;
	text-align: center;font-family: "Franklin Gothic Bold", "Arial Black", sans-serif;}
.best_friend1{border:4px solid #F9F631;background-color: #FDF7BC; display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%; margin: auto;
	text-align: center;font-family: "Franklin Gothic Bold", "Arial Black", sans-serif;}
.best_friend2{border:4px solid #0159C2;background-color: #86CFF8 ;display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%; margin: auto;
	text-align: center;font-family: "Franklin Gothic Bold", "Arial Black", sans-serif;}
.best_friend3{border: 4px solid #F37AE9;
	background-color: #F6CEF8; display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%; margin: auto;
	text-align: center;font-family: "Franklin Gothic Bold", "Arial Black", sans-serif;}
.best_friend4{border:4px solid #F09F05;background-color: #F98D46; display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%; margin: auto;
	text-align: center;font-family: "Franklin Gothic Bold", "Arial Black", sans-serif;}

.colorbox{width:960px;
height:350px;
position:relative;
background-color:#7CF5F2;}

.photo-border{margin-left:300px;}				
	
.main-50 {margin-left: 50px;
				margin-right: 50px;}	
.hamsterindex {
      position:relative;
	  margin-left:200px;}
	  
table{width:500px;border:2px solid black;
margin-left: auto;
margin-right: auto;
position: relative;}

td{width:500px;border:1px solid black; text-align:center; font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;}
table a {color:black; text-decoration:none; }
 
h4 {font-family:"Arial Narrow",sans-serif;
 font-size:36px; 
 line-height:28px; 
 color:#cc3300; 
 text-transform:uppercase;
 padding-top:10px;
 padding-left:320px;}
 
 .greenh4{padding-top:-500px; padding-left:200px; z-index: 100;
position: relative;
top: -340px;}
 
 h5{
	
	font-size: 16px;
	padding-top: 20px;
	padding-left: 200px;
	line-height: 26px;
	position: relative;
	font-style: normal;
	font-weight: 700;
 }
 .greenh5{
	padding-top: -500px;
	padding-left: 200px;
	z-index: 100;
	position: relative;
	top: -340px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
 
.totop{float:right;} 

  
h6{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size: 16px;
	line-height: 26px;
}
h3{margin-left:200px;}

 
.hamphoto2{
	margin-left: 100px;
	z-index:auto;
}

.hamster2photo{padding-left:150px;
z-index: 1
;
position: relative;
}

.footer{
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, 
"Times New Roman", serif;
	font-size: 10px;

	position: relative;
	text-align: center;
}


.titlebar{color:
	color: #A80508;
	color: #A60306;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
.sidebar {
	width: 200px;
	float: right;
	background-color: #DEF9F4;
	height: 400px;
	border-top: 15px solid #2CC7F7;
	border-bottom: 15px solid #2CC7F7;
	margin-top: 15px;
}
.survey{ width:100px;
	height: 100px;
	border-radius: 50%;
	background-color: #45C807;
	text-align:center;
	margin-left:auto; margin-right:auto;
	box-shadow:5px 5px 5px #000000;
	margin-top:30px;border:4px solid #F09F05;
	font-family:  "Arial Black", sans-serif;
	
}
.survey1{color: #98061C;
	font-family: "Impact", Haettenschweiler, Franklin Gothic Bold, Arial Black, sans-serif;
	text-align: center;
	font-size: x-large;
	margin-top: -5px;
}
.sidebartitle {
	color: #98061C;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Arial Black, sans-serif;
	
	text-align: center;
	margin-top: -30px;
	font-size: x-large;
}
.listonlibrary {
	margin-left: 35px;
	height: 160px;
	margin-top: 35px;
	font-family:Arial, Helvetica, sans-serif;
}
.slideshow{margin-left:120px;
margin-bottom:50px; margin-top:50px;}

.gallery {
	background-color: #F4EFAD;
}

.book{float:right;}


.ham1 {
	background-color: #50ED9D;
}
.ham2 {
	line-height: 0px;
	text-align: center;
}

object{position:relative;
margin-left:auto; margin-right:auto;}

#hamsterswf{margin-right:150px;}
        
.video{margin-left:250px; margin-bottom:50px;}


label {
	width: 100px;
	display: block;
	float: left;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.form{margin-top:-300px;}
input {
	display: block;
	float: right;
}
textarea{display: block;
	float: right;
}
form {
	width: 300px;
	margin-left:auto;
	margin-right:auto;
} 
#submit{display:inline-block; float:right}
#reset{display:inline-block; float:right;}


@media screen  and (min-width: 768px) and (max-width: 979px) 
{
.container {width:auto; height:auto;}

header .colorbox .container {display:inline; 
background-color:#7CF5F2;
width:90%; 
height:90%;} 
.logo {width:33%; height:33%;
position:relative; margin-bottom:-5px; margin-left:50px; 
}
.hamsterindex{margin-left:10px;
width:95%; height:auto; }
h1{display:none;}
h2{ font-size:100%; 
position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}
h3 {font-size:100%; position:relative; margin-left:auto; margin-right:auto;}
nav {font-size:medium;
height:auto;
float:right;}
nav p {float:none; width:auto;}
.colorbox{width:auto; height:auto;}
h5 {position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}
body img{float:none; display:inline; position:relative;}
.photo-border{ width:75%; height:75%;
             float:none; display:inline; position:relative;margin-left:50px;}
h4{ position:relative;margin-left:50px; font-size:100%; 
position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}	
	 .hamphoto2{width:95%; height:95%;
             float:none; display:inline; position:relative;margin-left:10px;}
.hamster1photo{width:95%; height:95%;
             float:none; display:inline; position:relative;margin-left:10px;}
.slideshow{width:60%; height:60%;
             float:none; display:inline; position:relative;margin-left:120px;}
aside{margin-right:25px;margin-bottom:20px;}
h6{margin-left:10px;}
form{width:100%;}
object{width:100%; margin-left:-25px;}
.form{width:95%;margin-left:10px;}
.hamster2photo{width:100%; margin-left:-150px;}
.hamrun2{margin-left:250px;}
.hamrun1{margin-left: 50px; }
.video{margin-left:25px;}
h6{margin-left:10px; margin-right:10px;}
#submit{display:inline-block; float:left}
#reset{display:inline-block; float:left;}
#animeheader{height:50px;}

}
@media screen  and (min-width: 500px) and (max-width: 767px) 
{
.container {width:auto; height:auto;}

header .colorbox .container {display:inline; 
background-color:#7CF5F2;
width:90%; 
height:90%;} 
.logo {width:70%; height:70%;
position:relative; margin-bottom:160px; margin-left:20px; 
}
.slideshow{width:60%; height:60%;
             float:none; display:inline; position:relative;margin-left:10px;}
.hamsterindex{margin-left:10px;
width:95%; height:auto; }
h1{display:none;}
h2{ font-size:100%; 
position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}
h3 {font-size:100%; position:relative; margin-left:auto; margin-right:auto;}
nav {font-size:medium;
height:auto;
float:right;}
nav p {float:none; width:auto;}
.colorbox{width:auto; height:auto;}
h5 {position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}
body img{float:none; display:inline; position:relative;}
.photo-border{ width:75%; height:75%;
             float:none; display:inline; position:relative;margin-left:50px;}
h4{ position:relative;margin-left:50px; font-size:100%; 
position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}	
	 .hamphoto2{width:95%; height:95%;
             float:none; display:inline; position:relative;margin-left:10px;}
.hamster1photo{width:95%; height:95%;
             float:none; display:inline; position:relative;margin-left:10px;}
.slideshow{display:none;margin-bottom:20px;}
aside{margin-right:25px;}
h6{margin-left:10px;}
form{width:100%;}
object{width:100%; margin-left:-25px;}
.form{width:95%;margin-left:10px;}
.hamster2photo{width:100%; margin-left:-150px;}
.hamrun2, hamrun3 {width:40%; height:40%;}
.hamrun1{margin-left: 50px; width:40%; height:40%; }
.video{margin-left:25px;}
h6{margin-left:10px; margin-right:10px;}
#submit{display:inline-block; float:left}
#reset{display:inline-block; float:left;}
#animeheader{height:50px;}
aside{margin-right:25px;margin-bottom:20px;}
table{width:auto; height:auto;}
}
@media screen  and (max-width: 499px) 
{
.container {width:auto; height:auto;}

header .colorbox .container {display:inline; 
background-color:#7CF5F2;
width:90%; 
height:90%;} 
.logo {width:70%; height:70%;
position:relative; margin-bottom:160px; margin-left:20px; 
}
.hamsterindex{margin-left:10px;
width:95%; height:auto; }
h1{display:none;}
h2{ font-size:100%; 
position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}
h3 {font-size:100%; position:relative; margin-left:auto; margin-right:auto;}
nav {font-size:medium;
height:auto;
float:right;}
nav p {float:none; width:auto;}
.colorbox{width:auto; height:auto;}
h5 {position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}
body img{float:none; display:inline; position:relative;}
.photo-border{ width:75%; height:75%;
             float:none; display:inline; position:relative;margin-left:50px;}
h4{ position:relative;margin-left:50px; font-size:100%; 
position:relative;
margin-left:auto;
margin-right:auto;
margin-left:-180px;}	
	 .hamphoto2{width:95%; height:95%;
             float:none; display:inline; position:relative;margin-left:10px;}
.hamster1photo{width:95%; height:95%;
             float:none; display:inline; position:relative;margin-left:10px;}
.slideshow{display:none;}
aside{margin-right:25px;}
h6{margin-left:10px;}
form{width:100%;}
object{width:100%; margin-left:-25px;}
.form{width:95%;margin-left:10px;}
.hamster2photo{width:100%; margin-left:-150px;}
.hamrun2, hamrun3 {display:none;}
.hamrun1{margin-left: 50px; }
.video{margin-left:25px;}
h6{margin-left:10px; margin-right:10px;}
#submit{display:inline-block; float:left}
#reset{display:inline-block; float:left;}
#animeheader{height:50px;}
aside{margin-right:25px;margin-bottom:20px;}
table{width:auto; height:auto;}

}