@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;700&display=swap");

/* =========================
   ブラウザデフォルトのリセット
========================= */

/* すべての要素のマージン、パディング、ボックスサイジングをリセット */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML 要素の基本フォントサイズを 16px に設定（1rem = 16px） */
html {
  font-size: 16px;
}

/* HTML5 要素のディスプレイを標準化 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

/* ボディの基本設定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #fff;
  line-height: 1.6 !important;
  color: #212529 !important;
}

/* リストのスタイルリセット */
ol, ul {
  list-style: none;
}

/* リンクの装飾リセット */
a {
  text-decoration: none;
  color: inherit;
}

/* =========================
   基本変数の定義
========================= */
:root {
  /* スペーサーの基準 */
  --spacer: 1rem;
  /* フォントサイズ */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --color-white: #FFFFFF;
  --color-orange: #F2701B;
  --color-green: #13AAA1;
  --color-blue: #1F78E5;
  --color-dark-blue: #05247C;
  --color-gray: #4D5571;
  --color-light-gray: #F8F9FA;
}

/* =========================
   カラー定義
========================= */

/* 背景色クラス */
.bg-white { background-color: var(--color-white) !important; }
.bg-orange { background-color: var(--color-orange) !important; }
.bg-green { background-color: var(--color-green) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.bg-dark-blue { background-color: var(--color-dark-blue) !important; }
.bg-light-gray { background-color: var(--color-light-gray) !important; }
/* 文字色クラス */
.text-orange { color: var(--color-orange) !important; }
.text-green { color: var(--color-green) !important; }
.text-blue { color: var(--color-blue) !important; }
.text-dark-blue { color: var(--color-dark-blue) !important; }
.text-white { color: var(--color-white) !important; }
.text-gray { color: var(--color-gray) !important; }

/* =========================
   透明度付き背景色クラス（20%, 40%, 80%）
========================= */
/* オレンジ */
.bg-orange-20 { background-color: rgba(242, 112, 27, 0.2) !important; }
.bg-orange-40 { background-color: rgba(242, 112, 27, 0.4) !important; }
.bg-orange-80 { background-color: rgba(242, 112, 27, 0.8) !important; }

/* グリーン */
.bg-green-20 { background-color: rgba(19, 170, 161, 0.2) !important; }
.bg-green-40 { background-color: rgba(19, 170, 161, 0.4) !important; }
.bg-green-80 { background-color: rgba(19, 170, 161, 0.8) !important; }

/* ブルー */
.bg-blue-20 { background-color: rgba(31, 120, 229, 0.2) !important; }
.bg-blue-40 { background-color: rgba(31, 120, 229, 0.4) !important; }
.bg-blue-80 { background-color: rgba(31, 120, 229, 0.8) !important; }

/* ダークブルー */
.bg-dark-blue-20 { background-color: rgba(5, 36, 124, 0.2) !important; }
.bg-dark-blue-40 { background-color: rgba(5, 36, 124, 0.4) !important; }
.bg-dark-blue-80 { background-color: rgba(5, 36, 124, 0.8) !important; }

/* =========================
   透明度付き文字色クラス（20%, 40%, 80%）
========================= */
/* オレンジ */
.text-orange-20 { color: rgba(242, 112, 27, 0.2) !important; }
.text-orange-40 { color: rgba(242, 112, 27, 0.4) !important; }
.text-orange-80 { color: rgba(242, 112, 27, 0.8) !important; }

/* グリーン */
.text-green-20 { color: rgba(19, 170, 161, 0.2) !important; }
.text-green-40 { color: rgba(19, 170, 161, 0.4) !important; }
.text-green-80 { color: rgba(19, 170, 161, 0.8) !important; }

/* ブルー */
.text-blue-20 { color: rgba(31, 120, 229, 0.2) !important; }
.text-blue-40 { color: rgba(31, 120, 229, 0.4) !important; }
.text-blue-80 { color: rgba(31, 120, 229, 0.8) !important; }

/* ダークブルー */
.text-dark-blue-20 { color: rgba(5, 36, 124, 0.2) !important; }
.text-dark-blue-40 { color: rgba(5, 36, 124, 0.4) !important; }
.text-dark-blue-80 { color: rgba(5, 36, 124, 0.8) !important; }

/* =========================
   コンテナ
========================= */

/* レスポンシブ固定幅コンテナ */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* フル幅コンテナ */
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* 各ブレイクポイントでの最大幅の設定 */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}

