@charset "utf-8";

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-size: 100%;
    vertical-align:baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

article, header, footer, aside, figure, figcaption, nav, section {
    display:block;
}

body {
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

ol, ul {
    list-style: none;
    list-style-type: none;
}

/********** common **********/
html{
	scroll-behavior: smooth;
}

body {
	font: 16px "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	background: #fff;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

a {
	text-decoration: none;
}

header {
	margin: 0 auto;
	position: relative;
	z-index: 2;
	padding: 16px 0;
	box-shadow: 0 0 10px #ccc;

	h1{
		max-width: 260px;
		margin-left: 80px;

		@media (max-width: 800px) {
			max-width: 200px;
			margin-left: 20px;
		}

		img{
			width: 100%;
		}
	}

}

.main-image{
	margin-top: 30px;

	img{
		width: 100%;
	}
}

h2.title{
	text-align: center;
	font-size: 24px;
	margin: 1.5em 0;
	font-weight: bold;
}
.hotel-list{
	max-width: 1200px;
	margin: 30px auto;
	width: 94%;
	
	li{
		box-shadow: 0 0 10px #ccc;
		border-radius: 20px;
		padding: 20px;
		margin-top: 40px;

		@media (max-width: 800px) {
			padding: 20px 10px;
		}

		.title{
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 0.5em;
		}
		.box{
			display: flex;

			@media (max-width: 800px) {
				flex-direction: column;
				}

			.slider-img{
				width: 400px;
				height: 300px;
				border-radius: 20px;
				overflow: hidden;

				@media (max-width: 800px) {
					width: 100%;
					height: auto;
				}

				img{
					width: 100%;
				}
			}

			.inner{
				width: calc(100% - 400px);
				padding-left: 2em;

				@media (max-width: 800px) {
					width: 100%;
					height: auto;
					padding-left: unset;
				}

				.cap{
					font-weight: bold;

					@media (max-width: 800px) {
						margin-top: 1em;
					}
				}
			}

			dl{
				display: flex;
				margin-top: 20px;
				flex-wrap: wrap;
				align-items: stretch;
				width: 100%;
				border: 1px solid #ccc;
				border-bottom-width: 1px;
				border-bottom-style: solid;
				border-bottom-color: rgb(204, 204, 204);
				border-bottom: none;

				dt{
					display: flex;
					align-items: center;
					background: #f5f5f5;
					padding: 5px;
					width: 150px;
					border-right: 1px solid #ccc;
					border-bottom: 1px solid #ccc;

					@media (max-width: 800px) {
						width: 100px;
					}
				}

				dd{
					background: #fff;
					padding: 5px;
					width: calc(100% - 150px);
					border-bottom: 1px solid #ccc;
					word-wrap: break-word;

					@media (max-width: 800px) {
						width: calc(100% - 100px);
					}

					a{
						text-decoration: underline;
						color: #000;
					}
				}
			}
		}
	}
}

.hotel-list .slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	cursor: pointer;
	width: 30px;
	height: 30px;
  }
  
  .hotel-list .slick-prev {
	left: 15px;
  }
  
  .hotel-list .slick-next {
	right: 15px;
  }

  .hotel-list .slick-next::before,
  .hotel-list .slick-prev::before {
	font-size: 30px;
}

.hotel-list .key-slider,
.hotel-list .slick-list,
.hotel-list .slick-track {
  height: 100%;
}

#page-top {
	position: fixed;
	bottom: 30px;
	right: 10px;
	width: 50px;

	img{
		width: 100%;
	}
}

footer {
	background-color: #000;
	text-align: center;
	padding: 1em 0;
	color: #fff;
	margin-top: 120px;

	a{
		color:#fff;
	}
}