/*
Theme Name: Trend Affiliate Theme
Theme URI: https://itoshima-kikaku.com/
Author: 糸島企画
Description: トレンドアフィリエイトブログ専用の最小構成テーマ。Trend Affiliate Coreプラグインと組み合わせて使用する。まとめページ用テンプレート(page-matome.php)、ジャンル別話題ボード付きトップページ(front-page.php)を含む。
Version: 0.1.9
Requires PHP: 8.0
Text Domain: trend-affiliate-theme
*/

:root {
	--tac-bg: #FFF7F3;
	--tac-card: #FFFFFF;
	--tac-ink: #241C1A;
	--tac-muted: #8A7F7A;
	--tac-border: rgba(36, 28, 26, 0.08);

	--tac-coral: #FF4B3E;
	--tac-coral-tint: #FFECE7;
	--tac-coral-dark: #B7301F;

	--tac-rose: #FF6FA0;
	--tac-rose-tint: #FFEAF1;
	--tac-rose-dark: #A83862;

	--tac-amber: #FFA53D;
	--tac-amber-tint: #FFF1DE;
	--tac-amber-dark: #8A560E;

	--tac-teal: #14B8A6;
	--tac-teal-tint: #E1F7F3;
	--tac-teal-dark: #0B6E63;

	--tac-slate: #7C8B9B;
	--tac-slate-tint: #EEF1F4;
	--tac-slate-dark: #4B5768;

	--tac-yellow: #FFD23F;

	--font-display: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
	--font-body: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

* { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.8;
	color: var(--tac-ink);
	margin: 0;
	background: var(--tac-bg);
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.tac-site-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px 48px;
}

/* ヘッダー */
.tac-site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 20px 0 16px;
}
.tac-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 900;
	color: var(--tac-ink);
	text-decoration: none;
}
.tac-logo-mark {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: linear-gradient(145deg, var(--tac-coral) 0%, #FF6B5B 100%);
	position: relative;
	flex-shrink: 0;
}
.tac-logo-mark::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 8px;
	height: 8px;
	border: 2px solid #fff;
	border-radius: 50%;
}
.tac-primary-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.tac-nav-pill {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 20px;
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	text-decoration: none;
	color: var(--tac-muted);
}
.tac-nav-pill.is-active,
.tac-nav-pill:hover {
	background: var(--tac-coral);
	border-color: var(--tac-coral);
	color: #fff;
}

/* 更新ティッカー */
.tac-ticker {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--tac-coral-tint);
	border-radius: 12px;
	padding: 10px 16px;
	margin-bottom: 20px;
	overflow: hidden;
}
.tac-ticker-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	color: var(--tac-coral-dark);
	flex-shrink: 0;
	white-space: nowrap;
}
.tac-ticker-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tac-coral);
	animation: tac-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.tac-ticker-dot { animation: none; }
}
@keyframes tac-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.75); }
}
.tac-ticker-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}
.tac-ticker-track::-webkit-scrollbar { display: none; }
.tac-ticker-track a {
	font-size: 13px;
	color: var(--tac-coral-dark);
	text-decoration: none;
	font-weight: 500;
}
.tac-ticker-track a:hover { text-decoration: underline; }
.tac-ticker-empty {
	font-size: 13px;
	color: var(--tac-coral-dark);
}

/* ヒーロー */
.tac-hero { margin-bottom: 32px; }
.tac-hero-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 20px;
	align-items: stretch;
}
@media (max-width: 760px) {
	.tac-hero-grid { grid-template-columns: 1fr; }
}
.tac-hero-card {
	display: block;
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	border-radius: 16px;
	padding: 36px 40px;
	text-decoration: none;
	color: var(--tac-ink);
}
.tac-hero-sub-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tac-hero-sub-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	border-radius: 14px;
	padding: 18px 20px;
	text-decoration: none;
	color: var(--tac-ink);
}
.tac-hero-sub-tag {
	display: inline-block;
	width: fit-content;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	color: var(--tac-coral-dark);
	background: var(--tac-coral-tint);
	padding: 3px 10px;
	border-radius: 20px;
}
.tac-hero-sub-title {
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
}
.tac-hero-tag {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	color: var(--tac-coral-dark);
	background: var(--tac-coral-tint);
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 14px;
}
.tac-hero-title {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 900;
	line-height: 1.4;
	margin: 0 0 12px;
}
.tac-hero-excerpt {
	color: var(--tac-muted);
	font-size: 16px;
	margin: 0 0 16px;
}
.tac-hero-link {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--tac-coral);
}
.tac-hero-empty .tac-hero-title { font-size: 26px; }

/* 話題ボード（ジャンル別3レーン） */
.tac-board {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 32px;
}
@media (max-width: 640px) {
	.tac-board { grid-template-columns: 1fr; }
}
.tac-lane {
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	border-radius: 14px;
	padding: 22px 24px;
	border-top: 4px solid var(--tac-coral);
}
.tac-lane.is-rose { border-top-color: var(--tac-rose); }
.tac-lane.is-amber { border-top-color: var(--tac-amber); }
.tac-lane.is-teal { border-top-color: var(--tac-teal); }
.tac-lane.is-slate { border-top-color: var(--tac-slate); }

