/*
 * Minimal bespoke CSS — only what block supports / theme.json cannot express.
 * Footer = 100% block attributes (nothing here). Header layout/spacing/colors are
 * block attributes too; only these genuinely un-blockable bits remain: fixed
 * positioning, the fixed-header content offset, menu divider/dropdown, the search
 * underline+icon, and the third-party weather-widget skin.
 */
/* ===== Header — sticky 2-row layout (stays in flow, pins to top on scroll) ===== */
.site-header {
	height: 170px;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* the header part wrapper sticks; the header itself stays in normal flow so the
   content below needs no offset */
.wp-site-blocks > header { position: sticky; top: 0; z-index: 100; }
.header__inner {
	width: 93%; max-width: 1600px; height: 100%; margin: 0 auto; padding: 25px 0 8px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 0;
}

/* top row: [weather | logo (centred) | buttons] — 3 equal-edge columns centre the logo */
.header__inner__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
/* the grid cells own the spacing — strip the default block vertical margins that
   would otherwise inflate the grid track height */
.header__inner > *, .header__inner__top > *, .header__inner__main > * { margin-block: 0; }
.header__inner__top__weather { justify-self: start; }
.header__inner__top__logo { justify-self: center; text-align: center; }
.header__inner__top__logo .wp-block-site-logo { display: inline-block; margin: 0; }
.header__inner__top__logo .wp-block-site-logo img { display: block; width: 300px; max-width: 80vw; }
.header__inner__top__btns { justify-self: end; width: 183px; }
.header__inner__top__btns .wp-block-button,
.header__inner__top__btns .wp-block-button__link { width: 100%; }
.header__inner__top__btns .wp-block-button__link { display: block; padding: 10px 20px; line-height: 1.46; text-align: center; }

/* main row: [hamburger | nav (centred) | search] — 3-col grid, centre-aligned so
   the hamburger, nav text and search field line up (the search input's symmetric
   vertical padding keeps its text centred). */
.header__inner__main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.header__inner__main .gnav-block { justify-self: start; }
.header__inner__main .pc-menu { justify-self: center; }
/* classic spaces items with padding only — kill the navigation blockGap */
.header__inner__main .pc-menu .wp-block-navigation__container { flex-wrap: nowrap; justify-content: center; gap: 0; }
.header__inner__main .h-search { justify-self: end; }

/* hamburger (3 bars) — classic #pc-humbgr (mega-menu wiring is a later step) */
/* z-index keeps the toggle above the overlay so it can close it in place */
.pc-humbgr { position: relative; z-index: 210; display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pc-humbgr .bars { position: relative; display: inline-block; width: 22px; height: 22px; }
.pc-humbgr .bars span { position: absolute; left: 0; width: 22px; height: 2px; background: var(--wp--preset--color--contrast); transition: transform .3s ease, opacity .3s ease; }
.pc-humbgr .bars span:nth-of-type(1) { top: 0; }
.pc-humbgr .bars span:nth-of-type(2) { top: 10px; }
.pc-humbgr .bars span:nth-of-type(3) { bottom: 0; }
/* open: the 3 bars morph into a × in place */
.pc-humbgr.is-open .bars span:nth-of-type(1) { transform: translateY(10px) rotate(45deg); }
.pc-humbgr.is-open .bars span:nth-of-type(2) { opacity: 0; }
.pc-humbgr.is-open .bars span:nth-of-type(3) { transform: translateY(-10px) rotate(-45deg); }

/* ===== Hamburger overlay menu (dailysun/menu-overlay, classic #gnav) ===== */
.gnav-block { display: inline-flex; }
.gnav {
	position: fixed; inset: 0; z-index: 200; background: var(--wp--preset--color--base);
	overflow-y: auto; opacity: 0; visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.gnav.is-open { opacity: 1; visibility: visible; }
.gnav__inner { width: 600px; max-width: 86%; margin: 0 auto; padding: 130px 0 60px; }
body.gnav-open { overflow: hidden; }

/* search */
.gnav__search form { position: relative; }
.gnav__search form::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 14px; height: 14px; background: url(i-search.svg) no-repeat center / contain;
}
.gnav__search .search-field, .gnav__search input[type="search"] {
	width: 100%; box-sizing: border-box; background: transparent;
	border: 0; border-bottom: 1px solid var(--wp--preset--color--contrast);
	padding: 7px 0 7px 25px; font-size: 14px; color: var(--wp--preset--color--contrast);
}
.gnav__search .search-field::placeholder { color: var(--wp--preset--color--contrast); opacity: 1; }
.gnav__search .search-field:focus { outline: 0; box-shadow: none; }
.gnav__search .search-submit { display: none; }

/* category accordion — classic #gnav_list: one bottom border on the whole list,
   no per-row dividers; rows are 7.5px tall */
.gnav__menu { list-style: none; margin: 0; padding: 40px 0 20px; border-bottom: 1px solid var(--wp--preset--color--border); }
.gnav__cat-row { position: relative; display: flex; align-items: center; justify-content: space-between; }
/* the link itself carries the py (block, 7.5px) and line-height 1.36 (classic .category);
   in a row it grows to fill the width so the whole row (minus the +) is clickable */
.gnav__cat-row > a, .gnav__cat--plain > a {
	display: block; padding: 7.5px 0;
	font-family: var(--wp--preset--font-family--accent); font-size: 14px; font-weight: 600;
	line-height: 1.36; letter-spacing: 0.56px; color: var(--wp--preset--color--contrast);
}
.gnav__cat-row > a { flex: 1; }
.gnav__acc { position: relative; width: 16px; height: 16px; border: 0; background: transparent; cursor: pointer; flex: 0 0 auto; }
.gnav__acc::before, .gnav__acc::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--wp--preset--color--contrast); }
.gnav__acc::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.gnav__acc::after { width: 2px; height: 14px; transform: translate(-50%, -50%); transition: transform .3s ease; }
.gnav__acc.is-open::after { transform: translate(-50%, -50%) scaleY(0); }
/* classic .accordion-menu: 5px 15px box; items space themselves via line-height */
.gnav__sub { list-style: none; margin: 0; padding: 5px 15px; }
.gnav__sub li a { display: block; width: 100%; padding: 0; font-size: 13px; font-weight: 400; line-height: 1.75; color: var(--wp--preset--color--contrast); }
.gnav__sub li a::before { content: "- "; }
/* 3rd level (e.g. 特集 > 年度別): indented under its parent */
.gnav__sub3 { list-style: none; margin: 0; padding: 0 0 0 1em; }
.gnav__sub3 li a::before { content: "・"; }

