/* ── Nova design tokens (mirrored from Nova globals.css @theme) ── */
:root {
  --color-customBlue: #121A42;
  --color-customLightblue: #192356;
  --color-customRed: #EC1C24;
  --color-customLightGray: #F5F7FA;
  --color-customFontGray: #6A7092;
  --color-customGray: #F0F2F6;
  --color-customResearch: #788CDD;
  --color-customStaff: #F66F74;
  --color-imgPlaceholder: #E3E9FB;
  --color-border: #E5E7EB;
  --background: #ffffff;
  --foreground: #121A42;
  --container: 1240px;
  --header-h: 120px;
}

@font-face { font-family:'Pretendard JP'; font-weight:400; font-display:swap;
  src: local('Pretendard JP Regular'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Regular.woff2') format('woff2'); }
@font-face { font-family:'Pretendard JP'; font-weight:600; font-display:swap;
  src: local('Pretendard JP SemiBold'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Pretendard JP'; font-weight:700; font-display:swap;
  src: local('Pretendard JP Bold'), url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Bold.woff2') format('woff2'); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Pretendard JP', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0; }

.nova-container { max-width: var(--container); width: 100%; margin: 0 auto; padding: 0 20px; }
@media (min-width:1280px){ .nova-container{ padding: 0; } }

/* Front page: Nova sections are full-bleed bands, so strip Avada's <main>
   gutters/padding. Avada sets these globally (30px sides, 80px top). */
#main.nova-main--full {
  padding: 0 !important;
  max-width: none;
  background: transparent;
}

/* ── Header (Nova fixed two-row) ── */
.nova-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(245,247,250,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border); padding-top: 20px;
}
.nova-header__top { display:flex; align-items:center; justify-content:space-between; }
.nova-logo img { height:32px; width:auto; display:block; }
@media (max-width:767px){ .nova-logo img { height:28px; } }
.nova-utility { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nova-utility a { font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--color-customBlue); padding:6px 12px; font-weight:600; }
.nova-utility a:hover { color:var(--color-customRed); }
.nova-header__bottom { display:flex; align-items:center; justify-content:space-between; margin-top:32px; padding-bottom:12px; }
.nova-nav { display:flex; gap:36px; list-style:none; margin:0; padding:0; }
.nova-nav a { font-weight:700; color:var(--color-customBlue); font-size:15px; }
.nova-nav a:hover,
.nova-nav .current-menu-item > a { color:var(--color-customRed); }

/* The JP main menu has real submenus (調査 → 14 research areas, 企業情報 → 4),
   so the nav needs a hover dropdown — China's flat menu did not. */
.nova-nav > li, .nova-utility > li { position:relative; }
.nova-nav .sub-menu,
.nova-utility .sub-menu {
  position:absolute; top:100%; left:-16px; min-width:230px; z-index:60;
  list-style:none; margin:0; padding:10px 0;
  background:#fff; border:1px solid var(--color-border); border-radius:10px;
  box-shadow:0 12px 28px rgba(18,26,66,.12);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s ease;
}
.nova-nav > li:hover > .sub-menu,
.nova-nav > li:focus-within > .sub-menu,
.nova-utility > li:hover > .sub-menu,
.nova-utility > li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nova-nav .sub-menu a { display:block; padding:9px 18px; font-weight:500; font-size:14px; white-space:nowrap; }
/* Language switcher dropdown is narrow and right-aligned to the JPN label. */
.nova-utility .sub-menu { min-width:120px; left:auto; right:0; padding:6px 0; }
.nova-utility .sub-menu a { display:block; padding:7px 14px; font-weight:600; }

/* Drawer: submenus stay expanded (no hover on touch), just indented. */
.nova-drawer__list .sub-menu { list-style:none; margin:0; padding:0 0 0 14px; }
.nova-drawer__list .sub-menu a { font-weight:500; font-size:14.5px; padding:11px 0; }
.nova-icons { display:flex; gap:22px; }
.nova-icons button { background:none; border:0; color:var(--color-customBlue); padding:0; display:flex; }
.nova-icons button:hover { color:var(--color-customRed); }
.nova-hamburger { display:none; background:none; border:0; color:var(--color-customBlue); }
.nova-body-offset { margin-top: var(--header-h); }

/* Mobile drawer */
.nova-drawer__backdrop { position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:59; opacity:0; pointer-events:none; transition:.3s; }
.nova-drawer__backdrop.is-open { opacity:1; pointer-events:auto; }
.nova-drawer { position:fixed; top:0; right:0; width:min(320px,85vw); height:100vh; background:var(--color-customLightGray); z-index:60; transform:translateX(100%); transition:transform .3s ease; padding:88px 24px 24px; overflow-y:auto; }
.nova-drawer.is-open { transform:translateX(0); }
.nova-drawer__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.nova-drawer__list a { display:block; font-weight:700; color:var(--color-customBlue); font-size:17px; padding:14px 0; border-bottom:1px solid var(--color-border); }

@media (max-width:767px){
  :root{ --header-h: 72px; }
  .nova-header { padding-top:14px; }
  .nova-header__bottom { display:none; }
  .nova-utility { display:none; }
  .nova-hamburger { display:flex; }
}

/* ── Section rhythm ── */
.sec { padding: 56px 0; }
.sec--lg { padding: 80px 0; }
.sec--gray { background: var(--color-customLightGray); }
.sec--white { background: #fff; }
.sec-title { color:var(--color-customBlue); font-weight:700; font-size:28px; letter-spacing:-.01em; }
@media (min-width:768px){ .sec-title{ font-size:34px; } .sec{padding:80px 0;} }
/* Wrap allowed because the JP "YouTube チャンネルへ +" pill plus a title does not
   fit a 320px phone on one line. */
.sec-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:32px; gap:16px; }
.readmore { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:12px 24px; font-weight:700; font-size:14px; color:#fff; background:var(--color-customRed); transition:.2s; white-space:nowrap; }
.readmore:hover { filter:brightness(.92); }

/* Tag pills */
.tag { font-size:11px; font-weight:700; color:var(--color-customFontGray); background:var(--color-customGray); padding:3px 10px; border-radius:6px; letter-spacing:.02em; }
.tag--report { background:transparent; color:var(--color-customRed); padding:0; }

/* ── Hero ── */
.hero { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width:768px){ .hero{ grid-template-columns:1fr minmax(0,600px); gap:56px; min-height:400px; } }
.hero__text { display:flex; flex-direction:column; }
.hero__eyebrow { font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--color-customResearch); margin-bottom:16px; }
.hero__title { font-weight:700; color:var(--color-customBlue); font-size:32px; line-height:1.35; letter-spacing:-.02em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
@media (min-width:768px){ .hero__title{ font-size:44px; line-height:1.3; } }
.hero__cta { display:inline-flex; align-items:center; gap:10px; margin-top:28px; border-radius:999px; background:var(--color-customBlue); color:#fff; padding:14px 26px; font-weight:600; transition:.2s; align-self:flex-start; }
.hero__cta:hover { background:var(--color-customLightblue); }
.hero__cta-arrow { display:inline-flex; align-items:center; justify-content:center; }
.hero__dots { display:flex; gap:8px; margin-top:36px; }
.hero__dot { height:8px; width:8px; border-radius:999px; border:0; background:var(--color-border); padding:0; transition:.2s; cursor:pointer; }
.hero__dot.is-active { width:26px; background:var(--color-customRed); }
.hero__media { position:relative; }
/* Match the 16:9 source ratio of China's featured images (Korea used 16:10). */
.hero__img { border-radius:16px; overflow:hidden; background:var(--color-imgPlaceholder); aspect-ratio:16/9; }
.hero__img img { width:100%; height:100%; object-fit:cover; }
/* Off-ratio hero art (e.g. 2199x1765 infographics) would lose ~30% to a 16:9
   crop, so letterbox it on white like the cards do. */
.hero__img--contain { background:#fff; padding:10px; }
.hero__img--contain img { object-fit:contain; }
.hero__img[hidden] { display:none; }

.card__date { color:var(--color-customFontGray); font-size:13px; }

/* ── Card grid (trending / data) ── */
.grid { display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:640px){ .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px){ .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }
.card { border:1px solid var(--color-border); border-radius:12px; background:#fff; overflow:hidden; transition:.2s; display:flex; flex-direction:column; }
.card:hover { box-shadow:0 8px 24px rgba(18,26,66,.08); }
/* China thumbnails cluster around 16:9 (median 1.76; 983x553, 1024x576,
   1095x653 …) and most are charts/infographics whose axis labels sit at the
   edges. Korea's fixed 176px-tall band cropped ~25% off those, so match the
   source ratio instead of a fixed height. */
.card__thumb { aspect-ratio:16/9; background:var(--color-customLightGray); overflow:hidden; }
.card__thumb img { width:100%; height:100%; object-fit:cover; }
/* Off-ratio images are letterboxed instead of cropped, so charts keep their
   logo/caption edges. White field + small inset reads as intentional padding
   rather than a mis-sized image. Crucially it keeps the SAME 16/9 box as
   .card__thumb — an inherited 6:5 override here made these cards ~107px taller
   than their 'cover' siblings and broke row alignment. */
.card__thumb--contain { background:#fff; padding:8px; }
.card__thumb--contain img { width:100%; height:100%; object-fit:contain; }
.card__body { padding:20px; display:flex; flex-direction:column; gap:8px; }
.card__tags { display:flex; gap:8px; font-size:12px; color:var(--color-customFontGray); font-weight:600; }
.card__title { font-weight:700; font-size:18px; color:var(--color-customBlue); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card:hover .card__title { color:var(--color-customRed); }
.card__excerpt { color:var(--color-customFontGray); font-size:14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Listen & Watch / Youtube Channel — same layout as the Korea overlay ── */
.yt { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width:900px){ .yt{ grid-template-columns: 1fr 1fr; gap: 40px; } }
.yt__thumb { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--color-imgPlaceholder); }
.yt__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.yt__feat:hover .yt__thumb img, .yt__item:hover .yt__thumb img { transform: scale(1.05); }
.yt__feat { display: flex; flex-direction: column; gap: 16px; }
.yt__feat-title { font-weight: 700; font-size: 22px; line-height: 1.35; color: var(--color-customBlue);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt__feat:hover .yt__feat-title { color: var(--color-customRed); }
.yt__list { display: flex; flex-direction: column; gap: 20px; justify-content: space-between; }
.yt__item { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; }
.yt__item .yt__thumb { border-radius: 10px; }
.yt__item-title { font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--color-customBlue);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt__item:hover .yt__item-title { color: var(--color-customRed); }
@media (max-width:480px){ .yt__item{ grid-template-columns: 128px 1fr; gap: 12px; } }

/* ── Clients + Testimonials band (mirrors global site) ── */
.cta-band > * + * { margin-top: 56px; }
.sec-title--center { text-align: center; display: block; margin-bottom: 32px; }

/* Shared carousel (driven by initCarousels() in nova.js) */
.carousel { position: relative; padding: 0 22px; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform .5s ease-in-out; }
.carousel__item { flex: 0 0 calc(100% / var(--per-view, 1)); min-width: 0; padding: 0 12px; }
.carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 999px; background: #fff; border: 0; cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  color: var(--color-customBlue); display: flex; align-items: center; justify-content: center; transition: .2s; }
.carousel__nav:hover { color: var(--color-customRed); }
.carousel__nav svg { width: 18px; height: 18px; }
.carousel__nav--prev { left: 0; } .carousel__nav--next { right: 0; }

/* Our Clients — grayscale logos inside a white rounded card */
.clients-carousel { --per-view: 2; }
@media (min-width:640px){ .clients-carousel{ --per-view: 3; } }
@media (min-width:1024px){ .clients-carousel{ --per-view: 5; } }
.clients-carousel .carousel__viewport { background: #fff; border-radius: 16px; padding: 10px 20px; }
@media (min-width:768px){ .clients-carousel .carousel__viewport{ padding: 16px 48px; } }
.clients-carousel .carousel__item { display: flex; align-items: center; justify-content: center; height: 84px; }
.clients-carousel img { max-height: 34px; max-width: 78%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .55; transition: .25s; }
.clients-carousel img:hover { filter: grayscale(0); opacity: 1; }

/* Client Testimonials — white cards with an avatar overlapping the top edge */
.testi-carousel { --per-view: 1; }
@media (min-width:768px){ .testi-carousel{ --per-view: 2; } }
@media (min-width:1024px){ .testi-carousel{ --per-view: 3; } }
.testi-carousel .carousel__viewport { padding-top: 72px; }
.testi-carousel .carousel__item { display: flex; align-items: stretch; }
/* <figure> carries a UA margin of 1em 40px — without the reset the card loses
   80px of width, which on a 390px phone squeezed the quote to ~4 chars a line. */
.tcard { position: relative; width: 100%; margin: 0; background: #fff; border: 0; border-radius: 16px; padding: 96px 32px 44px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 420px; }
.tcard__avatar { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 128px; height: 128px; border-radius: 999px; background: #fff; overflow: hidden;
  box-shadow: 0 8px 24px rgba(18,26,66,.12); display: flex; align-items: center; justify-content: center; }
.tcard__avatar img { max-width: 64%; max-height: 48%; width: auto; height: auto; object-fit: contain; }
.tcard__role { color: var(--color-customFontGray); font-size: 14px; }
.tcard__co { font-weight: 700; font-size: 20px; color: var(--color-customBlue); }
.tcard__text { color: #25304f; font-size: 15px; line-height: 1.75; margin: 0; padding: 0; border: 0; background: none; quotes: none; }
.tcard__text::before, .tcard__text::after { content: none; }

/* ── Newsletter (heading + link button) ── */
.newsletter { max-width:1000px; margin:0 auto; text-align:center; }
.newsletter h2 { color:var(--color-customBlue); font-weight:700; font-size:24px; line-height:1.4; }
@media (min-width:768px){ .newsletter h2{ font-size:28px; } }
.newsletter__btn { display:inline-flex; align-items:center; gap:10px; margin-top:24px; border-radius:999px; background:var(--color-customBlue); color:#fff; padding:16px 36px; font-weight:700; font-size:16px; transition:.2s; }
.newsletter__btn:hover { background:var(--color-customLightblue); }

/* JP-only: the live home subscribes inline via mc4wp (form #829) instead of
   linking out to Mailchimp. Layout mirrors the live JP section: heading is
   left-aligned, and the form sits in a full-width light bar (#F5F7FA, 12px
   radius) with the navy button inside its right edge — not a centered pill. */
.newsletter--jp { max-width:none; text-align:left; }
.newsletter--jp h2 { font-size:20px; line-height:1.5; }
@media (min-width:768px){ .newsletter--jp h2{ font-size:20px; } }

/* The live site's bar is #F5F7FA on a white section. Here the section keeps the
   Nova gray band, so the bar is white instead — same shape and proportions, but
   it stays visible against the band rather than dissolving into it. */
.nova-mc4wp { margin-top:18px; background:#fff; border-radius:12px; padding:10px; }
/* Form #829 nests the email field inside its own <label> and the button inside
   .newsletter-but, so the flex row lives on .newsletter-box — not the <form> —
   and the label must stay displayed or the input collapses to 0px. */
.nova-mc4wp form { margin:0; }
.nova-mc4wp .newsletter-box { display:flex; flex-wrap:nowrap; gap:10px; align-items:center; }
.nova-mc4wp .newsletter-box > label { flex:1 1 auto; min-width:0; margin:0; }
/* The bar itself is the visual field, so the input stays transparent. */
.nova-mc4wp input[type=email] {
  width:100%; box-sizing:border-box; background:none; border:0; border-radius:6px;
  color:var(--color-customBlue); padding:14px 16px; font-size:16px; font-family:inherit; outline:none; }
.nova-mc4wp input[type=email]::placeholder { color:#9EA0A4; }
/* Live site keeps the navy box on the .newsletter-but wrapper — match it there
   and leave the inner <input> unstyled, rather than making the input a pill. */
.nova-mc4wp .newsletter-but {
  flex:0 0 auto; background:var(--color-customLightblue); border-radius:12px;
  padding:0 27px; height:58px; display:flex; align-items:center; transition:.2s; }
.nova-mc4wp .newsletter-but:hover { background:var(--color-customBlue); }
.nova-mc4wp input[type=submit] {
  border:0; background:none; color:#fff; padding:0;
  font-weight:700; font-size:16px; font-family:inherit; cursor:pointer; white-space:nowrap; }
@media (max-width:479px){
  .nova-mc4wp input[type=email] { padding:12px; font-size:15px; }
  .nova-mc4wp .newsletter-but { padding:0 18px; height:50px; }
  .nova-mc4wp input[type=submit] { font-size:14px; }
}
/* The honeypot is already display:none inline by mc4wp — leave it alone. */
.nova-mc4wp .mc4wp-response { margin-top:12px; text-align:center; color:var(--color-customFontGray); font-size:14px; }

/* ── JP-only: データで見る… counters ── */
.statgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px 16px; margin-top:40px; }
@media (min-width:900px){ .statgrid{ grid-template-columns:repeat(4,1fr); } }
.stat { text-align:center; }
.stat__num { color:var(--color-customBlue); font-weight:700; font-size:40px; line-height:1.1; letter-spacing:-.02em; }
@media (min-width:768px){ .stat__num{ font-size:52px; } }
.stat__plus { color:var(--color-customRed); margin-left:2px; }
.stat__label { margin-top:10px; color:var(--color-customFontGray); font-size:14.5px; }

/* ── JP-only: オピニオンリーダー陣 carousel ── */
/* ── JP-only: 調査対象領域 (Coverage) icon carousel ── */
/* Shares the white DATA section, so it needs its own top separation. */
.cov-block { margin-top:64px; }
.cov-carousel { --per-view: 2; }
@media (min-width:640px){ .cov-carousel{ --per-view: 3; } }
@media (min-width:1024px){ .cov-carousel{ --per-view: 5; } }
/* The source PNGs have no alpha — #F0F2F6 (= --color-customGray) is baked in as
   their background, so the tile is painted that same colour and the baked edge
   reads as an intentional card. On this white section the card is also what
   separates the icons from the DATA grid above. */
.cov { display:flex; align-items:center; justify-content:center; height:110px;
  background:var(--color-customGray); border-radius:12px; transition:.25s; }
.cov:hover { box-shadow:0 6px 18px rgba(18,26,66,.10); transform:translateY(-3px); }
/* Live tiles are 120x74 with the label baked into the PNG. */
.cov img { width:120px; height:auto; max-width:100%; }

.leaders-carousel { --per-view: 1; }
@media (min-width:640px){ .leaders-carousel{ --per-view: 2; } }
@media (min-width:1024px){ .leaders-carousel{ --per-view: 3; } }
.leader { display:block; border-radius:16px; overflow:hidden; background:var(--color-imgPlaceholder); }
/* Live portraits are 380x160; keep that ratio so faces are not cropped. */
.leader img { width:100%; aspect-ratio:380/160; object-fit:cover; transition:transform .3s ease; }
.leader:hover img { transform:scale(1.04); }

/* ── Footer (korea Contact form, Nova design system) ── */
.nova-footer { background:var(--color-customBlue); color:#fff; padding:64px 0; }
.nova-footer__grid { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
/* Grid items default to min-width:auto, so the 24px email address (one long
   unbreakable token) widened the single mobile column past its container and
   pushed the whole footer, form included, off the right edge. */
.nova-footer__grid > * { min-width:0; }
@media (min-width:900px){ .nova-footer__grid{ grid-template-columns:1fr 1.1fr; gap:64px; } }
.nova-footer__h { font-size:28px; font-weight:700; margin-bottom:20px; color:#fff; }
.nova-footer__phone { font-size:24px; font-weight:700; margin:0 0 16px; overflow-wrap:anywhere; }
/* The address alone is ~22 chars; at 24px it does not fit a small phone. */
@media (max-width:479px){ .nova-footer__phone { font-size:19px; } }
.nova-footer__msg { color:rgba(255,255,255,.7); font-size:15px; line-height:1.7; margin:0; }
.nova-footer__divider { height:1px; background:rgba(255,255,255,.12); margin:48px 0 24px; }
.nova-footer__bottom { display:flex; flex-direction:column; gap:12px; justify-content:space-between; color:rgba(255,255,255,.5); font-size:14px; }
.nova-footer__bottom a { color:rgba(255,255,255,.5); }
.nova-footer__bottom a:hover { color:#fff; }
@media (min-width:768px){ .nova-footer__bottom{ flex-direction:row; align-items:center; } }

/* Contact form */
.nova-form { display:flex; flex-direction:column; gap:12px; }
.nova-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.nova-form input[type=text], .nova-form input[type=tel], .nova-form input[type=email], .nova-form textarea {
  width:100%; border:0; border-radius:8px; background:rgba(255,255,255,.08); color:#fff;
  padding:14px 16px; font-size:15px; font-family:inherit; outline:none;
}
.nova-form input::placeholder, .nova-form textarea::placeholder { color:rgba(255,255,255,.45); }
.nova-form input:focus, .nova-form textarea:focus { background:rgba(255,255,255,.14); }
.nova-form textarea { resize:vertical; }
.nova-form__agree { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:14px; }
.nova-form__submit { align-self:flex-start; background:var(--color-customRed); color:#fff; border:0; border-radius:999px; padding:14px 40px; font-weight:700; font-size:15px; transition:.2s; }
.nova-form__submit:hover { filter:brightness(.92); }

/* Quform (China footer form #1) restyled to match the Nova form above.
   Quform ships its own light theme, so we neutralise it inside the footer. */
.nova-form--quform .quform-element { margin:0; }
.nova-form--quform .quform-elements > .quform-element,
.nova-form--quform .quform-inner { width:100%; }
.nova-form--quform input[type=text],
.nova-form--quform input[type=tel],
.nova-form--quform input[type=email],
.nova-form--quform textarea {
  width:100%; border:0; border-radius:8px; background:rgba(255,255,255,.08); color:#fff;
  padding:14px 16px; font-size:15px; font-family:inherit; outline:none; box-shadow:none;
}
.nova-form--quform input::placeholder,
.nova-form--quform textarea::placeholder { color:rgba(255,255,255,.45); }
.nova-form--quform input:focus,
.nova-form--quform textarea:focus { background:rgba(255,255,255,.14); }
.nova-form--quform .quform-label,
.nova-form--quform .quform-description,
.nova-form--quform .quform-option-text,
.nova-form--quform a { color:rgba(255,255,255,.7); }
.nova-form--quform a { text-decoration:underline; }
/* The JP privacy-policy field's description is a bare long URL, which cannot
   wrap on its own and scrolls the form on phones. */
.nova-form--quform .quform-description { overflow-wrap:anywhere; }
/* Quform lays rows out with a -10px negative margin cancelled by 10px column
   padding. Our footer column is not a Bootstrap-style row, so that bleed just
   hangs 10px past the container. quform.css sets it with !important, so match
   it. */
.nova-form--quform .quform-element-row { margin-left:0 !important; margin-right:0 !important; }
.nova-form--quform .quform-element-row > .quform-element-column { padding-left:0; padding-right:0; }
.nova-form--quform .quform-button-submit input,
.nova-form--quform button[type=submit],
.nova-form--quform input[type=submit] {
  background:var(--color-customRed); color:#fff; border:0; border-radius:999px;
  padding:14px 40px; font-weight:700; font-size:15px; transition:.2s; cursor:pointer;
  text-shadow:none; box-shadow:none;
}
.nova-form--quform .quform-button-submit input:hover,
.nova-form--quform button[type=submit]:hover,
.nova-form--quform input[type=submit]:hover { filter:brightness(.92); background:var(--color-customRed); }

/* ── Article / static page ── */
.article-layout { display:grid; grid-template-columns:1fr; gap:48px; align-items:start; }
@media (min-width:1000px){ .article-layout{ grid-template-columns:minmax(0,1fr) 320px; gap:64px; } }
.article { min-width:0; }
.article__meta-sep { margin:0 8px; opacity:.5; }

/* Sidebar */
.sidebar { display:flex; flex-direction:column; gap:40px; }
@media (min-width:1000px){ .sidebar{ position:sticky; top:calc(var(--header-h) + 20px); } }
.widget__title { font-size:18px; font-weight:700; color:var(--color-customBlue); padding-bottom:12px; border-bottom:2px solid var(--color-customBlue); margin-bottom:16px; }
.mini { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--color-border); }
.mini:last-child { border-bottom:0; }
.mini__thumb { flex:0 0 auto; width:64px; height:48px; border-radius:6px; overflow:hidden; background:var(--color-imgPlaceholder); }
.mini__thumb img { width:100%; height:100%; object-fit:cover; }
.mini__title { font-size:13px; font-weight:600; line-height:1.4; color:var(--color-customBlue);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mini:hover .mini__title { color:var(--color-customRed); }
.tagcloud { display:flex; flex-wrap:wrap; gap:8px; }
.tagcloud__tag { font-size:12px; color:var(--color-customFontGray); background:var(--color-customLightGray); padding:6px 12px; border-radius:999px; }
.tagcloud__tag:hover { color:var(--color-customRed); }
.breadcrumb { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--color-customFontGray); margin-bottom:24px; }
.breadcrumb a:hover { color:var(--color-customRed); }
.article__tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.article__title { font-weight:700; font-size:32px; line-height:1.3; color:var(--color-customBlue); letter-spacing:-.01em; }
@media (min-width:768px){ .article__title{ font-size:40px; } }
.article__meta { color:var(--color-customFontGray); font-size:14px; margin-top:16px; }
.article__hero { margin:32px 0; border-radius:16px; overflow:hidden; background:var(--color-imgPlaceholder); }
.article__hero img { width:100%; height:auto; }
.article__body { font-size:17px; line-height:1.85; color:#25304f; margin-top:8px; }
.article__body p { margin:0 0 1.25em; }
.article__body img { border-radius:12px; margin:1.5em 0; height:auto; }
.article__body h2 { font-size:26px; font-weight:700; color:var(--color-customBlue); margin:1.6em 0 .6em; }
.article__body h3 { font-size:21px; font-weight:700; color:var(--color-customBlue); margin:1.4em 0 .5em; }
.article__body a { color:var(--color-customRed); text-decoration:underline; }
.article__body ul, .article__body ol { padding-left:1.4em; margin:0 0 1.25em; }
.article__body blockquote { border-left:4px solid var(--color-customResearch); padding:4px 0 4px 20px; margin:1.5em 0; color:var(--color-customFontGray); }
.article__foot { margin-top:48px; padding-top:24px; border-top:1px solid var(--color-border); }

/* ── Pagination ── */
.pagination { display:flex; justify-content:center; gap:8px; margin-top:56px; flex-wrap:wrap; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:8px; background:#fff; border:1px solid var(--color-border); color:var(--color-customBlue); font-weight:600; font-size:14px; }
.pagination .page-numbers.current { background:var(--color-customBlue); color:#fff; border-color:var(--color-customBlue); }
.pagination a.page-numbers:hover { border-color:var(--color-customRed); color:var(--color-customRed); }

/* Footer family-site dropdown */
.nova-familysite__select {
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.2); border-radius:8px;
  padding:8px 34px 8px 14px; font-size:14px; font-family:inherit; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.nova-familysite__select:hover { background-color:rgba(255,255,255,.14); }
.nova-familysite__select option { color:#111; }

/* ── Search overlay (Nova UI) ── */
.nova-search { position:fixed; inset:0; z-index:9998; }
.nova-search[hidden] { display:none; }
.nova-search__panel {
  position:absolute; left:0; right:0; top:var(--header-h);
  background:rgba(245,247,250,.98); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-border);
  padding:48px 20px 56px; text-align:center;
}
.nova-search__close { position:absolute; right:24px; top:24px; background:none; border:0; color:var(--color-customBlue); cursor:pointer; padding:8px; border-radius:999px; display:flex; }
.nova-search__close:hover { background:rgba(18,26,66,.06); }
.nova-search__title { color:var(--color-customBlue); font-weight:700; font-size:26px; margin-bottom:28px; }
@media (min-width:768px){ .nova-search__title{ font-size:36px; } }
.nova-search__form { display:flex; gap:8px; max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:8px; }
.nova-search__input { flex:1; border:0; outline:none; background:transparent; padding:0 16px; font-size:16px; color:#111; }
.nova-search__btn { border:0; background:var(--color-customBlue); color:#fff; border-radius:8px; padding:12px 28px; font-weight:700; font-size:15px; cursor:pointer; transition:.2s; }
.nova-search__btn:hover { background:var(--color-customLightblue); }
.nova-search__chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:900px; margin:24px auto 0; }
.nova-search__chip { background:rgba(18,26,66,.08); color:var(--color-customBlue); padding:8px 16px; border-radius:999px; font-size:14px; transition:.2s; }
.nova-search__chip:hover { background:rgba(18,26,66,.16); }