/* Refined white editorial system — 2026-09 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root{
  --v9-ink:#171717;
  --v9-muted:#656565;
  --v9-soft:#f6f6f4;
  --v9-line:#e7e7e3;
  --v9-accent:#8c7e73;
}

html{font-size:16px}
body,button,input,select,textarea,
.portal-body,.article-body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif!important;
  color:var(--v9-ink);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
}
.portal-logo span,.portal-logo strong,.footer-brand span,.footer-brand strong,
.cover-label,.section-head h2,.commercial-heading h2,.market-heading h2,
.story-category,.pick-en,.market-card>p,.note-label{
  font-family:"Manrope","Noto Sans JP",sans-serif!important;
  font-style:normal!important;
}
.portal-logo strong,.footer-brand strong{font-weight:600!important;letter-spacing:.11em!important}

/* Header */
.portal-body{background:#fff}
.ad-disclosure{background:#171717!important;color:#f3f3f3!important;font-size:.6875rem!important;letter-spacing:.08em}
.portal-header{height:86px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--v9-line)!important;box-shadow:none!important}
.portal-header .main-nav a,.header-index{color:var(--v9-ink)!important;font-size:.8125rem!important;font-weight:500!important}
.portal-logo span{color:var(--v9-accent)!important}
.header-index span{color:var(--v9-accent)!important}

/* First view: white space, image and typography do the work */
.portal-body .cover{
  display:grid!important;
  grid-template-columns:minmax(430px,46%) minmax(0,54%)!important;
  grid-template-rows:1fr!important;
  height:min(700px,calc(100vh - 116px))!important;
  min-height:610px!important;
  overflow:hidden!important;
  background:#fff!important;
  border-bottom:1px solid var(--v9-line);
}
.portal-body .cover-visual{
  grid-column:1 / -1!important;
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  overflow:hidden;
  background:var(--v9-soft);
}
.portal-body .cover-visual:after{display:none!important;background:none!important}
.portal-body .cover-visual img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 50%!important;
  filter:none!important;
}
.portal-body .cover-copy{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  z-index:3;
  width:100%!important;
  max-width:none!important;
  padding:clamp(70px,8vh,110px) clamp(42px,5.6vw,96px) 150px!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:transparent!important;
}
.portal-body .cover-label{
  display:flex!important;
  align-items:center;
  gap:12px!important;
  margin:0 0 26px!important;
  color:var(--v9-accent)!important;
  font-size:.6875rem!important;
  font-weight:600!important;
  letter-spacing:.14em!important;
  line-height:1.5;
}
.portal-body .cover-label:before{content:""!important;display:block!important;width:28px!important;height:1px;background:var(--v9-accent)!important}
.portal-body .cover h1{
  max-width:610px!important;
  margin:0!important;
  font-size:clamp(3rem,4.55vw,4.75rem)!important;
  line-height:1.2!important;
  letter-spacing:-.055em!important;
  font-weight:500!important;
}
.portal-body .cover h1>span{
  display:block!important;
  margin:0!important;
  color:var(--v9-ink)!important;
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif!important;
  font-size:1em!important;
  font-weight:500!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  white-space:nowrap!important;
}
.portal-body .cover h1>span:last-child{color:var(--v9-ink)!important}
.portal-body .cover-lead{
  max-width:510px!important;
  margin:27px 0 0!important;
  color:var(--v9-muted)!important;
  font-size:1rem!important;
  line-height:1.9!important;
  letter-spacing:.01em;
}
.portal-body .cover-actions{display:flex!important;align-items:center!important;gap:26px!important;margin-top:30px!important}
.portal-body .hero-primary{
  min-width:200px!important;
  padding:15px 24px!important;
  border:1px solid var(--v9-ink)!important;
  border-radius:0!important;
  background:var(--v9-ink)!important;
  color:#fff!important;
  font-size:.8125rem!important;
  font-weight:600!important;
}
.portal-body .hero-secondary{
  padding:12px 0!important;
  border-bottom:1px solid #999!important;
  border-radius:0!important;
  color:var(--v9-ink)!important;
  font-size:.75rem!important;
  font-weight:500!important;
}
.portal-body .hero-secondary span{color:var(--v9-accent)!important}
.portal-body .cover-topics{
  left:clamp(42px,5.6vw,96px)!important;
  right:auto!important;
  bottom:26px!important;
  width:auto!important;
  max-width:calc(100% - 450px)!important;
  background:#fff!important;
  border:1px solid var(--v9-line)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow-x:auto;
}
.portal-body .cover-topics span,.portal-body .cover-topics a{padding:13px 15px!important;font-size:.6875rem!important}
.portal-body .cover-topics span{background:var(--v9-ink)!important;color:#fff!important}
.portal-body .cover-topics a{color:#424242!important;border-color:var(--v9-line)!important}
.portal-body .cover-note{color:#777!important}

/* Visible ad, treated like an editorial card instead of a pink/dark block */
.cover .hero-pr-card{
  right:28px!important;
  bottom:28px!important;
  grid-template-columns:minmax(160px,1fr) 94px!important;
  width:310px!important;
  padding:11px 11px 11px 17px!important;
  gap:13px!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--v9-ink)!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:0!important;
  box-shadow:0 12px 35px rgba(30,30,30,.1)!important;
  backdrop-filter:blur(12px)!important;
}
.hero-pr-card span{color:var(--v9-accent)!important;font-family:"Manrope",sans-serif!important}
.hero-pr-card strong{font-size:.8125rem!important;font-weight:500!important}
.hero-pr-card a{color:var(--v9-ink)!important;border-bottom:1px solid #aaa;padding-bottom:2px}
.hero-pr-card>[data-official-ad],.hero-pr-card .affiliate-ad-slot{border-radius:0!important}

/* Let colorful sponsor creatives stand out against neutral editorial surfaces */
.sponsor-market-first{background:#fff!important;border-bottom:1px solid var(--v9-line)}
.sponsor-market-first .market-heading>div>p,.market-card>p,.story-category,.pick-en{color:var(--v9-accent)!important}
.sponsor-market-first .market-card{border-color:var(--v9-line)!important;box-shadow:none!important;border-radius:0!important}
.sponsor-market-first .market-card [data-official-ad]{background:var(--v9-soft)!important;border-radius:0!important}
.commercial-section{background:var(--v9-soft)!important}
.device-pick-lead{background:#fff!important}
.headline-strip{background:#171717!important}

@media(max-width:900px){
  .portal-body .cover{grid-template-columns:44% 56%!important;height:640px!important;min-height:0!important}
  .portal-body .cover-visual{grid-column:1 / -1!important}
  .portal-body .cover-copy{padding:58px 28px 138px!important}
  .portal-body .cover h1{font-size:clamp(2.45rem,5.8vw,3.5rem)!important}
  .portal-body .cover-lead{font-size:.9375rem!important}
  .portal-body .cover-topics{left:28px!important;max-width:calc(100% - 390px)!important}
  .cover .hero-pr-card{right:18px!important;bottom:18px!important}
}

@media(max-width:600px){
  .portal-header{height:70px!important}
  .portal-body .cover{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:252px auto auto auto!important;
    height:auto!important;
    min-height:0!important;
    background:#fff!important;
  }
  .portal-body .cover-visual{
    grid-column:1!important;grid-row:1!important;
    width:100%!important;height:252px!important;
  }
  .portal-body .cover-visual:after{background:linear-gradient(0deg,rgba(255,255,255,.18),transparent 35%)!important}
  .portal-body .cover-visual img{object-position:57% 38%!important}
  .portal-body .cover-copy{
    grid-column:1!important;grid-row:2!important;
    padding:28px 20px 25px!important;
    background:#fff!important;
  }
  .portal-body .cover-label{margin-bottom:15px!important;font-size:.625rem!important;letter-spacing:.11em!important}
  .portal-body .cover h1{font-size:clamp(2rem,9vw,2.45rem)!important;line-height:1.22!important;letter-spacing:-.05em!important}
  .portal-body .cover h1>span{display:block!important;white-space:normal!important}
  .portal-body .cover-lead{margin-top:15px!important;font-size:.875rem!important;line-height:1.75!important}
  .portal-body .cover-actions{display:grid!important;grid-template-columns:1fr auto!important;gap:15px!important;margin-top:21px!important}
  .portal-body .hero-primary{min-width:0!important;padding:13px 15px!important;font-size:.75rem!important}
  .portal-body .hero-secondary{padding:11px 0!important;font-size:.6875rem!important}
  .cover .hero-pr-card{
    grid-column:1!important;grid-row:3!important;
    position:relative!important;inset:auto!important;
    width:auto!important;margin:0 20px 20px!important;
    grid-template-columns:minmax(0,1fr) 88px!important;
    background:#fff!important;border:1px solid var(--v9-line)!important;
    box-shadow:none!important;
  }
  .hero-pr-card>[data-official-ad]{width:88px!important;height:88px!important}
  .hero-pr-card img:not([width="1"]){width:88px!important;height:88px!important}
  .portal-body .cover-topics{
    grid-column:1!important;grid-row:4!important;
    position:relative!important;inset:auto!important;
    width:100%!important;max-width:none!important;
    border-left:0!important;border-right:0!important;
  }
  .portal-body .cover-note{display:none!important}
  .sponsor-market-first{padding-top:34px!important}
  .sponsor-market-first .market-heading h2{font-size:1.5rem!important}
  .sponsor-market-first .market-heading>p{font-size:.8125rem!important}
  .sponsor-market-first .market-card{border-radius:0!important;box-shadow:none!important}
  .section-head h2,.commercial-heading h2,.market-heading h2{font-size:2rem!important;letter-spacing:-.04em!important}
  .feature-copy h3,.visual-story-lineup h3,.index-intro h2,.editorial-note blockquote{font-family:"Noto Sans JP",sans-serif!important}
}

@media(max-width:360px){
  .portal-body .cover{grid-template-rows:224px auto auto auto!important}
  .portal-body .cover-visual{height:224px!important}
  .portal-body .cover-copy{padding-inline:16px!important}
  .portal-body .cover h1{font-size:1.85rem!important}
  .portal-body .cover-lead{font-size:.8125rem!important}
  .cover .hero-pr-card{margin-inline:16px!important}
}