/* 4案共通の土台。読者向けの文字はHTMLにだけ置き、画像の上には重ねない。
   動きは html.mo-on の下だけで働く(JavaScriptなし・動きを減らす設定では最終状態を静止で見せる)。 */
:root{--ink:#1E2A4A;--body:#33384A;--sub:#6B7080;--green:#19C142;--green-d:#128C34;--green-soft:#E8F7EC;--line:#E3E7E0;--orange:#F26B1D;--bg:#fff;--page:#F3F5F1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--body);font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;line-height:1.8;font-size:16px}
.page{max-width:480px;margin:0 auto;background:var(--bg);overflow-x:clip}
.pr{display:inline-block;margin:8px 14px 0;font-size:11px;color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:0 6px;line-height:1.7}
.fv{position:relative;min-height:calc(100svh - 30px);display:flex;flex-direction:column}
.fv>.pr{align-self:flex-start}
.logo{display:block;width:62%;max-width:250px;height:auto;margin:0 auto}
.badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 14px 0}
.badge{border:2px solid var(--green);color:var(--green-d);background:#fff;border-radius:999px;padding:3px 12px;font-weight:800;font-size:14px;line-height:1.5}
.sat{text-align:center;font-weight:800;color:var(--ink);font-size:15px;margin:6px 0 0}
.sat b{color:var(--orange);font-size:24px;letter-spacing:.01em}
.teaser{text-align:center;font-weight:800;color:var(--ink);font-size:17px;line-height:1.5;margin:16px 16px 0}
.more{display:flex;flex-direction:column;align-items:center;margin:8px auto 14px;color:var(--green-d);font-weight:800;text-decoration:none;font-size:15px}
.more svg{width:26px;height:26px}
.next{padding:28px 20px 60px;border-top:8px solid var(--page)}
.next h2{font-size:21px;line-height:1.5;color:var(--ink);margin:0 0 12px;padding:4px 0 4px 12px;border-left:5px solid var(--green)}
.next p{margin:0 0 14px}
.mark{background:linear-gradient(transparent 60%,#C8F2B0 60%)}
/* 続きを読むの矢印は、動ける時だけ上下にゆれる */
html.mo-on .more svg{animation:mo-bob 1.4s ease-in-out infinite}
@keyframes mo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){html.mo-on *{animation:none!important;transition:none!important}}