@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.entries.entries-list.entry-card-wrap {
    border: none; /* 全体グループの線削除 */
    padding: 10px; /* 内側余白保持（オプション） */
    margin-bottom: 20px; /* グループ間隔保持 */
}

.paired-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border: 1px solid #ccc; /* 2作品グループの線囲み: 太さ1px、グレー色 */
    border-radius: 5px; /* 角丸（オプション） */
    padding: 2%; /* 可変パディング（画面幅に比例） */
    width: 100%; /* 画面幅フルで可変調整 */
    max-width: 100%; /* 最大幅制限で固定感除去 */
    box-sizing: border-box; /* パディング/ボーダーを幅に含めて可変 */
}

.paired-row .entry-card {
    display: flex;
    flex-direction: column; /* 画像上、タイトル下（オプション2） */
    align-items: flex-start; /* 左揃え強化で位置揃え */
    width: 48%; /* 左右幅 */
}

.entry-card-thumb {
    height: 200px; /* 画像高さ固定でバランス */
    overflow: hidden; /* 画像切れ防止 */
    margin-bottom: 10px; /* 画像とタイトルの間隔 */
    width: 100%; /* フル幅でタイトルと揃え */
}

.entry-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像フィットでクリア */
}

.entry-card-content {
    width: 100%; /* 画像と同じ横幅 */
    text-align: left; /* 左詰め */
    padding-left: 0; /* 左寄せ強化（開始位置揃え） */
    margin-left: 0; /* 左マージンなしで画像左端揃え */
}

.entry-card-title {
    height: auto; /* 縦幅可変 */
    word-wrap: break-word; /* 長いタイトル折り返し（はみ出し防止） */
    overflow-wrap: break-word; /* 追加: 単語折り返しで線からはみ出さない */
    white-space: normal; /* 追加: 通常のテキスト折り返しを許可 */
    overflow: visible; /* 切れ防止 */
    font-size: 18px; /* 基本サイズ拡大で全表示 */
    line-height: 1.4; /* 行間調整 */
    margin: 0; /* マージンリセット */
    text-align: left; /* 左詰め */
    padding-left: 0; /* 左寄せ強化 */
}

.entry-card-title a {
    color: blue; /* リンク色: 青でリンクらしく */
    text-decoration: underline; /* 下線でクリックしやすく */
}

/* レスポンシブ: 画面幅変化対応 */
@media (max-width: 768px) {
    .paired-row {
        flex-direction: column; /* 左右を縦に */
        align-items: center; /* 中央揃え（縦並び時） */
        padding: 2%; /* 可変パディング継続 */
    }
    .original-col, .live-col {
        width: 100%; /* フル幅 */
        margin-bottom: 20px;
        align-items: center; /* 各カード中央揃え */
    }
    .entry-card-content {
        text-align: center; /* 縦並び時: 中央揃え */
    }
    .entry-card-title {
        font-size: 16px; /* スマホで可変小さく */
        text-align: center; /* 縦並び時: 中央揃え */
    }
    .entry-card-thumb {
        height: 150px; /* スマホで画像小さく調整 */
    }
}