/* secondary links + CTA — classic .menu-other: normal weight (400) */
.gnav__other { list-style: none; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.gnav__other li { margin-top: 10px; font-size: 14px; line-height: 1.43; }
.gnav__other li:first-child { margin-top: 0; }
.gnav__other li a { display: block; width: 100%; font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--wp--preset--color--contrast); }
.gnav__cta { margin-top: 40px; text-align: center; }
.gnav__cta a { display: inline-block; padding: 10px 20px; font-size: 13px; line-height: 1.46; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* ===== Footer (classic .f-content) ===== */
/* same 93% / max 1600 centred gutter as the header inner */
.f-content { width: 93%; max-width: 1600px; margin: 0 auto; }
/* rows own their spacing via padding; strip WP's block-spacing margins so the
   legal row sits right under the main border (classic .f-content__other) */
.f-content > * { margin-block: 0; }
.footer-brand .wp-block-site-logo img { margin-top: 10px; width: 250px; height: auto; }
/* SNS icons 27px filled circle (classic i-*.svg: #b5b5b5 disc + white glyph) */
.footer-brand .wp-block-social-links .wp-social-link { width: 27px; height: 27px; border-radius: 50%; }
.footer-brand .wp-block-social-links .wp-social-link a { width: 100%; height: 100%; padding: 0; display: flex; align-items: center; justify-content: center; }
.footer-brand .wp-block-social-links .wp-social-link svg { width: 20px; height: 20px; }
/* the plain "f" glyph is tall/narrow — keep its aspect, match the others' height;
   nudge down so it sits optically centred in the disc */
.footer-brand .wp-block-social-links .wp-social-link-facebook svg { width: auto; height: 22px; position: relative; top: 2px; }
/* don't enlarge the icons on hover (WP core scales .wp-social-link up on hover) */
.footer-brand .wp-block-social-links .wp-social-link { transition: none; }
.footer-brand .wp-block-social-links .wp-social-link:hover,
.footer-brand .wp-block-social-links .wp-social-link:focus,
.footer-brand .wp-block-social-links .wp-social-link:focus-within { transform: none; }
/* two link columns are 150px wide (classic .menu-en / .menu-ja) */
.footer-nav-col { min-width: 150px; box-sizing: border-box; }
/* typography set once on the nav (not stamped onto every li); line-height 1.42
   so the 9px blockGap gives the classic ~26px row pitch */
.footer-nav-col .wp-block-navigation { font-size: 12px; font-weight: 500; letter-spacing: 0.48px; }
.footer-nav-col .wp-block-navigation,
.footer-nav-col .wp-block-navigation__container,
.footer-nav-col .wp-block-navigation-item { width: 100%; }
.footer-nav-col .wp-block-navigation-item__content { display: block; width: 100%; line-height: 1.42; }
/* phones: drop the nav columns; centre the logo/SNS and stack the legal line
   (privacy above copyright), matching production's simplified mobile footer */
@media (max-width: 820px) {
	.footer-navs { display: none !important; }
	.footer-top { justify-content: center; }
	.footer-brand { align-items: center; }
	.footer-legal { flex-direction: column-reverse; align-items: center; gap: 8px; }
}

/* pc-menu items: Open Sans 12px with a thin | divider between items (classic) */
.pc-menu .wp-block-navigation-item__content { padding: 12px 26px; font-size: 12px; font-weight: 600; line-height: 1.42; letter-spacing: 0.48px; color: var(--wp--preset--color--contrast); }
/* classic shows no dropdown caret (submenus open on hover) */
.pc-menu .wp-block-navigation__submenu-icon { display: none; }
.pc-menu .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { padding-right: 26px; }
.pc-menu .wp-block-navigation__container > .wp-block-navigation-item { position: relative; }
.pc-menu .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after {
	content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 12px; background: var(--wp--preset--color--border);
}

@media (max-width: 820px) {
	/* compact header: logo centred with equal space above/below, hamburger
	   centred on the right. (Production's tall fixed height with a big gap below
	   the logo is a design bug we intentionally don't copy.) */
	.site-header { height: auto; }
	.header__inner { display: block; position: relative; height: auto; padding: 18px 0; }
	.header__inner__top, .header__inner__main { display: block; }
	/* mobile shows only the logo + hamburger; hide the rest.
	   prefixed with .header__inner to outweigh WP core's `body .is-layout-flex` */
	.header__inner .header__inner__top__weather,
	.header__inner .header__inner__top__btns,
	.header__inner .pc-menu,
	.header__inner .h-search { display: none; }
	/* line-height:0 removes the inline-block baseline gap so the space above and
	   below the logo is equal */
	.header__inner__top__logo { margin: 0; text-align: center; line-height: 0; }
	.header__inner__top__logo .wp-block-site-logo img { width: 250px; }
	/* block (not inline-flex) so the empty main row makes no line box / extra height */
	.gnav-block { display: block; }
	/* position the hamburger BUTTON (not .gnav-block) — a transform on the
	   overlay's ancestor would make the fixed overlay relative to it and break
	   its full-screen coverage */
	.header__inner__main .pc-humbgr { position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin: 0; }
	/* overlay content 70% on tablet/mobile (classic #gnav nav) */
	.gnav__inner { width: 70%; max-width: none; }
	/* classic shrinks the overlay category rows to 5px on ≤820 */
	.gnav__cat-row > a, .gnav__cat--plain > a { padding: 5px 0; }
}
@media (max-width: 480px) {
	.header__inner__top__logo .wp-block-site-logo img { width: 150px; }
	.gnav__inner { width: 100%; }
}

/* pc-menu dropdown (submenu) — classic .menu-list-dd .sub-menu (width 150, white,
   shadow, 15px inset; items: 11px, 7px vertical, #ddd divider, last none) */
/* selectors carry .wp-block-navigation too, to outweigh WP core's
   `.wp-block-navigation .has-child .…__submenu-container > … > …__content` (0,5,0) */
/* ul owns the 15px horizontal inset; li is 150px; the link only needs py */
.header__inner__main .pc-menu.wp-block-navigation .wp-block-navigation__submenu-container {
	/* min-width:150 + width:auto sizes the box; !important beats WP core's
	   :hover/:focus-within min-width:200 (which spans several state selectors) */
	width: auto; min-width: 150px !important; padding: 5px 15px;
	background: #fff; border: 0;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
	/* fade + slide-down on open (approximates the classic jQuery slideDown).
	   This (closed) state owns the CLOSE timing — keep it quick so a dropdown
	   doesn't linger and overlap the next one when moving between items. */
	transform: translateY(-8px);
	transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
.header__inner__main .pc-menu.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.header__inner__main .pc-menu.wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
	transform: translateY(0);
	/* the open state owns the OPEN timing — the slower slide-down */
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.header__inner__main .pc-menu.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { padding: 0; }
.header__inner__main .pc-menu.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block; width: 100%; padding: 7px 0; font-size: 11px; font-weight: 600;
	letter-spacing: normal; text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.header__inner__main .pc-menu.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child > .wp-block-navigation-item__content { border-bottom: 0; }

/* Location Weather (id 246) — compact header skin, ported from the classic theme.
   The shortcode output is run through wpautop, which injects stray <br>/<p>
   (each ~23px) that balloon the widget height; hide them so it stays compact. */
.header__inner__top__weather br,
.header__inner__top__weather p { display: none !important; }
#splw-location-weather-246.splw-main-wrapper { margin-bottom: 0 !important; max-width: 220px !important; }
#splw-location-weather-246 .splw-lite-header-title-wrapper { line-height: 1 !important; }
#splw-location-weather-246 .splw-lite-header-title { font-size: 15px !important; line-height: 1 !important; }
#splw-location-weather-246 .splw-lite-current-time { font-size: 11px !important; line-height: 1 !important; }
#splw-location-weather-246 .splw-weather-icon, #splw-location-weather-246 .weather-icon { width: 58px !important; }
#splw-location-weather-246 .splw-lite-wrapper .splw-cur-temp { justify-content: flex-start !important; }
#splw-location-weather-246 .cur-temp { font-size: 0 !important; line-height: 1 !important; }
#splw-location-weather-246 .current-temperature { font-size: 30px !important; }
@media (max-width: 781px) { .header__inner__top__weather, .header__inner__top__btns { display: none; } }

/* search: the input itself is the styled box — underline border + symmetric
   vertical padding so its text sits centred (lines up with nav/hamburger); the
   wrapper only positions the leading magnifier icon. */
.h-search .wp-block-search__inside-wrapper { position: relative; border: 0; padding: 0; }
.h-search .wp-block-search__inside-wrapper::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px;
	background: url(i-search.svg) no-repeat center / contain;
}
.h-search .wp-block-search__input {
	width: 100%; box-sizing: border-box;
	border: 0; border-bottom: 1px solid var(--wp--preset--color--contrast); background: transparent;
	padding: 7px 0 7px 25px; min-height: 0; font-size: 13.3333px; line-height: 1.4;
}
/* classic: placeholder is #111, not the browser default grey */
.h-search .wp-block-search__input::placeholder { color: var(--wp--preset--color--contrast); opacity: 1; }
/* underline-only field: no focus box; keep the underline as the focus cue */
.h-search .wp-block-search__input:focus { outline: 0; box-shadow: none; border-bottom-color: var(--wp--preset--color--contrast); }

/* The query-pagination block drops its margin attribute, so the flow blockGap
   (small) sits above the pager. Restore the classic 48px gap above it. */
.wp-block-query > .wp-block-query-pagination { margin-top: 48px; }

/* archive/search pagination — bordered number boxes (classic .wp-pagenavi parity).
   query-pagination-numbers exposes no per-number size/border attribute, so this
   small rule is genuinely un-blockable. Tokens come from theme.json. */
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 48px; height: 26px; padding: 0 6px;
	border: 1px solid var(--wp--preset--color--contrast);
	font-size: 14px; line-height: 1; text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
/* prev/next links match the number boxes' font size */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next { font-size: 14px; }

/* content + sidebar columns: stack on mobile (the 69.5/26.7 split is set via
   block attributes on the flex children; only the stacking needs a query) */
/* flex columns must allow shrink below content (min-width:auto default) so a wide
   child (PICK UP carousel track with overflow-x:auto) is contained, not blown out */
.content-columns > main, .content-columns > aside { min-width: 0; }
/* MV -> content gap matches production (70px), on PC and mobile */
.content-columns { margin-top: 70px; }
@media (max-width: 781px) {
	.content-columns > main, .content-columns > aside { flex-basis: 100% !important; }
	/* stacked: gap between the main column (PICK UP) and the sidebar (RANKING) */
	.content-columns > aside { margin-top: var(--wp--preset--spacing--80); }
}

/* ===== Breadcrumbs (Breadcrumb NavXT block) — classic .breadcrumbs ===== */
.breadcrumbs {
	display: flex; flex-wrap: wrap; align-items: center;
	margin-bottom: 30px;
	font-size: 12px; font-weight: 500; line-height: 1.42; color: #878787;
}
/* the breadcrumb's own bottom margin is the gap to the content (not the 70px MV gap) */
.breadcrumbs + .content-columns { margin-top: 0; }
.breadcrumbs span:empty { display: none; }
.breadcrumbs span[property="itemListElement"] { position: relative; margin-right: 20px; }
.breadcrumbs span[property="itemListElement"]:not(:last-child)::after {
	content: ">"; position: absolute; right: -15px; top: 0;
}
.breadcrumbs a { color: #878787; }

/* ===== Sidebar sections ===== */
/* the vertical flex column defaults to flex-start, leaving content-narrow
   sections (e.g. CLASSIFIEDS) short of the column width; stretch them all */
.sidebar { align-items: stretch; }
/* shared section heading (classic .article-head): RANKING / 紙面PDF版 /
   CLASSIFIEDS / RELATED POST / front-page sections */
.is-style-section-head,
.related__head {
	margin: 0;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 22px; font-weight: 600; line-height: 1.36;
	color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}
/* the related / curated headings carry no underline (classic .col2 .article-head) */
.related__head { border-bottom: 0; }
/* sidebar banners: fit the column, stack with the group's blockGap */
/* banners are capped to their native width (300) and centred on every width
   (the section headings stay full column width) */
.sidebar-banner .wp-block-image,
.sidebar-banner .wp_bannerize_banner_box { max-width: 300px; margin-inline: auto; }
.sidebar-banner img { width: 100%; height: auto; }
/* bannerize banners: block boxes with an even 25px gap (matches 紙面PDF), removing
   the inline-whitespace gap between the default inline boxes */
.sidebar-banner .wp_bannerize_banner_box,
.sidebar-banner .wp_bannerize_banner_box > a,
.sidebar-banner .wp_bannerize_banner_box img { display: block; }
/* spacing via the bannerize vertical layout's gap (override the plugin default 10px) */
.sidebar-banner .wp_bannerize_layout_vertical { gap: 16px; }

/* CLASSIFIEDS list: title + meta, divided rows (no thumbnail, per classic) */
.sidebar-classifieds .wp-block-post-template { margin-top: 30px; }
.sidebar-classifieds .wp-block-post-template > li + li { margin-top: 20px; }
.sidebar-classifieds__more { margin-top: 20px; text-align: right; font-size: 13px; }
/* phones: divide each classified with a bottom border (classic .col2 item) */
@media (max-width: 781px) {
	.sidebar-classifieds .wp-block-post-template > li { padding-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--border); }
}

/* featured image caption on single (classic .annotation) */
.featured-caption { margin: 8px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: #555; }

/* article body reproduces the classic .article-container: 82% of the column,
   centred, with 60px top/bottom padding (the title/meta stay full width) */
.article-body { width: 82%; max-width: var(--wp--style--global--content-size); margin: 0 auto; padding: 15px 0 60px; }
/* 固定ページ本文: 82% inset (classic), capped at the global contentSize so the max
   width stays in sync with FSE (82% of the max wrap == contentSize). Centred, with
   the spacing-80 token above and below. */
.page-body { width: 82%; max-width: var(--wp--style--global--content-size); margin: var(--wp--preset--spacing--80) auto; }
/* the body's own margin sets the outer spacing — zero the first/last child's edges.
   wp-block-post-content (present on the front AND in the editor, where entry-content
   is not) double-classed to beat content.css's `… > p:first-child` (0,2,1). */
.wp-block-post-content.page-body > :first-child { margin-top: 0; }
.wp-block-post-content.page-body > :last-child { margin-bottom: 0; }

/* single header (classic .container): a short tick under the meta, and the
   tags/share row sits on a bottom rule */
.single-meta { position: relative; }
.single-meta::after {
	content: ""; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
	width: 20px; height: 1px; background: var(--wp--preset--color--contrast);
}
.single-links { padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
/* keep the share buttons right-aligned even when the post has no tags (empty post-terms,
   so space-between would otherwise pull the lone share block to the left) */
.single-links .addtoany_shortcode { margin-left: auto; }
/* term lists (category/tag): the half-width-space separator becomes a fixed 12px gap */
.wp-block-post-terms__separator { display: inline-block; width: 12px; }

/* post subtitle (ACF sub_title) under the single title — centered like the title */
.post-subtitle { margin: 10px 0 0; font-size: 23px; line-height: 1.13; text-align: center; }

/* ===== Front page sections ===== */
/* "もっと見る" link row with a ">" chevron, right-aligned (classic .top-btn-more) */
.top-more { margin-top: 30px; text-align: right; font-size: 14px; line-height: 1.43; }
.top-more a,
.sidebar-classifieds__more a,
.related__more a { position: relative; padding-right: 15px; }
.top-more a::after,
.sidebar-classifieds__more a::after,
.related__more a::after {
	/* vertically centred, nudged 1px down to sit on the Japanese text's optical centre */
	content: ""; position: absolute; right: 0; top: calc(50% + 1px); transform: translateY(-50%);
	width: 6px; height: 10px;
	background: no-repeat center / contain url("../images/i-link-bl.svg");
}
/* category in a card's meta inherits the muted meta colour, not the link colour */
.wp-block-post-terms a { color: inherit; }
/* ===== Event archive grid (dailysun/event-archive) — classic category-event ===== */
.event-archive__list {
	list-style: none; margin: 40px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; column-gap: 5%;
}
/* horizontal card: thumbnail left, date badge + title stacked right (classic col2) */
.event-archive__item { width: 47.5%; padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.event-archive__item a { display: flex; gap: 24px; align-items: flex-start; }
.event-archive__thumb { flex: 0 0 35%; }
.event-archive__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 158 / 109; object-fit: cover; }
.event-archive__detail { flex: 1 1 0; min-width: 0; }
.event-archive__item .events__date { display: inline-block; margin-top: 0; padding: 3px 5px 5px; background: var(--wp--preset--color--contrast); }
.event-archive__item .events__date span { display: block; padding: 0; border: 0; background: none; color: var(--wp--preset--color--base); font-size: 18px; font-weight: 700; line-height: 1.06; }
.event-archive__title { display: block; margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.45; }
@media (max-width: 781px) { .event-archive__item { width: 100%; } }

/* ===== Newspaper PDF grid (newspaper archive Query Loop) ===== */
.newspaper-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 3.5%;
}
/* original gap below the heading; outweigh the post-template's default margin */
.wp-block-query > .newspaper-list { margin-top: 60px; }
.newspaper-list > li { margin: 0; }
.newspaper-cover { display: block; }
.newspaper-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--wp--preset--color--border); }
@media (max-width: 781px) { .newspaper-list { grid-template-columns: repeat(2, 1fr); gap: 30px 3.5%; } }

