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

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


/* 本文中のアイキャッチ画像 (.eye-catch) を1:1にする */
.article .eye-catch {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1の比率枠を作る */
    overflow: hidden;
}

.article .eye-catch img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 中央を基準にトリミング */
    object-position: center;
}

/* ヘッダーのキャッチフレーズ（ニャンコ達と暮らす日々の思い出を綴ります。） */
.header .tagline {
    color: #ffffff !important;          /* 白文字 */
    //font-weight: bold;                  /* 太字 */
    background: rgba(0, 0, 0, 0.4);     /* 半透明の黒背景 */
    padding: 4px 8px;                   /* 文字まわりの余白 */
    border-radius: 4px;                 /* 角を少し丸く */
    display: inline-block;              /* 背景を文字の幅だけにする */
    text-shadow: 0 0 5px rgba(0,0,0,0.8); /* 影をつけてくっきりさせる */
}

/* 目次（TOC）の幅を広げる */
.toc {
    max-width: 100% !important;  /* 最大幅を本文幅いっぱいに */
    width: 100%;
}



/************************************
 * ギャラリーのクリックイベント用
 * 
***********************************/

/* ギャラリー・単独画像とも、figure とキャプションを「リンクらしい」見た目に */
.entry-content figure.wp-block-image,
.entry-content figure.wp-block-image > figcaption,
.entry-content figure.wp-block-image .wp-element-caption {
    cursor: pointer;
}

/* ギャラリーのグラデーションオーバーレイはクリックをブロックしないようにする */
.wp-block-gallery.has-nested-images figure.wp-block-image::before {
    pointer-events: none;
}
/* a タグを含む画像だけ マウスポインタを指マークにする */
.entry-content figure.wp-block-image:has(a[href]),
.entry-content figure.wp-block-image:has(a[href]) > figcaption,
.entry-content figure.wp-block-image:has(a[href]) .wp-element-caption {
    cursor: pointer;
}

/* a タグを含まない画像は通常カーソル */
.entry-content figure.wp-block-image:not(:has(a[href])),
.entry-content figure.wp-block-image:not(:has(a[href])) > figcaption,
.entry-content figure.wp-block-image:not(:has(a[href])) .wp-element-caption {
    cursor: default;
}



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

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

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