/*---------------------------------
	toppage
-----------------------------------*/

/* layout */

.contents {
	width:980px;
	margin:0 auto;
	zoom:1;
	overflow:hidden;
	font-size:14px;
}
.main {float:left; width:660px;}
.side {float:right; width:300px; padding-left:20px;}

/* column */
.column {clear:both;zoom:1; overflow:hidden; margin-top:20px; background:#fff;}
.column .body {zoom:1; overflow:hidden;}
.column .left {float:left; width:320px;}
.column .right {float:right; width:320px;}

.two-column li {zoom:1; overflow:hidden;}
.two-column li ul.first { border-bottom:1px solid #ccc;zoom:1;overflow:hidden; padding-bottom:10px; margin-bottom:10px;border-bottom:1px dotted #ccc;}
.two-column li ul li {width:300px; float:left;}
.two-column li ul li.first { margin-right:8px; padding-right:8px; border-right:1px dotted #ccc;}
.two-column .photo {width:90px; height:68px; overflow:hidden; float:left; margin-right:5px;}
.two-column .photo img { width:100px;}

/* .top-slider  */

.top-slider {
	margin-right:-10px;
	overflow: hidden;
}
.top-slider .item {
	margin-right: 10px;
}

.top-slider .item img {
	width: 100%;
	margin-bottom: 10px;
}

/* slides */

#slides {margin-bottom:10px; position:relative; background:#eee;}

.slides_container {
	width:300px;
	height:225px;
	display:none;
}

.slick-arrow {
	background: #000;
	width: 10px;
}

.slides_container div {
	width:300px;
	height:225px;
	display:block;
}

.slides_container div img {width:300px; height:225px;}

/* Pagination */

.pagination {
	position:absolute;
	margin:0 auto 0;
	width:100px;
	top:10px;
	left:220px;
	z-index:500;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../img/top/slider/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/* slider
--------------------------------------------------------- */
.slideFrame {
	position: relative;
	overflow: hidden;
	overflow-x: hidden;
	width: 100%;
	height: 200px;
	background: #eee;
	border: 5px solid #eee;
}

.slideGuide {
	width: 150%;
	height: 100%;
}

.slideCell {
	display: block;
	float: left;
	margin-right: 5px;
	width: 300px;
	height: 200px;
	background: #FFF;
	color: #333;
}

.slideCell img {width: 300px; height:200px;}

/* controller */
.slideCtrl {
	display: none;
	position: absolute;
	top: 0;
	width: 30px;
	height: 100%;
	background: #FF0066 url(/img/top/slider/hatch.png);
	color: #fff;
	font-size: 12px;
	text-align: center;
	cursor: default;
	opacity: 0.8;
	-moz-opacity: 0.8;
	-webkit-opacity: 0.8;
	filter: alpha(opacity=80);
	background: #FF0066 url(/img/top/slider/hatch.png);
	padding-top: 80px;
}

.slideCtrl.left { left: -5px; }
.slideCtrl.right { right: -5px; }

/* heading */

.side h3 {clear:both;background:url(../img/title/title_border_pink.gif) center left no-repeat; padding-left:13px;font-weight:bold; font-size:16px; margin-bottom:10px}
.side h3 a {font-weight:bold;}

/* profile */

#profile li {font-size:14px; background: url(../img/icon/check.gif) no-repeat left center; padding-left:30px; line-height:180%;}
#profile li span {font-weight:bold ; color:#FF0066; font-size:16px;}

/* search */

#search .keyword {
	margin-bottom:10px;
	zoom:1;
	overflow: hidden;
}
#search #SearchKeyword {
	float: left;
	width: 240px;
	margin-right: 8px;
	font-size: 16px;
	line-height: 18px;
}
#search .keyword .submit input {
	float: left;
	padding: 0 !important;
	margin: 0 !important;
	width: 60px;
}
#search ul { margin-bottom:5px;}
#search .left {width: 300px;}
#search .right {width:330px;}
#search .right ul {}
#search .right li {float:left;}
#search .right li a {display:block; padding:3px 7px 3px 0;margin-right: 7px;border-right:1px solid #ddd;font-size:16px;}
#search .right li.last {border-right:none;}
#search .right h4 {
	clear:both;
	padding-left: 10px;
	border-left: 3px solid #FF0066;
	margin-top: 5px;
}
#search .right h4 a {
	color:#333;
}

