/* lady5 はじエス送客カード（古い機種でも動く書き方だけ：transform と @keyframes まで） */
.l5hc {
	margin: 20px 0 16px;
	clear: both;
	text-align: left;
}
.l5hc__box {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 16px 18px;
	background: #fff;
	border: 2px solid #fbd3dc;
	border-radius: 12px;
	text-align: center;
}
.l5hc .l5hc__title {
	margin: 0 0 8px;
	padding: 0;
	color: #ef6e95;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
}
.l5hc .l5hc__text {
	margin: 0 0 14px;
	padding: 0;
	color: #5c5c5c;
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
}
.l5hc .l5hc__action {
	margin: 0;
	padding: 4px 0 6px;
}
/*
 * ボタン。テーマの「.wrap .contents .movie-single a」（青い文字）より強くするため、
 * カードのクラスを重ねた詳しい指定にしている（!important は使わない）。
 */
.l5hc .l5hc__box .l5hc__action a.l5hc__btn,
.l5hc .l5hc__box .l5hc__action a.l5hc__btn:link,
.l5hc .l5hc__box .l5hc__action a.l5hc__btn:visited {
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
	padding: 12px 28px 10px;
	background: #ef6e95;
	border: 0;
	border-bottom: 3px solid #c9416b;
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-animation: l5hc-float 2.4s ease-in-out infinite;
	animation: l5hc-float 2.4s ease-in-out infinite;
}
.l5hc .l5hc__box .l5hc__action a.l5hc__btn:hover,
.l5hc .l5hc__box .l5hc__action a.l5hc__btn:focus {
	background: #f07f9f;
	color: #fff;
	text-decoration: none;
}
.l5hc .l5hc__box .l5hc__action a.l5hc__btn:active {
	color: #fff;
	text-decoration: none;
	-webkit-animation: l5hc-pop 0.35s ease-out;
	animation: l5hc-pop 0.35s ease-out;
}
.l5hc .l5hc__note {
	margin: 4px 0 0;
	padding: 0;
	color: #888;
	font-size: 12px;
	line-height: 1.6;
	text-align: left;
}
.l5hc .l5hc__box + .l5hc__note {
	margin-top: 8px;
}

/* ふわふわ（上下 5px、2.4秒で1回） */
@-webkit-keyframes l5hc-float {
	0%   { -webkit-transform: translateY(0); transform: translateY(0); }
	50%  { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
	100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes l5hc-float {
	0%   { -webkit-transform: translateY(0); transform: translateY(0); }
	50%  { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
	100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

/* タップで「ぴょこん」 */
@-webkit-keyframes l5hc-pop {
	0%   { -webkit-transform: scale(1); transform: scale(1); }
	40%  { -webkit-transform: scale(0.9, 1.1) translateY(-6px); transform: scale(0.9, 1.1) translateY(-6px); }
	70%  { -webkit-transform: scale(1.06, 0.94); transform: scale(1.06, 0.94); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes l5hc-pop {
	0%   { -webkit-transform: scale(1); transform: scale(1); }
	40%  { -webkit-transform: scale(0.9, 1.1) translateY(-6px); transform: scale(0.9, 1.1) translateY(-6px); }
	70%  { -webkit-transform: scale(1.06, 0.94); transform: scale(1.06, 0.94); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion: reduce) {
	.l5hc .l5hc__box .l5hc__action a.l5hc__btn,
	.l5hc .l5hc__box .l5hc__action a.l5hc__btn:active {
		-webkit-animation: none;
		animation: none;
	}
}

@media screen and (max-width: 430px) {
	.l5hc__box {
		padding: 14px 12px 16px;
	}
	.l5hc .l5hc__title {
		font-size: 15px;
	}
	.l5hc .l5hc__box .l5hc__action a.l5hc__btn {
		display: block;
		padding: 12px 10px 10px;
	}
}