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

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

/* **** ヘッダー検索窓設定2025/08/25**** */
.header-in {
  position: relative;
}

.header-in .search-box {
  position: absolute;
  top: 20%;
  right: 220px;
  margin: 0;
  width: 230px;
  transform: translateY(-50%);

}

.header-in input[type="text"] {
border: 0;
font-size: 13px;
background-color: #fff;/*検索ボックスの背景色*/
border-radius: 0;
width: calc(100% - 45px);/*ボックスの幅を100%からボタンの幅と余白分を引いた値に指定*/
height: 30px;

}

.header-in .search-submit {
 	top: 0;
	right: 0px;
	height: 100%;
	width: px;
	color: #000;
background: url("http://green-breeze.jp/wp-content/uploads/2025/10/search_bt.png")no-repeat;
	border-radius: 0 4px 4px 0;
}

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .header-in .search-box {
    display: none;
  }
}



/************************************
 TOP画像フレーム 2025_08_18追加
************************************/
#main { background: transparent; }

/* polaroidの幅は100%にして、親liの幅に従う */
.polaroid {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  background: #ccc;
  margin-top: 10px;
	box-sizing: border-box;
	
}

.polaroid span {
  text-align: center;
  padding: 5px;
  display: block;
  color: #000;
}

ul.block-four {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* liの基本設定 */
ul.block-four li {
  list-style: none;
  box-sizing: border-box;
  padding: 10px;
  flex-grow: 0;          /* 成長しない */
  flex-shrink: 1;        /* 縮むのはOK */
  flex-basis: 25%;       /* 基本幅25% */
  min-width: 200px;      /* 最小幅 */
}

/* .polaroid マウスオーバー時のスタイル */
.polaroid:hover {
  background: #fff;           /* 背景色を変える */
  border-color: #5d845f;         /* 枠線の色を変える */
  transition: all 0.3s ease;     /* なめらかな変化 */
}

/* 文字（span）部分も一緒に変えたい場合 */
.polaroid:hover span {
  color: #335936;                /* 文字色を変える */
}

@media (max-width: 834px) {
  ul.block-four li {
    flex-basis: 33.3333%;
    min-width: 180px;
  }
}

@media (max-width: 375px) {
  ul.block-four li {
    flex-basis: 50%;
    min-width: 150px;
  }
}



/************************************
記事タイトル設定 2025_08_18追加
************************************/
.entry-title {
	color: #FFF;/*文字色*/

  padding: 0.5em 0.5em ;/*上下左右の余白*/
  border-top: solid 3px #adadad;/*上線*/
  border-bottom: solid 3px #adadad;/*下線*/
}

 .category .entry-content,
    .category .post-meta {
        display: none;
    }

.archive-title {
	color: #FFF;/*文字色*/

  padding: 0.5em 0.5em ;/*上下左右の余白*/
  border-top: solid 3px #adadad;/*上線*/
  border-bottom: solid 3px #adadad;/*下線*/
}

 .category .entry-content,
    .category .post-meta {
        display: none;
    }


/************************************
 新着記事を3列横並びにする（スマホでは２列）
 ************************************/

.new-entry-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.new-entry-cards > a {/*３列にする*/
   width: 31.5%;
}

.new-entry-cards::after {/*最下列を左寄せ表示に*/
   content:"";
   display:block;
   width: 31.5%;
}
.widget-entry-cards.card-large-image .a-wrap {
    max-width: none;/*最大幅400pxの指定を初期化する*/
}


@media screen and (max-width:480px) {/*画面幅が480px以下のとき2列にする*/

   .new-entry-cards > a {
      width: 48%;
	}
	

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

/*834px以下*/
@media screen and (max-width: 834px){
	/*必要ならばここにコードを書く*/
	ul.block-four li {
		width: 50％;
    width: 50%; /* 834px以下の画面幅では2つ並ぶように50%に設定 */
  }	
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
	ul.block-four li {
		width: 50％;
    width: 100%; /* 480px以下の画面幅では1つずつ表示 */
  }
}