@charset "utf-8";

/*reset
--------------------------------------------------*/

body {
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  line-height:1.6;
  font-size:14px;
  color:#231815;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-style:normal;
    font-weight: normal;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{
    overflow-y: scroll;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
p{
  line-height:1.6;
}
input, textarea{
	margin: 0;
	padding: 0;
}
ol, ul{
    list-style:none;
}
table{
    border-collapse: collapse; 
    border-spacing:0;
}
caption, th{
    text-align: left;
}

a:link{
  color: #231815;
}
.cf {zoom:1;}
.cf:after {
  content:"";
  display:block;
  clear:both;
}

/*layout
--------------------------------------------------*/
#wrapper{
  margin:0 auto;
  width:960px;
}
h2{
  font-size:1.5em;
  color:#6A3906;
  font-weight: bolder;
}
#top_header{
  margin:0 46px 120px;
  overflow:hidden;
  width:990px;
}

section{
  margin:0 auto 50px;
  width:960px;
}
section h1{
  clear:both;
}

section dl{
  margin:0;
}
.box{
  margin:0 30px 30px;
  }

.grade{
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  -webkit-box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  border:2px solid #E47F12;
  background: #efce9c;
  background: -moz-linear-gradient(top, #efce9c 0%, #e78d27 43%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efce9c), color-stop(43%,#e78d27));
  background: -webkit-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -o-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -ms-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: linear-gradient(to bottom, #efce9c 0%,#e78d27 43%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efce9c', endColorstr='#e78d27',GradientType=0 );
}
.ulgrade li{
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  -webkit-box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  border:2px solid #E47F12;
  background: #efce9c;
  background: -moz-linear-gradient(top, #efce9c 0%, #e78d27 43%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efce9c), color-stop(43%,#e78d27));
  background: -webkit-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -o-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -ms-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: linear-gradient(to bottom, #efce9c 0%,#e78d27 43%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efce9c', endColorstr='#e78d27',GradientType=0 );
}

.grade a{
  color:#fff;
  font-weight: bold;
  text-decoration:none;
}

/*top ----------------*/
#top{
  min-height:680px;
  margin:0px auto;
  width:100%;
  min-width: 960px;
  background:url(img/skyback.jpg) no-repeat center 0px;
  position: relative;
}

#top h1{
 height:380px;
 text-align: center;
 width:960px;
 margin:0 auto;
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 display: block;
}
#top h2{
 height:85px;
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 display: block;
}

#top p{
  color:#333;
  font-size:1em;
  margin:0 0 50px;
}
#top nav.mainnav{
  background-color:#EF8200;
  width:100%;
  height:90px;
  top:-10px;
  z-index:500;
}
#top nav.mainnav ul{
  width:960px;
  margin:0 auto;
  background:url(img/sprite.png) no-repeat 0 20px;
  height:90px;
}
.sub .topbg{
  /*height:510px;*/
}
.topbg{
  /*eight:470px;*/
}
#top nav.mainnav ul li{
  float:left;
  margin:0 3px 0 0;
  width:134px;
}

#top nav.mainnav ul li a{
  display: block;
  width:100%;
  height:90px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#top nav.mainnav ul li a:hover{
  background:url(img/sprite.png) 0 15px;
  background-color: #8C6239;
  background-repeat:no-repeat;
}
#top nav.mainnav ul li.kikan a:hover{background-position:-0px 20px;}
#top nav.mainnav ul li.frow a:hover{background-position:-137px 20px;}
#top nav.mainnav ul li.rent a:hover{background-position:-274px 20px;}
#top nav.mainnav ul li.spot a:hover{background-position:-411px 20px;}
#top nav.mainnav ul li.maps a:hover{background-position:-548px 20px;}
#top nav.mainnav ul li.offer a:hover{background-position:-685px 20px;}
#top nav.mainnav ul li.info a:hover{background-position:-822px 20px;}

#top .firsttext{
  padding:20px;
  width:890px;
  margin:25px auto;
  background:#fff;
  background:rgba(255,255,255,0.7);
  border-radius:5px;
}
#top a:link{
  color:#231815;
  text-decoration: none;
}
#top a:hover{
  color:#FFF;
}

