@charset "UTF-8";
/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */
/* SP用CSSの記述 */
/* PC、Tablet用CSSの記述 */
@media (min-width:768px) {}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/*outline: 1px solid #F00;*/
}
body {
	font-family: 'Noto Sans JP', sans-serif;
}
header {
	width: 100%;
	height: 100px;
	background-color: #111;
}
.credit{
	color: #fff;
}
header .wrap{
	width: 990px;
	height: 100px;
	margin: 0 auto;
}
/* --------------------------------------------------
       スライダー全体の領域設定 (幅100%, 高さ600px)
    -------------------------------------------------- */
.hero-slider-container {
	width: 100%;
	height: 600px;
	position: relative;
	overflow: hidden;
}
.slider, .slick-list, .slick-track, .slick-slide > div {
	width: 100%;
	height: 100%;
}
.slick-slide {
	position: relative;
	height: 600px;
	outline: none;
}
.slide-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex !important;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
/* --------------------------------------------------
       背景画像とズーム（Ken Burns）アニメーション
    -------------------------------------------------- */
.slide-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transform: scale(1.1);
	transition: transform 7s ease-out;
}
/* 暗めのオーバーレイ */
.slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
	z-index: 1;
}
/* slickのactiveクラスが付いたスライドの背景をズーム */
.slick-active .slide-bg {
	transform: scale(1);
}
/* --------------------------------------------------
       中央に配置するSVGロゴの設定
    -------------------------------------------------- */
.logo-wrapper {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 1.2s ease 0.3s, transform 1.2s ease 0.3s;
}
.slick-active .logo-wrapper {
	opacity: 1;
	transform: translateY(0);
}
.logo-svg {
	width: 180px;
	height: 180px;
}


.lead{
	width: 100%;
	height: 200px;
	background-color: #dad5ca;
}
.lead .wrap{
	width: 990px;
	height: 200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	text-align: center;
}
.lead h2{
	font-weight: 500;
	font-size: 45px;
	margin-bottom: 10px;
}
.lead p{
	font-size: 16px;
	line-height: 1.8;
}
h3{
	position: relative;
	text-align: center;
	font-size: 28px;
	font-weight: 500;
	color: #94763a;
	margin-top: 150px;
}
h3::before{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 10px;
	background-color: #dad5ca;
	margin: 0 auto ;
	transform: rotate(45deg);
	position: absolute;
	left: calc( 50% - 50px);
	bottom: -28px;
	z-index: -1;
}
#info{
	padding: 0 20px;
	margin-top: 130px;
	margin-bottom: 150px;
}
#info .header{
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 25px;
}
#info .header p{
	width: 120px;
	height: auto;
}
#info .header img{
	width: 120px;
	height: auto;
}
#info .header .hotelName{
	display: flex;
	flex-direction: column;
	align-content: center;
	margin-left: 20px;
}
#info .header .shoulder{
	display: block;
	font-size: 22px;
	font-weight: normal;
}
#info .header h4{
	font-weight: 500;
	font-size: 36px;
	display: flex;
	align-items: center;
}
#info .header .openDay{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 20px;
	display: flex;
	align-items: center;
	margin-left: 20px;
}
.openDay::before{
	content: "";
	display: inline-block;
	width: 23px;
	height: 40px;
	margin-right: 10px;
	background-image: url("../images/leaf-left.svg");
}
.openDay::after{
	content: "";
	display: inline-block;
	width: 23px;
	height: 40px;
	margin-left: 10px;
	background-image: url("../images/leaf-right.svg");
}

figcaption{
	font-size: 13.5px;
	font-weight: lighter;
}

