body {

    margin: 0;
    padding: 0;
    display: flex;
}

/* グローバルスクロールバーのスタイル */
::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
}

::-webkit-scrollbar-thumb {
    background-color: #992251; /* スクロールバーの色 */
    border-radius: 5px; /* スクロールバーの角を丸く */
}

::-webkit-scrollbar-track {
    background-color: #abe9d8; /* スクロールトラックの色 */
}

.contact-btn {
    display: inline-block;
    padding: 14px 28px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(90deg, #992251, #d4af37);
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}


/*メニューバーのスタイル*/
#sidebar {
    background-color: #fff;
    color: white;
    width: 220px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 15px;
    font-weight: bold;
    border-right: 5px solid #000000;
    z-index: 2000; /* ←追加: スライドショーより前に */
}


/* サイドバーのスクロールバーのスタイル */
#sidebar::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: #34d1bf; /* スクロールバーの色 */
    border-radius: 10px; /* スクロールバーの角を丸く */
}

#sidebar::-webkit-scrollbar-track {
    background-color: #992251; /* スクロールトラックの色 */
}

/* ロゴのスタイル */
#sidebar .logo {
    width: 90px;
    height: auto;
    margin-bottom: 3px;
}

/* メインメニューリンクのスタイル */
#sidebar .menu-item > a {
    color: #fff;
    text-decoration: none;
    margin: 10px 0;
    width: 100%;
    text-align: center;
    position: relative;
    transition: color 0.3s ease;
}

#sidebar .menu-item > a:hover {
    color: red;
}

/* サブメニューのスタイル */
.submenu {
    position: absolute;
    left: 100%; /* 親要素の右側に配置 */
    width: 200px;
    background-color: #d3d9e1;
    border: 1px solid #ddd;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
    z-index: 9999; /* 競合を防ぐため十分高い値に設定 */
    top: -15px; /* 追加: サブメニューを親要素の垂直方向の中央に配置 */
    transform: translateY(0); /* 追加: 垂直方向の位置を調整 */
}

/* 親メニュー項目がホバーされた時にサブメニューを表示する */
.menu-item:hover .submenu {
    visibility: visible !important;
    opacity: 1 !important;
}

.submenu li {
    border-bottom: 1px solid #eee;
}

.submenu li a {
    display: block;
    padding: 7px;
    color: #000;
    text-decoration: none;
}

.submenu li a:hover {
    background-color: #f2f2f2;
    color: #3498db;
}

/* メニューアイテムのホバー時にサブメニューを表示 */
.menu-item {
    position: relative;
}






.slideshow-container {
      position: relative; /* 中のスライドを重ねるために追加 */
      width: 220px;
      height: 150px;
      overflow: hidden;
      border-radius: 5px;
      /* 元々のフレックス設定は中央揃え用ですが、絶対配置のスライドと組み合わせるため、
         内部コンテンツの位置は独自に調整します */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
      box-sizing: border-box;

    }
    /* 各スライドを絶対配置して重ねる */
    .slide {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 80px); /* コンテナ内パディング分を引く */
      opacity: 0;
      transition: opacity 1s ease-in-out; /* 1秒でじわっとフェード */
    }
    /* 表示状態のスライド */
    .slide.active {
      opacity: 1;
    }
    .slide img {
      width: 100%;
      height: auto;
      display: block;
    }
.prev, .next {
    cursor: pointer;
    position: relative; /* absolute から relative に変更 */
    top: 0;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 5px;
    user-select: none;
    background-color: transparent; /* ボタンの背景を透明に */
}
.prev {
    margin-right: auto; /* 左に配置 */
}
.next {
    margin-left: auto; /* 右に配置 */
}
.prev:hover, .next:hover {
    color: #fff; /* ボタンのテキスト色を変更 */
}





/* サイドバーがアクティブになった時のスタイル */
#sidebar.active {
    display: flex; /* メニューを表示 */
  }



