@charset "utf-8";
/* reservation.css */

/*======================================

	1-3.Structure Module

=======================================*/

body {
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 12px;
	background: url(../images/back.jpg) center top no-repeat;
	background-color: #EAE9E4;
}

/* Win IE 6以前 */
* html body {
	font-size: small;
}



* {
	line-height: 1.6;
	font-style: normal;
	font-weight: normal;
	font-size: 1em;
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}



div#wrapper {
	margin: 0 auto;
	padding: 0;
	border: 0;
	width: 780px;
	text-align: center;
}

/*======================================

	1-4.Text Module

=======================================*/

p,
pre,
address,
cite {
	margin: 0 0 1em 0;
	font-size: 100%;
}



h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0.5em 1.67em;
}



h1 {
	font-size: 2em;
}



h2 {
	font-size: 1.83em;
}



h3 {
	font-size: 1.67em;
}



h4 {
	font-size: 1.50em;
}



h5 {
	font-size: 1.33em;
}



h6 {
	font-size: 1.17em;
}



pre {
	padding: 0.5em 0.83em;
	border: 1px dotted #aaa;
	width: 90%;
	overflow: scroll;
	color: #333;
	background-color: #f5f5f5;
	font-family: "Osaka－等幅", monospace;
}



pre[title]::before {
	margin-bottom: 0.8em;
	padding: 0 0.83em;
	display: block;
	content: attr(title);
	color: #000;
	background-color: #fff;
}



blockquote {
	margin: 1.5em 20px;
	padding: 1px 0;
	border: 3px solid #eee;
	background-color: #fff;
}



blockquote * {
	color: #666;
}



blockquote[title]:before {
	margin: 2px 2px 1em 2px;
	padding: 0.1em 16px;
	display: block;
	content: attr(title);
	background-color: #f5f5f5;
}



blockquote[cite]:after {
	padding: 0.8em 20px;
	display: block;
	content: attr(cite);
	color: #333;
	text-align: right;
}



cite {
	display: block;
	color: #333;
	text-align: right;
}



em {
	font-weight: bold;
}



strong {
	color: #ff4500;
	font-weight: bold;
}



code {
	font-family: "Osaka－等幅", monospace;
}



abbr,
acronym {
	border-bottom: 1px dotted #aaa;
	cursor: help;
}



kbd {
	padding: 0 0.3em;
	border: 1px solid #ccc;
	background-color: #f5f5f5;
	font-family: "Osaka－等幅", monospace;
	text-transform: uppercase;
}


td.small {
	font-size: 1em;
	line-height: 1.3em;
	letter-spacing: 1px;
}


/*--------------------------------------▼common----------------------------- */


/*======================================

	1-9.For Hidden Items

=======================================*/

hr,
.hidden {
   display: none;
   visibility: hidden;
}



/*======================================

	2-1.header

=======================================*/


/*--------------------------------------▼header--------------------------------- */

div#wrapper #header {
	margin: 0 15px;
	padding: 0;
	border: 0;
	width: 750px;
	height: 60px;
	background: url(../images/h_back.gif) left top no-repeat;
	text-align: left;
	position: relative;
}

div#wrapper #header h1 {
	margin: 0;
	padding: 0;
	border: 0;
	width: 280px;
	height: 60px;
	background: url(../images/h_logo.gif) left top no-repeat;
	float: left;
}

div#wrapper #header h1 a {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	border: 0;
	width: 280px;
	height: 60px;
}


div#wrapper #header p.h_english {
	padding: 0;
	border: 0;
	float: right;
}

div#wrapper #header p.h_english a {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	width: 117px;
	height: 35px;
	margin: 0 183px 0 0;
}



div#wrapper #header h3.h_tel {
	display: none;
}



div#wrapper #header h3 {
	display: none;
}

div#wrapper #header ul {
	position: absolute;
	top: 35px;
	left: 450px;
	margin: 0;
	padding: 0;
	border: 0;
	width: 300px;
	list-style: none;
}

