:root{
  --bg:#ffffff;
  --bg-2:#f6f8fb;
  --card:#ffffff;
  --card-2:#f9fbff;
  --text:#111827;
  --muted:#4b5563;
  --stroke:#e6eaf2;
  --stroke-2:#d7deea;
  --navy:#0b3d91;
  --navy-2:#083275;
  --green:#00c300;
  --shadow:0 12px 28px rgba(17,24,39,.08);
  --shadow-lg:0 18px 40px rgba(17,24,39,.10);
  --radius:18px;
  --btn-radius:14px;
  --menu-side-pad:clamp(12px, 2.2vw, 22px);
  --menu-pad-y:2px;
  --menu-item-pad-top:0px;
  --menu-item-pad-bottom:0px;
  --menu-line-thickness:2px;
  --menu-active-thickness:2px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:1rem;
}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(11,61,145,.10), transparent 60%),
    radial-gradient(900px 500px at 95% 2%, rgba(0,195,0,.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  color:var(--text);
  font-family:'Noto Sans JP','Outfit',system-ui,-apple-system,"Meiryo","メイリオ",sans-serif;
  overflow-x:hidden;
}
body{
  padding-bottom:max(3.5rem, env(safe-area-inset-bottom));
}
a{color:var(--navy); text-decoration:none}
a:hover{color:var(--navy-2)}
img{max-width:100%; height:auto; display:block}
p,li,a,h1,h2,h3,div{overflow-wrap:anywhere; word-break:break-word}
button,input{font:inherit}

.background{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  filter:brightness(1.25) contrast(1.02) saturate(1.05);
}

.container{
  width:min(92vw, 1120px);
  margin-inline:auto;
  padding-inline:clamp(16px, 2vw, 24px);
}

.card-lite{
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:.48rem .82rem;
  border:1px solid var(--stroke-2);
  background:#fff;
  color:var(--muted);
  border-radius:999px;
  font-size:.92rem;
  font-weight:700;
}

.hero-kicker,
.section-kicker{
  color:var(--navy);
  font-weight:800;
  letter-spacing:.02em;
  margin:0 0 .4rem 0;
}

.section-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, 420px);
  gap:1.5rem;
  align-items:end;
  margin-bottom:1.5rem;
}

.section-head h2{
  margin:.15rem 0 0 0;
  font-size:clamp(1.7rem, 2.6vw, 2.3rem);
}

.section-copy{
  margin:0;
  color:var(--muted);
  line-height:1.8;
}

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Header */
header.indexheader,
.indexheader{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  position:relative;
  left:0;
  box-sizing:border-box;
}
.indexheader .title{
  width:100%!important;
  margin:0!important;
  padding:12px var(--menu-side-pad) 0 var(--menu-side-pad)!important;
  box-sizing:border-box;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
}
.indexheader .menuunderline{display:none!important}
.indexheader nav.menu{
  width:100%!important;
  margin:0!important;
  height: 60px;
  box-sizing:border-box;
  position:relative!important;
  padding:var(--menu-pad-y) 0!important;
  border:0!important;
  box-shadow:none!important;
}
.indexheader nav.menu::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--menu-line-thickness);
  background:rgba(17,24,39,.14);
  pointer-events:none;
  z-index:1;
}
.indexheader .menulist{
  width:60%;
  max-width:840px!important;
  height: 100%;
  margin:0 auto!important;
  padding:0 var(--menu-side-pad)!important;
  list-style:none!important;
  display:flex!important;
  gap:0!important;
  justify-content:space-between!important;
  align-items:stretch!important;
  position:relative;
  z-index:2;
}
.indexheader .menulist>li{
  flex:1 1 0!important;
  height: 100%;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-end!important;
  text-align:center!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
}
.indexheader .menulist>li a,
.indexheader .menulist>li span{
  display:flex!important;
  width:100%;
  justify-content:center;
  align-items:flex-end;
  padding:var(--menu-item-pad-top) .5rem var(--menu-item-pad-bottom)!important;
  line-height:1!important;
  letter-spacing: -0.025em;
  font-weight: 800;
  font-size: 1.5em;
  font-family: Arial Black, Arial, sans-serif, 'Outfit';
  color: #111827;
  position:relative;
  top:-4px;
  text-decoration:none!important;
  background:transparent!important;
  z-index:3;
}
.indexheader nav.menu .menu-inkbar{
  position:absolute;
  bottom:0;
  height:var(--menu-active-thickness);
  background:rgba(17,24,39,1);
  border-radius:999px;
  left:0;
  width:0;
  pointer-events:none;
  z-index:4;
  transform:translateX(0);
  transition:transform .18s ease, width .18s ease, opacity .12s ease;
  opacity:0;
}

