/* ==================================================
   JP-only overrides / additions
   Do not duplicate rules that belong in styles.css /
   styles-temp.css — this file is for ja_jp-specific
   UX changes only.
   ================================================== */

/* The comparison-table tier cards' "TrendLife" label uses .div-title,
   which forces `text-transform: uppercase !important` sitewide --
   rendering it as "TRENDLIFE" regardless of the mixed-case text in the
   HTML source. Override back to the actual mixed-case "TrendLife". */
.div-title {
	text-transform: none !important;
}

/* The hero heading's "TrendLife" trademark line (.widget-tm) doesn't
   set its own text-transform, so it inherits `uppercase` from its
   parent .widget-m (the <h1>) -- rendering "TrendLife" as "TRENDLIFE".
   Stop that inheritance so it displays in its actual mixed case. */
.widget-tm {
	text-transform: none;
}

/* virus-buster-for-mac.asp's product name ("ウイルスバスター for Mac") inherits
   the same `.widget-m`/`.h3` uppercase transform as above, turning "for Mac"
   into "FOR MAC". GetProductName() wraps that portion in this class so it
   displays in its actual mixed case, same fix as .widget-tm. */
.no-uppercase {
	text-transform: none;
}

/* Buy-block: collapsed "subscription details / OS compatibility"
   disclosure (Row: reduce density before CTA button). Reuses the
   site's existing .accordion-section-title/.accordion-section-content
   behavior (global JS), these classes only adjust the compact look
   for this smaller, in-card context. */

.d-subscription-details {
	margin-top: 8px;
	text-align: center;
}

.d-subscription-toggle {
	width: auto;
	display: inline-block;
	padding: 0;
	margin: 0 auto;
	font-size: 12px;
	color: #8E8E8E;
	text-decoration: underline;
	border-bottom: none;
	text-align: center;
}

.d-subscription-toggle:before {
	content: "\25BE";
	font-family: inherit;
	float: none;
	background: none;
	color: #8E8E8E;
	text-decoration: none;
	padding: 0 0 0 4px;
	font-size: 10px;
	border-radius: 0;
	width: auto;
}

.d-subscription-toggle.active:before {
	content: "\25B4";
}

.d-subscription-content {
	margin-bottom: 0;
	padding-top: 8px;
	padding-bottom: 0;
}

.d-subscription-content .small {
	margin-bottom: 4px;
}

/* Move the top-level nav items' spacing from the <a> onto the <li>
   itself, preserving the same total 30px so alignment/box size is
   unchanged. This makes it possible to style an item's inner content
   (e.g. add a border around just the label) without that content
   fighting the anchor's own padding box. Desktop (#mainmenu) only --
   #mainmenu-mobile already gets its own padding-top/bottom:10px on
   a.menu-item from the shared mobile CSS, so applying this same 25px/
   7px on top of that (rather than instead of it) made mobile rows far
   thicker than desktop's. */
#mainmenu > li {
	padding: 25px;
	padding-right: 0;
}

#mainmenu > li > a {
	padding: 7px;
}

/* Move the has-child dropdown caret from the <li> into the <a>'s inner
   .nav-link-wrap div, so the label and caret live in the same box as
   each other (and as any border/background later added to the wrap),
   instead of the caret sitting outside the <a> on the <li> itself. */
:is(#mainmenu, #mainmenu-mobile) > li.has-child:after {
	display: none;
}

/* On mobile, the far-right caret is the SITE-WIDE standard one (same as
   every other locale): designesia.js's menu_arrow() inserts a real
   <span></span> after every <a> with a sibling <ul>, and a shared
   mobile-only rule (styles.css, header.header-mobile ... > li>span:before)
   gives it a \f107 caret at the row's right edge -- this is also the
   actual tap target that expands/collapses the submenu, so it must stay
   as-is (both visually and functionally). The extra caret to remove is
   the JP-only one below (.nav-link-wrap:after, right next to the label
   text) -- keep it on desktop (that's the intended relocation this
   comment block describes), but suppress it on mobile so mobile matches
   the site-wide single-caret look. */
#mainmenu-mobile > li > a > .nav-link-wrap:after {
	display: none;
}

:is(#mainmenu, #mainmenu-mobile) > li > a > .nav-link-wrap:after {
	font-family: FontAwesome;
	content: "\f078";
	padding-left: 5px;
	font-size: 8px;
	position: relative;
	top: -2px;
}

