:root {
  /* フォントサイズ */
--font-size-base: clamp( 0.875rem, 0.8rem + 0.3vw, 1rem );/* 標準サイズ (14px ~ 16px) */
--font-size-small: clamp( 0.75rem, 0.7rem + 0.2vw, 0.875rem );/* 小さいサイズ (12px ~ 14px) */
--font-size-medium: clamp( 1rem, 0.95rem + 0.25vw, 1.125rem );/* 中くらい (16px ~ 18px) */
--font-size-large: clamp( 1.25rem, 1.15rem + 0.5vw, 1.5rem );/* 大きいサイズ (20px ~ 24px) */
--font-size-xlarge: clamp( 1.5rem, 1.3rem + 1vw, 2rem );/* 特大サイズ (24px ~ 32px) */
--font-size-xxlarge: clamp( 1.875rem, 1.6rem + 1.35vw, 2.5rem );/* 特大と超特大の中間サイズ (30px ~ 40px) */
--font-size-ularge: clamp( 2.25rem, 1.9rem + 1.7vw, 3.125rem );/* 超特大 (36px ~ 50px) */
  /* 基本の行間 */
  --line-height-base: 1.6;
  /* 基本の背景・テキスト色 */
  --color-background-body: #d8e698; /* ボディ全体の背景 */
  --color-text-body: #1b2e1e; /* ボディ全体のテキスト */
  --secondary-bg-color: #8cc31e;
  --color-background-inverse: #2c3e2e; /* 反転背景  */
  --color-text-inverse: #ffffff; /* 反転テキスト */
  --color-background-subtle: #ffffff; /* カードの背景などに使えるすっきりした白 */
  --color-text-subtle: #5a6f5d; /* 補足テキストや日付などに使う少し薄いセージ */
  --color-accent: #388e3c;
  /* SDGs配色 */
  --color-mokuhyou1: #e5243b; /* 目標1貧困をなくそう */
  --color-mokuhyou2: #dda63a; /* 目標2飢餓をゼロに */
  --color-mokuhyou3: #4c9f38; /* 目標3すべての人に健康と福祉を */
  --color-mokuhyou4: #c5192d; /* 目標4質の高い教育をみんなに */
  --color-mokuhyou5: #ff3a21; /* 目標5ジェンダー平等を実現しよう */
  --color-mokuhyou6: #26bde2; /* 目標6安全な水とトイレを世界に */
  --color-mokuhyou7: #fcc30b; /* 目標7エネルギーをみんなにそしてクリーンに */
  --color-mokuhyou8: #a21942; /* 目標8働きがいも経済成長も */
  --color-mokuhyou9: #fd6925; /* 目標9産業と技術革新の基盤をつくろう */
  --color-mokuhyou10: #dd1367; /* 目標10人や国の不等をなくそう */
  --color-mokuhyou11: #fd9d24; /* 目標11住み続けられるまちづくりを */
  --color-mokuhyou12: #bf8b2e; /* 目標12つくる責任 つかう責任 */
  --color-mokuhyou13: #3f7e44; /* 目標13気候変動に具体的な対策を */
  --color-mokuhyou14: #0a97d9; /* 目標14海の豊かさを守ろう */
  --color-mokuhyou15: #56c02b; /* 目標15陸の豊かさも守ろう */
  --color-mokuhyou16: #00689d; /* 目標16平和と公正をすべての人に */
  --color-mokuhyou17: #19486a; /* 目標17パートナーシップで目標を達成しよう */
  /* アクセント */
  --s-0: 0;
  --s-1: 0.25rem; /* 4px */
  --s-2: 0.5rem; /* 8px */
  --s-3: 1rem; /* 16px */
  --s-4: 1.5rem; /* 24px */
  --s-5: 3rem; /* 48px */
  --s-6: 3.5rem;
  --s-7: 4rem;
  --s-8: 4.5rem;
  --s-9: 5rem;
  /* ダークモード禁止 */
  color-scheme: light;
}

/* ==========================================================================
html、body、その他共通モノ
========================================================================== */
html {
  font-size: 100%;
}

body {
  background-color: #ffffff;
  color: #000000;
  line-height: var(--line-height-base);
  color: var(--color-text-body);
}

/* フォントを小さく・大きくする */
.font-small { font-size: var(--font-size-small); }
.font-base { font-size: var(--font-size-base); }
.font-medium { font-size: var(--font-size-medium); }
.font-large { font-size: var(--font-size-large); }
.font-xlarge { font-size: var(--font-size-xlarge); }
.font-bold { font-weight: bold; }