/* =========================
   行（Row）
========================= */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* =========================
   列（Column）
   クラス名は .col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* で使用
========================= */

/* デフォルト（xs）列スタイル */
[class*="col-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* xs（モバイル）用 */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* sm（≥576px）用 */
@media (min-width: 576px) {
  .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* md（≥768px）用 */
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* lg（≥992px）用 */
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* xl（≥1200px）用 */
@media (min-width: 1200px) {
  .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* =========================
   スペースツールクラス（マージン＆パディング）
========================= */

/* 全方向パディング */
.p-0 { padding: 0 !important; }
.p-1 { padding: calc(var(--spacer) * 0.25) !important; }
.p-2 { padding: calc(var(--spacer) * 0.5) !important; }
.p-3 { padding: var(--spacer) !important; }
.p-4 { padding: calc(var(--spacer) * 1.5) !important; }
.p-5 { padding: calc(var(--spacer) * 3) !important; }
.p-6 { padding: calc(var(--spacer) * 6) !important; }

/* 上方向パディング */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: calc(var(--spacer) * 0.25) !important; }
.pt-2 { padding-top: calc(var(--spacer) * 0.5) !important; }
.pt-3 { padding-top: var(--spacer) !important; }
.pt-4 { padding-top: calc(var(--spacer) * 1.5) !important; }
.pt-5 { padding-top: calc(var(--spacer) * 3) !important; }
.pt-6 { padding-top: calc(var(--spacer) * 6) !important; }


/* 下方向パディング */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: calc(var(--spacer) * 0.25) !important; }
.pb-2 { padding-bottom: calc(var(--spacer) * 0.5) !important; }
.pb-3 { padding-bottom: var(--spacer) !important; }
.pb-4 { padding-bottom: calc(var(--spacer) * 1.5) !important; }
.pb-5 { padding-bottom: calc(var(--spacer) * 3) !important; }
.pb-6 { padding-bottom: calc(var(--spacer) * 6) !important; }


/* 左方向パディング */
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: calc(var(--spacer) * 0.25) !important; }
.pl-2 { padding-left: calc(var(--spacer) * 0.5) !important; }
.pl-3 { padding-left: var(--spacer) !important; }
.pl-4 { padding-left: calc(var(--spacer) * 1.5) !important; }
.pl-5 { padding-left: calc(var(--spacer) * 3) !important; }
.pl-6 { padding-left: calc(var(--spacer) * 6) !important; }


/* 右方向パディング */
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: calc(var(--spacer) * 0.25) !important; }
.pr-2 { padding-right: calc(var(--spacer) * 0.5) !important; }
.pr-3 { padding-right: var(--spacer) !important; }
.pr-4 { padding-right: calc(var(--spacer) * 1.5) !important; }
.pr-5 { padding-right: calc(var(--spacer) * 3) !important; }
.pr-6 { padding-right: calc(var(--spacer) * 6) !important; }


/* 全方向マージン */
.m-0 { margin: 0 !important; }
.m-1 { margin: calc(var(--spacer) * 0.25) !important; }
.m-2 { margin: calc(var(--spacer) * 0.5) !important; }
.m-3 { margin: var(--spacer) !important; }
.m-4 { margin: calc(var(--spacer) * 1.5) !important; }
.m-5 { margin: calc(var(--spacer) * 3) !important; }
.m-6 { margin: calc(var(--spacer) * 6) !important; }

/* 上方向マージン */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: calc(var(--spacer) * 0.25) !important; }
.mt-2 { margin-top: calc(var(--spacer) * 0.5) !important; }
.mt-3 { margin-top: var(--spacer) !important; }
.mt-4 { margin-top: calc(var(--spacer) * 1.5) !important; }
.mt-5 { margin-top: calc(var(--spacer) * 3) !important; }
.mt-6 { margin-top: calc(var(--spacer) * 6) !important; }