/* 契約更新 (renewal) nav item only, desktop nav only. Selector boosted
   to beat the specificity of the general
   ":is(#mainmenu, #mainmenu-mobile) > li > a" padding rule above, so
   this item's own padding isn't overridden by it. On mobile, the pill/
   gradient look breaks the uniform full-width list row layout, so it's
   intentionally NOT applied to #mainmenu-mobile (see reset below). */
#mainmenu > li > a.menu-item-renewal {
	border: 3px solid transparent;
	border-radius: 999px;
	padding: 3px 15px;
	background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #D71920, #DD6BA0, #C4B5E0);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

/* Mobile: keep 契約更新 visually uniform with the other list rows --
   no pill border/gradient, and no extra padding either. */
#mainmenu-mobile > li > a.menu-item-renewal {
	border: none;
	border-radius: 0;
	background-image: none;
	padding: 0;
}

/* Fix: the site's mega dropdown is `position: fixed` with no explicit
   `top`, so it falls back to its "static position" -- which depends on
   the trigger <a>'s own rendered height. Moving nav padding from the
   <a> onto the <li> (above) shrank that height, which shifted the
   dropdown's implicit anchor point upward, causing it to overlap the
   logo. `position: fixed` is kept (its left/width already correctly
   span the full viewport regardless of ancestors -- position:absolute
   was tried here first, but its left/width resolve against the
   trigger <li>'s own narrow containing block instead of the viewport,
   which clips the panel). Only `top` needed fixing: it's set from
   --jp-header-h, a CSS variable the script below measures from the
   real header height, so it tracks any future padding change instead
   of relying on a guessed pixel value. */
#mainmenu > li > ul.mega {
	top: var(--jp-header-h, 90px);
}

/* In-page anchor targets (e.g. the "PC・Mac・スマートフォン・タブレット" ->
   #section-system-requirements link on VBTS/VBTSP) land right at the
   element's top edge, which sits underneath the sticky header since the
   header overlaps page content rather than pushing it down. Reuse the same
   --jp-header-h variable as the mega-menu fix above (plus a little breathing
   room) so a jump-to lands with the target heading actually visible. */
#section-system-requirements,
#section-pricing {
	scroll-margin-top: calc(var(--jp-header-h, 90px) + 40px);
}

/* Region/language switcher list (globe icon) in the header side area. */
#mainmenu-region {
	padding-left: 0;
}

/* virus-buster-total-security-standard.asp hero background only -- do not
   confuse with the shared .hero-trendlife-curve class used sitewide. */
.hero-jp-lifestyle {
	background-image: url(https://content.trendlife.com/teams/shop/hero-banner/1920x575-Japanese-Lifestyle-Banner-Original-2x.webp);
}

/* virus-buster-total-security-premium.asp hero background only. */
.hero-jp-lifestyle-trend-red {
	background-image: url(https://content.trendlife.com/teams/shop/hero-banner/1920x575-Japanese-Lifestyle-Banner-Trend-Red-2x.webp);
}

/* virus-buster-for-mac.asp hero background only. */
.hero-jp-lifestyle-sky {
	background-image: url(https://content.trendlife.com/teams/shop/hero-banner/1920x575-Japanese-Lifestyle-Banner-Sky-Mac.webp);
}

/* managed-install-upgrade.asp hero background only. */
.hero-jp-lifestyle-sky-install-upgrade {
	background-image: url(https://content.trendlife.com/teams/shop/hero-banner/1920x575-Japanese-Lifestyle-Banner-Sky-INSTALL-AND-UPGRADE-2x.webp);
}

/* virus-buster-cloud.asp hero background only. */
.hero-jp-lifestyle-lilac-vb-cloud {
	background-image: url(https://content.trendlife.com/teams/shop/hero-banner/1920x575-Japanese-Lifestyle-Banner-Lilac-VB-Cloud-2x.webp);
}

/* virus-buster-cloud-digital-life-support-premium.asp hero background only. */
.hero-jp-lifestyle-lilac-vb-cloud-life-support {
	background-image: url(https://content.trendlife.com/teams/shop/hero-banner/1920x575-Japanese-Lifestyle-Banner-Lilac-VB-Cloud-Life-support-2x.webp);
}

/* virus-buster-mobile.asp hero background only. */
.hero-jp-lifestyle-teal {
	background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Teal-Mobile.webp);
}

/* Remove the shared .hero-banner{background-position:center} for these
   lifestyle-photo classes only -- does not affect .hero-trendlife-curve or
   any other .hero-banner usage sitewide. */
.hero-jp-lifestyle,
.hero-jp-lifestyle-trend-red,
.hero-jp-lifestyle-sky,
.hero-jp-lifestyle-sky-install-upgrade,
.hero-jp-lifestyle-lilac-vb-cloud,
.hero-jp-lifestyle-lilac-vb-cloud-life-support,
.hero-jp-lifestyle-teal {
	background-position: unset !important;
}

/* Mobile: swap each variant's background-image to its portrait-cropped
   Mobile-* asset, matching the precedent set by .hero-banner.hero-red /
   .hero-banner.hero-pps in styles.css. Without this, the section keeps
   showing the landscape desktop photo behind the separate mobile <img>,
   which shows a different (correctly-cropped) photo -- two images at once. */
@media (max-width: 992px) {
	.hero-jp-lifestyle {
		background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Mobile-Original-2x.webp) !important;
	}
	.hero-jp-lifestyle-trend-red {
		background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Mobile-Trend-Red-2x.webp) !important;
	}
	.hero-jp-lifestyle-sky {
		background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Mobile-Sky-2x.webp) !important;
	}
	.hero-jp-lifestyle-sky-install-upgrade {
		background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Mobile-Sky-2x.webp) !important;
	}
	.hero-jp-lifestyle-lilac-vb-cloud {
		background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Mobile-Lilac-2x.webp) !important;
	}
	.hero-jp-lifestyle-lilac-vb-cloud-life-support {
		background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Mobile-Lilac-2x.webp) !important;
	}
	.hero-jp-lifestyle-teal {
		background-image: url(https://content.trendlife.com/teams/shop/hero-banner/360x640-Japanese-Lifestyle-Banner-Mobile-Teal-2x.webp) !important;
	}
}

