@charset "utf-8";

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

  “TOP” CSS
		
========================================== */



/* top common parts 
========================================== */
.lastUpdate			{	text-align:right;}



/* top header 
========================================== */



/* bx Slider
========================================== */
#topSlide {	display: none; margin: 0 auto 60px!important;}
@media screen and (min-width: 480px) {
	#bxslider1 li{
		display: flex;
		align-items: center;
		height: 280px;
	}
	.bx-wrapper .bx-viewport {
		height: 280px!important;
	}
}



/* catlist_carousel
========================================== */
/* Flipsnap
---------------------------------------- */
.imgDataWrap {
	width: 100%;
	position: relative;
}
.imgData {
	width: calc(100% - 46px);
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 auto 20px;
}
#catlist_carousel02,
#catlist_carousel01		{	width: 100000px; height:auto; overflow:hidden;}
#catlist_carousel02 li,
#catlist_carousel01 li		{	width: 300px; height: 240px; overflow:hidden; float:left; margin: 0px 5px 2px 0px; border: 0px solid #aaa; }
#catlist_carousel02 li a,
#catlist_carousel01 li a	{font-size: 1.4em; font-weight: normal;}
#catlist_carousel02 li a img,
#catlist_carousel01 li a img	{	width: 100%; height: auto; max-height: 200px; display: block; margin: 0px auto 6px; }

.imgDataWrap p.controls button {
	width: 32px;
	height: 32px;
	cursor: pointer;
	position: absolute;
	top: 42%;
	margin-top: -16px;
	outline: 0;
	text-indent: -9999px;
	z-index: 9999;
	border: 0px solid #ccc;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
/*	background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background: #e5e5e5; */
}
.imgDataWrap p.controls button.prev,
.imgDataWrap p.controls button.prev2 {
	left: 5px;
	background: url(/imgs/controls-rev.png) no-repeat 0 -31.5px;
}
.imgDataWrap p.controls button.next,
.imgDataWrap p.controls button.next2 {
	right: 5px;
	background: url(/imgs/controls-rev.png) no-repeat -43px -31.5px;
}
.imgDataWrap p.controls button.prev:hover,
.imgDataWrap p.controls button.prev2:hover {
	background-position: 0 0;
}
.imgDataWrap p.controls button.next:hover,
.imgDataWrap p.controls button.next2:hover {
	background-position: -43px 0;
}

.imgDataWrap p.controls button:before {
	content: "▲";
	width: 20px;
	height: 20px;
	font-size: 16px;
	line-height: 22px;
	display: block;
	margin-left: -2px;
}
.imgDataWrap p.controls button.prev:before,
.imgDataWrap p.controls button.prev2:before {
	transform: rotate(-90deg);
}
.imgDataWrap p.controls button.next:before,
.imgDataWrap p.controls button.next2:before {
	transform: rotate(90deg);
}

/* Slick
---------------------------------------- */
.slick-slide {
	/* opacity: 0.5; */
	padding: 3px;
}
.slick-slide.slick-center {
	opacity: 1;
}
.slick-slide a {
	font-size: 1.4em;
	font-weight: normal;
}
.slick-slide a img {
	width: 100%;
	height: auto;
	max-height: 200px;
	margin: 0px auto 6px;
}
.slick-prev,
.slick-next {
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 1;
	position: absolute;
	top: 50%;
	cursor: pointer;
	padding: 0;
	transform: translate(0, -80%);
	border: none;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 1px rgba(65, 64, 66, 0.8);
}
.slick-prev {
	left: 5px;
	background: url(/imgs/controls-rev.png) no-repeat 0 -31.5px;
}
.slick-next {
	right: 5px;
	background: url(/imgs/controls-rev.png) no-repeat -43px -31.5px;
}
.slick-slide a:hover,
.slick-slide a:focus,
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
	outline: none;
}
.center {
	/* display: none; */
	opacity: 0;
	transition: opacity .5s linear;
	margin-bottom: 20px;
}
.center.slick-initialized {
	/* display: block; /*slick-initializedが付与されたら表示*/
	opacity: 1;
}
/*
.center .slick-center a {
	transform: scale(1.08);
	display: block;
}
*/