/* 下方向マージン */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: calc(var(--spacer) * 0.25) !important; }
.mb-2 { margin-bottom: calc(var(--spacer) * 0.5) !important; }
.mb-3 { margin-bottom: var(--spacer) !important; }
.mb-4 { margin-bottom: calc(var(--spacer) * 1.5) !important; }
.mb-5 { margin-bottom: calc(var(--spacer) * 3) !important; }
.mb-6 { margin-bottom: calc(var(--spacer) * 6) !important; }

/* 左方向マージン */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: calc(var(--spacer) * 0.25) !important; }
.ml-2 { margin-left: calc(var(--spacer) * 0.5) !important; }
.ml-3 { margin-left: var(--spacer) !important; }
.ml-4 { margin-left: calc(var(--spacer) * 1.5) !important; }
.ml-5 { margin-left: calc(var(--spacer) * 3) !important; }
.ml-6 { margin-left: calc(var(--spacer) * 6) !important; }

/* 右方向マージン */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: calc(var(--spacer) * 0.25) !important; }
.mr-2 { margin-right: calc(var(--spacer) * 0.5) !important; }
.mr-3 { margin-right: var(--spacer) !important; }
.mr-4 { margin-right: calc(var(--spacer) * 1.5) !important; }
.mr-5 { margin-right: calc(var(--spacer) * 3) !important; }
.mr-6 { margin-right: calc(var(--spacer) * 6) !important; }

/* =========================
水平・垂直方向マージンユーティリティクラス
========================= */

/* 水平方向マージン (mx-*) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: calc(var(--spacer) * 0.25) !important; margin-right: calc(var(--spacer) * 0.25) !important; }
.mx-2 { margin-left: calc(var(--spacer) * 0.5) !important; margin-right: calc(var(--spacer) * 0.5) !important; }
.mx-3 { margin-left: var(--spacer) !important; margin-right: var(--spacer) !important; }
.mx-4 { margin-left: calc(var(--spacer) * 1.5) !important; margin-right: calc(var(--spacer) * 1.5) !important; }
.mx-5 { margin-left: calc(var(--spacer) * 3) !important; margin-right: calc(var(--spacer) * 3) !important; }
.mx-6 { margin-left: calc(var(--spacer) * 6) !important; margin-right: calc(var(--spacer) * 6) !important; }

/* 垂直方向マージン (my-*) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: calc(var(--spacer) * 0.25) !important; margin-bottom: calc(var(--spacer) * 0.25) !important; }
.my-2 { margin-top: calc(var(--spacer) * 0.5) !important; margin-bottom: calc(var(--spacer) * 0.5) !important; }
.my-3 { margin-top: var(--spacer) !important; margin-bottom: var(--spacer) !important; }
.my-4 { margin-top: calc(var(--spacer) * 1.5) !important; margin-bottom: calc(var(--spacer) * 1.5) !important; }
.my-5 { margin-top: calc(var(--spacer) * 3) !important; margin-bottom: calc(var(--spacer) * 3) !important; }
.my-6 { margin-top: calc(var(--spacer) * 6) !important; margin-bottom: calc(var(--spacer) * 6) !important; }

/* =========================
水平・垂直方向パディングユーティリティクラス
========================= */

/* 水平方向パディング (px-*) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: calc(var(--spacer) * 0.25) !important; padding-right: calc(var(--spacer) * 0.25) !important; }
.px-2 { padding-left: calc(var(--spacer) * 0.5) !important; padding-right: calc(var(--spacer) * 0.5) !important; }
.px-3 { padding-left: var(--spacer) !important; padding-right: var(--spacer) !important; }
.px-4 { padding-left: calc(var(--spacer) * 1.5) !important; padding-right: calc(var(--spacer) * 1.5) !important; }
.px-5 { padding-left: calc(var(--spacer) * 3) !important; padding-right: calc(var(--spacer) * 3) !important; }
.px-6 { padding-left: calc(var(--spacer) * 6) !important; padding-right: calc(var(--spacer) * 6) !important; }


/* 垂直方向パディング (py-*) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: calc(var(--spacer) * 0.25) !important; padding-bottom: calc(var(--spacer) * 0.25) !important; }
.py-2 { padding-top: calc(var(--spacer) * 0.5) !important; padding-bottom: calc(var(--spacer) * 0.5) !important; }
.py-3 { padding-top: var(--spacer) !important; padding-bottom: var(--spacer) !important; }
.py-4 { padding-top: calc(var(--spacer) * 1.5) !important; padding-bottom: calc(var(--spacer) * 1.5) !important; }
.py-5 { padding-top: calc(var(--spacer) * 3) !important; padding-bottom: calc(var(--spacer) * 3) !important; }
.py-6 { padding-top: calc(var(--spacer) * 6) !important; padding-bottom: calc(var(--spacer) * 6) !important; }


/* =========================
   マージン Auto ユーティリティクラス
========================= */
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.ms-auto { margin-inline-start: auto !important; }
.me-auto { margin-inline-end: auto !important; }