#map_canvas{
width:900px;
height:400px;
margin:0 0 20px;
}
#map_canvas img{
  float:right;
}
#map_canvas h3 a{
  font-weight: bolder;
  color: #EF8200;
  font-size:1.2em;
}
#map_canvas h3 a:hover{
  color:#EF8200;
  text-decoration: underline;
}
#wrapper section{
  background:url(img/sech1back.jpg) no-repeat top center;
}
#wrapper section h1{
  width:960px;
  height:46px;
  margin:0 0 35px;
  text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   display: block;
   border-top:solid 4px #EF8200;
}

#kikan h1{background:url(img/sprite.png) 0 -205px;}

#kikan .box ul li{
  float:left;
  margin:0 5px 0 0;
}
#joken{
  position:relative;
}
#joken h1{background:url(img/sprite.png) 0 -159px;}
#joken ul li{
  list-style-type: disc;
  list-style-position: inside;
}
#joken .box span{
  font-weight: bolder;
}
#joken .box span.probe{
  display:none;
  position: absolute;
  width:300px;
  padding:10px;
  background:#fff;
  border:solid 1px #0068B7;
}
#joken .box span.close{
  display: block;
  font-size:200%;
  font-weight: normal;
  text-align:right;
}
#joken .box span.probe .grade{
  display: block;
  color:#fff;
  margin:10px 0 0;
  text-align: center;
  background:url('img/sprite_2.png') no-repeat scroll -513px -195px #E47F11;
}

#frow h1{background:url(img/sprite.png) 0 -255px;}
#frow .box{
  margin:0 0px;
  width:960px;
}



/*new frow
-----------------------------------------*/
#frow h2{
  font-size:200%;
  color:#8DC21F;
  padding:0 0 10px 60px;
  clear:both;
  background:url(img/sprite_2.png) no-repeat -160px -40px;
}
#frow h2.syupatsu{
  padding:5px;
  width:220px;
  background:#8DC21F;
  margin:0 0 10px 0px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
}
#frow h2.syupatsu span{
  color:#fff;
  background:url('img/sprite_2.png') no-repeat scroll -180px -331px transparent;
  display: block;
  padding:0 0 0 60px;
  font-weight: bold;
}


#frow .box .flowbox1,#frow .box .flowbox2,#frow .box .flowbox3,
#frow .box .flowbox4,#frow .box .flowbox5,#frow .box .flowbox6,
#frow .box .flowbox7,#frow .box .flowbox8{
  background-image:url(img/sprite_2.png);
  background-repeat:none;
  border-left:dotted 1px #231815;
  width:154px;
  height:154px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  float:left;
  margin:0px 0px 10px 25px;
  padding:0 0 0 30px
}
#frow .box .flowbox1{background-position:-670px 0px;}
#frow .box .flowbox3{background-position:-290px -160px;height:260px;}
#frow .box .flowbox4{background-position:29px -155px;}
#frow .box .flowbox5{background-position:30px -330px;height:190px;background-repeat:no-repeat;}
#frow .box .flowbox6{background-position:153px -154px;}
#frow .box .flowbox7{background-position:30px -160px;}
#frow .box .flowbox8{background-position:30px 155px;}

#frow .box .fr{
  float: right;
  width: 710px;
}
#frow .box .fr ul{
  margin:0;
}
#frow .box .fr ul.link{
  clear:both;
  overflow:hidden;
  padding:0 10px 0 0;
  margin:0;
}
#frow .box .fr li.grade{
  margin:0 10px 10px 0;
  padding:0 0;
  float: left;
}
#frow .box .fr li.grade a{
  height:100%;
  display: block;
  text-align: center;
  font-size:120%;
  padding: 10px 10px 10px 25px;
  background:url('img/sprite_2.png') no-repeat scroll -593px -184px transparent;
}
#frow .box .fr li.grade a:hover{
  background:url('img/sprite_2.png') no-repeat scroll -593px -184px #E47F11;

}

#frow .box dl.attention{
  border:2px solid #8DC21F;
  padding:10px;
  margin:0px 0 30px;
  border-radius:5px;
  width:670px;
  position: relative;
}
#frow .box dl.attention dt{
  background:url('img/sprite_2.png') no-repeat scroll -450px -2px transparent;
  height:30px;
  width:30px;
  position: absolute;
  left:-15px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#frow .box dl.attention dd{
  margin:0px 0px 0px 10px;
  float: none;
  width:600px;
}
#frow .box .mobilephone{
  border:4px solid #F6D0A6;
  padding:10px;
  margin:0px 0 10px;
  border-radius:5px;
}
#frow .box .mobilephone h3{
  color:#EF8200;
  font-weight: bold;
}
#frow .box .app{
  float: right;
}
#frow .box .app li{
  float: left;
  margin:0 10px;

}