/* ===== Carousel block (dailysun/carousel) — MV / PICK UP, scroll-snap ===== */
.carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 25px; }
.carousel__nav { display: flex; gap: 10px; margin-left: auto; }
.carousel__arrow {
	position: relative; width: 30px; height: 30px;
	border: 1px solid var(--wp--preset--color--contrast); background: transparent; cursor: pointer;
}
.carousel__arrow::before {
	content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
	border-top: 2px solid var(--wp--preset--color--contrast); border-right: 2px solid var(--wp--preset--color--contrast);
}
.carousel__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.carousel__arrow--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.carousel__track {
	position: relative;
	display: flex; gap: 30px; margin: 0; padding: 0 0 12px; list-style: none;
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
/* hide the scrollbar (classic slick shows none); arrows/dots/swipe remain */
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__item { flex: 0 0 auto; scroll-snap-align: start; }
.carousel__item a { display: block; }
.carousel__thumb { display: block; }
.carousel__thumb img { display: block; width: 100%; object-fit: cover; }
.carousel__title { display: block; }
/* sub-title inherits the link colour (#111, classic), not muted */
.carousel__sub { display: block; margin-top: 5px; }
.carousel__meta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 15px; font-size: 13px; line-height: 1.46; color: var(--wp--preset--color--muted); }
/* MV (hero) — classic slick infinite centerMode. The carousel is capped at the
   header/content width (93% / max 1600, centred); three slides fill it and the
   window clips anything past the edges. With JS (.is-mv-js, see view.js) the
   track is driven by a transform so the active slide is centred and it loops. */