.tac-lane-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}
.tac-lane-name {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 900;
}
.tac-lane.is-rose .tac-lane-name { color: var(--tac-rose-dark); }
.tac-lane.is-amber .tac-lane-name { color: var(--tac-amber-dark); }
.tac-lane.is-teal .tac-lane-name { color: var(--tac-teal-dark); }
.tac-lane.is-slate .tac-lane-name { color: var(--tac-slate-dark); }
.tac-lane:not(.is-rose):not(.is-amber):not(.is-teal):not(.is-slate) .tac-lane-name { color: var(--tac-coral-dark); }

.tac-lane-more {
	font-size: 14px;
	color: var(--tac-muted);
	text-decoration: none;
}
.tac-lane-more:hover { text-decoration: underline; }

.tac-lane-list { list-style: none; margin: 0; padding: 0; }
.tac-lane-list li + li { border-top: 1px solid var(--tac-border); }
.tac-lane-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 13px 0;
	text-decoration: none;
	color: var(--tac-ink);
}
.tac-lane-item-title {
	font-size: 16px;
	line-height: 1.55;
}
.tac-lane-item-date {
	font-size: 13px;
	color: var(--tac-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.tac-lane-empty {
	font-size: 14px;
	color: var(--tac-muted);
	margin: 8px 0 4px;
}

/* 記事本文 */
article.tac-article {
	margin: 0 auto 40px;
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	border-radius: 16px;
	padding: 32px 40px;
	max-width: 900px;
}
article.tac-article h1 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 900;
	margin-bottom: 10px;
}
.tac-article-meta {
	color: var(--tac-muted);
	font-size: 14px;
	margin-bottom: 18px;
}

/* 関連記事（回遊性向上） */
.tac-related {
	max-width: 900px;
	margin: 0 auto 40px;
}
.tac-related-heading {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 900;
	margin-bottom: 14px;
}
.tac-related-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (max-width: 560px) {
	.tac-related-grid { grid-template-columns: 1fr; }
}
.tac-related-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	border-radius: 12px;
	padding: 16px 18px;
	text-decoration: none;
	color: var(--tac-ink);
}
.tac-related-title {
	font-size: 14px;
	line-height: 1.5;
}
.tac-related-date {
	font-size: 12px;
	color: var(--tac-muted);
	font-variant-numeric: tabular-nums;
}

.tac-disclaimer {
	font-size: 12px;
	color: var(--tac-muted);
	border-top: 1px solid var(--tac-border);
	padding-top: 12px;
	margin-top: 24px;
}

.tac-product-link {
	display: inline-block;
	padding: 9px 18px;
	background: var(--tac-coral);
	color: #fff !important;
	border-radius: 20px;
	text-decoration: none !important;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
}

/* 商品カード（画像+商品名+価格+CTA） */
.tac-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	margin: 16px 0 24px;
}
.tac-product-card {
	display: flex;
	flex-direction: column;
	background: var(--tac-bg);
	border: 1px solid var(--tac-border);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--tac-ink) !important;
}
.tac-product-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
}
.tac-product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.tac-product-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
}
.tac-product-name {
	font-size: 13px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tac-product-price {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 16px;
	color: var(--tac-coral-dark);
}
.tac-product-cta {
	margin-top: 4px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--tac-coral);
	border-radius: 16px;
	padding: 6px 12px;
	text-align: center;
}

/* まとめページ */
.tac-matome-list { list-style: none; padding: 0; }
.tac-matome-item {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--tac-border);
}
.tac-matome-date { color: var(--tac-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.tac-matome-nav {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.tac-matome-nav a {
	padding: 7px 16px;
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	border-radius: 20px;
	text-decoration: none;
	color: var(--tac-muted);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
}
.tac-matome-nav a.active { background: var(--tac-coral); border-color: var(--tac-coral); color: #fff; }

/* 通常固定ページ */
.tac-page {
	background: var(--tac-card);
	border: 1px solid var(--tac-border);
	border-radius: 16px;
	padding: 32px 40px;
	max-width: 900px;
	margin: 0 auto;
}
.tac-page h1 {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 900;
}

/* パンくずナビ（構造化データのBreadcrumbListと連動） */
.tac-breadcrumbs {
	margin: 0 auto 12px;
	max-width: 900px;
}
.tac-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--tac-muted);
}
.tac-breadcrumbs li:not(:last-child)::after {
	content: "›";
	margin-left: 6px;
	color: var(--tac-muted);
}
.tac-breadcrumbs a {
	color: var(--tac-muted);
	text-decoration: none;
}
.tac-breadcrumbs a:hover { text-decoration: underline; }
.tac-breadcrumbs [aria-current="page"] {
	color: var(--tac-ink);
}

/* フッター */
.tac-site-footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--tac-border);
	text-align: center;
}
.tac-footer-nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.tac-footer-nav a {
	font-size: 13px;
	color: var(--tac-muted);
	text-decoration: none;
}
.tac-footer-nav a:hover { text-decoration: underline; }
.tac-footer-credit {
	font-size: 12px;
	color: var(--tac-muted);
	margin: 0;
}