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

/* 2026/9/20追加・修正版 */
/*---------------------------------------------
* Cocoon タイトルの下に配置されたアイキャッチを上に重ねる
*--------------------------------------------*/
/* 画面幅にかかわらず親要素を固定する基本設定 */
.article-header {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 20px;
    width: 100%;
}

/* アイキャッチ画像の順番を一番上にして、ブロック要素にする */
.eye-catch-wrap {
    order: 1;
    margin: 0 0 20px 0 !important;
    width: 100%;
}
.eye-catch-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

/* PC・タブレット環境（横幅481px以上）の重ね合わせ処理 */
@media screen and (min-width: 481px) {
    /* タイトルを画像の下部に絶対配置で重ねる */
    .article-title {
        order: 2;
        position: absolute;
        bottom: 70px; /* 下からの位置（好みに合わせて微調整してください） */
        left: 30px;   /* 左からの位置 */
        right: 30px;  /* 右からの位置 */
        z-index: 10;
        color: #fff !important; /* 文字色を白に */
        font-size: 28px; /* 文字サイズ */
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); /* 文字の影 */
        background: rgba(0, 0, 0, 0.4); /* 文字を読みやすくする半透明の黒背景 */
        padding: 15px 20px;
        border-radius: 4px;
        margin: 0 !important;
    }

    /* 投稿日・更新日などのメタ情報をタイトルのさらに下に重ねる */
    .date-tags {
        order: 3;
        position: absolute;
        bottom: 25px; /* タイトルの下側に配置 */
        left: 35px;
        z-index: 11;
        margin: 0 !important;
    }
    .date-tags span, .date-tags a, .date-tags .post-date, .date-tags .post-update {
        color: #fff !important; /* メタ情報の文字も白にする */
    }
}