/*===============================================
●smart.css  画面の横幅が480pxまで
===============================================*/
@media screen and (max-width:640px){
#main p { padding-top: 0.5em; padding-right: 10px; padding-bottom: 1em; padding-left: 10px;}
#arealink {
	clear: both;
	text-align: center;
	border-top: 1px solid #bfbfbf;
	padding-top: 1em;
	width: 100%;
}
#grid {
	width: 100%;
	clear: both;
	float: left;
	margin-bottom: 5px;
}
#grid ul {

}
#grid li {
	list-style: none;
	float: left;
	padding: 6px;
}
h1 {display: none;}
h2{
	font-size: 123.1%;
	font-weight: bold;
	margin-top: 0;
	margin-right: 0;
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1.7em;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #C2191F;
	color: #000;
	margin-bottom: 0.5em;
	text-indent: 5px;
	float: left;
	width: 98%;
	clear: both;
}
h2:before{
    content: "";
    position: absolute;
    background: #d48789;
    top: 0;
    left: 0.6em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
h2:after{
    content: "";
    position: absolute;
    background:#d26466;
    top: 1.0em;
    left: 0.2em;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}
#h2-sub {
	font-size: 10px;
	padding-left: 25px;
	clear: both;
}
#compa {
	background-color: #FFFFFF;
	margin-top: 15px;
	padding-bottom: 10px;
	color: #000;
	width: 100%;
	clear: both;
	float: left;
	height: 100%;
}
#compa .img {
	width: 100px;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	float: right;
}
#compa ul {
	color: #666666;
	padding-top: 3px;
	padding-right: 1px;
	background-color: #f7f7f7;
	padding-bottom: 0px;
}
#compa li {
	display: block;
	margin: 0;
	border: 1px solid #fff;
	background-color: #CCC;
	font-weight: bold;
	padding: 10px;
	clear: left;
}
#compa li a{
	text-decoration: none;
	color: #000;
}
#pref{
	clear: both;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
}
label {
	color: #000;
	padding: 10px;
	display: block;
	margin: 0;
	border: 1px solid #fff;
	background-color: #CCC;
	font-weight: bold;
}
#pref .prefN---{
    height: 0;
    overflow: hidden;
    transition: height .2s;
    -webkit-transition: height .2s;
    -moz-transition: height .2s;
}
input[type="checkbox"].on-off{
    display: none;
}
#pref ul {
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	padding: 0;
	list-style: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 7px;
}
#pref li {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 20px;
}
#pref li a {
font-weight: bold;
}
input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}
input[type="checkbox"].on-off:checked + ul{
	height: auto;
}
#mokuteki {
	background-color: #FFFFFF;
	margin-top: 15px;
	width: 100%;
	height: 100%;
	float: left;
	padding-bottom: 10px;
	color: #000;
	clear: both;
}
#chiku {
	background-color: #FFFFFF;
	margin-top: 15px;
	padding-bottom: 10px;
	color: #000;
	width: 100%;
	clear: both;
	float: left;
	height: 100%;
}
#chiku ul {
	color: #666666;
	padding-top: 3px;
	padding-right: 1px;
	background-color: #f7f7f7;
	padding-bottom: 0px;
}
#chiku li {
	display: block;
	margin: 0;
	border: 1px solid #fff;
	background-color: #CCC;
	font-weight: bold;
	padding: 10px;
}
#chiku li a{
	text-decoration: none;
	color: #000;
}
#mokuteki .img {
	float: right;
	width: 120px;
	background-position: right;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#mokuteki ul {
	color: #666666;
	padding-top: 3px;
	padding-right: 1px;
	background-color: #f7f7f7;
	width: auto;
	padding-bottom: 0px;
	clear: left;
}
#mokuteki li {
	display: block;
	margin: 0;
	border: 1px solid #fff;
	background-color: #CCC;
	font-weight: bold;
	padding: 10px;
}
#mokuteki li a{
	text-decoration: none;
	color: #000;
}
#rankL {
	margin-top: 15px;
	width: 100%;
	float: left;
	clear: both;
}
#rankL .boxBorder {
	width: 335px;
	border: 1px solid #dcdcdc;
	margin-bottom: 10px;
	background-image: url(../images/hotel_bg.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-right: 10px;
	height: 100px;
	float: left;
	overflow: hidden;
}
#rankL .boxName1 {
	width: 335px;
	padding: 0px;
	float: left;
	clear: both;
}
#rankL .boxPlace1 {
	width: 120px;
	float: left;
	padding: 2px;
	clear: both;
}
#rankL .boxName2 {
	width: 210px;
	font-size: 110%;
	font-weight: bold;
	height: 25px;
	line-height: 13px;
	float: right;
}
#rankL .boxExplain {
	width: 210px;
	font-size: 85%;
	height: 60px;
	line-height: 17px;
	float: right;
}
#rankR {
	margin-top: 15px;
	width: 100%;
	float: left;
	clear: both;
}
#rankR .boxBorder {
	width: 335px;
	border: 1px solid #dcdcdc;
	margin-bottom: 10px;
	background-image: url(../images/hotel_bg.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-right: 5px;
	height: 100px;
	float: left;
	overflow: hidden;
}
#rankR .boxName1 {
	width: 335px;
	padding: 0px;
	float: left;
	clear: both;
}
#rankR .boxPlace1 {
	width: 120px;
	float: left;
	padding: 2px;
	clear: both;
}
#rankR .boxName2 {
	width: 210px;
	font-size: 110%;
	font-weight: bold;
	height: 25px;
	line-height: 13px;
	float: right;
}
#rankR .boxExplain {
	width: 210px;
	font-size: 85%;
	height: 60px;
	line-height: 17px;
	float: right;
}
h3 {
	font-size: 123.1%;
	font-weight: bold;
	margin-top: 0;
	margin-right: 0;
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1.7em;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #C2191F;
	color: #000;
	margin-bottom: 0.5em;
	text-indent: 5px;
	float: left;
	width: 98%;
	clear: both;
}
h3:before{
	content: "";
	position: absolute;
	background: #d48789;
	top: 0;
	left: 0.6em;
	height: 12px;
	width: 12px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}
