@charset "utf-8";
#ctt.ctt_cont08 {
	padding-bottom:16rem;
}
#ctt h4 {
	font-size:5.5rem;
	text-align:center;
	margin-bottom:7rem;
}
.hotplace {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:4rem;
}
.hotplace li {
	border-radius:3rem;
	overflow:hidden;
}
.hotplace li a{
	position:relative;
	display:grid;
	align-content:flex-end;
	color:#fff;
	height:450px;
	padding:4rem;
	background-repeat:no-repeat;
	background-position:center top;
}
.hotplace li a:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0.85;
	transition:0.3s;
}
.hotplace li.item01 a { background-image:url("/theme/basic/img/cont08_bg01.jpg"); }
.hotplace li.item01 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(184,72,19,1) 65%); }

.hotplace li.item02 a { background-image:url("/theme/basic/img/cont08_bg02.jpg"); }
.hotplace li.item02 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(1,166,181,1) 65%); }

.hotplace li.item03 a { background-image:url("/theme/basic/img/cont08_bg03.jpg"); }
.hotplace li.item03 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,130,71,1) 65%); }

.hotplace li.item04 a { background-image:url("/theme/basic/img/cont08_bg04.jpg"); }
.hotplace li.item04 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(144,190,31,1) 65%); }

.hotplace li.item05 a { background-image:url("/theme/basic/img/cont08_bg05.jpg"); }
.hotplace li.item05 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(119,73,144,1) 65%); }

.hotplace li h5 ,
.hotplace li p {
	position:relative;
	z-index:1;
}
.hotplace li h5 {
	font-size:3rem;
	font-weight:500;
	margin-bottom:2rem;
}
.hotplace li p {
	line-height:1.5;
	padding-right:4rem;
	opacity:0.7;
}
.hotplace li .icon{
	position:absolute;
	bottom:5rem;
	right:4rem;
	width:3rem;
	height:3rem;
	transition:0.3s;
	z-index:1;
}
.hotplace li .icon span {
	position:absolute;
	top:50%;
	left:50%;
	translate:-50% -50%;
	width:100%;
	background-color:#fff;
	height:2px;	
}
.hotplace li .icon span:last-child {
	rotate:90deg;
}
.hotplace li a:hover:after {
	opacity:1;
}
.hotplace li a:hover .icon{
	rotate:180deg;
	z-index:1;
}

@media all and (max-width:1080px){	
	.hotplace {
		grid-template-columns: repeat(2, minmax(auto, 400px));
		justify-content:center;
	}
}
@media all and (max-width:780px){	
	.hotplace {
		grid-template-columns: 1fr;
		justify-content:center;
		gap:1.5rem;
	}	
	.hotplace li a{
		height:250px;
		padding:3rem;
		background-position:center center;
		background-size:cover;
	}
	.hotplace li.item01 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(184,72,19,1) 50%); }
	.hotplace li.item02 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(1,166,181,1) 50%); }
	.hotplace li.item03 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(255,130,71,1) 50%); }
	.hotplace li.item04 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(144,190,31,1) 50%); }
	.hotplace li.item05 a:after { background-image: linear-gradient(180deg, rgba(255,255,255,0) 20%, rgba(119,73,144,1) 50%); }
	.hotplace li .icon {
		bottom:4rem;
	}
}