@charset "UTF-8";

/* ========================================================
   S-line BLOG
   軽パークの読みやすい記事導線 +
   アイカーマガジンの情報量/回遊導線を参考に再構成
======================================================== */

.blog-page{
  background:#fff;
}

.blog-breadcrumb{
  background:#fff;
  border-bottom:1px solid var(--border);
}

.blog-breadcrumb ol{
  min-height:42px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  overflow:hidden;
  color:#7f8a9b;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}

.blog-breadcrumb li{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.blog-breadcrumb li+li::before{
  content:"›";
  color:#b0b8c5;
}

.blog-breadcrumb li:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}

.blog-breadcrumb a{
  color:var(--navy);
}

/* ========================================================
   BLOG INDEX
======================================================== */





.blog-index{
  padding:50px 0 88px;
  background:#fff;
  border-top:1px solid var(--border);
}

.blog-index-head{
  margin-bottom:26px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}

.blog-index-head h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(1.8rem,3vw,2.55rem);
}


.blog-filter span{
  min-height:38px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.7rem;
  font-weight:900;
}


.blog-featured{
  margin-bottom:36px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.8fr);
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--border);
}

.blog-featured-image{
  min-height:360px;
}

.blog-featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.blog-featured-body{
  padding:28px 0 28px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.blog-featured-meta,
.blog-card-meta{
  margin-bottom:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  color:#8791a1;
  font-size:.68rem;
  font-weight:800;
}


.blog-featured h2{
  margin:0 0 14px;
  color:var(--navy);
  font-size:clamp(1.5rem,3vw,2.25rem);
  line-height:1.45;
  letter-spacing:-.03em;
}

.blog-featured p{
  margin:0 0 20px;
  color:var(--muted);
  font-size:.85rem;
}

.blog-read-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:16px;
  color:var(--navy);
  font-size:.78rem;
  font-weight:900;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.blog-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-top:1px solid var(--border);
  border-radius:0;
  transition:.2s;
}

.blog-card:hover{
  transform:none;
}

.blog-card-image{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#eef2f7;
}

.blog-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.blog-card-body{
  padding:16px 0 0;
  display:flex;
  flex-direction:column;
  flex:1;
}

.blog-card h3{
  margin:0 0 10px;
  color:var(--navy);
  font-size:1.08rem;
  line-height:1.55;
  letter-spacing:-.02em;
}

.blog-card-excerpt{
  margin:0 0 16px;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.75;
}

.blog-card .blog-read-link{
  margin-top:auto;
}

/* ========================================================
   ARTICLE
======================================================== */

.article-wrap{
  padding:54px 0 90px;
}

.article-shell{
  width:min(820px,100%);
  margin-inline:auto;
}

.article-main{
  min-width:0;
}

.article-header{
  margin-bottom:24px;
}

.article-meta{
  margin-bottom:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  color:#7c8798;
  font-size:.72rem;
  font-weight:800;
}


.article-header h1{
  margin:0 0 16px;
  color:var(--navy);
  font-size:clamp(2rem,4.6vw,3.25rem);
  line-height:1.32;
  letter-spacing:-.045em;
}

.article-lead{
  margin:0;
  color:#556277;
  font-size:.95rem;
  line-height:1.95;
}

.article-hero-image{
  margin:28px 0 28px;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 14px 34px rgba(6,31,79,.12);
}

.article-hero-image img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.article-summary{
  margin:0 0 26px;
  padding:18px 0 18px 18px;
  background:#fff;
  border-left:3px solid var(--navy);
  border-radius:0;
}

.article-summary strong{
  display:block;
  margin-bottom:8px;
  color:var(--navy);
  font-size:1rem;
}

.article-summary p{
  margin:0;
  color:#47556b;
  font-size:.84rem;
  line-height:1.85;
}

.article-toc{
  margin:0 0 34px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
}

.article-toc summary{
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--navy);
  background:#f7f9fc;
  cursor:pointer;
  font-size:.92rem;
  font-weight:900;
  list-style:none;
}

.article-toc summary::-webkit-details-marker{
  display:none;
}

.article-toc summary::after{
  content:"＋";
  font-size:1.15rem;
}

.article-toc[open] summary::after{
  content:"−";
}

.article-toc ol{
  margin:0;
  padding:18px 22px 20px 44px;
  color:#46536a;
  font-size:.82rem;
  line-height:1.85;
}

.article-toc ol ol{
  padding:4px 0 0 18px;
  font-size:.77rem;
}

.article-toc a:hover{
  color:var(--navy);
  text-decoration:underline;
}