/*ｚ
スライドショー下ブロックメニュー用
*/

.container {
    display: flex;
    width: 100%;
}
.block {
    width: 50%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #ddd;
}


/*ブロックメニュー下*/
.horizontal-slider-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #5eab36; /* タイトルの背景色 */
    color: white; /* タイトルの文字色 */
    border-radius: 5px; /* タイトルボックスの角を丸める */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* タイトルボックスの影 */
        margin-top: 20px;
}

.horizontal-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}
.horizontal-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.horizontal-slide {
    min-width: 25%; /* 4つ並べて表示するために25%に設定 */
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
}
.horizontal-slide img {
    width: 100%;
    height: auto;
}




.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.block {
flex: 1;
margin: 10px;
box-sizing: border-box;
}

.block img {
width: 100%;
height: auto;
border-radius: 10px;
}

@media (max-width: 768px) {
.container {
  flex-direction: column;
}

.block {
  width: 100%;
  margin: 10px 0;
}
}


  .container4 {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
         }
  .div-item {
            flex: 1 1 calc(50% - 20px); /* Adjusts the size of each item */
            margin: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);

            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        @media (max-width: 768px) {
            .div-item {
                flex: 1 1 100%;
            }
        }


        .news__item2 {
          padding: 3px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

 .gallery13 {
   columns: 4;
   padding: 0 15px;
   margin: 0;
 }

 .gallery13 li {
   margin-bottom: 10px;
   list-style: none;
 }

 .gallery13 img {
   width: 100%;
   height: auto;
   vertical-align: bottom;
 }

 @media only screen and (max-width: 900px) {
   .gallery13 {
     columns: 3;
   }
 }

 @media only screen and (max-width: 768px) {
   .gallery13 {
     columns: 2;
   }
 }


 /* 波の背景のスタイル */
 .wave-top, .wave-bottom {
   width: 100%;
   overflow: hidden;
   line-height: 0;
   position: relative;
 }

 .wave-top svg, .wave-bottom svg {
   display: block;
   width: 100%; /* 幅を100%に設定 */
   height: auto; /* 高さを自動調整 */
 }

 .wave-bottom {
   transform: rotate(180deg);
 }

 /* 元々のスタイル */
 .responsive-container {
   display: flex;
   flex-wrap: wrap;
   border: none; /* ボーダーを削除 */
   border-radius: 0; /* ボーダー半径を削除 */
   padding: 20px;
   background-color: #e0f7fa; /* コンテンツ内背景色を波と同じ薄い青に設定 */
   margin: 0; /* 上下のマージンを削除 */
 }

 .content {
   flex: 1;
   min-width: 300px; /* 画面縮小時の最低幅を設定 */
   margin-right: 20px;
 }

 .video {
   flex: 1;
   min-width: 300px; /* 画面縮小時の最低幅を設定 */
 }

 .title {
   color: #302d2d;

   margin-bottom: 10px;
   background-color: transparent;
   background-image: linear-gradient(90deg, rgba(224, 247, 250, 1) 0%, rgba(224, 247, 250, 1) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(224, 247, 250, 1) 50%, rgba(224, 247, 250, 1) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
   background-size: 40px 40px;
   background-position: 0 0;
   padding: 0.5em 1em;
   border-radius: 10px; /* 角を丸く */
 }

/*スマホ画面時*/
 @media (max-width: 768px) {
 .Midasi {
font-size: 16px;
 }

 .Detail{
   font-size: 13px;
 }
}
 /*PC画面時*/
  @media (min-width: 768px) {
    .Midasi {
   font-size: 20px;
    }
  }


 .description {
   padding: 10px;
   line-height: 1.6;
   color: #302d2d;

 }

 .video video {
   width: 100%; /* 動画が親要素の幅に収まるように */
    /* 動画の角を丸く */
 }

 @media (max-width: 768px) {
   .responsive-container {
     flex-direction: column;
   }

   .content, .video {
     margin-right: 0;
     margin-bottom: 20px;
   }

   .video {
     order: 2;
   }
 }



 .work-image{
   width: 100%;
 }



  .image-container {
    flex: 1;
    position: relative;
    min-width: 300px;
    margin-right: 20px;
  }

  .image-container img {
    width: 80%;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .image-container img.active {
    opacity: 1;
  }

  .map-container {
    flex: 1;
    min-width: 300px;
  }

  iframe {
    width: 100%;
/*
    height: 400px;
*/
    border: 0;
    border-radius: 10px;
  }

  @media (max-width: 768px) {


    .image-container {
      margin-right: 0;
      margin-bottom: 20px;
    }

    iframe {
    /*  height: 300px;
*/
    }
  }


  /* 通常のAタグスタイル */
  table a {
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* ホバーエフェクト */
  table a:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  /* 画像スタイル */
  table a img {
  display: block;
  width: 100%;
  border-radius: 10px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* 画像ホバーエフェクト */
  table a:hover img {
  opacity: 0.8;
  transform: scale(1.05);
  }

  .new-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .block-item {
    flex: 1;
    margin: 10px;
    min-width: 300px; /* 適切な幅を設定 */
  }

  .extra-div {
    margin-top: 10px;
    padding: 10px;
    background-color: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
  }

  main {
      flex: 1;
  }




/**スマホ画面でのメニュー関係　・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・*/
/* ポップアップ全体のスタイル */
/* ポップアップの全体のスタイル */
.popup {
    display: none;
    position: fixed;
    top: 7%; /* ヘッダーと重ならないように位置調整 */
    left: 0;
    width: 100%;
    height: 90%; /* コンテンツを画面内に収める */
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: flex-start; /* 上部に揃える */
    animation: fadeIn 0.5s ease-in-out;
}

.popup-content {
  /*
    background: linear-gradient(120deg, #1e90ff, #ff7f50);
*/
    background: linear-gradient(120deg, #992251, #130a06);
    color: white;
    width: 95%;
    max-width: 500px;
    max-height: 85vh; /* 全体を画面内に収める */
    overflow-y: auto;
    border-radius: 0px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    padding: 20px;
    margin-top: 20px; /* ヘッダーとの間隔を確保 */
    text-align: center;
    position: relative;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .popup-content {
        margin-top: 15px; /* モバイル用の余白 */
    }
}
es fadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.popup-content::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
}

.popup-content::-webkit-scrollbar-thumb {
    background-color: #992251; /* スクロールバーの色 */
    border-radius: 4px; /* 丸みを追加 */
}

.popup-content::-webkit-scrollbar-track {
    background-color: #000; /* スクロールバーの背景 */
}

.popup-content::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
}



@media (max-height: 600px) {
    .popup-content {
        max-height: 80vh; /* 高さをさらに縮小 */
    }
}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: 15px; /* メニューより高い位置に配置 */
    right: 15px;
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    background-color: #000000; /* ボタンの背景色 */
    color: white;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10000; /* ボタンを最前面に */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.close-btn:hover {
    background-color: #e74c3c; /* ホバー時の強調色 */
    transform: scale(1.1); /* 少し拡大 */
}

.close-btn:active {
    transform: scale(0.95); /* クリック時に縮小 */
    background-color: #c0392b; /* クリック時の背景色 */
}

/* メニュー */
.popup-content nav {
    margin-top: 50px; /* 「×」ボタンとの重なりを防ぐための余白 */
}

@media (max-width: 768px) {
    .close-btn {
        top: 5px; /* モバイル画面での高さ調整 */
        right: 10px;
    }

    .popup-content nav {
        margin-top: 40px; /* モバイル用余白 */
    }
}

/* 画像リンクセクションのスタイル */
.image-links {
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(2, 1fr); /* 2列に設定 */
    gap: 15px; /* 各画像間の間隔 */
    justify-content: center; /* 中央揃え */
    margin: 20px 0; /* 上下に余白を追加 */
}

.image-links a img {
    width: 100%; /* 幅を親要素に合わせる */
    max-width: 120px; /* 最大幅を設定 */
    height: auto; /* アスペクト比を維持 */
    border-radius: 8px; /* 角丸を追加 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* ホバーアニメーション */
}

.image-links a img:hover {
    transform: scale(1.05); /* ホバー時に少し拡大 */
    opacity: 0.8; /* ホバー時に透明度を追加 */
}

/* SNSリンクセクションのスタイル */
.sns-links {
    display: flex; /* フレックスボックスで横並び */
    justify-content: center; /* 中央揃え */
    gap: 15px; /* 各アイコンの間隔 */
    margin-top: 20px; /* 余白を追加 */
}

.sns-links img {
    width: 40px; /* アイコンの幅 */
    height: 40px; /* アイコンの高さ */
    object-fit: cover; /* 比率を維持 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* ホバーエフェクト */
}

.sns-links img:hover {
    transform: scale(1.1); /* ホバー時に拡大 */
    opacity: 0.8; /* ホバー時に透明度を追加 */
}



/* メニュー項目のスタイル */
.popup-content nav ul {
    list-style: none;
    padding: 0;
}

.popup-content nav ul li {
    margin: 10px 0;
}

.popup-content nav ul li a {
    display: flex; /* アイコンとテキストを並べる */
    align-items: center; /* 縦方向に中央揃え */
    gap: 10px; /* アイコンとテキストの間隔 */
    text-decoration: none;
    font-size: 18px;
    color: white;
    padding: 10px 15px;
    border-radius: 0px;
    background-color: #2d000d; /* デフォルト背景色 */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.popup-content nav ul li a:hover {
    background-color: #ff7f50; /* ホバー時のアクセントカラー */
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

/* アイコンのスタイル */
.popup-content nav ul li a img {
    width: 28px; /* 統一されたアイコンサイズ */
    height: 28px; /* 統一されたアイコンサイズ */
    object-fit: cover; /* 比率を保持しながらフィット */
    border-radius: 50%; /* アイコンを丸くする */
    margin-right: 10px;
}

/* サブメニューのスタイル */
.submenu3 {
    display: none; /* 初期状態で非表示 */
    margin-top: 10px;
    padding-left: 15px;
    border-left: 2px solid #ddd; /* 視覚的な区切り線 */
    overflow: hidden; /* 隠れる状態 */
    max-height: 0; /* 高さをゼロに */
    transition: max-height 0.3s ease-in-out; /* 開閉アニメーション */
}

.submenu3.open {
    display: block; /* 表示する */
    max-height: 250px; /* 必要な高さ */
    background-color: #eabecfd6;
border-radius: 4px;
padding: 3px;
    overflow-y: auto;
}

.submenu3 li {
    margin: 5px 0;
}

.submenu3 li a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.submenu3 li a:hover {
    background-color: #74b9ff; /* ホバー効果 */
    color: white;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .popup-content {
        font-size: 1rem; /* フォントサイズを調整 */
        padding: 15px;
    }

    .menu-item3 > a {
        font-size: 16px; /* メニュー項目の文字サイズを調整 */
    }

    .submenu3 {
        position: static; /* スマホ画面で位置固定を解除 */
    }
}




  /**スマホ画面でのメニュー関係ここまで　・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・*/

  @media (min-width: 768px) {
    footer {
      margin-left: 225px
    }





.menu-hover0 {
    transition: background-color 0.5s ease-in-out; /* 背景色の滑らかな変化 */
    position: relative; /* アニメーションの基準位置 */
    overflow: hidden; /* 子要素のオーバーフローを防ぐ */
}

.menu-hover0::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* 初期位置を左端に設定 */
    width: 100%;
    height: 100%;
    background-color: #cda8b6; /* ホバー時の背景色 */
    transition: left 0.3s ease-in-out; /* 左から右へのアニメーション */
    z-index: 0; /* 背景がテキストの下に表示されるように設定 */
    color: #000

}

.menu-hover0:hover::before {
    left: 0; /* ホバー時に背景が左から表示される */
}

.menu-hover0 img, .menu-hover0 span {
    position: relative;
    z-index: 1; /* 背景色より上にテキストと画像が表示されるように調整 */
}

.menu-hover0:hover span {
    color: #fff; /* ホバー時に文字色を白に変更 */
}



.menu-hover {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 12px 8px;

    background-color: #510025;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    margin-right: 15px;
    transition: background-color 0.5s ease-in-out; /* 平滑な背景色変化 */
    position: relative; /* アニメーションの基準点 */
    overflow: hidden; /* 子要素のオーバーフローを防ぐ */
}

.menu-hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* 初期位置を左端に設定 */
    width: 100%;
    height: 100%;
    background-color: #cda8b6; /* ホバー時の背景色 */
    transition: left 0.3s ease-in-out; /* 左から右へのアニメーション */
    z-index: 0; /* 背景がテキストの下に表示されるよう調整 */
}

.menu-hover:hover::before {
    left: 0; /* ホバー時に背景が左から表示される */
}

.menu-hover img, .menu-hover span {
    position: relative;
    z-index: 1; /* テキストと画像が背景の上に表示されるよう調整 */
}
}



/*フッター 全体スタイル */
footer {
background-color: #000;
  color: #fff;
  padding: 10px 20px;
  margin-top: 20px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.footer-info {
  flex: 1;
  min-width: 250px;
  font-family: 'Shippori Mincho', serif;
font-weight: bold;
}

.footer-info p {
  margin: 5px 0;
  font-size: 13px;
}

.footer-links {
  flex: 1;
  /*
  min-width: 250px;
*/
  display: flex;
  align-items: center;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;              /* 横並び */
  gap: 20px;                  /* リンク間の余白 */
  flex-wrap: wrap;            /* 幅が狭いときは折り返し */
  font-weight: bold;
font-size: 13px;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #d4af37; /* ホバー時に金色でおしゃれに */
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 10px;
}

.footer-copy {
  font-size: 13px;
  margin: 0;
}

/* スマホ対応 */
@media screen and (max-width: 600px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links ul {
    flex-direction: column; /* 縦並びに切り替え */
    gap: 10px;
  }
}



/*タブメニュー用スタイル*/

.recruit-tabs {
  max-width: 1000px;
  margin: 40px auto;
}

.tab-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  border-bottom: 2px solid #ddd;
}

.tab-menu li {
  padding: 12px 24px;
  cursor: pointer;
  font-weight: bold;
  color: #555;
  transition: all 0.3s ease;
  border-radius: 6px 6px 0 0; /* 上部だけ角丸 */
}

.tab-menu li:hover {
  background: #f9f3f5; /* ホバー時に淡い色 */
}

.tab-menu li.active {
  color: #fff;
  background: linear-gradient(90deg, #992251, #d4af37); /* ワインレッド→金色グラデーション */
  border-bottom: none; /* 下線を消して選択感を強調 */
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1) inset;
}


.tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .tab-menu {
    flex-direction: column;
    align-items: center;
  }
  .tab-menu li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ddd;
  }
}


/*採用情報用　*/
.sub-tab-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0;
  border-bottom: 2px solid #ddd;
}

.sub-tab-menu li {
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  color: #555;
  transition: all 0.3s ease;
}

.sub-tab-menu li.active {
  color: #992251;
  border-bottom: 3px solid #992251;
}

.sub-tab-content {
  display: none;
  animation: fadeIn 0.5s ease;
}

.sub-tab-content.active {
  display: block;
}