/* =========================
   レスポンシブ・マージンユーティリティクラス（lg：min-width: 992px）
========================= */
@media (min-width: 992px) {
  /* 上マージン */
  .mt-lg-0 { margin-top: 0 !important; }
  .mt-lg-1 { margin-top: calc(var(--spacer) * 0.25) !important; }
  .mt-lg-2 { margin-top: calc(var(--spacer) * 0.5) !important; }
  .mt-lg-3 { margin-top: var(--spacer) !important; }
  .mt-lg-4 { margin-top: calc(var(--spacer) * 1.5) !important; }
  .mt-lg-5 { margin-top: calc(var(--spacer) * 3) !important; }
  .mt-lg-6 { margin-top: calc(var(--spacer) * 6) !important; }
  
  /* 下マージン */
  .mb-lg-0 { margin-bottom: 0 !important; }
  .mb-lg-1 { margin-bottom: calc(var(--spacer) * 0.25) !important; }
  .mb-lg-2 { margin-bottom: calc(var(--spacer) * 0.5) !important; }
  .mb-lg-3 { margin-bottom: var(--spacer) !important; }
  .mb-lg-4 { margin-bottom: calc(var(--spacer) * 1.5) !important; }
  .mb-lg-5 { margin-bottom: calc(var(--spacer) * 3) !important; }
  .mb-lg-6 { margin-bottom: calc(var(--spacer) * 6) !important; }
  
  /* 左マージン */
  .ml-lg-0 { margin-left: 0 !important; }
  .ml-lg-1 { margin-left: calc(var(--spacer) * 0.25) !important; }
  .ml-lg-2 { margin-left: calc(var(--spacer) * 0.5) !important; }
  .ml-lg-3 { margin-left: var(--spacer) !important; }
  .ml-lg-4 { margin-left: calc(var(--spacer) * 1.5) !important; }
  .ml-lg-5 { margin-left: calc(var(--spacer) * 3) !important; }
  .ml-lg-6 { margin-left: calc(var(--spacer) * 6) !important; }
  
  /* 右マージン */
  .mr-lg-0 { margin-right: 0 !important; }
  .mr-lg-1 { margin-right: calc(var(--spacer) * 0.25) !important; }
  .mr-lg-2 { margin-right: calc(var(--spacer) * 0.5) !important; }
  .mr-lg-3 { margin-right: var(--spacer) !important; }
  .mr-lg-4 { margin-right: calc(var(--spacer) * 1.5) !important; }
  .mr-lg-5 { margin-right: calc(var(--spacer) * 3) !important; }
  .mr-lg-6 { margin-right: calc(var(--spacer) * 6) !important; }
  
  /* 水平方向マージン */
  .mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-lg-1 { margin-left: calc(var(--spacer) * 0.25) !important; margin-right: calc(var(--spacer) * 0.25) !important; }
  .mx-lg-2 { margin-left: calc(var(--spacer) * 0.5) !important; margin-right: calc(var(--spacer) * 0.5) !important; }
  .mx-lg-3 { margin-left: var(--spacer) !important; margin-right: var(--spacer) !important; }
  .mx-lg-4 { margin-left: calc(var(--spacer) * 1.5) !important; margin-right: calc(var(--spacer) * 1.5) !important; }
  .mx-lg-5 { margin-left: calc(var(--spacer) * 3) !important; margin-right: calc(var(--spacer) * 3) !important; }
  .mx-lg-6 { margin-left: calc(var(--spacer) * 6) !important; margin-right: calc(var(--spacer) * 6) !important; }
  
  /* 垂直方向マージン */
  .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-lg-1 { margin-top: calc(var(--spacer) * 0.25) !important; margin-bottom: calc(var(--spacer) * 0.25) !important; }
  .my-lg-2 { margin-top: calc(var(--spacer) * 0.5) !important; margin-bottom: calc(var(--spacer) * 0.5) !important; }
  .my-lg-3 { margin-top: var(--spacer) !important; margin-bottom: var(--spacer) !important; }
  .my-lg-4 { margin-top: calc(var(--spacer) * 1.5) !important; margin-bottom: calc(var(--spacer) * 1.5) !important; }
  .my-lg-5 { margin-top: calc(var(--spacer) * 3) !important; margin-bottom: calc(var(--spacer) * 3) !important; }
  .my-lg-6 { margin-top: calc(var(--spacer) * 6) !important; margin-bottom: calc(var(--spacer) * 6) !important; }
}