.article-body{
  color:#3f4d62;
  font-size:.94rem;
  line-height:2;
}

.article-body h2{
  margin:54px 0 20px;
  padding:0 0 12px;
  color:var(--navy);
  border-bottom:3px solid var(--navy);
  font-size:clamp(1.45rem,3vw,1.95rem);
  line-height:1.45;
  letter-spacing:-.03em;
}

.article-body h3{
  margin:34px 0 12px;
  padding-left:13px;
  color:var(--navy);
  border-left:4px solid #55acd6;
  font-size:1.18rem;
  line-height:1.55;
}

.article-body p{
  margin:0 0 20px;
}

.article-body ul{
  margin:0 0 22px;
  padding-left:1.4em;
}

.article-point{
  margin:26px 0 30px;
  padding:18px 20px;
  background:#f7f9fc;
  border:0;
  border-radius:4px;
}

.article-point-title{
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--navy);
  font-weight:900;
}

.article-point-title::before{
  content:"POINT";
  padding:3px 7px;
  color:#fff;
  background:#55acd6;
  border-radius:5px;
  font-size:.58rem;
  letter-spacing:.08em;
}

.article-point ul{
  margin:0;
}

.article-table-wrap{
  margin:26px 0 32px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:8px;
}

.article-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:.8rem;
}

.article-table th,
.article-table td{
  padding:14px 15px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}

.article-table th{
  color:var(--navy);
  background:#f4f7fb;
  font-weight:900;
}

.article-table tr:last-child td{
  border-bottom:0;
}

.article-table th:last-child,
.article-table td:last-child{
  border-right:0;
}

/* article mid CTA */
.article-stock-cta{
  margin:36px 0;
  padding:22px 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.article-stock-cta .mini-label{
  margin:0 0 5px;
  color:#b36800;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.1em;
}

.article-stock-cta h3{
  margin:0 0 6px;
  padding:0;
  border:0;
  color:#24324a;
  font-size:1.18rem;
}

.article-stock-cta p{
  margin:0;
  color:#687387;
  font-size:.78rem;
  line-height:1.7;
}

.article-stock-cta a{
  min-height:44px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--navy);
  border-radius:8px;
  font-size:.74rem;
  font-weight:900;
  white-space:nowrap;
}

/* FAQ */
.article-faq{
  margin-top:12px;
}

.article-faq details{
  border-top:1px solid var(--border);
}

.article-faq details:last-child{
  border-bottom:1px solid var(--border);
}

.article-faq summary{
  padding:17px 4px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:10px;
  align-items:start;
  cursor:pointer;
  color:#27364d;
  font-weight:900;
  list-style:none;
}

.article-faq summary::-webkit-details-marker{
  display:none;
}

.article-faq summary::before{
  content:"Q";
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--navy);
  border-radius:50%;
  font-size:.72rem;
}

.article-faq summary::after{
  content:"＋";
  color:var(--navy);
}

.article-faq details[open] summary::after{
  content:"−";
}

.article-faq-answer{
  padding:0 4px 18px 38px;
  color:#5d697b;
  font-size:.84rem;
}

/* Summary */
.article-conclusion{
  margin:28px 0 38px;
  padding:24px;
  background:#f6f8fb;
  border-radius:8px;
}

.article-conclusion strong{
  display:block;
  margin-bottom:10px;
  color:var(--navy);
  font-size:1rem;
}

.article-conclusion ul{
  margin:0;
}

/* final CTA */
.article-final-cta{
  margin:44px 0 22px;
  padding:28px 0;
  color:var(--navy);
  background:#fff;
  border-top:2px solid var(--navy);
  border-bottom:1px solid var(--border);
  border-radius:0;
}

.article-final-cta .eyebrow{
  color:#7ec7ee;
}

.article-final-cta h2{
  margin:0 0 8px;
  padding:0;
  color:var(--navy);
  border:0;
  font-size:1.55rem;
}

.article-final-cta p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:.82rem;
}

.article-final-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.article-final-actions a{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:.76rem;
  font-weight:900;
}

.article-final-actions .stock{
  color:#fff;
  background:var(--orange);
}

.article-final-actions .stock.phone{
  flex-direction:column;
  gap:2px;
  text-align:center;
  line-height:1.2;
}

.article-final-actions .stock.phone small{
  display:block;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.01em;
}

.article-final-actions .line{
  color:#fff;
  background:var(--line);
}

/* author */
.article-author{
  margin-top:30px;
  padding:22px 0 0;
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  align-items:center;
  border-top:1px solid var(--border);
}

