@charset "utf-8";

/* ヘッダー --------------------------------------------------------------------------------------*/
.header {
	background-color: transparent;
	position: fixed;
	/*transition: background-color 0.2s linear;*/
	z-index: 102;
}

.header.act,
.header.active { background-color: var(--color-header); }
/*-----------------------------------------------------------------------------------------------*/

/* グローバル -----------------------------------------------------------------------------------*/
/*.global { padding-top: 55px; }
.global.act { padding-top: 30px; }*/
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* トップ ---------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/*.main { padding-bottom: 0; }*/
.main br.pc { display: none; }

.main .contents { margin-top: var(--margin-m); }

.main h2 {
	margin-top: var(--margin-l);
	text-align: center;
}
.main .read { text-align: center; }
.main .reads {
	font-size: var(--font-m);
	margin-top: var(--margin-s);
}
.main .comment { margin-top: var(--margin-s); }

.main .button { margin-top: var(--margin-m); }
.main .button a {
	font-size: var(--font-s);
	padding: 9px 0 11px;
	width: 154px;
}
	.mac .main .button a { padding-bottom: 8px; }
	.ipad .main .button a,
	.iphone .main .button a { padding-bottom: 9px; }

.main .bottomimage { margin-top: var(--margin-l); }

/* 宿泊予約 */
.main .reserve {
	position: fixed;
	right: 0;
	bottom: 0;
	transition: opacity 0.2s ease-out;
	z-index: 90;
}
.main .reserve a {
	background-color: var(--color-main);
	color: var(--color-white);
	display: inline-block;
	font-size: var(--font-s);
	letter-spacing: 0.05em;
	padding: 15px 30px 16px;
	text-decoration: none;
}
	.mac .main .reserve a,
	.ipad .main .reserve a,
	.iphone .main .reserve a { padding-bottom: 14px; }
.main .reserve a span {
	padding-left: 20px;
	position: relative;
}
.main .reserve a span::before {
	background-image: url("../images/icon_reserve.svg");
	background-size: 14px auto;
	content: "";
	height: 14px;
	position: absolute;
	top: 3px;
	left: 0;
	width: 14px;
}
	.mac .main .reserve a span::before { top: 0; }
	.ipad .main .reserve a span::before,
	.iphone .main .reserve a span::before { top: 1px; }

.main .reserve.hide {
	opacity: 0;
	pointer-events: none;
}


/* メイン画像 -----------------------------------------------------------------------------------*/
.main .midashi {
	padding-top: 0;
	position: relative;
}

.main .midashi::after {
	background-color: rgba(0, 0, 0, 0.25);
	content: "";
	height: 100%;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
}

/* タイトル */
.main .midashi h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}
.main .midashi h1 img { width: 80px; }


/* About ----------------------------------------------------------------------------------------*/
/*.main .about .wrapper { max-width: 650px; }
.main .about .comment p:not(:first-of-type) { margin-top: 1em; }*/


/* 食事 -----------------------------------------------------------------------------------------*/
/*.main .dining .images ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}
.main .dining .images li:not(:first-child) { width: calc((100% - 1px) / 2); }*/
.main .dining .images ul {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
		"a a"
		"b c";
}
.main .dining .images li:nth-child(1) { grid-area: a; }
.main .dining .images li:nth-child(2) { grid-area: b; }
.main .dining .images li:nth-child(3) { grid-area: c; }

.main .dining .button + .button { margin-top: var(--margin-xs); }



/* プラン ---------------------------------------------------------------------------------------*/
/*.main .plan {
	border-top: var(--color-black) solid 1px;
	margin-top: var(--margin-l);
	padding-top: var(--margin-l);
}

.main .plan .allplan {
	font-size: var(--font-s);
	margin-top: var(--margin-s);
	text-align: right;
}
.main .plan .allplan a {
	padding-right: 45px;
	position: relative;
}
.main .plan .allplan a::before,
.main .plan .allplan a::after {
	background-color: var(--color-main);
	content: "";
	height: 1px;
	position: absolute;
}
.main .plan .allplan a::before {
	top: 14px;
	right: 2px;
	width: 40px;
}
.main .plan .allplan a::after {
	top: 11px;
	right: 0;
	transform: rotate(35deg);
	width: 12px;
}*/
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* トップ ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 食事 -----------------------------------------------------------------------------------------*/
	.main .dining .button { margin-top: 0 !important; }
	.main .dining .buttons {
		display: flex;
		justify-content: center;
		column-gap: var(--margin-s);
		margin-top: var(--margin-m);
	}
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 768px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* トップ ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main br.pc { display: inline; }
	/*.main .container:not(.about) .comment { text-align: center; }*/
	/* 食事 -----------------------------------------------------------------------------------------*/
	.main .dining .images ul {
		gap: 5px;
		grid-template-columns: 2fr 1fr;
		grid-template-areas:
			"a b"
			"a c";
		align-items: stretch;
	}
	.main .dining .images img {
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}
	/* プラン ---------------------------------------------------------------------------------------*/
	/*.main .plan {
		margin-top: var(--margin-ll);
		padding-top: var(--margin-ll);
	}
	.main .plan .wrapper {
		display: flex;
		flex-direction: row-reverse;
		column-gap: var(--margin-s);
	}
	.main .plan .image { flex: 1; }
	.main .plan .text { width: 50%; }
	.main .plan h2,
	.main .plan .read,
	.main .plan .comment { text-align: left; }
	.main .plan h2 { margin-top: 0; }*/
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1024px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* トップ ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main .bottomimage { margin-top: var(--margin-ll); }
	/* 宿泊予約 */
	.main .reserve { display: none; }
	/* メイン画像 -----------------------------------------------------------------------------------*/
	/* タイトル */
	.main .midashi h1 img { width: 96px; }
	/* 食事 -----------------------------------------------------------------------------------------*/
	.main .dining .images ul { gap: 10px; }
	/* プラン ---------------------------------------------------------------------------------------*/
	/*.main .plan .wrapper { column-gap: var(--margin-m); }*/
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
}



@media(min-width: 1366px) {
}