/* テキストの位置 */
.ac { text-align: center; }
.al { text-align: left; }
.ar { text-align: right; }

/* モバイルではデフォルトのインラインブロックで改行を許可 */
.break-control { display: inline-block; }

/* モバイルで長いリンクを改行する */
.url-break { word-break: break-all; }

/* 画像のサイズ調整 */
img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
SDGs色
========================================================================== */
/* 背景色として使う */
.bg-mokuhyou1 { background-color: var(--color-mokuhyou1); }
.bg-mokuhyou2 { background-color: var(--color-mokuhyou2); }
.bg-mokuhyou3 { background-color: var(--color-mokuhyou3); }
.bg-mokuhyou4 { background-color: var(--color-mokuhyou4); }
.bg-mokuhyou5 { background-color: var(--color-mokuhyou5); }
.bg-mokuhyou6 { background-color: var(--color-mokuhyou6); }
.bg-mokuhyou7 { background-color: var(--color-mokuhyou7); }
.bg-mokuhyou8 { background-color: var(--color-mokuhyou8); }
.bg-mokuhyou9 { background-color: var(--color-mokuhyou9); }
.bg-mokuhyou10 { background-color: var(--color-mokuhyou10); }
.bg-mokuhyou11 { background-color: var(--color-mokuhyou11); }
.bg-mokuhyou12 { background-color: var(--color-mokuhyou12); }
.bg-mokuhyou13 { background-color: var(--color-mokuhyou13); }
.bg-mokuhyou14 { background-color: var(--color-mokuhyou14); }
.bg-mokuhyou15 { background-color: var(--color-mokuhyou15); }
.bg-mokuhyou16 { background-color: var(--color-mokuhyou16); }
.bg-mokuhyou17 { background-color: var(--color-mokuhyou17); }

/* 文字色として使う */
.text-mokuhyou1 { color: var(--color-mokuhyou1); }
.text-mokuhyou2 { color: var(--color-mokuhyou2); }
.text-mokuhyou3 { color: var(--color-mokuhyou3); }
.text-mokuhyou4 { color: var(--color-mokuhyou4); }
.text-mokuhyou5 { color: var(--color-mokuhyou5); }
.text-mokuhyou6 { color: var(--color-mokuhyou6); }
.text-mokuhyou7 { color: var(--color-mokuhyou7); }
.text-mokuhyou8 { color: var(--color-mokuhyou8); }
.text-mokuhyou9 { color: var(--color-mokuhyou9); }
.text-mokuhyou10 { color: var(--color-mokuhyou10); }
.text-mokuhyou11 { color: var(--color-mokuhyou11); }
.text-mokuhyou12 { color: var(--color-mokuhyou12); }
.text-mokuhyou13 { color: var(--color-mokuhyou13); }
.text-mokuhyou14 { color: var(--color-mokuhyou14); }
.text-mokuhyou15 { color: var(--color-mokuhyou15); }
.text-mokuhyou16 { color: var(--color-mokuhyou16); }
.text-mokuhyou17 { color: var(--color-mokuhyou17); }

/* ボーダー色として使う */
.border-mokuhyou1 { border-color: var(--color-mokuhyou1); }
.border-mokuhyou2 { border-color: var(--color-mokuhyou2); }
.border-mokuhyou3 { border-color: var(--color-mokuhyou3); }
.border-mokuhyou4 { border-color: var(--color-mokuhyou4); }
.border-mokuhyou5 { border-color: var(--color-mokuhyou5); }
.border-mokuhyou6 { border-color: var(--color-mokuhyou6); }
.border-mokuhyou7 { border-color: var(--color-mokuhyou7); }
.border-mokuhyou8 { border-color: var(--color-mokuhyou8); }
.border-mokuhyou9 { border-color: var(--color-mokuhyou9); }
.border-mokuhyou10 { border-color: var(--color-mokuhyou10); }
.border-mokuhyou11 { border-color: var(--color-mokuhyou11); }
.border-mokuhyou12 { border-color: var(--color-mokuhyou12); }
.border-mokuhyou13 { border-color: var(--color-mokuhyou13); }
.border-mokuhyou14 { border-color: var(--color-mokuhyou14); }
.border-mokuhyou15 { border-color: var(--color-mokuhyou15); }
.border-mokuhyou16 { border-color: var(--color-mokuhyou16); }
.border-mokuhyou17 { border-color: var(--color-mokuhyou17); }
/* ==========================================================================
TOPに戻る
========================================================================== */
.pagetop {
  height: 40px;
  width: 40px;
  position: fixed;
  right: 20px;
  bottom: 60px;
  background: var(--color-background-body);
  border: solid 2px var(--color-accent);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid var(--color-accent);
  border-right: 3px solid var(--color-accent);
  transform: translateY(20%) rotate(-45deg);
}

