@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

        body {
            font-family: 'Noto Sans JP', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0;
            background-color: #202124;
        }
      
        /*トップページへ戻る*/
        html {
            scroll-behavior: smooth;
        }

        header {
          font-family: 'Noto Sans JP', sans-serif;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            background-color: rgba(32, 33,36, 0.8); /* 半透明 */
            backdrop-filter: blur(6px); /* 背景ぼかし */
            padding: 10px;
            z-index: 1000; /* ヘッダーを前面に固定 */
        }

        hr {
            border: none;
            border-top: 2px solid rgb(179, 179, 179);
            width: 100%;
        }


    /* ハンバーガーボタン（ヘッダーの外） */
    .menu-toggle {
      position: fixed;
      top: 8px;
      right: 20px;
      width: 40px;
      height: 40px;
      z-index: 4000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      background: transparent;
    }

    .bar {
      width: 30px;
      height: 4px;
      background: #dbdbdb;
      border-radius: 2px;
      transition: 0.3s ease;
    }

    .menu-toggle.active .bar:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active .bar:nth-child(2) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* サイドバー */
    .sidebar {
      position: fixed;
      top: 0;
      right: -300px;
      width: 250px;
      height: 100vh; /* Changed to viewport height */
      background: rgba(32, 33,36, 0.95);
      box-shadow: -4px 0 10px rgba(0,0,0,0.1);
      transition: right 0.4s ease;
      z-index: 2000;
      padding: 80px 20px 20px;
      box-sizing: border-box; /* Added for better padding and height management */
    }

    .sidebar.active {
      right: 0;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sidebar ul li {
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      font-size: 18px;
      color: #333;
    }
    .sidebar ul li a{
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      font-size: 18px;
      color: #ffffff;
      text-decoration:none;
    }


        
        /*ヘッダー・検索フォーム用コンテナ(これがないと表示が崩れる)*/
        /*記事の量に応じてmargin-topの大きさを変更する*/
        .main-container{
            margin-top: 20vh;
        }
        /*ヘッダー・検索フォーム用コンテナ*/

        /* 検索フォームのデザイン */
        .search-container {
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
        }


        .search-container-03{
          display: none;
        }

        .search-form {
          display: flex;
          align-items: center;
          border: 2px solid #424242;
          border-radius: 25px;
          overflow: hidden;
          background-color: #424242;
          width: 50vw;
        }

        .shortcuts_search_btn{
            display: none;
        }

        .Group_btn{
            display: none;
        }
        
        .search-form-header{
          display: flex;
          align-items: center;
          border: 2px solid #424242;
          border-radius: 25px;
          overflow: hidden;
          background-color: #424242;
          width: 50vw;
        }

        .search-form-header-search{
          display: flex;
          align-items: center;
          border: 2px solid #424242;
          border-radius: 25px;
          overflow: hidden;
          background-color: #424242;
          width: 50vw;
        }

        .scroll-image{
            width: 8vh;
            height: auto ;
            margin-top: 10vh;
            margin-bottom: 10vh;
        }
        p.title {
        text-align: center;
        font-size: 2.2rem;
        font-weight: bold;
        margin: 18px 0 12px 0;
        color: #fff;
        }


        @media (max-width: 1250px) {
            .search-form{
                width: 70vw;
            }
        }

    @media (max-width: 768px) {
      .search-form{
        width: 80vw;
      }

      .shortcuts_search_btn {
        font-family: 'Noto Sans JP', sans-serif;
        width: 80%;
        margin: 20px auto;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 20px;
      }

      .Group_btn {
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 40px;
        background: #424242;
        color: #FFF;
        text-decoration: none;
        text-align: center;
        font-size: 11px;
        line-height: 1.2;
        padding: 5px;
      }
      .shortcuts_search_table_pc{
        display: none;
      }
      .scroll-image{
        width: 5vh;
      }

      .blog-card {
        max-width: 98vw;
        min-width: 0;
        padding: 4px 0;
      }
      .blog-card img {
        width: 60px;
        height: 60px;
        min-width: 40px;
        max-width: 80px;
        object-fit: cover;
        border-radius: 8px;
      }
      .blog-card .content {
        padding: 8px;
      }

    p.title {
        font-size: 1.1rem;
        margin: 10px 0 8px 0;
    }

      .blog-card p {
        font-size: 0.7rem;
      }
      .blog-card .Group {
        font-size: 0.7rem;
      }
    }

        @media (max-width: 580px) {
            .header_logo{
                display: none;
            }

            .search-form-header-search{
              display: none;
            }
                    .search-container-03{
                    display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
        }
        }

        .search-box {
          flex: 1;
          border: none;
          outline: none;
          padding: 10px 15px;
          font-size: 16px;
          background-color: transparent;
        }

        .search-button {
          border: none;
          background-color: #424242;
          padding: 10px 15px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .search-button i {
          font-size: 18px;
          color: #888;
        }

        .search-button:hover i {
          color: #000;
        }

        /*検索フォームのデザイン*/


        .button-container {
            margin-bottom: 20px;
        }
        .square-button {
            background: #3d3d3d;
            color: #ffffff;
            width: 200px;
            height: 50px;
            border: none;
            text-align: center;
            line-height: 50px;
            font-size: 1em;
            cursor: pointer;
            display: inline-block;
            text-decoration: none;
        }
        .square-button:hover {
            background: #555555;
        }


        .button {
            display: flex;
            text-align: center;
            height: 50px;
            width: 200px;
            line-height: 50px;
            position: relative;
            background-color: transparent;
            cursor: pointer;
            border: 2px solid #616161;
            overflow: hidden;
            border-radius: 30px;
            color: #ffffff;
            transition: all 0.5s ease-in-out;
            text-decoration: none; /* 下線を消す */
            font-weight: 700;
            letter-spacing: 2px;
            justify-content: center;  /* 水平方向の中央揃え */
            align-items: center;  /* 垂直方向の中央揃え */
        }


        .type1::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.5s ease-in-out;
            background-color: #424242;
            border-radius: 30px;
            visibility: hidden;
            height: 10px;
            width: 10px;
            z-index: -1;
        }

        .button:hover {
            box-shadow: 1px 1px 200px #252525;
            color: #fff;
            border: 2px solid transparent; /* Maintain border width to prevent layout shift */
        }

        .type1:hover::after {
            visibility: visible;
            transform: scale(100) translateX(2px);
        }  

        footer{
            font-family: 'Noto Sans JP', sans-serif;
            width: 100%;
            left: 0px;
            color: white;
            border-top-style: 2px solid #7d7d7d;
            text-align: center;
            padding: 10px 0;
        }
        
        .MutualLink{
          color: #53ACFF;
        }

 
        /*記事*/
        /* メインコンテンツセクション */
        main {
          text-align: center;
            display: flex;
            flex-direction: column; /* 縦に並べる */
            align-items: center;
            padding: 20px;
        }

        /* ブログ記事のカード */

        .blog-card {
            display: flex;
            flex-direction: row; /* 横並びに変更 */
            align-items: center;
            border-bottom: 3px solid #d1d1d1;
            margin: 15px 0; /* 縦に追加されるように上下マージン */
            width: 100%; /* カード全体の幅を確保 */
            max-width: 800px; /* 最大幅を指定 */
            overflow: hidden;
        }


        .blog-card img {
            width: 150px; /* 固定幅 */
            height: auto;
            object-fit: cover;
        }


        .blog-card .content {
          padding: 15px;
          flex: 1; /* タイトル部分を拡張 */
        }


        /* リンクのスタイルを調整 */
        .blog-card a {
            display: block; /* ブロック要素として設定 */
            width: 100%; /* 横幅をカード全体に固定 */
            text-decoration: none; /* 下線を削除 */
            color: inherit; /* 親の文字色を継承 */
        }


        .blog-card h2 {
            margin: 0 0 10px;
            font-size: 1.5rem;
            color: #ffffff;
        }


        .blog-card p {
          text-align: left;
            font-size: 1rem;
            line-height: 1.6;
            color: #ffffff;
            margin: 0;
        }

        
        .blog-card .Group {
            font-size: 1rem;
            line-height: 1.6;
            color: #ffffff;
            margin: 0;
        }

      /*Dev*/
/*Dev*/
.blog-card h2 {
  position: relative; /* 必須: ::afterの位置調整に必要 */
  margin: 0 0 10px;
  font-size: 1.5rem;
  color: #ffffff;
  display: inline-block; /* テキスト内容の幅に限定 */
}

.blog-card h2::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%; /* h2のテキスト幅に合わせる */
  height: 2px;
  background: #ffffff; /* アンダーラインの色 */
  bottom: -5px; /* アンダーラインの位置調整 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* アニメーションの滑らかさ */
}

