/* ═══════════════════════════════════════════
   VISIBLE LABO theme.css — ブログ・記事（全ページ共通クローム）
   ダーク基調 / 長文可読性チューニング
   記事本文だけ白背景にしたくなったら、
   .vl-article-body の --bg / --text を差し替えるだけで切替可能。
   ═══════════════════════════════════════════ */
:root {
  --vl-bg: #0C0C0E;
  --vl-bg-soft: #121214;
  --vl-bg-card: #101013;
  --vl-text: #E9E8E3;        /* 長文向けに純白よりわずかに落とす */
  --vl-text-strong: #F4F3EE;
  --vl-sub: #97968E;
  --vl-hairline: rgba(244,243,238,0.12);
  --vl-hairline-soft: rgba(244,243,238,0.07);
  --vl-yellow: #FFD600;
  --vl-yellow-dim: rgba(255,214,0,0.5);
  --vl-font: 'IBM Plex Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --vl-mono: 'IBM Plex Mono', monospace;
  --vl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* front-page は front.css が担当。ここでは blog 側にのみ効かせるため
   body.home 以外を対象にベースを敷く */
body:not(.home) {
  margin: 0;
  background: var(--vl-bg);
  color: var(--vl-text);
  font-family: var(--vl-font);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}

/* ─── ナビ（ブログ側）─── */
.vl-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 44px;
  border-bottom: 1px solid var(--vl-hairline-soft);
  background: var(--vl-bg);
}
.vl-logo {
  font-family: var(--vl-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--vl-text-strong);
  text-decoration: none;
}
.vl-logo span { color: var(--vl-yellow); }
.vl-nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
}
.vl-nav-links a {
  font-family: var(--vl-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--vl-sub);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
}
.vl-nav-links a:hover { color: var(--vl-text-strong); }
.vl-nav-links a.vl-nav-cta {
  color: #0C0C0E;
  background: var(--vl-yellow);
  padding: 9px 20px;
  font-weight: 500;
}
a:focus-visible { outline: 2px solid var(--vl-yellow); outline-offset: 3px; }

/* ─── レイアウト ─── */
.vl-main { min-height: 60vh; }
.vl-container {
  width: min(760px, 92%);
  margin: 0 auto;
  padding: 80px 0 110px;
}

/* ─── アーカイブ ─── */
.vl-label {
  font-family: var(--vl-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  color: var(--vl-sub);
  text-transform: uppercase;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vl-label::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--vl-yellow);
}
.vl-archive-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--vl-text-strong);
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.vl-archive-lead {
  color: var(--vl-sub);
  font-weight: 300;
  font-size: 0.95rem;
  margin: 0 0 56px;
}
.vl-post-list { display: grid; gap: 1px; background: var(--vl-hairline-soft); border-top: 1px solid var(--vl-hairline-soft); border-bottom: 1px solid var(--vl-hairline-soft); }
.vl-post-card { background: var(--vl-bg); transition: background 0.3s; }
.vl-post-card:hover { background: var(--vl-bg-card); }
.vl-post-link {
  display: block;
  padding: 30px 6px;
  text-decoration: none;
  color: inherit;
}
.vl-post-meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: var(--vl-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.vl-post-date { color: var(--vl-sub); }
.vl-post-cat { color: var(--vl-yellow); text-decoration: none; text-transform: uppercase; }
.vl-post-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vl-text-strong);
  margin: 0 0 8px;
  line-height: 1.6;
}
.vl-post-excerpt {
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--vl-sub);
  margin: 0;
}
.vl-empty { color: var(--vl-sub); font-weight: 300; }

.vl-pagination { margin-top: 50px; font-family: var(--vl-mono); font-size: 0.75rem; }
.vl-pagination .nav-links { display: flex; gap: 14px; }
.vl-pagination a, .vl-pagination .current {
  color: var(--vl-sub);
  text-decoration: none;
  padding: 8px 13px;
  border: 1px solid var(--vl-hairline-soft);
}
.vl-pagination a:hover { color: var(--vl-text-strong); border-color: var(--vl-hairline); }
.vl-pagination .current { color: #0C0C0E; background: var(--vl-yellow); border-color: var(--vl-yellow); }

/* ─── 記事 ─── */
.vl-article-container { width: min(720px, 92%); }
.vl-article-head { margin-bottom: 40px; }
.vl-article-title {
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  font-weight: 700;
  color: var(--vl-text-strong);
  line-height: 1.65;
  letter-spacing: 0.02em;
  margin: 14px 0 0;
}
.vl-article-thumb { margin: 0 0 40px; }
.vl-article-thumb img { width: 100%; height: auto; display: block; border: 1px solid var(--vl-hairline-soft); }

/* 本文タイポグラフィ — 長文可読性の中核 */
.vl-article-body {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.015em;
}
.vl-article-body > * { margin: 0 0 1.6em; }
.vl-article-body strong { color: var(--vl-text-strong); font-weight: 500; }
.vl-article-body a { color: var(--vl-yellow); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vl-yellow-dim); }
.vl-article-body a:hover { text-decoration-color: var(--vl-yellow); }

