@charset "UTF-8";

/*!
Theme Name: cocoon-child-master
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

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

/* カバーブロック用：インナーブロックの中央寄せを追加 */
.wp-block-cover, .wp-block-cover-image{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}

/* 検索ボックスのスタイル改善 */
.special-search-area {
margin-bottom: 30px;
}
.special-search-area .wp-block-search__inside-wrapper {
position: relative;
background-color: #fff;
border-radius: 100px !important;
box-shadow: 0 3px 8px rgba(0,0,0,0.3);
transition: all 0.3s ease;
max-width: 630px !important;
width: 100% !important;
overflow: hidden;
}
.special-search-area .wp-block-search__inside-wrapper {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.special-search-area .wp-block-search__input {
border: none !important;
padding: 15px 20px !important;
font-size: 16px !important;
background-color: transparent !important;
width: 100% !important;
}
.special-search-area .wp-block-search__input::placeholder {
color: #999;
opacity: 0.8;
}
.special-search-area .wp-block-search__button {
background-color: #ce6303 !important;
color: white !important;
border: none !important;
border-radius: 100px !important;
padding: 8px 20px !important;
cursor: pointer !important;
margin: 5px !important;
transition: all 0.2s ease !important;
text-transform: none !important;
font-weight: normal !important;
font-size: 15px !important;
}
.special-search-area .wp-block-search__button {
background-color: #ECC4A0 !important;
transform: scale(1.05);
}
.special-search-area .wp-block-search__button svg {
fill: white !important;
}
/* モバイル対応 */
@media (max-width: 768px) {
.special-search-area .wp-block-search__inside-wrapper {
max-width: 90% !important;
margin: 0 auto;
}
.special-search-area .wp-block-search__input {
padding: 12px 15px !important;
font-size: 15px !important;
}
.special-search-area .wp-block-search__button {
padding: 6px 15px !important;
}
}
/* グループリストのスタイル */
.excerpt-list-wrapper {
margin-top: 20px;
}
.excerpt-item {
display: flex;
margin-bottom: 50px !important;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.excerpt-item {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.excerpt-thumbnail {
flex: 0 0 150px;
margin-right: 15px;
}
.excerpt-thumbnail img {
border-radius: 5px;
width: 100%;
height: auto;
}
.excerpt-text {
flex: 1;
}
.excerpt-text p {
margin-bottom: 10px;
}
.read-more-text {
display: block;
text-decoration: none;
color: #696969;
font-size: 14px;
text-align: right;
margin-left: auto;
}
.read-more-text {
text-decoration: underline;
opacity: 0.9;
}
#search-result-message {
padding: 10px;
background-color: #f8f9fa;
border-radius: 5px;
margin-bottom: 15px;
}

/* h2見出しのカスタマイズ - 投稿ページと固定ページの両方に適用 /
body .article h2,
body .page-body h2,
body .entry-content h2,
body #main .entry-content h2,
body.page .entry-content h2,
body.page-template .entry-content h2,
body.page .article h2,
#main .article h2 {
padding: 0.5em 0 !important;
border: none !important;
background: none !important;
position: relative !important;
margin-bottom: 1.5em !important;
color: #333 !important; / 文字色を黒に設定 */
background-color: transparent !important;
}
body .article h2::after,
body .page-body h2::after,
body .entry-content h2::after,
body #main .entry-content h2::after,
body.page .entry-content h2::after,
body.page-template .entry-content h2::after,
body.page .article h2::after,
#main .article h2::after {
content: "" !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 3px !important;
background: #ce6303 !important; /* キーカラーを設定 */
}

/* h2見出しにシンプルな下線を追加し、文字色を黒にする */
.article h2 {
  padding: 0.5em 0;
  border: none;
  background: none;
  position: relative;
  margin-bottom: 1.5em;
  color: #333; /* 文字色を黒に設定 */
}

.article h2::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ce6303; /* キーカラーを設定（お好みの色に変更できます） */
}

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

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

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