/*!
 * tools.css ─ 便利ツール一覧ページ（/tools/）
 *   ・HOME の section-tools と同じテイスト
 *   ・PC は 3カラムグリッド、スマホは縦並び
 */

.tools-list {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 80px;
	font-family: var(--font-display);
	color: var(--ink, #2a2a2a);
	background:
		radial-gradient(circle at 10% 10%, rgba(255,170,80,.06) 0%, transparent 30%),
		radial-gradient(circle at 90% 90%, rgba(80,180,140,.05) 0%, transparent 30%);
}

/* パンくず */
.tl-crumb {
	font-size: 12px;
	color: var(--ink2, #777);
	margin-bottom: 16px;
}
.tl-crumb a { color: var(--ink2, #777); text-decoration: none; }
.tl-crumb a:hover { text-decoration: underline; }
.tl-crumb__sep { margin: 0 6px; color: var(--ink3, #aaa); }

/* ============ ヘッダー（HOMEと同じ .sec-title ベース） ============ */
.tl-head {
	text-align: center;
	margin-bottom: 36px;
}
/* HOMEの .sec-title スタイルをここでも有効に（front.css は HOME 限定のため） */
.tl-head .sec-title {
	font-family: var(--font-display);
	font-size: 36px;
	text-align: center;
	margin: 0 0 8px;
	line-height: 1.3;
	position: relative;
	padding-top: 18px;
	font-weight: normal;
}
.tl-head .sec-title::before {
	content: "";
	display: block;
	width: 80px;
	height: 5px;
	background: var(--ink);
	margin: 0 auto 14px;
	border-radius: 3px;
}
.tl-head .sec-title .deco-en {
	display: block;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--accent);
	margin-bottom: 6px;
	letter-spacing: .15em;
}
.tl-head .sec-sub {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink2, #777);
	text-align: center;
	margin: 0;
}
@media (max-width: 600px) {
	.tl-head .sec-title { font-size: 24px; padding-top: 8px; }
	.tl-head .sec-title::before { width: 50px; height: 4px; margin-bottom: 8px; }
	.tl-head .sec-title .deco-en { font-size: 12px; }
}

/* ============ ツールカードのグリッド ============ */
.tl-grid {
	display: grid;
	grid-template-columns: 1fr;     /* デフォルト：1カラム（モバイル） */
	gap: 18px;
	margin-bottom: 40px;
}

/* PC：3カラム横並び */
@media (min-width: 901px) {
	.tl-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
	}
}

/* タブレット（768〜900px）：2カラム */
@media (min-width: 768px) and (max-width: 900px) {
	.tl-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============ カード（HOME と同じ太枠 + オフセット影 + カラフル） ============ */
.tl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 32px 22px 24px;
	background: #fff;
	border: 2.5px solid var(--ink, #2a2a2a);
	border-radius: 20px;
	text-decoration: none !important;
	color: inherit !important;
	transition: all .2s cubic-bezier(.34, 1.56, .64, 1);
	box-shadow: 4px 4px 0 var(--ink, #2a2a2a);
	overflow: visible;
}
.tl-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 var(--ink, #2a2a2a);
}
/* PC では遊び心のある軽い回転 */
@media (hover: hover) and (min-width: 901px) {
	.tl-card:nth-child(1):hover { transform: translate(-3px, -3px) rotate(-1.2deg); }
	.tl-card:nth-child(2):hover { transform: translate(-3px, -3px) rotate(1.2deg); }
	.tl-card:nth-child(3):hover { transform: translate(-3px, -3px) rotate(-0.8deg); }
}

/* ─── 「無料」斜めバッジ ─── */
.tl-card__badge {
	position: absolute;
	top: -12px;
	right: -8px;
	background: #ef4444;
	color: #fff;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900;
	transform: rotate(8deg);
	box-shadow: 2px 2px 0 rgba(0,0,0,.2);
	letter-spacing: .08em;
	font-family: var(--font-display);
	border: 2px solid #fff;
}

/* ─── アイコン（カラフル枠囲い） ─── */
.tl-card__icon {
	font-size: 48px;
	width: 88px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 22px;
	transition: transform .25s;
	overflow: hidden;
}
/* 画像アイコン時はカラーの囲みが邪魔（画像自体がすでに主役）なので、
 * 背景・枠線・パディングを外してアイコン画像そのものを見せる */
.tl-card__icon--img,
.tl-card[data-color] .tl-card__icon--img {
	background: none !important;
	border: none !important;
	padding: 0;
}
.tl-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 16px;
}
.tl-card:hover .tl-card__icon {
	transform: scale(1.1) rotate(-3deg);
}
/* ロゴ画像タイトル：文字より少し高さを取って、ロゴをそのまま見せる */
.tl-card__title--logo {
	margin: 8px 0 2px;
	padding: 0;
	display: block;
	line-height: 0;
}
.tl-card__title--logo img {
	display: block;
	max-width: 100%;
	max-height: 80px;
	height: auto;
	width: auto;
	margin: 0 auto;
}

/* ─── カラーバリエーション ─── */
.tl-card[data-color="blue"]   { background: linear-gradient(180deg, #fff 55%, #eff6ff 100%); }
.tl-card[data-color="blue"]   .tl-card__icon { background: #dbeafe; border: 2.5px solid #3b82f6; }

.tl-card[data-color="orange"] { background: linear-gradient(180deg, #fff 55%, #fff7ed 100%); }
.tl-card[data-color="orange"] .tl-card__icon { background: #fed7aa; border: 2.5px solid #ea580c; }

.tl-card[data-color="green"]  { background: linear-gradient(180deg, #fff 55%, #f0fdf4 100%); }
.tl-card[data-color="green"]  .tl-card__icon { background: #bbf7d0; border: 2.5px solid #16a34a; }

.tl-card[data-color="pink"]   { background: linear-gradient(180deg, #fff 55%, #fdf2f8 100%); }
.tl-card[data-color="pink"]   .tl-card__icon { background: #fbcfe8; border: 2.5px solid #ec4899; }

/* ─── テキスト ─── */
.tl-card__title {
	font-size: 19px;
	font-weight: 800;
	margin: 4px 0 0;
	color: #2a2a2a;
	font-family: var(--font-display);
	letter-spacing: .02em;
	line-height: 1.4;
}
.tl-card__desc {
	font-size: 13px;
	color: #555;
	line-height: 1.75;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;     /* PC は 2 行に収める */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tl-card__desc b { color: var(--accent, #ff8a3d); }
.tl-card__tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 10px;
}
.tl-card__tag {
	display: inline-block;
	background: #f3f4f6;
	color: #4b5563;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--font-display);
}

/* ─── 「使ってみる」ボタン ─── */
.tl-card__btn {
	display: inline-block;
	background: var(--accent, #ff8a3d);
	color: #fff;
	padding: 12px 28px;
	border: 2px solid var(--ink, #2a2a2a);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 800;
	box-shadow: 3px 3px 0 var(--ink, #2a2a2a);
	font-family: var(--font-display);
	letter-spacing: .04em;
	transition: all .15s;
	margin-top: auto;
}
.tl-card:hover .tl-card__btn {
	box-shadow: 5px 5px 0 var(--ink, #2a2a2a);
	transform: translate(-1px, -1px);
}

/* ============ スマホ（〜600px）：アイコン左 / 右側にタイトル + 説明 + ボタン縦並び ============
   ・タイトル折り返し回避：右側カラムを最大幅で取る
   ・説明は全文表示
   ・ボタンは説明の下に配置（タイトル幅を圧迫しない）
*/
@media (max-width: 600px) {
	.tools-list { padding: 16px 12px 60px; }
	.tl-grid { gap: 14px; margin-bottom: 28px; }

	.tl-card {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon  title"
			"icon  desc"
			"icon  btn";
		row-gap: 6px;
		column-gap: 14px;
		align-items: start;
		text-align: left;
		padding: 18px 14px;
		border-width: 2px;
		box-shadow: 3px 3px 0 var(--ink, #2a2a2a);
		flex-direction: initial;
	}
	.tl-card:hover { box-shadow: 5px 5px 0 var(--ink, #2a2a2a); }

	.tl-card__icon {
		grid-area: icon;
		align-self: start;
		width: 60px;
		height: 60px;
		font-size: 34px;
		border-radius: 14px;
		flex-shrink: 0;
	}

	.tl-card__title {
		grid-area: title;
		font-size: 16px;
		margin: 0;
		line-height: 1.35;
		align-self: start;
	}
	/* スマホ：ロゴはタイトル代わりなので存在感を出す。
	 * 縦は60px確保、横は右カラム幅めいっぱいまで使う */
	.tl-card__title--logo {
		margin: 0;
	}
	.tl-card__title--logo img {
		max-height: 60px;
		max-width: 100%;
		margin: 0;
	}
	.tl-card__desc {
		grid-area: desc;
		font-size: 12.5px;
		line-height: 1.65;
		margin: 4px 0 8px;
		min-height: 0;
		display: -webkit-box;
		-webkit-line-clamp: 3;     /* スマホは 3 行まで */
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-width: 100%;
	}

	/* タグは見せない */
	.tl-card__tags { display: none; }

	/* ボタンは説明の下、右カラム幅いっぱいに横長 */
	.tl-card__btn {
		grid-area: btn;
		justify-self: stretch;     /* カラム幅に伸びる */
		text-align: center;
		margin: 6px 0 0;
		padding: 11px 18px;
		font-size: 13px;
		border-width: 2px;
		box-shadow: 2px 2px 0 var(--ink, #2a2a2a);
	}
	.tl-card:hover .tl-card__btn {
		box-shadow: 3px 3px 0 var(--ink, #2a2a2a);
	}

	/* 「無料」バッジも小さめ */
	.tl-card__badge {
		top: -8px;
		right: -4px;
		padding: 3px 10px;
		font-size: 10px;
	}
}