/* 記事ページ試作 Ver.0.1 — トップページVer.0.3と共通トークン */
.article-sky-band {height: 86px; background: #a9d3e3 url("assets/hero-sky.svg") center 42%/cover no-repeat;}
.article-shell {width: min(100% - 40px, 770px); margin-inline: auto;}
.breadcrumbs {display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 25px 0 39px; color: #77909d; font-size: 12px;}
.breadcrumbs a {color:#37779a; text-underline-offset: 4px;}
.breadcrumbs a:hover {text-decoration: underline;}
.story {margin-bottom: 75px;}
.story-header {padding: 0 0 28px; border-bottom: 1px solid #dce9ef;}
.story-meta {display:flex; flex-wrap:wrap; align-items:center; column-gap:11px; row-gap:9px; margin-bottom: 17px; font-size: 12px; color: #7a8f9d;}
.story-category {display:inline-flex; align-items:center; font-weight: 750; color: #2d738e; background: #eaf5f9; border-radius: 4px; padding:4px 10px;}
.story-status {border:1px solid #b9ced7; border-radius:4px; padding:3px 8px; font-size: 11px; color:#526e80; font-weight:700;}
.story-date {color: #8297a2;}
.story-header h1 {font-size: clamp(26px,3.65vw,36px); font-weight: 800; letter-spacing:.015em; line-height:1.5; margin: 0; color:#203d4e; overflow-wrap:anywhere;}
.story-summary {margin:20px 0 0; color:#738d9b; font-size:13px;}
.story-body {padding-top: 36px; font-size: 16px; line-height: 2.1; color: #2a404d; overflow-wrap: anywhere;}
.story-body > p {margin:0 0 27px;}
.story-body > h2 {margin:62px 0 27px; font-size: 23px; font-weight: 800; line-height:1.55; color:#244d62; padding: 0 0 10px 17px; border-left: 4px solid #8dc5d9; border-bottom:1px solid #e7eff3;}
.article-phrases {margin: 27px 0 31px; background:#f0f7fa; border-left:3px solid #8bc4dc; padding:16px 20px; color:#315e77; font-weight: 700;}
.article-phrases p {margin: 0 0 4px;}
.article-phrases p:last-child {margin-bottom:0;}
.article-figure {margin: 30px 0 39px;}
.article-figure__image {background:#e8f4f8; border:1px solid #e1edf2; border-radius:8px; overflow:hidden;}
.article-figure__image img {width:100%; height:auto; aspect-ratio:16/9; object-fit:contain;}
.article-figure figcaption {font-size:13px; margin:10px 0 0; color:#637c89;}
.figure-open {display:inline-flex; align-items:center; gap:5px; margin-top:7px; color:#267799; text-decoration: underline; text-underline-offset:4px; font-size:13px; font-weight:700;}
.figure-open span {font-size:20px; line-height:1;}
.article-references {border-top:1px solid #dbe8ee; background:#f7fafc; border-radius:6px; padding: 25px 27px; margin-top: 56px;}
.article-references h2 {font-size:17px; margin:0 0 9px;}
.article-references p {font-size:13px; color: #748895; line-height: 1.9; margin:0;}
.article-end-actions {margin: 30px 0 0; font-size:14px; font-weight:700; color:#2a779b;}
.back-to-home {text-decoration: underline; text-underline-offset:5px;}
.figure-dialog {border:1px solid #c6d8e2; padding:0; border-radius:11px; width:min(98vw, 1170px); max-width:none; max-height:94vh; background:#fff; color:#284556; box-shadow:0 25px 70px #152c3d42;}
.figure-dialog::backdrop {background:rgba(12,29,39,.73);}
.figure-dialog__header {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #e3edf2;}
.figure-dialog__title {font-weight:750; font-size:13px; margin:0;}
.figure-dialog__close {background:#edf6fa; border:1px solid #b6d1e1; border-radius:6px; padding:8px 12px; color:#2b5b75; font-size:13px; cursor:pointer; white-space:nowrap;}
.figure-dialog__hint {font-size:12px; color:#678291; margin:0; padding:9px 16px;}
.figure-dialog__scroller {overflow:auto; max-height:calc(94vh - 110px); overscroll-behavior:contain;}
.figure-dialog__scroller img {display:block; width: min(1100px, 160vw); max-width:none; height:auto;}
@media (max-width:600px) {
 .article-sky-band {height:72px;}
 .article-shell {width:calc(100% - 36px);}
 .breadcrumbs {margin:20px 0 28px; font-size:11px;}
 .story {margin-bottom:50px;}
 .story-header {padding-bottom:24px;}
 .story-header h1 {font-size:clamp(23px, 6.05vw, 28px); line-height:1.55;}
 .story-meta {margin-bottom:13px; font-size:11px;}
 .story-summary {font-size:12px; margin-top:16px;}
 .story-body {padding-top:29px; font-size:15px; line-height:2;}
 .story-body > p {margin-bottom:23px;}
 .story-body > h2 {font-size:19px; margin:47px 0 22px; padding-left:12px;}
 .article-phrases {padding:13px 14px; margin:22px 0 25px;}
 .article-figure {margin:23px 0 30px;}
 .article-figure figcaption {font-size:12px; line-height:1.65; margin-top:8px;}
 .figure-open {font-size:12px; min-height:35px;}
 .article-references {padding:20px 18px;}
 .article-references h2 {font-size:16px;}
 .figure-dialog {width:98vw; max-height:90vh;}
 .figure-dialog__header {padding:10px;}
 .figure-dialog__title {font-size:12px;}
 .figure-dialog__hint {padding:7px 10px; font-size:11px;}
 .figure-dialog__scroller {max-height:calc(90vh - 100px);}
 .figure-dialog__scroller img {width: 950px;}
}
@media print {
 .figure-open,.figure-dialog,.menu-toggle {display:none!important;}
 .article-shell {width:100%;}
 .article-figure {break-inside:avoid;}
 .story {margin-bottom:0;}
}

/* Step 2: microCMS rich-text compatible additions (keeps Ver.0.1 baseline) */
.story-eyecatch {margin-top:24px; border-radius:8px; overflow:hidden; background:#e8f4f8;}
.story-eyecatch img {width:100%; max-height:430px; object-fit:contain;}
.story-body h3 {font-size:20px; margin:39px 0 18px; color:#275b74;}
.story-body h4 {font-size:17px; margin:25px 0 12px;}
.story-body ul,.story-body ol {padding-left:1.65em; margin:0 0 30px;}
.story-body li {margin-bottom:8px;}
.story-body blockquote {border-left:4px solid #afcfdd; padding:11px 18px; background:#f4f9fb; margin:25px 0;}
.story-body a,.references-content a {color:#286f94; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere;}
.story-body img {max-width:100%; height:auto;}
.story-body > figure {margin-block:30px 40px;}
.story-body .article-figure__image img {max-height:none; width:100%; object-fit:contain; height:auto; aspect-ratio:auto;}
.story-body .article-table-scroll {width:100%; overflow:auto; margin:28px 0 36px; border:1px solid #dce9ef; border-radius:8px; overscroll-behavior:contain;}
.story-body table {border-collapse:collapse; min-width:430px; width:100%; font-size:14px; line-height:1.6;}
.story-body th,.story-body td {border:1px solid #dce9ef; padding:12px 15px; vertical-align:top; text-align:left;}
.story-body th {background:#edf6fa; color:#284b5c; font-weight:700;}
.references-content {font-size:13px; color:#587381; line-height:1.85;}
.references-content > p {margin:0 0 9px;}
.category-archive {padding:5px 0 75px;}
.category-archive h1 {font-size:clamp(26px,4vw,36px); margin:6px 0 12px; color:#24495e;}
.category-description {color:#536e7d; font-size:14px; margin:0 0 20px; line-height:2;}
.category-count {font-size:12px; color:#79919e; border-bottom:1px solid #dce9ef; padding-bottom:12px; margin:0 0 12px;}
.archive-row {display:flex; align-items:center; gap:19px; border-bottom:1px solid #e1edf2; padding:18px 0;}
.archive-row__image {display:block; width:156px; height:100px; flex:0 0 156px; border-radius:8px; overflow:hidden; background:#e8f4f8;}
.archive-row__image img {width:100%; height:100%; object-fit:cover;}
.archive-row__body {display:flex; flex-direction:column; gap:5px; min-width:0;}
.archive-row__body time {color:#8194a0; font-size:11px;}
.archive-row__body strong {font-size:16px; line-height:1.55; color:#2b5268;}
.archive-row__body > span {font-size:13px; line-height:1.6; color:#6e8390;}
.archive-pagination {display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:25px 0;}
.archive-pagination a,.archive-pagination span {display:inline-grid; place-items:center; min-width:36px; height:36px; border:1px solid #cbdce6; border-radius:5px; color:#2a6786;}
.archive-pagination [aria-current="page"] {background:#d8edf6; color:#224b62; font-weight:750;}
@media(max-width:600px) {
 .story-eyecatch {margin-top:18px;}
 .story-body h3 {font-size:17px; margin:30px 0 15px;}
 .story-body table {font-size:13px; min-width:480px;}
 .category-archive {padding-bottom:46px;}
 .archive-row {gap:12px; padding:14px 0;}
 .archive-row__image {width:102px; height:76px; flex-basis:102px;}
 .archive-row__body strong {font-size:13px;}
 .archive-row__body > span {font-size:11px;}
}

/* Step 3: microCMS rich text image and revision display */
.story-updated {font-size:11px;color:#718996;}
.story-body img[role="button"] {cursor:zoom-in;}
.story-body img[role="button"]:focus-visible {outline:3px solid #358cb5;outline-offset:4px;}

.story-body > figure img {display:block;max-width:100%;height:auto;margin:auto;}
.story-body > figure figcaption {font-size:13px;line-height:1.75;color:#637c89;margin-top:10px;}
.story-body > h1 {font-size:24px;color:#244d62;line-height:1.6;margin:52px 0 20px;}