/* =========================
   レスポンシブ・パディングユーティリティクラス（lg：min-width: 992px）
========================= */
@media (min-width: 992px) {
  /* 上パディング */
  .pt-lg-0 { padding-top: 0 !important; }
  .pt-lg-1 { padding-top: calc(var(--spacer) * 0.25) !important; }
  .pt-lg-2 { padding-top: calc(var(--spacer) * 0.5) !important; }
  .pt-lg-3 { padding-top: var(--spacer) !important; }
  .pt-lg-4 { padding-top: calc(var(--spacer) * 1.5) !important; }
  .pt-lg-5 { padding-top: calc(var(--spacer) * 3) !important; }
  .pt-lg-6 { padding-top: calc(var(--spacer) * 6) !important; }
  
  /* 下パディング */
  .pb-lg-0 { padding-bottom: 0 !important; }
  .pb-lg-1 { padding-bottom: calc(var(--spacer) * 0.25) !important; }
  .pb-lg-2 { padding-bottom: calc(var(--spacer) * 0.5) !important; }
  .pb-lg-3 { padding-bottom: var(--spacer) !important; }
  .pb-lg-4 { padding-bottom: calc(var(--spacer) * 1.5) !important; }
  .pb-lg-5 { padding-bottom: calc(var(--spacer) * 3) !important; }
  .pb-lg-6 { padding-bottom: calc(var(--spacer) * 6) !important; }
  
  /* 左パディング */
  .pl-lg-0 { padding-left: 0 !important; }
  .pl-lg-1 { padding-left: calc(var(--spacer) * 0.25) !important; }
  .pl-lg-2 { padding-left: calc(var(--spacer) * 0.5) !important; }
  .pl-lg-3 { padding-left: var(--spacer) !important; }
  .pl-lg-4 { padding-left: calc(var(--spacer) * 1.5) !important; }
  .pl-lg-5 { padding-left: calc(var(--spacer) * 3) !important; }
  .pl-lg-6 { padding-left: calc(var(--spacer) * 6) !important; }
  
  /* 右パディング */
  .pr-lg-0 { padding-right: 0 !important; }
  .pr-lg-1 { padding-right: calc(var(--spacer) * 0.25) !important; }
  .pr-lg-2 { padding-right: calc(var(--spacer) * 0.5) !important; }
  .pr-lg-3 { padding-right: var(--spacer) !important; }
  .pr-lg-4 { padding-right: calc(var(--spacer) * 1.5) !important; }
  .pr-lg-5 { padding-right: calc(var(--spacer) * 3) !important; }
  .pr-lg-6 { padding-right: calc(var(--spacer) * 6) !important; }
  
  /* 水平方向パディング */
  .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-lg-1 { padding-left: calc(var(--spacer) * 0.25) !important; padding-right: calc(var(--spacer) * 0.25) !important; }
  .px-lg-2 { padding-left: calc(var(--spacer) * 0.5) !important; padding-right: calc(var(--spacer) * 0.5) !important; }
  .px-lg-3 { padding-left: var(--spacer) !important; padding-right: var(--spacer) !important; }
  .px-lg-4 { padding-left: calc(var(--spacer) * 1.5) !important; padding-right: calc(var(--spacer) * 1.5) !important; }
  .px-lg-5 { padding-left: calc(var(--spacer) * 3) !important; padding-right: calc(var(--spacer) * 3) !important; }
  .px-lg-6 { padding-left: calc(var(--spacer) * 6) !important; padding-right: calc(var(--spacer) * 6) !important; }
  
  /* 垂直方向パディング */
  .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-lg-1 { padding-top: calc(var(--spacer) * 0.25) !important; padding-bottom: calc(var(--spacer) * 0.25) !important; }
  .py-lg-2 { padding-top: calc(var(--spacer) * 0.5) !important; padding-bottom: calc(var(--spacer) * 0.5) !important; }
  .py-lg-3 { padding-top: var(--spacer) !important; padding-bottom: var(--spacer) !important; }
  .py-lg-4 { padding-top: calc(var(--spacer) * 1.5) !important; padding-bottom: calc(var(--spacer) * 1.5) !important; }
  .py-lg-5 { padding-top: calc(var(--spacer) * 3) !important; padding-bottom: calc(var(--spacer) * 3) !important; }
  .py-lg-6 { padding-top: calc(var(--spacer) * 6) !important; padding-bottom: calc(var(--spacer) * 6) !important; }
}


