#banner
{
	display: flex;
	h1
	{

		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		width: 80px;
		text-align: center;
		line-height: 80px;
		letter-spacing: 1vw;
	}
	>div
	{
		width: calc(100% - 80px);
		position: relative;
		picture
		{
			display: block;
			width: 100%;
			height: 100%;
			img
			{
				width: 100%;
				display: block;
				object-position: center;
				object-fit: cover;
				height: 100%;
			}
		}
		#news
		{
			position: absolute;
			bottom:0;
			left:0;
			h2
			{
				font-weight: 700;
				a
				{
					color:$main-color;
//          color:#000;
					transition-duration:.5s;
					&:hover
					{
						color:#fff;
					}
				}
			}
			ul
			{
				li
				{
					a
					{
						transition-duration:.5s;
						color:#fff;
						&:hover
						{
							color:$main-color;
						}
					}
				}
			}
		}
	}
	@media(min-width:980px)
	{
		height: 56.25vw;
		>div
		{
			#news
			{
				padding:37px 0 37px 180px;
				display: flex;
				h2
				{
					padding-right:32px;
					margin-right:32px;
					border-right: 1px solid #fff;
//          font-weight: 500;
				}
				ul
				{
					li
					{
						margin-bottom:8px;
						&:last-child
						{
							margin-bottom: 0;
						}
						span
						{
							margin-right:32px;
						}
					}
				}
			}
		}
	}
	@media(max-width:979px)
	{
		h1
		{
			width: 44px;
			line-height: 44px;
			
			font-size: 12px;
		}
	}
	@media(max-width:768px)
	{
		height: 150vw;
		>div
		{
			#news
			{
				padding:24px;
			}
		}
	}
}

#about
{
	padding-top:130px;
	padding-bottom:130px;
	picture
	{
		display: block;
		img
		{
			display: block;
			width: 100%;
		}
	}
	>div
	{
		h2
		{
			font-size: 32px;
			line-height: 46px; 
			letter-spacing: 1.28px;
			margin-bottom: 80px;
		}
		p
		{
			margin-bottom: 100px;
		}
		ul
		{
			display: flex;
			li
			{
				margin-right: 80px;
				a
				{
					display: block;
					width: 180px;
					height: 180px;
					border-radius: 100%;
					border:6px solid #FFE5DC;
					color:$main-color;
					text-align: center;
					box-shadow: 0 0 16px 0 rgba(255, 140, 140, 0.25);
					line-height:168px;
					font-weight: 700;
					background-color: #fff;
					transition-duration:.5s;
					&:hover
					{
						background-color: $main-color;
						color:#fff;
					}
				}
			}
		}
	}
	@media(min-width:768px)
	{
		display: flex;
		picture
		{
			width: 42vw;
			margin-right:7vw;
		}
		>div
		{
			flex:1;
			
		}
	}
	@media(max-width:767px)
	{
		padding-left: 24px;
		picture
		{
			margin-bottom: 32px;
			img
			{
				border-radius: 5px;
			}
		}
		>div
		{
			h2
			{
				font-size: 24px;
				line-height: 36px; /* 150% */
				letter-spacing: 0.96px;
			}
			ul
			{
				justify-content:center;
				li
				{
					margin-right: 32px;
					&:last-child
					{
						margin-right: 0;
					}
				}
			}
		}
	}
}

#service
{
	padding-top:120px;
	padding-bottom:120px;
	background-color: #FFF9F5;
	h2
	{
		font-size: 32px;
		line-height: 46px; /* 143.75% */
		letter-spacing: 1.28px;
		margin-bottom: 48px;
	}
	.description
	{
		margin-bottom: 72px;
		.more
		{
			display: flex;
			
			a
			{
				background-color: $main-color;
				color:#fff;
				padding:16px 40px;
				border-radius: 50px;
			}
		}
	}
	.article-list
	{
		article
		{
			background-color: #fff;
			
			margin-bottom:8px;
			picture
			{
				display: block;
				margin-bottom:32px;
				img
				{
					max-width: 100%;
					margin:0 auto;
					display: block;
				}
			}
			h3
			{
        text-align: center;
				font-size: 24px;
				line-height: 36px; /* 150% */
				letter-spacing: 0.96px;
				margin-bottom: 16px;
				a
				{
					color:$text-color;
					transition-duration:.5s;
					&:hover
					{
						color:$main-color;
					}
				}
			}

		}
	}
	@media(min-width:768px)
	{
		.description
		{
			display: flex;
			justify-content:space-between;
			align-items:flex-end;
			p
			{
				flex:1;
			}
			.more
			{
				justify-content:flex-end;
				width: 40%;
			}
		}
		.article-list
		{
			display: flex;
			flex-wrap: wrap;
			article
			{
				padding:56px;
				margin:0 4px 8px 4px;
				width: calc((100% - 16px) / 3);
				background:#fff;
				&:nth-child(3n)
				{
					margin-right: 0;
				}
				&:nth-child(3n + 1)
				{
					margin-left: 0;
				}
			}
		}
	}
	@media(max-width:767px)
	{
		.description
		{
			p
			{
				margin-bottom: 32px;
			}
			.more
			{
				margin-bottom: 32px;
			}
		}
		.article-list
		{
			article
			{
				padding:32px 16px;
			}
		}
	}
}

