/* すべての要素の幅計算を「余白込み」に統一する設定 */
       *, *::before, *::after {
           box-sizing: border-box;
        }
        body {
           margin: 0;
           padding: 0;
           background: transparent;
        }
        
        /* ===== Matrix 背景 ===== */
        #matrix {
           position: fixed;
           inset: 0;
           z-index: 0;
           pointer-events: none;
          }
        
        /* ===== 前景ラッパー（修正） ===== */
        .page-wrapper {
           position: relative;
           z-index: 1;
           /* ここから追加：フッター固定のための設定 */
           display: flex;
           flex-direction: column;
           min-height: 100vh; /* 画面の高さ分を最低限確保する */
          }
          /* 全体の計算方法を統一してズレを防ぐ */
        *, *::before, *::after {
           box-sizing: border-box;
          }
          
        /* ===== ヘッダー ===== */
        .site-header {
           background-color: #a2d7dd;
           width: 100%;
           max-width: 1000px;
           margin: 0 auto;
          }
        .header-inner {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           padding: 10px 40px; 
          }
        
        /* ロゴとスローガンの横並び設定 */
        .header-branding {
          display: flex;
          align-items: center;
        /* gapを広げて右へ寄せる */
          gap: 120px;           
          margin-bottom: 20px;
        /* さらに右に寄せたい場合はここを調整 */
        margin-left: 20px;   
        }
        .branding-logo img {
          height: 50px; /* 少し小さくしてバランス調整 */
          width: auto;
          display: block;
        }
        /* テキストエリアだけをさらに微調整 */
        .branding-text {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #ffffff !important;
    
        /* ▼ ロゴの底辺よりもさらに下げたい場合は、ここを調整してください */
        margin-bottom: -6px;  /* 数値を大きくすると少し浮き、小さく（あるいは0に）すると下がります */
        }
        /* ドイツ語：つながり字（サイズを小さく調整） */
        .motto-de {
          margin: 0;
          padding: 0;
        /* font-sizeを1.2remから0.95remへ縮小 */
          font-size: 1.02rem; 
          font-family: 'Georgia', 'Times New Roman', serif;
          font-style: italic;
          line-height: 1.2;
          white-space: nowrap;
          letter-spacing: 0.05em; /* 少し字間を空けて読みやすく */
        }
        /* 日本語：明朝体・均等割付 */
        .motto-ja {
          margin: 0;
          padding: 0;
          width: 100%;
          display: flex;
          justify-content: space-between;
        /* 明朝体の指定をより強力に */
        font-family: "Sawarabi Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
        font-size: 1.10rem;
        line-height: 1.5;
        font-weight: 400;
        }
        .motto-ja span {
          display: inline-block;
        }

         /* ▼ ドロップダウンメニューの基本非表示設定 */
         .dropdown .menu {
          position: absolute;
          background-color: #bce2e8;
          list-style: none;
          padding: 10px 0;
          margin: 0;
          min-width: 150px;
          visibility: hidden;
          transform: translateY(-10px);
          transition: transform 0.25s ease;
          z-index: 1000; /* ←重要 */
          }
         /* ▼ ホバー時：ニュッと現れる */
         .dropdown:hover .menu {
          visibility: visible;
          transform: translateY(0);
          }
         /* ▼ メニューのリンク */
         .menu li a {
           display: block;
           padding: 8px 15px;
           color: #0f2350;
           text-decoration: none;
          }
         .menu li a:hover { background: #ebf6f7; }
         /* ▼ 追加：ドロップダウン項目間の線 */
         .menu li:not(:last-child) {
           border-bottom: 1px solid #6aa7b1; /* メインメニューの線と同じ色にしています */
          }
         .global-nav > ul > li:first-child {
             padding-left: 0;
         }
         /* ▼ リストの黒ポチ（・）を消す */
         .global-nav ul {
             list-style: none;
             padding: 0;
             margin: 0;
         }
         /* ▼ メインの4項目を横に等間隔で配置 */
         .global-nav > ul {
             display: flex;
             justify-content: flex-start;
             align-items: center;
             gap: 0; /* 不要なら消してOK */
         }
         
         /* ▼ 各項目に区切り線をつける */
         .global-nav > ul > li {
             position: relative;
             padding: 0 20px; /* 好みで調整してOK */
         }

         .global-nav > ul > li:not(:last-child) {
             border-right: 1px solid #6aa7b1; /* 区切り線の色（見た目に合わせて調整） */
         }
         
         /* ▼ 通常状態のリンク装飾を消す（青文字＋下線を無効化） */
         .global-nav a {
             color: #0f2350;         /* 好きな色に変更可 */
             text-decoration: none;  /* 下線を消す */
             font-weight: 600;       /* 少し太字にするとヘッダー感が出る */
             display: block;
             padding: 10px 0;
         }
         /* ▼ ホバー時 */
         .global-nav > ul > li > a:hover {
             background: #ebf6f7; /* 優しい色で反応 */
         }
         /* ▼ ドロップダウンメニューの位置調整（ずれ防止） */
         .dropdown {
             position: relative;
         }
        
        /* ===== メインコンテンツ（修正） ===== */
        .main-content {
           width: 100%;
           max-width: 1000px;
           margin: 0 auto;
           background: #f7fcfe;
           padding: 40px;
           /* ここを追加：余ったスペースを埋めてフッターを押し下げる */
           flex: 1; 
        }
        
        .main-content h1 {
          font-weight: 700;       /* 太字 */
          position: relative;
          padding-bottom: 0.2em; /* 線との距離 */
        }

        .main-content h1::after {
          content: "";
          position: absolute;
          left: -0.2em;
          bottom: 0;
          width: 100%;
          height: 3px;
          background-color: #59b9c6; /* 仮の色 */
        }

        /* ===== バナー全体 ===== */
        .banner-area {
          max-width: 1000px;
          margin: 0 auto 30px;
        }
        
        /* 上の固定バナー */
        .banner-static img {
          width: 100%;
          display: block;
        }
        
        /* 切り替えバナー枠 */
        .banner-rotator {
          position: relative;
          width: 100%;
          height: 140px; /* バナー高さ */
          margin-top: 15px;
        }
        
        /* 全画像を重ねる */
        .banner-rotator img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          transition: opacity 1.2s ease;
        }
        
        /* 表示中 */
        .banner-rotator img.active {
          opacity: 1;
        }
        
        
        /* ===== 最新ニュース ===== */
        .news-section {
          margin-bottom: 50px;
        }
        .news-section h2 {
          font-size: 1.4rem;
          margin-bottom: 15px;
          padding-left: 0.4em;
          border-left: 5px solid #59b9c6;
        }
        .news-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .news-list li {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 12px 0;
          border-bottom: 1px solid #cfe8ec;
          font-size: 0.95rem;
        }
        .news-list time {
          color: #555;
          font-family: monospace;
          white-space: nowrap;
        }
        .news-category {
          font-size: 0.75rem;
          padding: 2px 8px;
          background: #e6f4f6;
          color: #0f2350;
          border-radius: 12px;
          white-space: nowrap;
        }
        .news-list a {
          color: #0f2350;
          text-decoration: none;
        }
        .news-list a:hover {
          text-decoration: underline;
        }

        
        /* ===== フッター（修正版） ===== */
        footer {
           background-color: #83ccd2;
           width: 100%;
           max-width: 1000px;
           margin: 0 auto;
           padding: 30px 40px;
           box-sizing: border-box;
        }
        /* 1段目のレイアウト */
        .footer-top {
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
        /* marginではなく、paddingで内側の余白を管理します */
           padding-bottom: 20px; 
        }
        /* ロゴを並べるエリア */
        .footer-logos {
           display: flex;
           align-items: center;
           gap: 20px; /* ロゴ同士の間隔 */
        }
        /* メインロゴのサイズ調整と間隔追加 */
        .footer-logo-main {
           height: 40px; 
           width: auto;
           margin-right: 120px; /* ★ここを追加！YouTubeロゴとの距離を広げます */
        }
        /* SNSアイコンのサイズ調整 */
        .sns-icon {
           height: 40px; /* アイコンを小さく揃える */
           width: auto;
           transition: opacity 0.2s;
        }
        .sns-icon:hover {
           opacity: 0.7;
        }
        /* お問い合わせテキストの調整 */
        .footer-contact p {
           margin: 0; 
           font-size: 14px;
           line-height: 1; /* 行の高さを最小限にしてズレを防ぐ */
        }
        /* 2段目：著作権エリア */
        .footer-bottom {
           border-top: 1px solid #6aa7b1; 
           padding-top: 15px;
           width: 100%;       /* 幅をいっぱいにする */
           text-align: center; /* これで文字が中央に来ます */
        }
        .footer-bottom p {
           margin: 0;
           font-size: 12px;
        }
        /* お問い合わせリンクのスタイル */
        .contact-link {
           color: inherit;          /* 周りの文字と同じ色にする */
           text-decoration: none;   /* 下線を消す */
           transition: opacity 0.3s;
        }
        .contact-link:hover {
           text-decoration: underline; /* マウスを乗せた時だけ下線を表示（クリックできることを示す） */
           opacity: 0.7;               /* 少し薄くする */
        }