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

        * {
            
            margin: 0;

        }

          body{
              background-color: #ebebeb;
              padding-top: 60px;
          }

                  /* ヘッダー */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background-color: #202124;
            display: flex;
            align-items: center;
            padding: 10px;
            z-index: 1000; /* ヘッダーを前面に固定 */
        }
        .menu-toggle {
            font-size: 1.5em;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            display: none; /* デフォルトでは非表示 */
            margin-left: auto; /* 右寄せ */
        }

        .nav-menu {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 100%;
        }
        
        .nav-menu ul {
            list-style: none;
            display: flex;
            gap: 20px;
            padding: 0;
        }
        
        .nav-menu a {
            text-decoration: none;
            color: white;
        }
        
        /* 画面幅が768px以下になったらメニューを隠し、ハンバーガーを表示 */
        @media (max-width: 768px) {
            .menu-toggle {
            display: block;
            position: absolute;
            right: 20px; /* 右端に配置 */
            top: 50%;
            transform: translateY(-50%);
            }
        
            .nav-menu {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            background: #333;
            }
        
            .nav-menu ul {
            flex-direction: column;
            text-align: center;
            padding: 0;
            }
        
            .nav-menu a {
            display: block;
            padding: 10px;
            color: white;
            }
        
            .nav-menu.show {
            display: flex;
            }
        }
        /*ヘッダー*/

        h1{
          text-align: center;
        }

        .container {
            width: 85%;
            margin: 20px auto; /* 中央配置 */
            padding: 20px;
            background-color: #ffffff; /* 背景色 */
            border-radius: 5px;
        }

        .user_container img{
            width: 100%; /* コンテナの幅に合わせる */
            height: 100%; /* コンテナの高さに合わせる */
            object-fit: cover; /* 画像をコンテナ内に埋め込み、アスペクト比を維持しトリミングする */
        }

        .AD_container {
            width: 85%;
            margin: 20px auto; /* 中央配置 */
            padding: 20px;
            background-color: #ffffff; /* 背景色 */
            border-radius: 5px;
            text-align: center;
        }

        /* トップページへ戻る */
        html {
          scroll-behavior: smooth;
        }

        .pagetop {
          height: 50px;
          width: 50px;
          position: fixed;
          right: 30px;
          bottom: 30px;
          background: #fff;
          border: solid 2px #000;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2;
        }

        .pagetop__arrow {
          height: 10px;
          width: 10px;
          border-top: 3px solid #000;
          border-right: 3px solid #000;
          transform: translateY(20%) rotate(-45deg);
        }
        /* トップページへ戻る */

        /*お知らせ*/
        section {

          margin: 40px auto;
          width: 97%;
          color: #000000;
        }

        summary {
          display: block;
          cursor: pointer;
          padding: 10px;
          font-family: "Space Mono", monospace;
          font-size: 22px;
          transition: .3s;
          border-bottom: 2px solid;
          user-select: none;
        }

        details > div {
          display: flex;
          flex-wrap: wrap;
          overflow: auto;
          height: 100%;
          user-select: none;
          padding: 0 20px;
          font-family: "Karla", sans-serif;
          line-height: 1.5;
        }

        details > div > img {
          align-self: flex-start;
          max-width: 100%;
          margin-top: 20px;
        }

        details > div > p {
          flex: 1;
        }

        details[open] > summary {
          color: rgb(0, 0, 0);
        }

        @media (min-width: 768px) {
          details[open] > div > p {
            opacity: 0;
            animation-name: showContent;
            animation-duration: 0.6s;
            animation-delay: 0.2s;
            animation-fill-mode: forwards;
            margin: 0;
            padding-left: 20px;
          }

          details[open] > div {
            animation-name: slideDown;
            animation-duration: 0.3s;
            animation-fill-mode: forwards;
          }

          details[open] > div > img {
            opacity: 0;
            height: 100%;
            margin: 0;
            animation-name: showImage;
            animation-duration: 0.3s;
            animation-delay: 0.15s;
            animation-fill-mode: forwards;
          }
        }

        @keyframes slideDown {
          from {
            opacity: 0;
            height: 0;
            padding: 0;
          }

          to {
            opacity: 1;
            height: var(--contentHeight);
            padding: 20px;
          }
        }

        @keyframes showContent {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        /*お知らせ*/

                /*お知らせ*/

        .notice_container {
          width: 80%;
          margin: 20px auto;
          padding: 10px;
          background-color: #f8f8f8; /* 背景色 */
          border: 1px solid #d1d1d1; /* 外枠 */
          border-radius: 10px; /* 角を丸く */
          font-family: 'Noto Sans JP', sans-serif;
        }

        /* 各お知らせアイテム */
        .notice_item {
          display: flex; /* 横並び配置 */
          justify-content: space-between; /* 左右に要素を分ける */
          align-items: center; /* 縦中央揃え */
          padding: 10px 0; /* 上下余白 */
          border-bottom: 1px solid #ddd; /* 下線 */
        }

        .notice_item:last-child {
          border-bottom: none; /* 最後のアイテムは下線を削除 */
        }

        /* 左側の日付 */
        .notice_date {
          flex: 1; /* 左側の余白調整 */
          color: #333; /* 文字色 */
          font-weight: bold;
        }

        /* 中央の説明文 */
        .notice_description {
          flex: 10; /* 中央の説明文が広く表示される */
          color: #555;
          font-size: 0.9rem;
          line-height: 1.4;
        }
        /*お知らせ*/

        #counter-container img {
          text-align: center;
          width: 200px; /* 任意のサイズに変更 */
          height: auto;
        }

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