/* 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}
}


/* Instagram bridge */
.instagram-section {
  width: min(1180px, calc(100% - 48px));
  margin: 92px auto 72px;
  padding: 54px 58px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 56px;
  align-items: center;
  background: #fff;
  border: 1px solid #dedede;
}
.instagram-kicker {
  margin: 0 0 15px;
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  color: #777;
}
.instagram-copy h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 50px);
  line-height: 1.18;
  letter-spacing: -.035em;
}
.instagram-copy > p:not(.instagram-kicker) {
  max-width: 640px;
  margin: 22px 0 28px;
  color: #555;
  line-height: 1.95;
}
.instagram-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #111;
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}
.instagram-button:hover { background: #111; color: #fff; }
.instagram-profile {
  min-height: 220px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid #e4e4e4;
}
.instagram-mark {
  width: 54px;
  height: 54px;
  border: 2px solid #111;
  border-radius: 15px;
  position: relative;
}
.instagram-mark::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #111;
  border-radius: 50%;
  left: 16px;
  top: 16px;
}
.instagram-mark::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #111;
  right: 9px;
  top: 9px;
}
.instagram-profile small {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .15em;
  color: #888;
}
.instagram-profile strong {
  display: block;
  font-size: 22px;
  letter-spacing: -.02em;
}
.instagram-profile p {
  margin: 10px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.7;
}
@media (max-width: 760px) {
  .instagram-section {
    width: min(100% - 28px, 1180px);
    margin: 58px auto 48px;
    padding: 34px 24px;
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .instagram-profile {
    min-height: 0;
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid #e4e4e4;
    gap: 24px;
  }
}