.onsenlist {clear:both;padding:10px 0 0;}
.onsenlist dl {overflow: hidden;}
.onsenlist dt,.onsenlist dd {margin-bottom: 3px;}
.onsenlist dt {clear: both;float: left;margin-right:10px;width: 80px;font-size: 11.5px;}
.onsenlist dd {float: left;width: 550px;}
.onsenlist dd ul {margin: 0 !important;}
.onsenlist dd li {float: left;}
.onsenlist dd li a {padding:0 10px 0 10px;border-right: 1px solid #ccc;font-size: 14px;}
.onsenlist dd .big a {font-size: 18px;font-weight: bold;}
#search h3 {
clear: both;
background: url(../img/title/title_border_pink.gif) no-repeat left center;
padding-left: 15px;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}

.kodawari { clear:both;margin-right:-10px; zoom:1; overflow:hidden;}
.kodawari li { float:left; width:150px; margin-right:10px;}
.kodawari li a { display:block; font-size:14px; line-height:160%;}
.kodawari li img {width: 100%;margin-bottom: 3px;}

/* sp onsen */

.sp_onsen ul {
	overflow: hidden;
	margin-right: -10px;
}

.sp_onsen ul li {
	float: left;
	margin-right: 10px;
	width: 315px;
}

.sp_onsen ul li img {
	width: 100%;
	margin-bottom: 5px;
}

/* special */

#special ul {zoom:1; overflow:hidden; margin-right:-20px;}
#special ul li { float:left; width:300px; margin:0 20px 10px 0;}
#special ul li img { width:300px; height:85px; margin-bottom:10px;}

/* erea pickup */

#pickup .body {margin-bottom:-10px;zoom:1; overflow:hidden; width:642px;}
#pickup dl {float:left; width:310px;zoom:1; overflow:hidden; margin-bottom:10px;}
#pickup dd li {overflow:hidden; max-height:44px;}
#pickup dd img {width:62px; float:left; margin-right:10px;}
#pickup dd a {display:block;}

#pickup dd li:first-child {max-height:100px;}
#pickup dd li:first-child img {width:120px;}q
#pickup dd li:first-child h4 { font-size:18px; font-weight:bold;}
#pickup dd li:first-child .price {display:block;}

#pickup dt {clear:both;margin-bottom:10px;text-indent:-9999px;}
#pickup dt a { display:block;height:48px;}

.hokkaidou,.kitakantou,.kousinetsu,.toukai,.chugokushikoku {
	margin-right:20px;
}

#pickup dl.hokkaidou dt {background:url(../img/top/pickup_hokkaido.png) no-repeat;}
#pickup dl.touhoku dt {background:url(../img/top/pickup_tohoku.png) no-repeat;}
#pickup dl.kitakantou dt {background:url(../img/top/pickup_kitakanto.png) no-repeat;}
#pickup dl.minamikantou dt {background:url(../img/top/pickup_kanto.png) no-repeat;}
#pickup dl.kousinetsu dt {background:url(../img/top/pickup_kousinetu.png) no-repeat;}
#pickup dl.hokuriku dt {background:url(../img/top/pickup_hokuriku.png) no-repeat;}
#pickup dl.toukai dt {background:url(../img/top/pickup_tokai.png) no-repeat;}
#pickup dl.kinki dt {background:url(../img/top/pickup_kinki.png) no-repeat;}
#pickup dl.chugokushikoku dt {background:url(../img/top/pickup_chugoku.png) no-repeat;}
#pickup dl.kyuusyuu dt {background:url(../img/top/pickup_kyushu.png) no-repeat;}

/* flyer */

#flyer img {width:140px; height:180px; margin-bottom:3px;}
#flyer li {float:left; width:130px; margin-right:10px; font-size:12px;}

/* icon */

.icon {position:relative; padding-left:45px !important;}
.icon-ranking,.icon-kuchikomi,.icon-onsen,.icon-gentei {
position:absolute;
top:5px;
left:5px;
width:30px;
height:30px;
}

	.icon-ranking {background: url(../../img/icon/icon-45-ranking.png) no-repeat;background-size:30px 30px;}
	.icon-kuchikomi {background: url(../../img/icon/icon-45-kuchikomi.png) no-repeat;background-size:30px 30px;}
	.icon-onsen {background: url(../../img/icon/icon-45-onsen.png) no-repeat;background-size:30px 30px;}
	.icon-gentei {background: url(../../img/icon/icon-45-gentei.png) no-repeat;background-size:30px 30px;}

/* blog */

