/* ==========================================================
   base.css … 色・文字・余白など、サイト全体の基本ルール
   ----------------------------------------------------------
   メインカラーは「外観 > カスタマイズ > みのぷらの設定」から
   変えられます（ここの --ac は初期値です）。
   ========================================================== */

:root {
  /* 色 */
  --ac: #CC3318;                                        /* メインカラー（朱色） */
  --tint: color-mix(in srgb, var(--ac) 8%, #fff);       /* うすい背景色 */
  --soft: color-mix(in srgb, var(--ac) 30%, #fff);      /* 点線・枠線用 */
  --ink: #1A1A1A;                                       /* 文字 */
  --ink-2: #444;                                        /* 説明文 */
  --mute: #77736F;                                      /* 日付・注釈 */
  --line: #EEEEEE;                                      /* 区切り線 */
  --line-2: #DDD8D3;                                    /* 入力欄の枠 */
  --paper: #F7F5F2;                                     /* 薄いグレー背景 */
  --ph: #E7E4E1;                                        /* 画像がないときの色 */

  /* 文字 */
  --font: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-en: 'Montserrat', sans-serif;

  /* 幅・余白 */
  --wrap: 1200px;
  --gutter: 20px;
  --radius: 12px;
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.8;
}
@media (min-width: 1024px) { body { font-size: 16px; } }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--soft); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1.45; }
p { margin: 0; }

/* 小さな英字ラベル（例：NEW POSTS） */
.an-label {
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ac);
}
@media (min-width: 1024px) { .an-label { font-size: 12px; } }

/* 画面読み上げ用（見た目には出さない） */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100; clip: auto; width: auto; height: auto;
  background: #fff; padding: 8px 14px; border-radius: 8px;
}