/*old frow
-----------------------------------------*/
#frow dl{
  width:310px;
  float:left;
  font-size:0.90em;
  line-height:1.4em;
  margin:0 10px 30px 0;
}
#frow dl dt{
  width:150px;
  float:right;
  font-size:1.1em;
  font-weight:bold;
  line-height:1.4em;
  color:#8DC21F;
}
#frow dl dt span{
  font-size:3em;
  display: block;
  float:left;
  height:45px;
  line-height: 1.1;
  margin-right:5px;
}
#frow dl dd{
  width:150px;
  float:right;
}
#frow dl dd span{
  font-weight: bold;
}

#frow dl dd.flowbox1,#frow dl dd.flowbox2,#frow dl dd.flowbox3,
#frow dl dd.flowbox4,#frow dl dd.flowbox5,#frow dl dd.flowbox6,
#frow dl dd.flowbox7,#frow dl dd.flowbox8{
  background-image:url(img/spfrow.png);
  width:154px;
  height:154px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  float:left;
}

#frow dl dd.flowbox1{
  background-position:0 0;
}
#frow dl dd.flowbox2{
  background-position:-155px 0;
}
#frow dl dd .moniter a{
  background-image:url(img/sprite.png);
  background-position:0px -720px;
    text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width:130px;
  height:75px;
}
#frow dl dd.flowbox3{background-position:153px 0;}
#frow dl dd.flowbox4{background-position:-1px -155px;}
#frow dl dd.flowbox5{background-position:-155px -155px;}
#frow dl dd.flowbox6{background-position:153px -154px;}
#frow dl dd.flowbox7{background-position:-1px 155px;}
#frow dl dd.flowbox8{background-position:-155px 155px;}

#frow dl dd p a{
  font-size:1em;
  color:#fff;
  background:#EF8200;
  display: block;
  text-align: center;
  padding:10px 3px;
  text-decoration: none;
  font-weight: bold;
  margin:10px 0 0;
  border-radius: 10px;
}
#frow dl dd p a:hover{
  background:#946134;
}
#cacheback h1{background:url(img/sprite.png) 0 -305px;}

#cacheback table{
  width:900px;
  margin:0 auto;
}

section#cacheback th{
  background-color:#886138;
  color:#fff;
  font-size:1.2em;
  font-weight: bold;
}
#cacheback th,#cacheback td{
  border:2px solid #6A3906;
  text-align: center;
  vertical-align: middle;
  color:#804F21;
  padding:5px;
}
#cacheback td.yen{
  color:#EF8200;
  font-weight:bolder;
}
#cacheback td.yen span{
  font-size:140%;
}

#spot h1{background:url(img/sprite.png) 0 -355px;}

#spot .bottom{
  width:896px;
  height:64px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  -webkit-box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  border:2px solid #E47F12;
}
#spot .bottom a{
  background-image:url(img/sprite.png);
  background-position:-58px -555px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width:896px;
  height:64px;
}
#spot .bottom a:hover{
  background-color:#8C6239;
  background-image:url(img/sprite.png);
  background-position:-58px -625px;
}


#maps h1{background:url(img/sprite.png) no-repeat -135px -731px;}
#maps li{
  list-style-type: disc;
  list-style-position: inside;
}


#rent h1{background:url(img/sprite.png) no-repeat 0 -405px;}
#rent h2 a:link{
  color:#6A3906;
  text-decoration: none;
  font-weight: bolder;
}
#rent h2 a:visited{
    color:#6A3906;
}
#rent h2 a:hover{
  color:#6A3906;
  text-decoration: underline;
}
#rent h2{
  clear:both;
  float:left;
width: 500px;
}
#rent dl{
  margin:0 0 15px;
  overflow: hidden;
  float: left;
}
#rent dl dt{
  float:left;
  margin:3px 5px 0 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width:30px;
  height:16px;
}

#rent dl dt.tel{
  background:url(img/sprite.png) left -559px;
}
#rent dl dt.fax{
  background:url(img/sprite.png) left -580px;
}

