@charset "UTF-8";

/* font */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

/* 共通 */
body {
  font-family: "M PLUS 1p", sans-serif;
}

body.is-locked {
  overflow: hidden;
}

:root {
  --drop-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
  --color-main: #4da3d9;
  --color-main2: #7fc8e8;
  --color-main3: #b7e4f8;
  --bubble-bg: #e9f6fb;
  --shadow: 4px 4px 6px rgba(0, 0, 0, 0.20);
}

.news-title {
  width: 100%;              /* ← まず横幅を持たせる */
  max-width: 700px;         /* ← 見せたい最大幅 */
  margin: 72px auto 0;      /* ← ページ中央に配置 */
  box-sizing: border-box;

  text-align: left;         /* ← 中の文字は左寄せ */

  font-size: 24px;
  line-height: 1.33;
  color: #000;

  padding-bottom: 12px;
  border-bottom: 1px dashed #000;
}

.osirase-title{
  display: inline-block;        /* ボーダーを文字幅に合わせる */
  font-size: 24px;
  line-height: 1.33;
  color: #3466a8;

  border: 2px solid #3466a8;    /* ボーダー色 */
  border-radius: 12px;         /* 角丸 */
  padding: 8px 20px;           /* 内側余白 */

  margin: 0;                   /* 余白調整（必要に応じて） */
}

/* 下に来る本文 */
.news-text {
  max-width: 700px;
  margin: 16px auto 164px;   /* ← 下線から少し余白 */
  text-align: left;

  font-size: 16px;       /* 普通のフォントサイズ */
  line-height: 1.7;
  color: #333;
}