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

 /* Ensure the figure handles layout correctly */
        .wp-block-image figure {
            margin: 0;
            /* Reset browser default */
            position: relative;
            display: inline-block;
            /* Or block, depending on WP theme, usually table or block. Inline-block fits content */
        }

        .aligncenter {
            text-align: center;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        /* If figure is centered, it might need display: table or fit-content to wrap image tightly for positioning */
        .wp-block-image .aligncenter {
            display: table;
            /* Common WP trick or fit-content */
            margin: 0 auto;
        }

        .wp-block-image img {
            display: block;
            height: auto;
            max-width: 100%;
        }

        /* 
           Target the link inside the figure 
        */
        .wp-block-image figure a {
            display: block;
            position: relative;
            /* Anchor point for play button */
        }

        /* 
           Create Play Button Rectangle using ::before 
        */
        .wp-block-image figure a::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
            z-index: 1;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        /* 
           Create Play Button Triangle using ::after 
        */
        .wp-block-image figure a::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* Start centered */
            /* Fine tune triangle center visually if needed. 
               The triangle is created by borders, so 'center' is the center of the 0x0 box.
               The triangle points right. 16px width. 20px height.
               To visually center, we might need to offset it slightly to the right.
            */
            margin-left: 2px;
            /* Visual correction */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 16px;
            /* Top Right Bottom Left */
            border-color: transparent transparent transparent #ffffff;
            z-index: 2;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        /* 
           Hover Effect 
           Make both pseudo-elements fade out
        */
        .wp-block-image figure a:hover::before,
        .wp-block-image figure a:hover::after {
            opacity: 0.6;
        }