/* かいもの研究所 — design system v4 (2026-11-13) POP
   Owner direction: the warm muted v2/v3 look was judged やぼったい (dull).
   v4 goes POP: bright base, vivid accents (coral / sunny yellow / teal /
   mint / sky), chunky rounded headings, sticker-like chips and badges,
   thick ink borders + hard offset shadows on cards, playful micro-motion.
   Beige/brown muted palette is retired. Readability still outranks
   decoration: body text keeps a near-black ink on a bright base. */
:root{
  /* color — bright base + vivid pop accents */
  --ink:#26232e;            /* on-surface (near-black, slight violet) */
  --sub:#5d5a6b;            /* on-surface-variant */
  --bg:#fffdf4;             /* background: bright warm white */
  --card:#ffffff;           /* surface */
  --coral:#ff5d47;          /* vivid coral-orange (decorative) */
  --coral-deep:#e03e1f;     /* coral for filled buttons / link text */
  --coral-deep-hover:#c93315;
  --yellow:#ffc61a;         /* sunny yellow */
  --yellow-soft:#fff3c4;
  --teal:#00a8a8;           /* teal */
  --mint:#2ec4b6;           /* mint (decorative) */
  --mint-soft:#d9f7ef;
  --sky-soft:#d8efff;
  --coral-soft:#ffe0d8;
  --accent:var(--coral-deep);        /* primary text accent / links */
  --accent-dark:var(--coral-deep-hover);
  --accent-soft:var(--yellow-soft);  /* soft fill (chips, table heads) */
  --line:#efe9dc;           /* faint outline for tables only */
  --on-accent:#ffffff;
  --pr-bg:#fff3c4;          /* PR disclosure: sunny sticker (kept distinct) */
  /* typography — rounded stack for display type, standard gothic for body */
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --font-round:"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  /* radius — rounder than v3 */
  --radius-s:10px; --radius-m:16px; --radius-l:22px; --radius-pill:999px;
  /* hard offset shadows (pop / sticker feel) */
  --pop-shadow:6px 6px 0 var(--ink);
  --pop-shadow-s:4px 4px 0 var(--ink);
  --pop-shadow-l:9px 9px 0 var(--ink);
  /* shape & motion */
  --wrap-w:960px;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-pop:cubic-bezier(.34,1.45,.64,1);
  --dur:180ms;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);
  background:var(--bg); color:var(--ink); line-height:1.8; font-size:16px;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--yellow)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px}

/* header — bright, chunky ink rule under it */
header.site{background:var(--card); border-bottom:3px solid var(--ink);
  padding:14px 24px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px 16px;
  position:sticky; top:0; z-index:10}
.logo{font-family:var(--font-round); font-size:23px; font-weight:800; letter-spacing:.1em; color:var(--ink); line-height:1.35}
.logo small{display:block; font-size:11px; letter-spacing:.08em; color:var(--sub); font-weight:400; font-family:var(--font)}
nav.main{display:flex; flex-wrap:wrap; gap:4px}
nav.main a{color:var(--ink); font-size:14px; font-weight:700; padding:8px 12px; border-radius:var(--radius-pill);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease-pop)}
nav.main a:hover{background:var(--yellow-soft); text-decoration:none; transform:translateY(-1px)}

/* hero (shared) */
.hero{padding:72px 24px 56px; text-align:center;
  background:
    radial-gradient(rgba(255,93,71,.14) 3px, transparent 3.6px) 0 0/26px 26px,
    radial-gradient(rgba(0,168,168,.12) 3px, transparent 3.6px) 13px 13px/26px 26px,
    linear-gradient(180deg,#fff6d9, var(--bg))}
.hero h1{font-family:var(--font-round); font-size:clamp(26px,6vw,38px); line-height:1.45; font-weight:800; letter-spacing:.03em; margin-bottom:16px}
.hero p{color:var(--sub); max-width:640px; margin:0 auto}

/* hero, top page only — vivid decorative blobs + light CSS parallax.
   Decorations are pure CSS gradients (no images, no JS). Non-supporting
   browsers and reduced-motion users simply see them standing still. */
.hero--home{position:relative; overflow:hidden; isolation:isolate}
.hero--home::before,.hero--home::after{content:""; position:absolute; z-index:-1;
  border-radius:50%; pointer-events:none}
.hero--home::before{width:430px; height:430px; top:-160px; right:-110px;
  background:radial-gradient(circle,rgba(255,93,71,.38),rgba(255,93,71,0) 65%)}
.hero--home::after{width:300px; height:300px; bottom:-130px; left:-90px;
  background:radial-gradient(circle,rgba(46,196,182,.36),rgba(46,196,182,0) 65%)}
@keyframes hero-drift-a{from{transform:translate3d(0,0,0)} to{transform:translate3d(0,52px,0)}}
@keyframes hero-drift-b{from{transform:translate3d(0,0,0)} to{transform:translate3d(0,-34px,0)}}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  @supports (animation-timeline: scroll()){
    .hero--home::before{animation:hero-drift-a linear both;
      animation-timeline:scroll(root block); animation-range:0 800px}
    .hero--home::after{animation:hero-drift-b linear both;
      animation-timeline:scroll(root block); animation-range:0 800px}
  }
}

.wrap{max-width:var(--wrap-w); margin:0 auto; padding:0 24px 72px}
/* section headings as stickers */
h2.sec{display:inline-block; font-family:var(--font-round);
  font-size:21px; font-weight:800; letter-spacing:.04em; line-height:1.4;
  margin:48px 0 20px; padding:7px 18px;
  background:var(--yellow-soft); border:2.5px solid var(--ink); border-radius:var(--radius-pill);
  box-shadow:var(--pop-shadow-s)}

/* cards — thick ink border + hard offset shadow, playful lift on hover */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:22px}
.card{background:var(--card); border:2.5px solid var(--ink); border-radius:20px;
  box-shadow:var(--pop-shadow); padding:22px; position:relative;
  transition:transform var(--dur) var(--ease-pop),box-shadow var(--dur) var(--ease)}