/* Uniform gap between every slide (the centre slide is wider via its box width,
   NOT a transform — so all gaps stay equal, including to the standby slides). */
.carousel.is-mv .carousel__track {
	scroll-snap-type: x mandatory; padding-block: 10px; align-items: flex-start;
	gap: 20px;
}
/* the clipping window spans the viewport so the standby slides peek past the
   content width toward the screen edges (clipped at the viewport — no scroll). */
.carousel__window { overflow: hidden; }
/* swipe windows: capture horizontal drags (vertical still scrolls the page),
   and don't select text while dragging */
.is-mv-js .carousel__window,
.is-pickup-js .carousel__window { touch-action: pan-y; user-select: none; }
.is-mv-js .carousel__window { width: 100vw; margin-left: calc(50% - 50vw); }
.is-mv-js .carousel__track {
	width: auto; margin-inline: 0; overflow: visible;
	scroll-snap-type: none; will-change: transform;
}
/* side slide 0.8 / centre slide 1.1 of a third of the content width (classic
   ratio), set as the BOX width so the gaps stay uniform; ≤820px: 1-up. */
.carousel.is-mv .carousel__item {
	width: calc(min(93vw, 1600px) / 3 * 0.8); min-height: 460px;
	scroll-snap-align: center;
}
.carousel.is-mv .carousel__item.is-center { width: calc(min(93vw, 1600px) / 3 * 1.1); position: relative; z-index: 1; }
/* enable the grow/shrink transition only after init (so the first measure reads
   final widths, not a mid-transition value) */
