/* BEAUTY TECH INSIGHT — unified white editorial system */
:root{
  --site-ink:#181716;
  --site-muted:#6f6c68;
  --site-line:#e9e7e3;
  --site-soft:#f8f8f6;
  --site-accent:#9a8779;
}

html{overflow-x:hidden}
body{margin:0;background:#fff!important;color:var(--site-ink)!important;overflow-x:hidden}
body,button,input,select,textarea{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif!important}
h1,h2,h3,h4,p,li,a{overflow-wrap:anywhere}
img,video,iframe{max-width:100%;height:auto}

/* The same masthead on every page */
.portal-header{
  position:relative;z-index:60;display:grid!important;
  grid-template-columns:150px minmax(220px,1fr) auto 150px;
  align-items:center;width:100%;height:86px!important;padding:0 clamp(24px,4vw,68px)!important;
  background:rgba(255,255,255,.97)!important;border-bottom:1px solid var(--site-line)!important;
  box-shadow:none!important;box-sizing:border-box;
}
.portal-logo{display:flex;flex-direction:column;align-items:center;justify-self:start;text-decoration:none!important;line-height:1}
.portal-logo span{font-family:"Manrope",sans-serif!important;color:var(--site-accent)!important;font-size:.55rem!important;font-weight:700!important;letter-spacing:.16em!important}
.portal-logo strong{font-family:"Manrope",sans-serif!important;color:var(--site-ink)!important;font-size:1.16rem!important;font-weight:700!important;letter-spacing:.13em!important}
.portal-header .main-nav{position:static!important;display:flex!important;align-items:center;justify-content:center;gap:clamp(20px,2.6vw,44px);padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.portal-header .main-nav a{padding:8px 0!important;color:var(--site-ink)!important;font-size:.78rem!important;font-weight:500!important;text-decoration:none!important;white-space:nowrap}
.portal-header .main-nav a:hover{color:var(--site-accent)!important}
.header-index{justify-self:end;color:var(--site-ink)!important;font-family:"Manrope",sans-serif!important;font-size:.72rem!important;font-weight:700!important;letter-spacing:.12em;text-decoration:none!important;white-space:nowrap}
.header-index span{margin-left:8px;color:var(--site-accent)!important}
.menu-button{display:none!important}

/* Keep the portrait composed around the full face */
.portal-body .cover-visual img{object-position:center top!important}

/* Shared white editorial pages */
.article,.legal,.archive-main{width:min(100% - 40px,1080px)!important;max-width:1080px!important;margin:0 auto!important;padding:clamp(44px,7vw,88px) 0 96px!important;background:#fff!important;box-sizing:border-box}
.article h1,.legal h1,.archive-main h1{font-family:"Noto Sans JP",sans-serif!important;font-weight:600!important;letter-spacing:-.045em!important;line-height:1.35!important;color:var(--site-ink)!important}
.article h2,.legal h2,.archive-main h2{font-family:"Noto Sans JP",sans-serif!important;font-weight:600!important;letter-spacing:-.025em!important;color:var(--site-ink)!important}
.editorial-title,.routine-heading h2,.routine-list b,.method-strip b,
.homepage-ad-copy h3,.feature-copy h3,.visual-story-lineup h3,
.index-intro h2,.editorial-note blockquote,.archive-list h3,
.product-hero h1,.cta-box h2{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif!important;
  font-style:normal!important;
}
.article p,.legal p,.article li,.legal li{color:#4e4b48;line-height:1.95}
.kicker,.portal-kicker,.story-category,.pick-en{font-family:"Manrope",sans-serif!important;color:var(--site-accent)!important;font-style:normal!important;letter-spacing:.14em!important}
.breadcrumb{color:#8a8782!important;font-size:.75rem!important}
.breadcrumb a{color:#696662!important}
.article-box,.article-box.accent,.notice,.finder,.cta-box,.archive-empty,.product-card,.intent-card,.feature-card,.routine-section,.section.tint{background:var(--site-soft)!important;border:1px solid var(--site-line)!important;border-radius:0!important;box-shadow:none!important}
.article-box.accent{border-left:3px solid var(--site-accent)!important}
.button,.hero-primary{background:var(--site-ink)!important;border-color:var(--site-ink)!important;border-radius:0!important;color:#fff!important}
.compare-wrap{max-width:100%;overflow-x:auto;border-color:var(--site-line)!important;border-radius:0!important}
.compare-table th{background:var(--site-soft)!important;color:var(--site-ink)!important}
.compare-table td{background:#fff!important}
.product-hero,.editorial-hero{background:#fff!important;border-color:var(--site-line)!important;border-radius:0!important;box-shadow:none!important}
.source-list,.related{border-color:var(--site-line)!important}

/* One quiet footer across portal and articles */
.footer,.portal-footer{background:#fff!important;color:var(--site-ink)!important;border-top:1px solid var(--site-line)!important}
.footer a,.portal-footer a,.footer .copyright,.portal-footer p{color:#66625e!important}
.footer .brand{font-family:"Manrope","Noto Sans JP",sans-serif!important;color:var(--site-ink)!important}
.footer .brand-mark{display:none!important}

@media(max-width:900px){
  .portal-header{grid-template-columns:48px 1fr 48px;height:74px!important;padding:0 18px!important}
  .portal-logo{grid-column:2;justify-self:center}
  .portal-logo strong{font-size:1.02rem!important}
  .menu-button{grid-column:1;grid-row:1;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:38px;height:38px;padding:0!important;background:transparent!important;border:0!important;color:var(--site-ink)!important}
  .menu-button span{display:block;width:22px;height:1px;background:currentColor;transition:.2s}
  .menu-button[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-button[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .portal-header .main-nav{position:absolute!important;top:74px!important;left:0!important;right:0!important;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding:10px 20px 20px!important;background:#fff!important;border-bottom:1px solid var(--site-line)!important}
  .portal-header .main-nav.is-open{display:flex!important}
  .portal-header .main-nav a{padding:14px 4px!important;border-bottom:1px solid var(--site-line)!important;font-size:.84rem!important}
  .header-index{grid-column:3;grid-row:1;width:38px;font-size:0!important;text-align:center}
  .header-index span{margin:0;font-size:1.15rem!important}
  .article,.legal,.archive-main{width:min(100% - 36px,760px)!important;padding-top:50px!important}
  .portal-body .cover-visual img{object-position:center top!important}
}

@media(max-width:600px){
  .ad-disclosure{padding:7px 12px!important;font-size:.58rem!important;text-align:center;white-space:normal!important}
  .portal-header{height:68px!important;padding-inline:12px!important}
  .portal-header .main-nav{top:68px!important}
  .portal-body .cover-visual img{object-position:57% top!important}
  .article,.legal,.archive-main{width:100%!important;padding:34px 20px 72px!important}
  .article h1,.legal h1,.archive-main h1{font-size:clamp(1.75rem,8.5vw,2.35rem)!important}
  .article h2,.legal h2,.archive-main h2{font-size:1.3rem!important;line-height:1.55!important}
  .article p,.legal p,.article li,.legal li{font-size:.94rem!important;line-height:1.85!important}
  .product-hero{display:block!important;padding:0!important}
  .product-visual{min-height:220px!important;margin-top:24px!important}
  .related{display:grid!important;grid-template-columns:1fr!important}
  .related a{width:100%!important;box-sizing:border-box}
  .mobile-cta{left:0!important;right:0!important;width:100%!important;box-sizing:border-box}
  table{max-width:100%}
}

@media(max-width:370px){
  .article,.legal,.archive-main{padding-inline:16px!important}
  .portal-logo strong{font-size:.92rem!important}
}