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

/*ここからサンプル画像用CSS*/
.imagesample{
	width: 330px;
	height: 145px;
	object-fit: cover;
}
/*ここまでサンプル画像用CSS*/

/*===========ここから課題===============*/
ul{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 1000px;
	display: flex;
	justify-content: space-between;
}

.c-btn{
	cursor: pointer;
	transition: .2s cubic-bezier(0.45,0,0.55,1);
}

li#inversion a{
	background-color: #D92B4B;
	border: 2px solid #D92B4B;
	border-radius: 60px;
	color: #fff;
	font-weight: bold;
	width: 150px;
	padding: 15px 40px;
	text-align: center;
	display: block;
	text-decoration: none;
}

li#inversion a:hover{
	background-color: #fff;
	color: #D92B4B;
}

li#expansion{
	transition-duration: 4s;
}

li#expansion a{
	background-color: #F28705;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	width: 150px;
	padding: 15px 40px;
	text-align: center;
	display: block;
	text-decoration: none;
}

li#expansion a:hover{
	transform: scale(1.1);
	background-color: #F2B705;
	color: #fff;
}

li#marker a{
	width: 200px;
	padding: 15px 40px;
	text-align: center;
	text-decoration: none;
	color: #736B02;
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.06em;
	position: relative;
	z-index: 1;
}

li#marker a::before{
	background: olive;
	content: "";
	display: block;
	border-radius: 10px;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	transform: scale(0,1);
	transform-origin: center top;
	transition: transform .3s;
	z-index: -1;
}

li#marker a:hover{
	color: #fff;
}

li#marker a:hover::before{
	transform-origin: center top;
	transform: scale(1,1);
}

/*===========ここまで課題===============*/