/* ==========================================================
 *  ブログ記事共通スタイル v3 (warm-intelligent 基調)
 *  色トークンは /common/tokens.css と同期。
 * ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Outfit:wght@600;700&display=swap');

:root {
  --paper:#FBF7F0; --card:#FFFDF9;
  --cream:#FBF7F0; --cream-deep:#F2EBDD;
  --ink:#241F1B; --ink-soft:#5A5048; --ink-mute:#7A6F66;
  --navy:#2C6E63; --navy-deep:#235A51; --ai:#7A5BC2;
  --coral:#B55327; --mustard:#956818; --teal:#277C7C;
  --lavender:#7A5BC2; --rose:#B94B65; --leaf:#4B7C56;
  --line:#EBE2D4; --line-strong:#DBCEB9;
  --grad-cta:linear-gradient(100deg, #7A5BC2 0%, #C85B9C 100%);
  --bw:1.5px;
  --ease-bounce:cubic-bezier(.22,.61,.36,1);
  --bl-font:'Noto Sans JP',system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  margin:0; padding:0;
  font-family:var(--bl-font); font-weight:500;
  color:var(--ink); background:var(--cream);
  line-height:1.95; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:var(--coral); text-decoration:none; font-weight:700; }
a:hover { background:var(--coral); color:#fff; }
.pt-en { font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:.02em; }

/* 背景の装飾 — soft warm glows */
.pt-bg-deco {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(224,165,62,0.12), transparent 70%),
    radial-gradient(820px 480px at 88% 4%, rgba(122,91,194,0.07), transparent 72%),
    radial-gradient(760px 520px at 6% 84%, rgba(217,121,78,0.06), transparent 72%);
}
.pt-skip {
  position:absolute; left:-9999px; top:12px;
  background:var(--ink); color:var(--cream);
  padding:10px 16px; border-radius:999px; font-weight:700; font-size:13px;
}
.pt-skip:focus { left:12px; z-index:200; }

/* breadcrumb */
.ba-breadcrumb {
  position:relative; z-index:1;
  max-width:760px; margin:16px auto 0; padding:0 clamp(20px,5vw,32px);
  font-size:12.5px; color:var(--ink-mute);
}
.ba-breadcrumb a { color:var(--ink-soft); font-weight:600; background:none; }
.ba-breadcrumb a:hover { color:var(--coral); background:none; }
.ba-breadcrumb__sep { margin:0 6px; opacity:.5; }

/* article */
.ba-article {
  position:relative; z-index:1;
  max-width:760px; margin:0 auto; padding:32px clamp(20px,5vw,32px) 48px;
}

.ba-article__tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  background:var(--cream-deep); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:999px;
  font-weight:700; font-size:12.5px;
  transform:rotate(0deg);
  margin-bottom:16px;
}

.ba-article__title {
  font-weight:900; font-size:clamp(24px,5vw,38px);
  line-height:1.3; letter-spacing:-.02em;
  margin-bottom:14px; text-wrap:balance;
}
.ba-article__title .underline { position:relative; display:inline-block; }
.ba-article__title .underline::after {
  content:""; position:absolute; left:-2%; right:-2%; bottom:-3px;
  height:10px; background:var(--mustard); border-radius:6px; z-index:-1;
}

.ba-article__meta {
  font-size:13px; color:var(--ink-mute); margin-bottom:32px;
  display:inline-block; padding:4px 12px;
  border:1.5px dashed var(--ink-mute); border-radius:999px;
}

/* content body */
.ba-content { font-size:15.5px; }
.ba-content h2 {
  font-weight:900; font-size:clamp(20px,3.6vw,26px);
  margin:48px 0 18px; padding:8px 18px;
  background:var(--ink); color:var(--cream);
  border-radius:14px; transform:rotate(0deg);
  display:inline-block;
}
.ba-content h3 {
  font-weight:900; font-size:18px;
  margin:32px 0 12px; padding-left:14px;
  border-left:5px solid var(--coral);
}
.ba-content p {
  color:var(--ink-soft); margin-bottom:18px; line-height:2;
}
.ba-content strong { color:var(--ink); font-weight:900; }