.card h3{font-size:17px; margin-bottom:8px; line-height:1.55}
.card h3 a{color:var(--ink)}
.card h3 a::after{content:""; position:absolute; inset:0}
.card p{font-size:14px; color:var(--sub)}
@media (hover:hover){
  .card:hover{transform:translate(-2px,-4px); box-shadow:var(--pop-shadow-l)}
  .card:hover h3 a{color:var(--accent); text-decoration:none}
  .card:hover .tag{transform:rotate(-3deg) scale(1.07)}
}
/* category chips as stickers; colors rotate per card for a multi-hue grid */
.tag{display:inline-block; background:var(--yellow); color:var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.03em;
  padding:3px 11px; border:2px solid var(--ink); border-radius:var(--radius-pill);
  box-shadow:2px 2px 0 var(--ink); margin-bottom:12px;
  transition:transform var(--dur) var(--ease-pop)}
.grid .card:nth-child(4n+2) .tag{background:var(--mint-soft)}
.grid .card:nth-child(4n+3) .tag{background:var(--coral-soft)}
.grid .card:nth-child(4n) .tag{background:var(--sky-soft)}

.policy{background:var(--card); border:2.5px solid var(--ink); border-radius:20px;
  box-shadow:var(--pop-shadow); padding:24px; margin-top:48px}
.policy h2{font-family:var(--font-round); font-size:18px; font-weight:800; margin-bottom:10px}
.policy p, .policy li{font-size:14px; color:var(--sub)}
.policy ul{padding-left:20px}

/* article pages */
article.post{background:var(--card); border:2.5px solid var(--ink); border-radius:24px;
  box-shadow:8px 8px 0 var(--coral-soft); padding:36px; margin-top:36px}
article.post h1{font-family:var(--font-round); font-size:clamp(22px,5vw,28px); line-height:1.5; font-weight:800; letter-spacing:.02em; margin-bottom:12px}
/* PR disclosure as a sunny sticker — distinct on purpose */
.pr-box{background:var(--pr-bg); border:2.5px solid var(--ink); border-radius:14px;
  box-shadow:var(--pop-shadow-s);
  padding:12px 16px; font-size:13px; font-weight:600; margin-bottom:24px}
.meta{font-size:13px; color:var(--sub); margin-bottom:20px}
article.post h2{font-family:var(--font-round); font-size:20px; font-weight:800; letter-spacing:.02em;
  margin:30px 0 12px; padding-left:12px; border-left:7px solid var(--mint); line-height:1.5}
article.post p{margin-bottom:14px}
.fact-box{background:#f2fbf7; border:2px solid var(--ink); border-radius:var(--radius-m); padding:16px 20px; margin:20px 0}
.fact-box table{width:100%; border-collapse:collapse; font-size:14px}
.fact-box td{padding:6px 4px; border-bottom:1px solid var(--line)}
.fact-box td:first-child{color:var(--sub); width:34%}
.fact-box tr:last-child td{border-bottom:none}

/* CTA — solid vivid fill, ink frame, hard shadow, little hop on hover */
.cta{display:block; text-align:center; background:var(--coral-deep); color:var(--on-accent);
  padding:15px 20px; border:2.5px solid var(--ink); border-radius:var(--radius-pill);
  font-family:var(--font-round); font-weight:800; letter-spacing:.03em; font-size:17px;
  box-shadow:var(--pop-shadow-s); margin:24px 0;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease-pop)}
.cta:hover{text-decoration:none; background:var(--coral-deep-hover);
  box-shadow:6px 6px 0 var(--ink); transform:translate(-1px,-3px)}
.cta:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}

footer.site{border-top:3px solid var(--ink); padding:28px 24px; text-align:center;
  font-size:13px; color:var(--sub); background:var(--yellow-soft)}
footer.site a{color:var(--ink); font-weight:700; margin:0 10px}