.article-author-logo{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
}

.article-author-logo img{
  width:66px;
  object-fit:contain;
}

.article-author small{
  display:block;
  margin-bottom:3px;
  color:#8a94a5;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.08em;
}

.article-author strong{
  display:block;
  margin-bottom:5px;
  color:var(--navy);
}

.article-author p{
  margin:0;
  color:#687488;
  font-size:.72rem;
  line-height:1.7;
}

/* Sidebar */









/* Related / latest stock */
.blog-lower{
  padding:64px 0 72px;
  background:#fff;
  border-top:1px solid var(--border);
}

.blog-lower + .blog-lower{
  padding-top:0;
  border-top:0;
}

.blog-lower-head{
  margin-bottom:22px;
}

.blog-lower h2{
  margin:0;
  color:var(--navy);
  font-size:1.8rem;
}

.stock-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.stock-mini-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
}

.stock-mini-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#eef2f7;
}

.stock-mini-body{
  padding:15px;
}

.stock-mini-maker{
  margin:0 0 2px;
  color:#7d8797;
  font-size:.65rem;
  font-weight:800;
}

.stock-mini-card h3{
  margin:0 0 10px;
  color:var(--navy);
  font-size:1rem;
  line-height:1.45;
}

.stock-mini-price{
  margin:0;
  color:#233149;
  font-size:.72rem;
  font-weight:800;
}

.stock-mini-price strong{
  margin-left:5px;
  color:#d84926;
  font-size:1.3rem;
}

.stock-mini-link{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  color:var(--navy);
  font-size:.7rem;
  font-weight:900;
}

/* CTA/Footer */
.blog-contact{
  padding:62px 0;
  color:#fff;
  background:linear-gradient(135deg,var(--navy-dark),var(--navy));
}

.blog-contact-inner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:40px;
}

.blog-contact h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(1.8rem,4vw,2.8rem);
}

.blog-contact p:last-child{
  margin:0;
  color:rgba(255,255,255,.78);
}

.blog-contact-actions{
  display:grid;
  gap:10px;
  min-width:260px;
}

.blog-contact-phone{
  display:grid;
  gap:2px;
  color:#fff;
  background:var(--orange);
  text-align:center;
}

.blog-contact-phone small{
  font-size:.68rem;
}

.blog-contact-line{
  color:#fff;
  background:var(--line);
}

@media(max-width:980px){
  .article-shell{
    grid-template-columns:1fr;
  }

  
  .blog-featured{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:900px){
  .blog-grid,
  .stock-mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .blog-contact-inner{
    grid-template-columns:1fr;
  }

  .blog-contact-actions{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:700px){
  .blog-hero{
    padding:50px 0 44px;
  }

  .blog-index{
    padding:50px 0 68px;
  }

  .blog-index-head{
    display:grid;
    align-items:start;
    gap:14px;
  }

  .blog-featured{
    grid-template-columns:1fr;
  }

  .blog-featured-image{
    min-height:0;
    aspect-ratio:16/10;
  }

  .blog-featured-body{
    padding:22px;
  }

  .blog-grid,
  .stock-mini-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .blog-card{
    display:grid;
    grid-template-columns:40% minmax(0,60%);
  }

  .blog-card-image{
    aspect-ratio:auto;
    min-height:155px;
  }

  .blog-card-body{
    padding:14px;
  }

  .blog-card h3{
    font-size:.98rem;
  }

  .blog-card-excerpt{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.7rem;
  }

  .article-wrap{
    padding:36px 0 62px;
  }

  .article-header h1{
    font-size:1.95rem;
  }

  .article-lead{
    font-size:.86rem;
  }

  .article-hero-image{
    margin:22px 0 24px;
    border-radius:11px;
  }

  .article-summary,
  .article-toc{
    margin-bottom:24px;
  }

  .article-body{
    font-size:.88rem;
  }

  .article-body h2{
    margin-top:42px;
  }

  .article-stock-cta{
    grid-template-columns:1fr;
    gap:15px;
  }

  .article-stock-cta a{
    width:100%;
  }

  .article-final-actions{
    grid-template-columns:1fr;
  }

  .article-author{
    grid-template-columns:60px 1fr;
    padding:17px;
  }

  .article-author-logo{
    width:60px;
    height:60px;
  }

  .article-author-logo img{
    width:52px;
  }

  .stock-mini-card{
    display:grid;
    grid-template-columns:42% minmax(0,58%);
  }

  .stock-mini-card img{
    height:100%;
    min-height:150px;
    aspect-ratio:auto;
  }

  .blog-contact{
    padding:48px 0;
  }

  .blog-contact-actions{
    grid-template-columns:1fr;
  }
}


/* ========================================================
   BLOG HERO - about/service と同じ下層ページ構成
======================================================== */

.blog-subhero{
  position:relative;
  min-height:530px;
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}

.blog-subhero .subhero-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background:url("../assets/showroom_lineup.jpg") center 48%/cover no-repeat;
}

.blog-subhero .subhero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(
    90deg,
    rgba(0,25,79,.97) 0%,
    rgba(1,39,120,.86) 46%,
    rgba(1,39,120,.38) 78%,
    rgba(0,0,0,.10) 100%
  );
}

