/* =========================================================
   GRM UI Style（front優先版）
   ※ レイアウトはfront.css
   ※ ここは見た目のみ
========================================================= */

html,body {
	background-color:#f7f7f7 !important;
}

/* =========================
   GRM ベース背景
========================= */
.grm-front {
	background: transparent;
	min-height: 100vh;
}


/* =========================================================
   Wrapper
========================================================= */

.grm-wrapper{
	color:inherit;
}

/* =========================
   GRM ベース背景
========================= */
.grm-front {
	background: transparent;
	min-height: 100vh;
}

/* =========================================================
   カードUI（見た目のみ）
========================================================= */

/* カード外観 */
.grm-card{
	background:#fff;
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* 画像ラップ */
.grm-card-image{
	position:relative;
	overflow:hidden;
}

/* 画像 */
.grm-card-image-inner img{
	width:100%;
	height:auto;
	display:block;
}

/* 本文（余白のみ） */
.grm-card-body{
	padding:15px;
}

/* タイトル */
.grm-card-title{
	font-size:16px;
	font-weight:700;
	margin-bottom:10px;
}

/* 説明 */
.grm-card-excerpt{
	font-size:14px;
	color:#555;
	margin-bottom:12px;
}

/* 続きを見る */
.grm-card-more{
	font-size:13px;
	font-weight:700;
}


/* =========================================================
   バッジUI
========================================================= */

.grm-card-meta{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-bottom:10px;
	align-items:flex-start;
}

.badge.genre{
	background:#111;
	color:#fff;
}


/* =========================================================
   広告UI（見た目のみ）
========================================================= */

.grm-ad-card{
	opacity:.97;
}

.grm-ad-card:hover{
	opacity:1;
}

.grm-ad-card .badge.genre{
	background:#ff6a00;
}


/* =========================================================
   フィルターUI
========================================================= */

.grm-filter{
	display:flex;
	flex-direction:column;
	gap:16px;
}

.filter-chip{
	padding:7px 14px;
	border-radius:999px;
	border:1px solid #ddd;
	cursor:pointer;
}

.filter-chip.active{
	background:#111;
	color:#fff;
}


/* =========================================================
   ローディングUI
========================================================= */

.grm-loading{
	display:none;
	justify-content:center;
}

.grm-spinner{
	width:30px;
	height:30px;
	border:3px solid #ddd;
	border-top:3px solid #111;
	border-radius:50%;
	animation:spin 1s linear infinite;
}

@keyframes spin{
	100%{transform:rotate(360deg);}
}
/* =========================
   カード共通
========================= */

.grm-card {
	background: #ffffff;
	border-radius: 20px;
	padding: 0;
	height: 100%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	transition: all 0.3s ease;
	overflow: hidden;
}

.grm-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

/* =========================
   リンク全体
========================= */

.grm-card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
}

/* =========================
   画像
========================= */

.grm-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eee;
}

.grm-card-image-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.grm-card-image img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	display: block;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 初期状態 */
.img-main {
	opacity: 1;
	z-index: 1;
}

.img-hover {
	opacity: 0;
	z-index: 2;
}

/* ホバー */
.grm-card:hover .img-main {
	opacity: 0;
	transform: scale(1.05);
}

.grm-card:hover .img-hover {
	opacity: 1;
	transform: scale(1.05);
}

/* =========================
   本文
========================= */

.grm-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* =========================
   バッジ
========================= */

.grm-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.badge {
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f4f1ec;
	color: #555;
}

.badge.area {
	background: #e8f3ec;
	color: #3a7d5d;
}

.badge.genre {
	background: #f3e8ec;
	color: #8a4b61;
}

/* =========================
   タイトル
========================= */

.grm-card-title {
	font-size: 15px;
	font-weight: 600;
	margin: 6px 0 4px;
	line-height: 1.4;
	color: #222;
}

/* =========================
   説明
========================= */

.grm-card-excerpt {
	font-size: 13px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 8px;
}

/* =========================
   CTA
========================= */

.grm-card-more {
	font-size: 13px;
	color: #999;
	transition: all 0.2s ease;
	margin-top: auto;
}

.grm-card:hover .grm-card-more {
	color: #000;
	transform: translateX(4px);
}


/* =========================
   クーポンカード
========================= */

.coupon-card {
	background: linear-gradient(135deg, #fff8e8, #ffffff);
	border: 1px solid #f0e3c2;
}

.coupon-label {
	display: inline-block;
	font-size: 11px;
	padding: 4px 10px;
	background: #f5c542;
	color: #fff;
	border-radius: 999px;
	margin-bottom: 6px;
}

.coupon-text {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	margin-bottom: 6px;
}

.coupon-meta {
	font-size: 12px;
	color: #888;
	margin-bottom: 10px;
}

.coupon-btn {
	display: inline-block;
	font-size: 13px;
	padding: 6px 14px;
	background: #222;
	color: #fff;
	border-radius: 999px;
}

/* =========================
   フィルターUI
========================= */

.grm-filter {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.grm-filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.filter-label {
	font-size: 13px;
	color: #888;
	margin-right: 6px;
}

.filter-chip {
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #ddd;
	font-size: 12px;
	text-decoration: none;
	color: #555;
	transition: all 0.2s;
}

.filter-chip:hover {
	background: #f8f6f2;
}

.filter-chip.active {
	background: #222;
	color: #fff;
	border-color: #222;
}

/* =========================
   フィルタークリア
========================= */

.grm-filter-clear {
	margin-top: 6px;
}

.filter-clear-btn {
	display: inline-block;
	font-size: 12px;
	color: #999;
	text-decoration: none;
	padding: 4px 8px;
	border-radius: 6px;
	transition: all 0.2s;
}

.filter-clear-btn:hover {
	color: #000;
	background: #f2f2f2;
}

/* =========================
   ローディング
========================= */

.grm-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.7);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* スピナー */

.grm-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #ddd;
	border-top: 4px solid #222;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}