.blog-card h2:hover::after {
  visibility: visible;
  bottom: 0; /* ホバー時のアンダーライン位置 */
  opacity: 1;
}
      /*Dev::h2にホバーアニメーションを追加*/



        .container {
            width: 80%;
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 15px;
            color: white;
            border: 2px solid #7d7d7d;
            writing-mode: horizontal-tb;
            text-orientation: mixed;
            /* 横方向のレイアウトを保つ */
            display: block;
        }


        .title{
          text-align: center;
        }
        /*記事*/

            /* ローディング画面のスタイル */
        #loading-screen {
          position: fixed;
          width: 100%;
          height: 100%;
          background: #202124;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          z-index: 9999;
        }

        .loading_text{
          text-align: center;
          color: white;
        }

        #logo {
          width: 200px;
          margin-bottom: 30px;
        }

        .top-icon{
          text-align: center;
        }

        .progress-bar {
          width: 15%;
          height: 10px;
          border-radius: 5px;
          overflow: hidden;
        }

        .progress-bar-fill {
          height: 100%;
          width: 0%;
          background: #ffffff;
          transition: width 1s linear;
        }

        .search_container_02{
          margin: 20px auto; /* 中央配置 */
          border-radius: 10px;
          display: none; /* 初期状態を非表示にする */
          justify-content: center; /* 中央寄せ */
          align-items: center; /* 垂直方向中央揃え */
          gap: 10px; /* 要素間のスペース */
        }

        .sns-btn {
            display: flex;
            display: flex;
            justify-content: center; /* ← 中央揃え */
            padding: 0;
        }

        .sns-btn li {
            text-align: center;
            margin-left: 10px;
            margin-right: 10px;
            list-style: none;
        }

        .sns-btn li img{
            width: 30px;
            height: auto;
        }

        /*ローディング用*/
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

    .search-container-02 {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      width: 60%;
      text-align: center;
    }

        .search-form-02 {
          display: flex;
          align-items: center;
          border: 2px solid #424242;
          border-radius: 25px;
          overflow: hidden;
          background-color: #424242;
          width: 100%;
          max-width: 600px; /* 推奨：これで横幅制限 */
        }

        .search-box {
          flex: 1;
          border: none;
          outline: none;
          padding: 10px 15px;
          font-size: 16px;
          background-color: transparent;
          color: white;
          min-width: 0; /* ← はみ出し防止 */
        }

        .search-button {
          border: none;
          background-color: #424242;
          padding: 10px 15px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0; /* ← ボタンの幅を縮めないように */
        }

        .search-button i {
          font-size: 18px;
          color: #888;
        }

        .search-button:hover i {
          color: #000;
        }
        /*検索フォームのデザイン*/

        #loading {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 20px;
          font-size: 16px;
          color: #444;
        }

        .spinner {
          width: 40px;
          height: 40px;
          border: 5px solid #ccc;
          border-top-color: #1F2128;
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin-bottom: 10px;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
                /*検索システム*/
        .highlight {
            font-weight: bold;
            color: #333333;
            background-color: Yellow;
            padding: 3px 5px;
        }