/* =========================
   フォントサイズツールクラス
========================= */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }

/* =========================
   フォントサイズユーティリティクラス（1rem ～ 10rem）
========================= */
.fs-1 { font-size: 1rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 3rem !important; }
.fs-4 { font-size: 4rem !important; }
.fs-5 { font-size: 5rem !important; }
.fs-6 { font-size: 6rem !important; }
.fs-7 { font-size: 7rem !important; }
.fs-8 { font-size: 8rem !important; }
.fs-9 { font-size: 9rem !important; }
.fs-10 { font-size: 10rem !important; }

.fs-125 { font-size: 1.25rem !important; }

/* =========================
   フォントウェイトユーティリティクラス
========================= */
.fw-bold {
  font-weight: bold !important;
}
.fw-normal {
  font-weight: normal !important;
}
.fw-500 {
  font-weight: 500 !important;
}
.fw-light {
  font-weight: 300 !important;
}

/* =========================
   行間ツールクラス
========================= */
/* 行間の調整（数値は例示です。必要に応じて調整してください） */
.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 2 !important; }

/* =========================
   透明度ツールクラス
========================= */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* =========================
   Gap ツールクラス
========================= */
/* gap の値は CSS 変数 --spacer を基準に計算 */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: calc(var(--spacer) * 0.25) !important; }
.gap-2 { gap: calc(var(--spacer) * 0.5) !important; }
.gap-3 { gap: var(--spacer) !important; }
.gap-4 { gap: calc(var(--spacer) * 1.5) !important; }
.gap-5 { gap: calc(var(--spacer) * 3) !important; }

/* =========================
   gx ユーティリティクラス（水平ギャップ／カラムギャップ）
========================= */
.gx-0 { column-gap: 0 !important; }
.gx-1 { column-gap: calc(var(--spacer) * 0.25) !important; }
.gx-2 { column-gap: calc(var(--spacer) * 0.5) !important; }
.gx-3 { column-gap: var(--spacer) !important; }
.gx-4 { column-gap: calc(var(--spacer) * 1.5) !important; }
.gx-5 { column-gap: calc(var(--spacer) * 3) !important; }

/* =========================
   gy ユーティリティクラス（垂直ギャップ／ロウギャップ）
========================= */
.gy-0 { row-gap: 0 !important; }
.gy-1 { row-gap: calc(var(--spacer) * 0.25) !important; }
.gy-2 { row-gap: calc(var(--spacer) * 0.5) !important; }
.gy-3 { row-gap: var(--spacer) !important; }
.gy-4 { row-gap: calc(var(--spacer) * 1.5) !important; }
.gy-5 { row-gap: calc(var(--spacer) * 3) !important; }

