/*
Theme Name: 美食と自然を感じる旅　壱岐
Theme URI: http://www.shima-tabi.jp/iki/hotel/
Author: Foodconnection
Author URI: http://www.shima-tabi.jp/iki/hotel/
Description: 美食と自然を感じる旅　壱岐のテーマ
*/

/* --------------------------------------------------------------------------------------
  ヘッダー
--------------------------------------------------------------------------------------- */

.key div {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 705px;
}

.head {
	background: url(shared/img/line.png) no-repeat 0 117px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 705px;
}

.head p { margin-left: -300px; }

/* --------------------------------------------------------------------------------------
  共有パーツ
--------------------------------------------------------------------------------------- */

.box {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 1000px;
}

.box:after {
	clear:both;
	content:"";
	display:block;
}

.box { display:inline-block; }

/*\*/
* html .box { height:1%; }

.box { display:block; }

.imgfont {
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.over { transition: all .5s ease; }
.over:hover { opacity: 0.7; }

.list-over { transition: all .5s ease; }
.list-over:hover { opacity: 0.4; }

.fixbanner li:first-child,
.contanct li:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------------------
  コンテンツ
--------------------------------------------------------------------------------------- */

.fixbanner {
	position: fixed;
	top: 30px;
	right: 30px;
	z-index: 1000;
}

.fixbanner li { margin-top: 30px; }

.hotelwrap {
	background:
		url(shared/img/box_bg_01.png) no-repeat left top,
		url(shared/img/box_bg_02.png) no-repeat right bottom;
	padding: 130px 0 130px;
	margin-top: -60px;
}

.hotelwrap h2 {
	background: url(shared/img/hotel_ttl.png) no-repeat;
	width: 199px;
	height: 35px;
	margin: 0 auto 40px;
}

.wrap { padding-bottom: 50px; }

.list {
	width: 1020px;
	margin-left: -20px;
}

.list a {
	color: #333;
	display: block;
	border-bottom: 2px solid #333;
	float: left;
	width: 490px;
	min-height: 84px;
	margin-left: 20px;
	padding: 20px 0;
}

.list a:hover { text-decoration: none; }

.list a dl {
	display: table;
	width: 100%;
}

.list a dt {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: table-cell;
	vertical-align: middle;
	width: 132px;
	font-size: 0;
}

.list a dd {
	display: table-cell;
	vertical-align: middle;
	padding: 0 30px;
	height: 84px;
}

.list a dd h3 { color: #000; }

.list a dd p {
	line-height: 1.5;
	font-size: 90%;
}

.list a:nth-child(1),
.list a:nth-child(2),
.list a:nth-child(3),
.list a:nth-child(4),
.list a:nth-child(5),
.list a:nth-child(6) {
	background:
		url(shared/img/arrow.png) no-repeat 99% 99%,
		url(shared/img/list_bg.png) repeat;
	width: 294px;
	padding: 13px;
	min-height: 307px;
	margin-bottom: 40px;
	border-bottom: none;
}

.list a:nth-child(1) dt,
.list a:nth-child(2) dt,
.list a:nth-child(3) dt,
.list a:nth-child(4) dt,
.list a:nth-child(5) dt,
.list a:nth-child(6) dt {
	display: block;
	width: 294px;
	height: 193px;
}

.list a:nth-child(1) dd,
.list a:nth-child(2) dd,
.list a:nth-child(3) dd,
.list a:nth-child(4) dd,
.list a:nth-child(5) dd,
.list a:nth-child(6) dd {
	display: block;
	padding: 0;
	text-align: center;
	margin-top: 20px;
}

.list a:nth-child(1) dd h3,
.list a:nth-child(2) dd h3,
.list a:nth-child(3) dd h3,
.list a:nth-child(4) dd h3,
.list a:nth-child(5) dd h3,
.list a:nth-child(6) dd h3 { font-size: 125%; }

.list a:nth-child(7),
.list a:nth-child(8) { border-top: 2px solid #333; }

.mainbox .hotel_detail {
	float: left;
	width: 380px;
	text-align: center;
}

.mainbox .hotel_detail h1 { font-size: 185%; }

.mainbox .hotel_detail ul {
	border-bottom: 3px solid #284f78;
	display: inline-block;
	margin-top: 20px;
	padding: 0 60px;
}

.mainbox .hotel_detail li {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
}

.mainbox .hotel_detail li:first-child { margin-left: 0; }

.fb_iframe_widget span { vertical-align: top !important; }

.mainbox .hotel_detail p { margin-top: 25px; }

.gmap { margin-top: 50px; }

.gmap iframe {
	width: 380px !important;
	height: 253px !important;
}

#rg-gallery {
	float: right;
	width: 553px;
	height: 462px;
	position: relative;
}

.rg-view,
.rg-image img,
.es-carousel ul li a img { display: none !important; }

.rg-image {
	background-repeat: no-repeat;
	background-size: cover;
	width: 553px;
	height: 373px;
}

.rg-thumbs {
	position: absolute;
	top: 373px;
	left: 0;
	width: 100%;
}

.column {
	border: 1px solid #000;
	margin-top: 50px;
	padding: 12px 25px 33px;
}

.column h2 {
	background: url(shared/img/dotted_icon.png) no-repeat left center;
	padding: 5px 0 5px 15px;
	font-size: 130%;
}

.column .point {
	border-top: 1px solid #000;
	padding-top: 23px;
}

.column table { width: 100%; }

.column th {
	background-color: #244058;
	border-bottom: 1px solid #fff;
	color: #fff;
	font-weight: bold;
	width: 150px;
	padding: 15px 17px;
}

.column td {
	border-right: 1px solid #244058;
	border-bottom: 1px solid #244058;
	padding: 15px 17px;
}

.column tr:first-child th,
.column tr:first-child td { border-top: 1px solid #244058; }

.column tr:last-child th,
.column tr:last-child td { border-bottom: 1px solid #244058; }

.column td ul {
	overflow: hidden;
}

.column td li {
	float: left;
	list-style-type: disc;
	width: 162px;
	margin-left: 20px;
	margin-bottom: 8px;
}

.no-gallery {
	float: none !important;
	width: auto !important;
}

.no-gallery .gmap iframe {
	width: 100% !important;
	height: 400px !important;
}

.pankuzu {
	padding: 40px 0;
	text-align: center;
}

.pankuzu li {
	display: inline-block;
}

/* --------------------------------------------------------------------------------------
  フッター
--------------------------------------------------------------------------------------- */

footer {
	background: url(/iki/shared/img/common/footer_bg.png) repeat left top;
	padding: 35px 0 0;
}

.tabinowa {
	background-color: #fff;
	padding-bottom: 25px;
	box-shadow: 0 4px 11px #8c7c4f;
}

.tabinowa .main { position: relative; }

.tabinowa .main div {
	float: left;
	margin-top: 33px;
	margin-left: 21px;
}

.tabinowa .main dl {
	float: left;
	margin-top: 33px;
	margin-left: 51px;
}

.tabinowa .main dd { margin-top: 35px; }

.tabinowa .main p {
	position: absolute;
	top: -23px;
	right: -12px;
}

.contanct {
	background: url(shared/img/contact.gif) no-repeat;
	width: 950px;
	height: 121px;
	position: relative;
	margin-top: 25px;
	margin-left: 25px;
}

.contanct ul {
	position: absolute;
	top: 26px;
	left: 255px;
}

.contanct li { margin-top: 6px; }

.contanct div {
	position: absolute;
	top: 30px;
	left: 671px;
}


footer .banner {
	font-size: 0;
	text-align: center;
	margin-top: 30px;
}

footer .banner li {
	box-shadow: 0 4px 11px #8c7c4f;
	display: inline-block;
	margin-left: 20px;
}

footer .banner li:first-child { margin-left: 0; }

small {
	background: url(/iki/shared/img/common/copyright_bg.png) repeat;
	display: block;
	margin-top: 35px;
	padding: 20px 0;
	color: #fff;
}

/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media (max-width: 1024px) and (min-width: 767px) {
	
	/* --------------------------------------------------------------------------------------
	  ヘッダー
	--------------------------------------------------------------------------------------- */
	
	.key div {
		width: 100%;
		height: auto;
		padding-bottom: 60%;
	}
	
	.head {
		background: none;
		height: auto;
	}
	
	.head p {
		margin-left: -21%;
		width: 87%;
	}
	
	.head p img,
	.fixbanner img,
	footer img {
		width: 100%;
		height: auto;
	}
	
	footer br {
		font-size: 0;
		display: none;
	}
	
	/* --------------------------------------------------------------------------------------
	  共有パーツ
	--------------------------------------------------------------------------------------- */
	
	.box { width: auto; }
	
	.fixbanner {
		width: 17%;
		top: 2%;
		right: 3%;
	}
	
	.fixbanner li { margin-top: 5%; }
	
	/* --------------------------------------------------------------------------------------
	  コンテンツ
	--------------------------------------------------------------------------------------- */
	
	.hotelwrap { padding: 12% 0; }
	
	.list {
		width: auto;
		margin: 0 0 5% 1%;
	}
	
	.list a {
		min-height: inherit;
		width: 95.5%;
		padding: 2% 0;
		margin-left: 2%;
	}
	
	.list a:nth-child(1),
	.list a:nth-child(2),
	.list a:nth-child(3),
	.list a:nth-child(4),
	.list a:nth-child(5),
	.list a:nth-child(6) {
		width: 27.5%;
		padding: 1.5%;
		margin-bottom: 3%;
	}
	
	.list a:nth-child(1) dt,
	.list a:nth-child(2) dt,
	.list a:nth-child(3) dt,
	.list a:nth-child(4) dt,
	.list a:nth-child(5) dt,
	.list a:nth-child(6) dt {
		width: 100%;
		height: 150px;
		display: block !important;
	}
	
	.list a:nth-child(8) { border-top: none; }
	
	.list a .no-image:after {
		position: absolute;
		top: 37%;
		left: 0;
	}
	
	.mainbox .hotel_detail {
		float: none;
		width: auto;
		margin: 3% 3%;
	}
	
	.column {
		margin: 3%;
		padding: 1% 4% 3%;
	}
	
	.column th { width: 100px; }
	
	#rg-gallery {
		float: none;
		width: auto;
		margin: 0 3%;
	}
	
	.rg-image-wrapper { position: relative; }
	
	.rg-image { width: 100%; }
	
	.gmap iframe {
		width: 100% !important;
		height: 350px !important;
	}
	
	/* --------------------------------------------------------------------------------------
	  フッター
	--------------------------------------------------------------------------------------- */
	
	footer { padding: 3% 0 0; }
	
	.tabinowa {
		margin: 0 3%;
		padding-bottom: 2%;
	}
	
	.tabinowa .main div {
		width: 24%;
		margin-top: 3%;
		margin-left: 3%;
	}
	
	.tabinowa .main dl {
		width: 57%;
		margin-top: 3%;
		margin-left: 3%;
	}
	
	.tabinowa .main dd {
		margin-top: 4%;
		width: 118%;
	}
	
	.tabinowa .main p {
		width: 14%;
		top: -8%;
		right: -2%;
	}
	
	.contanct {
		background-size: 100% auto;
		width: auto;
		margin: 3% 2% 0;
		height: auto;
		padding-bottom: 12%;
	}
	
	.contanct ul {
		top: 14%;
		left: 27%;
	}
	
	.contanct li:nth-child(1) { width: 63%; }
	.contanct li:nth-child(2) { width: 78%; }
	
	.contanct div {
		top: 28%;
		left: 72%;
		width: 26%;
	}
	
	footer .banner { margin-top: 2%; }
	
	footer .banner li {
		width: 46%;
		margin-left: 2%;
	}
	
	small {
		margin-top: 3%;
		padding: 1% 0;
	}
}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media(max-width: 766px){
	
	/* --------------------------------------------------------------------------------------
	  ヘッダー
	--------------------------------------------------------------------------------------- */
	
	.key div {
		width: 100%;
		height: auto;
		padding-bottom: 60%;
	}
	
	.head {
		background: none;
		height: auto;
	}
	
	.head p {
		margin-left: -21%;
		width: 87%;
	}
	
	footer br {
		font-size: 0;
		display: none;
	}
	
	/* --------------------------------------------------------------------------------------
	  共有パーツ
	--------------------------------------------------------------------------------------- */
	
	.box { width: auto; }
	
	.fixbanner {
		width: 17%;
		top: 2%;
		right: 3%;
	}
	
	.fixbanner li { margin-top: 5%; }
	
	/* --------------------------------------------------------------------------------------
	  コンテンツ
	--------------------------------------------------------------------------------------- */
	
	.hotelwrap { padding: 12% 0; }
	
	.hotelwrap h2 {
		background-size: 100% auto;
		width: 28%;
		height: auto;
		padding-bottom: 1%;
		margin: 9% auto 0;
	}
	
	.pankuzu {
		padding: 5% 0;
		font-size: 75%;
	}
	
	.pankuzu a {
		display: inline-block;
		vertical-align: middle;
	}
	
	.catname {
		padding: 3% 0;
		font-size: 135%;
	}
	
	.list {
		width: auto;
		margin: 0 0 5% 1%;
	}
	
	.list a {
		min-height: inherit;
		width: 95.5%;
		padding: 2% 0;
		margin-left: 2%;
	}
	
	.list a:nth-child(1),
	.list a:nth-child(2),
	.list a:nth-child(3),
	.list a:nth-child(4),
	.list a:nth-child(5),
	.list a:nth-child(6) {
		width: 43.5%;
		min-height: 246px;
		padding: 1.5%;
		margin-bottom: 3%;
	}
	
	.list a:nth-child(1) dt,
	.list a:nth-child(2) dt,
	.list a:nth-child(3) dt,
	.list a:nth-child(4) dt,
	.list a:nth-child(5) dt,
	.list a:nth-child(6) dt {
		width: 100%;
		height: 113px;
		display: block !important;
	}
	
	.list a:nth-child(8) { border-top: none; }
	
	.list a .no-image:after {
		position: absolute;
		top: 37%;
		left: 0;
	}
	
	.list a:nth-child(1) dd,
	.list a:nth-child(2) dd,
	.list a:nth-child(3) dd,
	.list a:nth-child(4) dd,
	.list a:nth-child(5) dd,
	.list a:nth-child(6) dd { margin-top: 7%; }
	
	.list a:nth-child(1) dd h3,
	.list a:nth-child(2) dd h3,
	.list a:nth-child(3) dd h3,
	.list a:nth-child(4) dd h3,
	.list a:nth-child(5) dd h3,
	.list a:nth-child(6) dd h3 { font-size: 100%; }
	
	.mainbox .hotel_detail {
		float: none;
		width: auto;
		margin: 3% 3%;
	}
	
	.column {
		margin: 3%;
		padding: 1% 4% 3%;
	}
	
	.column th {
		width: auto;
		padding: 3% 4%;
		display: block;
		border-bottom: none;
	}
	
	.column td {
		border: none;
		display: block;
		padding: 3% 0;
	}
	
	.column tr:last-child th,
	.column tr:last-child td { border-bottom: none; }
	
	.column td li {
		float: none;
		margin-left: 7%;
		margin-bottom: 1%;
		width: auto;
	}
	
	#rg-gallery {
		float: none;
		width: auto;
		height: 289px;
		margin: 0 3%;
	}
	
	.rg-image-nav a { top: 90px; }
	
	.rg-image-wrapper { position: relative; }
	
	.rg-image {
		width: 100%;
		height: 200px;
	}
	
	.rg-thumbs { top: 200px; }
	
	.es-carousel { margin: 0 6%; }
	
	.es-nav span { left: 1%; }
	.es-nav span.es-nav-next { right: 1%; }
	
	.gmap iframe {
		width: 100% !important;
		height: 235px !important;
	}
	
	/* --------------------------------------------------------------------------------------
	  フッター
	--------------------------------------------------------------------------------------- */
	
	footer { padding: 3% 0 0; }
	
	.tabinowa {
		margin: 0 3%;
		padding-bottom: 2%;
	}
	
	.tabinowa .main div {
		width: 18%;
		margin-top: 3%;
		margin-left: 3%;
	}
	
	.tabinowa .main dl {
		width: 62%;
		margin-top: 5%;
		margin-left: 3%;
	}
	
	.tabinowa .main dd {
		margin-top: 10%;
		width: 151%;
		margin-left: -34%;
		font-size: 90%;
		line-height: 1.5;
	}
	
	.tabinowa .main p {
		width: 14%;
		top: -8%;
		right: -2%;
	}
	
	.contanct {
		background-size: 100% auto;
		width: auto;
		margin: 3% 2% 0;
		height: auto;
		padding-bottom: 12%;
	}
	
	.contanct ul {
		top: 14%;
		left: 27%;
	}
	
	.contanct li:nth-child(1) { width: 49%; }
	.contanct li:nth-child(2) { width: 60%; }
	
	.contanct div {
		top: 28%;
		left: 72%;
		width: 26%;
	}
	
	footer .banner {
		margin: 2% 3% 0;
	}
	
	footer .banner li {
		width: auto;
		margin-top: 3%;
		margin-left: 0;
	}
	
	footer .banner li:first-child {
		margin-left: 0;
		margin-top: 0;
	}
	
	small {
		margin-top: 3%;
		padding: 1% 0;
	}
}