@charset "utf-8";


#contentHeader {
	background : url("../../../common/img/bg_content_header_overlay.png"),
	url("../img/img_content_header.jpg");
	background-color : #ffffff;
	background-repeat : repeat, no-repeat;
	background-position : left center, right center;
}
#index #ctsList {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 16px;
}
#index #ctsList li {
	margin-bottom : 32px;
	padding : 16px;
	background : url(/common/img/bg_line_oblique_white.png) 0 0 repeat #dddddd;
}

#index #ctsList li > .inner {
	display : flex;
	flex-basis : 100%;
	flex-direction : column;
	flex-grow : 1;
	background-color : #ffffff;
}
#index #ctsList li .ctsImg {
	overflow : hidden;
	height : 180px;
	margin-bottom : 16px;
}
#index #ctsList li .ctsImg img {
	width : 100%;
}
#index #ctsList li .contentTitle {
	font-family : "GenShin_bold_GK";
	font-size : 24px;
	line-height : 1;
	margin : 0 24px;
	margin-bottom : 16px;
}
#index #ctsList li .discription {
	flex-grow : 1;
	margin : 0 24px;
	margin-bottom : 16px;
}

#index #ctsList li .link {
	margin : 0 24px 24px;
	text-align : center;
}
#index #ctsList li .link a {
	display : block;
	position : relative;
	font-family : "GenShin_regular_JIS2";
	line-height : 1;
	padding : 16px 24px 16px 32px;
	transition : 0.3s ease;
	transition : 0.3s ease-out;
	text-decoration : none;
	color : #999999;
	background : #eeeeee;
}
#index #ctsList li .link a::after {
	display : inline-block;
	position : absolute;
	top : 42%;
	left : 12px;
	width : 6px;
	height : 6px;
	content : "";
	transform : rotate(45deg);
	border-width : 1px 1px 0 0;
	border-style : solid solid none none;
	border-color : #999999 #999999 transparent transparent;
}
#index #ctsList li .link a:hover {
	margin-right : 6px;
	margin-left : -6px;
	color : #ffffff;
	background : #005bac;
	box-shadow : 4px 4px rgba(0, 0, 0, 0.2);
}
#index #ctsList li .link a:hover::after {
	border-color : #ffffff #ffffff transparent transparent;
}


/* --- for pc --- */
@media screen and (min-width: 1024px) {
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	#index #ctsList {
		grid-template-columns : 1fr;
	}
	#index #ctsList li {
		margin-bottom : 16px;
	}
	#index #ctsList li:nth-child(2n) {
		margin-left : 0;
	}
	#index #ctsList li .contentTitle {
		font-size : 4.8vw;
		margin-bottom : 8px;
	}
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
}