.hero-blog-logo{
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-blog-logo img{
  display: block;
  width: min(100%, 320px);
  height: auto;
}

@media (max-width: 768px){
  .hero-blog-logo{
    margin: 0 0 .9rem;
    justify-content: center;
  }

  .hero-blog-logo img{
    width: min(100%, 260px);
  }
}

@media (min-width: 1024px){
  .hero-blog-logo img{
    width: min(100%, 360px);
  }
}

/* Hero */
.blog-home{
  position:relative;
  z-index:1;
}
.hero{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(280px, .85fr);
  gap:1.5rem;
  padding-top:2.25rem;
  padding-bottom:2rem;
}
.hero h1{
  margin:.2rem 0 .9rem 0;
  font-size:clamp(2rem, 4.2vw, 3.4rem);
  line-height:1.22;
}
.hero-lead{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.9;
  margin:0;
}
.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.2rem;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:1.4rem;
}
.hero-card{
  padding:1.25rem;
}
.hero-card h2{
  margin:.1rem 0 .9rem;
  font-size:1.2rem;
}
.feature-list{
  margin:.2rem 0 1.2rem;
  padding-left:1.2rem;
  color:var(--muted);
  line-height:1.85;
}
.hero-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
}
.stat-box{
  padding:.9rem 1rem;
  background:var(--card-2);
  border:1px solid var(--stroke);
  border-radius:14px;
}
.stat-box strong{
  display:block;
  font-size:1.4rem;
  color:var(--navy);
}
.stat-box span{
  color:var(--muted);
  font-size:.92rem;
}

/* Buttons */
.cta-primary,
.cta-secondary,
.cta-line,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1.15rem;
  border-radius:var(--btn-radius);
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 10px 22px rgba(17,24,39,.08);
  text-decoration:none!important;
  font-weight:700;
  line-height:1.15;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  color:#fff!important;
}
.cta-primary{background:linear-gradient(180deg, rgba(11,61,145,1), rgba(8,50,117,1))}
.cta-secondary{background:linear-gradient(180deg, rgba(55,65,81,.98), rgba(31,41,55,.98))}
.cta-line,
.btn-line{background:linear-gradient(180deg, rgba(0,195,0,1), rgba(0,168,0,1))}
.btn-ghost{background:linear-gradient(180deg, rgba(11,61,145,.96), rgba(8,50,117,.96))}
.cta-primary:hover,.cta-secondary:hover,.cta-line:hover,.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  color:#fff!important;
}

/* Sections */
.featured-posts,
.reader-nav,
.category-grid-section,
.blog-tools,
.all-posts,
.seminar-cta,
.popup-wrap{
  padding-top:1.35rem;
  padding-bottom:1.35rem;
}
.featured-grid,
.reader-grid,
.category-grid,
.posts-grid{
  display:grid;
  gap:1rem;
}
.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.reader-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.posts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.post-card,
.reader-card,
.category-card{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.post-card{
  padding:1.15rem;
}
.post-category{
  display:inline-flex;
  padding:.38rem .68rem;
  border-radius:999px;
  background:rgba(11,61,145,.08);
  color:var(--navy);
  font-size:.82rem;
  font-weight:800;
  margin-bottom:.8rem;
}
.post-card h3{
  margin:0 0 .7rem 0;
  font-size:1.08rem;
  line-height:1.55;
}
.post-copy{
  color:var(--muted);
  margin:0 0 1rem 0;
  line-height:1.8;
  font-size:.95rem;
}
.post-link{
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.reader-card,
.category-card{
  text-align:left;
  padding:1.1rem;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.reader-card:hover,
.category-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--stroke-2);
}
.reader-label,
.category-meta{
  display:inline-flex;
  color:var(--navy);
  font-size:.85rem;
  font-weight:800;
  margin-bottom:.5rem;
}
.reader-card strong,
.category-name{
  display:block;
  font-size:1.08rem;
  margin-bottom:.55rem;
}
.reader-desc,
.category-card p{
  color:var(--muted);
  margin:0;
  line-height:1.75;
  font-size:.94rem;
}

/* Search tools */
.tool-panel{ padding:1rem; }
.tool-search{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.95rem 1rem;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:#fff;
}
.tool-search i{color:var(--muted)}
.tool-search input{
  border:none;
  outline:none;
  width:100%;
  background:transparent;
}
.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1rem;
}
.filter-chip{
  border:1px solid var(--stroke-2);
  background:#fff;
  color:var(--muted);
  padding:.55rem .85rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.filter-chip.is-active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.tool-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
  color:var(--muted);
}
.text-button{
  border:none;
  background:none;
  color:var(--navy);
  font-weight:800;
  cursor:pointer;
}
.search-note{
  margin:.85rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}