#rent dl dt.address{
  background:url(img/sprite.png) left -600px;
  width:40px;
}

#rent dl dd{
  float:left;
  margin:0 25px 0 0;
}
#rent .ulgrade{
  float:right;
}
#rent .ulgrade li{
font-size: 120%;
margin: 0 10px 10px 0;

float: left;
}
#rent .ulgrade li a{
  color: #fff;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 10px 10px 10px 25px;
  font-weight: bold;
  background:url('img/sprite_2.png') no-repeat scroll -593px -184px; 
  }
#rent .ulgrade li a:hover{
  background:url('img/sprite_2.png') no-repeat scroll -593px -184px #8C6239; 

}
#frow .box .fr li.grade a:hover{
  background:url('img/sprite_2.png') no-repeat scroll -593px -184px #8C6239;

}
#maps p{
  margin:0 0 10px;
}

#offer{
  margin:0px;
}
#offer .fl{
  float: left;
}
#offer h1{background:url(img/sprite.png) 0 -455px;}
#offer .bold{
  font-weight:bold;
}
#offer .offerbox{
  float:right;
  width:520px;
  height:215px;
  border:solid #F6D0A6 3px;
  border-radius:5px;
  text-indent: 100%;
  white-space: nowrap;
  display: block;
  position: relative;
  margin:20px 0 50px;
  top:20px;
}
#offer .offerbox .omoishikomi{
  background:url(img/sprite_2.png) -160px 265px;
  height:75px;
  border-bottom:solid 1px #6A3906;
  margin:0 5px;
    text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#offer .offerbox ul li{
  height:50px;
  margin:10px;
    border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  -webkit-box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  border:2px solid #E47F12;
  background: #efce9c;
  background: -moz-linear-gradient(top, #efce9c 0%, #e78d27 43%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efce9c), color-stop(43%,#e78d27));
  background: -webkit-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -o-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -ms-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: linear-gradient(to bottom, #efce9c 0%,#e78d27 43%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efce9c', endColorstr='#e78d27',GradientType=0 );
}
#offer .offerbox ul li:hover{
  background:#8C6239; 
}
#offer .offerbox .day3 {
  position: absolute;
  background:url(img/sprite_2.png) -175px -481px;
  top: -45px;
  left: 0;
  width:520px;
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#offer .offerbox .subtext {
position: absolute;
top: -35px;
left: 250px;
text-indent: 0;
white-space: normal;
}
#offer .offerbox .tel a{
  background:url('img/sprite_2.png') no-repeat scroll -163px -679px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height:50px;
}
#offer .offerbox .mail a{
  background:url('img/sprite_2.png') no-repeat scroll -162px -737px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height:50px;
  display: block;
}
#info h1{background:url(img/sprite.png) 0 -505px;}

#gotop{
  position: fixed;
  bottom:5%;
  right:5%;
  
}
#gotop a{
  width:50px;
  height:50px;
  background:url('img/sprite_2.png') no-repeat scroll -600px -400px;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

}
/*Contact -----------*/
#copy{
  background:#8C6239;
  height:160px;
  width:100%;
  min-width:960px;
}
#copy p{
  background:#8C6239;
  margin:0 auto;
  width:960px;
  height:50px;
  padding:30px 0 15px;
  text-align:center;
  color:#fff;
}
/*Subpage
-------------------------------------------------------*/

.sub #top{
  height:1300px;
}
.sub nav{
  width:962px;
  margin:0 auto 40px;
}
.sub #top section {
  background:url(img/sech1back.jpg) no-repeat top center;
}