.exterior{
	display: flex;
	margin-bottom: 25px;
}
.exterior figure{
	width: 465px;
}
.exterior figure img{
	width: 465px;
	height: 345px;
	object-fit: cover;
}
.exterior .text-area{
	height: 345px;
	margin-left: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.exterior .text-area .catch{
	font-size: 30px;
	font-weight: 500;
	line-height: 1.6;
}
.exterior .text-area .copy{
	font-size: 18px;
	font-weight: normal;
	line-height: 1.7;
}
.room{
	display: flex;
	justify-content: space-between;
	margin-bottom: 25px;
}
.room figure{
	width: 465px;
}
.room figure img{
	width: 465px;
	height: 250px;
	object-fit: cover;
}
.room figcaption{
	text-align: right;
}
.food{
	display: flex;
	justify-content: space-between;
	margin-bottom: 25px;
}
.food figure:first-of-type{
	width: 465px;
}
.food figure:first-of-type img{
	width: 465px;
	height: 250px;
	object-fit: cover;
}
.food figure:nth-of-type(2){
	width: 225px;
}
.food figure:nth-of-type(2) img{
	width: 225px;
	height: 225px;
	object-fit: cover;
	margin-top: 50px;
}
.food figure:last-of-type{
	width: 225px;
}
.food figure:last-of-type img{
	width: 225px;
	height: 225px;
	object-fit: cover;
}
.linkarea{
	display: flex;
	justify-content: center;
	gap:20px;
}
.linkarea a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 50px;
	border-radius: 3px;
	border: 1px solid #94763a;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	transition: 0.3s
	
}
.basic{
	background-color: #dad5ca;
}
.plan{
	background-color: #94763a;
	color: #fff;
}
.linkarea a:hover{
	background-color: #111;
	color: #fff;
}

ul.logo-mark{
	margin-top: 100px;
	display: flex;
	justify-content: center;
	gap:50px;
}
ul.logo-mark img{
	width: auto;
	height: 120px;
}

.lineup{
	width: 100%;
	background-color: #dad5ca;
	margin-top: 45px;
	padding-top: 45px;
	padding-bottom: 100px;
}


/* フィルタータブ */
.filter-tabs {
	width: 990px;
	margin: 0 auto 30px;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.filter-tabs button {
	padding: 5px 20px;
	border: 1px solid #94763a;
	background: #fff;
	color: #94763a;
	border-radius: 5px;
	cursor: pointer;
	font-size: 18px;
	transition: 0.3s;
}
.filter-tabs button:hover, .filter-tabs button.active {
	color: #fff;
	background: #94763a;
}
/* ホテルカード */
.hotel-list {
	width: 990px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.hotel-card {
	width: 465px;
	height: 250px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 2px 10px #00000010;
}
.hotel-info {
	width: 100%;
	display: flex;
}
.region {
	display: inline-block;
	width: 50px;
	height: 40px;
	color: #fff;
	background: #94763a;
	font-size: 14px;
	text-align: center;
	line-height: 40px;
}
.hotel-info h5 {
	width: 415px;
	height: 40px;
	font-size: 21px;
	font-weight: 500;
	padding-left: 5px;
	line-height: 40px;
	color: #fff;
}
h5 span.date{
	font-size: 11px;
}
.grand{
	background-color: #b81649;
}
.solaria{
	background-color: #36318f;
}
.croom{
	background-color: #da6b00;
}
.inn{
	background-color: #00442b;
}
.hotel-card .card-inner{
	width: 100%;
	padding: 10px;
	display: flex;
	justify-content: space-between;
}
.hotel-card figure {
	width: 230px;
	height: 190px;
	overflow: hidden;
}

.hotel-card img {
	width: 230px;
	height: 190px;
	object-fit: cover;
	display: block;
}
.zoom{
	transform: scale(1.3);
	transform-origin: bottom;
}
.hotel-card .text-box{
	width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.hotel-card .text-box .access{
	font-size: 15px;
	text-align: justify;
}
.palt{
	font-feature-settings: "palt";
	letter-spacing: 0.05em;
}
.text-box .linkarea{
	width: 100%;
	height: 65px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap:0;
}

.text-box .linkarea a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 205px;
	height: 30px;
	border: 1px solid #94763a;
	font-size: 15px;
	transition: 0.3s
}
.basic{
	background-color: #dad5ca;
}
.plan{
	background-color: #94763a;
	color: #fff;
}
.linkarea a:hover{
	background-color: #111;
	color: #fff;
}

.hotel-card[hidden] {
	display: none;
}