/* かいもの研究所 — design system v2 (2026-11-13)
   Material Design-conscious tokens: color / type / spacing / radius / elevation.
   Simple architecture, warm brand palette kept. CSS only, no JS. */
:root{
  /* color (Material roles mapped to the brand palette) */
  --ink:#2b2622;            /* on-surface */
  --sub:#6f6459;            /* on-surface-variant */
  --bg:#faf7f2;             /* background */
  --card:#ffffff;           /* surface */
  --accent:#b3793f;         /* primary */
  --accent-dark:#96602c;    /* primary, hover/pressed */
  --accent-soft:#f3e7d7;    /* primary-container / surface-variant */
  --line:#e7ded2;           /* outline */
  --on-accent:#ffffff;
  --pr-bg:#fdf3e3;          /* PR disclosure box (kept distinct on purpose) */
  --pr-line:#ecd9b8;
  /* typography */
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  /* radius (Material scale) */
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-pill:999px;
  /* elevation (layered, warm-tinted umbra/penumbra) */
  --shadow-1:0 1px 2px rgba(59,45,32,.05),0 1px 3px 1px rgba(59,45,32,.08);
  --shadow-2:0 4px 8px 3px rgba(59,45,32,.06),0 1px 3px rgba(59,45,32,.12);
  --shadow-header:0 1px 3px rgba(59,45,32,.07),0 4px 12px rgba(59,45,32,.05);
  /* shape & motion */
  --wrap-w:960px;
  --ease:cubic-bezier(.2,0,0,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(--accent-soft)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-dark); outline-offset:2px}

/* header — simple, sticky, light elevation */
header.site{background:var(--card); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-header);
  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-size:22px; font-weight:700; letter-spacing:.14em; color:var(--ink); line-height:1.35}
.logo small{display:block; font-size:11px; letter-spacing:.08em; color:var(--sub); font-weight:400}
nav.main{display:flex; flex-wrap:wrap; gap:2px}
nav.main a{color:var(--ink); font-size:14px; padding:8px 12px; border-radius:var(--radius-pill);
  transition:background var(--dur) var(--ease)}
nav.main a:hover{background:var(--accent-soft); text-decoration:none}

/* hero (shared) */
.hero{padding:72px 24px 56px; text-align:center;
  background:linear-gradient(180deg,#fdfbf8, var(--bg))}
.hero h1{font-size:clamp(24px,6vw,32px); line-height:1.5; font-weight:700; margin-bottom:16px}
.hero p{color:var(--sub); max-width:640px; margin:0 auto}

/* hero, top page only — soft decorative shapes + 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(179,121,63,.17),rgba(179,121,63,0) 65%)}
.hero--home::after{width:300px; height:300px; bottom:-130px; left:-90px;
  background:radial-gradient(circle,rgba(179,121,63,.12),rgba(179,121,63,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}
h2.sec{font-size:20px; margin:48px 0 20px; padding-left:12px;
  border-left:4px solid var(--accent); line-height:1.4}

/* cards — one unified type: chip -> title -> summary (whole card tappable) */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:20px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-1); padding:22px; position:relative;
  transition:transform var(--dur) var(--ease),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:translateY(-3px); box-shadow:var(--shadow-2)}
  .card:hover h3 a{color:var(--accent-dark); text-decoration:none}
}
.tag{display:inline-block; background:var(--accent-soft); color:var(--accent-dark);
  font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:3px 10px; border-radius:var(--radius-pill); margin-bottom:10px}

.policy{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-1); padding:24px; margin-top:48px}
.policy h2{font-size:17px; 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:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-1); padding:36px; margin-top:36px}
article.post h1{font-size:clamp(21px,5vw,26px); line-height:1.5; margin-bottom:12px}
.pr-box{background:var(--pr-bg); border:1px solid var(--pr-line); border-radius:10px;
  padding:12px 16px; font-size:13px; margin-bottom:24px}
.meta{font-size:13px; color:var(--sub); margin-bottom:20px}
article.post h2{font-size:19px; margin:28px 0 10px}
article.post p{margin-bottom:14px}
.fact-box{background:var(--bg); border:1px solid var(--line); 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 — Material filled-button shape */
.cta{display:block; text-align:center; background:var(--accent); color:var(--on-accent);
  padding:15px 20px; border-radius:var(--radius-pill); font-weight:700; letter-spacing:.02em;
  box-shadow:var(--shadow-1); margin:24px 0;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.cta:hover{text-decoration:none; background:var(--accent-dark); box-shadow:var(--shadow-2)}

footer.site{border-top:1px solid var(--line); padding:28px 24px; text-align:center;
  font-size:13px; color:var(--sub); background:var(--card)}
footer.site a{color:var(--sub); margin:0 10px}

/* small screens (mobile first priority) */
@media(max-width:640px){
  header.site{padding:12px 16px}
  .logo{font-size:19px}
  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:14px}
  .card{padding:18px}
  article.post{padding:24px 18px; margin-top:24px}
  h2.sec{margin:36px 0 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}
}