/* virus-buster-total-security-standard.asp "why needed" list only. The base
   .ul-style-2 checkmark is position:absolute;left:0, so plain text-align:center
   would center the text while leaving the checkmark stranded at the container's
   left edge. Shrink each li to its own content width (inline-block) and center
   that block instead -- this keeps the checkmark next to the text without
   turning the li into a flex row, which broke normal text wrapping around the
   inline "system requirements" link inside the paragraph. */
.ul-style-2-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ul-style-2-centered li {
	display: inline-block;
	padding-left: 32px;
}

.ul-style-2-centered li:before {
	position: absolute;
	left: 0;
	margin-right: 0;
}

/* virus-buster-cloud-digital-life-support-premium.asp "デジタルライフサポート
   プレミアムとは" list only. list-style-position:inside centers each line
   independently, which looks ragged when lines wrap or differ in length.
   Use the same flex-row-per-item approach as .ul-style-2-centered instead:
   hide the native bullet, add a manual one, and center each item as a
   single unit so bullet+text move together and align as one block. */
.ul-style-1-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	list-style: none;
	padding-left: 0;
}

.ul-style-1-centered li {
	display: inline-flex;
	align-items: flex-start;
	padding-left: 0;
	margin-left: 0;
}

.ul-style-1-centered li:before {
	content: "•";
	margin-right: 12px;
	flex-shrink: 0;
}

/* product-comparison.asp hero only. With only a single heading line left
   (no subtext/button), the section has no explicit height and collapses to
   a short auto height, cropping the family photo tightly. clamp() scales
   the height fluidly with the viewport instead of jumping abruptly at a
   fixed breakpoint: never shorter than 280px, never taller than 500px,
   45% of viewport height in between. Overrides the shared
   .hero-carousel-item .row min-height:360px mobile rule too (removed here
   since that fixed value no longer applies once this hero's height is
   fluid at every size, not just below 760px). */
.hero-compact-mobile {
	min-height: clamp(280px, 45vh, 500px);
}
.hero-compact-mobile .row {
	min-height: unset !important;
	height: 100%;
	align-items: center;
}
.hero-compact-mobile .container,
.hero-compact-mobile .col-lg-6 {
	height: 100%;
}

/* The actual photo here comes from the <img> (object-fit:cover), not a CSS
   background-image, so background-position on .hero-carousel-item has no
   effect -- object-position is the equivalent lever. The family sits in the
   lower portion of the source photo (their heads were nearly cut off at the
   bottom under plain center-cropping on narrow screens), so bias toward the
   bottom on mobile to keep them fully in frame; desktop keeps the default
   center-center crop, which already looks correct there. */
