@charset "utf-8";

/* CSS Document */
@media all{

	main *{
		color: #000;
		box-sizing: border-box;
	}
	
	#firstview{
		width: 100%;
		padding: 80px 20px 40px;
		text-align: center;
	}
	#firstview .image{
		width: calc(100% - 40px);
		max-width: 1000px;
		margin: 0 auto 20px;
	}
	#firstview .image img{
		width: 100%;
		aspect-ratio: 3/1;
	}
	#firstview .text{
		font-size: 2rem;
		line-height: 1.5;
		margin-bottom: 20px;
	}
	h1{
		font-size: 3rem;
		display: block;
		margin-bottom: 20px;
	}
	.period{
		font-size: 2rem;
		width: calc(100% - 40px);
		max-width: 1000px;
		margin: 0 auto;
		padding: 1rem;
		border: solid #000;
		border-width: 1px 0 1px 0;
	}
	
	#present{
		padding: 0 20px 40px;
	}
	#present .box{
		width: calc(100% - 40px);
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
	}
	#present .box .image{
		width: 150px;
	}
	#present .box .image img{
		width: 100%;
	}
	#present .box .textbox{
		width: calc(100% - 150px);
		padding-left: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	#present .title{
		font-size: 2rem;
		font-weight: 600;
		text-align: center;
		padding-bottom: 0.5em;
	}
	#present .box .text{
		font-size: 1.5rem;
		text-align: justify;
	}
	
	#hotels {
		padding: 0 20px 40px;
	}
	#hotels .dscrptn{
		width: calc(100% - 40px);
		max-width: 1000px;
		margin: 0 auto 40px;
		padding-top: 40px;
		border-top: solid 1px #000;
	}
	#hotels .dscrptn .title{
		font-size: 2rem;
		font-weight: 600;
		text-align: center;
		padding-bottom: 0.5em;
	}
	#hotels .dscrptn .text{
		font-size: 1.5rem;
		text-align: justify;
	}
	#hotels ul{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		max-width: 1040px;
		margin: 0 auto;
		position: relative;
	}
	#hotels li{
		width: calc(100% / 2 - 40px);
		margin: 0 20px 80px;
		border: solid 1px #000;
	}
	.hotelImage{
		width: 100%;
	}
	.hotelImage img{
		width: 100%;
		vertical-align: bottom;
		aspect-ratio: 25/17;
	}
	.hotelName{
		font-size: 2.1rem;
		text-align: center;
		background: #000;
		color: #fff;
		margin-bottom: 10px;
	}
	.hoteltext{
		font-size: 1.5rem;
		line-height: 1.5;
		padding: 1em;
	}
	
/* トップページ */
	#signature-cocktails{
		padding: 80px 20px;
		background: #E8EDE7;
	}
	#signature-cocktails .box{
		width: 100%;
		max-width: 940px;
		margin: 0 auto;
		display: flex;
	}
	#signature-cocktails .box .textbox{
		width: calc(100% - 400px);
		padding-right: 20px;
	}
	#signature-cocktails .box .textbox *{
		color: #5a2e13;
	}
	#signature-cocktails .box .textbox .title{
		font-size: 3.5rem;
		font-weight: 600;
	}
	#signature-cocktails .box .textbox .subtitle{
		font-size: 2rem;
		margin-bottom: 2em;
	}
	#signature-cocktails .box .textbox .text{
		font-size: 2rem;
		margin-bottom: 2em;
		text-align: justify;
	}
	#signature-cocktails .box .textbox .link{
		display: block;
		font-size: 1.5rem;
		width: 10em;
		text-align: center;
		color: #fff;
		background: #002f07;
		padding: 0.7em;
		text-decoration: none;
		transition: .3s;
	}
	#signature-cocktails .box .textbox .link:hover{
		opacity: .7;
	}
	#signature-cocktails .box .image{
		width: 400px;
	}
	#signature-cocktails .box .image img{
		width: 100%;
	}
	
}

@media only screen and (max-width: 567px){

	#firstview{
		padding: 0 0 40px;
	}
	#firstview .image{
		width: 100%;
	}
	#firstview .text{
		font-size: 1.6rem;
	}
	h1{
		font-size: 2.2rem;
	}
	.period{
		font-size: 1.5rem;
		margin: 0 auto 20px;
	}
	.dscrptn{
		font-size: 1.2rem;
	}
	
	#hotels li{
		width: 100%;
		margin: 0 0 40px;
		border: solid 1px #000;
	}
	.hotelName{
		font-size: 1.8rem;
	}
	
	#present .title{
		width: 100%;
	}
	#present .box{
		width: 100%;
		flex-direction: column;
	}
	#present .box .image{
		margin: 0 auto 20px;
	}
	#present .box .textbox{
		width: 100%;
		padding: 0;
	}
	
/* トップページ */
	#signature-cocktails .box{
		flex-direction: column;
	}
	#signature-cocktails .box .textbox{
		width: 100%;
		padding: 20px 0 0;
		order: 2;
	}
	#signature-cocktails .box .textbox .title{
		font-size: 2.6rem;
		text-align: center;
		line-height: 1.2;
	}
	#signature-cocktails .box .textbox .subtitle{
		font-size: 1.6rem;
		text-align: center;
	}
	#signature-cocktails .box .textbox .text{
		font-size: 1.6rem;
		margin-bottom: 1em;
	}
	#signature-cocktails .box .textbox .link{
		margin: 0 auto;
	}
	#signature-cocktails .box .image{
		width: 90%;
		margin: 0 auto;
		order: 1;
	}
	
}

@media screen and (min-width: 568px) and (max-width: 1024px){

	#hotels li{
		margin: 0 20px 40px;
	}
	.hotelName{
		font-size: 1.8rem;
	}

/* トップページ */
	#signature-cocktails .box .textbox .title{
		font-size: 3rem;
	}
	
}

@media screen and (min-width: 1025px), print{
	
}