/* ==========================================================================
パディング
========================================================================== */
/* --- 全方位 (All) --- */
.p-0 { padding: var(--s-0) !important; }
.p-1 { padding: var(--s-1) !important; }
.p-2 { padding: var(--s-2) !important; }
.p-3 { padding: var(--s-3) !important; }
.p-4 { padding: var(--s-4) !important; }
.p-5 { padding: var(--s-5) !important; }
.p-6 { padding: var(--s-6) !important; }
.p-7 { padding: var(--s-7) !important; }

/* --- 上下軸 (Block / Y軸) --- */
.py-0 { padding-block: var(--s-0) !important; }
.py-1 { padding-block: var(--s-1) !important; }
.py-2 { padding-block: var(--s-2) !important; }
.py-3 { padding-block: var(--s-3) !important; }
.py-4 { padding-block: var(--s-4) !important; }
.py-5 { padding-block: var(--s-5) !important; }
.py-6 { padding-block: var(--s-6) !important; }
.py-7 { padding-block: var(--s-7) !important; }

/* --- 左右軸 (Inline / X軸) --- */
.px-0 { padding-inline: var(--s-0) !important; }
.px-1 { padding-inline: var(--s-1) !important; }
.px-2 { padding-inline: var(--s-2) !important; }
.px-3 { padding-inline: var(--s-3) !important; }
.px-4 { padding-inline: var(--s-4) !important; }
.px-5 { padding-inline: var(--s-5) !important; }
.px-6 { padding-inline: var(--s-6) !important; }
.px-7 { padding-inline: var(--s-7) !important; }

/* --- 上 (Block Start / Top相当) --- */
.pt-0 { padding-block-start: var(--s-0) !important; }
.pt-1 { padding-block-start: var(--s-1) !important; }
.pt-2 { padding-block-start: var(--s-2) !important; }
.pt-3 { padding-block-start: var(--s-3) !important; }
.pt-4 { padding-block-start: var(--s-4) !important; }
.pt-5 { padding-block-start: var(--s-5) !important; }
.pt-6 { padding-block-start: var(--s-6) !important; }
.pt-7 { padding-block-start: var(--s-7) !important; }

/* --- 下 (Block End / Bottom相当) --- */
.pb-0 { padding-block-end: var(--s-0) !important; }
.pb-1 { padding-block-end: var(--s-1) !important; }
.pb-2 { padding-block-end: var(--s-2) !important; }
.pb-3 { padding-block-end: var(--s-3) !important; }
.pb-4 { padding-block-end: var(--s-4) !important; }
.pb-5 { padding-block-end: var(--s-5) !important; }
.pb-6 { padding-block-end: var(--s-6) !important; }
.pb-7 { padding-block-end: var(--s-7) !important; }

/* --- 左 (Inline Start / Left相当) --- */
.ps-0 { padding-inline-start: var(--s-0) !important; }
.ps-1 { padding-inline-start: var(--s-1) !important; }
.ps-2 { padding-inline-start: var(--s-2) !important; }
.ps-3 { padding-inline-start: var(--s-3) !important; }
.ps-4 { padding-inline-start: var(--s-4) !important; }
.ps-5 { padding-inline-start: var(--s-5) !important; }
.ps-6 { padding-inline-start: var(--s-6) !important; }
.ps-7 { padding-inline-start: var(--s-7) !important; }

/* --- 右 (Inline End / Right相当) --- */
.pe-0 { padding-inline-end: var(--s-0) !important; }
.pe-1 { padding-inline-end: var(--s-1) !important; }
.pe-2 { padding-inline-end: var(--s-2) !important; }
.pe-3 { padding-inline-end: var(--s-3) !important; }
.pe-4 { padding-inline-end: var(--s-4) !important; }
.pe-5 { padding-inline-end: var(--s-5) !important; }
.pe-6 { padding-inline-end: var(--s-6) !important; }
.pe-7 { padding-inline-end: var(--s-7) !important; }

