/* ==========================================================
   SVG移行: いいね・キープボタン用CSS
   style.css の後に読み込むこと
   ========================================================== */

/* ::before 無効化
-------------------------------------------------- */
/* ボタン本体（16セレクタ） */
.button-good-list::before,
.button-keep-list::before,
.button-good-anime::before,
.button-keep-anime::before,
.button-good-bdr::before,
.button-keep-bdr::before,
.button-good-rating::before,
.button-keep-rating::before,
.button-good-fortune::before,
.button-keep-fortune::before,
.button-good-kanji::before,
.button-good-rank::before,
.button-keep-rank::before,
.reaction-good::before,
.reaction-keep::before,
.good-btn::before,
/* 詳細モーダル: 親 li にもアイコンがある */
.modal-detail ul.rating-reaction .good::before,
.modal-detail ul.rating-reaction .keep::before,
/* リアクション管理モーダル: .btn.good / .btn.keep にもアイコンがある */
.reaction-management-lists .btn.good::before,
.reaction-management-lists .btn.keep::before{
	content: none !important;
}
/* 注: .btn.delete::before（ゴミ箱 \f2ed）は無効化しない */

/* SVGアイコン共通
-------------------------------------------------- */
.svg-keep-good{
	display: inline-block;
	vertical-align: middle;
	pointer-events: none;
	overflow: visible;
}

/* 状態制御
-------------------------------------------------- */
/* いいね OFF */
.gid > .svg-keep-good path,
.kgid > .svg-keep-good path{
	fill: none;
	stroke: #ff9a9a;
	stroke-width: 55;
	transition: fill 0.15s ease, stroke 0.15s ease;
}
/* いいね ON */
.gid.on > .svg-keep-good path,
.kgid.on > .svg-keep-good path{
	fill: #ff9a9a;
	stroke: #ff9a9a;
	stroke-width: 55;
}
/* キープ OFF */
.fid > .svg-keep-good path{
	fill: #bbb;
	transition: fill 0.15s ease;
}
/* キープ ON */
.fid.on > .svg-keep-good path{
	fill: #5ec84e;
}
/* 詳細モーダル専用色 */
.modal-detail ul.rating-reaction .good .button-good-rating > .svg-keep-good path{
	stroke: #ffa3a3;
}
.modal-detail ul.rating-reaction .good .button-good-rating.on > .svg-keep-good path{
	fill: #ffa3a3;
	stroke: #ffa3a3;
	stroke-width: 55;
}
.modal-detail ul.rating-reaction .keep .button-keep-rating > .svg-keep-good path{
	fill: #ccc;
}
.modal-detail ul.rating-reaction .keep .button-keep-rating.on > .svg-keep-good path{
	fill: #30c25c;
}

/* mo.js アニメーション
-------------------------------------------------- */
.gid, .kgid, .fid{
	position: relative;
	overflow: visible;
}
/* いいね: pop */
@keyframes nazuke-heart-pop{
	0%   { transform: scale(1); }
	40%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}
.svg-keep-good-heart-pop{
	animation: nazuke-heart-pop 0.2s ease-out;
}
/* キープ: pop（ハートより控えめ） */
@keyframes nazuke-bookmark-pop{
	0%   { transform: scale(1); }
	40%  { transform: scale(1.14); }
	100% { transform: scale(1); }
}
.svg-keep-good-bookmark-pop{
	animation: nazuke-bookmark-pop 0.18s ease-out;
}

/* 検索結果 list
-------------------------------------------------- */
.button-good-list > .svg-keep-good,
.button-keep-list > .svg-keep-good{
	font-size: 2.0rem;
	display: block;
	margin: 0 auto 4px;
}
@media screen and (min-width:768px) {
	.button-good-list > .svg-keep-good,
	.button-keep-list > .svg-keep-good{
		display: inline-block;
		margin: 0;
		padding-right: 5px;
	}
	.button-keep-list > .svg-keep-good{
		font-size: 2.0rem;
	}
}

/* いいね/キープ管理 reaction
-------------------------------------------------- */
.reaction-good > .svg-keep-good,
.reaction-keep > .svg-keep-good{
	font-size: 2.0rem;
	display: block;
	margin: 0 auto;
}
@media screen and (min-width:768px) {
	.reaction-good > .svg-keep-good,
	.reaction-keep > .svg-keep-good{
		display: inline-block;
		margin: 0;
		padding-right: 5px;
	}
	.reaction-keep > .svg-keep-good{
		font-size: 2.0rem;
	}
}

/* テーマ詳細 anime
-------------------------------------------------- */
.button-good-anime > .svg-keep-good{
	font-size: 1.6rem;
	margin-right: .3em;
}
.button-keep-anime > .svg-keep-good{
	font-size: 1.6rem;
}

/* 名前一覧 bdr
-------------------------------------------------- */
.button-good-bdr > .svg-keep-good{
	font-size: 1.5rem;
	margin-right: 3px;
}
.button-keep-bdr > .svg-keep-good{
	font-size: 1.4rem;
	vertical-align: -2px;
}
@media screen and (min-width:768px) {
	.button-good-bdr > .svg-keep-good{
		font-size: 1.6rem;
	}
	.button-keep-bdr > .svg-keep-good{
		font-size: 1.5rem;
	}
}

/* 姓名判断 fortune
-------------------------------------------------- */
.button-good-fortune > .svg-keep-good,
.button-keep-fortune > .svg-keep-good{
	font-size: 1.2rem;
	margin-right: .2em;
}

/* 漢字詳細 kanji
-------------------------------------------------- */
.button-good-kanji > .svg-keep-good{
	font-size: 1.2rem;
}
@media screen and (min-width:768px) {
	.button-good-kanji > .svg-keep-good{
		font-size: 1.4rem;
		padding-right: 5px;
	}
}

/* ランキング rank
-------------------------------------------------- */
.button-good-rank > .svg-keep-good{
	font-size: 1.6rem;
	margin-right: .2em;
}
.button-keep-rank > .svg-keep-good{
	font-size: 1.8rem;
}
@media screen and (min-width:768px) {
	.button-good-rank > .svg-keep-good{
		font-size: 1.8rem;
	}
	.button-keep-rank > .svg-keep-good{
		font-size: 2.0rem;
	}
}

/* 詳細モーダル rating
-------------------------------------------------- */
.button-good-rating > .svg-keep-good,
.button-keep-rating > .svg-keep-good{
	margin-right: .3em;
}

/* 漢字いいね管理 good-btn
-------------------------------------------------- */
.good-btn > .svg-keep-good{
	font-size: 1.8rem;
}