/* ===================================================================
   hp-theme.css — CHIYUU ブログの単一スタイルシート。
   HP（コーポレートサイト）と同じデザイン言語で、サイトの「外装」
   (ヘッダー / フッター / カード / Hero / アーカイブ) と
   記事本文(.page-content の Gutenberg ブロック) の両方を完結して定義する。
   Bootstrap(theme.min.css) / Boxicons(boxicons.min.css) には依存しない
   ── アイコンはインライン SVG、本文タイポグラフィ・テーブル・
   ページネーション等もすべて当ファイルで自己完結。
   命名は cy- 接頭辞で統一。
   =================================================================== */

/* ---------- reset (Bootstrap reboot の代替・最小限) ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; }
button{ font-family:inherit; font-size:inherit; line-height:inherit; }
img,svg,video,canvas{ display:block; max-width:100%; }
table{ border-collapse:collapse; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* PC 専用表示（旧 Bootstrap d-none d-lg-block の置き換え） */
.cy-pc-only{ display:none; }
@media (min-width:1024px){ .cy-pc-only{ display:block; } }

:root{
  --brand:#004385;
  --brand-rgb:0 67 133;
  --brand-600:#00366c;
  --brand-700:#002952;
  --accent:#2e9fe0;
  --accent-rgb:46 159 224;
  --ink:#0b0f19;
  --body:#565973;
  --muted:#9397ad;
  --line:#e6eaf3;
  --surface:#f5f8fd;
  --sans:'Manrope','Noto Sans JP',sans-serif;
  --jp:'Noto Sans JP',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --max:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
body{
  font-family:var(--sans);
  color:var(--body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.page-wrapper, .page-wrapper{ padding-top:0; }
.cy-jp{ font-family:var(--jp); }
.cy-mono{ font-family:var(--mono); }
a{ text-decoration:none; }
img{ max-width:100%; }
.cy-container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:1024px){ .cy-container{ padding-inline:2rem; } }

/* push content below fixed header — Hero 側で余白を確保するため 0 */
.cy-main{ padding-top:0; }

/* ---------- eyebrow ---------- */
.cy-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brand); font-weight:500;
}
.cy-eyebrow::before{ content:""; width:26px; height:1px; background:var(--brand); opacity:.5; }
.cy-eyebrow.center{ justify-content:center; }

/* gradient ruled grid / blob (hero decoration) */
.cy-grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,67,133,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,67,133,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 30%,transparent 75%);
}
.cy-blob{ position:absolute; border-radius:9999px; filter:blur(60px); opacity:.5; pointer-events:none; }

/* ===================================================================
   HEADER / NAV  （HP と同じデザイン）
   =================================================================== */
.cy-header{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  transition:all .3s ease;
}
.cy-header.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 24px -16px rgba(11,15,25,.35);
}
.cy-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; transition:height .3s ease;
}
.cy-header.scrolled .cy-header__inner{ height:62px; }
.cy-brand{ display:flex; align-items:center; flex:none; }
.cy-brand img{ height:32px; width:auto; }

.cy-nav{ display:none; align-items:center; gap:.25rem; }
@media (min-width:1024px){ .cy-nav{ display:flex; } }
.cy-nav-link{
  position:relative; padding:.5rem .9rem; font-size:.9rem; font-weight:700;
  color:#1c2233; border-radius:9999px; transition:color .2s, background .2s;
  display:inline-flex; align-items:center; gap:.3rem; background:none; border:none; cursor:pointer;
  font-family:var(--sans);
}
.cy-nav-link:hover{ color:var(--brand); background:rgba(0,67,133,.06); }
.cy-nav-link.active{ color:var(--brand); }
.cy-nav-link svg{ width:.85rem; height:.85rem; opacity:.6; transition:transform .25s; }