.vl-article-body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--vl-text-strong);
  line-height: 1.7;
  margin: 2.6em 0 1em;
  padding-left: 16px;
  border-left: 3px solid var(--vl-yellow);
}
.vl-article-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--vl-text-strong);
  margin: 2.2em 0 0.9em;
}
.vl-article-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--vl-text-strong);
  margin: 2em 0 0.8em;
}

.vl-article-body ul, .vl-article-body ol { padding-left: 1.5em; }
.vl-article-body li { margin-bottom: 0.5em; }

.vl-article-body blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--vl-hairline);
  color: var(--vl-sub);
}

.vl-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 2em 0;
}
.vl-article-body th, .vl-article-body td {
  border: 1px solid var(--vl-hairline-soft);
  padding: 10px 14px;
  text-align: left;
}
.vl-article-body th {
  background: var(--vl-bg-soft);
  color: var(--vl-text-strong);
  font-weight: 500;
  font-family: var(--vl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.vl-article-body code {
  font-family: var(--vl-mono);
  font-size: 0.88em;
  background: var(--vl-bg-soft);
  border: 1px solid var(--vl-hairline-soft);
  padding: 0.1em 0.45em;
  border-radius: 3px;
}
.vl-article-body pre {
  background: var(--vl-bg-soft);
  border: 1px solid var(--vl-hairline-soft);
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.7;
}
.vl-article-body pre code { background: none; border: none; padding: 0; }

.vl-article-body img { max-width: 100%; height: auto; }
.vl-article-body figcaption {
  font-size: 0.78rem;
  color: var(--vl-sub);
  font-family: var(--vl-mono);
  letter-spacing: 0.06em;
  margin-top: 8px;
}

.vl-article-foot {
  margin-top: 70px;
  padding-top: 30px;
  border-top: 1px solid var(--vl-hairline-soft);
}
.vl-back {
  font-family: var(--vl-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--vl-sub);
  text-decoration: none;
}
.vl-back:hover { color: var(--vl-yellow); }

/* ─── フッター ─── */
.vl-footer {
  border-top: 1px solid var(--vl-hairline-soft);
  padding: 46px 0;
  background: var(--vl-bg);
}
.vl-footer-inner {
  width: min(1160px, 92%);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.vl-copy {
  font-family: var(--vl-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--vl-sub);
}

/* ─── レスポンシブ ─── */
@media (max-width: 760px) {
  .vl-nav { padding: 18px 20px; }
  .vl-nav-links { gap: 16px; }
  .vl-nav-links li:nth-child(2) { display: none; }
  .vl-container { padding: 56px 0 90px; }
  .vl-article-body { font-size: 0.98rem; line-height: 2.05; }
}

/* ═══════════════════════════════════════════
   Contact Form 7 — ブランド統一スタイル
   （トップ・固定ページ共通で効く。scopeなし）
   ═══════════════════════════════════════════ */
.vl-cf7 .wpcf7 form,
.wpcf7 form.vl-form {
  display: grid;
  gap: 18px;
}
.wpcf7 .vl-field label {
  font-family: var(--vl-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--vl-sub);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.wpcf7 .vl-field input[type="text"],
.wpcf7 .vl-field input[type="email"],
.wpcf7 .vl-field select,
.wpcf7 .vl-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--vl-bg-card);
  border: 1px solid var(--vl-hairline);
  color: var(--vl-text-strong);
  font-family: var(--vl-font);
  font-size: 0.9rem;
  font-weight: 300;
  padding: 14px 16px;
  border-radius: 0;
}
.wpcf7 .vl-field textarea { min-height: 130px; resize: vertical; }
.wpcf7 .vl-field select { appearance: none; }
.wpcf7 .vl-field input:focus,
.wpcf7 .vl-field select:focus,
.wpcf7 .vl-field textarea:focus {
  outline: 2px solid var(--vl-yellow);
  outline-offset: 1px;
  border-color: var(--vl-yellow);
}
.wpcf7 input[type="submit"] {
  font-family: var(--vl-font);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 15px 34px;
  background: var(--vl-yellow);
  color: #0C0C0E;
  border: 1px solid var(--vl-yellow);
  cursor: pointer;
  justify-self: start;
  transition: background 0.3s;
}
.wpcf7 input[type="submit"]:hover { background: #FFE04D; }
.wpcf7 input[type="submit"]:disabled { opacity: 0.55; cursor: wait; }
.wpcf7 .wpcf7-spinner { margin-left: 12px; }

/* バリデーション・応答メッセージ */
.wpcf7 .wpcf7-not-valid-tip {
  font-size: 0.74rem;
  color: #FF8A80;
  margin-top: 6px;
  display: block;
}
.wpcf7 form .wpcf7-response-output {
  margin: 8px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--vl-hairline);
  font-size: 0.85rem;
  color: var(--vl-text-strong);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--vl-yellow);
  background: rgba(255, 214, 0, 0.08);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #FF8A80;
}