.posts {overflow:hidden;zoom:1;}
.posts li {width:200px; float:left;margin-bottom:20px; margin-right:20px;background:#fff; box-shadow:3px 3px 10px #ccc;}
.posts .title {clear:both;font-size:18px; padding:10px 10px 0; margin-bottom:0;}
.posts li:hover .title {color:#FF0066;}
.posts .title img {padding-right:5px;}
.posts .title,.posts .body {color:#333;}
.posts .body {padding:10px;}
.posts .osusume img { position:absolute; top:0; left:0;z-index:200 !important;}
.posts .thumb {position:relative;}
.posts .thumb-in {position:relative;width:200px; overflow:hidden;}
.posts .category img {position:absolute; top:10px; right:0; margin-right:-10px;z-index:200 !important;}
.posts .day {position:absolute; bottom:0px; left:0; padding:2px 0 0 4px;background:url(../img/blog/arow.gif) no-repeat left; width:145px;color:#333; font-size:12px;}

/*---------------------------------
  side
-----------------------------------*/

/* post-list */

.post-list li {
	overflow: hidden;
	margin-bottom: 10px;
}
.post-pic {
	float: left;
	width: 80px;
	height: 60px;
	overflow: hidden;
}
.post-pic img {
	width: 100%;
	height: auto;
}

.post-content {
	float: left;
	padding-left: 10px;
	width: 190px;
}

.post-content .title {
	font-size: 18px;
}


/* バナー */

.bnr li {margin-bottom:10px;}
.bnr img {
	margin-bottom: 5px;
}
.bnr h4 {
}
.bnr .text {
	font-size: 12px;
}

/* 口コミ */

#kuchikomi li {margin-bottom:10px;}
#kuchikomi .pic {float:left; margin-right:10px;}
#kuchikomi .pic img {width: 60px;}
#kuchikomi .header {zoom:1; overflow:hidden;}
#kuchikomi .prev { float:left;}
#kuchikomi .next { float:right;}
#kuchikomi .name {font-size: 12px;}
#kuchikomi .title {padding-bottom:5px; margin-bottom:5px; border-bottom:1px dotted #ccc;}
#kuchikomi .point {color:#333; font-size:14px; margin-bottom:5px;}
#kuchikomi .point span {color:#FF0000; font-size:16px;}
#kuchikomi .prev a,#kuchikomi .next a {display:block;}
#kuchikomi .pager li {width:135px !important;}
#kuchikomi .pager li a {padding:5px 10px !important;margin:0 !important;}

/* 新着 */

#feed li {list-style:url(../img/arow/pink.gif) inside;}
#feed li a {display:block; font-size:14px;}
#feed li:first-child {background:url(../img/top/new.png) right center no-repeat;}

/* 温泉ランク */

#onsen-rank img {float:left;width:120px; margin-right:5px;}
#onsen-rank .small img {width:60px; height:46px;}
#onsen-rank .number { float:left; width:24px; text-align:center;font-weight:bold; background:url(../img/rank/osnenrank_bg.gif) top center no-repeat; margin-right:3px; margin-top:20px;}
#onsen-rank .big .number { font-size:18px; color:#FF0066; line-height:70px;}
#onsen-rank .small .number { font-size:15px; color:#333; line-height:50px; background:none; margin-top:0;}

/* ranking */

.ranking {
	overflow: hidden;
	zoom:1;
	margin-bottom: 20px;
}

.ranking .left {
	width:325px;
	float: left;
	margin-right: 10px;
}

.ranking .right {
	width: 325px;
	float: left;
}

.rank-list li {zoom:1; overflow:hidden;margin-bottom:10px;line-height: 1.5;}
.rank-list .number { float:left; width:35px;margin-right:10px; padding-top:5px;}
.rank-list h4 {font-weight: bold;}
.rank-list .erea {color: #333;font-size: 14px;}
.rank-list .pic { text-align:center; margin-bottom:5px; float:left; margin-right:10px;}
.rank-list .pic img {width:100px; padding:3px; border:1px solid #ccc; background:#fff; }
.rank-list .pic img:hover {border:1px solid #FF0066;}


/* topics */

.topics {
	margin-bottom:20px !important;
}

.topics li {
	zoom:1;
	overflow: hidden;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #ddd;
}

.topics .pics {
	float: left;
	margin-right: 10px;
	width: 60px;
	height: 60px;
	overflow: hidden;
}

.topics .pics img {
	width: 80px;
}

.topics .txt {
	float:left;
	width: 212px;
}

.topics h4 {
	background: url(../img/arow/pink.gif) no-repeat center left;
	padding-left: 10px;
}

.topics .font-s {
	font-size: 14px;
	color: #333;
}

/************************************
Sales アイキャッチ
************************************/

.reflection-img{
    width       :980px;
    height      :140px;
    position    :relative;
    overflow    :hidden;
}
 
.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2s ease-in-out infinite;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}