/* =========================================================
 *  Tag Archive (Pinterest masonry) — トップページに合わせたダーク配色
 *  参考カラー:
 *   サイト背景  #2a2a2a
 *   リンク      #ffa500
 *   リンクhover #a9a9a9
 * ========================================================= */

.tp-body {
	margin: 0;
	padding: 0;
	background: #2a2a2a;
	color: #e6e6e6;
}
.tp-main {
	max-width:   1020px;
	margin:      0 auto;
	padding:     0 14px 60px;
	color:       #e6e6e6;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif;
	line-height: 1.5;
}
.tp-main * { box-sizing: border-box; }
.tp-main img { max-width: 100%; height: auto; display: block; }
.tp-main a { color: #ffa500; text-decoration: none; }
.tp-main a:hover { color: #a9a9a9; text-decoration: none; }

/* ===== ヘッダー ===== */
.tp-header {
	border-bottom: 1px solid #444;
	margin:       0 -14px 20px;
	padding:      0 14px 0;
}
.tp-title-banner {
	position:   relative;
	text-align: left;
	padding:    0;
	margin:     0 auto;
}
.tp-banner-link { display: block; }
.tp-banner-link img {
	display:   block;
	max-width: 1020px;
	width:     100%;
	height:    auto;
}

/* サイトロゴ(トップの h1 ロゴ相当、90x90 / ホームへ) */
.tp-site-logo {
	position: absolute;
	top:      10px;
	left:     10px;
	margin:   0;
	width:    90px;
	height:   90px;
	z-index:  10;
	line-height: 0;
}
.tp-site-logo a,
.tp-site-logo img {
	display: block;
	width:   90px;
	height:  90px;
}
.tp-site-logo img {
	max-width: 90px; /* banner img の max-width: 1020px を打ち消す */
}

/* ===== ハンバーガーボタン(SP のみ) ===== */
.tp-hamburger {
	display:    none;
	position:   absolute;
	top:        50%;
	right:      10px;
	transform:  translateY(-50%);
	width:      40px;
	height:     40px;
	padding:    0;
	border:     1px solid #555;
	background: rgba(0,0,0,.55);
	border-radius: 6px;
	cursor:     pointer;
	z-index:    50;
}
.tp-hamburger span {
	display:    block;
	width:      20px;
	height:     2px;
	margin:     4px auto;
	background: #ffa500;
	transition: transform .2s ease, opacity .15s ease;
}
.tp-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tp-hamburger.is-open span:nth-child(2) { opacity: 0; }
.tp-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== みんなの検索(メニュー直下) ===== */
.tp-popular-searches {
	max-width: 1020px;
	margin:    0 auto;
	padding:   8px 0 10px;
	border-top: 1px solid #333;
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	align-items: center;
}
.tp-popular-searches .tp-ps-label {
	font-size: 12px;
	color:     #888;
	margin-right: 4px;
	white-space: nowrap;
}
.tp-popular-searches ul {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-wrap:  wrap;
	gap:        6px;
}
.tp-popular-searches li a {
	display:         inline-block;
	padding:         3px 10px;
	background:      #2a2a2a;
	color:           #e6e6e6;
	border:          1px solid #444;
	border-radius:   12px;
	font-size:       12px;
	text-decoration: none;
}
.tp-popular-searches li a:hover {
	color:        #ffa500;
	border-color: #ffa500;
}

/* メニュー */
.tp-menu {
	border-top: 1px solid #444;
	background: #1f1f1f;
}
.tp-menu > ul {
	list-style: none;
	margin:     0 auto;
	padding:    0;
	display:    flex;
	flex-wrap:  wrap;
	max-width:  1180px;
}
.tp-menu-item {
	flex:           1 1 16.6%;
	min-width:      120px;
	border-right:   1px solid #333;
	position:       relative;
}
.tp-menu-item:last-child { border-right: 0; }

.tp-menu-link,
.tp-menu-btn {
	display:    block;
	width:      100%;
	padding:    14px 8px;
	text-align: center;
	background: transparent;
	border:     0;
	font-size:  14px;
	font-weight: 600;
	color:      #e6e6e6;
	text-decoration: none;
	cursor:     pointer;
}
.tp-menu-link:hover,
.tp-menu-btn:hover {
	background: #2a2a2a;
	color:      #ffa500;
	text-decoration: none;
}
.tp-menu-btn[aria-expanded="true"] {
	background: #2a2a2a;
	color:      #ffa500;
}

/* 展開パネル */
.tp-menu-panel {
	display:        none;
	position:       absolute;
	top:            100%;
	left:           0;
	right:          0;
	background:     #1f1f1f;
	border:         1px solid #444;
	box-shadow:     0 8px 18px rgba(0,0,0,.5);
	padding:        14px;
	z-index:        100;
	max-height:     70vh;
	overflow-y:     auto;
	min-width:      280px;
}
.tp-menu-item.is-open > .tp-menu-panel { display: block; }

/* メニュー内人気タグ(サムネ付き) */
.tp-popular-tags {
	list-style: none;
	margin:     0 0 10px;
	padding:    0;
	display:    grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap:        8px;
}
.tp-popular-tags a {
	display:         block;
	text-align:      center;
	text-decoration: none;
	color:           #e6e6e6;
}
.tp-popular-tags a:hover { color: #ffa500; }
.tp-popular-tags img {
	width:         100%;
	aspect-ratio:  4/3;
	object-fit:    cover;
	border-radius: 6px;
	background:    #2a2a2a;
}
.tp-popular-tags span {
	display:    block;
	font-size:  12px;
	margin-top: 4px;
	overflow:   hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* メニュー内テキストリスト */
.tp-textlist {
	margin:  0 0 10px;
	padding: 0 0 0 1.5em;
	font-size: 14px;
	line-height: 1.7;
	color: #e6e6e6;
}
.tp-textlist li { margin-bottom: 4px; }
.tp-textlist a { color: #e6e6e6; }
.tp-textlist a:hover { color: #ffa500; }
.tp-textlist .tp-cc { color: #888; font-size: 12px; }

.tp-linklist {
	list-style: none;
	margin:     0 0 10px;
	padding:    0;
}
.tp-linklist li {
	padding: 8px 0;
	border-bottom: 1px solid #333;
}
.tp-linklist li:last-child { border-bottom: 0; }
.tp-linklist a { color: #e6e6e6; }
.tp-linklist a:hover { color: #ffa500; }

.tp-more {
	display:    inline-block;
	margin-top: 6px;
	color:      #ffa500;
	font-size:  13px;
}

/* ===== h1 行 (h1 左 / 検索 右) ===== */
.tp-h1-row {
	display:       flex;
	align-items:   center;
	gap:           14px;
	margin:        18px 0 18px;
	padding:       0 0 14px;
	border-bottom: 2px solid #ffa500;
}
.tp-h1 {
	font-size:    26px;
	line-height:  1.3;
	margin:       0;
	padding:      0;
	border:       0;
	font-weight:  700;
	color:        #fff;
	flex:         1 1 auto;
	min-width:    0;
}

/* 検索フォーム (h1 の右、右寄せ) */
.tp-search {
	display:    flex;
	gap:        6px;
	flex:       0 0 auto;
	margin:     0;
}
.tp-search input[type="search"] {
	width:         220px;
	padding:       8px 14px;
	border:        1px solid #555;
	border-radius: 24px;
	font-size:     14px;
	outline:       none;
	background:    #2a2a2a;
	color:         #e6e6e6;
}
.tp-search input[type="search"]::placeholder { color: #888; }
.tp-search input[type="search"]:focus {
	border-color: #ffa500;
	box-shadow:   0 0 0 2px rgba(255,165,0,.25);
}
.tp-search button {
	width:         38px;
	height:        38px;
	padding:       0;
	border:        1px solid #555;
	border-radius: 50%;
	background:    #333;
	color:         #ffa500;
	cursor:        pointer;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
}
.tp-search button svg { display: block; }
.tp-search button:hover {
	background:   #444;
	border-color: #ffa500;
}

/* ===== 整列グリッド(画像縦 190px 固定) ===== */
.tp-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap:                   14px;
	margin:                0 0 24px;
}
.tp-card {
	background:    #1f1f1f;
	border:        1px solid #444;
	border-radius: 8px;
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
	transition:    box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.tp-card:hover {
	box-shadow:   0 6px 16px rgba(0,0,0,.5);
	transform:    translateY(-2px);
	border-color: #ffa500;
}

.tp-card-link {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	text-decoration: none;
	color:           inherit;
}
.tp-card-thumb {
	height:     160px;
	background: #2a2a2a;
	overflow:   hidden;
	flex:       0 0 160px;
}
.tp-card-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.tp-card-title {
	font-size:    14px;
	line-height:  1.45;
	margin:       8px 10px 4px;
	color:        #ffa500;
	font-weight:  600;
	word-break:   break-word;
}
.tp-card:hover .tp-card-title { color: #fff; }
.tp-card-body {
	display:        flex;
	flex-direction: column;
	flex:           1 1 auto;
}

.tp-card-meta {
	display:         flex;
	justify-content: space-between;
	padding:         4px 10px 10px;
	font-size:       12px;
	color:           #888;
}
.tp-card-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* ===== ページャー ===== */
.tp-pager {
	display:         flex;
	justify-content: center;
	gap:             6px;
	flex-wrap:       wrap;
	margin:          16px 0 32px;
}
.tp-pager .page-numbers {
	display:         inline-block;
	padding:         8px 14px;
	background:      #1f1f1f;
	border:          1px solid #444;
	border-radius:   4px;
	text-decoration: none;
	color:           #e6e6e6;
	font-size:       14px;
}
.tp-pager .page-numbers:hover {
	background:   #333;
	color:        #ffa500;
	border-color: #ffa500;
	text-decoration: none;
}
.tp-pager .page-numbers.current {
	background:   #ffa500;
	color:        #2a2a2a;
	border-color: #ffa500;
	font-weight:  700;
}

.tp-empty {
	text-align: center;
	padding:    40px 12px;
	color:      #888;
}

/* ===== フッター ===== */
.tp-footer {
	background:  #000;
	margin:      30px -14px 0;
	padding:     20px 14px 30px;
}
.tp-footer-h {
	font-size:     18px;
	margin:        0 0 16px;
	padding:       0 0 10px;
	color:         #fff;
	font-weight:   700;
	border-bottom: 1px solid #fff;
}
.tp-footer-tags {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap:        12px;
}
.tp-footer-tags a {
	display:         block;
	text-align:      center;
	text-decoration: none;
	color:           #e6e6e6;
}
.tp-footer-tags a:hover { color: #ffa500; }
.tp-footer-tags img {
	width:         100%;
	aspect-ratio:  1/1;
	object-fit:    cover;
	border-radius: 8px;
	background:    #2a2a2a;
}
.tp-footer-tags span {
	display:    block;
	font-size:  13px;
	margin-top: 6px;
	overflow:   hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===== SP 調整 ===== */
@media (max-width: 700px) {
	/* ハンバーガー表示、メニューは初期非表示 */
	.tp-hamburger { display: block; }
	.tp-menu {
		display:    none;
		margin:     0 -14px;
		max-height: 80vh;
		overflow-y: auto;
	}
	.tp-menu.is-open-sp { display: block; }
	.tp-menu > ul { display: block; }
	.tp-menu-item {
		flex: none;
		border-right: 0;
		border-bottom: 1px solid #333;
	}
	.tp-menu-panel {
		position: static;
		box-shadow: none;
		max-width: 100%;
		border: 0;
	}

	/* みんなの検索もスクロール扱い */
	.tp-popular-searches { padding: 8px 4px 10px; }

	/* h1 と検索フォーム(虫眼鏡ボタンだけになる) */
	.tp-h1-row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}
	.tp-h1 { font-size: 18px; flex: 1 1 auto; }
	.tp-search { flex: 0 0 auto; }
	.tp-search input[type="search"] { width: 140px; }

	/* グリッドは 1 列 */
	.tp-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.tp-card {
		flex-direction: row;
	}
	.tp-card-link {
		flex-direction: row;
		align-items: stretch;
		width: 100%;
	}
	.tp-card-thumb {
		flex: 0 0 140px;
		width: 140px;
		height: auto;
		align-self: stretch;
	}
	.tp-card-body {
		flex: 1 1 auto;
		justify-content: space-between;
		padding: 6px 4px;
		min-width: 0;
	}
	.tp-card-title { margin: 0 8px 4px; }
	.tp-card-meta { padding: 4px 8px 4px; }
}