/* =========================
   リセット
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================
   全体
========================= */

body {
    background-color: #f3f3f3;
    font-family: sans-serif;

    padding: 40px;
}


/* =========================
   ヘッダー
========================= */

.header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 40px;
}


/* タイトル */

.site-title {
    font-size: 48px;

    font-weight: normal;
}


/* =========================
   ナビゲーション
========================= */

.nav-menu {
    display: flex;

    gap: 0;
}


/* ナビボタン */

.nav-button {
    width: 140px;
    height: 120px;

    background-color: white;

    border: 3px solid #fefefe;

    font-size: 28px;

    cursor: pointer;

    transition: 0.2s;
}


/* ホバー */

.nav-button:hover {
    background-color: #dcefff;
}


/* =========================
   メイン
========================= */

.main-container {
    border: 3px solid #fefefe;

    padding: 60px;

    min-height: 800px;

    background-color: white;
}


/* =========================
   チャンネル一覧
========================= */

.channel-list {
    display: flex;

    flex-direction: column;

    gap: 60px;
}


/* チャンネルブロック */

.channel-block {
    display: flex;

    flex-direction: column;

    gap: 30px;
}


/* =========================
   チャンネルカード
========================= */

.channel-card {
    width: 1000px;

    height: 130px;

    background-color: #f3f3f3;

    border: 4px solid #fefefe;

    display: flex;

    align-items: center;

    cursor: pointer;

    transition: 0.2s;
}


/* ホバー */

.channel-card:hover {
    transform: scale(1.01);

    background-color: #a8def7;
}


/* =========================
   アイコン
========================= */

.channel-icon {
    width: 100px;

    height: 100px;

    margin-left: 20px;

    border-radius: 50%;

    border: 4px solid #fefefe;

    background-color: #f3f3f3;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 20px;

    text-align: center;

    flex-shrink: 0;
}


/* =========================
   チャンネル名
========================= */

.channel-name {
    flex: 1;

    text-align: center;

    font-size: 50px;

    color: #111;
}


/* =========================
   コンテンツ一覧
========================= */

.content-list {
    display: flex;

    gap: 30px;

    padding-left: 40px;
}


/* =========================
   コンテンツカード
========================= */

.content-card {
    width: 230px;
    height: 160px;
    background-color: #f3f3f3;
    border: 4px solid #fefefe;
    color: black;
    font-size: 36px;
    cursor: pointer;
    transition: 0.2s;

    /* 2. 写真ボタンとして動かすために追加する設定 */
    display: inline-block;  /* 縦横サイズ(width/height)を有効にする */
    overflow: hidden;       /* 画像が枠からはみ出るのを防ぐ */
}

/* 3. 中の写真（imgタグ）を枠線ピッタシに合わせる設定 */
.content-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 縦横比を保ったまま、230x160のサイズにトリミングしてハメ込む */
    display: block;
}

/* ホバーしたときの動き（お好みで） */
.content-card:hover {
    opacity: 0.8;
    /* もしマウスを乗せたときに枠線を光らせたいなら、ここに border-color: #aaa; などを入れても楽しいです */
}


/* ホバー */

.content-card:hover {
    transform: translateY(-5px);

    background-color: #0075a3;
}