@charset "utf-8";

/* @group Reset */
* {margin: 0; padding: 0;}
a { text-decoration: none; color: #fff;}
a:hover {color: #fc0;}
ul, ol { list-style: none;}
img { vertical-align: middle;}
/* @end */

/* @group Fluid-img */
img { max-width: 100%;}
/* @end */

/* @group HTML */
html {
font-family: verdana, sans-serif;
line-height: 1.5;
background: url(../images/bg_ritz.jpg);
background-repeat: repeat-x;
background-color: #100000;}
/* @end */





/* @group Heading */
h1,h2,h3,h4,h5,h6 { margin-bottom: 24px;}
h1 {
font-size: 48px;
line-height: 1;} /* 48px */
h2 {
font-size: 36px;
line-height: 1.3333;} /* 48px */

h3 {
font-size: 18px;
line-height: 1.3333;}  /* 24px */
 /* h3 {
font-size: 24px;
line-height: 1;} 24px */


hgroup h2,h4,h5,h6 {
font-size: 16px;
line-height: 1.5;} /* 24px */
/* @end */

/* @group Header */
header {
text-align: center;
padding-top: 24px;
margin-bottom: 24px;
}
header h1 { margin-bottom: 24px;}
header h2 { color: #ffffff; margin-top: 8px;}


/* @group Nav */
nav {
background-color: #333333;
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 10px  rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px  rgba(0,0,0,0.4);
}
nav ul { overflow: hidden;}
nav ul li { width: 33.3333%; float: left;
border-top: solid 1px #fff;
border-bottom: solid 1px #ccc;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fff', endColorstr = '#ccc');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fff', endColorstr = '#ccc')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #fff, #ccc);
background-image: -ms-linear-gradient(top, #fff, #ccc);
background-image: -o-linear-gradient(top, #fff, #ccc);
background-image: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: -webkit-linear-gradient(top, #fff, #ccc);
background-image: linear-gradient(top, #fff, #ccc);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/

}
nav ul li a {
display: block;
color: #333;
padding: 12px 0;
border-left: solid 1px #fff;
border-right: solid 1px #ccc;
font-size: 14px;
}
nav ul li a:hover {
color: #ffffff;
background-color: rgba(0,0,0,0.15);
}

nav ul li.no a:hover {
color: #ffffff;
background-color: rgba(0,0,0,0.0);
}

/* @end */

/* @group Contents */
#contents {
width: 90%;
margin: 0 auto;
text-align: center;
color: #ffffff;
}
#contents p {
margin-bottom: 24px;
text-align: left;
}
#contents img {
margin-bottom: 24px;
}

#contents h3 {
border-bottom: 1px solid #ffffff;
}

#contents h4 {
background-color: #450015;
color: #fff;
padding: 12px 16px;
}


aside ul li {margin-bottom: 12px;}

#ainelinks {margin-bottom: 24px;}

#ainelinks li {
background: url(../images/linkicon.png);
background-repeat: no-repeat;
background-position: 10px 5px;}

#ainelinks a {
color: #ffffff;
display: block;
padding: 0 25px;
}
#ainelinks a:hover {
color: #ffffff;
background-color: rgba(255,0,0,0.4);
}



/* @end */

/* @group Footer */
footer {
color: #ffffff;
text-align: center;
padding: 24px 0;
background-color: #450015;

-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px  rgba(0,0,0,0.4);
}
/* @end */


table {width: 95%; margin: 0 auto 24px auto; font-size: small;}
table th,
table td {text-align: center; padding: 6px;}
 
table th {background-color: #f30;}
table td {background-color: rgba(255,0,0,0.1);}
/* table td.a {background-color: rgba(255,0,0,0.3);width: 4em;} */
table td.a {background-color: rgba(255,0,0,0.3);width: 6em;}


table.charge {width: 95%; margin: 0 auto 24px auto; font-size: small;}
table.charge th {text-align: center; padding: 6px; background-color: #aa0000; width: 7em;}
table.charge td {text-align: left; padding: 6px;}

table.charge td.bunrui,
table.charge td.kyu,
table.charge td.hei,
table.charge td.zen {width: 7em; text-align: center;}

table.charge td.bunrui {background-color: #400;}
table.charge td.kyu {background-color: #ff3300;}
table.charge td.hei {background-color: #eeeeee; color: #666666;}
table.charge td.zen {background-color: #ffff66; color: #333333;}



h5 { background-color: rgba(0,0,0,1); padding-left: 12px;
}

.room {overflow: hidden;}
.room div { width: 33.3333% ; text-align: center; margin-bottom: 24px; float: left; line-height: 0;}
.room div img { max-width: 85%; margin-bottom: 0;}




.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

ul.social-button-syncer li { float: left;
margin: 0 6px 12px 0;}



img.cc { width: 100%;
margin-bottom: 0px;
padding: 0px;}


@media screen and (min-width : 768px) {




hgroup {
text-align: left;
padding-left: 20px;}

hgroup div {
height: 96px;
}

hgroup div h1,
hgroup div h2 {
float: left;
}

hgroup div h2 {
margin-left: 24px;
padding-top: 8px;
}

nav {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fff', endColorstr = '#ccc');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fff', endColorstr = '#ccc')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #fff, #ccc);
background-image: -ms-linear-gradient(top, #fff, #ccc);
background-image: -o-linear-gradient(top, #fff, #ccc);
background-image: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: -webkit-linear-gradient(top, #fff, #ccc);
background-image: linear-gradient(top, #fff, #ccc);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
}



nav ul {
width: 93.75%;
margin: 0 auto;}

nav ul li { width: 16.6666%; float: left;}


#contents {
overflow: hidden;
width: 93.75%;
text-align: left;} /* 960/1024 */
#contents #main,
#contents #sub {
float: left;
margin: 0 1.041666667%;} /* 10/960 */


#contents #main {width: 64.583333333%;} /* 620/960 */
#contents #sub {width: 31.25%;} /* 300/960 */

aside p {padding: 0 10px;}

.room div { width: 50% ;}

#room div { width: 50%; float: left; text-align: center;}
#room div img {width: 95%;}

/* footer {
width: 940px;
margin: 0 auto;} */

}