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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*絞り込み検索の背景色*/
.custom-filter-widget {
    background-color: #F5F5DC;
    padding: 15px;
    border-radius: 5px;
}
.custom-filter-widget h3 {
    margin-top: 0;
}
.custom-filter-widget input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
}
.custom-filter-widget button {
    background-color: #FFC941;
    color: #ffffff;
    padding: 10px;
    border: none;
    cursor: pointer;
}
.custom-filter-widget button:hover {
    background-color: #FFB3B3;
}

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

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

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

/* タイトル */
h2 {
    font-size: 24px; /* タイトルのフォントサイズを調整 */
}

/* ダイアリー画像 */
.diary-images {
    margin-bottom: 20px; /* 画像とテキストの間の余白を追加 */
}

.diary-images img {
    max-width: 100%; /* 画像が親要素にフィットするようにする */
    height: auto; /* アスペクト比を保持したまま画像の高さを自動調整 */
    display: block; /* 画像をブロック要素として配置 */
    margin-bottom: 10px; /* 画像間の余白を追加 */
}

.diary-images-column {
    display: flex; /* 画像を横並びに配置 */
    flex-wrap: wrap; /* 画像が列から折り返されるようにする */
}

.diary-images-column img {
    width: calc(25% - 10px); /* 画像の幅を均等に調整 */
    margin-right: 10px; /* 画像間の横の余白を追加 */
    margin-bottom: 10px; /* 画像間の縦の余白を追加 */
}

/* 使い方のテキスト */
p {
    text-align: left; /* テキストを左揃えにする */
    margin-bottom: 20px; /* テキストとプロフィール情報の間の余白を追加 */
}