/*
 * access_analytics_api_automation.css
 * 「APIでアクセス解析を自動化する」コラム記事の埋め込み部品
 * API早見表は aa- 、比較表は cmp- を接頭辞にしています。
 */

/* ============================================================
   API早見表（タブ切り替え）
   ============================================================ */

#aaLineup,
#cmpTable {
	box-sizing: border-box;
	margin: 1.4rem 0;
}

#aaLineup *,
#aaLineup *::before,
#aaLineup *::after {
	box-sizing: border-box;
}

.aa-lineup__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}

.aa-lineup__tab {
	appearance: none;
	border: 1px solid #d5dee7;
	background: #fff;
	color: #55606c;
	font-size: .84rem;
	font-weight: 700;
	padding: .55rem 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.aa-lineup__tab:hover {
	border-color: #7bb8f2;
	color: #0175d8;
}

.aa-lineup__tab.is-active {
	background: #0175d8;
	border-color: #0175d8;
	color: #fff;
	transform: translateY(-1px);
}

.aa-lineup__panels {
	background: #f4f8fb;
	border-radius: 1rem;
	padding: 1.4rem 1.3rem;
}

.aa-lineup__panel {
	animation: aa-panel-in .35s ease both;
}

@keyframes aa-panel-in {
	0% { opacity: 0; transform: translateY(6px); }
	100% { opacity: 1; transform: translateY(0); }
}

.aa-lineup__panel-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .55rem;
	margin-bottom: .8rem;
}

.aa-lineup__icon {
	font-size: 1.3rem;
	line-height: 1;
}

.aa-lineup__name {
	font-size: 1.02rem;
	font-weight: 800;
	color: #12233f;
}

.aa-lineup__badge {
	display: inline-block;
	padding: .2rem .7rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.aa-lineup__badge--easy {
	background: #eafbf1;
	color: #1f9d5c;
	border: 1px solid #29b16d;
}

.aa-lineup__badge--hard {
	background: #fdecec;
	color: #d1382f;
	border: 1px solid #e0473f;
}

.aa-lineup__desc {
	font-size: .86rem;
	line-height: 1.85;
	color: #333;
	margin: 0 0 .5rem;
}

.aa-lineup__desc:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Looker Studio vs API連携 比較表
   ============================================================ */

.cmp-wrap {
	overflow-x: auto;
	border-radius: 1rem;
	border: 1px solid #dfe6ec;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s ease, transform .5s ease;
}

.cmp-wrap.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
	background: #fff;
}

.cmp-table th,
.cmp-table td {
	padding: .8rem .9rem;
	text-align: left;
	line-height: 1.7;
	border-bottom: 1px solid #eef0f3;
}

.cmp-table thead th {
	background: #f7fbff;
	font-weight: 700;
	color: #12233f;
	white-space: nowrap;
}

.cmp-table tbody th {
	background: #fafbfd;
	font-weight: 700;
	color: #333;
	white-space: nowrap;
}

.cmp-table tr:last-child th,
.cmp-table tr:last-child td {
	border-bottom: none;
}

.cmp-table tbody tr {
	transition: background-color .15s ease;
}

.cmp-table tbody tr:hover {
	background-color: #f7fbff;
}

.cmp-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem;
	height: 1.3rem;
	margin-right: .45rem;
	border-radius: 50%;
	font-weight: 800;
	font-size: .8rem;
	vertical-align: -.25em;
}

.cmp-good {
	color: #1f9d5c;
}

.cmp-good .cmp-mark {
	background: #eafbf1;
	border: 1.5px solid #29b16d;
}

.cmp-warn {
	color: #c97f00;
}

.cmp-warn .cmp-mark {
	background: #fff8e6;
	border: 1.5px solid #f0a202;
}

.cmp-bad {
	color: #d1382f;
}

.cmp-bad .cmp-mark {
	background: #fdecec;
	border: 1.5px solid #e0473f;
}

/* ---------- レスポンシブ ---------- */

@media screen and (max-width: 640px) {

	.aa-lineup__panels {
		padding: 1.1rem .9rem;
	}

	.aa-lineup__tab {
		font-size: .78rem;
		padding: .5rem .8rem;
	}

	.cmp-table th,
	.cmp-table td {
		padding: .65rem .7rem;
		font-size: .8rem;
	}
}