#top p.bigmap,#wrapper p.bigmap{
  width:100%;
  margin:0;
  text-align:right;
}
#top p.bigmap a,#wrapper p.bigmap a{
  color:#EF8200;
  text-decoration: none;
}
.sub nav.areaanavi li{
  width:175px;
  float:left;
  margin:2px;
  list-style: none;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -o-border-radius:5px;
  -ms-border-radius:5px;
  -webkit-box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  box-shadow: 0px 3px 6px rgba(30,30,30,0.4);
  border:2px solid #E47F12;
  background: #efce9c;
  background: -moz-linear-gradient(top, #efce9c 0%, #e78d27 43%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efce9c), color-stop(43%,#e78d27));
  background: -webkit-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -o-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: -ms-linear-gradient(top, #efce9c 0%,#e78d27 43%);
  background: linear-gradient(to bottom, #efce9c 0%,#e78d27 43%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efce9c', endColorstr='#e78d27',GradientType=0 );
}

.sub nav.areaanavi li a{
  padding:5px 0;
}

.sub #top nav.areaanavi li a:link,
.sub #top nav.areaanavi li a:visited{
  display: block;
  color:#fff;
  font-size:1.5em;
  font-weight: bolder;
  text-align: center;
  text-decoration: none;
}
.sub #top nav.areaanavi li a:hover{
  background:#8C6239; 
}
.sub #top nav.areaanavi li a span{
  background:url('img/sprite_2.png') no-repeat scroll -580px -190px transparent; 
  padding:0px 30px 0px 45px;
  font-weight: bolder;
}
.sub #top h1.point{
  width:960px;
  height:46px;
  background:url(img/sprite.png) 0 -355px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  margin:0 auto 20px;
  border-top:solid 4px #EF8200;

}
.sub h2{
  background:#F5D9BB;
  width:950px;
  border-top:solid #EF8200 7px;
  padding:8px 0 8px 10px;
  margin:0 auto 40px;

}
#point div{
  width:900px;
  margin:0 auto 40px;
  overflow: hidden;
}
#point div h3{
  width:590px;
  color:#EF8200;
  font-size:2em;
  margin:0 0 10px;
  font-weight:bolder;
  border-bottom:dotted 2px #231815;
  float:right;
}
#point div p{
  float:right;
  width:590px;
  margin:0 0 20px;
}
#point div dl{
  width:590px;
  float:right;
}
#point div dt{
  float:left;
  width:58px;
  height:17px;
  margin:0 7px 0 0;
  background-image:url(img/sprite.png);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  clear:both;
}
#point div dd{
  float:left;
}
#point div dt.adress{
  background-position:left -620px;
}
#point div dt.tel{
  background-position:left -640px;
}
#point div dt.aaaaaa{
  background-position:left -660px;
}
#point div dt.url{
  background-position:left -680px;
}
#point div dt.yasumi{
  background-position:left -699px;
}
#point div dt.time{
  background-position:-130px -700px;
}
#point div dt.mapcode{
  background-position:-65px 95px;
}
#point div.pointimg{
  width:290px;
}