/* All posts + search result excerpt */
.article-card{
  padding:1.05rem;
}
.article-card h3{
  margin:.1rem 0 .65rem;
  font-size:1.02rem;
  line-height:1.55;
}
.article-card .article-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.7rem;
  margin-top:.95rem;
}
.article-card .article-index{
  color:var(--muted);
  font-size:.88rem;
}
.search-excerpt{
  margin-top:.7rem;
  padding:.85rem .95rem;
  background:#f8fbff;
  border:1px solid var(--stroke);
  border-radius:14px;
  color:var(--text);
  line-height:1.8;
  font-size:.93rem;
}
mark{
  background:#fff2a8;
  color:inherit;
  padding:0 .1em;
}
.empty-state{
  padding:1.2rem;
  margin-top:1rem;
}
.hidden{display:none!important;}

/* CTA band */
.cta-band{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:1.2rem;
  padding:1.35rem;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,251,.98));
  border:1px solid var(--stroke);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.cta-band h2{ margin:.15rem 0 .7rem 0; }
.cta-band-actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.85rem;
}

/* Popup */
.popup{ position:relative; max-width:820px; margin:0 auto; }
.popup-content{
  position:relative;
  padding:1.25rem;
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.popup-content p{ line-height:1.85; }
.close{
  position:absolute;
  top:.8rem;
  right:.8rem;
  width:2rem;
  height:2rem;
  border:none;
  border-radius:999px;
  background:#eef2f7;
  color:#111827;
  cursor:pointer;
  font-size:1rem;
}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:1rem;
}

/* SNS simplified */
.social-section{ padding-top:1rem; }
.leadtosns{
  text-align:center;
  color:var(--muted);
  line-height:1.85;
  margin-bottom:1rem;
}
#sns{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 22px 4rem;
  box-sizing:border-box;
  background:transparent;
  border-top:none;
}
#sns .snslogo{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.5rem 1rem;
  align-items:start;
}
.social-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:start;
  gap:.8rem;
}
.social-item img{
  width:min(100%, 110px);
  max-height:68px;
  object-fit:contain;
  margin:0 auto;
}
.social-item a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--navy);
  font-weight:800;
  line-height:1.6;
}
.social-item.x img{
  background:#111827;
  border-radius:10px;
  padding:.35rem;
}

/* Floating top */
#back-to-top{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:9998;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:none;
  border-radius:999px;
  padding:.75rem .9rem;
  background:#0b3d91;
  color:#fff;
  box-shadow:var(--shadow-lg);
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#back-to-top.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

@media (max-width: 1024px){
  .hero,
  .section-head,
  .cta-band{
    grid-template-columns:1fr;
  }
  .featured-grid,
  .reader-grid,
  .category-grid,
  .posts-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #sns .snslogo{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 768px){
  .indexheader .menulist{width:80%!important;}
  .indexheader .menulist>li a,
  .indexheader .menulist>li span{font-size:1.05rem;}
  .hero{padding-top:1.5rem;}
  .featured-grid,
  .reader-grid,
  .category-grid,
  .posts-grid,
  #sns .snslogo{
    grid-template-columns:1fr;
  }
  .tool-meta{
    flex-direction:column;
    align-items:flex-start;
  }
  .cta-row{flex-direction:column;}
  .hero-cta{flex-direction:column;}
}