@charset "utf-8";
/* CSS Document */

:root {
  --ink: #2f3a2f;
  --highlight: #5cb85c; /* 黄緑系（視認性高め） */
}

/* すべての要素で余白計算を安定化 */
*,
*::before,
*::after { box-sizing: border-box; }

/* 画面下まで確実に塗る（dvh採用） */
html, body { height: auto; min-height: 100dvh; }

/* 背景は html に敷く（白帯防止） */
html {
  background: linear-gradient(180deg, #fff 0%, #f9fff6 100%);
}

/* body は透明。文字などの共通スタイルだけ */
body {
  margin: 0;
  background: transparent;
  font-family: 'Noto Sans JP', system-ui, -apple-system, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  text-align: center;
  color: var(--ink);
  line-height: 1.7;
}

/* レイアウト */
.wrap {
  max-width: min(1080px, 92vw);
  margin: min(8vh, 72px) auto;
  padding: 0 20px;
}

/* キービジュアル */
.kv {
  margin: 0 auto 32px;
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(60, 100, 60, .06);
}
.kv img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* お知らせ文 */
.note {
  font-size: clamp(16px, 1.6vw, 22px); /* 最小16px、PCでは最大22px */
  line-height: 1.8;
  margin-top: 28px;
  color: var(--highlight);
}
.note .date { font-weight: 700; }

/* PCでは改行タグを無効にする */
.br-sp { display: none; }

/* SP調整 */
@media (max-width: 600px){
  .wrap {
    margin: 14vh auto 6vh; /* 上をさらに大きく（14vh）下も少しゆとり */
    padding: 0 6px;        /* 左右余白をかなり減らす（10px → 6px） */
  }

  .kv {
    border-radius: 14px;
    padding: 6px;          /* 白フチも細めに */
  }

  .kv img {
    border-radius: 10px;
    width: 108%;           /* 少し大きめ（105% → 108%） */
    max-width: none;
    margin-left: -4%;      /* 中央に寄せる */
  }

  .note {
    font-size: 15px;
    margin-top: 36px;      /* テキスト上の余白もさらに広げる */
  }

  .br-sp { display: block; }
}

/* Safari/iOSのビューポート対策（必要環境で有効） */
@supports (-webkit-touch-callout: none) {
  html, body { min-height: -webkit-fill-available; }
}

/* 将来用：リンクのタップ強調を弱める */
a { -webkit-tap-highlight-color: rgba(0,0,0,0.06); }