@charset "utf-8";

/*-------------------------------------------------------------------------
	heading
-------------------------------------------------------------------------*/

h1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	padding: 32px;
	position: relative;

}
h1 small {
	font-size: 28px;
	line-height: 1.5;

}
h1 b {
	font-size: 40px;
	line-height: 1.5;
	margin-top: 16px;
}
h1:before, h1:after {
	content: "";
	width: 64px;
	height: 64px;
	position: absolute;
}

h1:before {
	border-left: solid 2px #6F6F6E;
	border-top: solid 2px #6F6F6E;
	top: 0;
	left: 0;
}

h1:after {
	border-right: solid 2px #6F6F6E;
	border-bottom: solid 2px #6F6F6E;
	bottom: 0;
	right: 0;
}



/*------------------------------------------------------------------------*/

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



	h1 {
		padding: 24px;

	}
	h1 small {
		font-size: 20px;

	}
	h1 b {
		font-size: 24px;
	}
	h1:before, h1:after {
		width: 32px;
		height: 32px;
	}

}



/*-------------------------------------------------------------------------
	categories
-------------------------------------------------------------------------*/

#index{
	padding-top: 50px;
}
#index h2.recommend{
	text-align: center;
	margin: 100px auto 50px;
	font-size: 30px;
}
#index ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0 -16px -64px -16px;
}
#index ul.recommend-items{
	margin: 0;
}
#index li {
	flex: none;
	width: calc(100% / 2 - 32px);
	margin: 0 16px 64px 16px;
}
#index ul.recommend-items li{
	width: calc(100% / 3 - 32px);
}

#index li a {
	display: block;
	height: 100%;
}
#index a:hover {
	text-decoration: none;
}

#index li p {
	font-size: 18px;
	line-height: 1.5;
}
#index li h2 {
	font-size: 24px;
	font-weight: bold;
	margin-top: 16px;
}
#index li img {
	height: 300px;
}




#index dl {
	text-align: center;
}
#index dt {
	position: relative;
}
#index dt:before {
	content: "";
	display: block;
	width: 200px;
	height: 90%;
	position: absolute;
	left: 0;
	top: 16px;
	z-index: -1;
}
#index dt img {
}
#index dd {
	margin-top: 24px;
}


#index .lily2 dt:before {
	background: linear-gradient(#E3B7A9, #fff);
}
#index .lily2 a:hover dt:before {
	background: #E3B7A9;
}
#index .vivomovetrend dt:before {
	background: linear-gradient(#e4c8b8, #fff);
}
#index .vivomovetrend a:hover dt:before {
	background: #e4c8b8;
}
#index .approachs70 dt:before {
	background: linear-gradient(#15580d, #fff);
}
#index .approachs70 a:hover dt:before {
	background: #15580d;
}
#index .forerunner965 dt:before {
	background: linear-gradient(#4E5E81, #fff);
}
#index .forerunner965 a:hover dt:before {
	background: #4E5E81;
}

/*------------------------------------------------------------------------*/

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


	#index li,
	#index ul.recommend-items li {
		flex: none;
		width: calc(100% - 32px);
		margin: 0 16px 64px 16px;
	}
	#index li p {
		font-size: 16px;
	}
	#index li h2,
	#index h2.recommend {
		font-size: 20px;
	}
	#index ul.recommend-items{
		display: block;
	}
	#index li img {
		height: 240px;
	}

	#index dt:before {
		width: 50%;
	}

}