.blog-subhero .subhero-inner{
  min-height:530px;
  display:flex;
  align-items:center;
}

.blog-subhero .subhero-copy{
  max-width:700px;
}

.blog-subhero .subhero-message{
  margin-bottom:16px;
  color:#fff;
  font-size:clamp(2.2rem,4.4vw,3.65rem);
  font-weight:900;
  line-height:1.28;
  letter-spacing:-.04em;
}

.blog-subhero .subhero-message span{
  display:inline;
  padding-bottom:5px;
  border-bottom:5px solid var(--yellow);
}

.blog-subhero .subhero-text{
  max-width:660px;
  margin:0;
  color:rgba(255,255,255,.87);
  font-weight:600;
  line-height:1.9;
}

/* ========================================================
   BLOG INDEX
======================================================== */

.blog-index{
  padding:72px 0 92px;
  background:#fff;
}

.blog-index-head{
  margin-bottom:34px;
  display:block;
}

.blog-index-head h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(2rem,3.5vw,2.8rem);
  letter-spacing:-.03em;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.blog-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(9,42,93,.08);
}

.blog-card-image{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#eef2f7;
}

.blog-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .25s ease;
}

.blog-card:hover .blog-card-image img{
  transform:scale(1.02);
}

.blog-card-body{
  padding:20px 20px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.blog-card-date{
  margin-bottom:10px;
  color:#8b95a5;
  font-size:.72rem;
  font-weight:700;
}

.blog-card h3{
  margin:0 0 10px;
  color:#222;
  font-size:1.18rem;
  line-height:1.55;
  letter-spacing:-.02em;
}

.blog-card-excerpt{
  margin:0 0 18px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.8;
}

.blog-card .blog-read-link{
  margin-top:auto;
  color:var(--navy);
}

@media(max-width:820px){
  .blog-subhero,
  .blog-subhero .subhero-inner{
    min-height:500px;
  }

  .blog-subhero .subhero-overlay{
    background:linear-gradient(
      180deg,
      rgba(0,25,79,.93),
      rgba(1,39,120,.76) 65%,
      rgba(0,0,0,.15)
    );
  }

  .blog-subhero .subhero-copy{
    width:100%;
  }

  .blog-subhero .subhero-message{
    font-size:clamp(2rem,8vw,3.1rem);
  }

  .blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
}

@media(max-width:560px){
  .blog-subhero .subhero-text br{
    display:none;
  }

  .blog-subhero .subhero-message{
    line-height:1.18;
  }

  .blog-subhero .subhero-message span{
    padding-bottom:0;
    border-bottom:0;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    box-shadow:inset 0 -.18em 0 var(--yellow);
  }

  .blog-index{
    padding:60px 0 72px;
  }

  .blog-grid{
    grid-template-columns:1fr;
  }

  .blog-card{
    display:block;
  }

  .blog-card-image{
    min-height:0;
    aspect-ratio:16/10;
  }

  .blog-card-body{
    padding:17px;
  }
}


.article-source{
  margin-top:-8px !important;
  color:#7d8797;
  font-size:.72rem;
}

.article-source a{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ========================================================
   BLOG CARD v44 - 参考カードに合わせた一覧デザイン
======================================================== */

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px;
}

.blog-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#fff;
  border:0;
  border-radius:24px;
  box-shadow:0 10px 28px rgba(24,43,77,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(24,43,77,.12);
}

.blog-card-image{
  margin:16px 16px 0;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:18px;
  background:#eef2f7;
}

.blog-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.blog-card:hover .blog-card-image img{
  transform:none;
}

.blog-card-body{
  padding:22px 24px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.blog-card-meta-row{
  margin-bottom:18px;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  color:#a0a5ad;
  font-size:.86rem;
  font-weight:600;
}

.blog-meta-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.blog-meta-item svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}

.blog-card h3{
  margin:0;
  color:#2b2b2b;
  font-size:clamp(1.18rem,1.7vw,1.55rem);
  line-height:1.62;
  letter-spacing:-.025em;
  font-weight:800;
}

/* アイキャッチ全体が切れないようにする */
.article-hero-image{
  margin:28px 0 28px;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(6,31,79,.10);
}

.article-hero-image img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:contain;
  background:#eef2f7;
}

