.blog-index-wrap,
  .blog-list-wrap{
    padding-top:.4rem;
  }
  .blog-index-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .blog-index-card details{
    display:block;
  }
  .blog-index-card summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1.2rem 1.25rem;
    font-size:1.08rem;
    font-weight:700;
    color:var(--ink);
  }
  .blog-index-card summary::-webkit-details-marker{
    display:none;
  }
  .blog-index-card summary::after{
    content:"+";
    flex:0 0 auto;
    width:34px;
    height:34px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#edf2f8;
    font-size:1.35rem;
    line-height:1;
    font-weight:500;
  }
  .blog-index-card details[open] summary::after{
    content:"−";
  }
  .blog-index-body{
    padding:0 1.25rem 1.25rem;
    border-top:1px solid var(--line);
  }
  .blog-index-body p{
    margin:1rem 0 .9rem;
    color:var(--ink-soft);
    line-height:1.65;
  }
  .blog-index-list{
    columns:2;
    column-gap:2rem;
    margin:0;
    padding-left:1.2rem;
  }
  .blog-index-list li{
    break-inside:avoid;
    margin:0 0 .8rem;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .blog-index-list a{
    color:var(--ink);
    text-decoration:none;
  }
  .blog-index-list a:hover{
    text-decoration:underline;
  }
  .blog-section-head{
    display:grid;
    gap:.45rem;
    margin-bottom:1rem;
  }
  .blog-section-head h2{
    margin:0;
  }
  .blog-section-head p{
    margin:0;
    color:var(--ink-soft);
    line-height:1.65;
    max-width:70ch;
  }
  .blog-list-shell{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:0 1.4rem;
  }
  .blog-item{
    display:grid;
    grid-template-columns:68px minmax(0,1fr);
    gap:1rem;
    padding:1.35rem 0;
    border-bottom:1px solid var(--line);
    scroll-margin-top:120px;
  }
  .blog-item:last-child{
    border-bottom:none;
  }
  .blog-item-num{
    width:52px;
    height:52px;
    border-radius:16px;
    background:#edf2f8;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1rem;
    margin-top:.1rem;
  }
  .blog-item h3{
    margin:0 0 .45rem;
    font-size:clamp(1.08rem,1.5vw,1.35rem);
    line-height:1.3;
    color:var(--ink);
  }
  .blog-item p{
    margin:0;
    color:var(--ink-soft);
    line-height:1.7;
    max-width:68ch;
  }
  .blog-note{
    margin-top:1rem;
  }
  @media (max-width:980px){
    .blog-index-list{
      columns:1;
    }
  }
  @media (max-width:640px){
    .blog-list-shell{
      padding:0 1rem;
    }
    .blog-item{
      grid-template-columns:1fr;
      gap:.85rem;
      padding:1.1rem 0;
    }
    .blog-item-num{
      width:46px;
      height:46px;
      border-radius:14px;
    }
  }

  .blog-item h3 a{
    color:inherit;
    text-decoration:none;
  }
  .blog-item h3 a:hover{
    text-decoration:underline;
  }