/* Yadokko カード（フロント）
 * テーマのリンク色・ボタン上書き対策で要所に !important を付与する。 */

.yad-card {
	display: flex;
	gap: 16px;
	border: 1px solid #e4e4e7;
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
	margin: 1.5em 0;
	box-sizing: border-box;
}

.yad-card * {
	box-sizing: border-box;
}

.yad-card__image {
	flex: 0 0 200px;
	max-width: 200px;
}

.yad-card__image img {
	width: 100%;
	height: 100%;
	max-height: 180px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.yad-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* テーマ（Cocoon等）が見出しタグ（h3）に装飾的な背景・枠線・パディングを自動適用する
   ケースがあるため、レイアウトに関わる全プロパティをリセットする。 */
.yad-card__name {
	margin: 0 0 2px !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #18181b !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
	text-shadow: none !important;
	display: block !important;
}
.yad-card__name::before,
.yad-card__name::after {
	content: none !important;
	display: none !important;
}
.yad-card__name a {
	color: inherit !important;
	text-decoration: none !important;
}
.yad-card__name a:hover {
	text-decoration: underline !important;
}

.yad-card__name-en {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 12px !important;
	color: #71717a !important;
	background: none !important;
}

.yad-card__address {
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: #52525b !important;
	background: none !important;
}
.yad-card__address a {
	color: inherit !important;
	text-decoration: none !important;
}

.yad-card__meta {
	margin: 0 0 8px !important;
	padding: 0 !important;
	display: flex;
	gap: 12px;
	align-items: center;
	background: none !important;
}
.yad-card__meta a {
	display: flex;
	gap: 12px;
	align-items: center;
	text-decoration: none !important;
	color: inherit !important;
}

.yad-card__review {
	color: #f59e0b !important;
	font-weight: 600;
	font-size: 14px;
}

.yad-card__review-count {
	color: #71717a !important;
	font-weight: 400;
	font-size: 12px;
}

.yad-card__price {
	color: #18181b !important;
	font-weight: 700;
	font-size: 15px;
}

.yad-card__desc {
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: #52525b !important;
	line-height: 1.6 !important;
	background: none !important;
}
.yad-card__desc a {
	color: inherit !important;
	text-decoration: none !important;
}

/* ボタングリッド */
.yad-card__buttons {
	display: grid;
	grid-template-columns: repeat( var( --yad-cols-pc, 2 ), 1fr );
	gap: 8px;
}

/* ボタン本体 */
.yad-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	text-decoration: none !important;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --svc-text, #fff ) !important;
	background: var( --svc, #2271b1 );
	border: 2px solid var( --svc, #2271b1 );
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
	overflow: hidden;
}

.yad-btn:hover {
	transform: translateY( -1px );
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.18 );
	opacity: 0.96;
	color: var( --svc-text, #fff ) !important;
}

.yad-btn__label {
	display: block;
}

.yad-btn__copy {
	display: block;
	font-size: 11px;
	font-weight: 400;
	margin-top: 2px;
	opacity: 0.92;
}

/* ── 形状 ─────────────────────────── */
.yad-shape-rounded .yad-btn { border-radius: 8px; }
.yad-shape-pill .yad-btn { border-radius: 999px; }
.yad-shape-square .yad-btn { border-radius: 0; }

/* ── スタイル ─────────────────────── */
.yad-style-outline .yad-btn {
	background: #fff;
	color: var( --svc, #2271b1 ) !important;
}
.yad-style-outline .yad-btn:hover {
	background: var( --svc, #2271b1 );
	color: var( --svc-text, #fff ) !important;
}

.yad-style-gradient .yad-btn {
	background: linear-gradient( 135deg, var( --svc, #2271b1 ) 0%, rgba( 0, 0, 0, 0.15 ) 320% );
	border-color: transparent;
}

/* ── アニメーション ───────────────── */
.yad-anim-shine .yad-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient( 120deg, transparent, rgba( 255, 255, 255, 0.5 ), transparent );
	transform: skewX( -20deg );
}
.yad-anim-shine .yad-btn:hover::after {
	animation: yad-shine 0.8s ease;
}
@keyframes yad-shine {
	to { left: 140%; }
}

.yad-anim-pulse .yad-btn:hover {
	animation: yad-pulse 0.9s ease infinite;
}
@keyframes yad-pulse {
	0%, 100% { transform: translateY( -1px ) scale( 1 ); }
	50% { transform: translateY( -1px ) scale( 1.02 ); }
}

/* クレジット（無料・プレミアムとも同一表示。Yadokkoは十分控えめな名前でサイトを
   邪魔しないため、プレミアム版だけ縮小・薄色にする差別化はやめた・2026/07/05）。 */
.yad-credit {
	margin-top: 10px;
	text-align: right;
}
.yad-credit a {
	font-size: 12px;
	color: #a1a1aa !important;
	text-decoration: none !important;
}

/* ── レスポンシブ ─────────────────── */
@media ( max-width: 600px ) {
	.yad-card {
		flex-direction: column;
		gap: 12px;
	}
	.yad-card__image {
		flex-basis: auto;
		max-width: 100%;
	}
	.yad-card__image img {
		max-height: 200px;
	}
	.yad-card__buttons {
		grid-template-columns: repeat( var( --yad-cols-mb, 1 ), 1fr );
	}
}