@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Zen+Kaku+Gothic+New:wght@500;700&family=Zen+Old+Mincho:wght@500;700&display=swap');

:root{--ink:#090909;--accent:#139edf;--accent-deep:#0b7cb0;--soft:#eaf7fd;--paper:#fff;--line:#dfe3e7}
*{box-sizing:border-box}
body{margin:0;background:#ffffff;color:var(--ink);font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}
a{color:inherit}
.columns-shell,.column-article-shell{width:min(calc(100% - 24px),1180px);margin:14px auto 0;border:1px solid rgba(9,9,9,.2);background:var(--paper)}
.columns-hero{--soft:#eaf7fd;--paper:#fff;--ink:#090909;--accent:#139edf}
.eyebrow{margin:0;color:var(--accent-deep);font-family:'Playfair Display',Georgia,serif;font-size:10px;font-weight:700;letter-spacing:.2em}
.column-list{padding:36px clamp(24px,6vw,70px) 54px}
.column-list-head{margin-bottom:18px}
.column-list-head h2{margin:4px 0 0;font-family:'Zen Old Mincho',serif;font-size:30px}
.column-card{border-top:1px solid var(--ink)}
.column-card:last-child{border-bottom:1px solid var(--ink)}
.column-card a{display:grid;position:relative;padding:32px 92px 32px 0;text-decoration:none}
.column-card h2{max-width:760px;margin:7px 0 11px;font-family:'Zen Old Mincho',serif;font-size:clamp(24px,3vw,38px);line-height:1.5}
.column-card p:not(.eyebrow){max-width:780px;margin:0;color:#5e5865;font-size:13px;line-height:1.9}
.column-card small{margin-top:14px;color:#777;font-size:10px}
.column-card strong{margin-top:10px;color:var(--accent-deep);font-size:11px;letter-spacing:.08em}
.column-card-orbit{position:absolute;right:16px;top:37px;width:56px;height:56px;border:1px solid var(--ink);border-radius:50%;color:#ffe9a8;font-size:42px;line-height:49px;text-align:center}
/* 画像のあるカードは、左にサムネイルを置いた2段組にする */
.column-card--visual a{grid-template-columns:240px minmax(0,1fr);grid-auto-rows:min-content;gap:0 26px;align-items:start}
.column-card--visual .column-card-thumb{grid-row:1 / span 6;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.column-card--visual .column-card-orbit{display:none}
@media(max-width:720px){
  .column-card--visual a{grid-template-columns:minmax(0,1fr);gap:0}
  .column-card--visual .column-card-thumb{grid-row:auto;margin-bottom:16px}
}
.column-card a:hover h2,.column-card a:focus-visible h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.column-card a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.column-article-shell{padding:0 clamp(24px,7vw,88px) 68px}
.breadcrumb{display:flex;gap:9px;padding:18px 0;color:#6f6874;font-size:10px}
.breadcrumb a{text-underline-offset:3px}
.column-article-head{padding:58px clamp(0px,3vw,36px) 48px;border-bottom:1px solid var(--ink);background:linear-gradient(145deg,#f7fcfe,#fff 68%)}
/* 主役画像。本文の前に置き、幅いっぱいで見せる */
.column-article-hero{margin:0;padding:28px 0 0}
.column-article-hero img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.column-article-head h1{max-width:850px;margin:13px 0 20px;font-family:'Zen Old Mincho',serif;font-size:clamp(31px,5vw,55px);font-weight:700;line-height:1.5}
.column-article-head .description{max-width:760px;margin:0;color:#5f5964;font-size:15px;line-height:1.95}
.article-meta{display:flex;gap:20px;margin-top:20px;color:#777;font-size:10px}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.article-tag{display:inline-flex;align-items:center;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--accent-deep);font-size:11px;font-weight:700;line-height:1.4;text-decoration:none}
.article-tag:hover,.article-tag:focus-visible{border-color:var(--accent);background:var(--soft)}
.article-tag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.column-article-body{width:min(100%,700px);margin:0 auto;padding:48px 0 22px;overflow-wrap:anywhere}
.feature-toc{width:min(100%,760px);margin:36px auto 0;padding:24px 28px;background:var(--soft);border-top:3px solid var(--accent)}
.feature-toc>summary{cursor:pointer;margin:0 0 12px;color:var(--accent-deep);font-size:13px;font-weight:700;letter-spacing:.08em}
.feature-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;margin:18px 0 0;padding:0 0 0 20px;background:none;font-size:13px;line-height:1.8}
.feature-toc a{text-decoration:none;text-underline-offset:4px}
.feature-toc a:hover,.feature-toc a:focus-visible{text-decoration:underline}
.column-article-body h2{scroll-margin-top:24px}
.column-article-body h3{margin:32px 0 14px;color:var(--accent-deep);font-size:19px;line-height:1.65}
.feature-body-figure{margin:38px -34px 42px}
.feature-body-figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.feature-body-figure figcaption{margin:10px 0 0;color:#5c6970;font-size:12px;line-height:1.8;text-align:center}
.column-article-body blockquote{margin:24px 0;padding:22px 26px;border-left:3px solid var(--accent);background:var(--soft)}
.column-article-body blockquote p:last-child{margin-bottom:0}
.column-card--visual a{padding-right:0}
@media(max-width:850px){.feature-body-figure{margin-right:0;margin-left:0}}
@media(max-width:640px){.feature-toc{padding:20px}.feature-toc ol{grid-template-columns:minmax(0,1fr);gap:8px}.column-card--visual a{padding-right:0}.feature-body-figure{margin-top:28px;margin-bottom:30px}.column-article-body h3{font-size:18px}}
.column-article-body p,.column-article-body li{font-size:16px;line-height:2.05}
.column-article-body p{margin:0 0 22px}
.column-article-body h2{margin:60px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--ink);font-family:'Zen Old Mincho',serif;font-size:28px;line-height:1.55}
.column-article-body ol{margin:18px 0 28px;padding:18px 24px 18px 48px;background:var(--soft)}
.column-article-body li+li{margin-top:5px}
.column-article-body .editorial-policy{margin:48px 0 0;padding:22px;border:1px solid var(--line);background:#faf9fc;font-size:12px;line-height:1.85}
.back-link{display:inline-block;margin-top:26px;color:var(--accent-deep);font-size:12px;font-weight:700;text-decoration:none}
.site-footer{width:min(calc(100% - 24px),1180px);margin:0 auto 28px;padding:28px;border:1px solid rgba(9,9,9,.2);border-top:0;background:#fff;text-align:center}
.brand{font-family:'Playfair Display',serif;font-size:25px;font-weight:700;text-decoration:none}.brand span{color:var(--accent)}
.site-footer p{margin:6px 0 14px;color:#777;font-size:8px;letter-spacing:.2em}.privacy-link{font-size:9px}
@media(max-width:640px){
  .columns-shell,.column-article-shell{width:100%;margin:0;border-right:0;border-left:0}
  .column-list{padding:28px 20px 42px}
  .column-card a{padding:26px 60px 26px 0}
  .column-card h2{font-size:25px}
  .column-card-orbit{right:0;top:31px;width:43px;height:43px;font-size:33px;line-height:37px}
  .column-article-shell{padding:0 20px 50px}
  .column-article-head{padding:40px 4px 36px}
  .column-article-head h1{font-size:32px}
  .column-article-head .description{font-size:15px}
  .article-meta{align-items:flex-start;flex-direction:column;gap:4px}
  .column-article-body{padding-top:34px}
  .column-article-body p,.column-article-body li{font-size:16px;line-height:2}
  .column-article-body h2{margin-top:48px;font-size:24px}
  .site-footer{width:100%;margin:0;border-right:0;border-left:0}
}

/* 蛍光ペン（強調） */
.column-article-body strong{background:linear-gradient(transparent 67%,#fff0a8 67%);font-weight:700}
/* 表 */
.column-article-body .table-wrap{margin:22px 0 30px;overflow-x:auto}
.column-article-body table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.8}
.column-article-body th,.column-article-body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.column-article-body th{background:var(--soft);font-weight:700;white-space:nowrap}
/* チェックリスト */
.column-article-body ul.checklist{margin:18px 0 30px;padding:18px 22px;list-style:none;background:var(--soft);border-radius:8px}
.column-article-body ul.checklist li{margin:0;padding:6px 0}
.column-article-body ul.checklist label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.column-article-body ul.checklist input{flex:none;width:18px;height:18px;margin-top:8px;accent-color:var(--ink)}
.column-article-body ul.checklist input:checked+span{color:#8a8a8a;text-decoration:line-through}
/* 執筆者カード（features と共通） */
.column-author-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 44px;
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.column-author-portrait {
  width: 112px;
  height: 112px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #f1ece9;
}

.column-author-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column-article-shell .column-author-copy p {
  margin: 0;
}

.column-article-shell .column-author-role {
  color: var(--accent-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

.column-article-shell .column-author-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 7px;
  font-size: 13px;
}

.column-author-name strong {
  font-family: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 25px;
  line-height: 1.35;
}

.column-author-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  text-underline-offset: 4px;
}

@media (max-width: 560px) {
  .column-author-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 17px;
    margin-top: 36px;
    padding: 21px 0;
  }

  .column-author-portrait {
    width: 88px;
    height: 88px;
  }

  .column-author-name {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  .column-author-name strong {
    font-size: 22px;
  }
}

@media(max-width:640px){.columns-page .spire-category-art{height:220px;min-height:220px}.columns-page .spire-category-note{left:16px;right:auto}}
.column-article-body th:first-child,.column-article-body td:first-child{min-width:6em}
.columns-page .column-card--visual a{padding-right:0}

/* 読み進める流れを保ち、図は必要なときに拡大する。 */
.feature-toc{margin:32px auto 40px;padding:20px 24px;border-top:1px solid #bcdce9;border-bottom:1px solid #bcdce9;background:#f5fafc}
.feature-toc summary{font-size:14px;line-height:1.6;color:#245b73}
.feature-toc li{font-size:13px;line-height:1.8}
.feature-image-link{position:relative;display:block;text-decoration:none;line-height:0}
.feature-image-link:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.feature-image-hint{position:absolute;right:8px;bottom:8px;padding:7px 10px;background:rgba(255,255,255,.94);border:1px solid #d1dce1;border-radius:3px;color:#245b73;font-size:11px;line-height:1.5}
.column-article-body h2{border-color:#c5d9e2;color:#254957}
.feature-body-figure figcaption{max-width:650px;margin:13px auto 0;text-align:left;font-size:13px}
.column-article-body>p:first-child{margin-top:4px}
.column-article-body a:not(.feature-image-link){text-underline-offset:4px}
@media(max-width:640px){.feature-body-figure{margin-left:-20px;margin-right:-20px}.feature-body-figure figcaption{padding:0 20px}.column-article-head h1{font-size:30px;line-height:1.65}.feature-image-hint{font-size:10px}.feature-toc ol{padding-left:20px}.feature-toc li{font-size:13px}}