/* maneql / オープンイノベーション大学公式ブログ — static rebuild stylesheet.
 *
 * Written from scratch to match the rendered appearance of the old Diver theme.
 * Every value here was measured off content-bundle/design-ref/{front,article}.html
 * with getComputedStyle; none of Diver's markup, class names or CSS was copied.
 * Reference values are noted where a number would otherwise look arbitrary.
 *
 * Content-side hooks are the three classes the sanitizer preserved —
 * ul.ref, blockquote.tweet, div.yt-embed — plus the classes this build adds
 * around content it derives itself (post TOC, speech balloons, table scroll).
 */

/* ---------- tokens ---------- */

:root {
  --page-bg: #efefef;          /* body */
  --card-bg: #fff;
  --ink: #333;                 /* chrome text */
  --ink-content: #000;         /* article body */
  --ink-muted: #666;
  --ink-soft: #6b6b6b;
  --line: #ccc;
  --line-soft: #eee;
  --accent: #008bbb;           /* h2 bar */
  --accent-alt: #607d8b;       /* current page, plain h2 */
  --link: #0044cc;
  --card-shadow: 0 0 5px rgba(150, 150, 150, 0.2);

  --font: 游ゴシック体, "游ゴシック Medium", "Yu Gothic Medium", YuGothic,
    "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  --container: 1140px;
  --sidebar: 300px;
  --col-gap: 20px;
  --card-pad: 60px;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: 1rem; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
:where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 20;
  padding: 0.6em 1em;
  background: #fff;
  color: var(--ink);
  font-size: 0.875rem;
  translate: 0 -200%;
}
.skip-link:focus { translate: 0; }

/* ---------- site header (black bar, 85px) ---------- */