/* =========================
   テキスト整列ユーティリティクラス（共通）
========================= */
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}

/* =========================
   テキスト整列ユーティリティクラス（sm 以上）
========================= */
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
}

/* =========================
   テキスト整列ユーティリティクラス（md 以上）
========================= */
@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-center {
    text-align: center !important;
  }
  .text-md-right {
    text-align: right !important;
  }
}

/* =========================
   テキスト整列ユーティリティクラス（lg 以上）
========================= */
@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
}

/* =========================
   テキスト整列ユーティリティクラス（xl 以上）
========================= */
@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
}

/* Flex コンテナ内の水平整列 */
.justify-content-start {
  justify-content: flex-start !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.justify-content-around {
  justify-content: space-around !important;
}
.justify-content-between {
  justify-content: space-between !important;
}

/* =========================
   垂直方向の整列ツールクラス
========================= */

/* Flex コンテナ内の垂直整列 */
.align-items-start {
  align-items: flex-start !important;
}
.align-items-center {
  align-items: center !important;
}
.align-items-end {
  align-items: flex-end !important;
}

/* 単独要素の垂直中央揃え（インラインまたは一行テキスト向け） */
.vertical-center {
  display: flex !important;
  align-items: center !important;
}

/* =========================
   補助 Flex レイアウトクラス
========================= */

/* 要素を Flex コンテナに設定 */
.d-flex {
  display: flex !important;
}

/* Flex コンテナの方向（共通） */
.flex-row {
  flex-direction: row !important;
}
.flex-column {
  flex-direction: column !important;
}

/* Flex コンテナの折り返し（共通） */
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}

/* =========================
   Flex Grow / Shrink ユーティリティクラス（通常）
========================= */
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* =========================
   Flex Grow / Shrink ユーティリティクラス（sm 以上）
========================= */
@media (min-width: 576px) {
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-row-reverse { flex-direction: row-reverse !important; }
  .flex-sm-column { flex-direction: column !important; }
  .flex-sm-column-reverse { flex-direction: column-reverse !important; }
  .flex-sm-grow-0 { flex-grow: 0 !important; }
  .flex-sm-grow-1 { flex-grow: 1 !important; }
  .flex-sm-shrink-0 { flex-shrink: 0 !important; }
  .flex-sm-shrink-1 { flex-shrink: 1 !important; }
}

/* =========================
   Flex Grow / Shrink ユーティリティクラス（md 以上）
========================= */
@media (min-width: 768px) {
  .flex-md-row { flex-direction: row !important; }
  .flex-md-row-reverse { flex-direction: row-reverse !important; }
  .flex-md-column { flex-direction: column !important; }
  .flex-md-column-reverse { flex-direction: column-reverse !important; }
  .flex-md-grow-0 { flex-grow: 0 !important; }
  .flex-md-grow-1 { flex-grow: 1 !important; }
  .flex-md-shrink-0 { flex-shrink: 0 !important; }
  .flex-md-shrink-1 { flex-shrink: 1 !important; }
}

/* =========================
   Flex Grow / Shrink ユーティリティクラス（lg 以上）
========================= */
@media (min-width: 992px) {
  .flex-lg-row { flex-direction: row !important; }
  .flex-lg-row-reverse { flex-direction: row-reverse !important; }
  .flex-lg-column { flex-direction: column !important; }
  .flex-lg-column-reverse { flex-direction: column-reverse !important; }
  .flex-lg-grow-0 { flex-grow: 0 !important; }
  .flex-lg-grow-1 { flex-grow: 1 !important; }
  .flex-lg-shrink-0 { flex-shrink: 0 !important; }
  .flex-lg-shrink-1 { flex-shrink: 1 !important; }
}

/* =========================
   表示・非表示ツールクラス
========================= */

/* 要素を非表示 */
.d-none { display: none !important;}

/* 要素をブロック表示 */
.d-block { display: block !important;}

/* 要素をフレックス表示 */
.d-flex { display: flex !important;}

/* 要素をインライン表示 */
.d-inline { display: inline !important;}

/* 要素をインラインブロック表示 */
.d-inline-block { display: inline-block !important;}

/* レスポンシブ対応の表示・非表示およびレイアウトクラス */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
}
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
}

