index.html）専用スタイル。カード #207 元: docs/work/dev_20260802_トップページ更新/260802_lp/column/article.css（デザイン案）を逐語移植。 トークンは top.css の橋渡し＋ front/src/style.css の @theme を前提とする。 */ .article-breadcrumb{max-width:var(--layout-max-content-width);margin:0 auto;padding:var(--space-5) var(--layout-side-padding-desktop) 0}.article-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none;font-size:var(--type-size-caption);color:var(--color-gray-mid)}.article-breadcrumb li+li:before{content:"›";margin-right:6px;color:var(--color-gray-mid)}.article-breadcrumb a{color:var(--color-gray-dark);text-decoration:none}.article-breadcrumb a:hover{text-decoration:underline}.article-breadcrumb [aria-current=page]{color:var(--color-gray-mid)}.article-breadcrumb+.article-header{padding-top:var(--space-4)}.article-header{max-width:var(--layout-max-content-width);margin:0 auto;padding:var(--space-7) var(--layout-side-padding-desktop) var(--space-5)}.article-header__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}.article-tag{display:inline-block;padding:2px 12px;border-radius:999px;font-size:12px;font-weight:var(--type-weight-bold);line-height:1.8;color:var(--color-ink)}.article-tag--law{background:var(--color-yellow-primary)}.article-tag--howto{background:#b8e6d0}.article-tag--case{background:#b8d4f0}.article-date{font-size:var(--type-size-caption);color:var(--color-gray-mid)}.article-readtime{font-size:var(--type-size-caption);color:var(--color-gray-mid);display:inline-flex;align-items:center;gap:4px}.article-readtime:before{content:"";display:inline-block;width:14px;height:14px;border:1.5px solid var(--color-gray-mid);border-radius:50%}.article-header__title{font-size:clamp(28px,3.5vw,var(--type-size-h3));font-weight:var(--type-weight-bold);line-height:var(--type-leading-headline);color:var(--color-ink);max-width:860px}.article-author{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);padding:var(--space-4);background:var(--color-bg-card);border:var(--border-thin) solid var(--color-gray-light);border-radius:var(--radius-md);max-width:400px}.article-author__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:var(--border-thin) solid var(--color-gray-light);flex-shrink:0}.article-author__info{display:flex;flex-direction:column;gap:2px}.article-author__name{font-size:var(--type-size-body-sm);font-weight:var(--type-weight-bold);color:var(--color-ink);line-height:1.4}.article-author__role{font-size:var(--type-size-caption);color:var(--color-gray-mid);line-height:1.4}.article-hero-image{max-width:var(--layout-max-content-width);margin:0 auto;padding:0 var(--layout-side-padding-desktop)}.article-hero-image img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-md);border:var(--border-thin) solid var(--color-gray-light)}.article-body{max-width:780px;margin:0 auto;padding:var(--space-6) var(--layout-side-padding-desktop) var(--space-8)}.article-toc{margin-bottom:var(--space-6);padding:var(--space-4) var(--space-5);background:var(--color-bg-card);border:var(--border-thin) solid var(--color-gray-light);border-radius:var(--radius-md)}.article-toc__title{margin:var(--space-0) var(--space-0) var(--space-3);font-size:var(--type-size-body-sm);font-weight:var(--type-weight-bold);color:var(--color-ink)}.article-toc ol{margin:var(--space-0);padding:var(--space-0);list-style:none;counter-reset:article-toc}.article-toc li{counter-increment:article-toc}.article-toc li+li{margin-top:var(--space-2)}.article-toc a{display:flex;gap:var(--space-2);font-size:var(--type-size-body-sm);line-height:var(--type-leading-body);color:var(--color-gray-dark);text-decoration:none}.article-toc a:before{content:counter(article-toc,decimal-leading-zero);flex-shrink:0;font-weight:var(--type-weight-bold);color:var(--color-ink)}.article-toc a:hover{color:var(--color-ink);text-decoration:underline}.article-toc+h2{margin-top:var(--space-6)}.article-body h2{font-size:clamp(22px,2.5vw,var(--type-size-h4));font-weight:var(--type-weight-bold);line-height:var(--type-leading-headline);color:var(--color-ink);margin-top:var(--space-7);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:var(--border-medium) solid var(--color-yellow-primary)}.article-body h2:first-child{margin-top:0}.article-body h3{font-size:clamp(18px,2vw,24px);font-weight:var(--type-weight-bold);line-height:var(--type-leading-headline);color:var(--color-ink);margin-top:var(--space-6);margin-bottom:var(--space-3)}.article-body p{font-size:var(--type-size-body);line-height:var(--type-leading-body);color:var(--color-gray-dark);margin-top:0;margin-bottom:var(--space-4)}.article-sources{margin-top:var(--space-7);padding:var(--space-5);border:var(--border-thin) solid var(--color-gray-light);border-radius:var(--radius-md);background:var(--color-bg-card)}.article-body .article-sources h2{margin:0 0 var(--space-4);padding:0;border:0;font-size:var(--type-size-h4)}.article-sources ol{margin:0;padding-left:1.4em;list-style:decimal}.article-sources li{margin-bottom:var(--space-3);font-size:var(--type-size-body-sm);line-height:var(--type-leading-body);color:var(--color-gray-dark)}.article-sources li:last-child{margin-bottom:0}.article-sources a{color:var(--color-ink);font-weight:var(--type-weight-bold);text-decoration:underline;text-underline-offset:3px}.article-sources a:hover{background:var(--color-yellow-primary)}.article-sources__note{display:block;margin-top:4px;font-size:var(--type-size-caption);color:var(--color-gray-mid);line-height:1.7}.article-sources__accessed{margin:var(--space-4) 0 0;font-size:var(--type-size-caption);color:var(--color-gray-mid)}.article-body>p a,.article-body>ul li a,.article-step p a,.article-pricing-note p a{color:var(--color-ink);text-decoration:none;background:linear-gradient(transparent 88%,var(--color-yellow-primary) 88%);font-weight:var(--type-weight-bold)}.article-body>p a:hover,.article-body>ul li a:hover,.article-step p a:hover,.article-pricing-note p a:hover{background:linear-gradient(transparent 62%,var(--color-yellow-primary) 62%)}.article-body ul{list-style:none;padding:0;margin:var(--space-4) 0;display:flex;flex-direction:column;gap:var(--space-3)}.article-body ul li{position:relative;padding:var(--space-4);padding-left:var(--space-5);background:var(--color-bg-card);border:var(--border-thin) solid var(--color-gray-light);border-radius:var(--radius-md);font-size:var(--type-size-body);line-height:var(--type-leading-body);color:var(--color-gray-dark)}.article-body ul li:before{content:"";position:absolute;top:var(--space-4);left:var(--space-3);width:8px;height:8px;background:var(--color-yellow-primary);border-radius:50%;margin-top:.55em}.article-body ul li strong{color:var(--color-ink)}.article-body figure{margin:var(--space-6) 0;padding:0}.article-body figure img{width:100%;height:auto;border-radius:var(--radius-md);border:var(--border-thin) solid var(--color-gray-light)}.article-body figcaption{margin-top:var(--space-2);font-size:var(--type-size-caption);color:var(--color-gray-mid);text-align:center}.article-step{margin:var(--space-5) 0;padding:var(--space-5);background:var(--color-bg-card);border:var(--border-thin) solid var(--color-gray-light);border-radius:var(--radius-md)}.article-step__label{display:inline-block;margin-bottom:var(--space-2);padding:2px 12px;background:var(--color-yellow-primary);border-radius:999px;font-size:var(--type-size-caption);font-weight:var(--type-weight-bold);color:var(--color-ink);line-height:1.8}.article-step h3{margin-top:var(--space-2);margin-bottom:var(--space-3)}.article-step p{margin-bottom:0}.article-pricing-note{margin:var(--space-6) 0;padding:var(--space-5);background:#f5c51814;border:var(--border-medium) solid var(--color-yellow-primary);border-radius:var(--radius-md)}.article-pricing-note h3{margin-top:0}.article-cta{max-width:780px;margin:0 auto var(--space-8);padding:var(--space-6) var(--layout-side-padding-desktop)}.article-cta__inner{padding:var(--space-6);background:var(--color-bg-card);border:var(--border-medium) solid var(--color-ink);border-radius:var(--radius-md);box-shadow:8px 8px 0 var(--color-ink);text-align:center}.article-cta__inner .article-cta__title{max-width:none;margin:var(--space-0) var(--space-0) var(--space-3);font-size:clamp(20px,2.5vw,var(--type-size-h4));font-weight:var(--type-weight-bold);line-height:var(--type-leading-headline);color:var(--color-ink)}.article-cta__inner p{font-size:var(--type-size-body-sm);color:var(--color-gray-dark);margin-bottom:var(--space-5);max-width:560px;margin-left:auto;margin-right:auto}.article-cta__inner .btn{font-size:var(--type-size-body)}.article-back{max-width:780px;margin:0 auto;padding:0 var(--layout-side-padding-desktop) var(--space-7)}.article-back a{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--type-size-body-sm);font-weight:var(--type-weight-bold);color:var(--color-gray-dark);transition:color .16s ease}.article-back a:hover{color:var(--color-ink)}.article-back a:before{content:"←"}@media(max-width:980px){.article-breadcrumb,.article-header,.article-hero-image,.article-body,.article-cta,.article-back{padding-left:var(--layout-side-padding-tablet);padding-right:var(--layout-side-padding-tablet)}}@media(max-width:640px){.article-breadcrumb{padding-left:var(--layout-side-padding-mobile);padding-right:var(--layout-side-padding-mobile)}.article-header{padding-top:var(--space-6);padding-left:var(--layout-side-padding-mobile);padding-right:var(--layout-side-padding-mobile)}.article-header__title{font-size:clamp(24px,6vw,32px)}.article-hero-image,.article-body{padding-left:var(--layout-side-padding-mobile);padding-right:var(--layout-side-padding-mobile)}.article-body h2{font-size:22px}.article-toc,.article-step{padding:var(--space-4)}.article-author{max-width:100%}.article-cta{padding-left:var(--layout-side-padding-mobile);padding-right:var(--layout-side-padding-mobile)}.article-cta__inner{padding:var(--space-5)}.article-back{padding-left:var(--layout-side-padding-mobile);padding-right:var(--layout-side-padding-mobile)}}