/* ====================================================================
 * TAP the POP UX Renewal — 2026-05-19
 * 
 * このファイルは UX リニューアル改修の上書き専用 CSS。
 * 既存 style.css / custom.css を編集せず、ここで一括オーバーライド。
 * メディアクエリも完備して既存 @media の打ち消しを防ぐ。
 * 
 * 改修記録:
 *   - A1 (2026-05-19): body font-size 14px → 16px
 *     style.css L2 base + L95 @media (min-width: 960px) を完全上書き
 * 
 * SKILL: tap-ux-renewal
 * Plan: devlog/tap-ux-renewal-plan.md
 * ==================================================================== */

/* ===== A1: body font-size 14px → 16px ===== */

/* ベース（全幅、style.css L2 を上書き） */
body {
	font-size: 16px;
	font-size: 1.6rem;
}

/* PC レイアウト（min-width: 960px、style.css L95 を上書き） */
@media only screen and (min-width: 960px) {
	body {
		font-size: 16px;
		font-size: 1.6rem;
	}
}

/* タブレット（min-width: 768px、念のため明示） */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	body {
		font-size: 16px;
		font-size: 1.6rem;
	}
}

/* SP（max-width: 575px、念のため明示） */
@media only screen and (max-width: 575px) {
	body {
		font-size: 16px;
		font-size: 1.6rem;
	}
}


/* ===== A2: 記事本文の font-size 14px → 16px ===== */
/* style.css L.single article{font-size:14px} / .page article{font-size:14px} を上書き */

.single article,
.page article {
	font-size: 16px;
	font-size: 1.6rem;
}

@media only screen and (min-width: 960px) {
	.single article,
	.page article {
		font-size: 16px;
		font-size: 1.6rem;
	}
}

@media only screen and (max-width: 575px) {
	.single article,
	.page article {
		font-size: 16px;
		font-size: 1.6rem;
	}
}


/* ===== B1: サイト全幅拡張（1200px 以上で広いレイアウト） ===== */
/* 既存 min-width:960px の 960px レイアウトは中型 PC で維持 */
/* 1200px 以上の大型画面用に新規ブレイクポイント追加 */

@media only screen and (min-width: 1200px) {
	.container {
		width: 1200px;
		max-width: 1200px;
	}
	.contents {
		width: 800px;
	}
	.sidebar {
		width: 340px;
	}
}


/* ====================================================================
 * B2 (2026-05-19): 1200px 以上で子要素を contents 800px に追随
 * 
 * container 拡張に伴い、内部の固定幅 640px / 420px 等を再配分。
 * PDF レビュー（ナミオさん）で発見された：
 *  - サブタイトル行と著者名のずれ
 *  - 関連記事エリア 640px 小さい
 *  - アイキャッチ画像 / YouTube iframe が古い 640/560 のまま
 * ==================================================================== */

@media only screen and (min-width: 1200px) {

	/* B2-1: 記事ヘッダーの title_area 幅再配分（420 → 600） */
	/* style.css @media (min-width: 960px) の .title_area{width:420px} を上書き */
	.single .single_header .title_area {
		width: 600px;
	}

	/* B2-2: 関連記事エリア（article_bottom）幅再配分（640 → 800） */
	/* style.css @media (min-width: 960px) の .article_bottom{width:640px} を上書き */
	.article_bottom {
		width: 800px;
	}

	/* B2-3: アイキャッチ画像を中央寄せ + contents 内で最大化 */
	/* HTML <img width="640"> 属性を CSS で上書き、display:block + margin:auto で中央 */
	.single article img.wp-post-image,
	.single .single_header img.wp-post-image,
	.page article img.wp-post-image {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		height: auto;
	}

	/* B2-4: YouTube iframe を contents 幅に追随（16:9 維持） */
	/* HTML <iframe width="560"> 属性を CSS で上書き */
	.single article iframe[src*="youtube.com"],
	.single article iframe[src*="youtube-nocookie.com"],
	.page article iframe[src*="youtube.com"] {
		display: block;
		width: 100%;
		max-width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		margin: 1em auto;
	}

}



