:root{
  --soi-ink:#182235;
  --soi-navy:#17253a;
  --soi-red:#ef565b;
  --soi-cream:#f6f2ec;
  --soi-line:#e5e0da;
}

html{scroll-behavior:smooth}
*,*::before,*::after{min-width:0!important}
body{
  color:var(--soi-ink)!important;
  background:#faf9f7!important;
  font-family:"Noto Sans JP",sans-serif!important;
  overflow-wrap:anywhere!important;
  line-break:strict!important;
}
header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  min-height:78px!important;
  padding:.7rem clamp(1rem,4vw,3.2rem)!important;
  background:rgba(255,255,255,.9)!important;
  border-bottom:1px solid rgba(24,34,53,.08)!important;
  box-shadow:0 8px 30px rgba(24,34,53,.05)!important;
  backdrop-filter:blur(18px)!important;
}
.header-inner{width:100%;margin:0 auto!important;padding:0!important}
.logo-wrap img{width:92px!important;height:auto!important}
header nav a{
  color:var(--soi-ink)!important;
  font-size:.75rem!important;
  text-decoration:none!important;
}
header nav a:hover,header nav a[aria-current="page"]{color:var(--soi-red)!important}
.shop-btn,.btn-primary{
  background:var(--soi-red)!important;
  border-color:var(--soi-red)!important;
  color:#fff!important;
  border-radius:999px!important;
  box-shadow:0 10px 24px rgba(239,86,91,.2)!important;
}
.menu-toggle{display:none!important;border-color:#d9d5cf!important;border-radius:12px!important}
.menu-toggle span{background:var(--soi-ink)!important}
.shop-dropdown{border-radius:16px!important;box-shadow:0 18px 50px rgba(23,37,58,.15)!important}

.blog-hero{
  max-width:1180px!important;
  margin:24px auto 0!important;
  padding:clamp(4rem,8vw,7.5rem) clamp(1.5rem,6vw,5rem)!important;
  border:0!important;
  border-radius:30px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 88% 14%,rgba(239,86,91,.28),transparent 28%),
    linear-gradient(135deg,#17253a,#243c5c)!important;
  overflow:hidden!important;
}
.blog-hero::before{border-color:rgba(255,255,255,.1)!important}
.blog-hero-label{
  color:#ff8f91!important;
  font-family:"DM Mono",monospace!important;
  letter-spacing:.18em!important;
}
.blog-hero h1{
  color:#fff!important;
  font-size:clamp(2.3rem,5vw,4.4rem)!important;
  line-height:1.25!important;
  letter-spacing:-.04em!important;
  text-wrap:balance!important;
  word-break:keep-all!important;
}
.blog-hero-desc{color:rgba(255,255,255,.72)!important}
.breadcrumb{
  max-width:1020px!important;
  margin:0 auto!important;
  padding:1.1rem 1.2rem!important;
}
.breadcrumb a{color:var(--soi-red)!important}

.toc{
  max-width:900px!important;
  margin:2rem auto!important;
  padding:1.5rem 1.8rem!important;
  border:1px solid var(--soi-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 10px 32px rgba(23,37,58,.06)!important;
}
.toc-title{color:var(--soi-red)!important}
.toc a:hover{color:var(--soi-red)!important}

.blog-container{
  max-width:900px!important;
  padding:2rem 1rem 5rem!important;
}
.mole-intro-box,.part{
  background:#fff!important;
  border:1px solid var(--soi-line)!important;
  border-radius:24px!important;
  box-shadow:0 14px 42px rgba(23,37,58,.07)!important;
}
.mole-intro-box{padding:clamp(1.5rem,4vw,2.6rem)!important}
.part{padding:clamp(1.3rem,4vw,2.8rem)!important;margin-bottom:2rem!important}
.part-header{border-bottom:1px solid var(--soi-line)!important;padding-bottom:1.2rem!important}
.part-num{color:var(--soi-red)!important;font-family:"DM Mono",monospace!important}
.part-title{color:var(--soi-ink)!important;line-height:1.5!important;text-wrap:balance!important}
.blog-section-title{
  border-left-color:var(--soi-red)!important;
  color:var(--soi-ink)!important;
  font-size:1.12rem!important;
  line-height:1.6!important;
  text-wrap:balance!important;
}
.blog-section p{color:#5f6b78!important;font-size:.9rem!important}
.tip-box,.note-box,.mole-talk{
  border-radius:16px!important;
  border-color:#e8e2dc!important;
}
.tip-box{background:#fff4f2!important}
.note-box{background:#f2f5f8!important}
.mole-talk{background:var(--soi-cream)!important}
.check-list li::before,.tip-box-title{color:var(--soi-red)!important}
.color-card,.compare-card,.font-card,.jp-font-item,.pair-card{
  border-radius:16px!important;
  border-color:var(--soi-line)!important;
  box-shadow:0 8px 24px rgba(23,37,58,.05)!important;
}
.blog-cta{
  color:#fff!important;
  background:linear-gradient(135deg,var(--soi-navy),#263f60)!important;
  border-radius:24px!important;
  box-shadow:0 18px 45px rgba(23,37,58,.18)!important;
}
.blog-cta h3,.blog-cta p{color:#fff!important}
.btn{height:auto!important;min-height:44px!important;border-radius:999px!important;white-space:normal!important;line-height:1.45!important;text-align:center!important;overflow-wrap:anywhere!important}
.btn-group{flex-wrap:wrap!important}
.btn-outline{border-color:#cad0d7!important;color:var(--soi-ink)!important}
.next-article-banner{border-radius:20px!important;overflow:hidden!important}

footer{
  background:#eeeae5!important;
  color:#5e6975!important;
  border-top:0!important;
  padding:2.5rem clamp(1rem,4vw,3rem)!important;
}
footer a{color:var(--soi-ink)!important}
.footer-logo img{width:90px!important}

.mobile-menu{background:rgba(255,255,255,.98)!important}
.mobile-menu a:hover{background:#fff2f1!important;color:var(--soi-red)!important}

@media(max-width:1000px){
  .blog-hero{margin:12px 10px 0!important;border-radius:22px!important;padding:4.8rem 1.25rem 2.8rem!important}
  .blog-container{padding:1rem .75rem 3rem!important}
  .part{border-radius:18px!important;padding:1.25rem!important}
  .toc{margin:1rem .75rem!important}
}

@media(max-width:760px){
  header{min-height:68px!important;padding:.65rem 1rem!important}
  .header-inner{justify-content:space-between!important}
  .logo-wrap{gap:.55rem!important}
  .logo-wrap img{width:76px!important}
  .logo-wrap h3{font-size:.68rem!important}
  .header-nav,.shop-dropdown{display:none!important}
  .header-right{margin-left:auto!important}
  .menu-toggle{display:flex!important;width:40px!important;height:40px!important}
  .blog-hero h1{font-size:clamp(1.65rem,8vw,2.25rem)!important;line-height:1.4!important}
  .blog-hero-desc{font-size:.84rem!important;line-height:1.8!important}
  .part-header{align-items:flex-start!important}
  .part-title{font-size:1.05rem!important}
}