#top .endtext{
  text-align: center;
  width:100%;
  margin:50px 0 60px;
}
/*smartphone
-------------------------------------------------*/
@media screen and (min-width:321px) and (max-width:800px) {
  body{
    line-height:1.6;
    font-size:14px;
    font-size: 1.0rem;
  }
  #wrapper,#top{
    width:100%;
  }

  section{
    width:100%;
  }


  /*top ----------------*/
  #top{
    min-width:100%;
    background-size:160% auto;
    min-height:710px;
  }
  #top h1 {
    height: 260px;
    width:100%;
  }
  #top p{
    font-size: 1.4rem;
  }
  .topbg{
    height:auto;
  }
  #top nav.mainnav{
    height: auto;
  }
  #top nav.mainnav ul{
    width:100%;
    background:#EF8200;
    height:auto;
  }
  #top nav.mainnav ul li a{
    background:url(img/sprite.png) no-repeat 0 15px;
    display: block;
    width:100%;
    height:90px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
  }
  #top nav.mainnav ul li a:hover{
    background:url(img/sprite.png) 0 15px;
    background-color: #8C6239;
    background-repeat:no-repeat;
  }
  #top nav.mainnav ul li.kikan a{background-position:-0px 20px;}
  #top nav.mainnav ul li.frow a{background-position:-137px 20px;}
  #top nav.mainnav ul li.rent a{background-position:-274px 20px;}
  #top nav.mainnav ul li.spot a{background-position:-411px 20px;}
  #top nav.mainnav ul li.maps a{background-position:-548px 20px;}
  #top nav.mainnav ul li.offer a{background-position:-685px 20px;}
  #top nav.mainnav ul li.info a{background-position:-822px 20px;}

  #top .firsttext{
    width:90%;
    padding:0 5%;
  }
  #map_canvas{
    width:100%;
  }
  #map_canvas h3 a{
    font-size: 1.0rem;
  }
  #wrapper section h1{
    width:100%;
  }
  #frow h1{background:url(img/sprite.png) 0 -255px;}
  #frow .box{
    width:90%;
    margin:0 5%;
  }
  #frow h2{
    margin:20px 0 0;
  }
  #frow .box .fr {
    width:100%;
  }
  #joken .box span.probe{
    width:400px;
  }
  #frow .box .flowbox1, #frow .box .flowbox2, #frow .box .flowbox3, 
  #frow .box .flowbox4, #frow .box .flowbox5, #frow .box .flowbox6,
  #frow .box .flowbox7, #frow .box .flowbox8 {
    display: none;
  }
  #wrapper #frow dl{
    float:none;
  }
  #frow .box .fr{
    float:none;
  }
  #wrapper #frow dl {
    float:none;
    width:auto;
  }
  #frow .box dl.attention dd {
    width:auto;
  }
  #cacheback table{
    width:100%;
  }
  #cacheback td.yen span{
    font-size: 1.8rem;
  }
  section#cacheback th{
    font-size: 1.4rem;
  }
  #spot .bottom{
    width:100%;
  }
  #spot .bottom a{
    background-position:-200px -555px;
    width:100%;
  }
  #spot .bottom a:hover{
    background-position:-200px -625px;
  }

  #maps h1{background:url(img/sprite.png) no-repeat -135px -731px;}
  #rent dl dt{
    clear:both;
  }
  #offer .fl,#offer .offerbox {
    float:none;
    width:100%;
    margin:0 auto 50px;
  }
  #offer p.tel img{
  width:90%;
  }
  /*Contact -----------*/
  #copy{
    min-width:100%;
  }

  #copy p{
    width:100%;
  }
  /*Subpage
  -------------------------------------------------------*/

  .sub #top{
    height:1540px;
  }
  .sub nav{
    width:620px;
  }
  .sub #top nav.areaanavi li a:link,
  .sub #top nav.areaanavi li a:visited{
    font-size: 1.5rem;
  }

  .sub #top h1.point{
    width:100%;
  }
  .sub h2{
    width:100%;
  }
  #point div{
    width:90%;
  }
  #point div h3,#point div p,#point div dl{
    width:100%;
    float: none;
  }
  #point div h3{
    font-size: 2.0rem;
  }
  #point div dt.yasumi{
    background-position:left 95px;
  }
  #point div dt.time{
    background-position:-129px -699px;
  }
  #point div dt.mapcode{
    background-position:-65px -700px;
  }
  #point div.pointimg{
    clear:both;
    margin:10px 0 0;
  }
}