/* ====================================================================
 * B3-min (2026-05-19): SNS Facebook iframe を card 幅追随（最小修正版）
 *
 * 当初の B3 (flex 強制 + min-width:0) で X card 極細化 + Facebook 消失の
 * 崩壊発生 → ロールバック。Bootstrap col-md-6 の既存挙動はそのまま、
 * HTML width="340" 属性だけ CSS で打消す最小手当てに変更。
 * ==================================================================== */

@media only screen and (min-width: 768px) {
	.sns-box-facebook iframe {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ====================================================================
 * C1 (2026-05-19): ナミオさん作 オーバーライド CSS
 *
 * ヘッダー全幅と著者名右寄せの整え。container 1200px に追随する形で
 * グローバルナビ / ヘッダー内側 / サイトタイトルも 1200px ベースに整える。
 * ナミオさん 5/19 指示そのまま反映。
 * ==================================================================== */

.globalNav {
	max-width: 1200px;
}

.single .single_header .author_area .author_name {
	text-align: right;
}

@media screen and (min-width: 768px) {
	.headerInner {
		max-width: 1200px;
	}
}

@media screen and (min-width: 768px) {
	.headerInner .sitetitle {
		width: auto;
	}
}


/* ====================================================================
 * TOP (2026-05-20): トップページ記事カード改善
 *
 * 対象: .archives（トップ・カテゴリ・アーカイブ の記事カード）
 *
 * Day 1 (2026-05-19) で body を 16px に変更済みだが、
 * .archives が font-size:12px のままで著しく小さく見える問題を修正。
 * PC/SP 両方を考慮してブレイクポイント別に設定。
 *
 * style.css 定義:
 *   .archives { font-size:12px (1.2rem) }
 *   .archives article h2 { font-size:14px (1.4rem) }
 *   @media (min-width:670px) .archives { max-width:49%; margin-bottom:2% }
 * ==================================================================== */

/* ===== TOP-1: .archives カード本文テキスト 12px → 15px ===== */
/* body が 16px になったのに 12px は小さすぎ → 15px で整える */
.archives {
	font-size: 15px;
	font-size: 1.5rem;
}

/* ===== TOP-2: .archives h2 タイトル 14px → 17px (PC), 15px (SP) ===== */
/* タイトルの視認性向上、line-height も追加 */
.archives article h2 {
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.4;
	margin: 6px 0;
}

/* SP(max-width:575px): タイトル 17px は大きすぎるので 15px に抑える */
@media only screen and (max-width: 575px) {
	.archives article h2 {
		font-size: 15px;
		font-size: 1.5rem;
	}
}

/* ===== TOP-3: 1200px 以上でのカードレイアウト余白改善 ===== */
/* B1 で contents が 800px に広がったのに合わせてカード間の余白を確保 */
@media only screen and (min-width: 1200px) {
	/* max-width: 49% → 48.5% でカード間の gap を少し確保 */
	.archives {
		max-width: 48.5%;
	}
	/* カード内余白を少し増やす */
	.archives article {
		padding: 12px 18px;
	}
}


/* ====================================================================
 * NAV-HOVER (2026-05-20): PC グローバルナビ サブメニューを hover 表示
 *
 * 対象: .globalNav の「カテゴリー」「書き手」dropdown
 * PC のみ（min-width: 768px）に適用。SP のクリック動作は維持。
 *
 * Bootstrap 4 の data-toggle="dropdown"（クリック実装）はそのまま残し、
 * CSS hover で先にサブメニューを出すだけ。
 *
 * margin-top: 0 で hover 中にメニューが消えないようにする
 * （ボタン下端とサブメニュー上端の間に隙間があると hover が外れる）
 * ==================================================================== */

@media only screen and (min-width: 768px) {

	/* hover でサブメニューを表示（書き手メニュー） */
	.globalNav .nav-item.dropdown:hover .dropdown-menu.gnav-writer-list {
		display: block;
		margin-top: 0;
	}

	/* hover でカテゴリーメニューを表示（flex レイアウト維持） */
	.globalNav .nav-item.dropdown:hover .dropdown-menu.gnav-cat-list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin-top: 0;
	}

	/* ボタン下端〜サブメニュー上端の隙間をゼロに（hover が外れにくくする） */
	.globalNav .nav-item.dropdown .dropdown-menu {
		margin-top: 0;
	}
}


/* === Album Sweet Top Page Section === */
.albumsweet-section {
	background: #f5f5f5;
	border-radius: 8px;
	padding: 20px;
	margin: 24px 0 0 0;
}
.albumsweet-section .albumsweet-desc {
	font-size: 13px;
	color: #666;
	margin: 0 0 16px 0;
	line-height: 1.5;
}
.albumsweet-top__section {
	margin-bottom: 20px;
}
.albumsweet-top__section:last-child {
	margin-bottom: 0;
}
.albumsweet-top__heading {
	font-size: 13px;
	font-weight: bold;
	color: #555;
	border-left: 3px solid #e67e22;
	padding-left: 8px;
	margin: 0 0 10px 0;
}
.albumsweet-top__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.albumsweet-top__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #333;
}
.albumsweet-top__link:hover .albumsweet-top__name {
	color: #e67e22;
}
.albumsweet-top__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 3px;
}
.albumsweet-top__name {
	font-size: 10px;
	text-align: center;
	margin-top: 4px;
	line-height: 1.4;
	width: 100%;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #444;
}


