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

/*===========================================
  /support/tv/enjoy/css/longtime.css
=============================================*/
#contents .topArea {
	position: relative;
	width: 100%;
}

#contents .topArea h1 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: black;
	background: rgba(255, 255, 255, 0.7);
	padding: 7px 0;
	margin: 0;
	text-align: center;
	white-space: nowrap;
	font-size: clamp(15px, 3.5vw, 50px);
	letter-spacing: 3px;	
}

#contents .topArea img {
	width: 100%;
	display: block;
}

#contents .flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
    background: #DEEBF7;
    padding: 1em 1em 1em 2em;
	margin: 2em 0;
}

#contents .flex .txt {
	width: 100%;
	margin-right: 2em;
}

#contents .flex .txt h2 {
	color: #006699;
	text-align: center;
}

#contents .block{
	display: block;
}

#contents .flex .txt p {
	background: #fff;
	margin: 0;
    padding: 1em;
}

#contents .flex .pct {
	line-height: 0;
}

#contents a.s5-linkV3 {
    color: #3865e0;
}

#contents a.s5-linkV3:after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D'%233865e0'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20width%3D'32px'%20height%3D'32px'%20viewBox%3D'0%200%2032%2032'%3E%3Cpath%20d%3D'M25.6%2C16l-16%2C16l-3.2-3.2L19.1%2C16L6.4%2C3.2L9.6%2C0L25.6%2C16z'%2F%3E%3C%2Fsvg%3E");
}

@media screen and (max-width: 820px){	
	#contents .topArea h1 {
		padding: 5px 0;
	}
	
	#contents .flex {
		padding: 1em;
	}
	
	#contents .flex .txt {
		margin-right: 1em;
	}
	
}

@media screen and (max-width: 700px){	
	#contents .topArea h1 {
		letter-spacing: 0;	
	}
	
	#contents .flex {
		flex-direction: column;
		width: auto;
	}
	
	#contents .flex .txt {
		margin-right: 0;
		margin-bottom: 1em;
	}
	
	#contents .flex .pct img {
		width: 100%;
	}
	
}

@media screen and (max-width: 420px){
	#contents .flex .txt h2 {
	    font-size: 1.25rem;
	}
}