/* ========================================================
   ARTICLE SALES CTA v44
======================================================== */

.article-sales-cta{
  margin:52px 0 26px;
  padding:36px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.72fr);
  gap:38px;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(120deg,#001b58 0%,#012778 58%,#073a92 100%);
  border-radius:14px;
}

.article-sales-kicker{
  margin:0 0 8px !important;
  color:#95c8ff;
  font-size:.73rem;
  font-weight:900;
  letter-spacing:.08em;
}

.article-sales-cta h2{
  margin:0 0 14px !important;
  padding:0 !important;
  color:#fff !important;
  border:0 !important;
  font-size:clamp(1.6rem,3vw,2.15rem) !important;
  line-height:1.45 !important;
}

.article-sales-lead{
  margin:0 !important;
  color:rgba(255,255,255,.82);
  font-size:.86rem;
  line-height:1.9;
}

.article-sales-points{
  margin:22px 0 0 !important;
  padding:0 !important;
  display:grid;
  gap:9px;
  list-style:none;
}

.article-sales-points li{
  position:relative;
  margin:0;
  padding-left:28px;
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  line-height:1.55;
}

.article-sales-points li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.02em;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  color:#012778;
  background:#fff;
  border-radius:50%;
  font-size:.65rem;
  font-weight:900;
}

.article-sales-actions{
  display:grid;
  gap:11px;
}

.article-sales-line{
  min-height:78px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "small arrow"
    "main arrow";
  align-items:center;
  color:#fff;
  background:#06c755;
  border-radius:9px;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.article-sales-line-small{
  grid-area:small;
  margin-bottom:2px;
  font-size:.66rem;
  font-weight:700;
  opacity:.88;
}

.article-sales-line strong{
  grid-area:main;
  font-size:1rem;
  line-height:1.2;
}

.article-sales-arrow{
  grid-area:arrow;
  padding-left:16px;
  font-size:1.25rem;
  font-weight:900;
}

.article-sales-stock{
  min-height:52px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.58);
  border-radius:9px;
  font-size:.78rem;
  font-weight:900;
}

.article-sales-note{
  margin:2px 0 0 !important;
  color:rgba(255,255,255,.64);
  font-size:.65rem;
  line-height:1.55;
  text-align:center;
}

@media(max-width:900px){
  .blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }

  .article-sales-cta{
    grid-template-columns:1fr;
    gap:26px;
  }
}

@media(max-width:560px){
  .blog-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .blog-card{
    border-radius:18px;
  }

  .blog-card-image{
    margin:12px 12px 0;
    border-radius:14px;
  }

  .blog-card-body{
    padding:18px 18px 22px;
  }

  .blog-card-meta-row{
    margin-bottom:12px;
    gap:14px;
    font-size:.76rem;
  }

  .blog-card h3{
    font-size:1.12rem;
  }

  .article-sales-cta{
    margin-top:42px;
    padding:26px 20px;
    border-radius:10px;
  }

  .article-sales-cta h2{
    font-size:1.55rem !important;
  }
}


/* ========================================================
   FULL ARTICLE v48
======================================================== */

.article-intro{
  margin-bottom:26px;
}

.article-intro p:last-child{
  margin-bottom:0;
}

.article-body > p > a{
  color:var(--navy);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

.article-body h1,
.article-body h2,
.article-body h3{
  scroll-margin-top:110px;
}

@media(max-width:560px){
  .article-header h1{
    font-size:1.8rem;
    line-height:1.42;
  }
}


/* ========================================================
   ARTICLE TYPOGRAPHY v49
   PC本文 17px / スマホ本文 16px
======================================================== */

.article-body{
  font-size:1.0625rem; /* 17px */
  line-height:2;
}

.article-lead{
  font-size:1rem;
  line-height:1.95;
}

.article-summary p,
.article-toc ol,
.article-point,
.article-table,
.article-faq-answer{
  font-size:.94rem;
}

@media(max-width:700px){
  .article-body{
    font-size:1rem; /* 16px */
    line-height:1.95;
  }

  .article-lead{
    font-size:.95rem;
  }

  .article-summary p,
  .article-toc ol,
  .article-point,
  .article-table,
  .article-faq-answer{
    font-size:.9rem;
  }
}