div#wrapper #header ul li {
	padding: 0;
	border: 0;
	margin: 0;
	float: left;
}

div#wrapper #header ul li a {
	text-indent: -9999px;
	text-decoration: none;
	display: block;
	height: 25px;
	overflow: hidden;
}

div#wrapper #header ul li a#h_information {
	width: 50px;
}

div#wrapper #header ul li a#h_voice {
	width: 70px;
}

div#wrapper #header ul li a#h_access {
	width: 60px;
}

div#wrapper #header ul li a#h_contact {
	width: 75px;
}

div#wrapper #header ul li a#h_home {
	width: 45px;
}


/*--------------------------------------▼menu--------------------------------- */


div#wrapper #menu {
	margin: 0;
	padding: 0 15px;
	border: 0;
	width: 750px;
	height: 60px;
	background: url(../buttons/g_menu_pagetype.gif) center top no-repeat;
	text-align: left;
}

div#wrapper #menu h3 {
	display: none;
}

div#wrapper #menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	width: 750px;
	list-style: none;
}

div#wrapper #menu ul li {
	padding: 0;
	border: 0;
	margin: 0;
	float: left;
}

div#wrapper #menu ul li a {
	text-indent: -9999px;
	text-decoration: none;
	display: block;
	overflow: hidden;
	height: 60px;
}

div#wrapper #menu ul li a#m_reservation {
	width: 160px;
}

div#wrapper #menu ul li a#m_reservation:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: 0 -60px;
}


div#wrapper #menu ul li a#m_season {
	width: 118px;
}


div#wrapper #menu ul li a#m_season:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -160px -60px;
}



div#wrapper #menu ul li a#m_hotspa {
	width: 118px;
}

div#wrapper #menu ul li a#m_hotspa:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -278px -60px;
}

div#wrapper #menu ul li a#m_rooms {
	width: 118px;
}


div#wrapper #menu ul li a#m_rooms:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -396px -60px;
}


div#wrapper #menu ul li a#m_dishes {
	width: 118px;
}

div#wrapper #menu ul li a#m_dishes:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -514px -60px;
}


div#wrapper #menu ul li a#m_facilities {
	width: 118px;
}


div#wrapper #menu ul li a#m_facilities:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -632px -60px;
}

/*--------------------------------------▼page_top--------------------------------- */

#page_top {
	margin: 10px 20px;
	padding: 0;
	border: 0;
	clear: both;
	width: 710px;
	height: 31px;
	background: url(../images/dot.gif) bottom repeat-x;
}

#page_top p {
	margin: 0 0 0 625px;
	padding: 0;
	border: 0;
	text-indent: -9999px;
	line-height: 0px;
	width: 85px;
	height: 26px;
	background: url(../images/pagetop.gif) right top no-repeat;
}

#page_top p a {
	display: block;
	overflow: hidden;
	height: 26px;
}


/*--------------------------------------▼footer--------------------------------- */

div#wrapper #content_body #footer {
	margin: 0;
	padding: 0;
	border: 0;
	clear: both;
	width: 750px;
	background: url(../images/f_back.gif) center bottom no-repeat;
	text-align: left;
}

div#wrapper #content_body #footer p#text_link {
	text-align: center;
	padding: 20px 0 0 0;
	color: #003265;
	font-size: 12px;
}

div#wrapper #content_body #footer p#text_link a {
	color: #003265;
}

div#wrapper #content_body #footer p#text_link a:hover {
	color: #4FACFB;
}



div#wrapper #content_body #footer p#copyright {
	text-align: center;
	padding: 10px 0;
	color: #656767;
}

/*--------------------------------------▼address--------------------------------- */

div#wrapper #address {
	margin: 0 15px;
	padding: 0;
	border: 0;
	width: 750px;
}

div#wrapper #address p {
	margin: 5px;
	padding: 0;
	border: 0;
	text-align: left;
	font-size: 12px;
	line-height: 1.2em;
	color: #656767;
}



/*--------------------------------------▼title--------------------------------- */

