/* ===== base.css ===== */

/* ===== CSS Tokens ===== */
:root {
  /* ======================
     Layout（レイアウト系）
  ====================== */
  --container: 1000px;
  --gap: 40px;
  --gap-row: 64px;

  /* ======================
     Radius（角丸系）
  ====================== */
  --radius-card: 16px;
  --radius-img: 12px;
  --radius-xl: 20px;

  /* ======================
     Shadow（影・立体感）
  ====================== */
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);
  --shadow-md: 0 10px 24px rgba(0,0,0,.12);
  --shadow: 0 10px 24px rgba(0,0,0,.08);

  /* ======================
     Color（カラー系）
  ====================== */
  --c-bg-dark: #222;
  --c-bg: #ffffff;
  --c-card: #ffffff;
  --c-gray: #eaeaea;
  --c-text: #111;
  --c-text-inv: #fff;
  --c-muted: #777;
  --c-accent: #f2f5cf;
}


/* ブラウザ差異リセット */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body{
    margin:0;
    padding:0;
    color:var(--c-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Noto Sans JP, Roboto, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
img{
    max-width:100%;
    display:block
}
a{
    color:inherit;text-decoration:none
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}