.is-mv-ready .carousel__item { transition: width .5s ease; }
@media (max-width: 820px) {
	.carousel.is-mv .carousel__item,
	.carousel.is-mv .carousel__item.is-center { width: 93vw; min-height: 0; }
}
.carousel.is-mv .carousel__item > a { display: block; }
/* pagination dots (classic slick dots) */
/* classic slick dots: small black squares, ~30px pitch, active darker */
.carousel__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 0; background: rgba(0, 0, 0, 0.25); cursor: pointer; }
.carousel__dot.is-active { background: rgba(0, 0, 0, 0.75); }
/* MV image: the source 3:2 ratio (the classic 373/210 was wrong), in a fixed
   box so the size is correct regardless of (lazy) load state. height:auto lets
   the aspect-ratio drive the box (without it the img height attribute wins). */
.carousel.is-mv .carousel__thumb img { aspect-ratio: 373 / 210; height: auto; }
.carousel.is-mv .carousel__title { margin-top: 20px; font-size: 20px; font-weight: 500; line-height: 1.45; }
.carousel.is-mv .carousel__sub { font-size: 16px; line-height: 1.5; }
/* the slide text scales with its centre/side box (classic 1.1 / 0.8); desktop
   only, since on mobile the MV shows one full-width slide */
@media (min-width: 821px) {
	.carousel.is-mv .carousel__item.is-center .carousel__title { font-size: 18px; }
	.carousel.is-mv .carousel__item.is-center .carousel__sub { font-size: 14.4px; }
	.carousel.is-mv .carousel__item:not(.is-center) .carousel__title { font-size: 16px; }
	.carousel.is-mv .carousel__item:not(.is-center) .carousel__sub { font-size: 12.8px; }
}
/* date/category stay one size regardless of centre/side */
/* PICK UP (boxed) */
.carousel.is-pickup { margin-top: 60px; padding: 30px 40px; background: #f7f7f7; }
/* JS-enhanced: a transform-driven slider whose track is a 2-column grid. Two
   slides fill the CONTENT width (their edges line up with the heading's border),
   but the clipping window bleeds to both coloured box edges so slides stay
   visible while moving through the left/right padding. JS offsets the track by
   the box padding so the resting pair still starts at the content edge.
   The gap between slides equals the box's horizontal padding (40px) so spacing
   stays even as slides pass through the coloured edges.
   Column width = (window − 2×40 padding − 40 gap) / 2. */
.is-pickup-js .carousel__window { margin-inline: -40px; }
.is-pickup-js .carousel__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 120px) / 2);
	column-gap: 40px; width: 100%;
	overflow: visible; scroll-snap-type: none; will-change: transform;
}
.is-pickup-js .carousel__item { width: auto !important; }
/* sidebar gone (<=781): the box bleeds to the screen edges, but its content keeps the
   same gutter as the other sections (the theme's root padding) so headings line up */
