:root{
  --swc-accent: var(--wp--preset--color--accent, #3b82f6);
  --swc-muted:  #f5f7fb;
  --swc-text:   var(--wp--preset--color--foreground, #111);
  --swc-note:   #fff7cc; /* 付箋 */
  --swc-tape:   #ffe27a; /* セロテープ */
  --swc-r: 12px; /* 角丸 */
  --swc-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* === 見出し（擬似SWELLクラス） === */
.swell-h-underline{background-image:linear-gradient(transparent calc(100% - .35em), rgba(59,130,246,.35) .35em);display:inline;padding-bottom:.1em}
.swell-h-line-left{border-left:.28rem solid var(--swc-accent);padding-left:.7rem}
.swell-h-ribbon{position:relative;display:inline-block;color:#fff;background:var(--swc-accent);padding:.3em .8em .35em;border-radius:.4em}
.swell-h-ribbon::after{content:"";position:absolute;left:.6em;bottom:-.45em;border:.45em solid transparent;border-top-color:rgba(0,0,0,.15)}

/* === 段落 === */
.swell-t-marker{background-image:linear-gradient(transparent 60%, rgba(250,204,21,.5) 0)}
.swell-t-lead{font-size:clamp(1.05rem,1rem + 1vw,1.25rem);line-height:1.85;color:color-mix(in oklab, var(--swc-text) 85%, black)}

/* === ボックス === */
.swell-box{border-radius:var(--swc-r);padding:clamp(14px,2vw,22px)}
.solid.swell-box{background:var(--swc-muted);border:1px solid color-mix(in oklab, var(--swc-accent) 25%, #0000);box-shadow:var(--swc-shadow)}
.border.swell-box{background:#fff;border:2px solid var(--swc-accent)}

/* 付箋 */
.swell-note{position:relative;background:var(--swc-note);border-radius:6px;padding:1rem 1.1rem;box-shadow:0 6px 0 -2px rgba(0,0,0,.08),0 10px 18px rgba(0,0,0,.06)}
.swell-note::before{content:"";position:absolute;top:-10px;left:18px;width:64px;height:18px;background:var(--swc-tape);transform:rotate(-3deg);box-shadow:0 2px 4px rgba(0,0,0,.15) inset}

/* === ふきだし（引用を想定） === */
.swell-balloon{position:relative;background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--swc-shadow)}
.swell-balloon::after{content:"";position:absolute;bottom:-12px;border:12px solid transparent;border-top-color:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.06))}
.swell-balloon.left::after{left:24px}
.swell-balloon.right::after{right:24px}

/* === チェックリスト === */
.swell-list.check{list-style:none;padding-left:0}
.swell-list.check li{position:relative;padding-left:1.9em;margin:.5em 0}
.swell-list.check li::before{content:"";position:absolute;left:0;top:.2em;width:1.2em;height:1.2em;border-radius:999px;background:var(--swc-accent);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') center/68% no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') center/68% no-repeat;
}

/* === 矢印ボタン === */
.swell-btn.arrow .wp-block-button__link{position:relative;padding-right:2.2em}
.swell-btn.arrow .wp-block-button__link::after{content:"→";position:absolute;right:.9em;top:50%;transform:translateY(-50%);transition:transform .18s ease}
.swell-btn.arrow .wp-block-button__link:hover::after{transform:translateY(-50%) translateX(.2em)}

/* === “is-style-◯◯” との相互互換（どちらのクラスでも効くように） === */
.is-style-swell-underline{comp:initial}.is-style-swell-underline{all:unset;}
/* 実際の見た目は擬似SWELLクラスへ委譲 */
.is-style-swell-underline,.swell-h-underline{background-image:linear-gradient(transparent calc(100% - .35em), rgba(59,130,246,.35) .35em);display:inline;padding-bottom:.1em}
.is-style-swell-line-left,.swell-h-line-left{border-left:.28rem solid var(--swc-accent);padding-left:.7rem}
.is-style-swell-ribbon,.swell-h-ribbon{position:relative;display:inline-block;color:#fff;background:var(--swc-accent);padding:.3em .8em .35em;border-radius:.4em}
.is-style-swell-ribbon::after,.swell-h-ribbon::after{content:"";position:absolute;left:.6em;bottom:-.45em;border:.45em solid transparent;border-top-color:rgba(0,0,0,.15)}
.is-style-swell-marker,.swell-t-marker{background-image:linear-gradient(transparent 60%, rgba(250,204,21,.5) 0)}
.is-style-swell-lead,.swell-t-lead{font-size:clamp(1.05rem,1rem + 1vw,1.25rem);line-height:1.85;color:color-mix(in oklab, var(--swc-text) 85%, black)}
.is-style-swell-box-solid,.swell-box.solid{background:var(--swc-muted);border:1px solid color-mix(in oklab, var(--swc-accent) 25%, #0000);border-radius:var(--swc-r);padding:clamp(14px,2vw,22px);box-shadow:var(--swc-shadow)}
.is-style-swell-box-border,.swell-box.border{background:#fff;border:2px solid var(--swc-accent);border-radius:var(--swc-r);padding:clamp(14px,2vw,22px)}
.is-style-swell-note,.swell-note{position:relative;background:var(--swc-note);border-radius:6px;padding:1rem 1.1rem;box-shadow:0 6px 0 -2px rgba(0,0,0,.08),0 10px 18px rgba(0,0,0,.06)}
.is-style-swell-note::before,.swell-note::before{content:"";position:absolute;top:-10px;left:18px;width:64px;height:18px;background:var(--swc-tape);transform:rotate(-3deg);box-shadow:0 2px 4px rgba(0,0,0,.15) inset}
.wp-block-quote.is-style-swell-balloon-left,.swell-balloon.left{position:relative;background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--swc-shadow)}
.wp-block-quote.is-style-swell-balloon-right,.swell-balloon.right{position:relative;background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--swc-shadow)}
.wp-block-quote.is-style-swell-balloon-left::after,.swell-balloon.left::after{content:"";position:absolute;bottom:-12px;border:12px solid transparent;border-top-color:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.06));left:24px}
.wp-block-quote.is-style-swell-balloon-right::after,.swell-balloon.right::after{content:"";position:absolute;bottom:-12px;border:12px solid transparent;border-top-color:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.06));right:24px}
.wp-block-list.is-style-swell-check,.swell-list.check{list-style:none;padding-left:0}
.wp-block-list.is-style-swell-check li,.swell-list.check li{position:relative;padding-left:1.9em;margin:.5em 0}
.wp-block-list.is-style-swell-check li::before,.swell-list.check li::before{content:"";position:absolute;left:0;top:.2em;width:1.2em;height:1.2em;border-radius:999px;background:var(--swc-accent);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>') center/68% no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>') center/68% no-repeat;
}
.swell-btn.arrow .wp-block-button__link,.wp-block-buttons.is-style-swell-arrow .wp-block-button__link{position:relative;padding-right:2.2em}
.swell-btn.arrow .wp-block-button__link::after,.wp-block-buttons.is-style-swell-arrow .wp-block-button__link::after{content:"→";position:absolute;right:.9em;top:50%;transform:translateY(-50%);transition:transform .18s ease}
.swell-btn.arrow .wp-block-button__link:hover::after,.wp-block-buttons.is-style-swell-arrow .wp-block-button__link:hover::after{transform:translateY(-50%) translateX(.2em)}