.content {
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
}

/* 画像サイズを200pxに指定 */
.problem-card img {
    width: 26vw;
    height: auto;
    margin-right: 15px;
    border-radius: 5px;
}

/* タイトルとリンクを横並びに配置 */
.problem-info {
    display: flex;
    flex-grow: 1;
    align-items: center;
    /* タイトルを上下中央に配置 */
    justify-content: space-between;
    overflow: hidden;
    /* はみ出しを防ぐ */
    padding: 10px;
}

/* タイトルを左寄せ */
.problem-info h3 {
    margin: 0;
    text-align: left;
}

.problem-card a:hover h3 {
    color: #555;
    /* ホバー時に文字色をやや濃くする */
    transition: color 0.3s ease;
}

/* ホバーエフェクト */
.problem-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

a {
    color: #333;
    text-decoration: none;
    /* 下線を削除 */
}

/* 折りたたみ部分（全体のデザイン） */
.problem-category {
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    width: 90%;
    max-width: 1200px;
    margin: 8px auto;
}

/* タイトル部分のデザイン */
.problem-category summary {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: min(2.4vw, 20px);
    font-weight: bold;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px 10px 0 0;
    transition: background 0.3s;
}

/* アイコン画像 */
.problem-category summary img {
    width: auto;
    height: min(10vw, 70px);
}

/* 各カテゴリのカラー設定 */
/* 1. 初心者向け - くすみグリーン */
.beginner summary {
    background: linear-gradient(to right, #BFD8B1, #88B68F);
}

.beginner summary:hover {
    background: linear-gradient(to right, #A5D0A0, #74A57A);
}

.beginner[open] .problem-group {
    background: rgba(191, 216, 177, 0.3);
}

/* 2. 環境設定 - くすみオレンジ */
.setup summary {
    background: linear-gradient(to right, #F0C998, #D9A573);
}

.setup summary:hover {
    background: linear-gradient(to right, #E8B982, #C99466);
}

.setup[open] .problem-group {
    background: rgba(240, 201, 152, 0.3);
}

/* 3. 新規項目 - くすみイエロー */
.VSCode-challenge summary {
    background: linear-gradient(to right, #E8E1A8, #C9BE7F);
}

.VSCode-challenge summary:hover {
    background: linear-gradient(to right, #E1DA95, #B9AC6F);
}

.VSCode-challenge[open] .problem-group {
    background: rgba(232, 225, 168, 0.3);
}

/* 4. 標準ライブラリ - くすみブルー */
.standard-library summary {
    background: linear-gradient(to right, #A5C8E1, #7FA7C7);
}

.standard-library summary:hover {
    background: linear-gradient(to right, #95B9DA, #6F98B9);
}

.standard-library[open] .problem-group {
    background: rgba(165, 200, 225, 0.3);
}

/* 5. 外部ライブラリ - くすみローズ */
.external-library summary {
    background: linear-gradient(to right, #D5A8B8, #B28392);
}

.external-library summary:hover {
    background: linear-gradient(to right, #C99AA8, #9E6F7F);
}

.external-library[open] .problem-group {
    background: rgba(213, 168, 184, 0.3);
}

/* 6. 補足 - くすみパープル */
.additional summary {
    background: linear-gradient(to right, #C5A3CF, #9C7EAB);
}

.additional summary:hover {
    background: linear-gradient(to right, #B895C0, #8A6F9A);
}

.additional[open] .problem-group {
    background: rgba(197, 163, 207, 0.3);
}

/* 7. GUI - モノトーンブラック系 */
.gui summary:hover {
    background: linear-gradient(to right, #2B2B2B, #444);
    /* 黒からダークグレーへのグラデーション */
}

.gui summary {
    background: linear-gradient(to right, #3A3A3A, #555);
}

.gui[open] .problem-group {
    background: rgba(50, 50, 50, 0.3);
    /* 開いたときの淡い黒背景 */
}

/* 8. physical - モノトーンブラック系 */
.physical summary:hover {
    background: linear-gradient(to right, #1c003b, #4a0058);
    /* 黒からダークグレーへのグラデーション */
}

.physical summary {
    background: linear-gradient(to right, #1f0047, #5500a5);
}

.physical[open] .problem-group {
    background: rgba(81, 0, 128, 0.3);
    /* 開いたときの淡い黒背景 */
}

/* 折りたたまれた中身 */

.problem-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
}

/* 製作中表示 */
.coming-soon {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    padding: 20px;
}

/* コンテンツボックスのデフォルト状態 (非表示) */
.content-box {
    display: none;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* アクティブ時の表示 (フェードイン) */
.content-box.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}


/* @media screen and (max-width: 780px) { */
h3 {
    font-size: 95%;
}

.pc {
    display: none;
}

.sp {
    display: block;
}

.problem-card {
    position: relative;
    /* 子要素の絶対配置用 */
    display: flex;
    align-items: center;
    width: 95%;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    /* ホバー時の拡大 */
    margin: auto;
    height: 80px;
}

.problem-card img {
    height: 100%;
    width: auto;
}

/* .gui {
    margin-bottom: 30px;
} */

/* ---- List Type Differentiation ---- */
/* Explains: softer, instructional feel */
.explains-list .video-card {
    border-left: 4px solid #6aa84f;
    background: #fffdf8;
}

.explains-list .video-card p {
    color: #2f6f2f;
    font-weight: 600;
}

.explains-list .video-card::after {
    content: "解説";
    position: absolute;
    right: 12px;
    top: 10px;
    background: rgba(106, 168, 79, 0.12);
    color: #3b7a3b;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
}

/* Problems: action-oriented, CTA feel */
.problems-list .video-card {
    border-left: 4px solid #1e40af;
    background: linear-gradient(90deg, #ffffff, #f4f8ff);
}

.problems-list .video-card p {
    color: #123a8a;
    font-weight: 700;
}

.problems-list .video-card::after {
    content: "問題";
    position: absolute;
    right: 12px;
    top: 10px;
    background: rgba(30, 64, 175, 0.10);
    color: #0f2a6a;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
}

/* Ensure badge doesn't overlap on small cards */
.video-card {
    position: relative;
}

/* Card action buttons: match thumbnail edge characters
   左 (解説): 淡いピンク、右 (問題): 淡いブルー */
.card-btn.explain-btn {
    background: linear-gradient(180deg, #ffd6e0, #ffb6cc);
    color: #6f1f2b;
    border: none;
}

.card-btn.explain-btn:hover {
    filter: brightness(0.96);
}

.card-btn.problem-btn {
    background: linear-gradient(180deg, #d6ecff, #b9e3ff);
    color: #06355f;
    border: none;
}

.card-btn.problem-btn:hover {
    filter: brightness(0.96);
}


.library-list .video-card {
    display: flex;
    flex-direction: column;
    /* min-height削除：タイトル無しカードでは不要 */
}

.video-card>a {
    display: block;
}

.card-actions {
    display: flex;
    gap: 8px;
    margin: 8px 8px 8px;
}