h3:after{
    content: "";
    position: absolute;
    background:#d26466;
    top: 1.0em;
    left: 0.2em;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}
#sub-a {
	float: left;
	clear: both;
	width: 98%;
	margin-top: 10px;
	margin-bottom: 10px;
}
#sub-a .mid {
	padding: 0px;
	margin: 0px;
	width: 98%;
}
#sub-a .bottom {
	padding-bottom: 15px;
	width: 98%;

}
#sub-a img {
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 6px;
	margin-right: 10px;
	clear: both;
	float: left;
}
#sub-a .rank{
	width: 98%;
	font-weight: bold;
	font-size: 100%;
	line-height: 35px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	width: 98%;
}
#sub-a p { font-size: 77%; line-height: 10px; padding-bottom: 8px; margin-left: 3.5em; margin-bottom: 0px;}
#sub-a .explain {
	padding-bottom: 0px;
	padding-top: 20px;
	line-height: 20px;
	font-size: 93%;
	margin-left: 3px;
}
#sub-b {
	float: left;
	clear: both;
	width: 98%;
}
#sub-b .mid {
	padding: 0px;
	margin: 0px;
	width: 98%;
}
#sub-b .bottom {
	padding-bottom: 15px;

}
#sub-b ul {
	margin: 0px;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 3px;
}
#sub-b li {
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}
#sub-b li A {PADDING-BOTTOM: 4px;PADDING-LEFT: 5px;PADDING-RIGHT: 0px;PADDING-TOP: 3px;display: block;margin: 0px;font-size: 93%;}
#sub-b p {padding: 0.5em 5px 1em;}
#checkpage {
	width: 195px;
	margin-left: 1px;
	margin-right: 2px;
	padding-left: 2px;
	display: none;
}
#sub-b dl.new {
	overflow: auto;
	font-size: 85%;
	float: left;
	margin: 0px;
	clear: both;
	height: 150px;
	width: 98%;
}
#sub-b dl.new dt {font-weight: bold;float: left;margin-left: 3px;margin-top: 1px;margin-bottom: 1px;}
#sub-b dl.new dd {border-bottom: 1px solid #cccccc;clear: left;margin-left: 7px;padding-top: 1px;padding-bottom: 2px;}
#sub-img  {float: left;margin-top: 15px;margin-bottom: 15px;}
}