/* ===== B-SPECIAL: 1200px 以上で archives-special / ad の固定幅を解除 ===== */
/* style.css @media(min-width:960px) の .archives.archives-special a{width:640px} が
   contents 800px 環境で右側に 160px の空白を生む問題を修正。
   max-height:180px も 800px 幅では行数が増えてクリップされるため解除。    */
@media only screen and (min-width: 1200px) {
	.archives.archives-special a {
		width: 100%; /* 640px → 100% : contents 800px に追随 */
	}
	.archives.archives-special {
		max-height: none; /* 180px 制限解除（800px 幅では行折り返しで超える） */
	}
	.single .ad {
		width: 800px; /* 640px → 800px */
	}
}

/* ===== TOP-3 補足: flex アイテムの横幅固定（3列化防止） ===== */
/* .archives は float:left だが、親が flex コンテナになる場合に
   flex-basis を明示して max-width だけでは縮む問題を防ぐ */
@media only screen and (min-width: 1200px) {
	.archives {
		flex: 0 0 48.5%;
	}
}

/* ===== B2-5: 記事ページ先頭 header_pic 画像を contents 幅に追随 ===== */
/* style.css @media(min-width:960px) の .single .header_pic img{width:640px} が
   contents 800px 環境で右に 160px の空白を生む問題を修正。
   base スタイルは width:100% だが 960px で 640px に固定されたため 1200px で再解除。 */
@media only screen and (min-width: 1200px) {
	.single .header_pic img {
		width: 100%;
		height: auto;
	}
}

/* ===== B2-6: 記事本文中の挿入画像を contents 幅いっぱいに拡大 ===== */
/* style.css の .single article img{max-width:100%} は「はみ出さない」だけで
   640px 画像が 800px コンテナの中で 640px のまま表示される問題を修正。
   width:100% で コンテナ幅（800px）まで拡大。
   対象: <p> または <figure> 直下の画像のみ（インラインスタイル付きトラッキングpixel除外）
   除外: div.itemBox などのレイアウトコンテナ内の画像（itemImage 等）は対象外。 */
@media only screen and (min-width: 1200px) {
	.single article p img:not([style]),
	.single article figure img {
		width: 100%;
		height: auto;
	}
}

/* ===== MRP: 関連記事リンクの display / padding リセット ===== */
.article_bottom #related-posts-MRP_all li a {
	display: block;
	padding: 0;
}