.hidden {
          display: none;
          opacity: 0;
          transition: max-height 0.5s ease, opacity 0.5s ease;
        }

        .visible {
          display: block;
          opacity: 1;
        }
        /*チュートリアルDev*/

        .popup-animation {
          opacity: 0;
          transform: translate(-50%, -60%) scale(0.98);
          transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                      transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
          pointer-events: none;
        }

        .popup-animation.show {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
          pointer-events: auto;
        }

        /*共通ポップアップスタイル*/
        .common-popup {
          display: none; /* Initially hidden */
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); /* Center it by default */
          padding: 20px;
          z-index: 1002;
          width: 80%;
          border-radius: 5px;
          /* Default theme (dark) */
          background-color: #2c2c2c;
          color: #f0f0f0;
          border: 1px solid #444;
        }

        .common-popup h1 {
            color: #f0f0f0; /* Default dark mode */
        }

        .popup-close-button {
          /* Default theme (dark) */
          background-color: #555;
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
        }
        .popup-close-button:hover {
          background-color: #777; /* Default dark mode hover */
        }

        /* Light mode for common-popup */
        body.light-mode .common-popup {
          background-color: white;
          color: #333;
          border: 1px solid #ccc;
        }
        body.light-mode .common-popup h1 {
            color: #333;
        }
        .tab-bar {
          text-align: center;
          position: relative;
        }

        .tab-underline {
          position: absolute;
          bottom: 0;
          height: 3px;
          background-color: #3a8df9;
          transition: left 0.3s ease, width 0.3s ease;
          border-radius: 2px;
        }
          
        .tab-content {
          font-size: 1rem;
          color: #222;
          background: #f8f8f8;
          padding: 15px;
          border-radius: 10px;
          box-shadow: 0 0 10px rgba(0,0,0,0.1);
          opacity: 0;
          transform: translateY(10px);
          transition: opacity 0.3s ease, transform 0.3s ease;
          display: none;
        }

        .tab-content.active {
          display: block;
          opacity: 1;
          transform: translateY(0);
        }


        .tab-button {
          background: none;
          border: none;
          color: rgb(0, 0, 0);
          padding: 15px 20px;
          font-size: 16px;
          cursor: pointer;
          position: relative;
          transition: color 0.2s ease;
        }

        .tab-button.active {
          color: #000000;
        }

        .tab-button.active::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 25%;
          width: 50%;
          height: 1px;
          background-color: #3a8df9; /* 青いアンダーライン */
          border-radius: 2px;
          transition: all 0.3s ease;
        }

        .tab-button:hover {
          color: #000000;
        }

        .tab-content {
          font-size: 1rem;
          color: #222; /* Original color */
          background: #f8f8f8; /* Original color */
          box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Original shadow */
        } /*使用方法ポップアップここまで*/

        footer{
            font-family: 'Noto Sans JP', sans-serif;
            width: 100%;
            left: 0px;
            color: white;
            background-color: #1E1E1E;
            text-align: center;
            padding: 10px 0;
        }

        /*ダークモード、ライトモード切り替え*/
        body.light-mode {
          background-color: #f0f0f0;
          color: #333;
        }

        body.light-mode header {
          background-color: #e0e0e0;
        }

        body.light-mode hr {
            border-top: 2px solid #ccc;
        }

        body.light-mode .search-container .search-form {
          border: 2px solid #ccc;
          background-color: #fff;
        }

        body.light-mode .search-box {
          color: #333;
        }

        body.light-mode .search-box::placeholder {
          color: #777;
        }

        body.light-mode .search-button {
          background-color: #fff;
        }

        body.light-mode .search-button i {
          color: #888;
        }

        body.light-mode .search-button:hover i {
          color: #333;
        }
        
        body.light-mode .search_container_02 .search-form { /* Header search form */
          border: 2px solid #ccc;
          background-color: #fff;
        }

        body.light-mode .search_container_02 .search-box {
          color: #333;
        }

        body.light-mode .search_container_02 .search-box::placeholder {
          color: #777;
        }

        body.light-mode .search_container_02 .search-button {
          background-color: #fff;
        }

        body.light-mode .search_container_02 .search-button i {
          color: #888;
        }

        body.light-mode .search_container_02 .search-button:hover i {
          color: #333;
        }

        body.light-mode .TCC_Group_Container {
          background-color: #e0e0e0;
        }

        body.light-mode .Group_btn {
          background: #f0f0f0;
          color: #333;
        }

        body.light-mode .Group_btn p::after {
          background: #333;
        }

        body.light-mode .news_Container {
          background-color: #e9e9e9;
        }

        body.light-mode .title {
          color: #333;
          text-decoration-color: #333; /* 下線も文字色に合わせる */
        }

        body.light-mode .blog-card {
          border-bottom: 3px solid #ccc;
        }

        body.light-mode .blog-card h2 {
          color: #333;
        }

        body.light-mode .blog-card h2::after {
          background: #333;
        }

        body.light-mode .blog-card p,
        body.light-mode .blog-card .Group {
          color: #555;
        }

        body.light-mode .menu-toggle {
            color: #333;
        }

        body.light-mode .nav-menu {
          background: #d0d0d0; /* ハンバーガーメニュー展開時の背景 */
        }

        body.light-mode .nav-menu ul li a,
        body.light-mode .nav-menu ul li button#themeToggleBtn { /* ボタンも同様のスタイルを適用 */
          color: #333;
        }

        body.light-mode .nav-menu ul li button#themeToggleBtn {
            background-color: transparent; /* ボタンの背景を透過 */
        }

        body.light-mode .nav-menu a::after {
          background: #333;
        }

        body.light-mode .nav-menu h1 { /* Assuming there might be h1 in nav, though not present */
          color: #333;
        }

        body.light-mode .pagetop {
          background: #ddd;
          border: solid 2px #333;
        }

        body.light-mode .pagetop__arrow {
          border-top: 3px solid #333;
          border-right: 3px solid #333;
        }

        /* Loading Screen Light Mode */
        body.light-mode #loading-screen {
          background: #f0f0f0;
        }

        body.light-mode .loading_text {
          color: #333;
        }

        body.light-mode .progress-bar-fill {
          background: #333;
        }

        /* Tutorial Modal Light Mode */
        body.light-mode .tutorial-modal {
          background: rgba(220, 220, 220, 0.95); /* Slightly more opaque light background */
          color: #333;
        }

        body.light-mode .tutorial-slide button {
          background-color: #ccc;
          color: #333;
          /* border: 1px solid #bbb; */
        }

        body.light-mode .tutorial-slide button::after {
          background: #333;
        }

        body.light-mode .button-container { /* Tutorial button container */
            background-color: rgba(200, 200, 200, 0.4); /* Lighter semi-transparent background */
        }

        /* 
          Dark mode styles for .common-popup and .popup-close-button 
          are now their default definitions.
        */
        
        .tab-button { /* Default tab button color for dark mode */
            color: #ccc;
        }
        body.light-mode .popup-close-button {
          background-color: #424242; /* Original darkish button on light bg for light mode */
          color: white;
        }
        body.light-mode .popup-close-button:hover {
          background-color: #666; /* Original hover for light mode */
        }

        .tab-button.active { /* Active tab button color for dark mode */
            color: #fff;
        }

        /* .tab-button.active::after - underline color can remain blue or be changed */
        .tab-content { /* Default tab content for dark mode */
            color: #ddd;
            background: #3a3a3a;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }


        /* 
          Light mode styles for .common-popup and .popup-close-button 
          are already defined with body.light-mode .common-popup and 
          body.light-mode .popup-close-button.
        */

        body.light-mode .tab-button {
          color: rgb(0, 0, 0); /* Original color */
        }

        body.light-mode .tab-button.active {
          color: #000000; /* Original color */
        }

        body.light-mode .tab-button.active::after {
          background-color: #3a8df9; /* Original color */
        }
        
        body.light-mode .tab-content {
          font-size: 1rem;
          color: #222; /* Original color */
          background: #f8f8f8; /* Original color */
          box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Original shadow */
        }

        /* Footer Light Mode */
        body.light-mode footer {
          color: #333;
          background-color: #e0e0e0;
        }

        .fixed-btn {
            position: fixed;
            bottom: 20px;
            /* ↓ 最初のボタンのデフォルト位置（左側） */
            right: 60px; 
            padding: 10px 15px;
            background-color: #7d7d7d;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            transition: background 0.3s;
            z-index: 10; /* 他の要素より手前に表示されるように念のため指定 */
        }

        .fixed-btn:hover {
            background-color: #717171;
        }

        /* 2つ目以降の .fixed-btn の位置を調整（右側） */
        .fixed-btn + .fixed-btn {
            right: 5px; 
        }

        .bp_icon_i{
          width: 15px;
          height: auto;
        }

        /* Theme Toggle Switch Styles */
        .theme-switch-container {
          display: flex;
          align-items: center;
          justify-content: space-between; /* Aligns text to left, switch to right */
          padding: 5px 0; /* Optional padding */
        }

        .theme-switch-label {
          margin-right: 10px; /* Space between text and switch */
          font-size: 1em; /* Adjust as needed */
        }

        .theme-switch {
          position: relative;
          display: inline-block;
          width: 50px; /* Smaller width */
          height: 28px; /* Smaller height */
        }

        .theme-switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #555; /* Default: Dark mode track (toggle OFF) */
          transition: .4s;
          border-radius: 28px; /* Rounded track */
        }

        .slider:before {
          position: absolute;
          content: "";
          height: 20px; /* Smaller handle */
          width: 20px;  /* Smaller handle */
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
          border-radius: 50%; /* Rounded handle */
        }

        input:checked + .slider {
          background-color: #ccc; /* Light mode track (toggle ON) */
        }

        input:focus + .slider {
          box-shadow: 0 0 1px #ccc; /* Optional focus */
        }

        input:checked + .slider:before {
          transform: translateX(22px); /* Adjust translation distance */
        }