/* dropdown (サービス内容) */
.cy-dd{ position:relative; }
.cy-dd__panel{
  position:absolute; left:0; top:100%; padding-top:.75rem;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:all .2s ease;
}
.cy-dd:hover .cy-dd__panel{ opacity:1; visibility:visible; transform:none; }
.cy-dd:hover .cy-nav-link svg{ transform:rotate(180deg); }
.cy-dd__inner{
  width:18rem; border:1px solid var(--line); background:#fff;
  border-radius:1rem; box-shadow:0 24px 50px -28px rgba(11,15,25,.4); padding:.5rem;
}
.cy-dd__item{
  display:block; padding:.65rem .85rem; border-radius:.75rem;
  font-size:.875rem; font-weight:600; color:#33384a; transition:all .15s;
}
.cy-dd__item:hover{ background:var(--brand); color:#fff; }

/* お問い合わせ pill */
.cy-cta-btn{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  border-radius:9999px; background:var(--brand); color:#fff;
  padding:.62rem 1.25rem; font-size:.875rem; font-weight:700;
  box-shadow:0 12px 26px -12px rgba(var(--brand-rgb),.6);
  transition:transform .25s var(--ease), background .25s;
  margin-left:.6rem;
}
.cy-cta-btn:hover{ background:var(--brand-600); color:#fff; transform:translateY(-2px); }
.cy-cta-btn svg{ width:1rem; height:1rem; }

.cy-burger{
  display:flex; flex-direction:column; gap:5px; padding:.5rem; background:none; border:none; cursor:pointer;
}
@media (min-width:1024px){ .cy-burger{ display:none; } }
.cy-burger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }

/* mobile slide-in */
.cy-mobile{ position:fixed; inset:0; z-index:1060; display:none; }
.cy-mobile.open{ display:block; }
.cy-mobile__ov{ position:absolute; inset:0; background:rgba(11,15,25,.4); backdrop-filter:blur(4px); }
.cy-mobile__panel{
  position:absolute; right:0; top:0; height:100%; width:82%; max-width:24rem;
  background:#fff; box-shadow:-30px 0 80px -40px rgba(11,15,25,.6);
  padding:1.75rem; display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(100%); transition:transform .4s var(--ease);
}
.cy-mobile.open .cy-mobile__panel{ transform:none; }
.cy-mobile__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.cy-mobile__head img{ height:28px; }
.cy-mobile__close{ background:none; border:none; padding:.5rem; cursor:pointer; color:var(--ink); }
.cy-mobile__label{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.cy-mobile__links{ display:flex; flex-direction:column; font-family:var(--jp); font-weight:700; color:var(--ink); }
.cy-mobile__links.sub{ margin-bottom:1.25rem; }
.cy-mobile__links a{ padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--ink); font-size:1.05rem; }
.cy-mobile__links.sub a{ font-size:.95rem; padding:.6rem 0; }
.cy-mobile .cy-cta-btn{ margin:auto 0 0; justify-content:center; padding:.95rem; font-size:1rem; }

/* ===================================================================
   HERO (アーカイブ / 一覧 / 単記事ヘッダー)
   =================================================================== */
.cy-hero{
  position:relative; overflow:hidden;
  padding-top:148px; padding-bottom:60px;
  background:linear-gradient(180deg,#f5f8fd 0%,#ffffff 100%);
  border-bottom:1px solid var(--line);
}
@media (min-width:1024px){ .cy-hero{ padding-top:172px; padding-bottom:76px; } }
.cy-hero__in{ position:relative; }
.cy-crumb{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted); margin-bottom:1.5rem;
}
.cy-crumb a{ color:var(--muted); transition:color .2s; }
.cy-crumb a:hover{ color:var(--brand); }
.cy-crumb .sep{ opacity:.5; }
.cy-crumb .cur{ color:var(--brand); }
.cy-hero h1{
  font-family:var(--jp); font-weight:800; color:var(--ink);
  letter-spacing:-.01em; line-height:1.18;
  font-size:clamp(2rem,5vw,3.2rem); margin:0;
}
.cy-hero__lead{
  font-family:var(--jp); margin-top:1.25rem; max-width:42rem;
  color:var(--body); line-height:1.85; font-size:1.02rem;
}

/* ===================================================================
   SECTION HEADINGS
   =================================================================== */
.cy-section{ padding-block:4rem; }
@media (min-width:1024px){ .cy-section{ padding-block:5.5rem; } }
.cy-kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); font-weight:500; margin-bottom:.7rem;
}
.cy-kicker::before{ content:""; width:24px; height:1px; background:var(--brand); opacity:.5; }
.cy-h2{ font-family:var(--jp); font-weight:800; color:var(--ink); letter-spacing:-.01em; font-size:clamp(1.5rem,3.2vw,2rem); margin:0; }