/* Pick Up
========================================== */
#pickedup				{	width:100%; margin-bottom: 80px; }
#pickedup ul			{	width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0px;}
#pickedup li			{	flex-basis: 24%; margin:0 0 20px; }
#pickedup li a			{	display:block; width:100%; height: auto; overflow: hidden; position: relative;}
#pickedup li a img		{	width:100%; height:auto;}
#pickedup li div		{	display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 10px 0 0;}
#pickedup li div p		{	flex-basis: 100%; color: #000; text-align: center; padding: 5px 0 0 0px;}
#pickedup li:hover		{	opacity:0.7;}

#pickedup li div p.recom_sta {
	font-weight: bold;
}
#pickedup li div p.recom_copy {
	font-weight: bold;
}
#pickedup li div p.recom_room {
	flex-basis: 50%;
	text-align: right;
	padding-right: 5px;
}
#pickedup li div p.recom_area {
	flex-basis: 50%;
	text-align: left;
	padding-left: 5px;
}
#pickedup li div p.recom_price {
}

@media screen and (max-width: 480px) {
	#pickedup li			{	flex-basis: 49%; }
}



/* Contents
========================================== */
#contents			{	width:100%; margin-bottom: 80px; }
#contents ul			{	width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0px;}
#contents li			{	flex-basis: 33%; margin:0 0.5% 60px 0; }
#contents li:hover		{	opacity: 0.6;}
#contents li:nth-of-type(3n)			{	margin:0 0 60px; }
#contents li a			{	display:block; width:100%; height: auto; overflow: hidden; position: relative;}
/*
#contents li a h3		{	width: calc(100% - 10px); height: calc(100% - 10px); color: #fff; font-size: 1.4em; line-height: 120%;text-align: center;
							position: absolute; display: flex; justify-content: center; align-items: center;
							padding: 0.0em 0; margin: 5px;
							background: rgba(0, 0, 0, 0.5); }
*/
#contents li a h3	{
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 1.4em;
	line-height: 120%;
	text-align: center;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.0em 0;
	margin: 0px;
	border: 5px solid rgba(255, 255, 255, 0.6);
	background: rgba(0, 0, 0, 0.5);
}

#contents li a h3 div		{	width: 90%; }
#contents li a h3 div b	{	font-weight: normal; display: block; padding: 8px 0 0; margin: 5px auto 0; border-top: 1px solid #fff; }
/*
#contents li:nth-of-type(6n+1) a h3		{   background: url("/imgs/contents_hbg01.png") repeat-x bottom; background-size: contain;}
#contents li:nth-of-type(6n+2) a h3		{   background: url("/imgs/contents_hbg02.png") repeat-x bottom; background-size: contain;}
#contents li:nth-of-type(6n+3) a h3		{   background: url("/imgs/contents_hbg03.png") repeat-x bottom; background-size: contain;}
#contents li:nth-of-type(6n+4) a h3		{   background: url("/imgs/contents_hbg04.png") repeat-x bottom; background-size: contain;}
#contents li:nth-of-type(6n+5) a h3		{   background: url("/imgs/contents_hbg05.png") repeat-x bottom; background-size: contain;}
#contents li:nth-of-type(6n+6) a h3		{   background: url("/imgs/contents_hbg06.png") repeat-x bottom; background-size: contain;}
*/
#contents li a img		{	width:100%; height:auto;}

@media screen and (max-width: 480px) {
	#contents li			{	flex-basis: 100%; }
}






























/* Buy & Sale
========================================== */
#left01			{	width:48.4%; float: left;}

@media screen and (max-width: 480px) { 
	#left01			{	width:100%; float:none;}
}



	/* Buy
	---------------------------------------- */
	#buy 				{	}

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

	@media screen and (max-width: 480px) { 
	}


	/* Sale
	---------------------------------------- */
	#sale 				{	}


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


	@media screen and (max-width: 480px) { 
	}

/* Ranking
========================================== */	
#rank				{	}

	@media screen and (max-width: 768px) { 
	}
		
	@media screen and (max-width: 480px) { 
	}



/* Theme
========================================== */	




/* Side
========================================== */	
.right02	{	width:27%; max-width:250px; float:right;}

@media screen and (max-width: 480px) { 
	.right02	{	width:100%; max-width:100%; float:none;}
}

	/* News
	---------------------------------------- */
	#news			{	max-height: 397px; overflow: hidden;}
	#news > b		{	display:block;}
	#news ul		{	margin:20px 0 40px;}
	#news li		{	padding:20px;
							background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
							background-position:top left, top right, bottom left, bottom right;
							background-image:
									url("/imgs/line_left.gif"),
									url("/imgs/line_right.gif"),
									url("/imgs/line_left.gif"),
									url("/imgs/line_right.gif");}
	#news li:first-child,
	#news li:last-child	{	background-image:
											url("/imgs/line_left_top.gif"),
											url("/imgs/line_right_top.gif"),
											url("/imgs/line_left_bottom.gif"),
											url("/imgs/line_right_bottom.gif");}
	
