@media screen and (min-width:960px) and (max-width:3900px)
{

html		{ margin: 0 auto; width:100%; font-family:sans-serif; font-style:italic; font-size: 1.0em; padding:0px; text-align:left; max-width:1300px; min-width:280px; background:linear-gradient(90deg,#BBBBBB 25%, #FFFFFF 50%, #BBBBBB ); }
.head		{ background-color:#0000CC; color:#FFFFFF; font-style:italic; font-size: 2.0em; font-weight:bold; text-align:center; padding:12px; }
.body  		{ font-weight:normal; font-size:1.1em; color:#333333; padding:5px; text-align:justify;  margin-top:55px;padding-bottom:40px; }
.menu 		{ display: flex; align-items: center; justify-content: center;}
.text 		{ column-count: 3; column-gap:5%; column-rule-style: solid; column-rule-width:1px; font-weight:normal; font-size:1.2em; color:#333333; padding:5px; text-align:justify; }
.foot		{ position:fixed; bottom:0px; left:0px; background-color:#0000CC; color:#FFFFFF; text-align:center; font-size:1.0em; font-style:italic; width:100%; padding:3px; }
.image    	{ width:200px; height:100px;}
.bti    	{ width:220px; background-color:#DDDDDD; font-size:1.2em; color:#000000; padding:5px; border:#DDDDDD 1px solid;  border-radius:7px; margin:5px; vertical-align:middle;}
.bti:hover  { width:220px; background-color:#EEEEEE; font-size:1.2em; color:#0000CC; padding:5px; border:#DDDDDD 1px solid;  border-radius:7px; margin:5px; vertical-align:middle;}
.bti_active { width:220px; background-color:#EEEEEE; font-size:1.2em; color:#0000CC; padding:5px; border:#DDDDFF 1px solid;  border-radius:7px; margin:5px; vertical-align:middle;}
.form		{ display:inline-block; width:220px; height:88px; padding:10px; float:left;}

}

@media screen and (min-width:640px) and (max-width:960px)
{

html		{ margin: 0 auto; width:100%; font-family:sans-serif; font-style:italic; font-size: 1.0em; padding:0px; text-align:left; max-width:960px; min-width:280px; background:linear-gradient(90deg,#BBBBBB 25%, #FFFFFF 50%, #BBBBBB );}
.head		{ background-color:#0000CC; color:#FFFFFF; font-style:italic; font-size: 1.5em; font-weight:bold; text-align:center; padding:8px; }
.body  		{ font-weight:normal; font-size:1em; color:#333333; padding:5px; text-align:justify;  margin-top:25px;padding-bottom:30px;}
.menu 		{ display: flex; align-items: center; justify-content: center;}
.text 		{ column-count:2; column-gap:5%; column-rule-style:solid; column-rule-width:1px; font-weight:normal; font-size:1.0em; color:#333333; padding:5px; text-align:justify; }
.foot		{ position:fixed; bottom:0px; left:0px; background-color:#0000CC; color:#FFFFFF; text-align:center;  font-size:0.8em; font-style:italic; width:100%; padding:3px; }
.image    	{ width:100px;height:50px;}
.bti    	{ width:120px;height:100px;background-color:#DDDDDD; font-size:1em; color:#000000; padding:5px; border:#DDDDDD 1px solid;  border-radius:5px;margin:3px;vertical-align:middle; }
.bti:hover  { width:120px;height:100px;background-color:#EEEEEE; font-size:1em; color:#0000CC; padding:5px; border:#DDDDDD 1px solid;  border-radius:5px;margin:3px;vertical-align:middle; }
.bti_active { width:120px;height:100px;background-color:#EEEEEE; font-size:1em; color:#0000CC; padding:5px; border:#DDDDFF 1px solid;  border-radius:5px;margin:3px;vertical-align:middle; }
.form		{ display:inline-block; width:120px; height:90px; padding:5px; float:left;}

}



@media screen and (min-width:356px) and (max-width:640px)
{

html		{ margin: 0 auto; width:100%; font-family:sans-serif; font-style:italic; font-size:1.0em; padding:0px; text-align:left; max-width:640px; min-width: 350px; background:linear-gradient(90deg,#BBBBBB 25%, #FFFFFF 50%, #BBBBBB );}
.head		{ background-color:#0000CC; color:#FFFFFF; font-style:italic; font-size: 1.5em; font-weight:bold; text-align:center; padding:8px; }
.body  		{ font-weight:normal; font-size:1em; color:#333333; padding:5px; text-align:justify;  margin-top:25px;padding-bottom:30px;}
.menu 		{ display: flex; align-items: center; justify-content: center;}
.text 		{ column-count:2; column-gap:5%; column-rule-style: solid; column-rule-width: 1px; font-weight:normal; font-size:1em; color:#333333; padding:5px; text-align:justify; }
.foot		{ position:fixed; bottom:0px; left:0px; background-color:#0000CC; color:#FFFFFF; text-align:center; font-size:0.8em; font-style:italic; width:100%;  padding:3px; }
.image    	{ width:70px;height:30px;}
.bti    	{ width:80px;height:80px;background-color:#DDDDDD; font-size:0.9em; color:#000000; padding:5px;border:#DDDDDD 1px solid;  border-radius:3px;margin:3px;vertical-align:middle; }
.bti:hover 	{ width:80px;height:80px;background-color:#EEEEEE; font-size:0.9em; color:#0000CC; padding:5px;border:#DDDDDD 1px solid;  border-radius:3px;margin:3px;vertical-align:middle; }
.bti_active { width:80px;height:80px;background-color:#EEEEEE; font-size:0.9em; color:#0000CC; padding:5px;border:#DDDDFF 1px solid;  border-radius:3px;margin:3px;vertical-align:middle; }
.form		{ display:inline-block; width:80px; height: 80px; padding: 5px; float:left;}

}


@media screen and (min-width:0px) and (max-width:355px)
{

html		{ margin: 0 auto; width:100%;min-width: 280px;font-family:sans-serif; font-style:italic; font-size: 1.0em; padding:0px; text-align:left; max-width:360px; background:linear-gradient(90deg,#BBBBBB 25%, #FFFFFF 50%, #BBBBBB ); }
body		{ min-width: 280px; }
.head		{ background-color:#0000CC; color:#FFFFFF; font-style:italic; font-size: 1.3em; font-weight:bold; text-align:center; padding:4px; }
.body  		{ font-weight:normal; font-size:1em; color:#333333; padding:5px; text-align:justify;  margin-top:15px;padding-bottom:30px;}
.menu 		{ display: flex; align-items: center; justify-content: center;}
.text 		{ font-weight:normal; font-size:1em; color:#333333; padding:5px; text-align:justify; }
.foot		{ position:fixed; bottom:0px; left:0px;background-color:#0000CC; color:#FFFFFF; font-size:0.6em; font-style: italic; font-weight: normal;text-align:center;width:100%; color:#999999;}
.image    	{ display:none;} 
.bti    	{ width:95vw;background-color:#DDDDDD; font-size:0.8em; color:#000000; padding:3px;border:#DDDDDD 1px solid;  border-radius:3px;margin-right:0px;vertical-align:middle; }
.bti:hover  { width:95vw;background-color:#EEEEEE; font-size:0.8em; color:#0000CC; padding:3px;border:#DDDDDD 1px solid;  border-radius:3px;margin-right:0px;vertical-align:middle; }
.bti_active { width:95vw;background-color:#EEEEEE; font-size:0.8em; color:#0000CC; padding:3px;border:#DDDDFF 1px solid;  border-radius:3px;margin-right:0px;vertical-align:middle; }
form		{  float:left;}

}