@media (max-width: 781px) {
	.carousel.is-pickup { margin-inline: calc(50% - 50vw); padding-left: 3.5vw; padding-right: 3.5vw; }
	.is-pickup-js .carousel__window { margin-inline: -3.5vw; }
	/* 2 slides fill the content (box width less the 3.5vw gutters and the 40px gap) so
	   no third slide peeks at rest */
	.is-pickup-js .carousel__track { grid-auto-columns: calc(50% - 3.5vw - 20px); }
}
/* phones: one slide per view (2-up is too cramped) */
@media (max-width: 600px) {
	.is-pickup-js .carousel__window { margin-inline: -15px; }
	.is-pickup-js .carousel__track { grid-auto-columns: calc(100% - 30px); column-gap: 15px; }
}
/* heading spans the full width with its own underline; the prev/next nav is absolute at the right */
.carousel.is-pickup .carousel__head { position: relative; display: block; }
.carousel.is-pickup .carousel__head .carousel__nav { position: absolute; right: 0; top: 0; bottom: 2px; display: flex; align-items: center; }
.carousel.is-pickup .carousel__item { width: min(320px, 78vw); }
/* image fills the frame (cropped) — height:auto lets the 324/183 aspect drive it */
.carousel.is-pickup .carousel__thumb img { aspect-ratio: 324 / 183; height: auto; object-fit: cover; }
.carousel.is-pickup .carousel__title { margin-top: 13px; font-size: 18px; font-weight: 500; line-height: 1.45; }
.carousel.is-pickup .carousel__sub { font-size: 15px; line-height: 1.4; }
/* PICK UP arrows: plain chevrons with a thin divider (classic, not boxed) */
.carousel.is-pickup .carousel__nav { gap: 0; }
.carousel.is-pickup .carousel__arrow { width: 34px; height: 22px; border: 0; background: none; }
/* arrows use the site's shared chevron (i-link-bl.svg); prev is flipped */
.carousel.is-pickup .carousel__arrow::before {
	width: 7px; height: 12px; border: 0;
	background: no-repeat center / contain url("../images/i-link-bl.svg");
}
.carousel.is-pickup .carousel__arrow--prev::before { transform: translate(-50%, -50%) scaleX(-1); }
.carousel.is-pickup .carousel__arrow--next::before { transform: translate(-50%, -50%); }
.carousel.is-pickup .carousel__arrow--prev::after {
	content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	width: 1px; height: 14px; background: #a5a5a5;
}