@media (max-width: 760px) {
	.hero-compact-mobile img {
		object-position: center bottom;
	}
}

/* Comparison table price (sitewide, all pages using product-comparison-options*.asp).
   The price is 34px font (.de_pricing-table .rrp) inside a <p class="lh20">,
   which forces line-height:20px !important. That's fine while the JP price
   string ("¥6,490（税込）") fits on one line, but on narrow/mobile columns it
   wraps to 2 lines and the 20px line-height is shorter than the 34px glyphs,
   so the wrapped lines overlap. Give this specific price line enough room
   to wrap cleanly on narrow screens without touching the shared .lh20
   utility used elsewhere for genuinely single-line compact text. */
@media (max-width: 760px) {
	.de_pricing-table .d-price p.lh20 {
		line-height: 1.2 !important;
	}
	/* The 34px base price font-size (.de_pricing-table .rrp) is sized for
	   desktop's wider card columns. On mobile's narrow 3-column comparison
	   grid it barely fits the JP price string on one line, causing awkward
	   wraps. Scale it down so it fits more comfortably. */
	.de_pricing-table .rrp {
		font-size: 24px;
	}
	.de_pricing-table .rrp span {
		font-size: 15px;
	}
}

/* "（税込）" tax-included note next to prices sitewide (GetPriceRRP/GetPrice/
   GetPriceSave/GetAROffPrice in functionlibrary.asp). A bare <small> relies
   on the browser/Bootstrap default (~80% or less), which reads as too small
   next to the large price digits -- this keeps it just modestly smaller. */
.tax-note {
	font-size: 0.6em;
}

/* Hero price card only (#section-hero .d-price, per the shared styles.css
   scoping convention -- not .de_pricing-table .d-price, already handled
   separately). On narrow mobile widths "7,480円（税込）" wraps to 2 lines,
   and .hero-rrp's 36px font clipped against the 20px line-height meant for
   a single line. Same fix as the comparison-table price wrap earlier. */
@media (max-width: 760px) {
	#section-hero .d-price .hero-rrp.lh20 {
		line-height: 1.2 !important;
	}
}

/* GetPriceRRP/GetPriceSave (functionlibrary.asp) now always return "&nbsp;"
   sitewide for compliance reasons, but their wrapping <p class="lh10 mb0">/
   <p class="lh15"> still took up its min-height + margin, leaving a blank
   gap before the price and before the renewal note below it. Both the hero
   (#Hero_RRP/#Hero_PCT) and the comparison table (dynamic "{SKU}_RRP"/
   "{SKU}_PCT" ids, one per plan column) render this same pattern, so match
   by id suffix instead of a fixed id/class -- catches every instance. */
.d-price p:has([id$="_RRP"]),
.d-price p:has([id$="_PCT"]) {
	display: none;
}

/* Every "<div class='spacer-20'></div>" immediately before a .d-price block
   (hero and each comparison-table column alike) was sized to lead into the
   now-hidden RRP line -- collapse it too so the price sits right under the
   device-count select/dropdown above it with no blank gap. */
.spacer-20:has(+ .d-price) {
	display: none;
}

/* Now that the RRP/PCT lines above are hidden, the price and renewal note
   sit right next to each other -- zero out every remaining spacer (the
   .mb10/.mb0 margin-bottom overrides, the browser's un-reset default
   margin-top, and the fixed .lh10/.lh15/.lh20 line-height values) so
   there's no leftover gap between them. Applies to both the hero and the
   comparison table, same reasoning as above. */
.d-price p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: normal;
}

/* GetJPRenewalNote (functionlibrary.asp) now returns a much longer sentence
   than the old one-line "2年目以降 X円（税込）/年で更新" note, wrapping to
   2-3 lines wherever it's rendered (hero card #Hero_REN, and each comparison
   -table column's "{SKU}_REN"). The shared .lh10 util forces
   line-height:10px !important, made for that old single-line text, which
   now crams the wrapped lines on top of each other. Override with !important
   too, so it wins over .lh10's own !important. */
p:has([id$="_REN"]) {
	line-height: 1.4 !important;
	margin-top: 10px !important;
}

/* Comparison table column headers only. Keep main.js's equalizeHeights()
   inline height sync as-is (it's needed to align the columns), just add
   consistent spacing below each header box before the device-count label. */
.d-head.equal-div {
	margin-bottom: 25px;
}