:root { --cc-blue:#656af8; --cc-deep:#31355f; --cc-yellow:#ffd700; --cc-paper:#f7f7fb; --cc-ink:#202238; --cc-muted:#686b7e; }
* { box-sizing: border-box; }
body.blog-page { margin:0; color:var(--cc-ink); background:var(--cc-paper); font-family:"Noto Sans JP",system-ui,sans-serif; line-height:1.8; }
.blog-page .topbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(18px,4vw,48px); background:rgba(101,106,248,.96); box-shadow:0 8px 24px rgba(35,38,88,.16); }
.blog-page .topbar .logo { color:#fff; font-family:"Lexend",sans-serif; font-weight:900; }
.blog-page .topbar .menu { border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:8px 14px; color:#fff; background:rgba(255,255,255,.12); font-weight:800; cursor:pointer; }
.blog-page .menu-panel { position:fixed; top:66px; right:20px; z-index:110; min-width:250px; border-radius:16px; padding:10px; background:#4f54d6; box-shadow:0 20px 60px rgba(28,30,73,.3); }
.blog-page .menu-inner { display:grid; gap:4px; }
.blog-page .menu-panel h3 { margin:6px 10px 2px; color:#dfe0ff; font-size:12px; text-transform:uppercase; }
.blog-page .menu-panel a { padding:8px 10px; border-radius:9px; color:#fff; text-decoration:none; font-weight:700; }
.blog-page .menu-panel a:hover { background:rgba(255,255,255,.12); }
.blog-container { width:min(1120px,calc(100% - 36px)); margin-inline:auto; }
.blog-hero { padding:clamp(54px,8vw,92px) 0 44px; color:#fff; background:linear-gradient(135deg,#656af8,#8b70ef); }
.blog-hero h1 { margin:.15em 0; font-family:"Lexend",sans-serif; font-size:clamp(40px,7vw,78px); line-height:1.05; }
.blog-hero p { max-width:720px; margin:0; font-size:clamp(15px,2vw,19px); }
.category-nav { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 36px; }
.category-nav a,.category-label { border-radius:999px; padding:6px 12px; color:#fff; background:var(--cc-blue); font-size:13px; font-weight:800; text-decoration:none; }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-bottom:72px; }
.article-card { overflow:hidden; border:1px solid #e4e5ee; border-radius:20px; background:#fff; box-shadow:0 12px 35px rgba(47,49,94,.08); }
.article-card-image { display:block; aspect-ratio:16/9; overflow:hidden; background:#ececf6; }
.article-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.article-card:hover img { transform:scale(1.025); }
.article-card-body { padding:18px; }
.article-card h2 { margin:12px 0 8px; font-size:clamp(17px,1.65vw,22px); line-height:1.45; }
.article-card h2 a { color:var(--cc-ink); text-decoration:none; }
.article-card p { margin:0 0 12px; color:var(--cc-muted); }
.article-card time { color:var(--cc-muted); font-size:13px; }
.breadcrumbs { padding:22px 0; color:var(--cc-muted); font-size:13px; }
.article-layout { display:grid; grid-template-columns:minmax(0,760px) minmax(220px,1fr); gap:42px; align-items:start; padding-bottom:76px; }
.article-main { min-width:0; }
.article-header h1 { margin:8px 0 14px; font-size:clamp(30px,5vw,52px); line-height:1.25; letter-spacing:-.02em; }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--cc-muted); font-size:14px; }
.article-featured { width:100%; height:auto; margin:28px 0; border-radius:20px; display:block; background:#ececf6; }
.article-content { font-size:16px; }
.article-content h2 { margin-top:2.2em; padding-bottom:.35em; border-bottom:3px solid var(--cc-yellow); font-size:1.75em; line-height:1.45; }
.article-content h3 { margin-top:1.8em; font-size:1.35em; }
.article-content img { max-width:100%; height:auto; border-radius:12px; }
.article-content figure { max-width:100%; margin:28px 0; }
.article-content a { color:#454bc7; }
.article-content pre,.article-content code { overflow-wrap:anywhere; }
.article-content .wp-block-columns { display:flex; flex-wrap:wrap; gap:18px; }
.article-content .wp-block-column { flex:1 1 240px; }
.article-sidebar { position:sticky; top:96px; display:grid; gap:24px; }
.side-block { border:1px solid #e4e5ee; border-radius:18px; padding:20px; background:#fff; }
.side-block h2 { margin:0 0 12px; font-size:18px; }
.tool-list,.related-list { display:grid; gap:12px; }
.tool-link { display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; color:var(--cc-ink); text-decoration:none; font-weight:800; }
.tool-link img { width:64px; height:48px; border-radius:9px; object-fit:cover; }
.related-list a { color:var(--cc-ink); font-weight:700; line-height:1.45; }
.contact-card { max-width:760px; margin:42px auto 80px; padding:clamp(24px,5vw,48px); border-radius:22px; background:#fff; box-shadow:0 16px 45px rgba(47,49,94,.1); }
.contact-form { display:grid; gap:18px; }
.contact-form label { display:grid; gap:6px; font-weight:800; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid #cfd1df; border-radius:10px; padding:12px 14px; font:inherit; }
.contact-form textarea { min-height:180px; resize:vertical; }
.turnstile-field { min-height:65px; }
.contact-form button { justify-self:start; border:0; border-radius:999px; padding:12px 24px; color:#fff; background:var(--cc-blue); font-weight:900; cursor:pointer; }
.form-notice { border-radius:12px; padding:12px 16px; background:#e9eaff; }
.form-notice.error { background:#ffeaea; }
.hp-field { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; }
.blog-page .site-footer { padding:24px 0; color:#fff; background:var(--cc-blue); border-top:1px solid rgba(255,255,255,.18); }
.blog-page .footer-inner { width:min(1120px,calc(100% - 36px)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.blog-page .site-footer a { color:#fff; }
.blog-page .footer-nav { display:flex; flex-wrap:wrap; gap:14px; }


/* Color palette swatches */
.article-content .palette-description {
  margin: 0 0 20px;
}
.article-content .color-swatch-list {
  display: grid;
  gap: 14px;
  margin: 0;
}
.article-content .color-swatch-row {
  display: grid;
  grid-template-columns: 68px max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.article-content .color-swatch {
  display: block;
  width: 68px;
  height: 24px;
  border: 1px solid rgba(32, 34, 56, .12);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.article-content .color-swatch-row code {
  display: inline-block;
  padding: .05em .4em;
  border-radius: 4px;
  background: #f0f0f3;
  color: #30323f;
  font-size: .9em;
  line-height: 1.55;
  white-space: nowrap;
}
.article-content .color-name {
  min-width: 0;
}
@media (max-width: 520px) {
  .article-content .color-swatch-row {
    grid-template-columns: 56px max-content minmax(0, 1fr);
    gap: 8px;
  }
  .article-content .color-swatch {
    width: 56px;
  }
}

@media(max-width:980px){.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.article-grid{grid-template-columns:1fr}.article-layout{grid-template-columns:1fr}.article-sidebar{position:static}.blog-page .footer-inner{flex-direction:column;align-items:flex-start}.article-content{font-size:15px}}