@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイル
************************************/
.video-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fff8f0;
}

.video-thumb {
    width: 320px;
    height: 240px;
    object-fit: cover;
    flex-shrink: 0;
}

.video-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.video-title {
    margin: 0 0 5px 0;
    font-weight: bold;
}

.video-excerpt {
    margin: 0;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* デフォルトPC用 */
    -webkit-box-orient: vertical;
    line-height: 1.5em;
}

/* cocoon設定　全体　より　設定した背景画像を並べて表示*/
body {
  background-image: url('パターン画像URL');
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}

/* 固定ページのタイトルに「」がつくのを解除*/
.entry-title:before,
.entry-title:after {
  content: none !important;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
/*@media screen and (max-width: 1023px){*/
  /*必要ならばここにコードを書く*/
/*}*/
/**/
/*834px以下*/
/*@media screen and (max-width: 834px){*/
  /*必要ならばここにコードを書く*/
/*}*/

/*480px以下*/
/*@media screen and (max-width: 480px){*/
/*  .video-excerpt {*/
/*      -webkit-line-clamp: 3; /* 最大3行 */
/*  }*/
/*}*/

/* 高解像度モニター用（1920px以上） */
@media screen and (min-width: 1920px) {
    .video-excerpt {
        -webkit-line-clamp: 12; /* 8 → 12行に増やす */
    }
}

/* 中画面PC用（1024px〜1919px） */
@media screen and (min-width: 1024px) and (max-width: 1919px) {
    .video-excerpt {
        -webkit-line-clamp: 8; /* 4 → 8行に増やす */
    }
}

/* タブレット用（641px〜1023px） */
@media screen and (min-width: 641px) and (max-width: 1023px) {
    .video-excerpt {
        -webkit-line-clamp: 6; /* 3 → 6行に増やす */
    }
    .video-card {
        flex-direction: column;
    }
    .video-thumb {
        width: 100%;
        height: auto;
    }
}

/* スマホ用（〜640px） */
@media screen and (max-width: 640px) {
    .video-excerpt {
        -webkit-line-clamp: 4; /* 2 → 4行に増やす */
    }
    .video-card {
        flex-direction: column;
    }
    .video-thumb {
        width: 100%;
        height: auto;
    }
}

/* カテゴリタブの一覧の抜粋を複数行表示 */
.cocoon-widget-tabs .video-excerpt,
.widget-tab .video-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 表示したい行数に変更 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}