html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

html, body {
    height: 100%;
    margin: 0;
} 

/* ******************* bootstrap append ********************** */

/* ボタン色（濃色） */
.btn-indigo {
    background: var(--bs-indigo);
    border: 2px solid var(--bs-indigo);
}

.btn-purple {
    background: var(--bs-purple);
    border: 2px solid var(--bs-purple);
}

.btn-pink {
    background: var(--bs-pink);
    border: 2px solid var(--bs-pink);
}

.btn-orange {
    background: var(--bs-orange);
    border: 2px solid var(--bs-orange);
}

.btn-teal {
    background: var(--bs-teal);
    border: 2px solid var(--bs-teal);
}

.btn-cyan {
    background: var(--bs-cyan);
    border: 2px solid var(--bs-cyan);
}

.btn-lime {
    background: #7CB342;
    border: 2px solid #7CB342;
}

.btn-pastel-green {
    background: #84E291;
    border: 2px solid #84E291;
    color: #214D22;
}

/* ボタン色（淡色） */
.btn-indigo-light {
    background: #9FA8DA;
    color: var(--bs-indigo);
    border: 2px solid #9FA8DA;
}

.btn-purple-light {
    background: #CE93D8;
    color: var(--bs-purple);
    border: 2px solid #CE93D8;
}

.btn-pink-light {
    background: #F48FB1;
    color: var(--bs-pink);
    border: 2px solid #F48FB1;
}

.btn-orange-light {
    background: #FFCC80;
    color: #7A3E00;
    border: 2px solid #FFCC80;
}

.btn-teal-light {
    background: #80CBC4;
    color: #004D40;
    border: 2px solid #80CBC4;
}

.btn-cyan-light {
    background: #80DEEA;
    color: #006064;
    border: 2px solid #80DEEA;
}

.btn-lime-light {
    background: #C5E1A5;
    color: #827717;
    border: 2px solid #C5E1A5;
}

.btn-pastel-green-light {
    background: #B8EFC3;
    border: 2px solid #B8EFC3;
    color: #214D22;
}

/* テキスト色 */
.text-indigo {
    color: var(--bs-indigo);
}

.text-purple {
    color: var(--bs-purple);
}

.text-pink {
    color: var(--bs-pink);
}

.text-orange {
    color: var(--bs-orange);
}

.text-teal {
    color: var(--bs-teal);
}

.text-cyan {
    color: var(--bs-cyan);
}

.text-lime {
    color: #7CB342;
}

.text-pastel-green {
    color: #84E291;
}

/* 背景色 */
.bg-indigo {
    background-color: rgba(102, 81, 192, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(102, 81, 192, var(--bs-bg-opacity, 1));
    color: #fff;
}

.bg-purple {
    background-color: rgba(111, 66, 193, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(111, 66, 193, var(--bs-bg-opacity, 1));
    color: #fff;
}

.bg-pink {
    background-color: rgba(233, 30, 99, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(233, 30, 99, var(--bs-bg-opacity, 1));
    color: #fff;
}

.bg-orange {
    background-color: rgba(255, 152, 0, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(255, 152, 0, var(--bs-bg-opacity, 1));
    color: #fff;
}

.bg-teal {
    background-color: rgba(0, 150, 136, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(0, 150, 136, var(--bs-bg-opacity, 1));
    color: #fff;
}

.bg-cyan {
    background-color: rgba(0, 188, 212, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(0, 188, 212, var(--bs-bg-opacity, 1));
    color: #fff;
}

.bg-lime {
    background-color: rgba(124, 179, 66, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(124, 179, 66, var(--bs-bg-opacity, 1));
    color: #fff;
}

.bg-yellow {
    background-color: rgba(255, 215, 0, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(255, 215, 0, var(--bs-bg-opacity, 1));
    color: #212529;
}

.bg-pastel-green {
    background-color: rgba(132, 226, 145, var(--bs-bg-opacity, 1));
}

.bg-indigo-light {
    background-color: rgba(159, 168, 218, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(159, 168, 218, var(--bs-bg-opacity, 1));
    color: var(--bs-indigo);
}

.bg-purple-light {
    background-color: rgba(206, 147, 216, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(206, 147, 216, var(--bs-bg-opacity, 1));
    color: var(--bs-purple);
}

.bg-pink-light {
    background-color: rgba(244, 143, 177, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(244, 143, 177, var(--bs-bg-opacity, 1));
    color: var(--bs-pink);
}

.bg-orange-light {
    background-color: rgba(255, 204, 128, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(255, 204, 128, var(--bs-bg-opacity, 1));
    color: var(--bs-orange);
}

.bg-teal-light {
    background-color: rgba(128, 203, 196, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(128, 203, 196, var(--bs-bg-opacity, 1));
    color: #004D40;
}

.bg-cyan-light {
    background-color: rgba(128, 222, 234, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(128, 222, 234, var(--bs-bg-opacity, 1));
    color: #006064;
}

.bg-lime-light {
    background-color: rgba(197, 225, 165, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(197, 225, 165, var(--bs-bg-opacity, 1));
    color: #827717;
}

.bg-yellow-light {
    background-color: rgba(255, 236, 179, var(--bs-bg-opacity, 1));
    border: 2px solid rgba(255, 236, 179, var(--bs-bg-opacity, 1));
    color: #8C6D1F;
}

.bg-pastel-green-light {
    background-color: rgba(184, 239, 195, var(--bs-bg-opacity, 1));
}

/* 濃色の border- クラス */
.border-indigo {
    border: 1px solid var(--bs-indigo);
}

.border-purple {
    border: 1px solid var(--bs-purple);
}

.border-pink {
    border: 1px solid var(--bs-pink);
}

.border-orange {
    border: 1px solid var(--bs-orange);
}

.border-teal {
    border: 1px solid var(--bs-teal);
}

.border-cyan {
    border: 1px solid var(--bs-cyan);
}

.border-lime {
    border: 1px solid #7CB342;
}

.border-yellow {
    border: 1px solid #FFD700;
}

.border-pastel-green {
    border: 1px solid #84E291;
}

/* ライト色の border- クラス */
.border-indigo-light {
    border: 1px solid #9FA8DA;
}

.border-purple-light {
    border: 1px solid #CE93D8;
}

.border-pink-light {
    border: 1px solid #F48FB1;
}

.border-orange-light {
    border: 1px solid #FFCC80;
}

.border-teal-light {
    border: 1px solid #80CBC4;
}

.border-cyan-light {
    border: 1px solid #80DEEA;
}

.border-lime-light {
    border: 1px solid #C5E1A5;
}

.border-yellow-light {
    border: 1px solid #FFECB3;
}

.border-pastel-green-light {
    border: 1px solid #B8EFC3;
}