div#wrapper #title h2 {
	text-indent: -9999px;
	margin: 6px 10px 0 10px;
	padding: 0;
	border: 0;
	height: 167px;
	width: 760px;
	background: url(http://www.hoppo-spa.com/reservation/images/title.png) center top no-repeat;
}



/*--------------------------------------▼menu--------------------------------- */

div#wrapper #menu ul li a#hotspa {
	width: 118px;
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -278px -60px;
}


/*--------------------------------------▼content_body--------------------------------- */

div#wrapper #content_body {
	margin: 0 15px;
	padding: 15px 0 0 0;
	border: 0;
	clear: both;
	width: 750px;
	background: url(../images/c_back.gif) center repeat-y;
	text-align: left;
}

div#wrapper #content_body h3#copy {
	margin: 0 20px;
	padding: 0;
	border: 0;
	text-indent: -9999px;
	height: 30px;
	width: 710px;
	background: url(http://www.hoppo-spa.com/reservation/images/copy.gif) center top no-repeat;
}



/*--------------------------------------▼content_inbody1--------------------------------- */

div#wrapper #content_inbody1 {
	margin: 0 0 0 20px;
	padding: 0;
	border: 0;
	clear: both;
	width: 710px;
}

#reservation div#wrapper #content_inbody1 p#bt_touroku {
	margin: 10px 0 10px 0;
	padding: 0;
	border: 0;
	width:284px;
	height: 26px;
	background: url(../images/bt_touroku.gif) right top no-repeat;
	float: right;

}

#reservation div#wrapper #content_inbody1 p#bt_touroku a {
	width:284px;
	height: 26px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}



/*--------------------------------------▼header--------------------------------- */

div#wrapper #header {
	margin: 0 15px;
	padding: 0;
	border: 0;
	width: 750px;
	background: url(../images/h_back.gif) left top no-repeat;
	text-align: left;
	position: relative;
}

div#wrapper #header h1 {
	margin: 0;
	padding: 0;
	border: 0;
	width: 280px;
	height: 60px;
	background: url(../images/h_logo.gif) left top no-repeat;
	float: left;
}

div#wrapper #header h1 a {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	border: 0;
	width: 280px;
	height: 60px;
}


div#wrapper #header p.h_english {
	padding: 0;
	border: 0;
	float: right;
}

div#wrapper #header p.h_english a {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	width: 117px;
	height: 35px;
	margin: 0 183px 0 0;
}



div#wrapper #header h3.h_tel {
	display: none;
}



div#wrapper #header h3 {
	display: none;
}

div#wrapper #header ul {
	position: absolute;
	top: 35px;
	left: 450px;
	margin: 0;
	padding: 0;
	border: 0;
	width: 300px;
	list-style: none;
}

div#wrapper #header ul li {
	padding: 0;
	border: 0;
	margin: 0;
	float: left;
}

div#wrapper #header ul li a {
	text-indent: -9999px;
	text-decoration: none;
	display: block;
	height: 25px;
	overflow: hidden;
}

div#wrapper #header ul li a#h_information {
	width: 50px;
}

div#wrapper #header ul li a#h_voice {
	width: 70px;
}

div#wrapper #header ul li a#h_access {
	width: 60px;
}

div#wrapper #header ul li a#h_contact {
	width: 75px;
}

div#wrapper #header ul li a#h_home {
	width: 45px;
}


/*--------------------------------------▼menu--------------------------------- */


div#wrapper #menu {
	margin: 0;
	padding: 0 15px;
	border: 0;
	width: 750px;
	height: 60px;
	background: url(../buttons/g_menu_pagetype.gif) center top no-repeat;
	text-align: left;
}

div#wrapper #menu h3 {
	display: none;
}

div#wrapper #menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	width: 750px;
	list-style: none;
}

div#wrapper #menu ul li {
	padding: 0;
	border: 0;
	margin: 0;
	float: left;
}

div#wrapper #menu ul li a {
	text-indent: -9999px;
	text-decoration: none;
	display: block;
	overflow: hidden;
	height: 60px;
}