/* ==========================================================================
マージン
========================================================================== */
/* --- 全方位 (All) --- */
.m-0 { margin: var(--s-0) !important; }
.m-1 { margin: var(--s-1) !important; }
.m-2 { margin: var(--s-2) !important; }
.m-3 { margin: var(--s-3) !important; }
.m-4 { margin: var(--s-4) !important; }
.m-5 { margin: var(--s-5) !important; }
.m-6 { margin: var(--s-6) !important; }
.m-7 { margin: var(--s-7) !important; }

/* --- 上下軸 (Block / Y軸) --- */
.my-0 { margin-block: var(--s-0) !important; }
.my-1 { margin-block: var(--s-1) !important; }
.my-2 { margin-block: var(--s-2) !important; }
.my-3 { margin-block: var(--s-3) !important; }
.my-4 { margin-block: var(--s-4) !important; }
.my-5 { margin-block: var(--s-5) !important; }
.my-6 { margin-block: var(--s-6) !important; }
.my-7 { margin-block: var(--s-7) !important; }

/* --- 左右軸 (Inline / X軸) --- */
.mx-0 { margin-inline: var(--s-0) !important; }
.mx-1 { margin-inline: var(--s-1) !important; }
.mx-2 { margin-inline: var(--s-2) !important; }
.mx-3 { margin-inline: var(--s-3) !important; }
.mx-4 { margin-inline: var(--s-4) !important; }
.mx-5 { margin-inline: var(--s-5) !important; }
.mx-6 { margin-inline: var(--s-6) !important; }
.mx-7 { margin-inline: var(--s-7) !important; }
.mx-auto { margin-inline: auto !important; } /* 中央配置用 */

/* --- 上 (Block Start / Top相当) --- */
.mt-0 { margin-block-start: var(--s-0) !important; }
.mt-1 { margin-block-start: var(--s-1) !important; }
.mt-2 { margin-block-start: var(--s-2) !important; }
.mt-3 { margin-block-start: var(--s-3) !important; }
.mt-4 { margin-block-start: var(--s-4) !important; }
.mt-5 { margin-block-start: var(--s-5) !important; }
.mt-6 { margin-block-start: var(--s-6) !important; }
.mt-7 { margin-block-start: var(--s-7) !important; }

/* --- 下 (Block End / Bottom相当) --- */
.mb-0 { margin-block-end: var(--s-0) !important; }
.mb-1 { margin-block-end: var(--s-1) !important; }
.mb-2 { margin-block-end: var(--s-2) !important; }
.mb-3 { margin-block-end: var(--s-3) !important; }
.mb-4 { margin-block-end: var(--s-4) !important; }
.mb-5 { margin-block-end: var(--s-5) !important; }
.mb-6 { margin-block-end: var(--s-6) !important; }
.mb-7 { margin-block-end: var(--s-7) !important; }

/* --- 左 (Inline Start / Left相当) --- */
.ms-0 { margin-inline-start: var(--s-0) !important; }
.ms-1 { margin-inline-start: var(--s-1) !important; }
.ms-2 { margin-inline-start: var(--s-2) !important; }
.ms-3 { margin-inline-start: var(--s-3) !important; }
.ms-4 { margin-inline-start: var(--s-4) !important; }
.ms-5 { margin-inline-start: var(--s-5) !important; }
.ms-6 { margin-inline-start: var(--s-6) !important; }
.ms-7 { margin-inline-start: var(--s-7) !important; }

/* --- 右 (Inline End / Right相当) --- */
.me-0 { margin-inline-end: var(--s-0) !important; }
.me-1 { margin-inline-end: var(--s-1) !important; }
.me-2 { margin-inline-end: var(--s-2) !important; }
.me-3 { margin-inline-end: var(--s-3) !important; }
.me-4 { margin-inline-end: var(--s-4) !important; }
.me-5 { margin-inline-end: var(--s-5) !important; }
.me-6 { margin-inline-end: var(--s-6) !important; }
.me-7 { margin-inline-end: var(--s-7) !important; }

/* ==========================================================================
タブレット以上
========================================================================== */
@media (min-width: 768px) {
  .sp-only { display: none !important; }
  .pc-only { display: block !important; }
  .copyright { display: inline; }
  .break-control { white-space: nowrap; }
}