@charset "UTF-8";
/* CSS Document */

#guide h2.guide{
	text-align: center;
	font-size:2em;
	margin-bottom:1em;
}
#guide .hotel-area{
	margin-top:2em;
}
#guide .content-guide{
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 1.5em;
	align-items: start;
	margin-bottom: 3em;
}
#guide .content-guide:last-child{
	margin-bottom: 0;
}
#guide .content-guide p.img-guide{
	grid-column: 1;
	grid-row: 1 / 3;
	margin: 0;
}
#guide .content-guide p.img-guide img{
	width: 100%;
	display: block;
}
#guide .content-guide p.guidetitle{
	grid-column: 2;
	grid-row: 1;
	font-size: 1.3em;
	font-weight: bold;
	margin: 0 0 .5em;
}
#guide .content-guide p.guidetext{
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	line-height: 1.8;
}
#guide .content-guide:nth-child(even){
	grid-template-columns: 1fr 280px;
}
#guide .content-guide:nth-child(even) p.img-guide{
	grid-column: 2;
}
#guide .content-guide:nth-child(even) p.guidetitle,
#guide .content-guide:nth-child(even) p.guidetext{
	grid-column: 1;
}

@media only screen and (max-width: 600px){
	#guide .content-guide,
	#guide .content-guide:nth-child(even){
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		row-gap: .8em;
	}
	#guide .content-guide p.img-guide,
	#guide .content-guide:nth-child(even) p.img-guide{
		grid-column: 1;
		grid-row: 1;
	}
	#guide .content-guide p.guidetitle,
	#guide .content-guide:nth-child(even) p.guidetitle{
		grid-column: 1;
		grid-row: 2;
	}
	#guide .content-guide p.guidetext,
	#guide .content-guide:nth-child(even) p.guidetext{
		grid-column: 1;
		grid-row: 3;
	}
}

#guide .hotel-area .hotel{
	display: grid;
	grid-template-columns: 6fr 4fr;
	column-gap: 1.5em;
	align-items: start;
	margin-bottom: 2em;
}
#guide .hotel-area .hotel:last-child{
	margin-bottom: 0;
}
#guide .hotel-area .hotel p.map{
	grid-column: 1;
	margin: 0;
}
#guide .hotel-area .hotel p.map iframe,
#guide .hotel-area .hotel p.map img{
	width: 100%;
	display: block;
}
#guide .hotel-area .hotel div.hotel-info{
	grid-column: 2;
}
#guide .hotel-area .hotel p.hotelname{
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	margin: 0 0 .5em;
}
#guide .hotel-area .hotel p.hoteltext{
	text-align: center;
	margin: 0;
}

@media only screen and (max-width: 600px){
	#guide .hotel-area .hotel{
		grid-template-columns: 1fr;
		row-gap: .5em;
	}
	#guide .hotel-area .hotel div.hotel-info{
		grid-column: 1;
	}
}