/*
	#news li:hover	{	opacity:0.7;}
*/
	#news li > b	{	font-size:0.917em; color:#ccc; display:block; margin-bottom:10px;}
	#news li p	{	line-height:1.5;}
	#news li p a	{	color:#0000ff; text-decoration: underline;}

	@media screen and (max-width: 480px) { 
		#news	{	margin-top: 20px;}}
     


	/* Member registration
	---------------------------------------- */	
	#memberRegist								{	margin:20px 0 40px;}
	#memberRegist #movie						{	width:100%; height:auto; margin:14px 0 10px 0;}
	#memberRegist label							{	padding:20px 0 0 0; display:block; font-weight:bold;}
	#memberRegist input[type="text"]			{	width:100%; height:32px; padding:2px 5px; margin-top:5px;
														font-size:2.0em; border:none; border:1px solid #ccc;}
/*	#memberRegist input[type="submit"]			{	cursor:pointer; border:none; font-size:1.4em; color:#fff; background:#505050;
														border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
														text-align:center; font-weight:bold;
														box-sizing:border-box; margin:0 0 10px 0; width:100%; height:54px;}
	#memberRegist input[type="submit"]:hover	{	opacity:0.7;}
	
	#memberRegist p							{	font-size:1.1em;}
	#memberRegist p input[type="checkbox"]		{	margin:0;}*/
	
	#memberRegist form a			{	border-bottom:1px solid #ccc; display:inline-block; margin-top:10px;}
	#memberRegist form a::before	{	content:""; display:inline-block; font-size:0; line-height:0;
										width:15px; height:7px; margin-right:5px;
										background:url("/imgs/home/icon_key2.png") no-repeat;
										background-size:contain;}
	
	
	
	#memberRegist #newMemBtn		{	display:block; font-size:1.083em; line-height:1.3; color:#fff; background:#f19234;
										border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
										text-align:center; font-weight:bold; padding:11px 0; margin-top:1.5em;}
	#memberRegist #newMemBtn:hover	{	opacity:0.7;}
	

	/* banner
	---------------------------------------- */	
	#banner			{	margin-top: 10px;}
	#banner li		{	border: 0px solid #ccc; margin-bottom:10px;}
	#banner li img		{	width:100%; height:auto;}
	#banner li:hover img	{	opacity:0.7;}

	#banner_smp			{	display: none; width:100%; margin-top: 10px;}
	#banner_smp li			{	border: 0px solid #ccc; margin-bottom:10px;}
	#banner_smp li img		{	width:100%; height:auto;}
	#banner_smp li:hover img	{	opacity:0.7;}

	#banner_camp		{	margin: 0 auto 20px;}
	#banner_camp li		{	margin-bottom: 0px;}
	#banner_camp li img	{	width:100%; height:auto;}
	#banner_camp li:hover img	{	opacity:0.7;}

@media screen and (max-width: 480px) {
	#banner_smp			{	width:100%; float:none; display: block;}
	#banner_smp li		{	display: none;}
	#banner_smp li:nth-of-type(2)	{	display: block;}
	#banner				{	display: none;}
	#banner_camp		{	width: 100%; }
}	

	/* kawaraban
	---------------------------------------- */	
	#kawaraban	{	padding:0 20px 20px; margin-top: 10px;
					background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
					background-position:top left, top right, bottom left, bottom right;
					background-image:
								url("/imgs/line_left_top.gif"),
								url("/imgs/line_right_top.gif"),
								url("/imgs/line_left_bottom.gif"),
								url("/imgs/line_right_bottom.gif");}

	#kawaraban > b		{	text-align:center; font-size:1.167em; color:#000; font-weight:bold; display: block; padding:6px 0 0 0;}
	#kawaraban > b img	{	display:block; margin:0 auto 8px;}
	#kawaraban > b span	{	color:#fb7e10;}
	#kawaraban li		{	margin-top:20px;}
	#kawaraban li:hover	{	opacity:0.7;}
	#kawaraban li b		{	font-size:0.917em; color:#ccc; display: block; margin-bottom:10px;}
	#kawaraban li p		{	line-height:1.5;}
	
	/* staff
	---------------------------------------- */	
	#staff		{	text-align:center; margin-top: 10px; width:100%; background:#f2f1ef;}
	#staff a	{	display:block; width:100%; height:100%;}
	#staff a b	{	font-size: 1.250em; display: block; padding-top: 20px;}
	#staff a p	{	line-height:1.5; padding:1em 15px 0 15px; }
	#staff a img	{	width:100%; height:auto;}
	
	#staff:hover	{	opacity:0.7;}

	#staff_smp		{	display: none; text-align:center; margin-top: 10px; width:100%; background:#f2f1ef;}
	#staff_smp a		{	display:block; width:100%; height:100%;}
	#staff_smp a b		{	font-size:1.250em; display: block; padding-top:20px;}
	#staff_smp a p		{	line-height:1.5; padding:1em 15px 0 15px; }
	#staff_smp a img	{	width:100%; height:auto;}

