/*!
 *  * toppage-f-hero-trend.css - hero (this week PV No.1) + trend section
 *  * 2026-08-30: hero thumb -> object-fit:contain so the whole image always fits.
 *  */

.f-hero {
	  flex: 1.5;
	  min-width: 0;
	  padding: 14px;
	  transform: rotate(-1deg);
}

.f-hero__badge {
	  width: 172px;
	  height: 40px;
	  left: -14px;
	  top: 16px;
	  transform: rotate(-6deg);
	  z-index: 2;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 15px;
	  font-weight: 700;
	  text-align: center;
	  color: var(--f-ink);
}

.f-hero__thumb {
	  aspect-ratio: 16 / 9;
	  height: auto;
	  border: 1px solid var(--f-thumb-border);
	  margin-top: 14px;
}
.f-hero__thumb img { object-fit: contain; }

.f-hero__body { padding: 16px 8px 6px; }
.f-hero__eyebrow { font-size: 13px; color: var(--f-red); transform: rotate(-1deg); }
.f-hero__title { font-size: 19px; font-weight: 700; margin-top: 8px; line-height: 1.6; }
.f-hero__meta { font-size: 12.5px; color: var(--f-ink-sub); margin-top: 10px; line-height: 1.75; }

/* trend list (right column, up to N items, newest first) */
.f-trend {
	  flex: 1;
	  min-width: 0;
	  display: flex;
	  flex-direction: column;
	  gap: 16px;
}

.f-hero-row > .f-trend:only-child { flex: 1 1 100%; }

.f-trend__head { display: flex; align-items: baseline; gap: 8px; }
.f-trend__head-title { font-size: 15px; transform: rotate(-1deg); }
.f-trend__head-note { font-size: 10.5px; color: var(--f-ink-muted); }
/* 2026-08-31追加: トレンド記事にも過去ログ導線を追加 */
.f-trend__archive-link { margin-left: auto; font-size: 12.5px; color: var(--f-red); white-space: nowrap; align-self: baseline; }
.f-trend__archive-link:hover { text-decoration: underline; }

.f-trend__list { display: flex; flex-direction: column; gap: 16px; }

.f-trend__card {
	  padding: 10px;
	  display: flex;
	  gap: 12px;
	  align-items: center;
}

.f-trend__card:where(:nth-of-type(odd)) { transform: rotate(0.6deg); }
.f-trend__card:where(:nth-of-type(even)) { transform: rotate(-0.7deg); }

.f-trend__card--empty {
	  padding: 14px;
	  color: var(--f-ink-sub);
	  transform: none;
}

.f-trend__tape { width: 56px; left: -10px; top: -10px; }
.f-trend__thumb { width: 120px; aspect-ratio: 16 / 9; height: auto; flex-shrink: 0; }
.f-trend__body { min-width: 0; }
.f-trend__label { font-size: 11px; color: var(--f-red); }
.f-trend__title { font-size: 13.5px; font-weight: 700; margin-top: 4px; line-height: 1.5; }
.f-trend__sticky { transform: rotate(2deg); font-size: 12.5px; line-height: 1.65; }

/* responsive: breakpoints match toppage-f-base.css */

@media (max-width: 1024px) {
	  .f-hero,
	.f-trend { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 768px) {
	.f-hero { transform: none; }
	.f-hero__badge { width: 150px; height: 34px; font-size: 13px; left: -8px; }
	.f-hero__title { font-size: 17px; }
	
  .f-trend__head { flex-wrap: wrap; }
	.f-trend__card { align-items: flex-start; }
	.f-trend__thumb { width: 96px; aspect-ratio: 16 / 9; height: auto; }
}

/* ==========================================================
 * 2026-10-10 ホームの見た目の変更（ユーザー承認）
 *  - PC: No.1（＋このサイトについて）とトレンド記事を左右半分ずつ
 *  - トレンドの画像は16:9（文字が切れないように）
 *  - スマホ: No.1 → トレンド記事 → このサイトについて の順。トレンドは「小さい画像＋題名」
 *  - 「もうすぐ」の帯（section-recent.php）
 * 元に戻すときは localStorage._bak_toppage_f_hero_trend_css_20261010
 * ========================================================== */
.f-hero-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.f-hero-row .f-hero-col > .f-hero { flex: none; max-width: none; }
.f-hero-row .f-about { flex: 1 1 auto; padding: 18px 20px; background: #fffdf8; border: 1.5px solid #333; border-radius: 4px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .067); font-size: 14.5px; line-height: 1.85; color: #333; transform: none; }
.f-about__head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.f-about__icon { flex: none; border-radius: 50%; }
.f-about__title { font-weight: 700; font-size: 16px; margin: 0; }
.f-about__sub { font-size: 13px; color: #2E9A8C; font-weight: 700; margin: 0; }
.f-about__bubble { background: #fff; border: 1.5px solid #333; border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }
.f-about__list { margin: 0 0 8px; padding-left: 1.2em; }
.f-about__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.f-about__links a { color: #2E9A8C; font-weight: 700; text-decoration: none; }
.f-about__links a:hover { text-decoration: underline; }
.f-hero-row .f-trend__card .f-trend__thumb { aspect-ratio: 16 / 9; height: auto; }
.f-hero-row .f-trend__card .f-trend__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 769px) {
	.f-hero-row { align-items: stretch; }
	.f-hero-row > .f-hero-col,
	.f-hero-row > .f-trend { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); }
	.f-hero-row .f-trend__card { align-items: center; }
	.f-hero-row .f-trend__card .f-trend__thumb { width: 38%; max-width: none; flex: 0 0 38%; }
}
@media (max-width: 768px) {
	.f-hero-row .f-hero-col { display: contents; }
	.f-hero-row > .f-hero-col > .f-hero { order: 1; }
	.f-hero-row > .f-trend { order: 2; margin-top: 16px; }
	.f-hero-row > .f-hero-col > .f-about { order: 3; margin-top: 16px; }
	.f-hero-row .f-trend__card { flex-direction: row; align-items: center; gap: 10px; }
	.f-hero-row .f-trend__card .f-trend__thumb { width: 44%; max-width: none; flex: 0 0 44%; }
}

/* 「もうすぐ」の帯 */
.f-soon { margin: 10px 0 0; padding: 10px 14px; background: #fffdf8; border: 1.5px solid #333; border-radius: 4px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .067); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.f-soon__head { font-weight: 700; }
.f-soon__date { background: #E9AA3D; color: #fff; border-radius: 4px; padding: 1px 6px; font-size: 12px; font-weight: 700; margin-right: 6px; }
.f-soon a { color: #2E9A8C; font-weight: 700; text-decoration: none; }
.f-soon a:hover { text-decoration: underline; }
@media (max-width: 768px) {
	p.f-v2-intro { padding: 0 16px; font-size: 15px; }
	.f-soon { margin-left: 12px; margin-right: 12px; }
}