/* 記事下バナー（テンプレートパーツ article-banner > dailysun/banner）— 記事本文下の広告枠。
   PICK UP と同じ背景。tablet 以下（<=781px）はビューポート全幅。バナー（300x250）は左右中央。
   見た目はこのパーツのグループ(.article-banner)、描画は dailysun/banner ブロックが担当。 */
.article-banner { margin-top: 60px; padding: 30px 40px; background: #f7f7f7; }
.article-banner .wp_bannerize_container { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.article-banner img { max-width: 300px; height: auto; }
/* バナー未登録（実バナーが無い）時は枠ごと隠す */
.article-banner:not(:has(.wp_bannerize_banner_box)) { display: none; }
@media (max-width: 781px) {
	.article-banner { margin-inline: calc(50% - 50vw); padding-left: 3.5vw; padding-right: 3.5vw; }
}

/* EVENTS block (dailysun/events): featured event + list, classic .top-events */
.events__container { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; }
.events__latest { display: block; width: 35.8%; }
.events__latest-thumb { display: block; }
.events__latest-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 331 / 228; object-fit: cover; }
.events__latest-title { display: block; margin-top: 10px; font-size: 17px; font-weight: 500; line-height: 1.53; }
.events__articles { width: 58.76%; }
.events__list { list-style: none; margin: 0; padding: 0; }
.events__item { padding-bottom: 15px; margin-top: 15px; border-bottom: 1px solid var(--wp--preset--color--border); }
.events__item:first-child { margin-top: 0; }
.events__item a { display: flex; flex-wrap: wrap; align-items: center; column-gap: 15px; }
/* fixed 100px date column so every title starts at the same x and wraps the same
   (classic __date 100px / __title calc(100% - 115px)) */
.events__item-title { flex: none; width: calc(100% - 115px); font-size: 17px; font-weight: 500; line-height: 1.53; }
.events__date { display: inline-block; margin-top: 10px; }
.events__item .events__date { flex: 0 0 100px; margin-top: 0; }
.events__date span { display: inline-block; padding: 4px 8px; border: 1px solid var(--wp--preset--color--border); font-size: 17px; font-weight: 500; line-height: 1.42; }
@media (max-width: 781px) { .events__latest, .events__articles { width: 100%; } .events__articles { margin-top: 30px; } }

/* SPECIAL grid items (classic .top-special) */
.top-special .wp-block-post-featured-image img { aspect-ratio: 285 / 161; object-fit: cover; }

/* title-only lists (COMMUNITY / COLUMN) — padding/border/arrow on the link so
   the whole row is clickable (classic top-2cat list item) */
.title-list .wp-block-post-template { list-style: none; margin: 20px 0 0; padding: 0; }
.title-list .wp-block-post-template > li { margin-block: 0; }
.title-list .wp-block-post-title { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.63; }
.title-list .wp-block-post-title a {
	display: block; position: relative;
	padding: 15px 40px 15px 0; border-bottom: 1px solid var(--wp--preset--color--border);
}
.title-list .wp-block-post-title a::after {
	content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
	width: 6px; height: 10px;
	background: no-repeat center / contain url("../images/i-link-bl.svg");
}

/* post-card (archive/search/front DAILY): WP does not generate the child-layout
   flex-basis for pattern-expanded blocks inside a Query loop, so set the card's
   image width + the 2-column grid gap explicitly here (classic .col2). */
.wp-block-post-template.is-layout-grid:has(.post-card) { gap: 0 4.4% !important; }
.post-card > .wp-block-post-featured-image { flex: 0 0 35%; }
.post-card > .wp-block-group { flex: 1 1 auto; min-width: 0; }
/* fill the grid cell so the bottom border lines up across the row (cards in a
   row are equal height regardless of title length) */
.wp-block-post-template.is-layout-grid .post-card { height: 100%; }


/* ===== RELATED block (dailysun/related) — 2-up card grid (classic .col2) ===== */
.related__list {
	/* no top margin: the first card's own 30px padding is the heading->card gap
	   (classic .col2__list has no margin; the gap comes from the card padding) */
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 5%;
}
.related__item { padding: 30px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.related__item a { display: flex; justify-content: space-between; column-gap: 5%; }
.related__thumb { flex: 0 0 35%; }
/* height:auto lets aspect-ratio crop the thumb; without it the 'medium' image's
   own height wins and portrait sources render tall */
.related__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.related__body { flex: 1; }
.related__title { display: block; font-size: 18px; font-weight: 500; line-height: 1.44; }
.related__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--wp--preset--color--muted); }
.related__more { margin-top: 20px; text-align: right; font-size: 14px; }
@media (max-width: 781px) { .related__list { grid-template-columns: 1fr; } }