@media screen and (max-width:320px) {
  body{
    line-height:1.6;
    font-size:14px;
    font-size: 0.9rem;
  }
  #wrapper,#top{
    min-width:320px;
    width:100%;

  }

  section{
    width:100%;
  }


  /*top ----------------*/
  #top{

    min-width:320px;
    width:100%;
    background-size:470px auto;
    min-height:560px;
  }
  #top h1 {
    height: 140px;
    width:100%;
  }
  .topbg{
    height:240px;
  }
  .box{
    margin:0 10px 10px;
  }
  #top p{
    font-size: 1.0rem;
  }
  #top nav.mainnav{
    height:100px;
  }
  #top nav.mainnav ul{
    width:310px;
    background:url(img/sprite.png) no-repeat 0 10px;
    background-size: 530px auto;
    margin:0 10px;
    height:100px;
  }
  #top nav.mainnav ul li a:hover{
    background:url(img/sprite.png) no-repeat 0 10px;
    background-size: 530px auto;
    background-color: #8C6239;
    background-repeat:no-repeat;
  }
  #top nav.mainnav ul li.kikan a:hover{background-position:-0px 10px;}
  #top nav.mainnav ul li.frow a:hover{background-position:-76px 10px;}
  #top nav.mainnav ul li.rent a:hover{background-position:-152px 10px;}
  #top nav.mainnav ul li.spot a:hover{background-position:-228px 10px ;}
  #top nav.mainnav ul li.maps a:hover{background-position:-302px 10px;}
  #top nav.mainnav ul li.offer a:hover{background-position:-378px 7px;}
  #top nav.mainnav ul li.info a:hover{background-position:-454px 7px;}
  #top nav.mainnav ul li a {
  display: block;
  width: 100%;
  height: 50px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  }
  #kikan h1{
    background-position:0 -180px;
  }
  #joken h1{
    background-position:0 -140px;
  }
  #cacheback h1{
    background-position:0 -270px; 
  }
  #rent h1 {
  background-position:0 -360px;
}
#spot h1 {
background-position:0 -315px;
}
#offer h1 {
background: url(img/sprite.png) 0 -404px;
}
#wrapper #maps h1 {
background: url(img/sprite.png) no-repeat -80px -405px;
background-size: 540px;
height:30px;
}
#info h1 {
background: url(img/sprite.png) 0 -450px;
}

  #top .firsttext{
    width:90%;
    padding:0 5%;
  }
  #top nav.mainnav ul li {
    float: left;
    margin: 0 1px 0 0;
    width: 75px;
  }
  #kikan .box ul li img{
    width:290px;
  }

  #map_canvas{
    width:100%;
  }
  #map_canvas h3 a{
    font-size: 1.0rem;
  }
  #wrapper section h1{
    background-size:860px;
    width:100%;
  }
  #frow h1{background:url(img/sprite.png) 0 -225px;}
  #frow .box{
    width:90%;
    margin:0 5%;
  }
  #frow h2{
    margin:20px 0 0;
  }
  #frow .box .fr {
    width:100%;
  }
  #joken .box span.probe{
    width:400px;
  }
  #frow .box .flowbox1, #frow .box .flowbox2, #frow .box .flowbox3, 
  #frow .box .flowbox4, #frow .box .flowbox5, #frow .box .flowbox6,
  #frow .box .flowbox7, #frow .box .flowbox8 {
    display: none;
  }
  #wrapper #frow dl{
    float:none;
  }
  #frow .box .fr{
    float:none;
  }
  #wrapper #frow dl {
    float:none;
    width:auto;
  }
  #frow .box dl.attention dd {
    width:auto;
  }
  #cacheback table{
    width:100%;
  }
  #cacheback td.yen span{
    font-size: 1.8rem;
  }
  section#cacheback th{
    font-size: 1.4rem;
  }
  #spot .bottom{
    width:100%;
    height:35px;
  }
  #spot .bottom a{
    background-position:-80px -265px;
    background-size:460px;
    width:100%;
    height:35px;
  }

  #spot .bottom a:hover{
    background-position:-80px -300px;
  }




  #rent h2 {
  font-size:1.1em;
  font-weight: bolder;
  }
  #rent dl dt{
    clear:both;
  }
  #rent h2{
    width:100%;
  }
  #offer .offerbox .omoishikomi {
    background: url(img/sprite_2.png) -90px 665px;
    height: 75px;
    border-bottom: solid 1px #6A3906;
    margin: 0 5px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-size: 430px auto;
  }
  #offer .fl,#offer .offerbox {
    float:none;
    width:100%;
    margin:0 auto 50px;
  }
  #offer .offerbox ul li {
    height: 40px;
    margin: 10px;
  }
  #offer .offerbox .tel a {
    background: url('img/sprite_2.png') no-repeat scroll -90px -382px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    height: 41px;
    background-size: 400px auto;
  }
  #offer .offerbox .mail a {
    background: url('img/sprite_2.png') no-repeat scroll -90px -416px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    height: 41px;
    background-size: 400px auto;
  }
  #offer p.tel img{
  width:90%;
  }
  #offer .offerbox .subtext{
    left:0;
    bottom:0;
    height:20px;
  }
  #offer .offerbox .day3{
    top:-80px;
  }
  #offer .offerbox {
    top:30px;
  }
  /*Contact -----------*/
  #copy{
    min-width:320px;
    width:100%;
  }

  #copy p{
    width:100%;
  }
  /*Subpage
  -------------------------------------------------------*/

  .sub #top{
    height:1540px;
  }
  .sub nav{
    width:620px;
  }
  .sub #top nav.areaanavi li a:link,
  .sub #top nav.areaanavi li a:visited{
    font-size: 1.5rem;
  }

  .sub #top h1.point{
    width:100%;
  }
  .sub h2{
    width:100%;
  }
  #point div{
    width:90%;
  }
  #point div h3,#point div p,#point div dl{
    width:100%;
    float: none;
  }
  #point div h3{
    font-size: 2.0rem;
  }
  #point div dt.yasumi{
    background-position:left 95px;
  }
  #point div dt.time{
    background-position:-129px -699px;
  }
  #point div dt.mapcode{
    background-position:-65px -700px;
  }
  #point div.pointimg{
    clear:both;
    margin:10px 0 0;
  }
}