.site-header {
  background: #000;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.site-header__inner {
  display: flex;
  align-items: stretch;
  max-width: var(--container);
  min-height: 85px;
  margin-inline: auto;
}
.site-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding-inline: 10px;
  margin-inline-end: auto;
  text-decoration: none;
}
.site-logo__eyebrow {
  align-self: start;
  padding: 1px 18px;
  border-radius: 999px;
  background: #f39800;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
}
.site-logo__name {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.header-links {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 101px;
  block-size: 100%;
  padding: 0 6px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.header-links li:last-child a { border-inline-end: 1px solid rgba(255, 255, 255, 0.25); }
.header-links a:hover { background: #1a1a1a; }

/* ---------- global nav (white bar) ---------- */

.gnav { background: #fff; }
.gnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.gnav a {
  display: block;
  padding: 12px 18px;
  color: #505050;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.gnav a:hover { color: var(--accent); }
.gnav [aria-current] { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }

/* ---------- layout ---------- */

.shell {
  display: flex;
  align-items: flex-start;
  gap: var(--col-gap);
  max-width: var(--container);
  margin-inline: auto;
  padding-block: 10px 40px;
}
.col-main { flex: 1 1 auto; min-width: 0; }
.col-side { flex: 0 0 var(--sidebar); inline-size: var(--sidebar); }

.card {
  margin-block-end: 10px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.card--pad { padding: 20px; }
.card--pad p { margin: 0 0 1em; }

/* ---------- breadcrumb ---------- */

.crumbs {
  padding: 10px 20px;
  font-size: 0.8rem;
  color: var(--ink);
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li:not(:last-child)::after { content: "›"; margin-inline-start: 6px; color: #999; }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-muted); }

/* ---------- article header ---------- */

.post-head { padding: 32px var(--card-pad) 0; }

.chips { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.chips a, .chips span {
  display: inline-block;
  margin: 5px 5px 0 0;
  padding: 3.84px 6.4px;
  border-radius: 2px;
  font-size: 0.8rem;
  line-height: 1.6;
  text-decoration: none;
}
.chip--cat > :is(a, span) { background: #828282; color: #fff; }
.chip--tag > :is(a, span) { background: var(--page-bg); color: var(--ink); }
.chips a:hover { filter: brightness(0.92); }

.post-title {
  margin: 10px 0;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
}
.post-date { color: var(--ink); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.post-date + .post-date { margin-inline-start: 12px; }

/* The eyecatch runs edge to edge across the card, outside the 60px gutter. */
.post-hero {
  display: block;
  inline-size: calc(100% + var(--card-pad) * 2);
  max-inline-size: none;          /* overrides the global img max-width */
  margin: 20px calc(var(--card-pad) * -1) 0;
  background: var(--line-soft);
}

.notice {
  margin: 20px var(--card-pad) 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: #fffbe6;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ---------- article body ----------
 * 18px/27px with a 3.6px paragraph margin, exactly as the theme had it. The
 * gaps between paragraphs come from the editor's own <p>&nbsp;</p> and <br>
 * spacers, which are left in place for that reason.
 */

.post-body {
  padding: 20px var(--card-pad) var(--card-pad);
  color: var(--ink-content);
  font-size: 1.125rem;
  line-height: 1.5;
}

.post-body p { margin: 0 0 3.6px; }

.post-body h2 {
  margin: 25.2px calc(var(--card-pad) * -1 + 34.8px);
  padding: 12.6px 25.2px;
  background: var(--accent);
  color: #fff;
  font-size: 1.575rem;
  font-weight: 700;
  line-height: 1.5;
  scroll-margin-block-start: 10px;
}
.post-body h3 {
  margin: 21.06px 0;
  font-size: 1.3163rem;
  font-weight: 700;
  line-height: 1.28;
}
.post-body h4 { margin: 23.94px 0; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.post-body h5 { margin: 24.95px 0; font-size: 0.9338rem; font-weight: 700; line-height: 1.8; }

.post-body :is(ul, ol) { margin: 0 0 3.6px; padding-inline-start: 27px; line-height: 2; }
.post-body li { line-height: 1.5; }

.post-body a { color: var(--link); font-weight: 600; text-decoration: underline; }
.post-body a:hover { text-decoration: none; }

.post-body strong { font-weight: 700; }

.post-body img {
  display: block;
  margin: 0 auto 15px;
}

.post-body hr { margin: 9px 0; border: 0; border-block-start: 1px solid var(--line); }

.post-body blockquote {
  margin: 18px 40px;
  padding: 0;
}

.post-body table {
  inline-size: 100%;
  margin: 0 0 3.6px;
  border-collapse: collapse;
  border: 1px solid var(--line);
}
.post-body :is(th, td) { padding: 8px 12px; border: 1px solid var(--line); text-align: start; vertical-align: top; }
.post-body th { background: #f9f9f9; font-weight: 700; }
.table-scroll { overflow-x: auto; margin-block: 10px; scrollbar-width: thin; }
.table-scroll > table { margin: 0; }

/* ---------- 目次 ---------- */

.post-toc {
  margin: 36px 0;
  border: 5px solid var(--ink-soft);
  border-radius: 2px;
  background: #fff;
  color: var(--ink-muted);
}
.post-toc__title {
  margin: 0;
  padding: 0 23.4px;
  background: var(--ink-soft);
  color: #fff;
  font-size: 1.4625rem;
  font-weight: 700;
  line-height: 1.5;
}
.post-toc ol {
  margin: 0;
  padding: 18px 27px;
  list-style: none;
  counter-reset: toc;
}
.post-toc li {
  margin-block-end: 18px;
  counter-increment: toc;
  line-height: 1.3;
}
.post-toc li:last-child { margin-block-end: 0; }
.post-toc a {
  color: var(--ink-soft);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}
.post-toc a:hover { text-decoration: underline; }
.post-toc a::before {
  content: counter(toc) ".";
  display: inline-grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: #bcbcbc;
  color: #fff;
  font-size: 0.7rem;
  vertical-align: 2px;
}

/* ---------- 吹き出し ---------- */

.voice {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 18px 0;
}
.voice__icon { flex: none; inline-size: 70px; text-align: center; }
.voice__icon img {
  display: block;
  inline-size: 70px;
  block-size: 70px;
  margin: 0;
  border: 2px solid var(--line-soft);
  border-radius: 50%;
  object-fit: cover;
}
.voice__name { display: block; margin-block-start: 2px; font-size: 0.9em; line-height: 1.4; }
.voice__text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin-block-start: 10px;
  padding: 8.1px 16.2px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9em;
  line-height: 1.667;
}
.voice__text > :is(p, ul, ol):last-child { margin-block-end: 0; }
/* tail: outer triangle in the border colour, inner one in the fill */
.voice__text::before,
.voice__text::after {
  content: "";
  position: absolute;
  inset-block-start: 10px;
  inline-size: 0;
  block-size: 0;
  border-block: 8px solid transparent;
  border-inline-end: 11px solid var(--line);
  border-inline-start: 0;
  inset-inline-start: -22px;
}
.voice__text::after {
  inset-block-start: 13px;
  inset-inline-start: -16px;
  border-block-width: 5px;
  border-inline-end: 8px solid #fff;
}

/* ---------- ul.ref (related-reading list left in the content) ---------- */

.post-body ul.ref {
  margin: 10px 0 18px;
  padding: 14px 18px 14px 40px;
  border: 2px solid var(--line-soft);
  border-inline-start: 5px solid var(--accent);
  background: #fafafa;
  list-style: none;
  line-height: 1.6;
}
.post-body ul.ref li { position: relative; margin-block-end: 6px; font-size: 1rem; }
.post-body ul.ref li:last-child { margin-block-end: 0; }
.post-body ul.ref li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: -18px;
  inline-size: 0;
  block-size: 0;
  border-block: 5px solid transparent;
  border-inline-start: 7px solid var(--accent);
}
.post-body ul.ref a { color: var(--link); }

/* ---------- blockquote.tweet ---------- */

.post-body blockquote.tweet {
  margin: 18px 0;
  padding: 14px 18px;
  border: 1px solid #cfd9de;
  border-radius: 12px;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
}
.post-body blockquote.tweet p { margin-block-end: 8px; }
.post-body blockquote.tweet a { color: #536471; font-weight: 400; }

/* ---------- div.yt-embed ---------- */

.post-body .yt-embed { margin: 18px 0; }
.post-body .yt-embed a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fafafa;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.post-body .yt-embed a:hover { border-color: #cc0000; color: #cc0000; }
.post-body .yt-embed a::before {
  content: "";
  flex: none;
  inline-size: 44px;
  block-size: 31px;
  border-radius: 6px;
  background: #f00;
}
.post-body .yt-embed a::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 40px;
  translate: -35% -50%;
  border-block: 7px solid transparent;
  border-inline-start: 11px solid #fff;
  border-inline-end: 0;
}

/* ---------- related posts ---------- */

.related { padding: 0 var(--card-pad) var(--card-pad); }
.related__title {
  margin: 15px 0 0;
  padding: 10px;
  border-block-end: 1px solid var(--line-soft);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
}
.related__title b { color: var(--link); font-weight: 400; }
.related__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 30px;
  margin: 0;
  padding: 10px;
  list-style: none;
}
.related__list a {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0 12px;
  color: var(--ink);
  text-decoration: none;
}
.related__list img,
.related__thumb {
  grid-row: span 2;
  inline-size: 130px;
  aspect-ratio: 4 / 3;
  background: var(--line-soft);
  object-fit: cover;
}
.related__list b { align-self: end; font-size: 0.875rem; font-weight: 700; line-height: 1.5; }
.related__list a:hover b { color: var(--link); text-decoration: underline; }
.related__list time { align-self: start; color: var(--ink); font-size: 0.75rem; }

/* ---------- prev / next ---------- */

.post-nav {
  display: grid;
  gap: 10px;
  padding: 0 var(--card-pad) var(--card-pad);
}
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
}
.post-nav a:hover { border-color: var(--accent); color: var(--link); }
.post-nav b { display: block; margin-block-end: 4px; color: var(--ink-muted); font-size: 0.7rem; font-weight: 700; }
.post-nav .is-next { text-align: end; }

/* ---------- section title ---------- */

.section-title {
  margin: 0 0 10px;
  padding: 10px 20px;
  background: #fff;
  box-shadow: var(--card-shadow);
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
}
.section-title small { margin-inline-start: 10px; color: var(--ink-muted); font-size: 0.8rem; font-weight: 400; }

/* ---------- post card grid ---------- */

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -3px -3px 10px;
  padding: 0;
  list-style: none;
}
.grid > li { inline-size: 33.3333%; padding: 4px; }
.grid__inner {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.grid__thumb {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  background: var(--line-soft);
  object-fit: cover;
}
.grid__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 8px 10px 10px; }
.grid__cats { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 2px; padding: 0; list-style: none; }
.grid__cats a {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 0.6rem;
  line-height: 1.6;
  text-decoration: none;
}
.grid__cats .is-cat a { background: #000; color: #fff; }
.grid__cats .is-tag a { background: var(--line-soft); color: #000; }
.grid__title {
  margin: 0;
  padding: 5px 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}
.grid__title a { color: #333355; text-decoration: none; }
.grid__title a:hover { color: var(--link); text-decoration: underline; }
.grid__excerpt { margin: 0; color: var(--ink); font-size: 0.75rem; line-height: 1.6; }
.grid__date { margin-block-start: auto; padding-block-start: 8px; color: var(--ink); font-size: 0.75rem; }

/* ---------- pagination ---------- */

.pager { margin: 0 0 10px; padding: 0; text-align: center; }
.pager a, .pager span {
  display: inline-block;
  min-inline-size: 53px;
  margin: 0 3px 6px;
  padding: 12px 22px;
  border-radius: 3px;
  background: #afafaf;
  color: #fff;
  text-decoration: none;
}
.pager a:hover { background: #8d8d8d; }
.pager [aria-current="page"] { background: var(--accent-alt); font-weight: 700; }
.pager .pager__gap { background: transparent; color: var(--ink-muted); min-inline-size: 0; padding-inline: 6px; }

/* ---------- sidebar ---------- */

.widget {
  margin-block-end: 10px;
  padding: 10px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.widget__title {
  margin: -10px -10px 10px;
  padding: 8px 15px;
  background: #000;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}
.widget--profile { text-align: center; }
.profile__name { margin: 8px 0 10px; font-size: 1.125rem; font-weight: 700; }
.profile__text { margin: 0; font-size: 0.875rem; line-height: 1.8; text-align: start; }
.profile__logo {
  display: grid;
  place-items: center;
  inline-size: 84px;
  block-size: 84px;
  margin-inline: auto;
  border-radius: 50%;
  background: #000;
  color: #f39800;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.3;
}

.taglist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.taglist a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  color: var(--ink);
  font-size: 0.8rem;
  text-decoration: none;
}
.taglist a:hover { border-color: var(--accent); color: var(--link); }
.taglist b { color: var(--ink-muted); font-weight: 400; }

.minilist { margin: 0; padding: 0; list-style: none; }
.minilist li + li { border-block-start: 1px solid var(--line-soft); }
.minilist a {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0 10px;
  padding: 8px 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.5;
  text-decoration: none;
}
.minilist img, .minilist .minilist__thumb {
  inline-size: 70px;
  aspect-ratio: 4 / 3;
  background: var(--line-soft);
  object-fit: cover;
}
.minilist a:hover span { color: var(--link); text-decoration: underline; }

/* ---------- footer ---------- */

.site-footer {
  padding-block: 40px 20px;
  border-block-start: 1px solid var(--line-soft);
  background: #fff;
}
.site-footer__inner {
  display: grid;
  gap: 30px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 10px;
}
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; } }
.site-footer h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 400; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links a {
  display: block;
  padding: 14px 4px;
  border-block-end: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: none;
}
.footer-links li:first-child a { border-block-start: 1px solid var(--line-soft); }
.footer-links a:hover { color: var(--link); }
.site-footer p { margin: 0 0 1em; font-size: 0.875rem; line-height: 1.7; }
.site-copy {
  max-width: var(--container);
  margin: 30px auto 0;
  padding-inline: 10px;
  color: var(--ink);
  font-size: 0.8rem;
  text-align: end;
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .shell, .site-header__inner, .gnav ul, .site-footer__inner, .site-copy { padding-inline: 10px; }
}
@media (max-width: 1024px) {
  .shell { flex-direction: column; }
  .col-side { flex-basis: auto; inline-size: 100%; }
  .grid > li { inline-size: 50%; }
}
@media (max-width: 768px) {
  :root { --card-pad: 18px; }
  .post-body { font-size: 1.0625rem; }
  .post-body h2 { margin-inline: -18px; padding: 10px 18px; font-size: 1.3rem; }
  .post-title { font-size: 1.3rem; }
  .site-logo__name { font-size: 1.1rem; }
  .header-links a { inline-size: 74px; font-size: 0.65rem; }
  .related__list { grid-template-columns: 1fr; }
  .voice { gap: 16px; }
}
@media (max-width: 560px) {
  .grid > li { inline-size: 100%; }
  .pager a, .pager span { min-inline-size: 42px; padding: 10px 14px; }
}

/* ---------- print ---------- */

@media print {
  body { background: #fff; }
  .site-header, .gnav, .col-side, .site-footer, .post-nav, .pager, .crumbs, .related { display: none; }
  .card { box-shadow: none; }
}