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

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

/*========================================
  ここから課題
========================================*/

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

.c-btn {
	background: #ff701e;
	border: 2px solid #ff701e;
	border-radius: 60px;
	color: #fff;
	display: block;
	font-weight: bold;
	max-width: 300px;
	padding: 15px 40px;
	text-align: center;
}

.c-btn:hover {
	background: #fff;
	color: #ff701e;
}

.c-bnr {
	background: #fff;
	border: 2px solid #ff701e;
	border-radius: 60px;
	color: #ff701e;
	display: block;
	font-weight: bold;
	max-width: 300px;
	padding: 15px 40px;
	text-align: center;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.c-bnr::after {
	background: #ff701e;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}
.c-bnr:hover {
	color: #fff;
}
.c-bnr:hover::after {
	transform: scale(1, 1);
}
 

.c-txt {
	background: #ff701e;
	border: 2px solid #ff701e;
	border-radius: 60px;
	color: #fff;
	display: block;
	font-weight: bold;
	max-width: 300px;
	padding: 15px 40px;
	text-align: center;
 	box-shadow: 0 4px 0 #d01a0a; /* ボタンの影 */
}

.c-txt:hover {
  transform: translateY(4px);
  box-shadow: none;
}