@media screen and (max-width: 480px) { 
	#staff_smp	{	width:100%; float:none; display: block;}
	#staff		{	display: none;}
}	

/* Left
========================================== */	
.left02		{	width:69.5%; float: left; padding: 0 0 60px; overflow: hidden;}
.left03		{	width:33.3%; float: left; padding-right: 3px;}
.right03	{	width:33.3%; float: right;}

	
@media screen and (max-width: 480px) { 
	.left02		{	width: 100%; float:none; padding: 0 0 0px;}
	.left03		{	display: none;}
	.right03	{	width: 100%; float:none; margin: 0 auto 20px;}
}	


	/* voice
	---------------------------------------- */	
	#voice			{	width:100%; display:table; padding-left:10px; }
	#voice > div	{	display:table-cell; padding-left:20px;}
	#voice ul		{	width:100%; padding-bottom:20px;}
	#voice li		{	width:47.9%; float:left;}

	#voice li:last-child	{	float:right;}
	
	#voice li div:nth-of-type(1)		{	position:relative; }
	#voice li div:nth-of-type(1) img	{	width:100%; height:75.9375%;}
	#voice li div:nth-of-type(1) div	{	display:table; width:100%; position:absolute; bottom:0; left:0; color:#fff;
										background:rgba(0,0,0,0.5);
										line-height:1.5;}
	#voice li div:nth-of-type(1) div h3,
	#voice li div:nth-of-type(1) div span	{	display:table-cell; vertical-align:middle; }
	#voice li div:nth-of-type(1) div h3		{	font-weight:bold; font-size:1.667em; white-space:nowrap; padding:15px 10px;}
	#voice li div:nth-of-type(1) div span	{	font-size:1.083em; line-height:1.4; padding:15px 10px;}
	
	#voice li div:nth-of-type(2)		{	margin-top:15px;}
	#voice li div:nth-of-type(2) img	{	max-width: 80px; max-height: 80px; float:right; margin:0 0 0 5px;}
	#voice li div:nth-of-type(2) h4		{	font-size:1.083em; margin-bottom:5px;}
	#voice li div:nth-of-type(2) p		{	max-height: 56px; line-height:1.5; position: relative; overflow: hidden;}
	#voice li div:nth-of-type(2) p:before,
	#voice li div:nth-of-type(2) p:after	{	position: absolute; background: #fff;}
	#voice li div:nth-of-type(2) p:before	{	content: "..."; bottom: 0; right: 0;}
	#voice li div:nth-of-type(2) p:after	{	content: ""; width: 100%; height: 100%;}

	#voice li div:nth-of-type(1):hover{	opacity:0.7;}

	@media screen and (max-width: 768px) { 
		#voice li		{	width:100%; float:none;}
		#voice li:last-child	{	float:none; padding-top:30px;}}	



	/* SnsArea
	---------------------------------------- */	
	#snsArea 			{	float: none; clear: both; overflow:hidden; margin-top: 10px;}
	#snsArea article		{	width: 20%; float:left; overflow:hidden; padding-right: 5px;}
	#snsArea article a		{	float:left; display: block; margin-right: 5px;}

	#snsArea .twitter-timeline	{	width:100%; max-width:500px; height:222px;}


	@media screen and (max-width: 768px) { 
		#snsArea article					{	width:100%; float:none; margin-bottom:20px}
		#snsArea article:last-child			{	float:none; margin-bottom:0;}}	

	@media screen and (max-width: 480px) { 
		#snsArea 	{	width: 100%; float:none; margin: 10px auto;}
	}	













/* Blank adjustment
========================================== */