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




/* --------------------
   コンテナ（矢印の基準となる要素）
   -------------------- */
.gallery-container {
  position: relative; /* 矢印を絶対配置するための基準にする */
  display: inline-block; /* 画像のサイズに合わせる */
}

/* --------------------
   共通の矢印スタイル
   -------------------- */
.arrow {
  display: block;
  position: absolute; /* 親要素に対して絶対配置 */
  top: 50%; /* 親要素の上端から50%の位置に配置 */
  width: 20px; /* 矢印のサイズ（横幅） */
  height: 20px; /* 矢印のサイズ（縦幅） */
  margin-top: -10px; /* 縦方向の中央に調整 (heightの半分をマイナス) */
  cursor: pointer;
  z-index: 10; /* 画像より手前に表示 */
  
  /* 線のスタイルを設定 */
  border-style: solid;
  border-width: 3px 3px 0 0; /* 上と右だけに線をつける */
  border-color: #000; /* 線の色（例として黒） */
}

/* --------------------
   左矢印のスタイル
   -------------------- */
.arrow-left {
  left: 20px; /* 左端からの距離 */
  /* 右上辺と左下辺に線がある四角を、左向きの「くの字」になるよう回転 */
  transform: rotate(-135deg); 
  /* または、左上辺と左下辺に線をつけて回転: border-width: 0 0 3px 3px; transform: rotate(45deg); などでも作成可能 */
}

/* --------------------
   右矢印のスタイル
   -------------------- */
.arrow-right {
  right: 20px; /* 右端からの距離 */
  /* 右上辺と左下辺に線がある四角を、右向きの「くの字」になるよう回転 */
  transform: rotate(45deg);
}

/* --------------------
   画像（必要に応じて）
   -------------------- */
image {
  margin-left: auto;
  margin-right: auto;
  display: block; /* margin: auto を効かせるために block に変更 */
}

 /* 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;
        }