@charset "utf-8";

.hc-button-more {
	width: 320px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: 30px;
	font-size: 16px;
	color: #333 !important;
	background: #fff;
	line-height: 1.5;
	min-height: 44px;
	font-weight: lighter;
	border: solid 2px #EDEDED;
	padding: 8px 64px;
	cursor: pointer;
}

.hc-button-more::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 27px;
	content: '';
	width: 10px;
	height: 6px;
	background: url(/common/rwd/imgs/top/icon_more.svg) no-repeat center / 100% auto;
}

.hc-button-more:hover {
	color: #e60012 !important;
	border: solid 2px #e60012;
	text-decoration: none !important;
}

._positionAdjust {
	margin-right: 25.89%;
}

.mt24 {
	margin-top: 24px;
}

@media screen and (max-width: 767px) {
	.hc-button-more {
		width: 280px;
		font-size: 14px;
		line-height: 2.1;
		min-height: 40px;
		padding: 0 44px;
	}

	._positionAdjust {
		margin: 0;
	}
}

@media screen and (max-width: 767px) {
	.hc-button-more::after {
		right: 17px;
	}
}

@media screen and (max-width: 767px) {
	.hc-button-more:hover {
		color: #333 !important;
		border: solid 2px #EDEDED;
	}
}

.hc-button-02 {
	width: 320px;
	box-sizing: border-box;
	display: block;
	position: relative;
	min-height: 44px;
	border-radius: 30px;
	background: #fff;
}

@media screen and (max-width: 767px) {
	.hc-button-02 {
		width: 280px;
		font-size: 13px;
		line-height: 1.2;
		min-height: 40px;
	}
}

.hc-button-02:hover {
	text-decoration: none !important;
	background: linear-gradient(-45deg, #FF7C4B, #e60012);
	color: #fff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);
}

@media screen and (max-width: 767px) {
	.hc-button-02:hover {
		background: #fff;
		color: #e60012;
		box-shadow: none;
	}
}


.hc-button-02:hover.hc-button-02 span::after {
	border: none;
}

@media screen and (max-width: 767px) {
	.hc-button-02:hover.hc-button-02 span::after {
		position: absolute;
		top: 0;
		left: 0;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		border-radius: 30px;
		content: '';
		border: solid 2px #e60012;
	}
}

.hc-button-02 span {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: bold;
	padding: 11px 32px;
}

@media screen and (max-width: 767px) {
	.hc-button-02 span {
		padding: 10px 32px;
		min-height: 40px;
	}
}

.hc-button-02 span::after {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: 30px;
	content: '';
	border: solid 2px #e60012;
}

.hc-button--next span {
	padding: 11px 56px 11px 32px;
}

@media screen and (max-width: 767px) {
	.hc-button-02.hc-button--next span {
		padding: 10px 40px 10px 16px;
	}
}

@media screen and (max-width: 767px) {
	.hc-button-03.hc-button--next span {
		padding: 9px 40px 9px 16px;
	}
}

.hc-button--next::before,
.hc-button--next::after  {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	content: '';
}

.hc-button--next::before {
	background: url(/common/rwd/imgs/top/icon_arrow_white.svg) no-repeat center / 100% auto;
	width: 10px;
	height: 5px;
	z-index: 1;
	right: 17px;
}

@media screen and (max-width: 767px) {
	.hc-button-02.hc-button--next::before {
		right: 15px;
	}
}

@media screen and (max-width: 767px) {
	.hc-button-03.hc-button--next::before {
		right: 14px;
	}
}

.hc-button--next::after {
	background: linear-gradient(-45deg, #FF7C4B, #e60012);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	right: 6px;
}

@media screen and (max-width: 767px) {
	.hc-button-02.hc-button--next::after {
		width: 30px;
		height: 30px;
	}
}

@media screen and (max-width: 767px) {
	.hc-button-03.hc-button--next::after {
		width: 26px;
		height: 26px;
	}
}

.hc-button--next:hover::before {
	background: url(/common/rwd/imgs/top/icon_arrow_red.svg) no-repeat center / 100% auto;
	right: 17px;
}

@media screen and (max-width: 767px) {
	.hc-button-02.hc-button--next:hover::before {
		background: url(/common/rwd/imgs/top/icon_arrow_white.svg) no-repeat center / 100% auto;
		right: 15px;
	}
}

@media screen and (max-width: 767px) {
	.hc-button-03.hc-button--next:hover::before {
		background: url(/common/rwd/imgs/top/icon_arrow_white.svg) no-repeat center / 100% auto;
		right: 14px;
	}
}

.hc-button--next:hover::after {
	background: #fff;
	right: 6px;
}

@media screen and (max-width: 767px) {
	.hc-button--next:hover::after {
		background: linear-gradient(-45deg, #FF7C4B, #e60012);
	}
}