#booking
{
	background-color: #FFF4EC;
	padding-top:120px;
	padding-bottom:120px;
	h2
	{
		text-align: center;
		font-size: 32px;
		line-height: 46px;
		letter-spacing: 1.28px;
		margin-bottom: 72px;
		span
		{
			justify-content:center;
		}
	}
	.data-list
	{
		display: flex;
		flex-wrap:wrap;
		>div
		{
			picture
			{
				display: block;
				overflow: hidden;
				border-radius: 8px;
				margin-bottom:8px;
				position: relative;
				padding-top:100%;
				img
				{
					position: absolute;
					top:0;
					left:0;
					object-fit: cover;
					object-position: center;
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			>div
			{
				display: flex;
				i
				{
					font-size: 48px;
					letter-spacing: 1.92px;
					line-height: 70px;
					margin-right:16px;
					color:$main-color;
				}
				dl
				{
					dt
					{
						font-size: 14px;
						line-height: 20px; 
						letter-spacing: 0.56px;
					}
				}
			}
			
		}
	}

	@media(min-width:768px)
	{
		.data-list
		{
			>div
			{
				margin-bottom:56px;
				picture
				{
					margin-bottom:32px;
				}
				&:nth-child(5n + 1)
				{
					margin-right:28px;
					width: calc(50% - 28px);
					picture
					{
						padding-top:50%;
					}
				}
				&:nth-child(5n + 2)
				{
					margin-left:28px;
					width: calc(50% - 28px);
					picture
					{
						padding-top:50%;
					}
				}
				&:nth-child(5n + 3)
				{
					width: calc((100% - 112px) / 3);
					margin-right:28px;
				}
				&:nth-child(5n + 4)
				{
					width: calc((100% - 112px) / 3);
					margin-right:28px;
					margin-left:28px;
				}
				&:nth-child(5n)
				{
					width: calc((100% - 112px) / 3);
					margin-left:28px;
				}
			}
			
		}
	}
	@media(max-width:767px)
	{
		h2
		{
			font-size: 24px;
			line-height: 36px; /* 150% */
			letter-spacing: 0.96px;
			margin-bottom: 32px;
		}
		.data-list
		{
			>div
			{
				margin-bottom: 32px;
				picture
				{
					margin-bottom: 24px;
				}
			}
		}
	}
}
#booking-bg
{
	display: block;
	width: 100%;
	img
	{
		display: block;
		width: 100%;
	}
}
#knowledge
{
	padding-top:120px;
	padding-bottom:120px;
	h2
	{
		font-size: 32px;
		line-height: 46px;
		letter-spacing: 1.28px;
		margin-bottom:72px;
	}
	.data-list
	{
		article
		{
			time
			{
				display: block;
				color: #A9A9A9;
				font-size: 14px;
				line-height: 20px;
				letter-spacing: 0.56px;
				margin-bottom: 16px;
			}
			h3
			{
				margin-bottom: 16px;
				font-size: 18px;
				line-height: 26px; /* 144.444% */
				letter-spacing: 0.72px;
				a
				{
					transition-duration:.5s;
					color:$text-color;
					&:hover
					{
						color:$main-color;
					}
				}
			}
			
			picture
			{
				display: block;
				position: relative;
				width: 100%;
				border-radius: 8px;
				overflow: hidden;
				padding-top:100%;
				img
				{
					position: absolute;
					top:0;
					left:0;
					height: 100%;
					width: 100%;
					display: block;
					object-fit: cover;
					object-position: center;
				}
			}
		}
	}
	@media(min-width:768px)
	{
		.data-list
		{
			display: flex;
			flex-wrap: wrap;
			article
			{
				margin:0 20px 40px 20px;
				width: calc((100% - 120px) / 4);
				&:nth-child(4n)
				{
					margin-right: 0;
				}
				&:nth-child(4n + 1)
				{
					margin-left: 0;
				}
				p
				{
					margin-bottom: 40px;
				}
			}
		}
	}
	@media(max-width:767px)
	{
		h2
		{
			font-size: 24px;
			line-height: 36px;
			letter-spacing: 0.96px;
			margin-bottom:32px;
		}
		.data-list
		{
			article
			{
				display: flex;
				flex-wrap:wrap;
				align-items:flex-start;
				margin-bottom:24px;
				time
				{
					width: 100%;
					margin-bottom: 8px;
				}
				h3
				{
					width: 100%;
					margin-bottom: 8px;
					font-size: 16px;
					line-height: 26px; /* 162.5% */
					letter-spacing: 0.64px;
					margin-bottom: 24px;
				}
				p
				{
					font-size: 14px;
					line-height: 20px;
					letter-spacing: 0.56px;
					width: calc(100% - 80px);
					padding-right: 10px;
					
				}
				picture
				{
					padding-top:0;
					width: 80px;
					height: 80px;
				}
				
			}
		}
	}
	.more
	{
		display: flex;
		justify-content:flex-end;
		a
		{
			background-color: $main-color;
			color:#fff;
			padding:16px 40px;
			border-radius: 50px;
		}
	}
}