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

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

/* 3列カードリストの先頭1記事目だけを100%幅（3列分）にする */
.ect-3-columns .entry-card-wrap:first-of-type {
    width: 100%;
    margin-bottom: 30px; /* 2行目以降（小さいカード）との間隔 */
}

/* 先頭記事のサムネイル画像が縦に巨大化するのを防ぐ */
.ect-3-columns .entry-card-wrap:first-of-type .entry-card-thumb img {
max-height: 480px;
    width: 100%;
    object-fit: contain; /* 画像全体を比率を保って表示（見切れないようにする） */
    background-color: #f3f3f3; /* 余白を埋める色。好みのカラーコードに変更してください */
}

/* 先頭記事のタイトル文字サイズを少し大きくして見出しらしくする（任意） */
.ect-3-columns .entry-card-wrap:first-of-type .entry-card-title {
    font-size: 1.5em;
}

/* メタ情報の親要素を整列させる */
.custom-matadata-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 追加した投稿者情報のスタイル */
.custom-author-info {
    display: flex;
    align-items: center;
}

/* アバター画像（円形・隙間調整） */
.custom-author-avatar img {
    border-radius: 50%;
    margin-right: 6px;
    display: block;
}

/* 投稿者名のスタイル */
.custom-author-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--cocoon-text-color);
    font-size: 0.85em;
    font-weight: bold;
}

.custom-author-link:hover {
    text-decoration: underline;
}

/* 著者ページのプロフィールウィジェット内の余白・枠線を調整 */
.author-box {
    border-width: 0px;
}

.page .date-tags{display:none;}

/*検索窓*/
.search-box {
width:100%;
margin:0 1.5px 0.5em; 
position: relative; display: flex;
}
.search-edit {
width:auto; /*入力部分の長さ*/
height:33px ;/*検索窓の高さ*/ 
background: #fff; /*入力部分の背景色*/
 font-size: 15px;
}	
.search-submit {
background: #fff; /*ボタン部分の背景色*/
color: #aeab92;/*アイコンの色*/
position: absolute; margin:6px 6px 3px; 
cursor: pointer; line-height:0; /*検索アイコンの高さや位置*/ 
border:none;padding: 0;}

.search-box input::placeholder {
font-size: 14px; color: #aeab92;/*プレースホルダーのフォント大きさと色*/
}

/*768px以下*/
@media screen and (max-width: 768px){
/*タブレット・スマホの時は非表示*/
.add-header-contents {display: none; }
}


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

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

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