div#wrapper #menu ul li a#m_reservation {
	width: 160px;
}

div#wrapper #menu ul li a#m_reservation:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: 0 -60px;
}


div#wrapper #menu ul li a#m_season {
	width: 118px;
}


div#wrapper #menu ul li a#m_season:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -160px -60px;
}



div#wrapper #menu ul li a#m_hotspa {
	width: 118px;
}

div#wrapper #menu ul li a#m_hotspa:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -278px -60px;
}

div#wrapper #menu ul li a#m_rooms {
	width: 118px;
}


div#wrapper #menu ul li a#m_rooms:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -396px -60px;
}


div#wrapper #menu ul li a#m_dishes {
	width: 118px;
}

div#wrapper #menu ul li a#m_dishes:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -514px -60px;
}


div#wrapper #menu ul li a#m_facilities {
	width: 118px;
}


div#wrapper #menu ul li a#m_facilities:hover {
	background-image: url(../buttons/g_menu_pagetype.gif);
	background-position: -632px -60px;
}

/* Clear Type Font For Win IE 6 */
* html * {
	font-family: Meiryo, "メイリオ", sans-serif;
}

/*--------------------------------------▼footer--------------------------------- */
* html div#wrapper #content_body #footer p {
	padding: 10px 0 10px 0;
	font-size: 12px;
}
/* */ 



/*--------------------------------------------------------------------------*
 *  
 *  alphafilter JavaScript Library beta5
 *  
 *  MIT-style license. 
 *  
 *  2007 Kazuma Nishihata 
 *  http://www.webcreativepark.net
 *  
 *--------------------------------------------------------------------------*/

new function(){

	if(window.addEventListener){
		window.addEventListener('load',alphafilter,false);
	}else if(window.attachEvent){
		window.attachEvent('onload',alphafilter);
	}
	
	function alphafilter(){
		if (typeof document.body.style.maxHeight == "undefined") {//for old ie
			var elements = getElementsByClassName("alphafilter");
			for (var i=0; i<elements.length; i++) {
				var element = elements[i];
				if(element.nodeName=="IMG"){
					var newimg           = document.createElement("b");
					for(var key in element.currentStyle){
						newimg.style[key]=element.currentStyle[key];
					}
					newimg.className     = element.className;
					newimg.style.display = "inline-block";
					newimg.style.width   = element.width;
					newimg.style.height  = element.height;
					newimg.style.float   = element.align;
					newimg.style.filter  = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+element.src+",sizingMethod='scale')";
					element.parentNode.replaceChild(newimg,element);
				}else{
					var anchors = element.getElementsByTagName("a");
					for (var j=0; j<anchors.length; j++) {
						var anchor = anchors[j];
						anchor.style.position="relative";
					}
					var iputs = element.getElementsByTagName("input");
					for (var j=0; j<iputs.length; j++) {
						var iput = iputs[j];
						iput.style.position="relative";
					}
					var iputs = element.getElementsByTagName("textarea");
					for (var j=0; j<iputs.length; j++) {
						var iput = iputs[j];
						iput.style.position="relative";
					}
					var iputs = element.getElementsByTagName("select");
					for (var j=0; j<iputs.length; j++) {
						var iput = iputs[j];
						iput.style.position="relative";
					}
					var  newimg = element.currentStyle.backgroundImage || element.style.backgroundImage;
					newimg.match(/^url[("']+(.*\.png)[)"']+$/i)
					var newimg = RegExp.$1;
					element.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+newimg+",sizingMethod='image')";
					element.style.background = "none";
				}
			}
		}
	}
	
	function getElementsByClassName(className){
		var i, j, eltClass;
		var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all;
		var objCN = new Array();
		for (i = 0; i < objAll.length; i++) {
			eltClass = objAll[i].className.split(/\s+/);
			for (j = 0; j < eltClass.length; j++) {
				if (eltClass[j] == className) {
					objCN.push(objAll[i]);
					break;
				}
			}
		}
		return objCN;
	}
}