/* =========================
   ボタン基本スタイル（色設定は下記各色クラスで定義）
========================= */
.btn {
  display: inline-block;
  padding: 0.5rem;
  font-size: var(--font-size-base);
  border: 1px solid transparent;
  border-radius: 0.25rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* =========================
   色別ボタン（通常）
========================= */

/* オレンジボタン */
.btn-orange {
  background-color: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
}
.btn-orange:hover {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

/* グリーンボタン */
.btn-green {
  background-color:  rgba(19, 170, 161, 0.20);
  color: var(--color-green);
}
.btn-green:hover {
  background-color: var(--color-green);
  color: var(--color-white);
}

/* ブルーボタン */
.btn-blue {
  background-color: rgba(31, 120, 229, 0.20);
  color: var(--color-blue);
}
.btn-blue:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

/* ダークブルーボタン */
.btn-dark-blue {
  background-color: rgba(5, 36, 124, 0.15);
  color: var(--color-dark-blue);
}
.btn-dark-blue:hover {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
}

/* =========================
   色別アウトラインボタン
========================= */

/* オレンジアウトラインボタン */
.btn-outline-orange {
  background-color: transparent;
  color: var(--color-orange);
  border-color: var(--color-orange);
}
.btn-outline-orange:hover {
  background-color: var(--color-orange);
  color: #fff;
}

/* グリーンアウトラインボタン */
.btn-outline-green {
  background-color: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}
.btn-outline-green:hover {
  background-color: var(--color-green);
  color: #fff;
}

/* ブルーアウトラインボタン */
.btn-outline-blue {
  background-color: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn-outline-blue:hover {
  background-color: var(--color-blue);
  color: #fff;
}

/* ダークブルーアウトラインボタン */
.btn-outline-dark-blue {
  background-color: transparent;
  color: var(--color-dark-blue);
  border-color: var(--color-dark-blue);
}
.btn-outline-dark-blue:hover {
  background-color: var(--color-dark-blue);
  color: #fff;
}

/* =========================
   画像の背景・オブジェクトフィット設定
========================= */
.img-cover {
  object-fit: cover;
}
.img-contain {
  object-fit: contain;
}

/* 画像の最大幅をリセット */
.img-fluid {
  max-width: 100%;
  height: auto;
}
/* =========================
   幅・高さユーティリティクラス
========================= */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* =========================
   ビューポート高さユーティリティクラス
========================= */
.vh-25 { height: 25vh !important; }
.vh-50 { height: 50vh !important; }
.vh-75 { height: 75vh !important; }
.vh-100 { height: 100vh !important; }
.vh-auto { height: auto !important; }

/* =========================
   ビューポート幅ユーティリティクラス
========================= */
.vw-25 { width: 25vw !important; }
.vw-50 { width: 50vw !important; }
.vw-75 { width: 75vw !important; }
.vw-100 { width: 100vw !important; }
.vw-auto { width: auto !important; }


/* =========================
   先頭固定
========================= */
.fixed-top {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* =========================
   位置ユーティリティクラス (Position Utilities)
========================= */
.position-static {
  position: static !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-fixed {
  position: fixed !important;
}
.position-sticky {
  position: sticky !important;
}

/* =========================
   位置補助クラス (Offset Utilities)
========================= */
.top-0 {
  top: 0 !important;
}
.end-0 {
  right: 0 !important;
}
.bottom-0 {
  bottom: 0 !important;
}
.start-0 {
  left: 0 !important;
}

/* 例：中央に配置するための補助クラス（必要に応じて調整してください） */
.translate-middle {
  transform: translate(-50%, -50%) !important;
}
.translate-middle-x {
  transform: translateX(-50%) !important;
}
.translate-middle-y {
  transform: translateY(-50%) !important;
}

/* =========================
   underlineユーティリティクラス
========================= */
.text-underline {
  text-decoration: underline !important;
}

.text-no-underline {
  text-decoration: none !important;
}

.text-underline {
  text-decoration: underline !important;
}

/* aタグに.text-underlineクラスがある場合、hover時に下線を非表示にする */
a.text-underline:hover {
  text-decoration: none !important;
}