/* 最初にすべての紫色を上書き */
    * {
      --bs-primary: rgb(51, 102, 153) !important;
      --bs-purple: rgb(51, 102, 153) !important;
    }

    :root {
      /* primaryカラーをRGB(51, 102, 153)に上書き */
      --bs-primary: rgb(51, 102, 153) !important;
      --bs-primary-rgb: 51, 102, 153 !important;
      --bs-btn-focus-shadow-rgb: 51, 102, 153 !important;

      /* 紫色のCSS変数をすべて上書き */
      --bs-purple: rgb(51, 102, 153) !important;
      --bs-purple-rgb: 51, 102, 153 !important;
      --bs-primary-text-emphasis: rgb(51, 102, 153) !important;
      --bs-primary-bg-subtle: rgba(51, 102, 153, 0.1) !important;
      --bs-primary-border-subtle: rgba(51, 102, 153, 0.3) !important;
      --bs-link-color: rgb(51, 102, 153) !important;
      --bs-link-hover-color: rgb(41, 82, 123) !important;
      --bs-focus-ring-color: rgba(51, 102, 153, 0.25) !important;

      /* フォームコントロールのフォーカス色 */
      --bs-form-control-focus-border-color: rgb(51, 102, 153) !important;
      --bs-form-check-input-checked-bg-color: rgb(51, 102, 153) !important;
    }

    /* Bootstrapテーマをlight/darkモードでも上書き */
    [data-bs-theme=light],
    [data-bs-theme=dark] {
      --bs-primary: rgb(51, 102, 153) !important;
      --bs-primary-rgb: 51, 102, 153 !important;
      --bs-purple: rgb(51, 102, 153) !important;
      --bs-purple-rgb: 51, 102, 153 !important;
    }


    /* マゼンダ色をRGB(51, 102, 153)に置換 */
    div.bg-pink:not([class*="fa-"]):not([class*="ion-"]):not([class*="bi-"]),
    div.bg-purple:not([class*="fa-"]):not([class*="ion-"]):not([class*="bi-"]),
    button.btn-pink,
    button.btn-purple,
    a.btn-pink,
    a.btn-purple,
    span.text-pink:not([class*="icon"]),
    span.text-purple:not([class*="icon"]),
    .border-pink,
    .border-purple {
      background-color: rgb(51, 102, 153) !important;
      border-color: rgb(51, 102, 153) !important;
      color: white !important;
    }

    .btn-pink:hover,
    .btn-purple:hover {
      background-color: rgb(41, 82, 123) !important;
      border-color: rgb(41, 82, 123) !important;
    }

    /* primary色もRGB(51, 102, 153)に統一 */
    .bg-primary {
      background-color: rgb(51, 102, 153) !important;
    }

    .btn-primary {
      background-color: rgb(51, 102, 153) !important;
      border-color: rgb(51, 102, 153) !important;
    }

    .border-primary {
      border-color: rgb(51, 102, 153) !important;
    }

    .btn-primary:hover {
      background-color: rgb(41, 82, 123) !important;
      border-color: rgb(41, 82, 123) !important;
    }

    /* テキスト色は個別に設定 */
    h1.text-primary:not(i),
    h2.text-primary:not(i),
    h3.text-primary:not(i),
    h4.text-primary:not(i),
    h5.text-primary:not(i),
    h6.text-primary:not(i),
    p.text-primary:not(i),
    span.text-primary:not(i):not(.icon-1x):not(.icon-2x):not(.icon-3x),
    div.text-primary:not(i) {
      color: rgb(51, 102, 153) !important;
    }

    /* アイコンは元の色を保持 */
    i.text-primary,
    i.bi-building,
    i.bi-handshake,
    i.bi-gear-wide-connected,
    i.bi-arrows-expand,
    i.bi-shield-check,
    i.bi-award,
    i.bi-recycle,
    i.bi-check-circle,
    i.bi-check-circle-fill,
    i.bi-person-check-fill,
    i.bi-pencil-square,
    i.bi-lightbulb-fill,
    i.bi-question-circle-fill,
    i.bi-box-seam,
    i.bi-geo-alt,
    i.bi-tree,
    i.bi-thermometer-half,
    i.bi-tools {
      color: rgb(51, 102, 153);
    }

    /* FontAwesome、Ionicons、Bootstrap Iconsのアイコンを保護 */
    i[class*="fa-"],
    i[class*="ion-"],
    i[class*="bi-"] {
      background-color: transparent !important;
    }

    /* リンク色 */
    a.text-primary {
      color: rgb(51, 102, 153) !important;
    }

    a.text-primary:hover {
      color: rgb(41, 82, 123) !important;
    }

    /* ボタンの統一 */
    .btn-primary.border-white {
      background-color: transparent !important;
      border-color: white !important;
    }

    .btn-primary.border-white:hover {
      background-color: white !important;
      color: rgb(51, 102, 153) !important;
    }

    /* hrタグの統一 */
    .hr-primary,
    hr.border-primary {
      border-color: rgb(51, 102, 153) !important;
    }

    /* アイコンフォントのリセット - 重要 */
    i[class^="fa-"],
    i[class^="ion-"],
    i[class^="bi-"],
    i[class*=" fa-"],
    i[class*=" ion-"],
    i[class*=" bi-"],
    .fa,
    .fab,
    .fas,
    .far,
    .fal {
      background: none !important;
      background-color: transparent !important;
    }

    /* アイコンの色設定 */
    i.text-primary:before,
    i.bi-building:before,
    i.bi-handshake:before,
    i.bi-gear-wide-connected:before,
    i.bi-arrows-expand:before,
    i.bi-shield-check:before,
    i.bi-award:before,
    i.bi-recycle:before,
    i.bi-check-circle:before,
    i.bi-check-circle-fill:before,
    i.bi-person-check-fill:before,
    i.bi-pencil-square:before,
    i.bi-lightbulb-fill:before,
    i.bi-question-circle-fill:before,
    i.bi-box-seam:before,
    i.bi-geo-alt:before,
    i.bi-tree:before,
    i.bi-thermometer-half:before,
    i.bi-tools:before {
      color: rgb(51, 102, 153);
    }

    /* 背景色がRGB(51, 102, 153)の部分のiタグを白色に */
    .bg-primary i,
    .bg-primary i:before,
    [style*="background-color: rgb(51, 102, 153)"] i,
    [style*="background-color: rgb(51, 102, 153)"] i:before,
    [style*="background-color:rgb(51, 102, 153)"] i,
    [style*="background-color:rgb(51, 102, 153)"] i:before,
    [style*="background-color: rgb(51,102,153)"] i,
    [style*="background-color: rgb(51,102,153)"] i:before,
    [style*="background-color:rgb(51,102,153)"] i,
    [style*="background-color:rgb(51,102,153)"] i:before {
      color: white !important;
    }

    /* ボタン内のアイコンも白色に */
    .btn-primary i,
    .btn-primary i:before {
      color: white !important;
    }

    /* 紫色（divider-primary等）もRGB(51, 102, 153)に置換 */
    .divider-primary {
      border-color: rgb(51, 102, 153) !important;
    }

    .divider-primary.op-9 {
      border-color: rgba(51, 102, 153, 0.9) !important;
    }

    /* hr-primaryも統一 */
    .hr-primary {
      border-color: rgb(51, 102, 153) !important;
    }

    /* border-primaryも統一 */
    .border-primary {
      border-color: rgb(51, 102, 153) !important;
    }

    /* ロゴのスタイル調整 */
    .navbar-brand img {
      max-height: 40px;
      width: auto;
      transition: filter 0.3s ease;
    }

    /* 暗い背景のヘッダーでのロゴスタイル */
    .bg-charcoal .navbar-brand img,
    .bg-dark .navbar-brand img,
    .navbar-dark .navbar-brand img {
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
    }

    .bg-charcoal .navbar-brand img:hover,
    .bg-dark .navbar-brand img:hover,
    .navbar-dark .navbar-brand img:hover {
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
    }

    /* フッターのロゴスタイル */
    #footer img {
      /* 薄い白色のシャドーを追加 */
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
      transition: all 0.3s ease;
    }

    #footer img:hover {
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
    }




    .rating-good {
      color: rgb(51, 102, 153);
    }

    /* モバイルメニューのスタイル調整 */
    @media (max-width: 767px) {
      #submenu.offcanvas {
        background-color: #212529 !important;
      }
      
      #submenu .navbar-nav {
        padding-top: 1rem;
      }
      
      #submenu .nav-link {
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      /* 最後のリンクのボーダーを削除 */
      #submenu .nav-item:last-child .nav-link {
        border-bottom: none;
      }
      
      #submenu .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
      
      /* 閉じるボタンのスタイル */
      #submenu .btn-close {
        transition: all 0.2s ease;
      }
      
      #submenu .btn-close:hover {
        opacity: 1 !important;
        transform: scale(1.1);
      }
    }