/* small screens (mobile first priority) */
@media(max-width:640px){
  header.site{padding:12px 16px}
  .logo{font-size:20px}
  nav.main a{padding:6px 9px; font-size:13px}
  .hero{padding:52px 20px 44px}
  .hero--home::before{width:260px; height:260px; top:-100px; right:-80px}
  .hero--home::after{width:190px; height:190px; bottom:-90px; left:-70px}
  .wrap{padding:0 16px 56px}
  .grid{gap:16px}
  .card{padding:18px; box-shadow:5px 5px 0 var(--ink)}
  article.post{padding:24px 18px; margin-top:24px; box-shadow:5px 5px 0 var(--coral-soft)}
  h2.sec{margin:36px 0 16px; font-size:19px}
}

/* ===== visual system v4: imagery + motion =====
   Carried over from v3: 案2 (image fade + aspect-ratio, CLS zero) as the
   base, 案1 (IntersectionObserver scroll fade-in) as the main motion,
   案3 (eyecatch-only light parallax). transform/opacity only.
   v4 change: illustrations are NOT replaced — they sit in pop frames
   (thick ink borders + colored hard shadows) so the warm artwork reads
   as intentional inside the vivid system.
   Content stays visible without JS: hidden start states are gated behind
   html.js, which only the inline head script + site.js can set. */

/* card thumbnails (index / category / related) */
.card .thumb{display:block; aspect-ratio:16/9; overflow:hidden;
  border:2px solid var(--ink); border-radius:14px; margin-bottom:14px; background:var(--accent-soft)}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* home hero image — sunny frame */
.hero-visual{max-width:880px; margin:30px auto 0; border:3px solid var(--ink); border-radius:var(--radius-l);
  overflow:hidden; box-shadow:10px 10px 0 var(--yellow); aspect-ratio:16/9; background:var(--accent-soft)}
.hero-visual img{width:100%; height:100%; object-fit:cover; display:block}

/* category hero visual band — teal frame */
.cat-visual{margin:28px 0 4px; border:3px solid var(--ink); border-radius:var(--radius-l); overflow:hidden;
  box-shadow:8px 8px 0 var(--teal); aspect-ratio:21/9; background:var(--accent-soft)}
.cat-visual img{width:100%; height:100%; object-fit:cover; display:block}

/* article figures — coral frame on the eyecatch, ink frame on figures */
.eyecatch{margin:0 0 8px; border:3px solid var(--ink); border-radius:var(--radius-l); overflow:hidden;
  box-shadow:8px 8px 0 var(--coral); aspect-ratio:16/9; background:var(--accent-soft); position:relative}
.eyecatch img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.fig{margin:26px 0}
.fig .frame{border:2.5px solid var(--ink); border-radius:var(--radius-m); overflow:hidden; aspect-ratio:16/9;
  background:var(--accent-soft); box-shadow:var(--pop-shadow)}
.fig img{width:100%; height:100%; object-fit:cover; display:block}
figcaption, .figcap{font-size:12px; color:var(--sub); margin-top:8px; line-height:1.6}
.img-note{font-size:12px; color:var(--sub); margin:0 0 20px}

/* image load fade （案2) — only when JS is active */
html.js img.fade{opacity:0; transition:opacity 400ms var(--ease)}
html.js img.fade.loaded{opacity:1}

/* scroll fade-in （案1) — only when JS is active; slight overshoot for pop */
html.js .reveal{opacity:0; transform:translateY(16px) scale(.985);
  transition:opacity 520ms var(--ease),transform 560ms var(--ease-pop)}
html.js .reveal.in{opacity:1; transform:none}

/* eyecatch-only light parallax （案3): CSS scroll-driven, degrades to still */
@keyframes eyecatch-drift{from{transform:scale(1.12) translateY(-2.5%)} to{transform:scale(1.12) translateY(2.5%)}}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .eyecatch img{animation:eyecatch-drift linear both;
      animation-timeline:scroll(root block); animation-range:0 900px}
  }
}

/* article body extras for deep articles */
article.post ul, article.post ol{padding-left:22px; margin-bottom:14px}
article.post li{margin-bottom:6px}
.table-scroll{overflow-x:auto; margin:18px 0; -webkit-overflow-scrolling:touch}
table.spec{width:100%; border-collapse:collapse; font-size:14px; min-width:520px}
table.spec th, table.spec td{border:1px solid #d8d2c4; padding:8px 10px; text-align:left; vertical-align:top}
table.spec th{background:var(--yellow-soft); color:var(--ink); font-weight:700; white-space:nowrap}
table.spec td:first-child{font-weight:600; width:18%}
.sources{font-size:13px; color:var(--sub)}
.sources li{word-break:break-all}
.related{margin-top:40px}
.related h2{font-size:19px; margin-bottom:16px}

/* reduced motion: no transitions, no parallax, no smooth scroll */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1; transform:none}
  html.js img.fade{opacity:1}
}