/* ===================================================================
   POST CARDS (一覧 / アーカイブ)
   =================================================================== */
.cy-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .cy-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .cy-grid{ grid-template-columns:repeat(3,1fr); } }

.cy-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:1.25rem; overflow:hidden;
  box-shadow:0 1px 2px rgba(11,15,25,.03);
  transition:transform .4s var(--ease), box-shadow .4s, border-color .3s;
}
.cy-card:hover{ transform:translateY(-8px); box-shadow:0 26px 54px -34px rgba(var(--brand-rgb),.4); border-color:rgba(var(--brand-rgb),.18); }
.cy-card__media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--accent));
}
.cy-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.cy-card:hover .cy-card__media img{ transform:scale(1.06); }
.cy-card__ph{
  position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.9);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px),
    linear-gradient(135deg,var(--brand),var(--accent));
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
}
.cy-card__body{ flex:1; display:flex; flex-direction:column; padding:1.4rem 1.4rem 1.5rem; }
.cy-card__meta{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.cy-card__date{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.cy-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; font-weight:500;
  color:var(--brand); background:rgba(var(--brand-rgb),.08);
  border:1px solid rgba(var(--brand-rgb),.14); border-radius:9999px; padding:.26rem .65rem;
  white-space:nowrap; transition:all .2s;
}
a.cy-badge:hover{ background:var(--brand); color:#fff; }
.cy-card__title{
  font-family:var(--jp); font-size:1.02rem; font-weight:800; color:var(--ink);
  line-height:1.5; margin:0 0 .55rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .2s;
}
.cy-card:hover .cy-card__title{ color:var(--brand); }
.cy-card__excerpt{
  font-family:var(--jp); font-size:.86rem; color:var(--body); line-height:1.8; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.cy-card__more{
  margin-top:auto; padding-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.84rem; font-weight:700; color:var(--brand);
}
.cy-card__more svg{ width:1rem; height:1rem; transition:transform .35s var(--ease); }
.cy-card:hover .cy-card__more svg{ transform:translateX(5px); }
/* clickable overlay */
.cy-card__link{ position:absolute; inset:0; z-index:2; }

/* layout: list + sidebar */
.cy-layout{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:1024px){ .cy-layout{ grid-template-columns:minmax(0,1fr) 19rem; gap:3.5rem; } }
.cy-layout--single{ }
@media (min-width:1024px){ .cy-layout--single{ grid-template-columns:minmax(0,1fr) 21rem; } }

/* ===================================================================
   SIDEBAR
   =================================================================== */
.cy-side-card{
  background:#fff; border:1px solid var(--line); border-radius:1.1rem;
  padding:1.4rem 1.4rem; box-shadow:0 1px 2px rgba(11,15,25,.03); margin-bottom:1.5rem;
}
.cy-side-title{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; }
.cy-side-cats{ list-style:none; margin:0; padding:0; }
.cy-side-cats a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--jp); font-weight:700; font-size:.9rem; color:var(--ink);
  padding:.6rem .7rem; border-radius:.6rem; transition:all .2s;
}
.cy-side-cats a:hover{ background:var(--surface); color:var(--brand); }
.cy-side-cats a span.n{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.cy-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cy-tag{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--sans); font-size:.8rem; font-weight:600; color:#4a5170;
  background:#fff; border:1px solid var(--line); border-radius:9999px; padding:.4rem .85rem;
  transition:all .22s var(--ease);
}
.cy-tag:hover{ border-color:rgba(var(--brand-rgb),.4); color:var(--brand); transform:translateY(-2px); }
.cy-tag .h{ font-family:var(--mono); color:var(--accent); }

/* sidebar CTA / product card */
.cy-side-cta{
  position:relative; overflow:hidden; display:block;
  border-radius:1.1rem; padding:1.6rem; margin-bottom:1.5rem; color:#fff;
  background:var(--brand-700);
  box-shadow:0 20px 50px -32px rgba(var(--brand-rgb),.7);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.cy-side-cta:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(var(--brand-rgb),.7); color:#fff; }
/* フッター CTA バンドと同じアニメーション背景（plexus + グリッド） */
.cy-side-cta__plexus{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.6; pointer-events:none; z-index:0;
}
.cy-side-cta__grid{
  position:absolute; inset:0; z-index:0; opacity:.07; pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:34px 34px;
}
.cy-side-cta > h4,
.cy-side-cta > p,
.cy-side-cta > .pill{ position:relative; z-index:1; }
.cy-side-cta h4{ font-family:var(--jp); font-size:1.02rem; font-weight:800; margin:0 0 .5rem; }
.cy-side-cta p{ font-family:var(--jp); font-size:.84rem; line-height:1.8; color:rgba(255,255,255,.82); margin:0 0 1.1rem; }
.cy-side-cta .pill{
  display:inline-flex; align-items:center; gap:.45rem; background:#fff; color:var(--brand);
  font-weight:700; font-size:.82rem; border-radius:9999px; padding:.55rem 1.1rem;
}
.cy-side-cta svg{ width:1rem; height:1rem; }

.cy-product{
  display:block; border:1px solid var(--line); border-radius:1.1rem; overflow:hidden; background:#fff;
  margin-bottom:1.5rem; box-shadow:0 1px 2px rgba(11,15,25,.03);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.cy-product:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -32px rgba(11,15,25,.35); }
.cy-product img{ width:100%; display:block; }
.cy-product span{ display:block; padding:1rem 1.2rem; font-family:var(--jp); font-size:.84rem; color:var(--body); line-height:1.7; }

/* ===================================================================
   PAGINATION（自己完結・Bootstrap 不要）
   =================================================================== */
.pagination{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem; padding-top:2.5rem; margin:0; list-style:none; }
.pagination .page-item{ display:flex; }
.pagination .page-link{
  display:grid; place-items:center; min-width:42px; height:42px; padding:0 .6rem;
  border:1px solid var(--line); border-radius:.7rem; background:#fff;
  font-family:var(--mono); font-size:.85rem; color:var(--body); transition:all .2s;
}
.pagination a.page-link:hover{ border-color:rgba(var(--brand-rgb),.4); color:var(--brand); }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination .page-link--arrow svg{ width:18px; height:18px; }
.pagination .page-link--counter{ font-size:.8rem; color:var(--muted); cursor:default; }
/* 数字はタブレット以上、ページカウンターはモバイルのみ */
.pagination .page-item--counter{ display:flex; }
.pagination .page-item--num{ display:none; }
@media (min-width:640px){
  .pagination .page-item--counter{ display:none; }
  .pagination .page-item--num{ display:flex; }
}

/* ===================================================================
   SINGLE POST
   =================================================================== */
.cy-article{ }
.cy-article__head{ margin-bottom:1.5rem; }
.cy-article__badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.cy-article h1.cy-article__title{
  font-family:var(--jp); font-weight:800; color:var(--ink); letter-spacing:-.01em;
  line-height:1.4; font-size:clamp(1.6rem,3.4vw,2.3rem); margin:0 0 1rem;
}
.cy-hero--single h1.cy-article__title{ margin-bottom:1.35rem; }
@media (min-width:1024px){
  .cy-hero--single h1.cy-article__title{ margin-bottom:1.6rem; }
}
.cy-article__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem; color:var(--muted); font-family:var(--mono); font-size:.8rem; }
.cy-article__meta .i{ display:inline-flex; align-items:center; gap:.4rem; }
.cy-article__meta .i svg{ width:15px; height:15px; opacity:.8; }
.cy-article__cover{ border-radius:1.1rem; overflow:hidden; margin:1.6rem 0; border:1px solid var(--line); }
.cy-article__cover img{ width:100%; display:block; }

/* author box */
.cy-author{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:1.1rem; background:var(--surface);
  padding:1.4rem 1.5rem; margin-top:2.5rem;
}
.cy-author__avatar{ width:64px; height:64px; border-radius:9999px; flex:none; object-fit:cover; box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1); }
.cy-author__name{ font-family:var(--jp); font-weight:800; color:var(--ink); font-size:1rem; }
.cy-author__role{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.cy-author__sns{ display:flex; gap:.6rem; margin-top:.4rem; }
.cy-author__sns a{ font-family:var(--mono); font-size:.78rem; color:var(--body); border:1px solid var(--line); background:#fff; border-radius:9999px; padding:.25rem .7rem; transition:all .2s; }
.cy-author__sns a:hover{ border-color:rgba(var(--brand-rgb),.4); color:var(--brand); }

/* ===================================================================
   CTA BAND + FOOTER  （HP と同じ）
   =================================================================== */
.cy-ctaband{ position:relative; overflow:hidden; background:var(--brand-700); padding-block:4.5rem; }
.cy-ctaband__plexus{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.6; pointer-events:none;
}
.cy-ctaband__grid{
  position:absolute; inset:0; opacity:.07;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:46px 46px;
}
.cy-ctaband__in{ position:relative; text-align:center; }
.cy-ctaband h2{ font-family:var(--jp); font-weight:800; color:#fff; font-size:clamp(1.5rem,3.4vw,2.4rem); margin:0; letter-spacing:-.01em; }
.cy-ctaband p{ font-family:var(--jp); margin:1.1rem auto 0; max-width:40rem; color:rgba(255,255,255,.8); line-height:1.8; font-size:1rem; }
.cy-ctaband__btn{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem;
  background:#fff; color:var(--brand); font-weight:700; font-size:.9rem;
  border-radius:9999px; padding:1rem 2rem; box-shadow:0 22px 44px -22px rgba(0,0,0,.5);
  transition:transform .25s var(--ease);
}
.cy-ctaband__btn:hover{ transform:translateY(-2px); color:var(--brand); }
.cy-ctaband__btn svg{ width:1rem; height:1rem; transition:transform .3s var(--ease); }
.cy-ctaband__btn:hover svg{ transform:translateX(4px); }

.cy-footer{ background:var(--ink); color:#fff; padding:4.5rem 0 2.5rem; }
.cy-footer__top{ display:grid; gap:2.5rem; grid-template-columns:1fr; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.1); }
@media (min-width:768px){ .cy-footer__top{ grid-template-columns:5fr 7fr; } }
.cy-footer__brand img{ height:32px; filter:brightness(0) invert(1); margin-bottom:1.4rem; }
.cy-footer__addr{ font-family:var(--jp); font-size:.86rem; color:rgba(255,255,255,.55); line-height:1.9; }
.cy-footer__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
@media (min-width:640px){ .cy-footer__cols{ grid-template-columns:repeat(3,1fr); } }
.cy-footer__col h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 1rem; }
.cy-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.cy-flink{ font-family:var(--jp); color:rgba(255,255,255,.62); font-size:.9rem; transition:color .2s, padding .2s; }
.cy-flink:hover{ color:#fff; padding-left:4px; }
.cy-footer__bottom{ padding-top:1.75rem; display:flex; flex-direction:column; gap:.6rem; align-items:center; justify-content:space-between; }
@media (min-width:640px){ .cy-footer__bottom{ flex-direction:row; } }
.cy-footer__bottom p{ font-family:var(--mono); font-size:.72rem; color:rgba(255,255,255,.4); margin:0; }

/* scroll-to-top */
.cy-totop{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:1040;
  display:grid; place-items:center; width:48px; height:48px; border-radius:9999px;
  background:var(--brand); color:#fff; border:none; cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(var(--brand-rgb),.6);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all .3s;
}
.cy-totop.show{ opacity:1; visibility:visible; transform:none; }
.cy-totop:hover{ background:var(--brand-600); }
.cy-totop svg{ width:20px; height:20px; }

/* single post sidebar
   ── CTA / バナー等は通常スクロールし、PC 用の目次 + 共有ウィジェット群だけを
   ヘッダー下に固定する。 */
.cy-single-side{ }
.cy-single-side__sticky{ height:100%; }
/* 目次 + その直下の共有ウィジェット（PC のみ）をヘッダー下に sticky 固定 */
@media (min-width:1024px){
  .cy-single-side__toc-stack{ position:sticky; top:88px; }
}
/* WP ウィジェット(.cy-side-card)内タイトル */
.cy-side-card h4.cy-side-title{ font-size:.72rem; }
.cy-side-card .nav{ flex-direction:column; }
.cy-side-card .nav-link{ font-family:var(--jp); color:var(--ink); padding:.45rem 0; font-size:.9rem; }
.cy-side-card .nav-link:hover{ color:var(--brand); }
/* 目次ウィジェット */
.sidenav-widget.cy-side-card a{ color:var(--body); }
.sidenav-widget.cy-side-card a:hover{ color:var(--brand); }

/* ===================================================================
   REVEAL animations (HP と同じ)
   =================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms); will-change:opacity,transform;
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-rv="left"]{ transform:translateX(-32px); }
[data-reveal][data-rv="right"]{ transform:translateX(32px); }
[data-reveal][data-rv="scale"]{ transform:scale(.96); }
[data-reveal][data-rv="left"].in,
[data-reveal][data-rv="right"].in,
[data-reveal][data-rv="scale"].in{ transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ===================================================================
   PAGE LOADER (HP の回転するグラデーション角丸ロゴ)
   =================================================================== */
.page-loading{ background-color:#fff; }
.cy-loader-mark{
  width:46px; height:46px; border-radius:13px; margin:0 auto .9rem;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  position:relative; animation:cyLoaderSpin 1.1s var(--ease) infinite;
}
.cy-loader-mark::after{ content:""; position:absolute; inset:6px; border-radius:8px; background:#fff; }
@keyframes cyLoaderSpin{
  0%{ transform:rotate(0) scale(1); }
  50%{ transform:rotate(180deg) scale(.7); border-radius:50%; }
  100%{ transform:rotate(360deg) scale(1); }
}

/* ===================================================================
   記事本文 .page-content（Gutenberg ブロック）
   ── Bootstrap / theme.min.css / style.css に依存しない自己完結スタイル。
   HP のデザイン言語（Noto Sans JP 本文・brand ブルー・JetBrains Mono コード）
   に合わせて全ブロックを定義する。
   =================================================================== */
.page-content{
  font-family:var(--jp);
  color:var(--body);
  font-size:1.02rem;
  line-height:2;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* ブロック間の縦リズム */
.page-content > * + *{ margin-top:1.4rem; }

/* 段落 */
.page-content p{ margin:0; line-height:2; }

/* インライン要素 */
.page-content strong,
.page-content b{ font-weight:700; color:var(--ink); }
.page-content em,
.page-content i{ font-style:italic; }
.page-content mark{ background:rgba(var(--accent-rgb),.18); color:inherit; padding:.05em .25em; border-radius:.2em; }
.page-content small{ font-size:.85em; }
.page-content sub,
.page-content sup{ font-size:.72em; }
.page-content del{ color:var(--muted); }
.page-content abbr[title]{ text-decoration-style:dotted; cursor:help; }

/* リンク */
.page-content a{
  color:var(--brand); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:rgba(var(--brand-rgb),.4);
  transition:color .2s, text-decoration-color .2s;
}
.page-content a:hover{ color:var(--accent); text-decoration-color:currentColor; }

/* 見出し */
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6{ font-family:var(--jp); color:var(--ink); font-weight:800; line-height:1.45; }
.page-content > h2{ margin-top:3rem; }
.page-content > h3,
.page-content > h4{ margin-top:2.2rem; }
.page-content > h2:first-child,
.page-content > h3:first-child{ margin-top:0; }

.page-content h2{
  position:relative; font-size:clamp(1.4rem,3vw,1.7rem);
  padding:1rem 0; margin-bottom:1.4rem;
}
.page-content h2::before,
.page-content h2::after{
  content:""; position:absolute; left:0; width:100%; height:2px;
  background-image:linear-gradient(90deg,var(--brand) 0%,var(--accent) 100%);
}
.page-content h2::before{ top:0; }
.page-content h2::after{ bottom:0; }

.page-content h3{
  font-size:clamp(1.2rem,2.4vw,1.4rem);
  padding-left:.9rem; border-left:4px solid var(--brand);
  margin-bottom:1.1rem;
}
.page-content h4{ font-size:1.12rem; margin-bottom:.8rem; }
.page-content h5{ font-size:1rem; color:var(--brand); letter-spacing:.02em; }
.page-content h6{ font-size:.9rem; font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

/* リスト */
.page-content ul,
.page-content ol{ padding-left:1.5rem; line-height:1.95; }
.page-content ul{ list-style:none; padding-left:1.4rem; }
.page-content ul > li{ position:relative; padding-left:1.1rem; }
.page-content ul > li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:7px; height:7px; border-radius:2px; transform:rotate(45deg);
  background:var(--accent);
}
.page-content ol{ list-style:decimal; }
.page-content ol > li::marker{ color:var(--brand); font-family:var(--mono); font-weight:600; }
.page-content li + li{ margin-top:.45rem; }
.page-content li > ul,
.page-content li > ol{ margin-top:.45rem; margin-bottom:.2rem; }
.page-content li > ul > li::before{ background:var(--muted); }

/* 定義リスト */
.page-content dl{ margin:0; }
.page-content dt{ font-weight:700; color:var(--ink); }
.page-content dd{ margin:.2rem 0 .8rem; padding-left:1rem; border-left:2px solid var(--line); }

/* 引用 */
.page-content blockquote,
.page-content .wp-block-quote{
  position:relative; margin:0; padding:1.5rem 1.4rem 1.5rem 2.6rem;
  background:var(--surface); border-left:4px solid var(--accent);
  border-radius:0 .8rem .8rem 0; color:#4a5170; font-style:normal;
}
.page-content blockquote::before{
  content:"\201C"; position:absolute; left:.7rem; top:.3rem;
  font-family:Georgia,serif; font-size:2.6rem; line-height:1; color:rgba(var(--brand-rgb),.28);
}
.page-content blockquote p{ margin:0; }
.page-content blockquote p + p{ margin-top:.8rem; }
.page-content blockquote cite,
.page-content blockquote .wp-block-quote__citation{
  display:block; margin-top:.8rem; font-family:var(--mono); font-size:.78rem;
  font-style:normal; color:var(--muted);
}
.page-content blockquote cite::before{ content:"— "; }

/* プルクオート */
.page-content .wp-block-pullquote{
  border:none; border-top:2px solid var(--line); border-bottom:2px solid var(--line);
  padding:2rem 1rem; text-align:center; background:none;
}
.page-content .wp-block-pullquote blockquote{ background:none; border:none; padding:0; }
.page-content .wp-block-pullquote p{ font-family:var(--jp); font-weight:800; font-size:1.3rem; color:var(--ink); }

/* コード（インライン） */
.page-content code{
  font-family:var(--mono); font-size:.86em;
  background:rgba(var(--brand-rgb),.07); color:var(--brand-700);
  padding:.15em .45em; border-radius:.4em;
  border:1px solid rgba(var(--brand-rgb),.1);
}
.page-content kbd{
  font-family:var(--mono); font-size:.82em; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-bottom-width:2px;
  border-radius:.4em; padding:.1em .45em;
}

/* コードブロック */
.page-content pre,
.page-content .wp-block-code,
.page-content .wp-block-preformatted{
  font-family:var(--mono); font-size:.85rem; line-height:1.7;
  background:var(--ink); color:#e6eaf3;
  padding:1.2rem 1.35rem; border-radius:.85rem; overflow:auto;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 14px 36px -26px rgba(11,15,25,.7);
  -webkit-overflow-scrolling:touch;
}
.page-content .wp-block-code{ padding:0; background:var(--ink); }
.page-content .wp-block-code code{
  display:block; background:none; border:none; color:inherit;
  padding:1.2rem 1.35rem; font-size:.85rem; border-radius:.85rem;
}
.page-content pre code{ background:none; border:none; color:inherit; padding:0; font-size:1em; }

/* 画像 / 図 */
.page-content figure{ margin:0; }
.page-content img{ height:auto; border-radius:.7rem; }
.page-content .wp-block-image{ margin:0; }
.page-content .wp-block-image img{ width:100%; }
.page-content figcaption,
.page-content .wp-element-caption,
.page-content .wp-caption-text{
  margin-top:.6rem; font-family:var(--mono); font-size:.76rem;
  color:var(--muted); text-align:center; line-height:1.6;
}
.page-content .alignleft{ float:left; margin:.4rem 1.4rem 1rem 0; max-width:50%; }
.page-content .alignright{ float:right; margin:.4rem 0 1rem 1.4rem; max-width:50%; }
.page-content .aligncenter{ margin-inline:auto; text-align:center; }
.page-content .wp-block-image.aligncenter img{ margin-inline:auto; }
@media (max-width:640px){
  .page-content .alignleft,
  .page-content .alignright{ float:none; margin:1.4rem 0; max-width:100%; }
}

/* テーブル（functions.php で <table class="cy-table"> を付与） */
.page-content .wp-block-table,
.page-content figure.wp-block-table{ margin:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.page-content table,
.page-content .cy-table{
  width:100%; min-width:32rem; font-family:var(--jp); font-size:.92rem;
  border:1px solid var(--line); border-radius:.7rem; overflow:hidden;
}
.page-content th,
.page-content td{
  padding:.8rem 1rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line);
}
.page-content thead th{
  background:var(--brand); color:#fff; font-weight:700;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  border-bottom:none;
}
.page-content tbody tr:nth-child(even){ background:var(--surface); }
.page-content tbody tr:last-child td{ border-bottom:none; }
.page-content .wp-block-table figcaption{ margin-top:.7rem; }

/* 区切り線 */
.page-content hr,
.page-content .wp-block-separator{
  height:0; border:none; border-top:1px solid var(--line);
  margin-block:2.4rem; opacity:1;
}
.page-content .wp-block-separator.is-style-dots{
  border:none; text-align:center; line-height:1;
}
.page-content .wp-block-separator.is-style-dots::before{
  content:"···"; color:var(--muted); font-size:1.5rem; letter-spacing:.5em;
}

/* ボタンブロック */
.page-content .wp-block-buttons{
  display:flex; flex-wrap:wrap; gap:.8rem; margin-block:1.6rem;
}
.page-content .wp-block-button{ flex:0 0 auto; }
.page-content .wp-block-button__link,
.page-content .wp-element-button{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  background:var(--brand); color:#fff; font-family:var(--sans); font-weight:700;
  font-size:.9rem; text-decoration:none;
  padding:.8rem 1.5rem; border-radius:9999px;
  box-shadow:0 12px 26px -14px rgba(var(--brand-rgb),.6);
  transition:transform .25s var(--ease), background .25s;
}
.page-content .wp-block-button__link:hover{ background:var(--brand-600); color:#fff; transform:translateY(-2px); }
.page-content .wp-block-button.is-style-outline .wp-block-button__link{
  background:none; color:var(--brand); border:1.5px solid rgba(var(--brand-rgb),.4); box-shadow:none;
}
.page-content .wp-block-button.is-style-outline .wp-block-button__link:hover{ background:rgba(var(--brand-rgb),.06); color:var(--brand); }

/* 埋め込み（YouTube 等の 16:9） */
.page-content .wp-block-embed__wrapper{ position:relative; }
.page-content .wp-block-embed iframe,
.page-content iframe{ width:100%; aspect-ratio:16/9; border:none; border-radius:.7rem; }
.page-content .wp-block-embed figcaption{ margin-top:.6rem; }

/* メディア＆テキスト */
.page-content .wp-block-media-text{ display:grid; gap:1.5rem; align-items:center; }
@media (min-width:768px){ .page-content .wp-block-media-text{ grid-template-columns:1fr 1fr; } }

/* 注記ボックス（is-style 利用時の汎用） */
.page-content .wp-block-group.is-style-note,
.page-content .is-style-note{
  background:var(--surface); border:1px solid var(--line);
  border-radius:.9rem; padding:1.3rem 1.4rem;
}

/* オーディオ / 動画 */
.page-content audio,
.page-content video{ width:100%; border-radius:.7rem; }

/* 先頭の本文要素が cover 画像直後でも詰まらないように */
.cy-article__cover + p,
.cy-article__cover + h2,
.cy-article__cover + h3{ margin-top:1.6rem; }