body {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  color: #3E3A39; /* メインカラー */


}

.navbar .nav-link {
  color: #9D1F24 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #E0C1C1 !important; /* ホバー時に少し柔らかめに変化も◎ */
}

.navbar .sns-icons a + a {
  margin-left: 1rem;
}


.bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    .b-example-divider {
      width: 100%;
      height: 3rem;
      background-color: rgba(0, 0, 0, .1);
      border-top: 1px solid rgba(0, 0, 0, .15);
      border-bottom: 1px solid rgba(0, 0, 0, .15);
      box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }

    .btn-bd-primary {
      --bd-violet-bg: #712cf9;
      --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

      --bs-btn-font-weight: 600;
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--bd-violet-bg);
      --bs-btn-border-color: var(--bd-violet-bg);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #6528e0;
      --bs-btn-hover-border-color: #6528e0;
      --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
      --bs-btn-active-color: #fff;
      --bs-btn-active-bg: #5a23c8;
      --bs-btn-active-border-color: #5a23c8;
    }

    .bd-mode-toggle {
      z-index: 1500;
    }
    
.header-image-link {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99999; /* navbar-toggler (1030〜1050) より低めにする */
}

.header-image {
  width: 150px;
  height: 150px;
}

.text-white{
  color:#fff !important;
}

body{
  background-color: #fff !important;  
}

.pannel {
  background-color: #EBD8D8;
  padding-top:30px;
  padding-left:30px;
  padding-right:30px;
  padding-bottom:30px;
}

.pannel-max {
  background-color: #EBD8D8;
  padding-bottom:3rem;
}

.pannel .pannel-block{
  background-color: #fff;
  padding:1rem;
}

.pannel-max .pannel-block{
  background-color: #fff;
  padding:1rem;
}

.pannel1 {
  background-color: #fff;
  padding-top:30px;
  padding-left:30px;
  padding-right:30px;
  padding-bottom:30px;
}

.pannel1-max {
  background-color: #fff;
  padding-bottom:3rem;
}

.pannel1 .pannel1-block{
  background-color: #fff;
  padding:1rem;
}

.pannel1-max .pannel1-block{
  background-color: #fff;
  padding:1rem;
}


.cago-container {
  background-color: #E0C1C1;
  padding: 2rem;
  border-radius: 0 !important;
}

.cago-col {
  background-color: #E0C1C1; /* カラムの背景色 */
  padding: 2rem;
}

.bg-col-pink {
  background-color: #E0C1C1;
  padding: 2rem;
  border-radius: 0 !important;
  text-align: center;
}

.bg-col-with-image {
  background-image: url('/public/images/pink_white.png'); /* 任意の画像パスに変更 */
  background-size: cover;
  background-position: center;
  color: #333;
  padding: 2rem;
  border-radius: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* テキストを下寄せにしたい場合 */
  backdrop-filter: brightness(1.1);
  position: relative;
}

.bg-col-with-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0 !important;
  z-index: 1;
}

.bg-col-with-image > * {
  position: relative;
  z-index: 2;
}

.bg-col-with-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.6); /* 半透明の白フィルター */
  border-radius: 0 !important;
  z-index: 1;
}

.bg-col-with-image > * {
  position: relative;
  z-index: 2;
}

.cago-box {
  background-color: #EBD8D8;
  padding: 2rem;
  border-radius: 0 !important;
  height: 100%;
  color: #333;
}

.box-text {
  background-color: #EBD8D8;
  padding: 1.5rem 1rem 1.5rem;
  border-radius: 0 !important;
  color: #333;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.p-side {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .p-side {
    padding-left: 0;
    padding-right: 0;
  }
}

.main-container {
  background-color: #EBD8D8;
  padding: 1.5rem;
  border-radius: 0 !important;
  max-width: 700px;
  margin: 1.5rem auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.main-container2 {
  background-color: #EBD8D8;
}

.bg-pink {
  background-color: #EBD8D8;
}

.bg-white {
  background-color: #fff;
}

.navbar {
  background-color: #ffffff;
}