/* 全体のリセットと基本設定 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
        margin: 0;
        padding: 0;
    }

    header {
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
        position: relative;
    }
 
    header a {
        text-decoration:none;
    }

    .logo {
        font-size: 24px;
        font-weight: bold;
    }
    
    .search-bar input {
        width: 80%;
        padding: 8px;
        margin-top: 10px;
        border: none;
        border-radius: 5px;
    }
    
    .sidebar-toggle {
        display: none;
        font-size: 24px;
        background: none;
        border: none;
        color: white;
        position: absolute;
        top: 15px;
        right: 10px;
    }
    
    /* コンテンツエリア */
    .container {
        display: flex;
        /*flex-wrap: wrap;*/
    }
    
    .sidebar {
        width: 300px;
        padding: 20px;
        background-color: #f9f9f9;
        border-right: 1px solid #ccc;
        transition: transform 0.3s ease-in-out;
        transform: translateX(0);
    }
    
    .sidebar.active {
        transform: translateX(-100%);
    }
    
    .sidebar h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .sidebar ul {
        list-style-type: none;
        padding-left: 0;
    }
    
    .sidebar ul li {
        margin-bottom: 10px;
    }
    
    .sidebar ul li a {
        text-decoration: none;
        color: #333;
    }
    
    .sidebar ul li a:hover {
        text-decoration: underline;
    }
    
    .content {
        flex-grow: 1;
        padding: 20px;
    }
    
    h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
   
    h1 {
        font-size: 20px;
    }

    /* 最新イメージビデオのセクション（自動で改行するグリッドレイアウト） */
    .game-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .game {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 10px;
        text-align: center;
    }
    
    .game img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    
    .game h3 {
        font-size: 18px;
        margin: 10px 0;
    }
    
    .game p {
        font-size: 14px;
        color: #666;
    }

    /* 最新イメージビデオのセクション（自動で改行するグリッドレイアウト） */
    .iv-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 5px;
    }
    
    .iv {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 10px;
        text-align: center;
    }
    
    .iv img {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    
    .iv h3 {
        font-size: 18px;
        margin: 10px 0;
    }
    
    .iv p {
        font-size: 12px;
        color: #666;
    }

    /* 一覧 */
    .game-list .game-item {
        display: flex;
        background-color: #fff;
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .game-list .game-item img {
        width: 145px;
        height: 200px;
        border-radius: 10px;
        margin-right: 15px;
    }
    
    .game-list .game-info h3 {
        font-size: 16px;
    }
    
    .game-list .game-info p {
        font-size: 14px;
        color: #666;
    }
    
    /* フッター */
    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
    }
    
    footer ul {
        list-style-type: none;
        padding: 0;
        margin-top: 10px;
    }
    
    footer ul li {
        display: inline;
        margin: 0 10px;
    }
    
    footer ul li a {
        color: #fff;
        text-decoration: none;
    }
    
    /* モバイル向けのサイドバー表示 */
    @media (max-width: 768px) {
        .sidebar {
            position: absolute;
            top: 0;
            left: 0;
            /* height: 100%; */
            transform: translateX(-100%);
        }
    
        .sidebar.active {
            transform: translateX(0);
        }
    
        .sidebar-toggle {
            display: block;
        }
    
        .content {
            width: 100%;
            padding: 10px;
        }
    }
    
    
        /* 記事ページのスタイル */
    .breadcrumb {
        margin-bottom: 20px;
        font-size: 14px;
    }
    
    .breadcrumb a {
        text-decoration: none;
        color: #333;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
    }
    
    .game-info {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    
    .game-info th, .game-info td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }
    
    .game-info th {
        background-color: #f4f4f4;
    }
    
    .related-articles {
        margin-top: 20px;
    }
    
    .related-articles h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .related-articles ul {
        list-style-type: none;
        padding-left: 0;
    }
    
    .related-articles ul li {
        margin-bottom: 5px;
    }
    
    .related-articles ul li a {
        text-decoration: none;
        color: #007bff;
    }
    
    .related-articles ul li a:hover {
        text-decoration: underline;
    }
    
    
    .video-container {
        background-color: #000;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        width: 80%;
        max-width: 800px;
    }
    
    .video-player {
        width: 100%;
        height: auto;
    }
    
    .controls {
        display: flex;
        align-items: center;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.7);
    }
    
    .play-pause {
        background-color: transparent;
        color: #fff;
        border: none;
        font-size: 24px;
        cursor: pointer;
        margin-right: 10px;
    }
    
    .seek-bar {
        flex-grow: 1;
        margin: 0 10px;
        -webkit-appearance: none;
        height: 5px;
        border-radius: 5px;
        background: #ddd;
    }
    
    .seek-bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
    }
    
    .seek-bar::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
    }
    
    .fullscreen {
        background-color: transparent;
        color: #fff;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }
    
/* 見出し */

    .article-heading {
        background: #ffc0cb;
        border-left: solid 5px #e95295;
        line-height: 1.25;
        font-weight: bold;
        font-size: 24px;
        padding: 25px;
    }
    
    .stylish-heading-6 {
        font-family: 'Open Sans', sans-serif;
        font-size: 25px;
        font-weight: 700;
        color: #333;
        /* position: relative; */
        display: inline-block;
        transition: color 0.3s ease;
        margin-bottom:20px;
      }
      
      .stylish-heading-6::after {
        content: '';
        position: absolute;
        width: 0;
        height: 3px;
        bottom: -5px;
        left: 0;
        transition: width 0.3s ease;
      }
      
      .stylish-heading-6:hover {
        color: #ff6347;
      }
      
      .stylish-heading-6:hover::after {
        width: 100%;
      }
      
      .stylish-heading-3 {
        font-family: 'Open Sans', sans-serif;
        color: white;
        background-size: cover;
        padding: 20px;
        /* position: relative; */
        margin: 30px 0 15px;
      }
      
      .stylish-heading-3::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(213, 71, 61);
        z-index: -1;
        border-radius: 25px;
      }
      
      /* リンクボタン */
      .shop-search a, .shop-search a {
          border-radius: 25px;
          box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
          color: #fff;
          display: block !important;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
          margin: 0 auto;
          max-width: 480px;
          overflow: hidden;
          padding: 15px 0;
          position: relative;
          text-align: center;
          text-decoration: none;
      }
      
      .shop-search, .shop-search {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          gap: 1%;
          margin: 0 auto 15px;
          width: 95%;
          border: 0;
      }
      
      ol, ul {
          list-style: none;
          padding-left: 0px;
      }
      
      .shop-search li,.shop-search li {
          list-style: none;
          margin: 15px auto 0;
          width: 100%;
          border: 0 !important;
      }
      
      .shop-amazon a {
          background: rgb(250, 150, 13);
          background: linear-gradient(0deg, rgba(250, 150, 13, 1) 0%, rgba(250, 159, 42, 1) 100%);
      }
      
      .shop-rakuten a {
          background: rgb(213, 71, 61);
          background: linear-gradient(0deg, rgba(213, 71, 61, 1) 0%, rgba(228, 81, 74, 1) 100%);
      }
      
      .shop-yahoo a {
          background: rgb(67, 141, 230);
          background: linear-gradient(0deg, rgba(67, 141, 230, 1) 0%, rgba(85, 152, 233, 1) 100%);
      }
      
      .shop-furusato a {
          background: rgb(74, 155, 75);
          background: linear-gradient(0deg, rgba(74, 155, 75, 1) 0%, rgba(90, 171, 92, 1) 100%);
      }
      
      a:active, a:hover {
          opacity: 0.7;
      }
      

    .toc-container {
        background-color: #f8f9fa; /* 背景を淡いグレーに */
        border-radius: 8px; /* カードの角を丸くする */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* カードに影を追加 */
    }
    
    .toc-title {
        font-size: 1.5rem; /* タイトルの大きさ */
        margin-bottom: 10px;
        font-weight: bold;
        color: #343a40; /* タイトルの色 */
    }
    
    .list-group-item {
        border: none; /* リストのボーダーを削除 */
    }
    
    .list-group-item a {
        text-decoration: none; /* リンクの下線を消す */
        color: #007bff; /* リンクの色をBootstrapのプライマリカラーに */
        font-size: 1rem;
    }
    
    .list-group-item a:hover {
        text-decoration: underline; /* リンクにホバーしたときに下線を表示 */
        color: #0056b3; /* ホバー時の色を濃く */
    }
    
    .content h2 {
        margin-top: 30px; /* 見出しごとの余白を確保 */
    }
    
    .content p {
        font-size: 1.1rem;
        line-height: 1.6; /* 読みやすい行間 */
    }
    

    .news-list {
        padding: 0;
        list-style: none;
        margin: 0;
    }
    .news-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e0e0e0;
    }
    .news-date {
        font-size: 0.9rem;
        color: #888;
        min-width: 100px;
        margin-right: 15px;
    }
    .news-title a {
        color: #007bff;
        text-decoration: none;
        font-weight: bold;
    }
    .news-title a:hover {
        text-decoration: underline;
    }


/* DVD一覧コンテナ */
.dvd-container {
    display: flex;
    flex-wrap: wrap; 
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
}


/* DVDアイテム */
.dvd-item {
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto; /* サイズ固定で横並び */
}


/* DVDタイトル */
.dvd-title {
    font-size: 10px;
    line-height: 1.4;
    height: 2.8em; /* 2行分でカット */
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}