/* ===== RECOMMENDED block (dailysun/recommended) — 5-up card grid ===== */
.recommended__head {
	margin: 0 0 30px;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 22px; font-weight: 600; line-height: 1.36;
}
.recommended__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 2%;
}
.recommended__item a { display: block; }
/* height:auto lets aspect-ratio set the box; without it the WPP thumb's height
   attribute wins and the crop ratio drifts */
.recommended__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 161 / 111; object-fit: cover; }
.recommended__title { display: block; margin-top: 0; font-size: 14px; line-height: 1.43; }
@media (max-width: 781px) { .recommended__list { grid-template-columns: repeat(2, 1fr); } }
/* classic shrinks the RECOMMENDED top gap on phones (135px -> 80px); the part
   sets 135px inline, so override it here */
@media (max-width: 480px) { .recommended { margin-top: 80px !important; } }

/* ===== RANKING block (dailysun/ranking) ===== */
.ranking__tabs { display: flex; justify-content: space-between; margin-top: 20px; }
.ranking__tab {
	position: relative; width: 49%; padding: 6px;
	border: 1px solid var(--wp--preset--color--contrast); background: transparent; cursor: pointer;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 14px; font-weight: 600; line-height: 1.36; text-align: center;
}
.ranking__tab.is-active { background: var(--wp--preset--color--contrast); color: #d3d3d3; }
/* downward marker under the active tab */
.ranking__tab.is-active::after {
	content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
	border: 8px solid transparent; border-bottom: 0; border-top-color: var(--wp--preset--color--contrast);
}
/* fade (+ slight rise) the panel in each time it becomes the visible tab */
.ranking__panel { animation: ranking-fade .5s ease; }
@keyframes ranking-fade {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
.ranking__list { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: rank; }
.ranking__item { margin-top: 20px; }
.ranking__item:first-child { margin-top: 0; }
.ranking__item a { display: flex; justify-content: space-between; flex-wrap: wrap; }
.ranking__num {
	counter-increment: rank; width: 11%;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 19px; font-weight: 600; line-height: 1.37;
}
.ranking__num::before { content: counter(rank); }
.ranking__body { width: 88%; }
.ranking__title { font-size: 15px; font-weight: 500; line-height: 1.4; }
.ranking__meta { display: flex; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--wp--preset--color--muted); }
.ranking__date { margin-right: 13px; }