.ba-content ul, .ba-content ol {
  margin:0 0 20px 0; padding:0; list-style:none;
}
.ba-content li {
  position:relative; padding:4px 4px 4px 26px;
  margin-bottom:6px; font-size:15px; color:var(--ink-soft); line-height:1.85;
}
.ba-content ul li::before {
  content:""; position:absolute; left:6px; top:14px;
  width:10px; height:10px; border-radius:50%;
  background:var(--coral); border:2px solid var(--ink);
}
.ba-content ol { counter-reset:olc; }
.ba-content ol li { padding-left:36px; counter-increment:olc; }
.ba-content ol li::before {
  content:counter(olc); position:absolute; left:0; top:2px;
  width:24px; height:24px; border-radius:50%;
  background:var(--mustard); color:var(--ink);
  border:2px solid var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:12px;
}

.ba-content blockquote {
  margin:24px 0; padding:18px 22px;
  background:#fff; border:var(--bw) solid var(--ink);
  border-radius:18px; box-shadow:5px 5px 0 var(--rose);
  font-size:15px; color:var(--ink-soft); line-height:1.95;
  transform:rotate(0deg);
}

/* infobox */
.ba-infobox {
  margin:28px 0; padding:22px 24px;
  background:#fff; border:var(--bw) solid var(--ink); border-radius:18px;
  box-shadow:5px 5px 0 var(--lavender);
  transform:rotate(0deg);
}
.ba-infobox__title {
  font-weight:900; font-size:16px; margin-bottom:10px;
  display:inline-block; padding:3px 10px;
  background:var(--lavender); color:#fff;
  border:2px solid var(--ink); border-radius:999px;
}
.ba-infobox p { font-size:14px; color:var(--ink-soft); margin-bottom:8px; }
.ba-infobox p:last-child { margin-bottom:0; }

/* CTA */
.ba-cta {
  text-align:center; margin:48px 0; padding:36px clamp(20px,5vw,32px);
  background:#fff; border:var(--bw) solid var(--ink); border-radius:24px;
  box-shadow:6px 6px 0 var(--coral);
  transform:rotate(0deg);
}
.ba-cta__title { font-weight:900; font-size:clamp(18px,3.8vw,24px); margin-bottom:8px; }
.ba-cta__sub { font-size:14px; color:var(--ink-soft); margin-bottom:22px; }
.ba-cta__btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  background:var(--ink); color:var(--cream);
  border:var(--bw) solid var(--ink); border-radius:999px;
  font-weight:700; font-size:16px; text-decoration:none;
  box-shadow:6px 6px 0 var(--mustard);
  transition:transform .2s var(--ease-bounce), box-shadow .2s var(--ease-bounce);
}
.ba-cta__btn:hover {
  transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--mustard);
  background:var(--ink); color:var(--cream); text-decoration:none;
}
.ba-cta__btn:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--mustard); }
.ba-cta__btn svg { width:16px; height:16px; }

/* related */
.ba-related { margin-top:48px; }
.ba-related__title {
  font-weight:900; font-size:18px; margin-bottom:16px;
  display:inline-block; padding:4px 14px;
  background:var(--ink); color:var(--cream);
  border-radius:999px; transform:rotate(0deg);
}
.ba-related__grid {
  display:grid; gap:14px; padding:8px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.ba-related__card {
  display:flex; gap:14px; align-items:center;
  padding:16px 18px;
  background:#fff; border:var(--bw) solid var(--ink); border-radius:18px;
  color:var(--ink); text-decoration:none; font-weight:500;
  transform:rotate(var(--tilt,-.6deg));
  box-shadow:4px 4px 0 var(--teal);
  transition:transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce);
}
.ba-related__card:nth-child(even) { transform:rotate(0deg); box-shadow:4px 4px 0 var(--rose); }
.ba-related__card:hover {
  transform:rotate(0) translate(-2px,-2px); text-decoration:none;
  background:#fff; color:var(--ink);
}
.ba-related__card:nth-child(odd):hover { box-shadow:6px 6px 0 var(--teal); }
.ba-related__card:nth-child(even):hover { box-shadow:6px 6px 0 var(--rose); }
.ba-related__card-icon {
  width:40px; height:40px; flex-shrink:0;
  filter:drop-shadow(2px 2px 0 var(--ink));
}
.ba-related__card-title { font-size:14.5px; font-weight:700; line-height:1.5; }