@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){
  /*必要ならばここにコードを書く*/
}

/* ===================================================
   1. 本棚の横スクロール用（書誌情報テキストの重なり対策込み）
   =================================================== */
/* WordPressの標準カラムをそのまま横一列に並べる */
.bookshelf-container .wp-block-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important; 
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    padding-bottom: 10px;
}

/* 各カラム（本の枠）が縦に潰れないように幅をキープする */
.bookshelf-container .wp-block-column {
    flex: 0 0 160px !important;
    min-width: 160px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 画像の下にあるテキストだけは正常に改行させて重なりを防ぐ */
.bookshelf-container .wp-block-column p,
.bookshelf-container .wp-block-column span,
.bookshelf-container .wp-block-column div {
    white-space: normal !important; 
    word-break: break-all !important; 
    display: block !important;
    margin-top: 8px !important;
    font-size: 13px; 
    line-height: 1.4;
}

/* スクロールバーのデザインを薄く綺麗に */
.bookshelf-container .wp-block-columns::-webkit-scrollbar {
    height: 6px;
}
.bookshelf-container .wp-block-columns::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}


/* ===================================================
   2. 不揃いな画像群の高さ統一用（合言葉：custom-gallery-img）
   =================================================== */
/* グループ化や親構造に関わらず、指定した画像をすべて横長(16:9)に統一する */
.custom-gallery-img img,
img.custom-gallery-img {
    width: 100% !important;
    height: 180px !important; /* お好みで 150px〜200px に調整してください */
    object-fit: cover !important; /* 画像を歪ませずに綺麗にトリミング */
}